#payment-form {
  text-align: center;
  position: relative;
}
#payment-form #payment-form-preloader {
  background: rgba(235, 239, 241, 0.8);
  width: 100%;
  height: 100%;
  margin: 0 !important;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
  z-index: 10;
  pointer-events: none;
  display: none;
  opacity: 0;
}
#payment-form #payment-form-preloader.active {
  pointer-events: auto;
  display: block;
  opacity: 1;
}
@media (min-width: 1024px) {
  #payment-form {
    max-width: 570px;
    margin: 0 auto;
  }
}
#payment-form h4 {
  margin-top: 1.4em;
  color: #2b3447;
}
#payment-form p {
  text-align: center !important;
}
#payment-form > div {
  margin: 0.7em;
}
#payment-form .amount-container {
  text-align: center;
  margin-bottom: 15px;
}
#payment-form .amount-wrap {
  display: inline-block;
}
#payment-form .amount-wrap .donation-amount {
  background-color: #e1e6e8;
  color: #2b3447;
  border-radius: 31px;
  overflow: hidden;
  margin: 0 0 15px;
  clear: both;
}
#payment-form .amount-wrap .donation-amount .currency-symbol {
  color: #576f9f;
  border: none !important;
  background: transparent !important;
  padding: 1em 0.6em 1em 1.3em !important;
}
#payment-form .amount-wrap .donation-amount input[type=text] {
  background: #ffffff;
  border-color: #e1e6e8;
  color: #7c869b;
  display: inline-block;
  height: 100%;
  border-radius: 9999px;
  width: 95px;
  min-width: 96px;
  padding: 0.85em 0.8em;
}
#payment-form .amount-wrap .donation-amount input[type=text]:focus {
  outline: none;
  border-color: #576f9f !important;
}
#payment-form .inline-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 10px;
  justify-content: center;
}
#payment-form .inline-list li {
  margin: 0;
}
#payment-form .inline-list button {
  background-color: #e1e6e8;
  color: #2b3447;
  font-size: 1em;
  line-height: 1.5em;
  padding: 0.85em 0.8em;
  border: 1px solid #e1e6e8;
  cursor: pointer;
  border-radius: 9999px;
}
#payment-form .inline-list button:hover {
  background-color: #e6f1f3;
  color: #91b3fd;
}
#payment-form .inline-list button.selected, #payment-form .inline-list button[class*=selected-] {
  background-color: #576f9f;
  color: #fffcf0;
}
#payment-form .inline-list button.selected:hover, #payment-form .inline-list button[class*=selected-]:hover {
  background-color: #3d4c6d;
  color: #fffcf0;
}
#payment-form .inline-list.recurrent-visible {
  display: none;
  margin: 15px 0 0 0;
}
#payment-form .inline-list.recurrent-visible.active {
  display: flex;
}
#payment-form .form-row {
  text-align: left;
  margin: 0 0 14px;
}
#payment-form .form-row label {
  display: none;
}
#payment-form .form-row input[type=text],
#payment-form .form-row input[type=email],
#payment-form .form-row input[type=tel] {
  width: 100%;
  padding: 0.95em 1.1em;
  border: 1px solid #e1e6e8;
  border-radius: 9999px;
  color: #7c869b;
  background: #fff;
}
#payment-form .form-row input[type=text]::placeholder,
#payment-form .form-row input[type=email]::placeholder,
#payment-form .form-row input[type=tel]::placeholder {
  color: #7c869b;
  opacity: 1;
}
#payment-form .form-row input[type=text]:focus,
#payment-form .form-row input[type=email]:focus,
#payment-form .form-row input[type=tel]:focus {
  outline: none;
  border-color: #576f9f;
  box-shadow: 0 0 0 2px rgba(87, 111, 159, 0.35);
}
#payment-form .form-row-wide {
  display: block;
  width: 100%;
}
#payment-form .tabs-content .tab-pane {
  display: none;
  margin-top: 1.4em;
}
#payment-form .tabs-content .tab-pane.active {
  display: block;
}
#payment-form .gpay-button {
  background-origin: content-box;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
  width: 240px;
  min-height: 40px;
  padding: 0;
  height: 50px;
  border: 0;
  border-radius: 100px;
  box-shadow: rgba(60, 64, 67, 0.3) 0 1px 1px 0, rgba(60, 64, 67, 0.15) 0 1px 3px 1px;
}
#payment-form .gpay-button.black {
  background-color: #000 !important;
  box-shadow: none;
}
#payment-form .gpay-button.black.border-inset {
  outline-offset: -1px;
}
#payment-form .gpay-button.black:active, #payment-form .gpay-button.black.active {
  background-color: #5f6368 !important;
}
#payment-form .gpay-button.black:hover, #payment-form .gpay-button.black.hover {
  background-color: #3c4043 !important;
}
#payment-form .gpay-button.donate, #payment-form .gpay-button.book, #payment-form .gpay-button.checkout, #payment-form .gpay-button.subscribe, #payment-form .gpay-button.pay, #payment-form .gpay-button.order {
  padding: 9px 24px;
}
#payment-form .gpay-button__logo {
  width: 50px;
  height: 20px;
  margin-left: 8px;
  vertical-align: middle;
}
@supports (-webkit-appearance: -apple-pay-button) {
  #payment-form .apple-pay-button-with-text {
    display: inline-block;
    -webkit-appearance: -apple-pay-button;
    appearance: -apple-pay-button;
    -apple-pay-button-type: donate;
    width: 200px;
    height: 50px;
  }
  #payment-form .apple-pay-button-with-text > * {
    display: none;
  }
  #payment-form .apple-pay-button-black-with-text {
    -apple-pay-button-style: black;
  }
}
@supports not (-webkit-appearance: -apple-pay-button) {
  #payment-form .apple-pay-button-with-text {
    --apple-pay-scale: 1; /* (height / 32) */
    display: inline-flex;
    justify-content: center;
    font-size: 12px;
    border-radius: 5px;
    padding: 0px;
    box-sizing: border-box;
    min-width: 200px;
    min-height: 32px;
    max-height: 64px;
  }
  #payment-form .apple-pay-button-black-with-text {
    background-color: black;
    color: white;
  }
  #payment-form .apple-pay-button-with-text.apple-pay-button-black-with-text > .logo {
    background-image: -webkit-named-image(apple-pay-logo-white);
    background-color: black;
  }
  #payment-form .apple-pay-button-with-text > .text {
    font-family: -apple-system;
    font-size: calc(1em * var(--apple-pay-scale));
    font-weight: 300;
    align-self: center;
    margin-right: calc(2px * var(--apple-pay-scale));
  }
  #payment-form .apple-pay-button-with-text > .logo {
    width: calc(35px * var(--scale));
    height: 100%;
    background-size: 100% 60%;
    background-repeat: no-repeat;
    background-position: 0 50%;
    margin-left: calc(2px * var(--apple-pay-scale));
    border: none;
  }
}
#payment-form #donor-info {
  margin-top: 3.6em !important;
}
#payment-form #donor-info .invalid input {
  border-color: #fa755a !important;
}
#payment-form .inner-wrapper {
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
  row-gap: 14px;
}
#payment-form .inner-wrapper .form-row {
  flex: 1 1 100%;
}
@media (min-width: 768px) {
  #payment-form .inner-wrapper .form-row.form-row-first, #payment-form .inner-wrapper .form-row.form-row-last {
    flex: 1 1 calc(50% - 12px);
  }
}
@media (min-width: 768px) {
  #payment-form .inner-wrapper .form-row.form-row-wide {
    flex: 1 1 100%;
  }
}
#payment-form #card {
  display: block;
}
#payment-form #card #switch-to-wallets {
  margin: 2.1em auto 2.8em auto;
}
#payment-form #card h4 {
  flex: 0 0 100%;
  margin-bottom: 6px;
}
#payment-form #card .submit-wrap {
  text-align: center;
}
#payment-form #cardholder {
  background: #fff;
  border: 1px solid #e1e6e8;
  border-radius: 31px;
  padding: 14px 16px;
  min-height: 48px;
}
#payment-form .wallet-cta {
  margin-top: 8px;
}
#payment-form #wallet-button .StripeElement {
  min-height: 44px;
}
#payment-form .spinner {
  display: none;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(0, 0, 0, 0.15);
  border-top-color: #576f9f;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  margin-left: 8px;
}
#payment-form .spinner.active {
  display: inline-block;
}
#payment-form #card .form-row.form-row-wide {
  position: relative;
}
#payment-form .spinner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.6);
}
#payment-form #thank-you {
  text-align: left;
  display: none;
}
@media (min-width: 1024px) {
  #payment-form #thank-you {
    margin-left: -25%;
    margin-right: -25%;
  }
}
#payment-form #thank-you.active {
  display: block;
}
#payment-form #thank-you .recurring-note {
  display: none;
}
#payment-form #thank-you .recurring-note.active {
  display: block;
}
#payment-form .error {
  color: red;
}
#payment-form .message {
  color: green;
}
#payment-form #wallet-container {
  margin-top: 2.8em;
  position: relative;
}
#payment-form #wallet-container #wallet-button-wrapper {
  margin-bottom: 2.8em;
  position: relative;
}
#payment-form #wallet-container #wallet-button-wrapper #wallet-button-overlay {
  background: rgba(235, 239, 241, 0.8);
  position: absolute;
  inset: 0;
  display: none;
  z-index: 5;
}
#payment-form #wallet-container #wallet-button-wrapper #wallet-button-overlay.active {
  display: block;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}