.video-player__stage {
  border-bottom: 4px solid white;

  iframe {
    min-width: 100.1%;
  }
}

.video-player__list {
  list-style-type: none;
  padding-left: 0;
  background-color: #ededed;
}

.video-player__list-item {
  padding: 4px 20px 4px 8px;
  border-bottom: 1px solid #dbdbdb;
  cursor: pointer;
  clear: both;
  float: none;
  overflow: hidden;
  position: relative;
  display: flex;

  .video-player__list-item-description,
  .video-player__list-item-title{
    padding-right: 40px;
  }

  &.active,
  &:hover {
    background-color: #dbdbdb;
  }

  &.active {

    .video-player__list-item-thumb {
      align-self: flex-start;
      margin-top: 5px;
    }

    .video-player__list-item-title{
      font-weight: bold;
      padding-top: 5px;
    }

    .video-player__list-item-description {
      display: inline-block;
      padding-bottom: 5px;
      padding-top: 5px;
    }

    .video-player__list-item-duration {
      padding-top: 5px;
      align-self: flex-start;
    }

  }

}

.video-player__list-item-thumb {
  display:none;
  align-self: center;
}

.video-player__list-item-text-container {
  align-self: center;
}

.video-player__list-item-title {
  font-size: 12px;
  color: #333;
}

.video-player__list-item-description {
  display:none;
}

.video-player__list-item-duration {
  align-self: center;
  text-align: right;
  flex-grow: 1;
}


/* Mobile large */
@media screen and (min-width: 350px) {

  .video-player__list-item-thumb {
    margin-right: 20px;
    display:inline-block;
  }

  .video-player__list-item {
    padding: 4px 20px 4px 0px;
  }

}

/* Desktop small */
@media screen and (min-width: 686px) {

}


