/**
 * Checkout.com
 * Authorized and regulated as an electronic money institution
 * by the UK Financial Conduct Authority (FCA) under number 900816.
 *
 * PHP version 7
 *
 * @category  Magento2
 * @package   Checkout.com
 * @author    Platforms Development Team <platforms@checkout.com>
 * @copyright 2010-present Checkout.com
 * @license   https://opensource.org/licenses/mit-license.html MIT License
 * @link      https://docs.checkout.com/
 */

/* Moto */
#payment_form_checkoutcom_moto {
    width: auto;
}

#cko-form-holder {
    margin-bottom: 20px;
}

/**
 * Vault payment
 */
#vault-container {
    margin-bottom: 20px;
}

#vault-container div:last-child {
    border-bottom: none !important;
}

#vault-container .card-on,
#vault-container .card-selected {
    background-color:  #f1f1f1;
}

.cko-vault-card {
    border-bottom: 1px solid #ccc;
    padding: 15px;
    cursor: pointer;
}

.cko-vault-card input[type=radio] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

.cko-vault-card input[type=radio] + img {
    cursor: pointer !important;
}

.cko-vault-card label img {
    width: 45px;
    height: 30px;
    margin-right: 10px;
}

.cko-vault-card .vault-details {
    float: left !important;
}

.cko-vault-card .vault-cvv {
    float: right !important;
}

.cko-vault-card .vault-cvv input {
    width: 55px !important;
}

.clr {
    clear: both;
    visibility: hidden;
    height: 0px;
    width: 0px;
}


/**
 * Frames v2
 */
*,*::after,*::before{box-sizing:border-box}
html{padding:1rem;background-color:#FFF;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif}
#payment-form{width:31.5rem;margin:0 auto}
iframe{width:100%}
.one-liner{display:flex;flex-direction:column}
.card-frame{border:solid 1px #13395E;border-radius:3px;width:100%;margin-bottom:8px;height:40px;box-shadow:0 1px 3px 0 rgba(19,57,94,0.2)}
.card-frame.frame--rendered{opacity:1}
.card-frame.frame--rendered.frame--focus{border:solid 1px #13395E;box-shadow:0 2px 5px 0 rgba(19,57,94,0.15)}
.card-frame.frame--rendered.frame--invalid{border:solid 1px #D96830;box-shadow:0 2px 5px 0 rgba(217,104,48,0.15)}
.success-payment-message{color:#13395E;line-height:1.4}
.token{color:#b35e14;font-size:0.9rem;font-family:monospace}
@media screen and (min-width: 31rem){
    .one-liner{flex-direction:row}
    .card-frame{width:500px;margin-bottom:0}}