/*
 * @author: Procurios
 * @about: 	This file defines the default 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;
}

/**
 * 	password strength input container
 */

.psc-password-input,
.psc-password-repeat {
    max-width: 30.3em;
}

.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 {
    width: 100%;
    display: block;
    overflow: hidden;
    height: 40px;
    margin-top: 6px;
    font-size: 0;
    color: transparent;
    background: url('https://crownmelresort.com/www.wfanet.org/passwordstrength.svg') no-repeat 0 0;
    opacity: .5;
}

.psc-pi-strength[class*="psc-password-strength-"] .psc-ps-text {
    opacity: .9;
}

.psc-pi-strength .psc-ps-text::before,
.psc-pi-strength .psc-ps-text::after {
    content: '';
    display: block;
    height: 3px;
    margin-top: 4px;
    border-radius: 2px;
}

.psc-pi-strength .psc-ps-text::before {
    width: 100%;
    background: #fff;
}

.psc-pi-strength .psc-ps-text::after {
    width: 0;
    margin-top: -3px;
    transition: all .1s ease-in;
    background-color: #3e7500;
}

.psc-password-strength-weak .psc-ps-text::after {
    width: 18%;
    background-color: #d4d4d4;
}

.psc-password-strength-fair .psc-ps-text::after {
    width: 34%;
    background-color: #9aa77d;
}

.psc-password-strength-strong .psc-ps-text::after {
    width: 64%;
    background-color: #8eaf43;
}

.psc-password-strength-verystrong .psc-ps-text::after {
    width: 100%;
    background-color: #a0db19;
}

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

.psc-pi-strength .pbuic-content-bubble {
    right: 0;
    width: 200px;
    left: 0;
    margin: auto;
    top: 0 !important;
}

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

/**
 * 	styling for the inpunt 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;
}