@layer components {
@media (prefers-color-scheme: dark) {
:root {
  --border-color: #595959;
  --hover-background-color: #1d345c;

  --header-hover-background-color:#1d345c;
  --standout-bg-color: #1f1f1f;
  --disabled-background-color: #333;
  --disabled-text-color: #999;
}

header {
  background-color: black;
  box-shadow: 0px 0px 1em #1c1c1c;
  border-bottom: 1px solid #222;
}

body {
  background-color: #262626;
  color: #ddd;
}

section {
  background-color: #343434;
  color: #ddd;
  box-shadow: 0 0 .5em #121212;
}

section .section-header {
  background-color: #343434;
  border-bottom-color: var(--border-color);
}

section .section-subheader {
  border-bottom-color: var(--border-color);
}

button, .button {
  color: #ddd;
  border: 1px solid var(--border-color);
}

button:hover, .button:hover, .button:hover, .button:visited {
  background-color: var(--hover-background-color);
  color: white;
}

footer a, footer a:visited {
  color: lightblue;
}

header ul[role="menubar"] a, header ul[role="menubar"] a:visited {
  background-color: black;
}

header ul[role="menubar"] a:hover {
  background-color: var(--hover-background-color);
}

header div > ul > li > a {
  background-color: black;
  color: white;
}

ul[role="menubar"] div ul a:hover {
  background-color: var(--hover-background-color);
  color: white;
}

ul[role="menubar"] li:hover {
  background-color: var(--hover-background-color);
}

label:has(input[type="checkbox"]):hover, label:has(input[type="radio"]):hover {
  background-color: var(--hover-background-color);
  color: white;
}

label:has(input:checked) {
  background-color: #488448;
  color: white;
}

label:has(input:checked):hover {
  background-color: #3a6f3a;
  color: white;
}

a, a:visited, aside a, aside a:visited {
  color: lightblue;
}

table, th, td {
  border-color: var(--border-color) !important;
}

table.row-hover tr:hover td {
  background-color: var(--hover-background-color);
  color: white;
}


footer span {
  background-color: #444;  
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="color"],
input[type="datetime-local"] {
  background-color: #4e4e4e;
  color: #ddd;
  border-color: var(--border-color);
}

select {
  background-color: #4e4e4e;
  color: #ddd;
  border-color: var(--border-color);
}

textarea {
  background-color: #4e4e4e;
  color: #ddd;
  border-color: var(--border-color);
}

.grid-boxed .stat-display { 
  background-color: var(--standout-bg-color);
  border-color: var(--border-color) !important;
}

pre {
  background-color: var(--standout-bg-color);
  color: #ddd;
  border: 1px solid var(--border-color);
}

.radio-group {
  border-color: var(--border-color);
}

.radio-group label {
  background-color: #555;
}

aside {
  background-color: #000;
  box-shadow: 0 0 .5em #121212;
}

aside ul li a:hover {
  background-color: var(--hover-background-color);
}

dt {
  border-color: var(--border-color);
}

.annotation, .tag, .inline-notification {
  background-color: var(--standout-bg-color);
  color: #ddd;
  border-color: var(--border-color);
}

.annotation-val {
  color: #ddd;
}
}
}