:root {
  --blue: #005bbf;
  --lightblue: #e5eef9;
  --lightestgray: #f7f7f8;
  --text: #001726;
  --softgray: #d9dcde;
  --mediumgray: #b2b9bd;
  --gray: #66737C;
  --green: #2acf88;  
}

body {
  font-family: Roboto, sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: var(--text);
  margin: 0;
}

.navbar {
  border: none;
  background: white 0% 0% no-repeat padding-box;;
  color: var(--blue);
  margin-bottom: 0;
  font-size: 11px;
  min-height: 90px;
  box-shadow: 2px 0px 6px #00000024;
  font: normal normal normal 14px/20px Roboto;
  letter-spacing: 0px;
}





.navbar figcaption {
  text-align: left;
  font: normal normal 700 14px/20px Roboto;
  letter-spacing: 0px;
  color: var(--blue);
  opacity: 1;
}

.nav-link img {
  filter: brightness(0) saturate(100%) invert(27%) sepia(57%) saturate(2765%) hue-rotate(198deg) brightness(84%) 	contrast(104%);
  height: 26px;
}

.navbar-nav .nav-link{
  background: transparent 0% 0% no-repeat padding-box;
  border-radius: 7px 7px 0px 0px;
  opacity: 1;
  width: 130px;
  height: 85px;
  color: var(--text)
}

.navbar-nav a img{
  font: normal normal 700 14px/20px Roboto;
  color: white;
}

.navbar-nav a.nav-link.active{
  background: var(--blue) 0% 0% no-repeat padding-box;
  border-radius: 7px 7px 0px 0px;
  opacity: 1;
  color: white !important;
}

.navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus{
  background: var(--blue) 0% 0% no-repeat padding-box;
  border-radius: 7px 7px 0px 0px;
  opacity: 1;
  color: white !important;

}
.navbar-nav .nav-link:hover > img, .navbar-nav .nav-link:focus > img, .navbar-nav a.nav-link.active > img{
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
}

#user_widget a {
  font: normal normal 700 14px/20px Roboto;
  color: var(--text);
  border-radius: 7px;
  outline: 0;
}
#user_widget a:hover {
  background: var(--softgray) 0% 0% no-repeat padding-box;
  border-radius: 7px;
  opacity: 1;
  border: 1px solid var(--softgray);
  
}

#user_widget a.active {
  background: var(--gray) 0% 0% no-repeat padding-box;
  border-radius: 7px;
  opacity: 1;
  border: 1px solid var(--gray);
}

#user_widget a.active > img{
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
}  

#user_widget a:focus{
  outline: 0;
}

#user_widget .badge {
  margin-top: 5px;
  color: white;
  background: var(--blue);
}

#user .dropdown-menu {
  width: 250px;
}

#user .dropdown-menu img{
  width: 27px;
}

#user .dropdown-menu::before {
    border-bottom: 12px solid rgba(0, 0, 0, 0.2);
    border-left: 12px solid rgba(0, 0, 0, 0);
    border-right: 12px solid rgba(0, 0, 0, 0);
    content: "";
    display: inline-block;
    right: 5%; /* position */
    position: absolute;
    top: -11px;
}

#user .dropdown-menu::after {
    border-bottom: 11px solid #FFFFFF;
    border-left: 12px solid rgba(0, 0, 0, 0);
    border-right: 12px solid rgba(0, 0, 0, 0);
    content: "";
    display: inline-block;
    right: 5%; /* position */
    position: absolute;
    top: -10px;
}

#user a {
  color: var(--text);
  text-align: center;
  font: normal normal 700 18px/25px Roboto;
  letter-spacing: 1.8px;
  opacity: 1;
}

#user .username {
  color: var(--text);
  font: normal normal 700 16px/24px Roboto;
  letter-spacing: 0px;
  opacity: 1;
}

.btn-user:hover {
  background: var(--softgray) 0% 0% no-repeat padding-box;
  border-radius: 7px;
  opacity: 1;
  border: 1px solid var(--softgray);
}

.btn-user:focus {
  background: var(--gray) 0% 0% no-repeat padding-box;
  border-radius: 7px;
  opacity: 1;
  border: 1px solid var(--gray);
}