/*!
 * Converse.js (Web-based XMPP instant messaging client)
 * http://conversejs.org
 *
 * Copyright (c) 2012-2016, JC Brand <jc@opkode.com>
 * Licensed under the Mozilla Public License
 */
/*
    Color scheme helpers:
    https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
    http://paletton.com/#uid=53f0u0knsvIdILAj5Cftgu3uBmZ
 */
@font-face {
    font-family: 'Converse-js';
    src: url("../fonticons/fonts/icomoon.eot?wvi0ht");
    src: url("../fonticons/fonts/icomoon.eot?wvi0ht#iefix") format("embedded-opentype"), url("../fonticons/fonts/icomoon.ttf?wvi0ht") format("truetype"), url("../fonticons/fonts/icomoon.woff?wvi0ht") format("woff"), url("../fonticons/fonts/icomoon.svg?wvi0ht#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AEH';
    src: url("../fonticons/fonts/AEH.ttf") format("truetype")
}

.icon-conversejs {
    font-family: Converse-js;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-conversejs:before {
    content: "\e600"
}

#converse-embedded-chat .icon-address-book:before,
#conversejs .icon-address-book:before {
    content: "\270f"
}

#converse-embedded-chat .icon-angry:before,
#conversejs .icon-angry:before {
    content: "\e03f"
}

#converse-embedded-chat .icon-attachment:before,
#conversejs .icon-attachment:before {
    content: "\e032"
}

#converse-embedded-chat .icon-away:before,
#conversejs .icon-away:before {
    /*content: "\25fb"*/
}

#converse-embedded-chat .icon-blocked:before,
#conversejs .icon-blocked:before {
    content: "\2718"
}

#converse-embedded-chat .icon-bold:before,
#conversejs .icon-bold:before {
    content: "\e04d"
}

#converse-embedded-chat .icon-bubbles-2:before,
#conversejs .icon-bubbles-2:before {
    content: "\e016"
}

#converse-embedded-chat .icon-bubbles-3:before,
#conversejs .icon-bubbles-3:before {
    content: "\e017"
}

#converse-embedded-chat .icon-bubbles:before,
#conversejs .icon-bubbles:before {
    content: "\e015"
}

#converse-embedded-chat .icon-camera-2:before,
#conversejs .icon-camera-2:before {
    content: "\2616"
}

#converse-embedded-chat .icon-camera:before,
#conversejs .icon-camera:before {
    content: "\e003"
}

#converse-embedded-chat .icon-cancel-circle:before,
#conversejs .icon-cancel-circle:before {
    content: "\e058"
}

#converse-embedded-chat .icon-chat:before,
#conversejs .icon-chat:before {
    /*content: "\25fc"*/
}

#converse-embedded-chat .icon-checkbox-checked:before,
#conversejs .icon-checkbox-checked:before {
    content: "\2611"
}

#converse-embedded-chat .icon-checkbox-partial:before,
#conversejs .icon-checkbox-partial:before {
    content: "\2b28"
}

#converse-embedded-chat .icon-checkbox-unchecked:before,
#conversejs .icon-checkbox-unchecked:before {
    content: "\2b27"
}

#converse-embedded-chat .icon-checkmark:before,
#conversejs .icon-checkmark:before {
    content: "\2713"
}

#converse-embedded-chat .icon-close:before,
#conversejs .icon-close:before {
    content: "\2715"
}

#converse-embedded-chat .icon-closed:before,
#conversejs .icon-closed:before {
    content: "\25ba"
}

#converse-embedded-chat .icon-cog:before,
#conversejs .icon-cog:before {
    content: "\e02f"
}

#converse-embedded-chat .icon-cogs:before,
#conversejs .icon-cogs:before {
    content: "\e022"
}

#converse-embedded-chat .icon-confused:before,
#conversejs .icon-confused:before {
    content: "\2368"
}

#converse-embedded-chat .icon-cool:before,
#conversejs .icon-cool:before {
    content: "\e040"
}

#converse-embedded-chat .icon-database:before,
#conversejs .icon-database:before {
    content: "\f1c0"
}

#converse-embedded-chat .icon-dnd:before,
#conversejs .icon-dnd:before {
    /*content: "\e004"*/
}

#converse-embedded-chat .icon-envelop:before,
#conversejs .icon-envelop:before {
    content: "\2709"
}

#converse-embedded-chat .icon-evil:before,
#conversejs .icon-evil:before {
    content: "\261f"
}

#converse-embedded-chat .icon-eye-blocked:before,
#conversejs .icon-eye-blocked:before {
    content: "\e031"
}

#converse-embedded-chat .icon-eye:before,
#conversejs .icon-eye:before {
    content: "\e030"
}

#converse-embedded-chat .icon-globe:before,
#conversejs .icon-globe:before {
    content: "\f0ac"
}

#converse-embedded-chat .icon-grin:before,
#conversejs .icon-grin:before {
    content: "\e041"
}

#converse-embedded-chat .icon-happy:before,
#conversejs .icon-happy:before {
    content: "\263b"
}

#converse-embedded-chat .icon-headphones:before,
#conversejs .icon-headphones:before {
    content: "\266c"
}

#converse-embedded-chat .icon-heart:before,
#conversejs .icon-heart:before {
    content: "\2764"
}

#converse-embedded-chat .icon-hide-users:before,
#conversejs .icon-hide-users:before {
    content: "\e01c"
}

#converse-embedded-chat .icon-home:before,
#conversejs .icon-home:before {
    content: "\e000"
}

#converse-embedded-chat .icon-idcard-dark:before,
#conversejs .icon-idcard-dark:before {
    content: "\f2c2"
}

#converse-embedded-chat .icon-idcard:before,
#conversejs .icon-idcard:before {
    content: "\f2c3"
}

#converse-embedded-chat .icon-image:before,
#conversejs .icon-image:before {
    content: "\2b14"
}

#converse-embedded-chat .icon-info-2:before,
#conversejs .icon-info-2:before {
    content: "i"
}

#converse-embedded-chat .icon-info:before,
#conversejs .icon-info:before {
    content: "\2360"
}

#converse-embedded-chat .icon-italic:before,
#conversejs .icon-italic:before {
    content: "\e04f"
}

#converse-embedded-chat .icon-key-2:before,
#conversejs .icon-key-2:before {
    content: "\e029"
}

#converse-embedded-chat .icon-key:before,
#conversejs .icon-key:before {
    content: "\e028"
}

#converse-embedded-chat .icon-legal:before,
#conversejs .icon-legal:before {
    content: "\f0e3"
}

#converse-embedded-chat .icon-lock:before,
#conversejs .icon-lock:before {
    content: "\e027"
}

#converse-embedded-chat .icon-logout:before,
#conversejs .icon-logout:before {
    content: "\e601"
}

#converse-embedded-chat .icon-leave:before,
#conversejs .icon-leave:before {
    content: "\e601"
}

#converse-embedded-chat .icon-minus:before,
#conversejs .icon-minus:before {
    content: "\e05a"
}

#converse-embedded-chat .icon-music:before,
#conversejs .icon-music:before {
    content: "\266b"
}

#converse-embedded-chat .icon-new-tab:before,
#conversejs .icon-new-tab:before {
    content: "\e053"
}

#converse-embedded-chat .icon-newspaper:before,
#conversejs .icon-newspaper:before {
    content: "\e001"
}

#converse-embedded-chat .icon-notebook:before,
#conversejs .icon-notebook:before {
    content: "\2710"
}

#converse-embedded-chat .icon-notification:before,
#conversejs .icon-notification:before {
    content: "\e01f"
}

#converse-embedded-chat .icon-offline:before,
#conversejs .icon-offline:before {
    /*content: "\e002"*/
}

#converse-embedded-chat .icon-online:before,
#conversejs .icon-online:before {
    /*content: "\25fc"*/
}

#converse-embedded-chat .icon-opened:before,
#conversejs .icon-opened:before {
    content: "\25bc"
}

#converse-embedded-chat .icon-pencil:before,
#conversejs .icon-pencil:before {
    content: "\270e"
}

#converse-embedded-chat .icon-phone-hang-up:before,
#conversejs .icon-phone-hang-up:before {
    content: "\260e"
}

#converse-embedded-chat .icon-phone:before,
#conversejs .icon-phone:before {
    content: "\260f"
}

#converse-embedded-chat .icon-play:before,
#conversejs .icon-play:before {
    content: "\25d9"
}

#converse-embedded-chat .icon-plus:before,
#conversejs .icon-plus:before {
    content: "\271a"
}

#converse-embedded-chat .icon-pushpin:before,
#conversejs .icon-pushpin:before {
    content: "\e012"
}

#converse-embedded-chat .icon-quotes-left:before,
#conversejs .icon-quotes-left:before {
    content: "\e01d"
}

#converse-embedded-chat .icon-radio-checked:before,
#conversejs .icon-radio-checked:before {
    content: "\2b26"
}

#converse-embedded-chat .icon-radio-unchecked:before,
#conversejs .icon-radio-unchecked:before {
    content: "\2b25"
}

#converse-embedded-chat .icon-remove:before,
#conversejs .icon-remove:before {
    content: "\2715"
}

#converse-embedded-chat .icon-trash:before,
#conversejs .icon-trash:before {
    content: "\e02d"
}

#converse-embedded-chat .icon-room-info:before,
#conversejs .icon-room-info:before {
    content: "\e059"
}

#converse-embedded-chat .icon-sad:before,
#conversejs .icon-sad:before {
    content: "\2639"
}

#converse-embedded-chat .icon-save:before,
#conversejs .icon-save:before {
    content: "\f0c7"
}

#converse-embedded-chat .icon-search:before,
#conversejs .icon-search:before {
    content: "\e021"
}

#converse-embedded-chat .icon-shocked:before,
#conversejs .icon-shocked:before {
    content: "\2364"
}

#converse-embedded-chat .icon-show-users:before,
#conversejs .icon-show-users:before {
    content: "\e01e"
}

#converse-embedded-chat .icon-smiley:before,
#conversejs .icon-smiley:before {
    content: "\263a"
}

#converse-embedded-chat .icon-snowflake:before,
#conversejs .icon-snowflake:before {
    content: "\f2dc"
}

#converse-embedded-chat .icon-spell-check:before,
#conversejs .icon-spell-check:before {
    content: "\e045"
}

#converse-embedded-chat .icon-spinner:before,
#conversejs .icon-spinner:before {
    content: "\231b"
}

#converse-embedded-chat .icon-strikethrough:before,
#conversejs .icon-strikethrough:before {
    content: "\e050"
}

#converse-embedded-chat .icon-thumbs-up:before,
#conversejs .icon-thumbs-up:before {
    content: "\261d"
}

#converse-embedded-chat .icon-tongue:before,
#conversejs .icon-tongue:before {
    content: "\e038"
}

#converse-embedded-chat .icon-unavailable:before,
#converse-embedded-chat .icon-underline:before,
#conversejs .icon-unavailable:before,
#conversejs .icon-underline:before {
    content: "\e04e"
}

#converse-embedded-chat .icon-unlocked:before,
#conversejs .icon-unlocked:before {
    content: "\e025"
}

#converse-embedded-chat .icon-user:before,
#conversejs .icon-user:before {
    content: "\e01a"
}

#converse-embedded-chat .icon-users:before,
#conversejs .icon-users:before {
    content: "\e01b"
}

#converse-embedded-chat .icon-warning:before,
#conversejs .icon-warning:before {
    content: "\26a0"
}

#converse-embedded-chat .icon-wink:before,
#conversejs .icon-wink:before {
    content: "\e03a"
}

#converse-embedded-chat .icon-wondering:before,
#conversejs .icon-wondering:before {
    content: "\2369"
}

#converse-embedded-chat .icon-wrench:before,
#conversejs .icon-wrench:before {
    content: "\e024"
}

#converse-embedded-chat .icon-xa:before,
#conversejs .icon-xa:before {
    /*content: "\e602"*/
}

#converse-embedded-chat .icon-youtube:before,
#conversejs .icon-youtube:before {
    content: "\e055"
}

#converse-embedded-chat .icon-zoom-in:before,
#conversejs .icon-zoom-in:before {
    content: "\e02b"
}

#converse-embedded-chat .icon-zoom-out:before,
#conversejs .icon-zoom-out:before {
    content: "\e02a"
}

#converse-embedded-chat [data-icon]:before,
#conversejs [data-icon]:before {
    content: attr(data-icon);
    font-family: Converse-js;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    speak: none;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

#converse-embedded-chat [class*=" icon-"]:before,
#converse-embedded-chat [class^=icon-]:before,
#conversejs [class*=" icon-"]:before,
#conversejs [class^=icon-]:before {
    background-position: 14px 14px;
    background-image: none;
    font-family: Converse-js;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    width: auto;
    height: auto;
    line-height: 1;
    speak: none;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

#conversejs {
    /*!
  Pure v0.6.1-pre
  Copyright 2014 Yahoo! Inc. All rights reserved.
  Licensed under the BSD License.
  https://github.com/yahoo/pure/blob/master/LICENSE.md
  */
    /*!
  normalize.css v^3.0 | MIT License | git.io/normalize
  Copyright (c) Nicolas Gallagher and Jonathan Neal
  */
    /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
    /*!
  Pure v0.6.1-pre
  Copyright 2014 Yahoo! Inc. All rights reserved.
  Licensed under the BSD License.
  https://github.com/yahoo/pure/blob/master/LICENSE.md
  */
    /*!
  Pure v0.6.1-pre
  Copyright 2014 Yahoo! Inc. All rights reserved.
  Licensed under the BSD License.
  https://github.com/yahoo/pure/blob/master/LICENSE.md
  */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

#conversejs html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

#conversejs body {
    margin: 0
}

#conversejs article,
#conversejs aside,
#conversejs details,
#conversejs figcaption,
#conversejs figure,
#conversejs footer,
#conversejs header,
#conversejs hgroup,
#conversejs main,
#conversejs menu,
#conversejs nav,
#conversejs section,
#conversejs summary {
    display: block
}

#conversejs audio,
#conversejs canvas,
#conversejs progress,
#conversejs video {
    display: inline-block;
    vertical-align: baseline
}

#conversejs audio:not([controls]) {
    display: none;
    height: 0
}

#conversejs [hidden],
#conversejs template {
    display: none
}

#conversejs a {
    background-color: transparent
}

#conversejs a:active,
#conversejs a:hover {
    outline: 0
}

#conversejs abbr[title] {
    border-bottom: 1px dotted
}

#conversejs b,
#conversejs strong {
    font-weight: 700
}

#conversejs dfn {
    font-style: italic
}

#conversejs h1 {
    font-size: 2em;
    margin: .67em 0
}

#conversejs mark {
    background: #ff0;
    color: #000
}

#conversejs small {
    font-size: 80%
}

#conversejs sub,
#conversejs sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

#conversejs sup {
    top: -.5em
}

#conversejs sub {
    bottom: -.25em
}

#conversejs img {
    border: 0
}

#conversejs svg:not(:root) {
    overflow: hidden
}

#conversejs figure {
    margin: 1em 40px
}

#conversejs hr {
    box-sizing: content-box;
    height: 0
}

#conversejs pre {
    overflow: auto
}

#conversejs code,
#conversejs kbd,
#conversejs pre,
#conversejs samp {
    font-family: monospace, monospace;
    font-size: 1em
}

#conversejs button,
#conversejs input,
#conversejs optgroup,
#conversejs select,
#conversejs textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

#conversejs button {
    overflow: visible
}

#conversejs button,
#conversejs select {
    text-transform: none
}

#conversejs button,
#conversejs html input[type=button],
#conversejs input[type=reset],
#conversejs input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer
}

#conversejs button[disabled],
#conversejs html input[disabled] {
    cursor: default
}

#conversejs button::-moz-focus-inner,
#conversejs input::-moz-focus-inner {
    border: 0;
    padding: 0
}

#conversejs input {
    line-height: normal
}

#conversejs input[type=checkbox],
#conversejs input[type=radio] {
    box-sizing: border-box;
    padding: 0
}

#conversejs input[type=number]::-webkit-inner-spin-button,
#conversejs input[type=number]::-webkit-outer-spin-button {
    height: auto
}

#conversejs input[type=search] {
    -webkit-appearance: textfield;
    box-sizing: content-box
}

#conversejs input[type=search]::-webkit-search-cancel-button,
#conversejs input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

#conversejs fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}

#conversejs legend {
    border: 0;
    padding: 0
}

#conversejs textarea {
    overflow: auto
}

#conversejs optgroup {
    font-weight: 700
}

#conversejs table {
    border-collapse: collapse;
    border-spacing: 0
}

#conversejs td,
#conversejs th {
    padding: 0
}

#conversejs .hidden,
#conversejs [hidden] {
    display: none!important
}

#conversejs .pure-img {
    max-width: 100%;
    height: auto;
    display: block
}

#conversejs .pure-form input[type=color],
#conversejs .pure-form input[type=date],
#conversejs .pure-form input[type=datetime-local],
#conversejs .pure-form input[type=datetime],
#conversejs .pure-form input[type=email],
#conversejs .pure-form input[type=month],
#conversejs .pure-form input[type=number],
#conversejs .pure-form input[type=password],
#conversejs .pure-form input[type=search],
#conversejs .pure-form input[type=tel],
#conversejs .pure-form input[type=text],
#conversejs .pure-form input[type=time],
#conversejs .pure-form input[type=url],
#conversejs .pure-form input[type=week],
#conversejs .pure-form select,
#conversejs .pure-form textarea {
    padding: .5em .6em;
    display: inline-block;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 3px #ddd;
    border-radius: 4px;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

#conversejs .pure-form input:not([type]) {
    padding: .5em .6em;
    display: inline-block;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 3px #ddd;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

#conversejs .pure-form input[type=color] {
    padding: .2em .5em
}

#conversejs .pure-form input[type=color]:focus,
#conversejs .pure-form input[type=date]:focus,
#conversejs .pure-form input[type=datetime-local]:focus,
#conversejs .pure-form input[type=datetime]:focus,
#conversejs .pure-form input[type=email]:focus,
#conversejs .pure-form input[type=month]:focus,
#conversejs .pure-form input[type=number]:focus,
#conversejs .pure-form input[type=password]:focus,
#conversejs .pure-form input[type=search]:focus,
#conversejs .pure-form input[type=tel]:focus,
#conversejs .pure-form input[type=text]:focus,
#conversejs .pure-form input[type=time]:focus,
#conversejs .pure-form input[type=url]:focus,
#conversejs .pure-form input[type=week]:focus,
#conversejs .pure-form select:focus,
#conversejs .pure-form textarea:focus {
    outline: 0;
    border-color: #1a9707
}

#conversejs .pure-form input:not([type]):focus {
    outline: 0;
    border-color: #1a9707
}

#conversejs .pure-form input[type=checkbox]:focus,
#conversejs .pure-form input[type=file]:focus,
#conversejs .pure-form input[type=radio]:focus {
    outline: thin solid #1a9707;
    outline: 1px auto #1a9707
}

#conversejs .pure-form .pure-checkbox,
#conversejs .pure-form .pure-radio {
    margin: .5em 0;
    display: block
}

#conversejs .pure-form input[type=color][disabled],
#conversejs .pure-form input[type=date][disabled],
#conversejs .pure-form input[type=datetime-local][disabled],
#conversejs .pure-form input[type=datetime][disabled],
#conversejs .pure-form input[type=email][disabled],
#conversejs .pure-form input[type=month][disabled],
#conversejs .pure-form input[type=number][disabled],
#conversejs .pure-form input[type=password][disabled],
#conversejs .pure-form input[type=search][disabled],
#conversejs .pure-form input[type=tel][disabled],
#conversejs .pure-form input[type=text][disabled],
#conversejs .pure-form input[type=time][disabled],
#conversejs .pure-form input[type=url][disabled],
#conversejs .pure-form input[type=week][disabled],
#conversejs .pure-form select[disabled],
#conversejs .pure-form textarea[disabled] {
    cursor: not-allowed;
    background-color: #eaeded;
    color: #cad2d3
}

#conversejs .pure-form input:not([type])[disabled] {
    cursor: not-allowed;
    background-color: #eaeded;
    color: #cad2d3
}

#conversejs .pure-form input[readonly],
#conversejs .pure-form select[readonly],
#conversejs .pure-form textarea[readonly] {
    background-color: #eee;
    color: #777;
    border-color: #ccc
}

#conversejs .pure-form input:focus:invalid,
#conversejs .pure-form select:focus:invalid,
#conversejs .pure-form textarea:focus:invalid {
    color: #b94a48;
    border-color: #e9322d
}

#conversejs .pure-form input[type=checkbox]:focus:invalid:focus,
#conversejs .pure-form input[type=file]:focus:invalid:focus,
#conversejs .pure-form input[type=radio]:focus:invalid:focus {
    outline-color: #e9322d
}

#conversejs .pure-form select {
    height: 2.25em;
    border: 1px solid #ccc;
    background-color: #fff
}

#conversejs .pure-form select[multiple] {
    height: auto
}

#conversejs .pure-form label {
    margin: .5em 0 .2em
}

#conversejs .pure-form fieldset {
    margin: 0;
    padding: .35em 0 .35em;
    border: 0
}

#conversejs .pure-form legend {
    display: block;
    width: 100%;
    padding: .3em 0;
    margin-bottom: .3em;
    color: #333;
    border-bottom: 1px solid #e5e5e5
}

#conversejs .pure-form-stacked input[type=color],
#conversejs .pure-form-stacked input[type=date],
#conversejs .pure-form-stacked input[type=datetime-local],
#conversejs .pure-form-stacked input[type=datetime],
#conversejs .pure-form-stacked input[type=email],
#conversejs .pure-form-stacked input[type=file],
#conversejs .pure-form-stacked input[type=month],
#conversejs .pure-form-stacked input[type=number],
#conversejs .pure-form-stacked input[type=password],
#conversejs .pure-form-stacked input[type=search],
#conversejs .pure-form-stacked input[type=tel],
#conversejs .pure-form-stacked input[type=text],
#conversejs .pure-form-stacked input[type=time],
#conversejs .pure-form-stacked input[type=url],
#conversejs .pure-form-stacked input[type=week],
#conversejs .pure-form-stacked label,
#conversejs .pure-form-stacked select,
#conversejs .pure-form-stacked textarea {
    display: block;
    margin: .25em 0
}

#conversejs .pure-form-stacked input:not([type]) {
    display: block;
    margin: .25em 0
}

#conversejs .pure-form-aligned .pure-help-inline,
#conversejs .pure-form-aligned input,
#conversejs .pure-form-aligned select,
#conversejs .pure-form-aligned textarea,
#conversejs .pure-form-message-inline {
    display: inline-block;
    vertical-align: middle
}

#conversejs .pure-form-aligned textarea {
    vertical-align: top
}

#conversejs .pure-form-aligned .pure-control-group {
    margin-bottom: .5em
}

#conversejs .pure-form-aligned .pure-control-group label {
    text-align: right;
    display: inline-block;
    vertical-align: middle;
    width: 10em;
    margin: 0 1em 0 0
}

#conversejs .pure-form-aligned .pure-controls {
    margin: 1.5em 0 0 11em
}

#conversejs .pure-form .pure-input-rounded,
#conversejs .pure-form input.pure-input-rounded {
    border-radius: 2em;
    padding: .5em 1em
}

#conversejs .pure-form .pure-group fieldset {
    margin-bottom: 10px
}

#conversejs .pure-form .pure-group input,
#conversejs .pure-form .pure-group textarea {
    display: block;
    padding: 10px;
    margin: 0 0 -1px;
    border-radius: 0;
    position: relative;
    top: -1px
}

#conversejs .pure-form .pure-group input:focus,
#conversejs .pure-form .pure-group textarea:focus {
    z-index: 3
}

#conversejs .pure-form .pure-group input:first-child,
#conversejs .pure-form .pure-group textarea:first-child {
    top: 1px;
    border-radius: 4px 4px 0 0;
    margin: 0
}

#conversejs .pure-form .pure-group input:first-child:last-child,
#conversejs .pure-form .pure-group textarea:first-child:last-child {
    top: 1px;
    border-radius: 4px;
    margin: 0
}

#conversejs .pure-form .pure-group input:last-child,
#conversejs .pure-form .pure-group textarea:last-child {
    top: -2px;
    border-radius: 0 0 4px 4px;
    margin: 0
}

#conversejs .pure-form .pure-group button {
    margin: .35em 0
}

#conversejs .pure-form .pure-input-1 {
    width: 100%
}

#conversejs .pure-form .pure-input-3-4 {
    width: 75%
}

#conversejs .pure-form .pure-input-2-3 {
    width: 66%
}

#conversejs .pure-form .pure-input-1-2 {
    width: 50%
}

#conversejs .pure-form .pure-input-1-3 {
    width: 33%
}

#conversejs .pure-form .pure-input-1-4 {
    width: 25%
}

#conversejs .pure-form .pure-help-inline,
#conversejs .pure-form-message-inline {
    display: inline-block;
    padding-left: .3em;
    color: #666;
    vertical-align: middle;
    font-size: .875em
}

#conversejs .pure-form-message {
    display: block;
    color: #666;
    font-size: .875em
}

@media only screen and (max-width:480px) {
    #conversejs .pure-form button[type=submit] {
        margin: .7em 0 0
    }
    #conversejs .pure-form input:not([type]),
    #conversejs .pure-form input[type=color],
    #conversejs .pure-form input[type=date],
    #conversejs .pure-form input[type=datetime-local],
    #conversejs .pure-form input[type=datetime],
    #conversejs .pure-form input[type=email],
    #conversejs .pure-form input[type=month],
    #conversejs .pure-form input[type=number],
    #conversejs .pure-form input[type=password],
    #conversejs .pure-form input[type=search],
    #conversejs .pure-form input[type=tel],
    #conversejs .pure-form input[type=text],
    #conversejs .pure-form input[type=time],
    #conversejs .pure-form input[type=url],
    #conversejs .pure-form input[type=week],
    #conversejs .pure-form label {
        margin-bottom: .3em;
        display: block
    }
    #conversejs .pure-group input:not([type]),
    #conversejs .pure-group input[type=color],
    #conversejs .pure-group input[type=date],
    #conversejs .pure-group input[type=datetime-local],
    #conversejs .pure-group input[type=datetime],
    #conversejs .pure-group input[type=email],
    #conversejs .pure-group input[type=month],
    #conversejs .pure-group input[type=number],
    #conversejs .pure-group input[type=password],
    #conversejs .pure-group input[type=search],
    #conversejs .pure-group input[type=tel],
    #conversejs .pure-group input[type=text],
    #conversejs .pure-group input[type=time],
    #conversejs .pure-group input[type=url],
    #conversejs .pure-group input[type=week] {
        margin-bottom: 0
    }
    #conversejs .pure-form-aligned .pure-control-group label {
        margin-bottom: .3em;
        text-align: left;
        display: block;
        width: 100%
    }
    #conversejs .pure-form-aligned .pure-controls {
        margin: 1.5em 0 0 0
    }
    #conversejs .pure-form .pure-help-inline,
    #conversejs .pure-form-message,
    #conversejs .pure-form-message-inline {
        display: block;
        font-size: .75em;
        padding: .2em 0 .8em
    }
}

#conversejs .pure-button {
    display: inline-block;
    zoom: 1;
    line-height: normal;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

#conversejs .pure-button::-moz-focus-inner {
    padding: 0;
    border: 0
}

#conversejs .pure-button {
    font-family: inherit;
    font-size: 100%;
    padding: .5em 1em;
    color: #444;
    color: rgba(0, 0, 0, .8);
    border: 1px solid #999;
    border: none transparent;
    background-color: #e6e6e6;
    text-decoration: none;
    border-radius: 2px
}

#conversejs .pure-button-hover,
#conversejs .pure-button:focus,
#conversejs .pure-button:hover {
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0, 0, 0, .05)), to(rgba(0, 0, 0, .1)));
    background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .1));
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .05) 0, rgba(0, 0, 0, .1));
    background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .1));
    background-image: linear-gradient(transparent, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .1))
}

#conversejs .pure-button:focus {
    outline: 0
}

#conversejs .pure-button-active,
#conversejs .pure-button:active {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) inset, 0 0 6px rgba(0, 0, 0, .2) inset
}

#conversejs .pure-button-disabled,
#conversejs .pure-button-disabled:active,
#conversejs .pure-button-disabled:focus,
#conversejs .pure-button-disabled:hover,
#conversejs .pure-button[disabled] {
    border: none;
    background-image: none;
    -khtml-opacity: .4;
    -moz-opacity: .4;
    opacity: .4;
    cursor: not-allowed;
    box-shadow: none
}

#conversejs .pure-button-hidden {
    display: none
}

#conversejs .pure-button::-moz-focus-inner {
    padding: 0;
    border: 0
}

#conversejs .pure-button-primary,
#conversejs .pure-button-selected,
#conversejs a.pure-button-primary,
#conversejs a.pure-button-selected {
    background-color: #0078e7;
    color: #fff
}

#conversejs *,
#conversejs:after,
#conversejs:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

@media screen and (max-width:480px) {
    #conversejs {
        margin: 0;
        right: 10px;
        left: 10px;
        bottom: 5px
    }
}

@media screen and (max-height:450px) {
    #conversejs {
        margin: 0;
        right: 10px;
        left: 10px;
        bottom: 5px
    }
}

#conversejs ul li {
    height: auto
}

#conversejs a,
#conversejs article,
#conversejs aside,
#conversejs audio,
#conversejs blockquote,
#conversejs canvas,
#conversejs caption,
#conversejs dd,
#conversejs details,
#conversejs div,
#conversejs dl,
#conversejs dt,
#conversejs em,
#conversejs embed,
#conversejs fieldset,
#conversejs figcaption,
#conversejs figure,
#conversejs footer,
#conversejs form,
#conversejs h1,
#conversejs h2,
#conversejs h3,
#conversejs h4,
#conversejs h5,
#conversejs h6,
#conversejs header,
#conversejs hgroup,
#conversejs img,
#conversejs label,
#conversejs legend,
#conversejs li,
#conversejs mark,
#conversejs menu,
#conversejs nav,
#conversejs ol,
#conversejs output,
#conversejs p,
#conversejs pre,
#conversejs ruby,
#conversejs section,
#conversejs span,
#conversejs strong,
#conversejs summary,
#conversejs table,
#conversejs tbody,
#conversejs td,
#conversejs tfoot,
#conversejs th,
#conversejs thead,
#conversejs time,
#conversejs tr,
#conversejs ul,
#conversejs video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline
}

#conversejs button,
#conversejs input[type=button],
#conversejs input[type=password],
#conversejs input[type=submit],
#conversejs input[type=text],
#conversejs textarea {
    font-size: 14px;
    padding: .25em;
    min-height: 0
}

#conversejs strong {
    font-weight: 700
}

#conversejs ol,
#conversejs ul {
    list-style: none
}

#conversejs li {
    height: 10px
}

#conversejs dl,
#conversejs ol,
#conversejs ul {
    font: inherit;
    margin: 0
}

#conversejs a,
#conversejs a:visited {
    text-decoration: none;
    color: #578ea9;
    text-shadow: none
}

#converse-embedded-chat,
#conversejs {
    bottom: 0;
    color: #777;
    direction: ltr;
    display: block;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    height: 35px;
    position: fixed;
    right: 0;
    width: auto;
    z-index: 1031;
	margin-right: 5em;
}

@media screen and (max-height:450px) {
    #converse-embedded-chat,
    #conversejs {
        width: 100%;
        width: 100vw
    }
}

@media screen and (max-width:480px) {
    #converse-embedded-chat,
    #conversejs {
        width: 100%;
        width: 100vw
    }
}

#converse-embedded-chat::-webkit-input-placeholder,
#conversejs::-webkit-input-placeholder {
    color: #a8aba1
}

#converse-embedded-chat::-moz-placeholder,
#conversejs::-moz-placeholder {
    color: #a8aba1
}

#converse-embedded-chat:-ms-input-placeholder,
#conversejs:-ms-input-placeholder {
    color: #a8aba1
}

#converse-embedded-chat:-moz-placeholder,
#conversejs:-moz-placeholder {
    color: #a8aba1
}

#converse-embedded-chat::placeholder,
#conversejs::placeholder {
    color: #a8aba1
}

#converse-embedded-chat .circle,
#conversejs .circle {
    border-radius: 50%
}

#converse-embedded-chat::selection,
#conversejs::selection {
    background-color: #dcf9f6
}

#converse-embedded-chat::-moz-selection,
#conversejs::-moz-selection {
    background-color: #dcf9f6
}

#converse-embedded-chat .no-text-select,
#conversejs .no-text-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

@keyframes fadein {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@-webkit-keyframes fadein {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

#converse-embedded-chat .visible,
#conversejs .visible {
    visibility: visible;
    opacity: 1;
    -webkit-animation-name: fadein;
    -moz-animation-name: fadein;
    animation-name: fadein;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 350ms;
    -moz-animation-duration: 350ms;
    animation-duration: 350ms;
    -webkit-animation-timing-function: ease;
    -moz-animation-timing-function: ease;
    animation-timing-function: ease
}

#converse-embedded-chat .hidden,
#conversejs .hidden {
    opacity: 0;
    display: none
}

#converse-embedded-chat .collapsed,
#conversejs .collapsed {
    height: 0;
    overflow: hidden
}

#converse-embedded-chat .locked,
#conversejs .locked {
    padding-right: 22px
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0)
    }
    to {
        -webkit-transform: rotate(359deg)
    }
}

@-moz-keyframes spin {
    from {
        -moz-transform: rotate(0)
    }
    to {
        -moz-transform: rotate(359deg)
    }
}

@keyframes spin {
    from {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0)
    }
    to {
        -webkit-transform: rotate(359deg);
        -moz-transform: rotate(359deg);
        -ms-transform: rotate(359deg);
        -o-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

#converse-embedded-chat .emojione,
#conversejs .emojione {
    height: 20px
}

#converse-embedded-chat .spinner,
#conversejs .spinner {
    -webkit-animation: spin 2s infinite, linear;
    -moz-animation: spin 2s infinite, linear;
    animation: spin 2s infinite, linear;
    display: block;
    text-align: center;
    margin: 1em
}

#converse-embedded-chat .spinner:before,
#conversejs .spinner:before {
    font-size: 24px;
    font-family: Converse-js!important;
    content: "\231b"
}

#converse-embedded-chat .left,
#conversejs .left {
    float: left
}

#converse-embedded-chat .right,
#conversejs .right {
    float: right
}

#converse-embedded-chat .centered,
#conversejs .centered {
    text-align: center;
    display: block;
    margin: 0;
    padding: 10% 0
}

#converse-embedded-chat .hor_centered,
#conversejs .hor_centered {
    text-align: center;
    display: block;
    margin: 0 auto;
    clear: both
}

#converse-embedded-chat .button-group,
#converse-embedded-chat .input-button-group,
#conversejs .button-group,
#conversejs .input-button-group {
    display: table
}

#converse-embedded-chat .button-group,
#conversejs .button-group {
    width: 100%
}

#converse-embedded-chat .input-button-group button,
#converse-embedded-chat .input-button-group input,
#conversejs .input-button-group button,
#conversejs .input-button-group input {
    display: table-cell
}

#converse-embedded-chat .error,
#conversejs .error {
    color: #a53214
}

#converse-embedded-chat .reg-feedback,
#conversejs .reg-feedback {
    font-size: 85%
}

#converse-embedded-chat #converse-login .conn-feedback,
#converse-embedded-chat .reg-feedback,
#conversejs #converse-login .conn-feedback,
#conversejs .reg-feedback {
    display: block;
    text-align: center;
    width: 100%
}

#converse-embedded-chat a.restore-chat,
#conversejs a.restore-chat {
    padding: 1px 0 1px 5px;
    color: #fff;
    line-height: 15px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

#converse-embedded-chat a.restore-chat:visited,
#conversejs a.restore-chat:visited {
    color: #fff
}

#converse-embedded-chat .activated,
#conversejs .activated {
    display: block!important
}

#converse-embedded-chat .pure-form-message,
#conversejs .pure-form-message {
    padding: .5em 0
}

#converse-embedded-chat .pure-button,
#conversejs .pure-button {
    border-radius: 4px
}

#converse-embedded-chat .button-primary,
#conversejs .button-primary {
    color: #fff;
    background-color: #3aa569
}

#converse-embedded-chat .button-secondary,
#conversejs .button-secondary {
    color: #fff;
    background-color: #387592
}

#converse-embedded-chat .button-cancel,
#conversejs .button-cancel {
    color: #fff;
    background-color: #777
}

#converse-embedded-chat form.pure-form.converse-form,
#conversejs form.pure-form.converse-form {
    background: #fff;
    padding: 1em
}

#converse-embedded-chat form.pure-form.converse-form legend,
#conversejs form.pure-form.converse-form legend {
    color: #777;
    font-size: 125%
}

#converse-embedded-chat form.pure-form.converse-form input[type=checkbox],
#conversejs form.pure-form.converse-form input[type=checkbox] {
    display: block
}

#converse-embedded-chat form.pure-form.converse-form input[type=number],
#converse-embedded-chat form.pure-form.converse-form input[type=password],
#converse-embedded-chat form.pure-form.converse-form input[type=text],
#converse-embedded-chat form.pure-form.converse-form select,
#conversejs form.pure-form.converse-form input[type=number],
#conversejs form.pure-form.converse-form input[type=password],
#conversejs form.pure-form.converse-form input[type=text],
#conversejs form.pure-form.converse-form select {
    min-width: 50%
}

#converse-embedded-chat form.pure-form.converse-form label,
#conversejs form.pure-form.converse-form label {
    margin: 1em 0;
    font-size: 16px
}

#converse-embedded-chat form.pure-form.converse-form input[type=button],
#converse-embedded-chat form.pure-form.converse-form input[type=number],
#converse-embedded-chat form.pure-form.converse-form input[type=password],
#converse-embedded-chat form.pure-form.converse-form input[type=submit],
#converse-embedded-chat form.pure-form.converse-form input[type=text],
#conversejs form.pure-form.converse-form input[type=button],
#conversejs form.pure-form.converse-form input[type=number],
#conversejs form.pure-form.converse-form input[type=password],
#conversejs form.pure-form.converse-form input[type=submit],
#conversejs form.pure-form.converse-form input[type=text] {
    padding: .5em
}

#converse-embedded-chat form.pure-form.converse-form input[type=button],
#converse-embedded-chat form.pure-form.converse-form input[type=submit],
#conversejs form.pure-form.converse-form input[type=button],
#conversejs form.pure-form.converse-form input[type=submit] {
    padding-left: 1em;
    padding-right: 1em;
    margin: .5em 0;
    border: none
}

#converse-embedded-chat form.pure-form.converse-form input.error,
#conversejs form.pure-form.converse-form input.error {
    border: 1px solid #a53214;
    color: #777
}

#converse-embedded-chat form.pure-form.converse-form .form-help,
#conversejs form.pure-form.converse-form .form-help {
    color: gray;
    font-size: 85%;
    padding-top: .5em
}

#converse-embedded-chat form.pure-form.converse-form .form-help:hover,
#conversejs form.pure-form.converse-form .form-help:hover {
    color: #777
}

#converse-embedded-chat form.pure-form.converse-centered-form,
#conversejs form.pure-form.converse-centered-form {
    text-align: center;
    width: 100%
}

#converse-embedded-chat .chat-textarea-chatbox-selected,
#conversejs .chat-textarea-chatbox-selected {
    border: 1px solid #578308;
    margin: 0
}

#converse-embedded-chat .chat-textarea-chatroom-selected,
#conversejs .chat-textarea-chatroom-selected {
    border: 2px solid #578ea9;
    margin: 0
}

#converse-embedded-chat .dropdown dt,
#converse-embedded-chat .dropdown ul,
#conversejs .dropdown dt,
#conversejs .dropdown ul {
    margin: 0;
    padding: 0
}

#converse-embedded-chat .flyout,
#conversejs .flyout {
    border-radius: 4px;
    bottom: 6px;
    display: block;
    position: absolute
}

@media screen and (max-height:450px) {
    #converse-embedded-chat .flyout,
    #conversejs .flyout {
        border-radius: 0
    }
}

@media screen and (max-width:480px) {
    #converse-embedded-chat .flyout,
    #conversejs .flyout {
        border-radius: 0
    }
}

@media screen and (max-height:450px) {
    #converse-embedded-chat .flyout,
    #conversejs .flyout {
        bottom: 0
    }
}

@media screen and (max-width:480px) {
    #converse-embedded-chat .flyout,
    #conversejs .flyout {
        bottom: 0
    }
}

#converse-embedded-chat .chat-head,
#conversejs .chat-head {
    color: #fff;
    font-size: 100%;
    height: 45px;
    margin: 0;
    padding: .5em;
    position: relative
}

#converse-embedded-chat .chat-head .avatar,
#conversejs .chat-head .avatar {
    margin-right: .5em;
    border-radius: 50%;
    float: left
}


    #converse-embedded-chat .chat-head.chat-head-chatbox,
    #conversejs .chat-head.chat-head-chatbox {
        background-color: #005caa
    }

#converse-embedded-chat .chat-head .user-custom-message,
#conversejs .chat-head .user-custom-message {
    color: #fff;
    font-size: 75%;
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    padding-top: .2em
}

#converse-embedded-chat .chatbox-btn,
#conversejs .chatbox-btn {
    border-radius: 25%;
    border: none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    float: right;
    font-size: 12px;
    margin: 0 .2em;
    padding: .3em;
    text-decoration: none
}

#converse-embedded-chat .chatbox-btn:active,
#conversejs .chatbox-btn:active {
    position: relative;
    top: 1px
}

#converse-embedded-chat .chatbox-btn.button-on,
#conversejs .chatbox-btn.button-on {
    background-color: #fff;
    color: #3aa569
}

#converse-embedded-chat .chatbox,
#conversejs .chatbox {
    display: block;
    text-align: left;
    float: right;
    height: 35px;
    margin: 0 .5em;
    width: 300px !important;
}

@media screen and (max-height:450px) {
    #converse-embedded-chat .chatbox,
    #conversejs .chatbox {
        margin: 0;
        width: 100%
    }
}

@media screen and (max-width:480px) {
    #converse-embedded-chat .chatbox,
    #conversejs .chatbox {
        margin: 0;
        width: 100%
    }
}

#converse-embedded-chat .chatbox .box-flyout,
#conversejs .chatbox .box-flyout {
    background-color: #fff;
    box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, .4);
    height: 450px;
    min-height: 225px;
    min-width: 300px;
    width: 300px !important;
    z-index: 1
}

@media screen and (max-height:450px) {
    #converse-embedded-chat .chatbox .box-flyout,
    #conversejs .chatbox .box-flyout {
        height: 400px;
        width: 100%;
        height: 100vh
    }
}

@media screen and (max-width:480px) {
    #converse-embedded-chat .chatbox .box-flyout,
    #conversejs .chatbox .box-flyout {
        height: 400px;
        width: 100%;
        height: 100vh
    }
}

#converse-embedded-chat .chatbox .chat-title,
#conversejs .chatbox .chat-title {
    color: #fff;
    display: block;
    line-height: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 7px;
}

#converse-embedded-chat .chatbox .chat-title a,
#conversejs .chatbox .chat-title a {
    color: #fff;
    width: 100%
}

#converse-embedded-chat .chatbox .chat-body,
#conversejs .chatbox .chat-body {
    background-color: #fff;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top: 0;
    height: 289px;
    height: -webkit-calc(100% - 55px);
    height: calc(100% - 55px)
}

@media screen and (max-height:450px) {
    #converse-embedded-chat .chatbox .chat-body,
    #conversejs .chatbox .chat-body {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0
    }
}

@media screen and (max-width:480px) {
    #converse-embedded-chat .chatbox .chat-body,
    #conversejs .chatbox .chat-body {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0
    }
}

#converse-embedded-chat .chatbox .chat-body p,
#conversejs .chatbox .chat-body p {
    color: #777;
    font-size: 14px;
    margin: 0;
    padding: 5px
}

#converse-embedded-chat .chatbox .chat-body .chat-info,
#conversejs .chatbox .chat-body .chat-info {
    line-height: 14px;
    color: #909090;
    font-size: 10px;
    margin: .3em
}

#converse-embedded-chat .chatbox .chat-body .chat-info.chat-event,
#conversejs .chatbox .chat-body .chat-info.chat-event {
    clear: left;
    font-style: italic
}

#converse-embedded-chat .chatbox .chat-body .chat-info.chat-error,
#conversejs .chatbox .chat-body .chat-info.chat-error {
    color: #d24e2b;
    font-weight: 700
}

#converse-embedded-chat .chatbox .chat-body .chat-info.chat-date,
#conversejs .chatbox .chat-body .chat-info.chat-date {
    display: inline-block;
    margin-top: 1em;
	width:100%;
	text-align:center;
    margin: .3em 0;
}

#converse-embedded-chat .chatbox .chat-body .chat-image,
#conversejs .chatbox .chat-body .chat-image {
    max-height: 24em;
    max-width: 100%
}

#converse-embedded-chat .chatbox .chat-body .chat-action,
#conversejs .chatbox .chat-body .chat-action {
    font-style: italic
}

#converse-embedded-chat .chatbox .chat-body .chat-message,
#conversejs .chatbox .chat-body .chat-message {
    overflow: auto
}

#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author,
#conversejs .chatbox .chat-body .chat-message .chat-msg-author {
    font-weight: 700;
    white-space: nowrap;
    float: left;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 10px;
}

#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-them,
#conversejs .chatbox .chat-body .chat-message .chat-msg-them {
    color: #909090;
	float: left;
}

#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-me,
#conversejs .chatbox .chat-body .chat-message .chat-msg-me {
    color: #909090;
	float:right;
}

    #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content,
    #conversejs .chatbox .chat-body .chat-message .chat-msg-content {
        max-width: 90%;
        word-wrap: break-word;
        white-space: pre-wrap;
    }
#conversejs .chat-msg-content-me {
	float:right;
	color: white !important;
	background-color: #01aef0;
	padding: 5px;
	position: relative;
	border-radius: .4em;
    text-align: left;
}
#conversejs .chat-msg-content-me:after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 0.438em solid transparent;
	border-left-color: #01aef0;
	border-right: 0;
	border-top: 0;
	margin-top: -0.219em;
	margin-right: -0.437em;
}
#conversejs .chat-msg-content-them {
	color: black;
	background-color: white;
	padding: 5px;
	float: left;
	position: relative;
	background: white;
	border-radius: .4em;
}
#conversejs .product-info-wrapper {
	margin-left: 100px;
}
#conversejs .icon-color {
	color: black;
}


#conversejs .chat-msg-content-them:after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 0.438em solid transparent;
	border-right-color: white;
	border-left: 0;
	border-top: 0;
	margin-top: -0.219em;
	margin-left: -0.437em;
}




#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content .emojione,
#conversejs .chatbox .chat-body .chat-message .chat-msg-content .emojione {
    margin-bottom: -6px
}

#converse-embedded-chat .chatbox .chat-body .delayed .chat-msg-them,
#conversejs .chatbox .chat-body .delayed .chat-msg-them {
    color: #909090
}

#converse-embedded-chat .chatbox .chat-body .delayed .chat-msg-me,
#conversejs .chatbox .chat-body .delayed .chat-msg-me {
    color: #909090
}

#converse-embedded-chat .chatbox .new-msgs-indicator,
#conversejs .chatbox .new-msgs-indicator {
    position: absolute;
    width: 100%;
    cursor: pointer;
    background-color: #3aa569;
    color: #fcfdfd;
    padding: .5em;
    font-size: .9em;
    text-align: center;
    z-index: 20;
    white-space: nowrap
}

#converse-embedded-chat .chatbox .chat-content,
#conversejs .chatbox .chat-content {
    position: relative;
    padding-top: .5em;
    padding-bottom: .5em;
    font-size: 13px;
    color: #777;
    overflow-y: auto;
    overflow-x: hidden;
    border: 0;
    background-color: #f0f0f0;
    line-height: 1.3em;
    height: 206px;
    height: calc(100% - 96px)
}

#converse-embedded-chat .chatbox .chat-content-sendbutton,
#conversejs .chatbox .chat-content-sendbutton {
    height: calc(100% - 90px)
}

#converse-embedded-chat .chatbox .dropdown,
#conversejs .chatbox .dropdown {
    background-color: #fcfdfd
}

#converse-embedded-chat .chatbox .dropdown dd,
#conversejs .chatbox .dropdown dd {
    margin: 0;
    padding: 0;
    position: relative
}

#converse-embedded-chat .chatbox form.sendXMPPMessage,
#conversejs .chatbox form.sendXMPPMessage {
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    background-clip: padding-box;
    border-top: 1px solid #bbb;
    border: 0;
    margin: 0;
    padding: 0;
    position: relative;
    height: 65px;
    min-width: 300px
}

@media screen and (max-height:450px) {
    #converse-embedded-chat .chatbox form.sendXMPPMessage,
    #conversejs .chatbox form.sendXMPPMessage {
        width: 100%
    }
}

@media screen and (max-width:480px) {
    #converse-embedded-chat .chatbox form.sendXMPPMessage,
    #conversejs .chatbox form.sendXMPPMessage {
        width: 100%
    }
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea,
#conversejs .chatbox form.sendXMPPMessage .chat-textarea {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border: 0;
    height: 70px;
    padding: .5em;
    width: 100%;
    resize: none
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .send-button,
#conversejs .chatbox form.sendXMPPMessage .send-button {
    position: absolute;
    left: 3px;
    width: -webkit-calc(100% - 6px);
    width: calc(100% - 6px);
    background-color: #005caa;
    color: #fff;
    font-size: 80%;
    height: 27px;
    bottom: -30px
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar {
    box-sizing: border-box;
    margin: 0;
    padding: 5px;
    height: 25px;
    display: block;
    background-color: #e7fbf0
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar a {
    font-size: 14px;
    color: #777;
    text-decoration: none;
    text-shadow: none
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text {
    font-size: 12px;
    padding-right: 3px
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a {
    color: #777
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a {
    color: #578ea9
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified a {
    color: #cf5300
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .private,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .private a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .private,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .private a {
    color: #4b7003
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-clear,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-occupants,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-clear,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-occupants,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr {
    float: right
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li {
    cursor: pointer;
    display: inline-block;
    list-style: none;
    margin-top: 1px;
    padding: 0 3px 0 3px
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li:hover {
    cursor: pointer
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu {
    background-color: #fff;
    bottom: 100%;
    box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, .4);
    font-size: 12px;
    margin: 0;
    position: absolute;
    right: 0
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a {
    color: #578ea9
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
    height: 100px;
    overflow: scroll;
    padding: .5em
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
    box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, .4)
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
    overflow: hidden;
    left: 0
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked {
    background-color: #dcf9f6
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li {
    height: 30px;
    padding: 4px;
    z-index: 98
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a {
    font-size: 20px
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
    margin-left: 0;
    cursor: pointer;
    list-style: none;
    position: relative
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji {
    padding: .3em
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover {
    background-color: #dcf9f6
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
    color: #8f2831
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
    color: #777
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley {
    padding-left: 5px
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover {
    background-color: #dcf9f6
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul {
    z-index: 99
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li {
    display: block;
    padding: 7px
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover {
    background-color: #dcf9f6
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li a {
    display: block
}

#converse-embedded-chat .chatbox .dragresize,
#conversejs .chatbox .dragresize {
    background: 0 0;
    border: 0;
    margin: 0;
    position: absolute;
    top: 0;
    z-index: 20
}

#converse-embedded-chat .chatbox .dragresize-top,
#conversejs .chatbox .dragresize-top {
    cursor: n-resize;
    height: 5px;
    width: 100%
}

#converse-embedded-chat .chatbox .dragresize-left,
#conversejs .chatbox .dragresize-left {
    cursor: w-resize;
    width: 5px;
    height: 100%;
    left: 0
}

#converse-embedded-chat .chatbox .dragresize-topleft,
#conversejs .chatbox .dragresize-topleft {
    cursor: nw-resize;
    width: 15px;
    height: 15px;
    top: 0;
    left: 0
}

#converse-embedded-chat .chat-head,
#conversejs .chat-head {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px
}

@media screen and (max-height:450px) {
    #converse-embedded-chat .chat-head,
    #conversejs .chat-head {
        border-top-left-radius: 0;
        border-top-right-radius: 0
    }
}

@media screen and (max-width:480px) {
    #converse-embedded-chat .chat-head,
    #conversejs .chat-head {
        border-top-left-radius: 0;
        border-top-right-radius: 0
    }
}

#converse-embedded-chat .chatbox .chat-body .chat-message,
#conversejs .chatbox .chat-body .chat-message {
    /*margin-top: .3em;
	margin-bottom: .3em;*/
    line-height: 15px
}
#conversejs .product-wrapper{
	background-color: white; 
	height: 100px;
	padding: .5em;
}
#conversejs .product-img{
	width:90px;
	height:90px;
}
#conversejs .product-price{
	color: red;
}

#conversejs .chat-message {
    padding-top: 5px;
    padding-bottom: 5px;
}
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author,
#conversejs .chatbox .chat-body .chat-message .chat-msg-author {
    line-height: 10px;
	margin-left: .8em;
	margin-right: .8em;
    font-size: 10px;
}

#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content,
#conversejs .chatbox .chat-body .chat-message .chat-msg-content {
    line-height: 20px;
    margin-left: .8em;
    margin-right: .8em;
    font-family: 'Roboto';
    color: #838383;
    
}

#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content .emojione,
#conversejs .chatbox .chat-body .chat-message .chat-msg-content .emojione {
    margin-bottom: -5px
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
    width: 100%
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .emoji-category,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .emoji-category {
    float: left
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li {
    padding: 2px
}

#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul li {
    padding: 2px
}

#conversejs #controlbox {
    margin-right: 1em
}

#conversejs #controlbox .pure-form.converse-form {
    padding: 0
}

@media screen and (max-width:480px) {
    #conversejs #controlbox {
        margin: 0
    }
}

@media screen and (max-height:450px) {
    #conversejs #controlbox {
        margin: 0
    }
}

#conversejs #controlbox .controlbox-head {
    background-color: #005caa;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    color: #fff;
    height: 45px;
    margin: 0;
    padding: 6px 6px 6px 0
}

@media screen and (max-height:450px) {
    #conversejs #controlbox .controlbox-head {
        border-top-left-radius: 0;
        border-top-right-radius: 0
    }
}

@media screen and (max-width:480px) {
    #conversejs #controlbox .controlbox-head {
        border-top-left-radius: 0;
        border-top-right-radius: 0
    }
}

#conversejs #controlbox form.search-xmpp-contact {
    margin: 0;
    padding-left: 5px;
    padding: 0 0 5px 5px
}

#conversejs #controlbox form.search-xmpp-contact input {
    width: 8em
}

#conversejs #controlbox .msgs-indicator {
    border-radius: 3px;
    background-color: #e77051;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    padding: 0 4px;
    text-shadow: none
}

#conversejs #controlbox a.subscribe-to-user {
    padding-left: 2em;
    font-weight: 700
}

#conversejs #controlbox #converse-register {
    background: #fff
}

#conversejs #controlbox #converse-register .title {
    font-weight: 700
}

#conversejs #controlbox #converse-register .info {
    font-style: italic;
    color: green;
    font-size: 85%;
    margin: 5px 0
}

#conversejs #controlbox #converse-register .form-errors {
    color: red;
    display: none
}

#conversejs #controlbox #converse-register .provider-title {
    font-size: 20px;
    margin: 0
}

#conversejs #controlbox #converse-register .provider-score {
    width: 178px;
    margin-bottom: 8px
}

#conversejs #controlbox #converse-register .instructions,
#conversejs #controlbox #converse-register .title,
#conversejs #controlbox #converse-register label {
    margin: .5em 0 0 0
}

#conversejs #controlbox #converse-register .form-help .url {
    font-weight: 700;
    color: #578ea9
}

#conversejs #controlbox #converse-register .input-group {
    display: table;
    margin: auto;
    width: 100%
}

#conversejs #controlbox #converse-register .input-group span {
    overflow-x: hidden;
    text-overflow: ellipsis;
    max-width: 110px
}

#conversejs #controlbox #converse-register .input-group input[name=username],
#conversejs #controlbox #converse-register .input-group span {
    display: table-cell;
    text-align: left
}

#conversejs #controlbox #converse-register .instructions {
    color: gray;
    font-size: 85%
}

#conversejs #controlbox #converse-register .instructions:hover {
    color: #777
}

#conversejs #controlbox #converse-login,
#conversejs #controlbox #converse-register {
    margin-top: 2em
}

#conversejs #controlbox #converse-login .login-anon,
#conversejs #controlbox #converse-register .login-anon {
    height: auto;
    white-space: normal
}

#conversejs #controlbox #converse-login .save-submit,
#conversejs #controlbox #converse-register .save-submit {
    color: #3aa569
}

#conversejs #controlbox #converse-login input,
#conversejs #controlbox #converse-register input {
    width: 100%;
    margin: .5em 0
}

#conversejs #controlbox #users .add-converse-contact {
    margin: 0 0 .75em 0
}

#conversejs #controlbox #chatrooms form.add-chatroom {
    margin: 0;
    padding: 0
}

#conversejs #controlbox #chatrooms form.add-chatroom input[type=button],
#conversejs #controlbox #chatrooms form.add-chatroom input[type=submit],
#conversejs #controlbox #chatrooms form.add-chatroom input[type=text] {
    width: 100%
}

#conversejs #controlbox #chatrooms .rooms-list-container {
    text-align: left;
    margin: 0
}

#conversejs #controlbox #chatrooms .rooms-list-container .rooms-toggle {
    display: block;
    color: #777;
    margin-top: 1em
}

#conversejs #controlbox #chatrooms .rooms-list-container .rooms-toggle:hover {
    color: #585b51
}

#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list {
    margin: .5em 0;
    text-align: left
}

#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dt {
    border: none;
    color: #777;
    font-weight: 400;
    padding: 0;
    padding-bottom: .5em;
    text-shadow: 0 1px 0 #fafafa
}

#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom {
    border: none;
    clear: both;
    color: #777;
    display: block;
    overflow: hidden;
    padding: .3em 0;
    text-shadow: 0 1px 0 #fafafa;
    word-wrap: break-word
}

#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom a:hover,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom a:hover {
    color: #206485
}

#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom.unread-msgs .available-room,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom.unread-msgs .open-room,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom.unread-msgs .available-room,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom.unread-msgs .open-room {
    max-width: 55%;
    width: auto;
    font-weight: 700
}

#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom a.room-info:before,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom a.room-info:before {
    font-size: 15px
}

#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom a.open-room,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom a.open-room {
    width: 68%;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: .5em
}

#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom a.available-room,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom a.available-room {
    width: 85%
}

#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .add-bookmark,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .remove-bookmark,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .add-bookmark,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .remove-bookmark {
    color: #a8aba1
}

#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .add-bookmark.button-on,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .remove-bookmark.button-on,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .add-bookmark.button-on,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .remove-bookmark.button-on {
    color: #578ea9
}

#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .add-bookmark.button-on:hover,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .remove-bookmark.button-on:hover,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .add-bookmark.button-on:hover,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .remove-bookmark.button-on:hover {
    color: #206485
}

#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .room-info,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .room-info {
    font-size: 12px;
    font-style: normal;
    font-weight: 400
}

#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom li.room-info,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom li.room-info {
    display: block;
    margin-left: 5px
}

#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom p.room-info,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom p.room-info {
    line-height: 16px;
    margin: 0;
    display: block;
    white-space: normal
}

#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom div.room-info,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom div.room-info {
    padding: .3em 0;
    clear: left;
    width: 100%
}

#conversejs #controlbox .dropdown a {
    width: 143px;
    display: inline-block
}

#conversejs #controlbox .dropdown li {
    list-style: none;
    padding-left: 0
}

#conversejs #controlbox .dropdown dd ul {
    padding: 0;
    list-style: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 21;
    background-color: #fcfdfd
}

#conversejs #controlbox .dropdown dd ul li:hover {
    background-color: #dcf9f6
}

#conversejs #controlbox .dropdown dd.search-xmpp {
    height: 0
}

#conversejs #controlbox .dropdown dd.search-xmpp .contact-form-container {
    position: absolute;
    z-index: 22
}

#conversejs #controlbox .dropdown dd.search-xmpp .contact-form-container form {
    box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, .4);
    background-color: #fff
}

#conversejs #controlbox .dropdown dd.search-xmpp li:hover {
    background-color: #fcfdfd
}

#conversejs #controlbox .dropdown dt a span {
    cursor: pointer;
    display: block;
    padding: 4px 7px 0 5px
}

#conversejs #controlbox #select-xmpp-status {
    display: none;
    float: right;
    margin-right: .5em
}

#conversejs #controlbox #controlbox-tabs {
    text-align: center;
    display: inline;
    overflow: hidden;
    list-style-type: none
}

#conversejs #controlbox #controlbox-tabs li {
    float: left;
    list-style: none;
    padding-left: 1em;
    text-shadow: #fff 0 1px 0;
    width: 90%;
    color: #FFF;
    font-size: 20px;
}

    #conversejs #controlbox #controlbox-tabs li a {
        /*background-color: #fff;*/
        border-bottom: 1px solid #ccc;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        box-shadow: inset 2px -2px 20px rgba(0, 0, 0, .3);
        color: #777;
        display: block;
        font-size: 12px;
        height: 54px;
        line-height: 40px;
        margin: 0;
        text-align: center;
        text-decoration: none
    }

#conversejs #controlbox #controlbox-tabs li a.contacts-tab .msgs-indicator {
    background-color: #3aa569
}

#conversejs #controlbox #controlbox-tabs li a.rooms-tab .msgs-indicator {
    background-color: #e77051
}

#conversejs #controlbox #controlbox-tabs li a .msgs-indicator {
    border: solid #fff 2px;
    opacity: .8;
    border-top-right-radius: 5px;
    float: right
}

#conversejs #controlbox #controlbox-tabs li a:hover {
    color: #777
}

#conversejs #controlbox #controlbox-tabs li a:hover .msgs-indicator {
    opacity: 1
}

#conversejs #controlbox #controlbox-tabs li a.current,
#conversejs #controlbox #controlbox-tabs li a.current:hover {
    box-shadow: none;
    border-bottom: 0;
    height: 55px;
    cursor: default;
    color: #fff;
    font-size: 17px;
}

#conversejs #controlbox .fancy-dropdown {
    border: 1px solid #b1bfc4;
    height: 25px;
    border-radius: 5px;
    text-align: left
}

#conversejs #controlbox .fancy-dropdown .choose-xmpp-status,
#conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form {
    line-height: 25px;
    text-shadow: 0 1px 0 #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block
}

#conversejs #controlbox .fancy-dropdown .choose-xmpp-status:hover,
#conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form:hover {
    color: #206485
}

#conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form {
    padding: 0 .5em;
    width: 100%
}

#conversejs #controlbox .fancy-dropdown.no-border {
    border: 0
}

#conversejs #controlbox #fancy-xmpp-status-select .xmpp-status {
    padding: 0 .5em
}

#conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message {
    line-height: 25px;
    float: right;
    clear: right;
    width: 12px;
    color: #578ea9
}

#conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message:hover {
    color: #206485
}

#conversejs #controlbox #fancy-xmpp-status-select fieldset {
    padding: 0;
    margin-top: -1px
}

#conversejs #controlbox #fancy-xmpp-status-select input {
    height: 26px;
    width: -webkit-calc(100% - 40px);
    width: calc(100% - 40px);
    padding: 0 0 0 .5em
}

#conversejs #controlbox #fancy-xmpp-status-select input[type=submit] {
    height: 26px;
    width: 40px;
    padding: 1px;
    float: right
}

#conversejs #controlbox .controlbox-pane {
    padding: 1em;
    background-color: #fff;
    border: 0;
    font-size: 14px;
    position: absolute;
    text-align: center;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden
}

#conversejs #controlbox .controlbox-pane label {
    font-size: 14px;
    font-weight: 700;
    height: auto;
    margin: 4px
}

#conversejs #controlbox .controlbox-pane dd {
    margin-left: 0;
    margin-bottom: 0
}

#conversejs #controlbox .controlbox-pane dd.odd {
    background-color: #dceac5
}

#conversejs #controlbox #users {
    overflow-y: hidden
}

#conversejs #controlbox .add-xmpp-contact {
    padding: 1em .5em
}

#conversejs #controlbox .add-xmpp-contact input {
    margin: 0 0 1rem;
    width: 100%
}

#conversejs #controlbox .add-xmpp-contact button {
    width: 100%
}

#conversejs #controlbox .xmpp-status-menu {
    text-align: left;
    box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, .4)
}

#conversejs #controlbox .xmpp-status-menu li {
    padding: 2px
}

#conversejs #controlbox .xmpp-status-menu li a {
    width: 100%;
    padding: .3em
}

#conversejs #controlbox .xmpp-status-menu li a.logout,
#conversejs #controlbox .xmpp-status-menu li a.logout span {
    color: #d24e2b
}

#conversejs #controlbox .set-xmpp-status {
    background: 0 0;
    margin: 1em 0 .5em 0
}

#conversejs #controlbox .set-xmpp-status .dropdown dd ul {
    z-index: 22
}


#conversejs .toggle-controlbox {
    background-color: #005caa;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #0a0a0a;
    float: right;
    height: 100%;
    margin: 0 .5em;
    padding: 8px 25px 3px 15px;
    font-size: 17px;
    background-image: url(https://s.76.my/res/img/chat/chat-toggle-controlbox.png);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position-x: 15px;
    background-position-y: 10px;
}

#conversejs .toggle-controlbox span {
    color: #fff
}

#conversejs #controlbox .controlbox-pane {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    height: 289px;
    height: -webkit-calc(100% - 55px);
    height: calc(100% - 55px)
}

#conversejs #controlbox .available-chatroom.unread-msgs .msgs-indicator {
    border-radius: 10%;
    opacity: 1
}

#conversejs #converse-roster {
    text-align: left;
    width: 100%;
    position: relative;
    margin: 0;
    height: 194px;
    height: 100%;
    overflow: hidden;
    padding: 0;
}

#conversejs #converse-roster.no-contact-requests {
    height: calc(100% - 25px - 20px)
}

#conversejs #converse-roster #online-count {
    display: none
}

#conversejs #converse-roster .search-xmpp ul li.chat-info {
    padding-left: 10px
}

#conversejs #converse-roster .roster-filter-form {
    margin: 0 0 .5em 0;
    width: 100%
}

#conversejs #converse-roster .roster-filter-form .roster-filter {
    float: left;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg==) no-repeat right -20px center;
    border: 1px solid #999;
    font-size: 14px;
    height: 25px;
    margin: 0;
    padding: 0;
    padding-left: .4em;
    width: 53%
}

#conversejs #converse-roster .roster-filter-form .roster-filter.x {
    background-position: right 3px center
}

#conversejs #converse-roster .roster-filter-form .roster-filter.onX {
    cursor: pointer
}

#conversejs #converse-roster .roster-filter-form .roster-filter-state {
    display: none
}

#conversejs #converse-roster .roster-filter-form .state-type {
    float: left;
    border: 1px solid #999;
    font-size: calc(14px - 2px);
    height: 25px;
    margin: 0;
    padding: 0;
    padding-left: .4em;
    width: 53%;
    display: none
}

#conversejs #converse-roster .roster-filter-form .state-type-state {
    display: inline-block
}

#conversejs #converse-roster .roster-filter-form .filter-type {
    display: table-cell;
    float: right;
    font-size: calc(14px - 2px);
    height: 25px;
    padding: 0;
    width: 47%;
    border-radius: 0;
    border: 1px solid
}

#conversejs #converse-roster .roster-contacts {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    display: none
}

#conversejs #converse-roster .roster-contacts dt.roster-group {
    border: none;
    color: #777;
    display: none !important;
    font-weight: 400;
    margin: 1em 0 .5em 0;
    text-shadow: 0 1px 0 #fafafa
}

#conversejs #converse-roster .roster-contacts dt.roster-group .group-toggle {
    color: #777;
    display: none;
    width: 100%
}

#conversejs #converse-roster .roster-contacts dt.roster-group .group-toggle:hover {
    color: #585b51
}

#conversejs #converse-roster .roster-contacts dd {
    border: none;
    clear: both;
    color: #777;
    display: block;
    height: 24px;
    overflow-y: hidden;
    text-shadow: 0 1px 0 #fafafa;
    line-height: 14px;
    width: 100%;
    height: 40px;
    margin: 0;
    padding: .5em 0 0 0
}

#conversejs #converse-roster .roster-contacts dd a:hover {
    color: #206485
}

#conversejs #converse-roster .roster-contacts dd .open-chat {
    margin: auto;
    padding: 0;
    width: 85%;
    padding-top: 5px;
}

#conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs {
    font-weight: 700
}

#conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .contact-name {
    width: 70%
}

#conversejs #converse-roster .roster-contacts dd .open-chat .msgs-indicator {
    background-color: #3aa569;
    opacity: 1;
    border-radius: 10%;
    padding: 0 .2em;
    font-size: 12px
}

#conversejs #converse-roster .roster-contacts dd .open-chat .contact-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0;
    margin: 0;
    max-width: 80%;
    float: none;
    height: 60px
}

#conversejs #converse-roster .roster-contacts dd .open-chat .contact-name.unread-msgs {
    max-width: 60%
}

#conversejs #converse-roster .roster-contacts dd .open-chat .avatar {
    float: left;
    display: inline-block;
    height: 60px
}

    #conversejs #converse-roster .roster-contacts dd .open-chat .avatar.avatar-online, #conversejs #converse-roster .roster-contacts dd .open-chat .avatar.avatar-away,
    #conversejs #converse-roster .roster-contacts dd .open-chat .avatar.avatar-xa, #conversejs #converse-roster .roster-contacts dd .open-chat .avatar.avatar-dnd,
    #conversejs #converse-roster .roster-contacts dd .open-chat .avatar.avatar-chat {
        background: url(https://s.76.my/res/img/chat/Lelong-ico-color.png);
        background-size: 20px 20px;
        background-repeat: no-repeat;
        width: 20px;
        margin-top: -2px;
        margin-right: 5px;
    }

    #conversejs #converse-roster .roster-contacts dd .open-chat .avatar.avatar-offline {
        background: url(https://s.76.my/res/img/chat/Lelong-ico-grey.png);
        background-size: 20px 20px;
        background-repeat: no-repeat;
        width: 20px;
        margin-top: -2px;
        margin-right: 5px;
    }

#conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .open-chat {
    max-width: 70%
}

#conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .open-chat .req-contact-name {
    width: 100%
}

#conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .req-contact-name {
    line-height: 16px;
    width: 69%;
    padding: 0
}

#conversejs #converse-roster .roster-contacts dd.current-xmpp-contact span {
    font-size: 14px;
    float: left;
    margin-right: .5em
}

#conversejs #converse-roster .roster-contacts dd.odd {
    background-color: #dceac5
}

#conversejs #converse-roster .roster-contacts dd a,
#conversejs #converse-roster .roster-contacts dd span {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

#conversejs #converse-roster .roster-contacts dd span {
    padding: 0;
    height: 100%
}

#conversejs #converse-roster .roster-contacts dd a.decline-xmpp-request {
    margin-left: 5px
}

#conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact {
    font-size: 10px;
    float: right;
    margin: 0;
    padding: 0;
	padding-right: .8em;
    color: #a8aba1;
	margin-right: 2em;
    padding-top: 5px;
}

#conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact:hover {
    color: #818479;
	padding-right: .8em;
	margin-right:2em;
}

#conversejs #converse-roster span.pending-contact-name {
    line-height: 16px;
    width: 100%
}

#converse-embedded-chat .new-chatroom-nick,
#conversejs .new-chatroom-nick {
    margin: 1em auto
}

#converse-embedded-chat .add-chatroom input[type=button],
#converse-embedded-chat .add-chatroom input[type=submit],
#conversejs .add-chatroom input[type=button],
#conversejs .add-chatroom input[type=submit] {
    margin: .3em 0
}

#converse-embedded-chat .chat-head-chatroom,
#conversejs .chat-head-chatroom {
    background-color: #e77051
}

#converse-embedded-chat .chat-head-chatroom .chatbox-btn.button-on,
#conversejs .chat-head-chatroom .chatbox-btn.button-on {
    background-color: #fff;
    color: #e77051
}

#converse-embedded-chat .chat-head-chatroom .chat-title,
#conversejs .chat-head-chatroom .chat-title {
    color: #ff977c
}

#converse-embedded-chat .chat-head-chatroom .chat-title .chatroom-name,
#conversejs .chat-head-chatroom .chat-title .chatroom-name {
    color: #fff
}

#converse-embedded-chat .chat-head-chatroom .chat-title .chatroom-jid,
#conversejs .chat-head-chatroom .chat-title .chatroom-jid {
    font-size: 12px
}

#converse-embedded-chat .chat-head-chatroom .chat-title .chatroom-description,
#conversejs .chat-head-chatroom .chat-title .chatroom-description {
    color: #fff;
    font-size: 80%;
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: .3em 0
}

#converse-embedded-chat .chatroom,
#conversejs .chatroom {
    width: 300px
}

@media screen and (max-height:450px) {
    #converse-embedded-chat .chatroom,
    #conversejs .chatroom {
        width: 100%
    }
}

@media screen and (max-width:480px) {
    #converse-embedded-chat .chatroom,
    #conversejs .chatroom {
        width: 100%
    }
}

#converse-embedded-chat .chatroom .box-flyout,
#conversejs .chatroom .box-flyout {
    min-width: 300px;
    width: 300px
}

@media screen and (max-height:450px) {
    #converse-embedded-chat .chatroom .box-flyout,
    #conversejs .chatroom .box-flyout {
        height: 400px;
        width: 100%;
        height: 100vh
    }
}

@media screen and (max-width:480px) {
    #converse-embedded-chat .chatroom .box-flyout,
    #conversejs .chatroom .box-flyout {
        height: 400px;
        width: 100%;
        height: 100vh
    }
}

#converse-embedded-chat .chatroom .box-flyout .chatroom-body,
#conversejs .chatroom .box-flyout .chatroom-body {
    height: 289px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    height: -webkit-calc(100% - 55px);
    height: calc(100% - 55px);
    background-color: #fff;
    border-top: 0;
    width: 100%
}

#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-info,
#conversejs .chatroom .box-flyout .chatroom-body .chat-info {
    color: #e77051
}

#converse-embedded-chat .chatroom .box-flyout .chatroom-body .mentioned,
#conversejs .chatroom .box-flyout .chatroom-body .mentioned {
    font-weight: 700
}

#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them,
#conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them {
    color: #3aa569
}

#converse-embedded-chat .chatroom .box-flyout .chatroom-body .disconnect-msg,
#conversejs .chatroom .box-flyout .chatroom-body .disconnect-msg {
    padding: 2em 2em 0 2em
}

#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area {
    word-wrap: break-word;
    height: 100%;
    width: 70%;
    float: left;
    min-width: 400px
}

#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator {
    background-color: #e77051;
    max-width: 70%
}

#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .chat-content,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
    padding: 0 .5em 0 .5em
}

#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area.full,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area.full {
    min-width: 100%
}

#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator {
    min-width: 100%
}

#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants,
#conversejs .chatroom .box-flyout .chatroom-body .occupants {
    overflow-x: hidden;
    overflow-y: hidden;
    float: right;
    vertical-align: top;
    background-color: #fff;
    border-left: 1px solid #777;
    border-bottom-right-radius: 4px;
    width: 30%;
    height: 100%;
    padding: .5em
}

#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .occupants-heading,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
    padding: .3em 0;
    font-weight: 700
}

#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
    position: absolute;
    bottom: .5em;
    width: 25%;
    width: -webkit-calc(30% - 1em);
    width: calc(30% - 1em)
}

#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul {
    padding: 0
}

#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li {
    padding: .5em
}

#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul {
    padding: .3em 0;
    overflow-x: hidden;
    overflow-y: auto;
    list-style: none
}

#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list {
    overflow-y: auto;
    height: -webkit-calc(100% - 220px);
    height: calc(100% - 220px)
}

#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.features-list,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list {
    padding-top: 0
}

#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li {
    cursor: default;
    display: block;
    font-size: 12px;
    overflow: hidden;
    padding: .2em .5em .2em 0;
    text-overflow: ellipsis;
    white-space: nowrap
}

#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li [class*=" icon-"],
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li [class^=icon-],
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li [class*=" icon-"],
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li [class^=icon-] {
    padding-right: .5em
}

#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.feature,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.feature {
    font-size: 10px
}

#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant {
    cursor: pointer
}

#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status {
    display: inline-block;
    margin-right: .5em;
    width: .5em;
    height: .5em
}

#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-chat,
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-online,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-chat,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-online {
    background-color: #1a9707
}

#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-dnd,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-dnd {
    background-color: red
}

#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-away,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-away {
    background-color: #ff8c00
}

#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-xa,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-xa {
    background-color: orange
}

#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.moderator,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.moderator {
    color: #d24e2b
}

#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container,
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container {
    background-color: #fff;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border: 0;
    color: #777;
    font-size: 14px;
    height: 289px;
    width: 100%;
    height: -webkit-calc(100% - 55px);
    height: calc(100% - 55px);
    overflow-y: auto;
    position: absolute
}

#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .validation-message,
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .validation-message {
    font-size: 90%;
    color: #a53214
}

#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text],
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text],
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label {
    display: block
}

#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit],
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit] {
    margin: 0 .5em
}

#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary,
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary {
    background-color: #e77051
}

#converse-embedded-chat .chatroom form.sendXMPPMessage .chat-toolbar,
#conversejs .chatroom form.sendXMPPMessage .chat-toolbar {
    background-color: #ffece7
}

#converse-embedded-chat .chatroom form.sendXMPPMessage .chat-textarea,
#conversejs .chatroom form.sendXMPPMessage .chat-textarea {
    border-bottom-right-radius: 0
}

#converse-embedded-chat .chatroom form.sendXMPPMessage .send-button,
#conversejs .chatroom form.sendXMPPMessage .send-button {
    background-color: #e77051
}

#converse-embedded-chat .chatroom .room-invite .invited-contact,
#conversejs .chatroom .room-invite .invited-contact {
    margin: -1px 0 0 -1px;
    width: 100%;
    border: 1px solid #999
}

#conversejs .chatbox.headlines .chat-head.chat-head-chatbox {
    background-color: #005caa
}

#conversejs .chatbox.headlines .chat-body {
    background-color: #e7a151;
    border-radius: 4px
}

#conversejs .chatbox.headlines .chat-body .chat-message span.chat-msg-them {
    color: #d2842b
}

#conversejs .chatbox.headlines .chat-content {
    height: 100%;
    border-radius: 4px
}

#conversejs #minimized-chats {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    color: #fff;
    float: right;
    font-weight: 700;
    height: 100%;
    margin: 0 .5em;
    padding: 0;
    width: 130px
}

#conversejs #minimized-chats #toggle-minimized-chats {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background-color: #578ea9;
    color: #fff;
    position: relative;
    padding: 10px 0 0 0;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center
}

#conversejs #minimized-chats .minimized-chats-flyout {
    height: auto;
    bottom: 35px
}

#conversejs #minimized-chats .minimized-chats-flyout .chat-head {
    padding: .3em;
    border-radius: 4px;
    width: 130px;
    height: 35px;
    margin-bottom: .2em;
    box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, .4)
}

#conversejs #minimized-chats .minimized-chats-flyout.minimized {
    height: auto
}

#conversejs #minimized-chats .chat-head-message-count,
#conversejs #minimized-chats .unread-message-count {
    font-weight: 700;
    background-color: #fff;
    border: 1px solid;
    text-shadow: 1px 1px 0 #fafafa;
    color: #d24e2b;
    border-radius: 5px;
    padding: 2px 4px;
    font-size: 16px;
    text-align: center;
    position: absolute;
    right: 116px;
    bottom: 10px
}

#conversejs #minimized-chats .chat-head-message-count-hidden,
#conversejs #minimized-chats .unread-message-count-hidden {
    display: none
}

#converse-embedded-chat [hidden],
#conversejs [hidden] {
    display: none
}

#converse-embedded-chat .visually-hidden,
#conversejs .visually-hidden {
    position: absolute;
    clip: rect(0, 0, 0, 0)
}

#converse-embedded-chat div.awesomplete,
#conversejs div.awesomplete {
    display: inline-block;
    position: relative
}

#converse-embedded-chat div.awesomplete>input,
#conversejs div.awesomplete>input {
    display: block
}

#converse-embedded-chat div.awesomplete>ul,
#conversejs div.awesomplete>ul {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
    min-width: 100%;
    box-sizing: border-box;
    list-style: none;
    padding: 0;
    border-radius: .3em;
    margin: .2em 0 0;
    background: rgba(255, 255, 255, .9);
    background: linear-gradient(to bottom right, #fff, rgba(255, 255, 255, .8));
    border: 1px solid rgba(0, 0, 0, .3);
    box-shadow: .05em .2em .6em rgba(0, 0, 0, .2);
    text-shadow: none
}

#converse-embedded-chat div.awesomplete>ul:empty,
#converse-embedded-chat div.awesomplete>ul[hidden],
#conversejs div.awesomplete>ul:empty,
#conversejs div.awesomplete>ul[hidden] {
    display: none
}

@supports (transform:scale(0)) {
    #converse-embedded-chat div.awesomplete>ul,
    #conversejs div.awesomplete>ul {
        transition: .3s cubic-bezier(.4, .2, .5, 1.4);
        transform-origin: 1.43em -.43em
    }
    #converse-embedded-chat div.awesomplete>ul:empty,
    #converse-embedded-chat div.awesomplete>ul[hidden],
    #conversejs div.awesomplete>ul:empty,
    #conversejs div.awesomplete>ul[hidden] {
        opacity: 0;
        transform: scale(0);
        display: block;
        transition-timing-function: ease
    }
}

#converse-embedded-chat div.awesomplete>ul:before,
#conversejs div.awesomplete>ul:before {
    content: "";
    position: absolute;
    top: -.43em;
    left: 1em;
    width: 0;
    height: 0;
    background: #fff;
    border: inherit;
    border-right: 0;
    border-bottom: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

#converse-embedded-chat div.awesomplete>ul>li,
#conversejs div.awesomplete>ul>li {
    text-overflow: ellipsis;
    overflow-x: hidden;
    position: relative;
    cursor: pointer
}

#converse-embedded-chat div.awesomplete>ul>li:hover,
#conversejs div.awesomplete>ul>li:hover {
    background: #e77051;
    color: #fff
}

#converse-embedded-chat div.awesomplete>ul>li[aria-selected=true],
#conversejs div.awesomplete>ul>li[aria-selected=true] {
    background: #3d6d8f;
    color: #fff
}

#converse-embedded-chat div.awesomplete mark,
#conversejs div.awesomplete mark {
    background: #ffb9a7
}

#converse-embedded-chat div.awesomplete li:hover mark,
#conversejs div.awesomplete li:hover mark {
    background: #a53214;
    color: #fff
}

#converse-embedded-chat div.awesomplete li[aria-selected=true] mark,
#conversejs div.awesomplete li[aria-selected=true] mark {
    background: #3d6b00;
    color: inherit
}