.proc-info {
  padding: 20px;
  display: flex
}

.proc-info .proc-info-start {
  font-size: 14px;
  color: #212121;
  letter-spacing: 0;
  line-height: 20px;
  font-weight: 400;
  padding-top: 3px
}

.proc-info .proc-info-item {
  display: flex;
  flex-direction: column;
  padding-top: 3px
}

.proc-info .proc-info-title {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #212121;
  letter-spacing: 0;
  font-weight: 400;
  margin-bottom: 20px
}

.proc-info .proc-info-item-weight {
  margin-left: 6px
}

.proc-info .proc-info-role-container {
  margin-bottom: 20px;
  display: flex
}

.proc-info .proc-info-role-container:last-child {
  margin-bottom: 0
}

.proc-info .proc-info-role-left {
  width: 140px;
  display: flex
}

.proc-info .proc-info-role-row {
  width: auto
}

.proc-info .proc-info-role {
  font-size: 12px;
  color: #41597e;
  letter-spacing: 0;
  font-weight: 400;
  border-radius: 2px;
  background: #f3f5f8;
  display: flex;
  padding: 0 8px;
  height: 24px;
  align-items: center
}

.proc-info .role-name {
  max-width: 120px
}

.proc-info .role-weight {
  margin-left: 6px;
  width: 40px
}

.proc-info .person-container {
  display: flex;
  flex-direction: column
}

.proc-info .person-item {
  display: flex;
  height: 24px;
  align-items: center;
  margin-bottom: 12px
}

.proc-info .proc-info-crossnode {
  background: #e8f5f3;
  border-radius: 9px;
  font-size: 12px;
  color: #1c9688;
  letter-spacing: 0;
  text-align: center;
  line-height: 20px;
  font-weight: 400;
  padding: 2px 6px;
  margin-left: 8px
}

.proc-info .person-name {
  display: flex;
  align-items: center;
  margin-left: 4px;
  font-size: 12px;
  color: #212121;
  letter-spacing: 0;
  width: 70px;
  height: 24px;
  font-weight: 500;
  background: #f1f5fe;
  border-radius: 0px 13px 13px 0px;
  position: relative;
  left: -12px;
  padding-left: 16px
}

.proc-info .person-status {
  margin-left: 16px;
  display: flex;
  align-items: center
}

.proc-info .person-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  margin-right: 8px
}

.proc-info .pendding {
  color: #fb2323
}

.proc-info .stop {
  color: #fb2323
}

.proc-info .waiting {
  color: #ff991c
}

.proc-info .running {
  color: #276ff5
}

.proc-info .notactive {
  color: #212121
}

.proc-info .finished {
  color: #1ba854
}

.proc-info .rejected {
  color: #fb2323
}

.proc-info .returned {
  color: #fb2323
}

.proc-info .bewaitting {
  color: #276ff5
}

.proc-info .expired {
  color: #999
}

.proc-info .pendding-bg {
  background-color: #fb2323
}

.proc-info .stop-bg {
  background-color: #fb2323
}

.proc-info .waiting-bg {
  background-color: #ff991c
}

.proc-info .running-bg {
  background-color: #276ff5
}

.proc-info .notactive-bg {
  background-color: #666
}

.proc-info .finished-bg {
  background-color: #1ba854
}

.proc-info .rejected-bg {
  background-color: #fb2323
}

.proc-info .returned-bg {
  background-color: #fb2323
}

.proc-info .expired-bg {
  background-color: #999
}

.proc-info .bewaitting-bg {
  color: #276ff5
}

.proc-info .evaluated {
  background-color: #1ba854
}

.proc-info .unevaluated {
  color: #ff991c
}

.proc-info .unevaluated-bg {
  background-color: #ff991c
}

.proc-info .evaluating {
  background-color: #346bf6
}

.proc-info .dot-end-out {
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background-color: #e2e7ef;
  display: flex;
  justify-content: center;
  align-items: center
}

.proc-info .dot-end-in {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: #c1c5cc
}

.proc-info .proc-info-end {
  font-size: 14px;
  color: #212121;
  letter-spacing: 0;
  line-height: 20px;
  font-weight: 400;
  padding-top: 3px
}

.proc-info .empty {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  margin-top: 80px
}

.proc-info div.ant-typography,
.proc-info .ant-typography p {
  margin-bottom: 0
}

.proc-info .ant-tooltip-inner {
  color: #333;
  background-color: #fff
}

body {
  line-height: 1.2
}