/*
// +----------------------------------------------------------------------
// | 版权所有 2019 Xiyoucheng，并保留所有权利
// | 这不是一个自由软件！禁止任何形式的拷贝、修改、发布
// +----------------------------------------------------------------------
// | Author  : XYC <KL>
// +----------------------------------------------------------------------
*/

html {
     color: #333;
     background-color: #f5f5f5;
}
.body {
     width: 100%;
     overflow: auto;
     margin-top: 20px;
}
/* +----------------------------------------------------------------------+ */

header {
     width: 100%;
     height: 50px;
     font-size: 14px;
     color: #82a6c5;
     line-height: 50px;
     background: #0870bb;
}
header a {
     color: #fff;
     padding: 0 20px;
     display: inline-block;
     text-decoration: none;
     height: 50px;
}
header a:hover {
     color: #fff;
     background: #0864a7;
}
header .logo {
     display: block;
     height: 50px;
     border-right: #0864a7 1px solid;
}
header li {
     float: left;
     width: auto;
     height: 50px;
     position: relative;
     border-right: #0864a7 1px solid;
}
header .menu a, header .right a, header .menu a:hover, header .right a:hover {
     color: #fff;
}
header li ul {
     width: 250%;
}
header li ul a {
     color: #fff;
     height: 50px;
     background: #0864a7;
}
header li ul span {
     color: rgba(255, 255, 255, 0.5);
}
header li:hover a {
     background: #0864a7;
}
header li ul a:hover {
     background: #108ee9;
}
header .right li {
     border-left: #0864a7 1px solid;
     border-right: none;
}
header .right li.msg a {
     display: block;
}
header .right li.msg a span {
     display: block;
     background-image: url(../images/srv-1.png);
     background-repeat: no-repeat;
     background-position: left center;
     background-size: 35px;
     padding-left: 35px;
}
@-webkit-keyframes twinkling {
     /*透明度由0到1*/
     0% {
          opacity: 0;
          /*透明度为0*/
     }
     100% {
          opacity: 1;
          /*透明度为1*/
     }
}
header .right li.msg a span.on {
     -webkit-animation: twinkling 1s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
header .right li ul {
     right: 0;
     min-width: 100%;
     background: #0864a7;
     display: none;
}
header .right li ul a {
     height: auto;
     line-height: 1.7em;
     display: block;
     padding: 15px 10px;
     font-size: 15px;
     text-align: center;
     color: #fff;
     border-top: #0870bb 1px solid;
}
header .right li ul a.hover {
     color: #fff;
}
header .right li ul a:hover {
     color: #fff;
     background: #108ee9;
}
header ol {
     width: 100%;
     padding: 10px 0 30px 0;
     background: #108ee9;
}
header ol li {
     max-width: 200px;
     height: auto;
     min-height: 320px;
     margin-left: 30px;
     border-top: rgba(255, 255, 255, 0.3) 1px solid;
     text-align: left;
}
header ol li * {
     display: block;
     height: auto;
     line-height: 1.7em;
     padding: 0;
}
header ol li span {
     color: #657886;
     line-height: 1.3em;
}
header ol li a {
     color: #9eb7d6;
     margin-top: 15px;
}
/* +----------------------------------------------------------------------+ */

.body_right {
     position: absolute;
     top: 50px;
     left: 0;
     width: 100%;
     height: calc(100vh - 50px);
     padding: 20px;
     line-height: 30px;
     background: #fff;
     overflow: auto;
}
.body_right .table_box {
     width: calc(100vw - 40px);
     overflow-x: auto;
     padding-bottom: 10px;
}
.underline {
     border-bottom: #ddd 1px solid;
}
.topline {
     border-top: #ddd 1px solid;
}
/*
.body_form {
     display: block;
     width: calc(100% - 40px);
     height:calc(100% - 40px);
     overflow: auto;
     margin: 20px;
}
*/

/* +----------------------------------------------------------------------+ */

.body_title {
     font-size: 15px;
     padding-bottom: 5px;
     border-bottom: #ddd 1px solid;
}
.body_title dt {
     font-size: 17px;
     line-height: 2em;
     font-weight: bold;
     display: inline-block;
}
/*
.body_title a[href], .body_title a[data-layout] {
     height: 30px;
     line-height: 29px;
     font-size: 14px;
     padding: 0 10px;
     font-weight: normal;
}
/*
.body_title a.lnk {
     height: auto;
     line-height: 2em;
     padding: 0;
}
.body_title a.lnk, .body_title a[data-lnk] {
     margin-left: 5px;
     margin-right: 5px;
     cursor: pointer;
}
.body_title a.lnk.active, .body_title a[data-lnk].active {
     color: #f00;
     font-weight: bold;
}
/* +----------------------------------------------------------------------+ */

.qrcode_view {
     width: 15px;
     height: 15px;
     margin-left: 3px;
     cursor: pointer;
     position: relative;
     display: inline-block;
     background-size: contain;
     background-position: center center;
     background-image: url(/comm/img/qrcode.png);
}
.qrcode_view img {
     display: none;
     position: absolute;
     left: 15px;
     top: 0;
     z-index: 1;
     width: 202px;
     border: #333 1px solid;
     border-radius: 0 5px 5px 5px;
}
.qrcode_view:hover img {
     display: block;
}
/* +----------------------------------------------------------------------+ */

[data-sts] {
     width: 40px;
     height: 22px;
     line-height: 22px;
     display: inline-block;
     border-radius: 12px;
     position: relative;
     cursor: default;
     vertical-align: middle;
}
[data-val] {
     cursor: pointer;
}
[data-sts="0"] {
     background-color: #dddddd;
}
[data-sts="0"][data-val]:hover {
     background-color: #bbbbbb;
}
[data-sts="1"] {
     background-color: #4caf50;
}
[data-sts="1"][data-val]:hover {
     background-color: #86d989;
}
[data-sts]:before {
     content: ' ';
     top: 2px;
     width: 18px;
     height: 18px;
     line-height: 18px;
     position: absolute;
     border-radius: 12px;
     font-size: 12px;
     text-align: center;
     display: inline-block;
     background-color: #fff;
     transition-duration: 0.3s;
}
[data-sts="0"]:before {
     left: 2px;
}
[data-sts="1"]:before {
     right: 2px;
}
.img_icon {
     width: 40px;
     height: 40px;
     display: inline-block;
     border-radius: 50%;
     background-color: #f5f5f5;
     background-repeat: no-repeat;
     background-position: center bottom;
     background-size: contain;
}