.marginbottom {
    margin-bottom: 20px;
}


main.col-md-3 {
    position: sticky;
    top: 18px;
}

.chapter-title-nav {
    overflow-y: auto; /* 添加垂直滚动条 */
    max-height: calc(100vh - 20px); /* 设置最大高度，减去一些边距 */
    visibility: hidden; /* 初始隐藏左侧导航 */
    opacity: 0; /* 设置透明度为0 */
    transition: visibility 0s, opacity 0.5s; /* 设置过渡效果 */
}

    .chapter-title-nav.visible {
        visibility: visible; /* 加载完成后显示 */
        opacity: 1; /* 设置透明度为1 */
    }


.chapter-menu {
    display: none;
}

.chapter-menu-btn {
    display: flex;
    justify-content: flex-end; /* 右对齐 */
    margin-bottom: 10px; /* 可选：添加下边距 */
    margin-right: 32px;
}

.chapter-menu-list {
    display: none;
}

    .chapter-menu-list.show {
        display: block; /* 当添加 show 类时显示 */
    }

.chapter-right {
    background-color: white; /* 左侧部分的白色背景 */
    border-radius: 5px; /* 圆角效果 */
    padding: 20px 20px 20px 20px; /* 内边距，增加可读性 */
}

.chapter-nav {
    background-color: white; /* 背景颜色，确保内容可读 */
    overflow: hidden; /* 确保圆角效果 */
    border-top-left-radius: 15px; /* 左上角圆角 */
    border-top-right-radius: 15px; /* 右上角圆角 */
    overflow-y: auto; /* 添加垂直滚动条 */
    height: calc(100vh); /* 根据需要调整高度，减去上下padding */
}

.chapter-corners {
    width: 100%; /* 确保图片适应容器宽度 */
    height: auto; /* 保持比例 */
}

.chapter-title {
    background-color: green; /* 绿色背景 */
    color: white; /* 白色文字 */
    padding: 10px; /* 内边距，增加可读性 */
    margin: 10px 0; /* 上下外边距 */
    font-size: 1.1em; /* 字体大小 */
    height: 50px; /* 固定高度 */
    display: flex; /* 使用Flexbox布局 */
    align-items: center; /* 垂直居中 */
    border-radius: 5px; /* 圆角效果 */
}

.sub-chapter {
    margin: 10px 20px; /* 上下外边距 */
    padding: 8px; /* 内边距，增加可读性 */
    display: flex; /* 使用Flexbox布局 */
    align-items: center; /* 垂直居中 */
    background-color: #dff0d8; /* 浅绿色背景 */
    border-radius: 20px; /* 圆角效果 */
    transition: background-color 0.3s; /* 背景颜色渐变效果 */
}

    .sub-chapter a {
        text-decoration: none; /* 去掉链接下划线 */
        color: black; /* 链接文字颜色 */
        width: 100%; /* 使链接占满整个容器 */
        text-align: center; /* 链接文本居中 */
    }

    .sub-chapter:hover {
        background-color: #c3e6cb; /* 悬停时背景颜色变化 */
    }

    .sub-chapter.active {
        background-color: #28a745; /* 当前链接的背景颜色 */
        color: white; /* 当前链接文字颜色 */
    }

        .sub-chapter.active a {
            color: white; /* 当前链接文字颜色为白色 */
        }

.chapter-previousnext {
    display: flex; /* 使用Flexbox布局 */
    justify-content: space-between; /* 左右对齐 */
    align-items: center; /* 垂直居中对齐 */
    margin: 10px 0; /* 添加上下边距 */
}

.chapter-btn {
    background-color: #dff0d8; /* 浅绿色背景 */
    color: black; /* 链接文字颜色 */
    text-decoration: none; /* 去掉链接下划线 */
    padding: 5px 10px; /* 内边距 */
    border-radius: 5px; /* 圆角效果 */
    transition: background-color 0.3s; /* 背景颜色渐变效果 */
}

    .chapter-btn:hover {
        background-color: #c3e6cb; /* 悬停效果 */
    }

    .chapter-btn:active {
        background-color: #28a745; /* 当前链接的背景颜色 */
        color: white; /* 当前链接文字颜色 */
    }

@media (max-width: 768px) {
    .chapter-left {
        display: none;
    }

    .chapter-menu {
        display: block;
    }
}