#films-page {
  overflow: hidden;
  display: flex;
  height: 100vh;
  flex-direction: column;

  --shrinkSize: 100px;
  --text-color: white;
  --bgColor: black;
  background-color: var(--bgColor);

  --selectedImageSize: 150px;
  --hoverImageSize: 100px;
  --prevImageSize: 50px;

  transition: all 0.4s ease-out;
}
/* VIDEO WRAPPER */
.preview-container {
  transition: all 0.4s ease-out;
  border: 0.4px solid var(--text-color);
  stroke: 0.5px solid var(--text-color);
}
.preview-container.full {
  background-color: inherit;
  background-image: none !important;
  width: 100vw;
  /* height: calc(100vh - var(--shrinkSize)); */

  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* background-color: rgb(242, 122, 142); */
}
.preview-container.full * {
  color: var(--text-color);
}

.preview-container.small {
  background-position: center;
  background-size: cover;
  /* opacity: 0.2; */
  width: 100vw;
  height: var(--shrinkSize);
  /* background-color: pink; */
}
.preview-container.small:hover {
  /* opacity: 0.8; */
  background-color: var(--text-color);
  /* filter: blur(3px) brightness(1.5) contrast(0.6); */
}
.preview-container.small:hover p {
  color: var(--bgColor);
}
.preview-container.small p {
  padding: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 400;
  align-content: center;
  width: 100%;
  text-align: center;
}
#expand-dash-text {
  pointer-events: none;
  position: fixed;
  top: 10px;
  left: 0px;
  width: 100%;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  padding: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 400;
}

.preview-container.small #sketches-container {
  position: absolute;
}

.preview-container.full #sketches-container {
  position: absolute;
  width: 100vw;

  height: calc(100% - 30vh - 100px);
  /* background: pink; */
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: hidden;
}

/* DASHBOARD */
.dashboard {
  transition: all 0.4s ease-out;
  /* background-color: rgb(122, 154, 54); */
  display: flex;
  flex-direction: column;
}
.dashboard.full {
  padding: 0px;
  width: 100vw;
  height: calc(100vh - var(--shrinkSize));
  /* background-color: cadetblue; */
  overflow: hidden;
}
.dashboard.full * {
  transition: visibility 0.4s ease-out;
  visibility: visible;
}
.dashboard.small {
  background-position: center;
  background-size: cover;
  transform: scale(1.5);
  opacity: 0.5;
  /* filter: blur(10px) brightness(1.5) contrast(0.6); */

  width: 100vw;
  height: var(--shrinkSize);
}
.dashboard.small:hover {
  opacity: 0.51;
  background-color: white;
}
.dashboard.small * {
  visibility: hidden;
}

/* DASHBOARD plots*/
.plots-container {
  width: 100%;
  height: 100%;
  /* background-color: var(); */
  border: 1px solid var(--text-color);
}

/* DASHBOARD scene previews*/
.scene-preview-container {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: var(--selectedImageSize);
  overflow: hidden;
  /* overflow-x: auto; */
  gap: 0.5px;
}

.scene-preview-container .sceneImg {
  height: 50px;
  /* height: 100%; */
  width: var(--prevImageSize);
  object-fit: cover;
  /* border:1px solid white; */
  transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
}

.scene-preview-container
  .sceneImg[selected="false"][next="false"][prev="false"]:hover {
  /* height: var(--hoverImageSize); */
  object-fit: contain;
}

.sceneImg[selected="true"] {
  height: fit-content;
  width: var(--selectedImageSize) !important;
  object-fit: contain;
}

.sceneImg[next="true"],
.sceneImg[prev="true"] {
  height: auto;
  width: var(--hoverImageSize);
  object-fit: contain;
  transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
}
.sceneImg[next="true"]:hover,
.sceneImg[prev="true"]:hover {
  opacity: 0.8 !important;
  border: 0.5px solid white;
}

.scene-preview-container.small {
  padding: 0px;
  height: var(--shrinkSize);
  position: absolute;
  top: 0px;
  left: 0px;
}
.scene-preview-container.small .sceneImg,
.scene-preview-container.small .sceneImg[selected="true"] {
  height: 100% !important;
  object-fit: cover;
}

input {
  all: reset;
  background-color: inherit;
  border: none;
  /* border-radius: 5px;
   */
  border-bottom: 1px solid var(--text-color);
  outline: none;
  padding: 5px;
  transition: border 0.3s ease-in-out;
  font-family: "Courier New", Courier, monospace;
  color: var(--text-color);
  font-size: 10px !important;
}
input:active,
input:focus,
input:hover {
  all: reset;
  background-color: inherit;
  border: 1px solid var(--text-color);
  /* border-radius: 5px; */
  outline: none;
}