.phet-data-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: solid black .1em;
}

.phet-data-table th {
  height: 50px;
}

.phet-data-table th:first-child,
.phet-data-table td:first-child {
  border-left: none;
}

.phet-data-table th,
.phet-data-table td {
  text-align: center;
  border-left: solid black .1em;
  font-size: 13px;
  padding: 0;
}

.phet-data-table thead {
  background-color: lightgrey;
  border-bottom: solid black .1em;
}

.phet-data-table thead tr {
  display: block;
  position: relative;
}

.phet-data-table tbody {
  display: block;
  overflow-y: scroll;
  overflow-x: hidden;
  width: 100%;
  max-height: 419px;
}

.phet-data-table tr {
  width: 100%;
  display: block;
  border-bottom: solid black .1em;
}

.phet-data-table tr:last-child {
  border-bottom: none;
}

.phet-data-table td:last-child i {
  width: 100%;
  margin: auto;
}

.phet-data-table th:last-child {
  padding-left: 4px;
}

.phet-data-table .fa-arrow-circle-up:hover,
.phet-data-table .fa-arrow-circle-down:hover,
.phet-data-table .fa-play-circle:hover,
.phet-data-table .fa-times-circle:hover,
.phet-data-table #phet-data-table-record:hover {
  cursor: pointer;
}

.phet-data-table #phet-data-table-record:hover {
  background: #A0D1FF;
}

.phet-data-table .fa-play-circle:hover {
  color: #A0D1FF;
}

.phet-data-table i.fa-arrow-circle-down:hover,
.phet-data-table i.fa-arrow-circle-up:hover,
.phet-data-table i.fa-times-circle:hover {
  color: #444444;
}

/* Increment/Decrement buttons */
.phet-data-table .fa-arrow-circle-up,
.phet-data-table .fa-arrow-circle-down,
.phet-data-table .fa-times-circle {
  color: black;
}

/* disabled increment/decrement buttons */
.phet-data-table tbody tr:first-child .fa-arrow-circle-up,
.phet-data-table tbody tr:last-child .fa-arrow-circle-down {
  color: grey;
  cursor: auto;
}

.phet-data-table td.screenshot img {
  width: 80px;
}

/* Restore sim button */
.phet-data-table .fa-play-circle {
  color: cornflowerblue;
  font-size: 40px;
  vertical-align: top;
  margin-top: 16px;
}

/* Delete row button */
.phet-data-table i.fa-times-circle {
  padding: 5px;
}

.phet-data-table p {
  margin: 0;
}

button#phet-data-table-record {
  margin: 20px 0px;
}

.phet-data-table div#data-table {
  padding-bottom: 100px;
}

.phet-data-table .thumbnail {
  padding: 5px;
}