/** @format */

.left-join-image {
  float: left;
}

body:not(.tco-preview) .mm-checkout-step1,
body:not(.tco-preview) .mm-checkout-step2 {
  display: none;
}

body:not(.tco-preview) .join-left,
body:not(.tco-preview) .join-left {
  display: none;
}

.yoga-join,
.yoga-join-step2,
.mm-checkout-step2 {
  overflow: hidden;
}

.mm-checkout-step1,
.mm-checkout-step2 {
  transition: unset;
}

p.billing-title {
  color: #fff;
  font-family: "CrimsonText";
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 40px;
  letter-spacing: 1.5px;
}

body .swal2-container {
  z-index: 99999;
}

#mm_field_cc_number_div {
  grid-column-start: 1;
  grid-column-end: 5;
}

.mm-checkout-step1 input.input-text,
.mm-checkout-step2 input.input-text,
#log,
#pwd,
#confirm-pwd,
#mm_field_cc_number_div,
#mm_field_cc_exp_div,
#mm_field_cc_cvv_div {
  border-radius: 15px;
  border: 2px solid #eaeff8;
  background-color: #fcfdfe;
  padding: 17px 30px;
  height: unset;
  box-shadow: none;
  font-size: 16px;
  color: #6a8184;
  width: 100%;
  margin: 0;
}
/** MM Stripe Elements customisation **/
#mm_custom_field_10:before{
  content: 'Name on Card';
}
#mm_field_cc_number_div:before{
  content: 'Credit Card Number';
}
#mm_field_cc_exp_div:before{
  content: 'Expiry';
}
#mm_field_cc_cvv_div:before{
  content: 'CVV';
}


#log {
  margin-bottom: 15px;
}

/** Step 1 **/
.join-field-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24px;
}

.yoga-join .password-container {
  position: relative;
}

.join-field-container .password-container.error input.input-text {
  border-color: var(--brand-orange);
}

.password-container.error svg {
  color: var(--brand-orange);
}

.yoga-join .toggle-password {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 16px;
  font-size: 18px;
  cursor: pointer;
  z-index: 2;
  color: #ccdde2;
}

.yoga-join .toggle-password-confirm {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 16px;
  font-size: 18px;
  cursor: pointer;
  z-index: 2;
  color: #ccdde2;
}

input.input-text.password {
  padding: 17px 40px 17px 30px;
}

.x-text.yoga-join input.input-text:focus {
  border-color: #ccdde2;
}

.submit-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 60px;
}

p.sign-in-text {
  display: block;
  font-family: "Work Sans", sans-serif;
  color: #657d80;
  font-size: 18px;
  line-height: 1;
  margin: 0 15px 0 0;
}

p.sign-in-text a {
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  color: #009ab2;
}

p.sign-in-text a:hover,
.mm-checkout-step2 .mm-paypalCheckoutBtn:hover,
a.mm-button.credit-card:hover,
button.promo-btn:hover,
a.terms-link:hover {
  opacity: 0.7;
}

.yoga-join button.submit-step1 {
  padding: 18px 48px;
  -o-object-fit: contain;
  object-fit: contain;
  border-radius: 15px;
  background-color: #009ab2;
  font-weight: 600;
  border: none;
  color: #fff;
  transition: 0.3s ease;
}

.yoga-join button.submit-step1:hover {
  opacity: 0.7;
  background-color: #009ab2;
}

.yoga-join button.submit-step1.disabled {
  pointer-events: none;
  background: #808080;
  color: #000;
}

.submitting {
  pointer-events: none;
}

.yoga-join input#password-field,
.yoga-join input#password-confirm-field {
  color: #324945;
}

/** Step 2 **/
.billing-fields-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}

.billing-fields-container #mm_field_cc_number {
  grid-column-start: 1;
  grid-column-end: 5;
}

.billing-fields-container #mm_custom_field_10 {
  grid-column-start: 1;
  grid-column-end: 5;
}

.billing-fields-container #mm_field_cc_exp_month {
  grid-column-start: 1;
  grid-column-end: 2;
}

.billing-fields-container #mm_field_cc_exp_year {
  grid-column-start: 2;
  grid-column-end: 3;
}

.billing-fields-container #mm_field_cc_cvv {
  grid-column-start: 3;
  grid-column-end: 5;
}

.mm-checkout-step2 .mm-paypalCheckoutBtn {
  display: block;
  background: #009ab1;
  color: #fff;
  height: auto;
  border-radius: 15px;
  font-family: "Work Sans", sans-serif;
  font-weight: 600;
  border: none;
  text-shadow: none;
  box-shadow: none;
  font-size: 16px;
  width: 100%;
  text-align: center;
  padding: 20px;
}

a.mm-button.credit-card {
  background: var(--brand-orange);
  border: none;
  box-shadow: none;
  text-shadow: none;
  color: #fff;
  font-size: 16px;
  border-radius: 15px;
  font-family: "Work Sans", sans-serif;
  font-weight: 600;
  height: auto;
  width: 100%;
  text-align: center;
  padding: 20px;
}

p.promo-text {
  color: #fff;
  font-family: "CrimsonText";
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 30px;
  margin-top: 60px;
  letter-spacing: 1.5px;
}

.yoga-join-step2 .mm-selectList {
  padding: 10px 17px;
  font-family: "Work Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.88;
  height: auto;
  margin-bottom: 0;
  border-radius: 15px;
  height: 57px;
}

input#mm_field_cc_cvv {
  margin-bottom: 0;
}

p.terms-text {
  color: rgba(255, 255, 255, 0.8);
  font-family: "Work Sans", sans-serif;
  font-weight: normal;
  line-height: 1.63;
  margin-bottom: 70px;
  letter-spacing: 1.5px;
}

a.terms-link {
  color: #fff;
  text-decoration: underline;
  font-weight: 700;
}

input.terms-check {
  display: none;
}

.coupon-fields-container {
  display: grid;
  grid-template-columns: 1fr 100px;
  margin-bottom: 25px;
}

#mm_field_coupon_code {
  border-radius: 15px 0 0 15px;
}

.promo-btn {
  background: #b9b9b9;
  border: 0;
  border-radius: 0 15px 15px 0;
  padding: 0 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
  font-weight: 700;
  transition: 0.3s ease;
}

.promo-btn:hover {
  color: #000;
  opacity: 0.7;
}

span.custom-checkbox {
  width: 20px;
  height: 21px;
  background: url("/wp-content/uploads/2021/07/checkbox.svg");
  visibility: hidden;
  display: none;
  overflow: hidden;
  vertical-align: middle;
}

body input.terms-check {
  width: 20px;
  height: 21px;
  display: inline-block;
  overflow: hidden;
  margin: 0 10px 0 0;
  vertical-align: middle;
  border-radius: 6px;
  border: solid 2px #b9b9b9;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
}

.password-error {
  display: block;
  grid-column-start: 1;
  grid-column-end: 3;
  text-align: center;
  background: var(--brand-orange);
  color: #fff;
  margin-top: 0;
  margin-bottom: 0;
  padding: 8px;
  border-radius: 5px;
  display: none;
}

.checkout-tag-section {
  display: none;
}

.preload {
  height: 0;
  width: 0;
}

.mm-button {
  transition: 0.3s ease;
}

.mm-button:hover {
  opacity: 0.7;
}

.final-submit-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  align-items: center;
}

.mm-checkoutContainer p.mm-formError,
.mm-formError {
  font-size: 16px;
}

@media screen and (max-width: 1100px) {

  .billing-fields-container #mm_field_cc_exp_month,
  .billing-fields-container #mm_field_cc_exp_year,
  .billing-fields-container #mm_field_cc_cvv,
  .billing-fields-container #mm_field_cc_exp_div,
  .billing-fields-container #mm_field_cc_cvv_div  {
    grid-column-start: 1;
    grid-column-end: 5;
  }

  #mm_field_cc_exp_div,
  #mm_field_cc_cvv_div {
    grid-column-start: 1;
    grid-column-end: 5;
  }
}

@media screen and (max-width: 979px) {
  .join-field-container {
    grid-template-columns: 1fr;
  }

  .final-submit-container {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 767px) {}

@media screen and (max-width: 480px) {
  .submit-container {
    flex-direction: column-reverse;
    margin-top: 25px;
  }

  p.sign-in-text {
    margin: 15px 0 0 0;
  }

  .yoga-join button.submit-step1 {
    width: 100%;
  }
}