.UserManage {
  padding: 16px;
  background-color: #fff;

  .userExpandInfo {
    display: flex;
    flex-direction: row;
    background: #F7F8FA;
    padding: 20px 24px;
    flex-wrap: wrap;
    padding-bottom: 0;

    span {
      display: block;
      width: 20%;
      color: #525866;
      margin-bottom: 16px;
    }
  }

  .toolBar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

    .filter {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;

      .filterItem {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }
    }

    .btnGroup {
      span {
        box-sizing: border-box;
        cursor: pointer;
        display: inline-block;
        font-size: 14px;
        font-family: SourceHanSansCN-Normal, SourceHanSansCN;
        font-weight: 400;
        color: #17181A;
        border: 1px solid #DAE2F2;
        line-height: 24px;
        padding: 0 14px;
        background: #FAFCFF;
        border-radius: 4px;
      }

      .add {
        color: #FFFFFF;
        background: #3377FF;
        border: 1px solid #3377FF;
        margin-left: 8px;
        border: none;
      }
    }

  }
}

.ProfileModal {


  .wraper {
    display: flex;
    flex-direction: row;

    .left {
      width: 160px;

      .avatarContainer {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 148px;
        height: 148px;
        display: flex;
        margin-bottom: 11px;
        background: #F7F8FA;
        border-radius: 4px;
        padding-left: 20px;
        padding-top: 10px;
        border: 1px dashed #CFD6E6;
        .kcmp-ant-upload-picture-card-wrapper {
             .kcmp-ant-upload-select-picture-card {
                border: none;
                background-color:#F7F8FA;
             }
        }
      }

      .formItem {
          margin-bottom: -4px;
      }
    }

    .right {
      display: flex;
      flex-direction: row;
      width: calc(100% - 160px);
      padding-left: 16px;
      justify-content: space-between;
      align-content: flex-start;
      flex-wrap: wrap;

      .formItem {
        width: 160px;
        height: 50px;
        margin-bottom: 12px;

        .mq-ant-form-item {
          .mq-ant-picker {
            width: 100%;
          }
        }

        &:nth-child(3n) {
          margin-right: 0;
        }
      }
    }
  }

  .remarkArea {
    .mq-ant-col-5 {
      flex: 0 0 10%;
    }

    .mq-ant-col-18 {
      max-width: 100%;

      .pro-field-xl {
        width: 662px;
      }
    }

    .pro-field-xl {
      width: 100%;
    }
  }
}
