body,html{
	font-size:2vmax;
	overflow:auto;
}

#wrap{
	left:0;
	right:0;
	bottom:0;
	top:5vmax;
	width:80vw;
	height:auto;
	position:absolute;
	margin-left:auto; margin-right:auto;
	overflow:visible;
}


/** Inputs */
input, textarea, select, *.button{
	font-size:2vmax;
}
input[type=button]:hover, input[type=submit]:hover{
	cursor:pointer;
	transform:scaleX(1.05);
}

#menu{
	top:0; left:0; right:0;
	transform:none;
	transition: none;
	bottom:auto; 
	background:rgba(0,0,0,.25);
	width:100%;
	position:fixed;
	text-align: right;
}

#menuButton{
	display:none;
}

#menu a{
	font-size:2vmax;
	width:auto;
	display: inline-block;
	padding:1vmax;
	font-size:1.5vmax;
}

#menu a:hover{
	border:0.2vmax solid rgba(255,255,255,.25);
	padding:0.8vmax;
}

#menu img{
	height:2vmax;
	margin-top:-0.5vmax;
}



/** Header */
	#pageHeader{
		height:auto;
		width:auto;
		right:auto;
		padding:0;
		background:none;
		user-select: none;
	}

	#pageHeader div.back{
		border-radius:0;
		font-size:3vmax;
		cursor:pointer;
	}
	#pageHeader div.back:hover{
		color:rgba(255,255,255,.75);
	}



/** Loading */
	#page[data-page=loading] div.middle{
		font-size:3vmax;
	}

/** Signin */
	#page[data-page=login]{
		top:45vh;
		left:40vw;
		transform:translate(-50%,-50%);
	}


/** Device add */
	#page[data-page=device]{
		margin: 0;
		background: rgba(0,0,0,.25);
		box-shadow: 0.25vmax 0.25vmax 1vmax rgba(0,0,0,.25);
	}




/** DASHBOARD */
	#page[data-page=dashboard]{
		position:relative;
		left:auto; right:auto; bottom:auto; top:auto;
		margin:0;
	}

	#page[data-page=dashboard] div.dash{
		justify-content: space-between;
	}

	#page[data-page=dashboard] div.device{
		font-size:1.5vmax;
		width:49.75%;
	}

	#page[data-page=dashboard] div.device div.bg{
		padding-top:4.1vmax;
	}

	#page[data-page=dashboard] div.device div.bg:active{
	}

	#page[data-page=dashboard] div.device h3{
		font-size:2vmax;
	}

	#page[data-page=dashboard] div.device p.date{
		font-size:1.5vmax;
		padding:1vmax 0.5vmax;
	}

	#page[data-page=dashboard] div.device p.date img{
		width:2vmax; height:2vmax;
	}

	#page[data-page=dashboard] div.device h3 img.battery{
		height:2vmax; width:2vmax;
		margin-right:1vmax;
	}

	#page[data-page=dashboard] div.device div.reading{
		font-size: 2.5vmax;
	}
	

	#page[data-page=dashboard] div.device div.reading > div.contentWrap:not(.fullWidth){
		max-width:80%;
	}

	#page[data-page=dashboard] div.device div.reading div.dashMedia{
		height:9.3vmax;
		background-size: cover;
		background-position: center;
	}

	div.reading div.label{
		bottom:-0.4vmax; 
		right:0.6vmax;
		font-size:1vmax;
	}

	#page[data-page=dashboard] div.device div.reading img{
		width:4vmax;
		height:4vmax;
	}




	
/** Device inspect */
	#page[data-page=inspect]{
		top:0;
		position:relative;
	}

	#page[data-page=inspect]::-webkit-scrollbar {
		width: auto;  /* remove scrollbar space */
		background: rgba(255,255,255,.5);  /* optional: just make scrollbar invisible */
	}
	/* optional: show position indicator in red */
	#page[data-page=inspect]::-webkit-scrollbar-thumb {
		background: #EEE;
	}
	#page[data-page=inspect] h1{
		font-size:4vmax;
		padding:1vmax;
		margin:0 0.25vmax 0.25vmax 0.25vmax;
	}
	#page[data-page=inspect] h1 img{
		width:3.5vmax; height:3.5vmax;
		margin-right:1vmax;
		vertical-align: middle;
		margin-top:-0.6vmax;
	}
	
	#page[data-page=inspect] div.color{
		width:8vmax; height:8vmax;
		border-radius:1vmax;
		margin:1vmax;
		box-shadow:0.25vmax 0.25vmax 0.5vmax rgba(0,0,0,.5);
		cursor:pointer;
	}

	#page[data-page=inspect] div.color.selected{
		margin:0.5vmax;
		border:0.5vmax solid #FFF;
		box-shadow:0vmax 0vmax 0.3vmax rgba(0,0,0,.75);
	}
	#page[data-page=inspect] div.color:hover{
		transform:scale(1.05,1.05);
	}
	#page[data-page=inspect] div.color:active{
		box-shadow:0vmax 0vmax 0.5vmax rgba(0,0,0,1);
	}

	#page[data-page=inspect] div.readings{
		border-radius:0.5vmax;
	}
	#page[data-page=inspect] div.readings div.readingWrap{
		margin:0.25vmax;
	}

	#page[data-page=inspect] div.reading,
	#page[data-page=inspect] div.alertSettings,
	#page[data-page=inspect] label.alertsToggle,
	#page[data-page=inspect] div.sensor[data-label],
	#page[data-page=inspect] p.description
	{
		font-size: 3vmax;
		margin:0.25vmax;
		padding:0.25vmax;
	}
	#page[data-page=inspect] div.alertSettings{
		font-size:2.5vmax;
	}

	#page[data-page=inspect] input[type=checkbox]{
		width:2.5vmax;
		height:2.5vmax;
	}

	#page[data-page=inspect] input[type=number],
	#page[data-page=inspect] select,
	#page[data-page=inspect] option
	{
		font-size:2vmax;
		padding:0.5vmax;
	}

	#page[data-page=inspect] input[type=number]
	{
		width:4vmax;
	}
	#page[data-page=inspect] div.alertSettings input[type=checkbox]{
		margin-right:0.5vmax;
	}
	#page[data-page=inspect] div.reading img{
		width:3vmax;
		height:3vmax;
	}

	#page[data-page=inspect] p.date{
		margin:1vmax;
		font-size:2vmax;
	}

	#page[data-page=inspect] div.inspector > input{
		margin:1vmax;
	}

	#page[data-page=inspect] div.reading.title{
		font-size:4vmax;
	}


	#page[data-page=inspect] div.QR{
		margin:0.25vmax;
	}


	#page[data-page=inspect] p.description{
		margin:0.25vmax;
		padding:2vmax;
	}

	#page[data-page=inspect] div.share{
		top:0;
		font-size:2vmax;
	}

	#page[data-page=inspect] div.share > div.content{
		min-width:600px;
		max-width:800px;
		width:80vw;
	}

	#page[data-page=inspect] div.share > div.content div.qr svg{
		height:256px;
	}
	#page[data-page=inspect] div.share > div.content > div,
	#page[data-page=inspect] div.share > div.content > p
	{
		width:auto;
		border-radius:1.5vmax;
		border-bottom:+.7vmax solid #DDD;
		padding:1vmax;
	}


#page, body > #wrap > #page{
	overflow:visible;
}