.partymemberdetails {
  &-head {
    padding: 20px 30px 65px;
    margin-bottom: 20px;
    background: url("../../assets/images/home-head-img.png"), #ffffff;
    background-size: 67px 67px, cover;
    background-position: right 5px bottom 5px, center;
    background-repeat: no-repeat, no-repeat;
    border-radius: 10px;

    &-title {
      display: flex;
      align-items: center;

      div {
        &:first-child {
          height: 37px;
          line-height: 37px;
        }

        &:last-child {
          margin-left: 15px;
          height: 37px;
          font-size: 26px;
          font-weight: 400;
          color: #4f4f4f;
          line-height: 37px;
          letter-spacing: 1px;
        }

        img {
          width: 34px;
          height: 34px;
        }
      }
    }

    &-subtitle {
      margin-top: 20px;
      width: 100%;
      height: 25px;
      font-size: 18px;
      font-weight: 400;
      color: #4f4f4f;
      line-height: 25px;
    }

    &-basic {
      display: flex;
      margin-top: 15px;

      &-personphoto {
        img {
          width: 101px;
          height: 129px;
        }
      }

      &-info {
        margin-left: 16px;

        .basic-info-first {
          font-size: 20px;
          font-weight: bold;
          color: #111111;
          line-height: 21px;
          opacity: 0.8;
        }

        .basic-info-second {
          margin-top: 5px;
          font-size: 14px;
          font-weight: 400;
          color: #4f4f4f;
          line-height: 20px;
          opacity: 0.9;

          .basic-info-divider {
            margin: 0 5px;
            width: 15px;
            font-size: 14px;
            font-weight: 400;
            color: #d8d8d8;
            line-height: 20px;
          }
        }

        .basic-info-third {
          margin-top: 5px;
          font-size: 14px;
          font-weight: 400;
          color: #4f4f4f;
          line-height: 20px;
          opacity: 0.9;

          .basic-info-address {
            margin-left: 16px;
          }
        }

        .basic-info-fourth {
          display: flex;
          align-items: center;
          margin-top: 15px;
          line-height: 40px;

          .basic-info-fourth-label {
            font-size: 14px;
            font-weight: 400;
            color: #4f4f4f;
            line-height: 20px;
          }

          .basic-info-fourth-info {
            margin-left: 15px;
            width: 32px;
            font-size: 14px;
            font-weight: 400;
            color: #0090f7;
            line-height: 20px;
            cursor: pointer;

            &:hover {
              text-decoration: underline;
            }
          }
        }

        .basic-info-fifth {
          margin-top: 10px;
          font-size: 14px;
          font-weight: 400;
          color: #000000;
          line-height: 20px;
        }

        .basic-info-sixth {
          margin-top: 5px;
          font-size: 14px;
          font-weight: 400;
          color: #4f4f4f;
          line-height: 20px;
        }
      }
    }

    &-divider {
      margin: 22px 0;
      width: 100%;
      height: 1px;
      border: 1px solid #e1e1e1;
    }

    &-desc {
      height: 25px;
      font-size: 18px;
      font-weight: 400;
      color: #4f4f4f;
      line-height: 25px;
      opacity: 0.9;
    }

    &-stage {
      margin-top: 12px;

      .head-stage-current,
      .head-stage-future {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 61px;
        background: #fffaf1;
        border-radius: 5px;

        span {
          font-size: 18px;
          font-weight: 400;
          color: #a48043;
          line-height: 25px;
        }
      }
    }
  }

  &-main {
    padding: 20px 30px 65px;
    margin-bottom: 20px;
    background: url("../../assets/images/home-head-img.png"), #ffffff;
    background-size: 67px 67px, cover;
    background-position: right 5px bottom 5px, center;
    background-repeat: no-repeat, no-repeat;
    border-radius: 10px;

    &-tabs.el-tabs {
      margin-top: 20px;

      ::v-deep {
        .el-tabs__item {
          font-size: 18px;
          font-weight: 500;
          color: #4f4f4f;
          opacity: 0.9;
        }

        .el-tabs__active-bar {
          background-color: #de0010;
        }

        .el-tabs__item {
          &:hover {
            color: #de0010;
          }

          &.is-active {
            color: #de0010;
            background: #f9e9ea;
          }
        }
      }
    }

    .roc-tabpane {
      display: block;
      width: 100%;
      min-height: 600px;

      &-head {
        display: flex;
        align-items: center;
        width: 100%;
        height: 94px;

        .tabpane-head-left {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 94px;
          height: 94px;
          border: 4px solid #de0010;
          border-radius: 50%;

          &.is-active {
            border: 4px solid #979797;
          }

          &-title {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 78px;
            height: 78px;
            background: #de0010;
            border-radius: 50%;
            font-size: 30px;
            font-weight: 800;
            color: #ffffff;
            line-height: 42px;
            letter-spacing: 1px;

            &.is-active {
              background: #979797;
            }
          }
        }
        .tabpane-head-right {
          margin-left: 15px;
          height: 50px;
          font-size: 36px;
          font-weight: 400;
          color: #111111;
          line-height: 50px;
          letter-spacing: 1px;
        }
      }

      &-line {
        margin-left: 46px;
        width: 1px;
        height: 46px;
        border: 2px solid #de0010;

        &.is-active {
          border: 2px solid #979797;
        }
      }

      &-step {
        width: 100%;

        &-item {
          display: flex;
          width: 100%;

          .step-item-left {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 16px;
            width: 62px;
            height: 62px;
            color: #de0010;
            border: 2px solid #de0010;
            border-radius: 50%;
            font-size: 36px;
            font-weight: 400;
            line-height: 50px;
            letter-spacing: 1px;

            &.is-active {
              color: #979797;
              border: 2px solid #979797;
            }
          }

          .step-item-right {
            flex: 1;
            margin-left: 10px;
            padding-bottom: 10px;

            &-title {
              margin-top: 10px;
              margin-bottom: 8px;
              height: 28px;
              font-size: 20px;
              font-weight: 400;
              color: #111111;
              line-height: 28px;
            }

            &-container {
              &_content {
                height: 22px;
                font-size: 16px;
                font-weight: 400;
                color: #616161;
                line-height: 22px;
                opacity: 0.9;
              }

              &_viewpdffile {
                display: flex;
                align-items: center;
                justify-content: right;
                width: 100%;

                .viewpdffile-label {
                  margin-right: 20px;
                  height: 22px;
                  font-size: 16px;
                  font-weight: 400;
                  color: #111111;
                  line-height: 22px;
                  opacity: 0.8;
                }

                .viewpdffile-view,
                .viewpdffile-download {
                  height: 22px;
                  font-size: 16px;
                  font-weight: 400;
                  color: #0090f7;
                  line-height: 22px;
                  opacity: 0.9;
                  cursor: pointer;

                  &:hover {
                    text-decoration: underline;
                  }
                }

                .viewpdffile-view {
                  margin-right: 25px;
                }
              }

              &_preliminaryreport {
                height: 22px;
                font-size: 16px;
                font-weight: 400;
                color: #de0010;
                line-height: 22px;
                opacity: 0.9;
              }
            }
          }
        }

        &-tail {
          position: absolute;
          margin-left: 46px;
          width: 2px;
          border: 2px solid #de0010;

          &.is-active {
            border: 2px solid #979797;
          }
        }
      }
    }
  }
}
