body,html{height:100%}body{font:14px Open Sans,Helvetica,Arial,sans-serif;background:#505050;color:#f0f0f0;display:flex;flex-direction:column}body,h1,h2,h3,h4,h5,h6,li,ul{margin:0;padding:0}ul{list-style-type:none}header{background:#f0f0f0;color:#303030;flex:0 1 auto}h1{padding:5px;font-size:16px}#toolbar{background:#fff;color:#303030;display:flex;flex-direction:row}#toolbar li{display:block;flex:0 1 auto}#toolbar a{background:#fff;color:#303030;text-decoration:none;display:block;padding:10px;transition:background-color .4s}#toolbar a:hover{background:#d0d0d0}main{flex:1;display:flex;min-height:0}main>section{width:0}#palette,#properties{background:#303030;color:#fff}#palette h1,#properties h1{padding:5px 0;font-size:14px}#palette{flex:0 0 200px;overflow-y:auto;-ms-overflow-style:none}#palette::-webkit-scrollbar{width:6px;background:#282828}#palette::-webkit-scrollbar-thumb{background:#606060;border-radius:4px}#properties{flex:0 0 350px}#nodes{flex:1 1 auto;position:relative;background-color:#505050;background-size:60px 60px;background-position:50% 50%;background-image:linear-gradient(90deg,#585858 1px,transparent 2px),linear-gradient(180deg,#585858 1px,transparent 2px);overflow:hidden}#nodes svg{pointer-events:none;top:0;left:0;width:100%;height:100%}#nodes svg,.node{position:absolute}.node{width:200px;height:150px;user-select:none;border:2px solid #606060;border-radius:5px;background:#303030;color:#fff;z-index:1}.node.selected h2{background:#f0c040}.node.error h2{background:maroon;color:#f0f0f0}.node h2{font-size:14px;text-align:center;border-radius:3px 3px 0 0;background:#f0f0f0;padding-right:20px;cursor:default}.node a.close,.node h2{display:block;color:#303030;font-weight:700}.node a.close{position:absolute;padding:1px 5px;font-size:16px;text-decoration:none;line-height:1;top:0;right:0}.node a.close:before{content:"\D7"}.node a.copy{bottom:0;right:0;color:#fff}.node a.copy:before{content:"C"}.node .inputs,.node .outputs{position:absolute;top:30px}.node .inputs{left:-7px}.node .outputs{right:-7px}.node .input,.node .output{width:10px;height:10px;border-radius:7px;border:2px solid #606060;cursor:pointer;margin-bottom:5px;background:#fff;transition:opacity .2s,border-color .2s}.node .input.empty,.node .output.empty{background:#303030}.node .input.selected,.node .output.selected{background:#f0f0f0}.node .output{text-align:right}.node .content{padding:10px 20px;font:12px Consolas;word-wrap:break-word;overflow:hidden;height:100px}.wiring .input,.wiring .output{cursor:default}.wiring .input.target,.wiring .output.target{border-color:#40a020;opacity:1;cursor:pointer}.wiring .input.target:hover,.wiring .output.target:hover{border-color:#80f040}.wiring .input:not(.target):not(.selected),.wiring .output:not(.target):not(.selected){opacity:0}#palette{padding:10px;font-size:12px}#palette li{padding-left:5px}#palette a{color:silver;text-decoration:none}#properties{padding:10px}#properties textarea{display:block;width:100%;max-width:100%;height:100px}#properties h1{color:#a0a0a0;margin-bottom:5px}#properties h1 span{color:#fff}#properties>div>div{margin-bottom:5px}#properties label{display:inline-block;min-width:120px;padding-right:10px}#properties input{box-sizing:border-box;margin:0}#properties textarea{font:12px Consolas}#properties .output-properties textarea{border:0;background:silver;color:#303030}#test-input{width:100%;height:100px}