/* Theme Dark */
/*--------------------------------
  2.1 Theme Color
-----------------------------------*/
:root {
  --navbar-bg: #fff;
  --navbar-bg-dark: #131517;

  --footer-bg: #fff;
  --footer-bg-dark: #131517;

  --white-color: #fff;
  --black-color: #000;

  --bg-primary: #fff;
  --bg-primary-dark: #131517;
  --bg-secondary: #F8F8F8;
  --bg-secondary-dark: #0B0B0B;

  --bg-gradient: linear-gradient(180deg, #296FEB 0%, #0C36C9 100%);
  --bg-gradient-hover: linear-gradient(180deg, #0C36C9 0%, #296FEB 100%);

  --heading-color: #0C0825;
  --heading-color-dark: #fff;
  --body-font-color: #737C91;

  --border-color: #DFDFDF;
  --border-color-dark: rgba(255, 255, 255, 0.1);
  --border-color-2: #A5ABBA;

  --primary-color: #0E3BCC;
  --primary-hover-color: #3686FC;

  --blue-color: #0066D9;
  --blue-color-transparent: #EAF1FE;

  --secondary-color: #8253FB;
  --secondary-hover-color: #582bc9;

  --red-color: #FF3D3D;
  --danger-color: #FF3D3D;
  --red-color-hover: #dc3545;

  --yellow-color: #FBBF37;
  --orange-color: #FF794D;
  --orange-color-transparent: #FFF0EB;

  --green-color: #1EBD53;
  --green-color-hover: #0d943a;
  --green-color-transparent: #E5FAF3;

  --body-font-family: 'Poppins', sans-serif;
}

body.dark .color-heading {
  color: var(--heading-color-dark);
}
.color-hover {
  color: var(--primary-hover-color);
}
.primary-color {
  color: var(--primary-color)!important;
}
.primary-color:hover {
  color: var(--primary-hover-color)!important;
}
.secondary-color {
  color: var(--secondary-color);
}
.theme-text-color {
  color: var(--body-font-color);
}
.bg-primary-color {
  background-color: var(--primary-color);
}
body.dark .bg-light {
  background-color: var(--bg-secondary-dark)!important;
}
.bg-gradient {
  background-image: var(--bg-gradient)!important;
}

body.dark .theme-border {
  border: 1px solid var(--border-color-dark)!important;
}
body.dark .border-bottom {
  border-bottom: 1px solid var(--border-color-dark)!important;
}
body.dark .border-top {
  border-top: 1px solid var(--border-color-dark)!important;
}
.orange-color {
  color: var(--orange-color);
}
.green-color {
  color: var(--green-color);
}
.red-color, .theme-link-red {
  color: var(--red-color);
}
.red-color:hover, .theme-link-red:hover {
  color: var(--red-color-hover)!important;
}
button.red-color:hover, a.red-color:hover, .theme-link-red:hover {
  color: var(--red-color-hover);
}
.bg-orange {
  background-color: var(--orange-color);
}

.bg-green {
  background-color: var(--green-color);
}
.bg-red {
  background-color: var(--red-color);
}

.bg-red-transparent {
  background-color: rgba(255, 67, 67, 0.1);
}
.bg-green-transparent {
  background-color: var(--green-color-transparent);
}
.bg-blue-transparent {
  background-color: var(--primary-color-transparent);
}
.bg-purple-transparent {
  background-color: #F0EBFF;
}
.bg-orange-transparent {
  background-color: var(--orange-color);
}

.sidebar-badge-light {
  background-color: #EEEEEE;
  color: var(--body-font-color);
}
.theme-link {
  color: var(--primary-color);
}
.theme-link:hover {
  color: var(--primary-hover-color)!important;
}
.theme-secondary-link {
  color: var(--secondary-color);
}
.theme-secondary-link:hover {
  color: var(--secondary-hover-color)!important;
}

/*--------------------------------
  2.1 Theme Color
-----------------------------------*/
body.dark {
  background: var(--bg-primary-dark) none repeat scroll;
}

/* Sidebar Menu Start */
body.dark.vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>a {
    color: var(--heading-color-dark);
    background-color: var(--bg-primary-dark);
}

body.dark.vertical-collpsed .vertical-menu #sidebar-menu>ul ul {
    background-color: var(--bg-primary-dark);
}
body.dark.vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>ul a {
    color: var(--body-font-color);
}
/* Sidebar Menu End */

body.dark .dropdown-divider {
  border-top: 1px solid var(--border-color-dark)!important;
}

body.dark .bg-white,
body.dark .modal-content,
body.dark .navbar .dropdown-menu {
  background: var(--bg-secondary-dark)!important;
}

body.dark .color-heading,
body.dark .theme-btn, body.dark .green-btn, body.dark .theme-btn-2, body.dark .theme-btn-red,
body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5, body.dark h6,
body.dark .accordion-button,
body.dark .header-item {
  color: var(--heading-color-dark);
}

body.dark table th {
    color: var(--heading-color-dark)!important;
}
body.dark .table>thead>tr>th {
    border-bottom: 1px solid var(--border-color-dark)!important;
}

body.dark .form-control::placeholder {
  color: #737C90;
}
body.dark .form-control, body.dark .form-select {
  background-color: var(--bg-primary-dark);
  border: 1px solid var(--border-color-dark);
  color: var(--body-font-color);
}
body.dark .disabled.my-custom-select .filter-option-inner-inner {
  color: var(--body-font-color);
}
body.dark .form-control:focus, body.dark.form-select:focus {
  border-color: #86b7fe;
  color: var(--body-font-color-dark);
}
body.dark .input-group-text .iconify {
  color: var(--body-font-color);
}

/* Navbar */
body.dark #page-topbar, body.dark .navbar-brand-box,
body.dark .vertical-menu, body.dark .mm-active {
  background-color: var(--bg-primary-dark);
}
/* Navbar */

/* Template Page Dark Version CSS Start */
body.dark .main-content {
  background-color: var(--bg-primary-dark);
}

body.dark .navbar-header .dropdown .show.header-item {
  background-color: var(--navbar-bg-dark);
}
body.dark .dropdown-menu {
  border: 1px solid var(--border-color-dark);
  background-color: var(--navbar-bg-dark);
}
body.dark .dropdown-item:focus, body.dark .dropdown-item:hover {
  background-color: var(--navbar-bg-dark)!important;
}
body.dark .dashboard-menu-item:before, body.dark .logout-menu-item:before,
body.dark .dashboard-menu-item:after, body.dark .logout-menu-item:after {
  background-color: var(--border-color-dark);
}

body.dark .navbar-header .price-alert-box, body.dark .page-content .price-alert-box {
  background: var(--bg-secondary-dark);
}
body.dark .navbar-header .price-alert-box p, body.dark .page-content .price-alert-box p {
  color: var(--white-color)!important;
}
body.dark .price-alert-box .alert-info-btn {
  background-color: var(--bg-primary-dark)!important;
}
body.dark .price-card-item {
  background-color: var(--bg-primary-dark);
}
body.dark hr {
  border: 1.6px solid var(--border-color-dark);
}
body.dark .payment-method-item-title.bg-light {
  background-color: var(--bg-secondary)!important;
}
body.dark .payment-method-item-title.bg-light h6 {
  color: var(--heading-color)!important;
}
body.dark .modal.fade .modal-content {
  border: 1px solid var(--border-color-dark)!important;
}
body.dark .bootstrap-select>.dropdown-toggle {
  background-color: var(--bg-primary-dark);
}
body.dark .ai-assistant-rightside {
  background-color: var(--bg-primary-dark)!important;
}

/* AI Editor Start */
body.dark .ck.ck-toolbar {
  border-bottom: 1px solid var(--border-color-dark)!important;
}
body.dark .ck.ck-toolbar__separator {
  background: var(--border-color-dark)!important;
}
body.dark .ck.ck-button, body.dark a.ck.ck-button {
    color: var(--body-font-color);
}
body.dark .ck.ck-button:not(.ck-disabled):hover, body.dark a.ck.ck-button:not(.ck-disabled):hover {
    background: var(--bg-secondary-dark);
    color: var(--body-font-color-dark);
}
body.dark .ck.ck-button.ck-on, body.dark a.ck.ck-button.ck-on {
    background: var(--bg-secondary-dark);
}
body.dark .ck.ck-list {
    background: var(--bg-primary-dark);
}
body.dark .ck.ck-dropdown__panel {
    border: 1px solid var(--border-color-dark)!important;
}
/* AI Editor End */

body.dark .status-btn {
  background-color: var(--status-btn-bg-dark);
}
body.dark .subscription-plan-box {
  background: var(--bg-primary-dark)!important;
}
body.dark .current-plan.plan-usage {
  border-top: 1px solid var(--border-color-dark);
}
body.dark .input-group-text {
  color: var(--body-font-color-dark);
  background-color: var(--bg-primary-dark);
}
body.dark .input-group {
  background-color: var(--bg-primary-dark);
}
body.dark .bootstrap-select .dropdown-menu li.dropdown-header {
  background-color: var(--bg-secondary-dark);
}
body.dark .bootstrap-select .dropdown-menu li.dropdown-header .text {
  color: var(--heading-color-dark);
}
/* Template Page Dark Version CSS End */
