:root {
   --min-transcript-width: 300px;
   --min-transcript-button-width: 175px;
}

.transcript-jump-btn {
   position: absolute;
   width: 50%;
   min-width: var(--min-transcript-button-width);
   min-height: 50px;
   bottom: 30px;
   left: 50%;
   transform: translateX(-50%);
   text-align: center;
   background-color: var(--fl-main-blue);
   color: white;
   border: none;
   border-radius: 50px;
}

.jw-eaa-transcript-container {
   height: 100%;
   top: 0;
   width: 30%;
   min-width: var(--min-transcript-width);
   right: min(-30%, calc(-1 * var(--min-transcript-width)));
   transition: right 500ms;
}

.jw-svg-icon{
   width: 100% !important;
}

.transcript-div {
   width: 100%;
   height: 100%;
   background-color: rgba(23, 23, 23, 0.9);
   overflow-y: scroll;
   scrollbar-width: none;
}

#mobile-transcript {
   transition: height 250ms;
   position: relative;
   background-color: rgba(214, 202, 177, 0.8);
}

#mobile-transcript .transcript-div {
   background-color: rgba(214, 202, 177, 0.8);
   max-height: 300px;
}

.transcript-div ul {
   display: flex;
   color: #fff;
   flex-direction: column;
   font-size: 0.9rem;
   box-sizing: border-box;
   padding-inline-start: 0;
   padding-left: 0;
}

.transcript-div li {
   display: flex;
   flex-direction: row;
   align-items: center;
   width: 100%;
   padding-block: 1rem;
   padding-inline: 2rem;
   box-sizing: border-box;
   border: 1px solid transparent;
}

.transcript-line {
   padding-inline-end: 1rem;
   text-align: start;
}

@media (orientation: landscape) or (min-width: 807px) {
   :root {
      --min-transcript-width: 230px;
   }
   .transcript-div li {
      padding: 1rem;
      font-size: 0.9rem;
   }
   .transcript-div li:hover {
      border: white solid 1px;
   }
   .jwplayer .jw-media video {
      transition: width 0.5s;
      margin-left: 0 !important;
   }
   .jwplayer .jw-media video.player-active-transcript,
   .jwplayer .jw-controls.player-active-transcript {
      width: min(70%, calc(100% - var(--min-transcript-width))) !important;
   }
}

.active-ts {
   background-color: rgba(73, 73, 73, 0.8);
}

#mobile-transcript .active-ts {
   background-color: rgb(167, 157, 136);
}

.transcript-timestamp {
   flex-grow: 0;
   font-size: 0.6rem;
   background-color: rgb(110, 110, 110);
   border-radius: 1rem;
   padding: 4px;
}

#mobile-transcript .transcript-line {
   color: rgb(0, 0, 0);
}

#mobile-transcript .transcript-timestamp {
   background-color: rgba(173, 166, 146, 0.8);
}

.transcript-line {
   flex-grow: 1;
}