.step {
position: relative;
list-style: none;
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-right: calc(1.5rem / -2);
margin-left: calc(1.5rem / -2);
}
.step.step-dashed .step-icon::after {
border-left-style: dashed;
}
.step-icon-border {
border: 0.125rem solid rgba(33, 50, 91, 0.1);
}
.step-title {
display: block;
font-weight: 600;
}
.step-text:last-child {
margin-bottom: 0;
}
.step-border-last-0 .step-item:last-child .step-icon::after {
display: none;
}
.step .step-item {
display: flex;
flex-direction: column;
flex-basis: 0;
flex: 0 0 100%;
max-width: 100%;
padding-right: 0.75rem;
padding-left: 0.75rem;
margin-bottom: 2.25rem;
}
.step-item-between .step-item:last-child {
flex: 0 0 auto;
width: auto;
}
.step .step-content-wrapper {
position: relative;
display: flex;
width: 100%;
}
.step .step-content {
flex: 1;
}
.step-item.collapse:not(.show) {
display: none;
}
.step-item .step-title-description {
display: none;
}
.step-item.focus .step-title-description {
display: block;
}
.step .step-avatar {
font-size: 1rem;
font-weight: 600;
width: 3.125rem;
height: 3.125rem;
border-radius: 50%;
margin-right: 1rem;
}
.step .step-avatar-img {
max-width: 100%;
height: auto;
border-radius: 50%;
}
.step .step-avatar::after {
position: absolute;
top: 3.875rem;
left: 1.5625rem;
height: calc(100% - 2.375rem);
border-left: 0.125rem solid rgba(33, 50, 91, 0.1);
content: "";
}
.step-avatar-xs .step-avatar,
.step-avatar-xs.step-avatar {
font-size: 0.75rem;
width: 1.75rem;
height: 1.75rem;
}
.step-avatar-xs .step-avatar::after,
.step-avatar-xs.step-avatar::after {
top: 2.5rem;
left: 0.8125rem;
width: 1.625rem;
height: calc(100% - 1rem);
}
.step-avatar-xs .step-divider::after {
left: 0.875rem;
}
.step-avatar-sm .step-avatar,
.step-avatar-sm.step-avatar {
font-size: 0.8125rem;
width: 2.5rem;
height: 2.5rem;
}
.step-avatar-sm .step-avatar::after,
.step-avatar-sm.step-avatar::after {
top: 3.25rem;
left: 1.1875rem;
width: 1.625rem;
height: calc(100% - 1.75rem);
}
.step-avatar-sm .step-divider::after {
left: 1.25rem;
}
.step-avatar-lg .step-avatar,
.step-avatar-lg.step-avatar {
font-size: 1.25rem;
width: 5.5rem;
height: 5.5rem;
}
.step-avatar-lg .step-avatar::after,
.step-avatar-lg.step-avatar::after {
top: 6.25rem;
left: 2.6875rem;
width: 1.625rem;
height: calc(100% - 4.75rem);
}
.step-avatar-lg .step-divider::after {
left: 2.75rem;
}
.step-divider {
display: inline-flex;
align-items: center;
text-transform: uppercase;
height: 1rem;
font-size: 0.8125rem;
font-weight: 600;
}
.step-divider::after {
position: absolute;
top: 1.75rem;
left: 1.5625rem;
height: calc(100% - 0.25rem);
border-left: 0.125rem solid rgba(33, 50, 91, 0.1);
content: "";
}
.step .step-icon {
display: inline-flex;
flex-shrink: 0;
justify-content: center;
align-items: center;
font-size: 1rem;
font-weight: 600;
width: 3.125rem;
height: 3.125rem;
border-radius: 50%;
margin-right: 1rem;
}
.step .step-icon::after {
position: absolute;
top: 3.875rem;
left: 1.5625rem;
height: calc(100% - 2.375rem);
border-left: 0.125rem solid #601959;
content: "";
}
.step .step-icon-pseudo::before {
display: block;
width: 0.25rem;
height: 0.25rem;
background-color: #97a4af;
border-radius: 50%;
content: "";
}
.step-icon-xs .step-icon,
.step-icon-xs.step-icon {
font-size: 0.75rem;
width: 1.75rem;
height: 1.75rem;
}
.step-icon-xs .step-icon::after,
.step-icon-xs.step-icon::after {
top: 2.5rem;
left: 0.8125rem;
width: 1.625rem;
height: calc(100% - 1rem);
}
.step-icon-xs .step-divider::after {
left: 0.875rem;
}
.step-icon-sm .step-icon,
.step-icon-sm.step-icon {
font-size: 0.8125rem;
width: 2.5rem;
height: 2.5rem;
}
.step-icon-sm .step-icon::after,
.step-icon-sm.step-icon::after {
top: 3.25rem;
left: 1.1875rem;
width: 1.625rem;
height: calc(100% - 1.75rem);
}
.step-icon-sm .step-divider::after {
left: 1.25rem;
}
.step-icon-lg .step-icon,
.step-icon-lg.step-icon {
font-size: 1.25rem;
width: 5.5rem;
height: 5.5rem;
}
.step-icon-lg .step-icon::after,
.step-icon-lg.step-icon::after {
top: 6.25rem;
left: 2.6875rem;
width: 1.625rem;
height: calc(100% - 4.75rem);
}
.step-icon-lg .step-divider::after {
left: 2.75rem;
}
@media (min-width: 576px) {
.step-sm.step-dashed .step-icon::after {
border-left: none;
border-top-style: dashed;
}
.step-sm .step-item {
flex-grow: 1;
flex: 1;
margin-bottom: 0;
}
.step-sm:not(.step-inline) .step-content-wrapper {
display: block;
}
.step-sm .step-icon {
margin-bottom: 1rem;
}
.step-sm .step-icon::after {
top: 1.5625rem;
left: 4.625rem;
width: calc(100% - 4.625rem);
height: 1.625rem;
border-top: 0.125rem solid rgba(33, 50, 91, 0.1);
border-left: none;
}
.step-sm .step-icon.step-icon-xs::after,
.step-sm.step-icon-xs .step-icon::after {
top: 0.875rem;
left: 3.25rem;
width: calc(100% - 3.25rem);
}
.step-sm .step-icon.step-icon-sm::after,
.step-sm.step-icon-sm .step-icon::after {
top: 1.25rem;
left: 4rem;
width: calc(100% - 4rem);
}
.step-sm .step-icon.step-icon-lg::after,
.step-sm.step-icon-lg .step-icon::after {
top: 2.75rem;
left: 7rem;
width: calc(100% - 7rem);
}
}
@media (min-width: 768px) {
.step-md.step-dashed .step-icon::after {
border-left: none;
border-top-style: dashed;
}
.step-md .step-item {
flex-grow: 1;
flex: 1;
margin-bottom: 0;
}
.step-md:not(.step-inline) .step-content-wrapper {
display: block;
}
.step-md .step-icon {
margin-bottom: 1rem;
}
.step-md .step-icon::after {
top: 1.5625rem;
left: 4.625rem;
width: calc(100% - 4.625rem);
height: 1.625rem;
border-top: 0.125rem solid rgba(33, 50, 91, 0.1);
border-left: none;
}
.step-md .step-icon.step-icon-xs::after,
.step-md.step-icon-xs .step-icon::after {
top: 0.875rem;
left: 3.25rem;
width: calc(100% - 3.25rem);
}
.step-md .step-icon.step-icon-sm::after,
.step-md.step-icon-sm .step-icon::after {
top: 1.25rem;
left: 4rem;
width: calc(100% - 4rem);
}
.step-md .step-icon.step-icon-lg::after,
.step-md.step-icon-lg .step-icon::after {
top: 2.75rem;
left: 7rem;
width: calc(100% - 7rem);
}
}
@media (min-width: 992px) {
.step-lg.step-dashed .step-icon::after {
border-left: none;
border-top-style: dashed;
}
.step-lg .step-item {
flex-grow: 1;
flex: 1;
margin-bottom: 0;
}
.step-lg:not(.step-inline) .step-content-wrapper {
display: block;
}
.step-lg .step-icon {
margin-bottom: 1rem;
}
.step-lg .step-icon::after {
top: 1.5625rem;
left: 4.625rem;
width: calc(100% - 4.625rem);
height: 1.625rem;
border-top: 0.125rem solid rgba(33, 50, 91, 0.1);
border-left: none;
}
.step-lg .step-icon.step-icon-xs::after,
.step-lg.step-icon-xs .step-icon::after {
top: 0.875rem;
left: 3.25rem;
width: calc(100% - 3.25rem);
}
.step-lg .step-icon.step-icon-sm::after,
.step-lg.step-icon-sm .step-icon::after {
top: 1.25rem;
left: 4rem;
width: calc(100% - 4rem);
}
.step-lg .step-icon.step-icon-lg::after,
.step-lg.step-icon-lg .step-icon::after {
top: 2.75rem;
left: 7rem;
width: calc(100% - 7rem);
}
}
@media (min-width: 1200px) {
.step-xl.step-dashed .step-icon::after {
border-left: none;
border-top-style: dashed;
}
.step-xl .step-item {
flex-grow: 1;
flex: 1;
margin-bottom: 0;
}
.step-xl:not(.step-inline) .step-content-wrapper {
display: block;
}
.step-xl .step-icon {
margin-bottom: 1rem;
}
.step-xl .step-icon::after {
top: 1.5625rem;
left: 4.625rem;
width: calc(100% - 4.625rem);
height: 1.625rem;
border-top: 0.125rem solid rgba(33, 50, 91, 0.1);
border-left: none;
}
.step-xl .step-icon.step-icon-xs::after,
.step-xl.step-icon-xs .step-icon::after {
top: 0.875rem;
left: 3.25rem;
width: calc(100% - 3.25rem);
}
.step-xl .step-icon.step-icon-sm::after,
.step-xl.step-icon-sm .step-icon::after {
top: 1.25rem;
left: 4rem;
width: calc(100% - 4rem);
}
.step-xl .step-icon.step-icon-lg::after,
.step-xl.step-icon-lg .step-icon::after {
top: 2.75rem;
left: 7rem;
width: calc(100% - 7rem);
}
}
@media (min-width: 576px) {
.step-sm.step-centered {
text-align: center;
}
.step-sm.step-centered .step-item:last-child .step-icon::after {
display: none;
}
.step-sm.step-centered .step-icon {
margin-left: auto;
margin-right: auto;
}
.step-sm.step-centered .step-icon::after {
width: calc(100% - 4.625rem);
left: calc(50% + 3.0625rem);
}
.step-sm.step-centered .step-icon.step-icon-xs::after,
.step-sm.step-centered.step-icon-xs .step-icon::after {
width: calc(100% - 3.25rem);
left: calc(50% + 2.375rem);
}
.step-sm.step-centered .step-icon.step-icon-sm::after,
.step-sm.step-centered.step-icon-sm .step-icon::after {
width: calc(100% - 4rem);
left: calc(50% + 2.75rem);
}
.step-sm.step-centered .step-icon.step-icon-lg::after,
.step-sm.step-centered.step-icon-lg .step-icon::after {
width: calc(100% - 7rem);
left: calc(50% + 4.25rem);
}
}
@media (min-width: 768px) {
.step-md.step-centered {
text-align: center;
}
.step-md.step-centered .step-item:last-child .step-icon::after {
display: none;
}
.step-md.step-centered .step-icon {
margin-left: auto;
margin-right: auto;
}
.step-md.step-centered .step-icon::after {
width: calc(100% - 4.625rem);
left: calc(50% + 3.0625rem);
}
.step-md.step-centered .step-icon.step-icon-xs::after,
.step-md.step-centered.step-icon-xs .step-icon::after {
width: calc(100% - 3.25rem);
left: calc(50% + 2.375rem);
}
.step-md.step-centered .step-icon.step-icon-sm::after,
.step-md.step-centered.step-icon-sm .step-icon::after {
width: calc(100% - 4rem);
left: calc(50% + 2.75rem);
}
.step-md.step-centered .step-icon.step-icon-lg::after,
.step-md.step-centered.step-icon-lg .step-icon::after {
width: calc(100% - 7rem);
left: calc(50% + 4.25rem);
}
}
@media (min-width: 992px) {
.step-lg.step-centered {
text-align: center;
}
.step-lg.step-centered .step-item:last-child .step-icon::after {
display: none;
}
.step-lg.step-centered .step-icon {
margin-left: auto;
margin-right: auto;
}
.step-lg.step-centered .step-icon::after {
width: calc(100% - 4.625rem);
left: calc(50% + 3.0625rem);
}
.step-lg.step-centered .step-icon.step-icon-xs::after,
.step-lg.step-centered.step-icon-xs .step-icon::after {
width: calc(100% - 3.25rem);
left: calc(50% + 2.375rem);
}
.step-lg.step-centered .step-icon.step-icon-sm::after,
.step-lg.step-centered.step-icon-sm .step-icon::after {
width: calc(100% - 4rem);
left: calc(50% + 2.75rem);
}
.step-lg.step-centered .step-icon.step-icon-lg::after,
.step-lg.step-centered.step-icon-lg .step-icon::after {
width: calc(100% - 7rem);
left: calc(50% + 4.25rem);
}
}
@media (min-width: 992px) {
.step-lg.step-centered {
text-align: center;
}
.step-lg.step-centered .step-item:last-child .step-icon::after {
display: none;
}
.step-lg.step-centered .step-icon {
margin-left: auto;
margin-right: auto;
}
.step-lg.step-centered .step-icon::after {
width: calc(100% - 4.625rem);
left: calc(50% + 3.0625rem);
}
.step-lg.step-centered .step-icon.step-icon-xs::after,
.step-lg.step-centered.step-icon-xs .step-icon::after {
width: calc(100% - 3.25rem);
left: calc(50% + 2.375rem);
}
.step-lg.step-centered .step-icon.step-icon-sm::after,
.step-lg.step-centered.step-icon-sm .step-icon::after {
width: calc(100% - 4rem);
left: calc(50% + 2.75rem);
}
.step-lg.step-centered .step-icon.step-icon-lg::after,
.step-lg.step-centered.step-icon-lg .step-icon::after {
width: calc(100% - 7rem);
left: calc(50% + 4.25rem);
}
}
.step .step-is-invalid-icon,
.step .step-is-valid-icon {
display: none;
}
.step .active .step-icon,
.step .active.is-valid .step-icon {
color: #fff;
background-color: #377dff;
}
.step .active .step-title,
.step .active.is-valid .step-title {
color: #377dff;
}
.step .is-valid .step-icon {
color: #fff;
background-color: #377dff;
}
.step .is-valid .step-title {
color: #377dff;
}
.step .is-valid .step-is-valid-icon {
display: inline-flex;
}
.step .is-valid .step-is-default-icon,
.step .is-valid .step-is-invalid-icon {
display: none;
}
.step .is-invalid .step-icon {
color: #fff;
background-color: #ed4c78;
}
.step .is-invalid .step-title {
color: #ed4c78;
}
.step .is-invalid .step-is-invalid-icon {
display: inline-flex;
}
.step .is-invalid .step-is-default-icon,
.step .is-invalid .step-is-valid-icon {
display: none;
}
.step-icon-primary {
color: #fff;
background-color: #377dff;
}
.step-icon-primary.step-icon-pseudo::before {
background-color: #fff;
}
.step-icon-secondary {
color: #fff;
background-color: #71869d;
}
.step-icon-secondary.step-icon-pseudo::before {
background-color: #fff;
}
.step-icon-success {
color: #fff;
background-color: #00c9a7;
}
.step-icon-success.step-icon-pseudo::before {
background-color: #fff;
}
.step-icon-info {
color: #fff;
background-color: #09a5be;
}
.step-icon-info.step-icon-pseudo::before {
background-color: #fff;
}
.step-icon-warning {
color: #000;
background-color: #f5ca99;
}
.step-icon-warning.step-icon-pseudo::before {
background-color: #000;
}
.step-icon-danger {
color: #fff;
background-color: #ed4c78;
}
.step-icon-danger.step-icon-pseudo::before {
background-color: #fff;
}
.step-icon-light {
color: #000;
background-color: #f7faff;
}
.step-icon-light.step-icon-pseudo::before {
background-color: #000;
}
.step-icon-dark {
color: #fff;
background-color: #21325b;
}
.step-icon-dark.step-icon-pseudo::before {
background-color: #fff;
}
.step-icon-soft-primary {
color: #377dff;
background-color: rgba(55, 125, 255, 0.1);
}
.step-icon-soft-primary.step-icon-pseudo::before {
background-color: #377dff;
}
.step-icon-soft-secondary {
color: #71869d;
background-color: rgba(113, 134, 157, 0.1);
}
.step-icon-soft-secondary.step-icon-pseudo::before {
background-color: #71869d;
}
.step-icon-soft-success {
color: #00c9a7;
background-color: rgba(0, 201, 167, 0.1);
}
.step-icon-soft-success.step-icon-pseudo::before {
background-color: #00c9a7;
}
.step-icon-soft-info {
color: #09a5be;
background-color: rgba(9, 165, 190, 0.1);
}
.step-icon-soft-info.step-icon-pseudo::before {
background-color: #09a5be;
}
.step-icon-soft-warning {
color: #f5ca99;
background-color: rgba(245, 202, 153, 0.1);
}
.step-icon-soft-warning.step-icon-pseudo::before {
background-color: #f5ca99;
}
.step-icon-soft-danger {
color: #ed4c78;
background-color: rgba(237, 76, 120, 0.1);
}
.step-icon-soft-danger.step-icon-pseudo::before {
background-color: #ed4c78;
}
.step-icon-soft-light {
color: #f7faff;
background-color: rgba(247, 250, 255, 0.1);
}
.step-icon-soft-light.step-icon-pseudo::before {
background-color: #f7faff;
}
.step-icon-soft-dark {
background-color: #9e8b23;
color: white;
}
.step-icon-soft-dark.step-icon-pseudo::before {
background-color: #21325b;
}
.step-inline .step-content-wrapper {
align-items: center;
}
.step-inline .step-item:last-child .step-title::after {
display: none;
}
.step-inline .step-title {
display: inline-block;
}
@media (min-width: 576px) {
.step-sm.step-inline.step-dashed .step-title::after {
border-top-style: dashed;
}
.step-sm.step-inline .step-item {
overflow: hidden;
}
.step-sm.step-inline .step-icon {
margin-bottom: 0;
}
.step-sm.step-inline .step-icon::after {
display: none;
}
.step-sm.step-inline .step-title::after {
position: absolute;
top: 1.5625rem;
width: 100%;
height: 1.625rem;
border-top: 0.125rem solid rgba(33, 50, 91, 0.1);
margin-left: 1.5rem;
content: "";
}
.step-sm.step-inline .step-icon-xs + .step-content .step-title::after,
.step-sm.step-inline.step-icon-xs .step-content .step-title::after {
top: 0.875rem;
}
.step-sm.step-inline .step-icon-sm + .step-content .step-title::after,
.step-sm.step-inline.step-icon-sm .step-content .step-title::after {
top: 1.25rem;
}
.step-sm.step-inline .step-icon-lg + .step-content .step-title::after,
.step-sm.step-inline.step-icon-lg .step-content .step-title::after {
top: 2.75rem;
}
}
@media (min-width: 768px) {
.step-md.step-inline.step-dashed .step-title::after {
border-top-style: dashed;
}
.step-md.step-inline .step-item {
overflow: hidden;
}
.step-md.step-inline .step-icon {
margin-bottom: 0;
}
.step-md.step-inline .step-icon::after {
display: none;
}
.step-md.step-inline .step-title::after {
position: absolute;
top: 1.5625rem;
width: 100%;
height: 1.625rem;
border-top: 0.125rem solid rgba(33, 50, 91, 0.1);
margin-left: 1.5rem;
content: "";
}
.step-md.step-inline .step-icon-xs + .step-content .step-title::after,
.step-md.step-inline.step-icon-xs .step-content .step-title::after {
top: 0.875rem;
}
.step-md.step-inline .step-icon-sm + .step-content .step-title::after,
.step-md.step-inline.step-icon-sm .step-content .step-title::after {
top: 1.25rem;
}
.step-md.step-inline .step-icon-lg + .step-content .step-title::after,
.step-md.step-inline.step-icon-lg .step-content .step-title::after {
top: 2.75rem;
}
}
@media (min-width: 992px) {
.step-lg.step-inline.step-dashed .step-title::after {
border-top-style: dashed;
}
.step-lg.step-inline .step-item {
overflow: hidden;
}
.step-lg.step-inline .step-icon {
margin-bottom: 0;
}
.step-lg.step-inline .step-icon::after {
display: none;
}
.step-lg.step-inline .step-title::after {
position: absolute;
top: 1.5625rem;
width: 100%;
height: 1.625rem;
border-top: 0.125rem solid rgba(33, 50, 91, 0.1);
margin-left: 1.5rem;
content: "";
}
.step-lg.step-inline .step-icon-xs + .step-content .step-title::after,
.step-lg.step-inline.step-icon-xs .step-content .step-title::after {
top: 0.875rem;
}
.step-lg.step-inline .step-icon-sm + .step-content .step-title::after,
.step-lg.step-inline.step-icon-sm .step-content .step-title::after {
top: 1.25rem;
}
.step-lg.step-inline .step-icon-lg + .step-content .step-title::after,
.step-lg.step-inline.step-icon-lg .step-content .step-title::after {
top: 2.75rem;
}
}
@media (min-width: 1200px) {
.step-xl.step-inline.step-dashed .step-title::after {
border-top-style: dashed;
}
.step-xl.step-inline .step-item {
overflow: hidden;
}
.step-xl.step-inline .step-icon {
margin-bottom: 0;
}
.step-xl.step-inline .step-icon::after {
display: none;
}
.step-xl.step-inline .step-title::after {
position: absolute;
top: 1.5625rem;
width: 100%;
height: 1.625rem;
border-top: 0.125rem solid rgba(33, 50, 91, 0.1);
margin-left: 1.5rem;
content: "";
}
.step-xl.step-inline .step-icon-xs + .step-content .step-title::after,
.step-xl.step-inline.step-icon-xs .step-content .step-title::after {
top: 0.875rem;
}
.step-xl.step-inline .step-icon-sm + .step-content .step-title::after,
.step-xl.step-inline.step-icon-sm .step-content .step-title::after {
top: 1.25rem;
}
.step-xl.step-inline .step-icon-lg + .step-content .step-title::after,
.step-xl.step-inline.step-icon-lg .step-content .step-title::after {
top: 2.75rem;
}
}
@media (min-width: 576px) {
.step-timeline-sm {
margin-left: 0;
margin-right: 0;
}
.step-timeline-sm .step-item {
flex: 0 0 50%;
max-width: 50%;
padding-left: 0;
padding-right: 0;
margin-left: 50%;
}
.step-timeline-sm .step-item:nth-child(even) {
flex-direction: row-reverse;
text-align: right;
margin-left: auto;
margin-right: 50%;
}
.step-timeline-sm .step-item:nth-child(even) .step-content-wrapper {
flex-direction: row-reverse;
}
.step-timeline-sm .step-item:nth-child(even) .step-icon {
margin-left: 0;
margin-right: -1.5625rem;
}
.step-timeline-sm .step-item:nth-child(even) .step-icon-xs {
margin-right: -0.875rem;
}
.step-timeline-sm .step-item:nth-child(even) .step-icon-sm {
margin-right: -1.25rem;
}
.step-timeline-sm .step-item:nth-child(even) .step-icon-lg {
margin-right: -2.75rem;
}
.step-timeline-sm .step-item:nth-child(even) .step-content {
margin-right: 1.5rem;
}
.step-timeline-sm .step-icon {
margin-left: -1.5625rem;
}
.step-timeline-sm .step-icon::after {
left: auto;
width: auto;
}
.step-timeline-sm .step-icon-xs {
margin-left: -0.875rem;
}
.step-timeline-sm .step-icon-sm {
margin-left: -1.25rem;
}
.step-timeline-sm .step-icon-lg {
margin-left: -2.75rem;
}
}
@media (min-width: 768px) {
.step-timeline-md {
margin-left: 0;
margin-right: 0;
}
.step-timeline-md .step-item {
flex: 0 0 50%;
max-width: 50%;
padding-left: 0;
padding-right: 0;
margin-left: 50%;
}
.step-timeline-md .step-item:nth-child(even) {
flex-direction: row-reverse;
text-align: right;
margin-left: auto;
margin-right: 50%;
}
.step-timeline-md .step-item:nth-child(even) .step-content-wrapper {
flex-direction: row-reverse;
}
.step-timeline-md .step-item:nth-child(even) .step-icon {
margin-left: 0;
margin-right: -1.5625rem;
}
.step-timeline-md .step-item:nth-child(even) .step-icon-xs {
margin-right: -0.875rem;
}
.step-timeline-md .step-item:nth-child(even) .step-icon-sm {
margin-right: -1.25rem;
}
.step-timeline-md .step-item:nth-child(even) .step-icon-lg {
margin-right: -2.75rem;
}
.step-timeline-md .step-item:nth-child(even) .step-content {
margin-right: 1.5rem;
}
.step-timeline-md .step-icon {
margin-left: -1.5625rem;
}
.step-timeline-md .step-icon::after {
left: auto;
width: auto;
}
.step-timeline-md .step-icon-xs {
margin-left: -0.875rem;
}
.step-timeline-md .step-icon-sm {
margin-left: -1.25rem;
}
.step-timeline-md .step-icon-lg {
margin-left: -2.75rem;
}
}
@media (min-width: 992px) {
.step-timeline-lg {
margin-left: 0;
margin-right: 0;
}
.step-timeline-lg .step-item {
flex: 0 0 50%;
max-width: 50%;
padding-left: 0;
padding-right: 0;
margin-left: 50%;
}
.step-timeline-lg .step-item:nth-child(even) {
flex-direction: row-reverse;
text-align: right;
margin-left: auto;
margin-right: 50%;
}
.step-timeline-lg .step-item:nth-child(even) .step-content-wrapper {
flex-direction: row-reverse;
}
.step-timeline-lg .step-item:nth-child(even) .step-icon {
margin-left: 0;
margin-right: -1.5625rem;
}
.step-timeline-lg .step-item:nth-child(even) .step-icon-xs {
margin-right: -0.875rem;
}
.step-timeline-lg .step-item:nth-child(even) .step-icon-sm {
margin-right: -1.25rem;
}
.step-timeline-lg .step-item:nth-child(even) .step-icon-lg {
margin-right: -2.75rem;
}
.step-timeline-lg .step-item:nth-child(even) .step-content {
margin-right: 1.5rem;
}
.step-timeline-lg .step-icon {
margin-left: -1.5625rem;
}
.step-timeline-lg .step-icon::after {
left: auto;
width: auto;
}
.step-timeline-lg .step-icon-xs {
margin-left: -0.875rem;
}
.step-timeline-lg .step-icon-sm {
margin-left: -1.25rem;
}
.step-timeline-lg .step-icon-lg {
margin-left: -2.75rem;
}
}
@media (min-width: 1200px) {
.step-timeline-xl {
margin-left: 0;
margin-right: 0;
}
.step-timeline-xl .step-item {
flex: 0 0 50%;
max-width: 50%;
padding-left: 0;
padding-right: 0;
margin-left: 50%;
}
.step-timeline-xl .step-item:nth-child(even) {
flex-direction: row-reverse;
text-align: right;
margin-left: auto;
margin-right: 50%;
}
.step-timeline-xl .step-item:nth-child(even) .step-content-wrapper {
flex-direction: row-reverse;
}
.step-timeline-xl .step-item:nth-child(even) .step-icon {
margin-left: 0;
margin-right: -1.5625rem;
}
.step-timeline-xl .step-item:nth-child(even) .step-icon-xs {
margin-right: -0.875rem;
}
.step-timeline-xl .step-item:nth-child(even) .step-icon-sm {
margin-right: -1.25rem;
}
.step-timeline-xl .step-item:nth-child(even) .step-icon-lg {
margin-right: -2.75rem;
}
.step-timeline-xl .step-item:nth-child(even) .step-content {
margin-right: 1.5rem;
}
.step-timeline-xl .step-icon {
margin-left: -1.5625rem;
}
.step-timeline-xl .step-icon::after {
left: auto;
width: auto;
}
.step-timeline-xl .step-icon-xs {
margin-left: -0.875rem;
}
.step-timeline-xl .step-icon-sm {
margin-left: -1.25rem;
}
.step-timeline-xl .step-icon-lg {
margin-left: -2.75rem;
}
}