body {
  font-family: "Helvetica";
  font-weight: lighter;
}

.payment-form {
  max-width: 500px;
  min-width: 325px;
}

.secure-field--container input {
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  border: none;
  outline: none;
  padding: 0px;
}

.secure-field--container input::placeholder {
  color: silver;
}

#field {
  background: transparent;
  border-style: none;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: block;
}

#field::placeholder {
  color: silver;
}

.payment-field label {
  font-size: 15px;
  padding-left: 1px;
  line-height: 35px;
}

.payment-field--postal-code-label input {
  height: 45px;
  display: flex;
  flex-wrap: nowrap;
  position: relative;
  padding: 0px 10px;
  border: 1px solid #aab3c1;
  border-radius: 3px;
  justify-content: space-between;
}

.payment-field--email-label input {
  height: 45px;
  display: flex;
  flex-wrap: nowrap;
  position: relative;
  padding: 0px 10px;
  border: 1px solid #aab3c1;
  border-radius: 3px;
  justify-content: space-between;
}

.secure-field--container {
  height: 45px;
  display: flex;
  flex-wrap: nowrap;
  position: relative;
  padding: 0px 10px;
  border: 1px solid #aab3c1;
  border-radius: 3px;
  justify-content: space-between;
  align-items: center;
}

.payment-checkbox {
  margin: 5px 0;
  display: flex;
  align-items: first baseline;
  font-size: 13px;
  grid-gap: 10px;
}

input[type="checkbox"] + label {
  color: #aab3c1;
  vertical-align: middle;
  position: fixed;
  margin-left: 25px;
  margin-top: 2.5px;
}
input[type="checkbox"]:checked + label {
  color: inherit;
  vertical-align: middle;
  position: fixed;
  margin-left: 25px;
  margin-top: 2.5px;
}

.secure-field {
  display: flex;
  position: relative;
  display: inline-flex;
  gap: 10px;
}

.secure-field--container select {
  padding: 15px 5px;
  width: 100%;
  border: 1px solid silver;
  border-radius: 5px;
}

.payment-form button {
  background-color: #3b3b3b;
  color: white;
  border: none;
  padding: 10px 50px;
  cursor: pointer;
  width: 100%;
  font-size: 16px;
  padding: 10px;
  margin-top: 30px;
  font-weight: bolder;
  border-radius: 3px;
}

.v-pulse {
  background-color: white;
  width: 10px;
  height: 10px;
  margin: 2px;
  border-radius: 50%;
  display: inline-block;
  animation-name: v-pulseStretchDelay;
  animation-duration: 0.75s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.2, 0.68, 0.18, 1.08);
  animation-fill-mode: both;
}

.pay-icon {
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml;utf-8,<svg width="16" height="16" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.50006 14C6.50006 13.7033 6.58803 13.4133 6.75286 13.1666C6.91768 12.92 7.15195 12.7277 7.42604 12.6142C7.70012 12.5006 8.00172 12.4709 8.2927 12.5288C8.58367 12.5867 8.85094 12.7296 9.06072 12.9393C9.2705 13.1491 9.41336 13.4164 9.47124 13.7074C9.52912 13.9983 9.49941 14.2999 9.38588 14.574C9.27235 14.8481 9.08009 15.0824 8.83342 15.2472C8.58674 15.412 8.29673 15.5 8.00006 15.5C7.60224 15.5 7.22071 15.342 6.9394 15.0607C6.6581 14.7794 6.50006 14.3978 6.50006 14V14Z" fill="white"/><path d="M8.00006 19.609C6.81406 19.609 5.61406 19.561 4.43106 19.467L2.93106 19.347C2.40576 19.3049 1.90971 19.088 1.52216 18.7309C1.1346 18.3738 0.877905 17.8971 0.793061 17.377C0.426076 15.1416 0.426076 12.8614 0.793061 10.626C0.877064 10.1043 1.1339 9.62605 1.52235 9.26788C1.9108 8.90972 2.40832 8.69246 2.93506 8.65099L3.61806 8.59699L3.30606 5.75799C3.26524 5.39246 3.26524 5.02352 3.30606 4.65799L3.32906 4.45299C3.45731 3.30387 4.00464 2.24235 4.86638 1.47143C5.72813 0.700507 6.84381 0.274292 8.00006 0.274292C9.15631 0.274292 10.272 0.700507 11.1337 1.47143C11.9955 2.24235 12.5428 3.30387 12.6711 4.45299L12.6941 4.65799C12.7349 5.02352 12.7349 5.39246 12.6941 5.75799L12.3781 8.59699L13.0651 8.65199C13.5915 8.69337 14.0888 8.91034 14.4772 9.2681C14.8656 9.62587 15.1227 10.1037 15.2071 10.625C15.574 12.8604 15.574 15.1406 15.2071 17.376C15.1227 17.8973 14.8656 18.3751 14.4772 18.7329C14.0888 19.0906 13.5915 19.3076 13.0651 19.349L11.5651 19.469C10.3861 19.562 9.18506 19.609 8.00006 19.609ZM8.00006 9.88899C6.85406 9.88899 5.69306 9.93499 4.55006 10.027L3.05006 10.147C2.85814 10.162 2.67683 10.241 2.5352 10.3714C2.39358 10.5018 2.29985 10.676 2.26906 10.866C1.9282 12.9411 1.9282 15.0579 2.26906 17.133C2.29985 17.323 2.39358 17.4972 2.5352 17.6276C2.67683 17.758 2.85814 17.837 3.05006 17.852L4.55006 17.972C5.69306 18.063 6.85006 18.11 8.00006 18.11C9.15006 18.11 10.3071 18.064 11.4491 17.972L12.9491 17.852C13.141 17.837 13.3223 17.758 13.4639 17.6276C13.6055 17.4972 13.6993 17.323 13.7301 17.133C14.0709 15.0579 14.0709 12.9411 13.7301 10.866C13.6993 10.676 13.6055 10.5018 13.4639 10.3714C13.3223 10.241 13.141 10.162 12.9491 10.147L11.4491 10.027C10.3071 9.93599 9.14606 9.88999 8.00006 9.88999V9.88899ZM8.00006 8.38899C8.95706 8.38899 9.92706 8.41999 10.8811 8.48199L11.2021 5.59099C11.2299 5.33708 11.2299 5.08089 11.2021 4.82699L11.1791 4.62199C11.1013 3.90278 10.7811 3.23144 10.2712 2.71838C9.76118 2.20532 9.09179 1.88108 8.37306 1.79899C8.12489 1.77019 7.87423 1.77019 7.62606 1.79899C6.90669 1.88034 6.23652 2.20443 5.72606 2.71779C5.2156 3.23116 4.89533 3.90316 4.81806 4.62299L4.79506 4.82799C4.76718 5.08189 4.76718 5.33808 4.79506 5.59199L5.11806 8.48299C6.07806 8.42099 7.04806 8.38999 8.00006 8.38999V8.38899Z" fill="white"/></svg>');
  display: inline-block;
  position: relative;
  top: 0.15em;
  right: 0.3em;
}

.card-container {
  height: 45px;
  display: flex;
  flex-wrap: nowrap;
  position: relative;
  padding: 0px 10px;
  border: 1px solid #aab3c1;
  border-radius: 3px;
  justify-content: space-between;
}

.card-field {
  height: 100%;
}

.v-pulse1 {
  animation-delay: 0.12s;
}

.v-pulse2 {
  animation-delay: 0.24s;
}

.v-pulse3 {
  animation-delay: 0.36s;
}

.payment-field {
  margin: 20px 0;
}

.card-number--icon {
  width: 29px;
  height: 20px;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  flex: none;
}

.secure-field--icon {
  width: 29px;
  height: 20px;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  flex: none;
}

.secure-field--container select {
  padding: 15px 5px;
  width: 100%;
  border: 1px solid silver;
  border-radius: 5px;
}

.card-field__cardNumber {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-grow: 1;
  max-width: 230px;
  gap: 10px;
}

.card-field__expiry {
  max-width: 60px;
}

.card-field__cvv {
  max-width: 38px;
}

.v-pulse1 {
  animation-delay: 0.12s;
}

.v-pulse2 {
  animation-delay: 0.24s;
}

.v-pulse3 {
  animation-delay: 0.36s;
}

@-webkit-keyframes v-pulseStretchDelay {
  0%,
  80% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-opacity: 1;
    opacity: 1;
  }
  45% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    -webkit-opacity: 0.7;
    opacity: 0.7;
  }
}

@keyframes v-pulseStretchDelay {
  0%,
  80% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-opacity: 1;
    opacity: 1;
  }
  45% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    -webkit-opacity: 0.7;
    opacity: 0.7;
  }
}

/* only for recurring */
.plan--container {
  padding: 15px;
  background: #ececec;
  border: 1px solid #ececec;
  box-sizing: border-box;
  border-radius: 4px;
}

.plan-name {
  font-weight: bold;
  font-size: 26px;
  line-height: 42px;
}

.plan-trial {
  margin-top: 5px;
  font-size: 13px;
}

.consent--container {
  margin-top: 15px;
  font-size: 12px;
}