@import"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";html,body,#root{height:100vh;height:100%}:root{--base-clr: #11121a;--line-clr: #42434a;--hover-clr: #222533;--text-clr: #e6e6ef;--secondary-text-clr: #b0b3c1;--accent-clr: #5e63ff;--accent-blue: #5E63FF;--accent-blue-dark: #3F43B7;--accent-blue-light: #AACCCC;--accent-green: #1dd16a;--accent-red-dark: #119956;--accent-red-light: #5FF59B;--accent-red: #ff5e5e;--accent-red-dark: #cc3a3a;--accent-red-light: #ff9e9e;--accent-yellow: #ffd54a;--accent-yellow-dark: #E6B800;--accent-yellow-light: #FFED99;-webkit-font-smoothing:antialiased}*{margin:0;padding:0}html{font-family:Poppins,Segoe UI,Tahoma,Geneva,Verdana;line-height:1.5rem}body{background-color:var(--base-clr);color:var(--text-clr);display:grid}.app-body{display:grid;grid-template-columns:auto 1fr;height:100vh}.container{border:1px solid var(--line-clr);border-radius:1em;margin-bottom:10px;padding-top:20px;padding:min(2em,15%)}.container h2,.container p{margin-top:1em}#sidebar{box-sizing:border-box;width:250px;padding:10px 1em;background-color:var(--base-clr);border-right:1px solid var(--line-clr);position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;transition:.3s ease-in-out;overflow:hidden;text-wrap:noWrap}#sidebar.close{padding:5px;width:60px}#sidebar ul{list-style:none}#sidebar>ul>li:first-child{display:flex;justify-content:flex-end;margin-bottom:10px}#sidebar>ul>li:first-child .logo{font-weight:600}#sidebar ul li.active a{color:var(--accent-clr)}#sidebar ul li.active a svg{fill:var(--accent-clr)}#sidebar a.active{color:var(--accent-clr)}#sidebar a.active svg{fill:var(--accent-clr)}#sidebar a,#sidebar .dropdown-btn,#sidebar .logo{border-radius:.5em;padding:.85em;text-decoration:none;color:var(--text-clr);display:flex;align-items:center;gap:1em}.dropdown-btn{width:100%;text-align:left;background:none;border:none;font:inherit;cursor:pointer}#sidebar svg{flex-shrink:0;fill:var(--text-clr)}#sidebar a span,#sidebar .dropdown-btn span{flex-grow:1}#sidebar a:hover,#sidebar .dropdown-btn:hover{background-color:var(--hover-clr)}#sidebar .sub-menu{display:grid;grid-template-rows:0fr;transition:.3s ease-in-out}#sidebar .sub-menu>div{overflow:hidden}#sidebar .sub-menu.show{grid-template-rows:1fr}.dropdown-btn svg{transition:.15s ease-in-out}.rotate svg:last-child{rotate:180deg}#sidebar .sub-menu a{padding-left:2em}#toggle-btn{margin-left:auto;padding:1em;border:none;border-radius:.5em;cursor:pointer;background:none}#toggle-btn svg{transition:.15s ease}#toggle-btn:hover{background-color:var(--hover-clr)}main{overflow-y:auto;padding:min(20px,7%);margin-top:50px}main p{color:var(--secondary-text-clr);margin-top:5px;margin-bottom:15px}@media (max-width: 800px){body{grid-template-columns:1fr}main{padding:2em 1em 60px}.app-body{grid-template-columns:1fr}.container{border:none;padding:1em;margin:0 auto;max-width:800px}#sidebar{height:60px;width:100%;border-right:none;border-top:1px solid var(--line-clr);padding:0;position:fixed;top:unset;bottom:0}#sidebar>ul{padding:0;display:grid;grid-auto-columns:60px;grid-auto-flow:column;align-items:center;overflow-x:scroll}#sidebar ul li{height:100%}#sidebar ul a,#sidebar ul .dropdown-btn{width:60px;height:60px;padding:0;border-radius:0;justify-content:center}#sidebar ul li span,#sidebar ul li:first-child,#sidebar .dropdown-btn svg:last-child{display:none}#sidebar ul li .sub-menu.show{position:fixed;bottom:60px;left:0;box-sizing:border-box;height:60px;width:100%;background-color:var(--hover-clr);display:flex}#sidebar ul li .sub-menu.show>div{overflow-x:auto}#sidebar ul li .sub-menu.show li{display:inline-flex}#sidebar ul li .sub-menu.show a{box-sizing:border-box;padding:1em;width:auto;justify-content:center}}