html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Quicksand', sans-serif;
	overflow: hidden;
}
:root {
	--main: #0191EA;
	--mainLight: #84c5fA;
	--lighter: #54C5F8;
	--blueBG:#E6E6FD;
	--darker: #00579B;
	--gray: #ddd;
	--dkGray: #3D433F;
	--bg: #E6E6E6;
}
#output {
	position: fixed;
	right:8px;
	bottom:4px;
	font-size: 10pt;
	color:var(--dkGray);
	text-align: right;
}
#headerPanel {
	position:absolute;
	top:0;left:0;right:0;
	height:56px;
	line-height: 64px;
	vertical-align: middle;
	background: var(--main);
	box-shadow: 0 4px 4px rgba(0,0,0,.4);
}
#userImage {
	height:32px;
	width:32px;
	border-radius: 50%;
	position:fixed;
	top:12px;
	right:12px;
}
#logo {
	position:absolute;
	font-size:40px;
	color:#fff;
	left:16px;
}
#logoutSpan {
	position:absolute;
	right:60px;
	font-size:12px;
	color:#dedeff;
	cursor: default;
}
#headerPanel span:hover{
	color:#fff;
	font-weight: bold;
}
#leftPanel {
  position: absolute;
	top:56px; left:0;
	bottom:0;
	width:450px;
	background: var(--bg);
	border-right: 1px solid var(--gray);
	text-align: center;
}
#deviceCanvas {
	top:80px;
	background: none;
	position:absolute;
	left:10px;
}
#deviceSelectDiv {
	position: absolute;
	left:75px;
	top:20px;
	background-color: #fff;
	width: 245px;
	height: 44px;
	line-height: 44px;
	border-radius: 2px;
}
#deviceSelectDiv:hover {
	background-color: #ededed;
}
.selectDiv {
	font-size: 10pt;
	box-shadow: 1px 1px 1px rgba(32, 32, 32, .4);
	width: 100%;
	background: url('img/menu-down.png') no-repeat 95% 50%;
	border: 1px solid #aaa;
	box-sizing: border-box;
}
.selectDiv select {
	padding: 10px;
	width: 100%;
	border: none;
	box-shadow: none;
	color: var(--dkGray);
	font-family: 'baseFont', sans-serif;
	font-weight: 200;
	font-size: 14px;
	background: transparent none;
	-webkit-appearance: none;
	text-align-last: center;
}

.selectDiv select:focus {
	outline: none;
}
#orientationDiv {
	position: absolute;
	top:20px;
	right:75px;
	background: #fff;
	width: 42px;
	height: 42px;
	line-height: 42px;
	box-shadow: 1px 1px 1px rgba(32, 32, 32, .4);
	font-size: 24px;
	vertical-align: middle;
	text-align: center;
	color: #444;
	border: 1px solid #aaa;
	border-radius: 2px;
}
#orientationDiv:hover {
	background: #ededed;
}

#orientationDiv:active {
	box-shadow: none;
	transform: translateX(2px) translateY(2px);
}
#mainPanel {
	position: absolute;
	top:56px; right:0;
	bottom:0;
	left:450px;
}
.modalDefault {
	display: none;
	position: fixed;
	top:0;left:0;bottom:0; right:0;
	background-color: rgba(0,0,0,.4);
	z-index: 10;
}
#modal_dialog {
	background-color: #fefefe;
	text-align: center;
	margin:20% auto;
	padding:10px 16px;
	border: 1px solid #888;
	border-radius: 6px;
	box-shadow: 6px 6px 6px rgba(0,0,0, .25);
	width:400px;
	transition-duration: 125ms;
}
#modal_footer {
	padding: 40px 0 0 0;
	margin-top:20px;
	text-align: center;
	height:40px;
}
#modal_header {
	text-align: center;
	width: 100%;
	padding:8px;
	color:var(--main);
	font-weight: bold;
	cursor: default;
}
#modal_footer span {
	padding:6px;
	margin: 4px 10px;
	border:1px solid var(--gray);
	color: var(--dkGray);
	border-radius: 10px;
	width: 6em;
	display: inline-block;
	cursor: default;
}
#modal_info {
	padding:8px;
}
#modal_info input {
	width:90%;
	padding:6px;
	font-size: 12pt;
	outline:none;
	border: 1px solid var(--gray);
}
#modal_info input:focus {
	border: 1px solid var(--main);
	outline:none;
}

#modal_footer span:hover {
	background: var(--gray);
}

@keyframes bounceInDown {
	from,
	60%,
	75%,
	90%,
	to {
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -3000px, 0);
		transform: translate3d(0, -3000px, 0);
	}
	
	60% {
		opacity: 1;
		-webkit-transform: translate3d(0, 25px, 0);
		transform: translate3d(0, 25px, 0);
	}
	
	75% {
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0);
	}
	
	90% {
		-webkit-transform: translate3d(0, 5px, 0);
		transform: translate3d(0, 5px, 0);
	}
	
	to {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.bounceInDown {
	-webkit-animation-name: bounceInDown;
	animation-name: bounceInDown;
}

.wobble {
	font-weight: bold;
	animation: bounceInDown 1s;
}

/* Progress Bar */
.progress {
	position: relative;
	height: 4px;
	display: block;
	width: 100%;
	background-color: #acece6;
	border-radius: 2px;
	background-clip: padding-box;
	margin: 0.5rem 0 1rem 0;
	overflow: hidden;
}

.progress .determinate {
	position: absolute;
	top: 0;
	bottom: 0;
	background-color: #26a69a;
	transition: width .3s linear;
}

.progress .indeterminate {
	background-color: #26a69a;
}

.progress .indeterminate:before {
	content: '';
	position: absolute;
	background-color: inherit;
	top: 0;
	left: 0;
	bottom: 0;
	will-change: left, right;
	-webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
	animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}

.progress .indeterminate:after {
	content: '';
	position: absolute;
	background-color: inherit;
	top: 0;
	left: 0;
	bottom: 0;
	will-change: left, right;
	-webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
	animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
	-webkit-animation-delay: 1.15s;
	animation-delay: 1.15s;
}

@-webkit-keyframes indeterminate {
	0% {
		left: -35%;
		right: 100%;
	}
	60% {
		left: 100%;
		right: -90%;
	}
	100% {
		left: 100%;
		right: -90%;
	}
}

@keyframes indeterminate {
	0% {
		left: -35%;
		right: 100%;
	}
	60% {
		left: 100%;
		right: -90%;
	}
	100% {
		left: 100%;
		right: -90%;
	}
}

@-webkit-keyframes indeterminate-short {
	0% {
		left: -200%;
		right: 100%;
	}
	60% {
		left: 107%;
		right: -8%;
	}
	100% {
		left: 107%;
		right: -8%;
	}
}

@keyframes indeterminate-short {
	0% {
		left: -200%;
		right: 100%;
	}
	60% {
		left: 107%;
		right: -8%;
	}
	100% {
		left: 107%;
		right: -8%;
	}
}

.waitingText {
	font-size: 24px;
	font-weight: bold;
	color: black;
	text-align: center;
}
.keyWord {
	font-weight: bold;
	color: var(--darker);
}

.valueWord {
	font-weight: normal;
	color: #A00;
}