@charset "utf-8";


.ztbox {
	width: 100%;
    height: 40px;
    position: relative;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
}
.ztbox ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

.ztbox li{
	margin: 0;
	padding: 0;
	list-style: none;
}

.ztbox #left {
	margin-right: 25px;
	float: left;
	cursor: pointer;
	color: var(--theme-color);
	font-size: 35px;
	font-family: kdfont!important;
    font-style: normal;
	-webkit-font-smoothing: antialiased;
}
.ztbox #left::before{
	content: "\e89e";
}
.ztbox #right {
	margin-left: 25px;
	float: left;
	cursor: pointer;
	color: var(--theme-color);
	font-size: 35px;
	font-family: kdfont!important;
    font-style: normal;
	-webkit-font-smoothing: antialiased;
}

.ztbox #right::before{
	content: "\e89d";
}
.ztbox #conter {
    flex-grow: 1;
	height: 100%;
	float: left;
	display: inline;
	overflow: hidden;
	position: relative;
}

.ztbox #conter ul {
	width: auto;
	height: 100%;
	top: 0px;
	left: 0px;
	position: absolute;
	overflow: hidden;
}

.ztbox #conter li {
	height: 100%;
	float: left;
	position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
}

.ztbox #scroll {
    visibility: hidden;
	width: 100%;
	height: 18px;
	left: 0px;
	bottom: 8px;
	cursor: pointer;
	position: absolute;
	background: #FFEA00;
}

.ztbox #scroll span {
	width: 48px;
	height: 18px;
	left: 0px;
	bottom: 0px;
	cursor: pointer;
	position: absolute;
	background: #FFEA00;
}

.topContent{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.leftLine{
    flex-grow: 1;
    height: 1px;
    background-color: #D9D9D9;
}
.leftLine_white{
  flex-grow: 1;
  height: 1px;
  background-color: white;
}
.rightLine{
    flex-grow: 1;
    height: 1px;
    background-color: #D9D9D9;
}
.rightLine_white{
  flex-grow: 1;
  height: 1px;
  background-color: white;
}

.blueSpot{
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: -webkit-radial-gradient(50% 50%,#5582F3,white); 
    background: -moz-radial-gradient(50% 50%,#5582F3,white); 
    display: flex;
    justify-content: center;
    align-items: center;

}
.blueSpot>div{
   width: 10px;
   height: 10px;
   background-color: #5582F3;
   border-radius: 50%;
}

.graySpot{
	width: 16px;
    height: 16px;
    border-radius: 50%;
    background:white; 
    display: flex;
    justify-content: center;
    align-items: center;
}
.graySpot>div{
	width: 10px;
   height: 10px;
   background-color: #CCCCCC;
   border-radius: 50%;
}
.buttomCon{
	text-align: center;
}
.buttomContent_blue{
	color:#5582F3;
	cursor: pointer;
	transition: all 0.3s;
}
.buttomContent_blue:hover{
	color:#1E90FF;
}
.buttomContent_gray{
	color: #999999;
	cursor: default;
}

/*少于制定最大显示数量的时候，让流程节点居中样式*/
.itemCenter{ 
    position: relative !important;
    margin: auto !important;
}

.processItem{
	display: flex;
	justify-content: center;
	align-items: center;
}
.nodeName{
	flex-shrink: 1;
	overflow: hidden;
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis;
    white-space:nowrap;
}
.nodeNum{
	flex-shrink: 0;
}