dark-layout.css 68 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147
  1. /*========================================================
  2. DARK LAYOUT
  3. =========================================================*/
  4. body.dark-layout {
  5. background-color: #262c49;
  6. /********* UI ELEMENTS *********/
  7. /********* COMPONENTS *********/
  8. /********** FORMS **********/
  9. /********** TABLE **********/
  10. /********** PAGES **********/
  11. /********** CHARTS **********/
  12. /********** APPLICATIONS **********/
  13. /********** EXTENSIONS **********/
  14. /********** CUSTOMIZER **********/
  15. /********** HORIZONTAL LAYOUT **********/
  16. }
  17. body.dark-layout h1,
  18. body.dark-layout h2,
  19. body.dark-layout h3,
  20. body.dark-layout h4,
  21. body.dark-layout h5,
  22. body.dark-layout h6 {
  23. color: #ebeefd;
  24. }
  25. body.dark-layout [class*=border] {
  26. border-color: #414561 !important;
  27. }
  28. body.dark-layout a:hover {
  29. color: #5c6bc6;
  30. }
  31. body.dark-layout p,
  32. body.dark-layout small,
  33. body.dark-layout span,
  34. body.dark-layout label {
  35. color: #c2c6dc;
  36. }
  37. body.dark-layout hr {
  38. border-color: #414561;
  39. }
  40. body.dark-layout pre {
  41. background-color: #262c49;
  42. border: 0;
  43. }
  44. body.dark-layout pre code {
  45. background-color: inherit;
  46. text-shadow: none;
  47. }
  48. body.dark-layout pre code .operator,
  49. body.dark-layout pre code .url {
  50. background-color: #262c49;
  51. }
  52. body.dark-layout code {
  53. background-color: #262c49;
  54. color: #b8c2cc;
  55. }
  56. body.dark-layout kbd {
  57. background-color: #262c49;
  58. }
  59. body.dark-layout .text-dark {
  60. color: #b8c2cc !important;
  61. }
  62. body.dark-layout .header-navbar-shadow {
  63. background: linear-gradient(180deg, rgba(44, 48, 60, 0.9) 44%, rgba(44, 48, 60, 0.43) 73%, rgba(44, 48, 60, 0));
  64. }
  65. body.dark-layout .header-navbar {
  66. background-color: #10163a;
  67. }
  68. body.dark-layout .header-navbar .navbar-container .nav .nav-item .nav-link {
  69. color: #c2c6dc;
  70. background-color: transparent;
  71. }
  72. body.dark-layout .header-navbar .navbar-container .nav .nav-item .nav-link i {
  73. color: #c2c6dc;
  74. }
  75. body.dark-layout .header-navbar .navbar-container .nav .nav-item .nav-link.bookmark-star i {
  76. color: #fff !important;
  77. }
  78. body.dark-layout .header-navbar .navbar-container .nav .nav-item.nav-search .search-input.open {
  79. background-color: #10163a;
  80. }
  81. body.dark-layout .header-navbar .navbar-container .nav .nav-item.nav-search .search-input.open .input {
  82. border-color: #414561;
  83. }
  84. body.dark-layout .header-navbar .navbar-container .nav .nav-item.nav-search .search-input.open .input::-webkit-input-placeholder {
  85. color: #c2c6dc;
  86. }
  87. body.dark-layout .header-navbar .navbar-container .nav .nav-item.nav-search .search-input.open .input::-moz-placeholder {
  88. color: #c2c6dc;
  89. }
  90. body.dark-layout .header-navbar .navbar-container .nav .nav-item.nav-search .search-input.open .input:-ms-input-placeholder {
  91. color: #c2c6dc;
  92. }
  93. body.dark-layout .header-navbar .navbar-container .nav .nav-item.nav-search .search-input.open .input::-ms-input-placeholder {
  94. color: #c2c6dc;
  95. }
  96. body.dark-layout .header-navbar .navbar-container .nav .nav-item.nav-search .search-input.open .input,
  97. body.dark-layout .header-navbar .navbar-container .nav .nav-item.nav-search .search-input.open .input::placeholder,
  98. body.dark-layout .header-navbar .navbar-container .nav .nav-item.nav-search .search-input.open .search-input-close {
  99. color: #c2c6dc;
  100. }
  101. body.dark-layout .header-navbar .navbar-container .nav .nav-item .bookmark-input .form-control {
  102. background-color: #10163a;
  103. }
  104. body.dark-layout .header-navbar .navbar-container .nav .nav-item .search-list {
  105. background-color: #262c49;
  106. }
  107. body.dark-layout .header-navbar .navbar-container .nav .nav-item .search-list .current_item {
  108. background-color: #10163a;
  109. }
  110. body.dark-layout .header-navbar .navbar-container .nav .dropdown-notification .dropdown-menu.dropdown-menu-media {
  111. overflow: hidden;
  112. }
  113. body.dark-layout .header-navbar .navbar-container .nav .dropdown-notification .dropdown-menu.dropdown-menu-media .media {
  114. border-color: #414561;
  115. }
  116. body.dark-layout .header-navbar .navbar-container .nav .dropdown-notification .dropdown-menu.dropdown-menu-media .media .media-body .notification-text {
  117. color: #c2c6dc;
  118. }
  119. body.dark-layout .header-navbar .navbar-container .nav .dropdown-notification .dropdown-menu.dropdown-menu-media .media .media-meta {
  120. color: #c2c6dc;
  121. }
  122. body.dark-layout .header-navbar .navbar-container .nav .dropdown-notification .dropdown-menu.dropdown-menu-media .media:hover {
  123. background-color: #10163a;
  124. }
  125. body.dark-layout .header-navbar .navbar-container .nav .dropdown-notification .dropdown-menu.dropdown-menu-media .dropdown-menu-footer {
  126. background-color: #10163a;
  127. }
  128. body.dark-layout .header-navbar .navbar-container .nav .dropdown-notification .dropdown-menu.dropdown-menu-media .dropdown-menu-footer .dropdown-item {
  129. color: #fff;
  130. border-color: #414561;
  131. }
  132. body.dark-layout .header-navbar .navbar-container .nav .dropdown-notification .dropdown-menu.dropdown-menu-media .dropdown-menu-footer .dropdown-item:hover {
  133. background-color: #10163a;
  134. }
  135. body.dark-layout .header-navbar.navbar-static-top {
  136. background-color: transparent;
  137. }
  138. body.dark-layout .header-navbar[class*=bg-] .navbar-nav .nav-item .nav-link {
  139. background-color: inherit;
  140. }
  141. body.dark-layout.blank-page .card.bg-transparent h1,
  142. body.dark-layout.blank-page .card.bg-transparent h2,
  143. body.dark-layout.blank-page .card.bg-transparent h3,
  144. body.dark-layout.blank-page .card.bg-transparent h4,
  145. body.dark-layout.blank-page .card.bg-transparent h5,
  146. body.dark-layout.blank-page .card.bg-transparent h6 {
  147. color: #10163a;
  148. }
  149. body.dark-layout.blank-page .card.bg-transparent p {
  150. color: #262c49;
  151. }
  152. body.dark-layout .main-menu {
  153. background-color: #10163a;
  154. }
  155. body.dark-layout .main-menu .shadow-bottom {
  156. background: linear-gradient(180deg, #0f1642 44%, rgba(15, 22, 66, 0.51) 73%, rgba(44, 48, 60, 0));
  157. }
  158. body.dark-layout .main-menu:not(.expanded) .navigation .sidebar-group-active a {
  159. background-color: #262c49;
  160. }
  161. body.dark-layout .main-menu-content .navigation > li.open > a {
  162. background-color: #262c49;
  163. }
  164. body.dark-layout .main-menu-content .navigation-main {
  165. background-color: #10163a;
  166. }
  167. body.dark-layout .main-menu-content .navigation-main .nav-item i {
  168. color: #c2c6dc;
  169. margin-right: 1rem;
  170. }
  171. body.dark-layout .main-menu-content .navigation-main .nav-item a:after {
  172. color: #c2c6dc;
  173. }
  174. body.dark-layout .main-menu-content .navigation-main .nav-item .menu-content {
  175. background-color: #10163a;
  176. }
  177. body.dark-layout .main-menu-content .navigation-main .nav-item .menu-content .active .menu-item {
  178. color: #fff;
  179. }
  180. body.dark-layout .main-menu-content .navigation-main .nav-item .menu-content li:not(.active) a {
  181. background-color: #10163a;
  182. }
  183. body.dark-layout .main-menu-content .navigation-main .active .menu-title,
  184. body.dark-layout .main-menu-content .navigation-main .active i {
  185. color: #fff;
  186. }
  187. body.dark-layout .main-menu-content .navigation-main .sidebar-group-active a {
  188. background: #10163a;
  189. border-radius: 4px;
  190. }
  191. body.dark-layout .main-menu-content .navigation-main .sidebar-group-active .menu-content {
  192. background-color: #10163a;
  193. }
  194. body.dark-layout .main-menu-content .navigation-main .sidebar-group-active .menu-content .active {
  195. z-index: 1;
  196. }
  197. body.dark-layout .main-menu-content .navigation-main .sidebar-group-active .menu-content .active a {
  198. background-color: transparent;
  199. }
  200. body.dark-layout.menu-collapsed .main-menu:not(.expanded) .navigation-main li.active a {
  201. background: #262c49 !important;
  202. }
  203. body.dark-layout .data-list-view-header .dataTables_wrapper .top .action-btns .dropdown .dropdown-toggle,
  204. body.dark-layout .data-thumb-view-header .dataTables_wrapper .top .action-btns .dropdown .dropdown-toggle {
  205. background-color: #10163a !important;
  206. color: #c2c6dc;
  207. }
  208. body.dark-layout .data-list-view-header .dataTables_wrapper .top .action-btns .dropdown .dropdown-toggle:hover,
  209. body.dark-layout .data-list-view-header .dataTables_wrapper .top .action-btns .dropdown .dropdown-toggle:active,
  210. body.dark-layout .data-thumb-view-header .dataTables_wrapper .top .action-btns .dropdown .dropdown-toggle:hover,
  211. body.dark-layout .data-thumb-view-header .dataTables_wrapper .top .action-btns .dropdown .dropdown-toggle:active {
  212. box-shadow: none;
  213. color: #c2c6dc !important;
  214. }
  215. body.dark-layout .data-list-view-header .dataTables_wrapper .top .action-btns .dt-buttons .btn.btn-outline-primary span,
  216. body.dark-layout .data-thumb-view-header .dataTables_wrapper .top .action-btns .dt-buttons .btn.btn-outline-primary span {
  217. color: #5c6bc6;
  218. }
  219. body.dark-layout .data-list-view-header .dataTables_wrapper .top .action-btns .dt-buttons .btn.btn-outline-primary:hover,
  220. body.dark-layout .data-thumb-view-header .dataTables_wrapper .top .action-btns .dt-buttons .btn.btn-outline-primary:hover {
  221. background-color: transparent;
  222. }
  223. body.dark-layout .data-list-view-header .dataTables_wrapper .top .dataTables_length .form-control,
  224. body.dark-layout .data-list-view-header .dataTables_wrapper .top .dataTables_filter .form-control,
  225. body.dark-layout .data-thumb-view-header .dataTables_wrapper .top .dataTables_length .form-control,
  226. body.dark-layout .data-thumb-view-header .dataTables_wrapper .top .dataTables_filter .form-control {
  227. background-color: #10163a;
  228. }
  229. body.dark-layout .data-list-view-header .dataTables_wrapper .top .dataTables_filter .form-control,
  230. body.dark-layout .data-thumb-view-header .dataTables_wrapper .top .dataTables_filter .form-control {
  231. border: 0;
  232. }
  233. body.dark-layout .data-list-view-header .dataTables_wrapper .pagination .page-item,
  234. body.dark-layout .data-thumb-view-header .dataTables_wrapper .pagination .page-item {
  235. background-color: #10163a !important;
  236. }
  237. body.dark-layout .data-list-view-header .dataTables_wrapper .pagination .page-item.active .page-link,
  238. body.dark-layout .data-thumb-view-header .dataTables_wrapper .pagination .page-item.active .page-link {
  239. background-color: #5c6bc6;
  240. }
  241. body.dark-layout .data-list-view-header .dataTables_wrapper .pagination .page-item .page-link,
  242. body.dark-layout .data-thumb-view-header .dataTables_wrapper .pagination .page-item .page-link {
  243. background-color: #10163a;
  244. }
  245. body.dark-layout .data-list-view-header .dataTable tbody tr,
  246. body.dark-layout .data-thumb-view-header .dataTable tbody tr {
  247. background-color: transparent;
  248. }
  249. body.dark-layout .data-list-view-header .dataTable tbody tr.selected td,
  250. body.dark-layout .data-thumb-view-header .dataTable tbody tr.selected td {
  251. background-color: rgba(92, 107, 198, 0.05);
  252. color: #5c6bc6;
  253. }
  254. body.dark-layout .data-list-view-header .add-new-data,
  255. body.dark-layout .data-thumb-view-header .add-new-data {
  256. background-color: #262c49;
  257. }
  258. body.dark-layout .data-list-view-header .add-new-data .new-data-title,
  259. body.dark-layout .data-thumb-view-header .add-new-data .new-data-title {
  260. border-color: #414561;
  261. }
  262. body.dark-layout .data-list-view-header .add-new-data .new-data-title .hide-data-sidebar i,
  263. body.dark-layout .data-thumb-view-header .add-new-data .new-data-title .hide-data-sidebar i {
  264. color: #c2c6dc;
  265. }
  266. body.dark-layout .data-list-view-header .add-new-data .data-items .form-control,
  267. body.dark-layout .data-list-view-header .add-new-data .data-items .custom-select,
  268. body.dark-layout .data-thumb-view-header .add-new-data .data-items .form-control,
  269. body.dark-layout .data-thumb-view-header .add-new-data .data-items .custom-select {
  270. background-color: #10163a;
  271. }
  272. body.dark-layout .bd-example .row,
  273. body.dark-layout .bd-example .d-flex {
  274. background-color: #262c49;
  275. }
  276. body.dark-layout .bd-example .row .col,
  277. body.dark-layout .bd-example .row [class*=col-],
  278. body.dark-layout .bd-example .row .bd-highlight,
  279. body.dark-layout .bd-example .d-flex .col,
  280. body.dark-layout .bd-example .d-flex [class*=col-],
  281. body.dark-layout .bd-example .d-flex .bd-highlight {
  282. background-color: #262c49;
  283. border-color: #808080;
  284. }
  285. body.dark-layout .bd-example .height-example-wrapper {
  286. background-color: #343661 !important;
  287. }
  288. body.dark-layout .bd-example .width-example,
  289. body.dark-layout .bd-example .height-example {
  290. background-color: #262c49 !important;
  291. }
  292. body.dark-layout .bd-example-row-flex-cols .row {
  293. background-color: #262c49;
  294. }
  295. body.dark-layout .colors-container span {
  296. color: #fff;
  297. }
  298. body.dark-layout .alert .alert-heading,
  299. body.dark-layout .alert p {
  300. color: inherit;
  301. }
  302. body.dark-layout .alert.alert-dark .alert-heading,
  303. body.dark-layout .alert.alert-dark p {
  304. color: #b8c2cc;
  305. }
  306. body.dark-layout .content-header-left .breadcrumbs-top .content-header-title {
  307. color: #ebeefd;
  308. }
  309. body.dark-layout .content-header-left .breadcrumbs-top .breadcrumb-wrapper .breadcrumb .breadcrumb-item {
  310. color: #c2c6dc;
  311. }
  312. body.dark-layout .content-header-left .breadcrumbs-top .breadcrumb-wrapper .breadcrumb .breadcrumb-item:before {
  313. color: #c2c6dc;
  314. }
  315. body.dark-layout .content-header-left .breadcrumbs-top .breadcrumb-wrapper .breadcrumb .breadcrumb-item:not(.active) a:hover {
  316. color: #5c6bc6;
  317. }
  318. body.dark-layout #default-breadcrumb .breadcrumb .breadcrumb-item,
  319. body.dark-layout #breadcrumb-alignment .breadcrumb .breadcrumb-item {
  320. color: #c2c6dc;
  321. }
  322. body.dark-layout #default-breadcrumb .breadcrumb .breadcrumb-item:before,
  323. body.dark-layout #breadcrumb-alignment .breadcrumb .breadcrumb-item:before {
  324. color: #c2c6dc;
  325. }
  326. body.dark-layout #default-breadcrumb .breadcrumb .breadcrumb-item:not(.active) a:hover,
  327. body.dark-layout #breadcrumb-alignment .breadcrumb .breadcrumb-item:not(.active) a:hover {
  328. color: #5c6bc6;
  329. }
  330. body.dark-layout #component-breadcrumbs .breadcrumb .breadcrumb-item {
  331. color: #c2c6dc;
  332. }
  333. body.dark-layout #component-breadcrumbs .breadcrumb .breadcrumb-item a {
  334. color: #c2c6dc;
  335. }
  336. body.dark-layout #component-breadcrumbs .breadcrumb .breadcrumb-item:before {
  337. color: #c2c6dc;
  338. }
  339. body.dark-layout #component-breadcrumbs .breadcrumb .breadcrumb-item.active {
  340. color: #5c6bc6;
  341. }
  342. body.dark-layout .collapse-bordered .collapse-header {
  343. border-color: rgba(255, 255, 255, 0.04);
  344. }
  345. body.dark-layout .collapse-bordered.accordion-shadow {
  346. box-shadow: 0 0 8px 0 rgba(255, 255, 255, 0.1);
  347. }
  348. body.dark-layout .accordion .collapse-border-item {
  349. border-color: rgba(255, 255, 255, 0.04);
  350. }
  351. body.dark-layout .collapse-margin {
  352. box-shadow: 0 2px 15px 0 rgba(255, 255, 255, 0.1);
  353. }
  354. body.dark-layout .accordion[data-toggle-hover=true] .card,
  355. body.dark-layout .collapse[data-toggle-hover=true] .card {
  356. border-color: rgba(255, 255, 255, 0.04);
  357. }
  358. body.dark-layout .collapse-icon .card-header a {
  359. color: #c2c6dc;
  360. }
  361. body.dark-layout .btn.btn-icon i {
  362. color: #fff;
  363. }
  364. body.dark-layout .btn.btn-dark,
  365. body.dark-layout .btn.btn-outline-dark,
  366. body.dark-layout .btn.btn-flat-dark {
  367. color: #b8c2cc;
  368. }
  369. body.dark-layout .btn.btn-dark {
  370. background-color: #4e5154 !important;
  371. }
  372. body.dark-layout .btn.btn-outline-dark {
  373. border-color: #4e5154;
  374. color: #b8c2cc;
  375. }
  376. body.dark-layout .btn.btn-flat-dark:active,
  377. body.dark-layout .btn.btn-flat-dark:focus {
  378. background: #4e5154;
  379. }
  380. body.dark-layout .btn.btn-white {
  381. color: #626262;
  382. }
  383. body.dark-layout .dropdown-toggle:hover i,
  384. body.dark-layout .dropdown-toggle:hover:after {
  385. color: #fff;
  386. }
  387. body.dark-layout .dropdown-menu {
  388. background-color: #262c49;
  389. }
  390. body.dark-layout .dropdown-menu:before,
  391. body.dark-layout .dropdown-menu .dropdown-item:hover,
  392. body.dark-layout .dropdown-menu .dropdown-item:focus {
  393. background: #262c49;
  394. }
  395. body.dark-layout .dropdown-menu .dropdown-item {
  396. color: #c2c6dc;
  397. }
  398. body.dark-layout .dropdown-menu .form-control {
  399. background-color: #10163a;
  400. }
  401. body.dark-layout .dropdown-menu .dropdown-divider {
  402. border-color: #414561;
  403. }
  404. body.dark-layout .search-bar .form-control {
  405. background-color: #10163a;
  406. }
  407. body.dark-layout .btn-white ~ .dropdown-menu .dropdown-item:not(.acitve):hover {
  408. color: #5c6bc6 !important;
  409. }
  410. body.dark-layout .btn-dark ~ .dropdown-menu .dropdown-item:hover,
  411. body.dark-layout .btn-outline-dark ~ .dropdown-menu .dropdown-item:hover,
  412. body.dark-layout .btn-flat-dark ~ .dropdown-menu .dropdown-item:hover {
  413. color: #c2c6dc;
  414. }
  415. body.dark-layout .dropup.dropdown-icon-wrapper .dropdown-menu .dropdown-item i {
  416. color: #c2c6dc;
  417. }
  418. body.dark-layout .modal .modal-header,
  419. body.dark-layout .modal .modal-header[class*=bg-] {
  420. background-color: #10163a;
  421. }
  422. body.dark-layout .modal .modal-header .close,
  423. body.dark-layout .modal .modal-header[class*=bg-] .close {
  424. background-color: #262c49;
  425. text-shadow: none;
  426. }
  427. body.dark-layout .modal .modal-header .close span,
  428. body.dark-layout .modal .modal-header[class*=bg-] .close span {
  429. color: #fff;
  430. }
  431. body.dark-layout .modal .modal-content,
  432. body.dark-layout .modal .modal-body,
  433. body.dark-layout .modal .modal-footer {
  434. background-color: #262c49;
  435. }
  436. body.dark-layout .modal .modal-content .form-control,
  437. body.dark-layout .modal .modal-content .picker__input,
  438. body.dark-layout .modal .modal-content .custom-file-label,
  439. body.dark-layout .modal .modal-content .custom-file-label:after,
  440. body.dark-layout .modal .modal-body .form-control,
  441. body.dark-layout .modal .modal-body .picker__input,
  442. body.dark-layout .modal .modal-body .custom-file-label,
  443. body.dark-layout .modal .modal-body .custom-file-label:after,
  444. body.dark-layout .modal .modal-footer .form-control,
  445. body.dark-layout .modal .modal-footer .picker__input,
  446. body.dark-layout .modal .modal-footer .custom-file-label,
  447. body.dark-layout .modal .modal-footer .custom-file-label:after {
  448. background-color: #10163a !important;
  449. }
  450. body.dark-layout .pagination:not([class*=pagination-]) .page-item.active {
  451. background-color: #262c49;
  452. }
  453. body.dark-layout .pagination:not([class*=pagination-]) .page-item.active .page-link {
  454. background-color: #5c6bc6;
  455. }
  456. body.dark-layout .pagination:not([class*=pagination-]) .page-item.active .page-link:hover {
  457. color: #fff;
  458. }
  459. body.dark-layout .pagination:not([class*=pagination-]) .page-item .page-link {
  460. background-color: #262c49;
  461. color: #fff;
  462. }
  463. body.dark-layout .pagination:not([class*=pagination-]) .page-item .page-link:hover {
  464. color: #5c6bc6;
  465. }
  466. body.dark-layout .pagination:not([class*=pagination-]) .page-item.prev-item .page-link:hover,
  467. body.dark-layout .pagination:not([class*=pagination-]) .page-item.next-item .page-link:hover {
  468. color: #fff;
  469. }
  470. body.dark-layout .pagination[class*=pagination-] .page-item:not(.active):not(:hover) .page-link {
  471. background-color: #262c49;
  472. color: #fff;
  473. }
  474. body.dark-layout .pagination[class*=pagination-] .page-item:not(.active) .page-link:hover {
  475. background-color: #262c49;
  476. }
  477. body.dark-layout .pagination[class*=pagination-] .page-item.active {
  478. background-color: #262c49;
  479. }
  480. body.dark-layout .nav .nav-item .nav-link {
  481. color: #c2c6dc;
  482. }
  483. body.dark-layout .nav .nav-item .nav-link.active,
  484. body.dark-layout .nav .nav-item .nav-link:hover {
  485. color: #5c6bc6;
  486. }
  487. body.dark-layout #navbar-component #basic-navbar .navbar {
  488. background-color: #262c49;
  489. }
  490. body.dark-layout #navbar-component .navbar .nav .nav-item a {
  491. color: #c2c6dc !important;
  492. }
  493. body.dark-layout #navbar-component .navbar .nav .nav-item .nav-link {
  494. background-color: inherit;
  495. }
  496. body.dark-layout #navbar-component .navbar .nav .nav-item .nav-link span {
  497. color: inherit;
  498. }
  499. body.dark-layout #navbar-component .navbar .nav .nav-item .nav-link .badge {
  500. color: #fff;
  501. }
  502. body.dark-layout .nav-tabs .nav-item .nav-link,
  503. body.dark-layout .nav-tabs.nav-justified .nav-item .nav-link,
  504. body.dark-layout .nav .nav-item .nav-link {
  505. background-color: #10163a;
  506. }
  507. body.dark-layout .nav-tabs .nav-item .nav-link.active,
  508. body.dark-layout .nav-tabs.nav-justified .nav-item .nav-link.active,
  509. body.dark-layout .nav .nav-item .nav-link.active {
  510. background-color: #10163a;
  511. }
  512. body.dark-layout .nav-tabs .nav-item .nav-link.disabled,
  513. body.dark-layout .nav-tabs.nav-justified .nav-item .nav-link.disabled,
  514. body.dark-layout .nav .nav-item .nav-link.disabled {
  515. opacity: 0.5;
  516. }
  517. body.dark-layout .nav-tabs ~ .tab-content .tab-pane,
  518. body.dark-layout .nav-tabs.nav-justified ~ .tab-content .tab-pane,
  519. body.dark-layout .nav ~ .tab-content .tab-pane {
  520. background-color: #10163a;
  521. }
  522. body.dark-layout .nav-vertical .nav.nav-tabs.nav-left ~ .tab-content .tab-pane,
  523. body.dark-layout .nav-vertical .nav.nav-tabs.nav-right ~ .tab-content .tab-pane {
  524. background-color: #10163a;
  525. }
  526. body.dark-layout .nav-pills .nav-item .nav-link.active {
  527. color: #fff;
  528. background-color: #5c6bc6;
  529. }
  530. body.dark-layout .nav-pills.nav-active-bordered-pill .nav-item .nav-link.active {
  531. background-color: transparent;
  532. }
  533. body.dark-layout .card {
  534. background-color: #10163a;
  535. }
  536. body.dark-layout .card .card-header,
  537. body.dark-layout .card .card-footer {
  538. color: #c2c6dc;
  539. background-color: #10163a;
  540. }
  541. body.dark-layout .card .card-header .heading-elements.visible ul li {
  542. background-color: #10163a;
  543. }
  544. body.dark-layout .card .heading-elements.visible .list-inline {
  545. background-color: #10163a;
  546. }
  547. body.dark-layout .card .card-body,
  548. body.dark-layout .card .card-footer {
  549. color: #c2c6dc;
  550. border-color: #414561;
  551. }
  552. body.dark-layout .card.overlay-img-card .card-img-overlay span,
  553. body.dark-layout .card.overlay-img-card .card-img-overlay p {
  554. color: #fff;
  555. }
  556. body.dark-layout .media-bordered .media {
  557. border-color: #414561;
  558. }
  559. body.dark-layout .activity-timeline {
  560. border-color: #414561;
  561. }
  562. body.dark-layout #dashboard-analytics .bg-analytics {
  563. background: linear-gradient(118deg, #5c6bc6, rgba(92, 107, 198, 0.7));
  564. }
  565. body.dark-layout #dashboard-analytics .bg-analytics p {
  566. color: #fff;
  567. }
  568. body.dark-layout #dashboard-analytics .bg-analytics .card-body {
  569. background-color: transparent;
  570. }
  571. body.dark-layout #dashboard-ecommerce .chat-application .chat-app-window .user-chats .chats .chat-body .chat-content p,
  572. body.dark-layout #overlay-image-chat-cards .chat-application .chat-app-window .user-chats .chats .chat-body .chat-content p {
  573. color: #fff;
  574. }
  575. body.dark-layout #dashboard-ecommerce .chat-application .chat-app-window .user-chats .chats .chat-left .chat-content,
  576. body.dark-layout #overlay-image-chat-cards .chat-application .chat-app-window .user-chats .chats .chat-left .chat-content {
  577. background-color: #171e49;
  578. border: 1px solid #414561;
  579. }
  580. body.dark-layout #dashboard-ecommerce .chat-application .chat-app-window .user-chats .chats .chat-left .chat-content p,
  581. body.dark-layout #overlay-image-chat-cards .chat-application .chat-app-window .user-chats .chats .chat-left .chat-content p {
  582. color: #c2c6dc;
  583. }
  584. body.dark-layout #dashboard-ecommerce .chat-application .chat-app-window .chat-footer,
  585. body.dark-layout #overlay-image-chat-cards .chat-application .chat-app-window .chat-footer {
  586. border-top: 1px solid #414561;
  587. }
  588. body.dark-layout #dashboard-ecommerce .chat-application .chat-app-window .chat-footer .card-body,
  589. body.dark-layout #overlay-image-chat-cards .chat-application .chat-app-window .chat-footer .card-body {
  590. padding-top: 1.5rem !important;
  591. }
  592. body.dark-layout .badge {
  593. color: #fff;
  594. }
  595. body.dark-layout .badge span {
  596. color: #fff;
  597. }
  598. body.dark-layout .badge:hover i {
  599. color: #fff;
  600. }
  601. body.dark-layout .popover[x-placement=top] .arrow:after {
  602. border-top-color: #262c49;
  603. }
  604. body.dark-layout .popover[x-placement=bottom] .arrow:after {
  605. border-bottom-color: #5c6bc6;
  606. }
  607. body.dark-layout .popover[x-placement=left] .arrow:after {
  608. border-left-color: #262c49;
  609. }
  610. body.dark-layout .popover[x-placement=right] .arrow:after {
  611. border-right-color: #262c49;
  612. }
  613. body.dark-layout .popover .popover-body {
  614. background-color: #262c49;
  615. color: #c2c6dc;
  616. }
  617. body.dark-layout .toast {
  618. background-color: #262c49;
  619. box-shadow: -5px 5px 5px 0px rgba(0, 0, 0, 0.3);
  620. }
  621. body.dark-layout .toast .toast-header {
  622. background-color: #262c49;
  623. color: #c2c6dc;
  624. border-color: #414561;
  625. }
  626. body.dark-layout .toast .toast-header .close {
  627. text-shadow: none;
  628. opacity: 1;
  629. }
  630. body.dark-layout .toast .toast-body {
  631. background-color: #262c49;
  632. color: #c2c6dc;
  633. }
  634. body.dark-layout .avatar {
  635. background-color: #262c49;
  636. }
  637. body.dark-layout .avatar .avatar-content {
  638. color: #fff;
  639. }
  640. body.dark-layout .chip {
  641. background-color: #262c49;
  642. }
  643. body.dark-layout .chip .avatar {
  644. background-color: #10163a;
  645. }
  646. body.dark-layout .chip .chip-body .chip-text,
  647. body.dark-layout .chip .chip-body span {
  648. color: #fff;
  649. }
  650. body.dark-layout .divider .divider-text {
  651. background-color: transparent;
  652. color: #c2c6dc;
  653. }
  654. body.dark-layout .divider .divider-text::before,
  655. body.dark-layout .divider .divider-text::after {
  656. border-color: #414561;
  657. }
  658. body.dark-layout .divider.divider-dark .divider-text::before,
  659. body.dark-layout .divider.divider-dark .divider-text::after {
  660. border-color: #4e5154 !important;
  661. }
  662. body.dark-layout .list-group .list-group-item:not([class*=list-group-item-]),
  663. body.dark-layout .list-group .list-group-item.list-group-item-action {
  664. background-color: #10163a;
  665. border-color: #414561;
  666. color: #c2c6dc;
  667. }
  668. body.dark-layout .list-group .list-group-item:not([class*=list-group-item-]):hover,
  669. body.dark-layout .list-group .list-group-item.list-group-item-action:hover {
  670. background-color: #262c49;
  671. }
  672. body.dark-layout .list-group .list-group-item.active {
  673. background-color: #5c6bc6;
  674. color: #fff;
  675. }
  676. body.dark-layout .list-group .list-group-item.active:hover {
  677. background-color: #5c6bc6;
  678. }
  679. body.dark-layout .list-group .list-group-item.active p,
  680. body.dark-layout .list-group .list-group-item.active small {
  681. color: #fff;
  682. }
  683. body.dark-layout .list-group .list-group-item.disabled {
  684. background-color: #262c49;
  685. }
  686. body.dark-layout .spinner-border {
  687. border-color: currentColor !important;
  688. border-right-color: transparent !important;
  689. }
  690. body.dark-layout input.form-control,
  691. body.dark-layout .custom-file-label,
  692. body.dark-layout textarea.form-control {
  693. background-color: #262c49;
  694. color: #c2c6dc;
  695. }
  696. body.dark-layout input.form-control:not(:focus),
  697. body.dark-layout .custom-file-label:not(:focus),
  698. body.dark-layout textarea.form-control:not(:focus) {
  699. border: 0;
  700. }
  701. body.dark-layout input.form-control::-webkit-input-placeholder, body.dark-layout .custom-file-label::-webkit-input-placeholder, body.dark-layout textarea.form-control::-webkit-input-placeholder {
  702. color: #c2c6dc;
  703. }
  704. body.dark-layout input.form-control::-moz-placeholder, body.dark-layout .custom-file-label::-moz-placeholder, body.dark-layout textarea.form-control::-moz-placeholder {
  705. color: #c2c6dc;
  706. }
  707. body.dark-layout input.form-control:-ms-input-placeholder, body.dark-layout .custom-file-label:-ms-input-placeholder, body.dark-layout textarea.form-control:-ms-input-placeholder {
  708. color: #c2c6dc;
  709. }
  710. body.dark-layout input.form-control::-ms-input-placeholder, body.dark-layout .custom-file-label::-ms-input-placeholder, body.dark-layout textarea.form-control::-ms-input-placeholder {
  711. color: #c2c6dc;
  712. }
  713. body.dark-layout input.form-control::placeholder,
  714. body.dark-layout .custom-file-label::placeholder,
  715. body.dark-layout textarea.form-control::placeholder {
  716. color: #c2c6dc;
  717. }
  718. body.dark-layout input.form-control ~ .form-control-position i,
  719. body.dark-layout .custom-file-label ~ .form-control-position i,
  720. body.dark-layout textarea.form-control ~ .form-control-position i {
  721. color: #c2c6dc;
  722. }
  723. body.dark-layout input.form-control:focus ~ .form-control-position i,
  724. body.dark-layout .custom-file-label:focus ~ .form-control-position i,
  725. body.dark-layout textarea.form-control:focus ~ .form-control-position i {
  726. color: #5c6bc6;
  727. }
  728. body.dark-layout input.form-control:disabled,
  729. body.dark-layout input.form-control[readonly=readonly],
  730. body.dark-layout .custom-file-label:disabled,
  731. body.dark-layout .custom-file-label[readonly=readonly],
  732. body.dark-layout textarea.form-control:disabled,
  733. body.dark-layout textarea.form-control[readonly=readonly] {
  734. opacity: 0.5;
  735. }
  736. body.dark-layout .char-textarea.active {
  737. color: #c2c6dc !important;
  738. }
  739. body.dark-layout .char-textarea.max-limit {
  740. color: #ea5455 !important;
  741. }
  742. body.dark-layout .custom-file-label:after {
  743. background-color: #262c49;
  744. border-left: 1px solid #414561;
  745. color: #c2c6dc;
  746. }
  747. body.dark-layout .has-icon-left.input-divider-left .form-control-position i {
  748. border-right-color: #414561;
  749. }
  750. body.dark-layout .has-icon-left.input-divider-right .form-control-position i {
  751. border-left-color: #414561;
  752. }
  753. body.dark-layout .bootstrap-touchspin .form-control {
  754. background-color: #262c49;
  755. }
  756. body.dark-layout .bootstrap-touchspin.disabled-touchspin .bootstrap-touchspin-injected .bootstrap-touchspin-down,
  757. body.dark-layout .bootstrap-touchspin.disabled-touchspin .bootstrap-touchspin-injected .bootstrap-touchspin-up,
  758. body.dark-layout .bootstrap-touchspin.disabled-touchspin .bootstrap-touchspin-injected .disabled-max-min {
  759. background-color: #b8c2cc !important;
  760. opacity: 1;
  761. }
  762. body.dark-layout .bootstrap-touchspin .bootstrap-touchspin-injected .disabled-max-min {
  763. background-color: #b8c2cc !important;
  764. opacity: 1;
  765. }
  766. body.dark-layout select.form-control,
  767. body.dark-layout .custom-select {
  768. background-color: #262c49;
  769. color: #c2c6dc;
  770. border: 0;
  771. }
  772. body.dark-layout select.form-control option:checked,
  773. body.dark-layout .custom-select option:checked {
  774. background-color: #10163a;
  775. }
  776. body.dark-layout .select2-container .select2-selection {
  777. background: #262c49;
  778. }
  779. body.dark-layout .select2-container .select2-selection .select2-selection__rendered {
  780. color: #c2c6dc;
  781. }
  782. body.dark-layout .select2-container .select2-selection .select2-selection__rendered .select2-search__field {
  783. color: #fff;
  784. }
  785. body.dark-layout .select2-container .select2-selection .select2-selection__arrow b {
  786. border-top-color: #414561;
  787. }
  788. body.dark-layout .select2-container .select2-dropdown {
  789. background-color: #10163a;
  790. }
  791. body.dark-layout .select2-container .select2-dropdown .select2-search__field {
  792. background-color: #262c49;
  793. color: #c2c6dc;
  794. }
  795. body.dark-layout .select2-container .select2-dropdown.bg-info .select2-results__options .select2-results__option {
  796. color: #fff;
  797. }
  798. body.dark-layout .select2-container .select2-dropdown .select2-results .select2-results__options .select2-results__option[aria-selected=true] {
  799. background-color: #5c6bc6;
  800. }
  801. body.dark-layout .select2-container.select2-container--classic .selection .select2-selection__arrow {
  802. background-image: none;
  803. background-color: #262c49;
  804. border-color: rgba(255, 255, 255, 0.1);
  805. }
  806. body.dark-layout .custom-switch .custom-control-input[disabled] ~ .custom-control-label {
  807. opacity: 0.5;
  808. }
  809. body.dark-layout .custom-switch .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
  810. background-color: #5c6bc6;
  811. }
  812. body.dark-layout .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  813. background-color: #5c6bc6;
  814. }
  815. body.dark-layout .custom-switch .custom-control-label:before {
  816. background-color: #262c49;
  817. }
  818. body.dark-layout .picker__input {
  819. background-color: #262c49 !important;
  820. }
  821. body.dark-layout .picker__holder {
  822. background-color: #262c49;
  823. }
  824. body.dark-layout .picker__holder .picker__header .picker__month,
  825. body.dark-layout .picker__holder .picker__header .picker__year {
  826. color: #c2c6dc;
  827. }
  828. body.dark-layout .picker__holder .picker__header .picker__select--year,
  829. body.dark-layout .picker__holder .picker__header .picker__select--month {
  830. color: #c2c6dc;
  831. background-color: #262c49;
  832. }
  833. body.dark-layout .picker__holder .picker__header .picker__nav--next:hover,
  834. body.dark-layout .picker__holder .picker__header .picker__nav--prev:hover {
  835. background-color: #10163a;
  836. }
  837. body.dark-layout .picker__holder .picker__table thead tr .picker__weekday {
  838. color: #c2c6dc;
  839. }
  840. body.dark-layout .picker__holder .picker__table tbody tr td .picker__day {
  841. color: #c2c6dc;
  842. }
  843. body.dark-layout .picker__holder .picker__table tbody tr td .picker__day:hover {
  844. background-color: transparent;
  845. border: 1px solid #4ec6e8;
  846. color: #c2c6dc;
  847. }
  848. body.dark-layout .picker__holder .picker__table tbody tr td .picker__day.picker__day--disabled {
  849. color: #c2c6dc;
  850. opacity: 0.5;
  851. background: #10163a;
  852. }
  853. body.dark-layout .picker__holder .picker__table tbody tr td .picker__day--today {
  854. background-color: #10163a;
  855. }
  856. body.dark-layout .picker__holder .picker__footer .picker__button--today,
  857. body.dark-layout .picker__holder .picker__footer .picker__button--clear,
  858. body.dark-layout .picker__holder .picker__footer .picker__button--close {
  859. background-color: #262c49;
  860. color: #c2c6dc;
  861. }
  862. body.dark-layout .picker--time .picker__holder .picker__list {
  863. background-color: #262c49;
  864. }
  865. body.dark-layout .picker--time .picker__holder .picker__list .picker__list-item.picker__list-item--selected,
  866. body.dark-layout .picker--time .picker__holder .picker__list .picker__list-item:hover {
  867. background-color: #10163a;
  868. }
  869. body.dark-layout .picker--time .picker__holder .picker__list .picker__list-item.picker__list-item--disabled {
  870. background-color: #10163a;
  871. color: #b8c2cc;
  872. opacity: 0.5;
  873. }
  874. body.dark-layout .picker--time .picker__holder .picker__list .picker__button--clear {
  875. background-color: #262c49;
  876. color: #c2c6dc;
  877. }
  878. body.dark-layout .custom-control-label::before {
  879. background-color: #414561;
  880. }
  881. body.dark-layout .custom-control-input:disabled ~ .custom-control-label::before {
  882. background-color: rgba(65, 69, 97, 0.5);
  883. border-color: #414561;
  884. }
  885. body.dark-layout .wizard .steps ul .disabled a,
  886. body.dark-layout .wizard .steps ul .done a {
  887. color: #c2c6dc !important;
  888. }
  889. body.dark-layout .wizard .steps ul .disabled a:hover,
  890. body.dark-layout .wizard .steps ul .done a:hover {
  891. color: #c2c6dc;
  892. }
  893. body.dark-layout .wizard .steps ul .disabled a .step,
  894. body.dark-layout .wizard .steps ul .done a .step {
  895. background-color: #262c49;
  896. color: #fff;
  897. }
  898. body.dark-layout .input-group .input-group-prepend .input-group-text,
  899. body.dark-layout .input-group .input-group-append .input-group-text {
  900. background-color: #10163a;
  901. border: 1px solid #414561;
  902. }
  903. body.dark-layout .input-group .input-group-prepend ~ .form-control {
  904. border-left: 1px solid #414561;
  905. }
  906. body.dark-layout .input-group .form-control ~ .input-group-append {
  907. border-left: 1px solid #414561;
  908. }
  909. body.dark-layout .form-label-group > input:not(:focus):not(:placeholder-shown) ~ label,
  910. body.dark-layout .form-label-group > textarea:not(:focus):not(:placeholder-shown) ~ label {
  911. color: #c2c6dc !important;
  912. }
  913. body.dark-layout .table {
  914. background-color: #212744;
  915. }
  916. body.dark-layout .table .thead tr:not([class*=table-]) th,
  917. body.dark-layout .table .thead tr:not([class*=table-]) td,
  918. body.dark-layout .table tbody tr:not([class*=table-]) th,
  919. body.dark-layout .table tbody tr:not([class*=table-]) td {
  920. border: 0;
  921. color: #c2c6dc;
  922. }
  923. body.dark-layout .table .thead tr:not([class*=table-]) th code,
  924. body.dark-layout .table .thead tr:not([class*=table-]) td code,
  925. body.dark-layout .table tbody tr:not([class*=table-]) th code,
  926. body.dark-layout .table tbody tr:not([class*=table-]) td code {
  927. background-color: #10163a;
  928. }
  929. body.dark-layout .table thead tr th {
  930. border: 0;
  931. background-color: #212744;
  932. color: #c2c6dc;
  933. }
  934. body.dark-layout .table tbody tr[class*=table-] td,
  935. body.dark-layout .table tbody tr[class*=table-] th {
  936. background-color: unset;
  937. color: #22292f;
  938. border-color: #414561;
  939. }
  940. body.dark-layout .table tbody tr.table-dark td,
  941. body.dark-layout .table tbody tr.table-dark th {
  942. color: #fff;
  943. }
  944. body.dark-layout .table tbody tr.table-active td,
  945. body.dark-layout .table tbody tr.table-active th {
  946. color: #c2c6dc;
  947. }
  948. body.dark-layout .table tbody tr th {
  949. background-color: #262c49;
  950. }
  951. body.dark-layout .table tbody tr td {
  952. background-color: #262c49;
  953. color: #c2c6dc;
  954. }
  955. body.dark-layout .table.table-bordered {
  956. border: 1px solid #414561;
  957. }
  958. body.dark-layout .table.table-bordered thead tr th,
  959. body.dark-layout .table.table-bordered thead tr td,
  960. body.dark-layout .table.table-bordered tbody tr th,
  961. body.dark-layout .table.table-bordered tbody tr td {
  962. border: 1px solid #414561;
  963. }
  964. body.dark-layout .table.table-hover tbody tr:hover {
  965. background-color: #10163a;
  966. }
  967. body.dark-layout .table.table-hover tbody tr th,
  968. body.dark-layout .table.table-hover tbody tr td {
  969. background-color: unset;
  970. }
  971. body.dark-layout .table.table-striped tbody tr:nth-of-type(odd) {
  972. background-color: #10163a;
  973. }
  974. body.dark-layout .table.table-striped tbody tr td,
  975. body.dark-layout .table.table-striped tbody tr th {
  976. background-color: unset;
  977. }
  978. body.dark-layout .table.table-mx-0 {
  979. background-color: #10163a;
  980. }
  981. body.dark-layout .table.table-mx-0 thead tr th,
  982. body.dark-layout .table.table-mx-0 thead tr td,
  983. body.dark-layout .table.table-mx-0 tbody tr th,
  984. body.dark-layout .table.table-mx-0 tbody tr td {
  985. background-color: #10163a;
  986. }
  987. body.dark-layout .dataTables_wrapper .dt-buttons .buttons-copy,
  988. body.dark-layout .dataTables_wrapper .dt-buttons .buttons-excel,
  989. body.dark-layout .dataTables_wrapper .dt-buttons .buttons-pdf,
  990. body.dark-layout .dataTables_wrapper .dt-buttons .buttons-print,
  991. body.dark-layout .dataTables_wrapper .dt-buttons .btn-secondary {
  992. background-color: #262c49 !important;
  993. }
  994. body.dark-layout .dataTables_wrapper .table.dataTable {
  995. border: 0;
  996. }
  997. body.dark-layout .dataTables_wrapper .table.dataTable tbody td,
  998. body.dark-layout .dataTables_wrapper .table.dataTable tbody th,
  999. body.dark-layout .dataTables_wrapper .table.dataTable thead td,
  1000. body.dark-layout .dataTables_wrapper .table.dataTable thead th {
  1001. border: 0;
  1002. color: #c2c6dc;
  1003. }
  1004. body.dark-layout .dataTables_wrapper .table.dataTable tfoot tr th {
  1005. color: #c2c6dc;
  1006. }
  1007. body.dark-layout .dataTables_wrapper .table.dataTable tr.group td {
  1008. background-color: #212744;
  1009. color: #fff;
  1010. }
  1011. body.dark-layout .dataTables_wrapper .table.dataTable.complex-headers tbody tr:nth-of-type(even),
  1012. body.dark-layout .dataTables_wrapper .table.dataTable.table-striped tbody tr:nth-of-type(even) {
  1013. background-color: #262c49;
  1014. }
  1015. body.dark-layout .dataTables_wrapper .table.dataTable.complex-headers tfoot tr th,
  1016. body.dark-layout .dataTables_wrapper .table.dataTable.table-striped tfoot tr th {
  1017. border: 0;
  1018. }
  1019. body.dark-layout .dataTables_wrapper .table.dataTable.complex-headers {
  1020. border: 1px solid #414561;
  1021. }
  1022. body.dark-layout .dataTables_wrapper .table.dataTable.complex-headers thead th,
  1023. body.dark-layout .dataTables_wrapper .table.dataTable.complex-headers thead td,
  1024. body.dark-layout .dataTables_wrapper .table.dataTable.complex-headers tfoot th,
  1025. body.dark-layout .dataTables_wrapper .table.dataTable.complex-headers tfoot td {
  1026. border-bottom: 1px solid #414561;
  1027. border-right: 1px solid #414561;
  1028. }
  1029. body.dark-layout .dt-button-info {
  1030. background-color: #262c49;
  1031. }
  1032. body.dark-layout .dt-button-info h2 {
  1033. background-color: #262c49;
  1034. }
  1035. body.dark-layout .dt-button-info div {
  1036. color: #c2c6dc;
  1037. }
  1038. body.dark-layout .ag-grid-btns .filter-btn {
  1039. background-color: transparent !important;
  1040. }
  1041. body.dark-layout .ag-grid-btns .filter-btn:focus {
  1042. color: #c2c6dc !important;
  1043. }
  1044. body.dark-layout .ag-grid-btns .filter-btn:hover {
  1045. box-shadow: none;
  1046. color: #c2c6dc !important;
  1047. }
  1048. body.dark-layout .aggrid,
  1049. body.dark-layout .ag-header {
  1050. background-color: #10163a;
  1051. color: #c2c6dc;
  1052. border-color: #414561;
  1053. }
  1054. body.dark-layout .aggrid .ag-row-hover,
  1055. body.dark-layout .aggrid .ag-row-selected,
  1056. body.dark-layout .ag-header .ag-row-hover,
  1057. body.dark-layout .ag-header .ag-row-selected {
  1058. background-color: #262c49 !important;
  1059. }
  1060. body.dark-layout .aggrid .ag-icon,
  1061. body.dark-layout .ag-header .ag-icon {
  1062. color: #c2c6dc;
  1063. }
  1064. body.dark-layout .aggrid .ag-icon.ag-icon-checkbox-checked,
  1065. body.dark-layout .aggrid .ag-icon.ag-icon-checkbox-indeterminate,
  1066. body.dark-layout .ag-header .ag-icon.ag-icon-checkbox-checked,
  1067. body.dark-layout .ag-header .ag-icon.ag-icon-checkbox-indeterminate {
  1068. color: #5c6bc6;
  1069. }
  1070. body.dark-layout .aggrid .ag-header-cell,
  1071. body.dark-layout .aggrid .ag-cell,
  1072. body.dark-layout .aggrid .ag-row,
  1073. body.dark-layout .aggrid .ag-pinned-left-header,
  1074. body.dark-layout .aggrid .ag-pinned-left-cols-container,
  1075. body.dark-layout .aggrid .ag-horizontal-left-spacer,
  1076. body.dark-layout .aggrid .ag-paging-panel,
  1077. body.dark-layout .aggrid .ag-floating-filter-input,
  1078. body.dark-layout .ag-header .ag-header-cell,
  1079. body.dark-layout .ag-header .ag-cell,
  1080. body.dark-layout .ag-header .ag-row,
  1081. body.dark-layout .ag-header .ag-pinned-left-header,
  1082. body.dark-layout .ag-header .ag-pinned-left-cols-container,
  1083. body.dark-layout .ag-header .ag-horizontal-left-spacer,
  1084. body.dark-layout .ag-header .ag-paging-panel,
  1085. body.dark-layout .ag-header .ag-floating-filter-input {
  1086. border-color: #414561 !important;
  1087. color: #c2c6dc;
  1088. }
  1089. body.dark-layout .aggrid .ag-popup .ag-menu,
  1090. body.dark-layout .ag-header .ag-popup .ag-menu {
  1091. background-color: #262c49;
  1092. }
  1093. body.dark-layout .aggrid .ag-popup .ag-menu .ag-filter-filter,
  1094. body.dark-layout .aggrid .ag-popup .ag-menu .ag-filter-select,
  1095. body.dark-layout .ag-header .ag-popup .ag-menu .ag-filter-filter,
  1096. body.dark-layout .ag-header .ag-popup .ag-menu .ag-filter-select {
  1097. background-color: transparent;
  1098. border-color: #414561;
  1099. color: #c2c6dc;
  1100. }
  1101. body.dark-layout .aggrid .ag-popup .ag-menu .ag-filter-filter::-webkit-input-placeholder, body.dark-layout .aggrid .ag-popup .ag-menu .ag-filter-select::-webkit-input-placeholder, body.dark-layout .ag-header .ag-popup .ag-menu .ag-filter-filter::-webkit-input-placeholder, body.dark-layout .ag-header .ag-popup .ag-menu .ag-filter-select::-webkit-input-placeholder {
  1102. color: #c2c6dc;
  1103. }
  1104. body.dark-layout .aggrid .ag-popup .ag-menu .ag-filter-filter::-moz-placeholder, body.dark-layout .aggrid .ag-popup .ag-menu .ag-filter-select::-moz-placeholder, body.dark-layout .ag-header .ag-popup .ag-menu .ag-filter-filter::-moz-placeholder, body.dark-layout .ag-header .ag-popup .ag-menu .ag-filter-select::-moz-placeholder {
  1105. color: #c2c6dc;
  1106. }
  1107. body.dark-layout .aggrid .ag-popup .ag-menu .ag-filter-filter:-ms-input-placeholder, body.dark-layout .aggrid .ag-popup .ag-menu .ag-filter-select:-ms-input-placeholder, body.dark-layout .ag-header .ag-popup .ag-menu .ag-filter-filter:-ms-input-placeholder, body.dark-layout .ag-header .ag-popup .ag-menu .ag-filter-select:-ms-input-placeholder {
  1108. color: #c2c6dc;
  1109. }
  1110. body.dark-layout .aggrid .ag-popup .ag-menu .ag-filter-filter::-ms-input-placeholder, body.dark-layout .aggrid .ag-popup .ag-menu .ag-filter-select::-ms-input-placeholder, body.dark-layout .ag-header .ag-popup .ag-menu .ag-filter-filter::-ms-input-placeholder, body.dark-layout .ag-header .ag-popup .ag-menu .ag-filter-select::-ms-input-placeholder {
  1111. color: #c2c6dc;
  1112. }
  1113. body.dark-layout .aggrid .ag-popup .ag-menu .ag-filter-filter::placeholder,
  1114. body.dark-layout .aggrid .ag-popup .ag-menu .ag-filter-select::placeholder,
  1115. body.dark-layout .ag-header .ag-popup .ag-menu .ag-filter-filter::placeholder,
  1116. body.dark-layout .ag-header .ag-popup .ag-menu .ag-filter-select::placeholder {
  1117. color: #c2c6dc;
  1118. }
  1119. body.dark-layout .aggrid .ag-popup .ag-menu .ag-filter-select option,
  1120. body.dark-layout .ag-header .ag-popup .ag-menu .ag-filter-select option {
  1121. background-color: #262c49;
  1122. }
  1123. body.dark-layout .aggrid .ag-paging-panel .ag-disabled,
  1124. body.dark-layout .ag-header .ag-paging-panel .ag-disabled {
  1125. background-color: #373f6d;
  1126. }
  1127. body.dark-layout .aggrid .ag-paging-panel .ag-disabled .ag-icon,
  1128. body.dark-layout .ag-header .ag-paging-panel .ag-disabled .ag-icon {
  1129. color: #c2c6dc !important;
  1130. }
  1131. body.dark-layout .aggrid .ag-paging-panel span[ref=lbTotal],
  1132. body.dark-layout .ag-header .ag-paging-panel span[ref=lbTotal] {
  1133. background-color: #373f6d;
  1134. color: #c2c6dc !important;
  1135. }
  1136. body.dark-layout .aggrid ::-webkit-scrollbar-track,
  1137. body.dark-layout .ag-header ::-webkit-scrollbar-track {
  1138. background: #262c49;
  1139. }
  1140. body.dark-layout .aggrid ::-webkit-scrollbar-thumb,
  1141. body.dark-layout .ag-header ::-webkit-scrollbar-thumb {
  1142. background: #5c6bc6;
  1143. }
  1144. body.dark-layout .bg-authentication {
  1145. background-color: #eff2f7;
  1146. }
  1147. body.dark-layout .bg-authentication .form-group.row,
  1148. body.dark-layout .bg-authentication .card-footer {
  1149. background-color: #10163a;
  1150. }
  1151. body.dark-layout .bg-authentication .form-group.row .btn-facebook span,
  1152. body.dark-layout .bg-authentication .form-group.row .btn-twitter span,
  1153. body.dark-layout .bg-authentication .card-footer .btn-facebook span,
  1154. body.dark-layout .bg-authentication .card-footer .btn-twitter span {
  1155. color: #fff;
  1156. }
  1157. body.dark-layout .getting-started .clockCard p {
  1158. color: #c2c6dc !important;
  1159. }
  1160. body.dark-layout #user-profile .profile-header .profile-header-nav {
  1161. background-color: #10163a;
  1162. }
  1163. body.dark-layout #search-website .search-bar .form-control {
  1164. background-color: #10163a;
  1165. }
  1166. body.dark-layout #search-website .search-menu .search-filter {
  1167. background-color: #10163a;
  1168. color: #c2c6dc;
  1169. }
  1170. body.dark-layout #search-website .search-result-info .dropdown-toggle {
  1171. color: #c2c6dc;
  1172. }
  1173. body.dark-layout #search-website .search-pagination .pagination .page-item {
  1174. background-color: #10163a;
  1175. }
  1176. body.dark-layout #search-website .search-pagination .pagination .page-item.active .page-link {
  1177. background-color: #5c6bc6;
  1178. }
  1179. body.dark-layout #search-website .search-pagination .pagination .page-item .page-link {
  1180. background-color: #10163a;
  1181. }
  1182. body.dark-layout .faq .accordion .collapse-margin {
  1183. background-color: #10163a;
  1184. }
  1185. body.dark-layout .faq .accordion .collapse-title {
  1186. color: #ebeefd;
  1187. }
  1188. body.dark-layout .faq-bg .card-body .card-text,
  1189. body.dark-layout .knowledge-base-bg .card-body .card-text {
  1190. color: #fff;
  1191. }
  1192. body.dark-layout .search-content .card .card-body .text-dark {
  1193. color: #c2c6dc !important;
  1194. }
  1195. body.dark-layout .knowledge-base-category .list-group .list-group-item,
  1196. body.dark-layout .knowledge-base-question .list-group .list-group-item {
  1197. color: #5c6bc6;
  1198. }
  1199. body.dark-layout .invoice-items-table .table-borderless,
  1200. body.dark-layout .invoice-total-table .table-borderless {
  1201. border: 0;
  1202. }
  1203. body.dark-layout .invoice-print .form-control {
  1204. background-color: #10163a;
  1205. }
  1206. body.dark-layout .apexcharts-canvas .apexcharts-gridlines-horizontal .apexcharts-gridline {
  1207. stroke: #414561;
  1208. }
  1209. body.dark-layout .apexcharts-canvas .apexcharts-tooltip.light,
  1210. body.dark-layout .apexcharts-canvas .apexcharts-yaxistooltip,
  1211. body.dark-layout .apexcharts-canvas .apexcharts-xaxistooltip {
  1212. background-color: #212744;
  1213. border-color: #262c49;
  1214. }
  1215. body.dark-layout .apexcharts-canvas .apexcharts-tooltip.light .apexcharts-tooltip-title,
  1216. body.dark-layout .apexcharts-canvas .apexcharts-tooltip.light .apexcharts-tooltip-text,
  1217. body.dark-layout .apexcharts-canvas .apexcharts-yaxistooltip .apexcharts-tooltip-title,
  1218. body.dark-layout .apexcharts-canvas .apexcharts-yaxistooltip .apexcharts-tooltip-text,
  1219. body.dark-layout .apexcharts-canvas .apexcharts-xaxistooltip .apexcharts-tooltip-title,
  1220. body.dark-layout .apexcharts-canvas .apexcharts-xaxistooltip .apexcharts-tooltip-text {
  1221. background-color: #212744;
  1222. color: #c2c6dc;
  1223. }
  1224. body.dark-layout .apexcharts-canvas .apexcharts-tooltip.dark .apexcharts-tooltip-text .apexcharts-tooltip-text-label,
  1225. body.dark-layout .apexcharts-canvas .apexcharts-tooltip.dark .apexcharts-tooltip-text .apexcharts-tooltip-text-value {
  1226. color: #fff;
  1227. }
  1228. body.dark-layout .apexcharts-canvas .apexcharts-xaxistooltip-bottom:before {
  1229. border-bottom-color: transparent;
  1230. }
  1231. body.dark-layout .apexcharts-canvas .apexcharts-xaxistooltip-bottom:after {
  1232. border-bottom-color: #262c49;
  1233. }
  1234. body.dark-layout .apexcharts-canvas .apexcharts-yaxistooltip-left:before {
  1235. border-left-color: transparent;
  1236. }
  1237. body.dark-layout .apexcharts-canvas .apexcharts-yaxistooltip-left:after {
  1238. border-left-color: #262c49;
  1239. }
  1240. body.dark-layout .apexcharts-canvas text {
  1241. fill: #fff !important;
  1242. }
  1243. body.dark-layout .apexcharts-canvas .apexcharts-legend-series .apexcharts-legend-text {
  1244. color: #c2c6dc !important;
  1245. }
  1246. body.dark-layout .apexcharts-canvas .apexcharts-radialbar-track path {
  1247. stroke: #262c49;
  1248. }
  1249. body.dark-layout .apexcharts-canvas .apexcharts-inner polygon {
  1250. stroke: #212744 !important;
  1251. fill: #262c49 !important;
  1252. }
  1253. body.dark-layout .apexcharts-canvas .apexcharts-pie-series path {
  1254. stroke: #262c49;
  1255. }
  1256. body.dark-layout .apexcharts-canvas .apexcharts-menu {
  1257. background-color: #262c49;
  1258. border: 0;
  1259. }
  1260. body.dark-layout .apexcharts-canvas .apexcharts-toolbar .apexcharts-zoom-in-icon:hover svg,
  1261. body.dark-layout .apexcharts-canvas .apexcharts-toolbar .apexcharts-zoom-out-icon:hover svg,
  1262. body.dark-layout .apexcharts-canvas .apexcharts-toolbar .apexcharts-zoom-icon:hover svg,
  1263. body.dark-layout .apexcharts-canvas .apexcharts-toolbar .apexcharts-menu-icon:hover svg,
  1264. body.dark-layout .apexcharts-canvas .apexcharts-toolbar .apexcharts-reset-zoom-icon:hover svg {
  1265. fill: #c2c6dc;
  1266. }
  1267. body.dark-layout.email-application .app-content .content-area-wrapper {
  1268. border-color: #414561;
  1269. }
  1270. body.dark-layout.email-application .app-content .content-area-wrapper .email-app-sidebar {
  1271. background-color: #262c49;
  1272. }
  1273. body.dark-layout.email-application .app-content .content-area-wrapper .app-fixed-search {
  1274. background-color: #10163a;
  1275. border-color: #414561;
  1276. }
  1277. body.dark-layout.email-application .app-content .content-area-wrapper .app-fixed-search .form-control {
  1278. color: #c2c6dc;
  1279. }
  1280. body.dark-layout.email-application .app-content .content-area-wrapper .app-fixed-search .form-control::-webkit-input-placeholder {
  1281. color: #c2c6dc;
  1282. }
  1283. body.dark-layout.email-application .app-content .content-area-wrapper .app-fixed-search .form-control::-moz-placeholder {
  1284. color: #c2c6dc;
  1285. }
  1286. body.dark-layout.email-application .app-content .content-area-wrapper .app-fixed-search .form-control:-ms-input-placeholder {
  1287. color: #c2c6dc;
  1288. }
  1289. body.dark-layout.email-application .app-content .content-area-wrapper .app-fixed-search .form-control::-ms-input-placeholder {
  1290. color: #c2c6dc;
  1291. }
  1292. body.dark-layout.email-application .app-content .content-area-wrapper .app-fixed-search .form-control::placeholder {
  1293. color: #c2c6dc;
  1294. }
  1295. body.dark-layout.email-application .app-content .content-area-wrapper .app-fixed-search .form-control:focus ~ .form-control-position i {
  1296. color: #5c6bc6;
  1297. }
  1298. body.dark-layout.email-application .app-content .content-area-wrapper .app-fixed-search .form-control-position i {
  1299. color: #c2c6dc;
  1300. }
  1301. body.dark-layout.email-application .app-content .content-area-wrapper .email-app-list-wrapper {
  1302. border-color: #414561;
  1303. }
  1304. body.dark-layout.email-application .app-content .content-area-wrapper .email-app-list-wrapper .app-action {
  1305. border-color: #414561;
  1306. }
  1307. body.dark-layout.email-application .app-content .content-area-wrapper .email-app-menu .sidebar-menu-list .list-group-messages .list-group-item,
  1308. body.dark-layout.email-application .app-content .content-area-wrapper .email-app-menu .sidebar-menu-list .list-group-labels .list-group-item {
  1309. background: #262c49;
  1310. }
  1311. body.dark-layout.email-application .app-content .content-area-wrapper .email-app-menu .sidebar-menu-list .list-group-messages .list-group-item.active,
  1312. body.dark-layout.email-application .app-content .content-area-wrapper .email-app-menu .sidebar-menu-list .list-group-messages .list-group-item.active:hover,
  1313. body.dark-layout.email-application .app-content .content-area-wrapper .email-app-menu .sidebar-menu-list .list-group-labels .list-group-item.active,
  1314. body.dark-layout.email-application .app-content .content-area-wrapper .email-app-menu .sidebar-menu-list .list-group-labels .list-group-item.active:hover {
  1315. color: #5c6bc6;
  1316. }
  1317. body.dark-layout.email-application .app-content .content-area-wrapper .email-app-menu .sidebar-menu-list .list-group-messages .list-group-item:hover,
  1318. body.dark-layout.email-application .app-content .content-area-wrapper .email-app-menu .sidebar-menu-list .list-group-labels .list-group-item:hover {
  1319. color: #c2c6dc;
  1320. }
  1321. body.dark-layout.email-application .app-content .content-area-wrapper .email-app-list .app-action .action-right .list-inline-item .dropdown-toggle {
  1322. color: #c2c6dc;
  1323. }
  1324. body.dark-layout.email-application .app-content .content-area-wrapper .email-app-list .email-user-list .media {
  1325. border-color: #414561;
  1326. }
  1327. body.dark-layout.email-application .app-content .content-area-wrapper .email-app-list .email-user-list .media:hover {
  1328. box-shadow: 0 0 0 0 #1e1e1e;
  1329. }
  1330. body.dark-layout.email-application .app-content .content-area-wrapper .email-app-list .email-user-list .mail-read,
  1331. body.dark-layout.email-application .app-content .content-area-wrapper .email-app-list .email-user-list .media {
  1332. background-color: #262c49;
  1333. }
  1334. body.dark-layout.email-application .app-content .content-area-wrapper .email-app-list .email-user-list .mail-read .user-details p,
  1335. body.dark-layout.email-application .app-content .content-area-wrapper .email-app-list .email-user-list .mail-read .user-details .list-group-item-text,
  1336. body.dark-layout.email-application .app-content .content-area-wrapper .email-app-list .email-user-list .mail-read .mail-message p,
  1337. body.dark-layout.email-application .app-content .content-area-wrapper .email-app-list .email-user-list .mail-read .mail-message .list-group-item-text,
  1338. body.dark-layout.email-application .app-content .content-area-wrapper .email-app-list .email-user-list .media .user-details p,
  1339. body.dark-layout.email-application .app-content .content-area-wrapper .email-app-list .email-user-list .media .user-details .list-group-item-text,
  1340. body.dark-layout.email-application .app-content .content-area-wrapper .email-app-list .email-user-list .media .mail-message p,
  1341. body.dark-layout.email-application .app-content .content-area-wrapper .email-app-list .email-user-list .media .mail-message .list-group-item-text {
  1342. color: #c2c6dc;
  1343. }
  1344. body.dark-layout.email-application .app-content .content-area-wrapper .email-app-list .email-user-list .mail-read .user-details .mail-meta-item .mail-date,
  1345. body.dark-layout.email-application .app-content .content-area-wrapper .email-app-list .email-user-list .mail-read .mail-message .mail-meta-item .mail-date,
  1346. body.dark-layout.email-application .app-content .content-area-wrapper .email-app-list .email-user-list .media .user-details .mail-meta-item .mail-date,
  1347. body.dark-layout.email-application .app-content .content-area-wrapper .email-app-list .email-user-list .media .mail-message .mail-meta-item .mail-date {
  1348. color: #c2c6dc;
  1349. }
  1350. body.dark-layout.email-application .app-content .content-area-wrapper .email-app-list .email-user-list .mail-read {
  1351. background-color: #414561;
  1352. }
  1353. body.dark-layout.email-application .app-content .content-area-wrapper .email-app-details.show {
  1354. background-color: #212744;
  1355. }
  1356. body.dark-layout.email-application .app-content .content-area-wrapper .email-app-details .email-detail-header {
  1357. background-color: #10163a;
  1358. border-color: #414561;
  1359. }
  1360. body.dark-layout.email-application .app-content .content-area-wrapper .email-app-details .email-detail-header .email-header-right .list-inline-item .dropdown-toggle {
  1361. color: #c2c6dc;
  1362. }
  1363. body.dark-layout.email-application .app-content .content-area-wrapper .email-app-details .mail-message-wrapper,
  1364. body.dark-layout.email-application .app-content .content-area-wrapper .email-app-details .email-detail-head {
  1365. border-color: #414561 !important;
  1366. }
  1367. body.dark-layout.chat-application .content-area-wrapper {
  1368. border-color: #414561;
  1369. }
  1370. body.dark-layout.chat-application .sidebar .chat-profile-sidebar {
  1371. background-color: #262c49;
  1372. border-color: #343661;
  1373. }
  1374. body.dark-layout.chat-application .sidebar .sidebar-content {
  1375. background-color: #262c49;
  1376. border-color: #414561;
  1377. }
  1378. body.dark-layout.chat-application .sidebar .sidebar-content .chat-fixed-search {
  1379. border-color: #414561;
  1380. }
  1381. body.dark-layout.chat-application .sidebar .sidebar-content .chat-fixed-search .form-control {
  1382. background-color: #10163a;
  1383. border-color: #414561;
  1384. }
  1385. body.dark-layout.chat-application .sidebar .sidebar-content .chat-user-list .chat-users-list-wrapper li {
  1386. border-color: #414561;
  1387. }
  1388. body.dark-layout.chat-application .sidebar .sidebar-content .chat-user-list .chat-users-list-wrapper li:not(.active):hover {
  1389. background: #10163a;
  1390. }
  1391. body.dark-layout.chat-application .sidebar .sidebar-content .chat-user-list .chat-users-list-wrapper li.active .contact-info p {
  1392. color: #fff;
  1393. }
  1394. body.dark-layout.chat-application .content-right .chat-app-window .start-chat-area {
  1395. background-color: #171e49;
  1396. }
  1397. body.dark-layout.chat-application .content-right .chat-app-window .start-chat-area .start-chat-icon,
  1398. body.dark-layout.chat-application .content-right .chat-app-window .start-chat-area .start-chat-text {
  1399. background: #262c49;
  1400. }
  1401. body.dark-layout.chat-application .content-right .chat-app-window .active-chat .user-chats {
  1402. background-color: #171e49;
  1403. }
  1404. body.dark-layout.chat-application .content-right .chat-app-window .active-chat .user-chats .chat-left .chat-content {
  1405. border: 1px solid #414561;
  1406. }
  1407. body.dark-layout.chat-application .content-right .chat-app-window .active-chat .user-chats .chat-left .chat-content p {
  1408. color: #c2c6dc;
  1409. }
  1410. body.dark-layout.chat-application .content-right .chat-app-window .active-chat .user-chats .chat-content p {
  1411. color: #fff;
  1412. }
  1413. body.dark-layout.chat-application .content-right .chat-app-window .active-chat .user-chats .chat-content {
  1414. background-color: #262c49;
  1415. }
  1416. body.dark-layout.chat-application .content-right .chat-app-window .active-chat .chat-app-form {
  1417. background-color: #10163a;
  1418. }
  1419. body.dark-layout.chat-application .content-right .chat-app-window .active-chat .chat-app-form .form-control {
  1420. background-color: #343661;
  1421. }
  1422. body.dark-layout.chat-application .content-right .user-profile-sidebar {
  1423. background-color: #262c49;
  1424. border-color: #343661;
  1425. }
  1426. body.dark-layout.todo-application .content-area-wrapper {
  1427. border-color: #414561;
  1428. }
  1429. body.dark-layout.todo-application .content-area-wrapper .sidebar .todo-sidebar {
  1430. background-color: #262c49;
  1431. }
  1432. body.dark-layout.todo-application .content-area-wrapper .sidebar .todo-sidebar .list-group-filters .list-group-item,
  1433. body.dark-layout.todo-application .content-area-wrapper .sidebar .todo-sidebar .list-group-labels .list-group-item {
  1434. background-color: #262c49;
  1435. }
  1436. body.dark-layout.todo-application .content-area-wrapper .sidebar .todo-sidebar .list-group-filters .list-group-item:hover,
  1437. body.dark-layout.todo-application .content-area-wrapper .sidebar .todo-sidebar .list-group-labels .list-group-item:hover {
  1438. color: #c2c6dc;
  1439. }
  1440. body.dark-layout.todo-application .content-area-wrapper .sidebar .todo-form .todo-item-action {
  1441. color: #c2c6dc;
  1442. }
  1443. body.dark-layout.todo-application .content-area-wrapper .todo-app-area .todo-app-list-wrapper {
  1444. border-color: #414561;
  1445. }
  1446. body.dark-layout.todo-application .content-area-wrapper .todo-app-area .app-fixed-search {
  1447. background-color: #10163a;
  1448. border-color: #414561;
  1449. }
  1450. body.dark-layout.todo-application .content-area-wrapper .todo-app-area .todo-task-list .todo-item {
  1451. border-color: #414561;
  1452. }
  1453. body.dark-layout.todo-application .content-area-wrapper .todo-app-area .todo-task-list .todo-item:hover {
  1454. box-shadow: none;
  1455. }
  1456. body.dark-layout.todo-application .content-area-wrapper .todo-app-area .todo-task-list .todo-item .chip {
  1457. background-color: #10163a;
  1458. }
  1459. body.dark-layout.todo-application .content-area-wrapper .todo-app-area .todo-task-list .todo-item .todo-item-action .todo-item-favorite:not(.warning) i,
  1460. body.dark-layout.todo-application .content-area-wrapper .todo-app-area .todo-task-list .todo-item .todo-item-action .todo-item-delete i,
  1461. body.dark-layout.todo-application .content-area-wrapper .todo-app-area .todo-task-list .todo-item .todo-item-action .todo-item-info:not(.success) i {
  1462. color: #c2c6dc;
  1463. }
  1464. body.dark-layout.ecommerce-application .sidebar-left .sidebar-shop .filter-heading {
  1465. color: #c2c6dc;
  1466. }
  1467. body.dark-layout.ecommerce-application .sidebar-left .sidebar-shop .price-slider .range-slider {
  1468. background-color: #262c49;
  1469. }
  1470. body.dark-layout.ecommerce-application .sidebar-left .sidebar-shop .ratings-list li,
  1471. body.dark-layout.ecommerce-application .sidebar-left .sidebar-shop .ratings-list ~ .stars-received {
  1472. color: #c2c6dc;
  1473. }
  1474. body.dark-layout.ecommerce-application .content-right .ecommerce-header-items .result-toggler .search-results,
  1475. body.dark-layout.ecommerce-application .content-body .ecommerce-header-items .result-toggler .search-results {
  1476. color: #c2c6dc;
  1477. }
  1478. body.dark-layout.ecommerce-application .content-right .ecommerce-header-items .result-toggler .shop-sidebar-toggler i,
  1479. body.dark-layout.ecommerce-application .content-body .ecommerce-header-items .result-toggler .shop-sidebar-toggler i {
  1480. color: #c2c6dc;
  1481. }
  1482. body.dark-layout.ecommerce-application .content-right .ecommerce-header-items .view-options .select2 .select2-selection,
  1483. body.dark-layout.ecommerce-application .content-body .ecommerce-header-items .view-options .select2 .select2-selection {
  1484. background-color: #10163a;
  1485. }
  1486. body.dark-layout.ecommerce-application .content-right .ecommerce-header-items .view-options .view-btn-option .grid-view-btn,
  1487. body.dark-layout.ecommerce-application .content-right .ecommerce-header-items .view-options .view-btn-option .list-view-btn,
  1488. body.dark-layout.ecommerce-application .content-body .ecommerce-header-items .view-options .view-btn-option .grid-view-btn,
  1489. body.dark-layout.ecommerce-application .content-body .ecommerce-header-items .view-options .view-btn-option .list-view-btn {
  1490. background-color: #10163a !important;
  1491. }
  1492. body.dark-layout.ecommerce-application .content-right .ecommerce-header-items .view-options .view-btn-option .grid-view-btn:not(.active) i,
  1493. body.dark-layout.ecommerce-application .content-right .ecommerce-header-items .view-options .view-btn-option .list-view-btn:not(.active) i,
  1494. body.dark-layout.ecommerce-application .content-body .ecommerce-header-items .view-options .view-btn-option .grid-view-btn:not(.active) i,
  1495. body.dark-layout.ecommerce-application .content-body .ecommerce-header-items .view-options .view-btn-option .list-view-btn:not(.active) i {
  1496. color: #c2c6dc;
  1497. }
  1498. body.dark-layout.ecommerce-application .content-right .search-product,
  1499. body.dark-layout.ecommerce-application .content-body .search-product {
  1500. background-color: #10163a;
  1501. }
  1502. body.dark-layout.ecommerce-application .content-right .grid-view .ecommerce-card .card-body,
  1503. body.dark-layout.ecommerce-application .content-right .list-view .ecommerce-card .card-body,
  1504. body.dark-layout.ecommerce-application .content-body .grid-view .ecommerce-card .card-body,
  1505. body.dark-layout.ecommerce-application .content-body .list-view .ecommerce-card .card-body {
  1506. border-color: #414561;
  1507. }
  1508. body.dark-layout.ecommerce-application .content-right .grid-view .ecommerce-card .item-img,
  1509. body.dark-layout.ecommerce-application .content-right .list-view .ecommerce-card .item-img,
  1510. body.dark-layout.ecommerce-application .content-body .grid-view .ecommerce-card .item-img,
  1511. body.dark-layout.ecommerce-application .content-body .list-view .ecommerce-card .item-img {
  1512. background-color: #fff;
  1513. }
  1514. body.dark-layout.ecommerce-application .content-right .grid-view .ecommerce-card .item-name,
  1515. body.dark-layout.ecommerce-application .content-right .list-view .ecommerce-card .item-name,
  1516. body.dark-layout.ecommerce-application .content-body .grid-view .ecommerce-card .item-name,
  1517. body.dark-layout.ecommerce-application .content-body .list-view .ecommerce-card .item-name {
  1518. color: #fff;
  1519. }
  1520. body.dark-layout.ecommerce-application .content-right .grid-view .ecommerce-card .item-options .wishlist span,
  1521. body.dark-layout.ecommerce-application .content-right .list-view .ecommerce-card .item-options .wishlist span,
  1522. body.dark-layout.ecommerce-application .content-body .grid-view .ecommerce-card .item-options .wishlist span,
  1523. body.dark-layout.ecommerce-application .content-body .list-view .ecommerce-card .item-options .wishlist span {
  1524. color: #2c2c2c;
  1525. }
  1526. body.dark-layout.ecommerce-application .content-right .grid-view .ecommerce-card .item-options .cart span,
  1527. body.dark-layout.ecommerce-application .content-right .list-view .ecommerce-card .item-options .cart span,
  1528. body.dark-layout.ecommerce-application .content-body .grid-view .ecommerce-card .item-options .cart span,
  1529. body.dark-layout.ecommerce-application .content-body .list-view .ecommerce-card .item-options .cart span {
  1530. color: #fff;
  1531. }
  1532. body.dark-layout.ecommerce-application .content-right .pagination .page-item,
  1533. body.dark-layout.ecommerce-application .content-body .pagination .page-item {
  1534. background-color: #10163a;
  1535. }
  1536. body.dark-layout.ecommerce-application .content-right .pagination .page-item.active,
  1537. body.dark-layout.ecommerce-application .content-body .pagination .page-item.active {
  1538. background-color: #10163a;
  1539. }
  1540. body.dark-layout.ecommerce-application .content-right .pagination .page-item.active .page-link,
  1541. body.dark-layout.ecommerce-application .content-body .pagination .page-item.active .page-link {
  1542. background-color: #5c6bc6;
  1543. }
  1544. body.dark-layout.ecommerce-application .content-right .pagination .page-item .page-link,
  1545. body.dark-layout.ecommerce-application .content-body .pagination .page-item .page-link {
  1546. background-color: #10163a;
  1547. }
  1548. body.dark-layout.ecommerce-application .wishlist-items .ecommerce-card .move-cart .move-to-cart {
  1549. color: #fff;
  1550. }
  1551. body.dark-layout.ecommerce-application .product-checkout .checkout-options .detail-total {
  1552. color: #c2c6dc;
  1553. }
  1554. body.dark-layout .fc .fc-header-toolbar .fc-button span {
  1555. color: #fff;
  1556. }
  1557. body.dark-layout .fc .fc-view-container .fc-body .fc-week table tbody .fc-other-month {
  1558. background-color: #6a6d83;
  1559. }
  1560. body.dark-layout .fc .fc-divider {
  1561. background: #262c49;
  1562. }
  1563. body.dark-layout .fc .fc-widget-content,
  1564. body.dark-layout .fc .fc-widget-header {
  1565. border-color: #414561;
  1566. }
  1567. body.dark-layout .noUi-target {
  1568. background-color: #262c49;
  1569. }
  1570. body.dark-layout .swal2-container .swal2-modal {
  1571. background-color: #262c49;
  1572. }
  1573. body.dark-layout .swal2-container .swal2-modal .swal2-header {
  1574. background-color: #262c49;
  1575. }
  1576. body.dark-layout .swal2-container .swal2-modal .swal2-header .swal2-title {
  1577. color: #c2c6dc;
  1578. }
  1579. body.dark-layout .swal2-container .swal2-modal .swal2-header .swal2-icon-text {
  1580. color: inherit;
  1581. }
  1582. body.dark-layout .swal2-container .swal2-modal .swal2-header .swal2-success-circular-line-left,
  1583. body.dark-layout .swal2-container .swal2-modal .swal2-header .swal2-success-circular-line-right,
  1584. body.dark-layout .swal2-container .swal2-modal .swal2-header .swal2-success-fix,
  1585. body.dark-layout .swal2-container .swal2-modal .swal2-header .swal2-animate-success-icon {
  1586. background-color: #262c49 !important;
  1587. }
  1588. body.dark-layout .swal2-container .swal2-modal .swal2-content {
  1589. color: #c2c6dc;
  1590. }
  1591. body.dark-layout .swal2-container .swal2-modal .swal2-content pre,
  1592. body.dark-layout .swal2-container .swal2-modal .swal2-content code,
  1593. body.dark-layout .swal2-container .swal2-modal .swal2-content .swal2-input {
  1594. background-color: #10163a;
  1595. }
  1596. body.dark-layout .swal2-container .swal2-modal .swal2-content .swal2-input {
  1597. color: #fff;
  1598. }
  1599. body.dark-layout .toast-container .toast.toast-info {
  1600. background-color: #3085d6;
  1601. }
  1602. body.dark-layout .toast-container .toast.toast-success {
  1603. background-color: #21b978;
  1604. }
  1605. body.dark-layout .toast-container .toast.toast-error {
  1606. background-color: #ea5455;
  1607. }
  1608. body.dark-layout .toast-container .toast.toast-warning {
  1609. background-color: #dda451;
  1610. }
  1611. body.dark-layout .dropzone {
  1612. background-color: #262c49;
  1613. }
  1614. body.dark-layout .quill-toolbar,
  1615. body.dark-layout .ql-toolbar {
  1616. border-color: #414561;
  1617. }
  1618. body.dark-layout .quill-toolbar .ql-formats .ql-picker-label,
  1619. body.dark-layout .ql-toolbar .ql-formats .ql-picker-label {
  1620. color: #fff;
  1621. }
  1622. body.dark-layout .quill-toolbar .ql-formats .ql-stroke,
  1623. body.dark-layout .quill-toolbar .ql-formats .ql-fill,
  1624. body.dark-layout .ql-toolbar .ql-formats .ql-stroke,
  1625. body.dark-layout .ql-toolbar .ql-formats .ql-fill {
  1626. stroke: #fff;
  1627. }
  1628. body.dark-layout .quill-toolbar .ql-formats .ql-fill,
  1629. body.dark-layout .ql-toolbar .ql-formats .ql-fill {
  1630. fill: #fff;
  1631. }
  1632. body.dark-layout .quill-toolbar .ql-header.ql-expanded .ql-picker-options,
  1633. body.dark-layout .ql-toolbar .ql-header.ql-expanded .ql-picker-options {
  1634. background-color: #10163a;
  1635. }
  1636. body.dark-layout .quill-toolbar .ql-header.ql-expanded .ql-picker-options span:not(:hover),
  1637. body.dark-layout .ql-toolbar .ql-header.ql-expanded .ql-picker-options span:not(:hover) {
  1638. color: #fff;
  1639. }
  1640. body.dark-layout .ql-container {
  1641. border-color: #414561;
  1642. }
  1643. body.dark-layout .ql-editor .ql-syntax {
  1644. background-color: #262c49;
  1645. }
  1646. body.dark-layout .ql-editor.ql-blank:before {
  1647. color: #c2c6dc;
  1648. }
  1649. body.dark-layout .shepherd-content .shepherd-text p {
  1650. color: #fff;
  1651. }
  1652. body.dark-layout .context-menu-list .context-menu-item.context-menu-hover span {
  1653. color: #fff;
  1654. }
  1655. body.dark-layout .context-menu-list .context-menu-item.context-menu-hover .context-menu-list .context-menu-item span {
  1656. color: #c2c6dc;
  1657. }
  1658. body.dark-layout .swiper-slide {
  1659. background-color: #262c49 !important;
  1660. }
  1661. body.dark-layout .customizer {
  1662. background-color: #262c49;
  1663. }
  1664. body.dark-layout .customizer .customizer-close i {
  1665. color: #c2c6dc;
  1666. }
  1667. body.dark-layout.fixed-footer .footer {
  1668. background-color: #10163a;
  1669. }
  1670. body.dark-layout.horizontal-layout .main-menu-content .navbar-nav .dropdown-submenu.show {
  1671. background-color: #10163a !important;
  1672. color: #c2c6dc;
  1673. }
  1674. body.dark-layout.horizontal-layout .main-menu-content .navbar-nav .dropdown-menu a:hover {
  1675. color: #c2c6dc !important;
  1676. }
  1677. body.dark-layout.horizontal-layout .main-menu-content .navbar-nav li.active .dropdown-menu li.active a {
  1678. background-color: #10163a !important;
  1679. color: #c2c6dc;
  1680. }
  1681. body.dark-layout.horizontal-layout .main-menu-content .navbar-nav li.active .dropdown-menu li:not(.active) a {
  1682. background-color: #262c49 !important;
  1683. }
  1684. body.dark-layout.horizontal-layout .main-menu-content .navbar-nav li.active .dropdown-menu li.open.active > a {
  1685. color: #c2c6dc !important;
  1686. }
  1687. body.dark-layout.horizontal-layout.vertical-overlay-menu .main-menu .nav-item.active a {
  1688. box-shadow: none;
  1689. }
  1690. body.dark-layout.horizontal-layout.vertical-overlay-menu .main-menu .nav-item.active ul li.active a {
  1691. background: linear-gradient(118deg, #5c6bc6, rgba(92, 107, 198, 0.7)) !important;
  1692. box-shadow: 0px 0px 6px 1px rgba(92, 107, 198, 0.6) !important;
  1693. color: #fff;
  1694. }
  1695. body.dark-layout.horizontal-layout.vertical-overlay-menu .main-menu ul li {
  1696. background: #10163a !important;
  1697. background-color: #10163a !important;
  1698. }
  1699. body.dark-layout.horizontal-layout.vertical-overlay-menu .main-menu ul li a {
  1700. color: #c2c6dc !important;
  1701. }
  1702. body.dark-layout.horizontal-layout .header-navbar {
  1703. background-color: #10163a;
  1704. }