body {
	margin: 0;
	width: 100%;
	height: auto;
	background: #FFFFFF;
	font-family: OpenSans-Regular;
	/* padding-bottom: 25%; */
	letter-spacing: normal;
	min-height: 100vh;
	position: relative;
	box-sizing: border-box;
	font-weight: 400;
}

.font-semibold {
	font-family: OpenSans-SemiBold;
	font-weight: normal;
}
.font-bold {
	font-family: OpenSans-Bold;
	font-weight: bold;
}


body * { 
    -webkit-font-smoothing: subpixel-antialiased !important; 
    text-rendering:optimizeLegibility !important;
}

#containerHeader {
	display: flex;
	justify-content: center;
	padding-top: 34px;
	margin-bottom: 34px;
}

#bankartPicture {
	width: 154px;
	height: 26px;
}

#containerBody {
	display: flex;
	align-items: stretch;
	flex-direction: column;
	justify-content: space-between;
	margin-left: 12px;
	margin-right: 12px;
	overflow: hidden;
}

#containerPurchase {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	background-color: #F3F5F8;
	height: 230px;
	vertical-align: top;
}

#purchaseHeader {
	background-color: #01264C;
	color: #FFFFFF;
	margin: 0;
	padding: 13px 16px 12px;
	font-weight: bold;
	font-size: 16px;
	font-family: OpenSans-Bold;
}

#purchaseHeader p,
#cardHeader p {
	margin: 0;
	font-family: OpenSans-Bold;
}

#purchaseBody {
	background-color: #F3F5F8;
	font-size: 14px;
	line-height: 19px;
	font-weight: bold;;
	border: 1px solid #E5EAEF;
	box-sizing: border-box;
	padding-bottom: 5px;
	padding-top: 13px;
	padding-left: 14px;

	font-family: OpenSans-SemiBold;
}

#purchaseBody p {
	color: #3C5F88;
	margin: 0;
}

#purchaseBody div {
	color: #243F60;
	font-size: 16px;
	line-height: 22px;
	margin-bottom: 14px;
}

#price {
	font-family: OpenSans-Bold;
}

#containerCardButtons {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	margin-top: 18px;
}

#card {
	box-sizing: border-box;
}

#cardHeader {
	background-color: #01264C;
	margin: 0;
	color: #FFFFFF;
	padding: 1%;
	font-weight: bold;
	padding: 13px 16px 12px;
	font-size: 16px;
	line-height: 22px;
	font-family: OpenSans-Bold;
}

#cardBody {
	background-color: #FFFFFF;
	box-sizing: border-box;
	margin-top: 0px;
	font-weight: normal;
	padding: 12px;
	padding-top: 19px;
	padding-bottom: 10px;
	border: solid 1px #E5EAEF;
	font-family: OpenSans-SemiBold;
}

#cardBody div {
	background-color: #FFFFFF;
}

#cardBody label {
	display: block;
	color: #3C5F88;
	font-size: 14px;
	line-height: 22px;
	font-family: OpenSans-SemiBold;
}

#containerForm {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

input {
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	
	border: 1px solid #C3CFDC;
	border-radius: 0 !important;
	font-size: 16px;
	line-height: 22px;
	box-sizing: border-box;
	color: #243F60;
	width: 100%;
	background-color: #F3F5F8;
	margin-top: 7px;
	margin-bottom: 16px;
	padding: 9px;
	padding-left: 14px;
	font-family: OpenSans-SemiBold;
	font-weight: normal;
}

input:focus {
	border-radius: 0 !important;
}

#inputCard {
	background: url(Bankart_flik_assets/visa.svg) no-repeat 115% 50%;
	background-size: 40% 40%;
	background-color: #F3F5F8;
}

#containerInput {
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	width: 50%;
}

#containerInput > div {
	flex: 50%;
	margin: 0 !important;
}
#containerInput > div {
	padding: 0;
}

#containerInput input {
}

#inputItem {
}

#containerCv2 {
	display: flex;
	align-items: center;
}

/* #containerCv2 label {
	font-size: 16px;
	line-height: 22px;
} */

#tooltip {
  position: relative;
  display: inline-block;
  height: 18px;
  box-sizing: border-box;
}

#tooltip #tooltiptext {
	box-sizing: border-box;
	text-align: left;
	visibility: hidden;
	background-color: #0460BD;
	font-family: OpenSans-SemiBold;
	color: #FFFFFF;
	position: absolute;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.3s;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.06);
	
	width: 283px;
	height: 95px;
	font-size: 12px;
	line-height: 16px;
	padding-top: 14px;
	padding-left: 9px;
	padding-bottom: 17px;
	left: -43px;
	top: -105px;
}

#tooltip #tooltiptext::after {
	content: "";
	position: absolute;
	border-style: solid;
	border-color: #0460BD transparent transparent transparent;
	
	border-width: 7px;
	top: 95px;
	left: 46px;
}

#tooltip:hover #tooltiptext {
	/*visibility: visible;
	opacity: 1;*/
}

#tooltip_btn {
	width: 18px;
	height: 18px;
	border: none;
	background-image: url(Bankart_flik_assets/info.svg);
	background-color: #FFFFFF;
	background-repeat: no-repeat;
	outline: none;
}

@-moz-document url-prefix() {
  #tooltip_btn {
    position: relative;
	top: -7px;
  }
}

#infoIcon {
	width: 18px;
}

#containerErrors {
	background-color: rgba(239, 223, 222, 0.5);
	font-size: 14px;
	line-height: 19px;
	font-weight: normal;
	color: #BD0404;
	padding-left: 26px;
	padding-right: 26px;
	padding-bottom: 14px;
	padding-top: 15px;
	margin-top: 30px;
	font-family: OpenSans-SemiBold;
}

#containerErrors p {
	margin: 0.5rem 0;
}

#containerErrors p:first-child {
	margin-top: 0;
}
#containerErrors p:last-child {
	margin-bottom: 0;
}

#containerButtons {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-top: 30px;
	width: 100%;
	margin-bottom: 33px;
}

#buttonPay {
	background-color: #0460BD;
	border: 1px solid #0460BD;
	min-height: 36px;
	font-weight: normal;
	font-size: 16px;
	line-height: 22px;
	color: #FFFFFF;
	padding-bottom: 13px;
	padding-top: 13px;
	margin-bottom: 13px;
}

#buttonCancel {
	background-color: #FFFFFF;
	font-family: OpenSans-SemiBold;
	border: #E5EAEF 1px solid;
	color: #243F60;
	min-height: 36px;
	font-weight: normal;
	font-size: 16px;
	line-height: 22px;
	padding-bottom: 13px;
	padding-top: 13px;
}

#containerFooter {
	box-sizing: border-box;
	display:flex;
	text-align: center;
	flex-direction: column;
	justify-content: center;
	bottom: 0;
	padding: 25px 12px 30px;
	border-top: 1px solid #E5EAEF;
	background-color: #FFFFFF;
	bottom: 0;
	box-sizing: border-box;
	width: 100%;
}

#footerIcons {
	margin-bottom: 20px;
}

#footerIcons img {
	margin-left: 42px;
}
#footerIcons img:first-child {
	margin-left: 0;
}

#mastercardIcon, #visaSecureIcon {
	width: 42px;
}

#footerText {
	color: #203F63;
	font-size: 13px;
	line-height: 18px;
	margin: 0;
	/* margin-bottom: 30px; */
}

#footerText a {
	color: #0460BD;
}

::placeholder {
  color: #8B9AAC;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: #8B9AAC;
}

::-ms-input-placeholder { /* Microsoft Edge */
 color: #8B9AAC;
}

.inputError {
	border: 1px solid rgba(189, 4, 4, 0.43);
}

.showErrorMessage {
	display: none;
}

.boldText {
	display: inline-block;
	margin: 0;
	font-family: OpenSans-Bold;
}

.bankartLink {
	font-family: OpenSans-Bold;
}

@supports (-webkit-overflow-scrolling: touch) {
	#purchaseHeader, #purchaseBody div, #cardHeader,
	input, #containerCv2 label
	{
		letter-spacing: 0;
		font-weight: normal;
		font-family: OpenSans-SemiBold;
	}

	#purchaseBody, #cardBody label, #containerErrors {
		letter-spacing: 0;
		font-weight: normal;
		font-family: OpenSans-SemiBold;
	}

	#tooltip #tooltiptext {
		letter-spacing: 0;
		font-weight: normal;
		font-family: OpenSans-SemiBold;
	}
	
	#footerText {
		letter-spacing: 0;
		font-weight: normal;
	}

	#buttonPay, #buttonCancel {
		letter-spacing: 0;
		font-weight: normal;
	}

	#price {
		font-family: OpenSans-Bold !important;
	}
}

@media only screen and (min-width: 786px) {
	body {
		padding: 0;
		padding-bottom: 90px;
	}
	
	#bankartPicture {
		width: 270px;
		height: 46px;
	}
	
	#containerHeader {
		padding-top: 60px;
		margin-bottom: 90px;
	}
	
	#containerBody {
		align-items: flex-start;
		justify-content: center;
		width: 100%;
		flex-direction: row;
		margin-left: 0;
		margin-right: 0;
	}
	
	#containerPurchase {
		min-width: 277px;
		min-height: 267px;
		margin-right: 25px;
	}
	
	#purchaseHeader {
		background-color: #01264C;
		color: #FFFFFF;
		margin: 0;
		padding-left: 22px;
		padding-right: 22px;
		font-family: OpenSans-Bold;
		font-weight: bold;
		font-size: 16px;
		line-height: 22px;
	}

	#purchaseBody {
		background-color: #F3F5F8;
		font-size: 14px;
		line-height: 19px;
		font-weight: bold;;
		border: 1px solid #E5EAEF;
		box-sizing: border-box;
		padding: 22px;
		padding-bottom: 11px;
	}
	
	#purchaseBody p {
		color: #3C5F88;
	}

	#purchaseBody div {
		color: #243F60;
		font-size: 16px;
		line-height: 22px;
		margin-bottom: 22px;
	}

	#price {
		font-weight: bold;
		font-family: OpenSans-Bold;
	}
	
	#containerCardButtons {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		width: 30%;
		min-width: 406px;
		min-height: 361px;
		margin-top: 0;
	}
	
	#cardHeader {
		font-size: 16px;
		padding-left: 22px;
		padding-right: 22px;
	}
	
	#cardBody {
		padding: 22px;
		padding-top: 19px;
		padding-bottom: 4px;
		padding-bottom: 16px;
	}
	
	#cardBody div {
		background-color: #FFFFFF;
	}

	#cardBody label {
		display: block;
		color: #3C5F88;
		font-size: 16px;
	}
	
	#cardBody #containerInput label {
	}
	
	#containerForm {
		margin-bottom: 0;
	}
	
	#card {
		min-width: 406px;
		min-height: 334px;
	}
	
	#inputCard {
		background: url(Bankart_flik_assets/visa.svg) no-repeat 95% 50%;
		background-color: #F3F5F8;
		margin-right: 10px;
	}
	
	#containerInput {
		justify-content: space-between;
		align-items: stretch;
		flex-direction: row;
		width: 100%;
	}

	#containerInput > div {
		flex: 0 0 calc(50% - 12px);
		margin: 0 !important;
	}
	#containerInput > div:nth-child(n) {
		padding-right: 12px;
	}
	#containerInput > div:nth-child(2n) {
		padding-left: 12px;
	}

	#tooltip {
	  position: relative;
	  display: inline-block;
	  height: 18px;
	}

	#tooltip #tooltiptext {
		text-align: left;
		visibility: hidden;
		background-color: #0460BD;
		font-family: OpenSans-SemiBold;
		color: #FFFFFF;
		position: absolute;
		z-index: 1;
		opacity: 0;
		transition: opacity 0.3s;
		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.06);
		
		box-sizing: border-box;
		width: 283px;
		height: 96px;
		font-size: 12px;
		line-height: 16px;
		padding-left: 9px;
		padding-bottom: 18px;
		padding-top: 14px;
		bottom: -55px;
		top: auto;
		left: 30px;
	}

	#tooltip #tooltiptext::after {
		content: "";
		position: absolute;
		border-style: solid;
		top: 24%;
		left: -6%;
		border-color: transparent #0460BD transparent transparent;
		border-width: 9px;
	}
	
	#tooltip:hover #tooltiptext {
		visibility: visible;
		opacity: 1;
	}
	
	#containerErrors {
		margin-top: 16px;
		margin-bottom: -4px;
		font-size: 14px;
		line-height: 19px;
		font-family: OpenSans-SemiBold;
		padding-left: 26px;
		padding-right: 26px;
		padding-bottom: 14px;
		padding-top: 15px;
	}
	
	#containerButtons {
		flex-direction: row-reverse;
		width: auto;
		margin-top: 20px;
		margin-bottom: 100px;
	}
	
	#buttonPay {
		background-color: #0460BD;
		width: 191px;
		font-weight: bold;;
		min-height: 48px;
		font-size: 16px;
		line-height: 22px;
		color: #FFFFFF;
		margin: 0;

		width: calc(50% - 12px);
		padding-right: 12px;
	}
	
	#buttonCancel {
		width: 191px;
		font-size: 16px;
		line-height: 22px;
		margin-top: 0;

		width: calc(50% - 12px);
		padding-left: 12px;
	}

	#containerFooter {
		flex-direction: row-reverse;
		justify-content: space-between;
		align-items: center;
		position: absolute;
		padding: 20px 38px;
	}
	
	#footerIcons {
		margin: 0;
	}

	#footerText {
		float: left;
		font-size: 16px;
		line-height: 22px;
		/* margin-bottom: 31px;
		margin-top: 28px;
		margin-left: 38px; */
	}
	
	#footerText a {
		color: #0460BD;
	}
	
	input {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		
		border: 1px solid #C3CFDC;
		font-size: 18px;
		line-height: 25px;
		box-sizing: border-box;
		color: #243F60;
		width: 100%;
		background-color: #F3F5F8;
		font-weight: bold;;
		margin-top: 8px;
		margin-bottom: 18px;
		padding: 9px;
		padding-left: 16px;
		font-family: OpenSans-SemiBold;
		font-weight: normal;
	}

	#mastercardIcon, #visaSecureIcon {
		width: 42px;
	}
	
	/* @supports (-webkit-overflow-scrolling: touch) {
		#purchaseHeader, #purchaseBody div,
		#cardHeader, #cardBody label, #buttonPay,
		#buttonCancel, #footerText
		{
			letter-spacing: -1.6px;
		}

		#purchaseBody, #containerErrors {
			letter-spacing: -1.4px;
		}		
		
		#tooltip #tooltiptext {
			letter-spacing: -1.2px;
		}
		
		input {
			letter-spacing: -1.8px;
		}
	} */
}

@supports (-webkit-overflow-scrolling: touch) {	
	#mastercardIcon {
		max-width: 48px;
		max-height: 48px;
	}
	
	#visaSecureIcon {
		max-width: 48px;
		max-height: 48px;
	}
}