/*
Generic Styling, for Desktops/Laptops
*/
table {
  width: 100%;
  table-layout: fixed;
}

img {
  max-width: 100%;
  max-height: 80px;
  /* set the maximum width of the image to 100% of the cell's width */
}

th:nth-of-type(1) {
  width: 4%;
}

/* Zebra striping */
tr:nth-of-type(odd) {
  background: #eee;
}

th {
  background: #333;
  color: white;
  font-weight: bold;
}

tr[data-status='new'] {
  background-color: #d9edf7;
}

td,
th {
  padding: 6px;
  border: 1px solid #ccc;
  text-align: left;
  word-wrap: break-word;
}


.sticky-top-bar {
  position: sticky;
  top: 0;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  z-index: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

/* Search field */
.search-field {
  border-radius: 5px;
  padding: 5px 10px;
  width: 100%;
  max-width: 500px;
}

/* Prev and Next Buttons */
.reset-button {
  border-radius: 5px;
  padding: 5px 10px;
  width: auto;
}

/* Prev and Next Buttons */
.navigate-buttons {
  position: sticky;
  bottom: 0;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  z-index: 1;
}

.navigate-button {
  border-radius: 5px;
  padding: 5px 10px;
  width: 100%;
}

/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {

  /* Prev and Next Buttons */
  .navigate-buttons {
    position: sticky;
    bottom: 0;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    z-index: 1;
    flex-direction: column;
    padding: 10px;
  }

  .navigate-buttons-1,
  .navigate-buttons-2 {
    width: 100%;
    margin-bottom: 10px;
  }

  .navigate-button {
    border-radius: 5px;
    padding: 5px 10px;
    width: 100%;
  }

  /* Force table to not be like tables anymore */
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }

  /* Hide table headers (but not display: none;, for accessibility) */
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr {
    border: 1px solid #ccc;
  }

  td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 22%;
  }

  td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
  }

  td:nth-of-type(1):before {
    content: 'Nr.';
  }

  td:nth-of-type(2):before {
    content: 'Nr. ww:';
  }

  td:nth-of-type(3):before {
    content: '';
  }

  td:nth-of-type(4):before {
    content: 'Followers:';
  }

  td:nth-of-type(5):before {
    content: '';
  }

  td:nth-of-type(6):before {
    content: '';
  }

  td:nth-of-type(7):before {
    content: '';
  }

  td:nth-of-type(8):before {
    content: 'Name:';
  }

  td:nth-of-type(9):before {
    content: 'Bio:';
  }

  td:nth-of-type(10):before {
    content: 'Location:';
  }

  td:nth-of-type(11):before {
    content: 'Joined:';
  }

  td:nth-of-type(12):before {
    content: 'Private:';
  }

  td:nth-of-type(13):before {
    content: 'Import:';
  }
}