@import "../lib/bootstrap/variables"; $lineColor: #ddd; .premium-app-steps-bar { margin: 30px 0 10px; width: 100%; .unstyled.inline { overflow: hidden; margin: 0; padding: 0; /*CSS counters to number the steps*/ counter-reset: step; display: block; li { left: 0; padding: 0; display: block; list-style-type: none; color: $accent; width: calc(100% / 3); font-family: 'Open Sans', Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif; float: left; position: relative; text-align: center; @include box-sizing (border-box); span { font-size: 12px; line-height: 14px; font-weight: 400; height: 45px; display: block; width: 100%; color: $gray; padding-bottom: 10px; } &.selected { a, span { font-size: 12px; line-height: 14px; height: 45px; display: block; width: 100%; color: $darkYellow; position: relative; z-index: 5; padding-bottom: 10px; } a:hover { color: $linkColorHover; } &:after { position: relative; bottom: 20px; z-index: 1; } &:before { bottom: 31px !important; } } &:after { content: counter(step); counter-increment: step; width: 12px; height:12px; line-height: 12px; display: block; font-size: 0px; color: #333; background: #fff; border-radius: 50%; border: 2px solid #777; margin: 0 auto 5px auto; position: relative; bottom: 20px; z-index: 1; } &:before { content: ''; width: 100%; height: 2px; background: $lineColor; position: absolute; left: -50%; bottom: 32px; z-index: 0; /*put it behind the numbers*/ } &:first-child:before { /*connector not needed before the first step*/ width: 50%; left: 0%; } &:last-child:before { /*connector not needed before the first step*/ width: 150%; } /*marking active/completed steps green*/ /*The number of the step and the connector before it = green*/ &.superactive span { font-size: 12px; } &.active:before, &.selected:before { border: 2px solid $accent; -webkit-box-sizing:border-box; box-sizing:border-box; background: $accent; bottom: 15px; } &.active:after, &.selected:after { background: $accent; border-color: $accent; color: white; } &.done a, &.done span { color: #6f9e37 !important; } &.done::before { border: 2px solid #8bc34a !important; background: #8bc34a !important; bottom: 15px; } &.done::after { background: #8bc34a !important; border-color: #8bc34a !important; color: white !important; font-family: FontAwesome !important; content: '\f00c' !important; font-size: 10px !important; } } } } .cell_payment .info {font-size: 12px; color: blue}