.smiles {background: #f5f5f5; padding: 4px; border-radius: 4px; margin-top: 10px; text-align: center;} .smile {background: #fff; padding: 5px; border: 1px #dcdcdc solid;} .smile:hover {padding: 7px; border-radius: 4px;} .bb-panel {padding: 4px;} .bb {background: none; border: 0; padding: 4px;} .bb:hover {background: #f5f5f5; border-radius: 2px;} img.emoji {width: 20px; height: 20px;}
img.emoji {
            padding:3.1px;
            margin: 0px !important;
            display: inline !important;
        }
        img.emoji:hover{background:orange;}
        
        #WebChatTextID {
          	border-radius: .2rem;	
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            outline: none;
            /*overflow: hidden;*/
            /* нет скрол бара справа */
resize: none; /* справа-внизу нет метки для растяхения */
        }

.messages img{max-width: 100%;}
.messages {
  list-style-type: none;
  padding:0;
  margin:0;
  background:#fff;
}

.message {
  border-bottom: 1px solid rgba(207, 218, 225, 0.3);
}
  .message.unread{background:whitesmoke}
      
 .message .info,.message .text{
    display: table-cell;
    vertical-align:top;
/*
position:relative;
*/
  }
  .message .text{padding: 3px 5px;}      
  .message .info{
    white-space: nowrap;
	word-break: normal;
    border-right: 1px solid rgba(207, 218, 225, 0.3);
  }
    .message .info div{
      padding: 3px 5px;
      overflow:hidden;
      max-width: 200px;
      max-height: 60px;
    }
      .message .info div span{
        display: block; 
      }
  .message .text{
    width: 100%;
  }
   .message .text .time{
      float: right;
      color: #738ba3;
      font-size: 9px;
    }
      .message .text .time:after{
        content: attr(time);
      }
      .message .text .time:hover>.ip{
         visibility: visible;
         z-index: 1;
         opacity: 1;
      }
        .message .text .time .ip{
          cursor: default;
          text-align: center;
		  width: 102px;
          opacity: 0;
          visibility: hidden;
          padding: 2px 10px;
          font-size: 10px;
          background: #E1E1E1;
          position: absolute;
          right:0;bottom:0;
          
          transition: all .3s ease .15s;
        }
        

.chat-ui{
  z-index:2;
  background:white;
}    
      
.form-ui{
  padding: 0;
} 
@-webkit-keyframes pen{0%,49%{color:gray}100%,50%{color:green}}
@keyframes pen{0%,49%{color:gray}100%,50%{color:green}}
.pen-blink:before{-webkit-animation:pen 2s linear infinite;animation:pen 2s linear infinite}

.form-ui .split{
  width: 0px;
  height: 30px;
  border-left: 1px solid gray;
  display: inline-block;
  padding: 0px;
}
.form-ui .tdt{
  width: 100%;
  display: table-cell;
  padding: 3px 0px;
  vertical-align: middle;
}
    .form-ui .tdt #progressbars div{
      height: 2px;
      margin-top: 1px;
      background: orchid;
      width: 0%;
      transition : width 500ms ease;
    }
    .form-ui .tdt #progressbars div:first-child{
      margin-top: -2px;
    }
.form-ui textarea{
  border-radius:0;
  border: none;
  outline: none;
  width: 100%;
  padding: 4px 7px;
  height: 30px;
}
.form-ui .tdb{
  display:table-cell;
  min-width:40px;
}
.stickers-ui .nav-tab div, .form-ui button{
  outline: none;
  border: none;
  background: #FFFFFF no-repeat center;
  vertical-align: bottom;
  width: 40px;
  height: 40px;
}
button:before{font-size: 150%;color: gray;}

.stickers-ui{display:none;}
.stickers-ui.active{display: block;}
.stickers-ui .nav {background: whitesmoke;}
.stickers-ui .nav-tab{
  width:100%;
  display:table;
}
.stickers-ui .nav-tab div{
  display:table-cell;
  background: transparent;
  border-bottom: 1px solid rgb(201, 201, 201);
  text-align:center;
  height: 30px;
  font-size: 150%;color: gray;
}
.stickers-ui .nav-tab div:before{line-height:30px;}

.stickers-ui .nav div.active7:after{
  position: absolute;
  content: '';
  bottom: 0;left: 0;right: 0;
  border-bottom: 1px solid rgb(201, 201, 201);
}
.stickers-ui .panels{height: 65px;overflow: auto;}
.stickers-ui .panels .panel {
  display: none;
}
.stickers-ui .panels .panel.active7 {
  display: block;
}
      
.stickers-ui .settings label{
  position:relative;
  display:inline-block;
  height:50px;
  width:50px;
}
    .stickers-ui .settings input{
      display:none;
    }
    .stickers-ui .settings label input:checked ~ .icon{
      color:#767676;
    }
    .stickers-ui .settings label input:checked ~ .icon:after{
      content:'on';
      left:12px;
      top:23px;
      text-shadow: -1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;
      width:100%;
      font-size:10px;
      position:absolute;
    }
    .stickers-ui .settings label input:checked ~ .desc{
      color:#767676;
    }
    .stickers-ui .settings label .icon{
      position:absolute;
      width:100%;
      color:rgb(218, 218, 218);
      font-size:35px;
      text-align:center;
    }
    .stickers-ui .settings .desc{
      position:absolute;
      color:rgb(218, 218, 218);
      width:100%;
      bottom:0px;
      position:absolute;
      font-size:10px;
      text-align:center;
    }
      .row{margin:0}
      .col-md-12{padding:0}