a{
    text-decoration: none;
    color: black;
}
a:hover {
    color: #e70476;
}
/* 搜索框容器样式 */
.search-container {
    display: flex; /* 使用flex布局 */
    justify-content: flex-end; /* 将内容对齐到容器的右侧 */
    align-items: center; /* 垂直居中对齐 */
    margin-right: 5%;
}

/* 输入框样式 */
.search-container input {
    width: 100px; /* 减去按钮的宽度 */
    padding: 10px; /* 内边距 */
    font-size: 16px; /* 字体大小 */
    border: 2px solid #ccc; /* 边框颜色 */
    border-radius: 5px 0 0 5px; /* 圆角 */
    outline: none; /* 点击时不显示轮廓 */
    transition: border-color 0.3s; /* 边框颜色变化的过渡效果 */
}

/* 隐藏Chrome、Safari、新版Edge的上下箭头 */
.search-container input[type=number]::-webkit-inner-spin-button,
.search-container input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 隐藏Firefox的上下箭头 */
.search-container input[type=number] {
    -moz-appearance: textfield;
}

/* 隐藏IE的上下箭头 */
.search-container input[type=number]::-ms-clear,
.search-container input[type=number]::-ms-reveal {
    display: none;
}

/* 输入框获得焦点时的样式 */
.search-container input:focus {
    border-color: #007bff; /* 边框颜色变化 */
}

/* 按钮样式 */
.search-container button {
    width: 40px; /* 按钮宽度 */
    padding: 10px; /* 内边距 */
    background: rgba(0, 123, 255, 0.8); /* 背景颜色 */
    color: white; /* 字体颜色 */
    border: none; /* 无边框 */
    border-radius: 0 5px 5px 0; /* 圆角 */
    cursor: pointer; /* 鼠标悬停时的光标 */
    transition: background-color 0.3s; /* 背景颜色变化的过渡效果 */
}

/* 按钮悬停效果 */
.search-container button:hover {
    background-color: #007bff; /* 鼠标悬停时的背景颜色 */
}

/* 搜索图标样式 */
.search-container .search-icon {
    display: none; /* 初始不显示图标 */
}

/* 悬浮表格样式 */
#floating-div {
    display: none; /* 默认隐藏 */
    position: fixed; /* 悬浮 */
    left: 50%; /* 居中 */
    top: 50%; /* 居中 */
    transform: translate(-50%, -50%); /* 居中 */
    border: 1px solid #ccc; /* 边框 */
    border-radius: 10px;
    padding: 20px; /* 内边距 */
    background-color: white; /* 背景颜色 */
    z-index: 1000; /* 确保在最上层 */
    width: 80%;
    max-width: 300px;
    text-align: center;
}
#floating-div table{
    width: 100%;
    border-collapse: collapse;
    border-radius: 5px;
    border: none; /* 移除表格边框 */
}
#floating-div table th{
    text-align: left; /* 设置标题文本居中 */
    border-bottom: 1px solid lightgray; /* 添加底部边框 */
}
#floating-div table td{
    border-bottom: 1px solid lightgray; /* 添加底部边框 */
    text-align: right; /* 设置内容文本左对齐 */
    word-wrap: break-word; /* 允许长单词或 URL 地址换行到下一行 */
    overflow: hidden; /* 隐藏溢出的内容 */
    padding: 8px; /* 设置合适的内边距 */
    white-space: nowrap; /* 防止内容换行 */
    text-overflow: ellipsis; /* 在内容溢出时显示省略号 */
    color: rgba(0, 0, 0, 0.5);
}
#floating-div table input{
    text-align: right; /* 设置内容文本左对齐 */
}
#floating-div table select{
    text-align: right; /* 设置内容文本左对齐 */
}

.text-button {
    background: linear-gradient(0deg, #7ec1d7, #F1ECECFF); /* 渐变背景 */
    border-radius: 20px; /* 更圆润的圆角 */
    border: none;
    text-align: center;
    padding: 1px 2px; /* 增加内边距 */
    margin: 10px 5px; /* 调整外边距 */
    cursor: pointer;
    transition: all 0.3s ease; /* 平滑过渡效果 */
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); /* 添加阴影 */
    white-space: nowrap;
}
.text-button:hover {
    background: linear-gradient(0deg, #007bff, #7ec1d7); /* 悬停时渐变背景变化 */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* 悬停时阴影加深 */
    transform: scale(1.05); /* 悬停时稍微放大 */
    color: white;
}

.tab-button {
    padding: 10px;
    margin: 4px 4px 0 4px ;
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ffffff;

    background-color: #ffffff;

    border-radius: 12px 12px 0px 0px;
    cursor: pointer;
}
.tab-button.active {
    border-bottom: 2px solid rgb(0, 0, 0);
    background-color: #cccccc; /* 激活的标签按钮的背景颜色 */
}
.tab-button:hover {
  background-color: rgb(126, 193, 215);
}

.table-td-value {
    text-align: left;
    width: 90px;
    padding: 2px 1px;
}
.table-td-value input,
.table-td-value select {
    text-align: right;
    box-sizing: border-box;
    width: 100%;
    min-width: 100px;
    border-radius: 5px;
    border: 1px solid;
}
.table-td-value select {
    cursor: pointer;
}

.hc_hcjg {
    display: none;
}
.hc_hcjg table {
    width: 100%;
    text-align: right;
}

/* 媒体查询，针对不同屏幕尺寸进行调整 */
@media (min-width: 480px) {
    .text-button {
        width: 80px; /* 在较大屏幕上增加按钮宽度 */
    }
}

@media (min-width: 768px) {
    .text-button {
        width: 100px; /* 在平板或更大屏幕上进一步增加按钮宽度 */
    }
}