.ComponentCategoryBrowser{display:flex;width:42px;border-right:2px solid #222}.ComponentCategoryBrowser li,.ComponentCategoryBrowser ul{list-style:none;padding:0;margin:0;display:block}.ComponentCategoryBrowser li{border-bottom:1px solid #222}.ComponentCategoryBrowser button{width:40px;height:34px;font-size:20px;background:transparent;border:none;color:#bbb;cursor:pointer}.ComponentCategoryBrowser button:hover{background-color:hsla(0,0%,100%,.1)}.ComponentCategoryBrowser button.active{background-color:hsla(0,0%,100%,.2);color:#eee}.ComponentBrowserList{display:flex;flex:1;overflow-y:auto}.ComponentBrowserList li,.ComponentBrowserList ul{display:block;width:100%;list-style:none;padding:0;margin:0}.ComponentBrowserList li{border-bottom:1px solid #222}.ComponentBrowserListRecord{display:block;background-color:#444;width:100%;border:0;color:#222;text-align:left;cursor:pointer;padding:7px;line-height:100%}.ComponentBrowserListRecord strong{color:#eee;font-weight:400}.ComponentBrowserListRecord small{color:#888;font-size:10px}.ComponentBrowserListRecord:hover{background-color:#515151}.ComponentBrowser{display:flex;flex:1;background:#444;border-right:2px solid #222}.visualize-wave{width:100%;background-color:#222;height:64px}.visualize-wave canvas{width:100%;height:100%}.workspace-menu{background:#444;border-bottom:1px solid #222;height:30px}.workspace-menu li,.workspace-menu ul{margin:0;padding:0;list-style:none;display:inline-block;height:30px;overflow:hidden}.workspace-menu .file-button,.workspace-menu li button{display:block;padding:7px 14px;background:transparent;border:none;color:#eee;cursor:pointer}.workspace-menu .file-button:hover,.workspace-menu li button:hover{background-color:hsla(0,0%,100%,.1)}.file-button{position:relative;display:block;overflow:hidden;height:30px}.file-button input{position:absolute;left:0;top:0;height:100%;opacity:0;z-index:0;cursor:pointer}.btn{display:inline-block;padding:7px 14px;background:transparent;border:none;color:#eee;cursor:pointer}.btn:hover{background-color:hsla(0,0%,100%,.1)}.popup{width:600px;height:80vh;min-height:200px;background:#444;border:1px solid #222;color:#eee;display:flex;flex-direction:column}.popup-header{display:flex;border-bottom:1px solid #222}.popup-header h2{display:block;flex:1;font-size:20px;font-weight:400;margin:0;padding:5px 10px}.popup-body{flex:1}.popup-footer{display:flex;border-top:1px solid #222;padding:5px}.connection-list-item{display:flex;padding:10px}.connection-list-item-status{width:32px}.connection-list-item-name{display:block;flex:1}.connection-list-item-name small{display:inline-block;width:70px}.connection-list-popup{width:600px;height:80vh;min-height:200px}.connection-list,.connection-list li{display:block;margin:0;padding:0;list-style:none}.connection-list li{border-bottom:1px solid #333}#workspace-footer{display:flex;height:25px;background:#444;border-top:1px solid #222}#workspace-footer div{border-left:1px solid #222}#workspace-footer div>button{background:none;border:none;color:#eee;cursor:pointer;height:24px;line-height:24px;padding:0 10px}#workspace-footer div>button:hover{background-color:hsla(0,0%,100%,.1)}#workspace{flex-direction:column;background:#333}#workspace,#workspace-main{flex:1;display:flex}#workspace-sidebar{width:250px;display:flex}#workspace-editor{flex:1}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100%;height:100%}.fullscreen{position:absolute;left:0;top:0;right:0;bottom:0;display:flex}.popup-background{z-index:50;background-color:rgba(0,0,0,.5);align-items:center;justify-content:center}*{box-sizing:border-box}body,html{width:100%;height:100%;margin:0;padding:0;overflow:hidden}.flex-rows{flex:1;flex-direction:row}.flex-columns,.flex-rows{display:flex;max-width:100%;max-height:100%}.flex-columns{flex:1;flex-direction:column}.flex-stretch{flex:1}.text-danger{color:#f04}.text-warning{color:#fc4}.text-success{color:#8c4}.scroll-container{flex:1;overflow-x:hidden;overflow-y:auto}