@media screen and (orientation:portrait) {}


*:not(html) {box-sizing: border-box; overflow:hidden;}

strong {font-weight: 600}

body.select-network-id {overflow-y: scroll;}

body, html {height:100%; font-family: 'Roboto', sans-serif;}

body.default .header {background-color: rgba(255,255,255,1);}
body.default .data-table .heading, body.default .data-graph .y-axis {border-color: rgba(255,255,255,1); background-color: rgba(255,255,255,0.5)}
.data-table .records .record.default, .data-graph .records .record.default div {background: repeating-linear-gradient( 45deg, white, white 10px, #f9f9f9 10px, #f9f9f9 20px);}

body.heating .header {background-color: rgba(244,67,54,1);}
body.heating .data-table .heading, body.heating .data-graph .y-axis {border-color: rgba(244,67,54,1); background-color: rgba(244,67,54,0.5)}
.data-table .records .record.heating, .data-graph .records .record.heating div {background-color: rgba(244,67,54,0.35)}

body.cooling .header {background-color: rgba(33,150,243,1);}
body.cooling .data-table .heading, body.cooling .data-graph .y-axis {border-color: rgba(33,150,243,1); background-color: rgba(33,150,243,0.5)}
.data-table .records .record.cooling, .data-graph .records .record.cooling div {background-color: rgba(33,150,243,0.35)}

body.constant .header {background-color: rgba(103,58,183,1);}
body.constant .data-table .heading, body.constant .data-graph .y-axis {border-color: rgba(103,58,183,1); background-color: rgba(103,58,183,0.5)}
.data-table .records .record.constant, .data-graph .records .record.constant div {background-color: rgba(103,58,183,0.35)}

body.stable .header {background-color: rgba(76,175,80,1);}
body.stable .data-table .heading, body.stable .data-graph .y-axis {border-color: rgba(76,175,80,1); background-color: rgba(76,175,80,0.5)}
.data-table .records .record.stable, .data-graph .records .record.stable div {background-color: rgba(76,175,80,0.35)}


.data-table .records .record .check i{display: none}
.data-table .records .record.constant .check i,
.data-table .records .record.stable .check i{
	display:block;
}

.console {position: absolute; bottom:0; background-color: black; width:100%; z-index:999;color:white; padding:5px}

.notification.visible, .table {display: table; width: 100%;}

.table-cell {display: table-cell; vertical-align: middle; font-size: 15px;}

.selected{background-color: #ffeb3b !important; opacity: 1 !important;}

.notification {
	display: none;
	text-align: center;
    position: absolute;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    z-index: 10;
    color:white;
}

.header {height: 20%; color:white;}

.progress-bar{background: rgba(0,0,0,0.2); display: block; height: 40px; position: absolute; top:0}



a.navigation {height: 40px; white-space: nowrap; position: absolute; width:100%;}
a.navigation:link, a.navigation:hover, a.navigation:visited {color:white;}

.header span {font-size:14px; line-height: 17px;}
.header span.network-id {letter-spacing: 1px;}
.header span.asset-application-id {display: block; }

.header .info {position:absolute; z-index: 1; padding: 3px 6px;}


.header h1 {text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); color: white; text-align: center; font-weight: 600; font-size: 72px;}

.data-table {height:60%; padding:6px;}
.data-table .table {padding:0 6px;}
.data-table .heading {font-weight: 600; height: 15%; border-width: 3px; border-bottom-style: solid; border-bottom-width: 3px}
.data-table .records {height: 85%}
.data-table .records .record.table {height:10%;}


.data-table .table-cell.date-time {width:60%;}
.data-table .table-cell.temperature {width:30%; text-align: center;}		
.data-table .table-cell.check {width:10%; text-align: center;}		


.data-graph .y-axis {height:100%; width:15%; padding:6px; border-right-style: solid; border-right-width: 3px}
.data-graph .y-axis .table {height: 33%; width:100%;}
.data-graph .y-axis .table .table-cell{text-align: right; font-weight: 600}
.data-graph {height:20%; padding:6px; padding-top:0;}
.data-graph .records {
	height:100%;
	background: 
		linear-gradient(
			180deg, 
			rgba(0,0,0,0.1) calc(50% - 2px), 
			rgba(255,255,255,1) calc(50%), 
			rgba(0,0,0,0.1) calc(50% + 2px)
		);
	}
.data-graph .records .record {height:100%; width:10%; vertical-align: bottom}
.data-graph .records .record div {text-align: center; font-size: 12px}



@media screen and (orientation:landscape) {

	.table-cell {font-size: 13px;}
	.data-graph .records .record div {font-size: 10px;}
	.data-table { height: 70%; float: left;}
	.header h1 {font-size:42px;}
	.header {height: 25%}
	.data-table {padding:6px 3px 6px 6px; width: 50%; height: 75%; float: left;}
	.data-graph {padding:6px 6px 6px 3px; margin-left: 50%; height: 75%;}

}


li.selection:nth-child(odd) {
   background-color: #ececec;
}

li.selection a:link, li.selection a:visited {color:black !important;}
li.selection {padding:0 12px;}
li.selection h1 {font-size: 18px; padding:12px;}
li.selection h2 {font-size: 16px; padding:0 12px 12px 12px;}
li.selection h3 {font-size: 12px; padding:0 12px 12px 12px;}