.video-container {
  position: relative;
  width: var(--video_player_width);
  min-height: 65vh;  /* by me: to make the video-container fill page space before poster is loaded */
                     /* NOTE also set to change dynamically in @media sections in main.css */
  /* max-width: 1000px; */  /* commented by me */
  display: flex;
  justify-content: center;
  margin-inline: auto;
  background-color: black;
}

.video-container.theater,
.video-container.full-screen {
  max-width: initial;
  width: 100%;
}

.video-container.theater {
  max-height: var(--video_wrapper_max_height);
}

.video-container.full-screen {
  max-height: 100vh;
}

video {
  width: 100%;
}

video[src] {  /* by me */
  object-fit: cover;
}


/* JUMP_1 */
.video-controls-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: white;
  z-index: 100;  /* JUMP_7 */
  opacity: 0;
  transition: opacity 150ms ease-in-out;
}

/* JUMP_2 */
.video-controls-container::before {
  content: "";
  position: absolute;
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent);
  width: 100%;
  aspect-ratio: 10 / 1;  /* JUMP_4 originally: 6 / 1 */
  z-index: -1;
  pointer-events: none;
}

/* JUMP_3 */
.video-controls-container:hover,
.video-container.paused .video-controls-container {
  opacity: 1;
}
/* originally:
.video-container:hover .video-controls-container,
.video-container:focus-within .video-controls-container,
.video-container.paused .video-controls-container {
  opacity: 1;
}
*/

.video-controls-container .controls {
  display: flex;
  gap: .5rem;
  padding: .5rem;
  align-items: center;
}

.video-controls-container .controls button {
  background: none;
  border: none;
  color: inherit;
  padding: 0;
  height: 30px;
  width: 30px;
  font-size: 1.1rem;
  cursor: pointer;
  opacity: .5;  /* JUMP_5 */
  transition: opacity 150ms ease-in-out;
}

.video-controls-container .controls button:hover {
  opacity: 1;
}

.video-container.paused .pause-icon {
  display: none;
}

.video-container:not(.paused) .play-icon {
  display: none;
}

.video-container.theater .tall {
  display: none;
}

.video-container:not(.theater) .wide {
  display: none;
}

.video-container.full-screen .open {
  display: none;
}

.video-container:not(.full-screen) .close {
  display: none;
}

.volume-high-icon,
.volume-low-icon,
.volume-muted-icon {
  display: none;
}

.video-container[data-volume-level="high"] .volume-high-icon {
  display: block;
}

.video-container[data-volume-level="low"] .volume-low-icon {
  display: block;
}

.video-container[data-volume-level="muted"] .volume-muted-icon {
  display: block;
}

.volume-container {
  display: flex;
  align-items: center;
}

.volume-slider {
  width: 0;
  transform-origin: left;
  transform: scaleX(0);
  transition: width 150ms ease-in-out, transform 150ms ease-in-out;
}

.volume-container:hover .volume-slider,
.volume-slider:focus-within {
  width: 100px;
  transform: scaleX(1);
}

.duration-container {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex-grow: 1;
  cursor: default;   /* <--,-- by me */
  opacity: .5;       /* <--| */  /* JUMP_5 */
  font-size: 1rem;   /* <--' */
}

.video-container.captions .captions-btn {
  border-bottom: 3px solid #910000;
}

.video-controls-container .controls button.wide-btn {
  width: 50px;
}

.video_waveform {
  position: absolute;
  opacity: 0;
  left: 0;
  right: 0;

  /*
    NOTE without this, when hovering on buttons (e.g. play/pause button),
         timeline thumbnail keeps showing/hiding
  */
  z-index: -1;

  transition: opacity 150ms ease-in-out;
}

.timeline-container {
  position: relative;  /* by me */
  height: 7px;
  margin-inline: .5rem;
  cursor: pointer;
  display: flex;
  align-items: center;

  --waveform_url: none;
}

/* by me. waveform for video player */
.timeline-container::before {
  content: "";
  position: absolute;
  /* top: 20%; */
  left: 0;
  right: 0;
  bottom: -2.8rem;
  height: 6rem;  /* FIXME image height is 128px whose half would be 64px (which is what we want), but why have to set 90px ?? */
  background-image: var(--waveform_url);
  background-repeat: no-repeat;
  background-size: 100% 100%;  /* https://stackoverflow.com/questions/46896979/stretch-horizontally-background-image-in-css */
  opacity: .15;
  display: none;
  /* z-index: -999; */
  /* background-color: green; */
}

.timeline {
  background-color: rgba(100, 100, 100, .5);
  height: 3px;
  width: 100%;
  position: relative
}

.timeline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: calc(100% - var(--preview-position) * 100%);
  background-color: rgb(150, 150, 150);
  display: none;
}

.timeline::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: calc(100% - var(--progress-position) * 100%);
  background-color: #910000;
}

.timeline .thumb-indicator {
  --scale: 0;
  position: absolute;
  transform: translateX(-50%) scale(var(--scale));
  height: 200%;
  top: -50%;
  left: calc(var(--progress-position) * 100%);
  background-color: #910000;
  border-radius: 50%;
  transition: transform 150ms ease-in-out;
  aspect-ratio: 1 / 1;
}

/* by me (attributes borrowed from JUMP_8) */
.timeline .dest_timestamp {
  position: absolute;
  top: -1rem;
  transform: translate(-50%, -100%);
  left: calc(var(--preview-position) * 100%);
  font-size: .95rem;
  text-shadow: var(--shadow);
  display: none;
}

.timeline .preview-img {  /* JUMP_8 */
  position: absolute;
  height: 80px;
  /* aspect-ratio: 16 / 9; */  /* not all timeline thumbnails are 16/9 in ratio, so commented for it's value to fall back to the default 'auto' */
  top: -3rem;
  transform: translate(-50%, -100%);
  left: calc(var(--preview-position) * 100%);
  /* border-radius: .25rem; */
  border: 2px solid white;
  display: none;
}

.thumbnail-img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.video-container.scrubbing .thumbnail-img {
  display: block;
}

/* by me */
.timeline-container:hover.timeline-container::before {  /* NOTE do NOT add space after :hover */
  display: block;
}
/* by me */
.timeline-container:hover .video_waveform {  /* NOTE do NOT remove space after :hover */
  opacity: .5;
}

.video-container.scrubbing .preview-img,
.timeline-container:hover .preview-img,
.video-container.scrubbing .dest_timestamp,
.timeline-container:hover .dest_timestamp {
  display: block;
}

.video-container.scrubbing .timeline::before,
.timeline-container:hover .timeline::before {
  display: block;
}

.video-container.scrubbing .thumb-indicator,
.timeline-container:hover .thumb-indicator {
  --scale: 1;
}

.video-container.scrubbing .timeline,
.timeline-container:hover .timeline {
  height: 100%;
}

.video_top_row * {
  color: white !important
}
/* JUMP_1 */
.video_top_row {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  color: white;
  z-index: 101;  /* should be higher than JUMP_7 so that tooltips won't be masked */
  opacity: 0;
  transition: opacity 150ms ease-in-out;
}

/* JUMP_2 */
.video_top_row::before {
  content: "";
  position: absolute;
  top: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .75), transparent);
  width: 100%;
  aspect-ratio: 10 / 1;  /* JUMP_4 originally: 6 / 1 */
  z-index: -1;
  pointer-events: none;
}

/* JUMP_3 */
.video_top_row:hover,
.video-container.paused .video_top_row {
  opacity: 1;
}

/* exhibit (by me) */
.video_exhibit_wrapper {
  padding: 12px 10px;
  margin-bottom: 1.5rem;
  border-color: var(--border_fg) !important;
}

.video_exhibit_container {
  max-height: 60vh;
  overflow-y: scroll;
}



.video_exhibit_thumbnail {
  position: relative;
  display: flex;
}

.video_exhibit_thumbnail::before {
  content: attr(data-duration);
  position: absolute;
  background-color: rgba(0, 0, 0, .85);
  color: var(--body_fg);
  right: 4px;
  bottom: 4px;
  padding: .05em .45em;
  border-radius: .25em;
  font-size: .75rem;
  color: white !important;
}

.video_exhibit_thumbnail img {
  width: 100%;
  height: 100%;
  min-width: 200px;  /* JUMP_4 */
  min-height: 120px;
  background-color: #555;
}

.video_exhibit_bottom_section {
  display: flex;
  align-items: flex-start;
  margin-top: 1rem;
}

.video_exhibit_details {
  display: flex;
  flex-direction: column;
}

.video_exhibit_title {
  font-weight: bold;
  font-size: .93rem;
  margin-bottom: .5rem !important;

  /* make it two lines long maximum (https://www.youtube.com/watch?v=OhCzEjXvY9A) */
  --title-max-lines: 2;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--title-max-lines) !important;
}

.video_exhibit_metadata {
  margin-bottom: 1rem;
  color: #777 !important;
  font-size: .8rem;
}

.video_exhibit_metadata_separator {
  /* color: var(--body_fg); */
}

/* .video_exhibit_title { */
/*   grid-column: 1 / -1;  /1* to take up te entire row *1/ */
/*   margin: -.5rem 0; */
/*   display: flex; */
/*   justify-content: space-between; */
/*   align-items: center; */
/* } */

/* .video_exhibit_button-close { */
/*   border: none; */
/*   background: none; */
/*   padding: 0; */
/*   font-size: 2rem; */
/*   color: var(--body_fg); */
/* } */

/* input (by me) */
.audio_white_slider {
  width: 100%;
  transform: translateY(10%);
}
/*
 *
 * downloaded from: https://codepen.io/ShadowShahriar/pen/zYPPYrQ
 * 16 February 2022
 * Range Slider Progress in Chrome with pure CSS
 *
 * === This CodePen demonstrates how we can implement range slider "progress fill" in Webkit browsers using a `clip-path` and a `box-shadow` ===
 *
 * === There is an open issue about Standardizing input[type="range"] styling (https://github.com/w3c/csswg-drafts/issues/4410). For all I know, it hasn't been implemented yet ===
 *
 * === This demo is meant for Chrome browsers. But it'll also work in Firefox because Firefox provides the `::-moz-range-progress` pseudo-class ===
 *
 * more info. in the details view
 *
 */

input[type="range"] {
  color: #910000;
  --thumb-height: .8em;
  --track-height: 0.125em;
  --track-color: rgba(255, 255, 255, .5);
  --track-color--audio-player: rgba(0, 0, 0, .1);
  --brightness-hover: 180%;
  --brightness-down: 80%;
  --clip-edges: 0.125em;
}

input[type="range"].win10-thumb {
  color: #910000;
  --thumb-height: 1.375em;
  --thumb-width: 0.5em;
  --clip-edges: 0.0125em;
}

/* === range commons === */
input[type="range"] {
  position: relative;
  background: #fff0;
  overflow: hidden;
}

input[type="range"]:active {
  cursor: grabbing;
}

/* === WebKit specific styles === */
input[type="range"],
input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  transition: all ease 100ms;
  height: var(--thumb-height);
}

input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
  position: relative;
}

input[type="range"]::-webkit-slider-thumb {
  --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
  --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
  --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
  --clip-further: calc(100% + 1px);
  --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0
    100vmax currentColor;

  width: var(--thumb-width, var(--thumb-height));
  background: linear-gradient(currentColor 0 0) scroll no-repeat left center /
    50% calc(var(--track-height) + 1px);
  background-color: currentColor;
  box-shadow: var(--box-fill);
  border-radius: var(--thumb-width, var(--thumb-height));

  filter: brightness(100%);
  clip-path: polygon(
    100% -1px,
    var(--clip-edges) -1px,
    0 var(--clip-top),
    -100vmax var(--clip-top),
    -100vmax var(--clip-bottom),
    0 var(--clip-bottom),
    var(--clip-edges) 100%,
    var(--clip-further) var(--clip-further)
  );
}

input[type="range"]:hover::-webkit-slider-thumb {
  filter: brightness(var(--brightness-hover));
  cursor: grab;
}

input[type="range"]:active::-webkit-slider-thumb {
  filter: brightness(var(--brightness-down));
  cursor: grabbing;
}

input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center /
    100% calc(var(--track-height) + 1px);
}

.audio_player input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(var(--track-color--audio-player) 0 0) scroll no-repeat center /
    100% calc(var(--track-height) + 1px);
}

input[type="range"]:disabled::-webkit-slider-thumb {
  cursor: not-allowed;
}

/* === Firefox specific styles === */
input[type="range"],
input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-thumb {
  appearance: none;
  transition: all ease 100ms;
  height: var(--thumb-height);
}

input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-thumb,
input[type="range"]::-moz-range-progress {
  background: rgb(9, 154, 167, .1);  /* rgb for #099aa7 */
}

input[type="range"]::-moz-range-thumb {
  background: currentColor;
  border: 0;
  width: var(--thumb-width, var(--thumb-height));
  border-radius: var(--thumb-width, var(--thumb-height));
  cursor: grab;
}

input[type="range"]:active::-moz-range-thumb {
  cursor: grabbing;
}

.audio_player input[type="range"]::-moz-range-track {
  width: 100%;
  background: var(--track-color--audio-player);
}

input[type="range"]::-moz-range-progress {
  appearance: none;
  background: currentColor;
  transition-delay: 30ms;
}

input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-progress {
  height: calc(var(--track-height) + 1px);
  border-radius: var(--track-height);
}

input[type="range"]::-moz-range-thumb,
input[type="range"]::-moz-range-progress {
  filter: brightness(100%);
}

input[type="range"]:hover::-moz-range-thumb,
input[type="range"]:hover::-moz-range-progress {
  filter: brightness(var(--brightness-hover));
}

input[type="range"]:active::-moz-range-thumb,
input[type="range"]:active::-moz-range-progress {
  filter: brightness(var(--brightness-down));
}

input[type="range"]:disabled::-moz-range-thumb {
  cursor: not-allowed;
}