html, body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  height: 100%;
  color: white;
  background-color: #222; }

.identified {
  background-color: #232; }

.bad-bird {
  background-color: #422; }

.new-bird {
  background-color: #440; }

#stored-list {
  margin-top: 2em; }

@media (prefers-color-scheme: light) {
  background-color: #FFF;
  color: #111; }

.sightings-links a {
  padding-right: 1em;
  font-size: 24px; }

.saved-item {
  padding-bottom: 1em; }

input[type="radio"]:not(:first-child) {
  margin-left: 1em; }

#observation-location label {
  width: 80px;
  display: inline-block; }

#observation-location input[type="checkbox"] {
  width: 1em; }

#blockers {
  margin-top: 1em; }
  #blockers .blocker {
    background-color: #422; }

#sightings-table tr {
  border-top: 1px solid white; }

#sightings-table tr.notes {
  border-top: 0; }

#sightings-table td {
  border: 0; }

table td {
  padding: 6px; }

.families-table .date {
  width: 150px; }

.families-table .juv {
  width: 30px; }

.families-table .location {
  width: 180px; }

.cring {
  color: white;
  font-family: monospace;
  background-color: #00F;
  padding: 2px 3px 2px 3px;
  border: 1px solid white; }

.mring {
  background-color: #ddd;
  color: black;
  font-family: monospace;
  padding: 2px 3px 2px 3px;
  border: 1px solid black; }

.nickname {
  background-color: #efe;
  color: black;
  padding: 2px 3px 2px 3px;
  border: 1px solid black; }

h2 {
  padding-top: 18px;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px; }

.families-table thead {
  font-weight: 700; }

.families-table td {
  border: 1px dotted; }

tr.notes-row input {
  width: 35em; }

.search-results .search-row {
  margin: 10px 0 10px 0;
  padding: 10px 0 10px 5px;
  background-color: #484848; }
  .search-results .search-row label {
    margin-left: 1rem;
    padding: 7px 5px 3px 5px;
    border: 2px solid #484848; }
  .search-results .search-row input {
    width: 2rem; }
  .search-results .search-row .btn {
    float: right;
    font-size: 36px;
    margin-top: 0;
    background-color: green;
    border: 0;
    margin-right: 5px; }
  .search-results .search-row .search-partner {
    margin-top: 8px; }
    .search-results .search-row .search-partner label.present {
      border: 2px solid green; }
    .search-results .search-row .search-partner label.absent {
      border: 2px solid red; }

@media screen and (max-width: 800px) {
  body {
    font-size: 24px; }
  input, button {
    font-size: 24px; }
  td.input-cell {
    display: inline-block; }
  .hide-xs {
    display: none !important; }
  #pending-sightings, #sighting-input-table {
    table-layout: fixed;
    width: 100%; }
  section {
    padding: 1.5rem !important; }
  input {
    width: 16rem; }
  input[type=radio] {
    width: 0;
    margin-left: 0;
    appearance: none; }
  #pending-sightings {
    width: 100%;
    font-size: 16px; }
    #pending-sightings input, #pending-sightings button {
      font-size: 18px; }
    #pending-sightings td {
      padding: 0.25rem, 0.25rem, 0.25rem, 0.25rem; }
    #pending-sightings td.partner-identifier, #pending-sightings td.identifier {
      width: 6em; }
      #pending-sightings td.partner-identifier input, #pending-sightings td.identifier input {
        width: 6rem; }
    #pending-sightings td.juv {
      width: 2em; }
      #pending-sightings td.juv input {
        width: 2em; }
    #pending-sightings td.del {
      width: 1em;
      text-align: right; }
      #pending-sightings td.del button {
        padding: 1px 4px 1px 4px; }
    #pending-sightings td.notes {
      width: 100%; }
      #pending-sightings td.notes input {
        width: 100%; }
    #pending-sightings td.input-cell {
      border: 0; }
    #pending-sightings td.species {
      display: inline-block; }
    #pending-sightings td.new {
      display: inline-block; }
  #observation-form table td {
    border: 0;
    padding-left: 0;
    padding-right: 0; }
    #observation-form table td input {
      width: 19rem; }
  #observation-form textarea {
    width: 19rem; } }

button {
  font-size: 26px;
  margin: 0;
  padding: 5px;
  border: 0;
  background-color: green; }
  button .danger {
    background-color: red; }

.absent {
  text-decoration: line-through;
  text-decoration-color: red;
  text-decoration-thickness: 3px; }