@import "styles.css";

#deviceTableHeader {
	position: absolute;
	left:40px;
	top:20px;
	width:500px;
	font-size:18px;
	font-weight: bold;
	height:48px;
	line-height: 48px;
	vertical-align: middle;
	background: var(--dkGray);
	cursor:default;
	padding:8px;
	box-sizing: border-box;
	border-radius: 24px;
}
#controlPanel {
	position: absolute;
	display: block;
	padding-left:20px;
	top:0;left:0;right:0;bottom:0;
}

.controlPanelSpan {
	color:var(--bg);
	margin: 0 6px;
	font-size: 22px;
	display: inline-block;
}

.controlPanelSpan:hover {
	color:var(--main);
}

.controlPanelSpan:active {
	transform: translateX(2px) translateY(2px);
	color: white;
}

.controlPanelSelected {
	border-radius: 8px;
	width: 28px;
	height: 28px;
	line-height: 28px;
	text-align: center;
	background: var(--main);
	color: #fff;
}

.controlPanelDisabled, .controlPanelDisabled:hover, .controlPanelDisabled:active {
	color: #222;
}
.controlPanelSelected:hover {
	background: none;
}
.controlPanelDivider {
	display: inline;
	color: var(--bg);
	margin: 0 8px;
	text-align: center;
	font-weight: normal;
	font-size: 25px;
	border-left: 1px groove var(--gray);
}

.controlPanelDivider:hover {
	color: var(--bg);
}
#progressPanel {
	margin:0;
	padding:0;
	display: none;
	width:1%;
	height:32px;
	line-height: 32px;
	border-radius: 23px;
	background: var(--main);
	/*background: linear-gradient(to bottom, rgba(109,179,242,1) 0%,rgba(84,163,238,1) 50%,rgba(54,144,240,1) 51%,rgba(30,105,222,1) 100%);*/
	text-align: center;
	font-size: 12px;
	color:#fff;
}

#sliderContainer {
	position: absolute;
	top: 80px;
	right: 0;
	bottom: 10px;
	left: 40px;
	width: 500px;
	border: 1px solid var(--gray);
	overflow: auto;
	transition-duration: 125ms;
}

#allDevicesContainer {
	position: absolute;
	top: 0;
	left: 1000px;
	bottom: 0;
	width: 500px;
	transition-duration: 125ms;
}

#allDevicesContainer img {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	height: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

#allDevicesDataPanel {
	height: 100%;
	width: 100%;
	padding: 8px;
	background: white;
	color: black;
	margin: 0;
	font-size: 10pt;
	font-family: 'Quicksand', sans-serif;
	overflow: auto;
	transition-duration: 125ms;
	display: block;
}
#dataContainer {
	position: absolute;
	top: 0;
	left: 500px;
	bottom: 0;
	width: 500px;
	transition-duration: 125ms;
	background: #fff;
}

#dataPanelJSON {
	height: 100%;
	width: 100%;
	padding: 8px;
	background: none;
	color: black;
	margin: 0;
	font-size: 10pt;
	font-family: 'Quicksand', sans-serif;
	overflow: auto;
	display: block;
	transition-duration: 125ms;
}

.jsonActionButton {
	position: absolute;
	right: 20px;
	top: 28px;
	background: var(--main);
	height: 40px;
	width: 100px;
	border-radius: 20px;
	font-size: 14px;
	line-height: 40px;
	color: white;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, .4);
	text-align: center;
	cursor: default;
	transition-duration: 125ms;
}

.jsonActionButton:hover {
	background: var(--darker);
	box-shadow: 2px 2px 2px rgba(0, 0, 0, .55);
}

.jsonActionButton:active {
	background: black;
	box-shadow: none;
	transform: translateX(2px) translateY(2px);
}
#tablePanel {
	position:absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 500px;
	border-top:1px solid var(--gray);
	border-bottom:1px solid var(--gray);
	transition-duration: 125ms;
}

.slideRight {
	transform: translateX(-500px);
}

.slideRight2 {
	transform: translateX(-1000px);
}
.tableArea {
	display:block;
	border-left:1px solid var(--gray);
	border-right:1px solid var(--gray);
	border-bottom:1px solid var(--gray);
	border-collapse: collapse;
	overflow-y: auto;
	margin:0;
	padding:0;
}
.tableArea table {
	display:block;
	table-layout:fixed;
	padding:0;
	margin:0;
}
.tableArea thead {
	display: inline;
	position: absolute;
	font-weight: normal;
	background: #fff;
	color: #000;
	overflow: hidden;
	width: 500px;
	border-spacing: 0;
	line-height: 60px;
	height: 60px;
	vertical-align: middle;
	box-shadow: rgba(0, 0, 0, .5) 0 6px 6px -3px;
}

.tableArea thead tr {
	display: block;
	width: 100%;
	font-weight: normal;
	padding: 0;
	margin: 0;
	border-spacing: 0;
	border-collapse: collapse;
}

.tableArea thead tr th {
	padding-left: 8px;
	padding-right: 12px;
	margin: 0;
	border-right: 1px dotted #dedede;
	box-sizing: border-box;
	font-weight: 700;
}


.tableArea tbody {
	position:absolute;
	display: block;
	top: 60px;
	width: 500px;
	bottom:0;
	overflow: auto;
	border-right: 1px solid var(--gray);
}

.tableArea tr:nth-child(even) {
	background-color: #fff;
}
.tableArea tbody tr {
	display: block;
	width: 100%;
	height: 32px;
	background: #f4f4f4;
	font-weight: normal;
	font-family: 'Dosis', sans-serif;
	font-size: 11pt;
	color: #444;
}
.tableArea tbody tr:hover {
	background: #ededed;
	font-weight: bold;
	color:black;
}

.tableArea tbody td {
	line-height: 32px;
	height: 32px;
	display: inline-block;
	vertical-align: middle;
	font-weight: 100;
	cursor: default;
	padding-left: 8px;
	padding-right: 12px;
	margin: 0;
	box-sizing: border-box;
}
.nameCol {
	width:200px;
	background: var(--dkGray);
	color:var(--gray);
	border-bottom: 1px solid var(--dkGray);
	font-family: 'Quicksand', sans-serif;
	text-align: right;
	padding-right: 44px;
}
.valueCol {
	width:295px;
	color: #454545;
	background: none;
	border-bottom: 1px solid #dedede;
}
.editor {
	width:100%;
	border:none;
	margin:0;
	font-family: 'Quicksand', sans-serif;
	background: none;
}
.editor:focus{
	outline:none;
}
.editing {
	background: var(--blueBG);
}