/* line 1, app/assets/stylesheets/component/stepper.scss */
:root {
  --circle-size: 3rem;
  --spacing: 0.5rem;
}

/* line 7, app/assets/stylesheets/component/stepper.scss */
.stepper-wrapper ol {
  padding-left: 0;
}

/* line 12, app/assets/stylesheets/component/stepper.scss */
.c-stepper {
  display: flex;
}

/* line 16, app/assets/stylesheets/component/stepper.scss */
.c-stepper__item {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: center;
}

/* line 24, app/assets/stylesheets/component/stepper.scss */
.c-stepper__item:not(:first-child):before {
  content: "";
  position: relative;
  top: calc(var(--circle-size) / 2);
  width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
  right: calc(50% - calc(var(--circle-size) / 2 + var(--spacing)));
  height: 0.25rem;
  background-color: #e0e0e0;
  order: -1;
}

/* line 37, app/assets/stylesheets/component/stepper.scss */
.c-stepper__number {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 3rem;
  line-height: 1.5rem;
  font-size: 1.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  left: calc(50% - calc(var(--circle-size) / 2));
  border: 0.25rem solid #D3D3D3;
  border-radius: 50%;
  color: var(--bs-secondary);
}

/* line 53, app/assets/stylesheets/component/stepper.scss */
.c-stepper__active .c-stepper__number {
  border: 0.25rem solid var(--bs-accent);
  color: var(--bs-accent);
}

/* line 58, app/assets/stylesheets/component/stepper.scss */
.c-stepper__active:before {
  background-color: var(--bs-accent) !important;
}

/* line 63, app/assets/stylesheets/component/stepper.scss */
.c-stepper__title {
  font-weight: bold;
  font-size: clamp(1rem, 4vw, 1.25rem);
  margin-bottom: 0.5rem;
}

/* line 69, app/assets/stylesheets/component/stepper.scss */
.c-stepper__desc {
  color: grey;
  font-size: clamp(0.85rem, 2vw, 1rem);
  padding-left: var(--spacing);
  padding-right: var(--spacing);
}