
button#collapse[aria-expanded="false"] #chevron_up, button#collapse[aria-expanded="true"] #chevron_down {
	display:none !important;
}
button#collapse[aria-expanded="false"] #chevron_down, button#collapse[aria-expanded="true"] #chevron_up {
	display:block !important;
}

.steps {
  overflow: hidden;
  font-size: 1.1em;
  font-weight: bold;
  padding: 0px;
  border-bottom:1px solid lightgray;
}
.steps li {
  list-style-type: none;
  padding: 5px 5px 5px 20px; /* padding around text, last should include arrow width */
  border-right: 3px 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:15px;
}
/* white arrow to the left to "erase" background (starting from the 2nd object) */
.steps li:nth-child(n+2)::before {
  position: absolute;
  top:8px;
  left:0px;
  display: flex;
  border-left: 10px solid white; /* width: arrow width, color: background of document */
  border-top: 10px solid transparent; /* width: half height */
  border-bottom: 10px solid transparent; /* width: half height */
  content: " ";
}
/* colored arrow to the right */
.steps li:not(:last-child):after {
  z-index: 1; /* need to bring this above the next item */
  position: absolute;
  top: 8px;
  right: -9px; /* arrow width (negated) */
  display: flex;
  border-left: 10px solid #83965F; /* width: arrow width */
  border-top: 10px solid transparent; /* width: half height */
  border-bottom: 10px solid transparent; /* width: half height */
  content: " ";
}

.steps li:last-child {
	border-right:none;
}
.step {
	width:inherit;
}

/* Setup colors (both the background and the arrow) */


/* Completed */
.steps li.finish { background-color: #82955E; }
.steps li.finish::after { border-left-color: #82955E; }

/* Current */
.steps li.active { background-color: #FFC107; }
.steps li.active::after { border-left-color: #FFC107; }

/* Following */
.steps li.active ~ li { background-color: #EBEBEB; }
.steps li.active ~ li::after {	border-left-color: #EBEBEB; }

/* Hover for completed and current 
.steps li:hover {background-color: #696; }
.steps li:hover::after {border-left-color: #696; }
*/
