// 底部插槽
.znl-footer-slot {
  position: absolute;
  height: 100%;
  display: flex;
  align-items: center;
  left: 5px;
  font-size: 12px;
}
table.el-table__header,
table.el-table__body {
    margin: 0!important; // 切换后表头出现上下margin错乱
}
.DisplayEdit  .znl-is-read-only{
  background-color: #fff;
}

.el-select-dropdown__item {
    font-size: 12px;
    display: block;
}

// 右键菜单
.right-menu-shade{
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.wj-right-menu {
    padding: 0;
    margin: 0;
    background-color: #fff;
    border: 1px solid #d1dbe5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12);
    padding: 2px 0;
    top: 0;
    left: 0;
    // min-width: 100px;
    position: fixed;
    z-index: 9999;
    &:focus {
      outline: none;
    }
    ul {
      margin: 0px;
      li {
          padding: 0;
          margin: 0;
          // min-width: 120px;
          list-style: none;
          display: block;
          &.display{
            span{
              color: #999;
            }
          }
          &.divider {
              height: 1px;
              margin: 5px 0;
              overflow: hidden;
              background-color: #eee;
          }
          a,
          span {
              padding: 0 10px 0 10px;
              color: #222;
              display: block;
              font-size: 12px;
              height: 26px;
              line-height: 26px;
              text-decoration: none;
              position: relative;
              cursor: pointer;
              .fa-icon {
                  height: 14px;
                  color: #777;
                  position: absolute;
                  left: 10px;
                  top: 7px;
              }
              .iconfont{
                position: relative;
                top: 1px;
                font-size: 14px;
              }
              &:hover {
                  background-color: #EE7700;
                  color: #fff;
              }
          }
          span {
              // color: lighten(#000, 60%);
              .fa-icon {
                  color: lighten(#000, 80%);
              }
          }
      }
    }
}
.znl-header-contextmenu{
  &.hide{
    display: none;
  }
}

// 表内超出文字提示
.el-tooltip__popper.is-dark {
    max-width: 50%;
    background-color: #878888;
}

// ****************** vue-znl-ui 2.0样式调整 **********************
.base-flex-grid{
  display: flex;
  flex-direction: column;
  .footer {
    position: relative;
  }
  .table-container{
    &:focus{
      outline: none!important;
    }
  }
  .table-container{
    flex: 1;
    display: flex;
    flex-direction: column;
    .el-table{
      flex: 1;
      // 表头
      .el-table__header-wrapper, .el-table__fixed-header-wrapper{
        .el-input__suffix{
          right: 0;
          .is-show-close{
            top: 6px;
            right: 0;
          }
        }
      }
      // 表格编辑
      .znl-editinput{
        position: absolute;
        width: 100%;
        font-size: 12px;
        top: 0px;
        left: 0px;
        right: 0;
        bottom: 0;
        border: none;                      
        box-sizing: border-box;
        outline: none;
        z-index: 2;
        padding: 0 3px;
        background-color: #fff;
        div, input{
          height: 22px!important;
          line-height: 22px;
          font-size: 12px;
        }
        .el-input__inner{
          padding-left: 3px;
          box-sizing: border-box;
        }
        &.idEditSelect{
          padding: 0;
        }
      }
      .el-table__fixed{
        bottom: 0!important;
        .el-table__fixed-body-wrapper{
          max-height: none!important;
        }
      }
      // 表格外边框
      &.isFieldsSearchLine{
        border-top: 1px solid #ED9E00!important;
      }
    }
  }
  .footer{
    height: 32px;
    
  }
}
.znl-hover-row{
  background-color: #f0f0f0!important;
}
.EditInputContainer{
  position: fixed;
  display: none;
  overflow: hidden;
  top: -50%;
  left: -50%;
}
.znl-btnMouseEnterMenus.wj-right-menu{
  .menu-item{
    color: #000;
  }
  &.hide{
    display: none;
  }
}
.resize-triggers{
  animation: none!important;
}

// 选择列
.table-selection{
  .cell{
    position: relative;
    padding: 0!important;
    text-align: center;
  }
}
// element表头单元格
.znl-table-header_element-cell{
  border-bottom: none!important;
  .cell{
    padding: 0!important;
    position: relative;
    height: 56px;
  }
  &.table-selection{
    .cell{
      padding: 0!important;
      .el-checkbox__inner{
        transition: none;
        &::after{
          transition: none;
        }
      }
      .el-checkbox{
        top: 30px;
        left: 1px;
        .el-checkbox__input{
          border: none;
          &.is-indeterminate{
            .el-checkbox__inner{
              background-color: #fff;
              border-color: #fff;
            }
          }
        }
        &.is-checked{
          .el-checkbox__input{
            .el-checkbox__inner{
              background-color: #EE7700;
              border: none;
              &::after{
                border-width: 2px; 
                top: 0;
                width: 3px;
                height: 7px;
                transform: rotate(45deg) scale(0.8);
              }
            }
          }
        }
      }
      .selection-moremode{
        position: relative;
        top: 30px;
        font-size: 10px;
        cursor: pointer;
      }
      &::before{
        position: absolute;
        content: '';
        width: 100%;
        height: 28px;
        left: 0;
        bottom: 0;
        background-color: #525A66;
      }
    }
  }
  &.visible-column{
    .header-label{
      background-color: #666;
    }
  }
}
// 快捷操作列
// .znl-shortcut-column{
//   // width: 16px;
//   // height: 16px;
//   // border-radius: 50%;
//   // text-align: center;
//   // position: absolute;
//   // background-color: #ED9E00;
//   // color: #fff;
//   // top: 6px;
//   // right: 6px;
//   // cursor: pointer;
//   .el-table td,
//   .el-table--border td{
//     border: none;
//   }
// }
.el-table,
.el-table--border{
  td.znl-shortcut-column,
  th.znl-shortcut-column{
    border: none;
  }
  td.znl-shortcut-column{
    display: none;
  }
  th.znl-shortcut-column{
    cursor: pointer;
    span{
      display: inline-block;
      width: 100%;
      height: 100%;
      line-height: 28px;
      &:hover{
        background-color: #ddd;
      }
    }
    &.has-search-row{
      span{
        line-height: 56px;
      }
    }
  }
}
// 封装表头单元格
.znl-cell-header{
  height: 56px;
  padding: 0;
  display: block!important;
  padding: 0 0!important;
  // 搜索/标题
  .search-input, .header-label{
    height: 28px;
    display: block;
    padding: 0 0px;
    line-height: 28px;
  }
  .search-input{
    background-color: #fff;
    border-radius: 1px;
    // 下拉
    .el-select{
      width: 100%;
      padding: 0;
    }
    // input
    .el-input{
      height: 28px;
      line-height: 28px;
      padding: 0;
      .el-input__inner{
        padding: 0 5px;
        height: 28px;
        line-height: 28px;
        border: none;
        border-radius: 0;
      }
    }
    // 日期
    .el-date-editor{
      padding: 0;
      height: 28px;
      line-height: 28px;
      width: 100%;
      border: none;
      font-size: 12px;
      .el-range-input{
        padding: 0 5px;
        height: 29px;
        line-height: 28px;
        font-size: 12px;
        width: 100%;
        padding: 0;
        border: none;
      }
      // 中间短线
      .el-range-separator{
        height: 28px;
        line-height: 28px;
      }
      // 不显示日期图标
      .el-icon-date{
        display: none;
      }
      .el-range__close-icon{
        position: absolute;
        top: 0;
        right: 0;
      }
    }
    .el-select, .el-input, .el-date-editor{ // 下拉/input/日期统一样式
      &.hasValue{
        background-color: #FFf0e0;
        input{
          background-color: #FFf0e0;
        }
      }
      // hover显示关闭按钮
      &.hasValue{
        &:hover{
          .el-input__suffix{
            display: inline-block;
          }
        }
      }
      // 只读列不显示关闭按钮
      &.input-readonly:hover{
        .el-input__suffix{
          display: none;
        }
      }
      // 关闭按钮
      .el-input__suffix{
        display: none;
      }
    }
  }
  .header-label{
    padding: 0 5px;
    background-color: #525A66;
    color: #fff;
    font-weight: 500;
    font-size: 12px;
  }
  .znl-header_dragin{
    background-color: #ccc;
    color: #000;
  }
}
// element单元格
.znl-table_element-cell{
  border-bottom: 1px solid #E6E6E6;
  border-right: 1px solid #E6E6E6;
  .cell{
    padding: 0!important;
    min-width: 30px!important;
    position: relative;
  }
}
// 封装单元格
.znl-tablecell{
  padding: 0 5px;
  outline: none;
  position: relative;
  width: 100%;
  top: 0px;
  left: 0px;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  color: #000;
  &.cellDataChange{
    background-color: #ffe174;
  }
  .el-input__inner{
    border: none;
    padding: 0;
  }
  &.isEditing{
    border: 2px solid #ED9E00!important;
    line-height: 24px;
    padding: 0 3px;
  }
  // 编辑错误图标
  &.znl-errDataType{
    .icon-errdataType{
      display: block;
    }
  }
  // 编辑日期
  .el-date-editor{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 24px;
    .el-input__inner{
      height: 24px;
      font-size: 12px;
      position: absolute;
      padding: 0 3px;
    }
    .el-input__prefix, .el-input__suffix{
      display: none;
    }
  }
  
  // 编辑按钮
  .cellEditBtn{
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.4);
    display: none;
  }
  // 错误按钮
  .icon-errdataType{
    position: absolute;
    right: 3px;
    top: 0px;
    color: #ED1C24;
    cursor: pointer;
    display: none;
  }
  // 选择列
  &.CheckedColumn{
    text-align: center;
    .el-checkbox, .el-checkbox__input{
      .el-checkbox__inner{
        &:after{
          left: 4px;
          top: 0px;
          border-width: 1px;
        }
      }
    }
  }
  &.is-left{
    text-align: left;
  }
  &.is-center{
    text-align: center;
  }
  &.is-right{
    text-align: right;
  }
}
 // 编辑单元格
.znl-editing{
  .znl-tablecell{
    border: 2px solid #ED9E00;
    line-height: 24px;
    padding: 0 3px;
  }
}
// 无搜索栏
.znl-table_nosearch-line{
  .znl-table-header_element-cell{
    .cell{
      height: 28px;
    }
    &.table-selection{
      .cell{
        .el-checkbox, .selection-moremode{
          top: 3px;
        }
      }
    }
  }
}
// 当前单元格
.znl-current-cell{
  .znl-tablecell{
    border: 2px solid #1777E6;
    line-height: 24px;
    padding: 0 3px;
    // 编辑按钮
    &:hover{
      .cellEditBtn{
        display: block;
      }
    }
    &.znl-errDataType{
      .icon-errdataType{
        right: 1px;
      }
    }
  }
}
// 只读
.znl-is-read-only{
  background-color: #F5F5F5;
}
// 合计行
.has-gutter{
  td{
    .cell{
      white-space:nowrap;
      padding: 0;
    }
  }
}

// 分页器
.znl-pagination{
  display: flex;
  align-items: center;
  padding: 0;
  overflow: hidden;
  .el-pager{
    display: flex;
    align-items: center;
  }
}

// 修改列操作弹窗
.znl-change-column{
  .change-column_row{
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
  }
  .znl-dialog.el-dialog .el-dialog__body{
    padding: 20px 15px;
  }
}