/* 本主题的布局 */

html{ height:100%; min-height:100%; }
body{ height:100%; font-family:arial, microsoft yahei; color:#555; font-size:14px; background:#f5f5f5 !important; overflow:hidden}
a{ color:#333}
a:hover{ color:#0095db}
*:focus{ outline:none !important}
ul, li, dd, dt{ list-style:none}
p, ul, li{ margin:0; padding:0}

/*====B:两侧布局============================================*/

.body-main{display: flex;}
.side-left{display: flex;flex-direction: column; justify-content: space-between; width: 200px; background: #2d323e; overflow: hidden; box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12); -webkit-transition: all .3s cubic-bezier(.55,0,.55,.2), width .1s linear, min-width .1s linear, max-width .1s linear; transition: all .3s cubic-bezier(.55,0,.55,.2), width .1s linear, min-width .1s linear, max-width .1s linear; overflow-y: auto;}
.side-left .logo{background-color: #e7f4ff;}
.side-left .logo img{display: block;margin: 0 auto;}
.side-left .logo .sys-name{text-align: center;font-size: 26px;font-weight: bold;color:#039be5;text-shadow: 0px 0px 6px #98dcff;}

.side-left .menu{flex:1}
.side-left ul li{overflow: hidden }
.side-left ul span{vertical-align: middle}

/* 一级菜单 */
.side-left .main-menu { display: block; height: 40px; line-height: 40px; color: #b8b9be; overflow: hidden; position: relative; padding: 0 20px; cursor: pointer }
.side-left .main-menu i { margin-right: 10px; opacity: .5 }
.side-left .main-menu.item{display: block; color: #b8b9be;}
.side-left .main-menu.item a{color:#fff;}
.side-left .main-menu.item.active{ background-color: #309cd1; color: #fff !important; font-weight: bold}

.side-left .main-menu.active i { opacity: 1; }
.side-left .main-menu .fa-angle-right { position: absolute; right: 0; top: 50%; margin-top: -8px; -webkit-transition: -webkit-transform .3s ease-in-out .1s; transition: transform .3s ease-in-out .1s; -webkit-transform: rotate(0); transform: rotate(0) }
.side-left .main-menu:hover { color: #fff; font-weight: bold }
.side-left .main-menu.active { background-color: #2d323e; font-weight: bold; color: #fff; }
.side-left .main-menu.active .fa-angle-right { -webkit-transform: rotate(90deg); transform: rotate(90deg) }
/*二级菜单*/
.side-left .sub-menu { display: none; /*background:#282c37;*/ position: relative; padding-bottom: 10px }
.side-left .sub-menu .title { display: none }
.side-left .sub-menu .item { display: block; padding: 10px 20px 10px 46px; color: #b8b9be; font-size: 13px; cursor: pointer; position: relative }
/* .side-left .sub-menu .item span { border-bottom: 1px dashed #fff; width: 20px; position: absolute; top: 20px; left: 28px; opacity: .3 } */
.side-left .sub-menu .item.active { background-color: #309cd1; color: #fff; font-weight: bold }
.side-left .sub-menu .line { position: absolute; top: -8px; bottom: 30px; border-left: 1px dashed #fff; left: 28px; z-index: 999; opacity: .3 }

/* 收缩 */
.side-left-shrink{width: 56px;}
/* .side-left-shrink:hover{width: 200px;} */

.side-left .user-info{border-top: 1px solid #4f4f4f;display: flex;justify-items: center;}
.side-left .user-info .avatar{padding: 4px 0 2px 6px;}
.side-left .user-info .avatar img{display: block;border-radius: 50%;height: 40px;}
.side-left .user-info .dropdown-content{left:56px !important;width: auto !important;}
.side-left .user-info .dropdown-content li>a{color: #666;text-align: center;font-size: 1rem;}
.side-left .user-info .user-name{flex:1;padding-left: 10px;line-height: 46px;color: #b8b9be;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

.side-right{ flex:1;}
.side-right .iframe-main { width: 100%; height: 100%; overflow: hidden }
/*====E:两侧布局============================================*/


/*====B:page============================================*/
/* 广告背景 */
.page-banner{ height:160px; width:100%;  background:url(images/header-bg.png) #1e95d4; background-size:cover;  color:#fff; position:absolute; top:0; left:0}
.page{flex-direction: column; display: flex;height:100%;position: relative;}
/* 顶部工具栏 */
.page-top{ padding: 30px;display: flex;justify-content:space-between; }
.page-top h6.title{ color:#fff; font-size:1.5rem; font-weight:bold; margin-top:6px}
.page-top .input-field{margin-bottom:auto; margin-top:auto;}
.page-top .input-field input{ margin-bottom:0 !important; color:#fff;border-bottom: 1px solid #ddd;}
.page-top .input-field label{ color:#fff; opacity:.7}
/*主体*/
.page-body{flex:1;}
.page-body.shadow{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);}
.page-body.margin{margin-left: 30px;margin-right: 30px;}


/* 底部工具栏 分页栏 */
.page-bottom{position: fixed;left:30px;right:30px;bottom:0;height:64px;padding:15px;border-top: 1px solid #ddd;background: #fff;display:flex;align-items:center;z-index: 10;}
.page-bottom .info { flex:1;}
.page-bottom .pagination li a { font-size: 12px; }
.page-bottom .pagination li a:hover{background-color:#3eaeeb; color:#fff;font-weight: bold;}
.page-bottom .pagination li.active { background: #1e95d4;font-weight: bold;}
.page-bottom .pagination li.disabled a:hover{background-color: #fff; color: #bbbbbb;}

/*====E:page============================================*/


/*====B:button============================================*/
.btn{ background:linear-gradient(to right, #2ea1dd, #38b2f2); position:relative; overflow:hidden;z-index: 0;text-decoration: none !important;margin: 0 2px;}
.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, #2a8cbf, #2a8cbf); color:#fff; box-shadow:0px 0px 10px rgba(0, 0, 0, 0.5);font-weight: bold;}
.btn:hover:before{ left:100%}
.btn i{font-size: 0.9rem;margin-right: 4px;}
/*====E:button============================================*/


/*====B:table============================================*/
table a{color:#039be5;}
table a:hover{font-weight: bold;text-decoration: underline;}
table.pagination{margin-bottom: 64px;}  /*分页栏，必须要加*/

table.default th,table td{vertical-align:middle;text-align: center;border-radius: 0;height: 3rem;}
table.default td{padding:5px 5px;}

table.default thead{vertical-align:bottom;text-align: center;border-bottom: 2px solid #bbb;background: #f5f5f5;}
table.default tbody tr:hover{ background-color: #e4f1fd !important}
table.default tbody tr:nth-of-type(odd){background-color: #f9f9f9;}
table.default tbody tr:last-child{border-bottom: 0px;}
/*====E:table============================================*/


/*====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: 5; }
.search-toolbar .search-box .row{margin-bottom: 20px;}
.search-toolbar .search-box .input-field > label { top: 1px; }
/* .search-toolbar .search-box .input-field { margin-bottom: 24px; }
.search-toolbar .search-box .input-field > input[type=text] { height: 2.2rem; width: 180px; } */
/* .search-toolbar .btn-action { } */
/*====E:列表页面 折叠查询栏=========================================*/



/*====B:详情页、编辑页============================================*/
.details-header{padding:20px 30px;color:#fff;;background:url(images/header-bg.png) #1e95d4; background-size:cover;position: relative;;z-index: 2;}
.details-header h6{font-weight: bold;font-size:1.25rem;}
.details-header .title{font-size: 18px;text-align: center;}
.details-header .title h4{font-weight: bold;}

.details-header-menu {padding: 20px 30px 0px 30px;color: #fff;background: url(images/header-bg.png) #1e95d4;background-size: cover;}
.details-header-menu h5{font-weight: 600;}
.details-header-menu .description{margin-bottom: 20px;}

.details-header-menu .tab {background: #0d7cb3;}
.details-header-menu .tab a {color: #fff;}
.details-header-menu .tab a.active {color: #0095db;font-weight: bold;background: #f5f5f5 !important;}
.details-header-menu .indicator {bottom: initial;top: 0px;height: 3px;background: #ff8400}

.details-header .btn-floating{position:absolute;top:30px;right:20px;}

.details-info{background: #fff;padding: 10px 30px;border-bottom: 1px solid #eee;box-shadow: 0 1px 20px 0 rgb(0 0 0 / 20%);}

/* ul tab 样式 */
.details-info-tabs{text-align: center;line-height: 14px;}
.details-info-tabs li{display: inline-block;padding:0 12px;border-right: 1px solid #ddd;}
.details-info-tabs li:last-child{border: none}

/*====E:详情页、编辑页============================================*/

/*====B:登录页面=========================================*/
.login-bg { background: linear-gradient(to bottom, #1e95d4, #23acf4) !important; display: table; width: 100% }
.login-bg2 { display: table; width: 100%; height: 100%; position: relative; }
.login-container { display: table-cell; vertical-align: middle }
.login { max-width: 350px; background: #fff; padding: 40px; margin: 0 auto; box-shadow: 0 0 50px rgba(0,0,0,.15); border-radius: 20px }
.login .logo { text-align: center; margin: 0 auto; position: relative }
.login .version { position: absolute; top: 0; left: 70%; background: #40cf6c; color: #fff; font-size: 12px; padding: 0 4px; border-radius: 4px }
.login .title { text-align: center; font-size: 22px; font-weight: bold; color: #1e95d4; margin: 10px 0 20px; position: relative }
.form-login input { box-shadow: 0 0 0 50px #fff inset !important }
.form-login .btn { margin-top: 30px; width: 100%; }
.form-login .text-danger { color: #ffff00 }
.form-login .text-danger li { padding: 0 0 10px 10px }
.copyright { text-align: center; color: #fff; font-size: 12px; padding: 50px 0 25px }
/*====E:登录页面=========================================*/


/*====B:响应式设计============================================*/

.mobile-menu-btn {
    display: none;
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 1001;
    width: 44px;
    height: 44px;
    background: #2d323e;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 44px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

.mobile-menu-btn:hover {
    background: #309cd1;
    transform: scale(1.1);
}

.mobile-menu-btn i {
    font-size: 20px;
}

/* .mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-overlay.active {
    opacity: 1;
} */

/* @media screen and (max-width: 1200px) {
    .page-body .main { margin: 0 15px; }
    .page-bottom { left: 15px; right: 15px; }
} */

@media screen and (max-width: 992px) {
    .mobile-menu-btn { display: block; }
    .mobile-overlay { display: block; }
    .mobile-overlay.active { display: block; }
    
    .side-left { position: fixed; left: -200px; top: 0; bottom: 0; z-index: 1000; transition: left 0.3s ease; }
    .side-left.active { left: 0; }
    .side-left-shrink { left: -56px; }
    .side-left-shrink.active { left: 0; }
    
    .side-right { margin-left: 0; }
    
    .page-body .main { margin: 0 10px; }
    .page-bottom { left: 10px; right: 10px; }

    
    .details-header { padding: 15px; }
    .details-header-menu { padding: 15px; }
    .details-info { padding: 10px 15px; }
    
    table.default th, table.default td { padding: 5px 3px; font-size: 13px; }
    .td-action { min-width: 100px; }
    
    .panel-middle { margin: 0 10px 10px; }
    .panel-middle .case { padding: 10px 15px; }
    .panel-middle .case h5 { font-size: 1rem; }
    .panel-middle .case .box .item .num { font-size: 28px; }
    
    .side-left .logo .sys-name { display: none; }
    .side-left.active .logo .sys-name { display: block; }
    .side-left .user-info .user-name { display: none; }
    .side-left.active .user-info .user-name { display: block; }
}

@media screen and (max-width: 768px) {
    /* body { font-size: 13px; } */
    
    .page-top { flex-direction: column; gap:1rem; }

    .side-left { width: 200px; left: -200px; }
    .side-left.active { left: 0; }
    
    .side-left .logo .sys-name { font-size: 20px; }
    .side-left .main-menu { padding: 0 15px; }
    .side-left .sub-menu .item { padding: 8px 15px 8px 40px; }
    
    .page-body .main { margin: 0 5px; }
    .page-bottom { left: 5px; right: 5px; height: auto; padding: 10px; flex-wrap: wrap; }
    .page-bottom .info { width: 100%; text-align: center; margin-bottom: 10px; }
    .page-bottom .pagination { justify-content: center; }
    
    /* .page-top { padding: 10px; }
    .page-top h6.title { font-size: 1rem; } */
    
    .details-header { padding: 10px; }
    .details-header h6 { font-size: 1rem; }
    .details-header .title h4 { font-size: 1.2rem; }
    
    .details-header-menu { padding: 10px; }
    .details-header-menu h6 { font-size: 1rem; }
    
    .details-info { padding: 5px 10px; }
    
    table.default th, table.default td { padding: 3px 2px; font-size: 12px; }
    table.default th, table.default td { height: 2.5rem; }
    .td-action { min-width: 80px; }
    .td-action .btn { padding: 0 8px; font-size: 12px; }
    
    .panel-middle { flex-direction: column; margin: 0 5px 5px; }
    .panel-middle .side-left { margin-right: 0; margin-bottom: 5px; }
    .panel-middle .case { padding: 10px; }
    .panel-middle .case h5 { font-size: 0.9rem; }
    .panel-middle .case .box { flex-direction: column; }
    .panel-middle .case .box .item { padding: 5px 0; }
    .panel-middle .case .box .item .num { font-size: 24px; }
    
    .flow-step-items { flex-direction: column; }
    .flow-step-items .step { width: 100%; padding: 5px; }
    .flow-step-items .title { width: 100%; padding: 5px; }
    .flow-step-items .content { border-left: 2px dotted #ccc; border-top: none; }
    
    .flow-step-items2 { flex-direction: column; }
    .flow-step-items2 .step { width: 100%; border-bottom: 1px solid #ccc; }
    .flow-step-items2 .content { border-top: none; }
    
    
    .search-toolbar .search-box { width: 200px; padding: 20px 15px 15px; }
}

@media screen and (max-width: 480px) {
    /* body { font-size: 12px; } */
 
    /* 全局 */
    .container{width: 100%;}
    .page{overflow-y: auto;}
    .panel.shadow{margin: 0 !important;}
    /* .scrollbar{overflow-y: initial !important;} */

    /* 头部 & banner */
    .page-top{background: url(images/header-bg.png) #1e95d4;background-size: cover; text-align: center;margin: 0;width: auto;} 
    .page-top .input-field{margin: bottom 1rem;;margin-top:1rem;}
    .form-inline{display: flex;flex-direction: column;gap:1rem;}

    /* 主要内容 */
    .page-body{overflow-x: hidden;}
    .page-body.margin{margin:0;}

    /* 侧边栏 */
    .side-left { width: 200px; }
    .side-left .logo .sys-name { font-size: 16px; }
    .side-left .main-menu { padding: 0 10px; }
    .side-left .main-menu i { margin-right: 5px; }
    .side-left .sub-menu .item { padding: 6px 10px 6px 35px; font-size: 12px; }
    .side-left .user-info .user-name { font-size: 12px; }
    
    

    table.default th, table.default td { padding: 2px 1px; font-size: 11px; }
    table.default th, table.default td { height: 2rem; }
    .td-action { min-width: 60px; }
    .td-action .btn { padding: 0 5px; font-size: 11px; }
    
    
    .panel-middle .case { padding: 8px; }
    .panel-middle .case h5 { font-size: 0.8rem; }
    .panel-middle .case .box .item .num { font-size: 20px; }
    
    
    .search-toolbar .search-box { width: 180px; padding: 15px 10px 10px; }
    .search-toolbar .search-box .row { margin-bottom: 15px; }
    
    .card-img { height: 180px; }
    .card .card-image.small { height: 180px; }
    .card .card-image.medium { height: 220px; }
    .card .card-image.large { height: 280px; }
}



/*====E:响应式设计============================================*/