:root {
  --cp-primary: #5567ff;
  --cp-accent: #ed0b4c;
  --cp-soft: #f5f7fa;
}

body {
  background-color: var(--cp-soft);
}

.cp-brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--cp-primary);
  font-family: "Exo 2", Roboto, sans-serif;
  font-weight: 600;
}

.cp-navbar-brand {
  min-width: 0;
  flex: 0 0 auto;
}

.cp-top-logo {
  display: block;
  width: auto;
  height: 30px;
  max-width: 142px;
  object-fit: contain;
}

.cp-login-logo {
  display: block;
  width: min(220px, 72vw);
  height: auto;
  object-fit: contain;
}

.cp-sidebar-brand {
  min-height: 64px;
  padding: 14px 20px;
}

.cp-sidebar-logo {
  display: block;
  width: 132px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.cp-footer-logo {
  display: block;
  width: 136px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.cp-stat .card-body {
  min-height: 128px;
}

.cp-stat .label {
  color: rgba(39, 44, 51, .54);
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
}

.cp-stat .value {
  color: #303840;
  font-family: "Exo 2", Roboto, sans-serif;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
}

.cp-card {
  background: #fff;
  border: 1px solid #e9edf2;
  border-radius: .5rem;
  box-shadow: 0 3px 3px -2px rgba(39,44,51,.1), 0 3px 4px 0 rgba(39,44,51,.04), 0 1px 8px 0 rgba(39,44,51,.02);
  margin-bottom: 1.5rem;
}

.cp-card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e9edf2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.cp-card-header h2 {
  font-size: 1rem;
  margin: 0;
}

.cp-card-body {
  padding: 1.25rem;
}

.cp-table {
  margin-bottom: 0;
}

.cp-table th {
  color: rgba(39,44,51,.54);
  font-size: .75rem;
  text-transform: uppercase;
  background-color: #f7f8fa;
}

.btn-cp {
  background: var(--cp-primary);
  border-color: var(--cp-primary);
  color: #fff;
}

.btn-cp:hover {
  background: #4052f6;
  border-color: #4052f6;
  color: #fff;
}

.badge.text-bg-primary { color: #fff; background-color: var(--cp-primary); }
.badge.text-bg-success { color: #fff; background-color: #77c13a; }
.badge.text-bg-danger { color: #fff; background-color: #d9534f; }
.badge.text-bg-warning { color: #272c33; background-color: #e4a93c; }
.badge.text-bg-secondary { color: #fff; background-color: #868e96; }
.badge.text-bg-info { color: #fff; background-color: #17a2b8; }
.badge.text-bg-dark { color: #fff; background-color: #303840; }

.gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }
.d-grid { display: grid !important; }
.g-3 { margin-right: -12px; margin-left: -12px; }
.g-3 > [class*="col"] { padding-right: 12px; padding-left: 12px; margin-bottom: 24px; }

.vh-thumb {
  width: 120px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #e9edf2;
  border-radius: .35rem;
}

.vh-code {
  min-height: 148px;
  font-family: Consolas, Monaco, monospace;
  font-size: .8125rem;
}

.layout-login-centered-boxed__form .navbar-brand {
  color: #303840;
}

@media (max-width: 767.98px) {
  .cp-top-logo {
    height: 26px;
    max-width: 118px;
  }

  .cp-login-logo {
    width: min(190px, 68vw);
  }

  .cp-sidebar-brand {
    min-height: 64px;
    padding: 14px 16px;
  }

  .cp-sidebar-logo,
  .cp-footer-logo {
    width: 122px;
  }

  .cp-card-header {
    align-items: flex-start;
  }

  .vh-thumb {
    width: 84px;
  }
}