style.css 121 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014401540164017401840194020402140224023402440254026402740284029403040314032403340344035403640374038403940404041404240434044404540464047404840494050405140524053405440554056405740584059406040614062406340644065406640674068406940704071407240734074407540764077407840794080408140824083408440854086408740884089409040914092409340944095409640974098409941004101410241034104410541064107410841094110411141124113411441154116411741184119412041214122412341244125412641274128412941304131413241334134413541364137413841394140414141424143414441454146414741484149415041514152415341544155415641574158415941604161416241634164416541664167416841694170417141724173417441754176417741784179418041814182418341844185418641874188418941904191419241934194419541964197419841994200420142024203420442054206420742084209421042114212421342144215421642174218421942204221422242234224422542264227422842294230423142324233423442354236423742384239424042414242424342444245424642474248424942504251425242534254425542564257425842594260426142624263426442654266426742684269427042714272427342744275427642774278427942804281428242834284428542864287428842894290429142924293429442954296429742984299430043014302430343044305430643074308430943104311431243134314431543164317431843194320432143224323432443254326432743284329433043314332433343344335433643374338433943404341434243434344434543464347434843494350435143524353435443554356435743584359436043614362436343644365436643674368436943704371437243734374437543764377437843794380438143824383438443854386438743884389439043914392439343944395439643974398439944004401440244034404440544064407440844094410441144124413441444154416441744184419442044214422442344244425442644274428442944304431443244334434443544364437443844394440444144424443444444454446444744484449445044514452445344544455445644574458445944604461446244634464446544664467446844694470447144724473447444754476447744784479448044814482448344844485448644874488448944904491449244934494449544964497449844994500450145024503450445054506450745084509451045114512451345144515451645174518451945204521452245234524452545264527452845294530453145324533453445354536453745384539454045414542454345444545454645474548454945504551455245534554455545564557455845594560456145624563456445654566456745684569457045714572457345744575457645774578457945804581458245834584458545864587458845894590459145924593459445954596459745984599460046014602460346044605460646074608460946104611461246134614461546164617461846194620462146224623462446254626462746284629463046314632463346344635463646374638463946404641464246434644464546464647464846494650465146524653465446554656465746584659466046614662466346644665466646674668466946704671467246734674467546764677467846794680468146824683468446854686468746884689469046914692469346944695469646974698469947004701470247034704470547064707470847094710471147124713471447154716471747184719472047214722472347244725472647274728472947304731473247334734473547364737473847394740474147424743474447454746474747484749475047514752475347544755475647574758475947604761476247634764476547664767476847694770477147724773477447754776477747784779478047814782478347844785478647874788478947904791479247934794479547964797479847994800480148024803480448054806480748084809481048114812481348144815481648174818481948204821482248234824482548264827482848294830483148324833483448354836483748384839484048414842484348444845484648474848484948504851485248534854485548564857485848594860486148624863486448654866486748684869487048714872487348744875487648774878487948804881488248834884488548864887488848894890489148924893489448954896489748984899490049014902490349044905490649074908490949104911491249134914491549164917491849194920492149224923492449254926492749284929493049314932493349344935493649374938493949404941494249434944494549464947494849494950495149524953495449554956495749584959496049614962496349644965496649674968496949704971497249734974497549764977497849794980498149824983498449854986498749884989499049914992499349944995499649974998499950005001500250035004500550065007500850095010501150125013501450155016501750185019502050215022502350245025502650275028502950305031503250335034503550365037503850395040504150425043504450455046504750485049505050515052505350545055505650575058505950605061506250635064506550665067506850695070507150725073507450755076507750785079508050815082508350845085508650875088508950905091509250935094509550965097509850995100510151025103510451055106510751085109511051115112511351145115511651175118511951205121512251235124512551265127512851295130513151325133513451355136513751385139514051415142514351445145514651475148514951505151515251535154515551565157515851595160516151625163516451655166516751685169517051715172517351745175517651775178517951805181518251835184518551865187518851895190519151925193519451955196519751985199520052015202520352045205520652075208520952105211521252135214521552165217521852195220522152225223522452255226522752285229523052315232523352345235523652375238523952405241524252435244524552465247524852495250525152525253525452555256525752585259526052615262526352645265526652675268526952705271527252735274527552765277527852795280528152825283528452855286528752885289529052915292529352945295529652975298529953005301530253035304530553065307530853095310531153125313531453155316531753185319532053215322532353245325532653275328532953305331533253335334533553365337533853395340534153425343534453455346534753485349535053515352535353545355535653575358535953605361536253635364536553665367536853695370537153725373537453755376537753785379538053815382538353845385538653875388538953905391539253935394539553965397539853995400540154025403540454055406540754085409541054115412541354145415541654175418541954205421542254235424542554265427542854295430543154325433543454355436543754385439544054415442544354445445544654475448544954505451545254535454545554565457545854595460546154625463546454655466546754685469547054715472547354745475547654775478547954805481548254835484548554865487548854895490549154925493549454955496549754985499550055015502550355045505550655075508550955105511551255135514551555165517551855195520552155225523552455255526552755285529553055315532553355345535553655375538553955405541554255435544554555465547554855495550555155525553555455555556555755585559556055615562556355645565556655675568556955705571557255735574557555765577557855795580558155825583558455855586558755885589559055915592559355945595559655975598559956005601560256035604560556065607560856095610561156125613561456155616561756185619562056215622562356245625562656275628562956305631563256335634563556365637563856395640564156425643564456455646564756485649565056515652565356545655565656575658565956605661566256635664566556665667566856695670567156725673567456755676567756785679568056815682568356845685568656875688568956905691569256935694569556965697569856995700570157025703570457055706570757085709571057115712571357145715571657175718571957205721572257235724572557265727572857295730573157325733573457355736573757385739574057415742574357445745574657475748574957505751575257535754575557565757575857595760576157625763576457655766576757685769577057715772577357745775577657775778577957805781578257835784578557865787578857895790579157925793579457955796579757985799580058015802580358045805580658075808580958105811581258135814581558165817581858195820582158225823582458255826582758285829583058315832583358345835583658375838583958405841584258435844584558465847584858495850585158525853585458555856585758585859586058615862586358645865586658675868586958705871587258735874587558765877587858795880588158825883588458855886588758885889589058915892589358945895589658975898589959005901590259035904590559065907590859095910591159125913591459155916591759185919592059215922592359245925592659275928592959305931593259335934593559365937593859395940594159425943594459455946594759485949595059515952595359545955595659575958595959605961596259635964596559665967596859695970597159725973597459755976597759785979598059815982598359845985598659875988598959905991599259935994599559965997599859996000600160026003600460056006600760086009601060116012601360146015601660176018601960206021602260236024602560266027602860296030603160326033603460356036603760386039604060416042604360446045604660476048604960506051605260536054605560566057605860596060606160626063606460656066606760686069607060716072607360746075607660776078607960806081608260836084608560866087608860896090609160926093609460956096609760986099610061016102610361046105610661076108610961106111611261136114611561166117611861196120612161226123612461256126612761286129613061316132613361346135613661376138613961406141614261436144614561466147614861496150615161526153615461556156615761586159616061616162616361646165616661676168616961706171617261736174617561766177617861796180618161826183618461856186618761886189619061916192619361946195619661976198619962006201620262036204620562066207620862096210621162126213621462156216621762186219622062216222622362246225622662276228622962306231623262336234623562366237623862396240624162426243624462456246624762486249625062516252625362546255625662576258625962606261626262636264626562666267626862696270627162726273627462756276627762786279628062816282628362846285628662876288628962906291629262936294629562966297629862996300630163026303630463056306630763086309631063116312631363146315631663176318631963206321632263236324632563266327632863296330633163326333633463356336633763386339634063416342634363446345634663476348634963506351635263536354635563566357635863596360636163626363636463656366636763686369637063716372637363746375637663776378637963806381638263836384638563866387638863896390639163926393639463956396639763986399640064016402640364046405640664076408640964106411641264136414641564166417641864196420642164226423642464256426642764286429643064316432643364346435643664376438643964406441644264436444644564466447644864496450645164526453645464556456645764586459646064616462646364646465646664676468646964706471647264736474647564766477647864796480648164826483648464856486648764886489649064916492649364946495649664976498649965006501650265036504650565066507650865096510651165126513651465156516651765186519652065216522652365246525652665276528652965306531653265336534653565366537653865396540654165426543654465456546654765486549655065516552655365546555655665576558655965606561656265636564656565666567656865696570657165726573657465756576657765786579658065816582658365846585658665876588658965906591659265936594659565966597659865996600660166026603660466056606660766086609661066116612661366146615661666176618661966206621662266236624662566266627662866296630663166326633663466356636663766386639664066416642664366446645664666476648664966506651665266536654665566566657665866596660666166626663666466656666666766686669
  1. /*
  2. Template Name: Adminto Dashboard
  3. Author: CoderThemes
  4. Email: coderthemes$gmail.com
  5. File: Core
  6. */
  7. @import 'karla.css';
  8. @import 'roboto.css';
  9. @import 'Rancho.css';
  10. /*
  11. Template Name: UBold Dashboard
  12. Author: CoderThemes
  13. Email: coderthemes$gmail.com
  14. File: Core
  15. */
  16. /* =============
  17. == Core List==
  18. - Common
  19. - Helper classes
  20. - Extra
  21. - Bootstrap Custom
  22. - Animation (Some loader)
  23. - Waves effect
  24. - Print (Invoice css)
  25. ============= */
  26. /* =============
  27. Common
  28. ============= */
  29. body {
  30. background: #253138;
  31. font-family: "Roboto", sans-serif;
  32. margin: 0;
  33. padding-bottom: 65px;
  34. overflow-x: hidden;
  35. color: #98a6ad;
  36. font-size: 14px;
  37. }
  38. html {
  39. position: relative;
  40. min-height: 100%;
  41. background: #253138;
  42. }
  43. h1, h2, h3, h4, h5, h6 {
  44. margin: 10px 0;
  45. font-family: "Karla", sans-serif;
  46. color: rgba(255, 255, 255, 0.9);
  47. }
  48. h1 {
  49. line-height: 43px;
  50. font-size: 36px;
  51. }
  52. h2 {
  53. line-height: 35px;
  54. font-size: 30px;
  55. }
  56. h3 {
  57. line-height: 30px;
  58. font-size: 24px;
  59. }
  60. h3 small {
  61. color: #444444;
  62. }
  63. h4 {
  64. line-height: 22px;
  65. font-size: 18px;
  66. }
  67. h4 small {
  68. color: #444444;
  69. }
  70. h5 {
  71. font-size: 15px;
  72. }
  73. h5 small {
  74. color: #444444;
  75. }
  76. h6 {
  77. font-size: 12px;
  78. }
  79. p {
  80. line-height: 1.6;
  81. }
  82. * {
  83. outline: none !important;
  84. }
  85. b {
  86. font-weight: 600;
  87. }
  88. a:hover {
  89. outline: 0;
  90. text-decoration: none;
  91. }
  92. a:active {
  93. outline: 0;
  94. text-decoration: none;
  95. }
  96. a:focus {
  97. outline: 0;
  98. text-decoration: none;
  99. }
  100. hr {
  101. border-top: 1px solid rgba(255, 255, 255, 0.1);
  102. }
  103. .container {
  104. width: auto;
  105. }
  106. .container-alt {
  107. margin-left: auto;
  108. margin-right: auto;
  109. padding-left: 15px;
  110. padding-right: 15px;
  111. }
  112. /* Footer */
  113. .footer {
  114. border-top: 1px solid rgba(152, 166, 173, 0.2);
  115. bottom: 0px;
  116. color: #98a6ad;
  117. text-align: left !important;
  118. padding: 19px 30px 20px;
  119. position: absolute;
  120. right: 0px;
  121. left: 250px;
  122. }
  123. #wrapper {
  124. height: 100%;
  125. overflow: hidden;
  126. width: 100%;
  127. }
  128. .page {
  129. bottom: 0;
  130. left: 0;
  131. right: 0;
  132. top: 0;
  133. }
  134. /* Page titles */
  135. .page-title {
  136. font-size: 20px;
  137. margin-bottom: 0;
  138. margin-top: 0;
  139. line-height: 70px;
  140. font-weight: 600;
  141. }
  142. .header-title {
  143. font-size: 16px;
  144. font-weight: 600;
  145. line-height: 16px;
  146. margin-bottom: 8px;
  147. margin-top: 0;
  148. font-family: "Karla", sans-serif;
  149. }
  150. /* =============
  151. Helper clasess
  152. ============= */
  153. .p-20 {
  154. padding: 20px !important;
  155. }
  156. .p-30 {
  157. padding: 30px !important;
  158. }
  159. .p-t-10 {
  160. padding-top: 10px !important;
  161. }
  162. .p-b-10 {
  163. padding-bottom: 10px !important;
  164. }
  165. .p-l-r-10 {
  166. padding-left: 10px;
  167. padding-right: 10px;
  168. }
  169. .m-r-5 {
  170. margin-right: 5px !important;
  171. }
  172. .m-r-10 {
  173. margin-right: 10px !important;
  174. }
  175. .m-r-15 {
  176. margin-right: 15px !important;
  177. }
  178. .m-l-5 {
  179. margin-left: 5px !important;
  180. }
  181. .m-l-10 {
  182. margin-left: 10px !important;
  183. }
  184. .m-l-15 {
  185. margin-left: 15px !important;
  186. }
  187. .m-t-5 {
  188. margin-top: 5px !important;
  189. }
  190. .m-t-10 {
  191. margin-top: 10px !important;
  192. }
  193. .m-t-15 {
  194. margin-top: 15px !important;
  195. }
  196. .m-t-20 {
  197. margin-top: 20px !important;
  198. }
  199. .m-t-30 {
  200. margin-top: 30px !important;
  201. }
  202. .m-t-40 {
  203. margin-top: 40px !important;
  204. }
  205. .m-b-5 {
  206. margin-bottom: 5px !important;
  207. }
  208. .m-b-10 {
  209. margin-bottom: 10px !important;
  210. }
  211. .m-b-15 {
  212. margin-bottom: 15px !important;
  213. }
  214. .m-b-20 {
  215. margin-bottom: 20px !important;
  216. }
  217. .m-b-25 {
  218. margin-bottom: 25px !important;
  219. }
  220. .m-b-30 {
  221. margin-bottom: 30px !important;
  222. }
  223. .w-xs {
  224. min-width: 80px;
  225. }
  226. .w-sm {
  227. min-width: 95px;
  228. }
  229. .w-md {
  230. min-width: 110px;
  231. }
  232. .w-lg {
  233. min-width: 140px;
  234. }
  235. .m-h-40 {
  236. min-height: 40px;
  237. }
  238. .m-h-50 {
  239. min-height: 50px;
  240. }
  241. .l-h-34 {
  242. line-height: 34px;
  243. }
  244. .font-600 {
  245. font-weight: 600;
  246. }
  247. .font-bold {
  248. font-weight: 700;
  249. }
  250. .font-normal {
  251. font-weight: normal;
  252. }
  253. .font-light {
  254. font-weight: 300;
  255. }
  256. .font-13 {
  257. font-size: 13px !important;
  258. }
  259. .wrapper-md {
  260. padding: 20px;
  261. }
  262. .pull-in {
  263. margin-left: -20px;
  264. margin-right: -20px;
  265. }
  266. .b-0 {
  267. border: none !important;
  268. }
  269. .vertical-middle {
  270. vertical-align: middle;
  271. }
  272. .bx-shadow {
  273. -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  274. box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  275. }
  276. .bx-shadow-none {
  277. -webkit-box-shadow: none !important;
  278. box-shadow: none !important;
  279. }
  280. .mx-box {
  281. max-height: 380px;
  282. min-height: 380px;
  283. }
  284. .thumb-sm {
  285. height: 32px;
  286. width: 32px;
  287. }
  288. .thumb-md {
  289. height: 48px;
  290. width: 48px;
  291. }
  292. .thumb-lg {
  293. height: 88px;
  294. width: 88px;
  295. }
  296. .thumb-xl {
  297. height: 120px;
  298. width: 120px;
  299. }
  300. .add-new-plus {
  301. height: 32px;
  302. text-align: center;
  303. width: 32px;
  304. display: block;
  305. line-height: 32px;
  306. color: #98a6ad;
  307. font-weight: 700;
  308. background-color: #ebeff2;
  309. border-radius: 50%;
  310. }
  311. /* =============
  312. Extras
  313. ============= */
  314. /* Table type box */
  315. .table-box {
  316. display: table;
  317. height: 100%;
  318. width: 100%;
  319. }
  320. .table-box .table-detail {
  321. display: table-cell;
  322. vertical-align: middle;
  323. }
  324. /* Card Box */
  325. .card-box {
  326. padding: 20px;
  327. -webkit-box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
  328. box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
  329. border-radius: 5px;
  330. margin-bottom: 20px;
  331. background-color: #2f3e47;
  332. }
  333. .card-box .card-drop {
  334. color: #98a6ad;
  335. font-size: 20px;
  336. height: 20px;
  337. line-height: 1px;
  338. display: inline-block;
  339. }
  340. /* Grid page */
  341. .grid-structure .grid-container {
  342. background-color: #f4f8fb;
  343. margin-bottom: 10px;
  344. padding: 10px 20px;
  345. }
  346. /* Demo only */
  347. .icon-list-demo div {
  348. cursor: pointer;
  349. line-height: 45px;
  350. white-space: nowrap;
  351. color: #98a6ad;
  352. text-overflow: ellipsis;
  353. display: block;
  354. overflow: hidden;
  355. }
  356. .icon-list-demo div p {
  357. margin-bottom: 0;
  358. line-height: inherit;
  359. }
  360. .icon-list-demo i {
  361. display: inline-block;
  362. font-size: 18px;
  363. margin: 0;
  364. vertical-align: middle;
  365. width: 40px;
  366. }
  367. .icon-list-demo .col-md-4 {
  368. border-radius: 3px;
  369. }
  370. .icon-list-demo .col-md-4:hover {
  371. background-color: rgba(113, 182, 249, 0.07);
  372. }
  373. .button-list {
  374. margin-left: -8px;
  375. margin-bottom: -12px;
  376. }
  377. .button-list .btn {
  378. margin-bottom: 12px;
  379. margin-left: 8px;
  380. }
  381. .demo-dropdown {
  382. position: static;
  383. display: block;
  384. margin-bottom: 5px;
  385. clear: left;
  386. }
  387. #static-modal {
  388. position: relative;
  389. top: auto;
  390. right: auto;
  391. bottom: auto;
  392. left: auto;
  393. z-index: 1;
  394. display: block;
  395. }
  396. /* Switchery demo */
  397. .switchery-demo .switchery {
  398. margin-bottom: 10px;
  399. }
  400. /* =============
  401. Bootstrap-custom
  402. ============= */
  403. .row {
  404. margin-right: -10px;
  405. margin-left: -10px;
  406. }
  407. .container, .container-fluid, .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto,
  408. .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
  409. .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2,
  410. .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1,
  411. .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8,
  412. .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4,
  413. .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
  414. padding-left: 10px;
  415. padding-right: 10px;
  416. }
  417. .breadcrumb {
  418. background-color: transparent;
  419. margin-bottom: 15px;
  420. padding-top: 10px;
  421. padding-left: 0;
  422. }
  423. .blockquote {
  424. font-size: 16px;
  425. }
  426. /* Dropdown */
  427. .dropdown-menu {
  428. padding: 4px 0;
  429. font-size: 14px;
  430. -webkit-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
  431. box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
  432. }
  433. .dropdown-menu-animated {
  434. display: block;
  435. visibility: hidden;
  436. opacity: 0;
  437. transition: all 300ms ease;
  438. -moz-transition: all 300ms ease;
  439. -webkit-transition: all 300ms ease;
  440. -o-transition: all 300ms ease;
  441. -ms-transition: all 300ms ease;
  442. margin-top: 20px !important;
  443. }
  444. .show > .dropdown-menu {
  445. visibility: visible;
  446. opacity: 1;
  447. margin-top: 0 !important;
  448. }
  449. .dropdown-item.active, .dropdown-item:active {
  450. color: #435966;
  451. text-decoration: none;
  452. background-color: #eeeeee;
  453. }
  454. .dropdown-item {
  455. padding: 6px 1.5rem;
  456. }
  457. .dropdown-lg {
  458. width: 260px;
  459. }
  460. .arrow-none:after {
  461. border: none;
  462. margin: 0;
  463. display: none;
  464. }
  465. /* Background colors */
  466. .bg-custom {
  467. background-color: #71b6f9 !important;
  468. }
  469. .bg-primary {
  470. background-color: #188ae2 !important;
  471. }
  472. .bg-success {
  473. background-color: #10c469 !important;
  474. }
  475. .bg-info {
  476. background-color: #35b8e0 !important;
  477. }
  478. .bg-warning {
  479. background-color: #f9c851 !important;
  480. }
  481. .bg-danger {
  482. background-color: #ff5b5b !important;
  483. }
  484. .bg-muted {
  485. background-color: #f4f8fb !important;
  486. }
  487. .bg-inverse {
  488. background-color: #3b3e47 !important;
  489. }
  490. .bg-purple {
  491. background-color: #5b69bc !important;
  492. }
  493. .bg-pink {
  494. background-color: #ff8acc !important;
  495. }
  496. .bg-white {
  497. background-color: #ffffff !important;
  498. }
  499. .bg-lightdark {
  500. background-color: #f4f8fb !important;
  501. }
  502. /* Text colors */
  503. .text-custom {
  504. color: #71b6f9 !important;
  505. }
  506. .text-white {
  507. color: #ffffff !important;
  508. }
  509. .text-danger {
  510. color: #ff5b5b !important;
  511. }
  512. .text-muted {
  513. color: #98a6ad !important;
  514. }
  515. .text-primary {
  516. color: #188ae2 !important;
  517. }
  518. .text-warning {
  519. color: #f9c851 !important;
  520. }
  521. .text-success {
  522. color: #10c469 !important;
  523. }
  524. .text-info {
  525. color: #35b8e0 !important;
  526. }
  527. .text-inverse {
  528. color: #3b3e47 !important;
  529. }
  530. .text-pink {
  531. color: #ff8acc !important;
  532. }
  533. .text-purple {
  534. color: #5b69bc !important;
  535. }
  536. .text-dark {
  537. color: #f3f3f3 !important;
  538. }
  539. a.text-dark:focus, a.text-dark:hover {
  540. color: #f3f3f3 !important;
  541. }
  542. /* Form components */
  543. label {
  544. font-weight: 500;
  545. }
  546. textarea.form-control {
  547. min-height: 90px;
  548. }
  549. .form-control {
  550. background-color: #354650;
  551. border: 2px solid #415663;
  552. border-radius: 4px;
  553. font-size: 14px;
  554. max-width: 100%;
  555. color: #ffffff;
  556. -webkit-box-shadow: none;
  557. box-shadow: none;
  558. -webkit-transition: all 300ms linear;
  559. transition: all 300ms linear;
  560. }
  561. .form-control:focus {
  562. background-color: #354650;
  563. border: 2px solid #49616f;
  564. -webkit-box-shadow: none;
  565. box-shadow: none;
  566. outline: 0 !important;
  567. color: #ffffff;
  568. }
  569. input.form-control::-webkit-input-placeholder, textarea.form-control::-webkit-input-placeholder {
  570. color: rgba(255, 255, 255, 0.3);
  571. font-weight: normal;
  572. }
  573. input.form-control:-moz-placeholder, textarea.form-control:-moz-placeholder {
  574. color: rgba(255, 255, 255, 0.3);
  575. font-weight: normal;
  576. }
  577. input.form-control::-moz-placeholder, textarea.form-control::-moz-placeholder {
  578. color: rgba(255, 255, 255, 0.3);
  579. font-weight: normal;
  580. }
  581. input.form-control:-ms-input-placeholder, textarea.form-control:-ms-input-placeholder {
  582. color: rgba(255, 255, 255, 0.3);
  583. font-weight: normal;
  584. }
  585. .form-control:disabled, .form-control[readonly] {
  586. background-color: #394c57;
  587. opacity: 1;
  588. }
  589. .input-group-text {
  590. background-color: #3d515d;
  591. border-color: #3d515d;
  592. color: #ffffff;
  593. }
  594. .form-control-plaintext {
  595. color: #98a6ad;
  596. }
  597. .custom-control-label::before {
  598. background-color: #3d515d;
  599. }
  600. .custom-control-input:active ~ .custom-control-label::before {
  601. background-color: #3d515d;
  602. }
  603. .custom-control-input:checked ~ .custom-control-label::before {
  604. border-color: #188ae2;
  605. background-color: #188ae2;
  606. }
  607. .input-lg {
  608. height: 46px;
  609. padding: 10px 16px;
  610. font-size: 18px;
  611. line-height: 1.3333333;
  612. border-radius: 6px;
  613. }
  614. .input-sm {
  615. height: 30px;
  616. padding: 5px 10px;
  617. font-size: 12px;
  618. line-height: 1.5;
  619. border-radius: 3px;
  620. }
  621. .input-group-btn .btn {
  622. padding: 8px 12px;
  623. }
  624. .input-group-btn .btn-sm {
  625. padding: 5px 10px;
  626. }
  627. .input-group-btn .btn-lg {
  628. padding: 10px 17px;
  629. }
  630. select[multiple] {
  631. height: auto;
  632. }
  633. /* Badge */
  634. .badge {
  635. font-weight: 500;
  636. padding: 3px 5px;
  637. font-size: 12px;
  638. margin-top: 1px;
  639. color: #ffffff;
  640. }
  641. .badge-xs {
  642. font-size: 9px;
  643. }
  644. .badge-xs, .badge-sm {
  645. -webkit-transform: translate(0, -2px);
  646. transform: translate(0, -2px);
  647. }
  648. .badge-primary {
  649. background-color: #188ae2;
  650. }
  651. .badge-success {
  652. background-color: #10c469;
  653. }
  654. .badge-info {
  655. background-color: #35b8e0;
  656. }
  657. .badge-warning {
  658. background-color: #f9c851;
  659. }
  660. .badge-danger {
  661. background-color: #ff5b5b;
  662. }
  663. .badge-purple {
  664. background-color: #5b69bc;
  665. }
  666. .badge-pink {
  667. background-color: #ff8acc;
  668. }
  669. .badge-inverse {
  670. background-color: #3b3e47;
  671. }
  672. /* Pagination/ Pager */
  673. .pagination > li:first-child > a,
  674. .pagination > li:first-child > span {
  675. border-bottom-left-radius: 3px;
  676. border-top-left-radius: 3px;
  677. }
  678. .pagination > li:last-child > a,
  679. .pagination > li:last-child > span {
  680. border-bottom-right-radius: 3px;
  681. border-top-right-radius: 3px;
  682. }
  683. .pagination > li > a,
  684. .pagination > li > span {
  685. color: #98a6ad;
  686. background-color: #354650;
  687. border-color: #475e6c;
  688. }
  689. .pagination > li > a:hover,
  690. .pagination > li > span:hover,
  691. .pagination > li > a:focus,
  692. .pagination > li > span:focus,
  693. .page-item.disabled .page-link {
  694. color: #ffffff;
  695. background-color: #475e6c;
  696. border-color: #475e6c;
  697. }
  698. .pagination-split li {
  699. margin-left: 5px;
  700. float: left;
  701. }
  702. .pagination-split li:first-child {
  703. margin-left: 0;
  704. }
  705. .pagination-split li a {
  706. border-radius: 3px;
  707. }
  708. .pagination > .active > a,
  709. .pagination > .active > span,
  710. .pagination > .active > a:hover,
  711. .pagination > .active > span:hover,
  712. .pagination > .active > a:focus,
  713. .pagination > .active > span:focus,
  714. .page-item.active .page-link {
  715. background-color: #71b6f9;
  716. border-color: #71b6f9;
  717. }
  718. .pager li > a, .pager li > span {
  719. border-radius: 3px;
  720. color: #636e7b;
  721. }
  722. /* Tabs */
  723. .tab-content {
  724. padding: 20px;
  725. border: 2px solid #394c57;
  726. border-top: none;
  727. }
  728. .nav-tabs > .active > a, .nav-tabs > .active > a:focus, .nav-tabs > .active > a:hover {
  729. border: 2px solid #eeeeee !important;
  730. border-bottom-color: #ffffff !important;
  731. }
  732. .nav-tabs {
  733. border-bottom: 2px solid #394c57;
  734. }
  735. .nav-tabs > li {
  736. margin-bottom: -2px;
  737. }
  738. .nav-tabs a {
  739. color: #98a6ad;
  740. font-size: 15px;
  741. font-weight: 600;
  742. font-family: "Karla", sans-serif;
  743. }
  744. .nav > li > a:focus, .nav > li > a:hover {
  745. text-decoration: none;
  746. background-color: #f4f8fb;
  747. }
  748. .nav .show > a, .nav .show > a:focus, .nav .show > a:hover {
  749. border-color: #eeeeee;
  750. }
  751. .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  752. color: #eeeeee;
  753. background-color: #394c57 !important;
  754. border-color: #394c57 #394c57 #394c57 !important;
  755. }
  756. .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
  757. color: #eeeeee;
  758. background-color: #2f3e47;
  759. border-color: #2f3e47 #2f3e47 #2f3e47;
  760. }
  761. /* List group */
  762. .list-group-item {
  763. border: 1px solid #394c57;
  764. border-left: none;
  765. border-right: none;
  766. background-color: #2f3e47;
  767. }
  768. .list-group-item:hover {
  769. background-color: rgba(152, 166, 173, 0.1);
  770. }
  771. .list-group-item:first-child {
  772. border-top: none;
  773. }
  774. .list-group-item:last-child {
  775. border-bottom: none;
  776. }
  777. .list-no-border .list-group-item {
  778. border: none;
  779. }
  780. /* Dropcap */
  781. .dropcap {
  782. font-size: 3.1em;
  783. }
  784. .dropcap, .dropcap-circle, .dropcap-square {
  785. display: block;
  786. float: left;
  787. font-weight: 400;
  788. line-height: 36px;
  789. margin-right: 6px;
  790. text-shadow: none;
  791. }
  792. /* Image thumbnail */
  793. .img-thumbnail {
  794. background-color: #394c57;
  795. border-color: #415663;
  796. }
  797. /* Alert */
  798. .alert .btn {
  799. margin-top: 10px;
  800. }
  801. .alert-success {
  802. background-color: rgba(95, 190, 170, 0.3);
  803. border-color: rgba(95, 190, 170, 0.4);
  804. color: #5fbeaa;
  805. }
  806. .alert-info {
  807. background-color: rgba(52, 211, 235, 0.2);
  808. border-color: rgba(52, 211, 235, 0.3);
  809. color: #35b8e0;
  810. }
  811. .alert-warning {
  812. background-color: rgba(255, 189, 74, 0.2);
  813. border-color: rgba(255, 189, 74, 0.3);
  814. color: #f9c851;
  815. }
  816. .alert-danger {
  817. background-color: rgba(240, 80, 80, 0.2);
  818. border-color: rgba(240, 80, 80, 0.3);
  819. color: #ff5b5b;
  820. }
  821. /* Modals */
  822. .modal .modal-dialog .modal-content {
  823. -moz-box-shadow: none;
  824. -webkit-box-shadow: none;
  825. background-color: #2f3e47;
  826. border-color: #394c57;
  827. border-radius: 2px;
  828. box-shadow: none;
  829. padding: 25px;
  830. }
  831. .modal .modal-dialog .modal-content .modal-header {
  832. border-bottom: 2px solid #394c57;
  833. margin: 0;
  834. padding: 0;
  835. padding-bottom: 15px;
  836. }
  837. .modal .modal-dialog .modal-content .modal-body {
  838. padding: 20px 0;
  839. }
  840. .modal .modal-dialog .modal-content .modal-footer {
  841. padding: 0;
  842. border-top: 2px solid #394c57;
  843. padding-top: 15px;
  844. }
  845. .close {
  846. color: #98a6ad;
  847. }
  848. .modal-title {
  849. margin-top: 0;
  850. }
  851. .modal-full {
  852. width: 98%;
  853. }
  854. .modal-content .nav.nav-tabs + .tab-content {
  855. margin-bottom: 0px;
  856. }
  857. .modal-content .panel-group {
  858. margin-bottom: 0px;
  859. }
  860. .modal-content .panel {
  861. border-top: none;
  862. }
  863. /* Custom-modal */
  864. .modal-demo {
  865. background-color: #FFF;
  866. width: 600px;
  867. border-radius: 4px;
  868. display: none;
  869. }
  870. .modal-demo .close {
  871. position: absolute;
  872. top: 15px;
  873. right: 25px;
  874. color: #eeeeee;
  875. }
  876. .custom-modal-title {
  877. padding: 15px 25px 15px 25px;
  878. line-height: 22px;
  879. font-size: 18px;
  880. background-color: #36404a;
  881. color: #ffffff;
  882. text-align: left;
  883. margin: 0px;
  884. }
  885. .custom-modal-text {
  886. padding: 20px;
  887. }
  888. .custombox-modal-flash .close, .custombox-modal-rotatedown .close {
  889. top: 20px;
  890. z-index: 9999;
  891. }
  892. /* Tabs-Accordions */
  893. .tabs-vertical-env .tab-content {
  894. margin-bottom: 0px;
  895. }
  896. .table > thead > tr > td.middle-align, .table > tbody > tr > td.middle-align,
  897. .table > .tfood > tr > td.middle-align, .table > thead > tr > th.middle-align,
  898. .table > tbody > tr > th.middle-align, .table > .tfood > tr > th.middle-align {
  899. vertical-align: middle;
  900. }
  901. .list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
  902. background-color: #71b6f9;
  903. border-color: #71b6f9;
  904. }
  905. .nav-pills > .active > a > .badge {
  906. color: #71b6f9;
  907. }
  908. .has-success .form-control {
  909. border-color: #10c469;
  910. -webkit-box-shadow: none !important;
  911. box-shadow: none !important;
  912. }
  913. .has-warning .form-control {
  914. border-color: #f9c851;
  915. -webkit-box-shadow: none !important;
  916. box-shadow: none !important;
  917. }
  918. .has-error .form-control {
  919. border-color: #ff5b5b;
  920. -webkit-box-shadow: none !important;
  921. box-shadow: none !important;
  922. }
  923. .input-group-addon {
  924. border-radius: 2px;
  925. border: 1px solid #eeeeee;
  926. }
  927. /* Tooltips */
  928. .tooltip-inner {
  929. border-radius: 1px;
  930. padding: 6px 10px;
  931. }
  932. .jqstooltip {
  933. -webkit-box-sizing: content-box;
  934. box-sizing: content-box;
  935. width: auto !important;
  936. height: auto !important;
  937. }
  938. /* Popover */
  939. .popover {
  940. font-family: inherit;
  941. border-radius: 3px;
  942. }
  943. .popover .popover-header {
  944. background-color: transparent;
  945. color: #71b6f9;
  946. font-weight: 600;
  947. margin: 0;
  948. }
  949. /* Code */
  950. code {
  951. color: #435966;
  952. background-color: rgba(244, 248, 251, 0.5);
  953. border-radius: 4px;
  954. }
  955. /* Pre */
  956. pre {
  957. background-color: #354650;
  958. border: 1px solid #394c57;
  959. padding: 20px;
  960. color: #98a6ad;
  961. }
  962. /* Carousel */
  963. .carousel-control {
  964. width: 10%;
  965. }
  966. .carousel-control span {
  967. position: absolute;
  968. top: 50%;
  969. /* pushes the icon in the middle of the height */
  970. z-index: 5;
  971. display: inline-block;
  972. font-size: 30px;
  973. }
  974. /* Owl */
  975. .slider-bg {
  976. background-size: cover !important;
  977. padding: 5.5% 4.5%;
  978. }
  979. /* Media */
  980. .media {
  981. margin-bottom: 20px;
  982. }
  983. .media .media-heading {
  984. font-weight: 600;
  985. font-size: 16px;
  986. }
  987. .media:last-of-type {
  988. margin-bottom: 0;
  989. }
  990. /* =============
  991. Animation
  992. ============= */
  993. /* Progressbar Animated */
  994. @-webkit-keyframes animationProgress {
  995. from {
  996. width: 0;
  997. }
  998. }
  999. @keyframes animationProgress {
  1000. from {
  1001. width: 0;
  1002. }
  1003. }
  1004. /* Portlets loader */
  1005. @-webkit-keyframes sk-rotateplane {
  1006. 0% {
  1007. -webkit-transform: perspective(120px);
  1008. }
  1009. 50% {
  1010. -webkit-transform: perspective(120px) rotateY(180deg);
  1011. }
  1012. 100% {
  1013. -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
  1014. }
  1015. }
  1016. @keyframes sk-rotateplane {
  1017. 0% {
  1018. transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  1019. -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  1020. }
  1021. 50% {
  1022. transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  1023. -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  1024. }
  1025. 100% {
  1026. transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  1027. -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  1028. }
  1029. }
  1030. /*!
  1031. * Waves v0.6.0
  1032. * http://fian.my.id/Waves
  1033. *
  1034. * Copyright 2014 Alfiana E. Sibuea and other contributors
  1035. * Released under the MIT license
  1036. * https://github.com/fians/Waves/blob/master/LICENSE
  1037. */
  1038. .waves-effect {
  1039. position: relative;
  1040. cursor: pointer;
  1041. display: inline-block;
  1042. overflow: hidden;
  1043. -webkit-user-select: none;
  1044. -moz-user-select: none;
  1045. -ms-user-select: none;
  1046. user-select: none;
  1047. -webkit-tap-highlight-color: transparent;
  1048. vertical-align: middle;
  1049. z-index: 1;
  1050. will-change: opacity, transform;
  1051. -webkit-transition: all 0.3s ease-out;
  1052. transition: all 0.3s ease-out;
  1053. }
  1054. .waves-effect .waves-ripple {
  1055. position: absolute;
  1056. border-radius: 50%;
  1057. width: 20px;
  1058. height: 20px;
  1059. margin-top: -10px;
  1060. margin-left: -10px;
  1061. opacity: 0;
  1062. background: rgba(0, 0, 0, 0.2);
  1063. -webkit-transition: all 0.7s ease-out;
  1064. transition: all 0.7s ease-out;
  1065. -webkit-transition-property: -webkit-transform, opacity;
  1066. -webkit-transition-property: opacity, -webkit-transform;
  1067. transition-property: opacity, -webkit-transform;
  1068. transition-property: transform, opacity;
  1069. transition-property: transform, opacity, -webkit-transform;
  1070. -webkit-transform: scale(0);
  1071. transform: scale(0);
  1072. pointer-events: none;
  1073. }
  1074. .waves-notransition {
  1075. -webkit-transition: none !important;
  1076. transition: none !important;
  1077. }
  1078. .waves-circle {
  1079. -webkit-transform: translateZ(0);
  1080. transform: translateZ(0);
  1081. text-align: center;
  1082. width: 2.5em;
  1083. height: 2.5em;
  1084. line-height: 2.5em;
  1085. border-radius: 50%;
  1086. -webkit-mask-image: none;
  1087. }
  1088. .waves-input-wrapper {
  1089. border-radius: 0.2em;
  1090. vertical-align: bottom;
  1091. }
  1092. .waves-input-wrapper .waves-button-input {
  1093. position: relative;
  1094. top: 0;
  1095. left: 0;
  1096. z-index: 1;
  1097. }
  1098. .waves-block {
  1099. display: block;
  1100. }
  1101. .waves-effect.waves-light .waves-ripple {
  1102. background-color: rgba(255, 255, 255, 0.4);
  1103. }
  1104. .waves-effect.waves-custom .waves-ripple {
  1105. background-color: rgba(113, 182, 249, 0.4);
  1106. }
  1107. .waves-effect.waves-primary .waves-ripple {
  1108. background-color: rgba(24, 138, 226, 0.4);
  1109. }
  1110. .waves-effect.waves-success .waves-ripple {
  1111. background-color: rgba(16, 196, 105, 0.4);
  1112. }
  1113. .waves-effect.waves-info .waves-ripple {
  1114. background-color: rgba(53, 184, 224, 0.4);
  1115. }
  1116. .waves-effect.waves-warning .waves-ripple {
  1117. background-color: rgba(249, 200, 81, 0.4);
  1118. }
  1119. .waves-effect.waves-danger .waves-ripple {
  1120. background-color: rgba(255, 91, 91, 0.4);
  1121. }
  1122. .waves-effect.waves-pink .waves-ripple {
  1123. background-color: rgba(255, 138, 204, 0.4);
  1124. }
  1125. .waves-effect.purple .waves-ripple {
  1126. background-color: rgba(91, 105, 188, 0.2);
  1127. }
  1128. .waves-effect.waves-inverse .waves-ripple {
  1129. background-color: rgba(59, 62, 71, 0.4);
  1130. }
  1131. /* =============
  1132. Print css
  1133. ============= */
  1134. @media print {
  1135. .page-title-box, .topbar-left, .hidden-print, .breadcrumb, .page-title, .footer, .topbar {
  1136. display: none;
  1137. margin: 0;
  1138. padding: 0;
  1139. }
  1140. .left, .right-bar {
  1141. display: none;
  1142. }
  1143. .content {
  1144. margin-top: 0 !important;
  1145. padding-top: 0;
  1146. }
  1147. .content-page {
  1148. margin-left: 0 !important;
  1149. margin-top: 0;
  1150. }
  1151. }
  1152. /* =============
  1153. Buttons
  1154. ============= */
  1155. .btn {
  1156. border-radius: 2px;
  1157. padding: 6px 14px;
  1158. font-size: 14px;
  1159. -webkit-box-shadow: none !important;
  1160. box-shadow: none !important;
  1161. }
  1162. .btn-group-lg > .btn, .btn-lg {
  1163. padding: 10px 16px !important;
  1164. font-size: 16px;
  1165. }
  1166. .btn-group-sm > .btn, .btn-sm {
  1167. padding: 5px 10px !important;
  1168. font-size: 12px;
  1169. }
  1170. .btn-group .btn + .btn, .btn-group .btn + .btn-group, .btn-group .btn-group + .btn, .btn-group .btn-group + .btn-group {
  1171. margin-left: 0;
  1172. }
  1173. .btn-group.show .dropdown-toggle {
  1174. -webkit-box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.1) inset;
  1175. box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.1) inset;
  1176. }
  1177. .btn-custom, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-inverse, .btn-purple, .btn-pink {
  1178. color: #ffffff !important;
  1179. }
  1180. .btn-custom {
  1181. background-color: #71b6f9;
  1182. border-color: #71b6f9;
  1183. }
  1184. .btn-custom:hover, .btn-custom:focus, .btn-custom:active, .btn-custom.active,
  1185. .btn-custom.focus, .btn-custom:active, .btn-custom:focus, .btn-custom:hover,
  1186. .show > .dropdown-toggle.btn-custom {
  1187. background-color: #59a9f8 !important;
  1188. border: 1px solid #59a9f8 !important;
  1189. }
  1190. .btn-primary {
  1191. background-color: #188ae2 !important;
  1192. border: 1px solid #188ae2 !important;
  1193. }
  1194. .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
  1195. .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover,
  1196. .show > .dropdown-toggle.btn-primary {
  1197. background-color: #167ccb !important;
  1198. border: 1px solid #167ccb !important;
  1199. }
  1200. .btn-success {
  1201. background-color: #10c469 !important;
  1202. border: 1px solid #10c469 !important;
  1203. }
  1204. .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .btn-success.focus, .btn-success:active, .btn-success:focus, .btn-success:hover, .show > .dropdown-toggle.btn-success {
  1205. background-color: #0eac5c !important;
  1206. border: 1px solid #0eac5c !important;
  1207. }
  1208. .btn-info {
  1209. background-color: #35b8e0 !important;
  1210. border: 1px solid #35b8e0 !important;
  1211. }
  1212. .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .btn-info.focus, .btn-info:active, .btn-info:focus, .btn-info:hover, .show > .dropdown-toggle.btn-info {
  1213. background-color: #21afda !important;
  1214. border: 1px solid #21afda !important;
  1215. }
  1216. .btn-warning {
  1217. background-color: #f9c851 !important;
  1218. border: 1px solid #f9c851 !important;
  1219. }
  1220. .btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .btn-warning.focus, .btn-warning:active, .btn-warning:focus, .btn-warning:hover, .show > .dropdown-toggle.btn-warning {
  1221. background-color: #f8c038 !important;
  1222. border: 1px solid #f8c038 !important;
  1223. }
  1224. .btn-danger {
  1225. background-color: #ff5b5b !important;
  1226. border: 1px solid #ff5b5b !important;
  1227. }
  1228. .btn-danger:active, .btn-danger:focus, .btn-danger:hover, .btn-danger.active, .btn-danger.focus, .btn-danger:active, .btn-danger:focus, .btn-danger:hover, .show > .dropdown-toggle.btn-danger {
  1229. background-color: #ff4242 !important;
  1230. border: 1px solid #ff4242 !important;
  1231. }
  1232. .btn-inverse {
  1233. background-color: #3b3e47 !important;
  1234. border: 1px solid #3b3e47 !important;
  1235. }
  1236. .btn-inverse:hover, .btn-inverse:focus, .btn-inverse:active, .btn-inverse.active, .btn-inverse.focus, .btn-inverse:active, .btn-inverse:focus, .btn-inverse:hover, .show > .dropdown-toggle.btn-inverse {
  1237. background-color: #474a55 !important;
  1238. border: 1px solid #474a55 !important;
  1239. }
  1240. .btn-purple {
  1241. background-color: #5b69bc !important;
  1242. border: 1px solid #5b69bc !important;
  1243. }
  1244. .btn-purple:hover, .btn-purple:focus, .btn-purple:active {
  1245. background-color: #4a59b4 !important;
  1246. border: 1px solid #4a59b4 !important;
  1247. }
  1248. .btn-pink {
  1249. background-color: #ff8acc !important;
  1250. border: 1px solid #ff8acc !important;
  1251. }
  1252. .btn-pink:hover, .btn-pink:focus, .btn-pink:active {
  1253. background-color: #ff71c1 !important;
  1254. border: 1px solid #ff71c1 !important;
  1255. }
  1256. .btn-bordred {
  1257. border-bottom: 3px solid transparent;
  1258. }
  1259. .btn-bordred.btn-secondary {
  1260. background-color: #727b84;
  1261. border-bottom: 2px solid #616971 !important;
  1262. }
  1263. .btn-bordred.btn-custom {
  1264. background-color: #71b6f9;
  1265. border-bottom: 2px solid #4fa4f8 !important;
  1266. }
  1267. .btn-bordred.btn-primary {
  1268. border-bottom: 2px solid #1576c2 !important;
  1269. }
  1270. .btn-bordred.btn-success {
  1271. border-bottom: 2px solid #0da357 !important;
  1272. }
  1273. .btn-bordred.btn-info {
  1274. border-bottom: 2px solid #20a8d1 !important;
  1275. }
  1276. .btn-bordred.btn-warning {
  1277. border-bottom: 2px solid #f7b820 !important;
  1278. }
  1279. .btn-bordred.btn-danger {
  1280. border-bottom: 2px solid #ff2828 !important;
  1281. }
  1282. .btn-bordred.btn-inverse {
  1283. border-bottom: 2px solid #0d0d0f !important;
  1284. }
  1285. .btn-bordred.btn-purple {
  1286. border-bottom: 2px solid #4755ad !important;
  1287. }
  1288. .btn-bordred.btn-pink {
  1289. border-bottom: 2px solid #ff66bc !important;
  1290. }
  1291. .btn-rounded {
  1292. border-radius: 2em;
  1293. padding: 6px 18px;
  1294. }
  1295. .btn-trans.btn-custom {
  1296. border: 1px solid rgba(113, 182, 249, 0.1) !important;
  1297. background-color: rgba(113, 182, 249, 0.15) !important;
  1298. color: #71b6f9 !important;
  1299. }
  1300. .btn-trans.btn-secondary {
  1301. border: 1px solid rgba(114, 123, 132, 0.1) !important;
  1302. background-color: rgba(114, 123, 132, 0.15) !important;
  1303. color: #727b84 !important;
  1304. }
  1305. .btn-trans.btn-primary {
  1306. border: 1px solid rgba(24, 138, 226, 0.1) !important;
  1307. background-color: rgba(24, 138, 226, 0.15) !important;
  1308. color: #188ae2 !important;
  1309. }
  1310. .btn-trans.btn-success {
  1311. border: 1px solid rgba(16, 196, 105, 0.1) !important;
  1312. background-color: rgba(16, 196, 105, 0.15) !important;
  1313. color: #10c469 !important;
  1314. }
  1315. .btn-trans.btn-info {
  1316. border: 1px solid rgba(53, 184, 224, 0.1) !important;
  1317. background-color: rgba(53, 184, 224, 0.15) !important;
  1318. color: #35b8e0 !important;
  1319. }
  1320. .btn-trans.btn-warning {
  1321. border: 1px solid rgba(249, 200, 81, 0.1) !important;
  1322. background-color: rgba(249, 200, 81, 0.15) !important;
  1323. color: #f9c851 !important;
  1324. }
  1325. .btn-trans.btn-danger {
  1326. border: 1px solid rgba(255, 91, 91, 0.1) !important;
  1327. background-color: rgba(255, 91, 91, 0.15) !important;
  1328. color: #ff5b5b !important;
  1329. }
  1330. .btn-trans.btn-inverse {
  1331. border: 1px solid rgba(238, 238, 238, 0.1) !important;
  1332. background-color: rgba(238, 238, 238, 0.15) !important;
  1333. color: #98a6ad !important;
  1334. }
  1335. .btn-trans.btn-purple {
  1336. border: 1px solid rgba(91, 105, 188, 0.1) !important;
  1337. background-color: rgba(91, 105, 188, 0.15) !important;
  1338. color: #5b69bc !important;
  1339. }
  1340. .btn-trans.btn-pink {
  1341. border: 1px solid rgba(255, 138, 204, 0.1) !important;
  1342. background-color: rgba(255, 138, 204, 0.15) !important;
  1343. color: #ff8acc !important;
  1344. }
  1345. /* File Upload */
  1346. .fileupload {
  1347. overflow: hidden;
  1348. position: relative;
  1349. }
  1350. .fileupload input.upload {
  1351. cursor: pointer;
  1352. filter: alpha(opacity=0);
  1353. font-size: 20px;
  1354. margin: 0;
  1355. opacity: 0;
  1356. padding: 0;
  1357. position: absolute;
  1358. right: 0;
  1359. top: 0;
  1360. }
  1361. /* Social Buttons */
  1362. .btn-facebook {
  1363. color: #ffffff !important;
  1364. background-color: #3b5998 !important;
  1365. }
  1366. .btn-twitter {
  1367. color: #ffffff !important;
  1368. background-color: #00aced !important;
  1369. }
  1370. .btn-linkedin {
  1371. color: #ffffff !important;
  1372. background-color: #007bb6 !important;
  1373. }
  1374. .btn-dribbble {
  1375. color: #ffffff !important;
  1376. background-color: #ea4c89 !important;
  1377. }
  1378. .btn-googleplus {
  1379. color: #ffffff !important;
  1380. background-color: #dd4b39 !important;
  1381. }
  1382. .btn-instagram {
  1383. color: #ffffff !important;
  1384. background-color: #517fa4 !important;
  1385. }
  1386. .btn-pinterest {
  1387. color: #ffffff !important;
  1388. background-color: #cb2027 !important;
  1389. }
  1390. .btn-dropbox {
  1391. color: #ffffff !important;
  1392. background-color: #007ee5 !important;
  1393. }
  1394. .btn-flickr {
  1395. color: #ffffff !important;
  1396. background-color: #ff0084 !important;
  1397. }
  1398. .btn-tumblr {
  1399. color: #ffffff !important;
  1400. background-color: #32506d !important;
  1401. }
  1402. .btn-skype {
  1403. color: #ffffff !important;
  1404. background-color: #00aff0 !important;
  1405. }
  1406. .btn-youtube {
  1407. color: #ffffff !important;
  1408. background-color: #bb0000 !important;
  1409. }
  1410. .btn-github {
  1411. color: #ffffff !important;
  1412. background-color: #171515 !important;
  1413. }
  1414. /* =============
  1415. Checkbox and Radios
  1416. ============= */
  1417. .checkbox {
  1418. padding-left: 5px;
  1419. }
  1420. .checkbox label {
  1421. display: inline-block;
  1422. padding-left: 5px;
  1423. position: relative;
  1424. font-size: 14px;
  1425. font-weight: 400;
  1426. line-height: 18px;
  1427. }
  1428. .checkbox label::before {
  1429. -o-transition: 0.3s ease-in-out;
  1430. -webkit-transition: 0.3s ease-in-out;
  1431. background-color: #2f3e47;
  1432. border-radius: 3px;
  1433. border: 2px solid #4d6675;
  1434. content: "";
  1435. display: inline-block;
  1436. height: 17px;
  1437. left: 0;
  1438. margin-left: -17px;
  1439. position: absolute;
  1440. transition: 0.3s ease-in-out;
  1441. width: 17px;
  1442. outline: none !important;
  1443. }
  1444. .checkbox label::after {
  1445. color: #98a6ad;
  1446. display: inline-block;
  1447. font-size: 11px;
  1448. height: 16px;
  1449. left: 0;
  1450. margin-left: -17px;
  1451. padding-left: 3px;
  1452. padding-top: 1px;
  1453. position: absolute;
  1454. top: 0;
  1455. width: 16px;
  1456. }
  1457. .checkbox input[type="checkbox"] {
  1458. cursor: pointer;
  1459. opacity: 0;
  1460. z-index: 1;
  1461. outline: none !important;
  1462. }
  1463. .checkbox input[type="checkbox"]:disabled + label {
  1464. opacity: 0.65;
  1465. }
  1466. .checkbox input[type="checkbox"]:focus + label::before {
  1467. outline-offset: -2px;
  1468. outline: none;
  1469. }
  1470. .checkbox input[type="checkbox"]:checked + label::after {
  1471. content: "\f00c";
  1472. font-family: 'FontAwesome';
  1473. }
  1474. .checkbox input[type="checkbox"]:disabled + label::before {
  1475. background-color: #eeeeee;
  1476. cursor: not-allowed;
  1477. }
  1478. .checkbox.checkbox-circle label::before {
  1479. border-radius: 50%;
  1480. }
  1481. .checkbox.checkbox-inline {
  1482. margin-top: 0;
  1483. }
  1484. .checkbox.checkbox-single input {
  1485. height: 18px;
  1486. width: 18px;
  1487. position: absolute;
  1488. }
  1489. .checkbox.checkbox-single label {
  1490. height: 18px;
  1491. width: 18px;
  1492. }
  1493. .checkbox.checkbox-single label:before {
  1494. margin-left: 0;
  1495. }
  1496. .checkbox.checkbox-single label:after {
  1497. margin-left: 0;
  1498. }
  1499. .checkbox-custom input[type="checkbox"]:checked + label::before {
  1500. background-color: #71b6f9;
  1501. border-color: #71b6f9;
  1502. }
  1503. .checkbox-custom input[type="checkbox"]:checked + label::after {
  1504. color: #ffffff;
  1505. }
  1506. .checkbox-primary input[type="checkbox"]:checked + label::before {
  1507. background-color: #188ae2;
  1508. border-color: #188ae2;
  1509. }
  1510. .checkbox-primary input[type="checkbox"]:checked + label::after {
  1511. color: #ffffff;
  1512. }
  1513. .checkbox-danger input[type="checkbox"]:checked + label::before {
  1514. background-color: #ff5b5b;
  1515. border-color: #ff5b5b;
  1516. }
  1517. .checkbox-danger input[type="checkbox"]:checked + label::after {
  1518. color: #ffffff;
  1519. }
  1520. .checkbox-info input[type="checkbox"]:checked + label::before {
  1521. background-color: #35b8e0;
  1522. border-color: #35b8e0;
  1523. }
  1524. .checkbox-info input[type="checkbox"]:checked + label::after {
  1525. color: #ffffff;
  1526. }
  1527. .checkbox-warning input[type="checkbox"]:checked + label::before {
  1528. background-color: #f9c851;
  1529. border-color: #f9c851;
  1530. }
  1531. .checkbox-warning input[type="checkbox"]:checked + label::after {
  1532. color: #ffffff;
  1533. }
  1534. .checkbox-success input[type="checkbox"]:checked + label::before {
  1535. background-color: #10c469;
  1536. border-color: #10c469;
  1537. }
  1538. .checkbox-success input[type="checkbox"]:checked + label::after {
  1539. color: #ffffff;
  1540. }
  1541. .checkbox-purple input[type="checkbox"]:checked + label::before {
  1542. background-color: #5b69bc;
  1543. border-color: #5b69bc;
  1544. }
  1545. .checkbox-purple input[type="checkbox"]:checked + label::after {
  1546. color: #ffffff;
  1547. }
  1548. .checkbox-pink input[type="checkbox"]:checked + label::before {
  1549. background-color: #ff8acc;
  1550. border-color: #ff8acc;
  1551. }
  1552. .checkbox-pink input[type="checkbox"]:checked + label::after {
  1553. color: #ffffff;
  1554. }
  1555. .checkbox-inverse input[type="checkbox"]:checked + label::before {
  1556. background-color: #ffffff;
  1557. border-color: #ffffff;
  1558. }
  1559. .checkbox-inverse input[type="checkbox"]:checked + label::after {
  1560. color: #435966;
  1561. }
  1562. /* Radios */
  1563. .radio label {
  1564. display: inline-block;
  1565. padding-left: 5px;
  1566. position: relative;
  1567. font-weight: 400;
  1568. font-size: 13px;
  1569. }
  1570. .radio label::before {
  1571. -o-transition: border 0.5s ease-in-out;
  1572. -webkit-transition: border 0.5s ease-in-out;
  1573. background-color: #2f3e47;
  1574. border-radius: 50%;
  1575. border: 2px solid #4d6675;
  1576. content: "";
  1577. display: inline-block;
  1578. height: 17px;
  1579. left: 0;
  1580. margin-left: -20px;
  1581. position: absolute;
  1582. transition: border 0.5s ease-in-out;
  1583. width: 17px;
  1584. outline: none !important;
  1585. }
  1586. .radio label::after {
  1587. -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  1588. -ms-transform: scale(0, 0);
  1589. -o-transform: scale(0, 0);
  1590. -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  1591. -webkit-transform: scale(0, 0);
  1592. -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  1593. background-color: #98a6ad;
  1594. border-radius: 50%;
  1595. content: " ";
  1596. display: inline-block;
  1597. height: 11px;
  1598. left: 3px;
  1599. margin-left: -20px;
  1600. position: absolute;
  1601. top: 3px;
  1602. transform: scale(0, 0);
  1603. transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  1604. transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  1605. transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33), -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  1606. width: 11px;
  1607. }
  1608. .radio input[type="radio"] {
  1609. cursor: pointer;
  1610. opacity: 0;
  1611. z-index: 1;
  1612. outline: none !important;
  1613. }
  1614. .radio input[type="radio"]:disabled + label {
  1615. opacity: 0.65;
  1616. }
  1617. .radio input[type="radio"]:focus + label::before {
  1618. outline-offset: -2px;
  1619. outline: 5px auto -webkit-focus-ring-color;
  1620. outline: thin dotted;
  1621. }
  1622. .radio input[type="radio"]:checked + label::after {
  1623. -webkit-transform: scale(1, 1);
  1624. transform: scale(1, 1);
  1625. }
  1626. .radio input[type="radio"]:disabled + label::before {
  1627. cursor: not-allowed;
  1628. }
  1629. .radio.radio-inline {
  1630. margin-top: 0;
  1631. }
  1632. .radio.radio-single label {
  1633. height: 17px;
  1634. }
  1635. .radio-custom input[type="radio"] + label::after {
  1636. background-color: #71b6f9;
  1637. }
  1638. .radio-custom input[type="radio"]:checked + label::before {
  1639. border-color: #71b6f9;
  1640. }
  1641. .radio-custom input[type="radio"]:checked + label::after {
  1642. background-color: #71b6f9;
  1643. }
  1644. .radio-primary input[type="radio"] + label::after {
  1645. background-color: #188ae2;
  1646. }
  1647. .radio-primary input[type="radio"]:checked + label::before {
  1648. border-color: #188ae2;
  1649. }
  1650. .radio-primary input[type="radio"]:checked + label::after {
  1651. background-color: #188ae2;
  1652. }
  1653. .radio-danger input[type="radio"] + label::after {
  1654. background-color: #ff5b5b;
  1655. }
  1656. .radio-danger input[type="radio"]:checked + label::before {
  1657. border-color: #ff5b5b;
  1658. }
  1659. .radio-danger input[type="radio"]:checked + label::after {
  1660. background-color: #ff5b5b;
  1661. }
  1662. .radio-info input[type="radio"] + label::after {
  1663. background-color: #35b8e0;
  1664. }
  1665. .radio-info input[type="radio"]:checked + label::before {
  1666. border-color: #35b8e0;
  1667. }
  1668. .radio-info input[type="radio"]:checked + label::after {
  1669. background-color: #35b8e0;
  1670. }
  1671. .radio-warning input[type="radio"] + label::after {
  1672. background-color: #f9c851;
  1673. }
  1674. .radio-warning input[type="radio"]:checked + label::before {
  1675. border-color: #f9c851;
  1676. }
  1677. .radio-warning input[type="radio"]:checked + label::after {
  1678. background-color: #f9c851;
  1679. }
  1680. .radio-success input[type="radio"] + label::after {
  1681. background-color: #10c469;
  1682. }
  1683. .radio-success input[type="radio"]:checked + label::before {
  1684. border-color: #10c469;
  1685. }
  1686. .radio-success input[type="radio"]:checked + label::after {
  1687. background-color: #10c469;
  1688. }
  1689. .radio-purple input[type="radio"] + label::after {
  1690. background-color: #5b69bc;
  1691. }
  1692. .radio-purple input[type="radio"]:checked + label::before {
  1693. border-color: #5b69bc;
  1694. }
  1695. .radio-purple input[type="radio"]:checked + label::after {
  1696. background-color: #5b69bc;
  1697. }
  1698. .radio-pink input[type="radio"] + label::after {
  1699. background-color: #ff8acc;
  1700. }
  1701. .radio-pink input[type="radio"]:checked + label::before {
  1702. border-color: #ff8acc;
  1703. }
  1704. .radio-pink input[type="radio"]:checked + label::after {
  1705. background-color: #ff8acc;
  1706. }
  1707. /* X Editable */
  1708. .editable-checklist label {
  1709. display: block;
  1710. }
  1711. /* =============
  1712. Cards
  1713. ============= */
  1714. .card {
  1715. background-color: #2f3e47;
  1716. border-color: #394c57;
  1717. }
  1718. .card-title, .card-header {
  1719. margin-top: 0;
  1720. border: none !important;
  1721. }
  1722. .card-header {
  1723. background-color: #394c57;
  1724. }
  1725. .card-draggable-placeholder {
  1726. border: 2px dashed rgba(67, 89, 102, 0.5);
  1727. margin-bottom: 16px;
  1728. background-color: rgba(67, 89, 102, 0.08);
  1729. }
  1730. /* =============
  1731. Progressbars
  1732. ============= */
  1733. .progress {
  1734. -webkit-box-shadow: none !important;
  1735. background-color: #394c57;
  1736. box-shadow: none !important;
  1737. height: 10px;
  1738. margin-bottom: 18px;
  1739. overflow: hidden;
  1740. }
  1741. .progress-bar {
  1742. -webkit-box-shadow: none;
  1743. box-shadow: none;
  1744. font-size: 8px;
  1745. font-weight: 600;
  1746. line-height: 12px;
  1747. }
  1748. .progress.progress-sm {
  1749. height: 5px !important;
  1750. }
  1751. .progress.progress-sm .progress-bar {
  1752. font-size: 8px;
  1753. line-height: 5px;
  1754. }
  1755. .progress.progress-md {
  1756. height: 15px !important;
  1757. }
  1758. .progress.progress-md .progress-bar {
  1759. font-size: 10.8px;
  1760. line-height: 14.4px;
  1761. }
  1762. .progress.progress-lg {
  1763. height: 20px !important;
  1764. }
  1765. .progress.progress-lg .progress-bar {
  1766. font-size: 12px;
  1767. line-height: 20px;
  1768. }
  1769. .progress-bar-primary {
  1770. background-color: #188ae2;
  1771. }
  1772. .progress-bar-success {
  1773. background-color: #10c469;
  1774. }
  1775. .progress-bar-info {
  1776. background-color: #35b8e0;
  1777. }
  1778. .progress-bar-warning {
  1779. background-color: #f9c851;
  1780. }
  1781. .progress-bar-danger {
  1782. background-color: #ff5b5b;
  1783. }
  1784. .progress-bar-inverse {
  1785. background-color: #eeeeee;
  1786. }
  1787. .progress-bar-purple {
  1788. background-color: #5b69bc;
  1789. }
  1790. .progress-bar-pink {
  1791. background-color: #ff8acc;
  1792. }
  1793. .progress-bar-custom {
  1794. background-color: #71b6f9;
  1795. }
  1796. /* Custom progressbars */
  1797. .progress-bar-custom-alt {
  1798. background-color: rgba(113, 182, 249, 0.2);
  1799. }
  1800. .progress-bar-primary-alt {
  1801. background-color: rgba(24, 138, 226, 0.2);
  1802. }
  1803. .progress-bar-success-alt {
  1804. background-color: rgba(16, 196, 105, 0.2);
  1805. }
  1806. .progress-bar-info-alt {
  1807. background-color: rgba(53, 184, 224, 0.2);
  1808. }
  1809. .progress-bar-warning-alt {
  1810. background-color: rgba(249, 200, 81, 0.2);
  1811. }
  1812. .progress-bar-danger-alt {
  1813. background-color: rgba(255, 91, 91, 0.2);
  1814. }
  1815. .progress-bar-purple-alt {
  1816. background-color: rgba(91, 105, 188, 0.2);
  1817. }
  1818. .progress-bar-inverse-alt {
  1819. background-color: rgba(59, 62, 71, 0.2);
  1820. }
  1821. .progress-bar-pink-alt {
  1822. background-color: rgba(255, 138, 204, 0.2);
  1823. }
  1824. .progress-animated {
  1825. -webkit-animation-duration: 5s;
  1826. -webkit-animation-name: animationProgress;
  1827. -webkit-transition: 5s all;
  1828. animation-duration: 5s;
  1829. animation-name: animationProgress;
  1830. transition: 5s all;
  1831. }
  1832. /* Progressbar Vertical */
  1833. .progress-vertical {
  1834. min-height: 250px;
  1835. height: 250px;
  1836. width: 10px;
  1837. position: relative;
  1838. display: inline-block;
  1839. margin-bottom: 0;
  1840. margin-right: 20px;
  1841. }
  1842. .progress-vertical .progress-bar {
  1843. width: 100%;
  1844. }
  1845. .progress-vertical-bottom {
  1846. min-height: 250px;
  1847. height: 250px;
  1848. position: relative;
  1849. width: 10px;
  1850. display: inline-block;
  1851. margin-bottom: 0;
  1852. margin-right: 20px;
  1853. }
  1854. .progress-vertical-bottom .progress-bar {
  1855. width: 100%;
  1856. position: absolute;
  1857. bottom: 0;
  1858. }
  1859. .progress-vertical.progress-sm, .progress-vertical-bottom.progress-sm {
  1860. width: 5px !important;
  1861. }
  1862. .progress-vertical.progress-sm .progress-bar, .progress-vertical-bottom.progress-sm .progress-bar {
  1863. font-size: 8px;
  1864. line-height: 5px;
  1865. }
  1866. .progress-vertical.progress-md, .progress-vertical-bottom.progress-md {
  1867. width: 15px !important;
  1868. }
  1869. .progress-vertical.progress-md .progress-bar, .progress-vertical-bottom.progress-md .progress-bar {
  1870. font-size: 10.8px;
  1871. line-height: 14.4px;
  1872. }
  1873. .progress-vertical.progress-lg, .progress-vertical-bottom.progress-lg {
  1874. width: 20px !important;
  1875. }
  1876. .progress-vertical.progress-lg .progress-bar, .progress-vertical-bottom.progress-lg .progress-bar {
  1877. font-size: 12px;
  1878. line-height: 20px;
  1879. }
  1880. /* =============
  1881. Tables
  1882. ============= */
  1883. .table {
  1884. margin-bottom: 10px;
  1885. }
  1886. .table-striped > tbody > tr:nth-of-type(odd), .table-hover > tbody > tr:hover,
  1887. .table > thead > tr > td.active, .table > tbody > tr > td.active, .table > tfoot > tr > td.active,
  1888. .table > thead > tr > th.active, .table > tbody > tr > th.active, .table > tfoot > tr > th.active,
  1889. .table > thead > tr.active > td, .table > tbody > tr.active > td, .table > tfoot > tr.active > td,
  1890. .table > thead > tr.active > th, .table > tbody > tr.active > th, .table > tfoot > tr.active > th {
  1891. background-color: #354650 !important;
  1892. }
  1893. .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th,
  1894. .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td,
  1895. .table > thead > tr > th, .table-bordered {
  1896. border-color: #354650;
  1897. }
  1898. .table-bordered > thead > tr > th,
  1899. .table-bordered > tbody > tr > th,
  1900. .table-bordered > tfoot > tr > th,
  1901. .table-bordered > thead > tr > td,
  1902. .table-bordered > tbody > tr > td,
  1903. .table-bordered > tfoot > tr > td {
  1904. border-color: #354650;
  1905. }
  1906. .table > thead > tr > th {
  1907. vertical-align: bottom;
  1908. border-color: #354650;
  1909. }
  1910. .table-bordered {
  1911. border-color: #354650;
  1912. }
  1913. .table-dark td, .table-dark th, .table-dark thead th {
  1914. border-color: #32383e !important;
  1915. }
  1916. table.focus-on tbody tr.focused th {
  1917. background-color: #71b6f9;
  1918. color: #ffffff;
  1919. }
  1920. table.focus-on tbody tr.focused td {
  1921. background-color: #71b6f9;
  1922. color: #ffffff;
  1923. }
  1924. table.dataTable th.focus, table.dataTable td.focus {
  1925. outline: 2px solid #71b6f9 !important;
  1926. outline-offset: -1px;
  1927. background-color: rgba(113, 182, 249, 0.15);
  1928. }
  1929. table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected {
  1930. background-color: #71b6f9;
  1931. }
  1932. /* Responsive Table */
  1933. .table-rep-plugin .dropdown-menu li.checkbox-row {
  1934. padding: 2px 15px !important;
  1935. }
  1936. .table-rep-plugin .table-responsive {
  1937. border: none !important;
  1938. }
  1939. .table-rep-plugin tbody th {
  1940. font-size: 14px;
  1941. font-weight: normal;
  1942. }
  1943. .table-rep-plugin .checkbox-row {
  1944. padding-left: 40px;
  1945. }
  1946. .table-rep-plugin .checkbox-row label {
  1947. display: inline-block;
  1948. padding-left: 5px;
  1949. position: relative;
  1950. }
  1951. .table-rep-plugin .checkbox-row label::before {
  1952. -o-transition: 0.3s ease-in-out;
  1953. -webkit-transition: 0.3s ease-in-out;
  1954. background-color: #ffffff;
  1955. border-radius: 3px;
  1956. border: 1px solid #98a6ad;
  1957. content: "";
  1958. display: inline-block;
  1959. height: 17px;
  1960. left: 0;
  1961. margin-left: -20px;
  1962. position: absolute;
  1963. transition: 0.3s ease-in-out;
  1964. width: 17px;
  1965. outline: none !important;
  1966. }
  1967. .table-rep-plugin .checkbox-row label::after {
  1968. color: #f3f3f3;
  1969. display: inline-block;
  1970. font-size: 11px;
  1971. height: 16px;
  1972. left: 0;
  1973. margin-left: -20px;
  1974. padding-left: 3px;
  1975. padding-top: 1px;
  1976. position: absolute;
  1977. top: -1px;
  1978. width: 16px;
  1979. }
  1980. .table-rep-plugin .checkbox-row input[type="checkbox"] {
  1981. cursor: pointer;
  1982. opacity: 0;
  1983. z-index: 1;
  1984. outline: none !important;
  1985. }
  1986. .table-rep-plugin .checkbox-row input[type="checkbox"]:disabled + label {
  1987. opacity: 0.65;
  1988. }
  1989. .table-rep-plugin .checkbox-row input[type="checkbox"]:focus + label::before {
  1990. outline-offset: -2px;
  1991. outline: none;
  1992. }
  1993. .table-rep-plugin .checkbox-row input[type="checkbox"]:checked + label::after {
  1994. content: "\f00c";
  1995. font-family: 'FontAwesome';
  1996. }
  1997. .table-rep-plugin .checkbox-row input[type="checkbox"]:disabled + label::before {
  1998. background-color: #eeeeee;
  1999. cursor: not-allowed;
  2000. }
  2001. .table-rep-plugin .checkbox-row input[type="checkbox"]:checked + label::before {
  2002. background-color: #ffffff;
  2003. border-color: #71b6f9;
  2004. }
  2005. .table-rep-plugin .checkbox-row input[type="checkbox"]:checked + label::after {
  2006. color: #71b6f9;
  2007. }
  2008. .table-rep-plugin table.focus-on tbody tr.focused th, .table-rep-plugin table.focus-on tbody tr.focused td,
  2009. .table-rep-plugin .sticky-table-header {
  2010. background: #71b6f9;
  2011. color: #ffffff;
  2012. border-color: #71b6f9;
  2013. }
  2014. .table-rep-plugin .sticky-table-header {
  2015. top: 70px !important;
  2016. }
  2017. .table-rep-plugin .btn-default {
  2018. background-color: #ffffff;
  2019. border: 1px solid rgba(67, 89, 102, 0.3);
  2020. }
  2021. .table-rep-plugin .btn-group.pull-right {
  2022. float: right;
  2023. }
  2024. .table-rep-plugin .btn-group.pull-right .dropdown-menu {
  2025. left: auto;
  2026. right: 0;
  2027. }
  2028. .table-rep-plugin .btn-toolbar {
  2029. display: block;
  2030. }
  2031. .modal-block {
  2032. background: transparent;
  2033. margin: 40px auto;
  2034. max-width: 600px;
  2035. padding: 0;
  2036. position: relative;
  2037. text-align: left;
  2038. }
  2039. /* editable table */
  2040. #datatable-editable .actions a {
  2041. padding: 5px;
  2042. }
  2043. #datatable-editable .form-control {
  2044. background-color: #ffffff;
  2045. width: 100%;
  2046. }
  2047. #datatable-editable .fa-trash-o {
  2048. color: #ff5b5b;
  2049. }
  2050. #datatable-editable .fa-times {
  2051. color: #ff5b5b;
  2052. }
  2053. #datatable-editable .fa-pencil {
  2054. color: #10c469;
  2055. }
  2056. #datatable-editable .fa-save {
  2057. color: #10c469;
  2058. }
  2059. /* Data tables */
  2060. #datatable td {
  2061. font-weight: normal;
  2062. }
  2063. .paginate_button {
  2064. display: inline-block !important;
  2065. }
  2066. div.dataTables_paginate ul.pagination {
  2067. margin-top: 30px;
  2068. }
  2069. div.dataTables_info {
  2070. padding-top: 38px;
  2071. }
  2072. .dt-buttons {
  2073. float: left;
  2074. }
  2075. div#datatable-buttons_info {
  2076. float: left;
  2077. }
  2078. /* Responsive data table */
  2079. table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
  2080. table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
  2081. -webkit-box-shadow: 0 0 3px fade(#435966, 20%);
  2082. box-shadow: 0 0 3px fade(#435966, 20%);
  2083. background-color: #188ae2;
  2084. }
  2085. table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before,
  2086. table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
  2087. background-color: #ff5b5b;
  2088. }
  2089. /* Fixed table */
  2090. .fixedHeader-floating {
  2091. top: 70px !important;
  2092. }
  2093. /* Key Table */
  2094. table.dataTable th.focus, table.dataTable td.focus {
  2095. outline: 3px solid #71b6f9 !important;
  2096. outline-offset: -1px;
  2097. }
  2098. /* Tablesaw */
  2099. .tablesaw thead {
  2100. background: #394c57;
  2101. background-image: none;
  2102. border: none;
  2103. }
  2104. .tablesaw thead th {
  2105. text-shadow: none;
  2106. letter-spacing: 0.06em;
  2107. }
  2108. .tablesaw thead tr:first-child th {
  2109. padding-top: 1.1em;
  2110. padding-bottom: 0.9em;
  2111. }
  2112. .tablesaw thead tr:first-child th {
  2113. font-weight: 600;
  2114. font-family: inherit;
  2115. border: none;
  2116. color: #ffffff;
  2117. }
  2118. .tablesaw-bar .tablesaw-toolbar select, .tablesaw-enhanced .tablesaw-bar .btn.btn-select {
  2119. color: #98a6ad;
  2120. }
  2121. .tablesaw td, .tablesaw tbody th {
  2122. font-size: inherit;
  2123. line-height: inherit;
  2124. padding: 10px !important;
  2125. }
  2126. .tablesaw-stack tbody tr, .tablesaw tbody tr {
  2127. border-bottom: none;
  2128. }
  2129. .tablesaw-sortable .tablesaw-sortable-head.tablesaw-sortable-ascending button:after, .tablesaw-sortable .tablesaw-sortable-head.tablesaw-sortable-descending button:after {
  2130. font-family: FontAwesome;
  2131. font-size: 10px;
  2132. }
  2133. .tablesaw-sortable .tablesaw-sortable-head.tablesaw-sortable-ascending button:after {
  2134. content: "\f176";
  2135. }
  2136. .tablesaw-sortable .tablesaw-sortable-head.tablesaw-sortable-descending button:after {
  2137. content: "\f175";
  2138. }
  2139. .tablesaw-bar .btn-select.btn-small:after, .tablesaw-bar .btn-select.btn-micro:after {
  2140. font-size: 8px;
  2141. padding-right: 10px;
  2142. }
  2143. .tablesaw-swipe .tablesaw-cell-persist {
  2144. -webkit-box-shadow: none;
  2145. box-shadow: none;
  2146. border-color: #354650;
  2147. }
  2148. .tablesaw-enhanced .tablesaw-bar .btn {
  2149. text-shadow: none;
  2150. background-image: none;
  2151. }
  2152. .tablesaw-enhanced .tablesaw-bar .btn.btn-select:hover {
  2153. background: #ffffff;
  2154. }
  2155. .tablesaw-enhanced .tablesaw-bar .btn:hover, .tablesaw-enhanced .tablesaw-bar .btn:focus, .tablesaw-enhanced .tablesaw-bar .btn:active {
  2156. color: #188ae2 !important;
  2157. background-color: #ebeff2;
  2158. outline: none !important;
  2159. -webkit-box-shadow: none !important;
  2160. box-shadow: none !important;
  2161. background-image: none;
  2162. }
  2163. .tablesaw-toolbar label {
  2164. color: #ffffff;
  2165. font-weight: 700;
  2166. }
  2167. /* =============
  2168. Widgets
  2169. ============= */
  2170. .widget-chart-1 .widget-chart-box-1 {
  2171. float: left;
  2172. }
  2173. .widget-chart-1 .widget-detail-1 {
  2174. text-align: right;
  2175. margin-left: 80px;
  2176. min-height: 77px;
  2177. }
  2178. .widget-box-2 .widget-detail-2 {
  2179. text-align: right;
  2180. }
  2181. .widget-box-2 .widget-detail-2 .badge {
  2182. padding: 5px 10px;
  2183. }
  2184. .widget-user {
  2185. min-height: 112px;
  2186. }
  2187. .widget-user img {
  2188. height: 72px;
  2189. float: left;
  2190. }
  2191. .widget-user .wid-u-info {
  2192. margin-left: 90px;
  2193. }
  2194. .widget-user .wid-u-info p, .widget-user .wid-u-info h4 {
  2195. white-space: nowrap;
  2196. display: block;
  2197. overflow: hidden;
  2198. text-overflow: ellipsis;
  2199. }
  2200. /* Inbox-widget */
  2201. .inbox-widget .inbox-item {
  2202. border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  2203. overflow: hidden;
  2204. padding: 10px 0;
  2205. position: relative;
  2206. }
  2207. .inbox-widget .inbox-item .inbox-item-img {
  2208. display: block;
  2209. float: left;
  2210. margin-right: 15px;
  2211. width: 40px;
  2212. }
  2213. .inbox-widget .inbox-item img {
  2214. width: 40px;
  2215. }
  2216. .inbox-widget .inbox-item .inbox-item-author {
  2217. color: rgba(255, 255, 255, 0.7);
  2218. display: block;
  2219. margin: 0;
  2220. }
  2221. .inbox-widget .inbox-item .inbox-item-text {
  2222. color: #98a6ad;
  2223. display: block;
  2224. font-size: 12px;
  2225. margin: 0;
  2226. }
  2227. .inbox-widget .inbox-item .inbox-item-date {
  2228. color: #98a6ad;
  2229. font-size: 11px;
  2230. position: absolute;
  2231. right: 7px;
  2232. top: 2px;
  2233. }
  2234. /*
  2235. Template Name: Adminto Dashboard
  2236. Author: CoderThemes
  2237. Email: coderthemes$gmail.com
  2238. File: Pages
  2239. */
  2240. /* =============
  2241. == Pages List==
  2242. - Calendar
  2243. - Form Elements
  2244. - Notification
  2245. - Range slider
  2246. - Sweet Alert
  2247. - Charts
  2248. - Timelines
  2249. - Count down
  2250. - Gallery
  2251. - Maintenance
  2252. - Maps
  2253. - Tree view page
  2254. - Tour page
  2255. - Pricing
  2256. - Taskboard & Task detail
  2257. - Projects
  2258. - Account pages
  2259. - Inbox
  2260. - Profile
  2261. ============= */
  2262. /* =============
  2263. Calendar
  2264. ============= */
  2265. .calendar {
  2266. float: left;
  2267. margin-bottom: 0px;
  2268. }
  2269. .fc-view {
  2270. margin-top: 30px;
  2271. }
  2272. .none-border .modal-footer {
  2273. border-top: none;
  2274. }
  2275. .fc-toolbar {
  2276. margin-bottom: 5px;
  2277. margin-top: 15px;
  2278. }
  2279. .fc-toolbar h2 {
  2280. font-size: 18px;
  2281. font-weight: 600;
  2282. line-height: 30px;
  2283. text-transform: uppercase;
  2284. }
  2285. .fc-day {
  2286. background: transparent;
  2287. }
  2288. .fc-toolbar .fc-state-active, .fc-toolbar .ui-state-active,
  2289. .fc-toolbar button:focus, .fc-toolbar button:hover,
  2290. .fc-toolbar .ui-state-hover {
  2291. z-index: 0;
  2292. }
  2293. .fc-widget-header {
  2294. border: 1px solid #ebeff2;
  2295. }
  2296. .fc-widget-content {
  2297. border: 1px solid #ebeff2;
  2298. }
  2299. .fc th.fc-widget-header {
  2300. background: rgba(255, 255, 255, 0.2);
  2301. font-size: 14px;
  2302. line-height: 20px;
  2303. padding: 10px 0px;
  2304. text-transform: uppercase;
  2305. }
  2306. .fc-unthemed th, .fc-unthemed td, .fc-unthemed thead, .fc-unthemed tbody,
  2307. .fc-unthemed .fc-divider, .fc-unthemed .fc-row, .fc-unthemed .fc-popover {
  2308. background-color: transparent;
  2309. border-color: rgba(255, 255, 255, 0.1);
  2310. }
  2311. .fc-button {
  2312. background: #3b4e5a !important;
  2313. border: 1px solid #415663;
  2314. color: #ffffff;
  2315. text-transform: capitalize;
  2316. text-shadow: none;
  2317. }
  2318. .fc-text-arrow {
  2319. font-family: inherit;
  2320. font-size: 16px;
  2321. }
  2322. .fc-state-hover {
  2323. background: #F5F5F5;
  2324. }
  2325. .fc-state-highlight {
  2326. background: #f0f0f0;
  2327. }
  2328. .fc-cell-overlay {
  2329. background: #f0f0f0;
  2330. }
  2331. .fc-unthemed .fc-today {
  2332. background: transparent !important;
  2333. }
  2334. .fc-event {
  2335. border-radius: 2px;
  2336. border: none;
  2337. cursor: move;
  2338. font-size: 13px;
  2339. margin: 5px 7px;
  2340. padding: 5px 5px;
  2341. color: #ffffff !important;
  2342. text-align: center;
  2343. }
  2344. .external-event {
  2345. color: #ffffff;
  2346. cursor: move;
  2347. margin: 10px 0;
  2348. padding: 6px 10px;
  2349. }
  2350. .fc-basic-view td.fc-week-number span {
  2351. padding-right: 5px;
  2352. }
  2353. .fc-basic-view td.fc-day-number {
  2354. padding-right: 5px;
  2355. }
  2356. /* =============
  2357. Form Advanced
  2358. ============= */
  2359. .error {
  2360. color: #ff5b5b;
  2361. font-size: 12px;
  2362. font-weight: 500;
  2363. }
  2364. /* X-Editable */
  2365. .editable-click, a.editable-click, a.editable-click:hover {
  2366. border: none;
  2367. }
  2368. /* Bootstrap tagsinput */
  2369. .bootstrap-tagsinput {
  2370. -webkit-box-shadow: none;
  2371. box-shadow: none;
  2372. padding: 3px 7px 6px;
  2373. background-color: #354650;
  2374. border: 2px solid #415663;
  2375. width: 100%;
  2376. }
  2377. .bootstrap-tagsinput .label-info {
  2378. background-color: #71b6f9;
  2379. display: inline-block;
  2380. padding: 0 8px;
  2381. font-size: 13px;
  2382. margin: 3px 1px;
  2383. border-radius: 3px;
  2384. }
  2385. .bootstrap-tagsinput input {
  2386. color: #ffffff;
  2387. }
  2388. /* Multiple */
  2389. .ms-container {
  2390. background: transparent url("../images/multiple-arrow.png") no-repeat 50% 50%;
  2391. }
  2392. .ms-container .ms-list {
  2393. -webkit-box-shadow: none;
  2394. box-shadow: none;
  2395. border: 2px solid #415663;
  2396. }
  2397. .ms-container .ms-list.ms-focus {
  2398. -webkit-box-shadow: none;
  2399. box-shadow: none;
  2400. border: 2px solid #475e6c;
  2401. }
  2402. .ms-container .ms-selectable {
  2403. background-color: #354650;
  2404. }
  2405. .ms-container .ms-selectable li.ms-elem-selectable {
  2406. border: none;
  2407. padding: 5px 10px;
  2408. color: #98a6ad;
  2409. }
  2410. .ms-container .ms-selection {
  2411. background-color: #354650;
  2412. }
  2413. .ms-container .ms-selection li.ms-elem-selection {
  2414. border: none;
  2415. padding: 5px 10px;
  2416. color: #98a6ad;
  2417. }
  2418. .search-input {
  2419. margin-bottom: 10px;
  2420. }
  2421. .ms-selectable {
  2422. -webkit-box-shadow: none;
  2423. box-shadow: none;
  2424. outline: none !important;
  2425. }
  2426. .ms-container .ms-list.ms-focus {
  2427. -webkit-box-shadow: none;
  2428. box-shadow: none;
  2429. }
  2430. .ms-container .ms-selectable li.ms-hover {
  2431. background-color: #71b6f9;
  2432. color: #ffffff;
  2433. }
  2434. .ms-container .ms-selection li.ms-hover {
  2435. background-color: #71b6f9;
  2436. color: #ffffff;
  2437. }
  2438. /* Select 2 */
  2439. .select2-container {
  2440. width: 100% !important;
  2441. }
  2442. .select2-container .select2-selection--single {
  2443. background-color: #354650;
  2444. border: 2px solid #415663;
  2445. height: 38px;
  2446. }
  2447. .select2-container .select2-selection--single .select2-selection__rendered {
  2448. line-height: 36px;
  2449. padding-left: 12px;
  2450. color: #98a6ad;
  2451. }
  2452. .select2-container .select2-selection--single .select2-selection__arrow {
  2453. height: 34px;
  2454. width: 34px;
  2455. right: 3px;
  2456. }
  2457. .select2-container .select2-selection--single .select2-selection__arrow b {
  2458. border-color: #c8c8c8 transparent transparent transparent;
  2459. border-width: 6px 6px 0 6px;
  2460. }
  2461. .select2-container--open .select2-selection--single .select2-selection__arrow b {
  2462. border-color: transparent transparent #c8c8c8 transparent !important;
  2463. border-width: 0 6px 6px 6px !important;
  2464. }
  2465. .select2-results__option {
  2466. padding: 6px 12px;
  2467. }
  2468. .select2-dropdown {
  2469. border: 1px solid #e1e1e1;
  2470. }
  2471. .select2-container--default .select2-search--dropdown {
  2472. padding: 10px;
  2473. background-color: #fbfbfb;
  2474. }
  2475. .select2-container--default .select2-search--dropdown .select2-search__field {
  2476. border: 1px solid #e1e1e1;
  2477. }
  2478. .select2-container--default .select2-results__option--highlighted[aria-selected] {
  2479. background-color: #71b6f9;
  2480. }
  2481. .select2-container--default .select2-results__option[aria-selected=true] {
  2482. background-color: #eeeeee;
  2483. color: #435966;
  2484. }
  2485. .select2-container--default .select2-results__option[aria-selected=true]:hover {
  2486. background-color: #71b6f9;
  2487. color: #ffffff;
  2488. }
  2489. .select2-container .select2-selection--multiple {
  2490. min-height: 38px;
  2491. background-color: #354650;
  2492. border: 2px solid #415663 !important;
  2493. }
  2494. .select2-container .select2-selection--multiple .select2-selection__rendered {
  2495. padding: 2px 10px;
  2496. }
  2497. .select2-container .select2-selection--multiple .select2-search__field {
  2498. margin-top: 7px;
  2499. border: 0;
  2500. color: #ffffff;
  2501. }
  2502. .select2-container .select2-selection--multiple .select2-selection__choice {
  2503. background-color: #71b6f9;
  2504. border: 1px solid transparent;
  2505. color: #ffffff;
  2506. border-radius: 3px;
  2507. padding: 0 7px;
  2508. }
  2509. .select2-container .select2-selection--multiple .select2-selection__choice__remove {
  2510. color: #ffffff;
  2511. margin-right: 5px;
  2512. }
  2513. .select2-container .select2-selection--multiple .select2-selection__choice__remove:hover {
  2514. color: #ffffff;
  2515. }
  2516. /* Bootstrap-select */
  2517. .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
  2518. width: 100% !important;
  2519. }
  2520. .bootstrap-select .dropdown-toggle:focus {
  2521. outline: none !important;
  2522. }
  2523. .bootstrap-select .glyphicon {
  2524. padding-right: 6px;
  2525. }
  2526. /* Form validation */
  2527. .parsley-error {
  2528. border-color: #ff5b5b !important;
  2529. }
  2530. .parsley-errors-list {
  2531. display: none;
  2532. margin: 0;
  2533. padding: 0;
  2534. }
  2535. .parsley-errors-list.filled {
  2536. display: block;
  2537. }
  2538. .parsley-errors-list > li {
  2539. font-size: 12px;
  2540. list-style: none;
  2541. color: #ff5b5b;
  2542. }
  2543. /* Datepicker */
  2544. .datepicker {
  2545. padding: 8px;
  2546. }
  2547. .datepicker th {
  2548. font-size: 14px !important;
  2549. }
  2550. .datepicker table tr td.today, .datepicker table tr td.today:hover,
  2551. .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:hover,
  2552. .datepicker table tr td.selected, .datepicker table tr td.selected:hover,
  2553. .datepicker table tr td.selected.disabled, .datepicker table tr td.selected.disabled:hover,
  2554. .datepicker table tr td span.active, .datepicker table tr td span.active:hover,
  2555. .datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled:hover {
  2556. background-image: none;
  2557. }
  2558. .datepicker table tr td span.active:hover, .datepicker table tr td span.active:hover:hover,
  2559. .datepicker table tr td span.active.disabled:hover, .datepicker table tr td span.active.disabled:hover:hover,
  2560. .datepicker table tr td span.active:active, .datepicker table tr td span.active:hover:active,
  2561. .datepicker table tr td span.active.disabled:active, .datepicker table tr td span.active.disabled:hover:active,
  2562. .datepicker table tr td span.active.active, .datepicker table tr td span.active:hover.active,
  2563. .datepicker table tr td span.active.disabled.active, .datepicker table tr td span.active.disabled:hover.active,
  2564. .datepicker table tr td span.active.disabled, .datepicker table tr td span.active:hover.disabled,
  2565. .datepicker table tr td span.active.disabled.disabled, .datepicker table tr td span.active.disabled:hover.disabled,
  2566. .datepicker table tr td span.active[disabled], .datepicker table tr td span.active:hover[disabled],
  2567. .datepicker table tr td span.active.disabled[disabled], .datepicker table tr td span.active.disabled:hover[disabled] {
  2568. background-color: #71b6f9;
  2569. }
  2570. .datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.disabled,
  2571. .datepicker table tr td.active.disabled:hover {
  2572. background-color: #71b6f9 !important;
  2573. background-image: none;
  2574. -webkit-box-shadow: none;
  2575. box-shadow: none;
  2576. text-shadow: none;
  2577. }
  2578. .datepicker thead tr:first-child th:hover, .datepicker tfoot tr th:hover {
  2579. background-color: #fafafa;
  2580. }
  2581. .datepicker-inline {
  2582. border: 2px solid #415663;
  2583. }
  2584. .daterangepicker td.active, .daterangepicker td.active:hover {
  2585. background-color: #188ae2;
  2586. border-color: #188ae2;
  2587. }
  2588. .daterangepicker .input-mini.active {
  2589. border: 1px solid #AAAAAA;
  2590. }
  2591. .daterangepicker .ranges li {
  2592. border-radius: 2px;
  2593. color: #435966;
  2594. font-weight: 600;
  2595. font-size: 12px;
  2596. }
  2597. .daterangepicker select.hourselect, .daterangepicker select.minuteselect,
  2598. .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
  2599. border: 1px solid #e3e3e3;
  2600. padding: 2px;
  2601. width: 60px;
  2602. }
  2603. .daterangepicker .ranges li.active, .daterangepicker .ranges li:hover {
  2604. background-color: #188ae2;
  2605. border: 1px solid #188ae2;
  2606. }
  2607. /* Timepicker */
  2608. .bootstrap-timepicker-widget table td a:hover {
  2609. background-color: transparent;
  2610. border-color: transparent;
  2611. border-radius: 4px;
  2612. color: #188ae2;
  2613. text-decoration: none;
  2614. }
  2615. .bootstrap-timepicker-widget table td input {
  2616. border: none;
  2617. }
  2618. /* Bootstrap-touchSpin */
  2619. .bootstrap-touchspin .input-group-addon {
  2620. padding: .5rem .75rem;
  2621. margin-bottom: 0;
  2622. font-size: 1rem;
  2623. font-weight: 400;
  2624. line-height: 1.25;
  2625. color: #98a6ad;
  2626. text-align: center;
  2627. background-color: #394c57;
  2628. border: 1px solid #394c57;
  2629. }
  2630. .bootstrap-touchspin .input-group-btn:not(:first-child) > .btn, .bootstrap-touchspin .input-group-btn:not(:first-child) > .btn-group {
  2631. z-index: 2;
  2632. margin-left: -1px;
  2633. }
  2634. .bootstrap-touchspin .input-group .form-control:not(:first-child), .bootstrap-touchspin .input-group-addon:not(:first-child), .bootstrap-touchspin .input-group-btn:not(:first-child) > .btn, .bootstrap-touchspin .input-group-btn:not(:first-child) > .btn-group > .btn, .bootstrap-touchspin .input-group-btn:not(:first-child) > .dropdown-toggle, .bootstrap-touchspin .input-group-btn:not(:last-child) > .btn-group:not(:first-child) > .btn, .bootstrap-touchspin .input-group-btn:not(:last-child) > .btn:not(:first-child) {
  2635. border-top-left-radius: 0;
  2636. border-bottom-left-radius: 0;
  2637. }
  2638. .bootstrap-touchspin .input-group .form-control:not(:last-child), .bootstrap-touchspin .input-group-addon:not(:last-child), .bootstrap-touchspin .input-group-btn:not(:first-child) > .btn-group:not(:last-child) > .btn, .bootstrap-touchspin .input-group-btn:not(:first-child) > .btn:not(:last-child):not(.dropdown-toggle), .bootstrap-touchspin .input-group-btn:not(:last-child) > .btn, .bootstrap-touchspin .input-group-btn:not(:last-child) > .btn-group > .btn, .bootstrap-touchspin .input-group-btn:not(:last-child) > .dropdown-toggle {
  2639. border-top-right-radius: 0;
  2640. border-bottom-right-radius: 0;
  2641. }
  2642. /* Form wizard */
  2643. .navtab-wizard li:first-of-type a {
  2644. border-left: none !important;
  2645. }
  2646. .navtab-wizard li:first-of-type a:hover, .navtab-wizard li:first-of-type a:focus, .navtab-wizard li:first-of-type a:active {
  2647. border-left: none !important;
  2648. }
  2649. .navtab-wizard li:last-of-type a {
  2650. border-right: none !important;
  2651. }
  2652. .navtab-wizard li:last-of-type a:hover, .navtab-wizard li:last-of-type a:focus, .navtab-wizard li:last-of-type a:active {
  2653. border-right: none !important;
  2654. }
  2655. /* Dropify */
  2656. .dropify-wrapper {
  2657. background-color: #2f3e47;
  2658. border: 2px solid #415663;
  2659. }
  2660. .dropify-wrapper:hover {
  2661. background-image: linear-gradient(-45deg, #435966 25%, transparent 25%, transparent 50%, #435966 50%, #435966 75%, transparent 75%, transparent);
  2662. }
  2663. .dropify-wrapper .dropify-message p {
  2664. color: #98a6ad;
  2665. }
  2666. /* Wysiwig */
  2667. .mce-content-body p {
  2668. color: #9398a0;
  2669. font-size: 14px;
  2670. font-weight: 300;
  2671. }
  2672. .mce-popover .mce-arrow:after {
  2673. border-bottom-color: red;
  2674. }
  2675. .mce-popover .mce-colorbutton-grid {
  2676. margin: 0px;
  2677. border: 1px solid #d7dce5 !important;
  2678. padding: 4px;
  2679. }
  2680. .mce-reset .mce-window-head {
  2681. border-bottom: 1px solid #d7dce5;
  2682. }
  2683. .mce-reset .mce-window-head .mce-title {
  2684. color: #707780;
  2685. font-size: 16px;
  2686. font-weight: 400;
  2687. }
  2688. .mce-reset .mce-textbox {
  2689. border-radius: 0px;
  2690. -webkit-box-shadow: none;
  2691. box-shadow: none;
  2692. outline: 0;
  2693. border-color: #d7dce5;
  2694. height: 30px;
  2695. font-weight: 300;
  2696. line-height: 30px;
  2697. color: #aaaaaa;
  2698. font-size: 14px;
  2699. }
  2700. .mce-reset .mce-textbox:focus {
  2701. -webkit-box-shadow: none;
  2702. box-shadow: none;
  2703. border-color: #71b6f9;
  2704. }
  2705. .mce-reset .mce-checkbox .mce-ico {
  2706. background-image: none;
  2707. background-color: #ffffff;
  2708. border-radius: 0px;
  2709. border: 1px solid #d7dce5;
  2710. }
  2711. .mce-reset .mce-checkbox .mce-label {
  2712. color: #707780;
  2713. font-size: 12px;
  2714. font-weight: 400;
  2715. }
  2716. .mce-container {
  2717. border-radius: 0px !important;
  2718. border-width: 0px !important;
  2719. }
  2720. .mce-container .mce-menubar {
  2721. background-color: #394c57 !important;
  2722. border: 1px solid #415663 !important;
  2723. padding: 2px;
  2724. }
  2725. .mce-container .mce-menubar .mce-btn button span {
  2726. color: #707780;
  2727. font-size: 14px;
  2728. font-weight: 400;
  2729. text-transform: capitalize;
  2730. }
  2731. .mce-container .mce-menubar .mce-btn button .mce-caret {
  2732. border-top-color: #707780;
  2733. }
  2734. .mce-container .mce-menubar .mce-btn button:hover {
  2735. background-color: #e8ebf1;
  2736. }
  2737. .mce-container .mce-menubar .mce-btn.mce-active button {
  2738. background-color: #e8ebf1;
  2739. }
  2740. .mce-container .mce-btn {
  2741. background-color: #d7dce5;
  2742. background-image: none;
  2743. outline: 0;
  2744. border: 0px;
  2745. border-radius: 0px;
  2746. }
  2747. .mce-container .mce-btn button {
  2748. color: #ffffff;
  2749. font-size: 14px;
  2750. font-weight: 400;
  2751. text-shadow: none;
  2752. }
  2753. .mce-container .mce-btn:hover {
  2754. background-color: #b8c1d1;
  2755. background-image: none;
  2756. }
  2757. .mce-container .mce-primary {
  2758. background-color: #71b6f9;
  2759. background-image: none;
  2760. outline: 0;
  2761. border: 0px;
  2762. border-radius: 0px;
  2763. }
  2764. .mce-container .mce-primary button {
  2765. color: #ffffff;
  2766. font-size: 14px;
  2767. font-weight: 400;
  2768. text-shadow: none;
  2769. }
  2770. .mce-container .mce-primary:hover {
  2771. background-color: #0c7cd5;
  2772. background-image: none;
  2773. }
  2774. .mce-container .mce-toolbar-grp {
  2775. background-color: #394c57 !important;
  2776. border: 1px solid #415663 !important;
  2777. border-top-width: 0px !important;
  2778. padding: 6px;
  2779. }
  2780. .mce-container .mce-edit-area {
  2781. border: 1px solid #415663 !important;
  2782. border-width: 0px 1px !important;
  2783. }
  2784. .mce-container .mce-statusbar {
  2785. background-color: #394c57 !important;
  2786. border: 1px solid #415663 !important;
  2787. }
  2788. .mce-container .mce-statusbar .mce-path .mce-path-item {
  2789. color: #707780;
  2790. font-size: 14px;
  2791. font-weight: 400;
  2792. }
  2793. .mce-container .mce-widget {
  2794. color: #9398a0;
  2795. font-size: 14px;
  2796. font-weight: 400;
  2797. border-left: 1px solid transparent;
  2798. }
  2799. .mce-container .mce-btn-group {
  2800. border: 1px solid transparent !important;
  2801. }
  2802. .mce-label {
  2803. text-shadow: none !important;
  2804. }
  2805. .mce-container .mce-btn-group .mce-btn {
  2806. -webkit-box-shadow: none;
  2807. box-shadow: none;
  2808. background-image: none;
  2809. background-color: #3b4e5a;
  2810. border-width: 0px;
  2811. border-radius: 0px !important;
  2812. }
  2813. .mce-container .mce-btn-group .mce-btn:hover,
  2814. .mce-container .mce-btn-group .mce-btn:focus {
  2815. -webkit-box-shadow: none;
  2816. box-shadow: none;
  2817. background-image: none;
  2818. background-color: #3d515d;
  2819. }
  2820. .mce-container .mce-btn-group .mce-btn button span {
  2821. color: #707780;
  2822. font-size: 14px;
  2823. font-weight: 300;
  2824. }
  2825. .mce-caret {
  2826. border-top: 4px solid #4d6675 !important;
  2827. }
  2828. .mce-splitbtn .mce-open, .mce-colorbutton:hover .mce-open, .mce-colorbutton .mce-open {
  2829. border-left: none !important;
  2830. }
  2831. .mce-container .mce-btn-group .mce-btn button .mce-caret {
  2832. color: #707780;
  2833. font-size: 14px;
  2834. }
  2835. .mce-container .mce-ico {
  2836. color: #707780;
  2837. font-size: 14px;
  2838. }
  2839. .mce-container .mce-panel {
  2840. background-image: none;
  2841. }
  2842. .mce-container.mce-menu {
  2843. border: 1px solid #d7dce5 !important;
  2844. }
  2845. .mce-container.mce-menu .mce-menu-item {
  2846. background-image: none;
  2847. }
  2848. .mce-container.mce-menu .mce-menu-item .mce-ico {
  2849. color: #71b6f9;
  2850. font-size: 14px;
  2851. }
  2852. .mce-container.mce-menu .mce-menu-item .mce-text {
  2853. color: #707780;
  2854. font-size: 14px;
  2855. font-weight: 400;
  2856. text-transform: capitalize;
  2857. }
  2858. .mce-container.mce-menu .mce-menu-item .mce-menu-shortcut {
  2859. color: #aaaaaa;
  2860. font-size: 12px;
  2861. font-weight: 300;
  2862. text-transform: capitalize;
  2863. }
  2864. .mce-container.mce-menu .mce-menu-item:hover,
  2865. .mce-container.mce-menu .mce-menu-item:focus,
  2866. .mce-container.mce-menu .mce-menu-item.mce-selected {
  2867. background-color: #71b6f9;
  2868. }
  2869. .mce-container.mce-menu .mce-menu-item:hover .mce-ico,
  2870. .mce-container.mce-menu .mce-menu-item:focus .mce-ico,
  2871. .mce-container.mce-menu .mce-menu-item.mce-selected .mce-ico,
  2872. .mce-container.mce-menu .mce-menu-item:hover .mce-text,
  2873. .mce-container.mce-menu .mce-menu-item:focus .mce-text,
  2874. .mce-container.mce-menu .mce-menu-item.mce-selected .mce-text,
  2875. .mce-container.mce-menu .mce-menu-item:hover .mce-menu-shortcut,
  2876. .mce-container.mce-menu .mce-menu-item:focus .mce-menu-shortcut,
  2877. .mce-container.mce-menu .mce-menu-item.mce-selected .mce-menu-shortcut {
  2878. color: #ffffff;
  2879. }
  2880. .mce-container.mce-menu .mce-menu-item.mce-disabled .mce-ico,
  2881. .mce-container.mce-menu .mce-menu-item.mce-disabled .mce-text,
  2882. .mce-container.mce-menu .mce-menu-item.mce-disabled .mce-menu-shortcut {
  2883. color: #aaaaaa;
  2884. }
  2885. .mce-container.mce-menu .mce-menu-item.mce-disabled:hover,
  2886. .mce-container.mce-menu .mce-menu-item.mce-disabled:focus,
  2887. .mce-container.mce-menu .mce-menu-item.mce-disabled.mce-selected {
  2888. background-color: #d7dce5;
  2889. }
  2890. .mce-container.mce-menu .mce-menu-item.mce-disabled:hover .mce-ico,
  2891. .mce-container.mce-menu .mce-menu-item.mce-disabled:focus .mce-ico,
  2892. .mce-container.mce-menu .mce-menu-item.mce-disabled.mce-selected .mce-ico,
  2893. .mce-container.mce-menu .mce-menu-item.mce-disabled:hover .mce-text,
  2894. .mce-container.mce-menu .mce-menu-item.mce-disabled:focus .mce-text,
  2895. .mce-container.mce-menu .mce-menu-item.mce-disabled.mce-selected .mce-text,
  2896. .mce-container.mce-menu .mce-menu-item.mce-disabled:hover .mce-menu-shortcut,
  2897. .mce-container.mce-menu .mce-menu-item.mce-disabled:focus .mce-menu-shortcut,
  2898. .mce-container.mce-menu .mce-menu-item.mce-disabled.mce-selected .mce-menu-shortcut {
  2899. color: #ffffff;
  2900. }
  2901. .mce-container.mce-menu .mce-menu-item-sep {
  2902. background-color: #d7dce5;
  2903. }
  2904. .mce-container.mce-menu .mce-menu-item-sep:hover {
  2905. background-color: #d7dce5;
  2906. }
  2907. .mce-menubtn button {
  2908. color: #98a6ad !important;
  2909. }
  2910. .mce-menu-item-normal.mce-active {
  2911. background-color: #71b6f9 !important;
  2912. }
  2913. .mce-menu-item-normal.mce-active .mce-text {
  2914. color: #ffffff !important;
  2915. }
  2916. /* =============
  2917. Notification
  2918. ============= */
  2919. #toast-container > div {
  2920. -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  2921. box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  2922. opacity: 1;
  2923. }
  2924. #toast-container > :hover {
  2925. -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  2926. box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  2927. opacity: 0.9;
  2928. }
  2929. .toast {
  2930. background-color: #71b6f9;
  2931. }
  2932. .toast-success {
  2933. background-color: rgba(16, 196, 105, 0.8);
  2934. border: 2px solid #10c469;
  2935. }
  2936. .toast-error {
  2937. background-color: rgba(255, 91, 91, 0.8);
  2938. border: 2px solid #ff5b5b;
  2939. }
  2940. .toast-info {
  2941. background-color: rgba(53, 184, 224, 0.8);
  2942. border: 2px solid #35b8e0;
  2943. }
  2944. .toast-warning {
  2945. background-color: rgba(249, 200, 81, 0.8);
  2946. border: 2px solid #f9c851;
  2947. }
  2948. /* =========== */
  2949. /* Sweet Alert */
  2950. /* =========== */
  2951. .swal2-modal {
  2952. font-family: "Roboto", sans-serif;
  2953. -webkit-box-shadow: 0 10px 33px rgba(0, 0, 0, 0.1) !important;
  2954. box-shadow: 0 10px 33px rgba(0, 0, 0, 0.1) !important;
  2955. }
  2956. .swal2-modal .swal2-title {
  2957. font-size: 28px;
  2958. }
  2959. .swal2-modal .swal2-content {
  2960. font-size: 16px;
  2961. }
  2962. .swal2-modal .swal2-spacer {
  2963. margin: 10px 0;
  2964. }
  2965. .swal2-modal .swal2-file, .swal2-modal .swal2-input, .swal2-modal .swal2-textarea {
  2966. border: 2px solid #98a6ad;
  2967. font-size: 16px;
  2968. -webkit-box-shadow: none !important;
  2969. box-shadow: none !important;
  2970. }
  2971. .swal2-icon.swal2-question {
  2972. color: #71b6f9;
  2973. border-color: #71b6f9;
  2974. }
  2975. .swal2-icon.swal2-success {
  2976. border-color: #10c469;
  2977. }
  2978. .swal2-icon.swal2-success .line, .swal2-icon.swal2-success [class^=swal2-success-line][class$=long],
  2979. .swal2-icon.swal2-success [class^=swal2-success-line] {
  2980. background-color: #10c469;
  2981. }
  2982. .swal2-icon.swal2-success .placeholder, .swal2-icon.swal2-success .swal2-success-ring {
  2983. border-color: #10c469;
  2984. }
  2985. .swal2-icon.swal2-warning {
  2986. color: #f9c851;
  2987. border-color: #f9c851;
  2988. }
  2989. .swal2-icon.swal2-error {
  2990. border-color: #ff5b5b;
  2991. }
  2992. .swal2-icon.swal2-error .line {
  2993. background-color: #ff5b5b;
  2994. }
  2995. .swal2-modal .swal2-file:focus, .swal2-modal .swal2-input:focus, .swal2-modal .swal2-textarea:focus {
  2996. outline: 0;
  2997. border: 2px solid #71b6f9;
  2998. }
  2999. /* =============
  3000. Charts
  3001. ============= */
  3002. /* Morris chart */
  3003. .morris-chart text {
  3004. font-family: "Roboto", sans-serif !important;
  3005. }
  3006. .morris-hover.morris-default-style {
  3007. border-radius: 5px;
  3008. padding: 10px 12px;
  3009. background: #435966;
  3010. border: none;
  3011. color: #ffffff !important;
  3012. font-family: "Roboto", sans-serif !important;
  3013. }
  3014. .morris-hover.morris-default-style .morris-hover-point {
  3015. color: #f4f8fb !important;
  3016. }
  3017. /* Morris chart Title */
  3018. .chart-detail-list li {
  3019. margin: 0px 10px;
  3020. }
  3021. .chart-detail-list li h5 {
  3022. font-weight: 600;
  3023. }
  3024. .pieLabel div {
  3025. font-size: 14px !important;
  3026. }
  3027. .jqstooltip {
  3028. -webkit-box-sizing: content-box;
  3029. box-sizing: content-box;
  3030. }
  3031. .chart {
  3032. position: relative;
  3033. display: inline-block;
  3034. width: 110px;
  3035. height: 110px;
  3036. margin-top: 20px;
  3037. margin-bottom: 20px;
  3038. text-align: center;
  3039. }
  3040. .chart canvas {
  3041. position: absolute;
  3042. top: 0;
  3043. left: 0;
  3044. }
  3045. .chart.chart-widget-pie {
  3046. margin-top: 5px;
  3047. margin-bottom: 5px;
  3048. }
  3049. .percent {
  3050. display: inline-block;
  3051. line-height: 110px;
  3052. z-index: 2;
  3053. font-weight: 600;
  3054. font-size: 18px;
  3055. color: #435966;
  3056. }
  3057. .percent:after {
  3058. content: '%';
  3059. margin-left: 0.1em;
  3060. font-size: .8em;
  3061. }
  3062. /* Flot chart */
  3063. #flotTip {
  3064. padding: 8px 12px;
  3065. background-color: #435966;
  3066. z-index: 100;
  3067. color: #ffffff;
  3068. opacity: 0.9;
  3069. font-size: 13px;
  3070. border-radius: 3px;
  3071. }
  3072. .legend tr {
  3073. height: 20px;
  3074. }
  3075. .legend div:first-of-type {
  3076. background-color: transparent !important;
  3077. }
  3078. .legendLabel {
  3079. padding-left: 5px !important;
  3080. line-height: 10px;
  3081. padding-right: 10px;
  3082. color: #98a6ad;
  3083. }
  3084. .flot-tick-label {
  3085. color: #98a6ad !important;
  3086. }
  3087. /* Sparkline chart */
  3088. .jqstooltip {
  3089. background-color: #435966 !important;
  3090. padding: 5px 10px !important;
  3091. border-radius: 3px;
  3092. -moz-border-radius: 3px;
  3093. border-color: #435966 !important;
  3094. }
  3095. .jqsfield {
  3096. font-size: 12px !important;
  3097. line-height: 18px !important;
  3098. }
  3099. /* Chartist chart */
  3100. .ct-golden-section:before {
  3101. float: none;
  3102. }
  3103. .ct-chart {
  3104. max-height: 300px;
  3105. }
  3106. .ct-chart .ct-label {
  3107. fill: #a3afb7;
  3108. color: #a3afb7;
  3109. font-size: 12px;
  3110. line-height: 1;
  3111. }
  3112. .ct-grid {
  3113. stroke: rgba(255, 255, 255, 0.15);
  3114. }
  3115. .ct-chart.simple-pie-chart-chartist .ct-label {
  3116. color: #ffffff;
  3117. fill: #ffffff;
  3118. font-size: 16px;
  3119. }
  3120. .ct-chart .ct-series.ct-series-a .ct-bar, .ct-chart .ct-series.ct-series-a .ct-line, .ct-chart .ct-series.ct-series-a .ct-point, .ct-chart .ct-series.ct-series-a .ct-slice-donut {
  3121. stroke: #5b69bc;
  3122. }
  3123. .ct-chart .ct-series.ct-series-b .ct-bar, .ct-chart .ct-series.ct-series-b .ct-line, .ct-chart .ct-series.ct-series-b .ct-point, .ct-chart .ct-series.ct-series-b .ct-slice-donut {
  3124. stroke: #ff8acc;
  3125. }
  3126. .ct-chart .ct-series.ct-series-c .ct-bar, .ct-chart .ct-series.ct-series-c .ct-line, .ct-chart .ct-series.ct-series-c .ct-point, .ct-chart .ct-series.ct-series-c .ct-slice-donut {
  3127. stroke: #f9c851;
  3128. }
  3129. .ct-chart .ct-series.ct-series-d .ct-bar, .ct-chart .ct-series.ct-series-d .ct-line, .ct-chart .ct-series.ct-series-d .ct-point, .ct-chart .ct-series.ct-series-d .ct-slice-donut {
  3130. stroke: #35b8e0;
  3131. }
  3132. .ct-chart .ct-series.ct-series-e .ct-bar, .ct-chart .ct-series.ct-series-e .ct-line, .ct-chart .ct-series.ct-series-e .ct-point, .ct-chart .ct-series.ct-series-e .ct-slice-donut {
  3133. stroke: #435966;
  3134. }
  3135. .ct-chart .ct-series.ct-series-f .ct-bar, .ct-chart .ct-series.ct-series-f .ct-line, .ct-chart .ct-series.ct-series-f .ct-point, .ct-chart .ct-series.ct-series-f .ct-slice-donut {
  3136. stroke: #188ae2;
  3137. }
  3138. .ct-chart .ct-series.ct-series-g .ct-bar, .ct-chart .ct-series.ct-series-g .ct-line, .ct-chart .ct-series.ct-series-g .ct-point, .ct-chart .ct-series.ct-series-g .ct-slice-donut {
  3139. stroke: #10c469;
  3140. }
  3141. .ct-series-a .ct-area, .ct-series-a .ct-slice-pie {
  3142. fill: #188ae2;
  3143. }
  3144. .ct-series-b .ct-area, .ct-series-b .ct-slice-pie {
  3145. fill: #ff8acc;
  3146. }
  3147. .ct-series-c .ct-area, .ct-series-c .ct-slice-pie {
  3148. fill: #35b8e0;
  3149. }
  3150. .ct-series-d .ct-area, .ct-series-d .ct-slice-pie {
  3151. fill: #71b6f9;
  3152. }
  3153. .chartist-tooltip {
  3154. position: absolute;
  3155. display: inline-block;
  3156. opacity: 0;
  3157. min-width: 10px;
  3158. padding: 2px 10px;
  3159. border-radius: 3px;
  3160. background: #435966;
  3161. color: #ffffff;
  3162. text-align: center;
  3163. pointer-events: none;
  3164. z-index: 1;
  3165. -webkit-transition: opacity .2s linear;
  3166. transition: opacity .2s linear;
  3167. }
  3168. .chartist-tooltip.tooltip-show {
  3169. opacity: 1;
  3170. }
  3171. /* Circliful charts */
  3172. .circliful-chart {
  3173. margin: 0px auto;
  3174. }
  3175. .circle-text, .circle-info, .circle-text-half, .circle-info-half {
  3176. font-size: 12px;
  3177. font-weight: 600;
  3178. }
  3179. /* =============
  3180. Count Down
  3181. ============= */
  3182. .home-wrapper {
  3183. margin: 10% 0px;
  3184. }
  3185. .home-text {
  3186. font-weight: 600;
  3187. }
  3188. #count-down {
  3189. margin-top: 50px;
  3190. }
  3191. #count-down .clock-presenter {
  3192. height: 140px;
  3193. line-height: 30px;
  3194. padding: 0px 30px;
  3195. text-align: center;
  3196. }
  3197. #count-down .clock-presenter .digit {
  3198. margin-top: 20px;
  3199. font-size: 60px;
  3200. line-height: 60px;
  3201. height: 60px;
  3202. display: inline-block;
  3203. overflow: hidden;
  3204. text-align: center;
  3205. position: relative;
  3206. cursor: default;
  3207. }
  3208. #count-down .clock-presenter .note {
  3209. position: relative;
  3210. bottom: 0px;
  3211. padding-top: 5px;
  3212. cursor: default;
  3213. font-size: 16px;
  3214. opacity: 0.7;
  3215. }
  3216. @media (max-width: 992px) {
  3217. #count-down .clock-presenter .digit {
  3218. font-size: 42px;
  3219. }
  3220. }
  3221. @media (max-width: 767px) {
  3222. #count-down .clock-presenter {
  3223. width: 50%;
  3224. float: left;
  3225. }
  3226. #count-down .clock-presenter .digit {
  3227. font-size: 36px;
  3228. }
  3229. #count-down .hours_dash {
  3230. border-right: none;
  3231. }
  3232. }
  3233. /* =============
  3234. Timeline
  3235. ============= */
  3236. .timeline {
  3237. border-collapse: collapse;
  3238. border-spacing: 0;
  3239. display: table;
  3240. margin-bottom: 50px;
  3241. position: relative;
  3242. table-layout: fixed;
  3243. width: 100%;
  3244. }
  3245. .timeline .time-show {
  3246. margin-bottom: 30px;
  3247. margin-right: -75px;
  3248. margin-top: 30px;
  3249. position: relative;
  3250. }
  3251. .timeline .time-show a {
  3252. color: #ffffff;
  3253. }
  3254. .timeline:before {
  3255. background-color: rgba(152, 166, 173, 0.3);
  3256. bottom: 0px;
  3257. content: "";
  3258. left: 50%;
  3259. position: absolute;
  3260. top: 30px;
  3261. width: 1px;
  3262. z-index: 0;
  3263. }
  3264. .timeline .timeline-icon {
  3265. -webkit-border-radius: 50%;
  3266. background: #98a6ad;
  3267. border-radius: 50%;
  3268. color: #ffffff;
  3269. display: block;
  3270. height: 21px;
  3271. left: -54px;
  3272. margin-top: -11px;
  3273. position: absolute;
  3274. text-align: center;
  3275. top: 50%;
  3276. width: 21px;
  3277. }
  3278. .timeline .timeline-icon i {
  3279. color: #394c57;
  3280. }
  3281. .timeline .time-icon:before {
  3282. font-size: 16px;
  3283. margin-top: 5px;
  3284. }
  3285. h3.timeline-title {
  3286. color: #98a6ad;
  3287. font-size: 20px;
  3288. font-weight: 400;
  3289. margin: 0 0 5px;
  3290. text-transform: uppercase;
  3291. }
  3292. .timeline-item {
  3293. display: table-row;
  3294. }
  3295. .timeline-item:before {
  3296. content: "";
  3297. display: block;
  3298. width: 50%;
  3299. }
  3300. .timeline-item .timeline-desk .arrow {
  3301. border-bottom: 8px solid transparent;
  3302. border-right: 8px solid #2f3e47 !important;
  3303. border-top: 8px solid transparent;
  3304. display: block;
  3305. height: 0;
  3306. left: -7px;
  3307. margin-top: -10px;
  3308. position: absolute;
  3309. top: 50%;
  3310. width: 0;
  3311. }
  3312. .timeline-item.alt:after {
  3313. content: "";
  3314. display: block;
  3315. width: 50%;
  3316. }
  3317. .timeline-item.alt .timeline-desk .arrow-alt {
  3318. border-bottom: 8px solid transparent;
  3319. border-left: 8px solid #2f3e47 !important;
  3320. border-top: 8px solid transparent;
  3321. display: block;
  3322. height: 0;
  3323. left: auto;
  3324. margin-top: -10px;
  3325. position: absolute;
  3326. right: -7px;
  3327. top: 50%;
  3328. width: 0;
  3329. }
  3330. .timeline-item.alt .timeline-desk .album {
  3331. float: right;
  3332. margin-top: 20px;
  3333. }
  3334. .timeline-item.alt .timeline-desk .album a {
  3335. float: right;
  3336. margin-left: 5px;
  3337. }
  3338. .timeline-item.alt .timeline-icon {
  3339. left: auto;
  3340. right: -56px;
  3341. }
  3342. .timeline-item.alt:before {
  3343. display: none;
  3344. }
  3345. .timeline-item.alt .panel {
  3346. margin-left: 0;
  3347. margin-right: 45px;
  3348. }
  3349. .timeline-item.alt .panel .panel-body p + p {
  3350. margin-top: 10px !important;
  3351. }
  3352. .timeline-item.alt h4 {
  3353. text-align: right;
  3354. }
  3355. .timeline-item.alt p {
  3356. text-align: right;
  3357. }
  3358. .timeline-item.alt .timeline-date {
  3359. text-align: right;
  3360. }
  3361. .timeline-desk {
  3362. display: table-cell;
  3363. vertical-align: top;
  3364. width: 50%;
  3365. }
  3366. .timeline-desk h4 {
  3367. font-size: 16px;
  3368. font-weight: 300;
  3369. margin: 0;
  3370. }
  3371. .timeline-desk .panel {
  3372. background: #2f3e47;
  3373. display: block;
  3374. margin-bottom: 5px;
  3375. margin-left: 45px;
  3376. position: relative;
  3377. text-align: left;
  3378. padding: 20px;
  3379. }
  3380. .timeline-desk h5 span {
  3381. color: #797979;
  3382. display: block;
  3383. font-size: 12px;
  3384. margin-bottom: 4px;
  3385. }
  3386. .timeline-desk p {
  3387. font-size: 14px;
  3388. margin-bottom: 0;
  3389. }
  3390. .timeline-desk .album {
  3391. margin-top: 12px;
  3392. }
  3393. .timeline-desk .album a {
  3394. float: left;
  3395. margin-right: 5px;
  3396. }
  3397. .timeline-desk .album img {
  3398. height: 36px;
  3399. width: auto;
  3400. border-radius: 3px;
  3401. }
  3402. .timeline-desk .notification {
  3403. background: none repeat scroll 0 0 #ffffff;
  3404. margin-top: 20px;
  3405. padding: 8px;
  3406. }
  3407. /* =============
  3408. Gallery
  3409. ============= */
  3410. .portfolioFilter a {
  3411. -webkit-transition: all 0.3s ease-out;
  3412. transition: all 0.3s ease-out;
  3413. color: #98a6ad;
  3414. font-weight: 600;
  3415. padding: 5px 10px;
  3416. display: inline-block;
  3417. margin-bottom: 5px;
  3418. }
  3419. .portfolioFilter a:hover {
  3420. color: #71b6f9;
  3421. }
  3422. .portfolioFilter a.current {
  3423. color: #71b6f9;
  3424. }
  3425. .thumb {
  3426. background-color: #2f3e47;
  3427. border-radius: 3px;
  3428. -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  3429. box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  3430. margin-top: 20px;
  3431. padding: 10px;
  3432. width: 100%;
  3433. }
  3434. .thumb-img {
  3435. border-radius: 2px;
  3436. overflow: hidden;
  3437. width: 100%;
  3438. }
  3439. .gal-detail h4 {
  3440. margin-top: 16px;
  3441. font-weight: 600;
  3442. font-size: 16px;
  3443. padding: 0px 5px;
  3444. }
  3445. .gal-detail p {
  3446. padding: 0px 5px;
  3447. font-size: 13px;
  3448. }
  3449. /* =============
  3450. Maintenance
  3451. ============= */
  3452. .icon-main {
  3453. font-size: 88px;
  3454. margin-bottom: 50px;
  3455. }
  3456. .maintenance-page {
  3457. margin: 10% 0%;
  3458. }
  3459. /* =============
  3460. Maps
  3461. ============= */
  3462. .gmaps, .gmaps-panaroma {
  3463. height: 300px;
  3464. background: #eeeeee;
  3465. border-radius: 3px;
  3466. }
  3467. .gmaps-overlay {
  3468. display: block;
  3469. text-align: center;
  3470. color: #ffffff;
  3471. font-size: 16px;
  3472. line-height: 40px;
  3473. background: #71b6f9;
  3474. border-radius: 4px;
  3475. padding: 10px 20px;
  3476. }
  3477. .gmaps-overlay_arrow {
  3478. left: 50%;
  3479. margin-left: -16px;
  3480. width: 0;
  3481. height: 0;
  3482. position: absolute;
  3483. }
  3484. .gmaps-overlay_arrow.above {
  3485. bottom: -15px;
  3486. border-left: 16px solid transparent;
  3487. border-right: 16px solid transparent;
  3488. border-top: 16px solid #71b6f9;
  3489. }
  3490. .gmaps-overlay_arrow.below {
  3491. top: -15px;
  3492. border-left: 16px solid transparent;
  3493. border-right: 16px solid transparent;
  3494. border-bottom: 16px solid #71b6f9;
  3495. }
  3496. .jvectormap-zoomin, .jvectormap-zoomout {
  3497. width: 10px;
  3498. height: 10px;
  3499. line-height: 10px;
  3500. }
  3501. .jvectormap-zoomout {
  3502. top: 40px;
  3503. }
  3504. /* =============
  3505. Tree view page
  3506. ============= */
  3507. .jstree-default .jstree-clicked {
  3508. background: rgba(113, 182, 249, 0.4);
  3509. -webkit-box-shadow: none;
  3510. box-shadow: none;
  3511. }
  3512. .jstree-default .jstree-hovered {
  3513. background: rgba(113, 182, 249, 0.2);
  3514. -webkit-box-shadow: none;
  3515. box-shadow: none;
  3516. }
  3517. .jstree-default .jstree-wholerow-clicked {
  3518. background: rgba(113, 182, 249, 0.4);
  3519. }
  3520. .jstree-default .jstree-wholerow-hovered {
  3521. background: rgba(113, 182, 249, 0.2);
  3522. }
  3523. .jstree-default .zmdi {
  3524. font-size: 16px;
  3525. }
  3526. /* =============
  3527. Tour page
  3528. ============= */
  3529. div.hopscotch-bubble, div.hopscotch-bubble h3,
  3530. div.hopscotch-bubble .hopscotch-content {
  3531. font-family: "Roboto", sans-serif;
  3532. }
  3533. div.hopscotch-bubble {
  3534. border: 3px solid #188ae2;
  3535. border-radius: 5px;
  3536. }
  3537. div.hopscotch-bubble .hopscotch-next {
  3538. background-color: #188ae2 !important;
  3539. background-image: none !important;
  3540. border-color: #188ae2 !important;
  3541. text-shadow: none !important;
  3542. margin: 0 0 0 5px !important;
  3543. }
  3544. div.hopscotch-bubble .hopscotch-prev {
  3545. background-color: #188ae2 !important;
  3546. background-image: none !important;
  3547. border-color: #188ae2 !important;
  3548. text-shadow: none !important;
  3549. color: #ffffff !important;
  3550. }
  3551. div.hopscotch-bubble .hopscotch-bubble-number {
  3552. background: #71b6f9;
  3553. padding: 0px;
  3554. border-radius: 50%;
  3555. }
  3556. div.hopscotch-bubble .hopscotch-bubble-arrow-container.left .hopscotch-bubble-arrow-border {
  3557. border-right: 19px solid #188ae2;
  3558. }
  3559. div.hopscotch-bubble .hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow {
  3560. border-left: 19px solid #188ae2;
  3561. left: -2px;
  3562. }
  3563. div.hopscotch-bubble .hopscotch-bubble-arrow-container.left .hopscotch-bubble-arrow {
  3564. border: none;
  3565. }
  3566. div.hopscotch-bubble .hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow-border {
  3567. border-left: 0px solid #188ae2;
  3568. }
  3569. div.hopscotch-bubble .hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow {
  3570. border-bottom: 19px solid #188ae2;
  3571. top: 0px;
  3572. }
  3573. div.hopscotch-bubble .hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow-border {
  3574. border-bottom: 0px solid rgba(0, 0, 0, 0.5);
  3575. }
  3576. div.hopscotch-bubble .hopscotch-bubble-arrow-container.down .hopscotch-bubble-arrow {
  3577. border-top: 19px solid #188ae2;
  3578. top: -2px;
  3579. }
  3580. div.hopscotch-bubble .hopscotch-bubble-arrow-container.down .hopscotch-bubble-arrow-border {
  3581. border-top: 0px solid rgba(0, 0, 0, 0.5);
  3582. }
  3583. /* =============
  3584. Pricing
  3585. ============= */
  3586. .pricing-column {
  3587. position: relative;
  3588. margin-bottom: 40px;
  3589. }
  3590. .pricing-column .inner-box {
  3591. position: relative;
  3592. padding: 0px 0px 50px;
  3593. }
  3594. .pricing-column .plan-header {
  3595. position: relative;
  3596. padding: 30px 20px 25px;
  3597. }
  3598. .pricing-column .plan-title {
  3599. font-size: 16px;
  3600. font-family: "Karla", sans-serif;
  3601. margin-bottom: 10px;
  3602. color: #188ae2;
  3603. text-transform: uppercase;
  3604. letter-spacing: 1px;
  3605. font-weight: 400;
  3606. }
  3607. .pricing-column .plan-price {
  3608. font-size: 48px;
  3609. font-family: "Karla", sans-serif;
  3610. margin-bottom: 10px;
  3611. color: #ffffff;
  3612. }
  3613. .pricing-column .plan-duration {
  3614. font-size: 13px;
  3615. color: #98a6ad;
  3616. }
  3617. .pricing-column .plan-stats {
  3618. position: relative;
  3619. padding: 30px 20px 15px;
  3620. }
  3621. .pricing-column .plan-stats li {
  3622. margin-bottom: 15px;
  3623. line-height: 24px;
  3624. }
  3625. .ribbon {
  3626. position: absolute;
  3627. left: 5px;
  3628. top: -5px;
  3629. z-index: 1;
  3630. overflow: hidden;
  3631. width: 75px;
  3632. height: 75px;
  3633. text-align: right;
  3634. }
  3635. .ribbon span {
  3636. font-size: 10px;
  3637. font-weight: bold;
  3638. color: #ffffff;
  3639. text-transform: uppercase;
  3640. text-align: center;
  3641. line-height: 20px;
  3642. transform: rotate(-45deg);
  3643. -webkit-transform: rotate(-45deg);
  3644. width: 100px;
  3645. display: block;
  3646. -webkit-box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
  3647. box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
  3648. background: #79A70A;
  3649. background: -webkit-gradient(linear, left top, left bottom, from(#3BAFDA), to(#3bafda));
  3650. background: linear-gradient(#3BAFDA 0%, #3bafda 100%);
  3651. position: absolute;
  3652. top: 19px;
  3653. left: -21px;
  3654. }
  3655. .ribbon span:before {
  3656. content: "";
  3657. position: absolute;
  3658. left: 0px;
  3659. top: 100%;
  3660. z-index: -1;
  3661. border-left: 3px solid #3bafda;
  3662. border-right: 3px solid transparent;
  3663. border-bottom: 3px solid transparent;
  3664. border-top: 3px solid #3bafda;
  3665. }
  3666. .ribbon span:after {
  3667. content: "";
  3668. position: absolute;
  3669. right: 0px;
  3670. top: 100%;
  3671. z-index: -1;
  3672. border-left: 3px solid transparent;
  3673. border-right: 3px solid #3bafda;
  3674. border-bottom: 3px solid transparent;
  3675. border-top: 3px solid #3bafda;
  3676. }
  3677. /* =============
  3678. Taskboard & Detail
  3679. ============= */
  3680. .taskboard-box ul.task-list {
  3681. min-height: 50px;
  3682. }
  3683. .gu-mirror {
  3684. list-style: none;
  3685. }
  3686. .kanban-box {
  3687. border: 2px solid #394c57;
  3688. }
  3689. .kanban-box .checkbox-wrapper {
  3690. float: left;
  3691. }
  3692. .kanban-box .checkbox-wrapper .checkbox {
  3693. margin-top: 3px;
  3694. }
  3695. .kanban-box .kanban-detail {
  3696. margin-left: 35px;
  3697. }
  3698. .kanban-box .kanban-detail h4 {
  3699. margin-top: 0px;
  3700. font-size: 15px;
  3701. font-weight: 500;
  3702. font-family: "Roboto", sans-serif;
  3703. }
  3704. .kanban-box .kanban-detail h4 a {
  3705. color: #98a6ad;
  3706. }
  3707. .kanban-box .kanban-detail ul li a {
  3708. display: inline-block;
  3709. }
  3710. .kanban-box .kanban-detail ul li a i {
  3711. font-size: 16px;
  3712. color: #ffffff;
  3713. padding: 0px 5px;
  3714. line-height: 32px;
  3715. }
  3716. .gu-mirror {
  3717. margin-bottom: 0px !important;
  3718. opacity: 1;
  3719. list-style: none;
  3720. }
  3721. .gu-mirror .card-box {
  3722. margin: 0px !important;
  3723. }
  3724. /* Task Detail */
  3725. .task-detail .task-dates li {
  3726. width: 50%;
  3727. float: left;
  3728. }
  3729. .task-detail .task-tags .bootstrap-tagsinput {
  3730. padding: 0px;
  3731. border: none;
  3732. }
  3733. .task-detail .assign-team a {
  3734. display: inline-block;
  3735. margin: 5px 5px 5px 0px;
  3736. }
  3737. .task-detail .files-list .file-box {
  3738. display: inline-block;
  3739. vertical-align: middle;
  3740. width: 80px;
  3741. padding: 2px;
  3742. border-radius: 3px;
  3743. }
  3744. .task-detail .files-list .file-box img {
  3745. line-height: 70px;
  3746. }
  3747. .task-detail .files-list .file-box p {
  3748. width: 100%;
  3749. display: block;
  3750. overflow: hidden;
  3751. text-overflow: ellipsis;
  3752. white-space: nowrap;
  3753. }
  3754. /* =============
  3755. Projects
  3756. ============= */
  3757. .project-sort-item .form-group {
  3758. margin-right: 30px;
  3759. }
  3760. .project-sort-item .form-group:last-of-type {
  3761. margin-right: 0px;
  3762. }
  3763. .project-box {
  3764. position: relative;
  3765. }
  3766. .project-box .badge {
  3767. position: absolute;
  3768. right: 20px;
  3769. }
  3770. .project-box h4 {
  3771. text-overflow: ellipsis;
  3772. white-space: nowrap;
  3773. display: block;
  3774. width: 100%;
  3775. overflow: hidden;
  3776. font-weight: 600;
  3777. }
  3778. .project-box ul li {
  3779. padding-right: 30px;
  3780. }
  3781. .project-box .project-members a {
  3782. margin: 3px;
  3783. display: inline-block;
  3784. }
  3785. .project-box .project-members a:first-of-type {
  3786. margin-left: 0px;
  3787. }
  3788. /* =============
  3789. Accounts pages
  3790. ============= */
  3791. .account-pages {
  3792. background: url("../images/bg.jpg") center;
  3793. position: absolute;
  3794. height: 100%;
  3795. top: 0;
  3796. width: 100%;
  3797. background-size: cover;
  3798. border: 20px solid rgba(67, 89, 102, 0.3);
  3799. }
  3800. .wrapper-page {
  3801. margin: 5% auto;
  3802. position: relative;
  3803. width: 420px;
  3804. }
  3805. .wrapper-page .card-box {
  3806. -webkit-box-shadow: 0 0px 24px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
  3807. box-shadow: 0 0px 24px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
  3808. }
  3809. .wrapper-page .logo {
  3810. font-size: 42px;
  3811. color: #188ae2 !important;
  3812. font-family: 'Rancho', cursive;
  3813. }
  3814. .panel-pages {
  3815. border-radius: 6px;
  3816. }
  3817. .panel-pages .panel-body {
  3818. padding: 30px;
  3819. }
  3820. .panel-pages .panel-heading {
  3821. border-radius: 6px 6px 0px 0px;
  3822. padding: 40px 20px;
  3823. position: relative;
  3824. }
  3825. .panel-pages .panel-heading h3 {
  3826. position: relative;
  3827. z-index: 999;
  3828. }
  3829. .user-thumb {
  3830. position: relative;
  3831. z-index: 999;
  3832. }
  3833. .user-thumb img {
  3834. height: 88px;
  3835. margin: 0px auto;
  3836. width: 88px;
  3837. }
  3838. .ex-page-content .text-error {
  3839. color: #71b6f9;
  3840. text-shadow: rgba(113, 182, 249, 0.3) 5px 1px, rgba(113, 182, 249, 0.2) 12px 3px, rgba(113, 182, 249, 0.3) 6px 4px;
  3841. font-size: 98px;
  3842. font-weight: 700;
  3843. line-height: 150px;
  3844. }
  3845. .ex-page-content .text-error i {
  3846. font-size: 78px;
  3847. padding: 0 10px;
  3848. }
  3849. /* INBOX */
  3850. .inbox-app-main {
  3851. margin-left: -20px;
  3852. }
  3853. .circle-icon {
  3854. width: 30px;
  3855. height: 30px;
  3856. text-align: center;
  3857. line-height: 28px;
  3858. border: 2px solid #98a6ad;
  3859. border-radius: 100px;
  3860. font-size: 14px;
  3861. color: #98a6ad;
  3862. cursor: pointer;
  3863. display: block;
  3864. float: left;
  3865. }
  3866. .circle-icon:hover {
  3867. color: #6e818a;
  3868. border-color: #6e818a;
  3869. }
  3870. .circle-icon.small {
  3871. height: 25px;
  3872. width: 25px;
  3873. line-height: 23px;
  3874. font-size: 11px;
  3875. }
  3876. .circle-icon.red {
  3877. color: #ff5b5b;
  3878. border-color: #ff5b5b;
  3879. }
  3880. .circle-icon.red:hover {
  3881. color: #c10000;
  3882. border-color: #c10000;
  3883. }
  3884. .checkbox-wrapper-mail {
  3885. cursor: pointer;
  3886. height: 20px;
  3887. width: 20px;
  3888. position: relative;
  3889. display: inline-block;
  3890. -webkit-box-shadow: inset 0 0 0 1px #98a6ad;
  3891. box-shadow: inset 0 0 0 1px #98a6ad;
  3892. border-radius: 1px;
  3893. }
  3894. .checkbox-wrapper-mail input {
  3895. opacity: 0;
  3896. cursor: pointer;
  3897. display: none;
  3898. }
  3899. .checkbox-wrapper-mail input:checked ~ label {
  3900. opacity: 1;
  3901. }
  3902. .checkbox-wrapper-mail label {
  3903. position: absolute;
  3904. top: 3px;
  3905. left: 3px;
  3906. right: 3px;
  3907. bottom: 3px;
  3908. cursor: pointer;
  3909. background: #98a6ad;
  3910. opacity: 0;
  3911. margin-bottom: 0px !important;
  3912. -webkit-transition-duration: .05s;
  3913. transition-duration: .05s;
  3914. }
  3915. .checkbox-wrapper-mail label:active {
  3916. background: #87949b;
  3917. }
  3918. #sidebar {
  3919. position: fixed;
  3920. height: 100%;
  3921. width: 240px;
  3922. -webkit-transition-duration: .3s;
  3923. transition-duration: .3s;
  3924. z-index: 5;
  3925. color: #98a6ad;
  3926. }
  3927. #sidebar a {
  3928. color: #98a6ad;
  3929. }
  3930. #sidebar .menu-segment {
  3931. padding: 0 50px;
  3932. }
  3933. #sidebar .menu-segment ul, #sidebar .menu-segment li {
  3934. margin: 0;
  3935. padding: 0;
  3936. }
  3937. #sidebar .menu-segment .ball.pink {
  3938. border-color: #ff8acc;
  3939. }
  3940. #sidebar .menu-segment .ball.green {
  3941. border-color: #10c469;
  3942. }
  3943. #sidebar .menu-segment .ball.blue {
  3944. border-color: #188ae2;
  3945. }
  3946. #sidebar .menu-segment li.title {
  3947. text-transform: uppercase;
  3948. font-weight: 600;
  3949. padding: 10px 0;
  3950. color: #98a6ad;
  3951. }
  3952. #sidebar .menu-segment li.title .icon {
  3953. float: right;
  3954. }
  3955. #sidebar .menu-segment li.active a,
  3956. #sidebar .menu-segment li.active a:hover {
  3957. color: #ff5b5b;
  3958. font-weight: 600;
  3959. }
  3960. #sidebar .menu-segment li a {
  3961. display: block;
  3962. margin: 0 -50px;
  3963. padding: 10px 50px;
  3964. }
  3965. #sidebar .menu-segment li a:hover {
  3966. background: rgba(152, 166, 173, 0.3);
  3967. }
  3968. #sidebar .menu-segment li .italic-link {
  3969. font-style: italic;
  3970. font-weight: 600;
  3971. }
  3972. #sidebar .menu-segment .labels li a span,
  3973. #sidebar .menu-segment .chat li a span {
  3974. display: block;
  3975. border: 5px solid #ff5b5b;
  3976. border-radius: 100px;
  3977. margin-top: 6px;
  3978. }
  3979. #sidebar .menu-segment .labels.labels li a span,
  3980. #sidebar .menu-segment .chat.labels li a span {
  3981. float: right;
  3982. }
  3983. #sidebar .menu-segment .labels.chat li a span,
  3984. #sidebar .menu-segment .chat.chat li a span {
  3985. float: left;
  3986. margin-right: 10px;
  3987. }
  3988. #sidebar .menu-segment .chat li a {
  3989. padding-left: 50px;
  3990. }
  3991. #sidebar .separator {
  3992. margin: 30px 35px;
  3993. height: 1px;
  3994. background: rgba(152, 166, 173, 0.5);
  3995. }
  3996. #sidebar .bottom-padding {
  3997. height: 100px;
  3998. }
  3999. #sidebar > .nano-pane {
  4000. background: transparent;
  4001. width: 5px;
  4002. }
  4003. #sidebar > .nano-pane .nano-slider {
  4004. background: rgba(152, 166, 173, 0.3);
  4005. }
  4006. #main {
  4007. position: fixed;
  4008. top: 121px;
  4009. left: 330px;
  4010. bottom: 0;
  4011. right: 0;
  4012. z-index: 4;
  4013. -webkit-transition-duration: .3s;
  4014. transition-duration: .3s;
  4015. background-color: #2f3e47;
  4016. }
  4017. #main .overlay {
  4018. position: absolute;
  4019. top: 0;
  4020. left: -5px;
  4021. right: 0;
  4022. bottom: 100%;
  4023. background: rgba(67, 89, 102, 0.6);
  4024. z-index: 5;
  4025. opacity: 0;
  4026. -webkit-transition-duration: 0s;
  4027. transition-duration: 0s;
  4028. -webkit-transition-property: opacity;
  4029. transition-property: opacity;
  4030. }
  4031. #main .header {
  4032. padding: 20px 25px;
  4033. border-bottom: 1px solid rgba(152, 166, 173, 0.3);
  4034. overflow: hidden;
  4035. }
  4036. #main .header .page-title {
  4037. display: block;
  4038. float: left;
  4039. }
  4040. #main .header .page-title .sidebar-toggle-btn {
  4041. width: 0;
  4042. margin-top: 1px;
  4043. padding: 11px 0 0 0;
  4044. float: left;
  4045. position: relative;
  4046. display: block;
  4047. cursor: pointer;
  4048. -webkit-transition-duration: .3s;
  4049. transition-duration: .3s;
  4050. -webkit-transition-delay: .5s;
  4051. transition-delay: .5s;
  4052. opacity: 0;
  4053. margin-right: 0;
  4054. }
  4055. #main .header .page-title .sidebar-toggle-btn .line {
  4056. height: 3px;
  4057. display: block;
  4058. background: #888;
  4059. margin-bottom: 4px;
  4060. -webkit-transition-duration: .5s;
  4061. transition-duration: .5s;
  4062. -webkit-transition-delay: .5s;
  4063. transition-delay: .5s;
  4064. }
  4065. #main .header .page-title .sidebar-toggle-btn .line-angle1 {
  4066. width: 8px;
  4067. margin: 0;
  4068. position: absolute;
  4069. top: 15px;
  4070. left: -11px;
  4071. -webkit-transform: rotate(-60deg);
  4072. transform: rotate(-60deg);
  4073. }
  4074. #main .header .page-title .sidebar-toggle-btn .line-angle2 {
  4075. width: 8px;
  4076. margin: 0;
  4077. position: absolute;
  4078. top: 21px;
  4079. left: -11px;
  4080. -webkit-transform: rotate(60deg);
  4081. transform: rotate(60deg);
  4082. }
  4083. #main .header .page-title .icon {
  4084. font-size: 15px;
  4085. margin-left: 20px;
  4086. position: relative;
  4087. top: -5px;
  4088. cursor: pointer;
  4089. }
  4090. #main .header .search-box {
  4091. width: 180px;
  4092. height: 40px;
  4093. margin-left: 30px;
  4094. position: relative;
  4095. }
  4096. #main .header .search-box input {
  4097. position: absolute;
  4098. top: 0;
  4099. -webkit-transition-duration: .3s;
  4100. transition-duration: .3s;
  4101. right: 0;
  4102. bottom: 0;
  4103. width: 100%;
  4104. padding: 0;
  4105. margin: 0;
  4106. text-indent: 15px;
  4107. height: 40px;
  4108. z-index: 2;
  4109. outline: none;
  4110. color: #ffffff;
  4111. background: transparent;
  4112. border: 2px solid #394c57;
  4113. border-radius: 5px;
  4114. -webkit-transition-timing-function: cubic-bezier(0.3, 1.5, 0.6, 1);
  4115. transition-timing-function: cubic-bezier(0.3, 1.5, 0.6, 1);
  4116. }
  4117. #main .header .search-box input:focus {
  4118. color: #ffffff;
  4119. border-color: #415663;
  4120. }
  4121. #main .header .search-box input:focus ~ .icon {
  4122. opacity: 1;
  4123. z-index: 3;
  4124. color: #10c469;
  4125. }
  4126. #main .header .search-box .icon {
  4127. -webkit-transition-duration: .3s;
  4128. transition-duration: .3s;
  4129. position: absolute;
  4130. top: 0;
  4131. right: 0;
  4132. bottom: 0;
  4133. width: 40px;
  4134. text-align: center;
  4135. line-height: 40px;
  4136. z-index: 1;
  4137. cursor: pointer;
  4138. opacity: .5;
  4139. }
  4140. #main .action-bar {
  4141. padding: 5px;
  4142. overflow: hidden;
  4143. }
  4144. #main .message-list {
  4145. display: block;
  4146. padding-left: 0;
  4147. }
  4148. #main .message-list li {
  4149. position: relative;
  4150. display: block;
  4151. height: 50px;
  4152. line-height: 50px;
  4153. cursor: default;
  4154. color: rgba(152, 166, 173, 0.6);
  4155. -webkit-transition-duration: .3s;
  4156. transition-duration: .3s;
  4157. }
  4158. #main .message-list li:hover {
  4159. background: rgba(152, 166, 173, 0.15);
  4160. -webkit-transition-duration: .05s;
  4161. transition-duration: .05s;
  4162. }
  4163. #main .message-list li .mail-col {
  4164. float: left;
  4165. position: relative;
  4166. }
  4167. #main .message-list li .mail-col-1 {
  4168. width: 400px;
  4169. }
  4170. #main .message-list li .mail-col-1 .star-toggle,
  4171. #main .message-list li .mail-col-1 .checkbox-wrapper-mail,
  4172. #main .message-list li .mail-col-1 .dot {
  4173. display: block;
  4174. float: left;
  4175. }
  4176. #main .message-list li .mail-col-1 .dot {
  4177. border: 4px solid transparent;
  4178. border-radius: 100px;
  4179. margin: 22px 26px 0;
  4180. height: 0;
  4181. width: 0;
  4182. line-height: 0;
  4183. font-size: 0;
  4184. }
  4185. #main .message-list li .mail-col-1 .checkbox-wrapper-mail {
  4186. margin-top: 15px;
  4187. margin-right: 10px;
  4188. }
  4189. #main .message-list li .mail-col-1 .star-toggle {
  4190. margin-top: 18px;
  4191. font-size: 16px;
  4192. margin-left: 5px;
  4193. }
  4194. #main .message-list li .mail-col-1 .title {
  4195. position: absolute;
  4196. top: 15px;
  4197. left: 140px;
  4198. right: 0;
  4199. text-overflow: ellipsis;
  4200. overflow: hidden;
  4201. white-space: nowrap;
  4202. }
  4203. #main .message-list li .mail-col-2 {
  4204. position: absolute;
  4205. top: 0;
  4206. left: 400px;
  4207. right: 0;
  4208. bottom: 0;
  4209. }
  4210. #main .message-list li .mail-col-2 .subject,
  4211. #main .message-list li .mail-col-2 .date {
  4212. position: absolute;
  4213. top: 0;
  4214. }
  4215. #main .message-list li .mail-col-2 .subject {
  4216. left: 0;
  4217. right: 200px;
  4218. text-overflow: ellipsis;
  4219. overflow: hidden;
  4220. white-space: nowrap;
  4221. }
  4222. #main .message-list li .mail-col-2 .date {
  4223. right: 0;
  4224. width: 200px;
  4225. padding-left: 80px;
  4226. }
  4227. #main .message-list li.active, #main .message-list li.selected {
  4228. background: rgba(152, 166, 173, 0.15);
  4229. -webkit-transition-duration: .05s;
  4230. transition-duration: .05s;
  4231. }
  4232. #main .message-list li.active,
  4233. #main .message-list li.active:hover {
  4234. -webkit-box-shadow: inset 3px 0 0 #71b6f9;
  4235. box-shadow: inset 3px 0 0 #71b6f9;
  4236. }
  4237. #main .message-list li.unread {
  4238. font-weight: 600;
  4239. color: rgba(152, 166, 173, 0.95);
  4240. }
  4241. #main .message-list li.blue-dot .mail-col-1 .dot {
  4242. border-color: #188ae2;
  4243. }
  4244. #main .message-list li.orange-dot .mail-col-1 .dot {
  4245. border-color: #f9c851;
  4246. }
  4247. #main .message-list li.green-dot .mail-col-1 .dot {
  4248. border-color: #10c469;
  4249. }
  4250. #main .load-more-link {
  4251. display: block;
  4252. text-align: center;
  4253. margin: 30px 0 50px 0;
  4254. }
  4255. .show-main-overlay #main .overlay {
  4256. opacity: 1;
  4257. bottom: 0;
  4258. -webkit-transition-duration: .5s;
  4259. transition-duration: .5s;
  4260. }
  4261. .show-sidebar #main .header .page-title .sidebar-toggle-btn {
  4262. -webkit-transition-delay: 0s;
  4263. transition-delay: 0s;
  4264. }
  4265. .show-sidebar #main .header .page-title .sidebar-toggle-btn .line-angle1 {
  4266. -webkit-transform: rotate(-120deg);
  4267. transform: rotate(-120deg);
  4268. }
  4269. .show-sidebar #main .header .page-title .sidebar-toggle-btn .line-angle2 {
  4270. -webkit-transform: rotate(120deg);
  4271. transform: rotate(120deg);
  4272. }
  4273. #main #main-nano-wrapper {
  4274. position: absolute;
  4275. top: 100px;
  4276. bottom: 0;
  4277. height: auto;
  4278. }
  4279. #message {
  4280. position: fixed;
  4281. top: 121px;
  4282. left: 60%;
  4283. bottom: 0;
  4284. width: 40%;
  4285. z-index: 5;
  4286. -webkit-transform: translateX(200%);
  4287. transform: translateX(200%);
  4288. -webkit-transition-duration: .5s;
  4289. transition-duration: .5s;
  4290. padding: 20px 30px;
  4291. background: #ffffff;
  4292. -webkit-box-shadow: 0 0px 77px 0 rgba(0, 0, 0, 0.08), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
  4293. box-shadow: 0 0px 77px 0 rgba(0, 0, 0, 0.08), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
  4294. }
  4295. #message .header {
  4296. padding-bottom: 20px;
  4297. border-bottom: 2px solid rgba(152, 166, 173, 0.2);
  4298. }
  4299. #message .header .page-title {
  4300. display: block;
  4301. float: none;
  4302. margin-bottom: 15px;
  4303. line-height: 40px;
  4304. color: #435966;
  4305. }
  4306. #message .header .page-title .icon {
  4307. margin-top: 4px;
  4308. margin-right: 10px;
  4309. }
  4310. #message .header .grey {
  4311. margin-left: 10px;
  4312. color: #999;
  4313. }
  4314. #message .message-container {
  4315. padding: 0 30px;
  4316. }
  4317. #message .message-container li {
  4318. padding: 25px;
  4319. border: 1px solid rgba(0, 0, 0, 0.15);
  4320. background: #FFF;
  4321. margin: 0 0 30px 0;
  4322. position: relative;
  4323. }
  4324. #message .message-container li .details {
  4325. padding-bottom: 20px;
  4326. border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  4327. margin-bottom: 30px;
  4328. overflow: hidden;
  4329. }
  4330. #message .message-container li .details .left {
  4331. float: left;
  4332. font-weight: 600;
  4333. color: #888;
  4334. -webkit-transition-duration: .3s;
  4335. transition-duration: .3s;
  4336. }
  4337. #message .message-container li .details .left .arrow {
  4338. display: inline-block;
  4339. position: relative;
  4340. height: 2px;
  4341. width: 20px;
  4342. background: rgba(0, 0, 0, 0.15);
  4343. vertical-align: top;
  4344. margin: 12px 20px 0 15px;
  4345. border: 0px solid rgba(0, 0, 0, 0.15);
  4346. -webkit-transition-duration: .3s;
  4347. transition-duration: .3s;
  4348. }
  4349. #message .message-container li .details .left .arrow:after {
  4350. position: absolute;
  4351. top: -4px;
  4352. left: 100%;
  4353. height: 0;
  4354. width: 0;
  4355. border: inherit;
  4356. border-width: 7px;
  4357. border-style: solid;
  4358. content: '';
  4359. border-right: 0;
  4360. border-top-color: transparent;
  4361. border-bottom-color: transparent;
  4362. border-top-width: 5px;
  4363. border-bottom-width: 5px;
  4364. }
  4365. #message .message-container li .details .right {
  4366. float: right;
  4367. color: #999;
  4368. }
  4369. #message .message-container li .message {
  4370. margin-bottom: 40px;
  4371. }
  4372. #message .message-container li .message p:last-child {
  4373. margin-bottom: 0;
  4374. }
  4375. #message .message-container li:hover .tool-box .red-hover {
  4376. color: #ff5b5b;
  4377. border-color: #ff5b5b;
  4378. }
  4379. #message .message-container li:hover .tool-box .red-hover:hover {
  4380. color: #f40000;
  4381. border-color: #f40000;
  4382. }
  4383. #message .message-container li .tool-box {
  4384. position: absolute;
  4385. bottom: 0;
  4386. right: 0;
  4387. border: 0px solid #DDDFE1;
  4388. border-top-width: 1px;
  4389. border-left-width: 1px;
  4390. padding: 8px 10px;
  4391. -webkit-transition-duration: .3s;
  4392. transition-duration: .3s;
  4393. }
  4394. #message .message-container li .tool-box a {
  4395. margin-right: 10px;
  4396. }
  4397. #message .message-container li .tool-box a:last-child {
  4398. margin-right: 0;
  4399. }
  4400. #message .message-container li:hover .details .left .arrow {
  4401. background: #10c469;
  4402. border: 0px solid #10c469;
  4403. }
  4404. #message .message-container li:hover .details .left .arrow.orange {
  4405. background: #f9c851;
  4406. border: 0px solid #f9c851;
  4407. }
  4408. .show-message #message {
  4409. -webkit-transition-duration: .3s;
  4410. transition-duration: .3s;
  4411. }
  4412. #message #message-nano-wrapper {
  4413. position: absolute;
  4414. top: 130px;
  4415. bottom: 0;
  4416. height: auto;
  4417. left: 0;
  4418. right: 0;
  4419. width: auto;
  4420. }
  4421. .show-message #message {
  4422. -webkit-transform: none;
  4423. transform: none;
  4424. }
  4425. .show-message #main {
  4426. margin-right: 40%;
  4427. }
  4428. @media only screen and (min-width: 1499px) {
  4429. #main .overlay {
  4430. display: none;
  4431. }
  4432. }
  4433. @media only screen and (max-width: 1500px) {
  4434. .show-message #main {
  4435. margin-right: 0;
  4436. }
  4437. .show-message #message {
  4438. left: 50%;
  4439. width: 50%;
  4440. }
  4441. }
  4442. @media only screen and (max-width: 1024px) {
  4443. .show-sidebar #sidebar {
  4444. -webkit-transform: none;
  4445. transform: none;
  4446. }
  4447. .show-sidebar #main {
  4448. -webkit-transform: translateX(250px);
  4449. transform: translateX(250px);
  4450. }
  4451. .show-message #main {
  4452. margin-right: 0;
  4453. }
  4454. }
  4455. @media only screen and (max-width: 768px) {
  4456. #sidebar {
  4457. -webkit-transform: translateX(-100%);
  4458. transform: translateX(-100%);
  4459. }
  4460. #main {
  4461. left: 0;
  4462. -webkit-box-shadow: none;
  4463. box-shadow: none;
  4464. top: 60px;
  4465. }
  4466. #message {
  4467. top: 60px;
  4468. }
  4469. #main .header .page-title .sidebar-toggle-btn {
  4470. margin-right: 20px;
  4471. opacity: 1;
  4472. width: 20px;
  4473. margin-left: 10px;
  4474. }
  4475. #main .header .page-title .sidebar-toggle-btn .line {
  4476. height: 2px;
  4477. }
  4478. .show-sidebar #sidebar {
  4479. -webkit-transform: none;
  4480. transform: none;
  4481. }
  4482. .show-sidebar #main {
  4483. -webkit-transform: translateX(250px);
  4484. transform: translateX(250px);
  4485. }
  4486. .show-message #main {
  4487. margin-right: 0;
  4488. }
  4489. .show-message #message {
  4490. left: 20%;
  4491. width: 80%;
  4492. }
  4493. }
  4494. @media only screen and (max-width: 600px) {
  4495. #main .header .search-box {
  4496. float: none;
  4497. width: 100%;
  4498. margin-bottom: 10px;
  4499. margin-top: 10px;
  4500. margin-left: 0;
  4501. }
  4502. #main .action-bar {
  4503. float: none;
  4504. }
  4505. .action-bar ul {
  4506. margin-bottom: 0;
  4507. text-align: center;
  4508. }
  4509. #main .header .search-box input,
  4510. #main .header .search-box input:focus {
  4511. width: 100%;
  4512. }
  4513. #main #main-nano-wrapper {
  4514. position: absolute;
  4515. top: 150px;
  4516. bottom: 0;
  4517. height: auto;
  4518. }
  4519. #main .message-list li .mail-col-1 {
  4520. position: absolute;
  4521. top: 0;
  4522. bottom: 0;
  4523. left: 0;
  4524. right: 120px;
  4525. width: auto;
  4526. }
  4527. #main .message-list li .mail-col-2 {
  4528. right: 0;
  4529. left: auto;
  4530. width: 120px;
  4531. }
  4532. #main .message-list li .mail-col-2 .date {
  4533. padding-left: 0;
  4534. position: static;
  4535. }
  4536. #main .message-list li .mail-col-2 .subject {
  4537. display: none;
  4538. }
  4539. }
  4540. /**
  4541. * Nano scroll stuff
  4542. */
  4543. .nano {
  4544. position: relative;
  4545. width: 100%;
  4546. height: 100%;
  4547. overflow: hidden;
  4548. }
  4549. .nano > .nano-content {
  4550. position: absolute;
  4551. overflow: scroll;
  4552. overflow-x: hidden;
  4553. top: 0;
  4554. right: 0;
  4555. bottom: 0;
  4556. left: 0;
  4557. }
  4558. .nano > .nano-content:focus {
  4559. outline: none;
  4560. }
  4561. .nano > .nano-content::-webkit-scrollbar {
  4562. visibility: hidden;
  4563. }
  4564. .has-scrollbar > .nano-content::-webkit-scrollbar {
  4565. visibility: visible;
  4566. }
  4567. .nano > .nano-pane {
  4568. background: rgba(152, 166, 173, 0.1);
  4569. position: absolute;
  4570. width: 7px;
  4571. right: 8px;
  4572. top: 8px;
  4573. bottom: 8px;
  4574. visibility: hidden \9;
  4575. /* Target only IE7 and IE8 with this hack */
  4576. opacity: .01;
  4577. border-radius: 5px;
  4578. -webkit-transition: .3s;
  4579. transition: .3s;
  4580. }
  4581. .nano > .nano-pane > .nano-slider {
  4582. background: rgba(152, 166, 173, 0.35);
  4583. position: relative;
  4584. border-radius: 3px;
  4585. -webkit-transition: .3s;
  4586. transition: .3s;
  4587. -webkit-transition-property: background;
  4588. transition-property: background;
  4589. }
  4590. .nano > .nano-pane:hover > .nano-slider,
  4591. .nano > .nano-pane.active > .nano-slider {
  4592. background: #A6A6A6;
  4593. }
  4594. .nano:hover > .nano-pane,
  4595. .nano-pane.active,
  4596. .nano-pane.flashed {
  4597. visibility: visible \9;
  4598. /* Target only IE7 and IE8 with this hack */
  4599. opacity: 0.99;
  4600. }
  4601. /* Profile */
  4602. .bg-picture {
  4603. padding: 30px;
  4604. }
  4605. .profile-info-name img {
  4606. width: 200px;
  4607. float: left;
  4608. margin-right: 30px;
  4609. }
  4610. .profile-info-detail {
  4611. overflow: hidden;
  4612. }
  4613. .profile-pills li a {
  4614. color: rgba(255, 255, 255, 0.5) !important;
  4615. padding: 0 10px;
  4616. display: block;
  4617. line-height: 30px !important;
  4618. }
  4619. .profile-pills li a:hover {
  4620. background-color: transparent;
  4621. color: #ffffff !important;
  4622. }
  4623. .profile-pills li a i {
  4624. font-size: 14px;
  4625. }
  4626. .comment {
  4627. padding-top: 12px;
  4628. }
  4629. .comment .comment-avatar {
  4630. position: relative;
  4631. -webkit-border-radius: 3px;
  4632. -webkit-background-clip: padding-box;
  4633. -moz-border-radius: 3px;
  4634. -moz-background-clip: padding;
  4635. border-radius: 3px;
  4636. background-clip: padding-box;
  4637. display: block;
  4638. float: left;
  4639. height: 32px;
  4640. width: 32px;
  4641. }
  4642. .comment .comment-body {
  4643. float: none;
  4644. margin-left: 40px;
  4645. position: relative;
  4646. }
  4647. .comment .comment-text {
  4648. border: 1px solid #3f5460;
  4649. border-radius: 2px;
  4650. padding: 7px 12px 8px;
  4651. }
  4652. .comment .comment-header {
  4653. font-size: 12px;
  4654. padding-bottom: 2px;
  4655. }
  4656. .comment .comment-header a {
  4657. color: #c3cbcf;
  4658. font-weight: bold;
  4659. }
  4660. .comment .comment-header span {
  4661. color: #98a6ad;
  4662. display: inline-block;
  4663. font-size: 11px;
  4664. margin-left: 5px;
  4665. }
  4666. .comment .comment-footer {
  4667. display: block;
  4668. font-size: 12px;
  4669. padding: 4px 12px 0;
  4670. }
  4671. .comment .comment-footer i {
  4672. font-size: 13px;
  4673. margin-right: 7px;
  4674. }
  4675. .comment .comment-footer, .comment .comment-footer a {
  4676. color: #a6b2b8;
  4677. }
  4678. .comment .comment-footer:hover, .comment .comment-footer a:hover {
  4679. color: #71b6f9;
  4680. }
  4681. .comment > .comment {
  4682. margin-left: 32px !important;
  4683. }
  4684. /* ===========
  4685. Menu
  4686. =============*/
  4687. .container-fluid {
  4688. max-width: 95%;
  4689. }
  4690. .wrapper {
  4691. padding-top: 120px;
  4692. }
  4693. .page-title-box {
  4694. padding: 22px 0;
  4695. }
  4696. .page-title-box .page-title {
  4697. font-size: 20px;
  4698. margin-bottom: 0;
  4699. margin-top: 0;
  4700. font-weight: 600;
  4701. }
  4702. #topnav {
  4703. position: fixed;
  4704. right: 0;
  4705. left: 0;
  4706. top: 0;
  4707. z-index: 1030;
  4708. border: 0;
  4709. -webkit-transition: all .5s ease;
  4710. transition: all .5s ease;
  4711. min-height: 60px;
  4712. background: #394c57;
  4713. -webkit-box-shadow: 0 0 18px 0 rgba(67, 89, 102, 0.1);
  4714. box-shadow: 0 0 18px 0 rgba(67, 89, 102, 0.1);
  4715. }
  4716. #topnav .has-submenu.active a {
  4717. color: #71b6f9;
  4718. }
  4719. #topnav .has-submenu.active a i {
  4720. color: #71b6f9;
  4721. }
  4722. #topnav .has-submenu.active .submenu li.active > a {
  4723. color: #71b6f9;
  4724. }
  4725. #topnav .topbar-main {
  4726. background: #253138;
  4727. }
  4728. #topnav .topbar-main .logo {
  4729. color: #ffffff !important;
  4730. font-size: 20px;
  4731. font-weight: 700;
  4732. letter-spacing: 1px;
  4733. line-height: 58px;
  4734. text-transform: uppercase;
  4735. float: left;
  4736. }
  4737. #topnav .topbar-main .logo-small {
  4738. display: none;
  4739. }
  4740. #topnav .topbar-main .badge-topbar {
  4741. position: absolute;
  4742. top: 7px;
  4743. right: 7px;
  4744. z-index: 99;
  4745. }
  4746. #topnav .topbar-main .nav > li > a {
  4747. height: 36px;
  4748. width: 36px;
  4749. padding: 0;
  4750. font-size: 24px;
  4751. line-height: 35px;
  4752. text-align: center;
  4753. border-radius: 50%;
  4754. margin: 12px 8px;
  4755. color: rgba(255, 255, 255, 0.7);
  4756. }
  4757. #topnav .topbar-main .nav > li > a:focus, #topnav .topbar-main .nav > li > a:hover {
  4758. background-color: rgba(67, 89, 102, 0.1);
  4759. color: #435966;
  4760. }
  4761. #topnav .topbar-main .dropdown-menu-lg .list-group {
  4762. margin-bottom: 0;
  4763. }
  4764. #topnav .topbar-main .dropdown-menu-lg .list-group-item {
  4765. border: none;
  4766. padding: 10px 20px;
  4767. }
  4768. #topnav .topbar-main .dropdown-menu-lg .media-heading {
  4769. margin-bottom: 0;
  4770. }
  4771. #topnav .topbar-main .dropdown-menu-lg .media-body p {
  4772. color: #828282;
  4773. }
  4774. #topnav .topbar-main .navbar-nav {
  4775. margin: 0;
  4776. }
  4777. #topnav .topbar-main .topbar-right-menu li {
  4778. float: left;
  4779. }
  4780. #topnav .navbar-toggle {
  4781. border: 0;
  4782. position: relative;
  4783. padding: 0;
  4784. margin: 0;
  4785. cursor: pointer;
  4786. }
  4787. #topnav .navbar-toggle:hover {
  4788. background-color: transparent;
  4789. }
  4790. #topnav .navbar-toggle:hover span {
  4791. background-color: #ffffff;
  4792. }
  4793. #topnav .navbar-toggle:focus {
  4794. background-color: transparent;
  4795. }
  4796. #topnav .navbar-toggle:focus span {
  4797. background-color: #ffffff;
  4798. }
  4799. #topnav .navbar-toggle .lines {
  4800. width: 25px;
  4801. display: block;
  4802. position: relative;
  4803. margin: 10px 10px 0 0;
  4804. padding-top: 13px;
  4805. height: 44px;
  4806. -webkit-transition: all .5s ease;
  4807. transition: all .5s ease;
  4808. }
  4809. #topnav .navbar-toggle span {
  4810. height: 2px;
  4811. width: 100%;
  4812. background-color: rgba(255, 255, 255, 0.8);
  4813. display: block;
  4814. margin-bottom: 5px;
  4815. -webkit-transition: -webkit-transform .5s ease;
  4816. transition: -webkit-transform .5s ease;
  4817. transition: transform .5s ease;
  4818. transition: transform .5s ease, -webkit-transform .5s ease;
  4819. }
  4820. #topnav .navbar-toggle.open span {
  4821. position: absolute;
  4822. }
  4823. #topnav .navbar-toggle.open span:first-child {
  4824. top: 18px;
  4825. -webkit-transform: rotate(45deg);
  4826. transform: rotate(45deg);
  4827. }
  4828. #topnav .navbar-toggle.open span:nth-child(2) {
  4829. visibility: hidden;
  4830. }
  4831. #topnav .navbar-toggle.open span:last-child {
  4832. width: 100%;
  4833. top: 18px;
  4834. -webkit-transform: rotate(-45deg);
  4835. transform: rotate(-45deg);
  4836. }
  4837. #topnav .navigation-menu {
  4838. list-style: none;
  4839. margin: 0;
  4840. padding: 0;
  4841. }
  4842. #topnav .navigation-menu > li {
  4843. display: inline-block;
  4844. position: relative;
  4845. }
  4846. #topnav .navigation-menu > li > a {
  4847. display: block;
  4848. color: #98a6ad;
  4849. font-size: 15px;
  4850. -webkit-transition: all .5s ease;
  4851. transition: all .5s ease;
  4852. line-height: 20px;
  4853. padding-left: 20px;
  4854. padding-right: 20px;
  4855. }
  4856. #topnav .navigation-menu > li > a:hover {
  4857. color: #71b6f9;
  4858. }
  4859. #topnav .navigation-menu > li > a:focus {
  4860. color: #71b6f9;
  4861. }
  4862. #topnav .navigation-menu > li > a:active {
  4863. color: #71b6f9;
  4864. }
  4865. #topnav .navigation-menu > li > a i {
  4866. font-size: 16px;
  4867. margin-right: 5px;
  4868. -webkit-transition: all .5s ease;
  4869. transition: all .5s ease;
  4870. vertical-align: text-top;
  4871. }
  4872. #topnav .navigation-menu > li > a:hover, #topnav .navigation-menu > li > a:focus {
  4873. background-color: transparent;
  4874. }
  4875. /*
  4876. Responsive Menu
  4877. */
  4878. @media (min-width: 992px) {
  4879. #topnav .navigation-menu > li > a {
  4880. padding-top: 20px;
  4881. padding-bottom: 20px;
  4882. }
  4883. #topnav .navigation-menu > li:first-of-type > a {
  4884. padding-left: 0;
  4885. }
  4886. #topnav .navigation-menu > li.last-elements .submenu {
  4887. left: auto;
  4888. right: 0;
  4889. }
  4890. #topnav .navigation-menu > li.last-elements .submenu > li.has-submenu .submenu {
  4891. left: auto;
  4892. right: 100%;
  4893. margin-left: 0;
  4894. margin-right: 10px;
  4895. }
  4896. #topnav .navigation-menu > li:hover a {
  4897. color: #71b6f9;
  4898. }
  4899. #topnav .navigation-menu > li:hover a i {
  4900. color: #71b6f9;
  4901. }
  4902. #topnav .navigation-menu > li > ul > li.has-submenu:active > a,
  4903. #topnav .navigation-menu > li > ul > li.has-submenu:hover > a {
  4904. color: #71b6f9;
  4905. }
  4906. #topnav .navigation-menu > li .submenu {
  4907. position: absolute;
  4908. top: 100%;
  4909. left: 0;
  4910. z-index: 1000;
  4911. border: 1px solid #394c57;
  4912. padding: 15px 0;
  4913. list-style: none;
  4914. min-width: 200px;
  4915. text-align: left;
  4916. visibility: hidden;
  4917. opacity: 0;
  4918. margin-top: 10px;
  4919. -webkit-transition: all .2s ease;
  4920. transition: all .2s ease;
  4921. background-color: #394c57;
  4922. }
  4923. #topnav .navigation-menu > li .submenu.megamenu {
  4924. white-space: nowrap;
  4925. width: auto;
  4926. }
  4927. #topnav .navigation-menu > li .submenu.megamenu > li {
  4928. overflow: hidden;
  4929. width: 200px;
  4930. display: inline-block;
  4931. vertical-align: top;
  4932. }
  4933. #topnav .navigation-menu > li .submenu > li.has-submenu > a:after {
  4934. content: "\F142";
  4935. font-family: "Material Design Icons";
  4936. position: absolute;
  4937. right: 20px;
  4938. top: 5px;
  4939. font-size: 18px;
  4940. }
  4941. #topnav .navigation-menu > li .submenu > li .submenu {
  4942. left: 100%;
  4943. top: 0;
  4944. margin-left: 10px;
  4945. margin-top: -1px;
  4946. }
  4947. #topnav .navigation-menu > li .submenu li {
  4948. position: relative;
  4949. }
  4950. #topnav .navigation-menu > li .submenu li ul {
  4951. list-style: none;
  4952. padding-left: 0;
  4953. margin: 0;
  4954. }
  4955. #topnav .navigation-menu > li .submenu li a {
  4956. display: block;
  4957. padding: 8px 25px;
  4958. clear: both;
  4959. white-space: nowrap;
  4960. font-size: 15px;
  4961. color: #98a6ad;
  4962. }
  4963. #topnav .navigation-menu > li .submenu li a:hover {
  4964. color: #ffffff;
  4965. }
  4966. #topnav .navigation-menu > li .submenu li span {
  4967. display: block;
  4968. padding: 8px 25px;
  4969. clear: both;
  4970. line-height: 1.42857143;
  4971. white-space: nowrap;
  4972. font-size: 10px;
  4973. text-transform: uppercase;
  4974. letter-spacing: 2px;
  4975. color: #435966;
  4976. }
  4977. #topnav .navbar-toggle {
  4978. display: none;
  4979. }
  4980. #topnav #navigation {
  4981. display: block !important;
  4982. }
  4983. }
  4984. @media (max-width: 991px) {
  4985. .wrapper {
  4986. padding-top: 60px;
  4987. }
  4988. .container {
  4989. width: auto !important;
  4990. }
  4991. #topnav .navigation-menu {
  4992. float: none;
  4993. max-height: 400px;
  4994. text-align: left;
  4995. }
  4996. #topnav .navigation-menu > li {
  4997. display: block;
  4998. }
  4999. #topnav .navigation-menu > li > a {
  5000. color: #435966;
  5001. padding: 15px;
  5002. }
  5003. #topnav .navigation-menu > li > a i {
  5004. display: inline-block;
  5005. margin-right: 10px;
  5006. margin-bottom: 0;
  5007. vertical-align: inherit;
  5008. }
  5009. #topnav .navigation-menu > li > a:after {
  5010. position: absolute;
  5011. right: 15px;
  5012. }
  5013. #topnav .navigation-menu > li .submenu {
  5014. display: none;
  5015. list-style: none;
  5016. padding-left: 20px;
  5017. margin: 0;
  5018. }
  5019. #topnav .navigation-menu > li .submenu li a {
  5020. display: block;
  5021. position: relative;
  5022. padding: 7px 20px;
  5023. color: #435966;
  5024. }
  5025. #topnav .navigation-menu > li .submenu li a:hover {
  5026. color: #71b6f9;
  5027. }
  5028. #topnav .navigation-menu > li .submenu li.has-submenu > a:after {
  5029. content: "\F140";
  5030. font-family: "Material Design Icons";
  5031. position: absolute;
  5032. right: 30px;
  5033. }
  5034. #topnav .navigation-menu > li .submenu.open {
  5035. display: block;
  5036. }
  5037. #topnav .navigation-menu > li .submenu .submenu {
  5038. display: none;
  5039. list-style: none;
  5040. }
  5041. #topnav .navigation-menu > li .submenu .submenu.open {
  5042. display: block;
  5043. }
  5044. #topnav .navigation-menu > li .submenu.megamenu > li > ul {
  5045. list-style: none;
  5046. padding-left: 0;
  5047. }
  5048. #topnav .navigation-menu > li .submenu.megamenu > li > ul > li > span {
  5049. display: block;
  5050. position: relative;
  5051. padding: 15px;
  5052. text-transform: uppercase;
  5053. font-size: 11px;
  5054. letter-spacing: 2px;
  5055. color: #435966;
  5056. }
  5057. #topnav .navigation-menu > li.has-submenu.open > a {
  5058. color: #71b6f9;
  5059. }
  5060. #topnav .navbar-header {
  5061. float: left;
  5062. }
  5063. #navigation {
  5064. position: absolute;
  5065. top: 62px;
  5066. left: 0;
  5067. width: 100%;
  5068. display: none;
  5069. height: auto;
  5070. padding-bottom: 0;
  5071. overflow: auto;
  5072. border-top: 1px solid #e7e7e7;
  5073. border-bottom: 1px solid #e7e7e7;
  5074. background-color: #ffffff;
  5075. }
  5076. #navigation.open {
  5077. display: block;
  5078. overflow-y: auto;
  5079. }
  5080. #topnav .has-submenu.active a {
  5081. color: #71b6f9;
  5082. }
  5083. #topnav .has-submenu.active a:active, #topnav .has-submenu.active a:focus, #topnav .has-submenu.active a i {
  5084. color: #71b6f9;
  5085. }
  5086. }
  5087. @media (min-width: 768px) {
  5088. #topnav .navigation-menu > li.has-submenu:hover > .submenu {
  5089. visibility: visible;
  5090. opacity: 1;
  5091. margin-top: 0;
  5092. }
  5093. #topnav .navigation-menu > li.has-submenu:hover > .submenu > li.has-submenu:hover > .submenu {
  5094. visibility: visible;
  5095. opacity: 1;
  5096. margin-left: 0;
  5097. margin-right: 0;
  5098. }
  5099. .navbar-toggle {
  5100. display: block;
  5101. }
  5102. }
  5103. .topbar-custom {
  5104. border-radius: 0;
  5105. margin-bottom: 0;
  5106. }
  5107. .topbar-custom .nav-link {
  5108. padding: 0;
  5109. line-height: 60px;
  5110. color: rgba(255, 255, 255, 0.6);
  5111. }
  5112. .topbar-custom .dropdown-toggle:after {
  5113. content: initial;
  5114. }
  5115. .topbar-custom .menu-left {
  5116. overflow: hidden;
  5117. }
  5118. /* Footer */
  5119. .footer {
  5120. left: 0;
  5121. }
  5122. /* Seach */
  5123. .app-search {
  5124. position: relative;
  5125. }
  5126. .app-search button {
  5127. position: absolute;
  5128. background-color: transparent;
  5129. border: none;
  5130. top: 4px;
  5131. right: 28px;
  5132. color: rgba(152, 166, 173, 0.7);
  5133. }
  5134. .app-search button:hover {
  5135. color: #98a6ad;
  5136. }
  5137. .app-search .form-control,
  5138. .app-search .form-control:focus {
  5139. border: 1px solid rgba(152, 166, 173, 0.15);
  5140. font-size: 13px;
  5141. height: 34px;
  5142. color: #ffffff;
  5143. padding-left: 20px;
  5144. padding-right: 40px;
  5145. margin: 13px 15px 0 15px;
  5146. background: rgba(152, 166, 173, 0.1);
  5147. -webkit-box-shadow: none;
  5148. box-shadow: none;
  5149. border-radius: 30px;
  5150. width: 190px;
  5151. }
  5152. input.app-search-input::-webkit-input-placeholder {
  5153. color: rgba(255, 255, 255, 0.7);
  5154. font-weight: normal;
  5155. }
  5156. input.app-search-input:-moz-placeholder {
  5157. color: rgba(255, 255, 255, 0.7);
  5158. font-weight: normal;
  5159. }
  5160. input.app-search-input::-moz-placeholder {
  5161. color: rgba(255, 255, 255, 0.7);
  5162. font-weight: normal;
  5163. }
  5164. input.app-search-input:-ms-input-placeholder {
  5165. color: rgba(255, 255, 255, 0.7);
  5166. font-weight: normal;
  5167. }
  5168. /* Notification */
  5169. .notification-box ul {
  5170. max-height: 60px;
  5171. }
  5172. .notification-box ul li a {
  5173. font-size: 26px;
  5174. color: #ffffff;
  5175. display: block;
  5176. line-height: 60px;
  5177. padding: 0 7px;
  5178. }
  5179. .notification-box .noti-dot {
  5180. position: relative;
  5181. top: -45px;
  5182. }
  5183. .notification-box .pulse {
  5184. width: 2px;
  5185. height: 2px;
  5186. border: 3px solid #ff5b5b;
  5187. border-radius: 30px;
  5188. background-color: #ff5b5b;
  5189. z-index: 10;
  5190. position: absolute;
  5191. right: 13px;
  5192. }
  5193. .notification-box .dot {
  5194. border: 4px solid #ff5b5b;
  5195. background: transparent;
  5196. border-radius: 60px;
  5197. height: 30px;
  5198. width: 30px;
  5199. -webkit-animation: pulse 3s ease-out;
  5200. animation: pulse 3s ease-out;
  5201. -webkit-animation-iteration-count: infinite;
  5202. animation-iteration-count: infinite;
  5203. position: absolute;
  5204. top: -12px;
  5205. left: 9px;
  5206. z-index: 1;
  5207. opacity: 0;
  5208. }
  5209. @-webkit-keyframes pulse {
  5210. 0% {
  5211. -webkit-transform: scale(0);
  5212. opacity: 0.0;
  5213. }
  5214. 25% {
  5215. -webkit-transform: scale(0);
  5216. opacity: 0.1;
  5217. }
  5218. 50% {
  5219. -webkit-transform: scale(0.1);
  5220. opacity: 0.3;
  5221. }
  5222. 75% {
  5223. -webkit-transform: scale(0.5);
  5224. opacity: 0.5;
  5225. }
  5226. 100% {
  5227. -webkit-transform: scale(1);
  5228. opacity: 0.0;
  5229. }
  5230. }
  5231. .nav-user {
  5232. padding: 0 12px !important;
  5233. }
  5234. .nav-user img {
  5235. height: 32px;
  5236. width: 32px;
  5237. }
  5238. .notification-list {
  5239. height: calc(100% - 50px);
  5240. }
  5241. .notification-list .list-group-item {
  5242. border-bottom: 1px solid rgba(152, 166, 173, 0.2) !important;
  5243. margin-bottom: 0;
  5244. background-color: #ffffff;
  5245. }
  5246. .notification-list .list-group-item.active {
  5247. background-color: rgba(152, 166, 173, 0.1);
  5248. }
  5249. .notification-list .user-list .user-desc span.name {
  5250. color: #435966 !important;
  5251. }
  5252. .user-list .user-list-item .avatar {
  5253. float: left;
  5254. margin-right: 5px;
  5255. width: 30px;
  5256. height: 30px;
  5257. }
  5258. .user-list .user-list-item .avatar img {
  5259. border-radius: 50%;
  5260. width: 100%;
  5261. }
  5262. .user-list .user-list-item .icon {
  5263. float: left;
  5264. margin-right: 5px;
  5265. height: 30px;
  5266. width: 30px;
  5267. border-radius: 50%;
  5268. text-align: center;
  5269. }
  5270. .user-list .user-list-item .icon i {
  5271. color: #ffffff;
  5272. line-height: 30px;
  5273. font-size: 16px;
  5274. }
  5275. .user-list .user-list-item .user-desc {
  5276. margin-left: 40px;
  5277. }
  5278. .user-list .user-list-item .user-desc span.name {
  5279. color: #eeeeee;
  5280. text-overflow: ellipsis;
  5281. white-space: nowrap;
  5282. display: block;
  5283. width: 100%;
  5284. overflow: hidden;
  5285. }
  5286. .user-list .user-list-item .user-desc span.desc {
  5287. color: #98a6ad;
  5288. text-overflow: ellipsis;
  5289. white-space: nowrap;
  5290. display: block;
  5291. width: 100%;
  5292. overflow: hidden;
  5293. font-size: 12px;
  5294. }
  5295. .user-list .user-list-item .user-desc span.time {
  5296. font-size: 11px;
  5297. color: #71b6f9;
  5298. font-style: italic;
  5299. }
  5300. /* Right sidebar */
  5301. .side-bar.right-bar {
  5302. float: right !important;
  5303. right: -266px;
  5304. top: 0px;
  5305. }
  5306. .side-bar {
  5307. -moz-transition: all 200ms ease-out;
  5308. -webkit-transition: all 200ms ease-out;
  5309. background-color: #ffffff;
  5310. -webkit-box-shadow: 0 0px 24px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
  5311. box-shadow: 0 0px 24px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
  5312. display: block !important;
  5313. float: left;
  5314. height: 100%;
  5315. position: fixed;
  5316. transition: all 200ms ease-out;
  5317. width: 240px;
  5318. }
  5319. .right-bar {
  5320. background: #ffffff !important;
  5321. z-index: 9999 !important;
  5322. }
  5323. .right-bar h4 {
  5324. border-bottom: 1px solid rgba(152, 166, 173, 0.5);
  5325. padding: 4px 10px 10px 18px;
  5326. text-transform: uppercase;
  5327. font-size: 14px;
  5328. font-weight: 600;
  5329. letter-spacing: 0.03em;
  5330. margin-bottom: 0;
  5331. color: #435966;
  5332. }
  5333. .right-bar .right-bar-toggle {
  5334. float: right;
  5335. line-height: 46px;
  5336. font-size: 20px;
  5337. color: #333;
  5338. padding: 0 10px;
  5339. }
  5340. .wrapper.right-bar-enabled .right-bar {
  5341. right: 0;
  5342. }
  5343. /*
  5344. Template Name: Abstack - Bootstrap 4 Web App kit
  5345. Author: CoderThemes
  5346. Email: coderthemes@gmail.com
  5347. File: Responsive
  5348. */
  5349. @media (min-width: 768px) and (max-width: 991px) {
  5350. body {
  5351. overflow-x: hidden;
  5352. }
  5353. .fixedHeader-floating {
  5354. top: 60px !important;
  5355. }
  5356. }
  5357. @media (max-width: 768px) {
  5358. body {
  5359. overflow-x: hidden;
  5360. }
  5361. .container-fluid {
  5362. max-width: 100%;
  5363. }
  5364. .topbar-left {
  5365. width: 70px !important;
  5366. }
  5367. .topbar-left span {
  5368. display: none !important;
  5369. }
  5370. .topbar-left i {
  5371. display: block !important;
  5372. line-height: 70px !important;
  5373. }
  5374. .topbar .topbar-left {
  5375. height: 70px;
  5376. }
  5377. .navbar-nav.navbar-right {
  5378. float: right;
  5379. }
  5380. .content-page {
  5381. margin-left: 0 !important;
  5382. }
  5383. .enlarged .left.side-menu {
  5384. margin-left: -70px;
  5385. }
  5386. .footer {
  5387. left: 0 !important;
  5388. }
  5389. .mobile-sidebar {
  5390. left: 0;
  5391. }
  5392. .mobile-content {
  5393. left: 250px;
  5394. right: -250px;
  5395. }
  5396. .dataTables_wrapper .col-xs-6 {
  5397. width: 100%;
  5398. text-align: left;
  5399. }
  5400. div#datatable-buttons_info {
  5401. float: none;
  5402. }
  5403. .ms-container {
  5404. width: 100%;
  5405. }
  5406. .m-t-sm-50 {
  5407. margin-top: 50px !important;
  5408. }
  5409. .fixedHeader-floating {
  5410. top: 60px !important;
  5411. }
  5412. }
  5413. @media (max-width: 767px) {
  5414. .navbar-nav .show .dropdown-menu {
  5415. background-color: #ffffff;
  5416. -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  5417. box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  5418. left: auto;
  5419. position: absolute;
  5420. right: 0;
  5421. }
  5422. .navbar-nav .show .dropdown-menu li {
  5423. display: block;
  5424. }
  5425. .navbar-nav {
  5426. margin: 0;
  5427. display: inline-block;
  5428. }
  5429. .navbar-nav li {
  5430. display: inline-block;
  5431. line-height: 1px;
  5432. }
  5433. .dropdown-lg {
  5434. width: 200px !important;
  5435. }
  5436. .user-box {
  5437. float: right;
  5438. }
  5439. .dataTables_length {
  5440. float: none;
  5441. margin-bottom: 10px;
  5442. }
  5443. .table-auto-res {
  5444. display: block;
  5445. width: 100%;
  5446. overflow-x: auto;
  5447. }
  5448. }
  5449. @media (max-width: 480px) {
  5450. .side-menu {
  5451. z-index: 10 !important;
  5452. }
  5453. .button-menu-mobile {
  5454. display: block;
  5455. }
  5456. .search-bar {
  5457. display: none !important;
  5458. }
  5459. .logo-large {
  5460. display: none;
  5461. }
  5462. .logo-small {
  5463. display: inline-block !important;
  5464. }
  5465. .dropdown-menu-lg {
  5466. max-width: 230px;
  5467. }
  5468. }
  5469. @media (max-width: 420px) {
  5470. .hide-phone {
  5471. display: none !important;
  5472. }
  5473. }
  5474. /* Container-alt */
  5475. @media (min-width: 768px) {
  5476. .container-alt {
  5477. width: 750px;
  5478. }
  5479. }
  5480. @media (min-width: 992px) {
  5481. .container-alt {
  5482. width: 970px;
  5483. }
  5484. }
  5485. @media (min-width: 1200px) {
  5486. .container-alt {
  5487. width: 1170px;
  5488. }
  5489. }
  5490. @media (max-width: 419px) {
  5491. .hidden-xxs {
  5492. display: none;
  5493. }
  5494. .pro-user-name {
  5495. display: none;
  5496. }
  5497. .topbar-left {
  5498. width: 70px !important;
  5499. }
  5500. .page-title {
  5501. font-size: 15px;
  5502. max-width: 250px;
  5503. white-space: nowrap;
  5504. }
  5505. .editable-responsive {
  5506. overflow-x: auto;
  5507. }
  5508. .page-title-box .breadcrumb {
  5509. display: none;
  5510. }
  5511. .navbar-nav .show .dropdown-menu {
  5512. margin-right: -20px;
  5513. }
  5514. .user-box .dropdown-menu {
  5515. margin-right: 0 !important;
  5516. }
  5517. .dropdown-lg {
  5518. width: 200px !important;
  5519. }
  5520. .user-list .user-list-item .icon, .user-list .user-list-item .avatar {
  5521. display: none;
  5522. }
  5523. .user-list .user-list-item .user-desc {
  5524. margin-left: 0;
  5525. }
  5526. }
  5527. /*# sourceMappingURL=style.css.map */