.passwordIndicator{
    display: none;
    z-index: 100;
    width: 376px;
    height: 180px;
    background: #fff;
    border: 1px solid #DCDCDC;
    border-radius: 5px;
    position: absolute;
    font-size: 13px;
    padding: 25px 17px;
    box-sizing: border-box;
    text-align: left;
    color: #222;
    -webkit-font-smoothing: antialiased;
    word-wrap: break-word;
    font-style: normal;
}
.passwordIndicator:before {
    content: '';
    position: absolute;
    top: -7px;
    right: 50%;
    padding: 6px;
    background: inherit;
    border: inherit;
    border-right: 0;
    border-bottom: 0;
    transform: rotate(45deg);
}
.passwordIndicator_top:before{
    top: auto;
    bottom: -7px;
    transform: rotate(224deg);
}
.passwordIndicator .u-title {
    font-size: 13px;
    color: #1C201E;
}
.passwordIndicator .u-title span{
    font-size: 16px;
    font-weight: 500;
}
.passwordIndicator .difficultyBox {
    width: 100%;
    height: 8px;
    border-radius: 19px;
    margin-top: 20px;
    position: relative;
}

.passwordIndicator .difficultyBox .u-item {
    width: 100%;
    height: 8px;
    border-radius: 10px;
    opacity: 0.1;
}
.passwordIndicator .difficultyBox .u-item-bar {
    width: 70px;
    height: 8px;
    position: absolute;
    top: 0px;
    left: 0px;
    transition: width .5s ease-in-out;
}

/* init */
.passwordIndicator .pwd-init .u-item-bar {
    width: 5%;
    background: yellow;
    border-radius: 10px;
    background: linear-gradient(90deg, #FFD800 0%, #d12219 100%);
}
/* weak */
.passwordIndicator .pwd-weak .u-item-bar {
    width: 33%;
    background: yellow;
    border-radius: 10px;
    background: linear-gradient(90deg, #FFD800 0%, #d12219 100%);
}
/* goog */
.passwordIndicator .pwd-good .u-item-bar {
    width: 66%;
    background: red;
    border-radius: 10px;
    background: linear-gradient(90deg, #FFDB16 0%, #d3720e 100%);
}
/* strong */
.passwordIndicator .pwd-strong .u-item-bar {
    width: 100%;
    background: red;
    border-radius: 10px;
    background: linear-gradient(90deg, #FFDB16 0%, #06ac67 100%);
}
.passwordIndicator .u-tip {
    line-height: 22px;
    padding-top: 20px;
    font-size: 12px;
    font-weight: 400;
    color: #1C201E;
}
.passwordIndicator .password-selected {
    color: #1C201E;
    position: relative;
    background: url(data:image/png;base64,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) no-repeat;
    background-size: 20px 20px;
    background-position: right center;
    padding-right: 30px;
}
.password-tip span{
    font-size: 14px;
    color: #F53131;
}
.password-tip .password-selected::before{
    content: '' !important;
    position: absolute;
    right: -22px;
    top: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1C201E;
    font-size: 12px;
}

.verify_correct{

}