/* Get viewport contrainer by id */

body {
	background: rgba(180, 211, 246, 0.8);
	margin: 0;
	font-family: 'Bebas Neue', cursive;	
} 

#viewPort {
  	width: 100vw;
  	height: 100vh;
	margin-left:5%;
}

#controls {

  	position: fixed;
  	top: 0;
  	left: 0;
  	height: 100vh;
  	width: 15%;
  	min-width: 400px;
  	padding: 20px;
  	margin-left: 5%;	
  	display: flex;
  	flex-direction: column;
  	justify-content: center;
}

.controls-header {
	text-align: center;
	vertical-align: middle;
  	font-size: 15px;
  	text-transform: uppercase;
  	padding: 1em;
  	background: rgba( 5, 6, 8, .8 );
  	color: white;
  	border-top: 5px solid #0084A4;
}

.controls-text {
	text-align: center;
	vertical-align: middle;
  	padding-left: 1em;
  	background: rgba( 155, 155, 155, .8 );
}

.row {

  	margin: 1px;
}

.input-row {
	text-align: left;
	vertical-align: middle;
  	display: flex;
  	justify-content: space-between;
  	padding: 0.5em;
	flex-direction: column;
  	background: rgba( 255, 255, 255, .8 );
  	border-bottom: 1px solid black;
}

.input-label {

  	font-weight: bold;
}

input {

  	width: 80px !important;
  	font-size: 18px;
  	text-align: center;
}
.camera-row {
	border-bottom: 5px solid #0084A4;
}

.btn {

  	width:100%;
  	padding: 1em;
  	font-size: 18px;
  	display: flex;
  	justify-content: center;
  	background: rgba( 5, 6, 8, .8 );
  	color: white;
  	border: 0;
}

.btn:hover {

  	background: rgb( 5, 6, 8 );
}