.msngrIcons {
  display: block;
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 70px;
  background-color: #fff;
  border: 1px solid #3598db;
  border-top-width: 6px;
  cursor: pointer;
}
.msngrIcons.noNewMes {
  height: auto;
}
.msngrIcons.noNewMes #msngrIconsMess { display: none; }
.msngrIcons.noNewMes #msngrIconsFrie { margin: 10px 0; }
#msngrIconsMess { margin-top: 10px; }
#msngrIconsMess, #msngrIconsFrie {
  width: 60px;
  height: 25px;
}

#msngrMessNum, #msngrFrieNum {
  display: inline-block;
  float: left;
  width: 25px;
  height: 25px;
  font-size: 13px;
  line-height: 25px;
  text-align: right;
  font-weight: 700;
  color: #3598db;
}
#msngrMessIcon, #msngrFrieIcon {
  display: inline-block;
  float: left;
  width: 30px;
  height: 25px;
  background-size: 13px;
  background-repeat: no-repeat;
  background-position: 5px center;
}
#msngrMessIcon { background-image: url('../img/messages.svg'); }
#msngrFrieIcon { background-image: url('../img/users.svg'); }

.msngrContainer {  
  position: fixed;
  display: block;
  bottom: 20px;
  right: 20px;
  width: 248px;
  height: 398px;
  background-color: #fff;
  border: 1px solid #3598db;
  overflow: hidden;
}
/*header*/
.msngrHeader {
	width: 100%;
	height: 36px;
	display: block;
	background-color: #3598db;
}
.backToClist.onchat {
  display: inline-block;
  float: left;
  height: 36px;
  width: 36px;
  background-image: url('/img/svg/arrow_left_white.svg');
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  opacity: .7;
}
.backToClist.onchat:hover { opacity: 1; }
.msngrHeaderText {
  display: inline-block;
  float: left;
  height: 36px;
  line-height: 36px;
  padding-left: 10px;
  font-size: 13px;
  width: auto;
  max-width: 150px;
  word-break: break-all;
  color: #fff;
}
.msngrHeadHover {
  position: absolute;
  color: transparent;
  left: 36px;
  background-color: #3598db;
  font-size: 13px;
  height: 36px;
  width: 0;
  line-height: 32px;
  box-sizing: border-box;

  -webkit-transition-property: width, color;
  -moz-transition-property: width, color;
  -o-transition-property: width, color;
  transition-property: width, color;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
}
.msngrHeadHover.ac {
  padding-left: 10px;
  width: 160px;
  color: #fff;
}

.msngrControls {
  display: inline-block;
  float: right;
  width: 40px;
  height: 20px;
  margin-top: 8px;
  margin-right: 6px;
}
.msngrOpen {  background: url('../img/expand.svg'); }
.msngrClose { background: url('../img/plus_rotated.svg'); }
.msngrControls a {
  display: inline-block;
  float: left;
  width: 20px;
  height: 20px;
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  opacity: .7;
}
.msngrControls a:hover {
  opacity: 1;
}
/* CONTENT */
.msngrContent {
  position: absolute;
  width: 498px;
  height: 363px;
}

/* SEARCH */
.msngrSearch {
  width: 249px;
  height: 364px;
  display: inline-block;
  float: left;
//  background-color: rgba(50,2000,60,.5);
}
.msngrSearchInner {
  width: 249px;
  height: 322px;
  overflow-x: hidden;
  overflow-y: auto;
}
.msngrSearchInner::-webkit-scrollbar { width: 5px; }
.msngrSearchInner::-webkit-scrollbar-thumb { background-color: #8bd0ff; }
.msngrSearchList {
  width: 100%;
  height: auto;
}
/*SEARCH ITEM*/
.msgnListChat {
  height: 48px;
  width: 249px;
  display: block;
  padding: 8px;
  box-sizing: border-box;
  cursor: pointer;
}
.msgnListChatAva {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-right: 8px;
  float: left;
  background: url('http://lorempixel.com/400/200/people');
  background-size: cover;
  background-position: center;
}
.msgnListChatName {
  display: inline-block;
  float: left;
  color: #3b3b3b;
  font-size: 14px;
  font-weight: 600;
  line-height: 15px;
  height: 16px;
  width: 193px;
  word-break: break-all;
}
.msgnListChatName:after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  float: right;
  margin-right: 5px;
  margin-top: 4px;
}
.msgnListChat.onlineU .msgnListChatName:after { background-color: #3598db; }
.msgnListChat.offlineU .msgnListChatName:after { background-color: #eee; }
.msgnListChatMessage {
  display: inline-block;
  float: left;
  width: 193px;
  color: #ababab;
  font-size: 13px;
  height: 16px;
  overflow: hidden;
  word-break: break-all;
}

/* МУЛЬТИЧАТ В СПИСКЕ ЧАТОВ */
.msgnListMultyChatAva {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-right: 8px;
  float: left;
  background: #b2e0ff;
}
.multyAva {
  display: inline-block;
  float: left;
  width: 16px;
  height: 16px;
  background-size: cover;
  background-position: center;
}
.ava1 {background-image: url('http://lorempixel.com/400/200/people/1');}
.ava2 {background-image: url('http://lorempixel.com/400/200/people/2');}
.ava3 {background-image: url('http://lorempixel.com/400/200/people/3');}
.ava4 {background-image: url('http://lorempixel.com/400/200/people/4');}
.ava5 {background-image: url('http://lorempixel.com/400/200/people/5');}
.ava6 {background-image: url('http://lorempixel.com/400/200/people/6');}
.ava7 {background-image: url('http://lorempixel.com/400/200/people/7');}
.ava8 {background-image: url('http://lorempixel.com/400/200/people/8');}
.ava9 {background-image: url('http://lorempixel.com/400/200/people/9');}

.msngrSearchfield {
  width: 249px;
  height: 39px;
  position: absolute;
  bottom: 0;
  border-top: 1px solid #3598db;
}
.msngrSearchfield input {
  -webkit-appearance: none;
  outline: none;
  border: none;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-left: 30px;
  padding-right: 20px;
  background-image: url('../img/searchIcon.svg');
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: 5px center;
}
/* DIALOG */
.msngrHeaderText.msngrHeaderInChat:before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  float: right;
  margin-left: 5px;
  margin-top: 15px;
  background-color: rgba(202, 202, 202, 0.39);
}
.msngrHeaderText.msngrHeaderInChat.onlineUChat:before {background-color: rgb(51, 245, 75);}

.msngrDialog {
  display: inline-block;
  float: left;
  width: 249px;
  height: 364px;
//  background-color: rgba(30,50,200,.5);
}
.msngrDialog #multyMembersList { display:none; }
.msngrDialogInner {
  width: 249px;
  height: 322px;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #edf0f2;
}
.msngrDialogInner::-webkit-scrollbar { width: 5px; }
.msngrDialogInner::-webkit-scrollbar-thumb { background-color: #8bd0ff; }
.msngrDialogList {
  width: 100%;
  height: auto;
}

.msngrMessage {
  width: 100%;
  min-height: 38px;
  height: auto;
  box-sizing: border-box;
  padding: 8px 8px 8px 14px;
  background-color: transparent;
  -webkit-transition: background-color 0.4s;
  -moz-transition: background-color 0.4s;
  -o-transition: background-color 0.4s;
  transition: background-color 0.4s;
}
.newMessage { 
  background-color: #b2e0ff;
}
.msngrIncoming .msngrMessageText:before {
  content: '';
  background-image: url('/img/bubleLeft.png');
  position: absolute;
  display: block;
  left: -6px;
  top: 6px;
  width: 6px;
  height: 7px;
}
.msngrOutcoming .msngrMessageText:before {
  content: '';
  background-image: url('/img/bubleRight.png');
  position: absolute;
  display: block;
  right: -4px;
  top: 6px;
  width: 6px;
  height: 7px;
}
.msngrMessageText {
  position: relative;
  width: 192px;
  min-height: 22px;
  display: inline-block;
  border: 1px solid #edf0f2;
  border-radius: 3px;
  background-color: #fff;
  box-sizing: border-box;
  padding: 5px 10px;
  font-size: 13px;
  line-height: 16px;
}
.msngrMessageAva {
  display: inline-block;
  width: 22px;
  height: 22px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.msngrIncoming .msngrMessageAva { 
  background-image: url('http://lorempixel.com/400/200/people/6');
  float: left;
  margin-right: 7px;
}
.msngrOutcoming .msngrMessageAva {
  background-image: url('http://lorempixel.com/400/200/people/8');
  float: right;
  margin-left: 7px;
}
._multi { position: relative; }
.msngrDialog._multi #multyMembersList {
  position: absolute;
  display: block;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 20;
  width: 100%;
  height: 50px;
  padding: 1px 0 1px 3px;
  background-color: #b2e0ff;

  -webkit-transition: height 0.4s;
  -moz-transition: height 0.4s;
  -o-transition: height 0.4s;
  transition: height 0.4s;
  transition-delay: 0.2s;
}
.msngrDialog._multi #multyMembersList._opened { 
  height: 324px;
  overflow-x: hidden;
}
.msgnrMembersContainer {
  display: block;
  width: auto;
  height: 304px;
  overflow-y: auto;
  overflow-x: hidden;
}
.msgnrMembersContainer::-webkit-scrollbar { 
  width: 3px; 
  position: absolute;
}
.msgnrMembersContainer::-webkit-scrollbar-thumb { background-color: #8bd0ff; }
.msngrDialog._multi #multyMembersList .multyMembersListToggle {
  position: absolute;
  display: block;
  width: 30px;
  height: 30px;
  bottom: 10px;
  right: 15px;
  background: #3598db;
  cursor: pointer;
  background-size: 10px;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;

  -webkit-transition-property: background-color, width, height, bottom, right;
  -moz-transition-property: background-color, width, height, bottom, right;
  -o-transition-property: background-color, width, height, bottom, right;
  transition-property: background-color, width, height, bottom, right;

  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;

}
.msngrDialog._multi #multyMembersList .multyMembersListToggle:before {
  content: "";
  position: absolute;
  width:100%; height: 100%;
  background-image: url('../img/angle-up.svg');
  background-size: 15px;
  background-position: center 2px;
  background-repeat: no-repeat;
  top: 0;
  opacity: 1;

-webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);

  -webkit-transition-property: transform, opacity, background-size;
  -moz-transition-property: transform, opacity, background-size;
  -o-transition-property: transform, opacity, background-size;
  transition-property: transform, opacity, background-size;

  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  transition-duration: 0.4s;
  transition-delay: 0.4s;
}
.msngrDialog._multi #multyMembersList .multyMembersListToggle:hover:before {
  opacity:.7;
  background-color: rgba(0,0,0,.2);
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
  transition-delay: 0s;
}
.msngrDialog._multi #multyMembersList._opened .multyMembersListToggle:before {
  top: 0;
  background-size: 10px;
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
} 
.msngrDialog._multi #multyMembersList._opened .multyMembersListToggle {
  position: absolute;
  width: 249px;
  height: 20px;
  right: 0;
  bottom: 0;
  display: block;
  background-color: #D34843;
  background-size: 10px;
  background-position: center;
  background-repeat: no-repeat;
}
.msgnMultiMemberAva {
  display: inline-block;
  float: left;
  width: 30px;
  height: 30px;
  margin: 9px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-transition: display 0.8s;
  -moz-transition: display 0.8s;
  -o-transition: display 0.8s;
  transition: display 0.8s;
}
.msgnMultiMemberAva:nth-child(1), 
.msgnMultiMemberAva:nth-child(2), 
.msgnMultiMemberAva:nth-child(3),
.msgnMultiMemberAva:nth-child(4) { display: inline-block; }
.msngrDialog._multi #multyMembersList._opened .msgnMultiMemberAva {
  display: inline-block;
}
.msgnMultiMemberMore {
  display: inline-block;
  float: left;
  width: 30px;
  height: 30px;
  margin: 9px;
  background: #3598db;
  cursor: pointer;
}
.msngrDialog._multi #multyMembersList._opened .msgnMultiMemberMore { display: none; }
.msngrDialog._multi .msngrDialogInner {
  height: 272px;
  margin-top: 50px;
}


.msngrDialogfield {
  width: 249px;
  height: 39px;
  position: absolute;
  bottom: 0;
  z-index: 400;
  border-top: 1px solid #3598db;
}
#tfield {
  -webkit-appearance: none;
  outline: none;
  border: none;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 60px;
  padding-top: 8px;
  overflow: hidden;
  word-break: break-all;
  word-wrap: normal;
  line-height: 35px;
  font-size: 13px;
}
.msngrFieldControls {
  position: absolute;
  width: 60px;
  height: 40px;
  bottom: 0;
  right: 0;
}
.msngrFieldControls a {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-top: 5px;
  background-size: 15px;
  background-repeat: no-repeat;
  background-position: 5px center;
  float: left;
}
.msngrSmileBtn { 
  background-image: url('/img/svg/smile_gray.svg');
  cursor: pointer;
}
.msngrCamBtn { 
  background-image: url('/img/svg/picture_gray.svg');
  cursor: pointer;
}
.msngrSmileBtn:hover { background-image: url('/img/svg/smile_d_gray.svg'); }
.msngrSmileBtn.act { background-image: url('/img/svg/smile_blue.svg'); }
.msngrCamBtn:hover { background-image: url('/img/svg/picture_d_gray.svg'); }

/*background-image: url('../img/searchIcon.svg');*/

.msngrSmilesList {
  position: absolute;
  top: 400px;
  right: 0;
  width: 249px;
  box-sizing: border-box;
  bottom: 0px;
  padding: 7px;
  background-color: #fff;
  z-index: 30;
  transition-property: top, bottom;
  transition-duration: 0.3s;
}
.msngrSmilesList._activated {
  top: 165px;
  bottom: 0;
}
@media (max-width: 640px) {
  .msngrIcons {display: none;}
  .msngrContainer {display: none;}
}
.msngrToolTip {
  position: fixed;
  display: block;
  width: auto;
  height: auto;
  background-color: rgba(0,0,0,.7);
  color: #fff;
  padding: 5px 10px;
  box-sizing: border-box;
  z-index: 4000;
  overflow: hidden;
  font-size: 13px;
}