:root {
  --n92-bg: #303030;
  --n92-bg-soft: #3a3a3a;
  --n92-accent: #375a7f;
  --n92-accent-hover: #446b94;
  --n92-text: #f2f2f2;
  --n92-text-soft: #d2d2d2;
  --n92-border: #4a4a4a;
}

/* General page background */
body,
#app,
.app-container,
.shell,
.content,
.menu,
.navigation {
  background-color: var(--n92-bg) !important;
  color: var(--n92-text) !important;
}

/* Header / top bar */
header,
.top-bar,
.navbar,
[role="navigation"] {
  background-color: var(--n92-bg-soft) !important;
  border-color: var(--n92-border) !important;
  color: var(--n92-text) !important;
}

/* Sidebar */
aside,
.sidebar,
.menu,
.project-view .menu {
  background-color: var(--n92-bg-soft) !important;
  border-right: 1px solid var(--n92-border) !important;
}

/* Cards / panels / modals */
.card,
.box,
.panel,
.modal-card,
.task,
.project-card,
.list-view,
.table-view {
  background-color: var(--n92-bg-soft) !important;
  color: var(--n92-text) !important;
  border-color: var(--n92-border) !important;
}

/* Inputs */
input,
textarea,
select,
.input,
.textarea,
.select select {
  background-color: #2a2a2a !important;
  color: var(--n92-text) !important;
  border: 1px solid var(--n92-border) !important;
}

input::placeholder,
textarea::placeholder {
  color: #b8b8b8 !important;
}

/* Primary buttons */
.button.is-primary,
button.is-primary,
.button.primary,
button.primary {
  background-color: var(--n92-accent) !important;
  border-color: var(--n92-accent) !important;
  color: #ffffff !important;
}

.button.is-primary:hover,
button.is-primary:hover,
.button.primary:hover,
button.primary:hover {
  background-color: var(--n92-accent-hover) !important;
  border-color: var(--n92-accent-hover) !important;
}

/* Links */
a {
  color: #79a7d6 !important;
}

a:hover {
  color: #a8c6e6 !important;
}

/* Selected / active states */
.is-active,
.router-link-active,
.active,
.menu-list a.is-active,
a.router-link-exact-active {
  background-color: var(--n92-accent) !important;
  color: #fff !important;
}

/* Tables */
table,
thead,
tbody,
tr,
td,
th {
  border-color: var(--n92-border) !important;
  color: var(--n92-text) !important;
}

thead,
th {
  background-color: #383838 !important;
}

/* Dropdowns / popovers */
.dropdown-content,
.popover,
.menu-list,
.context-menu {
  background-color: var(--n92-bg-soft) !important;
  border: 1px solid var(--n92-border) !important;
  color: var(--n92-text) !important;
}

/* Login screen tweaks */
.login,
.auth,
.hero,
.hero-body {
  background-color: var(--n92-bg) !important;
  color: var(--n92-text) !important;
}

/* Make icons slightly harmonize */
svg,
.icon {
  color: currentColor !important;
}

.api-url-info {
  display: none !important;
}