.technological {
  background-color: #fff;

  .process_group {
    position: relative;

    .process_title {
      height: 32px;
      border-radius: 20px;
      background-color: #F8F8F8;
      z-index: 1;
      margin-left: -16px;
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 40px;
      padding-right: 10px;

      .process_icon {
        position: absolute;
        left: 16px;
      }
    }

    .process_doing {
      background-color: #E3F1FF
    }

    .process_waiting {
      .process_icon>svg>g>path {
        fill: #BBBDBF;
      }
    }

    .process:nth-last-child(1) {
      .titlecontent_line {
        height: calc(100% + 38px);
      }
    }
  }

  .titlecontent_line {
    position: absolute;
    top: 20px;
    left: 5px;
    height: 100%;
    // border-left: 2px dashed #1890FF;
    border-left: 2px solid #1890FF;
  }

  .process_group:nth-last-child(1) {
    .process:nth-last-child(1) {
      .titlecontent_line {
        height: 100%;
      }
    }
  }

  .before_doing {
    border-left: 2px dashed #ccc;
  }

  .title {
    margin-bottom: 10px;
    padding: 12px 16px;

    .titlecontent {
      margin-bottom: 12px;

      .name_const {
        font-size: 16px;
        line-height: 22px;
        font-weight: 600;
      }

      .flow_path {
        line-height: 28px;
        display: flex;
        position: relative;
        padding-bottom: 10px;

        .outlined {
          display: inline-block;
          width: 12px;
          height: 12px;
          background-color: #1890FF;
          border-radius: 50%;
          margin-right: 15px;
        }

        .outlined_doing {
          display: inline-block;
          width: 12px;
          height: 12px;
          background-color: #BBBDBF;
          border-radius: 50%;
          margin-right: 15px;
        }

        .flow_path_text {
          height: 28px;
          display: inline-block;
          margin-right: 5px;
          font-size: 14px;
          color: #31373D;
        }

        .statusiocn {
          height: 25px;
          font-size: 32px;

          svg {
            top: -2px;
          }

          svg.process {
            top: -9px;
          }
        }

      }

      .flow_Mobile {
        align-items: center;


        .statusiocn {
          font-size: 12px;
          height: 18px;
          padding: 0px 4px;
          border-radius: 3px;
          color: #fff;
          line-height: 18px;
        }

        .statusiocn_pass {
          background-color: #13B478;
        }

        .statusiocn_revert {
          background-color: #FDA71E;
        }

        .statusiocn_doing {
          background-color: #287EF0;
        }

        .statusiocn_refuse {
          background-color: #FF3A3A;
        }
      }
    }
  }

  .process {
    padding-top: 10px;
    position: relative;

    .approver {
      margin-bottom: 5px;
      display: flex;

      .decision {
        position: relative;
        margin-right: 3px;
        width: 20px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        left: -4px;
        height: 25px;
        z-index: 1;

        .outer-layer {
          background-color: #fff;
          padding: 2px 0;

          .decision_icon {
            width: 6px;
            height: 6px;
            background: #ccc;
            border-radius: 50%;

          }

          .submit {
            background-color: #15B37B;
          }

          .pass {
            background-color: #15B37B;
          }

          .waiting {
            background-color: #ccc;
          }

          .revert {
            background-color: #FDA71E;
          }

          .ondo {
            background-color: #1890FF;
          }

          .refuse {
            background-color: #F5222D;
          }

          .doing {
            background-color: #1890FF;
          }
        }


      }

      .approver_usercontent {
        flex: 1;
        max-width: calc(100% - 25px);

        .approver_user {
          display: flex;
          justify-content: space-between;

          .approver_name {
            color: #000;
            font-size: 13px;
            vertical-align: top;

            @media screen and (min-width: 1280px) and (max-width: 1440px) {
              font-size: 12px;
            }
          }

          .approver_personnel {
            line-height: 24px;

            .approver_img {
              width: 24px;
              height: 24px;
              display: inline-block;
              font-size: 24px;
              margin-right: 5px;

              svg {
                top: 0;
              }
            }
          }

          .approver_status {
            font-size: 12px;
            line-height: 28px;
            color: rgba(#000000, 25%);

            .approver_time {
              line-height: normal;
              margin-right: 10px;
            }
          }
        }

        .put-on-display {
          padding-right: 50px;

          .approver_content {
            padding: 8px 12px;
            vertical-align: top;
            font-size: 12px;
            border-radius: 5px;
            margin: 5px 0 5px;
            color: rgba(0, 0, 0, 0.45);
            background: #F0F2F5;

          }

          .data_img {
            display: flex;
            flex-wrap: wrap;

            .pieceimg {
              margin-right: 5px;
              margin-bottom: 5px;

              .pieceimg_img {

                .pieceimg_img_data {
                  width: 4.875rem;
                  height: 4.875rem;
                }
              }
            }
          }
        }




        .textfile_xls {
          padding: 6px 12px 6px 12px;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          background-color: #F0F2F5;
          margin-bottom: 5px;
          cursor: pointer;

          .textfile_size {
            display: flex;
            align-items: center;
            width: 80px;
            justify-content: space-between;

            .item-select-tag-size {
              font-size: 12px;
              display: inline-block;
              width: 60px;
              text-align: right;
              color: rgba(0, 0, 0, 0.45);
            }

            .item-select-tag-btn {
              color: #1890FF;
            }
          }

          .textfile_text {
            display: flex;
            align-items: center;
            flex: 1;
            padding-right: 10px;
            overflow: hidden;
            max-width: 300px;

            .textfile_icon {
              margin-right: 10px;
            }

            .text {
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              font-size: 12px;
              color: rgba(0, 0, 0, 0.45);

            }
          }
        }

        .textfile_xls:nth-last-child(1) {
          margin-bottom: 0px;
        }
      }
    }

    .approver:nth-last-child(1) {
      border-bottom: none;
      margin-bottom: 0px;
    }
  }

}

.approver_decision {
  width: 40px;
  height: 25px;
  border-radius: 50%;
  font-size: 12px;
  text-align: center;
  display: inline-block;
  color: #ccc;
  line-height: 25px;
  border: 1px solid;
}

.approver_opinion1 {
  border-color: #30bf78;
  color: #30bf78;
}

.approver_opinion2 {
  border-color: #797979;
  color: #797979;
}

.approver_opinion3 {
  border-color: #f08bb4;
  color: #f08bb4;
}

.approver_opinion4 {
  border-color: #d17100;
  color: #d17100;
}

.approver_opinion5 {
  border-color: #ff3a3a;
  color: #ff3a3a;
}

.approver_opinion6 {
  border-color: #1890ff;
  color: #1890ff;
}

.approver_opinion7 {
  border-color: rgba(#000000, 25%);
  color: rgba(#000000, 25%);
}

.approver_opinion8 {
  border-color: #797979;
  color: #797979;
}

.approver_opinion9 {
  border-color: #ff3a3a;
  color: #ff3a3a;
  border-radius: 0%;
  height: auto;
}