body,html{margin:0;padding:0;overflow:hidden;background-color:#121212;color:#fff;font-family:Arial}::-webkit-scrollbar{display:none}.container{display:flex;flex-direction:row;align-items:flex-start;height:100vh;overflow-x:hidden;min-width:300px}#gl-canvas{flex-grow:1;height:100%;max-width:100%;min-width:200px}.add-input{display:block;background:transparent;color:#fff;border:none;border-radius:100%;font-size:10pt;white-space:nowrap;width:20px;height:20px;margin-left:8px;transition:all .3s ease;cursor:pointer}.add-input:hover{box-shadow:0 2px 4px #0000001a;background-color:#1a1a1a}.input-name{flex:1;margin-right:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 40px)}.play-pause-btn{background:none;border:none;color:#e0e0e0;cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.play-pause-btn:hover{background-color:#1a1a1a}.play-pause-btn.playing .icon{display:inline}.db-rectangle{background-color:red;height:10px;width:0%;margin-top:10px;margin-bottom:10px}.db-rectangle.hidden{display:none}.toolbar-item{list-style-type:none;padding:1px 1px 8px;margin:0;overflow:hidden;background-color:#000;text-align:center;position:relative;display:flex;flex-direction:column;width:200px;min-width:200px;transition:width .3s ease;transition:border-color .1s ease;border-color:#1a1a1a;border-style:solid;border-width:1px}.toolbar-item:hover{border-color:#fff}.toolbar-item.hidden{display:none}.toolbar-item li{font-family:Arial;font-size:10pt;background-color:#000;white-space:nowrap;user-select:none;text-align:left;-webkit-user-select:none;cursor:pointer;width:100%;transition:color .3s ease,background-color .3s ease}.toolbar-item li:hover{background-color:#1a1a1a}.toolbar-item .header{display:flex;padding:0 10px;font-size:10pt;align-items:center;transition:transform .1s ease}.toolbar-item .header .dragger{margin-left:auto;margin-top:3px}.toolbar-item .header .dragger svg{color:#fff;width:20px}.toolbar-item .header .dragger:hover{transform:scale(1.1);margin-top:4px}.toolbar-item .header .dragger:active{transform:scale(1)}.toolbar-item .header h2{font-size:10pt}.toolbar-subitem{width:100%;box-sizing:border-box;padding:8px 16px;margin:0;max-width:100%;overflow:hidden;font-size:10pt}.toolbar-subitem .pane{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}.toolbar-subitem .toolbar-sublist{list-style-type:none;padding-left:0}.toolbar-subitem .toolbar-sublist li{padding:8px 16px;width:inherit}.toolbar-subitem .toolbar-sublist li.selected{border:1px solid #ffffff;border-radius:2px}.button-container{display:flex;align-items:center}.button-container button{background-color:transparent;border:none;color:#fff;font-size:10pt;display:flex;padding-left:0}.key-hint{margin-left:auto}button:hover{background-color:#1a1a1a;color:#8fbaff}.color-picker-container{padding-top:8px;padding-bottom:8px;width:inherit;position:relative}.color-picker{max-width:inherit;height:160px;margin-top:16px}.pane{font-size:10pt;text-align:left;display:flex}#hidden-input{display:none}.color-preview{min-width:20px;min-height:20px;border:white;border-radius:20%;border-style:solid;border-width:1px;margin-left:70%;transition:transform .1s ease}.color-preview:hover{transform:scale(1.2)}.color-preview:active{transform:scale(1)}.slider{display:flex}.slider input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:40%;height:15px;background:#1a1a1a;margin-left:auto;outline:none;opacity:.7;-webkit-transition:.2s;transition:opacity .1s ease;border-radius:20px;transform:translate(8px)}.slider input:hover{opacity:1}