/* 设置整个页面的滚动条样式 */
html {
  scrollbar-width: auto; /* 设置滚动条宽度 */
  scrollbar-color: #c0ccec; /* 设置滚动条的颜色，第一个是滑块颜色，第二个是背景颜色 */
}
 
/* 针对Firefox的滚动条样式 */
html * {
  scrollbar-width: auto;
  scrollbar-color: #c0ccec;
}
 
/* 针对IE的滚动条样式 */
body {
  -ms-overflow-style: auto; /* 设置滚动条宽度 */
  /* -ms-scrollbar-track-color: #333; /* 设置滑块背景颜色 */
  -ms-scrollbar-thumb-color: #c0ccec; /* 设置滑块颜色 */
}

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  min-height: 100%;
  position: relative;
  padding-bottom: 10px; /* 页脚高度 */
}

.navbar a {
  text-decoration: none;
  color: inherit;
}

.navbar-brand {
  font-size: 1em;
  font-weight: 600;
  margin-left: 30px;
}

.navbar-item {
  font-variant: small-caps;
  margin-left: 30px;
}

.body-content {
  position:relative;
  height: 100%;
  margin:0;
  padding:0;
  font-size: 1.4em;
  font-family: Arial, sans-serif;
}
input[name=message] {
  width: 80%;
}

.message_list th,td {
  text-align: left;
  padding-right: 15px;
}

.txt_a{
  box-sizing: border-box; /* 外框固定 */
  padding: 6px 6px;  /*适当的内边距 */
  background:#abeff8;
  position:absolute;    
  left:10px;    
  top:46px;
  width: 337px;
  height:999px;
  font-size: 14px;
  font-family: Arial;
  padding:6px 6; /* 上下6px，左右6 */
}

.txt_b{
  box-sizing: border-box; /* 外框固定 */
  padding: 6px 6px;  /*适当的内边距 */
  background:#abeff8;
  position:absolute;    
  left:353px;    
  top:46px;
  width: 337px;
  height:999px;
  font-size: 14px;
  font-family: Arial;
}

.as_p{
  background:#abeff8;
  position:absolute;  
  left:800px;    
  top:10px;
  width: 60px;
  height:20px;
  font-size: 1em;
  font-family: Arial;
}

.txt_bt1{
  background:orange;
  position:absolute;    
  left:10px;    
  top:9px; 
  width: 88px;
  height:28px;
  border-radius: 2px;
  box-shadow: 0 5px #999;
  font-size: 12px;
}
.txt_bt1:hover {background-color: #99ff00}
.txt_bt1:active {
  background: #99ff00;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.txt_bt2{
  background:orange;
  position:absolute;    
  left:100px;    
  top:9px; 
  width: 88px;
  height:28px;
  border-radius: 2px;
  box-shadow: 0 5px #999;
  font-size: 12px;
}
.txt_bt2:hover {background-color: #99ff00}
.txt_bt2:active {
  background: #99ff00;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.txt_bt3{
  background:orange;
  position:absolute;    
  left:190px;    
  top:9px; 
  width:158px;
  height:28px; 
  border-radius: 2px;
  box-shadow: 0 5px #999;
  font-size: 12px;
}
.txt_bt3:hover {background-color: #99ff00}
.txt_bt3:active {
  background: #99ff00;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.txt_bt4{
  background:orange;
  position:absolute;    
  left:352px;    
  top:9px; 
  width: 158px;
  height:28px;  
  border-radius: 2px;
  box-shadow: 0 5px #999;
  font-size: 12px;
}
.txt_bt4:hover {background-color: #99ff00}
.txt_bt4:active {
  background: #99ff00;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.txt_bt5{
  background:orange;
  position:absolute;    
  left:512px;    
  top:9px; 
  width: 88px;
  height:28px;
  border-radius: 2px;
  box-shadow: 0 5px #999;
  font-size: 12px;
}
.txt_bt5:hover {background-color: #99ff00}
.txt_bt5:active {
  background: #99ff00;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.txt_bt6{
  background: orange;
  position:absolute;    
  left:602px;    
  top:9px; 
  width: 88px;
  height:28px;
  border-radius: 2px;
  box-shadow: 0 5px #999;
  font-size: 12px;
}
.txt_bt6:hover {background-color: #99ff00}
.txt_bt6:active {
  background: #99ff00;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}


/* 1. 先布置九宫格（重点：内层结构） */

#menuToggle .grid-box {
  display: grid;
  grid-template-columns: repeat(3, 6px); /* 3列，每列6px */
  grid-template-rows: repeat(3, 5px);    /* 3行，每行3px */
  gap: 3px;                              /* 行列间距 */
  padding-top: 4px;
  /* 此时它还是一个干净的网格，没有背景 */
}

/* 九宫格小横条 */
#menuToggle .grid-box span {
  display: block;
  width: 6px;
  height: 2px;
  background: #555;
  border-radius: 2px;
}

/* 2. 再设置这个九宫格的“背景外壳”（外层） */

#menuToggle {
  position: absolute;
  top: 9px;
  right: 10px;
  
  /* 使用 Flex 布局作为外壳，绝对防错位 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  
  width: 30px;    /* 背景宽 */
  height: 28px;   /* 背景高 - 你想改高度，以后只改这一个数值！ */
  
  background: orange;
  box-shadow: 0 5px 0 #999; 
  border: none;
  border-radius: 2px;
  cursor: pointer;
  padding: 0;
}

/* 3. 悬停与点击交互 */

#menuToggle:hover { background: #99ff00; }
#menuToggle:hover .grid-box span { background: #007bff; }/*注意要加 .grid-box*/
#menuToggle:active {
  background: #99ff00;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}


/* 组2：下拉菜单 */
.dropdown-menu {
  display:none; /* 默认隐藏 */
  position:absolute; /* 绝对定位，相对父元素（#menuToggle） */
  top:46px; /* 距离顶部50px（按钮下方） */
  right:9px; /* 靠右对齐 */
  background:orange; /* 背景 */
  box-shadow: 0 5px 0 #999; 
  min-width:80px; /* 最小宽度150px */
  border-radius:2px; /* 圆角2px */
  /* box-shadow:0 8px 20px rgba(0,0,0,0.15); 阴影，产生浮起效果 */
  padding:6px 0; /* 上下6px，左右0 */
  z-index:1000; /* 层叠顺序，确保在其他元素上面 */
}
.dropdown-menu.show {
  display:block; /* 显示下拉菜单 */
  animation:slideDown 0.2s ease-out; /* 下滑动画0.2秒 */
}
.dropdown-item {
  display:block; /* 块级显示，占整行 */
  padding:1px 6px; /* 上下10px，左右6px */
  color:#333; /* 文字颜色深灰 */
  text-decoration:none; /* 去掉下划线 */
  font-size:14px; /* 字号14px */
  white-space:nowrap; /* 文字不换行 */
}

/*  悬停与点击交互 */
.dropdown-item:hover { background: #99ff00; }
.dropdown-item:hover .grid-box span { background: #007bff; }/*注意要加 .grid-box*/
.dropdown-item:active {
  background: #99ff00;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}


/* 反馈信息 */
#feedback {
  position: fixed;     /* 固定定位，不随滚动移动*/
  top: 159px;          /* 距离顶部120px */
  right: 9px;          /* 距离右侧9px */
  padding: 12px 18px;  /* 适当的内边距 */
  border-radius: 2px;  /* 圆角 */
  display: none;       /* 默认隐藏 */
  white-space: pre-line;
  width: 200px;        /* 宽度 */
  height: 266px;       /* 高 */
  z-index: 999;        /* 确保在其他元素之上 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);/*阴影效果*/
  font-size: 14px;     /* 字体大小 */
  line-height: 1.5;    /* 行高 */
  word-wrap: break-word; /* 长文字自动换行 */
  /* transition: all 0.3s ease;  平滑过渡 */
}

#feedback.success {
  background:#abeff8;
  border: 1px solid #c3e6cb;
  color: #155724;
}

#feedback.error {
  background:#abeff8;
  border: 1px solid #f5c6cb;
  color: #721c24;
}

#feedback.loading {
  background:#abeff8;
  border: 1px solid #ffeeba;
  color: #856404;
}

/* 页脚 */
.footer {
  position:  relative;
  bottom: -1310px;
  width: 100%;
  height: 20px; /* 没有添加这个属性浪费我3天时间抓狂 */
  background-color: rgb(255, 255, 255);
  font-size: 1em;
  font-family: 'Arial';
  text-align:center;
  color: rgb(0, 0, 0);
  padding: 1px 1px 20px 1px;

}