.flexContainer {
  display: flex;
  justify-content: space-around;
  align-items: center;

  .flexItem {

  }
}


.label {
  font-size: 14px;
  font-weight: 400;
  color: #616A79;
}
.payment-method-box {
  padding: 20px 10px 10px 10px;
  text-align: center;

  .payment-method {
      display: inline-block;
      margin: 0;
      width: 60%;
      vertical-align: middle;
      &-before {
          // TODO pseudo doesn't work
          // content: '';
          display: inline-block;
          height: 100%;
          vertical-align: middle;
      }
  }

  .payitem {
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      border: 1px solid transparent;
      height: 66px;
      line-height: 66px;

      .platformName {
        text-align: center;
        white-space: nowrap;
      }

      &.small {
        width: 88px;
        height: 36px;
        line-height: 36px;
        
        .payment-method {
          margin: 0;
        }
      }

      &.normal {
        width: 132px;
      }

      &.large {
        width: 162px;
      }

      &.active {
          border-radius: 5px;
          border-color:#1790FF;
          box-shadow: 0px 2px 6px 0px rgba(163,163,163,0.3);
      }

      &.en {
        font-size: 12px;
      }
  }

  &.mobile {
      padding: 8px 10px 10px 8px;
      .payitem {
          display: inline-flex;
          flex-direction: column;
          justify-content: space-around;
          width: 78px;
          height: 80px;
          line-height: initial;
          border: 1px solid transparent;

          &.active {
              border-radius: 4px;
              border-color: #1790FF;
          }

          .payment-method {
              display: inline-block;
              width: 34px;
              height: 34px;
          }
      }
  }
}

@media (max-width: 768px) {
  .payitem {
      cursor: pointer;
      border: 1px solid transparent;
      &.active {
          border-radius: 5px;
          border-color:#1790FF;
      }
  }
}