/* The default CSS. Merchants can override values. */

/*
 * Credit card expiration field input. Most of them should already be defined by the merchant so they get overwritten
 * during page load.
 */
.expiryDateField {
    border: none;
    margin: 0 12px 0 0;
}

.expiryDateField .detailsHidden {
    width: 20px;
    float: left;
    border: 1px solid #e3e3e3;
}

.expiryDateField .gwt-ListBox {
    float: left;
    border: 1px solid #e3e3e3;
}

.expiryDateField .gwt-Label {
    float: left;
    width: 10px;
    padding: 0 5px;
}

.posTerminalId {
    /* The !important flag is required to override styles that are applied later, e.g. gwt-label. */
    text-align: left !important;
    font-family: monospace !important;
    font-style: italic !important;
    font-size: x-small !important;
    font-weight: normal !important;
}

/* Bancontact QR image styles. */
.form.qrImagePanel {
    /* Show full height of the QR image. */
    height: auto;
}
/* Bancontact pay with card intro. */
.introPayWithCard {
    padding: 15px 0;
    float:left;
    clear: both;
    width: 100%;
    font-weight: normal;
}

/* Bancontact QR-code. */
@media screen and (max-width: 780px) {
    .form.qrImagePanel {
        /* Hide QR code on small screens (mobile devices). */
        display: none;
    }
    .bancontact.divider.first {
        /* Hide QR code on small screens (mobile devices). */
        display: none;
    }
    .ideal.divider {
        display: none;
    }
}

/* Bancontact intent url. */
@media screen and (max-width: 780px) and (min-width: 500px) {
    .urlIntentButtonPanel .gwt-Label {
        width:400px;
    }
    .urlIntentButtonPanel .urlIntentBtn {
        float:left;
    }
}

/* Hide the text decoration on the Bancontact Intent Button*/
.urlIntentButtonPanel>.urlIntentBtn {
    text-decoration: none;
}

/* Bancontact divider between payment with mobile and card. */
.bancontact.divider {
    width: 100%;
    text-align: center;
    border-bottom: 2px solid rgb(0, 158, 226);
    line-height: 0.1em;
    margin: 30px 0 20px;
    float:left;
}

/* IDeal divider between payment with qr and bank selection. */
.ideal.divider {
    width: 100%;
    text-align: center;
    border-bottom: 2px solid rgb(0, 158, 226);
    line-height: 0.1em;
    margin: 30px 0 20px;
    float:left;
}

.disabled {
    display: none;
}

.divider span {
    background: #fff;
    padding: 0 10px;
    border-radius: 20px;
}

.gwt-PopupPanelGlass {
    background-color: black;
    opacity: 0.4;
}

/* Payment header logo div element*/
.paymentChoiceHeader>.logo {
    height: 40px;
    width: 60px;
    vertical-align:middle;
    padding-right: 5px;
}

/* Actual Payment header */
.paymentChoiceHeader>.logo>.gwt-Image {
    max-height: 40px;
    max-width: 60px;
}

/* Bancontact Card / Pay logos contain a badge and wordmark, so they need a larger box to stay legible. */
.paymentChoiceHeader.bancontactHeader>.logo {
    height: 52px;
    width: 64px;
}

/*
 * GWT renders ImageResources as a clipped background with a fixed inline size, so max-width/max-height would squeeze
 * or crop it. Force an exact size with the logo's aspect ratio (128x111) and scale the background to fit.
 */
.paymentChoiceHeader.bancontactHeader>.logo>.gwt-Image {
    width: 46px !important;
    height: 40px !important;
    max-width: none;
    max-height: none;
    background-size: 100% 100% !important;
    background-position: 0 0 !important;
    display: block;
    margin: 0 auto;
}


/* 3D Secure logo*/
.secure_logo {
    max-height: 35px;
    max-width: 150px;
}

/*The logo that is shown with a payment method when clicked open (default is same as 3d secure)*/
.payment_single_click_logo {
    max-height: 35px;
    max-width: 150px;
}

.paypal_logo {
    max-height: 35px;
    max-width: 150px;
}

.paypalBtn {
    height: auto;
    margin: 0 auto;
    width: 265px; /* Size of forwardBtn without padding 225px + 2 x 20 px */
}

.paymentInfo .intro {
    width: 520px;
    font-size: 14px;
    margin: 15px;
}

.paymentInfo .paymentChoiceHeader {
    /* Disable hand cursor (non clickable)*/
    cursor:default;
}

.paymentInfo .backBtn {
    float: left;
    word-wrap: break-word;
    width: 100px; // only for IE8
    max-width: 100%;
}

.paymentInfo .forwardBtn {
    float: right;
    word-wrap: break-word;
    width: 100px; // only for IE8
    max-width: 100%;
}

.sessionTimeout {
    /*No additional styling */
}

.sessionTimeout .header {
    /* Disable hand cursor (non clickable)*/
    cursor:default;
    font-size: 18px;
}

.sessionTimeout .buttonsBlock {
    /* All the buttons will be aligned on the center of the dialog*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.sessionTimeout .backBtn {
    float: none;
    max-width: 100%;
}

.sessionTimeout .forwardBtn {
    float: none;
    max-width: 100%;
}

.sessionTimeout .timeoutText {
    max-width: 100%;
    font-size: 14px;
    margin: 15px;
}

.pointOfSale {
    width: 600px;
    margin: 0 15px 0 0;
    float: left;
}

.pointOfSale .title {
    text-align: center;
    font-size: 18px;
    margin: 0 0 40px 0;
}

.pointOfSale .spinner {
    display: block;
    margin: 0 auto;
    margin-bottom: 40px;
}

.pointOfSale .terminalImage {
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
}

.pointOfSale .printWarning {
    color: #FF4343;
    font-size: 18px;
    margin: 0 0 40px 20px;
}

.pointOfSale .shopperReceipt {
    font-family: monospace;
    white-space: pre;
    display: inline-block;
    border: 1px solid #e3e3e3;
    padding: 10px;
    background-color: #f9f9f9;
    margin-right: 20px;
    margin-left: 20px;
}

.pointOfSale .emailText {
    font-size: 18px;
    padding: 10px 0;
}

.pointOfSale .submit {
    display: flex;
}

.pointOfSale .backBtn {
    margin: 0 0 0 0;
    background-image: url('https://static.cmpayments.com/ps/images/opc/white-arrow-left.png');
    background-color: #224865;
    background-position: 4px center;
    background-repeat: no-repeat;
    font-size: 12px;
    color: #fff;
    display: inline-block;
    height: 30px;
    padding: 4px 30px;
}

.threeDsv2AuthenticationContainer {
    background: white;
    border-style: none;
    border-width: 0;
}

.hidden_gwt_frame {
    border-width: 0;
    height: 0;
    width: 0;
}