.query {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    justify-content: space-between; /* 在主轴上均匀分配空间 */
    padding: 2px; /* 内边距 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影 */
    border-radius: 5px; /* 圆角 */
    background-color: #f9f9f9; /* 背景颜色 */
    font-family: 'Times New Roman', Times, serif;
    font-weight: 100;
    font-size: x-small;
}

.query ul {
    list-style-type: none; 
    padding: 0; 
    gap: 2px;
    display: flex;
    flex-wrap: wrap; 
    width: 100%; 
    align-content: center;
    justify-content: center;
}

.query li {
    flex: 1 1 20%; 
    max-width: 100px;
    margin: 0px;
}

.query span {
    display: inline-block; 
    margin-right: 10px; 
}

.query .select {
    width: 100%; 
    padding: 1px; 
    font-family:Arial, Helvetica, sans-serif;
    font-weight: 100;
    font-size: x-small;
}

.query .submit {
    border: 1px solid;
    border-radius: 5px; 
    cursor: pointer; 
}

.query .submit:hover {
    background-color: #e9c54d; 
}

.not-all {
    background-color: rgb(240, 128, 128);
}

/* 响应式设计 */
@media (max-width: 600px) {
    .query li {
        flex: 1 1 100%; /* 在小屏幕上每个 li 占据整行 */
    }
}


.header-query{
    font-weight: bold;
    z-index: 1000;
    width: 100%;
    border-bottom: 1px solid black;
    display: flex;
    justify-content: center;
    padding-right: 0px;
}

.header-query:hover{
    background-color: rgb(234, 131, 131);
    border-radius: 5%;
    cursor: pointer;
    color: rgb(24, 2, 2);
}

.header-query .collapse-icon{
    width: 12px;
    height: 12px;
}

/* .header-query .collapse-icon::before {
    content: "▲";
    position: absolute;
    top: 2%;
    right: 10%;
    font-size: 12px;
    color: #ee1717;
}

.header-query .collapse-icon::after {
    content: "▼";
    position: absolute;
    top: 35%;
    right: 10%;
    font-size: 12px;
    color: rgb(9, 24, 24);
} */

.header-query .collapse-icon path{
    fill: rgb(241, 248, 101);
    /* fill: rgb(160, 161, 140); */
}

.header-query .collapse-icon .line{
    stroke: rgb(69, 167, 203);
    stroke-width: 1;
}

.circle {
    width: 16px; /* 圆的宽度 */
    height: 16px; /* 圆的高度 */
    background-color: hsl(30, 89%, 62%); /* 圆的背景颜色 */
    border-radius: 50%; /* 将 div 变成圆形 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    color: rgb(35, 2, 2); /* 文字颜色 */
    font-size: 12px; /* 文字大小 */
    font-weight: bold; /* 文字加粗 */
    margin-top: -1px;
    margin-right: 2px;
    padding-left: 1px;
}