/*!
 * Dark Mode Switch v1.0.1 (https://github.com/coliff/dark-mode-switch)
 * Copyright 2021 C.Oliff
 * Licensed under MIT (https://github.com/coliff/dark-mode-switch/blob/main/LICENSE)
 */

body {
  --nav_logo: url('https://cdn-icons-png.flaticon.com/512/169/169367.png');
}

body[data-theme="dark"] {
  --nav_logo: url('https://cdn-icons-png.flaticon.com/512/196/196685.png');
}

[data-theme="dark"]::-webkit-scrollbar-track {
  background: #363636 !important;
}

.nav_logo {
  content: var(--nav_logo);
}

[data-theme="dark"] {
  background-color: #111 !important;
  color: #eee;
}

[data-theme="dark"] .bg-black {
  background-color: #fff !important;
}

[data-theme="dark"] .bg-dark {
  background-color: rgb(0, 0, 0) !important;
}

[data-theme="dark"] .text-white {
  color: #000 !important;
}

[data-theme="dark"] .text-black {
  color: #fff !important;
}

[data-theme="dark"] .bg-light {
  background-color: #222 !important;
}

[data-theme="dark"] .bg-white {
  background-color: rgb(54, 54, 54) !important;
}

[data-theme="dark"] .card {
  background-color: rgb(54, 54, 54) !important;
}

[data-theme="dark"] .list-group-item {
  background-color: rgb(54, 54, 54) !important;
  color: white;
}

[data-theme="dark"] .page-title h1 {
  color: #fff !important;
}

[data-theme="dark"] .card-title {
  color: #fff !important;
}

[data-theme="dark"] .dashboard .info-card h6 {
  color: #fff !important;
}

[data-theme="dark"] .viewPass {
  color: #fff;
}

/* side nav Starts */

[data-theme="dark"] .sidebar {
  background-color: rgb(54, 54, 54);
  transition: none;
}

[data-theme="dark"] .sidebar-nav .nav-link.collapsed {
  color: #ffffff;
  background: #000;
}

[data-theme="dark"] .sidebar-nav .nav-content a {
  color: #a3a3a3;
}

[data-theme="dark"] .sidebar-nav .nav-content a.active {
  color: #ffffff !important;
}

/* side nav Ends */

/* header Starts */

[data-theme="dark"] .header {
  background-color: rgb(54, 54, 54);
  transition: none;
}

[data-theme="dark"] .header .toggle-sidebar-btn {
  color: white;
}

[data-theme="dark"] .header-nav .nav-profile {
  color: white;
}

[data-theme="dark"] .dropdown-menu-arrow::before {
  background-color: #505050;
}

[data-theme="dark"] .header-nav .profile .dropdown-header h6 {
  color: white;
}

[data-theme="dark"] .header-nav .profile .dropdown-header span {
  color: #d1d1d1;
}

[data-theme="dark"] .logo .light {
  max-height: 50px;
  margin-right: 6px;
  display: block;
}

[data-theme="dark"] .logo img {
  display: none;
}

/* header Ends */

/* btn Starts */

[data-theme="dark"] .btn-outline-danger {
  color: white;
}

[data-theme="dark"] .btn-outline-secondary {
  color: white;
}

[data-theme="dark"] .btn-outline-primary {
  color: white;
}

/* btn Ends */

/* form contrls Starts */

[data-theme="dark"] .form-control {
  background-color: #505050 !important;
  color: #dbdbdb;
  border: 1px solid #909090;
}

[data-theme="dark"] .datatable-input {
  background-color: #505050 !important;
  color: #dbdbdb;
  border: 1px solid #909090;
}

[data-theme="dark"] .input-group-text {
  border: 1px solid #909090;
  background-color: #b6b6b6;
}

[data-theme="dark"] .form-select {
  background-color: #505050 !important;
  color: #dbdbdb;
  border: 1px solid #909090;
}

[data-theme="dark"] .datatable-selector {
  background-color: #505050;
  color: #dbdbdb;
  border: 1px solid #909090;
}

[data-theme="dark"] ::placeholder {
  color: #dbdbdb;
  opacity: 1;
}

[data-theme="dark"] .dropdown-toggle::after {
  color: #818181;
}

[data-theme="dark"] .progress {
  background-color: #555555;
}

[data-theme="dark"] .dropdown-menu {
  background-color: #505050;
}

[data-theme="dark"] .dropdown-item {
  color: #eeeeee;
}

[data-theme="dark"] .dropdown-item:focus,
.dropdown-item:hover {
  color: #1e2125 !important;
}

[data-theme="dark"] .dashboard .news h4 a {
  color: #c5c5c5;
}

[data-theme="dark"] .dashboard .news h4 a:hover {
  color: #fff;
}

/* form contrls Ends */

/* Table & tab Starts */

[data-theme="dark"] .nav-tabs-bordered .nav-link {
  color: #dbdbdb;
}

[data-theme="dark"] .nav-tabs-bordered .nav-link.active {
  color: white;
  background: #111111;
}

[data-theme="dark"] .table {
  color: #fff;
  background-color: #505050 !important;
  --bs-table-striped-color: #ffffff !important;
  --bs-table-striped-bg: rgb(53 53 53) !important;
  --bs-table-hover-color: #ffffff;
  --bs-table-hover-bg: rgb(13 110 253);
  --bs-table-border-color: #909090;
}

[data-theme="dark"] .dashboard .recent-sales .table thead {
  background: #101215;
}

[data-theme="dark"] .dashboard .top-selling .table thead {
  background: #101215;
}

[data-theme="dark"] .datatable-table>thead>tr>th {
  border-bottom: 1px solid #909090;
}

[data-theme="dark"] .datatable-wrapper.no-footer .datatable-container {
  border-bottom: 1px solid #909090;
}

[data-theme="dark"] .datatable-pagination a {
  color: white;
}

[data-theme="dark"] .datatable-pagination .datatable-active a {
  background-color: #505050;
}

[data-theme="dark"] .datatable-pagination a:hover {
  background-color: #505050;
}

/* Table & tab Ends */

/* Model Control Starts */

[data-theme="dark"] .modal-content {
  background-color: rgb(54, 54, 54) !important;
  color: #eee;
}

[data-theme="dark"] .modal-header .btn-close {
  background-color: rgb(182 182 182) !important;
}

/* Model Control Ends */

/* offcanvas Starts */

[data-theme="dark"] .offcanvas {
  background-color: #2b2b2b;
}

[data-theme="dark"] .offcanvas-header .btn-close {
  background-color: rgb(182 182 182) !important;
}

/* offcanvas Ends */

/* border Starts */

[data-theme="dark"] .border-bottom {
  border-bottom: 1px solid #808080 !important;
}

/* border Ends */

/* profile Starts */

[data-theme="dark"] .profile .profile-overview .label {
  color: rgb(255 255 255 / 60%);
}

[data-theme="dark"] .header-nav .nav-profile img {
  background: black;
}

[data-theme="dark"] .profile .profile-card img {
  background: black;
}

[data-theme="dark"] .profile .profile-edit img {
  background: black;
}

[data-theme="dark"] .profile .profile-edit label {
  color: rgb(255 255 255 / 60%);
}

/* profile Ends */

/* charts Starts */

[data-theme="dark"] .apexcharts-legend-text {
  color: white !important;
}

/* charts Ends */

/* footer Starts */

[data-theme="dark"] .footer .copyright {
  color: #818181;
}

[data-theme="dark"] .footer .credits {
  color: #818181;
}

[data-theme="dark"] .footer {
  border-top: 1px solid #363636;
}

/* footer Ends */