@font-face{
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 700;
	src: url(Raleway-Bold.ttf) format('truetype');
}

body {
	margin: 0;
	background: #fff;
}

div, canvas{
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#container{
	background:#000;
	position: relative;
	width: 1850px;
	height: 950px;
	/*width: 100%;
	max-height: 100%;*/
}

#game_pane{
	position: relative;
	width: 1850px;
	height: 950px;
	background: #fff;
	overflow: hidden;
}

#canvas{
	background-color:#fff;
	/*
    background-color:#fed;
    */
	display:block;

	width: 1850px;
	height: 680px;

	position: absolute;
	top:0;
	left:0;
}

#canvas[loading=yes]{
	display: none;
}

#preloader{
	width: 100%;
	height: 100%;
	background-color: #000;
}
#loading_bar{
	width:360px; height:90px;
	position: absolute;
	margin: auto;
	top:0; left:745px; bottom: 0;
	overflow: hidden;
}
#loading_bar_connection{
	position: absolute;
	top:0; left:-225px;
	width:360px; height:90px;
	background-image: url(../assets/ui/loading2.png);
	-webkit-transition: left 0.5s;
	-moz-transition: left 0.5s;
	-ms-transition: left 0.5s;
    transition: left 0.5s;
}
#loading_bar_graphic{
	position: absolute;
	top:0; left:0;
	width:360px; height:90px;
	background-image: url(../assets/ui/loading.png);
}

#ui{
	position: absolute;
	left: 0;
	top: 680px;
	z-index: 4;
	width: 1850px;
	height: 270px;
	background: linear-gradient(180deg, rgba(10,20,35,0.96), rgba(5,11,20,0.99));
	box-shadow: 0 -8px 22px rgba(0,0,0,0.2);
}

/** CAPTIONS **/


#control_captions_wrapper{
	position: absolute;
	left: 10px;
	top: 8px;
	z-index: 24;
	width: 100px;
	height: 50px;
}
#control_captions_select{
	float:left;
	width: 100px;
	margin-top: 12px;
	margin-right: 10px;
}

#captions{
	box-sizing: border-box;
	cursor: pointer;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
	display: none;
	align-items: center;
	justify-content: center;
	width: 1850px;
	height: 680px;
	padding: 70px 120px;
	background: rgba(7,16,28,0.2);
	text-align: center;
}
#captions > span{
	display: block;
	max-width: 1320px;
	white-space: pre-line;
	font-size: 38px;
	line-height: 1.25;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 200;
	background-color: rgba(4,10,18,0.78);
    color:#fff;
	padding: 16px 22px;
	border: 1px solid rgba(255,255,255,0.28);
	border-radius: 12px;
	box-shadow: 0 12px 36px rgba(0,0,0,0.3);
}

/** RESUME **/

#resume{	
	position: absolute;
	top:0; left:0;
	display: none;
	width: 100%; height: 100%;
	background: rgba(0,0,0,0.75);
}
#resume > #resume_button{	
	position: absolute;
	margin: auto;
	top:0; left:0; right:0; bottom: 0;
	width:200px; height: 200px;
	background: url(../assets/ui/resume.png); 
	background-position: 0px 0px;
	cursor: pointer;

	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	-ms-transform: scale(0.9);
    transform: scale(0.9);

	-webkit-transition: -webkit-transform 0.2s;
	-moz-transition: -moz-transform 0.2s;
	-ms-transition: -ms-transform 0.2s;
    transition: transform 0.2s;

}
#resume > #resume_button:hover{
	background-position: -200px 0px;
	
	-webkit-transform: scale(1.0);
	-moz-transform: scale(1.0);
	-ms-transform: scale(1.0);
	transform: scale(1.0);
}

#controls{
	box-sizing: border-box;
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: 4px;
	width: 1850px;
	height: 220px;
	padding: 10px 20px;
	transition: opacity 0.18s;
}
.controls-locked #controls{
	opacity: 0.42;
	pointer-events: none;
}
.control_slider_row{
	display: flex;
	align-items: center;
	flex: 0 0 46px;
	gap: 8px;
	width: 100%;
	height: 46px;
}
.control_volume_slider{
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	height: 46px;
	width: auto;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	box-shadow: inset 0 1px rgba(255,255,255,0.08);
	cursor: ew-resize;
	direction: ltr;
	transition: background-color 0.18s, box-shadow 0.18s, filter 0.18s;
	--slider-fill: 0%;
	--slider-color: #fff;
}

.control_max_button{
	box-sizing: border-box;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 2px solid rgba(255,255,255,0.9);
	border-radius: 7px;
	background: #ffb13b;
	box-shadow: inset 0 -4px 0 rgba(132,65,0,0.24), 0 3px 8px rgba(0,0,0,0.38);
	color: #142132;
	cursor: pointer;
	font: 700 11px/1 'Raleway', Helvetica, Arial, sans-serif;
	letter-spacing: 0.03em;
	transition: background-color 0.12s, box-shadow 0.12s, transform 0.08s;
}
.control_max_button::after{
	content: attr(data-shortcut);
	position: absolute;
	right: 0;
	bottom: calc(100% + 6px);
	z-index: 12;
	padding: 6px 9px;
	border: 1px solid rgba(255,255,255,0.3);
	border-radius: 6px;
	background: rgba(3,10,18,0.96);
	box-shadow: 0 5px 14px rgba(0,0,0,0.45);
	color: #fff;
	font: 700 13px/1 'Raleway', Helvetica, Arial, sans-serif;
	letter-spacing: 0;
	opacity: 0;
	pointer-events: none;
	transform: translateY(2px);
	transition: opacity 0s, transform 0s;
	white-space: nowrap;
}
.control_max_button:hover::after,
.control_max_button:focus::after{
	opacity: 1;
	transform: translateY(0);
}
.control_max_button:hover,
.control_max_button:focus-visible{
	background: #ffd064;
	box-shadow: inset 0 -4px 0 rgba(132,65,0,0.2), 0 0 0 3px #21dff3, 0 0 15px rgba(33,223,243,0.72);
	outline: none;
}
.control_max_button:active{
	transform: translateY(2px);
	box-shadow: inset 0 -2px 0 rgba(132,65,0,0.24), 0 1px 4px rgba(0,0,0,0.4);
}
.control_max_button:disabled{
	cursor: default;
}

.control_volume_slider:focus{
	outline: none;
}
.control_volume_slider.slider-selected{
	z-index: 2;
	background-color: rgba(73,227,255,0.16);
	box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #21dff3, 0 0 21px rgba(33,223,243,0.95);
	animation: selected-slider-pulse 1.5s ease-in-out infinite;
}
.control_volume_slider.is-saturated:not(.slider-selected){
	background-color: rgba(188,91,24,0.2);
}

@keyframes selected-slider-pulse{
	0%, 100% { filter: brightness(0.94); }
	50% { filter: brightness(1.18); }
}

.control_volume_slider::-moz-range-track {
	width: 100%;
	height: 24px;
	border: 2px solid rgba(255,255,255,0.72);
	border-radius: 14px;
	background: #c8d0da;
}
.control_volume_slider::-moz-range-progress {
	height: 24px;
	border-radius: 14px;
	background: var(--slider-color);
}
.control_volume_slider::-moz-range-thumb {
	width: 34px;
	height: 34px;
	border: 4px solid var(--slider-color);
	border-radius: 50%;
	background: #f7fbfd;
	box-shadow: 0 3px 8px rgba(0,0,0,0.45);
	cursor: ew-resize;
}
.control_volume_slider.slider-selected::-moz-range-thumb {
	filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 9px #34eaff);
}

.control_volume_slider::-webkit-slider-runnable-track {
	width: 100%;
	height: 24px;
	border: 2px solid rgba(255,255,255,0.72);
	border-radius: 14px;
	background: linear-gradient(to right, var(--slider-color) 0 var(--slider-fill), #c8d0da var(--slider-fill) 100%);
}
.control_volume_slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 34px;
	height: 34px;
	margin-top: -7px;
	border: 4px solid var(--slider-color);
	border-radius: 50%;
	background: #f7fbfd;
	box-shadow: 0 3px 8px rgba(0,0,0,0.45);
	cursor: ew-resize;
}
.control_volume_slider.slider-selected::-webkit-slider-thumb {
	filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 9px #34eaff);
}


#control_volume_slider_0::-moz-range-progress {
  background-color: #ff0000; 
}

#control_volume_slider_1::-moz-range-progress {
  background-color: #00ff00; 
}
#control_volume_slider_2::-moz-range-progress {
  background-color: #3366ff; 
}
#control_volume_slider_3::-moz-range-progress {
  background-color: #ffff00; 
}

#control_volume_slider_4::-moz-range-progress {
  background-color: #ff00ff; 
}
#control_volume_slider_5::-moz-range-progress {
  background-color: #00ffff; 
}

.total-progress-bar {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	height: 34px;
	width: 1715px;
	border: 2px solid rgba(255,255,255,0.72);
	border-radius: 17px;
	overflow: hidden;
	background-color: #c8d0da;
	position: absolute;
	top: 906px;
	left: 115px;
	z-index: 6;
	box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.total-progress {
	box-sizing: border-box;
	flex: 0 0 auto;
	height: 100%;
	background-color: orange;
}

#bar_title{
	position: absolute;
	top: 906px;
	left: 20px;
	z-index: 6;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 85px;
	height: 34px;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: #fff;
	font: 700 13px/1 'Raleway', Helvetica, Arial, sans-serif;
	letter-spacing: 0.08em;
	text-shadow: 0 1px 2px #000;
	text-align: center;
}

#legend{
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	top: 115px;
	right: 20px;
	box-sizing: border-box;
	width: 190px;
	height: auto;
	padding: 0;
	border: 1px solid rgba(0,0,0,0.2);
	border-radius: 10px;
	background: rgba(255,255,255,0.96);
	box-shadow: 0 8px 24px rgba(0,0,0,0.16);
	font: 700 14px/1.25 Helvetica, Arial, sans-serif;
}
#legend .legend_item{
	box-sizing: border-box;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	min-height: 110px;
	padding: 12px 9px;
	white-space: normal;
}
#legend .legend_item + .legend_item{
	border-top: 1px solid rgba(13,36,55,0.16);
}
#legend img{
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	margin-right: 8px;
}


/** CONTROLS **/

/*
#controls{
	width: 100%;
	height: 40px;
	background: rgba(0,0,0,0.5);
}
#controls > div:hover{
	background-color: rgba(0,0,0,0.8);
}
#control_play{
	float: left;
	width: 59px;
	height: 40px;
	background-image: url(../assets/ui/play.png);
	cursor: pointer;
}
#control_play[playing=true]{
	background-position: 0px 40px;
}
#control_play[playing=false]{
	background-position: 0px 0px;
}
#control_volume{
	float: left;
	width: 47px;
	height: 40px;
	background-image: url(../assets/ui/volume.png);
	cursor: pointer;
}
#control_captions{
	float: right;
	width: 47px;
	height: 40px;
	background-image: url(../assets/ui/captions.png);
	cursor: pointer;
}
*/