.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}