:root {
  --one-sec-black: #080709;
  --one-sec-surface: #252527;
  --one-sec-surface-muted: #333335;
  --one-sec-yellow: #fbc937;
  --one-sec-purple: #7f7fde;
  --one-sec-purple-strong: #5a5ac7;
  --one-sec-purple-dark: #4d4db8;
  --one-sec-purple-light: #b2b2ff;
  --one-sec-sky: #b8f3ff;
  --one-sec-text: #1c1c1e;
  --one-sec-muted: #6f6f78;
  --one-sec-border: rgba(8, 7, 9, 0.12);

  --bs-primary: var(--one-sec-purple-strong);
  --bs-primary-rgb: 90, 90, 199;
  --bs-link-color: var(--one-sec-purple-dark);
  --bs-link-hover-color: var(--one-sec-text);
  --navi-color: var(--one-sec-purple-strong);
  --focus-color: var(--one-sec-yellow);
  --hover-color: var(--one-sec-purple-dark);
}

body {
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) {
    --bs-primary: var(--one-sec-purple-light);
    --bs-primary-rgb: 178, 178, 255;
    --bs-link-color: var(--one-sec-purple-light);
    --bs-link-hover-color: var(--one-sec-yellow);
    --navi-color: var(--one-sec-purple-light);
    --focus-color: var(--one-sec-yellow);
    --hover-color: var(--one-sec-yellow);
  }
}

:root[data-bs-theme="dark"],
body[data-theme="dark"] {
  --bs-primary: var(--one-sec-purple-light);
  --bs-primary-rgb: 178, 178, 255;
  --bs-link-color: var(--one-sec-purple-light);
  --bs-link-hover-color: var(--one-sec-yellow);
  --navi-color: var(--one-sec-purple-light);
  --focus-color: var(--one-sec-yellow);
  --hover-color: var(--one-sec-yellow);
  --one-sec-border: rgba(255, 255, 255, 0.14);
}

header .navbar,
.navbar.bg-dark {
  background: var(--one-sec-black) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.navbar .navbar-brand,
.navbar .nav-link,
.navbar .dropdown-toggle {
  color: rgba(255, 255, 255, 0.86);
}

.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus,
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .dropdown-toggle:hover,
.navbar .dropdown-toggle:focus {
  color: var(--one-sec-yellow);
}

.navbar .navbar-brand img,
.navbar .navbar-brand svg {
  max-height: 32px;
}

a {
  color: var(--bs-link-color);
}

a:hover,
a:focus {
  color: var(--bs-link-hover-color);
}

.btn {
  border-radius: 8px;
}

.btn-primary,
.btn-info {
  background-color: var(--one-sec-purple-strong);
  border-color: var(--one-sec-purple-strong);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-info:hover,
.btn-info:focus {
  background-color: var(--one-sec-purple-dark);
  border-color: var(--one-sec-purple-dark);
  color: #fff;
}

.btn-warning {
  background-color: var(--one-sec-yellow);
  border-color: var(--one-sec-yellow);
  color: var(--one-sec-black);
}

.btn:focus,
.btn:focus-visible,
.form-control:focus,
.form-select:focus {
  border-color: var(--one-sec-purple);
  box-shadow: 0 0 0 0.2rem rgba(127, 127, 222, 0.28);
}

.card,
.dropdown-menu,
.list-group-item {
  border-color: var(--one-sec-border);
  border-radius: 8px;
}

.progress-bar,
.badge.bg-primary,
.text-bg-primary {
  background-color: var(--one-sec-purple-strong) !important;
}

:root[data-bs-theme="dark"] .progress-bar,
body[data-theme="dark"] .progress-bar,
:root[data-bs-theme="dark"] .badge.bg-primary,
body[data-theme="dark"] .badge.bg-primary,
:root[data-bs-theme="dark"] .text-bg-primary,
body[data-theme="dark"] .text-bg-primary {
  background-color: var(--one-sec-purple) !important;
  color: var(--one-sec-black) !important;
}

.alert-info {
  border-color: rgba(127, 127, 222, 0.32);
}

.alert-warning {
  border-color: rgba(251, 201, 55, 0.55);
}

.breadcrumb a,
.nav-pills .nav-link,
.pagination .page-link {
  color: var(--bs-link-color);
}

.nav-pills .nav-link.active,
.pagination .page-item.active .page-link {
  background-color: var(--one-sec-purple-strong);
  border-color: var(--one-sec-purple-strong);
  color: #fff;
}

:root[data-bs-theme="dark"] .nav-pills .nav-link.active,
body[data-theme="dark"] .nav-pills .nav-link.active,
:root[data-bs-theme="dark"] .pagination .page-item.active .page-link,
body[data-theme="dark"] .pagination .page-item.active .page-link {
  background-color: var(--one-sec-purple);
  border-color: var(--one-sec-purple);
  color: var(--one-sec-black);
}