﻿.sensor-reading-container {
	display: flex;
	align-items: center;
}
.sensor-reading-value-display {
	display: block;
	font-size: 30px;
	line-height: 30px;
	height: 30px;
	opacity: 0.6;
	white-space: nowrap;
	text-align: left;
}
.sensor-reading-value-display.label-temp::after {
	/* content: 'C'; */
	font-size: 22px;
}
.sensor-reading-value-display.label-humd::after {
	/* content: ' %'; */
	font-size: 20px;
}
.sensor-reading-label-display {
	display: block;
	font-size: 12px;
	white-space: nowrap;
	opacity: 0.6;
	text-align: left;
}
.sensor-refresh-label-display {
	font-size: 22px;
	opacity: 0.6;
	white-space: pre;
}
.sensor-icon-display-grayed {
	width: 100%;
	opacity: 0.6;
}
.sensor-icon-display-default {
	width: 100%;
}
.sensor-panel-data {
	border-radius: 15px;
}
.rowSensorTimestamp {
	text-align: left;
	color: black;
	position: relative;
	padding: 30px;
}
.rowSensorDataRow {
	overflow: hidden;
	color: black;
	text-align: left;
	padding-bottom: 15px;
}
/* new reading container */
.sensorDataItem {
	float: left;
	width: 120px;
	margin-left: calc((100% - 480px) / 5);
	margin-bottom: 15px;
}
.sensorDataItem:nth-child(5) {
	clear: both;
}
.sensorDataIcon {
	display: inline-block;
	vertical-align: top;
	width: 40px;
	height: 40px;
	margin-right: 10px;
}
.sensorDataInnerCol {
	display: inline-block;
	width: calc(100% - 55px);
}
.sensor-panel-data {
	background: linear-gradient(45deg, white 92%, rgba(255, 255, 255, 0.4) 92%, rgba(255, 255, 255, 0.4) 100%);
}
.middle {
	position: relative;
}
.inner {
	margin-left: auto;
	margin-right: auto;
}
.row {
	margin: 100px 0;
}
/* for map */
.map-marker-info-inner {
	background-color: #f5f1ed;
	background: linear-gradient(45deg, #f5f1ed 90%, rgba(255, 255, 255, 1) 91%, rgba(255, 255, 255, 1) 100%);
	border: 8px solid white;
}
.map-marker-info-inner .sensor-reading-container {
	display: flex;
	align-items: center;
}
.map-marker-info-inner .sensor-reading-value-display {
	font-size: 24px;
	line-height: 24px;
	height: 24px;
}
.map-marker-info-inner .sensor-reading-value-display.label-temp::after {
	font-size: 18px;
}
.map-marker-info-inner .sensor-reading-value-display.label-humd::after {
	font-size: 15px;
}
.map-marker-info-inner .sensor-reading-label-display {
	font-size: 10px;
}
.map-marker-info-inner .sensor-refresh-label-display {
	font-size: 17px;
}
.map-marker-info-inner .rowSensorDataRow {
	padding: 0;
}
.map-marker-info-inner .rowSensorTimestamp {
	padding: 20px;
}
.map-marker-info-inner .sensorDataItem {
	width: 85px;
	margin-left: calc((100% - 340px) / 5);
	margin-bottom: 15px;
}
.map-marker-info-inner .sensorDataItem:nth-child(5) {
	clear: both;
}
.map-marker-info-inner .sensorDataIcon {
	width: 25px;
	height: 25px;
	margin-right: 0;
}
.map-marker-info-inner .sensorDataInnerCol {
	width: calc(100% - 35px);
}
/* 1280 */
@media screen and (max-width: 1499px) {
	.sensor-reading-container {
		display: flex;
		align-items: center;
	}
	.sensor-reading-value-display {
		font-size: 24px;
		line-height: 24px;
		height: 24px;
	}
	.sensor-reading-value-display.label-temp::after {
		font-size: 18px;
	}
	.sensor-reading-value-display.label-humd::after {
		font-size: 15px;
	}
	.sensor-reading-label-display {
		font-size: 10px;
	}
	.sensor-refresh-label-display {
		font-size: 18px;
	}
	.rowSensorDataRow {
		padding: 0;
	}
	.rowSensorTimestamp {
		padding: 20px;
	}
	.sensorDataItem {
		width: 85px;
		margin-left: calc((100% - 340px) / 5);
		margin-bottom: 15px;
	}
	.sensorDataItem:nth-child(5) {
		clear: both;
	}
	.sensorDataIcon {
		width: 25px;
		height: 25px;
		margin-right: 0;
	}
	.sensorDataInnerCol {
		width: calc(100% - 35px);
	}
}
/* 1080p */
@media screen and (max-width: 1279px) {
	.sensor-panel-data {
		margin: 40px 0 20px;
	}
}
/* tablet view */
@media screen and (max-width: 979px) {
}
/* mobile view */
@media screen and (max-width: 499px) {
	.rowSensorTimestamp {
		padding: 10px 0 20px !important;
	}
	.sensorDataItem {
		margin-left: calc((100% - 255px) / 4) !important;
	}
	.sensorDataItem:nth-child(5) {
		clear: none !important;
	}
	.sensorDataItem:nth-child(3n + 1) {
		clear: both;
	}
	.sensor-panel-data {
		margin: 40px 10px;
	}
	.middle {
		padding: 10px 10px 0;
	}
}
