.com-row {
	display: flex;
}
.com-col {
	display: flex;
	flex-direction: column;
}
.com-cell {
	width: 100%;
	padding: 0.55rem;
	overflow: hidden;
}
/* component: search_date */
.com-search-date {
	margin: 1.2rem 1.5rem;
}
.com-search-date > div {
	display: inline-block;
	vertical-align: middle;
	margin-right: 2.25rem;
}
.com-search-date .search,
.com-search-date .caption {
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 1px;
}
.com-search-date .search .material-icons {
	font-size: 1.5rem;
	font-weight: 600;
	vertical-align: text-bottom;
	margin-left: 4px;
}
.com-search-date .caption:after {
	content: "：";
}
.com-search-date > .date {
	position: relative;
	padding: 0px 5px 2px 1.5rem;
	border-bottom: 1px solid #666;
}
.com-search-date > .date:before {
	content: "";
	position: absolute;
	display: block;
	width: 5.2rem;
	height: 5.2rem;
	top: -1rem;
	left: -1.8rem;
	background: url("../img/search_date_start.png") no-repeat;
	background-size: cover;
}
.com-search-date > .date.end:before {
	background: url("../img/search_date_end.png") no-repeat;
	background-size: cover;
}
.com-search-date > .date > div {
	display: inline-block;
}
.com-search-date > .date > div:last-child {
	min-width: 150px;
}
.com-search-date > .date .q-if-standard {
	padding-top: 0;
	padding-bottom: 0;
}
.com-search-date .q-if:before, .com-search-date .q-if:after {
	border: 0px !important;
}
.com-search-date .search > div {
	padding: 4px 12px;
	background: linear-gradient(to bottom, #fff, #ededed 66%, #b2b2b2);
	border-radius: 7px;
	cursor: pointer;
}
.com-search-date .search > div:hover {
	background: linear-gradient(to bottom, #b2b2b2, #ededed 33%, #fff);
}

/* component: search_query */
.com-search-item, .com-query-item{
	display: inline-block;
	vertical-align: top;
	position: relative;
	margin-top: 1.2em;
	margin-left: 2.25em;
}

.com-search-item:nth-child(n+2){
	margin-left: 3.25em;
}

.com-search-item > div, .com-query-item > div {
	height: 2.75em;
    line-height: 2.5;
	display: inline-block;
	vertical-align: top;
}

.com-query-item > div {
	height: 2.25em;
	line-height: 2;
}

.com-search-item .title {
	position: absolute;
	left: -2em;
    top: -0.625em;
	width: 6em;
	font-size: 1.2em;
	font-weight: 600;
	text-align: center;
	height: 2em;
	line-height: 1.9;
	letter-spacing: 2px;
	background: linear-gradient(to right, #51B3DB, #225B9A);
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
}

.com-search-item .title:after {
	content: "";
	position: absolute;
	display: block;
	width: 0; 
	height: 0; 
	bottom: -0.65em;
	left: 0;
	border-top: 0.65em solid #01579b; 
	border-left: 2em solid transparent; 
}

.com-search-item .content {
	min-width: 10em;
	padding: 1px;
	/*background-image: linear-gradient(to right, transparent, #78909c 100px, #78909c 100%);*/
	box-shadow: 3px 3px 7px #c9c9c9;
	/*border-radius: 6px;*/
}
.com-search-item .q-if-standard {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}
.com-search-item .content > div {
	background: #fff;
	/*border-radius: 5px;*/
	height: 100%;
	padding: 0 0.5em 0 5.5em;
}

.com-search-item .content .sub-item {
	display: inline-block;
	vertical-align: top;
	margin-right: 0.45em;
	font-size: 0.85em;
}

.com-search-item .content .sub-item:after {
	margin-right: 0;
}

.com-query-item {
	/*margin-top: 0.8em;*/
	margin-left: 1.2em;
}

.com-query-item .outer-border {
	border-radius: 6px;
}

.com-query-item .outer-border > div {
	box-shadow: inset 0px 0px 0px 2px #fff;
    background: linear-gradient(to bottom, #027be3 38%, #01579b 100%);
    background-color: #2980B9;
	border: 2px solid #2980B9;
	min-width: 4.5em;
	border-radius: 6px;
	font-size: 1.2em;
	font-weight: 600;
	letter-spacing: 2px;
	text-align: center;
	cursor: pointer;
	padding: 0 0.5em;
}

.com-query-item .outer-border > div:hover {
	background: linear-gradient(to bottom, #01579b 38%, #027be3 100%);
}

/* component: search_line */
.com-search-line .line {
	position: relative;
	border: 2px solid var(--com-line-bgcolor);
	/*padding: 2px;*/
	border-radius: 2px;
}

.com-search-line .line:before {
	content: attr(data-name);
	position: absolute;
	display: block;
	width: 2.85em;
	height: 2em;
	line-height: 1.9;
	top: -9px;
	left: -9px;
	text-align: center;
	background-color: var(--com-line-bgcolor);
	color: var(--com-line-color);
	letter-spacing: 1px;
	border-top-left-radius: 0.75em;
	border-bottom-right-radius: 0.75em;
	font-weight: 600;
	text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
}

.com-search-line .line > div {
	padding-left: 2.5em;
	/*height: 2.5em;*/
	margin: 0.25em 0.5em;
}

.com-search-line .line > div .q-if-standard {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}
.com-ios-onoff > label {
	width: 100%;
	height: calc(1.5em + 4px);
	background-color: #ddd;
	border-radius: 300px;
	padding-right: 1.8em;
	display: block;
	position: relative;
	transition: all 0.3s ease-in-out;
	text-align: center;
	letter-spacing: 1px;
	font-weight: 600;
	line-height: 1.7;
}

.com-ios-onoff > label:after {
	content:'';
	display:block;
	width: 1.5em;
	height: 1.5em;
	border-radius: 100%;
	background-color: #fff;
	position: absolute;
	top: 2px;
	transition: all 0.3s ease-in-out;
}

.com-ios-onoff > input { display: none; }
.com-ios-onoff > input:checked ~ label {
	background-color: #21ba45;
	color: #fff;
	padding-right: 0;
	padding-left: 1.5em;
}

.com-ios-onoff > input ~ label:after {
	right: 2px;
}

.com-ios-onoff > input:checked ~ label:after {
	right: calc(100% - 1.5em - 2px);
}

.com-ios-onoff > input:disabled ~ label{
	background-color: #d5d5d5;
	pointer-events: none;
}
.com-ios-onoff > input:disabled ~ label:after{
	background-color: #bcbdbc;
}
.com-ios-onoff {
	width: 5em;
}

.com-ios-onoff > input ~ label > span.middle-center {
	transform: translate(-75%, -50%);
}

.com-ios-onoff > input ~ label > span:after {
	content: attr(data-off);
}

.com-ios-onoff > input:checked ~ label > span.middle-center {
	transform: translate(-25%, -50%);
}

.com-ios-onoff > input:checked ~ label > span:after {
	content: attr(data-on);
}

/* component: info_box */
.com-infoBox {
	display: inline-flex;
	width: 20em;
	font-size: 1.05em;
	font-weight: 600;
	border-radius: 3px;
	overflow: hidden;
	/*box-shadow: 0px 9px 12px -9px rgba(20%,20%,40%,0.8), 0px 0px 2px rgba(20%,20%,40%,0.6), 0px 0px 3px rgba(20%,20%,40%,0.4), 2px 2px 6px rgba(20%,20%,40%,0.2);*/
	box-shadow: 0px 0px 3px rgba(20%,20%,40%,0.4), 2px 2px 6px rgba(20%,20%,40%,0.2);
	position: relative;
	letter-spacing: 1px;
	/*background: #c7ab65;*/
	background: #fff;
}

.com-infoBox[data-title] {
	padding-top: 2em;
}

.com-infoBox[data-title]:before {
	content: attr(data-title);
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2em;
	line-height: 1.65em;
	font-size: 1.15em;
	/*background:  linear-gradient(to bottom, #82542c 84%, #c7ab65);*/
	background: linear-gradient(to bottom, #2c61c0 78%, #fff 90%, #fff);
	color: #fff;
	letter-spacing: 2px;
	padding: 0 0.625em;
	text-align: left;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.com-infoBox > div {
	width: 100%;
}

.com-infoBox > div + div {
	width: 2.5em;
	text-align: center;
}

.com-infoBox .com-rowItem {
	/*background: #eceff1;
	border-radius: 10em;*/
	border-radius: 0.4em;
	padding: 0.15em 0.3em;
	margin: 0 0.5em;
	margin-top: 0.5em;
	box-shadow: 0 4px 3px -4px rgba(0,0,0,.3), 0 3px 2px -3px rgba(0,0,0,.2), 0 2px 1px -2px rgba(0,0,0,.1);
}

.com-infoBox .com-rowItem:last-child {
	margin-bottom: 0.5em;
}

.com-infoBox .com-rowItem > div {
	position: relative;
	display: inline-block;
	width: calc(98% - 3.25em);
	margin-left: calc(0.25em + 1px);
	text-align: left;
}

.com-infoBox .com-rowItem > div:last-child {
	width: 98%;
}

.com-infoBox .com-rowItem > span + div {
	width: calc(98% - 5.25em) !important;
	margin-left: 0;
}

.com-infoBox .com-rowItem > span + div:last-child {
	width: calc(98% - 2em) !important;
}

.com-infoBox .com-rowItem > div:before {
	content: attr(data-desc);
}

.com-infoBox .com-rowItem > div:after {
	content: attr(data-value);
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	text-align: right;
	z-index: 2;
	color: #027be3;
}

.com-infoBox .com-rowItem > .material-icons, 
.com-infoBox .com-rowItem > .unit {
	display: inline-block;
	font-size: 0.85em;
	text-align: center;
	vertical-align: baseline;
	opacity: 0.8;
}

.com-infoBox .com-rowItem > .material-icons {
	width: 1.5em;
	font-size: 1.2em;
    vertical-align: middle;
	color: #ffd600;
	background: linear-gradient(to bottom, #f99e1d, #f8e146);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

.com-infoBox .com-rowItem > .unit {
	width: 3em;
}

.com-infoBox .com-chartBtns .material-icons {
	font-size: 1.25em;
	padding: 2px;
	margin-top: 0.5em;
	/*color: #82542c;*/
	/*background: #2c61c0;*/
	background: linear-gradient(to bottom, #2c61c0, #243da1);
	color: #fff;
	border-radius: 2px;
	cursor: pointer;
	box-shadow: 2px 3px 6px -1px rgba(20%, 20%, 40%, 0.3);
}

.com-infoBox .com-chartBtns .material-icons:hover {
	/*color: #64ffda;*/
	background: linear-gradient(to bottom, #243da1, #2c61c0);
}

.com-infoBox.virtual-meter[data-title]:before {
	background: linear-gradient(to bottom, #2d9647 78%, #fff 90%);
}

.com-infoBox.virtual-meter .com-chartBtns .material-icons {
	background: linear-gradient(to bottom, #2d9647, #0c6227);
}

.com-infoBox.virtual-meter .com-chartBtns .material-icons:hover {
	background: linear-gradient(to bottom, #0c6227, #2d9647);
}