.label-input-combo {
    padding-top: 8px;
    margin-bottom: 1px; /* Fire Checkout */
}
.label-input-combo:first-child {
    padding-top: 0
}

.card-icon, #cardnumber.card-icon, #cvv.card-icon {
    background: white url('card-icons.png') right -382px no-repeat;
    background-size: 45px;
}
.card-icon.visa, #cardnumber.card-icon.visa {
    background-position: right -177px;
}
.card-icon.mastercard, #cardnumber.card-icon.master-card {
    background-position: right -124px;
}
.card-icon.american-express, #cardnumber.card-icon.american-express {
    background-position: right -70px;
}
.card-icon.diners-club, #cardnumber.card-icon.diners-club {
    background-position: right -252px;
}
.card-icon.discover, #cardnumber.card-icon.discover {
    background-position: right -441px;
}
.card-icon.jcb, #cardnumber.card-icon.jcb {
    background-position: right -95px;
}
.card-icon.unionpay, #cardnumber.card-icon.unionpay {
  /*background-position: right -479px;*/
}
.card-icon.maestro, #cardnumber.card-icon.maestro {
    background-position: right -150px;
}
.card-icon.paypal {
    background-position: right -204px;
}

#cvv.card-icon.cvv {
    background-position: right -330px;
}

.pref-payment-method .card-icon {
    /*border: 1px solid #cacaca;
    border-radius: 4px; */
    display: inline-block;
    height: 25px;
    width: 48px;
}

.payment-method-type {
    color: #283036;
    font-size: 13px;
    font-weight: 800;
    position: relative;
    top: -8px;
}
.payment-method-description {
    font-size: 13px;
    position: relative;
    top: -8px;
}

#onestepcheckout-form .pref-payment-method .card-icon {
    background-color: #f4f4f4;
}
#onestepcheckout-form .payment-method-type,
#onestepcheckout-form .payment-method-description {
    top: -4px;
}

#use-card-instead {
  margin-top: 8px;
}

#use-card-instead > a:link,
#use-card-instead > a:active,
#use-card-instead > a:visited,
#change-payment-method > a:link,
#change-payment-method > a:active,
#change-payment-method > a:visited {
    color: #3295c6;  /* #3399cc */
}

#cardnumber.braintree-hosted-fields-invalid,
#postcode.braintree-hosted-fields-invalid,
#expiry.braintree-hosted-fields-invalid,
#cvv.braintree-hosted-fields-invalid {
    border-color: #df280a !important; /*Magento red*/
    animation: wiggle 1.4s linear;
}
@keyframes wiggle {
   0%        { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0,        0, 0, 1); }
   2.083333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 15.08904, 0, 0, 1); }
   4.166667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 18.21434, 0, 0, 1); }
   6.25%     { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 10.99348, 0, 0, 1); }
   8.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0,        0, 0, 1); }
  10.416667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -8.00956, 0, 0, 1); }
  12.5%      { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -9.66853, 0, 0, 1); }
  14.583333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.83555, 0, 0, 1); }
  16.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0,        0, 0, 1); }
  18.75%     { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 4.25163,  0, 0, 1); }
  20.833333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.13224,  0, 0, 1); }
  22.916667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.09762,  0, 0, 1); }
  25%        { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0,        0, 0, 1); }
  27.083333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.25685, 0, 0, 1); }
  29.166667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.72429, 0, 0, 1); }
  31.25%     { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1.64428, 0, 0, 1); }
  33.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0,        0, 0, 1); }
  35.416667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1.19798,  0, 0, 1); }
  37.5%      { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1.44611,  0, 0, 1); }
  39.583333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.87282,  0, 0, 1); }
  41.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0,        0, 0, 1); }
  43.75%     { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.63591, 0, 0, 1); }
  45.833333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.76762, 0, 0, 1); }
  47.916667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.46331, 0, 0, 1); }
  50%        { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0,        0, 0, 1); }
  52.083333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.33755,  0, 0, 1); }
  54.166667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.40747,  0, 0, 1); }
  56.25%     { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.24593,  0, 0, 1); }
  58.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0,        0, 0, 1); }
  60.416667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.17918, 0, 0, 1); }
  62.5%      { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.21629, 0, 0, 1); }
  64.583333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.13055, 0, 0, 1); }
  66.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0,        0, 0, 1); }
  68.75%     { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.09511,  0, 0, 1); }
  70.833333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.11481,  0, 0, 1); }
  72.916667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0693,   0, 0, 1); }
  75%        { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0,        0, 0, 1); }
  77.083333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.05049, 0, 0, 1); }
  79.166667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.06094, 0, 0, 1); }
  81.25%     { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.03678, 0, 0, 1); }
  83.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0,        0, 0, 1); }
  85.416667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0268,   0, 0, 1); }
  87.5%      { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.03235,  0, 0, 1); }
  89.583333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.01953,  0, 0, 1); }
  91.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0,        0, 0, 1); }
  93.75%     { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.01423, 0, 0, 1); }
  95.833333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.01717, 0, 0, 1); }
  97.916667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.01036, 0, 0, 1); }
  100%       { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0,        0, 0, 1); }
}

#msg-area {
    font-weight: bolder;
}
#msg-area.alert{
    color: #df280a;
    font-weight: normal;
}
#msg-area.info {
    color: green;
}

a.with-tooltip:hover {
    text-decoration: none;
}
a.with-tooltip span.tooltip {
    border: 1px solid silver;
    border-radius: 8px;
    display: none;
    z-index: 1000;
}
a.with-tooltip:hover span.tooltip {
    display: inline;
    position: absolute;
}

#what-is-cvv span.tooltip {
    background: white url('what-is-cvv.png') 5px 125px no-repeat;
    background-size: 96%;
    height: 260px;
    right: auto;
    top: auto;
    width: 180px;
    color: #636363;
    padding: 10px;
}


#payment-panel {
    padding: 15px 0 20px 0;
}
#payment-panel > #help-text {
    padding: 25px 0;
    font-weight: bold;
    font-size: large;
}

#braintree-paypal {
}

#braintree-card {
}

#toggle-vault{
    margin-top: 2em;
}

#braintree-buttons-container {
    border: 0;
    margin-top: 0;
}
#braintree-button-submit, #braintree-tick {
    display: none;
}

.adminhtml-sales-order-create-index label.required {
    color: #333 !important;
    font-weight: normal !important;
}

body.checkout-onestep-index #onestepcheckout-form #braintree-tick.bt-validation-passed, /* FME */
#braintree-tick.bt-validation-passed {
    display: inline-block;
    margin-left: 7px;
    margin-right: 0;
    height: 22px;
    width: 22px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}
.tick-circle {
    height: 22px;
    width: 22px;
    background-color: green;
    border-radius: 11px;
    position: absolute;
    left: 0;
    top: 12px;
}
.tick-stem {
    background-color: white;
    height: 9px;
    width: 3px;
    position: absolute;
    left: 11px;
    top: 18px;
}
.tick-kick {
    background-color: white;
    height: 3px;
    width: 3px;
    position: absolute;
    left: 8px;
    top: 24px;
}

.onestepcheckout-index-index #braintree-button-submit {
    vertical-align: top;
}
.onestepcheckout-index-index #braintree-tick,
.onestepcheckout-index-index #braintree-tick .tick-circle,
.onestepcheckout-index-index #braintree-tick .tick-stem,
.onestepcheckout-index-index #braintree-tick .tick-kick {
    height: 0;
}

/* For Idev onestepcheckout.com, normal skin */
#onestepcheckout-form #braintree-tick.bt-validation-passed {
    background: transparent url("../../../onestepcheckout/images/onestepcheckout-numbers-4.png") no-repeat;
    background-position-y: 2px;
    height: 38px;
    width: 28px;
    transform: none;
    -ms-transform: none;
}
/* For Idev onestepcheckout.com, Magento skin */
#onestepcheckout-form .onestepcheckout-skin-magento #braintree-tick.bt-validation-passed {
    background: transparent url("../../../onestepcheckout/images/skin-magento/onestepcheckout-numbers-4.png") no-repeat;
    margin-top: 7px;
    height: 18px;
    width: 18px;
    transform: none;
    -ms-transform: none;
}

/* For Magestore */
#one-step-checkout-form #braintree-tick.bt-validation-passed {
    background: #f39801 url("../../../images/onestepcheckout/order_title.png") -17px -11px no-repeat;
    /* Or use same color as Verify button: */
    /* background-color:  #2e8ab8; */
    height: 33px;
    width: 33px;
    transform: none;
    -ms-transform: none;
}

/* For IWD */
.opc-wrapper-opc #braintree-button-submit {
    background-color: #00909e;
}
.opc-wrapper-opc #braintree-button-submit:hover {
    background-color: #39b9c6;
}
.opc-wrapper-opc #braintree-button-submit.bt-validation-passed {
    color: white;
}

/* GoMage */
#gcheckout-payment-methods-available #braintree-button-submit {
    color: white;
}