/*
body > div#error {
	display: none;
}

body[data-opus-support='false'] > div#player {
	display: none;
}

body[data-opus-support='false'] > div#error {
	display: block;
}
*/

body {
	/* without slider
	height: 591px;
	max-height: 591px;
	*/
	height: 628px;
	max-height: 628px;
	overflow: hidden;
	padding:0;
	margin:0;
}

body, #main {
	background: black;
}

#main {
	height: 400px;
}

.loader-wrapper {
	width: 400px;
	text-align:center;
}

.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #215e86; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  margin: 140px auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#Progress {
  width: 400px;
  background-color: grey;
}

#Bar {
  width: 1%;
  height: 30px;
  background-color: rgb(43, 63, 180);
}

.canvas-wrapper {
	display: inline-block;
	vertical-align: top;
}

canvas#canvas_objects {
	background: rgba(8,65,115,1);
	background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(8,65,115,1) 45%, rgba(2,0,36,1) 100%);
}

video#video {
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	visibility: hidden;
	width: auto;
	height: auto;
}

div.controls {
	width: 400px;
	padding: 0;
	margin: 3px 0 0 0;
	border: none;
	
	
}

#form1 {
	/* display: inline-block; */
	/* float:right; */
}

#form1.float-right {
	display: inline-block;
	float:right;
}

#form1 select#Server {
}

div.controls {
	position: relative;
}

div.controls label {
	margin: 0;
	padding: 0;
	border: none;
	display: inline-block;
}

div.controls label select {
	width: 100%;
	border: 1px solid #fff;
	margin-bottom: 0;
}

div.controls label select:active,
div.controls label select:focus {
	border: 1px solid #fff!important;	
}

div.controls label select option {
	font-family: "ropa-sans-pro", Arial, sans-serif!important;
}

label {
	display:inline-block;
	width: auto;
	color: #fff;
}

#select-contribution {
	/* width: 296px; */
	width: 400px;
}

#select-room {
	/* width: 100px; */
	width: 198px;
}

#select-degrees-of-freedom {
	width: 198px;	
}

button.button {
	height: 50px;
	width: 70px;
	margin: 0;
	border-radius: 0;
	border: none;
	vertical-align: top;
	line-height: 1;
	padding: 5px 15px;
	font-size: 10px;
	font-family: Helvetica, Arial, sans-serif;
	background-position: 25px 15px; 
	background-repeat: no-repeat;
	background-size: 20px 20px;
}

button[disabled=disabled],
button[disabled=disabled]:hover,
button[disabled=disabled]:focus,
button[disabled=disabled]:active,
button.disabled,
button.disabled:hover,
button.disabled:focus,
button.disabled:active {
	opacity: 0.5!important;
	background-color: #333!important;
}

button.button span {
	visibility: hidden;
	height: 0;
	width: 0;
	color:transparent;	
}

button#btPlay {
	background-color: green;
	padding-top: 8px;
	font-size: 28px;
	line-height:28px;
	background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTAgNTAiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiPgogICA8cG9seWdvbiBwb2ludHM9IjAsMCA1MCwyNSAwLDUwIiBzdHlsZT0iZmlsbDojZmZmZmZmIi8+Cjwvc3ZnPg==');
	background-position: 25px 13px; 
	background-size: 24px 24px;
}

button#btStop {
	background-color: red;
	padding-top: 5px;
	font-size: 38px;
	line-height:38px;
	background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTAgNTAiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiPgogICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHN0eWxlPSJmaWxsOiNmZmZmZmYiLz4KPC9zdmc+');
}

button#btPause {
	background-color: #ffba00;
	padding-top: 9px;
	font-size: 26px;
	line-height:26px;
	font-weight: 900;
	background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTAgNTAiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyMCIgaGVpZ2h0PSI1MCIgc3R5bGU9ImZpbGw6I2ZmZmZmZiIvPjxyZWN0IHg9IjMwIiB5PSIwIiB3aWR0aD0iMjAiIGhlaWdodD0iNTAiIHN0eWxlPSJmaWxsOiNmZmZmZmYiLz48L3N2Zz4=');	
}

button#btPause[data-paused] {
	opacity: 0.85;
	border-left: 2px solid #444;
	border-top: 2px solid #444;
	/* background-color: orange; */
	background-position: 24px 14px;
}

a#stats {
	text-align:right;
	word-wrap: break-word;
	display: block;
	opacity: 0;
	color: transparent;
	float: right;
	width: 70px;
	height: 50px;
	font-size: 0.7rem;
	padding: 6px 0;
	margin: 0 3px;
	line-height: 0.9rem;
}

a#stats:hover {
	opacity: 1;
	color: #fff;
	cursor: help;
}

div#clock {
	position: absolute;
	top: 39px;
	right: 2px;
	font-family: monospace;
	font-size: 0.65rem;
	color: #fff;
}

#lights {
	background: rgba(8,65,115,1);
	float: right;
	margin: 0 3px;
	cursor: help;
}

select#Server {
	height: 50px;
	width: 50px;
	font-size: 42px;
	float: right;
	padding: 0 5px;
	line-height: 1;
	cursor: pointer;
	display: inline-block;
}

select#Server option {
}

#error {
	width: 400px;
	text-align: center;
	color: #fff!important;
	padding:20px;
}

#error h1 {
	color: #fff!important;
	font-size: 2em;
}
#error a {
	white-space: nowrap;
}

input[type=range] {
	width: 100%;
	height:26px!important;
	padding: 0;
	border: 0;
	margin: 0;
}