/* Fondo todos los forms */
.home.path-frontpage #main-wrapper,
#recipes #main-wrapper,
.node--type-recipe #main-wrapper,
.search #main-wrapper,
.path-my-recipe-book #main-wrapper,
.consumerlogin #main-wrapper,
.consumerregister #main-wrapper,
.consumerverify-user-email #main-wrapper,
.consumerpassword #main-wrapper,
.consumerreset-user-password #main-wrapper,
.consumerchange-password #main-wrapper,
.consumerthank-you #main-wrapper,
.consumer #main-wrapper {
  background-image: url("./assets/img-forms/fondos-forms.png");
  background-size: contain;
  background-repeat: repeat;
  background-position: center;
  background-color: #f4efe2!important;
  min-height: calc(100vh - 11.98vw);
}

@media (max-width: 767px) {
  .home.path-frontpage #main-wrapper,
  #recipes #main-wrapper,
  .node--type-recipe #main-wrapper,
  .search #main-wrapper,
  .path-my-recipe-book #main-wrapper,
  .consumerlogin #main-wrapper,
  .consumerregister #main-wrapper,
  .consumerverify-user-email #main-wrapper,
  .consumerpassword #main-wrapper,
  .consumerreset-user-password #main-wrapper,
  .consumerchange-password #main-wrapper,
  .consumerthank-you #main-wrapper,
  .consumer #main-wrapper {
    background-image: url("./assets/img-forms/fondo-forms-mobile.png");
    min-height: calc(100vh - 100%);
  }
}

/* Consumer */
.consumer .containerRegister__left {
  text-align: center;
}

.consumer .containerRegister__left h1 {
  margin-bottom: 1vw;
}

.consumer .containerRegister__right {
  margin: 0;
}

.consumer .containerRegister__right__checkboxesTerms .form-checkbox:checked + label::before {
  line-height: 13px;
}

/* LOGIN */
.containerLogin {
  background-color: #ffffff;
  margin-top: 4vw;
  margin-bottom: 4vw;
  border-radius: 25px;
  flex-wrap: wrap;
  height: auto;
  min-height: 30vw;
  width: 80%;
}

.consumerlogin #main-wrapper .col-lg-6.col-md-12.col-12 {
  flex: 0 0 100%;
  max-width: 100% !important;
  margin: 0 auto;
}

.containerLogin__left {
  flex-basis: calc(45% - 2rem);
  padding: 2rem;
}

.containerLogin__right {
  flex-basis: calc(50% - 2rem);
  padding: 2rem;
}

.containerLogin__left {
  order: 1;
}

.containerLogin__divisor {
  flex-basis: 0.1vw;
  background-color: #2b45ff;
  border: 1px solid #2b45ff;
  margin-top: 2rem;
  margin-bottom: 2rem;
  order: 2;
  height: 19vw;
  margin-top: 5vw;
}

.containerLogin__left h1 {
  color: #2b45ff !important;
  font-family: "galano_grotesquebold" !important;
  font-size: 28px;
  font-weight: bolder;
  margin-bottom: 4vw;
}

.containerLogin__left__joy,
.containerLogin__left__facebook,
.containerLogin__left__google,
.containerLogin__left__apple {
  padding: 1vw;
  color: #fff;
  border-radius: 25px;
  font-family: "galano_grotesqueregular" !important;
  font-size: 17px;
  text-align: center;
  margin-bottom: 1vw;
}

.containerLogin__left__facebook {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #364f89;
  max-height: 4vw;
  height: auto;
}

.containerLogin__left__facebook_logo {
  flex: 0 0 auto;
  width: 1vw;
}

.containerLogin__left__facebook p {
  flex: 1;
  text-align: center;
  color: #ffffff;
  font-family: "galano_grotesqueregular" !important;
  font-size: 17px;
  padding-bottom: 0;
  margin-bottom: 0;
}

.containerLogin__left__joy {
  background-color: #4c23f6;
  padding: 1vw;
}

.containerLogin__left__joy span {
  text-decoration: none;
}

.containerLogin__left__joy__logoJoy {
  width: 4vw;
  padding-left: 0.65vw;
}

.containerLogin__left__google {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border: 1px solid #e6e1e1;
  color: #000000;
  max-height: 4vw;
  height: auto;
}

.containerLogin__left__google_logo {
  flex: 0 0 auto;
  width: 1.3vw;
}

.containerLogin__left__google p {
  flex: 1;
  text-align: center;
  color: #000000;
  font-family: "galano_grotesqueregular" !important;
  font-size: 17px;
  padding-bottom: 0;
  margin-bottom: 0;
}

.containerLogin__left__apple {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000000;
  color: #ffffff;
  max-height: 4vw;
  height: auto;
}

.containerLogin__left__apple_logo {
  flex: 0 0 auto;
  width: 1.3vw;
}

.containerLogin__left__apple p {
  flex: 1;
  text-align: center;
  color: #ffffff;
  font-family: "galano_grotesqueregular" !important;
  font-size: 17px;
  padding-bottom: 0;
  margin-bottom: 0;
}

.containerLogin__right {
  order: 2;
  margin-top: 10vw;
  margin-left: 2vw;
}

.containerLogin__right label.js-form-required.form-required {
  color: #2b45ff;
}

.containerLogin__right input#edit-name,
.containerLogin__right input#edit-pass {
  border-radius: 25px;
  width: 100%;
  border: 1px solid #b1e7f6;
  padding: 1rem;
}

.containerLogin__right__submit {
  margin-top: 1rem;
  text-align: center;
}

.containerLogin__right input#edit-submit {
  background-color: #ff7f00 !important;
  width: 100%;
}

.containerLogin__right__forgotPass,
.containerLogin__right__forgotPass a {
  color: #2b45ff;
  font-family: "galano_grotesquebold";
  text-decoration: none;
  font-weight: bolder;
}

.containerLogin__register {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  order: 3;
}

.containerLogin__register p,
.containerLogin__register a {
  color: #2b45ff;
  text-decoration: none;
  font-weight: bolder;
  font-family: "galano_grotesquebold";
}

/* MEDIAS QUERYS LOGIN */
@media (max-width: 767px) {
  .containerLogin {
    flex-direction: column;
    margin-bottom: 15vw;
    width: 100%;
  }

  .containerLogin__left__apple,
  .containerLogin__left__google,
  .containerLogin__left__facebook {
    max-height: 12vw;
    margin-bottom: 3vw;
  }

  .containerLogin__left__facebook_logo {
    width: 3vw;
    margin-left: 2vw;
    padding: 2vw 0;
  }

  .containerLogin__left__apple_logo,
  .containerLogin__left__google_logo {
    width: 5vw;
    margin-left: 2vw;
    padding: 2vw 0;
  }

  .containerLogin__left__joy__logoJoy {
    width: 11vw;
  }

  .containerLogin__left h1 {
    text-align: center;
    margin: 0 auto;
  }

  .containerLogin__left__joy {
    margin-top: 2vw;
    border-radius: 12px;
    margin-bottom: 3vw;
  }

  .containerLogin__right {
    margin-top: 0vw;
  }

  .containerLogin__right__forgotPass,
  .containerLogin__register {
    text-align: center;
  }

  .containerLogin__right input#edit-submit {
    width: 100%;
  }
}

/* REGISTRO */
.containerRegister {
  background-color: #ffffff;
  margin-top: 5vw;
  margin-bottom: 5vw;
  border-radius: 25px;
  flex-wrap: wrap;
  height: auto;
  min-height: 30vw;
}

.containerRegister__left {
  flex-basis: calc(50% - 8rem);
  padding: 2rem;
}

.containerRegister__right {
  flex-basis: calc(58% - 2rem);
  padding: 2rem;
}

.containerRegister__left {
  order: 1;
}

.containerRegister__divisor {
  flex-basis: 0.1vw;
  background-color: #2b45ff;
  border: 1px solid #2b45ff;
  margin-top: 0;
  margin-bottom: 0;
  order: 2;
  height: 19vw;
}

.containerRegister__left h1 {
  color: #2b45ff !important;
  font-family: "galano_grotesquebold" !important;
  font-size: 28px;
  font-weight: bolder;
  margin-bottom: 4vw;
}

.containerRegister__left__joy,
.containerRegister__left__facebook,
.containerRegister__left__google,
.containerRegister__left__apple {
  padding: 1vw;
  color: #fff;
  border-radius: 25px;
  font-family: "galano_grotesqueregular" !important;
  font-size: 17px;
  text-align: center;
}

.containerRegister__left__a__joy {
  text-decoration: none;
}

.containerRegister__left__a__joy:hover {
  text-decoration: none;
}

.containerRegister__left__joy {
  background-color: #4c23f6;
  padding: 1vw;
}

.containerRegister__left__joy span {
  text-decoration: underline;
}

.containerRegister__left__joy__logoJoy {
  width: 4vw;
  padding-left: 0.65vw;
}

.containerRegister__left__facebook {
  background-color: #364f89;
}

.containerRegister__left__google {
  background-color: #ffffff;
  border: 1px solid #e6e1e1;
  color: #000000;
}

.containerRegister__left__apple {
  background-color: #000000;
}

.containerRegister__right {
  order: 2;
}

.containerRegister__right label.js-form-required.form-required {
  color: #2b45ff;
  font-family: "galano_grotesquebold";
  font-weight: bold;
  font-size: 16px;
}

.containerRegister__right input#edit-name,
.containerRegister__right input#edit-last-name,
.containerRegister__right input#edit-last-name-2,
.containerRegister__right input#edit-email,
.containerRegister__right input#edit-phone,
.containerRegister__right input#edit-password-pass1,
.containerRegister__right input#edit-password-pass2 {
  border-radius: 25px;
  width: 100%;
  border: 1px solid #b1e7f6;
  padding: 1.5rem;
}

.containerRegister__right fieldset#edit-password {
  display: flex;
  padding-left: 1vw;
}

.containerRegister__right fieldset.js-form-item.js-form-type-password.form-type-password.js-form-item-password-pass2.form-item-password-pass2.form-group.confirm-parent {
  padding-left: 1vw;
}

.containerRegister__right .containerRegister__right__checkboxesTerms label.form-check-label {
  color: #252525;
  font-family: "galano_grotesqueregular";
  font-size: 12px;
  padding-left: 2vw;
}

/* check box */
.containerRegister__right__checkboxesTerms {
  margin-left: -2vw;
}

.containerRegister__right__checkboxesTerms .form-checkbox {
  display: none;
}

.containerRegister__right__checkboxesTerms .form-checkbox + label {
  display: inline-block;
  align-items: center;
  margin-right: 10px;
  cursor: pointer;
  position: relative;
}

.containerRegister__right__checkboxesTerms .form-checkbox + label::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #2b45ff;
  cursor: pointer;
  margin-right: 5px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.containerRegister__right__checkboxesTerms .form-checkbox:checked + label::before {
  content: "\25CF";
  /* Unicode para un círculo */
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 2px solid #2b45ff;
  cursor: pointer;
  margin-right: 5px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  line-height: 16px;
  font-size: 27px;
  color: #2b45ff;
}

.containerRegister__right__checkboxesTerms .form-checkbox + label {
  font-size: 16px;
}

.containerRegister__right__checkboxesTerms__checkbox {
  padding: 0.4vw 0;
}

/* end check box */
.containerRegister__right__submit {
  margin: 0 auto;
  text-align: center;
}

.containerRegister__right input#edit-submit {
  background-color: #ff7f00 !important;
  width: 45%;
}

.containerRegister__login {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  order: 3;
}

.containerRegister__login p,
.containerRegister__login a {
  color: #2b45ff;
  text-decoration: none;
  font-weight: bolder;
  font-family: "galano_grotesquebold";
}

/* MEDIAS QUERYS REGISTRO */
@media (max-width: 767px) {
  .containerRegister {
    flex-direction: column;
  }

  .containerRegister__left h1 {
    text-align: center;
    margin: 0 auto;
  }

  .containerRegister__left__joy {
    margin-top: 2vw;
    border-radius: 12px;
  }

  .containerRegister__left__joy__logoJoy {
    width: 11vw;
  }

  .containerRegister__right__password {
    flex-direction: column;
  }

  .containerRegister__right fieldset#edit-password {
    display: block;
  }

  .containerRegister__right .containerRegister__right__checkboxesTerms label.form-check-label {
    padding-left: 8vw;
  }

  .containerRegister__right input#edit-submit {
    width: 100%;
    margin-top: 10vw;
  }

  .containerRegister__login p,
  .containerRegister__login a {
    text-align: center;
  }
}

/* Verificacion de codigo de email */
.containerVerifierCode {
  background-color: #ffffff;
  margin-top: 4vw;
  border-radius: 25px;
  flex-wrap: wrap;
  height: auto;
  min-height: 30vw;
  margin-bottom: 4vw;
}

.containerVerifierCode__titulo {
  color: #2b45ff !important;
  font-family: "galano_grotesquebold" !important;
  font-size: 28px;
  font-weight: bolder;
  margin-bottom: 4vw;
  margin-top: 2vw;
  text-align: center;
}

.containerVerifierCode__textHelper {
  color: #252525 !important;
  font-family: "galano_grotesqueregular" !important;
  font-size: 22px;
  margin: 0 auto;
  text-align: center;
  width: 80%;
}

.containerVerifierCode__codes div {
  width: 100px;
  margin: 2vw 0.25vw;
}

.containerVerifierCode__codes .code-box {
  border: 3px solid #b1e7f6;
  width: 94px;
  height: 94px;
  color: #2b45ff;
  font-family: "galano_grotesquebold" !important;
}

.containerVerifierCode__codes .code-box::placeholder {
  color: #2b45ff;
  font-family: "galano_grotesquebold" !important;
}

.containerVerifierCode__codes__submit {
  margin: 0 auto;
  text-align: center;
}

.containerVerifierCode__codes__submit input#edit-submit {
  background-color: #ff7f00 !important;
  width: 20%;
}

.containerVerifierCode__resend {
  text-align: center;
  margin-bottom: 2vw;
}

.containerVerifierCode__resend p {
  color: #000000;
  font-family: "galano_grotesqueregular" !important;
  font-size: 1.3rem;
}

.containerVerifierCode__resend a {
  color: #2b45ff;
  font-family: "galano_grotesqueregular" !important;
}

.containerVerifierCode__resend:hover {
  color: #2b45ff;
}

/* MEDIAS QUERYS REGISTER */
@media (max-width: 767px) {
  .containerVerifierCode {
    margin-top: 20vw;
  }

  .containerVerifierCode__codes__submit input#edit-submit {
    width: 100%;
  }

  .containerVerifierCode__textHelper {
    font-size: 16px;
  }

  .containerVerifierCode__codes div {
    margin: 2vw 0.1vw;
  }

  .containerVerifierCode__codes .code-box {
    width: 82px;
    height: 82px;
  }
}

/* Forgot Password */
.containerForgotPass {
  background-color: #ffffff;
  margin-top: 4vw;
  border-radius: 25px;
  flex-wrap: wrap;
  height: auto;
  min-height: 35vw;
  width: 80%;
  margin-bottom: 4vw;
}

.containerForgotPass fieldset.js-form-item.js-form-type-textfield.form-type-textfield.js-form-item-name.form-item-name.form-group {
  text-align: center;
}

.containerForgotPass__titulo {
  color: #2b45ff !important;
  font-family: "galano_grotesquebold" !important;
  font-size: 28px;
  font-weight: bolder;
  margin-bottom: 4vw;
  margin-top: 2vw;
  text-align: center;
}

.containerForgotPass__textHelper {
  color: #252525 !important;
  font-family: "galano_grotesqueregular" !important;
  font-size: 22px;
  margin: 0 auto;
  text-align: center;
  width: 80%;
}

.containerForgotPass label.js-form-required.form-required {
  color: #2b45ff;
  font-family: "galano_grotesquebold";
  font-weight: bold;
  font-size: 16px;
  margin: 5vw auto 0 auto;
  width: 50%;
  display: block;
  text-align: left;
}

.containerForgotPass input#edit-name {
  border-radius: 25px;
  width: 50%;
  margin: 0 auto;
  border: 3px solid #2041f4;
  padding: 1.5rem;
}

.containerForgotPass__submit {
  text-align: center;
  margin-top: 4vw;
}

.containerForgotPass__submit input#edit-submit {
  background-color: #ff7f00 !important;
  width: 40%;
  text-align: center;
  margin: 0 auto;
}

/* MEDIAS QUERYS Forgot Password  */
@media (max-width: 767px) {
  .containerForgotPass {
    margin-top: 20vw;
  }

  .containerForgotPass__textHelper {
    font-size: 16px;
  }

  .containerForgotPass label.js-form-required.form-required {
    margin: 5vw auto 0 4vw;
    font-size: 16px;
  }

  .containerForgotPass input#edit-name {
    width: 100%;
  }

  .containerForgotPass__submit input#edit-submit {
    width: 100%;
  }
}

@media (min-width: 1920px) {
  .containerForgotPass label.js-form-required.form-required {
    margin: 5vw auto 0 auto;
    width: 50%;
    display: block;
  }
}

/* New Password */
.containerNewPass {
  background-color: #ffffff;
  margin-top: 4vw;
  margin-bottom: 4vw;
  border-radius: 25px;
  flex-wrap: wrap;
  height: auto;
  min-height: 35vw;
  width: 80%;
}

.containerNewPass__titulo {
  color: #2b45ff !important;
  font-family: "galano_grotesquebold" !important;
  font-size: 28px;
  font-weight: bolder;
  margin-bottom: 2vw;
  margin-top: 2vw;
  text-align: center;
}

.containerNewPass fieldset#edit-password {
  text-align: center;
}

.containerNewPass__textHelper {
  color: #252525 !important;
  font-family: "galano_grotesqueregular" !important;
  font-size: 20px;
  margin: 0 auto;
  text-align: center;
  width: 80%;
}

.containerNewPass label.js-form-required.form-required {
  color: #2b45ff;
  font-family: "galano_grotesquebold";
  font-weight: bold;
  font-size: 16px;
  margin: 2vw auto 0 auto;
  width: 50%;
  display: block;
  text-align: left;
}

.containerNewPass input#edit-name {
  border-radius: 25px;
  width: 50%;
  margin: 0 auto;
  border: 3px solid #2041f4;
  padding: 1.5rem;
}

.containerNewPass input#edit-password-pass1,
.containerNewPass input#edit-password-pass2 {
  border-radius: 25px;
  width: 50%;
  border: 1px solid #b1e7f6;
  margin: 0 auto;
  padding: 2vw;
  margin-bottom: 0.1vw;
}

.containerNewPass__submit {
  text-align: center;
  margin-top: 4vw;
}

.containerNewPass__submit input#edit-submit {
  background-color: #ff7f00 !important;
  width: 20%;
  padding: 1.5vw;
  text-align: center;
  margin: 0 auto 4vw auto;
}

/* MEDIAS QUERYS Forgot Password  */
@media (max-width: 767px) {
  .containerNewPass__submit {
    margin-top: 0vw;
  }

  .containerNewPass__submits__textHelper {
    font-size: 14px;
  }

  .containerNewPass__submit label.js-form-required.form-required {
    margin: 2vw auto 0 4vw;
    font-size: 16px;
  }

  .containerNewPass input#edit-password-pass1,
  .containerNewPass input#edit-password-pass2 {
    width: 100%;
  }

  .containerNewPass__submit input#edit-submit {
    width: 100%;
    margin: 0 auto 2vw auto;
    padding: 4vw;
  }

  .containerNewPass label.js-form-required.form-required {
    margin: 5vw auto 0 4vw;
  }
}

/* thank you page */
.containerThankYou {
  background-color: #ffffff;
  margin-top: 4vw;
  margin-bottom: 4vw;
  border-radius: 25px;
  flex-wrap: wrap;
  height: auto;
  min-height: 30vw;
  width: 80%;
}

.containerThankYou__titulo {
  color: #2b45ff !important;
  font-family: "galano_grotesquebold" !important;
  font-size: 28px;
  font-weight: bolder;
  margin-bottom: 4vw;
  margin-top: 2vw;
  text-align: center;
}

.containerThankYou__textHelper {
  color: #252525 !important;
  font-family: "galano_grotesqueregular" !important;
  font-size: 22px;
  margin: 0 auto;
  text-align: center;
  width: 80%;
}

.containerThankYou__submit a {
  background-color: #ff7f00 !important;
  width: 25%;
  text-align: center;
  margin: 0 auto;
  border-radius: 25vw;
  padding: 1.5vw;
  color: #ffffff;
  text-decoration: none;
  margin-top: 2vw;
  font-size: 16px;
}

/* MEDIAS QUERYS Forgot Password  */
@media (max-width: 767px) {
  .containerThankYou {
    margin-top: 20vw;
  }

  .containerThankYou__textHelper {
    font-size: 16px;
  }

  .containerThankYou__submit a {
    width: 100%;
    margin-top: 0vw;
  }

  .containerThankYou .row.pb-5 {
    padding-bottom: 5.5vw !important;
  }
}