/** CSS Specific to (or main for) the marker table */

table {
  display: table;
  border-collapse: collapse;
  white-space: normal;
  line-height: normal;
  font-weight: normal;
  border-spacing: 0;
  margin: auto;
  max-width: 95vw;
  font-size: 11pt;
  margin-bottom: 10px;
}

tbody {
  vertical-align: middle;
}

tr {
  display: table-row;
  padding: 5px;
}

td {
  padding-left: 5px;
  padding-right: 5px;
}

thead tr {
  background-color: transparent !important;
}

td>.timeInput {
  margin-left: 0;
}

table .buttonIconAndText {
  margin: 0px 1px 0px 1px;
}

#episodelist table {
  margin-top: 0px;
}

.tableHolder {
  max-width: 1000px;
  margin: auto;
  justify-content: center;
}

.spanningTableRow {
  text-align: center;
}

.timeColumn {
  min-width: 60px;
}

.shortTimeColumn {
  width: 80px !important;
}

.centeredColumn {
  text-align: center;
}

.userModifiedMarker {
  font-weight: bold;
}

.topAligned {
  vertical-align: top;
}

.topAlignedPlainText {
  vertical-align: top;
  padding-top: 5px;
}

.timeInput {
  font-family: monospace;
  width: 130px;
}

.timeInput.invalid {
  background-color: var(--error-background);
}

.thumbnailTimeInput {
  text-align: center;
}

.thumbnailTimeInput>.timeInput {
  margin: 5px auto 5px auto;
}

.thumbnailShowHide:hover {
  text-decoration: underline;
}

.inputThumb {
  display: block;
}

@keyframes initialLoad {
  0% { opacity: 1.0; }
  100% { opacity: 0.5; }
}

@keyframes loadLoop {
  0% { opacity: 0.5; }
  50% { opacity: 0.25; }
  100% { opacity: 0.5; }
}

.inputThumb.loading {
  opacity: 0.25;
  animation: initialLoad 500ms, loadLoop 2s ease-in-out 500ms infinite;
}

.inputThumb.loaded {
  opacity: 1.0;
}

.thumbnailError {
  opacity: 0.7;
}

.editByChapter {
  max-width: 230px;
  margin: 5px auto 5px auto;
}

.chapterSelect {
  display: inline-block;
  width: 100%;
  margin: auto;
  text-align: center;
}

.markerTableSpacer {
  height: 10px;
  width: 100%;
  margin: 0;
  padding: 0;
}

.inlineMarkerType {
  margin-top: 0;
}

.markerTableActionButton {
  margin-left: 5px;
  margin-right: 5px;
}

@media (min-width: 767px) { /* Probably not a phone */
  .tableHolder::-webkit-scrollbar {
    width: 0;
    height: 5px;
  }

  /* Track */
  .tableHolder::-webkit-scrollbar-track {
    background: transparent;
    width: 0;
    height: 5px;
  }

  .thumbnailEnabledTimeColumn {
    width: 250px !important;
  }

  .optionsColumn:not(.iconOptions) {
    min-width: 150px; /* "It works on my machine" */
  }

  .optionsColumn.iconOptions3 {
    min-width: 110px;
  }

  .optionsColumn.iconOptions2 {
    min-width: 67px;
  }
}

@media all and (max-width: 767px) { /* Probably a phone */
  .tableHolder {
    max-width: 95vw;
    overflow-x: auto;
  }

  .tableHolder::-webkit-scrollbar {
    width: 2px;
    height: 2px;
  }

  /* Track */
  .tableHolder::-webkit-scrollbar-track {
    background: transparent;
    width: 0;
    height: 2px;
  }

  .tableHolder td {
    font-size: smaller;
  }

  .thumbnailEnabledTimeColumn {
    width: 190px !important;
  }

  .optionsColumn.iconOptions2 {
    min-width: 60px; /* "It works on my machine" */
  }

  .optionsColumn.iconOptions3 {
    min-width: 90px;
  }
}