/*
|--------------------------------------------------------------------------
| Color Variables
|--------------------------------------------------------------------------
*/
/************* Screen Sizes Breakpoints Variables *************/
/*
|--------------------------------------------------------------------------
| Screen Sizes Breakpoints Variables
|--------------------------------------------------------------------------
*/
/*
|--------------------------------------------------------------------------
| Grid Columns, Options
|--------------------------------------------------------------------------
*/
/*
|--------------------------------------------------------------------------
| Spacing variables
|--------------------------------------------------------------------------
*/
/*
|--------------------------------------------------------------------------
| Gutter Variables
|--------------------------------------------------------------------------
*/
/* Genral Functions - Non-site-specific Functionality */
/* Functions for colors*/
/*** Foundation Functions **/
.ma-saved-payments .payment-card {
  width: calc(50% - 10px);
  position: relative;
  margin-bottom: 1.25rem;
  border: 0.0625rem solid #EDE4C5;
  border-top: 0.25rem solid #DB542C;
  box-shadow: 0 4px 8px 0 rgba(99, 101, 105, 0.1);
  background-color: #FFF;
  color: #4F4F4F;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; }
  @media screen and (max-width: 600px) {
    .ma-saved-payments .payment-card {
      width: 100%; } }

.ma-saved-payments .card-nickname {
  padding: 0 0.625rem; }
  .ma-saved-payments .card-nickname h6 {
    font-size: 1.5rem;
    color: #000;
    margin-bottom: 0; }

.ma-saved-payments .expired {
  position: absolute;
  top: 0;
  right: 0;
  border-right: 3.5rem solid #DB542C;
  border-bottom: 3.5rem solid #FFF;
  display: inline-block; }
  .ma-saved-payments .expired span {
    position: absolute;
    top: 0.6875rem;
    right: -3.4375rem;
    transform: rotate(45deg);
    color: #FFF;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 0.8125rem; }

.ma-saved-payments .card-content {
  position: absolute;
  bottom: 0; }
  @media screen and (max-width: 1025px) {
    .ma-saved-payments .card-content {
      position: relative;
      height: 3.4375rem;
      margin-top: 0.9375rem; } }
  .ma-saved-payments .card-content .default {
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateY(-100%);
    border-left: 3.5rem solid #00C851;
    border-top: 3.5rem solid #FFF;
    display: inline-block; }
    .ma-saved-payments .card-content .default span {
      position: absolute;
      top: -1.625rem;
      left: -3.4375rem;
      transform: rotate(45deg);
      color: #FFF;
      font-size: 0.625rem;
      font-weight: 600;
      line-height: 0.8125rem; }
  .ma-saved-payments .card-content .card-holder-name, .ma-saved-payments .card-content .expiration-date {
    color: #4F4F4F;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.375rem;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #4F4F4F;
    overflow: hidden; }

.ma-saved-payments .payment-card:hover .card-actions {
  opacity: 1; }

.ma-saved-payments .card-actions {
  opacity: 0;
  background: #AAAFB2;
  display: flex;
  padding: 0.625rem 1rem;
  left: 0;
  position: absolute;
  bottom: 0;
  width: 100%;
  transition: opacity 0.3s ease; }
  @media screen and (max-width: 1025px) {
    .ma-saved-payments .card-actions {
      opacity: 1;
      position: relative; } }

.ma-saved-payments .cards-row {
  /*
        .payment-card-container {
            width: 49%;
            position: relative;
            margin-bottom: rem-calc(45);
            position: relative;

            @include screen-lte(xs) {
                width: 100%;
            }

            .payment-card {
                border: rem-calc(1) solid color("ui-05");
                border-top: rem-calc(4) solid color("brand-02");
                box-shadow: 0 4px 8px 0 rgba(99, 101, 105, 0.1);
                background-color: color("white");
                color: color("text-01");
                width: 100%;

                @include screen-lte(xs) {
                    max-width: rem-calc(280);
                    margin: auto;
                    position: relative;
                }

                @include screen-lte('md') {
                    position: relative;
                }

                min-height: rem-calc(150);
                padding: rem-calc(12 16);


                .card-nickname-container {
                    width: calc(100% - 3.75rem);

                    .card-nickname {
                        width: 100%;
                        font-size: rem-calc(18);
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        color: color("text-01");
                        margin-bottom: -3px;
                        overflow: hidden;
                        line-height: rem-calc(22);
                        font-weight: 600;
                    }
                }

                .last-four-digits {
                    color: color("text-01");
                    font-size: rem-calc(14);
                    line-height: rem-calc(16);
                }


                .card-holder {
                    width: calc(100% - 2.5rem);

                    .card-holder-name {
                        color: color("text-01");
                        font-size: rem-calc(14);
                        font-weight: 600;
                        line-height: rem-calc(22);
                        width: 100%;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        color: color("text-01");
                        overflow: hidden;
                    }
                }

                .expiration-date {
                    color: color("text-01");
                    font-size: rem-calc(12);
                    line-height: rem-calc(16);
                    text-align: right;
                }

                .left-bottom-triangle {
                    position: absolute;
                    top: 100%;
                    left: 0;
                    transform: translateY(-100%);
                    border-left: rem-calc(56) solid #00C851;
                    border-top: rem-calc(56) solid color("white");
                    display: inline-block;
                }

                .left-bottom-triangle-content {
                    position: absolute;
                    top: 100%;
                    left: -1px;
                    transform: translateY(calc(-100% - 15px)) rotate(45deg);
                    color: color("white");
                    font-size: rem-calc(10);
                    font-weight: 600;
                    line-height: rem-calc(13);

                    @include is-ie {
                        top: 93%;
                        transform: translateY(-100%) rotate(45deg);
                    }
                }




                [name^="saved-payment-card-spinner"] {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                }
            }

            .actions {
                background: color("ui-04");
                border: rem-calc(1) solid color("ui-05");
                border-top: none;
                display: flex;
                padding: rem-calc(10) 16px;
                left: 0;
                position: absolute;
                bottom: 0;
                width: 100%;
                opacity: 0;
                transition: opacity 0.3s ease;

                .xng-field {
                    margin-bottom: 0;

                    label {
                        font-size: rem-calc(14);
                        letter-spacing: 0.5px;
                        line-height: rem-calc(18);
                    }
                }

                .button {
                    text-transform: uppercase;
                    padding: 0 24px;
                    font-size: rem-calc(16);
                }

                @include screen-lte('md') {
                    opacity: 1;
                    position: static;
                }

                @include screen-lte('xs') {
                    max-width: rem-calc(280);
                    margin: auto;
                }

                &.visible {
                    opacity: 1;
                }
            }
        }
        */ }

@media screen and (min-width: 1025px) {
  .popup-add-saved-payment .modal-wrap,
  .popup-edit-saved-payment .modal-wrap {
    min-width: 58.75rem; } }

.popup-add-saved-payment .modal-wrap .token-ex-card-number-container .tokenex-iframe-block,
.popup-edit-saved-payment .modal-wrap .token-ex-card-number-container .tokenex-iframe-block {
  height: 2.5rem; }

.popup-add-saved-payment .modal-wrap .token-ex-card-number-container-top-margin,
.popup-edit-saved-payment .modal-wrap .token-ex-card-number-container-top-margin {
  margin-top: 8.5px; }

.popup-add-saved-payment .invalid-field-message, .popup-add-saved-payment .date-section .field-validation-message,
.popup-edit-saved-payment .invalid-field-message,
.popup-edit-saved-payment .date-section .field-validation-message {
  color: #ED1B25;
  font-size: 0.875rem;
  line-height: 1.125rem;
  letter-spacing: 0.03625rem;
  padding-top: 0.125rem; }
  .popup-add-saved-payment .invalid-field-message:before, .popup-add-saved-payment .date-section .field-validation-message:before,
  .popup-edit-saved-payment .invalid-field-message:before,
  .popup-edit-saved-payment .date-section .field-validation-message:before {
    content: "ERROR:";
    color: #ED1B25;
    font-size: 0.75rem;
    line-height: 0.875rem; }

.popup-add-saved-payment .invalid-field-style input,
.popup-edit-saved-payment .invalid-field-style input {
  border-width: 0.125rem;
  border-color: #F6F6F0; }

/*# sourceMappingURL=ma-saved-payments.css.map */