/* This CSS page is for the desktop video player /index.php and related pages. */

/* Knockout (fullscreen) button */
.kobutton {
  border: 1px solid #0a3c59;
  background: #3e779d;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#65a9d7),
    to(#3e779d)
  );
  background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
  background: -moz-linear-gradient(top, #65a9d7, #3e779d);
  background: -ms-linear-gradient(top, #65a9d7, #3e779d);
  background: -o-linear-gradient(top, #65a9d7, #3e779d);
  background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
  padding: 10.5px 21px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0,
    inset rgba(255, 255, 255, 0.4) 0 1px 0;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0,
    inset rgba(255, 255, 255, 0.4) 0 1px 0;
  box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0,
    inset rgba(255, 255, 255, 0.4) 0 1px 0;
  text-shadow: #7ea4bd 0 1px 0;
  color: #06426c;
  font-size: 24px;
  font-family: helvetica, serif;
  text-decoration: none;
  vertical-align: middle;
}
.kobutton:hover {
  border: 1px solid #0a3c59;
  text-shadow: #1e4158 0 1px 0;
  background: #3e779d;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#65a9d7),
    to(#3e779d)
  );
  background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
  background: -moz-linear-gradient(top, #65a9d7, #3e779d);
  background: -ms-linear-gradient(top, #65a9d7, #3e779d);
  background: -o-linear-gradient(top, #65a9d7, #3e779d);
  background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
  color: #fff;
}
.kobutton:active {
  text-shadow: #1e4158 0 1px 0;
  border: 1px solid #0a3c59;
  background: #65a9d7;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#3e779d),
    to(#3e779d)
  );
  background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
  background: -moz-linear-gradient(top, #3e779d, #65a9d7);
  background: -ms-linear-gradient(top, #3e779d, #65a9d7);
  background: -o-linear-gradient(top, #3e779d, #65a9d7);
  background-image: -ms-linear-gradient(top, #3e779d 0%, #65a9d7 100%);
  color: #fff;
}

html,
body {
  background-color: black;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

body.streamframe {
  background-color: black;
  overflow-x: hidden;
  overflow-y: hidden;
}

#header {
}
#controlpanel {
  /*
  background-color: grey;
  width: 100%;
  padding: 10px;
  margin: 5px;
  border-radius: 5px;
  text-align: center;
*/
}

#logoncontrolbar {
  display: inline-block;
  width: 900px;
  margin: 0 auto;
}

.logonlabel {
  font-size: 12px;
  color: white;
}

#remoteconnstatus {
  padding: none;
  background-color: lightgray;
  margin: none;
  font-size: 14px;
}

#simgStatus {
  float: left;
  margin: 5px 0px 10px 10px;
  width: 24px;
  cursor: pointer;
}

#remotelog {
  background-color: lightblue;
  width: 100%;
  height: 300px;
  border: 2px solid gray;
  overflow: auto;
}

#ClientId {
  display: none;
  color: white;
}

#channeloption {
  display: none;
}

.notification {
  background-color: black;
  opacity: 0.6;
  color: white;
  -webkit-transition: width 2s;
  transition: width 2s;
  border-radius: 10px;
  padding: 5px;
  text-align: center;
  font-size: 24px;
  display: block;
  width: 20px;

  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
}

.infopanel {
  background-color: black;
  color: gray;
  width: 100%;
  padding: 2px;
  border-radius: 10px;
  margin-top: 2px;
  margin-left: none;
  text-align: center;
}

b {
  color: white;
}

#playercontainer {
  width: 100%;
  height: 100%;
  /*   margin: 0 ; */
}

/* Video Overlay (Channel Switch) */
.vo {
  position: absolute;
  opacity: 1;
  font-size: 26px;
  color: white;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
  z-index: 2147483647;
  background: rgb(0, 0, 0);
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  width: 100%;
  padding: 10px;
  padding-left: 20px;
  width: auto;
}

/* Structure */
.infocontainer {
  width: 560px;
  min-height: 600px;
  background: #fff;
  border: 1px solid #ccc;
  border-top: none;
  margin: 20px auto;
  padding: 20px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 1px 1px 10px #000;
  -webkit-box-shadow: 1px 1px 5px #000;
  box-shadow: 1px 1px 10px #000;
}

.warningbanner {
  font-size: 2em;
  background-color: red;
  color: blue;
}

.warningnote {
  font-size: 1.5em;
  background-color: blue;
  color: red;
}

/* Fullscreen */
html:-moz-full-screen {
  background: black;
}

html:-webkit-full-screen {
  background: black;
}

html:-ms-fullscreen {
  background: black;
  width: 100%; /* needed to center contents in IE */
}

html:fullscreen {
  background: black;
}

/* Player Controls */
.keypad {
  margin: auto;
  margin-top: 20px;
}

.keypad tr td {
  vertical-align: middle;
  text-align: center;
  border: 1px solid #000000;
  font-size: 18px;
  font-weight: bold;
  width: 40px;
  height: 30px;
  cursor: pointer;
  background-color: #666666;
  color: #cccccc;
}
.keypad tr td:hover {
  background-color: #999999;
  color: #ffff00;
}

.display {
  width: 130px;
  margin: 10px auto auto auto;
  background-color: #000000;
  color: #00ff00;
  font-size: 18px;
  border: 1px solid #999999;
}
#message {
  text-align: center;
  color: #009900;
  font-size: 14px;
  font-weight: bold;
  display: none;
}

/* Remote Pairing */
html.wizard {
  background-color: black;
}

.wizard {
  font-size: 32px;
  color: white;
}

body.wizard {
  background-color: black;
}

div.wizard {
  font-size: 32px;
  color: white;
  text-align: center;
}

input.wizard {
  color: black;
}

button.wizard {
  font-size: 32px;
  color: black;
}

.wizardsubmitbtn {
  font-size: 32px;
}

.hideme {
  display: none;
}

#qrcode {
  width: 256px;
  padding: 50px;
  background-color: white;
  margin: auto;
}