/* Form Wizard css */ /*-----------------*/ .wizard .steps .current-info { /* default current steps information hide */ display: none; } .wizard .steps ul { display: table; width: 100%; table-layout: fixed; margin: 0; padding: 0; } .wizard .steps ul li { display: table-cell; text-align: center; position: relative; } .wizard .steps ul li a { text-transform: uppercase; position: relative; padding-top: 3.46rem; margin-top: 1.33rem; margin-bottom: 1.33rem; display: block; } .wizard .steps ul li a .step { /* Default step */ background-color: #FFFFFF; position: absolute; top: 0.86rem; left: 50%; z-index: 1; width: 1.33rem; height: 1.33rem; border-radius: 50%; } .wizard .steps ul li a .step i { /* icon inside step */ position: relative; left: -2px; top: -1px; font-size: 1.6rem; } .wizard .steps ul li a .step + .fonticon-wrap { /*wizard Icon upon step icon */ position: absolute; top: -50px; left: 15px; right: 0px; } .wizard .steps ul li::before, .wizard .steps ul li::after { /* wizard horizontal line */ content: ''; position: absolute; top: 2.86rem; width: 50%; height: 3px; } .wizard .steps ul li::before { left: 0; } .wizard .steps ul li:after { right: 0; } .wizard .steps ul li:last-child:after { content: none; } .wizard .steps ul li.current a { /* current step */ color: #5A8DEE; cursor: default; } .wizard .steps ul li.current::before { background-color: #5A8DEE; } .wizard .steps ul li.current:after { background-color: #e4e8e8; } .wizard .steps ul li.current ~ li a { color: #828D99; } .wizard .steps ul li.current ~ li:before { background-color: #e4e8e8; } .wizard .steps ul li.current ~ li:after { background-color: #e4e8e8; } .wizard .steps ul li.disabled a { /* disabled step */ cursor: default; } .wizard .steps ul li.disabled a .step { border: 3px solid; } .wizard .steps ul li.done a { /* done step */ color: #39DA8A; } .wizard .steps ul li.done::after, .wizard .steps ul li.done::before { background-color: #39DA8A; } .wizard .steps ul li.error a { /* error for form wizard validation */ color: #FF5B5C; } .wizard .steps ul li.error a .step { color: #FF5B5C; } .wizard .content { /* form wizard content */ padding: 0; margin: 0; } .wizard .content .title { display: none; } .wizard .actions ul { list-style: none; padding: 0; margin: 0; } .wizard .actions ul li { float: left; } .wizard .actions ul li.disabled { display: none; } .wizard .actions ul li + li { margin-left: 0.66rem; float: right; } .wizard.vertical .steps { /* steps for vertical */ float: left; width: 30%; } .wizard.vertical .steps ul li { margin: 0 .5rem; display: block; } .wizard.vertical .steps ul li a { display: flex; text-align: left; margin: 0 0.5rem; padding: 1rem; border-radius: 0.267rem; } .wizard.vertical .steps ul li a i { font-size: 2.4rem; } .wizard.vertical .steps ul li a i + span { font-family: "Rubik", Helvetica, Arial, serif; color: #475F7B; } .wizard.vertical .steps ul li a .number { /* step indicator number */ display: none; } .wizard.vertical .steps ul li.current { background: #f2f4f4; border-radius: 0.267rem; } .wizard.vertical .steps ul li::before, .wizard.vertical .steps ul li::after { content: none; } .wizard.vertical .content { /* content inside vertical */ float: left; width: 70%; border-left: 1px solid #DFE3E7; } .wizard.vertical .content .body { padding: 2.5%; } .wizard.vertical .actions { /* action inside vertical */ text-align: right; } .wizard.vertical .actions ul { display: inline-block; } /* vertical wizard section becomes 100% on small screen */ @media (max-width: 767.98px) { .wizard.vertical .steps { width: 100%; } .wizard.vertical .content { width: 100%; border-left: none; } } /* specific media query for below screen to hide subtitle */ @media (min-width: 768px) and (max-width: 991.98px) { .wizard.vertical .steps ul li a small { display: none; } }