body {
            background-color: #f8f9fa;
        }
   .button-container1 {
    max-width: 400px; /* 限制宽度 */
    margin: 0 auto;   /* 水平居中 */
    text-align: center; /* 按钮居中 */
    margin-top: 2px;
     margin-bottom: 2px;
  }

  .button-container1 table {
    width: 100%;
    border-spacing: 0; /* 去掉单元格之间的间距 */
    border-collapse: collapse; /* 表格合并边框，避免间距 */
    text-align: center; /* 居中显示按钮 */
  }

  .button-container1 td {
    width: 50%; /* 每个单元格宽度占50% */
    padding: 2; /* 去除单元格的内边距 */
    margin: 2; /* 去除单元格的外边距 */
  }

  .button-container1 tr {
    margin: 0; /* 去除 tr 标签的外边距 */
    padding: 0; /* 去除 tr 标签的内边距 */
  }

  .button-container1 a {
    display: block; /* 使按钮占满单元格 */
    padding: 5px 10px; /* 按钮的上下内边距 */
    margin: 0; /* 去除按钮的外边距 */
    text-decoration: none;
    border-radius: 5px;
    text-align: center; /* 按钮文本居中 */
  }
        
        .button-container {
            max-width: 400px; /* 限制宽度 */
            margin: 0 auto;   /* 水平居中 */
            text-align: center; /* 按钮居中 */
               margin-top: 2px;
     margin-bottom: 2px;
        }
        
        
        .button-container a {
            width: 100%;  /* 使按钮的宽度占据容器的 100% */
            margin-bottom: 10px;  /* 增加按钮之间的间距 */
        } 
        .button-container2 {
            max-width: 400px; /* 限制宽度 */
            margin: 0 auto;   /* 水平居中 */
            text-align: center; /* 按钮居中 */
               margin-top: 20px;
     margin-bottom: 2px;
        }
        
        
        .button-container2 a {
            width: 100%;  /* 使按钮的宽度占据容器的 100% */
            margin-bottom: 10px;  /* 增加按钮之间的间距 */
        }
        
         body {
            background-color: #f8f9fa;
        }
        .card {
            max-width: 400px;
            margin: 0 auto;
            margin-top: 50px;
        }
        .result {
            margin-top: 10px;
        }
        .loading {
            display: none;
            color: #007bff;
        }
        body {
		margin: 0;
		padding: 0;
		background-color: #f1f1f1;
		font-family: Arial, sans-serif;
	}

	.container {
		max-width: 1000px;
		margin: 0 auto;
		padding: 15px;
	}

	.row {
		display: flex;
		flex-wrap: wrap;
		margin: -15px;
	}

	.col {
		flex: 1;
		padding: 1px;
		text-align: center;
		margin: 1px 0; /* 调整上下间距 */
	}

	.col a {
		display: block;
		padding: 8px;
		background-color: #fff;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		border-radius: 30px;
		font-size: 15px;
		font-weight: bold;
		color: #555;
		text-decoration: none;
		transition: all 0.3s ease-in-out;
		position: relative;
		overflow: hidden;
		z-index: 1;
		background-image: linear-gradient(45deg, #23a6d5, #23d5ab, #5fe865, #ffea2e, #ff7f31, #e23f7f, #d42323, #5c5cd6, #23a6d5);
		background-size: 1000% 1000%;
		animation: gradient 20s ease infinite;
	}

	.col a::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.6);
		transform: translateY(100%);
		z-index: -1;
		transition: all 0.3s ease-in-out;
	}

	.col a:hover::before {
		transform: translateY(0);
	}

	.col a:hover {
		transform: scale(1.05);
		box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
	}

	.col a:focus {
		outline: none;
		box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
	}

	@keyframes gradient {
		0% {
			background-position: 0% 50%;
		}
		50% {
			background-position: 100% 50%;
		}
		100% {
			background-position: 0% 50%;
		}
	}

	@media (max-width: 768px) {
		.col {
			flex-basis: 50%;
		}
	}

	@media (max-width: 576px) {
		.col {
			flex-basis: 100%;
		}
	}/* 改善下拉框的样式 */
.mui-card-content {
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    width: 100%;
    left: 0;
}

/* 确保 ul 列表没有边距和内边距 */
.mui-table-view {
    margin: 0; /* 去掉外边距 */
    padding: 0; /* 去掉内边距 */
    list-style-type: none; /* 去掉列表样式 */
}

/* 修改历史记录项的样式 */
.mui-table-view-cell {
    padding: 6px 9px; /* 上、下10px，左右15px的内边距 */
    margin-left: 0; /* 确保左侧外边距为0 */
    cursor: pointer; /* 鼠标悬停时变成指针 */
    display: flex; /* 使项目为 flex 容器 */
    justify-content: space-between; /* 内容两端对齐 */
    align-items: center; /* 垂直居中 */
    border-bottom: 1px solid #ccc; /* 添加底部横线 */
     border-top: 1px solid #ccc; /* 添加底部横线 */
    background-color: #FFFFFF; /* 背景颜色 */  
       color: #646464; /* 文字颜色 */  
    font-size: 14px; /* 设置文字大小为14像素 */  
    transition: background-color 0.3s; /* 平滑过渡效果 */
}

/* 鼠标悬停效果 */
.mui-table-view-cell:hover {
    background-color: #eaeaea; /* 鼠标悬停效果 */
}

/* 改善删除按钮的样式 */
.delete-btn {
    background-color: #FFA500; /* 橘黄色背景 */
    border: none; /* 去掉边框 */
    color: white; /* 字体颜色改为白色 */
    padding: 4px 8px; /* 内边距 */
    border-radius: 4px; /* 圆角 */
    cursor: pointer; /* 鼠标悬停时变成指针 */
    font-size: 9px; /* 字体大小 */
    margin-left: 10px; /* 增加左边距，使其与文本分开 */
}

.delete-btn:hover {
    background-color: #FF8C00; /* 悬停时稍微深一点的橘色 */
}

/* 隐藏所有非最后一项的横线 */  
.mui-table-view-cell:not(:last-child) {  
    border-bottom: none;  
}  
  
/* （可选）如果最后一项的横线被某种方式隐藏了，您可以再次明确设置它 */  
/* 但通常这不是必需的，除非有其他CSS规则覆盖了它 */  
.mui-table-view-cell:last-child {  
    /* 这里通常不需要额外的样式，除非您想要明确设置横线的样式 */  
}








 /* 图片样式定义 */  
.input_div_img {  
	/* 设置图片的宽度和高度为30像素 */  
	width: 32px;  
	height: 32px;  
	  
	/* 使用绝对定位，这意味着图片的位置将相对于最近的已定位祖先元素 */  
	position: absolute;  
	  
	/* 将图片放置在距离其父元素（或最近的已定位祖先元素）右侧18像素的位置 */  
	right: 20px;  
	  
	/* 将图片在垂直方向上相对于其正常位置向上移动10像素 */  
	margin-top: 3px;  
}  
  
/* 图标样式定义 
貌似没什么用*/  
#fanhui {  
	/* 去除文本的下划线（虽然这里可能是图标，但保留此属性以防万一） */  
	text-decoration: none;  
	  
	/* 使用绝对定位，这意味着图标的位置将相对于最近的已定位祖先元素 */  
	position: absolute;  
	  
	/* 将图标放置在距离其父元素（或最近的已定位祖先元素）左侧85%的位置 */  
	left: 85%;  
	  
	/* 将图标放置在距离其父元素（或最近的已定位祖先元素）顶部80%的位置 */  
	top: 80%;  
	  
	/* 使用transform属性将图标在其当前位置上进行平移，以实现居中效果 */  
	transform: translate(-50%,50%);  
	  
	/* 设置图标的背景为线性渐变，颜色从#03a9f4到#f441a5，再到#ffeb3b，最后回到#03a9f4 */  
	background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);  
	  
	/* 设置背景渐变的大小为400像素，这将影响渐变动画的速度和效果 */  
	background-size: 400px;  
	  
	/* 设置图标的宽度和高度为60像素 */  
	width: 60px;  
	height: 60px;  
	  
	/* 设置图标内文本的颜色为白色 */  
	color: #fff;  
	  
	/* 设置图标内文本的行高与图标高度相同，以实现垂直居中 */  
	line-height: 60px;  
	  
	/* 设置图标内文本的水平居中 */  
	text-align: center;  
	  
	/* 设置图标的边框半径为50像素，以实现圆形效果（也可以简写为border-radius: 50%;） */  
	border-radius: 50px;  
	  
	/* 设置图标的层级，确保它不会被其他元素遮挡 */  
	z-index: 1;  
	  
	/* 为图标添加动画效果，动画名称为sun，持续时间为60秒，并无限循环 */  
	animation: sun 60s infinite;  
	  
	/* 设置图标内文本的字体大小为16像素 */  
	font-size: 16px;  
}