.step-wizard {
    display: table;
    width: 100%;
}

.step {
    display: table-cell;
    position: relative;
    text-align: center;
    width: 20%;
    vertical-align: top;
}

    .step:before {
        content: "";
        position: absolute;
        border-top: 2px solid #ddd;
        top: 25px;
        left: 0px;
        width: 100%;
    }

.step-5 .step {
    width: 20px;
}

.step-6 .step {
    width: 16.66%;
}

.step p {
    font-family: var(--fontFamilyHGroup);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0px;
    line-height: 18px;
}

.step .step-circle {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background-color: #c7c8ca;
    position: relative;
    display: inline-block;
}

.step .bi {
    color: #fff;
    font-size: 18px;
    line-height: 50px;
    display: none;
}

.step.completed .bi {
    display: block;
}

.step .bi-x-lg {
    display: none !important;
}

.step.rejected .bi-x-lg {
    display: block !important;
}

.step .number {
    display: inline-block;
    line-height: 48px;
    font-size: 16px;
}

.step.current .number {
    color: #fff;
}

.step.completed .number {
    display: none;
}

.step.completed:before {
    border-top: 2px solid #22d222;
}

.step.completed .step-circle {
    background-color: #22d222;
}

.step.current:before {
    border-top: 2px solid #3c4f58;
}

.step.current .step-circle {
    background-color: #3c4f58;
}

.step.rejected:before {
    border-top: 2px solid red;
}

.step.rejected .step-circle {
    background-color: red;
}

.wizard-action {
    padding-top: 20px;
    margin-top: 10px;
    border-top: 1px solid #ddd;
}


.stepwizard-step p {
    margin-top: 0px;
    color: #666;
}

.stepwizard-row {
    display: table-row;
}

.stepwizard {
    display: table;
    width: 100%;
    position: relative;
}

.stepwizard-step button[disabled] {
    /*opacity: 1 !important;
    filter: alpha(opacity=100) !important;*/
}

.stepwizard .btn.disabled, .stepwizard .btn[disabled], .stepwizard fieldset[disabled] .btn {
    opacity: 1 !important;
    color: #bbb;
}

.stepwizard-row:before {
    top: 14px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    background-color: #ccc;
    z-index: 0;
}

.stepwizard-step {
    display: table-cell;
    text-align: center;
    position: relative;
    min-width: 130px;
}

.step-panel {
    display: inline-block;
    width: 100%;
    /*height: 150px;*/
    border-top: 1px solid #cc071e;
    margin-top: 20px;
    position: relative;
    display: none;
}

.step-wizard .step.open:after {
    content: " ";
    position: absolute;
    left: calc(50% - 10px);
    opacity: 1;
    margin: 0 auto;
    bottom: -20px;
    border: 10px solid transparent;
    border-bottom-color: #cc071e;
}

.step-panel table {
    /*margin: 10px 0px;*/
}

.step-panel tr td:nth-child(odd) {
    padding: 5px;
    font-weight: 600;
}

.step-panel tr td:nth-child(even) {
    padding: 5px;
    position: relative;
    padding-left: 5px;
    /*width:50px;*/
}

.step-panel .title {
    margin-top: 5px;
    display: inline-block;
    font-size: 16px;
    padding-left: 5px;
    font-weight: bold;
}

.step-panel .br:after {
    position: absolute;
    border-right: 1px solid #ddd;
    content: "";
    right: 0px;
    top: 15px;
    bottom: 0px;
}
/*/ Notes TImeline /
/ The actual timeline (the vertical ruler) /*/
.notes_timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

/*/ The actual timeline (the vertical ruler) /*/
.notes_timeline::after {
    content: '';
    position: absolute;
    width: 5px;
    background-color: #cc071e;
    top: 0;
    bottom: 0;
    left: 20px;
    margin-left: 0px;
}

/*/ Container around content /*/
.notes_timeline .container {
    padding: 10px 28px;
    position: relative;
    background-color: inherit;
    width: 100%;
}

/*/ The circles on the timeline /*/
.notes_timeline .container::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    right: -17px;
    background-color: white;
    border: 4px solid #cc071e;
    top: 17px;
    border-radius: 50%;
    z-index: 1;
}

/*/ Place the container to the left /*/
.notes_timeline .left {
    left: 0;
}

/*/ Place the container to the right /*/
.notes_timeline .right {
    left: 25px;
}
/*
/ Add arrows to the left container (pointing right) /*/
.notes_timeline .left::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 30px;
    border: medium solid white;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent white;
}

/*/ Add arrows to the right container (pointing left) /*/
.notes_timeline .right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 18px;
    border: medium solid #ececec;
    border-width: 10px 10px 10px 0;
    border-color: transparent #ececec transparent transparent;
}

/*/ Fix the circle for containers on the right side /*/
.notes_timeline .right::after {
    left: -16px;
}
/*
/ The actual content /*/
.notes_timeline .content {
    padding: 15px 30px;
    background-color: #ececec;
    position: relative;
    border-radius: 6px;
}

.notes_timeline .content p {
    margin-bottom: 2px;
}

.notes_timeline .content h5 small {
    margin-left: 10px;
    font-size: 12px;
}