#pmprosp-password-strength {
vertical-align: super;
border: none;
font-size: 13px;
font-weight: 700;
line-height: 10px;
margin-left: var(--pmpro--base--spacing--medium);
min-width: 80px;
text-align: left;
}
#pmprosp-password-strength.good, 
#pmprosp-password-strength.strong, 
#pmprosp-password-strength.short, 
#pmprosp-password-strength.bad {
display: inline-block;
-webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;
}
#pmprosp-password-strength.good {
color: rgb(113, 78, 14);
}
#pmprosp-password-strength.strong {
color: rgb(38, 63, 32);
}
#pmprosp-password-strength.bad {
color:rgb(113, 8, 8);
}
#pmprosp-password-strength.short {
color: rgb(113, 8, 8);
}
.pmpro_form-strong-password-indicator {
align-items: center;
display: flex;
margin-bottom: var(--pmpro--base--spacing--medium);
}
.pmprosp-progressbar {
background-color: #419E39;
background-image: linear-gradient(to right, #D92132 10%, #E34F19 25%, #FF9500 40%, #ffe600 70%, #15770c 90%);
border-radius: 10px;
height: 10px;
overflow: hidden;
position: relative;
width: 100%;
}
.pmprosp-progressbar-status {
background-color: transparent;
border-radius: 10px;
box-shadow: 500px 0 0 500px #aaaaaa;
display: block;
height: 10px;
left: 0;
position: absolute;
top: 0;
width: 0%;
-webkit-transition: width 1s ease-in-out; transition: width 1s ease-in-out;
}
.pmpro-variation_high_contrast {
.pmprosp-progressbar,
.pmprosp-progressbar-status {
border-radius: 0;
}
}
span.pmprosp-tooltip__password {
margin-left: 10px;
border-bottom: 1px dotted;
cursor: help;
font-weight: normal;
vertical-align: super;
font-size: 10px;
}
[data-tooltip] {
position: relative;
z-index: 10;
} [data-tooltip]:before,
[data-tooltip]:after {
position: absolute;
visibility: hidden;
opacity: 0;
left: 50%;
bottom: calc(100% + 5px);
pointer-events: none;
transition: 0.2s;
will-change: transform;
} [data-tooltip]:before {
content: attr(data-tooltip);
padding: 10px 18px;
min-width: 50px;
max-width: 300px;
width: max-content;
width: -moz-max-content;
border-radius: 6px;
font-size: 14px;
background-color: rgba(59, 72, 80, 0.9);
background-image: linear-gradient(30deg,
rgba(59, 72, 80, 0.44),
rgba(59, 68, 75, 0.44),
rgba(60, 82, 88, 0.44));
box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2);
color: #fff;
text-align: center;
white-space: pre-wrap;
transform: translate(-50%, -5px) scale(0.5);
} [data-tooltip]:after {
content: '';
border-style: solid;
border-width: 5px 5px 0px 5px;
border-color: rgba(55, 64, 70, 0.9) transparent transparent transparent;
transition-duration: 0s; transform-origin: top; transform: translateX(-50%) scaleY(0);
} [data-tooltip]:hover:before,
[data-tooltip]:hover:after {
visibility: visible;
opacity: 1;
} [data-tooltip]:hover:before {
transition-delay: 0.3s;
transform: translate(-50%, -5px) scale(1);
} [data-tooltip]:hover:after {
transition-delay: 0.5s; transition-duration: 0.2s;
transform: translateX(-50%) scaleY(1);
}   [data-tooltip-location="left"]:before,
[data-tooltip-location="left"]:after {
left: auto;
right: calc(100% + 5px);
bottom: 50%;
} [data-tooltip-location="left"]:before {
transform: translate(-5px, 50%) scale(0.5);
}
[data-tooltip-location="left"]:hover:before {
transform: translate(-5px, 50%) scale(1);
} [data-tooltip-location="left"]:after {
border-width: 5px 0px 5px 5px;
border-color: transparent transparent transparent rgba(55, 64, 70, 0.9);
transform-origin: left;
transform: translateY(50%) scaleX(0);
}
[data-tooltip-location="left"]:hover:after {
transform: translateY(50%) scaleX(1);
} [data-tooltip-location="right"]:before,
[data-tooltip-location="right"]:after {
left: calc(100% + 5px);
bottom: 50%;
}
[data-tooltip-location="right"]:before {
transform: translate(5px, 50%) scale(0.5);
}
[data-tooltip-location="right"]:hover:before {
transform: translate(5px, 50%) scale(1);
}
[data-tooltip-location="right"]:after {
border-width: 5px 5px 5px 0px;
border-color: transparent rgba(55, 64, 70, 0.9) transparent transparent;
transform-origin: right;
transform: translateY(50%) scaleX(0);
}
[data-tooltip-location="right"]:hover:after {
transform: translateY(50%) scaleX(1);
} [data-tooltip-location="bottom"]:before,
[data-tooltip-location="bottom"]:after {
top: calc(100% + 5px);
bottom: auto;
}
[data-tooltip-location="bottom"]:before {
transform: translate(-50%, 5px) scale(0.5);
}
[data-tooltip-location="bottom"]:hover:before {
transform: translate(-50%, 5px) scale(1);
}
[data-tooltip-location="bottom"]:after {
border-width: 0px 5px 5px 5px;
border-color: transparent transparent rgba(55, 64, 70, 0.9) transparent;
transform-origin: bottom;
}