*,
*::after,
*::before {
  box-sizing: border-box;
}

:root {
  --clr-primary: #172b4d;
  --clr-secondary: #5e6c84;
  --clr-background: #f4f5f7;
  --clr-button: #eaecf0;
  --clr-selected: #e2e4e9;
  --clr-gray: #e4e4e4;
  --fw-normal: 500;
  --fw-bold: 700;
  --fw-black: 900;

  --fs-normal: 16px;
  --lh-normal: 25px;
  --fs-p-small: 14px;
  --lh-p-small: 21px;
  --fs-item: 12px;
  --lh-p-item: 18px;

  --sz-text-width: 11.25em;
  --sz-num-width: 7.5em;
  --sz-xsmall-width: 1.5em;
  --sz-small-width: 5em;
  --sz-medium-width: 6em;
  --sz-large-width: 11.25em;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
  background-color: var(--clr-background);
  color: var(--clr-primary);
  font-size: var(--fs-normal);
  line-height: var(--lh-normal);
}

.container {
  width: 75rem;
  margin: 0 auto;
}

h1 {
  color: var(--clr-primary);
  font-size: 45px;
  margin-bottom: 0.8rem;
}

h2 {
  font-size: 32px;
  line-height: 38px;
  margin: 0.3rem 0 1.2rem;
}

h3 {
  font-size: 22px;
  line-height: 30px;
}

.content {
  display: flex;
}

/* start aside */
aside {
  height: 80vh;
  overflow: hidden;
  overflow-y: scroll;
  padding: 0 12px;
}

.playlist {
  width: 20%;
  min-width: 15rem;
}

.item {
  display: flex;
  justify-content: space-between;
}

.videoclip {
  display: flex;
}

.small-thumbnail {
  background-color: var(--clr-secondary);
  width: 80px;
  height: 60px;
}

.details {
  display: flex;
  flex-direction: column;
  position: relative;
}

.details > .description {
  display: block;
}

.details > .duration {
  position: absolute;
  bottom: 0;
}
.status {
  align-self: center;
  text-align: right;
}
/* end aside */

.main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background-color: var(--clr-background);
}

.video-preview {
  /* height: 200px; */
}
.video-details {
  background-color: var(--clr-background);
}
.title-and-controls {
  width: 640px;
  padding: 0.8em 0 0.2em;
}
.video-title {
  font-size: 22px;
}

.video-yt-id {
  color: var(--clr-background);
}
.debug {
  /* color: var(--clr-primary); */
}
.video-icons {
  display: inline;
  float: right;
  padding-right: 0.4em;
  cursor: pointer;
}

.fas:hover {
  color: var(--clr-secondary);
}

.slidersSection {
  position: relative;
  border: 1px solid black;
  background-color: rgb(244, 244, 190);
  height: 100px;
  width: 960px;
}
#myCanvas {
  position: absolute;
}
.buttons {
  background-color: var(--clr-background);
  padding-bottom: 2em;
}
button {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  color: var(--clr-secondary);
  background-color: var(--clr-button);
  padding: 0.6rem;
  border: 1px solid var(--clr-gray);
  margin: 0.8em 0.1em 0.2rem;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
  font-size: var(--fs-normal);
  line-height: var(--lh-normal);
}

button:hover {
  background-color: var(--clr-selected);
}

/* subtitle table */
.line {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  flex-grow: 0;
  -webkit-flex-grow: 0;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  width: 100%;
  padding-left: 0.938em;
  padding-right: 0.938em;
  background-color: var(--clr-background);
}

/* Text based cells: grow, truncate and show ellipsis when there is not enough space */
.txt {
  flex-grow: 1;
  -webkit-flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* // Fix the minimum width of the leaf level cells */
.txt {
  width: var(--sz-text-width);
}

.num {
  width: var(--sz-num-width);
}

.line {
  border-bottom: 2px solid #e0e0e0;
  border-collapse: collapse;
  padding-top: 0.313em;
  font-size: var(--fs-p-small);
  line-height: var(--lh-p-small);
}

.line.header {
  background-color: var(--clr-gray);
  font-weight: bold;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  text-align: center;
}

.subtitle:hover {
  background-color: var(--clr-selected);
}

.left {
  text-align: start;
}

.center {
  text-align: center;
}

.right {
  text-align: end;
}

.index {
  width: var(--sz-xsmall-width);

  flex-grow: 0;
}

.startTime,
.endTime {
  width: var(--sz-small-width);
}

.zone,
.commandType {
  width: var(--sz-medium-width);
  padding: 0 0.2em;
}

.obs,
.comment {
  width: var(--sz-large-width);
  position: relative;
}

.fa-save,
.fa-file-excel {
  padding: 0.1em 0.8em;
  cursor: pointer;
}