.view-mt-popup {
  background: rgba(0, 0, 0, 0.5);
}


.user-select-dialog, .dept-tree{ //用户选择框和树形部门选择框 从_form.scss复制过来的
  .title {
      width:100%;
      height:40px;
      line-height: 40px;
      padding:0 10px;
      font-size:16px;
      color:#000000;
      border-bottom:1px solid #efeffa; 
  }
  .search {
      width:100%;
      height:48px;
      border-bottom:1px solid #efeffa; 
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      .search-block {
        width:90%;
        height:34px;
        position: relative;
        .local {
          position: absolute;
          left:10px;
          top:50%;
          margin-top:-8px;
          color:#D9D9D9;
  
        }
        .form_search {
          width:100%;
          -webkit-appearance:none;
          -moz-appearance: none;
          font-size:14px;
          height:34px;
          border-radius:4px;
          border:1px solid rgba(255,255,255,1);
          color:#6a6f77;
          outline:0;
          background:rgba(250,250,250,1);
          padding-left:36px;
          padding-right:10px;
        }
        .form_search::-webkit-input-placeholder {
          color: #D9D9D9;
        }
        .form_search::placeholder {
          color: #D9D9D9;
        }
        .form_search::-moz-placeholder{  //火狐的placeholder的颜色是粉红色，怎么改都不行
          color: #D9D9D9;      
        }
        .form_search:-ms-input-placeholder{ 
          color: #D9D9D9;      
        }
      }
      
  
      //mintiui搜索框的样式
      .mint-searchbar {
        position: relative;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background-color:#ffffff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 5px 10px;
        z-index: 1;
        .mint-searchbar-inner {
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          background-color: #fafafa;
          border-radius: 2px;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-flex: 1;
          -ms-flex: 1;
          flex: 1;
          height: 28px;
          padding: 4px 6px;
          
        }
      }
  }
  .position-box {
      position: fixed;
      top: 90px;
      left: 0;
      right: 0;
      bottom: 0;
  }
  .list-wrap {
      width:100%;
      //overflow-y:scroll; 
      height: calc(100% - 90px);
      min-height: 300px;
      padding-left:10px;
      .user-list {
          width:98%;
          height:54px;
          overflow: hidden;
          display: flex;
          flex-direction: row;
          align-items: center;
          border-bottom:1px solid #efeffa;
          .list-check{
            .mint-checklist-label{
                padding-left: 0;
            }
          }
          .photo {
              width:32px;
              height:32px;
              overflow: hidden;
              border-radius: 50%;
              img{
                  width:100%;
                  height:100%;
                  border-radius: 50%;
              }
          }
          .list-info {
                  font-size:14px;
                  margin-left:8px;
                  width:77%;
                  display: flex;
                  flex-direction: row;
                  justify-content: space-between;
              span:nth-child(1) {
                  display:inline-block;
                  width:70%;
                  overflow: hidden;
                  white-space:nowrap;
                  text-overflow: ellipsis;
              }
              span:nth-child(2) {
                  display:inline-block;
                  width:30%;
                  overflow: hidden;
                  white-space:nowrap;
                  text-overflow: ellipsis;
                  padding-left:10px;
                  padding-right:8px;
                  text-align: right;
                  font-size: 12px;
                  color:#888;
              }
          }
        
      }
      
  }
  .user_list{
      height:calc(100% - 150px);
      overflow:auto;
  }
  .dept-tree-select{
      padding-left: 10px;
      .icon {
          display:flex;
          flex-direction: row;
          align-items: center;
          color:#26a2ff;
          height: 54px;
          font-size:32px; 
          .dept-name {
              font-size:14px;
              color:#000000;
              margin-left:10px;
              overflow: hidden;
              white-space:nowrap;
              text-overflow: ellipsis;
          }
      }
      .user-box {
          display: inline-block;
          width: 100%;
          max-height: calc(100% - 205px);
          position: relative;
          overflow:scroll;
          -webkit-overflow-scrolling: touch;
          .user-list {
              width:100%;
              height: 32px;
              display: flex;
              flex-direction: row;
              border-bottom:1px solid #f7f7f7;
              padding:10px 10px 10px 0;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              margin-left: 10px;
              line-height: 28px;
              .photo {
                  display: inline-block;
                  width:32px;
                  height:32px;
                  overflow: hidden;
                  border-radius: 50%;
                  margin-right:10px;
                  img {
                      width:100%;
                      height:100%;
                  }
              }
              .name {
                  width:74%;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
              }
          }
      }
      .tree-height{
          height: 54px;
          line-height: 54px;
          display:inline-block;
          .more {
              display:inline-block;
              width:20px; 
              height:20px;
              line-height:20px;
              border-radius: 2px;
              text-align:center;
              color:#888888;
              font-size:12px;
              background:#f4f6f6;
          }
          .box{
              margin-left: 20px;
          }
      }
      .tree-name {
          width:32px;
          height: 54px;
          line-height: 54px;
          display:inline-block;
          border:1px solid red;
      }
      .mint-checklist-label{
      padding: 0 6px 0 0;
      float: left;
      }
      .icon-open{
      width: 20px;
      right: 0;
      float: right;
      position: relative;
      }
  }
  .selected-user {
      width:100%;
      height:100%;
      position: relative;
      .title {
          width:95%;
          height:40px;
          line-height: 40px;
          padding:0 10px;
          font-size:16px;
          color:#000000;
          border-bottom:1px solid #efeffa; 
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          .reset {
              color: #26a2ff;
          }
      }
      .list-wrap {
          width:100%;
          height: 300px;
          overflow-y:scroll; 
          padding:10px;
          .tabs {
              display: flex;
              flex-direction: row;
              flex-wrap:wrap;
              width:100%;
              .tab {
                  margin-right: 10px;
                  margin-bottom: 10px;
                  min-width: 50px;
                  padding:7px 10px;
                  background: #fafafa;
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  justify-content: space-between;
                  font-size: 12px;
                  color:#26A2FF;
                  border-radius: 5px;
                  .user-name {
                      display:block;
                      max-width: 200px;
                      overflow: hidden;
                      white-space: nowrap;
                      text-overflow:ellipsis;
                  }
                  img {
                      margin-left: 6px;
                      width:12px;
                      height:12px;
                  }
              }
          }
        
      }
      .bottom-btns-user {
          position: absolute;
          bottom:0;
          width:95%;
          padding:0 10px;
          height:60px;
          border-top:1px solid #efeffa;
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #26a2ff;
          .btn {
              margin-right:10px;
          }
          .mint-button--small {
              display: inline-block;
              font-size: 14px;
              padding: 0 31px;
              height: 38px;
          }
      }
  }
  .dialog-btn{
    position: absolute;
    bottom:0;
    left:0;
    background: white;
    width: 95%;
    height:60px;
    display: flex;
    padding:0 10px;
    align-items: center;;
    justify-content: space-between;
    border-top:1px solid #fafafa;
    .num {
        color:#26a2ff;
        font-size:16px;
    }
    .comm-btn {
        margin-right: 10px;
    }
    .mint-button--small {
        display: inline-block;
        font-size: 14px;
        padding: 0 31px;
        height: 38px;
    }
  }
}

.kms-control-dialog {
    .kms-data-wrap {
        width:100%;
        height:100%;
        background:white;
        .header {
            height: 40px;
            font-size: 16px;
            padding-left: 10px;
            box-sizing: border-box;
            line-height: 40px;
            border-bottom: 1px solid #efeffa;
        }
        .container {
            font-size: 14px;
            height: calc(100% - 92px);
            overflow: auto;
            padding-left: 10px;
            padding-right: 10px;
            box-sizing: border-box;
            color: #666666;
            .list {
                width: 100%;
                display: -webkit-flex;
                display: flex;
                flex-direction: row;
                padding-top: 10px;
                padding-bottom: 10px;
                border-bottom: 1px solid #efeffa;
                .list-left-wrap {
                    display: -webkit-flex;
                    display: flex;
                    align-items: center;
                }
                .list-right-wrap {
                    .name {
                        margin-bottom: 5px;
                    }
                }
            }
        }
        .footer {
            height: 50px;
            line-height: 50px;
            border-top: 1px solid #efeffa;
            padding-left:10px;
            padding-right: 10px;
            box-sizing: border-box;
            display: -webkit-flex;
            display: flex;
            align-items: center;
            .btn {
                margin-right: 10px;
            }
        }
    }
}

.view-model {
    width:100%;
    height:100%;
    background: rgba(0, 0, 0, 0.5); 
    .bottom-btn {
        height:48px;
        display:flex;
        flex-direction:row;
        justify-content:space-between;
        .btn-left {
            display:flex;
            flex-direction:row;
            align-items:center;
            font-size:14px; 
            .selected {
                color:#26A2FF;
                margin-left:10px;
            }
        }
    }
}