body {
  text-align: center;
  padding: 0;
  margin: 0;
}

.payment-iframe .wrapper {
  text-align: left;
  display: inline-block;
  padding: 25px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.payment-iframe-1-0 .wrapper {
  width: 500px;
}

.payment-iframe .field-group {
  margin-bottom: 10px;
}

fieldset {
  margin-bottom: 10px;
  border-radius: 2px;
  border: 1px solid #ccc;
}

.payment-iframe input,
.payment-iframe select {
  outline: none;
  display: block;
  width: 100%;
  border-radius: 2px;
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
}

.payment-iframe button {
  width: 100%;
  padding: 10px;
  border-radius: 2px;
  border: 0;
  background-color: #ccc;
  color: #fff;
}

.payment-iframe button {
  cursor: pointer;
}

.payment-iframe button:disabled {
  cursor: auto;
}

.payment-iframe input:valid:not(:placeholder-shown) {
  border-color: green;
}

.payment-iframe input:invalid:not(:placeholder-shown) {
  border-color: red;
}

.payment-iframe input:invalid:focus:not(:placeholder-shown) {
  border-color: blue;
}

.payment-iframe footer .app-version {
  text-align: right;
  color: lightgray;
  font-size: 80%;
}

.payment-iframe .alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.payment-iframe .alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.field-template-container {
  display: inline-flex;
  flex-wrap: wrap;
}

.field-template {
  box-sizing: border-box;
  padding: 0.25em;
}

.payment-iframe label.error {
  color: red;
}

.field-group {
  display: flex;
  flex-direction: column-reverse;
}

.payment-iframe-1-0 .field-group {
  display: block;
}