@font-face {font-family: "iconfont"; src: url('../../css/fonts/iconfont.woff') format('woff');}
@font-face {font-family: "iconfont2"; src: url('../../css/fonts1/iconfont.woff') format('woff');}
@font-face {font-family: "iconfont1"; src: url('../../css/fonts/iconfont1.woff') format('woff');}
.symbol{font-family:"iconfont" !important; font-style:normal;}
.iconfont{font-family: "iconfont1" !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;}
	.iconfont2{font-family: "iconfont2" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;}

html{height: 100%;}
body{ height: 100%; margin: 0; font-family: "microsoft yahei"; padding:0; font-size: 12px; 
 display: flex; flex-direction:column; overflow: auto;}


header{width: 100%; height: 73px;flex-shrink: 0; background:#1f4f7b;  display: flex;position: relative; }
header::after{width: 100%; height: 3px; content: ""; position: absolute; left: 0; bottom: 0; background: #8eb2d4;}
header .logo{ width: 240px; border-right: 1px solid #113e67;  padding-left: 10px; padding-top: 10px;  }
header .menuList{ padding-bottom: 2px; flex: 1; color: #fff; overflow: hidden;   position: relative; z-index: 1; user-select: none; }
header .menuList .inner{width: 9999px; height:70px; left: 0; top: 0; transition: left .2s; position: absolute; z-index: 3; }

header .menuList .item{ width: 90px; height: 70px;  font-size: 14px; padding:0 3px;  border-right: 1px solid #113e67; 
 background: #1f4f7b; cursor: pointer; position: relative; float: left;}
header .menuList .item i{width: 100%;  height: 28px; padding-top:8px; line-height: 28px; font-family:"iconfont2","iconfont"!important; font-style:normal;
text-align: center; font-size: 24px; display: block; float: left;  }
header .menuList .item span{width: 100%; line-height:14px; margin-top: 3px; text-align:center; display: block; float: left;}
header .menuList .item s{width: 10px; height: 10px; border-radius: 50%; position: absolute; right: 24px; top: 8px; background:#f93636;}
header .menuList .item:hover{background:#275b8b;}
header .menuList .item.on{height: 68px; background: #05335d; border-bottom: 5px solid #ccc; color: #fff; }
header .menuListctrl{width: 37px;  padding:0 100px 0 10px; display: none;  }
header .menuListctrl .outpanel{margin:20px 0;  border-radius: 50%; overflow: hidden;}
header .menuListctrl .ctrlItem{ height: 30px; font-size: 14px; padding:0 2px; line-height: 30px; font-family:"iconfont2","iconfont";
text-align:center; background: #104575;  color: #6f879c; cursor:pointer; user-select: none; float: left;} 
header .menuListctrl .ctrlItem:hover{background: #0a3c69; color: #b0c5d8;}
header .menuListctrl .ctrlItem.cleft{border-right: 1px solid #3e5971;}
header .menuListctrl .ctrlItem.disable{background: #3b668e; color: #24598a; cursor: not-allowed;}


header .userbox{ margin: 5px 0; color: #fff; float: right; }
header .userbox .groupName{width: 100%; height: 30px;  line-height: 30px; font-size: 16px; text-align:right; color: #aaa;}
header .userbox .groupName span{padding-right:10px;}
header .userbox .infobox{float:right;}
header .userbox .item{line-height: 24px; padding: 0 12px;  color: #fff; border-left: 1px solid #366188;
 border-right: 1px solid #193f62; text-align:center; display: inline-block; cursor: pointer; float: left;}
header .userbox .item i{font-size: 14px; }
header .userbox .item span{padding: 0 2px; }
#divUserInfo{border-left: none;}
header .userbox .item.logout{border-right: none;}


section{flex: 1;   display: flex;height: 100%;overflow: hidden;}
section .left{width: 250px; height:100%;border-right: #e5e5e5 1px solid; position: relative;}
section #divSecMenuList{width: 100%; height: 100%; padding-bottom:40px; box-sizing: border-box;  background: #eeeeee;  overflow: auto; overflow-x: hidden; position: relative;}
section #divWorkflowList{width: 100%; height: 100%; padding-bottom:40px; box-sizing: border-box; 
  overflow: auto; overflow-x: hidden; display:none; position: relative;}

section .left .firstTitle{ height: 50px; font-size: 16px; line-height: 50px; border-bottom: 1px solid #ccc;
 background: #cacaca; display: flex; color: #000;}
section .left .firstTitle i{width: 30px; padding-left: 10px; font-size: 20px; text-align:center; font-family:"iconfont2","iconfont" !important; font-style:normal;}
section .left .firstTitle span{flex:1;}

section .left .li{width: 100%;  height: 48px; font-size: 14px;  border-bottom: 1px solid #e5e5e5; overflow: hidden; }
section .left .li .maintitle{padding: 0 10px 0 10px; border-left: 5px solid #eeeeee; font-weight: bold; color: #1f4f7b; overflow: hidden; cursor: pointer; position:relative; }
section .left .li .maintitle:hover{background:#e8e8e8;}
section .left .li .childs{overflow: hidden;}
section .left .li .childs .item{ height: 42px; line-height: 42px; border-top: 1px solid #e5e5e5; padding: 0 10px 0 45px; color: #676767; cursor: pointer;}
/* section .left .li .childs .item d{ 
	 min-width: 12px; height: 12px; line-height: 12px;   display: inline-block; padding: 2px 2px; border-radius: 12px; color: #fff; font-size: 12px;  
	  background:  red; transform: translate(-1px,-4px); text-align:center;
 } */
 section .left .li .childs .item d{ 
	min-width: 4px; height: 4px; line-height: 4px;   display: inline-block; padding: 2px 2px; border-radius: 12px; color: #fff; font-size: 12px;  
	 background:  red; transform: translate(-1px,-4px); text-align:center;
}
section .left .li .childs .item:hover{background:#e8e8e8; }
section .left .li .childs .item.on{background: #d0cfcf;}
section .left .li .icon{width: 20px; height: 48px;  line-height: 48px; text-align:center; font-family:"iconfont2","iconfont" !important; font-style:normal;
font-size: 20px; font-weight: normal; display: inline-block; float: left;}
section .left .li .text{height: 48px; margin-left: 10px;  line-height: 48px; float: left;}
section .left .li .arrow{width: 6px; height: 6px;   margin-top: 18px; border-top: 1px solid #1f4f7b; border-right:1px solid #1f4f7b;
 transform: rotate(45deg); float: right;}
section .left .li .maintitle .todo{width: 10px; height: 10px; border-radius: 50%; position: absolute; left: 30px; top: 9px; background:#f93636;}

section .left .li.on{height: auto;}
section .left .li.on .maintitle{background: #1f4f7b; padding-left:10px; border-left: 5px solid #2f76b7; color: #fff;}
section .left .li.on .arrow{transform: rotate(135deg); border-color: #fff;}
section .left .menuBtnpanel{width: 100%; height:40px; padding-left:10px; box-sizing: border-box; background:#14253b; position: absolute;
display:none; left: 0; bottom: 0; }
section .left .menuBtnpanel .btn{width: 30px; height: 30px; margin:5px 5px; font-size: 18px; line-height: 30px; color: #fff;
 font-family: "iconfont2","iconfont"; border-radius: 5px; cursor: pointer; text-align:center; float: left;}
section .left .menuBtnpanel .btn.on{background: #314867;}

section .right{flex: 1;  display:flex; flex-direction: column;}
section .right .tabs{width: 100%; height: 40px; font-size: 14px; background:#eeeeee; border-bottom: 1px solid #e5e5e5;}
section .right .tabs .item{ height:40px; line-height: 40px; padding: 1px 11px; cursor: pointer; float: left; }
section .right .tabs .item i{font-size: 16px;}
section .right .tabs .item span{padding: 0 3px;}
section .right .tabs .item b{width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%; display: inline-block;}
section .right .tabs .item b:hover{background: #1f4f7b; color: #fff;}

section .right .tabs .item.on{height: 39px; line-height: 39px; padding:0 10px; background: #fff;  
	font-weight: bold; border:1px solid #e5e5e5; border-bottom: 1px solid #fff;}

section .right .content{ flex:1; margin:5px; position: relative;}
section .right .content iframe{width: 100%; height: 100%;   left: 0; top: 0; position: absolute; overflow:hidden; }
section .right .content .mask{width: 100%; height: 100%; left: 0; top: 0; position: absolute; background:#fff; z-index: 999;}





footer{width: 100%; height: 40px; line-height: 40px; background: #1f4f7b;overflow: hidden;}
footer div{float: left;}
footer div:nth-child(2){
	float: right;color:#fff;
}
footer div span{
	display:inline-block;
	width: 50px;
	margin-left: 20px;
	height:30px;
	border-radius: 4px;
	margin-top:7px;
	color:#fff;
	text-align: center;
	line-height: 30px;
	position: relative;
	top:-2px;
	cursor: pointer;

}

footer div span.on{
	background:#033563;
	box-shadow:2px 2px 2px #14253b;
	transition:all ease .2s;
}
footer div span:hover{
	background:#033563;
	box-shadow:2px 2px 2px #14253b;
	transition:all ease .2s;
}






/*工作流樣式*/
#workflowContentPeson{margin:20px 0 10px 20px;}
.dtCls {
	height: 25px;
	text-align: center;
	color: #007c8b;
}
.dtCls span {
	font-size: 25px;
	font-weight: bold;
}
#workflowContentPeson span {
	display: block;
	font-size: 14px;
	margin-bottom: 10px;
}
.step {
	width: 158px;
	height: 26px; line-height:26px; white-space: nowrap;
	position: relative; overflow:hidden;
}
.currentNoControl {
	color: #000;
}
.currentNoControl a{
	text-decoration: none;
}
.step a {
	color: #3388cc;
	line-height: 26px;
	text-decoration: underline;
}
.stepG {
	width: 199px;
	position: relative;
}
.changeStepBg {
	background: #dadee4;
}
#workflowStart {
	position: absolute;
	width: 18px;
	height: 33px;
	margin: 3px 0 0 18px;
	cursor: pointer;
}
.workflowStartExpand {
	background: url(../../images/workflow/workflowStart.png) left top no-repeat;
}
.workflowStartCollaspe {
	background: url(../../images/workflow/workflowStartCollapse.png) left top no-repeat;
}
#workflowEnd {
	position: absolute;
	width: 18px;
	height: 26px;
	background: url(../../images/workflow/workflowEnd.png) left top no-repeat;
	margin-left: 19px;
}
#workflowEndOver {
	position: absolute;
	width: 18px;
	height: 26px;
	background: url(../../images/workflow/workflowEndOver.png) left top no-repeat;
	margin-left: 18px;
}
.stepDes {
	width:110px; 
	height: 26px;  text-overflow: ellipsis; overflow:hidden;
	line-height: 25px;
	position: absolute;
	left: 44px;
	cursor: default;
}
.stepDes a {
	display: block;
	height: 26px;
	line-height: 25px;
	float: left;
}
.currentTextBg {
	float: left;
}
.stepDes .right {
	width: 23px;
	height: 26px;
	float: left;
}
.currentStepbg {
	background: url(../../images/workflow/currentStepbg.png) 13px center no-repeat;
	height:22px;
}
.currentStepbg .stepDes{
	line-height:22px;
}
.currentStepbg .stepDes a{
	line-height:22px;
	color:#000;
	text-decoration: none;
}
.workflowPass {
	position: absolute;
	width: 12px;
	height: 12px;
	background: url(../../images/workflow/passStep.png) left top no-repeat;
	left: 20px;
	top: 8px;
}
.workflowCurrent {
	position: absolute;
	width: 11px;
	height: 16px;
	background: url(../../images/workflow/currentStep.png) left top no-repeat;
	left: 20px;
	top: 4px;
}
.passround {
	position: absolute;
	width: 12px;
	height: 26px;
	background: url(../../images/workflow/grayround.png) left top no-repeat;
	left: 23px;
}
.furtherround {
	position: absolute;
	width: 12px;
	height: 26px;
	background: url(../../images/workflow/furtherround.png) left top no-repeat;
	left: 23px;
}

.expandgraybtn {
	position: absolute;
	width: 18px;
	height: 48px;
	background: url(../../images/workflow/expandgraybtn.png) left top no-repeat;
	left: 18px;
	cursor: pointer;
}
.collapsegraybtn {
	position: absolute;
	width: 18px;
	height: 48px;
	background: url(../../images/workflow/collapsegraybtn.png) left top no-repeat;
	left: 18px;
	cursor: pointer;
}

.expandbtn {
	position: absolute;
	width: 18px;
	height: 48px;
	background: url(../../images/workflow/expandbtn.png) left top no-repeat;
	left: 18px;
	cursor: pointer;
}
.collapsebtn {
	position: absolute;
	width: 18px;
	height: 48px;
	background: url(../../images/workflow/collapsebtn.png) left top no-repeat;
	left: 18px;
	cursor: pointer;
}

.groupCls {
	height: 45px;
	line-height: 45px;
	font-weight: bold;
    font-size: 14px;
}
.groupCls:hover {
	color: #000;
}