html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-font-smoothing: subpixel-antialiased;
}

body {
    margin: 0;
    padding: 0;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

div {
    display: block;
}

#live-player {
    /* position: fixed !important; */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: black;
    z-index: 1;
}

.bar-fill-2[data-seekbar] {
    background-color: #ff0101 !important;
}

div.player-error-screen {
    display: none !important;
}

.dvr-player-wrapper {
    background-color: black;
}

#live-player .media-control[data-media-control].w320 .media-control-layer[data-controls] button.media-control-button[data-hd-indicator].enabled {
    display: none;
}

#live-player .media-control[data-media-control].w320 .media-control-layer[data-controls] button.capture-plugin {
    display: none;
}

.media-control-background,
.media-control-layer {
    transition: all 1s !important;
}

@media screen {
    #live-player {
        /* position: fixed !important; */
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: black;
        z-index: 1;
    }

    .dvr-player-wrapper {
        background-color: black;
    }

    #live-player .media-control[data-media-control].w320 .media-control-layer[data-controls] button.media-control-button[data-hd-indicator].enabled {
        display: none;
    }

    #live-player .media-control[data-media-control].w320 .media-control-layer[data-controls] button.capture-plugin {
        display: none;
    }
}
.player-poster[data-poster] {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 998;
  top: 0;
  left: 0;
  background-color: #000;
  background-size: contain;
}

.player-poster.clickable {
  cursor: pointer;
}

.player-poster:hover .play-wrapper {
  opacity: 1;
}


.player-poster .play-wrapper {
  width: 100%;
  height: 25%;
  margin: 0 auto;
  opacity: 0.75;
  transition: opacity 0.1s ease;
}

.player-poster .play-wrapper svg {
  height: 100%;
}

.player-poster .play-wrapper svg path {
  fill: #fff;
}



.video-poster-wrapper {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
}

.video-poster-wrapper .play-wrapper-cont {
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 100%;
  width: 100%;
}

.video-poster-wrapper .poster-video.poster-video-canvas {
  left: -10000px;
  top: -10000px;
}

.video-poster-wrapper .poster-video {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
}

.video-poster-wrapper .poster-video.visible {
  opacity: 1;
}

.video-poster-wrapper .poster-hid {
  display: none;
}
.player-poster {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 998;
  top: 0;
  left: 0;
  background-color: #000;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}


.player-poster.clickable {
  cursor: pointer;
}

.player-poster:hover .play-wrapper {
  opacity: 1;
}

.player-poster .play-wrapper {
  width: 100%;
  height: 25%;
  margin: 0 auto;
  opacity: 0.75;
  transition: opacity 0.1s ease;
}

.player-poster .play-wrapper svg {
  height: 100%;
}

.player-poster .play-wrapper svg path {
  fill: #fff;
}
.player-logo {
  position: absolute;
  z-index: 1200;
  width: 100%;
  height: 100%;
}

.live-logo {
  position: absolute;
}
.thumbnail_placeholder {
  position: absolute;
  width: 300px;
  height: 0;
  bottom: 70px;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumbnail_placeholder video {
  max-width: 100%;
  max-height: 100%;
}

.thumbnail_placeholder img {
  max-width: 100%;
  max-height: 100%;
}
.equalizer {
  position: absolute;
  z-index: 100;
  right: 0;
  top: 0;
  width: 25px;
  height: 100%;
}

.eq-bar {
  position: absolute;
  bottom: 0;
  right: 5px;
  z-index: 100;
  width: 15px;
  transition: ease-in-out 25ms;
  overflow: hidden;
}

.eq-bar-back {
  background: linear-gradient(0deg, rgba(52, 255, 0, 1) 0%, rgba(245, 255, 75, 1) 70%, rgba(255, 0, 0, 1) 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.7;
}
.cc-controls[data-cc-controls] {
  float: right;
  position: relative;
  display: none;
}

.cc-controls[data-cc-controls].available {
  display: block;
}

.cc-controls[data-cc-controls] .cc-button {
  padding: 6px !important;
}

.cc-controls[data-cc-controls] .cc-button .enabled {
  display: block;
  opacity: 1.0;
}

.cc-controls[data-cc-controls] .cc-button .enabled:hover {
  opacity: 1.0;
  text-shadow: none;
}


.cc-controls[data-cc-controls]>ul {
  list-style-type: none;
  position: absolute;
  bottom: 25px;
  border: 1px solid black;
  display: none;
  background-color: #e6e6e6;
}

.cc-controls[data-cc-controls] li {
  font-size: 10px;
}

.cc-controls[data-cc-controls] li[data-title] {
  background-color: #c3c2c2;
  padding: 5px;
}

.cc-controls[data-cc-controls] li a {
  color: #444;
  padding: 2px 10px;
  display: block;
  text-decoration: none;
}

.cc-controls[data-cc-controls] li a:hover {
  background-color: #555;
  color: white;
}

.cc-controls[data-cc-controls] li a:hover a {
  color: white;
  text-decoration: none;
}

.cc-controls[data-cc-controls] li.current a {
  color: #258f52;
}

.cc-controls[data-cc-controls] .current a {
  color: #258f52;
}