/*common*/
body{ background-color: #F5F5F5; font-size: 16px; color: #333;}
@font-face {
    src: url('../fonts/DIN-Bold.otf');
    font-family: DIN-Bold
}
a:hover{ text-decoration: none; }
.iconfont{ font-size: inherit; }
.flex-1{ -ms-flex: 1; flex: 1; }
.flex-2{ -ms-flex: 2; flex: 2; }
.flex-3{ -ms-flex: 3; flex: 3; }
[v-cloak]{ display: none!important; }
/*color*/
.text-all,.a-btn.text-all:hover{ color: #065FD5; }
.text-completed{ color:#3BE39A; }
.text-incomplete,.a-btn.text-incomplete:hover{ color: #FF6D8A; }
.text-rate{ color: #FFC72E; }
.text-inessential{ color: #989898;}
.text-maintain,.a-btn.text-maintain:hover{ color: #2DC7D2;}
.text-warning{ color: #FFA42E !important;}
.a-btn:hover{ opacity: 0.8;}
/*bg*/
.bg-inspection{ background-color: #3BE39A;}
.bg-maintain{ background-color: #2DC7D2;}
.bg-information{ background-color: #EAF0F9;}
/*text*/
.text-bolder{ font-family: DIN-Bold;}
.text-opacity{ opacity: 0.8;}
.font-1{ font-size: 1rem; }
.font-p52{ font-size: 52px;}
.font-p40{ font-size: 40px; }
.font-p36{ font-size: 36px; }
.font-p24{ font-size: 24px; }
.font-p20{ font-size: 20px; }
.font-p18{ font-size: 18px; }
.font-p16{ font-size: 16px; }
.font-p14{ font-size: 14px; }
.font-p12{ font-size: 12px; }
/*border*/
.border-left{ border-left: 1px solid #EAF0F9!important;}
.border-top{ border-top: 1px solid #EAF0F9!important;}
.border-label{ border: 1px solid; color: #3BE39A; font-size: 12px; padding: 3px 12px;}
.border-label.danger{ color: #FF6D8A;}
.border-dashed-bottom{ border-bottom: 1px dashed #EAF0F9;}

/*小型切换展示组件*/
.tab-nav-sec{ font-size: 14px; font-weight: 400; border: 1px solid #989898; display: inline-block;
    color: #989898; border-radius: 14px; height: 28px;}
.tab-nav-sec a{ padding: 0 10px; line-height: 28px; display: inline-block; border-radius: 14px; 
    cursor: pointer; margin-top: -1px; transition: all 0.3s;}
.tab-nav-sec a:hover{ color: #007bff !important;}
.tab-nav-sec a.active{ background: #007bff; color: #fff; }
.tab-nav-sec a.active:hover{ color: #fff !important;}
.tab-nav-sec a:first-child{ margin-left: -1px;}
.tab-nav-sec a:last-child{ margin-right: -1px;}
/*sec切换展示组件*/
.nav-underlines{ border-bottom: 1px solid #EAF0F9;}
.nav-underlines .nav-link{ padding: 8px 6px; line-height: 1; margin: 0 1rem; color: #333; opacity: 0.5;}
.nav-underlines .nav-link:hover{ opacity: 0.8;}
.nav-underlines .nav-link.active{ border-bottom: 2px solid #065FD5; opacity: 1;}
/*设备信息sec切换展示组件*/
.nav-secline .nav-link{ padding: 9px 24px; line-height: 1; margin: 0 1rem; color: #065FD5; opacity: 0.5;}
.nav-secline .nav-link:hover{ opacity: 0.8;}
.nav-secline .nav-link.active{ border-bottom: 2px solid #065FD5; opacity: 1;}

/*面包屑*/
.custom-breadcrumb{ background: #EAF0F9; font-size: 14px; color: #065FD5; padding: 0 1rem; line-height: 32px;}
/* .breadcrumb-item.active{ color: #057AFF;} */

/*laydate样式*/
.laydate-theme-molv .layui-laydate-header{ background-color: #ffffff !important;
    border-bottom: 1px solid #e2e2e2 !important;}
.laydate-theme-molv .layui-laydate-header i, .laydate-theme-molv .layui-laydate-header span{
    color: #0056d4 !important;}
.layui-laydate .layui-laydate-content td.laydate-selected{ background-color: #c6deff; }
.layui-laydate-content .laydate-selected:hover{ background-color: #c6deff!important;}

/*section*/
.custom-section{ background: #fff; border-radius: 2px; padding: 1rem; box-shadow: 0px 2px 4px 0px rgba(6,95,213,0.2);}
.gis-section{ background: url(../images/gis-sec.png) no-repeat; height: 306px; margin-bottom: 12px; background-size: 100% 100%;}
.gis-sec-title{ font-size: 18px; font-weight: 600; padding: 6px 25px;}

/*表单*/
.form-control{ background: transparent; border-radius: 2px; border: 1px solid #0056D4; font-size: 14px; height: 40px;
    padding: .375rem 1rem; color: #333;}
.form-control-sm{ height: 34px; padding: .25rem .5rem;}
.form-control.time-picker{ background: url(../images/icon/time-picker.png) no-repeat right 1rem center transparent; 
    padding-right: calc(1rem + 21px);}
select.form-control{ -webkit-appearance:none; -moz-appearance:none; appearance:none; padding-right: calc(1rem + 21px);
    background: url(../images/icon/select-arrow.png) no-repeat right 1rem center transparent; }
select.form-control::-ms-expand{ display: none; }
.form-control:focus{ background-color: #EAF0F9; border-color: #0056D4; box-shadow: 0px 2px 4px 0px rgba(6,95,213,0.2); }
.form-control::-webkit-input-placeholder{ color: rgba(51,51,51,0.5);}
.form-control::-moz-input-placeholder{ color: rgba(51,51,51,0.5);}
.form-control::-ms-input-placeholder{ color: rgba(51,51,51,0.5);}
.input-group>.form-control:not(:last-child){ border-right: 1px solid #6193D5;}
.input-group-text{ border: 1px solid #0056d4; border-radius: 2px; background-color: #EAF0F9;
    color: #6193D5; border-left: none;}
.input-group-sm>.form-control:not(textarea){ height: 34px;}
.input-group-sm>.form-control{ border-radius: 2px; font-size: 14px;}
.input-group-sm>.input-group-append>.input-group-text{ border-radius: 2px; }
.col-form-label{ text-align: right;}
.form-required{ color: red; font-size: 20px; position: absolute; margin-left: 2px; margin-top: -2px;}
.form-daterange{ min-width: 220px; }
.form-control-feedback{ top: 0; right: -18px; height: 40px; line-height: 40px; }

/*button*/
.btn{ border-radius: 2px; border: none; padding: 8px 18px;}
.btn:not(:disabled):not(.disabled):hover{ opacity: 0.8;}
.btn-primary,.btn-primary:not(:disabled):not(.disabled):hover,.btn-primary:not(:disabled):not(.disabled):active{ background: #0056D4;}
.btn-info,.btn-info:hover,.btn-info:not(:disabled):not(.disabled):active{ background: #2DC7D2;}
.btn-warning,.btn-warning:not(:disabled):hover,.btn-warning:not(:disabled):not(.disabled):active{ background: #FFA42E; color: #fff;}
.btn-danger,.btn-danger:hover,.btn-danger:not(:disabled):not(.disabled):active{ background: #FF6D8A;}
.btn-secondary,.btn-secondary:hover,.btn-secondary:not(:disabled):not(.disabled):active{ background: #989898}
.table .btn{ padding: 4px; line-height: 1; font-size: 16px;}
.btn-outline-danger{ border: 1px solid #FF6D8A; color: #FF6D8A;}
.btn-outline-danger:hover,.btn-outline-danger:not(:disabled):not(.disabled):active{
    border: 1px solid #FF6D8A;background: #FF6D8A; color: #fff;}
.btn-outline-primary{ border: 1px solid #0056D4; color: #0056D4;}
.btn-outline-primary:hover,.btn-outline-primary:not(:disabled):not(.disabled):active{
    border: 1px solid #0056D4;background: #0056D4; color: #fff;}

/*modal*/
.modal-content { border-radius: 2px; border: none; box-shadow: 0px 2px 4px 0px rgba(6, 108, 213, 0.2);}
.modal-header { padding: 14px 1rem; border-bottom: 1px solid #EAF0F9;}
.modal-header .close{ opacity: 1;}
.modal-header .close span{ color: #fff; text-shadow: none; background-color: rgba(51,51,51,0.2);
    width: 24px; line-height: 20px; border-radius: 50%; height: 24px; display: inline-block;}
.modal-header .close:not(:disabled):not(.disabled):hover{ opacity: 1;}
.modal-header .close:not(:disabled):not(.disabled):hover span{ background-color: #FF6D8A;}
.modal .col-form-label{ opacity: 0.8;}
.modal-footer{ justify-content: center;}

/*表格*/
.table th, .table td{ font-weight: 400; border-top: none;}
.table thead tr{ background: #065FD5; color: #fff }
.table thead th{ font-size: 18px; }
.table-block thead th{ border-bottom: none;}
.table-block tbody tr{ border-top: 4px solid #fff; border-bottom: 4px solid #fff; background: #EAF0F9; background-clip: padding-box;}
.table-block tbody tr:first-child{ border-top: none;}
.table-underline td{ border-bottom: 1px solid #EAF0F9;}
.table-center.table th, .table-center.table td{ text-align: center; }
.table-separate{ border-collapse: separate; border-spacing: 0 8px; color: #fff;}
.table-separate thead tr{ background: transparent; color: #A5BFE6;}
.table-separate thead th{ border-bottom: none; padding: .3rem .3rem 0; font-size: 16px;}
.table-separate tbody tr{ background: rgba(234,240,249,0.2);}
.table-separate td{ font-size: 14px;}
.table-sm td, .table-sm th{ padding: .4rem 0.2rem;}
.table-alarm tbody tr:nth-child(2n+1){ background: rgba(255,109,138,0.5);}
.table-alarm tbody tr:nth-child(2n){ background: rgba(165,191,230,0.5);}
.table-maintain tbody tr{ background: rgba(45,199,210,0.3);}

/*分页栏*/
.page_div{ text-align:center; font-size: 14px; color: #065FD5;}
.page_div a,.page_div input,.page_div select{ padding: 8px 11px; line-height: 1; border: 1px solid #065FD5!important; text-align: center; 
    margin: 0 5px; cursor: pointer; color: #333!important; font-size: 14px; display: inline-block; border-radius: 2px;}
.page_div .current{ background-color: #065FD5; color: #FFFFFF!important;}
.totalPages{margin: 0 10px;}
.totalPages span, .totalSize span{color: #333; margin: 0 5px; font-weight: 600; font-size: 16px;}
.page_div .goPage{ margin-left: 10px;}
.page_div input{ padding: 5px 0px; width: 64px; cursor: text;}
.page_div select{ padding: 5px 0px; cursor: auto; margin-left: 10px;}

/*图片预览*/
.image-upload-area{ background: #EAF0F9; height: 150px;}
.image-upload-area img{ max-height: 100%;}
#viewImageModal .modal-dialog{ max-width: 80%; -ms-flex-pack: center!important; justify-content: center!important;}
#viewImageModal .modal-content{ width: auto;}

.w-4{ width: 4em;}
.w-6{ width: 6em;}
.info-sec{ margin-bottom: 18px; color: rgba(51,51,51,0.8);}
.info-name{ text-align: right; line-height: 40px;}
.info-value{ background: #EAF0F9; padding: 8px 15px; margin-left: 1rem; }

/*配合customModalV2的样式部分*/
/*图表无数据提示*/
.noDataHint_n{ background: url(../images/no-data.png) no-repeat center center #fff; z-index: 1; text-align: center; position: absolute; }
/*弱提示*/
.modal-hint{ position: fixed; top: 48%; left: 50%; background: rgba(0, 0, 0, 0.7); color: #fff; border-radius: 5px; font-size: 24px; z-index:2000; padding: 12px 20px; }
/*强提示*/
.modal-hint.strong{ top: 0; left: 0; border-radius: 0; font-size: 24px; z-index:2001; padding: 0; padding-top: 20%; width: 100%; height: 100%; text-align: center; }
/*旋转动画*/
.rotate{ animation: rotate 2s linear infinite;}
@keyframes rotate{ 0%{ transform:rotate(0deg);} 50%{ transform:rotate(180deg);} 100%{ transform:rotate(360deg);} }

/*layui树结构*/
.layui-tree .layui-icon-file{ display: none;}
.layui-tree-entry{ line-height: 20px; height: auto; white-space: normal; }
.layui-form-checkbox[lay-skin=primary]{ padding-left: 22px;}
.layui-form-checked[lay-skin=primary] i{ border-color: #007bff!important;
    background-color: #1988ff;}
.layui-form-checkbox i{ top: 1px;}
.layui-tree-icon{ width: 14px;}
.layui-tree-line .layui-tree-entry .layui-tree-txt{ display: inline;}
.layui-tree-line .layui-tree-entry:hover{ background-color: rgba(21, 106, 184, .06);}
.layui-tree-line .layui-tree-entry:hover .layui-tree-txt{ color: #007bff; text-decoration: none;}
.layui-tree-iconClick{ margin: 0px 6px;}
.single-level .layui-tree-entry{ padding: 5px 0;}

/*定义webkit内核下 滚动条样式*/
::-webkit-scrollbar{ width: 7px; height: 7px; background-color: rgba(0, 0, 0, 0.44);}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #ddd;}
::-webkit-scrollbar-thumb{ border-radius: 3px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #065FD5 ;}/*滚动条*/
.custom-scroll-y{ overflow-y: auto; }
.custom-scroll-y::-webkit-scrollbar-thumb{ background-color: #2d86dd;}

/*巡检详情*/
.real-data-area{ flex-basis: calc(50% - 0.5rem); }
.real-data-area:nth-child(2n){ margin-left: 1rem;}
.real-data-area .value{ border-left: 4px solid #2DC7D2; border-right: 4px solid #2DC7D2; 
    padding: 8px; min-height: 56px;background: rgba(45,199,210,0.1); font-weight: 600;}
.items-list{ border: 1px solid #ccc; padding: 7px 16px; flex-basis: calc(100% / 3 - 2rem / 3);}
.items-list:nth-child(3n+2),.items-list:nth-child(3n+3){ margin-left: 1rem;}

/*时间轴*/
.time-axis{ position: relative; padding-left: 28px;}
.time-axis:after{ content: ''; position: absolute; top: 14px; bottom: 14px; width: 1px; background: #EAF0F9; left: 6px;}
.time-axis .item-wrap{ line-height: 40px; padding-left: 8px; padding-right: 16px; position: relative; color: #989898;}
.time-axis .item-wrap.active{ color: #065FD5;}
.time-axis .item-wrap:after{ content: ''; width: 13px; height: 13px; border-radius: 50%; background: #EAF0F9; 
    margin-right: 8px; position: absolute; top: 50%; margin-top: -6px; left: -28px; z-index: 1;
    outline: 2px solid #fff;}
.time-axis .item-wrap.active:after{ background: #fff; border: 1px solid #065FD5;}
.time-axis .item-wrap:hover{ background: #EAF0F9;}

.search-list{ background: #EAF0F9; padding: .25rem 0; max-height: 400px; overflow-y: auto;}
.search-list a.dropdown-item{ padding: 8px 16px;}
.search-list a.dropdown-item:hover{ background: #BCD3F2;}
.hint-text{ padding: 8px 16px; color: #666; font-size: 14px;}

/*时间轴式进度条*/
.progress-time-axis{}
.progress-time-axis .circle{ width: 24px; height: 24px; border-radius: 50%; background: #EAF0F9; }
.progress-time-axis .circle-center{ width: 12px; height: 12px; border-radius: 50%; }
.progress-time-axis .dot1{ background: #FFA42E;}
.progress-time-axis .dot2{ background: #065FD5;}
.progress-time-axis .dot3{ background: #3BE39A;}
.progress-time-axis .progress-bg{ background: #EAF0F9; height: 8px; z-index: 1; position: relative; }
.progress-time-axis .progress1{ margin-left: -6px; margin-right: -5px; }
.progress-time-axis .progress2{ margin-right: -6px; margin-left: -5px; }
.progress-time-axis .progress{ margin-top: 2px; border-radius: 0; height: 4px;}
.progress-time-axis .progress-bar{ border-radius: 0;}
.progress-time-axis .progress1 .progress-bar{ background: linear-gradient(74deg,#ffa42e 6%, #065fd5 89%);}
.progress-time-axis .progress2 .progress-bar{ background: linear-gradient(270deg,#3be39a, #065fd5);}
.progress-time-axis .percent{ position: absolute; width: 100%; top: -25px;}

.tree-node-dot:before{ content: ''; width: 14px; height: 14px; display: inline-block; background: #BBBBBB;
    border: 2px solid rgba(187,187,187, 0.2); border-radius: 50%; background-clip: content-box; margin-right: 0.25rem; vertical-align: middle}
.tree-node-dot.active:before{ background: #065fd5; border: 2px solid rgba(6, 95, 213, 0.2); background-clip: content-box;}
.tree-node-dot.active{ color: #065fd5;}

.user-info-sec{ border-radius: 2px; box-shadow: 0px 4px 6px 0px rgba(6,95,213,0.2); padding-top: 116px; padding-bottom: 76px; margin-top: 50px;
    position: relative; background:
        url(../images/user-info-top.png) top center no-repeat,
        url(../images/user-info-bottom.png) bottom center no-repeat;
    background-color: #fff;}