暂无描述

styled.css 141KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263326432653266326732683269327032713272327332743275327632773278327932803281328232833284328532863287328832893290329132923293329432953296329732983299330033013302330333043305330633073308330933103311331233133314331533163317331833193320332133223323332433253326332733283329333033313332333333343335333633373338333933403341334233433344334533463347334833493350335133523353335433553356335733583359336033613362336333643365336633673368336933703371337233733374337533763377337833793380338133823383338433853386338733883389339033913392339333943395339633973398339934003401340234033404340534063407340834093410341134123413341434153416341734183419342034213422342334243425342634273428342934303431343234333434343534363437343834393440344134423443344434453446344734483449345034513452345334543455345634573458345934603461346234633464346534663467346834693470347134723473347434753476347734783479348034813482348334843485348634873488348934903491349234933494349534963497349834993500350135023503350435053506350735083509351035113512351335143515351635173518351935203521352235233524352535263527352835293530353135323533353435353536353735383539354035413542354335443545354635473548354935503551355235533554355535563557355835593560356135623563356435653566356735683569357035713572357335743575357635773578357935803581358235833584358535863587358835893590359135923593359435953596359735983599360036013602360336043605360636073608360936103611361236133614361536163617361836193620362136223623362436253626362736283629363036313632363336343635363636373638363936403641364236433644364536463647364836493650365136523653365436553656365736583659366036613662366336643665366636673668366936703671367236733674367536763677367836793680368136823683368436853686368736883689369036913692369336943695369636973698369937003701370237033704370537063707370837093710371137123713371437153716371737183719372037213722372337243725372637273728372937303731373237333734373537363737373837393740374137423743374437453746374737483749375037513752375337543755375637573758375937603761376237633764376537663767376837693770377137723773377437753776377737783779378037813782378337843785378637873788378937903791379237933794379537963797379837993800380138023803380438053806380738083809381038113812381338143815381638173818381938203821382238233824382538263827382838293830383138323833383438353836383738383839384038413842384338443845384638473848384938503851385238533854385538563857385838593860386138623863386438653866386738683869387038713872387338743875387638773878387938803881388238833884388538863887388838893890389138923893389438953896389738983899390039013902390339043905390639073908390939103911391239133914391539163917391839193920392139223923392439253926392739283929393039313932393339343935393639373938393939403941394239433944394539463947394839493950395139523953395439553956395739583959396039613962396339643965396639673968396939703971397239733974397539763977397839793980398139823983398439853986398739883989399039913992399339943995399639973998399940004001400240034004400540064007400840094010401140124013401440154016401740184019402040214022402340244025402640274028402940304031403240334034403540364037403840394040404140424043404440454046404740484049405040514052405340544055405640574058405940604061406240634064406540664067406840694070407140724073407440754076407740784079408040814082408340844085408640874088408940904091409240934094409540964097409840994100410141024103410441054106410741084109411041114112411341144115411641174118411941204121412241234124412541264127412841294130413141324133413441354136413741384139414041414142414341444145414641474148414941504151415241534154415541564157415841594160416141624163416441654166416741684169417041714172417341744175417641774178417941804181418241834184418541864187418841894190419141924193419441954196419741984199420042014202420342044205420642074208420942104211421242134214421542164217421842194220422142224223422442254226422742284229423042314232423342344235423642374238423942404241424242434244424542464247424842494250425142524253425442554256425742584259426042614262426342644265426642674268426942704271427242734274427542764277427842794280428142824283428442854286428742884289429042914292429342944295429642974298429943004301430243034304430543064307430843094310431143124313431443154316431743184319432043214322432343244325432643274328432943304331433243334334433543364337433843394340434143424343434443454346434743484349435043514352435343544355435643574358435943604361436243634364436543664367436843694370437143724373437443754376437743784379438043814382438343844385438643874388438943904391439243934394439543964397439843994400440144024403440444054406440744084409441044114412441344144415441644174418441944204421442244234424442544264427442844294430443144324433443444354436443744384439444044414442444344444445444644474448444944504451445244534454445544564457445844594460446144624463446444654466446744684469447044714472447344744475447644774478447944804481448244834484448544864487448844894490449144924493449444954496449744984499450045014502450345044505450645074508450945104511451245134514451545164517451845194520452145224523452445254526452745284529453045314532453345344535453645374538453945404541454245434544454545464547454845494550455145524553455445554556455745584559456045614562456345644565456645674568456945704571457245734574457545764577457845794580458145824583458445854586458745884589459045914592459345944595459645974598459946004601460246034604460546064607460846094610461146124613461446154616461746184619462046214622462346244625462646274628462946304631463246334634463546364637463846394640464146424643464446454646464746484649465046514652465346544655465646574658465946604661466246634664466546664667466846694670467146724673467446754676467746784679468046814682468346844685468646874688468946904691469246934694469546964697469846994700470147024703470447054706470747084709471047114712471347144715471647174718471947204721472247234724472547264727472847294730473147324733473447354736473747384739474047414742474347444745474647474748474947504751475247534754475547564757475847594760476147624763476447654766476747684769477047714772477347744775477647774778477947804781478247834784478547864787478847894790479147924793479447954796479747984799480048014802480348044805480648074808480948104811481248134814481548164817481848194820482148224823482448254826
  1. .alert {
  2. display: flex;
  3. width: 100%;
  4. flex-direction: column;
  5. align-items: center;
  6. justify-content: space-between;
  7. gap: 1rem
  8. }
  9. .alert > :not([hidden]) ~ :not([hidden]) {
  10. --tw-space-y-reverse: 0;
  11. margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  12. margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
  13. }
  14. @media (min-width: 768px) {
  15. .alert {
  16. flex-direction: row
  17. }
  18. .alert > :not([hidden]) ~ :not([hidden]) {
  19. --tw-space-y-reverse: 0;
  20. margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  21. margin-bottom: calc(0px * var(--tw-space-y-reverse))
  22. }
  23. }
  24. .alert > :where(*) {
  25. display: flex;
  26. align-items: center;
  27. gap: 0.5rem
  28. }
  29. .artboard {
  30. width: 100%
  31. }
  32. .avatar {
  33. position: relative;
  34. display: inline-flex
  35. }
  36. .avatar > div {
  37. display: block;
  38. aspect-ratio: 1 / 1;
  39. overflow: hidden
  40. }
  41. .avatar img {
  42. height: 100%;
  43. width: 100%;
  44. object-fit: cover
  45. }
  46. .avatar.placeholder > div {
  47. display: flex;
  48. align-items: center;
  49. justify-content: center
  50. }
  51. .badge {
  52. display: inline-flex;
  53. align-items: center;
  54. justify-content: center;
  55. transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  56. transition-duration: 200ms;
  57. transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  58. height: 1.25rem;
  59. font-size: 0.875rem;
  60. line-height: 1.25rem;
  61. width: fit-content;
  62. padding-left: 0.563rem;
  63. padding-right: 0.563rem
  64. }
  65. .btm-nav {
  66. position: fixed;
  67. bottom: 0px;
  68. left: 0px;
  69. right: 0px;
  70. display: flex;
  71. width: 100%;
  72. flex-direction: row;
  73. align-items: center;
  74. justify-content: space-around;
  75. padding-bottom: env(safe-area-inset-bottom)
  76. }
  77. .btm-nav>* {
  78. position: relative;
  79. display: flex;
  80. height: 100%;
  81. flex-basis: 100%;
  82. cursor: pointer;
  83. flex-direction: column;
  84. align-items: center;
  85. justify-content: center;
  86. gap: 0.25rem
  87. }
  88. .breadcrumbs {
  89. max-width: 100%;
  90. overflow-x: auto
  91. }
  92. .breadcrumbs > ul,.breadcrumbs > ol {
  93. display: flex;
  94. align-items: center;
  95. white-space: nowrap;
  96. min-height: min-content
  97. }
  98. .breadcrumbs > ul > li, .breadcrumbs > ol > li {
  99. display: flex;
  100. align-items: center
  101. }
  102. .breadcrumbs > ul > li > a, .breadcrumbs > ol > li > a {
  103. display: flex;
  104. cursor: pointer;
  105. align-items: center
  106. }
  107. .breadcrumbs > ul > li > a:hover, .breadcrumbs > ol > li > a:hover {
  108. text-decoration-line: underline
  109. }
  110. .btn {
  111. display: inline-flex;
  112. flex-shrink: 0;
  113. cursor: pointer;
  114. user-select: none;
  115. flex-wrap: wrap;
  116. align-items: center;
  117. justify-content: center;
  118. border-color: transparent;
  119. text-align: center;
  120. transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  121. transition-duration: 200ms;
  122. transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  123. border-radius: var(--rounded-btn, 0.5rem);
  124. height: 3rem;
  125. padding-left: 1rem;
  126. padding-right: 1rem;
  127. font-size: 0.875rem;
  128. line-height: 1.25rem;
  129. min-height: 3rem;
  130. line-height: 1em;
  131. }
  132. /* disabled */
  133. .btn-disabled,
  134. .btn[disabled] {
  135. pointer-events: none;
  136. }
  137. /* shapes */
  138. .btn-square {
  139. height: 3rem;
  140. width: 3rem;
  141. padding: 0px;
  142. }
  143. .btn-circle {
  144. height: 3rem;
  145. width: 3rem;
  146. border-radius: 9999px;
  147. padding: 0px;
  148. }
  149. /* loading */
  150. .btn.loading,
  151. .btn.loading:hover {
  152. pointer-events: none;
  153. }
  154. .btn.loading:before {
  155. margin-right: 0.5rem;
  156. height: 1rem;
  157. width: 1rem;
  158. border-radius: 9999px;
  159. border-width: 2px;
  160. animation: spin 2s linear infinite;
  161. content: "";
  162. border-top-color: transparent;
  163. border-left-color: transparent;
  164. border-bottom-color: currentColor;
  165. border-right-color: currentColor;
  166. }
  167. @media (prefers-reduced-motion: reduce) {
  168. .btn.loading:before {
  169. animation: spin 10s linear infinite;
  170. }
  171. }
  172. @keyframes spin {
  173. from {
  174. transform: rotate(0deg);
  175. }
  176. to {
  177. transform: rotate(360deg);
  178. }
  179. }
  180. /* group */
  181. .btn-group {
  182. display: inline-flex;
  183. }
  184. .btn-group > input[type="radio"].btn {
  185. appearance: none;
  186. }
  187. .btn-group > input[type="radio"].btn:before {
  188. content: attr(data-title);
  189. }.card {
  190. position: relative;
  191. display: flex;
  192. flex-direction: column
  193. }
  194. .card:focus {
  195. outline: 2px solid transparent;
  196. outline-offset: 2px
  197. }
  198. .card-body {
  199. display: flex;
  200. flex: 1 1 auto;
  201. flex-direction: column
  202. }
  203. .card-body :where(p) {
  204. flex-grow: 1
  205. }
  206. .card-actions {
  207. display: flex;
  208. flex-wrap: wrap;
  209. align-items: flex-start;
  210. gap: 0.5rem
  211. }
  212. .card figure {
  213. display: flex;
  214. align-items: center;
  215. justify-content: center
  216. }
  217. .card.image-full {
  218. display: grid
  219. }
  220. .card.image-full:before {
  221. position: relative;
  222. content: ""
  223. }
  224. .card.image-full:before,
  225. .card.image-full > * {
  226. grid-column-start: 1;
  227. grid-row-start: 1
  228. }
  229. .card.image-full > figure img {
  230. height: 100%;
  231. object-fit: cover
  232. }
  233. .card.image-full > .card-body {
  234. position: relative
  235. }
  236. .carousel {
  237. display: flex;
  238. overflow-x: scroll;
  239. scroll-snap-type: x mandatory;
  240. scroll-behavior: smooth;
  241. }
  242. .carousel-vertical {
  243. flex-direction: column;
  244. overflow-y: scroll;
  245. scroll-snap-type: y mandatory;
  246. }
  247. .carousel-item {
  248. box-sizing: content-box;
  249. display: flex;
  250. flex: none;
  251. scroll-snap-align: start;
  252. }
  253. .carousel-center .carousel-item {
  254. scroll-snap-align: center;
  255. }
  256. .carousel-end .carousel-item {
  257. scroll-snap-align: end;
  258. }
  259. .chat {
  260. display: grid;
  261. grid-template-columns: repeat(2, minmax(0, 1fr));
  262. column-gap: 0.75rem;
  263. padding-top: 0.25rem;
  264. padding-bottom: 0.25rem;
  265. }
  266. .chat-image {
  267. grid-row: span 2 / span 2;
  268. align-self: flex-end;
  269. }
  270. .chat-header {
  271. grid-row-start: 1;
  272. font-size: 0.875rem;
  273. line-height: 1.25rem;
  274. }
  275. .chat-footer {
  276. grid-row-start: 3;
  277. font-size: 0.875rem;
  278. line-height: 1.25rem;
  279. }
  280. .chat-bubble {
  281. position: relative;
  282. display: block;
  283. width: fit-content;
  284. padding-left: 1rem;
  285. padding-right: 1rem;
  286. padding-top: 0.5rem;
  287. padding-bottom: 0.5rem;
  288. max-width: 90%;
  289. }
  290. .chat-bubble:before {
  291. position: absolute;
  292. bottom: 0px;
  293. height: 0.75rem;
  294. width: 0.75rem;
  295. background-color: inherit;
  296. content: "";
  297. -webkit-mask-size: contain;
  298. mask-size: contain;
  299. -webkit-mask-repeat: no-repeat;
  300. mask-repeat: no-repeat;
  301. -webkit-mask-position: center;
  302. mask-position: center;
  303. }
  304. .chat-start {
  305. place-items: start;
  306. grid-template-columns: auto 1fr;
  307. }
  308. .chat-start .chat-header {
  309. grid-column-start: 2;
  310. }
  311. .chat-start .chat-footer {
  312. grid-column-start: 2;
  313. }
  314. .chat-start .chat-image {
  315. grid-column-start: 1;
  316. }
  317. .chat-start .chat-bubble {
  318. grid-column-start: 2;
  319. }
  320. .chat-start .chat-bubble:before {
  321. -webkit-mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e");
  322. mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e");
  323. }
  324. [dir="rtl"] .chat-start .chat-bubble:before {
  325. -webkit-mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e");
  326. mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e");
  327. }
  328. .chat-end {
  329. place-items: end;
  330. grid-template-columns: 1fr auto;
  331. }
  332. .chat-end .chat-header {
  333. grid-column-start: 1;
  334. }
  335. .chat-end .chat-footer {
  336. grid-column-start: 1;
  337. }
  338. .chat-end .chat-image {
  339. grid-column-start: 2;
  340. }
  341. .chat-end .chat-bubble {
  342. grid-column-start: 1;
  343. }
  344. .chat-end .chat-bubble:before {
  345. -webkit-mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e");
  346. mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e");
  347. }
  348. [dir="rtl"] .chat-end .chat-bubble:before {
  349. -webkit-mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e");
  350. mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e");
  351. }
  352. .checkbox {
  353. flex-shrink: 0
  354. }
  355. .collapse.collapse {
  356. visibility: visible;
  357. }
  358. .collapse {
  359. position: relative;
  360. display: grid;
  361. overflow: hidden;
  362. grid-template-rows: 1fr auto;
  363. }
  364. .collapse-title,
  365. .collapse > input[type="checkbox"],
  366. .collapse-content {
  367. grid-column-start: 1;
  368. grid-row-start: 1;
  369. }
  370. .collapse > input[type="checkbox"] {
  371. appearance: none;
  372. opacity: 0;
  373. }
  374. .collapse-content {
  375. grid-row-start: 2;
  376. overflow: hidden;
  377. max-height: 0px;
  378. }
  379. .collapse-open .collapse-content,
  380. .collapse:focus:not(.collapse-close) .collapse-content,
  381. .collapse:not(.collapse-close)
  382. input[type="checkbox"]:checked
  383. ~ .collapse-content {
  384. max-height: none;
  385. }
  386. :root .countdown {
  387. line-height: 1em;
  388. }
  389. .countdown {
  390. display: inline-flex;
  391. }
  392. .countdown > * {
  393. height: 1em;
  394. display: inline-block;
  395. overflow-y: hidden;
  396. }
  397. .countdown > *:before {
  398. position: relative;
  399. content: "00\A 01\A 02\A 03\A 04\A 05\A 06\A 07\A 08\A 09\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A 39\A 40\A 41\A 42\A 43\A 44\A 45\A 46\A 47\A 48\A 49\A 50\A 51\A 52\A 53\A 54\A 55\A 56\A 57\A 58\A 59\A 60\A 61\A 62\A 63\A 64\A 65\A 66\A 67\A 68\A 69\A 70\A 71\A 72\A 73\A 74\A 75\A 76\A 77\A 78\A 79\A 80\A 81\A 82\A 83\A 84\A 85\A 86\A 87\A 88\A 89\A 90\A 91\A 92\A 93\A 94\A 95\A 96\A 97\A 98\A 99\A";
  400. white-space: pre;
  401. top: calc(var(--value) * -1em);
  402. }
  403. .divider {
  404. display: flex;
  405. flex-direction: row;
  406. align-items: center;
  407. align-self: stretch;
  408. }
  409. .divider:before,
  410. .divider:after {
  411. content: "";
  412. flex-grow: 1;
  413. height: 0.125rem;
  414. width: 100%;
  415. }
  416. .drawer {
  417. display: grid;
  418. width: 100%;
  419. overflow: hidden;
  420. height: 100vh;
  421. height: 100dvh;
  422. }
  423. .drawer.drawer-end {
  424. direction: rtl;
  425. }
  426. .drawer.drawer-end > * {
  427. direction: ltr;
  428. }
  429. .drawer.drawer-end > .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
  430. --tw-translate-x: 100%;
  431. transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  432. justify-self: end;
  433. }
  434. .drawer.drawer-end > .drawer-toggle:checked ~ .drawer-side > .drawer-overlay + * {
  435. --tw-translate-x: 0px;
  436. transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  437. }
  438. :where(.drawer-toggle ~ .drawer-content) {
  439. height: inherit;
  440. }
  441. .drawer-toggle {
  442. position: absolute;
  443. height: 0px;
  444. width: 0px;
  445. appearance: none;
  446. opacity: 0;
  447. }
  448. .drawer-toggle ~ .drawer-content {
  449. z-index: 0;
  450. grid-column-start: 1;
  451. grid-row-start: 1;
  452. overflow-y: auto;
  453. }
  454. .drawer-toggle ~ .drawer-side {
  455. grid-column-start: 1;
  456. grid-row-start: 1;
  457. display: grid;
  458. max-height: 100vh;
  459. overflow-x: hidden;
  460. }
  461. .drawer-toggle ~ .drawer-side > .drawer-overlay {
  462. visibility: hidden;
  463. grid-column-start: 1;
  464. grid-row-start: 1;
  465. opacity: 0;
  466. }
  467. .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
  468. z-index: 10;
  469. grid-column-start: 1;
  470. grid-row-start: 1;
  471. --tw-translate-x: -100%;
  472. transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  473. }
  474. .drawer-toggle:checked ~ .drawer-side {
  475. isolation: isolate;
  476. overflow-y: auto;
  477. overflow-x: hidden;
  478. }
  479. .drawer-toggle:checked ~ .drawer-side > .drawer-overlay {
  480. visibility: visible;
  481. }
  482. .drawer-toggle:checked ~ .drawer-side > .drawer-overlay + * {
  483. --tw-translate-x: 0px;
  484. transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  485. }
  486. [dir="rtl"] .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
  487. --tw-translate-x: 100%;
  488. transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  489. }
  490. [dir="rtl"] .drawer-toggle:checked ~ .drawer-side > .drawer-overlay + * {
  491. --tw-translate-x: 0px;
  492. transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  493. }
  494. [dir="rtl"] .drawer.drawer-end > .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
  495. --tw-translate-x: -100%;
  496. }
  497. [dir="rtl"] .drawer.drawer-end > .drawer-toggle:checked ~ .drawer-side > .drawer-overlay + * {
  498. --tw-translate-x: 0px;
  499. }
  500. [dir="rtl"] .drawer.drawer-end > .drawer-toggle:checked ~ .drawer-content {
  501. --tw-translate-x: 0.5rem;
  502. }
  503. @media (min-width: 1024px) {
  504. .drawer-mobile {
  505. grid-auto-columns: max-content auto;
  506. }
  507. .drawer-mobile > .drawer-toggle ~ .drawer-content {
  508. height: auto;
  509. }
  510. @media (min-width: 1024px) {
  511. .drawer-mobile > .drawer-toggle ~ .drawer-content {
  512. grid-column-start: 2;
  513. }
  514. }
  515. .drawer-mobile > .drawer-toggle ~ .drawer-side {
  516. overflow-y: auto;
  517. }
  518. @media (min-width: 1024px) {
  519. .drawer-mobile > .drawer-toggle ~ .drawer-side > .drawer-overlay {
  520. visibility: visible;
  521. }
  522. .drawer-mobile > .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
  523. --tw-translate-x: 0px;
  524. transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  525. }
  526. }
  527. .drawer-mobile.drawer-end {
  528. grid-auto-columns: auto max-content;
  529. direction: ltr;
  530. }
  531. .drawer-mobile.drawer-end > .drawer-toggle ~ .drawer-content {
  532. height: auto;
  533. }
  534. @media (min-width: 1024px) {
  535. .drawer-mobile.drawer-end > .drawer-toggle ~ .drawer-content {
  536. grid-column-start: 1;
  537. }
  538. }
  539. .drawer-mobile.drawer-end > .drawer-toggle ~ .drawer-side {
  540. overflow-y: auto;
  541. }
  542. @media (min-width: 1024px) {
  543. .drawer-mobile.drawer-end > .drawer-toggle ~ .drawer-side {
  544. grid-column-start: 2;
  545. }
  546. .drawer-mobile.drawer-end > .drawer-toggle ~ .drawer-side > .drawer-overlay {
  547. visibility: visible;
  548. }
  549. .drawer-mobile.drawer-end > .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
  550. --tw-translate-x: 0px;
  551. transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  552. }
  553. }
  554. }
  555. .dropdown {
  556. position: relative;
  557. display: inline-block
  558. }
  559. .dropdown > *:focus {
  560. outline: 2px solid transparent;
  561. outline-offset: 2px
  562. }
  563. .dropdown .dropdown-content {
  564. visibility: hidden;
  565. position: absolute;
  566. z-index: 50;
  567. opacity: 0
  568. }
  569. .dropdown-end .dropdown-content {
  570. right: 0px
  571. }
  572. .dropdown-left .dropdown-content {
  573. top: 0px;
  574. right: 100%;
  575. bottom: auto
  576. }
  577. .dropdown-right .dropdown-content {
  578. left: 100%;
  579. top: 0px;
  580. bottom: auto
  581. }
  582. .dropdown-bottom .dropdown-content {
  583. bottom: auto;
  584. top: 100%
  585. }
  586. .dropdown-top .dropdown-content {
  587. bottom: 100%;
  588. top: auto
  589. }
  590. .dropdown-end.dropdown-right .dropdown-content {
  591. bottom: 0px;
  592. top: auto
  593. }
  594. .dropdown-end.dropdown-left .dropdown-content {
  595. bottom: 0px;
  596. top: auto
  597. }
  598. .dropdown.dropdown-open .dropdown-content,
  599. .dropdown.dropdown-hover:hover .dropdown-content,
  600. .dropdown:not(.dropdown-hover):focus .dropdown-content,
  601. .dropdown:not(.dropdown-hover):focus-within .dropdown-content {
  602. visibility: visible;
  603. opacity: 1
  604. }
  605. .file-input {
  606. height: 3rem;
  607. flex-shrink: 1;
  608. padding-right: 1rem;
  609. font-size: 0.875rem;
  610. line-height: 1.25rem;
  611. line-height: 2
  612. }
  613. .file-input::file-selector-button {
  614. margin-right: 1rem;
  615. display: inline-flex;
  616. height: 2.875rem;
  617. min-height: 2.875rem;
  618. flex-shrink: 0;
  619. cursor: pointer;
  620. user-select: none;
  621. flex-wrap: wrap;
  622. align-items: center;
  623. justify-content: center;
  624. padding-left: 1rem;
  625. padding-right: 1rem;
  626. text-align: center;
  627. font-size: 0.875rem;
  628. line-height: 1.25rem;
  629. transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  630. transition-duration: 200ms;
  631. transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  632. line-height: 1em
  633. }
  634. .footer {
  635. display: grid;
  636. width: 100%;
  637. grid-auto-flow: row;
  638. place-items: start;
  639. }
  640. .footer > * {
  641. display: grid;
  642. place-items: start;
  643. }
  644. .footer-center {
  645. place-items: center;
  646. text-align: center;
  647. }
  648. .footer-center > * {
  649. place-items: center;
  650. }
  651. @media (min-width: 48rem) {
  652. .footer {
  653. grid-auto-flow: column;
  654. }
  655. .footer-center {
  656. grid-auto-flow: row dense;
  657. }
  658. }
  659. .form-control {
  660. display: flex;
  661. flex-direction: column
  662. }
  663. .label {
  664. display: flex;
  665. user-select: none;
  666. align-items: center;
  667. justify-content: space-between
  668. }
  669. .hero {
  670. display: grid;
  671. width: 100%;
  672. place-items: center;
  673. background-size: cover;
  674. background-position: center
  675. }
  676. .hero > * {
  677. grid-column-start: 1;
  678. grid-row-start: 1
  679. }
  680. .hero-overlay {
  681. grid-column-start: 1;
  682. grid-row-start: 1;
  683. height: 100%;
  684. width: 100%
  685. }
  686. .hero-content {
  687. z-index: 0;
  688. display: flex;
  689. align-items: center;
  690. justify-content: center
  691. }
  692. .indicator {
  693. position: relative;
  694. display: inline-flex;
  695. width: max-content;
  696. }
  697. .indicator :where(.indicator-item) {
  698. z-index: 1;
  699. position: absolute;
  700. transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  701. white-space: nowrap;
  702. }
  703. .input {
  704. flex-shrink: 1;
  705. height: 3rem;
  706. padding-left: 1rem;
  707. padding-right: 1rem;
  708. font-size: 0.875rem;
  709. line-height: 1.25rem;
  710. line-height: 2;
  711. }
  712. .input-group {
  713. display: flex;
  714. width: 100%;
  715. align-items: stretch;
  716. }
  717. .input-group > .input {
  718. isolation: isolate;
  719. }
  720. .input-group > *,
  721. .input-group > .input,
  722. .input-group > .textarea,
  723. .input-group > .select {
  724. border-radius: 0px;
  725. }
  726. .input-group-md {
  727. font-size: 0.875rem;
  728. line-height: 1.25rem;
  729. line-height: 2;
  730. }
  731. .input-group-lg {
  732. font-size: 1.125rem;
  733. line-height: 1.75rem;
  734. line-height: 2;
  735. }
  736. .input-group-sm {
  737. font-size: 0.875rem;
  738. line-height: 2rem;
  739. }
  740. .input-group-xs {
  741. font-size: 0.75rem;
  742. line-height: 1rem;
  743. line-height: 1.625;
  744. }
  745. .input-group :where(span) {
  746. display: flex;
  747. align-items: center;
  748. --tw-bg-opacity: 1;
  749. background-color: hsl(var(--b3, var(--b2)) / var(--tw-bg-opacity));
  750. padding-left: 1rem;
  751. padding-right: 1rem;
  752. }
  753. .input-group > :first-child {
  754. border-top-left-radius: var(--rounded-btn, 0.5rem);
  755. border-top-right-radius: 0;
  756. border-bottom-left-radius: var(--rounded-btn, 0.5rem);
  757. border-bottom-right-radius: 0;
  758. }
  759. .input-group > :last-child {
  760. border-top-left-radius: 0;
  761. border-top-right-radius: var(--rounded-btn, 0.5rem);
  762. border-bottom-left-radius: 0;
  763. border-bottom-right-radius: var(--rounded-btn, 0.5rem);
  764. }
  765. .input-group-vertical {
  766. flex-direction: column;
  767. }
  768. .input-group-vertical :first-child {
  769. border-top-left-radius: var(--rounded-btn, 0.5rem);
  770. border-top-right-radius: var(--rounded-btn, 0.5rem);
  771. border-bottom-left-radius: 0;
  772. border-bottom-right-radius: 0;
  773. }
  774. .input-group-vertical :last-child {
  775. border-top-left-radius: 0;
  776. border-top-right-radius: 0;
  777. border-bottom-left-radius: var(--rounded-btn, 0.5rem);
  778. border-bottom-right-radius: var(--rounded-btn, 0.5rem);
  779. }
  780. .kbd {
  781. display: inline-flex;
  782. align-items: center;
  783. justify-content: center
  784. }
  785. .link {
  786. cursor: pointer;
  787. text-decoration-line: underline
  788. }
  789. .link-hover {
  790. text-decoration-line: none
  791. }
  792. .link-hover:hover {
  793. text-decoration-line: underline
  794. }
  795. .mask {
  796. -webkit-mask-size: contain;
  797. mask-size: contain;
  798. -webkit-mask-repeat: no-repeat;
  799. mask-repeat: no-repeat;
  800. -webkit-mask-position: center;
  801. mask-position: center;
  802. }
  803. .mask-half-1 {
  804. -webkit-mask-size: 200%;
  805. mask-size: 200%;
  806. -webkit-mask-position: left;
  807. mask-position: left;
  808. }
  809. .mask-half-2 {
  810. -webkit-mask-size: 200%;
  811. mask-size: 200%;
  812. -webkit-mask-position: right;
  813. mask-position: right;
  814. }
  815. .menu {
  816. display: flex;
  817. flex-direction: column;
  818. flex-wrap: wrap
  819. }
  820. .menu.horizontal {
  821. display: inline-flex;
  822. flex-direction: row
  823. }
  824. .menu.horizontal :where(li) {
  825. flex-direction: row
  826. }
  827. :where(.menu li) {
  828. position: relative;
  829. display: flex;
  830. flex-shrink: 0;
  831. flex-direction: column;
  832. flex-wrap: wrap;
  833. align-items: stretch
  834. }
  835. .menu :where(li:not(.menu-title)) > :where(*:not(ul)) {
  836. display: flex
  837. }
  838. .menu :where(li:not(.disabled):not(.menu-title)) > :where(*:not(ul)) {
  839. cursor: pointer;
  840. user-select: none;
  841. align-items: center;
  842. outline: 2px solid transparent;
  843. outline-offset: 2px
  844. }
  845. .menu > :where(li > *:not(ul):focus) {
  846. outline: 2px solid transparent;
  847. outline-offset: 2px
  848. }
  849. .menu > :where(li.disabled > *:not(ul):focus) {
  850. cursor: auto
  851. }
  852. .menu > :where(li) :where(ul) {
  853. display: flex;
  854. flex-direction: column;
  855. align-items: stretch
  856. }
  857. .menu > :where(li) > :where(ul) {
  858. position: absolute;
  859. display: none;
  860. top: initial;
  861. left: 100%
  862. }
  863. .menu > :where(li:hover) > :where(ul) {
  864. display: flex
  865. }
  866. .menu > :where(li:focus) > :where(ul) {
  867. display: flex
  868. }
  869. .mockup-code {
  870. position: relative;
  871. overflow: hidden;
  872. overflow-x: auto;
  873. }
  874. .mockup-code pre[data-prefix]:before {
  875. content: attr(data-prefix);
  876. display: inline-block;
  877. text-align: right;
  878. }
  879. .mockup-window {
  880. position: relative;
  881. overflow: hidden;
  882. overflow-x: auto;
  883. }
  884. .mockup-window pre[data-prefix]:before {
  885. content: attr(data-prefix);
  886. display: inline-block;
  887. text-align: right;
  888. }
  889. .modal {
  890. pointer-events: none;
  891. visibility: hidden;
  892. position: fixed;
  893. inset: 0px;
  894. display: flex;
  895. justify-content: center;
  896. opacity: 0;
  897. z-index: 999;
  898. }
  899. :where(.modal) {
  900. align-items: center;
  901. }
  902. .modal-box {
  903. max-height: calc(100vh - 5em);
  904. }
  905. .modal-open,
  906. .modal:target,
  907. .modal-toggle:checked + .modal {
  908. pointer-events: auto;
  909. visibility: visible;
  910. opacity: 1;
  911. }
  912. .modal-action {
  913. display: flex;
  914. }
  915. .modal-toggle {
  916. position: fixed;
  917. height: 0px;
  918. width: 0px;
  919. appearance: none;
  920. opacity: 0;
  921. }
  922. .navbar {
  923. display: flex;
  924. align-items: center;
  925. }
  926. :where(.navbar > *) {
  927. display: inline-flex;
  928. align-items: center;
  929. }
  930. .navbar-start {
  931. width: 50%;
  932. justify-content: flex-start;
  933. }
  934. .navbar-center {
  935. flex-shrink: 0;
  936. }
  937. .navbar-end {
  938. width: 50%;
  939. justify-content: flex-end;
  940. }
  941. .progress {
  942. position: relative;
  943. width: 100%;
  944. appearance: none;
  945. overflow: hidden
  946. }
  947. .radial-progress {
  948. position: relative;
  949. display: inline-grid;
  950. height: var(--size);
  951. width: var(--size);
  952. place-content: center;
  953. border-radius: 9999px;
  954. background-color: transparent;
  955. vertical-align: middle;
  956. box-sizing: content-box;
  957. }
  958. .radial-progress::-moz-progress-bar {
  959. appearance: none;
  960. background-color: transparent;
  961. }
  962. .radial-progress::-webkit-progress-value {
  963. appearance: none;
  964. background-color: transparent;
  965. }
  966. .radial-progress::-webkit-progress-bar {
  967. appearance: none;
  968. background-color: transparent;
  969. }
  970. .radial-progress:before,
  971. .radial-progress:after {
  972. position: absolute;
  973. border-radius: 9999px;
  974. content: "";
  975. }
  976. .radial-progress:before {
  977. inset: 0px;
  978. background: radial-gradient(farthest-side, currentColor 98%, #0000) top/var(--thickness) var(--thickness) no-repeat, conic-gradient(currentColor calc(var(--value) * 1%), #0000 0);
  979. -webkit-mask: radial-gradient(farthest-side, #0000 calc(99% - var(--thickness)), #000 calc(100% - var(--thickness)));
  980. mask: radial-gradient(farthest-side, #0000 calc(99% - var(--thickness)), #000 calc(100% - var(--thickness)));
  981. }
  982. .radial-progress:after {
  983. inset: calc(50% - var(--thickness) / 2);
  984. transform: rotate(calc(var(--value) * 3.6deg - 90deg)) translate(calc(var(--size) / 2 - 50%));
  985. }
  986. .radio {
  987. flex-shrink: 0
  988. }
  989. .range {
  990. height: 1.5rem;
  991. width: 100%;
  992. cursor: pointer;
  993. }
  994. .range:focus {
  995. outline: none;
  996. }
  997. .rating {
  998. position: relative;
  999. display: inline-flex
  1000. }
  1001. .rating :where(input) {
  1002. cursor: pointer;
  1003. border-radius: 0px
  1004. }
  1005. .select {
  1006. display: inline-flex;
  1007. flex-shrink: 0;
  1008. cursor: pointer;
  1009. user-select: none;
  1010. appearance: none;
  1011. height: 3rem;
  1012. padding-left: 1rem;
  1013. padding-right: 2.5rem;
  1014. font-size: 0.875rem;
  1015. line-height: 1.25rem;
  1016. line-height: 2;
  1017. min-height: 3rem
  1018. /* disabled */
  1019. /* &-disabled,
  1020. &[disabled] {
  1021. @apply pointer-events-none;
  1022. } */
  1023. }
  1024. /* multiple */
  1025. .select[multiple] {
  1026. height: auto
  1027. }
  1028. .stack {
  1029. display: inline-grid;
  1030. }
  1031. .stack > * {
  1032. grid-column-start: 1;
  1033. grid-row-start: 1;
  1034. transform: translateY(10%) scale(0.9);
  1035. z-index: 1;
  1036. }
  1037. .stack > *:nth-child(2) {
  1038. transform: translateY(5%) scale(0.95);
  1039. z-index: 2;
  1040. }
  1041. .stack > *:nth-child(1) {
  1042. transform: translateY(0) scale(1);
  1043. z-index: 3;
  1044. }
  1045. .stats {
  1046. display: inline-grid
  1047. }
  1048. :where(.stats) {
  1049. grid-auto-flow: column
  1050. }
  1051. .stat {
  1052. display: inline-grid;
  1053. width: 100%;
  1054. grid-template-columns: repeat(1, 1fr)
  1055. }
  1056. .stat-figure {
  1057. grid-column-start: 2;
  1058. grid-row: span 3 / span 3;
  1059. grid-row-start: 1;
  1060. place-self: center;
  1061. justify-self: end
  1062. }
  1063. .stat-title {
  1064. grid-column-start: 1;
  1065. white-space: nowrap
  1066. }
  1067. .stat-value {
  1068. grid-column-start: 1;
  1069. white-space: nowrap
  1070. }
  1071. .stat-desc {
  1072. grid-column-start: 1;
  1073. white-space: nowrap
  1074. }
  1075. .stat-actions {
  1076. grid-column-start: 1;
  1077. white-space: nowrap
  1078. }
  1079. /* .stats.grid-flow-row {
  1080. @apply auto-rows-fr;
  1081. } */
  1082. .steps {
  1083. display: inline-grid;
  1084. grid-auto-flow: column;
  1085. overflow: hidden;
  1086. overflow-x: auto;
  1087. counter-reset: step;
  1088. grid-auto-columns: 1fr
  1089. }
  1090. .steps .step {
  1091. display: grid;
  1092. grid-template-columns: repeat(1, minmax(0, 1fr));
  1093. grid-template-rows: repeat(2, minmax(0, 1fr));
  1094. place-items: center;
  1095. text-align: center
  1096. }
  1097. .swap {
  1098. position: relative;
  1099. display: inline-grid;
  1100. user-select: none;
  1101. place-content: center
  1102. }
  1103. .swap > * {
  1104. grid-column-start: 1;
  1105. grid-row-start: 1
  1106. }
  1107. .swap input {
  1108. appearance: none
  1109. }
  1110. .swap .swap-on,
  1111. .swap .swap-indeterminate,
  1112. .swap input:indeterminate ~ .swap-on {
  1113. opacity: 0
  1114. }
  1115. .swap input:checked ~ .swap-off,
  1116. .swap.swap-active .swap-off,
  1117. .swap input:indeterminate ~ .swap-off {
  1118. opacity: 0
  1119. }
  1120. .swap input:checked ~ .swap-on,
  1121. .swap-active .swap-on,
  1122. .swap input:indeterminate ~ .swap-indeterminate {
  1123. opacity: 1
  1124. }
  1125. .tabs {
  1126. display: flex;
  1127. flex-wrap: wrap;
  1128. align-items: flex-end
  1129. }
  1130. .tab {
  1131. position: relative;
  1132. display: inline-flex;
  1133. cursor: pointer;
  1134. user-select: none;
  1135. flex-wrap: wrap;
  1136. align-items: center;
  1137. justify-content: center;
  1138. text-align: center;
  1139. height: 2rem;
  1140. font-size: 0.875rem;
  1141. line-height: 1.25rem;
  1142. line-height: 2;
  1143. --tab-padding: 1rem
  1144. }
  1145. .table {
  1146. position: relative;
  1147. }
  1148. .table th:first-child {
  1149. /* because safari */
  1150. position: sticky;
  1151. left: 0px;
  1152. z-index: 11;
  1153. }
  1154. .textarea {
  1155. flex-shrink: 1;
  1156. min-height: 3rem;
  1157. padding-top: 0.5rem;
  1158. padding-bottom: 0.5rem;
  1159. padding-left: 1rem;
  1160. padding-right: 1rem;
  1161. font-size: 0.875rem;
  1162. line-height: 1.25rem;
  1163. line-height: 2
  1164. }
  1165. .toast {
  1166. position: fixed;
  1167. display: flex;
  1168. min-width: fit-content;
  1169. flex-direction: column
  1170. }
  1171. .toggle {
  1172. flex-shrink: 0
  1173. }
  1174. .tooltip {
  1175. position: relative;
  1176. display: inline-block;
  1177. --tooltip-offset: calc(100% + 1px + var(--tooltip-tail, 0px));
  1178. }
  1179. .tooltip:before {
  1180. position: absolute;
  1181. pointer-events: none;
  1182. z-index: 1;
  1183. content: var(--tw-content);
  1184. --tw-content: attr(data-tip);
  1185. }
  1186. .tooltip:before, .tooltip-top:before {
  1187. transform: translateX(-50%);
  1188. top: auto;
  1189. left: 50%;
  1190. right: auto;
  1191. bottom: var(--tooltip-offset);
  1192. }
  1193. .tooltip-bottom:before {
  1194. transform: translateX(-50%);
  1195. top: var(--tooltip-offset);
  1196. left: 50%;
  1197. right: auto;
  1198. bottom: auto;
  1199. }
  1200. .tooltip-left:before {
  1201. transform: translateY(-50%);
  1202. top: 50%;
  1203. left: auto;
  1204. right: var(--tooltip-offset);
  1205. bottom: auto;
  1206. }
  1207. .tooltip-right:before {
  1208. transform: translateY(-50%);
  1209. top: 50%;
  1210. left: var(--tooltip-offset);
  1211. right: auto;
  1212. bottom: auto;
  1213. }
  1214. .alert {
  1215. --tw-bg-opacity: 1;
  1216. background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
  1217. padding: 1rem;
  1218. border-radius: var(--rounded-box, 1rem)
  1219. }
  1220. .alert-info {
  1221. --tw-bg-opacity: 1;
  1222. background-color: hsl(var(--in) / var(--tw-bg-opacity));
  1223. --tw-text-opacity: 1;
  1224. color: hsl(var(--inc, var(--nc)) / var(--tw-text-opacity))
  1225. }
  1226. .alert-success {
  1227. --tw-bg-opacity: 1;
  1228. background-color: hsl(var(--su) / var(--tw-bg-opacity));
  1229. --tw-text-opacity: 1;
  1230. color: hsl(var(--suc, var(--nc)) / var(--tw-text-opacity))
  1231. }
  1232. .alert-warning {
  1233. --tw-bg-opacity: 1;
  1234. background-color: hsl(var(--wa) / var(--tw-bg-opacity));
  1235. --tw-text-opacity: 1;
  1236. color: hsl(var(--wac, var(--nc)) / var(--tw-text-opacity))
  1237. }
  1238. .alert-error {
  1239. --tw-bg-opacity: 1;
  1240. background-color: hsl(var(--er) / var(--tw-bg-opacity));
  1241. --tw-text-opacity: 1;
  1242. color: hsl(var(--erc, var(--nc)) / var(--tw-text-opacity))
  1243. }
  1244. .avatar-group {
  1245. display: flex;
  1246. overflow: hidden
  1247. }
  1248. .avatar-group :where(.avatar) {
  1249. overflow: hidden;
  1250. border-radius: 9999px;
  1251. border-width: 4px;
  1252. --tw-border-opacity: 1;
  1253. border-color: hsl(var(--b1) / var(--tw-border-opacity))
  1254. }
  1255. .badge {
  1256. border-width: 1px;
  1257. --tw-border-opacity: 1;
  1258. border-color: hsl(var(--n) / var(--tw-border-opacity));
  1259. --tw-bg-opacity: 1;
  1260. background-color: hsl(var(--n) / var(--tw-bg-opacity));
  1261. --tw-text-opacity: 1;
  1262. color: hsl(var(--nc) / var(--tw-text-opacity));
  1263. border-radius: var(--rounded-badge, 1.9rem)
  1264. }
  1265. .badge-primary {
  1266. --tw-border-opacity: 1;
  1267. border-color: hsl(var(--p) / var(--tw-border-opacity));
  1268. --tw-bg-opacity: 1;
  1269. background-color: hsl(var(--p) / var(--tw-bg-opacity));
  1270. --tw-text-opacity: 1;
  1271. color: hsl(var(--pc) / var(--tw-text-opacity))
  1272. }
  1273. .badge-secondary {
  1274. --tw-border-opacity: 1;
  1275. border-color: hsl(var(--s) / var(--tw-border-opacity));
  1276. --tw-bg-opacity: 1;
  1277. background-color: hsl(var(--s) / var(--tw-bg-opacity));
  1278. --tw-text-opacity: 1;
  1279. color: hsl(var(--sc) / var(--tw-text-opacity))
  1280. }
  1281. .badge-accent {
  1282. --tw-border-opacity: 1;
  1283. border-color: hsl(var(--a) / var(--tw-border-opacity));
  1284. --tw-bg-opacity: 1;
  1285. background-color: hsl(var(--a) / var(--tw-bg-opacity));
  1286. --tw-text-opacity: 1;
  1287. color: hsl(var(--ac) / var(--tw-text-opacity))
  1288. }
  1289. .badge-info {
  1290. border-color: transparent;
  1291. --tw-bg-opacity: 1;
  1292. background-color: hsl(var(--in) / var(--tw-bg-opacity));
  1293. --tw-text-opacity: 1;
  1294. color: hsl(var(--inc, var(--nc)) / var(--tw-text-opacity))
  1295. }
  1296. .badge-success {
  1297. border-color: transparent;
  1298. --tw-bg-opacity: 1;
  1299. background-color: hsl(var(--su) / var(--tw-bg-opacity));
  1300. --tw-text-opacity: 1;
  1301. color: hsl(var(--suc, var(--nc)) / var(--tw-text-opacity))
  1302. }
  1303. .badge-warning {
  1304. border-color: transparent;
  1305. --tw-bg-opacity: 1;
  1306. background-color: hsl(var(--wa) / var(--tw-bg-opacity));
  1307. --tw-text-opacity: 1;
  1308. color: hsl(var(--wac, var(--nc)) / var(--tw-text-opacity))
  1309. }
  1310. .badge-error {
  1311. border-color: transparent;
  1312. --tw-bg-opacity: 1;
  1313. background-color: hsl(var(--er) / var(--tw-bg-opacity));
  1314. --tw-text-opacity: 1;
  1315. color: hsl(var(--erc, var(--nc)) / var(--tw-text-opacity))
  1316. }
  1317. .badge-ghost {
  1318. --tw-border-opacity: 1;
  1319. border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity));
  1320. --tw-bg-opacity: 1;
  1321. background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
  1322. --tw-text-opacity: 1;
  1323. color: hsl(var(--bc) / var(--tw-text-opacity))
  1324. }
  1325. .badge-outline {
  1326. border-color: currentColor;
  1327. --tw-border-opacity: 0.5;
  1328. background-color: transparent;
  1329. color: currentColor
  1330. }
  1331. .badge-outline.badge-primary {
  1332. --tw-text-opacity: 1;
  1333. color: hsl(var(--p) / var(--tw-text-opacity))
  1334. }
  1335. .badge-outline.badge-secondary {
  1336. --tw-text-opacity: 1;
  1337. color: hsl(var(--s) / var(--tw-text-opacity))
  1338. }
  1339. .badge-outline.badge-accent {
  1340. --tw-text-opacity: 1;
  1341. color: hsl(var(--a) / var(--tw-text-opacity))
  1342. }
  1343. .badge-outline.badge-info {
  1344. --tw-text-opacity: 1;
  1345. color: hsl(var(--in) / var(--tw-text-opacity))
  1346. }
  1347. .badge-outline.badge-success {
  1348. --tw-text-opacity: 1;
  1349. color: hsl(var(--su) / var(--tw-text-opacity))
  1350. }
  1351. .badge-outline.badge-warning {
  1352. --tw-text-opacity: 1;
  1353. color: hsl(var(--wa) / var(--tw-text-opacity))
  1354. }
  1355. .badge-outline.badge-error {
  1356. --tw-text-opacity: 1;
  1357. color: hsl(var(--er) / var(--tw-text-opacity))
  1358. }
  1359. .btn-outline .badge {
  1360. --tw-border-opacity: 1;
  1361. border-color: hsl(var(--nf, var(--n)) / var(--tw-border-opacity));
  1362. --tw-text-opacity: 1;
  1363. color: hsl(var(--nc) / var(--tw-text-opacity))
  1364. }
  1365. .btn-outline.btn-primary .badge {
  1366. --tw-border-opacity: 1;
  1367. border-color: hsl(var(--p) / var(--tw-border-opacity));
  1368. --tw-bg-opacity: 1;
  1369. background-color: hsl(var(--p) / var(--tw-bg-opacity));
  1370. --tw-text-opacity: 1;
  1371. color: hsl(var(--pc) / var(--tw-text-opacity))
  1372. }
  1373. .btn-outline.btn-secondary .badge {
  1374. --tw-border-opacity: 1;
  1375. border-color: hsl(var(--s) / var(--tw-border-opacity));
  1376. --tw-bg-opacity: 1;
  1377. background-color: hsl(var(--s) / var(--tw-bg-opacity));
  1378. --tw-text-opacity: 1;
  1379. color: hsl(var(--sc) / var(--tw-text-opacity))
  1380. }
  1381. .btn-outline.btn-accent .badge {
  1382. --tw-border-opacity: 1;
  1383. border-color: hsl(var(--a) / var(--tw-border-opacity));
  1384. --tw-bg-opacity: 1;
  1385. background-color: hsl(var(--a) / var(--tw-bg-opacity));
  1386. --tw-text-opacity: 1;
  1387. color: hsl(var(--ac) / var(--tw-text-opacity))
  1388. }
  1389. .btn-outline .badge.outline {
  1390. --tw-border-opacity: 1;
  1391. border-color: hsl(var(--nf, var(--n)) / var(--tw-border-opacity));
  1392. background-color: transparent
  1393. }
  1394. .btn-outline.btn-primary .badge-outline {
  1395. --tw-border-opacity: 1;
  1396. border-color: hsl(var(--p) / var(--tw-border-opacity));
  1397. background-color: transparent;
  1398. --tw-text-opacity: 1;
  1399. color: hsl(var(--p) / var(--tw-text-opacity))
  1400. }
  1401. .btn-outline.btn-secondary .badge-outline {
  1402. --tw-border-opacity: 1;
  1403. border-color: hsl(var(--s) / var(--tw-border-opacity));
  1404. background-color: transparent;
  1405. --tw-text-opacity: 1;
  1406. color: hsl(var(--s) / var(--tw-text-opacity))
  1407. }
  1408. .btn-outline.btn-accent .badge-outline {
  1409. --tw-border-opacity: 1;
  1410. border-color: hsl(var(--a) / var(--tw-border-opacity));
  1411. background-color: transparent;
  1412. --tw-text-opacity: 1;
  1413. color: hsl(var(--a) / var(--tw-text-opacity))
  1414. }
  1415. .btn-outline.btn-info .badge-outline {
  1416. --tw-border-opacity: 1;
  1417. border-color: hsl(var(--in) / var(--tw-border-opacity));
  1418. background-color: transparent;
  1419. --tw-text-opacity: 1;
  1420. color: hsl(var(--in) / var(--tw-text-opacity))
  1421. }
  1422. .btn-outline.btn-success .badge-outline {
  1423. --tw-border-opacity: 1;
  1424. border-color: hsl(var(--su) / var(--tw-border-opacity));
  1425. background-color: transparent;
  1426. --tw-text-opacity: 1;
  1427. color: hsl(var(--su) / var(--tw-text-opacity))
  1428. }
  1429. .btn-outline.btn-warning .badge-outline {
  1430. --tw-border-opacity: 1;
  1431. border-color: hsl(var(--wa) / var(--tw-border-opacity));
  1432. background-color: transparent;
  1433. --tw-text-opacity: 1;
  1434. color: hsl(var(--wa) / var(--tw-text-opacity))
  1435. }
  1436. .btn-outline.btn-error .badge-outline {
  1437. --tw-border-opacity: 1;
  1438. border-color: hsl(var(--er) / var(--tw-border-opacity));
  1439. background-color: transparent;
  1440. --tw-text-opacity: 1;
  1441. color: hsl(var(--er) / var(--tw-text-opacity))
  1442. }
  1443. .btn-outline:hover .badge {
  1444. --tw-border-opacity: 1;
  1445. border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity));
  1446. --tw-bg-opacity: 1;
  1447. background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
  1448. --tw-text-opacity: 1;
  1449. color: hsl(var(--bc) / var(--tw-text-opacity))
  1450. }
  1451. .btn-outline:hover .badge.outline {
  1452. --tw-border-opacity: 1;
  1453. border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity));
  1454. --tw-text-opacity: 1;
  1455. color: hsl(var(--nc) / var(--tw-text-opacity))
  1456. }
  1457. .btn-outline.btn-primary:hover .badge {
  1458. --tw-border-opacity: 1;
  1459. border-color: hsl(var(--pc) / var(--tw-border-opacity));
  1460. --tw-bg-opacity: 1;
  1461. background-color: hsl(var(--pc) / var(--tw-bg-opacity));
  1462. --tw-text-opacity: 1;
  1463. color: hsl(var(--p) / var(--tw-text-opacity))
  1464. }
  1465. .btn-outline.btn-primary:hover .badge.outline {
  1466. --tw-border-opacity: 1;
  1467. border-color: hsl(var(--pc) / var(--tw-border-opacity));
  1468. --tw-bg-opacity: 1;
  1469. background-color: hsl(var(--pf, var(--p)) / var(--tw-bg-opacity));
  1470. --tw-text-opacity: 1;
  1471. color: hsl(var(--pc) / var(--tw-text-opacity))
  1472. }
  1473. .btn-outline.btn-secondary:hover .badge {
  1474. --tw-border-opacity: 1;
  1475. border-color: hsl(var(--sc) / var(--tw-border-opacity));
  1476. --tw-bg-opacity: 1;
  1477. background-color: hsl(var(--sc) / var(--tw-bg-opacity));
  1478. --tw-text-opacity: 1;
  1479. color: hsl(var(--s) / var(--tw-text-opacity))
  1480. }
  1481. .btn-outline.btn-secondary:hover .badge.outline {
  1482. --tw-border-opacity: 1;
  1483. border-color: hsl(var(--sc) / var(--tw-border-opacity));
  1484. --tw-bg-opacity: 1;
  1485. background-color: hsl(var(--sf, var(--s)) / var(--tw-bg-opacity));
  1486. --tw-text-opacity: 1;
  1487. color: hsl(var(--sc) / var(--tw-text-opacity))
  1488. }
  1489. .btn-outline.btn-accent:hover .badge {
  1490. --tw-border-opacity: 1;
  1491. border-color: hsl(var(--ac) / var(--tw-border-opacity));
  1492. --tw-bg-opacity: 1;
  1493. background-color: hsl(var(--ac) / var(--tw-bg-opacity));
  1494. --tw-text-opacity: 1;
  1495. color: hsl(var(--a) / var(--tw-text-opacity))
  1496. }
  1497. .btn-outline.btn-accent:hover .badge.outline {
  1498. --tw-border-opacity: 1;
  1499. border-color: hsl(var(--ac) / var(--tw-border-opacity));
  1500. --tw-bg-opacity: 1;
  1501. background-color: hsl(var(--af, var(--a)) / var(--tw-bg-opacity));
  1502. --tw-text-opacity: 1;
  1503. color: hsl(var(--ac) / var(--tw-text-opacity))
  1504. }
  1505. .btm-nav {
  1506. height: 4rem;
  1507. --tw-bg-opacity: 1;
  1508. background-color: hsl(var(--b1) / var(--tw-bg-opacity));
  1509. color: currentColor
  1510. }
  1511. .btm-nav>* {
  1512. border-color: currentColor
  1513. }
  1514. .btm-nav>*:not(.active) {
  1515. padding-top: 0.125rem
  1516. }
  1517. /* active */
  1518. .btm-nav>*:where(.active) {
  1519. border-top-width: 2px;
  1520. --tw-bg-opacity: 1;
  1521. background-color: hsl(var(--b1) / var(--tw-bg-opacity))
  1522. }
  1523. /* disabled */
  1524. .btm-nav>*.disabled,
  1525. .btm-nav>*.disabled:hover,
  1526. .btm-nav>*[disabled],
  1527. .btm-nav>*[disabled]:hover {
  1528. pointer-events: none;
  1529. --tw-border-opacity: 0;
  1530. background-color: hsl(var(--n) / var(--tw-bg-opacity));
  1531. --tw-bg-opacity: 0.1;
  1532. color: hsl(var(--bc) / var(--tw-text-opacity));
  1533. --tw-text-opacity: 0.2
  1534. }
  1535. .btm-nav>* .label {
  1536. font-size: 1rem;
  1537. line-height: 1.5rem
  1538. }
  1539. .breadcrumbs {
  1540. padding-top: 0.5rem;
  1541. padding-bottom: 0.5rem;
  1542. }
  1543. .breadcrumbs > ul > li > a:focus, .breadcrumbs > ol > li > a:focus {
  1544. outline: 2px solid transparent;
  1545. outline-offset: 2px;
  1546. }
  1547. .breadcrumbs > ul > li > a:focus-visible, .breadcrumbs > ol > li > a:focus-visible {
  1548. outline: 2px solid currentColor;
  1549. outline-offset: 2px;
  1550. }
  1551. .breadcrumbs > ul > li + *:before, .breadcrumbs > ol > li + *:before {
  1552. content: "";
  1553. margin-left: 0.5rem;
  1554. margin-right: 0.75rem;
  1555. display: block;
  1556. height: 0.375rem;
  1557. width: 0.375rem;
  1558. --tw-rotate: 45deg;
  1559. transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  1560. opacity: 0.4;
  1561. border-top: 1px solid;
  1562. border-right: 1px solid;
  1563. background-color: transparent;
  1564. }
  1565. [dir="rtl"] .breadcrumbs > ul > li + *:before,
  1566. [dir="rtl"] .breadcrumbs > ol > li + *:before {
  1567. --tw-rotate: -135deg;
  1568. }
  1569. .btn {
  1570. font-weight: 600;
  1571. text-transform: uppercase;
  1572. text-decoration-line: none;
  1573. border-width: var(--border-btn, 1px);
  1574. animation: button-pop var(--animation-btn, 0.25s) ease-out;
  1575. text-transform: var(--btn-text-case, uppercase);
  1576. }
  1577. .btn:active:hover,
  1578. .btn:active:focus {
  1579. animation: none;
  1580. transform: scale(var(--btn-focus-scale, 0.95));
  1581. }
  1582. /* default btn */
  1583. .btn {
  1584. --tw-border-opacity: 1;
  1585. border-color: hsl(var(--n) / var(--tw-border-opacity));
  1586. --tw-bg-opacity: 1;
  1587. background-color: hsl(var(--n) / var(--tw-bg-opacity));
  1588. --tw-text-opacity: 1;
  1589. color: hsl(var(--nc) / var(--tw-text-opacity));
  1590. text-decoration-line: none;
  1591. }
  1592. .btn:hover,
  1593. .btn-active {
  1594. --tw-border-opacity: 1;
  1595. border-color: hsl(var(--nf, var(--n)) / var(--tw-border-opacity));
  1596. --tw-bg-opacity: 1;
  1597. background-color: hsl(var(--nf, var(--n)) / var(--tw-bg-opacity));
  1598. }
  1599. .btn:focus-visible {
  1600. outline: 2px solid hsl(var(--nf));
  1601. outline-offset: 2px;
  1602. }
  1603. /* brand colors */
  1604. .btn-primary {
  1605. --tw-border-opacity: 1;
  1606. border-color: hsl(var(--p) / var(--tw-border-opacity));
  1607. --tw-bg-opacity: 1;
  1608. background-color: hsl(var(--p) / var(--tw-bg-opacity));
  1609. --tw-text-opacity: 1;
  1610. color: hsl(var(--pc) / var(--tw-text-opacity));
  1611. }
  1612. .btn-primary:hover,
  1613. .btn-primary.btn-active {
  1614. --tw-border-opacity: 1;
  1615. border-color: hsl(var(--pf, var(--p)) / var(--tw-border-opacity));
  1616. --tw-bg-opacity: 1;
  1617. background-color: hsl(var(--pf, var(--p)) / var(--tw-bg-opacity));
  1618. }
  1619. .btn-primary:focus-visible {
  1620. outline: 2px solid hsl(var(--p));
  1621. }
  1622. .btn-secondary {
  1623. --tw-border-opacity: 1;
  1624. border-color: hsl(var(--s) / var(--tw-border-opacity));
  1625. --tw-bg-opacity: 1;
  1626. background-color: hsl(var(--s) / var(--tw-bg-opacity));
  1627. --tw-text-opacity: 1;
  1628. color: hsl(var(--sc) / var(--tw-text-opacity));
  1629. }
  1630. .btn-secondary:hover,
  1631. .btn-secondary.btn-active {
  1632. --tw-border-opacity: 1;
  1633. border-color: hsl(var(--sf, var(--s)) / var(--tw-border-opacity));
  1634. --tw-bg-opacity: 1;
  1635. background-color: hsl(var(--sf, var(--s)) / var(--tw-bg-opacity));
  1636. }
  1637. .btn-secondary:focus-visible {
  1638. outline: 2px solid hsl(var(--s));
  1639. }
  1640. .btn-accent {
  1641. --tw-border-opacity: 1;
  1642. border-color: hsl(var(--a) / var(--tw-border-opacity));
  1643. --tw-bg-opacity: 1;
  1644. background-color: hsl(var(--a) / var(--tw-bg-opacity));
  1645. --tw-text-opacity: 1;
  1646. color: hsl(var(--ac) / var(--tw-text-opacity));
  1647. }
  1648. .btn-accent:hover,
  1649. .btn-accent.btn-active {
  1650. --tw-border-opacity: 1;
  1651. border-color: hsl(var(--af, var(--a)) / var(--tw-border-opacity));
  1652. --tw-bg-opacity: 1;
  1653. background-color: hsl(var(--af, var(--a)) / var(--tw-bg-opacity));
  1654. }
  1655. .btn-accent:focus-visible {
  1656. outline: 2px solid hsl(var(--a));
  1657. }
  1658. /* btn with state colors */
  1659. .btn-info {
  1660. --tw-border-opacity: 1;
  1661. border-color: hsl(var(--in) / var(--tw-border-opacity));
  1662. --tw-bg-opacity: 1;
  1663. background-color: hsl(var(--in) / var(--tw-bg-opacity));
  1664. --tw-text-opacity: 1;
  1665. color: hsl(var(--inc, var(--nc)) / var(--tw-text-opacity));
  1666. }
  1667. .btn-info:hover,
  1668. .btn-info.btn-active {
  1669. --tw-border-opacity: 1;
  1670. border-color: hsl(var(--in) / var(--tw-border-opacity));
  1671. --tw-bg-opacity: 1;
  1672. background-color: hsl(var(--in) / var(--tw-bg-opacity));
  1673. }
  1674. .btn-info:focus-visible {
  1675. outline: 2px solid hsl(var(--in));
  1676. }
  1677. .btn-success {
  1678. --tw-border-opacity: 1;
  1679. border-color: hsl(var(--su) / var(--tw-border-opacity));
  1680. --tw-bg-opacity: 1;
  1681. background-color: hsl(var(--su) / var(--tw-bg-opacity));
  1682. --tw-text-opacity: 1;
  1683. color: hsl(var(--suc, var(--nc)) / var(--tw-text-opacity));
  1684. }
  1685. .btn-success:hover,
  1686. .btn-success.btn-active {
  1687. --tw-border-opacity: 1;
  1688. border-color: hsl(var(--su) / var(--tw-border-opacity));
  1689. --tw-bg-opacity: 1;
  1690. background-color: hsl(var(--su) / var(--tw-bg-opacity));
  1691. }
  1692. .btn-success:focus-visible {
  1693. outline: 2px solid hsl(var(--su));
  1694. }
  1695. .btn-warning {
  1696. --tw-border-opacity: 1;
  1697. border-color: hsl(var(--wa) / var(--tw-border-opacity));
  1698. --tw-bg-opacity: 1;
  1699. background-color: hsl(var(--wa) / var(--tw-bg-opacity));
  1700. --tw-text-opacity: 1;
  1701. color: hsl(var(--wac, var(--nc)) / var(--tw-text-opacity));
  1702. }
  1703. .btn-warning:hover,
  1704. .btn-warning.btn-active {
  1705. --tw-border-opacity: 1;
  1706. border-color: hsl(var(--wa) / var(--tw-border-opacity));
  1707. --tw-bg-opacity: 1;
  1708. background-color: hsl(var(--wa) / var(--tw-bg-opacity));
  1709. }
  1710. .btn-warning:focus-visible {
  1711. outline: 2px solid hsl(var(--wa));
  1712. }
  1713. .btn-error {
  1714. --tw-border-opacity: 1;
  1715. border-color: hsl(var(--er) / var(--tw-border-opacity));
  1716. --tw-bg-opacity: 1;
  1717. background-color: hsl(var(--er) / var(--tw-bg-opacity));
  1718. --tw-text-opacity: 1;
  1719. color: hsl(var(--erc, var(--nc)) / var(--tw-text-opacity));
  1720. }
  1721. .btn-error:hover,
  1722. .btn-error.btn-active {
  1723. --tw-border-opacity: 1;
  1724. border-color: hsl(var(--er) / var(--tw-border-opacity));
  1725. --tw-bg-opacity: 1;
  1726. background-color: hsl(var(--er) / var(--tw-bg-opacity));
  1727. }
  1728. .btn-error:focus-visible {
  1729. outline: 2px solid hsl(var(--er));
  1730. }
  1731. /* glass */
  1732. .btn.glass:hover,
  1733. .btn.glass.btn-active {
  1734. --glass-opacity: 25%;
  1735. --glass-border-opacity: 15%;
  1736. }
  1737. .btn.glass:focus-visible {
  1738. outline: 2px solid currentColor;
  1739. }
  1740. /* btn variants */
  1741. .btn-ghost {
  1742. border-width: 1px;
  1743. border-color: transparent;
  1744. background-color: transparent;
  1745. color: currentColor;
  1746. }
  1747. .btn-ghost:hover,
  1748. .btn-ghost.btn-active {
  1749. --tw-border-opacity: 0;
  1750. background-color: hsl(var(--bc) / var(--tw-bg-opacity));
  1751. --tw-bg-opacity: 0.2;
  1752. }
  1753. .btn-ghost:focus-visible {
  1754. outline: 2px solid currentColor;
  1755. }
  1756. .btn-link {
  1757. border-color: transparent;
  1758. background-color: transparent;
  1759. --tw-text-opacity: 1;
  1760. color: hsl(var(--p) / var(--tw-text-opacity));
  1761. text-decoration-line: underline;
  1762. }
  1763. .btn-link:hover,
  1764. .btn-link.btn-active {
  1765. border-color: transparent;
  1766. background-color: transparent;
  1767. text-decoration-line: underline;
  1768. }
  1769. .btn-link:focus-visible {
  1770. outline: 2px solid currentColor;
  1771. }
  1772. /* outline */
  1773. .btn-outline {
  1774. border-color: currentColor;
  1775. background-color: transparent;
  1776. --tw-text-opacity: 1;
  1777. color: hsl(var(--bc) / var(--tw-text-opacity));
  1778. }
  1779. .btn-outline:hover,
  1780. .btn-outline.btn-active {
  1781. --tw-border-opacity: 1;
  1782. border-color: hsl(var(--bc) / var(--tw-border-opacity));
  1783. --tw-bg-opacity: 1;
  1784. background-color: hsl(var(--bc) / var(--tw-bg-opacity));
  1785. --tw-text-opacity: 1;
  1786. color: hsl(var(--b1) / var(--tw-text-opacity));
  1787. }
  1788. .btn-outline.btn-primary {
  1789. --tw-text-opacity: 1;
  1790. color: hsl(var(--p) / var(--tw-text-opacity));
  1791. }
  1792. .btn-outline.btn-primary:hover,
  1793. .btn-outline.btn-primary.btn-active {
  1794. --tw-border-opacity: 1;
  1795. border-color: hsl(var(--pf, var(--p)) / var(--tw-border-opacity));
  1796. --tw-bg-opacity: 1;
  1797. background-color: hsl(var(--pf, var(--p)) / var(--tw-bg-opacity));
  1798. --tw-text-opacity: 1;
  1799. color: hsl(var(--pc) / var(--tw-text-opacity));
  1800. }
  1801. .btn-outline.btn-secondary {
  1802. --tw-text-opacity: 1;
  1803. color: hsl(var(--s) / var(--tw-text-opacity));
  1804. }
  1805. .btn-outline.btn-secondary:hover,
  1806. .btn-outline.btn-secondary.btn-active {
  1807. --tw-border-opacity: 1;
  1808. border-color: hsl(var(--sf, var(--s)) / var(--tw-border-opacity));
  1809. --tw-bg-opacity: 1;
  1810. background-color: hsl(var(--sf, var(--s)) / var(--tw-bg-opacity));
  1811. --tw-text-opacity: 1;
  1812. color: hsl(var(--sc) / var(--tw-text-opacity));
  1813. }
  1814. .btn-outline.btn-accent {
  1815. --tw-text-opacity: 1;
  1816. color: hsl(var(--a) / var(--tw-text-opacity));
  1817. }
  1818. .btn-outline.btn-accent:hover,
  1819. .btn-outline.btn-accent.btn-active {
  1820. --tw-border-opacity: 1;
  1821. border-color: hsl(var(--af, var(--a)) / var(--tw-border-opacity));
  1822. --tw-bg-opacity: 1;
  1823. background-color: hsl(var(--af, var(--a)) / var(--tw-bg-opacity));
  1824. --tw-text-opacity: 1;
  1825. color: hsl(var(--ac) / var(--tw-text-opacity));
  1826. }
  1827. .btn-outline.btn-success {
  1828. --tw-text-opacity: 1;
  1829. color: hsl(var(--su) / var(--tw-text-opacity));
  1830. }
  1831. .btn-outline.btn-success:hover,
  1832. .btn-outline.btn-success.btn-active {
  1833. --tw-border-opacity: 1;
  1834. border-color: hsl(var(--su) / var(--tw-border-opacity));
  1835. --tw-bg-opacity: 1;
  1836. background-color: hsl(var(--su) / var(--tw-bg-opacity));
  1837. --tw-text-opacity: 1;
  1838. color: hsl(var(--suc, var(--nc)) / var(--tw-text-opacity));
  1839. }
  1840. .btn-outline.btn-info {
  1841. --tw-text-opacity: 1;
  1842. color: hsl(var(--in) / var(--tw-text-opacity));
  1843. }
  1844. .btn-outline.btn-info:hover,
  1845. .btn-outline.btn-info.btn-active {
  1846. --tw-border-opacity: 1;
  1847. border-color: hsl(var(--in) / var(--tw-border-opacity));
  1848. --tw-bg-opacity: 1;
  1849. background-color: hsl(var(--in) / var(--tw-bg-opacity));
  1850. --tw-text-opacity: 1;
  1851. color: hsl(var(--inc, var(--nc)) / var(--tw-text-opacity));
  1852. }
  1853. .btn-outline.btn-warning {
  1854. --tw-text-opacity: 1;
  1855. color: hsl(var(--wa) / var(--tw-text-opacity));
  1856. }
  1857. .btn-outline.btn-warning:hover,
  1858. .btn-outline.btn-warning.btn-active {
  1859. --tw-border-opacity: 1;
  1860. border-color: hsl(var(--wa) / var(--tw-border-opacity));
  1861. --tw-bg-opacity: 1;
  1862. background-color: hsl(var(--wa) / var(--tw-bg-opacity));
  1863. --tw-text-opacity: 1;
  1864. color: hsl(var(--wac, var(--nc)) / var(--tw-text-opacity));
  1865. }
  1866. .btn-outline.btn-error {
  1867. --tw-text-opacity: 1;
  1868. color: hsl(var(--er) / var(--tw-text-opacity));
  1869. }
  1870. .btn-outline.btn-error:hover,
  1871. .btn-outline.btn-error.btn-active {
  1872. --tw-border-opacity: 1;
  1873. border-color: hsl(var(--er) / var(--tw-border-opacity));
  1874. --tw-bg-opacity: 1;
  1875. background-color: hsl(var(--er) / var(--tw-bg-opacity));
  1876. --tw-text-opacity: 1;
  1877. color: hsl(var(--erc, var(--nc)) / var(--tw-text-opacity));
  1878. }
  1879. /* disabled */
  1880. .btn-disabled,
  1881. .btn-disabled:hover,
  1882. .btn[disabled],
  1883. .btn[disabled]:hover {
  1884. --tw-border-opacity: 0;
  1885. background-color: hsl(var(--n) / var(--tw-bg-opacity));
  1886. --tw-bg-opacity: 0.2;
  1887. color: hsl(var(--bc) / var(--tw-text-opacity));
  1888. --tw-text-opacity: 0.2;
  1889. }
  1890. /* loading */
  1891. .btn.loading.btn-square:before,
  1892. .btn.loading.btn-circle:before {
  1893. margin-right: 0px;
  1894. }
  1895. .btn.loading.btn-xl:before,
  1896. .btn.loading.btn-lg:before {
  1897. height: 1.25rem;
  1898. width: 1.25rem;
  1899. }
  1900. .btn.loading.btn-sm:before,
  1901. .btn.loading.btn-xs:before {
  1902. height: 0.75rem;
  1903. width: 0.75rem;
  1904. }
  1905. /* group */
  1906. .btn-group > input[type="radio"]:checked.btn,
  1907. .btn-group > .btn-active {
  1908. --tw-border-opacity: 1;
  1909. border-color: hsl(var(--p) / var(--tw-border-opacity));
  1910. --tw-bg-opacity: 1;
  1911. background-color: hsl(var(--p) / var(--tw-bg-opacity));
  1912. --tw-text-opacity: 1;
  1913. color: hsl(var(--pc) / var(--tw-text-opacity));
  1914. }
  1915. .btn-group > input[type="radio"]:checked.btn:focus-visible, .btn-group > .btn-active:focus-visible {
  1916. outline: 2px solid hsl(var(--p));
  1917. }
  1918. @keyframes button-pop {
  1919. 0% {
  1920. transform: scale(var(--btn-focus-scale, 0.95));
  1921. }
  1922. 40% {
  1923. transform: scale(1.02);
  1924. }
  1925. 100% {
  1926. transform: scale(1);
  1927. }
  1928. }
  1929. .card {
  1930. border-radius: var(--rounded-box, 1rem);
  1931. }
  1932. .card :where(figure:first-child) {
  1933. overflow: hidden;
  1934. border-start-start-radius: inherit;
  1935. border-start-end-radius: inherit;
  1936. border-end-start-radius: unset;
  1937. border-end-end-radius: unset;
  1938. }
  1939. .card :where(figure:last-child) {
  1940. overflow: hidden;
  1941. border-start-start-radius: unset;
  1942. border-start-end-radius: unset;
  1943. border-end-start-radius: inherit;
  1944. border-end-end-radius: inherit;
  1945. }
  1946. .card:focus-visible {
  1947. outline: 2px solid currentColor;
  1948. outline-offset: 2px;
  1949. }
  1950. .card.bordered {
  1951. border-width: 1px;
  1952. --tw-border-opacity: 1;
  1953. border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity));
  1954. }
  1955. .card-bordered {
  1956. border-width: 1px;
  1957. --tw-border-opacity: 1;
  1958. border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity));
  1959. }
  1960. .card.compact .card-body {
  1961. padding: 1rem;
  1962. font-size: 0.875rem;
  1963. line-height: 1.25rem;
  1964. }
  1965. .card-body {
  1966. padding: var(--padding-card, 2rem);
  1967. display: flex;
  1968. flex-direction: column;
  1969. gap: 0.5rem;
  1970. }
  1971. .card-title {
  1972. display: flex;
  1973. align-items: center;
  1974. gap: 0.5rem;
  1975. font-size: 1.25rem;
  1976. line-height: 1.75rem;
  1977. font-weight: 600;
  1978. }
  1979. .card.image-full:before {
  1980. z-index: 10;
  1981. --tw-bg-opacity: 1;
  1982. background-color: hsl(var(--n) / var(--tw-bg-opacity));
  1983. opacity: 0.75;
  1984. border-radius: var(--rounded-box, 1rem);
  1985. }
  1986. .card.image-full > .card-body {
  1987. z-index: 20;
  1988. --tw-text-opacity: 1;
  1989. color: hsl(var(--nc) / var(--tw-text-opacity));
  1990. }
  1991. .card.image-full :where(figure) {
  1992. overflow: hidden;
  1993. border-radius: inherit;
  1994. }
  1995. .carousel {
  1996. -ms-overflow-style: none;
  1997. scrollbar-width: none;
  1998. }
  1999. .carousel::-webkit-scrollbar {
  2000. display: none;
  2001. }
  2002. .chat-bubble {
  2003. border-radius: var(--rounded-box, 1rem);
  2004. min-height: 2.75rem;
  2005. min-width: 2.75rem;
  2006. }
  2007. /* default */
  2008. .chat-bubble {
  2009. --tw-bg-opacity: 1;
  2010. background-color: hsl(var(--n) / var(--tw-bg-opacity));
  2011. --tw-text-opacity: 1;
  2012. color: hsl(var(--nc) / var(--tw-text-opacity));
  2013. }
  2014. /* brand colors */
  2015. .chat-bubble-primary {
  2016. --tw-bg-opacity: 1;
  2017. background-color: hsl(var(--p) / var(--tw-bg-opacity));
  2018. --tw-text-opacity: 1;
  2019. color: hsl(var(--pc) / var(--tw-text-opacity));
  2020. }
  2021. .chat-bubble-secondary {
  2022. --tw-bg-opacity: 1;
  2023. background-color: hsl(var(--s) / var(--tw-bg-opacity));
  2024. --tw-text-opacity: 1;
  2025. color: hsl(var(--sc) / var(--tw-text-opacity));
  2026. }
  2027. .chat-bubble-accent {
  2028. --tw-bg-opacity: 1;
  2029. background-color: hsl(var(--a) / var(--tw-bg-opacity));
  2030. --tw-text-opacity: 1;
  2031. color: hsl(var(--ac) / var(--tw-text-opacity));
  2032. }
  2033. /* state colors */
  2034. .chat-bubble-info {
  2035. --tw-bg-opacity: 1;
  2036. background-color: hsl(var(--in) / var(--tw-bg-opacity));
  2037. --tw-text-opacity: 1;
  2038. color: hsl(var(--inc, var(--nc)) / var(--tw-text-opacity));
  2039. }
  2040. .chat-bubble-success {
  2041. --tw-bg-opacity: 1;
  2042. background-color: hsl(var(--su) / var(--tw-bg-opacity));
  2043. --tw-text-opacity: 1;
  2044. color: hsl(var(--suc, var(--nc)) / var(--tw-text-opacity));
  2045. }
  2046. .chat-bubble-warning {
  2047. --tw-bg-opacity: 1;
  2048. background-color: hsl(var(--wa) / var(--tw-bg-opacity));
  2049. --tw-text-opacity: 1;
  2050. color: hsl(var(--wac, var(--nc)) / var(--tw-text-opacity));
  2051. }
  2052. .chat-bubble-error {
  2053. --tw-bg-opacity: 1;
  2054. background-color: hsl(var(--er) / var(--tw-bg-opacity));
  2055. --tw-text-opacity: 1;
  2056. color: hsl(var(--erc, var(--nc)) / var(--tw-text-opacity));
  2057. }
  2058. .chat-start .chat-bubble {
  2059. border-bottom-left-radius: 0px;
  2060. }
  2061. .chat-start .chat-bubble:before {
  2062. left: -0.75rem;
  2063. }
  2064. .chat-end .chat-bubble {
  2065. border-bottom-right-radius: 0px;
  2066. }
  2067. .chat-end .chat-bubble:before {
  2068. left: 100%;
  2069. }
  2070. .checkbox {
  2071. --chkbg: var(--bc);
  2072. --chkfg: var(--b1);
  2073. height: 1.5rem;
  2074. width: 1.5rem;
  2075. cursor: pointer;
  2076. appearance: none;
  2077. border-width: 1px;
  2078. border-color: hsl(var(--bc) / var(--tw-border-opacity));
  2079. --tw-border-opacity: 0.2;
  2080. border-radius: var(--rounded-btn, 0.5rem);
  2081. }
  2082. .checkbox:focus-visible {
  2083. outline: 2px solid hsl(var(--bc));
  2084. outline-offset: 2px;
  2085. }
  2086. .checkbox:checked,
  2087. .checkbox[checked="true"],
  2088. .checkbox[aria-checked="true"] {
  2089. --tw-bg-opacity: 1;
  2090. background-color: hsl(var(--bc) / var(--tw-bg-opacity));
  2091. background-repeat: no-repeat;
  2092. animation: checkmark var(--animation-input, 0.2s) ease-in-out;
  2093. background-image: linear-gradient(-45deg, transparent 65%, hsl(var(--chkbg)) 65.99%), linear-gradient(45deg, transparent 75%, hsl(var(--chkbg)) 75.99%), linear-gradient(-45deg, hsl(var(--chkbg)) 40%, transparent 40.99%), linear-gradient(45deg, hsl(var(--chkbg)) 30%, hsl(var(--chkfg)) 30.99%, hsl(var(--chkfg)) 40%, transparent 40.99%), linear-gradient(-45deg, hsl(var(--chkfg)) 50%, hsl(var(--chkbg)) 50.99%);
  2094. }
  2095. .checkbox:indeterminate {
  2096. --tw-bg-opacity: 1;
  2097. background-color: hsl(var(--bc) / var(--tw-bg-opacity));
  2098. background-repeat: no-repeat;
  2099. animation: checkmark var(--animation-input, 0.2s) ease-in-out;
  2100. background-image: linear-gradient(90deg, transparent 80%, hsl(var(--chkbg)) 80%), linear-gradient(-90deg, transparent 80%, hsl(var(--chkbg)) 80%), linear-gradient(0deg, hsl(var(--chkbg)) 43%, hsl(var(--chkfg)) 43%, hsl(var(--chkfg)) 57%, hsl(var(--chkbg)) 57%);
  2101. }
  2102. .checkbox-primary {
  2103. --chkbg: var(--p);
  2104. --chkfg: var(--pc);
  2105. --tw-border-opacity: 1;
  2106. border-color: hsl(var(--p) / var(--tw-border-opacity));
  2107. }
  2108. .checkbox-primary:hover {
  2109. --tw-border-opacity: 1;
  2110. border-color: hsl(var(--p) / var(--tw-border-opacity));
  2111. }
  2112. .checkbox-primary:focus-visible {
  2113. outline: 2px solid hsl(var(--p));
  2114. }
  2115. .checkbox-primary:checked,
  2116. .checkbox-primary[checked="true"],
  2117. .checkbox-primary[aria-checked="true"] {
  2118. --tw-border-opacity: 1;
  2119. border-color: hsl(var(--p) / var(--tw-border-opacity));
  2120. --tw-bg-opacity: 1;
  2121. background-color: hsl(var(--p) / var(--tw-bg-opacity));
  2122. --tw-text-opacity: 1;
  2123. color: hsl(var(--pc) / var(--tw-text-opacity));
  2124. }
  2125. .checkbox-secondary {
  2126. --chkbg: var(--s);
  2127. --chkfg: var(--sc);
  2128. --tw-border-opacity: 1;
  2129. border-color: hsl(var(--s) / var(--tw-border-opacity));
  2130. }
  2131. .checkbox-secondary:hover {
  2132. --tw-border-opacity: 1;
  2133. border-color: hsl(var(--s) / var(--tw-border-opacity));
  2134. }
  2135. .checkbox-secondary:focus-visible {
  2136. outline: 2px solid hsl(var(--s));
  2137. }
  2138. .checkbox-secondary:checked,
  2139. .checkbox-secondary[checked="true"],
  2140. .checkbox-secondary[aria-checked="true"] {
  2141. --tw-border-opacity: 1;
  2142. border-color: hsl(var(--s) / var(--tw-border-opacity));
  2143. --tw-bg-opacity: 1;
  2144. background-color: hsl(var(--s) / var(--tw-bg-opacity));
  2145. --tw-text-opacity: 1;
  2146. color: hsl(var(--sc) / var(--tw-text-opacity));
  2147. }
  2148. .checkbox-accent {
  2149. --chkbg: var(--a);
  2150. --chkfg: var(--ac);
  2151. --tw-border-opacity: 1;
  2152. border-color: hsl(var(--a) / var(--tw-border-opacity));
  2153. }
  2154. .checkbox-accent:hover {
  2155. --tw-border-opacity: 1;
  2156. border-color: hsl(var(--a) / var(--tw-border-opacity));
  2157. }
  2158. .checkbox-accent:focus-visible {
  2159. outline: 2px solid hsl(var(--a));
  2160. }
  2161. .checkbox-accent:checked,
  2162. .checkbox-accent[checked="true"],
  2163. .checkbox-accent[aria-checked="true"] {
  2164. --tw-border-opacity: 1;
  2165. border-color: hsl(var(--a) / var(--tw-border-opacity));
  2166. --tw-bg-opacity: 1;
  2167. background-color: hsl(var(--a) / var(--tw-bg-opacity));
  2168. --tw-text-opacity: 1;
  2169. color: hsl(var(--ac) / var(--tw-text-opacity));
  2170. }
  2171. .checkbox-success {
  2172. --chkbg: var(--su);
  2173. --chkfg: var(--suc);
  2174. --tw-border-opacity: 1;
  2175. border-color: hsl(var(--su) / var(--tw-border-opacity));
  2176. }
  2177. .checkbox-success:hover {
  2178. --tw-border-opacity: 1;
  2179. border-color: hsl(var(--su) / var(--tw-border-opacity));
  2180. }
  2181. .checkbox-success:focus-visible {
  2182. outline: 2px solid hsl(var(--su));
  2183. }
  2184. .checkbox-success:checked,
  2185. .checkbox-success[checked="true"],
  2186. .checkbox-success[aria-checked=true] {
  2187. --tw-border-opacity: 1;
  2188. border-color: hsl(var(--su) / var(--tw-border-opacity));
  2189. --tw-bg-opacity: 1;
  2190. background-color: hsl(var(--su) / var(--tw-bg-opacity));
  2191. --tw-text-opacity: 1;
  2192. color: hsl(var(--suc, var(--nc)) / var(--tw-text-opacity));
  2193. }
  2194. .checkbox-warning {
  2195. --chkbg: var(--wa);
  2196. --chkfg: var(--wac);
  2197. --tw-border-opacity: 1;
  2198. border-color: hsl(var(--wa) / var(--tw-border-opacity));
  2199. }
  2200. .checkbox-warning:hover {
  2201. --tw-border-opacity: 1;
  2202. border-color: hsl(var(--wa) / var(--tw-border-opacity));
  2203. }
  2204. .checkbox-warning:focus-visible {
  2205. outline: 2px solid hsl(var(--wa));
  2206. }
  2207. .checkbox-warning:checked,
  2208. .checkbox-warning[checked="true"],
  2209. .checkbox-warning[aria-checked=true] {
  2210. --tw-border-opacity: 1;
  2211. border-color: hsl(var(--wa) / var(--tw-border-opacity));
  2212. --tw-bg-opacity: 1;
  2213. background-color: hsl(var(--wa) / var(--tw-bg-opacity));
  2214. --tw-text-opacity: 1;
  2215. color: hsl(var(--wac, var(--nc)) / var(--tw-text-opacity));
  2216. }
  2217. .checkbox-info {
  2218. --chkbg: var(--in);
  2219. --chkfg: var(--inc);
  2220. --tw-border-opacity: 1;
  2221. border-color: hsl(var(--in) / var(--tw-border-opacity));
  2222. }
  2223. .checkbox-info:hover {
  2224. --tw-border-opacity: 1;
  2225. border-color: hsl(var(--in) / var(--tw-border-opacity));
  2226. }
  2227. .checkbox-info:focus-visible {
  2228. outline: 2px solid hsl(var(--in));
  2229. }
  2230. .checkbox-info:checked,
  2231. .checkbox-info[checked="true"],
  2232. .checkbox-info[aria-checked=true] {
  2233. --tw-border-opacity: 1;
  2234. border-color: hsl(var(--in) / var(--tw-border-opacity));
  2235. --tw-bg-opacity: 1;
  2236. background-color: hsl(var(--in) / var(--tw-bg-opacity));
  2237. --tw-text-opacity: 1;
  2238. color: hsl(var(--inc, var(--nc)) / var(--tw-text-opacity));
  2239. }
  2240. .checkbox-error {
  2241. --chkbg: var(--er);
  2242. --chkfg: var(--erc);
  2243. --tw-border-opacity: 1;
  2244. border-color: hsl(var(--er) / var(--tw-border-opacity));
  2245. }
  2246. .checkbox-error:hover {
  2247. --tw-border-opacity: 1;
  2248. border-color: hsl(var(--er) / var(--tw-border-opacity));
  2249. }
  2250. .checkbox-error:focus-visible {
  2251. outline: 2px solid hsl(var(--er));
  2252. }
  2253. .checkbox-error:checked,
  2254. .checkbox-error[checked="true"],
  2255. .checkbox-error[aria-checked=true] {
  2256. --tw-border-opacity: 1;
  2257. border-color: hsl(var(--er) / var(--tw-border-opacity));
  2258. --tw-bg-opacity: 1;
  2259. background-color: hsl(var(--er) / var(--tw-bg-opacity));
  2260. --tw-text-opacity: 1;
  2261. color: hsl(var(--erc, var(--nc)) / var(--tw-text-opacity));
  2262. }
  2263. .checkbox:disabled {
  2264. cursor: not-allowed;
  2265. border-color: transparent;
  2266. --tw-bg-opacity: 1;
  2267. background-color: hsl(var(--bc) / var(--tw-bg-opacity));
  2268. opacity: 0.2;
  2269. }
  2270. @keyframes checkmark {
  2271. 0% {
  2272. background-position-y: 5px;
  2273. }
  2274. 50% {
  2275. background-position-y: -2px;
  2276. }
  2277. 100% {
  2278. background-position-y: 0;
  2279. }
  2280. }
  2281. /* backward compatibility */
  2282. .checkbox-mark {
  2283. display: none;
  2284. }
  2285. [dir="rtl"] .checkbox:checked,
  2286. [dir="rtl"] .checkbox[checked="true"],
  2287. [dir="rtl"] .checkbox[aria-checked="true"] {
  2288. background-image: linear-gradient(45deg, transparent 65%, hsl(var(--chkbg)) 65.99%), linear-gradient(-45deg, transparent 75%, hsl(var(--chkbg)) 75.99%), linear-gradient(45deg, hsl(var(--chkbg)) 40%, transparent 40.99%), linear-gradient(-45deg, hsl(var(--chkbg)) 30%, hsl(var(--chkfg)) 30.99%, hsl(var(--chkfg)) 40%, transparent 40.99%), linear-gradient(45deg, hsl(var(--chkfg)) 50%, hsl(var(--chkbg)) 50.99%);
  2289. }
  2290. .collapse:focus-visible {
  2291. outline: 2px solid hsl(var(--nf));
  2292. outline-offset: 2px;
  2293. }
  2294. .collapse-arrow .collapse-title:after {
  2295. position: absolute;
  2296. display: block;
  2297. height: 0.5rem;
  2298. width: 0.5rem;
  2299. --tw-translate-y: -100%;
  2300. --tw-rotate: 45deg;
  2301. transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  2302. transition-property: all;
  2303. transition-duration: 150ms;
  2304. transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  2305. transition-duration: 0.2s;
  2306. top: 50%;
  2307. right: 1.4rem;
  2308. content: "";
  2309. transform-origin: 75% 75%;
  2310. box-shadow: 2px 2px;
  2311. pointer-events: none;
  2312. }
  2313. [dir="rtl"] .collapse-arrow .collapse-title:after {
  2314. --tw-rotate: -45deg;
  2315. }
  2316. .collapse-plus .collapse-title:after {
  2317. position: absolute;
  2318. display: block;
  2319. height: 0.5rem;
  2320. width: 0.5rem;
  2321. transition-property: all;
  2322. transition-duration: 300ms;
  2323. transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  2324. top: 0.9rem;
  2325. right: 1.4rem;
  2326. content: "+";
  2327. pointer-events: none;
  2328. }
  2329. .collapse:not(.collapse-open):not(.collapse-close) input[type="checkbox"],
  2330. .collapse:not(.collapse-open):not(.collapse-close) .collapse-title {
  2331. cursor: pointer;
  2332. }
  2333. .collapse:focus:not(.collapse-open):not(.collapse-close) .collapse-title {
  2334. cursor: unset;
  2335. }
  2336. .collapse-title {
  2337. position: relative;
  2338. }
  2339. :where(.collapse > input[type="checkbox"]) {
  2340. z-index: 1;
  2341. }
  2342. .collapse-title,
  2343. :where(.collapse > input[type="checkbox"]) {
  2344. width: 100%;
  2345. padding: 1rem;
  2346. padding-right: 3rem;
  2347. min-height: 3.75rem;
  2348. transition: background-color 0.2s ease-in-out;
  2349. }
  2350. /*
  2351. .collapse-open :where(.collapse-title),
  2352. .collapse:focus:not(.collapse-close) :where(.collapse-title),
  2353. .collapse:not(.collapse-close) :where(input[type="checkbox"]:checked ~ .collapse-title) {
  2354. @apply bg-base-content bg-opacity-10;
  2355. } */
  2356. .collapse-content {
  2357. padding-left: 1rem;
  2358. padding-right: 1rem;
  2359. cursor: unset;
  2360. transition: padding 0.2s ease-in-out, background-color 0.2s ease-in-out;
  2361. }
  2362. .collapse-open :where(.collapse-content),
  2363. .collapse:focus:not(.collapse-close) :where(.collapse-content),
  2364. .collapse:not(.collapse-close) :where(input[type="checkbox"]:checked ~ .collapse-content) {
  2365. padding-bottom: 1rem;
  2366. transition: padding 0.2s ease-in-out, background-color 0.2s ease-in-out;
  2367. }
  2368. .collapse-open.collapse-arrow .collapse-title:after,
  2369. .collapse-arrow:focus:not(.collapse-close) .collapse-title:after,
  2370. .collapse-arrow:not(.collapse-close) input[type="checkbox"]:checked ~ .collapse-title:after {
  2371. --tw-translate-y: -50%;
  2372. --tw-rotate: 225deg;
  2373. transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  2374. }
  2375. [dir="rtl"] .collapse-open.collapse-arrow .collapse-title:after,
  2376. [dir="rtl"] .collapse-arrow:focus:not(.collapse-close) .collapse-title:after,
  2377. [dir="rtl"] .collapse-arrow:not(.collapse-close) input[type="checkbox"]:checked ~ .collapse-title:after {
  2378. --tw-rotate: 135deg;
  2379. }
  2380. .collapse-open.collapse-plus .collapse-title:after,
  2381. .collapse-plus:focus:not(.collapse-close) .collapse-title:after,
  2382. .collapse-plus:not(.collapse-close) input[type="checkbox"]:checked ~ .collapse-title:after {
  2383. content: "−";
  2384. }
  2385. .countdown > *:before {
  2386. text-align: center;
  2387. transition: all 1s cubic-bezier(1, 0, 0, 1);
  2388. }
  2389. .divider {
  2390. margin-top: 1rem;
  2391. margin-bottom: 1rem;
  2392. height: 1rem;
  2393. white-space: nowrap
  2394. }
  2395. .divider:before {
  2396. background-color: hsl(var(--bc) / var(--tw-bg-opacity));
  2397. --tw-bg-opacity: 0.1
  2398. }
  2399. .divider:after {
  2400. background-color: hsl(var(--bc) / var(--tw-bg-opacity));
  2401. --tw-bg-opacity: 0.1
  2402. }
  2403. .divider:not(:empty) {
  2404. gap: 1rem
  2405. }
  2406. .drawer.drawer-end > .drawer-toggle:checked ~ .drawer-content {
  2407. --tw-translate-x: -0.5rem;
  2408. transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  2409. }
  2410. .drawer-toggle ~ .drawer-content {
  2411. transition-property: all;
  2412. transition-duration: 300ms;
  2413. transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  2414. }
  2415. .drawer-toggle ~ .drawer-side > .drawer-overlay {
  2416. cursor: pointer;
  2417. --tw-bg-opacity: 1;
  2418. background-color: hsl(var(--nf, var(--n)) / var(--tw-bg-opacity));
  2419. transition-property: all;
  2420. transition-duration: 300ms;
  2421. transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  2422. }
  2423. .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
  2424. transition-property: all;
  2425. transition-duration: 300ms;
  2426. transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  2427. }
  2428. .drawer-toggle:checked ~ .drawer-content {
  2429. --tw-translate-x: 0.5rem;
  2430. transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  2431. }
  2432. .drawer-toggle:checked ~ .drawer-side > .drawer-overlay {
  2433. opacity: 0.999999; /* 1 causes a bug on chrome 🤷‍♂️ */ --tw-bg-opacity: 0.4;
  2434. }
  2435. .drawer-toggle:focus-visible ~ .drawer-content .drawer-button {
  2436. outline: 2px solid hsl(var(--nf));
  2437. outline-offset: 2px;
  2438. }
  2439. .drawer-toggle:focus-visible ~ .drawer-content .drawer-button.btn-primary {
  2440. outline: 2px solid hsl(var(--p));
  2441. }
  2442. .drawer-toggle:focus-visible ~ .drawer-content .drawer-button.btn-secondary {
  2443. outline: 2px solid hsl(var(--s));
  2444. }
  2445. .drawer-toggle:focus-visible ~ .drawer-content .drawer-button.btn-accent {
  2446. outline: 2px solid hsl(var(--a));
  2447. }
  2448. .drawer-toggle:focus-visible ~ .drawer-content .drawer-button.btn-info {
  2449. outline: 2px solid hsl(var(--in));
  2450. }
  2451. .drawer-toggle:focus-visible ~ .drawer-content .drawer-button.btn-success {
  2452. outline: 2px solid hsl(var(--su));
  2453. }
  2454. .drawer-toggle:focus-visible ~ .drawer-content .drawer-button.btn-warning {
  2455. outline: 2px solid hsl(var(--wa));
  2456. }
  2457. .drawer-toggle:focus-visible ~ .drawer-content .drawer-button.btn-error {
  2458. outline: 2px solid hsl(var(--er));
  2459. }
  2460. .drawer-toggle:focus-visible ~ .drawer-content .drawer-button.glass {
  2461. outline: 2px solid currentColor;
  2462. }
  2463. .drawer-toggle:focus-visible ~ .drawer-content .drawer-button.btn-ghost {
  2464. outline: 2px solid currentColor;
  2465. }
  2466. .drawer-toggle:focus-visible ~ .drawer-content .drawer-button.btn-link {
  2467. outline: 2px solid currentColor;
  2468. }
  2469. @media (min-width: 1024px) {
  2470. .drawer-mobile > .drawer-toggle:checked ~ .drawer-content {
  2471. --tw-translate-x: 0px;
  2472. transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  2473. }
  2474. }
  2475. .dropdown .dropdown-content {
  2476. transform-origin: top;
  2477. --tw-scale-x: .95;
  2478. --tw-scale-y: .95;
  2479. transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  2480. transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  2481. transition-duration: 200ms;
  2482. transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
  2483. }
  2484. .dropdown-bottom .dropdown-content {
  2485. transform-origin: top
  2486. }
  2487. .dropdown-top .dropdown-content {
  2488. transform-origin: bottom
  2489. }
  2490. .dropdown-left .dropdown-content {
  2491. transform-origin: right
  2492. }
  2493. .dropdown-right .dropdown-content {
  2494. transform-origin: left
  2495. }
  2496. .dropdown.dropdown-open .dropdown-content,
  2497. .dropdown.dropdown-hover:hover .dropdown-content,
  2498. .dropdown:focus .dropdown-content,
  2499. .dropdown:focus-within .dropdown-content {
  2500. --tw-scale-x: 1;
  2501. --tw-scale-y: 1;
  2502. transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  2503. }
  2504. .file-input {
  2505. overflow: hidden;
  2506. border-width: 1px;
  2507. border-color: hsl(var(--bc) / var(--tw-border-opacity));
  2508. --tw-border-opacity: 0;
  2509. --tw-bg-opacity: 1;
  2510. background-color: hsl(var(--b1) / var(--tw-bg-opacity));
  2511. font-size: 1rem;
  2512. line-height: 1.5rem;
  2513. border-radius: var(--rounded-btn, 0.5rem);
  2514. }
  2515. .file-input::file-selector-button {
  2516. border-style: solid;
  2517. --tw-border-opacity: 1;
  2518. border-color: hsl(var(--n) / var(--tw-border-opacity));
  2519. --tw-bg-opacity: 1;
  2520. background-color: hsl(var(--n) / var(--tw-bg-opacity));
  2521. font-weight: 600;
  2522. text-transform: uppercase;
  2523. --tw-text-opacity: 1;
  2524. color: hsl(var(--nc) / var(--tw-text-opacity));
  2525. text-decoration-line: none;
  2526. border-width: var(--border-btn, 1px);
  2527. animation: button-pop var(--animation-btn, 0.25s) ease-out;
  2528. text-transform: var(--btn-text-case, uppercase);
  2529. }
  2530. .file-input-bordered {
  2531. --tw-border-opacity: 0.2;
  2532. }
  2533. .file-input:focus {
  2534. outline: 2px solid hsla(var(--bc) / 0.2);
  2535. outline-offset: 2px;
  2536. }
  2537. .file-input-ghost {
  2538. --tw-bg-opacity: 0.05;
  2539. }
  2540. .file-input-ghost:focus {
  2541. --tw-bg-opacity: 1;
  2542. --tw-text-opacity: 1;
  2543. color: hsl(var(--bc) / var(--tw-text-opacity));
  2544. box-shadow: none;
  2545. }
  2546. .file-input-ghost::file-selector-button {
  2547. border-width: 1px;
  2548. border-color: transparent;
  2549. background-color: transparent;
  2550. color: currentColor;
  2551. }
  2552. .file-input-primary {
  2553. --tw-border-opacity: 1;
  2554. border-color: hsl(var(--p) / var(--tw-border-opacity));
  2555. }
  2556. .file-input-primary:focus {
  2557. outline: 2px solid hsl(var(--p));
  2558. }
  2559. .file-input-primary::file-selector-button {
  2560. --tw-border-opacity: 1;
  2561. border-color: hsl(var(--p) / var(--tw-border-opacity));
  2562. --tw-bg-opacity: 1;
  2563. background-color: hsl(var(--p) / var(--tw-bg-opacity));
  2564. --tw-text-opacity: 1;
  2565. color: hsl(var(--pc) / var(--tw-text-opacity));
  2566. }
  2567. .file-input-secondary {
  2568. --tw-border-opacity: 1;
  2569. border-color: hsl(var(--s) / var(--tw-border-opacity));
  2570. }
  2571. .file-input-secondary:focus {
  2572. outline: 2px solid hsl(var(--s));
  2573. }
  2574. .file-input-secondary::file-selector-button {
  2575. --tw-border-opacity: 1;
  2576. border-color: hsl(var(--s) / var(--tw-border-opacity));
  2577. --tw-bg-opacity: 1;
  2578. background-color: hsl(var(--s) / var(--tw-bg-opacity));
  2579. --tw-text-opacity: 1;
  2580. color: hsl(var(--sc) / var(--tw-text-opacity));
  2581. }
  2582. .file-input-accent {
  2583. --tw-border-opacity: 1;
  2584. border-color: hsl(var(--a) / var(--tw-border-opacity));
  2585. }
  2586. .file-input-accent:focus {
  2587. outline: 2px solid hsl(var(--a));
  2588. }
  2589. .file-input-accent::file-selector-button {
  2590. --tw-border-opacity: 1;
  2591. border-color: hsl(var(--a) / var(--tw-border-opacity));
  2592. --tw-bg-opacity: 1;
  2593. background-color: hsl(var(--a) / var(--tw-bg-opacity));
  2594. --tw-text-opacity: 1;
  2595. color: hsl(var(--ac) / var(--tw-text-opacity));
  2596. }
  2597. .file-input-info {
  2598. --tw-border-opacity: 1;
  2599. border-color: hsl(var(--in) / var(--tw-border-opacity));
  2600. }
  2601. .file-input-info:focus {
  2602. outline: 2px solid hsl(var(--in));
  2603. }
  2604. .file-input-info::file-selector-button {
  2605. --tw-border-opacity: 1;
  2606. border-color: hsl(var(--in) / var(--tw-border-opacity));
  2607. --tw-bg-opacity: 1;
  2608. background-color: hsl(var(--in) / var(--tw-bg-opacity));
  2609. --tw-text-opacity: 1;
  2610. color: hsl(var(--inc, var(--nc)) / var(--tw-text-opacity));
  2611. }
  2612. .file-input-success {
  2613. --tw-border-opacity: 1;
  2614. border-color: hsl(var(--su) / var(--tw-border-opacity));
  2615. }
  2616. .file-input-success:focus {
  2617. outline: 2px solid hsl(var(--su));
  2618. }
  2619. .file-input-success::file-selector-button {
  2620. --tw-border-opacity: 1;
  2621. border-color: hsl(var(--su) / var(--tw-border-opacity));
  2622. --tw-bg-opacity: 1;
  2623. background-color: hsl(var(--su) / var(--tw-bg-opacity));
  2624. --tw-text-opacity: 1;
  2625. color: hsl(var(--suc, var(--nc)) / var(--tw-text-opacity));
  2626. }
  2627. .file-input-warning {
  2628. --tw-border-opacity: 1;
  2629. border-color: hsl(var(--wa) / var(--tw-border-opacity));
  2630. }
  2631. .file-input-warning:focus {
  2632. outline: 2px solid hsl(var(--wa));
  2633. }
  2634. .file-input-warning::file-selector-button {
  2635. --tw-border-opacity: 1;
  2636. border-color: hsl(var(--wa) / var(--tw-border-opacity));
  2637. --tw-bg-opacity: 1;
  2638. background-color: hsl(var(--wa) / var(--tw-bg-opacity));
  2639. --tw-text-opacity: 1;
  2640. color: hsl(var(--wac, var(--nc)) / var(--tw-text-opacity));
  2641. }
  2642. .file-input-error {
  2643. --tw-border-opacity: 1;
  2644. border-color: hsl(var(--er) / var(--tw-border-opacity));
  2645. }
  2646. .file-input-error:focus {
  2647. outline: 2px solid hsl(var(--er));
  2648. }
  2649. .file-input-error::file-selector-button {
  2650. --tw-border-opacity: 1;
  2651. border-color: hsl(var(--er) / var(--tw-border-opacity));
  2652. --tw-bg-opacity: 1;
  2653. background-color: hsl(var(--er) / var(--tw-bg-opacity));
  2654. --tw-text-opacity: 1;
  2655. color: hsl(var(--erc, var(--nc)) / var(--tw-text-opacity));
  2656. }
  2657. .file-input-disabled,
  2658. .file-input[disabled] {
  2659. cursor: not-allowed;
  2660. --tw-border-opacity: 1;
  2661. border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity));
  2662. --tw-bg-opacity: 1;
  2663. background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
  2664. --tw-text-opacity: 0.2;
  2665. }
  2666. .file-input-disabled::placeholder,
  2667. .file-input[disabled]::placeholder {
  2668. color: hsl(var(--bc) / var(--tw-placeholder-opacity));
  2669. --tw-placeholder-opacity: 0.2;
  2670. }
  2671. .file-input-disabled::file-selector-button, .file-input[disabled]::file-selector-button {
  2672. --tw-border-opacity: 0;
  2673. background-color: hsl(var(--n) / var(--tw-bg-opacity));
  2674. --tw-bg-opacity: 0.2;
  2675. color: hsl(var(--bc) / var(--tw-text-opacity));
  2676. --tw-text-opacity: 0.2;
  2677. }
  2678. .footer {
  2679. row-gap: 2.5rem;
  2680. column-gap: 1rem;
  2681. font-size: 0.875rem;
  2682. line-height: 1.25rem
  2683. }
  2684. .footer > * {
  2685. gap: 0.5rem
  2686. }
  2687. .footer-title {
  2688. margin-bottom: 0.5rem;
  2689. font-weight: 700;
  2690. text-transform: uppercase;
  2691. opacity: 0.5
  2692. }
  2693. .label {
  2694. padding-left: 0.25rem;
  2695. padding-right: 0.25rem;
  2696. padding-top: 0.5rem;
  2697. padding-bottom: 0.5rem
  2698. }
  2699. .label-text {
  2700. font-size: 0.875rem;
  2701. line-height: 1.25rem;
  2702. --tw-text-opacity: 1;
  2703. color: hsl(var(--bc) / var(--tw-text-opacity))
  2704. }
  2705. .label-text-alt {
  2706. font-size: 0.75rem;
  2707. line-height: 1rem;
  2708. --tw-text-opacity: 1;
  2709. color: hsl(var(--bc) / var(--tw-text-opacity))
  2710. }
  2711. .label a:hover {
  2712. --tw-text-opacity: 1;
  2713. color: hsl(var(--bc) / var(--tw-text-opacity))
  2714. }
  2715. .hero-overlay {
  2716. background-color: hsl(var(--n) / var(--tw-bg-opacity));
  2717. --tw-bg-opacity: 0.5
  2718. }
  2719. .hero-content {
  2720. max-width: 80rem;
  2721. gap: 1rem;
  2722. padding: 1rem
  2723. }
  2724. .input {
  2725. border-width: 1px;
  2726. border-color: hsl(var(--bc) / var(--tw-border-opacity));
  2727. --tw-border-opacity: 0;
  2728. --tw-bg-opacity: 1;
  2729. background-color: hsl(var(--b1) / var(--tw-bg-opacity));
  2730. font-size: 1rem;
  2731. line-height: 1.5rem;
  2732. border-radius: var(--rounded-btn, 0.5rem);
  2733. /* &::-webkit-calendar-picker-indicator {
  2734. display: none;
  2735. } */
  2736. }
  2737. .input[list]::-webkit-calendar-picker-indicator {
  2738. line-height: 1em;
  2739. }
  2740. .input-bordered {
  2741. --tw-border-opacity: 0.2;
  2742. }
  2743. .input:focus {
  2744. outline: 2px solid hsla(var(--bc) / 0.2);
  2745. outline-offset: 2px;
  2746. }
  2747. .input-ghost {
  2748. --tw-bg-opacity: 0.05;
  2749. }
  2750. .input-ghost:focus {
  2751. --tw-bg-opacity: 1;
  2752. --tw-text-opacity: 1;
  2753. color: hsl(var(--bc) / var(--tw-text-opacity));
  2754. box-shadow: none;
  2755. }
  2756. .input-primary {
  2757. --tw-border-opacity: 1;
  2758. border-color: hsl(var(--p) / var(--tw-border-opacity));
  2759. }
  2760. .input-primary:focus {
  2761. outline: 2px solid hsl(var(--p));
  2762. }
  2763. .input-secondary {
  2764. --tw-border-opacity: 1;
  2765. border-color: hsl(var(--s) / var(--tw-border-opacity));
  2766. }
  2767. .input-secondary:focus {
  2768. outline: 2px solid hsl(var(--s));
  2769. }
  2770. .input-accent {
  2771. --tw-border-opacity: 1;
  2772. border-color: hsl(var(--a) / var(--tw-border-opacity));
  2773. }
  2774. .input-accent:focus {
  2775. outline: 2px solid hsl(var(--a));
  2776. }
  2777. .input-info {
  2778. --tw-border-opacity: 1;
  2779. border-color: hsl(var(--in) / var(--tw-border-opacity));
  2780. }
  2781. .input-info:focus {
  2782. outline: 2px solid hsl(var(--in));
  2783. }
  2784. .input-success {
  2785. --tw-border-opacity: 1;
  2786. border-color: hsl(var(--su) / var(--tw-border-opacity));
  2787. }
  2788. .input-success:focus {
  2789. outline: 2px solid hsl(var(--su));
  2790. }
  2791. .input-warning {
  2792. --tw-border-opacity: 1;
  2793. border-color: hsl(var(--wa) / var(--tw-border-opacity));
  2794. }
  2795. .input-warning:focus {
  2796. outline: 2px solid hsl(var(--wa));
  2797. }
  2798. .input-error {
  2799. --tw-border-opacity: 1;
  2800. border-color: hsl(var(--er) / var(--tw-border-opacity));
  2801. }
  2802. .input-error:focus {
  2803. outline: 2px solid hsl(var(--er));
  2804. }
  2805. .input-disabled,
  2806. .input[disabled] {
  2807. cursor: not-allowed;
  2808. --tw-border-opacity: 1;
  2809. border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity));
  2810. --tw-bg-opacity: 1;
  2811. background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
  2812. --tw-text-opacity: 0.2;
  2813. }
  2814. .input-disabled::placeholder,
  2815. .input[disabled]::placeholder {
  2816. color: hsl(var(--bc) / var(--tw-placeholder-opacity));
  2817. --tw-placeholder-opacity: 0.2;
  2818. }
  2819. .kbd {
  2820. border-width: 1px;
  2821. border-color: hsl(var(--bc) / var(--tw-border-opacity));
  2822. --tw-border-opacity: 0.2;
  2823. --tw-bg-opacity: 1;
  2824. background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
  2825. padding-left: 0.5rem;
  2826. padding-right: 0.5rem;
  2827. border-radius: var(--rounded-btn, 0.5rem);
  2828. border-bottom-width: 2px;
  2829. min-height: 2.2em;
  2830. min-width: 2.2em
  2831. }
  2832. .link-primary {
  2833. --tw-text-opacity: 1;
  2834. color: hsl(var(--p) / var(--tw-text-opacity));
  2835. }
  2836. .link-primary:hover {
  2837. --tw-text-opacity: 1;
  2838. color: hsl(var(--pf, var(--p)) / var(--tw-text-opacity));
  2839. }
  2840. .link-secondary {
  2841. --tw-text-opacity: 1;
  2842. color: hsl(var(--s) / var(--tw-text-opacity));
  2843. }
  2844. .link-secondary:hover {
  2845. --tw-text-opacity: 1;
  2846. color: hsl(var(--sf, var(--s)) / var(--tw-text-opacity));
  2847. }
  2848. .link-accent {
  2849. --tw-text-opacity: 1;
  2850. color: hsl(var(--a) / var(--tw-text-opacity));
  2851. }
  2852. .link-accent:hover {
  2853. --tw-text-opacity: 1;
  2854. color: hsl(var(--af, var(--a)) / var(--tw-text-opacity));
  2855. }
  2856. .link-neutral {
  2857. --tw-text-opacity: 1;
  2858. color: hsl(var(--n) / var(--tw-text-opacity));
  2859. }
  2860. .link-neutral:hover {
  2861. --tw-text-opacity: 1;
  2862. color: hsl(var(--nf, var(--n)) / var(--tw-text-opacity));
  2863. }
  2864. .link-success {
  2865. --tw-text-opacity: 1;
  2866. color: hsl(var(--su) / var(--tw-text-opacity));
  2867. }
  2868. .link-success:hover {
  2869. --tw-text-opacity: 1;
  2870. color: hsl(var(--su) / var(--tw-text-opacity));
  2871. }
  2872. .link-info {
  2873. --tw-text-opacity: 1;
  2874. color: hsl(var(--in) / var(--tw-text-opacity));
  2875. }
  2876. .link-info:hover {
  2877. --tw-text-opacity: 1;
  2878. color: hsl(var(--in) / var(--tw-text-opacity));
  2879. }
  2880. .link-warning {
  2881. --tw-text-opacity: 1;
  2882. color: hsl(var(--wa) / var(--tw-text-opacity));
  2883. }
  2884. .link-warning:hover {
  2885. --tw-text-opacity: 1;
  2886. color: hsl(var(--wa) / var(--tw-text-opacity));
  2887. }
  2888. .link-error {
  2889. --tw-text-opacity: 1;
  2890. color: hsl(var(--er) / var(--tw-text-opacity));
  2891. }
  2892. .link-error:hover {
  2893. --tw-text-opacity: 1;
  2894. color: hsl(var(--er) / var(--tw-text-opacity));
  2895. }
  2896. .link:focus {
  2897. outline: 2px solid transparent;
  2898. outline-offset: 2px;
  2899. }
  2900. .link:focus-visible {
  2901. outline: 2px solid currentColor;
  2902. outline-offset: 2px;
  2903. }
  2904. .mask-squircle {
  2905. -webkit-mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 0C20 0 0 20 0 100s20 100 100 100 100-20 100-100S180 0 100 0Z'/%3e%3c/svg%3e");
  2906. mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 0C20 0 0 20 0 100s20 100 100 100 100-20 100-100S180 0 100 0Z'/%3e%3c/svg%3e");
  2907. }
  2908. .mask-decagon {
  2909. -webkit-mask-image: url("data:image/svg+xml,%3csvg width='192' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 0 58.779 19.098 36.327 50v61.804l-36.327 50L96 200l-58.779-19.098-36.327-50V69.098l36.327-50z' fill-rule='evenodd'/%3e%3c/svg%3e");
  2910. mask-image: url("data:image/svg+xml,%3csvg width='192' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 0 58.779 19.098 36.327 50v61.804l-36.327 50L96 200l-58.779-19.098-36.327-50V69.098l36.327-50z' fill-rule='evenodd'/%3e%3c/svg%3e");
  2911. }
  2912. .mask-diamond {
  2913. -webkit-mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m100 0 100 100-100 100L0 100z' fill-rule='evenodd'/%3e%3c/svg%3e");
  2914. mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m100 0 100 100-100 100L0 100z' fill-rule='evenodd'/%3e%3c/svg%3e");
  2915. }
  2916. .mask-heart {
  2917. -webkit-mask-image: url("data:image/svg+xml,%3csvg width='200' height='185' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
  2918. mask-image: url("data:image/svg+xml,%3csvg width='200' height='185' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
  2919. }
  2920. .mask-hexagon {
  2921. -webkit-mask-image: url("data:image/svg+xml,%3csvg width='182' height='201' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M.3 65.486c0-9.196 6.687-20.063 14.211-25.078l61.86-35.946c8.36-5.016 20.899-5.016 29.258 0l61.86 35.946c8.36 5.015 14.211 15.882 14.211 25.078v71.055c0 9.196-6.687 20.063-14.211 25.079l-61.86 35.945c-8.36 4.18-20.899 4.18-29.258 0L14.51 161.62C6.151 157.44.3 145.737.3 136.54V65.486Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
  2922. mask-image: url("data:image/svg+xml,%3csvg width='182' height='201' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M.3 65.486c0-9.196 6.687-20.063 14.211-25.078l61.86-35.946c8.36-5.016 20.899-5.016 29.258 0l61.86 35.946c8.36 5.015 14.211 15.882 14.211 25.078v71.055c0 9.196-6.687 20.063-14.211 25.079l-61.86 35.945c-8.36 4.18-20.899 4.18-29.258 0L14.51 161.62C6.151 157.44.3 145.737.3 136.54V65.486Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
  2923. }
  2924. .mask-hexagon-2 {
  2925. -webkit-mask-image: url("data:image/svg+xml,%3csvg width='200' height='182' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M64.786 181.4c-9.196 0-20.063-6.687-25.079-14.21L3.762 105.33c-5.016-8.36-5.016-20.9 0-29.259l35.945-61.86C44.723 5.851 55.59 0 64.786 0h71.055c9.196 0 20.063 6.688 25.079 14.211l35.945 61.86c4.18 8.36 4.18 20.899 0 29.258l-35.945 61.86c-4.18 8.36-15.883 14.211-25.079 14.211H64.786Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
  2926. mask-image: url("data:image/svg+xml,%3csvg width='200' height='182' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M64.786 181.4c-9.196 0-20.063-6.687-25.079-14.21L3.762 105.33c-5.016-8.36-5.016-20.9 0-29.259l35.945-61.86C44.723 5.851 55.59 0 64.786 0h71.055c9.196 0 20.063 6.688 25.079 14.211l35.945 61.86c4.18 8.36 4.18 20.899 0 29.258l-35.945 61.86c-4.18 8.36-15.883 14.211-25.079 14.211H64.786Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
  2927. }
  2928. .mask-circle {
  2929. -webkit-mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle fill='black' cx='100' cy='100' r='100' fill-rule='evenodd'/%3e%3c/svg%3e");
  2930. mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle fill='black' cx='100' cy='100' r='100' fill-rule='evenodd'/%3e%3c/svg%3e");
  2931. }
  2932. .mask-parallelogram {
  2933. -webkit-mask-image: url("data:image/svg+xml,%3csvg width='200' height='154' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M46.154 0H200l-46.154 153.846H0z' fill-rule='evenodd'/%3e%3c/svg%3e");
  2934. mask-image: url("data:image/svg+xml,%3csvg width='200' height='154' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M46.154 0H200l-46.154 153.846H0z' fill-rule='evenodd'/%3e%3c/svg%3e");
  2935. }
  2936. .mask-parallelogram-2 {
  2937. -webkit-mask-image: url("data:image/svg+xml,%3csvg width='200' height='154' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M153.846 0H0l46.154 153.846H200z' fill-rule='evenodd'/%3e%3c/svg%3e");
  2938. mask-image: url("data:image/svg+xml,%3csvg width='200' height='154' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M153.846 0H0l46.154 153.846H200z' fill-rule='evenodd'/%3e%3c/svg%3e");
  2939. }
  2940. .mask-parallelogram-3 {
  2941. -webkit-mask-image: url("data:image/svg+xml,%3csvg width='154' height='201' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M.077 47.077v153.846l153.846-46.154V.923z' fill-rule='evenodd'/%3e%3c/svg%3e");
  2942. mask-image: url("data:image/svg+xml,%3csvg width='154' height='201' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M.077 47.077v153.846l153.846-46.154V.923z' fill-rule='evenodd'/%3e%3c/svg%3e");
  2943. }
  2944. .mask-parallelogram-4 {
  2945. -webkit-mask-image: url("data:image/svg+xml,%3csvg width='154' height='201' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M153.923 47.077v153.846L.077 154.77V.923z' fill-rule='evenodd'/%3e%3c/svg%3e");
  2946. mask-image: url("data:image/svg+xml,%3csvg width='154' height='201' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M153.923 47.077v153.846L.077 154.77V.923z' fill-rule='evenodd'/%3e%3c/svg%3e");
  2947. }
  2948. .mask-pentagon {
  2949. -webkit-mask-image: url("data:image/svg+xml,%3csvg width='192' height='181' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 0 95.106 69.098-36.327 111.804H37.22L.894 69.098z' fill-rule='evenodd'/%3e%3c/svg%3e");
  2950. mask-image: url("data:image/svg+xml,%3csvg width='192' height='181' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 0 95.106 69.098-36.327 111.804H37.22L.894 69.098z' fill-rule='evenodd'/%3e%3c/svg%3e");
  2951. }
  2952. .mask-square {
  2953. -webkit-mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 0h200v200H0z' fill-rule='evenodd'/%3e%3c/svg%3e");
  2954. mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 0h200v200H0z' fill-rule='evenodd'/%3e%3c/svg%3e");
  2955. }
  2956. .mask-star {
  2957. -webkit-mask-image: url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z' fill-rule='evenodd'/%3e%3c/svg%3e");
  2958. mask-image: url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z' fill-rule='evenodd'/%3e%3c/svg%3e");
  2959. }
  2960. .mask-star-2 {
  2961. -webkit-mask-image: url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 153.044-58.779 26.243 7.02-63.513L.894 68.481l63.117-13.01L96 0l31.989 55.472 63.117 13.01-43.347 47.292 7.02 63.513z' fill-rule='evenodd'/%3e%3c/svg%3e");
  2962. mask-image: url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 153.044-58.779 26.243 7.02-63.513L.894 68.481l63.117-13.01L96 0l31.989 55.472 63.117 13.01-43.347 47.292 7.02 63.513z' fill-rule='evenodd'/%3e%3c/svg%3e");
  2963. }
  2964. .mask-triangle {
  2965. -webkit-mask-image: url("data:image/svg+xml,%3csvg width='174' height='149' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m87 148.476-86.603.185L43.86 74.423 87 0l43.14 74.423 43.463 74.238z' fill-rule='evenodd'/%3e%3c/svg%3e");
  2966. mask-image: url("data:image/svg+xml,%3csvg width='174' height='149' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m87 148.476-86.603.185L43.86 74.423 87 0l43.14 74.423 43.463 74.238z' fill-rule='evenodd'/%3e%3c/svg%3e");
  2967. }
  2968. .mask-triangle-2 {
  2969. -webkit-mask-image: url("data:image/svg+xml,%3csvg width='174' height='150' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m87 .738 86.603-.184-43.463 74.238L87 149.214 43.86 74.792.397.554z' fill-rule='evenodd'/%3e%3c/svg%3e");
  2970. mask-image: url("data:image/svg+xml,%3csvg width='174' height='150' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m87 .738 86.603-.184-43.463 74.238L87 149.214 43.86 74.792.397.554z' fill-rule='evenodd'/%3e%3c/svg%3e");
  2971. }
  2972. .mask-triangle-3 {
  2973. -webkit-mask-image: url("data:image/svg+xml,%3csvg width='150' height='174' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m149.369 87.107.185 86.603-74.239-43.463L.893 87.107l74.422-43.14L149.554.505z' fill-rule='evenodd'/%3e%3c/svg%3e");
  2974. mask-image: url("data:image/svg+xml,%3csvg width='150' height='174' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m149.369 87.107.185 86.603-74.239-43.463L.893 87.107l74.422-43.14L149.554.505z' fill-rule='evenodd'/%3e%3c/svg%3e");
  2975. }
  2976. .mask-triangle-4 {
  2977. -webkit-mask-image: url("data:image/svg+xml,%3csvg width='150' height='174' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M.631 87.107.446.505l74.239 43.462 74.422 43.14-74.422 43.14L.446 173.71z' fill-rule='evenodd'/%3e%3c/svg%3e");
  2978. mask-image: url("data:image/svg+xml,%3csvg width='150' height='174' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M.631 87.107.446.505l74.239 43.462 74.422 43.14-74.422 43.14L.446 173.71z' fill-rule='evenodd'/%3e%3c/svg%3e");
  2979. }
  2980. .menu.horizontal > li.bordered > a,
  2981. .menu.horizontal > li.bordered > button,
  2982. .menu.horizontal > li.bordered > span {
  2983. border-left-width: 0px;
  2984. border-bottom-width: 4px;
  2985. --tw-border-opacity: 1;
  2986. border-color: hsl(var(--p) / var(--tw-border-opacity));
  2987. }
  2988. .menu[class*=" px-"]:not(.menu[class*=" px-0"]) li > *,
  2989. .menu[class^="px-"]:not(.menu[class^="px-0"]) li > *,
  2990. .menu[class*=" p-"]:not(.menu[class*=" p-0"]) li > *,
  2991. .menu[class^="p-"]:not(.menu[class^="p-0"]) li > * {
  2992. border-radius: var(--rounded-btn, 0.5rem);
  2993. }
  2994. .menu :where(li.bordered > *) {
  2995. border-left-width: 4px;
  2996. --tw-border-opacity: 1;
  2997. border-color: hsl(var(--p) / var(--tw-border-opacity));
  2998. }
  2999. .menu :where(li) > :where(*:not(ul)) {
  3000. gap: 0.75rem;
  3001. padding-left: 1rem;
  3002. padding-right: 1rem;
  3003. padding-top: 0.75rem;
  3004. padding-bottom: 0.75rem;
  3005. color: currentColor;
  3006. }
  3007. .menu :where(li:not(.menu-title):not(:empty)) > :where(*:not(ul):focus),
  3008. .menu :where(li:not(.menu-title):not(:empty)) > :where(*:not(ul):hover) {
  3009. background-color: hsl(var(--bc) / var(--tw-bg-opacity));
  3010. --tw-bg-opacity: 0.1;
  3011. }
  3012. .menu :where(li:not(.menu-title):not(:empty)) > :where(:not(ul).active),
  3013. .menu :where(li:not(.menu-title):not(:empty)) > :where(*:not(ul):active) {
  3014. --tw-bg-opacity: 1;
  3015. background-color: hsl(var(--p) / var(--tw-bg-opacity));
  3016. --tw-text-opacity: 1;
  3017. color: hsl(var(--pc) / var(--tw-text-opacity));
  3018. }
  3019. .menu :where(li:empty) {
  3020. margin-left: 1rem;
  3021. margin-right: 1rem;
  3022. margin-top: 0.5rem;
  3023. margin-bottom: 0.5rem;
  3024. height: 1px;
  3025. background-color: hsl(var(--bc) / var(--tw-bg-opacity));
  3026. --tw-bg-opacity: 0.1;
  3027. }
  3028. .menu li.disabled > * {
  3029. user-select: none;
  3030. color: hsl(var(--bc) / var(--tw-text-opacity));
  3031. --tw-text-opacity: 0.2;
  3032. }
  3033. .menu li.disabled > *:hover {
  3034. background-color: transparent;
  3035. }
  3036. .menu li.hover-bordered a {
  3037. border-left-width: 4px;
  3038. border-color: transparent;
  3039. }
  3040. .menu li.hover-bordered a:hover {
  3041. --tw-border-opacity: 1;
  3042. border-color: hsl(var(--p) / var(--tw-border-opacity));
  3043. }
  3044. .menu.compact li > a,
  3045. .menu.compact li > span {
  3046. padding-top: 0.5rem;
  3047. padding-bottom: 0.5rem;
  3048. font-size: 0.875rem;
  3049. line-height: 1.25rem;
  3050. }
  3051. .menu .menu-title {
  3052. font-size: 0.75rem;
  3053. line-height: 1rem;
  3054. font-weight: 700;
  3055. opacity: 0.4;
  3056. }
  3057. .menu .menu-title > * {
  3058. padding-top: 0.25rem;
  3059. padding-bottom: 0.25rem;
  3060. }
  3061. .menu :where(li:not(.disabled)) > :where(*:not(ul)) {
  3062. outline: 2px solid transparent;
  3063. outline-offset: 2px;
  3064. transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  3065. transition-duration: 200ms;
  3066. transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  3067. }
  3068. .menu > :where(li:first-child) {
  3069. border-top-left-radius: inherit;
  3070. border-top-right-radius: inherit;
  3071. border-bottom-right-radius: unset;
  3072. border-bottom-left-radius: unset;
  3073. }
  3074. .menu > :where(li:first-child) > :where(:not(ul)) {
  3075. border-top-left-radius: inherit;
  3076. border-top-right-radius: inherit;
  3077. border-bottom-right-radius: unset;
  3078. border-bottom-left-radius: unset;
  3079. }
  3080. .menu > :where(li:last-child) {
  3081. border-top-left-radius: unset;
  3082. border-top-right-radius: unset;
  3083. border-bottom-right-radius: inherit;
  3084. border-bottom-left-radius: inherit;
  3085. }
  3086. .menu > :where(li:last-child) > :where(:not(ul)) {
  3087. border-top-left-radius: unset;
  3088. border-top-right-radius: unset;
  3089. border-bottom-right-radius: inherit;
  3090. border-bottom-left-radius: inherit;
  3091. }
  3092. .menu > :where(li:first-child:last-child) {
  3093. border-top-left-radius: inherit;
  3094. border-top-right-radius: inherit;
  3095. border-bottom-right-radius: inherit;
  3096. border-bottom-left-radius: inherit;
  3097. }
  3098. .menu > :where(li:first-child:last-child) > :where(:not(ul)) {
  3099. border-top-left-radius: inherit;
  3100. border-top-right-radius: inherit;
  3101. border-bottom-right-radius: inherit;
  3102. border-bottom-left-radius: inherit;
  3103. }
  3104. .menu > :where(li) > :where(ul) {
  3105. border-top-left-radius: inherit;
  3106. border-top-right-radius: inherit;
  3107. border-bottom-right-radius: inherit;
  3108. border-bottom-left-radius: inherit;
  3109. }
  3110. .menu > :where(li) > :where(ul) :where(li) {
  3111. width: 100%;
  3112. white-space: nowrap;
  3113. }
  3114. .menu > :where(li) > :where(ul) :where(li) :where(ul) {
  3115. padding-left: 1rem;
  3116. }
  3117. .menu > :where(li) > :where(ul) :where(li) > :where(:not(ul)) {
  3118. width: 100%;
  3119. white-space: nowrap;
  3120. }
  3121. .menu > :where(li) > :where(ul) > :where(li:first-child) {
  3122. border-top-left-radius: inherit;
  3123. border-top-right-radius: inherit;
  3124. border-bottom-right-radius: unset;
  3125. border-bottom-left-radius: unset;
  3126. }
  3127. .menu > :where(li) > :where(ul) > :where(li:first-child) > :where(:not(ul)) {
  3128. border-top-left-radius: inherit;
  3129. border-top-right-radius: inherit;
  3130. border-bottom-right-radius: unset;
  3131. border-bottom-left-radius: unset;
  3132. }
  3133. .menu > :where(li) > :where(ul) > :where(li:last-child) {
  3134. border-top-left-radius: unset;
  3135. border-top-right-radius: unset;
  3136. border-bottom-right-radius: inherit;
  3137. border-bottom-left-radius: inherit;
  3138. }
  3139. .menu > :where(li) > :where(ul) > :where(li:last-child) > :where(:not(ul)) {
  3140. border-top-left-radius: unset;
  3141. border-top-right-radius: unset;
  3142. border-bottom-right-radius: inherit;
  3143. border-bottom-left-radius: inherit;
  3144. }
  3145. .menu > :where(li) > :where(ul) > :where(li:first-child:last-child) {
  3146. border-top-left-radius: inherit;
  3147. border-top-right-radius: inherit;
  3148. border-bottom-right-radius: inherit;
  3149. border-bottom-left-radius: inherit;
  3150. }
  3151. .menu > :where(li) > :where(ul) > :where(li:first-child:last-child) > :where(:not(ul)) {
  3152. border-top-left-radius: inherit;
  3153. border-top-right-radius: inherit;
  3154. border-bottom-right-radius: inherit;
  3155. border-bottom-left-radius: inherit;
  3156. }
  3157. .mockup-code {
  3158. min-width: 18rem;
  3159. --tw-bg-opacity: 1;
  3160. background-color: hsl(var(--n) / var(--tw-bg-opacity));
  3161. padding-top: 1.25rem;
  3162. padding-bottom: 1.25rem;
  3163. --tw-text-opacity: 1;
  3164. color: hsl(var(--nc) / var(--tw-text-opacity));
  3165. border-radius: var(--rounded-box, 1rem);
  3166. }
  3167. .mockup-code:before {
  3168. content: "";
  3169. margin-bottom: 1rem;
  3170. display: block;
  3171. height: 0.75rem;
  3172. width: 0.75rem;
  3173. border-radius: 9999px;
  3174. opacity: 0.3;
  3175. box-shadow: 1.4em 0, 2.8em 0, 4.2em 0;
  3176. }
  3177. .mockup-code pre {
  3178. padding-right: 1.25rem;
  3179. }
  3180. .mockup-code pre:before {
  3181. content: "";
  3182. margin-right: 2ch;
  3183. }
  3184. .mockup-code pre[data-prefix]:before {
  3185. content: attr(data-prefix);
  3186. width: 2rem;
  3187. opacity: 0.5;
  3188. }
  3189. .mockup-window {
  3190. padding-top: 1.25rem;
  3191. border-radius: var(--rounded-box, 1rem);
  3192. }
  3193. .mockup-window:before {
  3194. content: "";
  3195. margin-bottom: 1rem;
  3196. display: block;
  3197. height: 0.75rem;
  3198. width: 0.75rem;
  3199. border-radius: 9999px;
  3200. opacity: 0.3;
  3201. box-shadow: 1.4em 0, 2.8em 0, 4.2em 0;
  3202. }
  3203. .mockup-phone {
  3204. display: inline-block;
  3205. border: 4px solid #444;
  3206. border-radius: 50px;
  3207. background-color: #000;
  3208. padding: 10px;
  3209. margin: 0 auto;
  3210. overflow: hidden;
  3211. }
  3212. .mockup-phone .camera {
  3213. position: relative;
  3214. top: 0px;
  3215. left: 0px;
  3216. background: #000;
  3217. height: 25px;
  3218. width: 150px;
  3219. margin: 0 auto;
  3220. border-bottom-left-radius: 17px;
  3221. border-bottom-right-radius: 17px;
  3222. z-index: 11;
  3223. }
  3224. .mockup-phone .camera:before {
  3225. content: "";
  3226. position: absolute;
  3227. top: 35%;
  3228. left: 50%;
  3229. width: 50px;
  3230. height: 4px;
  3231. border-radius: 5px;
  3232. background-color: #0c0b0e;
  3233. transform: translate(-50%, -50%);
  3234. }
  3235. .mockup-phone .camera:after {
  3236. content: "";
  3237. position: absolute;
  3238. top: 20%;
  3239. left: 70%;
  3240. width: 8px;
  3241. height: 8px;
  3242. border-radius: 5px;
  3243. background-color: #0f0b25;
  3244. }
  3245. .mockup-phone .display {
  3246. overflow: hidden;
  3247. border-radius: 40px;
  3248. margin-top: -25px;
  3249. }
  3250. .modal {
  3251. background-color: hsl(var(--nf, var(--n)) / var(--tw-bg-opacity));
  3252. --tw-bg-opacity: 0.4;
  3253. transition-duration: 200ms;
  3254. transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  3255. transition-property: transform, opacity, visibility;
  3256. overflow-y: hidden;
  3257. overscroll-behavior: contain
  3258. }
  3259. .modal-box {
  3260. --tw-bg-opacity: 1;
  3261. background-color: hsl(var(--b1) / var(--tw-bg-opacity));
  3262. padding: 1.5rem;
  3263. transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  3264. transition-duration: 200ms;
  3265. transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  3266. width: 91.666667%;
  3267. max-width: 32rem;
  3268. --tw-scale-x: .9;
  3269. --tw-scale-y: .9;
  3270. transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  3271. border-top-left-radius: var(--rounded-box, 1rem);
  3272. border-top-right-radius: var(--rounded-box, 1rem);
  3273. border-bottom-left-radius: var(--rounded-box, 1rem);
  3274. border-bottom-right-radius: var(--rounded-box, 1rem);
  3275. box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  3276. overflow-y: auto;
  3277. overscroll-behavior: contain
  3278. }
  3279. .modal-open .modal-box,
  3280. .modal-toggle:checked + .modal .modal-box,
  3281. .modal:target .modal-box {
  3282. --tw-translate-y: 0px;
  3283. --tw-scale-x: 1;
  3284. --tw-scale-y: 1;
  3285. transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  3286. }
  3287. .modal-action {
  3288. margin-top: 1.5rem;
  3289. justify-content: flex-end
  3290. }
  3291. .modal-action > :not([hidden]) ~ :not([hidden]) {
  3292. --tw-space-x-reverse: 0;
  3293. margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  3294. margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))
  3295. }
  3296. .navbar {
  3297. padding: var(--navbar-padding, 0.5rem);
  3298. min-height: 4rem;
  3299. width: 100%;
  3300. }
  3301. .progress {
  3302. height: 0.5rem;
  3303. border-radius: var(--rounded-box, 1rem);
  3304. }
  3305. .progress::-moz-progress-bar {
  3306. --tw-bg-opacity: 1;
  3307. background-color: hsl(var(--n) / var(--tw-bg-opacity));
  3308. }
  3309. .progress-primary::-moz-progress-bar {
  3310. --tw-bg-opacity: 1;
  3311. background-color: hsl(var(--p) / var(--tw-bg-opacity));
  3312. }
  3313. .progress-secondary::-moz-progress-bar {
  3314. --tw-bg-opacity: 1;
  3315. background-color: hsl(var(--s) / var(--tw-bg-opacity));
  3316. }
  3317. .progress-accent::-moz-progress-bar {
  3318. --tw-bg-opacity: 1;
  3319. background-color: hsl(var(--a) / var(--tw-bg-opacity));
  3320. }
  3321. .progress-info::-moz-progress-bar {
  3322. --tw-bg-opacity: 1;
  3323. background-color: hsl(var(--in) / var(--tw-bg-opacity));
  3324. }
  3325. .progress-success::-moz-progress-bar {
  3326. --tw-bg-opacity: 1;
  3327. background-color: hsl(var(--su) / var(--tw-bg-opacity));
  3328. }
  3329. .progress-warning::-moz-progress-bar {
  3330. --tw-bg-opacity: 1;
  3331. background-color: hsl(var(--wa) / var(--tw-bg-opacity));
  3332. }
  3333. .progress-error::-moz-progress-bar {
  3334. --tw-bg-opacity: 1;
  3335. background-color: hsl(var(--er) / var(--tw-bg-opacity));
  3336. }
  3337. .progress:indeterminate::after {
  3338. --tw-bg-opacity: 1;
  3339. background-color: hsl(var(--n) / var(--tw-bg-opacity));
  3340. }
  3341. .progress-primary:indeterminate::after {
  3342. --tw-bg-opacity: 1;
  3343. background-color: hsl(var(--p) / var(--tw-bg-opacity));
  3344. }
  3345. .progress-secondary:indeterminate::after {
  3346. --tw-bg-opacity: 1;
  3347. background-color: hsl(var(--s) / var(--tw-bg-opacity));
  3348. }
  3349. .progress-accent:indeterminate::after {
  3350. --tw-bg-opacity: 1;
  3351. background-color: hsl(var(--a) / var(--tw-bg-opacity));
  3352. }
  3353. .progress-info:indeterminate::after {
  3354. --tw-bg-opacity: 1;
  3355. background-color: hsl(var(--in) / var(--tw-bg-opacity));
  3356. }
  3357. .progress-success:indeterminate::after {
  3358. --tw-bg-opacity: 1;
  3359. background-color: hsl(var(--su) / var(--tw-bg-opacity));
  3360. }
  3361. .progress-warning:indeterminate::after {
  3362. --tw-bg-opacity: 1;
  3363. background-color: hsl(var(--wa) / var(--tw-bg-opacity));
  3364. }
  3365. .progress-error:indeterminate::after {
  3366. --tw-bg-opacity: 1;
  3367. background-color: hsl(var(--er) / var(--tw-bg-opacity));
  3368. }
  3369. .progress::-webkit-progress-bar {
  3370. background-color: hsl(var(--n) / var(--tw-bg-opacity));
  3371. --tw-bg-opacity: 0.2;
  3372. border-radius: var(--rounded-box, 1rem);
  3373. }
  3374. .progress::-webkit-progress-value {
  3375. --tw-bg-opacity: 1;
  3376. background-color: hsl(var(--nf, var(--n)) / var(--tw-bg-opacity));
  3377. border-radius: var(--rounded-box, 1rem);
  3378. }
  3379. .progress-primary::-webkit-progress-value {
  3380. --tw-bg-opacity: 1;
  3381. background-color: hsl(var(--p) / var(--tw-bg-opacity));
  3382. }
  3383. .progress-secondary::-webkit-progress-value {
  3384. --tw-bg-opacity: 1;
  3385. background-color: hsl(var(--s) / var(--tw-bg-opacity));
  3386. }
  3387. .progress-accent::-webkit-progress-value {
  3388. --tw-bg-opacity: 1;
  3389. background-color: hsl(var(--a) / var(--tw-bg-opacity));
  3390. }
  3391. .progress-info::-webkit-progress-value {
  3392. --tw-bg-opacity: 1;
  3393. background-color: hsl(var(--in) / var(--tw-bg-opacity));
  3394. }
  3395. .progress-success::-webkit-progress-value {
  3396. --tw-bg-opacity: 1;
  3397. background-color: hsl(var(--su) / var(--tw-bg-opacity));
  3398. }
  3399. .progress-warning::-webkit-progress-value {
  3400. --tw-bg-opacity: 1;
  3401. background-color: hsl(var(--wa) / var(--tw-bg-opacity));
  3402. }
  3403. .progress-error::-webkit-progress-value {
  3404. --tw-bg-opacity: 1;
  3405. background-color: hsl(var(--er) / var(--tw-bg-opacity));
  3406. }
  3407. .progress:indeterminate::after {
  3408. content: "";
  3409. position: absolute;
  3410. top: 0px;
  3411. bottom: 0px;
  3412. left: -40%;
  3413. width: 33.333333%;
  3414. border-radius: var(--rounded-box, 1rem);
  3415. animation: progress-loading 5s infinite ease-in-out;
  3416. }
  3417. @keyframes progress-loading {
  3418. 50% {
  3419. left: 107%;
  3420. }
  3421. }.radial-progress {
  3422. --value: 0;
  3423. --size: 5rem;
  3424. --thickness: calc(var(--size) / 10);
  3425. }
  3426. .radial-progress:after {
  3427. background-color: currentColor;
  3428. }
  3429. .radio {
  3430. --chkbg: var(--bc);
  3431. height: 1.5rem;
  3432. width: 1.5rem;
  3433. cursor: pointer;
  3434. appearance: none;
  3435. border-radius: 9999px;
  3436. border-width: 1px;
  3437. border-color: hsl(var(--bc) / var(--tw-border-opacity));
  3438. --tw-border-opacity: 0.2;
  3439. transition: background, box-shadow var(--animation-input, 0.2s) ease-in-out;
  3440. }
  3441. .radio:focus-visible {
  3442. outline: 2px solid hsl(var(--bc));
  3443. outline-offset: 2px;
  3444. }
  3445. .radio:checked,
  3446. .radio[aria-checked=true] {
  3447. --tw-bg-opacity: 1;
  3448. background-color: hsl(var(--bc) / var(--tw-bg-opacity));
  3449. animation: radiomark var(--animation-input, 0.2s) ease-in-out;
  3450. box-shadow: 0 0 0 4px hsl(var(--b1)) inset, 0 0 0 4px hsl(var(--b1)) inset;
  3451. }
  3452. .radio-primary {
  3453. --chkbg: var(--p);
  3454. --tw-border-opacity: 1;
  3455. border-color: hsl(var(--p) / var(--tw-border-opacity));
  3456. }
  3457. .radio-primary:hover {
  3458. --tw-border-opacity: 1;
  3459. border-color: hsl(var(--p) / var(--tw-border-opacity));
  3460. }
  3461. .radio-primary:focus-visible {
  3462. outline: 2px solid hsl(var(--p));
  3463. }
  3464. .radio-primary:checked,
  3465. .radio-primary[aria-checked=true] {
  3466. --tw-border-opacity: 1;
  3467. border-color: hsl(var(--p) / var(--tw-border-opacity));
  3468. --tw-bg-opacity: 1;
  3469. background-color: hsl(var(--p) / var(--tw-bg-opacity));
  3470. --tw-text-opacity: 1;
  3471. color: hsl(var(--pc) / var(--tw-text-opacity));
  3472. }
  3473. .radio-secondary {
  3474. --chkbg: var(--s);
  3475. --tw-border-opacity: 1;
  3476. border-color: hsl(var(--s) / var(--tw-border-opacity));
  3477. }
  3478. .radio-secondary:hover {
  3479. --tw-border-opacity: 1;
  3480. border-color: hsl(var(--s) / var(--tw-border-opacity));
  3481. }
  3482. .radio-secondary:focus-visible {
  3483. outline: 2px solid hsl(var(--s));
  3484. }
  3485. .radio-secondary:checked,
  3486. .radio-secondary[aria-checked=true] {
  3487. --tw-border-opacity: 1;
  3488. border-color: hsl(var(--s) / var(--tw-border-opacity));
  3489. --tw-bg-opacity: 1;
  3490. background-color: hsl(var(--s) / var(--tw-bg-opacity));
  3491. --tw-text-opacity: 1;
  3492. color: hsl(var(--sc) / var(--tw-text-opacity));
  3493. }
  3494. .radio-accent {
  3495. --chkbg: var(--a);
  3496. --tw-border-opacity: 1;
  3497. border-color: hsl(var(--a) / var(--tw-border-opacity));
  3498. }
  3499. .radio-accent:hover {
  3500. --tw-border-opacity: 1;
  3501. border-color: hsl(var(--a) / var(--tw-border-opacity));
  3502. }
  3503. .radio-accent:focus-visible {
  3504. outline: 2px solid hsl(var(--a));
  3505. }
  3506. .radio-accent:checked,
  3507. .radio-accent[aria-checked=true] {
  3508. --tw-border-opacity: 1;
  3509. border-color: hsl(var(--a) / var(--tw-border-opacity));
  3510. --tw-bg-opacity: 1;
  3511. background-color: hsl(var(--a) / var(--tw-bg-opacity));
  3512. --tw-text-opacity: 1;
  3513. color: hsl(var(--ac) / var(--tw-text-opacity));
  3514. }
  3515. .radio-success {
  3516. --chkbg: var(--su);
  3517. --tw-border-opacity: 1;
  3518. border-color: hsl(var(--su) / var(--tw-border-opacity));
  3519. }
  3520. .radio-success:hover {
  3521. --tw-border-opacity: 1;
  3522. border-color: hsl(var(--su) / var(--tw-border-opacity));
  3523. }
  3524. .radio-success:focus-visible {
  3525. outline: 2px solid hsl(var(--su));
  3526. }
  3527. .radio-success:checked,
  3528. .radio-success[aria-checked=true] {
  3529. --tw-border-opacity: 1;
  3530. border-color: hsl(var(--su) / var(--tw-border-opacity));
  3531. --tw-bg-opacity: 1;
  3532. background-color: hsl(var(--su) / var(--tw-bg-opacity));
  3533. --tw-text-opacity: 1;
  3534. color: hsl(var(--suc, var(--nc)) / var(--tw-text-opacity));
  3535. }
  3536. .radio-warning {
  3537. --chkbg: var(--wa);
  3538. --tw-border-opacity: 1;
  3539. border-color: hsl(var(--wa) / var(--tw-border-opacity));
  3540. }
  3541. .radio-warning:hover {
  3542. --tw-border-opacity: 1;
  3543. border-color: hsl(var(--wa) / var(--tw-border-opacity));
  3544. }
  3545. .radio-warning:focus-visible {
  3546. outline: 2px solid hsl(var(--wa));
  3547. }
  3548. .radio-warning:checked,
  3549. .radio-warning[aria-checked=true] {
  3550. --tw-border-opacity: 1;
  3551. border-color: hsl(var(--wa) / var(--tw-border-opacity));
  3552. --tw-bg-opacity: 1;
  3553. background-color: hsl(var(--wa) / var(--tw-bg-opacity));
  3554. --tw-text-opacity: 1;
  3555. color: hsl(var(--wac, var(--nc)) / var(--tw-text-opacity));
  3556. }
  3557. .radio-info {
  3558. --chkbg: var(--in);
  3559. --tw-border-opacity: 1;
  3560. border-color: hsl(var(--in) / var(--tw-border-opacity));
  3561. }
  3562. .radio-info:hover {
  3563. --tw-border-opacity: 1;
  3564. border-color: hsl(var(--in) / var(--tw-border-opacity));
  3565. }
  3566. .radio-info:focus-visible {
  3567. outline: 2px solid hsl(var(--in));
  3568. }
  3569. .radio-info:checked,
  3570. .radio-info[aria-checked=true] {
  3571. --tw-border-opacity: 1;
  3572. border-color: hsl(var(--in) / var(--tw-border-opacity));
  3573. --tw-bg-opacity: 1;
  3574. background-color: hsl(var(--in) / var(--tw-bg-opacity));
  3575. --tw-text-opacity: 1;
  3576. color: hsl(var(--inc, var(--nc)) / var(--tw-text-opacity));
  3577. }
  3578. .radio-error {
  3579. --chkbg: var(--er);
  3580. --tw-border-opacity: 1;
  3581. border-color: hsl(var(--er) / var(--tw-border-opacity));
  3582. }
  3583. .radio-error:hover {
  3584. --tw-border-opacity: 1;
  3585. border-color: hsl(var(--er) / var(--tw-border-opacity));
  3586. }
  3587. .radio-error:focus-visible {
  3588. outline: 2px solid hsl(var(--er));
  3589. }
  3590. .radio-error:checked,
  3591. .radio-error[aria-checked=true] {
  3592. --tw-border-opacity: 1;
  3593. border-color: hsl(var(--er) / var(--tw-border-opacity));
  3594. --tw-bg-opacity: 1;
  3595. background-color: hsl(var(--er) / var(--tw-bg-opacity));
  3596. --tw-text-opacity: 1;
  3597. color: hsl(var(--erc, var(--nc)) / var(--tw-text-opacity));
  3598. }
  3599. .radio:disabled {
  3600. cursor: not-allowed;
  3601. opacity: 0.2;
  3602. }
  3603. @keyframes radiomark {
  3604. 0% {
  3605. box-shadow: 0 0 0 12px hsl(var(--b1)) inset, 0 0 0 12px hsl(var(--b1)) inset;
  3606. }
  3607. 50% {
  3608. box-shadow: 0 0 0 3px hsl(var(--b1)) inset, 0 0 0 3px hsl(var(--b1)) inset;
  3609. }
  3610. 100% {
  3611. box-shadow: 0 0 0 4px hsl(var(--b1)) inset, 0 0 0 4px hsl(var(--b1)) inset;
  3612. }
  3613. }
  3614. /* backward compatibility */
  3615. .radio-mark {
  3616. display: none;
  3617. }
  3618. .range {
  3619. appearance: none;
  3620. -webkit-appearance: none;
  3621. --range-shdw: var(--bc);
  3622. overflow: hidden;
  3623. background-color: transparent;
  3624. border-radius: var(--rounded-box, 1rem);
  3625. }
  3626. .range:focus-visible::-webkit-slider-thumb {
  3627. --focus-shadow: 0 0 0 6px hsl(var(--b1)) inset, 0 0 0 2rem hsl(var(--range-shdw)) inset;
  3628. }
  3629. .range:focus-visible::-moz-range-thumb {
  3630. --focus-shadow: 0 0 0 6px hsl(var(--b1)) inset, 0 0 0 2rem hsl(var(--range-shdw)) inset;
  3631. }
  3632. .range::-webkit-slider-runnable-track {
  3633. height: 0.5rem;
  3634. width: 100%;
  3635. border-radius: var(--rounded-box, 1rem);
  3636. background-color: hsla(var(--bc) / 0.1);
  3637. }
  3638. .range::-moz-range-track {
  3639. height: 0.5rem;
  3640. width: 100%;
  3641. border-radius: var(--rounded-box, 1rem);
  3642. background-color: hsla(var(--bc) / 0.1);
  3643. }
  3644. .range::-webkit-slider-thumb {
  3645. background-color: hsl(var(--b1));
  3646. position: relative;
  3647. height: 1.5rem;
  3648. width: 1.5rem;
  3649. border-style: none;
  3650. border-radius: var(--rounded-box, 1rem);
  3651. appearance: none;
  3652. -webkit-appearance: none;
  3653. top: 50%;
  3654. color: hsl(var(--range-shdw));
  3655. transform: translateY(-50%);
  3656. --filler-size: 100rem;
  3657. --filler-offset: 0.6rem;
  3658. box-shadow: 0 0 0 3px hsl(var(--range-shdw)) inset, var(--focus-shadow, 0 0), calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
  3659. }
  3660. .range::-moz-range-thumb {
  3661. background-color: hsl(var(--b1));
  3662. position: relative;
  3663. height: 1.5rem;
  3664. width: 1.5rem;
  3665. border-style: none;
  3666. border-radius: var(--rounded-box, 1rem);
  3667. top: 50%;
  3668. color: hsl(var(--range-shdw));
  3669. --filler-size: 100rem;
  3670. --filler-offset: 0.5rem;
  3671. box-shadow: 0 0 0 3px hsl(var(--range-shdw)) inset, var(--focus-shadow, 0 0), calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
  3672. }
  3673. .range-primary {
  3674. --range-shdw: var(--p);
  3675. }
  3676. .range-secondary {
  3677. --range-shdw: var(--s);
  3678. }
  3679. .range-accent {
  3680. --range-shdw: var(--a);
  3681. }
  3682. .range-success {
  3683. --range-shdw: var(--su);
  3684. }
  3685. .range-warning {
  3686. --range-shdw: var(--wa);
  3687. }
  3688. .range-info {
  3689. --range-shdw: var(--in);
  3690. }
  3691. .range-error {
  3692. --range-shdw: var(--er);
  3693. }
  3694. .rating input {
  3695. appearance: none;
  3696. -webkit-appearance: none;
  3697. }
  3698. .rating :where(input) {
  3699. animation: rating-pop var(--animation-input, 0.25s) ease-out;
  3700. height: 1.5rem;
  3701. width: 1.5rem;
  3702. background-color: hsl(var(--bc) / var(--tw-bg-opacity));
  3703. --tw-bg-opacity: 1;
  3704. }
  3705. .rating .rating-hidden {
  3706. width: 0.5rem;
  3707. background-color: transparent;
  3708. }
  3709. .rating input:checked ~ input,
  3710. .rating input[aria-checked=true] ~ input {
  3711. --tw-bg-opacity: 0.2;
  3712. }
  3713. .rating input:focus-visible {
  3714. transition-property: transform;
  3715. transition-duration: 300ms;
  3716. transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  3717. transform: translateY(-0.125em);
  3718. }
  3719. .rating input:active:focus {
  3720. animation: none;
  3721. transform: translateY(-0.125em);
  3722. }
  3723. .rating-half :where(input:not(.rating-hidden)) {
  3724. width: 0.75rem;
  3725. }
  3726. @keyframes rating-pop {
  3727. 0% {
  3728. transform: translateY(-0.125em);
  3729. }
  3730. 40% {
  3731. transform: translateY(-0.125em);
  3732. }
  3733. 100% {
  3734. transform: translateY(0);
  3735. }
  3736. }
  3737. .select {
  3738. border-width: 1px;
  3739. border-color: hsl(var(--bc) / var(--tw-border-opacity));
  3740. --tw-border-opacity: 0;
  3741. --tw-bg-opacity: 1;
  3742. background-color: hsl(var(--b1) / var(--tw-bg-opacity));
  3743. padding-right: 2.5rem;
  3744. font-weight: 600;
  3745. border-radius: var(--rounded-btn, 0.5rem);
  3746. }
  3747. .select-bordered {
  3748. --tw-border-opacity: 0.2;
  3749. }
  3750. .select {
  3751. background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  3752. background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16px) calc(1px + 50%);
  3753. background-size: 4px 4px, 4px 4px;
  3754. background-repeat: no-repeat;
  3755. }
  3756. .select:focus {
  3757. outline: 2px solid hsla(var(--bc) / 0.2);
  3758. outline-offset: 2px;
  3759. }
  3760. .select-ghost {
  3761. --tw-bg-opacity: 0.05;
  3762. }
  3763. .select-ghost:focus {
  3764. --tw-bg-opacity: 1;
  3765. --tw-text-opacity: 1;
  3766. color: hsl(var(--bc) / var(--tw-text-opacity));
  3767. }
  3768. .select-primary {
  3769. --tw-border-opacity: 1;
  3770. border-color: hsl(var(--p) / var(--tw-border-opacity));
  3771. }
  3772. .select-primary:focus {
  3773. outline: 2px solid hsl(var(--p));
  3774. }
  3775. .select-secondary {
  3776. --tw-border-opacity: 1;
  3777. border-color: hsl(var(--s) / var(--tw-border-opacity));
  3778. }
  3779. .select-secondary:focus {
  3780. outline: 2px solid hsl(var(--s));
  3781. }
  3782. .select-accent {
  3783. --tw-border-opacity: 1;
  3784. border-color: hsl(var(--a) / var(--tw-border-opacity));
  3785. }
  3786. .select-accent:focus {
  3787. outline: 2px solid hsl(var(--a));
  3788. }
  3789. .select-info {
  3790. --tw-border-opacity: 1;
  3791. border-color: hsl(var(--in) / var(--tw-border-opacity));
  3792. }
  3793. .select-info:focus {
  3794. outline: 2px solid hsl(var(--in));
  3795. }
  3796. .select-success {
  3797. --tw-border-opacity: 1;
  3798. border-color: hsl(var(--su) / var(--tw-border-opacity));
  3799. }
  3800. .select-success:focus {
  3801. outline: 2px solid hsl(var(--su));
  3802. }
  3803. .select-warning {
  3804. --tw-border-opacity: 1;
  3805. border-color: hsl(var(--wa) / var(--tw-border-opacity));
  3806. }
  3807. .select-warning:focus {
  3808. outline: 2px solid hsl(var(--wa));
  3809. }
  3810. .select-error {
  3811. --tw-border-opacity: 1;
  3812. border-color: hsl(var(--er) / var(--tw-border-opacity));
  3813. }
  3814. .select-error:focus {
  3815. outline: 2px solid hsl(var(--er));
  3816. }
  3817. .select-disabled,
  3818. .select[disabled] {
  3819. cursor: not-allowed;
  3820. --tw-border-opacity: 1;
  3821. border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity));
  3822. --tw-bg-opacity: 1;
  3823. background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
  3824. --tw-text-opacity: 0.2;
  3825. }
  3826. .select-disabled::placeholder,
  3827. .select[disabled]::placeholder {
  3828. color: hsl(var(--bc) / var(--tw-placeholder-opacity));
  3829. --tw-placeholder-opacity: 0.2;
  3830. }
  3831. .select-multiple,
  3832. .select[multiple],
  3833. .select[size].select:not([size="1"]) {
  3834. background-image: none;
  3835. padding-right: 1rem;
  3836. }
  3837. [dir="rtl"] .select {
  3838. background-position: calc(0% + 12px) calc(1px + 50%), calc(0% + 16px) calc(1px + 50%);
  3839. }
  3840. .stack {
  3841. place-items: center;
  3842. align-items: flex-end
  3843. }
  3844. .stack > * {
  3845. width: 100%;
  3846. opacity: 0.6
  3847. }
  3848. .stack > *:nth-child(2) {
  3849. opacity: 0.8
  3850. }
  3851. .stack > *:nth-child(1) {
  3852. opacity: 1
  3853. }
  3854. .stats {
  3855. --tw-bg-opacity: 1;
  3856. background-color: hsl(var(--b1) / var(--tw-bg-opacity));
  3857. --tw-text-opacity: 1;
  3858. color: hsl(var(--bc) / var(--tw-text-opacity));
  3859. border-radius: var(--rounded-box, 1rem)
  3860. }
  3861. :where(.stats) > :not([hidden]) ~ :not([hidden]) {
  3862. --tw-divide-x-reverse: 0;
  3863. border-right-width: calc(1px * var(--tw-divide-x-reverse));
  3864. border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
  3865. --tw-divide-y-reverse: 0;
  3866. border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
  3867. border-bottom-width: calc(0px * var(--tw-divide-y-reverse))
  3868. }
  3869. :where(.stats) {
  3870. overflow-x: auto
  3871. }
  3872. .stat {
  3873. column-gap: 1rem;
  3874. border-color: hsl(var(--bc) / var(--tw-border-opacity));
  3875. --tw-border-opacity: 0.1;
  3876. padding-left: 1.5rem;
  3877. padding-right: 1.5rem;
  3878. padding-top: 1rem;
  3879. padding-bottom: 1rem
  3880. }
  3881. .stat-title {
  3882. color: hsl(var(--bc) / 0.6)
  3883. }
  3884. .stat-value {
  3885. font-size: 2.25rem;
  3886. line-height: 2.5rem;
  3887. font-weight: 800
  3888. }
  3889. .stat-desc {
  3890. font-size: 0.75rem;
  3891. line-height: 1rem;
  3892. color: hsl(var(--bc) / 0.6)
  3893. }
  3894. .stat-actions {
  3895. margin-top: 1rem
  3896. }
  3897. /* .stat + .stat {
  3898. @apply border-l border-base-content border-opacity-10;
  3899. }
  3900. .stats.grid-flow-row {
  3901. .stat + .stat {
  3902. @apply border-l-0 border-t;
  3903. }
  3904. } */
  3905. .steps {
  3906. /* &-vertical{
  3907. .step {
  3908. gap: .5rem;
  3909. grid-template-columns: 40px 1fr;
  3910. grid-template-rows: auto;
  3911. min-height: 4rem;
  3912. justify-items: start;
  3913. &:before {
  3914. @apply w-2 h-full top-0 transform -translate-y-1/2 -translate-x-1/2;
  3915. margin-left: 50%;
  3916. }
  3917. }
  3918. } */
  3919. }
  3920. /* &,
  3921. &-horizontal{ */
  3922. .steps .step {
  3923. grid-template-rows: 40px 1fr;
  3924. grid-template-columns: auto;
  3925. min-width: 4rem;
  3926. }
  3927. .steps .step:before {
  3928. top: 0px;
  3929. grid-column-start: 1;
  3930. grid-row-start: 1;
  3931. height: 0.5rem;
  3932. width: 100%;
  3933. transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  3934. --tw-bg-opacity: 1;
  3935. background-color: hsl(var(--b3, var(--b2)) / var(--tw-bg-opacity));
  3936. --tw-text-opacity: 1;
  3937. color: hsl(var(--bc) / var(--tw-text-opacity));
  3938. content: "";
  3939. margin-left: -100%;
  3940. }
  3941. /* } */
  3942. .steps .step:after {
  3943. content: counter(step);
  3944. counter-increment: step;
  3945. z-index: 1;
  3946. position: relative;
  3947. grid-column-start: 1;
  3948. grid-row-start: 1;
  3949. display: grid;
  3950. height: 2rem;
  3951. width: 2rem;
  3952. place-items: center;
  3953. place-self: center;
  3954. border-radius: 9999px;
  3955. --tw-bg-opacity: 1;
  3956. background-color: hsl(var(--b3, var(--b2)) / var(--tw-bg-opacity));
  3957. --tw-text-opacity: 1;
  3958. color: hsl(var(--bc) / var(--tw-text-opacity));
  3959. }
  3960. .steps .step:first-child:before {
  3961. content: none;
  3962. }
  3963. .steps .step[data-content]:after {
  3964. content: attr(data-content);
  3965. }
  3966. .steps .step-neutral + .step-neutral:before,
  3967. .steps .step-neutral:after {
  3968. --tw-bg-opacity: 1;
  3969. background-color: hsl(var(--n) / var(--tw-bg-opacity));
  3970. --tw-text-opacity: 1;
  3971. color: hsl(var(--nc) / var(--tw-text-opacity));
  3972. }
  3973. .steps .step-primary + .step-primary:before,
  3974. .steps .step-primary:after {
  3975. --tw-bg-opacity: 1;
  3976. background-color: hsl(var(--p) / var(--tw-bg-opacity));
  3977. --tw-text-opacity: 1;
  3978. color: hsl(var(--pc) / var(--tw-text-opacity));
  3979. }
  3980. .steps .step-secondary + .step-secondary:before,
  3981. .steps .step-secondary:after {
  3982. --tw-bg-opacity: 1;
  3983. background-color: hsl(var(--s) / var(--tw-bg-opacity));
  3984. --tw-text-opacity: 1;
  3985. color: hsl(var(--sc) / var(--tw-text-opacity));
  3986. }
  3987. .steps .step-accent + .step-accent:before,
  3988. .steps .step-accent:after {
  3989. --tw-bg-opacity: 1;
  3990. background-color: hsl(var(--a) / var(--tw-bg-opacity));
  3991. --tw-text-opacity: 1;
  3992. color: hsl(var(--ac) / var(--tw-text-opacity));
  3993. }
  3994. .steps .step-info + .step-info:before {
  3995. --tw-bg-opacity: 1;
  3996. background-color: hsl(var(--in) / var(--tw-bg-opacity));
  3997. }
  3998. .steps .step-info:after {
  3999. --tw-bg-opacity: 1;
  4000. background-color: hsl(var(--in) / var(--tw-bg-opacity));
  4001. --tw-text-opacity: 1;
  4002. color: hsl(var(--inc, var(--nc)) / var(--tw-text-opacity));
  4003. }
  4004. .steps .step-success + .step-success:before {
  4005. --tw-bg-opacity: 1;
  4006. background-color: hsl(var(--su) / var(--tw-bg-opacity));
  4007. }
  4008. .steps .step-success:after {
  4009. --tw-bg-opacity: 1;
  4010. background-color: hsl(var(--su) / var(--tw-bg-opacity));
  4011. --tw-text-opacity: 1;
  4012. color: hsl(var(--suc, var(--nc)) / var(--tw-text-opacity));
  4013. }
  4014. .steps .step-warning + .step-warning:before {
  4015. --tw-bg-opacity: 1;
  4016. background-color: hsl(var(--wa) / var(--tw-bg-opacity));
  4017. }
  4018. .steps .step-warning:after {
  4019. --tw-bg-opacity: 1;
  4020. background-color: hsl(var(--wa) / var(--tw-bg-opacity));
  4021. --tw-text-opacity: 1;
  4022. color: hsl(var(--wac, var(--nc)) / var(--tw-text-opacity));
  4023. }
  4024. .steps .step-error + .step-error:before {
  4025. --tw-bg-opacity: 1;
  4026. background-color: hsl(var(--er) / var(--tw-bg-opacity));
  4027. }
  4028. .steps .step-error:after {
  4029. --tw-bg-opacity: 1;
  4030. background-color: hsl(var(--er) / var(--tw-bg-opacity));
  4031. --tw-text-opacity: 1;
  4032. color: hsl(var(--erc, var(--nc)) / var(--tw-text-opacity));
  4033. }
  4034. .swap {
  4035. cursor: pointer;
  4036. }
  4037. .swap > * {
  4038. transition-duration: 300ms;
  4039. transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  4040. transition-property: transform, opacity;
  4041. }
  4042. .swap-rotate .swap-on,
  4043. .swap-rotate .swap-indeterminate,
  4044. .swap-rotate input:indeterminate ~ .swap-on {
  4045. --tw-rotate: 45deg;
  4046. transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  4047. }
  4048. .swap-rotate input:checked ~ .swap-off,
  4049. .swap-rotate.swap-active .swap-off,
  4050. .swap-rotate input:indeterminate ~ .swap-off {
  4051. --tw-rotate: -45deg;
  4052. transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  4053. }
  4054. .swap-rotate input:checked ~ .swap-on,
  4055. .swap-rotate.swap-active .swap-on,
  4056. .swap-rotate input:indeterminate ~ .swap-indeterminate {
  4057. --tw-rotate: 0deg;
  4058. transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  4059. }
  4060. .swap-flip {
  4061. transform-style: preserve-3d;
  4062. perspective: 16em;
  4063. }
  4064. .swap-flip .swap-on,
  4065. .swap-flip .swap-indeterminate,
  4066. .swap-flip input:indeterminate ~ .swap-on {
  4067. transform: rotateY(180deg);
  4068. backface-visibility: hidden;
  4069. opacity: 1;
  4070. }
  4071. .swap-flip input:checked ~ .swap-off,
  4072. .swap-flip.swap-active .swap-off,
  4073. .swap-flip input:indeterminate ~ .swap-off {
  4074. transform: rotateY(-180deg);
  4075. backface-visibility: hidden;
  4076. opacity: 1;
  4077. }
  4078. .swap-flip input:checked ~ .swap-on,
  4079. .swap-flip.swap-active .swap-on,
  4080. .swap-flip input:indeterminate ~ .swap-indeterminate {
  4081. transform: rotateY(0deg);
  4082. }
  4083. .tab {
  4084. --tw-text-opacity: 0.5;
  4085. }.tab:hover {
  4086. --tw-text-opacity: 1;
  4087. }.tab {
  4088. --tab-color: hsla(var(--bc) / var(--tw-text-opacity, 1));
  4089. --tab-bg: hsla(var(--b1) / var(--tw-bg-opacity, 1));
  4090. --tab-border-color: hsla(var(--b3) / var(--tw-bg-opacity, 1));
  4091. color: var(--tab-color);
  4092. padding-left: var(--tab-padding, 1rem);
  4093. padding-right: var(--tab-padding, 1rem);
  4094. }
  4095. .tab.tab-active:not(.tab-disabled):not([disabled]) {
  4096. border-color: hsl(var(--bc) / var(--tw-border-opacity));
  4097. --tw-border-opacity: 1;
  4098. --tw-text-opacity: 1;
  4099. }
  4100. .tab:focus {
  4101. outline: 2px solid transparent;
  4102. outline-offset: 2px;
  4103. }
  4104. .tab:focus-visible {
  4105. outline: 2px solid currentColor;
  4106. outline-offset: -3px;
  4107. }
  4108. .tab:focus-visible.tab-lifted {
  4109. border-bottom-right-radius: var(--tab-radius, 0.5rem);
  4110. border-bottom-left-radius: var(--tab-radius, 0.5rem);
  4111. }
  4112. /* disabled */
  4113. .tab-disabled,
  4114. .tab-disabled:hover,
  4115. .tab[disabled],
  4116. .tab[disabled]:hover {
  4117. cursor: not-allowed;
  4118. color: hsl(var(--bc) / var(--tw-text-opacity));
  4119. --tw-text-opacity: 0.2;
  4120. }
  4121. .tab-bordered {
  4122. border-color: hsl(var(--bc) / var(--tw-border-opacity));
  4123. --tw-border-opacity: 0.2;
  4124. border-style: solid;
  4125. border-bottom-width: calc(var(--tab-border, 1px) + 1px);
  4126. }
  4127. .tab-lifted {
  4128. border: var(--tab-border, 1px) solid transparent;
  4129. border-width: 0 0 var(--tab-border, 1px) 0;
  4130. border-top-left-radius: var(--tab-radius, 0.5rem);
  4131. border-top-right-radius: var(--tab-radius, 0.5rem);
  4132. border-bottom-color: var(--tab-border-color);
  4133. padding-left: var(--tab-padding, 1rem);
  4134. padding-right: var(--tab-padding, 1rem);
  4135. padding-top: var(--tab-border, 1px);
  4136. }
  4137. .tab-lifted.tab-active:not(.tab-disabled):not([disabled]) {
  4138. background-color: var(--tab-bg);
  4139. border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px);
  4140. border-left-color: var(--tab-border-color);
  4141. border-right-color: var(--tab-border-color);
  4142. border-top-color: var(--tab-border-color);
  4143. padding-left: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
  4144. padding-right: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
  4145. padding-bottom: var(--tab-border, 1px);
  4146. padding-top: 0;
  4147. }
  4148. .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):before,
  4149. .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):after {
  4150. z-index: 1;
  4151. content: "";
  4152. display: block;
  4153. position: absolute;
  4154. width: var(--tab-radius, 0.5rem);
  4155. height: var(--tab-radius, 0.5rem);
  4156. bottom: 0;
  4157. --tab-grad: calc(68% - var(--tab-border, 1px));
  4158. --tab-corner-bg: radial-gradient(circle at var(--circle-pos), transparent var(--tab-grad), var(--tab-border-color) calc(var(--tab-grad) + 0.3px), var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)), var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.3px));
  4159. }
  4160. .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):before {
  4161. left: calc(var(--tab-radius, 0.5rem) * -1);
  4162. --circle-pos: top left;
  4163. background-image: var(--tab-corner-bg);
  4164. }
  4165. /* RTL quick fix */
  4166. [dir="rtl"] .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):before {
  4167. --circle-pos: top right;
  4168. }
  4169. .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):after {
  4170. right: calc(var(--tab-radius, 0.5rem) * -1);
  4171. --circle-pos: top right;
  4172. background-image: var(--tab-corner-bg);
  4173. }
  4174. /* RTL quick fix */
  4175. [dir="rtl"] .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):after {
  4176. --circle-pos: top left;
  4177. }
  4178. .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):first-child:before {
  4179. background: none;
  4180. }
  4181. .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):last-child:after {
  4182. background: none;
  4183. }
  4184. .tab-lifted.tab-active:not(.tab-disabled):not([disabled]) + .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):before {
  4185. background: none;
  4186. }
  4187. .tabs-boxed {
  4188. --tw-bg-opacity: 1;
  4189. background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
  4190. padding: 0.25rem;
  4191. border-radius: var(--rounded-btn, 0.5rem);
  4192. }
  4193. .tabs-boxed .tab {
  4194. border-radius: var(--rounded-btn, 0.5rem);
  4195. }
  4196. .tabs-boxed .tab-active:not(.tab-disabled):not([disabled]) {
  4197. --tw-bg-opacity: 1;
  4198. background-color: hsl(var(--p) / var(--tw-bg-opacity));
  4199. --tw-text-opacity: 1;
  4200. color: hsl(var(--pc) / var(--tw-text-opacity));
  4201. }
  4202. .tabs-boxed .tab-active:not(.tab-disabled):not([disabled]):hover {
  4203. --tw-text-opacity: 1;
  4204. color: hsl(var(--pc) / var(--tw-text-opacity));
  4205. }
  4206. .table {
  4207. text-align: left
  4208. }
  4209. .table :where(th, td) {
  4210. white-space: nowrap;
  4211. padding: 1rem;
  4212. vertical-align: middle
  4213. }
  4214. .table tr.active th,
  4215. .table tr.active td,
  4216. .table tr.active:nth-child(even) th,
  4217. .table tr.active:nth-child(even) td {
  4218. --tw-bg-opacity: 1;
  4219. background-color: hsl(var(--b3, var(--b2)) / var(--tw-bg-opacity))
  4220. }
  4221. .table tr.hover:hover th,
  4222. .table tr.hover:hover td,
  4223. .table tr.hover:nth-child(even):hover th,
  4224. .table tr.hover:nth-child(even):hover td {
  4225. --tw-bg-opacity: 1;
  4226. background-color: hsl(var(--b3, var(--b2)) / var(--tw-bg-opacity))
  4227. }
  4228. .table:where(:not(.table-zebra)) :where(thead, tbody, tfoot) :where(tr:not(:last-child) :where(th, td)) {
  4229. border-bottom-width: 1px;
  4230. --tw-border-opacity: 1;
  4231. border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity))
  4232. }
  4233. .table :where(thead, tfoot) :where(th, td) {
  4234. --tw-bg-opacity: 1;
  4235. background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
  4236. font-size: 0.75rem;
  4237. line-height: 1rem;
  4238. font-weight: 700;
  4239. text-transform: uppercase
  4240. }
  4241. .table :where(tbody th, tbody td) {
  4242. --tw-bg-opacity: 1;
  4243. background-color: hsl(var(--b1) / var(--tw-bg-opacity))
  4244. }
  4245. .table-zebra tbody tr:nth-child(even) th,
  4246. .table-zebra tbody tr:nth-child(even) td {
  4247. --tw-bg-opacity: 1;
  4248. background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity))
  4249. }
  4250. :where(.table *:first-child) :where(*:first-child) :where(th, td):first-child {
  4251. border-top-left-radius: 0.5rem
  4252. }
  4253. :where(.table *:first-child) :where(*:first-child) :where(th, td):last-child {
  4254. border-top-right-radius: 0.5rem
  4255. }
  4256. :where(.table *:last-child) :where(*:last-child) :where(th, td):first-child {
  4257. border-bottom-left-radius: 0.5rem
  4258. }
  4259. :where(.table *:last-child) :where(*:last-child) :where(th, td):last-child {
  4260. border-bottom-right-radius: 0.5rem
  4261. }.textarea {
  4262. border-width: 1px;
  4263. border-color: hsl(var(--bc) / var(--tw-border-opacity));
  4264. --tw-border-opacity: 0;
  4265. --tw-bg-opacity: 1;
  4266. background-color: hsl(var(--b1) / var(--tw-bg-opacity));
  4267. border-radius: var(--rounded-btn, 0.5rem);
  4268. }
  4269. .textarea-bordered {
  4270. --tw-border-opacity: 0.2;
  4271. }
  4272. .textarea:focus {
  4273. outline: 2px solid hsla(var(--bc) / 0.2);
  4274. outline-offset: 2px;
  4275. }
  4276. .textarea-ghost {
  4277. --tw-bg-opacity: 0.05;
  4278. }
  4279. .textarea-ghost:focus {
  4280. --tw-bg-opacity: 1;
  4281. --tw-text-opacity: 1;
  4282. color: hsl(var(--bc) / var(--tw-text-opacity));
  4283. box-shadow: none;
  4284. }
  4285. .textarea-primary {
  4286. --tw-border-opacity: 1;
  4287. border-color: hsl(var(--p) / var(--tw-border-opacity));
  4288. }
  4289. .textarea-primary:focus {
  4290. outline: 2px solid hsl(var(--p));
  4291. }
  4292. .textarea-secondary {
  4293. --tw-border-opacity: 1;
  4294. border-color: hsl(var(--s) / var(--tw-border-opacity));
  4295. }
  4296. .textarea-secondary:focus {
  4297. outline: 2px solid hsl(var(--s));
  4298. }
  4299. .textarea-accent {
  4300. --tw-border-opacity: 1;
  4301. border-color: hsl(var(--a) / var(--tw-border-opacity));
  4302. }
  4303. .textarea-accent:focus {
  4304. outline: 2px solid hsl(var(--a));
  4305. }
  4306. .textarea-info {
  4307. --tw-border-opacity: 1;
  4308. border-color: hsl(var(--in) / var(--tw-border-opacity));
  4309. }
  4310. .textarea-info:focus {
  4311. outline: 2px solid hsl(var(--in));
  4312. }
  4313. .textarea-success {
  4314. --tw-border-opacity: 1;
  4315. border-color: hsl(var(--su) / var(--tw-border-opacity));
  4316. }
  4317. .textarea-success:focus {
  4318. outline: 2px solid hsl(var(--su));
  4319. }
  4320. .textarea-warning {
  4321. --tw-border-opacity: 1;
  4322. border-color: hsl(var(--wa) / var(--tw-border-opacity));
  4323. }
  4324. .textarea-warning:focus {
  4325. outline: 2px solid hsl(var(--wa));
  4326. }
  4327. .textarea-error {
  4328. --tw-border-opacity: 1;
  4329. border-color: hsl(var(--er) / var(--tw-border-opacity));
  4330. }
  4331. .textarea-error:focus {
  4332. outline: 2px solid hsl(var(--er));
  4333. }
  4334. .textarea-disabled,
  4335. .textarea[disabled] {
  4336. cursor: not-allowed;
  4337. --tw-border-opacity: 1;
  4338. border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity));
  4339. --tw-bg-opacity: 1;
  4340. background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
  4341. --tw-text-opacity: 0.2;
  4342. }
  4343. .textarea-disabled::placeholder,
  4344. .textarea[disabled]::placeholder {
  4345. color: hsl(var(--bc) / var(--tw-placeholder-opacity));
  4346. --tw-placeholder-opacity: 0.2;
  4347. }
  4348. .toast{
  4349. gap: 0.5rem;
  4350. padding: 1rem;
  4351. }
  4352. .toast>*{
  4353. animation: toast-pop 0.25s ease-out;
  4354. }
  4355. @keyframes toast-pop {
  4356. 0% {
  4357. transform: scale(0.9);
  4358. opacity: 0;
  4359. }
  4360. 100% {
  4361. transform: scale(1);
  4362. opacity: 1;
  4363. }
  4364. }
  4365. .toggle {
  4366. --tglbg: hsl(var(--b1));
  4367. --handleoffset: 1.5rem;
  4368. --handleoffsetcalculator: calc(var(--handleoffset) * -1);
  4369. --togglehandleborder: 0 0;
  4370. height: 1.5rem;
  4371. width: 3rem;
  4372. cursor: pointer;
  4373. appearance: none;
  4374. border-width: 1px;
  4375. border-color: hsl(var(--bc) / var(--tw-border-opacity));
  4376. --tw-border-opacity: 0.2;
  4377. background-color: hsl(var(--bc) / var(--tw-bg-opacity));
  4378. --tw-bg-opacity: 0.5;
  4379. transition-duration: 300ms;
  4380. transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  4381. border-radius: var(--rounded-badge, 1.9rem);
  4382. transition: background, box-shadow var(--animation-input, 0.2s) ease-in-out;
  4383. box-shadow: var(--handleoffsetcalculator) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset, var(--togglehandleborder);
  4384. }
  4385. [dir="rtl"] .toggle {
  4386. --handleoffsetcalculator: calc(var(--handleoffset) * 1);
  4387. }
  4388. .toggle:focus-visible {
  4389. outline: 2px solid hsl(var(--bc));
  4390. outline-offset: 2px;
  4391. }
  4392. .toggle:checked,
  4393. .toggle[checked="true"],
  4394. .toggle[aria-checked=true] {
  4395. --handleoffsetcalculator: var(--handleoffset);
  4396. --tw-border-opacity: 1;
  4397. --tw-bg-opacity: 1;
  4398. }
  4399. [dir="rtl"] .toggle:checked, [dir="rtl"] .toggle[checked="true"], [dir="rtl"] .toggle[aria-checked=true] {
  4400. --handleoffsetcalculator: calc(var(--handleoffset) * -1);
  4401. }
  4402. .toggle:indeterminate {
  4403. --tw-border-opacity: 1;
  4404. --tw-bg-opacity: 1;
  4405. box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset, calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset;
  4406. }
  4407. [dir="rtl"] .toggle:indeterminate {
  4408. box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset, calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset;
  4409. }
  4410. .toggle-primary:focus-visible {
  4411. outline: 2px solid hsl(var(--p));
  4412. }
  4413. .toggle-primary:checked,
  4414. .toggle-primary[checked="true"],
  4415. .toggle-primary[aria-checked=true] {
  4416. border-color: hsl(var(--p) / var(--tw-border-opacity));
  4417. --tw-border-opacity: 0.1;
  4418. --tw-bg-opacity: 1;
  4419. background-color: hsl(var(--p) / var(--tw-bg-opacity));
  4420. --tw-text-opacity: 1;
  4421. color: hsl(var(--pc) / var(--tw-text-opacity));
  4422. }
  4423. .toggle-secondary:focus-visible {
  4424. outline: 2px solid hsl(var(--s));
  4425. }
  4426. .toggle-secondary:checked,
  4427. .toggle-secondary[checked="true"],
  4428. .toggle-secondary[aria-checked=true] {
  4429. border-color: hsl(var(--s) / var(--tw-border-opacity));
  4430. --tw-border-opacity: 0.1;
  4431. --tw-bg-opacity: 1;
  4432. background-color: hsl(var(--s) / var(--tw-bg-opacity));
  4433. --tw-text-opacity: 1;
  4434. color: hsl(var(--sc) / var(--tw-text-opacity));
  4435. }
  4436. .toggle-accent:focus-visible {
  4437. outline: 2px solid hsl(var(--a));
  4438. }
  4439. .toggle-accent:checked,
  4440. .toggle-accent[checked="true"],
  4441. .toggle-accent[aria-checked=true] {
  4442. border-color: hsl(var(--a) / var(--tw-border-opacity));
  4443. --tw-border-opacity: 0.1;
  4444. --tw-bg-opacity: 1;
  4445. background-color: hsl(var(--a) / var(--tw-bg-opacity));
  4446. --tw-text-opacity: 1;
  4447. color: hsl(var(--ac) / var(--tw-text-opacity));
  4448. }
  4449. .toggle-success:focus-visible {
  4450. outline: 2px solid hsl(var(--su));
  4451. }
  4452. .toggle-success:checked,
  4453. .toggle-success[checked="true"],
  4454. .toggle-success[aria-checked=true] {
  4455. border-color: hsl(var(--su) / var(--tw-border-opacity));
  4456. --tw-border-opacity: 0.1;
  4457. --tw-bg-opacity: 1;
  4458. background-color: hsl(var(--su) / var(--tw-bg-opacity));
  4459. --tw-text-opacity: 1;
  4460. color: hsl(var(--suc, var(--nc)) / var(--tw-text-opacity));
  4461. }
  4462. .toggle-warning:focus-visible {
  4463. outline: 2px solid hsl(var(--wa));
  4464. }
  4465. .toggle-warning:checked,
  4466. .toggle-warning[checked="true"],
  4467. .toggle-warning[aria-checked=true] {
  4468. border-color: hsl(var(--wa) / var(--tw-border-opacity));
  4469. --tw-border-opacity: 0.1;
  4470. --tw-bg-opacity: 1;
  4471. background-color: hsl(var(--wa) / var(--tw-bg-opacity));
  4472. --tw-text-opacity: 1;
  4473. color: hsl(var(--wac, var(--nc)) / var(--tw-text-opacity));
  4474. }
  4475. .toggle-info:focus-visible {
  4476. outline: 2px solid hsl(var(--in));
  4477. }
  4478. .toggle-info:checked,
  4479. .toggle-info[checked="true"],
  4480. .toggle-info[aria-checked=true] {
  4481. border-color: hsl(var(--in) / var(--tw-border-opacity));
  4482. --tw-border-opacity: 0.1;
  4483. --tw-bg-opacity: 1;
  4484. background-color: hsl(var(--in) / var(--tw-bg-opacity));
  4485. --tw-text-opacity: 1;
  4486. color: hsl(var(--inc, var(--nc)) / var(--tw-text-opacity));
  4487. }
  4488. .toggle-error:focus-visible {
  4489. outline: 2px solid hsl(var(--er));
  4490. }
  4491. .toggle-error:checked,
  4492. .toggle-error[checked="true"],
  4493. .toggle-error[aria-checked=true] {
  4494. border-color: hsl(var(--er) / var(--tw-border-opacity));
  4495. --tw-border-opacity: 0.1;
  4496. --tw-bg-opacity: 1;
  4497. background-color: hsl(var(--er) / var(--tw-bg-opacity));
  4498. --tw-text-opacity: 1;
  4499. color: hsl(var(--erc, var(--nc)) / var(--tw-text-opacity));
  4500. }
  4501. .toggle:disabled {
  4502. cursor: not-allowed;
  4503. --tw-border-opacity: 1;
  4504. border-color: hsl(var(--bc) / var(--tw-border-opacity));
  4505. background-color: transparent;
  4506. opacity: 0.3;
  4507. --togglehandleborder: 0 0 0 3px hsl(var(--bc)) inset, var(--handleoffsetcalculator) 0 0 3px hsl(var(--bc)) inset;
  4508. }
  4509. /* backward compatibility */
  4510. .toggle-mark {
  4511. display: none;
  4512. }
  4513. .tooltip {
  4514. position: relative;
  4515. display: inline-block;
  4516. text-align: center;
  4517. --tooltip-tail: 3px;
  4518. --tooltip-color: hsl(var(--n));
  4519. --tooltip-text-color: hsl(var(--nc));
  4520. --tooltip-tail-offset: calc(100% + 1px - var(--tooltip-tail));
  4521. }
  4522. .tooltip:before,
  4523. .tooltip:after {
  4524. opacity: 0;
  4525. transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  4526. transition-delay: 100ms;
  4527. transition-duration: 200ms;
  4528. transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  4529. }
  4530. .tooltip:after {
  4531. position: absolute;
  4532. }
  4533. .tooltip:before {
  4534. max-width: 20rem;
  4535. border-radius: 0.25rem;
  4536. padding-left: 0.5rem;
  4537. padding-right: 0.5rem;
  4538. padding-top: 0.25rem;
  4539. padding-bottom: 0.25rem;
  4540. font-size: 0.875rem;
  4541. line-height: 1.25rem;
  4542. background-color: var(--tooltip-color);
  4543. color: var(--tooltip-text-color);
  4544. width: max-content;
  4545. }
  4546. .tooltip.tooltip-open:before,
  4547. .tooltip.tooltip-open:after,
  4548. .tooltip:hover:before,
  4549. .tooltip:hover:after {
  4550. opacity: 1;
  4551. transition-delay: 75ms;
  4552. }
  4553. .tooltip:not([data-tip]):hover:before,
  4554. .tooltip:not([data-tip]):hover:after {
  4555. visibility: hidden;
  4556. opacity: 0;
  4557. }
  4558. .tooltip:after {
  4559. content: "";
  4560. border-style: solid;
  4561. border-width: var(--tooltip-tail, 0);
  4562. width: 0;
  4563. height: 0;
  4564. display: block;
  4565. position: absolute;
  4566. }
  4567. .tooltip:after, .tooltip-top:after {
  4568. transform: translateX(-50%);
  4569. border-color: var(--tooltip-color) transparent transparent transparent;
  4570. top: auto;
  4571. left: 50%;
  4572. right: auto;
  4573. bottom: var(--tooltip-tail-offset);
  4574. }
  4575. .tooltip-bottom:after {
  4576. transform: translateX(-50%);
  4577. border-color: transparent transparent var(--tooltip-color) transparent;
  4578. top: var(--tooltip-tail-offset);
  4579. left: 50%;
  4580. right: auto;
  4581. bottom: auto;
  4582. }
  4583. .tooltip-left:after {
  4584. transform: translateY(-50%);
  4585. border-color: transparent transparent transparent var(--tooltip-color);
  4586. top: 50%;
  4587. left: auto;
  4588. right: calc(var(--tooltip-tail-offset) + 1px);
  4589. bottom: auto;
  4590. }
  4591. .tooltip-right:after {
  4592. transform: translateY(-50%);
  4593. border-color: transparent var(--tooltip-color) transparent transparent;
  4594. top: 50%;
  4595. left: calc(var(--tooltip-tail-offset) + 1px);
  4596. right: auto;
  4597. bottom: auto;
  4598. }
  4599. .tooltip-primary {
  4600. --tooltip-color: hsl(var(--p));
  4601. --tooltip-text-color: hsl(var(--pc));
  4602. }
  4603. .tooltip-secondary {
  4604. --tooltip-color: hsl(var(--s));
  4605. --tooltip-text-color: hsl(var(--sc));
  4606. }
  4607. .tooltip-accent {
  4608. --tooltip-color: hsl(var(--a));
  4609. --tooltip-text-color: hsl(var(--ac));
  4610. }
  4611. .tooltip-info {
  4612. --tooltip-color: hsla(var(--in));
  4613. --tooltip-text-color: hsl(var(--inc));
  4614. }
  4615. .tooltip-success {
  4616. --tooltip-color: hsla(var(--su));
  4617. --tooltip-text-color: hsl(var(--suc));
  4618. }
  4619. .tooltip-warning {
  4620. --tooltip-color: hsla(var(--wa));
  4621. --tooltip-text-color: hsl(var(--wac));
  4622. }
  4623. .tooltip-error {
  4624. --tooltip-color: hsla(var(--er));
  4625. --tooltip-text-color: hsl(var(--erc));
  4626. }
  4627. :root .prose{
  4628. --tw-prose-body: hsla(var(--bc)/.8);
  4629. --tw-prose-headings: hsl(var(--bc));
  4630. --tw-prose-lead: hsl(var(--bc));
  4631. --tw-prose-links: hsl(var(--bc));
  4632. --tw-prose-bold: hsl(var(--bc));
  4633. --tw-prose-counters: hsl(var(--bc));
  4634. --tw-prose-bullets: hsla(var(--bc)/.5);
  4635. --tw-prose-hr: hsla(var(--bc)/.2);
  4636. --tw-prose-quotes: hsl(var(--bc));
  4637. --tw-prose-quote-borders: hsla(var(--bc)/.2);
  4638. --tw-prose-captions: hsla(var(--bc)/.5);
  4639. --tw-prose-code: hsl(var(--bc));
  4640. --tw-prose-pre-code: hsl(var(--nc));
  4641. --tw-prose-pre-bg: hsl(var(--n));
  4642. --tw-prose-th-borders: hsla(var(--bc)/.5);
  4643. --tw-prose-td-borders: hsla(var(--bc)/.2);
  4644. }
  4645. .prose :where(code):not(:where([class~="not-prose"] *)){
  4646. padding: 2px 8px;
  4647. border-radius: var(--rounded-badge);
  4648. }
  4649. .prose code:after,
  4650. .prose code:before{
  4651. content: none;
  4652. }
  4653. .prose pre code{
  4654. border-radius: 0;
  4655. padding: 0;
  4656. }
  4657. .prose :where(tbody tr, thead):not(:where([class~="not-prose"] *)){
  4658. border-bottom-color: hsl(var(--bc) / 20%);
  4659. }