:root{
  --primary-color: #2263E0;

  --header-height: 80px
}

body{
  min-width: 1440px;
}

.layui-layout-admin .layui-body{
  top: var(--header-height);
}

/*** 自定义样式 */
/* 定义头部区域和左侧菜单的布局 */
.pear-admin .layui-header {
  width: 100%;
  background-color: var(--primary-color);
  left: 0;
  height: 100%;
}

.pear-admin .layui-side {
  top: var(--header-height);
}

.pear-admin .layui-side-scroll {
  height: calc(100%) !important;
  background-image: url('../images/side-menu-bg.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position-y: bottom;
}

/* 定义缩起左侧菜单和刷新按钮 */
.refresh {
  left: 40px;
}

.layui-tab-prev {
  left: 80px !important;
}

.layui-tab-title {
  padding-left: 120px !important;
}

/* 定义logo区域显示在header部分 */
.pear-admin .layui-logo {
  width: max-content;
  text-align: left;
  padding-left: 10px;
  background-color: #fff !important;
  height: var(--header-height);
  line-height: var(--header-height);
}

.pear-admin .layui-logo .logo-bg-img {
  width: auto;
  height: 100%;
  vertical-align:top;
}

.pear-admin .layui-logo .logo {
  display: inline-block !important;
  width: 54px;
  height: 54px;
}

.pear-admin .layui-logo .title {
  display: inline-block !important;
  margin-right: 0px;
  font-size: 24px;
}

.layui-layout-admin .layui-header .layui-nav{
  height: var(--header-height);
  line-height: var(--header-height);
}

/* 修改菜单子菜单的布局bug */
.pear-mini .layui-nav-tree .layui-nav-item span {
  margin-right: 15px;
}

.pear-admin .layui-header .layui-nav .layui-nav-item>a {
  color: #fff;
  font-size: 16px;
}


/* 修改菜单样式 */
/* 菜单背景阴影 */
.light-theme .layui-side {
  box-shadow: 0px 20px 10px 0px rgba(49, 88, 164, 0.2) !important;
  /* 菜单整体阴影  */
}

.light-theme .pear-nav-tree {
  padding: 10px;
  background-color: unset !important;
}

.light-theme .pear-nav-tree .layui-this a,
.pear-nav-tree .layui-this a {
  background-color: unset !important;
}


.layui-nav .layui-nav-child dd.layui-this a,
 .layui-nav-child dd.layui-this {
  background-color: unset !important;
}

/* 默认字体颜色 */
.light-theme .pear-nav-tree a {
  color: #5E6D82 !important;
}

/* 选中背景颜色 */
.light-theme .pear-nav-tree .layui-this {
  box-shadow: 0px 2px 6px 0px rgba(20, 74, 178, 0.4); 
  background: linear-gradient(270deg, var(--primary-color) 0%, #3F81FF 99%);
  background-color: unset !important;
  border-radius: 6px;
}

/* 选中文字颜色 */
.light-theme .pear-nav-tree .layui-this a {
  color: white !important;
  background-color: unset !important;
  background: unset !important;
  border-radius: 6px;
}

/* 字菜单背景颜色 */
.light-theme .layui-nav-itemed>.layui-nav-child {
  background-color:  unset !important;
}
.light-theme .pear-nav-tree{
  background-color:  unset !important;
}

/* hover状态 */
.light-theme .layui-nav .layui-nav-item a:hover {
  background: rgba(34, 99, 224, .2);
  border-radius: 6px;
}

.light-theme .pear-nav-tree a:hover {
  color: var(--primary-color) !important;
}

.light-theme .pear-nav-tree a:hover>.layui-nav-more {
  color: var(--primary-color) !important;
}

/* 选中的就不用hover */
.light-theme .layui-nav .layui-this a:hover {
  color: unset !important;
  background: linear-gradient(270deg, var(--primary-color) 0%, #3F81FF 99%);
  background-color: unset !important;
}


/* 一级菜单 */
.pear-nav-tree .layui-nav-item a span {
  font-size: 16px;
  letter-spacing:0;
}
/* 二级菜单 */
.pear-nav-tree .layui-nav-item .layui-nav-child a span {
  font-size: 14px;
}
/* 二级菜单展开加粗 */
/* .pear-nav-tree .layui-nav-item .layui-nav-child .layui-nav-itemed a span {
  font-weight: bold;
} */
/* 三级菜单字体宽度复原 */
/* .pear-nav-tree .layui-nav-item .layui-nav-child .layui-nav-itemed .layui-nav-child a span {
  font-weight: normal;
} */



/* 菜单icon */
.pear-nav-tree .layui-nav-item>a .icon,
.layui-nav-item .layui-nav-child dd>a .icon {
  position: relative;
  width: 20px;
  height: 20px;
  fill: currentColor;
  overflow: hidden;
  color:var(--primary-color);
}


/* 父级菜单icon选中 */
.pear-nav-tree .layui-this a .icon{
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 50%;
  padding: 3px;
}
/* 消除选中时子层级icon的样式 */
.layui-nav-item .layui-nav-child .layui-this a .emptyIcon{
  box-sizing: unset;
  background-color: unset;
  border-radius: unset;
  padding: unset;
}

.pear-nav-tree .layui-nav-child dd a span {
  margin-left: 0 !important
}

.pear-nav-tree .layui-nav-item>a,
.layui-nav-item .layui-nav-child dd>a {
  display: flex;
  gap:10px;
  align-items: center;
}

.pear-nav-tree.arrow .layui-nav-more{
  width:unset;
  top: 20px;
}

/* .pear-nav-tree.arrow .layui-nav-more */


/* 顶部 */
.layui-nav .layui-nav-child a:hover{
  color: var(--primary-color)
}

@media (max-width:1440px)  {

  body::-webkit-scrollbar {
    width: 6px;
    height: 15px;
  }

  .layui-layout-body{
    overflow-x: scroll;
  }
}