@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,500,600,700);

body {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
}

p code {
  background: #f7f8f9;
  border-radius: 4px;
  color: #6772e5;
  padding: 4px 8px;
}

.input-group {
  margin-bottom: 20px;
}

button {
  background: #6772e5;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  font-size: 14px;
  margin-top: 10px;
  padding: 8px 6px;
  text-align: center;
  width: 100%;
}

button:focus {
  outline: none;
}

button:hover {
  box-shadow: 0 7px 14px rgba(50, 50, 93, .10), 0 3px 6px rgba(0, 0, 0, .08);
}

.error {
  color: #fa755a;
  margin-bottom: 0px;
  margin-top: 5px;
}

.StripeElement {
  background-color: #FAFAFA;
  border: 1px solid #BBB;
  border-radius: 4px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.075);
  font-weight: 700;
  padding: 8px 12px;
}

.StripeElement--focus {
  background-color: #FFFFFF;
  border-color: #6772e5;
  box-shadow: inset 0 2px 2px rgba(0,0,0,0.075), 0 0 5px rgba(81,167,232,0.5);
}

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

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