:root{
  --sidebar-expanded:280px;
  --sidebar-collapsed:84px;
}

aside{
  border-right: 1px solid #222;
}

.nav-link:nth-child(1){
  margin-top: 4rem;
}

.nav{
  padding-top: 4rem;
}

.nav-link{
  display:flex;
  align-items:center;
  gap:14px;

  height:52px;

  padding:0 16px;

  border-radius:14px;

  color:#a1a1aa;

  transition:.2s;
}

.collapseBtn{
  position: absolute;
  right: -8%;
  top: 0;
  background: #222;
}


.nav-link:hover{
  background:#18181b;
  color:white;
}

.nav-link i{
  font-size:20px;
  min-width:20px;
}

.dropdown{
  position:absolute;
  right:0;
  top:56px;

  width:320px;

  background:#111113;

  border:1px solid #27272a;

  border-radius:20px;

  overflow:hidden;

  display:none;
}

.dropdown.show{
  display:block;
}

.dropdown-item{
  padding:14px 18px;
  cursor:pointer;
}

.dropdown-item:hover{
  background:#18181b;
}

.dropdown-divider{
  height:1px;
  background:#27272a;
}

.dropdown-item.danger{
  color:#f87171;
}

.sidebar-collapsed{
  width:84px !important;
}

.sidebar-collapsed .sidebar-label{
  display:none;
}

.sidebar-collapsed .brand{
  justify-content:center;
}

.sidebar-collapsed .nav-link{
  justify-content:center;
}

.nav a,
.bottom-nav a{
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #a1a1aa;
  text-decoration: none;
  transition: .25s;
}

.nav a:hover{
  color: white;
}

.nav a.active{
  background: rgba(255,255,255,.08);
  color: white;
}

.nav a.active::before{
  content: "";
  position: absolute;
  right: 0;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 999px;
  background: white;
}

.bottom-nav{
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.bottom-nav a{
  display: flex;
  flex-direction: column; /* important */
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  color: #a1a1aa;
  text-decoration: none;
  flex: 1;
  padding: 8px 0;
}

.bottom-nav a i{
  font-size: 20px;
}

.bottom-nav a.active{
  color: white;
}