@font-face { font-family: 'Agency FB'; src: url('font/Agency FB.eot'); src: url('font/Agency FB.eot?#iefix') format('embedded-opentype'), url('font/Agency FB.woff') format('woff'), url('font/Agency FB.ttf') format('truetype'), url('font/Agency FB.svg#alibaba_puhuitiregular') format('svg'); font-weight: normal; font-style: normal; }

/*====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: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 }
.border-purple { border-color: #9c27b0 !important; }

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


/*====B:margin padding=============================*/
.mar { margin: 30px !important }
.mar-10 { margin: 10px !important; }
.mar-20 { margin: 20px !important; }
.mar-30 { margin: 30px !important; }
.mar-l10 { margin-left: 10px !important }
.mar-l20 { margin-left: 20px !important }
.mar-l30 { margin-left: 30px !important }
.mar-r10 { margin-right: 10px !important }
.mar-r20 { margin-right: 20px !important }
.mar-r30 { margin-right: 30px !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-30 { padding: 30px !important; }
.pad-l10 { padding-left: 10px !important }
.pad-l20 { padding-left: 20px !important }
.pad-l30 { padding-left: 30px !important }
.pad-r10 { padding-right: 10px !important }
.pad-r20 { padding-right: 20px !important }
.pad-r30 { padding-right: 30px !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由layout.css 定义，主按钮。本处只定义颜色 */
/* .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-white { background: #fff; color: #1e95d4; box-shadow: 0 2px 10px rgba(0,0,0,0.15); border: 1px solid #0095db; }
.btn-white:hover,
.btn-white:focus { background: #eef2f5; color: #0087ce; box-shadow: 0 2px 10px rgba(102,102,102,0.5) }

/* 红色按钮 */
.btn-red { background: linear-gradient(to right, #D32F2F, #E53935) }
.btn-red:hover { background: linear-gradient(to right, #B71C1C, #D32F2F); box-shadow: 0 4px 12px rgba(244, 67, 54, 0.4); }

/* 紫色按钮 */
.btn-purple { background: linear-gradient(to right, #943bb9, #da4dff) }
.btn-purple:hover { background: linear-gradient(to right, #8630aa, #943bb9); box-shadow: 0 4px 12px rgba(156, 39, 176, 0.4); }

/*橙色按钮*/
.btn-orange { background: linear-gradient(to right, #ef6c00, #f57c00) }
.btn-orange:hover { background: linear-gradient(to right, #e65100, #ef6c00);box-shadow: 0 4px 12px rgba(255, 87, 34, 0.4);}

/*绿色按钮*/
.btn-green { background: linear-gradient(to right, #24ad57, #2add6c) }
.btn-green:hover { background: linear-gradient(to right, #20af55, #2fc165);box-shadow: 0 4px 12px rgba(64, 207, 108, 0.4);}

/*灰色按钮*/
.btn-gray { background: linear-gradient(to right, #4e4e4e, #858585) }
.btn-gray:hover { background: linear-gradient(to right, #3f3f3f, #686868); box-shadow: 0 4px 12px rgba(158, 158, 158, 0.4); }

/* 蓝色按钮 */
.btn-blue { background: linear-gradient(to right, #1e95d4, #23acf4) }
.btn-blue:hover { background: linear-gradient(to right, #0288d1, #039be5);box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);}

/* 深蓝按钮 */
.btn-blue-deep { background: linear-gradient(to right, #1366bb, #2683df) }
.btn-blue-deep:hover { background: linear-gradient(to right, #12569b, #2a77c5);box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);}

/* 透明按钮 */
.btn-transparent { background: transparent; color: #666666; }
.btn-transparent:hover { background: transparent; color: #3a3a3a; }


/* 浮动按钮 */
.btn-floating{ width: 40px; height: 40px; line-height: 40px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.btn-floating:hover{ transform: scale(1.1) rotate(90deg); }

/*====E:btn 按钮 ==================================*/

/*====B:标签=========================================*/
.tag { display: inline-block; padding: 4px 8px; }
.tag.mini { padding: 0px 4px; font-size: 0.8rem }
.tag-color-blue { color: #2a6fd5; border: solid 1px #2a6fd5; }
.tag-color-blue:hover { box-shadow: 0 2px 8px rgba(42,111,213,0.3); }
.tag-color-red { color: #e44036; border: solid 1px #e44036; }
.tag-color-red:hover { box-shadow: 0 2px 8px rgba(228,64,54,0.3); }
.tag-color-purple { color: #b200ff; border: solid 1px #b200ff; }
.tag-color-purple:hover { box-shadow: 0 2px 8px rgba(178,0,255,0.3); }
.tag-color-green { color: #3db682; border: solid 1px #3db682; }
.tag-color-green:hover { box-shadow: 0 2px 8px rgba(61,182,130,0.3); }
.tag-color-pink { color: #ff00dc; border: solid 1px #ff00dc; }
.tag-color-pink:hover { box-shadow: 0 2px 8px rgba(255,0,220,0.3); }
.tag-color-orange { color: #ff9800; border: solid 1px #ff9800; }
.tag-color-orange:hover { box-shadow: 0 2px 8px rgba(255,152,0,0.3); }
.tag-color-gray { color: #4e4e4e; border: solid 1px #4e4e4e; }
.tag-color-gray:hover { box-shadow: 0 2px 8px rgba(78,78,78,0.3); }
.tag-color-yellow { color: #ffeb3b; border: solid 1px #ffeb3b; }
.tag-color-yellow:hover { box-shadow: 0 2px 8px rgba(255,235,59,0.3); }


.label { display: inline-block; padding: 4px 12px; font-size: 0.9rem; font-weight: 500; transition: all 0.3s ease; }
.label.mini { padding: 2px 6px; font-size: 0.8rem }
.label-color-blue { background-color: rgba(42,111,213,0.1); color: #2a6fd5; border: 1px solid rgba(42,111,213,0.3); }
.label-color-blue:hover { background-color: rgba(42,111,213,0.2); box-shadow: 0 2px 8px rgba(42,111,213,0.3); }
.label-color-red { background-color: rgba(228,64,54,0.1); color: #e44036; border: 1px solid rgba(228,64,54,0.3); }
.label-color-red:hover { background-color: rgba(228,64,54,0.2); box-shadow: 0 2px 8px rgba(228,64,54,0.3); }
.label-color-purple { background-color: rgba(178,0,255,0.1); color: #b200ff; border: 1px solid rgba(178,0,255,0.3); }
.label-color-purple:hover { background-color: rgba(178,0,255,0.2); box-shadow: 0 2px 8px rgba(178,0,255,0.3); }
.label-color-green { background-color: rgba(61,182,130,0.1); color: #3db682; border: 1px solid rgba(61,182,130,0.3); }
.label-color-green:hover { background-color: rgba(61,182,130,0.2); box-shadow: 0 2px 8px rgba(61,182,130,0.3); }
.label-color-pink { background-color: rgba(255,0,220,0.1); color: #ff00dc; border: 1px solid rgba(255,0,220,0.3); }
.label-color-pink:hover { background-color: rgba(255,0,220,0.2); box-shadow: 0 2px 8px rgba(255,0,220,0.3); }
.label-color-orange { background-color: rgba(255,152,0,0.1); color: #ff9800; border: 1px solid rgba(255,152,0,0.3); }
.label-color-orange:hover { background-color: rgba(255,152,0,0.2); box-shadow: 0 2px 8px rgba(255,152,0,0.3); }
.label-color-gray { background-color: rgba(78,78,78,0.1); color: #4e4e4e; border: 1px solid rgba(78,78,78,0.3); }
.label-color-gray:hover { background-color: rgba(78,78,78,0.2); box-shadow: 0 2px 8px rgba(78,78,78,0.3); }
.label-color-yellow { background-color: rgba(255,235,59,0.1); color: #ffeb3b; border: 1px solid rgba(255,235,59,0.3); }
.label-color-yellow:hover { background-color: rgba(255,235,59,0.2); box-shadow: 0 2px 8px rgba(255,235,59,0.3); }

.chip.mini { padding: 1px 6px 2px 6px; font-size: 0.85rem; height: initial; line-height: initial; }


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

/*====B:页面提示 ============================================================*/
.tip { border: 1px #FFB951 dashed; padding: 5px 10px; border-radius: 10px; }
.tip h6 { font-weight: bold; color: #f37b24; }
/*====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 } */

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

/* fixed 固定表头，固定第一列 */
table.fixed-header > thead { position: sticky; top: 0px; z-index: 3; }
table.fixed-colmun td:first-child { position: sticky; left: 0px; background: #eee; z-index: 3; }

/*无边框*/
table.nobordered tr,
table.nobordered td { border: none }
/*全边框*/
table.bordered th,
table.bordered td { border: 1px solid #ddd }

/* 列边框 */
table.bordered-colunm tr { border-bottom: none }
table.bordered-colunm tr td { border-left: 1px solid #ddd }
table.bordered-colunm tr th:first-child, table.bordered-colunm tr td:first-child { border-left: none }
table.bordered-colunm tr th:last-child, table.bordered-colunm tr td:last-child { border-right: none }
/* table.bordered-colunm tbody tr:nth-child(even) { background: rgba(0,0,0,.02) } */

/* 行边框 */
/* table.bordered-row tr td{border-bottom: 1px solid #ddd;} */
table.bordered-row tr td { border-bottom: 1px solid rgba(0,0,0,0.12) }
table.bordered-row tr:last-child td { border-bottom: none; }

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

/*全局对齐方式*/
table.left th, table.left td { text-align: left; }
table.right th, table.right td { text-align: right; }
table.center th, table.center td { text-align: center; }

/* 其它 */
.td-title { font-weight: bold; text-align: right !important; }
.td-title.w4 { width: 80px; }
.td-title.w6 { width: 100px; }
.td-title.w8 { width: 120px }

.td-left { text-align: left !important; }
.td-right { text-align: right !important; }
.td-center { text-align: center !important; }


.td-avatar img { width: 40px; border-radius: 50%; }
.td-action { min-width: 160px }
.td-action .btn { margin: 0 2px }

/*====E:table=======================================*/


/*====B:btn-circle-list table 列表页面 折叠菜单 =============================*/

.btn-circle-list { display: inline-block; transition: all 0.3s ease; }
.btn-circle-list:hover { transform: scale(1.05); }
.btn-circle-list i.fa-bars { display: inline-block; width: 36px; height: 36px; line-height: 36px; text-align: center; color: #666; cursor: pointer; transition: all 0.3s ease; }
.btn-circle-list:hover i.fa-bars { background: linear-gradient(to right, #2ea1dd, #38b2f2); color: #fff; border-radius: 2px; box-shadow: 0 4px 12px rgba(0,102,204,0.4); }

.btn-circle-list ul { position: absolute; top: 0; right: 36px;  width: 140px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.15); background-color: #fff; opacity: 0; visibility: hidden; transform: translateY(-10px) scale(0.95); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 1000; }
.btn-circle-list:hover ul { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.btn-circle-list ul:before { content: ''; position: absolute; opacity: 0; transition: all 0.4s ease; transform: translateY(-5px); }
.btn-circle-list:hover ul:before { opacity: 1; transform: translateY(0); }
.btn-circle-list ul li { transition: all 0.3s ease; border-bottom: 1px solid #f0f0f0; opacity: 0; transform: translateX(30px) scale(0.9); }
.btn-circle-list:hover ul li { animation: slideInItem 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.btn-circle-list ul li:last-child { border-bottom: none; }

.btn-circle-list ul a { display: flex; align-items: center; padding: 12px 20px !important; font-size: 0.95rem; color: #555; transition: all 0.3s ease; }
.btn-circle-list ul a:hover { color: #171717; padding-left: 24px !important; background-color: rgba(0, 102, 204, 0.08); }
.btn-circle-list ul a i { margin-right: 10px; font-size: 1rem; transition: all 0.3s ease; }
.btn-circle-list ul a:hover i { transform: scale(1.2); }

/* 为每个li元素添加不同的动画延迟 */
.btn-circle-list ul li:nth-child(1) { animation-delay: 0.1s; }
.btn-circle-list ul li:nth-child(2) { animation-delay: 0.2s; }
.btn-circle-list ul li:nth-child(3) { animation-delay: 0.3s; }
.btn-circle-list ul li:nth-child(4) { animation-delay: 0.4s; }
.btn-circle-list ul li:nth-child(5) { animation-delay: 0.5s; }
.btn-circle-list ul li:nth-child(6) { animation-delay: 0.6s; }

/* 滑入动画定义 */
@keyframes slideInItem {
    from { opacity: 0; transform: translateX(30px) scale(0.9); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

/*====E:btn-circle-list 列表页面 折叠菜单 =============================*/


/*.panel { overflow: hidden; }*/
.panel.shadow { margin-left: 20px; margin-right: 20px; box-shadow: 0 4px 5px -2px rgba(0,0,0,.2), 0 7px 10px 1px rgba(0,0,0,.14), 0 2px 16px 1px rgba(0,0,0,.12); }

/*====B:信息块 简单标题（组合不同的颜色）============================================================*/
.panel-header { border-left: 6px solid #ddd; padding-left: 10px; font-weight: bold; font-size: 1.1rem; margin-bottom: 0; }

/*====B:信息块 块外标题============================================================*/
.panel-outer-orange > .header { display: flex; margin-bottom: initial; }
.panel-outer-orange > .header > .title { background: #ed6a5e; color: #fff; padding: 10px 24px; font-weight: bold; font-size: 1.1rem; border-radius: 10px 10px 0 0; position: relative; }
.panel-outer-orange > .header > .title::after { background: radial-gradient(circle at 10px 0, transparent 10px,#ed6a5e 10px); content: ""; position: absolute; width: 10px; height: 10px; bottom: 0; right: -10px; }
.panel-outer-orange > .header > .toolbar { margin-bottom: initial; flex: 1; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-end; padding: inherit; }
.panel-outer-orange > .content { border: 2px solid #ed6a5e; border-radius: 0 15px 15px 15px; }

.panel-outer-blue > .header { display: flex; margin-bottom: initial; }
.panel-outer-blue > .header > .title { background: #03a9f4; color: #fff; padding: 10px 24px; font-weight: bold; font-size: 1.1rem; border-radius: 10px 10px 0 0; position: relative; }
.panel-outer-blue > .header > .title::after { background: radial-gradient(circle at 10px 0, transparent 10px,#03a9f4 10px); content: ""; position: absolute; width: 10px; height: 10px; bottom: 0; right: -10px; }
.panel-outer-blue > .header > .toolbar { margin-bottom: initial; flex: 1; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-end; padding: inherit; }
.panel-outer-blue > .content { border: 2px solid #03a9f4; border-radius: 0 15px 15px 15px; }

.panel-outer-cyan > .header { display: flex; margin-bottom: initial; }
.panel-outer-cyan > .header > .title { background: #00bcd4; color: #fff; padding: 10px 24px; font-weight: bold; font-size: 1.1rem; border-radius: 10px 10px 0 0; position: relative; }
.panel-outer-cyan > .header > .title::after { background: radial-gradient(circle at 10px 0, transparent 10px,#00bcd4 10px); content: ""; position: absolute; width: 10px; height: 10px; bottom: 0; right: -10px; }
.panel-outer-cyan > .header > .toolbar { margin-bottom: initial; flex: 1; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-end; padding: inherit; }
.panel-outer-cyan > .content { border: 2px solid #00bcd4; border-radius: 0 15px 15px 15px; }

.panel-outer-green > .header { display: flex; margin-bottom: initial; }
.panel-outer-green > .header > .title { background: #4CAF50; color: #fff; padding: 10px 24px; font-weight: bold; font-size: 1.1rem; border-radius: 10px 10px 0 0; position: relative; }
.panel-outer-green > .header > .title::after { background: radial-gradient(circle at 10px 0, transparent 10px,#4CAF50 10px); content: ""; position: absolute; width: 10px; height: 10px; bottom: 0; right: -10px; }
.panel-outer-green > .header > .toolbar { margin-bottom: initial; flex: 1; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-end; padding: inherit; }
.panel-outer-green > .content { border: 2px solid #4CAF50; border-radius: 0 15px 15px 15px; }

/*====E:信息块 块外标题============================================================*/

/*====B:信息块 块内标题============================================================*/
.panel-inner { border-radius: 8px; border: dashed 2px #404040; }
.panel-inner > .title { display: inline-block; font-size: 1.1rem; font-weight: bold; color: #fff; padding: 4px 16px; border-top-left-radius: 8px; border-bottom-right-radius: 8px; }
.panel-inner ul { margin-left: 24px; }
.panel-inner ul > li { list-style-type: circle !important; margin: 5px 0; }
/*====E:信息块 块内标题============================================================*/


/*====B:中部信息栏，统计汇总数字============================================================*/
.panel-middle { display: flex; margin: 0 1.5rem 1.5rem; font-family: 'Agency FB'; gap: 0.75rem; }
.panel-middle .flex-row { display: flex; flex: 1 }
.panel-middle .flex-auto { flex: auto !important; }

.panel-middle .bar { padding: 0 .75rem; background: #fff; padding: 20px; border-radius: 5px; box-shadow: 0px 10px 15px rgba(0,0,0,.1) }
.panel-middle .flex-row { display: flex; flex: 1 }

.panel-middle .item { flex: 1; text-align: center; border-right: 1px solid #eee; }
.panel-middle .item:last-child { border-right: initial }
.panel-middle .item span { color: #fff; font-size: 36px; font-weight: bold; display: inline-block; padding: 0 10px; margin-top: 5px; border-radius: 8px; }
.panel-middle .item p { margin-top: 5px; }
.panel-middle .item .unit { font-size: .8rem; padding: 0; }


.panel-middle .case.green { background: linear-gradient(to right,#18c699,#42ddb5); }
.panel-middle .case.yellow { background: linear-gradient(to right,#fbb644,#fdcb79); }
.panel-middle .case.red { background: linear-gradient(to right,#ff5c5c,#ff9f9f) }

.panel-middle .case { color: #fff; background: linear-gradient(to right,#34b5ea,#78d4f9); box-shadow: 0 0 20px rgba(53,181,254,0); margin: 0 10px; padding: 14px 20px; }
.panel-middle .case h5 { font-weight: bold; font-size: 1.2rem; margin: 0; }
.panel-middle .case .box { display: flex; margin-top: 6px; }
.panel-middle .case .box .item { flex: 1; padding: 0 20px; }
.panel-middle .case .box .item .num { font-size: 36px; font-weight: bold; letter-spacing: 2px; display: block; }
.panel-middle .case .box .item p { opacity: .9; }


/*====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; }

/* materialize 基础上  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; }
/*====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.1rem; }
.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:流程（二列）流程名称，内容============================================================*/
.flow-step-items2 { display: flex; flex-direction: row; flex-wrap: nowrap; margin: 10px 0; border: 1px #ccc dashed; border-radius: 5px; overflow: hidden; }
.flow-step-items2 i { margin: 0 0 0 10px; }
.flow-step-items2 i:first-child { margin-left: 0; }
.flow-step-items2 .step { text-align: center; align-content: center; font-weight: bold; width: 150px; }
.flow-step-items2 .content { flex: 1; padding: 10px; background-color: #fff; }
.flow-step-items2 .content > .comment { }
.flow-step-items2 .content > .comment ul { padding-left: 15px; margin-top: 5px; }
.flow-step-items2 .content > .comment ul li { list-style-type: circle !important; }
.flow-step-items2 .content > .comment ul li a { margin-left: 10px; color: #03a9f4; }
.flow-step-items2 .content > .comment ul li a:hover { font-weight: bold; }
.flow-step-items2 .content > .info { border-top: 1px dotted #4e4e4e; display: inline-block; padding-top: 5px; margin-top: 6px; color: #787878; }
/*====B:流程（二列）流程名称，内容============================================================*/

/*====B:流程列表============================================================*/
.flow-step-items3 { display: flex; flex-direction: row; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); margin-bottom: 20px; overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.flow-step-items3:hover { transform: translateX(5px); }
.flow-step-items3 .steps-column { width: 120px; border-right: 1px solid #e9ecef; background-color: #fafbfc; display: flex; align-items: center; justify-content: center; }
.flow-step-items3 .steps-column .step { display: flex; flex-direction: column; align-items: center; font-size: 1.1rem; }
.flow-step-items3 .steps-column .step .step-number { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background-color: #007bff; color: #fff; font-size: 14px; margin-bottom: 5px; }
.flow-step-items3 .content-column { flex: 1; padding: 20px; }

.flow-step-items3 .content-column .content-info i { margin-right: 8px; }
.flow-step-items3 .content-column .content-info .item-user { color: #555 }
.flow-step-items3 .content-column .content-info .item-coment { font-weight: 700; color: #292929 }
.flow-step-items3 .content-column .content-info .item-time { color: #969696; }
.flow-step-items3 .content-column .content-info .user-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin-bottom: 12px; }
.flow-step-items3 .content-column .content-info .user-row .user-item { display: flex; align-items: center; }
.flow-step-items3 .content-column .content-info .comment-row { display: flex; align-items: baseline; }
.flow-step-items3 .content-column .attachment-list { list-style: none; border-top: 1px solid #e9ecef; margin-top: 8px; padding-left: 1rem; }
.flow-step-items3 .content-column .attachment-list .item { display: flex; gap: 4px; align-items: center; padding: 6px 0 0 0; transition: color 0.2s; }
.flow-step-items3 .content-column .attachment-list .attachment-btn { padding: 0 4px; background-color: #fff; color: #007bff; cursor: pointer; transition: all 0.2s; text-decoration: none; border-bottom: 1px solid #007bff; }
.flow-step-items3 .content-column .attachment-list .attachment-btn:hover { background-color: #007bff; color: #fff; border-radius: 4px; }
/*====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:项目显示，纯文字，============================================================*/
.items-text { display: flex; margin: 5px; border-radius: 10px; border: 1px solid #ccc; background-color: #fff; height: 50px; }
.items-text .item { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 10px; border-right: 1px solid #ccc; }
.items-text .item:last-child { border-right: initial }
/*====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:附件文件列表============================================================*/
/* materialize 基础上，Collections 集体项目（常用于附件列表） */
.collection-item { display: flex; flex-direction: row; }
.collection-item span { flex: 1; }
.collection-item a { margin-left: 12px; }
.collection-item a:hover { font-weight: bold; }
.collection-item i { margin-right: 3px; }
/*====E:附件文件列表============================================================*/


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

/*字段验证-不通过，红色*/
.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; }
.field-validation-error { color: #F44336; }

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

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

























/* 以下是旧的，要删除 */









/**====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; width:90px;font-size:1.1rem;} */

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

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


.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 富文本编辑器========================================*/