:root{--sidebar-width: 250px}.sidebar{height:100vh;width:250px;position:fixed;z-index:90;top:0;left:0;overflow-x:hidden;overflow-y:auto;padding-top:16px;transition:transform .4s;transform:translate(-100%)}.content-wrapper{transition:margin-left .4s}.default-sidebar{height:100vh;width:250px;position:fixed;z-index:90;top:0;left:0;overflow-x:hidden;overflow-y:auto;padding-top:16px;transition:transform .4s;transform:translate(-100%)}.sidebar .closebtn,.default-sidebar .closebtn{position:absolute;top:0;right:25px;font-size:36px;margin-left:50px}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:80;opacity:0;pointer-events:none;transition:opacity .3s ease-in-out;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.overlay.active{opacity:1;visibility:visible}@media screen and (min-width:1024px){.sidebar{padding-top:16px}.default-sidebar{padding-top:32px}}@media screen and (max-width:1024px){.sidebar{transform:translate(-100%);width:85%;display:block}.default-sidebar{transform:translate(-100%);width:85%}.sidebar.active,.default-sidebar.active{transform:translate(0)}.overlay.active{opacity:1;pointer-events:auto;animation:fadeIn .3s ease-in-out}}@media screen and (min-width:768px)and (max-width:1024px){.sidebar{width:var(--sidebar-width)}.default-sidebar{width:320px}.sidebar a,.default-sidebar a{padding:8px;text-align:start}.sidebar .closebtn{right:10px;font-size:24px;margin-left:0}}@media screen and (min-width:1024px){.sidebar{transform:translate(0)}.sidebar.collapsed{transform:translate(-100%)}.default-sidebar{transform:translate(0);display:none}.openbtn{display:none}.content-wrapper{margin-left:var(--sidebar-width)}.content-wrapper.expanded{margin-left:0}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}
