/* You can add global styles to this file, and also import other style files */
body {
	font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
	background: linear-gradient(180deg, #ffffff, #d7d7d7);
	background-repeat: no-repeat;
	background-attachment: fixed;
}

h2 {
	font-weight: 300;
	font-size: xx-large;
}

p {
	font-weight: 300;
}

apple-pay-button {
	--apple-pay-button-width: 170px;
	--apple-pay-button-height: 50px;
	--apple-pay-button-border-radius: 6px;
	--apple-pay-button-padding: 0px 0px;
	--apple-pay-button-box-sizing: border-box;
  }

.apple-pay {
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}


.token-text-area {
	width: 100%;
	text-align: center;
	display: none;
}

.token-text-area.show {
	display: inherit;
}

.token-text-area #token {
	width: 80%;
	height: 150pt;
}

.btn {
	background-color: #333;
	border: 1px solid #7e7e7e;
	&:hover {
		background-color: #7e7e7e;
	}
}

.toast {
	visibility: hidden;
	position: fixed;
	bottom: 30px;
	left: calc(50% - 250px);
	width: 500px;
	background-color: #333;
	color: white;
	text-align: center;
	padding: 10px;
}

.toast.show {
	visibility: visible;
	animation: fadein 0.5s, fadeout 0.5s 3.5s;
}

@keyframes fadein {
	from {
		bottom: 0;
		opacity: 0;
	}

	to {
		bottom: 30px;
		opacity: 1;
	}
}

@keyframes fadeout {
	from {
		bottom: 30px;
		opacity: 1;
	}

	to {
		bottom: 0;
		opacity: 0;
	}
}

@media (max-width: 500px) {
	.toast {
		left: 0;
		width: 100%;
	}
}