/* Order Progress  */

.order-progress-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px 30px;
  position: relative;
}

.order-progress-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #ffffff;
  /* Green color */
  color: #000;
  border: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
}

.order-progress-labels .label {
  margin-top: 10px;
  font-size: 12px;
  color: #00000063;
}

.order-progress-labels .label.active {
  margin-top: 10px;
  font-size: 12px;
  color: #000;
}

.line {
  flex: 1;
  height: 2px;
  background-color: #000000;
  align-items: center;
}

.line.active {
  background-color: #e2d21e;
}

.completed .circle {
  background-color: #e2d21e;
  color: #ffffff;
  border: none;
}

.step:not(:last-child) .line {
  position: absolute;
  top: 20px;
  /* Align with the middle of the circle */
  left: 50%;
  width: 100%;
  z-index: -1;
}

/* end */