vendors~main.app.css 539 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014401540164017401840194020402140224023402440254026402740284029403040314032403340344035403640374038403940404041404240434044404540464047404840494050405140524053405440554056405740584059406040614062406340644065406640674068406940704071407240734074407540764077407840794080408140824083408440854086408740884089409040914092409340944095409640974098409941004101410241034104410541064107410841094110411141124113411441154116411741184119412041214122412341244125412641274128412941304131413241334134413541364137413841394140414141424143414441454146414741484149415041514152415341544155415641574158415941604161416241634164416541664167416841694170417141724173417441754176417741784179418041814182418341844185418641874188418941904191419241934194419541964197419841994200420142024203420442054206420742084209421042114212421342144215421642174218421942204221422242234224422542264227422842294230423142324233423442354236423742384239424042414242424342444245424642474248424942504251425242534254425542564257425842594260426142624263426442654266426742684269427042714272427342744275427642774278427942804281428242834284428542864287428842894290429142924293429442954296429742984299430043014302430343044305430643074308430943104311431243134314431543164317431843194320432143224323432443254326432743284329433043314332433343344335433643374338433943404341434243434344434543464347434843494350435143524353435443554356435743584359436043614362436343644365436643674368436943704371437243734374437543764377437843794380438143824383438443854386438743884389439043914392439343944395439643974398439944004401440244034404440544064407440844094410441144124413441444154416441744184419442044214422442344244425442644274428442944304431443244334434443544364437443844394440444144424443444444454446444744484449445044514452445344544455445644574458445944604461446244634464446544664467446844694470447144724473447444754476447744784479448044814482448344844485448644874488448944904491449244934494449544964497449844994500450145024503450445054506450745084509451045114512451345144515451645174518451945204521452245234524452545264527452845294530453145324533453445354536453745384539454045414542454345444545454645474548454945504551455245534554455545564557455845594560456145624563456445654566456745684569457045714572457345744575457645774578457945804581458245834584458545864587458845894590459145924593459445954596459745984599460046014602460346044605460646074608460946104611461246134614461546164617461846194620462146224623462446254626462746284629463046314632463346344635463646374638463946404641464246434644464546464647464846494650465146524653465446554656465746584659466046614662466346644665466646674668466946704671467246734674467546764677467846794680468146824683468446854686468746884689469046914692469346944695469646974698469947004701470247034704470547064707470847094710471147124713471447154716471747184719472047214722472347244725472647274728472947304731473247334734473547364737473847394740474147424743474447454746474747484749475047514752475347544755475647574758475947604761476247634764476547664767476847694770477147724773477447754776477747784779478047814782478347844785478647874788478947904791479247934794479547964797479847994800480148024803480448054806480748084809481048114812481348144815481648174818481948204821482248234824482548264827482848294830483148324833483448354836483748384839484048414842484348444845484648474848484948504851485248534854485548564857485848594860486148624863486448654866486748684869487048714872487348744875487648774878487948804881488248834884488548864887488848894890489148924893489448954896489748984899490049014902490349044905490649074908490949104911491249134914491549164917491849194920492149224923492449254926492749284929493049314932493349344935493649374938493949404941494249434944494549464947494849494950495149524953495449554956495749584959496049614962496349644965496649674968496949704971497249734974497549764977497849794980498149824983498449854986498749884989499049914992499349944995499649974998499950005001500250035004500550065007500850095010501150125013501450155016501750185019502050215022502350245025502650275028502950305031503250335034503550365037503850395040504150425043504450455046504750485049505050515052505350545055505650575058505950605061506250635064506550665067506850695070507150725073507450755076507750785079508050815082508350845085508650875088508950905091509250935094509550965097509850995100510151025103510451055106510751085109511051115112511351145115511651175118511951205121512251235124512551265127512851295130513151325133513451355136513751385139514051415142514351445145514651475148514951505151515251535154515551565157515851595160516151625163516451655166516751685169517051715172517351745175517651775178517951805181518251835184518551865187518851895190519151925193519451955196519751985199520052015202520352045205520652075208520952105211521252135214521552165217521852195220522152225223522452255226522752285229523052315232523352345235523652375238523952405241524252435244524552465247524852495250525152525253525452555256525752585259526052615262526352645265526652675268526952705271527252735274527552765277527852795280528152825283528452855286528752885289529052915292529352945295529652975298529953005301530253035304530553065307530853095310531153125313531453155316531753185319532053215322532353245325532653275328532953305331533253335334533553365337533853395340534153425343534453455346534753485349535053515352535353545355535653575358535953605361536253635364536553665367536853695370537153725373537453755376537753785379538053815382538353845385538653875388538953905391539253935394539553965397539853995400540154025403540454055406540754085409541054115412541354145415541654175418541954205421542254235424542554265427542854295430543154325433543454355436543754385439544054415442544354445445544654475448544954505451545254535454545554565457545854595460546154625463546454655466546754685469547054715472547354745475547654775478547954805481548254835484548554865487548854895490549154925493549454955496549754985499550055015502550355045505550655075508550955105511551255135514551555165517551855195520552155225523552455255526552755285529553055315532553355345535553655375538553955405541554255435544554555465547554855495550555155525553555455555556555755585559556055615562556355645565556655675568556955705571557255735574557555765577557855795580558155825583558455855586558755885589559055915592559355945595559655975598559956005601560256035604560556065607560856095610561156125613561456155616561756185619562056215622562356245625562656275628562956305631563256335634563556365637563856395640564156425643564456455646564756485649565056515652565356545655565656575658565956605661566256635664566556665667566856695670567156725673567456755676567756785679568056815682568356845685568656875688568956905691569256935694569556965697569856995700570157025703570457055706570757085709571057115712571357145715571657175718571957205721572257235724572557265727572857295730573157325733573457355736573757385739574057415742574357445745574657475748574957505751575257535754575557565757575857595760576157625763576457655766576757685769577057715772577357745775577657775778577957805781578257835784578557865787578857895790579157925793579457955796579757985799580058015802580358045805580658075808580958105811581258135814581558165817581858195820582158225823582458255826582758285829583058315832583358345835583658375838583958405841584258435844584558465847584858495850585158525853585458555856585758585859586058615862586358645865586658675868586958705871587258735874587558765877587858795880588158825883588458855886588758885889589058915892589358945895589658975898589959005901590259035904590559065907590859095910591159125913591459155916591759185919592059215922592359245925592659275928592959305931593259335934593559365937593859395940594159425943594459455946594759485949595059515952595359545955595659575958595959605961596259635964596559665967596859695970597159725973597459755976597759785979598059815982598359845985598659875988598959905991599259935994599559965997599859996000600160026003600460056006600760086009601060116012601360146015601660176018601960206021602260236024602560266027602860296030603160326033603460356036603760386039604060416042604360446045604660476048604960506051605260536054605560566057605860596060606160626063606460656066606760686069607060716072607360746075607660776078607960806081608260836084608560866087608860896090609160926093609460956096609760986099610061016102610361046105610661076108610961106111611261136114611561166117611861196120612161226123612461256126612761286129613061316132613361346135613661376138613961406141614261436144614561466147614861496150615161526153615461556156615761586159616061616162616361646165616661676168616961706171617261736174617561766177617861796180618161826183618461856186618761886189619061916192619361946195619661976198619962006201620262036204620562066207620862096210621162126213621462156216621762186219622062216222622362246225622662276228622962306231623262336234623562366237623862396240624162426243624462456246624762486249625062516252625362546255625662576258625962606261626262636264626562666267626862696270627162726273627462756276627762786279628062816282628362846285628662876288628962906291629262936294629562966297629862996300630163026303630463056306630763086309631063116312631363146315631663176318631963206321632263236324632563266327632863296330633163326333633463356336633763386339634063416342634363446345634663476348634963506351635263536354635563566357635863596360636163626363636463656366636763686369637063716372637363746375637663776378637963806381638263836384638563866387638863896390639163926393639463956396639763986399640064016402640364046405640664076408640964106411641264136414641564166417641864196420642164226423642464256426642764286429643064316432643364346435643664376438643964406441644264436444644564466447644864496450645164526453645464556456645764586459646064616462646364646465646664676468646964706471647264736474647564766477647864796480648164826483648464856486648764886489649064916492649364946495649664976498649965006501650265036504650565066507650865096510651165126513651465156516651765186519652065216522652365246525652665276528652965306531653265336534653565366537653865396540654165426543654465456546654765486549655065516552655365546555655665576558655965606561656265636564656565666567656865696570657165726573657465756576657765786579658065816582658365846585658665876588658965906591659265936594659565966597659865996600660166026603660466056606660766086609661066116612661366146615661666176618661966206621662266236624662566266627662866296630663166326633663466356636663766386639664066416642664366446645664666476648664966506651665266536654665566566657665866596660666166626663666466656666666766686669667066716672667366746675667666776678667966806681668266836684668566866687668866896690669166926693669466956696669766986699670067016702670367046705670667076708670967106711671267136714671567166717671867196720672167226723672467256726672767286729673067316732673367346735673667376738673967406741674267436744674567466747674867496750675167526753675467556756675767586759676067616762676367646765676667676768676967706771677267736774677567766777677867796780678167826783678467856786678767886789679067916792679367946795679667976798679968006801680268036804680568066807680868096810681168126813681468156816681768186819682068216822682368246825682668276828682968306831683268336834683568366837683868396840684168426843684468456846684768486849685068516852685368546855685668576858685968606861686268636864686568666867686868696870687168726873687468756876687768786879688068816882688368846885688668876888688968906891689268936894689568966897689868996900690169026903690469056906690769086909691069116912691369146915691669176918691969206921692269236924692569266927692869296930693169326933693469356936693769386939694069416942694369446945694669476948694969506951695269536954695569566957695869596960696169626963696469656966696769686969697069716972697369746975697669776978697969806981698269836984698569866987698869896990699169926993699469956996699769986999700070017002700370047005700670077008700970107011701270137014701570167017701870197020702170227023702470257026702770287029703070317032703370347035703670377038703970407041704270437044704570467047704870497050705170527053705470557056705770587059706070617062706370647065706670677068706970707071707270737074707570767077707870797080708170827083708470857086708770887089709070917092709370947095709670977098709971007101710271037104710571067107710871097110711171127113711471157116711771187119712071217122712371247125712671277128712971307131713271337134713571367137713871397140714171427143714471457146714771487149715071517152715371547155715671577158715971607161716271637164716571667167716871697170717171727173717471757176717771787179718071817182718371847185718671877188718971907191719271937194719571967197719871997200720172027203720472057206720772087209721072117212721372147215721672177218721972207221722272237224722572267227722872297230723172327233723472357236723772387239724072417242724372447245724672477248724972507251725272537254725572567257725872597260726172627263726472657266726772687269727072717272727372747275727672777278727972807281728272837284728572867287728872897290729172927293729472957296729772987299730073017302730373047305730673077308730973107311731273137314731573167317731873197320732173227323732473257326732773287329733073317332733373347335733673377338733973407341734273437344734573467347734873497350735173527353735473557356735773587359736073617362736373647365736673677368736973707371737273737374737573767377737873797380738173827383738473857386738773887389739073917392739373947395739673977398739974007401740274037404740574067407740874097410741174127413741474157416741774187419742074217422742374247425742674277428742974307431743274337434743574367437743874397440744174427443744474457446744774487449745074517452745374547455745674577458745974607461746274637464746574667467746874697470747174727473747474757476747774787479748074817482748374847485748674877488748974907491749274937494749574967497749874997500750175027503750475057506750775087509751075117512751375147515751675177518751975207521752275237524752575267527752875297530753175327533753475357536753775387539754075417542754375447545754675477548754975507551755275537554755575567557755875597560756175627563756475657566756775687569757075717572757375747575757675777578757975807581758275837584758575867587758875897590759175927593759475957596759775987599760076017602760376047605760676077608760976107611761276137614761576167617761876197620762176227623762476257626762776287629763076317632763376347635763676377638763976407641764276437644764576467647764876497650765176527653765476557656765776587659766076617662766376647665766676677668766976707671767276737674767576767677767876797680768176827683768476857686768776887689769076917692769376947695769676977698769977007701770277037704770577067707770877097710771177127713771477157716771777187719772077217722772377247725772677277728772977307731773277337734773577367737773877397740774177427743774477457746774777487749775077517752775377547755775677577758775977607761776277637764776577667767776877697770777177727773777477757776777777787779778077817782778377847785778677877788778977907791779277937794779577967797779877997800780178027803780478057806780778087809781078117812781378147815781678177818781978207821782278237824782578267827782878297830783178327833783478357836783778387839784078417842784378447845784678477848784978507851785278537854785578567857785878597860786178627863786478657866786778687869787078717872787378747875787678777878787978807881788278837884788578867887788878897890789178927893789478957896789778987899790079017902790379047905790679077908790979107911791279137914791579167917791879197920792179227923792479257926792779287929793079317932793379347935793679377938793979407941794279437944794579467947794879497950795179527953795479557956795779587959796079617962796379647965796679677968796979707971797279737974797579767977797879797980798179827983798479857986798779887989799079917992799379947995799679977998799980008001800280038004800580068007800880098010801180128013801480158016801780188019802080218022802380248025802680278028802980308031803280338034803580368037803880398040804180428043804480458046804780488049805080518052805380548055805680578058805980608061806280638064806580668067806880698070807180728073807480758076807780788079808080818082808380848085808680878088808980908091809280938094809580968097809880998100810181028103810481058106810781088109811081118112811381148115811681178118811981208121812281238124812581268127812881298130813181328133813481358136813781388139814081418142814381448145814681478148814981508151815281538154815581568157815881598160816181628163816481658166816781688169817081718172817381748175817681778178817981808181818281838184818581868187818881898190819181928193819481958196819781988199820082018202820382048205820682078208820982108211821282138214821582168217821882198220822182228223822482258226822782288229823082318232823382348235823682378238823982408241824282438244824582468247824882498250825182528253825482558256825782588259826082618262826382648265826682678268826982708271827282738274827582768277827882798280828182828283828482858286828782888289829082918292829382948295829682978298829983008301830283038304830583068307830883098310831183128313831483158316831783188319832083218322832383248325832683278328832983308331833283338334833583368337833883398340834183428343834483458346834783488349835083518352835383548355835683578358835983608361836283638364836583668367836883698370837183728373837483758376837783788379838083818382838383848385838683878388838983908391839283938394839583968397839883998400840184028403840484058406840784088409841084118412841384148415841684178418841984208421842284238424842584268427842884298430843184328433843484358436843784388439844084418442844384448445844684478448844984508451845284538454845584568457845884598460846184628463846484658466846784688469847084718472847384748475847684778478847984808481848284838484848584868487848884898490849184928493849484958496849784988499850085018502850385048505850685078508850985108511851285138514851585168517851885198520852185228523852485258526852785288529853085318532853385348535853685378538853985408541854285438544854585468547854885498550855185528553855485558556855785588559856085618562856385648565856685678568856985708571857285738574857585768577857885798580858185828583858485858586858785888589859085918592859385948595859685978598859986008601860286038604860586068607860886098610861186128613861486158616861786188619862086218622862386248625862686278628862986308631863286338634863586368637863886398640864186428643864486458646864786488649865086518652865386548655865686578658865986608661866286638664866586668667866886698670867186728673867486758676867786788679868086818682868386848685868686878688868986908691869286938694869586968697869886998700870187028703870487058706870787088709871087118712871387148715871687178718871987208721872287238724872587268727872887298730873187328733873487358736873787388739874087418742874387448745874687478748874987508751875287538754875587568757875887598760876187628763876487658766876787688769877087718772877387748775877687778778877987808781878287838784878587868787878887898790879187928793879487958796879787988799880088018802880388048805880688078808880988108811881288138814881588168817881888198820882188228823882488258826882788288829883088318832883388348835883688378838883988408841884288438844884588468847884888498850885188528853885488558856885788588859886088618862886388648865886688678868886988708871887288738874887588768877887888798880888188828883888488858886888788888889889088918892889388948895889688978898889989008901890289038904890589068907890889098910891189128913891489158916891789188919892089218922892389248925892689278928892989308931893289338934893589368937893889398940894189428943894489458946894789488949895089518952895389548955895689578958895989608961896289638964896589668967896889698970897189728973897489758976897789788979898089818982898389848985898689878988898989908991899289938994899589968997899889999000900190029003900490059006900790089009901090119012901390149015901690179018901990209021902290239024902590269027902890299030903190329033903490359036903790389039904090419042904390449045904690479048904990509051905290539054905590569057905890599060906190629063906490659066906790689069907090719072907390749075907690779078907990809081908290839084908590869087908890899090909190929093909490959096909790989099910091019102910391049105910691079108910991109111911291139114911591169117911891199120912191229123912491259126912791289129913091319132913391349135913691379138913991409141914291439144914591469147914891499150915191529153915491559156915791589159916091619162916391649165916691679168916991709171917291739174917591769177917891799180918191829183918491859186918791889189919091919192919391949195919691979198919992009201920292039204920592069207920892099210921192129213921492159216921792189219922092219222922392249225922692279228922992309231923292339234923592369237923892399240924192429243924492459246924792489249925092519252925392549255925692579258925992609261926292639264926592669267926892699270927192729273927492759276927792789279928092819282928392849285928692879288928992909291929292939294929592969297929892999300930193029303930493059306930793089309931093119312931393149315931693179318931993209321932293239324932593269327932893299330933193329333933493359336933793389339934093419342934393449345934693479348934993509351935293539354935593569357935893599360936193629363936493659366936793689369937093719372937393749375937693779378937993809381938293839384938593869387938893899390939193929393939493959396939793989399940094019402940394049405940694079408940994109411941294139414941594169417941894199420942194229423942494259426942794289429943094319432943394349435943694379438943994409441944294439444944594469447944894499450945194529453945494559456945794589459946094619462946394649465946694679468946994709471947294739474947594769477947894799480948194829483948494859486948794889489949094919492949394949495949694979498949995009501950295039504950595069507950895099510951195129513951495159516951795189519952095219522952395249525952695279528952995309531953295339534953595369537953895399540954195429543954495459546954795489549955095519552955395549555955695579558955995609561956295639564956595669567956895699570957195729573957495759576957795789579958095819582958395849585958695879588958995909591959295939594959595969597959895999600960196029603960496059606960796089609961096119612961396149615961696179618961996209621962296239624962596269627962896299630963196329633963496359636963796389639964096419642964396449645964696479648964996509651965296539654965596569657965896599660966196629663966496659666966796689669967096719672967396749675967696779678967996809681968296839684968596869687968896899690969196929693969496959696969796989699970097019702970397049705970697079708970997109711971297139714971597169717971897199720972197229723972497259726972797289729973097319732973397349735973697379738973997409741974297439744974597469747974897499750975197529753975497559756975797589759976097619762976397649765976697679768976997709771977297739774977597769777977897799780978197829783978497859786978797889789979097919792979397949795979697979798979998009801980298039804980598069807980898099810981198129813981498159816981798189819982098219822982398249825982698279828982998309831983298339834983598369837983898399840984198429843984498459846984798489849985098519852985398549855985698579858985998609861986298639864986598669867986898699870987198729873987498759876987798789879988098819882988398849885988698879888988998909891989298939894989598969897989898999900990199029903990499059906990799089909991099119912991399149915991699179918991999209921992299239924992599269927992899299930993199329933993499359936993799389939994099419942994399449945994699479948994999509951995299539954995599569957995899599960996199629963996499659966996799689969997099719972997399749975997699779978997999809981998299839984998599869987998899899990999199929993999499959996999799989999100001000110002100031000410005100061000710008100091001010011100121001310014100151001610017100181001910020100211002210023100241002510026100271002810029100301003110032100331003410035100361003710038100391004010041100421004310044100451004610047100481004910050100511005210053100541005510056100571005810059100601006110062100631006410065100661006710068100691007010071100721007310074100751007610077100781007910080100811008210083100841008510086100871008810089100901009110092100931009410095100961009710098100991010010101101021010310104101051010610107101081010910110101111011210113101141011510116101171011810119101201012110122101231012410125101261012710128101291013010131101321013310134101351013610137101381013910140101411014210143101441014510146101471014810149101501015110152101531015410155101561015710158101591016010161101621016310164101651016610167101681016910170101711017210173101741017510176101771017810179101801018110182101831018410185101861018710188101891019010191101921019310194101951019610197101981019910200102011020210203102041020510206102071020810209102101021110212102131021410215102161021710218102191022010221102221022310224102251022610227102281022910230102311023210233102341023510236102371023810239102401024110242102431024410245102461024710248102491025010251102521025310254102551025610257102581025910260102611026210263102641026510266102671026810269102701027110272102731027410275102761027710278102791028010281102821028310284102851028610287102881028910290102911029210293102941029510296102971029810299103001030110302103031030410305103061030710308103091031010311103121031310314103151031610317103181031910320103211032210323103241032510326103271032810329103301033110332103331033410335103361033710338103391034010341103421034310344103451034610347103481034910350103511035210353103541035510356103571035810359103601036110362103631036410365103661036710368103691037010371103721037310374103751037610377103781037910380103811038210383103841038510386103871038810389103901039110392103931039410395103961039710398103991040010401104021040310404104051040610407104081040910410104111041210413104141041510416104171041810419104201042110422104231042410425104261042710428104291043010431104321043310434104351043610437104381043910440104411044210443104441044510446104471044810449104501045110452104531045410455104561045710458104591046010461104621046310464104651046610467104681046910470104711047210473104741047510476104771047810479104801048110482104831048410485104861048710488104891049010491104921049310494104951049610497104981049910500105011050210503105041050510506105071050810509105101051110512105131051410515105161051710518105191052010521105221052310524105251052610527105281052910530105311053210533105341053510536105371053810539105401054110542105431054410545105461054710548105491055010551105521055310554105551055610557105581055910560105611056210563105641056510566105671056810569105701057110572105731057410575105761057710578105791058010581105821058310584105851058610587105881058910590105911059210593105941059510596105971059810599106001060110602106031060410605106061060710608106091061010611106121061310614106151061610617106181061910620106211062210623106241062510626106271062810629106301063110632106331063410635106361063710638106391064010641106421064310644106451064610647106481064910650106511065210653106541065510656106571065810659106601066110662106631066410665106661066710668106691067010671106721067310674106751067610677106781067910680106811068210683106841068510686106871068810689106901069110692106931069410695106961069710698106991070010701107021070310704107051070610707107081070910710107111071210713107141071510716107171071810719107201072110722107231072410725107261072710728107291073010731107321073310734107351073610737107381073910740107411074210743107441074510746107471074810749107501075110752107531075410755107561075710758107591076010761107621076310764107651076610767107681076910770107711077210773107741077510776107771077810779107801078110782107831078410785107861078710788107891079010791107921079310794107951079610797107981079910800108011080210803108041080510806108071080810809108101081110812108131081410815108161081710818108191082010821108221082310824108251082610827108281082910830108311083210833108341083510836108371083810839108401084110842108431084410845108461084710848108491085010851108521085310854108551085610857108581085910860108611086210863108641086510866108671086810869108701087110872108731087410875108761087710878108791088010881108821088310884108851088610887108881088910890108911089210893108941089510896108971089810899109001090110902109031090410905109061090710908109091091010911109121091310914109151091610917109181091910920109211092210923109241092510926109271092810929109301093110932109331093410935109361093710938109391094010941109421094310944109451094610947109481094910950109511095210953109541095510956109571095810959109601096110962109631096410965109661096710968109691097010971109721097310974109751097610977109781097910980109811098210983109841098510986109871098810989109901099110992109931099410995109961099710998109991100011001110021100311004110051100611007110081100911010110111101211013110141101511016110171101811019110201102111022110231102411025110261102711028110291103011031110321103311034110351103611037110381103911040110411104211043110441104511046110471104811049110501105111052110531105411055110561105711058110591106011061110621106311064110651106611067110681106911070110711107211073110741107511076110771107811079110801108111082110831108411085110861108711088110891109011091110921109311094110951109611097110981109911100111011110211103111041110511106111071110811109111101111111112111131111411115111161111711118111191112011121111221112311124111251112611127111281112911130111311113211133111341113511136111371113811139111401114111142111431114411145111461114711148111491115011151111521115311154111551115611157111581115911160111611116211163111641116511166111671116811169111701117111172111731117411175111761117711178111791118011181111821118311184111851118611187111881118911190111911119211193111941119511196111971119811199112001120111202112031120411205112061120711208112091121011211112121121311214112151121611217112181121911220112211122211223112241122511226112271122811229112301123111232112331123411235112361123711238112391124011241112421124311244112451124611247112481124911250112511125211253112541125511256112571125811259112601126111262112631126411265112661126711268112691127011271112721127311274112751127611277112781127911280112811128211283112841128511286112871128811289112901129111292112931129411295112961129711298112991130011301113021130311304113051130611307113081130911310113111131211313113141131511316113171131811319113201132111322113231132411325113261132711328113291133011331113321133311334113351133611337113381133911340113411134211343113441134511346113471134811349113501135111352113531135411355113561135711358113591136011361113621136311364113651136611367113681136911370113711137211373113741137511376113771137811379113801138111382113831138411385113861138711388113891139011391113921139311394113951139611397113981139911400114011140211403114041140511406114071140811409114101141111412114131141411415114161141711418114191142011421114221142311424114251142611427114281142911430114311143211433114341143511436114371143811439114401144111442114431144411445114461144711448114491145011451114521145311454114551145611457114581145911460114611146211463114641146511466114671146811469114701147111472114731147411475114761147711478114791148011481114821148311484114851148611487114881148911490114911149211493114941149511496114971149811499115001150111502115031150411505115061150711508115091151011511115121151311514115151151611517115181151911520115211152211523115241152511526115271152811529115301153111532115331153411535115361153711538115391154011541115421154311544115451154611547115481154911550115511155211553115541155511556115571155811559115601156111562115631156411565115661156711568115691157011571115721157311574115751157611577115781157911580115811158211583115841158511586115871158811589115901159111592115931159411595115961159711598115991160011601116021160311604116051160611607116081160911610116111161211613116141161511616116171161811619116201162111622116231162411625116261162711628116291163011631116321163311634116351163611637116381163911640116411164211643116441164511646116471164811649116501165111652116531165411655116561165711658116591166011661116621166311664116651166611667116681166911670116711167211673116741167511676116771167811679116801168111682116831168411685116861168711688116891169011691116921169311694116951169611697116981169911700117011170211703117041170511706117071170811709117101171111712117131171411715117161171711718117191172011721117221172311724117251172611727117281172911730117311173211733117341173511736117371173811739117401174111742117431174411745117461174711748117491175011751117521175311754117551175611757117581175911760117611176211763117641176511766117671176811769117701177111772117731177411775117761177711778117791178011781117821178311784117851178611787117881178911790117911179211793117941179511796117971179811799118001180111802118031180411805118061180711808118091181011811118121181311814118151181611817118181181911820118211182211823118241182511826118271182811829118301183111832118331183411835118361183711838118391184011841118421184311844118451184611847118481184911850118511185211853118541185511856118571185811859118601186111862118631186411865118661186711868118691187011871118721187311874118751187611877118781187911880118811188211883118841188511886118871188811889118901189111892118931189411895118961189711898118991190011901119021190311904119051190611907119081190911910119111191211913119141191511916119171191811919119201192111922119231192411925119261192711928119291193011931119321193311934119351193611937119381193911940119411194211943119441194511946119471194811949119501195111952119531195411955119561195711958119591196011961119621196311964119651196611967119681196911970119711197211973119741197511976119771197811979119801198111982119831198411985119861198711988119891199011991119921199311994119951199611997119981199912000120011200212003120041200512006120071200812009120101201112012120131201412015120161201712018120191202012021120221202312024120251202612027120281202912030120311203212033120341203512036120371203812039120401204112042120431204412045120461204712048120491205012051120521205312054120551205612057120581205912060120611206212063120641206512066120671206812069120701207112072120731207412075120761207712078120791208012081120821208312084120851208612087120881208912090120911209212093120941209512096120971209812099121001210112102121031210412105121061210712108121091211012111121121211312114121151211612117121181211912120121211212212123121241212512126121271212812129121301213112132121331213412135121361213712138121391214012141121421214312144121451214612147121481214912150121511215212153121541215512156121571215812159121601216112162121631216412165121661216712168121691217012171121721217312174121751217612177121781217912180121811218212183121841218512186121871218812189121901219112192121931219412195121961219712198121991220012201122021220312204122051220612207122081220912210122111221212213122141221512216122171221812219122201222112222122231222412225122261222712228122291223012231122321223312234122351223612237122381223912240122411224212243122441224512246122471224812249122501225112252122531225412255122561225712258122591226012261122621226312264122651226612267122681226912270122711227212273122741227512276122771227812279122801228112282122831228412285122861228712288122891229012291122921229312294122951229612297122981229912300123011230212303123041230512306123071230812309123101231112312123131231412315123161231712318123191232012321123221232312324123251232612327123281232912330123311233212333123341233512336123371233812339123401234112342123431234412345123461234712348123491235012351123521235312354123551235612357123581235912360123611236212363123641236512366123671236812369123701237112372123731237412375123761237712378123791238012381123821238312384123851238612387123881238912390123911239212393123941239512396123971239812399124001240112402124031240412405124061240712408124091241012411124121241312414124151241612417124181241912420124211242212423124241242512426124271242812429124301243112432124331243412435124361243712438124391244012441124421244312444124451244612447124481244912450124511245212453124541245512456124571245812459124601246112462124631246412465124661246712468124691247012471124721247312474124751247612477124781247912480124811248212483124841248512486124871248812489124901249112492124931249412495124961249712498124991250012501125021250312504125051250612507125081250912510125111251212513125141251512516125171251812519125201252112522125231252412525125261252712528125291253012531125321253312534125351253612537125381253912540125411254212543125441254512546125471254812549125501255112552125531255412555125561255712558125591256012561125621256312564125651256612567125681256912570125711257212573125741257512576125771257812579125801258112582125831258412585125861258712588125891259012591125921259312594125951259612597125981259912600126011260212603126041260512606126071260812609126101261112612126131261412615126161261712618126191262012621126221262312624126251262612627126281262912630126311263212633126341263512636126371263812639126401264112642126431264412645126461264712648126491265012651126521265312654126551265612657126581265912660126611266212663126641266512666126671266812669126701267112672126731267412675126761267712678126791268012681126821268312684126851268612687126881268912690126911269212693126941269512696126971269812699127001270112702127031270412705127061270712708127091271012711127121271312714127151271612717127181271912720127211272212723127241272512726127271272812729127301273112732127331273412735127361273712738127391274012741127421274312744127451274612747127481274912750127511275212753127541275512756127571275812759127601276112762127631276412765127661276712768127691277012771127721277312774127751277612777127781277912780127811278212783127841278512786127871278812789127901279112792127931279412795127961279712798127991280012801128021280312804128051280612807128081280912810128111281212813128141281512816128171281812819128201282112822128231282412825128261282712828128291283012831128321283312834128351283612837128381283912840128411284212843128441284512846128471284812849128501285112852128531285412855128561285712858128591286012861128621286312864128651286612867128681286912870128711287212873128741287512876128771287812879128801288112882128831288412885128861288712888128891289012891128921289312894128951289612897128981289912900129011290212903129041290512906129071290812909129101291112912129131291412915129161291712918129191292012921129221292312924129251292612927129281292912930129311293212933129341293512936129371293812939129401294112942129431294412945129461294712948129491295012951129521295312954129551295612957129581295912960129611296212963129641296512966129671296812969129701297112972129731297412975129761297712978129791298012981129821298312984129851298612987129881298912990129911299212993129941299512996129971299812999130001300113002130031300413005130061300713008130091301013011130121301313014130151301613017130181301913020130211302213023130241302513026130271302813029130301303113032130331303413035130361303713038130391304013041130421304313044130451304613047130481304913050130511305213053130541305513056130571305813059130601306113062130631306413065130661306713068130691307013071130721307313074130751307613077130781307913080130811308213083130841308513086130871308813089130901309113092130931309413095130961309713098130991310013101131021310313104131051310613107131081310913110131111311213113131141311513116131171311813119131201312113122131231312413125131261312713128131291313013131131321313313134131351313613137131381313913140131411314213143131441314513146131471314813149131501315113152131531315413155131561315713158131591316013161131621316313164131651316613167131681316913170131711317213173131741317513176131771317813179131801318113182131831318413185131861318713188131891319013191131921319313194131951319613197131981319913200132011320213203132041320513206132071320813209132101321113212132131321413215132161321713218132191322013221132221322313224132251322613227132281322913230132311323213233132341323513236132371323813239132401324113242132431324413245132461324713248132491325013251132521325313254132551325613257132581325913260132611326213263132641326513266132671326813269132701327113272132731327413275132761327713278132791328013281132821328313284132851328613287132881328913290132911329213293132941329513296132971329813299133001330113302133031330413305133061330713308133091331013311133121331313314133151331613317133181331913320133211332213323133241332513326133271332813329133301333113332133331333413335133361333713338133391334013341133421334313344133451334613347133481334913350133511335213353133541335513356133571335813359133601336113362133631336413365133661336713368133691337013371133721337313374133751337613377133781337913380133811338213383133841338513386133871338813389133901339113392133931339413395133961339713398133991340013401134021340313404134051340613407134081340913410134111341213413134141341513416134171341813419134201342113422134231342413425134261342713428134291343013431134321343313434134351343613437134381343913440134411344213443134441344513446134471344813449134501345113452134531345413455134561345713458134591346013461134621346313464134651346613467134681346913470134711347213473134741347513476134771347813479134801348113482134831348413485134861348713488134891349013491134921349313494134951349613497134981349913500135011350213503135041350513506135071350813509135101351113512135131351413515135161351713518135191352013521135221352313524135251352613527135281352913530135311353213533135341353513536135371353813539135401354113542135431354413545135461354713548135491355013551135521355313554135551355613557135581355913560135611356213563135641356513566135671356813569135701357113572135731357413575135761357713578135791358013581135821358313584135851358613587135881358913590135911359213593135941359513596135971359813599136001360113602136031360413605136061360713608136091361013611136121361313614136151361613617136181361913620136211362213623136241362513626136271362813629136301363113632136331363413635136361363713638136391364013641136421364313644136451364613647136481364913650136511365213653136541365513656136571365813659136601366113662136631366413665136661366713668136691367013671136721367313674136751367613677136781367913680136811368213683136841368513686136871368813689136901369113692136931369413695136961369713698136991370013701137021370313704137051370613707137081370913710137111371213713137141371513716137171371813719137201372113722137231372413725137261372713728137291373013731137321373313734137351373613737137381373913740137411374213743137441374513746137471374813749137501375113752137531375413755137561375713758137591376013761137621376313764137651376613767137681376913770137711377213773137741377513776137771377813779137801378113782137831378413785137861378713788137891379013791137921379313794137951379613797137981379913800138011380213803138041380513806138071380813809138101381113812138131381413815138161381713818138191382013821138221382313824138251382613827138281382913830138311383213833138341383513836138371383813839138401384113842138431384413845138461384713848138491385013851138521385313854138551385613857138581385913860138611386213863138641386513866138671386813869138701387113872138731387413875138761387713878138791388013881138821388313884138851388613887138881388913890138911389213893138941389513896138971389813899139001390113902139031390413905139061390713908139091391013911139121391313914139151391613917139181391913920139211392213923139241392513926139271392813929139301393113932139331393413935139361393713938139391394013941139421394313944139451394613947139481394913950139511395213953139541395513956139571395813959139601396113962139631396413965139661396713968139691397013971139721397313974139751397613977139781397913980139811398213983139841398513986139871398813989139901399113992139931399413995139961399713998139991400014001140021400314004140051400614007140081400914010140111401214013140141401514016140171401814019140201402114022140231402414025140261402714028140291403014031140321403314034140351403614037140381403914040140411404214043140441404514046140471404814049140501405114052140531405414055140561405714058140591406014061140621406314064140651406614067140681406914070140711407214073140741407514076140771407814079140801408114082140831408414085140861408714088140891409014091140921409314094140951409614097140981409914100141011410214103141041410514106141071410814109141101411114112141131411414115141161411714118141191412014121141221412314124141251412614127141281412914130141311413214133141341413514136141371413814139141401414114142141431414414145141461414714148141491415014151141521415314154141551415614157141581415914160141611416214163141641416514166141671416814169141701417114172141731417414175141761417714178141791418014181141821418314184141851418614187141881418914190141911419214193141941419514196141971419814199142001420114202142031420414205142061420714208142091421014211142121421314214142151421614217142181421914220142211422214223142241422514226142271422814229142301423114232142331423414235142361423714238142391424014241142421424314244142451424614247142481424914250142511425214253142541425514256142571425814259142601426114262142631426414265142661426714268142691427014271142721427314274142751427614277142781427914280142811428214283142841428514286142871428814289142901429114292142931429414295142961429714298142991430014301143021430314304143051430614307143081430914310143111431214313143141431514316143171431814319143201432114322143231432414325143261432714328143291433014331143321433314334143351433614337143381433914340143411434214343143441434514346143471434814349143501435114352143531435414355143561435714358143591436014361143621436314364143651436614367143681436914370143711437214373143741437514376143771437814379143801438114382143831438414385143861438714388143891439014391143921439314394143951439614397143981439914400144011440214403144041440514406144071440814409144101441114412144131441414415144161441714418144191442014421144221442314424144251442614427144281442914430144311443214433144341443514436144371443814439144401444114442144431444414445144461444714448144491445014451144521445314454144551445614457144581445914460144611446214463144641446514466144671446814469144701447114472144731447414475144761447714478144791448014481144821448314484144851448614487144881448914490144911449214493144941449514496144971449814499145001450114502145031450414505145061450714508145091451014511145121451314514145151451614517145181451914520145211452214523145241452514526145271452814529145301453114532145331453414535145361453714538145391454014541145421454314544145451454614547145481454914550145511455214553145541455514556145571455814559145601456114562145631456414565145661456714568145691457014571145721457314574145751457614577145781457914580145811458214583145841458514586145871458814589145901459114592145931459414595145961459714598145991460014601146021460314604146051460614607146081460914610146111461214613146141461514616146171461814619146201462114622146231462414625146261462714628146291463014631146321463314634146351463614637146381463914640146411464214643146441464514646146471464814649146501465114652146531465414655146561465714658146591466014661146621466314664146651466614667146681466914670146711467214673146741467514676146771467814679146801468114682146831468414685146861468714688146891469014691146921469314694146951469614697146981469914700147011470214703147041470514706147071470814709147101471114712147131471414715147161471714718147191472014721147221472314724147251472614727147281472914730147311473214733147341473514736147371473814739147401474114742147431474414745147461474714748147491475014751147521475314754147551475614757147581475914760147611476214763147641476514766147671476814769147701477114772147731477414775147761477714778147791478014781147821478314784147851478614787147881478914790147911479214793147941479514796147971479814799148001480114802148031480414805148061480714808148091481014811148121481314814148151481614817148181481914820148211482214823148241482514826148271482814829148301483114832148331483414835148361483714838148391484014841148421484314844148451484614847148481484914850148511485214853148541485514856148571485814859148601486114862148631486414865148661486714868148691487014871148721487314874148751487614877148781487914880148811488214883148841488514886148871488814889148901489114892148931489414895148961489714898148991490014901149021490314904149051490614907149081490914910149111491214913149141491514916149171491814919149201492114922149231492414925149261492714928149291493014931149321493314934149351493614937149381493914940149411494214943149441494514946149471494814949149501495114952149531495414955149561495714958149591496014961149621496314964149651496614967149681496914970149711497214973149741497514976149771497814979149801498114982149831498414985149861498714988149891499014991149921499314994149951499614997149981499915000150011500215003150041500515006150071500815009150101501115012150131501415015150161501715018150191502015021150221502315024150251502615027150281502915030150311503215033150341503515036150371503815039150401504115042150431504415045150461504715048150491505015051150521505315054150551505615057150581505915060150611506215063150641506515066150671506815069150701507115072150731507415075150761507715078150791508015081150821508315084150851508615087150881508915090150911509215093150941509515096150971509815099151001510115102151031510415105151061510715108151091511015111151121511315114151151511615117151181511915120151211512215123151241512515126151271512815129151301513115132151331513415135151361513715138151391514015141151421514315144151451514615147151481514915150151511515215153151541515515156151571515815159151601516115162151631516415165151661516715168151691517015171151721517315174151751517615177151781517915180151811518215183151841518515186151871518815189151901519115192151931519415195151961519715198151991520015201152021520315204152051520615207152081520915210152111521215213152141521515216152171521815219152201522115222152231522415225152261522715228152291523015231152321523315234152351523615237152381523915240152411524215243152441524515246152471524815249152501525115252152531525415255152561525715258152591526015261152621526315264152651526615267152681526915270152711527215273152741527515276152771527815279152801528115282152831528415285152861528715288152891529015291152921529315294152951529615297152981529915300153011530215303153041530515306153071530815309153101531115312153131531415315153161531715318153191532015321153221532315324153251532615327153281532915330153311533215333153341533515336153371533815339153401534115342153431534415345153461534715348153491535015351153521535315354153551535615357153581535915360153611536215363153641536515366153671536815369153701537115372153731537415375153761537715378153791538015381153821538315384153851538615387153881538915390153911539215393153941539515396153971539815399154001540115402154031540415405154061540715408154091541015411154121541315414154151541615417154181541915420154211542215423154241542515426154271542815429154301543115432154331543415435154361543715438154391544015441154421544315444154451544615447154481544915450154511545215453154541545515456154571545815459154601546115462154631546415465154661546715468154691547015471154721547315474154751547615477154781547915480154811548215483154841548515486154871548815489154901549115492154931549415495154961549715498154991550015501155021550315504155051550615507155081550915510155111551215513155141551515516155171551815519155201552115522155231552415525155261552715528155291553015531155321553315534155351553615537155381553915540155411554215543155441554515546155471554815549155501555115552155531555415555155561555715558155591556015561155621556315564155651556615567155681556915570155711557215573155741557515576155771557815579155801558115582155831558415585155861558715588155891559015591155921559315594155951559615597155981559915600156011560215603156041560515606156071560815609156101561115612156131561415615156161561715618156191562015621156221562315624156251562615627156281562915630156311563215633156341563515636156371563815639156401564115642156431564415645156461564715648156491565015651156521565315654156551565615657156581565915660156611566215663156641566515666156671566815669156701567115672156731567415675156761567715678156791568015681156821568315684156851568615687156881568915690156911569215693156941569515696156971569815699157001570115702157031570415705157061570715708157091571015711157121571315714157151571615717157181571915720157211572215723157241572515726157271572815729157301573115732157331573415735157361573715738157391574015741157421574315744157451574615747157481574915750157511575215753157541575515756157571575815759157601576115762157631576415765157661576715768157691577015771157721577315774157751577615777157781577915780157811578215783157841578515786157871578815789157901579115792157931579415795157961579715798157991580015801158021580315804158051580615807158081580915810158111581215813158141581515816158171581815819158201582115822158231582415825158261582715828158291583015831158321583315834158351583615837158381583915840158411584215843158441584515846158471584815849158501585115852158531585415855158561585715858158591586015861158621586315864158651586615867158681586915870158711587215873158741587515876158771587815879158801588115882158831588415885158861588715888158891589015891158921589315894158951589615897158981589915900159011590215903159041590515906159071590815909159101591115912159131591415915159161591715918159191592015921159221592315924159251592615927159281592915930159311593215933159341593515936159371593815939159401594115942159431594415945159461594715948159491595015951159521595315954159551595615957159581595915960159611596215963159641596515966159671596815969159701597115972159731597415975159761597715978159791598015981159821598315984159851598615987159881598915990159911599215993159941599515996159971599815999160001600116002160031600416005160061600716008160091601016011160121601316014160151601616017160181601916020160211602216023160241602516026160271602816029160301603116032160331603416035160361603716038160391604016041160421604316044160451604616047160481604916050160511605216053160541605516056160571605816059160601606116062160631606416065160661606716068160691607016071160721607316074160751607616077160781607916080160811608216083160841608516086160871608816089160901609116092160931609416095160961609716098160991610016101161021610316104161051610616107161081610916110161111611216113161141611516116161171611816119161201612116122161231612416125161261612716128161291613016131161321613316134161351613616137161381613916140161411614216143161441614516146161471614816149161501615116152161531615416155161561615716158161591616016161161621616316164161651616616167161681616916170161711617216173161741617516176161771617816179161801618116182161831618416185161861618716188161891619016191161921619316194161951619616197161981619916200162011620216203162041620516206162071620816209162101621116212162131621416215162161621716218162191622016221162221622316224162251622616227162281622916230162311623216233162341623516236162371623816239162401624116242162431624416245162461624716248162491625016251162521625316254162551625616257162581625916260162611626216263162641626516266162671626816269162701627116272162731627416275162761627716278162791628016281162821628316284162851628616287162881628916290162911629216293162941629516296162971629816299163001630116302163031630416305163061630716308163091631016311163121631316314163151631616317163181631916320163211632216323163241632516326163271632816329163301633116332163331633416335163361633716338163391634016341163421634316344163451634616347163481634916350163511635216353163541635516356163571635816359163601636116362163631636416365163661636716368163691637016371163721637316374163751637616377163781637916380163811638216383163841638516386163871638816389163901639116392163931639416395163961639716398163991640016401164021640316404164051640616407164081640916410164111641216413164141641516416164171641816419164201642116422164231642416425164261642716428164291643016431164321643316434164351643616437164381643916440164411644216443164441644516446164471644816449164501645116452164531645416455164561645716458164591646016461164621646316464164651646616467164681646916470164711647216473164741647516476164771647816479164801648116482164831648416485164861648716488164891649016491164921649316494164951649616497164981649916500165011650216503165041650516506165071650816509165101651116512165131651416515165161651716518165191652016521165221652316524165251652616527165281652916530165311653216533165341653516536165371653816539165401654116542165431654416545165461654716548165491655016551165521655316554165551655616557165581655916560165611656216563165641656516566165671656816569165701657116572165731657416575165761657716578165791658016581165821658316584165851658616587165881658916590165911659216593165941659516596165971659816599166001660116602166031660416605166061660716608166091661016611166121661316614166151661616617166181661916620166211662216623166241662516626166271662816629166301663116632166331663416635166361663716638166391664016641166421664316644166451664616647166481664916650166511665216653166541665516656166571665816659166601666116662166631666416665166661666716668166691667016671166721667316674166751667616677166781667916680166811668216683166841668516686166871668816689166901669116692166931669416695166961669716698166991670016701167021670316704167051670616707167081670916710167111671216713167141671516716167171671816719167201672116722167231672416725167261672716728167291673016731167321673316734167351673616737167381673916740167411674216743167441674516746167471674816749167501675116752167531675416755167561675716758167591676016761167621676316764167651676616767167681676916770167711677216773167741677516776167771677816779167801678116782167831678416785167861678716788167891679016791167921679316794167951679616797167981679916800168011680216803168041680516806168071680816809168101681116812168131681416815168161681716818168191682016821168221682316824168251682616827168281682916830168311683216833168341683516836168371683816839168401684116842168431684416845168461684716848168491685016851168521685316854168551685616857168581685916860168611686216863168641686516866168671686816869168701687116872168731687416875168761687716878168791688016881168821688316884168851688616887168881688916890168911689216893168941689516896168971689816899169001690116902169031690416905169061690716908169091691016911169121691316914169151691616917169181691916920169211692216923169241692516926169271692816929169301693116932169331693416935169361693716938169391694016941169421694316944169451694616947169481694916950169511695216953169541695516956169571695816959169601696116962169631696416965169661696716968169691697016971169721697316974169751697616977169781697916980169811698216983169841698516986169871698816989169901699116992169931699416995169961699716998169991700017001170021700317004170051700617007170081700917010170111701217013170141701517016170171701817019170201702117022170231702417025170261702717028170291703017031170321703317034170351703617037170381703917040170411704217043170441704517046170471704817049170501705117052170531705417055170561705717058170591706017061170621706317064170651706617067170681706917070170711707217073170741707517076170771707817079170801708117082170831708417085170861708717088170891709017091170921709317094170951709617097170981709917100171011710217103171041710517106171071710817109171101711117112171131711417115171161711717118171191712017121171221712317124171251712617127171281712917130171311713217133171341713517136171371713817139171401714117142171431714417145171461714717148171491715017151171521715317154171551715617157171581715917160171611716217163171641716517166171671716817169171701717117172171731717417175171761717717178171791718017181171821718317184171851718617187171881718917190171911719217193171941719517196171971719817199172001720117202172031720417205172061720717208172091721017211172121721317214172151721617217172181721917220172211722217223172241722517226172271722817229172301723117232172331723417235172361723717238172391724017241172421724317244172451724617247172481724917250172511725217253172541725517256172571725817259172601726117262172631726417265172661726717268172691727017271172721727317274172751727617277172781727917280172811728217283172841728517286172871728817289172901729117292172931729417295172961729717298172991730017301173021730317304173051730617307173081730917310173111731217313173141731517316173171731817319173201732117322173231732417325173261732717328173291733017331173321733317334173351733617337173381733917340173411734217343173441734517346173471734817349173501735117352173531735417355173561735717358173591736017361173621736317364173651736617367173681736917370173711737217373173741737517376173771737817379173801738117382173831738417385173861738717388173891739017391173921739317394173951739617397173981739917400174011740217403174041740517406174071740817409174101741117412174131741417415174161741717418174191742017421174221742317424174251742617427174281742917430174311743217433174341743517436174371743817439174401744117442174431744417445174461744717448174491745017451174521745317454174551745617457174581745917460174611746217463174641746517466174671746817469174701747117472174731747417475174761747717478174791748017481174821748317484174851748617487174881748917490174911749217493174941749517496174971749817499175001750117502175031750417505175061750717508175091751017511175121751317514175151751617517175181751917520175211752217523175241752517526175271752817529175301753117532175331753417535175361753717538175391754017541175421754317544175451754617547175481754917550175511755217553175541755517556175571755817559175601756117562175631756417565175661756717568175691757017571175721757317574175751757617577175781757917580175811758217583175841758517586175871758817589175901759117592175931759417595175961759717598175991760017601176021760317604176051760617607176081760917610176111761217613176141761517616176171761817619176201762117622176231762417625176261762717628176291763017631176321763317634176351763617637176381763917640176411764217643176441764517646176471764817649176501765117652176531765417655176561765717658176591766017661176621766317664176651766617667176681766917670176711767217673176741767517676176771767817679176801768117682176831768417685176861768717688176891769017691176921769317694176951769617697176981769917700177011770217703177041770517706177071770817709177101771117712177131771417715177161771717718177191772017721177221772317724177251772617727177281772917730177311773217733177341773517736177371773817739177401774117742177431774417745177461774717748177491775017751177521775317754177551775617757177581775917760177611776217763177641776517766177671776817769177701777117772177731777417775177761777717778177791778017781177821778317784177851778617787177881778917790177911779217793177941779517796177971779817799178001780117802178031780417805178061780717808178091781017811178121781317814178151781617817178181781917820178211782217823178241782517826178271782817829178301783117832178331783417835178361783717838178391784017841178421784317844178451784617847178481784917850178511785217853178541785517856178571785817859178601786117862178631786417865178661786717868178691787017871178721787317874178751787617877178781787917880178811788217883178841788517886178871788817889178901789117892178931789417895178961789717898178991790017901179021790317904179051790617907179081790917910179111791217913179141791517916179171791817919179201792117922179231792417925179261792717928179291793017931179321793317934179351793617937179381793917940179411794217943179441794517946179471794817949179501795117952179531795417955179561795717958179591796017961179621796317964179651796617967179681796917970179711797217973179741797517976179771797817979179801798117982179831798417985179861798717988179891799017991179921799317994179951799617997179981799918000180011800218003180041800518006180071800818009180101801118012180131801418015180161801718018180191802018021180221802318024180251802618027180281802918030180311803218033180341803518036180371803818039180401804118042180431804418045180461804718048180491805018051180521805318054180551805618057180581805918060180611806218063180641806518066180671806818069180701807118072180731807418075180761807718078180791808018081180821808318084180851808618087180881808918090180911809218093180941809518096180971809818099181001810118102181031810418105181061810718108181091811018111181121811318114181151811618117181181811918120181211812218123181241812518126181271812818129181301813118132181331813418135181361813718138181391814018141181421814318144181451814618147181481814918150181511815218153181541815518156181571815818159181601816118162181631816418165181661816718168181691817018171181721817318174181751817618177181781817918180181811818218183181841818518186181871818818189181901819118192181931819418195181961819718198181991820018201182021820318204182051820618207182081820918210182111821218213182141821518216182171821818219182201822118222182231822418225182261822718228182291823018231182321823318234182351823618237182381823918240182411824218243182441824518246182471824818249182501825118252182531825418255182561825718258182591826018261182621826318264182651826618267182681826918270182711827218273182741827518276182771827818279182801828118282182831828418285182861828718288182891829018291182921829318294182951829618297182981829918300183011830218303183041830518306183071830818309183101831118312183131831418315183161831718318183191832018321183221832318324183251832618327183281832918330183311833218333183341833518336183371833818339183401834118342183431834418345183461834718348183491835018351183521835318354183551835618357183581835918360183611836218363183641836518366183671836818369183701837118372183731837418375183761837718378183791838018381183821838318384183851838618387183881838918390183911839218393183941839518396183971839818399184001840118402184031840418405184061840718408184091841018411184121841318414184151841618417184181841918420184211842218423184241842518426184271842818429184301843118432184331843418435184361843718438184391844018441184421844318444184451844618447184481844918450184511845218453184541845518456184571845818459184601846118462184631846418465184661846718468184691847018471184721847318474184751847618477184781847918480184811848218483184841848518486184871848818489184901849118492184931849418495184961849718498184991850018501185021850318504185051850618507185081850918510185111851218513185141851518516185171851818519185201852118522185231852418525185261852718528185291853018531185321853318534185351853618537185381853918540185411854218543185441854518546185471854818549185501855118552185531855418555185561855718558185591856018561185621856318564185651856618567185681856918570185711857218573185741857518576185771857818579185801858118582185831858418585185861858718588185891859018591185921859318594185951859618597185981859918600186011860218603186041860518606186071860818609186101861118612186131861418615186161861718618186191862018621186221862318624186251862618627186281862918630186311863218633186341863518636186371863818639186401864118642186431864418645186461864718648186491865018651186521865318654186551865618657186581865918660186611866218663186641866518666186671866818669186701867118672186731867418675186761867718678186791868018681186821868318684186851868618687186881868918690186911869218693186941869518696186971869818699187001870118702187031870418705187061870718708187091871018711187121871318714187151871618717187181871918720187211872218723187241872518726187271872818729187301873118732187331873418735187361873718738187391874018741187421874318744187451874618747187481874918750187511875218753187541875518756187571875818759187601876118762187631876418765187661876718768187691877018771187721877318774187751877618777187781877918780187811878218783187841878518786187871878818789187901879118792187931879418795187961879718798187991880018801188021880318804188051880618807188081880918810188111881218813188141881518816188171881818819188201882118822188231882418825188261882718828188291883018831188321883318834188351883618837188381883918840188411884218843188441884518846188471884818849188501885118852188531885418855188561885718858188591886018861188621886318864188651886618867188681886918870188711887218873188741887518876188771887818879188801888118882188831888418885188861888718888188891889018891188921889318894188951889618897188981889918900189011890218903189041890518906189071890818909189101891118912189131891418915189161891718918189191892018921189221892318924189251892618927189281892918930189311893218933189341893518936189371893818939189401894118942189431894418945189461894718948189491895018951189521895318954
  1. /**
  2. * Framework7 4.5.2
  3. * Full featured mobile HTML framework for building iOS & Android apps
  4. * http://framework7.io/
  5. *
  6. * Copyright 2014-2019 Vladimir Kharlampidi
  7. *
  8. * Released under the MIT License
  9. *
  10. * Released on: September 27, 2019
  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
  80. ==================== */
  81. :root {
  82. --f7-font-size: 14px;
  83. }
  84. .ios {
  85. --f7-font-family: -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif;
  86. --f7-text-color: #000;
  87. --f7-line-height: 1.4;
  88. }
  89. .ios .theme-dark,
  90. .ios.theme-dark {
  91. --f7-text-color: #fff;
  92. }
  93. .md {
  94. --f7-font-family: Roboto, system-ui, Noto, Helvetica, Arial, sans-serif;
  95. --f7-text-color: #212121;
  96. --f7-line-height: 1.5;
  97. }
  98. .md .theme-dark,
  99. .md.theme-dark {
  100. --f7-text-color: rgba(255, 255, 255, 0.87);
  101. }
  102. .aurora {
  103. --f7-font-family: -apple-system, system-ui, Helvetica, Arial, sans-serif;
  104. --f7-text-color: #000;
  105. --f7-line-height: 1.5;
  106. }
  107. .aurora .theme-dark,
  108. .aurora.theme-dark {
  109. --f7-text-color: #fff;
  110. }
  111. /*====================
  112. Bars
  113. ==================== */
  114. :root {
  115. /*
  116. --f7-bars-link-color: var(--f7-theme-color);
  117. */
  118. --f7-bars-bg-image: none;
  119. --f7-bars-bg-color: #f7f7f8;
  120. --f7-bars-bg-color-rgb: 247, 247, 248;
  121. --f7-bars-text-color: #000;
  122. --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%);
  123. --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%);
  124. }
  125. .theme-dark {
  126. --f7-bars-bg-color: #1b1b1b;
  127. --f7-bars-text-color: #fff;
  128. }
  129. .ios {
  130. --f7-bars-border-color: #c4c4c4;
  131. }
  132. .ios .theme-dark,
  133. .ios.theme-dark {
  134. --f7-bars-border-color: #282829;
  135. }
  136. .md {
  137. --f7-bars-border-color: transparent;
  138. }
  139. .aurora {
  140. --f7-bars-border-color: rgba(0, 0, 0, 0.2);
  141. }
  142. .aurora .theme-dark,
  143. .aurora.theme-dark {
  144. --f7-bars-border-color: #282829;
  145. }
  146. /*====================
  147. Color Themes
  148. ==================== */
  149. .text-color-primary {
  150. --f7-theme-color-text-color: var(--f7-theme-color);
  151. }
  152. .bg-color-primary {
  153. --f7-theme-color-bg-color: var(--f7-theme-color);
  154. }
  155. .border-color-primary {
  156. --f7-theme-color-border-color: var(--f7-theme-color);
  157. }
  158. .ripple-color-primary {
  159. --f7-theme-color-ripple-color: rgba(var(--f7-theme-color-rgb), 0.3);
  160. }
  161. :root {
  162. --f7-color-red: #ff3b30;
  163. --f7-color-red-rgb: 255, 59, 48;
  164. --f7-color-red-shade: #ff1407;
  165. --f7-color-red-tint: #ff6259;
  166. --f7-color-green: #4cd964;
  167. --f7-color-green-rgb: 76, 217, 100;
  168. --f7-color-green-shade: #2cd048;
  169. --f7-color-green-tint: #6ee081;
  170. --f7-color-blue: #2196f3;
  171. --f7-color-blue-rgb: 33, 150, 243;
  172. --f7-color-blue-shade: #0c82df;
  173. --f7-color-blue-tint: #48a8f5;
  174. --f7-color-pink: #ff2d55;
  175. --f7-color-pink-rgb: 255, 45, 85;
  176. --f7-color-pink-shade: #ff0434;
  177. --f7-color-pink-tint: #ff5676;
  178. --f7-color-yellow: #ffcc00;
  179. --f7-color-yellow-rgb: 255, 204, 0;
  180. --f7-color-yellow-shade: #d6ab00;
  181. --f7-color-yellow-tint: #ffd429;
  182. --f7-color-orange: #ff9500;
  183. --f7-color-orange-rgb: 255, 149, 0;
  184. --f7-color-orange-shade: #d67d00;
  185. --f7-color-orange-tint: #ffa629;
  186. --f7-color-purple: #9c27b0;
  187. --f7-color-purple-rgb: 156, 39, 176;
  188. --f7-color-purple-shade: #7e208f;
  189. --f7-color-purple-tint: #b92fd1;
  190. --f7-color-deeppurple: #673ab7;
  191. --f7-color-deeppurple-rgb: 103, 58, 183;
  192. --f7-color-deeppurple-shade: #563098;
  193. --f7-color-deeppurple-tint: #7c52c8;
  194. --f7-color-lightblue: #5ac8fa;
  195. --f7-color-lightblue-rgb: 90, 200, 250;
  196. --f7-color-lightblue-shade: #32bbf9;
  197. --f7-color-lightblue-tint: #82d5fb;
  198. --f7-color-teal: #009688;
  199. --f7-color-teal-rgb: 0, 150, 136;
  200. --f7-color-teal-shade: #006d63;
  201. --f7-color-teal-tint: #00bfad;
  202. --f7-color-lime: #cddc39;
  203. --f7-color-lime-rgb: 205, 220, 57;
  204. --f7-color-lime-shade: #bac923;
  205. --f7-color-lime-tint: #d6e25c;
  206. --f7-color-deeporange: #ff6b22;
  207. --f7-color-deeporange-rgb: 255, 107, 34;
  208. --f7-color-deeporange-shade: #f85200;
  209. --f7-color-deeporange-tint: #ff864b;
  210. --f7-color-gray: #8e8e93;
  211. --f7-color-gray-rgb: 142, 142, 147;
  212. --f7-color-gray-shade: #79797f;
  213. --f7-color-gray-tint: #a3a3a7;
  214. --f7-color-white: #ffffff;
  215. --f7-color-white-rgb: 255, 255, 255;
  216. --f7-color-white-shade: #ebebeb;
  217. --f7-color-white-tint: #ffffff;
  218. --f7-color-black: #000000;
  219. --f7-color-black-rgb: 0, 0, 0;
  220. --f7-color-black-shade: #000000;
  221. --f7-color-black-tint: #141414;
  222. }
  223. .color-theme-red {
  224. --f7-theme-color: #ff3b30;
  225. --f7-theme-color-rgb: 255, 59, 48;
  226. --f7-theme-color-shade: #ff1407;
  227. --f7-theme-color-tint: #ff6259;
  228. }
  229. .color-theme-green {
  230. --f7-theme-color: #4cd964;
  231. --f7-theme-color-rgb: 76, 217, 100;
  232. --f7-theme-color-shade: #2cd048;
  233. --f7-theme-color-tint: #6ee081;
  234. }
  235. .color-theme-blue {
  236. --f7-theme-color: #2196f3;
  237. --f7-theme-color-rgb: 33, 150, 243;
  238. --f7-theme-color-shade: #0c82df;
  239. --f7-theme-color-tint: #48a8f5;
  240. }
  241. .color-theme-pink {
  242. --f7-theme-color: #ff2d55;
  243. --f7-theme-color-rgb: 255, 45, 85;
  244. --f7-theme-color-shade: #ff0434;
  245. --f7-theme-color-tint: #ff5676;
  246. }
  247. .color-theme-yellow {
  248. --f7-theme-color: #ffcc00;
  249. --f7-theme-color-rgb: 255, 204, 0;
  250. --f7-theme-color-shade: #d6ab00;
  251. --f7-theme-color-tint: #ffd429;
  252. }
  253. .color-theme-orange {
  254. --f7-theme-color: #ff9500;
  255. --f7-theme-color-rgb: 255, 149, 0;
  256. --f7-theme-color-shade: #d67d00;
  257. --f7-theme-color-tint: #ffa629;
  258. }
  259. .color-theme-purple {
  260. --f7-theme-color: #9c27b0;
  261. --f7-theme-color-rgb: 156, 39, 176;
  262. --f7-theme-color-shade: #7e208f;
  263. --f7-theme-color-tint: #b92fd1;
  264. }
  265. .color-theme-deeppurple {
  266. --f7-theme-color: #673ab7;
  267. --f7-theme-color-rgb: 103, 58, 183;
  268. --f7-theme-color-shade: #563098;
  269. --f7-theme-color-tint: #7c52c8;
  270. }
  271. .color-theme-lightblue {
  272. --f7-theme-color: #5ac8fa;
  273. --f7-theme-color-rgb: 90, 200, 250;
  274. --f7-theme-color-shade: #32bbf9;
  275. --f7-theme-color-tint: #82d5fb;
  276. }
  277. .color-theme-teal {
  278. --f7-theme-color: #009688;
  279. --f7-theme-color-rgb: 0, 150, 136;
  280. --f7-theme-color-shade: #006d63;
  281. --f7-theme-color-tint: #00bfad;
  282. }
  283. .color-theme-lime {
  284. --f7-theme-color: #cddc39;
  285. --f7-theme-color-rgb: 205, 220, 57;
  286. --f7-theme-color-shade: #bac923;
  287. --f7-theme-color-tint: #d6e25c;
  288. }
  289. .color-theme-deeporange {
  290. --f7-theme-color: #ff6b22;
  291. --f7-theme-color-rgb: 255, 107, 34;
  292. --f7-theme-color-shade: #f85200;
  293. --f7-theme-color-tint: #ff864b;
  294. }
  295. .color-theme-gray {
  296. --f7-theme-color: #8e8e93;
  297. --f7-theme-color-rgb: 142, 142, 147;
  298. --f7-theme-color-shade: #79797f;
  299. --f7-theme-color-tint: #a3a3a7;
  300. }
  301. .color-theme-white {
  302. --f7-theme-color: #ffffff;
  303. --f7-theme-color-rgb: 255, 255, 255;
  304. --f7-theme-color-shade: #ebebeb;
  305. --f7-theme-color-tint: #ffffff;
  306. }
  307. .color-theme-black {
  308. --f7-theme-color: #000000;
  309. --f7-theme-color-rgb: 0, 0, 0;
  310. --f7-theme-color-shade: #000000;
  311. --f7-theme-color-tint: #141414;
  312. }
  313. .color-red {
  314. --f7-theme-color: #ff3b30;
  315. --f7-theme-color-rgb: 255, 59, 48;
  316. --f7-theme-color-shade: #ff1407;
  317. --f7-theme-color-tint: #ff6259;
  318. }
  319. .text-color-red {
  320. --f7-theme-color-text-color: #ff3b30;
  321. }
  322. .bg-color-red {
  323. --f7-theme-color-bg-color: #ff3b30;
  324. }
  325. .border-color-red {
  326. --f7-theme-color-border-color: #ff3b30;
  327. }
  328. .ripple-color-red,
  329. .ripple-red {
  330. --f7-theme-color-ripple-color: rgba(255, 59, 48, 0.3);
  331. }
  332. .color-green {
  333. --f7-theme-color: #4cd964;
  334. --f7-theme-color-rgb: 76, 217, 100;
  335. --f7-theme-color-shade: #2cd048;
  336. --f7-theme-color-tint: #6ee081;
  337. }
  338. .text-color-green {
  339. --f7-theme-color-text-color: #4cd964;
  340. }
  341. .bg-color-green {
  342. --f7-theme-color-bg-color: #4cd964;
  343. }
  344. .border-color-green {
  345. --f7-theme-color-border-color: #4cd964;
  346. }
  347. .ripple-color-green,
  348. .ripple-green {
  349. --f7-theme-color-ripple-color: rgba(76, 217, 100, 0.3);
  350. }
  351. .color-blue {
  352. --f7-theme-color: #2196f3;
  353. --f7-theme-color-rgb: 33, 150, 243;
  354. --f7-theme-color-shade: #0c82df;
  355. --f7-theme-color-tint: #48a8f5;
  356. }
  357. .text-color-blue {
  358. --f7-theme-color-text-color: #2196f3;
  359. }
  360. .bg-color-blue {
  361. --f7-theme-color-bg-color: #2196f3;
  362. }
  363. .border-color-blue {
  364. --f7-theme-color-border-color: #2196f3;
  365. }
  366. .ripple-color-blue,
  367. .ripple-blue {
  368. --f7-theme-color-ripple-color: rgba(33, 150, 243, 0.3);
  369. }
  370. .color-pink {
  371. --f7-theme-color: #ff2d55;
  372. --f7-theme-color-rgb: 255, 45, 85;
  373. --f7-theme-color-shade: #ff0434;
  374. --f7-theme-color-tint: #ff5676;
  375. }
  376. .text-color-pink {
  377. --f7-theme-color-text-color: #ff2d55;
  378. }
  379. .bg-color-pink {
  380. --f7-theme-color-bg-color: #ff2d55;
  381. }
  382. .border-color-pink {
  383. --f7-theme-color-border-color: #ff2d55;
  384. }
  385. .ripple-color-pink,
  386. .ripple-pink {
  387. --f7-theme-color-ripple-color: rgba(255, 45, 85, 0.3);
  388. }
  389. .color-yellow {
  390. --f7-theme-color: #ffcc00;
  391. --f7-theme-color-rgb: 255, 204, 0;
  392. --f7-theme-color-shade: #d6ab00;
  393. --f7-theme-color-tint: #ffd429;
  394. }
  395. .text-color-yellow {
  396. --f7-theme-color-text-color: #ffcc00;
  397. }
  398. .bg-color-yellow {
  399. --f7-theme-color-bg-color: #ffcc00;
  400. }
  401. .border-color-yellow {
  402. --f7-theme-color-border-color: #ffcc00;
  403. }
  404. .ripple-color-yellow,
  405. .ripple-yellow {
  406. --f7-theme-color-ripple-color: rgba(255, 204, 0, 0.3);
  407. }
  408. .color-orange {
  409. --f7-theme-color: #ff9500;
  410. --f7-theme-color-rgb: 255, 149, 0;
  411. --f7-theme-color-shade: #d67d00;
  412. --f7-theme-color-tint: #ffa629;
  413. }
  414. .text-color-orange {
  415. --f7-theme-color-text-color: #ff9500;
  416. }
  417. .bg-color-orange {
  418. --f7-theme-color-bg-color: #ff9500;
  419. }
  420. .border-color-orange {
  421. --f7-theme-color-border-color: #ff9500;
  422. }
  423. .ripple-color-orange,
  424. .ripple-orange {
  425. --f7-theme-color-ripple-color: rgba(255, 149, 0, 0.3);
  426. }
  427. .color-purple {
  428. --f7-theme-color: #9c27b0;
  429. --f7-theme-color-rgb: 156, 39, 176;
  430. --f7-theme-color-shade: #7e208f;
  431. --f7-theme-color-tint: #b92fd1;
  432. }
  433. .text-color-purple {
  434. --f7-theme-color-text-color: #9c27b0;
  435. }
  436. .bg-color-purple {
  437. --f7-theme-color-bg-color: #9c27b0;
  438. }
  439. .border-color-purple {
  440. --f7-theme-color-border-color: #9c27b0;
  441. }
  442. .ripple-color-purple,
  443. .ripple-purple {
  444. --f7-theme-color-ripple-color: rgba(156, 39, 176, 0.3);
  445. }
  446. .color-deeppurple {
  447. --f7-theme-color: #673ab7;
  448. --f7-theme-color-rgb: 103, 58, 183;
  449. --f7-theme-color-shade: #563098;
  450. --f7-theme-color-tint: #7c52c8;
  451. }
  452. .text-color-deeppurple {
  453. --f7-theme-color-text-color: #673ab7;
  454. }
  455. .bg-color-deeppurple {
  456. --f7-theme-color-bg-color: #673ab7;
  457. }
  458. .border-color-deeppurple {
  459. --f7-theme-color-border-color: #673ab7;
  460. }
  461. .ripple-color-deeppurple,
  462. .ripple-deeppurple {
  463. --f7-theme-color-ripple-color: rgba(103, 58, 183, 0.3);
  464. }
  465. .color-lightblue {
  466. --f7-theme-color: #5ac8fa;
  467. --f7-theme-color-rgb: 90, 200, 250;
  468. --f7-theme-color-shade: #32bbf9;
  469. --f7-theme-color-tint: #82d5fb;
  470. }
  471. .text-color-lightblue {
  472. --f7-theme-color-text-color: #5ac8fa;
  473. }
  474. .bg-color-lightblue {
  475. --f7-theme-color-bg-color: #5ac8fa;
  476. }
  477. .border-color-lightblue {
  478. --f7-theme-color-border-color: #5ac8fa;
  479. }
  480. .ripple-color-lightblue,
  481. .ripple-lightblue {
  482. --f7-theme-color-ripple-color: rgba(90, 200, 250, 0.3);
  483. }
  484. .color-teal {
  485. --f7-theme-color: #009688;
  486. --f7-theme-color-rgb: 0, 150, 136;
  487. --f7-theme-color-shade: #006d63;
  488. --f7-theme-color-tint: #00bfad;
  489. }
  490. .text-color-teal {
  491. --f7-theme-color-text-color: #009688;
  492. }
  493. .bg-color-teal {
  494. --f7-theme-color-bg-color: #009688;
  495. }
  496. .border-color-teal {
  497. --f7-theme-color-border-color: #009688;
  498. }
  499. .ripple-color-teal,
  500. .ripple-teal {
  501. --f7-theme-color-ripple-color: rgba(0, 150, 136, 0.3);
  502. }
  503. .color-lime {
  504. --f7-theme-color: #cddc39;
  505. --f7-theme-color-rgb: 205, 220, 57;
  506. --f7-theme-color-shade: #bac923;
  507. --f7-theme-color-tint: #d6e25c;
  508. }
  509. .text-color-lime {
  510. --f7-theme-color-text-color: #cddc39;
  511. }
  512. .bg-color-lime {
  513. --f7-theme-color-bg-color: #cddc39;
  514. }
  515. .border-color-lime {
  516. --f7-theme-color-border-color: #cddc39;
  517. }
  518. .ripple-color-lime,
  519. .ripple-lime {
  520. --f7-theme-color-ripple-color: rgba(205, 220, 57, 0.3);
  521. }
  522. .color-deeporange {
  523. --f7-theme-color: #ff6b22;
  524. --f7-theme-color-rgb: 255, 107, 34;
  525. --f7-theme-color-shade: #f85200;
  526. --f7-theme-color-tint: #ff864b;
  527. }
  528. .text-color-deeporange {
  529. --f7-theme-color-text-color: #ff6b22;
  530. }
  531. .bg-color-deeporange {
  532. --f7-theme-color-bg-color: #ff6b22;
  533. }
  534. .border-color-deeporange {
  535. --f7-theme-color-border-color: #ff6b22;
  536. }
  537. .ripple-color-deeporange,
  538. .ripple-deeporange {
  539. --f7-theme-color-ripple-color: rgba(255, 107, 34, 0.3);
  540. }
  541. .color-gray {
  542. --f7-theme-color: #8e8e93;
  543. --f7-theme-color-rgb: 142, 142, 147;
  544. --f7-theme-color-shade: #79797f;
  545. --f7-theme-color-tint: #a3a3a7;
  546. }
  547. .text-color-gray {
  548. --f7-theme-color-text-color: #8e8e93;
  549. }
  550. .bg-color-gray {
  551. --f7-theme-color-bg-color: #8e8e93;
  552. }
  553. .border-color-gray {
  554. --f7-theme-color-border-color: #8e8e93;
  555. }
  556. .ripple-color-gray,
  557. .ripple-gray {
  558. --f7-theme-color-ripple-color: rgba(142, 142, 147, 0.3);
  559. }
  560. .color-white {
  561. --f7-theme-color: #ffffff;
  562. --f7-theme-color-rgb: 255, 255, 255;
  563. --f7-theme-color-shade: #ebebeb;
  564. --f7-theme-color-tint: #ffffff;
  565. }
  566. .text-color-white {
  567. --f7-theme-color-text-color: #ffffff;
  568. }
  569. .bg-color-white {
  570. --f7-theme-color-bg-color: #ffffff;
  571. }
  572. .border-color-white {
  573. --f7-theme-color-border-color: #ffffff;
  574. }
  575. .ripple-color-white,
  576. .ripple-white {
  577. --f7-theme-color-ripple-color: rgba(255, 255, 255, 0.3);
  578. }
  579. .color-black {
  580. --f7-theme-color: #000000;
  581. --f7-theme-color-rgb: 0, 0, 0;
  582. --f7-theme-color-shade: #000000;
  583. --f7-theme-color-tint: #141414;
  584. }
  585. .text-color-black {
  586. --f7-theme-color-text-color: #000000;
  587. }
  588. .bg-color-black {
  589. --f7-theme-color-bg-color: #000000;
  590. }
  591. .border-color-black {
  592. --f7-theme-color-border-color: #000000;
  593. }
  594. .ripple-color-black,
  595. .ripple-black {
  596. --f7-theme-color-ripple-color: rgba(0, 0, 0, 0.3);
  597. }
  598. @font-face {
  599. font-family: 'framework7-core-icons';
  600. src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAz4ABAAAAAAGNgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAM3AAAABkAAAAciZuB7UdERUYAAArUAAAAIwAAACQAfQBXR1BPUwAADKwAAAAuAAAANuAY7+xHU1VCAAAK+AAAAbMAAAQuAxQJ5U9TLzIAAAHcAAAASgAAAGBRKF+WY21hcAAAAogAAACIAAABYt6F0cBjdnQgAAADEAAAAAQAAAAEABEBRGdhc3AAAArMAAAACAAAAAj//wADZ2x5ZgAAA6gAAAR1AAAJzOg6B0doZWFkAAABbAAAADAAAAA2FLiY/WhoZWEAAAGcAAAAIAAAACQHgQM9aG10eAAAAigAAABeAAABJC9JAAJsb2NhAAADFAAAAJQAAACUReRIiG1heHAAAAG8AAAAHwAAACAAjwBLbmFtZQAACCAAAAFSAAAC2WG9Sh5wb3N0AAAJdAAAAVYAAAJ2B5LxL3jaY2BkYGAA4r3NMlLx/DZfGbiZGEDgxtw1DjD6/49/vSxpTJ+BXA4GsDQARmkM0njaY2BkYGD6/K+XQY8l7f8PBgaWNAagCArwBACRVQXFeNpjYGRgYPBkkGJgYQABJiBmZACJOTDogQQADbgA2wB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPabPjMUwNYwHwEoUGMQAQ7UMZAAAeNpj2M0gyAACqxgGNWAMAGIdID4A5OwD0rOA+BBI7P9PhuNAMSBmSYOK+wKxExCfBWIJoNzZ/z8Y3YBsF6g4kM2UBpFjBNJMQD0Mu4FsY4jZTGch5jAZQ8QBlR0UZwAAeNpjYGBgZoBgGQZGBhCIAfIYwXwWBgcgzcPAwcAEZCsw6DJYMsQzVP3/DxQF8QyAvMT///8//n/9/9X/G/6vh5oAB4xsDHAhRiYgwcSApgBiNRywMDCwsrFzcHJx8/DyMRAD+BkEBIWERUTFxCUkpaRlZOXkFRSVlFVU1dQ1NBkGAwAAxH4T6AARAUQAAAAqACoAKgA0AD4ASABSAFwAZgBwAHoAhACOAJgAogCsALYAwADKANQA3gDoAPIA/AEGARABGgEkAS4BOAFCAUwBVgFgAWoBdAF+AYgBkgGcAaYBsgHeAgACKgI8AlICZAKEApQCpALWAuwC/gMeAzADQgNgA3IDlgO0A8QD6gP8BBYEKgRKBFwEbgSWBKwExgTmeNrtVc9vG0UUfm8de9y43rVje204lNjZ7AYBKcna3lKcxCIJhwgCqhIIuTSpKp8CaoRsbnZujSosI5QqitVbpCLBKT8EUiUSwyW9mEoWB4RyChKpEJxyoVKz5s2sDXH6H6BKM34z387OfvO9741BgiAAbOAsuIDB4BbC5cw264K/hrc87sPMtkuiIWy5OOzm8Dbz4NPMNnLcDJpBwwz2BVc/y+Vw1v4miCbthtRqotMoOMTHz7Hn2P8ek85gLkLfkAQMXdQv4Ps4TxWmQASiAD0JT1gdTif1YTXsSehJt2UoGLWMr2cymZnMvaWpqaUpHPffkuVleRmzmZmRkZkPpjj8RL7l56DDofkDmvSRHoD+hCLxncbQ0JPp4ZdQRQMRf/P1qr79fZ8a9x0p25J05FN7fXv7HD1SHM7NY6zhfboHXqBdosxIGZ6+BN9DjYRZNMFZElvMrugrbHBscnHxzo0B9u3CxMTCeHlFL0XYwOKdxcXJ0UE2vjA+viB4gQ57dF43QIjRltZeoaBVq5gWAVrcT7CKZfDSVyNxvijKsGo/rGj1ulb5NenE1lrw4494k+9nYRQNq4KKZtcr2mwrAjafkBavkBZ0n1npMST6YZKUy3sZdTfSyenMe3v8/EfKI3QdcU1o7ijBvxGGA4ezRWQM62BTK5W07+i32N/5PEVUo6z1uL9Y0oSOdrkrJ52Aj+e336AFUYsyahlSryYFerTerp6AJGUP0gft9qb9k326vo4uHEbX+vofB1b7kfX08F/YPuXLntWMC0b3r4VVrpP5RY0HvEICtjXL4ruYBQ9NomyIVuPL2uGyRhiFvnecNUv4FuoQoBGXS2gl3GOlMSmzVaZSl1VvPu9FXeYTjsksn2fizDCPdXqf/3fACMYj7lQ8gnXbxPqJaW6YpuBcwxjlhXTrR64rxpoQe/w4VnMC8Wj+DR/Bz/gayACUuaiqoIzExEpHpxa6A4Huj90hz1W/rFz8/Eul26d85UWWVS76ZecM1/Ft4sC9Ri5ixqZIDOoigONxUHGCcuen6gNK3hmHe1r+/nMuNKe9bk1PfzK9NTc6Oje68mFo7hLNpq2hq2Mc6dSLO4yKTNiL8cLrEEuV19tSFQqEdfIkEcgbDs/rm1qxqIk6LEs5PCElQwDJAJELeBJI52k7adfe3bWh+WIu125ZhJ2dJuzgxhkQOjVPIfcqQuz4OFbDluLtmsrhp+RXQCaEE7QwV6lo7YbvnZnwd+yaVJVq3FMWec+8gL/Xj+2afb8smaci7e29L8EDvMF1Sjue+q8gH3TaaDDgXfWGqQdUx1XO+5N0r+nCu8K6FpqPbvZc+x7DIpy/Y/jtYdDNouXzOE+hUGjlvTkv1SUdLvC8k6YmF7UvETpTnY21u43G3bW1YrpIrcR/X8WBRsP+pYH3SlaxaJXE7/n6E9+Mp+JGnded/RCvVLDMh0lRfy7OTzKJH68N0jiYcqqDdy6W00mZ5Ipo53ULOPbiNelc6mSs24zd9jqWwmvP6PYPnHjkAAAAAHjarZC9TsMwFIWP+yfBgBjI7rGtmsjx0p+RSl26IIbsITWt1Sau3EhVxcuwsTGy8RQsTOx9C65dDwwdGBrpyl+Oz7XPNYAbvIPh9HXxGJghwlvgBq7xFbiJlN0HbiFir4HbuGXfgTuIGhE5WeuK/h58l2OGPl4CN3CHz8BNPOEncAt9Vgdug7OPwB3Sj5jCYIsDLDSWWKEGp8wFerRKCKQYY0CcYYMcC3KVVJaUOblzIqeXdIb2u5ia7cHq5arm3aLHpUjHA55t8oUuteXzVW43ebnVC3I+U7NrVdhTCIs1hojpaseKSHuusCOrzUu1N3Y9jAtjVawLU5F81vvXMPNi7VdL8yk/VUJzcUyo/h/h5JcYkSp9nd4GM1PVM2OXistE8Ak/G5V0OYpl7J7jEoNn5LO0r72PUxaXJvGrmw2ZsjttKi5Emggh+AUu/QVMMIYbAAB42m2QCU/CQBSEZ8ADECzIJXj+FuN937dpartKI3TJdjn+vNGFUqGJmzTpvm/evNmHFMbn5xvEf+fIfEQKaRRRRgVV1FDHKhpoYg3r2MEu9rCPAxwa7TFOcIoznOMCl7jCNW5wizvc4wGPeMIzXvCKN6aY5hznucBFZphljkvMs8BlWiyyxBWWWWGVNda5ygabXOM6N7jJLW7nQuEot2X7Miy5LdFXMrCV/9nSo0p2AjueFbO2+NDmXnCUkoP4tmSo+/Uuh+a/mFAak0LCNj+La4HU/ofvOto3FbctQzHqsCLzd6m17BjLrHI8X45IOe725CCwnZ6SylkMpRqHCAd+Vyg7EENt/QWKNLm4r9ctTN4UgdIUTCr52RGWJ9pCC1vJXuDNzOgq0c9OmFlGVys7yjybcbyAqWmUxwiKyT2blSWmGMVyZBbzzPiFpl5JdkbevxMrvisAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQYPIJsFLMYAAA12ANUAeNp1UklOAkEUfUV3Ao4goHSUQQbBIM6z4qxoPIMbNhoT4sIQD+DCMxjjOVx6BuMRjAtvge9XAz2FdLqr+r1X/7/6/0MBGEYWNahWs/2ACEwi6HQgjGrd3zWJwf4jZ+o1AmX8IowknkLt0LdhGiWjDoP4PBrYQBR5PlmUuZvgWuSTRZp/aSSoGHfxeViYQooKm13CmIudYY7JPhfFLK7xiDd84keZqqwa6lY9q3f1ob7UH66oTvGd0+czvugxlDSe5+6U0bxKJ5NbtxXQJbSzjE9X5z29uhJyPs1CQON2ZxErYIW6Qb5sxXlA4a/gItdBMYTf7fJxTOvuVHw+V9mBQRnOMBo4a/ta6zLBrAcBplfDZYwEoonDPc5ksJoyX1X2/4Iekzp6kW9Ua0pUJfpeDrkbpJD4xxjy8ILJdK/zljKtFn1bdBXTe9tBnHqJnexnkRMnrFWR8aWCztQ6/CYzxRhdkB4eJlJjH284yS94xT5jJPX5OG/t7cURK1TmuRwVkiXHr9Rlx4dnuFbopMrKuWPZGWv6vg4q971kNSWHM1nbdNZD7IqI0zh3GZ238A+0lkTEAHjaY2BkYGDgYpBjMGFgzEksyWPgYGABijD8/88AkmEszqxKhYp9YIADAMCOBtEAAHjaY2BgYGQAghsJmjlgeu4aBxgNAELpBpEAAAA=") format("woff");
  601. font-weight: 400;
  602. font-style: normal;
  603. }
  604. @font-face {
  605. font-family: 'framework7-skeleton';
  606. 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");
  607. font-weight: 300, 400, 500, 600, 700;
  608. font-style: normal, italic;
  609. }
  610. html,
  611. body,
  612. .framework7-root {
  613. position: relative;
  614. height: 100%;
  615. width: 100%;
  616. overflow-x: hidden;
  617. }
  618. body {
  619. margin: 0;
  620. padding: 0;
  621. width: 100%;
  622. background: #fff;
  623. overflow: hidden;
  624. -webkit-text-size-adjust: 100%;
  625. -webkit-font-smoothing: antialiased;
  626. font-family: var(--f7-font-family);
  627. font-size: var(--f7-font-size);
  628. line-height: var(--f7-line-height);
  629. color: var(--f7-text-color);
  630. }
  631. .theme-dark {
  632. color: var(--f7-text-color);
  633. }
  634. .framework7-root {
  635. overflow: hidden;
  636. box-sizing: border-box;
  637. }
  638. .framework7-initializing *,
  639. .framework7-initializing *:before,
  640. .framework7-initializing *:after {
  641. transition-duration: 0ms !important;
  642. }
  643. .device-ios,
  644. .device-android {
  645. cursor: pointer;
  646. }
  647. .device-ios {
  648. touch-action: manipulation;
  649. }
  650. @media (width: 1024px) and (height: 691px) and (orientation: landscape) {
  651. html,
  652. body,
  653. .framework7-root {
  654. height: 671px;
  655. }
  656. }
  657. @media (width: 1024px) and (height: 692px) and (orientation: landscape) {
  658. html,
  659. body,
  660. .framework7-root {
  661. height: 672px;
  662. }
  663. }
  664. * {
  665. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  666. -webkit-touch-callout: none;
  667. }
  668. a,
  669. input,
  670. textarea,
  671. select {
  672. outline: 0;
  673. }
  674. a {
  675. cursor: pointer;
  676. text-decoration: none;
  677. color: var(--f7-theme-color);
  678. }
  679. .link,
  680. .item-link {
  681. cursor: pointer;
  682. }
  683. p {
  684. margin: 1em 0;
  685. }
  686. .disabled {
  687. opacity: 0.55 !important;
  688. pointer-events: none !important;
  689. }
  690. html.device-full-viewport,
  691. html.device-full-viewport body {
  692. height: 100vh;
  693. }
  694. .ios .md-only,
  695. .ios .if-md,
  696. .ios .aurora-only,
  697. .ios .if-aurora,
  698. .ios .if-not-ios,
  699. .ios .not-ios {
  700. display: none !important;
  701. }
  702. @media (width: 1024px) and (height: 691px) and (orientation: landscape) {
  703. .ios,
  704. .ios body,
  705. .ios .framework7-root {
  706. height: 671px;
  707. }
  708. }
  709. @media (width: 1024px) and (height: 692px) and (orientation: landscape) {
  710. .ios,
  711. .ios body,
  712. .ios .framework7-root {
  713. height: 672px;
  714. }
  715. }
  716. .md .ios-only,
  717. .md .if-ios,
  718. .md .aurora-only,
  719. .md .if-aurora,
  720. .md .if-not-md,
  721. .md .not-md {
  722. display: none !important;
  723. }
  724. .aurora .ios-only,
  725. .aurora .if-ios,
  726. .aurora .md-only,
  727. .aurora .if-md,
  728. .aurora .if-not-aurora,
  729. .aurora .not-aurora {
  730. display: none !important;
  731. }
  732. /* === Statusbar === */
  733. :root {
  734. --f7-statusbar-height: 0px;
  735. --f7-statusbar-bg-color: var(--f7-bars-bg-color);
  736. }
  737. .device-ios {
  738. --f7-statusbar-height: var(--f7-safe-area-top, 20px);
  739. }
  740. .device-android {
  741. --f7-statusbar-height: var(--f7-safe-area-top, 24px);
  742. }
  743. .with-statusbar.ios:not(.device-ios):not(.device-android) {
  744. --f7-statusbar-height: 20px;
  745. }
  746. .with-statusbar.md:not(.device-ios):not(.device-android) {
  747. --f7-statusbar-height: 24px;
  748. }
  749. @supports not (top: env(safe-area-inset-top)) {
  750. .with-statusbar.device-ios {
  751. --f7-statusbar-height: 20px;
  752. }
  753. }
  754. @supports not (top: env(safe-area-inset-top)) {
  755. .with-statusbar.device-android {
  756. --f7-statusbar-height: 24px;
  757. }
  758. }
  759. .statusbar {
  760. position: absolute;
  761. left: 0;
  762. top: 0;
  763. width: 100%;
  764. z-index: 10000;
  765. box-sizing: border-box;
  766. display: block;
  767. height: var(--f7-statusbar-height);
  768. background: var(--f7-statusbar-bg-color, var(--f7-bars-bg-color));
  769. }
  770. .framework7-root {
  771. padding-top: var(--f7-statusbar-height);
  772. }
  773. /* === Views === */
  774. .views,
  775. .view {
  776. position: relative;
  777. height: 100%;
  778. z-index: 5000;
  779. overflow: hidden;
  780. box-sizing: border-box;
  781. }
  782. .framework7-root > .view,
  783. .framework7-root > .views {
  784. height: calc(100% - var(--f7-appbar-app-offset, 0px));
  785. }
  786. /* === Pages === */
  787. :root {
  788. --f7-page-master-width: 320px;
  789. --f7-page-master-border-color: rgba(0, 0, 0, 0.1);
  790. --f7-page-master-border-width: 1px;
  791. --f7-page-swipeback-transition-duration: 400ms;
  792. /*
  793. --f7-page-content-extra-padding-top: 0px;
  794. --f7-page-content-extra-padding-bottom: 0px;
  795. */
  796. }
  797. .ios {
  798. --f7-page-bg-color: #efeff4;
  799. --f7-page-transition-duration: 400ms;
  800. }
  801. .md {
  802. --f7-page-bg-color: #fff;
  803. --f7-page-transition-duration: 250ms;
  804. }
  805. .aurora {
  806. --f7-page-bg-color: #f3f3f3;
  807. --f7-page-transition-duration: 400ms;
  808. }
  809. .theme-dark {
  810. --f7-page-bg-color: #171717;
  811. --f7-page-master-border-color: rgba(255, 255, 255, 0.1);
  812. }
  813. .pages {
  814. position: relative;
  815. width: 100%;
  816. height: 100%;
  817. overflow: hidden;
  818. }
  819. .page {
  820. box-sizing: border-box;
  821. position: absolute;
  822. left: 0;
  823. top: 0;
  824. width: 100%;
  825. height: 100%;
  826. transform: none;
  827. background-color: var(--f7-page-bg-color);
  828. z-index: 1;
  829. }
  830. .page.stacked {
  831. display: none;
  832. }
  833. .page-with-navbar-large-collapsed {
  834. --f7-navbar-large-collapse-progress: 1;
  835. }
  836. .page-previous {
  837. pointer-events: none;
  838. }
  839. .page-content {
  840. will-change: scroll-position;
  841. overflow: auto;
  842. -webkit-overflow-scrolling: touch;
  843. box-sizing: border-box;
  844. height: 100%;
  845. position: relative;
  846. z-index: 1;
  847. 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));
  848. padding-bottom: calc(var(--f7-page-toolbar-bottom-offset, 0px) + var(--f7-safe-area-bottom) + var(--f7-page-content-extra-padding-bottom, 0px));
  849. }
  850. .page-transitioning,
  851. .page-transitioning .page-shadow-effect,
  852. .page-transitioning .page-opacity-effect {
  853. transition-duration: var(--f7-page-transition-duration);
  854. }
  855. .page-transitioning-swipeback,
  856. .page-transitioning-swipeback .page-shadow-effect,
  857. .page-transitioning-swipeback .page-opacity-effect {
  858. transition-duration: var(--f7-page-swipeback-transition-duration);
  859. }
  860. .router-transition-forward .page-next,
  861. .router-transition-backward .page-next,
  862. .router-transition-forward .page-current,
  863. .router-transition-backward .page-current,
  864. .router-transition-forward .page-previous:not(.stacked),
  865. .router-transition-backward .page-previous:not(.stacked) {
  866. pointer-events: none;
  867. }
  868. .page-shadow-effect {
  869. position: absolute;
  870. top: 0;
  871. width: 16px;
  872. bottom: 0;
  873. z-index: -1;
  874. content: '';
  875. opacity: 0;
  876. right: 100%;
  877. 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%);
  878. }
  879. .page-opacity-effect {
  880. position: absolute;
  881. left: 0;
  882. top: 0;
  883. background: rgba(0, 0, 0, 0.1);
  884. width: 100%;
  885. bottom: 0;
  886. content: '';
  887. opacity: 0;
  888. z-index: 10000;
  889. }
  890. .ios .page-previous {
  891. transform: translate3d(-20%, 0, 0);
  892. }
  893. .ios .page-next {
  894. transform: translate3d(100%, 0, 0);
  895. }
  896. .ios .page-previous .page-opacity-effect {
  897. opacity: 1;
  898. }
  899. .ios .page-previous:after {
  900. opacity: 1;
  901. }
  902. .ios .page-current .page-shadow-effect {
  903. opacity: 1;
  904. }
  905. .ios .router-transition-forward .page-next,
  906. .ios .router-transition-forward .page-current {
  907. will-change: transform;
  908. }
  909. .ios .router-transition-forward .page-next {
  910. animation: ios-page-next-to-current var(--f7-page-transition-duration) forwards;
  911. }
  912. .ios .router-transition-forward .page-next:before {
  913. position: absolute;
  914. top: 0;
  915. width: 16px;
  916. bottom: 0;
  917. z-index: -1;
  918. content: '';
  919. opacity: 0;
  920. right: 100%;
  921. 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%);
  922. animation: ios-page-element-fade-in var(--f7-page-transition-duration) forwards;
  923. }
  924. .ios .router-transition-forward .page-current {
  925. animation: ios-page-current-to-previous var(--f7-page-transition-duration) forwards;
  926. }
  927. .ios .router-transition-forward .page-current:after {
  928. position: absolute;
  929. left: 0;
  930. top: 0;
  931. background: rgba(0, 0, 0, 0.1);
  932. width: 100%;
  933. bottom: 0;
  934. content: '';
  935. opacity: 0;
  936. z-index: 10000;
  937. animation: ios-page-element-fade-in var(--f7-page-transition-duration) forwards;
  938. }
  939. .ios .router-transition-backward .page-previous,
  940. .ios .router-transition-backward .page-current {
  941. will-change: transform;
  942. }
  943. .ios .router-transition-backward .page-previous {
  944. animation: ios-page-previous-to-current var(--f7-page-transition-duration) forwards;
  945. }
  946. .ios .router-transition-backward .page-previous:after {
  947. position: absolute;
  948. left: 0;
  949. top: 0;
  950. background: rgba(0, 0, 0, 0.1);
  951. width: 100%;
  952. bottom: 0;
  953. content: '';
  954. opacity: 0;
  955. z-index: 10000;
  956. animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards;
  957. }
  958. .ios .router-transition-backward .page-current {
  959. animation: ios-page-current-to-next var(--f7-page-transition-duration) forwards;
  960. }
  961. .ios .router-transition-backward .page-current:before {
  962. position: absolute;
  963. top: 0;
  964. width: 16px;
  965. bottom: 0;
  966. z-index: -1;
  967. content: '';
  968. opacity: 0;
  969. right: 100%;
  970. 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%);
  971. animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards;
  972. }
  973. .ios .router-dynamic-navbar-inside .page-shadow-effect,
  974. .ios .router-dynamic-navbar-inside .page-opacity-effect {
  975. top: var(--f7-navbar-height);
  976. }
  977. .ios .router-dynamic-navbar-inside .page-next:before,
  978. .ios .router-dynamic-navbar-inside .page-current:after,
  979. .ios .router-dynamic-navbar-inside .page-current:before,
  980. .ios .router-dynamic-navbar-inside .page-previous:after {
  981. top: var(--f7-navbar-height);
  982. }
  983. @keyframes ios-page-next-to-current {
  984. from {
  985. transform: translate3d(100%, 0, 0);
  986. }
  987. to {
  988. transform: translate3d(0%, 0, 0);
  989. }
  990. }
  991. @keyframes ios-page-previous-to-current {
  992. from {
  993. transform: translate3d(-20%, 0, 0);
  994. }
  995. to {
  996. transform: translate3d(0%, 0, 0);
  997. }
  998. }
  999. @keyframes ios-page-current-to-previous {
  1000. from {
  1001. transform: translate3d(0, 0, 0);
  1002. }
  1003. to {
  1004. transform: translate3d(-20%, 0, 0);
  1005. }
  1006. }
  1007. @keyframes ios-page-current-to-next {
  1008. from {
  1009. transform: translate3d(0, 0, 0);
  1010. }
  1011. to {
  1012. transform: translate3d(100%, 0, 0);
  1013. }
  1014. }
  1015. @keyframes ios-page-element-fade-in {
  1016. from {
  1017. opacity: 0;
  1018. }
  1019. to {
  1020. opacity: 1;
  1021. }
  1022. }
  1023. @keyframes ios-page-element-fade-out {
  1024. from {
  1025. opacity: 1;
  1026. }
  1027. to {
  1028. opacity: 0;
  1029. }
  1030. }
  1031. .md .page-next {
  1032. transform: translate3d(0, 56px, 0);
  1033. opacity: 0;
  1034. pointer-events: none;
  1035. }
  1036. .md .page-next.page-next-on-right {
  1037. transform: translate3d(100%, 0, 0);
  1038. }
  1039. .md .router-transition-forward .page-next {
  1040. will-change: transform, opacity;
  1041. animation: md-page-next-to-current var(--f7-page-transition-duration) forwards;
  1042. }
  1043. .md .router-transition-forward .page-current {
  1044. animation: none;
  1045. }
  1046. .md .router-transition-backward .page-current {
  1047. will-change: transform, opacity;
  1048. animation: md-page-current-to-next var(--f7-page-transition-duration) forwards;
  1049. }
  1050. .md .router-transition-backward .page-previous {
  1051. animation: none;
  1052. }
  1053. @keyframes md-page-next-to-current {
  1054. from {
  1055. transform: translate3d(0, 56px, 0);
  1056. opacity: 0;
  1057. }
  1058. to {
  1059. transform: translate3d(0, 0px, 0);
  1060. opacity: 1;
  1061. }
  1062. }
  1063. @keyframes md-page-current-to-next {
  1064. from {
  1065. transform: translate3d(0, 0, 0);
  1066. opacity: 1;
  1067. }
  1068. to {
  1069. transform: translate3d(0, 56px, 0);
  1070. opacity: 0;
  1071. }
  1072. }
  1073. .aurora .page-next {
  1074. pointer-events: none;
  1075. transform: translate3d(100%, 0px, 0);
  1076. }
  1077. .aurora .page-next.page-next-on-right {
  1078. transform: translate3d(100%, 0, 0);
  1079. }
  1080. .aurora .page-previous .page-opacity-effect {
  1081. opacity: 1;
  1082. }
  1083. .aurora .page-previous:after {
  1084. opacity: 1;
  1085. }
  1086. .aurora .router-transition-forward .page-next {
  1087. will-change: transform;
  1088. animation: aurora-page-next-to-current var(--f7-page-transition-duration) forwards;
  1089. }
  1090. .aurora .router-transition-forward .page-current {
  1091. animation: none;
  1092. }
  1093. .aurora .router-transition-forward .page-current:after {
  1094. position: absolute;
  1095. left: 0;
  1096. top: 0;
  1097. background: rgba(0, 0, 0, 0.1);
  1098. width: 100%;
  1099. bottom: 0;
  1100. content: '';
  1101. opacity: 0;
  1102. z-index: 10000;
  1103. animation: aurora-page-element-fade-in var(--f7-page-transition-duration) forwards;
  1104. }
  1105. .aurora .router-transition-backward .page-current {
  1106. will-change: transform, opacity;
  1107. animation: aurora-page-current-to-next var(--f7-page-transition-duration) forwards;
  1108. }
  1109. .aurora .router-transition-backward .page-previous {
  1110. animation: none;
  1111. }
  1112. .aurora .router-transition-backward .page-previous:after {
  1113. position: absolute;
  1114. left: 0;
  1115. top: 0;
  1116. background: rgba(0, 0, 0, 0.1);
  1117. width: 100%;
  1118. bottom: 0;
  1119. content: '';
  1120. opacity: 0;
  1121. z-index: 10000;
  1122. animation: aurora-page-element-fade-out var(--f7-page-transition-duration) forwards;
  1123. }
  1124. @keyframes aurora-page-next-to-current {
  1125. from {
  1126. transform: translate3d(100%, 0, 0);
  1127. }
  1128. to {
  1129. transform: translate3d(0, 0px, 0);
  1130. }
  1131. }
  1132. @keyframes aurora-page-current-to-next {
  1133. from {
  1134. transform: translate3d(0, 0, 0);
  1135. }
  1136. to {
  1137. transform: translate3d(100%, 0, 0);
  1138. }
  1139. }
  1140. @keyframes aurora-page-element-fade-in {
  1141. from {
  1142. opacity: 0;
  1143. }
  1144. to {
  1145. opacity: 1;
  1146. }
  1147. }
  1148. @keyframes aurora-page-element-fade-out {
  1149. from {
  1150. opacity: 1;
  1151. }
  1152. to {
  1153. opacity: 0;
  1154. }
  1155. }
  1156. .view:not(.view-master-detail) .page-master-stacked {
  1157. display: none;
  1158. }
  1159. .view:not(.view-master-detail) .navbar-master-stacked {
  1160. display: none;
  1161. }
  1162. .view-master-detail .page-master,
  1163. .view-master-detail .navbar-master {
  1164. width: var(--f7-page-master-width);
  1165. --f7-safe-area-right: 0px;
  1166. --f7-safe-area-outer-right: 0px;
  1167. border-right: var(--f7-page-master-border-width) solid var(--f7-page-master-border-color);
  1168. }
  1169. .view-master-detail .page-master-detail,
  1170. .view-master-detail .navbar-master-detail {
  1171. width: calc(100% - var(--f7-page-master-width));
  1172. --f7-safe-area-left: 0px;
  1173. --f7-safe-area-outer-left: 0px;
  1174. left: var(--f7-page-master-width);
  1175. }
  1176. .view-master-detail .page-master {
  1177. z-index: 2;
  1178. transform: none;
  1179. pointer-events: auto;
  1180. }
  1181. .view-master-detail .page-master:before,
  1182. .view-master-detail .page-master:after {
  1183. display: none;
  1184. }
  1185. .view-master-detail.router-transition .page-master {
  1186. animation: none;
  1187. }
  1188. /* === Link === */
  1189. :root {
  1190. --f7-link-highlight-black: rgba(0, 0, 0, 0.1);
  1191. --f7-link-highlight-white: rgba(255, 255, 255, 0.15);
  1192. --f7-link-highlight-color: var(--f7-link-highlight-black);
  1193. }
  1194. .theme-dark {
  1195. --f7-link-highlight-color: var(--f7-link-highlight-white);
  1196. }
  1197. .link,
  1198. .tab-link {
  1199. display: inline-flex;
  1200. align-items: center;
  1201. align-content: center;
  1202. justify-content: center;
  1203. position: relative;
  1204. box-sizing: border-box;
  1205. transform: translate3d(0, 0, 0);
  1206. z-index: 1;
  1207. }
  1208. .link i + span,
  1209. .link i + i,
  1210. .link span + i,
  1211. .link span + span {
  1212. margin-left: 4px;
  1213. }
  1214. .ios .link {
  1215. transition: opacity 300ms;
  1216. }
  1217. .ios .link.active-state {
  1218. opacity: 0.3;
  1219. transition-duration: 0ms;
  1220. }
  1221. .aurora .link {
  1222. transition: opacity 300ms;
  1223. }
  1224. .aurora .link.active-state {
  1225. opacity: 0.3;
  1226. transition-duration: 0ms;
  1227. }
  1228. /* === Navbar === */
  1229. :root {
  1230. /*
  1231. --f7-navbar-bg-color: var(--f7-bars-bg-color);
  1232. --f7-navbar-bg-image: var(--f7-bars-bg-image);
  1233. --f7-navbar-border-color: var(--f7-bars-border-color);
  1234. --f7-navbar-link-color: var(--f7-bars-link-color);
  1235. --f7-navbar-text-color: var(--f7-bars-text-color);
  1236. */
  1237. --f7-navbar-hide-show-transition-duration: 400ms;
  1238. --f7-navbar-title-line-height: 1.2;
  1239. --f7-navbar-title-font-size: inherit;
  1240. --f7-navbar-subtitle-text-align: inherit;
  1241. --f7-navbar-large-title-line-height: 1.2;
  1242. --f7-navbar-large-title-text-color: inherit;
  1243. }
  1244. .ios {
  1245. --f7-navbar-height: 44px;
  1246. --f7-navbar-tablet-height: 44px;
  1247. --f7-navbar-font-size: 17px;
  1248. --f7-navbar-inner-padding-left: 8px;
  1249. --f7-navbar-inner-padding-right: 8px;
  1250. --f7-navbar-title-font-weight: 600;
  1251. --f7-navbar-title-margin-left: 0;
  1252. --f7-navbar-title-margin-right: 0;
  1253. --f7-navbar-title-text-align: center;
  1254. --f7-navbar-subtitle-text-color: #6d6d72;
  1255. --f7-navbar-subtitle-font-size: 10px;
  1256. --f7-navbar-subtitle-line-height: 1;
  1257. --f7-navbar-shadow-image: none;
  1258. --f7-navbar-large-title-height: 52px;
  1259. --f7-navbar-large-title-font-size: 34px;
  1260. --f7-navbar-large-title-font-weight: 700;
  1261. --f7-navbar-large-title-letter-spacing: -0.03em;
  1262. --f7-navbar-large-title-padding-left: 15px;
  1263. --f7-navbar-large-title-padding-right: 15px;
  1264. /*
  1265. --f7-navbar-link-height: var(--f7-navbar-height);
  1266. --f7-navbar-link-line-height: var(--f7-navbar-height);
  1267. */
  1268. }
  1269. .ios .theme-dark,
  1270. .ios.theme-dark {
  1271. --f7-navbar-subtitle-text-color: #8e8e93;
  1272. }
  1273. .md {
  1274. --f7-navbar-height: 56px;
  1275. --f7-navbar-tablet-height: 64px;
  1276. --f7-navbar-font-size: 20px;
  1277. --f7-navbar-inner-padding-left: 0px;
  1278. --f7-navbar-inner-padding-right: 0px;
  1279. --f7-navbar-title-font-weight: 500;
  1280. --f7-navbar-title-margin-left: 16px;
  1281. --f7-navbar-title-margin-right: 16px;
  1282. --f7-navbar-title-text-align: left;
  1283. --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.85);
  1284. --f7-navbar-subtitle-font-size: 14px;
  1285. --f7-navbar-subtitle-line-height: 1.2;
  1286. --f7-navbar-shadow-image: var(--f7-bars-shadow-bottom-image);
  1287. --f7-navbar-large-title-font-size: 34px;
  1288. --f7-navbar-large-title-height: 56px;
  1289. --f7-navbar-large-title-font-weight: 500;
  1290. --f7-navbar-large-title-letter-spacing: 0;
  1291. --f7-navbar-large-title-padding-left: 16px;
  1292. --f7-navbar-large-title-padding-right: 16px;
  1293. /*
  1294. --f7-navbar-link-height: var(--f7-navbar-height);
  1295. --f7-navbar-link-line-height: var(--f7-navbar-height);
  1296. */
  1297. }
  1298. .md .theme-dark,
  1299. .md.theme-dark {
  1300. --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.85);
  1301. }
  1302. .aurora {
  1303. --f7-navbar-height: 38px;
  1304. --f7-navbar-tablet-height: 38px;
  1305. --f7-navbar-font-size: 14px;
  1306. --f7-navbar-inner-padding-left: 15px;
  1307. --f7-navbar-inner-padding-right: 15px;
  1308. --f7-navbar-title-font-weight: 600;
  1309. --f7-navbar-title-margin-left: 0;
  1310. --f7-navbar-title-margin-right: 0;
  1311. --f7-navbar-title-text-align: center;
  1312. --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.6);
  1313. --f7-navbar-subtitle-font-size: 12px;
  1314. --f7-navbar-subtitle-line-height: 1;
  1315. --f7-navbar-shadow-image: none;
  1316. --f7-navbar-large-title-height: 38px;
  1317. --f7-navbar-large-title-font-size: 26px;
  1318. --f7-navbar-large-title-font-weight: bold;
  1319. --f7-navbar-large-title-letter-spacing: -0.03em;
  1320. --f7-navbar-large-title-padding-left: 15px;
  1321. --f7-navbar-large-title-padding-right: 15px;
  1322. --f7-navbar-link-height: auto;
  1323. --f7-navbar-link-line-height: inherit;
  1324. }
  1325. .aurora .theme-dark,
  1326. .aurora.theme-dark {
  1327. --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.5);
  1328. }
  1329. .navbar {
  1330. --f7-navbar-large-collapse-progress: 0;
  1331. position: relative;
  1332. left: 0;
  1333. top: 0;
  1334. width: 100%;
  1335. z-index: 500;
  1336. -webkit-backface-visibility: hidden;
  1337. backface-visibility: hidden;
  1338. box-sizing: border-box;
  1339. margin: 0;
  1340. transform: translate3d(0, 0, 0);
  1341. height: var(--f7-navbar-height);
  1342. background-image: var(--f7-navbar-bg-image, var(--f7-bars-bg-image));
  1343. background-color: var(--f7-navbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
  1344. color: var(--f7-navbar-text-color, var(--f7-bars-text-color));
  1345. font-size: var(--f7-navbar-font-size);
  1346. }
  1347. .navbar b {
  1348. font-weight: 500;
  1349. }
  1350. .navbar a {
  1351. color: var(--f7-navbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
  1352. }
  1353. .navbar a.link {
  1354. display: flex;
  1355. justify-content: flex-start;
  1356. line-height: var(--f7-navbar-link-line-height, var(--f7-navbar-height));
  1357. height: var(--f7-navbar-link-height, var(--f7-navbar-height));
  1358. }
  1359. .navbar .title,
  1360. .navbar .left,
  1361. .navbar .right {
  1362. position: relative;
  1363. z-index: 10;
  1364. }
  1365. .navbar .title {
  1366. position: relative;
  1367. overflow: hidden;
  1368. text-overflow: ellipsis;
  1369. white-space: nowrap;
  1370. flex-shrink: 10;
  1371. font-weight: var(--f7-navbar-title-font-weight);
  1372. display: inline-block;
  1373. line-height: var(--f7-navbar-title-line-height);
  1374. text-align: var(--f7-navbar-title-text-align);
  1375. font-size: var(--f7-navbar-title-font-size);
  1376. margin-left: var(--f7-navbar-title-margin-left);
  1377. margin-right: var(--f7-navbar-title-margin-left);
  1378. }
  1379. .navbar .subtitle {
  1380. display: block;
  1381. color: var(--f7-navbar-subtitle-text-color);
  1382. font-weight: normal;
  1383. font-size: var(--f7-navbar-subtitle-font-size);
  1384. line-height: var(--f7-navbar-subtitle-line-height);
  1385. text-align: var(--f7-navbar-subtitle-text-align);
  1386. }
  1387. .navbar .left,
  1388. .navbar .right {
  1389. flex-shrink: 0;
  1390. display: flex;
  1391. justify-content: flex-start;
  1392. align-items: center;
  1393. transform: translate3d(0, 0, 0);
  1394. }
  1395. .navbar .right:first-child {
  1396. position: absolute;
  1397. height: 100%;
  1398. }
  1399. .navbar.no-hairline:after,
  1400. .navbar.no-border:after {
  1401. display: none !important;
  1402. }
  1403. .navbar.no-hairline .title-large:after,
  1404. .navbar.no-border .title-large:after {
  1405. display: none !important;
  1406. }
  1407. .navbar.no-shadow:before {
  1408. display: none !important;
  1409. }
  1410. .navbar.navbar-hidden:before {
  1411. opacity: 0 !important;
  1412. }
  1413. .navbar:after,
  1414. .navbar:before {
  1415. -webkit-backface-visibility: hidden;
  1416. backface-visibility: hidden;
  1417. }
  1418. .navbar:after {
  1419. content: '';
  1420. position: absolute;
  1421. background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color));
  1422. display: block;
  1423. z-index: 15;
  1424. top: auto;
  1425. right: auto;
  1426. bottom: 0;
  1427. left: 0;
  1428. height: 1px;
  1429. width: 100%;
  1430. transform-origin: 50% 100%;
  1431. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  1432. }
  1433. .navbar:before {
  1434. content: '';
  1435. position: absolute;
  1436. right: 0;
  1437. width: 100%;
  1438. top: 100%;
  1439. bottom: auto;
  1440. height: 8px;
  1441. pointer-events: none;
  1442. background: var(--f7-navbar-shadow-image);
  1443. }
  1444. .navbar:after {
  1445. z-index: 1;
  1446. }
  1447. @media (min-width: 768px) {
  1448. :root {
  1449. --f7-navbar-height: var(--f7-navbar-tablet-height);
  1450. }
  1451. }
  1452. .navbar-transitioning,
  1453. .navbar-transitioning:before,
  1454. .navbar-transitioning .title,
  1455. .navbar-transitioning .title-large,
  1456. .navbar-transitioning .title-large-inner,
  1457. .navbar-transitioning .title-large-text,
  1458. .navbar-transitioning .subnavbar {
  1459. transition-duration: var(--f7-navbar-hide-show-transition-duration);
  1460. }
  1461. .navbar-page-transitioning {
  1462. transition-duration: var(--f7-page-swipeback-transition-duration) !important;
  1463. }
  1464. .navbar-page-transitioning .title-large-text,
  1465. .navbar-page-transitioning .title-large-inner {
  1466. transition-duration: var(--f7-page-swipeback-transition-duration) !important;
  1467. }
  1468. .navbar-hidden {
  1469. transform: translate3d(0, -100%, 0);
  1470. }
  1471. .navbar-large-hidden {
  1472. --f7-navbar-large-collapse-progress: 1;
  1473. }
  1474. .navbar-inner {
  1475. position: absolute;
  1476. left: 0;
  1477. top: 0;
  1478. width: 100%;
  1479. height: var(--f7-navbar-height);
  1480. display: flex;
  1481. align-items: center;
  1482. box-sizing: border-box;
  1483. padding: 0 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));
  1484. }
  1485. .navbar-inner.stacked {
  1486. display: none;
  1487. }
  1488. .views > .navbar,
  1489. .view > .navbar,
  1490. .page > .navbar {
  1491. position: absolute;
  1492. }
  1493. .navbar-large:before {
  1494. transform: translateY(calc((1 - var(--f7-navbar-large-collapse-progress)) * var(--f7-navbar-large-title-height)));
  1495. }
  1496. .navbar-inner-large > .title {
  1497. opacity: calc(-1 + 2 * var(--f7-navbar-large-collapse-progress));
  1498. }
  1499. .navbar-large-collapsed,
  1500. .navbar-inner-large-collapsed {
  1501. --f7-navbar-large-collapse-progress: 1;
  1502. }
  1503. .navbar .title-large {
  1504. box-sizing: border-box;
  1505. position: absolute;
  1506. left: 0;
  1507. right: 0;
  1508. top: 100%;
  1509. display: flex;
  1510. align-items: center;
  1511. white-space: nowrap;
  1512. transform: translate3d(0px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
  1513. will-change: transform, opacity;
  1514. transition-property: transform;
  1515. overflow: hidden;
  1516. background-image: var(--f7-navbar-bg-image, var(--f7-bars-bg-image));
  1517. background-color: var(--f7-navbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
  1518. height: calc(var(--f7-navbar-large-title-height) + 1px);
  1519. z-index: 5;
  1520. margin-top: -1px;
  1521. transform-origin: calc(var(--f7-navbar-large-title-padding-left) + var(--f7-safe-area-left)) center;
  1522. }
  1523. .navbar .title-large:after {
  1524. content: '';
  1525. position: absolute;
  1526. background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color));
  1527. display: block;
  1528. z-index: 15;
  1529. top: auto;
  1530. right: auto;
  1531. bottom: 0;
  1532. left: 0;
  1533. height: 1px;
  1534. width: 100%;
  1535. transform-origin: 50% 100%;
  1536. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  1537. }
  1538. .title-large-text,
  1539. .title-large-inner .title {
  1540. text-overflow: ellipsis;
  1541. white-space: nowrap;
  1542. color: var(--f7-navbar-large-title-text-color);
  1543. letter-spacing: var(--f7-navbar-large-title-letter-spacing);
  1544. font-size: var(--f7-navbar-large-title-font-size);
  1545. font-weight: var(--f7-navbar-large-title-font-weight);
  1546. line-height: var(--f7-navbar-large-title-line-height);
  1547. padding-left: calc(var(--f7-navbar-large-title-padding-left) + var(--f7-safe-area-left));
  1548. padding-right: calc(var(--f7-navbar-large-title-padding-right) + var(--f7-safe-area-right));
  1549. transform-origin: calc(var(--f7-navbar-large-title-padding-left) + var(--f7-safe-area-left)) center;
  1550. }
  1551. .title-large-text,
  1552. .title-large-inner {
  1553. box-sizing: border-box;
  1554. overflow: hidden;
  1555. transform: translate3d(0, calc(var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
  1556. transition-property: transform, opacity;
  1557. width: 100%;
  1558. }
  1559. .navbar-no-title-large-transition .title-large,
  1560. .navbar-no-title-large-transition .title-large-text,
  1561. .navbar-no-title-large-transition .title-large-inner {
  1562. transition-duration: 0ms;
  1563. }
  1564. .navbar ~ * {
  1565. --f7-page-navbar-offset: var(--f7-navbar-height);
  1566. }
  1567. .navbar ~ * .page-with-navbar-large,
  1568. .navbar ~ .page-with-navbar-large,
  1569. .page-with-navbar-large .navbar ~ * {
  1570. --f7-page-navbar-offset: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height));
  1571. }
  1572. .page.no-navbar,
  1573. .page.no-navbar .navbar ~ * {
  1574. --f7-page-navbar-offset: 0px;
  1575. }
  1576. .ios {
  1577. --f7-navbarLeftTextOffset: calc(4px + 12px + var(--f7-navbar-inner-padding-left));
  1578. --f7-navbarTitleLargeOffset: var(--f7-navbar-large-title-padding-left);
  1579. }
  1580. .ios .navbar .material-icons {
  1581. width: 24px;
  1582. }
  1583. .ios .navbar .f7-icons {
  1584. width: 28px;
  1585. }
  1586. .ios .navbar a.icon-only {
  1587. width: 44px;
  1588. margin: 0;
  1589. justify-content: center;
  1590. }
  1591. .ios .navbar .left a + a,
  1592. .ios .navbar .right a + a {
  1593. margin-left: 15px;
  1594. }
  1595. .ios .navbar b {
  1596. font-weight: 600;
  1597. }
  1598. .ios .navbar .left {
  1599. margin-right: 10px;
  1600. }
  1601. .ios .navbar .right {
  1602. margin-left: 10px;
  1603. }
  1604. .ios .navbar .right:first-child {
  1605. right: calc(8px + var(--f7-safe-area-right));
  1606. }
  1607. .ios .navbar-inner {
  1608. justify-content: space-between;
  1609. }
  1610. .ios .navbar-inner-left-title {
  1611. justify-content: flex-start;
  1612. }
  1613. .ios .navbar-inner-left-title .right {
  1614. margin-left: auto;
  1615. }
  1616. .ios .navbar-inner-left-title .title {
  1617. text-align: left;
  1618. margin-right: 10px;
  1619. }
  1620. .ios .view-master-detail .navbar-previous:not(.navbar-master),
  1621. .ios .view:not(.view-master-detail) .navbar-previous {
  1622. pointer-events: none;
  1623. }
  1624. .ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large,
  1625. .ios .view:not(.view-master-detail) .navbar-previous .title-large {
  1626. transform: translateY(-100%);
  1627. opacity: 0;
  1628. transition: 0ms;
  1629. }
  1630. .ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large .title-large-text,
  1631. .ios .view:not(.view-master-detail) .navbar-previous .title-large .title-large-text {
  1632. transform: scale(0.5);
  1633. transition: 0ms;
  1634. }
  1635. .ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large .title-large-inner,
  1636. .ios .view:not(.view-master-detail) .navbar-previous .title-large .title-large-inner {
  1637. transform: translateX(-100%);
  1638. opacity: 0;
  1639. transition: 0ms;
  1640. }
  1641. .ios .view-master-detail .navbar-previous:not(.navbar-master) .left,
  1642. .ios .view:not(.view-master-detail) .navbar-previous .left,
  1643. .ios .view-master-detail .navbar-previous:not(.navbar-master) .right,
  1644. .ios .view:not(.view-master-detail) .navbar-previous .right,
  1645. .ios .view-master-detail .navbar-previous:not(.navbar-master) > .title,
  1646. .ios .view:not(.view-master-detail) .navbar-previous > .title,
  1647. .ios .view-master-detail .navbar-previous:not(.navbar-master) .subnavbar,
  1648. .ios .view:not(.view-master-detail) .navbar-previous .subnavbar,
  1649. .ios .view-master-detail .navbar-previous:not(.navbar-master) .fading,
  1650. .ios .view:not(.view-master-detail) .navbar-previous .fading {
  1651. opacity: 0;
  1652. }
  1653. .ios .view-master-detail .navbar-previous:not(.navbar-master) .sliding,
  1654. .ios .view:not(.view-master-detail) .navbar-previous .sliding {
  1655. opacity: 0;
  1656. }
  1657. .ios .view-master-detail .navbar-previous:not(.navbar-master) .subnavbar.sliding,
  1658. .ios .view:not(.view-master-detail) .navbar-previous .subnavbar.sliding,
  1659. .ios .view-master-detail .navbar-previous:not(.navbar-master).sliding .subnavbar,
  1660. .ios .view:not(.view-master-detail) .navbar-previous.sliding .subnavbar {
  1661. opacity: 1;
  1662. transform: translate3d(-100%, 0, 0);
  1663. }
  1664. .ios .navbar-next {
  1665. pointer-events: none;
  1666. }
  1667. .ios .navbar-next .title-large {
  1668. transform: translateX(100%);
  1669. transition: 0ms;
  1670. }
  1671. .ios .navbar-next .title-large .title-large-text,
  1672. .ios .navbar-next .title-large .title-large-inner {
  1673. transition: 0ms;
  1674. }
  1675. .ios .navbar-next .left,
  1676. .ios .navbar-next .right,
  1677. .ios .navbar-next > .title,
  1678. .ios .navbar-next .subnavbar,
  1679. .ios .navbar-next .fading {
  1680. opacity: 0;
  1681. }
  1682. .ios .navbar-next .sliding {
  1683. opacity: 0;
  1684. }
  1685. .ios .navbar-next.sliding .left,
  1686. .ios .navbar-next.sliding .right,
  1687. .ios .navbar-next.sliding > .title,
  1688. .ios .navbar-next.sliding .subnavbar {
  1689. opacity: 0;
  1690. }
  1691. .ios .navbar-next .subnavbar.sliding,
  1692. .ios .navbar-next.sliding .subnavbar {
  1693. opacity: 1;
  1694. transform: translate3d(100%, 0, 0);
  1695. }
  1696. .ios .router-dynamic-navbar-inside .navbar-next .title-large,
  1697. .ios .router-dynamic-navbar-inside .navbar-next .title-large-text,
  1698. .ios .router-dynamic-navbar-inside .navbar-next .title-large-inner {
  1699. transform: none;
  1700. }
  1701. .ios .router-dynamic-navbar-inside .navbar-previous .title-large {
  1702. opacity: 1;
  1703. transform: translate3d(0px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
  1704. }
  1705. .ios .router-dynamic-navbar-inside .navbar-previous .title-large-text,
  1706. .ios .router-dynamic-navbar-inside .navbar-previous .title-large-inner {
  1707. transform: translate3d(0, calc(var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
  1708. }
  1709. .ios .router-transition .navbar {
  1710. transition-duration: var(--f7-page-transition-duration);
  1711. }
  1712. .ios .router-transition .title-large {
  1713. transition: 0ms;
  1714. }
  1715. .ios .router-transition .navbar-current .left,
  1716. .ios .router-transition .navbar-current > .title,
  1717. .ios .router-transition .navbar-current .right,
  1718. .ios .router-transition .navbar-current .subnavbar {
  1719. animation: ios-navbar-element-fade-out var(--f7-page-transition-duration) forwards;
  1720. }
  1721. .ios .router-transition .navbar-current .sliding,
  1722. .ios .router-transition .navbar-current .left.sliding .icon + span,
  1723. .ios .router-transition .navbar-current.sliding .left,
  1724. .ios .router-transition .navbar-current.sliding .left .icon + span,
  1725. .ios .router-transition .navbar-current.sliding > .title,
  1726. .ios .router-transition .navbar-current.sliding .right {
  1727. transition-duration: var(--f7-page-transition-duration);
  1728. opacity: 0 !important;
  1729. animation: none;
  1730. }
  1731. .ios .router-transition .navbar-current.sliding .subnavbar,
  1732. .ios .router-transition .navbar-current .sliding.subnavbar {
  1733. transition-duration: var(--f7-page-transition-duration);
  1734. animation: none;
  1735. opacity: 1;
  1736. }
  1737. .ios .router-transition-forward .navbar-next .left,
  1738. .ios .router-transition-backward .navbar-previous .left,
  1739. .ios .router-transition-forward .navbar-next > .title,
  1740. .ios .router-transition-backward .navbar-previous > .title,
  1741. .ios .router-transition-forward .navbar-next .right,
  1742. .ios .router-transition-backward .navbar-previous .right,
  1743. .ios .router-transition-forward .navbar-next .subnavbar,
  1744. .ios .router-transition-backward .navbar-previous .subnavbar {
  1745. animation: ios-navbar-element-fade-in var(--f7-page-transition-duration) forwards;
  1746. }
  1747. .ios .router-transition-forward .navbar-next .sliding,
  1748. .ios .router-transition-backward .navbar-previous .sliding,
  1749. .ios .router-transition-forward .navbar-next .left.sliding .icon + span,
  1750. .ios .router-transition-backward .navbar-previous .left.sliding .icon + span,
  1751. .ios .router-transition-forward .navbar-next.sliding .left,
  1752. .ios .router-transition-backward .navbar-previous.sliding .left,
  1753. .ios .router-transition-forward .navbar-next.sliding .left .icon + span,
  1754. .ios .router-transition-backward .navbar-previous.sliding .left .icon + span,
  1755. .ios .router-transition-forward .navbar-next.sliding > .title,
  1756. .ios .router-transition-backward .navbar-previous.sliding > .title,
  1757. .ios .router-transition-forward .navbar-next.sliding .right,
  1758. .ios .router-transition-backward .navbar-previous.sliding .right,
  1759. .ios .router-transition-forward .navbar-next.sliding .subnavbar,
  1760. .ios .router-transition-backward .navbar-previous.sliding .subnavbar {
  1761. transition-duration: var(--f7-page-transition-duration);
  1762. animation: none;
  1763. transform: translate3d(0, 0, 0) !important;
  1764. opacity: 1 !important;
  1765. }
  1766. .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
  1767. overflow: visible;
  1768. }
  1769. .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text {
  1770. animation: ios-navbar-title-large-text-slide-up var(--f7-page-transition-duration) forwards, ios-navbar-title-large-text-fade-out var(--f7-page-transition-duration) forwards;
  1771. }
  1772. .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large {
  1773. animation: ios-navbar-title-large-slide-up var(--f7-page-transition-duration) forwards;
  1774. }
  1775. .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-text {
  1776. animation: ios-navbar-title-large-text-fade-out var(--f7-page-transition-duration) forwards, ios-navbar-title-large-text-scale-out var(--f7-page-transition-duration) forwards;
  1777. }
  1778. .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large .title-large-inner {
  1779. animation: ios-navbar-title-large-inner-current-to-previous var(--f7-page-transition-duration) forwards;
  1780. }
  1781. .ios .router-transition-forward:not(.router-dynamic-navbar-inside) .navbar-next.router-navbar-transition-from-large .left .back span {
  1782. animation: ios-navbar-back-text-next-to-current var(--f7-page-transition-duration) forwards;
  1783. transition: none;
  1784. transform-origin: left center;
  1785. }
  1786. .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
  1787. overflow: visible;
  1788. }
  1789. .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text,
  1790. .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-inner {
  1791. animation: ios-navbar-title-large-text-slide-left var(--f7-page-transition-duration) forwards;
  1792. }
  1793. .ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
  1794. animation: ios-navbar-title-large-slide-down var(--f7-page-transition-duration) forwards;
  1795. }
  1796. .ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-text,
  1797. .ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-inner {
  1798. animation: ios-navbar-title-large-text-slide-left-top var(--f7-page-transition-duration) forwards;
  1799. }
  1800. .ios .router-transition-forward .navbar-next.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title,
  1801. .ios .router-transition-forward .navbar-current.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title {
  1802. animation: none;
  1803. opacity: 0 !important;
  1804. transition-duration: 0;
  1805. }
  1806. .ios .router-transition-forward.router-dynamic-navbar-inside .navbar-next .title-large,
  1807. .ios .router-transition-forward.router-dynamic-navbar-inside .navbar-current .title-large,
  1808. .ios .router-transition-forward.router-dynamic-navbar-inside .navbar-next .title-large-text,
  1809. .ios .router-transition-forward.router-dynamic-navbar-inside .navbar-current .title-large-text,
  1810. .ios .router-transition-forward.router-dynamic-navbar-inside .navbar-next .title-large-inner,
  1811. .ios .router-transition-forward.router-dynamic-navbar-inside .navbar-current .title-large-inner {
  1812. animation: none !important;
  1813. }
  1814. .ios .router-transition-backward:not(.router-dynamic-navbar-inside) .navbar-current.router-navbar-transition-to-large .left .back span {
  1815. animation: ios-navbar-back-text-current-to-previous var(--f7-page-transition-duration) forwards;
  1816. transition: none;
  1817. transform-origin: left center;
  1818. }
  1819. .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
  1820. overflow: visible;
  1821. transform: translateX(100%);
  1822. }
  1823. .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text,
  1824. .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-inner {
  1825. animation: ios-navbar-title-large-text-slide-right var(--f7-page-transition-duration) forwards;
  1826. }
  1827. .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large {
  1828. animation: ios-navbar-title-large-slide-up var(--f7-page-transition-duration) forwards;
  1829. }
  1830. .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-text,
  1831. .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-inner {
  1832. animation: ios-navbar-title-large-text-slide-right-bottom var(--f7-page-transition-duration) forwards;
  1833. }
  1834. .ios .router-transition-backward .navbar-current.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
  1835. opacity: 0;
  1836. }
  1837. .ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
  1838. overflow: visible;
  1839. opacity: 1;
  1840. transform: translateY(0);
  1841. }
  1842. .ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text {
  1843. animation: ios-navbar-title-large-text-slide-down var(--f7-page-transition-duration) forwards, ios-navbar-title-large-text-fade-in var(--f7-page-transition-duration) forwards;
  1844. }
  1845. .ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
  1846. opacity: 1;
  1847. animation: ios-navbar-title-large-slide-down var(--f7-page-transition-duration) forwards;
  1848. }
  1849. .ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-text {
  1850. animation: ios-navbar-title-large-text-scale-in var(--f7-page-transition-duration) forwards, ios-navbar-title-large-text-fade-in var(--f7-page-transition-duration) forwards;
  1851. }
  1852. .ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large .title-large-inner {
  1853. animation: ios-navbar-title-large-inner-previous-to-current var(--f7-page-transition-duration) forwards;
  1854. }
  1855. .ios .router-transition-backward .navbar-current.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title,
  1856. .ios .router-transition-backward .navbar-previous.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title {
  1857. animation: none;
  1858. opacity: 0 !important;
  1859. transition-duration: 0;
  1860. }
  1861. .ios .router-transition-backward.router-dynamic-navbar-inside .navbar-previous .title-large,
  1862. .ios .router-transition-backward.router-dynamic-navbar-inside .navbar-current .title-large,
  1863. .ios .router-transition-backward.router-dynamic-navbar-inside .navbar-previous .title-large-text,
  1864. .ios .router-transition-backward.router-dynamic-navbar-inside .navbar-current .title-large-text,
  1865. .ios .router-transition-backward.router-dynamic-navbar-inside .navbar-previous .title-large-inner,
  1866. .ios .router-transition-backward.router-dynamic-navbar-inside .navbar-current .title-large-inner {
  1867. animation: none !important;
  1868. }
  1869. .view-master-detail .navbar-master.navbar-previous {
  1870. pointer-events: auto;
  1871. }
  1872. .view-master-detail .navbar-master.navbar-previous .left,
  1873. .view-master-detail .navbar-master.navbar-previous:not(.navbar-inner-large) .title,
  1874. .view-master-detail .navbar-master.navbar-previous .right,
  1875. .view-master-detail .navbar-master.navbar-previous .subnavbar {
  1876. opacity: 1;
  1877. }
  1878. .ios .view-master-detail.router-transition .navbar-master .left,
  1879. .ios .view-master-detail.router-transition .navbar-master .left .icon + span,
  1880. .ios .view-master-detail.router-transition .navbar-master:not(.navbar-inner-large) .title,
  1881. .ios .view-master-detail.router-transition .navbar-master .right,
  1882. .ios .view-master-detail.router-transition .navbar-master .subnavbar,
  1883. .ios .view-master-detail.router-transition .navbar-master .sliding,
  1884. .ios .view-master-detail.router-transition .navbar-master .fading {
  1885. opacity: 1 !important;
  1886. transition-duration: 0ms;
  1887. transform: none !important;
  1888. animation: none !important;
  1889. }
  1890. .ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title {
  1891. opacity: calc(-1 + 2 * var(--f7-navbar-large-collapse-progress)) !important;
  1892. transition-duration: 0ms;
  1893. transform: none !important;
  1894. animation: none !important;
  1895. }
  1896. .ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title-large,
  1897. .ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title-large-text,
  1898. .ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title-large-inner {
  1899. transition-duration: 0ms;
  1900. animation: none !important;
  1901. }
  1902. @keyframes ios-navbar-element-fade-in {
  1903. from {
  1904. opacity: 0;
  1905. }
  1906. to {
  1907. opacity: 1;
  1908. }
  1909. }
  1910. @keyframes ios-navbar-element-fade-out {
  1911. from {
  1912. opacity: 1;
  1913. }
  1914. to {
  1915. opacity: 0;
  1916. }
  1917. }
  1918. @keyframes ios-navbar-title-large-slide-up {
  1919. 0% {
  1920. transform: translateY(0%);
  1921. }
  1922. 100% {
  1923. transform: translateY(calc(-1 * var(--f7-navbar-large-title-height)));
  1924. }
  1925. }
  1926. @keyframes ios-navbar-title-large-slide-down {
  1927. 0% {
  1928. transform: translateY(calc(-1 * var(--f7-navbar-large-title-height)));
  1929. }
  1930. 100% {
  1931. transform: translateY(0%);
  1932. }
  1933. }
  1934. @keyframes ios-navbar-title-large-text-slide-up {
  1935. 0% {
  1936. transform: translateX(0px) translateY(0%) scale(1);
  1937. }
  1938. 100% {
  1939. transform: translateX(calc(var(--f7-navbarLeftTextOffset) - var(--f7-navbarTitleLargeOffset))) translateY(calc(-1 * (var(--f7-navbar-height) + var(--f7-navbar-large-title-height)) / 2)) scale(0.5);
  1940. }
  1941. }
  1942. @keyframes ios-navbar-title-large-text-slide-down {
  1943. 0% {
  1944. transform: translateX(calc(var(--f7-navbarLeftTextOffset) - var(--f7-navbarTitleLargeOffset))) translateY(calc(-1 * (var(--f7-navbar-height) + var(--f7-navbar-large-title-height)) / 2)) scale(0.5);
  1945. }
  1946. 100% {
  1947. transform: translateX(0px) translateY(0%) scale(1);
  1948. }
  1949. }
  1950. @keyframes ios-navbar-title-large-text-slide-left {
  1951. 0% {
  1952. transform: translateX(0%) scale(1);
  1953. }
  1954. 100% {
  1955. transform: translateX(-100%) scale(1);
  1956. }
  1957. }
  1958. @keyframes ios-navbar-title-large-text-slide-right {
  1959. 0% {
  1960. transform: translateX(-100%) scale(1);
  1961. }
  1962. 100% {
  1963. transform: translateX(0%) scale(1);
  1964. }
  1965. }
  1966. @keyframes ios-navbar-title-large-text-slide-left-top {
  1967. 0% {
  1968. transform: translateX(100%) translateY(var(--f7-navbar-large-title-height)) scale(1);
  1969. }
  1970. 100% {
  1971. transform: translateX(0%) translateY(0%) scale(1);
  1972. }
  1973. }
  1974. @keyframes ios-navbar-title-large-text-slide-right-bottom {
  1975. 0% {
  1976. transform: translateX(0%) translateY(0%) scale(1);
  1977. }
  1978. 100% {
  1979. transform: translateX(100%) translateY(var(--f7-navbar-large-title-height)) scale(1);
  1980. }
  1981. }
  1982. @keyframes ios-navbar-title-large-text-fade-out {
  1983. 0% {
  1984. opacity: 1;
  1985. }
  1986. 80% {
  1987. opacity: 0;
  1988. }
  1989. 100% {
  1990. opacity: 0;
  1991. }
  1992. }
  1993. @keyframes ios-navbar-title-large-text-fade-in {
  1994. 0% {
  1995. opacity: 0;
  1996. }
  1997. 20% {
  1998. opacity: 0;
  1999. }
  2000. 100% {
  2001. opacity: 1;
  2002. }
  2003. }
  2004. @keyframes ios-navbar-title-large-text-scale-out {
  2005. 0% {
  2006. transform: translateY(0%) scale(1);
  2007. }
  2008. 100% {
  2009. transform: translateY(0%) scale(0.5);
  2010. }
  2011. }
  2012. @keyframes ios-navbar-title-large-text-scale-in {
  2013. 0% {
  2014. transform: translateY(0%) scale(0.5);
  2015. }
  2016. 100% {
  2017. transform: translateY(0%) scale(1);
  2018. }
  2019. }
  2020. @keyframes ios-navbar-back-text-current-to-previous {
  2021. 0% {
  2022. opacity: 1;
  2023. transform: translateY(0px) translateX(0px) scale(1);
  2024. }
  2025. 80% {
  2026. opacity: 0;
  2027. }
  2028. 100% {
  2029. opacity: 0;
  2030. transform: translateX(calc(var(--f7-navbarTitleLargeOffset) - var(--f7-navbarLeftTextOffset))) translateY(calc((var(--f7-navbar-height) + var(--f7-navbar-large-title-height)) / 2)) scale(2);
  2031. }
  2032. }
  2033. @keyframes ios-navbar-back-text-next-to-current {
  2034. 0% {
  2035. opacity: 0;
  2036. transform: translateX(calc(var(--f7-navbarTitleLargeOffset) - var(--f7-navbarLeftTextOffset))) translateY(calc((var(--f7-navbar-height) + var(--f7-navbar-large-title-height)) / 2)) scale(2);
  2037. }
  2038. 20% {
  2039. opacity: 0;
  2040. }
  2041. 100% {
  2042. opacity: 1;
  2043. transform: translateX(0px) translateY(0px) scale(1);
  2044. }
  2045. }
  2046. @keyframes ios-navbar-title-large-inner-current-to-previous {
  2047. 0% {
  2048. transform: translateX(0%);
  2049. opacity: 1;
  2050. }
  2051. 100% {
  2052. transform: translateX(-100%);
  2053. opacity: 0;
  2054. }
  2055. }
  2056. @keyframes ios-navbar-title-large-inner-previous-to-current {
  2057. 0% {
  2058. transform: translateX(-100%);
  2059. opacity: 0;
  2060. }
  2061. 100% {
  2062. transform: translateX(0%);
  2063. opacity: 1;
  2064. }
  2065. }
  2066. .md .navbar .material-icons {
  2067. width: 24px;
  2068. }
  2069. .md .navbar .f7-icons {
  2070. width: 28px;
  2071. }
  2072. .md .navbar a.link {
  2073. padding: 0 16px;
  2074. min-width: 48px;
  2075. }
  2076. .md .navbar a.link:before {
  2077. content: '';
  2078. width: 152%;
  2079. height: 152%;
  2080. position: absolute;
  2081. left: -26%;
  2082. top: -26%;
  2083. background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
  2084. background-repeat: no-repeat;
  2085. background-position: center;
  2086. background-size: 100% 100%;
  2087. opacity: 0;
  2088. pointer-events: none;
  2089. transition-duration: 600ms;
  2090. }
  2091. .md .navbar a.link.active-state:before {
  2092. opacity: 1;
  2093. transition-duration: 150ms;
  2094. }
  2095. .md .navbar a.icon-only {
  2096. min-width: 0;
  2097. flex-shrink: 0;
  2098. width: 56px;
  2099. }
  2100. .md .navbar .right {
  2101. margin-left: auto;
  2102. }
  2103. .md .navbar .right:first-child {
  2104. right: var(--f7-safe-area-right);
  2105. }
  2106. .md .navbar-inner {
  2107. justify-content: flex-start;
  2108. overflow: hidden;
  2109. }
  2110. .md .navbar-inner-large:not(.navbar-inner-large-collapsed) {
  2111. overflow: visible;
  2112. }
  2113. .md .page.page-with-subnavbar .navbar-inner {
  2114. overflow: visible;
  2115. }
  2116. .md .navbar-inner-centered-title {
  2117. justify-content: space-between;
  2118. }
  2119. .md .navbar-inner-centered-title .right {
  2120. margin-left: 0;
  2121. }
  2122. .md .navbar-inner-centered-title .title {
  2123. text-align: center;
  2124. }
  2125. .aurora .navbar a.icon-only {
  2126. margin: 0;
  2127. justify-content: center;
  2128. }
  2129. .aurora .navbar .left a + a,
  2130. .aurora .navbar .right a + a {
  2131. margin-left: 10px;
  2132. }
  2133. .aurora .navbar b {
  2134. font-weight: bold;
  2135. }
  2136. .aurora .navbar .left {
  2137. margin-right: 10px;
  2138. }
  2139. .aurora .navbar .right {
  2140. margin-left: 10px;
  2141. }
  2142. .aurora .navbar .right:first-child {
  2143. right: calc(15px + var(--f7-safe-area-right));
  2144. }
  2145. .aurora .navbar-inner {
  2146. justify-content: space-between;
  2147. }
  2148. .aurora .navbar-inner-left-title {
  2149. justify-content: flex-start;
  2150. }
  2151. .aurora .navbar-inner-left-title .right {
  2152. margin-left: auto;
  2153. }
  2154. .aurora .navbar-inner-left-title .title {
  2155. text-align: left;
  2156. margin-right: 10px;
  2157. }
  2158. /* === Toolbar === */
  2159. :root {
  2160. /*
  2161. --f7-toolbar-bg-color: var(--f7-bars-bg-color);
  2162. --f7-toolbar-bg-image: var(--f7-bars-bg-image);
  2163. --f7-toolbar-border-color: var(--f7-bars-border-color);
  2164. --f7-toolbar-link-color: var(--f7-bars-link-color);
  2165. --f7-toolbar-text-color: var(--f7-bars-text-color);
  2166. --f7-tabbar-link-active-color: var(--f7-theme-color);
  2167. */
  2168. --f7-tabbar-link-active-bg-color: transparent;
  2169. --f7-tabbar-label-text-transform: none;
  2170. --f7-toolbar-hide-show-transition-duration: 400ms;
  2171. }
  2172. .ios {
  2173. --f7-toolbar-height: 44px;
  2174. --f7-toolbar-font-size: 17px;
  2175. --f7-toolbar-inner-padding-left: 8px;
  2176. --f7-toolbar-inner-padding-right: 8px;
  2177. /*
  2178. --f7-toolbar-link-height: var(--f7-toolbar-height);
  2179. --f7-toolbar-link-line-height: var(--f7-toolbar-height);
  2180. */
  2181. --f7-tabbar-labels-height: 50px;
  2182. --f7-tabbar-labels-tablet-height: 56px;
  2183. --f7-tabbar-link-inactive-color: #929292;
  2184. --f7-toolbar-top-shadow-image: none;
  2185. --f7-toolbar-bottom-shadow-image: none;
  2186. --f7-tabbar-icon-size: 28px;
  2187. --f7-tabbar-link-text-transform: none;
  2188. --f7-tabbar-link-font-weight: 400;
  2189. --f7-tabbar-link-letter-spacing: 0;
  2190. --f7-tabbar-label-font-size: 10px;
  2191. --f7-tabbar-label-tablet-font-size: 14px;
  2192. --f7-tabbar-label-font-weight: 400;
  2193. --f7-tabbar-label-letter-spacing: 0.01;
  2194. }
  2195. .md {
  2196. --f7-toolbar-height: 48px;
  2197. --f7-toolbar-font-size: 14px;
  2198. --f7-toolbar-inner-padding-left: 0px;
  2199. --f7-toolbar-inner-padding-right: 0px;
  2200. /*
  2201. --f7-toolbar-link-height: var(--f7-toolbar-height);
  2202. --f7-toolbar-link-line-height: var(--f7-toolbar-height);
  2203. */
  2204. --f7-tabbar-labels-height: 56px;
  2205. --f7-tabbar-labels-tablet-height: 56px;
  2206. --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.54);
  2207. /*
  2208. --f7-tabbar-link-active-border-color: var(--f7-theme-color);
  2209. */
  2210. --f7-toolbar-top-shadow-image: var(--f7-bars-shadow-bottom-image);
  2211. --f7-toolbar-bottom-shadow-image: var(--f7-bars-shadow-top-image);
  2212. --f7-tabbar-icon-size: 24px;
  2213. --f7-tabbar-link-text-transform: uppercase;
  2214. --f7-tabbar-link-font-weight: 500;
  2215. --f7-tabbar-link-letter-spacing: 0.03em;
  2216. --f7-tabbar-label-font-size: 14px;
  2217. --f7-tabbar-label-tablet-font-size: 14px;
  2218. --f7-tabbar-label-font-weight: 400;
  2219. --f7-tabbar-label-letter-spacing: 0;
  2220. }
  2221. .md .theme-dark,
  2222. .md.theme-dark {
  2223. --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
  2224. }
  2225. .aurora {
  2226. --f7-toolbar-height: 38px;
  2227. --f7-toolbar-font-size: 14px;
  2228. --f7-toolbar-inner-padding-left: 15px;
  2229. --f7-toolbar-inner-padding-right: 15px;
  2230. --f7-toolbar-link-height: auto;
  2231. --f7-toolbar-link-line-height: inherit;
  2232. --f7-tabbar-labels-height: 44px;
  2233. --f7-tabbar-labels-tablet-height: 44px;
  2234. --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.5);
  2235. --f7-tabbar-link-inactive-bg-color: rgba(0, 0, 0, 0.2);
  2236. --f7-toolbar-top-shadow-image: none;
  2237. --f7-toolbar-bottom-shadow-image: none;
  2238. --f7-tabbar-icon-size: 18px;
  2239. --f7-tabbar-link-text-transform: none;
  2240. --f7-tabbar-link-font-weight: 400;
  2241. --f7-tabbar-link-letter-spacing: 0;
  2242. --f7-tabbar-label-font-size: 12px;
  2243. --f7-tabbar-label-tablet-font-size: 12px;
  2244. --f7-tabbar-label-font-weight: 500;
  2245. --f7-tabbar-label-letter-spacing: 0.01;
  2246. }
  2247. .aurora .theme-dark,
  2248. .aurora.theme-dark {
  2249. --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.5);
  2250. }
  2251. .toolbar {
  2252. width: 100%;
  2253. position: relative;
  2254. margin: 0;
  2255. transform: translate3d(0, 0, 0);
  2256. -webkit-backface-visibility: hidden;
  2257. backface-visibility: hidden;
  2258. z-index: 500;
  2259. box-sizing: border-box;
  2260. left: 0;
  2261. height: var(--f7-toolbar-height);
  2262. background-image: var(--f7-toolbar-bg-image, var(--f7-bars-bg-image));
  2263. background-color: var(--f7-toolbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
  2264. color: var(--f7-toolbar-text-color, var(--f7-bars-text-color));
  2265. font-size: var(--f7-toolbar-font-size);
  2266. }
  2267. .toolbar b {
  2268. font-weight: 600;
  2269. }
  2270. .toolbar a {
  2271. color: var(--f7-toolbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
  2272. box-sizing: border-box;
  2273. flex-shrink: 1;
  2274. position: relative;
  2275. white-space: nowrap;
  2276. text-overflow: ellipsis;
  2277. }
  2278. .toolbar a.link {
  2279. display: flex;
  2280. line-height: var(--f7-toolbar-link-line-height, var(--f7-toolbar-height));
  2281. height: var(--f7-toolbar-link-height, var(--f7-toolbar-height));
  2282. }
  2283. .toolbar i.icon {
  2284. display: block;
  2285. }
  2286. .toolbar:after,
  2287. .toolbar:before {
  2288. -webkit-backface-visibility: hidden;
  2289. backface-visibility: hidden;
  2290. }
  2291. .views > .toolbar,
  2292. .view > .toolbar,
  2293. .page > .toolbar {
  2294. position: absolute;
  2295. }
  2296. .toolbar-top,
  2297. .ios .toolbar-top-ios,
  2298. .md .toolbar-top-md,
  2299. .aurora .toolbar-top-aurora {
  2300. top: 0;
  2301. }
  2302. .toolbar-top .tab-link-highlight,
  2303. .ios .toolbar-top-ios .tab-link-highlight,
  2304. .md .toolbar-top-md .tab-link-highlight,
  2305. .aurora .toolbar-top-aurora .tab-link-highlight {
  2306. bottom: 0;
  2307. }
  2308. .toolbar-top.no-hairline:after,
  2309. .ios .toolbar-top-ios.no-hairline:after,
  2310. .md .toolbar-top-md.no-hairline:after,
  2311. .aurora .toolbar-top-aurora.no-hairline:after,
  2312. .toolbar-top.no-border:after,
  2313. .ios .toolbar-top-ios.no-border:after,
  2314. .md .toolbar-top-md.no-border:after,
  2315. .aurora .toolbar-top-aurora.no-border:after {
  2316. display: none !important;
  2317. }
  2318. .toolbar-top.no-shadow:before,
  2319. .ios .toolbar-top-ios.no-shadow:before,
  2320. .md .toolbar-top-md.no-shadow:before,
  2321. .aurora .toolbar-top-aurora.no-shadow:before,
  2322. .toolbar-top.toolbar-hidden:before,
  2323. .ios .toolbar-top-ios.toolbar-hidden:before,
  2324. .md .toolbar-top-md.toolbar-hidden:before,
  2325. .aurora .toolbar-top-aurora.toolbar-hidden:before {
  2326. display: none !important;
  2327. }
  2328. .toolbar-top:after,
  2329. .ios .toolbar-top-ios:after,
  2330. .md .toolbar-top-md:after,
  2331. .aurora .toolbar-top-aurora:after,
  2332. .toolbar-top:before,
  2333. .ios .toolbar-top-ios:before,
  2334. .md .toolbar-top-md:before,
  2335. .aurora .toolbar-top-aurora:before {
  2336. -webkit-backface-visibility: hidden;
  2337. backface-visibility: hidden;
  2338. }
  2339. .toolbar-top:after,
  2340. .ios .toolbar-top-ios:after,
  2341. .md .toolbar-top-md:after,
  2342. .aurora .toolbar-top-aurora:after {
  2343. content: '';
  2344. position: absolute;
  2345. background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color));
  2346. display: block;
  2347. z-index: 15;
  2348. top: auto;
  2349. right: auto;
  2350. bottom: 0;
  2351. left: 0;
  2352. height: 1px;
  2353. width: 100%;
  2354. transform-origin: 50% 100%;
  2355. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  2356. }
  2357. .toolbar-top:before,
  2358. .ios .toolbar-top-ios:before,
  2359. .md .toolbar-top-md:before,
  2360. .aurora .toolbar-top-aurora:before {
  2361. content: '';
  2362. position: absolute;
  2363. right: 0;
  2364. width: 100%;
  2365. top: 100%;
  2366. bottom: auto;
  2367. height: 8px;
  2368. pointer-events: none;
  2369. background: var(--f7-toolbar-top-shadow-image);
  2370. }
  2371. .toolbar-bottom,
  2372. .ios .toolbar-bottom-ios,
  2373. .md .toolbar-bottom-md,
  2374. .aurora .toolbar-bottom-aurora {
  2375. bottom: 0;
  2376. height: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
  2377. }
  2378. .toolbar-bottom .tab-link-highlight,
  2379. .ios .toolbar-bottom-ios .tab-link-highlight,
  2380. .md .toolbar-bottom-md .tab-link-highlight,
  2381. .aurora .toolbar-bottom-aurora .tab-link-highlight {
  2382. top: 0;
  2383. }
  2384. .toolbar-bottom .toolbar-inner,
  2385. .ios .toolbar-bottom-ios .toolbar-inner,
  2386. .md .toolbar-bottom-md .toolbar-inner,
  2387. .aurora .toolbar-bottom-aurora .toolbar-inner {
  2388. height: auto;
  2389. top: 0;
  2390. bottom: var(--f7-safe-area-bottom);
  2391. }
  2392. .toolbar-bottom.no-hairline:before,
  2393. .ios .toolbar-bottom-ios.no-hairline:before,
  2394. .md .toolbar-bottom-md.no-hairline:before,
  2395. .aurora .toolbar-bottom-aurora.no-hairline:before,
  2396. .toolbar-bottom.no-border:before,
  2397. .ios .toolbar-bottom-ios.no-border:before,
  2398. .md .toolbar-bottom-md.no-border:before,
  2399. .aurora .toolbar-bottom-aurora.no-border:before {
  2400. display: none !important;
  2401. }
  2402. .toolbar-bottom.no-shadow:after,
  2403. .ios .toolbar-bottom-ios.no-shadow:after,
  2404. .md .toolbar-bottom-md.no-shadow:after,
  2405. .aurora .toolbar-bottom-aurora.no-shadow:after,
  2406. .toolbar-bottom.toolbar-hidden:after,
  2407. .ios .toolbar-bottom-ios.toolbar-hidden:after,
  2408. .md .toolbar-bottom-md.toolbar-hidden:after,
  2409. .aurora .toolbar-bottom-aurora.toolbar-hidden:after {
  2410. display: none !important;
  2411. }
  2412. .toolbar-bottom:before,
  2413. .ios .toolbar-bottom-ios:before,
  2414. .md .toolbar-bottom-md:before,
  2415. .aurora .toolbar-bottom-aurora:before {
  2416. content: '';
  2417. position: absolute;
  2418. background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color));
  2419. display: block;
  2420. z-index: 15;
  2421. top: 0;
  2422. right: auto;
  2423. bottom: auto;
  2424. left: 0;
  2425. height: 1px;
  2426. width: 100%;
  2427. transform-origin: 50% 0%;
  2428. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  2429. }
  2430. .toolbar-bottom:after,
  2431. .ios .toolbar-bottom-ios:after,
  2432. .md .toolbar-bottom-md:after,
  2433. .aurora .toolbar-bottom-aurora:after {
  2434. content: '';
  2435. position: absolute;
  2436. right: 0;
  2437. width: 100%;
  2438. bottom: 100%;
  2439. height: 8px;
  2440. top: auto;
  2441. pointer-events: none;
  2442. background: var(--f7-toolbar-bottom-shadow-image);
  2443. }
  2444. .toolbar-inner {
  2445. position: absolute;
  2446. left: 0;
  2447. top: 0;
  2448. width: 100%;
  2449. height: 100%;
  2450. display: flex;
  2451. justify-content: space-between;
  2452. box-sizing: border-box;
  2453. align-items: center;
  2454. align-content: center;
  2455. overflow: hidden;
  2456. 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));
  2457. }
  2458. .views > .tabbar,
  2459. .views > .tabbar-labels {
  2460. z-index: 5001;
  2461. }
  2462. .tabbar a,
  2463. .tabbar-labels a {
  2464. color: var(--f7-tabbar-link-inactive-color);
  2465. }
  2466. .tabbar a.tab-link:not(.tab-link-active),
  2467. .tabbar-labels a.tab-link:not(.tab-link-active) {
  2468. background-color: var(--f7-tabbar-link-inactive-bg-color, transparent);
  2469. }
  2470. .tabbar a.link,
  2471. .tabbar-labels a.link {
  2472. line-height: 1.4;
  2473. }
  2474. .tabbar a.tab-link,
  2475. .tabbar-labels a.tab-link,
  2476. .tabbar a.link,
  2477. .tabbar-labels a.link {
  2478. height: 100%;
  2479. width: 100%;
  2480. box-sizing: border-box;
  2481. display: flex;
  2482. justify-content: center;
  2483. align-items: center;
  2484. flex-direction: column;
  2485. text-transform: var(--f7-tabbar-link-text-transform);
  2486. font-weight: var(--f7-tabbar-link-font-weight);
  2487. letter-spacing: var(--f7-tabbar-link-letter-spacing);
  2488. overflow: hidden;
  2489. }
  2490. .tabbar .tab-link-active,
  2491. .tabbar-labels .tab-link-active {
  2492. color: var(--f7-tabbar-link-active-color, var(--f7-theme-color));
  2493. background-color: var(--f7-tabbar-link-active-bg-color, transparent);
  2494. }
  2495. .tabbar i.icon,
  2496. .tabbar-labels i.icon {
  2497. font-size: var(--f7-tabbar-icon-size);
  2498. height: var(--f7-tabbar-icon-size);
  2499. line-height: var(--f7-tabbar-icon-size);
  2500. }
  2501. .tabbar-labels {
  2502. --f7-toolbar-height: var(--f7-tabbar-labels-height);
  2503. }
  2504. .tabbar-labels a.tab-link,
  2505. .tabbar-labels a.link {
  2506. height: 100%;
  2507. justify-content: space-between;
  2508. align-items: center;
  2509. }
  2510. .tabbar-labels .tabbar-label {
  2511. display: block;
  2512. line-height: 1;
  2513. margin: 0;
  2514. position: relative;
  2515. text-overflow: ellipsis;
  2516. white-space: nowrap;
  2517. font-size: var(--f7-tabbar-label-font-size);
  2518. text-transform: var(--f7-tabbar-label-text-transform);
  2519. font-weight: var(--f7-tabbar-label-font-weight);
  2520. letter-spacing: var(--f7-tabbar-label-letter-spacing);
  2521. }
  2522. @media (min-width: 768px) {
  2523. :root {
  2524. --f7-tabbar-labels-height: var(--f7-tabbar-labels-tablet-height);
  2525. --f7-tabbar-label-font-size: var(--f7-tabbar-label-tablet-font-size);
  2526. }
  2527. }
  2528. .tabbar-scrollable .toolbar-inner {
  2529. justify-content: flex-start;
  2530. will-change: scroll-position;
  2531. overflow: auto;
  2532. -webkit-overflow-scrolling: touch;
  2533. }
  2534. .tabbar-scrollable .toolbar-inner::-webkit-scrollbar {
  2535. display: none !important;
  2536. width: 0 !important;
  2537. height: 0 !important;
  2538. -webkit-appearance: none;
  2539. opacity: 0 !important;
  2540. }
  2541. .tabbar-scrollable a.tab-link,
  2542. .tabbar-scrollable a.link {
  2543. width: auto;
  2544. flex-shrink: 0;
  2545. }
  2546. .toolbar-transitioning,
  2547. .navbar-transitioning + .toolbar,
  2548. .navbar-transitioning ~ * .toolbar {
  2549. transition-duration: var(--f7-toolbar-hide-show-transition-duration);
  2550. }
  2551. .toolbar-bottom ~ *,
  2552. .ios .toolbar-bottom-ios ~ *,
  2553. .md .toolbar-bottom-md ~ *,
  2554. .aurora .toolbar-bottom-aurora ~ * {
  2555. --f7-page-toolbar-bottom-offset: var(--f7-toolbar-height);
  2556. }
  2557. .toolbar-bottom.tabbar-labels ~ *,
  2558. .ios .toolbar-bottom-ios.tabbar-labels ~ *,
  2559. .md .toolbar-bottom-md.tabbar-labels ~ *,
  2560. .aurora .toolbar-bottom-aurora.tabbar-labels ~ * {
  2561. --f7-page-toolbar-bottom-offset: var(--f7-tabbar-labels-height);
  2562. }
  2563. .toolbar-bottom.toolbar-hidden,
  2564. .ios .toolbar-bottom-ios.toolbar-hidden,
  2565. .md .toolbar-bottom-md.toolbar-hidden,
  2566. .aurora .toolbar-bottom-aurora.toolbar-hidden {
  2567. transform: translate3d(0, 100%, 0);
  2568. }
  2569. .toolbar-top ~ *,
  2570. .ios .toolbar-top-ios ~ *,
  2571. .md .toolbar-top-md ~ *,
  2572. .aurora .toolbar-top-aurora ~ * {
  2573. --f7-page-toolbar-top-offset: var(--f7-toolbar-height);
  2574. }
  2575. .toolbar-top.tabbar-labels ~ *,
  2576. .ios .toolbar-top-ios.tabbar-labels ~ *,
  2577. .md .toolbar-top-md.tabbar-labels ~ *,
  2578. .aurora .toolbar-top-aurora.tabbar-labels ~ * {
  2579. --f7-page-toolbar-top-offset: var(--f7-tabbar-labels-height);
  2580. }
  2581. .toolbar-top.toolbar-hidden,
  2582. .ios .toolbar-top-ios.toolbar-hidden,
  2583. .md .toolbar-top-md.toolbar-hidden,
  2584. .aurora .toolbar-top-aurora.toolbar-hidden {
  2585. transform: translate3d(0, -100%, 0);
  2586. }
  2587. .navbar ~ .toolbar-top,
  2588. .ios .navbar ~ .toolbar-top-ios,
  2589. .md .navbar ~ .toolbar-top-md,
  2590. .aurora .navbar ~ .toolbar-top-aurora,
  2591. .navbar ~ * .toolbar-top,
  2592. .ios .navbar ~ * .toolbar-top-ios,
  2593. .md .navbar ~ * .toolbar-top-md,
  2594. .aurora .navbar ~ * .toolbar-top-aurora,
  2595. .navbar ~ .page:not(.no-navbar) .toolbar-top,
  2596. .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios,
  2597. .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md,
  2598. .aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora {
  2599. top: var(--f7-navbar-height);
  2600. }
  2601. .navbar ~ .toolbar-top.toolbar-hidden,
  2602. .ios .navbar ~ .toolbar-top-ios.toolbar-hidden,
  2603. .md .navbar ~ .toolbar-top-md.toolbar-hidden,
  2604. .aurora .navbar ~ .toolbar-top-aurora.toolbar-hidden,
  2605. .navbar ~ * .toolbar-top.toolbar-hidden,
  2606. .ios .navbar ~ * .toolbar-top-ios.toolbar-hidden,
  2607. .md .navbar ~ * .toolbar-top-md.toolbar-hidden,
  2608. .aurora .navbar ~ * .toolbar-top-aurora.toolbar-hidden,
  2609. .navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden,
  2610. .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden,
  2611. .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden,
  2612. .aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora.toolbar-hidden {
  2613. transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-toolbar-height))), 0);
  2614. }
  2615. .navbar ~ .toolbar-top.toolbar-hidden.tabbar-labels,
  2616. .ios .navbar ~ .toolbar-top-ios.toolbar-hidden.tabbar-labels,
  2617. .md .navbar ~ .toolbar-top-md.toolbar-hidden.tabbar-labels,
  2618. .aurora .navbar ~ .toolbar-top-aurora.toolbar-hidden.tabbar-labels,
  2619. .navbar ~ * .toolbar-top.toolbar-hidden.tabbar-labels,
  2620. .ios .navbar ~ * .toolbar-top-ios.toolbar-hidden.tabbar-labels,
  2621. .md .navbar ~ * .toolbar-top-md.toolbar-hidden.tabbar-labels,
  2622. .aurora .navbar ~ * .toolbar-top-aurora.toolbar-hidden.tabbar-labels,
  2623. .navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden.tabbar-labels,
  2624. .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden.tabbar-labels,
  2625. .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden.tabbar-labels,
  2626. .aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora.toolbar-hidden.tabbar-labels {
  2627. transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-tabbar-labels-height))), 0);
  2628. }
  2629. .navbar-hidden + .toolbar-top:not(.toolbar-hidden),
  2630. .ios .navbar-hidden + .toolbar-top-ios:not(.toolbar-hidden),
  2631. .md .navbar-hidden + .toolbar-top-md:not(.toolbar-hidden),
  2632. .aurora .navbar-hidden + .toolbar-top-aurora:not(.toolbar-hidden),
  2633. .navbar-hidden ~ * .toolbar-top:not(.toolbar-hidden),
  2634. .ios .navbar-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
  2635. .md .navbar-hidden ~ * .toolbar-top-md:not(.toolbar-hidden),
  2636. .aurora .navbar-hidden ~ * .toolbar-top-aurora:not(.toolbar-hidden) {
  2637. transform: translate3d(0, calc(-1 * var(--f7-navbar-height)), 0);
  2638. }
  2639. .navbar-large-hidden + .toolbar-top:not(.toolbar-hidden),
  2640. .ios .navbar-large-hidden + .toolbar-top-ios:not(.toolbar-hidden),
  2641. .md .navbar-large-hidden + .toolbar-top-md:not(.toolbar-hidden),
  2642. .navbar-large-hidden ~ * .toolbar-top:not(.toolbar-hidden),
  2643. .ios .navbar-large-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
  2644. .md .navbar-large-hidden ~ * .toolbar-top-md:not(.toolbar-hidden),
  2645. .aurora .navbar-large-hidden ~ * .toolbar-top-aurora:not(.toolbar-hidden) {
  2646. transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-navbar-large-title-height))), 0);
  2647. }
  2648. .ios .toolbar a.icon-only {
  2649. min-height: var(--f7-toolbar-height);
  2650. display: flex;
  2651. justify-content: center;
  2652. align-items: center;
  2653. margin: 0;
  2654. min-width: 44px;
  2655. }
  2656. .ios .tabbar-labels a.tab-link,
  2657. .ios .tabbar-labels a.link {
  2658. padding-top: 4px;
  2659. padding-bottom: 4px;
  2660. }
  2661. .ios .tabbar-labels a.tab-link i + span,
  2662. .ios .tabbar-labels a.link i + span {
  2663. margin: 0;
  2664. }
  2665. @media (min-width: 768px) {
  2666. .ios .tabbar .toolbar-inner,
  2667. .ios .tabbar-labels .toolbar-inner {
  2668. justify-content: center;
  2669. }
  2670. .ios .tabbar a.tab-link,
  2671. .ios .tabbar-labels a.tab-link,
  2672. .ios .tabbar a.link,
  2673. .ios .tabbar-labels a.link {
  2674. width: auto;
  2675. min-width: 105px;
  2676. }
  2677. }
  2678. .ios .tabbar-scrollable .toolbar-inner {
  2679. justify-content: flex-start;
  2680. }
  2681. .ios .tabbar-scrollable a.tab-link,
  2682. .ios .tabbar-scrollable a.link {
  2683. padding: 0 8px;
  2684. }
  2685. .md .toolbar a.link {
  2686. justify-content: center;
  2687. padding: 0 16px;
  2688. min-width: 48px;
  2689. }
  2690. .md .toolbar a.link:before {
  2691. content: '';
  2692. width: 152%;
  2693. height: 152%;
  2694. position: absolute;
  2695. left: -26%;
  2696. top: -26%;
  2697. background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
  2698. background-repeat: no-repeat;
  2699. background-position: center;
  2700. background-size: 100% 100%;
  2701. opacity: 0;
  2702. pointer-events: none;
  2703. transition-duration: 600ms;
  2704. }
  2705. .md .toolbar a.link.active-state:before {
  2706. opacity: 1;
  2707. transition-duration: 150ms;
  2708. }
  2709. .md .toolbar a.icon-only {
  2710. min-width: 0;
  2711. flex-shrink: 0;
  2712. }
  2713. .md .tabbar a.tab-link,
  2714. .md .tabbar-labels a.tab-link,
  2715. .md .tabbar a.link,
  2716. .md .tabbar-labels a.link {
  2717. padding-left: 0;
  2718. padding-right: 0;
  2719. }
  2720. .md .tabbar a.icon-only,
  2721. .md .tabbar-labels a.icon-only {
  2722. flex-shrink: initial;
  2723. }
  2724. .md .tabbar a.tab-link,
  2725. .md .tabbar-labels a.tab-link {
  2726. transition-duration: 300ms;
  2727. overflow: hidden;
  2728. position: relative;
  2729. }
  2730. .md .tabbar .tab-link-highlight,
  2731. .md .tabbar-labels .tab-link-highlight {
  2732. position: absolute;
  2733. height: 2px;
  2734. background: var(--f7-tabbar-link-active-border-color, var(--f7-theme-color));
  2735. transition-duration: 300ms;
  2736. left: 0;
  2737. }
  2738. .md .tabbar-labels a.tab-link,
  2739. .md .tabbar-labels a.link {
  2740. padding-top: 7px;
  2741. padding-bottom: 7px;
  2742. }
  2743. .md .tabbar-label {
  2744. max-width: 100%;
  2745. overflow: hidden;
  2746. line-height: 1.2;
  2747. }
  2748. .md .tabbar-scrollable .toolbar-inner {
  2749. overflow: auto;
  2750. }
  2751. .md .tabbar-scrollable a.tab-link,
  2752. .md .tabbar-scrollable a.link {
  2753. padding: 0 16px;
  2754. }
  2755. .aurora .toolbar a.icon-only {
  2756. min-height: var(--f7-toolbar-height);
  2757. display: flex;
  2758. justify-content: center;
  2759. align-items: center;
  2760. margin: 0;
  2761. }
  2762. .aurora .tabbar .toolbar-inner,
  2763. .aurora .tabbar-labels .toolbar-inner {
  2764. padding-left: 0;
  2765. padding-right: 0;
  2766. }
  2767. .aurora .tabbar a.tab-link,
  2768. .aurora .tabbar-labels a.tab-link,
  2769. .aurora .tabbar a.link,
  2770. .aurora .tabbar-labels a.link {
  2771. transition-duration: 200ms;
  2772. }
  2773. .aurora .tabbar-labels a.tab-link,
  2774. .aurora .tabbar-labels a.link {
  2775. padding-top: 5px;
  2776. padding-bottom: 5px;
  2777. }
  2778. .aurora .tabbar-labels a.tab-link i + span,
  2779. .aurora .tabbar-labels a.link i + span {
  2780. margin: 0;
  2781. }
  2782. .aurora .tabbar-scrollable .toolbar-inner {
  2783. justify-content: flex-start;
  2784. }
  2785. .aurora .tabbar-scrollable a.tab-link,
  2786. .aurora .tabbar-scrollable a.link {
  2787. padding: 0 15px;
  2788. }
  2789. /* === Subnavbar === */
  2790. :root {
  2791. /*
  2792. --f7-subnavbar-bg-image: var(--f7-bars-bg-image);
  2793. --f7-subnavbar-bg-color: var(--f7-bars-bg-color);
  2794. --f7-subnavbar-border-color: var(--f7-bars-border-color);
  2795. --f7-subnavbar-link-color: var(--f7-bars-link-color);
  2796. --f7-subnavbar-text-color: var(--f7-bars-text-color);
  2797. */
  2798. --f7-subnavbar-title-line-height: 1.2;
  2799. }
  2800. .ios {
  2801. --f7-subnavbar-height: 44px;
  2802. --f7-subnavbar-inner-padding-left: 8px;
  2803. --f7-subnavbar-inner-padding-right: 8px;
  2804. --f7-subnavbar-title-font-size: 34px;
  2805. --f7-subnavbar-title-font-weight: 700;
  2806. --f7-subnavbar-title-letter-spacing: -0.03em;
  2807. --f7-subnavbar-title-margin-left: 7px;
  2808. --f7-subnavbar-shadow-image: none;
  2809. /*
  2810. --f7-subnavbar-link-height: var(--f7-subnavbar-height);
  2811. --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
  2812. */
  2813. }
  2814. .md {
  2815. --f7-subnavbar-height: 48px;
  2816. --f7-subnavbar-inner-padding-left: 16px;
  2817. --f7-subnavbar-inner-padding-right: 16px;
  2818. --f7-subnavbar-title-font-size: 20px;
  2819. --f7-subnavbar-title-font-weight: 500;
  2820. --f7-subnavbar-title-letter-spacing: 0;
  2821. --f7-subnavbar-title-margin-left: 0px;
  2822. --f7-subnavbar-shadow-image: var(--f7-bars-shadow-bottom-image);
  2823. /*
  2824. --f7-subnavbar-link-height: var(--f7-subnavbar-height);
  2825. --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
  2826. */
  2827. }
  2828. .aurora {
  2829. --f7-subnavbar-height: 38px;
  2830. --f7-subnavbar-inner-padding-left: 15px;
  2831. --f7-subnavbar-inner-padding-right: 15px;
  2832. --f7-subnavbar-title-font-size: 26px;
  2833. --f7-subnavbar-title-font-weight: bold;
  2834. --f7-subnavbar-title-letter-spacing: -0.03em;
  2835. --f7-subnavbar-title-margin-left: 0px;
  2836. --f7-subnavbar-shadow-image: none;
  2837. --f7-subnavbar-link-height: auto;
  2838. --f7-subnavbar-link-line-height: inherit;
  2839. }
  2840. .subnavbar {
  2841. width: 100%;
  2842. position: absolute;
  2843. left: 0;
  2844. top: 0;
  2845. z-index: 500;
  2846. box-sizing: border-box;
  2847. display: flex;
  2848. justify-content: space-between;
  2849. align-items: center;
  2850. background-image: var(--f7-subnavbar-bg-image, var(--f7-bars-bg-image));
  2851. background-color: var(--f7-subnavbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
  2852. color: var(--f7-subnavbar-text-color, var(--f7-bars-text-color));
  2853. }
  2854. .subnavbar .title {
  2855. position: relative;
  2856. overflow: hidden;
  2857. text-overflow: ellpsis;
  2858. white-space: nowrap;
  2859. font-size: var(--f7-subnavbar-title-font-size);
  2860. font-weight: var(--f7-subnavbar-title-font-weight);
  2861. text-align: left;
  2862. display: inline-block;
  2863. line-height: var(--f7-subnavbar-title-line-height);
  2864. letter-spacing: var(--f7-subnavbar-title-letter-spacing);
  2865. margin-left: var(--f7-subnavbar-title-margin-left);
  2866. }
  2867. .subnavbar .left,
  2868. .subnavbar .right {
  2869. flex-shrink: 0;
  2870. display: flex;
  2871. justify-content: flex-start;
  2872. align-items: center;
  2873. }
  2874. .subnavbar .right:first-child {
  2875. position: absolute;
  2876. height: 100%;
  2877. }
  2878. .subnavbar a {
  2879. color: var(--f7-subnavbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
  2880. }
  2881. .subnavbar a.link {
  2882. line-height: var(--f7-subnavbar-link-line-height, var(--f7-subnavbar-height));
  2883. height: var(--f7-subnavbar-link-height, var(--f7-subnavbar-height));
  2884. }
  2885. .subnavbar a.icon-only {
  2886. min-width: var(--f7-subnavbar-height);
  2887. }
  2888. .subnavbar.no-hairline:after,
  2889. .subnavbar.no-border:after {
  2890. display: none !important;
  2891. }
  2892. .subnavbar.no-shadow:before,
  2893. .subnavbar.navbar-hidden:before {
  2894. display: none !important;
  2895. }
  2896. .subnavbar:after,
  2897. .subnavbar:before {
  2898. -webkit-backface-visibility: hidden;
  2899. backface-visibility: hidden;
  2900. }
  2901. .subnavbar:after {
  2902. content: '';
  2903. position: absolute;
  2904. background-color: var(--f7-subnavbar-border-color, var(--f7-bars-border-color));
  2905. display: block;
  2906. z-index: 15;
  2907. top: auto;
  2908. right: auto;
  2909. bottom: 0;
  2910. left: 0;
  2911. height: 1px;
  2912. width: 100%;
  2913. transform-origin: 50% 100%;
  2914. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  2915. }
  2916. .subnavbar:before {
  2917. content: '';
  2918. position: absolute;
  2919. right: 0;
  2920. width: 100%;
  2921. top: 100%;
  2922. bottom: auto;
  2923. height: 8px;
  2924. pointer-events: none;
  2925. background: var(--f7-subnavbar-shadow-image);
  2926. }
  2927. .subnavbar-inner {
  2928. width: 100%;
  2929. height: 100%;
  2930. display: flex;
  2931. align-items: center;
  2932. box-sizing: border-box;
  2933. justify-content: space-between;
  2934. overflow: hidden;
  2935. 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));
  2936. }
  2937. .subnavbar-inner.stacked {
  2938. display: none;
  2939. }
  2940. .navbar .subnavbar {
  2941. top: 100%;
  2942. }
  2943. .views > .subnavbar,
  2944. .view > .subnavbar,
  2945. .page > .subnavbar {
  2946. position: absolute;
  2947. }
  2948. .navbar ~ * .subnavbar,
  2949. .page-with-subnavbar .navbar ~ .subnavbar,
  2950. .page-with-subnavbar .navbar ~ * .subnavbar,
  2951. .navbar ~ .page-with-subnavbar:not(.no-navbar) .subnavbar,
  2952. .navbar ~ .subnavbar {
  2953. top: var(--f7-navbar-height);
  2954. }
  2955. .navbar ~ .page-with-navbar-large:not(.no-navbar) .subnavbar,
  2956. .page-with-subnavbar.page-with-navbar-large .navbar ~ .subnavbar,
  2957. .page-with-subnavbar.page-with-navbar-large .navbar ~ * .subnavbar {
  2958. top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height));
  2959. transform: translate3d(0, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
  2960. }
  2961. .navbar .title-large ~ .subnavbar {
  2962. top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height));
  2963. transform: translate3d(0, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
  2964. }
  2965. .page-with-subnavbar,
  2966. .subnavbar ~ * {
  2967. --f7-page-subnavbar-offset: var(--f7-subnavbar-height);
  2968. }
  2969. .ios .subnavbar {
  2970. height: calc(var(--f7-subnavbar-height) + 1px);
  2971. margin-top: -1px;
  2972. padding-top: 1px;
  2973. }
  2974. .ios .subnavbar .title {
  2975. align-self: flex-start;
  2976. flex-shrink: 10;
  2977. }
  2978. .ios .subnavbar .left a + a,
  2979. .ios .subnavbar .right a + a {
  2980. margin-left: 15px;
  2981. }
  2982. .ios .subnavbar .left {
  2983. margin-right: 10px;
  2984. }
  2985. .ios .subnavbar .right {
  2986. margin-left: 10px;
  2987. }
  2988. .ios .subnavbar .right:first-child {
  2989. right: 8px;
  2990. }
  2991. .ios .subnavbar a.link {
  2992. justify-content: flex-start;
  2993. }
  2994. .ios .subnavbar a.icon-only {
  2995. justify-content: center;
  2996. margin: 0;
  2997. }
  2998. .md .subnavbar {
  2999. height: var(--f7-subnavbar-height);
  3000. }
  3001. .md .subnavbar .right {
  3002. margin-left: auto;
  3003. }
  3004. .md .subnavbar .right:first-child {
  3005. right: 16px;
  3006. }
  3007. .md .subnavbar a.link {
  3008. justify-content: center;
  3009. padding: 0 16px;
  3010. }
  3011. .md .subnavbar a.link:before {
  3012. content: '';
  3013. width: 152%;
  3014. height: 152%;
  3015. position: absolute;
  3016. left: -26%;
  3017. top: -26%;
  3018. background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
  3019. background-repeat: no-repeat;
  3020. background-position: center;
  3021. background-size: 100% 100%;
  3022. opacity: 0;
  3023. pointer-events: none;
  3024. transition-duration: 600ms;
  3025. }
  3026. .md .subnavbar a.link.active-state:before {
  3027. opacity: 1;
  3028. transition-duration: 150ms;
  3029. }
  3030. .md .subnavbar a.icon-only {
  3031. flex-shrink: 0;
  3032. }
  3033. .md .subnavbar-inner > a.link:first-child {
  3034. margin-left: calc(-1 * var(--f7-subnavbar-inner-padding-left));
  3035. }
  3036. .md .subnavbar-inner > a.link:last-child {
  3037. margin-right: calc(-1 * var(--f7-subnavbar-inner-padding-right));
  3038. }
  3039. .aurora .subnavbar {
  3040. height: calc(var(--f7-subnavbar-height) + 1px);
  3041. margin-top: -1px;
  3042. padding-top: 1px;
  3043. }
  3044. .aurora .subnavbar .title {
  3045. align-self: flex-start;
  3046. flex-shrink: 10;
  3047. }
  3048. .aurora .subnavbar .left a + a,
  3049. .aurora .subnavbar .right a + a {
  3050. margin-left: 10px;
  3051. }
  3052. .aurora .subnavbar .left {
  3053. margin-right: 10px;
  3054. }
  3055. .aurora .subnavbar .right {
  3056. margin-left: 10px;
  3057. }
  3058. .aurora .subnavbar .right:first-child {
  3059. right: 15px;
  3060. }
  3061. .aurora .subnavbar a.link {
  3062. justify-content: flex-start;
  3063. }
  3064. .aurora .subnavbar a.icon-only {
  3065. justify-content: center;
  3066. margin: 0;
  3067. }
  3068. /* === Content Block === */
  3069. :root {
  3070. --f7-block-font-size: inherit;
  3071. --f7-block-strong-bg-color: #fff;
  3072. --f7-block-title-font-size: inherit;
  3073. --f7-block-header-margin: 10px;
  3074. --f7-block-footer-margin: 10px;
  3075. --f7-block-header-font-size: 14px;
  3076. --f7-block-footer-font-size: 14px;
  3077. --f7-block-title-white-space: nowrap;
  3078. --f7-block-title-medium-text-color: #000;
  3079. --f7-block-title-medium-text-transform: none;
  3080. --f7-block-title-large-text-color: #000;
  3081. --f7-block-title-large-text-transform: none;
  3082. }
  3083. :root .theme-dark,
  3084. :root.theme-dark {
  3085. --f7-block-strong-border-color: #282829;
  3086. --f7-block-title-medium-text-color: #fff;
  3087. --f7-block-title-large-text-color: #fff;
  3088. --f7-block-strong-bg-color: #1c1c1d;
  3089. }
  3090. .ios {
  3091. --f7-block-text-color: #6d6d72;
  3092. --f7-block-padding-horizontal: 15px;
  3093. --f7-block-padding-vertical: 15px;
  3094. --f7-block-margin-vertical: 35px;
  3095. --f7-block-strong-text-color: #000;
  3096. --f7-block-strong-border-color: #c8c7cc;
  3097. --f7-block-title-text-transform: uppercase;
  3098. --f7-block-title-text-color: #6d6d72;
  3099. --f7-block-title-font-weight: 400;
  3100. --f7-block-title-line-height: 17px;
  3101. --f7-block-title-margin-bottom: 10px;
  3102. --f7-block-title-medium-font-size: 22px;
  3103. --f7-block-title-medium-font-weight: bold;
  3104. --f7-block-title-medium-line-height: 1.4;
  3105. --f7-block-title-large-font-size: 29px;
  3106. --f7-block-title-large-font-weight: bold;
  3107. --f7-block-title-large-line-height: 1.3;
  3108. --f7-block-inset-side-margin: 15px;
  3109. --f7-block-inset-border-radius: 7px;
  3110. --f7-block-header-text-color: #8f8f94;
  3111. --f7-block-footer-text-color: #8f8f94;
  3112. }
  3113. .ios .theme-dark,
  3114. .ios.theme-dark {
  3115. --f7-block-title-text-color: #8E8E93;
  3116. --f7-block-header-text-color: #8E8E93;
  3117. --f7-block-footer-text-color: #8E8E93;
  3118. --f7-block-strong-text-color: #fff;
  3119. }
  3120. .md {
  3121. --f7-block-text-color: inherit;
  3122. --f7-block-padding-horizontal: 16px;
  3123. --f7-block-padding-vertical: 16px;
  3124. --f7-block-margin-vertical: 32px;
  3125. --f7-block-strong-text-color: inherit;
  3126. --f7-block-strong-border-color: rgba(0, 0, 0, 0.12);
  3127. --f7-block-title-text-transform: none;
  3128. --f7-block-title-text-color: rgba(0, 0, 0, 0.54);
  3129. --f7-block-title-font-weight: 500;
  3130. --f7-block-title-line-height: 16px;
  3131. --f7-block-title-margin-bottom: 16px;
  3132. --f7-block-title-medium-font-size: 24px;
  3133. --f7-block-title-medium-font-weight: 500;
  3134. --f7-block-title-medium-line-height: 1.3;
  3135. --f7-block-title-large-font-size: 34px;
  3136. --f7-block-title-large-font-weight: 500;
  3137. --f7-block-title-large-line-height: 1.2;
  3138. --f7-block-inset-side-margin: 16px;
  3139. --f7-block-inset-border-radius: 4px;
  3140. --f7-block-header-text-color: rgba(0, 0, 0, 0.54);
  3141. --f7-block-footer-text-color: rgba(0, 0, 0, 0.54);
  3142. }
  3143. .md .theme-dark,
  3144. .md.theme-dark {
  3145. --f7-block-title-text-color: #fff;
  3146. --f7-block-header-text-color: rgba(255, 255, 255, 0.54);
  3147. --f7-block-footer-text-color: rgba(255, 255, 255, 0.54);
  3148. }
  3149. .aurora {
  3150. --f7-block-text-color: inherit;
  3151. --f7-block-padding-horizontal: 15px;
  3152. --f7-block-padding-vertical: 15px;
  3153. --f7-block-margin-vertical: 15px;
  3154. --f7-block-strong-text-color: inherit;
  3155. --f7-block-strong-border-color: rgba(0, 0, 0, 0.12);
  3156. --f7-block-title-text-transform: none;
  3157. --f7-block-title-text-color: rgba(0, 0, 0, 0.7);
  3158. --f7-block-title-font-weight: 600;
  3159. --f7-block-title-line-height: 1.5;
  3160. --f7-block-title-margin-bottom: 5px;
  3161. --f7-block-title-medium-font-size: 20px;
  3162. --f7-block-title-medium-font-weight: 600;
  3163. --f7-block-title-medium-line-height: 1.4;
  3164. --f7-block-title-large-font-size: 28px;
  3165. --f7-block-title-large-font-weight: bold;
  3166. --f7-block-title-large-line-height: 1.3;
  3167. --f7-block-inset-side-margin: 15px;
  3168. --f7-block-inset-border-radius: 4px;
  3169. --f7-block-header-text-color: rgba(0, 0, 0, 0.6);
  3170. --f7-block-footer-text-color: rgba(0, 0, 0, 0.6);
  3171. }
  3172. .aurora .theme-dark,
  3173. .aurora.theme-dark {
  3174. --f7-block-title-text-color: #fff;
  3175. --f7-block-header-text-color: rgba(255, 255, 255, 0.52);
  3176. --f7-block-footer-text-color: rgba(255, 255, 255, 0.52);
  3177. --f7-block-strong-text-color: #fff;
  3178. }
  3179. .block {
  3180. box-sizing: border-box;
  3181. position: relative;
  3182. z-index: 1;
  3183. color: var(--f7-block-text-color);
  3184. margin: var(--f7-block-margin-vertical) 0;
  3185. padding-top: 0;
  3186. padding-bottom: 0;
  3187. padding-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
  3188. padding-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
  3189. font-size: var(--f7-block-font-size);
  3190. }
  3191. .block.no-hairlines:before,
  3192. .block.no-hairlines ul:before,
  3193. .md .block.no-hairlines-md:before,
  3194. .md .block.no-hairlines-md ul:before,
  3195. .ios .block.no-hairlines-ios:before,
  3196. .ios .block.no-hairlines-ios ul:before,
  3197. .aurora .block.no-hairlines-aurora:before,
  3198. .aurora .block.no-hairlines-aurora ul:before {
  3199. display: none !important;
  3200. }
  3201. .block.no-hairlines:after,
  3202. .block.no-hairlines ul:after,
  3203. .md .block.no-hairlines-md:after,
  3204. .md .block.no-hairlines-md ul:after,
  3205. .ios .block.no-hairlines-ios:after,
  3206. .ios .block.no-hairlines-ios ul:after,
  3207. .aurora .block.no-hairlines-aurora:after,
  3208. .aurora .block.no-hairlines-aurora ul:after {
  3209. display: none !important;
  3210. }
  3211. .block.no-hairline-top:before,
  3212. .block.no-hairline-top ul:before,
  3213. .md .block.no-hairline-top-md:before,
  3214. .md .block.no-hairline-top-md ul:before,
  3215. .ios .block.no-hairline-top-ios:before,
  3216. .ios .block.no-hairline-top-ios ul:before,
  3217. .aurora .block.no-hairline-top-aurora:before,
  3218. .aurora .block.no-hairline-top-aurora ul:before {
  3219. display: none !important;
  3220. }
  3221. .block.no-hairline-bottom:after,
  3222. .block.no-hairline-bottom ul:after,
  3223. .md .block.no-hairline-bottom-md:after,
  3224. .md .block.no-hairline-bottom-md ul:after,
  3225. .ios .block.no-hairline-bottom-ios:after,
  3226. .ios .block.no-hairline-bottom-ios ul:after,
  3227. .aurora .block.no-hairline-bottom-aurora:after,
  3228. .aurora .block.no-hairline-bottom-aurora ul:after {
  3229. display: none !important;
  3230. }
  3231. .block > h1:first-child,
  3232. .block > h2:first-child,
  3233. .block > h3:first-child,
  3234. .block > h4:first-child,
  3235. .block > p:first-child {
  3236. margin-top: 0;
  3237. }
  3238. .block > h1:last-child,
  3239. .block > h2:last-child,
  3240. .block > h3:last-child,
  3241. .block > h4:last-child,
  3242. .block > p:last-child {
  3243. margin-bottom: 0;
  3244. }
  3245. .block-strong {
  3246. color: var(--f7-block-strong-text-color);
  3247. padding-top: var(--f7-block-padding-vertical);
  3248. padding-bottom: var(--f7-block-padding-vertical);
  3249. background-color: var(--f7-block-strong-bg-color);
  3250. }
  3251. .block-strong:before {
  3252. content: '';
  3253. position: absolute;
  3254. background-color: var(--f7-block-strong-border-color);
  3255. display: block;
  3256. z-index: 15;
  3257. top: 0;
  3258. right: auto;
  3259. bottom: auto;
  3260. left: 0;
  3261. height: 1px;
  3262. width: 100%;
  3263. transform-origin: 50% 0%;
  3264. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  3265. }
  3266. .block-strong:after {
  3267. content: '';
  3268. position: absolute;
  3269. background-color: var(--f7-block-strong-border-color);
  3270. display: block;
  3271. z-index: 15;
  3272. top: auto;
  3273. right: auto;
  3274. bottom: 0;
  3275. left: 0;
  3276. height: 1px;
  3277. width: 100%;
  3278. transform-origin: 50% 100%;
  3279. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  3280. }
  3281. .block-title {
  3282. position: relative;
  3283. overflow: hidden;
  3284. margin: 0;
  3285. white-space: var(--f7-block-title-white-space);
  3286. text-overflow: ellipsis;
  3287. text-transform: var(--f7-block-title-text-transform);
  3288. color: var(--f7-block-title-text-color);
  3289. font-size: var(--f7-block-title-font-size, inherit);
  3290. font-weight: var(--f7-block-title-font-weight);
  3291. line-height: var(--f7-block-title-line-height);
  3292. margin-top: var(--f7-block-margin-vertical);
  3293. margin-bottom: var(--f7-block-title-margin-bottom);
  3294. margin-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
  3295. margin-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
  3296. }
  3297. .block-title + .list,
  3298. .block-title + .block,
  3299. .block-title + .card,
  3300. .block-title + .timeline,
  3301. .block-title + .block-header {
  3302. margin-top: 0px;
  3303. }
  3304. .block-title-medium {
  3305. font-size: var(--f7-block-title-medium-font-size);
  3306. text-transform: var(--f7-block-title-medium-text-transform);
  3307. color: var(--f7-block-title-medium-text-color);
  3308. font-weight: var(--f7-block-title-medium-font-weight);
  3309. line-height: var(--f7-block-title-medium-line-height);
  3310. }
  3311. .block-title-large {
  3312. font-size: var(--f7-block-title-large-font-size);
  3313. text-transform: var(--f7-block-title-large-text-transform);
  3314. color: var(--f7-block-title-large-text-color);
  3315. font-weight: var(--f7-block-title-large-font-weight);
  3316. line-height: var(--f7-block-title-large-line-height);
  3317. }
  3318. .block > .block-title:first-child,
  3319. .list > .block-title:first-child {
  3320. margin-top: 0;
  3321. margin-left: 0;
  3322. margin-right: 0;
  3323. }
  3324. .block-header {
  3325. color: var(--f7-block-header-text-color);
  3326. font-size: var(--f7-block-header-font-size);
  3327. margin-bottom: var(--f7-block-header-margin);
  3328. margin-top: var(--f7-block-margin-vertical);
  3329. }
  3330. .block-header + .list,
  3331. .block-header + .block,
  3332. .block-header + .card,
  3333. .block-header + .timeline {
  3334. margin-top: var(--f7-block-header-margin);
  3335. }
  3336. .block-footer {
  3337. color: var(--f7-block-footer-text-color);
  3338. font-size: var(--f7-block-footer-font-size);
  3339. margin-top: var(--f7-block-footer-margin);
  3340. margin-bottom: var(--f7-block-margin-vertical);
  3341. }
  3342. .block-footer,
  3343. .block-header {
  3344. padding-top: 0;
  3345. padding-bottom: 0;
  3346. padding-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
  3347. padding-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
  3348. }
  3349. .block-footer ul:first-child,
  3350. .block-header ul:first-child,
  3351. .block-footer p:first-child,
  3352. .block-header p:first-child,
  3353. .block-footer h1:first-child,
  3354. .block-header h1:first-child,
  3355. .block-footer h2:first-child,
  3356. .block-header h2:first-child,
  3357. .block-footer h3:first-child,
  3358. .block-header h3:first-child,
  3359. .block-footer h4:first-child,
  3360. .block-header h4:first-child {
  3361. margin-top: 0;
  3362. }
  3363. .block-footer ul:last-child,
  3364. .block-header ul:last-child,
  3365. .block-footer p:last-child,
  3366. .block-header p:last-child,
  3367. .block-footer h1:last-child,
  3368. .block-header h1:last-child,
  3369. .block-footer h2:last-child,
  3370. .block-header h2:last-child,
  3371. .block-footer h3:last-child,
  3372. .block-header h3:last-child,
  3373. .block-footer h4:last-child,
  3374. .block-header h4:last-child {
  3375. margin-bottom: 0;
  3376. }
  3377. .block-footer ul:first-child:last-child,
  3378. .block-header ul:first-child:last-child,
  3379. .block-footer p:first-child:last-child,
  3380. .block-header p:first-child:last-child,
  3381. .block-footer h1:first-child:last-child,
  3382. .block-header h1:first-child:last-child,
  3383. .block-footer h2:first-child:last-child,
  3384. .block-header h2:first-child:last-child,
  3385. .block-footer h3:first-child:last-child,
  3386. .block-header h3:first-child:last-child,
  3387. .block-footer h4:first-child:last-child,
  3388. .block-header h4:first-child:last-child {
  3389. margin-top: 0;
  3390. margin-bottom: 0;
  3391. }
  3392. .list .block-header,
  3393. .block .block-header,
  3394. .card .block-header,
  3395. .timeline .block-header {
  3396. margin-top: 0;
  3397. }
  3398. .list .block-footer,
  3399. .block .block-footer,
  3400. .card .block-footer,
  3401. .timeline .block-footer {
  3402. margin-bottom: 0;
  3403. }
  3404. .list + .block-footer,
  3405. .block + .block-footer,
  3406. .card + .block-footer,
  3407. .timeline + .block-footer {
  3408. margin-top: calc(-1 * (var(--f7-block-margin-vertical) - var(--f7-block-footer-margin)));
  3409. }
  3410. .block + .block-footer {
  3411. margin-top: calc(-1 * (var(--f7-block-margin-vertical) - var(--f7-block-footer-margin)));
  3412. margin-bottom: var(--f7-block-margin-vertical);
  3413. }
  3414. .block .block-header,
  3415. .block .block-footer {
  3416. padding: 0;
  3417. }
  3418. .block.inset {
  3419. border-radius: var(--f7-block-inset-border-radius);
  3420. margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
  3421. margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
  3422. --f7-safe-area-left: 0px;
  3423. --f7-safe-area-right: 0px;
  3424. }
  3425. .block-strong.inset:before {
  3426. display: none !important;
  3427. }
  3428. .block-strong.inset:after {
  3429. display: none !important;
  3430. }
  3431. @media (min-width: 768px) {
  3432. .block.tablet-inset {
  3433. border-radius: var(--f7-block-inset-border-radius);
  3434. margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
  3435. margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
  3436. --f7-safe-area-left: 0px;
  3437. --f7-safe-area-right: 0px;
  3438. }
  3439. .block-strong.tablet-inset:before {
  3440. display: none !important;
  3441. }
  3442. .block-strong.tablet-inset:after {
  3443. display: none !important;
  3444. }
  3445. }
  3446. /* === List View === */
  3447. :root {
  3448. --f7-list-bg-color: #fff;
  3449. --f7-list-item-text-max-lines: 2;
  3450. --f7-list-chevron-icon-color: #c7c7cc;
  3451. --f7-list-chevron-icon-font-size: 20px;
  3452. --f7-list-item-title-font-size: inherit;
  3453. --f7-list-item-title-font-weight: 400;
  3454. --f7-list-item-title-text-color: inherit;
  3455. --f7-list-item-title-line-height: inherit;
  3456. --f7-list-item-title-white-space: nowrap;
  3457. --f7-list-item-subtitle-font-weight: 400;
  3458. --f7-list-item-subtitle-text-color: inherit;
  3459. --f7-list-item-subtitle-line-height: inherit;
  3460. --f7-list-item-text-font-weight: 400;
  3461. --f7-list-item-after-font-weight: 400;
  3462. --f7-list-item-header-text-color: inherit;
  3463. --f7-list-item-header-font-size: 12px;
  3464. --f7-list-item-header-font-weight: 400;
  3465. --f7-list-item-header-line-height: 1.2;
  3466. --f7-list-item-footer-font-size: 12px;
  3467. --f7-list-item-footer-font-weight: 400;
  3468. --f7-list-item-footer-line-height: 1.2;
  3469. --f7-list-button-font-size: inherit;
  3470. --f7-list-button-font-weight: 400;
  3471. --f7-list-item-divider-line-height: inherit;
  3472. --f7-list-group-title-line-height: inherit;
  3473. }
  3474. :root .theme-dark,
  3475. :root.theme-dark {
  3476. --f7-list-bg-color: #1c1c1d;
  3477. --f7-list-border-color: #282829;
  3478. --f7-list-item-border-color: #282829;
  3479. --f7-list-item-divider-border-color: #282829;
  3480. --f7-list-item-divider-bg-color: #232323;
  3481. --f7-list-group-title-bg-color: #232323;
  3482. --f7-list-chevron-icon-color: #434345;
  3483. }
  3484. .ios {
  3485. --f7-list-in-list-padding-left: 30px;
  3486. --f7-list-inset-side-margin: 15px;
  3487. --f7-list-inset-border-radius: 7px;
  3488. --f7-list-margin-vertical: 35px;
  3489. --f7-list-font-size: 17px;
  3490. --f7-list-chevron-icon-area: 20px;
  3491. --f7-list-border-color: #c8c7cc;
  3492. --f7-list-item-border-color: #c8c7cc;
  3493. --f7-list-link-pressed-bg-color: #d9d9d9;
  3494. --f7-list-item-subtitle-font-size: 15px;
  3495. --f7-list-item-text-font-size: 15px;
  3496. --f7-list-item-text-text-color: #8e8e93;
  3497. --f7-list-item-text-line-height: 21px;
  3498. --f7-list-item-after-font-size: inherit;
  3499. --f7-list-item-after-text-color: #8e8e93;
  3500. --f7-list-item-after-line-height: inherit;
  3501. --f7-list-item-after-padding: 5px;
  3502. --f7-list-item-footer-text-color: #8e8e93;
  3503. --f7-list-item-min-height: 44px;
  3504. --f7-list-item-media-margin: 15px;
  3505. --f7-list-item-media-icons-margin: 5px;
  3506. --f7-list-item-cell-margin: 15px;
  3507. --f7-list-item-padding-vertical: 8px;
  3508. --f7-list-item-padding-horizontal: 15px;
  3509. --f7-list-media-item-padding-vertical: 10px;
  3510. --f7-list-media-item-padding-horizontal: 15px;
  3511. --f7-list-media-item-title-font-weight: 600;
  3512. /*
  3513. --f7-list-button-text-color: var(--f7-theme-color);
  3514. */
  3515. --f7-list-button-text-align: center;
  3516. --f7-list-button-border-color: #c8c7cc;
  3517. --f7-list-button-pressed-bg-color: #d9d9d9;
  3518. --f7-list-item-divider-height: 31px;
  3519. --f7-list-item-divider-text-color: #8e8e93;
  3520. --f7-list-item-divider-font-size: inherit;
  3521. --f7-list-item-divider-font-weight: 400;
  3522. --f7-list-item-divider-bg-color: #f7f7f7;
  3523. --f7-list-item-divider-border-color: #c8c7cc;
  3524. --f7-list-group-title-height: 31px;
  3525. --f7-list-group-title-text-color: #8e8e93;
  3526. --f7-list-group-title-font-size: inherit;
  3527. --f7-list-group-title-font-weight: 400;
  3528. --f7-list-group-title-bg-color: #f7f7f7;
  3529. }
  3530. .ios .theme-dark,
  3531. .ios.theme-dark {
  3532. --f7-list-button-border-color: #282829;
  3533. --f7-list-link-pressed-bg-color: #363636;
  3534. --f7-list-button-pressed-bg-color: #363636;
  3535. }
  3536. .md {
  3537. --f7-list-in-list-padding-left: 40px;
  3538. --f7-list-inset-side-margin: 16px;
  3539. --f7-list-inset-border-radius: 4px;
  3540. --f7-list-margin-vertical: 32px;
  3541. --f7-list-font-size: 16px;
  3542. --f7-list-chevron-icon-area: 26px;
  3543. --f7-list-border-color: rgba(0, 0, 0, 0.12);
  3544. --f7-list-item-border-color: rgba(0, 0, 0, 0.12);
  3545. --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1);
  3546. --f7-list-item-subtitle-font-size: 14px;
  3547. --f7-list-item-text-font-size: 14px;
  3548. --f7-list-item-text-text-color: #757575;
  3549. --f7-list-item-text-line-height: 20px;
  3550. --f7-list-item-after-font-size: 14px;
  3551. --f7-list-item-after-text-color: #757575;
  3552. --f7-list-item-after-line-height: inherit;
  3553. --f7-list-item-after-padding: 8px;
  3554. --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.5);
  3555. --f7-list-item-min-height: 48px;
  3556. --f7-list-item-media-margin: 16px;
  3557. --f7-list-item-media-icons-margin: 8px;
  3558. --f7-list-item-cell-margin: 16px;
  3559. --f7-list-item-padding-vertical: 8px;
  3560. --f7-list-item-padding-horizontal: 16px;
  3561. --f7-list-media-item-padding-vertical: 14px;
  3562. --f7-list-media-item-padding-horizontal: 16px;
  3563. /*
  3564. --f7-list-media-item-title-font-weight: var(--f7-list-item-title-font-weight);
  3565. */
  3566. --f7-list-button-text-color: #212121;
  3567. --f7-list-button-text-align: left;
  3568. --f7-list-button-border-color: transparent;
  3569. --f7-list-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
  3570. --f7-list-item-divider-height: 48px;
  3571. --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.54);
  3572. --f7-list-item-divider-font-size: 14px;
  3573. --f7-list-item-divider-font-weight: 400;
  3574. --f7-list-item-divider-bg-color: #f4f4f4;
  3575. --f7-list-item-divider-border-color: transparent;
  3576. --f7-list-group-title-height: 48px;
  3577. --f7-list-group-title-text-color: rgba(0, 0, 0, 0.54);
  3578. --f7-list-group-title-font-size: 14px;
  3579. --f7-list-group-title-font-weight: 400;
  3580. --f7-list-group-title-bg-color: #f4f4f4;
  3581. }
  3582. .md .theme-dark,
  3583. .md.theme-dark {
  3584. --f7-list-button-text-color: #fff;
  3585. --f7-list-item-divider-text-color: #fff;
  3586. --f7-list-group-title-text-color: #fff;
  3587. --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
  3588. --f7-list-button-pressed-bg-color: rgba(255, 255, 255, 0.05);
  3589. --f7-list-item-text-text-color: rgba(255, 255, 255, 0.54);
  3590. --f7-list-item-after-text-color: rgba(255, 255, 255, 0.54);
  3591. --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.54);
  3592. }
  3593. .aurora {
  3594. --f7-list-in-list-padding-left: 15px;
  3595. --f7-list-inset-side-margin: 15px;
  3596. --f7-list-inset-border-radius: 4px;
  3597. --f7-list-margin-vertical: 15px;
  3598. --f7-list-font-size: 14px;
  3599. --f7-list-chevron-icon-area: 15px;
  3600. --f7-list-chevron-icon-font-size: 16px;
  3601. --f7-list-border-color: rgba(0, 0, 0, 0.12);
  3602. --f7-list-item-border-color: rgba(0, 0, 0, 0.12);
  3603. --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1);
  3604. --f7-list-link-hover-bg-color: rgba(0, 0, 0, 0.03);
  3605. --f7-list-item-title-line-height: 1.3;
  3606. --f7-list-item-subtitle-font-size: 14px;
  3607. --f7-list-item-subtitle-line-height: 1.3;
  3608. --f7-list-item-text-font-size: 12px;
  3609. --f7-list-item-text-text-color: rgba(0, 0, 0, 0.6);
  3610. --f7-list-item-text-line-height: 16px;
  3611. --f7-list-item-after-font-size: 13px;
  3612. --f7-list-item-after-text-color: rgba(0, 0, 0, 0.5);
  3613. --f7-list-item-after-line-height: 1.2;
  3614. --f7-list-item-after-padding: 5px;
  3615. --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.6);
  3616. --f7-list-item-min-height: 32px;
  3617. --f7-list-item-media-margin: 10px;
  3618. --f7-list-item-media-icons-margin: 5px;
  3619. --f7-list-item-cell-margin: 15px;
  3620. --f7-list-item-padding-vertical: 5px;
  3621. --f7-list-item-padding-horizontal: 15px;
  3622. --f7-list-media-item-padding-vertical: 5px;
  3623. --f7-list-media-item-padding-horizontal: 15px;
  3624. --f7-list-media-item-title-font-weight: 600;
  3625. /*
  3626. --f7-list-button-text-color: var(--f7-theme-color);
  3627. */
  3628. --f7-list-button-text-align: center;
  3629. --f7-list-button-border-color: rgba(0, 0, 0, 0.12);
  3630. --f7-list-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
  3631. --f7-list-button-hover-bg-color: rgba(0, 0, 0, 0.03);
  3632. --f7-list-item-divider-height: 19px;
  3633. --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.6);
  3634. --f7-list-item-divider-font-size: inherit;
  3635. --f7-list-item-divider-font-weight: 500;
  3636. --f7-list-item-divider-bg-color: #f7f7f7;
  3637. --f7-list-item-divider-border-color: transparent;
  3638. --f7-list-group-title-height: 19px;
  3639. --f7-list-group-title-text-color: rgba(0, 0, 0, 0.6);
  3640. --f7-list-group-title-font-size: inherit;
  3641. --f7-list-group-title-font-weight: 500;
  3642. --f7-list-group-title-bg-color: #f7f7f7;
  3643. }
  3644. .aurora .theme-dark,
  3645. .aurora.theme-dark {
  3646. --f7-list-button-border-color: #282829;
  3647. --f7-list-item-text-text-color: rgba(255, 255, 255, 0.52);
  3648. --f7-list-item-after-text-color: rgba(255, 255, 255, 0.52);
  3649. --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.52);
  3650. --f7-list-item-divider-text-color: rgba(255, 255, 255, 0.6);
  3651. --f7-list-group-title-text-color: rgba(255, 255, 255, 0.6);
  3652. --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
  3653. --f7-list-link-hover-bg-color: rgba(255, 255, 255, 0.03);
  3654. --f7-list-button-pressed-bg-color: rgba(255, 255, 255, 0.05);
  3655. --f7-list-button-hover-bg-color: rgba(255, 255, 255, 0.03);
  3656. }
  3657. .list {
  3658. position: relative;
  3659. z-index: 1;
  3660. font-size: var(--f7-list-font-size);
  3661. margin: var(--f7-list-margin-vertical) 0;
  3662. }
  3663. .list ul {
  3664. list-style: none;
  3665. margin: 0;
  3666. padding: 0;
  3667. position: relative;
  3668. background: var(--f7-list-bg-color);
  3669. }
  3670. .list ul:before {
  3671. content: '';
  3672. position: absolute;
  3673. background-color: var(--f7-list-border-color);
  3674. display: block;
  3675. z-index: 15;
  3676. top: 0;
  3677. right: auto;
  3678. bottom: auto;
  3679. left: 0;
  3680. height: 1px;
  3681. width: 100%;
  3682. transform-origin: 50% 0%;
  3683. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  3684. }
  3685. .list ul:after {
  3686. content: '';
  3687. position: absolute;
  3688. background-color: var(--f7-list-border-color);
  3689. display: block;
  3690. z-index: 15;
  3691. top: auto;
  3692. right: auto;
  3693. bottom: 0;
  3694. left: 0;
  3695. height: 1px;
  3696. width: 100%;
  3697. transform-origin: 50% 100%;
  3698. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  3699. }
  3700. .list ul ul {
  3701. padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-list-in-list-padding-left));
  3702. }
  3703. .list ul ul:before {
  3704. display: none !important;
  3705. }
  3706. .list ul ul:after {
  3707. display: none !important;
  3708. }
  3709. .list li {
  3710. position: relative;
  3711. box-sizing: border-box;
  3712. }
  3713. .list .item-media {
  3714. display: flex;
  3715. flex-shrink: 0;
  3716. flex-wrap: nowrap;
  3717. align-items: center;
  3718. box-sizing: border-box;
  3719. padding-bottom: var(--f7-list-item-padding-vertical);
  3720. padding-top: var(--f7-list-item-padding-vertical);
  3721. }
  3722. .list .item-media + .item-inner {
  3723. margin-left: var(--f7-list-item-media-margin);
  3724. }
  3725. .list .item-media i + i,
  3726. .list .item-media i + img {
  3727. margin-left: var(--f7-list-item-media-icons-margin);
  3728. }
  3729. .list .item-after {
  3730. padding-left: var(--f7-list-item-after-padding);
  3731. }
  3732. .list .item-inner {
  3733. position: relative;
  3734. width: 100%;
  3735. min-width: 0;
  3736. display: flex;
  3737. justify-content: space-between;
  3738. box-sizing: border-box;
  3739. align-items: center;
  3740. align-self: stretch;
  3741. padding-top: var(--f7-list-item-padding-vertical);
  3742. padding-bottom: var(--f7-list-item-padding-vertical);
  3743. min-height: var(--f7-list-item-min-height);
  3744. padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
  3745. }
  3746. .list .item-title {
  3747. min-width: 0;
  3748. flex-shrink: 1;
  3749. white-space: var(--f7-list-item-title-white-space);
  3750. position: relative;
  3751. overflow: hidden;
  3752. text-overflow: ellipsis;
  3753. max-width: 100%;
  3754. font-size: var(--f7-list-item-title-font-size);
  3755. font-weight: var(--f7-list-item-title-font-weight);
  3756. color: var(--f7-list-item-title-text-color);
  3757. line-height: var(--f7-list-item-title-line-height);
  3758. }
  3759. .list .item-after {
  3760. white-space: nowrap;
  3761. flex-shrink: 0;
  3762. display: flex;
  3763. font-size: var(--f7-list-item-after-font-size);
  3764. font-weight: var(--f7-list-item-after-font-weight);
  3765. color: var(--f7-list-item-after-text-color);
  3766. line-height: var(--f7-list-item-after-line-height);
  3767. margin-left: auto;
  3768. }
  3769. .list .item-header,
  3770. .list .item-footer {
  3771. white-space: normal;
  3772. }
  3773. .list .item-header {
  3774. color: var(--f7-list-item-header-text-color);
  3775. font-size: var(--f7-list-item-header-font-size);
  3776. font-weight: var(--f7-list-item-header-font-weight);
  3777. line-height: var(--f7-list-item-header-line-height);
  3778. }
  3779. .list .item-footer {
  3780. color: var(--f7-list-item-footer-text-color);
  3781. font-size: var(--f7-list-item-footer-font-size);
  3782. font-weight: var(--f7-list-item-footer-font-weight);
  3783. line-height: var(--f7-list-item-footer-line-height);
  3784. }
  3785. .list .item-link,
  3786. .list .list-button {
  3787. transition-duration: 300ms;
  3788. transition-property: background-color;
  3789. display: block;
  3790. position: relative;
  3791. overflow: hidden;
  3792. z-index: 0;
  3793. }
  3794. .list .item-link {
  3795. color: inherit;
  3796. }
  3797. .list .item-link.active-state {
  3798. background-color: var(--f7-list-link-pressed-bg-color);
  3799. }
  3800. .list .item-link .item-inner {
  3801. padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
  3802. }
  3803. .list .item-content {
  3804. display: flex;
  3805. justify-content: space-between;
  3806. box-sizing: border-box;
  3807. align-items: center;
  3808. min-height: var(--f7-list-item-min-height);
  3809. padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
  3810. }
  3811. .list .item-subtitle {
  3812. position: relative;
  3813. overflow: hidden;
  3814. white-space: nowrap;
  3815. max-width: 100%;
  3816. text-overflow: ellipsis;
  3817. font-size: var(--f7-list-item-subtitle-font-size);
  3818. font-weight: var(--f7-list-item-subtitle-font-weight);
  3819. color: var(--f7-list-item-subtitle-text-color);
  3820. line-height: var(--f7-list-item-subtitle-line-height);
  3821. }
  3822. .list .item-text {
  3823. position: relative;
  3824. overflow: hidden;
  3825. text-overflow: hidden;
  3826. -webkit-line-clamp: var(--f7-list-item-text-max-lines);
  3827. display: -webkit-box;
  3828. font-size: var(--f7-list-item-text-font-size);
  3829. font-weight: var(--f7-list-item-text-font-weight);
  3830. color: var(--f7-list-item-text-text-color);
  3831. line-height: var(--f7-list-item-text-line-height);
  3832. max-height: calc(var(--f7-list-item-text-line-height) * var(--f7-list-item-text-max-lines));
  3833. }
  3834. .list .item-title-row {
  3835. position: relative;
  3836. display: flex;
  3837. justify-content: space-between;
  3838. box-sizing: border-box;
  3839. }
  3840. .list .item-title-row .item-after {
  3841. align-self: center;
  3842. }
  3843. .list .item-row {
  3844. display: flex;
  3845. justify-content: space-between;
  3846. box-sizing: border-box;
  3847. }
  3848. .list .item-cell {
  3849. display: block;
  3850. align-self: center;
  3851. box-sizing: border-box;
  3852. width: 100%;
  3853. min-width: 0;
  3854. margin-left: var(--f7-list-item-cell-margin);
  3855. flex-shrink: 1;
  3856. }
  3857. .list .item-cell:first-child {
  3858. margin-left: 0;
  3859. }
  3860. .list .ripple-wave + .item-cell {
  3861. margin-left: 0;
  3862. }
  3863. .list li:last-child .list-button:after {
  3864. display: none !important;
  3865. }
  3866. .list li:last-child > .item-inner:after,
  3867. .list li:last-child li:last-child > .item-inner:after,
  3868. .list li:last-child > .item-content > .item-inner:after,
  3869. .list li:last-child li:last-child > .item-content > .item-inner:after,
  3870. .list li:last-child > .swipeout-content > .item-content > .item-inner:after,
  3871. .list li:last-child li:last-child > .swipeout-content > .item-content > .item-inner:after,
  3872. .list li:last-child > .item-link > .item-content > .item-inner:after,
  3873. .list li:last-child li:last-child > .item-link > .item-content > .item-inner:after {
  3874. display: none !important;
  3875. }
  3876. .list li li:last-child .item-inner:after,
  3877. .list li:last-child li .item-inner:after {
  3878. content: '';
  3879. position: absolute;
  3880. background-color: var(--f7-list-item-border-color);
  3881. display: block;
  3882. z-index: 15;
  3883. top: auto;
  3884. right: auto;
  3885. bottom: 0;
  3886. left: 0;
  3887. height: 1px;
  3888. width: 100%;
  3889. transform-origin: 50% 100%;
  3890. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  3891. }
  3892. .list.no-hairlines:before,
  3893. .list.no-hairlines ul:before,
  3894. .md .list.no-hairlines-md:before,
  3895. .md .list.no-hairlines-md ul:before,
  3896. .ios .list.no-hairlines-ios:before,
  3897. .ios .list.no-hairlines-ios ul:before,
  3898. .aurora .list.no-hairlines-aurora:before,
  3899. .aurora .list.no-hairlines-aurora ul:before {
  3900. display: none !important;
  3901. }
  3902. .list.no-hairlines:after,
  3903. .list.no-hairlines ul:after,
  3904. .md .list.no-hairlines-md:after,
  3905. .md .list.no-hairlines-md ul:after,
  3906. .ios .list.no-hairlines-ios:after,
  3907. .ios .list.no-hairlines-ios ul:after,
  3908. .aurora .list.no-hairlines-aurora:after,
  3909. .aurora .list.no-hairlines-aurora ul:after {
  3910. display: none !important;
  3911. }
  3912. .list.no-hairline-top:before,
  3913. .list.no-hairline-top ul:before,
  3914. .md .list.no-hairline-top-md:before,
  3915. .md .list.no-hairline-top-md ul:before,
  3916. .ios .list.no-hairline-top-ios:before,
  3917. .ios .list.no-hairline-top-ios ul:before,
  3918. .aurora .list.no-hairline-top-aurora:before,
  3919. .aurora .list.no-hairline-top-aurora ul:before {
  3920. display: none !important;
  3921. }
  3922. .list.no-hairline-bottom:after,
  3923. .list.no-hairline-bottom ul:after,
  3924. .md .list.no-hairline-bottom-md:after,
  3925. .md .list.no-hairline-bottom-md ul:after,
  3926. .ios .list.no-hairline-bottom-ios:after,
  3927. .ios .list.no-hairline-bottom-ios ul:after,
  3928. .aurora .list.no-hairline-bottom-aurora:after,
  3929. .aurora .list.no-hairline-bottom-aurora ul:after {
  3930. display: none !important;
  3931. }
  3932. .list.no-hairlines-between .item-inner:after,
  3933. .md .list.no-hairlines-between-md .item-inner:after,
  3934. .ios .list.no-hairlines-between-ios .item-inner:after,
  3935. .aurora .list.no-hairlines-between-aurora .item-inner:after,
  3936. .list.no-hairlines-between .list-button:after,
  3937. .md .list.no-hairlines-between-md .list-button:after,
  3938. .ios .list.no-hairlines-between-ios .list-button:after,
  3939. .aurora .list.no-hairlines-between-aurora .list-button:after,
  3940. .list.no-hairlines-between .item-divider:after,
  3941. .md .list.no-hairlines-between-md .item-divider:after,
  3942. .ios .list.no-hairlines-between-ios .item-divider:after,
  3943. .aurora .list.no-hairlines-between-aurora .item-divider:after,
  3944. .list.no-hairlines-between .list-group-title:after,
  3945. .md .list.no-hairlines-between-md .list-group-title:after,
  3946. .ios .list.no-hairlines-between-ios .list-group-title:after,
  3947. .aurora .list.no-hairlines-between-aurora .list-group-title:after,
  3948. .list.no-hairlines-between .list-group-title:after,
  3949. .md .list.no-hairlines-between-md .list-group-title:after,
  3950. .ios .list.no-hairlines-between-ios .list-group-title:after,
  3951. .aurora .list.no-hairlines-between-aurora .list-group-title:after {
  3952. display: none !important;
  3953. }
  3954. .list.no-hairlines-between.simple-list li:after,
  3955. .md .list.no-hairlines-between-md.simple-list li:after,
  3956. .ios .list.no-hairlines-between-ios.simple-list li:after,
  3957. .aurora .list.no-hairlines-between-aurora.simple-list li:after {
  3958. display: none !important;
  3959. }
  3960. .list.no-hairlines-between.links-list a:after,
  3961. .md .list.no-hairlines-between-md.links-list a:after,
  3962. .ios .list.no-hairlines-between-ios.links-list a:after,
  3963. .aurora .list.no-hairlines-between-aurora.links-list a:after {
  3964. display: none !important;
  3965. }
  3966. .list-button {
  3967. padding: 0 var(--f7-list-item-padding-horizontal);
  3968. line-height: var(--f7-list-item-min-height);
  3969. color: var(--f7-list-button-text-color, var(--f7-theme-color));
  3970. font-size: var(--f7-list-button-font-size);
  3971. font-weight: var(--f7-list-button-font-weight);
  3972. text-align: var(--f7-list-button-text-align);
  3973. }
  3974. .list-button:after {
  3975. content: '';
  3976. position: absolute;
  3977. background-color: var(--f7-list-button-border-color);
  3978. display: block;
  3979. z-index: 15;
  3980. top: auto;
  3981. right: auto;
  3982. bottom: 0;
  3983. left: 0;
  3984. height: 1px;
  3985. width: 100%;
  3986. transform-origin: 50% 100%;
  3987. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  3988. }
  3989. .list-button.active-state {
  3990. background-color: var(--f7-list-button-pressed-bg-color);
  3991. }
  3992. .list-button[class*="color-"] {
  3993. --f7-list-button-text-color: var(--f7-theme-color);
  3994. }
  3995. .simple-list li {
  3996. position: relative;
  3997. white-space: nowrap;
  3998. text-overflow: ellipsis;
  3999. max-width: 100%;
  4000. box-sizing: border-box;
  4001. display: flex;
  4002. justify-content: space-between;
  4003. align-items: center;
  4004. align-content: center;
  4005. line-height: var(--f7-list-item-min-height);
  4006. height: var(--f7-list-item-min-height);
  4007. padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
  4008. padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
  4009. }
  4010. .simple-list li:after {
  4011. left: var(--f7-list-item-padding-horizontal);
  4012. width: auto;
  4013. left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
  4014. right: 0;
  4015. }
  4016. .simple-list li:last-child:after {
  4017. display: none !important;
  4018. }
  4019. .links-list li {
  4020. z-index: 1;
  4021. }
  4022. .links-list a {
  4023. transition-duration: 300ms;
  4024. transition-property: background-color;
  4025. display: block;
  4026. position: relative;
  4027. overflow: hidden;
  4028. display: flex;
  4029. align-items: center;
  4030. align-content: center;
  4031. justify-content: space-between;
  4032. box-sizing: border-box;
  4033. white-space: nowrap;
  4034. text-overflow: ellipsis;
  4035. max-width: 100%;
  4036. height: var(--f7-list-item-min-height);
  4037. color: inherit;
  4038. }
  4039. .links-list a .ripple-wave {
  4040. z-index: 0;
  4041. }
  4042. .links-list a:after {
  4043. width: auto;
  4044. }
  4045. .links-list a.active-state {
  4046. background-color: var(--f7-list-link-pressed-bg-color);
  4047. }
  4048. .links-list a {
  4049. padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
  4050. padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
  4051. }
  4052. .links-list a:after {
  4053. left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
  4054. right: 0;
  4055. }
  4056. .links-list li:last-child a:after {
  4057. display: none !important;
  4058. }
  4059. .simple-list li:after,
  4060. .links-list a:after,
  4061. .list .item-inner:after {
  4062. content: '';
  4063. position: absolute;
  4064. background-color: var(--f7-list-item-border-color);
  4065. display: block;
  4066. z-index: 15;
  4067. top: auto;
  4068. right: auto;
  4069. bottom: 0;
  4070. left: 0;
  4071. height: 1px;
  4072. width: 100%;
  4073. transform-origin: 50% 100%;
  4074. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  4075. }
  4076. .media-list,
  4077. li.media-item {
  4078. --f7-list-item-padding-vertical: var(--f7-list-media-item-padding-vertical);
  4079. --f7-list-item-padding-horizontal: var(--f7-list-media-item-padding-horizontal);
  4080. }
  4081. .media-list .item-title,
  4082. li.media-item .item-title {
  4083. font-weight: var(--f7-list-media-item-title-font-weight, var(--f7-list-item-title-font-weight, inherit));
  4084. }
  4085. .media-list .item-inner,
  4086. li.media-item .item-inner {
  4087. display: block;
  4088. align-self: stretch;
  4089. }
  4090. .media-list .item-media,
  4091. li.media-item .item-media {
  4092. align-self: flex-start;
  4093. }
  4094. .media-list .item-media img,
  4095. li.media-item .item-media img {
  4096. display: block;
  4097. }
  4098. .media-list .item-link .item-inner,
  4099. li.media-item .item-link .item-inner {
  4100. padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
  4101. }
  4102. .media-list .item-link .item-title-row,
  4103. li.media-item .item-link .item-title-row {
  4104. padding-right: calc(var(--f7-list-chevron-icon-area));
  4105. }
  4106. .media-list.chevron-center .item-link .item-inner,
  4107. .media-list .chevron-center .item-link .item-inner,
  4108. .media-list .item-link.chevron-center .item-inner,
  4109. li.media-item.chevron-center .item-link .item-inner,
  4110. li.media-item .item-link.chevron-center .item-inner,
  4111. li.media-item .chevron-center .item-link .item-inner {
  4112. padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
  4113. }
  4114. .media-list.chevron-center .item-title-row,
  4115. .media-list .chevron-center .item-title-row,
  4116. li.media-item.chevron-center .item-title-row,
  4117. li.media-item .chevron-center .item-title-row {
  4118. padding-right: 0;
  4119. }
  4120. .list .item-link .item-inner:before,
  4121. .links-list a:before,
  4122. .media-list .item-link .item-title-row:before,
  4123. li.media-item .item-link .item-title-row:before,
  4124. .media-list.chevron-center .item-link .item-inner:before,
  4125. .media-list .chevron-center .item-link .item-inner:before,
  4126. .media-list .item-link.chevron-center .item-inner:before,
  4127. li.media-item.chevron-center .item-link .item-inner:before,
  4128. li.media-item .chevron-center .item-link .item-inner:before,
  4129. li.media-item .item-link.chevron-center .item-inner:before {
  4130. font-family: 'framework7-core-icons';
  4131. font-weight: normal;
  4132. font-style: normal;
  4133. line-height: 1;
  4134. letter-spacing: normal;
  4135. text-transform: none;
  4136. white-space: nowrap;
  4137. word-wrap: normal;
  4138. direction: ltr;
  4139. -webkit-font-smoothing: antialiased;
  4140. text-rendering: optimizeLegibility;
  4141. -moz-osx-font-smoothing: grayscale;
  4142. -moz-font-feature-settings: "liga";
  4143. font-feature-settings: "liga";
  4144. text-align: center;
  4145. display: block;
  4146. width: 100%;
  4147. height: 100%;
  4148. font-size: 20px;
  4149. position: absolute;
  4150. top: 50%;
  4151. width: 8px;
  4152. height: 14px;
  4153. margin-top: -7px;
  4154. font-size: var(--f7-list-chevron-icon-font-size);
  4155. line-height: 14px;
  4156. color: var(--f7-list-chevron-icon-color);
  4157. pointer-events: none;
  4158. right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
  4159. content: 'chevron_right';
  4160. }
  4161. .media-list.chevron-center .item-title-row:before,
  4162. .media-list .chevron-center .item-title-row:before,
  4163. li.media-item.chevron-center .item-title-row:before,
  4164. li.media-item .chevron-center .item-title-row:before {
  4165. display: none;
  4166. }
  4167. .media-list .item-link .item-inner:before,
  4168. li.media-item .item-link .item-inner:before {
  4169. display: none;
  4170. }
  4171. .media-list .item-link .item-title-row:before,
  4172. li.media-item .item-link .item-title-row:before {
  4173. right: 0;
  4174. }
  4175. .list-group ul:after,
  4176. .list-group ul:before {
  4177. z-index: 25 !important;
  4178. }
  4179. .list-group + .list-group ul:before {
  4180. display: none !important;
  4181. }
  4182. li.item-divider,
  4183. .item-divider,
  4184. li.list-group-title {
  4185. white-space: nowrap;
  4186. position: relative;
  4187. max-width: 100%;
  4188. text-overflow: ellipsis;
  4189. overflow: hidden;
  4190. z-index: 15;
  4191. padding-top: 0;
  4192. padding-bottom: 0;
  4193. padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
  4194. padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
  4195. box-sizing: border-box;
  4196. display: flex;
  4197. align-items: center;
  4198. align-content: center;
  4199. }
  4200. li.item-divider:after,
  4201. .item-divider:after,
  4202. li.list-group-title:after {
  4203. display: none !important;
  4204. }
  4205. li.item-divider,
  4206. .item-divider {
  4207. margin-top: -1px;
  4208. height: var(--f7-list-item-divider-height);
  4209. color: var(--f7-list-item-divider-text-color);
  4210. font-size: var(--f7-list-item-divider-font-size);
  4211. font-weight: var(--f7-list-item-divider-font-weight);
  4212. background-color: var(--f7-list-item-divider-bg-color);
  4213. line-height: var(--f7-list-item-divider-line-height);
  4214. }
  4215. li.item-divider:before,
  4216. .item-divider:before {
  4217. content: '';
  4218. position: absolute;
  4219. background-color: var(--f7-list-item-divider-border-color);
  4220. display: block;
  4221. z-index: 15;
  4222. top: 0;
  4223. right: auto;
  4224. bottom: auto;
  4225. left: 0;
  4226. height: 1px;
  4227. width: 100%;
  4228. transform-origin: 50% 0%;
  4229. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  4230. }
  4231. li.list-group-title,
  4232. .list li.list-group-title {
  4233. position: relative;
  4234. position: -webkit-sticky;
  4235. position: sticky;
  4236. top: 0;
  4237. margin-top: 0;
  4238. z-index: 20;
  4239. height: var(--f7-list-group-title-height);
  4240. color: var(--f7-list-group-title-text-color);
  4241. font-size: var(--f7-list-group-title-font-size);
  4242. font-weight: var(--f7-list-group-title-font-weight);
  4243. background-color: var(--f7-list-group-title-bg-color);
  4244. line-height: var(--f7-list-group-title-line-height);
  4245. }
  4246. .page-with-navbar-large li.list-group-title,
  4247. .page-with-navbar-large .list li.list-group-title {
  4248. top: calc(-1 * var(--f7-navbar-large-title-height));
  4249. }
  4250. .list.inset {
  4251. margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
  4252. margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
  4253. border-radius: var(--f7-list-inset-border-radius);
  4254. --f7-safe-area-left: 0px;
  4255. --f7-safe-area-right: 0px;
  4256. }
  4257. .list.inset .block-title {
  4258. margin-left: 0;
  4259. margin-right: 0;
  4260. }
  4261. .list.inset ul {
  4262. border-radius: var(--f7-list-inset-border-radius);
  4263. }
  4264. .list.inset ul:before {
  4265. display: none !important;
  4266. }
  4267. .list.inset ul:after {
  4268. display: none !important;
  4269. }
  4270. .list.inset li.swipeout:first-child,
  4271. .list.inset li:first-child > a {
  4272. border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
  4273. }
  4274. .list.inset li.swipeout:last-child,
  4275. .list.inset li:last-child > a {
  4276. border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
  4277. }
  4278. .list.inset li.swipeout:first-child:last-child,
  4279. .list.inset li:first-child:last-child > a {
  4280. border-radius: var(--f7-list-inset-border-radius);
  4281. }
  4282. @media (min-width: 768px) {
  4283. .list.tablet-inset {
  4284. margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
  4285. margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
  4286. border-radius: var(--f7-list-inset-border-radius);
  4287. --f7-safe-area-left: 0px;
  4288. --f7-safe-area-right: 0px;
  4289. }
  4290. .list.tablet-inset .block-title {
  4291. margin-left: 0;
  4292. margin-right: 0;
  4293. }
  4294. .list.tablet-inset ul {
  4295. border-radius: var(--f7-list-inset-border-radius);
  4296. }
  4297. .list.tablet-inset ul:before {
  4298. display: none !important;
  4299. }
  4300. .list.tablet-inset ul:after {
  4301. display: none !important;
  4302. }
  4303. .list.tablet-inset li:first-child > a {
  4304. border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
  4305. }
  4306. .list.tablet-inset li:last-child > a {
  4307. border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
  4308. }
  4309. .list.tablet-inset li:first-child:last-child > a {
  4310. border-radius: var(--f7-list-inset-border-radius);
  4311. }
  4312. }
  4313. .list.no-chevron,
  4314. .list .no-chevron {
  4315. --f7-list-chevron-icon-color: transparent;
  4316. --f7-list-chevron-icon-area: 0px;
  4317. }
  4318. .ios .item-link.active-state .item-inner:after,
  4319. .ios .list-button.active-state:after,
  4320. .ios .links-list a.active-state:after {
  4321. background-color: transparent;
  4322. }
  4323. .ios .links-list a.active-state,
  4324. .ios .list .item-link.active-state,
  4325. .ios .list .list-button.active-state {
  4326. transition-duration: 0ms;
  4327. }
  4328. .md .list .item-media {
  4329. min-width: 40px;
  4330. }
  4331. .aurora .list .item-media {
  4332. min-width: 18px;
  4333. }
  4334. .aurora .list .item-link .item-inner:before,
  4335. .aurora .links-list a:before,
  4336. .aurora .media-list .item-link .item-title-row:before,
  4337. .aurora li.media-item .item-link .item-title-row:before,
  4338. .aurora .media-list.chevron-center .item-link .item-inner:before,
  4339. .aurora .media-list .chevron-center .item-link .item-inner:before,
  4340. .aurora .media-list .item-link.chevron-center .item-inner:before,
  4341. .aurora li.media-item.chevron-center .item-link .item-inner:before,
  4342. .aurora li.media-item .chevron-center .item-link .item-inner:before,
  4343. .aurora li.media-item .item-link.chevron-center .item-inner:before {
  4344. content: 'chevron_right_aurora';
  4345. }
  4346. .aurora .links-list a,
  4347. .aurora .list .item-link,
  4348. .aurora .list .list-button {
  4349. transition-duration: 0ms;
  4350. }
  4351. .aurora.device-desktop .links-list a:hover:not(.active-state):not(.no-hover),
  4352. .aurora.device-desktop .list .item-link:hover:not(.active-state):not(.no-hover) {
  4353. background: var(--f7-list-link-hover-bg-color);
  4354. }
  4355. .aurora.device-desktop .list .list-button:hover:not(.active-state):not(.no-hover) {
  4356. background: var(--f7-list-button-hover-bg-color);
  4357. }
  4358. /* === Badge === */
  4359. :root {
  4360. --f7-badge-text-color: #fff;
  4361. --f7-badge-bg-color: #8e8e93;
  4362. --f7-badge-padding: 0 4px;
  4363. --f7-badge-in-icon-size: 16px;
  4364. --f7-badge-in-icon-font-size: 10px;
  4365. --f7-badge-font-weight: normal;
  4366. --f7-badge-font-size: 12px;
  4367. }
  4368. .ios {
  4369. --f7-badge-size: 20px;
  4370. }
  4371. .md {
  4372. --f7-badge-size: 18px;
  4373. }
  4374. .aurora {
  4375. --f7-badge-size: 18px;
  4376. --f7-badge-font-weight: 600;
  4377. --f7-badge-in-icon-size: 15px;
  4378. }
  4379. .badge {
  4380. display: inline-flex;
  4381. align-items: center;
  4382. align-content: center;
  4383. justify-content: center;
  4384. color: var(--f7-badge-text-color);
  4385. background: var(--f7-badge-bg-color);
  4386. position: relative;
  4387. box-sizing: border-box;
  4388. text-align: center;
  4389. vertical-align: middle;
  4390. font-weight: var(--f7-badge-font-weight);
  4391. font-size: var(--f7-badge-font-size);
  4392. border-radius: var(--f7-badge-size);
  4393. padding: var(--f7-badge-padding);
  4394. height: var(--f7-badge-size);
  4395. min-width: var(--f7-badge-size);
  4396. }
  4397. .icon .badge,
  4398. .f7-icons .badge,
  4399. .framework7-icons .badge,
  4400. .material-icons .badge {
  4401. position: absolute;
  4402. left: 100%;
  4403. margin-left: -10px;
  4404. top: -2px;
  4405. font-family: var(--f7-font-family);
  4406. --f7-badge-font-size: var(--f7-badge-in-icon-font-size);
  4407. --f7-badge-size: var(--f7-badge-in-icon-size);
  4408. }
  4409. .badge[class*="color-"] {
  4410. --f7-badge-bg-color: var(--f7-theme-color);
  4411. }
  4412. :root {
  4413. --f7-button-font-size: 14px;
  4414. --f7-button-min-width: 32px;
  4415. --f7-button-bg-color: transparent;
  4416. --f7-button-border-width: 0px;
  4417. /*
  4418. --f7-button-text-color: var(--f7-theme-color);
  4419. --f7-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
  4420. --f7-button-border-color: var(--f7-theme-color);
  4421. --f7-button-fill-text-color: #fff;
  4422. --f7-button-fill-bg-color: var(--f7-theme-color);
  4423. --f7-button-outline-border-color: var(--f7-theme-color);
  4424. */
  4425. --f7-button-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0,0,0,0.24);
  4426. --f7-button-raised-pressed-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0,0,0,0.23);
  4427. --f7-segmented-raised-divider-color: rgba(0, 0, 0, 0.1);
  4428. }
  4429. .ios {
  4430. --f7-button-height: 29px;
  4431. --f7-button-padding-horizontal: 10px;
  4432. --f7-button-border-radius: 5px;
  4433. --f7-button-font-weight: 400;
  4434. --f7-button-letter-spacing: 0;
  4435. --f7-button-text-transform: none;
  4436. /*
  4437. --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
  4438. --f7-button-fill-pressed-bg-color: var(--f7-theme-color-tint);
  4439. */
  4440. --f7-button-outline-border-width: 1px;
  4441. --f7-button-large-height: 44px;
  4442. --f7-button-large-font-size: 17px;
  4443. --f7-button-large-font-weight: 400;
  4444. --f7-button-small-height: 26px;
  4445. --f7-button-small-font-size: 13px;
  4446. --f7-button-small-font-weight: 600;
  4447. --f7-button-small-text-transform: uppercase;
  4448. --f7-button-small-outline-border-width: 2px;
  4449. }
  4450. .md {
  4451. --f7-button-height: 36px;
  4452. --f7-button-padding-horizontal: 8px;
  4453. --f7-button-border-radius: 4px;
  4454. --f7-button-font-weight: 500;
  4455. --f7-button-letter-spacing: 0.03em;
  4456. --f7-button-text-transform: uppercase;
  4457. --f7-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
  4458. /*
  4459. --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
  4460. */
  4461. --f7-button-outline-border-width: 2px;
  4462. --f7-button-large-height: 48px;
  4463. --f7-button-large-font-size: 14px;
  4464. --f7-button-large-font-weight: 500;
  4465. --f7-button-small-height: 28px;
  4466. --f7-button-small-font-size: 12px;
  4467. --f7-button-small-font-weight: 500;
  4468. --f7-button-small-text-transform: uppercase;
  4469. --f7-button-small-outline-border-width: 2px;
  4470. }
  4471. .md .theme-dark,
  4472. .md.theme-dark {
  4473. --f7-button-pressed-bg-color: rgba(255, 255, 255, 0.1);
  4474. }
  4475. .aurora {
  4476. /*
  4477. --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07);
  4478. --f7-button-fill-hover-bg-color: var(--f7-theme-color-tint);
  4479. */
  4480. --f7-button-font-size: 14px;
  4481. --f7-button-height: 28px;
  4482. --f7-button-min-width: 24px;
  4483. --f7-button-padding-horizontal: 10px;
  4484. --f7-button-border-radius: 4px;
  4485. --f7-button-font-weight: 400;
  4486. --f7-button-letter-spacing: 0.02;
  4487. --f7-button-text-transform: none;
  4488. /*
  4489. --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
  4490. --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
  4491. */
  4492. --f7-button-outline-border-width: 2px;
  4493. --f7-button-large-height: 34px;
  4494. --f7-button-large-font-size: 14px;
  4495. --f7-button-large-font-weight: 600;
  4496. --f7-button-small-height: 22px;
  4497. --f7-button-small-font-size: 12px;
  4498. --f7-button-small-font-weight: 600;
  4499. --f7-button-small-text-transform: none;
  4500. --f7-button-small-outline-border-width: 1px;
  4501. }
  4502. button {
  4503. -webkit-appearance: none;
  4504. -moz-appearance: none;
  4505. appearance: none;
  4506. width: 100%;
  4507. }
  4508. .button {
  4509. text-decoration: none;
  4510. text-align: center;
  4511. display: block;
  4512. -webkit-appearance: none;
  4513. -moz-appearance: none;
  4514. appearance: none;
  4515. background: none;
  4516. margin: 0;
  4517. white-space: nowrap;
  4518. text-overflow: ellipsis;
  4519. position: relative;
  4520. overflow: hidden;
  4521. font-family: inherit;
  4522. cursor: pointer;
  4523. outline: 0;
  4524. box-sizing: border-box;
  4525. vertical-align: middle;
  4526. justify-content: center;
  4527. align-items: center;
  4528. border: var(--f7-button-border-width, 0px) solid var(--f7-button-border-color, var(--f7-theme-color));
  4529. font-size: var(--f7-button-font-size);
  4530. color: var(--f7-button-text-color, var(--f7-theme-color));
  4531. height: var(--f7-button-height);
  4532. line-height: calc(var(--f7-button-height) - var(--f7-button-border-width, 0) * 2);
  4533. padding: var(--f7-button-padding-vertical, 0px) var(--f7-button-padding-horizontal);
  4534. border-radius: var(--f7-button-border-radius);
  4535. min-width: var(--f7-button-min-width);
  4536. font-weight: var(--f7-button-font-weight);
  4537. letter-spacing: var(--f7-button-letter-spacing);
  4538. text-transform: var(--f7-button-text-transform);
  4539. background-color: var(--f7-button-bg-color);
  4540. box-shadow: var(--f7-button-box-shadow);
  4541. }
  4542. .button.active-state {
  4543. background-color: var(--f7-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15));
  4544. color: var(--f7-button-pressed-text-color, var(--f7-button-text-color, var(--f7-theme-color)));
  4545. }
  4546. input[type="submit"].button,
  4547. input[type="button"].button {
  4548. width: 100%;
  4549. }
  4550. .button > i + span,
  4551. .button > span + span,
  4552. .button > span + i,
  4553. .button > i + i {
  4554. margin-left: 4px;
  4555. }
  4556. .subnavbar .button,
  4557. .navbar .button,
  4558. .toolbar .button,
  4559. .searchbar .button,
  4560. .appbar .button {
  4561. color: var(--f7-button-text-color, var(--f7-theme-color));
  4562. }
  4563. .button-round,
  4564. .ios .button-round-ios,
  4565. .md .button-round-md,
  4566. .aurora .button-round-aurora {
  4567. --f7-button-border-radius: var(--f7-button-height);
  4568. }
  4569. .button-fill,
  4570. .ios .button-fill-ios,
  4571. .md .button-fill-md,
  4572. .aurora .button-fill-aurora,
  4573. .button-active,
  4574. .button.tab-link-active {
  4575. --f7-button-bg-color: var(--f7-button-fill-bg-color, var(--f7-theme-color));
  4576. --f7-button-text-color: var(--f7-button-fill-text-color, #fff);
  4577. --f7-touch-ripple-color: var(--f7-touch-ripple-white);
  4578. }
  4579. .button-fill,
  4580. .ios .button-fill-ios,
  4581. .md .button-fill-md,
  4582. .aurora .button-fill-aurora {
  4583. --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color);
  4584. }
  4585. .button-active,
  4586. .button.tab-link-active {
  4587. --f7-button-pressed-bg-color: var(--f7-button-bg-color);
  4588. }
  4589. .button-outline,
  4590. .ios .button-outline-ios,
  4591. .md .button-outline-md,
  4592. .aurora .button-outline-aurora {
  4593. --f7-button-border-color: var(--f7-button-outline-border-color, var(--f7-theme-color));
  4594. --f7-button-border-width: var(--f7-button-outline-border-width);
  4595. }
  4596. .button-large,
  4597. .ios .button-large-ios,
  4598. .md .button-large-md,
  4599. .aurora .button-large-aurora {
  4600. --f7-button-height: var(--f7-button-large-height);
  4601. --f7-button-font-size: var(--f7-button-large-font-size);
  4602. --f7-button-font-weight: var(--f7-button-large-font-weight);
  4603. }
  4604. .button-small,
  4605. .ios .button-small-ios,
  4606. .md .button-small-md,
  4607. .aurora .button-small-aurora {
  4608. --f7-button-outline-border-width: var(--f7-button-small-outline-border-width);
  4609. --f7-button-height: var(--f7-button-small-height);
  4610. --f7-button-font-size: var(--f7-button-small-font-size);
  4611. --f7-button-font-weight: var(--f7-button-small-font-weight);
  4612. --f7-button-text-transform: var(--f7-button-small-text-transform);
  4613. }
  4614. .ios .button-small.button-fill,
  4615. .ios .button-small-ios.button-fill,
  4616. .ios .button-small.button-fill-ios {
  4617. --f7-button-border-width: var(--f7-button-small-outline-border-width);
  4618. --f7-button-pressed-text-color: var(--f7-theme-color);
  4619. --f7-button-pressed-bg-color: transparent;
  4620. }
  4621. .segmented {
  4622. align-self: center;
  4623. display: flex;
  4624. flex-wrap: nowrap;
  4625. border-radius: var(--f7-button-border-radius);
  4626. box-shadow: var(--f7-button-box-shadow);
  4627. }
  4628. .segmented .button,
  4629. .segmented button {
  4630. width: 100%;
  4631. flex-shrink: 1;
  4632. min-width: 0;
  4633. border-radius: 0;
  4634. }
  4635. .segmented .button:first-child {
  4636. border-radius: var(--f7-button-border-radius) 0 0 var(--f7-button-border-radius);
  4637. }
  4638. .segmented .button:not(.button-outline):first-child {
  4639. border-left: none;
  4640. }
  4641. .segmented .button.button-outline:nth-child(n + 2) {
  4642. border-left: none;
  4643. }
  4644. .segmented .button:last-child {
  4645. border-radius: 0 var(--f7-button-border-radius) var(--f7-button-border-radius) 0;
  4646. }
  4647. .segmented .button-round:first-child {
  4648. border-radius: var(--f7-button-height) 0 0 var(--f7-button-height);
  4649. }
  4650. .segmented .button-round:last-child {
  4651. border-radius: 0 var(--f7-button-height) var(--f7-button-height) 0;
  4652. }
  4653. .segmented .button:first-child:last-child {
  4654. border-radius: var(--f7-button-border-radius);
  4655. }
  4656. .segmented-round,
  4657. .ios .segmented-round-ios,
  4658. .md .segmented-round-md,
  4659. .aurora .segmented-round-aurora {
  4660. border-radius: var(--f7-button-height);
  4661. }
  4662. .segmented-raised,
  4663. .ios .segmented-raised-ios,
  4664. .md .segmented-raised-md,
  4665. .aurora .segmented-raised-aurora {
  4666. box-shadow: var(--f7-button-raised-box-shadow);
  4667. }
  4668. .segmented-raised .button:not(.button-outline),
  4669. .ios .segmented-raised-ios .button:not(.button-outline),
  4670. .md .segmented-raised-md .button:not(.button-outline),
  4671. .aurora .segmented-raised-aurora .button:not(.button-outline) {
  4672. border-left: 1px solid var(--f7-segmented-raised-divider-color);
  4673. }
  4674. .button-raised,
  4675. .ios .button-raised-ios,
  4676. .md .button-raised-md,
  4677. .aurora .button-raised-aurora {
  4678. --f7-button-box-shadow: var(--f7-button-raised-box-shadow);
  4679. }
  4680. .button-raised.active-state,
  4681. .ios .button-raised-ios.active-state,
  4682. .md .button-raised-md.active-state,
  4683. .aurora .button-raised-aurora.active-state {
  4684. --f7-button-box-shadow: var(--f7-button-raised-pressed-box-shadow);
  4685. }
  4686. .subnavbar .segmented {
  4687. width: 100%;
  4688. }
  4689. .ios .button {
  4690. transition-duration: 100ms;
  4691. }
  4692. .ios .button-fill,
  4693. .ios .button-fill-ios {
  4694. --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-tint));
  4695. }
  4696. .ios .button-small,
  4697. .ios .button-small-ios {
  4698. transition-duration: 200ms;
  4699. }
  4700. .md .button {
  4701. transition-duration: 300ms;
  4702. transform: translate3d(0, 0, 0);
  4703. }
  4704. .md .button-fill,
  4705. .md .button-fill-md {
  4706. --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-shade));
  4707. }
  4708. .aurora .button {
  4709. transition-duration: 100ms;
  4710. transform: translate3d(0, 0, 0);
  4711. }
  4712. .aurora.device-desktop .button:not(.active-state):not(.no-hover):hover {
  4713. background-color: var(--f7-button-hover-bg-color, rgba(var(--f7-theme-color-rgb), 0.07));
  4714. }
  4715. .aurora .button-fill,
  4716. .aurora .button-fill-aurora {
  4717. --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-shade));
  4718. }
  4719. .aurora .button-fill,
  4720. .aurora .button-active,
  4721. .aurora .button.tab-link-active,
  4722. .aurora .button-fill-aurora {
  4723. --f7-button-hover-bg-color: var(--f7-button-fill-hover-bg-color, var(--f7-theme-color-tint));
  4724. }
  4725. /* === Touch Ripple === */
  4726. :root {
  4727. --f7-touch-ripple-black: rgba(0, 0, 0, 0.1);
  4728. --f7-touch-ripple-white: rgba(255, 255, 255, 0.3);
  4729. --f7-touch-ripple-color: var(--f7-touch-ripple-black);
  4730. }
  4731. .theme-dark {
  4732. --f7-touch-ripple-color: var(--f7-touch-ripple-white);
  4733. }
  4734. .ripple,
  4735. .fab a,
  4736. .link,
  4737. .item-link,
  4738. .list-button,
  4739. .button,
  4740. .dialog-button,
  4741. .tab-link,
  4742. .radio,
  4743. .checkbox,
  4744. .actions-button,
  4745. .speed-dial-buttons a {
  4746. -webkit-user-select: none;
  4747. -moz-user-select: none;
  4748. -ms-user-select: none;
  4749. user-select: none;
  4750. }
  4751. .ripple-wave {
  4752. left: 0;
  4753. top: 0;
  4754. position: absolute !important;
  4755. border-radius: 50%;
  4756. pointer-events: none;
  4757. z-index: -1;
  4758. padding: 0;
  4759. margin: 0;
  4760. font-size: 0;
  4761. transform: translate3d(0px, 0px, 0) scale(0);
  4762. transition-duration: 1400ms;
  4763. background-color: var(--f7-touch-ripple-color);
  4764. will-change: transform, opacity;
  4765. }
  4766. .ripple-wave.ripple-wave-fill {
  4767. transition-duration: 300ms;
  4768. opacity: 0.35;
  4769. }
  4770. .ripple-wave.ripple-wave-out {
  4771. transition-duration: 600ms;
  4772. opacity: 0;
  4773. }
  4774. .button-fill .ripple-wave,
  4775. .picker-calendar-day .ripple-wave,
  4776. .menu .ripple-wave {
  4777. z-index: 1;
  4778. }
  4779. .checkbox .ripple-wave,
  4780. .radio .ripple-wave,
  4781. .data-table .sortable-cell .ripple-wave {
  4782. z-index: 0;
  4783. }
  4784. [class*="ripple-color-"] {
  4785. --f7-touch-ripple-color: var(--f7-theme-color-ripple-color);
  4786. }
  4787. /* === Icon === */
  4788. i.icon {
  4789. display: inline-block;
  4790. vertical-align: middle;
  4791. background-size: 100% auto;
  4792. background-position: center;
  4793. background-repeat: no-repeat;
  4794. font-style: normal;
  4795. position: relative;
  4796. }
  4797. .icon-back:after,
  4798. .icon-prev:after,
  4799. .icon-forward:after,
  4800. .icon-next:after {
  4801. font-family: 'framework7-core-icons';
  4802. font-weight: normal;
  4803. font-style: normal;
  4804. line-height: 1;
  4805. letter-spacing: normal;
  4806. text-transform: none;
  4807. white-space: nowrap;
  4808. word-wrap: normal;
  4809. direction: ltr;
  4810. -webkit-font-smoothing: antialiased;
  4811. text-rendering: optimizeLegibility;
  4812. -moz-osx-font-smoothing: grayscale;
  4813. -moz-font-feature-settings: "liga";
  4814. font-feature-settings: "liga";
  4815. text-align: center;
  4816. display: block;
  4817. width: 100%;
  4818. height: 100%;
  4819. font-size: 20px;
  4820. }
  4821. .icon[class*="color-"] {
  4822. color: var(--f7-theme-color);
  4823. }
  4824. .ios .icon-back,
  4825. .ios .icon-prev,
  4826. .ios .icon-forward,
  4827. .ios .icon-next {
  4828. width: 12px;
  4829. height: 20px;
  4830. line-height: 20px;
  4831. }
  4832. .ios .icon-back:after,
  4833. .ios .icon-prev:after,
  4834. .ios .icon-forward:after,
  4835. .ios .icon-next:after {
  4836. line-height: inherit;
  4837. }
  4838. .ios .icon-prev:after,
  4839. .ios .icon-next:after {
  4840. font-size: 16px;
  4841. }
  4842. .ios .item-media .icon {
  4843. color: #808080;
  4844. }
  4845. .ios .item-media .f7-icons {
  4846. font-size: 28px;
  4847. width: 28px;
  4848. height: 28px;
  4849. }
  4850. .ios .icon-back:after,
  4851. .ios .icon-prev:after {
  4852. content: 'chevron_left_ios';
  4853. }
  4854. .ios .icon-forward:after,
  4855. .ios .icon-next:after {
  4856. content: 'chevron_right_ios';
  4857. }
  4858. .md .icon-back,
  4859. .md .icon-forward,
  4860. .md .icon-next,
  4861. .md .icon-prev {
  4862. width: 24px;
  4863. height: 24px;
  4864. }
  4865. .md .icon-back:after,
  4866. .md .icon-forward:after,
  4867. .md .icon-next:after,
  4868. .md .icon-prev:after {
  4869. line-height: 1.2;
  4870. }
  4871. .md .item-media .icon {
  4872. color: #737373;
  4873. }
  4874. .md .item-media .material-icons {
  4875. font-size: 24px;
  4876. width: 24px;
  4877. height: 24px;
  4878. }
  4879. .md .icon-back:after {
  4880. content: 'arrow_left_md';
  4881. }
  4882. .md .icon-forward:after {
  4883. content: 'arrow_right_md';
  4884. }
  4885. .md .icon-next:after {
  4886. content: 'chevron_right_md';
  4887. }
  4888. .md .icon-prev:after {
  4889. content: 'chevron_left_md';
  4890. }
  4891. .aurora .f7-icons,
  4892. .aurora .material-icons {
  4893. font-size: 18px;
  4894. }
  4895. .aurora .icon-back,
  4896. .aurora .icon-prev,
  4897. .aurora .icon-forward,
  4898. .aurora .icon-next {
  4899. width: 9px;
  4900. height: 14px;
  4901. line-height: 14px;
  4902. }
  4903. .aurora .icon-back:after,
  4904. .aurora .icon-prev:after,
  4905. .aurora .icon-forward:after,
  4906. .aurora .icon-next:after {
  4907. line-height: inherit;
  4908. }
  4909. .aurora .item-media .icon {
  4910. color: #808080;
  4911. }
  4912. .aurora .item-media .f7-icons {
  4913. font-size: 18px;
  4914. width: 18px;
  4915. height: 18px;
  4916. }
  4917. .aurora .icon-back:after,
  4918. .aurora .icon-prev:after {
  4919. content: 'chevron_left_aurora';
  4920. }
  4921. .aurora .icon-forward:after,
  4922. .aurora .icon-next:after {
  4923. content: 'chevron_right_aurora';
  4924. }
  4925. .custom-modal-backdrop {
  4926. z-index: 10500;
  4927. }
  4928. .custom-modal-backdrop,
  4929. .actions-backdrop,
  4930. .dialog-backdrop,
  4931. .popover-backdrop,
  4932. .popup-backdrop,
  4933. .preloader-backdrop,
  4934. .sheet-backdrop {
  4935. position: absolute;
  4936. left: 0;
  4937. top: 0;
  4938. width: 100%;
  4939. height: 100%;
  4940. background: rgba(0, 0, 0, 0.4);
  4941. z-index: 13000;
  4942. visibility: hidden;
  4943. opacity: 0;
  4944. transition-duration: 400ms;
  4945. }
  4946. .custom-modal-backdrop.not-animated,
  4947. .actions-backdrop.not-animated,
  4948. .dialog-backdrop.not-animated,
  4949. .popover-backdrop.not-animated,
  4950. .popup-backdrop.not-animated,
  4951. .preloader-backdrop.not-animated,
  4952. .sheet-backdrop.not-animated {
  4953. transition-duration: 0ms;
  4954. }
  4955. .custom-modal-backdrop.backdrop-in,
  4956. .actions-backdrop.backdrop-in,
  4957. .dialog-backdrop.backdrop-in,
  4958. .popover-backdrop.backdrop-in,
  4959. .popup-backdrop.backdrop-in,
  4960. .preloader-backdrop.backdrop-in,
  4961. .sheet-backdrop.backdrop-in {
  4962. visibility: visible;
  4963. opacity: 1;
  4964. }
  4965. /* === Appbar === */
  4966. :root {
  4967. /*
  4968. --f7-appbar-offset: var(--f7-appbar-height);
  4969. --f7-appbar-extra-offset: 0px;
  4970. --f7-appbar-bg-color: var(--f7-bars-bg-color);
  4971. --f7-appbar-bg-image: var(--f7-bars-bg-image);
  4972. --f7-appbar-border-color: var(--f7-bars-border-color);
  4973. --f7-appbar-link-color: var(--f7-bars-link-color);
  4974. --f7-appbar-text-color: var(--f7-bars-text-color);
  4975. */
  4976. --f7-appbar-shadow-image: none;
  4977. }
  4978. .ios {
  4979. --f7-appbar-height: 44px;
  4980. --f7-appbar-inner-padding-left: 8px;
  4981. --f7-appbar-inner-padding-right: 8px;
  4982. }
  4983. .md {
  4984. --f7-appbar-height: 48px;
  4985. --f7-appbar-inner-padding-left: 16px;
  4986. --f7-appbar-inner-padding-right: 16px;
  4987. }
  4988. .aurora {
  4989. --f7-appbar-height: 38px;
  4990. --f7-appbar-inner-padding-left: 15px;
  4991. --f7-appbar-inner-padding-right: 15px;
  4992. }
  4993. .appbar {
  4994. position: relative;
  4995. left: 0;
  4996. top: 0;
  4997. width: 100%;
  4998. z-index: 500;
  4999. -webkit-backface-visibility: hidden;
  5000. backface-visibility: hidden;
  5001. box-sizing: border-box;
  5002. margin: 0;
  5003. transform: translate3d(0, 0, 0);
  5004. height: var(--f7-appbar-height);
  5005. background-image: var(--f7-appbar-bg-image, var(--f7-bars-bg-image));
  5006. background-color: var(--f7-appbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
  5007. color: var(--f7-appbar-text-color, var(--f7-bars-text-color));
  5008. font-size: var(--f7-appbar-font-size);
  5009. z-index: 7000;
  5010. }
  5011. .appbar .panel ~ .appbar {
  5012. z-index: 5500;
  5013. }
  5014. .appbar a {
  5015. color: var(--f7-appbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
  5016. }
  5017. .appbar a.link {
  5018. display: flex;
  5019. justify-content: flex-start;
  5020. line-height: var(--f7-appbar-link-line-height, var(--f7-appbar-height));
  5021. height: var(--f7-appbar-link-height, var(--f7-appbar-height));
  5022. }
  5023. .appbar .left,
  5024. .appbar .center,
  5025. .appbar .right {
  5026. display: flex;
  5027. align-items: center;
  5028. }
  5029. .appbar.no-hairline:after,
  5030. .appbar.no-border:after {
  5031. display: none !important;
  5032. }
  5033. .appbar.no-hairline .title-large:after,
  5034. .appbar.no-border .title-large:after {
  5035. display: none !important;
  5036. }
  5037. .appbar.no-shadow:before {
  5038. display: none !important;
  5039. }
  5040. .appbar:after,
  5041. .appbar:before {
  5042. -webkit-backface-visibility: hidden;
  5043. backface-visibility: hidden;
  5044. }
  5045. .appbar:after {
  5046. content: '';
  5047. position: absolute;
  5048. background-color: var(--f7-appbar-border-color, var(--f7-bars-border-color));
  5049. display: block;
  5050. z-index: 15;
  5051. top: auto;
  5052. right: auto;
  5053. bottom: 0;
  5054. left: 0;
  5055. height: 1px;
  5056. width: 100%;
  5057. transform-origin: 50% 100%;
  5058. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  5059. }
  5060. .appbar:before {
  5061. content: '';
  5062. position: absolute;
  5063. right: 0;
  5064. width: 100%;
  5065. top: 100%;
  5066. bottom: auto;
  5067. height: 8px;
  5068. pointer-events: none;
  5069. background: var(--f7-appbar-shadow-image);
  5070. }
  5071. .appbar:after {
  5072. z-index: 1;
  5073. }
  5074. .appbar ~ * {
  5075. --f7-appbar-app-offset: calc(var(--f7-appbar-height) + var(--f7-appbar-extra-offset, 0px));
  5076. }
  5077. .appbar-inner {
  5078. position: absolute;
  5079. left: 0;
  5080. top: 0;
  5081. width: 100%;
  5082. height: var(--f7-appbar-height);
  5083. display: flex;
  5084. align-items: center;
  5085. justify-content: space-between;
  5086. box-sizing: border-box;
  5087. 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));
  5088. }
  5089. .appbar-inner.stacked {
  5090. display: none;
  5091. }
  5092. /* === Dialog === */
  5093. :root {
  5094. --f7-dialog-button-text-color: var(--f7-theme-color);
  5095. --f7-dialog-button-text-align: center;
  5096. --f7-dialog-input-bg-color: #fff;
  5097. }
  5098. .ios {
  5099. --f7-dialog-bg-color: rgba(255, 255, 255, 0.95);
  5100. --f7-dialog-box-shadow: none;
  5101. --f7-dialog-width: 270px;
  5102. --f7-dialog-inner-padding: 15px;
  5103. --f7-dialog-border-radius: 13px;
  5104. --f7-dialog-text-color: #000;
  5105. --f7-dialog-text-align: center;
  5106. --f7-dialog-font-size: 14px;
  5107. --f7-dialog-title-text-color: inherit;
  5108. --f7-dialog-title-font-size: 18px;
  5109. --f7-dialog-title-font-weight: 600;
  5110. --f7-dialog-title-line-height: inherit;
  5111. --f7-dialog-button-font-size: 17px;
  5112. --f7-dialog-button-height: 44px;
  5113. --f7-dialog-button-letter-spacing: 0;
  5114. --f7-dialog-button-font-weight: 400;
  5115. --f7-dialog-button-text-transform: none;
  5116. --f7-dialog-button-pressed-bg-color: rgba(230, 230, 230, 0.95);
  5117. --f7-dialog-input-border-radius: 4px;
  5118. --f7-dialog-input-font-size: 14px;
  5119. --f7-dialog-input-height: 32px;
  5120. --f7-dialog-input-border-color: rgba(0, 0, 0, 0.3);
  5121. --f7-dialog-input-border-width: 1px;
  5122. --f7-dialog-input-placeholder-color: #a9a9a9;
  5123. --f7-dialog-preloader-size: 34px;
  5124. }
  5125. .md {
  5126. --f7-dialog-bg-color: #fff;
  5127. --f7-dialog-box-shadow: var(--f7-elevation-24);
  5128. --f7-dialog-width: 280px;
  5129. --f7-dialog-inner-padding: 24px;
  5130. --f7-dialog-border-radius: 4px;
  5131. --f7-dialog-text-color: #757575;
  5132. --f7-dialog-text-align: left;
  5133. --f7-dialog-font-size: 16px;
  5134. --f7-dialog-title-text-color: #212121;
  5135. --f7-dialog-title-font-size: 20px;
  5136. --f7-dialog-title-font-weight: 500;
  5137. --f7-dialog-title-line-height: 1.3;
  5138. --f7-dialog-button-font-size: 14px;
  5139. --f7-dialog-button-height: 36px;
  5140. --f7-dialog-button-letter-spacing: 0.03em;
  5141. --f7-dialog-button-font-weight: 500;
  5142. --f7-dialog-button-text-transform: uppercase;
  5143. --f7-dialog-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
  5144. --f7-dialog-input-border-radius: 0px;
  5145. --f7-dialog-input-font-size: 16px;
  5146. --f7-dialog-input-height: 36px;
  5147. --f7-dialog-input-border-color: transparent;
  5148. --f7-dialog-input-border-width: 0px;
  5149. --f7-dialog-input-placeholder-color: rgba(0, 0, 0, 0.35);
  5150. --f7-dialog-preloader-size: 32px;
  5151. }
  5152. .aurora {
  5153. --f7-dialog-bg-color: #fff;
  5154. --f7-dialog-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15), 0 25px 30px 0 rgba(0,0,0,0.35);
  5155. --f7-dialog-width: 300px;
  5156. --f7-dialog-inner-padding: 20px;
  5157. --f7-dialog-border-radius: 4px;
  5158. --f7-dialog-text-color: #000;
  5159. --f7-dialog-text-align: left;
  5160. --f7-dialog-font-size: 14px;
  5161. --f7-dialog-title-text-color: inherit;
  5162. --f7-dialog-title-font-size: 14px;
  5163. --f7-dialog-title-font-weight: 700;
  5164. --f7-dialog-title-line-height: inherit;
  5165. --f7-dialog-button-text-color: #fff;
  5166. --f7-dialog-button-font-size: 13px;
  5167. --f7-dialog-button-height: 28px;
  5168. --f7-dialog-button-letter-spacing: 0;
  5169. --f7-dialog-button-font-weight: 500;
  5170. --f7-dialog-button-text-transform: none;
  5171. /*
  5172. --f7-dialog-button-pressed-bg-color: var(--f7-theme-color-shade);
  5173. */
  5174. --f7-dialog-input-border-radius: 4px;
  5175. --f7-dialog-input-font-size: 13px;
  5176. --f7-dialog-input-height: 24px;
  5177. --f7-dialog-input-border-color: rgba(0, 0, 0, 0.12);
  5178. --f7-dialog-input-border-width: 1px;
  5179. --f7-dialog-input-placeholder-color: rgba(0, 0, 0, 0.32);
  5180. --f7-dialog-preloader-size: 24px;
  5181. }
  5182. .dialog {
  5183. position: absolute;
  5184. z-index: 13500;
  5185. left: 50%;
  5186. margin-top: 0;
  5187. top: 50%;
  5188. overflow: hidden;
  5189. opacity: 0;
  5190. transform: translate3d(0, -50%, 0) scale(1.185);
  5191. transition-property: transform, opacity;
  5192. display: none;
  5193. transition-duration: 400ms;
  5194. box-shadow: var(--f7-dialog-box-shadow);
  5195. width: var(--f7-dialog-width);
  5196. margin-left: calc(-1 * var(--f7-dialog-width) / 2);
  5197. border-radius: var(--f7-dialog-border-radius);
  5198. text-align: var(--f7-dialog-text-align);
  5199. color: var(--f7-dialog-text-color);
  5200. font-size: var(--f7-dialog-font-size);
  5201. will-change: transform, opacity;
  5202. }
  5203. .dialog.modal-in {
  5204. opacity: 1;
  5205. transform: translate3d(0, -50%, 0) scale(1);
  5206. }
  5207. .dialog.modal-out {
  5208. opacity: 0;
  5209. z-index: 13499;
  5210. }
  5211. .dialog.not-animated {
  5212. transition-duration: 0ms;
  5213. }
  5214. .dialog-inner {
  5215. position: relative;
  5216. padding: var(--f7-dialog-inner-padding);
  5217. }
  5218. .dialog-title {
  5219. color: var(--f7-dialog-title-text-color);
  5220. font-size: var(--f7-dialog-title-font-size);
  5221. font-weight: var(--f7-dialog-title-font-weight);
  5222. line-height: var(--f7-dialog-title-line-height);
  5223. }
  5224. .dialog-buttons {
  5225. position: relative;
  5226. display: flex;
  5227. }
  5228. .dialog-buttons-vertical .dialog-buttons {
  5229. display: block;
  5230. height: auto !important;
  5231. }
  5232. .dialog-button {
  5233. box-sizing: border-box;
  5234. overflow: hidden;
  5235. position: relative;
  5236. white-space: nowrap;
  5237. text-overflow: ellipsis;
  5238. color: var(--f7-dialog-button-text-color);
  5239. font-size: var(--f7-dialog-button-font-size);
  5240. height: var(--f7-dialog-button-height);
  5241. line-height: var(--f7-dialog-button-height);
  5242. letter-spacing: var(--f7-dialog-button-letter-spacing);
  5243. text-align: var(--f7-dialog-button-text-align);
  5244. font-weight: var(--f7-dialog-button-font-weight);
  5245. text-transform: var(--f7-dialog-button-text-transform);
  5246. display: block;
  5247. cursor: pointer;
  5248. }
  5249. .dialog-no-buttons .dialog-buttons {
  5250. display: none;
  5251. }
  5252. .dialog-input-field {
  5253. position: relative;
  5254. }
  5255. input.dialog-input[type] {
  5256. box-sizing: border-box;
  5257. margin: 0;
  5258. margin-top: 15px;
  5259. border-radius: var(--f7-dialog-input-border-radius);
  5260. -webkit-appearance: none;
  5261. -moz-appearance: none;
  5262. appearance: none;
  5263. width: 100%;
  5264. display: block;
  5265. font-family: inherit;
  5266. box-shadow: none;
  5267. font-size: var(--f7-dialog-input-font-size);
  5268. height: var(--f7-dialog-input-height);
  5269. background-color: var(--f7-dialog-input-bg-color);
  5270. border: var(--f7-dialog-input-border-width) solid var(--f7-dialog-input-border-color);
  5271. }
  5272. input.dialog-input[type]::-webkit-input-placeholder {
  5273. color: var(--f7-dialog-input-placeholder-color);
  5274. }
  5275. input.dialog-input[type]::-moz-placeholder {
  5276. color: var(--f7-dialog-input-placeholder-color);
  5277. }
  5278. input.dialog-input[type]::-ms-input-placeholder {
  5279. color: var(--f7-dialog-input-placeholder-color);
  5280. }
  5281. input.dialog-input[type]::placeholder {
  5282. color: var(--f7-dialog-input-placeholder-color);
  5283. }
  5284. .dialog-input-double input.dialog-input {
  5285. border-radius: var(--f7-dialog-input-border-radius) var(--f7-dialog-input-border-radius) 0 0;
  5286. }
  5287. .dialog-input-double + .dialog-input-double input.dialog-input {
  5288. border-radius: 0 0 var(--f7-dialog-input-border-radius) var(--f7-dialog-input-border-radius);
  5289. }
  5290. .dialog-preloader .preloader {
  5291. --f7-preloader-size: var(--f7-dialog-preloader-size);
  5292. }
  5293. html.with-modal-dialog .page-content {
  5294. overflow: hidden;
  5295. -webkit-overflow-scrolling: auto;
  5296. }
  5297. .ios .dialog.modal-out {
  5298. transform: translate3d(0, -50%, 0) scale(1);
  5299. }
  5300. .ios .dialog-inner {
  5301. border-radius: var(--f7-dialog-border-radius) var(--f7-dialog-border-radius) 0 0;
  5302. background: var(--f7-dialog-bg-color);
  5303. }
  5304. .ios .dialog-inner:after {
  5305. content: '';
  5306. position: absolute;
  5307. background-color: rgba(0, 0, 0, 0.2);
  5308. display: block;
  5309. z-index: 15;
  5310. top: auto;
  5311. right: auto;
  5312. bottom: 0;
  5313. left: 0;
  5314. height: 1px;
  5315. width: 100%;
  5316. transform-origin: 50% 100%;
  5317. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  5318. }
  5319. .ios .dialog-title + .dialog-text {
  5320. margin-top: 5px;
  5321. }
  5322. .ios .dialog-buttons {
  5323. height: 44px;
  5324. justify-content: center;
  5325. }
  5326. .ios .dialog-button {
  5327. width: 100%;
  5328. padding: 0 5px;
  5329. -webkit-box-flex: 1;
  5330. -ms-flex: 1;
  5331. background: var(--f7-dialog-bg-color);
  5332. }
  5333. .ios .dialog-button:after {
  5334. content: '';
  5335. position: absolute;
  5336. background-color: rgba(0, 0, 0, 0.2);
  5337. display: block;
  5338. z-index: 15;
  5339. top: 0;
  5340. right: 0;
  5341. bottom: auto;
  5342. left: auto;
  5343. width: 1px;
  5344. height: 100%;
  5345. transform-origin: 100% 50%;
  5346. transform: scaleX(calc(1 / var(--f7-device-pixel-ratio)));
  5347. }
  5348. .ios .dialog-button.active-state {
  5349. background-color: var(--f7-dialog-button-pressed-bg-color);
  5350. }
  5351. .ios .dialog-button:first-child {
  5352. border-radius: 0 0 0 var(--f7-dialog-border-radius);
  5353. }
  5354. .ios .dialog-button:last-child {
  5355. border-radius: 0 0 var(--f7-dialog-border-radius) 0;
  5356. }
  5357. .ios .dialog-button:last-child:after {
  5358. display: none !important;
  5359. }
  5360. .ios .dialog-button:first-child:last-child {
  5361. border-radius: 0 0 var(--f7-dialog-border-radius) var(--f7-dialog-border-radius);
  5362. }
  5363. .ios .dialog-button.dialog-button-bold {
  5364. font-weight: 500;
  5365. }
  5366. .ios .dialog-button[class*="color-"] {
  5367. --f7-dialog-button-text-color: var(--f7-theme-color);
  5368. }
  5369. .ios .dialog-buttons-vertical .dialog-buttons {
  5370. height: auto;
  5371. }
  5372. .ios .dialog-buttons-vertical .dialog-button {
  5373. border-radius: 0;
  5374. }
  5375. .ios .dialog-buttons-vertical .dialog-button:after {
  5376. content: '';
  5377. position: absolute;
  5378. background-color: rgba(0, 0, 0, 0.2);
  5379. display: block;
  5380. z-index: 15;
  5381. top: auto;
  5382. right: auto;
  5383. bottom: 0;
  5384. left: 0;
  5385. height: 1px;
  5386. width: 100%;
  5387. transform-origin: 50% 100%;
  5388. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  5389. }
  5390. .ios .dialog-buttons-vertical .dialog-button:last-child {
  5391. border-radius: 0 0 var(--f7-dialog-border-radius) var(--f7-dialog-border-radius);
  5392. }
  5393. .ios .dialog-buttons-vertical .dialog-button:last-child:after {
  5394. display: none !important;
  5395. }
  5396. .ios .dialog-no-buttons .dialog-inner {
  5397. border-radius: var(--f7-dialog-border-radius);
  5398. }
  5399. .ios .dialog-no-buttons .dialog-inner:after {
  5400. display: none !important;
  5401. }
  5402. .ios .dialog-input-field {
  5403. margin-top: 15px;
  5404. }
  5405. .ios .dialog-input {
  5406. padding: 0 5px;
  5407. }
  5408. .ios .dialog-input + .dialog-input {
  5409. margin-top: 5px;
  5410. }
  5411. .ios .dialog-input-double + .dialog-input-double {
  5412. margin-top: 0;
  5413. }
  5414. .ios .dialog-input-double + .dialog-input-double .dialog-input {
  5415. border-top: 0;
  5416. margin-top: 0;
  5417. }
  5418. .ios .dialog-preloader .dialog-title ~ .preloader,
  5419. .ios .dialog-preloader .dialog-text ~ .preloader {
  5420. margin-top: 15px;
  5421. }
  5422. .ios .dialog-progress .dialog-title ~ .progressbar,
  5423. .ios .dialog-progress .dialog-text ~ .progressbar,
  5424. .ios .dialog-progress .dialog-title ~ .progressbar-infinite,
  5425. .ios .dialog-progress .dialog-text ~ .progressbar-infinite {
  5426. margin-top: 15px;
  5427. }
  5428. .md .dialog {
  5429. background: var(--f7-dialog-bg-color);
  5430. }
  5431. .md .dialog.modal-out {
  5432. transform: translate3d(0, -50%, 0) scale(0.815);
  5433. }
  5434. .md .dialog-title + .dialog-text {
  5435. margin-top: 20px;
  5436. }
  5437. .md .dialog-text {
  5438. line-height: 1.5;
  5439. }
  5440. .md .dialog-buttons {
  5441. height: 48px;
  5442. padding: 6px 8px;
  5443. overflow: hidden;
  5444. box-sizing: border-box;
  5445. justify-content: flex-end;
  5446. }
  5447. .md .dialog-button {
  5448. border-radius: 4px;
  5449. min-width: 64px;
  5450. padding: 0 8px;
  5451. border: none;
  5452. transition-duration: 300ms;
  5453. transform: translate3d(0, 0, 0);
  5454. }
  5455. .md .dialog-button.active-state {
  5456. background-color: var(--f7-dialog-button-pressed-bg-color);
  5457. }
  5458. .md .dialog-button.dialog-button-bold {
  5459. font-weight: 700;
  5460. }
  5461. .md .dialog-button + .dialog-button {
  5462. margin-left: 4px;
  5463. }
  5464. .md .dialog-button[class*="color-"] {
  5465. --f7-dialog-button-text-color: var(--f7-theme-color);
  5466. }
  5467. .md .dialog-buttons-vertical .dialog-buttons {
  5468. padding: 0 0 8px 0;
  5469. }
  5470. .md .dialog-buttons-vertical .dialog-button {
  5471. margin-left: 0;
  5472. text-align: right;
  5473. height: 48px;
  5474. line-height: 48px;
  5475. border-radius: 0;
  5476. padding-left: 16px;
  5477. padding-right: 16px;
  5478. }
  5479. .md .dialog-input {
  5480. padding: 0;
  5481. transition-duration: 200ms;
  5482. position: relative;
  5483. }
  5484. .md .dialog-input + .dialog-input {
  5485. margin-top: 16px;
  5486. }
  5487. .md .dialog-preloader .dialog-title,
  5488. .md .dialog-progress .dialog-title,
  5489. .md .dialog-preloader .dialog-inner,
  5490. .md .dialog-progress .dialog-inner {
  5491. text-align: center;
  5492. }
  5493. .md .dialog-preloader .dialog-title ~ .preloader,
  5494. .md .dialog-preloader .dialog-text ~ .preloader {
  5495. margin-top: 20px;
  5496. }
  5497. .md .dialog-progress .dialog-title ~ .progressbar,
  5498. .md .dialog-progress .dialog-text ~ .progressbar,
  5499. .md .dialog-progress .dialog-title ~ .progressbar-infinite,
  5500. .md .dialog-progress .dialog-text ~ .progressbar-infinite {
  5501. margin-top: 16px;
  5502. }
  5503. .aurora .dialog {
  5504. background: var(--f7-dialog-bg-color);
  5505. }
  5506. .aurora .dialog.modal-out {
  5507. transform: translate3d(0, -50%, 0) scale(0.815);
  5508. }
  5509. .aurora .dialog-title + .dialog-text {
  5510. margin-top: 10px;
  5511. }
  5512. .aurora .dialog-text {
  5513. line-height: 1.5;
  5514. }
  5515. .aurora .dialog-buttons {
  5516. padding: var(--f7-dialog-inner-padding);
  5517. padding-top: 0;
  5518. overflow: hidden;
  5519. box-sizing: border-box;
  5520. justify-content: flex-end;
  5521. }
  5522. .aurora .dialog-button {
  5523. border-radius: 4px;
  5524. min-width: 64px;
  5525. padding: 0 10px;
  5526. border: none;
  5527. transition-duration: 300ms;
  5528. transform: translate3d(0, 0, 0);
  5529. background: var(--f7-theme-color);
  5530. }
  5531. .aurora .dialog-button.active-state {
  5532. background-color: var(--f7-dialog-button-pressed-bg-color, var(--f7-theme-color-shade));
  5533. }
  5534. .aurora .dialog-button.dialog-button-bold {
  5535. font-weight: 600;
  5536. }
  5537. .aurora .dialog-button + .dialog-button {
  5538. margin-left: 15px;
  5539. }
  5540. .aurora .dialog-buttons-vertical .dialog-buttons {
  5541. display: flex;
  5542. flex-direction: column;
  5543. align-items: flex-end;
  5544. }
  5545. .aurora .dialog-buttons-vertical .dialog-button {
  5546. margin-left: 0;
  5547. flex-shrink: 0;
  5548. }
  5549. .aurora .dialog-buttons-vertical .dialog-button + .dialog-button {
  5550. margin-top: 5px;
  5551. }
  5552. .aurora .dialog-input-field {
  5553. margin-top: 10px;
  5554. }
  5555. .aurora .dialog-input-field input.dialog-input {
  5556. margin-top: 0;
  5557. }
  5558. .aurora .dialog-input {
  5559. padding: 0 4px;
  5560. transition-duration: 200ms;
  5561. position: relative;
  5562. }
  5563. .aurora .dialog-input + .dialog-input {
  5564. margin-top: 10px;
  5565. }
  5566. .aurora .dialog-input-double + .dialog-input-double {
  5567. margin-top: 0;
  5568. }
  5569. .aurora .dialog-input-double + .dialog-input-double .dialog-input {
  5570. border-top: 0;
  5571. margin-top: 0;
  5572. }
  5573. .aurora .dialog-preloader .dialog-title,
  5574. .aurora .dialog-progress .dialog-title,
  5575. .aurora .dialog-preloader .dialog-inner,
  5576. .aurora .dialog-progress .dialog-inner {
  5577. text-align: center;
  5578. }
  5579. .aurora .dialog-preloader .dialog-title ~ .preloader,
  5580. .aurora .dialog-preloader .dialog-text ~ .preloader {
  5581. margin-top: 10px;
  5582. }
  5583. .aurora .dialog-progress .dialog-title ~ .progressbar,
  5584. .aurora .dialog-progress .dialog-text ~ .progressbar,
  5585. .aurora .dialog-progress .dialog-title ~ .progressbar-infinite,
  5586. .aurora .dialog-progress .dialog-text ~ .progressbar-infinite {
  5587. margin-top: 15px;
  5588. }
  5589. /* === Popup === */
  5590. :root {
  5591. --f7-popup-border-radius: 0px;
  5592. --f7-popup-tablet-width: 630px;
  5593. --f7-popup-tablet-height: 630px;
  5594. /*
  5595. --f7-popup-tablet-border-radius: var(--f7-popup-border-radius);
  5596. */
  5597. }
  5598. .ios {
  5599. --f7-popup-box-shadow: none;
  5600. }
  5601. .md {
  5602. --f7-popup-box-shadow: 0px 20px 44px rgba(0, 0, 0, 0.5);
  5603. }
  5604. .aurora {
  5605. --f7-popup-tablet-border-radius: 4px;
  5606. --f7-popup-box-shadow: 0px 20px 44px rgba(0, 0, 0, 0.5);
  5607. }
  5608. .popup-backdrop {
  5609. z-index: 10500;
  5610. }
  5611. .popup {
  5612. position: absolute;
  5613. left: 0;
  5614. top: var(--f7-statusbar-height);
  5615. width: 100%;
  5616. height: calc(100% - var(--f7-statusbar-height));
  5617. display: none;
  5618. box-sizing: border-box;
  5619. transition-property: transform;
  5620. transform: translate3d(0, 100%, 0);
  5621. background: #fff;
  5622. z-index: 11000;
  5623. will-change: transform;
  5624. overflow: hidden;
  5625. border-radius: var(--f7-popup-border-radius);
  5626. }
  5627. .popup.modal-in,
  5628. .popup.modal-out {
  5629. transition-duration: 400ms;
  5630. }
  5631. .popup.not-animated {
  5632. transition-duration: 0ms;
  5633. }
  5634. .popup.modal-in {
  5635. display: block;
  5636. transform: translate3d(0, 0, 0);
  5637. }
  5638. .popup.modal-out {
  5639. transform: translate3d(0, 100%, 0);
  5640. }
  5641. .popup.swipe-close-to-top.modal-out {
  5642. transform: translate3d(0, -100%, 0);
  5643. }
  5644. @media (min-width: 630px) and (min-height: 630px) {
  5645. .popup:not(.popup-tablet-fullscreen) {
  5646. width: var(--f7-popup-tablet-width);
  5647. height: var(--f7-popup-tablet-height);
  5648. left: 50%;
  5649. top: 50%;
  5650. margin-left: calc(-1 * var(--f7-popup-tablet-width) / 2);
  5651. margin-top: calc(-1 * var(--f7-popup-tablet-height) / 2);
  5652. transform: translate3d(0, 100vh, 0);
  5653. box-shadow: var(--f7-popup-box-shadow);
  5654. border-radius: var(--f7-popup-tablet-border-radius, var(--f7-popup-border-radius));
  5655. }
  5656. .popup:not(.popup-tablet-fullscreen).modal-in {
  5657. transform: translate3d(0, 0, 0);
  5658. }
  5659. .popup:not(.popup-tablet-fullscreen).modal-out {
  5660. transform: translate3d(0, 100vh, 0);
  5661. }
  5662. .popup:not(.popup-tablet-fullscreen).swipe-close-to-top.modal-out {
  5663. transform: translate3d(0, -100vh, 0);
  5664. }
  5665. }
  5666. @media (max-width: 629px), (max-height: 629px) {
  5667. .popup-backdrop {
  5668. z-index: 9500;
  5669. }
  5670. }
  5671. html.with-modal-popup .framework7-root > .views .page-content,
  5672. html.with-modal-popup .framework7-root > .view .page-content,
  5673. html.with-modal-popup .framework7-root > .panel .page-content {
  5674. overflow: hidden;
  5675. -webkit-overflow-scrolling: auto;
  5676. }
  5677. /* === Login Screen === */
  5678. :root {
  5679. --f7-login-screen-bg-color: #fff;
  5680. --f7-login-screen-content-bg-color: #fff;
  5681. --f7-login-screen-blocks-max-width: 480px;
  5682. /*
  5683. --f7-login-screen-list-button-text-color: var(--f7-theme-color);
  5684. */
  5685. --f7-login-screen-title-text-align: center;
  5686. --f7-login-screen-title-text-color: inherit;
  5687. --f7-login-screen-title-letter-spacing: 0;
  5688. }
  5689. :root .theme-dark,
  5690. :root.theme-dark {
  5691. --f7-login-screen-bg-color: #171717;
  5692. --f7-login-screen-content-bg-color: transparent;
  5693. }
  5694. .ios {
  5695. --f7-login-screen-blocks-margin-vertical: 25px;
  5696. --f7-login-screen-title-font-size: 30px;
  5697. --f7-login-screen-title-font-weight: normal;
  5698. }
  5699. .md {
  5700. --f7-login-screen-blocks-margin-vertical: 24px;
  5701. --f7-login-screen-title-font-size: 34px;
  5702. --f7-login-screen-title-font-weight: normal;
  5703. }
  5704. .aurora {
  5705. --f7-login-screen-blocks-margin-vertical: 15px;
  5706. --f7-login-screen-title-font-size: 28px;
  5707. --f7-login-screen-title-font-weight: 500;
  5708. }
  5709. .login-screen {
  5710. position: absolute;
  5711. left: 0;
  5712. top: var(--f7-statusbar-height);
  5713. width: 100%;
  5714. height: calc(100% - var(--f7-statusbar-height));
  5715. display: none;
  5716. box-sizing: border-box;
  5717. transition-property: transform;
  5718. transform: translate3d(0, 100%, 0);
  5719. background: var(--f7-login-screen-bg-color);
  5720. z-index: 11000;
  5721. will-change: transform;
  5722. }
  5723. .login-screen.modal-in,
  5724. .login-screen.modal-out {
  5725. transition-duration: 400ms;
  5726. }
  5727. .login-screen.not-animated {
  5728. transition-duration: 0ms;
  5729. }
  5730. .login-screen.modal-in {
  5731. display: block;
  5732. transform: translate3d(0, 0, 0);
  5733. }
  5734. .login-screen.modal-out {
  5735. transform: translate3d(0, 100%, 0);
  5736. }
  5737. .login-screen-content {
  5738. background: var(--f7-login-screen-content-bg-color);
  5739. }
  5740. .login-screen-content .list-button {
  5741. text-align: center;
  5742. color: var(--f7-login-screen-list-button-text-color, var(--f7-theme-color));
  5743. }
  5744. .login-screen-content .login-screen-title,
  5745. .login-screen-content .list,
  5746. .login-screen-content .block {
  5747. margin: var(--f7-login-screen-blocks-margin-vertical) auto;
  5748. }
  5749. .login-screen-content .login-screen-title,
  5750. .login-screen-content .list,
  5751. .login-screen-content .block,
  5752. .login-screen-content .block-footer,
  5753. .login-screen-content .block-header {
  5754. max-width: var(--f7-login-screen-blocks-max-width);
  5755. }
  5756. .login-screen-content .list ul {
  5757. background: none;
  5758. }
  5759. .login-screen-content .list ul:before {
  5760. display: none !important;
  5761. }
  5762. .login-screen-content .list ul:after {
  5763. display: none !important;
  5764. }
  5765. .login-screen-content .block-footer,
  5766. .login-screen-content .block-header {
  5767. text-align: center;
  5768. margin-left: auto;
  5769. margin-right: auto;
  5770. }
  5771. .login-screen-title {
  5772. text-align: var(--f7-login-screen-title-text-align);
  5773. font-size: var(--f7-login-screen-title-font-size);
  5774. font-weight: var(--f7-login-screen-title-font-weight);
  5775. color: var(--f7-login-screen-title-text-color);
  5776. letter-spacing: var(--f7-login-screen-title-letter-spacing);
  5777. }
  5778. .theme-dark .login-screen-content .list ul,
  5779. .theme-dark .login-screen-content .block-strong {
  5780. background-color: transparent;
  5781. }
  5782. /* === Popover === */
  5783. :root {
  5784. --f7-popover-width: 260px;
  5785. }
  5786. .ios {
  5787. --f7-popover-bg-color: rgba(255, 255, 255, 0.95);
  5788. --f7-popover-border-radius: 13px;
  5789. --f7-popover-box-shadow: none;
  5790. --f7-popover-actions-icon-size: 28px;
  5791. --f7-popover-actions-label-text-color: #8a8a8a;
  5792. }
  5793. .ios .theme-dark,
  5794. .ios.theme-dark {
  5795. --f7-popover-bg-color: rgba(30, 30, 30, 0.95);
  5796. }
  5797. .md {
  5798. --f7-popover-bg-color: #fff;
  5799. --f7-popover-border-radius: 4px;
  5800. --f7-popover-box-shadow: var(--f7-elevation-8);
  5801. --f7-popover-actions-icon-size: 24px;
  5802. --f7-popover-actions-label-text-color: rgba(0, 0, 0, 0.54);
  5803. }
  5804. .md .theme-dark,
  5805. .md.theme-dark {
  5806. --f7-popover-bg-color: #202020;
  5807. --f7-popover-actions-label-text-color: rgba(255, 255, 255, 0.54);
  5808. }
  5809. .aurora {
  5810. --f7-popover-width: 200px;
  5811. --f7-popover-bg-color: #fff;
  5812. --f7-popover-border-radius: 4px;
  5813. --f7-popover-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1), 0 5px 11px 0 rgba(0,0,0,0.28);
  5814. --f7-popover-actions-icon-size: 24px;
  5815. --f7-popover-actions-label-text-color: rgba(0, 0, 0, 0.6);
  5816. }
  5817. .aurora .theme-dark,
  5818. .aurora.theme-dark {
  5819. --f7-popover-bg-color: #202020;
  5820. --f7-popover-actions-label-text-color: rgba(255, 255, 255, 0.6);
  5821. }
  5822. .popover {
  5823. width: var(--f7-popover-width);
  5824. z-index: 13500;
  5825. margin: 0;
  5826. top: 0;
  5827. opacity: 0;
  5828. left: 0;
  5829. position: absolute;
  5830. display: none;
  5831. transition-duration: 300ms;
  5832. background-color: var(--f7-popover-bg-color);
  5833. border-radius: var(--f7-popover-border-radius);
  5834. box-shadow: var(--f7-popover-box-shadow);
  5835. will-change: transform, opacity;
  5836. }
  5837. .popover .list {
  5838. margin: 0;
  5839. }
  5840. .popover .list ul {
  5841. background: none;
  5842. }
  5843. .popover .list:first-child ul:before {
  5844. display: none !important;
  5845. }
  5846. .popover .list:last-child ul:after {
  5847. display: none !important;
  5848. }
  5849. .popover .list:first-child ul {
  5850. border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0;
  5851. }
  5852. .popover .list:first-child li:first-child,
  5853. .popover .list:first-child li:first-child a,
  5854. .popover .list:first-child li:first-child > label {
  5855. border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0;
  5856. }
  5857. .popover .list:last-child ul {
  5858. border-radius: 0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius);
  5859. }
  5860. .popover .list:last-child li:last-child,
  5861. .popover .list:last-child li:last-child a,
  5862. .popover .list:last-child li:last-child > label {
  5863. border-radius: 0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius);
  5864. }
  5865. .popover .list:first-child:last-child li:first-child:last-child,
  5866. .popover .list:first-child:last-child li:first-child:last-child a,
  5867. .popover .list:first-child:last-child li:first-child:last-child > label,
  5868. .popover .list:first-child:last-child ul {
  5869. border-radius: var(--f7-popover-border-radius);
  5870. }
  5871. .popover .list + .list {
  5872. margin-top: var(--f7-list-margin-vertical);
  5873. }
  5874. .popover.modal-in {
  5875. opacity: 1;
  5876. }
  5877. .popover.not-animated {
  5878. transition-duration: 0ms;
  5879. }
  5880. .popover-inner {
  5881. will-change: scroll-position;
  5882. overflow: auto;
  5883. -webkit-overflow-scrolling: touch;
  5884. }
  5885. .popover-from-actions .item-link i.icon {
  5886. width: var(--f7-popover-actions-icon-size);
  5887. height: var(--f7-popover-actions-icon-size);
  5888. font-size: var(--f7-popover-actions-icon-size);
  5889. }
  5890. .popover-from-actions-bold {
  5891. font-weight: 600;
  5892. }
  5893. .popover-from-actions-label {
  5894. line-height: 1.3;
  5895. position: relative;
  5896. display: flex;
  5897. align-items: center;
  5898. padding: var(--f7-actions-label-padding);
  5899. color: var(--f7-popover-actions-label-text-color);
  5900. font-size: var(--f7-actions-label-font-size);
  5901. justify-content: var(--f7-actions-label-justify-content);
  5902. }
  5903. .popover-from-actions-label:after {
  5904. content: '';
  5905. position: absolute;
  5906. background-color: var(--f7-list-item-border-color);
  5907. display: block;
  5908. z-index: 15;
  5909. top: auto;
  5910. right: auto;
  5911. bottom: 0;
  5912. left: 0;
  5913. height: 1px;
  5914. width: 100%;
  5915. transform-origin: 50% 100%;
  5916. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  5917. }
  5918. .popover-from-actions-label:last-child:after {
  5919. display: none !important;
  5920. }
  5921. .ios .popover {
  5922. transform: none;
  5923. transition-property: opacity;
  5924. }
  5925. .ios .popover-angle {
  5926. width: 26px;
  5927. height: 26px;
  5928. position: absolute;
  5929. left: -26px;
  5930. top: 0;
  5931. z-index: 100;
  5932. overflow: hidden;
  5933. }
  5934. .ios .popover-angle:after {
  5935. content: '';
  5936. background: var(--f7-popover-bg-color);
  5937. width: 26px;
  5938. height: 26px;
  5939. position: absolute;
  5940. left: 0;
  5941. top: 0;
  5942. border-radius: 3px;
  5943. transform: rotate(45deg);
  5944. }
  5945. .ios .popover-angle.on-left {
  5946. left: -26px;
  5947. }
  5948. .ios .popover-angle.on-left:after {
  5949. left: 19px;
  5950. top: 0;
  5951. }
  5952. .ios .popover-angle.on-right {
  5953. left: 100%;
  5954. }
  5955. .ios .popover-angle.on-right:after {
  5956. left: -19px;
  5957. top: 0;
  5958. }
  5959. .ios .popover-angle.on-top {
  5960. left: 0;
  5961. top: -26px;
  5962. }
  5963. .ios .popover-angle.on-top:after {
  5964. left: 0;
  5965. top: 19px;
  5966. }
  5967. .ios .popover-angle.on-bottom {
  5968. left: 0;
  5969. top: 100%;
  5970. }
  5971. .ios .popover-angle.on-bottom:after {
  5972. left: 0;
  5973. top: -19px;
  5974. }
  5975. .md .popover {
  5976. transform: scale(0.85, 0.6);
  5977. transition-property: opacity, transform;
  5978. }
  5979. .md .popover.modal-in {
  5980. opacity: 1;
  5981. transform: scale(1);
  5982. }
  5983. .md .popover.modal-out {
  5984. opacity: 0;
  5985. transform: scale(1);
  5986. }
  5987. .md .popover-on-top {
  5988. transform-origin: center bottom;
  5989. }
  5990. .md .popover-on-top.popover-on-right {
  5991. transform-origin: left bottom;
  5992. }
  5993. .md .popover-on-top.popover-on-left {
  5994. transform-origin: right bottom;
  5995. }
  5996. .md .popover-on-middle {
  5997. transform-origin: center center;
  5998. }
  5999. .md .popover-on-middle.popover-on-right {
  6000. transform-origin: left center;
  6001. }
  6002. .md .popover-on-middle.popover-on-left {
  6003. transform-origin: right center;
  6004. }
  6005. .md .popover-on-bottom {
  6006. transform-origin: center top;
  6007. }
  6008. .md .popover-on-bottom.popover-on-right {
  6009. transform-origin: left top;
  6010. }
  6011. .md .popover-on-bottom.popover-on-left {
  6012. transform-origin: right top;
  6013. }
  6014. .aurora .popover {
  6015. transform: none;
  6016. transition-property: opacity;
  6017. }
  6018. .aurora .popover-angle {
  6019. width: 18px;
  6020. height: 18px;
  6021. position: absolute;
  6022. left: -18px;
  6023. top: 0;
  6024. z-index: 100;
  6025. overflow: hidden;
  6026. }
  6027. .aurora .popover-angle:after {
  6028. content: '';
  6029. background: var(--f7-popover-bg-color);
  6030. width: 18px;
  6031. height: 18px;
  6032. position: absolute;
  6033. left: 0;
  6034. top: 0;
  6035. border-radius: 2px;
  6036. transform: rotate(45deg);
  6037. }
  6038. .aurora .popover-angle.on-left {
  6039. left: -18px;
  6040. }
  6041. .aurora .popover-angle.on-left:after {
  6042. left: 13px;
  6043. top: 0;
  6044. }
  6045. .aurora .popover-angle.on-right {
  6046. left: 100%;
  6047. }
  6048. .aurora .popover-angle.on-right:after {
  6049. left: -13px;
  6050. top: 0;
  6051. }
  6052. .aurora .popover-angle.on-top {
  6053. left: 0;
  6054. top: -18px;
  6055. }
  6056. .aurora .popover-angle.on-top:after {
  6057. left: 0;
  6058. top: 13px;
  6059. }
  6060. .aurora .popover-angle.on-bottom {
  6061. left: 0;
  6062. top: 100%;
  6063. }
  6064. .aurora .popover-angle.on-bottom:after {
  6065. left: 0;
  6066. top: -13px;
  6067. }
  6068. /* === Actions === */
  6069. :root {
  6070. --f7-actions-grid-button-font-size: 12px;
  6071. --f7-actions-grid-button-text-color: #757575;
  6072. }
  6073. .ios {
  6074. --f7-actions-bg-color: rgba(255, 255, 255, 0.95);
  6075. --f7-actions-border-radius: 13px;
  6076. --f7-actions-button-border-color: rgba(0, 0, 0, 0.2);
  6077. /*
  6078. --f7-actions-button-text-color: var(--f7-theme-color);
  6079. */
  6080. --f7-actions-button-pressed-bg-color: rgba(230, 230, 230, 0.9);
  6081. --f7-actions-button-padding: 0px;
  6082. --f7-actions-button-text-align: center;
  6083. --f7-actions-button-height: 57px;
  6084. --f7-actions-button-height-landscape: 44px;
  6085. --f7-actions-button-font-size: 20px;
  6086. --f7-actions-button-icon-size: 28px;
  6087. --f7-actions-button-justify-content: center;
  6088. --f7-actions-label-padding: 8px 10px;
  6089. --f7-actions-label-text-color: #8a8a8a;
  6090. --f7-actions-label-font-size: 13px;
  6091. --f7-actions-label-justify-content: center;
  6092. --f7-actions-group-border-color: transparent;
  6093. --f7-actions-group-margin: 8px;
  6094. --f7-actions-grid-button-icon-size: 48px;
  6095. }
  6096. .md {
  6097. --f7-actions-bg-color: #fff;
  6098. --f7-actions-border-radius: 0px;
  6099. --f7-actions-button-border-color: transparent;
  6100. --f7-actions-button-text-color: rgba(0, 0, 0, 0.87);
  6101. --f7-actions-button-pressed-bg-color: #e5e5e5;
  6102. --f7-actions-button-padding: 0 16px;
  6103. --f7-actions-button-text-align: left;
  6104. --f7-actions-button-height: 48px;
  6105. --f7-actions-button-height-landscape: 48px;
  6106. --f7-actions-button-font-size: 16px;
  6107. --f7-actions-button-icon-size: 24px;
  6108. --f7-actions-button-justify-content: space-between;
  6109. --f7-actions-label-padding: 12px 16px;
  6110. --f7-actions-label-text-color: rgba(0, 0, 0, 0.54);
  6111. --f7-actions-label-font-size: 16px;
  6112. --f7-actions-label-justify-content: flex-start;
  6113. --f7-actions-group-border-color: #d2d2d6;
  6114. --f7-actions-group-margin: 0px;
  6115. --f7-actions-grid-button-icon-size: 48px;
  6116. }
  6117. .aurora {
  6118. --f7-actions-bg-color: #fff;
  6119. --f7-actions-border-radius: 4px;
  6120. --f7-actions-button-border-color: rgba(0, 0, 0, 0.12);
  6121. /*
  6122. --f7-actions-button-text-color: var(--f7-theme-color);
  6123. */
  6124. --f7-actions-button-pressed-bg-color: #e5e5e5;
  6125. --f7-actions-button-padding: 0 15px;
  6126. --f7-actions-button-text-align: center;
  6127. --f7-actions-button-height: 32px;
  6128. --f7-actions-button-height-landscape: 32px;
  6129. --f7-actions-button-font-size: 14px;
  6130. --f7-actions-button-icon-size: 18px;
  6131. --f7-actions-button-justify-content: space-between;
  6132. --f7-actions-label-padding: 10px 15px;
  6133. --f7-actions-label-text-color: rgba(0, 0, 0, 0.5);
  6134. --f7-actions-label-font-size: 12px;
  6135. --f7-actions-label-justify-content: center;
  6136. --f7-actions-group-border-color: rgba(0, 0, 0, 0.1);
  6137. --f7-actions-group-margin: 15px;
  6138. --f7-actions-grid-button-icon-size: 32px;
  6139. }
  6140. .actions-modal {
  6141. position: absolute;
  6142. left: 0;
  6143. bottom: 0;
  6144. z-index: 13500;
  6145. width: 100%;
  6146. transform: translate3d(0, 100%, 0);
  6147. display: none;
  6148. max-height: 100%;
  6149. will-change: scroll-position;
  6150. overflow: auto;
  6151. -webkit-overflow-scrolling: touch;
  6152. transition-property: transform;
  6153. will-change: transform;
  6154. }
  6155. .actions-modal.modal-in,
  6156. .actions-modal.modal-out {
  6157. transition-duration: 300ms;
  6158. }
  6159. .actions-modal.not-animated {
  6160. transition-duration: 0ms;
  6161. }
  6162. .actions-modal.modal-in {
  6163. transform: translate3d(0, calc(-1 * var(--f7-safe-area-bottom)), 0);
  6164. }
  6165. .actions-modal.modal-out {
  6166. z-index: 13499;
  6167. transform: translate3d(0, 100%, 0);
  6168. }
  6169. @media (min-width: 496px) {
  6170. .actions-modal {
  6171. width: 480px;
  6172. left: 50%;
  6173. margin-left: -240px;
  6174. }
  6175. }
  6176. @media (orientation: landscape) {
  6177. .actions-modal {
  6178. --f7-actions-button-height: var(--f7-actions-button-height-landscape);
  6179. }
  6180. }
  6181. .actions-group {
  6182. overflow: hidden;
  6183. position: relative;
  6184. margin: var(--f7-actions-group-margin);
  6185. border-radius: var(--f7-actions-border-radius);
  6186. transform: translate3d(0, 0, 0);
  6187. }
  6188. .actions-group:after {
  6189. content: '';
  6190. position: absolute;
  6191. background-color: var(--f7-actions-group-border-color);
  6192. display: block;
  6193. z-index: 15;
  6194. top: auto;
  6195. right: auto;
  6196. bottom: 0;
  6197. left: 0;
  6198. height: 1px;
  6199. width: 100%;
  6200. transform-origin: 50% 100%;
  6201. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  6202. }
  6203. .actions-group:last-child:after {
  6204. display: none !important;
  6205. }
  6206. .actions-button,
  6207. .actions-label {
  6208. width: 100%;
  6209. font-weight: normal;
  6210. margin: 0;
  6211. box-sizing: border-box;
  6212. display: block;
  6213. position: relative;
  6214. overflow: hidden;
  6215. text-align: var(--f7-actions-button-text-align);
  6216. background: var(--f7-actions-bg-color);
  6217. }
  6218. .actions-button:after,
  6219. .actions-label:after {
  6220. content: '';
  6221. position: absolute;
  6222. background-color: var(--f7-actions-button-border-color);
  6223. display: block;
  6224. z-index: 15;
  6225. top: auto;
  6226. right: auto;
  6227. bottom: 0;
  6228. left: 0;
  6229. height: 1px;
  6230. width: 100%;
  6231. transform-origin: 50% 100%;
  6232. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  6233. }
  6234. .actions-button:first-child,
  6235. .actions-label:first-child {
  6236. border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;
  6237. }
  6238. .actions-button:last-child,
  6239. .actions-label:last-child {
  6240. border-radius: 0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius);
  6241. }
  6242. .actions-button:last-child:after,
  6243. .actions-label:last-child:after {
  6244. display: none !important;
  6245. }
  6246. .actions-button:first-child:last-child,
  6247. .actions-label:first-child:last-child {
  6248. border-radius: var(--f7-actions-border-radius);
  6249. }
  6250. .actions-button a,
  6251. .actions-label a {
  6252. text-decoration: none;
  6253. color: inherit;
  6254. display: block;
  6255. }
  6256. .actions-button b,
  6257. .actions-label b,
  6258. .actions-button.actions-button-bold,
  6259. .actions-label.actions-button-bold {
  6260. font-weight: 600;
  6261. }
  6262. .actions-button {
  6263. cursor: pointer;
  6264. display: flex;
  6265. color: var(--f7-actions-button-text-color, var(--f7-theme-color));
  6266. font-size: var(--f7-actions-button-font-size);
  6267. height: var(--f7-actions-button-height);
  6268. line-height: var(--f7-actions-button-height);
  6269. padding: var(--f7-actions-button-padding);
  6270. justify-content: var(--f7-actions-button-justify-content);
  6271. z-index: 10;
  6272. }
  6273. .actions-button.active-state {
  6274. background-color: var(--f7-actions-button-pressed-bg-color) !important;
  6275. }
  6276. .actions-button[class*="color-"] {
  6277. color: var(--f7-theme-color);
  6278. }
  6279. .actions-button-media {
  6280. flex-shrink: 0;
  6281. display: flex;
  6282. align-items: center;
  6283. }
  6284. .actions-button-media i.icon {
  6285. width: var(--f7-actions-button-icon-size);
  6286. height: var(--f7-actions-button-icon-size);
  6287. font-size: var(--f7-actions-button-icon-size);
  6288. }
  6289. .actions-button a,
  6290. .actions-button-text {
  6291. position: relative;
  6292. overflow: hidden;
  6293. white-space: nowrap;
  6294. text-overflow: ellipsis;
  6295. }
  6296. .actions-button-text {
  6297. width: 100%;
  6298. flex-shrink: 1;
  6299. text-align: var(--f7-actions-button-text-align);
  6300. }
  6301. .actions-label {
  6302. line-height: 1.3;
  6303. display: flex;
  6304. align-items: center;
  6305. font-size: var(--f7-actions-label-font-size);
  6306. color: var(--f7-actions-label-text-color);
  6307. padding: var(--f7-actions-label-padding);
  6308. justify-content: var(--f7-actions-label-justify-content);
  6309. min-height: var(--f7-actions-label-min-height, var(--f7-actions-button-height));
  6310. }
  6311. .actions-label[class*=" color-"] {
  6312. --f7-actions-label-text-color: var(--f7-theme-color);
  6313. }
  6314. .actions-grid .actions-group {
  6315. display: flex;
  6316. flex-wrap: wrap;
  6317. justify-content: flex-start;
  6318. border-radius: 0;
  6319. background: var(--f7-actions-bg-color);
  6320. margin-top: 0;
  6321. }
  6322. .actions-grid .actions-group:first-child {
  6323. border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;
  6324. }
  6325. .actions-grid .actions-group:last-child {
  6326. border-radius: 0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius);
  6327. }
  6328. .actions-grid .actions-group:first-child:last-child {
  6329. border-radius: var(--f7-actions-border-radius);
  6330. }
  6331. .actions-grid .actions-group:not(:last-child) {
  6332. margin-bottom: 0;
  6333. }
  6334. .actions-grid .actions-button,
  6335. .actions-grid .actions-label {
  6336. border-radius: 0 !important;
  6337. background: none;
  6338. }
  6339. .actions-grid .actions-button {
  6340. width: 33.33333333%;
  6341. display: block;
  6342. color: var(--f7-actions-grid-button-text-color);
  6343. height: auto;
  6344. line-height: 1;
  6345. padding: 16px;
  6346. }
  6347. .actions-grid .actions-button:after {
  6348. display: none !important;
  6349. }
  6350. .actions-grid .actions-button-media {
  6351. margin-left: auto !important;
  6352. margin-right: auto !important;
  6353. width: var(--f7-actions-grid-button-icon-size);
  6354. height: var(--f7-actions-grid-button-icon-size);
  6355. }
  6356. .actions-grid .actions-button-media i.icon {
  6357. width: var(--f7-actions-grid-button-icon-size);
  6358. height: var(--f7-actions-grid-button-icon-size);
  6359. font-size: var(--f7-actions-grid-button-icon-size);
  6360. }
  6361. .actions-grid .actions-button-text {
  6362. margin-left: 0 !important;
  6363. text-align: center !important;
  6364. margin-top: 8px;
  6365. line-height: 1.33em;
  6366. height: 1.33em;
  6367. font-size: var(--f7-actions-grid-button-font-size);
  6368. }
  6369. .ios .actions-button-media {
  6370. margin-left: 15px;
  6371. }
  6372. .ios .actions-button-media + .actions-button-text {
  6373. text-align: left;
  6374. margin-left: 15px;
  6375. }
  6376. .md .actions-button {
  6377. transition-duration: 300ms;
  6378. }
  6379. .md .actions-button-media {
  6380. min-width: 40px;
  6381. }
  6382. .md .actions-button-media + .actions-button-text {
  6383. margin-left: 16px;
  6384. }
  6385. .aurora .actions-button-media {
  6386. margin-left: 15px;
  6387. }
  6388. .aurora .actions-button-media + .actions-button-text {
  6389. text-align: left;
  6390. margin-left: 15px;
  6391. }
  6392. /* === Sheet Modal === */
  6393. :root {
  6394. --f7-sheet-height: 260px;
  6395. }
  6396. .ios {
  6397. --f7-sheet-bg-color: #cfd5da;
  6398. --f7-sheet-border-color: #929499;
  6399. }
  6400. .ios .theme-dark,
  6401. .ios.theme-dark {
  6402. --f7-sheet-bg-color: #171717;
  6403. --f7-sheet-border-color: var(--f7-bars-border-color);
  6404. }
  6405. .md {
  6406. --f7-sheet-bg-color: #fff;
  6407. --f7-sheet-border-color: transparent;
  6408. }
  6409. .md .theme-dark,
  6410. .md.theme-dark {
  6411. --f7-sheet-bg-color: #202020;
  6412. --f7-sheet-border-color: transparent;
  6413. }
  6414. .aurora {
  6415. --f7-sheet-bg-color: #fff;
  6416. --f7-sheet-border-color: transparent;
  6417. }
  6418. .aurora .theme-dark,
  6419. .aurora.theme-dark {
  6420. --f7-sheet-bg-color: #202020;
  6421. --f7-sheet-border-color: transparent;
  6422. }
  6423. .sheet-backdrop {
  6424. z-index: 11000;
  6425. }
  6426. .sheet-modal {
  6427. position: absolute;
  6428. left: 0;
  6429. bottom: 0;
  6430. width: 100%;
  6431. height: var(--f7-sheet-height);
  6432. display: none;
  6433. box-sizing: border-box;
  6434. transition-property: transform;
  6435. transform: translate3d(0, 100%, 0);
  6436. background: var(--f7-sheet-bg-color);
  6437. z-index: 12500;
  6438. will-change: transform;
  6439. }
  6440. .sheet-modal.modal-in,
  6441. .sheet-modal.modal-out {
  6442. transition-duration: 300ms;
  6443. }
  6444. .sheet-modal.not-animated {
  6445. transition-duration: 0ms;
  6446. }
  6447. .sheet-modal.modal-in {
  6448. display: block;
  6449. transform: translate3d(0, 0, 0);
  6450. }
  6451. .sheet-modal.modal-in-swipe-step {
  6452. display: block;
  6453. transform: translate3d(0, var(--f7-sheet-swipe-step, 0), 0);
  6454. }
  6455. .sheet-modal.modal-out {
  6456. transform: translate3d(0, 100%, 0);
  6457. }
  6458. .sheet-modal .sheet-modal-inner {
  6459. height: 100%;
  6460. position: relative;
  6461. overflow: hidden;
  6462. }
  6463. .sheet-modal .toolbar {
  6464. position: relative;
  6465. width: 100%;
  6466. }
  6467. .sheet-modal .toolbar:after,
  6468. .sheet-modal .toolbar:before {
  6469. display: none;
  6470. }
  6471. .sheet-modal .toolbar ~ * .page-content {
  6472. padding-top: 0;
  6473. padding-bottom: 0;
  6474. }
  6475. .sheet-modal .toolbar + .sheet-modal-inner {
  6476. height: calc(100% - var(--f7-toolbar-height));
  6477. }
  6478. .sheet-modal .toolbar ~ .sheet-modal-inner .page-content {
  6479. padding-bottom: 0;
  6480. padding-top: 0;
  6481. }
  6482. .sheet-modal-top:after {
  6483. content: '';
  6484. position: absolute;
  6485. background-color: var(--f7-sheet-border-color);
  6486. display: block;
  6487. z-index: 15;
  6488. top: auto;
  6489. right: auto;
  6490. bottom: 0;
  6491. left: 0;
  6492. height: 1px;
  6493. width: 100%;
  6494. transform-origin: 50% 100%;
  6495. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  6496. }
  6497. .sheet-modal-top:after {
  6498. z-index: 600;
  6499. -webkit-backface-visibility: hidden;
  6500. backface-visibility: hidden;
  6501. transform-style: preserve-3d;
  6502. }
  6503. .sheet-modal-bottom:before,
  6504. .sheet-modal:not(.sheet-modal-top):before {
  6505. content: '';
  6506. position: absolute;
  6507. background-color: var(--f7-sheet-border-color);
  6508. display: block;
  6509. z-index: 15;
  6510. top: 0;
  6511. right: auto;
  6512. bottom: auto;
  6513. left: 0;
  6514. height: 1px;
  6515. width: 100%;
  6516. transform-origin: 50% 0%;
  6517. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  6518. }
  6519. .sheet-modal-bottom:before,
  6520. .sheet-modal:not(.sheet-modal-top):before {
  6521. z-index: 600;
  6522. -webkit-backface-visibility: hidden;
  6523. backface-visibility: hidden;
  6524. transform-style: preserve-3d;
  6525. }
  6526. .sheet-modal-bottom .toolbar ~ .sheet-modal-inner .page-content,
  6527. .sheet-modal:not(.sheet-modal-top) .toolbar ~ .sheet-modal-inner .page-content,
  6528. .sheet-modal-bottom .sheet-modal-inner > .page-content,
  6529. .sheet-modal:not(.sheet-modal-top) .sheet-modal-inner > .page-content {
  6530. padding-bottom: var(--f7-safe-area-bottom);
  6531. }
  6532. .sheet-modal-top {
  6533. bottom: auto;
  6534. top: var(--f7-statusbar-height);
  6535. transform: translate3d(0, calc(-100% - var(--f7-statusbar-height)), 0);
  6536. }
  6537. .sheet-modal-top.modal-out {
  6538. transform: translate3d(0, calc(-100% - var(--f7-statusbar-height)), 0);
  6539. }
  6540. .sheet-modal-top .toolbar-bottom {
  6541. position: absolute;
  6542. }
  6543. .sheet-modal-top .toolbar-top ~ .sheet-modal-inner .page-content {
  6544. padding-top: 0;
  6545. }
  6546. .md .sheet-modal .toolbar a.link:not(.tab-link) {
  6547. flex-shrink: 0;
  6548. }
  6549. /* === Toast === */
  6550. :root {
  6551. --f7-toast-text-color: #fff;
  6552. --f7-toast-font-size: 14px;
  6553. --f7-toast-icon-size: 48px;
  6554. }
  6555. .ios {
  6556. --f7-toast-bg-color: rgba(0, 0, 0, 0.75);
  6557. --f7-toast-translucent-bg-color-ios: rgba(0, 0, 0, 0.75);
  6558. --f7-toast-padding-horizontal: 15px;
  6559. --f7-toast-padding-vertical: 12px;
  6560. --f7-toast-border-radius: 8px;
  6561. --f7-toast-button-min-width: 64px;
  6562. }
  6563. .md {
  6564. --f7-toast-bg-color: #323232;
  6565. --f7-toast-padding-horizontal: 24px;
  6566. --f7-toast-padding-vertical: 14px;
  6567. --f7-toast-border-radius: 4px;
  6568. --f7-toast-button-min-width: 64px;
  6569. }
  6570. .aurora {
  6571. --f7-toast-bg-color: rgba(0, 0, 0, 0.85);
  6572. --f7-toast-padding-horizontal: 10px;
  6573. --f7-toast-padding-vertical: 10px;
  6574. --f7-toast-border-radius: 4px;
  6575. --f7-toast-button-min-width: 32px;
  6576. }
  6577. .toast {
  6578. transition-property: transform, opacity;
  6579. position: absolute;
  6580. max-width: 568px;
  6581. z-index: 20000;
  6582. color: var(--f7-toast-text-color);
  6583. font-size: var(--f7-toast-font-size);
  6584. box-sizing: border-box;
  6585. background-color: var(--f7-toast-bg-color);
  6586. opacity: 0;
  6587. --f7-touch-ripple-color: var(--f7-touch-ripple-white);
  6588. }
  6589. .toast.modal-in {
  6590. opacity: 1;
  6591. }
  6592. .toast .toast-content {
  6593. display: flex;
  6594. justify-content: space-between;
  6595. align-items: center;
  6596. box-sizing: border-box;
  6597. padding: var(--f7-toast-padding-vertical) var(--f7-toast-padding-horizontal);
  6598. }
  6599. .toast .toast-text {
  6600. line-height: 20px;
  6601. flex-shrink: 1;
  6602. min-width: 0;
  6603. }
  6604. .toast .toast-button {
  6605. flex-shrink: 0;
  6606. min-width: var(--f7-toast-button-min-width);
  6607. margin-top: -8px;
  6608. margin-bottom: -8px;
  6609. }
  6610. .toast.toast-with-icon .toast-content {
  6611. display: block;
  6612. text-align: center;
  6613. }
  6614. .toast.toast-with-icon .toast-text {
  6615. text-align: center;
  6616. }
  6617. .toast.toast-with-icon .toast-icon .f7-icons,
  6618. .toast.toast-with-icon .toast-icon .material-icons {
  6619. font-size: var(--f7-toast-icon-size);
  6620. width: var(--f7-toast-icon-size);
  6621. height: var(--f7-toast-icon-size);
  6622. }
  6623. .toast.toast-center {
  6624. top: 50%;
  6625. }
  6626. .toast.toast-top {
  6627. margin-top: var(--f7-statusbar-height);
  6628. }
  6629. .ios .toast {
  6630. transition-duration: 300ms;
  6631. width: 100%;
  6632. left: 0;
  6633. }
  6634. @supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  6635. .ios .toast {
  6636. background: var(--f7-toast-translucent-bg-color-ios);
  6637. -webkit-backdrop-filter: blur(10px);
  6638. backdrop-filter: blur(10px);
  6639. }
  6640. }
  6641. .ios .toast.toast-top {
  6642. top: 0;
  6643. transform: translate3d(0, -100%, 0);
  6644. }
  6645. .ios .toast.toast-top.modal-in {
  6646. transform: translate3d(0, 0%, 0);
  6647. }
  6648. .ios .toast.toast-center {
  6649. width: auto;
  6650. left: 50%;
  6651. border-radius: var(--f7-toast-border-radius);
  6652. transform: translate3d(-50%, -50%, 0);
  6653. }
  6654. .ios .toast.toast-center.modal-in {
  6655. transform: translate3d(-50%, -50%, 0);
  6656. }
  6657. .ios .toast.toast-bottom {
  6658. bottom: 0;
  6659. transform: translate3d(0, 100%, 0);
  6660. }
  6661. .ios .toast.toast-bottom.modal-in {
  6662. transform: translate3d(0, 0%, 0);
  6663. }
  6664. @media (max-width: 568px) {
  6665. .ios .toast.toast-bottom .toast-content {
  6666. padding-bottom: calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-bottom));
  6667. }
  6668. }
  6669. @media (min-width: 569px) {
  6670. .ios .toast {
  6671. left: 50%;
  6672. margin-left: -284px;
  6673. border-radius: var(--f7-toast-border-radius);
  6674. }
  6675. .ios .toast.toast-top {
  6676. top: 15px;
  6677. }
  6678. .ios .toast.toast-center {
  6679. margin-left: 0;
  6680. }
  6681. .ios .toast.toast-bottom {
  6682. margin-bottom: calc(15px + var(--f7-safe-area-bottom));
  6683. }
  6684. }
  6685. @media (min-width: 1024px) {
  6686. .ios .toast {
  6687. margin-left: 0;
  6688. width: auto;
  6689. }
  6690. .ios .toast.toast-bottom,
  6691. .ios .toast.toast-top {
  6692. left: 15px;
  6693. }
  6694. }
  6695. .ios .toast-button {
  6696. margin-left: 15px;
  6697. margin-right: calc(-1 * var(--f7-button-padding-horizontal));
  6698. }
  6699. .md .toast {
  6700. transition-duration: 200ms;
  6701. border-radius: var(--f7-toast-border-radius);
  6702. left: 8px;
  6703. width: calc(100% - 16px);
  6704. transform: scale(0.9);
  6705. }
  6706. .md .toast.modal-in {
  6707. transform: scale(1);
  6708. }
  6709. .md .toast.modal-out {
  6710. transform: scale(1);
  6711. }
  6712. .md .toast.toast-top {
  6713. top: 8px;
  6714. }
  6715. .md .toast.toast-center {
  6716. left: 50%;
  6717. width: auto;
  6718. transform: scale(0.9) translate3d(-55%, -55%, 0);
  6719. }
  6720. .md .toast.toast-center.modal-in {
  6721. transform: scale(1) translate3d(-50%, -50%, 0);
  6722. }
  6723. .md .toast.toast-center.modal-out {
  6724. transform: scale(1) translate3d(-50%, -50%, 0);
  6725. }
  6726. .md .toast.toast-bottom {
  6727. bottom: calc(8px + var(--f7-safe-area-bottom));
  6728. }
  6729. @media (min-width: 584px) {
  6730. .md .toast {
  6731. left: 50%;
  6732. margin-left: -284px;
  6733. }
  6734. .md .toast.toast-center {
  6735. margin-left: 0;
  6736. }
  6737. }
  6738. @media (min-width: 1024px) {
  6739. .md .toast {
  6740. margin-left: 0;
  6741. width: auto;
  6742. }
  6743. .md .toast.toast-bottom,
  6744. .md .toast.toast-top {
  6745. left: 24px;
  6746. }
  6747. .md .toast.toast-bottom {
  6748. bottom: calc(24px + var(--f7-safe-area-bottom));
  6749. }
  6750. .md .toast.toast-top {
  6751. top: 24px;
  6752. }
  6753. }
  6754. .md .toast-button {
  6755. margin-left: 16px;
  6756. margin-right: -8px;
  6757. }
  6758. .aurora .toast {
  6759. transition-duration: 200ms;
  6760. border-radius: var(--f7-toast-border-radius);
  6761. left: 10px;
  6762. width: calc(100% - 20px);
  6763. transform: scale(0.9);
  6764. }
  6765. .aurora .toast.modal-in {
  6766. transform: scale(1);
  6767. }
  6768. .aurora .toast.modal-out {
  6769. transform: scale(1);
  6770. }
  6771. .aurora .toast.toast-top {
  6772. top: 10px;
  6773. }
  6774. .aurora .toast.toast-center {
  6775. left: 50%;
  6776. width: auto;
  6777. transform: scale(0.9) translate3d(-55%, -55%, 0);
  6778. }
  6779. .aurora .toast.toast-center.modal-in {
  6780. transform: scale(1) translate3d(-50%, -50%, 0);
  6781. }
  6782. .aurora .toast.toast-center.modal-out {
  6783. transform: scale(1) translate3d(-50%, -50%, 0);
  6784. }
  6785. .aurora .toast.toast-bottom {
  6786. bottom: calc(10px + var(--f7-safe-area-bottom));
  6787. }
  6788. @media (min-width: 584px) {
  6789. .aurora .toast {
  6790. left: 50%;
  6791. margin-left: -284px;
  6792. }
  6793. .aurora .toast.toast-center {
  6794. margin-left: 0;
  6795. }
  6796. }
  6797. @media (min-width: 1024px) {
  6798. .aurora .toast {
  6799. margin-left: 0;
  6800. width: auto;
  6801. }
  6802. .aurora .toast.toast-bottom,
  6803. .aurora .toast.toast-top {
  6804. left: 10px;
  6805. }
  6806. }
  6807. .aurora .toast-button {
  6808. margin-left: 10px;
  6809. }
  6810. /* === Preloader === */
  6811. :root {
  6812. --f7-preloader-modal-padding: 8px;
  6813. --f7-preloader-modal-bg-color: rgba(0, 0, 0, 0.8);
  6814. }
  6815. .ios {
  6816. --f7-preloader-color: #6c6c6c;
  6817. --f7-preloader-size: 20px;
  6818. --f7-preloader-modal-preloader-size: 34px;
  6819. --f7-preloader-modal-border-radius: 5px;
  6820. }
  6821. .md {
  6822. --f7-preloader-color: #757575;
  6823. --f7-preloader-size: 32px;
  6824. --f7-preloader-modal-preloader-size: 32px;
  6825. --f7-preloader-modal-border-radius: 4px;
  6826. }
  6827. .aurora {
  6828. --f7-preloader-color: #757575;
  6829. --f7-preloader-size: 24px;
  6830. --f7-preloader-modal-preloader-size: 24px;
  6831. --f7-preloader-modal-border-radius: 4px;
  6832. }
  6833. .preloader {
  6834. display: inline-block;
  6835. vertical-align: middle;
  6836. width: var(--f7-preloader-size);
  6837. height: var(--f7-preloader-size);
  6838. font-size: 0;
  6839. position: relative;
  6840. }
  6841. /* === Preloader Modal === */
  6842. .preloader-backdrop {
  6843. visibility: visible;
  6844. opacity: 0;
  6845. background: none;
  6846. z-index: 14000;
  6847. }
  6848. .preloader-modal {
  6849. position: absolute;
  6850. left: 50%;
  6851. top: 50%;
  6852. padding: var(--f7-preloader-modal-padding);
  6853. background: var(--f7-preloader-modal-bg-color);
  6854. z-index: 14500;
  6855. transform: translateX(-50%) translateY(-50%);
  6856. border-radius: var(--f7-preloader-modal-border-radius);
  6857. }
  6858. .preloader-modal .preloader {
  6859. --f7-preloader-size: var(--f7-preloader-modal-preloader-size);
  6860. display: block !important;
  6861. }
  6862. html.with-modal-preloader .page-content {
  6863. overflow: hidden;
  6864. -webkit-overflow-scrolling: auto;
  6865. }
  6866. .preloader[class*="color-"] {
  6867. --f7-preloader-color: var(--f7-theme-color);
  6868. }
  6869. .ios .preloader {
  6870. animation: ios-preloader-spin 1s steps(12, end) infinite;
  6871. }
  6872. .ios .preloader .preloader-inner-line {
  6873. display: block;
  6874. width: 10%;
  6875. height: 25%;
  6876. border-radius: 100px;
  6877. background: var(--f7-preloader-color);
  6878. position: absolute;
  6879. left: 50%;
  6880. top: 50%;
  6881. transform-origin: center 200%;
  6882. }
  6883. .ios .preloader .preloader-inner-line:nth-child(1) {
  6884. transform: translate(-50%, -200%) rotate(0deg);
  6885. opacity: 0.27;
  6886. }
  6887. .ios .preloader .preloader-inner-line:nth-child(2) {
  6888. transform: translate(-50%, -200%) rotate(30deg);
  6889. opacity: 0.32272727;
  6890. }
  6891. .ios .preloader .preloader-inner-line:nth-child(3) {
  6892. transform: translate(-50%, -200%) rotate(60deg);
  6893. opacity: 0.37545455;
  6894. }
  6895. .ios .preloader .preloader-inner-line:nth-child(4) {
  6896. transform: translate(-50%, -200%) rotate(90deg);
  6897. opacity: 0.42818182;
  6898. }
  6899. .ios .preloader .preloader-inner-line:nth-child(5) {
  6900. transform: translate(-50%, -200%) rotate(120deg);
  6901. opacity: 0.48090909;
  6902. }
  6903. .ios .preloader .preloader-inner-line:nth-child(6) {
  6904. transform: translate(-50%, -200%) rotate(150deg);
  6905. opacity: 0.53363636;
  6906. }
  6907. .ios .preloader .preloader-inner-line:nth-child(7) {
  6908. transform: translate(-50%, -200%) rotate(180deg);
  6909. opacity: 0.58636364;
  6910. }
  6911. .ios .preloader .preloader-inner-line:nth-child(8) {
  6912. transform: translate(-50%, -200%) rotate(210deg);
  6913. opacity: 0.63909091;
  6914. }
  6915. .ios .preloader .preloader-inner-line:nth-child(9) {
  6916. transform: translate(-50%, -200%) rotate(240deg);
  6917. opacity: 0.69181818;
  6918. }
  6919. .ios .preloader .preloader-inner-line:nth-child(10) {
  6920. transform: translate(-50%, -200%) rotate(270deg);
  6921. opacity: 0.74454545;
  6922. }
  6923. .ios .preloader .preloader-inner-line:nth-child(11) {
  6924. transform: translate(-50%, -200%) rotate(300deg);
  6925. opacity: 0.79727273;
  6926. }
  6927. .ios .preloader .preloader-inner-line:nth-child(12) {
  6928. transform: translate(-50%, -200%) rotate(330deg);
  6929. opacity: 0.85;
  6930. }
  6931. @keyframes ios-preloader-spin {
  6932. 100% {
  6933. transform: rotate(360deg);
  6934. }
  6935. }
  6936. .md .preloader {
  6937. animation: md-preloader-outer 3300ms linear infinite;
  6938. }
  6939. @keyframes md-preloader-outer {
  6940. 0% {
  6941. transform: rotate(0);
  6942. }
  6943. 100% {
  6944. transform: rotate(360deg);
  6945. }
  6946. }
  6947. .md .preloader-inner {
  6948. position: relative;
  6949. display: block;
  6950. width: 100%;
  6951. height: 100%;
  6952. animation: md-preloader-inner-rotate 5.25s cubic-bezier(0.35, 0, 0.25, 1) infinite;
  6953. }
  6954. .md .preloader-inner .preloader-inner-gap {
  6955. position: absolute;
  6956. width: 2px;
  6957. left: 50%;
  6958. margin-left: -1px;
  6959. top: 0;
  6960. bottom: 0;
  6961. box-sizing: border-box;
  6962. border-top: 4px solid var(--f7-preloader-color);
  6963. }
  6964. .md .preloader-inner .preloader-inner-left,
  6965. .md .preloader-inner .preloader-inner-right {
  6966. position: absolute;
  6967. top: 0;
  6968. height: 100%;
  6969. width: 50%;
  6970. overflow: hidden;
  6971. }
  6972. .md .preloader-inner .preloader-inner-half-circle {
  6973. position: absolute;
  6974. top: 0;
  6975. height: 100%;
  6976. width: 200%;
  6977. box-sizing: border-box;
  6978. border: 4px solid var(--f7-preloader-color);
  6979. border-bottom-color: transparent !important;
  6980. border-radius: 50%;
  6981. animation-iteration-count: infinite;
  6982. animation-duration: 1.3125s;
  6983. animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
  6984. }
  6985. .md .preloader-inner .preloader-inner-left {
  6986. left: 0;
  6987. }
  6988. .md .preloader-inner .preloader-inner-left .preloader-inner-half-circle {
  6989. left: 0;
  6990. border-right-color: transparent !important;
  6991. animation-name: md-preloader-left-rotate;
  6992. }
  6993. .md .preloader-inner .preloader-inner-right {
  6994. right: 0;
  6995. }
  6996. .md .preloader-inner .preloader-inner-right .preloader-inner-half-circle {
  6997. right: 0;
  6998. border-left-color: transparent !important;
  6999. animation-name: md-preloader-right-rotate;
  7000. }
  7001. .md .preloader.color-multi .preloader-inner-left .preloader-inner-half-circle {
  7002. animation-name: md-preloader-left-rotate-multicolor;
  7003. }
  7004. .md .preloader.color-multi .preloader-inner-right .preloader-inner-half-circle {
  7005. animation-name: md-preloader-right-rotate-multicolor;
  7006. }
  7007. @keyframes md-preloader-left-rotate {
  7008. 0%,
  7009. 100% {
  7010. transform: rotate(130deg);
  7011. }
  7012. 50% {
  7013. transform: rotate(-5deg);
  7014. }
  7015. }
  7016. @keyframes md-preloader-right-rotate {
  7017. 0%,
  7018. 100% {
  7019. transform: rotate(-130deg);
  7020. }
  7021. 50% {
  7022. transform: rotate(5deg);
  7023. }
  7024. }
  7025. @keyframes md-preloader-inner-rotate {
  7026. 12.5% {
  7027. transform: rotate(135deg);
  7028. }
  7029. 25% {
  7030. transform: rotate(270deg);
  7031. }
  7032. 37.5% {
  7033. transform: rotate(405deg);
  7034. }
  7035. 50% {
  7036. transform: rotate(540deg);
  7037. }
  7038. 62.5% {
  7039. transform: rotate(675deg);
  7040. }
  7041. 75% {
  7042. transform: rotate(810deg);
  7043. }
  7044. 87.5% {
  7045. transform: rotate(945deg);
  7046. }
  7047. 100% {
  7048. transform: rotate(1080deg);
  7049. }
  7050. }
  7051. @keyframes md-preloader-left-rotate-multicolor {
  7052. 0%,
  7053. 100% {
  7054. border-left-color: #4285F4;
  7055. transform: rotate(130deg);
  7056. }
  7057. 75% {
  7058. border-left-color: #1B9A59;
  7059. border-top-color: #1B9A59;
  7060. }
  7061. 50% {
  7062. border-left-color: #F7C223;
  7063. border-top-color: #F7C223;
  7064. transform: rotate(-5deg);
  7065. }
  7066. 25% {
  7067. border-left-color: #DE3E35;
  7068. border-top-color: #DE3E35;
  7069. }
  7070. }
  7071. @keyframes md-preloader-right-rotate-multicolor {
  7072. 0%,
  7073. 100% {
  7074. border-right-color: #4285F4;
  7075. transform: rotate(-130deg);
  7076. }
  7077. 75% {
  7078. border-right-color: #1B9A59;
  7079. border-top-color: #1B9A59;
  7080. }
  7081. 50% {
  7082. border-right-color: #F7C223;
  7083. border-top-color: #F7C223;
  7084. transform: rotate(5deg);
  7085. }
  7086. 25% {
  7087. border-top-color: #DE3E35;
  7088. border-right-color: #DE3E35;
  7089. }
  7090. }
  7091. .aurora .preloader-inner {
  7092. position: absolute;
  7093. left: 0;
  7094. top: 0;
  7095. width: 100%;
  7096. height: 100%;
  7097. }
  7098. .aurora .preloader-inner-circle {
  7099. width: 100%;
  7100. height: 100%;
  7101. position: absolute;
  7102. left: 0;
  7103. top: 0;
  7104. border-radius: 50%;
  7105. border: calc(var(--f7-preloader-size) / 8) solid var(--f7-preloader-color);
  7106. border-top-color: transparent;
  7107. box-sizing: border-box;
  7108. animation: aurora-preloader-rotate 1s linear infinite;
  7109. }
  7110. .aurora .preloader.color-multi .preloader-inner-circle {
  7111. animation: aurora-preloader-rotate 1s linear infinite, aurora-preloader-multicolor 2s linear infinite;
  7112. }
  7113. @keyframes aurora-preloader-rotate {
  7114. 0% {
  7115. transform: rotate(0deg);
  7116. }
  7117. 100% {
  7118. transform: rotate(360deg);
  7119. }
  7120. }
  7121. @keyframes aurora-preloader-multicolor {
  7122. 0%,
  7123. 100% {
  7124. border-color: #2196f3;
  7125. border-top-color: transparent;
  7126. }
  7127. 25% {
  7128. border-color: #ff3b30;
  7129. border-top-color: transparent;
  7130. }
  7131. 50% {
  7132. border-color: #4cd964;
  7133. border-top-color: transparent;
  7134. }
  7135. 75% {
  7136. border-color: #ff9500;
  7137. border-top-color: transparent;
  7138. }
  7139. }
  7140. /* === Progressbar === */
  7141. :root {
  7142. /*
  7143. --f7-progressbar-progress-color: var(--f7-theme-color);
  7144. */
  7145. }
  7146. .ios {
  7147. --f7-progressbar-bg-color: #b6b6b6;
  7148. --f7-progressbar-height: 2px;
  7149. --f7-progressbar-border-radius: 2px;
  7150. }
  7151. .md {
  7152. /*
  7153. --f7-progressbar-bg-color: rgba(var(--f7-theme-color-rgb), 0.5);
  7154. */
  7155. --f7-progressbar-height: 4px;
  7156. --f7-progressbar-border-radius: 0px;
  7157. }
  7158. .aurora {
  7159. --f7-progressbar-bg-color: #dbdbdb;
  7160. --f7-progressbar-height: 6px;
  7161. --f7-progressbar-border-radius: 3px;
  7162. }
  7163. .aurora .theme-dark,
  7164. .aurora.theme-dark {
  7165. --f7-progressbar-bg-color: #444;
  7166. }
  7167. .progressbar,
  7168. .progressbar-infinite {
  7169. width: 100%;
  7170. overflow: hidden;
  7171. position: relative;
  7172. display: block;
  7173. transform-style: preserve-3d;
  7174. background: var(--f7-progressbar-bg-color, rgba(var(--f7-theme-color-rgb), 0.5));
  7175. transform-origin: center top;
  7176. height: var(--f7-progressbar-height);
  7177. border-radius: var(--f7-progressbar-border-radius);
  7178. }
  7179. .progressbar {
  7180. vertical-align: middle;
  7181. }
  7182. .progressbar span {
  7183. background-color: var(--f7-progressbar-progress-color, var(--f7-theme-color));
  7184. width: 100%;
  7185. height: 100%;
  7186. position: absolute;
  7187. left: 0;
  7188. top: 0;
  7189. transform: translate3d(-100%, 0, 0);
  7190. transition-duration: 150ms;
  7191. }
  7192. .progressbar-infinite {
  7193. z-index: 15000;
  7194. }
  7195. .progressbar-infinite:before,
  7196. .progressbar-infinite:after {
  7197. content: '';
  7198. position: absolute;
  7199. left: 0;
  7200. top: 0;
  7201. width: 100%;
  7202. height: 100%;
  7203. transform-origin: left center;
  7204. transform: translate3d(0, 0, 0);
  7205. display: block;
  7206. background-color: var(--f7-progressbar-progress-color, var(--f7-theme-color));
  7207. }
  7208. .progressbar-infinite.color-multi {
  7209. background: none !important;
  7210. }
  7211. .progressbar-in {
  7212. animation: progressbar-in 150ms forwards;
  7213. }
  7214. .progressbar-out {
  7215. animation: progressbar-out 150ms forwards;
  7216. }
  7217. body > .progressbar,
  7218. .view > .progressbar,
  7219. .views > .progressbar,
  7220. .page > .progressbar,
  7221. .panel > .progressbar,
  7222. .popup > .progressbar,
  7223. .framework7-root > .progressbar,
  7224. body > .progressbar-infinite,
  7225. .view > .progressbar-infinite,
  7226. .views > .progressbar-infinite,
  7227. .page > .progressbar-infinite,
  7228. .panel > .progressbar-infinite,
  7229. .popup > .progressbar-infinite,
  7230. .framework7-root > .progressbar-infinite {
  7231. position: absolute;
  7232. left: 0;
  7233. top: 0;
  7234. z-index: 15000;
  7235. border-radius: 0 !important;
  7236. transform-origin: center top !important;
  7237. }
  7238. body > .progressbar,
  7239. .framework7-root > .progressbar,
  7240. body > .progressbar-infinite,
  7241. .framework7-root > .progressbar-infinite {
  7242. top: var(--f7-statusbar-height);
  7243. }
  7244. @keyframes progressbar-in {
  7245. from {
  7246. opacity: 0;
  7247. transform: scaleY(0);
  7248. }
  7249. to {
  7250. opacity: 1;
  7251. transform: scaleY(1);
  7252. }
  7253. }
  7254. @keyframes progressbar-out {
  7255. from {
  7256. opacity: 1;
  7257. transform: scaleY(1);
  7258. }
  7259. to {
  7260. opacity: 0;
  7261. transform: scaleY(0);
  7262. }
  7263. }
  7264. .ios .progressbar-infinite:before {
  7265. animation: ios-progressbar-infinite 1s linear infinite;
  7266. }
  7267. .ios .progressbar-infinite:after {
  7268. display: none;
  7269. }
  7270. .ios .progressbar-infinite.color-multi:before {
  7271. width: 400%;
  7272. background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55, #5856d6, #34aadc, #007aff, #5ac8fa, #4cd964);
  7273. background-size: 25% 100%;
  7274. background-repeat: repeat-x;
  7275. animation: ios-progressbar-infinite-multicolor 3s linear infinite;
  7276. }
  7277. @keyframes ios-progressbar-infinite {
  7278. 0% {
  7279. transform: translate3d(-100%, 0, 0);
  7280. }
  7281. 100% {
  7282. transform: translate3d(100%, 0, 0);
  7283. }
  7284. }
  7285. @keyframes ios-progressbar-infinite-multicolor {
  7286. 0% {
  7287. transform: translate3d(0%, 0, 0);
  7288. }
  7289. 100% {
  7290. transform: translate3d(-50%, 0, 0);
  7291. }
  7292. }
  7293. .md .progressbar-infinite:before {
  7294. animation: md-progressbar-infinite-1 2s linear infinite;
  7295. }
  7296. .md .progressbar-infinite:after {
  7297. animation: md-progressbar-infinite-2 2s linear infinite;
  7298. }
  7299. .md .progressbar-infinite.color-multi:before {
  7300. background: none;
  7301. animation: md-progressbar-infinite-multicolor-bg 3s step-end infinite;
  7302. }
  7303. .md .progressbar-infinite.color-multi:after {
  7304. background: none;
  7305. animation: md-progressbar-infinite-multicolor-fill 3s linear infinite;
  7306. transform-origin: center center;
  7307. }
  7308. @keyframes md-progressbar-infinite-1 {
  7309. 0% {
  7310. transform: translateX(-10%) scaleX(0.1);
  7311. }
  7312. 25% {
  7313. transform: translateX(30%) scaleX(0.6);
  7314. }
  7315. 50% {
  7316. transform: translateX(100%) scaleX(1);
  7317. }
  7318. 100% {
  7319. transform: translateX(100%) scaleX(1);
  7320. }
  7321. }
  7322. @keyframes md-progressbar-infinite-2 {
  7323. 0% {
  7324. transform: translateX(-100%) scaleX(1);
  7325. }
  7326. 40% {
  7327. transform: translateX(-100%) scaleX(1);
  7328. }
  7329. 75% {
  7330. transform: translateX(60%) scaleX(0.35);
  7331. }
  7332. 90% {
  7333. transform: translateX(100%) scaleX(0.1);
  7334. }
  7335. 100% {
  7336. transform: translateX(100%) scaleX(0.1);
  7337. }
  7338. }
  7339. @keyframes md-progressbar-infinite-multicolor-bg {
  7340. 0% {
  7341. background-color: #4caf50;
  7342. }
  7343. 25% {
  7344. background-color: #f44336;
  7345. }
  7346. 50% {
  7347. background-color: #2196f3;
  7348. }
  7349. 75% {
  7350. background-color: #ffeb3b;
  7351. }
  7352. }
  7353. @keyframes md-progressbar-infinite-multicolor-fill {
  7354. 0% {
  7355. transform: scaleX(0);
  7356. background-color: #f44336;
  7357. }
  7358. 24.9% {
  7359. transform: scaleX(1);
  7360. background-color: #f44336;
  7361. }
  7362. 25% {
  7363. transform: scaleX(0);
  7364. background-color: #2196f3;
  7365. }
  7366. 49.9% {
  7367. transform: scaleX(1);
  7368. background-color: #2196f3;
  7369. }
  7370. 50% {
  7371. transform: scaleX(0);
  7372. background-color: #ffeb3b;
  7373. }
  7374. 74.9% {
  7375. transform: scaleX(1);
  7376. background-color: #ffeb3b;
  7377. }
  7378. 75% {
  7379. transform: scaleX(0);
  7380. background-color: #4caf50;
  7381. }
  7382. 100% {
  7383. transform: scaleX(1);
  7384. background-color: #4caf50;
  7385. }
  7386. }
  7387. .aurora .progressbar,
  7388. .aurora .progressbar-infinite,
  7389. .aurora .progressbar span,
  7390. .aurora .progressbar-infinite:before {
  7391. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset;
  7392. }
  7393. .aurora .progressbar-infinite:before {
  7394. animation: aurora-progressbar-infinite 1s linear infinite;
  7395. }
  7396. .aurora .progressbar-infinite:after {
  7397. display: none;
  7398. }
  7399. .aurora .progressbar-infinite.color-multi:before {
  7400. width: 400%;
  7401. background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55, #5856d6, #34aadc, #007aff, #5ac8fa, #4cd964);
  7402. background-size: 25% 100%;
  7403. background-repeat: repeat-x;
  7404. animation: aurora-progressbar-infinite-multicolor 3s linear infinite;
  7405. }
  7406. @keyframes aurora-progressbar-infinite {
  7407. 0% {
  7408. transform: translate3d(-100%, 0, 0);
  7409. }
  7410. 100% {
  7411. transform: translate3d(100%, 0, 0);
  7412. }
  7413. }
  7414. @keyframes aurora-progressbar-infinite-multicolor {
  7415. 0% {
  7416. transform: translate3d(0%, 0, 0);
  7417. }
  7418. 100% {
  7419. transform: translate3d(-50%, 0, 0);
  7420. }
  7421. }
  7422. /* === Sortable === */
  7423. :root {
  7424. --f7-sortable-handler-color: #c7c7cc;
  7425. --f7-sortable-sorting-item-bg-color: rgba(255, 255, 255, 0.8);
  7426. }
  7427. :root .theme-dark,
  7428. :root.theme-dark {
  7429. --f7-sortable-sorting-item-bg-color: rgba(50, 50, 50, 0.8);
  7430. }
  7431. .ios {
  7432. --f7-sortable-handler-width: 35px;
  7433. --f7-sortable-sorting-item-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.6);
  7434. }
  7435. .md {
  7436. --f7-sortable-handler-width: 42px;
  7437. --f7-sortable-sorting-item-box-shadow: var(--f7-elevation-2);
  7438. }
  7439. .aurora {
  7440. --f7-sortable-handler-width: 32px;
  7441. --f7-sortable-sorting-item-box-shadow: var(--f7-elevation-2);
  7442. }
  7443. .sortable .sortable-handler {
  7444. width: var(--f7-sortable-handler-width);
  7445. height: 100%;
  7446. position: absolute;
  7447. top: 0;
  7448. z-index: 10;
  7449. opacity: 0;
  7450. pointer-events: none;
  7451. cursor: move;
  7452. transition-duration: 300ms;
  7453. display: flex;
  7454. align-items: center;
  7455. justify-content: center;
  7456. overflow: hidden;
  7457. right: var(--f7-safe-area-right);
  7458. }
  7459. .sortable .sortable-handler:after {
  7460. font-family: 'framework7-core-icons';
  7461. font-weight: normal;
  7462. font-style: normal;
  7463. line-height: 1;
  7464. letter-spacing: normal;
  7465. text-transform: none;
  7466. white-space: nowrap;
  7467. word-wrap: normal;
  7468. direction: ltr;
  7469. -webkit-font-smoothing: antialiased;
  7470. text-rendering: optimizeLegibility;
  7471. -moz-osx-font-smoothing: grayscale;
  7472. -moz-font-feature-settings: "liga";
  7473. font-feature-settings: "liga";
  7474. text-align: center;
  7475. display: block;
  7476. width: 100%;
  7477. height: 100%;
  7478. font-size: 20px;
  7479. transition-duration: 300ms;
  7480. transform: translateX(10px);
  7481. color: var(--f7-sortable-handler-color);
  7482. overflow: hidden;
  7483. height: 20px;
  7484. width: 18px;
  7485. }
  7486. .sortable .item-inner {
  7487. transition-duration: 300ms;
  7488. }
  7489. .sortable li.sorting {
  7490. z-index: 50;
  7491. background: var(--f7-sortable-sorting-item-bg-color);
  7492. transition-duration: 0ms;
  7493. box-shadow: var(--f7-sortable-sorting-item-box-shadow);
  7494. }
  7495. .sortable li.sorting .item-inner:after {
  7496. display: none !important;
  7497. }
  7498. .sortable-sorting li {
  7499. transition-duration: 300ms;
  7500. }
  7501. .sortable-enabled li:not(.no-sorting):not(.disallow-sorting) .sortable-handler {
  7502. pointer-events: auto;
  7503. opacity: 1;
  7504. }
  7505. .sortable-enabled li:not(.no-sorting):not(.disallow-sorting) .sortable-handler:after {
  7506. transform: translateX(0px);
  7507. }
  7508. .sortable-enabled li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner,
  7509. .sortable-enabled li:not(.no-sorting):not(.disallow-sorting) .item-link .item-title-row {
  7510. background-image: none !important;
  7511. }
  7512. .list.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) .item-inner,
  7513. .list.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner,
  7514. .list.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) .item-link.no-chevron .item-inner,
  7515. .list.sortable-enabled.no-chevron li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner,
  7516. .list.sortable-enabled .no-chevron .item-link .item-inner,
  7517. .no-chevron .list.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner {
  7518. padding-right: calc(var(--f7-sortable-handler-width) + var(--f7-safe-area-right));
  7519. }
  7520. .ios .sortable-handler:after {
  7521. content: 'sort_ios';
  7522. }
  7523. .md .sortable-handler:after {
  7524. content: 'sort_md';
  7525. }
  7526. .aurora .sortable-handler:after {
  7527. content: 'sort_md';
  7528. font-size: 16px;
  7529. height: 16px;
  7530. }
  7531. /* === Swipeout === */
  7532. :root {
  7533. --f7-swipeout-button-text-color: #fff;
  7534. --f7-swipeout-button-bg-color: #c7c7cc;
  7535. --f7-swipeout-delete-button-bg-color: #ff3b30;
  7536. --f7-swipeout-button-font-size: inherit;
  7537. --f7-swipeout-button-font-weight: inherit;
  7538. }
  7539. .ios {
  7540. --f7-swipeout-button-padding: 0 30px;
  7541. }
  7542. .md {
  7543. --f7-swipeout-button-padding: 0 24px;
  7544. }
  7545. .aurora {
  7546. --f7-swipeout-button-padding: 0 12px;
  7547. --f7-swipeout-button-font-weight: 500;
  7548. }
  7549. .swipeout {
  7550. overflow: hidden;
  7551. transform-style: preserve-3d;
  7552. }
  7553. .swipeout-deleting {
  7554. transition-duration: 300ms;
  7555. }
  7556. .swipeout-deleting .swipeout-content {
  7557. transform: translateX(-100%);
  7558. }
  7559. .swipeout-transitioning .swipeout-content,
  7560. .swipeout-transitioning .swipeout-actions-right a,
  7561. .swipeout-transitioning .swipeout-actions-left a,
  7562. .swipeout-transitioning .swipeout-overswipe {
  7563. transition-duration: 300ms;
  7564. transition-property: transform, left;
  7565. }
  7566. .swipeout-content {
  7567. position: relative;
  7568. z-index: 10;
  7569. }
  7570. .swipeout-overswipe {
  7571. transition-duration: 200ms;
  7572. transition-property: left;
  7573. }
  7574. .swipeout-actions-left,
  7575. .swipeout-actions-right {
  7576. position: absolute;
  7577. top: 0;
  7578. height: 100%;
  7579. display: flex;
  7580. direction: ltr;
  7581. }
  7582. .swipeout-actions-left > a,
  7583. .swipeout-actions-right > a,
  7584. .swipeout-actions-left > button,
  7585. .swipeout-actions-right > button,
  7586. .swipeout-actions-left > span,
  7587. .swipeout-actions-right > span,
  7588. .swipeout-actions-left > div,
  7589. .swipeout-actions-right > div {
  7590. color: var(--f7-swipeout-button-text-color);
  7591. background: var(--f7-swipeout-button-bg-color);
  7592. padding: var(--f7-swipeout-button-padding);
  7593. display: flex;
  7594. align-items: center;
  7595. position: relative;
  7596. left: 0;
  7597. font-size: var(--f7-swipeout-button-font-size);
  7598. font-weight: var(--f7-swipeout-button-font-weight);
  7599. }
  7600. .swipeout-actions-left > a:after,
  7601. .swipeout-actions-right > a:after,
  7602. .swipeout-actions-left > button:after,
  7603. .swipeout-actions-right > button:after,
  7604. .swipeout-actions-left > span:after,
  7605. .swipeout-actions-right > span:after,
  7606. .swipeout-actions-left > div:after,
  7607. .swipeout-actions-right > div:after {
  7608. content: '';
  7609. position: absolute;
  7610. top: 0;
  7611. width: 600%;
  7612. height: 100%;
  7613. background: inherit;
  7614. z-index: -1;
  7615. transform: translate3d(0, 0, 0);
  7616. pointer-events: none;
  7617. }
  7618. .swipeout-actions-left .swipeout-delete,
  7619. .swipeout-actions-right .swipeout-delete {
  7620. background: var(--f7-swipeout-delete-button-bg-color);
  7621. }
  7622. .swipeout-actions-right {
  7623. right: 0%;
  7624. transform: translateX(100%);
  7625. }
  7626. .swipeout-actions-right > a:after,
  7627. .swipeout-actions-right > button:after,
  7628. .swipeout-actions-right > span:after,
  7629. .swipeout-actions-right > div:after {
  7630. left: 100%;
  7631. margin-left: -1px;
  7632. }
  7633. .swipeout-actions-left {
  7634. left: 0%;
  7635. transform: translateX(-100%);
  7636. }
  7637. .swipeout-actions-left > a:after,
  7638. .swipeout-actions-left > button:after,
  7639. .swipeout-actions-left > span:after,
  7640. .swipeout-actions-left > div:after {
  7641. right: 100%;
  7642. margin-right: -1px;
  7643. }
  7644. .swipeout-actions-left [class*="color-"],
  7645. .swipeout-actions-right [class*="color-"] {
  7646. --f7-swipeout-button-bg-color: var(--f7-theme-color);
  7647. }
  7648. /* === Accordion === */
  7649. .accordion-item-toggle {
  7650. cursor: pointer;
  7651. transition-duration: 300ms;
  7652. }
  7653. .accordion-item-toggle.active-state {
  7654. transition-duration: 300ms;
  7655. }
  7656. .accordion-item-toggle.active-state > .item-inner:after {
  7657. background-color: transparent;
  7658. }
  7659. .accordion-item-toggle .item-inner {
  7660. transition-duration: 300ms;
  7661. transition-property: background-color;
  7662. }
  7663. .accordion-item-toggle .item-inner:after {
  7664. transition-duration: 300ms;
  7665. }
  7666. .accordion-item .item-link .item-inner:after {
  7667. transition-duration: 300ms;
  7668. }
  7669. .accordion-item .list,
  7670. .accordion-item .block {
  7671. margin-top: 0;
  7672. margin-bottom: 0;
  7673. }
  7674. .accordion-item .block > h1:first-child,
  7675. .accordion-item .block > h2:first-child,
  7676. .accordion-item .block > h3:first-child,
  7677. .accordion-item .block > h4:first-child,
  7678. .accordion-item .block > p:first-child {
  7679. margin-top: 10px;
  7680. }
  7681. .accordion-item .block > h1:last-child,
  7682. .accordion-item .block > h2:last-child,
  7683. .accordion-item .block > h3:last-child,
  7684. .accordion-item .block > h4:last-child,
  7685. .accordion-item .block > p:last-child {
  7686. margin-bottom: 10px;
  7687. }
  7688. .accordion-item-opened .accordion-item-toggle .item-inner:after,
  7689. .accordion-item-opened > .item-link .item-inner:after {
  7690. background-color: transparent;
  7691. }
  7692. .list li.accordion-item ul {
  7693. padding-left: 0;
  7694. }
  7695. .accordion-item-content {
  7696. position: relative;
  7697. overflow: hidden;
  7698. height: 0;
  7699. font-size: 14px;
  7700. transition-duration: 300ms;
  7701. }
  7702. .accordion-item-opened > .accordion-item-content {
  7703. height: auto;
  7704. }
  7705. html.device-android-4 .accordion-item-content {
  7706. transform: none;
  7707. }
  7708. .list .accordion-item-toggle .item-inner {
  7709. padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-safe-area-right));
  7710. }
  7711. .list .accordion-item-toggle .item-inner:before {
  7712. font-family: 'framework7-core-icons';
  7713. font-weight: normal;
  7714. font-style: normal;
  7715. line-height: 1;
  7716. letter-spacing: normal;
  7717. text-transform: none;
  7718. white-space: nowrap;
  7719. word-wrap: normal;
  7720. direction: ltr;
  7721. -webkit-font-smoothing: antialiased;
  7722. text-rendering: optimizeLegibility;
  7723. -moz-osx-font-smoothing: grayscale;
  7724. -moz-font-feature-settings: "liga";
  7725. font-feature-settings: "liga";
  7726. text-align: center;
  7727. display: block;
  7728. width: 100%;
  7729. height: 100%;
  7730. position: absolute;
  7731. top: 50%;
  7732. width: 14px;
  7733. height: 8px;
  7734. margin-top: -4px;
  7735. font-size: 20px;
  7736. line-height: 14px;
  7737. color: var(--f7-list-chevron-icon-color);
  7738. pointer-events: none;
  7739. right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
  7740. content: 'chevron_right';
  7741. }
  7742. .list .accordion-item-toggle.active-state {
  7743. background-color: var(--f7-list-link-pressed-bg-color);
  7744. }
  7745. .list .accordion-item-toggle .item-inner:before,
  7746. .list:not(.media-list) .accordion-item:not(.media-item) .accordion-item-toggle .item-inner:before,
  7747. .list:not(.media-list) .accordion-item:not(.media-item) > .item-link .item-inner:before,
  7748. .media-list .accordion-item .accordion-item-toggle .item-title-row:before,
  7749. .media-list .accordion-item > .item-link .item-title-row:before,
  7750. .accordion-item.media-item .accordion-item-toggle .item-title-row:before,
  7751. .accordion-item.media-item > .item-link .item-title-row:before,
  7752. .links-list .accordion-item > a:before {
  7753. content: 'chevron_down';
  7754. width: 14px;
  7755. height: 8px;
  7756. margin-top: -4px;
  7757. line-height: 8px;
  7758. }
  7759. .list .accordion-item-toggle.accordion-item-opened .item-inner:before,
  7760. .list:not(.media-list) .accordion-item-opened:not(.media-item) .accordion-item-toggle .item-inner:before,
  7761. .list:not(.media-list) .accordion-item-opened:not(.media-item) > .item-link .item-inner:before,
  7762. .media-list .accordion-item-opened .accordion-item-toggle .item-title-row:before,
  7763. .media-list .accordion-item-opened > .item-link .item-title-row:before,
  7764. .accordion-item-opened.media-item .accordion-item-toggle .item-title-row:before,
  7765. .accordion-item-opened.media-item > .item-link .item-title-row:before,
  7766. .links-list .accordion-item-opened > a:before {
  7767. content: 'chevron_up';
  7768. width: 14px;
  7769. height: 8px;
  7770. margin-top: -4px;
  7771. line-height: 8px;
  7772. }
  7773. .aurora .list .accordion-item-toggle .item-inner:before,
  7774. .aurora .list:not(.media-list) .accordion-item:not(.media-item) .accordion-item-toggle .item-inner:before,
  7775. .aurora .list:not(.media-list) .accordion-item:not(.media-item) > .item-link .item-inner:before,
  7776. .aurora .media-list .accordion-item .accordion-item-toggle .item-title-row:before,
  7777. .aurora .media-list .accordion-item > .item-link .item-title-row:before,
  7778. .aurora .accordion-item.media-item .accordion-item-toggle .item-title-row:before,
  7779. .aurora .accordion-item.media-item > .item-link .item-title-row:before,
  7780. .aurora .links-list .accordion-item > a:before {
  7781. content: 'chevron_down_aurora';
  7782. }
  7783. .aurora .list .accordion-item-toggle.accordion-item-opened .item-inner:before,
  7784. .aurora .list:not(.media-list) .accordion-item-opened:not(.media-item) .accordion-item-toggle .item-inner:before,
  7785. .aurora .list:not(.media-list) .accordion-item-opened:not(.media-item) > .item-link .item-inner:before,
  7786. .aurora .media-list .accordion-item-opened .accordion-item-toggle .item-title-row:before,
  7787. .aurora .media-list .accordion-item-opened > .item-link .item-title-row:before,
  7788. .aurora .accordion-item-opened.media-item .accordion-item-toggle .item-title-row:before,
  7789. .aurora .accordion-item-opened.media-item > .item-link .item-title-row:before,
  7790. .aurora .links-list .accordion-item-opened > a:before {
  7791. content: 'chevron_up_aurora';
  7792. }
  7793. /* === Contacts === */
  7794. :root .theme-dark,
  7795. :root.theme-dark {
  7796. --f7-contacts-list-title-text-color: #fff;
  7797. }
  7798. .ios {
  7799. --f7-contacts-list-title-font-size: inherit;
  7800. --f7-contacts-list-title-font-weight: 600;
  7801. --f7-contacts-list-title-text-color: #000;
  7802. --f7-contacts-list-title-height: 22px;
  7803. --f7-contacts-list-title-bg-color: #f7f7f7;
  7804. }
  7805. .ios .theme-dark,
  7806. .ios.theme-dark {
  7807. --f7-contacts-list-title-bg-color: #232323;
  7808. }
  7809. .md {
  7810. --f7-contacts-list-title-font-size: 20px;
  7811. --f7-contacts-list-title-font-weight: 500;
  7812. /*
  7813. --f7-contacts-list-title-text-color: var(--f7-theme-color);
  7814. */
  7815. --f7-contacts-list-title-height: 48px;
  7816. --f7-contacts-list-title-bg-color: transparent;
  7817. }
  7818. .aurora {
  7819. --f7-contacts-list-title-font-weight: 600;
  7820. --f7-contacts-list-title-text-color: #000;
  7821. /*
  7822. --f7-contacts-list-title-bg-color: var(--f7-list-group-title-bg-color);
  7823. --f7-contacts-list-title-font-size: var(--f7-list-group-title-font-size);
  7824. --f7-contacts-list-title-line-height: var(--f7-list-group-title-height);
  7825. --f7-contacts-list-title-height: var(--f7-list-group-title-height);
  7826. */
  7827. }
  7828. .contacts-list {
  7829. --f7-list-margin-vertical: 0px;
  7830. }
  7831. .contacts-list .list-group-title,
  7832. .contacts-list li.list-group-title {
  7833. background-color: var(--f7-contacts-list-title-bg-color, var(--f7-list-group-title-bg-color));
  7834. font-weight: var(--f7-contacts-list-title-font-weight, var(--f7-list-group-title-font-weight));
  7835. font-size: var(--f7-contacts-list-title-font-size, var(--f7-list-group-title-font-size));
  7836. color: var(--f7-contacts-list-title-text-color, var(--f7-theme-color));
  7837. line-height: var(--f7-contacts-list-title-height, var(--f7-list-group-title-height));
  7838. height: var(--f7-contacts-list-title-height, var(--f7-list-group-title-height));
  7839. }
  7840. .contacts-list .list-group:first-child ul:before {
  7841. display: none !important;
  7842. }
  7843. .contacts-list .list-group:last-child ul:after {
  7844. display: none !important;
  7845. }
  7846. .md .contacts-list .list-group-title {
  7847. pointer-events: none;
  7848. overflow: visible;
  7849. width: 56px;
  7850. }
  7851. .md .contacts-list .list-group-title + li {
  7852. margin-top: calc(var(--f7-contacts-list-title-height) * -1);
  7853. }
  7854. .md .contacts-list li:not(.list-group-title) {
  7855. padding-left: 56px;
  7856. }
  7857. /* === Virtual List === */
  7858. /* === Indexed List === */
  7859. :root {
  7860. --f7-list-index-width: 16px;
  7861. --f7-list-index-font-size: 11px;
  7862. --f7-list-index-font-weight: 600;
  7863. /* --f7-list-index-text-color: var(--f7-theme-color); */
  7864. --f7-list-index-item-height: 14px;
  7865. --f7-list-index-label-text-color: #fff;
  7866. /* --f7-list-index-label-bg-color: var(--f7-theme-color); */
  7867. --f7-list-index-label-font-weight: 500;
  7868. }
  7869. .ios {
  7870. --f7-list-index-label-size: 44px;
  7871. --f7-list-index-label-font-size: 17px;
  7872. --f7-list-index-skip-dot-size: 6px;
  7873. }
  7874. .md {
  7875. --f7-list-index-label-size: 56px;
  7876. --f7-list-index-label-font-size: 20px;
  7877. --f7-list-index-skip-dot-size: 4px;
  7878. }
  7879. .aurora {
  7880. --f7-list-index-font-size: 12px;
  7881. --f7-list-index-label-size: 32px;
  7882. --f7-list-index-label-font-size: 12px;
  7883. --f7-list-index-label-font-weight: 600;
  7884. --f7-list-index-skip-dot-size: 4px;
  7885. }
  7886. .list-index {
  7887. position: absolute;
  7888. top: 0;
  7889. bottom: 0;
  7890. text-align: center;
  7891. z-index: 10;
  7892. width: var(--f7-list-index-width);
  7893. cursor: pointer;
  7894. -webkit-user-select: none;
  7895. -moz-user-select: none;
  7896. -ms-user-select: none;
  7897. user-select: none;
  7898. right: var(--f7-safe-area-right);
  7899. }
  7900. .list-index:before {
  7901. content: '';
  7902. position: absolute;
  7903. width: 20px;
  7904. top: 0;
  7905. right: 100%;
  7906. height: 100%;
  7907. }
  7908. .list-index ul {
  7909. color: var(--f7-list-index-text-color, var(--f7-theme-color));
  7910. font-size: var(--f7-list-index-font-size);
  7911. font-weight: var(--f7-list-index-font-weight);
  7912. list-style: none;
  7913. margin: 0;
  7914. padding: 0;
  7915. display: flex;
  7916. flex-direction: column;
  7917. justify-content: center;
  7918. align-items: center;
  7919. flex-shrink: 0;
  7920. height: 100%;
  7921. width: 100%;
  7922. position: relative;
  7923. }
  7924. .list-index li {
  7925. margin: 0;
  7926. padding: 0;
  7927. list-style: none;
  7928. position: relative;
  7929. height: var(--f7-list-index-item-height);
  7930. line-height: var(--f7-list-index-item-height);
  7931. flex-shrink: 0;
  7932. display: block;
  7933. width: 100%;
  7934. }
  7935. .list-index .list-index-skip-placeholder:after {
  7936. content: '';
  7937. position: absolute;
  7938. left: 50%;
  7939. top: 50%;
  7940. border-radius: 50%;
  7941. width: var(--f7-list-index-skip-dot-size);
  7942. height: var(--f7-list-index-skip-dot-size);
  7943. margin-left: calc(-1 * var(--f7-list-index-skip-dot-size) / 2);
  7944. margin-top: calc(-1 * var(--f7-list-index-skip-dot-size) / 2);
  7945. background: var(--f7-list-index-text-color, var(--f7-theme-color));
  7946. }
  7947. .list-index .list-index-label {
  7948. position: absolute;
  7949. bottom: 0;
  7950. right: 100%;
  7951. text-align: center;
  7952. background-color: var(--f7-list-index-label-bg-color, var(--f7-theme-color));
  7953. color: var(--f7-list-index-label-text-color);
  7954. width: var(--f7-list-index-label-size);
  7955. height: var(--f7-list-index-label-size);
  7956. line-height: var(--f7-list-index-label-size);
  7957. font-size: var(--f7-list-index-label-font-size);
  7958. font-weight: var(--f7-list-index-label-font-weight);
  7959. }
  7960. .navbar ~ .page > .list-index,
  7961. .navbar ~ .list-index {
  7962. top: var(--f7-navbar-height);
  7963. }
  7964. .navbar ~ .toolbar-top ~ .list-index,
  7965. .ios .navbar ~ .toolbar-top-ios ~ .list-index,
  7966. .md .navbar ~ .toolbar-top-md ~ .list-index {
  7967. top: calc(var(--f7-navbar-height) + var(--f7-toolbar-height));
  7968. }
  7969. .navbar ~ .toolbar-top.tabbar-labels ~ .list-index,
  7970. .ios .navbar ~ .toolbar-top-ios.tabbar-labels ~ .list-index,
  7971. .md .navbar ~ .toolbar-top-md.tabbar-labels ~ .list-index {
  7972. top: calc(var(--f7-navbar-height) + var(--f7-tabbar-labels-height));
  7973. }
  7974. .navbar ~ .subnavbar ~ .list-index,
  7975. .page-with-subnavbar .navbar ~ .list-index {
  7976. top: calc(var(--f7-navbar-height) + var(--f7-subnavbar-height));
  7977. }
  7978. .toolbar-bottom ~ .page > .list-index,
  7979. .ios .toolbar-bottom-ios ~ .page > .list-index,
  7980. .md .toolbar-bottom-md ~ .page > .list-index,
  7981. .toolbar-bottom ~ * .page > .list-index,
  7982. .ios .toolbar-bottom-ios ~ * .page > .list-index,
  7983. .md .toolbar-bottom-md ~ * .page > .list-index,
  7984. .toolbar-bottom ~ .list-index,
  7985. .ios .toolbar-bottom-ios ~ .list-index,
  7986. .md .toolbar-bottom-md ~ .list-index {
  7987. bottom: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
  7988. }
  7989. .toolbar-bottom.tabbar-labels ~ .page > .list-index,
  7990. .ios .toolbar-bottom-ios.tabbar-labels ~ .page > .list-index,
  7991. .md .toolbar-bottom-md.tabbar-labels ~ .page > .list-index,
  7992. .toolbar-bottom.tabbar-labels ~ * .page > .list-index,
  7993. .ios .toolbar-bottom-ios.tabbar-labels ~ * .page > .list-index,
  7994. .md .toolbar-bottom-md.tabbar-labels ~ * .page > .list-index,
  7995. .toolbar-bottom.tabbar-labels ~ .list-index,
  7996. .ios .toolbar-bottom-ios.tabbar-labels ~ .list-index,
  7997. .md .toolbar-bottom-md.tabbar-labels ~ .list-index {
  7998. bottom: calc(var(--f7-tabbar-labels-height) + var(--f7-safe-area-bottom));
  7999. }
  8000. .ios .list-index .list-index-label {
  8001. margin-bottom: calc(-1 * var(--f7-list-index-label-size) / 2);
  8002. margin-right: calc(var(--f7-list-index-width) - 1px);
  8003. border-radius: 50%;
  8004. }
  8005. .ios .list-index .list-index-label:before {
  8006. position: absolute;
  8007. width: 100%;
  8008. height: 100%;
  8009. border-radius: 50% 0% 50% 50%;
  8010. content: '';
  8011. background-color: inherit;
  8012. left: 0;
  8013. top: 0;
  8014. transform: rotate(45deg);
  8015. z-index: -1;
  8016. }
  8017. .md .list-index .list-index-label {
  8018. border-radius: 50% 50% 0 50%;
  8019. }
  8020. .aurora .list-index .list-index-label {
  8021. margin-bottom: calc(-1 * var(--f7-list-index-label-size) / 2);
  8022. margin-right: calc(var(--f7-list-index-width) - 1px);
  8023. border-radius: 50%;
  8024. }
  8025. .aurora .list-index .list-index-label:before {
  8026. position: absolute;
  8027. width: 100%;
  8028. height: 100%;
  8029. border-radius: 50% 1px 50% 50%;
  8030. content: '';
  8031. background-color: inherit;
  8032. left: 0;
  8033. top: 0;
  8034. transform: rotate(45deg);
  8035. z-index: -1;
  8036. }
  8037. /* === Timeline === */
  8038. :root {
  8039. --f7-timeline-horizontal-date-height: 34px;
  8040. --f7-timeline-year-height: 24px;
  8041. --f7-timeline-year-font-weight: inherit;
  8042. --f7-timeline-month-height: 24px;
  8043. --f7-timeline-month-font-size: inherit;
  8044. --f7-timeline-month-font-weight: inherit;
  8045. --f7-timeline-item-inner-bg-color: #fff;
  8046. --f7-timeline-item-text-font-weight: inherit;
  8047. --f7-timeline-item-subtitle-font-weight: inherit;
  8048. }
  8049. :root .theme-dark,
  8050. :root.theme-dark {
  8051. --f7-timeline-item-inner-bg-color: #1c1c1d;
  8052. --f7-timeline-horizontal-item-border-color: #282829;
  8053. --f7-timeline-horizontal-item-date-border-color: #282829;
  8054. }
  8055. .ios {
  8056. --f7-timeline-padding-horizontal: 15px;
  8057. --f7-timeline-margin-vertical: 35px;
  8058. --f7-timeline-divider-margin-horizontal: 15px;
  8059. --f7-timeline-inner-block-margin-vertical: 15px;
  8060. --f7-timeline-item-inner-border-radius: 7px;
  8061. --f7-timeline-item-inner-box-shadow: none;
  8062. --f7-timeline-item-time-font-size: 13px;
  8063. --f7-timeline-item-time-text-color: #6d6d72;
  8064. --f7-timeline-item-title-font-size: 17px;
  8065. --f7-timeline-item-title-line-height: inherit;
  8066. --f7-timeline-item-title-font-weight: 600;
  8067. --f7-timeline-item-subtitle-font-size: 15px;
  8068. --f7-timeline-item-subtitle-line-height: inherit;
  8069. --f7-timeline-item-text-font-size: inherit;
  8070. --f7-timeline-item-text-color: inherit;
  8071. --f7-timeline-item-text-line-height: inherit;
  8072. --f7-timeline-year-font-size: 16px;
  8073. --f7-timeline-horizontal-item-padding: 10px;
  8074. --f7-timeline-horizontal-item-border-color: #c4c4c4;
  8075. --f7-timeline-horizontal-item-date-border-color: #c4c4c4;
  8076. --f7-timeline-horizontal-item-date-shadow-image: none;
  8077. }
  8078. .ios .theme-dark,
  8079. .ios.theme-dark {
  8080. --f7-timeline-item-time-text-color: #8E8E93;
  8081. }
  8082. .md {
  8083. --f7-timeline-padding-horizontal: 16px;
  8084. --f7-timeline-margin-vertical: 32px;
  8085. --f7-timeline-divider-margin-horizontal: 16px;
  8086. --f7-timeline-inner-block-margin-vertical: 16px;
  8087. --f7-timeline-item-inner-border-radius: 4px;
  8088. --f7-timeline-item-inner-box-shadow: var(--f7-elevation-1);
  8089. --f7-timeline-item-time-font-size: 13px;
  8090. --f7-timeline-item-time-text-color: rgba(0, 0, 0, 0.54);
  8091. --f7-timeline-item-title-font-size: 16px;
  8092. --f7-timeline-item-title-line-height: inherit;
  8093. --f7-timeline-item-title-font-weight: 400;
  8094. --f7-timeline-item-subtitle-font-size: inherit;
  8095. --f7-timeline-item-subtitle-line-height: inherit;
  8096. --f7-timeline-item-text-font-size: inherit;
  8097. --f7-timeline-item-text-line-height: inherit;
  8098. --f7-timeline-item-text-color: inherit;
  8099. --f7-timeline-year-font-size: 16px;
  8100. --f7-timeline-horizontal-item-padding: 12px;
  8101. --f7-timeline-horizontal-item-border-color: rgba(0, 0, 0, 0.12);
  8102. --f7-timeline-horizontal-item-date-border-color: transparent;
  8103. --f7-timeline-horizontal-item-date-shadow-image: var(--f7-bars-shadow-bottom-image);
  8104. }
  8105. .md .theme-dark,
  8106. .md.theme-dark {
  8107. --f7-timeline-item-time-text-color: rgba(255, 255, 255, 0.54);
  8108. }
  8109. .aurora {
  8110. --f7-timeline-padding-horizontal: 10px;
  8111. --f7-timeline-margin-vertical: 15px;
  8112. --f7-timeline-divider-margin-horizontal: 15px;
  8113. --f7-timeline-inner-block-margin-vertical: 15px;
  8114. --f7-timeline-item-inner-border-radius: 4px;
  8115. --f7-timeline-item-inner-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
  8116. --f7-timeline-item-time-font-size: 12px;
  8117. --f7-timeline-item-time-text-color: rgba(0, 0, 0, 0.5);
  8118. --f7-timeline-item-title-font-size: 14px;
  8119. --f7-timeline-item-title-line-height: 1.3;
  8120. --f7-timeline-item-title-font-weight: 600;
  8121. --f7-timeline-item-subtitle-font-size: 14px;
  8122. --f7-timeline-item-subtitle-line-height: 1.3;
  8123. --f7-timeline-item-text-color: rgba(0, 0, 0, 0.6);
  8124. --f7-timeline-item-text-font-size: 12px;
  8125. --f7-timeline-item-text-line-height: 1.33;
  8126. --f7-timeline-year-font-size: 14px;
  8127. --f7-timeline-year-font-weight: 500;
  8128. --f7-timeline-horizontal-item-padding: 10px;
  8129. --f7-timeline-horizontal-item-border-color: rgba(0, 0, 0, 0.2);
  8130. --f7-timeline-horizontal-item-date-border-color: rgba(0, 0, 0, 0.2);
  8131. --f7-timeline-horizontal-item-date-shadow-image: none;
  8132. }
  8133. .aurora .theme-dark,
  8134. .aurora.theme-dark {
  8135. --f7-timeline-item-time-text-color: rgba(255, 255, 255, 0.52);
  8136. --f7-timeline-item-text-color: rgba(255, 255, 255, 0.52);
  8137. }
  8138. .timeline {
  8139. box-sizing: border-box;
  8140. margin: var(--f7-timeline-margin-vertical) 0;
  8141. padding: 0 var(--f7-timeline-padding-horizontal);
  8142. padding-top: 0;
  8143. padding-bottom: 0;
  8144. padding-left: calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-left));
  8145. padding-right: calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-right));
  8146. }
  8147. .block-strong .timeline {
  8148. padding: 0;
  8149. margin: 0;
  8150. }
  8151. .timeline-item {
  8152. display: flex;
  8153. justify-content: flex-start;
  8154. overflow: hidden;
  8155. box-sizing: border-box;
  8156. position: relative;
  8157. padding: 2px 0px var(--f7-timeline-padding-horizontal);
  8158. }
  8159. .timeline-item:last-child {
  8160. padding-bottom: 2px;
  8161. }
  8162. .timeline-item-date {
  8163. flex-shrink: 0;
  8164. width: 50px;
  8165. text-align: right;
  8166. box-sizing: border-box;
  8167. }
  8168. .timeline-item-date small {
  8169. font-size: 10px;
  8170. }
  8171. .timeline-item-content {
  8172. margin: 2px;
  8173. min-width: 0;
  8174. position: relative;
  8175. flex-shrink: 10;
  8176. }
  8177. .timeline-item-content .card,
  8178. .timeline-item-content.card,
  8179. .timeline-item-content .list,
  8180. .timeline-item-content.list,
  8181. .timeline-item-content .block,
  8182. .timeline-item-content.block {
  8183. margin: 0;
  8184. width: 100%;
  8185. }
  8186. .timeline-item-content .card + .card,
  8187. .timeline-item-content .list + .card,
  8188. .timeline-item-content .block + .card,
  8189. .timeline-item-content .card + .list,
  8190. .timeline-item-content .list + .list,
  8191. .timeline-item-content .block + .list,
  8192. .timeline-item-content .card + .block,
  8193. .timeline-item-content .list + .block,
  8194. .timeline-item-content .block + .block {
  8195. margin: var(--f7-timeline-inner-block-margin-vertical) 0 0;
  8196. }
  8197. .timeline-item-content p:first-child,
  8198. .timeline-item-content ul:first-child,
  8199. .timeline-item-content ol:first-child,
  8200. .timeline-item-content h1:first-child,
  8201. .timeline-item-content h2:first-child,
  8202. .timeline-item-content h3:first-child,
  8203. .timeline-item-content h4:first-child {
  8204. margin-top: 0;
  8205. }
  8206. .timeline-item-content p:last-child,
  8207. .timeline-item-content ul:last-child,
  8208. .timeline-item-content ol:last-child,
  8209. .timeline-item-content h1:last-child,
  8210. .timeline-item-content h2:last-child,
  8211. .timeline-item-content h3:last-child,
  8212. .timeline-item-content h4:last-child {
  8213. margin-bottom: 0;
  8214. }
  8215. .timeline-item-inner {
  8216. background: var(--f7-timeline-item-inner-bg-color);
  8217. box-sizing: border-box;
  8218. border-radius: var(--f7-timeline-item-inner-border-radius);
  8219. padding: 8px var(--f7-timeline-padding-horizontal);
  8220. box-shadow: var(--f7-timeline-item-inner-box-shadow);
  8221. }
  8222. .timeline-item-inner + .timeline-item-inner {
  8223. margin-top: var(--f7-timeline-inner-block-margin-vertical);
  8224. }
  8225. .timeline-item-inner .block {
  8226. padding: 0;
  8227. color: inherit;
  8228. }
  8229. .timeline-item-inner .block-strong {
  8230. padding-left: 0;
  8231. padding-right: 0;
  8232. margin: 0;
  8233. }
  8234. .timeline-item-inner .block-strong:before {
  8235. display: none !important;
  8236. }
  8237. .timeline-item-inner .block-strong:after {
  8238. display: none !important;
  8239. }
  8240. .timeline-item-inner .list ul:before {
  8241. display: none !important;
  8242. }
  8243. .timeline-item-inner .list ul:after {
  8244. display: none !important;
  8245. }
  8246. .timeline-item-divider {
  8247. width: 1px;
  8248. position: relative;
  8249. width: 10px;
  8250. height: 10px;
  8251. background: #bbb;
  8252. border-radius: 50%;
  8253. flex-shrink: 0;
  8254. margin: 3px var(--f7-timeline-divider-margin-horizontal) 0;
  8255. }
  8256. .timeline-item-divider:after,
  8257. .timeline-item-divider:before {
  8258. content: ' ';
  8259. width: 1px;
  8260. height: 100vh;
  8261. position: absolute;
  8262. left: 50%;
  8263. background: inherit;
  8264. transform: translate3d(-50%, 0, 0);
  8265. }
  8266. .timeline-item-divider:after {
  8267. top: 100%;
  8268. }
  8269. .timeline-item-divider:before {
  8270. bottom: 100%;
  8271. }
  8272. .timeline-item:last-child .timeline-item-divider:after {
  8273. display: none;
  8274. }
  8275. .timeline-item:first-child .timeline-item-divider:before {
  8276. display: none;
  8277. }
  8278. .timeline-item-time {
  8279. font-size: var(--f7-timeline-item-time-font-size);
  8280. margin-top: var(--f7-timeline-inner-block-margin-vertical);
  8281. color: var(--f7-timeline-item-time-text-color);
  8282. }
  8283. .timeline-item-time:first-child,
  8284. .timeline-item-time:last-child {
  8285. margin-top: 0;
  8286. }
  8287. .timeline-item-title + .timeline-item-time {
  8288. margin-top: 0;
  8289. }
  8290. .timeline-item-title {
  8291. font-size: var(--f7-timeline-item-title-font-size);
  8292. font-weight: var(--f7-timeline-item-title-font-weight);
  8293. line-height: var(--f7-timeline-item-title-line-height);
  8294. }
  8295. .timeline-item-subtitle {
  8296. font-size: var(--f7-timeline-item-subtitle-font-size);
  8297. font-weight: var(--f7-timeline-item-subtitle-font-weight);
  8298. line-height: var(--f7-timeline-item-subtitle-line-height);
  8299. }
  8300. .timeline-item-text {
  8301. color: var(--f7-timeline-item-text-color);
  8302. font-size: var(--f7-timeline-item-text-font-size);
  8303. font-weight: var(--f7-timeline-item-text-font-weight);
  8304. line-height: var(--f7-timeline-item-text-line-height);
  8305. }
  8306. .timeline-sides .timeline-item-right,
  8307. .timeline-sides .timeline-item {
  8308. margin-left: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
  8309. margin-right: 0;
  8310. }
  8311. .timeline-sides .timeline-item-right .timeline-item-date,
  8312. .timeline-sides .timeline-item .timeline-item-date {
  8313. text-align: right;
  8314. }
  8315. .timeline-sides .timeline-item-left,
  8316. .timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
  8317. flex-direction: row-reverse;
  8318. margin-right: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
  8319. margin-left: 0;
  8320. }
  8321. .timeline-sides .timeline-item-left .timeline-item-date,
  8322. .timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date {
  8323. text-align: left;
  8324. }
  8325. @media (min-width: 768px) {
  8326. .tablet-sides .timeline-item-right,
  8327. .tablet-sides .timeline-item {
  8328. margin-left: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
  8329. margin-right: 0;
  8330. }
  8331. .tablet-sides .timeline-item-right .timeline-item-date,
  8332. .tablet-sides .timeline-item .timeline-item-date {
  8333. text-align: right;
  8334. }
  8335. .tablet-sides .timeline-item-left,
  8336. .tablet-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
  8337. flex-direction: row-reverse;
  8338. margin-right: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
  8339. margin-left: 0;
  8340. }
  8341. .tablet-sides .timeline-item-left .timeline-item-date,
  8342. .tablet-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date {
  8343. text-align: left;
  8344. }
  8345. }
  8346. .timeline-horizontal {
  8347. height: 100%;
  8348. display: flex;
  8349. padding: 0;
  8350. margin: 0;
  8351. position: relative;
  8352. padding-left: var(--f7-safe-area-left);
  8353. padding-right: 0;
  8354. }
  8355. .timeline-horizontal .timeline-item {
  8356. display: block;
  8357. width: 33.33333333vw;
  8358. margin: 0;
  8359. padding: 0;
  8360. flex-shrink: 0;
  8361. position: relative;
  8362. height: 100%;
  8363. padding-top: var(--f7-timeline-horizontal-date-height) !important;
  8364. padding-bottom: var(--f7-timeline-horizontal-item-padding);
  8365. }
  8366. .timeline-horizontal .timeline-item:after {
  8367. content: '';
  8368. position: absolute;
  8369. background-color: var(--f7-timeline-horizontal-item-border-color);
  8370. display: block;
  8371. z-index: 15;
  8372. top: 0;
  8373. right: 0;
  8374. bottom: auto;
  8375. left: auto;
  8376. width: 1px;
  8377. height: 100%;
  8378. transform-origin: 100% 50%;
  8379. transform: scaleX(calc(1 / var(--f7-device-pixel-ratio)));
  8380. }
  8381. .timeline-horizontal .timeline-item-date {
  8382. padding: 0px var(--f7-timeline-horizontal-item-padding);
  8383. width: auto;
  8384. line-height: var(--f7-timeline-horizontal-date-height);
  8385. position: absolute;
  8386. left: 0;
  8387. top: 0;
  8388. width: 100%;
  8389. height: var(--f7-timeline-horizontal-date-height);
  8390. background-color: var(--f7-bars-bg-color, var(--f7-theme-color));
  8391. color: var(--f7-bars-text-color);
  8392. text-align: left;
  8393. }
  8394. .timeline-horizontal .timeline-item-date:after {
  8395. content: '';
  8396. position: absolute;
  8397. background-color: var(--f7-timeline-horizontal-item-date-border-color);
  8398. display: block;
  8399. z-index: 15;
  8400. top: auto;
  8401. right: auto;
  8402. bottom: 0;
  8403. left: 0;
  8404. height: 1px;
  8405. width: 100%;
  8406. transform-origin: 50% 100%;
  8407. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  8408. }
  8409. .timeline-horizontal .timeline-item-date:before {
  8410. content: '';
  8411. position: absolute;
  8412. right: 0;
  8413. width: 100%;
  8414. top: 100%;
  8415. bottom: auto;
  8416. height: 8px;
  8417. pointer-events: none;
  8418. background: var(--f7-timeline-horizontal-item-date-shadow-image);
  8419. }
  8420. .timeline-horizontal.no-shadow .timeline-item-date:before {
  8421. display: none;
  8422. }
  8423. .timeline-horizontal .timeline-item-content {
  8424. padding: var(--f7-timeline-horizontal-item-padding);
  8425. height: calc(100% - var(--f7-timeline-horizontal-item-padding));
  8426. will-change: scroll-position;
  8427. overflow: auto;
  8428. -webkit-overflow-scrolling: touch;
  8429. margin: 0;
  8430. }
  8431. .timeline-horizontal .timeline-item-divider {
  8432. display: none;
  8433. }
  8434. .timeline-horizontal > .timeline-item:last-child:after,
  8435. .timeline-horizontal .timeline-month:last-child .timeline-item:last-child:after {
  8436. display: none !important;
  8437. }
  8438. .timeline-horizontal.col-5 .timeline-item {
  8439. width: 5vw;
  8440. }
  8441. .timeline-horizontal.col-10 .timeline-item {
  8442. width: 10vw;
  8443. }
  8444. .timeline-horizontal.col-15 .timeline-item {
  8445. width: 15vw;
  8446. }
  8447. .timeline-horizontal.col-20 .timeline-item {
  8448. width: 20vw;
  8449. }
  8450. .timeline-horizontal.col-25 .timeline-item {
  8451. width: 25vw;
  8452. }
  8453. .timeline-horizontal.col-30 .timeline-item {
  8454. width: 30vw;
  8455. }
  8456. .timeline-horizontal.col-33 .timeline-item {
  8457. width: 33.333333333333336vw;
  8458. }
  8459. .timeline-horizontal.col-35 .timeline-item {
  8460. width: 35vw;
  8461. }
  8462. .timeline-horizontal.col-40 .timeline-item {
  8463. width: 40vw;
  8464. }
  8465. .timeline-horizontal.col-45 .timeline-item {
  8466. width: 45vw;
  8467. }
  8468. .timeline-horizontal.col-50 .timeline-item {
  8469. width: 50vw;
  8470. }
  8471. .timeline-horizontal.col-55 .timeline-item {
  8472. width: 55vw;
  8473. }
  8474. .timeline-horizontal.col-60 .timeline-item {
  8475. width: 60vw;
  8476. }
  8477. .timeline-horizontal.col-65 .timeline-item {
  8478. width: 65vw;
  8479. }
  8480. .timeline-horizontal.col-66 .timeline-item {
  8481. width: 66.66666666666666vw;
  8482. }
  8483. .timeline-horizontal.col-70 .timeline-item {
  8484. width: 70vw;
  8485. }
  8486. .timeline-horizontal.col-75 .timeline-item {
  8487. width: 75vw;
  8488. }
  8489. .timeline-horizontal.col-80 .timeline-item {
  8490. width: 80vw;
  8491. }
  8492. .timeline-horizontal.col-85 .timeline-item {
  8493. width: 85vw;
  8494. }
  8495. .timeline-horizontal.col-90 .timeline-item {
  8496. width: 90vw;
  8497. }
  8498. .timeline-horizontal.col-95 .timeline-item {
  8499. width: 95vw;
  8500. }
  8501. .timeline-horizontal.col-100 .timeline-item {
  8502. width: 100vw;
  8503. }
  8504. @media (min-width: 768px) {
  8505. .timeline-horizontal.tablet-5 .timeline-item {
  8506. width: 5vw;
  8507. }
  8508. .timeline-horizontal.tablet-10 .timeline-item {
  8509. width: 10vw;
  8510. }
  8511. .timeline-horizontal.tablet-15 .timeline-item {
  8512. width: 15vw;
  8513. }
  8514. .timeline-horizontal.tablet-20 .timeline-item {
  8515. width: 20vw;
  8516. }
  8517. .timeline-horizontal.tablet-25 .timeline-item {
  8518. width: 25vw;
  8519. }
  8520. .timeline-horizontal.tablet-30 .timeline-item {
  8521. width: 30vw;
  8522. }
  8523. .timeline-horizontal.tablet-33 .timeline-item {
  8524. width: 33.333333333333336vw;
  8525. }
  8526. .timeline-horizontal.tablet-35 .timeline-item {
  8527. width: 35vw;
  8528. }
  8529. .timeline-horizontal.tablet-40 .timeline-item {
  8530. width: 40vw;
  8531. }
  8532. .timeline-horizontal.tablet-45 .timeline-item {
  8533. width: 45vw;
  8534. }
  8535. .timeline-horizontal.tablet-50 .timeline-item {
  8536. width: 50vw;
  8537. }
  8538. .timeline-horizontal.tablet-55 .timeline-item {
  8539. width: 55vw;
  8540. }
  8541. .timeline-horizontal.tablet-60 .timeline-item {
  8542. width: 60vw;
  8543. }
  8544. .timeline-horizontal.tablet-65 .timeline-item {
  8545. width: 65vw;
  8546. }
  8547. .timeline-horizontal.tablet-66 .timeline-item {
  8548. width: 66.66666666666666vw;
  8549. }
  8550. .timeline-horizontal.tablet-70 .timeline-item {
  8551. width: 70vw;
  8552. }
  8553. .timeline-horizontal.tablet-75 .timeline-item {
  8554. width: 75vw;
  8555. }
  8556. .timeline-horizontal.tablet-80 .timeline-item {
  8557. width: 80vw;
  8558. }
  8559. .timeline-horizontal.tablet-85 .timeline-item {
  8560. width: 85vw;
  8561. }
  8562. .timeline-horizontal.tablet-90 .timeline-item {
  8563. width: 90vw;
  8564. }
  8565. .timeline-horizontal.tablet-95 .timeline-item {
  8566. width: 95vw;
  8567. }
  8568. .timeline-horizontal.tablet-100 .timeline-item {
  8569. width: 100vw;
  8570. }
  8571. }
  8572. .timeline-year {
  8573. padding-top: var(--f7-timeline-year-height);
  8574. }
  8575. .timeline-year:after {
  8576. content: '';
  8577. position: absolute;
  8578. background-color: var(--f7-timeline-horizontal-item-border-color);
  8579. display: block;
  8580. z-index: 15;
  8581. top: 0;
  8582. right: 0;
  8583. bottom: auto;
  8584. left: auto;
  8585. width: 1px;
  8586. height: 100%;
  8587. transform-origin: 100% 50%;
  8588. transform: scaleX(calc(1 / var(--f7-device-pixel-ratio)));
  8589. }
  8590. .timeline-year:last-child:after {
  8591. display: none !important;
  8592. }
  8593. .timeline-month {
  8594. padding-top: var(--f7-timeline-month-height);
  8595. }
  8596. .timeline-month .timeline-item:before {
  8597. content: '';
  8598. position: absolute;
  8599. background-color: var(--f7-timeline-horizontal-item-border-color);
  8600. display: block;
  8601. z-index: 15;
  8602. top: 0;
  8603. right: auto;
  8604. bottom: auto;
  8605. left: 0;
  8606. height: 1px;
  8607. width: 100%;
  8608. transform-origin: 50% 0%;
  8609. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  8610. }
  8611. .timeline-year,
  8612. .timeline-month {
  8613. display: flex;
  8614. flex-shrink: 0;
  8615. position: relative;
  8616. box-sizing: border-box;
  8617. height: 100%;
  8618. }
  8619. .timeline-year-title {
  8620. line-height: var(--f7-timeline-year-height);
  8621. height: var(--f7-timeline-year-height);
  8622. font-size: var(--f7-timeline-year-font-size);
  8623. font-weight: var(--f7-timeline-year-font-weight);
  8624. }
  8625. .timeline-month-title {
  8626. line-height: var(--f7-timeline-month-height);
  8627. height: var(--f7-timeline-month-height);
  8628. font-size: var(--f7-timeline-month-font-size);
  8629. font-weight: var(--f7-timeline-month-font-weight);
  8630. }
  8631. .timeline-year-title,
  8632. .timeline-month-title {
  8633. position: absolute;
  8634. left: 0;
  8635. top: 0;
  8636. width: 100%;
  8637. box-sizing: border-box;
  8638. padding: 0 var(--f7-timeline-horizontal-item-padding);
  8639. background-color: var(--f7-bars-bg-color, var(--f7-theme-color));
  8640. color: var(--f7-bars-text-color);
  8641. }
  8642. .timeline-year-title span,
  8643. .timeline-month-title span {
  8644. display: inline-block;
  8645. position: -webkit-sticky;
  8646. position: sticky;
  8647. left: calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-left));
  8648. }
  8649. .timeline-month-title span {
  8650. margin-top: -2px;
  8651. }
  8652. .timeline-year:first-child .timeline-year-title,
  8653. .timeline-year:first-child .timeline-month:first-child .timeline-month-title,
  8654. .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title {
  8655. left: calc(var(--f7-safe-area-left) * -1);
  8656. right: 0;
  8657. width: auto;
  8658. }
  8659. .timeline-horizontal .timeline-item:first-child,
  8660. .timeline-year:first-child .timeline-month:first-child .timeline-item:first-child,
  8661. .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-item:first-child,
  8662. .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title + .timeline-item {
  8663. overflow: visible;
  8664. }
  8665. .timeline-horizontal .timeline-item:first-child .timeline-item-date,
  8666. .timeline-year:first-child .timeline-month:first-child .timeline-item:first-child .timeline-item-date,
  8667. .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-item:first-child .timeline-item-date,
  8668. .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title + .timeline-item .timeline-item-date {
  8669. width: auto;
  8670. padding-left: calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-left));
  8671. left: calc(0px - var(--f7-safe-area-left));
  8672. right: 0;
  8673. }
  8674. .timeline-year:last-child .timeline-year-title,
  8675. .timeline-year:last-child .timeline-month:last-child .timeline-month-title {
  8676. width: auto;
  8677. right: calc(0px - var(--f7-safe-area-right));
  8678. }
  8679. .timeline-horizontal .timeline-item:last-child,
  8680. .timeline-year:last-child .timeline-month:last-child .timeline-item:last-child {
  8681. overflow: visible;
  8682. }
  8683. .timeline-horizontal .timeline-item:last-child .timeline-item-date,
  8684. .timeline-year:last-child .timeline-month:last-child .timeline-item:last-child .timeline-item-date {
  8685. width: auto;
  8686. right: calc(0px - var(--f7-safe-area-right));
  8687. left: 0;
  8688. }
  8689. .ios .block-strong .timeline-item-inner {
  8690. border-radius: 3px;
  8691. border: 1px solid rgba(0, 0, 0, 0.1);
  8692. }
  8693. .ios .timeline-year-title span {
  8694. margin-top: 3px;
  8695. }
  8696. .md .timeline-year-title span {
  8697. margin-top: 2px;
  8698. }
  8699. .aurora .timeline-year-title span {
  8700. margin-top: 2px;
  8701. }
  8702. /* === Tabs === */
  8703. .tabs .tab {
  8704. display: none;
  8705. }
  8706. .tabs .tab-active {
  8707. display: block;
  8708. }
  8709. .tabs-animated-wrap {
  8710. position: relative;
  8711. width: 100%;
  8712. overflow: hidden;
  8713. height: 100%;
  8714. }
  8715. .tabs-animated-wrap > .tabs {
  8716. display: flex;
  8717. height: 100%;
  8718. transition-duration: 300ms;
  8719. }
  8720. .tabs-animated-wrap > .tabs > .tab {
  8721. width: 100%;
  8722. display: block;
  8723. flex-shrink: 0;
  8724. }
  8725. .tabs-animated-wrap.not-animated > .tabs {
  8726. transition-duration: 0ms;
  8727. }
  8728. .tabs-swipeable-wrap {
  8729. height: 100%;
  8730. }
  8731. .tabs-swipeable-wrap > .tabs {
  8732. height: 100%;
  8733. }
  8734. .tabs-swipeable-wrap > .tabs > .tab {
  8735. display: block;
  8736. }
  8737. .page > .tabs {
  8738. height: 100%;
  8739. }
  8740. /* === Panels === */
  8741. :root {
  8742. --f7-panel-width: 260px;
  8743. /*
  8744. --f7-panel-left-width: var(--f7-panel-width);
  8745. --f7-panel-right-width: var(--f7-panel-width);
  8746. */
  8747. --f7-panel-bg-color: #fff;
  8748. }
  8749. .ios {
  8750. --f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0);
  8751. --f7-panel-transition-duration: 400ms;
  8752. --f7-panel-shadow: transparent;
  8753. }
  8754. .md {
  8755. --f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0.2);
  8756. --f7-panel-transition-duration: 300ms;
  8757. --f7-panel-shadow: rgba(0, 0, 0, 0.25) 0%,
  8758. rgba(0, 0, 0, 0.1) 30%,
  8759. rgba(0, 0, 0, 0.05) 40%,
  8760. rgba(0, 0, 0, 0) 60%,
  8761. rgba(0, 0, 0, 0) 100%;
  8762. }
  8763. .aurora {
  8764. --f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0.2);
  8765. --f7-panel-transition-duration: 400ms;
  8766. --f7-panel-shadow: transparent;
  8767. }
  8768. .panel-backdrop {
  8769. position: absolute;
  8770. left: 0;
  8771. top: calc(var(--f7-statusbar-height) + var(--f7-appbar-app-offset, 0px));
  8772. width: 100%;
  8773. height: calc(100% - var(--f7-statusbar-height) - var(--f7-appbar-app-offset, 0px));
  8774. opacity: 0;
  8775. z-index: 5999;
  8776. display: none;
  8777. transform: translate3d(0, 0, 0);
  8778. background-color: var(--f7-panel-backdrop-bg-color);
  8779. transition-duration: var(--f7-panel-transition-duration);
  8780. will-change: transform, opacity;
  8781. }
  8782. .panel-backdrop.not-animated {
  8783. transition-duration: 0ms !important;
  8784. }
  8785. .panel {
  8786. z-index: 1000;
  8787. display: none;
  8788. box-sizing: border-box;
  8789. position: absolute;
  8790. top: calc(var(--f7-statusbar-height) + var(--f7-appbar-app-offset, 0px));
  8791. height: calc(100% - var(--f7-statusbar-height) - var(--f7-appbar-app-offset, 0px));
  8792. transform: translate3d(0, 0, 0);
  8793. width: var(--f7-panel-width);
  8794. background-color: var(--f7-panel-bg-color);
  8795. overflow: visible;
  8796. will-change: transform;
  8797. transition-property: transform;
  8798. }
  8799. .panel:after {
  8800. pointer-events: none;
  8801. opacity: 0;
  8802. z-index: 5999;
  8803. position: absolute;
  8804. content: '';
  8805. top: 0;
  8806. width: 20px;
  8807. height: 100%;
  8808. transition-property: transform, opacity;
  8809. }
  8810. .panel,
  8811. .panel:after {
  8812. transition-duration: var(--f7-panel-transition-duration);
  8813. }
  8814. .panel.not-animated,
  8815. .panel.not-animated:after {
  8816. transition-duration: 0ms !important;
  8817. }
  8818. .panel.panel-reveal.not-animated ~ .views,
  8819. .panel.panel-reveal.not-animated ~ .view {
  8820. transition-duration: 0ms !important;
  8821. }
  8822. .panel.panel-resizing {
  8823. -webkit-user-select: none;
  8824. -moz-user-select: none;
  8825. -ms-user-select: none;
  8826. user-select: none;
  8827. }
  8828. .panel.panel-resizing,
  8829. .panel.panel-resizing:after,
  8830. .panel.panel-resizing ~ .views,
  8831. .panel.panel-resizing ~ .view {
  8832. transition-duration: 0ms !important;
  8833. }
  8834. .panel-cover {
  8835. z-index: 6000;
  8836. }
  8837. .panel-left {
  8838. left: 0;
  8839. width: var(--f7-panel-left-width, var(--f7-panel-width));
  8840. }
  8841. .panel-left.panel-cover {
  8842. transform: translate3d(-100%, 0, 0);
  8843. }
  8844. .panel-left.panel-cover:after {
  8845. left: 100%;
  8846. background: linear-gradient(to right, var(--f7-panel-shadow));
  8847. }
  8848. html.with-panel-left-cover .panel-left.panel-cover:after {
  8849. opacity: 1;
  8850. }
  8851. .panel-left.panel-reveal:after {
  8852. right: 0;
  8853. transform: translate3d(calc(-1 * var(--f7-panel-left-width, var(--f7-panel-width))), 0, 0);
  8854. background: linear-gradient(to left, var(--f7-panel-shadow));
  8855. }
  8856. html.with-panel-left-reveal .panel-left.panel-reveal:after {
  8857. opacity: 1;
  8858. transform: translate3d(0, 0, 0);
  8859. }
  8860. .panel-right {
  8861. right: 0;
  8862. width: var(--f7-panel-right-width, var(--f7-panel-width));
  8863. }
  8864. .panel-right.panel-cover {
  8865. transform: translate3d(100%, 0, 0);
  8866. }
  8867. .panel-right.panel-cover:after {
  8868. right: 100%;
  8869. background: linear-gradient(to left, var(--f7-panel-shadow));
  8870. }
  8871. html.with-panel-right-cover .panel-right.panel-cover:after {
  8872. opacity: 1;
  8873. }
  8874. .panel-right.panel-reveal:after {
  8875. left: 0;
  8876. background: linear-gradient(to right, var(--f7-panel-shadow));
  8877. transform: translate3d(var(--f7-panel-right-width, var(--f7-panel-width)), 0, 0);
  8878. }
  8879. html.with-panel-right-reveal .panel-right.panel-reveal:after {
  8880. opacity: 1;
  8881. transform: translate3d(0, 0, 0);
  8882. }
  8883. .panel-visible-by-breakpoint {
  8884. display: block;
  8885. transform: translate3d(0, 0, 0) !important;
  8886. }
  8887. .panel-visible-by-breakpoint:after {
  8888. display: none;
  8889. }
  8890. .panel-visible-by-breakpoint.panel-cover {
  8891. z-index: 5900;
  8892. }
  8893. html.with-panel-left-reveal .views,
  8894. html.with-panel-right-reveal .views,
  8895. html.with-panel-transitioning .views,
  8896. html.with-panel-left-reveal .framework7-root > .view,
  8897. html.with-panel-right-reveal .framework7-root > .view,
  8898. html.with-panel-transitioning .framework7-root > .view {
  8899. transition-duration: var(--f7-panel-transition-duration);
  8900. transition-property: transform;
  8901. }
  8902. html.with-panel-left-reveal .panel-backdrop,
  8903. html.with-panel-right-reveal .panel-backdrop,
  8904. html.with-panel-transitioning .panel-backdrop {
  8905. background: rgba(0, 0, 0, 0);
  8906. display: block;
  8907. opacity: 0;
  8908. }
  8909. html.with-panel .framework7-root > .views .page-content,
  8910. html.with-panel .framework7-root > .view .page-content {
  8911. overflow: hidden;
  8912. -webkit-overflow-scrolling: auto;
  8913. }
  8914. html.with-panel-left-cover .panel-backdrop,
  8915. html.with-panel-right-cover .panel-backdrop {
  8916. display: block;
  8917. opacity: 1;
  8918. }
  8919. html.with-panel-left-reveal .views,
  8920. html.with-panel-left-reveal .framework7-root > .view,
  8921. html.with-panel-left-reveal .panel-backdrop {
  8922. transform: translate3d(var(--f7-panel-left-width, var(--f7-panel-width)), 0, 0);
  8923. }
  8924. html.with-panel-right-reveal .views,
  8925. html.with-panel-right-reveal .framework7-root > .view,
  8926. html.with-panel-right-reveal .panel-backdrop {
  8927. transform: translate3d(calc(-1 * var(--f7-panel-right-width, var(--f7-panel-width))), 0, 0);
  8928. }
  8929. html.with-panel-left-cover .panel-left {
  8930. transform: translate3d(0px, 0, 0);
  8931. }
  8932. html.with-panel-right-cover .panel-right {
  8933. transform: translate3d(0px, 0, 0);
  8934. }
  8935. .panel-resize-handler {
  8936. position: absolute;
  8937. top: 0;
  8938. height: 100%;
  8939. width: 6px;
  8940. cursor: col-resize;
  8941. z-index: 6000;
  8942. display: none;
  8943. }
  8944. .panel-resizable .panel-resize-handler {
  8945. display: block;
  8946. }
  8947. .panel-left.panel-cover .panel-resize-handler {
  8948. right: -3px;
  8949. }
  8950. .panel-left.panel-reveal .panel-resize-handler {
  8951. right: 0;
  8952. }
  8953. .panel-right.panel-cover .panel-resize-handler {
  8954. left: -3px;
  8955. }
  8956. .panel-right.panel-reveal .panel-resize-handler {
  8957. left: 0;
  8958. }
  8959. /* === Card === */
  8960. :root {
  8961. --f7-card-bg-color: #fff;
  8962. --f7-card-outline-border-color: rgba(0, 0, 0, 0.12);
  8963. --f7-card-border-radius: 4px;
  8964. --f7-card-font-size: inherit;
  8965. --f7-card-header-text-color: inherit;
  8966. --f7-card-header-font-weight: 400;
  8967. --f7-card-header-border-color: #e1e1e1;
  8968. --f7-card-footer-border-color: #e1e1e1;
  8969. --f7-card-footer-font-weight: 400;
  8970. --f7-card-footer-font-size: inherit;
  8971. --f7-card-expandable-bg-color: #fff;
  8972. --f7-card-expandable-font-size: 16px;
  8973. --f7-card-expandable-tablet-width: 670px;
  8974. --f7-card-expandable-tablet-height: 670px;
  8975. }
  8976. :root .theme-dark,
  8977. :root.theme-dark {
  8978. --f7-card-bg-color: #1c1c1d;
  8979. --f7-card-expandable-bg-color: #1c1c1d;
  8980. --f7-card-outline-border-color: #282829;
  8981. --f7-card-header-border-color: #282829;
  8982. --f7-card-footer-border-color: #282829;
  8983. --f7-card-footer-text-color: #8E8E93;
  8984. }
  8985. .ios {
  8986. --f7-card-margin-horizontal: 10px;
  8987. --f7-card-margin-vertical: 10px;
  8988. --f7-card-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  8989. --f7-card-content-padding-horizontal: 15px;
  8990. --f7-card-content-padding-vertical: 15px;
  8991. --f7-card-header-font-size: 17px;
  8992. --f7-card-header-padding-vertical: 10px;
  8993. --f7-card-header-padding-horizontal: 15px;
  8994. --f7-card-header-min-height: 44px;
  8995. --f7-card-footer-text-color: #6d6d72;
  8996. --f7-card-footer-padding-vertical: 10px;
  8997. --f7-card-footer-padding-horizontal: 15px;
  8998. --f7-card-footer-min-height: 44px;
  8999. --f7-card-expandable-margin-horizontal: 20px;
  9000. --f7-card-expandable-margin-vertical: 30px;
  9001. --f7-card-expandable-box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.3);
  9002. --f7-card-expandable-border-radius: 15px;
  9003. --f7-card-expandable-tablet-border-radius: 5px;
  9004. --f7-card-expandable-header-font-size: 27px;
  9005. --f7-card-expandable-header-font-weight: bold;
  9006. }
  9007. .md {
  9008. --f7-card-margin-horizontal: 8px;
  9009. --f7-card-margin-vertical: 8px;
  9010. --f7-card-box-shadow: var(--f7-elevation-1);
  9011. --f7-card-content-padding-horizontal: 16px;
  9012. --f7-card-content-padding-vertical: 16px;
  9013. --f7-card-header-font-size: 16px;
  9014. --f7-card-header-padding-vertical: 4px;
  9015. --f7-card-header-padding-horizontal: 16px;
  9016. --f7-card-header-min-height: 48px;
  9017. --f7-card-footer-text-color: #757575;
  9018. --f7-card-footer-padding-vertical: 4px;
  9019. --f7-card-footer-padding-horizontal: 16px;
  9020. --f7-card-footer-min-height: 48px;
  9021. --f7-card-expandable-margin-horizontal: 12px;
  9022. --f7-card-expandable-margin-vertical: 24px;
  9023. --f7-card-expandable-box-shadow: var(--f7-elevation-10);
  9024. --f7-card-expandable-border-radius: 8px;
  9025. --f7-card-expandable-tablet-border-radius: 4px;
  9026. --f7-card-expandable-header-font-size: 24px;
  9027. --f7-card-expandable-header-font-weight: 500;
  9028. }
  9029. .aurora {
  9030. --f7-card-margin-horizontal: 10px;
  9031. --f7-card-margin-vertical: 10px;
  9032. --f7-card-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
  9033. --f7-card-content-padding-horizontal: 15px;
  9034. --f7-card-content-padding-vertical: 15px;
  9035. --f7-card-header-font-size: 14px;
  9036. --f7-card-header-font-weight: bold;
  9037. --f7-card-header-padding-vertical: 10px;
  9038. --f7-card-header-padding-horizontal: 15px;
  9039. --f7-card-header-min-height: 38px;
  9040. --f7-card-footer-text-color: rgba(0, 0, 0, 0.6);
  9041. --f7-card-footer-padding-vertical: 10px;
  9042. --f7-card-footer-padding-horizontal: 15px;
  9043. --f7-card-footer-min-height: 38px;
  9044. --f7-card-expandable-margin-horizontal: 10px;
  9045. --f7-card-expandable-margin-vertical: 20px;
  9046. --f7-card-expandable-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
  9047. --f7-card-expandable-border-radius: 15px;
  9048. --f7-card-expandable-tablet-border-radius: 5px;
  9049. --f7-card-expandable-header-font-size: 27px;
  9050. --f7-card-expandable-header-font-weight: bold;
  9051. }
  9052. .cards-list > ul:before,
  9053. .card .list > ul:before {
  9054. display: none !important;
  9055. }
  9056. .cards-list > ul:after,
  9057. .card .list > ul:after {
  9058. display: none !important;
  9059. }
  9060. .cards-list ul,
  9061. .card .list ul {
  9062. background: none;
  9063. }
  9064. .card {
  9065. background: var(--f7-card-bg-color);
  9066. position: relative;
  9067. border-radius: var(--f7-card-border-radius);
  9068. font-size: var(--f7-card-font-size);
  9069. margin-top: var(--f7-card-margin-vertical);
  9070. margin-bottom: var(--f7-card-margin-vertical);
  9071. margin-left: calc(var(--f7-card-margin-horizontal) + var(--f7-safe-area-left));
  9072. margin-right: calc(var(--f7-card-margin-horizontal) + var(--f7-safe-area-right));
  9073. box-shadow: var(--f7-card-box-shadow);
  9074. }
  9075. .card .list,
  9076. .card .block {
  9077. margin: 0;
  9078. }
  9079. .row:not(.no-gap) .col > .card {
  9080. margin-left: 0;
  9081. margin-right: 0;
  9082. }
  9083. .card.no-shadow {
  9084. box-shadow: none;
  9085. }
  9086. .card-outline,
  9087. .ios .card-outline-ios,
  9088. .md .card-outline-md,
  9089. .aurora .card-outline-aurora {
  9090. box-shadow: none;
  9091. border: 1px solid var(--f7-card-outline-border-color);
  9092. }
  9093. .card-outline.no-border,
  9094. .ios .card-outline-ios.no-border,
  9095. .md .card-outline-md.no-border,
  9096. .aurora .card-outline-aurora.no-border,
  9097. .card-outline.no-hairlines,
  9098. .ios .card-outline-ios.no-hairlines,
  9099. .md .card-outline-md.no-hairlines,
  9100. .aurora .card-outline-aurora.no-hairlines {
  9101. border: none;
  9102. }
  9103. .card-content {
  9104. position: relative;
  9105. }
  9106. .card-content-padding {
  9107. position: relative;
  9108. padding: var(--f7-card-content-padding-vertical) var(--f7-card-content-padding-horizontal);
  9109. }
  9110. .card-content-padding > .list,
  9111. .card-content-padding > .block {
  9112. margin: calc(-1 * var(--f7-card-content-padding-vertical)) calc(-1 * var(--f7-card-content-padding-horizontal));
  9113. }
  9114. .card-content-padding > p:first-child {
  9115. margin-top: 0;
  9116. }
  9117. .card-content-padding > p:last-child {
  9118. margin-bottom: 0;
  9119. }
  9120. .card-header {
  9121. min-height: var(--f7-card-header-min-height);
  9122. color: var(--f7-card-header-text-color);
  9123. font-size: var(--f7-card-header-font-size);
  9124. font-weight: var(--f7-card-header-font-weight);
  9125. padding: var(--f7-card-header-padding-vertical) var(--f7-card-header-padding-horizontal);
  9126. }
  9127. .card-footer {
  9128. min-height: var(--f7-card-footer-min-height);
  9129. color: var(--f7-card-footer-text-color);
  9130. font-size: var(--f7-card-footer-font-size);
  9131. font-weight: var(--f7-card-footer-font-weight);
  9132. padding: var(--f7-card-footer-padding-vertical) var(--f7-card-footer-padding-horizontal);
  9133. }
  9134. .card-footer a.link {
  9135. overflow: hidden;
  9136. }
  9137. .card-header,
  9138. .card-footer {
  9139. position: relative;
  9140. box-sizing: border-box;
  9141. display: flex;
  9142. justify-content: space-between;
  9143. align-items: center;
  9144. }
  9145. .card-header[valign="top"],
  9146. .card-footer[valign="top"] {
  9147. align-items: flex-start;
  9148. }
  9149. .card-header[valign="bottom"],
  9150. .card-footer[valign="bottom"] {
  9151. align-items: flex-end;
  9152. }
  9153. .card-header a.link,
  9154. .card-footer a.link {
  9155. position: relative;
  9156. }
  9157. .card-header a.link i.icon,
  9158. .card-footer a.link i.icon {
  9159. display: block;
  9160. }
  9161. .card-header a.icon-only,
  9162. .card-footer a.icon-only {
  9163. display: flex;
  9164. justify-content: center;
  9165. align-items: center;
  9166. margin: 0;
  9167. }
  9168. .card-header {
  9169. border-radius: var(--f7-card-border-radius) var(--f7-card-border-radius) 0 0;
  9170. }
  9171. .card-header:after {
  9172. content: '';
  9173. position: absolute;
  9174. background-color: var(--f7-card-header-border-color);
  9175. display: block;
  9176. z-index: 15;
  9177. top: auto;
  9178. right: auto;
  9179. bottom: 0;
  9180. left: 0;
  9181. height: 1px;
  9182. width: 100%;
  9183. transform-origin: 50% 100%;
  9184. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  9185. }
  9186. .card-header.no-hairline:after {
  9187. display: none !important;
  9188. }
  9189. .card-footer {
  9190. border-radius: 0 0 var(--f7-card-border-radius) var(--f7-card-border-radius);
  9191. }
  9192. .card-footer:before {
  9193. content: '';
  9194. position: absolute;
  9195. background-color: var(--f7-card-footer-border-color);
  9196. display: block;
  9197. z-index: 15;
  9198. top: 0;
  9199. right: auto;
  9200. bottom: auto;
  9201. left: 0;
  9202. height: 1px;
  9203. width: 100%;
  9204. transform-origin: 50% 0%;
  9205. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  9206. }
  9207. .card-footer.no-hairline:before {
  9208. display: none !important;
  9209. }
  9210. .card-expandable {
  9211. overflow: hidden;
  9212. height: 300px;
  9213. background: var(--f7-card-expandable-bg-color);
  9214. position: relative;
  9215. transform-origin: center center;
  9216. transition-property: transform, border-radius;
  9217. border-radius: var(--f7-card-expandable-border-radius);
  9218. z-index: 2;
  9219. transition-duration: 200ms;
  9220. margin-left: calc(var(--f7-card-expandable-margin-horizontal) + var(--f7-safe-area-left));
  9221. margin-right: calc(var(--f7-card-expandable-margin-horizontal) + var(--f7-safe-area-right));
  9222. margin-top: var(--f7-card-expandable-margin-vertical);
  9223. margin-bottom: var(--f7-card-expandable-margin-vertical);
  9224. box-shadow: var(--f7-card-expandable-box-shadow);
  9225. font-size: var(--f7-card-expandable-font-size);
  9226. }
  9227. .card-expandable.card-no-transition {
  9228. transition-duration: 0ms;
  9229. }
  9230. .card-expandable.card-expandable-animate-width .card-content {
  9231. transition-property: width, transform;
  9232. width: 100%;
  9233. }
  9234. .card-expandable.active-state {
  9235. transform: scale(0.97);
  9236. }
  9237. .card-expandable .card-opened-fade-in,
  9238. .card-expandable .card-opened-fade-out {
  9239. transition-duration: 400ms;
  9240. }
  9241. .card-expandable .card-opened-fade-in {
  9242. opacity: 0;
  9243. pointer-events: none;
  9244. }
  9245. .card-expandable .card-content {
  9246. position: absolute;
  9247. top: 0;
  9248. width: 100vw;
  9249. height: 100vh;
  9250. transform-origin: center top;
  9251. overflow: hidden;
  9252. transition-property: transform;
  9253. box-sizing: border-box;
  9254. pointer-events: none;
  9255. left: 0;
  9256. }
  9257. .card-expandable .card-content .card-content-padding {
  9258. padding-left: calc(var(--f7-safe-area-left) + var(--f7-card-content-padding-horizontal));
  9259. padding-right: calc(var(--f7-safe-area-right) + var(--f7-card-content-padding-horizontal));
  9260. }
  9261. .card-expandable.card-opened {
  9262. transition-duration: 0ms;
  9263. }
  9264. .card-expandable.card-opening,
  9265. .card-expandable.card-closing,
  9266. .card-expandable.card-transitioning {
  9267. transition-duration: 400ms;
  9268. }
  9269. .card-expandable.card-opening .card-content {
  9270. transition-duration: 300ms;
  9271. }
  9272. .card-expandable.card-closing .card-content {
  9273. transition-duration: 500ms;
  9274. }
  9275. .card-expandable.card-opening,
  9276. .card-expandable.card-opened,
  9277. .card-expandable.card-closing {
  9278. z-index: 100;
  9279. }
  9280. .card-expandable.card-opening,
  9281. .card-expandable.card-opened {
  9282. border-radius: 0;
  9283. }
  9284. .card-expandable.card-opening .card-opened-fade-in,
  9285. .card-expandable.card-opened .card-opened-fade-in {
  9286. opacity: 1;
  9287. pointer-events: auto;
  9288. }
  9289. .card-expandable.card-opening .card-opened-fade-out,
  9290. .card-expandable.card-opened .card-opened-fade-out {
  9291. opacity: 0;
  9292. pointer-events: none;
  9293. }
  9294. .card-expandable.card-opened .card-content {
  9295. overflow: auto;
  9296. -webkit-overflow-scrolling: touch;
  9297. pointer-events: auto;
  9298. }
  9299. .card-expandable .card-header {
  9300. font-size: var(--f7-card-expandable-header-font-size);
  9301. font-weight: var(--f7-card-expandable-header-font-weight);
  9302. }
  9303. .card-expandable .card-header:after {
  9304. display: none !important;
  9305. }
  9306. .card-prevent-open {
  9307. pointer-events: auto;
  9308. }
  9309. .card-expandable-size {
  9310. width: 0;
  9311. height: 0;
  9312. position: absolute;
  9313. left: 0;
  9314. top: 0;
  9315. opacity: 0;
  9316. pointer-events: none;
  9317. visibility: hidden;
  9318. }
  9319. @media (min-width: 768px) and (min-height: 670px) {
  9320. .card-expandable:not(.card-tablet-fullscreen) {
  9321. max-width: var(--f7-card-expandable-tablet-width);
  9322. }
  9323. .card-expandable:not(.card-tablet-fullscreen).card-opened,
  9324. .card-expandable:not(.card-tablet-fullscreen).card-opening {
  9325. border-radius: var(--f7-card-expandable-tablet-border-radius);
  9326. }
  9327. .card-expandable:not(.card-tablet-fullscreen):not(.card-expandable-animate-width) .card-content {
  9328. width: var(--f7-card-expandable-tablet-width);
  9329. }
  9330. .card-expandable:not(.card-tablet-fullscreen) .card-expandable-size {
  9331. width: var(--f7-card-expandable-tablet-width);
  9332. height: var(--f7-card-expandable-tablet-height);
  9333. }
  9334. }
  9335. .page.page-with-card-opened .page-content {
  9336. overflow: hidden;
  9337. }
  9338. .card-backdrop {
  9339. position: fixed;
  9340. left: 0;
  9341. top: 0;
  9342. width: 100%;
  9343. height: 100%;
  9344. z-index: 99;
  9345. pointer-events: none;
  9346. background: rgba(0, 0, 0, 0.2);
  9347. opacity: 0;
  9348. }
  9349. .card-backdrop-in {
  9350. animation: card-backdrop-fade-in 400ms forwards;
  9351. pointer-events: auto;
  9352. }
  9353. .card-backdrop-out {
  9354. animation: card-backdrop-fade-out 400ms forwards;
  9355. }
  9356. @supports ((-webkit-backdrop-filter: blur(15px)) or (backdrop-filter: blur(15px))) {
  9357. .card-backdrop {
  9358. background: transparent;
  9359. opacity: 1;
  9360. }
  9361. .card-backdrop-in {
  9362. animation: card-backdrop-blur-in 400ms forwards;
  9363. }
  9364. .card-backdrop-out {
  9365. animation: card-backdrop-blur-out 400ms forwards;
  9366. }
  9367. }
  9368. @keyframes card-backdrop-fade-in {
  9369. from {
  9370. opacity: 0;
  9371. }
  9372. to {
  9373. opacity: 1;
  9374. }
  9375. }
  9376. @keyframes card-backdrop-fade-out {
  9377. from {
  9378. opacity: 1;
  9379. }
  9380. to {
  9381. opacity: 0;
  9382. }
  9383. }
  9384. @keyframes card-backdrop-blur-in {
  9385. from {
  9386. -webkit-backdrop-filter: blur(0px);
  9387. backdrop-filter: blur(0px);
  9388. }
  9389. to {
  9390. -webkit-backdrop-filter: blur(15px);
  9391. backdrop-filter: blur(15px);
  9392. }
  9393. }
  9394. @keyframes card-backdrop-blur-out {
  9395. from {
  9396. -webkit-backdrop-filter: blur(15px);
  9397. backdrop-filter: blur(15px);
  9398. }
  9399. to {
  9400. -webkit-backdrop-filter: blur(0px);
  9401. backdrop-filter: blur(0px);
  9402. }
  9403. }
  9404. /* === Chips === */
  9405. :root {
  9406. --f7-chip-bg-color: rgba(0, 0, 0, 0.12);
  9407. --f7-chip-font-size: 13px;
  9408. --f7-chip-font-weight: normal;
  9409. --f7-chip-outline-border-color: rgba(0, 0, 0, 0.12);
  9410. --f7-chip-media-font-size: 16px;
  9411. --f7-chip-delete-button-color: #000;
  9412. }
  9413. :root .theme-dark,
  9414. :root.theme-dark {
  9415. --f7-chip-delete-button-color: #fff;
  9416. --f7-chip-bg-color: #333;
  9417. --f7-chip-outline-border-color: #333;
  9418. }
  9419. .ios {
  9420. --f7-chip-text-color: #000;
  9421. --f7-chip-height: 24px;
  9422. --f7-chip-padding-horizontal: 10px;
  9423. }
  9424. .ios .theme-dark,
  9425. .ios.theme-dark {
  9426. --f7-chip-text-color: #fff;
  9427. }
  9428. .md {
  9429. --f7-chip-text-color: rgba(0, 0, 0, 0.87);
  9430. --f7-chip-height: 32px;
  9431. --f7-chip-padding-horizontal: 12px;
  9432. }
  9433. .md .theme-dark,
  9434. .md.theme-dark {
  9435. --f7-chip-text-color: rgba(255, 255, 255, 0.87);
  9436. }
  9437. .aurora {
  9438. --f7-chip-text-color: #000;
  9439. --f7-chip-height: 20px;
  9440. --f7-chip-padding-horizontal: 10px;
  9441. --f7-chip-font-size: 12px;
  9442. --f7-chip-media-font-size: 14px;
  9443. }
  9444. .aurora .theme-dark,
  9445. .aurora.theme-dark {
  9446. --f7-chip-text-color: #fff;
  9447. }
  9448. .chip {
  9449. padding-left: var(--f7-chip-padding-horizontal);
  9450. padding-right: var(--f7-chip-padding-horizontal);
  9451. font-weight: var(--f7-chip-font-weight);
  9452. display: inline-flex;
  9453. box-sizing: border-box;
  9454. vertical-align: middle;
  9455. align-items: center;
  9456. margin: 2px 0;
  9457. background-color: var(--f7-chip-bg-color);
  9458. font-size: var(--f7-chip-font-size);
  9459. color: var(--f7-chip-text-color);
  9460. height: var(--f7-chip-height);
  9461. line-height: var(--f7-chip-height);
  9462. border-radius: var(--f7-chip-height);
  9463. position: relative;
  9464. }
  9465. .chip-media {
  9466. border-radius: 50%;
  9467. flex-shrink: 0;
  9468. display: flex;
  9469. align-items: center;
  9470. justify-content: center;
  9471. height: var(--f7-chip-height);
  9472. width: var(--f7-chip-height);
  9473. border-radius: var(--f7-chip-height);
  9474. text-align: center;
  9475. line-height: var(--f7-chip-height);
  9476. box-sizing: border-box;
  9477. color: #fff;
  9478. font-size: var(--f7-chip-media-font-size);
  9479. vertical-align: middle;
  9480. margin-left: calc(-1 * var(--f7-chip-padding-horizontal));
  9481. }
  9482. .chip-media i.icon {
  9483. font-size: calc(var(--f7-chip-height) - 8px);
  9484. height: calc(var(--f7-chip-height) - 8px);
  9485. }
  9486. .chip-media img {
  9487. max-width: 100%;
  9488. max-height: 100%;
  9489. width: auto;
  9490. height: auto;
  9491. border-radius: 50%;
  9492. display: block;
  9493. }
  9494. .chip-media + .chip-label {
  9495. margin-left: 4px;
  9496. }
  9497. .chip-label {
  9498. white-space: nowrap;
  9499. overflow: hidden;
  9500. text-overflow: ellipsis;
  9501. position: relative;
  9502. flex-shrink: 1;
  9503. min-width: 0;
  9504. }
  9505. .chip-delete {
  9506. text-align: center;
  9507. cursor: pointer;
  9508. flex-shrink: 0;
  9509. background-repeat: no-repeat;
  9510. width: 24px;
  9511. height: 24px;
  9512. color: var(--f7-chip-delete-button-color);
  9513. opacity: 0.54;
  9514. position: relative;
  9515. }
  9516. .chip-delete:after {
  9517. font-family: 'framework7-core-icons';
  9518. font-weight: normal;
  9519. font-style: normal;
  9520. line-height: 1;
  9521. letter-spacing: normal;
  9522. text-transform: none;
  9523. white-space: nowrap;
  9524. word-wrap: normal;
  9525. direction: ltr;
  9526. -webkit-font-smoothing: antialiased;
  9527. text-rendering: optimizeLegibility;
  9528. -moz-osx-font-smoothing: grayscale;
  9529. -moz-font-feature-settings: "liga";
  9530. font-feature-settings: "liga";
  9531. text-align: center;
  9532. display: block;
  9533. width: 100%;
  9534. height: 100%;
  9535. font-size: 20px;
  9536. content: 'delete_round_ios';
  9537. line-height: 24px;
  9538. }
  9539. .chip .chip-delete.active-state {
  9540. opacity: 1;
  9541. }
  9542. .chip-outline,
  9543. .ios .chip-outline-ios,
  9544. .md .chip-outline-md,
  9545. .aurora .chip-outline-aurora {
  9546. border: 1px solid var(--f7-chip-outline-border-color);
  9547. background: none;
  9548. }
  9549. .chip[class*="color-"] {
  9550. --f7-chip-bg-color: var(--f7-theme-color);
  9551. --f7-chip-text-color: #fff;
  9552. }
  9553. .chip-outline[class*="color-"],
  9554. .ios .chip-outline-ios[class*="color-"],
  9555. .md .chip-outline-md[class*="color-"],
  9556. .aurora .chip-outline-aurora[class*="color-"] {
  9557. --f7-chip-outline-border-color: var(--f7-theme-color);
  9558. --f7-chip-text-color: var(--f7-theme-color);
  9559. }
  9560. .ios .chip-delete {
  9561. margin-right: calc(-1 * var(--f7-chip-padding-horizontal));
  9562. }
  9563. .ios .chip-delete:after {
  9564. font-size: 10px;
  9565. }
  9566. .md .chip-label + .chip-delete {
  9567. margin-left: 4px;
  9568. }
  9569. .md .chip-delete {
  9570. margin-right: calc(-1 * var(--f7-chip-padding-horizontal) + 4px);
  9571. }
  9572. .md .chip-delete:after {
  9573. font-size: 12px;
  9574. }
  9575. .aurora .chip-delete {
  9576. margin-right: calc(-1 * var(--f7-chip-padding-horizontal));
  9577. }
  9578. .aurora .chip-delete:after {
  9579. font-size: 10px;
  9580. }
  9581. /* === Form === */
  9582. /* === Input === */
  9583. :root {
  9584. --f7-input-bg-color: transparent;
  9585. --f7-label-font-weight: 400;
  9586. --f7-label-line-height: 1.2;
  9587. --f7-input-padding-left: 0px;
  9588. --f7-input-padding-right: 0px;
  9589. --f7-input-error-text-color: #ff3b30;
  9590. --f7-input-error-font-size: 12px;
  9591. --f7-input-error-line-height: 1.4;
  9592. --f7-input-error-font-weight: 400;
  9593. --f7-input-info-font-size: 12px;
  9594. --f7-input-info-line-height: 1.4;
  9595. --f7-input-outline-height: 40px;
  9596. --f7-input-outline-border-color: #999;
  9597. --f7-input-outline-border-radius: 4px;
  9598. --f7-input-outline-padding-horizontal: 12px;
  9599. --f7-textarea-height: 100px;
  9600. /*
  9601. --f7-input-outline-focused-border-color: var(--f7-theme-color);
  9602. --f7-input-outline-invalid-border-color: var(--f7-input-error-text-color);
  9603. */
  9604. }
  9605. :root .theme-dark,
  9606. :root.theme-dark {
  9607. --f7-input-outline-border-color: #444;
  9608. }
  9609. .ios {
  9610. --f7-input-height: 44px;
  9611. --f7-input-text-color: #000000;
  9612. --f7-input-font-size: 17px;
  9613. --f7-input-placeholder-color: #a9a9a9;
  9614. --f7-textarea-padding-vertical: 11px;
  9615. /*
  9616. --f7-input-focused-border-color: var(--f7-list-item-border-color);
  9617. --f7-input-invalid-border-color: var(--f7-list-item-border-color);
  9618. --f7-input-invalid-text-color: var(--f7-input-error-text-color);
  9619. */
  9620. --f7-label-font-size: 12px;
  9621. --f7-label-text-color: inherit;
  9622. /*
  9623. --f7-label-focused-text-color: var(--f7-label-text-color);
  9624. --f7-label-invalid-text-color: var(--f7-label-text-color);
  9625. */
  9626. --f7-floating-label-scale: calc(17 / 12);
  9627. --f7-inline-label-font-size: 17px;
  9628. --f7-inline-label-line-height: 1.4;
  9629. --f7-inline-label-padding-top: 3px;
  9630. --f7-input-info-text-color: #8e8e93;
  9631. --f7-input-clear-button-size: 14px;
  9632. --f7-input-clear-button-color: #8e8e93;
  9633. }
  9634. .ios .theme-dark,
  9635. .ios.theme-dark {
  9636. --f7-input-text-color: #fff;
  9637. }
  9638. .md {
  9639. --f7-input-height: 36px;
  9640. --f7-input-text-color: #212121;
  9641. --f7-input-font-size: 16px;
  9642. --f7-input-placeholder-color: rgba(0, 0, 0, 0.35);
  9643. --f7-textarea-padding-vertical: 7px;
  9644. /*
  9645. --f7-input-focused-border-color: var(--f7-theme-color);
  9646. --f7-input-invalid-border-color: var(--f7-input-error-text-color);
  9647. --f7-input-invalid-text-color: var(--f7-input-text-color);
  9648. */
  9649. --f7-label-font-size: 12px;
  9650. --f7-label-text-color: rgba(0, 0, 0, 0.65);
  9651. /*
  9652. --f7-label-focused-text-color: var(--f7-theme-color);
  9653. --f7-label-invalid-text-color: var(--f7-input-error-text-color );
  9654. */
  9655. --f7-floating-label-scale: calc(16 / 12);
  9656. --f7-inline-label-font-size: 16px;
  9657. --f7-inline-label-line-height: 1.5;
  9658. --f7-inline-label-padding-top: 7px;
  9659. --f7-input-info-text-color: rgba(0, 0, 0, 0.45);
  9660. --f7-input-clear-button-size: 18px;
  9661. --f7-input-clear-button-color: #aaa;
  9662. }
  9663. .md .theme-dark,
  9664. .md.theme-dark {
  9665. --f7-input-text-color: rgba(255, 255, 255, 0.87);
  9666. --f7-input-placeholder-color: rgba(255, 255, 255, 0.35);
  9667. --f7-label-text-color: rgba(255, 255, 255, 0.54);
  9668. --f7-input-info-text-color: rgba(255, 255, 255, 0.35);
  9669. }
  9670. .aurora {
  9671. --f7-input-height: 24px;
  9672. --f7-input-text-color: #000000;
  9673. --f7-input-font-size: 13px;
  9674. --f7-input-placeholder-color: rgba(0, 0, 0, 0.32);
  9675. --f7-textarea-padding-vertical: 2px;
  9676. /*
  9677. --f7-input-focused-border-color: var(--f7-list-item-border-color);
  9678. --f7-input-invalid-border-color: var(--f7-list-item-border-color);
  9679. --f7-input-invalid-text-color: var(--f7-input-error-text-color);
  9680. */
  9681. --f7-label-font-size: 11px;
  9682. --f7-label-text-color: inherit;
  9683. /*
  9684. --f7-label-focused-text-color: var(--f7-label-text-color);
  9685. --f7-label-invalid-text-color: var(--f7-label-text-color);
  9686. */
  9687. --f7-floating-label-scale: calc(13 / 11);
  9688. --f7-inline-label-font-size: 14px;
  9689. --f7-inline-label-line-height: 1.4;
  9690. --f7-inline-label-padding-top: 1px;
  9691. --f7-input-info-text-color: rgba(0, 0, 0, 0.5);
  9692. --f7-input-clear-button-size: 14px;
  9693. --f7-input-clear-button-color: #666;
  9694. --f7-input-outline-height: 32px;
  9695. --f7-input-outline-padding-horizontal: 8px;
  9696. }
  9697. .aurora .theme-dark,
  9698. .aurora.theme-dark {
  9699. --f7-input-text-color: #fff;
  9700. --f7-input-clear-button-color: #aaa;
  9701. --f7-input-placeholder-color: rgba(255, 255, 255, 0.35);
  9702. }
  9703. input[type="text"],
  9704. input[type="password"],
  9705. input[type="search"],
  9706. input[type="email"],
  9707. input[type="tel"],
  9708. input[type="url"],
  9709. input[type="date"],
  9710. input[type="datetime-local"],
  9711. input[type="time"],
  9712. input[type="number"],
  9713. select,
  9714. textarea {
  9715. box-sizing: border-box;
  9716. -webkit-appearance: none;
  9717. -moz-appearance: none;
  9718. appearance: none;
  9719. border: none;
  9720. box-shadow: none;
  9721. border-radius: 0;
  9722. outline: 0;
  9723. display: block;
  9724. padding: 0;
  9725. margin: 0;
  9726. font-family: inherit;
  9727. background: none;
  9728. resize: none;
  9729. font-size: inherit;
  9730. color: inherit;
  9731. }
  9732. .textarea-resizable-shadow {
  9733. opacity: 0;
  9734. position: absolute;
  9735. z-index: -1000;
  9736. pointer-events: none;
  9737. left: -1000px;
  9738. top: -1000px;
  9739. visibility: hidden;
  9740. }
  9741. .list input[type="text"],
  9742. .list input[type="password"],
  9743. .list input[type="search"],
  9744. .list input[type="email"],
  9745. .list input[type="tel"],
  9746. .list input[type="url"],
  9747. .list input[type="date"],
  9748. .list input[type="datetime-local"],
  9749. .list input[type="time"],
  9750. .list input[type="number"],
  9751. .list select {
  9752. width: 100%;
  9753. height: var(--f7-input-height);
  9754. color: var(--f7-input-text-color);
  9755. font-size: var(--f7-input-font-size);
  9756. background-color: var(--f7-input-bg-color, transparent);
  9757. padding-left: var(--f7-input-padding-left);
  9758. padding-right: var(--f7-input-padding-right);
  9759. }
  9760. .list input[type="text"]::-webkit-input-placeholder,
  9761. .list input[type="password"]::-webkit-input-placeholder,
  9762. .list input[type="search"]::-webkit-input-placeholder,
  9763. .list input[type="email"]::-webkit-input-placeholder,
  9764. .list input[type="tel"]::-webkit-input-placeholder,
  9765. .list input[type="url"]::-webkit-input-placeholder,
  9766. .list input[type="date"]::-webkit-input-placeholder,
  9767. .list input[type="datetime-local"]::-webkit-input-placeholder,
  9768. .list input[type="time"]::-webkit-input-placeholder,
  9769. .list input[type="number"]::-webkit-input-placeholder,
  9770. .list select::-webkit-input-placeholder {
  9771. color: var(--f7-input-placeholder-color);
  9772. }
  9773. .list input[type="text"]::-moz-placeholder,
  9774. .list input[type="password"]::-moz-placeholder,
  9775. .list input[type="search"]::-moz-placeholder,
  9776. .list input[type="email"]::-moz-placeholder,
  9777. .list input[type="tel"]::-moz-placeholder,
  9778. .list input[type="url"]::-moz-placeholder,
  9779. .list input[type="date"]::-moz-placeholder,
  9780. .list input[type="datetime-local"]::-moz-placeholder,
  9781. .list input[type="time"]::-moz-placeholder,
  9782. .list input[type="number"]::-moz-placeholder,
  9783. .list select::-moz-placeholder {
  9784. color: var(--f7-input-placeholder-color);
  9785. }
  9786. .list input[type="text"]::-ms-input-placeholder,
  9787. .list input[type="password"]::-ms-input-placeholder,
  9788. .list input[type="search"]::-ms-input-placeholder,
  9789. .list input[type="email"]::-ms-input-placeholder,
  9790. .list input[type="tel"]::-ms-input-placeholder,
  9791. .list input[type="url"]::-ms-input-placeholder,
  9792. .list input[type="date"]::-ms-input-placeholder,
  9793. .list input[type="datetime-local"]::-ms-input-placeholder,
  9794. .list input[type="time"]::-ms-input-placeholder,
  9795. .list input[type="number"]::-ms-input-placeholder,
  9796. .list select::-ms-input-placeholder {
  9797. color: var(--f7-input-placeholder-color);
  9798. }
  9799. .list input[type="text"]::placeholder,
  9800. .list input[type="password"]::placeholder,
  9801. .list input[type="search"]::placeholder,
  9802. .list input[type="email"]::placeholder,
  9803. .list input[type="tel"]::placeholder,
  9804. .list input[type="url"]::placeholder,
  9805. .list input[type="date"]::placeholder,
  9806. .list input[type="datetime-local"]::placeholder,
  9807. .list input[type="time"]::placeholder,
  9808. .list input[type="number"]::placeholder,
  9809. .list select::placeholder {
  9810. color: var(--f7-input-placeholder-color);
  9811. }
  9812. .list textarea {
  9813. width: 100%;
  9814. color: var(--f7-input-text-color);
  9815. font-size: var(--f7-input-font-size);
  9816. resize: none;
  9817. line-height: 1.4;
  9818. height: var(--f7-textarea-height);
  9819. background-color: var(--f7-input-bg-color, transparent);
  9820. padding-top: var(--f7-textarea-padding-vertical);
  9821. padding-bottom: var(--f7-textarea-padding-vertical);
  9822. padding-left: var(--f7-input-padding-left);
  9823. padding-right: var(--f7-input-padding-right);
  9824. }
  9825. .list textarea::-webkit-input-placeholder {
  9826. color: var(--f7-input-placeholder-color);
  9827. }
  9828. .list textarea::-moz-placeholder {
  9829. color: var(--f7-input-placeholder-color);
  9830. }
  9831. .list textarea::-ms-input-placeholder {
  9832. color: var(--f7-input-placeholder-color);
  9833. }
  9834. .list textarea::placeholder {
  9835. color: var(--f7-input-placeholder-color);
  9836. }
  9837. .list textarea.resizable {
  9838. height: var(--f7-input-height);
  9839. }
  9840. .list input[type="datetime-local"] {
  9841. max-width: 50vw;
  9842. }
  9843. .list input[type="time"],
  9844. .list input[type="date"],
  9845. .list input[type="datetime-local"] {
  9846. line-height: var(--f7-input-height);
  9847. }
  9848. .list .item-label,
  9849. .list .item-floating-label {
  9850. width: 100%;
  9851. vertical-align: top;
  9852. flex-shrink: 0;
  9853. font-size: var(--f7-label-font-size);
  9854. font-weight: var(--f7-label-font-weight);
  9855. line-height: var(--f7-label-line-height);
  9856. color: var(--f7-label-text-color);
  9857. transition-duration: 200ms;
  9858. transition-property: transform, color;
  9859. }
  9860. .list .item-floating-label {
  9861. --label-height: calc(var(--f7-label-font-size) * var(--f7-label-line-height));
  9862. transform: scale(var(--f7-floating-label-scale)) translateY(calc((var(--f7-input-height) / 2 + 50%) / var(--f7-floating-label-scale)));
  9863. color: var(--f7-input-placeholder-color);
  9864. width: auto;
  9865. max-width: calc(100% / var(--f7-floating-label-scale));
  9866. pointer-events: none;
  9867. left: var(--f7-input-padding-left);
  9868. transform-origin: left center;
  9869. }
  9870. .list .item-floating-label ~ .item-input-wrap input::-webkit-input-placeholder,
  9871. .list .item-floating-label ~ .item-input-wrap textarea::-webkit-input-placeholder {
  9872. opacity: 0;
  9873. transition-duration: 100ms;
  9874. }
  9875. .list .item-floating-label ~ .item-input-wrap input::-moz-placeholder,
  9876. .list .item-floating-label ~ .item-input-wrap textarea::-moz-placeholder {
  9877. opacity: 0;
  9878. transition-duration: 100ms;
  9879. }
  9880. .list .item-floating-label ~ .item-input-wrap input::-ms-input-placeholder,
  9881. .list .item-floating-label ~ .item-input-wrap textarea::-ms-input-placeholder {
  9882. opacity: 0;
  9883. transition-duration: 100ms;
  9884. }
  9885. .list .item-floating-label ~ .item-input-wrap input::placeholder,
  9886. .list .item-floating-label ~ .item-input-wrap textarea::placeholder {
  9887. opacity: 0;
  9888. transition-duration: 100ms;
  9889. }
  9890. .list .item-floating-label ~ .item-input-wrap input.input-focused::-webkit-input-placeholder,
  9891. .list .item-floating-label ~ .item-input-wrap textarea.input-focused::-webkit-input-placeholder {
  9892. opacity: 1;
  9893. transition-duration: 300ms;
  9894. }
  9895. .list .item-floating-label ~ .item-input-wrap input.input-focused::-moz-placeholder,
  9896. .list .item-floating-label ~ .item-input-wrap textarea.input-focused::-moz-placeholder {
  9897. opacity: 1;
  9898. transition-duration: 300ms;
  9899. }
  9900. .list .item-floating-label ~ .item-input-wrap input.input-focused::-ms-input-placeholder,
  9901. .list .item-floating-label ~ .item-input-wrap textarea.input-focused::-ms-input-placeholder {
  9902. opacity: 1;
  9903. transition-duration: 300ms;
  9904. }
  9905. .list .item-floating-label ~ .item-input-wrap input.input-focused::placeholder,
  9906. .list .item-floating-label ~ .item-input-wrap textarea.input-focused::placeholder {
  9907. opacity: 1;
  9908. transition-duration: 300ms;
  9909. }
  9910. .list .item-input-with-value .item-floating-label {
  9911. color: var(--f7-label-text-color);
  9912. }
  9913. .list .item-input-with-value .item-floating-label,
  9914. .list .item-input-focused .item-floating-label {
  9915. transform: scale(1) translateY(0);
  9916. }
  9917. .list .item-input-wrap {
  9918. width: 100%;
  9919. flex-shrink: 1;
  9920. position: relative;
  9921. }
  9922. .item-input .item-inner {
  9923. display: flex;
  9924. flex-direction: column;
  9925. align-items: flex-start;
  9926. }
  9927. .item-input-error-message,
  9928. .input-error-message {
  9929. font-size: var(--f7-input-error-font-size);
  9930. line-height: var(--f7-input-error-line-height);
  9931. color: var(--f7-input-error-text-color);
  9932. font-weight: var(--f7-input-error-font-weight);
  9933. display: none;
  9934. box-sizing: border-box;
  9935. }
  9936. .item-input-info,
  9937. .input-info {
  9938. font-size: var(--f7-input-info-font-size);
  9939. line-height: var(--f7-input-info-line-height);
  9940. color: var(--f7-input-info-text-color);
  9941. }
  9942. .item-input-invalid .item-input-error-message,
  9943. .input-invalid .item-input-error-message,
  9944. .item-input-invalid .input-error-message,
  9945. .input-invalid .input-error-message {
  9946. display: block;
  9947. }
  9948. .item-input-invalid .item-input-info,
  9949. .input-invalid .item-input-info,
  9950. .item-input-invalid .input-info,
  9951. .input-invalid .input-info {
  9952. display: none;
  9953. }
  9954. .inline-labels .item-inner,
  9955. .inline-label .item-inner {
  9956. display: flex;
  9957. align-items: center;
  9958. flex-direction: row;
  9959. }
  9960. .inline-labels .item-label,
  9961. .inline-label .item-label,
  9962. .inline-labels .item-floating-label,
  9963. .inline-label .item-floating-label {
  9964. padding-top: var(--f7-inline-label-padding-top);
  9965. align-self: flex-start;
  9966. width: 35%;
  9967. font-size: var(--f7-inline-label-font-size);
  9968. line-height: var(--f7-inline-label-line-height);
  9969. }
  9970. .inline-labels .item-label + .item-input-wrap,
  9971. .inline-label .item-label + .item-input-wrap,
  9972. .inline-labels .item-floating-label + .item-input-wrap,
  9973. .inline-label .item-floating-label + .item-input-wrap {
  9974. margin-left: 8px;
  9975. }
  9976. .input {
  9977. position: relative;
  9978. }
  9979. .input input,
  9980. .input select,
  9981. .input textarea {
  9982. width: 100%;
  9983. }
  9984. .input-clear-button {
  9985. opacity: 0;
  9986. pointer-events: none;
  9987. visibility: hidden;
  9988. transition-duration: 100ms;
  9989. position: absolute;
  9990. top: 50%;
  9991. border: none;
  9992. padding: 0;
  9993. margin: 0;
  9994. outline: 0;
  9995. z-index: 1;
  9996. cursor: pointer;
  9997. background: none;
  9998. width: var(--f7-input-clear-button-size);
  9999. height: var(--f7-input-clear-button-size);
  10000. margin-top: calc(-1 * var(--f7-input-clear-button-size) / 2);
  10001. color: var(--f7-input-clear-button-color);
  10002. right: 0;
  10003. }
  10004. .input-clear-button:after {
  10005. font-family: 'framework7-core-icons';
  10006. font-weight: normal;
  10007. font-style: normal;
  10008. line-height: 1;
  10009. letter-spacing: normal;
  10010. text-transform: none;
  10011. white-space: nowrap;
  10012. word-wrap: normal;
  10013. direction: ltr;
  10014. -webkit-font-smoothing: antialiased;
  10015. text-rendering: optimizeLegibility;
  10016. -moz-osx-font-smoothing: grayscale;
  10017. -moz-font-feature-settings: "liga";
  10018. font-feature-settings: "liga";
  10019. text-align: center;
  10020. display: block;
  10021. width: 100%;
  10022. height: 100%;
  10023. font-size: 20px;
  10024. }
  10025. .input-clear-button:before {
  10026. position: absolute;
  10027. content: '';
  10028. left: 50%;
  10029. top: 50%;
  10030. }
  10031. .item-input-wrap .input-clear-button {
  10032. top: calc(var(--f7-input-height) / 2);
  10033. }
  10034. .input-clear-button.active-state {
  10035. opacity: 0.75 !important;
  10036. }
  10037. .input-with-value ~ .input-clear-button,
  10038. .item-input-with-value .input-clear-button,
  10039. .input-with-value .input-clear-button {
  10040. opacity: 1;
  10041. pointer-events: auto;
  10042. visibility: visible;
  10043. }
  10044. .input-dropdown-wrap,
  10045. .input-dropdown {
  10046. position: relative;
  10047. }
  10048. .input-dropdown-wrap:before,
  10049. .input-dropdown:before {
  10050. content: '';
  10051. pointer-events: none;
  10052. position: absolute;
  10053. top: 50%;
  10054. margin-top: -2px;
  10055. width: 0;
  10056. height: 0;
  10057. border-left: 4px solid transparent;
  10058. border-right: 4px solid transparent;
  10059. border-top: 5px solid #727272;
  10060. right: 6px;
  10061. }
  10062. .input-dropdown-wrap select,
  10063. .input-dropdown select,
  10064. .input-dropdown-wrap input,
  10065. .input-dropdown input,
  10066. .input-dropdown-wrap textarea,
  10067. .input-dropdown textarea {
  10068. padding-right: calc(20px + var(--f7-input-padding-right));
  10069. }
  10070. .input-outline:after,
  10071. .item-input-outline .item-input-wrap:after {
  10072. content: '';
  10073. position: absolute;
  10074. left: 0;
  10075. top: 0;
  10076. width: 100%;
  10077. height: 100%;
  10078. box-sizing: border-box;
  10079. border: 1px solid var(--f7-input-outline-border-color);
  10080. border-radius: var(--f7-input-outline-border-radius);
  10081. transition-duration: 200ms;
  10082. pointer-events: none;
  10083. }
  10084. .input-outline.input-focused:after,
  10085. .item-input-outline.item-input-focused .item-input-wrap:after {
  10086. border-width: 2px;
  10087. border-color: var(--f7-input-outline-focused-border-color, var(--f7-theme-color));
  10088. }
  10089. .input-outline.input-invalid:after,
  10090. .item-input-outline.item-input-invalid .item-input-wrap:after {
  10091. border-width: 2px;
  10092. border-color: var(--f7-input-outline-invalid-border-color, var(--f7-input-error-text-color));
  10093. }
  10094. .input-outline input,
  10095. .item-input-outline input,
  10096. .list .item-input-outline input,
  10097. .input-outline textarea,
  10098. .item-input-outline textarea,
  10099. .list .item-input-outline textarea,
  10100. .input-outline select,
  10101. .item-input-outline select,
  10102. .list .item-input-outline select {
  10103. border-radius: var(--f7-input-outline-border-radius);
  10104. padding-left: var(--f7-input-outline-padding-horizontal);
  10105. padding-right: var(--f7-input-outline-padding-horizontal);
  10106. }
  10107. .input-outline.input-dropdown:before,
  10108. .item-input-outline .input-dropdown-wrap:before {
  10109. right: 8px;
  10110. }
  10111. .input-outline.input-dropdown input,
  10112. .item-input-outline .input-dropdown-wrap input,
  10113. .input-outline.input-dropdown textarea,
  10114. .item-input-outline .input-dropdown-wrap textarea,
  10115. .input-outline.input-dropdown select,
  10116. .item-input-outline .input-dropdown-wrap select {
  10117. padding-right: 20px;
  10118. }
  10119. .input-outline .input-clear-button,
  10120. .item-input-outline .input-clear-button {
  10121. right: 8px;
  10122. }
  10123. .item-input-outline {
  10124. --f7-input-height: var(--f7-input-outline-height);
  10125. }
  10126. .item-input-outline .item-inner:after {
  10127. display: none !important;
  10128. }
  10129. .item-input-outline .item-label {
  10130. left: var(--f7-input-outline-padding-horizontal);
  10131. }
  10132. .inline-labels .item-input-outline .item-label,
  10133. .inline-label .item-input-outline .item-label,
  10134. .item-input-outline .inline-label .item-label,
  10135. .item-input-outline .inline-label.item-label {
  10136. left: 0;
  10137. }
  10138. .item-input-outline .item-floating-label {
  10139. left: calc(var(--f7-input-outline-padding-horizontal) - 4px);
  10140. padding-left: 4px;
  10141. padding-right: 4px;
  10142. background: var(--f7-page-bg-color);
  10143. z-index: 10;
  10144. margin-top: calc(-0.5 * (var(--f7-label-font-size) * var(--f7-label-line-height)));
  10145. }
  10146. .item-input-outline.item-input-with-value .item-floating-label,
  10147. .item-input-outline.item-input-focused .item-floating-label {
  10148. transform: scale(1) translateY(50%);
  10149. }
  10150. .item-input-outline .item-input-info,
  10151. .item-input-outline .item-input-error-message {
  10152. padding-left: var(--f7-input-outline-padding-horizontal);
  10153. }
  10154. .block-strong .item-input-outline .item-floating-label {
  10155. background: var(--f7-block-strong-bg-color);
  10156. }
  10157. .list .item-input-outline .item-floating-label {
  10158. background: var(--f7-list-bg-color);
  10159. }
  10160. .ios .item-label + .item-input-wrap,
  10161. .ios .item-floating-label + .item-input-wrap {
  10162. margin-top: 0;
  10163. }
  10164. .ios .item-input-focused .item-floating-label {
  10165. color: var(--f7-label-text-color);
  10166. }
  10167. .ios .item-input .item-media {
  10168. align-self: flex-start;
  10169. }
  10170. .ios .item-input-wrap {
  10171. margin-top: calc(-1 * var(--f7-list-item-padding-vertical));
  10172. margin-bottom: calc(-1 * var(--f7-list-item-padding-vertical));
  10173. }
  10174. .ios .inline-labels .item-label + .item-input-wrap,
  10175. .ios .inline-label .item-label + .item-input-wrap,
  10176. .ios .inline-labels .item-floating-label + .item-input-wrap,
  10177. .ios .inline-label .item-floating-label + .item-input-wrap {
  10178. margin-top: calc(-1 * var(--f7-list-item-padding-vertical));
  10179. }
  10180. .ios .inline-labels .item-input-wrap,
  10181. .ios .inline-label .item-input-wrap {
  10182. margin-top: calc(-1 * var(--f7-list-item-padding-vertical));
  10183. }
  10184. .ios .item-input-error-message,
  10185. .ios .item-input-info,
  10186. .ios .input-error-message,
  10187. .ios .input-info {
  10188. position: relative;
  10189. margin-bottom: 6px;
  10190. margin-top: -8px;
  10191. }
  10192. .ios .item-input-focused .item-label,
  10193. .ios .item-input-focused .item-floating-label {
  10194. color: var(--f7-label-focused-text-color, var(--f7-label-text-color));
  10195. }
  10196. .ios .item-input-focused .item-inner:after {
  10197. background: var(--f7-input-focused-border-color, var(--f7-list-item-border-color));
  10198. }
  10199. .ios .item-input-invalid .item-label,
  10200. .ios .item-input-invalid .item-floating-label {
  10201. color: var(--f7-label-invalid-text-color, var(--f7-label-text-color));
  10202. }
  10203. .ios .item-input-invalid .item-inner:after {
  10204. background: var(--f7-input-invalid-border-color, var(--f7-list-item-border-color));
  10205. }
  10206. .ios .item-input-invalid input,
  10207. .ios .input-invalid input,
  10208. .ios .item-input-invalid select,
  10209. .ios .input-invalid select,
  10210. .ios .item-input-invalid textarea,
  10211. .ios .input-invalid textarea {
  10212. color: var(--f7-input-invalid-text-color, var(--f7-input-error-text-color));
  10213. }
  10214. .ios .input-clear-button:after {
  10215. content: 'delete_round_ios';
  10216. font-size: calc(var(--f7-input-clear-button-size) / (14 / 10));
  10217. line-height: 1.4;
  10218. }
  10219. .ios .input-clear-button:before {
  10220. width: 44px;
  10221. height: 44px;
  10222. margin-left: -22px;
  10223. margin-top: -22px;
  10224. }
  10225. .ios .item-input-outline .item-input-wrap,
  10226. .ios .input-outline .item-input-wrap {
  10227. margin-top: 0;
  10228. margin-bottom: 0;
  10229. }
  10230. .ios .item-input-outline .item-input-error-message,
  10231. .ios .input-outline .item-input-error-message,
  10232. .ios .item-input-outline .item-input-info,
  10233. .ios .input-outline .item-input-info,
  10234. .ios .item-input-outline .input-error-message,
  10235. .ios .input-outline .input-error-message,
  10236. .ios .item-input-outline .input-info,
  10237. .ios .input-outline .input-info {
  10238. margin-top: 0;
  10239. white-space: normal;
  10240. overflow: hidden;
  10241. text-overflow: ellipsis;
  10242. }
  10243. .ios .item-input-outline .item-input-info,
  10244. .ios .input-outline .item-input-info,
  10245. .ios .item-input-outline .input-info,
  10246. .ios .input-outline .input-info {
  10247. margin-bottom: calc(-1 * var(--f7-input-info-font-size) * var(--f7-input-info-line-height));
  10248. }
  10249. .ios .item-input-outline .item-input-error-message,
  10250. .ios .input-outline .item-input-error-message,
  10251. .ios .item-input-outline .input-error-message,
  10252. .ios .input-outline .input-error-message {
  10253. margin-bottom: calc(-1 * var(--f7-input-error-font-size) * var(--f7-input-error-line-height));
  10254. }
  10255. .ios .item-input-outline.item-input-with-info .item-input-wrap,
  10256. .ios .input-outline.item-input-with-info .item-input-wrap,
  10257. .ios .item-input-outline.input-with-info .item-input-wrap,
  10258. .ios .input-outline.input-with-info .item-input-wrap {
  10259. margin-bottom: calc(var(--f7-input-info-font-size) * var(--f7-input-info-line-height));
  10260. }
  10261. .ios .item-input-outline.item-input-with-error-message .item-input-wrap,
  10262. .ios .input-outline.item-input-with-error-message .item-input-wrap,
  10263. .ios .item-input-outline.input-with-error-message .item-input-wrap,
  10264. .ios .input-outline.input-with-error-message .item-input-wrap {
  10265. margin-bottom: calc(var(--f7-input-error-font-size) * var(--f7-input-error-line-height));
  10266. }
  10267. .md .item-input:not(.item-input-outline) .item-input-wrap:after,
  10268. .md .input:not(.input-outline):after {
  10269. content: '';
  10270. position: absolute;
  10271. background-color: var(--f7-list-item-border-color);
  10272. display: block;
  10273. z-index: 15;
  10274. top: auto;
  10275. right: auto;
  10276. bottom: 0;
  10277. left: 0;
  10278. height: 1px;
  10279. width: 100%;
  10280. transform-origin: 50% 100%;
  10281. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  10282. }
  10283. .md .item-input:not(.item-input-outline) .item-input-wrap:after,
  10284. .md .input:not(.input-outline):after {
  10285. transition-duration: 200ms;
  10286. }
  10287. .md .item-input-wrap {
  10288. min-height: var(--f7-input-height);
  10289. }
  10290. .md .item-input .item-media {
  10291. align-self: flex-end;
  10292. }
  10293. .md .item-input .item-inner:after {
  10294. display: none !important;
  10295. }
  10296. .md .inline-labels .item-media,
  10297. .md .inline-label .item-media {
  10298. align-self: flex-start;
  10299. padding-top: 14px;
  10300. }
  10301. .md .item-input-with-error-message,
  10302. .md .item-input-with-info,
  10303. .md .input-with-error-message,
  10304. .md .input-with-info {
  10305. padding-bottom: 20px;
  10306. }
  10307. .md .item-input-error-message,
  10308. .md .item-input-info,
  10309. .md .input-error-message,
  10310. .md .input-info {
  10311. position: absolute;
  10312. top: 100%;
  10313. margin-top: 4px;
  10314. white-space: nowrap;
  10315. overflow: hidden;
  10316. text-overflow: ellipsis;
  10317. width: 100%;
  10318. left: 0;
  10319. }
  10320. .md .item-input-focused .item-label,
  10321. .md .item-input-focused .item-floating-label {
  10322. color: var(--f7-label-focused-text-color, var(--f7-theme-color));
  10323. }
  10324. .md .item-input-focused:not(.item-input-outline) .item-input-wrap:after,
  10325. .md .input-focused:not(.input-outline):after {
  10326. background: var(--f7-input-focused-border-color, var(--f7-theme-color));
  10327. }
  10328. .md .item-input-invalid:not(.item-input-outline) .item-input-wrap:after,
  10329. .md .item-input-focused:not(.item-input-outline) .item-input-wrap:after,
  10330. .md .input-invalid:not(.input-outline):after,
  10331. .md .input-focused:not(.input-outline):after {
  10332. transform: scaleY(2) !important;
  10333. }
  10334. .md .item-input-invalid:not(.item-input-outline) .item-input-wrap:after,
  10335. .md .input-invalid:not(.input-outline):after {
  10336. background: var(--f7-input-invalid-border-color, var(--f7-input-error-text-color));
  10337. }
  10338. .md .item-input-invalid .item-label,
  10339. .md .item-input-invalid .item-floating-label {
  10340. color: var(--f7-label-invalid-text-color, var(--f7-input-error-text-color));
  10341. }
  10342. .md .item-input-invalid input,
  10343. .md .input-invalid input,
  10344. .md .item-input-invalid select,
  10345. .md .input-invalid select,
  10346. .md .item-input-invalid textarea,
  10347. .md .input-invalid textarea {
  10348. color: var(--f7-input-invalid-text-color, var(--f7-input-text-color));
  10349. }
  10350. .md .input-clear-button:after {
  10351. font-size: calc(var(--f7-input-clear-button-size) / (24 / 20));
  10352. content: 'delete_round_md';
  10353. line-height: 1.2;
  10354. }
  10355. .md .input-clear-button:before {
  10356. width: 48px;
  10357. height: 48px;
  10358. margin-left: -24px;
  10359. margin-top: -24px;
  10360. }
  10361. .aurora .item-label + .item-input-wrap,
  10362. .aurora .item-floating-label + .item-input-wrap {
  10363. margin-top: 0;
  10364. }
  10365. .aurora .item-input-focused .item-floating-label {
  10366. color: var(--f7-label-text-color);
  10367. }
  10368. .aurora .item-input .item-media {
  10369. align-self: flex-start;
  10370. }
  10371. .aurora .item-input-error-message,
  10372. .aurora .item-input-info,
  10373. .aurora .input-error-message,
  10374. .aurora .input-info {
  10375. position: relative;
  10376. }
  10377. .aurora .item-input-focused .item-label,
  10378. .aurora .item-input-focused .item-floating-label {
  10379. color: var(--f7-label-focused-text-color, var(--f7-label-text-color));
  10380. }
  10381. .aurora .item-input-focused .item-inner:after {
  10382. background: var(--f7-input-focused-border-color, var(--f7-list-item-border-color));
  10383. }
  10384. .aurora .item-input-invalid .item-label,
  10385. .aurora .item-input-invalid .item-floating-label {
  10386. color: var(--f7-label-invalid-text-color, var(--f7-label-text-color));
  10387. }
  10388. .aurora .item-input-invalid .item-inner:after {
  10389. background: var(--f7-input-invalid-border-color, var(--f7-list-item-border-color));
  10390. }
  10391. .aurora .item-input-invalid input,
  10392. .aurora .input-invalid input,
  10393. .aurora .item-input-invalid select,
  10394. .aurora .input-invalid select,
  10395. .aurora .item-input-invalid textarea,
  10396. .aurora .input-invalid textarea {
  10397. color: var(--f7-input-invalid-text-color, var(--f7-input-error-text-color));
  10398. }
  10399. .aurora .input-clear-button:after {
  10400. content: 'delete_round_ios';
  10401. font-size: calc(var(--f7-input-clear-button-size) / (14 / 10));
  10402. line-height: 1.4;
  10403. }
  10404. .aurora .input-clear-button:before {
  10405. width: 28px;
  10406. height: 28px;
  10407. margin-left: -14px;
  10408. margin-top: -14px;
  10409. }
  10410. .aurora .item-input-outline .item-input-wrap,
  10411. .aurora .input-outline .item-input-wrap {
  10412. margin-top: 0;
  10413. margin-bottom: 0;
  10414. }
  10415. .aurora .item-input-outline .item-input-error-message,
  10416. .aurora .input-outline .item-input-error-message,
  10417. .aurora .item-input-outline .item-input-info,
  10418. .aurora .input-outline .item-input-info,
  10419. .aurora .item-input-outline .input-error-message,
  10420. .aurora .input-outline .input-error-message,
  10421. .aurora .item-input-outline .input-info,
  10422. .aurora .input-outline .input-info {
  10423. margin-top: 0;
  10424. white-space: normal;
  10425. overflow: hidden;
  10426. text-overflow: ellipsis;
  10427. }
  10428. .aurora .item-input-outline .item-input-info,
  10429. .aurora .input-outline .item-input-info,
  10430. .aurora .item-input-outline .input-info,
  10431. .aurora .input-outline .input-info {
  10432. margin-bottom: calc(-1 * var(--f7-input-info-font-size) * var(--f7-input-info-line-height));
  10433. }
  10434. .aurora .item-input-outline .item-input-error-message,
  10435. .aurora .input-outline .item-input-error-message,
  10436. .aurora .item-input-outline .input-error-message,
  10437. .aurora .input-outline .input-error-message {
  10438. margin-bottom: calc(-1 * var(--f7-input-error-font-size) * var(--f7-input-error-line-height));
  10439. }
  10440. .aurora .item-input-outline.item-input-with-info .item-input-wrap,
  10441. .aurora .input-outline.item-input-with-info .item-input-wrap,
  10442. .aurora .item-input-outline.input-with-info .item-input-wrap,
  10443. .aurora .input-outline.input-with-info .item-input-wrap {
  10444. margin-bottom: calc(var(--f7-input-info-font-size) * var(--f7-input-info-line-height));
  10445. }
  10446. .aurora .item-input-outline.item-input-with-error-message .item-input-wrap,
  10447. .aurora .input-outline.item-input-with-error-message .item-input-wrap,
  10448. .aurora .item-input-outline.input-with-error-message .item-input-wrap,
  10449. .aurora .input-outline.input-with-error-message .item-input-wrap {
  10450. margin-bottom: calc(var(--f7-input-error-font-size) * var(--f7-input-error-line-height));
  10451. }
  10452. /* === Checkbox === */
  10453. :root {
  10454. /* --f7-checkbox-active-color: var(--f7-theme-color); */
  10455. --f7-checkbox-icon-color: #fff;
  10456. }
  10457. :root .theme-dark,
  10458. :root.theme-dark {
  10459. --f7-checkbox-inactive-color: rgba(255, 255, 255, 0.3);
  10460. }
  10461. .ios {
  10462. --f7-checkbox-size: 22px;
  10463. --f7-checkbox-border-radius: 50%;
  10464. --f7-checkbox-border-width: 1px;
  10465. --f7-checkbox-inactive-color: #c7c7cc;
  10466. --f7-checkbox-extra-margin: 0px;
  10467. }
  10468. .md {
  10469. --f7-checkbox-size: 18px;
  10470. --f7-checkbox-border-radius: 2px;
  10471. --f7-checkbox-border-width: 2px;
  10472. --f7-checkbox-inactive-color: #6d6d6d;
  10473. --f7-checkbox-extra-margin: 22px;
  10474. }
  10475. .aurora {
  10476. --f7-checkbox-size: 14px;
  10477. --f7-checkbox-border-radius: 2px;
  10478. --f7-checkbox-border-width: 1px;
  10479. --f7-checkbox-inactive-color: #888;
  10480. --f7-checkbox-extra-margin: 0px;
  10481. }
  10482. .checkbox {
  10483. position: relative;
  10484. display: inline-block;
  10485. vertical-align: middle;
  10486. z-index: 1;
  10487. background-color: transparent;
  10488. --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.5);
  10489. }
  10490. .icon-checkbox,
  10491. .checkbox i {
  10492. flex-shrink: 0;
  10493. border: var(--f7-checkbox-border-width) solid var(--f7-checkbox-inactive-color);
  10494. width: var(--f7-checkbox-size);
  10495. height: var(--f7-checkbox-size);
  10496. border-radius: var(--f7-checkbox-border-radius);
  10497. box-sizing: border-box;
  10498. position: relative;
  10499. display: block;
  10500. }
  10501. .icon-checkbox:after,
  10502. .checkbox i:after {
  10503. font-family: 'framework7-core-icons';
  10504. font-weight: normal;
  10505. font-style: normal;
  10506. line-height: 1;
  10507. letter-spacing: normal;
  10508. text-transform: none;
  10509. white-space: nowrap;
  10510. word-wrap: normal;
  10511. direction: ltr;
  10512. -webkit-font-smoothing: antialiased;
  10513. text-rendering: optimizeLegibility;
  10514. -moz-osx-font-smoothing: grayscale;
  10515. -moz-font-feature-settings: "liga";
  10516. font-feature-settings: "liga";
  10517. text-align: center;
  10518. display: block;
  10519. width: 100%;
  10520. height: 100%;
  10521. font-size: 20px;
  10522. width: var(--f7-checkbox-size);
  10523. height: var(--f7-checkbox-size);
  10524. line-height: var(--f7-checkbox-size);
  10525. left: calc(0px - var(--f7-checkbox-border-width));
  10526. top: calc(0px - var(--f7-checkbox-border-width));
  10527. opacity: 0;
  10528. color: var(--f7-checkbox-icon-color);
  10529. position: relative;
  10530. transition-property: opacity;
  10531. }
  10532. label.item-checkbox input[type="checkbox"]:not(:checked) ~ .icon-checkbox:after,
  10533. label.item-checkbox input[type="checkbox"]:not(:checked) ~ * .icon-checkbox:after,
  10534. .checkbox input[type="checkbox"]:not(:checked) ~ i:after {
  10535. font-size: 0;
  10536. }
  10537. label.item-checkbox input[type="checkbox"]:checked ~ .icon-checkbox,
  10538. label.item-checkbox input[type="checkbox"]:checked ~ * .icon-checkbox,
  10539. .checkbox input[type="checkbox"]:checked ~ i,
  10540. label.item-checkbox input[type="checkbox"]:indeterminate ~ .icon-checkbox,
  10541. label.item-checkbox input[type="checkbox"]:indeterminate ~ * .icon-checkbox,
  10542. .checkbox input[type="checkbox"]:indeterminate ~ i {
  10543. border-color: var(--f7-checkbox-active-color, var(--f7-theme-color));
  10544. background-color: var(--f7-checkbox-active-color, var(--f7-theme-color));
  10545. }
  10546. label.item-checkbox input[type="checkbox"]:checked ~ .icon-checkbox:after,
  10547. label.item-checkbox input[type="checkbox"]:checked ~ * .icon-checkbox:after,
  10548. .checkbox input[type="checkbox"]:checked ~ i:after,
  10549. label.item-checkbox input[type="checkbox"]:indeterminate ~ .icon-checkbox:after,
  10550. label.item-checkbox input[type="checkbox"]:indeterminate ~ * .icon-checkbox:after,
  10551. .checkbox input[type="checkbox"]:indeterminate ~ i:after {
  10552. opacity: 1;
  10553. }
  10554. label.item-checkbox input[type="checkbox"]:indeterminate ~ .icon-checkbox:after,
  10555. label.item-checkbox input[type="checkbox"]:indeterminate ~ * .icon-checkbox:after,
  10556. .checkbox input[type="checkbox"]:indeterminate ~ i:after {
  10557. font-size: 0;
  10558. content: '';
  10559. position: absolute;
  10560. top: 50%;
  10561. width: 70%;
  10562. background: #fff;
  10563. height: 2px;
  10564. border-radius: 2px;
  10565. margin-top: -1px;
  10566. left: 15%;
  10567. transition: 0ms;
  10568. }
  10569. label.item-checkbox,
  10570. .checkbox {
  10571. cursor: pointer;
  10572. }
  10573. label.item-checkbox input[type="checkbox"],
  10574. .checkbox input[type="checkbox"],
  10575. label.item-checkbox input[type="radio"],
  10576. .checkbox input[type="radio"] {
  10577. display: none;
  10578. }
  10579. label.item-checkbox {
  10580. transition-duration: 300ms;
  10581. }
  10582. label.item-checkbox .item-content .item-media,
  10583. label.item-checkbox.item-content .item-media {
  10584. align-self: center;
  10585. }
  10586. label.item-checkbox > .icon-checkbox {
  10587. margin-right: calc(var(--f7-list-item-media-margin) + var(--f7-checkbox-extra-margin));
  10588. }
  10589. label.item-checkbox.active-state {
  10590. background-color: var(--f7-list-link-pressed-bg-color);
  10591. }
  10592. label.item-checkbox.active-state:after {
  10593. background-color: transparent;
  10594. }
  10595. label.item-checkbox.disabled,
  10596. .disabled label.item-checkbox {
  10597. opacity: 0.55;
  10598. pointer-events: none;
  10599. opacity: 0.55 !important;
  10600. pointer-events: none !important;
  10601. }
  10602. .ios .icon-checkbox:after,
  10603. .ios .checkbox i:after {
  10604. content: 'checkbox_ios';
  10605. font-size: 21px;
  10606. }
  10607. .ios label.item-checkbox.active-state {
  10608. transition-duration: 0ms;
  10609. }
  10610. .ios label.item-checkbox input[type="checkbox"]:indeterminate ~ .icon-checkbox:after,
  10611. .ios label.item-checkbox input[type="checkbox"]:indeterminate ~ * .icon-checkbox:after,
  10612. .ios .checkbox input[type="checkbox"]:indeterminate ~ i:after {
  10613. height: 1px;
  10614. margin-top: 0px;
  10615. }
  10616. .md .icon-checkbox,
  10617. .md .checkbox i {
  10618. transition-duration: 200ms;
  10619. }
  10620. .md .icon-checkbox:after,
  10621. .md .checkbox i:after {
  10622. content: 'checkbox_md';
  10623. transition-duration: 200ms;
  10624. font-size: 15px;
  10625. }
  10626. .md label.item-checkbox {
  10627. position: relative;
  10628. overflow: hidden;
  10629. z-index: 0;
  10630. }
  10631. .aurora .icon-checkbox,
  10632. .aurora .checkbox i {
  10633. transition-duration: 150ms;
  10634. }
  10635. .aurora .icon-checkbox:after,
  10636. .aurora .checkbox i:after {
  10637. content: 'checkbox_aurora';
  10638. transition-duration: 150ms;
  10639. font-size: 19px;
  10640. }
  10641. .aurora .icon-checkbox:before,
  10642. .aurora .checkbox i:before {
  10643. content: '';
  10644. position: absolute;
  10645. left: 0;
  10646. top: 0;
  10647. width: 100%;
  10648. height: 100%;
  10649. background: rgba(0, 0, 0, 0.1);
  10650. opacity: 0;
  10651. transition-duration: 150ms;
  10652. }
  10653. .aurora .checkbox.active-state i:before {
  10654. opacity: 1;
  10655. }
  10656. .aurora label.item-checkbox {
  10657. position: relative;
  10658. overflow: hidden;
  10659. z-index: 0;
  10660. }
  10661. /* === Radio === */
  10662. :root {
  10663. /*
  10664. --f7-radio-active-color: var(--f7-theme-color);
  10665. */
  10666. --f7-radio-border-radius: 50%;
  10667. }
  10668. :root .theme-dark,
  10669. :root.theme-dark {
  10670. --f7-radio-inactive-color: rgba(255, 255, 255, 0.3);
  10671. }
  10672. .ios {
  10673. --f7-radio-size: 22px;
  10674. --f7-radio-border-width: 1px;
  10675. --f7-radio-inactive-color: #c7c7cc;
  10676. --f7-radio-extra-margin: 0px;
  10677. }
  10678. .md {
  10679. --f7-radio-size: 20px;
  10680. --f7-radio-border-width: 2px;
  10681. --f7-radio-inactive-color: #6d6d6d;
  10682. --f7-radio-extra-margin: 22px;
  10683. }
  10684. .aurora {
  10685. --f7-radio-size: 16px;
  10686. --f7-radio-border-width: 1px;
  10687. --f7-radio-inactive-color: #888;
  10688. --f7-radio-extra-margin: 0px;
  10689. }
  10690. .radio {
  10691. position: relative;
  10692. display: inline-block;
  10693. vertical-align: middle;
  10694. z-index: 1;
  10695. --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.5);
  10696. }
  10697. .icon-radio {
  10698. width: var(--f7-radio-size);
  10699. height: var(--f7-radio-size);
  10700. border-radius: var(--f7-radio-border-radius);
  10701. position: relative;
  10702. box-sizing: border-box;
  10703. display: block;
  10704. flex-shrink: 0;
  10705. }
  10706. .radio .icon-radio,
  10707. .md .icon-radio,
  10708. .aurora .icon-radio {
  10709. border: var(--f7-radio-border-width) solid var(--f7-radio-inactive-color);
  10710. }
  10711. label.item-radio,
  10712. .radio {
  10713. cursor: pointer;
  10714. }
  10715. label.item-radio input[type="checkbox"],
  10716. .radio input[type="checkbox"],
  10717. label.item-radio input[type="radio"],
  10718. .radio input[type="radio"] {
  10719. display: none;
  10720. }
  10721. label.item-radio {
  10722. transition-duration: 300ms;
  10723. }
  10724. label.item-radio .item-content .item-media,
  10725. label.item-radio.item-content .item-media {
  10726. align-self: center;
  10727. }
  10728. label.item-radio.active-state {
  10729. background-color: var(--f7-list-link-pressed-bg-color);
  10730. }
  10731. label.item-radio.active-state:after {
  10732. background-color: transparent;
  10733. }
  10734. label.item-radio.disabled,
  10735. .disabled label.item-radio {
  10736. opacity: 0.55;
  10737. pointer-events: none;
  10738. opacity: 0.55 !important;
  10739. pointer-events: none !important;
  10740. }
  10741. .ios .icon-radio:after {
  10742. font-family: 'framework7-core-icons';
  10743. font-weight: normal;
  10744. font-style: normal;
  10745. line-height: 1;
  10746. letter-spacing: normal;
  10747. text-transform: none;
  10748. white-space: nowrap;
  10749. word-wrap: normal;
  10750. direction: ltr;
  10751. -webkit-font-smoothing: antialiased;
  10752. text-rendering: optimizeLegibility;
  10753. -moz-osx-font-smoothing: grayscale;
  10754. -moz-font-feature-settings: "liga";
  10755. font-feature-settings: "liga";
  10756. text-align: center;
  10757. display: block;
  10758. width: 100%;
  10759. height: 100%;
  10760. width: calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2);
  10761. height: calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2);
  10762. line-height: calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2 + 1px);
  10763. font-size: 20px;
  10764. content: 'radio_ios';
  10765. color: var(--f7-radio-active-color, var(--f7-theme-color));
  10766. opacity: 0;
  10767. }
  10768. .ios label.item-radio input[type="radio"]:checked ~ .icon-radio:after,
  10769. .ios label.item-radio input[type="radio"]:checked ~ * .icon-radio:after,
  10770. .ios .radio input[type="radio"]:checked ~ .icon-radio:after {
  10771. opacity: 1;
  10772. }
  10773. .ios .radio input[type="radio"]:checked ~ .icon-radio {
  10774. border-color: var(--f7-radio-active-color, var(--f7-theme-color));
  10775. }
  10776. .ios label.item-radio input[type="radio"] ~ .icon-radio {
  10777. position: absolute;
  10778. top: 50%;
  10779. margin-top: -11px;
  10780. right: calc(var(--f7-safe-area-right) + 10px);
  10781. }
  10782. .ios label.item-radio .item-inner {
  10783. padding-right: calc(var(--f7-safe-area-right) + 35px);
  10784. }
  10785. .ios label.item-radio.active-state {
  10786. transition-duration: 0ms;
  10787. }
  10788. .md .icon-radio {
  10789. transition-duration: 200ms;
  10790. }
  10791. .md .icon-radio:after {
  10792. content: '';
  10793. position: absolute;
  10794. width: 10px;
  10795. height: 10px;
  10796. left: 50%;
  10797. top: 50%;
  10798. margin-left: -5px;
  10799. margin-top: -5px;
  10800. background-color: var(--f7-radio-active-color, var(--f7-theme-color));
  10801. border-radius: 50%;
  10802. transform: scale(0);
  10803. transition-duration: 200ms;
  10804. }
  10805. .md label.item-radio input[type="radio"]:checked ~ .icon-radio,
  10806. .md label.item-radio input[type="radio"]:checked ~ * .icon-radio,
  10807. .md .radio input[type="radio"]:checked ~ .icon-radio {
  10808. border-color: var(--f7-radio-active-color, var(--f7-theme-color));
  10809. }
  10810. .md label.item-radio input[type="radio"]:checked ~ .icon-radio:after,
  10811. .md label.item-radio input[type="radio"]:checked ~ * .icon-radio:after,
  10812. .md .radio input[type="radio"]:checked ~ .icon-radio:after {
  10813. background-color: var(--f7-radio-active-color, var(--f7-theme-color));
  10814. transform: scale(1);
  10815. }
  10816. .md label.item-radio {
  10817. position: relative;
  10818. overflow: hidden;
  10819. z-index: 0;
  10820. }
  10821. .md label.item-radio > .icon-radio {
  10822. margin-right: calc(var(--f7-list-item-media-margin) + var(--f7-radio-extra-margin));
  10823. }
  10824. .aurora .icon-radio {
  10825. transition-duration: 150ms;
  10826. overflow: hidden;
  10827. }
  10828. .aurora .icon-radio:after {
  10829. content: '';
  10830. position: absolute;
  10831. width: 6px;
  10832. height: 6px;
  10833. left: 50%;
  10834. top: 50%;
  10835. margin-left: -3px;
  10836. margin-top: -3px;
  10837. background-color: #fff;
  10838. border-radius: 50%;
  10839. transform: scale(0);
  10840. transition-duration: 150ms;
  10841. }
  10842. .aurora .icon-radio:before {
  10843. content: '';
  10844. position: absolute;
  10845. left: 0;
  10846. top: 0;
  10847. width: 100%;
  10848. height: 100%;
  10849. background: rgba(0, 0, 0, 0.1);
  10850. opacity: 0;
  10851. transition-duration: 150ms;
  10852. }
  10853. .aurora .radio.active-state i:before {
  10854. opacity: 1;
  10855. }
  10856. .aurora label.item-radio input[type="radio"]:checked ~ .icon-radio,
  10857. .aurora label.item-radio input[type="radio"]:checked ~ * .icon-radio,
  10858. .aurora .radio input[type="radio"]:checked ~ .icon-radio {
  10859. border-color: var(--f7-radio-active-color, var(--f7-theme-color));
  10860. background-color: var(--f7-radio-active-color, var(--f7-theme-color));
  10861. }
  10862. .aurora label.item-radio input[type="radio"]:checked ~ .icon-radio:after,
  10863. .aurora label.item-radio input[type="radio"]:checked ~ * .icon-radio:after,
  10864. .aurora .radio input[type="radio"]:checked ~ .icon-radio:after {
  10865. transform: scale(1);
  10866. }
  10867. .aurora label.item-radio {
  10868. position: relative;
  10869. overflow: hidden;
  10870. z-index: 0;
  10871. }
  10872. .aurora label.item-radio > .icon-radio {
  10873. margin-right: calc(var(--f7-list-item-media-margin) + var(--f7-radio-extra-margin));
  10874. }
  10875. /* === Toggle === */
  10876. :root {
  10877. --f7-toggle-handle-color: #fff;
  10878. }
  10879. .ios {
  10880. --f7-toggle-width: 52px;
  10881. --f7-toggle-height: 32px;
  10882. --f7-toggle-border-color: #e5e5e5;
  10883. --f7-toggle-inactive-color: #fff;
  10884. }
  10885. .ios .theme-dark,
  10886. .ios.theme-dark {
  10887. --f7-toggle-border-color: #555;
  10888. --f7-toggle-inactive-color: #222;
  10889. }
  10890. .md {
  10891. --f7-toggle-width: 36px;
  10892. --f7-toggle-height: 14px;
  10893. --f7-toggle-inactive-color: #b0afaf;
  10894. }
  10895. .md .theme-dark,
  10896. .md.theme-dark {
  10897. --f7-toggle-inactive-color: #555;
  10898. }
  10899. .aurora {
  10900. --f7-toggle-width: 40px;
  10901. --f7-toggle-height: 20px;
  10902. --f7-toggle-inactive-color: #aaa;
  10903. }
  10904. .aurora .theme-dark,
  10905. .aurora.theme-dark {
  10906. --f7-toggle-inactive-color: #555;
  10907. }
  10908. .toggle,
  10909. .toggle-icon {
  10910. width: var(--f7-toggle-width);
  10911. height: var(--f7-toggle-height);
  10912. border-radius: var(--f7-toggle-height);
  10913. }
  10914. .toggle {
  10915. display: inline-block;
  10916. vertical-align: middle;
  10917. position: relative;
  10918. box-sizing: border-box;
  10919. align-self: center;
  10920. -webkit-user-select: none;
  10921. -moz-user-select: none;
  10922. -ms-user-select: none;
  10923. user-select: none;
  10924. }
  10925. .toggle input[type="checkbox"] {
  10926. display: none;
  10927. }
  10928. .toggle input[disabled] ~ .toggle-icon {
  10929. pointer-events: none;
  10930. }
  10931. .toggle-icon {
  10932. z-index: 0;
  10933. margin: 0;
  10934. padding: 0;
  10935. -webkit-appearance: none;
  10936. -moz-appearance: none;
  10937. appearance: none;
  10938. border: none;
  10939. position: relative;
  10940. transition: 300ms;
  10941. box-sizing: border-box;
  10942. display: block;
  10943. cursor: pointer;
  10944. }
  10945. .toggle-icon:before,
  10946. .toggle-icon:after {
  10947. content: '';
  10948. will-change: transform;
  10949. }
  10950. .toggle-icon:after {
  10951. background: var(--f7-toggle-handle-color);
  10952. position: absolute;
  10953. z-index: 2;
  10954. transform: translateX(0px);
  10955. transition-duration: 300ms;
  10956. }
  10957. .ios .toggle input[type="checkbox"]:checked + .toggle-icon {
  10958. background: var(--f7-toggle-active-color, var(--f7-theme-color));
  10959. }
  10960. .ios .toggle input[type="checkbox"]:checked + .toggle-icon:before {
  10961. transform: scale(0);
  10962. }
  10963. .ios .toggle input[type="checkbox"]:checked + .toggle-icon:after {
  10964. transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height)));
  10965. }
  10966. .ios .toggle-icon {
  10967. background: var(--f7-toggle-border-color);
  10968. }
  10969. .ios .toggle-icon:before {
  10970. position: absolute;
  10971. left: 2px;
  10972. top: 2px;
  10973. width: calc(var(--f7-toggle-width) - 4px);
  10974. height: calc(var(--f7-toggle-height) - 4px);
  10975. border-radius: var(--f7-toggle-height);
  10976. box-sizing: border-box;
  10977. background: var(--f7-toggle-inactive-color);
  10978. z-index: 1;
  10979. transition-duration: 300ms;
  10980. transform: scale(1);
  10981. }
  10982. .ios .toggle-icon:after {
  10983. height: calc(var(--f7-toggle-height) - 4px);
  10984. width: calc(var(--f7-toggle-height) - 4px);
  10985. top: 2px;
  10986. left: 2px;
  10987. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  10988. border-radius: calc(var(--f7-toggle-height) - 4px);
  10989. }
  10990. .ios .toggle-active-state input[type="checkbox"]:not(:checked) + .toggle-icon:before {
  10991. transform: scale(0);
  10992. }
  10993. .ios .toggle-active-state input[type="checkbox"] + .toggle-icon:after {
  10994. width: calc(var(--f7-toggle-height) + 4px);
  10995. }
  10996. .ios .toggle-active-state input[type="checkbox"]:checked + .toggle-icon:after {
  10997. transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height) - 8px));
  10998. }
  10999. .md .toggle input[type="checkbox"]:checked + .toggle-icon {
  11000. background: var(--f7-toggle-active-color, rgba(var(--f7-theme-color-rgb), 0.5));
  11001. }
  11002. .md .toggle input[type="checkbox"]:checked + .toggle-icon:after {
  11003. transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height) - 6px));
  11004. background: var(--f7-toggle-active-color, var(--f7-theme-color));
  11005. }
  11006. .md .toggle-icon {
  11007. background: var(--f7-toggle-inactive-color);
  11008. }
  11009. .md .toggle-icon:after {
  11010. height: calc(var(--f7-toggle-height) + 6px);
  11011. width: calc(var(--f7-toggle-height) + 6px);
  11012. top: -3px;
  11013. box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  11014. border-radius: var(--f7-toggle-height);
  11015. left: 0;
  11016. }
  11017. .aurora .toggle input[type="checkbox"]:checked + .toggle-icon {
  11018. background: var(--f7-toggle-active-color, var(--f7-theme-color));
  11019. }
  11020. .aurora .toggle input[type="checkbox"]:checked + .toggle-icon:after {
  11021. transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height)));
  11022. }
  11023. .aurora .toggle-icon {
  11024. background: var(--f7-toggle-inactive-color);
  11025. }
  11026. .aurora .toggle-icon:after {
  11027. height: calc(var(--f7-toggle-height) - 4px);
  11028. width: calc(var(--f7-toggle-height) - 4px);
  11029. top: 2px;
  11030. left: 2px;
  11031. border-radius: calc(var(--f7-toggle-height) - 4px);
  11032. }
  11033. /* === Range Slider === */
  11034. :root {
  11035. /*
  11036. --f7-range-bar-active-bg-color: var(--f7-theme-color);
  11037. */
  11038. --f7-range-scale-step-height: 5px;
  11039. --f7-range-scale-text-color: #666;
  11040. --f7-range-scale-substep-width: 1px;
  11041. --f7-range-scale-substep-height: 4px;
  11042. }
  11043. .ios {
  11044. --f7-range-size: 28px;
  11045. --f7-range-bar-bg-color: #b7b8b7;
  11046. --f7-range-bar-size: 1px;
  11047. --f7-range-bar-border-radius: 2px;
  11048. --f7-range-knob-size: 28px;
  11049. --f7-range-knob-color: #fff;
  11050. --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  11051. --f7-range-label-size: 20px;
  11052. --f7-range-label-text-color: #000;
  11053. --f7-range-label-bg-color: #fff;
  11054. --f7-range-label-font-size: 12px;
  11055. --f7-range-label-font-weight: normal;
  11056. --f7-range-label-border-radius: 5px;
  11057. --f7-range-label-padding: 0px;
  11058. /*
  11059. --f7-range-scale-bg-color: var(--f7-range-bar-bg-color);
  11060. */
  11061. --f7-range-scale-step-width: 1px;
  11062. --f7-range-scale-font-size: 12px;
  11063. --f7-range-scale-font-weight: 400;
  11064. --f7-range-scale-label-offset: 4px;
  11065. /*
  11066. --f7-range-scale-substep-bg-color: var(--f7-range-bar-bg-color);
  11067. */
  11068. }
  11069. .md {
  11070. --f7-range-size: 20px;
  11071. --f7-range-bar-bg-color: #b9b9b9;
  11072. --f7-range-bar-size: 2px;
  11073. --f7-range-bar-border-radius: 0px;
  11074. --f7-range-knob-size: 12px;
  11075. /*
  11076. --f7-range-knob-color: var(--f7-theme-color);
  11077. */
  11078. --f7-range-knob-box-shadow: none;
  11079. --f7-range-label-size: 26px;
  11080. --f7-range-label-font-weight: normal;
  11081. --f7-range-label-text-color: #fff;
  11082. /*
  11083. --f7-range-label-bg-color: var(--f7-theme-color);
  11084. */
  11085. --f7-range-label-font-size: 10px;
  11086. --f7-range-label-border-radius: 50%;
  11087. --f7-range-label-padding: 0px;
  11088. /*
  11089. --f7-range-scale-bg-color: var(--f7-range-bar-bg-color);
  11090. */
  11091. --f7-range-scale-step-width: 2px;
  11092. --f7-range-scale-font-size: 12px;
  11093. --f7-range-scale-font-weight: 400;
  11094. --f7-range-scale-label-offset: 4px;
  11095. /*
  11096. --f7-range-scale-substep-bg-color: var(--f7-range-bar-bg-color);
  11097. */
  11098. }
  11099. .aurora {
  11100. --f7-range-size: 20px;
  11101. --f7-range-bar-bg-color: #c7c7c7;
  11102. --f7-range-bar-size: 2px;
  11103. --f7-range-bar-border-radius: 2px;
  11104. --f7-range-knob-size: 16px;
  11105. /*
  11106. --f7-range-knob-color: var(--f7-theme-color);
  11107. */
  11108. --f7-range-knob-box-shadow: none;
  11109. --f7-range-label-size: 20px;
  11110. --f7-range-label-text-color: #fff;
  11111. /*
  11112. --f7-range-label-bg-color: var(--f7-theme-color);
  11113. */
  11114. --f7-range-label-font-size: 10px;
  11115. --f7-range-label-font-weight: 600;
  11116. --f7-range-label-border-radius: 4px;
  11117. --f7-range-label-padding: 0px 4px;
  11118. /*
  11119. --f7-range-scale-bg-color: var(--f7-range-bar-bg-color);
  11120. */
  11121. --f7-range-scale-step-width: 2px;
  11122. --f7-range-scale-font-size: 11px;
  11123. --f7-range-scale-font-weight: 500;
  11124. --f7-range-scale-label-offset: 2px;
  11125. /*
  11126. --f7-range-scale-substep-bg-color: var(--f7-range-bar-bg-color);
  11127. */
  11128. }
  11129. .range-slider {
  11130. display: block;
  11131. position: relative;
  11132. align-self: center;
  11133. cursor: pointer;
  11134. -webkit-user-select: none;
  11135. -moz-user-select: none;
  11136. -ms-user-select: none;
  11137. user-select: none;
  11138. }
  11139. .range-slider input[type="range"] {
  11140. display: none;
  11141. }
  11142. .range-slider.range-slider-horizontal {
  11143. width: 100%;
  11144. height: var(--f7-range-size);
  11145. }
  11146. .range-slider.range-slider-vertical {
  11147. height: 100%;
  11148. width: var(--f7-range-size);
  11149. }
  11150. .range-bar {
  11151. position: absolute;
  11152. overflow: hidden;
  11153. background: var(--f7-range-bar-bg-color);
  11154. border-radius: var(--f7-range-bar-border-radius);
  11155. }
  11156. .range-slider-vertical .range-bar {
  11157. left: 50%;
  11158. top: 0;
  11159. height: 100%;
  11160. width: var(--f7-range-bar-size);
  11161. margin-left: calc(-1 * var(--f7-range-bar-size) / 2);
  11162. }
  11163. .range-slider-horizontal .range-bar {
  11164. left: 0;
  11165. top: 50%;
  11166. width: 100%;
  11167. height: var(--f7-range-bar-size);
  11168. margin-top: calc(-1 * var(--f7-range-bar-size) / 2);
  11169. }
  11170. .range-bar-active {
  11171. position: absolute;
  11172. background: var(--f7-range-bar-active-bg-color, var(--f7-theme-color));
  11173. }
  11174. .range-slider-horizontal .range-bar-active {
  11175. left: 0;
  11176. top: 0;
  11177. height: 100%;
  11178. }
  11179. .range-slider-vertical .range-bar-active {
  11180. left: 0;
  11181. bottom: 0;
  11182. width: 100%;
  11183. }
  11184. .range-slider-vertical-reversed .range-bar-active {
  11185. top: 0;
  11186. bottom: auto;
  11187. }
  11188. .range-knob-wrap {
  11189. z-index: 20;
  11190. position: absolute;
  11191. height: var(--f7-range-knob-size);
  11192. width: var(--f7-range-knob-size);
  11193. }
  11194. .range-slider-horizontal .range-knob-wrap {
  11195. top: 50%;
  11196. margin-top: calc(-1 * var(--f7-range-knob-size) / 2);
  11197. margin-left: calc(-1 * var(--f7-range-knob-size) / 2);
  11198. left: 0;
  11199. }
  11200. .range-slider-vertical .range-knob-wrap {
  11201. left: 50%;
  11202. margin-left: calc(-1 * var(--f7-range-knob-size) / 2);
  11203. bottom: 0;
  11204. margin-bottom: calc(-1 * var(--f7-range-knob-size) / 2);
  11205. }
  11206. .range-slider-vertical-reversed .range-knob-wrap {
  11207. bottom: auto;
  11208. top: 0;
  11209. margin-bottom: 0;
  11210. margin-top: calc(-1 * var(--f7-range-knob-size) / 2);
  11211. }
  11212. .range-knob {
  11213. box-sizing: border-box;
  11214. border-radius: 50%;
  11215. position: absolute;
  11216. left: 0;
  11217. top: 0;
  11218. width: 100%;
  11219. height: 100%;
  11220. z-index: 1;
  11221. background: var(--f7-range-knob-color, var(--f7-range-knob-bg-color, var(--f7-theme-color)));
  11222. box-shadow: var(--f7-range-knob-box-shadow);
  11223. }
  11224. .range-knob:after {
  11225. content: '';
  11226. position: absolute;
  11227. left: 50%;
  11228. top: 50%;
  11229. width: 44px;
  11230. height: 44px;
  11231. margin-left: -22px;
  11232. margin-top: -22px;
  11233. }
  11234. .range-knob-label {
  11235. position: absolute;
  11236. left: 50%;
  11237. bottom: 100%;
  11238. text-align: center;
  11239. transition-duration: 120ms;
  11240. transition-property: transform;
  11241. box-sizing: border-box;
  11242. transform: translateY(100%) scale(0);
  11243. height: var(--f7-range-label-size);
  11244. line-height: var(--f7-range-label-size);
  11245. min-width: var(--f7-range-label-size);
  11246. color: var(--f7-range-label-text-color);
  11247. background-color: var(--f7-range-label-bg-color, var(--f7-theme-color));
  11248. font-size: var(--f7-range-label-font-size);
  11249. font-weight: var(--f7-range-label-font-weight);
  11250. border-radius: var(--f7-range-label-border-radius);
  11251. padding: var(--f7-range-label-padding);
  11252. }
  11253. .range-knob-active-state .range-knob-label {
  11254. transform: translateY(0%) scale(1);
  11255. }
  11256. .range-scale {
  11257. position: absolute;
  11258. }
  11259. .range-slider-horizontal .range-scale {
  11260. top: 50%;
  11261. left: 0;
  11262. width: 100%;
  11263. margin-top: calc(var(--f7-range-bar-size) / 2);
  11264. }
  11265. .range-slider-vertical .range-scale {
  11266. right: 50%;
  11267. top: 0;
  11268. height: 100%;
  11269. margin-right: calc(var(--f7-range-bar-size) / 2);
  11270. }
  11271. .range-scale-step {
  11272. position: absolute;
  11273. box-sizing: border-box;
  11274. display: flex;
  11275. font-size: var(--f7-range-scale-font-size);
  11276. font-weight: var(--f7-range-scale-font-weight);
  11277. color: var(--f7-range-scale-text-color, var(--f7-range-bar-bg-color));
  11278. line-height: 1;
  11279. }
  11280. .range-scale-step:before {
  11281. content: '';
  11282. position: absolute;
  11283. background: var(--f7-range-scale-step-bg-color, var(--f7-range-bar-bg-color));
  11284. }
  11285. .range-slider-horizontal .range-scale-step {
  11286. justify-content: center;
  11287. align-items: flex-start;
  11288. width: var(--f7-range-scale-step-width);
  11289. height: var(--f7-range-scale-step-height);
  11290. padding-top: calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));
  11291. top: 0;
  11292. margin-left: calc(-1 * var(--f7-range-scale-step-width) / 2);
  11293. }
  11294. .range-slider-horizontal .range-scale-step:before {
  11295. left: 0;
  11296. top: 0;
  11297. width: 100%;
  11298. height: var(--f7-range-scale-step-height);
  11299. }
  11300. .range-slider-horizontal .range-scale-step:first-child {
  11301. margin-left: 0;
  11302. }
  11303. .range-slider-horizontal .range-scale-step:last-child {
  11304. margin-left: calc(-1 * var(--f7-range-scale-step-width));
  11305. }
  11306. .range-slider-vertical .range-scale-step {
  11307. line-height: 1;
  11308. justify-content: flex-end;
  11309. align-items: center;
  11310. height: var(--f7-range-scale-step-width);
  11311. width: var(--f7-range-scale-step-height);
  11312. padding-right: calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));
  11313. right: 0;
  11314. margin-bottom: calc(-1 * var(--f7-range-scale-step-width) / 2);
  11315. }
  11316. .range-slider-vertical .range-scale-step:first-child {
  11317. margin-bottom: 0;
  11318. }
  11319. .range-slider-vertical .range-scale-step:last-child {
  11320. margin-bottom: calc(-1 * var(--f7-range-scale-step-width));
  11321. }
  11322. .range-slider-vertical .range-scale-step:before {
  11323. right: 0;
  11324. top: 0;
  11325. height: 100%;
  11326. width: var(--f7-range-scale-step-height);
  11327. }
  11328. .range-scale-substep {
  11329. --f7-range-scale-step-bg-color: var(--f7-range-scale-substep-bg-color, var(--f7-range-bar-bg-color));
  11330. --f7-range-scale-step-width: var(--f7-range-scale-substep-width);
  11331. --f7-range-scale-step-height: var(--f7-range-scale-substep-height);
  11332. }
  11333. .ios .range-knob-label {
  11334. margin-bottom: 6px;
  11335. transform: translateX(-50%) translateY(100%) scale(0);
  11336. }
  11337. .ios .range-knob-active-state .range-knob-label {
  11338. transform: translateX(-50%) translateY(0%) scale(1);
  11339. }
  11340. .md .range-knob {
  11341. transition-duration: 200ms;
  11342. transition-property: transform, background-color;
  11343. }
  11344. .md .range-knob-active-state .range-knob {
  11345. transform: scale(1.5);
  11346. }
  11347. .md .range-slider-min:not(.range-slider-dual) .range-knob {
  11348. background: #fff !important;
  11349. border: 2px solid var(--f7-range-bar-bg-color);
  11350. }
  11351. .md .range-knob-label {
  11352. width: var(--f7-range-label-size);
  11353. margin-left: calc(-1 * var(--f7-range-label-size) / 2);
  11354. margin-bottom: 8px;
  11355. }
  11356. .md .range-knob-label:before {
  11357. content: '';
  11358. left: 50%;
  11359. top: 0px;
  11360. margin-left: calc(-1 * var(--f7-range-label-size) / 2);
  11361. position: absolute;
  11362. z-index: -1;
  11363. width: var(--f7-range-label-size);
  11364. height: var(--f7-range-label-size);
  11365. background: var(--f7-range-label-bg-color, var(--f7-theme-color));
  11366. transform: rotate(-45deg);
  11367. border-radius: 50% 50% 50% 0;
  11368. }
  11369. .md .range-knob-active-state .range-knob-label {
  11370. transform: translateY(0%) scale(1);
  11371. }
  11372. .md .range-slider-label .range-knob-active-state .range-knob {
  11373. transform: scale(0);
  11374. }
  11375. .aurora .range-knob-label {
  11376. margin-bottom: 6px;
  11377. transform: translateX(-50%) translateY(100%) scale(0);
  11378. }
  11379. .aurora .range-knob-active-state .range-knob-label {
  11380. transform: translateX(-50%) translateY(0%) scale(1);
  11381. }
  11382. /* === Stepper === */
  11383. :root {
  11384. /*
  11385. --f7-stepper-button-text-color: var(--f7-theme-color);
  11386. --f7-stepper-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
  11387. --f7-stepper-value-text-color: var(--f7-theme-color);
  11388. */
  11389. --f7-stepper-fill-button-text-color: #fff;
  11390. /*
  11391. --f7-stepper-fill-button-bg-color: var(--f7-theme-color);
  11392. */
  11393. --f7-stepper-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0,0,0,0.24);
  11394. }
  11395. .ios {
  11396. --f7-stepper-height: 29px;
  11397. --f7-stepper-border-radius: 5px;
  11398. /*
  11399. --f7-stepper-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
  11400. --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-tint);
  11401. */
  11402. --f7-stepper-border-width: 1px;
  11403. --f7-stepper-large-height: 44px;
  11404. --f7-stepper-small-height: 26px;
  11405. --f7-stepper-small-border-width: 2px;
  11406. --f7-stepper-value-font-size: 17px;
  11407. --f7-stepper-value-font-weight: 400;
  11408. }
  11409. .md {
  11410. --f7-stepper-height: 36px;
  11411. --f7-stepper-border-radius: 4px;
  11412. --f7-stepper-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
  11413. /*
  11414. --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-shade);
  11415. */
  11416. --f7-stepper-border-width: 2px;
  11417. --f7-stepper-large-height: 48px;
  11418. --f7-stepper-small-border-width: 2px;
  11419. --f7-stepper-small-height: 28px;
  11420. --f7-stepper-value-font-size: 14px;
  11421. --f7-stepper-value-font-weight: 500;
  11422. }
  11423. .md .theme-dark,
  11424. .md.theme-dark {
  11425. --f7-stepper-button-pressed-bg-color: rgba(255, 255, 255, 0.1);
  11426. }
  11427. .aurora {
  11428. /*
  11429. --f7-stepper-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07);
  11430. --f7-stepper-button-fill-hover-bg-color: var(--f7-theme-color-tint);
  11431. */
  11432. --f7-stepper-height: 28px;
  11433. --f7-stepper-border-radius: 4px;
  11434. /*
  11435. --f7-stepper-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
  11436. --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-shade);
  11437. */
  11438. --f7-stepper-border-width: 2px;
  11439. --f7-stepper-large-height: 34px;
  11440. --f7-stepper-small-border-width: 1px;
  11441. --f7-stepper-small-height: 22px;
  11442. --f7-stepper-value-font-size: 14px;
  11443. --f7-stepper-value-font-weight: 500;
  11444. }
  11445. .stepper {
  11446. display: inline-flex;
  11447. align-items: stretch;
  11448. height: var(--f7-stepper-height);
  11449. border-radius: var(--f7-stepper-border-radius);
  11450. }
  11451. .stepper-button,
  11452. .stepper-button-minus,
  11453. .stepper-button-plus {
  11454. background-color: var(--f7-stepper-button-bg-color);
  11455. width: 40px;
  11456. border-radius: var(--f7-stepper-border-radius);
  11457. border: var(--f7-stepper-border-width) solid var(--f7-theme-color);
  11458. color: var(--f7-stepper-button-text-color, var(--f7-theme-color));
  11459. line-height: calc(var(--f7-stepper-height) - var(--f7-stepper-border-width, 0px));
  11460. text-align: center;
  11461. display: flex;
  11462. justify-content: center;
  11463. align-content: center;
  11464. align-items: center;
  11465. flex-shrink: 0;
  11466. box-sizing: border-box;
  11467. position: relative;
  11468. cursor: pointer;
  11469. }
  11470. .stepper-button.active-state,
  11471. .stepper-button-minus.active-state,
  11472. .stepper-button-plus.active-state {
  11473. background-color: var(--f7-stepper-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15));
  11474. color: var(--f7-stepper-button-pressed-text-color, var(--f7-stepper-button-text-color, var(--f7-theme-color)));
  11475. }
  11476. .stepper-button:first-child,
  11477. .stepper-button-minus:first-child,
  11478. .stepper-button-plus:first-child {
  11479. border-radius: var(--f7-stepper-border-radius) 0 0 var(--f7-stepper-border-radius);
  11480. }
  11481. .stepper-button:last-child,
  11482. .stepper-button-minus:last-child,
  11483. .stepper-button-plus:last-child {
  11484. border-radius: 0 var(--f7-stepper-border-radius) var(--f7-stepper-border-radius) 0;
  11485. }
  11486. .stepper-button .icon,
  11487. .stepper-button-minus .icon,
  11488. .stepper-button-plus .icon {
  11489. pointer-events: none;
  11490. }
  11491. .stepper-button + .stepper-button,
  11492. .stepper-button-minus + .stepper-button,
  11493. .stepper-button-plus + .stepper-button,
  11494. .stepper-button + .stepper-button-minus,
  11495. .stepper-button-minus + .stepper-button-minus,
  11496. .stepper-button-plus + .stepper-button-minus,
  11497. .stepper-button + .stepper-button-plus,
  11498. .stepper-button-minus + .stepper-button-plus,
  11499. .stepper-button-plus + .stepper-button-plus {
  11500. border-left: none;
  11501. }
  11502. .stepper-button-plus,
  11503. .stepper-button-minus {
  11504. -webkit-user-select: none;
  11505. -moz-user-select: none;
  11506. -ms-user-select: none;
  11507. user-select: none;
  11508. }
  11509. .stepper-button-plus:after,
  11510. .stepper-button-minus:after,
  11511. .stepper-button-plus:before,
  11512. .stepper-button-minus:before {
  11513. content: '';
  11514. position: absolute;
  11515. left: 50%;
  11516. top: 50%;
  11517. transform: translate(-50%, -50%);
  11518. background-color: var(--f7-stepper-button-text-color, var(--f7-theme-color));
  11519. }
  11520. .stepper-button-plus:after,
  11521. .stepper-button-minus:after {
  11522. width: 15px;
  11523. height: 2px;
  11524. }
  11525. .stepper-button-plus:before {
  11526. height: 15px;
  11527. width: 2px;
  11528. }
  11529. .stepper-value {
  11530. display: flex;
  11531. align-content: center;
  11532. align-items: center;
  11533. justify-content: center;
  11534. }
  11535. .stepper-input-wrap,
  11536. .stepper-value {
  11537. flex-shrink: 1;
  11538. text-align: center;
  11539. border-top: var(--f7-stepper-border-width) solid var(--f7-theme-color);
  11540. border-bottom: var(--f7-stepper-border-width) solid var(--f7-theme-color);
  11541. }
  11542. .stepper .stepper-input-wrap input,
  11543. .stepper-value {
  11544. width: 45px;
  11545. color: var(--f7-stepper-value-text-color, var(--f7-theme-color));
  11546. font-size: var(--f7-stepper-value-font-size);
  11547. font-weight: var(--f7-stepper-value-font-weight);
  11548. text-align: center;
  11549. }
  11550. .stepper .stepper-input-wrap input {
  11551. height: 100%;
  11552. }
  11553. .stepper-round,
  11554. .ios .stepper-round-ios,
  11555. .md .stepper-round-md,
  11556. .aurora .stepper-round-aurora {
  11557. --f7-stepper-border-radius: var(--f7-stepper-height);
  11558. }
  11559. .stepper-fill,
  11560. .ios .stepper-fill-ios,
  11561. .md .stepper-fill-md,
  11562. .aurora .stepper-fill-aurora {
  11563. --f7-stepper-button-bg-color: var(--f7-stepper-fill-button-bg-color, var(--f7-theme-color));
  11564. --f7-stepper-button-text-color: var(--f7-stepper-fill-button-text-color);
  11565. --f7-touch-ripple-color: var(--f7-touch-ripple-white);
  11566. }
  11567. .stepper-fill .stepper-button + .stepper-button,
  11568. .ios .stepper-fill-ios .stepper-button + .stepper-button,
  11569. .md .stepper-fill-md .stepper-button + .stepper-button,
  11570. .aurora .stepper-fill-aurora .stepper-button + .stepper-button,
  11571. .stepper-raised .stepper-button + .stepper-button,
  11572. .ios .stepper-raised-ios .stepper-button + .stepper-button,
  11573. .md .stepper-raised-md .stepper-button + .stepper-button,
  11574. .aurora .stepper-raised-aurora .stepper-button + .stepper-button,
  11575. .stepper-fill .stepper-button-minus + .stepper-button-plus,
  11576. .ios .stepper-fill-ios .stepper-button-minus + .stepper-button-plus,
  11577. .md .stepper-fill-md .stepper-button-minus + .stepper-button-plus,
  11578. .aurora .stepper-fill-aurora .stepper-button-minus + .stepper-button-plus,
  11579. .stepper-raised .stepper-button-minus + .stepper-button-plus,
  11580. .ios .stepper-raised-ios .stepper-button-minus + .stepper-button-plus,
  11581. .md .stepper-raised-md .stepper-button-minus + .stepper-button-plus,
  11582. .aurora .stepper-raised-aurora .stepper-button-minus + .stepper-button-plus {
  11583. border-left: 1px solid rgba(0, 0, 0, 0.1);
  11584. }
  11585. .stepper-fill .stepper-button + .stepper-button.active-state,
  11586. .ios .stepper-fill-ios .stepper-button + .stepper-button.active-state,
  11587. .md .stepper-fill-md .stepper-button + .stepper-button.active-state,
  11588. .aurora .stepper-fill-aurora .stepper-button + .stepper-button.active-state,
  11589. .stepper-fill .stepper-button-minus + .stepper-button-plus.active-state,
  11590. .ios .stepper-fill-ios .stepper-button-minus + .stepper-button-plus.active-state,
  11591. .md .stepper-fill-md .stepper-button-minus + .stepper-button-plus.active-state,
  11592. .aurora .stepper-fill-aurora .stepper-button-minus + .stepper-button-plus.active-state {
  11593. border-left-color: var(--f7-stepper-button-pressed-bg-color);
  11594. }
  11595. .stepper-raised:not(.stepper-fill) .stepper-input-wrap,
  11596. .ios .stepper-raised-ios:not(.stepper-fill-ios):not(.stepper-fill) .stepper-input-wrap,
  11597. .md .stepper-raised-md:not(.stepper-fill-md):not(.stepper-fill) .stepper-input-wrap,
  11598. .aurora .stepper-raised-aurora:not(.stepper-fill-aurora):not(.stepper-fill) .stepper-input-wrap,
  11599. .stepper-raised:not(.stepper-fill) .stepper-value,
  11600. .ios .stepper-raised-ios:not(.stepper-fill-ios):not(.stepper-fill) .stepper-value,
  11601. .md .stepper-raised-md:not(.stepper-fill-md):not(.stepper-fill) .stepper-value,
  11602. .aurora .stepper-raised-aurora:not(.stepper-fill-aurora):not(.stepper-fill) .stepper-value {
  11603. border-left: 1px solid rgba(0, 0, 0, 0.1);
  11604. border-right: 1px solid rgba(0, 0, 0, 0.1);
  11605. }
  11606. .stepper-large,
  11607. .ios .stepper-large-ios,
  11608. .md .stepper-large-md,
  11609. .aurora .stepper-large-aurora {
  11610. --f7-stepper-height: var(--f7-stepper-large-height);
  11611. }
  11612. .stepper-small,
  11613. .ios .stepper-small-ios,
  11614. .md .stepper-small-md,
  11615. .aurora .stepper-small-aurora {
  11616. --f7-stepper-border-width: var(--f7-stepper-small-border-width);
  11617. --f7-stepper-height: var(--f7-stepper-small-height);
  11618. }
  11619. .ios .stepper-fill.stepper-small-ios,
  11620. .ios .stepper-fill.stepper-small {
  11621. --f7-stepper-button-pressed-bg-color: transparent;
  11622. --f7-stepper-button-pressed-text-color: var(--f7-theme-color);
  11623. }
  11624. .stepper-raised,
  11625. .ios .stepper-raised-ios,
  11626. .md .stepper-raised-md,
  11627. .aurora .stepper-raised-aurora {
  11628. --f7-stepper-border-width: 0;
  11629. box-shadow: var(--f7-stepper-raised-box-shadow);
  11630. }
  11631. .ios .stepper-button .f7-icons,
  11632. .ios .stepper-button-minus .f7-icons,
  11633. .ios .stepper-button-plus .f7-icons {
  11634. font-size: 22px;
  11635. }
  11636. .ios .stepper-fill,
  11637. .ios .stepper-fill-ios {
  11638. --f7-stepper-button-pressed-bg-color: var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-tint));
  11639. }
  11640. .ios .stepper-small.stepper-raised,
  11641. .ios .stepper-small-ios.stepper-raised,
  11642. .ios .stepper-small.stepper-raised-ios,
  11643. .ios .stepper-small-ios.stepper-raised-ios {
  11644. --f7-stepper-border-width: 0px;
  11645. }
  11646. .ios .stepper-small .stepper-button,
  11647. .ios .stepper-small-ios .stepper-button,
  11648. .ios .stepper-small .stepper-button-minus,
  11649. .ios .stepper-small-ios .stepper-button-minus,
  11650. .ios .stepper-small .stepper-button-plus,
  11651. .ios .stepper-small-ios .stepper-button-plus {
  11652. transition-duration: 200ms;
  11653. }
  11654. .ios .stepper-small .stepper-button.active-state:after,
  11655. .ios .stepper-small-ios .stepper-button.active-state:after,
  11656. .ios .stepper-small .stepper-button-minus.active-state:after,
  11657. .ios .stepper-small-ios .stepper-button-minus.active-state:after,
  11658. .ios .stepper-small .stepper-button-plus.active-state:after,
  11659. .ios .stepper-small-ios .stepper-button-plus.active-state:after,
  11660. .ios .stepper-small .stepper-button.active-state:before,
  11661. .ios .stepper-small-ios .stepper-button.active-state:before,
  11662. .ios .stepper-small .stepper-button-minus.active-state:before,
  11663. .ios .stepper-small-ios .stepper-button-minus.active-state:before,
  11664. .ios .stepper-small .stepper-button-plus.active-state:before,
  11665. .ios .stepper-small-ios .stepper-button-plus.active-state:before {
  11666. transition-duration: 200ms;
  11667. background-color: var(--f7-theme-color);
  11668. }
  11669. .md .stepper-button,
  11670. .md .stepper-button-minus,
  11671. .md .stepper-button-plus {
  11672. transition-duration: 300ms;
  11673. transform: translate3d(0, 0, 0);
  11674. overflow: hidden;
  11675. }
  11676. .md .stepper-fill,
  11677. .md .stepper-fill-md {
  11678. --f7-stepper-button-pressed-bg-color: var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-shade));
  11679. }
  11680. .aurora .stepper-button,
  11681. .aurora .stepper-button-minus,
  11682. .aurora .stepper-button-plus {
  11683. transition-duration: 100ms;
  11684. transform: translate3d(0, 0, 0);
  11685. overflow: hidden;
  11686. }
  11687. .aurora.device-desktop .stepper-button:not(.active-state):not(.no-hover):hover,
  11688. .aurora.device-desktop .stepper-button-minus:not(.active-state):not(.no-hover):hover,
  11689. .aurora.device-desktop .stepper-button-plus:not(.active-state):not(.no-hover):hover {
  11690. background-color: var(--f7-stepper-button-hover-bg-color, rgba(var(--f7-theme-color-rgb), 0.07));
  11691. }
  11692. .aurora .stepper-fill,
  11693. .aurora .stepper-fill-aurora {
  11694. --f7-stepper-button-hover-bg-color: var(--f7-stepper-button-fill-hover-bg-color, var(--f7-theme-color-tint));
  11695. --f7-stepper-button-pressed-bg-color: var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-shade));
  11696. }
  11697. /* === Smart Select === */
  11698. .smart-select :root {
  11699. /*
  11700. --f7-smart-select-sheet-bg: var(--f7-list-bg-color);
  11701. --f7-smart-select-sheet-toolbar-border-color: var(--f7-bars-border-color);
  11702. */
  11703. }
  11704. .smart-select select {
  11705. display: none;
  11706. }
  11707. .smart-select .item-after {
  11708. max-width: 70%;
  11709. overflow: hidden;
  11710. text-overflow: ellipsis;
  11711. position: relative;
  11712. display: block;
  11713. }
  11714. .smart-select-sheet .page,
  11715. .smart-select-sheet .sheet-modal-inner,
  11716. .smart-select-sheet .list ul {
  11717. background: var(--f7-smart-select-sheet-bg, var(--f7-list-bg-color));
  11718. }
  11719. .smart-select-sheet .toolbar:after {
  11720. content: '';
  11721. position: absolute;
  11722. background-color: var(--f7-smart-select-sheet-toolbar-border-color, var(--f7-bars-border-color));
  11723. display: block;
  11724. z-index: 15;
  11725. top: auto;
  11726. right: auto;
  11727. bottom: 0;
  11728. left: 0;
  11729. height: 1px;
  11730. width: 100%;
  11731. transform-origin: 50% 100%;
  11732. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  11733. }
  11734. .smart-select-sheet .toolbar:after {
  11735. display: block;
  11736. }
  11737. .smart-select-sheet .list {
  11738. margin: 0;
  11739. }
  11740. .smart-select-sheet .list ul:before {
  11741. display: none !important;
  11742. }
  11743. .smart-select-sheet .list ul:after {
  11744. display: none !important;
  11745. }
  11746. .smart-select-popover .popover-inner {
  11747. max-height: 40vh;
  11748. }
  11749. /* === Grid === */
  11750. .ios {
  11751. --f7-grid-gap: 15px;
  11752. }
  11753. .md {
  11754. --f7-grid-gap: 16px;
  11755. }
  11756. .aurora {
  11757. --f7-grid-gap: 15px;
  11758. }
  11759. .row {
  11760. display: flex;
  11761. justify-content: space-between;
  11762. flex-wrap: wrap;
  11763. align-items: flex-start;
  11764. --f7-cols-per-row: 1;
  11765. }
  11766. .row > [class*="col-"],
  11767. .row > .col {
  11768. box-sizing: border-box;
  11769. width: calc((100% - var(--f7-grid-gap) * (var(--f7-cols-per-row) - 1)) / var(--f7-cols-per-row));
  11770. }
  11771. .row.no-gap {
  11772. --f7-grid-gap: 0px;
  11773. }
  11774. .row .col-5 {
  11775. --f7-cols-per-row: 20;
  11776. }
  11777. .row .col-10 {
  11778. --f7-cols-per-row: 10;
  11779. }
  11780. .row .col-15 {
  11781. --f7-cols-per-row: 6.66666667;
  11782. }
  11783. .row .col-20 {
  11784. --f7-cols-per-row: 5;
  11785. }
  11786. .row .col-25 {
  11787. --f7-cols-per-row: 4;
  11788. }
  11789. .row .col-30 {
  11790. --f7-cols-per-row: 3.33333333;
  11791. }
  11792. .row .col-33 {
  11793. --f7-cols-per-row: 3;
  11794. }
  11795. .row .col-35 {
  11796. --f7-cols-per-row: 2.85714286;
  11797. }
  11798. .row .col-40 {
  11799. --f7-cols-per-row: 2.5;
  11800. }
  11801. .row .col-45 {
  11802. --f7-cols-per-row: 2.22222222;
  11803. }
  11804. .row .col-50 {
  11805. --f7-cols-per-row: 2;
  11806. }
  11807. .row .col-55 {
  11808. --f7-cols-per-row: 1.81818182;
  11809. }
  11810. .row .col-60 {
  11811. --f7-cols-per-row: 1.66666667;
  11812. }
  11813. .row .col-65 {
  11814. --f7-cols-per-row: 1.53846154;
  11815. }
  11816. .row .col-66 {
  11817. --f7-cols-per-row: 1.5;
  11818. }
  11819. .row .col-70 {
  11820. --f7-cols-per-row: 1.42857143;
  11821. }
  11822. .row .col-75 {
  11823. --f7-cols-per-row: 1.33333333;
  11824. }
  11825. .row .col-80 {
  11826. --f7-cols-per-row: 1.25;
  11827. }
  11828. .row .col-85 {
  11829. --f7-cols-per-row: 1.17647059;
  11830. }
  11831. .row .col-90 {
  11832. --f7-cols-per-row: 1.11111111;
  11833. }
  11834. .row .col-95 {
  11835. --f7-cols-per-row: 1.05263158;
  11836. }
  11837. .row .col-100 {
  11838. --f7-cols-per-row: 1;
  11839. }
  11840. .row .col:nth-last-child(1),
  11841. .row .col:nth-last-child(1) ~ .col {
  11842. --f7-cols-per-row: 1;
  11843. }
  11844. .row .col:nth-last-child(2),
  11845. .row .col:nth-last-child(2) ~ .col {
  11846. --f7-cols-per-row: 2;
  11847. }
  11848. .row .col:nth-last-child(3),
  11849. .row .col:nth-last-child(3) ~ .col {
  11850. --f7-cols-per-row: 3;
  11851. }
  11852. .row .col:nth-last-child(4),
  11853. .row .col:nth-last-child(4) ~ .col {
  11854. --f7-cols-per-row: 4;
  11855. }
  11856. .row .col:nth-last-child(5),
  11857. .row .col:nth-last-child(5) ~ .col {
  11858. --f7-cols-per-row: 5;
  11859. }
  11860. .row .col:nth-last-child(6),
  11861. .row .col:nth-last-child(6) ~ .col {
  11862. --f7-cols-per-row: 6;
  11863. }
  11864. .row .col:nth-last-child(7),
  11865. .row .col:nth-last-child(7) ~ .col {
  11866. --f7-cols-per-row: 7;
  11867. }
  11868. .row .col:nth-last-child(8),
  11869. .row .col:nth-last-child(8) ~ .col {
  11870. --f7-cols-per-row: 8;
  11871. }
  11872. .row .col:nth-last-child(9),
  11873. .row .col:nth-last-child(9) ~ .col {
  11874. --f7-cols-per-row: 9;
  11875. }
  11876. .row .col:nth-last-child(10),
  11877. .row .col:nth-last-child(10) ~ .col {
  11878. --f7-cols-per-row: 10;
  11879. }
  11880. .row .col:nth-last-child(11),
  11881. .row .col:nth-last-child(11) ~ .col {
  11882. --f7-cols-per-row: 11;
  11883. }
  11884. .row .col:nth-last-child(12),
  11885. .row .col:nth-last-child(12) ~ .col {
  11886. --f7-cols-per-row: 12;
  11887. }
  11888. .row .col:nth-last-child(13),
  11889. .row .col:nth-last-child(13) ~ .col {
  11890. --f7-cols-per-row: 13;
  11891. }
  11892. .row .col:nth-last-child(14),
  11893. .row .col:nth-last-child(14) ~ .col {
  11894. --f7-cols-per-row: 14;
  11895. }
  11896. .row .col:nth-last-child(15),
  11897. .row .col:nth-last-child(15) ~ .col {
  11898. --f7-cols-per-row: 15;
  11899. }
  11900. .row .col:nth-last-child(16),
  11901. .row .col:nth-last-child(16) ~ .col {
  11902. --f7-cols-per-row: 16;
  11903. }
  11904. .row .col:nth-last-child(17),
  11905. .row .col:nth-last-child(17) ~ .col {
  11906. --f7-cols-per-row: 17;
  11907. }
  11908. .row .col:nth-last-child(18),
  11909. .row .col:nth-last-child(18) ~ .col {
  11910. --f7-cols-per-row: 18;
  11911. }
  11912. .row .col:nth-last-child(19),
  11913. .row .col:nth-last-child(19) ~ .col {
  11914. --f7-cols-per-row: 19;
  11915. }
  11916. .row .col:nth-last-child(20),
  11917. .row .col:nth-last-child(20) ~ .col {
  11918. --f7-cols-per-row: 20;
  11919. }
  11920. .row .col:nth-last-child(21),
  11921. .row .col:nth-last-child(21) ~ .col {
  11922. --f7-cols-per-row: 21;
  11923. }
  11924. .row .col:nth-last-child(22),
  11925. .row .col:nth-last-child(22) ~ .col {
  11926. --f7-cols-per-row: 22;
  11927. }
  11928. @media (min-width: 768px) {
  11929. .row .tablet-5 {
  11930. --f7-cols-per-row: 20;
  11931. }
  11932. .row .tablet-10 {
  11933. --f7-cols-per-row: 10;
  11934. }
  11935. .row .tablet-15 {
  11936. --f7-cols-per-row: 6.66666667;
  11937. }
  11938. .row .tablet-20 {
  11939. --f7-cols-per-row: 5;
  11940. }
  11941. .row .tablet-25 {
  11942. --f7-cols-per-row: 4;
  11943. }
  11944. .row .tablet-30 {
  11945. --f7-cols-per-row: 3.33333333;
  11946. }
  11947. .row .tablet-33 {
  11948. --f7-cols-per-row: 3;
  11949. }
  11950. .row .tablet-35 {
  11951. --f7-cols-per-row: 2.85714286;
  11952. }
  11953. .row .tablet-40 {
  11954. --f7-cols-per-row: 2.5;
  11955. }
  11956. .row .tablet-45 {
  11957. --f7-cols-per-row: 2.22222222;
  11958. }
  11959. .row .tablet-50 {
  11960. --f7-cols-per-row: 2;
  11961. }
  11962. .row .tablet-55 {
  11963. --f7-cols-per-row: 1.81818182;
  11964. }
  11965. .row .tablet-60 {
  11966. --f7-cols-per-row: 1.66666667;
  11967. }
  11968. .row .tablet-65 {
  11969. --f7-cols-per-row: 1.53846154;
  11970. }
  11971. .row .tablet-66 {
  11972. --f7-cols-per-row: 1.5;
  11973. }
  11974. .row .tablet-70 {
  11975. --f7-cols-per-row: 1.42857143;
  11976. }
  11977. .row .tablet-75 {
  11978. --f7-cols-per-row: 1.33333333;
  11979. }
  11980. .row .tablet-80 {
  11981. --f7-cols-per-row: 1.25;
  11982. }
  11983. .row .tablet-85 {
  11984. --f7-cols-per-row: 1.17647059;
  11985. }
  11986. .row .tablet-90 {
  11987. --f7-cols-per-row: 1.11111111;
  11988. }
  11989. .row .tablet-95 {
  11990. --f7-cols-per-row: 1.05263158;
  11991. }
  11992. .row .tablet-100 {
  11993. --f7-cols-per-row: 1;
  11994. }
  11995. .row .tablet-auto:nth-last-child(1),
  11996. .row .tablet-auto:nth-last-child(1) ~ .tablet-auto {
  11997. --f7-cols-per-row: 1;
  11998. }
  11999. .row .tablet-auto:nth-last-child(2),
  12000. .row .tablet-auto:nth-last-child(2) ~ .tablet-auto {
  12001. --f7-cols-per-row: 2;
  12002. }
  12003. .row .tablet-auto:nth-last-child(3),
  12004. .row .tablet-auto:nth-last-child(3) ~ .tablet-auto {
  12005. --f7-cols-per-row: 3;
  12006. }
  12007. .row .tablet-auto:nth-last-child(4),
  12008. .row .tablet-auto:nth-last-child(4) ~ .tablet-auto {
  12009. --f7-cols-per-row: 4;
  12010. }
  12011. .row .tablet-auto:nth-last-child(5),
  12012. .row .tablet-auto:nth-last-child(5) ~ .tablet-auto {
  12013. --f7-cols-per-row: 5;
  12014. }
  12015. .row .tablet-auto:nth-last-child(6),
  12016. .row .tablet-auto:nth-last-child(6) ~ .tablet-auto {
  12017. --f7-cols-per-row: 6;
  12018. }
  12019. .row .tablet-auto:nth-last-child(7),
  12020. .row .tablet-auto:nth-last-child(7) ~ .tablet-auto {
  12021. --f7-cols-per-row: 7;
  12022. }
  12023. .row .tablet-auto:nth-last-child(8),
  12024. .row .tablet-auto:nth-last-child(8) ~ .tablet-auto {
  12025. --f7-cols-per-row: 8;
  12026. }
  12027. .row .tablet-auto:nth-last-child(9),
  12028. .row .tablet-auto:nth-last-child(9) ~ .tablet-auto {
  12029. --f7-cols-per-row: 9;
  12030. }
  12031. .row .tablet-auto:nth-last-child(10),
  12032. .row .tablet-auto:nth-last-child(10) ~ .tablet-auto {
  12033. --f7-cols-per-row: 10;
  12034. }
  12035. .row .tablet-auto:nth-last-child(11),
  12036. .row .tablet-auto:nth-last-child(11) ~ .tablet-auto {
  12037. --f7-cols-per-row: 11;
  12038. }
  12039. .row .tablet-auto:nth-last-child(12),
  12040. .row .tablet-auto:nth-last-child(12) ~ .tablet-auto {
  12041. --f7-cols-per-row: 12;
  12042. }
  12043. .row .tablet-auto:nth-last-child(13),
  12044. .row .tablet-auto:nth-last-child(13) ~ .tablet-auto {
  12045. --f7-cols-per-row: 13;
  12046. }
  12047. .row .tablet-auto:nth-last-child(14),
  12048. .row .tablet-auto:nth-last-child(14) ~ .tablet-auto {
  12049. --f7-cols-per-row: 14;
  12050. }
  12051. .row .tablet-auto:nth-last-child(15),
  12052. .row .tablet-auto:nth-last-child(15) ~ .tablet-auto {
  12053. --f7-cols-per-row: 15;
  12054. }
  12055. .row .tablet-auto:nth-last-child(16),
  12056. .row .tablet-auto:nth-last-child(16) ~ .tablet-auto {
  12057. --f7-cols-per-row: 16;
  12058. }
  12059. .row .tablet-auto:nth-last-child(17),
  12060. .row .tablet-auto:nth-last-child(17) ~ .tablet-auto {
  12061. --f7-cols-per-row: 17;
  12062. }
  12063. .row .tablet-auto:nth-last-child(18),
  12064. .row .tablet-auto:nth-last-child(18) ~ .tablet-auto {
  12065. --f7-cols-per-row: 18;
  12066. }
  12067. .row .tablet-auto:nth-last-child(19),
  12068. .row .tablet-auto:nth-last-child(19) ~ .tablet-auto {
  12069. --f7-cols-per-row: 19;
  12070. }
  12071. .row .tablet-auto:nth-last-child(20),
  12072. .row .tablet-auto:nth-last-child(20) ~ .tablet-auto {
  12073. --f7-cols-per-row: 20;
  12074. }
  12075. .row .tablet-auto:nth-last-child(21),
  12076. .row .tablet-auto:nth-last-child(21) ~ .tablet-auto {
  12077. --f7-cols-per-row: 21;
  12078. }
  12079. .row .tablet-auto:nth-last-child(22),
  12080. .row .tablet-auto:nth-last-child(22) ~ .tablet-auto {
  12081. --f7-cols-per-row: 22;
  12082. }
  12083. }
  12084. @media (min-width: 1025px) {
  12085. .row .desktop-5 {
  12086. --f7-cols-per-row: 20;
  12087. }
  12088. .row .desktop-10 {
  12089. --f7-cols-per-row: 10;
  12090. }
  12091. .row .desktop-15 {
  12092. --f7-cols-per-row: 6.66666667;
  12093. }
  12094. .row .desktop-20 {
  12095. --f7-cols-per-row: 5;
  12096. }
  12097. .row .desktop-25 {
  12098. --f7-cols-per-row: 4;
  12099. }
  12100. .row .desktop-30 {
  12101. --f7-cols-per-row: 3.33333333;
  12102. }
  12103. .row .desktop-33 {
  12104. --f7-cols-per-row: 3;
  12105. }
  12106. .row .desktop-35 {
  12107. --f7-cols-per-row: 2.85714286;
  12108. }
  12109. .row .desktop-40 {
  12110. --f7-cols-per-row: 2.5;
  12111. }
  12112. .row .desktop-45 {
  12113. --f7-cols-per-row: 2.22222222;
  12114. }
  12115. .row .desktop-50 {
  12116. --f7-cols-per-row: 2;
  12117. }
  12118. .row .desktop-55 {
  12119. --f7-cols-per-row: 1.81818182;
  12120. }
  12121. .row .desktop-60 {
  12122. --f7-cols-per-row: 1.66666667;
  12123. }
  12124. .row .desktop-65 {
  12125. --f7-cols-per-row: 1.53846154;
  12126. }
  12127. .row .desktop-66 {
  12128. --f7-cols-per-row: 1.5;
  12129. }
  12130. .row .desktop-70 {
  12131. --f7-cols-per-row: 1.42857143;
  12132. }
  12133. .row .desktop-75 {
  12134. --f7-cols-per-row: 1.33333333;
  12135. }
  12136. .row .desktop-80 {
  12137. --f7-cols-per-row: 1.25;
  12138. }
  12139. .row .desktop-85 {
  12140. --f7-cols-per-row: 1.17647059;
  12141. }
  12142. .row .desktop-90 {
  12143. --f7-cols-per-row: 1.11111111;
  12144. }
  12145. .row .desktop-95 {
  12146. --f7-cols-per-row: 1.05263158;
  12147. }
  12148. .row .desktop-100 {
  12149. --f7-cols-per-row: 1;
  12150. }
  12151. .row .desktop-auto:nth-last-child(1),
  12152. .row .desktop-auto:nth-last-child(1) ~ .desktop-auto {
  12153. --f7-cols-per-row: 1;
  12154. }
  12155. .row .desktop-auto:nth-last-child(2),
  12156. .row .desktop-auto:nth-last-child(2) ~ .desktop-auto {
  12157. --f7-cols-per-row: 2;
  12158. }
  12159. .row .desktop-auto:nth-last-child(3),
  12160. .row .desktop-auto:nth-last-child(3) ~ .desktop-auto {
  12161. --f7-cols-per-row: 3;
  12162. }
  12163. .row .desktop-auto:nth-last-child(4),
  12164. .row .desktop-auto:nth-last-child(4) ~ .desktop-auto {
  12165. --f7-cols-per-row: 4;
  12166. }
  12167. .row .desktop-auto:nth-last-child(5),
  12168. .row .desktop-auto:nth-last-child(5) ~ .desktop-auto {
  12169. --f7-cols-per-row: 5;
  12170. }
  12171. .row .desktop-auto:nth-last-child(6),
  12172. .row .desktop-auto:nth-last-child(6) ~ .desktop-auto {
  12173. --f7-cols-per-row: 6;
  12174. }
  12175. .row .desktop-auto:nth-last-child(7),
  12176. .row .desktop-auto:nth-last-child(7) ~ .desktop-auto {
  12177. --f7-cols-per-row: 7;
  12178. }
  12179. .row .desktop-auto:nth-last-child(8),
  12180. .row .desktop-auto:nth-last-child(8) ~ .desktop-auto {
  12181. --f7-cols-per-row: 8;
  12182. }
  12183. .row .desktop-auto:nth-last-child(9),
  12184. .row .desktop-auto:nth-last-child(9) ~ .desktop-auto {
  12185. --f7-cols-per-row: 9;
  12186. }
  12187. .row .desktop-auto:nth-last-child(10),
  12188. .row .desktop-auto:nth-last-child(10) ~ .desktop-auto {
  12189. --f7-cols-per-row: 10;
  12190. }
  12191. .row .desktop-auto:nth-last-child(11),
  12192. .row .desktop-auto:nth-last-child(11) ~ .desktop-auto {
  12193. --f7-cols-per-row: 11;
  12194. }
  12195. .row .desktop-auto:nth-last-child(12),
  12196. .row .desktop-auto:nth-last-child(12) ~ .desktop-auto {
  12197. --f7-cols-per-row: 12;
  12198. }
  12199. .row .desktop-auto:nth-last-child(13),
  12200. .row .desktop-auto:nth-last-child(13) ~ .desktop-auto {
  12201. --f7-cols-per-row: 13;
  12202. }
  12203. .row .desktop-auto:nth-last-child(14),
  12204. .row .desktop-auto:nth-last-child(14) ~ .desktop-auto {
  12205. --f7-cols-per-row: 14;
  12206. }
  12207. .row .desktop-auto:nth-last-child(15),
  12208. .row .desktop-auto:nth-last-child(15) ~ .desktop-auto {
  12209. --f7-cols-per-row: 15;
  12210. }
  12211. .row .desktop-auto:nth-last-child(16),
  12212. .row .desktop-auto:nth-last-child(16) ~ .desktop-auto {
  12213. --f7-cols-per-row: 16;
  12214. }
  12215. .row .desktop-auto:nth-last-child(17),
  12216. .row .desktop-auto:nth-last-child(17) ~ .desktop-auto {
  12217. --f7-cols-per-row: 17;
  12218. }
  12219. .row .desktop-auto:nth-last-child(18),
  12220. .row .desktop-auto:nth-last-child(18) ~ .desktop-auto {
  12221. --f7-cols-per-row: 18;
  12222. }
  12223. .row .desktop-auto:nth-last-child(19),
  12224. .row .desktop-auto:nth-last-child(19) ~ .desktop-auto {
  12225. --f7-cols-per-row: 19;
  12226. }
  12227. .row .desktop-auto:nth-last-child(20),
  12228. .row .desktop-auto:nth-last-child(20) ~ .desktop-auto {
  12229. --f7-cols-per-row: 20;
  12230. }
  12231. .row .desktop-auto:nth-last-child(21),
  12232. .row .desktop-auto:nth-last-child(21) ~ .desktop-auto {
  12233. --f7-cols-per-row: 21;
  12234. }
  12235. .row .desktop-auto:nth-last-child(22),
  12236. .row .desktop-auto:nth-last-child(22) ~ .desktop-auto {
  12237. --f7-cols-per-row: 22;
  12238. }
  12239. }
  12240. /* === Calendar/Datepicker === */
  12241. :root {
  12242. --f7-calendar-height: 320px;
  12243. --f7-calendar-sheet-landscape-height: 220px;
  12244. --f7-calendar-sheet-bg-color: #fff;
  12245. --f7-calendar-popover-width: 320px;
  12246. --f7-calendar-popover-height: 320px;
  12247. --f7-calendar-modal-height: 420px;
  12248. --f7-calendar-modal-max-width: 380px;
  12249. --f7-calendar-modal-border-radius: 4px;
  12250. --f7-calendar-modal-bg-color: #fff;
  12251. /*
  12252. --f7-calendar-header-bg-color: var(--f7-bars-bg-color);
  12253. --f7-calendar-header-link-color: var(--f7-bars-link-color);
  12254. --f7-calendar-header-text-color: var(--f7-bars-text-color);
  12255. --f7-calendar-footer-bg-color: var(--f7-bars-bg-color);
  12256. --f7-calendar-footer-border-color: var(--f7-bars-border-color);
  12257. --f7-calendar-footer-link-color: var(--f7-bars-link-color);
  12258. --f7-calendar-footer-text-color: var(--f7-bars-text-color);
  12259. --f7-calendar-week-header-bg-color: var(--f7-bars-bg-color);
  12260. --f7-calendar-week-header-text-color: var(--f7-bars-text-color);
  12261. */
  12262. --f7-calendar-footer-padding: 0 8px;
  12263. --f7-calendar-week-header-font-size: 11px;
  12264. --f7-calendar-day-text-color: #000;
  12265. --f7-calendar-selected-text-color: #fff;
  12266. /*
  12267. --f7-calendar-selected-bg-color: var(--f7-theme-color);
  12268. */
  12269. --f7-calendar-prev-next-text-color: #b8b8b8;
  12270. --f7-calendar-disabled-text-color: #d4d4d4;
  12271. --f7-calendar-event-dot-size: 4px;
  12272. /*
  12273. --f7-calendar-event-bg-color: var(--f7-theme-color);
  12274. */
  12275. }
  12276. :root .theme-dark,
  12277. :root.theme-dark {
  12278. --f7-calendar-sheet-border-color: var(--f7-bars-border-color);
  12279. --f7-calendar-modal-bg-color: #171717;
  12280. --f7-calendar-sheet-bg-color: #171717;
  12281. }
  12282. .ios {
  12283. --f7-calendar-sheet-border-color: #929499;
  12284. --f7-calendar-header-height: 44px;
  12285. --f7-calendar-header-font-size: 17px;
  12286. --f7-calendar-header-font-weight: 600;
  12287. --f7-calendar-header-padding: 0 8px;
  12288. --f7-calendar-footer-height: 44px;
  12289. --f7-calendar-footer-font-size: 17px;
  12290. --f7-calendar-week-header-height: 18px;
  12291. --f7-calendar-row-border-color: #c4c4c4;
  12292. --f7-calendar-day-font-size: 15px;
  12293. --f7-calendar-today-text-color: #000;
  12294. --f7-calendar-today-bg-color: #e3e3e3;
  12295. --f7-calendar-day-size: 30px;
  12296. }
  12297. .ios .theme-dark,
  12298. .ios.theme-dark {
  12299. --f7-calendar-row-border-color: var(--f7-bars-border-color);
  12300. --f7-calendar-day-text-color: #fff;
  12301. --f7-calendar-today-text-color: #fff;
  12302. --f7-calendar-today-bg-color: #333;
  12303. }
  12304. .md {
  12305. --f7-calendar-sheet-border-color: #ccc;
  12306. --f7-calendar-header-height: 56px;
  12307. --f7-calendar-header-font-size: 20px;
  12308. --f7-calendar-header-font-weight: 400;
  12309. --f7-calendar-header-padding: 0 24px;
  12310. --f7-calendar-footer-height: 48px;
  12311. --f7-calendar-footer-font-size: 14px;
  12312. --f7-calendar-week-header-height: 24px;
  12313. --f7-calendar-row-border-color: transparent;
  12314. --f7-calendar-day-font-size: 14px;
  12315. /*
  12316. --f7-calendar-today-text-color: var(--f7-theme-color);
  12317. */
  12318. --f7-calendar-today-bg-color: none;
  12319. --f7-calendar-day-size: 32px;
  12320. }
  12321. .md .theme-dark,
  12322. .md.theme-dark {
  12323. --f7-calendar-day-text-color: rgba(255, 255, 255, 0.87);
  12324. }
  12325. .aurora {
  12326. --f7-calendar-sheet-border-color: #ccc;
  12327. --f7-calendar-header-height: 38px;
  12328. --f7-calendar-header-font-size: 14px;
  12329. --f7-calendar-header-font-weight: 600;
  12330. --f7-calendar-header-padding: 0 8px;
  12331. --f7-calendar-footer-height: 38px;
  12332. --f7-calendar-footer-font-size: 14px;
  12333. --f7-calendar-week-header-height: 18px;
  12334. --f7-calendar-row-border-color: #e3e3e3;
  12335. --f7-calendar-day-font-size: 13px;
  12336. --f7-calendar-today-text-color: #000;
  12337. --f7-calendar-today-bg-color: #e3e3e3;
  12338. --f7-calendar-day-size: 30px;
  12339. }
  12340. .aurora .theme-dark,
  12341. .aurora.theme-dark {
  12342. --f7-calendar-row-border-color: var(--f7-bars-border-color);
  12343. --f7-calendar-day-text-color: #fff;
  12344. --f7-calendar-today-text-color: #fff;
  12345. --f7-calendar-today-bg-color: #333;
  12346. }
  12347. .calendar {
  12348. overflow: hidden;
  12349. height: var(--f7-calendar-height);
  12350. width: 100%;
  12351. display: flex;
  12352. flex-direction: column;
  12353. }
  12354. .calendar.modal-in {
  12355. display: flex;
  12356. }
  12357. @media (orientation: landscape) and (max-height: 415px) {
  12358. .calendar.calendar-sheet {
  12359. height: var(--f7-calendar-sheet-landscape-height);
  12360. }
  12361. .calendar.calendar-modal {
  12362. height: calc(100vh - var(--f7-navbar-height));
  12363. }
  12364. }
  12365. .calendar.calendar-inline,
  12366. .calendar.calendar-popover .calendar {
  12367. position: relative;
  12368. }
  12369. .calendar-sheet {
  12370. --f7-sheet-border-color: var(--f7-calendar-sheet-border-color);
  12371. background: var(--f7-calendar-sheet-bg-color);
  12372. }
  12373. .calendar-sheet:before {
  12374. z-index: 600;
  12375. }
  12376. .calendar-sheet .sheet-modal-inner {
  12377. margin-bottom: var(--f7-safe-area-bottom);
  12378. }
  12379. .calendar-sheet .toolbar:before,
  12380. .calendar-modal .toolbar:before,
  12381. .calendar-popover .toolbar:before {
  12382. display: none;
  12383. }
  12384. .calendar-popover {
  12385. width: var(--f7-calendar-popover-width);
  12386. }
  12387. .calendar-popover .calendar {
  12388. height: var(--f7-calendar-popover-height);
  12389. border-radius: var(--f7-popover-border-radius);
  12390. }
  12391. .calendar-header {
  12392. width: 100%;
  12393. position: relative;
  12394. overflow: hidden;
  12395. flex-shrink: 0;
  12396. white-space: nowrap;
  12397. text-overflow: ellipsis;
  12398. box-sizing: border-box;
  12399. padding: var(--f7-calendar-header-padding);
  12400. background-color: var(--f7-calendar-header-bg-color, var(--f7-bars-bg-color));
  12401. color: var(--f7-calendar-header-text-color, var(--f7-bars-text-color));
  12402. height: var(--f7-calendar-header-height);
  12403. line-height: var(--f7-calendar-header-height);
  12404. font-size: var(--f7-calendar-header-font-size);
  12405. font-weight: var(--f7-calendar-header-font-weight);
  12406. }
  12407. .calendar-header a {
  12408. color: var(--f7-calendar-header-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
  12409. }
  12410. .calendar-footer {
  12411. width: 100%;
  12412. flex-shrink: 0;
  12413. padding: var(--f7-calendar-footer-padding);
  12414. background-color: var(--f7-calendar-footer-bg-color, var(--f7-bars-bg-color));
  12415. color: var(--f7-calendar-footer-text-color, var(--f7-bars-text-color));
  12416. height: var(--f7-calendar-footer-height);
  12417. font-size: var(--f7-calendar-header-font-size);
  12418. display: flex;
  12419. justify-content: flex-end;
  12420. box-sizing: border-box;
  12421. align-items: center;
  12422. position: relative;
  12423. }
  12424. .calendar-footer a {
  12425. color: var(--f7-calendar-footer-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
  12426. }
  12427. .calendar-footer:before {
  12428. content: '';
  12429. position: absolute;
  12430. background-color: var(--f7-calendar-footer-border-color, var(--f7-bars-border-color));
  12431. display: block;
  12432. z-index: 15;
  12433. top: 0;
  12434. right: auto;
  12435. bottom: auto;
  12436. left: 0;
  12437. height: 1px;
  12438. width: 100%;
  12439. transform-origin: 50% 0%;
  12440. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  12441. }
  12442. .calendar-modal {
  12443. position: absolute;
  12444. height: var(--f7-calendar-modal-height);
  12445. overflow: hidden;
  12446. top: 50%;
  12447. left: 50%;
  12448. min-width: 300px;
  12449. max-width: var(--f7-calendar-modal-max-width);
  12450. transform: translate3d(-50%, 100%, 0);
  12451. transition-property: transform;
  12452. display: flex;
  12453. z-index: 12000;
  12454. background: var(--f7-calendar-modal-bg-color);
  12455. width: 90%;
  12456. border-radius: var(--f7-calendar-modal-border-radius);
  12457. box-shadow: var(--f7-elevation-24);
  12458. }
  12459. .calendar-modal.modal-in,
  12460. .calendar-modal.modal-out {
  12461. transition-duration: 400ms;
  12462. }
  12463. .calendar-modal.modal-in {
  12464. transform: translate3d(-50%, -50%, 0);
  12465. }
  12466. .calendar-modal.modal-out {
  12467. transform: translate3d(-50%, 100%, 0);
  12468. }
  12469. .calendar-week-header {
  12470. display: flex;
  12471. box-sizing: border-box;
  12472. position: relative;
  12473. font-size: var(--f7-calendar-week-header-font-size);
  12474. background-color: var(--f7-calendar-week-header-bg-color, var(--f7-bars-bg-color));
  12475. color: var(--f7-calendar-week-header-text-color, var(--f7-bars-text-color));
  12476. height: var(--f7-calendar-week-header-height);
  12477. padding-left: var(--f7-safe-area-left);
  12478. padding-right: var(--f7-safe-area-right);
  12479. }
  12480. .calendar-week-header .calendar-week-day {
  12481. flex-shrink: 1;
  12482. width: calc(100% / 7);
  12483. text-align: center;
  12484. line-height: var(--f7-calendar-week-header-height);
  12485. }
  12486. .calendar-months {
  12487. width: 100%;
  12488. height: 100%;
  12489. overflow: hidden;
  12490. position: relative;
  12491. flex-shrink: 10;
  12492. }
  12493. .calendar-months-wrapper {
  12494. position: relative;
  12495. width: 100%;
  12496. height: 100%;
  12497. transition: 300ms;
  12498. }
  12499. .calendar-month {
  12500. display: flex;
  12501. flex-direction: column;
  12502. width: 100%;
  12503. height: 100%;
  12504. position: absolute;
  12505. left: 0;
  12506. top: 0;
  12507. }
  12508. .calendar-row {
  12509. height: 16.66666667%;
  12510. height: calc(100% / 6);
  12511. display: flex;
  12512. flex-shrink: 1;
  12513. width: 100%;
  12514. position: relative;
  12515. box-sizing: border-box;
  12516. padding-left: var(--f7-safe-area-left);
  12517. padding-right: var(--f7-safe-area-right);
  12518. }
  12519. .calendar-row:before {
  12520. content: '';
  12521. position: absolute;
  12522. background-color: var(--f7-calendar-row-border-color);
  12523. display: block;
  12524. z-index: 15;
  12525. top: 0;
  12526. right: auto;
  12527. bottom: auto;
  12528. left: 0;
  12529. height: 1px;
  12530. width: 100%;
  12531. transform-origin: 50% 0%;
  12532. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  12533. }
  12534. .calendar-modal .calendar-months:first-child .calendar-row:first-child:before,
  12535. .calendar-popover .calendar-months:first-child .calendar-row:first-child:before {
  12536. display: none !important;
  12537. }
  12538. .calendar-day {
  12539. flex-shrink: 1;
  12540. display: flex;
  12541. justify-content: center;
  12542. align-items: center;
  12543. box-sizing: border-box;
  12544. width: 14.28571429%;
  12545. width: calc(100% / 7);
  12546. text-align: center;
  12547. cursor: pointer;
  12548. z-index: 20;
  12549. color: var(--f7-calendar-day-text-color);
  12550. height: 100%;
  12551. font-size: var(--f7-calendar-day-font-size);
  12552. }
  12553. .calendar-day.calendar-day-today .calendar-day-number {
  12554. color: var(--f7-calendar-today-text-color, var(--f7-theme-color));
  12555. background-color: var(--f7-calendar-today-bg-color);
  12556. }
  12557. .calendar-day.calendar-day-prev,
  12558. .calendar-day.calendar-day-next {
  12559. color: var(--f7-calendar-prev-next-text-color);
  12560. }
  12561. .calendar-day.calendar-day-disabled {
  12562. color: var(--f7-calendar-disabled-text-color);
  12563. cursor: auto;
  12564. }
  12565. .calendar-day.calendar-day-selected .calendar-day-number {
  12566. color: var(--f7-calendar-selected-text-color);
  12567. background-color: var(--f7-calendar-selected-bg-color, var(--f7-theme-color));
  12568. }
  12569. .calendar-day .calendar-day-number {
  12570. display: inline-block;
  12571. border-radius: 50%;
  12572. position: relative;
  12573. width: var(--f7-calendar-day-size);
  12574. height: var(--f7-calendar-day-size);
  12575. line-height: var(--f7-calendar-day-size);
  12576. }
  12577. .calendar-day .calendar-day-events {
  12578. position: absolute;
  12579. display: flex;
  12580. left: 0;
  12581. width: 100%;
  12582. top: 100%;
  12583. align-items: center;
  12584. justify-content: center;
  12585. margin-top: 1px;
  12586. }
  12587. .calendar-day .calendar-day-event {
  12588. width: var(--f7-calendar-event-dot-size);
  12589. height: var(--f7-calendar-event-dot-size);
  12590. border-radius: calc(var(--f7-calendar-event-dot-size) / 2);
  12591. background-color: var(--f7-calendar-event-bg-color);
  12592. }
  12593. .calendar-day .calendar-day-event + .calendar-day-event {
  12594. margin-left: 2px;
  12595. }
  12596. .calendar-range .calendar-day.calendar-day-selected {
  12597. align-items: stretch;
  12598. align-content: stretch;
  12599. }
  12600. .calendar-range .calendar-day.calendar-day-selected .calendar-day-number {
  12601. width: 100%;
  12602. border-radius: 0;
  12603. height: auto;
  12604. text-align: center;
  12605. display: flex;
  12606. align-items: center;
  12607. justify-content: center;
  12608. }
  12609. .calendar-month-selector,
  12610. .calendar-year-selector {
  12611. display: flex;
  12612. justify-content: space-between;
  12613. align-items: center;
  12614. width: 50%;
  12615. max-width: 200px;
  12616. flex-shrink: 10;
  12617. margin-left: auto;
  12618. margin-right: auto;
  12619. }
  12620. .calendar-month-selector .calendar-day-number,
  12621. .calendar-year-selector .calendar-day-number {
  12622. flex-shrink: 1;
  12623. position: relative;
  12624. overflow: hidden;
  12625. text-overflow: ellipsis;
  12626. }
  12627. .calendar-month-selector a.icon-only,
  12628. .calendar-year-selector a.icon-only {
  12629. min-width: 36px;
  12630. }
  12631. /* === Picker === */
  12632. :root {
  12633. --f7-picker-height: 260px;
  12634. --f7-picker-inline-height: 200px;
  12635. --f7-picker-popover-height: 200px;
  12636. --f7-picker-popover-width: 280px;
  12637. --f7-picker-landscape-height: 200px;
  12638. --f7-picker-item-height: 36px;
  12639. }
  12640. .ios {
  12641. --f7-picker-column-font-size: 24px;
  12642. --f7-picker-divider-text-color: #000;
  12643. --f7-picker-item-text-color: #707274;
  12644. --f7-picker-item-selected-text-color: #000;
  12645. --f7-picker-item-selected-border-color: #a8abb0;
  12646. }
  12647. .ios .theme-dark,
  12648. .ios.theme-dark {
  12649. --f7-picker-divider-text-color: #fff;
  12650. --f7-picker-item-selected-text-color: #fff;
  12651. --f7-picker-item-selected-border-color: rgba(255, 255, 255, 0.06);
  12652. }
  12653. .md {
  12654. --f7-picker-column-font-size: 20px;
  12655. --f7-picker-divider-text-color: rgba(0, 0, 0, 0.87);
  12656. --f7-picker-item-text-color: inherit;
  12657. --f7-picker-item-selected-text-color: inherit;
  12658. --f7-picker-item-selected-border-color: rgba(0, 0, 0, 0.15);
  12659. }
  12660. .md .theme-dark,
  12661. .md.theme-dark {
  12662. --f7-picker-divider-text-color: rgba(255, 255, 255, 0.87);
  12663. --f7-picker-item-selected-border-color: rgba(255, 255, 255, 0.15);
  12664. }
  12665. .aurora {
  12666. --f7-picker-column-font-size: 16px;
  12667. --f7-picker-divider-text-color: #000;
  12668. --f7-picker-item-height: 28px;
  12669. --f7-picker-item-text-color: #888;
  12670. --f7-picker-item-selected-text-color: #000;
  12671. --f7-picker-item-selected-border-color: rgba(0, 0, 0, 0.12);
  12672. }
  12673. .aurora .theme-dark,
  12674. .aurora.theme-dark {
  12675. --f7-picker-divider-text-color: #fff;
  12676. --f7-picker-item-selected-text-color: #fff;
  12677. --f7-picker-item-selected-border-color: rgba(255, 255, 255, 0.06);
  12678. }
  12679. .picker {
  12680. width: 100%;
  12681. height: var(--f7-picker-height);
  12682. }
  12683. .picker.picker-inline {
  12684. height: var(--f7-picker-inline-height);
  12685. }
  12686. .popover .picker {
  12687. height: var(--f7-picker-popover-height);
  12688. }
  12689. @media (orientation: landscape) and (max-height: 415px) {
  12690. .picker:not(.picker-inline) {
  12691. height: var(--f7-picker-landscape-height);
  12692. }
  12693. }
  12694. .picker-popover {
  12695. width: var(--f7-picker-popover-width);
  12696. }
  12697. .picker-popover .toolbar {
  12698. background: none;
  12699. border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0;
  12700. }
  12701. .picker-popover .toolbar:before {
  12702. display: none !important;
  12703. }
  12704. .picker-popover .toolbar + .picker-columns {
  12705. height: calc(100% - var(--f7-toolbar-height));
  12706. }
  12707. .picker-columns {
  12708. display: flex;
  12709. overflow: hidden;
  12710. justify-content: center;
  12711. padding: 0;
  12712. text-align: right;
  12713. height: 100%;
  12714. position: relative;
  12715. -webkit-mask-box-image: linear-gradient(to top, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent);
  12716. font-size: var(--f7-picker-column-font-size);
  12717. }
  12718. .picker-column {
  12719. position: relative;
  12720. max-height: 100%;
  12721. }
  12722. .picker-column.picker-column-first:before,
  12723. .picker-column.picker-column-last:after {
  12724. height: 100%;
  12725. width: 100vw;
  12726. position: absolute;
  12727. content: '';
  12728. top: 0;
  12729. }
  12730. .picker-column.picker-column-first:before {
  12731. right: 100%;
  12732. }
  12733. .picker-column.picker-column-last:after {
  12734. left: 100%;
  12735. }
  12736. .picker-column.picker-column-left {
  12737. text-align: left;
  12738. }
  12739. .picker-column.picker-column-center {
  12740. text-align: center;
  12741. }
  12742. .picker-column.picker-column-right {
  12743. text-align: right;
  12744. }
  12745. .picker-column.picker-column-divider {
  12746. display: flex;
  12747. align-items: center;
  12748. color: var(--f7-picker-divider-text-color);
  12749. }
  12750. .picker-items {
  12751. transition: 300ms;
  12752. transition-timing-function: ease-out;
  12753. }
  12754. .picker-item {
  12755. height: var(--f7-picker-item-height);
  12756. line-height: var(--f7-picker-item-height);
  12757. white-space: nowrap;
  12758. position: relative;
  12759. overflow: hidden;
  12760. text-overflow: ellipsis;
  12761. left: 0;
  12762. top: 0;
  12763. width: 100%;
  12764. box-sizing: border-box;
  12765. transition: 300ms;
  12766. color: var(--f7-picker-item-text-color);
  12767. cursor: pointer;
  12768. }
  12769. .picker-item span {
  12770. padding: 0 10px;
  12771. }
  12772. .picker-column-absolute .picker-item {
  12773. position: absolute;
  12774. }
  12775. .picker-item.picker-item-far {
  12776. pointer-events: none;
  12777. }
  12778. .picker-item.picker-item-selected {
  12779. color: var(--f7-picker-item-selected-text-color);
  12780. transform: translate3d(0, 0, 0) rotateX(0deg);
  12781. }
  12782. .picker-center-highlight {
  12783. height: var(--f7-picker-item-height);
  12784. box-sizing: border-box;
  12785. position: absolute;
  12786. left: 0;
  12787. width: 100%;
  12788. top: 50%;
  12789. margin-top: calc(-1 * var(--f7-picker-item-height) / 2);
  12790. pointer-events: none;
  12791. }
  12792. .picker-center-highlight:before {
  12793. content: '';
  12794. position: absolute;
  12795. background-color: var(--f7-picker-item-selected-border-color);
  12796. display: block;
  12797. z-index: 15;
  12798. top: 0;
  12799. right: auto;
  12800. bottom: auto;
  12801. left: 0;
  12802. height: 1px;
  12803. width: 100%;
  12804. transform-origin: 50% 0%;
  12805. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  12806. }
  12807. .picker-center-highlight:after {
  12808. content: '';
  12809. position: absolute;
  12810. background-color: var(--f7-picker-item-selected-border-color);
  12811. display: block;
  12812. z-index: 15;
  12813. top: auto;
  12814. right: auto;
  12815. bottom: 0;
  12816. left: 0;
  12817. height: 1px;
  12818. width: 100%;
  12819. transform-origin: 50% 100%;
  12820. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  12821. }
  12822. .picker-3d .picker-columns {
  12823. overflow: hidden;
  12824. perspective: 1200px;
  12825. }
  12826. .picker-3d .picker-column,
  12827. .picker-3d .picker-items,
  12828. .picker-3d .picker-item {
  12829. transform-style: preserve-3d;
  12830. }
  12831. .picker-3d .picker-column {
  12832. overflow: visible;
  12833. }
  12834. .picker-3d .picker-item {
  12835. transform-origin: center center -110px;
  12836. -webkit-backface-visibility: hidden;
  12837. backface-visibility: hidden;
  12838. transition-timing-function: ease-out;
  12839. }
  12840. /* === Infinite === */
  12841. .infinite-scroll-preloader {
  12842. margin-left: auto;
  12843. margin-right: auto;
  12844. text-align: center;
  12845. }
  12846. .infinite-scroll-preloader.preloader {
  12847. display: block;
  12848. }
  12849. .ios .infinite-scroll-preloader {
  12850. margin-top: 35px;
  12851. margin-bottom: 35px;
  12852. }
  12853. .ios .infinite-scroll-preloader .preloader,
  12854. .ios .infinite-scroll-preloader.preloader {
  12855. width: 27px;
  12856. height: 27px;
  12857. }
  12858. .md .infinite-scroll-preloader {
  12859. margin-top: 32px;
  12860. margin-bottom: 32px;
  12861. }
  12862. .aurora .infinite-scroll-preloader {
  12863. margin-top: 15px;
  12864. margin-bottom: 15px;
  12865. }
  12866. /* === PTR === */
  12867. .ios {
  12868. --f7-ptr-preloader-size: 20px;
  12869. --f7-ptr-size: 44px;
  12870. }
  12871. .md {
  12872. --f7-ptr-preloader-size: 22px;
  12873. --f7-ptr-size: 40px;
  12874. }
  12875. .aurora {
  12876. --f7-ptr-preloader-size: 20px;
  12877. --f7-ptr-size: 38px;
  12878. }
  12879. .ptr-preloader {
  12880. position: relative;
  12881. top: var(--f7-ptr-top, 0);
  12882. height: var(--f7-ptr-size);
  12883. }
  12884. .ptr-preloader .preloader {
  12885. position: absolute;
  12886. left: 50%;
  12887. width: var(--f7-ptr-preloader-size);
  12888. height: var(--f7-ptr-preloader-size);
  12889. margin-left: calc(-1 * var(--f7-ptr-preloader-size) / 2);
  12890. margin-top: calc(-1 * var(--f7-ptr-preloader-size) / 2);
  12891. top: 50%;
  12892. visibility: hidden;
  12893. }
  12894. .ptr-bottom .ptr-preloader {
  12895. top: auto;
  12896. bottom: 0;
  12897. position: fixed;
  12898. }
  12899. .ios .ptr-preloader {
  12900. margin-top: calc(-1 * var(--f7-ptr-size));
  12901. width: 100%;
  12902. left: 0;
  12903. }
  12904. .ios .ptr-arrow {
  12905. position: absolute;
  12906. left: 50%;
  12907. top: 50%;
  12908. background: no-repeat center;
  12909. z-index: 10;
  12910. transform: rotate(0deg) translate3d(0, 0, 0);
  12911. transition-duration: 300ms;
  12912. transition-property: transform;
  12913. width: 12px;
  12914. height: 20px;
  12915. margin-left: -6px;
  12916. margin-top: -10px;
  12917. visibility: visible;
  12918. color: var(--f7-preloader-color);
  12919. }
  12920. .ios .ptr-arrow:after {
  12921. font-family: 'framework7-core-icons';
  12922. font-weight: normal;
  12923. font-style: normal;
  12924. line-height: 1;
  12925. letter-spacing: normal;
  12926. text-transform: none;
  12927. white-space: nowrap;
  12928. word-wrap: normal;
  12929. direction: ltr;
  12930. -webkit-font-smoothing: antialiased;
  12931. text-rendering: optimizeLegibility;
  12932. -moz-osx-font-smoothing: grayscale;
  12933. -moz-font-feature-settings: "liga";
  12934. font-feature-settings: "liga";
  12935. text-align: center;
  12936. display: block;
  12937. width: 100%;
  12938. height: 100%;
  12939. font-size: 20px;
  12940. width: 12px;
  12941. height: 20px;
  12942. line-height: 20px;
  12943. font-size: 10px;
  12944. content: 'ptr_arrow_ios';
  12945. }
  12946. .ios .ptr-content:not(.ptr-refreshing) .ptr-preloader .preloader {
  12947. animation: none;
  12948. }
  12949. .ios .ptr-transitioning,
  12950. .ios .ptr-refreshing {
  12951. transition-duration: 300ms;
  12952. transition-property: transform;
  12953. }
  12954. .ios .ptr-refreshing {
  12955. transform: translate3d(0, var(--f7-ptr-size), 0);
  12956. }
  12957. .ios .ptr-refreshing .ptr-arrow {
  12958. visibility: hidden;
  12959. }
  12960. .ios .ptr-refreshing .ptr-preloader .preloader {
  12961. visibility: visible;
  12962. }
  12963. .ios .ptr-pull-up .ptr-arrow {
  12964. transform: rotate(180deg) translate3d(0, 0, 0);
  12965. }
  12966. .ios .ptr-no-navbar {
  12967. margin-top: calc(-1 * var(--f7-ptr-size));
  12968. height: calc(100% + var(--f7-ptr-size));
  12969. }
  12970. .ios .ptr-no-navbar .ptr-preloader {
  12971. margin-top: 0;
  12972. }
  12973. .ios .ptr-bottom .ptr-preloader {
  12974. margin-top: 0;
  12975. margin-bottom: calc(-1 * var(--f7-ptr-size));
  12976. }
  12977. .ios .ptr-bottom.ptr-transitioning > *,
  12978. .ios .ptr-bottom.ptr-refreshing > * {
  12979. transition-duration: 300ms;
  12980. transition-property: transform;
  12981. }
  12982. .ios .ptr-bottom.ptr-refreshing {
  12983. transform: none;
  12984. }
  12985. .ios .ptr-bottom.ptr-refreshing > * {
  12986. transform: translate3d(0, calc(-1 * var(--f7-ptr-size)), 0);
  12987. }
  12988. .ios .ptr-bottom .ptr-arrow {
  12989. transform: rotate(180deg) translate3d(0, 0, 0);
  12990. }
  12991. .ios .ptr-bottom.ptr-pull-up .ptr-arrow {
  12992. transform: rotate(0deg) translate3d(0, 0, 0);
  12993. }
  12994. .md {
  12995. --f7-ptr-top: -4px;
  12996. }
  12997. .md .ptr-preloader {
  12998. width: var(--f7-ptr-size);
  12999. border-radius: 50%;
  13000. background: #fff;
  13001. margin-top: calc(-1 * var(--f7-ptr-size));
  13002. z-index: 100;
  13003. box-shadow: var(--f7-elevation-1);
  13004. left: 50%;
  13005. margin-left: calc(-1 * var(--f7-ptr-size) / 2);
  13006. }
  13007. .md .ptr-preloader .preloader .preloader-inner-gap,
  13008. .md .ptr-preloader .preloader .preloader-inner-half-circle {
  13009. border-width: 3px;
  13010. }
  13011. .md .ptr-arrow {
  13012. width: 22px;
  13013. height: 22px;
  13014. box-sizing: border-box;
  13015. border: 3px solid var(--f7-preloader-color);
  13016. position: absolute;
  13017. left: 50%;
  13018. top: 50%;
  13019. margin-left: -11px;
  13020. margin-top: -11px;
  13021. border-left-color: transparent;
  13022. border-radius: 50%;
  13023. opacity: 1;
  13024. transform: rotate(150deg);
  13025. }
  13026. .md .ptr-arrow:after {
  13027. content: '';
  13028. width: 0px;
  13029. height: 0px;
  13030. position: absolute;
  13031. left: -5px;
  13032. bottom: 0px;
  13033. border-bottom-width: 6px;
  13034. border-bottom-style: solid;
  13035. border-bottom-color: inherit;
  13036. border-left: 5px solid transparent;
  13037. border-right: 5px solid transparent;
  13038. transform: rotate(-40deg);
  13039. }
  13040. .md .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up) .ptr-preloader .preloader,
  13041. .md .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up) .ptr-preloader .preloader * {
  13042. animation: none;
  13043. }
  13044. .md .ptr-refreshing .ptr-preloader .preloader,
  13045. .md .ptr-pull-up .ptr-preloader .preloader {
  13046. visibility: visible;
  13047. }
  13048. .md .ptr-refreshing .ptr-arrow,
  13049. .md .ptr-pull-up .ptr-arrow {
  13050. visibility: hidden;
  13051. }
  13052. .md .ptr-refreshing .ptr-preloader {
  13053. transform: translate3d(0, 66px, 0);
  13054. }
  13055. .md .ptr-transitioning .ptr-arrow {
  13056. transition: 300ms;
  13057. }
  13058. .md .ptr-pull-up .ptr-arrow {
  13059. transition: 400ms;
  13060. transform: rotate(620deg) !important;
  13061. opacity: 0;
  13062. }
  13063. .md .ptr-transitioning .ptr-preloader,
  13064. .md .ptr-refreshing .ptr-preloader {
  13065. transition-duration: 300ms;
  13066. transition-property: transform;
  13067. }
  13068. .md .ptr-bottom .ptr-preloader {
  13069. margin-top: 0;
  13070. margin-bottom: calc(-1 * var(--f7-ptr-size) - 4px);
  13071. }
  13072. .md .ptr-bottom.ptr-refreshing .ptr-preloader {
  13073. transform: translate3d(0, -66px, 0);
  13074. }
  13075. .aurora .ptr-preloader {
  13076. margin-top: calc(-1 * var(--f7-ptr-size));
  13077. width: 100%;
  13078. left: 0;
  13079. }
  13080. .aurora .ptr-arrow {
  13081. position: absolute;
  13082. left: 50%;
  13083. top: 50%;
  13084. background: no-repeat center;
  13085. z-index: 10;
  13086. transform: rotate(0deg) translate3d(0, 0, 0);
  13087. transition-duration: 300ms;
  13088. transition-property: transform;
  13089. width: 12px;
  13090. height: 20px;
  13091. margin-left: -6px;
  13092. margin-top: -10px;
  13093. visibility: visible;
  13094. color: var(--f7-preloader-color);
  13095. }
  13096. .aurora .ptr-arrow:after {
  13097. font-family: 'framework7-core-icons';
  13098. font-weight: normal;
  13099. font-style: normal;
  13100. line-height: 1;
  13101. letter-spacing: normal;
  13102. text-transform: none;
  13103. white-space: nowrap;
  13104. word-wrap: normal;
  13105. direction: ltr;
  13106. -webkit-font-smoothing: antialiased;
  13107. text-rendering: optimizeLegibility;
  13108. -moz-osx-font-smoothing: grayscale;
  13109. -moz-font-feature-settings: "liga";
  13110. font-feature-settings: "liga";
  13111. text-align: center;
  13112. display: block;
  13113. width: 100%;
  13114. height: 100%;
  13115. font-size: 20px;
  13116. width: 12px;
  13117. height: 20px;
  13118. line-height: 20px;
  13119. font-size: 8px;
  13120. content: 'ptr_arrow_ios';
  13121. }
  13122. .aurora .ptr-content:not(.ptr-refreshing) .ptr-preloader .preloader {
  13123. animation: none;
  13124. }
  13125. .aurora .ptr-transitioning,
  13126. .aurora .ptr-refreshing {
  13127. transition-duration: 300ms;
  13128. transition-property: transform;
  13129. }
  13130. .aurora .ptr-refreshing {
  13131. transform: translate3d(0, var(--f7-ptr-size), 0);
  13132. }
  13133. .aurora .ptr-refreshing .ptr-arrow {
  13134. visibility: hidden;
  13135. }
  13136. .aurora .ptr-refreshing .ptr-preloader .preloader {
  13137. visibility: visible;
  13138. }
  13139. .aurora .ptr-pull-up .ptr-arrow {
  13140. transform: rotate(180deg) translate3d(0, 0, 0);
  13141. }
  13142. .aurora .ptr-no-navbar {
  13143. margin-top: calc(-1 * var(--f7-ptr-size));
  13144. height: calc(100% + var(--f7-ptr-size));
  13145. }
  13146. .aurora .ptr-no-navbar .ptr-preloader {
  13147. margin-top: 0;
  13148. }
  13149. .aurora .ptr-bottom .ptr-preloader {
  13150. margin-top: 0;
  13151. margin-bottom: calc(-1 * var(--f7-ptr-size));
  13152. }
  13153. .aurora .ptr-bottom.ptr-transitioning > *,
  13154. .aurora .ptr-bottom.ptr-refreshing > * {
  13155. transition-duration: 300ms;
  13156. transition-property: transform;
  13157. }
  13158. .aurora .ptr-bottom.ptr-refreshing {
  13159. transform: none;
  13160. }
  13161. .aurora .ptr-bottom.ptr-refreshing > * {
  13162. transform: translate3d(0, calc(-1 * var(--f7-ptr-size)), 0);
  13163. }
  13164. .aurora .ptr-bottom .ptr-arrow {
  13165. transform: rotate(180deg) translate3d(0, 0, 0);
  13166. }
  13167. .aurora .ptr-bottom.ptr-pull-up .ptr-arrow {
  13168. transform: rotate(0deg) translate3d(0, 0, 0);
  13169. }
  13170. /* === Images Lazy Loading === */
  13171. .lazy-loaded.lazy-fade-in {
  13172. animation: lazyFadeIn 600ms;
  13173. }
  13174. @keyframes lazyFadeIn {
  13175. from {
  13176. opacity: 0;
  13177. }
  13178. to {
  13179. opacity: 1;
  13180. }
  13181. }
  13182. /* === Data Table === */
  13183. :root {
  13184. --f7-table-head-font-size: 12px;
  13185. --f7-table-body-font-size: 14px;
  13186. --f7-table-footer-font-size: 12px;
  13187. --f7-table-input-height: 24px;
  13188. --f7-table-input-font-size: 14px;
  13189. --f7-table-collapsible-cell-padding: 15px;
  13190. --f7-table-link-icon-only-icon-size: 20px;
  13191. --f7-table-sortable-icon-color: #000;
  13192. }
  13193. :root .theme-dark,
  13194. :root.theme-dark {
  13195. --f7-table-cell-border-color: #282829;
  13196. --f7-table-sortable-icon-color: #fff;
  13197. --f7-table-input-text-color: #fff;
  13198. }
  13199. .ios {
  13200. --f7-table-head-font-weight: 600;
  13201. --f7-table-head-text-color: #8e8e93;
  13202. --f7-table-head-cell-height: 44px;
  13203. --f7-table-head-icon-size: 18px;
  13204. --f7-table-body-cell-height: 44px;
  13205. --f7-table-cell-border-color: #c8c7cc;
  13206. --f7-table-cell-padding-vertical: 0px;
  13207. --f7-table-cell-padding-horizontal: 15px;
  13208. --f7-table-edge-cell-padding-horizontal: 15px;
  13209. --f7-table-label-cell-padding-horizontal: 15px;
  13210. --f7-table-checkbox-cell-width: 22px;
  13211. /* --f7-table-actions-cell-link-color: var(--f7-theme-color); */
  13212. --f7-table-selected-row-bg-color: #f7f7f8;
  13213. /* --f7-table-actions-link-color: var(--f7-theme-color); */
  13214. --f7-table-title-font-size: 17px;
  13215. --f7-table-title-font-weight: 600;
  13216. --f7-table-card-header-height: 64px;
  13217. --f7-table-footer-height: 44px;
  13218. --f7-table-footer-text-color: #8e8e93;
  13219. --f7-table-input-text-color: #000;
  13220. }
  13221. .ios .theme-dark,
  13222. .ios.theme-dark {
  13223. --f7-table-selected-row-bg-color: #363636;
  13224. }
  13225. .md {
  13226. --f7-table-head-font-weight: 500;
  13227. --f7-table-head-text-color: rgba(0, 0, 0, 0.54);
  13228. --f7-table-head-cell-height: 56px;
  13229. --f7-table-head-icon-size: 16px;
  13230. --f7-table-body-cell-height: 48px;
  13231. --f7-table-cell-border-color: rgba(0, 0, 0, 0.12);
  13232. --f7-table-cell-padding-vertical: 0px;
  13233. --f7-table-cell-padding-horizontal: 28px;
  13234. --f7-table-edge-cell-padding-horizontal: 24px;
  13235. --f7-table-label-cell-padding-horizontal: 24px;
  13236. --f7-table-checkbox-cell-width: 18px;
  13237. --f7-table-actions-cell-link-color: rgba(0, 0, 0, 0.54);
  13238. --f7-table-selected-row-bg-color: #f5f5f5;
  13239. --f7-table-actions-link-color: rgba(0, 0, 0, 0.54);
  13240. --f7-table-title-font-size: 20px;
  13241. --f7-table-title-font-weight: 400;
  13242. --f7-table-card-header-height: 64px;
  13243. --f7-table-footer-height: 56px;
  13244. --f7-table-footer-text-color: rgba(0, 0, 0, 0.54);
  13245. --f7-table-input-text-color: #212121;
  13246. }
  13247. .md .theme-dark,
  13248. .md.theme-dark {
  13249. --f7-table-head-text-color: rgba(255, 255, 255, 0.54);
  13250. --f7-table-footer-text-color: rgba(255, 255, 255, 0.54);
  13251. --f7-table-selected-row-bg-color: rgba(255, 255, 255, 0.05);
  13252. --f7-table-actions-cell-link-color: rgba(255, 255, 255, 0.54);
  13253. --f7-table-actions-link-color: rgba(255, 255, 255, 0.54);
  13254. }
  13255. .aurora {
  13256. --f7-table-link-icon-only-icon-size: 18px;
  13257. --f7-table-head-font-weight: 400;
  13258. --f7-table-head-text-color: rgba(0, 0, 0, 0.6);
  13259. --f7-table-head-cell-height: 32px;
  13260. --f7-table-head-icon-size: 18px;
  13261. --f7-table-body-cell-height: 32px;
  13262. --f7-table-cell-border-color: rgba(0, 0, 0, 0.12);
  13263. --f7-table-cell-padding-vertical: 5px;
  13264. --f7-table-cell-padding-horizontal: 10px;
  13265. --f7-table-edge-cell-padding-horizontal: 15px;
  13266. --f7-table-label-cell-padding-horizontal: 15px;
  13267. --f7-table-checkbox-cell-width: 22px;
  13268. /* --f7-table-actions-cell-link-color: var(--f7-theme-color); */
  13269. --f7-table-selected-row-bg-color: rgba(0, 0, 0, 0.03);
  13270. /* --f7-table-actions-link-color: var(--f7-theme-color); */
  13271. --f7-table-title-font-size: 14px;
  13272. --f7-table-title-font-weight: 600;
  13273. --f7-table-card-header-height: 42px;
  13274. --f7-table-footer-height: 32px;
  13275. --f7-table-footer-text-color: rgba(0, 0, 0, 0.5);
  13276. --f7-table-input-text-color: #000;
  13277. }
  13278. .aurora .theme-dark,
  13279. .aurora.theme-dark {
  13280. --f7-table-selected-row-bg-color: rgba(255, 255, 255, 0.03);
  13281. --f7-table-head-text-color: rgba(255, 255, 255, 0.52);
  13282. --f7-table-footer-text-color: rgba(255, 255, 255, 0.52);
  13283. }
  13284. .data-table {
  13285. overflow-x: auto;
  13286. }
  13287. .data-table table,
  13288. table.data-table {
  13289. width: 100%;
  13290. border: none;
  13291. padding: 0;
  13292. margin: 0;
  13293. border-collapse: collapse;
  13294. text-align: left;
  13295. }
  13296. .data-table thead th,
  13297. .data-table thead td {
  13298. font-size: var(--f7-table-head-font-size);
  13299. font-weight: var(--f7-table-head-font-weight);
  13300. overflow: hidden;
  13301. white-space: nowrap;
  13302. text-overflow: ellipsis;
  13303. line-height: 16px;
  13304. height: var(--f7-table-head-cell-height);
  13305. }
  13306. .data-table thead th:not(.sortable-cell-active),
  13307. .data-table thead td:not(.sortable-cell-active) {
  13308. color: var(--f7-table-head-text-color);
  13309. }
  13310. .data-table thead i.icon,
  13311. .data-table thead i.f7-icons,
  13312. .data-table thead i.material-icons {
  13313. vertical-align: top;
  13314. font-size: var(--f7-table-head-icon-size);
  13315. width: var(--f7-table-head-icon-size);
  13316. height: var(--f7-table-head-icon-size);
  13317. }
  13318. .data-table tbody {
  13319. font-size: var(--f7-table-body-font-size);
  13320. }
  13321. .data-table tbody th,
  13322. .data-table tbody td {
  13323. height: var(--f7-table-body-cell-height);
  13324. }
  13325. .data-table tbody tr.data-table-row-selected,
  13326. .device-desktop .data-table tbody tr:hover {
  13327. background: var(--f7-table-selected-row-bg-color);
  13328. }
  13329. .data-table tbody td:before,
  13330. .data-table tbody th:before {
  13331. content: '';
  13332. position: absolute;
  13333. background-color: var(--f7-table-cell-border-color);
  13334. display: block;
  13335. z-index: 15;
  13336. top: 0;
  13337. right: auto;
  13338. bottom: auto;
  13339. left: 0;
  13340. height: 1px;
  13341. width: 100%;
  13342. transform-origin: 50% 0%;
  13343. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  13344. }
  13345. .data-table th,
  13346. .data-table td {
  13347. --f7-table-cell-padding-left: var(--f7-table-cell-padding-horizontal);
  13348. --f7-table-cell-padding-right: var(--f7-table-cell-padding-horizontal);
  13349. padding-top: var(--f7-table-cell-padding-vertical);
  13350. padding-bottom: var(--f7-table-cell-padding-vertical);
  13351. padding-left: var(--f7-table-cell-padding-left);
  13352. padding-right: var(--f7-table-cell-padding-right);
  13353. position: relative;
  13354. box-sizing: border-box;
  13355. }
  13356. .data-table th:first-child,
  13357. .data-table td:first-child {
  13358. --f7-table-cell-padding-left: var(--f7-table-edge-cell-padding-horizontal);
  13359. }
  13360. .data-table th:last-child,
  13361. .data-table td:last-child {
  13362. --f7-table-cell-padding-right: var(--f7-table-edge-cell-padding-horizontal);
  13363. }
  13364. .data-table th.label-cell,
  13365. .data-table td.label-cell {
  13366. --f7-table-cell-padding-left: var(--f7-table-label-cell-padding-horizontal);
  13367. --f7-table-cell-padding-right: var(--f7-table-label-cell-padding-horizontal);
  13368. }
  13369. .data-table th.numeric-cell,
  13370. .data-table td.numeric-cell {
  13371. text-align: right;
  13372. }
  13373. .data-table th.checkbox-cell,
  13374. .data-table td.checkbox-cell {
  13375. overflow: visible;
  13376. width: var(--f7-table-checkbox-cell-width);
  13377. }
  13378. .data-table th.checkbox-cell label + span,
  13379. .data-table td.checkbox-cell label + span {
  13380. margin-left: 8px;
  13381. }
  13382. .data-table th.checkbox-cell:first-child,
  13383. .data-table td.checkbox-cell:first-child {
  13384. padding-right: calc(var(--f7-table-cell-padding-right) / 2);
  13385. }
  13386. .data-table th.checkbox-cell:first-child + td,
  13387. .data-table td.checkbox-cell:first-child + td,
  13388. .data-table th.checkbox-cell:first-child + th,
  13389. .data-table td.checkbox-cell:first-child + th {
  13390. padding-left: calc(var(--f7-table-cell-padding-left) / 2);
  13391. }
  13392. .data-table th.checkbox-cell:last-child,
  13393. .data-table td.checkbox-cell:last-child {
  13394. padding-left: calc(var(--f7-table-cell-padding-left) / 2);
  13395. }
  13396. .data-table th.actions-cell,
  13397. .data-table td.actions-cell {
  13398. text-align: right;
  13399. white-space: nowrap;
  13400. }
  13401. .data-table th.actions-cell a.link,
  13402. .data-table td.actions-cell a.link {
  13403. color: var(--f7-table-actions-cell-link-color, var(--f7-theme-color));
  13404. }
  13405. .data-table th a.icon-only,
  13406. .data-table td a.icon-only,
  13407. .card .data-table th a.icon-only,
  13408. .card .data-table td a.icon-only,
  13409. .card.data-table th a.icon-only,
  13410. .card.data-table td a.icon-only {
  13411. display: inline-block;
  13412. vertical-align: middle;
  13413. text-align: center;
  13414. font-size: 0;
  13415. min-width: 0;
  13416. }
  13417. .data-table th a.icon-only i,
  13418. .data-table td a.icon-only i,
  13419. .card .data-table th a.icon-only i,
  13420. .card .data-table td a.icon-only i,
  13421. .card.data-table th a.icon-only i,
  13422. .card.data-table td a.icon-only i {
  13423. font-size: var(--f7-table-link-icon-only-icon-size);
  13424. vertical-align: middle;
  13425. }
  13426. .data-table .sortable-cell:not(.input-cell) {
  13427. cursor: pointer;
  13428. position: relative;
  13429. }
  13430. .data-table .sortable-cell.input-cell .table-head-label {
  13431. cursor: pointer;
  13432. position: relative;
  13433. }
  13434. .data-table .sortable-cell:not(.numeric-cell):not(.input-cell):after,
  13435. .data-table .sortable-cell.numeric-cell:not(.input-cell):before,
  13436. .data-table .sortable-cell:not(.numeric-cell).input-cell > .table-head-label:after,
  13437. .data-table .sortable-cell.numeric-cell.input-cell > .table-head-label:before {
  13438. content: 'arrow_bottom_md';
  13439. font-family: 'framework7-core-icons';
  13440. font-weight: normal;
  13441. font-style: normal;
  13442. line-height: 1;
  13443. letter-spacing: normal;
  13444. text-transform: none;
  13445. white-space: nowrap;
  13446. word-wrap: normal;
  13447. direction: ltr;
  13448. -webkit-font-smoothing: antialiased;
  13449. text-rendering: optimizeLegibility;
  13450. -moz-osx-font-smoothing: grayscale;
  13451. -moz-font-feature-settings: "liga";
  13452. font-feature-settings: "liga";
  13453. text-align: center;
  13454. display: block;
  13455. width: 100%;
  13456. height: 100%;
  13457. font-size: 20px;
  13458. display: inline-block;
  13459. vertical-align: top;
  13460. width: 16px;
  13461. height: 16px;
  13462. color: var(--f7-table-sortable-icon-color);
  13463. font-size: 13px;
  13464. line-height: 16px;
  13465. transition-duration: 300ms;
  13466. transform: rotate(0);
  13467. opacity: 0;
  13468. }
  13469. .device-desktop .data-table .sortable-cell:not(.sortable-cell-active):hover:after,
  13470. .device-desktop .data-table .sortable-cell:not(.sortable-cell-active) .table-head-label:hover:after,
  13471. .device-desktop .data-table .sortable-cell:not(.sortable-cell-active):hover:before,
  13472. .device-desktop .data-table .sortable-cell:not(.sortable-cell-active) .table-head-label:hover:before {
  13473. opacity: 0.54;
  13474. }
  13475. .data-table .sortable-cell.sortable-cell-active:after,
  13476. .data-table .sortable-cell.sortable-cell-active .table-head-label:after,
  13477. .data-table .sortable-cell.sortable-cell-active:before,
  13478. .data-table .sortable-cell.sortable-cell-active .table-head-label:before {
  13479. opacity: 0.87 !important;
  13480. }
  13481. .data-table .sortable-cell.sortable-desc:after,
  13482. .data-table .sortable-cell.sortable-desc:after,
  13483. .data-table .table-head-label:after,
  13484. .data-table .sortable-cell.sortable-desc:before,
  13485. .data-table .sortable-cell.sortable-desc:before,
  13486. .data-table .table-head-label:before {
  13487. transform: rotate(180deg) !important;
  13488. }
  13489. .data-table.card .card-header,
  13490. .card .data-table .card-header,
  13491. .data-table.card .card-footer,
  13492. .card .data-table .card-footer {
  13493. padding-left: var(--f7-table-edge-cell-padding-horizontal);
  13494. padding-right: var(--f7-table-edge-cell-padding-horizontal);
  13495. }
  13496. .data-table.card .card-header,
  13497. .card .data-table .card-header {
  13498. min-height: var(--f7-table-card-header-height);
  13499. }
  13500. .data-table.card .card-content,
  13501. .card .data-table .card-content {
  13502. overflow-x: auto;
  13503. }
  13504. .data-table.card .card-footer,
  13505. .card .data-table .card-footer {
  13506. min-height: var(--f7-table-footer-height);
  13507. }
  13508. .data-table .data-table-title {
  13509. font-size: var(--f7-table-title-font-size);
  13510. font-weight: var(--f7-table-title-font-weight);
  13511. }
  13512. .data-table .data-table-links,
  13513. .data-table .data-table-actions {
  13514. display: flex;
  13515. }
  13516. .data-table .data-table-links .button {
  13517. min-width: 64px;
  13518. }
  13519. .data-table .data-table-actions {
  13520. margin-left: auto;
  13521. align-items: center;
  13522. }
  13523. .data-table .data-table-actions a.link {
  13524. color: var(--f7-table-actions-link-color, var(--f7-theme-color));
  13525. min-width: 0;
  13526. }
  13527. .data-table .data-table-actions a.link.icon-only {
  13528. line-height: 1;
  13529. justify-content: center;
  13530. padding: 0;
  13531. }
  13532. .data-table .data-table-header,
  13533. .data-table .data-table-header-selected {
  13534. display: flex;
  13535. justify-content: space-between;
  13536. align-items: center;
  13537. width: 100%;
  13538. }
  13539. .data-table .card-header > .data-table-header,
  13540. .data-table .card-header > .data-table-header-selected {
  13541. padding-top: var(--f7-card-header-padding-vertical);
  13542. padding-bottom: var(--f7-card-header-padding-vertical);
  13543. height: 100%;
  13544. padding-left: var(--f7-table-edge-cell-padding-horizontal);
  13545. padding-right: var(--f7-table-edge-cell-padding-horizontal);
  13546. margin-left: calc(-1 * var(--f7-table-edge-cell-padding-horizontal));
  13547. margin-right: calc(-1 * var(--f7-table-edge-cell-padding-horizontal));
  13548. }
  13549. .data-table .data-table-header-selected {
  13550. background: rgba(var(--f7-theme-color-rgb), 0.1);
  13551. display: none;
  13552. }
  13553. .data-table.data-table-has-checked .data-table-header {
  13554. display: none;
  13555. }
  13556. .data-table.data-table-has-checked .data-table-header-selected {
  13557. display: flex;
  13558. }
  13559. .data-table .data-table-title-selected {
  13560. font-size: 14px;
  13561. color: var(--f7-theme-color);
  13562. }
  13563. .data-table .data-table-footer {
  13564. display: flex;
  13565. align-items: center;
  13566. box-sizing: border-box;
  13567. position: relative;
  13568. font-size: var(--f7-table-footer-font-size);
  13569. overflow: hidden;
  13570. min-height: var(--f7-table-footer-height);
  13571. color: var(--f7-table-footer-text-color);
  13572. justify-content: flex-end;
  13573. }
  13574. .data-table .data-table-footer:before {
  13575. content: '';
  13576. position: absolute;
  13577. background-color: var(--f7-table-cell-border-color);
  13578. display: block;
  13579. z-index: 15;
  13580. top: 0;
  13581. right: auto;
  13582. bottom: auto;
  13583. left: 0;
  13584. height: 1px;
  13585. width: 100%;
  13586. transform-origin: 50% 0%;
  13587. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  13588. }
  13589. .data-table .data-table-rows-select,
  13590. .data-table .data-table-pagination {
  13591. display: flex;
  13592. align-items: center;
  13593. }
  13594. .data-table .input-cell {
  13595. padding-top: 8px;
  13596. padding-bottom: 8px;
  13597. height: auto;
  13598. vertical-align: top;
  13599. }
  13600. .data-table .input-cell .table-head-label + .input {
  13601. margin-top: 4px;
  13602. }
  13603. .data-table .input-cell .input {
  13604. height: var(--f7-table-input-height);
  13605. }
  13606. .data-table .input-cell .input input,
  13607. .data-table .input-cell .input textarea,
  13608. .data-table .input-cell .input select {
  13609. height: var(--f7-table-input-height);
  13610. color: var(--f7-table-input-text-color);
  13611. font-size: var(--f7-table-input-font-size);
  13612. }
  13613. @media (max-width: 480px) and (orientation: portrait) {
  13614. .data-table.data-table-collapsible thead {
  13615. display: none;
  13616. }
  13617. .data-table.data-table-collapsible tbody,
  13618. .data-table.data-table-collapsible tr,
  13619. .data-table.data-table-collapsible td {
  13620. display: block;
  13621. }
  13622. .data-table.data-table-collapsible tr {
  13623. position: relative;
  13624. }
  13625. .data-table.data-table-collapsible tr:before {
  13626. content: '';
  13627. position: absolute;
  13628. background-color: var(--f7-table-cell-border-color);
  13629. display: block;
  13630. z-index: 15;
  13631. top: 0;
  13632. right: auto;
  13633. bottom: auto;
  13634. left: 0;
  13635. height: 1px;
  13636. width: 100%;
  13637. transform-origin: 50% 0%;
  13638. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  13639. }
  13640. .data-table.data-table-collapsible tr:hover {
  13641. background-color: inherit;
  13642. }
  13643. .data-table.data-table-collapsible td {
  13644. --f7-table-cell-padding-left: var(--f7-table-collapsible-cell-padding);
  13645. --f7-table-cell-padding-right: var(--f7-table-collapsible-cell-padding);
  13646. height: auto;
  13647. min-height: var(--f7-table-body-cell-height);
  13648. display: flex;
  13649. align-content: center;
  13650. align-items: center;
  13651. justify-content: flex-start;
  13652. text-align: left;
  13653. }
  13654. .data-table.data-table-collapsible td:before {
  13655. display: none !important;
  13656. }
  13657. .data-table.data-table-collapsible td:not(.checkbox-cell):before {
  13658. width: 40%;
  13659. display: block !important;
  13660. content: attr(data-collapsible-title);
  13661. position: relative;
  13662. height: auto;
  13663. background: none !important;
  13664. transform: none !important;
  13665. font-size: var(--f7-table-head-font-size);
  13666. font-weight: var(--f7-table-head-font-weight);
  13667. color: var(--f7-table-head-text-color);
  13668. margin-right: 16px;
  13669. flex-shrink: 0;
  13670. }
  13671. .data-table.data-table-collapsible td.checkbox-cell {
  13672. position: absolute;
  13673. top: 0;
  13674. left: 0;
  13675. }
  13676. .data-table.data-table-collapsible td.checkbox-cell + td {
  13677. padding-left: 16px;
  13678. }
  13679. .data-table.data-table-collapsible td.checkbox-cell ~ td {
  13680. margin-left: 32px;
  13681. }
  13682. }
  13683. .data-table .tablet-only,
  13684. .data-table .tablet-landscape-only {
  13685. display: none;
  13686. }
  13687. @media (min-width: 768px) {
  13688. .data-table .tablet-only {
  13689. display: table-cell;
  13690. }
  13691. }
  13692. @media (min-width: 768px) and (orientation: landscape) {
  13693. .data-table .tablet-landscape-only {
  13694. display: table-cell;
  13695. }
  13696. }
  13697. .ios .data-table th.actions-cell a.link + a.link,
  13698. .ios .data-table td.actions-cell a.link + a.link {
  13699. margin-left: 15px;
  13700. }
  13701. .ios .sortable-cell:not(.numeric-cell):after {
  13702. margin-left: 5px;
  13703. }
  13704. .ios .sortable-cell.numeric-cell:before {
  13705. margin-right: 5px;
  13706. }
  13707. .ios .data-table-links a.link + a.link,
  13708. .ios .data-table-actions a.link + a.link,
  13709. .ios .data-table-links .button + .button,
  13710. .ios .data-table-actions .button + .button {
  13711. margin-left: 15px;
  13712. }
  13713. .ios .data-table-actions a.link.icon-only {
  13714. width: 44px;
  13715. height: 44px;
  13716. }
  13717. .ios .data-table-rows-select a.link,
  13718. .ios .data-table-pagination a.link {
  13719. width: 44px;
  13720. height: 44px;
  13721. }
  13722. .ios .data-table-rows-select + .data-table-pagination {
  13723. margin-left: 30px;
  13724. }
  13725. .ios .data-table-rows-select .input {
  13726. margin-left: 20px;
  13727. }
  13728. .ios .data-table-pagination-label {
  13729. margin-right: 15px;
  13730. }
  13731. .md .data-table th.actions-cell a.link + a.link,
  13732. .md .data-table td.actions-cell a.link + a.link {
  13733. margin-left: 24px;
  13734. }
  13735. .md .data-table th.actions-cell a.icon-only,
  13736. .md .data-table td.actions-cell a.icon-only {
  13737. width: 24px;
  13738. height: 24px;
  13739. line-height: 24px;
  13740. }
  13741. .md .sortable-cell:not(.numeric-cell):after {
  13742. margin-left: 8px;
  13743. }
  13744. .md .sortable-cell.numeric-cell:before {
  13745. margin-right: 8px;
  13746. }
  13747. .md .data-table-links a.link + a.link,
  13748. .md .data-table-actions a.link + a.link,
  13749. .md .data-table-links .button + .button,
  13750. .md .data-table-actions .button + .button {
  13751. margin-left: 24px;
  13752. }
  13753. .md .data-table-actions a.link.icon-only {
  13754. width: 24px;
  13755. height: 24px;
  13756. overflow: visible;
  13757. }
  13758. .md .data-table-actions a.link.icon-only.active-state {
  13759. background: none;
  13760. }
  13761. .md .data-table-rows-select a.link,
  13762. .md .data-table-pagination a.link {
  13763. width: 48px;
  13764. height: 48px;
  13765. }
  13766. .md .data-table-rows-select a.link:before,
  13767. .md .data-table-pagination a.link:before {
  13768. content: '';
  13769. width: 152%;
  13770. height: 152%;
  13771. position: absolute;
  13772. left: -26%;
  13773. top: -26%;
  13774. background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
  13775. background-repeat: no-repeat;
  13776. background-position: center;
  13777. background-size: 100% 100%;
  13778. opacity: 0;
  13779. pointer-events: none;
  13780. transition-duration: 600ms;
  13781. }
  13782. .md .data-table-rows-select a.link.active-state:before,
  13783. .md .data-table-pagination a.link.active-state:before {
  13784. opacity: 1;
  13785. transition-duration: 150ms;
  13786. }
  13787. .md .data-table-rows-select + .data-table-pagination {
  13788. margin-left: 32px;
  13789. }
  13790. .md .data-table-rows-select .input {
  13791. margin-left: 24px;
  13792. }
  13793. .md .data-table-pagination-label {
  13794. margin-right: 20px;
  13795. }
  13796. .md .input-cell .input-clear-button {
  13797. transform: scale(0.8);
  13798. }
  13799. .aurora .data-table th.actions-cell a.link + a.link,
  13800. .aurora .data-table td.actions-cell a.link + a.link {
  13801. margin-left: 10px;
  13802. }
  13803. .aurora .sortable-cell:not(.numeric-cell):after {
  13804. margin-left: 5px;
  13805. }
  13806. .aurora .sortable-cell.numeric-cell:before {
  13807. margin-right: 5px;
  13808. }
  13809. .aurora .data-table-links a.link + a.link,
  13810. .aurora .data-table-actions a.link + a.link,
  13811. .aurora .data-table-links .button + .button,
  13812. .aurora .data-table-actions .button + .button {
  13813. margin-left: 10px;
  13814. }
  13815. .aurora .data-table-rows-select a.link,
  13816. .aurora .data-table-pagination a.link {
  13817. width: 32px;
  13818. height: 32px;
  13819. }
  13820. .aurora .data-table-rows-select + .data-table-pagination {
  13821. margin-left: 15px;
  13822. }
  13823. .aurora .data-table-rows-select .input {
  13824. margin-left: 10px;
  13825. }
  13826. .aurora .data-table-pagination-label {
  13827. margin-right: 10px;
  13828. }
  13829. /* === FAB === */
  13830. :root {
  13831. --f7-fab-text-color: #fff;
  13832. --f7-fab-extended-text-font-size: 14px;
  13833. --f7-fab-extended-text-padding: 0 20px;
  13834. --f7-fab-label-bg-color: #fff;
  13835. --f7-fab-label-text-color: #333;
  13836. --f7-fab-label-border-radius: 4px;
  13837. --f7-fab-label-padding: 4px 12px;
  13838. --f7-fab-button-size: 40px;
  13839. /* --f7-fab-pressed-bg-color: var(--f7-theme-color-shade); */
  13840. }
  13841. .ios {
  13842. --f7-fab-size: 50px;
  13843. --f7-fab-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
  13844. --f7-fab-margin: 15px;
  13845. --f7-fab-extended-size: 50px;
  13846. --f7-fab-extended-text-font-weight: 400;
  13847. --f7-fab-extended-text-letter-spacing: 0;
  13848. --f7-fab-label-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
  13849. --f7-fab-label-font-size: inherit;
  13850. }
  13851. .md {
  13852. --f7-fab-size: 56px;
  13853. --f7-fab-box-shadow: var(--f7-elevation-6);
  13854. --f7-fab-margin: 16px;
  13855. --f7-fab-extended-size: 48px;
  13856. --f7-fab-extended-text-font-weight: 500;
  13857. --f7-fab-extended-text-letter-spacing: 0.03em;
  13858. --f7-fab-label-box-shadow: var(--f7-elevation-3);
  13859. --f7-fab-label-font-size: inherit;
  13860. }
  13861. .aurora {
  13862. --f7-fab-size: 40px;
  13863. --f7-fab-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
  13864. --f7-fab-margin: 15px;
  13865. --f7-fab-extended-size: 38px;
  13866. --f7-fab-extended-text-font-weight: 500;
  13867. --f7-fab-extended-text-letter-spacing: 0;
  13868. --f7-fab-label-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
  13869. --f7-fab-label-font-size: 12px;
  13870. }
  13871. .fab {
  13872. position: absolute;
  13873. z-index: 1500;
  13874. }
  13875. .fab a {
  13876. --f7-touch-ripple-color: var(--f7-touch-ripple-white);
  13877. }
  13878. .fab[class*="fab-left"] {
  13879. left: calc(var(--f7-fab-margin) + var(--f7-safe-area-left));
  13880. }
  13881. .fab[class*="fab-right"] {
  13882. right: calc(var(--f7-fab-margin) + var(--f7-safe-area-right));
  13883. }
  13884. .fab[class*="-top"] {
  13885. top: var(--f7-fab-margin);
  13886. }
  13887. .fab[class*="-bottom"] {
  13888. bottom: calc(var(--f7-fab-margin) + var(--f7-safe-area-bottom));
  13889. }
  13890. .fab[class*="fab-center"] {
  13891. left: 50%;
  13892. transform: translateX(-50%);
  13893. }
  13894. .fab[class*="left-center"],
  13895. .fab[class*="right-center"] {
  13896. top: 50%;
  13897. transform: translateY(-50%);
  13898. }
  13899. .fab[class*="center-center"] {
  13900. top: 50%;
  13901. left: 50%;
  13902. transform: translateX(-50%) translateY(-50%);
  13903. }
  13904. .fab > a,
  13905. .fab-buttons a {
  13906. background-color: var(--f7-fab-bg-color, var(--f7-theme-color));
  13907. width: var(--f7-fab-size);
  13908. height: var(--f7-fab-size);
  13909. box-shadow: var(--f7-fab-box-shadow);
  13910. border-radius: calc(var(--f7-fab-size) / 2);
  13911. position: relative;
  13912. transition-duration: 300ms;
  13913. display: flex;
  13914. align-items: center;
  13915. justify-content: center;
  13916. overflow: hidden;
  13917. z-index: 1;
  13918. color: var(--f7-fab-text-color);
  13919. }
  13920. .fab > a.active-state,
  13921. .fab-buttons a.active-state {
  13922. background-color: var(--f7-fab-pressed-bg-color, var(--f7-theme-color-shade));
  13923. }
  13924. .fab > a i {
  13925. position: absolute;
  13926. left: 50%;
  13927. top: 50%;
  13928. transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
  13929. transition: 300ms;
  13930. }
  13931. .fab > a i + i {
  13932. transform: translate3d(-50%, -50%, 0) rotate(-90deg) scale(0.5);
  13933. opacity: 0;
  13934. }
  13935. .fab-buttons a {
  13936. border-radius: calc(var(--f7-fab-button-size) / 2);
  13937. width: var(--f7-fab-button-size);
  13938. height: var(--f7-fab-button-size);
  13939. }
  13940. .fab-buttons {
  13941. display: flex;
  13942. visibility: hidden;
  13943. pointer-events: none;
  13944. position: absolute;
  13945. }
  13946. .fab-buttons a {
  13947. opacity: 0;
  13948. }
  13949. .fab-opened:not(.fab-morph) > a i {
  13950. transform: translate3d(-50%, -50%, 0) rotate(90deg) scale(0.5);
  13951. opacity: 0;
  13952. }
  13953. .fab-opened:not(.fab-morph) > a i + i {
  13954. transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
  13955. opacity: 1;
  13956. }
  13957. .fab-opened .fab-buttons {
  13958. visibility: visible;
  13959. pointer-events: auto;
  13960. }
  13961. .fab-opened .fab-buttons a {
  13962. opacity: 1;
  13963. transform: translate3d(0, 0px, 0) scale(1) !important;
  13964. }
  13965. .fab-opened .fab-buttons a:nth-child(2) {
  13966. transition-delay: 50ms;
  13967. }
  13968. .fab-opened .fab-buttons a:nth-child(3) {
  13969. transition-delay: 100ms;
  13970. }
  13971. .fab-opened .fab-buttons a:nth-child(4) {
  13972. transition-delay: 150ms;
  13973. }
  13974. .fab-opened .fab-buttons a:nth-child(5) {
  13975. transition-delay: 200ms;
  13976. }
  13977. .fab-opened .fab-buttons a:nth-child(6) {
  13978. transition-delay: 250ms;
  13979. }
  13980. .fab-buttons-top,
  13981. .fab-buttons-bottom {
  13982. left: 50%;
  13983. width: var(--f7-fab-button-size);
  13984. margin-left: calc(-1 * var(--f7-fab-button-size) / 2);
  13985. }
  13986. .fab-buttons-top {
  13987. bottom: 100%;
  13988. margin-bottom: 16px;
  13989. flex-direction: column-reverse;
  13990. }
  13991. .fab-buttons-top a {
  13992. transform: translate3d(0, 8px, 0) scale(0.3);
  13993. transform-origin: center bottom;
  13994. }
  13995. .fab-buttons-top a + a {
  13996. margin-bottom: 16px;
  13997. }
  13998. .fab-buttons-bottom {
  13999. top: 100%;
  14000. margin-top: 16px;
  14001. flex-direction: column;
  14002. }
  14003. .fab-buttons-bottom a {
  14004. transform: translate3d(0, -8px, 0) scale(0.3);
  14005. transform-origin: center top;
  14006. }
  14007. .fab-buttons-bottom a + a {
  14008. margin-top: 16px;
  14009. }
  14010. .fab-buttons-left,
  14011. .fab-buttons-right {
  14012. top: 50%;
  14013. height: var(--f7-fab-button-size);
  14014. margin-top: calc(-1 * var(--f7-fab-button-size) / 2);
  14015. }
  14016. .fab-buttons-left {
  14017. right: 100%;
  14018. margin-right: 16px;
  14019. flex-direction: row-reverse;
  14020. }
  14021. .fab-buttons-left a {
  14022. transform: translate3d(8px, 0px, 0) scale(0.3);
  14023. transform-origin: right center;
  14024. }
  14025. .fab-buttons-left a + a {
  14026. margin-right: 16px;
  14027. }
  14028. .fab-buttons-right {
  14029. left: 100%;
  14030. margin-left: 16px;
  14031. }
  14032. .fab-buttons-right a {
  14033. transform: translate3d(-8px, 0, 0) scale(0.3);
  14034. transform-origin: left center;
  14035. }
  14036. .fab-buttons-right a + a {
  14037. margin-left: 16px;
  14038. }
  14039. .fab-buttons-center {
  14040. left: 0%;
  14041. top: 0%;
  14042. width: 100%;
  14043. height: 100%;
  14044. }
  14045. .fab-buttons-center a {
  14046. position: absolute;
  14047. }
  14048. .fab-buttons-center a:nth-child(1) {
  14049. left: 50%;
  14050. margin-left: calc(-1 * var(--f7-fab-button-size) / 2);
  14051. bottom: 100%;
  14052. margin-bottom: 16px;
  14053. transform: translateY(-8px) scale(0.3);
  14054. transform-origin: center bottom;
  14055. }
  14056. .fab-buttons-center a:nth-child(2) {
  14057. left: 100%;
  14058. margin-top: calc(-1 * var(--f7-fab-button-size) / 2);
  14059. top: 50%;
  14060. margin-left: 16px;
  14061. transform: translateX(-8px) scale(0.3);
  14062. transform-origin: left center;
  14063. }
  14064. .fab-buttons-center a:nth-child(3) {
  14065. left: 50%;
  14066. margin-left: calc(-1 * var(--f7-fab-button-size) / 2);
  14067. top: 100%;
  14068. margin-top: 16px;
  14069. transform: translateY(8px) scale(0.3);
  14070. transform-origin: center top;
  14071. }
  14072. .fab-buttons-center a:nth-child(4) {
  14073. right: 100%;
  14074. margin-top: calc(-1 * var(--f7-fab-button-size) / 2);
  14075. top: 50%;
  14076. margin-right: 16px;
  14077. transform: translateX(8px) scale(0.3);
  14078. transform-origin: right center;
  14079. }
  14080. .fab-morph {
  14081. border-radius: calc(var(--f7-fab-size) / 2);
  14082. background: var(--f7-fab-bg-color, var(--f7-theme-color));
  14083. box-shadow: var(--f7-fab-box-shadow);
  14084. }
  14085. .fab-morph > a {
  14086. box-shadow: none;
  14087. background: none !important;
  14088. }
  14089. .fab-opened.fab-morph > a i {
  14090. opacity: 0;
  14091. }
  14092. .fab-morph,
  14093. .fab-morph > a,
  14094. .fab-morph-target {
  14095. transition-duration: 250ms;
  14096. }
  14097. .fab-morph-target:not(.fab-morph-target-visible) {
  14098. display: none;
  14099. }
  14100. .fab-extended {
  14101. width: auto;
  14102. min-width: var(--f7-fab-extended-size);
  14103. }
  14104. .fab-extended > a {
  14105. width: 100%;
  14106. height: var(--f7-fab-extended-size);
  14107. }
  14108. .fab-extended > a i {
  14109. left: calc(var(--f7-fab-extended-size) / 2);
  14110. }
  14111. .fab-extended i ~ .fab-text {
  14112. padding-left: var(--f7-fab-extended-size);
  14113. }
  14114. .fab-extended > a {
  14115. width: 100% !important;
  14116. }
  14117. .fab-text {
  14118. box-sizing: border-box;
  14119. font-size: var(--f7-fab-extended-text-font-size);
  14120. padding: var(--f7-fab-extended-text-padding);
  14121. font-weight: var(--f7-fab-extended-text-font-weight);
  14122. letter-spacing: var(--f7-fab-extended-text-letter-spacing);
  14123. text-transform: uppercase;
  14124. }
  14125. .fab-label-button {
  14126. overflow: visible !important;
  14127. }
  14128. .fab-label {
  14129. position: absolute;
  14130. top: 50%;
  14131. padding: var(--f7-fab-label-padding);
  14132. border-radius: var(--f7-fab-label-border-radius);
  14133. background: var(--f7-fab-label-bg-color);
  14134. color: var(--f7-fab-label-text-color);
  14135. box-shadow: var(--f7-fab-label-box-shadow);
  14136. white-space: nowrap;
  14137. transform: translateY(-50%);
  14138. pointer-events: none;
  14139. font-size: var(--f7-fab-label-font-size);
  14140. }
  14141. .fab[class*="fab-right-"] .fab-label {
  14142. right: 100%;
  14143. margin-right: 8px;
  14144. }
  14145. .fab[class*="fab-left-"] .fab-label {
  14146. left: 100%;
  14147. margin-left: 8px;
  14148. }
  14149. .navbar ~ * .fab[class*="-top"],
  14150. .navbar ~ .fab[class*="-top"] {
  14151. margin-top: var(--f7-navbar-height);
  14152. }
  14153. .toolbar-top ~ * .fab[class*="-top"],
  14154. .toolbar-top ~ .fab[class*="-top"],
  14155. .ios .toolbar-top-ios ~ * .fab[class*="-top"],
  14156. .ios .toolbar-top-ios ~ .fab[class*="-top"],
  14157. .md .toolbar-top-md ~ * .fab[class*="-top"],
  14158. .md .toolbar-top-md ~ .fab[class*="-top"] {
  14159. margin-top: var(--f7-toolbar-height);
  14160. }
  14161. .toolbar-bottom ~ * .fab[class*="-bottom"],
  14162. .toolbar-bottom ~ .fab[class*="-bottom"],
  14163. .ios .toolbar-bottom-ios ~ * .fab[class*="-bottom"],
  14164. .ios .toolbar-bottom-ios ~ .fab[class*="-bottom"],
  14165. .md .toolbar-bottom-md ~ * .fab[class*="-bottom"],
  14166. .md .toolbar-bottom-md ~ .fab[class*="-bottom"] {
  14167. margin-bottom: var(--f7-toolbar-height);
  14168. }
  14169. .tabbar-labels.toolbar-bottom ~ * .fab[class*="-bottom"],
  14170. .tabbar-labels.toolbar-bottom ~ .fab[class*="-bottom"],
  14171. .ios .tabbar-labels.toolbar-bottom-ios ~ * .fab[class*="-bottom"],
  14172. .ios .tabbar-labels.toolbar-bottom-ios ~ .fab[class*="-bottom"],
  14173. .md .tabbar-labels.toolbar-bottom-md ~ * .fab[class*="-bottom"],
  14174. .md .tabbar-labels.toolbar-bottom-md ~ .fab[class*="-bottom"] {
  14175. margin-bottom: var(--f7-tabbar-labels-height);
  14176. }
  14177. .tabbar-labels.toolbar-top ~ * .fab[class*="-bottom"],
  14178. .tabbar-labels.toolbar-top ~ .fab[class*="-bottom"],
  14179. .ios .tabbar-labels.toolbar-top-ios ~ * .fab[class*="-bottom"],
  14180. .ios .tabbar-labels.toolbar-top-ios ~ .fab[class*="-bottom"],
  14181. .md .tabbar-labels.toolbar-top-md ~ * .fab[class*="-bottom"],
  14182. .md .tabbar-labels.toolbar-top-md ~ .fab[class*="-bottom"] {
  14183. margin-top: var(--f7-tabbar-labels-height);
  14184. }
  14185. .messagebar ~ * .fab[class*="-bottom"],
  14186. .messagebar ~ .fab[class*="-bottom"] {
  14187. margin-bottom: var(--f7-messagebar-height);
  14188. }
  14189. .navbar + .toolbar-top ~ * .fab[class*="-top"],
  14190. .ios .navbar + .toolbar-top-ios ~ * .fab[class*="-top"],
  14191. .md .navbar + .toolbar-top-ios ~ * .fab[class*="-top"],
  14192. .navbar + .toolbar-top ~ .fab[class*="-top"],
  14193. .ios .navbar + .toolbar-top-ios ~ .fab[class*="-top"],
  14194. .md .navbar + .toolbar-top-ios ~ .fab[class*="-top"] {
  14195. margin-top: calc(var(--f7-toolbar-height) + var(--f7-navbar-height));
  14196. }
  14197. .navbar + .toolbar-top.tabbar-labels ~ * .fab[class*="-top"],
  14198. .ios .navbar + .toolbar-top-ios.tabbar-labels ~ * .fab[class*="-top"],
  14199. .md .navbar + .toolbar-top-ios.tabbar-labels ~ * .fab[class*="-top"],
  14200. .navbar + .toolbar-top.tabbar-labels ~ .fab[class*="-top"],
  14201. .ios .navbar + .toolbar-top-ios.tabbar-labels ~ .fab[class*="-top"],
  14202. .md .navbar + .toolbar-top-ios.tabbar-labels ~ .fab[class*="-top"] {
  14203. margin-top: calc(var(--f7-tabbar-labels-height) + var(--f7-navbar-height));
  14204. }
  14205. .ios .fab > a.active-state,
  14206. .ios .fab-buttons a.active-state {
  14207. transition-duration: 0ms;
  14208. }
  14209. /* === Searchbar === */
  14210. :root {
  14211. /*
  14212. --f7-searchbar-link-color: var(--f7-bars-link-color);
  14213. */
  14214. --f7-searchbar-input-border-width: 0px;
  14215. --f7-searchbar-input-border-color: transparent;
  14216. --f7-searchbar-input-text-color: #000;
  14217. --f7-searchbar-placeholder-color: #939398;
  14218. }
  14219. :root .theme-dark,
  14220. :root.theme-dark {
  14221. --f7-searchbar-input-text-color: #fff;
  14222. }
  14223. .ios {
  14224. /*
  14225. --f7-searchbar-bg-image: var(--f7-bars-bg-image);
  14226. --f7-searchbar-bg-color: var(--f7-bars-bg-color);
  14227. --f7-searchbar-border-color: var(--f7-bars-border-color);
  14228. */
  14229. --f7-searchbar-height: 44px;
  14230. --f7-searchbar-inner-padding-left: 8px;
  14231. --f7-searchbar-inner-padding-right: 8px;
  14232. /*
  14233. --f7-searchbar-link-color: var(--f7-bars-link-color, var(--f7-theme-color));
  14234. */
  14235. --f7-searchbar-search-icon-color: #939398;
  14236. --f7-searchbar-input-font-size: 17px;
  14237. --f7-searchbar-input-bg-color: #e8e8ea;
  14238. --f7-searchbar-input-border-radius: 8px;
  14239. --f7-searchbar-input-height: 32px;
  14240. --f7-searchbar-input-padding-horizontal: 28px;
  14241. /*
  14242. --f7-searchbar-inline-input-font-size: var(--f7-searchbar-input-font-size);
  14243. --f7-searchbar-inline-input-height: var(--f7-searchbar-input-height);
  14244. --f7-searchbar-inline-input-padding-horizontal: var(--f7-searchbar-input-padding-horizontal);
  14245. --f7-searchbar-input-clear-button-color: var(--f7-input-clear-button-color);
  14246. */
  14247. --f7-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.4);
  14248. --f7-searchbar-shadow-image: none;
  14249. --f7-searchbar-in-page-content-margin: 0px;
  14250. --f7-searchbar-in-page-content-box-shadow: none;
  14251. --f7-searchbar-in-page-content-border-radius: 0;
  14252. --f7-searchbar-in-page-content-input-border-radius: 0;
  14253. }
  14254. .ios .theme-dark,
  14255. .ios.theme-dark {
  14256. --f7-searchbar-bg-color: #303030;
  14257. --f7-searchbar-input-bg-color: #171717;
  14258. }
  14259. .md {
  14260. --f7-searchbar-bg-color: #fff;
  14261. --f7-searchbar-border-color: transparent;
  14262. --f7-searchbar-height: 48px;
  14263. --f7-searchbar-inner-padding-left: 0px;
  14264. --f7-searchbar-inner-padding-right: 0px;
  14265. --f7-searchbar-link-color: #737373;
  14266. --f7-searchbar-search-icon-color: #737373;
  14267. --f7-searchbar-input-font-size: 20px;
  14268. --f7-searchbar-input-bg-color: #fff;
  14269. --f7-searchbar-input-border-radius: 0px;
  14270. --f7-searchbar-input-height: 100%;
  14271. --f7-searchbar-input-padding-horizontal: 48px;
  14272. /*
  14273. --f7-searchbar-inline-input-font-size: var(--f7-searchbar-input-font-size);
  14274. --f7-searchbar-inline-input-height: var(--f7-searchbar-input-height);
  14275. */
  14276. --f7-searchbar-inline-input-padding-horizontal: 24px;
  14277. --f7-searchbar-input-clear-button-color: #737373;
  14278. --f7-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.25);
  14279. --f7-searchbar-shadow-image: var(--f7-bars-shadow-bottom-image);
  14280. --f7-searchbar-in-page-content-margin: 8px;
  14281. --f7-searchbar-in-page-content-box-shadow: var(--f7-elevation-1);
  14282. --f7-searchbar-in-page-content-border-radius: 4px;
  14283. --f7-searchbar-in-page-content-input-border-radius: 4px;
  14284. }
  14285. .md .theme-dark,
  14286. .md.theme-dark {
  14287. --f7-searchbar-bg-color: #222222;
  14288. --f7-searchbar-input-bg-color: #222222;
  14289. }
  14290. .aurora {
  14291. /*
  14292. --f7-searchbar-bg-image: var(--f7-bars-bg-image);
  14293. --f7-searchbar-bg-color: var(--f7-bars-bg-color);
  14294. --f7-searchbar-border-color: var(--f7-bars-border-color);
  14295. */
  14296. --f7-searchbar-height: 38px;
  14297. --f7-searchbar-inner-padding-left: 8px;
  14298. --f7-searchbar-inner-padding-right: 8px;
  14299. /*
  14300. --f7-searchbar-link-color: var(--f7-bars-link-color, var(--f7-theme-color));
  14301. */
  14302. --f7-searchbar-search-icon-color: #939398;
  14303. --f7-searchbar-input-font-size: 13px;
  14304. --f7-searchbar-input-bg-color: #fff;
  14305. --f7-searchbar-input-border-radius: 4px;
  14306. --f7-searchbar-input-height: 24px;
  14307. --f7-searchbar-input-padding-horizontal: 24px;
  14308. /*
  14309. --f7-searchbar-inline-input-font-size: var(--f7-searchbar-input-font-size);
  14310. --f7-searchbar-inline-input-height: var(--f7-searchbar-input-height);
  14311. --f7-searchbar-inline-input-padding-horizontal: var(--f7-searchbar-input-padding-horizontal;
  14312. --f7-searchbar-input-clear-button-color: var(--f7-input-clear-button-color);
  14313. */
  14314. --f7-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.4);
  14315. --f7-searchbar-shadow-image: none;
  14316. --f7-searchbar-in-page-content-margin: 0px;
  14317. --f7-searchbar-in-page-content-box-shadow: none;
  14318. --f7-searchbar-in-page-content-border-radius: 0;
  14319. /*
  14320. --f7-searchbar-in-page-content-input-border-radius: var(--f7-searchbar-input-border-radius);
  14321. */
  14322. }
  14323. .aurora .theme-dark,
  14324. .aurora.theme-dark {
  14325. --f7-searchbar-input-bg-color: #333;
  14326. }
  14327. .searchbar {
  14328. width: 100%;
  14329. position: relative;
  14330. z-index: 200;
  14331. height: var(--f7-searchbar-height);
  14332. background-image: var(--f7-searchbar-bg-image, var(--f7-bars-bg-image));
  14333. background-color: var(--f7-searchbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
  14334. }
  14335. .searchbar.no-hairline:after,
  14336. .searchbar.no-border:after {
  14337. display: none !important;
  14338. }
  14339. .searchbar.no-shadow:before {
  14340. display: none !important;
  14341. }
  14342. .searchbar:after {
  14343. content: '';
  14344. position: absolute;
  14345. background-color: var(--f7-searchbar-border-color, var(--f7-bars-border-color));
  14346. display: block;
  14347. z-index: 15;
  14348. top: auto;
  14349. right: auto;
  14350. bottom: 0;
  14351. left: 0;
  14352. height: 1px;
  14353. width: 100%;
  14354. transform-origin: 50% 100%;
  14355. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  14356. }
  14357. .page > .searchbar:not(.searchbar-inline) {
  14358. z-index: 510;
  14359. }
  14360. .page > .searchbar:not(.searchbar-inline):before {
  14361. content: '';
  14362. position: absolute;
  14363. right: 0;
  14364. width: 100%;
  14365. top: 100%;
  14366. bottom: auto;
  14367. height: 8px;
  14368. pointer-events: none;
  14369. background: var(--f7-searchbar-shadow-image);
  14370. }
  14371. .searchbar input[type="text"],
  14372. .searchbar input[type="search"] {
  14373. box-sizing: border-box;
  14374. width: 100%;
  14375. height: 100%;
  14376. display: block;
  14377. border: var(--f7-searchbar-input-border-width) solid var(--f7-searchbar-input-border-color);
  14378. -webkit-appearance: none;
  14379. -moz-appearance: none;
  14380. appearance: none;
  14381. font-family: inherit;
  14382. font-weight: normal;
  14383. color: var(--f7-searchbar-input-text-color);
  14384. font-size: var(--f7-searchbar-input-font-size);
  14385. background-color: var(--f7-searchbar-input-bg-color);
  14386. border-radius: var(--f7-searchbar-input-border-radius);
  14387. position: relative;
  14388. padding: 0;
  14389. padding-left: calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-left, 0px));
  14390. padding-right: calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-right, 0px));
  14391. }
  14392. .searchbar input[type="text"]::-webkit-input-placeholder,
  14393. .searchbar input[type="search"]::-webkit-input-placeholder {
  14394. color: var(--f7-searchbar-placeholder-color);
  14395. opacity: 1;
  14396. }
  14397. .searchbar input[type="text"]::-moz-placeholder,
  14398. .searchbar input[type="search"]::-moz-placeholder {
  14399. color: var(--f7-searchbar-placeholder-color);
  14400. opacity: 1;
  14401. }
  14402. .searchbar input[type="text"]::-ms-input-placeholder,
  14403. .searchbar input[type="search"]::-ms-input-placeholder {
  14404. color: var(--f7-searchbar-placeholder-color);
  14405. opacity: 1;
  14406. }
  14407. .searchbar input[type="text"]::placeholder,
  14408. .searchbar input[type="search"]::placeholder {
  14409. color: var(--f7-searchbar-placeholder-color);
  14410. opacity: 1;
  14411. }
  14412. .searchbar input::-webkit-search-cancel-button {
  14413. -webkit-appearance: none;
  14414. appearance: none;
  14415. }
  14416. .searchbar .searchbar-input-wrap {
  14417. flex-shrink: 1;
  14418. width: 100%;
  14419. height: var(--f7-searchbar-input-height);
  14420. position: relative;
  14421. }
  14422. .searchbar a {
  14423. color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
  14424. }
  14425. .page > .searchbar:not(.searchbar-inline) {
  14426. position: absolute;
  14427. left: 0;
  14428. top: 0;
  14429. }
  14430. .page-content .searchbar:not(.searchbar-inline) {
  14431. border-radius: var(--f7-searchbar-in-page-content-border-radius);
  14432. margin: var(--f7-searchbar-in-page-content-margin);
  14433. width: auto;
  14434. box-shadow: var(--f7-searchbar-in-page-content-box-shadow);
  14435. }
  14436. .page-content .searchbar:not(.searchbar-inline) .searchbar-inner,
  14437. .page-content .searchbar:not(.searchbar-inline) input[type="text"],
  14438. .page-content .searchbar:not(.searchbar-inline) input[type="search"] {
  14439. border-radius: var(--f7-searchbar-in-page-content-input-border-radius, var(--f7-searchbar-input-border-radius));
  14440. }
  14441. .searchbar .input-clear-button {
  14442. color: var(--f7-searchbar-input-clear-button-color, var(--f7-input-clear-button-color));
  14443. }
  14444. .searchbar-expandable {
  14445. position: absolute;
  14446. transition-duration: 300ms;
  14447. pointer-events: none;
  14448. }
  14449. .navbar-inner-large .searchbar-expandable:after {
  14450. display: none !important;
  14451. }
  14452. .navbar .searchbar.searchbar-expandable {
  14453. --f7-searchbar-expandable-size: var(--f7-navbar-height);
  14454. }
  14455. .toolbar .searchbar.searchbar-expandable {
  14456. --f7-searchbar-expandable-size: var(--f7-toolbar-height);
  14457. }
  14458. .subnavbar .searchbar.searchbar-expandable {
  14459. --f7-searchbar-expandable-size: var(--f7-subnavbar-height);
  14460. }
  14461. .tabbar-labels .searchbar.searchbar-expandable {
  14462. --f7-searchbar-expandable-size: var(--f7-tabbar-labels-height);
  14463. }
  14464. .searchbar-inner {
  14465. position: absolute;
  14466. left: 0;
  14467. top: 0;
  14468. width: 100%;
  14469. height: 100%;
  14470. display: flex;
  14471. align-items: center;
  14472. box-sizing: border-box;
  14473. 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));
  14474. }
  14475. .searchbar-disable-button {
  14476. cursor: pointer;
  14477. pointer-events: none;
  14478. -webkit-appearance: none;
  14479. -moz-appearance: none;
  14480. appearance: none;
  14481. background: none;
  14482. border: none;
  14483. outline: 0;
  14484. padding: 0;
  14485. margin: 0;
  14486. width: auto;
  14487. opacity: 0;
  14488. }
  14489. .searchbar-icon {
  14490. pointer-events: none;
  14491. background-position: center;
  14492. background-repeat: no-repeat;
  14493. }
  14494. .searchbar-icon:after {
  14495. color: var(--f7-searchbar-search-icon-color);
  14496. font-family: 'framework7-core-icons';
  14497. font-weight: normal;
  14498. font-style: normal;
  14499. line-height: 1;
  14500. letter-spacing: normal;
  14501. text-transform: none;
  14502. white-space: nowrap;
  14503. word-wrap: normal;
  14504. direction: ltr;
  14505. -webkit-font-smoothing: antialiased;
  14506. text-rendering: optimizeLegibility;
  14507. -moz-osx-font-smoothing: grayscale;
  14508. -moz-font-feature-settings: "liga";
  14509. font-feature-settings: "liga";
  14510. text-align: center;
  14511. display: block;
  14512. width: 100%;
  14513. height: 100%;
  14514. font-size: 20px;
  14515. }
  14516. .searchbar-backdrop {
  14517. position: absolute;
  14518. left: 0;
  14519. top: 0;
  14520. width: 100%;
  14521. height: 100%;
  14522. z-index: 100;
  14523. opacity: 0;
  14524. pointer-events: none;
  14525. transition-duration: 300ms;
  14526. transform: translate3d(0, 0, 0);
  14527. background: var(--f7-searchbar-backdrop-bg-color);
  14528. }
  14529. .searchbar-backdrop.searchbar-backdrop-in {
  14530. opacity: 1;
  14531. pointer-events: auto;
  14532. }
  14533. .page-content > .searchbar-backdrop {
  14534. position: fixed;
  14535. }
  14536. .searchbar-not-found {
  14537. display: none;
  14538. }
  14539. .hidden-by-searchbar,
  14540. .list .hidden-by-searchbar,
  14541. .list.li.hidden-by-searchbar,
  14542. .list li.hidden-by-searchbar {
  14543. display: none !important;
  14544. }
  14545. .navbar.with-searchbar-expandable-enabled,
  14546. .navbar-inner.with-searchbar-expandable-enabled {
  14547. --f7-navbar-large-collapse-progress: 1;
  14548. }
  14549. .navbar.with-searchbar-expandable-enabled .title-large,
  14550. .navbar-inner.with-searchbar-expandable-enabled .title-large,
  14551. .navbar.with-searchbar-expandable-enabled .title-large-text,
  14552. .navbar-inner.with-searchbar-expandable-enabled .title-large-text,
  14553. .navbar.with-searchbar-expandable-enabled .title-large-inner,
  14554. .navbar-inner.with-searchbar-expandable-enabled .title-large-inner {
  14555. transition-duration: 300ms;
  14556. }
  14557. .page-content.with-searchbar-expandable-enabled {
  14558. height: calc(100% + var(--f7-navbar-large-title-height));
  14559. transform: translateY(calc(-1 * var(--f7-navbar-large-title-height)));
  14560. transition-duration: 300ms;
  14561. transition-property: transform;
  14562. }
  14563. .navbar ~ .page:not(.no-navbar) > .searchbar,
  14564. .page > .navbar ~ .searchbar {
  14565. top: var(--f7-navbar-height);
  14566. }
  14567. .navbar ~ .page-with-navbar-large:not(.no-navbar) .searchbar,
  14568. .page-with-navbar-large .navbar ~ .searchbar,
  14569. .page-with-navbar-large .navbar ~ * .searchbar {
  14570. top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height));
  14571. transform: translate3d(0, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
  14572. }
  14573. .searchbar ~ * {
  14574. --f7-page-searchbar-offset: var(--f7-searchbar-height);
  14575. }
  14576. .page > .toolbar-top ~ .searchbar,
  14577. .ios .page > .toolbar-top-ios ~ .searchbar,
  14578. .md .page > .toolbar-top-md ~ .searchbar,
  14579. .aurora .page > .toolbar-top-aurora ~ .searchbar {
  14580. top: var(--f7-toolbar-height);
  14581. }
  14582. .page > .tabbar-labels.toolbar-top ~ .searchbar,
  14583. .ios .page > .tabbar-labels.toolbar-top-ios ~ .searchbar,
  14584. .md .page > .tabbar-labels.toolbar-top-md ~ .searchbar,
  14585. .aurora .page > .tabbar-labels.toolbar-top-aurora ~ .searchbar {
  14586. top: var(--f7-tabbar-labels-height);
  14587. }
  14588. .page > .navbar ~ .toolbar-top ~ .searchbar,
  14589. .ios .page > .navbar ~ .toolbar-top-ios ~ .searchbar,
  14590. .md .page > .navbar ~ .toolbar-top-md ~ .searchbar,
  14591. .aurora .page > .navbar ~ .toolbar-top-aurora ~ .searchbar {
  14592. top: calc(var(--f7-navbar-height) + var(--f7-toolbar-height));
  14593. }
  14594. .page > .navbar ~ .tabbar-labels.toolbar-top ~ .searchbar,
  14595. .ios .page > .navbar ~ .tabbar-labels.toolbar-top-ios ~ .searchbar,
  14596. .md .page > .navbar ~ .tabbar-labels.toolbar-top-md ~ .searchbar,
  14597. .aurora .page > .navbar ~ .tabbar-labels.toolbar-top-aurora ~ .searchbar {
  14598. top: calc(var(--f7-navbar-height) + var(--f7-tabbar-labels-height));
  14599. }
  14600. .searchbar.searchbar-inline {
  14601. width: auto;
  14602. height: auto;
  14603. background-color: transparent;
  14604. background-image: none;
  14605. }
  14606. .searchbar.searchbar-inline:after,
  14607. .searchbar.searchbar-inline:before {
  14608. display: none !important;
  14609. }
  14610. .searchbar.searchbar-inline .searchbar-input-wrap {
  14611. height: var(--f7-searchbar-inline-input-height, var(--f7-searchbar-input-height));
  14612. }
  14613. .searchbar.searchbar-inline .searchbar-inner {
  14614. padding: 0;
  14615. position: static;
  14616. width: auto;
  14617. height: auto;
  14618. }
  14619. .searchbar.searchbar-inline input[type="text"],
  14620. .searchbar.searchbar-inline input[type="search"] {
  14621. font-size: var(--f7-searchbar-inline-input-font-size, var(--f7-searchbar-input-font-size));
  14622. padding-left: calc(var(--f7-searchbar-inline-input-padding-horizontal, var(--f7-searchbar-input-padding-horizontal)) + var(--f7-searchbar-input-extra-padding-left, 0px));
  14623. padding-right: calc(var(--f7-searchbar-inline-input-padding-horizontal, var(--f7-searchbar-input-padding-horizontal)) + var(--f7-searchbar-input-extra-padding-right, 0px));
  14624. }
  14625. .ios .searchbar input[type="search"],
  14626. .ios .searchbar input[type="text"] {
  14627. z-index: 30;
  14628. }
  14629. .ios .searchbar .input-clear-button {
  14630. z-index: 40;
  14631. right: 7px;
  14632. }
  14633. .ios .searchbar-icon {
  14634. width: 13px;
  14635. height: 13px;
  14636. position: absolute;
  14637. top: 50%;
  14638. margin-top: -6px;
  14639. z-index: 40;
  14640. left: 8px;
  14641. }
  14642. .ios .searchbar-icon:after {
  14643. content: 'search_ios';
  14644. line-height: 13px;
  14645. }
  14646. .ios .searchbar-disable-button {
  14647. font-size: 17px;
  14648. flex-shrink: 0;
  14649. transform: translate3d(0, 0, 0);
  14650. transition-duration: 300ms;
  14651. color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
  14652. display: none;
  14653. }
  14654. .ios .searchbar-disable-button.active-state {
  14655. transition-duration: 0ms;
  14656. opacity: 0.3 !important;
  14657. }
  14658. .ios .searchbar-enabled .searchbar-disable-button {
  14659. pointer-events: auto;
  14660. opacity: 1;
  14661. margin-left: 8px;
  14662. }
  14663. .ios .searchbar:not(.searchbar-enabled) .searchbar-disable-button {
  14664. transition-duration: 300ms !important;
  14665. }
  14666. .ios .searchbar-expandable {
  14667. --f7-searchbar-expandable-size: var(--f7-searchbar-height);
  14668. left: 0;
  14669. bottom: 0;
  14670. opacity: 1;
  14671. width: 100%;
  14672. height: 0%;
  14673. transform: translate3d(0, 0, 0);
  14674. overflow: hidden;
  14675. }
  14676. .ios .searchbar-expandable .searchbar-disable-button {
  14677. margin-left: 8px;
  14678. opacity: 1;
  14679. display: block;
  14680. }
  14681. .ios .searchbar-expandable .searchbar-inner {
  14682. height: var(--f7-searchbar-expandable-size);
  14683. }
  14684. .ios .navbar-inner.with-searchbar-expandable-enabled .left,
  14685. .ios .navbar-inner.with-searchbar-expandable-enabled .title,
  14686. .ios .navbar-inner.with-searchbar-expandable-enabled .right {
  14687. transform: translateY(calc(-1 * var(--f7-navbar-height)));
  14688. transition: 300ms;
  14689. opacity: 0;
  14690. }
  14691. .ios .searchbar-expandable.searchbar-enabled {
  14692. opacity: 1;
  14693. height: var(--f7-searchbar-expandable-size);
  14694. pointer-events: auto;
  14695. }
  14696. .md .searchbar-icon,
  14697. .md .searchbar-disable-button {
  14698. position: absolute;
  14699. left: calc(-4px + var(--f7-safe-area-left));
  14700. top: 50%;
  14701. transition-duration: 300ms;
  14702. }
  14703. .md .searchbar-icon {
  14704. width: 24px;
  14705. height: 24px;
  14706. margin-left: 12px;
  14707. margin-top: -12px;
  14708. }
  14709. .md .searchbar-icon:after {
  14710. content: 'search_md';
  14711. line-height: 1.2;
  14712. }
  14713. .md .searchbar-disable-button {
  14714. width: 48px;
  14715. height: 48px;
  14716. transform: rotate(-90deg) scale(0.5);
  14717. font-size: 0 !important;
  14718. display: block;
  14719. margin-top: -24px;
  14720. color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
  14721. }
  14722. .md .searchbar-disable-button:before {
  14723. content: '';
  14724. width: 152%;
  14725. height: 152%;
  14726. position: absolute;
  14727. left: -26%;
  14728. top: -26%;
  14729. background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
  14730. background-repeat: no-repeat;
  14731. background-position: center;
  14732. background-size: 100% 100%;
  14733. opacity: 0;
  14734. pointer-events: none;
  14735. transition-duration: 600ms;
  14736. }
  14737. .md .searchbar-disable-button.active-state:before {
  14738. opacity: 1;
  14739. transition-duration: 150ms;
  14740. }
  14741. .md .searchbar-disable-button:after {
  14742. font-family: 'framework7-core-icons';
  14743. font-weight: normal;
  14744. font-style: normal;
  14745. line-height: 1;
  14746. letter-spacing: normal;
  14747. text-transform: none;
  14748. white-space: nowrap;
  14749. word-wrap: normal;
  14750. direction: ltr;
  14751. -webkit-font-smoothing: antialiased;
  14752. text-rendering: optimizeLegibility;
  14753. -moz-osx-font-smoothing: grayscale;
  14754. -moz-font-feature-settings: "liga";
  14755. font-feature-settings: "liga";
  14756. text-align: center;
  14757. display: block;
  14758. width: 100%;
  14759. height: 100%;
  14760. font-size: 20px;
  14761. line-height: 48px;
  14762. content: "arrow_left_md";
  14763. }
  14764. .md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-disable-button {
  14765. transform: rotate(0deg) scale(1);
  14766. pointer-events: auto;
  14767. opacity: 1;
  14768. }
  14769. .md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-icon {
  14770. opacity: 0;
  14771. transform: rotate(90deg) scale(0.5);
  14772. }
  14773. .md .searchbar {
  14774. --f7-searchbar-input-extra-padding-left: 17px;
  14775. }
  14776. .md .searchbar .input-clear-button {
  14777. width: 48px;
  14778. height: 48px;
  14779. margin-top: -24px;
  14780. right: 0;
  14781. }
  14782. .md .searchbar .input-clear-button:before {
  14783. content: '';
  14784. width: 152%;
  14785. height: 152%;
  14786. position: absolute;
  14787. left: -26%;
  14788. top: -26%;
  14789. background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
  14790. background-repeat: no-repeat;
  14791. background-position: center;
  14792. background-size: 100% 100%;
  14793. opacity: 0;
  14794. pointer-events: none;
  14795. transition-duration: 600ms;
  14796. }
  14797. .md .searchbar .input-clear-button.active-state:before {
  14798. opacity: 1;
  14799. transition-duration: 150ms;
  14800. }
  14801. .md .searchbar .input-clear-button:after {
  14802. line-height: 48px;
  14803. content: 'delete_md';
  14804. opacity: 1;
  14805. }
  14806. .md .searchbar .input-clear-button:before {
  14807. margin-left: 0;
  14808. margin-top: 0;
  14809. }
  14810. .md .page > .searchbar,
  14811. .md .subnavbar .searchbar,
  14812. .md .searchbar-expandable {
  14813. --f7-searchbar-input-extra-padding-left: calc(17px + 8px);
  14814. }
  14815. .md .page > .searchbar .searchbar-icon,
  14816. .md .subnavbar .searchbar .searchbar-icon,
  14817. .md .searchbar-expandable .searchbar-icon,
  14818. .md .page > .searchbar .searchbar-disable-button,
  14819. .md .subnavbar .searchbar .searchbar-disable-button,
  14820. .md .searchbar-expandable .searchbar-disable-button {
  14821. left: calc(-4px + 8px + var(--f7-safe-area-left));
  14822. }
  14823. .md .searchbar-expandable {
  14824. --f7-searchbar-expandable-size: var(--f7-searchbar-height);
  14825. height: 100%;
  14826. opacity: 0;
  14827. top: 50%;
  14828. border-radius: calc(var(--f7-searchbar-expandable-size));
  14829. width: calc(var(--f7-searchbar-expandable-size));
  14830. margin-top: calc(var(--f7-searchbar-expandable-size) * -1 / 2);
  14831. transform: translate3d(0px, 0px, 0px);
  14832. left: 100%;
  14833. margin-left: calc(var(--f7-searchbar-expandable-size) * -1);
  14834. }
  14835. .md .searchbar-expandable.searchbar-enabled {
  14836. width: 100%;
  14837. border-radius: 0;
  14838. opacity: 1;
  14839. pointer-events: auto;
  14840. top: 0;
  14841. margin-top: 0;
  14842. left: 0;
  14843. margin-left: 0;
  14844. }
  14845. .aurora .searchbar input[type="search"],
  14846. .aurora .searchbar input[type="text"] {
  14847. z-index: 30;
  14848. }
  14849. .aurora .searchbar .input-clear-button {
  14850. z-index: 40;
  14851. right: 4px;
  14852. }
  14853. .aurora .searchbar-icon {
  14854. width: 13px;
  14855. height: 13px;
  14856. position: absolute;
  14857. top: 50%;
  14858. margin-top: -6px;
  14859. z-index: 40;
  14860. left: 6px;
  14861. }
  14862. .aurora .searchbar-icon:after {
  14863. content: 'search_aurora';
  14864. line-height: 13px;
  14865. }
  14866. .aurora .searchbar-disable-button {
  14867. font-size: 14px;
  14868. flex-shrink: 0;
  14869. transform: translate3d(0, 0, 0);
  14870. transition-duration: 300ms;
  14871. color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
  14872. display: none;
  14873. }
  14874. .aurora .searchbar-disable-button.active-state {
  14875. transition-duration: 0ms;
  14876. opacity: 0.3 !important;
  14877. }
  14878. .aurora .searchbar-enabled .searchbar-disable-button {
  14879. pointer-events: auto;
  14880. opacity: 1;
  14881. margin-left: 8px;
  14882. }
  14883. .aurora .searchbar:not(.searchbar-enabled) .searchbar-disable-button {
  14884. transition-duration: 300ms !important;
  14885. }
  14886. .aurora .searchbar-expandable {
  14887. --f7-searchbar-expandable-size: var(--f7-searchbar-height);
  14888. left: 0;
  14889. top: 0;
  14890. opacity: 0;
  14891. width: 100%;
  14892. transform: translate3d(0, 0%, 0);
  14893. overflow: hidden;
  14894. }
  14895. .aurora .searchbar-expandable .searchbar-disable-button {
  14896. margin-left: 8px;
  14897. opacity: 1;
  14898. display: block;
  14899. }
  14900. .aurora .searchbar-expandable .searchbar-inner {
  14901. height: var(--f7-searchbar-expandable-size);
  14902. }
  14903. .aurora .searchbar-expandable.searchbar-enabled {
  14904. opacity: 1;
  14905. pointer-events: auto;
  14906. }
  14907. /* === Messages === */
  14908. :root {
  14909. --f7-messages-content-bg-color: #fff;
  14910. --f7-message-text-header-text-color: inherit;
  14911. --f7-message-text-header-opacity: 0.65;
  14912. --f7-message-text-header-font-size: 12px;
  14913. --f7-message-text-footer-text-color: inherit;
  14914. --f7-message-text-footer-opacity: 0.65;
  14915. --f7-message-text-footer-font-size: 12px;
  14916. --f7-message-bubble-line-height: 1.2;
  14917. --f7-message-header-font-size: 12px;
  14918. --f7-message-footer-font-size: 11px;
  14919. --f7-message-name-font-size: 12px;
  14920. --f7-message-name-font-weight: inherit;
  14921. --f7-message-typing-indicator-bg-color: #000;
  14922. --f7-message-avatar-border-radius: 50%;
  14923. --f7-messages-title-font-weight: inherit;
  14924. /*
  14925. --f7-message-sent-bg-color: var(--f7-theme-color);
  14926. */
  14927. --f7-message-sent-text-color: #fff;
  14928. --f7-message-received-bg-color: #e5e5ea;
  14929. --f7-message-received-text-color: #000;
  14930. }
  14931. :root .theme-dark,
  14932. :root.theme-dark {
  14933. --f7-messages-content-bg-color: transparent;
  14934. --f7-message-received-bg-color: #333;
  14935. --f7-message-received-text-color: #fff;
  14936. --f7-message-typing-indicator-bg-color: #fff;
  14937. }
  14938. .ios {
  14939. --f7-messages-title-text-color: #8e8e93;
  14940. --f7-messages-title-font-size: 11px;
  14941. --f7-message-header-text-color: #8e8e93;
  14942. --f7-message-footer-text-color: #8e8e93;
  14943. --f7-message-name-text-color: #8e8e93;
  14944. --f7-message-avatar-size: 29px;
  14945. --f7-message-margin: 10px;
  14946. --f7-message-bubble-min-height: 32px;
  14947. --f7-message-bubble-font-size: 17px;
  14948. --f7-message-bubble-border-radius: 16px;
  14949. --f7-message-bubble-padding-vertical: 6px;
  14950. --f7-message-bubble-padding-horizontal: 16px;
  14951. --f7-message-typing-indicator-opacity: 0.35;
  14952. }
  14953. .md {
  14954. --f7-messages-title-text-color: rgba(0, 0, 0, 0.51);
  14955. --f7-messages-title-font-size: 12px;
  14956. --f7-message-header-text-color: rgba(0, 0, 0, 0.51);
  14957. --f7-message-footer-text-color: rgba(0, 0, 0, 0.51);
  14958. --f7-message-name-text-color: rgba(0, 0, 0, 0.51);
  14959. --f7-message-avatar-size: 32px;
  14960. --f7-message-margin: 16px;
  14961. --f7-message-bubble-min-height: 32px;
  14962. --f7-message-bubble-font-size: 16px;
  14963. --f7-message-bubble-border-radius: 4px;
  14964. --f7-message-bubble-padding-vertical: 6px;
  14965. --f7-message-bubble-padding-horizontal: 8px;
  14966. --f7-message-typing-indicator-opacity: 0.6;
  14967. }
  14968. .md .theme-dark,
  14969. .md.theme-dark {
  14970. --f7-messages-title-text-color: rgba(255, 255, 255, 0.54);
  14971. --f7-message-header-text-color: rgba(255, 255, 255, 0.54);
  14972. --f7-message-name-text-color: rgba(255, 255, 255, 0.54);
  14973. --f7-message-footer-text-color: rgba(255, 255, 255, 0.54);
  14974. }
  14975. .aurora {
  14976. --f7-messages-title-text-color: rgba(0, 0, 0, 0.51);
  14977. --f7-messages-title-font-size: 12px;
  14978. --f7-message-header-text-color: rgba(0, 0, 0, 0.51);
  14979. --f7-message-footer-text-color: rgba(0, 0, 0, 0.51);
  14980. --f7-message-name-text-color: rgba(0, 0, 0, 0.51);
  14981. --f7-message-avatar-size: 24px;
  14982. --f7-message-margin: 10px;
  14983. --f7-message-bubble-min-height: 28px;
  14984. --f7-message-bubble-font-size: 13px;
  14985. --f7-message-bubble-line-height: 1.4;
  14986. --f7-message-bubble-border-radius: 14px;
  14987. --f7-message-bubble-padding-vertical: 5px;
  14988. --f7-message-bubble-padding-horizontal: 10px;
  14989. --f7-message-typing-indicator-opacity: 0.5;
  14990. }
  14991. .aurora .theme-dark,
  14992. .aurora.theme-dark {
  14993. --f7-messages-title-text-color: rgba(255, 255, 255, 0.52);
  14994. --f7-message-header-text-color: rgba(255, 255, 255, 0.52);
  14995. --f7-message-name-text-color: rgba(255, 255, 255, 0.52);
  14996. --f7-message-footer-text-color: rgba(255, 255, 255, 0.52);
  14997. }
  14998. .messages-content,
  14999. .messages {
  15000. background: var(--f7-messages-content-bg-color);
  15001. }
  15002. .messages {
  15003. display: flex;
  15004. flex-direction: column;
  15005. min-height: 100%;
  15006. position: relative;
  15007. z-index: 1;
  15008. }
  15009. .messages-title,
  15010. .message {
  15011. margin-top: var(--f7-message-margin);
  15012. }
  15013. .messages-title:last-child,
  15014. .message:last-child {
  15015. margin-bottom: var(--f7-message-margin);
  15016. }
  15017. .messages-title {
  15018. text-align: center;
  15019. width: 100%;
  15020. line-height: 1;
  15021. color: var(--f7-messages-title-text-color);
  15022. font-size: var(--f7-messages-title-font-size);
  15023. font-weight: var(--f7-messages-title-font-weight);
  15024. }
  15025. .message {
  15026. max-width: 70%;
  15027. box-sizing: border-box;
  15028. display: flex;
  15029. align-items: flex-end;
  15030. position: relative;
  15031. z-index: 1;
  15032. transform: translate3d(0, 0, 0);
  15033. }
  15034. .message-avatar {
  15035. border-radius: var(--f7-message-avatar-border-radius);
  15036. position: relative;
  15037. background-size: cover;
  15038. align-self: flex-end;
  15039. flex-shrink: 0;
  15040. width: var(--f7-message-avatar-size);
  15041. height: var(--f7-message-avatar-size);
  15042. }
  15043. .message-content {
  15044. position: relative;
  15045. display: flex;
  15046. flex-direction: column;
  15047. }
  15048. .message-header,
  15049. .message-footer,
  15050. .message-name {
  15051. line-height: 1;
  15052. }
  15053. .message-header {
  15054. color: var(--f7-message-header-text-color);
  15055. font-size: var(--f7-message-header-font-size);
  15056. }
  15057. .message-footer {
  15058. color: var(--f7-message-footer-text-color);
  15059. font-size: var(--f7-message-footer-font-size);
  15060. margin-bottom: -1em;
  15061. }
  15062. .message-name {
  15063. color: var(--f7-message-name-text-color);
  15064. font-size: var(--f7-message-name-font-size);
  15065. font-weight: var(--f7-message-name-font-weight);
  15066. }
  15067. .message-bubble {
  15068. box-sizing: border-box;
  15069. word-break: break-word;
  15070. display: flex;
  15071. flex-direction: column;
  15072. position: relative;
  15073. line-height: var(--f7-message-bubble-line-height);
  15074. font-size: var(--f7-message-bubble-font-size);
  15075. border-radius: var(--f7-message-bubble-border-radius);
  15076. padding: var(--f7-message-bubble-padding-vertical) var(--f7-message-bubble-padding-horizontal);
  15077. min-height: var(--f7-message-bubble-min-height);
  15078. }
  15079. .message-image img {
  15080. display: block;
  15081. max-width: 100%;
  15082. height: auto;
  15083. width: auto;
  15084. }
  15085. .message-text-header,
  15086. .message-text-footer {
  15087. line-height: 1;
  15088. }
  15089. .message-text-header {
  15090. color: var(--f7-message-text-header-text-color);
  15091. opacity: var(--f7-message-text-header-opacity);
  15092. font-size: var(--f7-message-text-header-font-size);
  15093. }
  15094. .message-text-footer {
  15095. color: var(--f7-message-text-footer-text-color);
  15096. opacity: var(--f7-message-text-footer-opacity);
  15097. font-size: var(--f7-message-text-footer-font-size);
  15098. }
  15099. .message-text {
  15100. text-align: left;
  15101. }
  15102. .message-sent {
  15103. text-align: right;
  15104. flex-direction: row-reverse;
  15105. align-self: flex-end;
  15106. }
  15107. .message-sent .message-bubble {
  15108. color: var(--f7-message-sent-text-color);
  15109. background: var(--f7-message-sent-bg-color, var(--f7-theme-color));
  15110. }
  15111. .message-sent .message-content {
  15112. align-items: flex-end;
  15113. }
  15114. .message-sent.message-tail .message-bubble {
  15115. border-radius: var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0 var(--f7-message-bubble-border-radius);
  15116. }
  15117. .message-received {
  15118. flex-direction: row;
  15119. }
  15120. .message-received .message-bubble {
  15121. color: var(--f7-message-received-text-color);
  15122. background: var(--f7-message-received-bg-color);
  15123. }
  15124. .message-received .message-content {
  15125. align-items: flex-start;
  15126. }
  15127. .message-received.message-tail .message-bubble {
  15128. border-radius: var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0;
  15129. }
  15130. .message:not(.message-last) .message-avatar {
  15131. opacity: 0;
  15132. }
  15133. .message:not(.message-first) .message-name {
  15134. display: none;
  15135. }
  15136. .message.message-same-name .message-name {
  15137. display: none;
  15138. }
  15139. .message.message-same-header .message-header {
  15140. display: none;
  15141. }
  15142. .message.message-same-footer .message-footer {
  15143. display: none;
  15144. }
  15145. .message-appear-from-bottom {
  15146. animation: message-appear-from-bottom 300ms;
  15147. }
  15148. .message-appear-from-top {
  15149. animation: message-appear-from-top 300ms;
  15150. }
  15151. .message-typing-indicator {
  15152. display: inline-block;
  15153. font-size: 0;
  15154. vertical-align: middle;
  15155. }
  15156. .message-typing-indicator > div {
  15157. display: inline-block;
  15158. position: relative;
  15159. background: var(--f7-message-typing-indicator-bg-color);
  15160. opacity: var(--f7-message-typing-indicator-opacity);
  15161. vertical-align: middle;
  15162. border-radius: 50%;
  15163. }
  15164. @keyframes message-appear-from-bottom {
  15165. from {
  15166. transform: translate3d(0, 100%, 0);
  15167. }
  15168. to {
  15169. transform: translate3d(0, 0, 0);
  15170. }
  15171. }
  15172. @keyframes message-appear-from-top {
  15173. from {
  15174. transform: translate3d(0, -100%, 0);
  15175. }
  15176. to {
  15177. transform: translate3d(0, 0, 0);
  15178. }
  15179. }
  15180. .ios .messages-title b,
  15181. .ios .message-header b,
  15182. .ios .message-footer b,
  15183. .ios .message-name b {
  15184. font-weight: 600;
  15185. }
  15186. .ios .message-header,
  15187. .ios .message-name {
  15188. margin-bottom: 3px;
  15189. }
  15190. .ios .message-footer {
  15191. margin-top: 3px;
  15192. }
  15193. .ios .message-bubble {
  15194. min-width: 48px;
  15195. }
  15196. .ios .message-image {
  15197. margin: var(--f7-message-bubble-padding-vertical) calc(-1 * var(--f7-message-bubble-padding-horizontal));
  15198. }
  15199. .ios .message-image:first-child {
  15200. margin-top: calc(-1 * var(--f7-message-bubble-padding-vertical));
  15201. }
  15202. .ios .message-image:first-child img {
  15203. border-top-left-radius: var(--f7-message-bubble-border-radius);
  15204. border-top-right-radius: var(--f7-message-bubble-border-radius);
  15205. }
  15206. .ios .message-image:last-child {
  15207. margin-bottom: calc(-1 * var(--f7-message-bubble-padding-vertical));
  15208. }
  15209. .ios .message-image:last-child img {
  15210. border-bottom-left-radius: var(--f7-message-bubble-border-radius);
  15211. border-bottom-right-radius: var(--f7-message-bubble-border-radius);
  15212. }
  15213. .ios .message-text-header {
  15214. margin-bottom: 3px;
  15215. }
  15216. .ios .message-text-footer {
  15217. margin-top: 3px;
  15218. }
  15219. .ios .message-received {
  15220. margin-left: calc(10px + var(--f7-safe-area-left));
  15221. }
  15222. .ios .message-received .message-header,
  15223. .ios .message-received .message-footer,
  15224. .ios .message-received .message-name {
  15225. margin-left: var(--f7-message-bubble-padding-horizontal);
  15226. }
  15227. .ios .message-received .message-bubble {
  15228. padding-left: calc(var(--f7-message-bubble-padding-horizontal) + 6px);
  15229. -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%;
  15230. }
  15231. .ios .message-received .message-image {
  15232. margin-left: calc(-1 * (var(--f7-message-bubble-padding-horizontal) + 6px));
  15233. }
  15234. .ios .message-received.message-tail:not(.message-typing) .message-bubble {
  15235. -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%;
  15236. }
  15237. .ios .message-received.message-tail:not(.message-typing) .message-bubble .message-image:last-child img {
  15238. border-bottom-left-radius: 0px;
  15239. }
  15240. .ios .message-sent {
  15241. margin-right: calc(10px + var(--f7-safe-area-right));
  15242. }
  15243. .ios .message-sent .message-header,
  15244. .ios .message-sent .message-footer,
  15245. .ios .message-sent .message-name {
  15246. margin-right: var(--f7-message-bubble-padding-horizontal);
  15247. }
  15248. .ios .message-sent .message-bubble {
  15249. padding-right: calc(var(--f7-message-bubble-padding-horizontal) + 6px);
  15250. -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%;
  15251. }
  15252. .ios .message-sent .message-image {
  15253. margin-right: calc(-1 * (var(--f7-message-bubble-padding-horizontal) + 6px));
  15254. }
  15255. .ios .message-sent.message-tail .message-bubble {
  15256. -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%;
  15257. }
  15258. .ios .message-sent.message-tail .message-bubble .message-image:last-child img {
  15259. border-bottom-right-radius: 0px;
  15260. }
  15261. .ios .message + .message:not(.message-first) {
  15262. margin-top: 1px;
  15263. }
  15264. .ios .message-received.message-typing .message-content:after,
  15265. .ios .message-received.message-typing .message-content:before {
  15266. content: '';
  15267. position: absolute;
  15268. background: var(--f7-message-received-bg-color);
  15269. border-radius: 50%;
  15270. }
  15271. .ios .message-received.message-typing .message-content:after {
  15272. width: 11px;
  15273. height: 11px;
  15274. left: 4px;
  15275. bottom: 0px;
  15276. }
  15277. .ios .message-received.message-typing .message-content:before {
  15278. width: 6px;
  15279. height: 6px;
  15280. left: -1px;
  15281. bottom: -4px;
  15282. }
  15283. .ios .message-typing-indicator > div {
  15284. width: 9px;
  15285. height: 9px;
  15286. }
  15287. .ios .message-typing-indicator > div + div {
  15288. margin-left: 4px;
  15289. }
  15290. .ios .message-typing-indicator > div:nth-child(1) {
  15291. animation: ios-message-typing-indicator 900ms infinite;
  15292. }
  15293. .ios .message-typing-indicator > div:nth-child(2) {
  15294. animation: ios-message-typing-indicator 900ms 150ms infinite;
  15295. }
  15296. .ios .message-typing-indicator > div:nth-child(3) {
  15297. animation: ios-message-typing-indicator 900ms 300ms infinite;
  15298. }
  15299. @keyframes ios-message-typing-indicator {
  15300. 0% {
  15301. opacity: 0.35;
  15302. }
  15303. 25% {
  15304. opacity: 0.2;
  15305. }
  15306. 50% {
  15307. opacity: 0.2;
  15308. }
  15309. }
  15310. .md .messages-title b,
  15311. .md .message-header b,
  15312. .md .message-footer b,
  15313. .md .message-name b {
  15314. font-weight: 500;
  15315. }
  15316. .md .message-header,
  15317. .md .message-name {
  15318. margin-bottom: 2px;
  15319. }
  15320. .md .message-footer {
  15321. margin-top: 2px;
  15322. }
  15323. .md .message-text-header {
  15324. margin-bottom: 4px;
  15325. }
  15326. .md .message-text-footer {
  15327. margin-top: 4px;
  15328. }
  15329. .md .message-received.message-tail .message-bubble:before,
  15330. .md .message-sent.message-tail .message-bubble:before {
  15331. position: absolute;
  15332. content: '';
  15333. bottom: 0;
  15334. width: 0;
  15335. height: 0;
  15336. }
  15337. .md .message-received {
  15338. margin-left: calc(8px + var(--f7-safe-area-left));
  15339. }
  15340. .md .message-received .message-avatar + .message-content {
  15341. margin-left: var(--f7-message-bubble-padding-horizontal);
  15342. }
  15343. .md .message-received.message-tail .message-bubble:before {
  15344. border-left: 8px solid transparent;
  15345. border-right: 0 solid transparent;
  15346. border-bottom: 8px solid var(--f7-message-received-bg-color);
  15347. right: 100%;
  15348. }
  15349. .md .message-sent {
  15350. margin-right: calc(8px + var(--f7-safe-area-right));
  15351. }
  15352. .md .message-sent .message-avatar + .message-content {
  15353. margin-right: var(--f7-message-bubble-padding-horizontal);
  15354. }
  15355. .md .message-sent.message-tail .message-bubble:before {
  15356. border-left: 0 solid transparent;
  15357. border-right: 8px solid transparent;
  15358. border-bottom: 8px solid var(--f7-message-sent-bg-color, var(--f7-theme-color));
  15359. left: 100%;
  15360. }
  15361. .md .message + .message:not(.message-first) {
  15362. margin-top: 8px;
  15363. }
  15364. .md .message-typing-indicator > div {
  15365. width: 6px;
  15366. height: 6px;
  15367. }
  15368. .md .message-typing-indicator > div + div {
  15369. margin-left: 6px;
  15370. }
  15371. .md .message-typing-indicator > div:nth-child(1) {
  15372. animation: md-message-typing-indicator 900ms infinite;
  15373. }
  15374. .md .message-typing-indicator > div:nth-child(2) {
  15375. animation: md-message-typing-indicator 900ms 150ms infinite;
  15376. }
  15377. .md .message-typing-indicator > div:nth-child(3) {
  15378. animation: md-message-typing-indicator 900ms 300ms infinite;
  15379. }
  15380. @keyframes md-message-typing-indicator {
  15381. 0% {
  15382. transform: translateY(0%);
  15383. }
  15384. 25% {
  15385. transform: translateY(-5px);
  15386. }
  15387. 50% {
  15388. transform: translateY(0%);
  15389. }
  15390. }
  15391. .aurora .messages-title b,
  15392. .aurora .message-header b,
  15393. .aurora .message-footer b,
  15394. .aurora .message-name b {
  15395. font-weight: 500;
  15396. }
  15397. .aurora .message-header,
  15398. .aurora .message-name {
  15399. margin-bottom: 2px;
  15400. }
  15401. .aurora .message-footer {
  15402. margin-top: 2px;
  15403. }
  15404. .aurora .message-text-header {
  15405. margin-bottom: 2px;
  15406. }
  15407. .aurora .message-text-footer {
  15408. margin-top: 2px;
  15409. }
  15410. .aurora .message-received.message-tail .message-bubble:before,
  15411. .aurora .message-sent.message-tail .message-bubble:before {
  15412. position: absolute;
  15413. content: '';
  15414. bottom: 0;
  15415. width: 0;
  15416. height: 0;
  15417. }
  15418. .aurora .message-image {
  15419. margin: var(--f7-message-bubble-padding-vertical) calc(-1 * var(--f7-message-bubble-padding-horizontal) + 4px);
  15420. }
  15421. .aurora .message-image:first-child {
  15422. margin-top: calc(-1 * var(--f7-message-bubble-padding-vertical) + 4px);
  15423. }
  15424. .aurora .message-image:first-child img {
  15425. border-top-left-radius: var(--f7-message-bubble-border-radius);
  15426. border-top-right-radius: var(--f7-message-bubble-border-radius);
  15427. }
  15428. .aurora .message-image:last-child {
  15429. margin-bottom: calc(-1 * var(--f7-message-bubble-padding-vertical) + 4px);
  15430. }
  15431. .aurora .message-image:last-child img {
  15432. border-bottom-left-radius: var(--f7-message-bubble-border-radius);
  15433. border-bottom-right-radius: var(--f7-message-bubble-border-radius);
  15434. }
  15435. .aurora .message-received {
  15436. margin-left: calc(15px + var(--f7-safe-area-left));
  15437. }
  15438. .aurora .message-received .message-avatar + .message-content {
  15439. margin-left: 5px;
  15440. }
  15441. .aurora .message-received .message-header,
  15442. .aurora .message-received .message-footer,
  15443. .aurora .message-received .message-name {
  15444. margin-left: var(--f7-message-bubble-padding-horizontal);
  15445. }
  15446. .aurora .message-received.message-tail .message-bubble:before {
  15447. border-left: 6px solid transparent;
  15448. border-right: 0 solid transparent;
  15449. border-bottom: 6px solid var(--f7-message-received-bg-color);
  15450. right: 100%;
  15451. transform: translate(2px, 0px) rotate(-15deg);
  15452. transform-origin: right bottom;
  15453. }
  15454. .aurora .message-sent {
  15455. margin-right: calc(15px + var(--f7-safe-area-right));
  15456. }
  15457. .aurora .message-sent .message-avatar + .message-content {
  15458. margin-right: 5px;
  15459. }
  15460. .aurora .message-sent .message-header,
  15461. .aurora .message-sent .message-footer,
  15462. .aurora .message-sent .message-name {
  15463. margin-right: var(--f7-message-bubble-padding-horizontal);
  15464. }
  15465. .aurora .message-sent.message-tail .message-bubble:before {
  15466. border-left: 0 solid transparent;
  15467. border-right: 6px solid transparent;
  15468. border-bottom: 6px solid var(--f7-message-sent-bg-color, var(--f7-theme-color));
  15469. left: 100%;
  15470. transform: translate(-2px, 0px) rotate(15deg);
  15471. transform-origin: left bottom;
  15472. }
  15473. .aurora .message + .message:not(.message-first) {
  15474. margin-top: 5px;
  15475. }
  15476. .aurora .message-typing-indicator > div {
  15477. width: 6px;
  15478. height: 6px;
  15479. }
  15480. .aurora .message-typing-indicator > div + div {
  15481. margin-left: 4px;
  15482. }
  15483. .aurora .message-typing-indicator > div:nth-child(1) {
  15484. animation: aurora-message-typing-indicator 900ms infinite;
  15485. }
  15486. .aurora .message-typing-indicator > div:nth-child(2) {
  15487. animation: aurora-message-typing-indicator 900ms 150ms infinite;
  15488. }
  15489. .aurora .message-typing-indicator > div:nth-child(3) {
  15490. animation: aurora-message-typing-indicator 900ms 300ms infinite;
  15491. }
  15492. @keyframes aurora-message-typing-indicator {
  15493. 0% {
  15494. transform: translateY(0%);
  15495. }
  15496. 50% {
  15497. transform: translateY(-5px);
  15498. }
  15499. 100% {
  15500. transform: translateY(0%);
  15501. }
  15502. }
  15503. /* === Messagebar === */
  15504. :root {
  15505. --f7-messagebar-bg-color: #fff;
  15506. --f7-messagebar-shadow-image: none;
  15507. --f7-messagebar-textarea-bg-color: transparent;
  15508. --f7-messagebar-attachments-height: 155px;
  15509. --f7-messagebar-attachment-height: 155px;
  15510. --f7-messagebar-attachment-landscape-height: 120px;
  15511. --f7-messagebar-sheet-height: 252px;
  15512. --f7-messagebar-sheet-landscape-height: 192px;
  15513. /*
  15514. --f7-messagebar-inner-padding-left: var(--f7-toolbar-inner-padding-left);
  15515. --f7-messagebar-inner-padding-right: var(--f7-toolbar-inner-padding-right);
  15516. */
  15517. }
  15518. :root .theme-dark,
  15519. :root.theme-dark {
  15520. --f7-messagebar-bg-color: var(--f7-bars-bg-color);
  15521. }
  15522. .ios {
  15523. --f7-messagebar-height: 44px;
  15524. --f7-messagebar-font-size: 17px;
  15525. /*
  15526. --f7-messagebar-link-color: var(--f7-theme-color);
  15527. */
  15528. --f7-messagebar-border-color: transparent;
  15529. --f7-messagebar-textarea-border-radius: 17px;
  15530. --f7-messagebar-textarea-padding: 6px 15px;
  15531. --f7-messagebar-textarea-height: 34px;
  15532. --f7-messagebar-textarea-text-color: #000;
  15533. --f7-messagebar-textarea-font-size: 17px;
  15534. --f7-messagebar-textarea-line-height: 20px;
  15535. --f7-messagebar-textarea-border: 1px solid #c8c8cd;
  15536. --f7-messagebar-sheet-bg-color: #d1d5da;
  15537. --f7-messagebar-attachments-border-color: #c8c8cd;
  15538. --f7-messagebar-attachment-border-radius: 12px;
  15539. }
  15540. .ios .theme-dark,
  15541. .ios.theme-dark {
  15542. --f7-messagebar-textarea-text-color: #fff;
  15543. --f7-messagebar-textarea-border: 1px solid var(--f7-bars-border-color);
  15544. --f7-messagebar-attachments-border-color: var(--f7-bars-border-color);
  15545. }
  15546. .md {
  15547. --f7-messagebar-height: 48px;
  15548. --f7-messagebar-font-size: 16px;
  15549. --f7-messagebar-link-color: #333;
  15550. --f7-messagebar-border-color: #d1d1d1;
  15551. --f7-messagebar-textarea-border-radius: 0px;
  15552. --f7-messagebar-textarea-padding: 5px 8px;
  15553. --f7-messagebar-textarea-height: 32px;
  15554. --f7-messagebar-textarea-text-color: #333;
  15555. --f7-messagebar-textarea-font-size: 16px;
  15556. --f7-messagebar-textarea-line-height: 22px;
  15557. --f7-messagebar-textarea-border: 1px solid transparent;
  15558. --f7-messagebar-sheet-bg-color: #fff;
  15559. --f7-messagebar-attachments-border-color: #ddd;
  15560. --f7-messagebar-attachment-border-radius: 4px;
  15561. }
  15562. .md .theme-dark,
  15563. .md.theme-dark {
  15564. --f7-messagebar-border-color: #282829;
  15565. --f7-messagebar-link-color: rgba(255, 255, 255, 0.87);
  15566. --f7-messagebar-textarea-text-color: rgba(255, 255, 255, 0.87);
  15567. --f7-messagebar-attachments-border-color: rgba(255, 255, 255, 0.2);
  15568. }
  15569. .aurora {
  15570. --f7-messagebar-height: 38px;
  15571. --f7-messagebar-font-size: 14px;
  15572. /*
  15573. --f7-messagebar-link-color: var(--f7-theme-color);
  15574. */
  15575. --f7-messagebar-border-color: transparent;
  15576. --f7-messagebar-textarea-border-radius: 12px;
  15577. --f7-messagebar-textarea-padding: 3px 10px;
  15578. --f7-messagebar-textarea-height: 24px;
  15579. --f7-messagebar-textarea-text-color: #000;
  15580. --f7-messagebar-textarea-font-size: 13px;
  15581. --f7-messagebar-textarea-line-height: 16px;
  15582. --f7-messagebar-textarea-border: 1px solid #c8c8cd;
  15583. --f7-messagebar-sheet-bg-color: #fff;
  15584. --f7-messagebar-attachments-border-color: #c8c8cd;
  15585. --f7-messagebar-attachment-border-radius: 12px;
  15586. }
  15587. .aurora .theme-dark,
  15588. .aurora.theme-dark {
  15589. --f7-messagebar-textarea-text-color: #fff;
  15590. --f7-messagebar-textarea-border: 1px solid var(--f7-bars-border-color);
  15591. --f7-messagebar-attachments-border-color: var(--f7-bars-border-color);
  15592. }
  15593. .messagebar {
  15594. transform: translate3d(0, 0, 0);
  15595. background: var(--f7-messagebar-bg-color);
  15596. height: auto;
  15597. min-height: var(--f7-messagebar-height);
  15598. font-size: var(--f7-messagebar-font-size);
  15599. padding-bottom: var(--f7-safe-area-bottom);
  15600. bottom: 0;
  15601. }
  15602. .messagebar:before {
  15603. content: '';
  15604. position: absolute;
  15605. background-color: var(--f7-messagebar-border-color);
  15606. display: block;
  15607. z-index: 15;
  15608. top: 0;
  15609. right: auto;
  15610. bottom: auto;
  15611. left: 0;
  15612. height: 1px;
  15613. width: 100%;
  15614. transform-origin: 50% 0%;
  15615. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  15616. }
  15617. .messagebar:after {
  15618. content: '';
  15619. position: absolute;
  15620. right: 0;
  15621. width: 100%;
  15622. bottom: 100%;
  15623. height: 8px;
  15624. top: auto;
  15625. pointer-events: none;
  15626. background: var(--f7-messagebar-shadow-image);
  15627. }
  15628. .messagebar.no-hairline:before,
  15629. .messagebar.no-border:before {
  15630. display: none !important;
  15631. }
  15632. .messagebar.no-shadow:after,
  15633. .messagebar.toolbar-hidden:after {
  15634. display: none !important;
  15635. }
  15636. .messagebar .toolbar-inner {
  15637. top: auto;
  15638. position: relative;
  15639. height: auto;
  15640. bottom: auto;
  15641. padding-left: calc(var(--f7-messagebar-inner-padding-left, var(--f7-toolbar-inner-padding-left)) + var(--f7-safe-area-left));
  15642. padding-right: calc(var(--f7-messagebar-inner-padding-right, var(--f7-toolbar-inner-padding-right)) + var(--f7-safe-area-right));
  15643. }
  15644. .messagebar.messagebar-sheet-visible > .toolbar-inner {
  15645. bottom: 0;
  15646. }
  15647. .messagebar .messagebar-area {
  15648. width: 100%;
  15649. flex-shrink: 1;
  15650. overflow: hidden;
  15651. position: relative;
  15652. }
  15653. .messagebar textarea {
  15654. width: 100%;
  15655. flex-shrink: 1;
  15656. background-color: var(--f7-messagebar-textarea-bg-color);
  15657. border-radius: var(--f7-messagebar-textarea-border-radius);
  15658. padding: var(--f7-messagebar-textarea-padding);
  15659. height: var(--f7-messagebar-textarea-height);
  15660. color: var(--f7-messagebar-textarea-text-color);
  15661. font-size: var(--f7-messagebar-textarea-font-size);
  15662. line-height: var(--f7-messagebar-textarea-line-height);
  15663. border: var(--f7-messagebar-textarea-border);
  15664. }
  15665. .messagebar a.link {
  15666. align-self: flex-end;
  15667. flex-shrink: 0;
  15668. color: var(--f7-messagebar-link-color, var(--f7-theme-color));
  15669. }
  15670. .messagebar-attachments {
  15671. width: 100%;
  15672. will-change: scroll-position;
  15673. overflow: auto;
  15674. -webkit-overflow-scrolling: touch;
  15675. font-size: 0;
  15676. white-space: nowrap;
  15677. box-sizing: border-box;
  15678. position: relative;
  15679. }
  15680. .messagebar:not(.messagebar-attachments-visible) .messagebar-attachments {
  15681. display: none;
  15682. }
  15683. .messagebar-attachment {
  15684. background-size: cover;
  15685. background-position: center;
  15686. background-repeat: no-repeat;
  15687. display: inline-block;
  15688. vertical-align: middle;
  15689. white-space: normal;
  15690. height: var(--f7-messagebar-attachment-height);
  15691. position: relative;
  15692. border-radius: var(--f7-messagebar-attachment-border-radius);
  15693. }
  15694. @media (orientation: landscape) {
  15695. .messagebar-attachment {
  15696. height: var(--f7-messagebar-attachment-landscape-height);
  15697. }
  15698. }
  15699. .messagebar-attachment img {
  15700. display: block;
  15701. width: auto;
  15702. height: 100%;
  15703. border-radius: var(--f7-messagebar-attachment-border-radius);
  15704. }
  15705. .messagebar-attachment + .messagebar-attachment {
  15706. margin-left: 8px;
  15707. }
  15708. .messagebar-sheet {
  15709. will-change: scroll-position;
  15710. overflow: auto;
  15711. -webkit-overflow-scrolling: touch;
  15712. display: flex;
  15713. flex-wrap: wrap;
  15714. flex-direction: column;
  15715. align-content: flex-start;
  15716. height: var(--f7-messagebar-sheet-height);
  15717. background-color: var(--f7-messagebar-sheet-bg-color);
  15718. padding-left: var(--f7-safe-area-left);
  15719. padding-right: var(--f7-safe-area-right);
  15720. }
  15721. @media (orientation: landscape) {
  15722. .messagebar-sheet {
  15723. height: var(--f7-messagebar-sheet-landscape-height);
  15724. }
  15725. }
  15726. .messagebar-sheet-image,
  15727. .messagebar-sheet-item {
  15728. box-sizing: border-box;
  15729. flex-shrink: 0;
  15730. margin-top: 1px;
  15731. position: relative;
  15732. overflow: hidden;
  15733. height: calc((var(--f7-messagebar-sheet-height) - 2px) / 2);
  15734. width: calc((var(--f7-messagebar-sheet-height) - 2px) / 2);
  15735. margin-left: 1px;
  15736. }
  15737. @media (orientation: landscape) {
  15738. .messagebar-sheet-image,
  15739. .messagebar-sheet-item {
  15740. width: calc((var(--f7-messagebar-sheet-landscape-height) - 2px) / 2);
  15741. height: calc((var(--f7-messagebar-sheet-landscape-height) - 2px) / 2);
  15742. }
  15743. }
  15744. .messagebar-sheet-image .icon-checkbox,
  15745. .messagebar-sheet-item .icon-checkbox,
  15746. .messagebar-sheet-image .icon-radio,
  15747. .messagebar-sheet-item .icon-radio {
  15748. position: absolute;
  15749. right: 8px;
  15750. bottom: 8px;
  15751. }
  15752. .messagebar-sheet-image {
  15753. background-size: cover;
  15754. background-position: center;
  15755. background-repeat: no-repeat;
  15756. }
  15757. .messagebar-attachment-delete {
  15758. display: block;
  15759. position: absolute;
  15760. border-radius: 50%;
  15761. box-sizing: border-box;
  15762. cursor: pointer;
  15763. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
  15764. }
  15765. .messagebar-attachment-delete:after,
  15766. .messagebar-attachment-delete:before {
  15767. position: absolute;
  15768. content: '';
  15769. left: 50%;
  15770. top: 50%;
  15771. }
  15772. .messagebar-attachment-delete:after {
  15773. transform: rotate(45deg);
  15774. }
  15775. .messagebar-attachment-delete:before {
  15776. transform: rotate(-45deg);
  15777. }
  15778. .messagebar:not(.messagebar-sheet-visible) .messagebar-sheet {
  15779. display: none;
  15780. }
  15781. .messagebar ~ * {
  15782. --f7-page-toolbar-bottom-offset: var(--f7-messagebar-height);
  15783. }
  15784. .ios .messagebar a.link.icon-only:first-child {
  15785. margin-left: -8px;
  15786. }
  15787. .ios .messagebar a.link.icon-only:last-child {
  15788. margin-right: -8px;
  15789. }
  15790. .ios .messagebar a.link:not(.icon-only) + .messagebar-area {
  15791. margin-left: 8px;
  15792. }
  15793. .ios .messagebar .messagebar-area + a.link:not(.icon-only) {
  15794. margin-left: 8px;
  15795. }
  15796. .ios .messagebar-area {
  15797. margin-top: 5px;
  15798. margin-bottom: 5px;
  15799. }
  15800. .ios .messagebar-attachments {
  15801. padding: 5px;
  15802. border-radius: var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0;
  15803. border: 1px solid var(--f7-messagebar-attachments-border-color);
  15804. border-bottom: none;
  15805. }
  15806. .ios .messagebar-attachments-visible .messagebar-attachments + textarea {
  15807. border-radius: 0 0 var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius);
  15808. }
  15809. .ios .messagebar-attachment {
  15810. font-size: 14px;
  15811. }
  15812. .ios .messagebar-attachment-delete {
  15813. right: 5px;
  15814. top: 5px;
  15815. width: 20px;
  15816. height: 20px;
  15817. background: #7d7e80;
  15818. border: 2px solid #fff;
  15819. }
  15820. .ios .messagebar-attachment-delete:after,
  15821. .ios .messagebar-attachment-delete:before {
  15822. width: 10px;
  15823. height: 2px;
  15824. background: #fff;
  15825. margin-left: -5px;
  15826. margin-top: -1px;
  15827. }
  15828. .md .messagebar-attachments {
  15829. padding: 8px;
  15830. border-bottom: 1px solid var(--f7-messagebar-attachments-border-color);
  15831. }
  15832. .md .messagebar-area {
  15833. margin-top: 8px;
  15834. margin-bottom: 8px;
  15835. }
  15836. .md .messagebar-sheet-image .icon-checkbox,
  15837. .md .messagebar-sheet-item .icon-checkbox {
  15838. border-color: #fff;
  15839. background: rgba(255, 255, 255, 0.25);
  15840. box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  15841. }
  15842. .md .messagebar-attachment-delete {
  15843. right: 8px;
  15844. top: 8px;
  15845. width: 24px;
  15846. height: 24px;
  15847. background-color: var(--f7-theme-color);
  15848. border-radius: 4px;
  15849. }
  15850. .md .messagebar-attachment-delete:after,
  15851. .md .messagebar-attachment-delete:before {
  15852. width: 14px;
  15853. height: 2px;
  15854. background: #fff;
  15855. margin-left: -7px;
  15856. margin-top: -1px;
  15857. }
  15858. .aurora .messagebar a.link + .messagebar-area {
  15859. margin-left: 5px;
  15860. }
  15861. .aurora .messagebar .messagebar-area + a.link {
  15862. margin-left: 5px;
  15863. }
  15864. .aurora .messagebar-area {
  15865. margin-top: 5px;
  15866. margin-bottom: 5px;
  15867. }
  15868. .aurora .messagebar-sheet-image .icon-checkbox,
  15869. .aurora .messagebar-sheet-item .icon-checkbox {
  15870. background: rgba(255, 255, 255, 0.25);
  15871. }
  15872. .aurora .messagebar-attachments {
  15873. padding: 5px;
  15874. border-radius: var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0;
  15875. border: 1px solid var(--f7-messagebar-attachments-border-color);
  15876. border-bottom: none;
  15877. }
  15878. .aurora .messagebar-attachments-visible .messagebar-attachments + textarea {
  15879. border-radius: 0 0 var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius);
  15880. }
  15881. .aurora .messagebar-attachment {
  15882. font-size: 14px;
  15883. }
  15884. .aurora .messagebar-attachment-delete {
  15885. right: 5px;
  15886. top: 5px;
  15887. width: 14px;
  15888. height: 14px;
  15889. background: #808080;
  15890. }
  15891. .aurora .messagebar-attachment-delete:after,
  15892. .aurora .messagebar-attachment-delete:before {
  15893. width: 8px;
  15894. height: 1px;
  15895. background: #fff;
  15896. margin-left: -4px;
  15897. margin-top: -1px;
  15898. }
  15899. /* === Swiper === */
  15900. .swiper-container {
  15901. margin: 0 auto;
  15902. position: relative;
  15903. overflow: hidden;
  15904. list-style: none;
  15905. padding: 0;
  15906. /* Fix of Webkit flickering */
  15907. z-index: 1;
  15908. }
  15909. .swiper-container-no-flexbox .swiper-slide {
  15910. float: left;
  15911. }
  15912. .swiper-container-vertical > .swiper-wrapper {
  15913. flex-direction: column;
  15914. }
  15915. .swiper-wrapper {
  15916. position: relative;
  15917. width: 100%;
  15918. height: 100%;
  15919. z-index: 1;
  15920. display: flex;
  15921. transition-property: transform;
  15922. box-sizing: content-box;
  15923. }
  15924. .swiper-container-android .swiper-slide,
  15925. .swiper-wrapper {
  15926. transform: translate3d(0px, 0, 0);
  15927. }
  15928. .swiper-container-multirow > .swiper-wrapper {
  15929. flex-wrap: wrap;
  15930. }
  15931. .swiper-container-free-mode > .swiper-wrapper {
  15932. transition-timing-function: ease-out;
  15933. margin: 0 auto;
  15934. }
  15935. .swiper-slide {
  15936. flex-shrink: 0;
  15937. width: 100%;
  15938. height: 100%;
  15939. position: relative;
  15940. transition-property: transform;
  15941. }
  15942. .swiper-slide-invisible-blank {
  15943. visibility: hidden;
  15944. }
  15945. /* Auto Height */
  15946. .swiper-container-autoheight,
  15947. .swiper-container-autoheight .swiper-slide {
  15948. height: auto;
  15949. }
  15950. .swiper-container-autoheight .swiper-wrapper {
  15951. align-items: flex-start;
  15952. transition-property: transform, height;
  15953. }
  15954. /* 3D Effects */
  15955. .swiper-container-3d {
  15956. perspective: 1200px;
  15957. }
  15958. .swiper-container-3d .swiper-wrapper,
  15959. .swiper-container-3d .swiper-slide,
  15960. .swiper-container-3d .swiper-slide-shadow-left,
  15961. .swiper-container-3d .swiper-slide-shadow-right,
  15962. .swiper-container-3d .swiper-slide-shadow-top,
  15963. .swiper-container-3d .swiper-slide-shadow-bottom,
  15964. .swiper-container-3d .swiper-cube-shadow {
  15965. transform-style: preserve-3d;
  15966. }
  15967. .swiper-container-3d .swiper-slide-shadow-left,
  15968. .swiper-container-3d .swiper-slide-shadow-right,
  15969. .swiper-container-3d .swiper-slide-shadow-top,
  15970. .swiper-container-3d .swiper-slide-shadow-bottom {
  15971. position: absolute;
  15972. left: 0;
  15973. top: 0;
  15974. width: 100%;
  15975. height: 100%;
  15976. pointer-events: none;
  15977. z-index: 10;
  15978. }
  15979. .swiper-container-3d .swiper-slide-shadow-left {
  15980. background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  15981. }
  15982. .swiper-container-3d .swiper-slide-shadow-right {
  15983. background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  15984. }
  15985. .swiper-container-3d .swiper-slide-shadow-top {
  15986. background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  15987. }
  15988. .swiper-container-3d .swiper-slide-shadow-bottom {
  15989. background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  15990. }
  15991. /* IE10 Windows Phone 8 Fixes */
  15992. .swiper-container-wp8-horizontal,
  15993. .swiper-container-wp8-horizontal > .swiper-wrapper {
  15994. touch-action: pan-y;
  15995. }
  15996. .swiper-container-wp8-vertical,
  15997. .swiper-container-wp8-vertical > .swiper-wrapper {
  15998. touch-action: pan-x;
  15999. }
  16000. /* a11y */
  16001. .swiper-container .swiper-notification {
  16002. position: absolute;
  16003. left: 0;
  16004. top: 0;
  16005. pointer-events: none;
  16006. opacity: 0;
  16007. z-index: -1000;
  16008. }
  16009. .swiper-container-coverflow .swiper-wrapper {
  16010. /* Windows 8 IE 10 fix */
  16011. -ms-perspective: 1200px;
  16012. }
  16013. .swiper-container-cube {
  16014. overflow: visible;
  16015. }
  16016. .swiper-container-cube .swiper-slide {
  16017. pointer-events: none;
  16018. -webkit-backface-visibility: hidden;
  16019. backface-visibility: hidden;
  16020. z-index: 1;
  16021. visibility: hidden;
  16022. transform-origin: 0 0;
  16023. width: 100%;
  16024. height: 100%;
  16025. }
  16026. .swiper-container-cube .swiper-slide .swiper-slide {
  16027. pointer-events: none;
  16028. }
  16029. .swiper-container-cube.swiper-container-rtl .swiper-slide {
  16030. transform-origin: 100% 0;
  16031. }
  16032. .swiper-container-cube .swiper-slide-active,
  16033. .swiper-container-cube .swiper-slide-active .swiper-slide-active {
  16034. pointer-events: auto;
  16035. }
  16036. .swiper-container-cube .swiper-slide-active,
  16037. .swiper-container-cube .swiper-slide-next,
  16038. .swiper-container-cube .swiper-slide-prev,
  16039. .swiper-container-cube .swiper-slide-next + .swiper-slide {
  16040. pointer-events: auto;
  16041. visibility: visible;
  16042. }
  16043. .swiper-container-cube .swiper-slide-shadow-top,
  16044. .swiper-container-cube .swiper-slide-shadow-bottom,
  16045. .swiper-container-cube .swiper-slide-shadow-left,
  16046. .swiper-container-cube .swiper-slide-shadow-right {
  16047. z-index: 0;
  16048. -webkit-backface-visibility: hidden;
  16049. backface-visibility: hidden;
  16050. }
  16051. .swiper-container-cube .swiper-cube-shadow {
  16052. position: absolute;
  16053. left: 0;
  16054. bottom: 0px;
  16055. width: 100%;
  16056. height: 100%;
  16057. background: #000;
  16058. opacity: 0.6;
  16059. -webkit-filter: blur(50px);
  16060. filter: blur(50px);
  16061. z-index: 0;
  16062. }
  16063. .swiper-container-fade.swiper-container-free-mode .swiper-slide {
  16064. transition-timing-function: ease-out;
  16065. }
  16066. .swiper-container-fade .swiper-slide {
  16067. pointer-events: none;
  16068. transition-property: opacity;
  16069. }
  16070. .swiper-container-fade .swiper-slide .swiper-slide {
  16071. pointer-events: none;
  16072. }
  16073. .swiper-container-fade .swiper-slide-active,
  16074. .swiper-container-fade .swiper-slide-active .swiper-slide-active {
  16075. pointer-events: auto;
  16076. }
  16077. .swiper-container-flip {
  16078. overflow: visible;
  16079. }
  16080. .swiper-container-flip .swiper-slide {
  16081. pointer-events: none;
  16082. -webkit-backface-visibility: hidden;
  16083. backface-visibility: hidden;
  16084. z-index: 1;
  16085. }
  16086. .swiper-container-flip .swiper-slide .swiper-slide {
  16087. pointer-events: none;
  16088. }
  16089. .swiper-container-flip .swiper-slide-active,
  16090. .swiper-container-flip .swiper-slide-active .swiper-slide-active {
  16091. pointer-events: auto;
  16092. }
  16093. .swiper-container-flip .swiper-slide-shadow-top,
  16094. .swiper-container-flip .swiper-slide-shadow-bottom,
  16095. .swiper-container-flip .swiper-slide-shadow-left,
  16096. .swiper-container-flip .swiper-slide-shadow-right {
  16097. z-index: 0;
  16098. -webkit-backface-visibility: hidden;
  16099. backface-visibility: hidden;
  16100. }
  16101. /* Scrollbar */
  16102. .swiper-scrollbar {
  16103. border-radius: 10px;
  16104. position: relative;
  16105. -ms-touch-action: none;
  16106. background: rgba(0, 0, 0, 0.1);
  16107. }
  16108. .swiper-container-horizontal > .swiper-scrollbar {
  16109. position: absolute;
  16110. left: 1%;
  16111. bottom: 3px;
  16112. z-index: 50;
  16113. height: 5px;
  16114. width: 98%;
  16115. }
  16116. .swiper-container-vertical > .swiper-scrollbar {
  16117. position: absolute;
  16118. right: 3px;
  16119. top: 1%;
  16120. z-index: 50;
  16121. width: 5px;
  16122. height: 98%;
  16123. }
  16124. .swiper-scrollbar-drag {
  16125. height: 100%;
  16126. width: 100%;
  16127. position: relative;
  16128. background: rgba(0, 0, 0, 0.5);
  16129. border-radius: 10px;
  16130. left: 0;
  16131. top: 0;
  16132. }
  16133. .swiper-scrollbar-cursor-drag {
  16134. cursor: move;
  16135. }
  16136. .swiper-scrollbar-lock {
  16137. display: none;
  16138. }
  16139. .swiper-zoom-container {
  16140. width: 100%;
  16141. height: 100%;
  16142. display: flex;
  16143. justify-content: center;
  16144. align-items: center;
  16145. text-align: center;
  16146. }
  16147. .swiper-zoom-container > img,
  16148. .swiper-zoom-container > svg,
  16149. .swiper-zoom-container > canvas {
  16150. max-width: 100%;
  16151. max-height: 100%;
  16152. object-fit: contain;
  16153. }
  16154. .swiper-slide-zoomed {
  16155. cursor: move;
  16156. }
  16157. .swiper-button-prev,
  16158. .swiper-button-next {
  16159. position: absolute;
  16160. top: 50%;
  16161. width: 27px;
  16162. height: 44px;
  16163. line-height: 44px;
  16164. text-align: center;
  16165. margin-top: -22px;
  16166. z-index: 10;
  16167. cursor: pointer;
  16168. color: var(--f7-theme-color);
  16169. }
  16170. .swiper-button-prev:after,
  16171. .swiper-button-next:after {
  16172. font-family: 'framework7-core-icons';
  16173. font-weight: normal;
  16174. font-style: normal;
  16175. line-height: 1;
  16176. letter-spacing: normal;
  16177. text-transform: none;
  16178. white-space: nowrap;
  16179. word-wrap: normal;
  16180. direction: ltr;
  16181. -webkit-font-smoothing: antialiased;
  16182. text-rendering: optimizeLegibility;
  16183. -moz-osx-font-smoothing: grayscale;
  16184. -moz-font-feature-settings: "liga";
  16185. font-feature-settings: "liga";
  16186. text-align: center;
  16187. display: block;
  16188. width: 100%;
  16189. height: 100%;
  16190. font-size: 20px;
  16191. font-size: 44px;
  16192. }
  16193. .swiper-button-prev.swiper-button-disabled,
  16194. .swiper-button-next.swiper-button-disabled {
  16195. opacity: 0.35;
  16196. cursor: auto;
  16197. pointer-events: none;
  16198. }
  16199. .swiper-button-prev,
  16200. .swiper-container-rtl .swiper-button-next {
  16201. left: 10px;
  16202. right: auto;
  16203. }
  16204. .swiper-button-prev:after,
  16205. .swiper-container-rtl .swiper-button-next:after {
  16206. content: 'swiper_prev';
  16207. }
  16208. .swiper-button-next,
  16209. .swiper-container-rtl .swiper-button-prev {
  16210. right: 10px;
  16211. left: auto;
  16212. }
  16213. .swiper-button-next:after,
  16214. .swiper-container-rtl .swiper-button-prev:after {
  16215. content: 'swiper_next';
  16216. }
  16217. .swiper-button-lock {
  16218. display: none;
  16219. }
  16220. .swiper-pagination {
  16221. position: absolute;
  16222. text-align: center;
  16223. transition: 300ms opacity;
  16224. transform: translate3d(0, 0, 0);
  16225. z-index: 10;
  16226. }
  16227. .swiper-pagination.swiper-pagination-hidden {
  16228. opacity: 0;
  16229. }
  16230. .swiper-pagination-fraction,
  16231. .swiper-pagination-custom,
  16232. .swiper-container-horizontal > .swiper-pagination-bullets {
  16233. bottom: 10px;
  16234. left: 0;
  16235. width: 100%;
  16236. }
  16237. .swiper-pagination-bullets-dynamic {
  16238. overflow: hidden;
  16239. font-size: 0;
  16240. }
  16241. .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  16242. transform: scale(0.33);
  16243. position: relative;
  16244. }
  16245. .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  16246. transform: scale(1);
  16247. }
  16248. .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  16249. transform: scale(0.66);
  16250. }
  16251. .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  16252. transform: scale(0.33);
  16253. }
  16254. .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  16255. transform: scale(0.66);
  16256. }
  16257. .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  16258. transform: scale(0.33);
  16259. }
  16260. .swiper-pagination-bullet {
  16261. width: 8px;
  16262. height: 8px;
  16263. display: inline-block;
  16264. border-radius: 100%;
  16265. background: #000;
  16266. opacity: 0.2;
  16267. }
  16268. button.swiper-pagination-bullet {
  16269. border: none;
  16270. margin: 0;
  16271. padding: 0;
  16272. box-shadow: none;
  16273. -webkit-appearance: none;
  16274. -moz-appearance: none;
  16275. appearance: none;
  16276. }
  16277. .swiper-pagination-clickable .swiper-pagination-bullet {
  16278. cursor: pointer;
  16279. }
  16280. .swiper-pagination-bullet-active {
  16281. opacity: 1;
  16282. background: var(--f7-theme-color);
  16283. }
  16284. .swiper-container-vertical > .swiper-pagination-bullets {
  16285. right: 10px;
  16286. top: 50%;
  16287. transform: translate3d(0px, -50%, 0);
  16288. }
  16289. .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  16290. margin: 6px 0;
  16291. display: block;
  16292. }
  16293. .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  16294. top: 50%;
  16295. transform: translateY(-50%);
  16296. width: 8px;
  16297. }
  16298. .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  16299. display: inline-block;
  16300. transition: 200ms transform, 200ms top;
  16301. }
  16302. .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  16303. margin: 0 4px;
  16304. }
  16305. .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  16306. left: 50%;
  16307. transform: translateX(-50%);
  16308. white-space: nowrap;
  16309. }
  16310. .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  16311. transition: 200ms transform, 200ms left;
  16312. }
  16313. .swiper-pagination-progressbar {
  16314. background: rgba(0, 0, 0, 0.25);
  16315. position: absolute;
  16316. }
  16317. .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  16318. background: var(--f7-theme-color);
  16319. position: absolute;
  16320. left: 0;
  16321. top: 0;
  16322. width: 100%;
  16323. height: 100%;
  16324. transform: scale(0);
  16325. transform-origin: left top;
  16326. }
  16327. .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  16328. transform-origin: right top;
  16329. }
  16330. .swiper-container-horizontal > .swiper-pagination-progressbar,
  16331. .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  16332. width: 100%;
  16333. height: 4px;
  16334. left: 0;
  16335. top: 0;
  16336. }
  16337. .swiper-container-vertical > .swiper-pagination-progressbar,
  16338. .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  16339. width: 4px;
  16340. height: 100%;
  16341. left: 0;
  16342. top: 0;
  16343. }
  16344. .swiper-pagination-lock {
  16345. display: none;
  16346. }
  16347. .preloader.swiper-lazy-preloader {
  16348. position: absolute;
  16349. left: 50%;
  16350. top: 50%;
  16351. z-index: 10;
  16352. width: 32px;
  16353. height: 32px;
  16354. margin-left: -16px;
  16355. margin-top: -16px;
  16356. }
  16357. /* === Photo Browser === */
  16358. :root {
  16359. --f7-photobrowser-bg-color: #fff;
  16360. --f7-photobrowser-bars-bg-image: none;
  16361. /*
  16362. --f7-photobrowser-bars-bg-color: rgba(var(--f7-bars-bg-color-rgb), 0.95);
  16363. --f7-photobrowser-bars-text-color: var(--f7-bars-text-color);
  16364. --f7-photobrowser-bars-link-color: var(--f7-bars-link-color);
  16365. */
  16366. --f7-photobrowser-caption-font-size: 14px;
  16367. --f7-photobrowser-caption-light-text-color: #000;
  16368. --f7-photobrowser-caption-light-bg-color: rgba(255, 255, 255, 0.8);
  16369. --f7-photobrowser-caption-dark-text-color: #fff;
  16370. --f7-photobrowser-caption-dark-bg-color: rgba(0, 0, 0, 0.8);
  16371. --f7-photobrowser-exposed-bg-color: #000;
  16372. --f7-photobrowser-dark-bg-color: #000;
  16373. --f7-photobrowser-dark-bars-bg-color: rgba(27, 27, 27, 0.8);
  16374. --f7-photobrowser-dark-bars-text-color: #fff;
  16375. --f7-photobrowser-dark-bars-link-color: #fff;
  16376. }
  16377. .photo-browser {
  16378. position: absolute;
  16379. left: 0;
  16380. top: 0;
  16381. width: 100%;
  16382. height: 100%;
  16383. z-index: 400;
  16384. }
  16385. .photo-browser-standalone.modal-in {
  16386. transition-duration: 0ms;
  16387. animation: photo-browser-in 400ms;
  16388. }
  16389. .photo-browser-standalone.modal-out {
  16390. transition-duration: 0ms;
  16391. animation: photo-browser-out 400ms;
  16392. }
  16393. .photo-browser-standalone.modal-out.swipe-close-to-bottom,
  16394. .photo-browser-standalone.modal-out.swipe-close-to-top {
  16395. animation: none;
  16396. }
  16397. .photo-browser-popup.modal-out.swipe-close-to-bottom,
  16398. .photo-browser-popup.modal-out.swipe-close-to-top {
  16399. transition-duration: 300ms;
  16400. }
  16401. .photo-browser-popup.modal-out.swipe-close-to-bottom {
  16402. transform: translate3d(0, 100%, 0);
  16403. }
  16404. .photo-browser-popup.modal-out.swipe-close-to-top {
  16405. transform: translate3d(0, -100vh, 0);
  16406. }
  16407. .photo-browser-page {
  16408. background: none;
  16409. }
  16410. .photo-browser-page .toolbar {
  16411. transform: none;
  16412. }
  16413. .photo-browser-popup {
  16414. background: none;
  16415. }
  16416. .photo-browser-of {
  16417. margin: 0 5px;
  16418. }
  16419. .photo-browser-captions {
  16420. pointer-events: none;
  16421. position: absolute;
  16422. left: 0;
  16423. width: 100%;
  16424. bottom: var(--f7-safe-area-bottom);
  16425. z-index: 10;
  16426. opacity: 1;
  16427. transition: 400ms;
  16428. }
  16429. .photo-browser-captions.photo-browser-captions-exposed {
  16430. opacity: 0;
  16431. }
  16432. .toolbar ~ .photo-browser-captions {
  16433. bottom: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
  16434. transform: translate3d(0, 0px, 0);
  16435. }
  16436. .toolbar ~ .photo-browser-captions.photo-browser-captions-exposed {
  16437. transform: translate3d(0, 0px, 0);
  16438. }
  16439. .photo-browser-caption {
  16440. box-sizing: border-box;
  16441. transition: 300ms;
  16442. position: absolute;
  16443. bottom: 0;
  16444. left: 0;
  16445. opacity: 0;
  16446. padding: 4px 5px;
  16447. width: 100%;
  16448. text-align: center;
  16449. font-size: var(--f7-photobrowser-caption-font-size);
  16450. }
  16451. .photo-browser-caption:empty {
  16452. display: none;
  16453. }
  16454. .photo-browser-caption.photo-browser-caption-active {
  16455. opacity: 1;
  16456. }
  16457. .photo-browser-captions-light .photo-browser-caption {
  16458. color: var(--f7-photobrowser-caption-light-text-color);
  16459. background: var(--f7-photobrowser-caption-light-bg-color);
  16460. }
  16461. .photo-browser-captions-dark .photo-browser-caption {
  16462. color: var(--f7-photobrowser-caption-dark-text-color);
  16463. background: var(--f7-photobrowser-caption-dark-bg-color);
  16464. }
  16465. .photo-browser-swiper-container {
  16466. position: absolute;
  16467. left: 0;
  16468. top: 0;
  16469. width: 100%;
  16470. height: 100%;
  16471. overflow: hidden;
  16472. background: var(--f7-photobrowser-bg-color);
  16473. transition: 400ms;
  16474. transition-property: background-color;
  16475. }
  16476. .photo-browser-prev.swiper-button-disabled,
  16477. .photo-browser-next.swiper-button-disabled {
  16478. opacity: 0.3;
  16479. pointer-events: none;
  16480. }
  16481. .photo-browser-slide {
  16482. width: 100%;
  16483. height: 100%;
  16484. position: relative;
  16485. overflow: hidden;
  16486. display: flex;
  16487. justify-content: center;
  16488. align-items: center;
  16489. flex-shrink: 0;
  16490. box-sizing: border-box;
  16491. }
  16492. .photo-browser-slide.photo-browser-transitioning {
  16493. transition: 400ms;
  16494. transition-property: transform;
  16495. }
  16496. .photo-browser-slide span.swiper-zoom-container {
  16497. display: none;
  16498. }
  16499. .photo-browser-slide img {
  16500. width: auto;
  16501. height: auto;
  16502. max-width: 100%;
  16503. max-height: 100%;
  16504. display: none;
  16505. }
  16506. .photo-browser-slide.swiper-slide-active span.swiper-zoom-container,
  16507. .photo-browser-slide.swiper-slide-next span.swiper-zoom-container,
  16508. .photo-browser-slide.swiper-slide-prev span.swiper-zoom-container {
  16509. display: flex;
  16510. }
  16511. .photo-browser-slide.swiper-slide-active img,
  16512. .photo-browser-slide.swiper-slide-next img,
  16513. .photo-browser-slide.swiper-slide-prev img {
  16514. display: inline;
  16515. }
  16516. .photo-browser-slide.swiper-slide-active.photo-browser-slide-lazy .preloader,
  16517. .photo-browser-slide.swiper-slide-next.photo-browser-slide-lazy .preloader,
  16518. .photo-browser-slide.swiper-slide-prev.photo-browser-slide-lazy .preloader {
  16519. display: block;
  16520. }
  16521. .photo-browser-slide iframe {
  16522. width: 100%;
  16523. height: 100%;
  16524. }
  16525. .photo-browser-slide .preloader {
  16526. display: none;
  16527. position: absolute;
  16528. width: 42px;
  16529. height: 42px;
  16530. margin-left: -21px;
  16531. margin-top: -21px;
  16532. left: 50%;
  16533. top: 50%;
  16534. }
  16535. .photo-browser-page .navbar,
  16536. .view.with-photo-browser-page .navbar,
  16537. .photo-browser-page .toolbar,
  16538. .view.with-photo-browser-page .toolbar {
  16539. background-color: var(--f7-photobrowser-bars-bg-color, rgba(var(--f7-bars-bg-color-rgb), 0.95));
  16540. background-image: var(--f7-photobrowser-bars-bg-image);
  16541. transition: 400ms;
  16542. color: var(--f7-photobrowser-bars-text-color, var(--f7-bars-text-color));
  16543. }
  16544. .photo-browser-page .navbar a,
  16545. .view.with-photo-browser-page .navbar a,
  16546. .photo-browser-page .toolbar a,
  16547. .view.with-photo-browser-page .toolbar a {
  16548. color: var(--f7-photobrowser-bars-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
  16549. }
  16550. .photo-browser-exposed .navbar,
  16551. .photo-browser-exposed .toolbar {
  16552. opacity: 0;
  16553. visibility: hidden;
  16554. pointer-events: none;
  16555. }
  16556. .photo-browser-exposed .toolbar ~ .photo-browser-captions {
  16557. transform: translate3d(0, var(--f7-toolbar-height), 0);
  16558. }
  16559. .photo-browser-exposed .photo-browser-swiper-container {
  16560. background: var(--f7-photobrowser-exposed-bg-color);
  16561. }
  16562. .photo-browser-exposed .photo-browser-caption {
  16563. color: var(--f7-photobrowser-caption-dark-text-color);
  16564. background: var(--f7-photobrowser-caption-dark-bg-color);
  16565. }
  16566. .view.with-photo-browser-page-exposed .navbar {
  16567. opacity: 0;
  16568. }
  16569. .photo-browser-dark .photo-browser-swiper-container,
  16570. .photo-browser-page-dark .photo-browser-swiper-container,
  16571. .view.with-photo-browser-page-dark .photo-browser-swiper-container {
  16572. background: var(--f7-photobrowser-dark-bg-color);
  16573. }
  16574. .photo-browser-dark .navbar,
  16575. .photo-browser-page-dark .navbar,
  16576. .view.with-photo-browser-page-dark .navbar,
  16577. .photo-browser-dark .toolbar,
  16578. .photo-browser-page-dark .toolbar,
  16579. .view.with-photo-browser-page-dark .toolbar {
  16580. --f7-touch-ripple-color: var(--f7-touch-ripple-white);
  16581. --f7-link-highlight-color: var(--f7-link-highlight-white);
  16582. background: var(--f7-photobrowser-dark-bars-bg-color);
  16583. color: var(--f7-photobrowser-dark-bars-text-color);
  16584. }
  16585. .photo-browser-dark .navbar:before,
  16586. .photo-browser-page-dark .navbar:before,
  16587. .view.with-photo-browser-page-dark .navbar:before,
  16588. .photo-browser-dark .toolbar:before,
  16589. .photo-browser-page-dark .toolbar:before,
  16590. .view.with-photo-browser-page-dark .toolbar:before {
  16591. display: none !important;
  16592. }
  16593. .photo-browser-dark .navbar:after,
  16594. .photo-browser-page-dark .navbar:after,
  16595. .view.with-photo-browser-page-dark .navbar:after,
  16596. .photo-browser-dark .toolbar:after,
  16597. .photo-browser-page-dark .toolbar:after,
  16598. .view.with-photo-browser-page-dark .toolbar:after {
  16599. display: none !important;
  16600. }
  16601. .photo-browser-dark .navbar a,
  16602. .photo-browser-page-dark .navbar a,
  16603. .view.with-photo-browser-page-dark .navbar a,
  16604. .photo-browser-dark .toolbar a,
  16605. .photo-browser-page-dark .toolbar a,
  16606. .view.with-photo-browser-page-dark .toolbar a {
  16607. color: var(--f7-photobrowser-dark-bars-link-color);
  16608. }
  16609. @keyframes photo-browser-in {
  16610. 0% {
  16611. transform: translate3d(0, 0, 0) scale(0.5);
  16612. opacity: 0;
  16613. }
  16614. 50% {
  16615. transform: translate3d(0, 0, 0) scale(1.05);
  16616. opacity: 1;
  16617. }
  16618. 100% {
  16619. transform: translate3d(0, 0, 0) scale(1);
  16620. opacity: 1;
  16621. }
  16622. }
  16623. @keyframes photo-browser-out {
  16624. 0% {
  16625. transform: translate3d(0, 0, 0) scale(1);
  16626. opacity: 1;
  16627. }
  16628. 50% {
  16629. transform: translate3d(0, 0, 0) scale(1.05);
  16630. opacity: 1;
  16631. }
  16632. 100% {
  16633. transform: translate3d(0, 0, 0) scale(0.5);
  16634. opacity: 0;
  16635. }
  16636. }
  16637. /* === Notifications === */
  16638. :root {
  16639. --f7-notification-max-width: 568px;
  16640. --f7-notification-subtitle-text-transform: none;
  16641. --f7-notification-subtitle-line-height: 1.35;
  16642. --f7-notification-text-text-transform: none;
  16643. --f7-notification-text-font-weight: 400;
  16644. }
  16645. .ios {
  16646. --f7-notification-margin: 8px;
  16647. --f7-notification-padding: 10px;
  16648. --f7-notification-border-radius: 12px;
  16649. --f7-notification-box-shadow: 0px 5px 25px -10px rgba(0, 0, 0, 0.7);
  16650. --f7-notification-bg-color: rgba(250, 250, 250, 0.95);
  16651. --f7-notification-translucent-bg-color-ios: rgba(255, 255, 255, 0.65);
  16652. --f7-notification-icon-size: 20px;
  16653. --f7-notification-title-color: #000;
  16654. --f7-notification-title-font-size: 13px;
  16655. --f7-notification-title-text-transform: uppercase;
  16656. --f7-notification-title-line-height: 1.4;
  16657. --f7-notification-title-font-weight: 400;
  16658. --f7-notification-title-letter-spacing: 0.02em;
  16659. --f7-notification-title-right-color: #444a51;
  16660. --f7-notification-title-right-font-size: 13px;
  16661. --f7-notification-subtitle-color: #000;
  16662. --f7-notification-subtitle-font-size: 15px;
  16663. --f7-notification-subtitle-font-weight: 600;
  16664. --f7-notification-text-color: #000;
  16665. --f7-notification-text-font-size: 15px;
  16666. --f7-notification-text-line-height: 1.2;
  16667. }
  16668. .md {
  16669. --f7-notification-margin: 0px;
  16670. --f7-notification-padding: 16px;
  16671. --f7-notification-border-radius: 0px;
  16672. --f7-notification-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.24);
  16673. --f7-notification-bg-color: #fff;
  16674. --f7-notification-icon-size: 16px;
  16675. --f7-notification-title-color: var(--f7-theme-color);
  16676. --f7-notification-title-font-size: 12px;
  16677. --f7-notification-title-text-transform: none;
  16678. --f7-notification-title-line-height: 1;
  16679. --f7-notification-title-font-weight: 400;
  16680. --f7-notification-title-right-color: #757575;
  16681. --f7-notification-title-right-font-size: 12px;
  16682. --f7-notification-subtitle-color: #212121;
  16683. --f7-notification-subtitle-font-size: 14px;
  16684. --f7-notification-subtitle-font-weight: 400;
  16685. --f7-notification-text-color: #757575;
  16686. --f7-notification-text-font-size: 14px;
  16687. --f7-notification-text-line-height: 1.35;
  16688. }
  16689. .aurora {
  16690. --f7-notification-margin: 10px;
  16691. --f7-notification-padding: 10px;
  16692. --f7-notification-border-radius: 4px;
  16693. --f7-notification-box-shadow: 0px 5px 25px -10px rgba(0, 0, 0, 0.7);
  16694. --f7-notification-bg-color: #fff;
  16695. --f7-notification-icon-size: 18px;
  16696. --f7-notification-title-color: #000;
  16697. --f7-notification-title-font-size: 13px;
  16698. --f7-notification-title-text-transform: uppercase;
  16699. --f7-notification-title-line-height: 1.4;
  16700. --f7-notification-title-font-weight: 500;
  16701. --f7-notification-title-letter-spacing: 0.02em;
  16702. --f7-notification-title-right-color: rgba(255, 255, 255, 0.6);
  16703. --f7-notification-title-right-font-size: 13px;
  16704. --f7-notification-subtitle-color: #000;
  16705. --f7-notification-subtitle-font-size: 12px;
  16706. --f7-notification-subtitle-font-weight: 600;
  16707. --f7-notification-text-color: #000;
  16708. --f7-notification-text-font-size: 12px;
  16709. --f7-notification-text-line-height: 1.2;
  16710. }
  16711. .notification {
  16712. position: absolute;
  16713. left: var(--f7-notification-margin);
  16714. top: var(--f7-notification-margin);
  16715. width: calc(100% - var(--f7-notification-margin) * 2);
  16716. z-index: 20000;
  16717. font-size: 14px;
  16718. margin: 0;
  16719. border: none;
  16720. display: none;
  16721. box-sizing: border-box;
  16722. transition-property: transform;
  16723. direction: ltr;
  16724. max-width: var(--f7-notification-max-width);
  16725. padding: var(--f7-notification-padding);
  16726. border-radius: var(--f7-notification-border-radius);
  16727. box-shadow: var(--f7-notification-box-shadow);
  16728. background: var(--f7-notification-bg-color);
  16729. margin-top: var(--f7-statusbar-height);
  16730. --f7-link-highlight-color: var(--f7-link-highlight-black);
  16731. --f7-touch-ripple-color: var(--f7-touch-ripple-black);
  16732. }
  16733. @media (min-width: 568px) {
  16734. .notification {
  16735. left: 50%;
  16736. width: var(--f7-notification-max-width);
  16737. margin-left: calc(-1 * var(--f7-notification-max-width) / 2);
  16738. }
  16739. }
  16740. .notification-title {
  16741. color: var(--f7-notification-title-color, var(--f7-theme-color));
  16742. font-size: var(--f7-notification-title-font-size);
  16743. text-transform: var(--f7-notification-title-text-transform);
  16744. line-height: var(--f7-notification-title-line-height);
  16745. font-weight: var(--f7-notification-title-font-weight);
  16746. letter-spacing: var(--f7-notification-title-letter-spacing);
  16747. }
  16748. .notification-subtitle {
  16749. color: var(--f7-notification-subtitle-color);
  16750. font-size: var(--f7-notification-subtitle-font-size);
  16751. text-transform: var(--f7-notification-subtitle-text-transform);
  16752. line-height: var(--f7-notification-subtitle-line-height);
  16753. font-weight: var(--f7-notification-subtitle-font-weight);
  16754. }
  16755. .notification-text {
  16756. color: var(--f7-notification-text-color);
  16757. font-size: var(--f7-notification-text-font-size);
  16758. text-transform: var(--f7-notification-text-text-transform);
  16759. line-height: var(--f7-notification-text-line-height);
  16760. font-weight: var(--f7-notification-text-font-weight);
  16761. }
  16762. .notification-title-right-text {
  16763. color: var(--f7-notification-title-right-color);
  16764. font-size: var(--f7-notification-title-right-font-size);
  16765. }
  16766. .notification-icon {
  16767. font-size: 0;
  16768. line-height: var(--f7-notification-icon-size);
  16769. }
  16770. .notification-icon i,
  16771. .notification-icon {
  16772. width: var(--f7-notification-icon-size) !important;
  16773. height: var(--f7-notification-icon-size) !important;
  16774. }
  16775. .notification-icon i {
  16776. font-size: var(--f7-notification-icon-size);
  16777. }
  16778. .notification-header {
  16779. display: flex;
  16780. justify-content: flex-start;
  16781. align-items: center;
  16782. }
  16783. .notification-close-button {
  16784. margin-left: auto;
  16785. cursor: pointer;
  16786. position: relative;
  16787. }
  16788. .notification-close-button:after {
  16789. font-family: 'framework7-core-icons';
  16790. font-weight: normal;
  16791. font-style: normal;
  16792. line-height: 1;
  16793. letter-spacing: normal;
  16794. text-transform: none;
  16795. white-space: nowrap;
  16796. word-wrap: normal;
  16797. direction: ltr;
  16798. -webkit-font-smoothing: antialiased;
  16799. text-rendering: optimizeLegibility;
  16800. -moz-osx-font-smoothing: grayscale;
  16801. -moz-font-feature-settings: "liga";
  16802. font-feature-settings: "liga";
  16803. display: block;
  16804. width: 100%;
  16805. height: 100%;
  16806. font-size: 20px;
  16807. position: absolute;
  16808. left: 50%;
  16809. top: 50%;
  16810. text-align: center;
  16811. }
  16812. .ios .notification {
  16813. transition-duration: 450ms;
  16814. transform: translate3d(0%, -200%, 0);
  16815. }
  16816. @supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  16817. .ios .notification {
  16818. background: var(--f7-notification-translucent-bg-color-ios);
  16819. -webkit-backdrop-filter: blur(10px);
  16820. backdrop-filter: blur(10px);
  16821. }
  16822. }
  16823. .ios .notification.modal-in {
  16824. transform: translate3d(0%, 0%, 0);
  16825. opacity: 1;
  16826. }
  16827. .ios .notification.modal-out {
  16828. transform: translate3d(0%, -200%, 0);
  16829. }
  16830. .ios .notification-icon {
  16831. margin-right: 8px;
  16832. }
  16833. .ios .notification-header + .notification-content {
  16834. margin-top: 10px;
  16835. }
  16836. .ios .notification-title-right-text {
  16837. margin-right: 6px;
  16838. margin-left: auto;
  16839. }
  16840. .ios .notification-title-right-text + .notification-close-button {
  16841. margin-left: 10px;
  16842. }
  16843. .ios .notification-close-button {
  16844. font-size: 14px;
  16845. width: 20px;
  16846. height: 20px;
  16847. opacity: 0.3;
  16848. transition-duration: 300ms;
  16849. }
  16850. .ios .notification-close-button.active-state {
  16851. transition-duration: 0ms;
  16852. opacity: 0.1;
  16853. }
  16854. .ios .notification-close-button:after {
  16855. color: #000;
  16856. content: 'notification_close_ios';
  16857. font-size: 0.65em;
  16858. line-height: 44px;
  16859. width: 44px;
  16860. height: 44px;
  16861. margin-left: -22px;
  16862. margin-top: -22px;
  16863. }
  16864. .md .notification {
  16865. transform: translate3d(0, -150%, 0);
  16866. }
  16867. .md .notification.modal-in {
  16868. transition-duration: 0ms;
  16869. animation: notification-md-in 400ms ease-out;
  16870. transform: translate3d(0, 0%, 0);
  16871. }
  16872. .md .notification.modal-in.notification-transitioning {
  16873. transition-duration: 200ms;
  16874. }
  16875. .md .notification.modal-out {
  16876. animation: none;
  16877. transition-duration: 200ms;
  16878. transition-timing-function: ease-in;
  16879. transform: translate3d(0, -150%, 0);
  16880. }
  16881. .md .notification-icon {
  16882. margin-right: 8px;
  16883. }
  16884. .md .notification-subtitle + .notification-text {
  16885. margin-top: 2px;
  16886. }
  16887. .md .notification-header + .notification-content {
  16888. margin-top: 6px;
  16889. }
  16890. .md .notification-title-right-text {
  16891. margin-left: 4px;
  16892. }
  16893. .md .notification-title-right-text:before {
  16894. content: '';
  16895. width: 3px;
  16896. height: 3px;
  16897. border-radius: 50%;
  16898. display: inline-block;
  16899. vertical-align: middle;
  16900. margin-right: 4px;
  16901. background: var(--f7-notification-title-right-color);
  16902. }
  16903. .md .notification-close-button {
  16904. width: 16px;
  16905. height: 16px;
  16906. transition-duration: 300ms;
  16907. }
  16908. .md .notification-close-button:before {
  16909. content: '';
  16910. width: 152%;
  16911. height: 152%;
  16912. position: absolute;
  16913. left: -26%;
  16914. top: -26%;
  16915. background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
  16916. background-repeat: no-repeat;
  16917. background-position: center;
  16918. background-size: 100% 100%;
  16919. opacity: 0;
  16920. pointer-events: none;
  16921. transition-duration: 600ms;
  16922. }
  16923. .md .notification-close-button.active-state:before {
  16924. opacity: 1;
  16925. transition-duration: 150ms;
  16926. }
  16927. .md .notification-close-button:before,
  16928. .md .notification-close-button:after {
  16929. width: 48px;
  16930. height: 48px;
  16931. left: 50%;
  16932. top: 50%;
  16933. margin-left: -24px;
  16934. margin-top: -24px;
  16935. }
  16936. .md .notification-close-button:after {
  16937. color: #737373;
  16938. content: 'delete_md';
  16939. line-height: 48px;
  16940. font-size: 14px;
  16941. }
  16942. @keyframes notification-md-in {
  16943. 0% {
  16944. transform: translate3d(0, -150%, 0);
  16945. }
  16946. 50% {
  16947. transform: translate3d(0, 10%, 0);
  16948. }
  16949. 100% {
  16950. transform: translate3d(0, 0%, 0);
  16951. }
  16952. }
  16953. .aurora .notification {
  16954. transition-duration: 450ms;
  16955. transform: translate3d(0%, -200%, 0);
  16956. }
  16957. .aurora .notification.modal-in {
  16958. transform: translate3d(0%, 0%, 0);
  16959. opacity: 1;
  16960. }
  16961. .aurora .notification.modal-out {
  16962. transform: translate3d(0%, -200%, 0);
  16963. }
  16964. .aurora .notification-icon {
  16965. margin-right: 10px;
  16966. }
  16967. .aurora .notification-header + .notification-content {
  16968. margin-top: 10px;
  16969. }
  16970. .aurora .notification-title-right-text {
  16971. margin-right: 0px;
  16972. margin-left: auto;
  16973. }
  16974. .aurora .notification-title-right-text + .notification-close-button {
  16975. margin-left: 10px;
  16976. }
  16977. .aurora .notification-close-button {
  16978. font-size: 14px;
  16979. width: 16px;
  16980. height: 16px;
  16981. opacity: 0.4;
  16982. transition-duration: 300ms;
  16983. }
  16984. .aurora .notification-close-button.active-state {
  16985. transition-duration: 0ms;
  16986. opacity: 0.6;
  16987. }
  16988. .aurora .notification-close-button:after {
  16989. color: #000;
  16990. content: 'notification_close_ios';
  16991. font-size: 0.5em;
  16992. line-height: 38px;
  16993. width: 38px;
  16994. height: 38px;
  16995. margin-left: -19px;
  16996. margin-top: -19px;
  16997. }
  16998. /* === Autocomplete === */
  16999. :root {
  17000. --f7-autocomplete-dropdown-bg-color: #fff;
  17001. --f7-autocomplete-dropdown-placeholder-color: #a9a9a9;
  17002. --f7-autocomplete-dropdown-preloader-size: 20px;
  17003. /*
  17004. --f7-autocomplete-dropdown-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.2);
  17005. */
  17006. }
  17007. .ios {
  17008. --f7-autocomplete-dropdown-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
  17009. --f7-autocomplete-dropdown-text-color: #000;
  17010. --f7-autocomplete-dropdown-text-matching-color: #000;
  17011. --f7-autocomplete-dropdown-text-matching-font-weight: 600;
  17012. --f7-autocomplete-dropdown-font-size: var(--f7-list-font-size);
  17013. }
  17014. .ios .theme-dark,
  17015. .ios.theme-dark {
  17016. --f7-autocomplete-dropdown-bg-color: #1c1c1d;
  17017. --f7-autocomplete-dropdown-text-color: #fff;
  17018. --f7-autocomplete-dropdown-text-matching-color: #fff;
  17019. }
  17020. .md {
  17021. --f7-autocomplete-dropdown-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
  17022. --f7-autocomplete-dropdown-text-color: rgba(0, 0, 0, 0.54);
  17023. --f7-autocomplete-dropdown-text-matching-color: #212121;
  17024. --f7-autocomplete-dropdown-text-matching-font-weight: 400;
  17025. --f7-autocomplete-dropdown-font-size: var(--f7-list-font-size);
  17026. }
  17027. .md .theme-dark,
  17028. .md.theme-dark {
  17029. --f7-autocomplete-dropdown-bg-color: #1c1c1d;
  17030. --f7-autocomplete-dropdown-text-color: rgba(255, 255, 255, 0.54);
  17031. --f7-autocomplete-dropdown-text-matching-color: rgba(255, 255, 255, 0.87);
  17032. }
  17033. .aurora {
  17034. --f7-autocomplete-dropdown-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  17035. --f7-autocomplete-dropdown-text-color: #000;
  17036. --f7-autocomplete-dropdown-text-matching-color: #000;
  17037. --f7-autocomplete-dropdown-text-matching-font-weight: 700;
  17038. --f7-autocomplete-dropdown-font-size: 13px;
  17039. }
  17040. .aurora .theme-dark,
  17041. .aurora.theme-dark {
  17042. --f7-autocomplete-dropdown-bg-color: #1c1c1c;
  17043. --f7-autocomplete-dropdown-text-color: #fff;
  17044. --f7-autocomplete-dropdown-text-matching-color: #fff;
  17045. }
  17046. .autocomplete-page .autocomplete-found {
  17047. display: block;
  17048. }
  17049. .autocomplete-page .autocomplete-not-found {
  17050. display: none;
  17051. }
  17052. .autocomplete-page .autocomplete-values {
  17053. display: block;
  17054. }
  17055. .autocomplete-page .list ul:empty {
  17056. display: none;
  17057. }
  17058. .autocomplete-preloader:not(.autocomplete-preloader-visible) {
  17059. visibility: hidden;
  17060. }
  17061. .autocomplete-preloader:not(.autocomplete-preloader-visible),
  17062. .autocomplete-preloader:not(.autocomplete-preloader-visible) * {
  17063. animation: none;
  17064. }
  17065. .autocomplete-dropdown {
  17066. background: var(--f7-autocomplete-dropdown-bg-color);
  17067. box-shadow: var(--f7-autocomplete-dropdown-box-shadow);
  17068. box-sizing: border-box;
  17069. position: absolute;
  17070. z-index: 500;
  17071. width: 100%;
  17072. left: 0;
  17073. }
  17074. .autocomplete-dropdown .autocomplete-dropdown-inner {
  17075. position: relative;
  17076. will-change: scroll-position;
  17077. overflow: auto;
  17078. -webkit-overflow-scrolling: touch;
  17079. height: 100%;
  17080. z-index: 1;
  17081. }
  17082. .autocomplete-dropdown .autocomplete-preloader {
  17083. display: none;
  17084. position: absolute;
  17085. bottom: 100%;
  17086. width: var(--f7-autocomplete-dropdown-preloader-size);
  17087. height: var(--f7-autocomplete-dropdown-preloader-size);
  17088. }
  17089. .autocomplete-dropdown .autocomplete-preloader-visible {
  17090. display: block;
  17091. }
  17092. .autocomplete-dropdown .autocomplete-dropdown-placeholder {
  17093. color: var(--f7-autocomplete-dropdown-placeholder-color);
  17094. }
  17095. .autocomplete-dropdown .list {
  17096. margin: 0;
  17097. color: var(--f7-autocomplete-dropdown-text-color);
  17098. font-size: var(--f7-autocomplete-dropdown-font-size);
  17099. }
  17100. .autocomplete-dropdown .list b {
  17101. color: var(--f7-autocomplete-dropdown-text-matching-color);
  17102. font-weight: var(--f7-autocomplete-dropdown-text-matching-font-weight);
  17103. }
  17104. .autocomplete-dropdown .list ul {
  17105. background: none !important;
  17106. }
  17107. .autocomplete-dropdown .list ul:before {
  17108. display: none !important;
  17109. }
  17110. .autocomplete-dropdown .list ul:after {
  17111. display: none !important;
  17112. }
  17113. .autocomplete-dropdown .autocomplete-dropdown-selected {
  17114. background: var(--f7-autocomplete-dropdown-selected-bg-color, rgba(var(--f7-theme-color-rgb), 0.2));
  17115. }
  17116. .searchbar-input-wrap .autocomplete-dropdown {
  17117. background-color: var(--f7-searchbar-input-bg-color, var(--f7-searchbar-bg-color));
  17118. border-radius: var(--f7-searchbar-input-border-radius);
  17119. }
  17120. .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-placeholder {
  17121. color: var(--f7-searchbar-placeholder-color);
  17122. }
  17123. .searchbar-input-wrap .autocomplete-dropdown li:last-child {
  17124. border-radius: 0 0 var(--f7-searchbar-input-border-radius) var(--f7-searchbar-input-border-radius);
  17125. position: relative;
  17126. overflow: hidden;
  17127. }
  17128. .searchbar-input-wrap .autocomplete-dropdown .item-content {
  17129. padding-left: var(--f7-searchbar-input-padding-horizontal);
  17130. }
  17131. .list .item-content-dropdown-expanded .item-title.item-label {
  17132. width: 0;
  17133. flex-shrink: 10;
  17134. overflow: hidden;
  17135. }
  17136. .list .item-content-dropdown-expanded .item-title.item-label + .item-input-wrap {
  17137. margin-left: 0;
  17138. }
  17139. .list .item-content-dropdown-expanded .item-input-wrap {
  17140. width: 100%;
  17141. }
  17142. .ios .autocomplete-dropdown .autocomplete-preloader {
  17143. right: 15px;
  17144. margin-bottom: 12px;
  17145. }
  17146. .ios .searchbar-input-wrap .autocomplete-dropdown {
  17147. margin-top: calc(-1 * var(--f7-searchbar-input-height));
  17148. top: 100%;
  17149. z-index: 20;
  17150. }
  17151. .ios .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-inner {
  17152. padding-top: var(--f7-searchbar-input-height);
  17153. }
  17154. .md .autocomplete-page .navbar .autocomplete-preloader {
  17155. margin-right: 8px;
  17156. }
  17157. .md .autocomplete-popup .navbar .autocomplete-preloader {
  17158. margin-left: 8px;
  17159. margin-right: 16px;
  17160. }
  17161. .md .autocomplete-dropdown .autocomplete-preloader {
  17162. right: 16px;
  17163. margin-bottom: 8px;
  17164. }
  17165. .md .autocomplete-dropdown .autocomplete-preloader .preloader-inner-gap,
  17166. .md .autocomplete-dropdown .autocomplete-preloader .preloader-inner-half-circle {
  17167. border-width: 3px;
  17168. }
  17169. .aurora .autocomplete-dropdown .autocomplete-preloader {
  17170. right: 15px;
  17171. margin-bottom: 2px;
  17172. }
  17173. .aurora .searchbar-input-wrap .autocomplete-dropdown {
  17174. margin-top: calc(-1 * var(--f7-searchbar-input-height));
  17175. top: 100%;
  17176. z-index: 20;
  17177. }
  17178. .aurora .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-inner {
  17179. padding-top: var(--f7-searchbar-input-height);
  17180. }
  17181. /* === Tooltip === */
  17182. :root {
  17183. --f7-tooltip-bg-color: rgba(0, 0, 0, 0.87);
  17184. --f7-tooltip-text-color: #fff;
  17185. --f7-tooltip-border-radius: 4px;
  17186. --f7-tooltip-padding: 8px 16px;
  17187. --f7-tooltip-font-size: 14px;
  17188. --f7-tooltip-font-weight: 500;
  17189. --f7-tooltip-desktop-padding: 6px 8px;
  17190. --f7-tooltip-desktop-font-size: 12px;
  17191. }
  17192. .tooltip {
  17193. position: absolute;
  17194. z-index: 20000;
  17195. background: var(--f7-tooltip-bg-color);
  17196. border-radius: var(--f7-tooltip-border-radius);
  17197. padding: var(--f7-tooltip-padding);
  17198. color: var(--f7-tooltip-text-color);
  17199. font-size: var(--f7-tooltip-font-size);
  17200. font-weight: var(--f7-tooltip-font-weight);
  17201. box-sizing: border-box;
  17202. line-height: 1.2;
  17203. opacity: 0;
  17204. transform: scale(0.9);
  17205. transition-duration: 150ms;
  17206. transition-property: opacity, transform;
  17207. z-index: 99000;
  17208. }
  17209. .tooltip.tooltip-in {
  17210. transform: scale(1);
  17211. opacity: 1;
  17212. }
  17213. .tooltip.tooltip-out {
  17214. opacity: 0;
  17215. transform: scale(1);
  17216. }
  17217. .device-desktop .tooltip {
  17218. font-size: var(--f7-tooltip-desktop-font-size);
  17219. padding: var(--f7-tooltip-desktop-padding);
  17220. }
  17221. /* === Gauge === */
  17222. .gauge {
  17223. position: relative;
  17224. text-align: center;
  17225. margin-left: auto;
  17226. margin-right: auto;
  17227. display: inline-block;
  17228. }
  17229. .gauge-svg,
  17230. .gauge svg {
  17231. max-width: 100%;
  17232. height: auto;
  17233. }
  17234. .gauge-svg circle,
  17235. .gauge svg circle,
  17236. .gauge-svg path,
  17237. .gauge svg path {
  17238. transition-duration: 400ms;
  17239. }
  17240. /* === Skeleton === */
  17241. :root {
  17242. --f7-skeleton-color: #ccc;
  17243. }
  17244. .theme-dark {
  17245. --f7-skeleton-color: #515151;
  17246. }
  17247. .skeleton-text {
  17248. font-family: 'framework7-skeleton' !important;
  17249. }
  17250. .skeleton-text,
  17251. .skeleton-text * {
  17252. color: var(--f7-skeleton-color) !important;
  17253. font-weight: normal !important;
  17254. font-style: normal !important;
  17255. letter-spacing: -0.015em !important;
  17256. }
  17257. .skeleton-block {
  17258. height: 1em;
  17259. background: var(--f7-skeleton-color) !important;
  17260. width: 100%;
  17261. }
  17262. .skeleton-effect-fade {
  17263. animation: skeleton-effect-fade 1s infinite;
  17264. }
  17265. .skeleton-effect-blink {
  17266. -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
  17267. mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
  17268. -webkit-mask-size: 200% 100%;
  17269. mask-size: 200% 100%;
  17270. -webkit-mask-repeat: repeat;
  17271. mask-repeat: repeat;
  17272. -webkit-mask-position: 50% top;
  17273. mask-position: 50% top;
  17274. animation: skeleton-effect-blink 1s infinite;
  17275. }
  17276. .skeleton-effect-pulse {
  17277. animation: skeleton-effect-pulse 1s infinite;
  17278. }
  17279. @keyframes skeleton-effect-fade {
  17280. 0% {
  17281. opacity: 1;
  17282. }
  17283. 50% {
  17284. opacity: 0.2;
  17285. }
  17286. 100% {
  17287. opacity: 1;
  17288. }
  17289. }
  17290. @keyframes skeleton-effect-blink {
  17291. 0% {
  17292. -webkit-mask-position: 50% top;
  17293. mask-position: 50% top;
  17294. }
  17295. 100% {
  17296. -webkit-mask-position: -150% top;
  17297. mask-position: -150% top;
  17298. }
  17299. }
  17300. @keyframes skeleton-effect-pulse {
  17301. 0% {
  17302. transform: scale(1);
  17303. }
  17304. 40% {
  17305. transform: scale(1);
  17306. }
  17307. 50% {
  17308. transform: scale(0.975);
  17309. }
  17310. 100% {
  17311. transform: scale(1);
  17312. }
  17313. }
  17314. /* === Menu === */
  17315. :root {
  17316. --f7-menu-text-color: #fff;
  17317. --f7-menu-font-size: 16px;
  17318. --f7-menu-font-weight: 500;
  17319. --f7-menu-line-height: 1.2;
  17320. --f7-menu-bg-color: rgba(0, 0, 0, 0.9);
  17321. --f7-menu-item-pressed-bg-color: rgba(20, 20, 20, 0.9);
  17322. --f7-menu-item-padding-horizontal: 12px;
  17323. --f7-menu-item-spacing: 6px;
  17324. --f7-menu-item-height: 40px;
  17325. --f7-menu-item-dropdown-icon-color: rgba(255, 255, 255, 0.4);
  17326. --f7-menu-item-border-radius: 8px;
  17327. /*
  17328. --f7-menu-dropdown-pressed-bg-color: var(--f7-theme-color);
  17329. */
  17330. --f7-menu-dropdown-item-height: 28px;
  17331. --f7-menu-dropdown-divider-color: rgba(255, 255, 255, 0.2);
  17332. --f7-menu-dropdown-padding-vertical: 6px;
  17333. /*
  17334. --f7-menu-dropdown-border-radius: var(--f7-menu-item-border-radius);
  17335. */
  17336. }
  17337. .aurora {
  17338. --f7-menu-font-size: 13px;
  17339. --f7-menu-item-height: 28px;
  17340. --f7-menu-dropdown-item-height: 24px;
  17341. --f7-menu-item-border-radius: 5px;
  17342. --f7-menu-item-padding-horizontal: 10px;
  17343. }
  17344. .menu {
  17345. z-index: 1000;
  17346. position: relative;
  17347. --f7-touch-ripple-color: var(--f7-touch-ripple-white);
  17348. }
  17349. .menu-inner {
  17350. display: flex;
  17351. justify-content: flex-start;
  17352. align-items: flex-start;
  17353. padding-left: var(--f7-menu-item-spacing);
  17354. padding-right: var(--f7-menu-item-spacing);
  17355. }
  17356. .menu-inner:after {
  17357. content: '';
  17358. width: var(--f7-menu-item-spacing);
  17359. height: 100%;
  17360. flex-shrink: 0;
  17361. }
  17362. .menu-item {
  17363. height: var(--f7-menu-item-height);
  17364. min-width: var(--f7-menu-item-height);
  17365. flex-shrink: 0;
  17366. background: var(--f7-menu-bg-color);
  17367. color: var(--f7-menu-text-color);
  17368. border-radius: var(--f7-menu-item-border-radius);
  17369. position: relative;
  17370. box-sizing: border-box;
  17371. font-size: var(--f7-menu-font-size);
  17372. font-weight: var(--f7-menu-font-weight);
  17373. cursor: pointer;
  17374. margin-left: var(--f7-menu-item-spacing);
  17375. }
  17376. .menu-item:first-child {
  17377. margin-left: 0;
  17378. }
  17379. .menu-item.active-state:not(.menu-item-dropdown-opened) {
  17380. background-color: rgba(0, 0, 0, 0.7);
  17381. }
  17382. .menu-item.icon-only {
  17383. padding-left: 0;
  17384. padding-right: 0;
  17385. }
  17386. .menu-item-content {
  17387. display: flex;
  17388. justify-content: center;
  17389. align-items: center;
  17390. padding: 0 var(--f7-menu-item-padding-horizontal);
  17391. height: 100%;
  17392. box-sizing: border-box;
  17393. width: 100%;
  17394. overflow: hidden;
  17395. border-radius: var(--f7-menu-item-border-radius);
  17396. position: relative;
  17397. }
  17398. .menu-item-content.icon-only,
  17399. .icon-only .menu-item-content {
  17400. padding-left: 0;
  17401. padding-right: 0;
  17402. }
  17403. .menu-item-dropdown .menu-item-content:after {
  17404. content: '';
  17405. position: absolute;
  17406. width: 20px;
  17407. height: 2px;
  17408. left: 50%;
  17409. transform: translateX(-50%);
  17410. bottom: 4px;
  17411. background: var(--f7-menu-item-dropdown-icon-color);
  17412. border-radius: 4px;
  17413. }
  17414. .menu-dropdown {
  17415. opacity: 0;
  17416. visibility: hidden;
  17417. pointer-events: none;
  17418. cursor: auto;
  17419. height: 10px;
  17420. background: var(--f7-menu-bg-color);
  17421. position: relative;
  17422. }
  17423. .menu-dropdown-content {
  17424. position: absolute;
  17425. top: 100%;
  17426. border-radius: var(--f7-menu-dropdown-border-radius, var(--f7-menu-item-border-radius));
  17427. padding-top: var(--f7-menu-dropdown-padding-vertical);
  17428. padding-bottom: var(--f7-menu-dropdown-padding-vertical);
  17429. box-sizing: border-box;
  17430. background: var(--f7-menu-bg-color);
  17431. will-change: scroll-position;
  17432. overflow: auto;
  17433. -webkit-overflow-scrolling: touch;
  17434. min-width: calc(100% + 24px);
  17435. }
  17436. .menu-dropdown-link,
  17437. .menu-dropdown-item {
  17438. display: flex;
  17439. justify-content: space-between;
  17440. align-items: center;
  17441. padding-left: var(--f7-menu-item-padding-horizontal);
  17442. padding-right: var(--f7-menu-item-padding-horizontal);
  17443. min-height: var(--f7-menu-dropdown-item-height);
  17444. line-height: var(--f7-menu-line-height);
  17445. font-size: var(--f7-menu-font-size);
  17446. color: var(--f7-menu-text-color);
  17447. font-weight: var(--f7-menu-font-weight);
  17448. white-space: nowrap;
  17449. min-width: 100px;
  17450. }
  17451. .menu-dropdown-link i,
  17452. .menu-dropdown-item i,
  17453. .menu-dropdown-link i.icon,
  17454. .menu-dropdown-item i.icon,
  17455. .menu-dropdown-link i.f7-icons,
  17456. .menu-dropdown-item i.f7-icons,
  17457. .menu-dropdown-link i.material-icons,
  17458. .menu-dropdown-item i.material-icons {
  17459. font-size: 20px;
  17460. }
  17461. .menu-dropdown-link.active-state {
  17462. background: var(--f7-menu-dropdown-pressed-bg-color, var(--f7-theme-color));
  17463. color: var(--f7-menu-text-color);
  17464. }
  17465. .menu-dropdown-divider {
  17466. height: 1px;
  17467. margin-top: 2px;
  17468. margin-bottom: 2px;
  17469. background: var(--f7-menu-dropdown-divider-color);
  17470. }
  17471. .menu-item-dropdown-opened {
  17472. border-bottom-left-radius: 0px;
  17473. border-bottom-right-radius: 0px;
  17474. }
  17475. .menu-item-dropdown-opened .menu-item-content:after {
  17476. opacity: 0;
  17477. }
  17478. .menu-item-dropdown-opened .menu-dropdown {
  17479. opacity: 1;
  17480. visibility: visible;
  17481. pointer-events: auto;
  17482. }
  17483. .menu-item-dropdown-left .menu-dropdown:after,
  17484. .menu-item-dropdown-center .menu-dropdown:after,
  17485. .menu-dropdown-left:after,
  17486. .menu-dropdown-center:after {
  17487. content: '';
  17488. position: absolute;
  17489. left: 100%;
  17490. bottom: 0;
  17491. width: var(--f7-menu-item-border-radius);
  17492. height: var(--f7-menu-item-border-radius);
  17493. background-image: radial-gradient(ellipse at 100% 0%, transparent 0%, transparent 70%, var(--f7-menu-bg-color) 72%);
  17494. }
  17495. .menu-item-dropdown-right .menu-dropdown:before,
  17496. .menu-item-dropdown-center .menu-dropdown:before,
  17497. .menu-dropdown-right:before,
  17498. .menu-dropdown-center:before {
  17499. content: '';
  17500. position: absolute;
  17501. right: 100%;
  17502. bottom: 0;
  17503. width: var(--f7-menu-item-border-radius);
  17504. height: var(--f7-menu-item-border-radius);
  17505. background-image: radial-gradient(ellipse at 0% 0%, transparent 0%, transparent 70%, var(--f7-menu-bg-color) 72%);
  17506. }
  17507. .menu-item-dropdown-left .menu-dropdown-content,
  17508. .menu-dropdown-left .menu-dropdown-content {
  17509. left: 0;
  17510. border-top-left-radius: 0px;
  17511. }
  17512. .menu-item-dropdown-right .menu-dropdown-content,
  17513. .menu-dropdown-right .menu-dropdown-content {
  17514. right: 0;
  17515. border-top-right-radius: 0px;
  17516. }
  17517. .menu-item-dropdown-center .menu-dropdown-content,
  17518. .menu-dropdown-center .menu-dropdown-content {
  17519. left: 50%;
  17520. min-width: calc(100% + 24px + 24px);
  17521. transform: translateX(-50%);
  17522. }
  17523. /* === Color Picker === */
  17524. :root {
  17525. --f7-color-picker-sheet-bg-color: #fff;
  17526. --f7-color-picker-popup-bg-color: #fff;
  17527. --f7-color-picker-popover-width: 350px;
  17528. --f7-color-picker-slider-size: 6px;
  17529. --f7-color-picker-slider-knob-size: 16px;
  17530. --f7-color-picker-bar-size: 50px;
  17531. --f7-color-picker-bar-min-height: 260px;
  17532. --f7-color-picker-value-bg-color: rgba(0, 0, 0, 0.05);
  17533. --f7-color-picker-value-width: 64px;
  17534. --f7-color-picker-value-height: 32px;
  17535. --f7-color-picker-value-font-size: 16px;
  17536. --f7-color-picker-value-border-radius: 4px;
  17537. --f7-color-picker-hex-value-width: 84px;
  17538. --f7-color-picker-label-font-size: 14px;
  17539. --f7-color-picker-label-width: 10px;
  17540. --f7-color-picker-label-height: 14px;
  17541. --f7-color-picker-sb-spectrum-height: 260px;
  17542. --f7-color-picker-sb-spectrum-handle-size: 16px;
  17543. --f7-color-picker-wheel-width: 330px;
  17544. --f7-color-picker-group-bg-color: rgba(0, 0, 0, 0.05);
  17545. --f7-color-picker-group-value-bg-color: #fff;
  17546. --f7-color-picker-palette-value-width: 36px;
  17547. --f7-color-picker-palette-value-height: 36px;
  17548. --f7-color-picker-initial-current-color-height: 40px;
  17549. --f7-color-picker-initial-current-color-border-radius: 4px;
  17550. }
  17551. :root .theme-dark,
  17552. :root.theme-dark {
  17553. --f7-color-picker-sheet-bg-color: #171717;
  17554. --f7-color-picker-popup-bg-color: #171717;
  17555. --f7-color-picker-value-bg-color: rgba(255, 255, 255, 0.1);
  17556. --f7-color-picker-group-bg-color: #000;
  17557. --f7-color-picker-group-value-bg-color: rgba(255, 255, 255, 0.12);
  17558. }
  17559. .color-picker {
  17560. overflow: hidden;
  17561. width: 100%;
  17562. display: flex;
  17563. flex-direction: column;
  17564. }
  17565. .color-picker.color-picker-inline,
  17566. .color-picker-popover .color-picker,
  17567. .color-picker-popup .color-picker {
  17568. position: relative;
  17569. }
  17570. .color-picker-sheet-modal {
  17571. background: var(--f7-color-picker-sheet-bg-color);
  17572. }
  17573. .color-picker-sheet-modal:before {
  17574. z-index: 600;
  17575. }
  17576. .color-picker-sheet-modal .sheet-modal-inner {
  17577. margin-bottom: var(--f7-safe-area-bottom);
  17578. }
  17579. .color-picker-popup .page {
  17580. background: var(--f7-color-picker-popup-bg-color);
  17581. }
  17582. .color-picker-popup .page-content {
  17583. padding-bottom: var(--f7-safe-area-bottom);
  17584. }
  17585. .color-picker-popover .color-picker,
  17586. .color-picker-popup .color-picker,
  17587. .color-picker-page .color-picker {
  17588. height: 100%;
  17589. }
  17590. .color-picker-popover .color-picker .toolbar,
  17591. .color-picker-popup .color-picker .toolbar,
  17592. .color-picker-page .color-picker .toolbar {
  17593. position: absolute;
  17594. }
  17595. .color-picker-popover {
  17596. width: var(--f7-color-picker-popover-width);
  17597. max-width: 90vw;
  17598. max-height: 80vh;
  17599. }
  17600. .color-picker-popover .color-picker {
  17601. max-height: 80vh;
  17602. }
  17603. .color-picker-popover .toolbar-top {
  17604. border-top-left-radius: var(--f7-popover-border-radius);
  17605. border-top-right-radius: var(--f7-popover-border-radius);
  17606. }
  17607. .color-picker-popover .color-picker-module-palette {
  17608. overflow: hidden;
  17609. flex-shrink: 0;
  17610. }
  17611. .color-picker-popover .color-picker-module-palette:first-child {
  17612. border-top-left-radius: var(--f7-popover-border-radius);
  17613. border-top-right-radius: var(--f7-popover-border-radius);
  17614. }
  17615. .color-picker-popover .color-picker-module-palette:last-child {
  17616. border-bottom-left-radius: var(--f7-popover-border-radius);
  17617. border-bottom-right-radius: var(--f7-popover-border-radius);
  17618. }
  17619. .color-picker-popover .color-picker-module-palette:first-child:last-child {
  17620. border-radius: var(--f7-popover-border-radius);
  17621. }
  17622. .color-picker-popover .toolbar ~ .page-content .color-picker-module-palette:first-child {
  17623. border-top-left-radius: 0;
  17624. border-top-right-radius: 0;
  17625. }
  17626. .color-picker-popup .page-content,
  17627. .color-picker-popover .page-content,
  17628. .color-picker-sheet-modal .page-content,
  17629. .color-picker-page .page-content {
  17630. display: flex;
  17631. justify-content: flex-start;
  17632. align-items: stretch;
  17633. flex-direction: column;
  17634. overflow-x: hidden;
  17635. }
  17636. .color-picker-module {
  17637. margin-top: 5px;
  17638. }
  17639. .color-picker-module:last-child {
  17640. margin-bottom: 5px;
  17641. }
  17642. .color-picker-module-sb-spectrum,
  17643. .color-picker-module-hs-spectrum {
  17644. margin-left: 10px;
  17645. margin-right: 10px;
  17646. }
  17647. .color-picker-module-sb-spectrum:first-child,
  17648. .color-picker-module-hs-spectrum:first-child {
  17649. margin-top: 10px;
  17650. }
  17651. .color-picker-module-sb-spectrum .color-picker-sb-spectrum,
  17652. .color-picker-module-hs-spectrum .color-picker-sb-spectrum,
  17653. .color-picker-module-sb-spectrum .color-picker-hs-spectrum,
  17654. .color-picker-module-hs-spectrum .color-picker-hs-spectrum {
  17655. border-radius: 4px;
  17656. height: var(--f7-color-picker-sb-spectrum-height);
  17657. }
  17658. .color-picker-sb-spectrum {
  17659. background-color: #000;
  17660. 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%);
  17661. position: relative;
  17662. }
  17663. .color-picker-hs-spectrum {
  17664. position: relative;
  17665. 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%));
  17666. }
  17667. .color-picker-hs-spectrum:after {
  17668. content: '';
  17669. position: absolute;
  17670. left: 0;
  17671. top: 0;
  17672. width: 100%;
  17673. height: 100%;
  17674. background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
  17675. }
  17676. .color-picker-sb-spectrum-handle,
  17677. .color-picker-hs-spectrum-handle {
  17678. width: 4px;
  17679. height: 4px;
  17680. position: absolute;
  17681. left: -2px;
  17682. top: -2px;
  17683. z-index: 1;
  17684. }
  17685. .color-picker-sb-spectrum-handle:after,
  17686. .color-picker-hs-spectrum-handle:after {
  17687. background-color: inherit;
  17688. content: '';
  17689. position: absolute;
  17690. width: var(--f7-color-picker-sb-spectrum-handle-size);
  17691. height: var(--f7-color-picker-sb-spectrum-handle-size);
  17692. border: 1px solid #fff;
  17693. border-radius: 50%;
  17694. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
  17695. box-sizing: border-box;
  17696. left: 50%;
  17697. top: 50%;
  17698. transform: translate(-50%, -50%);
  17699. transition: 150ms;
  17700. transition-property: transform;
  17701. transform-origin: center;
  17702. }
  17703. .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after,
  17704. .color-picker-hs-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after,
  17705. .color-picker-sb-spectrum-handle.color-picker-hs-spectrum-handle-pressed:after,
  17706. .color-picker-hs-spectrum-handle.color-picker-hs-spectrum-handle-pressed:after {
  17707. transform: scale(1.5) translate(-33.333%, -33.333%);
  17708. }
  17709. .color-picker-module-wheel {
  17710. margin-left: 10px;
  17711. margin-right: 10px;
  17712. }
  17713. .color-picker-wheel {
  17714. position: relative;
  17715. width: var(--f7-color-picker-wheel-width);
  17716. max-width: 100%;
  17717. height: auto;
  17718. font-size: 0;
  17719. margin-left: auto;
  17720. margin-right: auto;
  17721. }
  17722. .color-picker-wheel svg {
  17723. width: 100%;
  17724. height: auto;
  17725. }
  17726. .color-picker-wheel .color-picker-wheel-handle {
  17727. width: calc(100% / 6);
  17728. height: calc(100% / 6);
  17729. position: absolute;
  17730. box-sizing: border-box;
  17731. border: 2px solid #fff;
  17732. box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  17733. background: red;
  17734. border-radius: 50%;
  17735. left: 0;
  17736. top: 0;
  17737. }
  17738. .color-picker-wheel .color-picker-sb-spectrum {
  17739. width: 45%;
  17740. height: 45%;
  17741. left: 50%;
  17742. top: 50%;
  17743. transform: translate3d(-50%, -50%, 0);
  17744. position: absolute;
  17745. }
  17746. .color-picker-slider-wrap {
  17747. display: flex;
  17748. align-items: center;
  17749. margin-bottom: 2px;
  17750. }
  17751. .color-picker-slider-wrap + .color-picker-slider-wrap {
  17752. margin-top: 5px;
  17753. }
  17754. .color-picker-hex-wrap {
  17755. justify-content: space-between;
  17756. display: flex;
  17757. align-items: center;
  17758. }
  17759. .color-picker-slider-label,
  17760. .color-picker-hex-label {
  17761. font-size: var(--f7-color-picker-label-font-size);
  17762. width: var(--f7-color-picker-label-size);
  17763. flex-shrink: 0;
  17764. margin-right: 12px;
  17765. }
  17766. .color-picker-hex-label {
  17767. width: auto;
  17768. }
  17769. .color-picker-bar-value,
  17770. .color-picker-slider-value,
  17771. .color-picker-hex-value {
  17772. width: var(--f7-color-picker-value-width);
  17773. height: var(--f7-color-picker-value-height);
  17774. background: var(--f7-color-picker-value-bg-color);
  17775. border-radius: var(--f7-color-picker-value-border-radius);
  17776. text-align: center;
  17777. font-size: var(--f7-color-picker-value-font-size);
  17778. display: flex;
  17779. justify-content: center;
  17780. align-items: center;
  17781. flex-shrink: 0;
  17782. margin-left: 10px;
  17783. }
  17784. .color-picker-bar-value input,
  17785. .color-picker-slider-value input,
  17786. .color-picker-hex-value input {
  17787. width: 100%;
  17788. height: 100%;
  17789. -webkit-appearance: none;
  17790. -moz-appearance: none;
  17791. appearance: none;
  17792. border: none;
  17793. outline: 0;
  17794. background: transparent;
  17795. color: inherit;
  17796. font-family: inherit;
  17797. font-size: inherit;
  17798. text-align: center;
  17799. display: block;
  17800. border-radius: 4px;
  17801. }
  17802. .color-picker-bar-value input::-webkit-inner-spin-button,
  17803. .color-picker-slider-value input::-webkit-inner-spin-button,
  17804. .color-picker-hex-value input::-webkit-inner-spin-button,
  17805. .color-picker-bar-value input::-webkit-outer-spin-button,
  17806. .color-picker-slider-value input::-webkit-outer-spin-button,
  17807. .color-picker-hex-value input::-webkit-outer-spin-button {
  17808. -webkit-appearance: none;
  17809. -moz-appearance: none;
  17810. appearance: none;
  17811. margin: 0;
  17812. display: none;
  17813. }
  17814. .color-picker-hex-value {
  17815. width: var(--f7-color-picker-hex-value-width);
  17816. }
  17817. .color-picker-hex-value:first-child {
  17818. margin-left: auto;
  17819. }
  17820. .color-picker-slider {
  17821. --f7-range-bar-active-bg-color: transparent;
  17822. --f7-range-bar-size: var(--f7-color-picker-slider-size);
  17823. --f7-range-bar-border-radius: var(--f7-color-picker-slider-size);
  17824. --f7-range-knob-size: var(--f7-color-picker-slider-knob-size);
  17825. --f7-range-knob-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  17826. }
  17827. .color-picker-slider .range-knob {
  17828. transition-duration: 200ms;
  17829. transition-property: transform;
  17830. }
  17831. .color-picker-slider .range-knob:after {
  17832. width: 30px;
  17833. height: 30px;
  17834. margin-left: -15px;
  17835. margin-top: -15px;
  17836. }
  17837. .color-picker-slider .range-knob-active-state .range-knob {
  17838. transform: scale(1.5);
  17839. }
  17840. .md .color-picker-slider.range-slider-min:not(.range-slider-dual) .range-knob {
  17841. background: var(--f7-range-knob-color) !important;
  17842. border: none;
  17843. }
  17844. .color-picker-module-rgb-bars {
  17845. display: flex;
  17846. justify-content: space-around;
  17847. justify-content: space-evenly;
  17848. align-items: stretch;
  17849. height: 100%;
  17850. min-height: var(--f7-color-picker-bar-min-height);
  17851. padding-bottom: 10px;
  17852. padding-top: 10px;
  17853. box-sizing: border-box;
  17854. }
  17855. .color-picker-bar-wrap {
  17856. display: flex;
  17857. align-items: center;
  17858. flex-direction: column-reverse;
  17859. }
  17860. .color-picker-bar {
  17861. --f7-range-bar-active-bg-color: transparent;
  17862. --f7-range-bar-size: var(--f7-color-picker-bar-size);
  17863. --f7-range-bar-border-radius: 2px;
  17864. --f7-range-knob-size: 6px;
  17865. --f7-range-knob-box-shadow: 0 0px 3px rgba(0, 0, 0, 0.3);
  17866. --f7-range-knob-color: #fff;
  17867. }
  17868. .color-picker-bar .range-knob {
  17869. transition-duration: 0ms;
  17870. transition-property: transform;
  17871. border-radius: 3px;
  17872. }
  17873. .color-picker-bar .range-knob-wrap {
  17874. height: 6px;
  17875. width: calc(var(--f7-color-picker-bar-size) - 4px);
  17876. margin-left: calc(-0.5 * (var(--f7-color-picker-bar-size) - 4px));
  17877. }
  17878. .color-picker-bar .range-knob-active-state .range-knob {
  17879. transform: scale(1);
  17880. }
  17881. .md .color-picker-bar.range-slider-min:not(.range-slider-dual) .range-knob {
  17882. background: var(--f7-range-knob-color) !important;
  17883. border: none;
  17884. }
  17885. .color-picker-bar-label {
  17886. font-size: var(--f7-color-picker-label-size);
  17887. margin-top: 12px;
  17888. line-height: 1;
  17889. height: var(--f7-color-picker-label-height);
  17890. flex-shrink: 0;
  17891. }
  17892. .color-picker-bar-value {
  17893. margin-left: 0;
  17894. margin-bottom: 10px;
  17895. }
  17896. .color-picker-slider-alpha {
  17897. --f7-range-knob-color: #fff;
  17898. }
  17899. .color-picker-slider-alpha .range-bar {
  17900. 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%);
  17901. background-size: 100% 100%, 6px 3px, 6px 3px;
  17902. background-position: 0 0, 0px 3px, 0 0;
  17903. background-repeat: repeat-y, repeat-x, repeat-x;
  17904. }
  17905. .color-picker-slider-hue .range-bar {
  17906. 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%));
  17907. }
  17908. .color-picker-slider-brightness .range-bar {
  17909. background-image: linear-gradient(to right, #000, #fff);
  17910. }
  17911. .color-picker-module-palette {
  17912. margin-top: 15px;
  17913. }
  17914. .color-picker-module-palette:first-child {
  17915. margin-top: 0;
  17916. }
  17917. .color-picker-module-palette:last-child {
  17918. margin-bottom: 0;
  17919. }
  17920. .color-picker-module-palette:first-child:last-child {
  17921. margin: 0;
  17922. }
  17923. .color-picker-palette {
  17924. display: flex;
  17925. flex-wrap: wrap;
  17926. }
  17927. .color-picker-palette-row {
  17928. width: 100%;
  17929. display: flex;
  17930. flex-wrap: nowrap;
  17931. }
  17932. .color-picker-palette-row .color-picker-palette-value {
  17933. width: 100%;
  17934. }
  17935. .color-picker-palette-value {
  17936. width: var(--f7-color-picker-palette-value-width);
  17937. height: var(--f7-color-picker-palette-value-height);
  17938. cursor: pointer;
  17939. }
  17940. .color-picker-module-initial-current-colors,
  17941. .color-picker-module-current-color {
  17942. margin-left: 10px;
  17943. margin-right: 10px;
  17944. border-radius: var(--f7-color-picker-initial-current-color-border-radius);
  17945. overflow: hidden;
  17946. flex-shrink: 0;
  17947. }
  17948. .color-picker-initial-color,
  17949. .color-picker-current-color {
  17950. height: var(--f7-color-picker-initial-current-color-height);
  17951. }
  17952. .color-picker-initial-current-colors {
  17953. display: flex;
  17954. }
  17955. .color-picker-initial-current-colors .color-picker-initial-color,
  17956. .color-picker-initial-current-colors .color-picker-current-color {
  17957. width: 50%;
  17958. }
  17959. .color-picker-module-rgb-sliders,
  17960. .color-picker-module-hsb-sliders,
  17961. .color-picker-module-alpha-slider,
  17962. .color-picker-module-hue-slider,
  17963. .color-picker-module-brightness-slider,
  17964. .color-picker-module-hex {
  17965. margin-left: 10px;
  17966. margin-right: 10px;
  17967. }
  17968. .color-picker-grouped-modules .color-picker-module-rgb-sliders,
  17969. .color-picker-grouped-modules .color-picker-module-hsb-sliders,
  17970. .color-picker-grouped-modules .color-picker-module-alpha-slider,
  17971. .color-picker-grouped-modules .color-picker-module-hue-slider,
  17972. .color-picker-grouped-modules .color-picker-module-brightness-slider,
  17973. .color-picker-grouped-modules .color-picker-module-hex {
  17974. background: var(--f7-color-picker-group-bg-color);
  17975. padding: 5px;
  17976. border-radius: 4px;
  17977. margin-top: 15px;
  17978. margin-left: 5px;
  17979. margin-right: 5px;
  17980. }
  17981. .color-picker-grouped-modules .color-picker-module-rgb-sliders:last-child,
  17982. .color-picker-grouped-modules .color-picker-module-hsb-sliders:last-child,
  17983. .color-picker-grouped-modules .color-picker-module-alpha-slider:last-child,
  17984. .color-picker-grouped-modules .color-picker-module-hue-slider:last-child,
  17985. .color-picker-grouped-modules .color-picker-module-brightness-slider:last-child,
  17986. .color-picker-grouped-modules .color-picker-module-hex:last-child {
  17987. margin-bottom: 15px;
  17988. }
  17989. .color-picker-grouped-modules .color-picker-slider-value,
  17990. .color-picker-grouped-modules .color-picker-hex-value {
  17991. background: var(--f7-color-picker-group-value-bg-color);
  17992. }
  17993. .color-picker-grouped-modules .color-picker-slider-label,
  17994. .color-picker-grouped-modules .color-picker-hex-label {
  17995. margin-left: 5px;
  17996. }
  17997. .color-picker-grouped-modules .color-picker-module-rgb-sliders .range-slider:first-child,
  17998. .color-picker-grouped-modules .color-picker-module-hsb-sliders .range-slider:first-child,
  17999. .color-picker-grouped-modules .color-picker-module-alpha-slider .range-slider:first-child,
  18000. .color-picker-grouped-modules .color-picker-module-hue-slider .range-slider:first-child,
  18001. .color-picker-grouped-modules .color-picker-module-brightness-slider .range-slider:first-child {
  18002. margin-left: 5px;
  18003. }
  18004. .color-picker-grouped-modules .color-picker-module-rgb-sliders .range-slider:last-child,
  18005. .color-picker-grouped-modules .color-picker-module-hsb-sliders .range-slider:last-child,
  18006. .color-picker-grouped-modules .color-picker-module-alpha-slider .range-slider:last-child,
  18007. .color-picker-grouped-modules .color-picker-module-hue-slider .range-slider:last-child,
  18008. .color-picker-grouped-modules .color-picker-module-brightness-slider .range-slider:last-child {
  18009. margin-right: 5px;
  18010. }
  18011. /* === Treeview === */
  18012. :root {
  18013. --f7-treeview-toggle-size: 24px;
  18014. --f7-treeview-toggle-color: rgba(0, 0, 0, 0.5);
  18015. --f7-treeview-toggle-hover-bg-color: rgba(0, 0, 0, 0.1);
  18016. --f7-treeview-toggle-pressed-bg-color: rgba(0, 0, 0, 0.15);
  18017. --f7-treeview-icon-color: rgba(0, 0, 0, 0.5);
  18018. --f7-treeview-children-offset: 29px;
  18019. --f7-treeview-label-font-weight: 400;
  18020. --f7-treeview-label-text-color: inherit;
  18021. --f7-treeview-selectable-hover-bg-color: rgba(0, 0, 0, 0.1);
  18022. /*
  18023. --f7-treeview-selectable-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.2);
  18024. */
  18025. --f7-treeview-link-hover-bg-color: rgba(0, 0, 0, 0.1);
  18026. --f7-treeview-link-pressed-bg-color: rgba(0, 0, 0, 0.15);
  18027. }
  18028. :root .theme-dark,
  18029. :root.theme-dark {
  18030. --f7-treeview-toggle-color: rgba(255, 255, 255, 0.5);
  18031. --f7-treeview-toggle-hover-bg-color: rgba(255, 255, 255, 0.03);
  18032. --f7-treeview-toggle-pressed-bg-color: rgba(255, 255, 255, 0.1);
  18033. --f7-treeview-icon-color: rgba(255, 255, 255, 0.75);
  18034. --f7-treeview-selectable-hover-bg-color: rgba(255, 255, 255, 0.03);
  18035. --f7-treeview-link-hover-bg-color: rgba(255, 255, 255, 0.03);
  18036. --f7-treeview-link-pressed-bg-color: rgba(255, 255, 255, 0.11);
  18037. }
  18038. .ios {
  18039. --f7-treeview-item-height: 34px;
  18040. --f7-treeview-item-padding-left: 15px;
  18041. --f7-treeview-item-padding-right: 15px;
  18042. --f7-treeview-label-font-size: 17px;
  18043. --f7-treeview-icon-size: 24px;
  18044. }
  18045. .md {
  18046. --f7-treeview-item-height: 34px;
  18047. --f7-treeview-item-padding-left: 16px;
  18048. --f7-treeview-item-padding-right: 16px;
  18049. --f7-treeview-label-font-size: 16px;
  18050. --f7-treeview-icon-size: 24px;
  18051. }
  18052. .aurora {
  18053. --f7-treeview-item-height: 28px;
  18054. --f7-treeview-item-padding-left: 15px;
  18055. --f7-treeview-item-padding-right: 15px;
  18056. --f7-treeview-label-font-size: 14px;
  18057. --f7-treeview-icon-size: 20px;
  18058. }
  18059. .treeview-item-root {
  18060. padding-left: var(--f7-treeview-item-padding-left);
  18061. padding-right: var(--f7-treeview-item-padding-right);
  18062. height: var(--f7-treeview-item-height);
  18063. display: flex;
  18064. align-items: center;
  18065. justify-content: flex-start;
  18066. }
  18067. .treeview-item-content {
  18068. display: flex;
  18069. justify-content: flex-start;
  18070. align-items: center;
  18071. }
  18072. .treeview-item-content > i,
  18073. .treeview-item-content > .f7-icons,
  18074. .treeview-item-content > .material-icons {
  18075. width: var(--f7-treeview-icon-size);
  18076. height: var(--f7-treeview-icon-size);
  18077. font-size: var(--f7-treeview-icon-size);
  18078. color: var(--f7-treeview-icon-color);
  18079. }
  18080. .treeview-item-content:first-child {
  18081. margin-left: calc(var(--f7-treeview-toggle-size) + 5px);
  18082. }
  18083. .treeview-item-content > * + * {
  18084. margin-left: 5px;
  18085. }
  18086. .treeview-item-label {
  18087. font-size: var(--f7-treeview-label-font-size);
  18088. font-weight: var(--f7-treeview-label-font-weight);
  18089. color: var(--f7-treeview-label-text-color);
  18090. }
  18091. .treeview-toggle {
  18092. width: var(--f7-treeview-toggle-size);
  18093. height: var(--f7-treeview-toggle-size);
  18094. cursor: pointer;
  18095. border-radius: 4px;
  18096. background-color: rgba(0, 0, 0, 0);
  18097. transition-duration: 200ms;
  18098. position: relative;
  18099. margin-right: 5px;
  18100. }
  18101. .treeview-toggle.active-state {
  18102. background-color: var(--f7-treeview-toggle-pressed-bg-color);
  18103. }
  18104. .treeview-toggle:after {
  18105. transition-duration: 200ms;
  18106. content: '';
  18107. position: absolute;
  18108. left: 50%;
  18109. top: 50%;
  18110. width: 0;
  18111. height: 0;
  18112. border-top: 5px solid transparent;
  18113. border-bottom: 5px solid transparent;
  18114. transform: translate(-50%, -50%);
  18115. border-left: 6px solid var(--f7-treeview-toggle-color);
  18116. }
  18117. .treeview-toggle-hidden {
  18118. opacity: 0;
  18119. pointer-events: none;
  18120. visibility: hidden;
  18121. }
  18122. .treeview-preloader {
  18123. --f7-preloader-size: var(--f7-treeview-toggle-size);
  18124. margin-right: calc(-1 * var(--f7-treeview-toggle-size));
  18125. }
  18126. .treeview-item-children {
  18127. display: none;
  18128. }
  18129. .treeview-item-opened > .treeview-item-children {
  18130. display: block;
  18131. }
  18132. .treeview-item-opened > .treeview-item-root .treeview-toggle:after {
  18133. transform: translate(-50%, -50%) rotate(90deg);
  18134. }
  18135. a.treeview-item-root {
  18136. color: var(--f7-treeview-label-text-color);
  18137. }
  18138. .treeview-item-selectable > .treeview-item-root,
  18139. .treeview-item-selectable.treeview-item-root {
  18140. cursor: pointer;
  18141. transition-duration: 150ms;
  18142. }
  18143. a.treeview-item-root {
  18144. transition-duration: 150ms;
  18145. }
  18146. a.treeview-item-root.active-state {
  18147. background: var(--f7-treeview-link-pressed-bg-color);
  18148. }
  18149. .treeview-item-toggle > .treeview-item-root,
  18150. .treeview-item-toggle.treeview-item-root {
  18151. cursor: pointer;
  18152. }
  18153. .treeview-item-selected > .treeview-item-root,
  18154. .treeview-item-selected.treeview-item-root {
  18155. background: var(--f7-treeview-selectable-selected-bg-color, rgba(var(--f7-theme-color-rgb), 0.2));
  18156. }
  18157. .treeview-item .treeview-item .treeview-item-root {
  18158. padding-left: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 1);
  18159. }
  18160. .treeview-item .treeview-item .treeview-item .treeview-item-root {
  18161. padding-left: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 2);
  18162. }
  18163. .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
  18164. padding-left: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 3);
  18165. }
  18166. .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
  18167. padding-left: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 4);
  18168. }
  18169. .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
  18170. padding-left: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 5);
  18171. }
  18172. .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
  18173. padding-left: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 6);
  18174. }
  18175. .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
  18176. padding-left: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 7);
  18177. }
  18178. .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
  18179. padding-left: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 8);
  18180. }
  18181. .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
  18182. padding-left: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 9);
  18183. }
  18184. .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 {
  18185. padding-left: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 10);
  18186. }
  18187. .aurora .treeview-toggle:hover {
  18188. background-color: var(--f7-treeview-toggle-hover-bg-color);
  18189. }
  18190. .aurora .treeview-toggle.active-state {
  18191. background-color: var(--f7-treeview-toggle-pressed-bg-color);
  18192. }
  18193. .aurora .treeview-item-selectable > .treeview-item-root:hover,
  18194. .aurora .treeview-item-selectable.treeview-item-root:hover {
  18195. background: var(--f7-treeview-selectable-hover-bg-color);
  18196. }
  18197. .aurora a.treeview-item-root:hover {
  18198. background: var(--f7-treeview-link-hover-bg-color);
  18199. }
  18200. .aurora a.treeview-item-root.active-state {
  18201. background: var(--f7-treeview-link-pressed-bg-color);
  18202. }
  18203. .aurora .treeview-item-selected > .treeview-item-root:hover,
  18204. .aurora .treeview-item-selected.treeview-item-root:hover {
  18205. background: var(--f7-treeview-selectable-selected-bg-color, rgba(var(--f7-theme-color-rgb), 0.2));
  18206. }
  18207. iframe#viAd {
  18208. z-index: 12900 !important;
  18209. background: #000 !important;
  18210. }
  18211. .vi-overlay {
  18212. background: rgba(0, 0, 0, 0.85);
  18213. z-index: 13100;
  18214. position: absolute;
  18215. left: 0%;
  18216. top: 0%;
  18217. width: 100%;
  18218. height: 100%;
  18219. border-radius: 3px;
  18220. display: flex;
  18221. justify-content: center;
  18222. flex-direction: column;
  18223. align-items: center;
  18224. align-content: center;
  18225. text-align: center;
  18226. -webkit-user-select: none;
  18227. -moz-user-select: none;
  18228. -ms-user-select: none;
  18229. user-select: none;
  18230. }
  18231. @supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  18232. .vi-overlay {
  18233. background: rgba(0, 0, 0, 0.65);
  18234. -webkit-backdrop-filter: blur(10px);
  18235. backdrop-filter: blur(10px);
  18236. }
  18237. }
  18238. .vi-overlay .vi-overlay-text {
  18239. text-align: center;
  18240. color: #fff;
  18241. max-width: 80%;
  18242. }
  18243. .vi-overlay .vi-overlay-text + .vi-overlay-play-button {
  18244. margin-top: 15px;
  18245. }
  18246. .vi-overlay .vi-overlay-play-button {
  18247. width: 44px;
  18248. height: 44px;
  18249. border-radius: 50%;
  18250. border: 2px solid #fff;
  18251. position: relative;
  18252. }
  18253. .vi-overlay .vi-overlay-play-button.active-state {
  18254. opacity: 0.55;
  18255. }
  18256. .vi-overlay .vi-overlay-play-button:before {
  18257. content: '';
  18258. width: 0;
  18259. height: 0;
  18260. border-top: 8px solid transparent;
  18261. border-bottom: 8px solid transparent;
  18262. border-left: 14px solid #fff;
  18263. position: absolute;
  18264. left: 50%;
  18265. top: 50%;
  18266. margin-left: 2px;
  18267. transform: translate(-50%, -50%);
  18268. }
  18269. /* === Elevation === */
  18270. :root {
  18271. --f7-elevation-0: 0px 0px 0px 0px rgba(0, 0, 0, 0);
  18272. --f7-elevation-1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
  18273. 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
  18274. 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  18275. --f7-elevation-2: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
  18276. 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
  18277. 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  18278. --f7-elevation-3: 0px 3px 3px -2px rgba(0, 0, 0, 0.2),
  18279. 0px 3px 4px 0px rgba(0, 0, 0, 0.14),
  18280. 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  18281. --f7-elevation-4: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
  18282. 0px 4px 5px 0px rgba(0, 0, 0, 0.14),
  18283. 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  18284. --f7-elevation-5: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
  18285. 0px 5px 8px 0px rgba(0, 0, 0, 0.14),
  18286. 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  18287. --f7-elevation-6: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
  18288. 0px 6px 10px 0px rgba(0, 0, 0, 0.14),
  18289. 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  18290. --f7-elevation-7: 0px 4px 5px -2px rgba(0, 0, 0, 0.2),
  18291. 0px 7px 10px 1px rgba(0, 0, 0, 0.14),
  18292. 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  18293. --f7-elevation-8: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
  18294. 0px 8px 10px 1px rgba(0, 0, 0, 0.14),
  18295. 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  18296. --f7-elevation-9: 0px 5px 6px -3px rgba(0, 0, 0, 0.2),
  18297. 0px 9px 12px 1px rgba(0, 0, 0, 0.14),
  18298. 0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  18299. --f7-elevation-10: 0px 6px 6px -3px rgba(0, 0, 0, 0.2),
  18300. 0px 10px 14px 1px rgba(0, 0, 0, 0.14),
  18301. 0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  18302. --f7-elevation-11: 0px 6px 7px -4px rgba(0, 0, 0, 0.2),
  18303. 0px 11px 15px 1px rgba(0, 0, 0, 0.14),
  18304. 0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  18305. --f7-elevation-12: 0px 7px 8px -4px rgba(0, 0, 0, 0.2),
  18306. 0px 12px 17px 2px rgba(0, 0, 0, 0.14),
  18307. 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  18308. --f7-elevation-13: 0px 7px 8px -4px rgba(0, 0, 0, 0.2),
  18309. 0px 13px 19px 2px rgba(0, 0, 0, 0.14),
  18310. 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  18311. --f7-elevation-14: 0px 7px 9px -4px rgba(0, 0, 0, 0.2),
  18312. 0px 14px 21px 2px rgba(0, 0, 0, 0.14),
  18313. 0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  18314. --f7-elevation-15: 0px 8px 9px -5px rgba(0, 0, 0, 0.2),
  18315. 0px 15px 22px 2px rgba(0, 0, 0, 0.14),
  18316. 0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  18317. --f7-elevation-16: 0px 8px 10px -5px rgba(0, 0, 0, 0.2),
  18318. 0px 16px 24px 2px rgba(0, 0, 0, 0.14),
  18319. 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  18320. --f7-elevation-17: 0px 8px 11px -5px rgba(0, 0, 0, 0.2),
  18321. 0px 17px 26px 2px rgba(0, 0, 0, 0.14),
  18322. 0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  18323. --f7-elevation-18: 0px 9px 11px -5px rgba(0, 0, 0, 0.2),
  18324. 0px 18px 28px 2px rgba(0, 0, 0, 0.14),
  18325. 0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  18326. --f7-elevation-19: 0px 9px 12px -6px rgba(0, 0, 0, 0.2),
  18327. 0px 19px 29px 2px rgba(0, 0, 0, 0.14),
  18328. 0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  18329. --f7-elevation-20: 0px 10px 13px -6px rgba(0, 0, 0, 0.2),
  18330. 0px 20px 31px 3px rgba(0, 0, 0, 0.14),
  18331. 0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  18332. --f7-elevation-21: 0px 10px 13px -6px rgba(0, 0, 0, 0.2),
  18333. 0px 21px 33px 3px rgba(0, 0, 0, 0.14),
  18334. 0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  18335. --f7-elevation-22: 0px 10px 14px -6px rgba(0, 0, 0, 0.2),
  18336. 0px 22px 35px 3px rgba(0, 0, 0, 0.14),
  18337. 0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  18338. --f7-elevation-23: 0px 11px 14px -7px rgba(0, 0, 0, 0.2),
  18339. 0px 23px 36px 3px rgba(0, 0, 0, 0.14),
  18340. 0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  18341. --f7-elevation-24: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),
  18342. 0px 24px 38px 3px rgba(0, 0, 0, 0.14),
  18343. 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  18344. }
  18345. .elevation-0 {
  18346. box-shadow: var(--f7-elevation-0) !important;
  18347. }
  18348. .elevation-1 {
  18349. box-shadow: var(--f7-elevation-1) !important;
  18350. }
  18351. .elevation-2 {
  18352. box-shadow: var(--f7-elevation-2) !important;
  18353. }
  18354. .elevation-3 {
  18355. box-shadow: var(--f7-elevation-3) !important;
  18356. }
  18357. .elevation-4 {
  18358. box-shadow: var(--f7-elevation-4) !important;
  18359. }
  18360. .elevation-5 {
  18361. box-shadow: var(--f7-elevation-5) !important;
  18362. }
  18363. .elevation-6 {
  18364. box-shadow: var(--f7-elevation-6) !important;
  18365. }
  18366. .elevation-7 {
  18367. box-shadow: var(--f7-elevation-7) !important;
  18368. }
  18369. .elevation-8 {
  18370. box-shadow: var(--f7-elevation-8) !important;
  18371. }
  18372. .elevation-9 {
  18373. box-shadow: var(--f7-elevation-9) !important;
  18374. }
  18375. .elevation-10 {
  18376. box-shadow: var(--f7-elevation-10) !important;
  18377. }
  18378. .elevation-11 {
  18379. box-shadow: var(--f7-elevation-11) !important;
  18380. }
  18381. .elevation-12 {
  18382. box-shadow: var(--f7-elevation-12) !important;
  18383. }
  18384. .elevation-13 {
  18385. box-shadow: var(--f7-elevation-13) !important;
  18386. }
  18387. .elevation-14 {
  18388. box-shadow: var(--f7-elevation-14) !important;
  18389. }
  18390. .elevation-15 {
  18391. box-shadow: var(--f7-elevation-15) !important;
  18392. }
  18393. .elevation-16 {
  18394. box-shadow: var(--f7-elevation-16) !important;
  18395. }
  18396. .elevation-17 {
  18397. box-shadow: var(--f7-elevation-17) !important;
  18398. }
  18399. .elevation-18 {
  18400. box-shadow: var(--f7-elevation-18) !important;
  18401. }
  18402. .elevation-19 {
  18403. box-shadow: var(--f7-elevation-19) !important;
  18404. }
  18405. .elevation-20 {
  18406. box-shadow: var(--f7-elevation-20) !important;
  18407. }
  18408. .elevation-21 {
  18409. box-shadow: var(--f7-elevation-21) !important;
  18410. }
  18411. .elevation-22 {
  18412. box-shadow: var(--f7-elevation-22) !important;
  18413. }
  18414. .elevation-23 {
  18415. box-shadow: var(--f7-elevation-23) !important;
  18416. }
  18417. .elevation-24 {
  18418. box-shadow: var(--f7-elevation-24) !important;
  18419. }
  18420. .device-desktop .elevation-hover-0:hover {
  18421. box-shadow: var(--f7-elevation-0) !important;
  18422. }
  18423. .device-desktop .elevation-hover-1:hover {
  18424. box-shadow: var(--f7-elevation-1) !important;
  18425. }
  18426. .device-desktop .elevation-hover-2:hover {
  18427. box-shadow: var(--f7-elevation-2) !important;
  18428. }
  18429. .device-desktop .elevation-hover-3:hover {
  18430. box-shadow: var(--f7-elevation-3) !important;
  18431. }
  18432. .device-desktop .elevation-hover-4:hover {
  18433. box-shadow: var(--f7-elevation-4) !important;
  18434. }
  18435. .device-desktop .elevation-hover-5:hover {
  18436. box-shadow: var(--f7-elevation-5) !important;
  18437. }
  18438. .device-desktop .elevation-hover-6:hover {
  18439. box-shadow: var(--f7-elevation-6) !important;
  18440. }
  18441. .device-desktop .elevation-hover-7:hover {
  18442. box-shadow: var(--f7-elevation-7) !important;
  18443. }
  18444. .device-desktop .elevation-hover-8:hover {
  18445. box-shadow: var(--f7-elevation-8) !important;
  18446. }
  18447. .device-desktop .elevation-hover-9:hover {
  18448. box-shadow: var(--f7-elevation-9) !important;
  18449. }
  18450. .device-desktop .elevation-hover-10:hover {
  18451. box-shadow: var(--f7-elevation-10) !important;
  18452. }
  18453. .device-desktop .elevation-hover-11:hover {
  18454. box-shadow: var(--f7-elevation-11) !important;
  18455. }
  18456. .device-desktop .elevation-hover-12:hover {
  18457. box-shadow: var(--f7-elevation-12) !important;
  18458. }
  18459. .device-desktop .elevation-hover-13:hover {
  18460. box-shadow: var(--f7-elevation-13) !important;
  18461. }
  18462. .device-desktop .elevation-hover-14:hover {
  18463. box-shadow: var(--f7-elevation-14) !important;
  18464. }
  18465. .device-desktop .elevation-hover-15:hover {
  18466. box-shadow: var(--f7-elevation-15) !important;
  18467. }
  18468. .device-desktop .elevation-hover-16:hover {
  18469. box-shadow: var(--f7-elevation-16) !important;
  18470. }
  18471. .device-desktop .elevation-hover-17:hover {
  18472. box-shadow: var(--f7-elevation-17) !important;
  18473. }
  18474. .device-desktop .elevation-hover-18:hover {
  18475. box-shadow: var(--f7-elevation-18) !important;
  18476. }
  18477. .device-desktop .elevation-hover-19:hover {
  18478. box-shadow: var(--f7-elevation-19) !important;
  18479. }
  18480. .device-desktop .elevation-hover-20:hover {
  18481. box-shadow: var(--f7-elevation-20) !important;
  18482. }
  18483. .device-desktop .elevation-hover-21:hover {
  18484. box-shadow: var(--f7-elevation-21) !important;
  18485. }
  18486. .device-desktop .elevation-hover-22:hover {
  18487. box-shadow: var(--f7-elevation-22) !important;
  18488. }
  18489. .device-desktop .elevation-hover-23:hover {
  18490. box-shadow: var(--f7-elevation-23) !important;
  18491. }
  18492. .device-desktop .elevation-hover-24:hover {
  18493. box-shadow: var(--f7-elevation-24) !important;
  18494. }
  18495. .active-state.elevation-pressed-0,
  18496. .device-desktop .active-state.elevation-pressed-0 {
  18497. box-shadow: var(--f7-elevation-0) !important;
  18498. }
  18499. .active-state.elevation-pressed-1,
  18500. .device-desktop .active-state.elevation-pressed-1 {
  18501. box-shadow: var(--f7-elevation-1) !important;
  18502. }
  18503. .active-state.elevation-pressed-2,
  18504. .device-desktop .active-state.elevation-pressed-2 {
  18505. box-shadow: var(--f7-elevation-2) !important;
  18506. }
  18507. .active-state.elevation-pressed-3,
  18508. .device-desktop .active-state.elevation-pressed-3 {
  18509. box-shadow: var(--f7-elevation-3) !important;
  18510. }
  18511. .active-state.elevation-pressed-4,
  18512. .device-desktop .active-state.elevation-pressed-4 {
  18513. box-shadow: var(--f7-elevation-4) !important;
  18514. }
  18515. .active-state.elevation-pressed-5,
  18516. .device-desktop .active-state.elevation-pressed-5 {
  18517. box-shadow: var(--f7-elevation-5) !important;
  18518. }
  18519. .active-state.elevation-pressed-6,
  18520. .device-desktop .active-state.elevation-pressed-6 {
  18521. box-shadow: var(--f7-elevation-6) !important;
  18522. }
  18523. .active-state.elevation-pressed-7,
  18524. .device-desktop .active-state.elevation-pressed-7 {
  18525. box-shadow: var(--f7-elevation-7) !important;
  18526. }
  18527. .active-state.elevation-pressed-8,
  18528. .device-desktop .active-state.elevation-pressed-8 {
  18529. box-shadow: var(--f7-elevation-8) !important;
  18530. }
  18531. .active-state.elevation-pressed-9,
  18532. .device-desktop .active-state.elevation-pressed-9 {
  18533. box-shadow: var(--f7-elevation-9) !important;
  18534. }
  18535. .active-state.elevation-pressed-10,
  18536. .device-desktop .active-state.elevation-pressed-10 {
  18537. box-shadow: var(--f7-elevation-10) !important;
  18538. }
  18539. .active-state.elevation-pressed-11,
  18540. .device-desktop .active-state.elevation-pressed-11 {
  18541. box-shadow: var(--f7-elevation-11) !important;
  18542. }
  18543. .active-state.elevation-pressed-12,
  18544. .device-desktop .active-state.elevation-pressed-12 {
  18545. box-shadow: var(--f7-elevation-12) !important;
  18546. }
  18547. .active-state.elevation-pressed-13,
  18548. .device-desktop .active-state.elevation-pressed-13 {
  18549. box-shadow: var(--f7-elevation-13) !important;
  18550. }
  18551. .active-state.elevation-pressed-14,
  18552. .device-desktop .active-state.elevation-pressed-14 {
  18553. box-shadow: var(--f7-elevation-14) !important;
  18554. }
  18555. .active-state.elevation-pressed-15,
  18556. .device-desktop .active-state.elevation-pressed-15 {
  18557. box-shadow: var(--f7-elevation-15) !important;
  18558. }
  18559. .active-state.elevation-pressed-16,
  18560. .device-desktop .active-state.elevation-pressed-16 {
  18561. box-shadow: var(--f7-elevation-16) !important;
  18562. }
  18563. .active-state.elevation-pressed-17,
  18564. .device-desktop .active-state.elevation-pressed-17 {
  18565. box-shadow: var(--f7-elevation-17) !important;
  18566. }
  18567. .active-state.elevation-pressed-18,
  18568. .device-desktop .active-state.elevation-pressed-18 {
  18569. box-shadow: var(--f7-elevation-18) !important;
  18570. }
  18571. .active-state.elevation-pressed-19,
  18572. .device-desktop .active-state.elevation-pressed-19 {
  18573. box-shadow: var(--f7-elevation-19) !important;
  18574. }
  18575. .active-state.elevation-pressed-20,
  18576. .device-desktop .active-state.elevation-pressed-20 {
  18577. box-shadow: var(--f7-elevation-20) !important;
  18578. }
  18579. .active-state.elevation-pressed-21,
  18580. .device-desktop .active-state.elevation-pressed-21 {
  18581. box-shadow: var(--f7-elevation-21) !important;
  18582. }
  18583. .active-state.elevation-pressed-22,
  18584. .device-desktop .active-state.elevation-pressed-22 {
  18585. box-shadow: var(--f7-elevation-22) !important;
  18586. }
  18587. .active-state.elevation-pressed-23,
  18588. .device-desktop .active-state.elevation-pressed-23 {
  18589. box-shadow: var(--f7-elevation-23) !important;
  18590. }
  18591. .active-state.elevation-pressed-24,
  18592. .device-desktop .active-state.elevation-pressed-24 {
  18593. box-shadow: var(--f7-elevation-24) !important;
  18594. }
  18595. .elevation-transition-100 {
  18596. transition-duration: 100ms;
  18597. transition-property: box-shadow;
  18598. }
  18599. .elevation-transition,
  18600. .elevation-transition-200 {
  18601. transition-duration: 200ms;
  18602. transition-property: box-shadow;
  18603. }
  18604. .elevation-transition-300 {
  18605. transition-duration: 300ms;
  18606. transition-property: box-shadow;
  18607. }
  18608. .elevation-transition-400 {
  18609. transition-duration: 400ms;
  18610. transition-property: box-shadow;
  18611. }
  18612. .elevation-transition-500 {
  18613. transition-duration: 500ms;
  18614. transition-property: box-shadow;
  18615. }
  18616. /* === Typography === */
  18617. .ios {
  18618. --f7-typography-padding: 15px;
  18619. --f7-typography-margin: 15px;
  18620. }
  18621. .md {
  18622. --f7-typography-padding: 16px;
  18623. --f7-typography-margin: 16px;
  18624. }
  18625. .aurora {
  18626. --f7-typography-padding: 15px;
  18627. --f7-typography-margin: 15px;
  18628. }
  18629. .display-flex {
  18630. display: flex !important;
  18631. }
  18632. .display-block {
  18633. display: block !important;
  18634. }
  18635. .display-inline-flex {
  18636. display: inline-flex !important;
  18637. }
  18638. .display-inline-block {
  18639. display: inline-block !important;
  18640. }
  18641. .display-inline {
  18642. display: inline !important;
  18643. }
  18644. .display-none {
  18645. display: none !important;
  18646. }
  18647. .flex-shrink-0 {
  18648. flex-shrink: 0 !important;
  18649. }
  18650. .flex-shrink-1 {
  18651. flex-shrink: 1 !important;
  18652. }
  18653. .flex-shrink-2 {
  18654. flex-shrink: 2 !important;
  18655. }
  18656. .flex-shrink-3 {
  18657. flex-shrink: 3 !important;
  18658. }
  18659. .flex-shrink-4 {
  18660. flex-shrink: 4 !important;
  18661. }
  18662. .flex-shrink-5 {
  18663. flex-shrink: 5 !important;
  18664. }
  18665. .flex-shrink-6 {
  18666. flex-shrink: 6 !important;
  18667. }
  18668. .flex-shrink-7 {
  18669. flex-shrink: 7 !important;
  18670. }
  18671. .flex-shrink-8 {
  18672. flex-shrink: 8 !important;
  18673. }
  18674. .flex-shrink-9 {
  18675. flex-shrink: 9 !important;
  18676. }
  18677. .flex-shrink-10 {
  18678. flex-shrink: 10 !important;
  18679. }
  18680. .flex-direction-row {
  18681. flex-direction: row !important;
  18682. }
  18683. .flex-direction-row-reverse {
  18684. flex-direction: row-reverse !important;
  18685. }
  18686. .flex-direction-column {
  18687. flex-direction: column !important;
  18688. }
  18689. .flex-direction-column-reverse {
  18690. flex-direction: column-reverse !important;
  18691. }
  18692. .justify-content-flex-start {
  18693. justify-content: flex-start !important;
  18694. }
  18695. .justify-content-center {
  18696. justify-content: center !important;
  18697. }
  18698. .justify-content-flex-end {
  18699. justify-content: flex-end !important;
  18700. }
  18701. .justify-content-space-between {
  18702. justify-content: space-between !important;
  18703. }
  18704. .justify-content-space-around {
  18705. justify-content: space-around !important;
  18706. }
  18707. .justify-content-space-evenly {
  18708. justify-content: space-evenly !important;
  18709. }
  18710. .justify-content-stretch {
  18711. justify-content: stretch !important;
  18712. }
  18713. .justify-content-start {
  18714. justify-content: start !important;
  18715. }
  18716. .justify-content-end {
  18717. justify-content: end !important;
  18718. }
  18719. .justify-content-left {
  18720. justify-content: left !important;
  18721. }
  18722. .justify-content-right {
  18723. justify-content: right !important;
  18724. }
  18725. .align-content-flex-start {
  18726. align-content: flex-start !important;
  18727. }
  18728. .align-content-flex-end {
  18729. align-content: flex-end !important;
  18730. }
  18731. .align-content-center {
  18732. align-content: center !important;
  18733. }
  18734. .align-content-space-between {
  18735. align-content: space-between !important;
  18736. }
  18737. .align-content-space-around {
  18738. align-content: space-around !important;
  18739. }
  18740. .align-content-stretch {
  18741. align-content: stretch !important;
  18742. }
  18743. .align-items-baseline {
  18744. align-items: baseline !important;
  18745. }
  18746. .align-items-flex-start {
  18747. align-items: flex-start !important;
  18748. }
  18749. .align-items-flex-end {
  18750. align-items: flex-end !important;
  18751. }
  18752. .align-items-center {
  18753. align-items: center !important;
  18754. }
  18755. .align-items-stretch {
  18756. align-items: stretch !important;
  18757. }
  18758. .align-self-flex-start {
  18759. align-self: flex-start !important;
  18760. }
  18761. .align-self-flex-end {
  18762. align-self: flex-end !important;
  18763. }
  18764. .align-self-center {
  18765. align-self: center !important;
  18766. }
  18767. .align-self-stretch {
  18768. align-self: stretch !important;
  18769. }
  18770. .text-align-left {
  18771. text-align: left !important;
  18772. }
  18773. .text-align-center {
  18774. text-align: center !important;
  18775. }
  18776. .text-align-right {
  18777. text-align: right !important;
  18778. }
  18779. .text-align-justify {
  18780. text-align: justify !important;
  18781. }
  18782. .float-left {
  18783. float: left !important;
  18784. }
  18785. .float-right {
  18786. float: right !important;
  18787. }
  18788. .float-none {
  18789. float: none !important;
  18790. }
  18791. .vertical-align-bottom {
  18792. vertical-align: bottom !important;
  18793. }
  18794. .vertical-align-middle {
  18795. vertical-align: middle !important;
  18796. }
  18797. .vertical-align-top {
  18798. vertical-align: top !important;
  18799. }
  18800. .no-padding {
  18801. padding: 0 !important;
  18802. }
  18803. .no-padding-left {
  18804. padding-left: 0 !important;
  18805. }
  18806. .no-padding-right {
  18807. padding-right: 0 !important;
  18808. }
  18809. .no-padding-horizontal {
  18810. padding-left: 0 !important;
  18811. padding-right: 0 !important;
  18812. }
  18813. .no-padding-top {
  18814. padding-top: 0 !important;
  18815. }
  18816. .no-padding-bottom {
  18817. padding-bottom: 0 !important;
  18818. }
  18819. .no-padding-vertical {
  18820. padding-top: 0 !important;
  18821. padding-bottom: 0 !important;
  18822. }
  18823. .no-margin {
  18824. margin: 0 !important;
  18825. }
  18826. .no-margin-left {
  18827. margin-left: 0 !important;
  18828. }
  18829. .no-margin-right {
  18830. margin-right: 0 !important;
  18831. }
  18832. .no-margin-horizontal {
  18833. margin-left: 0 !important;
  18834. margin-right: 0 !important;
  18835. }
  18836. .no-margin-top {
  18837. margin-top: 0 !important;
  18838. }
  18839. .no-margin-bottom {
  18840. margin-bottom: 0 !important;
  18841. }
  18842. .no-margin-vertical {
  18843. margin-top: 0 !important;
  18844. margin-bottom: 0 !important;
  18845. }
  18846. .width-auto {
  18847. width: auto !important;
  18848. }
  18849. .width-100 {
  18850. width: 100% !important;
  18851. }
  18852. .padding {
  18853. padding: var(--f7-typography-padding) !important;
  18854. }
  18855. .padding-half {
  18856. padding: calc(var(--f7-typography-padding) / 2) !important;
  18857. }
  18858. .padding-top {
  18859. padding-top: var(--f7-typography-padding) !important;
  18860. }
  18861. .padding-top-half {
  18862. padding-top: calc(var(--f7-typography-padding) / 2) !important;
  18863. }
  18864. .padding-bottom {
  18865. padding-bottom: var(--f7-typography-padding) !important;
  18866. }
  18867. .padding-bottom-half {
  18868. padding-bottom: calc(var(--f7-typography-padding) / 2) !important;
  18869. }
  18870. .padding-left {
  18871. padding-left: var(--f7-typography-padding) !important;
  18872. }
  18873. .padding-left-half {
  18874. padding-left: calc(var(--f7-typography-padding) / 2) !important;
  18875. }
  18876. .padding-right {
  18877. padding-right: var(--f7-typography-padding) !important;
  18878. }
  18879. .padding-right-half {
  18880. padding-right: calc(var(--f7-typography-padding) / 2) !important;
  18881. }
  18882. .padding-vertical {
  18883. padding-top: var(--f7-typography-padding) !important;
  18884. padding-bottom: var(--f7-typography-padding) !important;
  18885. }
  18886. .padding-vertical-half {
  18887. padding-top: calc(var(--f7-typography-padding) / 2) !important;
  18888. padding-bottom: calc(var(--f7-typography-padding) / 2) !important;
  18889. }
  18890. .padding-horizontal {
  18891. padding-left: var(--f7-typography-padding) !important;
  18892. padding-right: var(--f7-typography-padding) !important;
  18893. }
  18894. .padding-horizontal-half {
  18895. padding-left: calc(var(--f7-typography-padding) / 2) !important;
  18896. padding-right: calc(var(--f7-typography-padding) / 2) !important;
  18897. }
  18898. .margin {
  18899. margin: var(--f7-typography-margin) !important;
  18900. }
  18901. .margin-half {
  18902. margin: calc(var(--f7-typography-margin) / 2) !important;
  18903. }
  18904. .margin-top {
  18905. margin-top: var(--f7-typography-margin) !important;
  18906. }
  18907. .margin-top-half {
  18908. margin-top: calc(var(--f7-typography-margin) / 2) !important;
  18909. }
  18910. .margin-bottom {
  18911. margin-bottom: var(--f7-typography-margin) !important;
  18912. }
  18913. .margin-bottom-half {
  18914. margin-bottom: calc(var(--f7-typography-margin) / 2) !important;
  18915. }
  18916. .margin-left {
  18917. margin-left: var(--f7-typography-margin) !important;
  18918. }
  18919. .margin-left-half {
  18920. margin-left: calc(var(--f7-typography-margin) / 2) !important;
  18921. }
  18922. .margin-right {
  18923. margin-right: var(--f7-typography-margin) !important;
  18924. }
  18925. .margin-right-half {
  18926. margin-right: calc(var(--f7-typography-margin) / 2) !important;
  18927. }
  18928. .margin-vertical {
  18929. margin-top: var(--f7-typography-margin) !important;
  18930. margin-bottom: var(--f7-typography-margin) !important;
  18931. }
  18932. .margin-vertical-half {
  18933. margin-top: calc(var(--f7-typography-margin) / 2) !important;
  18934. margin-bottom: calc(var(--f7-typography-margin) / 2) !important;
  18935. }
  18936. .margin-horizontal {
  18937. margin-left: var(--f7-typography-margin) !important;
  18938. margin-right: var(--f7-typography-margin) !important;
  18939. }
  18940. .margin-horizontal-half {
  18941. margin-left: calc(var(--f7-typography-margin) / 2) !important;
  18942. margin-right: calc(var(--f7-typography-margin) / 2) !important;
  18943. }
  18944. [class*="text-color-"] {
  18945. color: var(--f7-theme-color-text-color) !important;
  18946. }
  18947. [class*="bg-color-"] {
  18948. background-color: var(--f7-theme-color-bg-color) !important;
  18949. }
  18950. [class*="border-color-"] {
  18951. border-color: var(--f7-theme-color-border-color) !important;
  18952. }