app.css 115 KB

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