.headerTitle {
  width: 100%;
  height: 58px;
  background-size: contain;

  .titleWrap {
    color: rgb(179, 214, 247);
    font-size: 20px;
    font-weight: 700;
    margin-left: 8px;
  }
}

.circleIcon {
  width: 22px;
  margin-right: 6px;
}

.sortIcon {
  font-size: 18px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  background: rgba(122, 186, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  color: #5795cf;
}

.active {
  background: rgba(122, 186, 255, 0.4);
  color: #fff;
}

.culationWrap {
  height: 100%;
  border-radius: 20px;
  padding: 20px;
  box-sizing: border-box;
  background: rgba(57, 122, 183, 0.238);
}

.culationContent {
  padding: 20px;
  max-height: calc(100% - 60px);
  overflow: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  .result {
    color: #fff;
    background: rgba(57, 122, 183, 40%);

    border-radius: 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px 10px;

    .status {
      font-size: 22px;
      color: #ffffff;
      font-weight: bold;
      margin-bottom: 6px;
    }

    .timeInfotext {
      font-size: 14px;
      color: #e0edff;
      display: flex;
      align-items: center;

      .dept {
        flex: 1;
        margin-left: 10px;
      }
    }
  }

  .record_item {
    display: flex;
    flex-direction: column;

    .flow {
      display: flex;
      justify-content: center;
      position: relative;

       img{
         width: 50px;
         height: 30px;
         margin: 10px 0;
       }
      .down {
        transform: rotateZ(180deg);
      }
    }

    .timeDes {
      display: flex;
      text-align: center;
      min-width: fit-content;
      height: 26px;
      top: 50%;
      left: 50%;
      margin-left: 34px;
      margin-top: -14px;
      align-items: center;
      padding: 4px 6px;
      position: absolute;
      font-size: 14px;
      color: #fff;
      background: rgba(133, 158, 255, 0.44);
      border-radius: 6px;

      &::before {
        position: absolute;
        display: inline-block;
        content: '';
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-right: 10px solid rgba(133, 158, 255, 0.44);
        border-bottom: 10px solid transparent;
        left: -10px;
      }
    }
  }

  .culationItems {
    padding: 20px;
    border-radius: 16px;
    background: rgba(57, 122, 183, 30%);

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;

    .info {
      flex: 1;
      line-height: 28px;
    }

    .role {
      color: rgb(255, 255, 255);

      font-size: 20px;
      font-weight: 700;
    }

    .time {
      font-size: 16px;
      color: rgb(255, 255, 255);

      padding: 4px 0;
    }

    .speed {
      display: inline-block;
      width: 185px;
      height: 26px;
      line-height: 26px;
      color: #64a5fb;
      font-size: 14px;
      padding: 0 10px;
      background: #d8ebff;
      border-radius: 13px;
    }

    .status {
      min-height: 36px;
      border-radius: 20px;
      width: 84px;
      line-height: 24px;
      padding: 6px 6px;
      text-align: center;
      background: rgba(129, 193, 255, 23%);
      color: rgb(116, 187, 255);

      font-size: 18px;
      font-weight: 700;
    }

    .deal_evaluate {
      min-width: 70%;
      background: #cee4ff;
      transform: scale(0.9);
      transform-origin: 0;
      padding: 4px;
      border-radius: 10px;
      color: #66717f;
      cursor: pointer;
    }

    .remark {
      color: #fff;
      font-size: 15px;
    }

    .event_attachment {
      //办理附件
      display: flex;
      align-items: center;
      margin-top: 4px;

      .attachment {
        color: #fff;
        margin-right: 4px;
      }

      .icon {
        color: #016bff;
        font-size: 20px;
        margin-left: 6px;
        cursor: pointer;
      }
    }
  }
}

.asc {
  //倒叙，默认是按照Z->A,当设置为A->Z,反转flex列
  flex-direction: column-reverse !important;
}

.eventAttachment {
  //办理附件
  display: flex;
  align-items: center;
  margin-top: 4px;

  .attachment {
    color: #fff;
    margin-right: 4px;
  }

  .icon {
    color: #016bff;
    font-size: 20px;
    margin-left: 6px;
    cursor: pointer;
  }
}

.leftIcon {
  width: 60px;
  border-radius: 50%;
  height: 60px;
  background: rgba(82, 181, 241, 27%);
}