/* vim: set ts=2 sw=2 sts=2 et: */
/*
 * +-----------------------------------------------------------------------+
 * | BCSE Authorize.Net DPM Payment Processor                              |
 * +-----------------------------------------------------------------------+
 * | Copyright (c) 2016 BCSE LLC. dba BCS Engineering                      |
 * +-----------------------------------------------------------------------+
 * |                                                                       |
 * | BCSE Authorize.Net DPM Payment Processor is subject for version 2.0   |
 * | of the BCSE proprietary license. That license file can be found       |
 * | bundled with this package in the file BCSE_LICENSE. A copy of this    |
 * | license can also be found at                                          |
 * | http://www.bcsengineering.com/license/BCSE_LICENSE_2.0.txt            |
 * |                                                                       |
 * +-----------------------------------------------------------------------+
 */
.bcse-dpm-payment, .bcse-dpm-payment *, .bcse-dpm-payment *:before, .bcse-dpm-payment *:after { box-sizing: border-box; }

.bcse-cards-list > ul { list-style: none; display: block !important; margin: 0 -0.5rem !important; padding: 0 !important; }
.bcse-cards-list > ul:after { content: ' '; display: block; width: 0; height: 0; overflow: hidden; clear: both; }
.bcse-cards-list > ul > li { list-style: none; display: block !important; margin: 0 0 1rem 0 !important; padding: 0 0.5rem !important; position: relative; float: left; width: 50%; text-align: center; }
.bcse-cards-list > ul > li:nth-of-type(2n + 3) { clear: left; }
.narrow .bcse-cards-list > ul > li { float: none; width: 100%; }
.bcse-cards-list input[type="radio"] { display: none; }
.bcse-cards-list input[type="text"] { display: block; height: 2rem !important; width: 100%; }
.bcse-cards-list .bcse-saved-card { border: 1px solid #ddd; background: #f2f2f2; border-radius: 5px; display: block; cursor: pointer; overflow: hidden; position: relative; transition: box-shadow 250ms ease, border-color 250ms ease; }
.bcse-cards-list .bcse-saved-card:after { background: transparent; content: ' '; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; transition: box-shadow 250ms ease; }
.bcse-cards-list .bcse-saved-card h6 { margin: 0; padding: 0 1rem; font-size: 1.15rem; line-height: 1.75; position: relative; border-bottom: 1px solid #ddd; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1); background: #555; color: white; transition: background 250ms ease; position: relative; text-align: left; font-weight: bold; }
.bcse-cards-list .bcse-card-address { padding: 0.5rem; }
.bcse-cards-list .bcse-card-address > div { font-size: 0.9rem !important; line-height: 1.5; }
.bcse-cards-list .bcse-card-cvv-input { margin: 1rem 1rem 0 1rem; padding-bottom: 1rem; text-align: center; position: relative; }
.bcse-cards-list .bcse-card-delete { text-align: center; margin-top: 0.25rem; }
.bcse-cards-list .bcse-card-delete a { display: inline-block; padding: 1px 5px; font-size: 10px; background: #ED4337; color: white; text-decoration: none; border-radius: 4px; border: 1px solid #eaeaea; }

.bcse-cards-list input:checked + .bcse-saved-card { box-shadow: 0 0 8px rgba(0,0,0,0.25); border-color: #ccc; }
.bcse-cards-list input:checked + .bcse-saved-card:after { box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) inset; }
.bcse-cards-list input:checked + .bcse-saved-card h6 { background: #74AD1B; }

.bcse-cards-list .bcse-saved-card h6:after { display: none; content: ' '; position: absolute; top: 50%; right: 5px; margin-top: -11px; width: 33px; height: 21px; background-color: transparent; background-image: url('img/credit-cards.png'); }
.bcse-cards-list .bcse-saved-card.visa h6:after { display: block; background-position: -99px -21px; }
.bcse-cards-list input:checked + .bcse-saved-card.visa h6:after { display: block; background-position: -99px 0px; }
.bcse-cards-list .bcse-saved-card.discover h6:after { display: block; background-position: -33px -21px; }
.bcse-cards-list input:checked + .bcse-saved-card.discover h6:after { display: block; background-position: -33px 0px; }
.bcse-cards-list .bcse-saved-card.mastercard h6:after { display: block; background-position: -66px -21px; }
.bcse-cards-list input:checked + .bcse-saved-card.mastercard h6:after { display: block; background-position: -66px 0px; }
.bcse-cards-list .bcse-saved-card.american-express h6:after { display: block; background-position: 0px -21px; }
.bcse-cards-list input:checked + .bcse-saved-card.american-express h6:after { display: block; background-position: 0px 0px; }

.bcse-amex{ background-position: 0 -21px; }
.bcse-amex.cc-selected{ background-position: 0 0px; }
.bcse-dis{ background-position: -33px -21px;}
.bcse-dis.cc-selected{ background-position: -33px 0px;}
.bcse-ms{ background-position: -66px -21px;}
.bcse-ms.cc-selected{ background-position: -66px 0px;}
.bcse-visa{ background-position: -99px -21px; }
.bcse-visa.cc-selected{ background-position: -99px 0px; }

.bcse-new-card-link { text-align: center; margin-bottom: 1rem; }
.bcse-new-card-link a { display: block; background: #555; color: white !important; text-decoration: none !important; padding: 2px; border: 1px solid #CCC; border-radius: 50px; outline: none; }

.bcse-dpm-form > ul { list-style: none; display: block !important; margin: 0 !important; padding: 0 !important; }
.bcse-dpm-form > ul > li { list-style: none; display: block !important; margin: 0 !important; padding: 0 !important; position: relative; }
.bcse-dpm-form > ul > li:after { content: ' '; display: block; width: 0; height: 0; overflow: hidden; clear: both; }
.bcse-dpm-form input[type="text"] { padding: 0.5rem !important; margin: 0 0 1rem 0 !important; height: 2.5rem !important; display: block !important; width: 100% !important; border-radius: 0; min-width: 0 !important; max-width: 100% !important; }
.bcse-dpm-form select,
div.checkout-container #center .bcse-dpm-form select { padding: 0.5rem !important; margin: 0 0 1rem 0 !important; height: 2.5rem !important; display: block !important; border-radius: 0; min-width: 0 !important; max-width: 100% !important; }

.bcse-dpm-form select[name="card_expire_Month"],
div.checkout-container #center .bcse-dpm-form select[name="card_expire_Month"] { float: left; width: calc(50% - 0.5rem) !important; }

.bcse-dpm-form select[name="card_expire_Year"],
div.checkout-container #center .bcse-dpm-form select[name="card_expire_Year"] { float: right; width: calc(50% - 0.5rem) !important; }

.bcse-dpm-form #bcse-dpm-cc-type { display: none; position: absolute; top: calc(50% - 0.5rem); right: 5px; transform: translateY(-50%); width: 33px; height: 21px; background-color: transparent; background-image: url('img/credit-cards.png'); }
.bcse-dpm-form #bcse-dpm-cc-type.amex { display: block; background-position: 0 0px; }
.bcse-dpm-form #bcse-dpm-cc-type.discover { display: block; background-position: -33px 0px;}
.bcse-dpm-form #bcse-dpm-cc-type.mastercard { display: block; background-position: -66px 0px;}
.bcse-dpm-form #bcse-dpm-cc-type.visa { display: block; background-position: -99px 0px; }

.bcse-dpm-payment a.popup-link { display: block; position: absolute; top: calc(50% - 0.5rem); right: 5px; transform: translateY(-50%); width: 18px; height: 18px; background: #333; border-radius: 100%; text-align: center; text-decoration: none; z-index: 10; }
.bcse-dpm-payment a.popup-link:after { content: '?'; display: block; text-align: center; color: white; line-height: 18px; font-weight: bold; }
.bcse-dpm-payment a.popup-link img { display: none; }

.bcse-dpm-form .fancy-checkbox { display: block; cursor: pointer; margin-bottom: 1rem; }
.bcse-dpm-form .fancy-checkbox input { display: none; }
.bcse-dpm-form .fancy-checkbox > span { display: inline-block; vertical-align: middle; }
.bcse-dpm-form .fancy-checkbox .checkbox:after { content: '\2610'; display: inline-block; font-size: 1.5em; }
.bcse-dpm-form .fancy-checkbox input:checked + .checkbox:after { content: '\2612'; }

.bcse-dpm-payment .note { text-align: center; font-size: 11px !important; padding: 5px 0; font-style: italic; }

.bcse-loading-cards { height: 50px; background: url('img/loader.gif') center 10px no-repeat transparent; position: relative; }
.bcse-loading-cards:after { content: attr(data-loading-text); display: block; position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; font-style: italic; }

.ui-dialog .help-cvv2-box { width: 450px; }