/* 容器布局样式 */
#menu-container {
    display: flex; /* 使用flexbox布局 */
    width: 100%; /* 容器宽度为100% */
    height: calc(100vh - 100px); /* 容器高度为视口高度减去顶栏高度 */
    overflow: hidden; /* 隐藏溢出内容 */
    padding-top: 25px; /* 27确保容器在顶栏下方 */
}

/* 左侧菜单列表样式 */
#menu {
    list-style-type: none; /* 移除默认的列表样式 */
    padding: 0; /* 移除默认的内边距 */
    margin: 0; /* 移除默认的外边距 */
    flex: 2.5; /* 左侧菜单占2.5份宽度 */
    background-color: #f0f0f0; /* 左侧背景色 */
    max-height: 100%; /* 最大高度为100% */
    overflow-y: auto; /* 如果内容溢出，显示垂直滚动条 */
	 padding-top: 1px;
	padding: 0 0px 70px 0px; /* 仅设置左右和底部内边距，移除顶部内边距 */
}
#menu li {
  padding: 10px;
  cursor: pointer;
}
#menu li.active {
  background: #fdfcfc;
}

/* 右侧内容区 */
#content-container {
  flex: 7.5;
  padding: 7px;
  position: relative;
  box-sizing: border-box;
  overflow-x: auto;
}

/* 加载动画 */
#loading-spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 4px solid rgba(0,0,0,0.1);
  border-top-color: #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}