body{min-width:1024px;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;background:#d6deeb}
#ruler{display:none;margin-bottom:20px;background:#ffffff;box-shadow:0 4px 12px #0000001a;overflow: hidden;width: 100%;}
#ruler .main{height:2cm;width:100%;}
#ruler ul{list-style:none;padding:0;margin:0 auto;position:relative;overflow: hidden;width: 30cm;}
#ruler .line{border-left:0.1mm solid #333;}
#ruler .line li{width:1mm;height:4mm;box-sizing:border-box;border-right:0.1mm solid #333;float: left;}
#ruler .line li:nth-child(5n){height:6mm}
#ruler .fullSize{position:relative;margin:0 auto}
#ruler .number::before{content:"0";position:absolute;left:0;bottom:0;font-size:3mm}
#ruler .number::after{content:"cm";position:absolute;left:1cm;bottom:0;font-size:3mm}
#ruler .number li{width:10mm;text-align:right;font-size:3mm;float: left;}
#ruler .aux{width:100%;max-width:21cm;display:flex;justify-content:space-between;align-items: center;padding: 15px 0;margin: 0 auto;}
#ruler .aux .ctrl{display:flex;justify-content:space-between;align-items: center;white-space: nowrap;}

input[type="file"]{width:5.15em;cursor:pointer;border:1px solid #ddd;border-radius:4px}
input[type=checkbox]{margin:0 0.25em 0 0;transform:scale(1.2)}
input[type="number"]{width:3.5em;height:1.8em;text-align:right;border:1px solid #ccc;border-radius:4px;/* padding:3px; */box-sizing:border-box}
input[type="range"] {width:100%;height:0.2em;-webkit-appearance:none;appearance:none;background:#666;outline:none;border-radius:0.5em}
input[type="range"]::-webkit-slider-thumb {-webkit-appearance:none;appearance:none;width:1.2em;height:1.2em;border-radius:50%;background:#2196F3;cursor:pointer}
input[type="range"]::-moz-range-thumb {width:1.2em;height:1.2em;border-radius:50%;background:#2196F3;cursor:pointer;border:none}

select{cursor:pointer;max-width:10em;height: 1.8em;border:1px solid #ccc;border-radius:4px;/* padding:3px 6px; */box-sizing:border-box}
.checkboxInput{cursor:pointer;user-select:none;display:flex;align-items:center;flex-wrap:nowrap;text-wrap:nowrap}
.rangeInput{cursor:n-resize}
.rangeInput>div{width:1em;display: flex;margin:0 0 0 0.5em}
.rangeInput .seat{font-style:normal;width:2em;display:inline-block;text-align:right}
.rangeInput:hover input{width:1em;display:block;position:relative;z-index:2}
.rangeInput:hover input{transform:rotate(-90deg) translateX(-25%);width:auto;transform-origin:0.5em 0.5em;margin-left: 0.4em;}

.settingBar{display:flex;justify-content:space-between;width:100%;gap:0.625em;border-radius:8px 8px 0 0;padding:0}
.settingBar ul{padding:0;margin:0;list-style:none;display:flex}
.settingBar li{padding:0 1em;line-height:1.8em;box-sizing:border-box;text-align:center;text-wrap:nowrap;position:relative;height:100%;cursor:pointer;border:1px solid transparent;border-radius:0.3125em 0.3125em 0 0}
.settingBar li:hover{background:#ffffff33}
.settingBar li div{display:none;position:absolute;left:0;top:0;width:100%;height:100%;background:#2196f3ab;border-radius:0.25em 0.25em 0 0;justify-content:space-evenly;user-select: none}
.settingBar li div i{width:1em;height:1em;line-height:0.8em;border:1px solid #333;text-align:center;font-style:normal;border-radius:0.2em;background:#ffffff;cursor:pointer}
.settingBar li.show:hover div{display:flex;align-items:center;justify-content:space-evenly}
.settingBar li .addline{display:flex;align-items:center;justify-content:space-evenly;background:unset;padding-top:1px}

.settingBar li.show{border:1px solid #2196F3;border-bottom:none;background:#ffffff;color:#333;font-weight:bold}
.settingBar li.show::after{content:"";position:absolute;bottom:-1px;left:0;height:1px;width:100%;background:#ffffff}
.settingBar>*{display:flex;flex-wrap:nowrap;align-items:center;height:1.8em}

.settingChild{font-size:14px;min-width:100%;width:fit-content}
.settingChild ul{list-style:none;margin:0;box-sizing:border-box;width:fit-content;min-width:100%;padding:0.625em;border-radius:0.3125em;background:#f8f9ff;box-shadow:0 2px 5px #0000000d;width:100%}
.settingChild li{display:flex;justify-content:space-between;align-items:center;min-height:2em;margin:0;padding:0.5em 0.5em 0;border-bottom:1px solid #eef0ff;gap:0.625em}
.settingChild li .settingOption{display:flex;align-items:center;flex-wrap:nowrap;text-wrap:nowrap}
.settingChild li:first-child{padding-top:0!important}
.settingChild li .checkboxInput:nth-child(n+2){margin-left:1em}

.pageList{margin:48px auto;padding:0;/* max-width:1024px; */list-style:none;display:flex;justify-content:space-evenly;flex-wrap:wrap}
.pageList>li{margin:1cm;position:relative;width:210mm;height:297mm;box-shadow:0 0 5mm 5mm #d1d1d180;border-radius:0.5cm;background-size:100% 100%;background-repeat:no-repeat;background-position:center;zoom:0.1;overflow:hidden;background:#ffffff;/* border:1px solid #eee; */}
.pageList .page{box-sizing:border-box;position:relative;height:50%}
.pageList .page:first-child{transform:rotate(180deg)}
.pageList .page .concent{box-sizing:border-box;position:relative;width:100%;height:10cm}
.pageList .page .lineChild{position:absolute;left:0;top:4cm;width:100%}
.pageList .page .text{text-align:center;font-size:3.75cm;font-family:'';line-height:1em;box-sizing:border-box;width:fit-content;padding:0;text-align-last:justify;white-space:nowrap;margin:0 auto;text-align:center;min-width:3em}
.pageList .page .text:hover::after{content:"";left:0;top:0;width:100%;height:100%;border:1px solid #2196F3;position:absolute}
.pageList .page .text.multiLine{white-space:pre}
.pageList .page .aux{width:90%;line-height:1em;text-align-last:justify;margin:-0.5em auto 0;padding-top:1cm}
.pageList .page .aux span{display:inline-block}
.pageList .page .footer{width:100%;display:flex;justify-content:space-between;list-style:none;padding: 0 1.5em 1.5em;box-sizing:border-box;position:absolute;left:0;bottom:0;}
.pageList .page .footer input{text-align:center;padding:0;border: 1px solid transparent;background:transparent;width:33%;outline: none;line-height: 1.5em;}
.pageList .page .footer input:focus{border-color: #5c6bc080;border-radius: 4px;}
.pageList .page .footer input:first-child{text-align:left}
.pageList .page .footer input:last-child{text-align:right}

.actionArea{margin:10px auto;max-width: 1024px;padding:16px;background:#ffffff;box-sizing:border-box;border-radius:10px;display:flex;justify-content: center;flex-wrap:wrap;align-items: start;gap:16px;box-shadow:0 4px 12px #0000001a;border:1px solid #eee}
.actionArea .control{width:66%;font-size:16px;display:flex;justify-content:space-between;flex-wrap:wrap}
.actionArea .control .input{box-sizing:border-box;text-align:left;display:block;width:100%}
.actionArea .control .input textarea{width:100%;height:10em;box-sizing:border-box;margin:0;display:block;border:1px solid #ddd;border-radius:6px;padding:10px;font-family:inherit;resize:vertical}

.actionArea .settingBar{margin:0.625em 0 0 0}
.actionArea .settingChild.full{margin:0.625em 0 0 0}
.actionArea .settingChild>ul{border:1px solid #2196F3;background:#ffffff;min-height:8.5em;box-shadow:0 2px 8px #2196f326}
.actionArea .settingChild.full>ul{background:#2196f340;border:none}
.actionArea .settingChild:not(.full)>ul:first-child{border-radius:0 0.3125em 0.3125em 0.3125em}

.actionArea .preview{width:fit-content}
.actionArea .preview .pageList{margin:0}
.actionArea .preview .pageList>li{zoom:0.4;margin:0;background:#ffffff;box-shadow:0 0 5mm 5mm #d1d1d180}
.actionArea .preview .page .concent{border-bottom:1px solid #2196F3}
.actionArea .preview .page:first-child{border-top:1px solid #2196F3}

.actionArea .preview .arrow{position:absolute}
.actionArea .preview .arrow div{display:flex;color:#2196F3;flex-direction:column;justify-content:space-between;align-items:flex-start}
.actionArea .preview .arrow i{font-style:normal;writing-mode:vertical-lr;line-height:1.15em}
.actionArea .preview .arrow b{display:block;border-left:1px solid #2196F3;margin:0.1cm 0.55em;height:100%}
.actionArea .preview .arrow span{writing-mode:vertical-lr}
.actionArea .preview .topLine{right:1cm;border-bottom:1px solid #2196F3;bottom:100%;width:4cm;padding:0 1cm 0 0}
.actionArea .preview .bottomLine{margin:0 0 0 1cm}
.actionArea .preview .auxLine{width:2cm;margin:0 0 0 1cm;border-bottom:1px solid #2196F3}
.actionArea .preview .small1 span{writing-mode:horizontal-tb}
.actionArea .preview .small2 div{flex-direction:row;width:fit-content;position:relative;align-items:normal}
.actionArea .preview .small2 i:last-child{position:absolute;left:100%;bottom:0}
.actionArea .preview .small2 b{display:none}
.actionArea .preview .small2 span{writing-mode:horizontal-tb;align-content:center}
.actionArea .preview .topLine div{align-items:flex-end}
.actionArea .preview .topLine.small2 div{align-items:normal;float:right;margin:0 1.15em 0 0}

.pageArea {position:relative}
.pageArea .settingBar li.show{border:none;background:#5c6bc080;color:#ffffff}
.pageArea .settingBar li.show::after{content:"";width:0}
.pageArea .settingBar li div:not(.addline){background:#5c6bc080}
.pageArea .settingBar li div i{color:#333}

.pageArea .settingChild>ul{background:#5c6bc080}
.pageArea .settingChild li{border-bottom:1px solid #5C6BC0;padding:0.25em 0.25em 0}

.pageArea>.control{position:absolute;top:0;right:0;height:100%;color:#ffffff;z-index:3;pointer-events:none}
.pageArea>.control .settingChild{position:sticky;top:100px}
.pageArea>.control .settingChild>ul{border-radius:0.625em 0 0 0.625em;pointer-events:auto}

.pageArea .pageList .control{width:100%;position:absolute;top:0;left:0;height:50%;background:#5c6bc080;color:#ffffff;list-style:none;box-sizing:border-box;zoom:2;overflow:auto;padding:0.25cm 0.25cm 2em;scrollbar-color:#ffffff #5c6bc080;scrollbar-width:thin}
.pageArea .pageList .control textarea{height:4em;width:100%;display:block;box-sizing:border-box}

.pageArea .pageList .settingChild.full>ul:first-child{border-radius:0 0.3125em 0.3125em 0.3125em}
.pageArea .btn>div{background:#5C6BC0;box-shadow:0.1em 0.25em 0 #3F51B5}
.pageArea .btn{box-shadow:0.125em 0.3125em 0.625em #5C6BC0}
.pageArea .number{position:absolute;bottom:50%;left:0;font-size:3em;z-index:1;text-shadow:0 0 10px black;color:#ffffff}

.pageArea input[type="range"]::-webkit-slider-thumb {background:#3F51B5}
.pageArea input[type="range"]::-moz-range-thumb {background:#3F51B5}
.pageArea .pageList .page .text:hover::after{border-color:#5C6BC0}

.btn{border-radius:0.625em;background:#e0e0e0;position:relative;transition:all 0.2s ease;animation-iteration-count:1;animation-fill-mode:forwards;display:inline-block;margin:0;zoom:0.5;box-shadow:0.125em 0.3125em 0.625em #bdbdbd;cursor:pointer;user-select:none;border:none;font-size:16px}
.btn:nth-child(n+2){margin-left:1em}
.btn::after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;display:block;border:0.0625em solid #9e9e9e;border-radius:0.625em;z-index:1;box-sizing:content-box;animation-iteration-count:1;animation-fill-mode:forwards;transform:translate(-0.05em, -0.05em)}
.btn>div{display:block;border:none;color:#ffffff;text-align:center;text-decoration:none;border-radius:0.45em;transform:translate(-0.1em,-0.25em);z-index:2;transition:all 0.2s ease;animation-iteration-count:1;animation-fill-mode:forwards;box-sizing:border-box;font-size:1.25em;line-height:2.15em;background:#2196F3;box-shadow:0.1em 0.25em 0 #006abf;position:relative;overflow:hidden;}
.btn span{font-size:1.2em;width:fit-content;display:block;text-wrap:nowrap;max-width:10em;margin: 0 0.5em;}
.btn.dowload .progresses{position:absolute;width:0;height:100%;background:#e0e0e0;display:block;top:0;right:0;overflow:hidden;white-space:nowrap;color:black}
.btn.dowload .progresses span{position:absolute;top:0;right:0;}
.btn:hover>div{transform:translate(-0.06em, -0.15em);box-shadow:0.06em 0.15em 0 #006abf;transition:all 0.2s ease}
.Loaded{background:#2196F3;color:#ffffff}

@media print{
    body{min-width:auto;background:#ffffff;padding:0}
    #ruler,.actionArea,.pageArea .number,.pageArea .control,#dzlSupport, html>*:not(body){display:none !important}
    .pageList{width:100%;max-width:100%;margin:0;display:block}
    .pageList>li{zoom:1 !important;box-shadow:none;page-break-after:always;margin:0;border-radius:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;color-adjust:exact}
    .pageList .page,.pageList .page .concent{border:0 !important}
    ::placeholder{color:transparent}
    @page{margin:0}
}