body {
    background: url('LeanAmoeba_bg.png') no-repeat center center fixed;
    background-size: cover;
    }
    /* 主面板的样式定义 */
    #main-panel {
        overflow-x: auto;
        width: 100%;
    }

    /* 让员工更幸福的字体样式 */
    h4.text-center.mb-3:hover {
        color: #0056b3; /* 更深的蓝色，在悬停时 */
    }

    .search-panel {
        padding: 10px;
        /* padding: 0 18px; */
        background-color: white;
        /* overflow: visible; */
        z-index: 1000 !important;
        /* 解决下拉菜单被下面的面板挡住的问题 */
        position: relative;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    .modal-backdrop {
        z-index: 1040 !important;
    }
    
    /* 左侧报表面板的样式定义 */

    #left-panel {
        overflow-x: auto;
        z-index: 900 !important; /* 确保面板在表单后面 */
    }

    .left-panel {
        /* background-color: #f8f9fa; 左侧面板背景颜色 */
        background-color: white;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        height: 1150px; /* 高度，根据需要调整，右侧面板的高差调整，在scripts.js 中的 adjustRightPanelHeight(); */
        z-index: 900 !important; /* 确保面板在表单后面 */
    }

    .right-panel {
        /* background-color: #f8f9fa; 右侧面板背景颜色 */
        background-color: white;
        padding: 0px;
        padding-top: 0px; /* 上内边距 */
        border: 1px solid #ddd;
        border-radius: 4px;
        display: none; /* 初始状态下不显示 */
        z-index: 900 !important;
    }

    /* 右侧面板中的详情信息的样式定义 */
    .detail-info {
        background-color: white;
        padding-top: 10px; /* 上内边距 */
        overflow-y: auto;
        padding: 0px;
        border: 0px solid #ddd;
        border-radius: 4px;
        /*max-height: calc(100vh - 100px);  根据需要调整 */
    }
   
    .RightPanel-toggle-button {
        position: fixed;
        top: 50%; /* 使按钮在垂直方向上居中 */
        left: 0px; /* 使按钮靠左侧对齐 */
        transform: translateY(-50%); /* 调整位置以精确居中 */
        background-color: rgba(70, 130, 180, 0.2); /* 设置背景透明度为50% */
        color: rgb(70, 130, 180); /* 按钮文本颜色 */
        border: none; /* 去掉边框 */
        border-radius: 0px 10px 10px 0px; /* 设置按钮的圆角 */
        padding: 10px; /* 内边距 */
        cursor: pointer; /* 鼠标指针样式 */
        z-index: 1080; /* 设置层叠顺序 */
        display: flex;
        justify-content: center;
        align-items: center;
    }  

    .RightPanel-toggle-button.collapsed {
        background-color: rgba(70, 130, 180, 0.2); /* 设置背景透明度为50% */
    }

    .records-info {
        max-height: 100%;
        overflow-y: auto; /* 允许垂直滚动条 */
        background-color: #f8f9fa; /* 右侧面板背景颜色 */
        border: 1px solid #ddd;
        border-radius: 4px;
        width: 100%; /* 设置宽度为100% */
        white-space: normal; /* 强制换行 */
        word-wrap: break-word; /* 强制单词换行 */
        word-break: break-word; /* 使长单词换行 */
        box-sizing: border-box; /* 包含padding和border在内的宽度 */
    }


    .form-container {
        margin-bottom: 15px;
    }
    .search-container {
        margin-bottom: 15px;
        display: flex;
    }
    .search-container input {
        flex: 1;
    }
    .search-container button {
        margin-left: 10px;
    }
    /* 表单部分的格式 */
    .form-control {
        display: block;
        width: 100%;
        height: calc(1.25em + 0.5rem + 2px); /* 调整高度 */
        padding: 0.25rem 0.5rem; /* 调整内边距 */
        font-size: 0.875rem; /* 调整字体大小 */
        font-weight: 400;
        line-height: 1.25; /* 调整行高 */
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    .form-control:focus {
        color: #495057;
        background-color: #fff;
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    /* 对于输入框的样式定义General styles for inputs */
    input.form-control {
        border-radius: 4px;
        border: 1px solid #ccc;
        padding: 10px;
        width: 100%;
        box-sizing: border-box;
    }

    /* Style for the typeahead suggestions */
    .tt-menu {
        width: 100%;
        margin-top: 2px;
        padding: 8px 12px;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
        max-height: 180px;  /* Set a maximum height */
        overflow-y: auto;   /* Make the dropdown scrollable */
        font-size: 0.9rem; /* 调整按钮大小 */
        
    }

    .tt-suggestion {
        padding: 8px 12px;
        border-bottom: 1px solid #ccc;
        cursor: pointer;
    }

    .tt-suggestion:hover {
        background-color: #f0f0f0;
    }

    .tt-suggestion:last-child {
        border-bottom: none;
    }

    /* Fix the width issue of the input field */
    .twitter-typeahead {
        display: block !important;
        /* width: 100% !important; */
    }

    .tt-hint, .tt-input {
        width: 100% !important;
        /* position: relative !important; */
    }

    .tt-menu {
        width: 100% !important;
    }
    /* //以上用来定义项目搜索框中的选项面板板式 */

    /* 关闭弹出窗口按钮的样式 */
    .btn-close {
        color: blue !important; /* 强制设置颜色 */
        font-size: 1.5rem; /* 调整按钮大小 */
    }

    /* 以下是搜索条件框的面板样式 */
    .accordion-button {
        background-color: #007bff;
        color: white;
        cursor: pointer;
        padding: 10px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
        transition: 0.4s;
    }

    /* 以上是搜索条件框的面板样式 */

    /*以下是关于登录卡片，在主页中的显示效果*/
    .login-card {
        background-color: rgba(255, 255, 255, 0.7); /* 设置背景透明度 */
        padding: 45px;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    .login-card h2 {
        font-family: 'Arial', sans-serif; /* 设置字体 */
        font-size: 2em; /* 设置字体大小 */
        color: #305a6e; /* 设置字体颜色 */
    }
    .mission-statement {
        font-family: 'Georgia', serif; /* 设置字体 */
        font-size: 1.5em; /* 设置字体大小 */
        color: #496c75; /* 设置字体颜色 */
        margin-top: 10px;
    }
    /*以上是关于登录卡片，在主页中的显示效果*/

    /* 以下是关于日记账表格的显示效果样式 */
    .journal_table th, .journal_table td {
        white-space: normal; /* 允许换行显示 */
        text-align: center;  /* 居中显示 */
        vertical-align: middle; /* 垂直居中 */
    }
    .journal_table th {
        background-color: #4CAF50; /* 更美观的表头颜色 */
        color: white;
        font-weight: bold;
        position: sticky; /* 固定表头 */
        top: 0;
        z-index: 1; /* 确保表头在最上层 */
    }
    .journal_table {
        table-layout: fixed; /* 固定表格布局 */
        width: 100%;
        border-collapse: collapse; /* 合并边框 */
    }
    .journal_table th, .journal_table td {
        padding: 8px;
        border: 1px solid #dee2e6;
    }

    /* 鼠标滑过背景颜色 */
    .journal_table tbody tr:hover {
        background-color: #ffcc99;
    }
    /* 奇偶行不同背景颜色 */
    .journal_table tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    .journal_table tr:nth-child(odd) {
        background-color: #ffffff;
    }

    /* 行高亮 */
    .journal_table tr.selected {
        background-color: #80bdff !important;
    }

    /* 表格CSS样式，用于显示是否已经审批 */
    .journal_table tr.approved {
        background-color: #d4edda; /* 绿色背景 */
    }

    /* 红色背景 #f8d7da*/
    /* .journal_table tr.not-approved {
        background-color: #f8d7da; 
    } */
    /* 以上是关于日记账表格的显示效果样式 */

    .container {
        margin-top: 20px;
        width: 100%;
    }
    /* 日清详情部分的样式 */
    .card {
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
    }

    .card-header {
        background-color: #f8f9fa;
        padding: 10px;
        border-bottom: 1px solid #ddd;
        font-weight: bold;
        font-size: 1.2em;
        text-align: center; /* 标题居中 */
    }

    .card-body {
        padding: 10px;
    }

    .card-body p {
        margin: 5px 0;
        line-height: 1.5;
    }

    /* 调整不同信息的显示样式 */
    .card-body p span {
        display: inline-block;
        min-width: 70px; /* 设置最小宽度 */
    }

    .journal-load-more-btn {
        background-color: #20c997; /* 清绿色背景 */
        border: none; /* 去掉边框 */
        color: white; /* 文字颜色为白色 */
        padding: 10px 20px; /* 按钮内边距 */
        font-size: 1em; /* 字体大小 */
        cursor: pointer; /* 鼠标悬停时显示指针 */
        width: 100%; /* 宽度100% */
        margin-top: 20px; /* 上边距 */
        border-radius: 5px; /* 圆角 */
        transition: background-color 0.3s ease; /* 背景颜色过渡效果 */
    }

    .journal-load-more-btn:hover {
        background-color: #198754; /* 悬停时的背景颜色 */
        color: white; /* 文字颜色为白色 */
    }

    /* 操作按钮样式 */
    .operate_detail-btn {
        color: #007bff; /* 蓝色 */
    }

    .operate_approve-btn {
        color: #28a745; /* 绿色 */
    }

    .operate_delete-btn {
        color: #dc3545; /* 红色 */
    }

    .operate_receive-btn {
        color: #fd7e14; /* 橙色 */
    }

    .operate_reply-btn {
        color: #004085;
    }

    .operate_disabled-btn {
        color: gray;
        pointer-events: none; /* 禁用点击事件 */
    }

    .operate_button-container {
        display: inline-block;
    }
    
    .operate_btn-link {
        display: inline-block;
        margin-right: 2px; /* 调整按钮之间的间距 */
    }

    .operate_btn-link.disabled {
        color: gray; /* 灰色 */
        pointer-events: none; /* 禁用点击事件 */
        cursor: not-allowed; /* 更改鼠标光标样式 */
    }

    /*以上是关于操作按钮的样式*/


    /* 以下是关于查询栏按钮的颜色设定 */
    .journal-link-btn {
        display: inline-block;
        margin: 0 10px;
        padding: 10px 20px;
        font-size: 1em;
        cursor: pointer;
        text-decoration: none;
        color: #007bff;
        transition: color 0.3s ease, background-color 0.3s ease;
    }

    .journal-link-btn:hover {
        color: #0056b3;
        background-color: #e9ecef;
        border-radius: 5px;
    }

    .journal-link-btn:active {
        color: #004085;
        background-color: #ced4da;
        border-radius: 5px;
    }

    .journal-link-btn.approved {
        color: #007bff; /* Blue */
    }
    
    .journal-link-btn.not-approved {
        color: #dc3545; /* Red */
    }
    
    .journal-link-btn.received {
        color: #17a2b8; /* Teal */
    }
    
    .journal-link-btn.not-received {
        color: #ffc107; /* Yellow */
    }
    
    .journal-link-btn.invoiced {
        color: #fd7e14; /* Orange */
    }
    
    .journal-link-btn.not-invoiced {
        color: #6c757d; /* Gray */
    }
    
    .journal-link-btn.paid {
        color: #28a745; /* Green */
    }
    
    .journal-link-btn.not-paid {
        color: #6c757d; /* Gray */
    }
    
    .journal-link-btn.new-record {
        color: #007bff; /* Blue */
    }
    
    /* 以上是关于查询栏按钮的颜色设定 */


    .report-link {
        display: inline-block;
        margin: 0 10px;
        padding: 10px 20px;
        font-size: 1em;
        cursor: pointer;
        color: #007bff;
        text-decoration: none;
        transition: color 0.3s ease, background-color 0.3s ease;
    }

    .report-link:hover {
        color: #0056b3;
        background-color: #e9ecef;
        border-radius: 5px;
    }

    .report-link:active {
        color: #004085;
        background-color: #ced4da;
        border-radius: 5px;
    }

    .journal-textarea {
        height: 120px; /* 调整高度 */
    }

    /* 审批按钮的样式 */
    /* .journal_approve-btn {
        background-color: #4CAF50; 
        border: none;
        color: white;
        padding: 2px 2px !important;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 10px;
        margin: 2px 1px !important;
        cursor: pointer;
        border-radius: 5px !important;
    }

    .journal_approve-btn:hover {
        background-color: #45a049; 
    } */
    
    /* 详情按钮的样式 */
    /* .journal_detail-btn {
        background-color: #007bff;
        border: none;
        color: white;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 10px;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 12px;
    }

    .journal_detail-btn:hover {
        background-color: #0056b3;
    } */

    @media (max-width: 1200px) {
        .list-group-item p {
            font-size: 1.5em; /* 增大文字尺寸 */
        }
        .list-group-item .btn {
            font-size: 1.35em; /* 增大按钮文字尺寸 */
        }
        .list-group-item textarea {
            font-size: 1.5em; /* 增大 textarea 文字尺寸 */
        }

        /* 小屏幕中的左面板样式 */
        .left-panel {
            font-size: 1.5rem; /* 调整输入框的字体大小 */
            height: auto; /* 确保左侧面板在小屏幕上高度自适应 */
        }

        /* 小屏幕中的右面板样式 */
        .right-panel {
            display: none; /* 初始状态下不显示 */
            font-size: 1.35rem; /* 调整输入框的字体大小 */
            overflow-x: auto;
            height: auto; /* 确保右侧面板在小屏幕上高度自适应 */
        }

        .RightPanel-toggle-button {
            padding: 20px 15px; /* 增高点击按钮 */
            font-size: 1.3em; /* 增大字体 */
        }

        .form-row {
            display: flex;
            flex-wrap: wrap;
        }

        .input-group-mini {
            flex: 0 0 48%;
            margin-right: 2%;
            margin-bottom: 10px;
        }

        .input-group-mini:nth-child(2n) {
            margin-right: 0;
        }

        .input-field {
            width: 100%;
            padding: 5px;
            font-size: 1.5rem; /* 调整输入框的字体大小 */
        }

        /* 调整按钮的文字大小 */
        .btn-sm {
            font-size: 1.25rem; /* 调整字体大小 */
            padding: 0.75rem 1.0rem; /* 调整内边距 */
        }
    }

    @media (min-width: 2560px) {
        /* 以下是主容器的样式设计 */
        .custom-container {
            padding: 10px; /* 增加内边距 */
            font-size: 1.25rem; /* 调整字体大小 1.25rem */
        }


        .form-control {
            font-size: 1.1rem; /* 调整输入框的字体大小 1.25rem*/
            padding: 0.25rem 0.25rem; /* 调整输入框的内边距 */
        }

        .btn-primary {
            font-size: 1.0rem; /* 调整按钮的字体大小 1.25rem*/
            padding: 0.25rem 0.25rem; /* 调整按钮的内边距 */
        }
        
        /* 以上是主容器的样式设计 */


        .left-panel, .right-panel, .detail-info {
            height: 1250px; /* 调整左侧面板在超大屏幕上的高度 */
        }

        .form-control {
            font-size: 1.25rem; /* 调整超大屏幕上输入框的字体大小 */
            padding: 0.25rem 0.25rem; /* 调整超大屏幕上输入框的内边距 */
        }

        .btn-primary {
            font-size: 1.25rem; /* 调整超大屏幕上按钮的字体大小 */
            padding: 0.25rem 0.25rem; /* 调整超大屏幕上按钮的内边距 */
        }

        .logbook-textarea {
            height: 200px; /* 调整超大屏幕上文本区域的高度 */
        }
    }

    /* 以下是关于打印显示的样式，不在打印页面显示 */
    /* 在table属性中，固定表格布局,会 导致表格每一列的宽度一样，取消本样式 table-layout: fixed !important;*/
    @media print {
        #header-navbar,
        #queryForm,
        #RightPanel-toggle-button,
        #hourly_report_btn,
        #right-panel-form,
        #right-panel-details,
        #LeanFooter, #Journal_Footer {
            display: none !important; /* 打印时隐藏 */
        }

        body {
            width: 100% !important;
            margin: 2px !important;
            padding: 3px !important;
            font-size: 12px !important; /* 缩小字体 */
        }

        .left-panel,
        .records-info {
            width: 100% !important;
            height: auto !important; /* 自动调整高度以显示所有内容 */
            overflow: visible !important; /* 确保内容溢出时可见 */
        }

        table {
            width: 100% !important;
            margin: 0px !important;
            padding: 0px !important;
            font-size: 12px !important; /* 缩小表格字体 */
            border-collapse: collapse !important; /* 确保表格边框合并 */
            border: 2px solid #d3d3d3 !important; /* 表格外边框颜色 */
        }

        th, td {
            word-wrap: break-word !important; /* 强制单词换行 */
            white-space: normal !important; /* 允许单词换行 */
            padding: 2px !important; /* 设置单元格内边距 */
            font-size: 12px !important; /* 确保所有表格内容字体大小一致 */
            overflow: hidden !important; /* 隐藏溢出内容 */
            text-overflow: ellipsis !important; /* 使用省略号表示溢出内容 */
            border: 1px solid #d3d3d3 !important; /*单元格边框颜色 */
            vertical-align: middle !important; /* 垂直居中 */
            /* text-align: center !important; 水平居中 */
        }

        a {
            text-decoration: none !important; /* 去除下划线 */
            font-size: 12px !important; /* 确保链接字体大小一致 */
        }

        table th:first-child,
        table td:first-child {
            display: none !important;
        }

        /* 设置列宽度 */
        table th:nth-of-type(2),
        table td:nth-of-type(2) {
            width: 5% !important;
        }

        table th:nth-of-type(3),
        table td:nth-of-type(3) {
            width: 28% !important;
        }

        /* 统一表格字体大小 */
        table th, table td {
            font-size: 12px !important;
        }

        /* 表头样式调整 */
        table th {
            color: black !important; /* 表头文字颜色为黑色 */
            border: 2px solid #d3d3d3 !important; /* 表头单元格边框颜色 */
        }

        /* 取消 container 和 custom-container 的所有边框和阴影效果 */
        .container, .custom-container, .main-panel, .Information-panel, .left-panel {
            border: none !important; /* 取消所有边框 */
            box-shadow: none !important; /* 取消阴影效果 */
            padding: 0 !important; /* 取消内边距 */
            
        }
    }
    /* 以上是关于打印显示的样式，不在打印页面显示 */

    /* 以下是关于哲学阐述内容部分的样式 */

    .container {
        max-width: 100%;
        margin: auto;
    }
    
    h1 {
        text-align: center;
    }
    
    form .form-group {
        margin-bottom: 20px;
    }
    
    #explanation-list .list-group-item {
        margin-bottom: 10px;
    }
    
    .d-flex.justify-content-end .btn {
        margin-left: 10px;
    }
    
    #philosophy_loadMoreContainer,
    #philosophy_noMoreContent {
        margin-top: 20px;
    }
    
    #philosophy_noMoreContent {
        background-color: #f8d7da;
        color: #721c24;
        padding: 10px;
        border-radius: 5px;
    }

    

    .btn-secondary {
        background-color: #6c757d;
        border-color: #6c757d;
        color: white;
    }
    
    .btn-secondary:hover {
        background-color: #5a6268;
        border-color: #545b62;
    }
    
    .btn-primary {
        background-color: #007bff;
        border-color: #007bff;
        color: white;
    }
    
    .btn-primary:hover {
        background-color: #0069d9;
        border-color: #0062cc;
    }
    
    .list-group-item {
        margin-bottom: 10px;
        border: 1px solid #dee2e6;
        padding: 15px;
    }
    
    .explanation-list {
        margin-top: 15px;
    }
    
    #philosophy_loadMoreContainer {
        margin-top: 20px;
    }
    
    #philosophy_noMoreContent {
        margin-top: 20px;
        background-color: #f8d7da;
        color: #721c24;
        padding: 10px;
        border-radius: 5px;
    }
    
    form .form-group label {
        font-weight: bold;
    }
     
    .reply-item {
        margin-left: 2em; /* 缩进 */
        padding: 10px;
        margin-top: 10px;
        background-color: #f9f9f9;
        border-left: 3px solid #007bff; /* 添加一个左边框颜色 */
        border-radius: 5px;
    }
    
    .reply-item p {
        margin: 0;
    }
    
    .reply-item .text-muted {
        font-size: 0.9em;
        color: #6c757d;
    }
    
       
    /* 以上是关于哲学阐述内容部分的样式 */

/* 以下是关于哲学条目层级显示部分的效果 */
/* 基本样式 */
.accordion-button {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
    background-color: #f8f9fa;
    border: none;
    outline: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.accordion-button:hover {
    background-color: #e6f7ff;
    color: #007bff;
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-header {
    margin-bottom: 0.5rem;
}

.accordion-body {
    padding: 1rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 0.25rem 0.25rem;
}

/* 不同层级的样式 */
.level-1 {
    background-color: #e3f2fd;
}

.level-2 {
    background-color: #bbdefb;
}

.level-3 {
    background-color: #90caf9;
}

.level-4 {
    background-color: #64b5f6;
}

.no-children {
    background-color: #c8e6c9 !important;
    color: #2e7d32;
}

/* 自定义配色方案 */
.accordion-item {
    margin-bottom: 1rem;
    border: none;
}

.accordion-button:not(.collapsed) {
    color: #fff;
    background-color: #007bff;
}

.accordion-button:not(.collapsed)::after {
    display: none;
}

.accordion-button.no-children::after {
    font-size: 1.5rem;
    font-weight: bold;
    color: #2e7d32;
    margin-left: auto;
}


/* 以上是关于哲学条目层级显示部分的效果 */


/* 以下是关于查询哲学条目框中的样式 */

/* .custom-bg-light {
    background: linear-gradient(135deg, #e0f7fa 0%, #80deea 100%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.custom-bg-dark {
    background: linear-gradient(135deg, #b3e5fc 0%, #0288d1 100%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
} */

.philosophy-bg-light {
    background: linear-gradient(135deg, #e6ffe6 0%, #b3ffb3 100%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

}

.philosophy-bg-dark {
    background: linear-gradient(135deg, #e0f7fa 0%, #80deea 100%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card {
    border: none;
    border-radius: 10px;
}

/* 用于优化二维码显示效果Center the QR code and adjust the modal layout */
/* 让二维码居中显示 */
#philosophy_qrcode {
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.modal-body {
    text-align: center;
}

.modal-dialog {
    max-width: 500px;
}

/* 增加关闭按钮的可见性 */
.modal-header .btn-close {
    outline: none;
}