﻿ 
form .indicator {
    height: 10px;
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    display: none;
}

form .indicator span {
    position: relative;
    height: 100%;
    width: 100%;
    background: lightgrey;
    border-radius: 5px;
}

    form .indicator span:nth-child(2) {
        margin: 0 3px;
    }

    form .indicator span.active:before {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        border-radius: 5px;
    }

.indicator span.weak:before {
    background-color: #ff4757;
}

.indicator span.medium:before {
    background-color: orange;
}

.indicator span.strong:before {
    background-color: #23ad5c;
}

form .pwdStrengthText {
    font-size: 20px;
    font-weight: 500;
    display: none;
    margin-bottom: -10px;
}

    form .pwdStrengthText.weak {
        color: #ff4757;
    }

    form .pwdStrengthText.medium {
        color: orange;
    }

    form .pwdStrengthText.strong {
        color: #23ad5c;
    }

 
ul.bs-wizard {
    /*margin: 0 auto;*/
    display: block;
    text-align: center;
    padding: 0 15px;
    width: 100%;
}

.bs-wizard > .bs-wizard-step {
    padding: 0px;
    position: relative;
    margin: 5px 0;
    display: inline-block;
}

.bs-wizard > .col-sm-2.col-xs-10.bs-wizard-step {
    padding: 0;
    float: none;
}

.bs-wizard > .bs-wizard-step .bs-wizard-stepnum {
    color: #595959;
    font-size: 16px;
    margin: 15px 0;
}

.bs-wizard > .bs-wizard-step.complete .bs-wizard-stepnum {
    color: #5b842d;
}

.bs-wizard > .bs-wizard-step .bs-wizard-info {
    color: #999;
    font-size: 14px;
}

.bs-wizard > .bs-wizard-step > .bs-wizard-dot {
    position: absolute;
    width: 30px;
    height: 30px;
    display: block;
    background: #959595;
    z-index: 9999;
    bottom: 15px;
    right: -15px;
    margin-top: -15px;
    margin-left: -15px;
    border-radius: 50%;
}

    .bs-wizard > .bs-wizard-step > .bs-wizard-dot:after {
        content: ' ';
        width: 14px;
        height: 14px;
        background: #ffffff;
        border-radius: 50px;
        position: absolute;
        top: 8px;
        left: 8px;
    }

.bs-wizard > .bs-wizard-step > .progress {
    background-color: #383636;
}

    .bs-wizard > .bs-wizard-step > .progress > .progress-bar {
        width: 0px;
        box-shadow: none;
        background: #EE3780;
    }

.bs-wizard > .bs-wizard-step.complete > .progress {
    background-color: #c0c0c0;
}

.bs-wizard > .bs-wizard-step.active > .progress {
    background-color: #EE3780;
}

.bs-wizard > .bs-wizard-step:first-child.active > .progress > .progress-bar {
    width: 0%;
}

.bs-wizard > .bs-wizard-step:last-child.active > .progress > .progress-bar {
    width: 100%;
}

.bs-wizard > .bs-wizard-step.disabled > .progress {
    background-color: #c0c0c0;
}

.bs-wizard > .bs-wizard-step.active > .bs-wizard-dot {
    background-color: #EE3780;
}

    .bs-wizard > .bs-wizard-step.active > .bs-wizard-dot:after {
        background-color: #ffffff;
    }

.bs-wizard > .bs-wizard-step.complete > .bs-wizard-dot {
    background-color: #c0c0c0;
}

    .bs-wizard > .bs-wizard-step.complete > .bs-wizard-dot:after {
        background-color: #c0c0c0;
    }

.bs-wizard > .bs-wizard-step:first-child > .progress {
    left: 0%;
    width: 100%;
}

.bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot {
    pointer-events: none;
}

.bs-wizard-step .text-left.bs-wizard-stepnum {
    text-align: center !important;
    display: inline-block;
}

.bs-wizard > .bs-wizard-step > .bs-wizard-dot .fa {
    color: #ffffff;
    font-size: 19px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
}

ul.bs-wizard.list-unstyled.text-center {
    padding: 0 80px 0 150px;
}




ul li:nth-child(1) label {
    border-radius: 4px 0 0 4px;
}

ul li:nth-last-child(1) label {
    border-radius: 0 4px 4px 0;
}

.required {
    color: red;
}

.field-validation-error {
    color: red;
}

.progress {
    margin-bottom: 20px;
}

.complete div.progress, .complete .bs-wizard-dot {
    background: green !important;
}
 
