:root {
  --step-number: 3;
  --container-width: 860px;
  --error-color: #f51a1a;
  --succes-color: #06bbcc;

  @media screen and (max-width: 860px) {
    --container-width: 560px;
  }

  @media screen and (max-width: 690px) {
    --container-width: 96%;
  }
}

.containerr {
  width: var(--container-width);
  padding: 48px;
  border: 1px solid rgb(4, 165, 4);
  height: 70vh;
  background-color: transparent;
  margin-left: 160px;
}

.breadcrumb {
  background-color: transparent !important;
}

.cc-progress-bar {
  display: flex;
  margin: 36px 0;
  user-select: none;

  .step {
    text-align: center;
    width: 100%;
    position: relative;
    &:last-child {
      .bullet::before,
      .bullet::after {
        display: none;
      }
    }

    p {
      font-weight: 500;
      font-size: 18px;
      margin-block-end: 8px;

      &.active {
        color: var(--succes-color);
      }

      @media screen and (max-width: 860px) {
        display: none;
      }
    }

    .bullet {
      position: relative;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 36px;
      height: 36px;
      border: 1px solid black;
      border-radius: 50%;

      &.active {
        color: #fff;
        background-color: var(--succes-color);
        border-color: var(--succes-color);
      }

      &::before,
      &::after {
        position: absolute;
        content: "";
        width: 100px;
        height: 4px;
        background: black;
        right: -110px;

        @media screen and (max-width: 860px) {
          display: none;
        }
      }

      &.active::after {
        background: var(--succes-color);
        transform: scaleX(0);
        transform-origin: left;
        animation: animate 0.3 linear forwards;
      }

      span {
        font-weight: bold;
      }
    }
  }
}

.form-label {
  color: black;
}

.btn {
  font-size: large;
  background-color: #f3f5fb;
}

h5 {
  text-align: center;
}

.form-container {
  width: 100%;
  overflow: hidden;

  form {
    display: flex;
    width: calc(100% * var(--step-number));
    transition: transform 0.15s ease-in-out;

    .page {
      width: calc(100% / var(--step-number));
    }
  }

  input {
    border-radius: 0;
    &.invalid {
      border-color: var(--error-color);
    }
  }

  select {
    border-radius: 0;
    &.invalid {
      border-color: var(--error-color);
    }
  }
}

@keyframes animate {
  100% {
    transform: scaleX(3.4);
  }
}