.cs-step .cs-step-head {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.cs-step .cs-step-indicator {
    display: block;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    position: relative;
    width: 3.75rem;
    height: 3.75rem;
    margin-right: 1.375rem;
    line-height: 3.75rem;
    text-align: center;
    color: #dadbdd;
    font-weight: 900;
    transition: color .3s ease-in-out;
    z-index: 3;
    font-size: 2.875rem;
}

@media (max-width: 1200px) {
    .cs-step .cs-step-indicator {
        font-size: calc(1.4125rem + 1.95vw);
    }
}

.cs-step .cs-step-indicator::before, .cs-step .cs-step-indicator::after {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%) scale(0);
    transform: translateY(-50%) translateX(-50%) scale(0);
    opacity: 0;
    content: '';
    will-change: transform;
    z-index: 2;
}

.cs-step .cs-step-indicator::before {
    width: 5.25rem;
    height: 5.25rem;
    background-color: rgba(0, 123, 255, 0.12);
    transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out, opacity .3s ease-in-out;
    transition: transform .3s ease-in-out, opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
}

.cs-step .cs-step-indicator::after {
    width: 7.3125rem;
    height: 7.3125rem;
    background-color: rgba(0, 123, 255, 0.06);
    transition: opacity .3s ease .1s, -webkit-transform .3s ease .1s;
    transition: transform .3s ease .1s, opacity .3s ease .1s;
    transition: transform .3s ease .1s, opacity .3s ease .1s, -webkit-transform .3s ease .1s;
}

.cs-step .cs-step-line {
    position: relative;
    width: 100%;
    height: .0625rem;
    background-image: linear-gradient(90deg, #dadbdd, #dadbdd 75%, transparent 75%, transparent 100%);
    background-size: 0.625rem 0.0625rem;
    z-index: 2;
}

.cs-step:hover .cs-step-indicator {
    color: #007bff;
}

    .cs-step:hover .cs-step-indicator::before, .cs-step:hover .cs-step-indicator::after {
        -webkit-transform: translateY(-50%) translateX(-50%) scale(1);
        transform: translateY(-50%) translateX(-50%) scale(1);
        opacity: 1;
    }

@media (max-width: 767.98px) {
    .cs-step .cs-step-indicator {
        color: #007bff;
    }

        .cs-step .cs-step-indicator::before {
            width: 4.5rem;
            height: 4.5rem;
            -webkit-transform: translateY(-50%) translateX(-50%) scale(1);
            transform: translateY(-50%) translateX(-50%) scale(1);
            opacity: 1;
        }

        .cs-step .cs-step-indicator::after {
            display: none;
        }
}

.cs-step-vertical {
    display: -ms-flexbox;
    display: flex;
    max-width: calc(50% + (0.0625rem / 2));
    margin-left: auto;
}

    .cs-step-vertical .cs-step-line {
        position: relative;
        -ms-flex: 0 0 0.0625rem;
        flex: 0 0 0.0625rem;
        width: 0.0625rem;
        margin-top: 1.25rem;
        background-color: rgba(154, 156, 165, 0.4);
        color: rgba(154, 156, 165, 0.75);
        z-index: 2;
    }

        .cs-step-vertical .cs-step-line::before, .cs-step-vertical .cs-step-line::after {
            display: block;
            position: absolute;
            content: '';
            z-index: 3;
        }

        .cs-step-vertical .cs-step-line::before {
            top: -0.875rem;
            left: 50%;
            width: 0.5rem;
            height: 0.5rem;
            border-radius: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            transition: -webkit-transform .3s ease-in-out;
            transition: transform .3s ease-in-out;
            transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
            will-change: transform;
            background-color: currentColor;
        }

        .cs-step-vertical .cs-step-line::after {
            top: 0;
            left: 0;
            width: 100%;
            height: 0;
            transition: height .3s ease-in-out;
            will-change: height;
            background-color: #007bff;
        }

    .cs-step-vertical .cs-step-body {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }

    .cs-step-vertical:nth-child(2n) {
        margin-left: 0;
        text-align: right;
    }

        .cs-step-vertical:nth-child(2n) .cs-step-line {
            -ms-flex-order: 2;
            order: 2;
        }

        .cs-step-vertical:nth-child(2n) .cs-step-body {
            -ms-flex-order: 1;
            order: 1;
        }

    .cs-step-vertical.active .cs-step-line::before, .cs-step-vertical.tns-nav-active .cs-step-line::before {
        background-color: #007bff;
    }

    .cs-step-vertical.active .cs-step-line::after, .cs-step-vertical.tns-nav-active .cs-step-line::after {
        height: 100%;
    }

@media (max-width: 767.98px) {
    .cs-step-vertical {
        max-width: none;
        margin-left: 0;
    }

        .cs-step-vertical .cs-step-body {
            padding-right: 1.6666666667rem;
            padding-bottom: 1.875rem;
            padding-left: 1.6666666667rem;
        }

        .cs-step-vertical:nth-child(2n) {
            text-align: left;
        }

            .cs-step-vertical:nth-child(2n) .cs-step-line {
                -ms-flex-order: 1;
                order: 1;
            }

            .cs-step-vertical:nth-child(2n) .cs-step-body {
                -ms-flex-order: 2;
                order: 2;
            }
}

.cs-steps-vertical-right .cs-step-vertical,
.cs-steps-vertical-left .cs-step-vertical,
.table .cs-step-vertical {
    max-width: none;
    margin-left: 0;
}

    .cs-steps-vertical-right .cs-step-vertical .cs-step-body,
    .cs-steps-vertical-left .cs-step-vertical .cs-step-body,
    .table .cs-step-vertical .cs-step-body {
        padding-bottom: 1.875rem;
    }

    .cs-steps-vertical-right .cs-step-vertical:last-child .cs-step-body,
    .cs-steps-vertical-left .cs-step-vertical:last-child .cs-step-body,
    .table .cs-step-vertical:last-child .cs-step-body {
        padding-bottom: 0;
    }

.cs-steps-vertical-right {
    padding-right: 0.25rem;
}

    .cs-steps-vertical-right .cs-step-vertical {
        text-align: right;
    }

        .cs-steps-vertical-right .cs-step-vertical .cs-step-line {
            -ms-flex-order: 2;
            order: 2;
        }

        .cs-steps-vertical-right .cs-step-vertical .cs-step-body {
            -ms-flex-order: 1;
            order: 1;
        }

.cs-steps-vertical-left {
    padding-left: 0.25rem;
}

    .cs-steps-vertical-left .cs-step-vertical {
        text-align: left;
    }

        .cs-steps-vertical-left .cs-step-vertical:nth-child(2n) .cs-step-line {
            -ms-flex-order: 1;
            order: 1;
        }

        .cs-steps-vertical-left .cs-step-vertical:nth-child(2n) .cs-step-body {
            -ms-flex-order: 2;
            order: 2;
        }

.table .cs-step-vertical {
    display: table-row;
    text-align: left;
    white-space: nowrap;
    color: #9a9ca5;
}

    .table .cs-step-vertical .cs-step-line {
        position: absolute;
        top: calc(50% + (0.5rem * 1.5));
        left: 50%;
        margin-top: 0;
        height: calc(100% - (0.5rem * 2.5));
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .table .cs-step-vertical:last-child .cs-step-line {
        height: 0;
    }

    .table .cs-step-vertical.active {
        color: #424551;
    }

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    .table .cs-step-vertical .cs-step-line {
        top: 40px;
        height: 100%;
    }
}

.cs-step-vertical.cs-step-vertical-nav {
    text-decoration: none;
    cursor: pointer;
}

    .cs-step-vertical.cs-step-vertical-nav .cs-step-line {
        margin-top: 0;
    }

        .cs-step-vertical.cs-step-vertical-nav .cs-step-line::before, .cs-step-vertical.cs-step-vertical-nav .cs-step-line::after {
            top: 50%;
            -webkit-transform: translateY(-50%) translateX(-50%);
            transform: translateY(-50%) translateX(-50%);
        }

        .cs-step-vertical.cs-step-vertical-nav .cs-step-line::before {
            transition: background-color .25s ease-in-out;
            z-index: 3;
        }

        .cs-step-vertical.cs-step-vertical-nav .cs-step-line::after {
            left: 50%;
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            background-color: #f4f5f6;
            z-index: 2;
        }

    .cs-step-vertical.cs-step-vertical-nav .cs-step-body {
        width: 100%;
        padding: 0.625rem 2rem;
    }

    .cs-step-vertical.cs-step-vertical-nav .cs-step-label {
        color: #9a9ca5;
        transition: color .25s ease-in-out;
    }

    .cs-step-vertical.cs-step-vertical-nav.active .cs-step-label, .cs-step-vertical.cs-step-vertical-nav.tns-nav-active .cs-step-label {
        color: #007bff;
    }

    .cs-step-vertical.cs-step-vertical-nav:hover .cs-step-line::before {
        background-color: #007bff;
    }

    .cs-step-vertical.cs-step-vertical-nav:hover .cs-step-label {
        color: #007bff;
    }

    .cs-step-vertical.cs-step-vertical-nav:last-child .cs-step-body {
        padding-bottom: 0.625rem;
    }