.step {
  display: inline-block;
  padding: 10px 10px;
  background-color: #284873;
  color: #fff;
  border-radius: 10px;
  margin-right: 0px;
}

.step:hover {
  background-color: #5987c6;
}

.step.active {
  background-color: #006600;
}

.arrow {
  display: inline-block;
  width: 1em;
  height: 2em;
  font-size: 2em;
  text-align: center;
  line-height: 1;
  color: #000099;

}

.arrow.active {
  color: #00ccff;
}

.arrow.right {
  transform: rotate(0deg);
}

.arrow.down {
  transform: rotate(90deg);
}

.arrow.left {
  transform: rotate(180deg);
}

.arrow.up {
  transform: rotate(-90deg);
}

.step:first-of-type .arrow.left,
.step:last-of-type .arrow.right {
  display: none;
}

.sell {
  display: inline-block;
  padding: 10px 10px;
  background-color: #04a9e8;
  color: #000;
  border-radius: 5px;
  margin-right: 0px;
  margin-left: 10px;
  cursor: pointer; 
}

.sell:hover {
  background-color: #b4eafe;
}

.buytitle{
	margin:10px;
	width:72px;
	padding:5px;
	border:2px solid #3c9e0c;
	background: #bff8a5;
	font-size:14px;
	text-align: center;
	border-radius: 5px;
	display: inline-block;

}
.selltitle
{
	margin:10px;
	width:72px;
	padding:5px;
	border:2px solid #04a9e8;
	background: #b4eafe;
	font-size:14px;t
	ext-align: center;
	border-radius: 5px;
	display: inline-block;


}

.buyer {
  display: inline-block;
  padding: 10px 10px;
  background-color: #3c9e0c;
  color: #000;
  border-radius: 5px;
  margin-right: 0px;
  margin-left: 10px;
  cursor: pointer; 
}

.buyer:hover {
  background-color: #bff8a5;


}