.choose-cycle {

  color: #13374b;
  text-align: center;
  margin-top: 20px;
  padding-left: 40px;
  padding-right: 40px;

  hr {
    border-top: 4px solid #13374b;
    position: relative;
    top: -4px;
  }

  h2 {
    font-size: 140%;
    font-weight: bold;
    text-transform: uppercase;
  }

}

.cycle-box {

  border: 3px solid #c8d3e2;
  border-radius: 8px;
  margin: 30px 20px 40px 20px;
  max-width: 200px;
  height: 200px;

  img {
    width: 80px;
    display: block;
    margin: 10px auto 6px auto;
  }

  span {
    max-height: 20px;
    display: block;
  }

  span, .selected {
    text-transform: uppercase;
    font-weight: bold;
    color: #2e516b;
  }

  .ap-btn {
    margin-top: 36px;
  }

  .selected {
    text-align: center;
    margin-top: 36px;
  }

}

.cycle-box.sel {
  background-color: #2e516b;
  span, .selected {
    color: #bcc9d8;
  }
}

.select-labs {

  background: #e9e9e9;
  padding: 35px;

  .lab-selector {

    background: white;
    border: 1px solid #c8d3e2;
    border-radius: 4px 16px 16px 4px;
    min-height: 130px;

    img {
      padding-top: 40px;
      width: 40px;
    }

    h3 {
      margin-top: 10px;
      font-size: 18px;
      font-weight: bold;
    }

    p {
      font-size: 12px;
    }

    .price {
      border-left: 1px solid #ccc;
      margin: 20px 0;
      color: #778b6a;
      font-weight: bold;
      text-align: center;
    }

  }

  .lab-selector + .lab-selector {
    margin-top: 20px;
  }

}

#workshop_reg .select-labs .lab-selector img {
  padding-top: 0;
}

.card-details {

  background: #e9e9e9;
  padding: 35px;

  .payment-input {
    max-width: 75%;
    display: block;
  }

  .payment-coupon-form {
    display: none;
  }

  .summary {
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 24px;
  }

  .reverse-consent {
    font-size: 1rem;
  }

  #card-errors {
    color: #fa755a;
  }

}

@media (max-width: 767.98px) {
  .select-labs .lab-selector {
    padding-top: 16px;
    padding-bottom: 16px;

    img {
      margin-left: -4px;
    }

    .price {
      overflow-wrap: anywhere;

      .cycle {
        font-size: 12px;
        font-weight: normal;
      }
    }
  }

  .card-details {
    padding: 18px;

    .summary {
      margin-top: 12px;
    }
  }
}

.darkmode {
  .select-labs,
  .card-details {
    background-color: #292B2F;
  }

  .select-labs .lab-selector {
    background-color: #3a3d42;
    border-color: #555;

    .price {
      border-left-color: #555;
      color: #b8d4a8;
    }
  }

  .btn-primary {
    background-color: #1a5575;
    border-color: #1a5575;
  }
}


/* see https://stripe.com/docs/stripe-js */

.StripeElement {
  box-sizing: border-box;

  height: 40px;

  padding: 10px 12px;

  border: 1px solid transparent;
  border-radius: 4px;
  background-color: white;

  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}

.StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
  border-color: #fa755a;
}

.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}

.mobile-body .select-labs .lab-selector img {
  width: 24px;
  padding-top: 0;
}

.mobile-body .select-labs .lab-selector {
  border-radius: 16px;
}

.mobile-body .payment-buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.mobile-body .row.card-details > .col-6 {
  flex: 0 0 100%;
  max-width: 100%;
}

.mobile-body .row.card-details > .col-6 + .col-6 {
  margin-top: 1rem;
}