/* body {
    font-family: Arial, sans-serif;
    margin: 20px;
} */

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.filters {
    margin-bottom: 20px;
    color: #000000;
}

.search-section {
    margin-bottom: 20px;
}

.table-container {
    /* overflow-x: scroll; */
     /* 允许水平滚动 */
    white-space: nowrap; /* 防止文字换行 */
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    /* border: 1px solid rgb(0, 0, 0); */
    padding: 8px;
    text-align: left;
    color: #000000;
}

th {
    /* background-color: #000000; */
    
    color: #000000;
}

 
.filters {  
    margin-bottom: 20px;  
}  
  
.filters label {  
    display: block;  
    margin-bottom: 8px;  
}  
  
.filters input, .filters select {  
    width: 100%;  
    padding: 8px;  
    margin-bottom: 10px;  
}  
  
.filters button {  
    /* padding: 10px 15px;   */
    background-color: #408ed4;  
    color: #fff;  
    border: none;  
    cursor: pointer;  
    border-radius: 3%;
}  
  
.filters button:hover {  
    background-color: #305781;  
}  
  
table {  
    width: 100%;  
    border-collapse: collapse;  
    margin-bottom: 20px;  
}  
  
table th, table td {  
    border-bottom: 1px solid #ddd;  
    text-align: left;  
}  
  
table th {  
    background-color: #f2f2f2;  
}  


.pagination button {  
    /* padding: 3px 5px;   */
    margin: 0 5px;  
    background-color: #ffffff;  
    color: #3d3d3d;  
    border: none;  
    cursor: pointer;  
    border-radius: 10%;
}  
  
.pagination button:disabled {  
    /* background-color: #ffffff;   */
    cursor: not-allowed;  
}  
  
.pagination button:hover{
    /* padding: 3px 5px;   */
    color: #ffffff;
    background-color: #3E3E3E;  
}
.pagination button:hover:not(:disabled) {  
    color: white !important;
    /* border: 1px solid #111; */
    background: linear-gradient(to bottom, #585858 0%, #111 100%);
}




.filters {  
    display: flex;  
    flex-wrap: nowrap; /* 防止子项换行 */  
    /* justify-content: space-around; */
     /* 子项之间的空间平均分布 */  
    /* align-items: center;  */
    /* 垂直居中子项（对于不同高度的子项很有用） */  
    /* 可能需要设置一个宽度来限制.filters的总宽度 */  
    width: 100%; /* 或者一个具体的像素值，比如800px */  
    /* 如果.filters有默认的padding或margin，可能需要重置它们 */  
    padding: 0;  
    margin: 0 auto; /* 如果想要.filters在页面中水平居中，可以添加这个 */  
    box-sizing: border-box; /* 确保padding和border不会增加.filters的总宽度 */  
}  
  
/* 为了确保子元素（如label和input/select/button）不占据整行，我们需要设置它们的display属性 */  
.filters label,  
.filters input,  
.filters select,  
.filters button {  
    /* 这些元素默认可能是块级元素或表现为块级元素，我们需要改变它们 */  
    flex: 1; /* 让它们都能够灵活地占据可用空间 */  
    /* 可能需要设置一些额外的样式来确保它们看起来正确 */  
    margin: 0 10px 10px 10px; /* 子项之间的间距，可以根据需要调整 */  
    /* text-align: left;  */
    /* 如果需要，可以将文本对齐到左侧（对于label很有用） */  
}

/* body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
} */

.search_container {
    /* max-width: 800px; */
    margin: 0 auto;
    background: #fff;
    /* padding: 20px; */
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
}

h1 {
    text-align: center;
}

.search_filters {
    /* display: flex; */
    flex-direction: column;
    /* flex-direction: row; */
    gap: 10px;
    margin-bottom: 20px;
    /* overflow: auto; */
    /* background: #c6291e; */
}

.search_filters select,input {
    margin: 0 10px 10px 0;
    padding: 5px;
}

/* .search_filters input, .search_filters select {
    padding: 5px;
    font-size: 16px;
} */

.search_filters button {
    padding: 5px 10px;
    cursor: pointer;
}

.data-container {
    display: flex;
    flex: 1;
    overflow-x: auto;
    white-space: nowrap;
}

.pagination {
    margin: 10px 0 10px 0;
}

.pagination button {
    padding: 5px 10px;
    cursor: pointer;
}

.pagination span {
    padding: 5px 10px;
}

.custom-table-style-blue{
    color: #2d75b5;
}

.custom-table-style-red{
    color: #c6291e;
}

.custom-active-color-red{
    color: #ffffff !important;
    background-color: #ff0000;
}