@charset "UTF-8";
.VMPlayer-Wrap{
    position:fixed;
    width:100%;
    height:100%;
    background-color:#000;
    background-color:rgba(41,48,59,0.8);
    top:0;
    left:0;
    z-index:9999999999999;
	overflow-y:scroll;
	overflow-x:none;    
}
.VMPlayer-Wrap{opacity:1;}
.VMPlayer-animation{
    opacity: 0;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: VMPlayer;
    animation-name: VMPlayer;
}

@-webkit-keyframes VMPlayer {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes VMPlayer {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

body .VMPlayer-Wrap{ /* For WordPress */
    top:32px;
    z-index:99998;
}

.VMPlayer-Content{
    /*max-width:680px;*/max-width:800px;
    display:block;
    margin:0 auto;
    /*height:100%;*/
	height:310px;
	margin-top:10px;
    position:relative;
}

.VMPlayer-Content iframe{
    max-width:100% !important;
    width:100% !important;
    display:block !important;
    /*height:380px !important;*/height:447px !important;
    border:none !important;
    position:absolute;
    top: 0;
    bottom: 0;
    margin: auto 0 0;
	margin-top:5px;
}

.VMPlayer-Hide{
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: VMPlayerHide;
    animation-name: VMPlayerHide;
}

@-webkit-keyframes VMPlayerHide {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes VMPlayerHide {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.VMPlayer-Close{
    position:absolute;
    top:-10px;
    cursor:pointer;
    /*bottom:528px;
	bottom:440px;*/
    right:-10px;
    margin:auto 0;
    width:24px;
	z-index:99999;
    height:24px;
    background:url(../../img/RSZ/WebAssets/Exit.png) no-repeat;
    background-size:24px 24px;
    -webkit-background-size:24px 24px;
    -moz-background-size:24px 24px;
    -o-background-size:24px 24px;
}

.VMPlayer-Close:hover{
    opacity:0.5;
}



.playlist-content{max-width:800px;  background:#29303B; margin:0 auto; font-family:Arial, Helvetica, sans-serif; font-size:14px; position:relative; top:450px;}
.playlist-content h4{font-size:18px; padding:10px 10px; margin:0px; background:#29303B; color:#ffffff;}
.playlist-content ul{margin:0px; padding:0px; list-style:none; height:175px; overflow-y:scroll;}
.playlist-content ul li{display:flex; flex-direction:column; background:#29303B; padding:10px;}
 .playlist-content ul li.active{background:#000000;}
.playlist-content ul li a{color:#cccccc;}
.playlist-content ul li.active a{color:#ffffff;}
.preview__img{width:15%; float:left; }
.preview__img img{max-width:100%;}
.preview__content{/*width:80%;*/ width:100%; flex-direction:row; float:right; display:flex; padding:0px 0px; }
.preview__description{display: flex; width:80%;}
.preview__description span.fa{margin-right:10px; line-height:24px;}
.preview__time{display: flex; flex-direction: row-reverse; align-items: center; width: 20%; text-align:right; }

@media all and (max-width: 768px) and (min-width: 10px){
    .VMPlayer-Content{
        max-width:90%;
    }
    .VMPlayer-Wrap{
        margin-top: 6%;
    }
}

@media all and (max-width: 600px) and (min-width: 10px){
    .VMPlayer-Content iframe{
        height:320px !important;
    }

    .VMPlayer-Close{
        bottom: 280px/* 362px; */
    }
}

@media all and (max-width: 480px) and (min-width: 10px){
    .VMPlayer-Content iframe{
        height:220px !important;
    }

    /* .VMPlayer-Close{
       bottom:262px;
    } */
	.playlist-content{top:220px;}
	.playlist-content ul{height:300px;}
}


/* MUX CSS */

/* --- Modal Container --- */
.mux-modal {
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible !important ;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Modal Content --- */
.mux-modal-content {
  position: relative;
  background-color: #000;
  border-radius: 10px;
  max-width: 95vw;
  max-height: 90vh;
  width: 800px;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  overflow: visible !important;
}

/* --- Close Button --- */
.mux-modal-content .MUXPlayer-Close {
  position: absolute;
  /* top: 10px;
  right: 10px; */
  background: #fff;
  color: #000;
  /* font-size: 20px; */
  border: none;
  border-radius: 50%;
  padding: 4px 10px;
  cursor: pointer;
  z-index: 20;
  top: -35px;
  right: -20px;
  font-size: 40px;
}

/* --- Player Container --- */
#muxPlayerContainer {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
}


/* --- Video.js Player Styling --- */
.video-js {
  width: 100% !important;
  height: 100% !important;
  background-color: black;
  font-size: 14px;
  color: #fff;
  position: relative;
}

.video-js .vjs-tech {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

/* --- Control Bar --- */
.video-js .vjs-control-bar {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between;  
  background-color: rgba(0, 0, 0, 0.6);
  padding: 6px 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 10;
  height: auto;
  box-sizing: border-box;
}

.video-js .vjs-control {
  display: flex;
  align-items: center;
  /* justify-content: center; */
  background: transparent;
  margin: 0 4px;
  height: 36px;
  line-height: 36px;
  min-width: 32px;
}
.video-js .vjs-control-bar .vjs-button {
  position: relative !important;
}


/* .video-js .vjs-control:hover,
.video-js .vjs-control:focus {
  background-color: rgba(255, 255, 255, 0.1);
} */

.video-js .vjs-control-text,
.video-js .vjs-icon-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-js .vjs-big-play-button {
  position: absolute;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 9;
  padding: 10px 20px;
  font-size: 18px;
  background-color: rgba(0, 0, 0, 0.6);
  border: none;
}
.vjs-play-control {
  max-width: 28px !important;
}

/* Hide remaining time */
.video-js .vjs-current-time,  
.video-js .vjs-remaining-time {
  display: none !important;
}

/* Keep current and duration times */
.video-js .vjs-current-time,
.video-js .vjs-duration {
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  display: flex;
  align-items: center;
  padding: 0 6px;
}

/* Current time positioned above the progress bar */
.video-js .vjs-progress-control {  
  flex: 1;
  z-index: 5 !important;
  pointer-events: auto !important;
  backdrop-filter: none !important; /* if accidentally blurred */
  overflow: visible !important;
  position: relative !important;
}
.video-js .vjs-progress-holder {
  pointer-events: auto !important;
  overflow: visible !important;
  border-radius: 10px !important;
}

/* Current time floating above the progress bar */
/* Make tooltip visible */
/* .video-js .vjs-mouse-display, */
.video-js .vjs-time-tooltip {
  display: block !important;
  position: absolute !important;
  z-index: 999999 !important;
  color: #fff;
  background: rgba(0, 0, 0, 0.75);
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 4px;
  pointer-events: none;
  transform: translateX(-50%);
  white-space: nowrap;
}
.vjs-mouse-display .vjs-time-tooltip{
  display: none !important;
}
.video-js .vjs-current-time {
  order: 1;
  position: absolute;
  top: -24px;
  left: 0;
  display: flex;
  z-index: 50;
}
.video-js .vjs-time-divider,
.video-js .vjs-duration {
  order: 3;
}
.vjs-custom-speed-control {
  order: 4; /* between duration (3) and fullscreen (4) */
  display: flex !important;
  align-items: center !important;
  justify-content: center;
  height: 36px;
  margin: 0 4px;
  max-width: 28px !important;
}
.video-js .vjs-control.vjs-http-source-selector, .video-js .vjs-control.vjs-quality-selector {
  order: 5;
  display: flex !important;
  align-items: center !important;
  justify-content: center;
  max-width: 28px !important;
}
/* .video-js .vjs-picture-in-picture-control, */
.video-js .vjs-fullscreen-control {
  order: 6;
  max-width: 28px !important;
}


/* 10 secs Forward & Backward */
.mux-feedback-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
  color: white;
  z-index: 999;
  display: none;
  opacity: 1;
  pointer-events: none;  
}
.mux-feedback-icon .seek-label{
  font-size: 20px;
}
.mux-feedback-icon.rewind {
  left: 15%;  /* Was likely too far right before */
}
.mux-feedback-icon.forward {
  right: 15%;
}
.fas.fa-undo, .fas.fa-redo {
      padding-left: 35%;
}
/* When active */
.mux-left.show-overlay {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.18), transparent);
}

.mux-right.show-overlay {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.18), transparent);
}

.mux-gesture {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 5;
  pointer-events: auto;  
}
.mux-left {
  left: 0;  
}
.mux-right {
  right: 0;  
}

/* .vjs-button-speed-control {
  display: flex !important;
  align-items: center !important;
} */
.video-js button{
  display: contents;
}
.vjs-custom-speed-control .material-icons.speed-icon {
  font-family: 'Material Icons';
  font-style: normal;
  font-size: 20px;
  color: white;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  margin-top: -2px; /* adjust if needed */
}

.vjs-custom-speed-control,
.vjs-http-source-selector,
.vjs-quality-selector {
  position: relative;  
  display: flex !important;
  align-items: center !important;
}
.vjs-custom-speed-control .vjs-menu, .vjs-http-source-selector .vjs-menu, .vjs-quality-selector .vjs-menu {
  display: none;
  position: absolute;
  bottom: 100%;
  background: #e0077c !important;
  padding: 5px 0;
  border-radius: 4px;
  color: white;
  font-size: 10px;
  z-index: 10;
}
.video-js .vjs-control.vjs-http-source-selector .vjs-menu, .vjs-quality-selector .vjs-menu {
  width: 5em;
  bottom: 0em;
  left: -1em;
  padding:0;
}
.vjs-http-source-selector .vjs-menu .vjs-menu-content, .vjs-quality-selector .vjs-menu .vjs-menu-content {
  background: #e0077c !important;
  border-radius: 4px;
}
.vjs-custom-speed-control .vjs-menu-content li,
.vjs-http-source-selector .vjs-menu-content li,
.vjs-quality-selector .vjs-menu-content li {
  padding: 5px 12px;
  cursor: pointer;
}
.vjs-custom-speed-control .vjs-menu-content li.active,
.vjs-http-source-selector .vjs-menu-item[aria-checked="true"],
.vjs-quality-selector .vjs-menu-item[aria-checked="true"] {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}
.vjs-button-speed-control {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 36px !important;
  width: 36px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}


/* --- Responsive Tweaks --- */
@media (max-width: 600px) {
  .mux-modal-content {
    max-height: 90vh;
    width: 100%;
    height: auto;
    /* aspect-ratio: unset; */
  }
  .video-js .vjs-control-bar {
    /* flex-wrap: nowrap; */
    /* overflow-x: auto; */
    padding: 4px 6px;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .video-js .vjs-control {
    margin: 1px 1px;
    padding: 2px;
    height: 32px;
    min-width: 28px;
    flex-shrink: 0;
  }
  /* Volume panel controls */
  /* .video-js .vjs-volume-panel {
    width: auto;
  } */

  .video-js .vjs-volume-panel .vjs-volume-control {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    width: 80px; /* or whatever size you prefer */
  }

  .video-js .vjs-volume-panel:hover .vjs-volume-control {
    display: contents;
    opacity: 1;
  }
  .vjs-volume-bar.vjs-slider-horizontal:hover .vjs-volume-level{
    display: block;
    visibility: visible;
    opacity: 1;
  }

  .video-js .vjs-volume-panel .vjs-volume-control {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .video-js .vjs-volume-panel:hover .vjs-volume-control {
    transform: scaleX(1);
    opacity: 1;
    visibility: visible;
  }
}

.vjs-volume-control .vjs-control .vjs-volume-horizontal {
  background-color: #00000000 !important;
}
.vjs-control .vjs-button {
  max-width: 20px;
}
.vjs-slider-horizontal .vjs-volume-level:before {
  top:0em !important;
}
.vjs-volume-tooltip{
  padding: 0px 6px !important;
  background-color: #e0077c !important;
}
.vjs-button>.vjs-icon-placeholder:before {
  display: flex;
  align-items: center;
}
.vjs-picture-in-picture-control {
  display: none !important;
}
.video-js .vjs-play-progress {
  border-radius: 10px !important;
}
.video-js .vjs-play-progress:before {
  top: -.050em;
  color: #e0077c;
  font-size: 18px;
}
.video-js .vjs-slider {
  background-color: rgb(0 0 0 / 50%) !important;
}
.video-js .vjs-load-progress div {
  background-color: rgb(161 164 167 / 75%) !important;
}