#messanger_container{
  display: none;
}
#message_icon{
  display: block;
}


.message-icon{
  border-radius: 30px;
  width: 60px;
  height: 60px;
  position:fixed;
  bottom:10px;
  right:10px;
  z-index: 9;
  cursor: pointer;
}
.message-icon-main{
  position: relative;
  top: 10px;
  left: 15px;
}
.message-icon-comment{
  top: 15px;
  left: 15px;
}
.messanger-container{
  height: 400px;
  width: 300px;
  position:fixed;
  bottom:10px;
  right:10px;
  z-index: 9;
  border: 1px solid #aaa;
  background-color: #fff;
}
.messanger-header{
  height: 50px;
  padding: 10px;
  font-size: 20px;
  color: #fff;
}
.messanger-title{
  width: 85%;
  float:left;
}
.messanger-header-controls{
  width: 15%;
  float: right;
}
.minimize-button{
  background-color: transparent;
  border: 0;
  width: 30px;
  height: 30px;
  position: relative;
  padding-left: 4px;
}
.minimize-button:hover{
  border-radius: 30px;
  background-color: #aaa;
}
.minimize-button i{
  position: absolute;
  top: 0px;
  left: 0px;
  margin-left:3px;
}
.messenger-body{
  height: 290px;
  overflow-y: scroll;
  padding: 5px;
}
.message-x{
  border-radius:20px;
  padding: 5px 15px;
}
.message-container-x{
  margin-top: 10px;
  width: 70%;
}
.messanger-footer{
  padding: 10px;
  border-top: 1px solid #aaa;
}
.attachment{
  background-color: transparent;
  border: 0;
  cursor: pointer;
}
.message-input{
  border: 1px solid transparent;
  padding: 5px;
  width: 240px;
  margin-left: 5px;
}
.message-input:focus{
  border: 1px solid transparent;

}

/*Scroll Bar */
#messanger_body::-webkit-scrollbar {
  width: 10px;
}

/* Track */
#messanger_body::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
#messanger_body::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
#messanger_body::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

/*Other Css*/
.email-info{
  font-size: 12px;
  color: #aaa;
}
.bg-reciever{
  background-color: #d1e5fb !important; 
}

.bg-sender{
  background-color: #fcedbf !important; 
}