@charset "UTF-8";
:root {
  --global-bg-color: '';
  /* 初始背景颜色 */
}

/* $sideBarWidth: vertical 模式下主体内容距离网页文档左侧的距离 */
body[layout="vertical"] {
  /*   // 默认 */
  /* // 子菜单背景 */
  /* // 子菜单before */
  /* // $menuText: rgb(254 254 254 / 65%); */
  /* // 菜单文字 */
  --el-menu-base-level-padding: 24px !important;
  --el-menu-level-padding: 24px !important;
  /* vertical 菜单折叠 */
  /* horizontal 菜单 */
  /* 横向头 */
  /*    .sidebar-logo-container {
     background: #002140;
   } */
  /* 搜索 */
}

body[layout="vertical"] .krp-sub-menu-icon {
  margin-right: 5px;
  font-size: 18px;
  opacity: .65;

}

body[layout="vertical"] .krp-sub-menu-icon svg {
  width: 18px;
  height: 18px;
  opacity: .65;

}

body[layout="vertical"] .set-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 48px;
  cursor: pointer;
}

body[layout="vertical"] .main-container-wai {
  position: relative;
  height: 100vh;
  min-height: 100%;
  margin-left: 184px;
  background: #f0f2f5;
  /* main-content 属性动画 */
  transition: margin-left var(--pure-transition-duration);
}

body[layout="vertical"] .main-container-wai .el-scrollbar__wrap {
  height: 100%;
  overflow: auto;
}

body[layout="vertical"] .fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 998;
  width: calc(100% - 184px);
  /* fixed-header 属性左上角动画 */
  transition: width var(--pure-transition-duration);
}

body[layout="vertical"] .main-hidden {
  margin-left: 0 !important;
}

body[layout="vertical"] .main-hidden .fixed-header {
  width: 100% !important;
}

body[layout="vertical"] .main-hidden .fixed-header + .app-main {
  padding-top: 37px !important;
}

body[layout="vertical"] .krp-sidebar-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1001;
  width: 184px !important;
  height: 100%;
  overflow: hidden;
  font-size: 14px;
  background: var(--menu-color);
  box-shadow: 0 0 1px #888;
  /* 展开动画 */
  transition: width var(--pure-transition-duration);
  /*     a {
      display: inline-block;
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      padding-left: 10px;
    } */
  /* 有子集的激活菜单左侧小竖条 */
  /* 无子集的激活菜单背景 */
}
/* 移动端颜色菜单 */
body[layout="vertical"] .isMobile-sidebar-container-children {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 9999;
  width: 184px !important;
  height: 100%;
  overflow: hidden;
  font-size: 14px;
  background: #fff;
  color: #1355D7;
  box-shadow: 0 0 1px #888;
  /* 展开动画 */
  transition: width var(--pure-transition-duration);
  /*     a {
      display: inline-block;
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      padding-left: 10px;
    } */
  /* 有子集的激活菜单左侧小竖条 */
  /* 无子集的激活菜单背景 */
}
body[layout="vertical"] .krp-sidebar-container .scrollbar-wrapper {
  overflow-x: hidden !important;
}

body[layout="vertical"] .krp-sidebar-container .el-scrollbar__bar.is-vertical {
  right: 0;
}

body[layout="vertical"] .krp-sidebar-container .el-scrollbar {
  height: calc(100% - 44px);
}

body[layout="vertical"] .krp-sidebar-container.has-logo .el-scrollbar.pc {
  /* logo: 48px、leftCollapse: 40px、leftCollapse-shadow: 4px */
  height: calc(100% - 100px);
}

body[layout="vertical"] .krp-sidebar-container.has-logo .el-scrollbar.mobile {
  height: 100%;
}

body[layout="vertical"] .krp-sidebar-container .is-horizontal {
  display: none;
}

body[layout="vertical"] .krp-sidebar-container .hidelogo img {
  margin: 0 auto;
  display: block;
  width: 32px;
  height: 56px;
}

body[layout="vertical"] .krp-sidebar-container .el-menu {
  height: 100%;
  background-color: transparent !important;
  border: none;
}

body[layout="vertical"] .krp-sidebar-container .el-menu-item,
body[layout="vertical"] .krp-sidebar-container .el-sub-menu__title {
  height: 40px;
  color: #fff;
  background-color: transparent !important;
}
.el-menu--popup{
  padding: 0 !important;
}

body[layout="vertical"] .krp-sidebar-container .el-menu-item div,
body[layout="vertical"] .krp-sidebar-container .el-menu-item span,
body[layout="vertical"] .krp-sidebar-container .el-sub-menu__title div,
body[layout="vertical"] .krp-sidebar-container .el-sub-menu__title span {
  height: 40px;
  line-height: 40px;
}

body[layout="vertical"] .krp-sidebar-container .is-active > .el-sub-menu__title,
body[layout="vertical"] .krp-sidebar-container .is-active.submenu-title-noDropdown {
  color: #fff !important;
}

body[layout="vertical"] .krp-sidebar-container .is-active > .el-sub-menu__title i,
body[layout="vertical"] .krp-sidebar-container .is-active.submenu-title-noDropdown i {
  color: #fff !important;
}

body[layout="vertical"] .krp-sidebar-container .is-active {
  color: #fff !important;
  transition: color 0.3s;
}

body[layout="vertical"] .krp-sidebar-container .el-menu-item.is-active.nest-menu > * {
  z-index: 1;
  color: #fff;
}

body[layout="vertical"] .krp-sidebar-container .el-menu-item.is-active.nest-menu::before {
  position: absolute;
  inset: 0 8px;
  margin: 4px 0;
  clear: both;
  content: "";
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: var(--color-bg-radius) !important;
}

body[layout="vertical"] .krp-sidebar-container .el-menu .el-menu--inline .el-sub-menu__title, body[layout="vertical"] .krp-sidebar-container .el-sub-menu .el-menu-item {
  max-width: 184px !important;
  overflow: hidden;
  /* // background-color: $subMenuBg !important; */
}

body[layout="vertical"] .krp-sidebar-container .el-menu--collapse .is-active.outer-most.el-sub-menu > .el-sub-menu__title::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  clear: both;
  content: "";
  background-color:var(--global-color) !important;
  transition: all var(--pure-transition-duration) ease-in-out;
  transform: translateY(0);
}
body[layout="vertical"] .krp-sidebar-container .el-menu--collapse .outer-most.el-sub-menu > .el-sub-menu__title:hover::before {

}
body[layout="vertical"] .krp-sidebar-container .el-menu--collapse .outer-most.el-sub-menu > .el-sub-menu__title::before {
  position: absolute;
  top: 50%;
  display: block;
  width: 3px;
  height: 0;
  content: "";
  color: #fff;
  background: var(--color-theme-subMenuBf);
  transform: translateY(-50%);
}

body[layout="vertical"] .krp-sidebar-container .is-active.submenu-title-noDropdown.outer-most > * {
  z-index: 1;
  color: #fff;
}

body[layout="vertical"] .krp-sidebar-container .is-active.submenu-title-noDropdown.outer-most::before {
  position: absolute;
  inset: 0 8px;
  margin: 4px 0;
  clear: both;
  content: "";
  background: var(--color-theme-subMenuBf) !important;
  border-radius: var(--color-bg-radius) !important;
}
/* 展开菜单 */
/* 二级三级菜单移入颜色*/
body[layout="vertical"] .krp-sidebar-container .outer-most .el-menu .el-menu-item:hover::before,
body[layout="vertical"] .krp-sidebar-container .outer-most .el-menu .el-menu-item.is-active:before {
  position: absolute;
  inset: 0 8px;
  margin: 4px 0;
  clear: both;
  content: "";
  background: rgba(255, 255, 255, 0.06) ;
  border-radius: var(--color-bg-radius) !important;
}
/* 选中子集父级菜单高亮 */
body[layout="vertical"] .krp-sidebar-container .is-active.outer-most>.el-sub-menu__title::before {
  position: absolute;
  inset: 0 8px;
  margin: 4px 0;
  clear: both;
  content: "";
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: var(--color-bg-radius) !important;
}
body[layout="vertical"] .krp-sidebar-container .is-active.outer-most .is-active>.el-sub-menu__title::before {
  position: absolute;
  inset: 0 8px;
  margin: 4px 0;
  clear: both;
  content: "";
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: var(--color-bg-radius) !important;
}
/* 鼠标移入有一级菜单有子集上出现背景色 */
body[layout="vertical"] .krp-sidebar-container .outer-most .el-sub-menu__title:hover::before ,
body[layout="vertical"] .krp-sidebar-container .outer-most .is-opened > .el-sub-menu__title::before ,
body[layout="vertical"] .krp-sidebar-container .popover_menu_item-active .el-sub-menu__title::before,
body[layout="vertical"] .krp-sidebar-container .outer-most .el-menu-item:hover::before ,
body[layout="vertical"] .krp-sidebar-container .outer-most .el-menu-item.is-active::before {
  position: absolute;
  inset: 0 8px;
  margin: 4px 0;
  clear: both;
  content: "";
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: var(--color-bg-radius) !important;
}

/* 收起菜单 */
/* 二级三级菜单移入颜色*/
body[layout="vertical"] .el-popper .el-menu--vertical .el-menu-item.nest-menu:hover::before,
body[layout="vertical"] .krp-sidebar-container .popover_menu_item-active2::before {
  position: absolute;
  inset: 0 8px;
  margin: 4px 0;
  clear: both;
  content: "";
  background: rgba(255, 255, 255, 0.06) ;
  border-radius: var(--color-bg-radius) !important;
}
body[layout="vertical"] .el-popper .el-menu--vertical .el-sub-menu.is-active.nest-menu .el-sub-menu__title::before{
  position: absolute;
  inset: 0 8px;
  margin: 4px 0;
  clear: both;
  content: "";
  background: rgba(255, 255, 255, 0.06) ;
  border-radius: var(--color-bg-radius) !important;
}
body[layout="vertical"] .el-popper .el-menu--vertical .el-sub-menu.nest-menu .el-sub-menu__title:hover::before{
  position: absolute;
  inset: 0 8px;
  margin: 4px 0;
  clear: both;
  content: "";
  background: rgba(255, 255, 255, 0.06) ;
  border-radius: var(--color-bg-radius) !important;
}
/* 选中子集父级菜单高亮 */
body[layout="vertical"] .el-menu--collapse .is-active.outer-most>.el-sub-menu__title::before {
  position: absolute;
  inset: 0 8px;
  margin: 4px 0;
  clear: both;
  content: "";
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: var(--color-bg-radius) !important;
}


/* 选中使父级菜单图标高亮 */
body[layout="vertical"] .krp-sidebar-container .is-active.outer-most>.el-sub-menu__title .krp-sub-menu-icon,
body[layout="vertical"] .krp-sidebar-container .is-active.outer-most>.el-menu .is-active .el-sub-menu__title .krp-sub-menu-icon,
body[layout="vertical"] .krp-sidebar-container .is-active.outer-most .el-sub-menu__icon-arrow,
body[layout="vertical"] .krp-sidebar-container .is-active.submenu-title-noDropdown.outer-most .krp-sub-menu-icon {
  opacity: 1 !important;
}

body[layout="vertical"] .krp-sidebar-container .li::before:hover  {
  background-color: red !important;
}
body[layout="vertical"] .krp-children_width {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  color: #fff;
}
/* 移动端子菜单 */
body[layout="vertical"] .isMobile-sidebar-container-children .krp-children_width { 
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  color: rgba(0, 0, 0, 0.85);
  z-index: 99999;
}
body[layout="vertical"] .isMobile-sidebar-container-children .is-active.submenu-title-noDropdown .krp-children_width { 
  color: #0f58d6;
}
/* body[layout="vertical"] .krp-sidebar-container .el-menu--collapse>.is-opened::after {
  position: absolute;
  inset: 0 8px;
  margin: 4px 0;
  clear: both;
  content: "";
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: var(--color-bg-radius) !important;
} */
body[layout="vertical"] .krp-loge-bg-before::before {
  position: absolute;
  content: '';
  width: 210px;
  height: 210px;
  left: 0;
  bottom: 0px;
  /* background-image: url(../buttom-logo.svg); */
  background-repeat: no-repeat;
}

body[layout="vertical"] .sidebar-logo-container {
  position: relative;
  /* // width: 100%;
    // height: 48px; */
  text-align: left;
  overflow: hidden;
  padding-top: 21px;
  padding-left: 20px;
  padding-bottom: 8px;
}

body[layout="vertical"] .sidebar-logo-container img {
  width: 137px;
  height: 28px;
}

body[layout="vertical"] .sidebar-logo-container .sidebar-title {
  display: inline-block;
  height: 32px;
  margin: 2px 0 0 12px;
  overflow: hidden;
  font-size: 18px;
  font-weight: 600;
  line-height: 32px;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[layout="vertical"] .el-menu--vertical {
  /* 子菜单中还有子菜单 */
}

body[layout="vertical"] .el-menu--vertical > .el-menu i {
  margin-right: 20px;
}

body[layout="vertical"] .el-menu--vertical .is-active > .el-sub-menu__title,
body[layout="vertical"] .el-menu--vertical .is-active.submenu-title-noDropdown {
  color: #fff !important;
}
body[layout="vertical"] .isMobile-sidebar-container-children .el-menu--vertical .is-active > .el-sub-menu__title {
  color: rgb(48, 49, 51) !important;
}
body[layout="vertical"] .isMobile-sidebar-container-children .el-menu--vertical .is-active.el-menu-item .krp-children_width,
body[layout="vertical"] .isMobile-sidebar-container-children .el-menu--vertical .is-active.submenu-title-noDropdown {
  color: #0f58d6 !important;
}
body[layout="vertical"] .isMobile-sidebar-container-children .el-menu--vertical .is-active.el-menu-item .krp-sub-menu-icon {
  color: #0f58d6
}

body[layout="vertical"] .el-menu--vertical .is-active > .el-sub-menu__title i,
body[layout="vertical"] .el-menu--vertical .is-active.submenu-title-noDropdown i {
  color: #fff !important;
}
body[layout="vertical"] .isMobile-sidebar-container-children .el-menu--vertical .is-active > .el-sub-menu__title i {
  color: rgb(48, 49, 51) !important;
}
body[layout="vertical"] .isMobile-sidebar-container-children .el-menu--vertical .is-active.submenu-title-noDropdown i {
  color: #0f58d6 !important;
}

body[layout="vertical"] .el-menu--vertical .el-menu .el-sub-menu__title {
  min-width: 184px !important;
}

body[layout="vertical"] .el-menu--vertical .el-menu-item,
body[layout="vertical"] .el-menu--vertical .el-sub-menu__title {
  height: 48px;
  line-height: 48px;
  /* color: #fff; */
  background: var(--global-bg-color) !important;
}

body[layout="vertical"] .el-menu--vertical .is-active {
  color: #fff !important;
  transition: color 0.3s;
}

body[layout="vertical"] .el-menu--vertical .el-menu-item.is-active.nest-menu > * {
  z-index: 1;
  color: #fff;
}

body[layout="vertical"] .el-menu--vertical .el-menu-item.is-active.nest-menu::before {
  position: absolute;
  inset: 0 8px;
  margin: 4px 0;
  clear: both;
  content: "";
  color: #fff !important;
  background: var(--color-theme-subMenuBf) !important;
  border-radius: var(--color-bg-radius);
}

body[layout="vertical"] .el-menu--vertical .el-menu-item .iconfont,
body[layout="vertical"] .el-menu--vertical .el-sub-menu .iconfont {
  font-size: 18px;
}

body[layout="vertical"] .el-menu--vertical .el-menu-item .el-menu-tooltip__trigger,
body[layout="vertical"] .el-menu--vertical .el-sub-menu .el-menu-tooltip__trigger,
body[layout="vertical"] .el-menu--vertical .popover-submenu-iscollapse  .el-tooltip__trigger{
  width: 54px;
  padding: 0;
}

body[layout="vertical"] .el-menu--vertical .el-menu--popup {
  background: var(--menu-color) !important;
}
body[layout="vertical"] .el-menu--vertical .el-menu--popup .el-menu-item span {
  /* color: #002140; */
  color: #fff;
}
/* 覆盖选中状态下的箭头样式 */
body[layout="vertical"] .el-menu--vertical .el-sub-menu .el-sub-menu__title .el-sub-menu__icon-arrow {
  opacity: 0.65;
  color: #fff;
}
body[layout="vertical"] .isMobile-sidebar-container-children .el-menu--vertical .el-sub-menu .el-sub-menu__title .el-sub-menu__icon-arrow {
  color: rgba(0, 0, 0, 0.85);
}
body[layout="vertical"] .isMobile-sidebar-container-children .el-menu--vertical .el-sub-menu .el-sub-menu__title .el-sub-menu__icon-arrow {
  color: rgba(0, 0, 0, 0.85);
}

body[layout="vertical"] .el-menu--horizontal > .el-sub-menu .el-sub-menu__icon-arrow {
  position: static !important;
  margin-top: 0;
}

body[layout="vertical"] .el-menu--horizontal > .el-sub-menu .el-sub-menu__title:hover {
  background-color: transparent !important;
}

body[layout="vertical"] .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  background-color: transparent !important;
}

body[layout="vertical"] .el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
  background-color: transparent !important;
  color: #fff !important;
}

body[layout="vertical"] .el-menu--horizontal .el-menu--popup {
  background: var(--global-bg-color);
}

body[layout="vertical"] .el-menu--horizontal .el-menu--popup .el-menu-item {
  color: #002140;
  background: var(--global-bg-color) !important;
}

body[layout="vertical"] .el-menu--horizontal .el-menu--popup .el-menu-item span {
  font-size: 12px;
}

body[layout="vertical"] .el-menu--horizontal .el-menu--popup .el-sub-menu__title {
  color: #002140;
}

body[layout="vertical"] .el-menu--horizontal .router-link-exact-active > .submenu-title-noDropdown {
  height: 60px;
  border-bottom: 2px solid var(--el-menu-active-color);
}

body[layout="vertical"] .el-menu--horizontal .el-menu .el-sub-menu__title {
  min-width: 184px !important;
  font-size: 12px;
  background: var(--global-bg-color) !important;
}

body[layout="vertical"] .el-menu--horizontal .is-active > .el-sub-menu__title,
body[layout="vertical"] .el-menu--horizontal .is-active.submenu-title-noDropdown {
  color: #fff !important;
}

body[layout="vertical"] .el-menu--horizontal .is-active > .el-sub-menu__title i,
body[layout="vertical"] .el-menu--horizontal .is-active.submenu-title-noDropdown i {
  color: #fff !important;
}

body[layout="vertical"] .el-menu--horizontal .nest-menu .el-sub-menu > .el-sub-menu__title:hover,
body[layout="vertical"] .el-menu--horizontal .el-menu-item:hover {
  color: #fff !important;
}

body[layout="vertical"] .el-menu--horizontal .el-menu-item.is-active {
  color: #fff !important;
  transition: color 0.3s;
}

body[layout="vertical"] .el-menu--horizontal .el-menu-item.is-active.nest-menu > * {
  z-index: 1;
  color: #fff;
}

body[layout="vertical"] .el-menu--horizontal .el-menu-item.is-active.nest-menu::before {
  position: absolute;
  inset: 0 5px;
  clear: both;
  content: "";
  background: var(--color-theme-subMenuBf) !important;
  /* border-radius: 20px; */
}

body[layout="vertical"] .horizontal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 48px;
  background: linear-gradient(135deg, #774AFF 0%, #1355D7 100%);
}

body[layout="vertical"] .horizontal-header .horizontal-header-left {
  display: flex;
  align-items: center;
  width: auto;
  min-width: 200px;
  height: 100%;
  padding-left: 10px;
  cursor: pointer;
  transition: all var(--pure-transition-duration) ease;
}

body[layout="vertical"] .horizontal-header .horizontal-header-left img {
  display: inline-block;
  height: 32px;
}

body[layout="vertical"] .horizontal-header .horizontal-header-left span {
  display: inline-block;
  height: 32px;
  margin: 2px 0 0 12px;
  overflow: hidden;
  font-size: 18px;
  font-weight: 600;
  line-height: 32px;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[layout="vertical"] .horizontal-header .horizontal-header-menu {
  flex: 1;
  align-items: center;
  min-width: 0;
  height: 100%;
}

body[layout="vertical"] .horizontal-header .horizontal-header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 340px;
  color: #fff;
  /* 搜索 */
}

body[layout="vertical"] .horizontal-header .horizontal-header-right .search-container:hover,
body[layout="vertical"] .horizontal-header .horizontal-header-right .dropdown-badge:hover,
body[layout="vertical"] .horizontal-header .horizontal-header-right .el-dropdown-link:hover,
body[layout="vertical"] .horizontal-header .horizontal-header-right .set-icon:hover {
  background: #4091f7;
}

body[layout="vertical"] .horizontal-header .horizontal-header-right .dropdown-badge {
  height: 48px;
  color: #fff;
}

body[layout="vertical"] .horizontal-header .horizontal-header-right .el-dropdown-link {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 48px;
  padding: 10px;
  color: #fff;
  cursor: pointer;
}

body[layout="vertical"] .horizontal-header .horizontal-header-right .el-dropdown-link p {
  font-size: 14px;
}

body[layout="vertical"] .horizontal-header .horizontal-header-right .el-dropdown-link img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

body[layout="vertical"] .horizontal-header .el-menu {
  width: 100% !important;
  height: 100%;
  background-color: transparent;
  border: none;
}

body[layout="vertical"] .horizontal-header .el-menu-item,
body[layout="vertical"] .horizontal-header .el-sub-menu__title {
  padding-right: var(--el-menu-base-level-padding);
  color: #fff;
}


body[layout="vertical"] .horizontal-header .submenu-title-noDropdown,
body[layout="vertical"] .horizontal-header .el-sub-menu__title {
  height: 48px;
  line-height: 48px;
  /* background: $menuBg; */
}

body[layout="vertical"] .horizontal-header .submenu-title-noDropdown svg,
body[layout="vertical"] .horizontal-header .el-sub-menu__title svg {
  position: static !important;
}

body[layout="vertical"] .horizontal-header .is-active > .el-sub-menu__title,
body[layout="vertical"] .horizontal-header .is-active.submenu-title-noDropdown {
  color: #fff !important;
}

body[layout="vertical"] .horizontal-header .is-active > .el-sub-menu__title i,
body[layout="vertical"] .horizontal-header .is-active.submenu-title-noDropdown i {
  color: #fff !important;
}

body[layout="vertical"] .horizontal-header .is-active {
  color: #fff !important;
  transition: color 0.3s;
}

body[layout="vertical"] .el-menu--collapse .el-menu .el-sub-menu {
  min-width: 184px !important;
}

body[layout="vertical"] .el-menu--collapse {
  width: 54px;
}


body[layout="vertical"] .hideSidebar .fixed-header {
  width: calc(100% - 54px);
  transition: width var(--pure-transition-duration);
}

body[layout="vertical"] .hideSidebar .krp-sidebar-container {
  width: 54px !important;
  transition: width var(--pure-transition-duration);
}

body[layout="vertical"] .hideSidebar .krp-sidebar-container .is-active.submenu-title-noDropdown.outer-most {
  background: transparent !important;
}

body[layout="vertical"] .hideSidebar .main-container-wai {
  margin-left: 54px;
}

body[layout="vertical"] .hideSidebar .el-menu--collapse .el-sub-menu > .el-sub-menu__title > span {
  width: 100%;
  height: 100%;
  text-align: center;
  visibility: visible;
}

body[layout="vertical"] .hideSidebar .el-menu--collapse .submenu-title-noDropdown {
  background: transparent !important;
}

body[layout="vertical"] .hideSidebar .el-menu--collapse .el-sub-menu__title {
  padding: 0;
}

body[layout="vertical"] .hideSidebar .sub-menu-icon {
  margin-right: 0;
}

body[layout="vertical"] .isMobile .main-container-wai {
  margin-left: 0px;
}

body[layout="vertical"] .search-container:hover,
body[layout="vertical"] .dropdown-badge:hover,
body[layout="vertical"] .el-dropdown-link:hover,
body[layout="vertical"] .set-icon:hover {
  background: #f6f6f6;
}

body[layout="horizontal"] {
  /*   // 默认 */
  /* // 子菜单背景 */
  /* // 子菜单before */
  /* // $menuText: rgb(254 254 254 / 65%); */
  /* // 菜单文字 */
  --el-menu-base-level-padding: 24px !important;
  --el-menu-level-padding: 24px !important;
  /* vertical 菜单折叠 */
  /* horizontal 菜单 */
  /* 横向头 */
}

body[layout="horizontal"] .krp-sub-menu-icon {
  margin-right: 5px;
  font-size: 18px;
}

body[layout="horizontal"] .krp-sub-menu-icon svg {
  width: 18px;
  height: 18px;
  opacity: .65;

}

body[layout="horizontal"] .set-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 48px;
  cursor: pointer;
}

body[layout="horizontal"] .main-container-wai {
  position: relative;
  height: 100vh;
  min-height: 100%;
  margin-left: 0;
  background: #f0f2f5;
  /* main-content 属性动画 */
  transition: margin-left var(--pure-transition-duration);
}

body[layout="horizontal"] .main-container-wai .el-scrollbar__wrap {
  height: 100%;
  overflow: auto;
}

body[layout="horizontal"] .fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 998;
  width: calc(100% - 184px);
  /* fixed-header 属性左上角动画 */
  transition: width var(--pure-transition-duration);
}

body[layout="horizontal"] .main-hidden {
  margin-left: 0 !important;
}

body[layout="horizontal"] .main-hidden .fixed-header {
  width: 100% !important;
}

body[layout="horizontal"] .main-hidden .fixed-header + .app-main {
  padding-top: 37px !important;
}

body[layout="horizontal"] .krp-sidebar-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1001;
  width: 0 !important;
  height: 100%;
  overflow: hidden;
  font-size: 14px;
  background: linear-gradient(135deg, #774AFF 0%, #1355D7 100%);
  box-shadow: 0 0 1px #888;
  /* 展开动画 */
  transition: width var(--pure-transition-duration);
  /*     a {
      display: inline-block;
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      padding-left: 10px;
    } */
  /* 有子集的激活菜单左侧小竖条 */
  /* 无子集的激活菜单背景 */
}

body[layout="horizontal"] .krp-sidebar-container .scrollbar-wrapper {
  overflow-x: hidden !important;
}

body[layout="horizontal"] .krp-sidebar-container .el-scrollbar__bar.is-vertical {
  right: 0;
}

body[layout="horizontal"] .krp-sidebar-container .el-scrollbar {
  height: calc(100% - 44px);
}

body[layout="horizontal"] .krp-sidebar-container.has-logo .el-scrollbar.pc {
  /* logo: 48px、leftCollapse: 40px、leftCollapse-shadow: 4px */
  height: calc(100% - 100px);
}

body[layout="horizontal"] .krp-sidebar-container.has-logo .el-scrollbar.mobile {
  height: 100%;
}

body[layout="horizontal"] .krp-sidebar-container .is-horizontal {
  display: none;
}

body[layout="horizontal"] .krp-sidebar-container .hidelogo img {
  margin: 0 auto;
  display: block;
  width: 32px;
  height: 56px;
}

body[layout="horizontal"] .krp-sidebar-container .el-menu {
  height: 100%;
  background-color: transparent !important;
  border: none;
}

body[layout="horizontal"] .krp-sidebar-container .el-menu-item,
body[layout="horizontal"] .krp-sidebar-container .el-sub-menu__title {
  height: 40px;
  color: #fff;
  background-color: transparent !important;
}

body[layout="horizontal"] .krp-sidebar-container .el-menu-item:hover,
body[layout="horizontal"] .krp-sidebar-container .el-sub-menu__title:hover {
  color: #fff !important;
}

body[layout="horizontal"] .krp-sidebar-container .el-menu-item div,
body[layout="horizontal"] .krp-sidebar-container .el-menu-item span,
body[layout="horizontal"] .krp-sidebar-container .el-sub-menu__title div,
body[layout="horizontal"] .krp-sidebar-container .el-sub-menu__title span {
  height: 40px;
  line-height: 40px;
}

body[layout="horizontal"] .krp-sidebar-container .submenu-title-noDropdown:hover,
body[layout="horizontal"] .krp-sidebar-container .el-sub-menu__title:hover {
  background-color: transparent;
}

body[layout="horizontal"] .krp-sidebar-container .is-active > .el-sub-menu__title,
body[layout="horizontal"] .krp-sidebar-container .is-active.submenu-title-noDropdown {
  color: #fff !important;
}

body[layout="horizontal"] .krp-sidebar-container .is-active > .el-sub-menu__title i,
body[layout="horizontal"] .krp-sidebar-container .is-active.submenu-title-noDropdown i {
  color: #fff !important;
}

body[layout="horizontal"] .krp-sidebar-container .is-active {
  color: #fff !important;
  transition: color 0.3s;
}

body[layout="horizontal"] .krp-sidebar-container .el-menu-item.is-active.nest-menu > * {
  z-index: 1;
  color: #fff;
}

body[layout="horizontal"] .krp-sidebar-container .el-menu-item.is-active.nest-menu::before {
  position: absolute;
  inset: 0 8px;
  margin: 4px 0;
  clear: both;
  content: "";
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: var(--color-bg-radius) !important;
}

body[layout="horizontal"] .krp-sidebar-container .el-menu .el-menu--inline .el-sub-menu__title, body[layout="horizontal"] .krp-sidebar-container .el-sub-menu .el-menu-item {
  max-width: 0 !important;
  overflow: hidden;
  /* // background-color: $subMenuBg !important; */
}

body[layout="horizontal"] .krp-sidebar-container .el-menu--collapse
.is-active.outer-most.el-sub-menu
> .el-sub-menu__title::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  clear: both;
  content: "";
  background-color: var(--global-color) !important;
  transition: all var(--pure-transition-duration) ease-in-out;
  transform: translateY(0);
}

body[layout="horizontal"] .krp-sidebar-container .el-menu--collapse .outer-most.el-sub-menu > .el-sub-menu__title::before {
  position: absolute;
  top: 50%;
  display: block;
  width: 3px;
  height: 0;
  content: "";
  color: #fff;
  background: var(--color-theme-subMenuBf);
  transform: translateY(-50%);
}

body[layout="horizontal"] .krp-sidebar-container .is-active.submenu-title-noDropdown.outer-most > * {
  z-index: 1;
  color: #fff;
}

body[layout="horizontal"] .krp-sidebar-container .is-active.submenu-title-noDropdown.outer-most::before {
  position: absolute;
  inset: 0 8px;
  margin: 4px 0;
  clear: both;
  content: "";
  background: var(--color-theme-subMenuBf) !important;
  border-radius: var(--color-bg-radius) !important;
}

body[layout="horizontal"] .krp-children_width {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

body[layout="horizontal"] .krp-loge-bg-before::before {
  position: absolute;
  content: '';
  width: 210px;
  height: 210px;
  left: 0;
  bottom: 0px;
  background-image: url(./base/img/buttom-logo.svg);
  background-repeat: no-repeat;
}

body[layout="horizontal"] .sidebar-logo-container {
  position: relative;
  /* // width: 100%;
    // height: 48px; */
  text-align: left;
  overflow: hidden;
  padding-top: 21px;
  padding-left: 20px;
  padding-bottom: 8px;
}

body[layout="horizontal"] .sidebar-logo-container img {
  width: 137px;
  height: 28px;
}

body[layout="horizontal"] .sidebar-logo-container .sidebar-title {
  display: inline-block;
  height: 32px;
  margin: 2px 0 0 12px;
  overflow: hidden;
  font-size: 18px;
  font-weight: 600;
  line-height: 32px;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[layout="horizontal"] .el-menu--vertical > .el-menu i {
  margin-right: 20px;
}

body[layout="horizontal"] .el-menu--vertical .is-active > .el-sub-menu__title,
body[layout="horizontal"] .el-menu--vertical .is-active.submenu-title-noDropdown {
  color: #fff !important;
}

body[layout="horizontal"] .el-menu--vertical .is-active > .el-sub-menu__title i,
body[layout="horizontal"] .el-menu--vertical .is-active.submenu-title-noDropdown i {
  color: #fff !important;
}

body[layout="horizontal"] .el-menu--vertical .el-menu .el-sub-menu__title {
  min-width: 0 !important;
}

body[layout="horizontal"] .el-menu--vertical .el-menu-item,
body[layout="horizontal"] .el-menu--vertical .el-sub-menu__title {
  height: 48px;
  line-height: 48px;
  color: #fff;
  background: var(--global-bg-color) !important;
}

body[layout="horizontal"] .el-menu--vertical .el-menu-item:hover,
body[layout="horizontal"] .el-menu--vertical .el-sub-menu__title:hover {
  color: #fff !important;
}

body[layout="horizontal"] .el-menu--vertical .is-active {
  color: #fff !important;
  transition: color 0.3s;
}

body[layout="horizontal"] .el-menu--vertical .el-menu-item.is-active.nest-menu > * {
  z-index: 1;
  color: #fff;
}

body[layout="horizontal"] .el-menu--vertical .el-menu-item.is-active.nest-menu::before {
  position: absolute;
  inset: 0 8px;
  clear: both;
  content: "";
  background: var(--color-theme-subMenuBf) !important;
  border-radius: 20px;
}

body[layout="horizontal"] .el-menu--vertical .el-menu-item .iconfont,
body[layout="horizontal"] .el-menu--vertical .el-sub-menu .iconfont {
  font-size: 18px;
}

body[layout="horizontal"] .el-menu--vertical .el-menu-item .el-menu-tooltip__trigger,
body[layout="horizontal"] .el-menu--vertical .el-sub-menu .el-menu-tooltip__trigger {
  width: 54px;
  padding: 0;
}

body[layout="horizontal"] .el-menu--vertical .el-menu--popup {
  color: #002140;
  background: var(--global-bg-color) !important;
}

body[layout="horizontal"] .el-menu--vertical .el-menu--popup .el-menu-item span {
  color: #002140;
}


body[layout="horizontal"] .el-menu--horizontal > .el-sub-menu .el-sub-menu__icon-arrow {
  position: static !important;
  margin-top: 0;
}

body[layout="horizontal"] .el-menu--horizontal > .el-sub-menu .el-sub-menu__title:hover {
  background-color: transparent !important;
}

body[layout="horizontal"] .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  background-color: transparent !important;
}

body[layout="horizontal"] .el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
  background-color: transparent !important;
  color: #fff !important;
}

body[layout="horizontal"] .el-menu--horizontal .el-menu--popup {
  background: var(--global-bg-color);
}

body[layout="horizontal"] .el-menu--horizontal .el-menu--popup .el-menu-item {
  color: #002140;
  background: var(--global-bg-color) !important;
}

body[layout="horizontal"] .el-menu--horizontal .el-menu--popup .el-menu-item span {
  font-size: 12px;
}

body[layout="horizontal"] .el-menu--horizontal .el-menu--popup .el-sub-menu__title {
  color: #002140;
}

body[layout="horizontal"] .el-menu--horizontal .router-link-exact-active > .submenu-title-noDropdown {
  height: 60px;
  border-bottom: 2px solid var(--el-menu-active-color);
}

body[layout="horizontal"] .el-menu--horizontal .el-menu .el-sub-menu__title {
  min-width: 0 !important;
  font-size: 12px;
  background: var(--global-bg-color) !important;
}

body[layout="horizontal"] .el-menu--horizontal .el-menu .el-sub-menu__title:hover {
  color: #fff !important;
}

body[layout="horizontal"] .el-menu--horizontal .is-active > .el-sub-menu__title,
body[layout="horizontal"] .el-menu--horizontal .is-active.submenu-title-noDropdown {
  color: #fff !important;
}

body[layout="horizontal"] .el-menu--horizontal .is-active > .el-sub-menu__title i,
body[layout="horizontal"] .el-menu--horizontal .is-active.submenu-title-noDropdown i {
  color: #fff !important;
}

body[layout="horizontal"] .el-menu--horizontal .nest-menu .el-sub-menu > .el-sub-menu__title:hover,
body[layout="horizontal"] .el-menu--horizontal .el-menu-item:hover {
  color: #fff !important;
}

body[layout="horizontal"] .el-menu--horizontal .el-menu-item.is-active {
  color: #fff !important;
  transition: color 0.3s;
}

body[layout="horizontal"] .el-menu--horizontal .el-menu-item.is-active.nest-menu > * {
  z-index: 1;
  color: #fff;
}

body[layout="horizontal"] .el-menu--horizontal .el-menu-item.is-active.nest-menu::before {
  position: absolute;
  inset: 0 5px;
  clear: both;
  content: "";
  background: var(--color-theme-subMenuBf) !important;
  /* border-radius: 20px; */
}

body[layout="horizontal"] .horizontal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 48px;
  background: linear-gradient(135deg, #774AFF 0%, #1355D7 100%);
}

body[layout="horizontal"] .horizontal-header .horizontal-header-left {
  display: flex;
  align-items: center;
  width: auto;
  min-width: 200px;
  height: 100%;
  padding-left: 10px;
  cursor: pointer;
  transition: all var(--pure-transition-duration) ease;
}

body[layout="horizontal"] .horizontal-header .horizontal-header-left img {
  display: inline-block;
  height: 32px;
}

body[layout="horizontal"] .horizontal-header .horizontal-header-left span {
  display: inline-block;
  height: 32px;
  margin: 2px 0 0 12px;
  overflow: hidden;
  font-size: 18px;
  font-weight: 600;
  line-height: 32px;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[layout="horizontal"] .horizontal-header .horizontal-header-menu {
  flex: 1;
  align-items: center;
  min-width: 0;
  height: 100%;
}

body[layout="horizontal"] .horizontal-header .horizontal-header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 340px;
  color: #fff;
  /* 搜索 */
}

body[layout="horizontal"] .horizontal-header .horizontal-header-right .search-container:hover,
body[layout="horizontal"] .horizontal-header .horizontal-header-right .dropdown-badge:hover,
body[layout="horizontal"] .horizontal-header .horizontal-header-right .el-dropdown-link:hover,
body[layout="horizontal"] .horizontal-header .horizontal-header-right .set-icon:hover {
  background: #4091f7;
}

body[layout="horizontal"] .horizontal-header .horizontal-header-right .dropdown-badge {
  height: 48px;
  color: #fff;
}

body[layout="horizontal"] .horizontal-header .horizontal-header-right .el-dropdown-link {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 48px;
  padding: 10px;
  color: #fff;
  cursor: pointer;
}

body[layout="horizontal"] .horizontal-header .horizontal-header-right .el-dropdown-link p {
  font-size: 14px;
}

body[layout="horizontal"] .horizontal-header .horizontal-header-right .el-dropdown-link img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

body[layout="horizontal"] .horizontal-header .el-menu {
  width: 100% !important;
  height: 100%;
  background-color: transparent;
  border: none;
}

body[layout="horizontal"] .horizontal-header .el-menu-item,
body[layout="horizontal"] .horizontal-header .el-sub-menu__title {
  padding-right: var(--el-menu-base-level-padding);
  color: #fff;
}

body[layout="horizontal"] .horizontal-header .el-menu-item:hover,
body[layout="horizontal"] .horizontal-header .el-sub-menu__title:hover {
  color: #fff !important;
}

body[layout="horizontal"] .horizontal-header .submenu-title-noDropdown,
body[layout="horizontal"] .horizontal-header .el-sub-menu__title {
  height: 48px;
  line-height: 48px;
  /* background: $menuBg; */
}

body[layout="horizontal"] .horizontal-header .submenu-title-noDropdown svg,
body[layout="horizontal"] .horizontal-header .el-sub-menu__title svg {
  position: static !important;
}

body[layout="horizontal"] .horizontal-header .is-active > .el-sub-menu__title,
body[layout="horizontal"] .horizontal-header .is-active.submenu-title-noDropdown {
  color: #fff !important;
}

body[layout="horizontal"] .horizontal-header .is-active > .el-sub-menu__title i,
body[layout="horizontal"] .horizontal-header .is-active.submenu-title-noDropdown i {
  color: #fff !important;
}

body[layout="horizontal"] .horizontal-header .is-active {
  color: #fff !important;
  transition: color 0.3s;
}

body[layout="horizontal"] .el-menu--collapse .el-menu .el-sub-menu {
  min-width: 0 !important;
}

body[layout="horizontal"] .fixed-header,
body[layout="horizontal"] .main-container-wai {
  transition: none !important;
}

body[layout="horizontal"] .fixed-header {
  width: 100%;
}

body[layout="mix"] {
  /*   // 默认 */
  /* // 子菜单背景 */
  /* // 子菜单before */
  /* // $menuText: rgb(254 254 254 / 65%); */
  /* // 菜单文字 */
  --el-menu-base-level-padding: 24px !important;
  --el-menu-level-padding: 24px !important;
  /* vertical 菜单折叠 */
  /* horizontal 菜单 */
  /* 横向头 */
}

body[layout="mix"] .krp-sub-menu-icon {
  margin-right: 5px;
  font-size: 18px;
}

body[layout="mix"] .krp-sub-menu-icon svg {
  width: 18px;
  height: 18px;
}

body[layout="mix"] .set-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 48px;
  cursor: pointer;
}

body[layout="mix"] .main-container-wai {
  position: relative;
  height: 100vh;
  min-height: 100%;
  margin-left: 180px;
  background: #f0f2f5;
  /* main-content 属性动画 */
  transition: margin-left var(--pure-transition-duration);
}

body[layout="mix"] .main-container-wai .el-scrollbar__wrap {
  height: 100%;
  overflow: auto;
}

body[layout="mix"] .fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 998;
  width: calc(100% - 184px);
  /* fixed-header 属性左上角动画 */
  transition: width var(--pure-transition-duration);
}

body[layout="mix"] .main-hidden {
  margin-left: 0 !important;
}

body[layout="mix"] .main-hidden .fixed-header {
  width: 100% !important;
}

body[layout="mix"] .main-hidden .fixed-header + .app-main {
  padding-top: 37px !important;
}

body[layout="mix"] .krp-sidebar-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1001;
  width: 180px !important;
  height: 100%;
  overflow: hidden;
  font-size: 14px;
  background: linear-gradient(135deg, #774AFF 0%, #1355D7 100%);
  box-shadow: 0 0 1px #888;
  /* 展开动画 */
  transition: width var(--pure-transition-duration);
  /*     a {
      display: inline-block;
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      padding-left: 10px;
    } */
  /* 有子集的激活菜单左侧小竖条 */
  /* 无子集的激活菜单背景 */
}

body[layout="mix"] .krp-sidebar-container .scrollbar-wrapper {
  overflow-x: hidden !important;
}

body[layout="mix"] .krp-sidebar-container .el-scrollbar__bar.is-vertical {
  right: 0;
}

body[layout="mix"] .krp-sidebar-container .el-scrollbar {
  height: calc(100% - 44px);
}

body[layout="mix"] .krp-sidebar-container.has-logo .el-scrollbar.pc {
  /* logo: 48px、leftCollapse: 40px、leftCollapse-shadow: 4px */
  height: calc(100% - 100px);
}

body[layout="mix"] .krp-sidebar-container.has-logo .el-scrollbar.mobile {
  height: 100%;
}

body[layout="mix"] .krp-sidebar-container .is-horizontal {
  display: none;
}

body[layout="mix"] .krp-sidebar-container .hidelogo img {
  margin: 0 auto;
  display: block;
  width: 32px;
  height: 56px;
}

body[layout="mix"] .krp-sidebar-container .el-menu {
  height: 100%;
  background-color: transparent !important;
  border: none;
}

body[layout="mix"] .krp-sidebar-container .el-menu-item,
body[layout="mix"] .krp-sidebar-container .el-sub-menu__title {
  height: 40px;
  color: #fff;
  background-color: transparent !important;
}

body[layout="mix"] .krp-sidebar-container .el-menu-item:hover,
body[layout="mix"] .krp-sidebar-container .el-sub-menu__title:hover {
  color: #fff !important;
}

body[layout="mix"] .krp-sidebar-container .el-menu-item div,
body[layout="mix"] .krp-sidebar-container .el-menu-item span,
body[layout="mix"] .krp-sidebar-container .el-sub-menu__title div,
body[layout="mix"] .krp-sidebar-container .el-sub-menu__title span {
  height: 40px;
  line-height: 40px;
}

body[layout="mix"] .krp-sidebar-container .submenu-title-noDropdown:hover,
body[layout="mix"] .krp-sidebar-container .el-sub-menu__title:hover {
  background-color: transparent;
}

body[layout="mix"] .krp-sidebar-container .is-active > .el-sub-menu__title,
body[layout="mix"] .krp-sidebar-container .is-active.submenu-title-noDropdown {
  color: #fff !important;
}

body[layout="mix"] .krp-sidebar-container .is-active > .el-sub-menu__title i,
body[layout="mix"] .krp-sidebar-container .is-active.submenu-title-noDropdown i {
  color: #fff !important;
}

body[layout="mix"] .krp-sidebar-container .is-active {
  color: #fff !important;
  transition: color 0.3s;
}

body[layout="mix"] .krp-sidebar-container .el-menu-item.is-active.nest-menu > * {
  z-index: 1;
  color: #fff;
}

body[layout="mix"] .krp-sidebar-container .el-menu-item.is-active.nest-menu::before {
  position: absolute;
  inset: 0 8px;
  margin: 4px 0;
  clear: both;
  content: "";
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: var(--color-bg-radius) !important;
}

body[layout="mix"] .krp-sidebar-container .el-menu .el-menu--inline .el-sub-menu__title, body[layout="mix"] .krp-sidebar-container .el-sub-menu .el-menu-item {
  max-width: 180px !important;
  overflow: hidden;
  /* // background-color: $subMenuBg !important; */
}

body[layout="mix"] .krp-sidebar-container .el-menu--collapse .is-active.outer-most.el-sub-menu > .el-sub-menu__title::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  clear: both;
  content: "";
  background-color: var(--global-color) !important;
  transition: all var(--pure-transition-duration) ease-in-out;
  transform: translateY(0);
}

body[layout="mix"] .krp-sidebar-container .el-menu--collapse .outer-most.el-sub-menu > .el-sub-menu__title::before {
  position: absolute;
  top: 50%;
  display: block;
  width: 3px;
  height: 0;
  content: "";
  color: #fff;
  background: var(--color-theme-subMenuBf);
  transform: translateY(-50%);
}

body[layout="mix"] .krp-sidebar-container .is-active.submenu-title-noDropdown.outer-most > * {
  z-index: 1;
  color: #fff;
}

body[layout="mix"] .krp-sidebar-container .is-active.submenu-title-noDropdown.outer-most::before {
  position: absolute;
  inset: 0 8px;
  margin: 4px 0;
  clear: both;
  content: "";
  background: var(--color-theme-subMenuBf) !important;
  border-radius: var(--color-bg-radius) !important;
}

body[layout="mix"] .krp-children_width {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

body[layout="mix"] .krp-loge-bg-before::before {
  position: absolute;
  content: '';
  width: 210px;
  height: 210px;
  left: 0;
  bottom: 0px;
  background-image: url(./base/img/buttom-logo.svg);
  background-repeat: no-repeat;
}

body[layout="mix"] .sidebar-logo-container {
  position: relative;
  /* // width: 100%;
    // height: 48px; */
  text-align: left;
  overflow: hidden;
  padding-top: 21px;
  padding-left: 20px;
  padding-bottom: 8px;
}

body[layout="mix"] .sidebar-logo-container img {
  width: 137px;
  height: 28px;
}

body[layout="mix"] .sidebar-logo-container .sidebar-title {
  display: inline-block;
  height: 32px;
  margin: 2px 0 0 12px;
  overflow: hidden;
  font-size: 18px;
  font-weight: 600;
  line-height: 32px;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
}


body[layout="mix"] .el-menu--vertical > .el-menu i {
  margin-right: 20px;
}

body[layout="mix"] .el-menu--vertical .is-active > .el-sub-menu__title,
body[layout="mix"] .el-menu--vertical .is-active.submenu-title-noDropdown {
  color: #fff !important;
}

body[layout="mix"] .el-menu--vertical .is-active > .el-sub-menu__title i,
body[layout="mix"] .el-menu--vertical .is-active.submenu-title-noDropdown i {
  color: #fff !important;
}

body[layout="mix"] .el-menu--vertical .el-menu .el-sub-menu__title {
  min-width: 180px !important;
}

body[layout="mix"] .el-menu--vertical .el-menu-item,
body[layout="mix"] .el-menu--vertical .el-sub-menu__title {
  height: 48px;
  line-height: 48px;
  color: #fff;
  background: var(--global-bg-color) !important;
}

body[layout="mix"] .el-menu--vertical .el-menu-item:hover,
body[layout="mix"] .el-menu--vertical .el-sub-menu__title:hover {
  color: #fff !important;
}

body[layout="mix"] .el-menu--vertical .is-active {
  color: #fff !important;
  transition: color 0.3s;
}

body[layout="mix"] .el-menu--vertical .el-menu-item.is-active.nest-menu > * {
  z-index: 1;
  color: #fff;
}

body[layout="mix"] .el-menu--vertical .el-menu-item.is-active.nest-menu::before {
  position: absolute;
  inset: 0 8px;
  clear: both;
  content: "";
  background: var(--color-theme-subMenuBf) !important;
  border-radius: 20px;
}

body[layout="mix"] .el-menu--vertical .el-menu-item .iconfont,
body[layout="mix"] .el-menu--vertical .el-sub-menu .iconfont {
  font-size: 18px;
}

body[layout="mix"] .el-menu--vertical .el-menu-item .el-menu-tooltip__trigger,
body[layout="mix"] .el-menu--vertical .el-sub-menu .el-menu-tooltip__trigger {
  width: 54px;
  padding: 0;
}

body[layout="mix"] .el-menu--vertical .el-menu--popup {
  color: #002140;
  background: var(--global-bg-color) !important;
}

body[layout="mix"] .el-menu--vertical .el-menu--popup .el-menu-item span {
  color: #002140;
}


body[layout="mix"] .el-menu--horizontal > .el-sub-menu .el-sub-menu__icon-arrow {
  position: static !important;
  margin-top: 0;
}

body[layout="mix"] .el-menu--horizontal > .el-sub-menu .el-sub-menu__title:hover {
  background-color: transparent !important;
}

body[layout="mix"] .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  background-color: transparent !important;
}

body[layout="mix"] .el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
  background-color: transparent !important;
  color: #fff !important;
}

body[layout="mix"] .el-menu--horizontal .el-menu--popup {
  background: var(--global-bg-color);
}

body[layout="mix"] .el-menu--horizontal .el-menu--popup .el-menu-item {
  color: #002140;
  background: var(--global-bg-color) !important;
}

body[layout="mix"] .el-menu--horizontal .el-menu--popup .el-menu-item span {
  font-size: 12px;
}

body[layout="mix"] .el-menu--horizontal .el-menu--popup .el-sub-menu__title {
  color: #002140;
}

body[layout="mix"] .el-menu--horizontal .router-link-exact-active > .submenu-title-noDropdown {
  height: 60px;
  border-bottom: 2px solid var(--el-menu-active-color);
}

body[layout="mix"] .el-menu--horizontal .el-menu .el-sub-menu__title {
  min-width: 180px !important;
  font-size: 12px;
  background: var(--global-bg-color) !important;
}

body[layout="mix"] .el-menu--horizontal .el-menu .el-sub-menu__title:hover {
  color: #fff !important;
}

body[layout="mix"] .el-menu--horizontal .is-active > .el-sub-menu__title,
body[layout="mix"] .el-menu--horizontal .is-active.submenu-title-noDropdown {
  color: #fff !important;
}

body[layout="mix"] .el-menu--horizontal .is-active > .el-sub-menu__title i,
body[layout="mix"] .el-menu--horizontal .is-active.submenu-title-noDropdown i {
  color: #fff !important;
}

body[layout="mix"] .el-menu--horizontal .nest-menu .el-sub-menu > .el-sub-menu__title:hover,
body[layout="mix"] .el-menu--horizontal .el-menu-item:hover {
  color: #fff !important;
}

body[layout="mix"] .el-menu--horizontal .el-menu-item.is-active {
  color: #fff !important;
  transition: color 0.3s;
}

body[layout="mix"] .el-menu--horizontal .el-menu-item.is-active.nest-menu > * {
  z-index: 1;
  color: #fff;
}

body[layout="mix"] .el-menu--horizontal .el-menu-item.is-active.nest-menu::before {
  position: absolute;
  inset: 0 5px;
  clear: both;
  content: "";
  background: var(--color-theme-subMenuBf) !important;
  /* border-radius: 20px; */
}

body[layout="mix"] .horizontal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 48px;
  background: linear-gradient(135deg, #774AFF 0%, #1355D7 100%);
}

body[layout="mix"] .horizontal-header .horizontal-header-left {
  display: flex;
  align-items: center;
  width: auto;
  min-width: 200px;
  height: 100%;
  padding-left: 10px;
  cursor: pointer;
  transition: all var(--pure-transition-duration) ease;
}

body[layout="mix"] .horizontal-header .horizontal-header-left img {
  display: inline-block;
  height: 32px;
}

body[layout="mix"] .horizontal-header .horizontal-header-left span {
  display: inline-block;
  height: 32px;
  margin: 2px 0 0 12px;
  overflow: hidden;
  font-size: 18px;
  font-weight: 600;
  line-height: 32px;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[layout="mix"] .horizontal-header .horizontal-header-menu {
  flex: 1;
  align-items: center;
  min-width: 0;
  height: 100%;
}

body[layout="mix"] .horizontal-header .horizontal-header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 340px;
  color: #fff;
  /* 搜索 */
}

body[layout="mix"] .horizontal-header .horizontal-header-right .search-container:hover,
body[layout="mix"] .horizontal-header .horizontal-header-right .dropdown-badge:hover,
body[layout="mix"] .horizontal-header .horizontal-header-right .el-dropdown-link:hover,
body[layout="mix"] .horizontal-header .horizontal-header-right .set-icon:hover {
  background: #4091f7;
}

body[layout="mix"] .horizontal-header .horizontal-header-right .dropdown-badge {
  height: 48px;
  color: #fff;
}

body[layout="mix"] .horizontal-header .horizontal-header-right .el-dropdown-link {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 48px;
  padding: 10px;
  color: #fff;
  cursor: pointer;
}

body[layout="mix"] .horizontal-header .horizontal-header-right .el-dropdown-link p {
  font-size: 14px;
}

body[layout="mix"] .horizontal-header .horizontal-header-right .el-dropdown-link img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

body[layout="mix"] .horizontal-header .el-menu {
  width: 100% !important;
  height: 100%;
  background-color: transparent;
  border: none;
}

body[layout="mix"] .horizontal-header .el-menu-item,
body[layout="mix"] .horizontal-header .el-sub-menu__title {
  padding-right: var(--el-menu-base-level-padding);
  color: #fff;
}

body[layout="mix"] .horizontal-header .el-menu-item:hover,
body[layout="mix"] .horizontal-header .el-sub-menu__title:hover {
  color: #fff !important;
}

body[layout="mix"] .horizontal-header .submenu-title-noDropdown,
body[layout="mix"] .horizontal-header .el-sub-menu__title {
  height: 48px;
  line-height: 48px;
  /* background: $menuBg; */
}

body[layout="mix"] .horizontal-header .submenu-title-noDropdown svg,
body[layout="mix"] .horizontal-header .el-sub-menu__title svg {
  position: static !important;
}

body[layout="mix"] .horizontal-header .is-active > .el-sub-menu__title,
body[layout="mix"] .horizontal-header .is-active.submenu-title-noDropdown {
  color: #fff !important;
}

body[layout="mix"] .horizontal-header .is-active > .el-sub-menu__title i,
body[layout="mix"] .horizontal-header .is-active.submenu-title-noDropdown i {
  color: #fff !important;
}

body[layout="mix"] .horizontal-header .is-active {
  color: #fff !important;
  transition: color 0.3s;
}

body[layout="mix"] .el-menu--collapse .el-menu .el-sub-menu {
  min-width: 180px !important;
}

body[layout="mix"] .el-menu--collapse {
  width: 54px;
}

body[layout="mix"] .el-menu {
  --el-menu-hover-bg-color: transparent !important;
}


body[layout="mix"] .hideSidebar .fixed-header {
  width: calc(100% - 54px);
  transition: width var(--pure-transition-duration);
}

body[layout="mix"] .hideSidebar .krp-sidebar-container {
  width: 54px !important;
  transition: width var(--pure-transition-duration);
}

body[layout="mix"] .hideSidebar .krp-sidebar-container .is-active.submenu-title-noDropdown.outer-most {
  background: transparent !important;
}

body[layout="mix"] .hideSidebar .main-container-wai {
  margin-left: 54px;
}

body[layout="mix"] .hideSidebar .el-menu--collapse .el-sub-menu > .el-sub-menu__title {
  padding: 0;
}

body[layout="mix"] .hideSidebar .el-menu--collapse .el-sub-menu > .el-sub-menu__title > span {
  width: 100%;
  height: 100%;
  text-align: center;
  visibility: visible;
}

body[layout="mix"] .isMobile .main-container-wai {
  margin-left: 0px;
}