.wapper{width:100%;min-width:1200px;height:100%;background:#FAFAFA;min-height:1000px;}

.wapper .content{width:1200px;margin:15px auto 20px;position:relative;box-sizing:content-box;overflow:hidden;padding:10px 20px 10px;}


/*左边的核心转换菜单列表*/
.wapper .content .left-menu{overflow:hidden;float:left;width:194px;min-height:100px;border-radius:5px;box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px;background-color:#fff;user-select:none;}
.wapper .content .left-menu::-webkit-scrollbar{width: 10px;height: 1px;}
.wapper .content .left-menu::-webkit-scrollbar-thumb{background-color:#d4d4d4;border-radius:10px;}
.wapper .content .left-menu .menu-title{height:50px;line-height:50px;color:#fff;background-color:var(--main-color);text-indent:34px;}
.wapper .content .left-menu .menu-list ul li{height:50px;line-height:50px;text-indent:34px;font-size:14px;color:var(--text1-color);}
.wapper .content .left-menu .menu-list ul a:hover li{background-color:#F1F3FE;}
.wapper .content .left-menu .menu-list ul a.on li{background-color:#F1F3FE;color:var(--main-color);}
.wapper .content .left-menu .menu-list ul li .ky-font{margin-right:14px;}

/*=========================================================================================*/

/*右边的核心内容*/
.wapper .content .right-main{display: inline-block;width:986px;min-height:755px;float:right;background-color:#fff;border-radius:5px;box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px;user-select:none;margin-bottom: 30px;}
.wapper .content .right-main .convert-title{font-size:32px;text-align: center;margin-top:40px;color:var(--text1-color);position:relative;}
.wapper .content .right-main .convert-title .ky-font{font-size:30px;margin-right:10px;}
.wapper .content .right-main .convert-subtitle{font-size:14px;text-align: center;margin-top:10px;color:var(--text2-color);}
.wapper .content .right-main .convert-desc{width:926px;min-height:144px;margin:40px 30px 0px;background-color:#FAFAFA;border: 1px solid #F0F0F0;border-radius: 5px;}
.wapper .content .right-main .convert-desc ul li{display:inline-flex;color: var(--text1-color);width:308px;text-align: center;flex-direction:row;align-items:flex-start;}
.wapper .content .right-main .convert-desc ul li .ky-font{margin-right:6px;}
.wapper .content .right-main .convert-desc ul li .desc-box{margin:30px;text-align:left;}
.wapper .content .right-main .convert-desc ul li .desc-box .desc-desc{margin-top:10px;line-height:24px;color:var(--text2-color)}

/*文件上传区域*/
.wapper .content .right-main .convert-upload{display: inline-block;width:926px;min-height:468px;border-radius: 5px;background-color:#F1F3FE;margin:20px 30px 0px;text-align:center;}
.wapper .content .right-main .convert-upload .convert-upload-shape{display: inline-block;width:100%;min-height:428px;width:886px;}

/*形态1：初始化形态*/
.wapper .content .right-main .convert-upload .convert-upload-shape-1 .convert-user-step{margin-top:136px;width:100%;}
.wapper .content .right-main .convert-upload .convert-upload-shape-1 .convert-user-step .step-number{color:var(--main-color);}
.wapper .content .right-main .convert-upload .convert-upload-shape-1 .convert-user-step .step-text{color:var(--text2-color);}
.wapper .content .right-main .convert-upload .convert-upload-shape-1 .convert-upload-btn{width:338px;height:56px;display:inline-block;text-align: center;margin-top:32px;line-height:56px;color:#fff;background-color: var(--main-color) ;border-radius: 10px;cursor: pointer;transition: all 0.2s linear;}
.wapper .content .right-main .convert-upload .convert-upload-shape-1 .convert-upload-btn:hover{box-shadow: 0 4px 10px rgba(69,99,255,1);background:rgba(69,99,255,1);transition: all 0.2s linear;}
.wapper .content .right-main .convert-upload .convert-upload-shape-1 .convert-upload-desc{text-align: center;color:var(--text2-color);margin-top:20px;}

/*形态2：上传文件后的形态*/
.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-file-display{width:100%;height:auto;margin:0px auto 40px;text-align:left;}
.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-file-display li{width:100%;height:60px;line-height:60px;border-bottom: 1px solid #DFE8FF;}
.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-file-display li .info-item{display:inline-block;height:60px;vertical-align: top;}
.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-file-display li .handle{width:3%;text-align: center;position:relative;}
.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-file-display li .handle .drag-icon{font-size:18px;cursor: pointer;display:none;}
.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-file-display li .no{width:4%;text-align:center;}
.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-file-display li .name{width:37%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-file-display li .name .name-inner{width:80%;height:100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-file-display li .status{width:42%}
.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-file-display li .status .upload-status{width:100%;height:100%;position:relative;}
.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-file-display li .status .upload-status.fail{color:red;}
.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-file-display li .status .upload-progress-bar{position:relative;width:92px;height:10px;left:0px;top:50%;margin-top:-5px;border-radius:20px;background-color:#E5E5E5;display: inline-block;vertical-align: top;}
.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-file-display li .status .upload-progress-bar .progress{width:0px;height:100%;position:absolute;top:0px;left:0px;border-radius:20px;background-color:var(--main-color)}
.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-file-display li .status .fail-icon{color:#e5404f;}
.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-file-display li .operate{width:9%;cursor:pointer;position:relative;}
.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-file-display li .operate-item{width:100%;height:100%;position:relative;cursor:pointer;}
.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-file-display li .operate-item.delete .delete-icon{position: relative;top:2px}
.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-file-display li .operate-item.delete:hover{color:var(--main-color);}
.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-file-display li .operate-item.delete:hover .delete-icon{color:var(--main-color);}
.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-file-display li .operate-item.get_converted_file:hover{color:var(--main-color);}

.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-file-display .add-file{width:100%;height:60px;}
.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-file-display .add-file-btn{width:100px;height:60px;line-height:60px;cursor: pointer;display: none;}
.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-file-display .add-file-btn:hover{color:var(--main-color);}

.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-operate-area{margin:140px 0 72px;width:100%;min-height:118px;position:relative;padding-bottom: 60px;}
.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-operate-area .convert-out-attr{margin:0px auto 40px;}
.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-operate-area .convert-out-attr.proportion .convert-attr-name{width:40%;text-align:right;}
.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-operate-area .convert-out-attr.proportion .convert-attr-items{width:60%;text-align:left;}
.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-operate-area .out-radio label{margin: 0px 40px 0px 10px;}

.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-operate-area .convert-follow-operate{position:absolute;left:0px;bottom:0px;width:100%}
/*.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-operate-area .convert-follow-operate div.convert-do{background-color: var(--main-color);border: 1px solid var(--main-color);color: #fff;}
.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-operate-area .convert-follow-operate div.convert-do.disabled{cursor:not-allowed;background-color:#ddd;color:#868686;border: 1px solid #ddd;}
.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-operate-area .convert-follow-operate div.enabled:hover{box-shadow: 0 4px 10px rgba(55,111,248,0.7);background: #376ff8;}
.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-operate-area .convert-follow-operate div.continue-upload{background-color:#fff;border: 1px solid #DBDBDB;}*/

/*形态3：齿轮转动*/
.wapper .content .right-main .convert-upload .convert-upload-shape-3 .gradient-loader{background-image: conic-gradient(rgba(255,103,104,0.1), rgba(88,115,254,1));}

/*形态4：转换完成的独立页面*/
.wapper .content .right-main .convert-upload .convert-upload-shape-4 .success-icon-box{width:100%;height:68px;line-height:68px;text-align: center;font-size: 68px;margin-top:84px;}
.wapper .content .right-main .convert-upload .convert-upload-shape-4 .success-tips{margin-top:20px;}
.wapper .content .right-main .convert-upload .convert-upload-shape-4 .file-name{margin:24px auto 0px;width: 500px;}
.wapper .content .right-main .convert-upload .convert-upload-shape-4 .btns{width:100%;height:56px;margin-top:32px;}
.wapper .content .right-main .convert-upload .convert-upload-shape-4 .btns .btn-x{margin:0 25px 0px;}


/**
 * 获取文件的加载环样式
*/
.operate .large-file-tip{position: absolute;
    top: 0px;
    left: -130px;
    background-color: #fff;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
    font-size: 12px;
    padding: 4px 10px 4px;
    height: 58px;
    line-height: 16px;
    border-radius: 8px;
    width:120px;
}
.operate .large-file-tip .sanjiao{width:10px;height:10px;background-color: #fff;transform: rotate(45deg);position: absolute;bottom: 24px;left:115px;}
.wapper .content .right-main .convert-upload .convert-upload-shape-2 .gradient-loader{position:relative;display:inline-block;top:5px;}

/*勾选协议*/
.wapper .content .right-main .convert-agreement{width:926px;margin:14px 30px 12px;color:var(--text2-color);text-align:right;position: relative;}
.wapper .content .right-main .convert-agreement .sort-tutorial-tip{display:none;width:300px;height:40px !important;left:auto;right:54px;top:-58px;text-align: center;line-height: 40px;}
.wapper .content .right-main .convert-agreement .sort-tutorial-tip .sort-tutorial-tip-jiao{top:35px;left:114px;}
/**
 * 加载圆环
*/
.upload-status .large-file-tip{position:absolute;top:-20px;left:-40px;background-color: #fff;box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);     font-size: 12px;padding: 0px 10px 0px;height: 30px;line-height: 30px;border-radius: 8px;}
.upload-status .large-file-tip .sanjiao{width:10px;height:10px;background-color: #fff;transform: rotate(45deg);position: absolute;bottom: -5px;left:126px;}
.gradient-loader {width: 20px;height: 20px !important;border-radius: 50%;background-image: conic-gradient(rgba(255,103,104,0.1), rgba(157,157,157,1));position: relative;animation: turn-around 0.4s linear infinite;display: inline-block;}
.gradient-loader-inner{width:16px;height:16px !important;border-radius: 50%;background:#F1F3FE;position: absolute;top: 2px;left: 2px;}


@keyframes turn-around {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/**
 *其他样式
*/
/*加密密码输入框*/
.please-input-password{font-size:16px;margin-bottom:20px;}
.password-box input{width:220px;height:40px;margin-bottom:20px;border:1px solid #DBDBDB;border-radius: 5px;text-indent:10px;outline: none;}

/*排序教程提示框*/
.sort-tutorial-tip{width:200px;height:90px !important;position:absolute;box-shadow: 0px 6px 18px 0px rgba(0,0,0,0.38);background:#fff;left: -7px;top: 50px;z-index: 10;border-radius:5px;color:#2d2d2d;font-size:13px;line-height:60px;}
.sort-tutorial-tip .sort-tutorial-tip-jiao{width:10px;height:10px !important;background:#fff;position:absolute;transform:rotate(45deg);top:-5px;left: 14px;}
.sort-tutorial-tip .ikown{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;position:absolute;right:18px;bottom:-5px;text-decoration:underline;}

/*ocr说明样式*/
.ocr-exmaple{display:none;width:324px;height:166px;box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.2);position:absolute;top:-180px;left:203px;}
.ocr-exmaple .ocr-exmaple-content{width:100%;height:100%;background:#fff;position:relative;z-index:2;overflow: hidden;}
.ocr-exmaple .ocr-exmaple-content .ocr-exmaple-text-content{width:264px;margin:14px auto 0px;line-height:20px;}
.ocr-exmaple .ocr-exmaple-content .ocr-exmaple-image-content{width:269px;margin:16px auto 0px;height:79px;background:url('../assets/ocr-exmaple.png') no-repeat center center;}
.ocr-exmaple .ocr-exmaple-sanjiao{width:20px;height:20px;border:1px solid #eee;position:absolute;bottom:-6px;left:162px;transform:rotate(45deg);z-index:1;background:#fff}

@media screen and (min-width: 1px){
    .ocr-exmaple .ocr-exmaple-content .ocr-exmaple-image-content{background-image:url('../assets/ocr-exmaple@2x.png');background-size:269px 79px;}
}

/**
 * 形态3中的处理进度环
*/
.wapper .content .right-main .convert-upload .convert-upload-shape-3 .process-circle-box{position: relative;width:100%;height:100px;line-height:100px;margin-top:90px;}
.wapper .content .right-main .convert-upload .convert-upload-shape-3 .process-num{width:100%;height:100%;position:absolute;text-align:center;z-index:10;font-weight: bold;}
.wapper .content .right-main .convert-upload .convert-upload-shape-3 .gradient-loader{width:100px;height:100px !important;}
.wapper .content .right-main .convert-upload .convert-upload-shape-3 .gradient-loader .gradient-loader-inner{width:80px;height:80px !important;top: 10px;left: 10px;background:#fff;}

/**
 * LockPdf定制样式
*/
body.LockPdf #add-file-btn{display:none !important}
body.LockPdf .convert-operate-area{margin:0px !important;min-height: 90px !important;padding-bottom:0px !important;}
body.LockPdf .convert-file-display{margin-bottom:0px !important;}

/*请输入加密密码*/


/**
 * UnLockPdf定制样式
*/
body.UnLockPdf #add-file-btn{display:none !important}
body.UnLockPdf .convert-operate-area{margin:0px !important;min-height: 90px !important;padding-bottom:0px !important;}
body.UnLockPdf .convert-file-display{margin-bottom:0px !important;}

/*请输入解密密码*/


/**
 * CompressPdf定制样式
*/

/*压缩完成后的效果展示*/
.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-file-display li div.compress-result-show{width: 96px;height:20px;line-height: 18px;border: 1px solid var(--main-color);border-radius: 5px;color:var(--main-color);padding-left: 3px;top: 50%;position: relative;margin-top: -10px;font-size: 12px;overflow: hidden;display: inline-block;vertical-align: top;}
.wapper .content .right-main .convert-upload .convert-upload-shape-2 .convert-file-display li div.compress-result-show-num{width: 40px;height: 100%;position: absolute;background: var(--main-color);border-radius: 5px;text-align: center;color: #fff;right: -1px;top: 0px;}

/**
 * SlicePdf定制样式
*/
/*拆分选项样式*/
body.SlicePdf #SlicePdfBox .select-slice-type-title{width: 50%;text-align: right;position: absolute;left: 0px;}
body.SlicePdf #SlicePdfBox .select-slice-type-radios{width: 50%;text-align: left;position: absolute;right: 0px;}
body.SlicePdf #SlicePdfBox .select-slice-type-radios ul li{margin-bottom:20px;}
body.SlicePdf #SlicePdfBox .select-slice-type-radios .slice-type-1-input{width:50px;height:26px;border-radius:5px;border: 1px solid #2d2d2d;text-align: center;}
body.SlicePdf #SlicePdfBox .select-slice-type-radios .slice-type-2-input{width:300px;height:32px;border-radius:5px;border: 1px solid #2d2d2d;text-indent:8px;}

/**
 * DeletePdfPage定制样式
*/
body.DeletePdfPage #DeletePdfPageBox{position: relative;width:926px;position: relative;left:-20px;padding-bottom:100px;}
body.DeletePdfPage #DeletePdfPageBox .delete-pdf-page-container{width:886px;height: 100%;position: relative;left:50%;margin-left:-443px;}
body.DeletePdfPage #DeletePdfPageBox .use-title-tip{color:var(--main-color);margin:30px 0px 30px;text-align:left;}
body.DeletePdfPage #DeletePdfPageBox .delete-pdf-filename{color:var(--text1-color);margin:12px 0px 36px;text-align:left;}

/*页码样式区*/
body.DeletePdfPage #DeletePdfPageBox .pdf-pages-ranges{text-align:left;margin-bottom: 15px;position:relative;}
body.DeletePdfPage #DeletePdfPageBox .pdf-pages-ranges .pdf-pages-ranges-mask{background:#F1F3FE;width:100%;height:100%;position: absolute;top:0px;left:0px;opacity:0.8;z-index:3;display:none;cursor: not-allowed !important;}
body.DeletePdfPage #DeletePdfPageBox .pdf-pages-ranges .pdf-pages-range-item{text-align:center;display: inline-block;min-width: 80px;border: 1px solid #5873fe;border-radius: 5px;line-height:24px;color: #5873fe;cursor: pointer;margin:5px 2px 5px}
body.DeletePdfPage #DeletePdfPageBox .pdf-pages-ranges .pdf-pages-range-item.selected{background-color:#5873fe;color:#fff;}

body.DeletePdfPage #DeletePdfPageBox .pdf-views-loadding{display:none;position:relative;top:200px;font-size:20px;width:100%;height:50px;line-height:50px;text-align:center;}
body.DeletePdfPage #DeletePdfPageBox .pdf-views-list{width:896px;min-height:400px;max-height:1150px;overflow-y:overlay;position: relative;left:50%;margin-left: -448px;text-align: left;
    &::-webkit-scrollbar {
        width: 6px;
        height: 4px;
    }
     
    &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background-color: #99a9bf;
    }
     
    &::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 5px;
        background-color: #d3dce6;
    }

    &::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, .4);
        -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
        cursor: pointer;
    }
}

body.DeletePdfPage #DeletePdfPageBox .pdf-views-list .pdf-page-item{display:inline-block;width:174px;margin:0px 2px 8px;position: relative;}
body.DeletePdfPage #DeletePdfPageBox .pdf-views-list .pdf-page-item .select-bg{width:100%;padding:5px;display: inline-block;border-radius: 5px;}
body.DeletePdfPage #DeletePdfPageBox .pdf-views-list .pdf-page-item.selected .select-bg{background-color:#abb7f6;}

body.DeletePdfPage #DeletePdfPageBox .pdf-views-list .pdf-page-item .pdf-view-container{width:162px;position: relative;;border:1px solid #ccc;cursor: pointer;box-sizing:unset;-webkit-box-sizing: unset;background-color: #fff;box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);overflow: hidden;border-radius: 5px;}
/*删除按钮(整块)*/
body.DeletePdfPage #DeletePdfPageBox .pdf-views-list .pdf-page-item .pdf-view-container .action--delete{display:none;width:100%;height:100%;position:absolute;left:0px;top:0px;background-color: rgba(0, 0, 0, 0.7);;z-index:1;font-size:40px;color:#fff;}
body.DeletePdfPage #DeletePdfPageBox .pdf-views-list .pdf-page-item .pdf-view-container:hover .action--delete{display:flex;align-items: center;justify-content: center;}
/*删除按钮(右上角)*/
body.DeletePdfPage #DeletePdfPageBox .pdf-views-list .pdf-page-item .pdf-view-container .action-button{width:60px;height:28px;line-height: 28px;position: absolute;top:0px;right:0px;background-color:#5873fe;color:#fff;z-index:3}
body.DeletePdfPage #DeletePdfPageBox .pdf-views-list .pdf-page-item.selected .pdf-view-container .action-button{background-color:#e5404f}
/*放大按钮*/
body.DeletePdfPage #DeletePdfPageBox .pdf-views-list .pdf-page-item .pdf-view-container .action-zoom{width:60px;height:28px;line-height: 28px;position: absolute;top:0px;left:0px;background-color:#666771;color:#fff;z-index:3}


body.DeletePdfPage #DeletePdfPageBox .pdf-views-list .pdf-page-item .pdf-page-view{width:162px;height:238px;position: relative;left:50%;top:50%;margin-left:-100px;margin-top:-141px;border:1px solid greenyellow; }
body.DeletePdfPage #DeletePdfPageBox .pdf-views-list .pdf-page-item .pdf-page-number{width:164px;height:28px;line-height:28px;}

/*操作区域*/
body.DeletePdfPage #DeletePdfPageBox .pdf-do-area{display:none;width:926px;height:80px;background-color:#666771;color:#fff;z-index:5;color:#fff;box-shadow:#666771 0 -4px 10px -4px}
body.DeletePdfPage #DeletePdfPageBox .pdf-do-area .pdf-detele-page-reload-button{position:absolute;top:50%;left:40px;margin-top:-30px;letter-spacing:2px;}
body.DeletePdfPage #DeletePdfPageBox .pdf-do-area .pdf-delete-text{height:80px;line-height:80px;display: inline-block;position: absolute;top:0px;right:220px;}
body.DeletePdfPage #DeletePdfPageBox .pdf-do-area .pdf-delete-text .pdf-selected-pages{font-weight:bold;}
body.DeletePdfPage #DeletePdfPageBox .pdf-do-area .pdf-detele-page-do-button{position:absolute;top:50%;right:40px;margin-top:-30px;letter-spacing:2px;}