.credit-card-selector-block {
  table {
    width: 100%;

    caption {
      caption-side: top;
      margin-top: 20px;
      padding: 0 0 0 10px;
      color: inherit;
      font-weight: 500;
    }

    tr.card-row.selected {
      td {
        background-color: #eee;
        cursor: pointer;
      }
    }

    tr {
      td {
        padding: 10px;
        line-height: 1em;
        vertical-align: top;

        &:first-child {
          border-top-left-radius: 3px;
          border-bottom-left-radius: 3px;
        }

        &:last-child {
          border-top-right-radius: 3px;
          border-bottom-right-radius: 3px;
        }

        #HostedTokenizationDiv {
          margin: 0 -20px;
        }
      }

      th {
        padding: 10px;
        line-height: 1em;
        vertical-align: top;

        &:first-child {
          border-top-left-radius: 3px;
          border-bottom-left-radius: 3px;
        }

        &:last-child {
          border-top-right-radius: 3px;
          border-bottom-right-radius: 3px;
        }

        #HostedTokenizationDiv {
          margin: 0 -20px;
        }
      }

      td.radioButton {
        white-space: nowrap;
      }

      th.radioButton {
        white-space: nowrap;
      }

      td.maskedCreditCardNumber {
        span.creditCardHolder {
          display: block;
          color: #6c757d;
          margin-bottom: 5px;
        }
      }

      th.maskedCreditCardNumber {
        span.creditCardHolder {
          display: block;
          color: #6c757d;
          margin-bottom: 5px;
        }
      }

      td.creditCardHolder {
        display: none;
      }

      td.paymentProductName {
        display: none;
      }

      th.creditCardHolder {
        display: none;
      }

      th.paymentProductName {
        display: none;
      }

      input {
        vertical-align: middle;
        margin-right: 5px;
      }


    }

    tr.selected {
      .card-details {
        display: block;
      }
    }
  }
}

@media only screen and (min-width: 1200px) {
  .credit-card-selector-block {
    table {
      tr {
        td {
          vertical-align: middle;

          #HostedTokenizationDiv {
            margin: 0;
          }
        }

        th {
          vertical-align: middle;

          #HostedTokenizationDiv {
            margin: 0;
          }
        }

        td.maskedCreditCardNumber {
          span.creditCardHolder {
            display: none;
          }
        }

        th.maskedCreditCardNumber {
          span.creditCardHolder {
            display: none;
          }
        }

        td.creditCardHolder {
          display: table-cell;
        }

        td.paymentProductName {
          display: table-cell;
        }

        th.creditCardHolder {
          display: table-cell;
        }

        th.paymentProductName {
          display: table-cell;
        }
      }
    }
  }
}

.hostedTokenization {
  iframe {
    border: none;
    width: 100%;
  }
}

.worldline_payment_product_detail {
  padding: 0 30px 20px 30px;
}

.payment_product {

  margin-left: -15px;
}

.worldline_payment_product {
  padding: 10px;
  padding-top: 0px;
  padding-bottom: 0px;
}

#worldline-selector {
  padding-left: 0px;

  img {
    max-width: 45px;
  }

  li {
    list-style: none;
    padding-top: 5px;
    margin-left: auto;
    margin-right: auto;

    img {
      margin: 5px;
    }
  }
}

.btn-select {
  img {
    max-width: 45px;
  }

  width: 100%;
  height: 40PX;
  border-radius: 5px;
  background-color: #fff;
  border: 1px solid #ccc;

  li {
    list-style: none;
    padding-bottom: 0px;
    margin-left: 0px;
    margin-top: 5px;

    .select-text {
      margin-top: 5px;
    }
  }


  &:focus {
    outline: none;
  }
}

.open {
  display: show !important;
}

.select-text {
  margin-top: 10px;
}

.payment_product_row {
  padding-left: 10px;
  padding-top: 0px;
}
