@import 'css/master/settings/settings';

.cc_form_container {
  background-color: $lightBlue;
  border: 1px solid $blue;
  padding: $commonPadding*2 $commonPadding*4;
}

.cc_error,
.odcc_error {
  display: block;

  &.hide {
    display: none;
  }
  .change_tab_link {
    color: $black;
  }
}

.error.slim {
  margin-top: 0;
  margin-bottom: 0;
}

.credit_card_number_input {
  width: 230px;
}

.cc_card_img {
  background: url('//media.officedepot.com/image/upload/v1661367083/gtools/images/common/creditcard/vertical_CC_logos_2.png') 100px no-repeat;
  bottom: 4px;
  float: left;
  height: 50px;
  padding-left: 76px;
  margin-left: 0;
  position: relative;
  right: 18px;
  @include transform(scale(.5, .4));

  &.vs {
    background-position: 0 0;
  }
  &.mc {
    background-position: 0 -67px;
  }
  &.ds {
    background-position: 0 -135px;
  }
  &.am {
    background-position: 0 -203px;
  }
  &.sr {
    background-position: 0 -270px;
  }
}

#displayCCLabel {
  padding: $commonPadding * 5;
}

#displayMaskedLabel {
  .credit_card_logo {
    background: url('//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/common/creditcard/creditcardtype_sm.png') 0 0 no-repeat;
    position: relative;
    display: inline-block;
    float: left;
    width: 50px;
    margin-left: 0;
    transform: scale(0.9, 0.8);
    -webkit-transform: scale(0.9, 0.8);
    opacity: 1;
    &.VS {
      background-position: 0 0;
    }
    &.MC {
      background-position: 0 -144px;
    }
    &.AM {
      background-position: 0 -46px;
    }
    &.DS {
      background-position: 0 -96px;
    }
  }

  tr {
    td {
      line-height: 26px;
    }
  }

}