body{--appbar-height: 64px}html[data-sidebar-open=true]{--sidebar-width: 288px}html[data-sidebar-open=false]{--sidebar-width: 64px}*{margin:0;box-sizing:border-box}@scope (:where(html[data-new-layout])){body{height:100vh;--footer-height: 100px;display:flex;flex-direction:column}#web-root,#root{display:flex;flex:1 1 auto;flex-direction:column}.wrapper{display:flex;flex-direction:row;flex:1 1 auto}.content{flex:1 1 auto;min-width:400px;flex-direction:column;display:flex}.main{flex:1 1 auto;display:flex;flex-direction:column}.footer{flex:0 0 auto;height:var(--footer-height);background-color:#ff69b4}.aside,.paper{padding:16px;width:var(--sidebar-width);flex:0 0 auto;display:block;background-color:beige;z-index:1000;overflow:hidden}.aside:hover{--sidebar-width: 288px}.aside .paper{height:100%;position:fixed;top:0;left:0;bottom:0;overflow:hidden}.header{position:sticky;height:64px;padding:0 16px;top:0;left:auto;width:100%;right:0;background-color:azure;z-index:1100}.toolbar{height:64px;width:100%;display:flex;flex-direction:row;justify-content:flex-start;gap:8px;align-items:center}}@scope (:where(html:not([data-new-layout]))){#root{height:100%;max-height:calc(100vh - 64px);overflow:auto;box-sizing:border-box;outline:none;flex:1 1 auto}.header{position:fixed;top:0;left:auto;right:0;z-index:1000;height:64px;background-color:#7fffd4;margin-left:calc(100% - var(--sidebar-width));width:calc(100% - var(--sidebar-width))}.toolbar{height:64px}.aside,.paper{width:var(--sidebar-width);flex:0 0 auto;display:block;background-color:beige;z-index:1000;overflow:hidden}.aside .paper{height:100%;position:fixed;top:0;left:0;bottom:0;overflow:hidden}.wrapper{display:flex;flex-direction:row;flex:1 1 auto;width:100%}.content{width:100%}.footer{display:none}}