body,html{
	padding:0; margin:0;
	width:100%; height:100%;
	font-family: Arial, Helvetica, sans-serif;
	background: linear-gradient(to bottom, #fde9c3 0%,#fcd6a8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	overflow: hidden;
	font-size:3vmax;
	line-height: 125%;
}

*{
	position: relative;
}

*.button{
	background: linear-gradient(to bottom, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
	font-weight: bold;
}
*.button:hover{
	box-shadow:0 0 3vmax rgba(0,0,0,.25);
}
*.button:active{
	box-shadow:0 0 1vmax rgba(0,0,0,.5);
	transform:scale(0.97);
}
*.red{
	color:#FCC;
}
*.green{
	color:#CFC;
}
*.bold{
	font-weight: bold;
}


*.hidden{
	display: none;
}
*.nomargin{
	margin:0 !important;
}

.bgGradientWhite{
	background: linear-gradient(to bottom, #e9e9e9 0%,#dadada 100%) !important;
}
.bgGradientGreen{
	background: linear-gradient(to bottom, #c1ffc1 0%,#97ff9a 100%) !important;
}
.bgGradientRed{
	background: linear-gradient(to bottom, #ffc5c1 0%,#ffa197 100%) !important;
}
.bgGradientYellow{
	background: linear-gradient(to bottom, #fffac1 0%,#fffa97 100%) !important;
}
.bgGradientBlue{
	background: linear-gradient(to bottom, #c1e0ff 0%,#97c8ff 100%) !important;
}
.bgGradientCyan{
	background: linear-gradient(to bottom, #c1fffc 0%,#97fffd 100%) !important;
}
.bgGradientPink{
	background: linear-gradient(to bottom, #f7c1ff 0%,#f597ff 100%) !important;
}
.bgGradientPurple{
	background: linear-gradient(to bottom, #ccc1ff 0%,#ae97ff 100%) !important;
}
.bgGradientOrange{
	background: linear-gradient(to bottom, #ffdec1 0%,#ffcb97 100%) !important;
}
.bgGradientBlack{
	background: linear-gradient(to bottom, #7a7a7a 0%,#4b4b4b 100%) !important;
}
.center{
	text-align: center;
}

/** Inputs */
input, textarea, select, *.button, label.buttonLabel{
	border:0.1vmax solid #000;
	border-radius:1vmax;
	font-size:3vmax;
	padding:1vmax;
	margin-bottom:1vmax;
	outline:none;
}

input[type=button], input[type=submit], label.buttonLabel{
	background:rgba(0,0,0,.5);
	color:#FFF;
	font-weight: bold;
	padding:1vmax 3vmax;
	display: inline-block;
}
.genericBlackBg{
	background:rgba(0,0,0,.25);
	border-radius: 1vmax;
	padding:1vmax 3vmax;
}
input[type=button].small, input[type=submit].small{
	font-size:1.5vmax;
	padding:0.5vmax;
	font-weight: normal;
}
input[type=button]:active, input[type=submit]:active{
	background:rgba(100,100,100,.5);
}


label.checkbox.checked{
	border-color:#97ff9a;
	background-color: rgba(150,255,150,.5);
	color:#373;
	box-shadow: 0 0 0.5vmax rgba(100,255,100,1);
}
label.checkbox.checked .cbUnchecked{
	display:none;
}
label.checkbox:not(.checked) .cbChecked{
	display:none;
}

label.checkbox{
	border-color:#ff9797;;
	background-color: rgba(255,150,150,.5);
	color:#733;
	box-shadow: 0.2vmax 0.2vmax 0.5vmax rgba(0,0,0,.5);
	
}


textarea{
	width:100%;
	box-sizing: border-box;
}


hr{
	border:none;
	border-top:1px solid rgba(255,255,255,.5);
	width:50%;
	clear:both;
}

*[contenteditable], label, div.alertSettings, input.contenteditable{
	transition:background 2s ease-in-out;
	outline:none;
}

*.saveSuccessAnim{
	background:rgba(200,255,200, 0.5) !important;
	transition:none !important;	
}

#wrap{
	position: fixed;
	left:0;right:0;
	top:0;bottom:0;
	overflow: hidden;
}

#page{
	overflow: auto;
}

#menuButton{
	position: absolute;
	bottom:0;
	right:0;
	padding:1vmax 3vmax;
	font-size:5vmax;
	background:rgba(0,0,0,.25);
	border-top-left-radius: 1vmax;
	color:#FFF;
}

#menuButton:active{
	background:rgba(100,100,100,.25);
}

#menu{
	width:80%;
	position: absolute;
	bottom:0; right:0;
	transform:translateY(150%);
	transition: none;
	
}
#menu.open{
	transform:translateY(0%);
	transition: transform 0.25s ease-out;
}

#menu a{
	width:100%;
	display: block;
	background:#555;
	color:#FFF;
	padding:2vmax;
	font-size:3vmax;
	cursor:pointer; 
	user-select: none;
}
#menu a *{
	cursor:pointer;
}

#menu a.green{
	background:#373;
}
#menu img{
	height:3vmax;
	vertical-align:middle;
	width:auto;
	margin-top:-0.5vmax;
}

/* Errors */
	#alerts{
		position:fixed;
		top:0;left:0;right:0;bottom:0;
		pointer-events:none;
	}
	#alerts > div{
		margin:1vmax;
		text-align:center;
		box-shadow:0.5vmax 0.5vmax 2vmax rgba(0,0,0,.5);
		padding:1vmax;
		border-bottom:0.25vmax solid;
		border-radius:0.5vmax; 
		pointer-events: all;
	}
	#alerts > div.bgGradientRed{
		border-color:#B88;
	}
	#alerts > div.bgGradientGreen{
		border-color:#8B8;
	}

/* Modal */
	body > #modal{
		top:0vmax;
		text-align:center;
	} 
	#modal > div.center{
		position: absolute;
		left:50%; top:50%;
		transform:translate(-50%,-50%);
		min-width:50vw;
		max-width:100vw;
	}
	#modal div.content{
		padding:5vmax;
		background:rgba(255,255,255,.9);
		border-radius:1vmax;
		border-bottom:0.5vmax solid #AAA;
		margin:1vmax;
		text-align:left;
	}
	#modal div.content.mediaViewer{
		padding:0.1vmax;
	}
	#modal div.content.mediaViewer > img{
		max-width:90vw;
		vertical-align: bottom;
		border-radius:1vmax;
	}

	#modal div.buttons input{
		background-color:rgba(255,255,255,.5);
		border-color:#FFF;
		
	}

/* QR Scanner */
	#QR{
		position:fixed;
		left:0; right:0; bottom:0;top:0;
	}
	#QR video{
		width:100vw; height:100vh;
		display:block;
		position:absolute;
		object-fit:cover;
		z-index:-1;
	}

	#QR input{
		right:1vmax;
	}
	#QR select{
		left:1vmax;
	}
	#QR input, #QR select{
		position:absolute;
		display:block;
		bottom:0;
		background:rgba(0,0,0,.25);
		color:#FFF;
		font-weight: normal;
		border:none;
		border-radius:0;
	}



/* Battery power display */

	@keyframes powerWarning{
		from{filter:brightness(100%) sepia(100%) saturate(3000%) hue-rotate(295deg);}
		to{filter:brightness(50%) sepia(100%) saturate(3000%) hue-rotate(295deg);}
	}
	@keyframes powerWarning25{
		from{filter:brightness(100%) sepia(100%) saturate(500%);}
		to{filter:brightness(75%) sepia(100%) saturate(500%);}
	}

	img.battery.pow100,
	img.battery.pow75
	{
		filter:sepia(100%) saturate(300%) hue-rotate(35deg);
	}
	img.battery.pow50{
		filter:sepia(100%) saturate(300%) hue-rotate(20deg);
	}
	img.battery.pow25{
		animation:powerWarning25 1s ease-in-out alternate infinite;
	}
	img.battery.pow0{
		animation:powerWarning 0.5s ease-in-out alternate infinite;
	}

	

/** Header */
	#pageHeader{
		position: fixed;
		top:0; left:0; right:0;
		background:rgba(0,0,0,.5);
		padding:1vmax;
		color:#FFF;
		vertical-align: middle;
		height:5.5vmax;
	}
	#pageHeader div.text{
		float:left;
		vertical-align: middle;
		height:100%;
		margin-left:1vmax; 
		margin-top:1vmax;
		font-weight: bold;
	}
	#pageHeader div.back{
		float:left;
		background:rgba(0,0,0,.8);
		padding:1vmax 2vmax;
		border-radius:1vmax;
		vertical-align: middle;
		height:auto;
	}
	#pageHeader div.back:active{
		background:rgba(255,255,255,.8);
		color:#000;
	}
	


/** Loading */
	#page[data-page=loading]{
		position: absolute;
		width:100%; height:100%;
	}
	#page[data-page=loading] div.middle{
		position: absolute;
		left:50%; top:50%;
		font-size:5vmax;
		font-weight: bold;
		transform:translate(-50%,-50%);
		text-align: center;
		color:rgba(0,0,0,.5);
	}
	@keyframes loadingAnim{
		0%{background-position: top left;}
		50%{background-position: top right;}
	}
	@keyframes loadingAnim2{
		from{transform:scale(1);}
		to{transform:scale(1.05);}
	}
	#page[data-page=loading] div.loadingAnim{
		width:15vmax;
		height:15vmax;
		background-image: url('media/logos/loading_anim.png');
		background-size: 200% 100%;
		background-position: top left;
		display:inline-block;
		margin-bottom:1vmax;
		animation:loadingAnim 1s steps(1) infinite, loadingAnim2 1s ease-in-out alternate infinite;
		clear:both;
	}

/** Signin */
	#page[data-page=login]{
		position: absolute;
		width:100%; height:100%;
	}

	#page[data-page=login] #google{
		position: absolute;
		left:50%; top:50%;
		transform:translate(-50%,-50%);
	}


/** Device add */
	#page[data-page=device]{
		margin-top:8vmax;
		text-align: center;
		padding:1vmax;
	}

	#page[data-page=device] input, #page[data-page=device] select{
		width:100%;
		box-sizing: border-box;
	}



/** DASHBOARD */
	#page[data-page=dashboard]{
		box-sizing: border-box;
		margin-top:8vmax;
		position: absolute;
		overflow: auto;
		left:0; right:0;
		bottom:0; top:0;
		padding:0;
		margin:0;
		line-height: 100%;
	}

	#page[data-page=dashboard] > div.dash{
		display:flex;
		flex-wrap: wrap;
	}

	#page[data-page=dashboard] div.device{
		font-size:2vmax;
		width:100%;
		box-sizing: border-box;
		color:#FFF;
		margin:0 0 0.5vmax 0;
		border-top-right-radius: 1vmax;
		cursor:pointer;
		user-select: none;
	}

	#page[data-page=dashboard] div.category{
		flex:100%;
		font-size:3vmax;
		width:100%;
		box-sizing: border-box;
		color:#FFF;
		background:rgba(0,0,0,.25);
		margin:0 0 0.5vmax 0;
		cursor:pointer;
		user-select: none;
		font-style: italic;
		text-align: center;
		padding:1vmax;
		margin-top:1vmax;
	}

	#page[data-page=dashboard] div.device div.bg{
		box-sizing: border-box;
		padding-top:5vmax;
		box-shadow:0.25vmax 0.25vmax 0.5vmax rgba(0,0,0,.5);
		border:rgba(255,255,255,.5) solid 1px;
		border-left:none; border-right:none;
		height:100%;
	}

	#page[data-page=dashboard] div.device div.bg:active{
		border:rgba(255,255,255,1) solid 1px;
		border-left:none; border-right:none;
		box-shadow:0 0 0.25vmax rgba(0,0,0,.85);
	}

	#page[data-page=dashboard] div.device h3{
		margin:0;
		font-size:3vmax;
		font-weight: normal;
		background:rgba(0,0,0,.25);
		padding:1vmax 0.5vmax;
		position: absolute;
		left:0; top:0; right:0;
		color:rgba(255,255,255,1);
	}

	#page[data-page=dashboard] div.device:active h3{
		background:rgba(0,0,0,.1);
	}

	#page[data-page=dashboard] div.device p.date{
		margin:0;
		font-size:2vmax;
		font-weight: normal;
		padding:1vmax 0.5vmax;
		border-bottom-left-radius:1vmax;
		position: absolute;
		right:0; top:0;
		width:30%;
		text-align: right;
		color:rgba(255,255,255,1);
	}
	#page[data-page=dashboard] div.device p.date.grey{
		color: rgba(255,255,255,.75);
	}
	#page[data-page=dashboard] div.device p.date.red{
		color: #FDD;
	}


	#page[data-page=dashboard] div.device p.date img{
		width:2.7vmax; height:2.7vmax;
		margin-left:0.5vmax;
		vertical-align: top;
	}

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

	#page[data-page=dashboard] div.device div.reading div.battery{
		position: absolute;
		top:0; left:0.1vmax;
		background:rgba(0,0,0,.5);
		border-radius:0.5vmax;
		overflow:hidden;
		height:2vmax;
		display:flex;
		justify-content: center;
	}
	#page[data-page=dashboard] div.device div.reading div.battery span.time{
		font-size:1.5vmax;
		margin:0;
		margin-top:-.4vmax;
		padding:0 0.5vmax;
	}
	#page[data-page=dashboard] div.device div.reading div.battery img{
		height:2.5vmax; width:2.5vmax; 
		margin-top:-.25vmax;
		position:relative;
	}
	
	
	

	#page[data-page=dashboard] div.device div.readings{
		display:flex;
		flex-wrap: wrap;
		flex-direction:row;
		width:100%;
		border-radius:0.5vmax;
	}

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


	#page[data-page=dashboard] div.device div.reading{
		vertical-align: middle;
		color:#FFF;
		font-size: 3vmax;
		width:46%;
		margin:0.1vmax;
		padding:0.5vmax;
		flex-grow:1;
		background:rgba(0,0,0,.3);
		min-height:6vmax;
	}
	#page[data-page=dashboard] div.device div.reading div.contentWrap{
		display:inline-block;
		vertical-align: top;
		height:100%;
		padding-left:7vmax;
	}
	#page[data-page=dashboard] div.device div.reading div.contentWrap.fullWidth{
		width:100%;
		box-sizing: border-box;
	}
	#page[data-page=dashboard] div.device div.reading div.contentWrap.noIcon{
		padding-left:0;
	}
	#page[data-page=dashboard] div.device div.reading div.contentWrap div.content{
		display:flex;
		align-items: center;
		height: 100%;
	}
	div.reading div.contentWrap.center div.content{
		justify-content: center;
	}

	#page[data-page=dashboard] div.device div.reading div.contentWrap div.content div.shelf{
		font-size:2vmax;
		font-style: italic;
		display:flex;
		flex-flow: column wrap;
		margin-left:auto;
	}
	#page[data-page=dashboard] div.device div.reading div.contentWrap div.content div.shelf.small{
		font-size:1.25vmax;
		text-align: right;
		background:none;
	}
	#page[data-page=dashboard] div.device div.reading div.contentWrap div.content div.shelf.small > *{
		background:none;
	}
	#page[data-page=dashboard] div.device div.reading div.contentWrap div.content div.shelf > *{
		flex:1;
		line-height: 100%;
		border-radius:0.5vmax;
		background:rgba(0,0,0,.25);
		margin:0.1vmax;
		padding:0.5vmax;
	}

	div.reading div.dashButton{
		text-align: center;
		width:100%;
	}
	div.reading div.dashButton > input{
		padding:3vmax;
		width:70%;
		color:#000;
		border:0.25vmax groove #FFF;
		box-shadow: 0.2vmax 0.2vmax 1vmax rgba(0,0,0,.5);
	}


	div.reading div.label{
		position: absolute;
		bottom:-0.4vmax; 
		right:0.6vmax;
		font-size:1.5vmax;
		color:#FFF;
		font-style: italic;
	}

	#page[data-page=dashboard] div.device div.reading span.reading{
		vertical-align: middle; 
	}
	
	#page[data-page=dashboard] div.device div.reading span.reading label.buttonLabel{
		margin:0;
	}

	#page[data-page=dashboard] div.device div.reading img{
		width:6vmax;
		height:6vmax;
		vertical-align: middle;
		position:absolute;

	}




	
/** Device inspect */
	#page[data-page=inspect]{
		text-align: center;
		overflow-y: auto;
		position: absolute;
		top:7.5vmax;
		padding-top:1vmax;
		bottom:0;
		left:0; right:0;
	}

	#page[data-page=inspect]::-webkit-scrollbar {
		width: 0px;  /* remove scrollbar space */
		background: transparent;  /* optional: just make scrollbar invisible */
	}
	/* optional: show position indicator in red */
	#page[data-page=inspect]::-webkit-scrollbar-thumb {
		background: #FF0000;
	}
	#page[data-page=inspect] h1{
		font-size:4.5vmax;
		display:block;
		padding:1vmax;
		margin:0 0.25vmax 0.25vmax 0.25vmax;
		color:#FFF;
		background:rgba(0,0,0,.3);
	}
	#page[data-page=inspect] h1 img{
		width:3.7vmax; height:3.7vmax;
		vertical-align:top;
		margin-right:1vmax;
	}
	
	#page[data-page=inspect] div.color{
		width:8vmax; height:8vmax;
		border-radius:1vmax;
		display: inline-block;
		margin:1vmax;
		box-shadow:0.25vmax 0.25vmax 0.5vmax rgba(0,0,0,.5);
	}

	#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:active{
		box-shadow:0vmax 0vmax 0.5vmax rgba(0,0,0,1);
	}

	#page[data-page=inspect] div.readings{
		display:flex;
		flex-wrap: wrap;
		flex-direction:row;
		width:100%;
		border-radius:0.5vmax;
	}
	#page[data-page=inspect] div.readings div.readingWrap{
		margin:0.25vmax;
		width:100%;
		background:rgba(0,0,0,.25);
	}

	#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-id],
	#page[data-page=inspect] p.description
	{
		display: block;
		color:#FFF;
		font-size: 3vmax;
		min-width:46%; 
		margin:0.25vmax;
		padding:0.25vmax;
		flex-grow:1;
	}
	#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] div.dash.reading{
		display:flex;
		justify-content: center;
		align-items: center;
	}
	#page[data-page=inspect] div.dash.reading div.contentWrap{
		display:inline-block;
	}
	#page[data-page=inspect] div.dash.reading div.contentWrap.fullWidth{
		width:100%;
	}
	#page[data-page=inspect] div.dash.reading div.contentWrap div.content{
		display:flex;
		align-items: stretch;
		height: 100%;
	}
	#page[data-page=inspect] div.dash.reading div.contentWrap.spaceAround div.content{
		justify-content: space-around;
	}
	#page[data-page=inspect] div.dash.reading div.contentWrap div.content div.shelf{
		font-size:2vmax;
		font-style: italic;
		flex-flow: column wrap;
	}
	#page[data-page=inspect] div.dash.reading div.contentWrap div.content div.shelf > *{
		flex:1;
		line-height: 100%;
		border-radius:0.5vmax;
		background:rgba(0,0,0,.25);
		margin:0.1vmax;
		padding:0.5vmax;
	}

	#page[data-page=inspect] input[type=number]
	{
		display: inline-block;
		width:4vmax;
	}
	#page[data-page=inspect] div.alertSettings input[type=checkbox]{
		margin-right:0.5vmax;
		vertical-align: middle;
	}

	#page[data-page=inspect] div.reading span.reading{
		vertical-align: middle; 
	}
	

	#page[data-page=inspect] div.reading img{
		width:4vmax;
		height:4vmax;
		display:block;
	}

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

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

	#page[data-page=inspect] div.sensor.autoHeight[data-id]{
		height:auto;
	}
	#page[data-page=inspect] div.sensor[data-id]{
		height:15vmax;
		overflow:hidden;
	}
	#page[data-page=inspect] div.histogram.small{
		height:6vmax;
		width:100%;
	} 

	#page[data-page=inspect] div.sensor[data-type='mail'],
	#page[data-page=inspect] div.sensor[data-type='button'],
	#page[data-page=inspect] div.sensor[data-type='camera'],
	#page[data-page=inspect] div.sensor[data-type='boolean']
	{
		height:auto;
		overflow:visible;
	}
	
	#page[data-page=inspect] div.sensor[data-id] img.media{
		max-width:100%;
		height:auto;
		border-radius:1vmax;
		box-shadow:0.25vmax 0.25vmax 0.5vmax rgba(0,0,0,.5);
		border: 0.2vmax solid #FFF;
		margin-bottom:2vmax;
	}

	#page[data-page=inspect] div.sensor[data-id] div.mediaThumbs{
		display:flex;
		justify-content: center;
		overflow:visible;
		flex-flow: wrap;
		margin-bottom:2vmax;
	}
	#page[data-page=inspect] div.sensor[data-id] div.mediaThumbs div.thumb{
		overflow: hidden;
		width:24%;
		margin: 0.5%;
		height:15vmax;
		border-radius: 1vmax;
		box-shadow:0.25vmax 0.25vmax 0.5vmax rgba(0,0,0,.5);
		background-size: cover;
		background-position: center;
		cursor:pointer;
		user-select:none;
	}
	#page[data-page=inspect] div.sensor[data-id] div.mediaThumbs div.thumb:hover{
		box-shadow:0.25vmax 0.25vmax 0.5vmax rgba(0,0,0,1);
	}
	#page[data-page=inspect] div.sensor[data-id] div.mediaThumbs div.thumb:active{
		transform:scale(0.95, 0.95);
	}

	#page[data-page=inspect] div.sensor[data-id] div.mediaThumbs div.thumb div.date{
		background:rgba(0,0,0,.5);
		padding:0.5vmax;
		color:#FFF;
		position: absolute;
		bottom: 0;
		right:0;
		font-size:1.5vmax;
		border-top-left-radius: 1vmax;
	}

	#page[data-page=inspect] div.sensor[data-id] div.calendar{
		font-size:2vmax;
		background:rgba(255,255,255,.25);
		display:inline-block;
		padding:1vmax;
		user-select: none;
	}
	#page[data-page=inspect] div.sensor[data-id] div.calendar th{
		font-weight:bold;
		font-size:1.5vmax;
		cursor:default;
	}
	#page[data-page=inspect] div.sensor[data-id] div.calendar td{
		color:rgba(255,255,255,.75);
		padding:1vmax;
		background:rgba(0,0,0,.25);
		cursor:default;
	}
	#page[data-page=inspect] div.sensor[data-id] div.calendar td.outOfBounds{
		color:rgba(255,255,255,.5);
		background:rgba(0,0,0,.1);
	}
	#page[data-page=inspect] div.sensor[data-id] div.calendar td.today{
		color:#FFF;
		background:rgba(150,255,150,.5);
	}
	#page[data-page=inspect] div.sensor[data-id] div.calendar span.nav{
		font-weight:bold;
		display:block;
		position:absolute;
		top:0;
		right:0.5vmax;
		bottom:auto;left:auto;
		background:rgba(0,0,0,.25);
		line-height:110%;
		width:2.5vmax;
		height:2.5vmax;
		cursor:pointer;
	}
	#page[data-page=inspect] div.sensor[data-id] div.calendar span.pre{
		right:auto;
		left:0.5vmax;
	}
	#page[data-page=inspect] div.sensor[data-id] div.calendar td div.nr{
		position:absolute;
		background:rgba(200,0,0,.75);
		padding:0.25vmax;
		line-height:100%;
		font-size:1.5vmax;
		color:#FFF;
		border-radius:0.5vmax;
		border:0.15vmax solid #FFF;
		bottom:-0.25vmax;right:-0.25vmax;
		box-shadow:0.15vmax 0.15vmax 0.5vmax rgba(0,0,0,.75);
	}
	#page[data-page=inspect] div.sensor[data-id] div.calendar td.clickable:hover{
		cursor:pointer;
		background:rgba(255,255,255,.25);
	}
	#page[data-page=inspect] div.sensor[data-id] div.calendar td.clickable:active{
		transform:scale(0.95,0.95);
	}

	#page[data-page=inspect] div.sensor[data-id] div.winerack{
		display: inline-block;
	}
	#page[data-page=inspect] div.sensor[data-id] div.wineRow{
		display:flex;
	}
	#page[data-page=inspect] div.sensor[data-id] div.wineRow div.bottle{
		background:rgba(0,0,0,.5);
		flex:1;
		padding:1vmax;
		margin:0.2vmax;

	}
	#page[data-page=inspect] div.sensor[data-id] div.wineRow div.bottle.empty{

	}

	#page[data-page=inspect] div.reading div.label{
		display:none;
	}

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


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

	#page[data-page=inspect] p.description{
		margin:0.25vmax;
		padding:2vmax;
		background:rgba(0,0,0,.25);
	}

	#page[data-page=inspect] div.share, #modal{
		position:fixed;
		top:7.5vmax; 
		right:0; bottom:0; left:0;
		background:rgba(0,0,0,.75);
		font-size:2vmax;
	}

	#page[data-page=inspect] div.share > div.content div.qr svg{
		height:80vw;
		padding:0;
	}
	#page[data-page=inspect] div.share > div.content > div,
	#page[data-page=inspect] div.share > div.content > p
	{
		width:80vw;
		overflow:hidden;
		border-radius:1.5vmax;
		border-bottom:+.7vmax solid #DDD;
		padding:1vmax;
		background:#FFF;
	}
	#page[data-page=inspect] div.share > div.content > p{
		background:#DFD;
		border-color:#ACA;
	}

	#page[data-page=inspect] div.share > div.content input, #modal > input{
		border-color:#FFF;
	}

	#page[data-page=inspect] div.share div.content{
		position: absolute;
		left:50%; top:50%;
		transform:translate(-50%,-50%);
	}

	/* Actions */
	#page[data-page=inspect] div.actionsList > div.action{
		margin:0.5vmax;
		padding:1vmax;
		border-radius:1vmax;
		border:1px solid #000;
		background:rgba(0,0,0,.25);
	}

	#page[data-page=inspect] div.actionsList > div.action input.deleteAction{
		position: absolute;
		top:0; right:0;
		border-top-left-radius:0;
		border-bottom-right-radius: 0;
	}

	#modal div.mailEntry{
		border:0.2vmax solid #FFF;
		border-radius:1vmax;
		background:rgba(0,0,0,.25);
		color:#FFF;
		text-align:center;
		font-size:3vmax;
		vertical-align:middle;
		padding:1vmax;
	}
	#modal div.mailEntry img{
		width:5vmax;
		height:5vmax;
		vertical-align:middle;
		position:absolute;
		left:1vmax;
		top:-0.25vmax;
	}

	#modal h3.mailTitle{
		margin:0;
		margin-bottom:1vmax;
		text-align: center;
	}

/* Device specific */
	div.colorPicker{
		border:1px solid #000;
		border-radius:2vmax;
		overflow:hidden;
		padding:0;
		height:6vmax;
		margin-right:1vmax;
		display:inline-block;
		width:40%;
		vertical-align: middle;
	}
	div.colorPicker input[type=color]{
		width:120%;
		height:120%;
		left:-10%;
		top:-10%;
		padding:0;
		margin:0;
		border-radius: 0;
		border:none;
		background:none;
	}

	div.colorTemplate{
		min-height:90%;
		width:4vmax;
		border-radius: 1vmax;
		box-shadow: 0.2vmax 0.2vmax 0.5vmax rgba(0,0,0,.5);
		margin-left:0.25vmax;
	}
	div.colorTemplate:active{
		transform:scale(0.9);
	}