.flex-start {
  display: flex;
  justify-content: start;
  align-items: start;
}

.cp-wrapper {
  height: 100%;
  &-twork {
    height: 224px;
    overflow-y: auto;
    .twork {
      &--item {
        .flex-start();
        color: var(--info-color);
        margin-bottom: 16px;
        gap: 16px;
        &-img {
          img {
            width: 44px;
            height: 44px;
          }
        }
        &-progress-row {
          .flex-start();
          justify-content: space-between;
        }
        &-progress {
          width: 163px;
          font-size: 14px;
          line-height: 22px;
        }
        &-block {
          flex: 1;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
        }
      }
    }
  }

  .cp-rules-wrapper {
    width: 100%;
    margin-top: 12px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;

    --color: #5e6169;
    --label-color: #8c8c8c;
    --cy-bg: rgba(28, 229, 72, 0.08);
    --qt-bg: rgba(119, 119, 119, 0.08);
    --yh-bg: rgba(245, 34, 45, 0.08);
    --khs-bg: rgba(22, 119, 255, 0.08);

    &.dark {
      --color: #fff;
      --label-color: #b1b1b1;
      --cy-bg: rgba(28, 229, 72, 0.12);
      --qt-bg: rgba(147, 147, 147, 0.12);
      --yh-bg: rgba(255, 98, 106, 0.12);
      --khs-bg: rgba(33, 158, 229, 0.12);
    }
  }
  .cp-rules-item {
    width: 100%;
    border-radius: 4px;
    padding: 14px 16px;
    color: var(--modal-title-color);
    font-size: 14px;
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 12px;
    position: relative;
    &.cy {
      background: var(--cy-bg);
    }
    &.yh {
      background: var(--yh-bg);
    }
    &.qt {
      background: var(--qt-bg);
    }
    &.khs {
      background: var(--khs-bg);
    }
    &--icon {
      width: 42px;
      height: 52px;
    }
    .type {
      width: 76px;
      height: 28px;
      line-height: 20px;
      padding-left: 20px;
      font-size: 12px;
      position: absolute;
      right: 0;
      top: 0;
      color: #fff;
    }
    &-type {
      .type;
      &.cy {
        background: url('../../imgs/corner_cy.png') 100% 100% no-repeat;
      }
      &.yh {
        background: url('../../imgs/corner_yh.png') 100% 100% no-repeat;
      }
      &.qt {
        background: url('../../imgs/corner_qt.png') 100% 100% no-repeat;
      }
      &.khs {
        background: url('../../imgs/corner_khs.png') 100% 100% no-repeat;
      }
    }
    &--row {
      color: var(--modal-title-color);
      display: flex;
      &-label {
        color: var(--label-color);
      }
      &-value {
        color: var(--modal-title-color);
      }
    }
    &--row2 {
      display: flex;
      flex-direction: column;
      color: var(--color);
    }
  }

  &-table {
    height: 382px;
  }
}
