html { 
     font-size: 32px; 
     font-family: sans-serif; 
     background: white;
     padding: 1rem; 
}

body { 
     font-size: 1em; 
     margin: 0 auto; 
}

h1 { font-family: serif; color: #377ba8; margin: 1rem 0; }
a { color: #377ba8; }
hr { border: none; border-top: 1px solid lightgray; }

header {
  background: lightgray;
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
}

header h1 {
  flex: auto;
  margin: 0;
}

header h1 a {
  text-decoration: none;
  padding: 0.25rem 0.5rem;
}


nav {
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
}

nav h1 {
  flex: auto;
  margin: 0;
}

nav h1 a {
  text-decoration: none;
  padding: 0.25rem 0.5rem;
}

nav ul  {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li a, nav ul li span, header .action {
  display: block;
  padding: 0.5rem;
}

.content { font-size: 1em; padding: 0 1rem 1rem; }
.content > header { border-bottom: 1px solid lightgray; display: flex; align-items: flex-end; }
.content > header h1 { flex: auto; margin: 1rem 0 0.25rem 0; }
.flash { margin: 1em 0; padding: 1em; background: #cae6f6; border: 1px solid #377ba8; }

.content form {
  margin: 1em 0;
  display: flex;
  flex-direction: column;
}

.content label {
  font-weight: bold;
  margin-bottom: 0.5em;
}

.content input, .content textarea {
  margin-bottom: 1em
}
.content textarea {
  min-height: 12em;
  resize: vertical;
}

input.danger {
  color: #cc2f2e;
}


input {
  margin-top: 4px;
  margin-bottom: 4px;
  font-size: 1em;
  align-self: start;
  min-width: 10em;
}

select {
  margin-top: 4px;
  margin-bottom: 4px;
  font-size: 1em;
  align-self: start;
  min-width: 10em;
}


input[type=submit] {
//background: #2A88AD; 
background: #6fbddc;
border-radius: 5px;
font-size: 16px;
padding: 6px;
color: #000000;
border: 1px solid #257C9E;
align-self: start;
min-width: 10em;
}



input[type="radio"]{
width: 32px;
height: 32px;
} 


table {
      border-collapse: collapse;
}

th, td {
   padding: 7px 10px 10px 10px; 
}

th {
   text-transform: uppercase;
   border-bottom: 2px solid #111111;
   border-top: 1px solid #999;
   border-left: 1px solid lightgray;
   border-right: 1px solid lightgray;
   text-align: left;
}


tr.even {
 background-color: #efefef;
}

td {
   border: 1px solid lightgray;
}