.z_body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    overflow: hidden; /* 隐藏body的滚动条 */
    width: 100%;height:100vh;
}
.container_menu {
    position: relative;
    float:left;
    /*display: flex;*/
    
    /*height: 100px;*/
    height: 100vh;
    width:350px;
    box-sizing:border-box;
    background-color: #2c3e50;
    overflow-x: hidden;overflow-y: scroll;
}
.container_pdf {
    position: relative;
    float:left;
    height: 100vh;
    width:calc(100% - 350px);
}
.leftmenuselect {
    width: 100%;
    background-color: #2c3e50;
    color: white;
    padding: 10px;
    box-sizing: border-box;
    min-height:100px;
    /* 使用 flexbox */
    display: flex;
    flex-direction: column;
}
.leftmindiv{

}
.pages_ts {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.5;
}
.mb10 {
    margin-bottom: 10px;
}
.mL10{margin-left: 10px;}
.print_button_area {
position: relative;float: left;width:100%;height:45px;line-height: 45px;border-radius: 4px;
padding:0;box-sizing:border-box;margin-bottom: 10px;
}
.print_button {
position: relative;float: left;width:calc(50% - 5px);height:45px;line-height: 45px;border-radius: 4px;background-color: #3498db;
padding:0 4px 0 4px;box-sizing:border-box;transition: background 0.3s linear;cursor: pointer;font-size: 16px;text-align: center;color:#fff;
cursor:pointer;overflow: hidden;
}

.yxrbfx_button {
position: relative;float: left;width:100%;height:45px;line-height: 45px;border-radius: 4px;background-color: #3498db;
padding:0 4px 0 4px;box-sizing:border-box;transition: background 0.3s linear;cursor: pointer;font-size: 16px;text-align: left;color:#fff;
cursor:pointer;overflow: hidden;
    margin-bottom: 10px;
}
.yxrbfx_button:hover {
    background-color: #2980b9;
}
.yxrbfx_button:active {
    background-color: #0d3b66;
    transform: translateY(1px);
}
.yxrbfx_button input[type="file"] {
    width:0;
    height:0;
    cursor:pointer;
    opacity:0;
    filter:alpha(opacity=0);
    font-size:30px;
    position:absolute;
    top:0;
    right:0;
    margin:0 0 0 0;
    z-index: 1;
    /*pointer-events: none;*/
}
/*禁用点击，等渲染完成再点，否则章盖不全*/
.yxrbfx_button.disabled {
    pointer-events: none;
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #ccc;
}

.loading_text::after {
    content: ' (渲染中...)';
    color: #ff0000;
    font-weight: bold;
}


.set_zhangarea {
    position: relative;float: left;width:100%;min-height:35px;
    border-radius: 4px;background-color: #3498db;
    padding:4px;box-sizing:border-box;transition: background 0.3s linear;font-size: 13px;
    margin-bottom: 10px;
}
.set_z_sizearea{
    position: relative;float: left;width:100%;min-height: 30px;
}
.set_z_size{
    position: relative;float: left;
    height:30px;line-height:30px;background: #fff;box-sizing:border-box;
    padding:0 2px 0 2px;border:1px solid #bfcada;border-radius: 2px;outline: none;color:#4d4d4d;font-size: 14px;
}
.set_w100{width:100%;}
.set_w50{width:calc(50% - 0px);}
.set_w25{width:calc(25% - 4px);}
.set_w20{width:calc(19% - 4px);}
.set_w20::after {
    content: "mm"; /* 水印文字 */
    position: absolute;
    bottom: 5px;   /* 距离底部5px */
    right: 5px;    /* 距离右侧5px */
    
    /* 样式设置 */
    font-size: 12px;
    color: rgba(0, 0, 0, 0.3); /* 半透明灰色，更像水印 */
    font-family: Arial, sans-serif;
    pointer-events: none; /* 防止干扰鼠标事件 */
    z-index: 1; /* 确保在最上层显示 */
}
/* 使用 ::after 伪元素创建水印 */
.set_w25::after {
    content: "mm"; /* 水印文字 */
    position: absolute;
    bottom: 5px;   /* 距离底部5px */
    right: 5px;    /* 距离右侧5px */
    
    /* 样式设置 */
    font-size: 12px;
    color: rgba(0, 0, 0, 0.3); /* 半透明灰色，更像水印 */
    font-family: Arial, sans-serif;
    pointer-events: none; /* 防止干扰鼠标事件 */
    z-index: 1; /* 确保在最上层显示 */
}
.set_d40_l{width:calc(32% - 0px);}
.set_d20_r{width:calc(30% - 4px);}
.set_z_size_button{
    position: relative;float: left;overflow: hidden;
    height:30px;line-height:30px;background: #2c3e50;color:#fff;box-sizing:border-box;text-align: center;
    padding:0 2px 0 2px;border-radius: 2px;outline: none;font-size: 14px;cursor:pointer;user-select: none;overflow: hidden;
}
.set_z_size_button:hover {
    background-color: #1a5d9f;
}
.set_z_size_button:active {
    background-color: #0d3b66;
    transform: translateY(1px);
}


.sizeselect{background-color:#F0F0F0;margin:0 0 0 0;width:100%;height:calc(100% - 3px);border:none;background-color: rgba(0, 0, 0, 0.0005);outline:none;padding:0px;}
.mL4{margin-left: 4px;}
.mB4{margin-bottom: 4px;}
.inputindiv{width:calc(99% - 2px);height:calc(100% - 5px);line-height:27px;font-size: 13px;outline: none;border:none;margin:-5px 0px 0px 0px;}
.set_z50{
    width:calc(50% - 4px);
}
.inputmm{}
.inputmm::after {
    content: "mm"; /* 水印文字 */
    position: absolute;
    bottom: 5px;   /* 距离底部5px */
    right: 5px;    /* 距离右侧5px */
    
    /* 样式设置 */
    font-size: 12px;
    color: rgba(0, 0, 0, 0.3); /* 半透明灰色，更像水印 */
    font-family: Arial, sans-serif;
    pointer-events: none; /* 防止干扰鼠标事件 */
    z-index: 1; /* 确保在最上层显示 */
}
.my_qfzhang{
    position: absolute;float:right;overflow:hidden;z-index: 100;/*最上层*/
}
/*cover*/
.my_qfzhang img{
    width:100%;height:100%;
    object-fit: cover; 
}
.my_qfzhang2{
    position: absolute;float:right;overflow:hidden;z-index: 100;/*最上层*/
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    pointer-events: none;
    draggable: false;
}


.upfile_button{position: relative;float: left;width:100%;height:45px;line-height: 45px;border-radius: 4px;background-color: #3498db;cursor:pointer;overflow: hidden;
padding:0 4px 0 4px;box-sizing:border-box;transition: background 0.3s linear;cursor: pointer;font-size: 16px;text-align: left;color:#fff;}
.upfile_button:active {
    background-color: #0d3b66;
    transform: translateY(1px);
}
.upfile_button:hover {
    background-color: #2980b9;
}
.upfile_button input[type="file"] {
    width:0;
    height:0;
    cursor:pointer;
    opacity:0;
    filter:alpha(opacity=0);
    font-size:30px;
    position:absolute;
    top:0;
    right:0;
    margin:0 0 0 0;
    z-index: 1;
    /*pointer-events: none;*/
}
.upfilets{
    position: relative;
    min-width: 100%;
    min-height:24px;
    line-height: 24px;
    font-size: 12px;
    text-align: center;
    background-color: #473d3d;border-radius: 4px;
    color:white;
    display: flex;
    box-sizing:border-box;
    flex-wrap: wrap; /* 添加换行 */
    padding: 2px;
    box-sizing: border-box;
    gap: 2px; /* 可选：添加间距 */
}
.flex_item {
    width: calc((100% - 28px) / 10); /* 计算每个item的宽度，考虑padding和gap */
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #5a4e4e;
    border-right: 1px solid #6a5c5c;
    transition: all 0.3s ease;
    flex-shrink: 0; /* 防止收缩 */
    cursor: pointer;
}

/* 可选：为每行的最后一个item移除右边框 */
.flex_item:nth-child(10n) {
    border-right: none;
}
.flex_item:hover {
    background-color: #3b1f1f;
}
.flex_item.active {
    background-color: #4CAF50;
}

.flex_item.error {
    background-color: #f44336;
}
/* 确保只有一个 active 状态 */
/*.upfilets:active .flex_item.active,
.upfilets .flex_item.active {
    background-color: #4CAF50;
}
.upfilets .flex_item:not(.active) {
    background-color: #5a4e4e;
}*/


.mb10{margin-bottom:10px;}
.mb4{margin-bottom:4px;}

.show_a4 {
    position: relative;
    /*padding: 20px;*/
    overflow-y: scroll; /* 改为auto，只在需要时显示滚动条 */
    overflow-x: scroll; /* 隐藏水平滚动条 */
    background-color: #ecf0f1;
    /* 必须设置明确的高度 */
    height: 100vh; /* 或者固定高度 */
    /* 或者 */
    width: 100%; /* 设置最大高度 */
    /* 添加居中布局 */
    display: flex;
    flex-direction: column;
    align-items: center; /* 水平居中 */
    padding-top:20px;
    padding-bottom:20px;
    box-sizing: border-box; /* 重要：包含padding在高度内 */
}

.page_info {
    text-align: center;
    margin-top: 10px;
    font-weight: bold;
    color: #7f8c8d;
}
.png_info {
    position: absolute;
    /*background-color: #7f8c8d;*/
/*    top:300px;
    right:20px;
                cursor: move;
                transition: transform 0.1s ease;
                transform-origin: center center;*/
}
.png_info img{width:100%;height:100%;
object-fit: contain; 
}
.rotate_handle {
    position: absolute;
    width: 24px;
    height: 24px;
    background: #007bff;
    color: white;
    border-radius: 50%;
    cursor: grab;
    z-index: 1001;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    font-size: 14px;
    text-align: center;
    line-height: 24px;
    user-select: none;
    pointer-events: auto;
}

.rotate-handle:active {
    cursor: grabbing;
}

.rotate-handle:hover {
    background: #0056b3;
}



.file-info {
    /*margin-top: 20px;*/
    color: #bdc3c7;
    font-size: 14px;
}
.file-item {
    padding: 8px;
    margin-bottom: 5px;
    background-color: #34495e;
    border-radius: 4px;
    word-break: break-all;
}

.pdf_page_a4SHU {
    position: relative;
    margin: 0 auto 20px auto; /* 水平居中 */
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    background-color: white;
    padding: 0px;
    border-radius: 0px;
    /*原来是297,解决chrome下最后多一页*/
    /*width: 210mm ;  min-height: 296mm;*/
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.pdf_page_a4HENG {
    position: relative;
    margin: 0 auto 20px auto; /* 水平居中 */
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    background-color: white;
    padding: 0px;
    border-radius: 0px;
    /*原来是297,解决chrome下最后多一页*/
    /*width: 297mm ;  min-height: 209mm;*/
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.pdf_page_a4SHU canvas,
.pdf_page_a4HENG canvas {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
}

/* 打印样式 */
@media print {
    /* 重置所有相关元素的样式 */
    body, html, .container_pdf, .show_a4 {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        position: static !important;
        float: none !important;
    }
    
    .show_a4 {
        display: block !important;
        background-color: white !important;
        page-break-after: avoid !important;
        box-sizing: border-box;
    }
    
    .pdf_page_a4SHU,
    .pdf_page_a4HENG {
        /*width: 100% !important;*/
/*        max-width: 210mm !important;
        height: 296mm !important;*/
        margin: 0 auto !important;
        page-break-after: always !important;
        page-break-inside: avoid !important;
        break-after: page !important;
        box-shadow: none !important;
        display: block !important;
        float: none !important;
        position: relative !important;
        overflow: hidden !important;
        box-sizing: border-box;
    }
    
    /* 横版页面特殊处理 */
    .pdf_page_a4HENG {
/*        max-width: 297mm !important;
        height: 209mm !important;*/
    }
    
    .pdf_page_a4SHU:last-child,
    .pdf_page_a4HENG:last-child {
        page-break-after: auto !important;
        break-after: auto !important;
    }
    
    /* 确保canvas完全显示 */
    .pdf_page_a4SHU canvas,
    .pdf_page_a4HENG canvas {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }
    
    .container_menu,
    .Noprn {
        display: none !important;
    }
    
    /* 设置页面尺寸 */
    @page {
        /*size: A4;*/
        margin: 0;
    }
}

/*滚动条样式
::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb  滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-track  滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
*/
.gundongt{
    /*max-height:910px;*/
    overflow-y:scroll;/*auto scroll */
    overflow-x:hidden;
}
.gundongt::-webkit-scrollbar{
    width:6px;
    height:6px;
    background-color: #61B6EB;
}
.gundongt::-webkit-scrollbar-track{
    background: #213147;
    border-radius:2px;
}
.gundongt::-webkit-scrollbar-thumb{
    background: #61B6EB;
    border-radius:2px;
}
.gundongt::-webkit-scrollbar-thumb:hover{background: #61B6EB;}
.gundongt::-webkit-scrollbar-corner{background: #61B6EB;}
/*滚动条样式结束*/



/*图章拖拽样式*/
div[cystype='pngzhang'].dragging {
    cursor: grabbing !important;
    opacity: 0.8;
    z-index: 1000;
    border: 1px dashed #667eea !important;
}
div[cystype='pngzhang'] {
    cursor: grab;
}
/*div[cystype='pngzhang']:hover {
    cursor: grab;
    border: 1px dashed #667eea;
}*/
.zhangclick{
    cursor: grab;
    border: 1px dashed #ff4757;
}
/* 彻底阻止图片的默认行为 */
div[cystype='pngzhang'] img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    pointer-events: none;
    draggable: false;
}

/* 文字点状 Loading */
.loading_text {
    font-size: 18px;
    color: #fff;
    font-weight: bold;
}

.loading_text::after {
    content: '';
    animation: dots 1.0s steps(5, end) infinite;
}

@keyframes dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60% { content: '...'; }
    80%, 100% { content: ''; }
}