#mpchat-usersonline
{
    position:absolute;
    z-index:200;
    top:172px;
    left:10px;  
    background-color:#EAEAEA;
    border:1px solid #ccc;  
    width:250px;  
     border-radius:4px;
    -webkit-border-radius:4px;
    bottom:15px;
    min-height:424px;
   
}
#mpchat-usersonline-filter 
{
    margin-right:0;
}
#mpchat-usersonline-head
{
    font-weight:bold;
    margin:0;
    padding:7px;  
    margin-bottom:0;
     border-radius:4px 4px 0 0;
    -webkit-border-radius:4px 4px 0 0;
    border:none;   
}
#mpchat-usersonline-toolbar .ui-helper-hidden-accessible 
{
    display:none;
}
#mpchat-usersonline-toolbar 
{
    width:100%;
    display:table;  
}
#mpchat-usersonline-filter-search-input 
{
    position:absolute;
    right:2px;
    top:4px;
    padding-left:6px;
}
#mpchat-usersonline-toolbar > div 
{
    display:table-row;    
}


#mpchat-usersonline-toolbar > div label 
{
    display:table-cell;
    border-radius:0;
    -webkit-border-radius:0;
    padding:.4em 0;
}
#mpchat-usersonline-head .ui-icon 
{
    display:inline-block;
    vertical-align:middle;
    margin-top:-4px;
}

#mpchat-usersonline-container
{
    background:#f4f4f4;
    position:absolute;
    top:60px;
    right:0;
    left:0;
    bottom:0;
    overflow:auto;
    
}
#mpchat-usersonline-head-close 
{
    display:none;
}


.mpchat-userlist-user-onoff.on 
{
    background:#49b14b;    
}
.mpchat-userlist-user-onoff.off 
{
    background:#b2b2b2;    
}
#mpchat-usersonline-container ul
{
    list-style-type:none;   
    width:100%;
}
#mpchat-usersonline-container ul li 
{
    position:relative;
}
#mpchat-usersonline-container ul li:nth-child(even)
{
    background:#ebebeb;
}

#mpchat-usersonline-container ul li > a
{    
   height:42px;
   
   display:block;
}
#mpchat-usersonline-container .open 
{
    background:#fff;
    z-index: 999 !important;
    position:relative;
}
#mpchat-usersonline-container .open:hover 
{
    background-color:#fff;
}

.mpchat-userlist-user-name
{
    line-height:42px;
    margin-left:5px;
    overflow: hidden;
    white-space: nowrap;
    width: 170px;
    text-overflow: ellipsis;
    left:50px;
}
.mpchat-userlist-user-onoff 
{
    top: 50%;
    margin-top: -0.5em;  
    position:absolute;    
    right:12px;
    border:none;
    width:10px;
    height:10px;
    border-radius:20px;
    -webkit-border-radius:20px;
}
#mpchat-usersonline-container ul li:hover
{
    background-color:#d8d8d8;
    
}

.mpchat-usersonline-container-newmessage .mpchat-userlist-user-name
{
    font-weight:bold;
}

.mpchat-userlist-user-name
{
    display:inline-block;
    width:150px;
    vertical-align:baseline;
}

.mpchat-userlist-user-image
{
    margin:2px;
    width:36px;
    border:1px solid #ccc;
    float:left;
}

#mpchat-window
{
    position:fixed;
    width:300px;
    border:1px solid #ccc;    
    background-color:#fff;
    padding:5px;
    right:20px;
    bottom:0;    
    max-height:416px;
    z-index:201;  
    box-shadow:0 0 10px #666;  
    transition:bottom .2s ease-out;
    -webkit-transition:bottom .2s ease-out;
    -moz-transition:bottom .2s ease-out;
    -ms-transition:bottom .2s ease-out;
}
#mpchat-window-head 
{
    margin:-5px;
    margin-bottom:10px;
    padding:5px;
    height:25px;
    line-height:25px;
    border-width:0 0 1px 0;
    cursor:move;
}
#mpchat-window-head-title .ui-icon 
{
    float:left;
    margin-top:3px;
    margin-right:4px;
}

#mpchat-window-head-close 
{
   display:inline-block;
   float:right;
}

#mpchat-window-container
{
}
#mpchat-window.hide 
{    
    bottom:-362px;
    transition:bottom .2s ease-out;
    -webkit-transition:bottom .2s ease-out;
    -moz-transition:bottom .2s ease-out;
    -ms-transition:bottom .2s ease-out;
}
#mpchat-window.hide #mpchat-window-container 
{
    visibility:hidden;
}    

#mpchat-window-messages
{
    height:250px;
    overflow-y:scroll;
}
#mpchat-window-input 
{
    margin-top:10px;
}
#mpchat-window-input-text
{
    width:293px;
    height:50px;
    resize:none;
}

#mpchat-window-head-title
{
    font-weight:bold;
    white-space:nowrap;
    text-overflow: ellipsis;
    overflow:hidden;
    width:190px;
    display:inline-block;
   
}

#mpchat-window-head-image
{
    width:36px;   
    display:none; 
}
.mpchat-window-input-button 
{
    float:right;
    margin-top:5px;
    width:70px;
}
.mpchat-window-history 
{
    line-height:33px;
    
    display:inline-block;
    margin-bottom:-15px;
}
#mpchat-window-head-minimize 
{
    float:right;
    margin-right:5px;
}
.mpchat-window-message-body
{
    padding:3px;
    overflow-x:hidden;
    word-wrap:break-word;
    white-space: pre-wrap;
}

.mpchat-window-message-received .mpchat-window-message-baloon, .mpchat-window-message-sent .mpchat-window-message-baloon
{
    border-radius:5px;
    -webkit-border-radius:5px;
    position:relative;
    width:230px;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
}


.mpchat-window-message-received .mpchat-window-message-baloon:after, .mpchat-window-message-received .mpchat-window-message-baloon:before {
	right: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	
}

.mpchat-window-message-received .mpchat-window-message-baloon:after 
{    	
	border-right-color: #FFDDDD;
	border-width: 5px;
	top: 15px;
	margin-top: -5px;
}
.mpchat-window-message-received .mpchat-window-message-baloon:before {	
	border-right-color: #E6ABAB;
	border-width: 6px;
	top: 15px;
	margin-top: -6px;
}

.mpchat-window-message-sent .mpchat-window-message-baloon
{
    border:1px solid #9DD59D;
    color:#464;
    background-color:#DDFFDD;
    
    float:left;
    margin:3px;
}

.mpchat-window-message-sent .mpchat-window-message-baloon:after, .mpchat-window-message-sent .mpchat-window-message-baloon:before {
	left: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.mpchat-window-message-sent .mpchat-window-message-baloon:after 
{    	
	border-left-color: #DDFFDD;
	border-width: 5px;
	top: 15px;
	margin-top: -5px;
}
.mpchat-window-message-sent .mpchat-window-message-baloon:before {	
	border-left-color: #9DD59D;
	border-width: 6px;
	top: 15px;
	margin-top: -6px;
}
.mpchat-window-message-received, .mpchat-window-message-sent 
{
    position:relative;
    display:block;
}
.mpchat-window-message-received img, .mpchat-window-message-sent img
{
    position:absolute;   
    width:25px;
    top:7px;
    border:solid 1px #ccc;
}
.mpchat-window-message-received img 
{
    left:5px;
}
.mpchat-window-message-sent img 
{
    right:5px;
}


.mpchat-window-message-received .mpchat-window-message-baloon
{
    border:1px solid #E6ABAB;
    color:#644;
    margin:3px;
    float:right;
    background-color:#FFDDDD;
    
}

.mpchat-window-message-date
{
    font-size:0.7em;
    float:right;
    margin-bottom: 3px;
    margin-right: 3px;
}
.highlight 
{
    background:#F07272; 
    -moz-transition: background .2s ease-in;    
    -webkit-transition: background .2s ease-in;    
    -o-transition: background .2s ease-in;    
    transition: background .2s ease-in;
}


.highlight .icon-message
{    
    -webkit-animation: shake 1s 3; /* Safari 4+ */
    -moz-animation:    shake 1s 3; /* Fx 5+ */
    -o-animation:      shake 1s 3; /* Opera 12+ */
    animation:         shake 1s 3; /* IE 10+ */
    
}


@-webkit-keyframes shake 
{    
    0%,100% { -webkit-transform:scale(1) } 
    10%,30%,50%,70%,90%{-webkit-transform:scale(1.4); }
    20%,40%,60%,80%{-webkit-transform:scale(1);}     
}
@keyframes shake 
{
    0% {-webkit-transform:scale(1.4);} 
    0%,100% {-webkit-transform:translateX(0); } 
    10%,30%,50%,70%,90%{ -webkit-transform:translateX(-1px); }
    20%,40%,60%,80%{-webkit-transform:translateX(1px);} 
    100% {-webkit-transform:scale(1);}
}
.menu-item 
{
    position:relative;
}
#mpchat-dropdown-messages 
{
    position:absolute;
    top:50px;
    left:-108px;
    background:#fff;
    border:solid 1px #F07272;
    width:250px;
    box-shadow: 2px 2px 5px #999;
    border-radius: 4px;
    -webkit-border-radius: 4px;
}

#mpchat-dropdown-messages:after, #mpchat-dropdown-messages:before {
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
#mpchat-dropdown-messages:after 
{    	
	border-bottom-color: #F07272;
	border-width: 10px;
	top: -21px;
	margin-left: -5px;
}


#mpchat-dropdown-messages h3 
{
    color:#000;
    font-size:1em;
    padding:6px;
    border-bottom:solid 1px #ccc;
    font-weight:normal;
    background-color: #F07272;
    color:#fff;
}
#mpchat-dropdown-messages .mpchat-dropdown-messages-avatar 
{
    width: 32px;
    float: left;
    border: solid 1px #ccc;
    margin-left: 5px;
    margin-bottom:5px;
}
#mpchat-dropdown-messages span 
{
    padding-left:0;
}
#mpchat-dropdown-messages li 
{
    list-style:none;
    position:relative;
    padding-top:5px;
    padding-bottom:5px;
    height:35px;
    overflow:hidden;
    
    
}
.menu-item.menu-message.highlight 
{
    border:solid 1px #F07272;
}
.menu-item.menu-message.highlight:hover 
{    
    background: #F07272 !important;   
}
#mpchat-dropdown-messages .mpchat-dropdown-messages-name 
{
    font-size:1em;
    color:#999;
    padding-left:5px;
    display:block;
    width:120px;
    white-space:nowrap;
    text-overflow: ellipsis;
    overflow:hidden;
}
#mpchat-dropdown-messages  .badge 
{
    border:solid 1px #fff;
    border-radius:10px;      
    padding:2px;      
}
#mpchat-dropdown-messages .mpchat-dropdown-messages-name,
#mpchat-dropdown-messages .mpchat-dropdown-messages-message 
{
    margin-left:40px;
} 
#mpchat-dropdown-messages .mpchat-dropdown-messages-message 
{
    padding-left:5px;
    display:block;
    font-size:.8em;
}
#mpchat-dropdown-messages .mpchat-dropdown-messages-data 
{
    position:absolute;    
    top: 8px;
    right: 10px;
    font-size:.7em;
}