@charset "UTF-8";

.steps {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}
.steps a {
  color: white;
  text-decoration: none;
}
.steps li {
  float: left;
  margin-left: 0;
  width: 25%; /* 100 / number of steps */
  height: 30px; /* total height */
  list-style-type: none;
  padding: 4px 4px 4px 10px; /* padding around text, last should include arrow width */
  border-right: 2px solid white; /* width: gap between arrows, color: background of document */
  position: relative;
}
/* remove extra padding on the first object since it doesn't have an arrow to the left */
.steps li:first-child {
  padding-left: 5px;
}
/* white arrow to the left to "erase" background (starting from the 2nd object) */
.steps li:nth-child(n+2)::before {
  position: absolute;
  top:0;
  left:0;
  display: block;
  border-left: 6px solid white; /* width: arrow width, color: background of document */
  border-top: 15px solid transparent; /* width: half height */
  border-bottom: 15px solid transparent; /* width: half height */
  width: 0;
  height: 0;
  content: " ";
}
/* colored arrow to the right */
.steps li::after {
  z-index: 1; /* need to bring this above the next item */
  position: absolute;
  top: 0;
  right: -6px; /* arrow width (negated) */
  display: block;
  border-left: 6px solid #7c8437; /* width: arrow width */
  border-top: 15px solid transparent; /* width: half height */
  border-bottom: 15px solid transparent; /* width: half height */
  width:0;
  height:0;
  content: " ";
}
.steps li:last-child::after {
  border-color:#DDD;
}

/* Setup colors (both the background and the arrow) */


/* Completed */

.steps li { background: hsla(0,0%,70%,1.00); }
.steps li::after { border-left-color: hsla(0,0%,70%,1.00); }

/* Current เขียว */
/*.steps li.current { background: hsla(120,39%,54%,1.00); }
.steps li.current::after { border-left-color: hsla(120,39%,54%,1.00); }*/

/* Current เทา */
.steps li.current { background: hsla(0,0%,50%,1.00); }
.steps li.current::after { border-left-color: hsla(0,0%,50%,1.00); }

/* Following */
.steps li.current ~ li { background-color: hsla(0,0%,90%,1.00); }
.steps li.current ~ li::after { border-left-color: hsla(0,0%,90%,1.00); }

/* Hover for completed and current */
.steps li:hover { background-color: hsla(0,0%,30%,1.00);}
.steps li:hover::after {border-left-color: hsla(0,0%,30%,1.00);}