.card {
  color: #333;

  &.no-bordered {
    :deep(.ant-card-body) {
      padding-top: 16px;
      padding-bottom: 0;
    }
  }

  &.no-bordered-8 {
    :deep(.ant-card-body) {
      padding-top: 16px;
      padding-bottom: 8px;
    }
  }

  &.background {
    background-color: #f7f7f7;
  }

  &__title {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 700;

    &::before {
      content: "";
      display: inline-block;
      margin-right: 8px;
      height: 1em;
      width: 2px;
      background: linear-gradient(0deg, #4c6fd7 0%, #435cc8 100%);
    }
  }

  &__header {
    padding: 12px;
    background-color: #fff;
    top: 0;
    z-index: 11;
  }

  &__header + &__content {
    padding-top: 0;
  }

  &__content {
    padding: 16px 24px;
    font-size: 14px;

    .row {
      margin-bottom: 16px;

      &:first-of-type {
        margin-top: 0;
      }

      &:last-of-type {
        margin-bottom: 0;
      }
    }

    :deep(.ant-descriptions-item-container) {
      .ant-descriptions-item-label {
        flex: none;
      }

      .ant-descriptions-item-content {
        flex-wrap: wrap;
      }
    }
  }
}

.icon {
  margin-left: 4px;
  font-size: 18px;
  color: #b22222ff;
  transform: translateY(2px);
}

.phrase {
  & + .phrase::before {
    content: "、";
    margin-left: 2px;
    margin-right: 4px;
  }
}
