.hero { background: #eee; padding: 20px; border-radius: 10px; margin-top: 1em; }
.hero h1 { margin-top: 0; margin-bottom: 0.3em; }
.c4 { padding: 10px; box-sizing: border-box; }
.c4 h3 { margin-top: 0; }
.c4 a { margin-top: 10px; display: inline-block; }

i.ico.ico-sm { font-size: 20px; }

html, body { height: 100%; }
body { display: flex; flex-direction: column; }
.content { flex: 1 0 auto; }

.form-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-row label {
  margin: 0;
  white-space: nowrap;
}

footer {
  flex-shrink: 0;
  background-color: black;
  color:white;
  padding: 10px;
  font-size: 12px;
}

footer a { color: lightgrey;}

message { display: block; padding: 1.5em;
          border-left: 5px solid #44e; background: #def; }
message.message { border-color: #59d; background: #def; }
message.error { border-color: #e44; background: #fdd; }
message.warning { border-color: #fe3; background: #ffd; }
message.success { border-color: #2d2; background: #dfd; }

/* Based on https://alligator.io/css/collapsible/ */
input[type='checkbox'].toggle { display: none; }
.lbl-toggle {  display: block; cursor: pointer; transition: all 0.25s ease-out; }
.lbl-toggle:hover { color: #888; }
.lbl-toggle::before {
        content: ' '; display: inline-block;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 5px solid currentColor;
        vertical-align: middle;
        margin-right: .3rem;
        transform: translateY(-2px);
        transition: transform .2s ease-out;
}
.collapsible-content { max-height: 0px;  overflow: hidden; transition: max-height .25s ease-in-out;}
.toggle:checked + .lbl-toggle + .collapsible-content { max-height: 500px; }
.toggle:checked + .lbl-toggle::before { transform: rotate(90deg) translateX(-3px); }
.toggle:checked + .lbl-toggle { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }