Payment Do not use – Corporate Entertainment, Simulator hire and brand activation

/***************************
* Custom font declaration *
***************************/
@font-face {
font-family: font-regular;
src: url(“Roboto-Regular.ttf”); }
@font-face {
font-family: font-light;
src: url(“Roboto-Light.ttf”); }
@font-face {
font-family: font-bold;
src: url(“Roboto-Bold.ttf”); }
/***********************************************************
* Here you’ll find all the variables used in the template *
***********************************************************/
/***********************************
* Payment method selection screen *
***********************************/
/**************************
* Creditcard form screen *
**************************/
/************************************
* Confirmation/cancellation screen *
************************************/
/* This is the default template-bc for Ingenico e-Commerce payment pages.
*/
body {
color: #333333;
background-color: #fcfcfc;
font-family: font-regular, Roboto, Roboto, Arial, sans-serif; }

label {
font-family: font-regular, Roboto, Roboto, Arial, sans-serif; }

/**********
* HEADER *
**********/
/* Header */
#payment-zone > .ncoltable1:first-of-type {
background-color: #ffffff;
border-bottom: solid 1px #e4e4e4;
padding: 32px 32px 16px 32px;
width: 100%;
box-sizing: border-box; }

/* Only use the center of the page */
#payment-zone > .ncoltable1:first-of-type tbody {
margin-left: calc(50% – 480px);
width: 960px;
position: relative;
display: flex;
flex-direction: column; }

/* Customer logo */
div#logo-zone {
height: 3.75rem;
position: absolute;
top: 32px;
left: calc(50vw – 480px); }

div#logo-zone > img#customer-logo {
max-height: 3.75rem;
max-width: 144px; }

/* Hide unwanted elements */
#payment-zone > .ncoltable1:first-of-type tr:nth-of-type(2) td:nth-of-type(1),
#payment-zone > .ncoltable1:first-of-type tr:nth-of-type(2) td:nth-of-type(3),
#payment-zone > .ncoltable1:first-of-type tr:nth-of-type(2) td:nth-of-type(4),
#payment-zone > .ncoltable1:first-of-type tr:nth-of-type(3) td:nth-of-type(3),
#payment-zone > .ncoltable1:first-of-type tr:nth-of-type(3) td:nth-of-type(4) {
display: none; }

/* Total charge */
#payment-zone > .ncoltable1:first-of-type tr:nth-of-type(2) td:nth-of-type(2) {
font-weight: bold;
font-size: 1.5rem;
width: auto;
color: #333;
font-family: font-bold, Roboto;
text-align: right;
margin-bottom: 8px; }

/* Prepare content rows for header */
#payment-zone > .ncoltable1:first-of-type tr:first-of-type,
#payment-zone > .ncoltable1:first-of-type tr:nth-of-type(3) {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
width: 100%;
order: 2; }

#payment-zone > .ncoltable1:first-of-type tr:nth-of-type(3) {
top: calc(2rem + 12px); }

#payment-zone > .ncoltable1:first-of-type tr:first-of-type::before {
content: ”;
width: 100%;
order: 1; }

#payment-zone > .ncoltable1:first-of-type tr:first-of-type > td,
#payment-zone > .ncoltable1:first-of-type tr:nth-of-type(3) > td:first-of-type,
#payment-zone > .ncoltable1:first-of-type tr:nth-of-type(3) > td:nth-of-type(2) {
font-size: .75rem;
color: #c4c4c4;
font-family: font-light, Roboto, Roboto, Arial, sans-serif;
width: auto; }

/* Order reference */
#payment-zone > .ncoltable1:first-of-type tr:first-of-type td:first-of-type {
margin-right: 4px; }

/* Beneficiary */
/* The benificiary is mostly on the first row, cell 3 & 4, but sometimes on the third row, cell 1 & 2. */
#payment-zone > .ncoltable1:first-of-type tr:first-of-type td:nth-of-type(3),
#payment-zone > .ncoltable1:first-of-type tr:nth-of-type(3) td:nth-of-type(1) {
margin-right: 4px;
order: 1;
margin-top: 4px; }

#payment-zone > .ncoltable1:first-of-type tr:first-of-type td:nth-of-type(4),
#payment-zone > .ncoltable1:first-of-type tr:nth-of-type(3) td:nth-of-type(2) {
order: 1;
margin-top: 4px; }

/*******************
* PAYMENT METHODS *
*******************/
#payment-zone form .ncoltable1 tbody {
position: relative;
padding: 16px;
box-sizing: border-box; }

/* Payment methods */
.ncoltable2,
form[name=”OGONE_CC_FORM”],
form[name=”OGONE_CC_FORM”] .ncoltable1,
#payment-zone table.ncoltable1:nth-of-type(3),
#payment-zone table.ncoltable1:nth-of-type(4) {
width: 100%;
box-sizing: border-box;
margin-top: 32px; }

#payment-zone table.ncoltable1:nth-of-type(4) {
margin-top: 0; }

/* Only use the center of the page */
.ncoltable2 tbody,
form[name=”OGONE_CC_FORM”] div.paymentZone,
form[name=”OGONE_CC_FORM”] .ncoltable1 > tbody,
#payment-zone table.ncoltable1:nth-of-type(2)[cellpadding=”2″] > tbody,
#payment-zone table.ncoltable1:nth-of-type(3) > tbody,
#payment-zone table.ncoltable1:nth-of-type(4) > tbody {
margin-left: calc(50% – 480px);
width: 960px;
position: relative;
box-sizing: border-box; }
@media screen and (max-width: 1000px) {
.ncoltable2 tbody,
form[name=”OGONE_CC_FORM”] div.paymentZone,
form[name=”OGONE_CC_FORM”] .ncoltable1 > tbody,
#payment-zone table.ncoltable1:nth-of-type(2)[cellpadding=”2″] > tbody,
#payment-zone table.ncoltable1:nth-of-type(3) > tbody,
#payment-zone table.ncoltable1:nth-of-type(4) > tbody {
margin-left: 5%;
width: 90%; } }

/* Hide unwanted elements */
form[name=”OGONE_PM_CHOICE_FORM”] .ncoltable2 tr:first-of-type,
form[name=”OGONE_PM_CHOICE_FORM”] .ncoltable2 tr td:first-of-type:not([colspan=”3″]),
form[name=”OGONE_PM_CHOICE_FORM”] .ncoltable2 tr td:nth-of-type(3) small {
display: none; }

/* Payment method button*/
form[name=”OGONE_PM_CHOICE_FORM”] .ncoltable2 tr,
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:not(:first-of-type) {
display: inline-block;
box-sizing: border-box;
margin: 8px;
padding: 8px;
background-color: #ffffff;
border: solid 1px #e4e4e4;
border-radius: 4px;
cursor: pointer;
width: calc(33% – 18px);
height: 54px;
position: relative;
vertical-align: top; }

form[name=”OGONE_PM_CHOICE_FORM”] .ncoltable2 tr:not([align=”center”]):hover,
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:not(:first-of-type):hover {
margin: 7px;
width: calc(33% – 16px);
height: 56px;
-webkit-box-shadow: 0 0 5px 2px #cccccc;
-moz-box-shadow: 0 0 5px 2px #cccccc;
box-shadow: 0 0 5px 2px #cccccc; }
form[name=”OGONE_PM_CHOICE_FORM”] .ncoltable2 tr:not([align=”center”]):hover td[colspan=”2″] a.PrivacyPolicyLink,
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:not(:first-of-type):hover td[colspan=”2″] a.PrivacyPolicyLink {
left: -3px; }

/* Payment method name */
form[name=”OGONE_PM_CHOICE_FORM”] .ncoltable2 tr td:nth-of-type(2),
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:not(:first-of-type) td:nth-of-type(2) {
width: calc(75% – 32px);
height: 36px;
position: absolute;
right: 8px;
top: 8px;
line-height: 36px;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #333;
font-family: font-regular, Roboto, Roboto, Arial, sans-serif; }

/* Payment method logo */
form[name=”OGONE_PM_CHOICE_FORM”] .ncoltable2 tr td:nth-of-type(3),
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:not(:first-of-type) td:nth-of-type(3) {
width: auto;
height: auto;
position: absolute;
right: 0;
top: 0;
bottom: 0;
left: 0;
overflow: hidden;
display: flex;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
justify-content: center; }

form[name=”OGONE_PM_CHOICE_FORM”] .ncoltable2 tr td:nth-of-type(3) input[type=”image”],
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:not(:first-of-type) td:nth-of-type(3) input[type=”image”] {
height: 36px;
max-width: 25%;
flex-grow: 0;
-ms-flex: 0 0 auto;
min-width: 0;
/* Fix for Chrome flexbox layout */
object-fit: contain;
/* Fix for Chrome flexbox layout */
position: absolute;
left: 0;
top: 0;
bottom: 0;
border-top: solid 8px transparent;
border-bottom: solid 8px transparent;
border-left: solid 10px transparent;
border-right: solid 230px transparent;
margin: 0 !important; }

/* Co-branding */
form[name=”OGONE_PM_CHOICE_FORM”] .ncoltable2 tr td:nth-of-type(3) input[type=”image”][title=”VISA”]:not([type=”image”]:first-of-type),
form[name=”OGONE_PM_CHOICE_FORM”] .ncoltable2 tr td:nth-of-type(3) input[type=”image”][title=”visa”]:not([type=”image”]:first-of-type),
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:not(:first-of-type) td:nth-of-type(3) input[type=”image”][title=”VISA”]:not([type=”image”]:last-of-type),
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:not(:first-of-type) td:nth-of-type(3) input[type=”image”][title=”visa”]:not([type=”image”]:last-of-type) {
animation-name: alternate-images-first;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: step-start; }

form[name=”OGONE_PM_CHOICE_FORM”] .ncoltable2 tr td:nth-of-type(3) input[type=”image”] ~ input[type=”image”],
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:not(:first-of-type) td:nth-of-type(3) input[type=”image”] ~ input[type=”image”] {
background-color: #ffffff;
border-radius: 4px;
opacity: 0;
animation-name: alternate-images;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: step-start; }

@keyframes alternate-images-first {
0% {
opacity: 1; }
50% {
opacity: 0; }
100% {
opacity: 1; } }
@keyframes alternate-images {
0% {
opacity: 0; }
50% {
opacity: 1; }
100% {
opacity: 0; } }
/* Country selection */
form[name=”OGONE_PM_CHOICE_FORM”] .ncoltable2 tr[align=”center”] {
background-color: initial;
border: none; }

form[name=”OGONE_PM_CHOICE_FORM”] .ncoltable2 tr[align=”center”]:hover {
box-shadow: none; }

form[name=”OGONE_PM_CHOICE_FORM”] .ncoltable2 tr td:first-of-type[colspan=”3″],
form[name=”OGONE_PM_CHOICE_FORM”] .ncoltable2 tr td:first-of-type[colspan=”3″] > small {
height: 100%;
display: block; }

form[name=”OGONE_PM_CHOICE_FORM”] .ncoltable2 tr td:first-of-type[colspan=”3″] > small {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center; }

form[name=”OGONE_PM_CHOICE_FORM”] .ncoltable2 tr td:first-of-type[colspan=”3″] > small select {
margin-left: 16px;
flex: 1 0 auto;
height: 80%; }

/* Surcharge */
.clDiscount {
position: absolute;
left: calc(100% + 16px);
bottom: 0;
width: 250%; }

form[name=”OGONE_PM_CHOICE_FORM”] .ncoltable2 tr td:nth-of-type(3) .clDiscount > small {
display: inline;
font-size: 0.8rem;
color: #333;
font-family: font-regular, Roboto, Roboto, Arial, sans-serif; }

/*****************************************
* Terms and Conditions + Privacy Policy *
*****************************************/
/* Hide the buttons */
form[name=”OGONE_PM_CHOICE_FORM”] tr > td[colspan=”2″]:nth-of-type(2),
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:not(:first-of-type) > td[colspan=”2″]:nth-of-type(2) {
overflow: visible;
position: absolute;
left: -8px;
top: -8px;
width: calc(100% + 16px);
height: calc(100% + 16px);
background-color: #fcfcfc;
cursor: auto; }

form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:not(:first-of-type) > td[colspan=”2″]:nth-of-type(2) {
background-color: #ffffff; }

/* Show the links */
form[name=”OGONE_PM_CHOICE_FORM”] tr > td[colspan=”2″] a,
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:not(:first-of-type) > td[colspan=”2″]:nth-of-type(2) a {
z-index: 10;
position: absolute;
width: 100%; }

form[name=”OGONE_PM_CHOICE_FORM”] tr > td[colspan=”2″] a {
width: calc(100vw – 80px); }

.paymentZone a.PrivacyPolicyLink,
.paymentZone a:active.PrivacyPolicyLink,
.paymentZone a:link.PrivacyPolicyLink,
.paymentZone a:visited.PrivacyPolicyLink,
.paymentZone a:hover.PrivacyPolicyLink {
color: #e4e4e4;
font-family: font-regular, Roboto, Roboto, Arial, sans-serif;
text-decoration: none;
font-size: small;
padding: 8px 8px;
white-space: normal; }

.paymentZone a:hover.PrivacyPolicyLink {
text-decoration: underline; }

form[name=”OGONE_CC_FORM”] > table.ncoltable2 > tbody > tr > td[colspan=”2″] > small,
form[name=”OGONE_CC_FORM”] > table.ncoltable2 > tbody > tr > td[colspan=”2″] > small > small,
form[name=”OGONE_CC_FORM”] > table.ncoltable2 > tbody > tr > td[colspan=”2″] > small > small > a.PrivacyPolicyLink {
/*width: calc(100vw – 192px);*/
display: block;
width: 100%;
white-space: normal; }

/***************************
* +—–+—–+—–+ *
* | X + X + + *
* +—–+—–+—–+ *
***************************/
/* When the Terms and Conditions are in the first column of a 3-column layout */
form[name=”OGONE_PM_CHOICE_FORM”] tr:nth-of-type(3n + 2) > td[colspan=”2″] a:not(.PrivacyPolicyLink),
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:nth-of-type(3n + 2) > td[colspan=”2″] a:not(.PrivacyPolicyLink) {
left: -4px;
top: calc(1rem – 6px);
white-space: normal;
color: #e4e4e4;
font-family: font-regular, Roboto, Roboto, Arial, sans-serif; }

form[name=”OGONE_PM_CHOICE_FORM”] tr:nth-of-type(3n + 2):hover > td[colspan=”2″] a:not(.PrivacyPolicyLink),
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:nth-of-type(3n + 2):hover > td[colspan=”2″] a:not(.PrivacyPolicyLink) {
left: -3px !important;
top: calc(1rem – 5px);
white-space: normal;
color: #e4e4e4;
font-family: font-regular, Roboto, Roboto, Arial, sans-serif; }

/* When the Privacy Policy is in the second column of a 3-column layout */
form[name=”OGONE_PM_CHOICE_FORM”] tr:nth-of-type(3n) > td[colspan=”2″] a.PrivacyPolicyLink,
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:nth-of-type(3n) > td[colspan=”2″] a.PrivacyPolicyLink {
left: calc(-100% – 10px);
top: 76px;
white-space: normal;
color: #e4e4e4;
font-family: font-regular, Roboto, Roboto, Arial, sans-serif; }

form[name=”OGONE_PM_CHOICE_FORM”] tr:nth-of-type(3n):hover > td[colspan=”2″] a.PrivacyPolicyLink,
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:nth-of-type(3n):hover > td[colspan=”2″] a.PrivacyPolicyLink {
top: 78px;
white-space: normal;
color: #e4e4e4;
font-family: font-regular, Roboto, Roboto, Arial, sans-serif; }

/***************************
* +—–+—–+—–+ *
* | + X + X + *
* +—–+—–+—–+ *
***************************/
/* When the Terms and Conditions are in the second column of a 3-column layout */
form[name=”OGONE_PM_CHOICE_FORM”] tr:nth-of-type(3n) > td[colspan=”2″] a:not(.PrivacyPolicyLink),
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:nth-of-type(3n) > td[colspan=”2″] a:not(.PrivacyPolicyLink) {
left: calc(-100% – 6px);
top: calc(100% + 1rem);
white-space: normal;
pointer-events: all; }

form[name=”OGONE_PM_CHOICE_FORM”] tr:nth-of-type(3n):hover > td[colspan=”2″] a:not(.PrivacyPolicyLink),
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:nth-of-type(3n):hover > td[colspan=”2″] a:not(.PrivacyPolicyLink) {
left: calc(-100% – 3px);
top: calc(100% + 1rem – 1px);
white-space: normal; }

/* When the Privacy Policy is in the third column of a 3-column layout */
form[name=”OGONE_PM_CHOICE_FORM”] tr:nth-of-type(3n + 1) > td[colspan=”2″] a.PrivacyPolicyLink,
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:nth-of-type(3n + 1) > td[colspan=”2″] a.PrivacyPolicyLink {
left: calc(-200% – 10px);
top: calc(100% + 2.5rem – 2px);
white-space: normal; }

form[name=”OGONE_PM_CHOICE_FORM”] tr:nth-of-type(3n + 1):hover > td[colspan=”2″] a.PrivacyPolicyLink,
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:nth-of-type(3n + 1):hover > td[colspan=”2″] a.PrivacyPolicyLink {
left: calc(-200% – 5px);
top: calc(100% + 2.5rem – 3px);
white-space: normal; }

/* The last row is completely filled, so we should add some extra space for the links */
form[name=”OGONE_PM_CHOICE_FORM”] tr:last-child:nth-child(3n + 1) {
margin-bottom: 60px; }

form[name=”OGONE_PM_CHOICE_FORM”] tr:last-child:nth-child(3n + 1):hover {
margin-bottom: 59px; }

/***************************
* +—–+—–+—–+ *
* | X + + X + *
* +—–+—–+—–+ *
***************************/
/* When the Terms and Conditions are in the third column of a 3-column layout */
form[name=”OGONE_PM_CHOICE_FORM”] tr:nth-of-type(3n + 1) > td[colspan=”2″] a:not(.PrivacyPolicyLink),
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:nth-of-type(3n + 1) > td[colspan=”2″] a:not(.PrivacyPolicyLink) {
left: calc(-200% – 16px);
top: calc(100% + 1rem);
white-space: normal;
color: #e4e4e4;
font-family: font-regular, Roboto, Roboto, Arial, sans-serif;
pointer-events: all; }

form[name=”OGONE_PM_CHOICE_FORM”] tr:nth-of-type(3n + 1):hover > td[colspan=”2″] a:not(.PrivacyPolicyLink),
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:nth-of-type(3n + 1):hover > td[colspan=”2″] a:not(.PrivacyPolicyLink) {
left: calc(-200% – 11px);
top: calc(100% + 1rem – 1px);
white-space: normal;
color: #e4e4e4;
font-family: font-regular, Roboto, Roboto, Arial, sans-serif; }

/* When the Privacy Policy is in the first column of a 3-column layout */
form[name=”OGONE_PM_CHOICE_FORM”] tr:nth-of-type(3n + 2) > td[colspan=”2″] a.PrivacyPolicyLink,
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:nth-of-type(3n + 2) > td[colspan=”2″] a.PrivacyPolicyLink {
left: -4px;
top: 2rem;
white-space: normal;
color: #e4e4e4;
font-family: font-regular, Roboto, Roboto, Arial, sans-serif;
pointer-events: all; }

form[name=”OGONE_PM_CHOICE_FORM”] tr:nth-of-type(3n + 2):hover > td[colspan=”2″] a.PrivacyPolicyLink,
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:nth-of-type(3n + 2):hover > td[colspan=”2″] a.PrivacyPolicyLink {
top: calc(2rem + 1px);
white-space: normal;
color: #e4e4e4;
font-family: font-regular, Roboto, Roboto, Arial, sans-serif; }

/********************
* CREDIT CARD FORM *
********************/
/* Credit card form*/
form[name=”OGONE_CC_FORM”] .ncoltable2 > tbody,
form[name=”OGONE_CC_FORM”] .ncoltable1 > tbody,
form[name=”OGONE_DD_FORM”] .ncoltable2 > tbody,
form[name=”downloadformDirectEbanking”] .ncoltable2 > tbody,
form[name=”downloadformING”] .ncoltable2 > tbody,
form[name=”OGONE_BT_FORM”] .ncoltable2 > tbody,
form[name=”OGONE_BT_FORM”] .ncoltable1 > tbody,
form[name=”OGONE_OI_FORM”] .ncoltable2 > tbody,
form[name=”OGONE_I_FORM”] .ncoltable2 > tbody,
#payment-zone .ncoltable1:nth-of-type(2)[cellpadding=”2″] > tbody,
#payment-zone table.ncoltable1:nth-of-type(2)[cellpadding=”2″] > tbody,
#payment-zone table.ncoltable1:nth-of-type(3) > tbody,
#payment-zone table.ncoltable1:nth-of-type(4) > tbody,
form[name=”GiftCardList”] .ncoltable2 > tbody,
form[name=”OGONE_CC_FORM”] div.paymentZone {
box-sizing: border-box;
margin-top: 48px;
padding: 16px 16px 32px 16px;
background-color: #ffffff;
border: solid 1px #e4e4e4;
border-radius: 4px;
position: relative;
display: flex;
flex-flow: row wrap; }

form[name=”OGONE_CC_FORM”] .ncoltable2 > tbody > tr:first-of-type > td:first-of-type {
font-weight: bold;
font-size: 14px; }

form[name=”OGONE_CC_FORM”] .ncoltable2 > tbody > tr > td:first-of-type > small {
white-space: nowrap;
color: #333;
font-family: font-bold, Roboto, Roboto, Arial, sans-serif; }

/* Input labels */
form[name=”OGONE_CC_FORM”] .ncoltable2 > tbody > tr > td:first-of-type,
form[name=”GiftCardList”] .ncoltable2 > tbody > tr > td:first-of-type,
form[name=”OGONE_OI_FORM”] .ncoltable2 > tbody > tr > td:first-of-type .fieldTitle,
form[name=”OGONE_I_FORM”] .ncoltable2 > tbody > tr > td:first-of-type .fieldTitle {
text-align: left;
font-variant: small-caps;
font-size: small;
font-weight: 500; }

/* Input block positions */
form[name=”OGONE_CC_FORM”] .ncoltable2 > tbody > tr,
form[name=”GiftCardList”] .ncoltable2 > tbody > tr,
form[name=”OGONE_OI_FORM”] .ncoltable2 > tbody > tr,
form[name=”OGONE_I_FORM”] .ncoltable2 > tbody > tr {
width: calc(100% – 96px);
min-height: 24px;
margin-top: 16px;
margin-left: 48px; }
@media (max-width: 750px) {
form[name=”OGONE_CC_FORM”] .ncoltable2 > tbody > tr,
form[name=”GiftCardList”] .ncoltable2 > tbody > tr,
form[name=”OGONE_OI_FORM”] .ncoltable2 > tbody > tr,
form[name=”OGONE_I_FORM”] .ncoltable2 > tbody > tr {
width: 100%;
margin-left: 0; } }

form[name=”OGONE_CC_FORM”] .ncoltable2 > tbody > tr:first-of-type,
form[name=”OGONE_OI_FORM”] .ncoltable2 > tbody > tr:first-of-type,
form[name=”OGONE_I_FORM”] .ncoltable2 > tbody > tr:first-of-type {
margin-left: 16px; }
form[name=”OGONE_CC_FORM”] .ncoltable2 > tbody > tr:first-of-type td,
form[name=”OGONE_OI_FORM”] .ncoltable2 > tbody > tr:first-of-type td,
form[name=”OGONE_I_FORM”] .ncoltable2 > tbody > tr:first-of-type td {
display: inline-block;
width: auto;
vertical-align: middle; }

form[name=”OGONE_CC_FORM”] .ncoltable2 > tbody > tr:first-of-type > td > img {
max-height: 20px;
max-width: 56px;
z-index: 10;
margin-left: 8px; }

/* Hide old labels */
form[name=”OGONE_CC_FORM”] .ncoltable2 > tbody > tr:not(:first-of-type) > td:first-of-type > small {
color: transparent; }

form[name=”OGONE_CC_FORM”] .ncoltable2 > tbody > tr > td:first-of-type > small > label {
color: #333;
font-family: font-regular, Roboto, Arial, sans-serif; }

/* Show a mm/yyyy slash */
label[for=”Ecom_Payment_Card_ExpDate_Month”]::after {
margin-left: 4px;
content: ‘/’; }

/* Inputs */
form[name=”OGONE_CC_FORM”] .ncoltable2 > tbody > tr input:not([src]),
form[name=”OGONE_DD_FORM”] .ncoltable2 > tbody > tr input,
form[name=”downloadformDirectEbanking”] .ncoltable2 > tbody > tr input,
form[name=”downloadformING”] .ncoltable2 > tbody > tr input[type=”submit”],
form[name=”OGONE_BT_FORM”] .ncoltable2 > tbody > tr input,
form[name=”OGONE_BT_FORM”] .ncoltable1 > tbody > tr input,
form[name=”GiftCardList”] .ncoltable2 > tbody > tr td:not(:nth-of-type(3)) input,
#payment-zone .ncoltable1:nth-of-type(2)[style=”padding-top:10px”] > tbody > tr input,
form[name=”OGONE_OI_FORM”] .ncoltable2 > tbody > tr input:not([type=”checkbox”]),
form[name=”OGONE_I_FORM”] .ncoltable2 > tbody > tr input:not([type=”checkbox”]) {
width: calc(100% – 26px);
border: solid 1px #e4e4e4;
border-radius: 3px;
height: 32px;
margin-top: 8px;
padding: 0 12px;
background-color: #ffffff;
color: #333;
font-family: font-regular, Roboto, Roboto, Arial, sans-serif; }

form[name=”OGONE_CC_FORM”] .ncoltable2 > tbody > tr input:not([src]):hover,
form[name=”OGONE_DD_FORM”] .ncoltable2 > tbody > tr input:hover,
form[name=”OGONE_BT_FORM”] .ncoltable2 > tbody > tr input:hover,
form[name=”OGONE_BT_FORM”] .ncoltable1 > tbody > tr input:hover,
form[name=”GiftCardList”] .ncoltable2 > tbody > tr td:not(:nth-of-type(3)) input:hover,
#payment-zone .ncoltable1:nth-of-type(2)[style=”padding-top:10px”] > tbody > tr input:hover,
form[name=”OGONE_OI_FORM”] .ncoltable2 > tbody > tr input:not([type=”checkbox”]):hover,
form[name=”OGONE_I_FORM”] .ncoltable2 > tbody > tr input:not([type=”checkbox”]):hover {
-webkit-box-shadow: 0 0 5px 2px #cccccc;
-moz-box-shadow: 0 0 5px 2px #cccccc;
box-shadow: 0 0 5px 2px #cccccc; }

/* Selects */
form[name=”OGONE_CC_FORM”] .ncoltable2 > tbody > tr select,
form[name=”OGONE_OI_FORM”] .ncoltable2 > tbody > tr select,
form[name=”OGONE_I_FORM”] .ncoltable2 > tbody > tr select {
width: 72px;
border: solid 1px #e4e4e4;
border-radius: 3px;
height: 32px;
margin-top: 8px;
padding: 0 8px;
background-color: #ffffff;
color: #333;
font-family: font-regular, Roboto, Roboto, Arial, sans-serif; }

form[name=”OGONE_CC_FORM”] .ncoltable2 > tbody > tr select:hover,
form[name=”OGONE_OI_FORM”] .ncoltable2 > tbody > tr select:hover,
form[name=”OGONE_I_FORM”] .ncoltable2 > tbody > tr select:hover {
-webkit-box-shadow: 0 0 5px 2px #cccccc;
-moz-box-shadow: 0 0 5px 2px #cccccc;
box-shadow: 0 0 5px 2px #cccccc; }

select#Ecom_Payment_Card_ExpDate_Month {
width: 56px;
margin-right: 4px; }

select#Ecom_Payment_Card_ExpDate_Year {
width: 72px;
margin-left: 4px; }

select#OwnerCTY {
width: 100%; }

form[name=”OGONE_CC_FORM”] .ncoltable2 > tbody > tr:nth-of-type(3) input {
/* width: calc(100% – 64px);
padding: 0 12px 0 50px; */
width: calc(100% – 26px);
padding: 0 12px; }

/* Expiry date input block */
form[name=”OGONE_CC_FORM”] .ncoltable2 > tbody > tr:nth-of-type(4) {
width: calc(50% – 56px); }

/* Card verification code input block */
form[name=”OGONE_CC_FORM”] .ncoltable2 > tbody > tr:nth-of-type(5) {
left: calc(50% + 8px);
width: calc(50% – 56px); }

form[name=”OGONE_CC_FORM”] .ncoltable2 > tbody > tr:nth-of-type(5) input:not([src]) {
width: calc(100% – 90px); }

label[for=”OwnerZIP”] ~ label[for=”Ownertown”]::before {
content: ‘/ ‘; }

form[name=”OGONE_CC_FORM”] .ncoltable2 > tbody > tr > td:nth-of-type(2) > small > input[type=”text”]:nth-last-child(2),
form[name=”OGONE_CC_FORM”] .ncoltable2 > tbody > tr > td:nth-of-type(2) > small > input[type=”text”]:nth-child(2) {
width: calc(50% – 32px); }

form[name=”OGONE_CC_FORM”] .ncoltable2 > tbody > tr:last-of-type > td:first-of-type > small {
visibility: visible; }

/* Submit button */
form[name=”OGONE_CC_FORM”] .ncoltable2 > tbody > tr > td:first-of-type > small > input[type=”submit”],
form[name=”OGONE_DD_FORM”] .ncoltable2 > tbody > tr:last-of-type > td:first-of-type > input[type=”submit”],
form[name=”OGONE_DD_FORM”] .ncoltable2 > tbody > tr:nth-last-of-type(2) > td:first-of-type > input[type=”submit”],
form[name=”downloadformDirectEbanking”] .ncoltable2 > tbody > tr:last-of-type > td:first-of-type input[type=”submit”],
form[name=”downloadformING”] .ncoltable2 > tbody > tr:last-of-type > td:first-of-type input[type=”submit”],
#payment-zone .ncoltable1:nth-of-type(2)[style=”padding-top:10px”] > tbody > tr input,
form[name=”OGONE_BT_FORM”] .ncoltable2 > tbody > tr > td:first-of-type input[type=”submit”],
form[name=”OGONE_BT_FORM”] .ncoltable1 > tbody > tr > td:first-of-type input[type=”submit”],
form[name=”GiftCardList”] .ncoltable2 > tbody > tr > td:first-of-type input[type=”submit”],
form[name=”OGONE_OI_FORM”] .ncoltable2 > tbody > tr > td:first-of-type input[type=”submit”],
form[name=”OGONE_I_FORM”] .ncoltable2 > tbody > tr > td:first-of-type input[type=”submit”] {
padding: 1px;
width: 100%;
background-color: #03A9F4;
border: solid 1px #03A9F4;
color: #ffffff;
font-family: font-regular, Roboto, Arial, sans-serif;
cursor: pointer; }

form[name=”OGONE_CC_FORM”] .ncoltable2 > tbody > tr > td:first-of-type > small > input[type=”submit”]:hover,
form[name=”OGONE_DD_FORM”] .ncoltable2 > tbody > tr:last-of-type > td:first-of-type > input[type=”submit”]:hover,
form[name=”downloadformDirectEbanking”] .ncoltable2 > tbody > tr:last-of-type > td:first-of-type input[type=”submit”]:hover,
form[name=”downloadformING”] .ncoltable2 > tbody > tr:last-of-type > td:first-of-type input[type=”submit”]:hover,
#payment-zone .ncoltable1:nth-of-type(2)[style=”padding-top:10px”] > tbody > tr input:hover,
form[name=”OGONE_BT_FORM”] .ncoltable2 > tbody > tr > td:first-of-type input[type=”submit”]:hover,
form[name=”OGONE_BT_FORM”] .ncoltable1 > tbody > tr > td:first-of-type input[type=”submit”]:hover,
form[name=”GiftCardList”] .ncoltable2 > tbody > tr > td:first-of-type input[type=”submit”]:hover,
form[name=”OGONE_OI_FORM”] .ncoltable2 > tbody > tr > td:first-of-type input[type=”submit”]:hover,
form[name=”OGONE_I_FORM”] .ncoltable2 > tbody > tr > td:first-of-type input[type=”submit”]:hover {
padding: 0 2px 2px 0;
-webkit-box-shadow: 0 0 3px 1px #89b7dd;
-moz-box-shadow: 0 0 3px 1px #89b7dd;
box-shadow: 0 0 3px 1px #89b7dd; }

/* Card verification code help */
form[name=”OGONE_CC_FORM”] .ncoltable2 > tbody > tr:nth-of-type(5) > td:nth-of-type(2) {
position: relative; }

form[name=”OGONE_CC_FORM”] .ncoltable2 > tbody > tr:nth-of-type(5) a.midncol {
box-sizing: content-box;
position: absolute;
top: 13px;
right: 32px;
width: 0;
height: 0;
overflow: hidden;
text-overflow: clip;
white-space: nowrap;
background: url(“ic_help.png”);
background-repeat: no-repeat;
background-size: 24px;
padding: 24px 24px 0 0; }

form[name=”OGONE_CC_FORM”] .ncoltable2 > tbody > tr:nth-of-type(5) select[name=”CVCFlag”] {
width: calc(100% – 64px); }

/**************
* iDEAL FORM *
**************/
table#iDealTbl > tbody {
box-sizing: border-box;
margin-top: 48px;
padding: 16px 16px 32px 16px;
background-color: #ffffff;
border: solid 1px #e4e4e4;
border-radius: 4px;
position: relative;
display: flex;
flex-flow: row wrap; }

table#iDealTbl > tbody > tr:first-of-type {
margin: 56px 32px 8px 34px;
font-variant: small-caps;
font-size: small;
font-weight: 500;
width: 100%; }

table#iDealTbl > tbody > tr:nth-of-type(2) > td:first-of-type > img {
position: absolute;
top: 16px;
right: 16px; }

table#iDealTbl > tbody > tr:nth-of-type(2) {
flex-grow: 1; }

table#iDealTbl > tbody > tr:nth-of-type(2) > td:nth-of-type(2),
table#iDealTbl > tbody > tr:nth-of-type(2) > td:nth-of-type(2) > select {
width: calc(100% – 18px); }

table#iDealTbl select[name=”ISSUERID”] {
margin-top: 8px;
margin-left: 32px;
border: solid 1px #e4e4e4;
border-radius: 3px;
height: 32px;
padding: 0 8px;
font-family: “Roboto, Arial, sans-serif”, sans-serif; }

table#iDealTbl select[name=”ISSUERID”]:hover {
-webkit-box-shadow: 0 0 5px 2px #cccccc;
-moz-box-shadow: 0 0 5px 2px #cccccc;
box-shadow: 0 0 5px 2px #cccccc; }

table#iDealTbl input[type=”submit”] {
margin-top: 8px;
margin-left: 16px;
margin-right: 32px;
font-family: “Roboto, Arial, sans-serif”, sans-serif;
border: solid 1px #03A9F4;
border-radius: 4px;
cursor: pointer;
height: 32px;
background-color: #03A9F4;
color: #ffffff;
font-family: font-regular, Roboto, Arial, sans-serif; }

table#iDealTbl input[type=”submit”]:hover {
margin-top: 7px;
margin-left: 15px;
margin-right: 33px;
-webkit-box-shadow: 0 0 5px 2px #cccccc;
-moz-box-shadow: 0 0 5px 2px #cccccc;
box-shadow: 0 0 5px 2px #cccccc; }

/*********************
* DIRECT DEBIT FORM *
*********************/
form[name=”OGONE_DD_FORM”] .ncoltable2 > tbody {
display: flex; }

form[name=”OGONE_DD_FORM”] .ncoltable2 > tbody > tr {
width: calc(100% – 96px);
margin-top: 16px;
margin-left: 48px;
min-height: 24px; }

form[name=”OGONE_DD_FORM”] .ncoltable2 > tbody > tr:first-of-type {
margin-left: 16px; }

form[name=”OGONE_DD_FORM”] .ncoltable2 > tbody > tr > td > div.fieldValue {
padding: 0; }

form[name=”OGONE_DD_FORM”] .ncoltable2 > tbody > tr > td > div.fieldTitle,
form[name=”OGONE_DD_FORM”] .ncoltable2 > tbody > tr:nth-of-type(2) > td:nth-of-type(2) > span.fieldTitle {
padding: 0;
text-align: left;
visibility: hidden; }

form[name=”OGONE_DD_FORM”] .ncoltable2 > tbody > tr > td {
width: 100%; }

form[name=”OGONE_DD_FORM”] .ncoltable2 > tbody > tr > td > div.sectionTitle {
font-variant: small-caps;
font-size: 14px;
font-weight: 500;
text-decoration: none;
text-align: start;
padding: 0; }

form[name=”OGONE_DD_FORM”] .ncoltable2 > tbody > tr > td > div.fieldTitle > label,
form[name=”OGONE_DD_FORM”] .ncoltable2 > tbody > tr:nth-of-type(2) > td:nth-of-type(2) label {
font-variant: small-caps;
font-size: small;
font-weight: 500;
visibility: visible; }

form[name=”OGONE_DD_FORM”] label[for=”owner_city”]::before {
content: ‘/ ‘; }

form[name=”OGONE_DD_FORM”] .ncoltable2 > tbody > tr > td:nth-of-type(2) > div.fieldValue > input[type=”text”]:nth-last-child(2),
form[name=”OGONE_DD_FORM”] .ncoltable2 > tbody > tr > td:nth-of-type(2) > div.fieldValue > input[type=”text”]:nth-child(2) {
width: calc(50% – 33px); }

/*****************************
* DIRECT DEBIT CONFIRMATION *
*****************************/
div#payment-zone > table.ncoltable1:nth-of-type(2)[style=”padding-top:10px”] > tbody td.ncoltxtl {
margin-top: 16px;
margin-left: 48px;
font-variant: small-caps;
font-size: 14px;
font-weight: 500;
text-decoration: none;
text-align: start; }

div#payment-zone > table.ncoltable1:nth-of-type(2)[style=”padding-top:10px”] > tbody td.ncoltxtl:not([align=”right”]) {
margin-top: 0;
height: 0; }

div#payment-zone > table.ncoltable1:nth-of-type(2)[style=”padding-top:10px”] > tbody td.ncoltxtr {
margin-top: 8px;
margin-left: 48px;
display: inline-block;
font-family: monospace;
font-size: 1.25rem;
padding: 0.25rem 0.75rem;
font-weight: normal;
border: solid 1px #e4e4e4;
border-radius: 3px;
white-space: nowrap;
width: 250px;
max-width: calc(100% – 80px);
min-height: 1rem; }

div#payment-zone > table.ncoltable1:nth-of-type(2)[style=”padding-top:10px”] > tbody tr:last-of-type td.ncoltxtc > form[name=”OGONE_DD_FORM”] > input[type=”submit”] {
margin-top: 24px; }

/*******
* ELV *
*******/
/* This element contains a , so we fix the height of the row here */
form[name=”OGONE_DD_FORM”] .ncoltable2 > tbody > tr:nth-of-type(2) > td:nth-of-type(2) > div.fieldValue {
max-height: 42px; }

span.star {
visibility: visible; }

/***************
* ELV AUSTRIA *
***************/
/* Put ‘Bank account’ and ‘BLZ’ on seperate rows */
form[name=”OGONE_DD_FORM”] .ncoltable2 > tbody > tr:nth-of-type(2) > td:nth-of-type(2) {
display: flex;
flex-flow: row wrap; }

/* Make sure the items wrap in their flex parent */
form[name=”OGONE_DD_FORM”] .ncoltable2 > tbody > tr:nth-of-type(2) > td:nth-of-type(2) > * {
width: 100%; }

/* Make sure the label is aligned to the start */
form[name=”OGONE_DD_FORM”] .ncoltable2 > tbody > tr:nth-of-type(2) > td:nth-of-type(2) > span.fieldTitle {
padding: 0;
text-align: left; }

/****************************
* SOFORT (DIRECT EBANKING) *
****************************/
form[name=”downloadformDirectEbanking”] .ncoltable2 > tbody {
display: flex;
flex-flow: row wrap; }

form[name=”downloadformDirectEbanking”] .ncoltable2 > tbody > tr:first-of-type,
form[name=”downloadformDirectEbanking”] .ncoltable2 > tbody > tr:last-of-type {
width: 100%; }

form[name=”downloadformDirectEbanking”] .ncoltable2 > tbody > tr:first-of-type {
margin-top: 16px; }

form[name=”downloadformDirectEbanking”] .ncoltable2 > tbody > tr:last-of-type > td:first-of-type input[type=”submit”] {
padding: 1px 16px;
width: auto; }

form[name=”downloadformDirectEbanking”] .ncoltable2 > tbody > tr:last-of-type > td:first-of-type input[type=”submit”]:hover {
padding: 0 17px 2px 15px; }

/*************
* SURCHARGE *
*************/
form[name=”downloadformING”] .ncoltable2 > tbody {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center; }

form[name=”downloadformING”] .ncoltable2 > tbody tr:nth-of-type(2),
form[name=”downloadformING”] .ncoltable2 > tbody tr:nth-of-type(4) {
display: none; }

form[name=”downloadformING”] .ncoltable2 > tbody tr {
width: 100%; }

form[name=”downloadformING”] .ncoltable2 > tbody tr:not(:last-of-type) {
margin-top: 16px; }

form[name=”downloadformING”] .ncoltable2 > tbody tr:first-of-type td:nth-of-type(2) {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 16px; }

/**************
* BANCONTACT *
**************/
html body #payment-zone > table.ncoltable1 {
min-width: 0; }

html body table.ncoltable3 {
min-width: 0; }

/**************************
* BANK TRANSFER – PAGE 1 *
**************************/
form[name=”OGONE_BT_FORM”] .ncoltable2 > tbody > tr:last-of-type {
display: none; }

form[name=”OGONE_BT_FORM”] .ncoltable2 > tbody > tr {
width: calc(100% – 96px);
margin-top: 16px;
margin-left: 48px;
min-height: 24px; }

form[name=”OGONE_BT_FORM”] .ncoltable2 > tbody > tr:nth-of-type(2) > td:first-of-type label {
font-variant: small-caps;
font-size: small;
font-weight: 500;
visibility: visible; }

/**************************
* BANK TRANSFER – PAGE 2 *
**************************/
/* Use the full width for the table */
form[name=”OGONE_BT_FORM”] .ncoltable1 {
width: 100%;
box-sizing: border-box;
margin-top: 32px; }

/* Only use the center of the page for the table body */
form[name=”OGONE_BT_FORM”] .ncoltable1 > tbody {
margin-left: calc(50% – 480px);
width: 960px;
position: relative;
box-sizing: border-box; }

form[name=”OGONE_BT_FORM”] .ncoltable1 > tbody > tr {
width: calc(100% – 96px);
margin-top: 16px;
margin-left: 48px;
min-height: 24px; }

form[name=”OGONE_BT_FORM”] .ncoltable1 > tbody > tr:first-of-type,
form[name=”OGONE_BT_FORM”] .ncoltable1 > tbody > tr:last-of-type {
margin-left: 16px; }

form[name=”OGONE_BT_FORM”] .ncoltable1 > tbody > tr:nth-of-type(2) {
margin-left: 16px; }

form[name=”OGONE_BT_FORM”] .ncoltable1 > tbody > tr:nth-of-type(2) > td {
text-align: start; }

form[name=”OGONE_BT_FORM”] .ncoltable1 > tbody > tr:nth-of-type(2) > td .DDlabel {
font-variant: small-caps;
font-size: 14px;
font-weight: 500; }

form[name=”OGONE_BT_FORM”] .ncoltable1 > tbody > tr:not(:nth-of-type(2)) > td:first-of-type > p:not(.DDtxt) > small {
font-variant: small-caps;
font-size: small;
font-weight: 500;
visibility: visible; }

form[name=”OGONE_BT_FORM”] .ncoltable1 > tbody > tr:not(:nth-of-type(2)) > td:nth-of-type(2) {
padding-top: 0.5rem; }

form[name=”OGONE_BT_FORM”] .ncoltable1 > tbody > tr:not(:nth-of-type(2)) > td:nth-of-type(2) > p:not(.DDtxt) > small {
display: inline-block;
font-family: monospace;
font-size: 1.25rem;
padding: 0.25rem 0.75rem;
font-weight: normal;
border: solid 1px #e4e4e4;
border-radius: 3px;
white-space: nowrap;
width: 200px; }

form[name=”OGONE_BT_FORM”] .ncoltable1 > tbody > tr:not(:nth-of-type(2)) > td:nth-of-type(2) > p:not(.DDtxt) > small > span#rfbt {
font-weight: normal; }

form[name=”OGONE_BT_FORM”] .ncoltable1 > tbody > tr > td:first-of-type p.DDtxt {
text-align: start; }

form[name=”OGONE_BT_FORM”] .ncoltable1 > tbody > tr > td:first-of-type p.DDtxt b {
font-weight: bold; }

/*******
* ATU *
*******/
form[name=”OGONE_CC_FORM”] > .ncoltable2 > tbody > tr:nth-of-type(3) > td:nth-of-type(2) input#Ecom_Payment_Card_Number_BIN {
width: calc((100% – 176px) / 22 * 10); }

form[name=”OGONE_CC_FORM”] > .ncoltable2 > tbody > tr:nth-of-type(3) > td:nth-of-type(2) input#Ecom_Payment_Card_Number_1 {
padding-left: 12px;
width: calc((100% – 176px) / 22 * 8); }

form[name=”OGONE_CC_FORM”] > .ncoltable2 > tbody > tr:nth-of-type(3) > td:nth-of-type(2) input#Ecom_Payment_Card_Number_2 {
padding-left: 12px;
width: calc((100% – 176px) / 22 * 2); }

form[name=”OGONE_CC_FORM”] > .ncoltable2 > tbody > tr:nth-of-type(3) > td:nth-of-type(2) input#Ecom_Payment_Card_Number_IssuerNum {
padding-left: 12px;
width: calc((100% – 176px) / 22 * 2); }

/************
* Cofinoga *
************/
form[name=”OGONE_CC_FORM”] .ncoltable2 > tbody > tr > td input[type=”image”][src] {
height: 64px; }

/**********
* Klarna *
**********/
form[name=”OGONE_OI_FORM”] .ncoltable2 > tbody > tr:nth-of-type(3) > td,
form[name=”OGONE_I_FORM”] .ncoltable2 > tbody > tr:nth-of-type(3) > td {
text-align: left; }

form[name=”OGONE_OI_FORM”] .ncoltable2 > tbody > tr select[name=”Ecom_ShipTo_DOB_month”],
form[name=”OGONE_OI_FORM”] .ncoltable2 > tbody > tr select[name=”Ecom_ShipTo_DOB_year”],
form[name=”OGONE_I_FORM”] .ncoltable2 > tbody > tr select[name=”Ecom_ShipTo_DOB_month”],
form[name=”OGONE_I_FORM”] .ncoltable2 > tbody > tr select[name=”Ecom_ShipTo_DOB_year”] {
margin-left: 16px; }

form[name=”OGONE_OI_FORM”] .ncoltable2 > tbody > tr > td:nth-of-type(2) > input#Ecom_BillTo_Postal_Name_Last,
form[name=”OGONE_OI_FORM”] .ncoltable2 > tbody > tr > td:nth-of-type(2) > input#Ecom_BillTo_Postal_Name_First,
form[name=”OGONE_I_FORM”] .ncoltable2 > tbody > tr > td:nth-of-type(2) > input#Ecom_BillTo_Postal_Name_Last,
form[name=”OGONE_I_FORM”] .ncoltable2 > tbody > tr > td:nth-of-type(2) > input#Ecom_BillTo_Postal_Name_First {
width: calc(50% – 28px); }

form[name=”OGONE_OI_FORM”] .ncoltable2 > tbody > tr > td:nth-of-type(2) > input#owner_zip,
form[name=”OGONE_OI_FORM”] .ncoltable2 > tbody > tr > td:nth-of-type(2) > input#owner_city,
form[name=”OGONE_I_FORM”] .ncoltable2 > tbody > tr > td:nth-of-type(2) > input#owner_zip,
form[name=”OGONE_I_FORM”] .ncoltable2 > tbody > tr > td:nth-of-type(2) > input#owner_city {
width: calc(50% – 30px); }

form[name=”OGONE_OI_FORM”] .ncoltable2 > tbody > tr div.tc,
form[name=”OGONE_OI_FORM”] .ncoltable2 > tbody > tr div.tc a,
form[name=”OGONE_I_FORM”] .ncoltable2 > tbody > tr div.tc,
form[name=”OGONE_I_FORM”] .ncoltable2 > tbody > tr div.tc a {
line-height: 24px;
font-size: 1rem;
vertical-align: middle; }

form[name=”OGONE_OI_FORM”] .ncoltable2 > tbody > tr div.tc a,
form[name=”OGONE_I_FORM”] .ncoltable2 > tbody > tr div.tc a {
padding: 0; }

form[name=”OGONE_OI_FORM”] .ncoltable2 > tbody > tr input[type=”checkbox”],
form[name=”OGONE_I_FORM”] .ncoltable2 > tbody > tr input[type=”checkbox”] {
width: 24px;
height: 24px;
vertical-align: middle; }

/*******************
* Klarna – Page 2 *
*******************/
#payment-zone .ncoltable1:nth-of-type(2)[style=”padding-top:10px”] > tbody {
height: auto; }

#payment-zone .ncoltable1:nth-of-type(2)[style=”padding-top:10px”] > tbody > tr:first-of-type > td:first-of-type > .DDtxt > small {
display: block;
text-align: left;
padding: 16px; }

#payment-zone .ncoltable1:nth-of-type(2)[style=”padding-top:10px”] > tbody > tr:first-of-type > td:first-of-type > .DDtxt > small > b {
display: inline-block;
font-weight: bold;
line-height: 2rem; }

#payment-zone .ncoltable1:nth-of-type(2)[style=”padding-top:10px”] > tbody > tr:nth-of-type(2) > td > table {
width: 50%; }

#payment-zone .ncoltable1:nth-of-type(2)[style=”padding-top:10px”] > tbody > tr:nth-of-type(2) > td > table > tbody > tr:first-of-type > td:first-of-type[colspan=”2″] > b {
font-weight: bold; }

#payment-zone .ncoltable1:nth-of-type(2)[style=”padding-top:10px”] > tbody > tr:nth-of-type(2) > td > table > tbody > tr > td:first-of-type:not([colspan=”2″]) {
font-variant: small-caps;
font-size: small;
font-weight: 500; }

#payment-zone .ncoltable1:nth-of-type(2)[style=”padding-top:10px”] > tbody > tr:nth-of-type(2) > td > table > tbody > tr > td:first-of-type:not([colspan=”2″]) u {
text-decoration: none; }

#payment-zone .ncoltable1:nth-of-type(2)[style=”padding-top:10px”] > tbody > tr:nth-of-type(2) > td > table > tbody > tr > td:nth-of-type(2) {
padding-top: 0.5rem;
padding-bottom: 1.5rem; }

#payment-zone .ncoltable1:nth-of-type(2)[style=”padding-top:10px”] > tbody > tr:nth-of-type(2) > td > table > tbody > tr > td br {
display: none; }

/********************
* Klarna – Failure *
********************/
.ncoltable1:nth-of-type(2) > tbody h3 + small {
display: block;
padding-top: 2rem; }

#payment-zone > i {
margin-left: calc(50% – 352px); }

/**************
* Intersolve *
**************/
table.ncoltable1:nth-of-type(3) > tbody {
height: 8.75rem; }

form[name=”GiftCardList”] .ncoltable2,
form[name=”GiftCardList”] .ncoltable2 > tbody,
#payment-zone table.ncoltable1:nth-of-type(3) > tbody,
#payment-zone table.ncoltable1:nth-of-type(4) > tbody {
margin-top: 0; }

table.ncoltable1:nth-of-type(2)[cellpadding=”2″] > tbody > tr > td#ProcessedTxt > small,
table.ncoltable1:nth-of-type(2)[cellpadding=”2″] > tbody > tr > td#ProcessedAmount > small,
table.ncoltable1:nth-of-type(2)[cellpadding=”2″] > tbody > tr > td#RemainingTxt > small,
table.ncoltable1:nth-of-type(2)[cellpadding=”2″] > tbody > tr > td#RemainingAmount > small,
table.ncoltable1:nth-of-type(2)[cellpadding=”2″] > tbody > tr > td#LeftDetail > small,
table.ncoltable1:nth-of-type(2)[cellpadding=”2″] > tbody > tr > td#RightDetail > small,
table.ncoltable1:nth-of-type(2)[cellpadding=”2″] > tbody > tr > td:nth-of-type(3)[width=”30%”] > small,
table.ncoltable1:nth-of-type(3) > tbody > tr > td#PaidTxt > small,
table.ncoltable1:nth-of-type(3) > tbody > tr > td#PaidAmount > small,
table.ncoltable1:nth-of-type(3) > tbody > tr > td#ProcessedTxt > small,
table.ncoltable1:nth-of-type(3) > tbody > tr > td#ProcessedAmount > small {
display: inline-block; }

table.ncoltable1:nth-of-type(2)[cellpadding=”2″] > tbody > tr {
width: 100%; }

table.ncoltable1:nth-of-type(3) > tbody > tr > td#PaidTxt,
table.ncoltable1:nth-of-type(3) > tbody > tr > td#PaidAmount,
table.ncoltable1:nth-of-type(3) > tbody > tr > td#ProcessedTxt > small,
table.ncoltable1:nth-of-type(3) > tbody > tr > td#ProcessedAmount > small,
table.ncoltable1:nth-of-type(3) > tbody > tr > td#RemainingTxt > small,
table.ncoltable1:nth-of-type(3) > tbody > tr > td#RemainingAmount > small {
position: absolute;
left: 0;
width: 100%; }

table.ncoltable1:nth-of-type(2)[cellpadding=”2″] > tbody > tr > td#ProcessedTxt,
table.ncoltable1:nth-of-type(2)[cellpadding=”2″] > tbody > tr > td#ProcessedAmount,
table.ncoltable1:nth-of-type(2)[cellpadding=”2″] > tbody > tr > td#RemainingTxt,
table.ncoltable1:nth-of-type(2)[cellpadding=”2″] > tbody > tr > td#RemainingAmount,
table.ncoltable1:nth-of-type(2)[cellpadding=”2″] > tbody > tr > td#LeftDetail,
table.ncoltable1:nth-of-type(2)[cellpadding=”2″] > tbody > tr > td#RightDetail,
table.ncoltable1:nth-of-type(2)[cellpadding=”2″] > tbody > tr > td:nth-of-type(3)[width=”30%”] {
margin-bottom: 8px; }

table.ncoltable1:nth-of-type(2)[cellpadding=”2″] > tbody > tr > td#ProcessedTxt,
table.ncoltable1:nth-of-type(2)[cellpadding=”2″] > tbody > tr > td#LeftDetail,
table.ncoltable1:nth-of-type(3) > tbody > tr > td#PaidTxt,
table.ncoltable1:nth-of-type(3) > tbody > tr > td#ProcessedTxt > small {
font-variant: small-caps;
font-size: small;
font-weight: 500;
top: 0; }

table.ncoltable1:nth-of-type(3) > tbody > tr > td#PaidTxt,
table.ncoltable1:nth-of-type(3) > tbody > tr > td#ProcessedTxt > small {
top: 16px;
left: 16px; }

table.ncoltable1:nth-of-type(2)[cellpadding=”2″] > tbody > tr > td#ProcessedAmount,
table.ncoltable1:nth-of-type(2)[cellpadding=”2″] > tbody > tr > td#RightDetail,
table.ncoltable1:nth-of-type(3) > tbody > tr > td#PaidAmount,
table.ncoltable1:nth-of-type(3) > tbody > tr > td#ProcessedAmount > small {
top: 1.5rem;
font-family: monospace;
font-size: 1.25rem;
padding: 0.25rem 0.75rem;
font-weight: normal;
border: solid 1px #e4e4e4;
border-radius: 3px;
white-space: nowrap;
width: 150px; }

table.ncoltable1:nth-of-type(3) > tbody > tr > td#PaidAmount,
table.ncoltable1:nth-of-type(3) > tbody > tr > td#ProcessedAmount > small {
top: calc(1.5rem + 16px);
left: 16px; }

table.ncoltable1:nth-of-type(2)[cellpadding=”2″] > tbody > tr > td#RemainingTxt,
table.ncoltable1:nth-of-type(3) > tbody > tr > td#RemainingTxt > small {
font-variant: small-caps;
font-size: small;
font-weight: 500;
left: 16px;
top: 4.5rem; }

table.ncoltable1:nth-of-type(2)[cellpadding=”2″] > tbody > tr > td:nth-of-type(3)[width=”30%”] {
font-size: small;
top: 4.5rem; }

table.ncoltable1:nth-of-type(2)[cellpadding=”2″] > tbody > tr > td#RemainingAmount,
table.ncoltable1:nth-of-type(3) > tbody > tr > td#RemainingAmount > small {
left: 16px;
top: 6rem;
font-family: monospace;
font-size: 1.25rem;
padding: 0.25rem 0.75rem;
font-weight: normal;
border: solid 1px #e4e4e4;
border-radius: 3px;
white-space: nowrap;
width: 150px; }

#payment-zone table.ncoltable1:nth-of-type(4) > tbody > tr {
width: 100%; }

form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 {
margin-bottom: 64px; }

.ncoltable1:nth-of-type(3) ~ form[name=”OGONE_CC_FORM”] > table.ncoltable2 > tbody {
margin-top: -16px; }

/**********************
* Credit Card Tokens *
**********************/
form[name=”OGONE_CC_FORM”] .ncoltable1 > tbody > tr:first-of-type > td:first-of-type > small {
font-variant: small-caps;
font-size: small;
font-weight: 500; }

form[name=”OGONE_CC_FORM”] .ncoltable1 > tbody > tr:first-of-type {
padding-bottom: 1rem; }

form[name=”OGONE_CC_FORM”] .ncoltable1 > tbody > tr:nth-of-type(2) > td:first-of-type input[type=”checkbox”] {
width: 16px;
height: 16px;
vertical-align: middle; }

/**********************
* Scheduled Payments *
**********************/
table.ncoltable1:nth-of-type(2)[cellpadding=”2″]:not([style=”padding-top:10px”]) > tbody > tr:nth-of-type(2) > td:not([id]).ncoltxtc {
font-variant: small-caps;
font-size: small;
font-weight: 500;
margin-top: 16px;
margin-bottom: 8px; }

table.ncoltable1:nth-of-type(2)[cellpadding=”2″]:not([style=”padding-top:10px”]) > tbody > tr:not(:first-of-type) > td:not([id]).ncoltxtc:first-of-type {
display: inline-block;
width: 50%; }

table.ncoltable1:nth-of-type(2)[cellpadding=”2″]:not([style=”padding-top:10px”]) > tbody > tr:not(:first-of-type):not(:nth-of-type(2)) > td:not([id]).ncoltxtc:first-of-type {
overflow: hidden;
text-overflow: ellipsis; }

table.ncoltable1:nth-of-type(2)[cellpadding=”2″]:not([style=”padding-top:10px”]) > tbody > tr:not(:first-of-type) > td:not([id]).ncoltxtc:nth-of-type(2) {
display: inline-block;
width: 45%; }

/*************************
* Subscription Payments *
*************************/
table.ncoltable1:nth-of-type(2)[cellpadding=”2″]#ncol_SUB > tbody {
height: auto; }

table.ncoltable1:nth-of-type(2)[cellpadding=”2″]#ncol_SUB > tbody > tr:first-of-type {
margin-top: 16px;
margin-left: 16px; }

table.ncoltable1:nth-of-type(2)[cellpadding=”2″]#ncol_SUB > tbody > tr:not(:first-of-type) {
margin-top: 16px;
margin-left: 48px; }

table.ncoltable1:nth-of-type(2)[cellpadding=”2″]#ncol_SUB > tbody > tr:first-of-type > td:first-of-type {
font-variant: small-caps;
font-size: 14px;
font-weight: 500; }

table.ncoltable1:nth-of-type(2)[cellpadding=”2″]#ncol_SUB > tbody > tr:not(:first-of-type) > td:first-of-type {
font-variant: small-caps;
font-size: small;
font-weight: 500;
text-align: start; }

table.ncoltable1:nth-of-type(2)[cellpadding=”2″]#ncol_SUB > tbody > tr:not(:first-of-type) > td:nth-of-type(2) {
margin-top: 0.5rem; }

table.ncoltable1:nth-of-type(2)[cellpadding=”2″]#ncol_SUB > tbody > tr:not(:first-of-type) > td:nth-of-type(2) > small {
display: inline-block;
font-family: monospace;
font-size: 1.25rem;
padding: 0.25rem 0.75rem;
font-weight: normal;
border: solid 1px #e4e4e4;
border-radius: 3px;
white-space: nowrap;
width: 250px;
max-width: calc(100% – 80px); }

/*********************
* CONFIRMATION PAGE *
*********************/
/* Confirmation */
.ncoltable1:nth-of-type(2) {
width: 100%; }

.ncoltable1:nth-of-type(2) > tbody {
padding: 144px 0 48px 0; }

.ncoltable1:nth-of-type(2) > tbody > tr:first-of-type {
position: relative; }

/* Hide unwanted info */
.ncoltable1:nth-of-type(2)[cellpadding=”4″] > tbody small {
display: none; }

.ncoltable1:nth-of-type(2) > tbody h3 {
width: 100%;
color: #333;
font-family: font-regular, Roboto, Roboto, Arial, sans-serif; }

/**********
* FOOTER *
**********/
/* Footer */
.ncoltable3 {
width: 100%;
box-sizing: border-box;
margin-top: 32px; }

/* Only use the center of the page */
.ncoltable3 tbody {
margin-left: 25%;
width: 50%;
position: relative;
box-sizing: border-box; }

.ncoltable3 tbody tr {
display: block; }

/* Cancel row */
.ncoltable3 tbody tr:nth-of-type(2) {
position: absolute;
left: 0;
top: 0;
right: 0;
height: 38px; }

.ncoltable3 > tbody > tr:nth-of-type(2) > td,
.ncoltable3 > tbody > tr:nth-of-type(2) > td > center,
.ncoltable3 > tbody > tr:nth-of-type(2) > td > center > table,
.ncoltable3 > tbody > tr:nth-of-type(2) > td > center > table > tbody,
.ncoltable3 > tbody > tr:nth-of-type(2) > td > center > table > tbody > tr {
width: 100%;
height: 38px; }

.ncoltable3 tbody tr:nth-of-type(2) td center table tbody {
margin: 0; }

/* Button row */
.ncoltable3 > tbody > tr:nth-of-type(2) > td > center > table > tbody > tr {
display: flex;
justify-content: center; }

.ncoltable3 > tbody > tr:nth-of-type(2) > td > center > table > tbody > tr > td {
width: auto;
margin: 0 8px; }

/* Cancel button */
.ncoltable3 input#ncol_cancel {
box-sizing: border-box;
padding: 8px 16px 8px 36px;
border: solid 1px #e4e4e4;
border-radius: 4px;
cursor: pointer;
height: 36px;
text-align: right;
color: #000000;
font-family: font-regular, Roboto, Roboto, Arial, sans-serif;
background: #ffffff url(“ic_cancel.png”) no-repeat 6px 7px;
background-size: 20px; }

.ncoltable3 input#ncol_cancel:hover {
padding: 7px 17px 9px 35px;
background-position: 5px 6px;
-webkit-box-shadow: 0 0 5px 2px #cccccc;
-moz-box-shadow: 0 0 5px 2px #cccccc;
box-shadow: 0 0 5px 2px #cccccc; }

/* Back button */
.ncoltable3 input#btn_Back {
box-sizing: border-box;
padding: 8px 16px 8px 36px;
border: solid 1px #e4e4e4;
border-radius: 4px;
cursor: pointer;
height: 36px;
text-align: right;
color: #333;
font-family: font-regular, Roboto, Roboto, Arial, sans-serif;
background: #fff url(“ic_back.png”) no-repeat 6px 7px;
background-size: 20px; }

.ncoltable3 input#btn_Back:hover {
padding: 7px 17px 9px 35px;
background-position: 5px 6px;
-webkit-box-shadow: 0 0 5px 2px #cccccc;
-moz-box-shadow: 0 0 5px 2px #cccccc;
box-shadow: 0 0 5px 2px #cccccc; }

/* Back to merchant site button */
form[name=”BackToMerchForm”] input.ncol {
border: solid 1px #e4e4e4;
border-radius: 4px;
cursor: pointer;
height: 36px;
background-color: #fff;
min-width: 50%;
color: #333;
font-family: font-regular, Roboto, Roboto, Arial, sans-serif; }

form[name=”BackToMerchForm”] input.ncol:hover {
margin: -1px;
background-color: #eee;
-webkit-box-shadow: 0 0 5px 2px #cccccc;
-moz-box-shadow: 0 0 5px 2px #cccccc;
box-shadow: 0 0 5px 2px #cccccc; }

/* Links and logos row */
.ncoltable3 tbody tr:first-of-type {
position: absolute;
left: 0;
right: 0; }

.ncoltable3 > tbody > tr:first-of-type > td:first-of-type {
display: none; }

/* Norton/Symantec */
.ncoltable3 > tbody > tr:first-of-type > td:nth-of-type(3) > a {
position: absolute;
top: 56px;
left: 0;
width: 107px;
height: 64px; }

.ncoltable3 > tbody > tr:first-of-type > td:nth-of-type(3) > a > img {
width: 107px;
height: 64px; }

/* Ingenico */
.ncoltable3 > tbody > tr:first-of-type > td:nth-of-type(2) img {
position: absolute;
top: 56px;
right: 0;
height: 64px; }

.ncoltable3 > tbody > tr:first-of-type > td:nth-of-type(2) > a > img {
height: 64px; }

/* Links */
.ncoltable3 > tbody > tr:first-of-type > td:nth-of-type(2) > small {
position: absolute;
top: 136px;
left: 0;
right: 0;
padding-bottom: 16px;
color: #ffffff; }

.ncoltable3 > tbody > tr:first-of-type > td:nth-of-type(2) > small a,
.ncoltable3 > tbody > tr:first-of-type > td:nth-of-type(2) > small a:active,
.ncoltable3 > tbody > tr:first-of-type > td:nth-of-type(2) > small a:link,
.ncoltable3 > tbody > tr:first-of-type > td:nth-of-type(2) > small a:visited,
.ncoltable3 > tbody > tr:first-of-type > td:nth-of-type(2) > small a:hover,
.ncoltable2 > tbody > tr > td[colspan=”2″] a,
.ncoltable2 > tbody > tr > td[colspan=”2″] a:active,
.ncoltable2 > tbody > tr > td[colspan=”2″] a:link,
.ncoltable2 > tbody > tr > td[colspan=”2″] a:visited,
.ncoltable2 > tbody > tr > td[colspan=”2″] a:hover {
color: #e4e4e4;
font-family: font-light, Roboto, Roboto, Arial, sans-serif;
text-decoration: none;
font-size: small;
padding: 0px 8px;
line-height: 1rem; }

.ncoltable3 > tbody > tr:first-of-type > td:nth-of-type(2) > small a:hover,
.ncoltable2 > tbody > tr > td[colspan=”2″] a:hover {
color: #d4d4d4;
text-decoration: underline; }

/****************************
* RESPONSIVE MEDIA QUERIES *
****************************/
/* Tablet */
@media all and (max-width: 1024px) {
/* Header, payment method buttons */
#payment-zone > .ncoltable1:first-of-type tbody,
form[name=”OGONE_CC_FORM”] .ncoltable2 tbody,
form[name=”OGONE_CC_FORM”] .ncoltable1 tbody,
form[name=”OGONE_PM_CHOICE_FORM”] .ncoltable2 tbody,
table#iDealTbl > tbody,
form[name=”OGONE_DD_FORM”] .ncoltable2 > tbody,
form[name=”downloadformDirectEbanking”] .ncoltable2 > tbody,
form[name=”downloadformING”] .ncoltable2 > tbody,
form[name=”OGONE_BT_FORM”] .ncoltable2 > tbody,
form[name=”OGONE_BT_FORM”] .ncoltable1 > tbody,
form[name=”OGONE_OI_FORM”] .ncoltable2 > tbody,
form[name=”OGONE_I_FORM”] .ncoltable2 > tbody,
#payment-zone .ncoltable1:nth-of-type(2) > tbody,
#payment-zone table.ncoltable1:nth-of-type(2)[cellpadding=”2″] > tbody,
#payment-zone table.ncoltable1:nth-of-type(3) > tbody,
#payment-zone table.ncoltable1:nth-of-type(4) > tbody,
form[name=”GiftCardList”] .ncoltable2 > tbody,
form[name=”OGONE_CC_FORM”] div.paymentZone {
margin-left: calc(50% – 352px);
width: 702px; }

/* Customer logo */
div#logo-zone {
left: calc(50vw – 352px); } }
/* Small tablet => 2 column layout */
@media all and (max-width: 767px) {
/* Header */
#payment-zone > .ncoltable1:first-of-type tbody {
margin-left: 0;
width: 100%;
display: flex;
flex-direction: column; }

/* Customer logo */
div#logo-zone {
left: 33px; }

/* Payment method buttons */
form[name=”OGONE_CC_FORM”] .ncoltable2 tbody,
form[name=”OGONE_CC_FORM”] .ncoltable1 tbody,
form[name=”OGONE_PM_CHOICE_FORM”] .ncoltable2 tbody,
table#iDealTbl > tbody,
form[name=”OGONE_DD_FORM”] .ncoltable2 > tbody,
form[name=”downloadformDirectEbanking”] .ncoltable2 > tbody,
form[name=”downloadformING”] .ncoltable2 > tbody,
form[name=”OGONE_BT_FORM”] .ncoltable2 > tbody,
form[name=”OGONE_BT_FORM”] .ncoltable1 > tbody,
form[name=”OGONE_OI_FORM”] .ncoltable2 > tbody,
form[name=”OGONE_I_FORM”] .ncoltable2 > tbody,
#payment-zone table.ncoltable1:nth-of-type(2)[cellpadding=”2″] > tbody,
#payment-zone table.ncoltable1:nth-of-type(3) > tbody,
#payment-zone table.ncoltable1:nth-of-type(4) > tbody,
form[name=”GiftCardList”] .ncoltable2 > tbody,
form[name=”OGONE_CC_FORM”] div.paymentZone {
margin-left: 32px;
width: calc(100% – 64px); }

form[name=”OGONE_CC_FORM”] .ncoltable2 tr,
form[name=”OGONE_PM_CHOICE_FORM”] .ncoltable2 tr,
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:not(:first-of-type) {
width: calc(50% – 20px); }

/*********************
* +—–+—–+ *
* | + X + *
* +—–+—–+ *
* | X + + *
* +—–+—–+ *
*********************/
/* When the Terms and Conditions are in the second column of a 2-column layout */
form[name=”OGONE_PM_CHOICE_FORM”] tr:nth-of-type(2n + 1) > td[colspan=”2″] a:not(.PrivacyPolicyLink),
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:nth-of-type(2n + 1) > td[colspan=”2″] a:not(.PrivacyPolicyLink) {
left: calc(-100% – 6px);
top: calc(100% + 1rem – 6px); }

form[name=”OGONE_PM_CHOICE_FORM”] tr:nth-of-type(2n + 1):hover > td[colspan=”2″] a:not(.PrivacyPolicyLink),
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:nth-of-type(2n + 1):hover > td[colspan=”2″] a:not(.PrivacyPolicyLink) {
left: calc(-100% – 3px);
top: calc(100% + 1rem – 7px); }

/* When the Privacy Policy is in the first column of a 2-column layout */
form[name=”OGONE_PM_CHOICE_FORM”] tr:nth-of-type(2n) > td[colspan=”2″] a.PrivacyPolicyLink,
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:nth-of-type(2n) > td[colspan=”2″] a.PrivacyPolicyLink {
left: 4px;
top: calc(2.5rem – 14px); }

form[name=”OGONE_PM_CHOICE_FORM”] tr:nth-of-type(2n):hover > td[colspan=”2″] a.PrivacyPolicyLink,
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:nth-of-type(2n):hover > td[colspan=”2″] a.PrivacyPolicyLink {
left: 5px;
top: calc(2.5rem – 13px); }

/*********************
* +—–+—–+ *
* | X + X + *
* +—–+—–+ *
*********************/
/* When the Terms and Conditions are in the first column of a 2-column layout */
form[name=”OGONE_PM_CHOICE_FORM”] tr:nth-of-type(2n) > td[colspan=”2″] a:not(.PrivacyPolicyLink),
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:nth-of-type(2n) > td[colspan=”2″] a:not(.PrivacyPolicyLink) {
left: 4px;
top: calc(1rem – 12px); }

form[name=”OGONE_PM_CHOICE_FORM”] tr:nth-of-type(2n):hover > td[colspan=”2″] a:not(.PrivacyPolicyLink),
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:nth-of-type(2n):hover > td[colspan=”2″] a:not(.PrivacyPolicyLink) {
left: 5px;
top: calc(1rem – 11px); }

/* When the Privacy Policy is in the second column of a 2-column layout */
form[name=”OGONE_PM_CHOICE_FORM”] tr:nth-of-type(2n + 1) > td[colspan=”2″] a.PrivacyPolicyLink,
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:nth-of-type(2n + 1) > td[colspan=”2″] a.PrivacyPolicyLink {
left: calc(-100% – 6px);
top: calc(2.5rem + 38px); }

form[name=”OGONE_PM_CHOICE_FORM”] tr:nth-of-type(2n + 1):hover > td[colspan=”2″] a.PrivacyPolicyLink,
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:nth-of-type(2n + 1):hover > td[colspan=”2″] a.PrivacyPolicyLink {
left: calc(-100% – 3px);
top: calc(2.5rem + 39px); }

/* ATU */
form[name=”OGONE_CC_FORM”] > .ncoltable2 > tbody > tr:nth-of-type(3) > td:nth-of-type(2) input#Ecom_Payment_Card_Number_BIN {
width: calc(100% – 86px); }

form[name=”OGONE_CC_FORM”] > .ncoltable2 > tbody > tr:nth-of-type(3) > td:nth-of-type(2) input#Ecom_Payment_Card_Number_1 {
padding-left: 12px;
width: calc((100% – 86px) / 12 * 8); }

form[name=”OGONE_CC_FORM”] > .ncoltable2 > tbody > tr:nth-of-type(3) > td:nth-of-type(2) input#Ecom_Payment_Card_Number_2 {
padding-left: 12px;
width: calc((100% – 86px) / 12 * 2); }

form[name=”OGONE_CC_FORM”] > .ncoltable2 > tbody > tr:nth-of-type(3) > td:nth-of-type(2) input#Ecom_Payment_Card_Number_IssuerNum {
padding-left: 12px;
width: calc((100% – 86px) / 12 * 2); }

/* Klarna Failure */
#payment-zone > i {
margin-left: 32px; }

/* Footer */
.ncoltable3 tbody {
margin-left: 17%;
width: 66%; } }
/* Large smartphone => 1 column layout */
@media all and (max-width: 551px) {
/* Payment method buttons */
form[name=”OGONE_CC_FORM”] .ncoltable2 tr,
form[name=”OGONE_CC_FORM”] .ncoltable1 tr,
form[name=”OGONE_PM_CHOICE_FORM”] .ncoltable2 tr,
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:not(:first-of-type) {
width: calc(100% – 18px); }

/* When the Terms and Conditions are in a 1-column layout */
form[name=”OGONE_PM_CHOICE_FORM”] tr:nth-of-type(n) > td[colspan=”2″] a:not(.PrivacyPolicyLink),
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:nth-of-type(n) > td[colspan=”2″] a:not(.PrivacyPolicyLink) {
left: 4px;
top: calc(1rem – 12px); }

form[name=”OGONE_PM_CHOICE_FORM”] tr:nth-of-type(n):hover > td[colspan=”2″] a:not(.PrivacyPolicyLink),
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:nth-of-type(n):hover > td[colspan=”2″] a:not(.PrivacyPolicyLink) {
left: 5px;
top: calc(1rem – 11px); }

/* When the Privacy Policy is in a 1-column layout */
form[name=”OGONE_PM_CHOICE_FORM”] tr:nth-of-type(n) > td[colspan=”2″] a.PrivacyPolicyLink,
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:nth-of-type(n) > td[colspan=”2″] a.PrivacyPolicyLink {
left: 4px;
top: calc(-100% + 2.5rem + 34px); }

form[name=”OGONE_PM_CHOICE_FORM”] tr:nth-of-type(n):hover > td[colspan=”2″] a.PrivacyPolicyLink,
form[name=”GiftCardList”] input[name=”CompletionLastPM”] ~ .ncoltable2 tr:nth-of-type(n):hover > td[colspan=”2″] a.PrivacyPolicyLink {
left: 5px;
top: calc(-100% + 2.5rem + 37px); }

/* Expiry date input block */
form[name=”OGONE_CC_FORM”] .ncoltable2 > tbody > tr:nth-of-type(4) {
width: calc(100% – 96px); }

/* Card verification code input block */
form[name=”OGONE_CC_FORM”] .ncoltable2 > tbody > tr:nth-of-type(5) {
width: calc(100% – 96px); }

form[name=”OGONE_CC_FORM”] .ncoltable2 > tbody > tr:nth-of-type(5) input {
width: calc(100% – 58px); }

/* Klarna */
form[name=”OGONE_OI_FORM”] .ncoltable2 > tbody > tr:nth-of-type(4) select,
form[name=”OGONE_OI_FORM”] .ncoltable2 > tbody > tr:nth-of-type(5) select,
form[name=”OGONE_I_FORM”] .ncoltable2 > tbody > tr:nth-of-type(4) select,
form[name=”OGONE_I_FORM”] .ncoltable2 > tbody > tr:nth-of-type(5) select {
width: calc(100%);
margin-left: 0; }

#payment-zone .ncoltable1:nth-of-type(2)[style=”padding-top:10px”] > tbody > tr:nth-of-type(2) > td > table {
width: auto; }

/* Klarna Failure */
#payment-zone > i {
margin-top: -1.5rem;
display: block; }

/* Scheduled Payments */
table.ncoltable1:nth-of-type(2)[cellpadding=”2″]:not([style=”padding-top:10px”]) > tbody > tr:not(:first-of-type) > td:not([id]).ncoltxtc:nth-of-type(2) {
text-align: right; }

/* Footer */
.ncoltable3 tbody {
margin-left: 48px;
width: calc(100% – 96px); }

/* Ingenico */
.ncoltable3 > tbody > tr:first-of-type > td:nth-of-type(2) img {
position: absolute;
top: 230px;
left: 50%;
right: auto;
margin-left: -66px;
max-height: 64px;
height: auto;
max-width: 132px;
width: auto; }

/* Links */
.ncoltable3 > tbody > tr:first-of-type > td:nth-of-type(2) {
width: 100%; }

.ncoltable3 > tbody > tr:first-of-type > td:nth-of-type(2) > small {
position: absolute;
top: 150px;
left: auto;
right: 0;
width: 100%;
text-align: center; }

.ncoltable3 > tbody > tr:first-of-type > td:nth-of-type(2) > small a {
display: block;
margin-top: -8px; }

.ncoltable3 > tbody > tr:first-of-type > td:nth-of-type(3) > a {
left: 50%;
margin-left: -54px; } }
/* Smartphone */
@media all and (max-width: 319px) {
/* Header */
#payment-zone > .ncoltable1:first-of-type tbody {
margin-left: 0;
width: 255px; }

/* Confirmed */
#payment-zone > .ncoltable1:nth-of-type(2) tbody {
margin-left: 0;
width: 319px; }

/* Footer */
.ncoltable3 tbody {
margin-left: 48px;
width: 207px; } }
.PrivacyPolicyLink {
display: block;
white-space: normal;
color: #e4e4e4 !important;
font-family: font-regular, Roboto, Roboto, Arial, sans-serif; }

/***********************************
* *
* LAST CHANGES ARE FOR: ISD-18 *
* DONE ON: 16/11/2020 *
* BY: Francisco *
* *
***********************************/