:root {
  --brand: #2f6bff;
  --brand-d: #1f56e0;
  --brand-s: #eaf1ff;
  --ink: #0f1b33;
  --text: #1f2a44;
  --muted: #6b7790;
  --line: #e6ebf2;
  --bg: #f5f7fb;
}

body {
  background: var(--bg) !important;
}

#page-topbar,
.navbar-header {
  background: #fff !important;
  border-bottom: 1px solid var(--line);
  box-shadow: none !important;
}

.navbar-brand-box {
  background: #fff !important;
}

.vertical-menu {
  background: #fff !important;
  border-right: 1px solid var(--line);
}

#sidebar-menu ul li a {
  color: var(--text) !important;
  border-radius: 8px;
  margin: 2px 10px;
}

#sidebar-menu ul li a:hover,
#sidebar-menu ul li a:focus {
  background: var(--brand-s) !important;
  color: var(--brand) !important;
}

#sidebar-menu ul li.mm-active > a,
#sidebar-menu ul li a.active {
  background: var(--brand) !important;
  color: #fff !important;
}

.btn-primary,
.bg-primary {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--brand-d) !important;
  border-color: var(--brand-d) !important;
}

.page-content {
  background: var(--bg);
}

.card {
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(15, 27, 51, 0.04) !important;
}

.card-title,
.font-size-16 {
  color: var(--ink);
}

.text-primary {
  color: var(--brand) !important;
}

.nav-tabs .nav-link.active {
  color: var(--brand) !important;
  border-color: var(--brand) !important;
}

.pagination .page-item.active .page-link {
  background-color: var(--brand);
  border-color: var(--brand);
}

.login-page,
.account-pages {
  background: linear-gradient(160deg, #f7f9ff, #eef3ff 50%, #f5f7fb) !important;
}

.account-pages .card {
  border-radius: 14px !important;
}

.account-pages .btn-primary {
  border-radius: 10px;
  height: 42px;
}