.steps-container{display:flex;padding-top:20px}.step{text-align:center;flex:1 1;cursor:default;position:relative}.step .line{height:0;border-width:1px;border-style:solid;position:absolute;top:calc(50% - 10px);left:calc(50% + 40px);width:calc(100% - 85px)}.step .circle{padding:16px 20px;display:inline-block;border-radius:50%;margin-bottom:12px}.step-active .circle{background:#3d84f5;color:#fff}.step-done .circle{background:#236ee8;color:#eee}.step-inactive .circle{background:#bbb;color:#000}.step-active .label{color:#000}.step-done .label{color:#222}.step-inactive .label{color:#888}.step-done .line{border-color:#3d84f5}.step-active .line,.step-inactive .line{border-color:#eee}