*{
	margin: 0; 
	padding: 0;
}

body {
	background-color: #FFF;
}

#fullscreen {
	width: 100%;
	height: 100vh;
	background-color: #FFF;
}

#main_stream {
	width: 100%;
	height: 100%;
	background-color: #333;
}

#main_stream_error {
	width: 100%;
	height: 100%;
	background-color: #333;
	text-align: center;
	/*font-size: 2vw;*/
	color: #FFF;
}

	#main_stream_error  > div:first-of-type {
		margin: 0;
		position: absolute;
		top: 50%;
		left: 50%;
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}

	#main_stream_error  div h1 {
		font-family: 'Open Sans', sans-serif;
		color: #FFF;
		margin-top:15px;
		margin-bottom: 5px;
	}

	#main_stream_error p i, #main_stream_error div i {
		text-decoration: none;
		font-size: 2vw;
	}

	#main_stream_error div a {
		text-decoration: none;
		cursor: pointer;
		margin-top:15px;
		display:block;
	}

#thumbnail_streams {
	width: 98vw;
	position: absolute;
	bottom: 45px;
	left: 0px;
	margin-left: 1vw;
	margin-right: 1vw;
}

	/* Base Thumbnail */
	.thumbnail {
		background-color: #FFF;
		display: inline-block;
		border: 2px solid #DDD;
		border-radius: 3px;
		margin-top: 3px;
		margin-left: 3px;
		vertical-align: middle;
		overflow: hidden;
		margin-bottom: 0px;
	}

	/* Special "Thumbnail" for buttons, not limited in width */
	.flex-thumbnail {
		
	}

	/* Default Thumbnail */
	.stream-thumbnail {
		/*max-width: 12%; */
	}

	.stream-thumbnail video {
		max-width: 160px;
		max-height: 120px;
		width: 160px;
		height: 120px;
	}

	.stream-thumbnail-error {

	}

	.stream-thumbnail:hover {
		border-color: #666;
		cursor: pointer;
	}

		.remove-stream, .locked-stream {
			display: block;
			float:right;
			color:#333;
			font-size: 30px;
		}
			.remove-stream:hover {
				color:#F33;
			}
		.locked-stream {
			font-size: 25px;
			margin-right: 3px;
		}
			.locked-stream-hover:hover {
				color:#F5C800;
			}
		.stream-label {
			display: block;
			float:left;
			color:#333;
			font-size: 10px;
			font-weight: normal;	
			padding-left: 5px;
			margin:0px;
		}


#addScreenButton, #addCameraButton {
	display: block;
	margin: 5px;
	width: calc(100% - 10px);
	text-align:left;
}


#chat {
	text-align: center;
	width: 20vw;
	min-width: 300px;
	position: absolute;
	top: 20px;
	right: 20px;
}

	#chat-content {
		display: none;
		padding: 15px;
	}

		#chat-content iframe {
			height: 600px;
		}


.storybook-bg {
	background-color: #FFF;
}

.storybook {
	background-color: #EEE;
	margin-left: 25vw;
	margin-right:25vw;
	padding: 25px;

}

	.storybook h1 {
		font-family: 'Open Sans', sans-serif;
		margin-top: 0px;
		color: #333;
	}

	.storybook label {
		margin-right:20px;
	}

	.storybook-detail {
		min-height: 5vh;
		margin-left: 25px;
		border-left: 1px dashed #333;
	}

/* Overrides for Tablet */
@media screen and (max-width: 1200px) {

	/*.stream-thumbnail {
		width: calc(20% -3px);
	}*/

	.stream-thumbnail video {
		max-width: 80px;
		max-height: 60px;
		width: 80px;
		height: 60px;
	}

}

/* Overrides for Mobile */
@media screen and (max-width: 768px) {
	#fullscreen {
		display: block;
		width: 100%;
		max-height: 100vh;
	}

	#main_stream {
		width: 100%;
		height: auto;
		max-height: 100vh;
	}

	#thumbnail_streams {
		display: block;
		position: static;
		width: 100%;
		margin-bottom: : 3px;
		margin-left:0px;
		margin-right:0px;
	}

	#addScreenButton, #addCameraButton {
		font-size: 10px;
	}

	.thumbnail {
		width: auto;
		bottom: 0;
		left: 0;
		max-width: none;
		margin-bottom: 3px;
	}

		.stream-thumbnail video {
			max-width: 100%;

			max-height: none;
			height: none;
		}

		.stream-label {
			font-size: 12px;	
		}

	#chat {
		display: block;
		position: static;
		width: 100%;
		clear: both;
	}

	#main_stream_error {
		font-size: 4vw;
	}

		#main_stream_error p {
			line-height: 4vw;
		}

		#main_stream_error p a {
			font-size: 3vw;
		}

		#main_stream_error p i {
			font-size: 8vw;
		}

}

/* Overrides for Mobile Portrait */
@media screen and (max-width: 400px) {
	
	.thumbnail {
		width: calc(33% - 3px);
	}

}

.backToPanelButton{
	position:absolute;
	top: 15px;
	left: 15px;
	z-index: 9999;
}