/*
 * @author: Procurios
 * @about: 	This file defines the layout of the ProBase Password Strength checker
 */

/**
 * 	show/hide password field container
 */

.has-js .psc-show-password {
    display: block;
}

/** By default hide the toggle elem. Force it to be hidden in browsers that don't support changing type values with JS */
.psc-show-password,
.ie8 .psc-show-password,
.ie7 .psc-show-password,
.ie6 .psc-show-password {
    display: none;
    margin-bottom: .5em;
}

.psc-show-password {
    margin-bottom: 0;
    padding: .5em 0;
}

.psc-show-password input {
    float: left;
}

.psc-show-password label.field {
    margin-left: 1.5em;
    padding: 0;
}

/**
 * 	password strength input container
 */

.psc-pi-strength {
    position: relative;
    display: block;
}

.psc-pi-strength,
.psc-pi-strength input,
.psc-password-repeat input {
    width: 100% !important;
}

.psc-pi-strength input {
    margin-bottom: 0;
}

/**
 * 	password strength element
 */

.psc-pi-strength[class*="psc-password-strength-"]:hover {
    cursor: help;
}

/**
 * 	strength text element
 */

.psc-pi-strength .psc-ps-text {
    position: absolute;
    z-index: +1;
    width: 100%;
    display: block;
    overflow: hidden;
    height: 2rem;
    font-size: 0;
    color: transparent;
}

.psc-pi-strength__bar {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-pack: justify;
    -webkit-box-pack: justify;
    justify-content: space-between;
    position: relative;
    margin: .5em 0 2em 0;
    padding-top: 6px;
}

.psc-pi-strength__bar span {
    flex: 0;
    opacity: .5;
    white-space: nowrap;
    font-size: .9em;
}

.psc-pi-strength[class*="psc-password-strength-weak"] .psc-pi-strength__bar span:nth-child(-n+1) {
    opacity: 1;
}

.psc-pi-strength[class*="psc-password-strength-fair"] .psc-pi-strength__bar span:nth-child(-n+2) {
    opacity: 1;
}

.psc-pi-strength[class*="psc-password-strength-strong"] .psc-pi-strength__bar span:nth-child(-n+3) {
    opacity: 1;
}

.psc-pi-strength[class*="psc-password-strength-verystrong"] .psc-pi-strength__bar span:nth-child(-n+4) {
    opacity: 1;
}

/**
 * Progress bar line
 */

.psc-pi-strength__bar::before,
.psc-pi-strength__bar::after {
    position: absolute;
    top: 0;
    content: '';
    display: block;
    height: 3px;
}

.psc-pi-strength__bar::before {
    width: 100%;
    background: #fff;
}

.psc-pi-strength__bar::after {
    width: 0;
    transition: all .1s ease-in;
    background-color: #3e7500;
}

.psc-password-strength-weak .psc-pi-strength__bar::after {
    width: 18%;
    background-color: #c72860;
}

.psc-password-strength-fair .psc-pi-strength__bar::after {
    width: 34%;
    background-color: #c72860;
}

.psc-password-strength-strong .psc-pi-strength__bar::after {
    width: 64%;
    background-color: #929a06;
}

.psc-password-strength-verystrong .psc-pi-strength__bar::after {
    width: 100%;
    background-color: #929a06;
}

.psc-showStrength:focus {
    outline: none;
}

.psc-pi-strength .pbuic-cb-arrow {
    display: none;
}

.psc-pi-strength .pbuic-content-bubble p {
    margin: 0;
    padding: 3px 5px;
    text-shadow: none;
    white-space: normal;
    font-weight: normal;
}

/**
 * 	styling for the input field and text message when invalid
 */

.psc-invalid input.proFormText:hover,
.psc-invalid input.proFormText:focus,
.psc-invalid input[type='text'],
.psc-invalid input[type='password'],
.psc-invalid input[type='text']:hover,
.psc-invalid input[type='password']:hover,
.psc-invalid input[type='text']:focus,
.psc-invalid input[type='password']:focus {
    background-color: #fff6f6;
}

.psc-password-repeat .pbuic-pr-no-match {
    color: #d2033a;
}