:root{
  font-size: 16px;
  --bg-background:rgb(3, 100, 145);
  font-family: sans-serif;
    --bg-secondary: #17a2b8 ;
      --transition-speed: 500ms;
}


main {
  margin-left: 5rem;
  padding: 0rem;
}

body {
margin:0;
  }

.navbar{
  width: 5rem;
  position: fixed;
  z-index:1;
  background-color:rgb(3, 100, 145);
  transition: width 500ms ease;

}

.navbar li,ul{
  list-style: none;
}

.navbar-nav{
  padding:0;
  margin:0;
  display:flex;
  flex-direction: column;
  align-items: center;
  height:100%;
}

.nav-item{
  width: 100%;
}

.link-text{
  display:none;
  margin-left:1rem;
}


a{
  text-decoration:none;
  color: #17a2b8 ;
}



.nav-link svg{
  margin: 0 1.7rem;
  width: 1rem;
  min-width: 1.3rem;
}


.nav-link{
  filter:grayscale(100%) opacity(0.8);
  display:flex;
  align-items:center;
  height:5rem;
  color:white;
  text-decoration:none;
  padding:10px;
  transition:  var(--transition-speed);
}

.nav-link:hover{
  filter:grayscale(0%) opacity(1);
  background-color:whitesmoke;
}


@media only screen and (max-width: 1000px){
  .navbar{
    width: 100vw;
    height:5rem;
    position: fixed;
    bottom: 0;
  }
  .navbar-nav{
    flex-direction: row;
    overflow-x: auto;
    overflow-y:hidden;
  }


  .nav-link{
    justify-content:center;
    flex-direction:column;
    flex: 1
  }




  .nav-link small{
display:block;
text-align: center;
}



.nav-link svg{
height:auto;
}


.nav-item:nth-child(n+4){
  display:none;
}

    .nav-item:last-child{
      display:block !important;
      margin-top: 0;
    }

    .nav-item:last-child{
      margin-top: auto;
      transition: var(--transition-speed);
    }

  main{
    margin-left: 0;
  }
  main{
    margin-bottom: 5rem;
  }


    .custom-dashboard{
    height:auto;
    border-radius: 10% 0 0 0;
    width:40vw;
    background-color:#17a2b8;

    display:none;
    position:absolute;
    margin-left:0rem;
    margin-bottom: 5rem;
    animation: margin-anim  300ms linear;
    align-items: flex-start;
    bottom:0rem;
    right:0rem;
    opacity:0;
    }

    .custom-dashboard.display{
      display:flex;
      opacity:1;
    }

    .dashboard-item{
      display:flex;
      flex-direction:column;
      width:inherit;
      align-content: flex-start;

    }
    .d-item{
      display:flex;
      padding:10%;
      width:auto;
      height:auto;
      flex-direction: row;
      align-content:center;
      justify-content:flex-start;
      align-items: center;

    }
    .d-item svg{
      height:25px;
    }
    .d-item small{
      color:white;
    }
    .dashboard-item.d-item:hover{
      border-radius:10% 0 0 0;
    }
    .d-item:hover{
      opacity:0.8;
      background-color:rgb(3, 100, 145);
    }

}

@media only screen and (min-width: 1000px){
  .navbar{
    width: 5rem;
    height:100vh;
    position: fixed;
    background-color:rgb(3, 100, 145);
    transition: width 500ms ease;
  }





  body{margin-top:0;}
  .nav-link{
    flex-direction:column;
  }
  .nav-item:nth-last-child(1){
    margin-top: auto;
    transition: var(--transition-speed);
  }

#navMore{
  display:none;
}


}


@keyframes margin-anim{
  from {margin-left:5rem;
    opacity:0%;
  }
  to {margin-left:16rem;
    opacity:100%;
  }
}


@keyframes margin-anim-rev{
  from {margin-left:16rem;
    opacity:100%;
    width:50%;
  }
  to {margin-left:5rem;
    opacity:0%;
    width:0;
  }
}