html, body { height: 100%; }
body { display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
footer { flex-shrink: 0; }

:root {
  --error-border-color: var(--form-element-invalid-border-color);
  --error-color: var(--error-border-color);
  --success-border-color: var(--form-element-valid-border-color);
  --success-color: var(--success-border-color);
  --warning-border-color: #fb8c00;
  --warning-color: var(--warning-border-color);
  --info-border-color: var(--primary);
  --info-color: var(--info-border-color);
  --debug-border-color: var(--muted-border-color);
  --debug-color: var(--muted-color);
}

[data-theme="light"],
:root:not([data-theme="dark"]) {
  --nav-background-color: rgba(255,255,255,0.7);
  --nav-border-color: rgba(115,130,140,0.2);
}

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --nav-background-color: rgba(16,24,30,0.8);
  --nav-border-color: rgba(115,130,140,0.2);
  }
}

[data-theme="dark"] {
  --nav-background-color: rgba(16,24,30,0.8);
  --nav-border-color: rgba(115,130,140,0.2);
}

.error {
  --color: var(--error-color);
	--border-color: var(--error-border-color);
	border: var(--border-width) solid var(--border-color);
	border-radius: var(--border-radius);
  margin: 1rem 0;
  padding: 1rem 1rem;
}

.success {
  --color: var(--success-color);
	--border-color: var(--success-border-color);
	border: var(--border-width) solid var(--border-color);
	border-radius: var(--border-radius);
  margin: 1rem 0;
  padding: 1rem 1rem;
}

.warning {
  --color: var(--warning-color);
	--border-color: var(--warning-border-color);
	border: var(--border-width) solid var(--border-color);
	border-radius: var(--border-radius);
  margin: 1rem 0;
  padding: 1rem 1rem;
}

.info {
  --color: var(--info-color);
	--border-color: var(--info-border-color);
	border: var(--border-width) solid var(--border-color);
	border-radius: var(--border-radius);
  margin: 1rem 0;
  padding: 1rem 1rem;
}

.debug {
  --color: var(--debug-color);
	--border-color: var(--debug-border-color);
	border: var(--border-width) solid var(--border-color);
	border-radius: var(--border-radius);
  margin: 1rem 0;
  padding: 1rem 1rem;
}

.muted {
	color: var(--muted-color);
}

.nowrap {
  white-space: nowrap;
}

time {
  white-space: nowrap;
}

.help ul li {
  list-style: none;
  font-size: 0.875em;
}

input + .helptext,
select + .helptext {
	display: block;
	width: 100%;
	margin-top: calc(var(--spacing) * -0.75);
	margin-bottom: var(--spacing);
	color: var(--muted-color);
  font-size: 0.875em;
}

p.helptext {
	color: var(--muted-color);
  font-size: 0.875em;
}

form p > input[type="checkbox"] {
  margin-bottom: var(--spacing);
}

form a[role=button] {
    display: block;
    width: 100%;
    margin-bottom: var(--spacing);

}

ul.messagelist > li {
  color: var(--color);
  list-style: none;
  margin: .5rem 0;
  padding: .2rem 1rem;
}

/*
ul.messagelist > li::after {
  cursor: pointer;
  margin-left: 1em;
  margin-right: 1em;
  padding-left: 0.25em;
  padding-right: 0.25em;
  content: "\00d7"; /* This will render the 'X' */
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
}
*/

body > header, body > main {
  padding: 0;
}

body > header > nav {
  flex-direction: column;
}

body > nav {
  z-index: 99;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background-color: var(--nav-background-color);
  box-shadow: 0px 1px 0 var(--nav-border-color);
}

body > main > aside {
  margin-right: var(--spacing);
  margin-left: var(--spacing);
  width: 100%;
  max-width: 200px;
}

a[role="button"] {
  margin-top: calc(var(--spacing) / 2);
  margin-bottom: calc(var(--spacing) / 2);
}

@media (min-width: 576px) {
  body > main {
    display: flex;
  }

  body > header, body > main {
    padding: var(--spacing);
  }

  body > header > nav {
    flex-direction: row;
  }

  main > aside > nav {
  }
}

@media print {
    .no-print, .no-print *
    {
        display: none !important;
    }

    .pagebreak { 
      page-break-before: always; 
    }

    header {
      display: none !important;
    }

    footer {
      display: none !important;
    }

    figure {
      page-break-after: always;
    }
}