/*
 * AMC OTP Login || Custom Properties 
 */

:root {
    --otp-primary-accent-color: #025282;
    --otp-secondary-accent-color: #19abff;
    --otp-light-border-color: #e3e3e3; 
    --otp-light-bg-color: #eaeaea;
    --otp-error-bg-color:  #ffb8b8;
    --otp-error-accent-color: #5a0000;
    --otp-success-bg-color:  #e3ffd6;
    --otp-success-accent-color: #29602e;
}

/*
 * AMC OTP Login || Global
 */

.OTP_login_before_form,
.OTP_login_after_form {
    text-align: center;
    margin-bottom: 2em;
}

.OTP_login_form_notices {
    display: none;
    text-align: center;
    background: var(--otp-light-bg-color);
    margin-bottom: 2em;
    padding: 10px;
}

.OTP_login_form_notices.OTP_login_form_notices--display {
    display: block;
}

.OTP_login_form_notices.OTP_login_form_notices--error {
    background: var(--otp-error-bg-color);
    color: var(--otp-error-accent-color);
}

.OTP_login_form_notices.OTP_login_form_notices--success {
    background: var(--otp-success-bg-color);
    color: var(--otp-success-accent-color);
}

.OTP_login_form_wrapper:not(.OTP_login_form--stepOne) .OTP_login_form__fieldset--stepOne,
.OTP_login_form_wrapper:not(.OTP_login_form--stepOne) .OTP_login--stepOne {
    display: none;
}

.OTP_login_form_wrapper:not(.OTP_login_form--stepTwo) .OTP_login_form__fieldset--stepTwo,
.OTP_login_form_wrapper:not(.OTP_login_form--stepTwo) .OTP_login--stepTwo {
    display: none;
}

.OTP_login_form_wrapper:not(.OTP_login_form--stepThree) .OTP_login_form__fieldset--stepThree,
.OTP_login_form_wrapper:not(.OTP_login_form--stepThree) .OTP_login--stepThree {
    display: none;
}

.OTP_login_form {
    width: 100%;
    max-width: 350px;
    border: 1px solid var(--otp-light-border-color);
    padding: 20px;
    margin: 2em auto;
    overflow: hidden;
}

.OTP_login_form__feedback {
    margin-bottom: 1em;
    text-align: center;
}

.OTP_login_form__consultant_code {
    margin-bottom: 1em;
    font-size: 1.3em;
}

#OTP_consultant_code_provided {
    letter-spacing: 3px;
}

#OTP_masked_number_returned {
    opacity: .5;
    font-size: 1.3em;
    letter-spacing: 5px;
}

.OTP_login_form label {
    font-weight: bold;
    color: #737373;
}

.OTP_login_form__input {
    display: block;
}

.OTP_login_form__input--invalid {
    border: 2px solid var(--otp-error-bg-color) !important;
}

.OTP_login_form__error-message {
    background: var(--otp-error-bg-color);
    padding: 5px;
    color: var(--otp-error-accent-color);
    display: block;
    font-size: small;
    line-height: normal;
}

.OTP_login_form label .OTP_login_form__asterix {
    color: var(--otp-secondary-accent-color);
}

.OTP_login_form__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 1em;
}

.OTP_login_form__button,
.OTP_login_form__link {
    position: relative;
}

.OTP__button--disable {
    opacity: .5 !important;
    pointer-events: none !important
}

.OTP__button--loading {
    opacity: 1 !important;
    position: relative;
    color: rgba(255,255,255,0.05) !important;
    pointer-events: none !important;
}

.OTP__button--loading:after,
.OTP__link--loading:after {
    content: "" !important;
    animation: OTP_spin 500ms infinite linear;
    border-radius: 32px;
    display: block !important;
    height: 16px !important;
    top: 50% !important;
    margin-top: -8px !important;
    margin-left: -8px !important;
    position: absolute !important;
    width: 16px !important;
    background: transparent !important;
}

.OTP__button--loading:after {
    left: 50% !important;
    border: 2px solid #fff !important;
    border-right-color: transparent !important;
    border-top-color: transparent !important;
}

.OTP__link--loading:after {
    left: calc(100% + 16px) !important;
    border: 2px solid var(--otp-secondary-accent-color) !important;
    border-right-color: transparent !important;
    border-top-color: transparent !important;
}

.OTP__link--done:before{
    content:"";
    position: absolute;
    width:3px;
    height:15px;
    background-color: var(--otp-secondary-accent-color);
    left: calc(100% + 16px);
    top:3px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.OTP__link--done:after{
    content:"";
    position: absolute;
    width:7px;
    height:3px;
    background-color: var(--otp-secondary-accent-color);
    left: calc(100% + 8px);
    top:12px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

@keyframes OTP_spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

/*
 * AMC OTP Login || Media Rules
 */

@media(max-width: 450px) {

    .g-recaptcha > div {
        max-width: 100%;
        overflow: hidden;
        width: auto !important;
    }
    
    .OTP_login_form__buttons .OTP_login_form__button:not(:last-child) {
        margin-bottom: 1em;
    }
    
    .OTP_login_form__buttons .OTP_login_form__button {
        min-width: 100%;
        flex: 1 1;
        text-indent: 25px;
    }
    
    .OTP_login_form__buttons .OTP_login_form__button.amc-button--back {
        text-indent: -25px;
    }

}