xmpp.chapril.org-conversejs/less/converse.less

/*!
 * Converse.js (Web-based XMPP instant messaging client)
 * http://conversejs.org
 *
 * Copyright (c) 2012-2014, JC Brand <jc@opkode.com>
 * Licensed under the Mozilla Public License
 */

@import "variables.less";

@font-face {
	font-family: 'Converse-js';
    src:url('../fonticons/fonts/icomoon.eot?-mnoxh0');
    src:url('../fonticons/fonts/icomoon.eot?#iefix-mnoxh0') format('embedded-opentype'),
        url('../fonticons/fonts/icomoon.woff?-mnoxh0') format('woff'),
        url('../fonticons/fonts/icomoon.ttf?-mnoxh0') format('truetype'),
        url('../fonticons/fonts/icomoon.svg?-mnoxh0#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Use the following CSS code if you want to use data attributes for inserting your icons */
#conversejs [data-icon]:before {
	font-family: 'Converse-js';
	content: attr(data-icon);
	speak: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#conversejs [class^="icon-"], #conversejs [class*=" icon-"] {
	font-family: 'Converse-js';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-conversejs {
	font-family: 'Converse-js';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-conversejs:before {
	content: "\e600";
}
#conversejs .icon-closed:before {
	content: "\25ba";
}
#conversejs .icon-opened:before {
	content: "\25bc";
}
#conversejs .icon-checkmark:before {
	content: "\2713";
}
#conversejs .icon-home:before {
	content: "\e000";
}
#conversejs .icon-pencil:before {
	content: "\270e";
}
#conversejs .icon-camera:before {
	content: "\e003";
}
#conversejs .icon-camera-2:before {
	content: "\2616";
}
#conversejs .icon-play:before {
	content: "\25d9";
}
#conversejs .icon-music:before {
	content: "\266b";
}
#conversejs .icon-headphones:before {
	content: "\266c";
}
#conversejs .icon-phone:before {
	content: "\260f";
}
#conversejs .icon-phone-hang-up:before {
	content: "\260e";
}
#conversejs .icon-address-book:before {
	content: "\270f";
}
#conversejs .icon-notebook:before {
	content: "\2710";
}
#conversejs .icon-envelop:before {
	content: "\2709";
}
#conversejs .icon-pushpin:before {
	content: "\e012";
}
#conversejs .icon-online:before {
	content: "\25fc";
}
#conversejs .icon-away:before {
	content: "\25fb";
}
#conversejs .icon-bubbles:before {
	content: "\e015";
}
#conversejs .icon-bubbles-2:before {
	content: "\e016";
}
#conversejs .icon-bubbles-3:before {
	content: "\e017";
}
#conversejs .icon-user:before {
	content: "\e01a";
}
#conversejs .icon-hide-users:before {
	content: "\e01c";
}
#conversejs .icon-show-users:before {
	content: "\e01e";
}
#conversejs .icon-users:before {
	content: "\e01b";
}
#conversejs .icon-quotes-left:before {
	content: "\e01d";
}
#conversejs .icon-spinner:before {
	content: "\231b";
}
#conversejs .icon-search:before {
	content: "\e021";
}
#conversejs .icon-cogs:before {
	content: "\e022";
}
#conversejs .icon-wrench:before {
	content: "\e024";
}
#conversejs .icon-unlocked:before {
	content: "\e025";
}
#conversejs .icon-lock:before {
	content: "\e026";
}
#conversejs .icon-lock-2:before {
	content: "\e027";
}
#conversejs .icon-key:before {
	content: "\e028";
}
#conversejs .icon-key-2:before {
	content: "\e029";
}
#conversejs .icon-zoom-out:before {
	content: "\e02a";
}
#conversejs .icon-zoom-in:before {
	content: "\e02b";
}
#conversejs .icon-cog:before {
	content: "\e02f";
}
#conversejs .icon-remove:before {
	content: "\e02d";
}
#conversejs .icon-eye:before {
	content: "\e030";
}
#conversejs .icon-eye-blocked:before {
	content: "\e031";
}
#conversejs .icon-attachment:before {
	content: "\e032";
}
#conversejs .icon-globe:before {
	content: "\e033";
}
#conversejs .icon-heart:before {
	content: "\2764";
}
#conversejs .icon-happy:before {
	content: "\263b";
}
#conversejs .icon-thumbs-up:before {
	content: "\261d";
}
#conversejs .icon-smiley:before {
	content: "\263a";
}
#conversejs .icon-tongue:before {
	content: "\e038";
}
#conversejs .icon-sad:before {
	content: "\2639";
}
#conversejs .icon-wink:before {
	content: "\e03a";
}
#conversejs .icon-wondering:before {
	content: "\2369";
}
#conversejs .icon-confused:before {
	content: "\2368";
}
#conversejs .icon-shocked:before {
	content: "\2364";
}
#conversejs .icon-evil:before {
	content: "\261f";
}
#conversejs .icon-angry:before {
	content: "\e03f";
}
#conversejs .icon-cool:before {
	content: "\e040";
}
#conversejs .icon-grin:before {
	content: "\e041";
}
#conversejs .icon-info:before {
	content: "\2360";
}
#conversejs .icon-notification:before {
	content: "\e01f";
}
#conversejs .icon-warning:before {
	content: "\26a0";
}
#conversejs .icon-spell-check:before {
	content: "\e045";
}
#conversejs .icon-volume-high:before {
	content: "\e046";
}
#conversejs .icon-volume-medium:before {
	content: "\e047";
}
#conversejs .icon-volume-low:before {
	content: "\e048";
}
#conversejs .icon-volume-mute:before {
	content: "\e049";
}
#conversejs .icon-volume-mute-2:before {
	content: "\e04a";
}
#conversejs .icon-volume-decrease:before {
	content: "\e04b";
}
#conversejs .icon-volume-increase:before {
	content: "\e04c";
}
#conversejs .icon-bold:before {
	content: "\e04d";
}
#conversejs .icon-underline:before {
	content: "\e04e";
}
#conversejs .icon-italic:before {
	content: "\e04f";
}
#conversejs .icon-strikethrough:before {
	content: "\e050";
}
#conversejs .icon-new-tab:before {
	content: "\e053";
}
#conversejs .icon-youtube:before {
	content: "\e055";
}
#conversejs .icon-close:before {
	content: "\2715";
}
#conversejs .icon-blocked:before {
	content: "\2718";
}
#conversejs .icon-cancel-circle:before {
	content: "\e058";
}
#conversejs .icon-minus:before {
	content: "\e05a";
}
#conversejs .icon-plus:before {
	content: "\271a";
}
#conversejs .icon-checkbox-checked:before {
	content: "\2611";
}
#conversejs .icon-checkbox-unchecked:before {
	content: "\2b27";
}
#conversejs .icon-checkbox-partial:before {
	content: "\2b28";
}
#conversejs .icon-radio-checked:before {
	content: "\2b26";
}
#conversejs .icon-radio-unchecked:before {
	content: "\2b25";
}
#conversejs .icon-room-info:before {
	content: "\e059";
}
#conversejs .icon-newspaper:before {
	content: "\e001";
}
#conversejs .icon-image:before {
	content: "\2b14";
}
#conversejs .icon-xa:before,
#conversejs .icon-unavailable:before,
#conversejs .icon-offline:before {
	content: "\e002";
}
#conversejs .icon-dnd:before {
	content: "\e004";
}
#conversejs .icon-logout:before {
	content: "\e601";
}

#conversejs .no-text-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
}

#conversejs {
    bottom: 0;
    direction: ltr;
    height: 25px;
    left: 0;
    position: fixed;
    right: 0;
    z-index: 30;
    display: block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#conversejs div {
    box-sizing: border-box;
}

#conversejs ul li {
    height: auto;
}

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

#conversejs strong {
    font-weight: 700;
}

#conversejs,
#conversejs input,
#conversejs textarea {
    font-size: 14px;
    color: rgb(79, 79, 79);
}

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

#conversejs li {
    height: 10px;
}

#conversejs a {
  text-decoration: none;
  color: #2D617A;
  text-shadow: none;
}

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

#conversejs .emoticon {
    font-size: 14px;
}

#conversejs .hidden {
    display: none
}

#conversejs .locked {
    padding-right: 22px;
}

@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(359deg);
  }
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
  }
}

@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(359deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

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

#conversejs .spinner {
    -webkit-animation: spin 2s infinite linear;
    -moz-animation: spin 2s infinite linear;
    -o-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
    display: block;
    text-align: center;
    margin: 5px;
}

#conversejs .centered {
    text-align: center;
    display: block;
    margin: 5em auto;
}

#conversejs .hor_centered {
    text-align: center;
    display: block;
    margin: 0 auto;
}

#conversejs #minimized-chats .box-flyout {
    position: absolute;
    display: block;
    height: auto;
    bottom: 25px;
    margin-left: 0;
}

#conversejs #minimized-chats .box-flyout .chat-head {
    font-size: 100%;
    border-radius: 4px;
    padding: 3px 0 0 5px;
    margin: 0 0 1px 0;
    box-shadow: 1px 3px 5px 3px rgba(0,0,0,0.4);
    height: 24px;
    width: 130px;
}

#conversejs #minimized-chats,
#conversejs .toggle-controlbox {
    float: right;
    font-size: 90%;
    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
    background-color: #F4F4F4;
    padding: 4px 8px;
    margin-right: 5px;
    color: #0a0a0a;
    font-weight: bold;
    height: 100%;
}

#conversejs #minimized-chats {
    width: 130px;
    padding: 0;
    display: none;
}

#conversejs #toggle-minimized-chats {
    position: relative;
    padding: 4px 0 0 4px;
    display: block;
    width: 100%;
    height: 100%;
    color: #0f0f0f;
}

#conversejs #toggle-minimized-chats .unread-message-count {
    right: 5px;
    bottom: 5px;
}

#conversejs .toggle-controlbox,
#conversejs .toggle-minimized-chats {
    float: right;
    font-size: 85%;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    background-color: rgba(83, 144, 200, 100);
    padding: 4px 8px;
    margin-right: 5px;
    color: white;
}

#conversejs .chat-head {
    color: #ffffff;
    font-size: 100%;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    padding: 2px 2px 2px 4px;
    margin: 0;
}

#conversejs .chat-head-chatbox {
    background-color: #2D617A;
}

#conversejs .chat-head-chatroom {
    background-color: #0F592F;
}

#conversejs .chat-body {
    background-color: white;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    height: 289px;
    height: ~"calc(100% - 35px)";
    border-top: 0;
}

#conversejs .chatroom .chat-area {
    float: left;
    height: 100%;
    width: 200px;
}

#conversejs .chatroom .participants {
    float: right;
    background-color: white;
    overflow-y: auto;
    overflow-x: hidden;
    border-left: 1px solid #AAA;
    border-bottom-right-radius: 4px;
    width: 100px;
    height: 100%;
}

#conversejs .tt-highlight {
    background-color: #00230F;
}

#conversejs div.tt-suggestion p:hover .tt-highlight {
    background-color: #00230F;
    background: #27774A;
}

#conversejs div.tt-suggestion p:hover {
    background-color: #00230F;
}

#conversejs div.tt-suggestion p {
    color: white;
    text-shadow: rgba(0,0,0,0.51) 0 -1px 0;
    cursor: pointer;
    font-size: 11px;
}

#conversejs .tt-dropdown-menu {
    margin: 0 1px 0 1px;
    width: 96px;
    max-height: 250px;
    overflow-x: hidden;
    overflow-y: auto;
    text-overflow: ellipsis;
    background: #27774A;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

#conversejs .chatroom div.participants label {
    font-style: italic;
}

#conversejs .chatroom label {
    margin-left:2px;
    font-size: 12px;
}

#conversejs .chatroom .invited-contact {
    margin: 0;
    width: 99px;
    border: 1px solid #999;
}

#conversejs .chatroom .invited-contact.tt-input {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC ) no-repeat right 3px center;
}

#conversejs .participants label {
    margin-top: 5px;
    display: block;
}

#conversejs .participants ul.participant-list li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    font-size: 12px;
    font-weight: bold;
    padding: 0.5em 0 0 0.5em;
    cursor: default;
}

#conversejs ul.participant-list li.moderator {
    color: #8f2831;
}

#conversejs .chatroom .participant-list {
    list-style: none;
}

#conversejs .chat-blink {
    background-color: #176679;
    border-right:1px solid #176679;
    border-left:1px solid #176679;
}

#conversejs .chat-message span::selection,
#conversejs .chat-message::selection {
    background-color: darkgrey;
}

#conversejs .chat-content {
    position: relative;
    padding: 4px;
    font-size: 13px;
    color: rgb(79, 79, 79);
    overflow-y:auto;
    border: 0;
    background-color: #ffffff;
    line-height: 1.3em;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 206px;
    height: ~"calc(100% - 84px)";
}

#conversejs .chat-info {
    color: #666666;
}
#conversejs .chat-error {
    color: #8f2831;
}

#conversejs .chat-message-room,
#conversejs .chat-message-them,
#conversejs .chat-message-me {
    font-weight: bold;
    white-space: nowrap;
    max-width: 100px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
    float: left;
    padding-right: 3px;
}

#conversejs .chat-message-content {
    word-wrap: break-word;
}

#conversejs .chat-message-them {
    color: #8f2831;
}

#conversejs .chat-message-me {
    color: #2D617A;
}

#conversejs .chat-message-room {
    color: #4B7003;
}

#conversejs .chat-event,
#conversejs .chat-date,
#conversejs .chat-info {
    color: #808080;
}

#conversejs li.chat-info {
    padding-left: 10px;
}

#conversejs .chat-date {
    display: inline-block;
    padding-top: 10px;
}

#conversejs p.not-implemented {
    margin-top: 3em;
    margin-left: 0.3em;
    color: #808080;
}

#conversejs div.mentioned {
    font-weight: bold;
}

#conversejs div.delayed .chat-message-them {
    color: #FB5D50;
}

#conversejs div.delayed .chat-message-me {
    color: #7EABBB;
}

#conversejs input.error {
    border: 1px solid red;
}

#conversejs .error {
    color: red;
}

#converse-register .provider-title {
    font-size: 115%;
}

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

#converse-register .form-help .url {
    font-weight: bold;
    color: #2D617A;
}

#conversejs .reg-feedback {
    font-size: 85%;
}

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

#conversejs .chat-message-error {
    color:#76797C;
    font-size:90%;
    font-weight:normal;
}

#conversejs .chat-head .avatar {
    float: left;
    margin-right: 6px;
}

#conversejs .restore-chat,
#conversejs .chat-title {
    padding: 1px 0;
    color: white;
    font-weight: bold;
    line-height: 15px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: rgba(0,0,0,0.51) 0 -1px 0;
}

#conversejs .chat-title a {
    color: white;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#conversejs .chat-head-chatbox,
#conversejs .chat-head-chatroom {
    height: 35px;
    position: relative;
}

#conversejs p.user-custom-message,
#conversejs p.chatroom-topic {
    font-size: 80%;
    font-style: italic;
    height: 1.3em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    padding: 1px 0;
}

#conversejs div.chat-head-chatbox a.user-custom-message {
    color: white;
}
#conversejs .activated{
    display: block !important;
}

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

dl.add-converse-contact {
    margin: 0 0 0 0.5em;
}

#conversejs .fancy-dropdown {
    border:1px solid #ddd;
    height: 22px;
    text-align: left;
}

#conversejs .fancy-dropdown a.choose-xmpp-status {
    width: 155px;
}

#conversejs .fancy-dropdown a.choose-xmpp-status,
#conversejs .fancy-dropdown a.toggle-xmpp-contact-form {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline;
}

#conversejs .fancy-dropdown a.toggle-xmpp-contact-form span {
   float: left;
}

#conversejs .choose-xmpp-status span {
    padding-right: 5px;
    padding-left: 5px;
    float: left;
}

#conversejs #fancy-xmpp-status-select a.change-xmpp-status-message {
    float: right;
    clear: right;
    height: 22px;
    width: 12px;
    margin: 0px 5px 0 0;
    color: rgb(79, 79, 79);
}

#conversejs ul#found-users {
    padding: 10px 0 5px 5px;
    border: 0;
}

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

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

#conversejs .controlbox-head {
    margin: 0;
    color: #FFF;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    height: 35px;
    clear: right;
    background-color: #2D617A;
    padding: 3px 0 0 0;
}

#conversejs .unread-message-count,
#conversejs .chat-head-message-count {
    font-weight: bold;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.35, #f6f6f6), color-stop(1, grey) );
    background: -moz-linear-gradient(center top, yellow 5%, #f6f6f6 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='yellow', endColorstr='#f6f6f6');
    border: 1px solid;
    text-shadow: 1px 1px 0 #ccc;
    color: darkred;
    border-radius: 5px;
    padding: 2px 4px;
    font-size: 15px;
    text-align: center;
    position: absolute;
    right: 22px;
    bottom: 1px;
}

#conversejs a.configure-chatroom-button,
#conversejs a.toggle-chatbox-button,
#conversejs a.close-chatbox-button {
    font-size: 10px;
    padding: 3px 3px 2px 3px;
    margin-right: 3px;
    cursor: pointer;
    border-radius: 6px;
    border: 1px solid #888;
    display: inline-block;
    color: white;
    text-decoration:none;
    float: right;
}

#conversejs a.configure-chatroom-button:active,
#conversejs a.toggle-chatbox-button:active,
#conversejs a.close-chatbox-button:active {
    position:relative;
    top:1px;
}

#conversejs .controlbox-pane dt {
    padding-bottom: 3px;
}

#conversejs .chatroom-form-container {
    height: 100%;
    color: #666;
    overflow-y: auto;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

#conversejs .chatroom-form {
    background: white;
    font-size: 12px;
    padding: 10px 5px;
}

#conversejs .chat-body p {
    font-size: 14px;
    color: #666;
    padding: 5px;
    margin: 0;
}

#conversejs .chatroom-form legend {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
}

#conversejs .chatroom-form label {
    height: 30px;
    font-weight: bold;
    display: block;
    clear: both;
}

#conversejs .chatroom-form label input,
#conversejs .chatroom-form label select {
    float: right;
}

#converse-roster dd.odd {
    background-color: #DCEAC5; /* Make this difference */
}

#converse-roster dd.current-xmpp-contact span {
    font-size: 16px;
    float: left;
    color: rgb(79, 79, 79);
}

#conversejs .requesting-xmpp-contact .request-actions {
    margin-left: 0.5em;
    float: right;
}

#converse-roster dd a,
#converse-roster dd span {
    text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#converse-roster span.req-contact-name {
    width: 65%;
}

#converse-roster span.pending-contact-name,
#converse-roster a.open-chat {
    width: 80%;
}

#converse-roster dd span {
    padding: 0 5px 0 0;
}

#converse-roster {
    text-align: left;
    width: 100%;
    position: relative;
    margin: 0.5em 0 0 0;
    height: 194px;
    height: ~"calc(100% - 68px)";
    overflow: hidden;
}

#converse-roster .roster-filter {
    padding: 0;
    margin: 0 0 5px 0.5em;
    width: 105px;
    height: 20px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg== ) no-repeat right -20px center;
    border: 1px solid #999;
    display: inline-block;
}

#converse-roster .filter-type {
    height: 20px;
    padding: 0;
    margin: 0 0 0 -5px;
}

/* (jQ addClass:) if input has value: */
#converse-roster .roster-filter.x {
    background-position: right 3px center;
}

/* (jQ addClass:) if mouse is over the 'x' input area*/
#converse-roster .roster-filter.onX{
    cursor:pointer;
}

#converse-roster .roster-contacts {
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 195px;
    max-height: ~"calc(100% - 26px)";
}

#converse-roster .group-toggle {
    color: #666;
}

#conversejs dd.available-chatroom {
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

#conversejs dd.available-chatroom a.open-room {
    width: 148px;
}

#available-chatrooms {
    text-align: left;
}

#available-chatrooms dt,
#converse-roster dt {
    font-weight: normal;
    font-size: 13px;
    color: #666;
    border: none;
    padding: 0.3em 0 0 0.5em;
    text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
}

#converse-roster dt {
    display: none;
}

#conversejs .room-info {
    font-size: 11px;
    font-style: normal;
    font-weight: normal;
}

#conversejs li.room-info {
    display: block;
    margin-left: 5px;
}

#conversejs div.room-info {
    clear: left;
}

#conversejs p.room-info {
    margin: 0;
    padding: 0;
    display: block;
    white-space: normal;
}

#conversejs a.room-info {
    width: 22px;
    height: 22px;
    float: right;
    display: none;
    clear: right;
}

#conversejs a.open-room {
    float: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden;
}

#conversejs dd.available-chatroom:hover a.room-info {
    display: inline-block;
    margin-top: 3px;
    font-size: 15px;
}

#conversejs dd.available-chatroom,
#conversejs #converse-roster dd {
    font-weight: bold;
    border: none;
    display: block;
    padding: 1px 0 0 0.5em;
    color: #666;
    text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
    clear: both;
}

#converse-roster dd {
    line-height: 16px;
}

#conversejs .group-toggle {
    display: block;
    width: 100%;
}

#conversejs .roster-group:hover,
#conversejs dd.available-chatroom:hover,
#converse-roster dd:hover {
    background-color: #eee;
}

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

#converse-roster dd a.remove-xmpp-contact {
    float: right;
    width: 22px;
    margin: 0;
    display: none;
    color: rgb(79, 79, 79);
}

#converse-roster  dd:hover a.remove-xmpp-contact {
    display: inline-block;
}

#conversejs .chatbox,
#conversejs .chatroom {
    height: 25px;
    float: right;
    margin-right: 15px;
    display: block;
}

#conversejs .chatbox {
    width: 200px;
}

#conversejs .chatroom {
    width: 300px;
}

#conversejs .controlbox-pane {
    text-align: center;
    background-color: white;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border: 0;
    font-size: 14px;
    height: 289px;
    height: ~"calc(100% - 35px)";
    overflow-y: auto;
    padding: 0;
    position: absolute;
    width: 100%;
}

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

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

#conversejs #converse-register .title {
    font-weight: bold;
}

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

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

#conversejs .form-help:hover,
#conversejs #converse-register .instructions:hover {
    color: #4f4f4f;
}

#conversejs .form-help {
    padding-top: 5px;
}

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

#conversejs #converse-register,
#conversejs #converse-login {
    background: white;
    padding: 1em 0.5em;
}

#conversejs #converse-register input,
#conversejs #converse-login input {
    width: 178px;
    height: 30px;
}

#converse-register .input-group {
    display: table;
    margin: auto;
    width: 178px;
}

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

#conversejs #converse-register .input-group input[name=username] {
    width: 100%;
}

#conversejs #converse-register .cancel,
#conversejs #converse-register .cancel-submit {
    color: darkred;
}

#conversejs #converse-register .save-submit {
    color: darkgreen;
}

#conversejs #converse-register .cancel-submit,
#conversejs #converse-register .save-submit {
    width: 45%;
    margin: 5px 3px 0 3px;
}

#conversejs #converse-register label,
#conversejs #converse-login label {
    margin-top: 0.5em;
    font-weight: bold;
}

#conversejs #converse-register .login-submit,
#conversejs #converse-login .login-submit,
#conversejs #converse-register .submit,
#conversejs #converse-login .submit {
    margin-top: 1em;
    height: 30px;
}

#conversejs form.set-xmpp-status {
    background: none;
    margin: none;
    padding: none;
}

#conversejs form.add-chatroom {
    background: none;
    padding: 3px;
}

#conversejs form.add-chatroom input[type=text] {
    width: 95%;
    margin: 3px;
}

#conversejs form.add-chatroom input[type=button],
#conversejs form.add-chatroom input[type=submit] {
    width: 48%;
}

select#select-xmpp-status {
    float: right;
    margin-right: 0.5em;
}

/* @group Tabs */

#conversejs .chat-head #controlbox-tabs {
    text-align: center;
    display: inline;
    overflow: hidden;
    font-size: 12px;
    list-style-type: none;
}

/* single tab */
#conversejs .chat-head #controlbox-tabs li {
    float: left;
    list-style: none;
    padding-left: 0;
    text-shadow: white 0 1px 0;
    width: 38%;
}

#conversejs ul#controlbox-tabs li a {
    display: block;
    font-size: 12px;
    height: 34px;
    line-height: 34px;
    margin: 0;
    text-align: center;
    text-decoration: none;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    color: #888;
    text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
}

#conversejs .chat-head #controlbox-tabs li a:hover {
    color: #4f4f4f
}

#conversejs .chat-head #controlbox-tabs li a {
    background-color: white;
    box-shadow: inset 0 4px 12px rgba(0,0,0,0.3);
    border-bottom: 1px solid #CCC;
}

#conversejs ul#controlbox-tabs a.current,
#conversejs ul#controlbox-tabs a.current:hover {
    box-shadow: none;
    border-bottom: 0;
    height: 35px;
    cursor: default;
    color: rgb(102,102,102);
}

#conversejs div#chatrooms {
    overflow-y: auto;
}

#conversejs form.sendXMPPMessage {
    background: white;
    border: 0;
    border-top: 1px solid #BBB;
    padding: 0;
    margin: 0;
    position: relative;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    width: 200px;
    height: 83px;
}

#conversejs .chat-textarea {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: 0;
    width: 100%;
    padding: 3px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    resize: none;
    height: 59px;
}

#conversejs .chatroom .chat-textarea {
    border-bottom-right-radius: 0;
}

#conversejs ul.chat-toolbar {
    font-size: 14px;
    margin: 0;
    padding: 0 5px 0 0;
    height: 20px;
    display: block;
}

#conversejs .chat-toolbar .toggle-participants,
#conversejs .chat-toolbar .toggle-clear,
#conversejs .chat-toolbar .toggle-otr {
    float: right;
}

#conversejs .chat-toolbar a {
	color: rgb(79, 79, 79);
}

#conversejs .chat-toolbar ul li a:hover {
    color: #8f2831;
}

#conversejs .chat-toolbar ul {
	display: none;
    font-size:12px;
    position: absolute;
    bottom: 100%;
    margin-bottom: 1px;
    right: 0;
    background: #fff;
    box-shadow: 0 -1px 2px 0 rgba(0,0,0,0.4);
}

#conversejs .chat-toolbar ul li {
	position: relative;
	list-style: none;
	cursor: pointer;
}

#conversejs .chat-toolbar .toggle-smiley {
    padding-left: 5px;
}

#conversejs .chat-toolbar .toggle-smiley ul li {
    font-size: 14px;
    padding: 5px;
    z-index: 98;
}

#conversejs .chat-toolbar .toggle-otr ul li {
    background-color: white;
    display: block;
    z-index: 99;
}

#conversejs .chat-toolbar ul li:hover {
    background-color: #eee;
}

#conversejs .chat-toolbar .toggle-otr ul li a {
	transition:background-color 0.2s ease-in-out;
	-webkit-transition:background-color 0.2s ease-in-out;
	-moz-transition:background-color 0.2s ease-in-out;
	display: block;
	padding: 1px;
	text-decoration: none;
}

#conversejs .chat-toolbar-text {
    font-size: 12px;
    padding-right: 3px;
}

#conversejs .unencrypted a,
#conversejs .unencrypted {
    color: #8f2831;
}

#conversejs .unverified a,
#conversejs .unverified {
    color: #cf5300;
}

#conversejs .private a,
#conversejs .private {
    color: #4B7003
}

#conversejs ul.chat-toolbar li {
    display: inline-block;
    list-style: none;
    padding: 0 3px 0 3px;
    cursor: pointer;
    margin-top: 1px;
}

#conversejs ul.chat-toolbar li:hover {
    cursor: pointer;
}

#conversejs form#set-custom-xmpp-status {
    float: left;
    padding: 0;
}

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

#conversejs .chat-textarea-chatroom-selected {
    border: 2px solid #2D617A;
    margin:0;
}

#conversejs #set-custom-xmpp-status button {
    padding: 1px 2px 1px 1px;
}

#conversejs #controlbox {
    display: none;
}

#conversejs #controlbox div.xmpp-status {
    display: inline;
}

/* status dropdown styles */
#conversejs .chatbox dl.dropdown {
    margin: 0.5em;
    background-color: rgb(240, 240, 240);
}

#conversejs .chatbox .dropdown dd,
#conversejs .dropdown dt,
#conversejs .dropdown ul {
    margin: 0;
    padding: 0;
}

#conversejs .chatbox .dropdown dd {
    position: relative;
}

input.custom-xmpp-status {
    width: 124px;
}

#conversejs form.add-xmpp-contact {
    background: none;
    padding: 5px;
}

#conversejs form.add-xmpp-contact input {
    width: 108px;
}

#conversejs .chatbox .dropdown dt a span {
    cursor: pointer;
    display:block;
    padding: 4px 7px 0 5px;
    color: rgb(79, 79, 79);
}

#conversejs .chatbox .dropdown dd ul {
    padding: 5px 0 5px 0;
    list-style:none;
    position:absolute; left:0; top:0;
    border:1px solid #ddd;
    border-top: 0;
    width: 99%;
    z-index: 21;
    background-color: rgb(240, 240, 240);
}

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

#conversejs .chatbox .dropdown a {
    height: 22px;
    width: 148px;
    display: inline-block;
    line-height: 24px;
}

#conversejs .chatbox .dropdown dd ul li:hover {
    background-color: #bed6e5;
}

#conversejs .chatbox .dropdown dd.search-xmpp ul li:hover {
    background-color: #bed6e5;
}

#conversejs .xmpp-status-menu {
    text-align: left;
}

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

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

#conversejs .xmpp-status-menu li a span {
    padding: 0 5px 0 5px;
    color: rgb(79, 79, 79);
}

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

#conversejs .minimized-chats-flyout,
#conversejs .box-flyout {
    border-radius: 4px;
    bottom: 6px;
    box-shadow: 1px 3px 5px 3px rgba(0,0,0,0.4);
    display: block;
    height: 400px;
    position: absolute;
}

#conversejs .minimized-chats-flyout {
    border-radius: 4px;
    bottom: 25px;
    box-shadow: 1px 3px 5px 3px rgba(0,0,0,0.4);
    display: block;
    position: absolute;
    height: auto;
    width: 130px;
}

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

#conversejs .minimized-chats-flyout .chat-head-chatroom,
#conversejs .minimized-chats-flyout .chat-head {
    border-radius: 4px;
    width: 130px;
    height: 25px;
    margin-bottom: 1px;
}

#conversejs .chatbox .box-flyout {
    width: 200px;
}

#conversejs .chatroom .box-flyout {
    width: 300px;
}

#conversejs .dragresize {
    position: absolute;
    width: 200px;
    height: 5px;
    background: transparent;
    border: 0;
    top: 0;
    margin-left: 0;
    cursor: n-resize;
    z-index: 20;
}