.sidebar{position:fixed;background-color:#1c1b21;width:300px;display:flex;flex-direction:column;justify-content:space-between;height:100vh;z-index:2;opacity:0;transform:translate(-100%);transition:opacity .5s ease,transform 1s ease,visibility 0s 1s}.sidebar.visible{opacity:1;transform:translate(0)}.sidebar.visible-permanent{opacity:1;transform:translate(0);transition:opacity 0s ease,transform 0s ease,visibility 0s 0s}.sidebar-layout{padding-left:20px;padding-top:40px}.logo{color:#fff;display:flex;align-items:center;gap:15px}.logo h1{flex:1;text-align:left;color:#fff;font-size:20px;font-weight:600}.logo img{width:50px;height:50px;border-radius:10px}.nav{margin-top:30px;margin-right:30px}.nav-element{width:100%;display:flex;align-items:center;gap:20px;margin-left:10px;padding-bottom:10px;padding-top:10px}.nav-element span{flex:1;text-align:left;color:#fff;font-size:20px;font-weight:400}.nav-element img{width:30px;height:20px;color:#fff;stroke-width:0;text-align:left}.nav-element-selected{background-color:#f3485a;border-radius:10px;padding:10px;margin-left:0;transition:background-color .3s}.nav-element-selected:hover{background-color:#f3485ab3}.nav-element-selected:active{background-color:#f3485a80}.sidebar-back{position:absolute;z-index:1;bottom:0}.sidebar-footer{z-index:10;width:100%;height:100%;display:flex;justify-content:center;align-items:flex-end;padding-left:20px;padding-bottom:40px;padding-right:30px}@media(max-width:1000px){.logo h1{display:none}.nav-element{gap:20px;margin-top:20px}.nav-element span{display:none}.sidebar,.sidebar-back{width:90px}.sidebar-footer{padding-bottom:100px;margin:0;padding-right:20px}}