<style>
    .card_container {
        border-radius: 5px;
        background-color: #FFFFFF;
        /*padding: 20px;*/
        padding-bottom: 35px;
        /*max-width: 760px;*/
        width: 100%;
        margin: -20px auto 0 auto;
    }
    #card_form input[type=text], select, textarea {
        width: 100%;
        padding: 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        margin-top: 6px;
        margin-bottom: 16px;
        resize: vertical;
        height:40px;
        background:white;
        font-size:14px;
        color:#3a3a3a;
        font-family:monospace, sans-serif;
    }
    #card_container_error { display: none}

    @media screen and (max-width: 420px) {
        .card_holder_name {
            display: none;
        }

        .card_holder_name_xs {
            display: block;
        }
    }
    @media screen and (min-width: 421px) {
        .card_holder_name {
            display: block;
        }

        .card_holder_name_xs {
            display: none;
        }
    }
</style>
<form id="card_form">
<div class="card_container clear">
    <div id="card_container_error" class="alert alert-danger alert-dismissible"></div>


        <label for="card_number">{txt key=TEXT_XT_PAYPAL_CHECKOUT_CARD_NUMBER}</label>
        <div id="card_number" class=""></div>

        <div style="display: flex; flex-direction: row;">
            <div style="min-width:120px; max-width:120px">
                <label for="card_expiration_date">{txt key=TEXT_XT_PAYPAL_CHECKOUT_EXPIRATION_DATE}</label>
                <div id="card_expiration_date" class="number"></div>
            </div>
            <div style="margin-left: 10px; min-width:85px; max-width:85px ">
                <label for="card_cvv">{txt key=TEXT_XT_PAYPAL_CHECKOUT_CVV}</label>
                <div id="card_cvv" class="number"></div>
            </div>
            <div class="card_holder_name" style="margin-left: 10px; width:100%">
                <label for="card_holder_name">{txt key=TEXT_XT_PAYPAL_CHECKOUT_CARD_HOLDER}</label>
                <div type="text" id="card_holder_name" class="" ></div>
            </div>
        </div>

</div>

<div class="clear">
    <br/>
</div>

<a href="{link page='checkout' paction='payment' conn=SSL}" class="btn btn-default pull-left">
    <span class="glyphicon glyphicon-chevron-left"></span>
    {txt key=BUTTON_BACK}
</a>


<button value="submit" id="submit" class="btn paypal-card-button btn-success preloader pull-right">
    <span class="glyphicon glyphicon-flag"></span>
    {txt key="BUTTON_CONFIRM_ORDER"}
</button>

    </form>





<div id="paypal_button_container_{$requested_position}_wrapper">
    <div id="paypal_button_container_{$requested_position}" style="text-align: center; {if $smarty.session.selected_payment == 'xt_paypal_checkout_card'}width:100%;{/if} " class="paypal_button_container pull-right paypal-button-container-confirmation"></div>
    {if $smarty.session.PAYPAL_WALLET_VAULTING_ADVANCED_available}
    <div class="pull-right">
        <input type="checkbox" id="ppcp_agree_save_payment_method" name="ppcp_agree_save_payment_method">
        <label for="ppcp_agree_save_payment_method">{txt key="TEXT_PPCP_AGREE_SAVE_PAYMENT_METHOD"}&nbsp;&nbsp;</label><i class="fa fa-question-circle" aria-hidden="true" onclick="ppcSavePaymentMethodInfoModal()"></i>
    </div>
    {/if}
</div>

{include file="../paypal-checkout-save-payment-method-info.tpl.html"}

<div class="clear">
</div>


