.container { padding: 0 24px 24px 16px; .title { margin: 14px 0 15px; } .content { display: flex; flex-direction: column; align-items: center; row-gap: 10px; margin-top: 62px; .successTitle { font-size: 24px; font-weight: 700; color: #333333; text-align: center; } .successTitle2 { font-size: 18px; font-weight: 700; color: #333333; text-align: center; } .successDesc { margin-top: 19px; font-size: 12px; color: #aaaaaa; text-align: center; } } .btns { display: flex; flex-direction: column; row-gap: 12px; .btn { width: 100%; } } .stepsWrapper { display: flex; flex-direction: column; align-items: center; row-gap: 8px; color: #999999; font-size: 12px; margin: 34px 0 20px; .steps { display: flex; justify-content: space-between; align-items: center; column-gap: 3px; width: 100%; height: 10px; padding: 0 3px; border: 1px solid #e5e5e5; border-radius: 10px; box-sizing: border-box; .stepItem { flex: 1; height: 5px; background-color: #e5e5e5; border-radius: 10px; box-sizing: border-box; &.active { background-image: linear-gradient(to right, #103776 0%, #6474af 100%); } } } } }