body,html{margin:0;padding:0;overflow:auto;height:100%;min-height:100%;font-family:Tahoma,Arial,"微软雅黑",sans-serif}
html{background-color:#fff;SCROLLBAR-DARKSHADOW-COLOR:#92c0d1;SCROLLBAR-TRACK-COLOR:#bed8eb}
*{-webkit-touch-callout:none;-webkit-user-select:none;-webkit-user-drag:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track-piece{background-color:#ccc}
::-webkit-scrollbar-thumb:vertical{height:6px;background-color:#999;-webkit-border-radius:6px}
::-webkit-scrollbar-thumb:horizontal{width:6px;background-color:#999;-webkit-border-radius:6px}
::-webkit-scrollbar-thumb:hover{background-color:#9f9f9f}
::-webkit-scrollbar-corner{background-color:#ccc}
.smtflow{background-color:#d2e1f0;border:#99bbe8 1px solid;border-radius:3px;height:100%;box-sizing:border-box;min-width:850px;min-height:550px;box-shadow:3px 3px 3px #888;padding:5px;position:relative;display:grid;grid-template-columns:64px auto;grid-template-rows:40px auto 40px;grid-row-gap:5px;grid-column-gap:5px;grid-template-areas:'header header' 'aside section' '. footer'}
.thumbnail{border:#ccc 1px solid;margin:20px;background-image:url(img/cell.svg);background-size:6px 6px;position:absolute;z-index:1500;top:50px;right:20px;width:300px;box-shadow:#ccc 2px 2px 3px;overflow:hidden}
.thumbnail>div{position:absolute;box-shadow:0 0 0 5000px rgba(225,225,225,.4);cursor:move}
.smtflow>div.msg{display:none;height:20px;position:absolute;top:100px;z-index:2000;left:0;right:0;margin:auto;text-align:center}
.smtflow>div.msg>span{display:inline-block;padding:3px 5px;background-color:#e3ea8f;border:1px solid #ccc;box-shadow:#ccc 1px 1px 1px;font-size:14px}
.smtflow>header.header{height:40px;display:flex;align-items:center;grid-area:header}
.smtflow>header.header>div.logo{border:#b7c8d7 1px solid;border-radius:3px;margin-right:5px;height:38px}
.smtflow>header.header>div.logo>div.box{height:38px;border:#e9f4fa 1px solid;border-radius:3px;display:flex;align-items:center;padding:0 10px;position:relative}
.smtflow>header.header>div.logo>div.box>b.icon{width:40px;height:40px;background:url(img/logo.svg) no-repeat;background-size:40px 40px;transform:rotateY(180deg);margin:0 9px 0 3px}
.smtflow>header.header>div.logo>div.box>label.title{display:inline-block;line-height:38px;height:38px;width:350px;font-size:14px;font-weight:700;text-align:center}
.smtflow.enable>header.header>div.logo>div.box>label.title:hover{cursor:pointer}
.smtflow>header.header>div.logo>div.box>div.ipt{position:absolute;right:10px;top:4px;width:350px}
.smtflow>header.header>div.logo>div.box>div.ipt>input{outline:0;text-align:center;height:30px;width:100%;font-size:14px;font-weight:700;box-sizing:border-box}
.smtflow>header.header>div.logo>div.box>div.ipt>b.ok{width:24px;height:24px;background-size:24px 24px;display:inline-block;border:0;background-repeat:no-repeat;background-position:center;background-image:url(img/icon-ok.svg);position:absolute;right:3px;top:3px}
.smtflow>header.header>div.logo>div.box>div.ipt>b.ok:hover{background-color:#e3ea8f;cursor:pointer}
.smtflow>header.header>span.separate{height:30px;width:0;border-left:#9ac6ff 1px solid;border-right:#fff 1px solid;display:inline-block;position:relative;margin:0 3px;top:1px}
.smtflow>header.header>div.btn,.smtflow>header.header>div.linetool{display:flex;align-items:center}
.smtflow>header.header>div.btn>div,.smtflow>header.header>div.linetool>div.tool{display:inline-block;width:34px;height:34px;border:1px #d2e1f0 solid;box-sizing:border-box;margin:0 2px}
.smtflow>header.header>div.linetool>div.alte{display:none}
.smtflow>header.header>div.linetool>div.alte>div{width:32px;height:32px;cursor:pointer;box-sizing:border-box}
.smtflow>header.header>div.btn>div>b,.smtflow>header.header>div.linetool>div b{width:32px;height:32px;background-size:30px 30px}
.smtflow>aside.aside{width:64px;border:#b7c8d7 1px solid;border-radius:3px;z-index:1;background-color:#d2e1f0;box-sizing:border-box;min-height:200px;grid-area:aside}
.smtflow>aside.aside>div.tools{border:#e9f4fa 1px solid;border-radius:3px;height:100%}
.smtflow>aside.aside>div.tools>div.tool{border:1px #d2e1f0 solid;margin:6px auto}
.smtflow>aside.aside>div.tools>span.separate{display:block;height:0;width:40px;border-top:#9ac6ff 1px solid;border-bottom:#fff 1px solid;margin:0 auto}
.smtflow>section.section{border:#99b1ce 1px solid;border-radius:3px;box-sizing:border-box;grid-area:section;background-color:#fff;overflow:auto}
.smtflow>section.section:has(.ratio){overflow:auto}
.smtflow>section.section:has(.original){overflow:hidden}
.smtflow>section.section>div.workarea{position:relative;box-sizing:border-box}
.smtflow>section.section>div.workarea.focus{cursor:move}
.smtflow>section.section>div.workarea>div.ipt{position:absolute;z-index:1500;background-color:#d2e1f0;padding:2px;border:1px #ccc solid;border-radius:3px;display:none}
.smtflow>section.section>div.workarea>div.ipt>input.text{float:left;width:80px;outline:0;text-align:center;font-size:12px}
.smtflow>section.section>div.workarea>div.ipt>b.ok{float:left;width:20px;height:20px;background-size:20px 20px;display:inline-block;border:0;background-repeat:no-repeat;background-position:center;background-image:url(img/icon-ok.svg)}
.smtflow.enable>section.section>div.workarea>div.ipt>b.ok:hover{background-color:#e3ea8f;cursor:pointer}
.smtflow>section.section>div.workarea>div.shadow{display:none;cursor:move;width:48px;height:48px;position:fixed;z-index:1000;box-sizing:border-box;opacity:.6;border-radius:20%}
.smtflow>section.section>div.workarea>div.shadow>div.tool{margin:4px}
.smtflow>section.section>div.workarea>div.linetool{position:absolute;z-index:1000;top:0;left:0;height:20px;border:1px solid #ccc;background-color:#e3e2e2;display:none}
.smtflow>section.section>div.workarea>div.linetool b{width:20px;height:20px;box-sizing:border-box;background-size:20px 20px}
.smtflow.enable>section.section>div.workarea>div.linetool b:hover{opacity:.7;cursor:pointer;background-color:#ede6b7}
.smtflow>section.section>div.workarea>div.linetool b.line{background-image:url(img/line-line.svg)}
.smtflow>section.section>div.workarea>div.linetool b.polyline{background-image:url(img/line-polyline.svg)}
.smtflow>section.section>div.workarea>div.linetool b.title{background-image:url(img/line-title.svg)}
.smtflow>section.section>div.workarea>div.linetool b.dashed{background-image:url(img/line-dashed.svg)}
.smtflow>section.section>div.workarea>div.linetool b.remove{background-image:url(img/line-remove.svg)}
.smtflow.enable>section.section>div.workarea>svg>g.nodes image.icon:hover{cursor:move}
.smtflow>section.section>div.workarea>svg>g.nodes g.focus rect.rect,.smtflow>section.section>div.workarea>svg>g.nodes g.move rect.shadow{fill:#ede6b7}
.smtflow>section.section>div.workarea>svg>g.nodes g.move rect{stroke-dasharray:3,2}
.smtflow.enable>section.section>div.workarea>svg text:hover,.smtflow.enable>section.section>div.workarea>svg>g.nodes image.remove{cursor:pointer}
.smtflow>section.section>div.workarea>svg>g.nodeDot rect.dot{width:10px;height:10px;fill:transparent;stroke-width:2;stroke:transparent;fill-opacity:.5}
.smtflow>section.section>div.workarea>svg>g.nodeDot.over rect.dot{cursor:pointer;fill:#838383}
.smtflow>section.section>div.workarea>svg>g.nodeDot.over rect.dot.over{fill:#ede6b7;stroke:#838383;stroke-width:2}
.smtflow>section.section>div.workarea>svg>g.lines g.focus path.line{stroke:#d39b26;marker-end:url(#focusArrow)}
.smtflow.enable>section.section>div.workarea>svg>g.lines g.line:hover path.line,.smtflow.enable>section.section>div.workarea>svg>g.lines g.line:hover path.shadow{stroke-opacity:.8;cursor:pointer}
.workarea ul.menu{position:fixed;width:100px;background-color:#d2e1f0;border:#99bbe8 1px solid;box-shadow:3px 3px 3px #999;list-style-type:none;box-sizing:border-box;line-height:18px;font-size:14px;padding-left:8px;margin:0;display:none;z-index:2000}
.workarea ul.menu>li{padding:5px 0 5px 22px;background-size:16px 16px;background-repeat:no-repeat;background-position:center left;background-origin:padding-box;border-bottom:1px dotted #ccc}
.workarea ul.menu>li.remove{background-image:url(img/menu-remove.svg)}
.workarea ul.menu>li.setting{background-image:url(img/menu-setting.svg)}
.workarea ul.menu>li.cancel{background-image:url(img/menu-cancel.svg)}
.workarea ul.menu>li:hover{cursor:pointer;text-shadow:#b3ba5c 0 0}
.smtflow>footer.footer{box-sizing:border-box;grid-area:footer;display:flex;justify-content:space-between;align-items:center;padding:0 5px}
.smtflow>footer.footer a:link{color:#0a5b85;text-decoration:none}
.smtflow>footer.footer span{font-size:13px;line-height:20px;text-shadow:#fff 2px 2px 2px;color:#0a5b85}
.smtflow>footer.footer span:first-child{float:left}
.smtflow>footer.footer span.ver{float:right;font-style:italic;font-family:Georgia,sans-serif}
.smtflow>aside.aside>div.tools>div.tool>b,.smtflow>header.header>div.btn>div>b,.smtflow>header.header>div.linetool>div b,.smtflow>section.section>div.workarea>div.linetool>div>b,.smtflow>section.section>div.workarea>div.shadow>div.tool>b{display:inline-block;border:0;background-repeat:no-repeat;background-position:center}
.smtflow>aside.aside>div.tools>div.tool,.smtflow>section.section>div.workarea>div.shadow>div.tool{width:40px;height:40px;box-sizing:border-box}
.smtflow>aside.aside>div.tools>div.tool>b,.smtflow>section.section>div.workarea>div.shadow>div.tool>b{width:38px;height:38px;background-size:36px 36px}
.smtflow.enable>aside.aside>div.tools>div:hover,.smtflow.enable>header.header>div.btn>div:hover,.smtflow.enable>header.header>div.linetool>div.tool{border-radius:2px;cursor:pointer;border:#8b7654 1px solid;background-color:#e3ea8f}
.smtflow>header.header>div.linetool>div b.ico_line{background-image:url(img/btn-line.svg)}
.smtflow>header.header>div.linetool>div b.ico_polyline{background-image:url(img/btn-polyline.svg)}
.smtflow>header.header>div.btn>div>b.ico_new{background-image:url(img/btn-new.svg)}
.smtflow>header.header>div.btn>div>b.ico_open{background-image:url(img/btn-open.svg)}
.smtflow>header.header>div.btn>div>b.ico_save{background-image:url(img/btn-save.svg)}
.smtflow>header.header>div.btn>div>b.ico_undo{background-image:url(img/btn-undo.svg);background-size:28px 28px}
.smtflow>header.header>div.btn>div>b.ico_redo{background-image:url(img/btn-redo.svg);background-size:28px 28px}
.smtflow>header.header>div.btn>div>b.ico_download{background-image:url(img/btn-download.svg)}