/* Sticky footer styles */
html {
  position: relative;
  min-height: 100%;
}

body {
  padding-bottom: 30px;
  margin-bottom: 60px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 40px;
  background-color: #545858;
}

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

.bg-img {
  min-height: 280px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Templates still render plain form fields via {{ form.as_p }} rather than
   setting widget attrs={"class": "form-control"} -- style them generically
   here instead of touching every form class. */
main form input:not([type=submit]):not([type=checkbox]):not([type=radio]),
main form select,
main form textarea {
  display: block;
  width: 100%;
  max-width: 480px;
  padding: 0.375rem 0.75rem;
  margin-bottom: 0.5rem;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

/* Sortable table column headers -- a bare <a> in a <th> is easy to miss as
   clickable, so make the whole header cell look and behave like a control:
   no link-blue/underline, a visible hover state, and a sort indicator that's
   present (muted) on every sortable column, not just the active one. */
th.sortable-th {
  padding: 0;
}
th.sortable-th a {
  display: block;
  padding: 0.75rem;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
th.sortable-th a:hover {
  background-color: rgba(0, 0, 0, 0.06);
  text-decoration: none;
}
th.sortable-th a .sort-arrow {
  color: #999;
  font-size: 0.85em;
  margin-left: 0.25em;
}
th.sortable-th a.active {
  font-weight: bold;
}
th.sortable-th a.active .sort-arrow {
  color: inherit;
}