#chat { position: fixed; z-index: 100; right: 1px; bottom: 10px; top: 35%; width: 262px; max-width: 240px; background-color: #FFF; box-shadow: 0 0 1px rgba(0,0,0,0.3); box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); }
#chat #chat-inner { min-width: 180px; }
#chat.closed { top: auto; bottom: 0; }
#chat.closed #userlist, #chat.closed #chats { display: none; }
#chat.closed .header { padding-bottom: 3px; }
#chat.highlight .header { background: #09F; border-color: #09F; text-shadow: none; color: #FFF; }
#chat.highlight .header.gheader { background: #FFF; border: solid 1px #FFF; display: none; }

#chat .header { background: #CCC; border: solid 1px #CCC; padding: 2px 2px 2px 5px; font-size: 10px; color: #333; font-family: Tahoma,Geneva; font-weight: bold; min-height: 10px; margin: 0; transition: all ease-in-out 0.2s; }
#chat .header:hover { background: #A0A0A0; border-color: #A0A0A0; cursor: pointer; }
#chat .header .openclose { text-decoration: none; display: block; height: 20px; width: 20px; background: url('/inc/img/icn/sprites/vx_sprites.png?23') -220px -220px no-repeat; position: absolute; right: 3px; top: 1px; }
#chat.closed .header .openclose { background-position: -200px -220px; }

#chat .messagealert { position: absolute; top: 15px; right: 215px; width: 120px; text-align: center; color: #09F; }
#chat .messagealert.closedparent { right: 5px; }

#chatsearch { font-size: 12px; }
#chat .clear-btn { right: 2px; top: 8px; }
#chat .noresults { padding: 5px; }
#chat #chatsearchBox .load { display: none; position: absolute; right: 5px; top: 7px; z-index: +1; width: 16px; height: 16px; background: #FFF url("/inc/img/loader-16.gif") no-repeat scroll center center; }
#chat #chatsearchBox.loading .load { display: block; }
#chat #userlist { position: relative; border: solid 1px #FFF; border-top: none; }
#chat .users { padding-left: 3px; overflow-x: hidden; overflow-y: auto; /*  */ }
#chat .users > div { padding: 1px 2px 1px 1px; min-height: 20px; vertical-align: middle; position: relative; font-size: 11px; }
#chat .users > div:hover { background: #E0E0E0; cursor: pointer; }
#chat .users > div .un { display: inline-block; margin-left: 4px; margin-top: 3px; max-width: 145px; overflow: hidden; }

#chat .users > div.ui-draggable-dragging { z-index: 100; cursor: move; }

#chat .users .thumb { margin: 0; background-size: 100%; }
#chat .users > .unread { background: #09F; border-bottom: none; }
#chat .users > .unread .un { color: #FFF; }
#chat .users .onlinestatus { display: inline-block; width: 16px; height: 16px; margin-top: 2px; }
#chat .lastactive { color: #A0A0A0; font-size: 10px; margin-top: 3px; margin-right: 2px; text-align: right; display: inline-block; }

#chat .thumb { width: 20px; height: 20px; margin: 1px 2px 2px 1px; border-radius: 50%; background-size: cover; }

#chat #chats { position: fixed; bottom: 3px; right: 244px; padding-right: 4px; background-color: transparent; height: 282px; }
#chat .conversation { width: 245px; height: 282px; float: right; margin-left: 2px; position: relative; transition: all ease-in-out 0.3s; box-shadow: none; }
#chat .conversation .messages .thumb { position: absolute; right: 1px; top: 3px; }
#chat .conversation .hd { height: 21px; }
#chat .conversation .hd { background: #CCC; color: #333; }
#chat .conversation .hd a, #chat .conversation .hd span { padding-top: 2px; display: inline-block; _display: inline; color: #333; }
#chat .conversation .hd .thumb { display: inline-block; _display: inline; display: none; }
#chat .conversation .hd .username { margin-left: 4px; }

#chat .conversation.group .hd { background: #444444; color: #FFF; }
#chat .conversation.group .hd a, #chat .conversation.group .hd span { color: #FFF; display: block; height: 100%; overflow: hidden; }
#chat .conversation.group.candrop .hd { background: #666666; transition: all ease-in-out 0.2s; }
#chat .conversation.group.candrop.hoverover { box-shadow: 0 0 2px rgba(0, 173, 255, 0.6); background: #09F; }
#chat .conversation.group.candrop.hoverover .hd { background: #09F; }

#chat .gheader { margin-top: 5px; margin-bottom: 4px; background: #FFF; border: none; }
#chat .gheader.header:hover { background: #FFF; border: none; }
.gcht { background: #EEE; }
.gcht .nummembers { margin-left: 6px; font-size: 0.8em; margin-top: -3px; }
.gcht .onlinestatus { display: none !important; }
.groupedthumbs { min-width: 34px; float: left; }
.groupedthumbs .thumb0 { float: none; }
.groupedthumbs .thumb1 { position: absolute; left: 9px; top: 3px; width: 18px !important; height: 18px !important; }
.groupedthumbs .thumb.tme { position: absolute; left: 16px; top: 3px; width: 18px !important; height: 18px !important; }

#chat .conversation.group .message.fromme .thumb { display: block; }
#chat .conversation .message .thumb { }
#chat .conversation .message.fromme .thumb { float: left; background-size: cover }

#chat.dragging .conversation { opacity: 0.5; }
#chat.dragging .conversation.candrop { opacity: 1.0; }

#chat .conversation .messages { position: relative; height: 198px; overflow-x: hidden; overflow-y: auto; vertical-align: bottom; }
#chat .conversation .messages .loading { position: relative; height: 40px; margin-top: -80px; }
#chat .message { margin-top: 3px; padding-left: 6px; max-width: 90%; background-color: transparent !important; background-image: none !important; font-size: 13px; }
#chat .time { font-size: 9px; color: #AAA; padding: 4px 6px 2px 6px; text-align: right; }
#chat .msg-inner { margin-right: 20px; margin-left: 4px; position: relative; background-color: #C7EDFC; color: #222; padding: 4px 28px 4px 5px; border-radius: 8px 10px 10px 0; display: inline-block; }
#chat .green .msg-inner { background-color: rgba(109,217,0,0.8); }
#chat .lightgreen .msg-inner { background-color: rgba(109,217,0,0.5); }
#chat .red .msg-inner { background-color: rgba(255,0,0,0.4); }
#chat .magenta .msg-inner { background-color: rgba(255, 0, 255,0.3); }
#chat .blue .msg-inner { background-color: rgba(0,153,255,0.8); }
#chat .lightblue .msg-inner { background-color: rgba(0,153,255,0.5); }
#chat .darkblue .msg-inner { background-color: rgba(0,0,139,0.3); }
#chat .yellow .msg-inner { background-color: rgba(255,255,0,0.3); }
#chat .orange .msg-inner { background-color: rgba(255,165,0,0.3); }

#chat .message.fromme { padding-right: 6px; }
#chat .message.fromme .msg-inner { padding-right: 4px; padding-left: 28px; margin-left: 10px; margin-right: 4px; background-color: #ddd; border-color: #ddd; border-radius: 8px 8px 0 8px; color: #505050; max-width: 92%; word-wrap: break-word; }
#chat .message.fromme .thumb { position: absolute; left: 0; top: 0px; }
#chat .message.unread { background-color: transparent; border-bottom: none; }
#chat .message.unread .msg-inner { background-color: #C9EA00; }
#chat .message:last-child { margin-bottom: 20px; }
#chat .message .time { text-align: right; font-size: 9px; color: #AAA; margin-left: 4px; float: right; }
#chat .message .msg-inner .un { font-size: 0.8em; display: block; margin-top: 3px; color: rgba(0,0,0,0.4); }

#chat #chats > .conversation .messages .top { height: 40px; }
#chat #chats > .conversation textarea { position: absolute; bottom: 0; left: 0px; right: 0px; border: solid 1px #FFF; border-top-color: #E0E0E0; font-size: 11px; font-family: "lucida grande",Tahoma,Geneva,verdana,arial,sans-serif; color: #000; padding: 5px 0 3px 5px; height: 47px; width: 220px; }
#chat #chats > .conversation .extras { position: absolute; bottom: 0px; left: 0px; right: 0px; height: 15px; font-size: 10px; color: #CACACA; display: none; }
#chat #chats > .conversation .extras a { }
#chat .conversation > div.bg { display: none; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: #888; opacity: 0.6; }

#chat #chats > .conversation .inner { position: absolute; top: 1px; left: 1px; right: 1px; bottom: 1px; /*border: solid 1px #CCC;*/ box-shadow: 0 0 4px rgba(0,0,0,0.5); background: rgba(255,255,255,1.0); }
#chat #chats > .conversation .inner a.close { float: right; color: #E0E0E0; opacity: 0.6; font-weight: bold; min-width: 14px; }
#chat #chats > .conversation .inner a.close:hover { opacity: 1.0; }
#chat div.chatbox { width: 200px; }

#chat .active .onlinestatus { background-image: url('/inc/img/icn/sprites/vx_sprites.png?23'); }
#chat .rhc { position: absolute; right: 0; top: 0; }
#chat .rhc .onlinestatus { margin-right: 2px; }
#chat .active .lastactive { display: none; }
#chat .active .onlinestatus { background-position: -240px -140px; }
#chat .inactive .onlinestatus { display: none; }
#chat .invisible .onlinestatus { background-image: url('/inc/img/icn/sprites/vx_sprites_grayscale.png?23'); background-position: -240px -120px; }
#chat .away .onlinestatus { background-image: url('/inc/img/icn/sprites/vx_sprites_grayscale.png?23'); background-position: -240px -120px; }
#chat .donotdisturb .onlinestatus { background-image: url('/inc/img/icn/sprites/vx_sprites_grayscale.png?23'); background-position: -240px -120px; }

.groupchat { position: relative; border: solid 2px #666; padding: 12px 0 10px !important; min-height: 0 !important; margin-top: 15px; margin-right: 4px; text-align: center; transition: all ease-in-out 0.2s; }
.groupchat:hover { background: #666 !important; color: #FFF; }
.groupchat a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

#chat #creategroupchat { }
#chat #creategroupchat:hover { }
#chat #creategroupchat a { }