/*! * Converse.js (Web-based XMPP instant messaging client) * http://conversejs.org * * Copyright (c) 2012-2014, JC Brand * Licensed under the Mozilla Public License */ /* Color scheme helpers: https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51 http://paletton.com/#uid=70a0u0kkNs+b4JOgryLpxqpsbkI */ @font-face { font-family: 'Converse-js'; src: url("../fonticons/fonts/icomoon.eot?wvi0ht"); src: url("../fonticons/fonts/icomoon.eot?wvi0ht#iefix") format("embedded-opentype"), url("../fonticons/fonts/icomoon.ttf?wvi0ht") format("truetype"), url("../fonticons/fonts/icomoon.woff?wvi0ht") format("woff"), url("../fonticons/fonts/icomoon.svg?wvi0ht#icomoon") format("svg"); font-weight: normal; font-style: normal; } .icon-conversejs { padding-right: 0.2em; 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"; } #converse-embedded-chat .icon-address-book:before, #conversejs .icon-address-book:before { content: "\270f"; } #converse-embedded-chat .icon-attachment:before, #conversejs .icon-attachment:before { content: "\e032"; } #converse-embedded-chat .icon-away:before, #conversejs .icon-away:before { content: "\25fb"; } #converse-embedded-chat .icon-blocked:before, #conversejs .icon-blocked:before { content: "\2718"; } #converse-embedded-chat .icon-bold:before, #conversejs .icon-bold:before { content: "\e04d"; } #converse-embedded-chat .icon-bubbles2:before, #conversejs .icon-bubbles2:before { content: "\e016"; } #converse-embedded-chat .icon-bubbles3:before, #conversejs .icon-bubbles3:before { content: "\e017"; } #converse-embedded-chat .icon-bubbles:before, #conversejs .icon-bubbles:before { content: "\e015"; } #converse-embedded-chat .icon-busy:before, #conversejs .icon-busy:before { content: "\e004"; } #converse-embedded-chat .icon-dnd:before, #conversejs .icon-dnd:before { content: "\e004"; } #converse-embedded-chat .icon-cancel-circle:before, #conversejs .icon-cancel-circle:before { content: "\e058"; } #converse-embedded-chat .icon-checkmark:before, #conversejs .icon-checkmark:before { content: "\2713"; } #converse-embedded-chat .icon-close:before, #conversejs .icon-close:before { content: "\2715"; } #converse-embedded-chat .icon-closed:before, #conversejs .icon-closed:before { content: "\25ba"; } #converse-embedded-chat .icon-cog:before, #conversejs .icon-cog:before { content: "\e02f"; } #converse-embedded-chat .icon-cogs:before, #conversejs .icon-cogs:before { content: "\e022"; } #converse-embedded-chat .icon-conversejs:before, #conversejs .icon-conversejs:before { content: "\e600"; } #converse-embedded-chat .icon-database:before, #conversejs .icon-database:before { content: "\f1c0"; } #converse-embedded-chat .icon-envelope:before, #conversejs .icon-envelope:before { content: "\f003"; } #converse-embedded-chat .icon-exit:before, #conversejs .icon-exit:before { content: "\e601"; } #converse-embedded-chat .icon-eye-blocked:before, #conversejs .icon-eye-blocked:before { content: "\e031"; } #converse-embedded-chat .icon-eye:before, #conversejs .icon-eye:before { content: "\e030"; } #converse-embedded-chat .icon-github:before, #conversejs .icon-github:before { content: "\eab0"; } #converse-embedded-chat .icon-globe:before, #conversejs .icon-globe:before { content: "\f0ac"; } #converse-embedded-chat .icon-google2:before, #conversejs .icon-google2:before { content: "\ea89"; } #converse-embedded-chat .icon-group:before, #conversejs .icon-group:before { content: "\f0c0"; } #converse-embedded-chat .icon-happy:before, #conversejs .icon-happy:before { content: "\263b"; } #converse-embedded-chat .icon-heart2:before, #conversejs .icon-heart2:before { content: "\f004"; } #converse-embedded-chat .icon-heart:before, #conversejs .icon-heart:before { content: "\2764"; } #converse-embedded-chat .icon-heart_empty:before, #conversejs .icon-heart_empty:before { content: "\f08a"; } #converse-embedded-chat .icon-hide-users:before, #conversejs .icon-hide-users:before { content: "\e01c"; } #converse-embedded-chat .icon-home:before, #conversejs .icon-home:before { content: "\e000"; } #converse-embedded-chat .icon-idcard-dark:before, #conversejs .icon-idcard-dark:before { content: "\f2c2"; } #converse-embedded-chat .icon-idcard:before, #conversejs .icon-idcard:before { content: "\f2c3"; } #converse-embedded-chat .icon-image:before, #conversejs .icon-image:before { content: "\2b14"; } #converse-embedded-chat .icon-info:before, #conversejs .icon-info:before { content: "\2360"; } #converse-embedded-chat .icon-italic:before, #conversejs .icon-italic:before { content: "\e04f"; } #converse-embedded-chat .icon-key:before, #conversejs .icon-key:before { content: "\e028"; } #converse-embedded-chat .icon-legal:before, #conversejs .icon-legal:before { content: "\f0e3"; } #converse-embedded-chat .icon-lock-2:before, #conversejs .icon-lock-2:before { content: "\e027"; } #converse-embedded-chat .icon-minus:before, #conversejs .icon-minus:before { content: "\e05a"; } #converse-embedded-chat .icon-music:before, #conversejs .icon-music:before { content: "\266b"; } #converse-embedded-chat .icon-newtab:before, #conversejs .icon-newtab:before { content: "\e053"; } #converse-embedded-chat .icon-notebook:before, #conversejs .icon-notebook:before { content: "\2710"; } #converse-embedded-chat .icon-notification:before, #conversejs .icon-notification:before { content: "\e01f"; } #converse-embedded-chat .icon-offline:before, #conversejs .icon-offline:before { content: "\e002"; } #converse-embedded-chat .icon-logout:before, #conversejs .icon-logout:before { content: "\e002"; } #converse-embedded-chat .icon-online:before, #conversejs .icon-online:before { content: "\25fc"; } #converse-embedded-chat .icon-opened:before, #conversejs .icon-opened:before { content: "\25bc"; } #converse-embedded-chat .icon-pencil:before, #conversejs .icon-pencil:before { content: "\270e"; } #converse-embedded-chat .icon-phone-hang-up:before, #conversejs .icon-phone-hang-up:before { content: "\260e"; } #converse-embedded-chat .icon-phone:before, #conversejs .icon-phone:before { content: "\260f"; } #converse-embedded-chat .icon-plus:before, #conversejs .icon-plus:before { content: "\271a"; } #converse-embedded-chat .icon-pushpin:before, #conversejs .icon-pushpin:before { content: "\e012"; } #converse-embedded-chat .icon-quotes-left:before, #conversejs .icon-quotes-left:before { content: "\e01d"; } #converse-embedded-chat .icon-reddit:before, #conversejs .icon-reddit:before { content: "\eac6"; } #converse-embedded-chat .icon-remove:before, #conversejs .icon-remove:before { content: "\e02d"; } #converse-embedded-chat .icon-room-info:before, #conversejs .icon-room-info:before { content: "\e059"; } #converse-embedded-chat .icon-save:before, #conversejs .icon-save:before { content: "\f0c7"; } #converse-embedded-chat .icon-search:before, #conversejs .icon-search:before { content: "\e021"; } #converse-embedded-chat .icon-show-users:before, #conversejs .icon-show-users:before { content: "\e01e"; } #converse-embedded-chat .icon-smiley:before, #conversejs .icon-smiley:before { content: "\263a"; } #converse-embedded-chat .icon-snowflake:before, #conversejs .icon-snowflake:before { content: "\f2dc"; } #converse-embedded-chat .icon-spell-check:before, #conversejs .icon-spell-check:before { content: "\e045"; } #converse-embedded-chat .icon-spinner:before, #conversejs .icon-spinner:before { content: "\231b"; } #converse-embedded-chat .icon-star:before, #conversejs .icon-star:before { content: "\f005"; } #converse-embedded-chat .icon-star_empty:before, #conversejs .icon-star_empty:before { content: "\f006"; } #converse-embedded-chat .icon-strikethrough:before, #conversejs .icon-strikethrough:before { content: "\e050"; } #converse-embedded-chat .icon-twitter:before, #conversejs .icon-twitter:before { content: "\ea96"; } #converse-embedded-chat .icon-underline:before, #conversejs .icon-underline:before { content: "\e04e"; } #converse-embedded-chat .icon-unlocked:before, #conversejs .icon-unlocked:before { content: "\e025"; } #converse-embedded-chat .icon-user:before, #conversejs .icon-user:before { content: "\e01a"; } #converse-embedded-chat .icon-users:before, #conversejs .icon-users:before { content: "\e01b"; } #converse-embedded-chat .icon-warning:before, #conversejs .icon-warning:before { content: "\26a0"; } #converse-embedded-chat .icon-wrench:before, #conversejs .icon-wrench:before { content: "\e024"; } #converse-embedded-chat .icon-xa:before, #conversejs .icon-xa:before { content: "\e602"; } #converse-embedded-chat .icon-zoomin:before, #conversejs .icon-zoomin:before { content: "\e02b"; } #converse-embedded-chat .icon-zoomout:before, #conversejs .icon-zoomout:before { content: "\e02a"; } #converse-embedded-chat [data-icon]:before, #conversejs [data-icon]:before { content: attr(data-icon); font-family: 'Converse-js'; font-variant: normal; font-weight: normal; line-height: 1; speak: none; text-transform: none; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #converse-embedded-chat [class^="icon-"]:before, #converse-embedded-chat [class*=" icon-"]:before, #conversejs [class^="icon-"]:before, #conversejs [class*=" icon-"]:before { background-position: 14px 14px; background-image: none; font-family: 'Converse-js'; font-style: normal; font-variant: normal; font-weight: normal; width: auto; height: auto; line-height: 1; speak: none; text-transform: none; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #conversejs { /*! Pure v0.6.1-pre Copyright 2014 Yahoo! Inc. All rights reserved. Licensed under the BSD License. https://github.com/yahoo/pure/blob/master/LICENSE.md */ /*! normalize.css v^3.0 | MIT License | git.io/normalize Copyright (c) Nicolas Gallagher and Jonathan Neal */ /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS and IE text size adjust after device orientation change, * without disabling user zoom. */ /** * Remove default margin. */ /* HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 * and Firefox. * Correct `block` display not defined for `main` in IE 11. */ /** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ /** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. */ /* Links ========================================================================== */ /** * Remove the gray background color from active links in IE 10. */ /** * Improve readability of focused elements when they are also in an * active/hover state. */ /* Text-level semantics ========================================================================== */ /** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ /** * Address styling not present in Safari and Chrome. */ /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari, and Chrome. */ /** * Address styling not present in IE 8/9. */ /** * Address inconsistent and variable font size in all browsers. */ /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ /* Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9/10. */ /** * Correct overflow not hidden in IE 9/10/11. */ /* Grouping content ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari. */ /** * Address differences between Firefox and other browsers. */ /** * Contain overflow in all browsers. */ /** * Address odd `em`-unit font size rendering in all browsers. */ /* Forms ========================================================================== */ /** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */ /** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ /** * Re-set default cursor for disabled elements. */ /** * Remove inner padding and border in Firefox 4+. */ /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ /** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. */ /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ /** * Define consistent border, margin, and padding. */ /** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ /** * Remove default vertical scrollbar in IE 8/9/10/11. */ /** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ /* Tables ========================================================================== */ /** * Remove most spacing between table cells. */ /*csslint important:false*/ /* ========================================================================== Pure Base Extras ========================================================================== */ /** * Extra rules that Pure adds on top of Normalize.css */ /** * Always hide an element when it has the `hidden` HTML attribute. */ /** * Add this class to an image to make it fit within it's fluid parent wrapper while maintaining * aspect ratio. */ /*! Pure v0.6.1-pre Copyright 2014 Yahoo! Inc. All rights reserved. Licensed under the BSD License. https://github.com/yahoo/pure/blob/master/LICENSE.md */ /*csslint box-model:false*/ /* Box-model set to false because we're setting a height on select elements, which also have border and padding. This is done because some browsers don't render the padding. We explicitly set the box-model for select elements to border-box, so we can ignore the csslint warning. */ /* Need to separate out the :not() selector from the rest of the CSS 2.1 selectors since IE8 won't execute CSS that contains a CSS3 selector. */ /* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */ /* May be able to remove this tweak as color inputs become more standardized across browsers. */ /* Need to separate out the :not() selector from the rest of the CSS 2.1 selectors since IE8 won't execute CSS that contains a CSS3 selector. */ /* Need to separate out the :not() selector from the rest of the CSS 2.1 selectors since IE8 won't execute CSS that contains a CSS3 selector. */ /* Need to separate out the :not() selector from the rest of the CSS 2.1 selectors since IE8 won't execute CSS that contains a CSS3 selector. */ /* Aligned Forms */ /* Rounded Inputs */ /* Grouped Inputs */ /* Inline help for forms */ /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */ /* Block help for forms */ /*! Pure v0.6.1-pre Copyright 2014 Yahoo! Inc. All rights reserved. Licensed under the BSD License. https://github.com/yahoo/pure/blob/master/LICENSE.md */ /* Firefox: Get rid of the inner focus border */ /*csslint outline-none:false*/ /* Firefox: Get rid of the inner focus border */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #conversejs html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } #conversejs body { margin: 0; } #conversejs article, #conversejs aside, #conversejs details, #conversejs figcaption, #conversejs figure, #conversejs footer, #conversejs header, #conversejs hgroup, #conversejs main, #conversejs menu, #conversejs nav, #conversejs section, #conversejs summary { display: block; } #conversejs audio, #conversejs canvas, #conversejs progress, #conversejs video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } #conversejs audio:not([controls]) { display: none; height: 0; } #conversejs [hidden], #conversejs template { display: none; } #conversejs a { background-color: transparent; } #conversejs a:active, #conversejs a:hover { outline: 0; } #conversejs abbr[title] { border-bottom: 1px dotted; } #conversejs b, #conversejs strong { font-weight: bold; } #conversejs dfn { font-style: italic; } #conversejs h1 { font-size: 2em; margin: 0.67em 0; } #conversejs mark { background: #ff0; color: #000; } #conversejs small { font-size: 80%; } #conversejs sub, #conversejs sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } #conversejs sup { top: -0.5em; } #conversejs sub { bottom: -0.25em; } #conversejs img { border: 0; } #conversejs svg:not(:root) { overflow: hidden; } #conversejs figure { margin: 1em 40px; } #conversejs hr { box-sizing: content-box; height: 0; } #conversejs pre { overflow: auto; } #conversejs code, #conversejs kbd, #conversejs pre, #conversejs samp { font-family: monospace, monospace; font-size: 1em; } #conversejs button, #conversejs input, #conversejs optgroup, #conversejs select, #conversejs textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ } #conversejs button { overflow: visible; } #conversejs button, #conversejs select { text-transform: none; } #conversejs button, #conversejs html input[type="button"], #conversejs input[type="reset"], #conversejs input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } #conversejs button[disabled], #conversejs html input[disabled] { cursor: default; } #conversejs button::-moz-focus-inner, #conversejs input::-moz-focus-inner { border: 0; padding: 0; } #conversejs input { line-height: normal; } #conversejs input[type="checkbox"], #conversejs input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } #conversejs input[type="number"]::-webkit-inner-spin-button, #conversejs input[type="number"]::-webkit-outer-spin-button { height: auto; } #conversejs input[type="search"] { -webkit-appearance: textfield; /* 1 */ box-sizing: content-box; /* 2 */ } #conversejs input[type="search"]::-webkit-search-cancel-button, #conversejs input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } #conversejs fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } #conversejs legend { border: 0; /* 1 */ padding: 0; /* 2 */ } #conversejs textarea { overflow: auto; } #conversejs optgroup { font-weight: bold; } #conversejs table { border-collapse: collapse; border-spacing: 0; } #conversejs td, #conversejs th { padding: 0; } #conversejs .hidden, #conversejs [hidden] { display: none !important; } #conversejs .pure-img { max-width: 100%; height: auto; display: block; } #conversejs .pure-form input[type="text"], #conversejs .pure-form input[type="password"], #conversejs .pure-form input[type="email"], #conversejs .pure-form input[type="url"], #conversejs .pure-form input[type="date"], #conversejs .pure-form input[type="month"], #conversejs .pure-form input[type="time"], #conversejs .pure-form input[type="datetime"], #conversejs .pure-form input[type="datetime-local"], #conversejs .pure-form input[type="week"], #conversejs .pure-form input[type="number"], #conversejs .pure-form input[type="search"], #conversejs .pure-form input[type="tel"], #conversejs .pure-form input[type="color"], #conversejs .pure-form select, #conversejs .pure-form textarea { padding: 0.5em 0.6em; display: inline-block; border: 1px solid #ccc; box-shadow: inset 0 1px 3px #ddd; border-radius: 4px; vertical-align: middle; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #conversejs .pure-form input:not([type]) { padding: 0.5em 0.6em; display: inline-block; border: 1px solid #ccc; box-shadow: inset 0 1px 3px #ddd; border-radius: 4px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #conversejs .pure-form input[type="color"] { padding: 0.2em 0.5em; } #conversejs .pure-form input[type="text"]:focus, #conversejs .pure-form input[type="password"]:focus, #conversejs .pure-form input[type="email"]:focus, #conversejs .pure-form input[type="url"]:focus, #conversejs .pure-form input[type="date"]:focus, #conversejs .pure-form input[type="month"]:focus, #conversejs .pure-form input[type="time"]:focus, #conversejs .pure-form input[type="datetime"]:focus, #conversejs .pure-form input[type="datetime-local"]:focus, #conversejs .pure-form input[type="week"]:focus, #conversejs .pure-form input[type="number"]:focus, #conversejs .pure-form input[type="search"]:focus, #conversejs .pure-form input[type="tel"]:focus, #conversejs .pure-form input[type="color"]:focus, #conversejs .pure-form select:focus, #conversejs .pure-form textarea:focus { outline: 0; border-color: #1A9707; } #conversejs .pure-form input:not([type]):focus { outline: 0; border-color: #1A9707; } #conversejs .pure-form input[type="file"]:focus, #conversejs .pure-form input[type="radio"]:focus, #conversejs .pure-form input[type="checkbox"]:focus { outline: thin solid #1A9707; outline: 1px auto #1A9707; } #conversejs .pure-form .pure-checkbox, #conversejs .pure-form .pure-radio { margin: 0.5em 0; display: block; } #conversejs .pure-form input[type="text"][disabled], #conversejs .pure-form input[type="password"][disabled], #conversejs .pure-form input[type="email"][disabled], #conversejs .pure-form input[type="url"][disabled], #conversejs .pure-form input[type="date"][disabled], #conversejs .pure-form input[type="month"][disabled], #conversejs .pure-form input[type="time"][disabled], #conversejs .pure-form input[type="datetime"][disabled], #conversejs .pure-form input[type="datetime-local"][disabled], #conversejs .pure-form input[type="week"][disabled], #conversejs .pure-form input[type="number"][disabled], #conversejs .pure-form input[type="search"][disabled], #conversejs .pure-form input[type="tel"][disabled], #conversejs .pure-form input[type="color"][disabled], #conversejs .pure-form select[disabled], #conversejs .pure-form textarea[disabled] { cursor: not-allowed; background-color: #eaeded; color: #cad2d3; } #conversejs .pure-form input:not([type])[disabled] { cursor: not-allowed; background-color: #eaeded; color: #cad2d3; } #conversejs .pure-form input[readonly], #conversejs .pure-form select[readonly], #conversejs .pure-form textarea[readonly] { background-color: #eee; /* menu hover bg color */ color: #777; /* menu text color */ border-color: #ccc; } #conversejs .pure-form input:focus:invalid, #conversejs .pure-form textarea:focus:invalid, #conversejs .pure-form select:focus:invalid { color: #b94a48; border-color: #e9322d; } #conversejs .pure-form input[type="file"]:focus:invalid:focus, #conversejs .pure-form input[type="radio"]:focus:invalid:focus, #conversejs .pure-form input[type="checkbox"]:focus:invalid:focus { outline-color: #e9322d; } #conversejs .pure-form select { /* Normalizes the height; padding is not sufficient. */ height: 2.25em; border: 1px solid #ccc; background-color: white; } #conversejs .pure-form select[multiple] { height: auto; } #conversejs .pure-form label { margin: 0.5em 0 0.2em; } #conversejs .pure-form fieldset { margin: 0; padding: 0.35em 0 0.35em; border: 0; } #conversejs .pure-form legend { display: block; width: 100%; padding: 0.3em 0; margin-bottom: 0.3em; color: #333; border-bottom: 1px solid #e5e5e5; } #conversejs .pure-form-stacked input[type="text"], #conversejs .pure-form-stacked input[type="password"], #conversejs .pure-form-stacked input[type="email"], #conversejs .pure-form-stacked input[type="url"], #conversejs .pure-form-stacked input[type="date"], #conversejs .pure-form-stacked input[type="month"], #conversejs .pure-form-stacked input[type="time"], #conversejs .pure-form-stacked input[type="datetime"], #conversejs .pure-form-stacked input[type="datetime-local"], #conversejs .pure-form-stacked input[type="week"], #conversejs .pure-form-stacked input[type="number"], #conversejs .pure-form-stacked input[type="search"], #conversejs .pure-form-stacked input[type="tel"], #conversejs .pure-form-stacked input[type="color"], #conversejs .pure-form-stacked input[type="file"], #conversejs .pure-form-stacked select, #conversejs .pure-form-stacked label, #conversejs .pure-form-stacked textarea { display: block; margin: 0.25em 0; } #conversejs .pure-form-stacked input:not([type]) { display: block; margin: 0.25em 0; } #conversejs .pure-form-aligned input, #conversejs .pure-form-aligned textarea, #conversejs .pure-form-aligned select, #conversejs .pure-form-aligned .pure-help-inline, #conversejs .pure-form-message-inline { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; } #conversejs .pure-form-aligned textarea { vertical-align: top; } #conversejs .pure-form-aligned .pure-control-group { margin-bottom: 0.5em; } #conversejs .pure-form-aligned .pure-control-group label { text-align: right; display: inline-block; vertical-align: middle; width: 10em; margin: 0 1em 0 0; } #conversejs .pure-form-aligned .pure-controls { margin: 1.5em 0 0 11em; } #conversejs .pure-form input.pure-input-rounded, #conversejs .pure-form .pure-input-rounded { border-radius: 2em; padding: 0.5em 1em; } #conversejs .pure-form .pure-group fieldset { margin-bottom: 10px; } #conversejs .pure-form .pure-group input, #conversejs .pure-form .pure-group textarea { display: block; padding: 10px; margin: 0 0 -1px; border-radius: 0; position: relative; top: -1px; } #conversejs .pure-form .pure-group input:focus, #conversejs .pure-form .pure-group textarea:focus { z-index: 3; } #conversejs .pure-form .pure-group input:first-child, #conversejs .pure-form .pure-group textarea:first-child { top: 1px; border-radius: 4px 4px 0 0; margin: 0; } #conversejs .pure-form .pure-group input:first-child:last-child, #conversejs .pure-form .pure-group textarea:first-child:last-child { top: 1px; border-radius: 4px; margin: 0; } #conversejs .pure-form .pure-group input:last-child, #conversejs .pure-form .pure-group textarea:last-child { top: -2px; border-radius: 0 0 4px 4px; margin: 0; } #conversejs .pure-form .pure-group button { margin: 0.35em 0; } #conversejs .pure-form .pure-input-1 { width: 100%; } #conversejs .pure-form .pure-input-3-4 { width: 75%; } #conversejs .pure-form .pure-input-2-3 { width: 66%; } #conversejs .pure-form .pure-input-1-2 { width: 50%; } #conversejs .pure-form .pure-input-1-3 { width: 33%; } #conversejs .pure-form .pure-input-1-4 { width: 25%; } #conversejs .pure-form .pure-help-inline, #conversejs .pure-form-message-inline { display: inline-block; padding-left: 0.3em; color: #666; vertical-align: middle; font-size: 0.875em; } #conversejs .pure-form-message { display: block; color: #666; font-size: 0.875em; } @media only screen and (max-width: 480px) { #conversejs { /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */ } #conversejs .pure-form button[type="submit"] { margin: 0.7em 0 0; } #conversejs .pure-form input:not([type]), #conversejs .pure-form input[type="text"], #conversejs .pure-form input[type="password"], #conversejs .pure-form input[type="email"], #conversejs .pure-form input[type="url"], #conversejs .pure-form input[type="date"], #conversejs .pure-form input[type="month"], #conversejs .pure-form input[type="time"], #conversejs .pure-form input[type="datetime"], #conversejs .pure-form input[type="datetime-local"], #conversejs .pure-form input[type="week"], #conversejs .pure-form input[type="number"], #conversejs .pure-form input[type="search"], #conversejs .pure-form input[type="tel"], #conversejs .pure-form input[type="color"], #conversejs .pure-form label { margin-bottom: 0.3em; display: block; } #conversejs .pure-group input:not([type]), #conversejs .pure-group input[type="text"], #conversejs .pure-group input[type="password"], #conversejs .pure-group input[type="email"], #conversejs .pure-group input[type="url"], #conversejs .pure-group input[type="date"], #conversejs .pure-group input[type="month"], #conversejs .pure-group input[type="time"], #conversejs .pure-group input[type="datetime"], #conversejs .pure-group input[type="datetime-local"], #conversejs .pure-group input[type="week"], #conversejs .pure-group input[type="number"], #conversejs .pure-group input[type="search"], #conversejs .pure-group input[type="tel"], #conversejs .pure-group input[type="color"] { margin-bottom: 0; } #conversejs .pure-form-aligned .pure-control-group label { margin-bottom: 0.3em; text-align: left; display: block; width: 100%; } #conversejs .pure-form-aligned .pure-controls { margin: 1.5em 0 0 0; } #conversejs .pure-form .pure-help-inline, #conversejs .pure-form-message-inline, #conversejs .pure-form-message { display: block; font-size: 0.75em; /* Increased bottom padding to make it group with its related input element. */ padding: 0.2em 0 0.8em; } } #conversejs .pure-button { /* Structure */ display: inline-block; zoom: 1; line-height: normal; white-space: nowrap; vertical-align: middle; text-align: center; cursor: pointer; -webkit-user-drag: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #conversejs .pure-button::-moz-focus-inner { padding: 0; border: 0; } #conversejs .pure-button { font-family: inherit; font-size: 100%; padding: 0.5em 1em; color: #444; /* rgba not supported (IE 8) */ color: rgba(0, 0, 0, 0.6); /* rgba supported */ border: 1px solid #999; /*IE 6/7/8*/ border: none transparent; /*IE9 + everything else*/ background-color: #E6E6E6; text-decoration: none; border-radius: 2px; } #conversejs .pure-button-hover, #conversejs .pure-button:hover, #conversejs .pure-button:focus { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000',GradientType=0); 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))); background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1)); background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); } #conversejs .pure-button:focus { outline: 0; } #conversejs .pure-button-active, #conversejs .pure-button:active { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset; border-color: #000 \9; } #conversejs .pure-button[disabled], #conversejs .pure-button-disabled, #conversejs .pure-button-disabled:hover, #conversejs .pure-button-disabled:focus, #conversejs .pure-button-disabled:active { border: none; background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); filter: alpha(opacity=40); -khtml-opacity: 0.40; -moz-opacity: 0.40; opacity: 0.40; cursor: not-allowed; box-shadow: none; } #conversejs .pure-button-hidden { display: none; } #conversejs .pure-button::-moz-focus-inner { padding: 0; border: 0; } #conversejs .pure-button-primary, #conversejs .pure-button-selected, #conversejs a.pure-button-primary, #conversejs a.pure-button-selected { background-color: #0078e7; color: #fff; } #conversejs *, #conversejs *:before, #conversejs *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media screen and (max-width: 480px) { #conversejs { margin: 0; right: 10px; left: 10px; bottom: 5px; } } @media screen and (max-height: 450px) { #conversejs { margin: 0; right: 10px; left: 10px; bottom: 5px; } } #conversejs ul li { height: auto; } #conversejs 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 textarea, #conversejs input[type=submit], #conversejs input[type=button], #conversejs input[type=text], #conversejs input[type=password], #conversejs button { font-size: 16px; padding: 0.25em; min-height: 0; } #conversejs strong { font-weight: 700; } #conversejs ol, #conversejs ul { list-style: none; } #conversejs li { height: 10px; } #conversejs ul, #conversejs ol, #conversejs dl { font: inherit; margin: 0; } #conversejs a, #conversejs a:visited { text-decoration: none; color: #578EA9; text-shadow: none; } #converse-embedded-chat, #conversejs { bottom: 0; color: #777; direction: ltr; display: block; font-family: "Helvetica", "Arial", sans-serif; font-size: 16px; height: 35px; position: fixed; right: 0; width: auto; z-index: 1031; } @media screen and (max-height: 450px) { #converse-embedded-chat, #conversejs { width: 100%; width: 100vw; } } @media screen and (max-width: 480px) { #converse-embedded-chat, #conversejs { width: 100%; width: 100vw; } } #converse-embedded-chat .fade-in, #conversejs .fade-in { opacity: 0; /* make things invisible upon start */ -webkit-animation-name: fadein; -moz-animation-name: fadein; animation-name: fadein; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; animation-timing-function: ease; } #converse-embedded-chat ::-webkit-input-placeholder, #conversejs ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #A8ABA1; } #converse-embedded-chat ::-moz-placeholder, #conversejs ::-moz-placeholder { /* Firefox 19+ */ color: #A8ABA1; } #converse-embedded-chat :-ms-input-placeholder, #conversejs :-ms-input-placeholder { /* IE 10+ */ color: #A8ABA1; } #converse-embedded-chat :-moz-placeholder, #conversejs :-moz-placeholder { /* Firefox 18- */ color: #A8ABA1; } #converse-embedded-chat ::placeholder, #conversejs ::placeholder { color: #A8ABA1; } #converse-embedded-chat .circle, #conversejs .circle { border-radius: 50%; } #converse-embedded-chat ::selection, #conversejs ::selection { background-color: #DCF9F6; } #converse-embedded-chat ::-moz-selection, #conversejs ::-moz-selection { background-color: #DCF9F6; } #converse-embedded-chat .no-text-select, #conversejs .no-text-select { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } @keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } } #converse-embedded-chat .visible, #conversejs .visible { visibility: visible; opacity: 1; -webkit-animation-name: fadein; -moz-animation-name: fadein; animation-name: fadein; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-duration: 350ms; -moz-animation-duration: 350ms; animation-duration: 350ms; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; animation-timing-function: ease; } #converse-embedded-chat .hidden, #conversejs .hidden { opacity: 0; display: none; } #converse-embedded-chat .collapsed, #conversejs .collapsed { height: 0; overflow: hidden; } #converse-embedded-chat .locked, #conversejs .locked { padding-right: 22px; } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); } } @-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(359deg); } } @keyframes spin { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); -moz-transform: rotate(359deg); -ms-transform: rotate(359deg); -o-transform: rotate(359deg); transform: rotate(359deg); } } #converse-embedded-chat .emojione, #conversejs .emojione { height: 22px; } #converse-embedded-chat .spinner, #conversejs .spinner { -webkit-animation: spin 2s infinite, linear; -moz-animation: spin 2s infinite, linear; animation: spin 2s infinite, linear; display: block; text-align: center; margin: 1em; } #converse-embedded-chat .spinner:before, #conversejs .spinner:before { font-size: 24px; font-family: 'Converse-js' !important; content: "\231b"; } #converse-embedded-chat .left, #conversejs .left { float: left; } #converse-embedded-chat .right, #conversejs .right { float: right; } #converse-embedded-chat .centered, #conversejs .centered { text-align: center; display: block; margin: 0; padding: 10% 0; } #converse-embedded-chat .hor_centered, #conversejs .hor_centered { text-align: center; display: block; margin: 0 auto; clear: both; } #converse-embedded-chat .button-group, #converse-embedded-chat .input-button-group, #conversejs .button-group, #conversejs .input-button-group { display: table; } #converse-embedded-chat .button-group, #conversejs .button-group { width: 100%; } #converse-embedded-chat .input-button-group button, #converse-embedded-chat .input-button-group input, #conversejs .input-button-group button, #conversejs .input-button-group input { display: table-cell; } #converse-embedded-chat .error, #conversejs .error { color: #A53214; } #converse-embedded-chat .info, #conversejs .info { color: #1E9652; } #converse-embedded-chat .reg-feedback, #conversejs .reg-feedback { font-size: 85%; margin-bottom: 1em; } #converse-embedded-chat .reg-feedback, #converse-embedded-chat #converse-login .conn-feedback, #conversejs .reg-feedback, #conversejs #converse-login .conn-feedback { display: block; text-align: center; width: 100%; } #converse-embedded-chat a.restore-chat, #conversejs a.restore-chat { padding: 1px 0 1px 5px; color: white; line-height: 15px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #converse-embedded-chat a.restore-chat:visited, #conversejs a.restore-chat:visited { color: white; } #converse-embedded-chat .activated, #conversejs .activated { display: block !important; } #converse-embedded-chat .pure-form-message, #conversejs .pure-form-message { padding: 0.5em 0; } #converse-embedded-chat .pure-button, #conversejs .pure-button { border-radius: 5px; } #converse-embedded-chat .button-primary, #conversejs .button-primary { color: white; background-color: #E7A151; } #converse-embedded-chat .button-secondary, #conversejs .button-secondary { color: white; background-color: #387592; } #converse-embedded-chat .button-cancel, #conversejs .button-cancel { color: white; background-color: #777; } #converse-embedded-chat form.pure-form.converse-form, #conversejs form.pure-form.converse-form { background: white; padding: 1em; } #converse-embedded-chat form.pure-form.converse-form legend, #conversejs form.pure-form.converse-form legend { color: #777; font-size: 125%; margin-bottom: 1.5em; } #converse-embedded-chat form.pure-form.converse-form input[type=checkbox], #conversejs form.pure-form.converse-form input[type=checkbox] { display: block; } #converse-embedded-chat form.pure-form.converse-form select, #converse-embedded-chat form.pure-form.converse-form input[type=password], #converse-embedded-chat form.pure-form.converse-form input[type=number], #converse-embedded-chat form.pure-form.converse-form input[type=text], #conversejs form.pure-form.converse-form select, #conversejs form.pure-form.converse-form input[type=password], #conversejs form.pure-form.converse-form input[type=number], #conversejs form.pure-form.converse-form input[type=text] { min-width: 50%; } #converse-embedded-chat form.pure-form.converse-form label, #conversejs form.pure-form.converse-form label { margin: 1em 0; font-size: 18px; } #converse-embedded-chat form.pure-form.converse-form input[type=text], #converse-embedded-chat form.pure-form.converse-form input[type=password], #converse-embedded-chat form.pure-form.converse-form input[type=number], #converse-embedded-chat form.pure-form.converse-form input[type=button], #converse-embedded-chat form.pure-form.converse-form input[type=submit], #conversejs form.pure-form.converse-form input[type=text], #conversejs form.pure-form.converse-form input[type=password], #conversejs form.pure-form.converse-form input[type=number], #conversejs form.pure-form.converse-form input[type=button], #conversejs form.pure-form.converse-form input[type=submit] { padding: 0.5em; } #converse-embedded-chat form.pure-form.converse-form input[type=button], #converse-embedded-chat form.pure-form.converse-form input[type=submit], #conversejs form.pure-form.converse-form input[type=button], #conversejs form.pure-form.converse-form input[type=submit] { padding-left: 1em; padding-right: 1em; margin: 0.5em 0; border: none; } #converse-embedded-chat form.pure-form.converse-form input.error, #conversejs form.pure-form.converse-form input.error { border: 1px solid #A53214; color: #777; } #converse-embedded-chat form.pure-form.converse-form .form-help, #conversejs form.pure-form.converse-form .form-help { color: gray; font-size: 85%; padding-top: 0.5em; } #converse-embedded-chat form.pure-form.converse-form .form-help:hover, #conversejs form.pure-form.converse-form .form-help:hover { color: #777; } #converse-embedded-chat form.pure-form.converse-form .form-help.error, #conversejs form.pure-form.converse-form .form-help.error { color: #A53214; } #converse-embedded-chat form.pure-form.converse-centered-form, #conversejs form.pure-form.converse-centered-form { text-align: center; width: 100%; } #converse-embedded-chat .chat-textarea-chatbox-selected, #conversejs .chat-textarea-chatbox-selected { border: 1px solid #578308; margin: 0; } #converse-embedded-chat .chat-textarea-chatroom-selected, #conversejs .chat-textarea-chatroom-selected { border: 2px solid #578EA9; margin: 0; } #converse-embedded-chat .dropdown dt, #converse-embedded-chat .dropdown ul, #conversejs .dropdown dt, #conversejs .dropdown ul { margin: 0; padding: 0; } body { width: 100%; height: 100%; font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #ffffff; background-color: #578EA9; } body .brand-heading { font-size: 600%; margin-left: -10%; } body .brand-heading.fade-in { opacity: 0; /* make things invisible upon start */ -webkit-animation-name: fadein; -moz-animation-name: fadein; animation-name: fadein; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-delay: 2s; -moz-animation-delay: 2s; animation-delay: 2s; } body .brand-heading .icon-conversejs { font-size: 88%; } body div.content { height: 100vh; width: 100vw; position: fixed; background-color: #578EA9; } body div.content .inner-content { text-align: center; padding: 7%; padding-left: -webkit-calc(5% + 250px); padding-left: calc(5% + 250px); } body div.content .inner-content p.no-chats { padding-right: 10%; font-size: 120%; } #conversejs { width: 100vw; height: 100vh; left: 0; } #conversejs form.pure-form.converse-form { margin: 1em; } #conversejs form.pure-form.converse-form input[type=checkbox] { margin-left: 1em; display: inline; margin-bottom: 2em; } #conversejs form.pure-form.converse-form input[type=text], #conversejs form.pure-form.converse-form input[type=password], #conversejs form.pure-form.converse-form input[type=number], #conversejs form.pure-form.converse-form input[type=button], #conversejs form.pure-form.converse-form input[type=submit] { height: 2.2em; } #conversejs form.pure-form.converse-form input[type=button], #conversejs form.pure-form.converse-form input[type=submit] { padding-left: 1em; padding-right: 1em; margin-right: 1em; } #converse-embedded-chat .flyout, #conversejs .flyout { border-radius: 0; bottom: 6px; display: block; position: absolute; } @media screen and (max-height: 450px) { #converse-embedded-chat .flyout, #conversejs .flyout { border-radius: 0; } } @media screen and (max-width: 480px) { #converse-embedded-chat .flyout, #conversejs .flyout { border-radius: 0; } } @media screen and (max-height: 450px) { #converse-embedded-chat .flyout, #conversejs .flyout { bottom: 0; } } @media screen and (max-width: 480px) { #converse-embedded-chat .flyout, #conversejs .flyout { bottom: 0; } } #converse-embedded-chat .chat-head, #conversejs .chat-head { color: #ffffff; font-size: 100%; height: 62px; margin: 0; padding: 0.5em; position: relative; } #converse-embedded-chat .chat-head .avatar, #conversejs .chat-head .avatar { margin-right: 0.5em; border-radius: 25%; float: left; } #converse-embedded-chat .chat-head.chat-head-chatbox, #conversejs .chat-head.chat-head-chatbox { background-color: #3AA569; } #converse-embedded-chat .chat-head .user-custom-message, #conversejs .chat-head .user-custom-message { color: white; font-size: 75%; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; padding-top: 0.2em; } #converse-embedded-chat .chatbox-btn, #conversejs .chatbox-btn { border-radius: 25%; border: none; color: white; cursor: pointer; display: inline-block; float: right; font-size: 16px; margin: 0 0.2em; padding: 0.3em; text-decoration: none; } #converse-embedded-chat .chatbox-btn:active, #conversejs .chatbox-btn:active { position: relative; top: 1px; } #converse-embedded-chat .chatbox-btn.button-on, #conversejs .chatbox-btn.button-on { background-color: white; color: #3AA569; } #converse-embedded-chat .chatbox, #conversejs .chatbox { display: block; text-align: left; float: right; height: 35px; margin: 0 0.5em; width: 100%; } @media screen and (max-height: 450px) { #converse-embedded-chat .chatbox, #conversejs .chatbox { margin: 0; width: 100%; } } @media screen and (max-width: 480px) { #converse-embedded-chat .chatbox, #conversejs .chatbox { margin: 0; width: 100%; } } #converse-embedded-chat .chatbox .box-flyout, #conversejs .chatbox .box-flyout { background-color: white; box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4); height: 100%; min-height: 50%; min-width: 100%; width: 100%; z-index: 1; } @media screen and (max-height: 450px) { #converse-embedded-chat .chatbox .box-flyout, #conversejs .chatbox .box-flyout { height: 400px; width: 100%; height: 100vh; } } @media screen and (max-width: 480px) { #converse-embedded-chat .chatbox .box-flyout, #conversejs .chatbox .box-flyout { height: 400px; width: 100%; height: 100vh; } } #converse-embedded-chat .chatbox .chat-title, #conversejs .chatbox .chat-title { color: white; display: block; line-height: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #converse-embedded-chat .chatbox .chat-title a, #conversejs .chatbox .chat-title a { color: white; width: 100%; } #converse-embedded-chat .chatbox .chat-body, #conversejs .chatbox .chat-body { background-color: white; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-top: 0; height: 289px; height: -webkit-calc(100% - 62px); height: calc(100% - 62px); } @media screen and (max-height: 450px) { #converse-embedded-chat .chatbox .chat-body, #conversejs .chatbox .chat-body { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } } @media screen and (max-width: 480px) { #converse-embedded-chat .chatbox .chat-body, #conversejs .chatbox .chat-body { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } } #converse-embedded-chat .chatbox .chat-body p, #conversejs .chatbox .chat-body p { color: #777; font-size: 16px; margin: 0; padding: 5px; } #converse-embedded-chat .chatbox .chat-body .chat-info, #conversejs .chatbox .chat-body .chat-info { line-height: 20px; color: #3AA569; font-size: 14px; margin: 0.3em; } #converse-embedded-chat .chatbox .chat-body .chat-info.chat-event, #conversejs .chatbox .chat-body .chat-info.chat-event { clear: left; font-style: italic; } #converse-embedded-chat .chatbox .chat-body .chat-info.chat-error, #conversejs .chatbox .chat-body .chat-info.chat-error { color: #D24E2B; font-weight: bold; } #converse-embedded-chat .chatbox .chat-body .chat-info.chat-date, #conversejs .chatbox .chat-body .chat-info.chat-date { display: inline-block; margin-top: 1em; } #converse-embedded-chat .chatbox .chat-body .chat-image, #conversejs .chatbox .chat-body .chat-image { max-height: 24em; max-width: 100%; } #converse-embedded-chat .chatbox .chat-body .chat-action, #conversejs .chatbox .chat-body .chat-action { font-style: italic; } #converse-embedded-chat .chatbox .chat-body .chat-message, #conversejs .chatbox .chat-body .chat-message { overflow: auto; } #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author, #conversejs .chatbox .chat-body .chat-message .chat-msg-author { font-weight: bold; white-space: nowrap; float: left; text-overflow: ellipsis; overflow: hidden; } #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-them, #conversejs .chatbox .chat-body .chat-message .chat-msg-them { color: #E77051; } #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-me, #conversejs .chatbox .chat-body .chat-message .chat-msg-me { color: #578EA9; } #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content, #conversejs .chatbox .chat-body .chat-message .chat-msg-content { max-width: 100%; word-wrap: break-word; } #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content .emojione, #conversejs .chatbox .chat-body .chat-message .chat-msg-content .emojione { margin-bottom: -6px; } #converse-embedded-chat .chatbox .chat-body .delayed .chat-msg-them, #conversejs .chatbox .chat-body .delayed .chat-msg-them { color: #FB5D50; } #converse-embedded-chat .chatbox .chat-body .delayed .chat-msg-me, #conversejs .chatbox .chat-body .delayed .chat-msg-me { color: #7EABBB; } #converse-embedded-chat .chatbox .new-msgs-indicator, #conversejs .chatbox .new-msgs-indicator { position: absolute; width: 100%; cursor: pointer; background-color: #3AA569; color: #FCFDFD; padding: 0.5em; font-size: 0.9em; text-align: center; z-index: 20; white-space: nowrap; } #converse-embedded-chat .chatbox .chat-content, #conversejs .chatbox .chat-content { position: relative; padding: 0.5em; font-size: 13px; color: #777; overflow-y: auto; border: 0; background-color: #ffffff; line-height: 1.3em; height: 206px; height: calc(100% - 100px); } #converse-embedded-chat .chatbox .chat-content-sendbutton, #conversejs .chatbox .chat-content-sendbutton { height: calc(100% - 132px); } #converse-embedded-chat .chatbox .dropdown, #conversejs .chatbox .dropdown { /* status dropdown styles */ background-color: #FCFDFD; } #converse-embedded-chat .chatbox .dropdown dd, #conversejs .chatbox .dropdown dd { margin: 0; padding: 0; position: relative; } #converse-embedded-chat .chatbox form.sendXMPPMessage, #conversejs .chatbox form.sendXMPPMessage { -moz-background-clip: padding; -webkit-background-clip: padding-box; border-bottom-left-radius: 0; border-bottom-right-radius: 0; background-clip: padding-box; border-top: 1px solid #BBB; border: 0; margin: 0; padding: 0; position: relative; height: 99px; min-width: 100%; } @media screen and (max-height: 450px) { #converse-embedded-chat .chatbox form.sendXMPPMessage, #conversejs .chatbox form.sendXMPPMessage { width: 100%; } } @media screen and (max-width: 480px) { #converse-embedded-chat .chatbox form.sendXMPPMessage, #conversejs .chatbox form.sendXMPPMessage { width: 100%; } } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea, #conversejs .chatbox form.sendXMPPMessage .chat-textarea { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 0; height: 70px; padding: 0.5em; width: 100%; resize: none; } #converse-embedded-chat .chatbox form.sendXMPPMessage .send-button, #conversejs .chatbox form.sendXMPPMessage .send-button { position: absolute; left: 3px; width: -webkit-calc(100% - 6px); width: calc(100% - 6px); background-color: #3AA569; color: white; font-size: 80%; height: 27px; bottom: -30px; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar { box-sizing: border-box; margin: 0; padding: 5px; height: 29px; display: block; background-color: #E7FBF0; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar a, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar a { font-size: 16px; color: #777; text-decoration: none; text-shadow: none; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text { font-size: 12px; padding-right: 3px; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted { color: #777; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a { color: #578EA9; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified a, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified a, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified { color: #cf5300; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .private a, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .private, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .private a, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .private { color: #4b7003; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-occupants, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-clear, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-occupants, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-clear, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr { float: right; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li { cursor: pointer; display: inline-block; list-style: none; margin-top: 1px; padding: 0 3px 0 3px; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li:hover, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li:hover { cursor: pointer; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu { background-color: #fff; bottom: 100%; box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4); font-size: 12px; margin: 0; position: absolute; right: 0; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a { color: #578EA9; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker { height: 150px; overflow: scroll; padding: 0.5em; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar { /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.4); } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar { overflow: hidden; left: 0; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked { background-color: #DCF9F6; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li { height: 32px; padding: 4px; z-index: 98; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a { font-size: 26px; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li { margin-left: 0; cursor: pointer; list-style: none; position: relative; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji { padding: 0.3em; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover { background-color: #DCF9F6; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover { color: #8f2831; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu { color: #777; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley { padding-left: 5px; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover { background-color: #DCF9F6; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul { z-index: 99; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li { display: block; padding: 7px; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover { background-color: #DCF9F6; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li a, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li a { display: block; } #converse-embedded-chat .chatbox .dragresize, #conversejs .chatbox .dragresize { background: transparent; border: 0; margin: 0; position: absolute; top: 0; z-index: 20; } #converse-embedded-chat .chatbox .dragresize-top, #conversejs .chatbox .dragresize-top { cursor: n-resize; height: 5px; width: 100%; } #converse-embedded-chat .chatbox .dragresize-left, #conversejs .chatbox .dragresize-left { cursor: w-resize; width: 5px; height: 100%; left: 0; } #converse-embedded-chat .chatbox .dragresize-topleft, #conversejs .chatbox .dragresize-topleft { cursor: nw-resize; width: 15px; height: 15px; top: 0; left: 0; } #conversejs .chatbox-btn { font-size: 18px; margin: 0 0.3em; } #conversejs .flyout { border: 1.2em solid #3AA569; border-top: 0.8em solid #3AA569; border-radius: 0; bottom: 0; } #conversejs .chat-head { font-size: 20px; padding: 0; } #conversejs .chat-head .user-custom-message { font-size: 66%; height: auto; line-height: 22px; } #conversejs .chat-head.chat-head-chatbox .close-chatbox-button { display: none; } #conversejs .chatbox { height: 100%; margin: 0; width: -webkit-calc(100% - 250px); width: calc(100% - 250px); margin: 0; } #conversejs .chatbox .box-flyout { background-color: #3AA569; width: -webkit-calc(100% - 250px); width: calc(100% - 250px); box-shadow: none; min-width: auto; } #conversejs .chatbox .chat-body { background-color: #3AA569; border-top-left-radius: 0; border-top-right-radius: 0; } #conversejs .chatbox .chat-body .chat-message { line-height: 22px; font-size: 14px; margin: 0.5em 0; } #conversejs .chatbox .chat-body .chat-message .chat-msg-author { line-height: 22px; } #conversejs .chatbox .chat-body .chat-message .chat-msg-content { line-height: 22px; } #conversejs .chatbox .chat-body .chat-message .chat-msg-content .emojione { height: 22px; margin-bottom: -5.5px; } #conversejs .chatbox .chat-content { padding: 0 1em 1em 1em; border-top-left-radius: 0; border-top-right-radius: 0; } #conversejs .chatbox .chat-title { font-size: 26px; line-height: 26px; } #conversejs .chatbox form.sendXMPPMessage ul { width: 100%; } #conversejs .chatbox form.sendXMPPMessage .toggle-smiley { padding-left: 0.5em; } #conversejs .chatbox form.sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category-picker { margin-right: 5em; } #conversejs .chatbox form.sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category { padding-left: 10px; padding-right: 10px; } #conversejs #controlbox { margin-right: 1em; } #conversejs #controlbox .pure-form.converse-form { padding: 0; } @media screen and (max-width: 480px) { #conversejs #controlbox { margin: 0; } } @media screen and (max-height: 450px) { #conversejs #controlbox { margin: 0; } } #conversejs #controlbox .controlbox-head { background-color: #578EA9; border-top-left-radius: 0; border-top-right-radius: 0; color: white; height: 62px; margin: 0; padding: 6px 6px 6px 0; } @media screen and (max-height: 450px) { #conversejs #controlbox .controlbox-head { border-top-left-radius: 0; border-top-right-radius: 0; } } @media screen and (max-width: 480px) { #conversejs #controlbox .controlbox-head { border-top-left-radius: 0; border-top-right-radius: 0; } } #conversejs #controlbox.logged-out .box-flyout .controlbox-pane { position: relative; overflow-y: auto; } #conversejs #controlbox form.search-xmpp-contact { margin: 0; padding-left: 5px; padding: 0 0 5px 5px; } #conversejs #controlbox form.search-xmpp-contact input { width: 8em; } #conversejs #controlbox .msgs-indicator { border-radius: 3px; background-color: #E77051; color: white; font-size: 14px; font-weight: normal; padding: 0 4px; text-shadow: none; } #conversejs #controlbox a.subscribe-to-user { padding-left: 2em; font-weight: bold; } #conversejs #controlbox #converse-register { opacity: 0; /* make things invisible upon start */ -webkit-animation-name: fadein; -moz-animation-name: fadein; animation-name: fadein; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; animation-timing-function: ease; background: white; } #conversejs #controlbox #converse-register .title { font-weight: bold; } #conversejs #controlbox #converse-register .info { color: green; font-size: 90%; margin: 1.5em 0; } #conversejs #controlbox #converse-register .form-errors { color: #A53214; margin: 1em 0; } #conversejs #controlbox #converse-register .provider-title { font-size: 26px; margin: 0; } #conversejs #controlbox #converse-register .provider-score { width: 178px; margin-bottom: 8px; } #conversejs #controlbox #converse-register .title, #conversejs #controlbox #converse-register .instructions, #conversejs #controlbox #converse-register label { margin: 0.5em 0 0 0; } #conversejs #controlbox #converse-register .form-help .url { font-weight: bold; color: #578EA9; } #conversejs #controlbox #converse-register .input-group { display: table; margin: auto; width: 100%; } #conversejs #controlbox #converse-register .input-group span { overflow-x: hidden; text-overflow: ellipsis; max-width: 110px; } #conversejs #controlbox #converse-register .input-group span, #conversejs #controlbox #converse-register .input-group input[name=username] { display: table-cell; text-align: left; } #conversejs #controlbox #converse-register .instructions { color: gray; font-size: 85%; } #conversejs #controlbox #converse-register .instructions:hover { color: #777; } #conversejs #controlbox .conn-feedback { color: #578EA9; } #conversejs #controlbox .conn-feedback.error { color: #A53214; } #conversejs #controlbox .conn-feedback p { padding-bottom: 0.5em; } #conversejs #controlbox .conn-feedback p.feedback-subject.error { font-weight: bold; } #conversejs #controlbox .brand-heading-container .brand-heading { text-align: left; font-size: 150%; } #conversejs #controlbox .brand-heading-container .brand-name { font-size: 120%; } #conversejs #controlbox .toggle-register-login { font-weight: bold; } #conversejs #controlbox .oauth-login { margin-left: 0; color: #777; } #conversejs #controlbox .oauth-login .icon-social:before { font-size: 18px; } #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon { height: auto; white-space: normal; } #conversejs #controlbox #converse-register .save-submit, #conversejs #controlbox #converse-login .save-submit { color: #3AA569; } #conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input { width: 100%; margin: 1em 0; } #conversejs #controlbox #converse-register .form-url, #conversejs #controlbox #converse-login .form-url { display: block; font-weight: normal; margin: 1em 0; } #conversejs #controlbox #users .add-converse-contact { margin: 0 0 0.75em 0; } #conversejs #controlbox #chatrooms form.add-chatroom { margin: 0; padding: 0; } #conversejs #controlbox #chatrooms form.add-chatroom input[type=button], #conversejs #controlbox #chatrooms form.add-chatroom input[type=submit], #conversejs #controlbox #chatrooms form.add-chatroom input[type=text] { width: 100%; } #conversejs #controlbox #chatrooms .rooms-list-container { text-align: left; margin: 0; } #conversejs #controlbox #chatrooms .rooms-list-container .rooms-toggle { display: block; color: #777; margin-top: 1em; } #conversejs #controlbox #chatrooms .rooms-list-container .rooms-toggle:hover { color: #585B51; } #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list { margin: 0.5em 0; text-align: left; } #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dt { border: none; color: #777; font-weight: normal; padding: 0; padding-bottom: 0.5em; text-shadow: 0 1px 0 #FAFAFA; } #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom, #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom { border: none; clear: both; color: #777; display: block; overflow: hidden; padding: 0.3em 0; text-shadow: 0 1px 0 #FAFAFA; word-wrap: break-word; } #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom a:hover, #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom a:hover { color: #206485; } #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom.unread-msgs .available-room, #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom.unread-msgs .open-room, #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom.unread-msgs .available-room, #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom.unread-msgs .open-room { max-width: 55%; width: auto; font-weight: bold; } #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom a.room-info:before, #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom a.room-info:before { font-size: 15px; } #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom a.open-room, #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom a.open-room { width: 68%; float: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 0.5em; } #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom a.available-room, #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom a.available-room { width: 85%; } #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .add-bookmark, #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .remove-bookmark, #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .add-bookmark, #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .remove-bookmark { color: #A8ABA1; } #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .add-bookmark.button-on, #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .remove-bookmark.button-on, #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .add-bookmark.button-on, #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .remove-bookmark.button-on { color: #578EA9; } #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .add-bookmark.button-on:hover, #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .remove-bookmark.button-on:hover, #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .add-bookmark.button-on:hover, #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .remove-bookmark.button-on:hover { color: #206485; } #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .room-info, #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .room-info { font-size: 14px; font-style: normal; font-weight: normal; } #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom li.room-info, #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom li.room-info { display: block; margin-left: 5px; } #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom p.room-info, #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom p.room-info { line-height: 22px; margin: 0; display: block; white-space: normal; } #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom div.room-info, #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom div.room-info { padding: 0.3em 0; clear: left; width: 100%; } #conversejs #controlbox .dropdown a { width: 143px; display: inline-block; } #conversejs #controlbox .dropdown li { list-style: none; padding-left: 0; } #conversejs #controlbox .dropdown dd ul { padding: 0; list-style: none; position: absolute; left: 0; top: 0; width: 100%; z-index: 21; background-color: #FCFDFD; } #conversejs #controlbox .dropdown dd ul li:hover { background-color: #DCF9F6; } #conversejs #controlbox .dropdown dd.search-xmpp { height: 0; } #conversejs #controlbox .dropdown dd.search-xmpp .contact-form-container { position: absolute; z-index: 22; } #conversejs #controlbox .dropdown dd.search-xmpp .contact-form-container form { box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4); background-color: white; } #conversejs #controlbox .dropdown dd.search-xmpp li:hover { background-color: #FCFDFD; } #conversejs #controlbox .dropdown dt a span { cursor: pointer; display: block; padding: 4px 7px 0 5px; } #conversejs #controlbox #select-xmpp-status { display: none; float: right; margin-right: 0.5em; } #conversejs #controlbox #controlbox-tabs { text-align: center; display: inline; overflow: hidden; list-style-type: none; /* single tab */ } #conversejs #controlbox #controlbox-tabs li { float: left; list-style: none; padding-left: 0; text-shadow: white 0 1px 0; width: 40%; } #conversejs #controlbox #controlbox-tabs li a { background-color: white; border-bottom: 1px solid #CCC; border-top-left-radius: 5px; border-top-right-radius: 5px; box-shadow: inset 2px -2px 20px rgba(0, 0, 0, 0.3); color: #777; display: block; font-size: 14px; height: 61px; line-height: 61px; margin: 0; text-align: center; text-decoration: none; } #conversejs #controlbox #controlbox-tabs li a.contacts-tab .msgs-indicator { background-color: #3AA569; } #conversejs #controlbox #controlbox-tabs li a.rooms-tab .msgs-indicator { background-color: #E77051; } #conversejs #controlbox #controlbox-tabs li a .msgs-indicator { border: solid white 2px; opacity: 0.8; border-top-right-radius: 5px; float: right; } #conversejs #controlbox #controlbox-tabs li a:hover { color: #777; } #conversejs #controlbox #controlbox-tabs li a:hover .msgs-indicator { opacity: 1; } #conversejs #controlbox #controlbox-tabs li a.current, #conversejs #controlbox #controlbox-tabs li a.current:hover { box-shadow: none; border-bottom: 0; height: 62px; cursor: default; color: #777; } #conversejs #controlbox .fancy-dropdown { border: 1px solid #B1BFC4; height: 30px; border-radius: 5px; text-align: left; } #conversejs #controlbox .fancy-dropdown .choose-xmpp-status, #conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form { line-height: 30px; text-shadow: 0 1px 0 #ffffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; } #conversejs #controlbox .fancy-dropdown .choose-xmpp-status:hover, #conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form:hover { color: #206485; } #conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form { padding: 0 0.5em; width: 100%; } #conversejs #controlbox .fancy-dropdown.no-border { border: 0; } #conversejs #controlbox #fancy-xmpp-status-select .xmpp-status { padding: 0 0.5em; } #conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message { line-height: 30px; float: right; clear: right; width: 12px; color: #578EA9; } #conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message:hover { color: #206485; } #conversejs #controlbox #fancy-xmpp-status-select fieldset { padding: 0; margin-top: -1px; } #conversejs #controlbox #fancy-xmpp-status-select input { height: 31px; width: -webkit-calc(100% - 40px); width: calc(100% - 40px); padding: 0 0 0 0.5em; } #conversejs #controlbox #fancy-xmpp-status-select input[type=submit] { height: 31px; width: 40px; padding: 1px; float: right; } #conversejs #controlbox .controlbox-panes { height: 100%; overflow-y: scroll; } #conversejs #controlbox .controlbox-pane { padding: 1.2em; background-color: white; border: 0; font-size: 16px; position: absolute; left: 0; text-align: center; width: 100%; overflow-y: auto; overflow-x: hidden; } #conversejs #controlbox .controlbox-pane .switch-form { padding-bottom: 2em; } #conversejs #controlbox .controlbox-pane .switch-form p { margin-top: 0.5em; } #conversejs #controlbox .controlbox-pane label { font-size: 16px; font-weight: bold; height: auto; margin: 4px; } #conversejs #controlbox .controlbox-pane dd { margin-left: 0; margin-bottom: 0; } #conversejs #controlbox .controlbox-pane dd.odd { background-color: #DCEAC5; } #conversejs #controlbox #users { overflow-y: hidden; } #conversejs #controlbox .add-xmpp-contact { padding: 1em 0.5em; } #conversejs #controlbox .add-xmpp-contact input { margin: 0 0 1rem; width: 100%; } #conversejs #controlbox .add-xmpp-contact button { width: 100%; } #conversejs #controlbox .xmpp-status-menu { text-align: left; box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4); } #conversejs #controlbox .xmpp-status-menu.collapsed { box-shadow: none; } #conversejs #controlbox .xmpp-status-menu li { padding: 2px; } #conversejs #controlbox .xmpp-status-menu li a { width: 100%; padding: 0.3em; } #conversejs #controlbox .xmpp-status-menu li a.logout, #conversejs #controlbox .xmpp-status-menu li a.logout span { color: #D24E2B; } #conversejs #controlbox .set-xmpp-status { background: none; margin: 1em 0 0.5em 0em; } #conversejs #controlbox .set-xmpp-status .dropdown dd ul { z-index: 22; } #conversejs .toggle-controlbox { background-color: #578EA9; border-top-left-radius: 5px; border-top-right-radius: 5px; color: #0a0a0a; float: right; height: 100%; margin: 0 0.5em; padding: 10px 8px 0 8px; } #conversejs .toggle-controlbox span { color: white; } #conversejs #controlbox { min-width: 250px; width: 200px; float: left; margin: 0; } #conversejs #controlbox .toggle-register-login { line-height: 30px; } #conversejs #controlbox .brand-heading-container { text-align: center; } #conversejs #controlbox .brand-heading-container .brand-heading { text-align: center; font-size: 600%; padding: 0.7em 0 0 0; opacity: 0.8; color: #387592; } #conversejs #controlbox .brand-heading-container .brand-subtitle { font-size: 90%; } @media screen and (max-width: 480px) { #conversejs #controlbox .brand-heading-container .brand-heading { font-size: 400%; } } #conversejs #controlbox .controlbox-panes { background-color: white; } #conversejs #controlbox .controlbox-pane { height: -webkit-calc(100% - 63px); height: calc(100% - 63px); } #conversejs #controlbox.logged-out { opacity: 0; /* make things invisible upon start */ -webkit-animation-name: fadein; -moz-animation-name: fadein; animation-name: fadein; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; animation-timing-function: ease; width: 100%; } #conversejs #controlbox.logged-out .box-flyout { width: 100%; } #conversejs #controlbox.logged-out .box-flyout .controlbox-head { background-color: white; height: 0; } #conversejs #controlbox.logged-out .box-flyout .controlbox-pane { height: auto; } #conversejs #controlbox .box-flyout { border: 0; min-width: 250px; width: 200px; z-index: 1; background-color: #578EA9; } #conversejs #controlbox .controlbox-head { height: 63px; padding: 6px 0 6px 0; margin-top: 0.5em; } #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login { margin: 2em 30% 3em 30%; } #conversejs #controlbox #converse-register .title, #conversejs #controlbox #converse-register .instructions, #conversejs #controlbox #converse-register label, #conversejs #controlbox #converse-login .title, #conversejs #controlbox #converse-login .instructions, #conversejs #controlbox #converse-login label { margin: 1em 0; } #conversejs #controlbox #converse-register input[type=submit], #conversejs #controlbox #converse-register input[type=button], #conversejs #controlbox #converse-login input[type=submit], #conversejs #controlbox #converse-login input[type=button] { width: auto; } #conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input { width: 100%; margin: 1em 0; } #conversejs #controlbox #converse-register input.pure-button, #conversejs #controlbox #converse-login input.pure-button { margin: 1em 0.5em; } @media screen and (max-width: 480px) { #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login { margin: 3em 10% 3em 10%; } } #conversejs #controlbox #controlbox-tabs { /* single tab */ } #conversejs #controlbox #controlbox-tabs li { width: 50%; } #conversejs #controlbox #controlbox-tabs li a { height: 62px; line-height: 62px; font-size: 18px; } #conversejs #controlbox #controlbox-tabs li a.current, #conversejs #controlbox #controlbox-tabs li a.current:hover { height: 63px; } #conversejs #converse-roster { text-align: left; width: 100%; position: relative; margin: 1em 0 0 0; height: 194px; height: calc(100% - 60px - 20px); overflow: hidden; padding: 0; padding-bottom: 3em; /* Custom addition for CSP */ } #conversejs #converse-roster.no-contact-requests { height: calc(100% - 30px - 20px); } #conversejs #converse-roster #online-count { display: none; } #conversejs #converse-roster .search-xmpp ul li.chat-info { padding-left: 10px; } #conversejs #converse-roster .roster-filter-form { margin: 0 0 0.5em 0; width: 100%; /* (jQ addClass:) if input has value: */ /* (jQ addClass:) if mouse is over the 'x' input area*/ } #conversejs #converse-roster .roster-filter-form .roster-filter { float: left; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg==) no-repeat right -20px center; border: 1px solid #999; font-size: 16px; height: 30px; margin: 0; padding: 0; padding-left: 0.4em; width: 53%; } #conversejs #converse-roster .roster-filter-form .roster-filter.x { background-position: right 3px center; } #conversejs #converse-roster .roster-filter-form .roster-filter.onX { cursor: pointer; } #conversejs #converse-roster .roster-filter-form .roster-filter-state { display: none; } #conversejs #converse-roster .roster-filter-form .state-type { float: left; border: 1px solid #999; font-size: calc(16px - 2px); height: 30px; margin: 0; padding: 0; padding-left: 0.4em; width: 53%; display: none; } #conversejs #converse-roster .roster-filter-form .state-type-state { display: inline-block; } #conversejs #converse-roster .roster-filter-form .filter-type { display: table-cell; float: right; font-size: calc(16px - 2px); height: 30px; padding: 0; width: 47%; border-radius: 0; border: 1px solid; } #conversejs #converse-roster .roster-contacts { padding: 0; margin: 0; height: 100%; overflow-x: hidden; overflow-y: auto; display: none; } #conversejs #converse-roster .roster-contacts dt.roster-group { border: none; color: #777; display: none; font-weight: normal; margin: 1em 0 0.5em 0; text-shadow: 0 1px 0 #FAFAFA; } #conversejs #converse-roster .roster-contacts dt.roster-group .group-toggle { color: #777; display: block; width: 100%; } #conversejs #converse-roster .roster-contacts dt.roster-group .group-toggle:hover { color: #585B51; } #conversejs #converse-roster .roster-contacts dd { border: none; clear: both; color: #777; display: block; height: 24px; overflow-y: hidden; text-shadow: 0 1px 0 #FAFAFA; line-height: 16px; width: 100%; height: 30px; margin: 0; padding: 0.5em 0 0 0; } #conversejs #converse-roster .roster-contacts dd a:hover { color: #206485; } #conversejs #converse-roster .roster-contacts dd .open-chat { margin: auto; padding: 0; width: 85%; } #conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs { font-weight: bold; } #conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .contact-name { width: 70%; } #conversejs #converse-roster .roster-contacts dd .open-chat .msgs-indicator { background-color: #3AA569; opacity: 1; border-radius: 10%; padding: 0 0.2em; font-size: 14px; } #conversejs #converse-roster .roster-contacts dd .open-chat .contact-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0; margin: 0; max-width: 80%; float: none; height: 30px; } #conversejs #converse-roster .roster-contacts dd .open-chat .contact-name.unread-msgs { max-width: 60%; } #conversejs #converse-roster .roster-contacts dd .open-chat .avatar { float: left; display: inline-block; height: 30px; } #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .request-actions { padding: 0 0 0 0.3em; float: right; } #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .open-chat { max-width: 70%; } #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .open-chat .req-contact-name { width: 100%; } #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .req-contact-name { line-height: 22px; width: 69%; padding: 0; } #conversejs #converse-roster .roster-contacts dd.current-xmpp-contact span { font-size: 16px; float: left; margin-right: 0.5em; } #conversejs #converse-roster .roster-contacts dd.odd { background-color: #DCEAC5; /* Make this difference */ } #conversejs #converse-roster .roster-contacts dd a, #conversejs #converse-roster .roster-contacts dd span { display: inline-block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #conversejs #converse-roster .roster-contacts dd span { padding: 0; height: 100%; } #conversejs #converse-roster .roster-contacts dd a.decline-xmpp-request { margin-left: 5px; } #conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact { font-size: 10px; float: right; margin: 0; padding: 0; color: #A8ABA1; } #conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact:before { font-size: 16px; } #conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact:hover { color: #818479; } #conversejs #converse-roster span.pending-contact-name { line-height: 22px; width: 100%; } #conversejs #controlbox #chatrooms .bookmarks-list dl.rooms-list.bookmarks dd.available-chatroom a.open-room { width: 80%; } #converse-embedded-chat .new-chatroom-nick, #conversejs .new-chatroom-nick { margin: 1em auto; } #converse-embedded-chat .add-chatroom input[type="submit"], #converse-embedded-chat .add-chatroom input[type="button"], #conversejs .add-chatroom input[type="submit"], #conversejs .add-chatroom input[type="button"] { margin: 0.3em 0; } #converse-embedded-chat .chat-head-chatroom, #conversejs .chat-head-chatroom { background-color: #E77051; } #converse-embedded-chat .chat-head-chatroom .chatbox-btn.button-on, #conversejs .chat-head-chatroom .chatbox-btn.button-on { background-color: white; color: #E77051; } #converse-embedded-chat .chat-head-chatroom .chat-title, #conversejs .chat-head-chatroom .chat-title { color: #FF977C; } #converse-embedded-chat .chat-head-chatroom .chat-title .chatroom-name, #conversejs .chat-head-chatroom .chat-title .chatroom-name { color: white; } #converse-embedded-chat .chat-head-chatroom .chat-title .chatroom-jid, #conversejs .chat-head-chatroom .chat-title .chatroom-jid { font-size: 14px; } #converse-embedded-chat .chat-head-chatroom .chat-title .chatroom-description, #conversejs .chat-head-chatroom .chat-title .chatroom-description { color: white; font-size: 80%; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0.3em 0; } #converse-embedded-chat .chatroom, #conversejs .chatroom { width: 300px; } @media screen and (max-height: 450px) { #converse-embedded-chat .chatroom, #conversejs .chatroom { width: 100%; } } @media screen and (max-width: 480px) { #converse-embedded-chat .chatroom, #conversejs .chatroom { width: 100%; } } #converse-embedded-chat .chatroom .box-flyout, #conversejs .chatroom .box-flyout { min-width: 300px; width: 300px; } @media screen and (max-height: 450px) { #converse-embedded-chat .chatroom .box-flyout, #conversejs .chatroom .box-flyout { height: 400px; width: 100%; height: 100vh; } } @media screen and (max-width: 480px) { #converse-embedded-chat .chatroom .box-flyout, #conversejs .chatroom .box-flyout { height: 400px; width: 100%; height: 100vh; } } #converse-embedded-chat .chatroom .box-flyout .chatroom-body, #conversejs .chatroom .box-flyout .chatroom-body { height: 289px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; height: -webkit-calc(100% - 62px); height: calc(100% - 62px); background-color: white; border-top: 0; width: 100%; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-info, #conversejs .chatroom .box-flyout .chatroom-body .chat-info { color: #E77051; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .mentioned, #conversejs .chatroom .box-flyout .chatroom-body .mentioned { font-weight: bold; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them, #conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them { color: #3AA569; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .disconnect-msg, #conversejs .chatroom .box-flyout .chatroom-body .disconnect-msg { padding: 2em 2em 0 2em; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area, #conversejs .chatroom .box-flyout .chatroom-body .chat-area { word-wrap: break-word; height: 100%; width: 70%; float: left; min-width: 100%; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator, #conversejs .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator { background-color: #E77051; max-width: 70%; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .chat-content, #conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content { padding: 0 0.5em 0 0.5em; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area.full, #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full { min-width: 100%; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator, #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator { min-width: 100%; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants, #conversejs .chatroom .box-flyout .chatroom-body .occupants { overflow-x: hidden; overflow-y: hidden; float: right; vertical-align: top; background-color: white; border-left: 1px solid #777; border-bottom-right-radius: 0; width: 30%; height: 100%; padding: 0.5em; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .occupants-heading, #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading { padding: 0.3em 0; font-weight: bold; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features, #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features { bottom: 0.5em; width: 100%; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul, #conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul { padding: 0; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li, #conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li { padding: .5em; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul, #conversejs .chatroom .box-flyout .chatroom-body .occupants ul { padding: 0.5em 0 0 0; margin-bottom: 0.5em; overflow-x: hidden; overflow-y: auto; list-style: none; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list, #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list { overflow-y: auto; height: -webkit-calc(100% - 220px); height: calc(100% - 220px); } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.features-list, #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list { padding-top: 0; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li, #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li { cursor: default; display: block; font-size: 14px; overflow: hidden; padding: 0.2em 0.5em 0.2em 0; text-overflow: ellipsis; white-space: nowrap; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li [class^="icon-"], #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li [class*=" icon-"], #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li [class^="icon-"], #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li [class*=" icon-"] { padding-right: 0.5em; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.feature, #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.feature { font-size: 10px; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant, #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant { cursor: pointer; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status, #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status { display: inline-block; margin-right: 0.5em; width: 0.5em; height: 0.5em; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-online, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-chat, #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-online, #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-chat { background-color: #1A9707; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-dnd, #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-dnd { background-color: red; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-away, #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-away { background-color: darkorange; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-xa, #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-xa { background-color: orange; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.moderator, #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.moderator { color: #E77051; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.visitor, #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.visitor { color: #A8ABA1; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container, #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container { background-color: white; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 0; color: #777; font-size: 16px; height: 289px; width: 100%; height: -webkit-calc(100% - 62px); height: calc(100% - 62px); overflow-y: auto; position: absolute; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .validation-message, #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .validation-message { font-size: 90%; color: #A53214; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text], #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label, #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text] { display: block; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button], #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit], #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button], #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit] { margin: 0 0.5em; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary, #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary { background-color: #E77051; } #converse-embedded-chat .chatroom form.sendXMPPMessage .chat-toolbar, #conversejs .chatroom form.sendXMPPMessage .chat-toolbar { background-color: #FFECE7; } #converse-embedded-chat .chatroom form.sendXMPPMessage .chat-textarea, #conversejs .chatroom form.sendXMPPMessage .chat-textarea { border-bottom-right-radius: 0; } #converse-embedded-chat .chatroom form.sendXMPPMessage .send-button, #conversejs .chatroom form.sendXMPPMessage .send-button { background-color: #E77051; } #converse-embedded-chat .chatroom .room-invite .invited-contact, #conversejs .chatroom .room-invite .invited-contact { margin: -1px 0 0 -1px; width: 100%; border: 1px solid #999; } #conversejs .chat-head-chatroom { height: 62px; font-size: 20px; } #conversejs .chat-head-chatroom .close-chatbox-button:before { content: "\e601"; } #conversejs .chat-head-chatroom .chat-title .chatroom-description { font-size: 65%; } #conversejs .chatroom { width: -webkit-calc(100% - 250px); width: calc(100% - 250px); } #conversejs .chatroom .box-flyout { background-color: #E77051; border: 1.2em solid #E77051; border-top: 0.8em solid #E77051; width: -webkit-calc(100% - 250px); width: calc(100% - 250px); } #conversejs .chatroom .box-flyout .chatroom-body { border-top-left-radius: 0; border-top-right-radius: 0; } #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container { border-radius: 0; } #conversejs .chatroom .box-flyout .chatroom-body .chat-area { border-top-left-radius: 0; min-width: auto; } #conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content { border-top-left-radius: 0; padding: 0 1em 1em 1em; } #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full { max-width: 100%; } #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator { max-width: 100%; } #conversejs .chatroom .box-flyout .chatroom-body .occupants { border-top-right-radius: 0; padding: 1em; } #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading { font-size: 18px; } #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features { bottom: 1em; } #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list { height: -webkit-calc(100% - 212px); height: calc(100% - 212px); } #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list li { font-size: 14px; width: 100%; } #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.feature { font-size: 14px; } #conversejs .chatroom .room-invite span .invited-contact { margin: 0 0 0.5em -1px; } #conversejs .chatbox.headlines .chat-head.chat-head-chatbox { background-color: #E7A151; } #conversejs .chatbox.headlines .chat-body { background-color: #E7A151; border-radius: 0; } #conversejs .chatbox.headlines .chat-body .chat-message span.chat-msg-them { color: #D2842B; } #conversejs .chatbox.headlines .chat-content { height: 100%; border-radius: 0; } #conversejs .chatbox.headlines .box-flyout { background-color: #E7A151; } #conversejs .chatbox.headlines .chat-head.chat-head-chatbox { background-color: #E7A151; } #conversejs .chatbox.headlines .flyout { border: 1.2em solid #E7A151; border-top: 0.8em solid #E7A151; } #converse-embedded-chat, #conversejs { /* Pointer */ } #converse-embedded-chat [hidden], #conversejs [hidden] { display: none; } #converse-embedded-chat .visually-hidden, #conversejs .visually-hidden { position: absolute; clip: rect(0, 0, 0, 0); } #converse-embedded-chat div.awesomplete, #conversejs div.awesomplete { display: inline-block; position: relative; } #converse-embedded-chat div.awesomplete > input, #conversejs div.awesomplete > input { display: block; } #converse-embedded-chat div.awesomplete > ul, #conversejs div.awesomplete > ul { position: absolute; left: 0; right: 0; z-index: 1; min-width: 100%; box-sizing: border-box; list-style: none; padding: 0; border-radius: .3em; margin: .2em 0 0; background: rgba(255, 255, 255, 0.9); background: linear-gradient(to bottom right, white, rgba(255, 255, 255, 0.8)); border: 1px solid rgba(0, 0, 0, 0.3); box-shadow: 0.05em 0.2em 0.6em rgba(0, 0, 0, 0.2); text-shadow: none; } #converse-embedded-chat div.awesomplete > ul[hidden], #converse-embedded-chat div.awesomplete > ul:empty, #conversejs div.awesomplete > ul[hidden], #conversejs div.awesomplete > ul:empty { display: none; } @supports (transform: scale(0)) { #converse-embedded-chat div.awesomplete > ul, #conversejs div.awesomplete > ul { transition: 0.3s cubic-bezier(0.4, 0.2, 0.5, 1.4); transform-origin: 1.43em -.43em; } #converse-embedded-chat div.awesomplete > ul[hidden], #converse-embedded-chat div.awesomplete > ul:empty, #conversejs div.awesomplete > ul[hidden], #conversejs div.awesomplete > ul:empty { opacity: 0; transform: scale(0); display: block; transition-timing-function: ease; } } #converse-embedded-chat div.awesomplete > ul:before, #conversejs div.awesomplete > ul:before { content: ""; position: absolute; top: -.43em; left: 1em; width: 0; height: 0; background: white; border: inherit; border-right: 0; border-bottom: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); } #converse-embedded-chat div.awesomplete > ul > li, #conversejs div.awesomplete > ul > li { text-overflow: ellipsis; overflow-x: hidden; position: relative; cursor: pointer; } #converse-embedded-chat div.awesomplete > ul > li:hover, #conversejs div.awesomplete > ul > li:hover { background: #E77051; color: white; } #converse-embedded-chat div.awesomplete > ul > li[aria-selected="true"], #conversejs div.awesomplete > ul > li[aria-selected="true"] { background: #3d6d8f; color: white; } #converse-embedded-chat div.awesomplete mark, #conversejs div.awesomplete mark { background: #FFB9A7; } #converse-embedded-chat div.awesomplete li:hover mark, #conversejs div.awesomplete li:hover mark { background: #A53214; color: white; } #converse-embedded-chat div.awesomplete li[aria-selected="true"] mark, #conversejs div.awesomplete li[aria-selected="true"] mark { background: #3d6b00; color: inherit; } /*# sourceMappingURL=inverse.css.map */