.container{display:flex;height:-webkit-fill-available;width:100%}.drawer{position:relative;min-width:0;opacity:1;transition:transform .3s ease-in-out,min-width .3s ease-in-out,flex-basis .3s ease-in-out,opacity .3s ease-in-out;transform:translateX(0)}.drawer-left.closed{transform:translateX(-100%)}.drawer-left.closed,.drawer-right.closed{min-width:0;opacity:0;flex-basis:0px!important;border:none!important}.drawer-right.closed{transform:translateX(100%)}.main-content{flex-grow:1;min-width:300px;display:flex;flex-direction:column}.controls{margin-bottom:16px;display:flex;gap:8px}.resize-handle{right:0}.resize-handle,.resize-handle-right{position:absolute;top:0;bottom:0;width:5px;cursor:col-resize;z-index:10}.resize-handle-right{left:0}@media (max-width:600px){.drawer-left{flex-basis:calc(100% * 3 / 4);min-width:calc(100% * 3 / 4);max-width:calc(100% * 3 / 4)}.drawer-right{display:none}.hover-drawer{min-width:calc(100% * 3 / 4);max-width:calc(100% * 3 / 4)}}@media (min-width:600px) and (max-width:1240px) and (orientation:portrait){.drawer-left{flex-basis:calc(100% * 3 / 8);min-width:calc(100% * 3 / 8);max-width:calc(100% * 4 / 8)}.drawer-right{display:none}.hover-drawer{flex-basis:calc(100% * 3 / 8);min-width:calc(100% * 2 / 8);max-width:calc(100% * 2 / 8)}}@media (min-width:600px) and (max-width:1240px) and (orientation:landscape){.drawer-left{flex-basis:calc(100% * 2 / 8);min-width:calc(100% * 2 / 8);max-width:calc(100% * 3 / 8)}.drawer-right{display:none}.hover-drawer{flex-basis:calc(100% * 2 / 8);min-width:calc(100% * 2 / 8);max-width:calc(100% * 2 / 8)}}@media (min-width:1240px){.drawer-left{flex-basis:calc(100% * 2 / 12);min-width:calc(100% * 2 / 12);max-width:calc(100% * 4 / 12)}.drawer-right{display:block;flex-basis:calc(100% * 4 / 12);min-width:calc(100% * 4 / 12);max-width:calc(100% * 6 / 12)}.hover-drawer{flex-basis:calc(100% * 2 / 12);min-width:calc(100% * 2 / 12);max-width:calc(100% * 2 / 12)}}.hover-drawer{position:fixed;top:48px;left:8px;height:calc(100% - (40px + 16px));background-color:#f4f4f4;box-shadow:2px 0 5px rgba(0,0,0,.2);overflow-y:auto;z-index:9999;transform:translateX(-100%);opacity:0;transition:transform .3s ease,opacity .3s ease-in-out}.hover-drawer.open{transform:translateX(0);opacity:1}