body {
    padding-top: 46px;
    padding-bottom: 10px;
    background-color: #F0F0F0;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* 自定义关键字颜色 */
.hljs-keyword {
    color: #f06 !important; /* 新的关键字颜色 */
}

.dl-horizontal dt {
    white-space: normal;
}

input,
select,
textarea {
    max-width: 280px;
}

/* 基础样式 */
h1 {
    font-size: 2.5rem;
    font-weight: bold;
}

h2 {
    font-size: 2.25rem;
    font-weight: bold;
}

h3 {
    font-size: 2rem;
    font-weight: bold;
}

h4 {
    font-size: 1.75rem;
    font-weight: bold;
}

h5 {
    font-size: 1.5rem;
    font-weight: bold;
}

h6 {
    font-size: 1.35rem;
    font-weight: bold;
}


/* 全局样式 */
body, .navbar .nav > li > a, .navbar-form .form-control, footer, .btn {
    color: #000; /* 统一字体颜色为黑色 */
}

.table-container {
    width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}


/* 导航栏样式 */
.navbar {
    background-color: #fafafa; /* 㳀白色自定义导航栏背景色 */
    padding: 0 25px; /* 左右内边距 */
}


.navbar-toggle {
    background-color: #0078d4; /* 蓝色切换按钮背景色 */
}

    .navbar-toggle .icon-bar {
        background-color: #fff; /* 白色切换按钮的图标条颜色 */
    }

.navbar .nav > li > a,
.navbar .navbar-brand { /* 应用样式到 navbar-brand */
    text-decoration: none; /* 默认不显示下划线 */
    font-size: 14px; /* 与导航链接字体大小一致 */
}

    .navbar .nav > li > a:hover,
    .navbar .navbar-brand:hover { /* 应用悬停样式到 navbar-brand */
        text-decoration: underline; /* 鼠标悬停时添加下划线 */
        color: #005a9e; /* 深蓝色鼠标悬停时颜色变化 */
    }

    .navbar .nav > li > a:visited,
    .navbar .navbar-brand:visited { /* 应用访问过的样式到 navbar-brand */
        color: #666; /* 深灰色点击过的链接颜色 */
    }

.navbar-form {
    display: flex; /* 搜索框与按钮在同一行显示 */
    align-items: center; /* 垂直对齐 */
    margin-top: 8px; /* 顶部外边距 */
}

    .navbar-form .form-group {
        margin-right: 5px; /* 控制搜索框与按钮之间的间距 */
    }

/* 小屏幕隐藏*/
.navbar-inverse .navbar-brand-visible-xs {
    display: none;
}

.btn, .btn-primary {
    background-color: #0078d4; /* 蓝色按钮背景色 */
    color: #fff; /* 白色按钮文本颜色 */
    border: none;
    padding: 5px 10px;
    font-size: 1em;
    border-radius: 4px;
    text-decoration: none;
}

    .btn:hover, .btn-primary:hover {
        background-color: #005a9e; /* 深蓝按钮悬停背景色 */
    }

.centered-btn0 {
    text-align: center;
    margin-bottom: 5px;
}

.centered-btn1 {
    text-align: center;
    margin-bottom: 5px;
    margin-top: 10px;
}

.container-fluid.body-content {
    margin-top: 18px;
}

/* 文章卡片样式 */
.article-card {
    display: flex;
    border: 1px solid #e1e1e1; /* 浅灰色边框的颜色 */
    border-radius: 8px;
    padding-left: 26px;
    padding-right: 26px;
    margin-bottom: 16px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    background-color: #fff; /*白色*/
    transition: box-shadow 0.3s ease;
}

    .article-card:hover {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }

.article-content {
    display: flex;
    align-items: center; /* 垂直居中所有子元素 */
    height: 100%; /* 确保高度覆盖整个容器 */
}

    /* 使包含类别图标的div成为Flexbox容器 */
    .article-content .title-link {
        display: flex;
        align-items: center; /* 垂直居中 */
    }

category-content {
    display: flex;
    align-items: center; /* 垂直居中内部元素 */
    border-right: 1px solid #e1e1e1; /* 右边框 */ /* 浅灰色边框的颜色 */
    padding-right: 16px; /* 右内边距 */
}

.category-icon {
    border-radius: 50%;
    border: 2px solid #e1e1e1; /* 浅灰色边框的颜色 */
    width: 50px;
    height: 50px;
    margin-right: 16px;
}

.article-count {
    width: 25px; /* 确保和图片宽度一致 */
    height: 25px; /* 确保和图片高度一致 */
    border-radius: 50%; /* 圆形背景 */
    background-color: #fff; /* 白色圆形背景颜色 */
    border: 2px solid #e1e1e1; /* 浅灰色边框的颜色 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px; /* 和图片之间的间距 */
    font-size: 16px; /* 调整字体大小 */
    color: #333; /* 调整字体颜色 */ /*比666更深的灰色*/
    font-weight: bold; /* 加粗字体 */
}

.text-content {
    flex: 1;
    border-left: 1px solid #e1e1e1; /* 设置右边框的颜色和宽度 */ /* 浅灰色边框的颜色 */
    padding-left: 16px; /* 可选：为右边框添加一些内边距 */
    padding-top: 16px; /* 可选：为左边框添加一些内边距 */
    padding-bottom: 16px; /* 可选：为上边框添加一些内边距 */
}

.article-title {
    font-size: 1.4em;
    margin: 0;
    font-weight: bold;
    line-height: 1.3;
    color: #333; /*比666更深的灰色*/
}

.title-link, .summary-link, .info-box p a {
    color: #000; /* 链接颜色设置为黑色 */
    text-decoration: none;
}

    .title-link:hover, .summary-link:hover, .info-box p a:hover {
        text-decoration: underline;
        color: #005a9e; /* 深蓝鼠标悬停时颜色变化 */
    }

    .title-link:visited, .summary-link:visited, .info-box p a:visited {
        color: #666; /* 深灰色点击过的链接颜色 */
    }

.article-summary {
    margin: 5px 0 6px 0;
    color: #666; /*深灰色*/
}
/* 样式用于标签链接 */
.article-tags {
    margin-top: 6px;
    margin-left: -6px;
}

.article-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #666; /*深灰色*/
    margin-top: 6px;
}

.meta-stats {
    display: flex;
    align-items: center;
}

.stats {
    margin-right: 0px;
}

.no-data {
    color: #999; /*中等深度的灰色*/
}


.pagination {
    display: flex;
    justify-content: center;
    margin: 16px 0;
}

    .pagination ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
    }

    .pagination li {
        margin: 0 5px;
    }

    .pagination a {
        text-decoration: none;
        padding: 10px 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
        color: #007bff; /*#007bff 是一种明亮且具有现代感的蓝色调颜色代码*/
        font-size: 14px;
        transition: background-color 0.3s, color 0.3s;
    }

        .pagination a.page-link:hover {
            background-color: #007bff; /*#007bff 是一种明亮且具有现代感的蓝色调颜色代码*/
            color: #fff;
        }

    .pagination li.active a {
        background-color: #007bff; /*#007bff 是一种明亮且具有现代感的蓝色调颜色代码*/
        color: #fff; /*白色*/
        border: 1px solid #007bff; /*#007bff 是一种明亮且具有现代感的蓝色调颜色代码*/
    }

/* 确保屏幕阅读器可以访问分页控件 */
[aria-label="Pagination"] {
    display: block;
}

.tag-link {
    display: inline-block;
    background-color: #fff; /* 标签背景色 */
    border: 2px solid #e1e1e1; /* 浅灰色边框的颜色 */
    color: #333; /* 标签文本颜色 */ /*比666更深的灰色*/
    padding: 5px 10px; /* 内边距 */
    border-radius: 16px; /* 圆角，形成椭圆形 */
    text-decoration: none; /* 去掉下划线 */
    margin: 0 5px; /* 标签之间的间隔 */
    font-size: 14px; /* 标签文字大小 */
    transition: background-color 0.3s, color 0.3s; /* 平滑过渡效果 */
}

    .tag-link:hover {
        background-color: #007bff; /* 悬停时背景色 */ /*#007bff 是一种明亮且具有现代感的蓝色调颜色代码*/
        color: #fff; /* 白色悬停时文本颜色 */
    }



.loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px; /* 可以根据需要调整高度 */
}

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

.info-box {
    border: 1px solid #e1e1e1; /* 浅灰色边框的颜色 */
    border-radius: 8px;
    padding: 16px 16px;
    margin-bottom: 16px;
    background-color: #fff; /*白色*/
}

.info-title {
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: bold;
    line-height: 1.3;
    font-size: 1.4em;
}

.info-box p {
    font-size: 1em;
    color: #666; /*深灰色*/
}


footer {
    background-color: white; /* 左侧部分的白色背景 */
    margin-top: auto; /* 将footer推到底部 */
    width: 100%;
    text-align: center; /* 页脚内容水平居中 */
    padding: 10px 0;
    font-size: 0.9em;
    color: #333; /*比666更深的灰色*/
}

.footer-content {
}

    .footer-content a {
        color: #000; /* 链接颜色设置为黑色 */
        text-decoration: none;
    }

        .footer-content a:hover {
            text-decoration: underline;
            color: #005a9e; /* 深蓝鼠标悬停时颜色变化 */
        }

.qrcode-container {
    display: flex;
    justify-content: center;
}

.qrcode {
    margin-right: 10px;
    text-align: center;
}

    .qrcode img {
        width: 120px; /* 或其他适合的大小 */
        height: auto;
    }

    .qrcode p {
        margin-top: 5px;
        font-size: 0.8em;
    }


#articleContent img {
    max-width: 100%;
    height: auto;
}

.article-read {
    border: 1px solid #e1e1e1; /* 浅灰色边框的颜色 */
    border-radius: 8px;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 18px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    background-color: #fff; /*白色*/
    transition: box-shadow 0.3s ease;
    max-width: 100%; /* 确保内容不会超出其父容器的宽度 */
    word-wrap: break-word; /* 允许长单词或URL换行到下一行 */
    overflow-wrap: break-word; /* 与word-wrap相同，但更现代的属性名称 */
}

    .article-read hr {
        margin-left: -12px; /* 减去左边距 */
        margin-right: -12px; /* 减去右边距 */
        border: 0; /* hr默认有边框，这里我们使用背景色来实现边框效果 */
        height: 1px; /* 边框的厚度 */
        background-color: #e1e1e1; /* 浅灰色边框的颜色 */
    }

.article-header {
    text-align: center;
    margin-bottom: 16px;
}

#articlecontent {
    white-space: normal; /* 默认值，确保换行 */
    word-wrap: break-word; /* 长单词或URL在边界内换行 */
    overflow-wrap: break-word; /* 同上，新标准 */
}

#articlecontent pre {
    overflow-x: auto; /* 允许水平滚动 */
    background-color: black; /* 黑色背景 */
    color: white; /* 白色字体 */
}

    #articlecontent pre code {
        background-color: black; /* 黑色背景 */
        white-space: nowrap; /* 不换行 */
        white-space: pre; /* 保持空白字符，包括换行符、空格和制表符 */
        display: block; /* 确保代码块为块级元素 */
        max-width: 100%; /* 确保不超出父容器 */
    }

 
.article-footer {
    text-align: center;
}

.article-header-title {
    font-size: 14px;
    color: #888; /*中等深度的灰色*/
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

    .article-header-title span {
        margin: 0 2px;
    }



.button-wrapper {
    position: relative;
    background-color: #fff; /*白色*/
    display: flex; /* 使用 flex 布局 */
    width: 100%; /* 宽度与 <pre> 相同 */
    border: 1px solid #ccc; /* 较浅的灰色添加边框 */
    box-sizing: border-box; /* 确保边框不会增加 <div> 的总宽度 */
    align-items: center; /* 垂直居中对齐内容 */
    border-bottom: none; /* 移除下边框 */
}

.copy-button {
    margin-left: auto; /* 将按钮推到右侧 */
    background-color: #4CAF50; /*绿色*/
    color: #fff;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

    .copy-button:active {
        background-color: #45a049; /*鲜艳的绿色*/
    }

.btn-like {
    background-color: #4CAF50; /*绿色*/
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}

    .btn-like:active {
        background-color: #45a049; /*鲜艳的绿色*/
    }

.fa {
    margin-right: 5px;
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.main-container {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    padding: 16px 0; /* 上下内边距为5px，左右内边距为0 */
}

/* Like按钮样式 */
.like-button {
    align-items: center; /* 垂直对齐 */
    justify-content: center; /* 水平对齐 */
    background-color: #0078d4; /* 蓝色背景 */
    color: #fff; /* 白色文字 */
    border: 1px solid #0078d4; /* 蓝色边框 */
    border-radius: 16px; /* 圆角，形成椭圆形 */
    padding: 5px 10px;
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .like-button:hover {
        background-color: #005a9e; /* 悬停时变成深蓝色 */
    }

    .like-button .like-icon {
        margin-right: 5px; /* 图标与文字间距 */
    }

/* 文本居中样式 */
.article-footer-text-center {
    text-align: center;
    margin-bottom: 16px;
}


@media (max-width: 767px) {

    h1 {
        font-size: 2.25rem;
        font-weight: bold;
    }

    h2 {
        font-size: 2rem;
        font-weight: bold;
    }

    h3 {
        font-size: 1.75rem;
        font-weight: bold;
    }

    h4 {
        font-size: 1.5rem;
        font-weight: bold;
    }

    h5 {
        font-size: 1.35rem;
        font-weight: bold;
    }

    h6 {
        font-size: 1.25rem;
        font-weight: bold;
    }

    .navbar-inverse .navbar-brand-visible-xs {
        display: block;
    }

    /* 隐藏右侧侧边栏 
    aside.col-md-3 {
        display: none;
    }
*/
    /* 小屏幕时文章卡片样式调整 */
    .article-card {
        box-shadow: none; /* 移除阴影 */
        border-radius: 0; /* 直角 */
        padding: 3px; /* 移除内边距 */
        margin-bottom: 0; /* 移除外边距 */
        transition: none; /* 移除过渡效果 */
        border-left: 0px;
        border-right: 0px;
        border-top: 0px;
        border-bottom: 1px solid #e1e1e1; /* 添加下边框 */ /* 浅灰色边框的颜色 */
    }

        .article-card:last-child {
            margin-bottom: 0; /* 最后一个卡片不需要底部边距 */
        }

    .text-content {
        padding-left: 0px; /* 可选：为右边框添加一些内边距 */
        padding-top: 0px; /* 可选：为左边框添加一些内边距 */
        padding-bottom: 0px; /* 可选：为上边框添加一些内边距 */
        border-left: 0px; /* 添加下边框 */
    }

    .article-title {
        font-size: 1em; /* 适当减小标题字体大小 */
    }
    /* 小屏幕设备上，设置图片的宽度和高度 */
    .article-content .title-link img.category-icon {
        margin-right: 10px;
    }

    /* 小屏幕上显示示所有非标题内容 */
    .article-count,
    .text-content .article-summary,
    .text-content .article-tags {
        display: none;
    }

    .hide-on-small-screen {
        display: none;
    }

    .pagination ul {
        display: flex;
        flex-wrap: wrap; /* 允许分页元素换行 */
        justify-content: center; /* 居中显示分页 */
        padding: 0;
        margin: 0;
        list-style: none;
    }

        .pagination ul li {
            flex: 1 1 auto; /* 让每个分页项自动调整宽度 */
            margin: 2px; /* 控制分页项之间的间距 */
            display: inline-block;
            text-align: center;
        }

            .pagination ul li a {
                padding: 8px 8px;
                display: block;
                background-color: #f0f0f0;
                border-radius: 4px;
                text-decoration: none;
            }

                .pagination ul li a:hover {
                    background-color: #ccc;
                }

            .pagination ul li.active a {
                background-color: #007bff;
                color: white;
            }

            .pagination ul li.disabled span {
                color: #999;
            }
}