
/* idealQR inputgroup */
.qr-input-group {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
}

.qr-pink-prepend-image {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding: .35rem .35rem;
	background-color: #e9ecef;
	border: 1px solid #ced4da;
	border-radius: .25rem;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.qr-pink-prepend {
	margin-right: -1px;
}

.qr-pink-button {
	border-radius: .25rem;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	background: #ca0066;
	border-color: #a00051;
	color: #fff;
	font-weight: 400;
	border: 1px solid transparent;
	padding: .375rem .75rem;
	font-size: .9rem;
	width: 100%;
}

.qr-blue-button {
	border-radius: .25rem;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	background: #005498;
	border-color: #024990;
	color: #FFD800;
	font-weight: 400;
	border: 1px solid transparent;
	padding: .375rem .75rem;
	font-size: .9rem;
	width: 100%;
}

.test-button {
	border-radius: .25rem;
	margin: 2px;
}

/* idealQR popup */

.qr-popup {
	background: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

	.qr-popup.hidden {
		display: none;
	}

	.qr-popup.show {
		display: block;
	}

.bck-popup-dialog {
	max-width: 500px;
	margin: 1.75rem auto;
	display: block;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9999;
	overflow: hidden;
	outline: 0;
}

.bck-popup-content {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	width: 100%;
	pointer-events: auto;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid rgba(0,0,0,.2);
	border-radius: .3rem;
	outline: 0;
}

.bck-popup-header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding: 1rem;
	border-bottom: 1px solid #e9ecef;
	border-top-left-radius: .3rem;
	border-top-right-radius: .3rem;
}

.bck-popup-title {
	font-size: 1.25rem;
	font-family: inherit;
	font-weight: 500;
	line-height: 1.5;
	color: inherit;
	margin-bottom: 0;
	margin-top: 0;
}

.bck-popup-body {
	position: relative;
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	padding: 1rem;
}

.bck-popup-footer {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	padding: 1rem;
	border-top: 1px solid #e9ecef;
}

#close-qr-popup {
	background: none;
	border: none;
	padding: 5px 0 5px 0;
	border-bottom: 1px solid #ccc;
	-ms-border-radius: 0;
	border-radius: 0;
}

	#close-qr-popup:hover {
		border-color: #333;
	}

.text-align-center {
	text-align: center !important;
}


#qrProgress .if {
	display: none;
}

#qrProgress.pending .if-pending {
	display: block;
}

#qrProgress.waiting .if-waiting {
	display: block;
}

#qrProgress.success .if-success {
	display: block;
}

#qrProgress.scanned .if-scanned {
	display: block;
}

#qrProgress.failed .if-failed {
	display: block;
}

#qrProgress.cancelled .if-cancelled {
	display: block;
}

#qrProgress.success .circle-loader {
	-webkit-animation: none;
	animation: none;
	border-color: #5cb85c;
	transition: border 500ms ease-out;
}

#qrProgress.failed .circle-loader {
	-webkit-animation: none;
	animation: none;
	border-color: #ff3333;
	transition: border 500ms ease-out;
}

#qrProgress.cancelled .circle-loader {
	-webkit-animation: none;
	animation: none;
	border-color: #ffa500;
	transition: border 500ms ease-out;
}

.circle-loader {
	margin: 0;
	border: 2px solid rgba(0, 0, 0, 0.2);
	border-left-color: #5cb85c;
	animation-name: loader-spin;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	position: relative;
	display: inline-block;
	vertical-align: top;
}

	.circle-loader,
	.circle-loader:after {
		border-radius: 50%;
		width: 9em;
		height: 9em;
	}

.bck-checkmark {
	display: none;
}

	.bck-checkmark.draw:before,
	.bck-checkmark.draw:after {
		animation-duration: 800ms;
		animation-timing-function: ease;
		animation-name: checkmark;
		transform: scaleX(-1) rotate(135deg);
	}

.bck-cross:before, .bck-cross:after {
	content: '';
	position: absolute;
	top: 68px;
	left: 28px;
	width: 80px;
	height: 3px;
	background-color: #ff3333;
}

.bck-cross:before {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
	right: 52px;
}

.bck-cross:after {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
	right: 52px;
}

.bck-checkmark:after {
	opacity: 1;
	height: 4em;
	width: 2em;
	transform-origin: left top;
	border-right: 2px solid #5cb85c;
	border-top: 2px solid #5cb85c;
	content: '';
	left: 2.5em;
	top: 4.5em;
	position: absolute;
}

.bck-triangle {
	position: relative;
	width: 80px;
	height: 80px;
	display: inline-block;
}

.bck-triangle:before {
	content: '!';
	position: absolute;
	top: 8px;
	left: 35px;
	font-size: 50px;
	color: #ffa500;
	font-family: Arial, sans-serif;
}

@keyframes loader-spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes checkmark {
	0% {
		height: 0;
		width: 0;
		opacity: 1;
	}

	20% {
		height: 0;
		width: 2em;
		opacity: 1;
	}

	40% {
		height: 4em;
		width: 2em;
		opacity: 1;
	}

	100% {
		height: 4em;
		width: 2em;
		opacity: 1;
	}
}

@supports (-webkit-appearance: -apple-pay-button) {
	.apple-pay-button {
		display: inline-block;
		-webkit-appearance: -apple-pay-button;
	}
	/* Button styles */
	.apple-pay-button-black {
		-apple-pay-button-style: black;
	}

	.apple-pay-button-white {
		-apple-pay-button-style: white;
	}

	.apple-pay-button-white-with-line {
		-apple-pay-button-style: white-outline;
	}
	/* Button types */
	.apple-pay-button-type-plain {
		-apple-pay-button-type: plain;
	}

	.apple-pay-button-type-book {
		-apple-pay-button-type: book;
	}

	.apple-pay-button-type-buy {
		-apple-pay-button-type: buy;
	}

	.apple-pay-button-type-check-out {
		-apple-pay-button-type: check-out;
	}

	.apple-pay-button-type-donate {
		-apple-pay-button-type: donate;
	}

	.apple-pay-button-type-set-up {
		-apple-pay-button-type: set-up;
	}

	.apple-pay-button-type-subscribe {
		-apple-pay-button-type: subscribe;
	}
}

@supports not (-webkit-appearance: -apple-pay-button) {
	.apple-pay-button {
		display: inline-block;
		background-size: 100% 60%;
		background-repeat: no-repeat;
		background-position: 50% 50%;
		border-radius: 5px;
		padding: 0px;
		box-sizing: border-box;
		min-width: 200px;
		min-height: 32px;
		max-height: 64px;
	}

	.apple-pay-button-black {
		background-image: -webkit-named-image(apple-pay-logo-white);
		background-color: black;
	}

	.apple-pay-button-white {
		background-image: -webkit-named-image(apple-pay-logo-black);
		background-color: white;
	}

	.apple-pay-button-white-with-line {
		background-image: -webkit-named-image(apple-pay-logo-black);
		background-color: white;
		border: .5px solid black;
	}
}
