:root {
    --input-field-width: 418px;
    --login-block-container: #f7f8fb;
    --login-block-container-header: #eff3f8;
    --login-section-container-width: 792px;
}

.ff-login-register-page-container{
    padding-bottom: 50px !important;
    background: var(--login-block-container);
    border-radius: 10px;
    max-width: var(--login-section-container-width) !important;
    min-width: var(--login-section-container-width);
}
.ff-lost-password-page-container{
    margin-top: 52px !important;
    background: var(--login-block-container);
    border-radius: 10px;
    max-width: var(--login-section-container-width) !important;
    min-width: var(--login-section-container-width);
}

.ff-login-page-title-section{
    background-color: var(--login-block-container-header);
    height: 92px;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.ff-login-page-title{
    text-align: center;
    font-size: 26px !important;
    font-weight: 700 !important;
    margin: 0;
}

.ff-social-login-section{
    display: flex;
    justify-content: space-around;
    align-items: center;
    column-gap: 0 !important;
    margin-top: 50px;
}

.ff-social-facebook-login{
    flex-basis: 50%;
    display: flex;
    justify-content: end;
    align-items: center;
    margin-right: 7px;
}

.ff-social-google-login{
    flex-basis: 50%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-left: 7px;
}

.ff-social-facebook-login .ff-social-login-button{
    background-color: #3C5999;
    color: var(--white);
    border: none;
}

.ff-social-google-login .ff-social-login-button{
    background-color: #DD4833;
    color: var(--white);
    border: none;
}

.ff-social-login-button{
    width: 170px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 22.5px;
}

.ff-social-login-button-label{
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    margin-left: 15.5px;
    color: var(--white);
}


.ff-social-login-or{
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    margin-top: 29px;
    margin-bottom: 23px;
}

.ff-login-email{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-bottom: 29px !important;
}
.ff-lost-password-email{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-bottom: 29px !important;
}
.ff-login-password{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-bottom: 29px !important;
}

.ff-login-email input{
    background-color: var(--white) !important;
    border: 1px solid var(--login-block-container-header) !important;
    border-radius: 8px !important;
    height: 51px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding-left: 24px !important;
    width: var(--input-field-width) ;
}
.ff-lost-password-email input{
    background-color: var(--white) !important;
    border: 1px solid var(--login-block-container-header) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    height: 51px !important;
    font-size: 14px !important;
    padding-left: 24px !important;
    width: 470px ;
}

.ff-lost-password-email input::placeholder,
.ff-login-email input::placeholder,
.ff-login-password input::placeholder{
    color: rgb(0, 0, 0, .5);
}

.ff-login-password input{
    background-color: var(--white) !important;
    border: 1px solid var(--login-block-container-header) !important;
    border-radius: 10px !important;
    height: 51px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding-left: 24px !important;
    width: var(--input-field-width) !important;
}

.ff-login-password input::placeholder{
    color: rgb(0, 0, 0, .5);
}

.ff-login-submit-button-section{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
}

.fjfr-login-reg-cta {
    display: flex;
    justify-content: center;
}

.fjfr-login-reg-cta a {
    color: var(--wd-primary-color);
}

.ff-lost-password-submit-button-section{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.ff-register-submit-button{
    background-color: var(--navy) !important;
    border: none !important;
    border-radius: 26px !important;
    height: 52px !important;
    width: 132px !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    color: var(--white) !important;
    cursor: pointer !important;
}

.ff-lost-password-submit-button{
    background-color: var(--navy) !important;
    border: none !important;
    border-radius: 26px !important;
    height: 52px !important;
    width: fit-content !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    color: var(--white) !important;
    cursor: pointer !important;
}


.ff-login-register-page-container .form-row-username,
.ff-login-register-page-container .form-row-password
{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.ff-login-register-page-container .form-row-username input{
    background-color: var(--white) !important;
    border: 1px solid var(--login-block-container-header) !important;
    border-radius: 8px !important;
    height: 51px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding-left: 24px !important;
    width: var(--input-field-width) ;
}

.ff-login-register-page-container .form-row-password input{
    background-color: var(--white) !important;
    border: 1px solid var(--login-block-container-header) !important;
    border-radius: 8px !important;
    height: 51px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding-left: 24px !important;
    width: var(--input-field-width) ;
}


.ff-login-register-page-container .show-password-input{
    height: 100% !important;
}

.ff-login-register-page-container .woocommerce-form-login button.woocommerce-form-login__submit{
    background-color: var(--orange) !important;
    border: none !important;
    border-radius: 26px !important;
    height: 52px !important;
    width: 132px !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    color: var(--white) !important;
    cursor: pointer !important;
}

.ff-login-form .login-form-footer{
    justify-content: center !important;
}

.ff-login-section-lost-password-remember-me{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: var(--input-field-width) !important;
}

.ff-lost-password-page{
    margin: auto !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

.ff-register-submit-button::after {
  content: "" !important;
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  top: 1px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%23fff' d='M439.1 297.4C451.6 309.9 451.6 330.2 439.1 342.7L279.1 502.7C266.6 515.2 246.3 515.2 233.8 502.7C221.3 490.2 221.3 469.9 233.8 457.4L371.2 320L233.9 182.6C221.4 170.1 221.4 149.8 233.9 137.3C246.4 124.8 266.7 124.8 279.2 137.3L439.2 297.3z'/%3E%3C/svg%3E") !important;
}

.wd-registration-page{
    flex-direction: column;
    width: var(--login-section-container-width) !important;
    justify-content: center !important;
}

.ff-login-section{
    margin: 0 !important;
}

/** Login & Registration style Start **/
#customer_login {
    width: 100%;
    display: flex;
    justify-content: center;
}

.wd-registration-page {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.wd-col.col-register, .wd-col.col-login {
    width: 50% !important;
    max-width: 50% !important;
    padding: 0px;
}
/** Login & Registration style End **/

@media (max-width: 767px) {

    .wd-registration-page{
        width: 100% !important;
    }
    .wd-registration-page .ff-login-section .ff-login-form.login.woocommerce-form.woocommerce-form-login{
        padding: 25px;
    }
}



@media (max-width: 430px) {
    .ff-login-register-page-container{
        min-width: 100% !important;
        max-width: 100% !important;
    }

   .ff-social-login-section{
        flex-direction: column;
        row-gap: 20px !important;
    }

    .ff-social-facebook-login{
        margin-right: 0 !important;
    }
    .ff-social-google-login{
        margin-left: 0 !important;
    }

    .ff-login-email input,
    .ff-login-password input{
        width: 80% !important;
    }

}