/* Sidebar toggle button */
.side-togg{background:transparent;border:1px solid var(--bg-four);color:var(--text-firs);cursor:pointer;font-size:1.4rem;padding:0;border-radius:var(--bo-ra-icon);transition:var(--transition);display:flex;justify-content:center;width:1.6rem;height:2.2rem;line-height:1.2}.side-togg:hover{background:var(--bg-four)} 
#app.side-open .side-togg{display:none} 

/* Scrollbar for sidebar */
.side-cont{scrollbar-width:none;-ms-overflow-style:none}   
.side-cont::-webkit-scrollbar{display:none}

/* Sidebar styles */
.side-bar{position:fixed;top:0;right:-100%;width:33.33%;height:100vh;background:var(--bg-firs);border-left:1px solid var(--bg-thir);z-index:1000;transition:right 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);display:flex;flex-direction:column}   .side-bar.open{right:0}
.side-head{display:flex;justify-content:space-between;align-items:center;padding:1rem 1rem .5rem 1rem;gap:1rem}   .side-sear{flex:1} 
.side-sear-inpu{width:100%;padding:.5rem .75rem;background:transparent;border:1px solid var(--bg-thir);border-radius:var(--bo-ra-larx);color:var(--text-firs);font-size:.9rem;outline:none;transition:var(--transition)}.side-sear-inpu:focus{border-color:var(--c888)}.side-sear-inpu::placeholder{color:var(--text-thir)}

.side-clos{background:transparent;border:1px solid var(--bg-four);color:var(--text-firs);cursor:pointer;font-size:1.4rem;padding:0;border-radius:var(--bo-ra-icon);transition:var(--transition);display:flex;justify-content:center;width:1.6rem;height:2.2rem;line-height:1.2}.side-clos:hover{background:var(--bg-four)}

.side-cont{padding:1rem;flex:1;overflow-y:auto}
.side-item{padding:.75rem;background:transparent;border-radius:var(--bo-ra-larg);cursor:pointer;transition:var(--transition);color:var(--text-firs);position:relative}.side-item:hover{background:var(--bg-seco)}.side-item.active{background:var(--bg-seco)}
.side-item[data-target]::after{content:'+';position:absolute;right:.75rem;top:50%;transform:translateY(-50%);color:var(--text-thir);font-size:.9rem;opacity:0;transition:var(--transition)}
.side-item[data-target]:hover::after,.side-item[data-target].active::after{opacity:1}
.side-item[data-target].active::after{content:'-'}
.side-icon{margin-right:1rem;font-size:1rem}
.side-sub-cont{max-height:0;overflow:hidden;transition:max-height 0.3s ease-out;background:transparent;margin-top:.25rem}
.side-sub-cont.open{max-height:300px;transition:max-height 0.3s ease-in}
.side-sub-item{padding:.5rem .5rem .5rem 3rem;color:var(--text-seco);cursor:pointer;transition:var(--transition);background:transparent;border-radius:var(--bo-ra-larg);margin-bottom:.2rem}.side-sub-item:hover{background:var(--bg-seco);color:var(--text-firs)}.side-sub-item.active{background:var(--bg-seco);color:var(--text-firs)}
.side-foot{padding:1rem;display:flex;gap:.5rem;flex-wrap:wrap;justify-content:space-between}
.side-foot-item{padding:.5rem;background:var(--bg-seco);border-radius:var(--bo-ra-aver);cursor:pointer;transition:var(--transition);color:var(--text-firs);font-size:.8rem;text-align:center;flex:1;white-space:nowrap}.side-foot-item:hover{background:var(--bg-thir)}.side-foot-item.active{background:var(--bg-thir)}

/* Sidebar responsive layouts */ 
@media (max-width: 600px) {.side-cont,.side-head,.side-foot{padding:.5rem} 
.side-bar{right:-100%;width:100%!important;min-width:unset!important} .side-bar.open{right:0} #app{margin-right:0}} 

@media (max-width: 900px) {
.side-bar{min-width:400px;right:-100%;} .side-bar.open{right:0} #app{margin-right:0}} 

@media (min-width: 900.001px) {.side-bar{right:0} .side-bar.open{right:0} .side-bar:not(.open){right:-100%} #app{margin-right:33.33%;transition:margin-right 0.6s cubic-bezier(0.25, 0.8, 0.25, 1)} #app:not(.side-open){margin-right:0}}