.topbar {
/*  display: flex;*/
  margin: 0px 0px 0px 0px;    
  font-family: "Lato", sans-serif;      
  width: 100%;    
  padding-left: 10px;
  padding-right: 10px;
/*  position: fixed;      
  top: 0;  */
  background: #333333;  
}

.bottombar {
/*    display: flex;*/
/*    margin: 0px;    */
    font-family: "Lato", sans-serif;      
    width: 100%;  
    padding-left: 10px;        
    padding-right: 10px;    
    position: fixed;    
    bottom: 0;      
    background: #333333;    
  }

/*
.leftside {
  display: flex;
}
*/

.leftside div {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  font-size: 0.9rem;
  width: 120px;
  padding: 10px;  
}

.rightside {
/*  display: flex;*/
  margin-left: auto; 
  margin-right: 0;  
}
  
.rightside div {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  font-size: 0.9rem;
  width: 120px;
  padding: 10px;  
}

.navlink {
  list-style: none;
  color: #dbdbdb;
  text-align: center;    
  text-transform: uppercase;
}

.activenavlink {
  background: #454545;
  border-radius: 3px;
}

i {
  margin-right: 7px;
}

.activenavlink a {
  background: #454545;
  border-radius: 3px;
}

.navlink a {
  /*color: #8a8a8a;*/
  color: #dbdbdb;  
  text-decoration: none;
  transition: color 0.2s;
}

.navlink:hover {
  background: #454545;
  border-radius: 3px;    
}

.navlink a:hover {
  color: #b2ff00;    
}

.brand {
    list-style: none;
    color: #dbdbdb;
    text-align: center;    
    text-transform: lowercase;
}