:root{--tf-tab-bg-color:#F0F0F0;--tf-bd-color:#CCC;--tf-action-hover:#f6f6f6;--tf-flow-bg:#f8f8f8;--tf-flow-hover:#f4f4f4}.tool-form{display:flex}.action-column{width:180px;overflow-y:auto}.flow-column{width:260px;padding:0 10px;overflow-y:auto}.output-column{flex:1}.action-column h3,.flow-column h3,.output-column h3{text-align:left;font-size:14px;font-weight:400;line-height:40px;color:#888;text-indent:5px}.action-flow-tabs{height:30px;margin:5px 0 15px 0;border-radius:15px;background-color:var(--tf-tab-bg-color)}.action-flow-tabs li{float:left;width:50%;text-align:center;font-size:14px;font-weight:400;line-height:30px;color:#888;border-radius:15px;cursor:pointer}.action-flow-tabs li.on{color:#555;background-color:#ddd}.action-list ul{display:block;width:100%}.action-list li{display:inline-block;height:32px;line-height:32px;cursor:pointer;border:solid 1px var(--tf-bd-color);border-radius:16px;padding:0 12px;margin-bottom:8px}.action-list li:hover{background-color:var(--tf-action-hover)}.save-flow-list ul{display:block}.save-flow-list li{height:30px;border:solid 1px var(--tf-bd-color);border-radius:4px;margin-bottom:5px;padding:0 5px;font-size:14px}.save-flow-list li p{float:left;height:30px;line-height:30px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:155px;cursor:pointer}.save-flow-list li p:hover{color:#28a745}.save-flow-list li a{float:right;color:#888;display:inline-block;height:30px;line-height:30px;cursor:pointer}.save-flow-list li a:hover{color:#d9534f}.save-flow-list li.on{background:#28a745;border:solid 1px #28a745}.save-flow-list li.on a,.save-flow-list li.on p{color:#fff}.save-flow-new{text-align:center;background-color:var(--tf-flow-bg);border:solid 1px var(--tf-bd-color);border-radius:4px;cursor:pointer}.flow-list{padding:0;list-style:none}.flow-list li{border:solid 1px var(--tf-bd-color);border-radius:4px;margin-bottom:10px;position:relative;background-color:var(--tf-flow-bg);padding-bottom:8px}.flow-list li:active{background-color:var(--tf-flow-hover)}.flow-list li:hover{background-color:var(--tf-flow-hover)}.flow-list li h4{display:block;height:30px;line-height:30px;border-bottom:solid 1px var(--tf-bd-color);margin-bottom:8px}.flow-sort{float:left;padding:0 6px;cursor:move;font-weight:400}.flow-delete{position:absolute;top:5px;right:5px;width:18px;height:18px;cursor:pointer;text-align:center;line-height:18px}.flow-delete:hover{background-color:#d9534f;color:#fff;border-radius:4px}.flow-item{padding:5px 10px;display:flex;font-size:14px}.flow-item span{width:30%;text-align:right;padding-right:5px}.flow-item input[type=number],.flow-item input[type=text],.flow-item select{display:block;width:70%;border:solid 1px var(--tf-bd-color);padding:2px 5px;border-radius:4px;background-color:#fff}.flow-item p{color:#666}.flow-tips{text-align:center;line-height:40px;padding:1rem;border:dashed 1px var(--tf-bd-color);border-radius:3px}.flow-clear{text-align:center;padding:10px}.flow-save{text-align:center}.flow-save-box-form{display:flex;flex-direction:row;margin-top:5px}#flow-name{width:100%;margin-right:5px}.textarea-box{position:relative}.textarea-box textarea{width:100%;display:block}.stats-box{position:absolute;right:10px;bottom:10px;background-color:#3333330d;padding:5px 10px;border-radius:5px;font-size:12px}.output-bottun{padding:10px 0;text-align:center}@media (max-width:768px){.tool-form{flex-direction:column}.column{width:100%;height:auto;overflow-y:visible}.flow-column{padding:0 0 5px 0}.action-list{text-align:center;padding-bottom:10px}}body.dark{--tf-tab-bg-color:#0a0a0a;--tf-bd-color:#444;--tf-action-hover:#0a0a0a;--tf-flow-bg:#222;--tf-flow-hover:#0a0a0a}