body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  padding-bottom: 60px; /* 确保至少有40px的空间，加上一些额外的空间以保证视觉效果 */
}


.active {
  background-color: #498ee2; /* 选择一个显眼的颜色 */
  color: white;
}

.navbar {
  background-color: #333;
  overflow: hidden;
  font-size: 16px;
}

.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.navbar a:hover {
  background-color: #ddd;
  color: black;
}


.container {
  width: 80%;
  margin: 20px auto;
  background: white;
  padding: 20px;
}

.container h1,
.container p,
.container h2 {
  margin-left: 20px;
}

.container a {
  display: block;
  margin: 10px 20px;
  color: #337ab7;
  text-decoration: none;
}

.container a:hover {
  text-decoration: underline;
}

.scroll-box {
  overflow-x: scroll; /* 始终显示横向滚动条 */
  overflow-y: auto; /* 纵向滚动条在需要时出现 */
  width: 100%; /* 容器宽度 */
  max-height: 400px; /* 容器最大高度 */
  margin: auto; /* 若需要，可以自动居中 */
  border: 1px solid #ccc; /* 容器边框 */
  white-space: pre; /* 保持空白符和格式，避免自动换行 */
  font-family: monospace; /* 使用等宽字体以便更好地展示数据 */
}

/* 定制滚动条的样式 */
.scroll-box::-webkit-scrollbar {
  -webkit-appearance: none;
}

.scroll-box::-webkit-scrollbar:vertical {
  width: 10px; /* 设置垂直滚动条宽度 */
}

.scroll-box::-webkit-scrollbar:horizontal {
  height: 10px; /* 设置横向滚动条高度，之前是2px，现根据需要调整 */
}

.scroll-box::-webkit-scrollbar-thumb {
  border-radius: 8px; /* 设置滚动条的圆角 */
  border: 2px solid rgba(255,255,255,.4); /* 设置滚动条的边框 */
  background-color: rgba(0, 0, 0, .5); /* 设置滚动条的颜色 */
}


textarea {
  width: calc(100% - 40px);
  margin: 10px 20px;
  height: 150px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
  font-family: monospace;
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  margin-top: 20px; /* 或根据您的设计需求调整 */
}

table thead th {
  background-color: #f5f5f5; /* 表头背景颜色改为浅灰色 */
  color: black; /* 文字颜色改为黑色 */
  padding: 10px;
  text-align: center;
}

table tbody td {
  padding: 10px;
  border: 1px solid #ddd; /* 单元格边框 */
}

.download-btn {
  background-color: #f5f5f5; /* 按钮背景颜色改为浅灰色 */
  color: black; /* 按钮文字颜色改为黑色 */
  padding: 10px 15px;
  text-decoration: none;
  border-radius: 4px;
  display: inline-block; /* 使按钮不受表格布局影响 */
  text-align: center;
  border: 1px solid #ddd; /* 添加边框 */
}

.download-btn:hover {
  background-color: #e7e7e7; /* 按钮悬停颜色改为稍微深一点的灰色 */
  color: black;
  border-color: #ccc; /* 悬停时边框颜色变深 */
}


footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
  bottom: 0;
  /* width: 100%; */
}


/* Add margin to the bottom of the container to make space for the footer */
.container {
  margin-bottom: 50px; /* Adjust this value based on the height of your footer */
}


@media (max-width: 768px) {
  .container {
    width: 95%;
  }
}