/*
..vjs-theme-c.. .vjs-theme-c .vjs-big-play-button{
    anchor-name: none;
    width: 90px;
    height: 90px;
    o-object-fit: contain;
    object-fit: contain;
    background-color: hsla(0, 0%, 100%, .25); 
    border: none;
    line-height: 90px;
    top: 50%;
    left: 50%;
    border-radius: 100px;
    margin: -45px auto 0 -45px;}
    */
/* .vjs-theme-c .vjs-control-bar{height:4em;background-color:hsla(0,0%,100%,.4)}
.vjs-theme-c .vjs-button:hover{color:#4176bc;background:linear-gradient(0deg,#d0ddee,#fff)}
.vjs-theme-c .vjs-button>.vjs-icon-placeholder:before{line-height: 1;font-size: 40px !important;}
.vjs-theme-c .vjs-time-control{line-height:4em}
.vjs-theme-c .vjs-picture-in-picture-control,.vjs-theme-c .vjs-volume-panel{display:none}
.vjs-theme-c .vjs-progress-control .vjs-play-progress{background-color:rgba(65,118,188,.9)}
.vjs-theme-c .vjs-progress-control .vjs-play-progress:before{display:none}
.vjs-theme-c .vjs-progress-control .vjs-slider{background-color:rgba(65,118,188,.1)}
.vjs-theme-c .vjs-progress-control .vjs-load-progress div{background:hsla(0,0%,100%,.5)}
.vjs-theme-c .vjs-progress-control .vjs-progress-holder{margin:0;height:100%}
.vjs-theme-c .vjs-progress-control .vjs-time-tooltip{background-color:rgba(65,118,188,.5);color:#fff}
.vjs-theme-c .vjs-progress-control .vjs-mouse-display .vjs-time-tooltip{background-color:hsla(0,0%,100%,.7);color:#4176bc}  */

.vjs-menu-button-popup .vjs-menu .vjs-menu-content {

    background-color: rgb(0 0 0);
   
}
.vjs-menu-button-popup .vjs-menu li{text-transform: uppercase;}
/* .vjs-icon-play:before, .video-js .vjs-play-control .vjs-icon-placeholder:before, .video-js .vjs-theme-c .vjs-theme-c .vjs-big-play-button .vjs-icon-placeholder:before {

    font-size: 60px;
} */

.vjs-theme-c .vjs-big-play-button {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #1f2937;
  display: grid;
  place-items: center;
  cursor: pointer;
  border: none;
  outline: none;
  overflow: hidden;
}

/* Hide Video.js default placeholder */
.vjs-theme-c .vjs-big-play-button .vjs-icon-placeholder {
  font-size: 0;
}

/* Play triangle */
.vjs-theme-c .vjs-big-play-button::before {
  content: "";
  position: absolute;
  left: 34%;
  top: 28%;
  width: 0;
  height: 0;
  border-left: 22px solid #fff;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  z-index: 2;
}

/* Circle border (initial, hidden stroke) */
.vjs-theme-c .vjs-big-play-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: no-repeat center/100% 100%
    url("data:image/svg+xml;utf8,
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'>
        <circle cx='40' cy='40' r='36'
          stroke='%2306b6d4'
          stroke-width='4'
          fill='none'
          stroke-dasharray='226.2'
          stroke-dashoffset='226.2'/>
      </svg>");
  z-index: 1;
  pointer-events: none;
}

/* On hover: swap to SVG with animate */
.vjs-theme-c .vjs-big-play-button:hover::after,
.vjs-theme-c .vjs-big-play-button:focus::after {
  background: no-repeat center/100% 100%
    url("data:image/svg+xml;utf8,
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'>
        <circle cx='40' cy='40' r='36'
          stroke='%2306b6d4'
          stroke-width='4'
          fill='none'
          stroke-dasharray='226.2'
          stroke-dashoffset='226.2'>
          <animate attributeName='stroke-dashoffset'
            from='226.2' to='0'
            dur='1s' fill='freeze' begin='0s'/>
        </circle>
      </svg>");
}