
.clicktopay-nav {
	margin: 25px auto;
	display: flex;
	justify-content: center;
	font-size: 24px;
	gap: 5%;
}

.clicktopay-nav div {
	cursor: pointer;
	width: 45%;
	opacity: 20%;
	text-align: center;
	padding-bottom: 10px;
}

.clicktopay-nav div.selected {
	opacity: 100%;
	border-bottom: 2px solid;
}

.clicktopay-nav div:hover {
	opacity: 100%;
}

.clicktopay-learn-more {
	text-decoration: underline;
	font-size: inherit;
	font-family: inherit;
	font-weight: inherit;
	color: inherit;
	cursor: pointer;
}

.clicktopay-learn-more-display {
	position: fixed;
	background-color: #FFFFFF;
	border-radius: 10px;
	width: 300px;
	margin: auto;
	position: fixed;
	left: calc(50% - 150px);
	top: 150px;
	text-align: left;
	color: #000000;
}

#clicktopay-optin {
	display: flex;
	gap: 10px;
}

#clicktopay-optin-text {
	margin: 0;
	color: #000000;
}

#clicktopay-optin-label {
	cursor: default;
	white-space: normal;
}

#clicktopay-verify-link,
#clicktopay-wallet-link {
	cursor: pointer;
	text-decoration: underline;
	font-size: inherit;
	font-family: inherit;
	font-weight: inherit;
}

#clicktopay-dcf-frame {
	position: fixed;
	width: 320px;
	height: 480px;
	border: none;
	top: 100px;
	left: calc(50% - 160px);
}

.clicktopay-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.clicktopay-overlay div {
	width: 100%;
	height: 100%;
	background-color: #000000;
	opacity: 0.6;
}

.clicktopay .blockElement {
	top: 40% !important;
	left: 35% !important;
}

.nav-clicktopay img {
	margin-right: 0.25em;
	height: 18px;
}

.nav-card img {
	margin: 0 0.25em -2px 0;
	height: 21px;
}

#clicktopay-card-prompt fieldset {
	width: 1em;
	box-shadow: none;
	margin: 0;
	padding: 0;
}

src-mark {
	--src-padding-horizontal: 0;
}

@media only screen and (min-width: 500px) {
	#clicktopay-dcf-frame {
		width: 480px;
		height: 600px;
		left: calc(50% - 240px);
	}
}
