.my-stepbar-v1{display:flex;flex-direction:row;justify-content:space-evenly;width:100%}.my-stepbar-v1 .my-stepbar-v1__step{display:flex;flex-direction:column;align-items:center;gap:12px;opacity:.7;transition:opacity .2s}.my-stepbar-v1 .my-stepbar-v1__step[s-active]{opacity:1}.my-stepbar-v1 .my-stepbar-v1__step[s-active] .my-stepbar-v1__step__button{background:linear-gradient(157deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%)}.my-stepbar-v1 .my-stepbar-v1__step[s-active] .my-stepbar-v1__step__button::before{color:#fff}.my-stepbar-v1 .my-stepbar-v1__step[s-active] .my-stepbar-v1__step__button::after{content:""}.my-stepbar-v1 .my-stepbar-v1__step[s-active] .my-stepbar-v1__step__bg{opacity:1;transform:translateY(50%)}.my-stepbar-v1 .my-stepbar-v1__step[done] .my-stepbar-v1__step__bg{transform:translateY(0)}.my-stepbar-v1 .my-stepbar-v1__step:nth-child(1) .my-stepbar-v1__step__button::before{content:"1"}.my-stepbar-v1 .my-stepbar-v1__step:nth-child(2) .my-stepbar-v1__step__button::before{content:"2"}.my-stepbar-v1 .my-stepbar-v1__step:nth-child(3) .my-stepbar-v1__step__button::before{content:"3"}.my-stepbar-v1 .my-stepbar-v1__step:nth-child(4) .my-stepbar-v1__step__button::before{content:"4"}.my-stepbar-v1 .my-stepbar-v1__step:nth-child(5) .my-stepbar-v1__step__button::before{content:"5"}.my-stepbar-v1 .my-stepbar-v1__step:nth-child(6) .my-stepbar-v1__step__button::before{content:"6"}.my-stepbar-v1 .my-stepbar-v1__step:nth-child(7) .my-stepbar-v1__step__button::before{content:"7"}.my-stepbar-v1 .my-stepbar-v1__step:nth-child(8) .my-stepbar-v1__step__button::before{content:"8"}.my-stepbar-v1 .my-stepbar-v1__step:nth-child(9) .my-stepbar-v1__step__button::before{content:"9"}.my-stepbar-v1 .my-stepbar-v1__step:nth-child(10) .my-stepbar-v1__step__button::before{content:"10"}.my-stepbar-v1 .my-stepbar-v1__step__button{position:relative;display:flex;width:56px;height:56px;border:1px solid #e24b77;border-radius:999px;overflow:hidden;opacity:1 !important;transition:.2s}.my-stepbar-v1 .my-stepbar-v1__step__button::before{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);font-size:24px;color:rgba(226,75,119,.8);z-index:2}.my-stepbar-v1 .my-stepbar-v1__step__button::after{position:absolute;bottom:-9px;right:0px;width:30px;height:18px;background:rgba(255,255,255,.4);filter:blur(8px)}.my-stepbar-v1 .my-stepbar-v1__step__bg{display:flex;position:relative;width:100%;height:100%;background:linear-gradient(153deg, #c52da6 0%, #e24b77 100%);opacity:0;transform:translateY(100%);filter:brightness(1.1);transition:.2s}.my-stepbar-v1 .my-stepbar-v1__step__waves{position:absolute;top:-8px;left:0}.my-stepbar-v1 .my-stepbar-v1__step__wave{animation:my-stepbar-v1-wave-move 3s linear infinite}.my-stepbar-v1 .my-stepbar-v1__step__wave:nth-child(1){animation-delay:-2s;animation-duration:8s}.my-stepbar-v1 .my-stepbar-v1__step__wave:nth-child(2){animation-delay:-4s;animation-duration:5s}.my-stepbar-v1 .my-stepbar-v1__step__wave:nth-child(3){animation-delay:-6s;animation-duration:2s}@keyframes my-stepbar-v1-wave-move{from{transform:translate(-90px, 0%)}to{transform:translate(85px, 0%)}}.my-stepbar-v1 .my-stepbar-v1__step__label{text-align:center}@media screen and (max-width: 880px){.my-stepbar-v1 .my-stepbar-v1__step{gap:8px;max-width:54px}.my-stepbar-v1 .my-stepbar-v1__step__button{width:30px;height:30px}.my-stepbar-v1 .my-stepbar-v1__step__button::before{font-size:14px}.my-stepbar-v1 .my-stepbar-v1__step__label{font-size:11px}.my-stepbar-v1 .my-stepbar-v1__step__waves{top:-4px}}