html,body{height:100%;}
.mini-layout {
    width: 100%;
    height: 100%;
    background: #f6f5f8;
}

.process-step{position: absolute; cursor: move; min-width: 100px; line-height: 28px}
.process-step span{cursor: pointer;}
.process-lab{position: absolute; cursor: move; min-width: 100px; line-height: 28px}
.process-lab span{cursor: pointer;}

/*颜色*/
.colors {
  clear: both;
  padding: 0px; 
  display: inline-block;
  vertical-align: bottom;
}

.colors ul{list-style: none; display:inline-block;margin:0px;padding:0px;}
.colors li {
  position: relative;
  float: left;
  width: 18px;
  height: 18px;
  margin: 2px 1px 0 0;
  padding:2px 2px 2px 4px;
  background: #000;
  color:#ffffff;
  cursor: pointer;
  filter: alpha(opacity=50);
  opacity: 0.5;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.colors li:hover {
  filter: alpha(opacity=100);
  opacity: 1;
}
.colors li.active {
  height: 20px;
  margin-top: 0;
  filter: alpha(opacity=75);
  opacity: 0.75;
}
.colors li.red {
  background: #d54e21;
}
.colors li.green {
  background: #78a300;
}
.colors li.blue {
  background: #0e76a8;
}
.colors li.aero {
  background: #9cc2cb;
}
.colors li.grey {
  background: #73716e;
}
.colors li.orange {
  background: #f70;
}
.colors li.yellow {
  background: #fc0;
}
.colors li.pink {
  background: #ff66b5;
}
.colors li.purple {
  background: #6a5a8c;
}
/*连接线提示*/
.component {
  opacity: 0.8;
  filter: alpha(opacity=80);
  z-index: 20;
}


/*圆形*/
.circle {
  min-width: 100px;
  min-height: 100px;
  padding:20px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
}
/*椭圆*/
.oval {
  min-width: 50px;
  min-height: 50px;
  padding:20px;
  -moz-border-radius: 100px / 50px;
  -webkit-border-radius: 100px / 50px;
  border-radius: 100px / 50px;
}
/*菱形*/
.hexagon {
  min-width: 50px;
  min-height: 30px;
  background: #ccc;
  position: relative;
}
.hexagon:before {
  content: "";
  position: absolute;
  top: -25px; 
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 25px solid #ccc;
}
.hexagon:after {
  content: "";
  position: absolute;
  bottom: -25px; 
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 25px solid #ccc;
}