:root {
  --primary: #8cb3e8;
  --secondary: #003114;
  --tertiary: #eeee66;

  /* --primary-trans: hsl(from var(--primary) h s l / 75%); */
  --primary-light: color-mix(in srgb, var(--primary), var(--tertiary) 18%);
  --secondary-light: color-mix(in srgb, var(--secondary), var(--tertiary) 18%);

  --x-small-space: 0.125rem;
  --small-space: 0.25rem;
  --medium-space: 0.5rem;
  --large-space: 0.75rem;
  --x-large-space: 1rem;
  --massive-space: 1.75rem;
  
  --max-item-height: 20rem;
  --max-column-width: 30rem;
  
  --default-fonts: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
  font-family: var(--default-fonts);
}
dialog::backdrop {
  background: #003114b0;
}
form > select {
  display: block;
  margin: 2em 0em;
}
#fieldList {
  margin-top: 0em;
  padding-left: 1em;
  list-style: inside;
}
.actionAnchor {
  display: block;
  margin: 2em 1em;
}
.userInfo {
  display: flex;
}
div {
  padding: var(--large-space);
  border-color: var(--tertiary);
  border-style: solid;
  border-width: var(--x-small-space);
  border-radius: var(--small-space);
  overflow: hidden;
  margin-top: var(--small-space);
}
body {
  color: var(--tertiary);
  background-color: var(--secondary);
}
dialog {
  color: var(--tertiary);
  /* text-shadow: var(--x-small-space) var(--x-small-space) var(--secondary); */
  background-color: var(--primary);
  width: 90%;

  /* padding: var(--large-space); */
  border-color: var(--tertiary);
  border-style: solid;
  border-width: var(--small-space);
  border-radius: var(--small-space);
  overflow-x: hidden;
  overflow-y: scroll;
}
dialog > a {
  display: block;
  margin: var(--large-space);
}
a:link {
  color: var(--tertiary);
}
a:visited {
  color: var(--primary);
}
span > a {
  display: block;
  margin: var(--large-space);
}

div > :first-child {
  margin-block-start: var(--small-space);
}

details {
  background-color: var(--primary-light);
  border-radius: var(--small-space);
  padding: var(--medium-space);
  margin: var(--medium-space);
}

summary {
  margin-bottom: var(--large-space);
}

summary > :first-child {
  display: inline;
}

.row { 
  display: flex; 
}

.column50 { 
  flex: 50%; 
  margin: var(--small-space);
}

/* button {
  margin: var(--small-space) 0;
  background-color: var(--tertiary);
  border: none;
  border-radius: var(--small-space);
  color: var(--secondary);
  padding: var(--small-space) var(--medium-space);
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  display: inline-block;
  font-size: var(--x-large-space);
  font-family: var(--default-fonts);
  font-weight: bold;
  width: auto;
  height: auto;
}
button:active {
  background-color: var(--secondary);
  color: var(--tertiary);
} */