.step,.steps-progress-bar{display:flex;align-items:center}.step{width:30px;height:30px;border-radius:50%;padding:10px;background-color:#ddd;justify-content:center;color:#ddd}.active{background-color:#000;color:#fff}.line{flex:1;height:8px;background-color:#ddd}.line.active{background-color:#000}.scroll-wheel{display:flex;align-items:center;justify-content:center;flex-direction:column}.scroll-area{height:250px;overflow-y:hidden;position:relative}.scroll-item{margin-top:10px;margin-bottom:10px;opacity:.3;padding-left:20px;padding-right:20px}.scroll-item.selected{border-top:2px solid #ccc;border-bottom:2px solid #ccc;padding:15px 0;opacity:1}.scroll-area:after,.scroll-area:before{content:"";position:absolute;left:0;right:0;height:90px;pointer-events:none;z-index:1}.scroll-area:before{top:0;background:linear-gradient(180deg,hsla(0,0%,100%,.5),hsla(0,0%,100%,0))}.scroll-area:after{bottom:0;background:linear-gradient(0deg,hsla(0,0%,100%,.5),hsla(0,0%,100%,0))}