.steps-form { display: table; width: 100%; position: relative; } .uacf7-step.step-content button.uacf7-prev, .uacf7-step.step-content button.uacf7-next { margin-top: 5px } .uacf7-step.step-content.step-start button.uacf7-prev, .uacf7-step.step-content.step-end button.uacf7-next, .uacf7-step.step-content.step-end span.uacf7-ajax-loader { display: none !important } .uacf7-step span.uacf7-ajax-loader.is-active { visibility: visible } .uacf7-step.step-content button.uacf7-next { float: right; } .uacf7-step.step-content.step-start button.uacf7-next { float: none; } .steps-form .steps-row { display: table-row; } .steps-form .steps-row:before { top: 18px; bottom: 0; position: absolute; content: " "; width: 100%; height: 1px; background-color: #ccc; } .steps-form .steps-row .steps-step { display: table-cell; text-align: center; position: relative; } .steps-form .steps-row .steps-step p { margin-top: 0.5rem; } .steps-form .steps-row .steps-step button[disabled] { opacity: 1 !important; filter: alpha(opacity=100) !important; } .steps-form .steps-row .steps-step .btn-circle { width: 30px; height: 30px; text-align: center; font-size: 12px; line-height: 28px; border-radius: 50%; margin-top: 0; text-decoration: none; outline: 0; display: inline-block; position: relative; } .steps-form .steps-row .steps-step .btn-circle img { /* border-radius: 50% !important;*/ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0 } .uacf7-btn-default { color: #fff; background-color: #65ce92 !important; } .steps-form .steps-row .steps-step .btn-circle.uacf7-btn-active { color: #fff; background-color: #15a552 !important; outline: 0; -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); transform: scale(1.1); } .steps-form .steps-row .steps-step .btn-circle:hover, .steps-form .steps-row .steps-step .btn-circle:focus, .steps-form .steps-row .steps-step .btn-circle:active { outline: 0; -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); color: #fff } .btn.btn-circle.uacf7-btn-default:not(.uacf7-btn-active) { /*pointer-events: none*/ } .progressbar-style-1.steps-form .steps-row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .progressbar-style-1.steps-form .steps-row .steps-step { display: table-cell; text-align: center; position: relative; flex-grow: 1; /* flex-basis: 0; */ border-right: 1px solid #fff; } .progressbar-style-1.steps-form .steps-row .steps-step:last-child { border-right: 0 } .progressbar-style-1.steps-form .steps-row .steps-step p { margin-top: 0.5rem; display: none; } /* .progressbar-style-1.steps-form .steps-row .steps-step .btn-circle { width: 100%; border-radius: 0px; } */ .progressbar-style-1 .uacf7-btn-default { color: #444; background-color: #ddd !important; } .progressbar-style-1.steps-form .steps-row .steps-step .btn-circle.uacf7-btn-active { transform: inherit; box-shadow: none } .progressbar-style-1.steps-form .steps-row .steps-step .btn-circle.uacf7-btn-active:hover { box-shadow: none; color: #fff } .progressbar-style-1.steps-form .steps-row .steps-step .btn-circle:hover, .progressbar-style-1.steps-form .steps-row .steps-step .btn-circle:focus, .progressbar-style-1.steps-form .steps-row .steps-step .btn-circle:active { box-shadow: none; color: #444; } .progressbar-style-1.steps-form .steps-row .steps-step .btn-circle img { display: none; } .progressbar-style-1.steps-form .steps-row { display: flex; align-items: center; flex-wrap: wrap; flex-direction: row; column-gap: 2px; row-gap: 2px; justify-content: space-between; } .progressbar-style-1.steps-form .steps-row .steps-step { background: #ddd; flex-grow: 1; } .progressbar-style-1.steps-form .steps-row .steps-step .btn-circle { font-size: 12px; line-height: 24px; text-decoration: none; outline: 0; background: transparent; width: 100%; height: 100%; padding: 5px 10px; border-radius: 0; } .progressbar-style-1 .steps-step .uacf7-btn-active { background: #15a552 !important; } .progressbar-style-1 .steps-step .uacf7-btn-active { color: #fff !important; } .progressbar-style-1.steps-form .steps-row::before { display: none; } /* Small devices (landscape phones, 576px and down) */ @media (max-width: 576px) { .steps-form .steps-row { display: inline-block; } .steps-form .steps-row .steps-step { float: left; padding: 1px 4px; } .progressbar-style-1 .steps-step { padding: 0 !important; } .steps-form .steps-row::before { display: none; } } /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) {} /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) {} /* X-Large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) {} /* XX-Large devices (larger desktops, 1400px and up) */ @media (min-width: 1400px) {}