.AddCredit {
  display: block;
  text-align: center;
  border-radius: 0.5em;
  margin: 3em;
  padding: 2em;
  background-color: var(--grey);
}

.AddCredit__ {
  background: url(/images/aluminium.jpg);	
  background-color: var(--blue);
}

.AddCredit__loading {
  background: url(/images/aluminium.jpg);
  background-color: var(--purple);
}



 base: {
    color: '#32325d',
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: 'antialiased',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    }
  }
  
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a'
  }

.StripeElement {
  box-sizing: border-box;
  margin: auto;
  height: 40px;
  width: 500px;

  padding: 10px 12px;

  border: 1px solid transparent;
  border-radius: 4px;
  background-color: white;

  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}

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

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

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