ul.allDoctorDetail {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* 从左对齐 */
    list-style: none;
    padding: 0;
}


li.allDoctorDetail {
    flex: 0 0 calc(10% - 15px); /* 计算每个元素的宽度，可以根据需要调整百分比和间距 */
    margin: 10px; /* 设置元素之间的间距 */
    text-align: center; /* 文字居中 */
    /*background-color: #c4ebff; !* 设置背景颜色 *!*/
    /*border: 1px solid #ccc; !* 设置边框样式 *!*/
    padding: 10px; /* 设置内边距 */
    border-radius: 15px; /* 设置按钮的圆角半径 */
}

/*按钮的样式*/
.filterButton-choose {
    background-color: #86d7f6; /* 设置背景颜色 */
}

.filterButton-no-choose {
    background-color: #c4ebff; /* 设置背景颜色 */
}


ul > li > button {
    border: none; /* 移除边框 */
    background-color: transparent; /* 移除背景色 */
    padding: 0; /* 移除内边距 */
    margin: 0; /* 移除外边距 */
    /*cursor: pointer; !* 显示手型光标 *!*/
    font-size: 15px;
    white-space: nowrap; /* 防止文本换行 */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: bold; /* 加粗字体 */
}

/*下面是医生的卡片展示*/
.doctorCardUl {
    list-style: none; /* 移除ul的默认小黑点 */
    display: flex;
    flex-wrap: wrap;
    padding: 0;
}


.doctorCard-css {
    font-family: Arial, sans-serif;
    background-color: rgba(242, 242, 242, 0.18);
    /*width: calc(33.3333% - 20px); !* 控制元素的宽度，减去间距 *!*/
    margin: 10px; /* 控制元素之间的间距 */
    /*box-sizing: border-box; !* 使用盒子模型 *!*/
    /*display: inline-block; !* 让元素在同一行显示 *!*/
    /*aspect-ratio: 4 / 3; !* 设置卡片的宽高比例为4:3 *!*/
}

.doctorLink {
    text-decoration: none; /* 移除下划线 */
    color: inherit; /* 继承父元素的颜色，通常是文本颜色 */
    cursor: auto; /* 显示鼠标手型光标 */
}

.doctor-row {
    display: flex;
    flex-wrap: wrap; /* 添加wrap属性以实现自动换行 */
    margin: 0; /* 移除外边距 */
}

/* 最后一个元素移除右侧间距 */
.doctorCard-css:last-child {
    margin-right: 0;
}

.doctor-col {
    height: 460px;
    width: 270px;
    box-sizing: border-box;
    /*flex: 0 0 calc(33.3333% - 20px); !* 计算每列的宽度 *!*/
    margin: 10px; /* 外边距用于列之间的间距 */
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column; /* 设置列内部内容垂直布局 */
    justify-content: space-between; /* 上下内容均匀分布 */

}

.doctor-col:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 悬停时的阴影效果 */
}

.image {
    width: 270px;
    height: 385px;
    /*width: 100%;*/
    /*height: 50%;*/
    /*max-height: 66%; !* 图片最大高度为卡片高度的三分之二 *!*/
    /*object-fit: cover; !* 保持图片比例并填充整个容器 *!*/
}

.doctor-card__body {
    padding-left: 10px;
    padding-right: 10px;
    margin-top: -20px; /* 负上外边距将内容往上移动 */
}

/* 以下是医生详情介绍页面的CSS */
.doctorMsgContainer {
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* 垂直居中 */
}

.doctorMsgPhoto {
    max-width: 100%; /* 图片宽度不超过父容器 */

    :is(img) {
        max-width: 330px;
        max-height: 330px;
        width: auto;
        height: auto;
    }
}

.doctorDetail {
    flex: 1; /* 剩余空间全部分配给详情部分 */
    padding-left: 20px;
}

/* 当浏览器宽度小于1200px时应用的样式 */
@media screen and (max-width: 1200px) {
    .doctorMsgContainer {
        flex-direction: column; /* 垂直布局 */
        text-align: center; /* 文字居中 */
    }

    .doctorDetail {
        padding-left: 0; /* 移除左侧边距 */
    }
}

.doctor-card__body_name {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    height: 70px;
}