.progress-point {
    width: @progress-point-size;
    height: @progress-point-size;
    display: inline-block;
    margin-left: @progress-point-margin;
    background-color: @gray-lighter;
    border-radius: 20px;
    border: 1px solid @gray-light;
    cursor: pointer;
    &--checked {
      &:before {
        content: "";
        position: relative;
        background-color: @brand-primary;
        display: block;
        width: 100%;
        height: 100%;
        padding: (@progress-point-size/2)-1;
        border-radius: 50px;
        animation-name: showProgress;
        animation-iteration-count: 1;
        animation-timing-function: cubic-bezier(0, 0.53, 0.32, 1.54);
        animation-duration: 0.5s;
      }
    }
  }

  .progress-point-group {
    width: 100%;
    text-align: center;
    & > div:first-child{
      margin-left:0;
    }
  }

  @keyframes showProgress {
    0% {
      transform: scale(0.1);
    }
    100% {
      transform: scale(1);
    }
  }