#topnav{
  position:fixed;
  z-index:1040;
  width:100%;
  height:80px;
  height:5rem;
  box-shadow:0 0 15px rgba(0,0,0,.1);
  animation-name: topnavIn;
  animation-duration: .8s;
}
  
  @keyframes topnavIn {
  from {top:-300px;}
  to {top:0;}
  }
  
#sidebar_mobile{
  overflow-y:auto;
}
  
  #sidebar_mobile .dropdown-menu{
    float:none !important;
    position:relative !important;
    transform:none !important;
    padding:0 !important;
    margin:0 !important;
  }

  .navbar-text i{
    padding:0;
    margin:0;
    font-size:150%;
  }
  
  .navicons{
    padding:0;
  }
  
    .navicons i{cursor:pointer}
    
.sidebar-header{
  padding-top:4rem;
  height:16rem;
  display:block;
}
  
  .img-profile{
    cursor:pointer;
    margin:0 10px 0 30px;
    height:52px;
    width:52px;
    float:right;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    border:2px solid;
    background-position:center center;
  }
  .img-profile-mobile{
    position:absolute;
    cursor:pointer;
    margin:1rem;
    height:10rem;
    width:10rem;
    border:10px solid;
    background-position:center center;
  }
  
  .logo{
    width:90px;
    height:auto;
  }
  
.btns .dropdown-item{
  padding:0 1rem;
  margin:0;
  height:2rem;
  line-height:2rem;
}

.btns a i,
.btns button i{margin-right:.2rem}

.dropdown-connections .dropdown-menu{
  min-width:15rem;
}

#sidebar{
  position:fixed;
  z-index:1003;
  height:100%;
  top:0;
  padding-top:80px;
  width:120px;
  box-shadow:0 0 15px rgba(0,0,0,.3);
  animation-name: sbSlideIn;
  animation-duration: .4s;
}

  #sidebar.inactive{
    left:-120px;
    animation-name: sbSlideOut;
    animation-duration: .5s;
  }

  @keyframes sbSlideIn {
  from {left:-120px;padding-top:0;}
  to {left:0;padding-top:80px;}
  }
  
  @keyframes sbSlideOut {
  from {left:0;padding-top:80px;}
  to {left:-120px;padding-top:0;}
  }

  .taskbutton{
    cursor: pointer;
    width: 100%;
    display: flex;
    height: 120px;
    max-height: 16.66%;
    overflow: hidden;
    text-align: center;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
  .taskbutton i{
    display:block;
  }
  
    .taskbutton i{
      padding:5px 0;
      font-size:300%;
      text-shadow:0 0 5px rgba(0,0,0,.5);
      overflow-y: hidden;
    }
    
#sidenav{
  position:fixed;
  z-index:1002; 
  top:80px;
  left:-300px;
  width:300px;
  height:calc(100% - 80px);
  padding:0 20px;
  box-shadow:0 0 15px rgba(0,0,0,.1);
  animation-name: slideIn;
  animation-duration: .8s;
}
  #sidenav.inactive{
    left:-300px;
    animation-name: navSlideOut;
    animation-duration: .5s;
  }
  
  #sidenav.active{
    left:120px;
    animation-name: navSlideIn;
    animation-duration: .5s;
		overflow: auto;
  }
  
  #sidenav ul{display:none;line-height:1;}

  @keyframes navSlideIn {
  from {left:-300px;}
  to {left:120px;}
  }
  
  @keyframes navSlideOut {
  from {left:120px;}
  to {left:-300px;}
  }
  
  #sidenav h3{
    font-size:120%;
    margin-top:30px;
  }
  
  #sidenav ul li{
    padding:0;
  }  
  
  #sidenav ul li a{
    display:block;
    padding:10px 15px;
    color:#333;
    text-decoration:none;
  }
  
  #sidenav ul li i{
    padding-right:15px;
  }