:root {
  --omqs-shell-tooltip-bg: rgba(0, 0, 0, 0.75);
  --omqs-shell-tooltip-border: rgba(0, 0, 0, 0.75);
  --omqs-shell-language-label: #ffffff;
  --omqs-shell-dropdown-bg: #0f1a3a;
  --omqs-shell-dropdown-fg: #ffffff;
  --omqs-shell-dropdown-hover: rgba(255, 255, 255, 0.1);
  --omqs-shell-switch-bg: #3a86ff;
  --omqs-shell-switch-active: #ff006e;
  --omqs-shell-topbar-bg: #ebf3ff;
  --omqs-shell-topbar-border: rgba(15, 23, 42, 0.08);
  --omqs-shell-topbar-fg: #0f172a;
  --omqs-shell-badge-bg: rgba(15, 23, 42, 0.08);
  --omqs-shell-avatar-bg: rgba(255, 255, 255, 0.9);
  --omqs-shell-avatar-fg: #0f172a;
}

html[data-theme="dark"] {
  --omqs-shell-topbar-bg: #0f0f0f;
  --omqs-shell-topbar-border: rgba(148, 163, 184, 0.16);
  --omqs-shell-topbar-fg: #e2e8f0;
  --omqs-shell-badge-bg: rgba(255, 255, 255, 0.08);
  --omqs-shell-avatar-bg: rgba(31, 41, 55, 0.85);
  --omqs-shell-avatar-fg: #f8fafc;
}

.tooltip .tooltiptext {
  background-color: var(--omqs-shell-tooltip-bg);
}

.tooltip .tooltiptext::after {
  border-color: var(--omqs-shell-tooltip-border) transparent transparent transparent;
}

#languageModalLabel {
  color: var(--omqs-shell-language-label) !important;
}

.dark-dropdown-menu {
  background-color: var(--omqs-shell-dropdown-bg);
}

.dark-dropdown-menu .dropdown-item {
  color: var(--omqs-shell-dropdown-fg) !important;
}

.dark-dropdown-menu .dropdown-item:hover {
  background-color: var(--omqs-shell-dropdown-hover);
}

.dark-dropdown-menu .form-check-input {
  background-color: var(--omqs-shell-switch-bg) !important;
  border-color: var(--omqs-shell-switch-bg) !important;
}

.dark-dropdown-menu .form-check-input:checked {
  background-color: var(--omqs-shell-switch-active) !important;
  border-color: var(--omqs-shell-switch-active) !important;
}

.topbar.topbar--revamp {
  background: var(--omqs-shell-topbar-bg);
  border-bottom: 1px solid var(--omqs-shell-topbar-border);
  color: var(--omqs-shell-topbar-fg);
}

.topbar__badge {
  background: var(--omqs-shell-badge-bg);
}

.topbar__avatar {
  background: var(--omqs-shell-avatar-bg);
  color: var(--omqs-shell-avatar-fg);
}