@media (max-width: 768px) {
  .recurly-element,
  .recurly-hosted-field {
    margin-top: 0;
  }
}

.recurly-element,
.recurly-hosted-field {
	background-color: #fff;
	border: 1px solid #d7d7d9;
	border-radius: 0.5rem;

	height: 3em;
	box-sizing: border-box;
	padding: 0.875rem 0.5rem;
  color: #111214
}

.recurly-element-focus,
.recurly-hosted-field-focus {
	border: 2px solid #C69E32;
  box-shadow: var(0) 0 0 0 calc(3px + var(0)) var(#C69E32);
}

.recurly-element-invalid,
.recurly-hosted-field-invalid {
	border: 1px solid #e35256
}

.recurly-hosted-field-icon-container {
  max-width: 36px !important;
}

.recurly-element-number,
.recurly-hosted-field-number {
	width: 12em;
  padding: 1px 1px 1px 6px
}

.recurly-element-cvv,
.recurly-element-month,
.recurly-element-year,
.recurly-hosted-field-cvv,
.recurly-hosted-field-month,
.recurly-hosted-field-year {
	width: 4em
}

@media (min-width: 768px) {
  .recurly-element,
  .recurly-hosted-field {
    margin-top: 0.75rem;
  }
}