.payment-wrapper {
	font-family: arial, sans-serif;
	font-size: 1.11rem;
	-webkit-font-smoothing: antialiased
}

.hidden {
	display: none;
}

.payment-wrapper .sr-root {
	display: flex;
	flex-direction: row;
	width: 100%;
	max-width: 980px;
	padding: 48px;
	align-content: center;
	justify-content: center;
	height: auto;
	min-height: 100vh;
	margin: 0 auto
}

.payment-wrapper .sr-main {
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	align-self: center;
	padding: 75px 50px;
	background: #f7fafc;
	width: 600px;
	border-radius: 6px;
	box-shadow: 0 0 0 .5px rgba(50, 50, 93, .1), 0 2px 5px 0 rgba(50, 50, 93, .1), 0 1px 1.5px 0 rgba(0, 0, 0, .07)
}

.payment-wrapper .sr-field-error {
	color: #697386;
	text-align: left;
	font-size: 13px;
	line-height: 17px;
	margin-top: 12px
}

.payment-wrapper .sr-input,
.payment-wrapper input[type=text] {
	border: 1px solid var(--gray-border);
	border-radius: 6px;
	padding: 5px 12px;
	width: 100%;
	transition: box-shadow .2s ease;
	background: #fff;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none
}

.payment-wrapper .focused,
.payment-wrapper .sr-input:focus,
.payment-wrapper button:focus,
.payment-wrapper input[type=text]:focus {
	box-shadow: 0 0 0 1px rgba(50, 151, 211, .3), 0 1px 1px 0 rgba(0, 0, 0, .07), 0 0 0 4px rgba(50, 151, 211, .3);
	outline: none;
	z-index: 9
}

.payment-wrapper .sr-input::-moz-placeholder,
.payment-wrapper input[type=text]::-moz-placeholder {
	color: var(--gray-light)
}

.payment-wrapper .sr-input:-ms-input-placeholder,
.payment-wrapper input[type=text]:-ms-input-placeholder {
	color: var(--gray-light)
}

.payment-wrapper .sr-input::-ms-input-placeholder,
.payment-wrapper input[type=text]::-ms-input-placeholder {
	color: var(--gray-light)
}

.payment-wrapper .sr-input::placeholder,
.payment-wrapper input[type=text]::placeholder {
	color: var(--gray-light)
}

.payment-wrapper .sr-result {
	height: 44px;
	transition: height 1s ease;
	color: #697386;
	overflow: auto
}

.payment-wrapper .sr-result code {
	overflow: scroll
}

.payment-wrapper .sr-result.expand {
	height: 350px
}

.payment-wrapper .sr-combo-inputs-row {
	box-shadow: 0 0 0 .5px rgba(50, 50, 93, .1), 0 2px 5px 0 rgba(50, 50, 93, .1), 0 1px 1.5px 0 rgba(0, 0, 0, .07);
	border-radius: 7px
}

.payment-wrapper button {
	background: #0a721b;
	border-radius: 6px;
	color: #fff;
	border: 0;
	padding: 12px 16px;
	margin-top: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all .2s ease;
	display: block;
	box-shadow: 0 4px 5.5px 0 rgba(0, 0, 0, .07);
	width: 100%
}

.payment-wrapper button:hover {
	-webkit-filter: contrast(115%);
	filter: contrast(115%)
}

.payment-wrapper button:active {
	transform: translateY(0) scale(.98);
	-webkit-filter: brightness(.9);
	filter: brightness(.9)
}

.payment-wrapper button:disabled {
	opacity: .5;
	cursor: none
}

.payment-wrapper a {
	color: #fff;
	text-decoration: none;
	transition: all .2s ease
}

.payment-wrapper a:hover {
	-webkit-filter: brightness(.8);
	filter: brightness(.8)
}

.payment-wrapper a:active {
	-webkit-filter: brightness(.5);
	filter: brightness(.5)
}

.payment-wrapper code,
.payment-wrapper pre {
	font-family: SF Mono, IBM Plex Mono, Menlo, monospace;
	font-size: 12px
}

.payment-wrapper .sr-card-element {
	padding-top: 12px
}

@media (max-width:720px) {
	.payment-wrapper .sr-root {
		flex-direction: column;
		justify-content: flex-start;
		padding: 48px 20px;
		min-width: 320px
	}

	.payment-wrapper .sr-header__logo {
		background-position: 50%
	}

	.payment-wrapper .sr-payment-summary {
		text-align: center
	}

	.payment-wrapper .sr-content {
		display: none
	}

	.payment-wrapper .sr-main {
		width: 100%;
		background: #f7fafc;
		box-shadow: 0 0 0 .5px rgba(50, 50, 93, .1), 0 2px 5px 0 rgba(50, 50, 93, .1), 0 1px 1.5px 0 rgba(0, 0, 0, .07);
		border-radius: 6px
	}
}

.payment-wrapper .spinner,
.payment-wrapper .spinner:after,
.payment-wrapper .spinner:before {
	border-radius: 50%
}

.payment-wrapper .spinner {
	color: #fff;
	font-size: 22px;
	text-indent: -99999px;
	margin: 0 auto;
	position: relative;
	width: 20px;
	height: 20px;
	box-shadow: inset 0 0 0 2px;
	transform: translateZ(0)
}

.payment-wrapper .spinner:after,
.payment-wrapper .spinner:before {
	position: absolute;
	content: ""
}

.payment-wrapper .spinner:before {
	width: 10.4px;
	height: 20.4px;
	background: #0a721b;
	border-radius: 20.4px 0 0 20.4px;
	top: -.2px;
	left: -.2px;
	transform-origin: 10.4px 10.2px;
	-webkit-animation: loading 2s ease 1.5s infinite;
	animation: loading 2s ease 1.5s infinite
}

.payment-wrapper .spinner:after {
	width: 10.4px;
	height: 10.2px;
	background: #0a721b;
	border-radius: 0 10.2px 10.2px 0;
	top: -.1px;
	left: 10.2px;
	transform-origin: 0 10.2px;
	-webkit-animation: loading 2s ease infinite;
	animation: loading 2s ease infinite
}

.payment-wrapper .sr-root {
	-webkit-animation: form-in .4s;
	animation: form-in .4s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-timing-function: ease;
	animation-timing-function: ease
}

.payment-wrapper .hidden {
	display: none
}

@-webkit-keyframes loading {
	0% {
		transform: rotate(0deg)
	}

	to {
		transform: rotate(1turn)
	}
}

@keyframes loading {
	0% {
		transform: rotate(0deg)
	}

	to {
		transform: rotate(1turn)
	}
}

@-webkit-keyframes field-in {
	0% {
		opacity: 0;
		transform: translateY(8px) scale(.95)
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1)
	}
}

@keyframes field-in {
	0% {
		opacity: 0;
		transform: translateY(8px) scale(.95)
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1)
	}
}

@-webkit-keyframes form-in {
	0% {
		opacity: 0;
		transform: scale(.98)
	}

	to {
		opacity: 1;
		transform: scale(1)
	}
}

@keyframes form-in {
	0% {
		opacity: 0;
		transform: scale(.98)
	}

	to {
		opacity: 1;
		transform: scale(1)
	}
}