/* Hide the overlay */
.hide-overlay .vjs-overlay {
   display: none;
}

/* Custom Player CSS */
.vjs-menu-button.vjs-quality-selector,
.vjs-menu-button.vjs-playback-rate,
.vjs-custom-control-spacer.vjs-spacer,
.video-js .vjs-fullscreen-control {
   display: none !important;
}

.video-js.vjs-sk-skin .vjs-control-bar {
   align-items: center;
   left: 0;
   width: calc(100% - 32px);
   margin: 0 auto;
   bottom: 16px;
   border-radius: 10px;
   background: rgba(0, 0, 0, 0.6) !important;
}

.video-js.vjs-sk-skin .vjs-progress-control {
   position: relative;
   height: 8px;
   top: 0;
   margin: 0 16px;
}

.video-js.vjs-sk-skin .vjs-progress-control:hover {
   height: 12px;
   top: 0;
}

.video-js.vjs-sk-skin .vjs-progress-control .vjs-progress-holder {
   border-radius: 20px;
   overflow: hidden !important;
}

.video-js.vjs-sk-skin .vjs-progress-control:hover .vjs-progress-holder {
   overflow: visible !important;
}

.video-js.vjs-sk-skin .vjs-progress-control .vjs-load-progress,
.video-js.vjs-sk-skin .vjs-progress-holder .vjs-load-progress div,
.video-js.vjs-sk-skin .vjs-progress-control .vjs-play-progress,
.video-js.vjs-sk-skin .vjs-slider,
.video-js.vjs-sk-skin .vjs-volume-level {
   border-radius: 20px;
}

.video-js.vjs-sk-skin .vjs-time-control.vjs-current-time {
   font-weight: 700;
   min-width: 36px;
   padding: 0;
   text-align: right;
}

.video-js.vjs-sk-skin .vjs-slider {
   background-color: rgba(255, 255, 255, 0.2);
}

.video-js.vjs-sk-skin .vjs-load-progress div {
   background-color: rgba(255, 255, 255, 0.3);
}

.vjs-custom-fullscreen {
   position: absolute;
   width: 40px;
   height: 40px;
   right: 16px;
   top: 16px;
   background: rgba(0, 0, 0, 0.6);
   z-index: 1;
   border-radius: 9px;
   cursor: pointer;
   opacity: 1;
   background-image: url("//statico.sportskeeda.com/skm/assets/images/video/ic-max.svg");
   background-repeat: no-repeat;
   background-position: center;
}

.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-custom-fullscreen {
   visibility: visible;
   opacity: 0;
   -webkit-transition: visibility 1s, opacity 1s;
   -moz-transition: visibility 1s, opacity 1s;
   -ms-transition: visibility 1s, opacity 1s;
   -o-transition: visibility 1s, opacity 1s;
   transition: visibility 1s, opacity 1s;
}

.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-custom-fullscreen {
   opacity: 1;
   visibility: visible;
}

/* Custom SK skin CSS */
.video-js.vjs-sk-skin,
.video-js.vjs-sk-skin .vjs-poster {
   background-color: #ffffff;
}

.vjs-poster img {
   object-fit: cover !important;
}

.video-js .vjs-tech {
   object-fit: cover !important;
}

.video-js.vjs-sk-skin .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before {
   content: "";
   background: url("//statico.sportskeeda.com/skm/assets/images/video/ic-mute.svg") no-repeat;
   background-position: center;
}

.video-js.vjs-sk-skin .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder:before,
.video-js.vjs-sk-skin .vjs-mute-control .vjs-icon-placeholder:before {
   content: "";
   background: url("//statico.sportskeeda.com/skm/assets/images/video/ic-unmute.svg") no-repeat;
   background-position: center;
}

.video-js .vjs-big-play-button .vjs-icon-placeholder:before,
.video-js.vjs-sk-skin .vjs-play-control .vjs-icon-placeholder:before {
   content: "";
   background: url("//statico.sportskeeda.com/skm/assets/images/video/ic-play.svg") no-repeat;
   background-position: 55% 50%;
   background-size: 40%;
}

.video-js.vjs-sk-skin .vjs-play-control.vjs-playing .vjs-icon-placeholder:before {
   content: "";
   background: url("//statico.sportskeeda.com/skm/assets/images/video/ic-pause.svg") no-repeat;
   background-position: center;
}

.video-js.vjs-sk-skin .vjs-play-control.vjs-ended .vjs-icon-placeholder:before {
   content: "";
   background: url("//statico.sportskeeda.com/skm/assets/images/video/ic-replay.svg") no-repeat;
   background-position: center;
}

.vjs-sk-skin.vjs-controls-disabled .vjs-big-play-button,
.vjs-sk-skin.vjs-controls-disabled .vjs-big-play-button,
.vjs-sk-skin.vjs-controls-disabled .vjs-custom-fullscreen,
.vjs-sk-skin.vjs-using-native-controls .vjs-custom-fullscreen {
   display: none !important;
}

.keeda-video-container {
   overflow: hidden !important;
}

.gpu-accelerated {
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
   -moz-transition: all 1s;
   -webkit-transition: all 1s;
   -o-transition: all 1s;
   transition: all 1s;
}

.video-js div {
   overflow: visible !important;
}

.video-js button {
   outline: none;
}

.video-js .vjs-time-control {
   display: inline;
}

.video-js,
.keeda-video-player-dimensions {
   width: 743px !important;
   height: 416px !important;
}

.video-js .vjs-spacer {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-box-flex: 1 1 auto;
   -moz-box-flex: 1 1 auto;
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto
}

.video-js .vjs-play-progress:before,
.video-js .vjs-progress-control .vjs-play-progress:before,
.video-js .vjs-remaining-time,
.video-js .vjs-volume-level:after,
.video-js .vjs-volume-level:before,
.video-js.vjs-live .vjs-time-control.vjs-current-time,
.video-js.vjs-live .vjs-time-control.vjs-duration,
.video-js.vjs-live .vjs-time-control.vjs-time-divider,
.video-js.vjs-no-flex .vjs-time-control.vjs-remaining-time {
   display: none
}

.video-js .vjs-progress-control {
   position: absolute;
   left: 0;
   right: 0;
   width: 100%;
   height: .5em;
   top: -.5em
}

.video-js .vjs-progress-control .vjs-load-progress,
.video-js .vjs-progress-control .vjs-play-progress,
.video-js .vjs-progress-control .vjs-progress-holder {
   height: 100%;
}

.video-js .vjs-progress-control .vjs-progress-holder {
   margin: 0;
}

.video-js .vjs-progress-control:hover {
   height: 1.5em;
   top: -1.5em
}

.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-active .vjs-progress-control,
.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-inactive .vjs-progress-control,
.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-active .vjs-progress-control,
.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-progress-control,
.video-js.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-progress-control {
   height: .25em;
   top: -.25em;
   pointer-events: none;
   -webkit-transition: height 1s, top 1s;
   -moz-transition: height 1s, top 1s;
   -ms-transition: height 1s, top 1s;
   -o-transition: height 1s, top 1s;
   transition: height 1s, top 1s
}

.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-active.vjs-fullscreen .vjs-progress-control,
.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-inactive.vjs-fullscreen .vjs-progress-control,
.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-active.vjs-fullscreen .vjs-progress-control,
.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-inactive.vjs-fullscreen .vjs-progress-control,
.video-js.vjs-has-started.vjs-playing.vjs-user-inactive.vjs-fullscreen .vjs-progress-control {
   opacity: 0;
   -webkit-transition: opacity 1s ease 1s;
   -moz-transition: opacity 1s ease 1s;
   -ms-transition: opacity 1s ease 1s;
   -o-transition: opacity 1s ease 1s;
   transition: opacity 1s ease 1s
}

.video-js .vjs-big-play-button {
   top: 50%;
   left: 50%;
   margin-left: -1em;
   margin-top: -1em;
   width: 2em;
   height: 2em;
   line-height: 2em;
   border: none;
   border-radius: 50%;
   font-size: 3.5em;
   background-color: rgba(0, 0, 0, .45);
   color: #fff;
   -webkit-transition: border-color .4s, outline .4s, background-color .4s;
   -moz-transition: border-color .4s, outline .4s, background-color .4s;
   -ms-transition: border-color .4s, outline .4s, background-color .4s;
   -o-transition: border-color .4s, outline .4s, background-color .4s;
   transition: border-color .4s, outline .4s, background-color .4s
}

.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item.vjs-selected {
   background-color: #d32f2f;
}

.video-js .vjs-big-play-button {
   background-color: rgba(0, 0, 0, 0.45);
   font-size: 6em;
   border-radius: 50%;
   height: 2em !important;
   line-height: 2em !important;
   margin-top: -1em !important
}

.video-js .vjs-loading-spinner {
   border-color: #d32f2f;
}

.video-js .vjs-control-bar2 {
   background-color: #000000;
}

.video-js .vjs-control-bar {
   background-color: rgba(0, 0, 0, 0.3) !important;
   color: #ffffff;
   font-size: 12px;
}

.video-js .vjs-play-progress,
.video-js .vjs-volume-level {
   background-color: #d32f2f;
}

.vjs-paused.vjs-has-started .vjs-big-play-button {
   display: block;
}

/* a wrapper element that tracks the mouse vertically */
.vjs-thumbnail-holder {
   position: absolute;
   left: -1000px;
}

/* the thumbnail image itself */
.vjs-thumbnail {
   position: absolute;
   left: 0;
   bottom: 1.3em;
   opacity: 0;
   margin-bottom: '15px';
   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;
}

@media (max-width: 1024px) {

   .video-js,
   .keeda-video-player-dimensions {
      width: 100% !important;
      height: 0 !important;
   }
}