:root{--primary: aqua}html,body{font:16px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;padding:0 1rem 1rem;height:100%}.dashboard-container{display:grid;grid:"header header header" auto "leftSide body body" auto "footer footer footer" auto/auto 1fr auto;gap:1rem;height:100dvh}.dashboard-container .header{grid-area:header}.dashboard-container .sidebar{grid-area:leftSide;border-right:thin solid #ccc;background-color:var(--pico-background-color);width:15ch;padding:0 .5rem .5rem 0;transition:transform .3s ease-in-out}@media (max-width: 768px){.dashboard-container .sidebar{padding-top:40px;position:fixed;top:0;transform:translate(-30ch);height:100vh;z-index:1;transition:transform .3s ease-in-out}.dashboard-container .sidebar.open{transform:translate(0)}}.dashboard-container .menu-btn{display:none;position:fixed;top:4rem;left:-1rem;z-index:2;background-color:#fff;border:none;padding:.5rem;cursor:pointer;transform:rotate(90deg);padding:0 .5rem;width:max-content;white-space:nowrap;transition:all .3s ease-in-out}.dashboard-container .menu-btn .arrow{display:none}.dashboard-container .menu-btn .arrow svg{height:1rem;width:1rem}@media (max-width: 768px){.dashboard-container .menu-btn{display:block}}.dashboard-container .menu-btn.open{transform:rotate(0);left:0;top:1rem}.dashboard-container .menu-btn.open .arrow{display:inline-block}.dashboard-container .body{grid-area:body}.dashboard-container .footer{grid-area:footer}