body { font-family: 'Roboto', sans-serif;padding:0; margin:0; background:#D3F9CA;  }
body.chat { background:url(/core/imgs/bg.jpg);  }
.window_content { margin:0 auto; width:100%; }
.chat .row { display:flex; height:100%; flex-direction:column; position:relative; }
.chat { max-width:100%; font-family:Arial, Helvetica, sans-serif; border-right:1px solid #ccc; display:flex;}
.title_chat { background:#EEEEEE; color:#000; padding:15px; border-right:1px solid #eaeaea; border-bottom:1px solid #B9AEA4; }
.title_chat span.name { font-size:21px;  }
.title_chat span.last { font-size:13px; display:block; color:#606060; }
.content_chat, .chat .row .content { overflow:auto; width:auto; background:url(/core/imgs/bg_conver.jpg) center repeat; padding:10px; font-size:15px; }
.message { -webkit-box-shadow:2px 2px 0px 0px rgba(50, 50, 50, 0.2); -moz-box-shadow:2px 2px 0px 0px rgba(50, 50, 50, 0.2); box-shadow:2px 2px 0px 0px rgba(50, 50, 50, 0.2); color: #000; clear: both; line-height: 18px;font-size: 15px; padding: 8px; margin: 2px 0; max-width: 85%;word-wrap: break-word; }
.message .name { white-space:nowrap; vertical-align:baseline; outline:none; display:block; font-size:14px; margin-bottom:3px; color:#1f7aec; font-weight:bold; }
.message #text { font-size:13.6px; }
.message:after { content: ""; width: 0;height: 0;border-style: solid;}
.metadata { display: inline-block; float: right; padding: 0 0 0 7px; position: relative; bottom: -4px;}
.metadata .time { color: rgba(0, 0, 0, .45); font-size: 11px; display: inline-block;}
.metadata .tick { display: inline-block; margin-left: 2px; position: relative;top: 4px;height: 16px;width: 16px; }
.metadata .tick svg { position: absolute; transition: .5s ease-in-out;}
.metadata .tick svg:first-child {-webkit-backface-visibility: hidden;backface-visibility: hidden;-webkit-transform: perspective(800px) rotateY(180deg); transform: perspective(800px) rotateY(180deg);}
.metadata .tick svg:last-child { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: perspective(800px) rotateY(0deg);transform: perspective(800px) rotateY(0deg);}
.etadata .tick-animation svg:first-child { -webkit-transform: perspective(800px) rotateY(0); transform: perspective(800px) rotateY(0);}
.metadata .tick-animation svg:last-child { -webkit-transform: perspective(800px) rotateY(-179.9deg); transform: perspective(800px) rotateY(-179.9deg);}
.alert { display:flex; background:#9DE1FE; padding:14px 18px 13px 12px; font-size:16px; color:#37474f; min-height:62px; }
.alert .icon-alert { flex:none; margin-right:20px; background:#fff; border-radius:100px; width:50px; height:50px; vertical-align:middle; text-align:center; }
.alert.error { background:#FF9191; }
.emoji_list { background:#eaeaea; padding:20px; max-height:200px; overflow-y:auto; }
.emoji_list ._emojiPut { background:none; border:none; padding:0; margin:0; cursor:pointer; }
.icon.emoji { display:inline-block; vertical-align:top; word-wrap:break-word; }
.alert .icon-alert img { max-width:35px; vertical-align:middle; position:relative; top:5px; }
.alert .body { flex:1; flex-direction:column; }
.alert .title-alert { line-height:21px; color:#37474f; }
.alert .desc-alert { font-size:14px; opacity:0.6; color:#37474f; margin-top:2px; line-height:19px; }
.alert .title-alert, .alert .desc-alert { display:inline-block; }
.message:first-child {margin: 16px 0 8px;}
.message:last-child { margin-bottom:16px; }
.message.dev { background:#D7EAFD !important; padding:10px; }
.message.dev:after { border-width: 0px 0 10px 10px; top: 0; right: -10px; border-color: transparent #D7EAFD transparent transparent !important; }
.send_msg { padding:15px; background:#F5F1EE; display:flex; }
.message.received {background: #fff;border-radius: 0px 5px 5px 5px;float: left; margin-top:10px; margin-bottom:10px; }
.message.nospace, .message.received.nospace { margin-bottom:0px !important; margin-top:0px !important; }
.message.received .metadata {padding: 0 0 0 16px;}
.message.received:after {border-width: 0px 10px 10px 0;border-color: transparent #fff transparent transparent;top: 0;left: -10px;}
.message.sent { background: #e1ffc7; border-radius: 5px 0px 5px 5px; float: right;}
.message.sent:after { border-width: 0px 0 10px 10px; border-color: transparent transparent transparent #e1ffc7; top: 0; right: -10px; }
.send_msg { padding:15px; background:#F5F1EE; display:flex; }
.send_msg .btn_send {vertical-align: middle; display:inline-block; border-radius:5px; width:30px; text-align:center; padding:5px; font-size:16px; font-weight:bold; color:#fff; height:auto; }
.send_msg .btn_send:hover { cursor:pointer; }
.send_msg .input_box { border-radius:10px; background:#fff; padding:10px; font-family:Arial, Helvetica, sans-serif; font-size:15px; width:100%; flex:1 1 auto; cursor:text; margin-right:10px; -moz-user-select:text; line-height:20px; }
.send_msg .input_box .input { outline: none; word-wrap:break-word; white-space:pre-wrap; min-height:10px; overflow-y:auto; overflow-x:hidden; position:relative; margin:0; padding:0; max-height:100px; }
.send_msg .input_box .placeholder { margin:0; padding:0; color:#A4A4AC; position:absolute; pointer-events:none; }
.btn_send2 { margin-top:10px; border-radius:10px; width:auto; display:inline-block; background:#4C8AFF; padding:10px; text-align:center; color:#fff; font-size:15px; cursor:pointer; }
.btn_send2:hover { background:#3399FF; cursor:pointer; }
.window_center { background:#D3F9CA; display:table-cell; color:#fff; overflow:hidden; max-width:100%; }
.window_center img { max-width:300px; }
a { color:#039be5; } 
#login .text_input { display:inline-table; text-align:center; font-size:18px;border:none; width:100%; background:#fff; color:#000; border-bottom:1px solid #ccc; }
#login .label_input { display:block; color:#666666; font-size:16px; padding:10px;border:none; background:#fff; color:#000; border-bottom:1px solid #ccc; margin-top:10px; }
#login .input {display:table-cell; width:100%; font-size:18px; border:none; padding:10px; }
#login .placeholder { display:table-cell; color:#999999;padding:10px; cursor:default; } 
#login #alert { color:#FF0000; padding:5px; font-size:14px; margin-bottom:5px; }
.chat .title_chat .logo { float:left; margin-right:20px;  }
.chat .title_chat .logo img { max-width:30px; }
.loading { max-height:40px; margin-bottom:10px; }
.version { color:#666; font-size:13px; padding:5px; margin-top:25px; display:block; }
.user { background:#fff; padding:15px; cursor:pointer; }
.user:hover { background:#F4F5F5; }
.user.active { background:#E9EBEB; }
.user .avatar { float:left;-moz-border-radius:30px; border-radius:30px; width:50px; height:50px; margin-right:20px; margin-bottom:10px; }
.user .nick { font-weight:bold; display:block; }