#transcript {
  width: 650px;
  overflow: hidden;
  margin-top: 15px;
}

.transcript-body {
  height: 200px;
  overflow-y: scroll;
  width: 665px;
}

.transcript-line {
  position: relative;
  padding-left: 5px;
  cursor: pointer;
  line-height: 1.4;
  float: left;
}

.transcript-timestamp {
  position: absolute;
  display: inline-block;
  color: #333;
  width: 50px;
  display: none;
}

.transcript-text {
  display: block;
  font-size: 14px;
  font-style: italic;
  font-weight: 500;
  color: #6E6D6D;
}

.transcript-line:hover>.transcript-text {
  color: #4657AE;
}

.transcript-line.is-active>.transcript-text {
  color: #4657AE;
}

.transcript-header{
  display: none;
}

.transcript-selector{
  display: none;
}

#bg-timestamp{
  position: absolute;
  right: 0;
  padding: 6px 12px;
  background: #494949;
  color: white;
  border-radius: 7px;
  margin-top: 40px;
  height: 36px;
  min-width: 58px;
  text-align: center;
}


/*====================  PLAYER ==========================*/

.vjs-control-bar{
  height: 8.0em !important;
}

.video-js .vjs-progress-control{
  position: absolute !important;
    width: 100% !important;
    left: 0 !important;
    padding: 0 1.8em 0 1.4em !important;
    height: 4em !important;
    bottom: 1em;
}

.video-js .vjs-volume-menu-button{
  font-size: 16px;
    min-width: 2.5em;
}

.video-js .vjs-play-control{
  font-size: 16px;
    padding-right: 0;
    width: 3.0em;
}

.video-js .vjs-fullscreen-control{
  position: absolute !important;
    right: 0.2em;
    height: 100%;
    font-size: 16px;
    font-weight: bold !important;
}

.video-js .vjs-time-control{
  position: absolute !important;
    height: 100%;
    right: 8em;
    font-size: 16px !important;
    text-align: right !important;
}

.drag-right{
    font-size: 16px;
    position: absolute;
    left: 3.0em;
    font-weight: bold;
}

.drag-left{
  position: absolute;
    right: 3.0em;
    font-size: 16px;
    font-weight: bold;
}

.video-js .vjs-load-progress{
  background: #fff !important;
}

.video-js .vjs-play-progress{
  background: #4758b0 !important;
}

.video-js .vjs-progress-holder .vjs-load-progress{
  height: 0.7em !important;
  padding: 0;
}

.video-js .vjs-progress-holder .vjs-play-progress{
  height: 0.7em !important;
  text-align: center;
}

.video-js .vjs-progress-control .vjs-mouse-display{
  height: 0.7em !important;
}

.disabled-transcripts{
  color: #bbb;
    border: 1px solid #bbb !important;
    box-shadow: 0 2px #bbb !important;
    -moz-box-shadow: 0 2px #bbb !important;
    -webkit-box-shadow: 0 2px #bbb !important;
}

.vjs-progress-holder{
  background: white !important;
  height: 0.7em !important;
}


.video-js .vjs-play-progress:before{
    top: 0px !important;
    font-size: 0.5em !important;
    border: 2px solid #1d2150 !important;
    background: #4758b0 !important;
    color: #4758b0 !important;
    padding: 0 3px !important;
}

#thumbnail-video .video-js.vjs-default-skin .vjs-big-play-button,#thumbnail-video .vjs-control-bar ,#thumbnail-video .vjs-loading-spinner{ display: none; }



.video-js .vjs-progress-control:hover .vjs-play-progress:after{
  display: none !important;
}

.video-js .vjs-captions-button{
  position: absolute;
  right:7em;
  font-size: 16px;
}

.vjs-menu{
  bottom: 2em !important;
}

.vjs-caption-settings{
  z-index:20;
}

.hide{
  display: none;
}

.searched-cue .transcript-text{
  color: #4657AE;
}

#transcript-search{
  position: relative;
}

.search-paggination{
  position: absolute;
  top: 0px;
  right: 7.5em;
  margin: 10px 0px;
  display: none;
}

.search-paggination .pg-btn{
  color: #FFF;
  font-weight: bold;
  padding: 0px 10px;
  background: #585959 none scroll 0% 0%;
  z-index: 100;
  font-size: 16px;
  border-radius: 5px;
}

.search-pg-pos{
  z-index: 100;
  position: relative;
  margin: auto 7px;
  font-size: 14px;
}

.search-paggination .pg-btn-disabled{
  background: rgba(88, 89, 89, 0.44) none repeat scroll 0% 0%;
  border-color: #B5B6B6;
}

.exit-pg-btn{
  background-image: url(../images/cross.png) !important;
  background-size: 25px !important;
  width: 25px !important;
  height: 25px !important;
  position: absolute !important;
  font-size: 20px !important;
  top: 2px !important;
  right: -50px !important;
  z-index: 100 !important;
}

.video-js .vjs-remaining-time{
  display: none;
}

.video-js .vjs-current-time, .vjs-no-flex .vjs-current-time {
  display: inline;
}

.video-js .vjs-captions-button{
  display: none;
}

.cc_button{
  font-size: 16px !important;
  padding: 7px 10px !important;
  height: 45px !important;
  z-index: 50;
  width: 40px !important;
  right: 4em;
  position: absolute !important;
  border-left: 1px solid #8c8c8c !important;
  border-right: 1px solid #8c8c8c !important;
}

.css_button_clicked{
  background: #4657AE !important;
  border-color: #4657AE !important;
}

.video-js .vjs-slider{
  z-index: 150;
}

.active-s-cue{
  background-color: #FBFBA0;
}

.relative{
  position: relative;
}

.vjs-subtitles-button{
  position: absolute !important;
  right: 10em;
  font-size: 16px;
}

.no-results{
    position: absolute;
    right: 5em;
    top: 0;
    font-size: 16px;
    font-weight: bold;
    padding: 10px;
    z-index: 10;
    display: none;
}

#scroll-top{
  position: absolute;
  background-image: url(../images/arrow-up.png);
  background-size: 20px;
  width: 20px;
  height: 20px;
  right: 6em;
}

#scroll-bottom{
  position: absolute;
  right: 6em;
  bottom: 0;
  background-image: url(../images/arrow-down.png);
  background-size: 20px;
  width: 20px;
  height: 20px;
}

.grey-button{
  color: #bbb;
}

.pg-left{
  background-image: url(../images/arrow-right.png) !important;
  background-repeat: no-repeat !important;
  background-size: 15px !important;
  background-position: 3px !important;
  width: 20px;
  height: 20px;
}

.pg-right{
  background-image: url(../images/arrow-left.png) !important;
  background-repeat: no-repeat !important;
  background-size: 12px !important;
  background-position: 4px !important;
  width: 20px;
  height: 20px;
}


/*#transcript ::-webkit-scrollbar {
    width: 12px;
}


#transcript ::-webkit-scrollbar-button:start{
  width: 20px;
  height: 20px;
  color: black !important;
  background-image:url(../images/up-arrow.png);
  background-repeat: no-repeat;
  background-size:  100% 100%;
}

#transcript ::-webkit-scrollbar-button:end{
  width: 20px;
  height: 20px;
  color: black !important;
  background-image:url(../images/down-arrow.png);
  background-repeat: no-repeat;
  background-size:  100% 100%;
}*/