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

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

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

.inputBox input:hover {
    border-radius: 0;
    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="error"] .verifyError {
    display: flex;
}

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

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

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

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

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

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

.inputBox .previewBtn {
    display: none;
}

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

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

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

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

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

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

.inputBox .verifyErrorMsg,.inputBox .smsSentMsg {
    display: none;
    align-items: center;
    line-height: 17px;
    font-size: 12px;
    font-weight: 400;

    line-height: 17px;
    margin-top: 10px;
}

.inputBox .verifyErrorMsg {
  color: #E83632;
}
.inputBox .smsSentMsg {
  color: #003399;
  width:250px;
}
.inputBox .verifyErrorMsg img,.inputBox .smsSentMsg img {
    width: 16px;
    height: 16px;
    margin-right: 3px;
}

.inputBox .popRight {
    display: none;
    width: 160px;
    height: 46px;
    position: absolute;
    background: #FBF9D2;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
    right: -185px;
    box-sizing: border-box;
    top: 2px;
    padding: 6px 10px;
}

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

.inputBox.newPassword .popRight::after {
    content: "";
    position: absolute;
    display: block;
    border-top: 8px solid transparent;
    border-right: 20px solid #FBF9D2;
    border-bottom: 8px solid transparent;
    top: 50%;
    transform: translateY(-50%);
    left: -20px;
}
