/* Variables from stripe */

/* issues with responsive below */
* {
	box-sizing: border-box;
}

/*
body {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  display: flex;
  justify-content: center;
  align-content: center;
  height: 100vh;
  width: 100vw;
}

form {
  width: 30vw;
  min-width: 500px;
  align-self: center;
  box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
    0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
  border-radius: 7px;
  padding: 40px;
}
*/
.hidden {
	display: none;
}

/* the above kill the overall design. Adjustments needed */
#payment-message {
	color: #697386;
	font-size: 16px;
	line-height: 20px;
	padding-top: 12px;
	text-align: center;
}

#payment-element {
	margin-bottom: 24px;
}

/* Buttons and links */
button {
	background: #5469d4;
	font-family: Arial, sans-serif;
	color: #fff;
	border-radius: 4px;
	border: 0;
	padding: 12px 16px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	display: block;
	transition: all .2s ease;
	box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, .07);
	width: 100%;
}

button:hover {
	filter: contrast(115%);
}

button:disabled {
	opacity: .5;
	cursor: default;
}

/* spinner/processing state, errors */
.spinner, .spinner:before, .spinner:after {
	border-radius: 50%;
}

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

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

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

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

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

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

@media only screen and (max-width: 600px) {
	form {
		width: 80vw;
		min-width: initial;
	}
}

/* Award Cart */
.GDCart h2, .GDCart h3, .GDCart h4, .GDCart p, .GDCart ul, .GDCart li, .GDCart input, .GDCart button {
	font-family: "Urbane", Helvetica, Arial, sans-serif;
}

.GDCart h2 {
	font-size: 40px !important;
	padding-top: 1rem;
	padding-bottom: 1rem;
	border-top: 1px solid #15ae89;
	border-bottom: 1px solid #15ae89;
}

.cartList {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cartBox {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	padding-bottom: 4rem;
}

.cartBox > div {
	width: calc(50% - 40px);
}

.cartBox > div button {
	margin-bottom: 1rem;
	background-color: #15ae89;
	color: #fff;
	border-radius: 25px;
	font-size: 17px;
}

.cartBox > div button.buttonUpdate {
	background: #fff;
	border: 2px solid #15ae89;
	color: #15ae89;
}

.cartBox > div button.buttonCheckout {
	height: 60px;
	border-radius: 35px;
}

.cartCol2 {
	position: relative;
}

.cartCol2 .posFix {}

.cartListItem {
	padding: 10px 20px;
	border-radius: 4px;
	background: #f5f5f5;
	margin-bottom: 6px;
}

.cartCol1 b {
	font-weight: 600;
}

@media only screen 
    and (min-width : 150px) {
	.cartBox {
		display: flex;
		flex-direction: column;
	}
	
	.cartBox > div {
		width: calc(100%);
	}
	
	.cartBox > div.cartCol1 {
		margin-bottom: 2rem;
	}
}

@media only screen 
    and (min-width : 768px) {
	.cartBox {
		display: flex;
		flex-direction: row;
	}
	
	.cartBox > div {
		width: calc(50% - 40px);
	}
	
	.cartBox > div.cartCol1 {
		margin-bottom: 0;
	}
}

/* Award Checkout */
.GDCheckout h2, .GDCheckout h3, .GDCheckout h4, .GDCheckout p, .GDCheckout ul, .GDCheckout li, .GDCheckout input, .GDCheckout button, .GDCheckout label {
	font-family: "Urbane", Helvetica, Arial, sans-serif;
}

.GDCheckout h2 {
	font-size: 40px !important;
	padding-top: 1rem;
	padding-bottom: 1rem;
	border-top: 1px solid #15ae89;
	border-bottom: 1px solid #15ae89;
}

.GDCheckout {
	margin-bottom: 4rem;
}

.checkoutOverview {
	background: #f5f5f5;
	padding: 1.6rem;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	margin-bottom: 1.6rem;
}

.checkoutOverview > div {
	width: calc(30% - 10px);
}

.checkoutOverview > ul {
	width: calc(70% - 10px);
}

.checkoutButton, .secondaryButton {
	margin-bottom: 1rem;
	background-color: #15ae89;
	color: #fff;
	border-radius: 25px;
	font-size: 17px;
}

.secondaryButton {
	background: #fff;
	border: 2px solid #15ae89;
	color: #15ae89;
}

.DetailsPaymentBoxes {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.DetailsPaymentBoxes > div {
	width: calc(50% - 20px);
	background: #f5f5f5;
	padding: 1.6rem;
}

.p-Field {
	margin-bottom: .5rem;
}

.p-Field input {
	width: 100%;
}

.p-Field label {
	font-size: 14px;
	font-weight: 600;
}

.totalPrice {
	font-weight: 600;
	font-family: "Urbane", Helvetica, Arial, sans-serif;
	font-size: 24px;
}

.backToCartButton {
	height: 50px;
	width: 180px;
}

@media only screen 
    and (min-width : 150px) {
	.checkoutOverview {
		flex-direction: column;
	}
	
	.checkoutOverview > ul {
		width: calc(100%);
	}
	
	.checkoutOverview > div {
		width: calc(100%);
	}
	
	.DetailsPaymentBoxes {
		display: flex;
		flex-direction: column;
	}
	
	.DetailsPaymentBoxes > div {
		width: calc(100%);
		margin-bottom: 1.6rem;
	}
}

@media only screen 
    and (min-width : 768px) {
	.checkoutOverview {
		flex-direction: row;
	}
	
	.checkoutOverview > ul {
		width: calc(70% - 10px);
	}
	
	.checkoutOverview > div {
		width: calc(30% - 10px);
	}
	
	.DetailsPaymentBoxes {
		display: flex;
		flex-direction: row;
	}
	
	.DetailsPaymentBoxes > div {
		width: calc(50% - 20px);
		margin-bottom: 0;
	}
}