#videoControls {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translate(-50%);
    border-radius: 5px;
    width: 500px;
    height: 182px;
    z-index: 9999996;
    background-color: #171717;
    padding: 15px;
  }
  
  .video-controls-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 10px 5px;
    grid-auto-flow: row;
    grid-template-areas:
            "scene-name video-controls close-button"
            "time-bar time-bar time-display"
            "vol chapter chapter-jump";
    width: 100%;
    height: 100%;
    color: #FFFFFF;
  }
  
  .time-bar {
    justify-self: center;
    align-self: center;
    grid-area: time-bar;
    width: 120%;
    margin-top: 25px;
    transform: translate(10%);
  }
  
  .progress {
    background-color: transparent;
    border: 2px solid #fff;
    height: 20px;
  }
  
  .progress>div {
      background-color: #ffffff;
      width: 0%;
      height: 100%;
   }
  
  .time-display {
    justify-self: right;
    align-self: center;
    grid-area: time-display;
    margin-top: 25px;
  }
  
  .vol {
    justify-self: left;
    align-self: center;
    grid-area: vol;
  }
  
  #vol-text {
    padding-left: 5px;
  }
  
  .vol-icon-text {
    display: flex;
    font-size: 14px;
  }
  
  .chapter {
    justify-self: center;
    align-self: center;
    grid-area: chapter;
  }
  
  #chapter-list {
    width:150px;
    height:30px;
    padding:5px;
    background-color: #171717;
    border: solid 1px #4b4b4b;
    color:#FFFFFF;
  }
  
  .scene-name {
    justify-self: left;
    align-self: center;
    grid-area: scene-name;
  }
  
  .video-controls {
    display: flex;      
    flex-direction: row;
    flex-wrap: nowrap; 
    justify-self: center;
    align-self: center;
    grid-area: video-controls;
  }
  
  .chapter-jump {
    justify-self: center;
    align-self: center;
    grid-area: chapter-jump;
  }