/* === v1.17 SAKULTAH STYLE COLLAPSIBLE SIDEBAR === */
.sidebar{
  transition:width .22s ease, padding .22s ease, transform .22s ease, box-shadow .22s ease!important;
}
.main,.topbar{
  transition:margin-left .22s ease, left .22s ease!important;
}
.sidebar-topline{
  height:28px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin:0 0 2px;
}
.sidebar-collapse-toggle{
  width:36px;
  height:32px;
  border:0;
  background:transparent;
  color:rgba(136,184,205,.80);
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  border-radius:10px;
  cursor:pointer;
  transition:.18s ease;
}
.sidebar-collapse-toggle span{
  display:block;
  width:22px;
  height:2px;
  border-radius:99px;
  background:currentColor;
  box-shadow:0 0 9px rgba(25,200,245,.15);
  transition:.18s ease;
}
.sidebar-collapse-toggle:hover{
  color:var(--cyan);
  background:rgba(25,200,245,.075);
  filter:drop-shadow(0 0 10px rgba(25,200,245,.20));
}

@media(min-width:1001px){
  body.sidebar-collapsed .sidebar{
    width:86px!important;
    padding:16px 10px!important;
    overflow-x:hidden!important;
  }
  body.sidebar-collapsed .main{
    margin-left:86px!important;
  }
  body.sidebar-collapsed .topbar{
    left:86px!important;
  }
  body.sidebar-collapsed .sidebar-topline{
    justify-content:center!important;
    height:42px!important;
    margin-bottom:10px!important;
  }
  body.sidebar-collapsed .sidebar-collapse-toggle{
    width:48px!important;
    height:42px!important;
    background:rgba(25,200,245,.045)!important;
    border:1px solid rgba(25,200,245,.08)!important;
  }
  body.sidebar-collapsed .brand{
    display:none!important;
  }
  body.sidebar-collapsed .side-nav{
    gap:7px!important;
    align-items:center!important;
  }
  body.sidebar-collapsed .navitem{
    width:56px!important;
    height:48px!important;
    min-height:48px!important;
    padding:0!important;
    margin:0 auto!important;
    border-radius:14px!important;
    justify-content:center!important;
    gap:0!important;
    transform:none!important;
    overflow:visible!important;
  }
  body.sidebar-collapsed .navitem .ico{
    width:22px!important;
    height:22px!important;
    min-width:22px!important;
    flex:0 0 22px!important;
    margin:0!important;
  }
  body.sidebar-collapsed .navitem .ico svg{
    width:18px!important;
    height:18px!important;
  }
  body.sidebar-collapsed .navitem span:not(.ico),
  body.sidebar-collapsed .navitem em{
    display:none!important;
  }
  body.sidebar-collapsed .navitem.active{
    background:linear-gradient(180deg,rgba(25,200,245,.18),rgba(25,200,245,.055))!important;
    box-shadow:0 0 22px rgba(25,200,245,.12), inset 3px 0 0 var(--cyan)!important;
  }
  body.sidebar-collapsed .navitem:hover{
    transform:none!important;
    background:linear-gradient(180deg,rgba(25,200,245,.16),rgba(25,200,245,.045))!important;
  }
  body.sidebar-collapsed .navitem.active:after{
    display:none!important;
  }
  body.sidebar-collapsed .navitem:before{
    top:10px!important;
    bottom:10px!important;
  }
  body.sidebar-collapsed .side-separator{
    width:48px!important;
    margin:12px auto 11px!important;
    background:linear-gradient(90deg,transparent,rgba(126,188,213,.22),rgba(25,200,245,.18),transparent)!important;
  }
  body.sidebar-collapsed .socials{
    grid-template-columns:1fr!important;
    gap:8px!important;
    width:56px!important;
    margin:16px auto 0!important;
    padding-top:12px!important;
  }
  body.sidebar-collapsed .socials a{
    min-height:46px!important;
    width:56px!important;
    padding:0!important;
    justify-content:center!important;
    text-align:center!important;
    border-radius:14px!important;
  }
  body.sidebar-collapsed .socials a span:not(.social-svg){
    display:none!important;
  }
  body.sidebar-collapsed .social-svg{
    margin:0!important;
  }
}

@media(max-width:1000px){
  .sidebar-topline{display:none!important;}
}