xmpp/converse/css/converse.css

   1 /*!
   2  * Converse.js (Web-based XMPP instant messaging client)
   3  * http://conversejs.org
   4  *
   5  * Copyright (c) 2012-2014, JC Brand <jc@opkode.com>
   6  * Licensed under the Mozilla Public License
   7  */
   8 /*
   9     Color scheme helpers:
  10     https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
  11     http://paletton.com/#uid=53f0u0knsvIdILAj5Cftgu3uBmZ
  12  */
  13 @font-face {
  14   font-family: 'Converse-js';
  15   src: url("../fonticons/fonts/icomoon.eot?-mnoxh0");
  16   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");
  17   font-weight: normal;
  18   font-style: normal; }
  19 .icon-conversejs {
  20   font-family: 'Converse-js';
  21   speak: none;
  22   font-style: normal;
  23   font-weight: normal;
  24   font-variant: normal;
  25   text-transform: none;
  26   line-height: 1;
  27   /* Better Font Rendering =========== */
  28   -webkit-font-smoothing: antialiased;
  29   -moz-osx-font-smoothing: grayscale; }
  30
  31 .icon-conversejs:before {
  32   content: "\e600"; }
  33
  34 #conversejs .icon-address-book:before {
  35   content: "\270f"; }
  36 #conversejs .icon-angry:before {
  37   content: "\e03f"; }
  38 #conversejs .icon-attachment:before {
  39   content: "\e032"; }
  40 #conversejs .icon-away:before {
  41   content: "\25fb"; }
  42 #conversejs .icon-blocked:before {
  43   content: "\2718"; }
  44 #conversejs .icon-bold:before {
  45   content: "\e04d"; }
  46 #conversejs .icon-bubbles-2:before {
  47   content: "\e016"; }
  48 #conversejs .icon-bubbles-3:before {
  49   content: "\e017"; }
  50 #conversejs .icon-bubbles:before {
  51   content: "\e015"; }
  52 #conversejs .icon-camera-2:before {
  53   content: "\2616"; }
  54 #conversejs .icon-camera:before {
  55   content: "\e003"; }
  56 #conversejs .icon-cancel-circle:before {
  57   content: "\e058"; }
  58 #conversejs .icon-checkbox-checked:before {
  59   content: "\2611"; }
  60 #conversejs .icon-checkbox-partial:before {
  61   content: "\2b28"; }
  62 #conversejs .icon-checkbox-unchecked:before {
  63   content: "\2b27"; }
  64 #conversejs .icon-checkmark:before {
  65   content: "\2713"; }
  66 #conversejs .icon-close:before {
  67   content: "\2715"; }
  68 #conversejs .icon-closed:before {
  69   content: "\25ba"; }
  70 #conversejs .icon-cog:before {
  71   content: "\e02f"; }
  72 #conversejs .icon-cogs:before {
  73   content: "\e022"; }
  74 #conversejs .icon-confused:before {
  75   content: "\2368"; }
  76 #conversejs .icon-cool:before {
  77   content: "\e040"; }
  78 #conversejs .icon-dnd:before {
  79   content: "\e004"; }
  80 #conversejs .icon-envelop:before {
  81   content: "\2709"; }
  82 #conversejs .icon-evil:before {
  83   content: "\261f"; }
  84 #conversejs .icon-eye-blocked:before {
  85   content: "\e031"; }
  86 #conversejs .icon-eye:before {
  87   content: "\e030"; }
  88 #conversejs .icon-globe:before {
  89   content: "\e033"; }
  90 #conversejs .icon-grin:before {
  91   content: "\e041"; }
  92 #conversejs .icon-happy:before {
  93   content: "\263b"; }
  94 #conversejs .icon-headphones:before {
  95   content: "\266c"; }
  96 #conversejs .icon-heart:before {
  97   content: "\2764"; }
  98 #conversejs .icon-hide-users:before {
  99   content: "\e01c"; }
 100 #conversejs .icon-home:before {
 101   content: "\e000"; }
 102 #conversejs .icon-image:before {
 103   content: "\2b14"; }
 104 #conversejs .icon-info:before {
 105   content: "\2360"; }
 106 #conversejs .icon-info-2:before {
 107   content: "i"; }
 108 #conversejs .icon-italic:before {
 109   content: "\e04f"; }
 110 #conversejs .icon-key-2:before {
 111   content: "\e029"; }
 112 #conversejs .icon-key:before {
 113   content: "\e028"; }
 114 #conversejs .icon-lock-2:before {
 115   content: "\e027"; }
 116 #conversejs .icon-lock:before {
 117   content: "\e026"; }
 118 #conversejs .icon-logout:before {
 119   content: "\e601"; }
 120 #conversejs .icon-minus:before {
 121   content: "\e05a"; }
 122 #conversejs .icon-music:before {
 123   content: "\266b"; }
 124 #conversejs .icon-new-tab:before {
 125   content: "\e053"; }
 126 #conversejs .icon-newspaper:before {
 127   content: "\e001"; }
 128 #conversejs .icon-notebook:before {
 129   content: "\2710"; }
 130 #conversejs .icon-notification:before {
 131   content: "\e01f"; }
 132 #conversejs .icon-online:before {
 133   content: "\25fc"; }
 134 #conversejs .icon-chat:before {
 135   content: "\25fc"; }
 136 #conversejs .icon-opened:before {
 137   content: "\25bc"; }
 138 #conversejs .icon-pencil:before {
 139   content: "\270e"; }
 140 #conversejs .icon-phone-hang-up:before {
 141   content: "\260e"; }
 142 #conversejs .icon-phone:before {
 143   content: "\260f"; }
 144 #conversejs .icon-play:before {
 145   content: "\25d9"; }
 146 #conversejs .icon-plus:before {
 147   content: "\271a"; }
 148 #conversejs .icon-pushpin:before {
 149   content: "\e012"; }
 150 #conversejs .icon-quotes-left:before {
 151   content: "\e01d"; }
 152 #conversejs .icon-radio-checked:before {
 153   content: "\2b26"; }
 154 #conversejs .icon-radio-unchecked:before {
 155   content: "\2b25"; }
 156 #conversejs .icon-remove:before {
 157   content: "\e02d"; }
 158 #conversejs .icon-room-info:before {
 159   content: "\e059"; }
 160 #conversejs .icon-sad:before {
 161   content: "\2639"; }
 162 #conversejs .icon-search:before {
 163   content: "\e021"; }
 164 #conversejs .icon-shocked:before {
 165   content: "\2364"; }
 166 #conversejs .icon-show-users:before {
 167   content: "\e01e"; }
 168 #conversejs .icon-smiley:before {
 169   content: "\263a"; }
 170 #conversejs .icon-spell-check:before {
 171   content: "\e045"; }
 172 #conversejs .icon-spinner:before {
 173   content: "\231b"; }
 174 #conversejs .icon-strikethrough:before {
 175   content: "\e050"; }
 176 #conversejs .icon-thumbs-up:before {
 177   content: "\261d"; }
 178 #conversejs .icon-tongue:before {
 179   content: "\e038"; }
 180 #conversejs .icon-underline:before {
 181   content: "\e04e"; }
 182 #conversejs .icon-unlocked:before {
 183   content: "\e025"; }
 184 #conversejs .icon-user:before {
 185   content: "\e01a"; }
 186 #conversejs .icon-users:before {
 187   content: "\e01b"; }
 188 #conversejs .icon-volume-decrease:before {
 189   content: "\e04b"; }
 190 #conversejs .icon-volume-high:before {
 191   content: "\e046"; }
 192 #conversejs .icon-volume-increase:before {
 193   content: "\e04c"; }
 194 #conversejs .icon-volume-low:before {
 195   content: "\e048"; }
 196 #conversejs .icon-volume-medium:before {
 197   content: "\e047"; }
 198 #conversejs .icon-volume-mute-2:before {
 199   content: "\e04a"; }
 200 #conversejs .icon-volume-mute:before {
 201   content: "\e049"; }
 202 #conversejs .icon-warning:before {
 203   content: "\26a0"; }
 204 #conversejs .icon-wink:before {
 205   content: "\e03a"; }
 206 #conversejs .icon-wondering:before {
 207   content: "\2369"; }
 208 #conversejs .icon-wrench:before {
 209   content: "\e024"; }
 210 #conversejs .icon-xa:before {
 211   content: "\e602"; }
 212 #conversejs .icon-unavailable:before,
 213 #conversejs .icon-offline:before {
 214   content: "\e002"; }
 215 #conversejs .icon-youtube:before {
 216   content: "\e055"; }
 217 #conversejs .icon-zoom-in:before {
 218   content: "\e02b"; }
 219 #conversejs .icon-zoom-out:before {
 220   content: "\e02a"; }
 221 #conversejs [data-icon]:before {
 222   content: attr(data-icon);
 223   font-family: 'Converse-js';
 224   font-variant: normal;
 225   font-weight: normal;
 226   line-height: 1;
 227   speak: none;
 228   text-transform: none;
 229   /* Better Font Rendering =========== */
 230   -webkit-font-smoothing: antialiased;
 231   -moz-osx-font-smoothing: grayscale; }
 232 #conversejs [class^="icon-"]:before, #conversejs [class*=" icon-"]:before {
 233   background-position: 14px 14px;
 234   background-image: none;
 235   font-family: 'Converse-js';
 236   font-style: normal;
 237   font-variant: normal;
 238   font-weight: normal;
 239   width: auto;
 240   height: auto;
 241   line-height: 1;
 242   speak: none;
 243   text-transform: none;
 244   /* Better Font Rendering =========== */
 245   -webkit-font-smoothing: antialiased;
 246   -moz-osx-font-smoothing: grayscale; }
 247
 248 #conversejs {
 249   /*!
 250   Pure v0.6.1-pre
 251   Copyright 2014 Yahoo! Inc. All rights reserved.
 252   Licensed under the BSD License.
 253   https://github.com/yahoo/pure/blob/master/LICENSE.md
 254   */
 255   /*!
 256   normalize.css v^3.0 | MIT License | git.io/normalize
 257   Copyright (c) Nicolas Gallagher and Jonathan Neal
 258   */
 259   /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
 260   /**
 261    * 1. Set default font family to sans-serif.
 262    * 2. Prevent iOS and IE text size adjust after device orientation change,
 263    *    without disabling user zoom.
 264    */
 265   /**
 266    * Remove default margin.
 267    */
 268   /* HTML5 display definitions
 269      ========================================================================== */
 270   /**
 271    * Correct `block` display not defined for any HTML5 element in IE 8/9.
 272    * Correct `block` display not defined for `details` or `summary` in IE 10/11
 273    * and Firefox.
 274    * Correct `block` display not defined for `main` in IE 11.
 275    */
 276   /**
 277    * 1. Correct `inline-block` display not defined in IE 8/9.
 278    * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 279    */
 280   /**
 281    * Prevent modern browsers from displaying `audio` without controls.
 282    * Remove excess height in iOS 5 devices.
 283    */
 284   /**
 285    * Address `[hidden]` styling not present in IE 8/9/10.
 286    * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 287    */
 288   /* Links
 289      ========================================================================== */
 290   /**
 291    * Remove the gray background color from active links in IE 10.
 292    */
 293   /**
 294    * Improve readability of focused elements when they are also in an
 295    * active/hover state.
 296    */
 297   /* Text-level semantics
 298      ========================================================================== */
 299   /**
 300    * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 301    */
 302   /**
 303    * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 304    */
 305   /**
 306    * Address styling not present in Safari and Chrome.
 307    */
 308   /**
 309    * Address variable `h1` font-size and margin within `section` and `article`
 310    * contexts in Firefox 4+, Safari, and Chrome.
 311    */
 312   /**
 313    * Address styling not present in IE 8/9.
 314    */
 315   /**
 316    * Address inconsistent and variable font size in all browsers.
 317    */
 318   /**
 319    * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 320    */
 321   /* Embedded content
 322      ========================================================================== */
 323   /**
 324    * Remove border when inside `a` element in IE 8/9/10.
 325    */
 326   /**
 327    * Correct overflow not hidden in IE 9/10/11.
 328    */
 329   /* Grouping content
 330      ========================================================================== */
 331   /**
 332    * Address margin not present in IE 8/9 and Safari.
 333    */
 334   /**
 335    * Address differences between Firefox and other browsers.
 336    */
 337   /**
 338    * Contain overflow in all browsers.
 339    */
 340   /**
 341    * Address odd `em`-unit font size rendering in all browsers.
 342    */
 343   /* Forms
 344      ========================================================================== */
 345   /**
 346    * Known limitation: by default, Chrome and Safari on OS X allow very limited
 347    * styling of `select`, unless a `border` property is set.
 348    */
 349   /**
 350    * 1. Correct color not being inherited.
 351    *    Known issue: affects color of disabled elements.
 352    * 2. Correct font properties not being inherited.
 353    * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 354    */
 355   /**
 356    * Address `overflow` set to `hidden` in IE 8/9/10/11.
 357    */
 358   /**
 359    * Address inconsistent `text-transform` inheritance for `button` and `select`.
 360    * All other form control elements do not inherit `text-transform` values.
 361    * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 362    * Correct `select` style inheritance in Firefox.
 363    */
 364   /**
 365    * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 366    *    and `video` controls.
 367    * 2. Correct inability to style clickable `input` types in iOS.
 368    * 3. Improve usability and consistency of cursor style between image-type
 369    *    `input` and others.
 370    */
 371   /**
 372    * Re-set default cursor for disabled elements.
 373    */
 374   /**
 375    * Remove inner padding and border in Firefox 4+.
 376    */
 377   /**
 378    * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 379    * the UA stylesheet.
 380    */
 381   /**
 382    * It's recommended that you don't attempt to style these elements.
 383    * Firefox's implementation doesn't respect box-sizing, padding, or width.
 384    *
 385    * 1. Address box sizing set to `content-box` in IE 8/9/10.
 386    * 2. Remove excess padding in IE 8/9/10.
 387    */
 388   /**
 389    * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 390    * `font-size` values of the `input`, it causes the cursor style of the
 391    * decrement button to change from `default` to `text`.
 392    */
 393   /**
 394    * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 395    * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 396    */
 397   /**
 398    * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 399    * Safari (but not Chrome) clips the cancel button when the search input has
 400    * padding (and `textfield` appearance).
 401    */
 402   /**
 403    * Define consistent border, margin, and padding.
 404    */
 405   /**
 406    * 1. Correct `color` not being inherited in IE 8/9/10/11.
 407    * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 408    */
 409   /**
 410    * Remove default vertical scrollbar in IE 8/9/10/11.
 411    */
 412   /**
 413    * Don't inherit the `font-weight` (applied by a rule above).
 414    * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 415    */
 416   /* Tables
 417      ========================================================================== */
 418   /**
 419    * Remove most spacing between table cells.
 420    */
 421   /*csslint important:false*/
 422   /* ==========================================================================
 423      Pure Base Extras
 424      ========================================================================== */
 425   /**
 426    * Extra rules that Pure adds on top of Normalize.css
 427    */
 428   /**
 429    * Always hide an element when it has the `hidden` HTML attribute.
 430    */
 431   /**
 432    * Add this class to an image to make it fit within it's fluid parent wrapper while maintaining
 433    * aspect ratio.
 434    */
 435   /*!
 436   Pure v0.6.1-pre
 437   Copyright 2014 Yahoo! Inc. All rights reserved.
 438   Licensed under the BSD License.
 439   https://github.com/yahoo/pure/blob/master/LICENSE.md
 440   */
 441   /*csslint box-model:false*/
 442   /*
 443   Box-model set to false because we're setting a height on select elements, which
 444   also have border and padding. This is done because some browsers don't render
 445   the padding. We explicitly set the box-model for select elements to border-box,
 446   so we can ignore the csslint warning.
 447   */
 448   /*
 449   Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
 450   since IE8 won't execute CSS that contains a CSS3 selector.
 451   */
 452   /* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */
 453   /* May be able to remove this tweak as color inputs become more standardized across browsers. */
 454   /*
 455   Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
 456   since IE8 won't execute CSS that contains a CSS3 selector.
 457   */
 458   /*
 459   Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
 460   since IE8 won't execute CSS that contains a CSS3 selector.
 461   */
 462   /*
 463   Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
 464   since IE8 won't execute CSS that contains a CSS3 selector.
 465   */
 466   /* Aligned Forms */
 467   /* Rounded Inputs */
 468   /* Grouped Inputs */
 469   /* Inline help for forms */
 470   /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */
 471   /* Block help for forms */
 472   /*!
 473   Pure v0.6.1-pre
 474   Copyright 2014 Yahoo! Inc. All rights reserved.
 475   Licensed under the BSD License.
 476   https://github.com/yahoo/pure/blob/master/LICENSE.md
 477   */
 478   /* Firefox: Get rid of the inner focus border */
 479   /*csslint outline-none:false*/
 480   /* Firefox: Get rid of the inner focus border */
 481   -webkit-box-sizing: border-box;
 482   -moz-box-sizing: border-box;
 483   box-sizing: border-box; }
 484   #conversejs html {
 485     font-family: sans-serif;
 486     /* 1 */
 487     -ms-text-size-adjust: 100%;
 488     /* 2 */
 489     -webkit-text-size-adjust: 100%;
 490     /* 2 */ }
 491   #conversejs body {
 492     margin: 0; }
 493   #conversejs article,
 494   #conversejs aside,
 495   #conversejs details,
 496   #conversejs figcaption,
 497   #conversejs figure,
 498   #conversejs footer,
 499   #conversejs header,
 500   #conversejs hgroup,
 501   #conversejs main,
 502   #conversejs menu,
 503   #conversejs nav,
 504   #conversejs section,
 505   #conversejs summary {
 506     display: block; }
 507   #conversejs audio,
 508   #conversejs canvas,
 509   #conversejs progress,
 510   #conversejs video {
 511     display: inline-block;
 512     /* 1 */
 513     vertical-align: baseline;
 514     /* 2 */ }
 515   #conversejs audio:not([controls]) {
 516     display: none;
 517     height: 0; }
 518   #conversejs [hidden],
 519   #conversejs template {
 520     display: none; }
 521   #conversejs a {
 522     background-color: transparent; }
 523   #conversejs a:active,
 524   #conversejs a:hover {
 525     outline: 0; }
 526   #conversejs abbr[title] {
 527     border-bottom: 1px dotted; }
 528   #conversejs b,
 529   #conversejs strong {
 530     font-weight: bold; }
 531   #conversejs dfn {
 532     font-style: italic; }
 533   #conversejs h1 {
 534     font-size: 2em;
 535     margin: 0.67em 0; }
 536   #conversejs mark {
 537     background: #ff0;
 538     color: #000; }
 539   #conversejs small {
 540     font-size: 80%; }
 541   #conversejs sub,
 542   #conversejs sup {
 543     font-size: 75%;
 544     line-height: 0;
 545     position: relative;
 546     vertical-align: baseline; }
 547   #conversejs sup {
 548     top: -0.5em; }
 549   #conversejs sub {
 550     bottom: -0.25em; }
 551   #conversejs img {
 552     border: 0; }
 553   #conversejs svg:not(:root) {
 554     overflow: hidden; }
 555   #conversejs figure {
 556     margin: 1em 40px; }
 557   #conversejs hr {
 558     box-sizing: content-box;
 559     height: 0; }
 560   #conversejs pre {
 561     overflow: auto; }
 562   #conversejs code,
 563   #conversejs kbd,
 564   #conversejs pre,
 565   #conversejs samp {
 566     font-family: monospace, monospace;
 567     font-size: 1em; }
 568   #conversejs button,
 569   #conversejs input,
 570   #conversejs optgroup,
 571   #conversejs select,
 572   #conversejs textarea {
 573     color: inherit;
 574     /* 1 */
 575     font: inherit;
 576     /* 2 */
 577     margin: 0;
 578     /* 3 */ }
 579   #conversejs button {
 580     overflow: visible; }
 581   #conversejs button,
 582   #conversejs select {
 583     text-transform: none; }
 584   #conversejs button,
 585   #conversejs html input[type="button"],
 586   #conversejs input[type="reset"],
 587   #conversejs input[type="submit"] {
 588     -webkit-appearance: button;
 589     /* 2 */
 590     cursor: pointer;
 591     /* 3 */ }
 592   #conversejs button[disabled],
 593   #conversejs html input[disabled] {
 594     cursor: default; }
 595   #conversejs button::-moz-focus-inner,
 596   #conversejs input::-moz-focus-inner {
 597     border: 0;
 598     padding: 0; }
 599   #conversejs input {
 600     line-height: normal; }
 601   #conversejs input[type="checkbox"],
 602   #conversejs input[type="radio"] {
 603     box-sizing: border-box;
 604     /* 1 */
 605     padding: 0;
 606     /* 2 */ }
 607   #conversejs input[type="number"]::-webkit-inner-spin-button,
 608   #conversejs input[type="number"]::-webkit-outer-spin-button {
 609     height: auto; }
 610   #conversejs input[type="search"] {
 611     -webkit-appearance: textfield;
 612     /* 1 */
 613     box-sizing: content-box;
 614     /* 2 */ }
 615   #conversejs input[type="search"]::-webkit-search-cancel-button,
 616   #conversejs input[type="search"]::-webkit-search-decoration {
 617     -webkit-appearance: none; }
 618   #conversejs fieldset {
 619     border: 1px solid #c0c0c0;
 620     margin: 0 2px;
 621     padding: 0.35em 0.625em 0.75em; }
 622   #conversejs legend {
 623     border: 0;
 624     /* 1 */
 625     padding: 0;
 626     /* 2 */ }
 627   #conversejs textarea {
 628     overflow: auto; }
 629   #conversejs optgroup {
 630     font-weight: bold; }
 631   #conversejs table {
 632     border-collapse: collapse;
 633     border-spacing: 0; }
 634   #conversejs td,
 635   #conversejs th {
 636     padding: 0; }
 637   #conversejs .hidden,
 638   #conversejs [hidden] {
 639     display: none !important; }
 640   #conversejs .pure-img {
 641     max-width: 100%;
 642     height: auto;
 643     display: block; }
 644   #conversejs .pure-form input[type="text"],
 645   #conversejs .pure-form input[type="password"],
 646   #conversejs .pure-form input[type="email"],
 647   #conversejs .pure-form input[type="url"],
 648   #conversejs .pure-form input[type="date"],
 649   #conversejs .pure-form input[type="month"],
 650   #conversejs .pure-form input[type="time"],
 651   #conversejs .pure-form input[type="datetime"],
 652   #conversejs .pure-form input[type="datetime-local"],
 653   #conversejs .pure-form input[type="week"],
 654   #conversejs .pure-form input[type="number"],
 655   #conversejs .pure-form input[type="search"],
 656   #conversejs .pure-form input[type="tel"],
 657   #conversejs .pure-form input[type="color"],
 658   #conversejs .pure-form select,
 659   #conversejs .pure-form textarea {
 660     padding: 0.5em 0.6em;
 661     display: inline-block;
 662     border: 1px solid #ccc;
 663     box-shadow: inset 0 1px 3px #ddd;
 664     border-radius: 4px;
 665     vertical-align: middle;
 666     -webkit-box-sizing: border-box;
 667     -moz-box-sizing: border-box;
 668     box-sizing: border-box; }
 669   #conversejs .pure-form input:not([type]) {
 670     padding: 0.5em 0.6em;
 671     display: inline-block;
 672     border: 1px solid #ccc;
 673     box-shadow: inset 0 1px 3px #ddd;
 674     border-radius: 4px;
 675     -webkit-box-sizing: border-box;
 676     -moz-box-sizing: border-box;
 677     box-sizing: border-box; }
 678   #conversejs .pure-form input[type="color"] {
 679     padding: 0.2em 0.5em; }
 680   #conversejs .pure-form input[type="text"]:focus,
 681   #conversejs .pure-form input[type="password"]:focus,
 682   #conversejs .pure-form input[type="email"]:focus,
 683   #conversejs .pure-form input[type="url"]:focus,
 684   #conversejs .pure-form input[type="date"]:focus,
 685   #conversejs .pure-form input[type="month"]:focus,
 686   #conversejs .pure-form input[type="time"]:focus,
 687   #conversejs .pure-form input[type="datetime"]:focus,
 688   #conversejs .pure-form input[type="datetime-local"]:focus,
 689   #conversejs .pure-form input[type="week"]:focus,
 690   #conversejs .pure-form input[type="number"]:focus,
 691   #conversejs .pure-form input[type="search"]:focus,
 692   #conversejs .pure-form input[type="tel"]:focus,
 693   #conversejs .pure-form input[type="color"]:focus,
 694   #conversejs .pure-form select:focus,
 695   #conversejs .pure-form textarea:focus {
 696     outline: 0;
 697     border-color: #1A9707; }
 698   #conversejs .pure-form input:not([type]):focus {
 699     outline: 0;
 700     border-color: #1A9707; }
 701   #conversejs .pure-form input[type="file"]:focus,
 702   #conversejs .pure-form input[type="radio"]:focus,
 703   #conversejs .pure-form input[type="checkbox"]:focus {
 704     outline: thin solid #1A9707;
 705     outline: 1px auto #1A9707; }
 706   #conversejs .pure-form .pure-checkbox,
 707   #conversejs .pure-form .pure-radio {
 708     margin: 0.5em 0;
 709     display: block; }
 710   #conversejs .pure-form input[type="text"][disabled],
 711   #conversejs .pure-form input[type="password"][disabled],
 712   #conversejs .pure-form input[type="email"][disabled],
 713   #conversejs .pure-form input[type="url"][disabled],
 714   #conversejs .pure-form input[type="date"][disabled],
 715   #conversejs .pure-form input[type="month"][disabled],
 716   #conversejs .pure-form input[type="time"][disabled],
 717   #conversejs .pure-form input[type="datetime"][disabled],
 718   #conversejs .pure-form input[type="datetime-local"][disabled],
 719   #conversejs .pure-form input[type="week"][disabled],
 720   #conversejs .pure-form input[type="number"][disabled],
 721   #conversejs .pure-form input[type="search"][disabled],
 722   #conversejs .pure-form input[type="tel"][disabled],
 723   #conversejs .pure-form input[type="color"][disabled],
 724   #conversejs .pure-form select[disabled],
 725   #conversejs .pure-form textarea[disabled] {
 726     cursor: not-allowed;
 727     background-color: #eaeded;
 728     color: #cad2d3; }
 729   #conversejs .pure-form input:not([type])[disabled] {
 730     cursor: not-allowed;
 731     background-color: #eaeded;
 732     color: #cad2d3; }
 733   #conversejs .pure-form input[readonly],
 734   #conversejs .pure-form select[readonly],
 735   #conversejs .pure-form textarea[readonly] {
 736     background-color: #eee;
 737     /* menu hover bg color */
 738     color: #777;
 739     /* menu text color */
 740     border-color: #ccc; }
 741   #conversejs .pure-form input:focus:invalid,
 742   #conversejs .pure-form textarea:focus:invalid,
 743   #conversejs .pure-form select:focus:invalid {
 744     color: #b94a48;
 745     border-color: #e9322d; }
 746   #conversejs .pure-form input[type="file"]:focus:invalid:focus,
 747   #conversejs .pure-form input[type="radio"]:focus:invalid:focus,
 748   #conversejs .pure-form input[type="checkbox"]:focus:invalid:focus {
 749     outline-color: #e9322d; }
 750   #conversejs .pure-form select {
 751     /* Normalizes the height; padding is not sufficient. */
 752     height: 2.25em;
 753     border: 1px solid #ccc;
 754     background-color: white; }
 755   #conversejs .pure-form select[multiple] {
 756     height: auto; }
 757   #conversejs .pure-form label {
 758     margin: 0.5em 0 0.2em; }
 759   #conversejs .pure-form fieldset {
 760     margin: 0;
 761     padding: 0.35em 0 0.75em;
 762     border: 0; }
 763   #conversejs .pure-form legend {
 764     display: block;
 765     width: 100%;
 766     padding: 0.3em 0;
 767     margin-bottom: 0.3em;
 768     color: #333;
 769     border-bottom: 1px solid #e5e5e5; }
 770   #conversejs .pure-form-stacked input[type="text"],
 771   #conversejs .pure-form-stacked input[type="password"],
 772   #conversejs .pure-form-stacked input[type="email"],
 773   #conversejs .pure-form-stacked input[type="url"],
 774   #conversejs .pure-form-stacked input[type="date"],
 775   #conversejs .pure-form-stacked input[type="month"],
 776   #conversejs .pure-form-stacked input[type="time"],
 777   #conversejs .pure-form-stacked input[type="datetime"],
 778   #conversejs .pure-form-stacked input[type="datetime-local"],
 779   #conversejs .pure-form-stacked input[type="week"],
 780   #conversejs .pure-form-stacked input[type="number"],
 781   #conversejs .pure-form-stacked input[type="search"],
 782   #conversejs .pure-form-stacked input[type="tel"],
 783   #conversejs .pure-form-stacked input[type="color"],
 784   #conversejs .pure-form-stacked input[type="file"],
 785   #conversejs .pure-form-stacked select,
 786   #conversejs .pure-form-stacked label,
 787   #conversejs .pure-form-stacked textarea {
 788     display: block;
 789     margin: 0.25em 0; }
 790   #conversejs .pure-form-stacked input:not([type]) {
 791     display: block;
 792     margin: 0.25em 0; }
 793   #conversejs .pure-form-aligned input,
 794   #conversejs .pure-form-aligned textarea,
 795   #conversejs .pure-form-aligned select,
 796   #conversejs .pure-form-aligned .pure-help-inline,
 797   #conversejs .pure-form-message-inline {
 798     display: inline-block;
 799     *display: inline;
 800     *zoom: 1;
 801     vertical-align: middle; }
 802   #conversejs .pure-form-aligned textarea {
 803     vertical-align: top; }
 804   #conversejs .pure-form-aligned .pure-control-group {
 805     margin-bottom: 0.5em; }
 806   #conversejs .pure-form-aligned .pure-control-group label {
 807     text-align: right;
 808     display: inline-block;
 809     vertical-align: middle;
 810     width: 10em;
 811     margin: 0 1em 0 0; }
 812   #conversejs .pure-form-aligned .pure-controls {
 813     margin: 1.5em 0 0 11em; }
 814   #conversejs .pure-form input.pure-input-rounded,
 815   #conversejs .pure-form .pure-input-rounded {
 816     border-radius: 2em;
 817     padding: 0.5em 1em; }
 818   #conversejs .pure-form .pure-group fieldset {
 819     margin-bottom: 10px; }
 820   #conversejs .pure-form .pure-group input,
 821   #conversejs .pure-form .pure-group textarea {
 822     display: block;
 823     padding: 10px;
 824     margin: 0 0 -1px;
 825     border-radius: 0;
 826     position: relative;
 827     top: -1px; }
 828   #conversejs .pure-form .pure-group input:focus,
 829   #conversejs .pure-form .pure-group textarea:focus {
 830     z-index: 3; }
 831   #conversejs .pure-form .pure-group input:first-child,
 832   #conversejs .pure-form .pure-group textarea:first-child {
 833     top: 1px;
 834     border-radius: 4px 4px 0 0;
 835     margin: 0; }
 836   #conversejs .pure-form .pure-group input:first-child:last-child,
 837   #conversejs .pure-form .pure-group textarea:first-child:last-child {
 838     top: 1px;
 839     border-radius: 4px;
 840     margin: 0; }
 841   #conversejs .pure-form .pure-group input:last-child,
 842   #conversejs .pure-form .pure-group textarea:last-child {
 843     top: -2px;
 844     border-radius: 0 0 4px 4px;
 845     margin: 0; }
 846   #conversejs .pure-form .pure-group button {
 847     margin: 0.35em 0; }
 848   #conversejs .pure-form .pure-input-1 {
 849     width: 100%; }
 850   #conversejs .pure-form .pure-input-3-4 {
 851     width: 75%; }
 852   #conversejs .pure-form .pure-input-2-3 {
 853     width: 66%; }
 854   #conversejs .pure-form .pure-input-1-2 {
 855     width: 50%; }
 856   #conversejs .pure-form .pure-input-1-3 {
 857     width: 33%; }
 858   #conversejs .pure-form .pure-input-1-4 {
 859     width: 25%; }
 860   #conversejs .pure-form .pure-help-inline,
 861   #conversejs .pure-form-message-inline {
 862     display: inline-block;
 863     padding-left: 0.3em;
 864     color: #666;
 865     vertical-align: middle;
 866     font-size: 0.875em; }
 867   #conversejs .pure-form-message {
 868     display: block;
 869     color: #666;
 870     font-size: 0.875em; }
 871   @media only screen and (max-width: 480px) {
 872     #conversejs {
 873       /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */ }
 874       #conversejs .pure-form button[type="submit"] {
 875         margin: 0.7em 0 0; }
 876       #conversejs .pure-form input:not([type]),
 877       #conversejs .pure-form input[type="text"],
 878       #conversejs .pure-form input[type="password"],
 879       #conversejs .pure-form input[type="email"],
 880       #conversejs .pure-form input[type="url"],
 881       #conversejs .pure-form input[type="date"],
 882       #conversejs .pure-form input[type="month"],
 883       #conversejs .pure-form input[type="time"],
 884       #conversejs .pure-form input[type="datetime"],
 885       #conversejs .pure-form input[type="datetime-local"],
 886       #conversejs .pure-form input[type="week"],
 887       #conversejs .pure-form input[type="number"],
 888       #conversejs .pure-form input[type="search"],
 889       #conversejs .pure-form input[type="tel"],
 890       #conversejs .pure-form input[type="color"],
 891       #conversejs .pure-form label {
 892         margin-bottom: 0.3em;
 893         display: block; }
 894       #conversejs .pure-group input:not([type]),
 895       #conversejs .pure-group input[type="text"],
 896       #conversejs .pure-group input[type="password"],
 897       #conversejs .pure-group input[type="email"],
 898       #conversejs .pure-group input[type="url"],
 899       #conversejs .pure-group input[type="date"],
 900       #conversejs .pure-group input[type="month"],
 901       #conversejs .pure-group input[type="time"],
 902       #conversejs .pure-group input[type="datetime"],
 903       #conversejs .pure-group input[type="datetime-local"],
 904       #conversejs .pure-group input[type="week"],
 905       #conversejs .pure-group input[type="number"],
 906       #conversejs .pure-group input[type="search"],
 907       #conversejs .pure-group input[type="tel"],
 908       #conversejs .pure-group input[type="color"] {
 909         margin-bottom: 0; }
 910       #conversejs .pure-form-aligned .pure-control-group label {
 911         margin-bottom: 0.3em;
 912         text-align: left;
 913         display: block;
 914         width: 100%; }
 915       #conversejs .pure-form-aligned .pure-controls {
 916         margin: 1.5em 0 0 0; }
 917       #conversejs .pure-form .pure-help-inline,
 918       #conversejs .pure-form-message-inline,
 919       #conversejs .pure-form-message {
 920         display: block;
 921         font-size: 0.75em;
 922         /* Increased bottom padding to make it group with its related input element. */
 923         padding: 0.2em 0 0.8em; } }
 924   #conversejs .pure-button {
 925     /* Structure */
 926     display: inline-block;
 927     zoom: 1;
 928     line-height: normal;
 929     white-space: nowrap;
 930     vertical-align: middle;
 931     text-align: center;
 932     cursor: pointer;
 933     -webkit-user-drag: none;
 934     -webkit-user-select: none;
 935     -moz-user-select: none;
 936     -ms-user-select: none;
 937     user-select: none;
 938     -webkit-box-sizing: border-box;
 939     -moz-box-sizing: border-box;
 940     box-sizing: border-box; }
 941   #conversejs .pure-button::-moz-focus-inner {
 942     padding: 0;
 943     border: 0; }
 944   #conversejs .pure-button {
 945     font-family: inherit;
 946     font-size: 100%;
 947     padding: 0.5em 1em;
 948     color: #444;
 949     /* rgba not supported (IE 8) */
 950     color: rgba(0, 0, 0, 0.8);
 951     /* rgba supported */
 952     border: 1px solid #999;
 953     /*IE 6/7/8*/
 954     border: none transparent;
 955     /*IE9 + everything else*/
 956     background-color: #E6E6E6;
 957     text-decoration: none;
 958     border-radius: 2px; }
 959   #conversejs .pure-button-hover,
 960   #conversejs .pure-button:hover,
 961   #conversejs .pure-button:focus {
 962     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000',GradientType=0);
 963     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0, 0, 0, 0.05)), to(rgba(0, 0, 0, 0.1)));
 964     background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
 965     background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1));
 966     background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
 967     background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); }
 968   #conversejs .pure-button:focus {
 969     outline: 0; }
 970   #conversejs .pure-button-active,
 971   #conversejs .pure-button:active {
 972     box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset;
 973     border-color: #000 \9; }
 974   #conversejs .pure-button[disabled],
 975   #conversejs .pure-button-disabled,
 976   #conversejs .pure-button-disabled:hover,
 977   #conversejs .pure-button-disabled:focus,
 978   #conversejs .pure-button-disabled:active {
 979     border: none;
 980     background-image: none;
 981     filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
 982     filter: alpha(opacity=40);
 983     -khtml-opacity: 0.40;
 984     -moz-opacity: 0.40;
 985     opacity: 0.40;
 986     cursor: not-allowed;
 987     box-shadow: none; }
 988   #conversejs .pure-button-hidden {
 989     display: none; }
 990   #conversejs .pure-button::-moz-focus-inner {
 991     padding: 0;
 992     border: 0; }
 993   #conversejs .pure-button-primary,
 994   #conversejs .pure-button-selected,
 995   #conversejs a.pure-button-primary,
 996   #conversejs a.pure-button-selected {
 997     background-color: #0078e7;
 998     color: #fff; }
 999   #conversejs *, #conversejs *:before, #conversejs *:after {
1000     -webkit-box-sizing: border-box;
1001     -moz-box-sizing: border-box;
1002     box-sizing: border-box; }
1003   @media screen and (max-width: 480px) {
1004     #conversejs {
1005       margin: 0;
1006       right: 10px;
1007       left: 10px;
1008       bottom: 5px; } }
1009   #conversejs ul li {
1010     height: auto; }
1011   #conversejs div, #conversejs span, #conversejs h1, #conversejs h2, #conversejs h3, #conversejs h4, #conversejs h5, #conversejs h6, #conversejs p, #conversejs blockquote,
1012   #conversejs pre, #conversejs a, #conversejs em, #conversejs img, #conversejs strong, #conversejs dl, #conversejs dt, #conversejs dd, #conversejs ol, #conversejs ul, #conversejs li,
1013   #conversejs fieldset, #conversejs form, #conversejs label, #conversejs legend, #conversejs table, #conversejs caption, #conversejs tbody,
1014   #conversejs tfoot, #conversejs thead, #conversejs tr, #conversejs th, #conversejs td, #conversejs article, #conversejs aside, #conversejs canvas, #conversejs details,
1015   #conversejs embed, #conversejs figure, #conversejs figcaption, #conversejs footer, #conversejs header, #conversejs hgroup, #conversejs menu,
1016   #conversejs nav, #conversejs output, #conversejs ruby, #conversejs section, #conversejs summary, #conversejs time, #conversejs mark, #conversejs audio, #conversejs video {
1017     margin: 0;
1018     padding: 0;
1019     border: 0;
1020     font: inherit;
1021     vertical-align: baseline; }
1022   #conversejs textarea,
1023   #conversejs input[type=submit], #conversejs input[type=button],
1024   #conversejs input[type=text], #conversejs input[type=password],
1025   #conversejs button {
1026     font-size: 14px;
1027     padding: 0.25em;
1028     min-height: 0; }
1029   #conversejs strong {
1030     font-weight: 700; }
1031   #conversejs ol, #conversejs ul {
1032     list-style: none; }
1033   #conversejs li {
1034     height: 10px; }
1035   #conversejs ul, #conversejs ol, #conversejs dl {
1036     font: inherit;
1037     margin: 0; }
1038   #conversejs a, #conversejs a:visited {
1039     text-decoration: none;
1040     color: #2A9D8F;
1041     text-shadow: none; }
1042
1043 #conversejs {
1044   bottom: 0;
1045   color: #818479;
1046   direction: ltr;
1047   display: block;
1048   font-size: 14px;
1049   height: 35px;
1050   position: fixed;
1051   left: 0;
1052   right: 0;
1053   width: auto;
1054   z-index: 30; }
1055   @media screen and (max-width: 480px) {
1056     #conversejs {
1057       width: 100%;
1058       width: 100vw; } }
1059   #conversejs ::selection {
1060     background-color: #DCF9F6; }
1061   #conversejs ::-moz-selection {
1062     background-color: #DCF9F6; }
1063   #conversejs .no-text-select {
1064     -webkit-touch-callout: none;
1065     -webkit-user-select: none;
1066     -moz-user-select: none;
1067     -ms-user-select: none;
1068     user-select: none; }
1069   #conversejs .emoticon {
1070     font-size: 14px; }
1071   #conversejs .left {
1072     float: left; }
1073   #conversejs .right {
1074     float: right; }
1075   #conversejs .centered {
1076     text-align: center;
1077     display: block;
1078     margin: 5em auto; }
1079   #conversejs .hor_centered {
1080     text-align: center;
1081     display: block;
1082     margin: 0 auto;
1083     clear: both; }
1084   #conversejs .hidden {
1085     display: none; }
1086   #conversejs .locked {
1087     padding-right: 22px; }
1088 @-webkit-keyframes spin {
1089   from {
1090     -webkit-transform: rotate(0deg); }
1091   to {
1092     -webkit-transform: rotate(359deg); } }
1093 @-moz-keyframes spin {
1094   from {
1095     -moz-transform: rotate(0deg); }
1096   to {
1097     -moz-transform: rotate(359deg); } }
1098 @keyframes spin {
1099   from {
1100     -webkit-transform: rotate(0deg);
1101     -moz-transform: rotate(0deg);
1102     -ms-transform: rotate(0deg);
1103     -o-transform: rotate(0deg);
1104     transform: rotate(0deg); }
1105   to {
1106     -webkit-transform: rotate(359deg);
1107     -moz-transform: rotate(359deg);
1108     -ms-transform: rotate(359deg);
1109     -o-transform: rotate(359deg);
1110     transform: rotate(359deg); } }
1111   #conversejs .spinner {
1112     -webkit-animation: spin 2s infinite, linear;
1113     -moz-animation: spin 2s infinite, linear;
1114     animation: spin 2s infinite, linear;
1115     display: block;
1116     text-align: center;
1117     margin: 5px; }
1118     #conversejs .spinner:before {
1119       font-size: 24px;
1120       font-family: 'Converse-js' !important;
1121       content: "\231b"; }
1122   #conversejs .button-group,
1123   #conversejs .input-button-group {
1124     display: table; }
1125   #conversejs .button-group {
1126     width: 100%; }
1127   #conversejs .input-button-group button,
1128   #conversejs .input-button-group input {
1129     display: table-cell; }
1130   #conversejs .error {
1131     color: red; }
1132   #conversejs .reg-feedback {
1133     font-size: 85%; }
1134   #conversejs .reg-feedback,
1135   #conversejs #converse-login .conn-feedback {
1136     display: block;
1137     text-align: center;
1138     width: 100%; }
1139   #conversejs a.restore-chat {
1140     padding: 1px 0 1px 5px;
1141     color: white;
1142     line-height: 15px;
1143     display: block;
1144     overflow: hidden;
1145     text-overflow: ellipsis;
1146     white-space: nowrap; }
1147   #conversejs a.restore-chat:visited {
1148     color: white; }
1149   #conversejs .activated {
1150     display: block !important; }
1151   #conversejs .pure-button {
1152     border-radius: 4px; }
1153   #conversejs .button-primary {
1154     color: white;
1155     background-color: #2AC611; }
1156   #conversejs .button-secondary {
1157     color: white;
1158     background-color: #83A0D6; }
1159   #conversejs .button-cancel {
1160     color: white;
1161     background-color: #D24E2B; }
1162   #conversejs form.pure-form.converse-form {
1163     background: white;
1164     margin: 1em; }
1165     #conversejs form.pure-form.converse-form legend {
1166       color: #818479; }
1167     #conversejs form.pure-form.converse-form label {
1168       margin-top: 1em; }
1169     #conversejs form.pure-form.converse-form input[type=text],
1170     #conversejs form.pure-form.converse-form input[type=password],
1171     #conversejs form.pure-form.converse-form input[type=number],
1172     #conversejs form.pure-form.converse-form input[type=button],
1173     #conversejs form.pure-form.converse-form input[type=submit] {
1174       height: 2.2em; }
1175     #conversejs form.pure-form.converse-form input[type=button],
1176     #conversejs form.pure-form.converse-form input[type=submit] {
1177       padding-left: 1em;
1178       padding-right: 1em;
1179       margin-right: 1em; }
1180     #conversejs form.pure-form.converse-form input.error {
1181       border: 1px solid red;
1182       color: #818479; }
1183     #conversejs form.pure-form.converse-form .form-help {
1184       color: gray;
1185       font-size: 85%;
1186       padding-top: 0.5em; }
1187       #conversejs form.pure-form.converse-form .form-help:hover {
1188         color: #818479; }
1189   #conversejs .chat-textarea-chatbox-selected {
1190     border: 1px solid #578308;
1191     margin: 0; }
1192   #conversejs .chat-textarea-chatroom-selected {
1193     border: 2px solid #2A9D8F;
1194     margin: 0; }
1195   #conversejs .dropdown dt,
1196   #conversejs .dropdown ul {
1197     margin: 0;
1198     padding: 0; }
1199
1200 #conversejs .flyout {
1201   border-radius: 4px;
1202   bottom: 6px;
1203   display: block;
1204   position: absolute; }
1205 #conversejs .chat-head {
1206   border-top-left-radius: 4px;
1207   border-top-right-radius: 4px;
1208   color: #ffffff;
1209   font-size: 100%;
1210   height: 55px;
1211   margin: 0;
1212   padding: 5px;
1213   position: relative; }
1214   #conversejs .chat-head .avatar {
1215     margin-right: 0.5em;
1216     border-radius: 50%;
1217     float: left; }
1218   #conversejs .chat-head.chat-head-chatbox {
1219     background-color: #F4A261; }
1220   #conversejs .chat-head .user-custom-message {
1221     clear: left;
1222     color: white;
1223     font-size: 80%;
1224     font-style: italic;
1225     height: 1.3em;
1226     overflow: hidden;
1227     text-overflow: ellipsis;
1228     white-space: nowrap;
1229     margin: 0;
1230     padding-top: 0.2em; }
1231 #conversejs .chatbox-btn {
1232   border-radius: 50%;
1233   border: 1px solid white;
1234   color: white;
1235   cursor: pointer;
1236   display: inline-block;
1237   float: right;
1238   font-size: 9px;
1239   margin: 0;
1240   margin-right: 0.2em;
1241   padding: 0.5em 0.5em 0.3em 0.5em;
1242   text-decoration: none; }
1243   #conversejs .chatbox-btn:active {
1244     position: relative;
1245     top: 1px; }
1246 #conversejs .chatbox {
1247   display: block;
1248   float: right;
1249   height: 35px;
1250   margin: 0 0.5em;
1251   width: 200px; }
1252   @media screen and (max-width: 480px) {
1253     #conversejs .chatbox {
1254       margin: 0;
1255       width: 100%; } }
1256   #conversejs .chatbox .box-flyout {
1257     background-color: white;
1258     box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
1259     height: 450px;
1260     min-height: 225px;
1261     min-width: 200px;
1262     width: 200px;
1263     z-index: 1; }
1264     @media screen and (max-width: 480px) {
1265       #conversejs .chatbox .box-flyout {
1266         height: 400px;
1267         width: 100%;
1268         height: 99vh; } }
1269   #conversejs .chatbox .chat-title {
1270     color: white;
1271     line-height: 15px;
1272     display: block;
1273     text-overflow: ellipsis;
1274     overflow: hidden;
1275     height: 2em; }
1276     #conversejs .chatbox .chat-title a {
1277       color: white;
1278       width: 100%; }
1279   #conversejs .chatbox .chat-body {
1280     background-color: white;
1281     border-bottom-left-radius: 4px;
1282     border-bottom-right-radius: 4px;
1283     border-top: 0;
1284     height: 289px;
1285     height: -webkit-calc(100% - 55px);
1286     height: calc(100% - 55px); }
1287     #conversejs .chatbox .chat-body p {
1288       color: #818479;
1289       font-size: 14px;
1290       margin: 0;
1291       padding: 5px; }
1292     #conversejs .chatbox .chat-body .chat-info {
1293       color: #D24E2B;
1294       margin: 0.3em; }
1295       #conversejs .chatbox .chat-body .chat-info.chat-event {
1296         clear: left;
1297         font-style: italic; }
1298       #conversejs .chatbox .chat-body .chat-info.chat-error {
1299         color: #D24E2B;
1300         font-weight: bold; }
1301       #conversejs .chatbox .chat-body .chat-info.chat-date {
1302         display: inline-block;
1303         margin-top: 2em; }
1304     #conversejs .chatbox .chat-body .chat-message {
1305       margin: 0.3em; }
1306       #conversejs .chatbox .chat-body .chat-message span {
1307         display: inline-block; }
1308         #conversejs .chatbox .chat-body .chat-message span.chat-msg-author {
1309           max-width: 100%;
1310           font-weight: bold;
1311           white-space: nowrap;
1312           float: left;
1313           text-overflow: ellipsis;
1314           overflow: hidden; }
1315         #conversejs .chatbox .chat-body .chat-message span.chat-msg-them {
1316           color: #1A9707; }
1317         #conversejs .chatbox .chat-body .chat-message span.chat-msg-me {
1318           color: #2A9D8F; }
1319         #conversejs .chatbox .chat-body .chat-message span.chat-msg-content {
1320           max-width: 100%;
1321           word-wrap: break-word; }
1322     #conversejs .chatbox .chat-body .delayed .chat-msg-them {
1323       color: #FB5D50; }
1324     #conversejs .chatbox .chat-body .delayed .chat-msg-me {
1325       color: #7EABBB; }
1326   #conversejs .chatbox .chat-content {
1327     position: relative;
1328     padding: 0.5em;
1329     font-size: 13px;
1330     color: #818479;
1331     overflow-y: auto;
1332     border: 0;
1333     background-color: #ffffff;
1334     line-height: 1.3em;
1335     height: 206px;
1336     height: calc(100% - 96px); }
1337   #conversejs .chatbox .dropdown {
1338     /* status dropdown styles */
1339     background-color: #FCFDFD; }
1340     #conversejs .chatbox .dropdown dd {
1341       margin: 0;
1342       padding: 0;
1343       position: relative; }
1344   #conversejs .chatbox form.sendXMPPMessage {
1345     -moz-background-clip: padding;
1346     -webkit-background-clip: padding-box;
1347     border-bottom-left-radius: 4px;
1348     border-bottom-right-radius: 4px;
1349     background-clip: padding-box;
1350     background: white;
1351     border-top: 1px solid #BBB;
1352     border: 0;
1353     margin: 0;
1354     padding: 0;
1355     position: relative;
1356     height: 95px;
1357     min-width: 200px; }
1358     @media screen and (max-width: 480px) {
1359       #conversejs .chatbox form.sendXMPPMessage {
1360         width: 100%; } }
1361     #conversejs .chatbox form.sendXMPPMessage .chat-textarea {
1362       border-bottom-left-radius: 4px;
1363       border-bottom-right-radius: 4px;
1364       border: 0;
1365       height: 70px;
1366       padding: 0.5em;
1367       width: 100%;
1368       resize: none; }
1369     #conversejs .chatbox form.sendXMPPMessage .chat-toolbar {
1370       font-size: 14px;
1371       margin: 0;
1372       padding: 5px;
1373       height: 25px;
1374       display: block;
1375       background-color: #FFF5EE; }
1376       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar a {
1377         color: #2A9D8F; }
1378       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text {
1379         font-size: 12px;
1380         padding-right: 3px;
1381         text-shadow: 0 1px 0 white; }
1382       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
1383       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted {
1384         color: #D24E2B; }
1385       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
1386       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified {
1387         color: #cf5300; }
1388       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .private a,
1389       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .private {
1390         color: #4b7003; }
1391       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-occupants,
1392       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-clear,
1393       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr {
1394         float: right; }
1395       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li {
1396         display: inline-block;
1397         list-style: none;
1398         padding: 0 3px 0 3px;
1399         cursor: pointer;
1400         margin-top: 1px; }
1401       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li:hover {
1402         cursor: pointer; }
1403       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar ul {
1404         background: #fff;
1405         bottom: 100%;
1406         box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
1407         display: none;
1408         font-size: 12px;
1409         margin: 0 0 1px 0;
1410         position: absolute;
1411         right: 0; }
1412         #conversejs .chatbox form.sendXMPPMessage .chat-toolbar ul li {
1413           cursor: pointer;
1414           list-style: none;
1415           position: relative; }
1416           #conversejs .chatbox form.sendXMPPMessage .chat-toolbar ul li a:hover {
1417             color: #8f2831; }
1418       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley {
1419         color: #2A9D8F;
1420         padding-left: 5px; }
1421         #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li {
1422           font-size: 14px;
1423           padding: 5px;
1424           z-index: 98; }
1425         #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li:hover {
1426           background-color: #DCF9F6; }
1427       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li {
1428         padding: 7px;
1429         background-color: white;
1430         display: block;
1431         z-index: 99; }
1432         #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li a {
1433           -moz-transition: background-color 0.2s ease-in-out;
1434           -webkit-transition: background-color 0.2s ease-in-out;
1435           transition: background-color 0.2s ease-in-out;
1436           display: block;
1437           padding: 1px;
1438           text-decoration: none; }
1439       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li:hover {
1440         background-color: #DCF9F6; }
1441   #conversejs .chatbox .dragresize {
1442     background: transparent;
1443     border: 0;
1444     margin: 0;
1445     position: absolute;
1446     top: 0;
1447     z-index: 20; }
1448     #conversejs .chatbox .dragresize-top {
1449       cursor: n-resize;
1450       height: 5px;
1451       width: 100%; }
1452     #conversejs .chatbox .dragresize-left {
1453       cursor: w-resize;
1454       width: 5px;
1455       height: 100%;
1456       left: 0; }
1457     #conversejs .chatbox .dragresize-topleft {
1458       cursor: nw-resize;
1459       width: 15px;
1460       height: 15px;
1461       top: 0;
1462       left: 0; }
1463
1464 #conversejs #controlbox {
1465   display: none;
1466   margin-right: 1em; }
1467   @media screen and (max-width: 480px) {
1468     #conversejs #controlbox {
1469       margin: 0; } }
1470   #conversejs #controlbox .controlbox-head {
1471     background-color: #577BDD;
1472     border-top-left-radius: 4px;
1473     border-top-right-radius: 4px;
1474     color: white;
1475     height: 55px;
1476     margin: 0;
1477     padding: 6px 6px 6px 0; }
1478   #conversejs #controlbox form.search-xmpp-contact {
1479     margin: 0;
1480     padding-left: 5px;
1481     padding: 0 0 5px 5px; }
1482     #conversejs #controlbox form.search-xmpp-contact input {
1483       width: 8em; }
1484   #conversejs #controlbox a.subscribe-to-user {
1485     padding-left: 2em;
1486     font-weight: bold; }
1487   #conversejs #controlbox #converse-register {
1488     background: white; }
1489     #conversejs #controlbox #converse-register .title {
1490       font-weight: bold; }
1491     #conversejs #controlbox #converse-register .info {
1492       font-style: italic;
1493       color: green;
1494       font-size: 85%;
1495       margin: 5px 0; }
1496     #conversejs #controlbox #converse-register .form-errors {
1497       color: red;
1498       display: none; }
1499     #conversejs #controlbox #converse-register .provider-title {
1500       font-size: 22px; }
1501     #conversejs #controlbox #converse-register .provider-score {
1502       width: 178px;
1503       margin-bottom: 8px; }
1504     #conversejs #controlbox #converse-register .form-help .url {
1505       font-weight: bold;
1506       color: #2A9D8F; }
1507     #conversejs #controlbox #converse-register .input-group {
1508       display: table;
1509       margin: auto;
1510       width: 100%; }
1511       #conversejs #controlbox #converse-register .input-group span {
1512         overflow-x: hidden;
1513         text-overflow: ellipsis;
1514         max-width: 110px; }
1515       #conversejs #controlbox #converse-register .input-group span, #conversejs #controlbox #converse-register .input-group input[name=username] {
1516         display: table-cell;
1517         text-align: left; }
1518     #conversejs #controlbox #converse-register .instructions {
1519       color: gray;
1520       font-size: 85%; }
1521       #conversejs #controlbox #converse-register .instructions:hover {
1522         color: #818479; }
1523   #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
1524     margin-top: 2em; }
1525     #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
1526       height: auto;
1527       white-space: normal; }
1528     #conversejs #controlbox #converse-register .save-submit, #conversejs #controlbox #converse-login .save-submit {
1529       color: #436F64; }
1530     #conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
1531       width: 100%;
1532       margin: 0.5em 0; }
1533   #conversejs #controlbox #users .add-converse-contact {
1534     margin: 0 1em 0.75em 1em; }
1535   #conversejs #controlbox #chatrooms form.add-chatroom input[type=button],
1536   #conversejs #controlbox #chatrooms form.add-chatroom input[type=submit],
1537   #conversejs #controlbox #chatrooms form.add-chatroom input[type=text] {
1538     width: 100%; }
1539   #conversejs #controlbox #chatrooms #available-chatrooms {
1540     padding: 0 1em 2em 1em;
1541     text-align: left; }
1542     #conversejs #controlbox #chatrooms #available-chatrooms dt {
1543       border: none;
1544       color: #818479;
1545       font-weight: normal;
1546       padding: 0;
1547       padding-bottom: 0.5em;
1548       text-shadow: 0 1px 0 #FAFAFA; }
1549     #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom {
1550       border: none;
1551       clear: both;
1552       color: #818479;
1553       display: block;
1554       overflow: hidden;
1555       padding: 0.4em;
1556       text-shadow: 0 1px 0 #FAFAFA;
1557       word-wrap: break-word; }
1558       #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom:hover {
1559         background-color: #DCF9F6; }
1560       #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom a.room-info {
1561         display: none;
1562         clear: right;
1563         display: block; }
1564         #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom a.room-info:before {
1565           font-size: 15px; }
1566       #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom a.open-room {
1567         float: left;
1568         width: 85%; }
1569       #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom .room-info {
1570         font-size: 11px;
1571         font-style: normal;
1572         font-weight: normal; }
1573       #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom li.room-info {
1574         display: block;
1575         margin-left: 5px; }
1576       #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom p.room-info {
1577         margin: 0;
1578         padding: 0;
1579         display: block;
1580         white-space: normal; }
1581       #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom div.room-info {
1582         clear: left;
1583         width: 100%; }
1584   #conversejs #controlbox .dropdown a {
1585     width: 148px;
1586     display: inline-block;
1587     line-height: 25px; }
1588   #conversejs #controlbox .dropdown li {
1589     list-style: none;
1590     padding-left: 0; }
1591   #conversejs #controlbox .dropdown dd ul {
1592     padding: 0;
1593     list-style: none;
1594     position: absolute;
1595     left: 0;
1596     top: 0;
1597     border: 1px solid #B1BFC4;
1598     width: 100%;
1599     z-index: 21;
1600     background-color: #FCFDFD; }
1601     #conversejs #controlbox .dropdown dd ul li:hover {
1602       background-color: #DCF9F6; }
1603   #conversejs #controlbox .dropdown dd.search-xmpp ul {
1604     box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4); }
1605     #conversejs #controlbox .dropdown dd.search-xmpp ul li:hover {
1606       background-color: #FCFDFD; }
1607   #conversejs #controlbox .dropdown dt a span {
1608     cursor: pointer;
1609     display: block;
1610     padding: 4px 7px 0 5px; }
1611   #conversejs #controlbox #select-xmpp-status {
1612     float: right;
1613     margin-right: 0.5em; }
1614   #conversejs #controlbox #set-custom-xmpp-status {
1615     float: left;
1616     padding: 0; }
1617     #conversejs #controlbox #set-custom-xmpp-status fieldset {
1618       padding: 0;
1619       margin-top: -1px; }
1620     #conversejs #controlbox #set-custom-xmpp-status input {
1621       height: 26px;
1622       width: -webkit-calc(100% - 40px);
1623       width: calc(100% - 40px);
1624       padding: 0 0 0 0.5em; }
1625     #conversejs #controlbox #set-custom-xmpp-status input[type=submit] {
1626       height: 26px;
1627       width: 40px;
1628       padding: 1px;
1629       float: right; }
1630   #conversejs #controlbox #controlbox-tabs {
1631     text-align: center;
1632     display: inline;
1633     overflow: hidden;
1634     font-size: 12px;
1635     list-style-type: none;
1636     /* single tab */ }
1637     #conversejs #controlbox #controlbox-tabs li {
1638       float: left;
1639       list-style: none;
1640       padding-left: 0;
1641       text-shadow: white 0 1px 0;
1642       width: 38%; }
1643       #conversejs #controlbox #controlbox-tabs li a {
1644         background-color: white;
1645         border-bottom: 1px solid #CCC;
1646         border-top-left-radius: 4px;
1647         border-top-right-radius: 4px;
1648         box-shadow: inset 2px -2px 20px rgba(0, 0, 0, 0.3);
1649         color: #818479;
1650         display: block;
1651         font-size: 12px;
1652         height: 54px;
1653         line-height: 54px;
1654         margin: 0;
1655         text-align: center;
1656         text-decoration: none; }
1657         #conversejs #controlbox #controlbox-tabs li a:hover {
1658           color: #818479; }
1659         #conversejs #controlbox #controlbox-tabs li a.current, #conversejs #controlbox #controlbox-tabs li a.current:hover {
1660           box-shadow: none;
1661           border-bottom: 0;
1662           height: 55px;
1663           cursor: default;
1664           color: #818479; }
1665   #conversejs #controlbox .fancy-dropdown {
1666     border: 1px solid #B1BFC4;
1667     height: 25px;
1668     border-radius: 4px;
1669     text-align: left;
1670     padding: 0;
1671     padding-left: 0.3em; }
1672     #conversejs #controlbox .fancy-dropdown .choose-xmpp-status {
1673       width: 155px; }
1674     #conversejs #controlbox .fancy-dropdown .choose-xmpp-status,
1675     #conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form {
1676       text-shadow: 0 1px 0 #ffffff;
1677       overflow: hidden;
1678       text-overflow: ellipsis;
1679       white-space: nowrap;
1680       display: inline; }
1681     #conversejs #controlbox .fancy-dropdown.no-border {
1682       border: 0; }
1683   #conversejs #controlbox #fancy-xmpp-status-select {
1684     padding-left: 0; }
1685     #conversejs #controlbox #fancy-xmpp-status-select .xmpp-status {
1686       margin-left: 0.3em;
1687       display: inline; }
1688     #conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message {
1689       float: right;
1690       clear: right;
1691       width: 12px;
1692       margin-right: 0.3em;
1693       color: #2A9D8F; }
1694   #conversejs #controlbox .controlbox-pane {
1695     background-color: white;
1696     border-bottom-left-radius: 4px;
1697     border-bottom-right-radius: 4px;
1698     border: 0;
1699     font-size: 14px;
1700     position: absolute;
1701     text-align: center;
1702     width: 100%;
1703     height: 289px;
1704     height: -webkit-calc(100% - 55px);
1705     height: calc(100% - 55px);
1706     overflow-y: auto;
1707     overflow-x: hidden; }
1708     #conversejs #controlbox .controlbox-pane label {
1709       font-size: 14px;
1710       font-weight: bold;
1711       height: auto;
1712       margin: 4px; }
1713     #conversejs #controlbox .controlbox-pane dd {
1714       margin-left: 0;
1715       margin-bottom: 0; }
1716       #conversejs #controlbox .controlbox-pane dd.odd {
1717         background-color: #DCEAC5; }
1718   #conversejs #controlbox #users {
1719     overflow-y: hidden; }
1720   #conversejs #controlbox .add-xmpp-contact {
1721     background: none;
1722     padding: 1em; }
1723     #conversejs #controlbox .add-xmpp-contact input {
1724       margin: 0 0 1rem;
1725       width: 100%; }
1726     #conversejs #controlbox .add-xmpp-contact button {
1727       width: 100%; }
1728   #conversejs #controlbox .xmpp-status-menu {
1729     text-align: left;
1730     box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4); }
1731     #conversejs #controlbox .xmpp-status-menu li {
1732       padding: 2px; }
1733       #conversejs #controlbox .xmpp-status-menu li a {
1734         width: 100%;
1735         padding: 0 8px; }
1736   #conversejs #controlbox .xmpp-status-menu li a.logout,
1737   #conversejs #controlbox .xmpp-status-menu li a.logout span {
1738     color: #D24E2B; }
1739   #conversejs #controlbox .set-xmpp-status {
1740     background: none;
1741     margin: 1em 1em 0.5em 1em; }
1742     #conversejs #controlbox .set-xmpp-status .dropdown dd ul {
1743       z-index: 22; }
1744 #conversejs .toggle-controlbox {
1745   background-color: #2A9D8F;
1746   border-top-left-radius: 4px;
1747   border-top-right-radius: 4px;
1748   color: #0a0a0a;
1749   float: right;
1750   height: 100%;
1751   margin: 0 0.5em;
1752   padding: 10px 8px 0 8px; }
1753   #conversejs .toggle-controlbox span {
1754     color: white; }
1755
1756 #conversejs #converse-roster {
1757   text-align: left;
1758   width: 100%;
1759   position: relative;
1760   margin: 1em 0 0 0;
1761   height: 194px;
1762   height: calc(100% - 50px - 20px);
1763   overflow: hidden;
1764   padding: 0;
1765   padding-bottom: 3em; }
1766   #conversejs #converse-roster.no-contact-requests {
1767     height: calc(100% - 25px - 20px); }
1768   #conversejs #converse-roster .search-xmpp ul li.chat-info {
1769     padding-left: 10px; }
1770   #conversejs #converse-roster .roster-filter-group {
1771     margin: 0 1em;
1772     width: 100%;
1773     padding-right: 2em;
1774     /* (jQ addClass:) if input has value: */
1775     /* (jQ addClass:) if mouse is over the 'x' input area*/ }
1776     #conversejs #converse-roster .roster-filter-group .roster-filter {
1777       float: left;
1778       background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg==) no-repeat right -20px center;
1779       border: 1px solid #999;
1780       font-size: 14px;
1781       height: 25px;
1782       margin: 0;
1783       padding: 0;
1784       padding-left: 0.4em;
1785       width: 53%; }
1786     #conversejs #converse-roster .roster-filter-group .roster-filter.x {
1787       background-position: right 3px center; }
1788     #conversejs #converse-roster .roster-filter-group .roster-filter.onX {
1789       cursor: pointer; }
1790     #conversejs #converse-roster .roster-filter-group .filter-type {
1791       display: table-cell;
1792       float: right;
1793       font-size: calc(14px - 2px);
1794       height: 25px;
1795       padding: 0;
1796       width: 47%;
1797       border-radius: 0;
1798       border: 1px solid; }
1799   #conversejs #converse-roster .roster-contacts {
1800     margin: 0;
1801     height: 100%;
1802     overflow-x: hidden;
1803     overflow-y: auto; }
1804     #conversejs #converse-roster .roster-contacts dt.roster-group {
1805       border: none;
1806       color: #818479;
1807       display: none;
1808       font-weight: normal;
1809       margin-top: 0.5em;
1810       padding: 0.5em 1em;
1811       text-shadow: 0 1px 0 #FAFAFA; }
1812       #conversejs #converse-roster .roster-contacts dt.roster-group:hover {
1813         background-color: #DCF9F6; }
1814       #conversejs #converse-roster .roster-contacts dt.roster-group .group-toggle {
1815         color: #818479;
1816         display: block;
1817         width: 100%; }
1818     #conversejs #converse-roster .roster-contacts dd {
1819       border: none;
1820       clear: both;
1821       color: #818479;
1822       display: block;
1823       height: 24px;
1824       overflow-y: hidden;
1825       padding: 0.3em 0 0.3em 1em;
1826       text-shadow: 0 1px 0 #FAFAFA;
1827       line-height: 14px;
1828       width: 100%; }
1829       #conversejs #converse-roster .roster-contacts dd .open-chat {
1830         max-width: 90%; }
1831       #conversejs #converse-roster .roster-contacts dd:hover {
1832         background-color: #DCF9F6; }
1833         #conversejs #converse-roster .roster-contacts dd:hover .remove-xmpp-contact {
1834           display: inline-block; }
1835         #conversejs #converse-roster .roster-contacts dd:hover .open-chat {
1836           width: 80%; }
1837       #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact.request-actions {
1838         margin-left: 0.5em;
1839         margin-bottom: 0.3em;
1840         float: right; }
1841       #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .req-contact-name {
1842         width: 69%;
1843         padding: 0; }
1844       #conversejs #converse-roster .roster-contacts dd.current-xmpp-contact span {
1845         font-size: 16px;
1846         float: left;
1847         color: #2A9D8F; }
1848       #conversejs #converse-roster .roster-contacts dd.odd {
1849         background-color: #DCEAC5;
1850         /* Make this difference */ }
1851       #conversejs #converse-roster .roster-contacts dd a, #conversejs #converse-roster .roster-contacts dd span {
1852         text-shadow: 0 1px 0 #FAFAFA;
1853         display: inline-block;
1854         overflow: hidden;
1855         white-space: nowrap;
1856         text-overflow: ellipsis; }
1857       #conversejs #converse-roster .roster-contacts dd span {
1858         padding: 0 0.5em 0 0;
1859         height: 100%; }
1860       #conversejs #converse-roster .roster-contacts dd a.decline-xmpp-request {
1861         margin-left: 5px; }
1862       #conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact {
1863         float: right;
1864         margin-right: 1em;
1865         display: none;
1866         color: #818479; }
1867   #conversejs #converse-roster span.pending-contact-name {
1868     width: 80%; }
1869
1870 #conversejs .chat-head-chatroom {
1871   background-color: #E76F51; }
1872   #conversejs .chat-head-chatroom .chatroom-topic {
1873     color: white;
1874     font-size: 80%;
1875     font-style: italic;
1876     height: 1.3em;
1877     overflow: hidden;
1878     text-overflow: ellipsis;
1879     white-space: nowrap;
1880     margin: 0;
1881     margin-top: 0.3em; }
1882 #conversejs .chatroom {
1883   width: 300px; }
1884   @media screen and (max-width: 480px) {
1885     #conversejs .chatroom {
1886       width: 100%; }
1887       #conversejs .chatroom .box-flyout {
1888         min-width: 100%;
1889         width: 100%; } }
1890   #conversejs .chatroom .box-flyout {
1891     min-width: 300px;
1892     width: 300px; }
1893     #conversejs .chatroom .box-flyout .chatroom-body {
1894       height: 289px;
1895       border-bottom-left-radius: 4px;
1896       border-bottom-right-radius: 4px;
1897       height: -webkit-calc(100% - 55px);
1898       height: calc(100% - 55px);
1899       background-color: white;
1900       border-top: 0;
1901       width: 100%; }
1902       #conversejs .chatroom .box-flyout .chatroom-body .chat-area {
1903         word-wrap: break-word;
1904         height: 100%;
1905         max-width: 70%;
1906         float: left;
1907         min-width: 200px; }
1908         #conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
1909           padding: 0 0.5em 0 0.5em; }
1910         #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full {
1911           max-width: 100%; }
1912       #conversejs .chatroom .box-flyout .chatroom-body .mentioned {
1913         font-weight: bold; }
1914       #conversejs .chatroom .box-flyout .chatroom-body .chat-msg-room {
1915         color: #1A9707; }
1916       #conversejs .chatroom .box-flyout .chatroom-body .occupants {
1917         vertical-align: top;
1918         background-color: white;
1919         overflow: hidden;
1920         border-left: 1px solid #818479;
1921         border-bottom-right-radius: 4px;
1922         min-width: 30%;
1923         height: 100%; }
1924         #conversejs .chatroom .box-flyout .chatroom-body .occupants.hidden {
1925           display: none; }
1926         #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
1927           padding: 0.3em;
1928           font-weight: bold; }
1929         #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupant-list {
1930           height: 85%;
1931           height: calc(100% - 70px);
1932           overflow-x: hidden;
1933           overflow-y: auto;
1934           list-style: none; }
1935           #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupant-list li {
1936             cursor: default;
1937             display: block;
1938             font-size: 12px;
1939             overflow: hidden;
1940             padding: 2px 5px;
1941             text-overflow: ellipsis;
1942             white-space: nowrap;
1943             width: 100px; }
1944             #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupant-list li.moderator {
1945               color: #D24E2B; }
1946       #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container {
1947         background-color: white;
1948         border-bottom-left-radius: 4px;
1949         border-bottom-right-radius: 4px;
1950         border: 0;
1951         color: #818479;
1952         font-size: 14px;
1953         height: 289px;
1954         height: -webkit-calc(100% - 55px);
1955         height: calc(100% - 55px);
1956         overflow-y: auto;
1957         position: absolute; }
1958   #conversejs .chatroom .chat-textarea {
1959     border-bottom-right-radius: 0; }
1960   #conversejs .chatroom .room-invite {
1961     margin: 0.3em; }
1962     #conversejs .chatroom .room-invite .invited-contact {
1963       margin: -1px 0 0 -1px;
1964       width: 100%;
1965       border: 1px solid #999; }
1966       #conversejs .chatroom .room-invite .invited-contact.tt-input {
1967         width: 100%;
1968         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; }
1969         #conversejs .chatroom .room-invite .invited-contact.tt-input:focus {
1970           border-color: #E76F51; }
1971       #conversejs .chatroom .room-invite .invited-contact.tt-hint {
1972         color: transparent;
1973         background-color: white; }
1974     #conversejs .chatroom .room-invite .tt-dropdown-menu {
1975       width: 96%;
1976       max-height: 250px;
1977       background: #E76F51;
1978       border-bottom-right-radius: 4px;
1979       border-bottom-left-radius: 4px;
1980       overflow-y: auto; }
1981       #conversejs .chatroom .room-invite .tt-dropdown-menu .tt-suggestion p {
1982         color: white;
1983         cursor: pointer;
1984         font-size: 11px;
1985         text-overflow: ellipsis;
1986         overflow-x: hidden; }
1987         #conversejs .chatroom .room-invite .tt-dropdown-menu .tt-suggestion p:hover {
1988           background-color: #FF977C; }
1989       #conversejs .chatroom .room-invite .tt-dropdown-menu .tt-suggestion .tt-highlight {
1990         background-color: #D24E2B; }
1991
1992 #conversejs #minimized-chats {
1993   border-top-left-radius: 4px;
1994   border-top-right-radius: 4px;
1995   color: white;
1996   display: none;
1997   float: right;
1998   font-weight: bold;
1999   height: 100%;
2000   margin: 0 0.5em;
2001   padding: 0;
2002   width: 130px; }
2003   #conversejs #minimized-chats #toggle-minimized-chats {
2004     border-top-left-radius: 4px;
2005     border-top-right-radius: 4px;
2006     background-color: #2A9D8F;
2007     color: white;
2008     position: relative;
2009     padding: 10px 0 0 0;
2010     display: block;
2011     width: 100%;
2012     height: 100%;
2013     text-align: center; }
2014   #conversejs #minimized-chats .minimized-chats-flyout {
2015     height: auto;
2016     bottom: 35px; }
2017     #conversejs #minimized-chats .minimized-chats-flyout .chat-head {
2018       padding: 0.3em;
2019       border-radius: 4px;
2020       width: 130px;
2021       height: 35px;
2022       margin-bottom: 0.2em;
2023       box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4); }
2024     #conversejs #minimized-chats .minimized-chats-flyout.minimized {
2025       height: auto; }
2026   #conversejs #minimized-chats .unread-message-count,
2027   #conversejs #minimized-chats .chat-head-message-count {
2028     font-weight: bold;
2029     background-color: white;
2030     border: 1px solid;
2031     text-shadow: 1px 1px 0 #FAFAFA;
2032     color: #D24E2B;
2033     border-radius: 5px;
2034     padding: 2px 4px;
2035     font-size: 16px;
2036     text-align: center;
2037     position: absolute;
2038     right: 116px;
2039     bottom: 10px; }
2040
2041 /*# sourceMappingURL=converse.css.map */