.inputBox {
    margin-top: 10px;
    position: relative;
}

.inputBox input {
    height: 50px;
    width: 100%;
    font-size: 12px;
    font-weight: 400;
    color: #4A4A4A;
    line-height: 17px;
    padding: 0 10px;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid #CDCDCD;
    box-shadow: none;
}

.inputBox input:focus {
    background: #FFFFFF;
    border-radius: 0;
    outline: 1px solid #003399;
    border: 1px solid #003399;
}

.inputBox input:hover {
    border-radius: 0;
    outline: 1px solid #003399;
    border: 1px solid #003399;
}

.inputBox input {
    padding-right: 36px;
}

.inputBox[input-status="focus"] .clearBtn {
    display: flex;
}

.inputBox[input-status="ok"] .verifyOk {
    display: flex;
}

.inputBox[input-status="normal-ok"] .clearBtn {
    display: flex;
}

.inputBox[input-status="normal-error"] .clearBtn {
    display: flex;
}

.inputBox[input-status="normal-error"] input {
    outline: 1px solid #E52F2C;
    border: 1px solid #E52F2C;
}

.inputBox[input-status="normal-error"] .verifyErrorMsg {
    display: flex;
}

.inputBox[input-status="error"] .verifyError {
    display: flex;
}

.inputBox[input-status="error"] input {
    outline: 1px solid #E52F2C !important;
    border: 1px solid #E52F2C !important;
}

.inputBox[input-status="error"] .verifyErrorMsg {
    display: flex;
}

.inputBox[input-status="alert"] .verifyErrorMsg {
    display: flex;
    color: #4A4A4A;
    font-size: 14px;
}

.inputBox[input-status="alert"] .verifyErrorMsg img {
    width: 16px;
    height: 16px;
}

.inputBox input::-webkit-input-placeholder {
    color: #9B9B9B;
}

.inputBox input::-moz-placeholder {
    color: #9B9B9B;
}

.inputBox input:-ms-input-placeholder {
    color: #9B9B9B;
}

.inputBox input:focus::-webkit-input-placeholder {
    color: transparent !important;
}

.inputBox input:focus:-ms-input-placeholder {
    color: transparent !important;
}

.inputBox input:focus::-moz-placeholder {
    color: #ffffff !important;
    opacity: 0;
}

.inputBox .clearBtn,
.inputBox .verifyOk,
.inputBox .verifyError {
    height: 50px;
    width: 36px;
    position: absolute;
    right: 0;
    display: none;
    align-items: center;
    top: 0;
    justify-content: center;
}

.inputBox input {
    padding-right: 36px;
}

.inputBox .previewBtn {
    display: none;
}

.inputBox.newPassword input,
.inputBox.oldPassword input {
    padding-right: 62px;
}

.inputBox.newPassword .previewBtn,
.inputBox.oldPassword .previewBtn {
    height: 50px;
    width: 26px;
    position: absolute;
    right: 0;
    display: none;
    align-items: center;
    top: 0;
    justify-content: start;
}

.inputBox.newPassword .previewBtn img,
.inputBox.oldPassword .previewBtn img {
    width: 16px;
    height: 16px;
}

.inputBox.newPassword .clearBtn,
.inputBox.newPassword .verifyOk,
.inputBox.newPassword .verifyError,
.inputBox.oldPassword .clearBtn,
.inputBox.oldPassword .verifyOk,
.inputBox.oldPassword .verifyError {
    right: 26px;
}

.inputBox .clearBtn img,
.inputBox .verifyOk img,
.inputBox .verifyError img {
    width: 16px;
    height: 16px;
}

.inputBox .verifyErrorMsg {
    display: none;
    /* align-items: center; */
    line-height: 17px;
    font-size: 12px;
    font-weight: 400;
    color: #E83632;
    line-height: 17px;
    margin-top: 10px;
}

.inputBox .verifyErrorMsg img {
    width: 16px;
    height: 14px;
    margin-top: 1px;
    margin-right: 5px;
}

.inputBox .popRight {
    display: none;
    width: 323px;
    height: 99px;
    position: absolute;
    background: url("/vcommon/theme/account/img/back_newpw_pop.png") no-repeat center center;;
    left: 380px;
    box-sizing: border-box;
    top: -26px;
    padding: 13px 12px 15px 20px;
}

.inputBox.newPassword .popRight p {
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 12px;
    font-weight: 400;
    color: #4A4A4A;
    line-height: 16px;
    align-items: center;
}

.inputBox.newPassword .popRight p:not(:first-child){
    margin-top: 10px;
}

.inputBox.newPassword .popRight p span{
    display: block;
    width: 8px;
    height: 8px;
    background: url("/vcommon/theme/account/img/icon_check_pw_icons.png") no-repeat;
    margin-right: 5px;
    background-position: 0px -18px;
    background-size: 100%;
}

.inputBox.newPassword .popRight p span[pw-status='ok'] {
    background-position: 0px -9px;
}

.inputBox.newPassword .popRight p span[pw-status='error'] {
    background-position: 0px 1px;
}


/*取消微软浏览器的密码小眼睛样式*/

.inputBox input[type="password"]::-ms-reveal {
    display: none;
}


/* 邮箱 火狐 隐藏问题 */

.inputBlock {
    width: 378px;
    border: 1px solid #CDCDCD;
}

.inputBlock input {
    width: 334px;
    border: none;
    padding: 0;
    margin: 0 36px 0 10px;
    text-indent: 0;
}

#userEmail[input-status="focus"] .inputBlock,
#email[input-status="focus"] .inputBlock {
    border-radius: 0;
    background-color: #ffffff;
    outline: 1px solid #003399;
    border: 1px solid #003399;
}

#userEmail[input-status="error"] .inputBlock,
#email[input-status="error"] .inputBlock {
    outline: 1px solid #E52F2C;
    border: 1px solid #E52F2C;
}

#userEmail input:hover,
#email input:hover {
    outline: none;
    border: none;
    background: none;
}

#userEmail input:focus,
#email input:focus {
    outline: none;
    border: none;
    background: none;
}

#userEmail[input-status="error"] input,
#email[input-status="error"] input {
    outline: none !important;
    border: none !important;
}

#email .clearBtn,
#email .verifyOk,
#email .verifyError {
    height: 50px !important;
}