* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    width: 100%;
    display: table;
}

body {
    font: 12px/16px '微软雅黑', '微軟正黑體', '微软正黑体', "Microsoft JhengHei UI", "Microsoft JhengHei", Pmingliu, "Segoe UI", "Segoe UI Web Regular", "Segoe UI Symbol", "Helvetica Neue", tahoma, arial, 'Hiragino Sans GB', "\5b8b\4f53", sans-serif;
    background: #f2f2f2;
}

a {
    text-decoration: none;
    cursor: pointer;
}

ul,
li,
ol {
    list-style: none;
}

input,
button,
select,
textarea {
    outline: none;
}

textarea {
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0);
    margin: 0;
    padding: 6px 6px 7px 6px;
    width: 100%;
    height: 250px;
    line-height: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    resize: none;
    overflow: auto;
    color: #FFF;
}

.leftNav {
    width: 190px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 25px;
    background: #20222a;
    color: #fff;
    transition: All 0.2s;
    -moz-transition: All 0.2s; /* Firefox 4 */
    -webkit-transition: All 0.2s; /* Safari 和 Chrome */
    -o-transition: All 0.2s; /* Opera */
    overflow: auto;
}

.leftNav.hide {
    margin-left: -220px;
}

.leftNav h1 {
    font-size: 20px;
    line-height: 40px;
    text-indent: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.leftNavList {
    width: 100%;
    font-size: 14px;
}

.firstNav {
    line-height: 40px;
    height: 40px;
    overflow: hidden;
    margin-left: 20px;
    cursor: pointer;
    background: url(../image/select.png) 140px 18px no-repeat;
    background-size: 16px;
    transition: All 0.2s;
    -moz-transition: All 0.2s; /* Firefox 4 */
    -webkit-transition: All 0.2s; /* Safari 和 Chrome */
    -o-transition: All 0.2s; /* Opera */
}

.firstNav.nochild {
    background: none;
}

.firstNav i {
    display: inline-block;
    width: 30px;
    height: 40px;
    background-size: 18px;
    float: left;
    background-position: 0 10px;
    background-repeat: no-repeat;
}

.firstNav:hover {
    color: #409EFF;
}

/*首页*/
.firstNav:hover i.index {
    opacity: 1;
    background-image: url(../image/index_01.png);
}

/*系统设置*/
.firstNav:hover i.set {
    opacity: 1;
    background-image: url(../image/set_01.png);
}

/*日志管理*/
.firstNav:hover i.log {
    opacity: 1;
    background-image: url(../image/log_1.png);
}

/*其它功能*/
.firstNav:hover i.other {
    opacity: 1;
    background-image: url(../image/other_1.png);
}

/*下位机监控*/
.firstNav:hover i.monitor {
    opacity: 1;
    background-image: url(../image/monitor_01.png);
}

/*任务管理*/
.firstNav:hover i.file {
    opacity: 1;
    background-image: url(../image/file_01.png);
}

/*接口*/
.firstNav:hover i.connector {
    opacity: 1;
    background-image: url(../image/connector_01.png);
}

/*仓库管理*/
.firstNav:hover i.warehouse {
    opacity: 1;
    background-image: url(../image/warehouse_01.png);
}

/*设备管理*/
.firstNav:hover i.device {
    opacity: 1;
    background-image: url(../image/device_01.png);
}

i.index {
    background-image: url(../image/index_02.png);
}

i.set {
    background-image: url(../image/set_02.png);
}

i.other {
    background-image: url(../image/other_2.png);
}

i.log {
    background-image: url(../image/log_2.png);
}

i.monitor {
    background-image: url(../image/monitor_02.png);
}

i.file {
    background-image: url(../image/file_02.png);
}

i.connector {
    background-image: url(../image/connector_02.png);
}

i.warehouse {
    background-image: url(../image/warehouse_02.png);
}

i.device {
    background-image: url(../image/device_02.png);
}

.firstNav span {
    display: inline-block;
    height: 40px;
    line-height: 40px;
}

.leftNavList ul {
    background: #000;
    overflow: hidden;
    display: none;
}

.leftNavList li {
    height: 30px;
    line-height: 30px;
    padding-left: 50px;
    margin-top: 5px;
    cursor: pointer;
    transition: All 0.1s;
    -moz-transition: All 0.1s; /* Firefox 4 */
    -webkit-transition: All 0.1s; /* Safari 和 Chrome */
    -o-transition: All 0.1s; /* Opera */
}

.leftNavList li:hover {
    background: #409EFF;
}

.leftNavList.focus .firstNav {
    background-position: 140px -8px;
    color: #409EFF;
}

.leftNavList.focus i {
    opacity: 1;
}

.leftNavList.focus i.index {
    background-image: url(../image/index_01.png);
}

.leftNavList.focus i.set {
    background-image: url(../image/set_01.png);
}

.leftNavList.focus i.monitor {
    background-image: url(../image/monitor_01.png);
}

.leftNavList.focus i.file {
    background-image: url(../image/file_01.png);
}

.leftNavList.focus i.connector {
    background-image: url(../image/connector_01.png);
}

.leftNavList.focus i.warehouse {
    background-image: url(../image/warehouse_01.png);
}

.leftNavList.focus i.device {
    background-image: url(../image/device_01.png);
}

.leftNavList.active div span {
    color: #409EFF;
}

.leftNavList.active .firstNav {
    background-position: 140px -8px;
}

.leftNavList.active i.index {
    background-image: url(../image/index_01.png);
}

.leftNavList.active i.set {
    background-image: url(../image/set_01.png);
}

.leftNavList.active i.monitor {
    background-image: url(../image/monitor_01.png);
}

.leftNavList.active i.file {
    background-image: url(../image/file_01.png);
}

.leftNavList.active i.connector {
    background-image: url(../image/connector_01.png);
}

.leftNavList.active i.warehouse {
    background-image: url(../image/warehouse_01.png);
}

.leftNavList.active i.device {
    background-image: url(../image/device_01.png);
}

.leftNavList.active i.log {
    background-image: url(../image/log_1.png);
}

.leftNavList.active i.other {
    background-image: url(../image/other_1.png);
}

.leftNavList.active ul {
    display: block;
}

.leftNavList li.focus {
    background: #409EFF;
    color: #fff;
}

.rightCont {
    position: absolute;
    left: 190px;
    right: 0;
    top: 0;
    bottom: 25px;
    transition: All 0.2s;
    -moz-transition: All 0.2s; /* Firefox 4 */
    -webkit-transition: All 0.2s; /* Safari 和 Chrome */
    -o-transition: All 0.2s; /* Opera */
}

.rightCont.slideLeft {
    left: 0;
}

.header {
    width: 100%;
    height: 50px;
    -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
    background: #20222a;
    text-align: right;
}

.headTop {
    width: 100%;
    height: 0;
}

.headTop div {
    display: inline-block;
    font-size: 15px;
    line-height: 50px;
    margin-right: 20px;
    color: #fff;
    position: relative;
}

.headTop div .line {
    display: block;
    width: 0;
    position: absolute;
    height: 5px;
    background: #409EFF;
    top: 0;
    transition: All 0.2s;
    -moz-transition: All 0.2s; /* Firefox 4 */
    -webkit-transition: All 0.2s; /* Safari 和 Chrome */
    -o-transition: All 0.2s; /* Opera */
}

.headTop div:hover .line2 {
    color: #409EFF;
}

.headTop div:hover .line {
    width: 100%;
}

.header .loginOut {
    margin-right: 40px;
    cursor: pointer;
}

.header .password {
    cursor: pointer;
}

.header .sildeNav {
    display: inline-block;
    width: 40px;
    height: 50px;
    background: url(../image/slide_01.png) center center no-repeat;
    background-size: 16px;
    float: left;
    margin-left: 20px;
    cursor: pointer;
}

.header .sildeNav:hover {
    background: url(../image/slide_hover_01.png) center center no-repeat;
    background-size: 16px;
}

.header .sildeNav.turn {
    background-image: url(../image/slide_02.png);
}

.header .sildeNav.turn:hover {
    background-image: url(../image/slide_hover_02.png);
    background-size: 16px;
}

.headNav {
    clear: both;
    height: 49px;
    line-height: 49px;
    overflow: hidden;
    text-align: left;
    padding-left: 30px;
}

.headNav span span {
    cursor: pointer;
}

.headNav span span:hover {
    color: #009688;
}

.content {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 60px;
    bottom: 10px;
    overflow: auto;
}

/* 加载 */
.loadingmask {
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0.1;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9999;

}

.loading {
    width: 120px;
    height: 120px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -60px;
    margin-top: -60px;
    transform: scale(0.5, 0.5);
    z-index: 10000;
}

.loadingbg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #000;
    border-radius: 20px;
    opacity: 0.4;
}

.loadEffect {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 10px;
    top: 10px;

}

.loadEffect span {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #b5e7ff;
    position: absolute;
    -webkit-animation: load 1.04s ease infinite;
}

@-webkit-keyframes load {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.2;
    }
}

.loadEffect span:nth-child(1) {
    left: 0;
    top: 50%;
    margin-top: -8px;
    -webkit-animation-delay: 0.13s;
}

.loadEffect span:nth-child(2) {
    left: 14px;
    top: 14px;
    -webkit-animation-delay: 0.26s;
}

.loadEffect span:nth-child(3) {
    left: 50%;
    top: 0;
    margin-left: -8px;
    -webkit-animation-delay: 0.39s;
}

.loadEffect span:nth-child(4) {
    top: 14px;
    right: 14px;
    -webkit-animation-delay: 0.52s;
}

.loadEffect span:nth-child(5) {
    right: 0;
    top: 50%;
    margin-top: -8px;
    -webkit-animation-delay: 0.65s;
}

.loadEffect span:nth-child(6) {
    right: 14px;
    bottom: 14px;
    -webkit-animation-delay: 0.78s;
}

.loadEffect span:nth-child(7) {
    bottom: 0;
    left: 50%;
    margin-left: -8px;
    -webkit-animation-delay: 0.91s;
}

.loadEffect span:nth-child(8) {
    bottom: 14px;
    left: 14px;
    -webkit-animation-delay: 1.04s;
}

/* 小提示 */
.tipsmask {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.1);
    z-index: 1026;
}

.systemTips {
    padding: 40px;
    line-height: 40px;
    position: absolute;
    left: 50%; /* 定位父级的50% */
    top: 50%;
    transform: translate(-50%, -70%); /*自己的50% */
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #999;
    border-radius: 10px;
    color: #fff;
    font-size: 1rem;
    z-index: 1026;
    opacity: 1;
    animation: fadeIn 0.3s;
    -moz-animation: fadeIn 0.3s; /* Firefox */
    -webkit-animation: fadeIn 0.3s; /* Safari 和 Chrome */
    -o-animation: fadeIn 0.3s; /* Opera */
    -o-animation: fadeIn 0.3s; /* Opera */
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn /* Firefox */
{
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn /* Safari 和 Chrome */
{
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-o-keyframes fadeIn /* Opera */
{
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 登录*/
.loginbg {
    background: url(../image/bg.png) 0 0 no-repeat;
    background-size: cover;
}

.loginbg .mainbox {
    width: 300px;
    height: 520px;
    text-align: center;
    margin: 0 auto;
    margin-top: 145px;
}

.loginbg .mainbox h1 {
    color: #fff;
    font-size: 30px;
    line-height: 80px;
}

.registerBox {
    font-size: 14px;
    line-height: 20px;
    background: #fff;
    border-radius: 10px;
    height: 360px;
    overflow: hidden;
    color: #666;
}

.registerBox h2 {
    font-size: 20px;
    margin-top: 80px;
    margin-bottom: 50px;
}

.inputBar {
    height: 50px;
    line-height: 50px;
}

.inputBar input {
    width: 200px;
    border: none;
    border-bottom: 1px solid #ddd;
    height: 38px;
    line-height: 38px;
}

.registerBtn {
    margin-top: 40px;
}

.registerBtn button {
    width: 220px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    background: #409EFF;
    font-size: 18px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

/* 搜索栏 */
.searchBar {
    width: 100%;
    margin-bottom: 10px;
}

.searchBar select {
    height: 30px;
    line-height: 30px;
    border: 1px solid #ddd;
    min-width: 60px;
    margin-right: 10px;
}

.searchBar label {
    margin-left: 10px;
}

.searchBar input {
    width: 100px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #ddd;
    margin-right: 10px;
    padding: 0 10px;
}

.searchBar .dateinput {
    width: 125px;
}

.searchBar button {
    min-width: 60px;
    height: 30px;
    line-height: 30px;
    background: #409EFF;
    color: #fff;
    border: none;
    margin-left: 10px;
    cursor: pointer;
    text-align: center;
    padding: 0 10px;
}

.searchBar button:hover {
    background: #1e8eff;
}

.searchBar .oper {
    min-width: 60px;
    height: 30px;
    line-height: 30px;
    background: #ffb774;
    color: #fff;
    border: none;
    margin-left: 10px;
    cursor: pointer;
    text-align: center;
    padding: 0 10px;
}

.searchBar .oper:hover {
    background: #ffa16b;
}

.oprateLeft {
    float: left;
    padding-right: 20px;
}

.opratetop {
    padding-top: 20px;
}

.oprate {
    float: right;
    padding-right: 20px;
}

.oprate .remove {
    float: right;
    background: #f56c6c;
}

.oprate .remove:hover {
    float: right;
    background: #f53f3f;
}

.oprate .clear {
    background: #999;
}

.oprate .upagrade {
    background: #fcaf42;
}

/* 上传文件 */
.uploadbox {
    width: 345px;
    position: relative;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.uploadbox .uploadinput {
    width: 90px;
    border: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}

.uploadbox .labelinput {
    border: 0;
    width: 240px;
    padding-left: 10px;
    color: #888;
    float: left;
    overflow: hidden;

}

.uploadbox span {
    display: block;
    width: 89px;
    height: 30px;
    line-height: 30px;
    border-left: 1px solid #ccc;
    float: right;
    text-align: center;
    font-weight: bold;
    cursor: pointer;

}

.spanbt {
    display: inline-block;
    text-align: center;
    width: 32px;
    height: 26px;
    line-height: 26px;
    border-radius: 0 5px 5px 0;
    color: #000;
    font-weight: bold;
    border: 1px solid #ccc;
    cursor: pointer;
}

/* 修改密码 */
.modifyPassword {
    padding: 0 10px;
}

.modifyPassword div {
    height: 40px;
}

.modifyPassword label {
    display: inline-block;
    width: 70px;
}

.modifyPassword input {
    width: 150px;
    height: 26px;
    padding: 0 10px;
    border: 1px solid #ccc;
}

.modifybtn {
    margin-top: 10px;
    padding: 0 !important;
    margin-bottom: 10px;
}

/*  操作 */
.oprate {
    float: right;
    padding-right: 20px;
}

.oprate .clear {
    background: #999;
}

.oprate .upagrade {
    background: #fcaf42;
}

.oprate .unbind {
    background: #FF0000;
}

/* 表格弹窗	 */
.popup {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, .5);
    display: none;
}

.popBody {
    width: 420px;
    height: auto;
    background: rgba(255, 255, 255, .5);
    padding: 8px;
    position: absolute;
    left: 50%; /* 定位父级的50% */
    top: 120px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1), 0 0 256px rgba(255, 255, 255, .3);
    border-radius: 6px;
    font-family: Helvetica, arial, sans-serif;
    font-size: 14px;
    line-height: 1.428571429;
    color: #333;
}

.popHead {
    height: 40px;
    line-height: 40px;
    color: #fff;
    background-image: linear-gradient(to bottom, #3685d6, #409EFF);
}

.popHead h1 {
    float: left;
    font-size: 16px;
    padding-left: 20px;
    font-weight: 400;
}

.popHead .closebt {
    float: right;
    margin-right: 15px;
    font-size: 18px;
    font-family: arial;
    cursor: pointer;
    font-weight: bold;
}

.popCont {
    padding: 20px;
    background: #fff;
    max-height: 450px;
    overflow: auto;
}

.popCont td {
    height: 50px;
    line-height: 30px;
    padding: 0 0 0 10px;
}

.popContTable {
    padding: 20px;
    background: #fff;
    max-height: 450px;
    overflow: auto;
}

.popContTable td {
    height: 30px;
    line-height: 30px;
    padding: 0 0 0 10px;
}

.popContView {
    padding: 20px;
    background: #fff;
    max-height: 450px;
    overflow: auto;
}

.popContView td {
    height: 30px;
    line-height: 30px;
    padding: 0 0 0 10px;
}

.popContView td.tdtt {
    text-align: right;
}

.popCont td.tdtt {
    text-align: right;
}

.popCont td.tdlt {
    text-align: left;
}

.popCont td input {
    height: 28px;
    padding: 0 10px;
    width: 100px;
    border: 1px solid #bbb;
}

.rd {
    height: 20px !important;
    vertical-align: middle !important;
}

.popCont td select {
    height: 30px;
    padding: 0 10px;
    width: 125px;
    border: 1px solid #bbb;
}

.popBot {
    text-align: center;
    margin-top: 40px;
}

.popBot button {
    display: inline-block;
    height: 38px;
    line-height: 38px;
    padding: 0 18px;
    background-color: #409EFF;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    font-size: 14px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    margin: 0 30px;
}

.popBot button.cancelBtn {
    background: #333;
}

.popContext {
    padding: 20px;
    background: #fff;
    max-height: 540px;
    height: 540px;
    overflow: auto;
}

span.red {
    color: red;
}

.deviceImg {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%
}

.bottomCont {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 25px;
    background: #20222a;
    color: #fff;
    line-height: 25px;
    text-align: center;
    font-size: 12px;
}

.bottomCont a {
    color: #fff;
}

.operatorBotton {
    margin-top: 5px;
    margin-bottom: 5px;
    align-content: center;
    text-align: center;
}

.selectElement input {
    width: 100% !important;
}