.chapter-player-subtitle {
  color: #27437b;
  font-weight: 700;
  align-self: flex-start;
  margin-bottom: 46px;
  @media (min-width: 1400px) {
    font-size: 20.4px;
  }
  @media (max-width: 991px) {
    margin-bottom: 24px;
  }
}
.chapter-player {
  display: flex;
  gap: 34px;
  width: 100%;
  text-align: left;
  .player-container {
    border: 1px solid #003366;
    flex: 2;
    .player {
      position: relative;
      padding-bottom: 56.25%;
      height: 0;
      overflow: hidden;
      max-width: 100%;
      iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }
  }
  .playlist {
    position: relative;
    flex: 1;
    overflow-y: scroll;
    /* This makes the playlist match the height of the video player */
    @media (min-width: 992px) {
      min-height: 100%;
      height: 0;
      &::-webkit-scrollbar {
        width: 8px;
        height: 8px;
      }
      &::-webkit-scrollbar-track {
        background: #f1f1f1;
      }
      &::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
      }
    }
    @media (max-width: 991px) {
      margin-top: 20px;
    }
    h6 {
      position: sticky;
      top: 0;
      border-bottom: 1px solid black;
      padding-bottom: 15px;
      margin-bottom: 15px;
      background: white;
      z-index: 1;
    }
    ul {
      padding-left: 0;
      margin-left: 0;
      padding-right: 10px;
      li {
        cursor: pointer;
        display: flex;
        gap: 43px;
        font-size: 26px;
        list-style: none;
        padding: 5px 10px;
        border-radius: 8px;
        border: 2px solid transparent;
        &.active {
          border: 2px solid #003366;
        }
        &:hover {
          background: #F2F2F2;
        }
        .time {
          font-size: calc(28vw / 19.2);
          color: #BFC0BF;
          font-weight: bold;
          @media (max-width: 991px) {
            font-size: 16px;
          }
        }
        .title {
          font-size: calc(28vw / 19.2);
          color: #605F5B;
          font-weight: 500;
          @media (max-width: 991px) {
            font-size: 16px;
          }
        }
        &:not(:last-child) {
          margin-bottom: 18px;
        }
      }
    }
  }
  @media (max-width: 991px) {
    display: block;
  }
}