/*
 * @author: procurios.nl
 * @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. Hide in browsers that don't support changing type values with JS */
.psc-show-password {
    display: none;
}

/**
 *  Show/hide password text label
 */

.psc-show-password label.field {
    float: none;
    display: inline-block;
    width: auto;
    padding: 0 0 0 .5em;
    vertical-align: middle;
}

/**
 *  Password strength input container
 */

.psc-pi-strength {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}

.psc-pi-strength input {
    position: relative;
    z-index: 20;
}

/**
 * 	Strength text element
 */

.psc-password-strength-weak .psc-showStrength {
    box-shadow: 0 -1px 0 #e92943 inset; border-bottom-color: #e92943;
}

.psc-password-strength-fair  .psc-showStrength {
    box-shadow: 0 -1px 0 #985B4A inset; border-bottom-color: #985B4A;
}

.psc-password-strength-strong .psc-showStrength {
    box-shadow: 0 -1px 0 #518750 inset; border-bottom-color: #518750;
}

.psc-password-strength-verystrong .psc-showStrength {
    box-shadow: 0 -1px 0 #18aa55 inset; border-bottom-color: #18aa55;
}

.psc-ps-text {
    display: inline-block;
    vertical-align: middle;
    visibility: hidden;
    font-style: italic;
    cursor: help;
}

.psc-ps-text::before {
    content: '•';
    margin-right: .2rem;
    vertical-align: middle;
    border-radius: 1em;
    font-family: monospace;
    font-size: 1.5em;
}

.psc-password-strength-weak .psc-ps-text::before {
    color: #e92943;
}

.psc-password-strength-fair  .psc-ps-text::before {
    color: #985B4A;
}

.psc-password-strength-strong .psc-ps-text::before {
    color: #518750;
}

.psc-password-strength-verystrong .psc-ps-text::before {
    color: #18aa55;
}

.psc-password-strength-weak .psc-ps-text,
.psc-password-strength-fair .psc-ps-text,
.psc-password-strength-strong .psc-ps-text,
.psc-password-strength-verystrong .psc-ps-text {
    padding: .1em .8em;
    visibility: visible
}

.psc-password-repeat span,
span.psc-password-information {
    display: block;
    padding: 1ex 0 .2ex 0;
    color: #5f5f5f;
}

.psc-pi-strength .psc-showStrength:focus {
    outline-style: outset
}

.psc-pi-strength .pbuic-content-bubble {
    right: -75px;
    width: 200px;
}

.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: #fee;
}

.psc-password-repeat {
    margin-bottom: .5em;
}

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