:root {
  --theme-base: #2a334a;
  --theme-base-rgb: 42, 51, 74;
  --theme-accent-1: #2596be;
  --theme-accent-2: #1d7fa8;
  --theme-accent-3: #0f477e;
  --theme-accent-4: #63b4d2;
  --theme-accent-5: #592f29;
  --theme-accent-6: #11467a;
  --theme-accent-7: #303248;
  --theme-accent-8: #34658a;
  --theme-accent-9: #8e5a31;

  --primary-color: var(--theme-base);
  --secondary-color: var(--theme-accent-1);
  --primary-color-text: var(--theme-accent-2);
  --primary-gradient-color: linear-gradient(135deg, #2a334a 0%, #043e75 45%, #34658a 100%);
  --secondary-gradient-color: linear-gradient(135deg, #2596be 0%, #1d7fa8 48%, #11467a 100%);
  --primary-light-color: rgba(117, 170, 190, 0.22);

  --primary-50: #e9edf5;
  --primary-100: #cdd7e7;
  --primary-200: #b2c1d9;
  --primary-300: #97abcb;
  --primary-400: #7c95bd;
  --primary-500: #4e668f;
  --primary-600: #2a334a;
  --primary-700: #242d41;
  --primary-800: #1f2637;
  --primary-900: #191f2d;
}

body {
  background-color: #f4f6fb;
  color: #303248;
}

body.dark {
  background-color: #1d2537;
  color: #e6edf8;
}

body.dark .card,
body.dark .dashboard-main,
body.dark .dashboard-main-body,
body.dark .navbar-header {
  background-color: #2a334a;
  color: #e6edf8;
}

body.dark .form-control,
body.dark .form-select,
body.dark .modal-content {
  background-color: #303248;
  border-color: rgba(117, 170, 190, 0.35);
  color: #e6edf8;
}

.bg-gradient,
.ban-bg,
.sidebar-menu li > a.active-page,
.btn-primary-600,
.btn-primary,
.btn-primary:hover,
.primary-gradient-bg,
.kyc-bg,
input[type="radio"]:checked + .program-label {
  background-image: var(--secondary-gradient-color) !important;
}

.border-purple-600,
.style-pill-button li button[aria-selected="true"] {
  border-color: var(--theme-accent-8) !important;
}

.text-purple-600,
.hover\:text-purple-600:hover,
.primary-color {
  color: var(--theme-base) !important;
}

.login-bg {
  background: linear-gradient(150deg, #2a334a, #0f477e, #303248, #2596be);
}

a {
  color: #34658a;
}

a:hover {
  color: #043e75;
}

.navbar-header,
.card,
.modal-content {
  background-color: #ffffff;
  color: #303248;
  border: 1px solid #dbe3f0;
}

.card-header {
  background-color: #f8fbff;
  border-bottom: 1px solid #dbe3f0;
}

.form-control,
.form-select {
  background-color: #ffffff;
  border-color: #c8d4e8;
  color: #303248;
}

.form-control:focus,
.form-select:focus {
  border-color: #34658a;
  box-shadow: 0 0 0 0.2rem rgba(52, 101, 138, 0.2);
}

.table th {
  background-color: #edf3fb;
  color: #2a334a;
}

.table td {
  border-color: #dbe3f0;
}

.sidebar-menu li a {
  color: #2a334a;
}

.sidebar-menu li a:hover,
.sidebar-menu li.dropdown.open > a,
.sidebar-menu li.dropdown.dropdown-open > a {
  background-color: rgba(117, 170, 190, 0.15);
  color: #043e75;
}

.btn-primary-600,
.btn-primary {
  color: #ffffff !important;
}

body.dark .navbar-header,
body.dark .card,
body.dark .modal-content {
  border-color: rgba(117, 170, 190, 0.35);
}

body.dark .card-header {
  background-color: #303248;
  border-bottom-color: rgba(117, 170, 190, 0.35);
}

body.dark .table {
  color: #e6edf8;
}

body.dark .table th {
  background-color: #242d41;
  color: #f8fbff;
}

body.dark .table td {
  border-color: rgba(117, 170, 190, 0.3);
}

body.dark .sidebar,
body.dark .sidebar-menu-area {
  background-color: #2a334a;
  border-color: rgba(117, 170, 190, 0.25);
}

body.dark .sidebar-menu li a {
  color: #d6e2f2;
}

body.dark .sidebar-menu li a:hover,
body.dark .sidebar-menu li.dropdown.open > a,
body.dark .sidebar-menu li.dropdown.dropdown-open > a {
  background-color: rgba(52, 101, 138, 0.35);
  color: #ffffff;
}