/*****************************************
 * Item Container Styles.
 ****************************************/
.item-container:not(.item-container-not-highlight):not(.item-container-hidden):hover .thumb-overlay, .item-container-highlight .thumb-overlay {
  background: rgba(255, 255, 255, 0.1) url("../../images/thumbnail-overlay.png") no-repeat center center;
}

.item-container-unavailable .thumb-overlay {
  background: rgba(200, 200, 200, 0.8) url("../../images/thumbnail-overlay.png") no-repeat center center;
}
.item-container-unavailable .description {
  color: #8c8c8c;
}

/*****************************************
 * Thumbnail Styles.
 ****************************************/
.thumb-container {
  position: relative;
  width: 160px;
  height: 90px;
}

.thumb {
  width: 160px;
  height: 90px;
  background-color: black;
}

.story-info {
  background: rgba(0, 0, 0, 0.5);
  color: #d4d6d6;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 1px 3px;
  font-size: 0.8rem;
  width: 160px;
}

.thumb-overlay {
  background: rgba(0, 0, 0, 0.2) url("../../images/thumbnail-overlay.png") no-repeat center center;
  position: absolute;
  top: 0;
  left: 0;
  width: 160px;
  height: 90px;
}

.thumb-overlay-unavailable {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 160px;
  height: 90px;
}

/*****************************************
 * Story Detail Styles.
 ****************************************/
.description {
  font-size: 0.8rem;
}

.video {
  max-width: 100%;
  height: 224px;
  width: 400px;
  background-color: black;
}

.video-placeholder {
  max-width: 100%;
  height: 168px;
  width: 300px;
  background-color: #313131;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.video-placeholder h3, .video-placeholder h5 {
  color: #c1c1c1;
}