.antom-payment-block-icons {
  display: flex;
}

.antom-payment-icons {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;

  img {
    width: 40px;
    margin-left: 8px;
  }

  &-item {
    height: 20px !important;
  }
}

.hide-error {
  display: none !important;
}

.antom-cards {
  display: flex;
  flex-direction: column;
  padding: 2px;
  box-sizing: unset;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  &-container.bottom-space {
    margin-bottom: 16px;
  }

  &-container {
    flex: 1;
    display: flex;
    flex-direction: row;
    gap: 16px;
    flex-wrap: wrap;
    box-sizing: unset;

    ul {
      margin: 0 !important;
      padding: 0 !important;

      li {
        list-style: none;
        float: left;
        margin-right: 8px !important;

        img {
          width: 40px;
          border: #ccc solid 1px;
          padding: 8px 10px !important;
          border-radius: 3px;
          margin: 0 !important;
        }
      }
    }

    &:last-child {
      margin-bottom: 0 !important;
    }

    &-item {
      flex: 1;
      display: flex;
      flex-direction: column;

      &-error {
        margin-top: 8px;
        color: red;
      }

      &-line {
        flex: 1;
        display: flex;
        flex-direction: row;
        position: relative;

        .card-cover {
          width: 40px;
          height: 40px;
          position: absolute;
          left: 0;
          top: 0;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;

          img {
            width: 20px;
          }
        }

        input {
          width: 100%;
          height: 38px;
          line-height: 38px;
          outline: none;
          padding: 0 15px;
          margin-right: 0 !important;
          border: #ccc solid 1px;
        }

        input.antom-card-number {
          padding-left: 40px;
        }

        &-error {
          display: none;
          font-size: 1.5em;
          color: red;
        }
      }
    }
  }

  &-item.expire-date {
    margin-right: 16px !important;
  }
}

.antom-payment-cards-fields {
  display: flex;
  flex-direction: row;
  padding: 5px 8px;

  &-card-number-container {
    flex: 5;
    display: flex;
    flex-direction: row;
    position: relative;

    .antom-card-icon-container {
      width: 40px;
      height: 38px;
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;

      .antom-card-icon {
        width: 20px;
      }
    }

    input {
      flex: 1;
      outline: none;
      border: none;
      height: 32px;
      padding: 3px 10px 3px 40px;
    }
  }

  &-expire-day-container {
    flex: 1;
    display: flex;
    flex-direction: row;

    input {
      flex: 1;
      outline: none;
      border: none;
      height: 32px;
      padding: 3px 10px;
    }
  }

  &-cvv-container {
    flex: 1;
    display: flex;
    flex-direction: row;

    input {
      flex: 1;
      outline: none;
      border: none;
      height: 32px;
      padding: 3px 10px;
    }
  }
}

.antom-test-mode-warning {
  font-weight: bold;
  color: red;
}

.antom-test-mode-info {
  .strong {
    font-weight: bold;
  }
}

#antom-loading-mask {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99999;
  text-align: center;

  img {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }

  p {
    color: white;
    position: absolute;
    width: 100%;
    top: 60%;
  }
}