.plyr__control--overlaid {
  background: var(--site-primary);
  border-radius: 50%;
}

.plyr--full-ui.plyr--video .plyr__control--overlaid {
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plyr--video .plyr__control.plyr__tab-focus,
.plyr--video .plyr__control:hover,
.plyr--video .plyr__control[aria-expanded="true"] {
  background: var(--site-primary);
}

.plyr__control--overlaid:focus,
.plyr__control--overlaid:hover {
    background: var(--site-secondary);
    opacity: 0.75;
}

.plyr--full-ui input[type="range"] {
  color: var(--site-primary);
}

.plyr__control.plyr__tab-focus {
  box-shadow: 0 0 0 5px var(--site-primary);
}


.play-content {
    position: absolute;
    z-index: 1;
    background: var(--site-primary);
    width: 4rem;
    height: 4rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 2px 2px 0.25rem rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: all 0.5s;
  }
  
  .play-content i {
    color: var(--site-secondary-contrast);
    font-size: 1rem;
  }
  
  .fullscreen-content:hover {
    transform: scale(1.15);
    opacity: 1;
  }
  
  .fullscreen-content {
    position: absolute;
    z-index: 1;
    background: var(--site-secondary);
    width: 3rem;
    height: 3rem;
    top: 6rem;
    right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.5s;
    opacity: 0.5;
    box-shadow: 0 0 1rem rgba(255, 255, 255, 0.5);
  }
  
  .fullscreen-content i {
    color: var(--site-secondary-contrast);
    font-size: 1rem;
  }

  .plyr__video-wrapper {
    text-align: center;
    height: 60vh;
  }
  .plyr video {
    height: 100%;
  }

  .plyr {
    border-radius: 0.625rem;
    overflow: hidden;
    height: 100%;
  }


  /*style to load video*/

  .plyr-custom-load{
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    transition: all .3s;
  }

  .plyr-custom-load.disable{
    background: rgba(0,0,0,0.0);
  }

  .plyr-custom-load.enable{
    background: rgba(0,0,0,0.4);
  }

  .plyr-custom-load.enable:after {
    position: absolute;
    content: "";
    left: calc(50% - 30px);
    top: calc(50% - 30px);
    text-align: center;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: loader 1s infinite linear;
    transition: all;
    background: transparent;
    border-radius: 50px;
    border: 3px solid white;
    border-top-color: transparent;
  }

  @keyframes loader {
    0%{
      transform: rotate(0deg);
    }
    50%{
      transform: rotate(180deg);
    }
    100%{
      transform: rotate(360deg);
    }
  }