/** https://github.com/jamesread/femtocrank **/

:root {
  --karma-good: lightgreen;
  --border-color: #d7d7d7;
  --standout-bg-color: #f8f9fa;
}

html, body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background-color: #dee3e7;
  color: rgb(51, 65, 85);
}

a, a:visited { 
  color: blue;
}

a.active {
	text-decoration: underline;
}

ul {
	list-style: '\25b9    ';
	list-style-position: outside;
	padding-left: 1.4em;
}

main {
  margin: 0;
  padding: 1em;
  flex-grow: 1;
}

section {
  background-color: white;
  padding: 1em;
  border-radius: .4em;
  margin-bottom: 1em;
  box-shadow: 0 0 .5em #9a9a9a;
}

section.transparent {
	background-color: transparent;
	box-shadow: none;
}

section.small {
  max-width: 320px;
  border-radius: .8em;
}

section.small form {
	grid-template-columns: 1fr;
}

section.small fieldset {
  grid-column: span 1;
}

section.with-header-and-content {
  padding: 0;
}

section .section-header {
	background-color: #f8f9fa;
	border-radius: .4em;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom: 1px solid var(--border-color);
	padding-left: 1em;
	padding-right: .4em;
	padding-top: .4em;
	padding-bottom: .4em;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 1em;
}

section .section-header h2 {
	margin: 0;
	padding-top: .5em;
	padding-bottom: .5em;
}

section .section-header div[role="toolbar"] {
  margin-bottom: 0;
}

section .section-header .button {
  margin-bottom: 0;
}

section .section-subheader {
    padding-left: 1em;
	padding-top: .4em;
	padding-bottom: .4em;
	border-bottom: 1px solid var(--border-color);
}

section .section-subheader h3 {
	font-weight: 600;
	font-size: 1.1em;
	padding: 0;
	margin: 0;
}

section .section-content *:first-child {
	margin-top: 0;
}

section .section-content *:last-child {
	margin-bottom: 0;
}

.padding {
  padding: 1em;
}

header {
  background-color: #444;
  color: white;
  display: flex;
  box-shadow: 0px 0px 6px 5px #aaa;
  border-bottom: 1px solid #3f3f3f;
  align-items: center;
  gap: 1em;
  z-index: 3; /* So the header box-shadow shows over the top of the sidebar */
  min-height: 3em; /* .logo 2em + .5em padding */
}

header a, header a:visited {
  color: white;
  text-decoration: none;
  cursor: pointer;
}

header a.active {
  text-decoration: underline;
}

header img.logo {
  width: 2em;
  height: 2em;
  padding: .5em;
}

header p {
  margin: 0;
}

.icon {
  font-size: 2em;
}

.logo-and-title {
  display: flex;
  flex-direction: row;
  align-items: center;
}

h1 {
  margin: 0;
  margin-right: 1em;
  font-size: 1em;
}

h2 {
  font-weight: 800;
  font-size: 1.1em;
  letter-spacing: -.025em;
  margin-bottom: -.25em;
}

h2:first-child {
  margin-top: 0;
}

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

header nav li {
  display: inline-block;
}

header nav a {
  padding: .6em;
  border-radius: .4em;
  display: block;
}

pre {
  background-color: var(--standout-bg-color);
  border: 1px solid var(--border-color);
  padding: 1em;
  border-radius: .4em;
  overflow-x: auto;
  font-family: monospace;
  white-space: pre-wrap; /* Allows wrapping of long lines */
  text-align: left;
  margin-bottom: 0;
}

.br {
  border-radius: .4em;
}

.bs {
  box-shadow: 0 0 .5em #9a9a9a;
}

.annotation {
  border-radius: .4em;
  border: 1px solid var(--border-color);
  padding: .4em;
  margin: .4em;
  margin-top: .2em;
  margin-right: .2em;
  display: inline-block;
  background-color: #f8f9fa;
  color: black;
}

.annotation-key {
	border-radius: .4em 0 0 .4em;
	padding: .4em;
	display: inline-block;
	color: #666;
}

.annotation-val {
	border-radius: 0 .4em .4em 0;
	padding: .4em;
	display: inline-block;
	color: black;
}

.critical, .error, .bad {
  color: white !important;
  background-color: salmon;
}

.warning {
  color: black;
  background-color: moccasin;
}

.severe {
  color: black;
  background-color: lightsalmon;
}

.important {
  color: black;
  background-color: lightgoldenrodyellow;
}

.note {
  color: black;
  background-color: lightblue;
}

.info {
  color: black;
  background-color: #efefef;
}

.success, .good {
  background-color: var(--karma-good);
  color: black;
}

.old {
  background-color: wheat !important;
}

.notification {
  padding: 0.5em;
  border-radius: .4em;
  margin-bottom: 1em;
  cursor: pointer;
}

.notification a {
  color: black;
  font-weight: bold;
  text-decoration: none;
}

.inline-notification {
  border-radius: .4em;
  padding: .4em;
  box-shadow: 0 0 .4em #e1e1e1;
}

button, .button, .button:visited {
  padding-top: .4em;
  padding-bottom: .4em;
  padding-left: 1em;
  padding-right: 1em;
  border-radius: .4em;
  background-color: transparent;
  font-weight: bold;
  font-family: sans-serif;
  color: black;
  border: 1px solid var(--border-color);
  cursor: pointer;
  text-align: center;
  font-size: 1em;
  font-family: sans-serif;
  text-decoration: none;
}

header button:hover, header .button:hover {
  background-color: #6e6e6e;
  color: white;
}

button:hover, .button:hover {
  background-color: #e9e9e9;
}

button[type="submit"], button.good, .button.good {
  background-color: #488448;
  color: white;
  border: 0;
}

button[type="submit"]:hover, button.good:hover, .button.good:hover {
  background-color: #3a6f3a;
}

button:disabled, .button:disabled {
  background-color: #6e6e6e;
  color: #999;
  cursor: not-allowed;
}

button:disabled:hover, .button:disabled:hover {
  background-color: #6e6e6e;
}

button[type="reset"], button.bad, .button.bad {
  background-color: #d9534f;
  color: white;
  border: 0;
}

button[type="reset"]:hover, button.bad:hover, .button.bad:hover {
  background-color: #c9302c;
}

button[type="cancel"], button.warning, .button.warning {
  background-color: #c7872c;
  color: white;
  border: 0;
}

button[type="cancel"]:hover, button.warning:hover, .button.warning:hover {
  background-color: #b77a2c;
}

.subtle {
  color: #999;
  font-size: .9em;
}

.stat {
  font-size: 1.4em;
  font-weight: bold;
}

form {
  display: grid;
  gap: 1em;
  grid-template-columns: minmax(0, max-content) minmax(0, 600px);
  grid-template-rows: auto;
  flex-direction: column;
  border-radius: .4em;
  align-items: baseline;
}

label, span.fake-label {
  font-weight: bold;
  cursor: pointer;
}

select {
  padding: 1em;
  border-radius: .4em;
  border: 1px solid var(--border-color);
  font-family: sans-serif;
  background-color: white;
}

textarea {
  padding: 1em;
  border-radius: .4em;
  border: 1px solid var(--border-color);
  font-family: sans-serif;
  min-height: 6em;
}

textarea[readonly] {
  background-color: #f0f0f0;
  color: #666;
  font-style: italic;
}

input[type="text"], 
input[type="email"], 
input[type="password"], 
input[type="number"], 
input[type="url"],
input[type="datetime-local"] {
  padding: 1em;
  border-radius: .4em;
  border: 1px solid var(--border-color);
  font-family: sans-serif;
}

form input[type="checkbox"] {
  justify-self: start;
  padding: 0;
  margin: 0;
}

/**
input:invalid {
	border: 1px solid red;
	box-shadow: 0 0 5px red;
}
**/

input:disabled {
  cursor: not-allowed !important;
  background-color: #6e6e6e;
  color: #999;
}

fieldset {
  border: 0;
  display: flex;
  flex-direction: row;
  grid-column: span 2;
  padding: 0;
  gap: 1em;
  font-family: sans-serif;
  align-items: start;
}

label:has(input[type="checkbox"]) {
  border-radius: .4em;
  margin-right: .5em;
}

label:has(input[type="checkbox"]), label:has(input[type="radio"]) {
  align-items: center;
  gap: .5em;
  cursor: pointer;
  padding: .5em;
  user-select: none;
}

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

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

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

.radio-group {
  display: flex;
  flex-direction: row;
  gap: 0;
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: .4em;
}

.radio-group input[type="radio"] {
  border-radius: .4em;
}

.radio-group label {
  background-color: white;
  padding: .5em;
  cursor: pointer;
  flex-grow: 1;
  text-align: center;
}

.radio-group label:hover {
  background-color: #f0f0f0;
  color: white;
}

.radio-group label:first-child {
  border-radius: .4em 0 0 .4em;
}

.radio-group label:last-child {
  border-radius: 0 .4em .4em 0;
}

.grid {
  display: grid;
  gap: 1em;
  justify-content: center;
}

.grid-display {
  display: grid;
}

.grid-boxed {
  display: grid;
  gap: 1em;
  grid-template-columns: 1fr 1fr 1fr;
}

.grid section {
  margin-bottom: 0;
}

.gc-xl {
  grid-template-columns: repeat(auto-fit,minmax(500px,1fr));
}

.stat-display {
  border: 1px solid var(--border-color);
  background-color: var(--standout-bg-color);
  padding: 1em;
  border-radius: .4em;
}

.stat-display span.subtle {
  display: block;
}

.tac {
  text-align: center;
}

.blocktext {
  letter-spacing: 1px;
  text-transform: uppercase;
}

div[role="toolbar"] {
  display: flex;
  flex-direction: row;
  gap: 1em;
  align-items: center;
  margin-bottom: 1em;
}

table {
  width: 100%;
}

table, th, td {
  border: 0;
  border-bottom: 1px solid var(--border-color);
  border-collapse: collapse;
}

table.row-hover tr:hover td {
  background-color: beige;
  color: black;
}

td,th  {
  padding: .5em;
}

th {
  background-color: #EFF1F3;
  text-align: left;
}

th.small {
  width: 10%;
}

td.uneditable {
  background-color: #f0f0f0;
  font-weight: bold;
}

ul.noListStyle {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul[role="menubar"] {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul[role="menubar"] li {
  display: inline-block;
}

ul[role="menubar"] li span.submenu  {
  text-decoration: dotted underline;
}

ul[role=menubar] li div {
  position: absolute;
  display: none;
  box-shadow: 0 0 6px 0 #444;
}

ul[role=menubar] li:hover {
  background-color: beige;
}

ul[role=menubar] li span {
  cursor: pointer;
}

ul[role=menubar] li:hover div {
  display: block;
  background-color: #fff;
  min-width: 12em;
}

ul[role=menubar] li {
  border-radius: .5em;
}

header ul[role=menubar] li:hover ul {
  margin: 0;
  padding: 0;
}

ul[role=menubar] div ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul[role=menubar] div ul li {
  display: block;
  margin-right: 0;
}

ul[role=menubar] div ul a {
  text-decoration: none;
  display: block;
  padding: .2em;
}

header ul[role=menubar] div li a {
  border-radius: 0;
}

ul[role=menubar] div ul a:hover {
  background-color: beige;
}

header ul[role=menubar] div ul a:hover {
  background-color: #555;
}

header ul[role=menubar] a, header ul[role=menubar] a:visited {
  color: white;
  background-color: #444;
}

header ul[role=menubar] a:hover {
  background-color: #555;
}

aside {
  position: fixed;
  background-color: #fff;
  box-shadow: 0 0 .5em #9a9a9a;
  transition: left .5s, visibility .5s;
  min-width: 14em;
  width: 14em;
  visibility: hidden;
  left: -14em;
  height: 100vh;
  z-index: 2; /* So the sidebar box-shadow is above the main content */
}

aside.stuck { 
  position: static;
  height: auto; /* flex element */
}

aside.shown {
  visibility: visible;
  left: 0;
}

aside a, aside a:visited {
  text-decoration: none;
  color: black;
}

aside ul {
  list-style: none;
  padding: 0;
}

aside ul li a {
  text-decoration: none;
  display: block;
  padding: .4em;
  padding: .4em .6em;
}

aside a:hover {
  background-color: #f2f2f2;
}

footer {
  text-align: center;
  padding: .5em;
}

#layout {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}

#content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

footer span {
  padding: .5em 1em .5em 1em;
  border-radius: .5em;
  background-color: #c6d0d7;
  display: inline-block;
  margin-right: 1em;
}

.a11yhidden {
  position: absolute;
  left: -500px;
}

.a11yhidden:focus {
  left: 1em;
  background-color: black;
  border: 2px solid #555;
  border-radius: .5em;
  padding: .5em;
  color: white;
}

#sidebar-button {
  width: 14em;
  cursor: pointer;
  border-right: 1px solid #333;
  background-color: #444;
  display: flex;
  flex-direction: row;
}

#sidebar-button:hover {
  background-color: #666;
}

#sidebar-button .menu-icon {
  padding: .5em;
}

#sidebar-button .logo-and-title {
  flex-grow: 1;
}

dialog {
  border-radius: .4em;
  padding: 1em;
  max-width: 600px;
  margin: auto;
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

.vh {
  visibility: hidden;
}

.script-button {
  padding: .5em;
  cursor: pointer;
}

.fs2 {
  font-size: 2em;
}

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.fg0 {
  flex-grow: 0;
}

.fg1 {
  flex-grow: 1;
}

.g1 {
  gap: 1em;
}

.g2 {
  gap: 2em;
}

.flex-spacer {
  flex-grow: 1;
}

dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0;
}

dt:after {
	content: ':';
}

dt {
	font-weight: bold;
	border-right: 1px solid var(--border-color);
	text-align: right;
	padding: 0.6em;
}

dd {
	margin-left: 0;
	padding: 0.6em;
	word-break: break-word;
}

a svg, button svg, h2 svg {
	vertical-align: bottom;
}

@media (max-width: 600px) {
  header {
    gap: .5em;
  }

  header h1 {
  font-size: 1.2em;
  }

  header p {
  font-size: .8em;
  }

  header nav ul li {
  display: block;
  margin-right: 0;
  }

  main {
    padding: 0;
  }

  section {
	margin: 0;
	margin-top: 1em;
	border-radius: 0;
	padding: .75em;
  }

  .hide-small {
	display: none;
  }

  form {
	grid-template-columns: 1fr;
  }

  fieldset {
    grid-column: span 1;
  }

  aside.stuck {
    position: absolute;
	width: 100%;
  }

  dl {
    display: grid;
	grid-template-columns: 1fr;
  }

  dt {
	text-align: left;
	padding: 0;
	border-right: none;
  }

  dd {
	padding-left: 0;
	margin-bottom: .8em;
  }

  dt:after {
  }

}