.wrapper {
    margin: auto;
}

    .wrapper > img {
        content: url('/images/forgotPasswordBG1920.png');
        position: absolute;
        left: 0px;
    }

.wrapper-inner {
    display: inline-block;
    position: relative;
    display: table;
    background-color: rgba(255,255,255,1);
    box-shadow: -11px 0px 68px 0px rgba(0,0,0,0.1);
}

#errorMessage, .wrapper-inner {
    width: 472px;
    margin: auto;
    top: 150px;
}

#errorMessage {
    font-size: 19px;
    position: absolute;
    top: 0;
}

.loginFrame {
    position: relative;
    top: -147px;
}

.forgot-password-steptitle-wrapper {
    display: inline-flex;
}

.forgot-password-steptitle-wrapper-block {
    display: inline-block;
    margin: 50px 0px;
    width: 100%;
}

.forgot-password-steptitle {
    text-align: center;
    font-size: 23px;
    font-weight: 500;
    width: 285px;
    margin: auto;
    padding-top: 60px;
    height: 180px;
}

.btn-link {
    font-size: 15px;
}

hr.bold-title-hr {
    height: 1px;
    border: 0;
    border-top: 1px solid rgba(10,215,186,1) !important;
    margin-top: 25px;
    margin-bottom: 20px;
    padding: 0;
    width: 20%;
}

.create-user-background hr {
    display: none;
}

.forgot-password-editbox {
    text-align: center;
}

.field-validation-error {
    font-size: 14px;
    color: rgba(255,115,103,1);
    min-height: 14px;
    width: 297px;
    margin: auto;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: right;
}


.forgot-password-editbox input {
    width: 297px;
    margin-top: 20px;
    font-size: 23px;
    border: 1px solid rgba(222,220,220,1);
    height: 66px;
    font-weight: 300;
    padding: 15px;
}

.password-icon
{
    height: 0;
    background-size: 31px 23px;
    background-repeat: no-repeat;
    cursor: pointer;
    background-position: 13px center;
    position: relative;
    top: -66px;
    left: 0;
    border-right: 1px solid #C1C1C1;
    width: 297px;
    margin: auto;
}
.password-icon div{
background-image: url(../images/personalDetails/viewPassword.png);
    content: "";
    border-right: 1px solid rgba(222,220,220,1);
    position: absolute;
    height: 60%;
    top: 4px;
    left: 0;
    height: 55px;
    background-size: 31px 23px;
    background-repeat: no-repeat;
    width: 56px;
    background-position: center;
}

.forgot-password-button {
    font-size: 30px;
    background-color: rgba(29,142,255,1);
    color: white;
    text-align: center;
    margin: 20px auto 70px auto;
    cursor: pointer;
    line-height: 60px;
    height: 60px;
    width: 296px;
    box-shadow: 0px 0px 30px 0px rgba(34,36,39,0.1);
}

.error-message {
    font-size: 30px;
    height: 101px;
    position: relative;
    z-index: 1;
    text-align: center;
}

.verfication-code-popup .error-message {
    position: absolute;
}

.help, .forgot-password-label {
    font-size: 15px;
    color: gray;
    text-align: center;
    /*margin: 100px 0px 30px 0px;*/
}

.forgot-password-label-link {
    cursor: pointer;
    text-underline-position: below;
}

.place-holder {
    margin: 100px 0px 30px 0px;
    height: 30px;
}

/*verification code*/
.verfication-code-overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 50;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
}

.verfication-code-popup {
    width: 596px;
    background-color: white;
    margin: 0 auto;
    margin-top: 100px;
}

.verfication-code-popup, #codeErrorMessage {
    width: 596px;
}

.close-popup {
    float: left;
    cursor: pointer;
    background-image: url('../images/closePopup.png');
    width: 19px;
    height: 19px;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 18px 17px;
}

.verification-code-title {
    font-size: 21px;
    font-weight: 500;
    color: #222427;
    text-align: center;
    margin: 20px;
}

.editor-field {
    font-size: 16px;
}

.save-button {
    width: 188px;
    height: 47px;
    float: left;
    padding: 0;
    border: 1px solid #0ad7ba;
    font-size: 22px;
    font-weight: 500;
    background-color: #0ad7ba;
    color: white;
}

div.popup-body {
    padding: 25px 60px;
}

.verification-code-section {
    width: 274px;
    margin: 0 auto;
    text-align: center;
}

    .verification-code-section input {
        width: 100%;
        height: 42px;
        border: 1px solid #C1C1C1;
        padding: 0 8px;
    }

    .verification-code-section .editor-lable {
        font-size: 16px;
        color: #222427;
        font-weight: 300;
    }

    .verification-code-section .save-button {
        margin: 30px 0px;
        height: 42px !important;
        width: 100% !important;
    }

        .verification-code-section .save-button span {
            line-height: 45px;
        }

.verification-code-link {
    font-size: 16px;
}

a.verification-code-link {
    color: #1C8FFF;
    text-align: center;
    cursor: pointer;
}

    a.verification-code-link.link-disabled {
        color: #C1C1C1;
        pointer-events: none;
        cursor: default;
    }

.verfication-code-popup .error-message {
    font-size: 15px;
    color: white;
    background-color: #FF7368;
    text-align: center;
    padding: 12px;
    display: none;
    height: 85px;
    width: 596px;
}

.update-policy-wrapper .verfication-code-popup .error-message {
    padding: 0 12px;
    margin: 0;
}

.verfication-code-popup .error-message span {
    -webkit-transform: scale(0.76);
    -ms-transform: scale(0.76);
    transform: scale(0.76);
    display: inline-block;
}

.update-policy-wrapper .verfication-code-popup .error-message span {
    font-size: 20px;
    transform: translateY(-50%);
    top: 50%;
    position: relative;
    line-height: initial;
}

.contact-message {
    display: flex;
    justify-content: center;
    font-size: 18px;
    background-color: rgba(235,235,235,1);
    padding: 8px;
}

    .contact-message a {
        direction: ltr;
        margin-right: 3px;
    }

.forgot-password .save-button {
    background-color: rgba(29,142,255,1);
    border: 1px solid rgba(29,142,255,1);
    width: 297px !important;
    height: 66px !important;
    float: initial;
}

    .verification-code-section .save-button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.disable {
        opacity: 0.5;
    }

    .forgot-password .save-button .forgot-password-button:disabled {
        opacity: 0.5;
    }

.forgot-password .editor-field input {
    width: 297px !important;
    height: 66px !important;
}


.verfication-code-overlay .editor-lable {
    display: none;
}

.create-user-background .editor-field input::-webkit-input-placeholder {
    color: transparent;
}

.create-user-background .editor-field input:-moz-placeholder { /* Firefox 18- */
    color: transparent;
}

.create-user-background .editor-field input::-moz-placeholder { /* Firefox 19+ */
    color: transparent;
}

.create-user-background .editor-field input:-ms-input-placeholder {
    color: transparent;
}

.forgot-password .close-popup, #passwordChangedMessgae .close-popup {
    top: -50px;
    left: -15px;
    position: relative;
    color: white;
    background-image: url(../images/close.png);
}

#passwordChangedMessgae {
    background-color: rgba(255,255,255,1);
    height: 471px;
    width: 569px;
    position: fixed;
    display: none;
    z-index: 1000;
}

.forgot-password-messgae {
    font-size: 30px;
    font-weight: 500;
    color: rgba(34,36,39,1);
    text-align: center;
}

.password-changed-image {
    width: 64px;
    height: 64px;
    background-image: url(../images/registrationCompletefinish.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin: 100px auto 50px auto;
}

#passwordChangedMessgae > .forgot-password-button {
    margin: 45px auto 95px auto;
}

.verfication-code-overlay .buttons-wrapper {
    position: relative;
    height: 105px;
}

.verfication-code-overlay .plaese-wait-cover {
    background-color: rgba(245, 245, 245, 0.7);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    display: none;
}

.verfication-code-overlay .please-wait-section {
    left: 0;
    right: 0;
    z-index: 120;
    position: absolute;
    font-size: 18px;
    color: #222427;
    top: 0;
    display: none;
    width: 297px !important;
    height: 66px !important;
    margin: 30px auto;
}

.verfication-code-overlay .please-wait-text {
    max-width: 130px;
    display: inline-block;
}

.please-wait-icon {
    background-image: url('../images/personalDetails/spinner.gif');
    background-size: contain;
    background-repeat: no-repeat;
    width: 45px;
    height: 45px;
    display: inline-block;
    margin-right: 15px;
    top: 8px;
    position: relative;
}

.question-disclaimaer {
    font-size: 15px;
}

.call-us {
        pointer-events:none;
        cursor:default;
    }

@media (max-width:1640px) {
    wrapper > img {
        content: url('/images/background.png');
    }
}

@media (max-width:1640px) {
    .forgot-password wrapper-inner {
        height: 508px;
        width: 359px;
        right: 119px;
        top: 110px;
    }

    .forgot-password-steptitle {
        padding-top: 45px;
        font-size: 18px;
    }

    .reset-password {
        margin-top: 72px;
    }

    .forgot-password-editbox input {
        margin-top: 0px;
        height: 50px;
        width: 226px;
    }

    .field-validation-error {
        width: 226px;
    }

    .forgot-password-button {
        font-size: 20px;
        height: 50px;
        width: 225px;
        margin: 33px auto 57px auto;
    }

    #errorMessage, .wrapper-inner {
        width: 359px;
    }

    .verfication-code-popup {
        width: 433px;
        height: 358px;
    }

    .verfication-code-popup, #codeErrorMessage {
        width: 433px;
    }

    div.popup-body {
        padding: 25px 0px  0px  0px;
    }

    .update-policy-wrapper .verfication-code-popup div.popup-body {
        padding-bottom: 0;
    }

    .verification-code-title {
        font-size: 18px;
    }

    .verification-code-title .content-text {
        width:350px;
        margin:auto;
    }

    .forgot-password .save-button, .forgot-password .editor-field input {
        width: 226px !important;
        height: 50px !important;
    }

    .verification-code-link {
        font-size: 14px;
    }

    .forgot-password-steptitle-wrapper-block {
        margin: 0;
    }

    .forgot-password-label {
        font-size: 12px;
        margin-top: 8px;
    }

    #newPasswordFrame > .forgot-password-steptitle {
        height: 150px;
    }

    #passwordChangedMessgae {
        height: 358px;
        width: 434px;
    }

    .password-changed-image {
        margin: 80px auto 30px auto;
    }
}
@media (max-width: 1650px) {
 .forgot-password-editbox input {
        font-size: 17px;
    }

    .password-icon{
        width:226px;
    }
    .password-icon div{
        top: 22px;
        height:40px;
    }
}
@media (max-width: 1400px) {

    .verfication-code-popup, #codeErrorMessage {
        width: 540px;
    }

    .update-policy-wrapper .verfication-code-popup #codeErrorMessage {
        top: initial;
        right: initial;
        position: relative;
    }

   

    #errorMessage, .wrapper-inner {
        width: 359px;
    }

    .forgot-password-steptitle {
        height: 140px;
    }
}

@media (max-width:1200px) {

    .wrapper > img {
        content: url('/images/forgotPasswordBG922.png');
        position: absolute;
        left: 0px;
    }
}

@media (max-width:768px) {
    .wrapper > img {
        content: url('/images/forgotPasswordBG768.png');
        position: absolute;
        left: 0px;
    }

    .verfication-code-popup {
        margin-top: 250px;
    }
}

@media (max-width: 600px) {
    .wrapper {
        position: relative;
    }

        .wrapper > img {
            content: none;
        }

    #errorMessage, .wrapper-inner {
        position: fixed;
        width: 100%;
        top: 33px;
        right: 0px;
    }

    .reset-password #errorMessage {
        top: 84px;
        padding-top: 59px;
    }

    #errorMessage {
        font-size: 16px;
    }

    .forgot-password .wrapper-inner {
        position: initial;
        width: 100%;
        height: Calc(100vh - 55px);
    }

    .forgot-password-steptitle {
        font-size: 20px;
        width: 249px;
        padding-top: 80px;
        height: auto;
    }

    .forgot-password-editbox input {
        height: 41px;
        width: 234px;
        font-size: 16px;
    }

    .password-icon{
        width:234px;
    }
    .password-icon div{
        top: 30px;
        height:34px;
    }


    .field-validation-error {
        width: 234px;
    }

    .forgot-password-button {
        font-size: 18px;
        height: 56px;
        width: 100%;
        margin: auto;
        position: fixed;
        bottom: 0;
    }

	.reset-password #loginFrame .forgot-password-button, .reset-password #passwordChangedMessgae > .forgot-password-button {
		bottom:73px;
	}

    .contact-message {
        background: none;
        font-size: 12px;
        position: absolute;
        bottom: 93px;
        margin: auto;
        text-align: center;
        left: 0;
        right: 0;
    }

    span.contact-icon {
        width: 15px;
        height: 16px;
        background-image: url(/images/contact/callCenter.png);
        background-size: 13px;
        background-color: rgba(255,255,255,1);
    }

    .call-us {
        pointer-events:initial;
        cursor:pointer;
    }

    .verfication-code-popup, #codeErrorMessage {
        width: 315px;
        max-width: 95%;
    }

    .update-policy-wrapper .verfication-code-popup {
        height: 400px;
        margin-top: 150px;
        position: relative;
    }

        .update-policy-wrapper .verfication-code-popup #codeErrorMessage {
            display: block;
            position: absolute;
            bottom: -15px;
            max-width: 100%;
        }

        .update-policy-wrapper .verfication-code-popup .error-message span {
            font-size: 15px;
            /*transform: translateY(-50%); 
        top: 50%; 
        position: relative; 
        line-height: initial;*/
        }

    .update-policy-wrapper .forgot-password .close-popup {
        top: -37px;
        left: 0px;
    }

    .verification-code-title {
        font-size: 15px;
        margin: 10px 0px;
    }
    .verification-code-title .content-text {
        width:100%;
    }

    div.popup-body {
        padding: 20px 30px;
    }

    .verification-code-section {
        width: 100%;
    }

        .verification-code-section input {
            height: 37px;
        }

        .verification-code-section .editor-lable {
            font-size: 13px;
            text-align: center;
        }

        .verification-code-section .save-button {
            margin: 20px 0px;
            height: 37px !important;
        }

            .verification-code-section .save-button span {
                line-height: 38px;
            }

    a.verification-code-link {
        font-size: 12px;
    }

    .close-popup {
        width: 12px;
        height: 12px;
        margin: 10px 8px;
    }

    .forgot-password .save-button, .forgot-password .editor-field input {
        width: 234px !important;
        height: 41px !important;
        margin-top: 33px;
    }

    #passwordChangedMessgae {
        height: 100vh;
        width: 100%;
        position: absolute;
        top: 0;
        right: 0;
    }

        #passwordChangedMessgae > .forgot-password-button {
            margin: auto;
        }

    .password-changed-image {
        margin: 148px auto 30px auto;
    }

    .alert-close {
        display: none;
    }

    hr.bold-title-hr {
        margin-bottom: 10px;
    }

    hr.bold-title-hr-steptitle {
        margin-bottom: 60px;
    }

    .forgot-password-editbox {
        margin-top: 14px;
    }

    .question-disclaimaer {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .verfication-code-popup {
        margin-top: 120px;
    }
}
@media (max-width:600px) and (max-height:450px) {
     .contact-message {
        display: none;
    }
}
@media (max-width:600px) and (max-height:400px) {
    .forgot-password .wrapper-inner {
        min-height: 486px;
    }

    .update-policy-wrapper .verfication-code-popup .verification-code-title {
        display:none;
    }
    .update-policy-wrapper .verfication-code-popup hr.bold-title-hr{
        display:none;
    }

    .verfication-code-popup{
        margin-top: 34px;
    }
    .verfication-code-overlay .buttons-wrapper {
        height: 62px;
    }
    .forgot-password .close-popup {
        background-image: url(../images/closePopup.png);
        top: 0;
        left: 0;
    }
    .forgot-password .save-button, .forgot-password .editor-field input {
        margin-top: 10px;
    }

    .forgot-password hr.bold-title-hr{
        margin-top: 10px;
    }
}