body{
  background-color: #fff; 
  font-family:'Roboto';
}
ul{
  margin:0;
  padding:0;
}
li{
  list-style-type:none;
}
#content{
  position:relative;
  width: calc(100% - 50px);
  height:100%;
  float:right;
}
.main-sidebar-wrapper i{
    color:#fff;
}
.purple-bg{
  background-color:#9933FF;
}
.orange-bg{
  background-color:orange;
}
.green-bg{
  background-color:#33cc33;
}

.skyblue-bg {
  background-color:#33ccff;
}
.magenta-bg {
  background-color:#cc00cc;
}
.darkgray-bg {
  background-color:#708784;
}
.teal-bg{
  background-color:#009ee8;
}

#green-bg:active, #skyblue-bg:active, #magenta-bg:active, #orange-bg:active, #purple-bg:active, #darkgray-bg:active, #teal-bg:active{
  filter: brightness(85%);
}

#chat, #shopmap, #list, #wcrm, #escalation {
  position:absolute;
  z-index:1;
  width:100%;
  height: 100%; 
}

#subscript{
  color:white;
  background-color: red;
  position: absolute;
  border-radius:50%;
  width: 1.5em;
  margin-left: -0.6em;
  margin-top: 1.2em;
  font-size: 12px;
  text-shadow: 0px 0px 3px black;
  visibility:hidden;
}

.main-sidebar-wrapper{
  position:fixed;
  height:100%;
  width:50px;
  background-color: #666; 
  text-align:center;
  padding:3px;
  z-index:1000;
}
.logo{
  color:#fff;
  margin-bottom:20px;
} 

.dropdown-divider{
  border-top: 1px solid #515151;
}
.main-sidebar-wrapper li:not([class]){
  width:40px;
  height:40px;
  margin-top:5px;
}
.main-sidebar-wrapper a{
  display:block;
  height:40px;
  color:#fff;
  padding: 7px;
  padding-left:12px;
  margin-left: -2px;
  z-index:1;
}
 
.main-sidebar-link-content{
  position:absolute;
  left:-195px;
  width:190px;
  height:40px;
  margin-top:-7px;
  margin-left:10px;
  padding:5px;
  transition: left ease-in-out 0.5s;
/*   z-index:10; */
  z-index:-1;
}

.main-sidebar-wrapper a:hover >.main-sidebar-link-content{
  left:-10px;
  transition: left ease-in-out 0.5s;
}
#lastElement{
  position:absolute;
  bottom:0em;
}