/* the thumbnail image itself */
.vjs-thumbnail {
  width: 120px;
  position: absolute;
  left: 0;
  opacity: 0;
  transition: opacity .2s ease;
  -webkit-transition: opacity .2s ease;
  -moz-transition: opacity .2s ease;
  -mz-transition: opacity .2s ease;
}

/* fade in the thumbnail when hovering over the progress bar */
/* .fake-active is needed for Android only. It's removed on touchend/touchecancel */
.vjs-progress-control:hover .vjs-thumbnail,
.vjs-progress-control.fake-active .vjs-thumbnail,
.vjs-progress-control:active .vjs-thumbnail {
  opacity: 1;
}

/* ... but hide the thumbnail when hovering directly over it */
.vjs-progress-control:hover .vjs-thumbnail:hover,
.vjs-progress-control:active .vjs-thumbnail:active {
  opacity: 0;
}

.vjs-thumbnail-holder {
  position: absolute;
  z-index: 0;
  bottom: 1.5em;
  border-radius: 3px;
  width: 135px;
  height: 100px;
  display: none;
}

.vjs-thumbnail-holder .vjs-thumbnail {
  top: 7.5px;
  left: 7.5px !important;
  margin: 0 auto;
}

.vjs-thumbnail-holder .vjs-time {
  position: absolute;
  margin: 0 auto;
  width: 100%;
  height: 15px;
  bottom: 0px;
  display: none;
}

/* fade in the thumbnail when hovering over the progress bar */
/* .fake-active is needed for Android only. It's removed on touchend/touchecancel */
.vjs-progress-control:hover .vjs-thumbnail-holder,
.vjs-progress-control.fake-active .vjs-thumbnail-holder,
.vjs-progress-control:active .vjs-thumbnail-holder,
.segments-component:hover .vjs-thumbnail-holder {
  opacity: 1;
  z-index: 105;
  background-color: rgba(43, 51, 63, 0.7);
  display: block;
}

.vjs-progress-control:hover .vjs-time,
.vjs-progress-control.fake-active .vjs-time,
.vjs-progress-control:active .vjs-time,
.segments-component:hover .vjs-time {
  display: block;
}

/* ... but hide the thumbnail when hovering directly over it */
.vjs-progress-control:hover .vjs-thumbnail-holder:hover,
.vjs-progress-control:active .vjs-thumbnail-holder:active {
  opacity: 0;
}

.vjs-progress-control:hover .vjs-thumbnail-holder:hover .vjs-time,
.vjs-progress-control:active .vjs-thumbnail-holder:active .vjs-time {
  display: none;
}

#timedisplay {
  height: 30px;
  width: 60px;
  background: transparent;
  border: none;
  direction: rtl;
}