/**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */
body {
  color: #303133;
}
#payment-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vw;
  text-align: center;
}
#payment-form {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 500px;
  height: 400px;
  opacity: 1.0;
  vertical-align: middle;
  margin: -180px 0 0 -250px;
  box-shadow: 0 1px 3px 0 #e6ebf1;
  background-color: #fafdff;
  padding: 3em;
  padding-top: 2em;
  border-radius: 5px;
  border: 1px solid #d6d5dd;
}
#payment-form input, .StripeElement {
  background-color: white;
  height: 40px;
  padding: 10px 12px;
  min-width: 400px;
  border-radius: 4px;
  border: 1px solid transparent;
  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
  color: #32325d;
  line-height: 18px;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-smoothing: antialiased;
  font-size: 16px;
}

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

.StripeElement--invalid {
  border-color: #fa755a;
}
.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}
#payment-form label {
  width: 100%;
  text-align: left;
  font: bold 11pt "Helvetica Neue", Helvetica, sans-serif;
  font-smoothing: antialiased;
;
  color: #555;
}
#card-errors {
  color: #B91C1C;
}