/* LEFT */

.wizard_sidebar {
  width: 220px;
  position: relative;
}

.step_item {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.step_item .step_circle {
  width: 36px;
  height: 36px;
  border: 1px solid #27a8e0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  z-index: 2;
  aspect-ratio: 1/1;
}

.step_item .step_circle.active {
  background: #27a8e0 !important;
  color: #fff !important;
  border-color: #27a8e0 !important;
}

.step_item .step_circle.completed {
  background: #27a8e0;
  color: #fff;
  border-color: #27a8e0;
}

.step_line {
  position: absolute;
  left: 18px;
  top: 30px;
  width: 1px;
  height: 35px;
  background: #27a8e0;
}

.line_active {
  background: #27a8e0;
}

.step_title {
  margin-left: 16px;
  font-size: 15px;
  color: #000;
}

.step_title.active_title {
  font-weight: 700;
}

/* ================= Media Queries ================= */

@media (min-width: 0px) and (max-width: 767px) {
  .step_title {
    display: none;
  }

  .step_item .step_circle {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .step_line {
    left: 13px;
    top: 15px;
  }

  .wizard_sidebar {
    width: 100%;
    display: flex;
    margin-bottom: 20px;
    justify-content: center;
  }
  .step_item {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: 20px;
    margin-bottom: 0;
  }
  .step_item:last-child {
    margin: 0;
  }
  .step_line {
    position: absolute;
    left: 18px;
    top: 14px;
    height: 1px;
    width: 35px;
    background: #d8d8d8;
  }
}
@media (min-width: 0px) and (max-width: 575.98px) {
  .step_item {
    margin-right: 12px;
  }
  .step_item .step_circle {
    width: 27px;
    height: 27px;
    font-size: 13px;
  }
}