/* =========================================================
   VOYAGE LOGICS
   COMMON EMAIL + MOBILE OTP CSS
   ========================================================= */


/* ================================
   VERIFICATION STATUS
================================ */

.verification-status {
    display: block;
    margin-top: 6px;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
}

.verification-status.verified {
    color: #00a83b;
}

.verification-status.not-verified {
    color: #e69500;
}


/* ================================
   COMMON OTP AREA
================================ */

.otp-section {
    margin-top: 6px;
    width: 100%;
}


/* ================================
   OTP BUTTONS
================================ */

.otp-btn,
#sendOtpBtn,
#verifyOtpBtn,
#resendOtpBtn,
#sendMobileOtpBtn,
#verifyMobileOtpBtn,
#resendMobileOtpBtn {

    display: inline-block !important;

    height: 34px;
    min-height: 34px;

    padding: 5px 12px;

    margin-top: 3px;
    margin-right: 5px;
    margin-bottom: 5px;

    font-size: 13px;
    font-weight: 400;

    line-height: 22px;

    border: 1px solid #ccc;
    border-radius: 3px;

    cursor: pointer;

    vertical-align: middle;

    box-sizing: border-box;
}


/* Disabled button */

.otp-btn:disabled,
#sendOtpBtn:disabled,
#verifyOtpBtn:disabled,
#resendOtpBtn:disabled,
#sendMobileOtpBtn:disabled,
#verifyMobileOtpBtn:disabled,
#resendMobileOtpBtn:disabled {

    opacity: 0.65;
    cursor: not-allowed;
}


/* ================================
   OTP INPUT
================================ */

.otp-input,
#otp,
#mobile-otp {

    display: inline-block;

    width: 200px;
    height: 34px;

    padding: 6px 10px;

    margin-top: 3px;
    margin-right: 5px;
    margin-bottom: 5px;

    font-size: 14px;

    border: 1px solid #ccc;
    border-radius: 3px;

    box-sizing: border-box;

    vertical-align: middle;
}


/* ================================
   EMAIL OTP
================================ */

#otpSection {

    width: 100%;
    margin-top: 6px;
}


/* ================================
   MOBILE OTP
================================ */

#mobileOtpSection {

    width: 100%;
    margin-top: 6px;
}


/* ================================
   MOBILE VERIFICATION STATUS
================================ */

#mobileVerificationStatus {

    display: block;

    margin-top: 6px;
    margin-bottom: 7px;

    font-size: 13px;
    line-height: 18px;
}


/* ================================
   EMAIL VERIFICATION STATUS
================================ */

#emailVerificationStatus {

    display: block;

    margin-top: 6px;
    margin-bottom: 7px;

    font-size: 13px;
    line-height: 18px;
}


/* ================================
   MOBILE OTP ROW
================================ */

.mobile-otp-row {

    display: flex;
    flex-wrap: wrap;
    align-items: center;

    width: 100%;
}


/* ================================
   EMAIL OTP ROW
================================ */

.email-otp-row {

    display: flex;
    flex-wrap: wrap;
    align-items: center;

    width: 100%;
}


/* ================================
   SMALL SCREEN
================================ */

@media (max-width: 576px) {

    .otp-input,
    #otp,
    #mobile-otp {

        width: 200px;
        max-width: 100%;
    }

    .otp-btn,
    #sendOtpBtn,
    #verifyOtpBtn,
    #resendOtpBtn,
    #sendMobileOtpBtn,
    #verifyMobileOtpBtn,
    #resendMobileOtpBtn {

        margin-bottom: 6px;
    }
}