.split{display:flex;flex:1;height:100%}.split>.content{position:relative;display:flex;box-sizing:border-box;overflow:hidden}.split>.content>*{flex:1;height:100%}.split>.content:last-child{flex:1}.split>.splitter{flex-basis:6px}.split.vertical{flex-direction:column}.split.horizontal{flex-direction:row}.split.resizeable.vertical>.splitter{cursor:row-resize}.split.resizeable.horizontal>.splitter{cursor:col-resize}.layout-container{display:flex;flex-direction:column;flex:1 0 auto;overflow:hidden;position:relative;height:100%}.layout-container>.preview{position:absolute;opacity:0;margin:0;pointer-events:none}.layout-container>.views{display:flex;position:absolute;top:0;right:0;bottom:0;left:0}.layout-container>.drag{position:absolute;margin:0;padding:0;display:none;cursor:move}.layout-container>.drag *{pointer-events:none!important}.layout-container>.drag.dragging{display:block}.layout-container .drag>.view{height:100%;width:100%}.pane[data-v-3001bcc8]{position:relative;overflow:hidden;flex:1 1 auto;height:100%;width:100%;flex-direction:column;pointer-events:none}.pane>.header[data-v-3001bcc8]{height:40px;padding:10px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pane>.content[data-v-3001bcc8]{position:absolute;top:40px;right:0;bottom:0;left:0;display:flex;flex-direction:column;overflow:auto;pointer-events:initial}.layout-container,.split{background:transparent}.layout-container>*{margin:4px;box-sizing:border-box}.layout-container .view{border:solid 1px transparent;transition:all .3s}.layout-container>.preview{background:#9b9b9b66;border:dashed 1px #666;transition:all .3s}.layout-container>.drag{display:block;transform:scale(1) translate(0);transition:transform .3s}.layout-container>.drag.dragging{opacity:.5;box-shadow:0 0 20px 4px #0006;transform:scale(.5) translate(0)}.split>.splitter{flex-basis:8px;position:relative;background:transparent;transition:all .3s}.split.resizeable>.splitter:hover,.split.resizeable.resizing>.splitter{background:#64646466;transition:all .3s}.pane{box-shadow:0 1px 3px #0000004d;overflow:hidden}.pane>.header{text-transform:uppercase;background:#eee;color:#444}.pane>.content{background:#fefefe;padding:10px}*{text-shadow:0 0 1px rgba(0,0,0,.2)}::-moz-focus-inner{border:0}:focus{outline:none}body{margin:0;padding:0;min-height:100vh;height:100vh;background:#ddd;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{height:100%}.app{display:flex;flex-direction:column;height:100%}.app .nopane *{background:#fafa9680}.controls{background:#123}.controls button{position:relative;cursor:pointer;padding:10px 20px;margin:8px;color:#fff;outline:none;border:solid 1px transparent;background:#fafafa33;transition:all .3s}.controls button.active{border:solid 1px rgba(50,200,50,.8)}.controls button:hover{background:#fafafa80}.controls button:after{position:absolute;border-radius:30px;left:50%;right:50%;bottom:5px;height:1px;content:" ";background:#32fa32b3;transition:all .3s}.controls button.active:after{left:10%;right:10%}.layout-container>.drag.dragging{z-index:20;cursor:move}.split.resizeable>.splitter:after{position:absolute;content:" ";z-index:10;transition:all .3s;top:-8px;right:-8px;bottom:-8px;left:-8px}.extra .layout-container,.split{background:#ddd}.extra .layout-container>.views{margin:8px}.extra .layout-container .view{border:solid 1px transparent;transition:all .3s}.extra .layout-container.edit .view{border:dotted 1px rgba(100,100,100,.4)}.extra .layout-container>.preview{background:#0003;border:dashed 1px #666;transition:all .3s;padding:0;margin:0}.extra .layout-container>.drag{display:block;opacity:0;transform:scale(1)}.extra .layout-container>.drag.dragging{opacity:.7;box-shadow:0 0 10px 2px #0006;transform:scale(.5);transition:transform .3s}.extra .layout-container>.drag *{pointer-events:none!important}.extra .split>.splitter{flex-basis:6px;position:relative;background:transparent;transition:all .3s}.extra .split.resizeable>.splitter{background:#64646433}.extra .split.resizeable>.splitter:after{top:0;right:0;bottom:0;left:0}.extra .split.resizeable.horizontal>.splitter:after{right:-6px;left:-6px}.extra .split.resizeable.vertical>.splitter:after{top:-6px;bottom:-6px}.extra .split.resizeable.resizing>.splitter:after,.extra .split.resizeable>.splitter:hover:after{background:#9b9b9b80}.extra .pane{box-shadow:0 1px 3px #0000004d;overflow:hidden}.extra .pane>.header{text-transform:uppercase;background:#eee;color:#444}.extra .pane>.content{background:#fefefe;padding:10px}.custom-drag{height:100%;background:#eee;padding:20px}.drag-handle{background:#fff;padding:20px;border:solid 1px #f99}.pane-body[data-v-2b99272d]{display:flex;flex-direction:column;gap:8px;padding:8px}.close-btn[data-v-2b99272d]{align-self:flex-start;padding:4px 10px;background:#c83c3cd9;color:#fff;border:none;border-radius:3px;cursor:pointer;font-size:12px;pointer-events:initial}.close-btn[data-v-2b99272d]:hover{background:#c83c3c}