@media (prefers-color-scheme: light) {
	.detail-title h2{color: #222222;}
	.detail-title p{color: #888888;}
	.chart-box .title{color: #333;}
	.reading-box .title .active{color: #333;}
	.reading-box .title .spliter{color: #aaa;}
	.update-time{color: #333;}
	.reading-box .pollutant-item .value{color: #222;}
	.chart-box .indexValue{color: #3d3d3d;}
	.chart-box .minValue,.maxValue{color: #c7c7c7;}
	.weather-box .weather-items{border-left: 1px solid #eeeeee;}
	.forecast-box, .history-box, .site-box, .source-box{border-top: 1px solid #eeeeee;}
	.main-block-title{color: #333;}
	.history-box .history-item{background: #fff;}
	.site-item:hover{background: #f0f0f0;}
	.forecast-item .date{color: #555;}
	.gauge-container > .gauge .value-text {color: #000}
}

@media (prefers-color-scheme: dark) {
	.detail-title h2{color: #eee;}
	.detail-title p{color: #aaa;}
	.chart-box .title{color: #eee;}
	.reading-box .title .active{color: #eee;}
	.reading-box .title .spliter{color: #999;}
	.update-time{color: #eee;}
	.reading-box .pollutant-item .value{color: #eee;}
	.chart-box .indexValue{color: #eee;}
	.chart-box .minValue,.maxValue{color: #555;}
	.weather-box .weather-items{border-left: 1px solid #222;}
	.forecast-box, .history-box, .site-box, .source-box{border-top: 1px solid #222;}
	.main-block-title{color: #eee;}
	.history-box .history-item{background: #222;}
	.site-item:hover{background: #222;}
	.forecast-item .date{color: #aaa;}
	.gauge-container > .gauge .value-text {color: #fff}
}

#global_map{border-top:0px; min-height: 500px; padding-top: 30px; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#285A78), to(#224F71));}
#global_map h2{margin:40px 0 30px; font-weight: 400; font-size: 28px; color: #fff; width:100%; text-align:center; letter-spacing: 1px;}
#global_map p{margin:0 0 10px; font-weight: 300; font-size: 12px; color: rgba(255, 255, 255, 0.7);; width:100%; text-align:center; letter-spacing: 1px;}
#map_chart{width: 960px; height:500px; margin: 0 auto;}

.feature h3{font-size: 30px;}
.feature p{font-size: 18px; line-height: 30px; font-weight: 300; color: #707070;}
#api_feature_customer{height: 400px; background: #fff;}
#api_feature_customer h3{position: absolute; top:110px; left: 50px; color: #418ab4;}
#api_feature_customer p{position: absolute; top:180px; left: 50px; width: 550px; color: #707070;}
#api_feature_customer .pic{width: 512px; height: 224px; position: absolute; top: 100px; right: 20px; background-image: url("images/customers.jpg"); background-size: 512px 224px; background-repeat: no-repeat; background-position: right center;}

#api_feature_getstart{height: 300px;}
#api_feature_getstart h3{text-align: center; margin-top: 60px; color: #24b47e;}
#api_feature_getstart p{text-align: center; margin-top: 20px;}
#api_feature_getstart .btns{text-align: center; margin: 40px 0;}
#api_feature_getstart .btns a{display:inline-block; margin: 0 20px;}

.ui-autocomplete{}
.ui-autocomplete li{border-bottom: 1px solid #f0f0f0;}
.ui-autocomplete li h4{font-size: 16px; line-height: 24px; font-weight: 400; margin: 6px 0 0;}
.ui-autocomplete li span{display: block; font-weight: 400; font-size: 12px; line-height: 18px; margin: 0 0 6px;}
.ui-widget.ui-widget-content{z-index: 1001;}
.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active,a.ui-button:active,.ui-button:active,.ui-button.ui-state-active:hover{border:0px solid #2C79B3;background:#3DA3EF;color:#fff;}

.detail-title{margin: 20px 0 0px;}
.detail-title h2{font-size: 24px; font-weight: 500; text-align: center; margin: 5px 0 0;}
.detail-title p{font-size: 12px; font-weight: 300; text-align: center; margin: 5px 0 0;}

.update-time{position: absolute; bottom: 10px; width: 100%; text-align: center; font-weight: 400;}

.gauge-container {
  
}
.gauge-container > .gauge .dial {
  stroke: #E8E8E8;
  stroke-width: 3;
}
.gauge-container > .gauge .value {
  stroke-width: 3;
}
.gauge-container > .gauge .value-text {
    font-family: "Helvetica Neue", "Helvetica", "SF Pro SC", "HanHei SC", "SF Pro Text", "Myriad Set Pro", "SF Pro Icons", "PingFang SC",  "Arial", sans-serif; position: absolute; top: 78px; left: 0px; font-size: 30px; font-weight: 100; text-align: center; width: 100%;
}

.chart-box{position: relative; height: 260px; width: 260px; margin: 0px auto 0px;}
/*
.chart-box .input-group-btn{display: flex; justify-content: center; width: 100%; position: absolute; top: -4px; right: inherit;}
.chart-box .input-group-btn .dropdown-menu{left: auto;}
.chart-box .btn .text{font-weight: 400; color: #333; }
*/
.chart-box .title{position: absolute; font-size: 13px; font-weight: 300; top: 156px; text-align: center; width: 100%;}
.chart-box .indexValue{position: absolute; top: 66px; left: 0px; font-size: 75px; font-weight: 100; text-align: center; width: 100%;}
.chart-box .minValue{position: absolute; top: 205px; left: 61px; font-size: 11px; font-weight: 300;}
.chart-box .maxValue{position: absolute; top: 205px; right: 45px; font-size: 11px; font-weight: 300;}
.chart-box .levelWrap{position: absolute; top: 204px; width: 100%;}
.chart-box .levelWrap2{margin: 0 auto; text-align: center;}
.chart-box .level{display: inline-block; padding: 2px 10px; border-radius: 4px; font-size: 12px; font-weight: 400; color: #fff;}

.reading-box{width: calc(100% - 30px); margin: 0px auto 30px;}
.reading-box .title{font-weight: 400; font-size: 15px;}
.reading-box .title a{cursor: pointer;}
.reading-box .title .active{font-weight: 400;}
.reading-box .title .spliter{margin: 0 8px; font-weight: 300; color: #aaa;}
.reading-box .pollutant-item{width: calc(50% - 10px); height: 55px; margin-top: 15px; position: relative;}
.reading-box .even{float: right;}
.reading-box .odd{float: left;}
.reading-box .pollutant-item .name{position: absolute; top:0px; left:0px; font-size: 12px; color: #aaa; font-weight: 400;}
.reading-box .pollutant-item .unit{position: absolute; top:27px; right:0px; font-size: 12px; font-weight: 300; color: #aaa;}
.reading-box .pollutant-item .value{position: absolute; top:12px; left:0px; font-size: 28px; font-weight: 200;}
.reading-box .pollutant-item .ratio-bar{position: absolute; bottom:0px; left:0px; width: 100%; height: 3px; z-index: 20;}
.reading-box .pollutant-item .ratio-bar-bg{position: absolute; bottom:0px; left:0px; width: 100%; height: 3px; background: #e8e8e8;}

.weather-box{width: calc(100% - 30px); margin: 10px auto; position: relative;}
.weather-box .title{font-weight: 400; font-size: 15px; color: #333;}
.weather-box .weather-items{margin-top: 20px;}
.weather-box .weather-items .weather-item{width: calc(50% - 0px); float: left; position: relative; font-size: 16px; color: #222; font-weight: 300; height: 40px; margin-bottom: 15px;}
.weather-box .weather-items .weather-item .icon{width: 30px; height: 30px;  position: absolute; top: 0px; left: 0px; background-size: contain; background-repeat: no-repeat; background-position: center center;}
.weather-box .weather-items .weather-icon{}
.weather-box .weather-items .temperature{position: absolute; top: 5px; left: 50px;}
.weather-box .weather-items .humidity-icon{background-image:url("images/icon/humidity.png")}
.weather-box .weather-items .humidity{position: absolute; top: 5px; left: 50px;}
.weather-box .weather-items .weather-item .wind-icon{background-image:url("images/icon/wind_arrow.png"); top: 1px;}
.weather-box .weather-items .wind{position: absolute; top: 5px; left: 50px;}
.weather-box .weather-items .uv-icon{background-image:url("images/icon/uv.png")}
.weather-box .weather-items .uv{position: absolute; top: 5px; left: 50px;}

.main-block-title{margin-left: 15px; margin-top: 15px; font-weight: 400; font-size: 14px;}
.main-block-content{margin: 15px 15px;}
.forecast-box{position: relative;}
.forecast-box #forecast-interval-dropdown{top: 12px; right: 15px;}
.forecast-box .main-block-content{margin: 30px 20px 20px;}
.forecast-box .daily-forecast-scroll{width: 100%; padding-bottom: 20px; overflow-x: scroll; overflow-y: hidden;}
.forecast-box .daily-forecast-scroll .forecast-item{width: 90px; margin-right: 20px; float: left;}
.forecast-box .hourly-forecast-scroll{width: 100%; padding-bottom: 20px; overflow-x: scroll; overflow-y: hidden;}
.forecast-box .hourly-forecast-scroll .forecast-item{width: 80px; margin-right: 20px; float: left;}
.forecast-item .date{text-align: center; font-weight: 400; font-size: 13px; margin-bottom: 10px;}
.forecast-item .icon{width: 36px; height: 36px; margin: 0 auto 10px;  background-size: contain; background-repeat: no-repeat; background-position: center center;}
.forecast-item .temperature{text-align: center; font-weight: 300; font-size: 14px; color: #333;}
.forecast-item .spliter{margin: 0 6px; color: #bbb; font-weight: 100;}
.forecast-item .value-wrap{text-align: center; margin-top: 15px;}
.forecast-item .value-wrap .value{background: #d9d726; display: inline-block; padding: 3px 8px 3px; line-height: 15px; border-radius: 5px; font-size: 10px; font-weight: 400; color: #fff;}
.forecast-item .value-wrap .value span{font-size: 12px; font-weight: 400;  color: #fff;}


.history-box{position: relative;}

.history-box .dropdown-wrapper{margin-top: 10px;}
.history-box #history-interval-dropdown{margin-right: 15px; float: right; position: relative; top:auto; right: auto; width: calc(50% - 15px - 10px);}
.history-box #history-interval-dropdown .btn{border-radius: 6px; width: 100%; font-size: 13px;}
.history-box #history-interval-dropdown .dropdown-menu{width: 100%; font-size: 13px;}
.history-box #history-kind-dropdown{margin-left: 15px; float: left; position: relative; top:auto; right: auto; width: calc(50% - 15px - 10px);}
.history-box #history-kind-dropdown .btn{border-radius: 6px; width: 100%; font-size: 13px;}
.history-box #history-kind-dropdown .dropdown-menu{width: 100%; font-size: 13px;}

.history-box .main_block_content{}
.history-box .history-value-tag{position: absolute; bottom: 0px; background: #444; border-radius: 4px; color: #fff; text-align: center; padding: 3px 8px; font-size: 11px; white-space: nowrap;}
.history-box .history-scroll{width: 100%; padding-bottom: 30px; overflow-x: scroll; overflow-y: hidden;}
.history-box .history-items{position: relative; height: 160px;}
.history-box .history-item{width: 14px; height: 160px; position: absolute;}
.history-box .history-item:hover{}
.history-box .history-item-bar{width: 100%; position: absolute; bottom: 0px;}
.history-box .history-item-bar:hover{}

.site-box{}
.site-box .main-block-content{}
.site-box .main-block-content .site-item{position: relative; display: block; float: left; width: 100%; height: 40px;}
.site-box .main-block-content .site-item:hover{cursor: pointer;}
.site-box .main-block-content .even{}
.site-box .main-block-content .odd{}
.site-box .main-block-content .site-item .title{top: 10px; left: 10px; font-size: 14px; position: absolute;}
.site-box .main-block-content .site-item .value-wrap{position: absolute; top: 9px; right: 10px;}
.site-box .main-block-content .site-item .value{display: inline-block; padding: 2px 10px; border-radius: 4px; font-size: 12px; font-weight: 300; color: #fff;}

.source-box{}
.source-box .main-block-content{}
.source-box .main-block-content .source-item{position: relative; padding-left: 10px; display: block; height: 30px; line-height: 30px;}


.detail-side-map{height: 260px; border: 1px #ECECEC solid; background: #fff; margin-bottom: 15px; position: relative; padding: 0px;}
.detail-side-map .marker{border-radius: 3px; color: #fff; font-size: 12px; line-height: 16px; margin-left: -15px; width: 30px; text-align: center; font-weight: 500; padding: 1px 4px;}
.detail-side-map #kind-dropdown{margin-left: 10px; position: absolute; top: 10px; right: 15px; z-index: 500;}
.detail-side-map #kind-dropdown .btn{border-radius: 4px; box-shadow: 0 1px 5px rgba(0,0,0,0.5); border: 0px;}

.detail-side-nearby{border-radius: 8px; margin-bottom: 15px; position: relative;}
.detail-side-nearby .side-block-content{padding-top: 10px;}
.detail-side-nearby .site-item{position: relative; display: block; width: 100%; height: 40px;}
.detail-side-nearby .site-item:hover{cursor: pointer;}
.detail-side-nearby .site-item .title{top: 10px; left: 15px; font-size: 14px; position: absolute;}
.detail-side-nearby .site-item .value-wrap{position: absolute; top: 9px; right: 15px;}
.detail-side-nearby .site-item .value{display: inline-block; padding: 2px 10px; border-radius: 4px; font-size: 12px; font-weight: 300; color: #fff;}


.lang-list .caret{margin-left: 25px;}
.lang-list > ul > li > a, .lang-list > a {padding: 10px 10px 10px 52px; background-repeat: no-repeat; background-position: 25px 50%; background-size: 24px 16px;}
.lang-list > ul > li > a.en, .lang-list > a.en {background-image: url("images/flags/uk.png"); }
.lang-list > ul > li > a.fr, .lang-list > a.fr {background-image: url("images/flags/fr.png"); }
.lang-list > ul > li > a.de, .lang-list > a.de {background-image: url("images/flags/de.png"); }
.lang-list > ul > li > a.ja, .lang-list > a.ja {background-image: url("images/flags/jp.png"); }
.lang-list > ul > li > a.ko, .lang-list > a.ko {background-image: url("images/flags/ko.png"); }
.lang-list > ul > li > a.zh-Hans, .lang-list > a.zh-Hans {background-image: url("images/flags/cn.png"); }
.lang-list > ul > li > a.zh-Hant, .lang-list > a.zh-Hant {background-image: url("images/flags/hk.png"); }

.table-bordered > thead > tr > th{text-align: center;}
.table-bordered tr th, .table-bordered tr td{font-size: 14px;}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td{vertical-align: middle;}