* {
  margin:     0;
  padding:    0;
  box-sizing: border-box;
}

@font-face {
  font-family: LiberationSans;
  src:         url("/static/ui/liberation-sans/LiberationSans-Regular.ttf") format("truetype");
}
@font-face {
  font-family: LiberationSansBold;
  src:         url("/static/ui/liberation-sans/LiberationSans-Bold.ttf") format("truetype");
}

html {}
body { font-family: sans-serif; background: #fff; line-height: 1.5; }

h1, h2, h3, h4, h5, h6 { font-family: sans-serif; color: #444; }
p { margin: 1rem 0; }
ul, ol { margin: 1rem; }
a:link { color: #000; }
a:visited { color: #666; }
a:hover { color: #888; }

header {
  max-width: 100%; margin: auto; padding: 0 30px 0 10px;
  display:   flex; align-items: center; justify-content: space-between;
  height:    85px; border-bottom: 1px solid #ccc; }
/*header .left { display: flex; }*/
/*header .left img { display: block; }*/
header .left { position: relative; }
header .left .x23 {
  height: 35px; position: absolute; z-index: 10;
  top:    -10px; left: 15px;
}
header .left .oak {
  height: 190px; position: absolute;
  top:    -133px; left: 45px; z-index: -1;
}
header .right { display: flex; flex-direction: column; gap: 0.2rem; }
header nav { font-size: 0.9rem; display: flex; align-items: center; gap: 0.4rem; justify-content: flex-end; }

nav a:link, nav a:visited { color: #000; }
nav a:hover { color: #666; }
nav.user button {
  padding:   0; margin: 0; background: transparent; border: 0;
  font-size: 0.9rem; text-decoration: underline; cursor: pointer;
}
nav.user button:hover { color: #666; }

.mainEnv { width: 100%; background: #fff; padding-top: 1.5rem; }
main { max-width: 920px; margin: auto; padding: 20px 30px 30px; background: #fff; }

footer {
  max-width:  100%; margin: auto; font-size: 0.8rem; padding: 40px 30px 50px;
  background: #eee;
  display:    flex; justify-content: space-between;
}
footer nav { display: flex; flex-direction: column; gap: 0.2rem; }

time { font-size: 0.8rem; text-transform: uppercase; color: grey; display: block; }

button { padding: 3px 10px 2px 6px; }
/*button div { display: flex; align-items: center; gap: 3px; }*/
button span { display: flex; align-items: center; gap: 3px; }
button svg { width: 16px; fill: #333; }

button[type=submit] {
  background:    #555; color: #fff;
  border:        1px solid #333;
  border-radius: 2px;
  padding:       4px 15px 3px 10px;
}
button[type=submit]:hover { background: #444; border-color: #000; }
button[type=submit]:active { background: #111; border-color: #666; }
button[type=submit] svg { fill: #fff; }

button[name=trash] { background: darkred; border-color: #333; }
button[name=trash]:hover { background: firebrick; border-color: darkred; }
button[name=trash]:active {
  background: red; border-color: indianred;
}

input[type=text],
input[type=date],
input[type=time],
input[type=password],
textarea { width: 100%; padding: 0.2rem; }
select { padding: 0.2rem; }

.error { color: red; font-size: 0.9rem; }
.error:first-letter { text-transform: capitalize; }
.error h3 { color: darkred; margin-bottom: 0; }
.error p { margin: 0.4em 0; }
.error a { color: darkred; }
.error-summary { color: red; font-size: 1rem; }

.debug pre { margin-bottom: 1.6em; white-space: pre-wrap; }

.centerVertical { display: flex; align-items: center; gap: 0.6rem; }

/* Dropdown */
.dropdown { position: relative; }
.dropdown-menu {
  opacity:          0;
  pointer-events:   none;
  transform:        translateY(-10px);
  transition:       opacity 150ms ease-in-out, transform 150ms ease-in-out;

  position:         absolute;
  background-color: #fff;
  box-shadow:       0 2px 5px 0 rgba(0, 0, 0, 0.1);
  left:             0;
  top:              calc(100% + 0.0rem); /* distance from top */
}

.dropdown button {
  font-size:  0.9rem;
  background: transparent; border: 0; padding: 0;
  cursor:     pointer; text-decoration: none; }

.dropdown-menu a {
  white-space: nowrap; display: block;
  padding:     0.4rem 0.8rem; }
.dropdown-menu a:link,
.dropdown-menu a:visited { color: #000; }
.dropdown-menu a:hover { background-color: gainsboro; }

.dropdown:hover .dropdown-menu {
  transform:      translateY(0);
  opacity:        1;
  pointer-events: auto;
}