.wizard { border: 2px solid #eceeef; position: relative; margin-top: 2rem; } .wizard .nav-tabs.vertices { width: 100%; position: absolute; top: 0; left: 0; -webkit-transform: translateY(calc(-50% - 4px)); -ms-transform: translateY(calc(-50% - 4px)); transform: translateY(calc(-50% - 4px)); display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; border: none; } .wizard .nav-tabs.vertices.keep-prefix-suffix { width: calc(100% + 4px); left: -2px; } .wizard .nav-tabs.vertices:not(.keep-prefix-suffix) .nav-item:first-child .nav-link::before { display: none; } .wizard .nav-tabs.vertices:not(.keep-prefix-suffix) .nav-item:last-child .nav-link::after { display: none; } .wizard .nav-tabs.vertices .nav-item { -webkit-box-flex: 0; -ms-flex: 0 1 100%; flex: 0 1 100%; } .wizard .nav-tabs.vertices .nav-link { width: 100%; display: block; background: none; position: relative; border: none; padding: 0; z-index: 1; } .wizard .nav-tabs.vertices .nav-link .vertex { width: 58px; height: 58px; margin: 0 auto; display: block; padding: .5rem; border-radius: 0.25rem; border: none; background-color: #39527b; color: #39527b; z-index: 1; } .wizard .nav-tabs.vertices .nav-link .vertex svg { width: 22px; height: 22px; } .wizard .nav-tabs.vertices .nav-link .vertex.vertex-sm { width: 48px; height: 48px; } .wizard .nav-tabs.vertices .nav-link .vertex.vertex-sm svg { width: 18px; height: 18px; } .wizard .nav-tabs.vertices .nav-link .vertex.vertex-circle { border-radius: 5000px; } .wizard .nav-tabs.vertices .nav-link .vertex.vertex-circle .vertex-inner { border-radius: 5000px; } .wizard .nav-tabs.vertices .nav-link .vertex-inner { background: #fff; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 0.25rem; } .wizard .nav-tabs.vertices .nav-link::before, .wizard .nav-tabs.vertices .nav-link::after { content: ''; height: .5rem; background: #39527b; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 50%; z-index: -1; } .wizard .nav-tabs.vertices .nav-link::before { right: 50%; left: 0; } .wizard .nav-tabs.vertices .nav-link::after { right: 0; left: 50%; } .wizard .nav-tabs.vertices .nav-item.active .nav-link .vertex, .wizard .nav-tabs.vertices .nav-item.active .nav-link::after, .wizard .nav-tabs.vertices .nav-item.active .nav-link::before, .wizard .nav-tabs.vertices .nav-item.visited .nav-link .vertex, .wizard .nav-tabs.vertices .nav-item.visited .nav-link::after, .wizard .nav-tabs.vertices .nav-item.visited .nav-link::before { background-color: #60c84c; } .wizard-checkbox { position: relative; } .wizard-checkbox input[type="checkbox"] { opacity: 0; position: absolute; top: 50%; left: 50%; z-index: -1; } .wizard-checkbox label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100px; height: 100px; background: #f7f7f9; border: 1px solid #eceeef; font-weight: 400; border-radius: 0.25rem; cursor: pointer; } .wizard-checkbox label:hover { box-shadow: 0 0 16px #ddd; } .wizard-checkbox input[type="checkbox"]:checked + label { border-color: #60c84c; box-shadow: 0 0 16px rgba(96, 200, 76, 0.5); } .wizard .form-control { background-color: #eee; } .wizard .form-control:focus, .wizard .form-control.form-control-danger, .wizard .form-control.form-control-success { background-color: #FFF; } /*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZvcm0ud2l6YXJkLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLDBCQUEwQjtFQUMxQixtQkFBbUI7RUFDbkIsaUJBQWlCLEVBQUU7RUFDbkI7SUFDRSxZQUFZO0lBQ1osbUJBQW1CO0lBQ25CLE9BQU87SUFDUCxRQUFRO0lBQ1IsZ0RBQXdDO1FBQXhDLDRDQUF3QztZQUF4Qyx3Q0FBd0M7SUFDeEMscUJBQWM7SUFBZCxxQkFBYztJQUFkLGNBQWM7SUFDZCwwQkFBOEI7UUFBOUIsOEJBQThCO0lBQzlCLGFBQWEsRUFBRTtJQUNmO01BQ0Usd0JBQXdCO01BQ3hCLFdBQVcsRUFBRTtJQUNmO01BQ0UsY0FBYyxFQUFFO0lBQ2xCO01BQ0UsY0FBYyxFQUFFO0lBQ2xCO01BQ0Usb0JBQWU7VUFBZixtQkFBZTtjQUFmLGVBQWUsRUFBRTtJQUNuQjtNQUNFLFlBQVk7TUFDWixlQUFlO01BQ2YsaUJBQWlCO01BQ2pCLG1CQUFtQjtNQUNuQixhQUFhO01BQ2IsV0FBVztNQUNYLFdBQVcsRUFBRTtNQUNiO1FBQ0UsWUFBWTtRQUNaLGFBQWE7UUFDYixlQUFlO1FBQ2YsZUFBZTtRQUNmLGVBQWU7UUFDZix1QkFBdUI7UUFDdkIsYUFBYTtRQUNiLDBCQUEwQjtRQUMxQixlQUFlO1FBQ2YsV0FBVyxFQUFFO1FBQ2I7VUFDRSxZQUFZO1VBQ1osYUFBYSxFQUFFO01BQ25CO1FBQ0UsWUFBWTtRQUNaLGFBQWEsRUFBRTtRQUNmO1VBQ0UsWUFBWTtVQUNaLGFBQWEsRUFBRTtNQUNuQjtRQUNFLHNCQUFzQixFQUFFO1FBQ3hCO1VBQ0Usc0JBQXNCLEVBQUU7TUFDNUI7UUFDRSxpQkFBaUI7UUFDakIsWUFBWTtRQUNaLGFBQWE7UUFDYixxQkFBYztRQUFkLHFCQUFjO1FBQWQsY0FBYztRQUNkLHlCQUF3QjtZQUF4QixzQkFBd0I7Z0JBQXhCLHdCQUF3QjtRQUN4QiwwQkFBb0I7WUFBcEIsdUJBQW9CO2dCQUFwQixvQkFBb0I7UUFDcEIsdUJBQXVCLEVBQUU7TUFDM0I7UUFDRSxZQUFZO1FBQ1osY0FBYztRQUNkLG9CQUFvQjtRQUNwQixtQkFBbUI7UUFDbkIsU0FBUztRQUNULG9DQUE0QjtZQUE1QixnQ0FBNEI7Z0JBQTVCLDRCQUE0QjtRQUM1QixXQUFXO1FBQ1gsWUFBWSxFQUFFO01BQ2hCO1FBQ0UsV0FBVztRQUNYLFFBQVEsRUFBRTtNQUNaO1FBQ0UsU0FBUztRQUNULFVBQVUsRUFBRTtJQUNoQjs7OztNQUlFLDBCQUEwQixFQUFFOztBQUVsQztFQUNFLG1CQUFtQixFQUFFO0VBQ3JCO0lBQ0UsV0FBVztJQUNYLG1CQUFtQjtJQUNuQixTQUFTO0lBQ1QsVUFBVTtJQUNWLFlBQVksRUFBRTtFQUNoQjtJQUNFLHFCQUFjO0lBQWQscUJBQWM7SUFBZCxjQUFjO0lBQ2QsMEJBQW9CO1FBQXBCLHVCQUFvQjtZQUFwQixvQkFBb0I7SUFDcEIseUJBQXdCO1FBQXhCLHNCQUF3QjtZQUF4Qix3QkFBd0I7SUFDeEIsNkJBQXVCO0lBQXZCLDhCQUF1QjtRQUF2QiwyQkFBdUI7WUFBdkIsdUJBQXVCO0lBQ3ZCLGFBQWE7SUFDYixjQUFjO0lBQ2Qsb0JBQW9CO0lBQ3BCLDBCQUEwQjtJQUMxQixpQkFBaUI7SUFDakIsdUJBQXVCO0lBQ3ZCLGdCQUFnQixFQUFFO0VBQ3BCO0lBQ0UsMEJBQTBCLEVBQUU7RUFDOUI7SUFDRSxzQkFBc0I7SUFDdEIsNENBQTRDLEVBQUU7O0FBRWxEO0VBQ0UsdUJBQXVCLEVBQUU7RUFDekI7SUFDRSx1QkFBdUIsRUFBRSIsImZpbGUiOiJkZW1vcy9mb3JtLndpemFyZC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIud2l6YXJkIHtcbiAgYm9yZGVyOiAycHggc29saWQgI2VjZWVlZjtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBtYXJnaW4tdG9wOiAycmVtOyB9XG4gIC53aXphcmQgLm5hdi10YWJzLnZlcnRpY2VzIHtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgdG9wOiAwO1xuICAgIGxlZnQ6IDA7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKGNhbGMoLTUwJSAtIDRweCkpO1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7XG4gICAgYm9yZGVyOiBub25lOyB9XG4gICAgLndpemFyZCAubmF2LXRhYnMudmVydGljZXMua2VlcC1wcmVmaXgtc3VmZml4IHtcbiAgICAgIHdpZHRoOiBjYWxjKDEwMCUgKyA0cHgpO1xuICAgICAgbGVmdDogLTJweDsgfVxuICAgIC53aXphcmQgLm5hdi10YWJzLnZlcnRpY2VzOm5vdCgua2VlcC1wcmVmaXgtc3VmZml4KSAubmF2LWl0ZW06Zmlyc3QtY2hpbGQgLm5hdi1saW5rOjpiZWZvcmUge1xuICAgICAgZGlzcGxheTogbm9uZTsgfVxuICAgIC53aXphcmQgLm5hdi10YWJzLnZlcnRpY2VzOm5vdCgua2VlcC1wcmVmaXgtc3VmZml4KSAubmF2LWl0ZW06bGFzdC1jaGlsZCAubmF2LWxpbms6OmFmdGVyIHtcbiAgICAgIGRpc3BsYXk6IG5vbmU7IH1cbiAgICAud2l6YXJkIC5uYXYtdGFicy52ZXJ0aWNlcyAubmF2LWl0ZW0ge1xuICAgICAgZmxleDogMCAxIDEwMCU7IH1cbiAgICAud2l6YXJkIC5uYXYtdGFicy52ZXJ0aWNlcyAubmF2LWxpbmsge1xuICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgIGJhY2tncm91bmQ6IG5vbmU7XG4gICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICBib3JkZXI6IG5vbmU7XG4gICAgICBwYWRkaW5nOiAwO1xuICAgICAgei1pbmRleDogMTsgfVxuICAgICAgLndpemFyZCAubmF2LXRhYnMudmVydGljZXMgLm5hdi1saW5rIC52ZXJ0ZXgge1xuICAgICAgICB3aWR0aDogNThweDtcbiAgICAgICAgaGVpZ2h0OiA1OHB4O1xuICAgICAgICBtYXJnaW46IDAgYXV0bztcbiAgICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgICAgIHBhZGRpbmc6IC41cmVtO1xuICAgICAgICBib3JkZXItcmFkaXVzOiAwLjI1cmVtO1xuICAgICAgICBib3JkZXI6IG5vbmU7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICMzOTUyN2I7XG4gICAgICAgIGNvbG9yOiAjMzk1MjdiO1xuICAgICAgICB6LWluZGV4OiAxOyB9XG4gICAgICAgIC53aXphcmQgLm5hdi10YWJzLnZlcnRpY2VzIC5uYXYtbGluayAudmVydGV4IHN2ZyB7XG4gICAgICAgICAgd2lkdGg6IDIycHg7XG4gICAgICAgICAgaGVpZ2h0OiAyMnB4OyB9XG4gICAgICAud2l6YXJkIC5uYXYtdGFicy52ZXJ0aWNlcyAubmF2LWxpbmsgLnZlcnRleC52ZXJ0ZXgtc20ge1xuICAgICAgICB3aWR0aDogNDhweDtcbiAgICAgICAgaGVpZ2h0OiA0OHB4OyB9XG4gICAgICAgIC53aXphcmQgLm5hdi10YWJzLnZlcnRpY2VzIC5uYXYtbGluayAudmVydGV4LnZlcnRleC1zbSBzdmcge1xuICAgICAgICAgIHdpZHRoOiAxOHB4O1xuICAgICAgICAgIGhlaWdodDogMThweDsgfVxuICAgICAgLndpemFyZCAubmF2LXRhYnMudmVydGljZXMgLm5hdi1saW5rIC52ZXJ0ZXgudmVydGV4LWNpcmNsZSB7XG4gICAgICAgIGJvcmRlci1yYWRpdXM6IDUwMDBweDsgfVxuICAgICAgICAud2l6YXJkIC5uYXYtdGFicy52ZXJ0aWNlcyAubmF2LWxpbmsgLnZlcnRleC52ZXJ0ZXgtY2lyY2xlIC52ZXJ0ZXgtaW5uZXIge1xuICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDUwMDBweDsgfVxuICAgICAgLndpemFyZCAubmF2LXRhYnMudmVydGljZXMgLm5hdi1saW5rIC52ZXJ0ZXgtaW5uZXIge1xuICAgICAgICBiYWNrZ3JvdW5kOiAjZmZmO1xuICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgaGVpZ2h0OiAxMDAlO1xuICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICAgICAgYm9yZGVyLXJhZGl1czogMC4yNXJlbTsgfVxuICAgICAgLndpemFyZCAubmF2LXRhYnMudmVydGljZXMgLm5hdi1saW5rOjpiZWZvcmUsIC53aXphcmQgLm5hdi10YWJzLnZlcnRpY2VzIC5uYXYtbGluazo6YWZ0ZXIge1xuICAgICAgICBjb250ZW50OiAnJztcbiAgICAgICAgaGVpZ2h0OiAuNXJlbTtcbiAgICAgICAgYmFja2dyb3VuZDogIzM5NTI3YjtcbiAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICB0b3A6IDUwJTtcbiAgICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC01MCUpO1xuICAgICAgICB3aWR0aDogNTAlO1xuICAgICAgICB6LWluZGV4OiAtMTsgfVxuICAgICAgLndpemFyZCAubmF2LXRhYnMudmVydGljZXMgLm5hdi1saW5rOjpiZWZvcmUge1xuICAgICAgICByaWdodDogNTAlO1xuICAgICAgICBsZWZ0OiAwOyB9XG4gICAgICAud2l6YXJkIC5uYXYtdGFicy52ZXJ0aWNlcyAubmF2LWxpbms6OmFmdGVyIHtcbiAgICAgICAgcmlnaHQ6IDA7XG4gICAgICAgIGxlZnQ6IDUwJTsgfVxuICAgIC53aXphcmQgLm5hdi10YWJzLnZlcnRpY2VzIC5uYXYtaXRlbS5hY3RpdmUgLm5hdi1saW5rIC52ZXJ0ZXgsIC53aXphcmQgLm5hdi10YWJzLnZlcnRpY2VzIC5uYXYtaXRlbS5hY3RpdmUgLm5hdi1saW5rOjphZnRlciwgLndpemFyZCAubmF2LXRhYnMudmVydGljZXMgLm5hdi1pdGVtLmFjdGl2ZSAubmF2LWxpbms6OmJlZm9yZSxcbiAgICAud2l6YXJkIC5uYXYtdGFicy52ZXJ0aWNlcyAubmF2LWl0ZW0udmlzaXRlZCAubmF2LWxpbmsgLnZlcnRleCxcbiAgICAud2l6YXJkIC5uYXYtdGFicy52ZXJ0aWNlcyAubmF2LWl0ZW0udmlzaXRlZCAubmF2LWxpbms6OmFmdGVyLFxuICAgIC53aXphcmQgLm5hdi10YWJzLnZlcnRpY2VzIC5uYXYtaXRlbS52aXNpdGVkIC5uYXYtbGluazo6YmVmb3JlIHtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICM2MGM4NGM7IH1cblxuLndpemFyZC1jaGVja2JveCB7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTsgfVxuICAud2l6YXJkLWNoZWNrYm94IGlucHV0W3R5cGU9XCJjaGVja2JveFwiXSB7XG4gICAgb3BhY2l0eTogMDtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgdG9wOiA1MCU7XG4gICAgbGVmdDogNTAlO1xuICAgIHotaW5kZXg6IC0xOyB9XG4gIC53aXphcmQtY2hlY2tib3ggbGFiZWwge1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIHdpZHRoOiAxMDBweDtcbiAgICBoZWlnaHQ6IDEwMHB4O1xuICAgIGJhY2tncm91bmQ6ICNmN2Y3Zjk7XG4gICAgYm9yZGVyOiAxcHggc29saWQgI2VjZWVlZjtcbiAgICBmb250LXdlaWdodDogNDAwO1xuICAgIGJvcmRlci1yYWRpdXM6IDAuMjVyZW07XG4gICAgY3Vyc29yOiBwb2ludGVyOyB9XG4gIC53aXphcmQtY2hlY2tib3ggbGFiZWw6aG92ZXIge1xuICAgIGJveC1zaGFkb3c6IDAgMCAxNnB4ICNkZGQ7IH1cbiAgLndpemFyZC1jaGVja2JveCBpbnB1dFt0eXBlPVwiY2hlY2tib3hcIl06Y2hlY2tlZCArIGxhYmVsIHtcbiAgICBib3JkZXItY29sb3I6ICM2MGM4NGM7XG4gICAgYm94LXNoYWRvdzogMCAwIDE2cHggcmdiYSg5NiwgMjAwLCA3NiwgMC41KTsgfVxuXG4ud2l6YXJkIC5mb3JtLWNvbnRyb2wge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZWVlOyB9XG4gIC53aXphcmQgLmZvcm0tY29udHJvbDpmb2N1cywgLndpemFyZCAuZm9ybS1jb250cm9sLmZvcm0tY29udHJvbC1kYW5nZXIsIC53aXphcmQgLmZvcm0tY29udHJvbC5mb3JtLWNvbnRyb2wtc3VjY2VzcyB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogI0ZGRjsgfVxuIl19 */