.navbar.main {
  position: relative;
  top: 0;
  right: 0;
  left: 0;
  padding: 0 4px;

  height: 56px;
  line-height: 56px;

  background-color: #fff;

  -webkit-box-sizig: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  z-index: 5;

  -webkit-box-shadow: 5px 1px 5px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 5px 1px 5px 0px rgba(0,0,0,0.5);
  box-shadow: 5px 1px 5px 0px rgba(0,0,0,0.5);
}
.navbar.main-bar::after {
  content: "";
  display: table;
  clear: both;
}

.navbar.main-bar * {
  display: inline-block;
}

.navbar.main-bar div.welcome p {margin-bottom: 0; padding-bottom: 0}

.navbar.main-bar a {
  text-decoration: none
}

.navbar.main-bar .icon {
  cursor: pointer;
  text-align: right;
  margin-right: 2%;
  margin-top: 44px;
  width: 15%;
}

.sidebar {
  padding: 0;
  position: fixed;
  top: 56px;
  bottom: 0;
  width: 300px;
  background-color: #fafafa;
}

#sidebar-main {
  top: 56px;
}

.sidebar.right {
  right: -300px;
  text-align: right;
}

.sidebar.left {
  left: -300px;
}

.sidebar a {
  text-decoration: none;
  display: block;
}

.sidebar .wrapper-bar {
  position: relative;
  height: 100%;
  width: 100%;
  padding: 1em;
  padding-top: 0.5em;
  overflow-y: auto;
  -webkit-box-sizig: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.sidebar nav {
  margin-bottom: 24px;
  width: auto;
  margin: initial;
}

.sidebar nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0px;
}

.sidebar nav ul li {
  padding: 12px 0;
  margin: 0;
}

.sidebar nav ul li.title {
  font-weight: bold;
}

.float-right {
  float: right;
}
.float-left {
  float: left;
}
 
.quitter{
  font-weight: bold;
  font-size:32px;
  color: #000;
}

.navbar{
  border-bottom: solid 1px black;
  margin-bottom: 75px;
  height: 110px;
  background-color: #0A3074;
  }
  

.navbar.main-bar div.cnt-avatar{
    display: inline-block;
    padding: 1px;
    border-radius: 50%;
    border: solid 1px black;
    width: auto;
    background: #fff;
}

.navbar.main-bar div.cnt-avatar.prod-4d{
    border-radius: 0;
    padding: 2px;
    border: none;
    margin-bottom: 3px;
}

.navbar.main-bar div.cnt-avatar.prod-4d img {border: solid 5px #ED5700;}
    
.navbar.main-bar img.usr-avatar {
  width: 120px;
  border-radius: 50%;
  margin:1px;
}

img.usr-avatar-small {
  max-width: 50px; 
  display:inline-block; 
  float:left;
  border-radius: 50%;
  border:solid 1px #000;
  padding: 5px;
  margin-right: 8px;
}

img.usr-avatar-src{
  display:inline; 
  float:none; 
  width:auto; 
  vertical-align: top; 
  border-radius: 50%;
}

.navbar.main-bar div.welcome {
  text-align: center;
  width: 47%;
  float:left;
  
  }

div.my-macro {width: 25%;}
  
.navbar.main-bar img.logo-my-macro {margin: 5px; max-width:300px}  
.navbar.main-bar img.burger { margin-top: 10px;}
  

@media only screen and (max-width: 600px) {
  div.my-macro { 
    width: 29%;
    }
    
  .navbar.main-bar img.logo-my-macro {max-width:100px}  
    
  .navbar.main-bar .icon {
    cursor: pointer;
      margin-top: 5px;
  }
}
 
@media only screen and (min-width:600px) and (max-width: 1024px) {
  .navbar.main-bar img.logo-my-macro {max-width:190px}  
}