.user-dropdown.show{
  display:flex;
}

/* =========================
   BOTTOM NAV
========================= */

.bottom-nav{
  position:fixed;
  bottom:0;
  left:0;
  right:0;

  height:84px;            /* bigger nav bar */

  background:#fff;
  border-top:1px solid #eee;

  display:flex;
  justify-content:space-around;
  align-items:flex-start; /* keep icons near top */

  padding-top:14px;        /* same distance from top */

  z-index:100;
}

.bottom-nav a{
  text-decoration:none;
  text-align:center;
  flex:1;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}


/* =========================
   ICON
========================= */

.nav-item svg{
  width:25px;
  height:25px;

  stroke:#9CA3AF;
  fill:none;

  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;

  transition:all .2s ease;
}



/* =========================
   ACTIVE STATE
========================= */

.nav-link.active svg{
  stroke:#EFB428;
  fill:#EFB428;
}

.nav-link.active .nav-label{
  color:#EFB428;
  font-weight:600;
}


/* =========================
   TAP EFFECT
========================= */

.nav-item:active{
  transform:scale(.9);
}


/* =========================
   LABEL
========================= */

.nav-label{
  font-size:11px;
  margin-top:3px;
  color:#9CA3AF;
}



/* inactive icons */

.nav-item svg{
  width:25px;
  height:25px;

  stroke:#9CA3AF;
  fill:none;

  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;

  transition:all .2s ease;
}


/* active icon */

.nav-link.active svg{
  stroke:#EFB428;
  fill:#EFB428;
}

.nav-link.active .nav-label{
  color:#EFB428;
  font-weight:600;
}