@font-face {
  font-family: 'Arial';
  src: url('arial.ttf')  format('truetype'); /* Safari, Android, iOS */
}

body {
  --background-color: #000;
}

.overlay {
  top: 0 !important;
}

#player {
  --background-repeat: no-repeat;
  --background-size: cover;
  /* --watermark-image: url("assets/ocs/ocs_logo.png"); */
  --spinner-image: url("assets/buffering.png"); 
  --buffering-image: url("assets/buffering.png");
  /* --logo-image: url("assets/ocs/ocs_launching.jpg"); */
  --theme-hue: 18;
  --live-progress-color: #FF6600;
  --progress-color: #FF6600;
  --splash-image: url("assets/ocs/ocs_idle.jpg");
  --play-image: url("assets/paused-withplayicon.png");
  --pause-image: url("assets/paused.png");
}

#Debug {display:none;}
#Debug[state="on"] {display:block; position:absolute; top:50px; left:50px; width:600px;}
#Debug[state="on"] span {padding:10px; margin:10px; border:1px solid #FF6600; color:#FFF;}

#Error, #custom-error {display:none;}
#Error[state="on"], #custom-error[state="on"] {
  display:block;
  position:absolute;
  top:55%;
  left:25%;
  z-index:500;
  width:50%;
  height:220px;
  background-color: #000;
  box-shadow: 0 0 3px 2px #8f8f8f;
  text-align:left;
  color:#FFF;
}
#Error[state="on"] h1,
#custom-error[state="on"] h1 {
  margin:30px;
  font-size:24px;
}
#Error[state="on"] p,
#custom-error[state="on"] p {
  margin:0 30px;
  font-size:16px;
}
#custom-error #error-message {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}

#debug-box {
  display: none;
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 260px;
  border-radius: 4px;
  padding: 10px;
  background-color: rgba(1, 1, 1, 0.8);
  color: #fff;
}

#debug-box.status-ok {
  background-color: rgba(0, 128, 0, 0.8);
}

#debug-box.status-warning {
  background-color: rgba(255, 165, 0, 0.8);
}

#debug-box.status-not-ok {
  background-color:	rgb(255, 0, 0, 0.8);
}

.debug-title {
  font-weight: bold;
}