.page {
  --font-regular--: normal 400 16px 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','微软雅黑',Arial,sans-serif;
  --font-medium--: normal 700 16px 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','微软雅黑',Arial,sans-serif;
  --font-bold--: normal 900 16px 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','微软雅黑',Arial,sans-serif;
  
  /* 自定义组件颜色 */
  --theme-color: #3370ff; /* rgb(51, 112, 255) */
  --theme-secondary-color1--: #4291ff;  /* rgb(66, 145, 255) */
  --theme-secondary-color2--: #14c0ff;  /* rgb(26, 103, 255) */
  --theme-secondary-color1-p27--: rgba(66, 145, 255, 0.27);

  /* 灰度级 */
  --black--: #000a1e;  /* rgb(0, 10, 30) */
  --gray-l2--: #2f384c;  /* rgb(47, 56, 76) */
  --gray-l3--: #818a9c;  /* rgb(129, 138, 156) */
  --gray-l4--: #c4c9d4;  /* rgb(192, 201, 212) */
  --gray-l5--: #f5f8ff;  /* rgb(245, 248, 255) */
  --white--: #fff;
  /* 点缀色 */
  --blue--: #827cff;
  --green--: #00d9b9;  /* rgb(0, 217, 185) */
  --yellow--: #ffc60a;  /* rgb(255, 198, 10) */
  --orange--: #ff6f0a;  /* rgb(255, 111, 10) */
  --red--: #e31937;  /* rgb(227, 25, 55) */

  --text-light-color--: var(--white--);
  --text-dark-color--: var(--black--);
  --text-black--: #606266;
  
  /*region element-plus 主题色 */
  --el-color-primary: var(--theme-color);
  --el-color-primary-light-1: var(--theme-light-2);
  --el-color-primary-light-2: var(--theme-light-3);
  --el-color-primary-light-3: var(--theme-light-5);
  --el-color-primary-light-4: var(--theme-light-6);
  --el-color-primary-light-5: var(--theme-light-8);
  --el-color-primary-light-6: var(--theme-light-A);
  --el-color-primary-light-7: var(--theme-light-C);
  --el-color-primary-light-8: var(--theme-light-E);
  --el-color-primary-light-9: var(--theme-light-F);
  /*endregion element-plus 主题色 */

  --el-border-radius-base: 2px;
}

/*region element-plus 控件相关样式 */
.el-main {
  --el-main-padding: 0;
}

.el-menu {
  --el-menu-hover-bg-color: var(--el-color-primary-light-9) !important;
  --el-menu-item-hover-fill: var(--el-color-primary-light-9) !important;
}

.el-button--primary {
  --el-button-font-color: #ffffff;
  --el-button-background-color: var(--el-color-primary);
  --el-button-border-color: var(--el-color-primary) !important;
  --el-button-hover-color: var(--el-color-primary-light-2);
  --el-button-active-color: var(--el-color-primary-light-1) !important;
  --el-button-active-font-color: #e6e6e6;
  --el-button-active-background-color: var(--el-color-primary-light-1) !important;
  --el-button-active-border-color: var(--el-color-primary-light-1) !important;
  --el-button-active-bg-color: var(--el-color-primary-light-1) !important;
}

.el-button--danger {
  --el-button-background-color: var(--red--);
  --el-button-border-color: var(--red--)
}

/* el+ 2.2.2 兼容性修改 el+ 2.2.2采用了.el-button:not(.is-text,.is-link,.el-button--text)这种写法, 会导致一些老内核不支持*/
.el-button:not(.is-text):not(.is-link):not(.el-button--text) {
  background-color: var(--el-button-bg-color);
  border: var(--el-border);
  border-color: var(--el-button-border-color);
}
/* 上面这项改了以后会导致下面这个原生样式被覆盖, 所以要把这个再加回来 */
.el-input-group__append button.el-button, .el-input-group__append button.el-button:hover, .el-input-group__prepend button.el-button, .el-input-group__prepend button.el-button:hover {
  border-color: transparent !important;
  background-color: transparent !important;
}
/* el+ 2.2.2 兼容性修改 */

.el-input {
  --el-input-border-radius: 2px;
}

.el-table thead {
  --el-table-header-bg-color: var(--black-p2--);
}

.el-dialog {
  --el-dialog-padding-primary: 10px;  
}

.el-dialog__header {
  background-color: var(--theme-color);
  margin-right: 0;
  margin-bottom: 5px;
  display: flex;
  justify-content: center;
}

.el-dialog__title {
  color: var(--text-light-color--);
}

.el-dialog__headerbtn {
  top: 3px;
  width: 42px;
  height: 42px;
}

.el-dialog__headerbtn .el-dialog__close{
  color: var(--text-light-color--);
}
.el-dialog__headerbtn:hover .el-dialog__close{
  color: var(--gray-l4--);
}

/*endregion element-plus 控件相关样式 */