input[type=checkbox] {cursor: pointer;}
div {box-sizing:border-box;}
div,p{padding: 0;margin:0;box-sizing: border-box;}
.guard-title{background-color: #405274; color: white; height: 50px; font-size: 18pt;}
.logo {width: 150px; height: 49px; line-height: 49px; text-align: center; float: left; border: 0px solid red; background-image: url('../img/guard-logo.png'); background-position:center center; background-size: 80px 20px; background-repeat: no-repeat;}
.collapse {width: 30px; height: 50px; line-height: 50px; margin-left: 30px; cursor: pointer; background-image: url('../img/collapse.png'); background-position:center center; background-size: 26px 26px; background-repeat: no-repeat;}
.div_menu a {text-decoration: none !important;}
table {border-radius: 4px; overflow: hidden;}
.table-rule {border-collapse:collapse; width: 100%; font-size: 13px; color: #555555;}
.table-rule thead th{background-color: #F5F5F5; height: 30px;}
.table-rule th, .table-rule td {border: 1px solid #DDDDDD; padding: 5px; text-align: center; word-break: break-all; height: 28px;}
.table-rule a {border: 1px solid #bbb;display: inline-block;padding: 3px 8px;border-radius: 3px;color: #3c3c3c;text-decoration: none;font-size: 13px;margin: 5px 3px;}
.table-rule a:hover{background: #F5F5F5;}
.running {width: 55px; height: 25px;line-height: 25px; padding-top:1px; padding-bottom:4px; background-color:#00A65A; color:white; border-radius:4px; font-size:10px; margin-top:2px; display: inline-block;}
.stop {width: 55px; height: 25px;line-height: 25px; padding-top:1px; padding-bottom:4px; background-color:#C81522; color:white; border-radius:4px; font-size:10px; margin-top:2px; display: inline-block;}
.main{background-color: white; min-height: calc(100vh - 52px);}
.main_title{color: #55555A; font-size: 14pt; font-width: bold; margin-bottom: 5px; height: 30px;}
.main-collapse{width: calc(100% - 184px); margin-left:181px;}
.main-expand{width: calc(100%); margin-left:0px;}
.menu div {margin-bottom: 10px;}
.menu div>a{line-height: 40px; padding-left: 20px;display: block;font-size: 13px;}
.menu_selected {background-color: #f2f3f7;}
input[type=text]{border: 1px solid #E4E4E4; border-radius: 5px;}
.input_withunit[type=text]{border: 1px solid #E4E4E4; border-radius: 5px 0 0 5px;float: left;}
.time_unit{float: left;line-height: 34px;padding: 0 8px;background: #f0f0f0;border-radius: 0px 5px 5px 0; width: 28px; text-align: center;}
textarea{border: 1px solid #E4E4E4; border-radius: 5px!important;resize: none!important;}
.server {width: calc(50% - 20px); border: 1px solid #DDDDDD; border-radius: 4px; margin-right: 20px; margin-bottom: 20px; float: left;}
/*.server:nth-child(2n){margin-right:0;}*/
.server h3 {border-bottom: 1px solid #DDDDDD; height: 40px; line-height: 40px; padding-left: 20px; font-weight: bolder;}
.server div {padding: 20px; padding-top: 4px; padding-bottom: 4px;}
.server div table{width: 100%;}
.server div table tr{border-bottom: 1px solid #DDDDDD; height: 36px; text-align: center;}
.server-table{width: calc(50% - 20px); height: auto!important; padding-bottom: 30px; padding-bottom: 30px;}
tr.heap td {text-shadow: 2px 2px 4px royalblue;}
.container1{height: 260px;}
.container {padding: 10px; padding-bottom: 10px;}
.container .title{font-size: 16px; font-weight: bolder; margin-bottom: 10px; padding-left: 7px; color: #464646;}
.container .remark{font-size: 14px; color: red; margin-top: 15px;}
.container table {width: 100%;}
.container table thead tr {height: 45px;}
.container table tbody tr {height: 35px;}
.container table td, .container table th {border-bottom: 1px solid #E7ECF4; text-align: center;}
.btn1 {border: 1px solid #5584ff; border-radius: 3px; font-size: 9pt; color: #5584ff; cursor: pointer; padding-left: 15px; padding-right: 15px;}
.btn1:hover {border: 1px solid #5584ff; background-color: #5584ff; border-radius: 3px; font-size: 9pt; color: #ffffff; cursor: pointer; padding-left: 15px; padding-right: 15px;}
.container-eachart,.server .container-eachart{height: 240px;padding: 0; line-height: 240px; text-align: center }
.alarm {color:#fff;top: 10px;right: 10px;border: 1px solid red;background: red; border-radius: 50%;width: 15px;height: 15px;font-size: 12px;text-align: center;line-height: 15px; display: none;}
.alarm1 {color:#fff;border: 1px solid red;background: red; border-radius: 50%;width: 22px;height: 22px;font-size: 12px;text-align: center;line-height: 22px; margin-top: 2px;}
.echart-title{font-size: 16px; font-weight: bolder; margin-bottom: 10px; padding-left: 7px; color: #464646; top: 10px; left: 10px;}
.echart-go{font-size: 13px; margin-bottom: 5px; padding-left: 10px; color: rgb(0, 193, 222)!important; top: 12px;}
a {cursor: pointer; text-decoration: none;}
a:hover{color: rgb(0, 193, 222);}
.a-selected{color: rgb(0, 193, 222);}
.div-nodata {text-align: center; line-height: 240px; height: 240px;}

.table-rule a:hover {
    background: #F5F5F5;
}
.checkbox-guard {width: calc(100% - 115px);float: left;margin-left: 15px;}
.layui-form-item .checkbox-guard .layui-form-checkbox[lay-skin=primary]{width: calc(25% - 13px);}
.nodata{height: 70px; color: #a0a2ad; font-size: 13px;}
.pointer {cursor: pointer;}
.gap {color: #DDDDDD; margin-left: 10px; margin-right: 10px;}
.time-spec {width: 60px; height: 26px; line-height: 26px; text-align: center; margin-left: 2px; cursor: pointer; padding: 3px; padding-left: 5px; padding-right: 5px; border: 1px solid #DDDDDD; font-size: 8pt;}
.time-spec:hover {background-color: #F5F5F5;}
.time-spec-selected {border: 1px solid #006EFF; color: #006EFF;}
.date-input{width: 117px; height: 32px; line-height: 32px; text-align: center; cursor: pointer; border-radius: 0px !important;}
.time-input{width: 65px; height: 32px; line-height: 32px; text-align: center; cursor: pointer; border-radius: 0px !important;;}
.time-to {height: 32px; line-height: 32px; margin-left: 2px; margin-right: 2px;}
.time-btn {height: 32px !important; line-height: 32px !important; padding: 0 12px !important; font-size: 12px;}
.menu .menu_er a{display: block;padding:0px;padding-left: 30px;}
.menu .menu_er a:hover,.menu .menu_er a.active{background: #f2f3f7;}
.menu .menu_er{background-color: #eaedf1;}
.logout-pop{background: #ffffff;border-radius: 2px;position: absolute;top: 41px;right: 10px;width: 100px;display: none;border: 1px solid #dcdee3;}
.logout-pop a{display: block;padding: 7px 18px;color: #333;text-decoration: none;font-size: 13px}
.logout-pop a:hover{background-color: #f2f3f7;}
.logout_div:hover .logout-pop{display: block}
.logout_div{position: relative;padding: 0 25px 20px 10px;}
.layui-form-radio:hover *, .layui-form-radioed, .layui-form-radioed>i{color: #5584ffc4;}
td input {display: block;margin: 0 auto; float: none !important;}
.div-data table td{padding: 3px; word-break: break-all;}

::-webkit-scrollbar {width: 5px;height: 5px;background-color: #f5f5f5;}
::-webkit-scrollbar-thumb {background-color: #ccc;border-radius: 5px;}
::-webkit-scrollbar-thumb:hover {background-color: #999;}

.menu div{margin: 0;}
.menu a {text-decoration: none;}
.menu a.actived{background-color: #f2f3f7;}
.menu .nav-one a{display: block;padding: 10px 15px;line-height: 20px;text-decoration: none;font-size: 15px;position: relative;}
.menu .nav-one a::after{background: url("../img/arrow.png") no-repeat;background-size: 100%;content: '';position: absolute;top: 14px;right: 10px;width: 10px;height: 10px;}
.menu .nav-two a{padding: 10px 10px 10px 30px;display: block;line-height: 20px;text-decoration: none;}
.menu .nav-two a:hover,.menu .nav-one a:hover{background-color: #f2f3f7;color: #000;}
.nav-two{display: none;}
.nav-box.active .nav-two{display: block;}
.nav-box.active .nav-one a::after{background: url("../img/arrow.png") no-repeat;background-size: 100%;transform: rotate(90deg);}
.box-zl .div-top-25{height: 14px;font-size: 10px;padding: 0;margin-top:-25px;}

.welcome{top: calc(50% - 60px);position: absolute; width: 100%; font-size: 24px; text-align: center;}
.title1 {font-size: 15px!important; font-weight: bolder!important; margin-bottom: 3px; height: 32px; border-bottom: 0px solid #DDDDDD;}
.title2 {font-size: 15px; font-weight: bolder; margin-bottom: 3px; height: 24px; line-height: 24px;}
.monitor {border: 1px solid #DDDDDD; border-radius:4px; min-height: 120px;}
.circle {width: 100px; height: 100px; line-height: 100px; border-radius: 50%; text-align: center; border: 2px solid #43F012; background-color:  #B7F2A5; float: left; margin-right: 28px; margin-top: 10px; margin-bottom: 10px;}
.square {width: 100px; height: 80px; line-height: 80px; border-radius: 5px; text-align: center; border: 1px solid #43F012; background-color:  #B7F2A5; float: left; margin-right: 28px; margin-top: 4px; margin-bottom: 5px;}
.square-title{width: 100px; text-align: center; font-weight: normal; margin-top: 10px;}
.warn {color: red;}
.off{ color: #999999; opacity: 0.7; filter: grayscale(70%); border: 2px solid #cfbebe;}
.kill {collapse: #1E9FFF!important;}

.box-zl{margin: 40px 0 20px 20px;background: #f3f9ff;width: 130px;text-align: center;border-radius: 4px;padding-bottom: 10px;}
.box-zl p{padding: 20px 0 5px 0;font-size: 14px;color: #000;}
.box-zl div{background: #25cbf8;width: 110px;height: 70px;border-radius: 14px;margin: 0 auto;margin-top: -20px;color: #fff; display: flex;
    flex-direction: row;align-items: center;justify-content: center;padding: 5px;word-break: break-all;}
.box-zl.yujing div{background: #ff9564;}
.box-zl.diaoxian div{background: #ffD75a;}
.box-zl span{color:#e8e8e8;font-size: 13px;}
.vm{vertical-align: middle;}
.tuli-zl,.tulidx-zl,.tuliyj-zl{float: left;font-size: 13px;margin-left: 20px}
.tuli-zl p{background: #25cbf8;width: 20px;height: 5px;border-radius: 3px;display: inline-block;margin-top: -3px;}
.tuliyj-zl p{background: #ff9564;width: 20px;height: 5px;border-radius: 3px;display: inline-block;margin-top: -3px;}
.tulidx-zl p{background: #ffD75a;width: 20px;height: 5px;border-radius: 3px;display: inline-block;margin-top: -3px;}

.explain{margin-top: 30px;}
.explain>span {color: #f86748;}
.explain>div{font-size: 13px; padding-left: 15px; margin-top: 10px;}

.layui-input-inline1{width: 23%; float: left;}
.layui-input-inline2{width: 240px; float: left;}

.scrollbar-10::-webkit-scrollbar {height: 8px!important;}
.scrollbar-1::-webkit-scrollbar {height: 1px!important;}
.shard{width: 30px; height: 35px; line-height: 32px; margin-right: 4px; font-size: 22px!important; font-weight: bold;vertical-align: middle;display: inline-block;}
.shard-p {border: 3px solid #444444;}
.shard-r {border: 1.5px solid #444444;}
.shard-start {background-color: #99DD88; height: 100%;}
.shard-unassigned {background-color: #EEEEEE; height: 100%;}
.linetd{background-image: linear-gradient(to bottom left, white 50%, #dddddd, white 50.5%);}
.fixed-refresh{position: fixed;width: calc(100% - 30px);left: 15px;top: 0;background: #fff;padding-top: 15px;z-index: 1;border-bottom: 1px solid #DDDDDD;padding-bottom: 5px;}

.format{width: 20px; height: 20px; background-image: url('../img/format.png'); background-size: 100%; cursor: pointer;}
.btn-caozuo{margin: 0 auto;width: 60px;height: 22px;}
.btn-caozuo input{background: #5584ff;color: #fff;width: 100%;height: 22px;text-align: center;border: none;border-radius: 4px;}
.box-caozuo{top: 22px;width: 75px;left: -7px;}
.box-caozuo a{display: block;background: #fff;padding: 5px 10px;color: #5584ff;border-bottom: 1px solid #eee;margin: 0;border-radius: 0;}
.box-caozuo a:hover{background:#5584ff;color:#fff;}
.btn-arrow span{vertical-align: middle;display: inline-block;border:5px solid transparent;border-top:5px solid #fff;margin:5px 0 0 5px;}
.table-rule .btn-arrow,.table-rule .btn-arrow:hover{vertical-align: middle;background: #5584ff;color: #fff;width: 100%;height: 22px;text-align: center;border: none;border-radius: 4px;margin: 0;padding: 0;display: block;}
.retract{background: url("../img/retract.png") no-repeat;background-size: cover;  width: 15px;height: 15px; margin-top: 10px;}
.retract.open{transform: rotateX(180deg);background: url("../img/retract.png") no-repeat;background-size: cover; }
.filter a,.filter a:hover{color:#1E9FFF;font-size: 14px;font-weight: normal;border: none;background: transparent;}
.filter input{font-size: 14px;font-weight: normal;width:150px; height: 25px; padding-left: 5px;}

.skyspace {height: 170px;}
.skyspace > div{height: 42px; line-height: 42px; border: 1px solid #DDDDDD; border-left: none; border-top: none; text-align: center; vertical-align: middle;}
.skyspace-title > div{width: 130px; background-color: #F5F5F5;}
.skyspace-data {width: calc(100% - 130px); overflow-x: scroll;}

.description{padding-left: 20px; margin-top: 15px;color: #f86748;  line-height: 30px; font-size: 13px; letter-spacing: 1px;}
.description>div{margin-bottom: 6px;}

.tip{padding-bottom: 10px; padding-top: 10px; background-color: #E8F4FF; border-radius: 4px; width: 100%;}
.tip img{width: 16px; height: 16px;}
.tip p{line-height: 26px; color: #8d8d8d;}

.error{padding-bottom: 10px; padding-top: 10px; background-color: #fff6e8; border-radius: 4px; width: 100%;}
.error img{width: 16px; height: 16px;}
.error p{line-height: 26px; color: #8d8d8d;}

.warn{color: red; border-color: red!important;}
.adjust{color: #ff9564;}

.new-title-bg{background: linear-gradient( 90deg, #0979DE 0%, #47A8FF 100%);height: 36px;}
.new-title-bg .logout_div span{line-height: 36px!important;}
.new-title-bg .logo{height: 36px;line-height: 36px;}
.new-title-bg .collapse{height: 36px;line-height: 36px;}

.select-db{height: 28px;line-height: 28px;border: 1px solid #aaa;border-radius: 4px;color: #555555;font-weight: 400;padding: 0 5px;}