@charset "utf-8";
/* CSS Document */
#app {
	margin: auto;
}
.el-col {
	border: solid 1px #1890FF;
}
.board {
	position: relative;
	/* overflow: hidden; */
	/* min-width: 400px; */
	/* height: 100px; */
	background: #fff;
	margin:0 auto;
}
.node {
	width: 200px;
	height: 100px;
	/* border: 1px solid #e6e6e6; */
	position: absolute;
	background: #f2f2f2;
	z-index: 100;
	left: 0;
	top: 0;
	border-radius: 4px;
	text-align:center;
	line-height: 40px;
}

.node:hover{
	background: #eeeeee;
	/* opacity: 0.9; */
}

.node_history{
	background: #78D091;
}
.node_history p,.node_current p{
	color: #fff !important;
}
.node_history:hover{
	background: #5fb878;
}

.node_inform_history{
	background: #37ebc4;
}
.node_inform_history p,.node_current p{
	color: #fff !important;
}
.node_inform_history:hover{
	background: #09bda5;
}

.node_skip{
	background: #ccc;
}

.node_skip:hover{
	background: #bbb;
}

.node_current{
	background: #02a7f0;
}

.node_current:hover{
	background: #0193d2;
}

.node p{
	font-size: 14px;
	color: #555555;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0 3px;
}

.node_end,.node_end:hover{
	background: url('../../dist/images/flow_new/flow_end.svg') no-repeat 50% 0;
}

.symbol_empty{
	background: url('../../dist/images/flow_new/flow_empty_node.svg') no-repeat !important;
}

.symbol {
	width: 23px;
	height: 23px;
	border: solid 1px #cccccc;
	background: #f2f2f2;
	position: absolute;
	z-index: 10;
	line-height: 30px;
	text-align: center;
	border-radius: 50px;
	background: url('../../dist/images/flow_new/flow_symbol_fail.svg') no-repeat;
}
.symbol_win{
	background: #5fb878;
	color: #fff;
	background: url('../../dist/images/flow_new/flow_symbol_win.svg') no-repeat;
}
.symbol_hiden{
	display: none;
}


.board > svg {
	width: 100%;
	height: 100%;
}
.tit {
	background: #1890FF;
	position: absolute;
	bottom: 0;
	width: 100%;
	text-align: center;
	color: #fff;
	padding: 3px 0;
	font-size: 14px;
}
.board > line {
	border: solid 1px #1890FF;
}

.tree_ico_list{ width: 100%; display: flex; justify-content:flex-end; margin: 5px 0 10px}
.tree_ico_list img{ margin: 0 2px}

.flow-tips div{
	background-color: #111111 !important;
	opacity: 0.75;
	border-radius: 5px;
}
.flow-tips i{
	border-right-color:  #111111 !important;
	opacity: 0.75;
}

#flow_show_more{
	position: fixed;
	top: 50%;
	margin-left: 10px;
	margin-top: -50px;
	width: 19px;
	height: 50px;
	line-height: 50px;
	border-bottom:  1px solid #cccccc;
	border-top:  1px solid #cccccc;
	border-right:  1px solid #cccccc;
	
}

.new_flow_tree{
	position: fixed;
	right:10px;
	z-index: 999;
	/* width: 431.25px; */
}

.flow-new-ion{
	font-size: 14px !important;
	text-align: center;
}