.ui--payment-container {
  position: relative;
  max-width: 992px;
  margin: 0 auto;
  padding: 40px 20px;
}
.ui--payment-methods {
  display: grid;
  grid-column-gap: 10px;
  grid-auto-flow: column;
  justify-content: center;
}
@media only screen and (max-width: 480px) {
  .ui--payment-methods {
    text-align: center;
    grid-gap: 10px;
    grid-auto-flow: dense;
    grid-template-columns: repeat(2, 1fr);
  }
}
.ui--payment-methods-list {
  padding: 6px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  text-transform: capitalize;
  border: solid 1px #919DB6;
  border-radius: 4px;
  user-select: none;
}
.ui--payment-methods-list.active,
.ui--payment-methods-list:hover {
  color: #138D75;
  border-color: #73C6B6;
  background-color: #F3FBFA;
  box-shadow: 0 0 0 2px #D0ECE7;
}
.ui--payment-wrapper {
  position: relative;
  padding: 20px;
  margin-top: 15px;
  border-top: dashed 1px #D6DBDF;
}
@media only screen and (max-width: 480px) {
  .ui--payment-wrapper {
    padding: 20px 0;
  }
}
.ui--payment-wrapper .info {
  text-transform: capitalize;
  text-align: center;
  margin: 0 0 15px;
  padding: 8px 16px;
  border-radius: 2px;
  background-color: #EBEDEF;
}
.ui--payment-wrapper code {
  padding: 2px 4px;
  border-radius: 2px;
  border: solid 1px #D6DBDF;
  background-color: #EBEDEF;
}
.ui--payment-slot.card-js {
  display: grid;
  grid-gap: 20px;
  grid-template-areas: "card-number card-name" "card-exp card-cvc";
}
@media only screen and (max-width: 480px) {
  .ui--payment-slot.card-js {
    grid-template-areas: "card-number" "card-name" "card-exp" "card-cvc";
  }
}
.ui--payment-slot.card-js .card-number-container {
  grid-area: card-number;
}
.ui--payment-slot.card-js .card-name-container {
  grid-area: card-name;
}
.ui--payment-slot.card-js .expiry-container {
  grid-area: card-exp;
}
.ui--payment-slot.card-js .cvc-container {
  grid-area: card-cvc;
}
.ui--payment-slot.card-js [class$="-wrapper"] {
  position: relative;
}
.ui--payment-slot.card-js label {
  color: #2B3037;
  line-height: 1;
  font-size: 14px;
  font-weight: 700;
  text-transform: capitalize;
  display: block;
  margin: 0 0 5px;
  max-width: unset;
}
.ui--payment-slot.card-js label[required]::after {
  content: ' *';
  color: #E53935;
}
.ui--payment-slot.card-js input,
.ui--payment-slot.card-js select {
  padding: 8px 14px;
  border: solid 1px #DCDFE5;
  border-radius: 4px !important;
  background-color: white;
}
@media only screen and (max-width: 480px) {
  .ui--payment-slot.card-js input,
  .ui--payment-slot.card-js select {
    padding: 8px 12px;
  }
}
.ui--payment-slot.card-js input:focus,
.ui--payment-slot.card-js select:focus,
.ui--payment-slot.card-js input:active,
.ui--payment-slot.card-js select:active {
  outline: unset;
  border-color: #73C6B6;
  box-shadow: 0 0 0 3px #D0ECE7;
}
.ui--payment-slot.card-js input {
  display: block;
  width: -webkit-fill-available;
}
.ui--payment-slot.card-js input.card-number {
  padding-right: 55px !important;
}
.ui--payment-slot.card-js select {
  display: inline-grid;
  width: calc((100% / 2) - 7.5px);
}
.ui--payment-slot.card-js select:nth-child(2) {
  margin-left: 15px;
}
.ui--payment-slot.card-js .card-type-icon {
  position: absolute;
  top: 27px;
  right: 12px;
  width: 32px;
  height: 23px;
  display: block;
  background: url(/assets/v3/cardjs/cards.png) 0 23px no-repeat;
  pointer-events: none;
  opacity: 0;
}
.ui--payment-slot.card-js .card-type-icon.show {
  opacity: 1;
}
.ui--payment-slot.card-js .card-type-icon.visa {
  background-position: 0 0;
}
.ui--payment-slot.card-js .card-type-icon.master-card {
  background-position: -32px 0;
}
.ui--payment-slot.card-js .card-type-icon.american-express {
  background-position: -64px 0;
}
.ui--payment-slot.card-js .card-type-icon.discover {
  background-position: -96px 0;
}
.ui--payment-slot.card-js .card-type-icon.diners {
  background-position: -128px 0;
}
.ui--payment-slot.card-js .card-type-icon.jcb {
  background-position: -160px 0;
}
.ui--payment-slot.card-js .card-errors {
  color: #E53935;
  font-size: 12px;
  font-style: italic;
  line-height: 1;
  margin-top: 2px;
}
.ui--payment-slot.wechat img {
  box-shadow: 0 5px 15px rgba(44, 179, 77, 0.4);
}
.ui--payment-slot.alipay img {
  box-shadow: 0 5px 15px rgba(0, 161, 233, 0.4);
}
.ui--payment-slot.promptpay img {
  box-shadow: 0 5px 15px rgba(5, 63, 103, 0.4);
}
.ui--payment-slot.ebank {
  display: flex;
  justify-content: center;
}
@media only screen and (max-width: 480px) {
  .ui--payment-slot.ebank {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(2, auto);
  }
}
.ui--payment-slot.ebank .item {
  position: relative;
  margin: 0 6px;
  width: 160px;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 4px #DCDFE5;
  transition: all 0.2s ease;
}
@media only screen and (max-width: 480px) {
  .ui--payment-slot.ebank .item {
    margin: 0;
  }
}
.ui--payment-slot.ebank .item.active::after {
  background-color: #138D75;
  border: solid 2px white;
  box-shadow: 0 0 0 2px #73C6B6;
}
.ui--payment-slot.ebank .item::after {
  display: block;
  content: '';
  width: 20px;
  height: 20px;
  margin: 6px auto;
  border-radius: 100%;
  background-color: #F1F2F4;
  border: solid 3px white;
  box-shadow: 0 0 0 1px #D6DBDF;
}
.ui--payment-slot.ebank .item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px #DCDFE5;
}
.ui--payment-slot.ebank img {
  display: block;
  width: 100%;
}
.ui--payment-slot .pay-image {
  display: block;
  width: 275px;
  height: auto;
  margin: 0 auto;
  border-radius: 4px;
}
.ui--payment-slot img {
  pointer-events: none;
  user-select: none;
}