h1 {
    margin-left: 10px;
    margin-top: 10px;
}

.form-group {
    margin: 10px 15px;
}
.filter-form {
    font-size: 19px;
    padding-top:10px;
}
.filter{
    width: 300px;
    font-size: 17px;
}
.species{
    padding-left: 10px;
    width: 300px;
    height: 40px;
    font-style: italic;
    font-size: 17px;
}
.panGeneType{
    padding-left: 10px;
    width: 250px;
    height: 40px;
    font-size: 17px;
}
.search-form {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 40px;

}
.page_size_container{
    padding-top: 10px;
}
.page_filter{
    display: flex;
    justify-content: space-between;
}
#pagination-container {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

#pagination-container button {
    padding: 5px 10px;
    border: 1px solid var(--msir-primary-line);
    background-color: var(--msir-bg-alt);
    cursor: pointer;
    transition: background-color 0.3s;
}

#pagination-container button:hover {
    background-color: var(--msir-primary-soft);
}

#pagination-container button:disabled {
    color: var(--msir-muted);
    cursor: default;
    background-color: var(--msir-bg-alt);
}

#pagination-container span {
    padding: 5px 10px;
}

.table-container{
    display: flex;
    justify-content: center;
}
table {
    border-collapse: collapse;
    text-align: center;
    margin-top: 10px;
}

th, td {
    padding: 5px;
    font-size: 13px;
    border: 1px solid var(--msir-primary-line);
}

th {
    background-color: var(--msir-primary-strong);
    color: white;
    font-weight: bold;
    font-style: normal;
}
.column-header {
    min-width: 120px;
    max-width: 140px;
}

tr:nth-child(even) {
    background-color: var(--msir-bg-alt);
}

tr:hover {
    background-color: var(--msir-primary-soft);
}

.gene-download{

    padding: 10px 15px;
    margin-top: 20px;
    background-color: var(--msir-primary);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.gene-download:hover {
    background-color: var(--msir-primary-strong);
}
/*上一页外表框*/
.bordered-link {
    border: 1px solid var(--msir-primary-line); /* 定义边框的宽度和颜色 */
    padding: 3px; /* 可选，为内容添加一些内边距 */
    display: inline-block; /* 确保边框完全包围链接 */
    text-decoration: none; /* 可选，移除链接的下划线 */
}

/* 按钮样式类 */
.query-button {
            /* 最小宽度，防止文字少的时候过窄 */
            min-width: 60px;
            /* 内边距，避免文字拥挤 */
            padding: 5px 8px;
            /* 白色背景 */
            background: var(--msir-primary);
            /* 文字颜色 */
            color: #fff;
            /* 1像素的边框 */
            border: 2px solid var(--msir-primary);
            /* 鼠标悬停时的样式 */
            cursor: pointer;
            /* 圆角效果 */
            border-radius: 3px;
        }
/* 鼠标悬停时改变背景和文字颜色 */
.query-button:hover {
            color: #fff;
            background: var(--msir-primary-strong);
        }
/* 获得焦点时去掉默认的外边框并且和悬停效果一致 */
.query-button:focus {
            outline: none;
            color: #fff;
            background: var(--msir-primary-strong);
        }