@charset "utf-8";
.map-box {border:1px solid #d0d0d5; border-radius:5px; box-shadow:0px 0px 2px 0px rgba(0,0,0,.3);}

.nav-box {position:absolute; right:0; left:0; padding:0 40px; background:#0069ad;}
@media screen and (max-width:1050px) {
	.nav-box {padding:0 10px;}
}
	.nav-box::before {position:absolute; left:0; right:0; z-index:-1; content:''; height:75px; background:#e4e8ef;}
    .nav-box-inner {position:relative; height:46px;}
    .nav-box-inner > li {float:left;}
    .nav-box-inner > li:first-child, .main-nav {background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAeCAYAAAGNsNSYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGtJREFUeNpi/P//PwMIMDFAASYDIIAYYGoimeDiAAEEE4sE0QiVKNrQOQABxAgzB78yijkAAQR2G7L7YBhVFU7tdJYACCCUYMGm2hCvESNZECDAGJBjFynGDdHF8cY+SbE1qnjEK8aaYXEBAFDZQ+nTppEvAAAAAElFTkSuQmCC) -4px center no-repeat;}
    .main-nav {display:block; padding:0 3em 0 2em; line-height:46px; font-size:16px; color:#59b2eb; background-position:103% center;}

    .main-nav:focus {outline:none;}
    .main-nav:hover {color:#95d6ff;}
    .main-nav > i {margin-right:8px;}
    .subnav-list {position:absolute; top:50px; left:0; display:none;}
    .subnav-list > a {padding:0 .5em 6px; margin-right:20px; color:#696d76; border-bottom:1px solid transparent;}
    .subnav-list > a:hover {color:#4c4f55;}
    .is-active > .main-nav {color:#fff; background:#004f82; background:rgba(0,0,0,.25);}
    .is-active > .subnav-list {display:block;}
    .subnav-list > .is-active, .subnav-list > .is-active:hover {color:#0069ad; border-color:inherit;}
    
.station-alarm {min-width:300px; color:#333;}
	.station-alarm > h5 {font-size:16px;}
	.station-alarm > .ui-btn {position:absolute; top:5px; right:5px;}
	.station-alarm > .ui-btn > i {margin-right:0;}
	.station-alarm-list {padding-top:10px; color:#999;}
	.station-alarm-list > a {display:block; margin-top:10px; text-align:left; white-space:nowrap; color:#06c; box-shadow:none;}
	.station-alarm-list > a > i {padding:2px 6px; margin-left:10px; font-size:12px; color:#fff; background:#e74c3c; border-radius:5px;}

.iframe-box {margin-top:105px;}
.iframe-box > iframe {width:100%; height:100%; visibility:visible; border:none;}
.is-loading > iframe {visibility:hidden;}

/* 公用UI定制 */
.top-nav, .top-nav a,
.top-icon-btn:hover {color:#0069ad;}
#addrSelected > select {margin-right:6px;}

.status {padding:2px 8px; color:#fff; border-radius:2px;}
.status.is-normal {background-color:#24d114;} /* 正常 */
.status.is-alert {background-color:#ded11f;} /* 告警 */
.status.is-commonly {background-color:#fa6f00;} /* 一般故障 */
.status.is-fault {background-color:#eb0912;} /* 严重故障 */
.status.is-offline {background-color:#bbb;} /* 离线 */

.cont-box {padding:20px; overflow:auto; background:#fff; border-radius:4px;}

.filter-bar {margin-bottom:10px;}

.chart-box, .calendar-box, .date-bar {border:1px solid #d0d0d5; border-radius:4px 4px 0 0;}
.date-bar {padding:10px 0; text-align:center; font-size:0; background-color:#f0f0f0; border-top-width:0; border-radius:0 0 4px 4px;}
.date-bar .btn-group + .btn-group {margin-left:20px;}
.date-bar .ui-btn, .filter-bar .ui-btn {line-height:30px;}
.btn-prev-date, .btn-next-date {display:inline-block; padding:0 8px; vertical-align:-1px; line-height:30px; font-size:14px; color:#fff; background-color:#0069ad; cursor:pointer;}
.btn-prev-date:hover, .btn-next-date:hover {background-color:#0088e0;}
.btn-prev-date {border-radius:4px 0 0 4px;}
.btn-next-date {border-radius:0 4px 4px 0;}
.date-bar .ui-input {width:80px; padding:6px; text-align:center; border-radius:0; border-color:#0069ad;}

.chart-box > .ui-table,
.cover-box .ui-table {white-space:nowrap;}
.chart-box > .ui-table th {border-top:none; border-bottom-width:1px;}
.chart-box > .ui-table tr > th:first-child {text-align:center; border-left:none;}
.chart-box > .ui-table tr > th:last-child {border-right:none;}
.chart-box > .ui-table tr > td:last-child {border-right:none;}

.is-empty {position:relative; background:#f0f0f0 !important;}
.is-empty[data-empty-tip]:before {content:attr(data-empty-tip); position:absolute; left:0; width:100%; text-align:center; color:#999;}
table .is-empty {border:none;}
.is-empty .is-shaking {display:inline-block; width:100%; text-align:center; color:#999;}

.cover-box.is-cover {overflow:hidden; width:0; height:0; opacity:0;}

@media screen and (min-width:1600px) {
	.station {width:19%;}
}
@media screen and (min-width:1920px) {
	.station {width:15%;}
}