/*这里不要写任何css*/


/*====B:flex============================================*/
.flex-row{ display: flex; flex-direction:row;flex-wrap:nowrap;}
.flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; display: -webkit-box; display: -ms-flexbox; display: flex }
.flex{ -webkit-box-flex:1; -ms-flex:1; flex:1}
.flex.fixed{ height:100%; overflow: hidden} 
.flex.fixed .flex-body{ height:100%}
.flex.fixed .container-detail-body{ padding-bottom:100px}
/*====E:flex============================================*/

/*====B:border=============================*/
.border{ border:1px solid #ddd !important}
.border-top{ border-top:1px solid #ddd !important}
.border-bottom{ border-bottom:1px solid #ddd !important}
.border-none{ border:none !important}
.border-none-top{ border-top:none !important}

.border-left-red{border-left:6px solid #ff3a3a ;}
.border-red2{border-color: #0099FF;}

.border-red{ border-color:#ff3a3a !important}
.border-blue{ border-color: #1E88E5 !important}
.border-green{ border-color: #00c853 !important}
.border-orange{ border-color: #ff6f00 !important}
.border-cyan{ border-color: #00b8d4 !important}
.border-grey{ border-color: #546e7a !important}

/*====E:border=============================*/


/*====B:margin padding=============================*/
.mar { margin: 30px !important }
.mar-10{margin: 10px !important;}
.mar-20{margin: 20px !important;}
.mar-l10{margin-left: 10px !important}
.mar-b10 { margin-bottom: 10px !important }
.mar-b20 { margin-bottom: 20px !important }
.mar-b30 { margin-bottom: 30px !important }
.mar-t10 { margin-top: 10px !important }
.mar-t20 { margin-top: 20px !important }
.mar-t30 { margin-top: 30px !important }
.mar-none { margin: 0 !important }
.mar-l-none { margin-left: 0 !important }
.mar-r-none { margin-right: 0 !important }
.mar-t-none { margin-top: 0 !important }
.mar-b-none { margin-bottom: 0 !important }
/**/
.pad { padding: 30px !important }
.pad-10{padding: 10px !important;}
.pad-20{padding: 20px !important;}
.pad-t10 { padding-top: 10px !important }
.pad-t20 { padding-top: 20px !important }
.pad-t30 { padding-top: 30px !important }
.pad-b10 { padding-bottom: 10px !important }
.pad-b20 { padding-bottom: 20px !important }
.pad-b30 { padding-bottom: 30px !important }
.pad-none { padding: 0 !important }
.pad-l-none { padding-left: 0 !important }
.pad-r-none { padding-right: 0 !important }
.pad-t-none { padding-top: 0 !important }
.pad-b-none { padding-bottom: 0 !important }
/*====E:margin padding=============================*/

/*====B:radius 圆角================================*/
.rad-0 { border-radius: 0px !important; }
.rad-5 { border-radius: 5px !important; }
.rad-10 { border-radius: 10px !important; }
.rad-20 { border-radius: 20px !important; }
.rad-t-5{border-top-left-radius: 5px;border-top-right-radius: 5px;}
.rad-b-5{border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;}
.rad-l-5 { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.rad-r-5 { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
.rad-bl-5{border-bottom-left-radius: 5px; }
.rad-br-5{border-bottom-right-radius: 5px; }

.rad-t-10{border-top-left-radius: 10px;border-top-right-radius: 10px;}
.rad-b-10{border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;}
.rad-l-10 { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.rad-r-10 { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
/*====E:radius 圆角================================*/

/*====B:btn 按钮 ==================================*/
.btn{ background:linear-gradient(to right, #31bdff, #63cdff); border-radius:35px; position:relative; overflow:hidden}
.btn:before{ content:""; position:absolute; left:-100%; width:100%; height:100%; background:linear-gradient(to left, rgba(255,255,255,.1), #fff, rgba(255,255,255,.1)); opacity:.4; transition:.6s}
.btn:hover{background:linear-gradient(to right, #31bdff, #63cdff); color:#fff; box-shadow:0 3px 12px rgba(0,0,0,0.1)}
.btn:hover:before{ left:100%}
.btn i{font-size: 14px;margin-right: 4px;}

/*主按钮*/
.btn-main{ background:linear-gradient(to right, #1e95d4, #23acf4); color:#fff}
.btn-main:hover,
.btn-main:focus{ background:linear-gradient(to right, #1e95d4, #23acf4); color:#fff}

/*白色按钮*/
.btn-white{background: #eef2f5; color: #1e95d4; box-shadow: 0 5px 20px rgba(0,0,0,0.15); border: 1px solid #0095db;}
.btn-white:hover,
.btn-white:focus{ background: #eef2f5; color: #0087ce; box-shadow: 0 5px 20px rgba(102,102,102,0.5) }

/*橙色按钮*/
.btn-orange { background: linear-gradient(to right, #f37b24, #f99953); color: #fff }
.btn-orange:hover,
.btn-orange:focus { background: linear-gradient(to right, #f37b24, #f99953); color: #fff }

/*绿色按钮*/
.btn-green { background: linear-gradient(to right, #4caf50, #53d959); color: #fff }
.btn-green:hover,
.btn-green:focus { background: linear-gradient(to right, #4caf50, #53d959); color: #fff }

/*灰色按钮*/
.btn-gray { background: linear-gradient(to right, #4e4e4e, #6a6a6a); color: #fff }
.btn-gray:hover,
.btn-gray:focus { background: linear-gradient(to right, #4e4e4e, #7c7c7c); color: #fff }

/*transparent*/
.btn-transparent { background: transparent; border-color: transparent;color: #bbb }
.btn-transparent:hover { background: transparent; color: #aaa }
/*====E:btn 按钮 ==================================*/


/*====B:btn-circle-list 列表页面 折叠菜单 =============================*/
.btn-circle-list {display: inline-block;margin: 0 15px; position: relative; cursor: pointer; text-align: center}
.btn-circle-list .clbox {  }
.btn-circle-list ul { position: absolute; top: 0; right: 0; background: #fff; width: 120px; padding: 2px 0; box-shadow: 0 1px 5px 0 rgba(0,0,0,.3); display: none; z-index: 99 }
.btn-circle-list ul a { display: block; padding: 8px 20px; font-size: 14px; font-weight: bold; color: #666; text-align: left }
.btn-circle-list ul span { vertical-align: middle; padding: 0 5px; }
.btn-circle-list ul .icon { margin-right: 5px }
.btn-circle-list:hover ul { display: block }
.btn-circle-list ul li:hover { background: #eee; }
.btn-circle-list ul li a:hover { color: #1e95d4; }
/**/
.circle-list .item{ padding-right:40px; position:relative}
.circle-list .btn-circle-list{ position:absolute; right:10px; top:50%; margin-top:-20px; padding:10px}
/*====E:btn-circle-list 列表页面 折叠菜单 =============================*/

/*====B:列表页面 折叠查询栏=========================================*/
.search-toolbar { display: inline-block; position: relative; }
.search-toolbar .btn-circle { display: inline-block; vertical-align: middle; width: 40px; height: 40px; line-height: 40px; padding: 0; transition: background-color .3s; border-radius: 35px; border: none; overflow: hidden; }
.search-toolbar .btn-circle i { font-size: 16px; margin-right: 3px; width: inherit; display: inline-block; text-align: center; }
.search-toolbar .search-box { display: none; width: 260px; position: absolute; right: 0; top: 45px; padding: 30px 20px 20px 20px; border-radius: 10px; background: rgb(0 0 0 / 85%); text-align: center;z-index: 1; }
.search-toolbar .search-box .row{margin-bottom: 20px;}
/* .search-toolbar .search-box .input-field { margin-bottom: 24px; }
.search-toolbar .search-box .input-field > label { top: 1px; }
.search-toolbar .search-box .input-field > input[type=text] { height: 2.2rem; width: 180px; } */
.search-toolbar .btn-action { }
/*====E:列表页面 折叠查询栏=========================================*/

/*====B:table=======================================*/
table a{color:#039be5;}
td, th { padding: 8px }
.td-title { font-weight: bold; text-align: right; color: #333; width: 75px; padding-right: 0; vertical-align: inherit; border-right: 1px solid #ddd; }
.td-title.w4 { width: 80px; }
.td-title.w6 { width: 100px; }
.td-title.w8 { width: 120px }
.td-title label { margin-bottom: 0 }

/* 表格内，都不自动换行 */
table.nowrap td,table.nowrap th{white-space: nowrap;}

/* fixed */
table.fixed-header > thead{position:sticky; top:0px;z-index: 9;}
table.fixed-colmun td:first-child{position:sticky; left:0px;background: #eee;z-index: 8;}

/*striped*/
table.striped > tbody > tr:nth-child(odd) { background-color: #fff; }
table.striped > tbody > tr:nth-child(even) { background-color: #f8f8f8; }

/*无边框*/
.table-no-bordered tr,
.table-no-bordered td { border: none }
/*全边框*/
.table-bordered th,
.table-bordered td { border: 1px solid #ddd }
.table-bordered thead tr th { background: #eee; border: 1px solid #ddd; color: #000 }
/*数据列表*/
.table-data-list tr { border-bottom: none }
.table-data-list tr td { border-left: 1px solid #ddd }
.table-data-list thead tr th { background: #eee; border-left: 1px solid #ddd; color: #000 }
.table-data-list tr th:first-child,
.table-data-list tr td:first-child { border-left: none }
.table-data-list tr th:last-child,
.table-data-list tr td:last-child { border-right: none }
.table-data-list tbody tr:nth-child(even) { background: rgba(0,0,0,.02) }
.table-data-list tbody tr:hover { background-color: rgba(0, 149, 219, .1) !important; color: #000 }
.table-data-list .btn { height: 28px; line-height: 28px; font-size: 14px; padding: 0 8px }
/*====E:table=======================================*/


/*====B:scrollbar================*/
.scrollbar{ overflow-y:auto}
.scrollbar::-webkit-scrollbar{ width:8px; height:8px}
.scrollbar::-webkit-scrollbar-button{ background-color:#f5f5f5}
.scrollbar::-webkit-scrollbar-track{ background-color:#f5f5f5}
.scrollbar::-webkit-scrollbar-track-piece{}
.scrollbar::-webkit-scrollbar-thumb{ background:#c8c8c8; border-radius:6px}
/*====B:scrollbar================*/

/**====B:materialize========================================*/

/*字段验证-不通过，红色*/
.invalid { color: #F44336; }
.input-validation-error { border-bottom: 1px solid #F44336 !important; -webkit-box-shadow: 0 1px 0 0 #f44336 !important; box-shadow: 0 1px 0 0 #f44336 !important; }
.text-danger { color: #F44336; }

/* 不让已选，跑错位(加上这个可能会错位，要在不同的项目中验证) */
[type="checkbox"]:not(:checked), [type="checkbox"]:checked { position: initial; }
[type="radio"]:not(:checked), [type="radio"]:checked { position: initial; }

/*缩小距离，和固定宽度*/
/*[type="radio"]:not(:checked) + span, [type="radio"]:checked + span { padding-left: 24px; width: 80px; font-size: 1.1rem }
[type="checkbox"] + span:not(.lever) { padding-left: 24px; font-size:1.1rem;}*/

/*去掉“弹出页面”显示的滚动条(特别是 人员选择器)*/
.layui-layer-iframe { overflow-y: initial !important; }

@media only screen and (max-width: 992px) {
    .pagination { width: initial; }
}

/*时间选择器，固定默认颜色*/
.datepicker-controls .select-year input { color: initial !important; }
.datepicker-controls .select-month input { color: initial !important; }

/* Collections 集体项目（常用于附件列表） */
.collection-item{display: flex;flex-direction: row;}
.collection-item span{flex: 1;}
.collection-item a{margin-left:12px;}
.collection-item i{margin-right: 3px;}

/* card卡片，特别是图片卡片 */
.card .card-image.small{height: 250px;}
.card .card-image.medium{height: 330px;}
.card .card-image.large{height: 400px;}
.card .card-image img{height: 100%;width: 100%;object-fit: cover;}


.row{margin-bottom: auto;}

.z-depth-0-half { -webkit-box-shadow: 0 1px 10px 1px rgba(0,0,0,.05); box-shadow: 0 1px 10px 1px rgba(0,0,0,.05); border: 1px solid #efebeb; }

/**====E:materialize========================================*/


/**====E:tinymce 富文本编辑器========================================*/

/*字段验证-不通过，红色*/
.invalid-editor { border: 2px solid #F44336 !important; }

/**====B:tinymce 富文本编辑器========================================*/


/*====B:标签=========================================*/
.tag { display: inline-block; padding: 4px 8px; border-radius: 16px; }
.tag2 { display: inline-block; padding: 4px 8px; }
.tag3 { display: inline-block; padding: 4px 8px; border-radius: 8px; }

.tag-color1 { color: #2a6fd5; border: solid 1px #2a6fd5; }
.tag-color2 { color: #e44036; border: solid 1px #e44036; }
.tag-color3 { color: #b200ff; border: solid 1px #b200ff; }
.tag-color4 { color: #3db682; border: solid 1px #3db682; }
.tag-color5 { color: #ff00dc; border: solid 1px #ff00dc; }
.tag-color6 { color: #ff9800; border: solid 1px #ff9800; }
.tag-color7 { color: #4e4e4e; border: solid 1px #4e4e4e; }
.tag-color8 { color: #ffeb3b; border: solid 1px #ffeb3b; }

/*====E:标签=========================================*/


/*====B:人员选择 控件（页面）=========================================*/
.select-user { display:flex; padding: 30px 30px 77px; height: 100% }
.select-user .title { position: absolute; top: 0; left: 0; right: 0; font-weight: bold; font-size: 16px; background: #4caf50; color: #fff; padding: 10px 15px }
.select-user [type="checkbox"]:not(:checked), [type="checkbox"]:checked { position: absolute; }

/*left*/
.select-left { flex:1; height: 100%; border: 1px solid #ddd; padding: 64px 10px 30px 30px; position: relative; overflow: hidden;background-color:#fff; }
.select-left ul { width: 160px; position: absolute; top: 55px; left: 15px; bottom: 10px; border-right: 1px solid #ddd; padding-right: 15px; }
.select-left ul > li { font-size: 1.1rem; cursor: pointer; margin-bottom: 2px; padding: 10px 0 0 10px; }
.select-left ul > li:hover { font-weight: bold; color: #B87615; background: #ffe6b0; border-radius: 5px; border: 1px #FFB951 solid; }
.select-left ul > li > span { position: relative; top: -10px; left: 4px; }
.select-left ul > li > span.group-blue { color: #0099FF; font-weight: bold; }
.select-left ul > li.active { font-weight: bold; color: #B87615; background: #ffe6b0; border-radius: 5px; border: 1px #FFB951 solid; }
.select-left ul > li .text { display: block; padding: 10px 0 0 10px; }

.select-user-list { margin: 0 10px 0 160px; position: absolute; top: 55px; bottom: 10px; }
.select-user-list .box { display: none }
.select-user-list .box p { font-weight: bold; color: #B87615; background: #ffe6b0; border-radius: 5px; border: 1px #FFB951 solid; padding: 5px; margin-bottom: 10px; text-align: center; }
.select-user-list .item { display: inline-block; padding: 0 5px; width: 94px;margin-bottom:6px; }
.select-user-list .item span { padding-left: 25px; line-height: 25px; }

/*right*/
.select-right { width: 40%; height: 100%; border: 1px solid #ddd; border-left: none; position: relative; padding: 55px 10px 10px; background-color: #fff; }
.select-right-ed { position: absolute; left: 15px; right: 10px; top: 55px; bottom: 10px; }
.select-right-ed .box { padding: 6px; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 10px }
.select-right-ed .box p { font-weight: bold }
.select-right-ed .box.active { background: #0095db; border-color: #0095db; color: #fff; padding: 6px 6px }
.select-right-ed .box span { display: inline-block; padding: 3px 6px; background: #0095db; color: #fff; border-radius: 4px; margin: 5px 5px 0 0 }
/*bottom*/
.select-user-bottom { position: absolute; bottom: 0; left: 30px; right: 30px; padding: 20px 0; text-align: right }
/*====B:人员选择 控件（页面）=========================================*/

/*====B:人员选择 控件（嵌入页面）=========================================*/
.select-user-control { border: 1px solid #2dbcff; border-radius: 10px; padding: 20px 150px 20px 10px; position: relative }

.select-user-control .content .required { color: #ff0000 }
.select-user-control .content { /*padding:10px 0;*/ color: #999; display: inline-block; }
.select-user-control .content .box { border-radius: 0px; padding: 5px; margin: 5px 10px 0 0; border: 1px #f37b24 dashed; }
.select-user-control .content .box span { margin: 0 5px 0 0; }
.select-user-control .action { position: absolute; top: 50%; right: 10px; margin-top: -18px }
.select-user-control .box { float: left; border-radius: 4px }
.select-user-control .box.active { padding: 3px 6px; background: #0095db; border-color: #0095db; color: #fff }
.select-user-control .box span { display: inline-block; padding: 3px 6px; background: #0095db; color: #fff; border-radius: 4px; margin: 5px 5px 0 0; position: relative }
.select-user-control .box em { position: absolute; top: -8px; right: -8px; display: block; width: 16px; height: 16px; background: #fff; border-radius: 50%; z-index: 99; box-shadow: 0 0 8px rgba(0,0,0,.2); cursor: pointer }
.select-user-control .box em .icon { vertical-align: top }
.select-user-control .box p { display: inline-block; padding: 3px 6px; background: #fff; border: 1px solid #0095db; font-weight: bold; color: #0095db; border-radius: 4px; margin-right: 5px }
.select-user-control .z-content { overflow: hidden }
.select-user-control .z-content span { margin: 0 }
/*====B:人员选择 控件（嵌入页面）=========================================*/

/*====B:中部信息栏============================================================*/
.mid-panel { display: flex; margin: 0 1.5rem 1.5rem }
.mid-panel .bar { padding: 0 .75rem; background: #fff; padding: 20px; border-radius: 5px; box-shadow: 0px 10px 15px rgba(0,0,0,.1) }
/*放在左边的 bar，让右边的间距*/
.mid-panel .side-left { margin-right: 0.75rem; }
.mid-panel .flex-row { display: flex; flex: 1 }

.mid-panel .item { flex: 1; text-align: center; border-right: 1px solid #eee; }
.mid-panel .item:last-child { border-right: initial }
.mid-panel .item span { color: #fff; font-size: 36px; font-weight: bold; display: inline-block; padding: 0 10px; margin-top: 5px; border-radius: 8px; }
.mid-panel .item p { margin-top: 5px; }
/*====E:中部信息栏============================================================*/

/*====B:流程（三列）序号，流程名称，内容============================================================*/
.flow-step-items { display: flex; flex-direction: row; flex-wrap: nowrap; margin: 10px 0; }
.flow-step-items .step { display: flex; width: 30px; align-items: center; justify-content: center; color: #fff; }
.flow-step-items .title { display: flex; width: 160px; align-items: center; justify-content: center; text-align: center; color: #fff; }
.flow-step-items .content { flex: 1; padding: 10px; border: 2px dotted #ccc; }
.flow-step-items .content .result { font-size: 1.2rem; }
.flow-step-items .content .time { margin-left: 10px; padding-left: 2px; border-left: 3px solid #2196f3; }
.flow-step-items .content ul{padding-left:inherit !important;}
.flow-step-items .content ul li{list-style-type:circle !important;}
/*====E:流程（三列）序号，流程名称，内容============================================================*/

/*====B:项目显示各数字，============================================================*/
.items-count{display: flex; margin:5px;padding: 0 !important;border: 1px solid #ccc; height: 50px;}
.items-count .title{flex:1;display: flex;align-items: center; justify-content: center;}
.items-count .title .name{margin: 0 5px;}
.items-count .content{display: flex; align-items: center;}
.items-count .content .item{text-align: center; border-right: 1px solid #ccc;padding: 0 10px;}
.items-count .content .item:last-child { border-right: initial }
.items-count .content .item .name{font-size: 0.8rem;color:#6a6a6a}
.items-count .content .item .number{font-size: 1.3rem;font-weight:bold;}
/*====B:项目显示各数字，============================================================*/

/*====B:模块样式============================================================*/
/* 整块 */
.module {  box-shadow: 0 2px 10px rgba(0,0,0,.1); margin-bottom: 1.5rem; transition: all 0.2s; min-width: 200px; }
.module:hover { box-shadow: 0 2px 20px rgba(0,0,0,.2); transform: scale(1.12);  color:inherit !important; }
.module .title {text-align: center; font-size: 1.3rem; font-weight: bold; padding: 20px; }
.module .hd { display: flex;flex-direction:row;flex-wrap:nowrap;}
.module .menu { padding: 10px 5px;flex: auto;  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;}

/* 各个板块分开 */
.module-region { box-shadow: 0 2px 10px rgba(0,0,0,.1); margin-bottom: 1.5rem; min-width: 200px; }
.module-region a { display: block; transition: all 0.2s; color: #333; }
.module-region a:hover { box-shadow: 0 2px 20px rgba(0,0,0,.2); transform: scale(1.12); color:inherit !important;  }
.module-region .title {text-align: center; font-size: 1.3rem; font-weight: bold; padding: 20px; }
.module-region .hd { display: flex;flex-direction:row;flex-wrap:nowrap;}
.module-region .menu { padding: 10px 5px;flex: auto;  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;}
/*====E:模块样式============================================================*/


/*====B:页面提示 ============================================================*/
.tip{border: 1px #FFB951 dashed ;padding:5px 10px;border-radius: 10px;}
.tip h6{font-weight: bold; color:#f37b24;}
/*====E:页面提示============================================================*/


/*====B:图片展示列表 ============================================================*/
.card-img{height: 250px;}
.card-img img{height: 100%; width: 100%; object-fit: cover; border:1px dashed #aaa; border-radius: 10px;}
.card-img img:hover{cursor: pointer;}
/*====E:图片展示列表============================================================*/