body{margin:0;font-family:Open Sans,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:Open Sans,Helvetica,Arial,sans-serif}.step-progress-bar{display:flex;justify-content:space-between;align-items:center;margin:20px 0;width:100%}.step{flex:1;text-align:center;position:relative;display:flex;flex-direction:column;align-items:center;transition:background-color .4s ease}.step-icon{background-color:#ccc;border-radius:50%;padding:10px;width:60px;height:60px;line-height:40px;color:#fff;font-weight:700;z-index:2;transition:background-color .4s ease;display:flex;align-items:center;justify-content:center}.step.active .step-icon{background-color:#00adef}.step-text{top:110%;position:absolute;color:#777;font-family:Cambria,Cochin,Georgia,Times,Times New Roman,serif!important}.step-text.active{color:#000}.step:not(:first-child):before{content:"";position:absolute;top:50%;left:-50%;transform:translateY(-50%);height:4px;width:100%;background-color:#ccc;z-index:1;transition:background-color 1s ease}.step.active:not(:first-child):before{background-color:#00adef}.step.animate .step-icon,.step.animate:not(:first-child):before{background-color:#00adef;animation:highlight 1s forwards}@keyframes highlight{0%{background-color:#ccc}to{background-color:#00adef}}