.advanced-search-container {
    width: 100%;
    margin: 0 auto 20px;
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.form-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.form-column {
    flex: 1;
    margin-right: 20px;
}



.form-column:last-child {
    margin-right: 0;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}


.advanced-search-button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1em;
    font-weight: bold;
    color: #fff;
    background-color: #334555;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.advanced-search-button:hover {
    background-color: #0056b3;
    box-shadow: 0 4px 8px rgba(0, 87, 179, 0.4);
}

.choice-label {
    margin-right: 10px;
    display: flex;
    justify-content: flex-start ! important;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}


/* 分页容器样式 */
.pagination {
    margin-top: 20px;
    text-align: right; /* 居中对齐，以形成视觉焦点 */
    font-size: 1em;
    padding: 10px; /* 添加内边距形成间距 */ /* 背景使用浅灰色 */
    border-radius: 0; /* 卡片式圆角 */
     /* 轻微阴影形成卡片风格 */
}

/* 分页链接样式 */
.pagination .step-links a {
    color: #00789F;
    text-decoration: none;
    font-weight: 600; /* 设置字体稍微加粗 */
    margin: 0 10px;
    transition: color 0.3s ease, transform 0.3s ease; /* 增加交互效果，点击时放大 */
}

.pagination .step-links a:hover {
    color: #185d79; /* 悬停时的深蓝色 */
    transform: scale(1.1); /* 鼠标悬停时微微放大 */
}

/* 当前页的文本样式 */
.pagination .current {
    font-weight: bold;
    margin: 0 10px;
    color: #495057; /* 使用较深的灰色使其可见但不太突兀 */
}
.checkbox-group-row {

    margin-top: 10px; /* 与上一行的输入框分隔 */
    display: flex;
    justify-content: flex-start ! important;
    align-items: center;
    gap: 0; /* 使用 gap 属性来调整复选框之间的距离，更紧密地排列在一起 */
}

.checkbox-group-row label {
    margin-right: 10px; /* 让勾选框之间有足够的间距 */
    display: flex;
    align-items: center;
}

.checkbox-group-row input {
    margin-right: 5px;
}

.form-container {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 标签样式 */
.form-label {
    display: block;
    margin-bottom: 8px;
    font-size: 1.1em;
    font-weight: 600;
    color: #333;
}

.search-link {
    color: #00789f;
    text-decoration: underline;
    cursor: pointer;
}

.search-link:hover {
    color: #0056b3;
}

/* 输入框样式 */
.form-input {
    width: calc(100% - 22px); /* 调整为100%减去边距和边框的总和 */
    padding: 10px;
    margin-bottom: 20px;
    border: 2px solid #ccc;
    border-radius: 4px;
    outline: none;
    font-size: 1em;
    color: #333;
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-sizing: border-box; /* 确保 padding 和 border 都包含在宽度内 */
    height: 48px
}

/* 针对 select 元素的具体样式调整 */
select.form-input {
    width: calc(100% - 22px); /* 确保与文本框的宽度一致，减去边框 */
    padding: 10px;
    margin-bottom: 20px;
    border: 2px solid #ccc;
    border-radius: 4px;
    outline: none;
    font-size: 1em;
    color: #333;
    box-sizing: border-box; /* 确保宽度包含边框和内边距 */
    appearance: auto; /* 保持默认箭头 */
    -webkit-appearance: menulist; /* 对于部分浏览器，确保默认样式一致 */
}




.form-input:focus {
    border-color: #007BFF;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.4);
}

/* 按钮样式 */
.form-button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1em;
    font-weight: bold;
    color: #fff;
    background-color: #334555;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.form-button:hover {
    background-color: #0056b3;
    box-shadow: 0 4px 8px rgba(0, 87, 179, 0.4);
}

@media (max-width: 768px) {
    .form-row {
        flex-direction: column; /* 垂直堆叠 */
    }

    .form-column {
        width: 100%; /* 占据整个容器的宽度 */
    }
}

/* 在 768px 至 1024px 之间（例如平板设备），两栏布局 */
@media (min-width: 768px) and (max-width: 1024px) {
    .form-column {
        width: calc(50% - 10px); /* 宽度为容器的一半减去间距的一部分 */
    }
}
.kd-range-container {
    display: flex; /* 使用 Flexbox 布局 */
    align-items: center; /* 让所有子元素在纵向上居中 */
    gap: 10px; /* 设置元素之间的间距 */
    margin-bottom: 20px; /* 容器下方的间距 */
}

/* 标签样式 */
.kd-range-container label {
    margin: 0; /* 去掉标签的默认外边距 */
    font-size: 1em; /* 确保标签大小一致 */
}

/* 输入框样式 */
.small-input {
    width: 80px; /* 设置输入框的宽度，使得它在行内紧凑显示 */
    padding: 5px; /* 调整输入框的内边距 */
    border: 2px solid #ccc;
    margin-bottom: 0;
    border-radius: 4px;
    outline: none;
    font-size: 1em; /* 字体稍小一些，使输入框不显得太大 */
    box-sizing: border-box; /* 包括边框和内边距在内的宽度 */
}


.example-button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1em;
    font-weight: bold;
    color: #fff;
    background-color: #334555;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}