html,
body {
  position: relative;
  height: 100%;
  overflow: visible;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  font-family: HarmonyOS_Sans_SC,HarmonyOS_Sans,-apple-system,BlinkMacSystemFont,PingFang SC,'Microsoft YaHei',Arial,Helvetica Neue,Helvetica,Roboto,sans-serif;
}


.clearfix:after {
  visibility: hidden;
  clear: both;
  display: block;
  content: ".";
  height: 0
}

.clearfix {
  zoom: 1
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-justify-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-align-center {
  display: flex;
  align-items: center;
}
.word-wrap {
  word-wrap: break-word;
  word-break: break-all;
}

.single-line-omission {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

::-webkit-scrollbar {
  width: 7px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background-color: rgb(0 0 0 / 5%);
}

::-webkit-scrollbar-thumb {
  background-color: rgb(144 147 153 / 30%);
  border-radius: 2px;
  box-shadow: inset 0 0 6px rgb(0 0 0 / 20%);
}

#nprogress .bar {
  background: $primaryColor !important;
}
#nprogress .spinner-icon {
  border-top-color: $primaryColor !important;
  border-left-color: $primaryColor !important;
}
#nprogress .peg {
  box-shadow: 0 0 10px $primaryColor, 0 0 5px $primaryColor !important;
}

.active-dropdown {
  .el-dropdown-menu__item.active {
    background-color: var(--el-dropdown-menuItem-hover-fill);
  }
}

.el-table  {
  .el-table__cell.add {
    background-color: #e2f7e6 !important;
    color: #606266;
    .el-input__inner {
      color: #606266 !important;
    }
  }
  .el-table__cell.delete {
    background-color: #fdeae9 !important;
    color: #606266;
  }
  .el-table__cell.edited {
    background-color: #f1d4d8 !important;
    color: #606266;
  }
  .el-table-selection-row {
    background-color: #f2f3f4;
    color: #606266;
    .el-table__cell.add {
      background-color: #d0e2d8 !important;
    }
    .el-table__cell.delete {
      background-color: #e5d7d9 !important;
    }
  }
}

html.dark {
  .el-table  {
    .el-table__cell.add {
      background-color: #7dbd89 !important;
      .el-select__placeholder {
        color: #606266 !important;
      }
    }
    .el-table-selection-row {
      .el-table__cell.add {
        color: #000;
        background-color: #186A3B !important;
      }
    }
  }
}

.common-dialog-wrapper {
  .el-dialog__body {
    padding-top: 5px;
    padding-bottom: 10px;
  }
}

.splitpanes.default-theme {
  .splitpanes__pane{
    background: none;
  }
  .splitpanes__splitter {
    background: none;
    &:before, &:after {
      background-color: #d8d8d8
    }
    &:hover:before, &:hover:after {
      background-color: var(--el-color-primary);
    }
  }
}

.form-item-tooltip {
  max-width: 350px;
}

.my-snippets-drawer {
  .el-drawer__header {
    margin-bottom: 0;
  }
}