From ebdb340a5c5393ff33089de97aa0b50a92630f99 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 19 May 2021 17:31:52 +0530
Subject: [PATCH 001/176] Create a basic HTML export tool with support only for
text based events
---
package.json | 2 +
src/components/views/rooms/RoomHeader.js | 12 +
src/i18n/strings/en_EN.json | 1 +
src/utils/exportUtils.js | 435 +++++++++++++++++++++++
yarn.lock | 39 +-
5 files changed, 488 insertions(+), 1 deletion(-)
create mode 100644 src/utils/exportUtils.js
diff --git a/package.json b/package.json
index f8d94e2d21..9ac4890465 100644
--- a/package.json
+++ b/package.json
@@ -76,6 +76,7 @@
"highlight.js": "^10.5.0",
"html-entities": "^1.4.0",
"is-ip": "^3.1.0",
+ "jszip": "^3.6.0",
"katex": "^0.12.0",
"linkifyjs": "^2.1.9",
"lodash": "^4.17.20",
@@ -98,6 +99,7 @@
"resize-observer-polyfill": "^1.5.1",
"rfc4648": "^1.4.0",
"sanitize-html": "^2.3.2",
+ "streamsaver": "^2.0.5",
"tar-js": "^0.3.0",
"text-encoding-utf-8": "^1.0.2",
"url": "^0.11.0",
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 6d3b50c10d..d6b4822cc2 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -32,6 +32,8 @@ import RoomTopic from "../elements/RoomTopic";
import RoomName from "../elements/RoomName";
import {PlaceCallType} from "../../../CallHandler";
import {replaceableComponent} from "../../../utils/replaceableComponent";
+import exportConversationalHistory from '../../../utils/exportUtils';
+
@replaceableComponent("views.rooms.RoomHeader")
export default class RoomHeader extends React.Component {
@@ -117,6 +119,10 @@ export default class RoomHeader extends React.Component {
return !(currentPinEvent.getContent().pinned && currentPinEvent.getContent().pinned.length <= 0);
}
+ _exportConvertionalHistory = async () => {
+ exportConversationalHistory(this.props.room);
+ }
+
render() {
let searchStatus = null;
let cancelButton = null;
@@ -244,8 +250,14 @@ export default class RoomHeader extends React.Component {
title={_t("Video call")} />;
}
+ const exportButton = <AccessibleTooltipButton
+ className="mx_RoomHeader_button mx_ImageView_button_download"
+ onClick={this._exportConvertionalHistory}
+ title={_t("Export conversation")} />;
+
const rightRow =
<div className="mx_RoomHeader_buttons">
+ { exportButton }
{ videoCallButton }
{ voiceCallButton }
{ pinnedEventsButton }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index d1fe791319..90f3e2d89c 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1545,6 +1545,7 @@
"Search": "Search",
"Voice call": "Voice call",
"Video call": "Video call",
+ "Export conversation": "Export conversation",
"Start a Conversation": "Start a Conversation",
"Open dial pad": "Open dial pad",
"Invites": "Invites",
diff --git a/src/utils/exportUtils.js b/src/utils/exportUtils.js
new file mode 100644
index 0000000000..f784c48f8f
--- /dev/null
+++ b/src/utils/exportUtils.js
@@ -0,0 +1,435 @@
+import { MatrixClientPeg } from "../MatrixClientPeg";
+import { arrayFastClone } from "./arrays";
+import { TimelineWindow } from "matrix-js-sdk/src/timeline-window";
+import JSZip from "jszip";
+import { textForEvent } from "../TextForEvent";
+import streamSaver from "streamsaver";
+
+const wrapHTML = (content, room) => (`
+ <!DOCTYPE html>
+ <html>
+ <head>
+ <meta charset="utf-8" />
+ <title>Exported Data</title>
+ <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+ <link href="css/style.css" rel="stylesheet" />
+ <script src="js/script.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div class="page_wrap">
+ <div class="page_header">
+ <div class="content">
+ <div class="text bold">${room.name}</div>
+ </div>
+ </div>
+ <div class="page_body chat_page">
+ <div class="history">
+ ${content}
+ </div>
+ </div>
+ </div>
+ </body>
+ </html>
+`);
+
+
+const getTimelineConversation = (room) => {
+ if (!room) return;
+
+ const cli = MatrixClientPeg.get();
+
+ const timelineSet = room.getUnfilteredTimelineSet();
+
+ const timelineWindow = new TimelineWindow(
+ cli, timelineSet,
+ {windowLimit: Number.MAX_VALUE});
+
+ timelineWindow.load(null, 20);
+
+ const events = timelineWindow.getEvents();
+
+ // Clone and reverse the events so that we preserve the order
+ arrayFastClone(events)
+ .reverse()
+ .forEach(event => {
+ cli.decryptEventIfNeeded(event);
+ });
+
+ if (!timelineWindow.canPaginate('f')) {
+ events.push(...timelineSet.getPendingEvents());
+ }
+
+ return events;
+};
+
+
+const css = `
+body {
+ margin: 0;
+ font: 12px/18px 'Inter', 'Open Sans',"Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,Verdana,sans-serif;
+}
+
+strong {
+ font-weight: 700;
+}
+
+code, kbd, pre, samp {
+ font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
+}
+
+code {
+ padding: 2px 4px;
+ font-size: 90%;
+ color: #c7254e;
+ background-color: #f9f2f4;
+ border-radius: 4px;
+}
+
+pre {
+ display: block;
+ margin: 0;
+ line-height: 1.42857143;
+ word-break: break-all;
+ word-wrap: break-word;
+ color: #333;
+ background-color: #f5f5f5;
+ border-radius: 4px;
+ overflow: auto;
+ padding: 3px;
+ border: 1px solid #eee;
+ max-height: none;
+ font-size: inherit;
+}
+
+.clearfix:after {
+ content: " ";
+ visibility: hidden;
+ display: block;
+ height: 0;
+ clear: both;
+}
+
+.pull_left {
+ float: left;
+}
+
+.pull_right {
+ float: right;
+}
+
+.page_wrap {
+ background-color: #ffffff;
+ color: #000000;
+}
+
+.page_wrap a {
+ color: #168acd;
+ text-decoration: none;
+}
+
+.page_wrap a:hover {
+ text-decoration: underline;
+}
+
+.page_header {
+ position: fixed;
+ z-index: 10;
+ background-color: #ffffff;
+ width: 100%;
+ border-bottom: 1px solid #e3e6e8;
+}
+
+.page_header .content {
+ width: 480px;
+ margin: 0 auto;
+ border-radius: 0 !important;
+}
+
+.page_header a.content {
+ background-repeat: no-repeat;
+ background-position: 24px 21px;
+ background-size: 24px 24px;
+}
+
+.bold {
+ color: #212121;
+ font-weight: 700;
+}
+
+.details {
+ color: #70777b;
+}
+
+.page_header .content .text {
+ padding: 24px 24px 22px 24px;
+ font-size: 22px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ text-align: center;
+}
+
+.page_header a.content .text {
+ padding: 24px 24px 22px 82px;
+}
+
+.page_body {
+ padding-top: 64px;
+ width: 480px;
+ margin: 0 auto;
+}
+
+.userpic {
+ display: block;
+ border-radius: 50%;
+ overflow: hidden;
+}
+
+.userpic .initials {
+ display: block;
+ color: #fff;
+ text-align: center;
+ text-transform: uppercase;
+ user-select: none;
+}
+
+a.block_link {
+ display: block;
+ text-decoration: none !important;
+ border-radius: 4px;
+}
+
+a.block_link:hover {
+ text-decoration: none !important;
+ background-color: #f5f7f8;
+}
+
+.history {
+ padding: 16px 0;
+}
+
+.message {
+ margin: 0 -10px;
+ transition: background-color 2.0s ease;
+}
+
+div.selected {
+ background-color: rgba(242,246,250,255);
+ transition: background-color 0.5s ease;
+}
+
+.service {
+ padding: 10px 24px;
+}
+
+.service .body {
+ text-align: center;
+}
+
+.message .userpic .initials {
+ font-size: 16px;
+}
+
+.default {
+ padding: 10px;
+}
+
+.default.joined {
+ margin-top: -10px;
+}
+
+.default .from_name {
+ color: #3892db;
+ font-weight: 700;
+ padding-bottom: 5px;
+}
+
+.default .body {
+ margin-left: 60px;
+}
+
+.default .text {
+ word-wrap: break-word;
+ line-height: 150%;
+}
+
+.default .reply_to,
+.default .media_wrap {
+ padding-bottom: 5px;
+}
+
+.default .media {
+ margin: 0 -10px;
+ padding: 5px 10px;
+}
+
+.default .media .fill,
+.default .media .thumb {
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+}
+
+.default .media .fill {
+ background-repeat: no-repeat;
+ background-position: 12px 12px;
+ background-size: 24px 24px;
+}
+
+.default .media .title,
+.default .media_poll .question {
+ padding-top: 4px;
+ font-size: 14px;
+}
+
+.default .media .description {
+ color: #000000;
+ padding-top: 4px;
+ font-size: 13px;
+}
+
+.default .media .status {
+ padding-top: 4px;
+ font-size: 13px;
+}
+
+.default .photo {
+ display: block;
+}
+`;
+
+const userColors = [
+ "#64bf47",
+ "#4f9cd9",
+ "#9884e8",
+ "#e671a5",
+ "#47bcd1",
+ "#ff8c44",
+];
+
+const createDiv = (content, id, ...classNames) => {
+ return `<div class = "${classNames.join(" ")}" id = "${id}" >
+ ${content}
+ </div>`;
+};
+
+
+//Get a color associated with a string. This is to map userId to a specific color
+const getUserColor = (userId) => {
+ return userColors[userId.length % 4];
+};
+
+const createBody = (event, joined = false) => {
+ return `
+ <div class="message default clearfix ${joined ? `joined` : ``}" id="message2680">
+ ${!joined ? `<div class="pull_left userpic_wrap">
+ <div class="userpic" style="width: 42px; height: 42px; background-color: ${getUserColor(event.sender.name)}">
+ <div class="initials" style="line-height: 42px">${event.sender.name[0]}</div>
+ </div>
+ </div>` : ``}
+ <div class="body">
+ <div class="pull_right date details" title="${new Date(event._localTimestamp)}">${new Date(event._localTimestamp).toLocaleTimeString().slice(0, -3)}</div>
+ ${!joined ? `<div class="from_name" style="color:${getUserColor(event.sender.name)}">
+ ${event.sender.name}
+ </div>`: ``}
+ <div class="text"> ${event.getContent().body} </div>
+ </div>
+ </div>
+ `;
+};
+
+const replyAnchor = (eventId) => {
+ return `<a href = "#${eventId}">this message</a>}`;
+};
+
+const _isReply = (event) => {
+ const relatesTo = event.getContent()["m.relates_to"];
+ const isReply = !!(relatesTo && relatesTo["m.in_reply_to"]);
+ return isReply;
+};
+
+
+const dateSeparator = (event, prevEvent) => {
+ const prevDate = prevEvent ? new Date(prevEvent._localTimestamp) : null;
+ const currDate = new Date(event._localTimestamp);
+ if (!prevDate || currDate.setHours(0, 0, 0, 0) !== prevDate.setHours(0, 0, 0, 0)) {
+ return `
+ <div class="message service">
+ <div class="body details">
+ ${new Date(event._localTimestamp)
+ .toLocaleString("en-us", {year: "numeric", month: "long", day: "numeric" })}
+ </div>
+ </div>
+ `;
+ }
+ return "";
+};
+
+const createHTML = (events, room) => {
+ let content = "";
+ let prevEvent = null;
+ for (const event of events) {
+ content += dateSeparator(event, prevEvent);
+ if (event.getContent().msgtype === "m.text") {
+ const shouldBeJoined = prevEvent && prevEvent.getContent().msgtype === "m.text"
+ && event.sender.userId === prevEvent.sender.userId && !dateSeparator(event, prevEvent);
+
+ const body = createBody(event, shouldBeJoined);
+
+ content += body;
+ } else {
+ content += `
+ <div class="message service" id="${event.getId()}">
+ <div class="body details">
+ ${textForEvent(event)}
+ </div>
+ </div>
+ `;
+ }
+ prevEvent = event;
+ }
+ return wrapHTML(content, room);
+};
+
+
+const exportConversationalHistory = async (room) => {
+ const res = getTimelineConversation(room);
+ const html = createHTML(res, room);
+ const zip = new JSZip();
+ zip.file("css/style.css", css);
+ zip.file("index.html", html);
+ const filename = `matrix-export-${new Date().toISOString()}.zip`;
+
+ //Generate the zip file asynchronously
+
+ const blob = await zip.generateAsync({ type: "blob" });
+
+ //Create a writable stream to the directory
+ const fileStream = streamSaver.createWriteStream(filename, blob.size);
+ const writer = fileStream.getWriter();
+
+ // console.log(blob.size);
+
+ // Here we chunk the blob into pieces of 10 MiB
+ const sliceSize = 10 * 1e6;
+ for (let fPointer = 0; fPointer < blob.size; fPointer += sliceSize) {
+ // console.log(fPointer);
+ const blobPiece = blob.slice(fPointer, fPointer + sliceSize);
+ const reader = new FileReader();
+
+ const waiter = new Promise((resolve, reject) => {
+ reader.onloadend = evt => {
+ const arrayBufferNew = evt.target.result;
+ const uint8ArrayNew = new Uint8Array(arrayBufferNew);
+ // Buffer.from(reader.result)
+ writer.write(uint8ArrayNew);
+ resolve();
+ };
+ reader.readAsArrayBuffer(blobPiece);
+ });
+ await waiter;
+ }
+ writer.close();
+};
+
+export default exportConversationalHistory;
diff --git a/yarn.lock b/yarn.lock
index 19c0646d32..438cc94f27 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4334,6 +4334,11 @@ ignore@^5.1.4, ignore@^5.1.8:
resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
+immediate@~3.0.5:
+ version "3.0.6"
+ resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+ integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
+
immutable@^3.7.4:
version "3.8.2"
resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
@@ -5442,6 +5447,16 @@ jsprim@^1.2.2:
array-includes "^3.1.2"
object.assign "^4.1.2"
+jszip@^3.6.0:
+ version "3.6.0"
+ resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.6.0.tgz#839b72812e3f97819cc13ac4134ffced95dd6af9"
+ integrity sha512-jgnQoG9LKnWO3mnVNBnfhkh0QknICd1FGSrXcgrl67zioyJ4wgx25o9ZqwNtrROSflGBCGYnJfjrIyRIby1OoQ==
+ dependencies:
+ lie "~3.3.0"
+ pako "~1.0.2"
+ readable-stream "~2.3.6"
+ set-immediate-shim "~1.0.1"
+
katex@^0.12.0:
version "0.12.0"
resolved "https://registry.yarnpkg.com/katex/-/katex-0.12.0.tgz#2fb1c665dbd2b043edcf8a1f5c555f46beaa0cb9"
@@ -5509,6 +5524,13 @@ levn@^0.4.1:
prelude-ls "^1.2.1"
type-check "~0.4.0"
+lie@~3.3.0:
+ version "3.3.0"
+ resolved "https://registry.yarnpkg.com/lie/-/lie-3.3.0.tgz#dcf82dee545f46074daf200c7c1c5a08e0f40f6a"
+ integrity sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==
+ dependencies:
+ immediate "~3.0.5"
+
lines-and-columns@^1.1.6:
version "1.1.6"
resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
@@ -6256,6 +6278,11 @@ pako@^2.0.3:
resolved "https://registry.yarnpkg.com/pako/-/pako-2.0.3.tgz#cdf475e31b678565251406de9e759196a0ea7a43"
integrity sha512-WjR1hOeg+kki3ZIOjaf4b5WVcay1jaliKSYiEaB1XzwhMQZJxRdQRv0V31EKBYlxb4T7SK3hjfc/jxyU64BoSw==
+pako@~1.0.2:
+ version "1.0.11"
+ resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
+ integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
+
parent-module@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -6862,7 +6889,7 @@ read-pkg@^5.2.0:
parse-json "^5.0.0"
type-fest "^0.6.0"
-readable-stream@^2.0.2:
+readable-stream@^2.0.2, readable-stream@~2.3.6:
version "2.3.7"
resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
@@ -7301,6 +7328,11 @@ set-blocking@^2.0.0:
resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
+set-immediate-shim@~1.0.1:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
+ integrity sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E=
+
set-value@^2.0.0, set-value@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
@@ -7556,6 +7588,11 @@ stealthy-require@^1.1.1:
resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
integrity sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=
+streamsaver@^2.0.5:
+ version "2.0.5"
+ resolved "https://registry.yarnpkg.com/streamsaver/-/streamsaver-2.0.5.tgz#3212f0e908fcece5b3a65591094475cf87850d00"
+ integrity sha512-KIWtBvi8A6FiFZGNSyuIZRZM6C8AvnWTiCx/TYa7so420vC5sQwcBKkdqInuGWoWMfeWy/P+/cRqMtWVf4RW9w==
+
string-length@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.1.tgz#4a973bf31ef77c4edbceadd6af2611996985f8a1"
From 16c55ba92f84334afb1c37ef33e723fff89e5fa3 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 21 May 2021 10:44:38 +0530
Subject: [PATCH 002/176] Use ts instead of age
---
src/utils/exportUtils.js | 38 ++++++++++++++++----------------------
1 file changed, 16 insertions(+), 22 deletions(-)
diff --git a/src/utils/exportUtils.js b/src/utils/exportUtils.js
index f784c48f8f..1954d64467 100644
--- a/src/utils/exportUtils.js
+++ b/src/utils/exportUtils.js
@@ -58,7 +58,7 @@ const getTimelineConversation = (room) => {
if (!timelineWindow.canPaginate('f')) {
events.push(...timelineSet.getPendingEvents());
}
-
+ console.log(events);
return events;
};
@@ -307,19 +307,13 @@ const userColors = [
"#ff8c44",
];
-const createDiv = (content, id, ...classNames) => {
- return `<div class = "${classNames.join(" ")}" id = "${id}" >
- ${content}
- </div>`;
-};
-
//Get a color associated with a string. This is to map userId to a specific color
const getUserColor = (userId) => {
return userColors[userId.length % 4];
};
-const createBody = (event, joined = false) => {
+const createMessageBody = (event, joined = false, isReply = false, replyId = null) => {
return `
<div class="message default clearfix ${joined ? `joined` : ``}" id="message2680">
${!joined ? `<div class="pull_left userpic_wrap">
@@ -328,35 +322,35 @@ const createBody = (event, joined = false) => {
</div>
</div>` : ``}
<div class="body">
- <div class="pull_right date details" title="${new Date(event._localTimestamp)}">${new Date(event._localTimestamp).toLocaleTimeString().slice(0, -3)}</div>
+ <div class="pull_right date details" title="${new Date(event.getTs())}">${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}</div>
${!joined ? `<div class="from_name" style="color:${getUserColor(event.sender.name)}">
${event.sender.name}
</div>`: ``}
+ ${isReply ?
+ `<div class="reply_to details">
+ In reply to <a href="#${replyId}">this message</a>
+ </div>`: ``}
<div class="text"> ${event.getContent().body} </div>
</div>
</div>
`;
};
-const replyAnchor = (eventId) => {
- return `<a href = "#${eventId}">this message</a>}`;
-};
-
-const _isReply = (event) => {
+const replyId = (event) => {
const relatesTo = event.getContent()["m.relates_to"];
- const isReply = !!(relatesTo && relatesTo["m.in_reply_to"]);
- return isReply;
+ const replyId = relatesTo ? relatesTo["m.in_reply_to"].event_id : null;
+ return replyId;
};
const dateSeparator = (event, prevEvent) => {
- const prevDate = prevEvent ? new Date(prevEvent._localTimestamp) : null;
- const currDate = new Date(event._localTimestamp);
+ const prevDate = prevEvent ? new Date(prevEvent.getTs()) : null;
+ const currDate = new Date(event.getTs());
if (!prevDate || currDate.setHours(0, 0, 0, 0) !== prevDate.setHours(0, 0, 0, 0)) {
return `
<div class="message service">
<div class="body details">
- ${new Date(event._localTimestamp)
+ ${new Date(event.getTs())
.toLocaleString("en-us", {year: "numeric", month: "long", day: "numeric" })}
</div>
</div>
@@ -370,11 +364,11 @@ const createHTML = (events, room) => {
let prevEvent = null;
for (const event of events) {
content += dateSeparator(event, prevEvent);
- if (event.getContent().msgtype === "m.text") {
+ if (event.getType() === "m.room.message") {
const shouldBeJoined = prevEvent && prevEvent.getContent().msgtype === "m.text"
&& event.sender.userId === prevEvent.sender.userId && !dateSeparator(event, prevEvent);
- const body = createBody(event, shouldBeJoined);
+ const body = createMessageBody(event, shouldBeJoined, !!replyId(event), replyId(event));
content += body;
} else {
@@ -394,8 +388,8 @@ const createHTML = (events, room) => {
const exportConversationalHistory = async (room) => {
const res = getTimelineConversation(room);
- const html = createHTML(res, room);
const zip = new JSZip();
+ const html = createHTML(res, room);
zip.file("css/style.css", css);
zip.file("index.html", html);
const filename = `matrix-export-${new Date().toISOString()}.zip`;
From cea60ef26c05b11a20d42afb25878b85eab469b6 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 21 May 2021 13:18:39 +0530
Subject: [PATCH 003/176] Handle reply checking for encrypted messages
---
src/utils/exportUtils.js | 23 +++++++++++------------
1 file changed, 11 insertions(+), 12 deletions(-)
diff --git a/src/utils/exportUtils.js b/src/utils/exportUtils.js
index 1954d64467..e357ac6575 100644
--- a/src/utils/exportUtils.js
+++ b/src/utils/exportUtils.js
@@ -175,7 +175,7 @@ pre {
.page_body {
padding-top: 64px;
- width: 480px;
+ width: 700px;
margin: 0 auto;
}
@@ -239,7 +239,6 @@ div.selected {
}
.default .from_name {
- color: #3892db;
font-weight: 700;
padding-bottom: 5px;
}
@@ -336,10 +335,13 @@ const createMessageBody = (event, joined = false, isReply = false, replyId = nul
`;
};
-const replyId = (event) => {
- const relatesTo = event.getContent()["m.relates_to"];
- const replyId = relatesTo ? relatesTo["m.in_reply_to"].event_id : null;
- return replyId;
+
+const baseEventId = (event) => {
+ const isEncrypted = event.isEncrypted();
+ // If encrypted, in_reply_to lies in event.event.content
+ const content = isEncrypted ? event.event.content : event.getContent();
+ const relatesTo = content["m.relates_to"];
+ return relatesTo ? relatesTo["m.in_reply_to"].event_id : null;
};
@@ -365,11 +367,10 @@ const createHTML = (events, room) => {
for (const event of events) {
content += dateSeparator(event, prevEvent);
if (event.getType() === "m.room.message") {
+ const replyTo = baseEventId(event);
const shouldBeJoined = prevEvent && prevEvent.getContent().msgtype === "m.text"
- && event.sender.userId === prevEvent.sender.userId && !dateSeparator(event, prevEvent);
-
- const body = createMessageBody(event, shouldBeJoined, !!replyId(event), replyId(event));
-
+ && event.sender.userId === prevEvent.sender.userId && !dateSeparator(event, prevEvent) && !replyTo;
+ const body = createMessageBody(event, shouldBeJoined, !!replyTo, replyTo);
content += body;
} else {
content += `
@@ -395,9 +396,7 @@ const exportConversationalHistory = async (room) => {
const filename = `matrix-export-${new Date().toISOString()}.zip`;
//Generate the zip file asynchronously
-
const blob = await zip.generateAsync({ type: "blob" });
-
//Create a writable stream to the directory
const fileStream = streamSaver.createWriteStream(filename, blob.size);
const writer = fileStream.getWriter();
From 2676e61d698db1ac490f8c374bf3fca221308e7b Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 21 May 2021 20:00:01 +0530
Subject: [PATCH 004/176] Embed avatar and chat images into HTML
---
src/utils/exportUtils.js | 198 +++++++++++++++++++++++++++------------
1 file changed, 137 insertions(+), 61 deletions(-)
diff --git a/src/utils/exportUtils.js b/src/utils/exportUtils.js
index e357ac6575..433600eac4 100644
--- a/src/utils/exportUtils.js
+++ b/src/utils/exportUtils.js
@@ -4,6 +4,8 @@ import { TimelineWindow } from "matrix-js-sdk/src/timeline-window";
import JSZip from "jszip";
import { textForEvent } from "../TextForEvent";
import streamSaver from "streamsaver";
+import { decryptFile } from "./DecryptFile";
+import { mediaFromContent, mediaFromMxc } from "../customisations/Media";
const wrapHTML = (content, room) => (`
<!DOCTYPE html>
@@ -33,36 +35,6 @@ const wrapHTML = (content, room) => (`
`);
-const getTimelineConversation = (room) => {
- if (!room) return;
-
- const cli = MatrixClientPeg.get();
-
- const timelineSet = room.getUnfilteredTimelineSet();
-
- const timelineWindow = new TimelineWindow(
- cli, timelineSet,
- {windowLimit: Number.MAX_VALUE});
-
- timelineWindow.load(null, 20);
-
- const events = timelineWindow.getEvents();
-
- // Clone and reverse the events so that we preserve the order
- arrayFastClone(events)
- .reverse()
- .forEach(event => {
- cli.decryptEventIfNeeded(event);
- });
-
- if (!timelineWindow.canPaginate('f')) {
- events.push(...timelineSet.getPendingEvents());
- }
- console.log(events);
- return events;
-};
-
-
const css = `
body {
margin: 0;
@@ -297,6 +269,37 @@ div.selected {
}
`;
+
+const getTimelineConversation = (room) => {
+ if (!room) return;
+
+ const cli = MatrixClientPeg.get();
+
+ const timelineSet = room.getUnfilteredTimelineSet();
+
+ const timelineWindow = new TimelineWindow(
+ cli, timelineSet,
+ {windowLimit: Number.MAX_VALUE});
+
+ timelineWindow.load(null, 20);
+
+ const events = timelineWindow.getEvents();
+
+ // Clone and reverse the events so that we preserve the order
+ arrayFastClone(events)
+ .reverse()
+ .forEach(event => {
+ cli.decryptEventIfNeeded(event);
+ });
+
+ if (!timelineWindow.canPaginate('f')) {
+ events.push(...timelineSet.getPendingEvents());
+ }
+ console.log(events);
+ return events;
+};
+
+
const userColors = [
"#64bf47",
"#4f9cd9",
@@ -307,41 +310,50 @@ const userColors = [
];
-//Get a color associated with a string. This is to map userId to a specific color
+//Get a color associated with string length. This is to map userId to a specific color
const getUserColor = (userId) => {
return userColors[userId.length % 4];
};
-const createMessageBody = (event, joined = false, isReply = false, replyId = null) => {
- return `
- <div class="message default clearfix ${joined ? `joined` : ``}" id="message2680">
- ${!joined ? `<div class="pull_left userpic_wrap">
- <div class="userpic" style="width: 42px; height: 42px; background-color: ${getUserColor(event.sender.name)}">
- <div class="initials" style="line-height: 42px">${event.sender.name[0]}</div>
- </div>
- </div>` : ``}
- <div class="body">
- <div class="pull_right date details" title="${new Date(event.getTs())}">${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}</div>
- ${!joined ? `<div class="from_name" style="color:${getUserColor(event.sender.name)}">
- ${event.sender.name}
- </div>`: ``}
- ${isReply ?
- `<div class="reply_to details">
- In reply to <a href="#${replyId}">this message</a>
- </div>`: ``}
- <div class="text"> ${event.getContent().body} </div>
- </div>
- </div>
- `;
+
+const getUserPic = async (event) => {
+ const member = event.sender;
+ if (!member.getMxcAvatarUrl()) {
+ return `
+ <div class="pull_left userpic_wrap">
+ <div class="userpic" style="width: 42px;height: 42px;background-color: ${getUserColor(member.userId)}">
+ <div class="initials" style="line-height: 42px;" src="users/${member.userId}">${event.sender.name[0]}</div>
+ </div>
+ </div>
+ `;
+ } else {
+ const imageUrl = mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(42, 42, "crop");
+
+ if (!avatars.has(member.userId)) {
+ avatars.set(member.userId, true);
+ const image = await fetch(imageUrl);
+ const blob = await image.blob();
+ zip.file(`users/${member.userId}`, blob);
+ }
+
+ return `
+ <div class="pull_left userpic_wrap">
+ <div class="userpic" style="width: 42px; height: 42px;">
+ <img class="initials" style="width: 42px;height: 42px;line-height:42px;" src="users/${member.userId}"/>
+ </div>
+ </div>
+ `;
+ }
};
-
+//Gets the event_id of an event to which an event is replied
const baseEventId = (event) => {
const isEncrypted = event.isEncrypted();
+
// If encrypted, in_reply_to lies in event.event.content
const content = isEncrypted ? event.event.content : event.getContent();
const relatesTo = content["m.relates_to"];
- return relatesTo ? relatesTo["m.in_reply_to"].event_id : null;
+ return (relatesTo && relatesTo["m.in_reply_to"]) ? relatesTo["m.in_reply_to"]["event_id"] : null;
};
@@ -361,16 +373,75 @@ const dateSeparator = (event, prevEvent) => {
return "";
};
-const createHTML = (events, room) => {
+const getImageData = async (event) => {
+ let blob;
+ try {
+ const isEncrypted = event.isEncrypted();
+ const content = event.getContent();
+ if (isEncrypted) {
+ blob = await decryptFile(content.file);
+ } else {
+ const media = mediaFromContent(event.getContent());
+ const image = await fetch(media.srcHttp);
+ blob = image.blob();
+ }
+ } catch (err) {
+ console.log("Error decrypting image");
+ }
+ return blob;
+};
+
+
+const createMessageBody = async (event, joined = false, isReply = false, replyId = null) => {
+ const userPic = await getUserPic(event);
+ let messageBody = "";
+ switch (event.getContent().msgtype) {
+ case "m.text":
+ messageBody = `<div class="text"> ${event.getContent().body} </div>`;
+ break;
+ case "m.image": {
+ messageBody = `<a class="photo_wrap clearfix pull_left" href="images/${event.getId()}.png">
+ <img class="photo" src="images/${event.getId()}.png" style="width: 260px; height: 156px">
+ </a>`;
+ const blob = await getImageData(event);
+ zip.file(`images/${event.getId()}.png`, blob);
+ }
+ break;
+ default:
+ break;
+ }
+
+ return `
+ <div class="message default clearfix ${joined ? `joined` : ``}" id="message2680">
+ ${!joined ? userPic : ``}
+ <div class="body">
+ <div class="pull_right date details" title="${new Date(event.getTs())}">${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}</div>
+ ${!joined ? `<div class="from_name" style="color:${getUserColor(event.sender.name)}">
+ ${event.sender.name}
+ </div>`: ``}
+ ${isReply ?
+ `<div class="reply_to details">
+ In reply to <a href="#${replyId}">this message</a>
+ </div>`: ``}
+ ${messageBody}
+ </div>
+ </div>
+ `;
+};
+
+
+const createHTML = async (events, room) => {
let content = "";
let prevEvent = null;
for (const event of events) {
content += dateSeparator(event, prevEvent);
+
if (event.getType() === "m.room.message") {
const replyTo = baseEventId(event);
const shouldBeJoined = prevEvent && prevEvent.getContent().msgtype === "m.text"
&& event.sender.userId === prevEvent.sender.userId && !dateSeparator(event, prevEvent) && !replyTo;
- const body = createMessageBody(event, shouldBeJoined, !!replyTo, replyTo);
+
+ const body = await createMessageBody(event, shouldBeJoined, !!replyTo, replyTo);
content += body;
} else {
content += `
@@ -387,22 +458,27 @@ const createHTML = (events, room) => {
};
+const avatars = new Map();
+let zip;
const exportConversationalHistory = async (room) => {
const res = getTimelineConversation(room);
- const zip = new JSZip();
- const html = createHTML(res, room);
- zip.file("css/style.css", css);
+ zip = new JSZip();
+
+ const html = await createHTML(res, room, avatars);
+
zip.file("index.html", html);
+ zip.file("css/style.css", css);
+
+ avatars.clear();
const filename = `matrix-export-${new Date().toISOString()}.zip`;
//Generate the zip file asynchronously
const blob = await zip.generateAsync({ type: "blob" });
+
//Create a writable stream to the directory
const fileStream = streamSaver.createWriteStream(filename, blob.size);
const writer = fileStream.getWriter();
- // console.log(blob.size);
-
// Here we chunk the blob into pieces of 10 MiB
const sliceSize = 10 * 1e6;
for (let fPointer = 0; fPointer < blob.size; fPointer += sliceSize) {
From e59f23880bd1c4fa4355ffd54762120fe6bb7c97 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 21 May 2021 20:25:29 +0530
Subject: [PATCH 005/176] Minor UI changes
---
src/utils/exportUtils.js | 13 +++++++------
1 file changed, 7 insertions(+), 6 deletions(-)
diff --git a/src/utils/exportUtils.js b/src/utils/exportUtils.js
index 433600eac4..0ab65df911 100644
--- a/src/utils/exportUtils.js
+++ b/src/utils/exportUtils.js
@@ -281,7 +281,7 @@ const getTimelineConversation = (room) => {
cli, timelineSet,
{windowLimit: Number.MAX_VALUE});
- timelineWindow.load(null, 20);
+ timelineWindow.load(null, 30);
const events = timelineWindow.getEvents();
@@ -347,7 +347,7 @@ const getUserPic = async (event) => {
};
//Gets the event_id of an event to which an event is replied
-const baseEventId = (event) => {
+const getBaseEventId = (event) => {
const isEncrypted = event.isEncrypted();
// If encrypted, in_reply_to lies in event.event.content
@@ -401,7 +401,7 @@ const createMessageBody = async (event, joined = false, isReply = false, replyId
break;
case "m.image": {
messageBody = `<a class="photo_wrap clearfix pull_left" href="images/${event.getId()}.png">
- <img class="photo" src="images/${event.getId()}.png" style="width: 260px; height: 156px">
+ <img class="photo" src="images/${event.getId()}.png" style="max-width: 600px; max-height: 500px;">
</a>`;
const blob = await getImageData(event);
zip.file(`images/${event.getId()}.png`, blob);
@@ -437,20 +437,21 @@ const createHTML = async (events, room) => {
content += dateSeparator(event, prevEvent);
if (event.getType() === "m.room.message") {
- const replyTo = baseEventId(event);
+ const replyTo = getBaseEventId(event);
const shouldBeJoined = prevEvent && prevEvent.getContent().msgtype === "m.text"
&& event.sender.userId === prevEvent.sender.userId && !dateSeparator(event, prevEvent) && !replyTo;
const body = await createMessageBody(event, shouldBeJoined, !!replyTo, replyTo);
content += body;
} else {
- content += `
+ const eventText = textForEvent(event);
+ content += eventText ? `
<div class="message service" id="${event.getId()}">
<div class="body details">
${textForEvent(event)}
</div>
</div>
- `;
+ ` : "";
}
prevEvent = event;
}
From dfb7aa4320834dfc58016a07811f1866e4ebd44b Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Sat, 22 May 2021 11:32:55 +0530
Subject: [PATCH 006/176] Refactor, move HTML export to a new file and switch
to TypeScript
---
src/components/views/rooms/RoomHeader.js | 5 +-
.../HtmlExport.ts} | 106 +++++++-----------
src/utils/exportUtils/exportUtils.js | 56 +++++++++
3 files changed, 98 insertions(+), 69 deletions(-)
rename src/utils/{exportUtils.js => exportUtils/HtmlExport.ts} (80%)
create mode 100644 src/utils/exportUtils/exportUtils.js
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index d6b4822cc2..ed2ca07ff5 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -32,7 +32,8 @@ import RoomTopic from "../elements/RoomTopic";
import RoomName from "../elements/RoomName";
import {PlaceCallType} from "../../../CallHandler";
import {replaceableComponent} from "../../../utils/replaceableComponent";
-import exportConversationalHistory from '../../../utils/exportUtils';
+import exportConversationalHistory from '../../../utils/exportUtils/exportUtils';
+import { exportFormats, exportOptions } from '../../../utils/exportUtils/exportUtils';
@replaceableComponent("views.rooms.RoomHeader")
@@ -120,7 +121,7 @@ export default class RoomHeader extends React.Component {
}
_exportConvertionalHistory = async () => {
- exportConversationalHistory(this.props.room);
+ exportConversationalHistory(this.props.room, exportFormats.HTML, exportOptions.TIMELINE);
}
render() {
diff --git a/src/utils/exportUtils.js b/src/utils/exportUtils/HtmlExport.ts
similarity index 80%
rename from src/utils/exportUtils.js
rename to src/utils/exportUtils/HtmlExport.ts
index 0ab65df911..1b0d59ab6b 100644
--- a/src/utils/exportUtils.js
+++ b/src/utils/exportUtils/HtmlExport.ts
@@ -1,13 +1,13 @@
-import { MatrixClientPeg } from "../MatrixClientPeg";
-import { arrayFastClone } from "./arrays";
-import { TimelineWindow } from "matrix-js-sdk/src/timeline-window";
-import JSZip from "jszip";
-import { textForEvent } from "../TextForEvent";
-import streamSaver from "streamsaver";
-import { decryptFile } from "./DecryptFile";
-import { mediaFromContent, mediaFromMxc } from "../customisations/Media";
-const wrapHTML = (content, room) => (`
+import streamSaver from "streamsaver";
+import JSZip from "jszip";
+import { decryptFile } from "../DecryptFile";
+import { mediaFromContent, mediaFromMxc } from "../../customisations/Media";
+import { textForEvent } from "../../TextForEvent";
+import Room from 'matrix-js-sdk/src/models/room';
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+
+const wrapHTML = (content: string, room: Room) => (`
<!DOCTYPE html>
<html>
<head>
@@ -270,59 +270,27 @@ div.selected {
`;
-const getTimelineConversation = (room) => {
- if (!room) return;
-
- const cli = MatrixClientPeg.get();
-
- const timelineSet = room.getUnfilteredTimelineSet();
-
- const timelineWindow = new TimelineWindow(
- cli, timelineSet,
- {windowLimit: Number.MAX_VALUE});
-
- timelineWindow.load(null, 30);
-
- const events = timelineWindow.getEvents();
-
- // Clone and reverse the events so that we preserve the order
- arrayFastClone(events)
- .reverse()
- .forEach(event => {
- cli.decryptEventIfNeeded(event);
- });
-
- if (!timelineWindow.canPaginate('f')) {
- events.push(...timelineSet.getPendingEvents());
- }
- console.log(events);
- return events;
-};
-
-
const userColors = [
"#64bf47",
"#4f9cd9",
"#9884e8",
- "#e671a5",
- "#47bcd1",
- "#ff8c44",
];
-
//Get a color associated with string length. This is to map userId to a specific color
-const getUserColor = (userId) => {
+const getUserColor = (userId: string) => {
return userColors[userId.length % 4];
};
-const getUserPic = async (event) => {
+const getUserPic = async (event: MatrixEvent) => {
const member = event.sender;
if (!member.getMxcAvatarUrl()) {
return `
<div class="pull_left userpic_wrap">
<div class="userpic" style="width: 42px;height: 42px;background-color: ${getUserColor(member.userId)}">
- <div class="initials" style="line-height: 42px;" src="users/${member.userId}">${event.sender.name[0]}</div>
+ <div class="initials" style="line-height: 42px;" src="users/${member.userId}">
+ ${event.sender.name[0]}
+ </div>;
</div>
</div>
`;
@@ -347,7 +315,7 @@ const getUserPic = async (event) => {
};
//Gets the event_id of an event to which an event is replied
-const getBaseEventId = (event) => {
+const getBaseEventId = (event: MatrixEvent) => {
const isEncrypted = event.isEncrypted();
// If encrypted, in_reply_to lies in event.event.content
@@ -357,7 +325,7 @@ const getBaseEventId = (event) => {
};
-const dateSeparator = (event, prevEvent) => {
+const dateSeparator = (event: MatrixEvent, prevEvent: MatrixEvent) => {
const prevDate = prevEvent ? new Date(prevEvent.getTs()) : null;
const currDate = new Date(event.getTs());
if (!prevDate || currDate.setHours(0, 0, 0, 0) !== prevDate.setHours(0, 0, 0, 0)) {
@@ -373,8 +341,8 @@ const dateSeparator = (event, prevEvent) => {
return "";
};
-const getImageData = async (event) => {
- let blob;
+const getImageData = async (event: MatrixEvent) => {
+ let blob: Blob;
try {
const isEncrypted = event.isEncrypted();
const content = event.getContent();
@@ -383,7 +351,7 @@ const getImageData = async (event) => {
} else {
const media = mediaFromContent(event.getContent());
const image = await fetch(media.srcHttp);
- blob = image.blob();
+ blob = await image.blob();
}
} catch (err) {
console.log("Error decrypting image");
@@ -392,7 +360,7 @@ const getImageData = async (event) => {
};
-const createMessageBody = async (event, joined = false, isReply = false, replyId = null) => {
+const createMessageBody = async (event: MatrixEvent, joined = false, isReply = false, replyId = null) => {
const userPic = await getUserPic(event);
let messageBody = "";
switch (event.getContent().msgtype) {
@@ -400,9 +368,10 @@ const createMessageBody = async (event, joined = false, isReply = false, replyId
messageBody = `<div class="text"> ${event.getContent().body} </div>`;
break;
case "m.image": {
- messageBody = `<a class="photo_wrap clearfix pull_left" href="images/${event.getId()}.png">
- <img class="photo" src="images/${event.getId()}.png" style="max-width: 600px; max-height: 500px;">
- </a>`;
+ messageBody = `
+ <a class="photo_wrap clearfix pull_left" href="images/${event.getId()}.png">
+ <img class="photo" src="images/${event.getId()}.png" style="max-width: 600px; max-height: 500px;">
+ </a>`;
const blob = await getImageData(event);
zip.file(`images/${event.getId()}.png`, blob);
}
@@ -412,10 +381,12 @@ const createMessageBody = async (event, joined = false, isReply = false, replyId
}
return `
- <div class="message default clearfix ${joined ? `joined` : ``}" id="message2680">
+ <div class="message default clearfix ${joined ? `joined` : ``}" id="${event.getId()}">
${!joined ? userPic : ``}
<div class="body">
- <div class="pull_right date details" title="${new Date(event.getTs())}">${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}</div>
+ <div class="pull_right date details" title="${new Date(event.getTs())}">
+ ${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}
+ </div>;
${!joined ? `<div class="from_name" style="color:${getUserColor(event.sender.name)}">
${event.sender.name}
</div>`: ``}
@@ -430,7 +401,7 @@ const createMessageBody = async (event, joined = false, isReply = false, replyId
};
-const createHTML = async (events, room) => {
+const createHTML = async (events: MatrixEvent[], room: Room) => {
let content = "";
let prevEvent = null;
for (const event of events) {
@@ -458,19 +429,19 @@ const createHTML = async (events, room) => {
return wrapHTML(content, room);
};
-
const avatars = new Map();
let zip;
-const exportConversationalHistory = async (room) => {
- const res = getTimelineConversation(room);
+
+const exportAsHTML = async (res: MatrixEvent[], room: Room) => {
zip = new JSZip();
- const html = await createHTML(res, room, avatars);
+ const html = await createHTML(res, room);
zip.file("index.html", html);
zip.file("css/style.css", css);
avatars.clear();
+
const filename = `matrix-export-${new Date().toISOString()}.zip`;
//Generate the zip file asynchronously
@@ -480,16 +451,17 @@ const exportConversationalHistory = async (room) => {
const fileStream = streamSaver.createWriteStream(filename, blob.size);
const writer = fileStream.getWriter();
- // Here we chunk the blob into pieces of 10 MiB
+ // Here we chunk the blob into pieces of 10 MB, the size might be dynamically generated.
+ // This can be used to keep track of the progress
const sliceSize = 10 * 1e6;
for (let fPointer = 0; fPointer < blob.size; fPointer += sliceSize) {
// console.log(fPointer);
const blobPiece = blob.slice(fPointer, fPointer + sliceSize);
const reader = new FileReader();
- const waiter = new Promise((resolve, reject) => {
+ const waiter = new Promise<void>((resolve, reject) => {
reader.onloadend = evt => {
- const arrayBufferNew = evt.target.result;
+ const arrayBufferNew: any = evt.target.result;
const uint8ArrayNew = new Uint8Array(arrayBufferNew);
// Buffer.from(reader.result)
writer.write(uint8ArrayNew);
@@ -500,6 +472,6 @@ const exportConversationalHistory = async (room) => {
await waiter;
}
writer.close();
-};
+}
-export default exportConversationalHistory;
+export default exportAsHTML;
diff --git a/src/utils/exportUtils/exportUtils.js b/src/utils/exportUtils/exportUtils.js
new file mode 100644
index 0000000000..38abe62d74
--- /dev/null
+++ b/src/utils/exportUtils/exportUtils.js
@@ -0,0 +1,56 @@
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+import { arrayFastClone } from "../arrays";
+import { TimelineWindow } from "matrix-js-sdk/src/timeline-window";
+import exportAsHTML from "./HtmlExport";
+
+export const exportFormats = Object.freeze({
+ "HTML": "HTML",
+ "JSON": "JSON",
+ "LOGS": "LOGS",
+});
+
+export const exportOptions = Object.freeze({
+ "TIMELINE": "TIMELINE",
+});
+
+const getTimelineConversation = (room) => {
+ if (!room) return;
+
+ const cli = MatrixClientPeg.get();
+
+ const timelineSet = room.getUnfilteredTimelineSet();
+
+ const timelineWindow = new TimelineWindow(
+ cli, timelineSet,
+ {windowLimit: Number.MAX_VALUE});
+
+ timelineWindow.load(null, 20);
+
+ const events = timelineWindow.getEvents();
+
+ // Clone and reverse the events so that we preserve the order
+ arrayFastClone(events)
+ .reverse()
+ .forEach(event => {
+ cli.decryptEventIfNeeded(event);
+ });
+
+ console.log(events);
+ return events;
+};
+
+
+const exportConversationalHistory = async (room, format, options) => {
+ const res = getTimelineConversation(room);
+ switch (format) {
+ case exportFormats.HTML:
+ await exportAsHTML(res, room);
+ break;
+ case exportFormats.JSON:
+ break;
+ case exportFormats.LOGS:
+ break;
+ }
+};
+
+export default exportConversationalHistory;
From 0bf65da70f11921ccd83fda27efac1ce86d8662b Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Sat, 22 May 2021 11:38:32 +0530
Subject: [PATCH 007/176] Remove unnecessary semicolons
---
src/utils/exportUtils/HtmlExport.ts | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.ts b/src/utils/exportUtils/HtmlExport.ts
index 1b0d59ab6b..6ca7f8057b 100644
--- a/src/utils/exportUtils/HtmlExport.ts
+++ b/src/utils/exportUtils/HtmlExport.ts
@@ -290,7 +290,7 @@ const getUserPic = async (event: MatrixEvent) => {
<div class="userpic" style="width: 42px;height: 42px;background-color: ${getUserColor(member.userId)}">
<div class="initials" style="line-height: 42px;" src="users/${member.userId}">
${event.sender.name[0]}
- </div>;
+ </div>
</div>
</div>
`;
@@ -386,7 +386,7 @@ const createMessageBody = async (event: MatrixEvent, joined = false, isReply = f
<div class="body">
<div class="pull_right date details" title="${new Date(event.getTs())}">
${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}
- </div>;
+ </div>
${!joined ? `<div class="from_name" style="color:${getUserColor(event.sender.name)}">
${event.sender.name}
</div>`: ``}
From a47117e3b025f1a44f4538be31a7ededd5aca395 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Sat, 22 May 2021 11:55:57 +0530
Subject: [PATCH 008/176] Do not process edit events as they are already
considered
---
src/utils/exportUtils/HtmlExport.ts | 33 +++++++++++++++++------------
1 file changed, 20 insertions(+), 13 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.ts b/src/utils/exportUtils/HtmlExport.ts
index 6ca7f8057b..97e97fdc1e 100644
--- a/src/utils/exportUtils/HtmlExport.ts
+++ b/src/utils/exportUtils/HtmlExport.ts
@@ -324,6 +324,10 @@ const getBaseEventId = (event: MatrixEvent) => {
return (relatesTo && relatesTo["m.in_reply_to"]) ? relatesTo["m.in_reply_to"]["event_id"] : null;
};
+const isEdit = (event: MatrixEvent) => {
+ if (event.getType() === "m.room.message" && event.getContent().hasOwnProperty("m.new_content")) return true;
+ return false;
+}
const dateSeparator = (event: MatrixEvent, prevEvent: MatrixEvent) => {
const prevDate = prevEvent ? new Date(prevEvent.getTs()) : null;
@@ -383,20 +387,21 @@ const createMessageBody = async (event: MatrixEvent, joined = false, isReply = f
return `
<div class="message default clearfix ${joined ? `joined` : ``}" id="${event.getId()}">
${!joined ? userPic : ``}
- <div class="body">
- <div class="pull_right date details" title="${new Date(event.getTs())}">
- ${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}
- </div>
- ${!joined ? `<div class="from_name" style="color:${getUserColor(event.sender.name)}">
- ${event.sender.name}
- </div>`: ``}
+ <div class="body">
+ <div class="pull_right date details" title="${new Date(event.getTs())}">
+ ${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}
+ </div>
+ ${!joined ? `
+ <div class="from_name" style="color:${getUserColor(event.sender.name)}">
+ ${event.sender.name}
+ </div>`: ``}
${isReply ?
- `<div class="reply_to details">
- In reply to <a href="#${replyId}">this message</a>
- </div>`: ``}
+ ` <div class="reply_to details">
+ In reply to <a href="#${replyId}">this message</a>
+ </div>`: ``}
${messageBody}
- </div>
- </div>
+ </div>
+ </div>
`;
};
@@ -405,6 +410,8 @@ const createHTML = async (events: MatrixEvent[], room: Room) => {
let content = "";
let prevEvent = null;
for (const event of events) {
+ // As the getContent of the edited event fetches the latest edit, there is no need to process edit events
+ if (isEdit(event)) continue;
content += dateSeparator(event, prevEvent);
if (event.getType() === "m.room.message") {
@@ -430,7 +437,7 @@ const createHTML = async (events: MatrixEvent[], room: Room) => {
};
const avatars = new Map();
-let zip;
+let zip: any;
const exportAsHTML = async (res: MatrixEvent[], room: Room) => {
zip = new JSZip();
From bb81515cdd2131030dbe8d72ad45eaf4e0f9047e Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Sat, 22 May 2021 12:35:13 +0530
Subject: [PATCH 009/176] Use matrix style class names, modify CSS and some
small changes
---
src/components/views/rooms/RoomHeader.js | 2 +-
src/utils/exportUtils/HtmlExport.ts | 196 ++++++++++-------------
2 files changed, 85 insertions(+), 113 deletions(-)
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index ed2ca07ff5..717a5cecb7 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -121,7 +121,7 @@ export default class RoomHeader extends React.Component {
}
_exportConvertionalHistory = async () => {
- exportConversationalHistory(this.props.room, exportFormats.HTML, exportOptions.TIMELINE);
+ await exportConversationalHistory(this.props.room, exportFormats.HTML, exportOptions.TIMELINE);
}
render() {
diff --git a/src/utils/exportUtils/HtmlExport.ts b/src/utils/exportUtils/HtmlExport.ts
index 97e97fdc1e..d234d22662 100644
--- a/src/utils/exportUtils/HtmlExport.ts
+++ b/src/utils/exportUtils/HtmlExport.ts
@@ -10,27 +10,26 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
const wrapHTML = (content: string, room: Room) => (`
<!DOCTYPE html>
<html>
- <head>
- <meta charset="utf-8" />
- <title>Exported Data</title>
- <meta content="width=device-width, initial-scale=1.0" name="viewport" />
- <link href="css/style.css" rel="stylesheet" />
- <script src="js/script.js" type="text/javascript"></script>
- </head>
- <body>
- <div class="page_wrap">
- <div class="page_header">
- <div class="content">
- <div class="text bold">${room.name}</div>
+ <head>
+ <meta charset="utf-8" />
+ <title>Exported Data</title>
+ <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+ <link href="css/style.css" rel="stylesheet" />
+ </head>
+ <body>
+ <div class="mx_page_wrap">
+ <div class="mx_page_header">
+ <div class="mx_content">
+ <div class="mx_text mx_bold">${room.name}</div>
+ </div>
+ </div>
+ <div class="mx_page_body mx_chat_page">
+ <div class="mx_history">
+ ${content}
+ </div>
+ </div>
</div>
- </div>
- <div class="page_body chat_page">
- <div class="history">
- ${content}
- </div>
- </div>
- </div>
- </body>
+ </body>
</html>
`);
@@ -41,39 +40,7 @@ body {
font: 12px/18px 'Inter', 'Open Sans',"Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,Verdana,sans-serif;
}
-strong {
- font-weight: 700;
-}
-
-code, kbd, pre, samp {
- font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
-}
-
-code {
- padding: 2px 4px;
- font-size: 90%;
- color: #c7254e;
- background-color: #f9f2f4;
- border-radius: 4px;
-}
-
-pre {
- display: block;
- margin: 0;
- line-height: 1.42857143;
- word-break: break-all;
- word-wrap: break-word;
- color: #333;
- background-color: #f5f5f5;
- border-radius: 4px;
- overflow: auto;
- padding: 3px;
- border: 1px solid #eee;
- max-height: none;
- font-size: inherit;
-}
-
-.clearfix:after {
+.mx_clearfix:after {
content: " ";
visibility: hidden;
display: block;
@@ -81,29 +48,29 @@ pre {
clear: both;
}
-.pull_left {
+.mx_pull_left {
float: left;
}
-.pull_right {
+.mx_pull_right {
float: right;
}
-.page_wrap {
+.mx_page_wrap {
background-color: #ffffff;
color: #000000;
}
-.page_wrap a {
+.mx_page_wrap a {
color: #168acd;
text-decoration: none;
}
-.page_wrap a:hover {
+.mx_page_wrap a:hover {
text-decoration: underline;
}
-.page_header {
+.mx_page_header {
position: fixed;
z-index: 10;
background-color: #ffffff;
@@ -111,28 +78,28 @@ pre {
border-bottom: 1px solid #e3e6e8;
}
-.page_header .content {
+.mx_page_header .mx_content {
width: 480px;
margin: 0 auto;
border-radius: 0 !important;
}
-.page_header a.content {
+.mx_page_header a.mx_content {
background-repeat: no-repeat;
background-position: 24px 21px;
background-size: 24px 24px;
}
-.bold {
+.mx_bold {
color: #212121;
font-weight: 700;
}
-.details {
+.mx_details {
color: #70777b;
}
-.page_header .content .text {
+.mx_page_header .mx_content .mx_text {
padding: 24px 24px 22px 24px;
font-size: 22px;
overflow: hidden;
@@ -141,23 +108,23 @@ pre {
text-align: center;
}
-.page_header a.content .text {
+.mx_page_header a.mx_content .mx_text {
padding: 24px 24px 22px 82px;
}
-.page_body {
+.mx_page_body {
padding-top: 64px;
width: 700px;
margin: 0 auto;
}
-.userpic {
+.mx_userpic {
display: block;
border-radius: 50%;
overflow: hidden;
}
-.userpic .initials {
+.mx_userpic .mx_initials {
display: block;
color: #fff;
text-align: center;
@@ -165,106 +132,105 @@ pre {
user-select: none;
}
-a.block_link {
+a.mx_block_link {
display: block;
text-decoration: none !important;
border-radius: 4px;
}
-a.block_link:hover {
+a.mx_block_link:hover {
text-decoration: none !important;
background-color: #f5f7f8;
}
-.history {
+.mx_history {
padding: 16px 0;
}
-.message {
+.mx_message {
margin: 0 -10px;
transition: background-color 2.0s ease;
}
-div.selected {
+div.mx_selected {
background-color: rgba(242,246,250,255);
transition: background-color 0.5s ease;
}
-.service {
+.mx_service {
padding: 10px 24px;
}
-.service .body {
+.mx_service .mx_body {
text-align: center;
}
-.message .userpic .initials {
+.mx_message .mx_userpic .mx_initials {
font-size: 16px;
}
-.default {
+.mx_default {
padding: 10px;
}
-.default.joined {
+.mx_default.mx_joined {
margin-top: -10px;
}
-.default .from_name {
+.mx_default .mx_from_name {
font-weight: 700;
padding-bottom: 5px;
}
-.default .body {
+.mx_default .mx_body {
margin-left: 60px;
}
-.default .text {
+.mx_default .mx_text {
word-wrap: break-word;
line-height: 150%;
}
-.default .reply_to,
-.default .media_wrap {
+.mx_default .mx_reply_to,
+.mx_default .mx_media_wrap {
padding-bottom: 5px;
}
-.default .media {
+.mx_default .mx_media {
margin: 0 -10px;
padding: 5px 10px;
}
-.default .media .fill,
-.default .media .thumb {
+.mx_default .mx_media .mx_fill,
+.mx_default .mx_media .mx_thumb {
width: 48px;
height: 48px;
border-radius: 50%;
}
-.default .media .fill {
+.mx_default .mx_media .mx_fill {
background-repeat: no-repeat;
background-position: 12px 12px;
background-size: 24px 24px;
}
-.default .media .title,
-.default .media_poll .question {
+.mx_default .mx_media .mx_title {
padding-top: 4px;
font-size: 14px;
}
-.default .media .description {
+.mx_default .mx_media .mx_description {
color: #000000;
padding-top: 4px;
font-size: 13px;
}
-.default .media .status {
+.mx_default .mx_media .mx_status {
padding-top: 4px;
font-size: 13px;
}
-.default .photo {
+.mx_default .mx_photo {
display: block;
}
`;
@@ -286,9 +252,9 @@ const getUserPic = async (event: MatrixEvent) => {
const member = event.sender;
if (!member.getMxcAvatarUrl()) {
return `
- <div class="pull_left userpic_wrap">
- <div class="userpic" style="width: 42px;height: 42px;background-color: ${getUserColor(member.userId)}">
- <div class="initials" style="line-height: 42px;" src="users/${member.userId}">
+ <div class="mx_pull_left mx_userpic_wrap">
+ <div class="mx_userpic" style="width: 42px;height: 42px;background-color: ${getUserColor(member.userId)}">
+ <div class="mx_initials" style="line-height: 42px;" src="users/${member.userId}">
${event.sender.name[0]}
</div>
</div>
@@ -305,9 +271,13 @@ const getUserPic = async (event: MatrixEvent) => {
}
return `
- <div class="pull_left userpic_wrap">
- <div class="userpic" style="width: 42px; height: 42px;">
- <img class="initials" style="width: 42px;height: 42px;line-height:42px;" src="users/${member.userId}"/>
+ <div class="mx_pull_left mx_userpic_wrap">
+ <div class="mx_userpic" style="width: 42px; height: 42px;">
+ <img
+ class="mx_initials"
+ style="width: 42px;height: 42px;line-height:42px;"
+ src="users/${member.userId}"
+ />
</div>
</div>
`;
@@ -334,8 +304,8 @@ const dateSeparator = (event: MatrixEvent, prevEvent: MatrixEvent) => {
const currDate = new Date(event.getTs());
if (!prevDate || currDate.setHours(0, 0, 0, 0) !== prevDate.setHours(0, 0, 0, 0)) {
return `
- <div class="message service">
- <div class="body details">
+ <div class="mx_message mx_service">
+ <div class="mx_body mx_details">
${new Date(event.getTs())
.toLocaleString("en-us", {year: "numeric", month: "long", day: "numeric" })}
</div>
@@ -369,12 +339,16 @@ const createMessageBody = async (event: MatrixEvent, joined = false, isReply = f
let messageBody = "";
switch (event.getContent().msgtype) {
case "m.text":
- messageBody = `<div class="text"> ${event.getContent().body} </div>`;
+ messageBody = `<div class="mx_text"> ${event.getContent().body} </div>`;
break;
case "m.image": {
messageBody = `
- <a class="photo_wrap clearfix pull_left" href="images/${event.getId()}.png">
- <img class="photo" src="images/${event.getId()}.png" style="max-width: 600px; max-height: 500px;">
+ <a class="mx_photo_wrap mx_clearfix mx_pull_left" href="images/${event.getId()}.png">
+ <img
+ class="mx_photo"
+ style="max-width: 600px; max-height: 500px;"
+ src="images/${event.getId()}.png"
+ />
</a>`;
const blob = await getImageData(event);
zip.file(`images/${event.getId()}.png`, blob);
@@ -385,18 +359,18 @@ const createMessageBody = async (event: MatrixEvent, joined = false, isReply = f
}
return `
- <div class="message default clearfix ${joined ? `joined` : ``}" id="${event.getId()}">
+ <div class="mx_message mx_default mx_clearfix ${joined ? `mx_joined` : ``}" id="${event.getId()}">
${!joined ? userPic : ``}
- <div class="body">
- <div class="pull_right date details" title="${new Date(event.getTs())}">
+ <div class="mx_body">
+ <div class="mx_pull_right mx_date mx_details" title="${new Date(event.getTs())}">
${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}
</div>
${!joined ? `
- <div class="from_name" style="color:${getUserColor(event.sender.name)}">
+ <div class="mx_from_name" style="color:${getUserColor(event.sender.name)}">
${event.sender.name}
</div>`: ``}
${isReply ?
- ` <div class="reply_to details">
+ ` <div class="mx_reply_to mx_details">
In reply to <a href="#${replyId}">this message</a>
</div>`: ``}
${messageBody}
@@ -424,8 +398,8 @@ const createHTML = async (events: MatrixEvent[], room: Room) => {
} else {
const eventText = textForEvent(event);
content += eventText ? `
- <div class="message service" id="${event.getId()}">
- <div class="body details">
+ <div class="mx_message mx_service" id="${event.getId()}">
+ <div class="mx_body mx_details">
${textForEvent(event)}
</div>
</div>
@@ -462,7 +436,6 @@ const exportAsHTML = async (res: MatrixEvent[], room: Room) => {
// This can be used to keep track of the progress
const sliceSize = 10 * 1e6;
for (let fPointer = 0; fPointer < blob.size; fPointer += sliceSize) {
- // console.log(fPointer);
const blobPiece = blob.slice(fPointer, fPointer + sliceSize);
const reader = new FileReader();
@@ -470,7 +443,6 @@ const exportAsHTML = async (res: MatrixEvent[], room: Room) => {
reader.onloadend = evt => {
const arrayBufferNew: any = evt.target.result;
const uint8ArrayNew = new Uint8Array(arrayBufferNew);
- // Buffer.from(reader.result)
writer.write(uint8ArrayNew);
resolve();
};
From e3b0d89ae9f119cf4926aa1d4eef5d0ba4973b60 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Sat, 22 May 2021 13:33:13 +0530
Subject: [PATCH 010/176] Add some colours
---
src/utils/exportUtils/HtmlExport.ts | 5 ++++-
src/utils/exportUtils/exportUtils.js | 2 +-
2 files changed, 5 insertions(+), 2 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.ts b/src/utils/exportUtils/HtmlExport.ts
index d234d22662..a6398e05fd 100644
--- a/src/utils/exportUtils/HtmlExport.ts
+++ b/src/utils/exportUtils/HtmlExport.ts
@@ -240,11 +240,14 @@ const userColors = [
"#64bf47",
"#4f9cd9",
"#9884e8",
+ "#fb6238",
+ "#00cdac",
+ "#ff5eaa",
];
//Get a color associated with string length. This is to map userId to a specific color
const getUserColor = (userId: string) => {
- return userColors[userId.length % 4];
+ return userColors[userId.length % userColors.length];
};
diff --git a/src/utils/exportUtils/exportUtils.js b/src/utils/exportUtils/exportUtils.js
index 38abe62d74..c73fd90a5a 100644
--- a/src/utils/exportUtils/exportUtils.js
+++ b/src/utils/exportUtils/exportUtils.js
@@ -24,7 +24,7 @@ const getTimelineConversation = (room) => {
cli, timelineSet,
{windowLimit: Number.MAX_VALUE});
- timelineWindow.load(null, 20);
+ timelineWindow.load(null, 30);
const events = timelineWindow.getEvents();
From 3147acec0cca9a6644874164cb8cb72e44d2c951 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 24 May 2021 18:01:09 +0530
Subject: [PATCH 011/176] Switch completely to TypeScript, updated userColors
---
package.json | 1 +
src/utils/exportUtils/HtmlExport.ts | 28 +++++++++++--------
.../{exportUtils.js => exportUtils.ts} | 22 +++++++--------
yarn.lock | 5 ++++
4 files changed, 33 insertions(+), 23 deletions(-)
rename src/utils/exportUtils/{exportUtils.js => exportUtils.ts} (76%)
diff --git a/package.json b/package.json
index 9ac4890465..61b2a27acc 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
},
"dependencies": {
"@babel/runtime": "^7.12.5",
+ "@types/streamsaver": "^2.0.0",
"await-lock": "^2.1.0",
"blueimp-canvas-to-blob": "^3.28.0",
"browser-encrypt-attachment": "^0.3.0",
diff --git a/src/utils/exportUtils/HtmlExport.ts b/src/utils/exportUtils/HtmlExport.ts
index a6398e05fd..a8df3180b8 100644
--- a/src/utils/exportUtils/HtmlExport.ts
+++ b/src/utils/exportUtils/HtmlExport.ts
@@ -1,4 +1,3 @@
-
import streamSaver from "streamsaver";
import JSZip from "jszip";
import { decryptFile } from "../DecryptFile";
@@ -237,16 +236,18 @@ div.mx_selected {
const userColors = [
- "#64bf47",
- "#4f9cd9",
- "#9884e8",
- "#fb6238",
- "#00cdac",
- "#ff5eaa",
+ "#368bd6",
+ "#ac3ba8",
+ "#03b381",
+ "#e64f7a",
+ "#ff812d",
+ "#2dc2c5",
+ "#5c56f5",
+ "#74d12c",
];
//Get a color associated with string length. This is to map userId to a specific color
-const getUserColor = (userId: string) => {
+const getUserNameColorClass = (userId: string) => {
return userColors[userId.length % userColors.length];
};
@@ -256,7 +257,10 @@ const getUserPic = async (event: MatrixEvent) => {
if (!member.getMxcAvatarUrl()) {
return `
<div class="mx_pull_left mx_userpic_wrap">
- <div class="mx_userpic" style="width: 42px;height: 42px;background-color: ${getUserColor(member.userId)}">
+ <div
+ class="mx_userpic"
+ style="width: 42px;height: 42px;background-color: ${getUserNameColorClass(member.userId)}"
+ >
<div class="mx_initials" style="line-height: 42px;" src="users/${member.userId}">
${event.sender.name[0]}
</div>
@@ -369,7 +373,7 @@ const createMessageBody = async (event: MatrixEvent, joined = false, isReply = f
${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}
</div>
${!joined ? `
- <div class="mx_from_name" style="color:${getUserColor(event.sender.name)}">
+ <div class="mx_from_name" style="color:${getUserNameColorClass(event.sender.name)}">
${event.sender.name}
</div>`: ``}
${isReply ?
@@ -414,7 +418,7 @@ const createHTML = async (events: MatrixEvent[], room: Room) => {
};
const avatars = new Map();
-let zip: any;
+let zip: JSZip;
const exportAsHTML = async (res: MatrixEvent[], room: Room) => {
zip = new JSZip();
@@ -432,7 +436,7 @@ const exportAsHTML = async (res: MatrixEvent[], room: Room) => {
const blob = await zip.generateAsync({ type: "blob" });
//Create a writable stream to the directory
- const fileStream = streamSaver.createWriteStream(filename, blob.size);
+ const fileStream = streamSaver.createWriteStream(filename, { size: blob.size });
const writer = fileStream.getWriter();
// Here we chunk the blob into pieces of 10 MB, the size might be dynamically generated.
diff --git a/src/utils/exportUtils/exportUtils.js b/src/utils/exportUtils/exportUtils.ts
similarity index 76%
rename from src/utils/exportUtils/exportUtils.js
rename to src/utils/exportUtils/exportUtils.ts
index c73fd90a5a..b5356ca1e5 100644
--- a/src/utils/exportUtils/exportUtils.js
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -1,19 +1,20 @@
import { MatrixClientPeg } from "../../MatrixClientPeg";
import { arrayFastClone } from "../arrays";
import { TimelineWindow } from "matrix-js-sdk/src/timeline-window";
+import Room from 'matrix-js-sdk/src/models/room';
import exportAsHTML from "./HtmlExport";
-export const exportFormats = Object.freeze({
- "HTML": "HTML",
- "JSON": "JSON",
- "LOGS": "LOGS",
-});
+export enum exportFormats {
+ HTML = "HTML",
+ JSON = "JSON",
+ LOGS = "LOGS",
+}
-export const exportOptions = Object.freeze({
- "TIMELINE": "TIMELINE",
-});
+export enum exportOptions {
+ TIMELINE = "TIMELINE",
+}
-const getTimelineConversation = (room) => {
+const getTimelineConversation = (room: Room) => {
if (!room) return;
const cli = MatrixClientPeg.get();
@@ -35,12 +36,11 @@ const getTimelineConversation = (room) => {
cli.decryptEventIfNeeded(event);
});
- console.log(events);
return events;
};
-const exportConversationalHistory = async (room, format, options) => {
+const exportConversationalHistory = async (room: Room, format: string, options) => {
const res = getTimelineConversation(room);
switch (format) {
case exportFormats.HTML:
diff --git a/yarn.lock b/yarn.lock
index 438cc94f27..982b9e607b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1655,6 +1655,11 @@
resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.0.tgz#7036640b4e21cc2f259ae826ce843d277dad8cff"
integrity sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw==
+"@types/streamsaver@^2.0.0":
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/@types/streamsaver/-/streamsaver-2.0.0.tgz#2a6bdec0389f41a74c60091d37e84f8840d27ac9"
+ integrity sha512-TzUEZk30QmNaS6GAhcOnH/Cl2mO7HCFhQUr6GpzvuoFziFCxmvuyLftHW79agJpZvIrqti9jSiDHMgflUwbejg==
+
"@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2":
version "2.0.3"
resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"
From 0029bf566b26948acc9a75d62943d997adcceaaa Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 24 May 2021 18:04:03 +0530
Subject: [PATCH 012/176] Small correction
---
src/utils/exportUtils/HtmlExport.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/utils/exportUtils/HtmlExport.ts b/src/utils/exportUtils/HtmlExport.ts
index a8df3180b8..72f163c5f0 100644
--- a/src/utils/exportUtils/HtmlExport.ts
+++ b/src/utils/exportUtils/HtmlExport.ts
@@ -3,7 +3,7 @@ import JSZip from "jszip";
import { decryptFile } from "../DecryptFile";
import { mediaFromContent, mediaFromMxc } from "../../customisations/Media";
import { textForEvent } from "../../TextForEvent";
-import Room from 'matrix-js-sdk/src/models/room';
+import { Room } from 'matrix-js-sdk/src/models/room';
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
const wrapHTML = (content: string, room: Room) => (`
From e6c4ab3993b9ed4e57d6469d4f787d8666543de1 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 24 May 2021 19:17:07 +0530
Subject: [PATCH 013/176] Use classes instead of loosely defined functions, use
prebuilt function for color binding
---
src/utils/exportUtils/HtmlExport.ts | 265 ++++++++++++++++-----------
src/utils/exportUtils/exportUtils.ts | 4 +-
2 files changed, 163 insertions(+), 106 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.ts b/src/utils/exportUtils/HtmlExport.ts
index 72f163c5f0..8dbf14f924 100644
--- a/src/utils/exportUtils/HtmlExport.ts
+++ b/src/utils/exportUtils/HtmlExport.ts
@@ -5,32 +5,7 @@ import { mediaFromContent, mediaFromMxc } from "../../customisations/Media";
import { textForEvent } from "../../TextForEvent";
import { Room } from 'matrix-js-sdk/src/models/room';
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-
-const wrapHTML = (content: string, room: Room) => (`
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>Exported Data</title>
- <meta content="width=device-width, initial-scale=1.0" name="viewport" />
- <link href="css/style.css" rel="stylesheet" />
- </head>
- <body>
- <div class="mx_page_wrap">
- <div class="mx_page_header">
- <div class="mx_content">
- <div class="mx_text mx_bold">${room.name}</div>
- </div>
- </div>
- <div class="mx_page_body mx_chat_page">
- <div class="mx_history">
- ${content}
- </div>
- </div>
- </div>
- </body>
- </html>
-`);
+import { getUserNameColorClass } from "../FormattingUtils";
const css = `
@@ -232,34 +207,128 @@ div.mx_selected {
.mx_default .mx_photo {
display: block;
}
+
+.mx_from_name.mx_Username_color1{
+ color: #368bd6;
+}
+
+.mx_initials_wrap.mx_Username_color1{
+ background-color: #368bd6;
+}
+
+.mx_from_name.mx_Username_color2{
+ color: #ac3ba8;
+}
+
+.mx_initials_wrap.mx_Username_color2{
+ background-color: #ac3ba8;
+}
+
+.mx_from_name.mx_Username_color3{
+ color: #03b381;
+}
+
+.mx_initials_wrap.mx_Username_color3{
+ background-color: #03b381;
+}
+
+.mx_from_name.mx_Username_color4{
+ color: #e64f7a;
+}
+
+.mx_initials_wrap.mx_Username_color4{
+ background-color: #e64f7a;
+}
+
+.mx_from_name.mx_Username_color5{
+ color: #ff812d;
+}
+
+.mx_initials_wrap.mx_Username_color5{
+ background-color: #ff812d;
+}
+
+.mx_from_name.mx_Username_color6{
+ color: #2dc2c5;
+}
+
+.mx_initials_wrap.mx_Username_color6{
+ background-color: #2dc2c5;
+}
+
+.mx_from_name.mx_Username_color7{
+ color: #5c56f5;
+}
+
+.mx_initials_wrap.mx_Username_color7{
+ background-color: #5c56f5;
+}
+
+.mx_from_name.mx_Username_color8{
+ color: #74d12c;
+}
+
+.mx_initials_wrap.mx_Username_color8{
+ background-color: #74d12c;
+}
`;
-const userColors = [
- "#368bd6",
- "#ac3ba8",
- "#03b381",
- "#e64f7a",
- "#ff812d",
- "#2dc2c5",
- "#5c56f5",
- "#74d12c",
-];
+export default class HTMLExporter {
+protected zip: JSZip;
+protected res: MatrixEvent[];
+protected room: Room;
+protected avatars: Map<string, boolean>;
-//Get a color associated with string length. This is to map userId to a specific color
-const getUserNameColorClass = (userId: string) => {
- return userColors[userId.length % userColors.length];
-};
+constructor(res: MatrixEvent[], room: Room) {
+ this.res = res;
+ this.room = room;
+ this.zip = new JSZip();
+ this.avatars = new Map<string, boolean>();
+}
+
+protected wrapHTML(content: string, room: Room) {
+ return `
+ <!DOCTYPE html>
+ <html>
+ <head>
+ <meta charset="utf-8" />
+ <title>Exported Data</title>
+ <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+ <link href="css/style.css" rel="stylesheet" />
+ </head>
+ <body>
+ <div class="mx_page_wrap">
+ <div class="mx_page_header">
+ <div class="mx_content">
+ <div class="mx_text mx_bold">${room.name}</div>
+ </div>
+ </div>
+ <div class="mx_page_body mx_chat_page">
+ <div class="mx_history">
+ ${content}
+ </div>
+ </div>
+ </div>
+ </body>
+ </html>
+`
+}
-const getUserPic = async (event: MatrixEvent) => {
+protected isEdit(event: MatrixEvent) {
+ if (event.getType() === "m.room.message" && event.getContent().hasOwnProperty("m.new_content")) return true;
+ return false;
+}
+
+protected async getUserAvatar(event: MatrixEvent) {
const member = event.sender;
if (!member.getMxcAvatarUrl()) {
return `
<div class="mx_pull_left mx_userpic_wrap">
<div
- class="mx_userpic"
- style="width: 42px;height: 42px;background-color: ${getUserNameColorClass(member.userId)}"
+ class="mx_userpic mx_initials_wrap ${getUserNameColorClass(event.getSender())}"
+ style="width: 42px;height: 42px;"
>
<div class="mx_initials" style="line-height: 42px;" src="users/${member.userId}">
${event.sender.name[0]}
@@ -270,11 +339,11 @@ const getUserPic = async (event: MatrixEvent) => {
} else {
const imageUrl = mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(42, 42, "crop");
- if (!avatars.has(member.userId)) {
- avatars.set(member.userId, true);
+ if (!this.avatars.has(member.userId)) {
+ this.avatars.set(member.userId, true);
const image = await fetch(imageUrl);
const blob = await image.blob();
- zip.file(`users/${member.userId}`, blob);
+ this.zip.file(`users/${member.userId}`, blob);
}
return `
@@ -289,40 +358,10 @@ const getUserPic = async (event: MatrixEvent) => {
</div>
`;
}
-};
-
-//Gets the event_id of an event to which an event is replied
-const getBaseEventId = (event: MatrixEvent) => {
- const isEncrypted = event.isEncrypted();
-
- // If encrypted, in_reply_to lies in event.event.content
- const content = isEncrypted ? event.event.content : event.getContent();
- const relatesTo = content["m.relates_to"];
- return (relatesTo && relatesTo["m.in_reply_to"]) ? relatesTo["m.in_reply_to"]["event_id"] : null;
-};
-
-const isEdit = (event: MatrixEvent) => {
- if (event.getType() === "m.room.message" && event.getContent().hasOwnProperty("m.new_content")) return true;
- return false;
}
-const dateSeparator = (event: MatrixEvent, prevEvent: MatrixEvent) => {
- const prevDate = prevEvent ? new Date(prevEvent.getTs()) : null;
- const currDate = new Date(event.getTs());
- if (!prevDate || currDate.setHours(0, 0, 0, 0) !== prevDate.setHours(0, 0, 0, 0)) {
- return `
- <div class="mx_message mx_service">
- <div class="mx_body mx_details">
- ${new Date(event.getTs())
- .toLocaleString("en-us", {year: "numeric", month: "long", day: "numeric" })}
- </div>
- </div>
- `;
- }
- return "";
-};
-const getImageData = async (event: MatrixEvent) => {
+protected async getImageData(event: MatrixEvent) {
let blob: Blob;
try {
const isEncrypted = event.isEncrypted();
@@ -338,11 +377,36 @@ const getImageData = async (event: MatrixEvent) => {
console.log("Error decrypting image");
}
return blob;
+}
+
+//Gets the event_id of an event to which an event is replied
+protected getBaseEventId = (event: MatrixEvent) => {
+ const isEncrypted = event.isEncrypted();
+
+ // If encrypted, in_reply_to lies in event.event.content
+ const content = isEncrypted ? event.event.content : event.getContent();
+ const relatesTo = content["m.relates_to"];
+ return (relatesTo && relatesTo["m.in_reply_to"]) ? relatesTo["m.in_reply_to"]["event_id"] : null;
};
+protected dateSeparator(event: MatrixEvent, prevEvent: MatrixEvent) {
+ const prevDate = prevEvent ? new Date(prevEvent.getTs()) : null;
+ const currDate = new Date(event.getTs());
+ if (!prevDate || currDate.setHours(0, 0, 0, 0) !== prevDate.setHours(0, 0, 0, 0)) {
+ return `
+ <div class="mx_message mx_service">
+ <div class="mx_body mx_details">
+ ${new Date(event.getTs())
+ .toLocaleString("en-us", {year: "numeric", month: "long", day: "numeric" })}
+ </div>
+ </div>
+ `;
+ }
+ return "";
+}
-const createMessageBody = async (event: MatrixEvent, joined = false, isReply = false, replyId = null) => {
- const userPic = await getUserPic(event);
+protected async createMessageBody(event: MatrixEvent, joined = false, isReply = false, replyId = null) {
+ const userPic = await this.getUserAvatar(event);
let messageBody = "";
switch (event.getContent().msgtype) {
case "m.text":
@@ -357,8 +421,8 @@ const createMessageBody = async (event: MatrixEvent, joined = false, isReply = f
src="images/${event.getId()}.png"
/>
</a>`;
- const blob = await getImageData(event);
- zip.file(`images/${event.getId()}.png`, blob);
+ const blob = await this.getImageData(event);
+ this.zip.file(`images/${event.getId()}.png`, blob);
}
break;
default:
@@ -373,7 +437,7 @@ const createMessageBody = async (event: MatrixEvent, joined = false, isReply = f
${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}
</div>
${!joined ? `
- <div class="mx_from_name" style="color:${getUserNameColorClass(event.sender.name)}">
+ <div class="mx_from_name ${getUserNameColorClass(event.getSender())}">
${event.sender.name}
</div>`: ``}
${isReply ?
@@ -384,23 +448,22 @@ const createMessageBody = async (event: MatrixEvent, joined = false, isReply = f
</div>
</div>
`;
-};
+}
-
-const createHTML = async (events: MatrixEvent[], room: Room) => {
+protected async createHTML(events: MatrixEvent[], room: Room) {
let content = "";
let prevEvent = null;
for (const event of events) {
// As the getContent of the edited event fetches the latest edit, there is no need to process edit events
- if (isEdit(event)) continue;
- content += dateSeparator(event, prevEvent);
+ if (this.isEdit(event)) continue;
+ content += this.dateSeparator(event, prevEvent);
if (event.getType() === "m.room.message") {
- const replyTo = getBaseEventId(event);
+ const replyTo = this.getBaseEventId(event);
const shouldBeJoined = prevEvent && prevEvent.getContent().msgtype === "m.text"
- && event.sender.userId === prevEvent.sender.userId && !dateSeparator(event, prevEvent) && !replyTo;
+ && event.sender.userId === prevEvent.sender.userId && !this.dateSeparator(event, prevEvent) && !replyTo;
- const body = await createMessageBody(event, shouldBeJoined, !!replyTo, replyTo);
+ const body = await this.createMessageBody(event, shouldBeJoined, !!replyTo, replyTo);
content += body;
} else {
const eventText = textForEvent(event);
@@ -414,26 +477,20 @@ const createHTML = async (events: MatrixEvent[], room: Room) => {
}
prevEvent = event;
}
- return wrapHTML(content, room);
-};
+ return this.wrapHTML(content, room);
+}
-const avatars = new Map();
-let zip: JSZip;
-const exportAsHTML = async (res: MatrixEvent[], room: Room) => {
- zip = new JSZip();
+public async export() {
+ const html = await this.createHTML(this.res, this.room);
- const html = await createHTML(res, room);
-
- zip.file("index.html", html);
- zip.file("css/style.css", css);
-
- avatars.clear();
+ this.zip.file("index.html", html);
+ this.zip.file("css/style.css", css);
const filename = `matrix-export-${new Date().toISOString()}.zip`;
//Generate the zip file asynchronously
- const blob = await zip.generateAsync({ type: "blob" });
+ const blob = await this.zip.generateAsync({ type: "blob" });
//Create a writable stream to the directory
const fileStream = streamSaver.createWriteStream(filename, { size: blob.size });
@@ -459,5 +516,5 @@ const exportAsHTML = async (res: MatrixEvent[], room: Room) => {
}
writer.close();
}
+}
-export default exportAsHTML;
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index b5356ca1e5..7ace83f06c 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -2,7 +2,7 @@ import { MatrixClientPeg } from "../../MatrixClientPeg";
import { arrayFastClone } from "../arrays";
import { TimelineWindow } from "matrix-js-sdk/src/timeline-window";
import Room from 'matrix-js-sdk/src/models/room';
-import exportAsHTML from "./HtmlExport";
+import HTMLExporter from "./HtmlExport";
export enum exportFormats {
HTML = "HTML",
@@ -44,7 +44,7 @@ const exportConversationalHistory = async (room: Room, format: string, options)
const res = getTimelineConversation(room);
switch (format) {
case exportFormats.HTML:
- await exportAsHTML(res, room);
+ new HTMLExporter(res, room).export();
break;
case exportFormats.JSON:
break;
From 1ee6e42e27d94e45fa033e74ad055ee7a9e19128 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 24 May 2021 19:19:10 +0530
Subject: [PATCH 014/176] Add await
---
src/utils/exportUtils/exportUtils.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 7ace83f06c..5e1c4fffbb 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -44,7 +44,7 @@ const exportConversationalHistory = async (room: Room, format: string, options)
const res = getTimelineConversation(room);
switch (format) {
case exportFormats.HTML:
- new HTMLExporter(res, room).export();
+ await new HTMLExporter(res, room).export();
break;
case exportFormats.JSON:
break;
From 136b6db047ec87797b9a12ec03fe750338422ab6 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 24 May 2021 20:48:13 +0530
Subject: [PATCH 015/176] Add an abstract exporter base class
---
src/utils/exportUtils/Exporter.ts | 7 +++++++
src/utils/exportUtils/HtmlExport.ts | 10 +++-------
2 files changed, 10 insertions(+), 7 deletions(-)
create mode 100644 src/utils/exportUtils/Exporter.ts
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
new file mode 100644
index 0000000000..a4e14153c1
--- /dev/null
+++ b/src/utils/exportUtils/Exporter.ts
@@ -0,0 +1,7 @@
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import Room from 'matrix-js-sdk/src/models/room';
+
+export abstract class Exporter {
+ constructor(protected res: MatrixEvent[], protected room: Room) {}
+ abstract export(): Promise<void>
+}
diff --git a/src/utils/exportUtils/HtmlExport.ts b/src/utils/exportUtils/HtmlExport.ts
index 8dbf14f924..737a7736b4 100644
--- a/src/utils/exportUtils/HtmlExport.ts
+++ b/src/utils/exportUtils/HtmlExport.ts
@@ -6,7 +6,7 @@ import { textForEvent } from "../../TextForEvent";
import { Room } from 'matrix-js-sdk/src/models/room';
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { getUserNameColorClass } from "../FormattingUtils";
-
+import { Exporter } from "./Exporter";
const css = `
body {
@@ -273,16 +273,12 @@ div.mx_selected {
}
`;
-
-export default class HTMLExporter {
+export default class HTMLExporter extends Exporter {
protected zip: JSZip;
-protected res: MatrixEvent[];
-protected room: Room;
protected avatars: Map<string, boolean>;
constructor(res: MatrixEvent[], room: Room) {
- this.res = res;
- this.room = room;
+ super(res, room);
this.zip = new JSZip();
this.avatars = new Map<string, boolean>();
}
From 43a111d4c989ecb93fb8f29b158dd8b8f286932e Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 24 May 2021 21:20:16 +0530
Subject: [PATCH 016/176] Return blob from export
---
src/utils/exportUtils/Exporter.ts | 4 ++--
src/utils/exportUtils/HtmlExport.ts | 2 ++
2 files changed, 4 insertions(+), 2 deletions(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index a4e14153c1..c782cc5a63 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -1,7 +1,7 @@
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import Room from 'matrix-js-sdk/src/models/room';
+import { Room } from "matrix-js-sdk/src/models/room";
export abstract class Exporter {
constructor(protected res: MatrixEvent[], protected room: Room) {}
- abstract export(): Promise<void>
+ abstract export(): Promise<Blob>;
}
diff --git a/src/utils/exportUtils/HtmlExport.ts b/src/utils/exportUtils/HtmlExport.ts
index 737a7736b4..90b65a8e2b 100644
--- a/src/utils/exportUtils/HtmlExport.ts
+++ b/src/utils/exportUtils/HtmlExport.ts
@@ -511,6 +511,8 @@ public async export() {
await waiter;
}
writer.close();
+
+ return blob;
}
}
From 7cd3f51c56105d5dcf5af27353fb6ee99d424a9c Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 25 May 2021 16:33:01 +0530
Subject: [PATCH 017/176] indent and use double quotes
---
src/utils/exportUtils/HtmlExport.ts | 447 ++++++++++++++--------------
1 file changed, 222 insertions(+), 225 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.ts b/src/utils/exportUtils/HtmlExport.ts
index 90b65a8e2b..894e8571ef 100644
--- a/src/utils/exportUtils/HtmlExport.ts
+++ b/src/utils/exportUtils/HtmlExport.ts
@@ -3,7 +3,7 @@ import JSZip from "jszip";
import { decryptFile } from "../DecryptFile";
import { mediaFromContent, mediaFromMxc } from "../../customisations/Media";
import { textForEvent } from "../../TextForEvent";
-import { Room } from 'matrix-js-sdk/src/models/room';
+import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { getUserNameColorClass } from "../FormattingUtils";
import { Exporter } from "./Exporter";
@@ -274,245 +274,242 @@ div.mx_selected {
`;
export default class HTMLExporter extends Exporter {
-protected zip: JSZip;
-protected avatars: Map<string, boolean>;
+ protected zip: JSZip;
+ protected avatars: Map<string, boolean>;
-constructor(res: MatrixEvent[], room: Room) {
- super(res, room);
- this.zip = new JSZip();
- this.avatars = new Map<string, boolean>();
-}
+ constructor(res: MatrixEvent[], room: Room) {
+ super(res, room);
+ this.zip = new JSZip();
+ this.avatars = new Map<string, boolean>();
+ }
-protected wrapHTML(content: string, room: Room) {
- return `
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>Exported Data</title>
- <meta content="width=device-width, initial-scale=1.0" name="viewport" />
- <link href="css/style.css" rel="stylesheet" />
- </head>
- <body>
- <div class="mx_page_wrap">
- <div class="mx_page_header">
- <div class="mx_content">
- <div class="mx_text mx_bold">${room.name}</div>
+ protected wrapHTML(content: string, room: Room) {
+ return `
+ <!DOCTYPE html>
+ <html>
+ <head>
+ <meta charset="utf-8" />
+ <title>Exported Data</title>
+ <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+ <link href="css/style.css" rel="stylesheet" />
+ </head>
+ <body>
+ <div class="mx_page_wrap">
+ <div class="mx_page_header">
+ <div class="mx_content">
+ <div class="mx_text mx_bold">${room.name}</div>
+ </div>
+ </div>
+ <div class="mx_page_body mx_chat_page">
+ <div class="mx_history">
+ ${content}
+ </div>
</div>
</div>
- <div class="mx_page_body mx_chat_page">
- <div class="mx_history">
- ${content}
- </div>
+ </body>
+ </html>
+ `
+ }
+
+ protected isEdit(event: MatrixEvent) {
+ if (event.getType() === "m.room.message" && event.getContent().hasOwnProperty("m.new_content")) return true;
+ return false;
+ }
+
+ protected async getUserAvatar(event: MatrixEvent) {
+ const member = event.sender;
+ if (!member.getMxcAvatarUrl()) {
+ return `
+ <div class="mx_pull_left mx_userpic_wrap">
+ <div
+ class="mx_userpic mx_initials_wrap ${getUserNameColorClass(event.getSender())}"
+ style="width: 42px;height: 42px;"
+ >
+ <div class="mx_initials" style="line-height: 42px;" src="users/${member.userId}">
+ ${event.sender.name[0]}
</div>
</div>
- </body>
- </html>
-`
-}
-
-
-protected isEdit(event: MatrixEvent) {
- if (event.getType() === "m.room.message" && event.getContent().hasOwnProperty("m.new_content")) return true;
- return false;
-}
-
-protected async getUserAvatar(event: MatrixEvent) {
- const member = event.sender;
- if (!member.getMxcAvatarUrl()) {
- return `
- <div class="mx_pull_left mx_userpic_wrap">
- <div
- class="mx_userpic mx_initials_wrap ${getUserNameColorClass(event.getSender())}"
- style="width: 42px;height: 42px;"
- >
- <div class="mx_initials" style="line-height: 42px;" src="users/${member.userId}">
- ${event.sender.name[0]}
- </div>
- </div>
- </div>
- `;
- } else {
- const imageUrl = mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(42, 42, "crop");
-
- if (!this.avatars.has(member.userId)) {
- this.avatars.set(member.userId, true);
- const image = await fetch(imageUrl);
- const blob = await image.blob();
- this.zip.file(`users/${member.userId}`, blob);
- }
-
- return `
- <div class="mx_pull_left mx_userpic_wrap">
- <div class="mx_userpic" style="width: 42px; height: 42px;">
- <img
- class="mx_initials"
- style="width: 42px;height: 42px;line-height:42px;"
- src="users/${member.userId}"
- />
- </div>
- </div>
- `;
- }
-}
-
-
-protected async getImageData(event: MatrixEvent) {
- let blob: Blob;
- try {
- const isEncrypted = event.isEncrypted();
- const content = event.getContent();
- if (isEncrypted) {
- blob = await decryptFile(content.file);
- } else {
- const media = mediaFromContent(event.getContent());
- const image = await fetch(media.srcHttp);
- blob = await image.blob();
- }
- } catch (err) {
- console.log("Error decrypting image");
- }
- return blob;
-}
-
-//Gets the event_id of an event to which an event is replied
-protected getBaseEventId = (event: MatrixEvent) => {
- const isEncrypted = event.isEncrypted();
-
- // If encrypted, in_reply_to lies in event.event.content
- const content = isEncrypted ? event.event.content : event.getContent();
- const relatesTo = content["m.relates_to"];
- return (relatesTo && relatesTo["m.in_reply_to"]) ? relatesTo["m.in_reply_to"]["event_id"] : null;
-};
-
-protected dateSeparator(event: MatrixEvent, prevEvent: MatrixEvent) {
- const prevDate = prevEvent ? new Date(prevEvent.getTs()) : null;
- const currDate = new Date(event.getTs());
- if (!prevDate || currDate.setHours(0, 0, 0, 0) !== prevDate.setHours(0, 0, 0, 0)) {
- return `
- <div class="mx_message mx_service">
- <div class="mx_body mx_details">
- ${new Date(event.getTs())
- .toLocaleString("en-us", {year: "numeric", month: "long", day: "numeric" })}
- </div>
</div>
`;
- }
- return "";
-}
-
-protected async createMessageBody(event: MatrixEvent, joined = false, isReply = false, replyId = null) {
- const userPic = await this.getUserAvatar(event);
- let messageBody = "";
- switch (event.getContent().msgtype) {
- case "m.text":
- messageBody = `<div class="mx_text"> ${event.getContent().body} </div>`;
- break;
- case "m.image": {
- messageBody = `
- <a class="mx_photo_wrap mx_clearfix mx_pull_left" href="images/${event.getId()}.png">
- <img
- class="mx_photo"
- style="max-width: 600px; max-height: 500px;"
- src="images/${event.getId()}.png"
- />
- </a>`;
- const blob = await this.getImageData(event);
- this.zip.file(`images/${event.getId()}.png`, blob);
- }
- break;
- default:
- break;
- }
-
- return `
- <div class="mx_message mx_default mx_clearfix ${joined ? `mx_joined` : ``}" id="${event.getId()}">
- ${!joined ? userPic : ``}
- <div class="mx_body">
- <div class="mx_pull_right mx_date mx_details" title="${new Date(event.getTs())}">
- ${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}
- </div>
- ${!joined ? `
- <div class="mx_from_name ${getUserNameColorClass(event.getSender())}">
- ${event.sender.name}
- </div>`: ``}
- ${isReply ?
- ` <div class="mx_reply_to mx_details">
- In reply to <a href="#${replyId}">this message</a>
- </div>`: ``}
- ${messageBody}
- </div>
- </div>
- `;
-}
-
-protected async createHTML(events: MatrixEvent[], room: Room) {
- let content = "";
- let prevEvent = null;
- for (const event of events) {
- // As the getContent of the edited event fetches the latest edit, there is no need to process edit events
- if (this.isEdit(event)) continue;
- content += this.dateSeparator(event, prevEvent);
-
- if (event.getType() === "m.room.message") {
- const replyTo = this.getBaseEventId(event);
- const shouldBeJoined = prevEvent && prevEvent.getContent().msgtype === "m.text"
- && event.sender.userId === prevEvent.sender.userId && !this.dateSeparator(event, prevEvent) && !replyTo;
-
- const body = await this.createMessageBody(event, shouldBeJoined, !!replyTo, replyTo);
- content += body;
} else {
- const eventText = textForEvent(event);
- content += eventText ? `
- <div class="mx_message mx_service" id="${event.getId()}">
- <div class="mx_body mx_details">
- ${textForEvent(event)}
+ const imageUrl = mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(42, 42, "crop");
+
+ if (!this.avatars.has(member.userId)) {
+ this.avatars.set(member.userId, true);
+ const image = await fetch(imageUrl);
+ const blob = await image.blob();
+ this.zip.file(`users/${member.userId}`, blob);
+ }
+
+ return `
+ <div class="mx_pull_left mx_userpic_wrap">
+ <div class="mx_userpic" style="width: 42px; height: 42px;">
+ <img
+ class="mx_initials"
+ style="width: 42px;height: 42px;line-height:42px;"
+ src="users/${member.userId}"
+ />
</div>
</div>
- ` : "";
+ `;
}
- prevEvent = event;
}
- return this.wrapHTML(content, room);
-}
-
-public async export() {
- const html = await this.createHTML(this.res, this.room);
-
- this.zip.file("index.html", html);
- this.zip.file("css/style.css", css);
-
- const filename = `matrix-export-${new Date().toISOString()}.zip`;
-
- //Generate the zip file asynchronously
- const blob = await this.zip.generateAsync({ type: "blob" });
-
- //Create a writable stream to the directory
- const fileStream = streamSaver.createWriteStream(filename, { size: blob.size });
- const writer = fileStream.getWriter();
-
- // Here we chunk the blob into pieces of 10 MB, the size might be dynamically generated.
- // This can be used to keep track of the progress
- const sliceSize = 10 * 1e6;
- for (let fPointer = 0; fPointer < blob.size; fPointer += sliceSize) {
- const blobPiece = blob.slice(fPointer, fPointer + sliceSize);
- const reader = new FileReader();
-
- const waiter = new Promise<void>((resolve, reject) => {
- reader.onloadend = evt => {
- const arrayBufferNew: any = evt.target.result;
- const uint8ArrayNew = new Uint8Array(arrayBufferNew);
- writer.write(uint8ArrayNew);
- resolve();
- };
- reader.readAsArrayBuffer(blobPiece);
- });
- await waiter;
+ protected async getImageData(event: MatrixEvent) {
+ let blob: Blob;
+ try {
+ const isEncrypted = event.isEncrypted();
+ const content = event.getContent();
+ if (isEncrypted) {
+ blob = await decryptFile(content.file);
+ } else {
+ const media = mediaFromContent(event.getContent());
+ const image = await fetch(media.srcHttp);
+ blob = await image.blob();
+ }
+ } catch (err) {
+ console.log("Error decrypting image");
+ }
+ return blob;
}
- writer.close();
- return blob;
-}
+ //Gets the event_id of an event to which an event is replied
+ protected getBaseEventId = (event: MatrixEvent) => {
+ const isEncrypted = event.isEncrypted();
+
+ // If encrypted, in_reply_to lies in event.event.content
+ const content = isEncrypted ? event.event.content : event.getContent();
+ const relatesTo = content["m.relates_to"];
+ return (relatesTo && relatesTo["m.in_reply_to"]) ? relatesTo["m.in_reply_to"]["event_id"] : null;
+ };
+
+ protected dateSeparator(event: MatrixEvent, prevEvent: MatrixEvent) {
+ const prevDate = prevEvent ? new Date(prevEvent.getTs()) : null;
+ const currDate = new Date(event.getTs());
+ if (!prevDate || currDate.setHours(0, 0, 0, 0) !== prevDate.setHours(0, 0, 0, 0)) {
+ return `
+ <div class="mx_message mx_service">
+ <div class="mx_body mx_details">
+ ${new Date(event.getTs())
+ .toLocaleString("en-us", {year: "numeric", month: "long", day: "numeric" })}
+ </div>
+ </div>
+ `;
+ }
+ return "";
+ }
+
+ protected async createMessageBody(event: MatrixEvent, joined = false, isReply = false, replyId = null) {
+ const userPic = await this.getUserAvatar(event);
+ let messageBody = "";
+ switch (event.getContent().msgtype) {
+ case "m.text":
+ messageBody = `<div class="mx_text"> ${event.getContent().body} </div>`;
+ break;
+ case "m.image": {
+ messageBody = `
+ <a class="mx_photo_wrap mx_clearfix mx_pull_left" href="images/${event.getId()}.png">
+ <img
+ class="mx_photo"
+ style="max-width: 600px; max-height: 500px;"
+ src="images/${event.getId()}.png"
+ />
+ </a>`;
+ const blob = await this.getImageData(event);
+ this.zip.file(`images/${event.getId()}.png`, blob);
+ }
+ break;
+ default:
+ break;
+ }
+
+ return `
+ <div class="mx_message mx_default mx_clearfix ${joined ? `mx_joined` : ``}" id="${event.getId()}">
+ ${!joined ? userPic : ``}
+ <div class="mx_body">
+ <div class="mx_pull_right mx_date mx_details" title="${new Date(event.getTs())}">
+ ${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}
+ </div>
+ ${!joined ? `
+ <div class="mx_from_name ${getUserNameColorClass(event.getSender())}">
+ ${event.sender.name}
+ </div>`: ``}
+ ${isReply ?
+ ` <div class="mx_reply_to mx_details">
+ In reply to <a href="#${replyId}">this message</a>
+ </div>`: ``}
+ ${messageBody}
+ </div>
+ </div>
+ `;
+ }
+
+ protected async createHTML(events: MatrixEvent[], room: Room) {
+ let content = "";
+ let prevEvent = null;
+ for (const event of events) {
+ // As the getContent of the edited event fetches the latest edit, there is no need to process edit events
+ if (this.isEdit(event)) continue;
+ content += this.dateSeparator(event, prevEvent);
+
+ if (event.getType() === "m.room.message") {
+ const replyTo = this.getBaseEventId(event);
+ const shouldBeJoined = prevEvent && prevEvent.getContent().msgtype === "m.text"
+ && event.sender.userId === prevEvent.sender.userId && !this.dateSeparator(event, prevEvent) && !replyTo;
+
+ const body = await this.createMessageBody(event, shouldBeJoined, !!replyTo, replyTo);
+ content += body;
+ } else {
+ const eventText = textForEvent(event);
+ content += eventText ? `
+ <div class="mx_message mx_service" id="${event.getId()}">
+ <div class="mx_body mx_details">
+ ${textForEvent(event)}
+ </div>
+ </div>
+ ` : "";
+ }
+ prevEvent = event;
+ }
+ return this.wrapHTML(content, room);
+ }
+
+ public async export() {
+ const html = await this.createHTML(this.res, this.room);
+
+ this.zip.file("index.html", html);
+ this.zip.file("css/style.css", css);
+
+ const filename = `matrix-export-${new Date().toISOString()}.zip`;
+
+ //Generate the zip file asynchronously
+ const blob = await this.zip.generateAsync({ type: "blob" });
+
+ //Create a writable stream to the directory
+ const fileStream = streamSaver.createWriteStream(filename, { size: blob.size });
+ const writer = fileStream.getWriter();
+
+ // Here we chunk the blob into pieces of 10 MB, the size might be dynamically generated.
+ // This can be used to keep track of the progress
+ const sliceSize = 10 * 1e6;
+ for (let fPointer = 0; fPointer < blob.size; fPointer += sliceSize) {
+ const blobPiece = blob.slice(fPointer, fPointer + sliceSize);
+ const reader = new FileReader();
+
+ const waiter = new Promise<void>((resolve, reject) => {
+ reader.onloadend = evt => {
+ const arrayBufferNew: any = evt.target.result;
+ const uint8ArrayNew = new Uint8Array(arrayBufferNew);
+ writer.write(uint8ArrayNew);
+ resolve();
+ };
+ reader.readAsArrayBuffer(blobPiece);
+ });
+ await waiter;
+ }
+ writer.close();
+
+ return blob;
+ }
}
From 0ee290648a746aeda4e2590bb2a9928a637e20c9 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 25 May 2021 17:48:08 +0530
Subject: [PATCH 018/176] Add support for firefox
---
package.json | 1 +
src/utils/exportUtils/HtmlExport.ts | 3 +++
yarn.lock | 5 +++++
3 files changed, 9 insertions(+)
diff --git a/package.json b/package.json
index 61b2a27acc..ad7de2941c 100644
--- a/package.json
+++ b/package.json
@@ -104,6 +104,7 @@
"tar-js": "^0.3.0",
"text-encoding-utf-8": "^1.0.2",
"url": "^0.11.0",
+ "web-streams-polyfill": "^3.0.3",
"what-input": "^5.2.10",
"zxcvbn": "^4.4.2"
},
diff --git a/src/utils/exportUtils/HtmlExport.ts b/src/utils/exportUtils/HtmlExport.ts
index 894e8571ef..755792079a 100644
--- a/src/utils/exportUtils/HtmlExport.ts
+++ b/src/utils/exportUtils/HtmlExport.ts
@@ -7,6 +7,7 @@ import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { getUserNameColorClass } from "../FormattingUtils";
import { Exporter } from "./Exporter";
+import * as ponyfill from 'web-streams-polyfill/ponyfill'
const css = `
body {
@@ -485,6 +486,8 @@ export default class HTMLExporter extends Exporter {
//Generate the zip file asynchronously
const blob = await this.zip.generateAsync({ type: "blob" });
+ //Support for firefox browser
+ streamSaver.WritableStream = ponyfill.WritableStream
//Create a writable stream to the directory
const fileStream = streamSaver.createWriteStream(filename, { size: blob.size });
const writer = fileStream.getWriter();
diff --git a/yarn.lock b/yarn.lock
index 982b9e607b..d2c1a8f71d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8337,6 +8337,11 @@ walker@^1.0.7, walker@~1.0.5:
dependencies:
makeerror "1.0.x"
+web-streams-polyfill@^3.0.3:
+ version "3.0.3"
+ resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-3.0.3.tgz#f49e487eedeca47a207c1aee41ee5578f884b42f"
+ integrity sha512-d2H/t0eqRNM4w2WvmTdoeIvzAUSpK7JmATB8Nr2lb7nQ9BTIJVjbQ/TRFVEh2gUH1HwclPdoPtfMoFfetXaZnA==
+
webcrypto-core@^1.1.8:
version "1.1.8"
resolved "https://registry.yarnpkg.com/webcrypto-core/-/webcrypto-core-1.1.8.tgz#91720c07f4f2edd181111b436647ea5a282af0a9"
From 0b728ff3900f0506a43452bc647d330920ff63b5 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 25 May 2021 17:52:23 +0530
Subject: [PATCH 019/176] Use double quotes for import
---
src/utils/exportUtils/HtmlExport.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/utils/exportUtils/HtmlExport.ts b/src/utils/exportUtils/HtmlExport.ts
index 755792079a..c21f227c35 100644
--- a/src/utils/exportUtils/HtmlExport.ts
+++ b/src/utils/exportUtils/HtmlExport.ts
@@ -7,7 +7,7 @@ import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { getUserNameColorClass } from "../FormattingUtils";
import { Exporter } from "./Exporter";
-import * as ponyfill from 'web-streams-polyfill/ponyfill'
+import * as ponyfill from "web-streams-polyfill/ponyfill"
const css = `
body {
From 7286aa28e189ba4de903b404a017ab0c5ee3d2cb Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 26 May 2021 10:28:20 +0530
Subject: [PATCH 020/176] Handle audio and video files
---
src/HtmlUtils.tsx | 2 +-
src/utils/exportUtils/HtmlExport.ts | 49 ++++++++++++++++++++++++----
src/utils/exportUtils/StreamToZip.ts | 17 ++++++++++
3 files changed, 60 insertions(+), 8 deletions(-)
create mode 100644 src/utils/exportUtils/StreamToZip.ts
diff --git a/src/HtmlUtils.tsx b/src/HtmlUtils.tsx
index ef5ac383e3..1d5defe45d 100644
--- a/src/HtmlUtils.tsx
+++ b/src/HtmlUtils.tsx
@@ -233,7 +233,7 @@ const transformTags: IExtendedSanitizeOptions["transformTags"] = { // custom to
},
};
-const sanitizeHtmlParams: IExtendedSanitizeOptions = {
+export const sanitizeHtmlParams: IExtendedSanitizeOptions = {
allowedTags: [
'font', // custom to matrix for IRC-style font coloring
'del', // for markdown
diff --git a/src/utils/exportUtils/HtmlExport.ts b/src/utils/exportUtils/HtmlExport.ts
index c21f227c35..8e6070cff6 100644
--- a/src/utils/exportUtils/HtmlExport.ts
+++ b/src/utils/exportUtils/HtmlExport.ts
@@ -8,6 +8,8 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { getUserNameColorClass } from "../FormattingUtils";
import { Exporter } from "./Exporter";
import * as ponyfill from "web-streams-polyfill/ponyfill"
+import { sanitizeHtmlParams } from "../../HtmlUtils";
+import sanitizeHtml from "sanitize-html";
const css = `
body {
@@ -356,7 +358,7 @@ export default class HTMLExporter extends Exporter {
}
}
- protected async getImageData(event: MatrixEvent) {
+ protected async getMediaBlob(event: MatrixEvent) {
let blob: Blob;
try {
const isEncrypted = event.isEncrypted();
@@ -369,7 +371,7 @@ export default class HTMLExporter extends Exporter {
blob = await image.blob();
}
} catch (err) {
- console.log("Error decrypting image");
+ console.log("Error decrypting media");
}
return blob;
}
@@ -405,21 +407,54 @@ export default class HTMLExporter extends Exporter {
let messageBody = "";
switch (event.getContent().msgtype) {
case "m.text":
- messageBody = `<div class="mx_text"> ${event.getContent().body} </div>`;
+ messageBody = `
+ <div class="mx_text">
+ ${sanitizeHtml(event.getContent().body, sanitizeHtmlParams)}
+ </div>`;
break;
case "m.image": {
+ const blob = await this.getMediaBlob(event);
+ const fileName = `${event.getId()}.${blob.type.replace("image/", "")}`;
messageBody = `
<a class="mx_photo_wrap mx_clearfix mx_pull_left" href="images/${event.getId()}.png">
<img
class="mx_photo"
style="max-width: 600px; max-height: 500px;"
- src="images/${event.getId()}.png"
+ src="images/${fileName}"
/>
</a>`;
- const blob = await this.getImageData(event);
- this.zip.file(`images/${event.getId()}.png`, blob);
- }
+ this.zip.file(`images/${fileName}`, blob);
break;
+ }
+ case "m.video": {
+ const blob = await this.getMediaBlob(event);
+ const fileName = `${event.getId()}.${blob.type.replace("video/", "")}`;
+ messageBody = `
+ <div class="mx_media_wrap mx_clearfix">
+ <video
+ class="mx_video_file"
+ src="videos/${fileName}"
+ style="max-height: 400px; max-width: 600px;"
+ controls
+ />
+ </div>`;
+ this.zip.file(`videos/${fileName}`, blob);
+ break;
+ }
+ case "m.audio": {
+ const blob = await this.getMediaBlob(event);
+ const fileName = `${event.getId()}.${blob.type.replace("audio/", "")}`;
+ messageBody = `
+ <div class="mx_media_wrap mx_clearfix">
+ <audio
+ class="mx_audio_file"
+ src="audio/${fileName}"
+ controls
+ />
+ </div>`;
+ this.zip.file(`audio/${fileName}`, blob);
+ break;
+ }
default:
break;
}
diff --git a/src/utils/exportUtils/StreamToZip.ts b/src/utils/exportUtils/StreamToZip.ts
new file mode 100644
index 0000000000..769fa91dba
--- /dev/null
+++ b/src/utils/exportUtils/StreamToZip.ts
@@ -0,0 +1,17 @@
+/*Not to be reviewed now*/
+class fileCheckSum {
+ protected CRC32: number;
+ public table: any[];
+ constructor() {
+ this.CRC32 = -1
+ }
+
+ protected append(data: any[]) {
+ let crc = this.CRC32 | 0;
+ const table = this.table;
+ for (let offset = 0, len = data.length | 0; offset < len; offset++) {
+ crc = (crc >>> 8) ^ table[(crc ^ data[offset]) & 0xFF]
+ }
+ this.CRC32 = crc
+ }
+}
From 334b7ef04a193cb664928e78321fcd12d29e4925 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 26 May 2021 18:00:27 +0530
Subject: [PATCH 021/176] Implement animated scroll to base event for replies
---
src/utils/exportUtils/HtmlExport.ts | 29 ++++++++++++++++++++++-----
src/utils/exportUtils/StreamToZip.ts | 30 ++++++++++++++--------------
2 files changed, 39 insertions(+), 20 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.ts b/src/utils/exportUtils/HtmlExport.ts
index 8e6070cff6..1e3984e34e 100644
--- a/src/utils/exportUtils/HtmlExport.ts
+++ b/src/utils/exportUtils/HtmlExport.ts
@@ -39,7 +39,7 @@ body {
}
.mx_page_wrap a {
- color: #168acd;
+ color: #238CF5;
text-decoration: none;
}
@@ -126,11 +126,11 @@ a.mx_block_link:hover {
.mx_message {
margin: 0 -10px;
- transition: background-color 2.0s ease;
+ transition: background-color 1.3s ease;
}
div.mx_selected {
- background-color: rgba(242,246,250,255);
+ background-color: #eeeeee;
transition: background-color 0.5s ease;
}
@@ -276,6 +276,20 @@ div.mx_selected {
}
`;
+const js = `
+function scrollToElement(replyId){
+ let el = document.getElementById(replyId);
+ el.scrollIntoViewIfNeeded({
+ behaviour: "smooth",
+ block: "start",
+ });
+ el.classList.add("mx_selected");
+ setTimeout(() => {
+ el.classList.remove("mx_selected");
+ }, 1000);
+}
+`
+
export default class HTMLExporter extends Exporter {
protected zip: JSZip;
protected avatars: Map<string, boolean>;
@@ -295,6 +309,7 @@ export default class HTMLExporter extends Exporter {
<title>Exported Data</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<link href="css/style.css" rel="stylesheet" />
+ <script src="js/script.js"></script>
</head>
<body>
<div class="mx_page_wrap">
@@ -459,6 +474,10 @@ export default class HTMLExporter extends Exporter {
break;
}
+ if (isReply) {
+ messageBody = event.getContent().formatted_body.replace(/<mx-reply>.*<\/mx-reply>/, '')
+ }
+
return `
<div class="mx_message mx_default mx_clearfix ${joined ? `mx_joined` : ``}" id="${event.getId()}">
${!joined ? userPic : ``}
@@ -472,7 +491,7 @@ export default class HTMLExporter extends Exporter {
</div>`: ``}
${isReply ?
` <div class="mx_reply_to mx_details">
- In reply to <a href="#${replyId}">this message</a>
+ In reply to <a href="#${replyId}" onclick="scrollToElement('${replyId}')">this message</a>
</div>`: ``}
${messageBody}
</div>
@@ -515,7 +534,7 @@ export default class HTMLExporter extends Exporter {
this.zip.file("index.html", html);
this.zip.file("css/style.css", css);
-
+ this.zip.file("js/script.js", js);
const filename = `matrix-export-${new Date().toISOString()}.zip`;
//Generate the zip file asynchronously
diff --git a/src/utils/exportUtils/StreamToZip.ts b/src/utils/exportUtils/StreamToZip.ts
index 769fa91dba..01a2880386 100644
--- a/src/utils/exportUtils/StreamToZip.ts
+++ b/src/utils/exportUtils/StreamToZip.ts
@@ -1,17 +1,17 @@
/*Not to be reviewed now*/
-class fileCheckSum {
- protected CRC32: number;
- public table: any[];
- constructor() {
- this.CRC32 = -1
- }
+// class fileCheckSum {
+// protected CRC32: number;
+// public table: any[];
+// constructor() {
+// this.CRC32 = -1
+// }
- protected append(data: any[]) {
- let crc = this.CRC32 | 0;
- const table = this.table;
- for (let offset = 0, len = data.length | 0; offset < len; offset++) {
- crc = (crc >>> 8) ^ table[(crc ^ data[offset]) & 0xFF]
- }
- this.CRC32 = crc
- }
-}
+// protected append(data: any[]) {
+// let crc = this.CRC32 | 0;
+// const table = this.table;
+// for (let offset = 0, len = data.length | 0; offset < len; offset++) {
+// crc = (crc >>> 8) ^ table[(crc ^ data[offset]) & 0xFF]
+// }
+// this.CRC32 = crc
+// }
+// }
From 60ef6f933298dd5da932d30097762d464d4263a6 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Thu, 27 May 2021 14:06:04 +0530
Subject: [PATCH 022/176] Add emote support and show a toast if the message
isn't exported
---
src/utils/exportUtils/HtmlExport.ts | 77 +++++++++++++++++++++++++++--
1 file changed, 72 insertions(+), 5 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.ts b/src/utils/exportUtils/HtmlExport.ts
index 1e3984e34e..aaa6d5fadb 100644
--- a/src/utils/exportUtils/HtmlExport.ts
+++ b/src/utils/exportUtils/HtmlExport.ts
@@ -41,6 +41,7 @@ body {
.mx_page_wrap a {
color: #238CF5;
text-decoration: none;
+ cursor: pointer;
}
.mx_page_wrap a:hover {
@@ -274,20 +275,78 @@ div.mx_selected {
.mx_initials_wrap.mx_Username_color8{
background-color: #74d12c;
}
+
+#snackbar {
+ display: flex;
+ visibility: hidden;
+ min-width: 250px;
+ margin-left: -125px;
+ background-color: #333;
+ color: #fff;
+ text-align: center;
+ position: fixed;
+ z-index: 1;
+ left: 50%;
+ bottom: 30px;
+ font-size: 17px;
+ padding: 6px 16px;
+ font-size: 0.875rem;
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-weight: 400;
+ line-height: 1.43;
+ border-radius: 4px;
+ letter-spacing: 0.01071em;
+}
+
+#snackbar.show {
+ visibility: visible;
+ -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+ animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}
+
+@-webkit-keyframes fadein {
+ from {bottom: 0; opacity: 0;}
+ to {bottom: 30px; opacity: 1;}
+}
+
+@keyframes fadein {
+ from {bottom: 0; opacity: 0;}
+ to {bottom: 30px; opacity: 1;}
+}
+
+@-webkit-keyframes fadeout {
+ from {bottom: 30px; opacity: 1;}
+ to {bottom: 0; opacity: 0;}
+}
+
+@keyframes fadeout {
+ from {bottom: 30px; opacity: 1;}
+ to {bottom: 0; opacity: 0;}
+}
`;
const js = `
function scrollToElement(replyId){
let el = document.getElementById(replyId);
- el.scrollIntoViewIfNeeded({
- behaviour: "smooth",
- block: "start",
- });
+ if(!el) {
+ showToast("The message you're looking for wasn't exported");
+ return;
+ };
+ el.scrollIntoView({ behavior: 'smooth', block: 'center' });
el.classList.add("mx_selected");
setTimeout(() => {
el.classList.remove("mx_selected");
}, 1000);
}
+
+function showToast(text) {
+ let el = document.getElementById("snackbar");
+ el.innerHTML = text;
+ el.className = "show";
+ setTimeout(() => {
+ el.className = el.className.replace("show", "");
+ }, 2000);
+}
`
export default class HTMLExporter extends Exporter {
@@ -324,6 +383,7 @@ export default class HTMLExporter extends Exporter {
</div>
</div>
</div>
+ <div id="snackbar"/>
</body>
</html>
`
@@ -427,6 +487,13 @@ export default class HTMLExporter extends Exporter {
${sanitizeHtml(event.getContent().body, sanitizeHtmlParams)}
</div>`;
break;
+ case "m.emote":
+ messageBody = `
+ <div class="mx_text">
+ * ${event.sender ? event.sender.name : event.getSender()}
+ ${sanitizeHtml(event.getContent().body, sanitizeHtmlParams)}
+ </div>`;
+ break;
case "m.image": {
const blob = await this.getMediaBlob(event);
const fileName = `${event.getId()}.${blob.type.replace("image/", "")}`;
@@ -491,7 +558,7 @@ export default class HTMLExporter extends Exporter {
</div>`: ``}
${isReply ?
` <div class="mx_reply_to mx_details">
- In reply to <a href="#${replyId}" onclick="scrollToElement('${replyId}')">this message</a>
+ In reply to <a onclick="scrollToElement('${replyId}')">this message</a>
</div>`: ``}
${messageBody}
</div>
From 573a3ca98342e98815d441ba0c0bb50c17ab33b9 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 31 May 2021 19:01:32 +0530
Subject: [PATCH 023/176] Rewrite export tool to use existing components to
render output, use existing source URLs for media
---
src/components/structures/MessagePanel.js | 2 +-
src/components/views/elements/ReplyThread.js | 12 +-
.../views/messages/DateSeparator.js | 5 +
src/components/views/rooms/EventTile.tsx | 21 +-
src/utils/exportUtils/HtmlExport.ts | 639 ------------------
src/utils/exportUtils/HtmlExport.tsx | 242 +++++++
src/utils/exportUtils/exportCSS.ts | 62 ++
src/utils/exportUtils/exportJS.ts | 32 +
8 files changed, 367 insertions(+), 648 deletions(-)
delete mode 100644 src/utils/exportUtils/HtmlExport.ts
create mode 100644 src/utils/exportUtils/HtmlExport.tsx
create mode 100644 src/utils/exportUtils/exportCSS.ts
create mode 100644 src/utils/exportUtils/exportJS.ts
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index d1071a9e19..3f06b23074 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -41,7 +41,7 @@ const continuedTypes = ['m.sticker', 'm.room.message'];
// check if there is a previous event and it has the same sender as this event
// and the types are the same/is in continuedTypes and the time between them is <= CONTINUATION_MAX_INTERVAL
-function shouldFormContinuation(prevEvent, mxEvent) {
+export function shouldFormContinuation(prevEvent, mxEvent) {
// sanity check inputs
if (!prevEvent || !prevEvent.sender || !mxEvent.sender) return false;
// check if within the max continuation period
diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index 870803995d..018c5d1e6e 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -46,6 +46,7 @@ export default class ReplyThread extends React.Component {
permalinkCreator: PropTypes.instanceOf(RoomPermalinkCreator).isRequired,
// Specifies which layout to use.
layout: LayoutPropType,
+ isExporting: PropTypes.bool,
};
static contextType = MatrixClientContext;
@@ -67,6 +68,9 @@ export default class ReplyThread extends React.Component {
};
this.unmounted = false;
+
+ if (this.props.isExporting) return;
+
this.context.on("Event.replaced", this.onEventReplaced);
this.room = this.context.getRoom(this.props.parentEv.getRoomId());
this.room.on("Room.redaction", this.onRoomRedaction);
@@ -212,12 +216,13 @@ export default class ReplyThread extends React.Component {
};
}
- static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, layout) {
+ static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, layout, isExporting) {
if (!ReplyThread.getParentEventId(parentEv)) {
return <div className="mx_ReplyThread_wrapper_empty" />;
}
return <ReplyThread
parentEv={parentEv}
+ isExporting={isExporting}
onHeightChanged={onHeightChanged}
ref={ref}
permalinkCreator={permalinkCreator}
@@ -366,6 +371,11 @@ export default class ReplyThread extends React.Component {
})
}
</blockquote>;
+ } else if (this.props.isExporting) {
+ const eventId = ReplyThread.getParentEventId(this.props.parentEv);
+ header = <p style={{ marginTop: -5, marginBottom: 5 }}>
+ In reply to <a className="mx_reply_anchor" scroll-to={`${eventId}`}>this message</a>
+ </p>;
} else if (this.state.loading) {
const Spinner = sdk.getComponent("elements.Spinner");
header = <Spinner w={16} h={16} />;
diff --git a/src/components/views/messages/DateSeparator.js b/src/components/views/messages/DateSeparator.js
index 82ce8dc4ae..2aba0eaef8 100644
--- a/src/components/views/messages/DateSeparator.js
+++ b/src/components/views/messages/DateSeparator.js
@@ -37,10 +37,15 @@ function getdaysArray() {
export default class DateSeparator extends React.Component {
static propTypes = {
ts: PropTypes.number.isRequired,
+ isExporting: PropTypes.bool,
};
getLabel() {
const date = new Date(this.props.ts);
+
+ // During the time the archive is being viewed, a specific day might not make sense, so we return the full date
+ if (this.props.isExporting) return formatFullDateNoTime(date);
+
const today = new Date();
const yesterday = new Date();
const days = getdaysArray();
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 19c5a7acaa..ff10b3255a 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -249,6 +249,8 @@ interface IProps {
// for now.
tileShape?: 'notif' | 'file_grid' | 'reply' | 'reply_preview';
+ isExporting?: boolean;
+
// show twelve hour timestamps
isTwelveHour?: boolean;
@@ -405,6 +407,8 @@ export default class EventTile extends React.Component<IProps, IState> {
// TODO: [REACT-WARNING] Move into constructor
// eslint-disable-next-line camelcase
UNSAFE_componentWillMount() {
+ // Context isn't propagated through renderToStaticMarkup so we'll have to explicitly set it during export
+ if (this.props.isExporting) this.context = MatrixClientPeg.get();
this.verifyEvent(this.props.mxEvent);
}
@@ -607,6 +611,7 @@ export default class EventTile extends React.Component<IProps, IState> {
}
shouldHighlight() {
+ if (this.props.isExporting) return false;
const actions = this.context.getPushActionsForEvent(this.props.mxEvent.replacingEvent() || this.props.mxEvent);
if (!actions || !actions.tweaks) { return false; }
@@ -951,7 +956,8 @@ export default class EventTile extends React.Component<IProps, IState> {
}
const MessageActionBar = sdk.getComponent('messages.MessageActionBar');
- const actionBar = !isEditing ? <MessageActionBar
+ const showMessageActionBar = !isEditing && !this.props.isExporting;
+ const actionBar = showMessageActionBar ? <MessageActionBar
mxEvent={this.props.mxEvent}
reactions={this.state.reactions}
permalinkCreator={this.props.permalinkCreator}
@@ -1127,6 +1133,7 @@ export default class EventTile extends React.Component<IProps, IState> {
this.props.permalinkCreator,
this.replyThread,
this.props.layout,
+ this.props.isExporting,
);
// tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
@@ -1169,11 +1176,11 @@ export default class EventTile extends React.Component<IProps, IState> {
// XXX this'll eventually be dynamic based on the fields once we have extensible event types
const messageTypes = ['m.room.message', 'm.sticker'];
-function isMessageEvent(ev) {
+function isMessageEvent(ev: MatrixEvent): boolean {
return (messageTypes.includes(ev.getType()));
}
-export function haveTileForEvent(e) {
+export function haveTileForEvent(e: MatrixEvent): boolean {
// Only messages have a tile (black-rectangle) if redacted
if (e.isRedacted() && !isMessageEvent(e)) return false;
@@ -1244,11 +1251,11 @@ class E2ePadlock extends React.Component<IE2ePadlockProps, IE2ePadlockState> {
}
onHoverStart = () => {
- this.setState({hover: true});
+ this.setState({ hover: true });
};
onHoverEnd = () => {
- this.setState({hover: false});
+ this.setState({ hover: false });
};
render() {
@@ -1286,11 +1293,11 @@ class SentReceipt extends React.PureComponent<ISentReceiptProps, ISentReceiptSta
}
onHoverStart = () => {
- this.setState({hover: true});
+ this.setState({ hover: true });
};
onHoverEnd = () => {
- this.setState({hover: false});
+ this.setState({ hover: false });
};
render() {
diff --git a/src/utils/exportUtils/HtmlExport.ts b/src/utils/exportUtils/HtmlExport.ts
deleted file mode 100644
index aaa6d5fadb..0000000000
--- a/src/utils/exportUtils/HtmlExport.ts
+++ /dev/null
@@ -1,639 +0,0 @@
-import streamSaver from "streamsaver";
-import JSZip from "jszip";
-import { decryptFile } from "../DecryptFile";
-import { mediaFromContent, mediaFromMxc } from "../../customisations/Media";
-import { textForEvent } from "../../TextForEvent";
-import { Room } from "matrix-js-sdk/src/models/room";
-import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { getUserNameColorClass } from "../FormattingUtils";
-import { Exporter } from "./Exporter";
-import * as ponyfill from "web-streams-polyfill/ponyfill"
-import { sanitizeHtmlParams } from "../../HtmlUtils";
-import sanitizeHtml from "sanitize-html";
-
-const css = `
-body {
- margin: 0;
- font: 12px/18px 'Inter', 'Open Sans',"Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,Verdana,sans-serif;
-}
-
-.mx_clearfix:after {
- content: " ";
- visibility: hidden;
- display: block;
- height: 0;
- clear: both;
-}
-
-.mx_pull_left {
- float: left;
-}
-
-.mx_pull_right {
- float: right;
-}
-
-.mx_page_wrap {
- background-color: #ffffff;
- color: #000000;
-}
-
-.mx_page_wrap a {
- color: #238CF5;
- text-decoration: none;
- cursor: pointer;
-}
-
-.mx_page_wrap a:hover {
- text-decoration: underline;
-}
-
-.mx_page_header {
- position: fixed;
- z-index: 10;
- background-color: #ffffff;
- width: 100%;
- border-bottom: 1px solid #e3e6e8;
-}
-
-.mx_page_header .mx_content {
- width: 480px;
- margin: 0 auto;
- border-radius: 0 !important;
-}
-
-.mx_page_header a.mx_content {
- background-repeat: no-repeat;
- background-position: 24px 21px;
- background-size: 24px 24px;
-}
-
-.mx_bold {
- color: #212121;
- font-weight: 700;
-}
-
-.mx_details {
- color: #70777b;
-}
-
-.mx_page_header .mx_content .mx_text {
- padding: 24px 24px 22px 24px;
- font-size: 22px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- text-align: center;
-}
-
-.mx_page_header a.mx_content .mx_text {
- padding: 24px 24px 22px 82px;
-}
-
-.mx_page_body {
- padding-top: 64px;
- width: 700px;
- margin: 0 auto;
-}
-
-.mx_userpic {
- display: block;
- border-radius: 50%;
- overflow: hidden;
-}
-
-.mx_userpic .mx_initials {
- display: block;
- color: #fff;
- text-align: center;
- text-transform: uppercase;
- user-select: none;
-}
-
-a.mx_block_link {
- display: block;
- text-decoration: none !important;
- border-radius: 4px;
-}
-
-a.mx_block_link:hover {
- text-decoration: none !important;
- background-color: #f5f7f8;
-}
-
-.mx_history {
- padding: 16px 0;
-}
-
-.mx_message {
- margin: 0 -10px;
- transition: background-color 1.3s ease;
-}
-
-div.mx_selected {
- background-color: #eeeeee;
- transition: background-color 0.5s ease;
-}
-
-.mx_service {
- padding: 10px 24px;
-}
-
-.mx_service .mx_body {
- text-align: center;
-}
-
-.mx_message .mx_userpic .mx_initials {
- font-size: 16px;
-}
-
-.mx_default {
- padding: 10px;
-}
-
-.mx_default.mx_joined {
- margin-top: -10px;
-}
-
-.mx_default .mx_from_name {
- font-weight: 700;
- padding-bottom: 5px;
-}
-
-.mx_default .mx_body {
- margin-left: 60px;
-}
-
-.mx_default .mx_text {
- word-wrap: break-word;
- line-height: 150%;
-}
-
-.mx_default .mx_reply_to,
-.mx_default .mx_media_wrap {
- padding-bottom: 5px;
-}
-
-.mx_default .mx_media {
- margin: 0 -10px;
- padding: 5px 10px;
-}
-
-.mx_default .mx_media .mx_fill,
-.mx_default .mx_media .mx_thumb {
- width: 48px;
- height: 48px;
- border-radius: 50%;
-}
-
-.mx_default .mx_media .mx_fill {
- background-repeat: no-repeat;
- background-position: 12px 12px;
- background-size: 24px 24px;
-}
-
-.mx_default .mx_media .mx_title {
- padding-top: 4px;
- font-size: 14px;
-}
-
-.mx_default .mx_media .mx_description {
- color: #000000;
- padding-top: 4px;
- font-size: 13px;
-}
-
-.mx_default .mx_media .mx_status {
- padding-top: 4px;
- font-size: 13px;
-}
-
-.mx_default .mx_photo {
- display: block;
-}
-
-.mx_from_name.mx_Username_color1{
- color: #368bd6;
-}
-
-.mx_initials_wrap.mx_Username_color1{
- background-color: #368bd6;
-}
-
-.mx_from_name.mx_Username_color2{
- color: #ac3ba8;
-}
-
-.mx_initials_wrap.mx_Username_color2{
- background-color: #ac3ba8;
-}
-
-.mx_from_name.mx_Username_color3{
- color: #03b381;
-}
-
-.mx_initials_wrap.mx_Username_color3{
- background-color: #03b381;
-}
-
-.mx_from_name.mx_Username_color4{
- color: #e64f7a;
-}
-
-.mx_initials_wrap.mx_Username_color4{
- background-color: #e64f7a;
-}
-
-.mx_from_name.mx_Username_color5{
- color: #ff812d;
-}
-
-.mx_initials_wrap.mx_Username_color5{
- background-color: #ff812d;
-}
-
-.mx_from_name.mx_Username_color6{
- color: #2dc2c5;
-}
-
-.mx_initials_wrap.mx_Username_color6{
- background-color: #2dc2c5;
-}
-
-.mx_from_name.mx_Username_color7{
- color: #5c56f5;
-}
-
-.mx_initials_wrap.mx_Username_color7{
- background-color: #5c56f5;
-}
-
-.mx_from_name.mx_Username_color8{
- color: #74d12c;
-}
-
-.mx_initials_wrap.mx_Username_color8{
- background-color: #74d12c;
-}
-
-#snackbar {
- display: flex;
- visibility: hidden;
- min-width: 250px;
- margin-left: -125px;
- background-color: #333;
- color: #fff;
- text-align: center;
- position: fixed;
- z-index: 1;
- left: 50%;
- bottom: 30px;
- font-size: 17px;
- padding: 6px 16px;
- font-size: 0.875rem;
- font-family: "Roboto", "Helvetica", "Arial", sans-serif;
- font-weight: 400;
- line-height: 1.43;
- border-radius: 4px;
- letter-spacing: 0.01071em;
-}
-
-#snackbar.show {
- visibility: visible;
- -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
- animation: fadein 0.5s, fadeout 0.5s 2.5s;
-}
-
-@-webkit-keyframes fadein {
- from {bottom: 0; opacity: 0;}
- to {bottom: 30px; opacity: 1;}
-}
-
-@keyframes fadein {
- from {bottom: 0; opacity: 0;}
- to {bottom: 30px; opacity: 1;}
-}
-
-@-webkit-keyframes fadeout {
- from {bottom: 30px; opacity: 1;}
- to {bottom: 0; opacity: 0;}
-}
-
-@keyframes fadeout {
- from {bottom: 30px; opacity: 1;}
- to {bottom: 0; opacity: 0;}
-}
-`;
-
-const js = `
-function scrollToElement(replyId){
- let el = document.getElementById(replyId);
- if(!el) {
- showToast("The message you're looking for wasn't exported");
- return;
- };
- el.scrollIntoView({ behavior: 'smooth', block: 'center' });
- el.classList.add("mx_selected");
- setTimeout(() => {
- el.classList.remove("mx_selected");
- }, 1000);
-}
-
-function showToast(text) {
- let el = document.getElementById("snackbar");
- el.innerHTML = text;
- el.className = "show";
- setTimeout(() => {
- el.className = el.className.replace("show", "");
- }, 2000);
-}
-`
-
-export default class HTMLExporter extends Exporter {
- protected zip: JSZip;
- protected avatars: Map<string, boolean>;
-
- constructor(res: MatrixEvent[], room: Room) {
- super(res, room);
- this.zip = new JSZip();
- this.avatars = new Map<string, boolean>();
- }
-
- protected wrapHTML(content: string, room: Room) {
- return `
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>Exported Data</title>
- <meta content="width=device-width, initial-scale=1.0" name="viewport" />
- <link href="css/style.css" rel="stylesheet" />
- <script src="js/script.js"></script>
- </head>
- <body>
- <div class="mx_page_wrap">
- <div class="mx_page_header">
- <div class="mx_content">
- <div class="mx_text mx_bold">${room.name}</div>
- </div>
- </div>
- <div class="mx_page_body mx_chat_page">
- <div class="mx_history">
- ${content}
- </div>
- </div>
- </div>
- <div id="snackbar"/>
- </body>
- </html>
- `
- }
-
- protected isEdit(event: MatrixEvent) {
- if (event.getType() === "m.room.message" && event.getContent().hasOwnProperty("m.new_content")) return true;
- return false;
- }
-
- protected async getUserAvatar(event: MatrixEvent) {
- const member = event.sender;
- if (!member.getMxcAvatarUrl()) {
- return `
- <div class="mx_pull_left mx_userpic_wrap">
- <div
- class="mx_userpic mx_initials_wrap ${getUserNameColorClass(event.getSender())}"
- style="width: 42px;height: 42px;"
- >
- <div class="mx_initials" style="line-height: 42px;" src="users/${member.userId}">
- ${event.sender.name[0]}
- </div>
- </div>
- </div>
- `;
- } else {
- const imageUrl = mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(42, 42, "crop");
-
- if (!this.avatars.has(member.userId)) {
- this.avatars.set(member.userId, true);
- const image = await fetch(imageUrl);
- const blob = await image.blob();
- this.zip.file(`users/${member.userId}`, blob);
- }
-
- return `
- <div class="mx_pull_left mx_userpic_wrap">
- <div class="mx_userpic" style="width: 42px; height: 42px;">
- <img
- class="mx_initials"
- style="width: 42px;height: 42px;line-height:42px;"
- src="users/${member.userId}"
- />
- </div>
- </div>
- `;
- }
- }
-
- protected async getMediaBlob(event: MatrixEvent) {
- let blob: Blob;
- try {
- const isEncrypted = event.isEncrypted();
- const content = event.getContent();
- if (isEncrypted) {
- blob = await decryptFile(content.file);
- } else {
- const media = mediaFromContent(event.getContent());
- const image = await fetch(media.srcHttp);
- blob = await image.blob();
- }
- } catch (err) {
- console.log("Error decrypting media");
- }
- return blob;
- }
-
- //Gets the event_id of an event to which an event is replied
- protected getBaseEventId = (event: MatrixEvent) => {
- const isEncrypted = event.isEncrypted();
-
- // If encrypted, in_reply_to lies in event.event.content
- const content = isEncrypted ? event.event.content : event.getContent();
- const relatesTo = content["m.relates_to"];
- return (relatesTo && relatesTo["m.in_reply_to"]) ? relatesTo["m.in_reply_to"]["event_id"] : null;
- };
-
- protected dateSeparator(event: MatrixEvent, prevEvent: MatrixEvent) {
- const prevDate = prevEvent ? new Date(prevEvent.getTs()) : null;
- const currDate = new Date(event.getTs());
- if (!prevDate || currDate.setHours(0, 0, 0, 0) !== prevDate.setHours(0, 0, 0, 0)) {
- return `
- <div class="mx_message mx_service">
- <div class="mx_body mx_details">
- ${new Date(event.getTs())
- .toLocaleString("en-us", {year: "numeric", month: "long", day: "numeric" })}
- </div>
- </div>
- `;
- }
- return "";
- }
-
- protected async createMessageBody(event: MatrixEvent, joined = false, isReply = false, replyId = null) {
- const userPic = await this.getUserAvatar(event);
- let messageBody = "";
- switch (event.getContent().msgtype) {
- case "m.text":
- messageBody = `
- <div class="mx_text">
- ${sanitizeHtml(event.getContent().body, sanitizeHtmlParams)}
- </div>`;
- break;
- case "m.emote":
- messageBody = `
- <div class="mx_text">
- * ${event.sender ? event.sender.name : event.getSender()}
- ${sanitizeHtml(event.getContent().body, sanitizeHtmlParams)}
- </div>`;
- break;
- case "m.image": {
- const blob = await this.getMediaBlob(event);
- const fileName = `${event.getId()}.${blob.type.replace("image/", "")}`;
- messageBody = `
- <a class="mx_photo_wrap mx_clearfix mx_pull_left" href="images/${event.getId()}.png">
- <img
- class="mx_photo"
- style="max-width: 600px; max-height: 500px;"
- src="images/${fileName}"
- />
- </a>`;
- this.zip.file(`images/${fileName}`, blob);
- break;
- }
- case "m.video": {
- const blob = await this.getMediaBlob(event);
- const fileName = `${event.getId()}.${blob.type.replace("video/", "")}`;
- messageBody = `
- <div class="mx_media_wrap mx_clearfix">
- <video
- class="mx_video_file"
- src="videos/${fileName}"
- style="max-height: 400px; max-width: 600px;"
- controls
- />
- </div>`;
- this.zip.file(`videos/${fileName}`, blob);
- break;
- }
- case "m.audio": {
- const blob = await this.getMediaBlob(event);
- const fileName = `${event.getId()}.${blob.type.replace("audio/", "")}`;
- messageBody = `
- <div class="mx_media_wrap mx_clearfix">
- <audio
- class="mx_audio_file"
- src="audio/${fileName}"
- controls
- />
- </div>`;
- this.zip.file(`audio/${fileName}`, blob);
- break;
- }
- default:
- break;
- }
-
- if (isReply) {
- messageBody = event.getContent().formatted_body.replace(/<mx-reply>.*<\/mx-reply>/, '')
- }
-
- return `
- <div class="mx_message mx_default mx_clearfix ${joined ? `mx_joined` : ``}" id="${event.getId()}">
- ${!joined ? userPic : ``}
- <div class="mx_body">
- <div class="mx_pull_right mx_date mx_details" title="${new Date(event.getTs())}">
- ${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}
- </div>
- ${!joined ? `
- <div class="mx_from_name ${getUserNameColorClass(event.getSender())}">
- ${event.sender.name}
- </div>`: ``}
- ${isReply ?
- ` <div class="mx_reply_to mx_details">
- In reply to <a onclick="scrollToElement('${replyId}')">this message</a>
- </div>`: ``}
- ${messageBody}
- </div>
- </div>
- `;
- }
-
- protected async createHTML(events: MatrixEvent[], room: Room) {
- let content = "";
- let prevEvent = null;
- for (const event of events) {
- // As the getContent of the edited event fetches the latest edit, there is no need to process edit events
- if (this.isEdit(event)) continue;
- content += this.dateSeparator(event, prevEvent);
-
- if (event.getType() === "m.room.message") {
- const replyTo = this.getBaseEventId(event);
- const shouldBeJoined = prevEvent && prevEvent.getContent().msgtype === "m.text"
- && event.sender.userId === prevEvent.sender.userId && !this.dateSeparator(event, prevEvent) && !replyTo;
-
- const body = await this.createMessageBody(event, shouldBeJoined, !!replyTo, replyTo);
- content += body;
- } else {
- const eventText = textForEvent(event);
- content += eventText ? `
- <div class="mx_message mx_service" id="${event.getId()}">
- <div class="mx_body mx_details">
- ${textForEvent(event)}
- </div>
- </div>
- ` : "";
- }
- prevEvent = event;
- }
- return this.wrapHTML(content, room);
- }
-
- public async export() {
- const html = await this.createHTML(this.res, this.room);
-
- this.zip.file("index.html", html);
- this.zip.file("css/style.css", css);
- this.zip.file("js/script.js", js);
- const filename = `matrix-export-${new Date().toISOString()}.zip`;
-
- //Generate the zip file asynchronously
- const blob = await this.zip.generateAsync({ type: "blob" });
-
- //Support for firefox browser
- streamSaver.WritableStream = ponyfill.WritableStream
- //Create a writable stream to the directory
- const fileStream = streamSaver.createWriteStream(filename, { size: blob.size });
- const writer = fileStream.getWriter();
-
- // Here we chunk the blob into pieces of 10 MB, the size might be dynamically generated.
- // This can be used to keep track of the progress
- const sliceSize = 10 * 1e6;
- for (let fPointer = 0; fPointer < blob.size; fPointer += sliceSize) {
- const blobPiece = blob.slice(fPointer, fPointer + sliceSize);
- const reader = new FileReader();
-
- const waiter = new Promise<void>((resolve, reject) => {
- reader.onloadend = evt => {
- const arrayBufferNew: any = evt.target.result;
- const uint8ArrayNew = new Uint8Array(arrayBufferNew);
- writer.write(uint8ArrayNew);
- resolve();
- };
- reader.readAsArrayBuffer(blobPiece);
- });
- await waiter;
- }
- writer.close();
-
- return blob;
- }
-}
-
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
new file mode 100644
index 0000000000..22cf04669b
--- /dev/null
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -0,0 +1,242 @@
+import React from "react"
+import streamSaver from "streamsaver";
+import JSZip from "jszip";
+import { decryptFile } from "../DecryptFile";
+import { mediaFromContent } from "../../customisations/Media";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { Exporter } from "./Exporter";
+import * as ponyfill from "web-streams-polyfill/ponyfill"
+import { renderToStaticMarkup } from 'react-dom/server'
+import { Layout } from "../../settings/Layout";
+import { shouldFormContinuation } from "../../components/structures/MessagePanel";
+import { wantsDateSeparator } from "../../DateUtils";
+import { RoomPermalinkCreator } from "../permalinks/Permalinks";
+import EventTile, { haveTileForEvent } from "../../components/views/rooms/EventTile";
+import DateSeparator from "../../components/views/messages/DateSeparator";
+import exportCSS from "./exportCSS";
+import exportJS from "./exportJS";
+
+export default class HTMLExporter extends Exporter {
+ protected zip: JSZip;
+ protected avatars: Map<string, boolean>;
+
+ constructor(res: MatrixEvent[], room: Room) {
+ super(res, room);
+ this.zip = new JSZip();
+ this.avatars = new Map<string, boolean>();
+ }
+
+ protected wrapHTML(content: string, room: Room) {
+ return `
+ <!DOCTYPE html>
+ <html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <link href="css/style.css" rel="stylesheet" />
+ <script src="js/script.js"></script>
+ <title>Exported Data</title>
+ </head>
+ <body style="height: 100vh;">
+ <section
+ id="matrixchat"
+ style="height: 100%; overflow: auto"
+ class="notranslate"
+ >
+ <div class="mx_MatrixChat_wrapper" aria-hidden="false">
+ <div class="mx_MatrixChat">
+ <main class="mx_RoomView">
+ <div class="mx_RoomHeader light-panel">
+ <div class="mx_RoomHeader_wrapper" aria-owns="mx_RightPanel">
+ <div class="mx_RoomHeader_avatar">
+ <div class="mx_DecoratedRoomAvatar">
+ <span class="mx_BaseAvatar" role="presentation"
+ ><span
+ class="mx_BaseAvatar_initial"
+ aria-hidden="true"
+ style="
+ font-size: 20.8px;
+ width: 32px;
+ line-height: 32px;
+ "
+ >G</span
+ ><img
+ class="mx_BaseAvatar_image"
+ alt=""
+ aria-hidden="true"
+ style="width: 32px; height: 32px"
+ /></span>
+ </div>
+ </div>
+ <div class="mx_RoomHeader_name">
+ <div
+ dir="auto"
+ class="mx_RoomHeader_nametext"
+ title="${room.name}"
+ >
+ ${room.name}
+ </div>
+ </div>
+ <div class="mx_RoomHeader_topic" dir="auto"></div>
+ </div>
+ </div>
+ <div class="mx_MainSplit">
+ <div class="mx_RoomView_body">
+ <div
+ class="mx_RoomView_timeline mx_RoomView_timeline_rr_enabled"
+ >
+ <div
+ class="
+ mx_AutoHideScrollbar
+ mx_ScrollPanel
+ mx_RoomView_messagePanel
+ mx_GroupLayout
+ "
+ >
+ <div class="mx_RoomView_messageListWrapper">
+ <ol
+ class="mx_RoomView_MessageList"
+ aria-live="polite"
+ role="list"
+ >
+ ${content}
+ </ol>
+ </div>
+ </div>
+ </div>
+ <div class="mx_RoomView_statusArea">
+ <div class="mx_RoomView_statusAreaBox">
+ <div class="mx_RoomView_statusAreaBox_line"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </main>
+ </div>
+ </div>
+ </section>
+ <div id="snackbar"/>
+ </body>
+ </html>`
+ }
+
+ // will be used in the future
+ protected async getMediaBlob(event: MatrixEvent) {
+ let blob: Blob;
+ try {
+ const isEncrypted = event.isEncrypted();
+ const content = event.getContent();
+ if (isEncrypted) {
+ blob = await decryptFile(content.file);
+ } else {
+ const media = mediaFromContent(event.getContent());
+ const image = await fetch(media.srcHttp);
+ blob = await image.blob();
+ }
+ } catch (err) {
+ console.log("Error decrypting media");
+ }
+ return blob;
+ }
+
+ protected getDateSeparator(event: MatrixEvent) {
+ const ts = event.getTs();
+ const dateSeparator = <li key={ts}><DateSeparator isExporting={true} key={ts} ts={ts} /></li>;
+ return renderToStaticMarkup(dateSeparator);
+ }
+
+ protected _wantsDateSeparator(event: MatrixEvent, prevEvent: MatrixEvent) {
+ if (prevEvent == null) return true;
+ return wantsDateSeparator(prevEvent.getDate(), event.getDate());
+ }
+
+ protected async createMessageBody(mxEv: MatrixEvent, joined = false) {
+ const eventTile = <li id={mxEv.getId()}>
+ <EventTile
+ mxEvent={mxEv}
+ continuation={joined}
+ isRedacted={mxEv.isRedacted()}
+ replacingEventId={mxEv.replacingEventId()}
+ isExporting={true}
+ readReceipts={null}
+ readReceiptMap={null}
+ showUrlPreview={false}
+ checkUnmounting={() => false}
+ isTwelveHour={false}
+ last={false}
+ lastInSection={false}
+ permalinkCreator={new RoomPermalinkCreator(this.room)}
+ lastSuccessful={false}
+ isSelectedEvent={false}
+ getRelationsForEvent={null}
+ showReactions={false}
+ layout={Layout.Group}
+ enableFlair={false}
+ showReadReceipts={false}
+ />
+ </li>
+ return renderToStaticMarkup(eventTile);
+ }
+
+ protected async createHTML(events: MatrixEvent[], room: Room) {
+ let content = "";
+ let prevEvent = null;
+ for (const event of events) {
+ if (!haveTileForEvent(event)) continue;
+
+ content += this._wantsDateSeparator(event, prevEvent) ? this.getDateSeparator(event) : "";
+
+ if (event.getType() === "m.room.message") {
+ const shouldBeJoined = !this._wantsDateSeparator(event, prevEvent)
+ && shouldFormContinuation(prevEvent, event);
+ const body = await this.createMessageBody(event, shouldBeJoined);
+ content += body;
+ }
+ prevEvent = event;
+ }
+ return this.wrapHTML(content, room);
+ }
+
+ public async export() {
+ const html = await this.createHTML(this.res, this.room);
+ this.zip.file("index.html", html);
+ this.zip.file("css/style.css", exportCSS);
+ this.zip.file("js/script.js", exportJS);
+
+ const filename = `matrix-export-${new Date().toISOString()}.zip`;
+
+ //Generate the zip file asynchronously
+ const blob = await this.zip.generateAsync({ type: "blob" });
+
+ //Support for firefox browser
+ streamSaver.WritableStream = ponyfill.WritableStream
+ //Create a writable stream to the directory
+ const fileStream = streamSaver.createWriteStream(filename, { size: blob.size });
+ const writer = fileStream.getWriter();
+
+ // Here we chunk the blob into pieces of 10 MB, the size might be dynamically generated.
+ // This can be used to keep track of the progress
+ const sliceSize = 10 * 1e6;
+ for (let fPointer = 0; fPointer < blob.size; fPointer += sliceSize) {
+ const blobPiece = blob.slice(fPointer, fPointer + sliceSize);
+ const reader = new FileReader();
+
+ const waiter = new Promise<void>((resolve, reject) => {
+ reader.onloadend = evt => {
+ const arrayBufferNew: any = evt.target.result;
+ const uint8ArrayNew = new Uint8Array(arrayBufferNew);
+ writer.write(uint8ArrayNew);
+ resolve();
+ };
+ reader.readAsArrayBuffer(blobPiece);
+ });
+ await waiter;
+ }
+ writer.close();
+
+ return blob;
+ }
+}
+
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
new file mode 100644
index 0000000000..5a63802097
--- /dev/null
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -0,0 +1,62 @@
+/* eslint-disable max-len */
+const lightCSS = `
+@charset "utf-8";@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-Regular.4232a67.woff2) format("woff2"),url(../../fonts/Inter/Inter-Regular.3a1908c.woff) format("woff")}@font-face{font-family:Inter;font-style:italic;font-weight:400;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-Italic.b791861.woff2) format("woff2"),url(../../fonts/Inter/Inter-Italic.b13e6fe.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-Medium.027d14e.woff2) format("woff2"),url(../../fonts/Inter/Inter-Medium.d1f6b6e.woff) format("woff")}@font-face{font-family:Inter;font-style:italic;font-weight:500;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-MediumItalic.8154ac2.woff2) format("woff2"),url(../../fonts/Inter/Inter-MediumItalic.1912849.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-SemiBold.0802d48.woff2) format("woff2"),url(../../fonts/Inter/Inter-SemiBold.8357f92.woff) format("woff")}@font-face{font-family:Inter;font-style:italic;font-weight:600;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-SemiBoldItalic.10a60d8.woff2) format("woff2"),url(../../fonts/Inter/Inter-SemiBoldItalic.1c70752.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-Bold.fc28dff.woff2) format("woff2"),url(../../fonts/Inter/Inter-Bold.025b6f2.woff) format("woff")}@font-face{font-family:Inter;font-style:italic;font-weight:700;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-BoldItalic.2129bd0.woff2) format("woff2"),url(../../fonts/Inter/Inter-BoldItalic.80f8542.woff) format("woff")}@font-face{font-family:Inconsolata;font-style:normal;font-weight:400;src:local("Inconsolata Regular"),local("Inconsolata-Regular"),url(../../fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlX5qhExfHwNJU.2aafaa1.woff2) format("woff2");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Inconsolata;font-style:normal;font-weight:400;font-display:swap;src:local("Inconsolata Regular"),local("Inconsolata-Regular"),url(../../fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlZ5qhExfHw.5476fd3.woff2) format("woff2");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:Inconsolata;font-style:normal;font-weight:700;font-display:swap;src:local("Inconsolata Bold"),local("Inconsolata-Bold"),url(../../fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71n5_zaDpwm80E.6bc411a.woff2) format("woff2");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Inconsolata;font-style:normal;font-weight:700;font-display:swap;src:local("Inconsolata Bold"),local("Inconsolata-Bold"),url(../../fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71p5_zaDpwm.000abc6.woff2) format("woff2");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}.hljs-addition{background:#dfd}.hljs-deletion{background:#fdd}@supports ((-webkit-backdrop-filter:none) or (backdrop-filter:none)){.mx_LeftPanel{background-image:unset;background-image:var(--avatar-url,unset);background-repeat:no-repeat;background-size:cover;background-position:0 0}.mx_GroupFilterPanel,.mx_SpacePanel{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.mx_LeftPanel .mx_LeftPanel_roomListContainer{-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px)}}.mx_RoomSublist_showNButton{background-color:transparent!important}a:hover,a:link,a:visited{text-decoration:none}:root{font-size:10px;--transition-short:.1s;--transition-standard:.3s}@media (prefers-reduced-motion){:root{--transition-short:0;--transition-standard:0}}html{height:100%;overflow:hidden}body{font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.5rem;background-color:#fff;color:#2e2f32;border:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code,pre{font-family:Inconsolata,Twemoji,Apple Color Emoji,Segoe UI Emoji,Courier,monospace,Noto Color Emoji;font-size:100%!important}.error,.text-error,.text-warning,.warning{color:#ff4b55}.text-success{color:#0dbd8b}.text-muted{color:#61708b}b{font-weight:700}h2{color:#2e2f32;font-weight:400;font-size:1.8rem;margin-top:16px;margin-bottom:16px}a:hover,a:link,a:visited{color:#238cf5}input[type=password],input[type=search],input[type=text]{padding:9px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;font-weight:600;min-width:0}input[type=search].mx_textinput_icon,input[type=text].mx_textinput_icon{padding-left:36px;background-repeat:no-repeat;background-position:10px}input[type=search].mx_textinput_icon.mx_textinput_search,input[type=text].mx_textinput_icon.mx_textinput_search{background-image:url(../../img/feather-customised/search-input.044bfa7.svg)}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{opacity:1}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1}input::-ms-input-placeholder,textarea::-ms-input-placeholder{opacity:1}input::placeholder,textarea::placeholder{opacity:1}input[type=password],input[type=text],textarea{background-color:transparent;color:#2e2f32}textarea{font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;color:#2e2f32}input[type=password]:focus,input[type=text]:focus,textarea:focus{outline:none;-webkit-box-shadow:none;box-shadow:none}:focus:not(.focus-visible){outline:none}.mx_Dialog .mx_textinput>input[type=search],.mx_Dialog .mx_textinput>input[type=text],.mx_MatrixChat .mx_textinput>input[type=search],.mx_MatrixChat .mx_textinput>input[type=text]{border:none;-webkit-box-flex:1;-ms-flex:1;flex:1;color:#2e2f32}.mx_Dialog .mx_textinput,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search],.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text],.mx_MatrixChat .mx_textinput,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search],.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]{display:block;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:transparent;color:#9fa9ba;border-radius:4px;border:1px solid rgba(46,47,50,.1);margin:9px}.mx_Dialog .mx_textinput,.mx_MatrixChat .mx_textinput{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_Dialog .mx_textinput input::-webkit-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-webkit-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-webkit-input-placeholder,.mx_MatrixChat .mx_textinput input::-webkit-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-webkit-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-webkit-input-placeholder{color:rgba(159,169,186,.75)}.mx_Dialog .mx_textinput input::-moz-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-moz-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-moz-placeholder,.mx_MatrixChat .mx_textinput input::-moz-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-moz-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-moz-placeholder{color:rgba(159,169,186,.75)}.mx_Dialog .mx_textinput input:-ms-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]:-ms-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]:-ms-input-placeholder,.mx_MatrixChat .mx_textinput input:-ms-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]:-ms-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]:-ms-input-placeholder{color:rgba(159,169,186,.75)}.mx_Dialog .mx_textinput input::-ms-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-ms-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-ms-input-placeholder,.mx_MatrixChat .mx_textinput input::-ms-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-ms-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-ms-input-placeholder{color:rgba(159,169,186,.75)}.mx_Dialog .mx_textinput input::placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::placeholder,.mx_MatrixChat .mx_textinput input::placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::placeholder{color:rgba(159,169,186,.75)}.dark-panel{background-color:#f2f5f8}.dark-panel .mx_textinput,.dark-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search],.dark-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]{color:#9fa9ba;background-color:#fff;border:none}.light-panel .mx_textinput,.light-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search],.light-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]{color:#9fa9ba;background-color:#f2f5f8;border:none}::-moz-focus-inner{border:0}#mx_theme_accentColor{color:#0dbd8b}#mx_theme_secondaryAccentColor{color:#f2f5f8}#mx_theme_tertiaryAccentColor{color:#d3efe1}.mx_Dialog_wrapper{position:fixed;z-index:4000;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_Dialog{background-color:#fff;color:#747474;z-index:4012;font-weight:300;font-size:1.5rem;position:relative;padding:24px;max-height:80%;-webkit-box-shadow:2px 15px 30px 0 rgba(0,0,0,.48);box-shadow:2px 15px 30px 0 rgba(0,0,0,.48);border-radius:8px;overflow-y:auto}.mx_Dialog_fixedWidth{width:60vw;max-width:704px}.mx_Dialog_staticWrapper .mx_Dialog{z-index:4010}.mx_Dialog_background{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(46,48,51,.38);opacity:.8;z-index:4011}.mx_Dialog_background.mx_Dialog_staticBackground{z-index:4009}.mx_Dialog_wrapperWithStaticUnder .mx_Dialog_background{opacity:.4}.mx_Dialog_lightbox .mx_Dialog_background{opacity:.95;background-color:#000}.mx_Dialog_lightbox .mx_Dialog{border-radius:0;background-color:transparent;width:100%;height:100%;max-width:100%;max-height:100%;pointer-events:none;padding:0}.mx_Dialog_header{position:relative;margin-bottom:10px}.mx_Dialog_titleImage{vertical-align:sub;width:25px;height:25px;margin-left:-2px;margin-right:4px}.mx_Dialog_title{font-size:2.2rem;font-weight:600;line-height:3.6rem;color:#45474a}.mx_Dialog_header.mx_Dialog_headerWithButton>.mx_Dialog_title{text-align:center}.mx_Dialog_header.mx_Dialog_headerWithCancel>.mx_Dialog_title{margin-right:20px}.mx_Dialog_title.danger{color:#ff4b55}.mx_Dialog_cancelButton{-webkit-mask:url(../../img/feather-customised/cancel.23c2689.svg);mask:url(../../img/feather-customised/cancel.23c2689.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;width:14px;height:14px;background-color:#c1c1c1;cursor:pointer;position:absolute;top:10px;right:0}.mx_Dialog_content{margin:24px 0 68px;font-size:1.4rem;color:#2e2f32;word-wrap:break-word}.mx_Dialog_buttons{margin-top:20px;text-align:right}.mx_Dialog_buttons .mx_Dialog_buttons_additive{float:left}.mx_Dialog_buttons button,.mx_Dialog_buttons input[type=submit],.mx_Dialog button,.mx_Dialog input[type=submit]{vertical-align:middle;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;padding:7px 1.5em;cursor:pointer;display:inline-block;outline:none;margin-left:0;margin-right:8px;font-weight:600;border:1px solid #0dbd8b;color:#0dbd8b;background-color:#fff;font-family:inherit}.mx_Dialog button:last-child{margin-right:0}.mx_Dialog_buttons button:focus,.mx_Dialog_buttons input[type=submit]:focus,.mx_Dialog button:focus,.mx_Dialog input[type=submit]:focus{-webkit-filter:brightness(105%);filter:brightness(105%)}.mx_Dialog_buttons button.mx_Dialog_primary,.mx_Dialog_buttons input[type=submit].mx_Dialog_primary,.mx_Dialog button.mx_Dialog_primary,.mx_Dialog input[type=submit].mx_Dialog_primary{color:#fff;background-color:#0dbd8b;min-width:156px}.mx_Dialog_buttons button.danger,.mx_Dialog_buttons input[type=submit].danger,.mx_Dialog button.danger,.mx_Dialog input[type=submit].danger{background-color:#ff4b55;border:1px solid #ff4b55;color:#fff}.mx_Dialog button.warning,.mx_Dialog input[type=submit].warning{border:1px solid #ff4b55;color:#ff4b55}.mx_Dialog_buttons button:disabled,.mx_Dialog_buttons input[type=submit]:disabled,.mx_Dialog button:disabled,.mx_Dialog input[type=submit]:disabled{background-color:#747474;border:1px solid #747474;opacity:.7}.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog{width:auto;border-radius:8px;padding:0;-webkit-box-shadow:none;box-shadow:none;overflow-x:hidden;overflow-y:hidden}.mx_GeneralButton{vertical-align:middle;border:0;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;padding:7px 1.5em;cursor:pointer;display:inline-block;outline:none;display:inline;margin:auto}.mx_linkButton{cursor:pointer;color:#0dbd8b}.mx_TextInputDialog_label{text-align:left;padding-bottom:12px}.mx_TextInputDialog_input{font-size:1.5rem;border-radius:3px;border:1px solid #e7e7e7;padding:9px;color:#2e2f32;background-color:#fff}.mx_textButton{vertical-align:middle;border:0;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;cursor:pointer;display:inline-block;outline:none;font-size:1.5rem;padding:0 1.5em}.mx_button_row{margin-top:69px}.mx_Username_color1{color:#368bd6}.mx_Username_color2{color:#ac3ba8}.mx_Username_color3{color:#0dbd8b}.mx_Username_color4{color:#e64f7a}.mx_Username_color5{color:#ff812d}.mx_Username_color6{color:#2dc2c5}.mx_Username_color7{color:#5c56f5}.mx_Username_color8{color:#74d12c}.mx_Tooltip_dark .mx_Tooltip_chevron:after{border-right-color:#27303a}html{scrollbar-color:rgba(0,0,0,.2) transparent}*{scrollbar-width:thin}::-webkit-scrollbar{width:6px;height:6px;background-color:transparent}::-webkit-scrollbar-thumb{border-radius:3px;background-color:rgba(0,0,0,.2)}.mx_AutoHideScrollbar:hover{scrollbar-color:rgba(0,0,0,.2) transparent}.mx_AutoHideScrollbar:hover::-webkit-scrollbar{background-color:transparent}.mx_AutoHideScrollbar:hover::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.2)}.mx_AutoHideScrollbar{overflow-x:hidden;overflow-y:auto;overflow-y:overlay;-ms-overflow-style:-ms-autohiding-scrollbar}.mx_AutoHideScrollbar::-webkit-scrollbar,.mx_AutoHideScrollbar::-webkit-scrollbar-thumb{background-color:transparent}.mx_AutoHideScrollbar{scrollbar-color:transparent transparent}.mx_CompatibilityPage{width:100%;height:100%;background-color:#e55}.mx_CompatibilityPage_box{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:500px;height:300px;border:1px solid;padding:10px;background-color:#fcc}.mx_ContextualMenu_wrapper{position:fixed;z-index:5000}.mx_ContextualMenu_background{position:fixed;top:0;left:0;width:100%;height:100%;opacity:1;z-index:5000}.mx_ContextualMenu{border-radius:8px;-webkit-box-shadow:4px 4px 12px 0 rgba(118,131,156,.6);box-shadow:4px 4px 12px 0 rgba(118,131,156,.6);background-color:#fff;color:#2e2f32;position:absolute;font-size:1.4rem;z-index:5001}.mx_ContextualMenu_right{right:0}.mx_ContextualMenu.mx_ContextualMenu_withChevron_right{right:8px}.mx_ContextualMenu_chevron_right{position:absolute;right:-8px;top:0;width:0;height:0;border-top:8px solid transparent;border-left:8px solid #fff;border-bottom:8px solid transparent}.mx_ContextualMenu_left{left:0}.mx_ContextualMenu.mx_ContextualMenu_withChevron_left{left:8px}.mx_ContextualMenu_chevron_left{position:absolute;left:-8px;top:0;width:0;height:0;border-top:8px solid transparent;border-right:8px solid #fff;border-bottom:8px solid transparent}.mx_ContextualMenu_top{top:0}.mx_ContextualMenu.mx_ContextualMenu_withChevron_top{top:8px}.mx_ContextualMenu_chevron_top{position:absolute;left:0;top:-8px;width:0;height:0;border-left:8px solid transparent;border-bottom:8px solid #fff;border-right:8px solid transparent}.mx_ContextualMenu_bottom{bottom:0}.mx_ContextualMenu.mx_ContextualMenu_withChevron_bottom{bottom:8px}.mx_ContextualMenu_chevron_bottom{position:absolute;left:0;bottom:-8px;width:0;height:0;border-left:8px solid transparent;border-top:8px solid #fff;border-right:8px solid transparent}.mx_ContextualMenu_spinner{display:block;margin:0 auto}.mx_CreateRoom{width:960px;margin-left:auto;margin-right:auto;color:#2e2f32}.mx_CreateRoom input,.mx_CreateRoom textarea{border-radius:3px;border:1px solid #c7c7c7;font-weight:300;font-size:1.3rem;padding:9px;margin-top:6px}.mx_CreateRoom_description{width:330px}.mx_CustomRoomTagPanel{background-color:hsla(0,0%,91%,.77);max-height:40vh}.mx_CustomRoomTagPanel_scroller{max-height:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CustomRoomTagPanel .mx_AccessibleButton{margin:0 auto;width:40px;padding:10px 0 9px;position:relative}.mx_CustomRoomTagPanel .mx_BaseAvatar_image{-webkit-box-sizing:border-box;box-sizing:border-box;width:40px;height:40px}.mx_CustomRoomTagPanel .mx_AccessibleButton.CustomRoomTagPanel_tileSelected:before{content:"";height:56px;background-color:#238cf5;width:5px;position:absolute;left:-9px;border-radius:0 3px 3px 0;top:5px}.mx_FilePanel{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow-y:auto;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_FilePanel .mx_RoomView_messageListWrapper{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_FilePanel .mx_RoomView_MessageList{width:100%}.mx_FilePanel .mx_EventTile_avatar,.mx_FilePanel .mx_RoomView_MessageList h2{display:none}.mx_FilePanel .mx_EventTile{word-break:break-word;margin-top:32px}.mx_FilePanel .mx_EventTile .mx_MImageBody{margin-right:0}.mx_FilePanel .mx_EventTile .mx_MFileBody{line-height:2.4rem}.mx_FilePanel .mx_EventTile .mx_MFileBody_download{padding-top:8px;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.4rem;color:#acacac}.mx_FilePanel .mx_EventTile .mx_MFileBody_downloadLink{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;color:#747474}.mx_FilePanel .mx_EventTile .mx_MImageBody_size{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;font-size:1.4rem;text-align:right;white-space:nowrap}.mx_FilePanel .mx_EventTile_senderDetails{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:-2px}.mx_FilePanel .mx_EventTile_senderDetailsLink{text-decoration:none}.mx_FilePanel .mx_EventTile .mx_SenderProfile{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;line-height:normal;padding:0;font-size:1.4rem;opacity:1;color:#acacac}.mx_FilePanel .mx_EventTile .mx_MessageTimestamp{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;text-align:right;visibility:visible;position:static;font-size:1.4rem;opacity:1;color:#acacac}.mx_FilePanel .mx_EventTile_line{margin-right:0;padding-left:0}.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line{padding-left:0}.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line{background-color:#fff}.mx_FilePanel_empty:before{-webkit-mask-image:url(../../img/element-icons/room/files.5709c0c.svg);mask-image:url(../../img/element-icons/room/files.5709c0c.svg)}.mx_GenericErrorPage{width:100%;height:100%;background-color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_GenericErrorPage_box{display:inline;width:500px;min-height:125px;border:1px solid #f22;padding:10px 10px 20px;background-color:#fcc}.mx_GroupFilterPanel{-webkit-box-flex:1;-ms-flex:1;flex:1;background-color:hsla(0,0%,91%,.77);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;min-height:0}.mx_GroupFilterPanel_items_selected{cursor:pointer}.mx_GroupFilterPanel .mx_GroupFilterPanel_divider{height:0;width:90%;border:none;border-bottom:1px solid #8d99a5}.mx_GroupFilterPanel .mx_GroupFilterPanel_scroller{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;width:100%}.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-top:6px}.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer>div{margin:6px 0}.mx_GroupFilterPanel .mx_TagTile{position:relative}.mx_GroupFilterPanel .mx_TagTile .mx_BetaDot{position:absolute;right:-13px;top:-11px}.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_prototype{padding:3px}.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected_prototype{background-color:#fff;border-radius:6px}.mx_TagTile_selected_prototype .mx_TagTile_homeIcon:before{background-color:#2e2f32}.mx_TagTile:not(.mx_TagTile_selected_prototype) .mx_TagTile_homeIcon{background-color:rgba(92,100,112,.2);border-radius:48px}.mx_TagTile:not(.mx_TagTile_selected_prototype) .mx_TagTile_homeIcon:before{background-color:#5c6470}.mx_TagTile_homeIcon{width:32px;height:32px;position:relative}.mx_TagTile_homeIcon:before{-webkit-mask-image:url(../../img/element-icons/home.b706c0e.svg);mask-image:url(../../img/element-icons/home.b706c0e.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:21px;mask-size:21px;content:"";display:inline-block;width:32px;height:32px;position:absolute;top:calc(50% - 16px);left:calc(50% - 16px)}.mx_GroupFilterPanel .mx_TagTile_plus{margin-bottom:12px;height:32px;width:32px;border-radius:20px;background-color:rgba(92,100,112,.2);position:relative;display:block!important}.mx_GroupFilterPanel .mx_TagTile_plus:before{background-color:#5c6470;-webkit-mask-image:url(../../img/feather-customised/plus.38ae979.svg);mask-image:url(../../img/feather-customised/plus.38ae979.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;content:"";position:absolute;top:0;bottom:0;left:0;right:0}.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected:before{content:"";height:100%;background-color:#0dbd8b;width:4px;position:absolute;left:-12px;border-radius:0 3px 3px 0}.mx_GroupFilterPanel .mx_TagTile.mx_AccessibleButton:focus{-webkit-filter:none;filter:none}.mx_TagTile_tooltip{position:relative;top:-30px;left:5px}.mx_TagTile_context_button{min-width:15px;height:15px;position:absolute;right:-5px;top:-8px;border-radius:8px;background-color:#dbdbdb;color:#000;font-weight:600;font-size:1rem;text-align:center;padding-top:1px;padding-left:4px;padding-right:4px}.mx_TagTile_avatar{position:relative}.mx_TagTile_badge{position:absolute;right:-4px;top:-2px;border-radius:8px;color:#fff;font-weight:600;font-size:1.4rem;padding:0 5px;background-color:#61708b}.mx_TagTile_badgeHighlight{background-color:#ff4b55}.mx_GroupView{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden}.mx_GroupView_error{margin:auto}.mx_GroupView_header{min-height:52px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;padding-bottom:10px;padding-left:19px}.mx_GroupView_header_view{border-bottom:1px solid transparent;padding-bottom:0;padding-right:8px}.mx_GroupView_header_avatar,.mx_GroupView_header_info{display:table-cell;vertical-align:middle}.mx_GroupHeader_button{position:relative;margin-left:5px;margin-right:5px;cursor:pointer;height:20px;width:20px}.mx_GroupHeader_button:before{content:"";position:absolute;height:20px;width:20px;background-color:#91a1c0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_GroupHeader_editButton:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_GroupHeader_shareButton:before{-webkit-mask-image:url(../../img/element-icons/room/share.54dc3fb.svg);mask-image:url(../../img/element-icons/room/share.54dc3fb.svg)}.mx_GroupView_hostingSignup img{margin-left:5px}.mx_GroupView_editable{border-bottom:1px solid #c7c7c7!important;min-width:150px;cursor:text}.mx_GroupView_editable:focus{border-bottom:1px solid #0dbd8b!important;outline:none;-webkit-box-shadow:none;box-shadow:none}.mx_GroupView_header_isUserMember .mx_GroupView_header_name:hover div:not(.mx_GroupView_editable){color:#0dbd8b;cursor:pointer}.mx_GroupView_avatarPicker{position:relative}.mx_GroupView_avatarPicker_edit{position:absolute;top:50px;left:15px}.mx_GroupView_avatarPicker .mx_Spinner{width:48px;height:48px!important}.mx_GroupView_header_leftCol{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden}.mx_GroupView_header_rightCol{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_GroupView_textButton{display:inline-block}.mx_GroupView_header_groupid{font-weight:400;font-size:medium;padding-left:10px}.mx_GroupView_header_name{vertical-align:middle;width:100%;height:31px;color:#2e2f32;font-weight:700;font-size:2.2rem;padding-right:16px}.mx_GroupView_header_name,.mx_GroupView_header_shortDesc{overflow:hidden;padding-left:19px;text-overflow:ellipsis;border-bottom:1px solid transparent}.mx_GroupView_header_shortDesc{vertical-align:bottom;float:left;max-height:42px;color:#a2a2a2;font-weight:300;font-size:1.3rem;margin-right:16px}.mx_GroupView_avatarPicker_label{cursor:pointer}.mx_GroupView_cancelButton{padding-left:8px}.mx_GroupView_cancelButton img{position:relative;top:5px}.mx_GroupView input[type=radio]{margin:10px 10px 0}.mx_GroupView_label_text{display:inline-block;max-width:80%;vertical-align:.1em;line-height:2em}.mx_GroupView_body{margin:0 24px}.mx_GroupView_body,.mx_GroupView_rooms{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_GroupView_rooms{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_GroupView h3{text-transform:uppercase;color:#3d3b39;font-weight:600;font-size:1.3rem;margin-bottom:10px}.mx_GroupView_rooms_header .mx_AccessibleButton{padding-left:14px;margin-bottom:14px;height:24px}.mx_GroupView_group{border-top:1px solid transparent}.mx_GroupView_group_disabled{opacity:.3;pointer-events:none}.mx_GroupView_rooms_header_addRow_button{display:inline-block}.mx_GroupView_rooms_header_addRow_button object{pointer-events:none}.mx_GroupView_rooms_header_addRow_label{display:inline-block;vertical-align:top;line-height:2.4rem;padding-left:28px;color:#0dbd8b}.mx_GroupView_rooms .mx_RoomDetailList{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;border-top:1px solid transparent;padding-top:10px;word-break:break-word}.mx_GroupView .mx_RoomView_messageListWrapper{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_GroupView_membershipSection{color:#888;margin-top:10px}.mx_GroupView_membershipSubSection{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;display:-webkit-box;display:-ms-flexbox;display:flex;padding-bottom:8px}.mx_GroupView_membershipSubSection .mx_Spinner{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_GroupView_membershipSection_description{line-height:3.4rem}.mx_GroupView_membershipSection_description .mx_BaseAvatar{margin-right:10px}.mx_GroupView_membershipSection .mx_GroupView_textButton{margin-right:0;margin-top:0;margin-left:8px}.mx_GroupView_memberSettings_toggle label{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_GroupView_memberSettings input{margin-right:6px}.mx_GroupView_featuredThings{margin-top:20px}.mx_GroupView_featuredThings_header{font-weight:700;font-size:120%;margin-bottom:20px}.mx_GroupView_featuredThings_category{font-weight:700;font-size:110%;margin-top:10px}.mx_GroupView_featuredThings_container{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_GroupView_featuredThing,.mx_GroupView_featuredThings_addButton{display:table-cell;text-align:center;width:100px;margin:0 20px}.mx_GroupView_featuredThing{position:relative}.mx_GroupView_featuredThing .mx_GroupView_featuredThing_deleteButton{position:absolute;top:-7px;right:11px;opacity:.4}.mx_GroupView_featuredThing .mx_BaseAvatar{vertical-align:baseline;vertical-align:initial}.mx_GroupView_featuredThings_addButton object{pointer-events:none}.mx_GroupView_featuredThing_name{word-wrap:break-word}.mx_GroupView_uploadInput{display:none}.mx_GroupView_body .mx_AutoHideScrollbar>*{margin:11px 50px 50px 68px}.mx_GroupView_groupDesc textarea{width:100%;max-width:100%;height:150px}.mx_GroupView_changeDelayWarning,.mx_GroupView_groupDesc_placeholder{background-color:#f7f7f7;color:#888;border-radius:10px;text-align:center;margin:20px 0}.mx_GroupView_groupDesc_placeholder{padding:100px 20px;cursor:pointer}.mx_GroupView_changeDelayWarning{padding:40px 20px}.mx_GroupView .mx_MemberInfo .mx_AutoHideScrollbar>:not(.mx_MemberInfo_avatar){padding-left:16px;padding-right:16px}.mx_HeaderButtons{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomHeader_buttons+.mx_HeaderButtons:before{content:unset}.mx_HeaderButtons:before{content:"";background-color:#91a1c0;opacity:.5;margin:6px 8px;border-radius:1px;width:1px}.mx_HomePage{max-width:960px;width:100%;height:100%;margin-left:auto;margin-right:auto}.mx_HomePage_default{text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_HomePage_default .mx_HomePage_default_wrapper{margin:auto}.mx_HomePage_default img{height:48px}.mx_HomePage_default h1{font-weight:600;font-size:3.2rem;line-height:4.4rem;margin-bottom:4px}.mx_HomePage_default h4{margin-top:4px;font-weight:600;font-size:1.8rem;line-height:2.5rem;color:#61708b}.mx_HomePage_default .mx_MiniAvatarUploader{margin:0 auto}.mx_HomePage_default .mx_HomePage_default_buttons{margin:60px auto 0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton{padding:73px 8px 15px;width:160px;height:132px;margin:20px;position:relative;display:inline-block;border-radius:8px;vertical-align:top;word-break:break-word;-webkit-box-sizing:border-box;box-sizing:border-box;font-weight:600;font-size:1.5rem;line-height:2rem;color:#fff;background-color:#0dbd8b}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton:before{top:20px;left:60px;width:40px;height:40px;content:"";position:absolute;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_sendDm:before{-webkit-mask-image:url(../../img/element-icons/feedback.a91241e.svg);mask-image:url(../../img/element-icons/feedback.a91241e.svg)}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_explore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg)}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_createGroup:before{-webkit-mask-image:url(../../img/element-icons/community-members.cbb31c1.svg);mask-image:url(../../img/element-icons/community-members.cbb31c1.svg)}.mx_LeftPanel{background-color:hsla(0,0%,96.1%,.9);min-width:206px;max-width:50%;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_LeftPanel .mx_LeftPanel_GroupFilterPanelContainer{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;-ms-flex-preferred-size:56px;flex-basis:56px;height:100%;-ms-flex-direction:column;flex-direction:column}.mx_LeftPanel .mx_LeftPanel_GroupFilterPanelContainer,.mx_LeftPanel .mx_LeftPanel_roomListContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal}.mx_LeftPanel .mx_LeftPanel_roomListContainer{background-color:hsla(0,0%,96.1%,.9);-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;min-width:0;-ms-flex-direction:column;flex-direction:column}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_userHeader{padding:12px;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer{overflow-y:hidden;overflow-x:scroll;margin:12px 12px 0;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_leftOverflow{-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(5%,#000));-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%);mask-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(5%,#000));mask-image:linear-gradient(90deg,transparent,#000 5%)}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_rightOverflow{-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(#000),color-stop(95%,#000),to(transparent));-webkit-mask-image:linear-gradient(90deg,#000,#000 95%,transparent);mask-image:-webkit-gradient(linear,left top,right top,from(#000),color-stop(95%,#000),to(transparent));mask-image:linear-gradient(90deg,#000,#000 95%,transparent)}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow{-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(5%,#000),color-stop(95%,#000),to(transparent));-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(5%,#000),color-stop(95%,#000),to(transparent));mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer{margin-left:12px;margin-right:12px;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch_focused+.mx_LeftPanel_exploreButton,.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch_hasQuery+.mx_LeftPanel_exploreButton{-ms-flex-preferred-size:0;flex-basis:0;margin:0;width:0}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch_focused+.mx_LeftPanel_exploreButton:before,.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch_hasQuery+.mx_LeftPanel_exploreButton:before{content:none}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton{width:32px;height:32px;border-radius:8px;background-color:rgba(141,151,165,.2);position:relative;margin-left:8px}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton:before{content:"";position:absolute;top:8px;left:8px;width:16px;height:16px;-webkit-mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#737d8c}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton.mx_LeftPanel_exploreButton_space:before{-webkit-mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg);mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg)}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListFilterCount{font-size:1.3rem;font-weight:600;margin-left:12px;margin-top:14px;margin-bottom:-4px}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper{overflow:hidden;margin-top:10px;-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper.mx_LeftPanel_roomListWrapper_stickyBottom{padding-bottom:32px}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper.mx_LeftPanel_roomListWrapper_stickyTop{padding-top:32px}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_actualRoomListContainer{position:relative;height:100%}.mx_LeftPanel.mx_LeftPanel_minimized{min-width:unset;width:unset!important}.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer{width:68px}.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer .mx_LeftPanel_userHeader{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton{margin-left:0;margin-top:8px;background-color:transparent}.mx_LeftPanelWidget{margin-left:8px;margin-bottom:4px}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:24px;color:#8d99a5;margin-top:4px}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_stickable{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_headerText{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:calc(100% - 16px);line-height:1.6rem;font-size:1.3rem;font-weight:600;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_headerText .mx_LeftPanelWidget_collapseBtn{display:inline-block;position:relative;width:14px;height:14px;margin-right:6px}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_headerText .mx_LeftPanelWidget_collapseBtn:before{content:"";width:18px;height:18px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#8d99a5;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_headerText .mx_LeftPanelWidget_collapseBtn.mx_LeftPanelWidget_collapseBtn_collapsed:before{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.mx_LeftPanelWidget .mx_LeftPanelWidget_resizeBox{position:relative;-ms-flex-direction:column;flex-direction:column;overflow:visible}.mx_LeftPanelWidget .mx_AppTileFullWidth,.mx_LeftPanelWidget .mx_LeftPanelWidget_resizeBox{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal}.mx_LeftPanelWidget .mx_AppTileFullWidth{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;overflow:hidden;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-mask-image:linear-gradient(0deg,transparent,#000 4px);mask-image:linear-gradient(0deg,transparent,#000 4px)}.mx_LeftPanelWidget .mx_LeftPanelWidget_resizerHandle{cursor:ns-resize;border-radius:3px;width:unset!important;height:4px!important;position:absolute;top:-24px!important;left:calc(50% - 32px)!important;right:calc(50% - 32px)!important}.mx_LeftPanelWidget:hover .mx_LeftPanelWidget_resizerHandle{opacity:.8;background-color:#2e2f32}.mx_LeftPanelWidget .mx_LeftPanelWidget_maximizeButton{margin-left:8px;margin-right:7px;position:relative;width:24px;height:24px;border-radius:32px}.mx_LeftPanelWidget .mx_LeftPanelWidget_maximizeButton:before{content:"";width:16px;height:16px;position:absolute;top:4px;left:4px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/feather-customised/maximise.dc32127.svg);mask-image:url(../../img/feather-customised/maximise.dc32127.svg);background:#61708b}.mx_LeftPanelWidget_maximizeButtonTooltip{margin-top:-3px}.mx_MainSplit{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;min-width:0;min-height:0;height:100%}.mx_MainSplit>.mx_RightPanel_ResizeWrapper{padding:5px;margin-left:8px;height:calc(100vh - 51px)}.mx_MainSplit>.mx_RightPanel_ResizeWrapper:hover .mx_RightPanel_ResizeHandle{top:50%!important;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:64px!important;width:4px!important;border-radius:4px!important;background-color:#2e2f32;opacity:.8}.mx_MatrixChat_splash{position:relative;height:100%}.mx_MatrixChat_splashButtons{text-align:center;width:100%;position:absolute;bottom:30px}.mx_MatrixChat_wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%}.mx_MatrixToolbar{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;height:40px}.mx_MatrixChat{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-box-flex:1;-ms-flex:1;flex:1;min-height:0}.mx_MatrixChat_syncError{color:#fff;background-color:#df2a8b;border-radius:5px;display:table;padding:30px;position:absolute;top:100px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.mx_MatrixChat>:not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle){background-color:#fff;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0;height:100%}.mx_MatrixChat>.mx_ResizeHandle_horizontal:hover{position:relative}.mx_MatrixChat>.mx_ResizeHandle_horizontal:hover:before{position:absolute;left:6px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:64px;width:4px;border-radius:4px;content:" ";background-color:#2e2f32;opacity:.8}.mx_MyGroups{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_MyGroups .mx_BetaCard{margin:0 72px;max-width:760px}.mx_MyGroups .mx_RoomHeader_simpleHeader{margin-left:0}.mx_MyGroups_header{margin-left:2px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mx_MyGroups>:not(.mx_RoomHeader):not(.mx_BetaCard){max-width:960px;margin:40px}.mx_MyGroups_headerCard{-webkit-box-flex:1;-ms-flex:1 0 50%;flex:1 0 50%;margin-bottom:30px;min-width:400px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-right:13px;height:40px;width:40px;border-radius:20px;background-color:rgba(92,100,112,.2);position:relative}.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button:before{background-color:#5c6470;-webkit-mask:url(../../img/icons-create-room.817ede2.svg);mask:url(../../img/icons-create-room.817ede2.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:80%;mask-size:80%;content:"";position:absolute;top:0;bottom:0;left:0;right:0}.mx_MyGroups_headerCard_header{font-weight:700;margin-bottom:10px}.mx_MyGroups_headerCard_content{padding-right:15px}.mx_MyGroups_joinBox{visibility:hidden;height:0;margin:0}.mx_MyGroups_content{margin-left:2px;-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow-y:auto}.mx_MyGroups_scrollable{overflow-y:inherit}.mx_MyGroups_placeholder{background-color:#f7f7f7;color:#888;line-height:40rem;border-radius:10px;text-align:center}.mx_MyGroups_joinedGroups{border-top:1px solid transparent;overflow-x:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-line-pack:start;align-content:flex-start}.mx_MyGroups_joinedGroups .mx_GroupTile{min-width:300px;max-width:33%;-webkit-box-flex:1;-ms-flex:1 0 300px;flex:1 0 300px;height:75px;margin:10px 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;cursor:pointer}.mx_GroupTile_avatar{cursor:-webkit-grab,-webkit-grab;cursor:grab,-webkit-grab}.mx_GroupTile_profile{margin-left:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_GroupTile_profile .mx_GroupTile_desc,.mx_GroupTile_profile .mx_GroupTile_groupId,.mx_GroupTile_profile .mx_GroupTile_name{padding-right:10px}.mx_GroupTile_profile .mx_GroupTile_name{margin:0;font-size:1.5rem}.mx_GroupTile_profile .mx_GroupTile_groupId{font-size:1.3rem;opacity:.7}.mx_GroupTile_profile .mx_GroupTile_desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:1.3rem;max-height:36px;overflow:hidden}.mx_NonUrgentToastContainer{position:absolute;bottom:30px;left:28px;z-index:101}.mx_NonUrgentToastContainer .mx_NonUrgentToastContainer_toast{padding:10px 12px;border-radius:8px;width:320px;font-size:1.3rem;margin-top:8px;background-color:#17191c;color:#fff}.mx_NotificationPanel{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow-y:auto;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_NotificationPanel .mx_RoomView_messageListWrapper{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_NotificationPanel .mx_RoomView_MessageList{width:100%}.mx_NotificationPanel .mx_RoomView_MessageList h2{margin-left:0}.mx_NotificationPanel .mx_EventTile{word-break:break-word;position:relative;padding-bottom:18px}.mx_NotificationPanel .mx_EventTile:not(.mx_EventTile_last):not(.mx_EventTile_lastInSection):after{position:absolute;bottom:0;left:0;right:0;background-color:#8d99a5;height:1px;opacity:.4;content:""}.mx_NotificationPanel .mx_EventTile_roomName{font-weight:700;font-size:1.4rem}.mx_NotificationPanel .mx_EventTile_roomName>*{vertical-align:middle}.mx_NotificationPanel .mx_EventTile_roomName>.mx_BaseAvatar{margin-right:8px}.mx_NotificationPanel .mx_EventTile_roomName a{color:#2e2f32}.mx_NotificationPanel .mx_EventTile_avatar{display:none}.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp,.mx_NotificationPanel .mx_EventTile .mx_SenderProfile{color:#2e2f32;font-size:1.2rem;display:inline;padding-left:0}.mx_NotificationPanel .mx_EventTile_senderDetails{padding-left:36px;position:relative}.mx_NotificationPanel .mx_EventTile_senderDetails a{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_NotificationPanel .mx_EventTile_roomName a,.mx_NotificationPanel .mx_EventTile_senderDetails a{text-decoration:none!important}.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp{visibility:visible;position:static;display:inline}.mx_NotificationPanel .mx_EventTile_line{margin-right:0;padding:0 0 0 36px}.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line{padding-left:0}.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line{background-color:#fff}.mx_NotificationPanel .mx_EventTile_content{margin-right:0}.mx_NotificationPanel_empty:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_RightPanel{overflow-x:hidden;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-radius:8px;padding:4px 0;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%}.mx_RightPanel .mx_RoomView_MessageList{padding:14px 18px}.mx_RightPanel_header{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;border-bottom:1px solid transparent;-webkit-box-flex:0;-ms-flex:0 0 52px;flex:0 0 52px}.mx_RightPanel_headerButtonGroup{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;background-color:#fff;padding:0 9px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RightPanel_headerButton{cursor:pointer;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-left:1px;margin-right:1px;height:32px;width:32px;position:relative;border-radius:100%}.mx_RightPanel_headerButton:before{content:"";position:absolute;top:4px;left:4px;height:24px;width:24px;background-color:#c1c6cd;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_RightPanel_headerButton:hover{background:rgba(13,189,139,.1)}.mx_RightPanel_headerButton:hover:before{background-color:#0dbd8b}.mx_RightPanel_notifsButton:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg);-webkit-mask-position:center;mask-position:center}.mx_RightPanel_roomSummaryButton:before{-webkit-mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);-webkit-mask-position:center;mask-position:center}.mx_RightPanel_groupMembersButton:before{-webkit-mask-image:url(../../img/element-icons/community-members.cbb31c1.svg);mask-image:url(../../img/element-icons/community-members.cbb31c1.svg);-webkit-mask-position:center;mask-position:center}.mx_RightPanel_roomsButton:before{-webkit-mask-image:url(../../img/element-icons/community-rooms.8f0b6c9.svg);mask-image:url(../../img/element-icons/community-rooms.8f0b6c9.svg);-webkit-mask-position:center;mask-position:center}.mx_RightPanel_headerButton_highlight:before{background-color:#0dbd8b!important}.mx_RightPanel_headerButton_badge{font-size:.8rem;border-radius:8px;color:#fff;background-color:#0dbd8b;font-weight:700;position:absolute;top:-4px;left:20px;padding:2px 4px}.mx_RightPanel_collapsebutton{-webkit-box-flex:1;-ms-flex:1;flex:1;text-align:right;height:16px;border:none}.mx_RightPanel .mx_GroupRoomList,.mx_RightPanel .mx_MemberInfo,.mx_RightPanel .mx_MemberList,.mx_RightPanel_blank{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_RightPanel .mx_RoomView_messagePanelSpinner{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;margin:auto}.mx_RightPanel_empty{margin-right:-28px}.mx_RightPanel_empty h2{font-weight:700;margin:16px 0}.mx_RightPanel_empty h2,.mx_RightPanel_empty p{font-size:1.4rem}.mx_RightPanel_empty:before{content:"";display:block;margin:11px auto 29px;height:42px;width:42px;background-color:#91a1c0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}.mx_RightPanel_scopeHeader{margin:24px;text-align:center;font-weight:600;font-size:1.8rem;line-height:2.2rem}.mx_RightPanel_scopeHeader .mx_BaseAvatar{margin-right:8px;vertical-align:middle}.mx_RightPanel_scopeHeader .mx_BaseAvatar_image{border-radius:8px}.mx_RoomDirectory_dialogWrapper>.mx_Dialog{max-width:960px;height:100%}.mx_RoomDirectory_dialog{height:100%;flex-direction:column}.mx_RoomDirectory,.mx_RoomDirectory_dialog{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column}.mx_RoomDirectory{margin-bottom:12px;color:#2e2f32;word-break:break-word}.mx_RoomDirectory,.mx_RoomDirectory_list{flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_RoomDirectory_list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column}.mx_RoomDirectory_list .mx_RoomView_messageListWrapper{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_RoomDirectory_listheader{display:block;margin-top:13px}.mx_RoomDirectory_searchbox{-webkit-box-flex:1!important;-ms-flex:1!important;flex:1!important}.mx_RoomDirectory_listheader .mx_NetworkDropdown{-webkit-box-flex:0;-ms-flex:0 0 200px;flex:0 0 200px}.mx_RoomDirectory_tableWrapper{overflow-y:auto;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_RoomDirectory_table{color:#2e2f32;display:grid;font-size:1.2rem;grid-template-columns:-webkit-max-content auto -webkit-max-content -webkit-max-content -webkit-max-content;grid-template-columns:max-content auto max-content max-content max-content;grid-row-gap:24px;row-gap:24px;text-align:left;width:100%}.mx_RoomDirectory_roomAvatar{padding:2px 14px 0 0}.mx_RoomDirectory_roomMemberCount{-ms-flex-item-align:center;align-self:center;color:#747474;padding:3px 10px 0}.mx_RoomDirectory_roomMemberCount:before{background-color:#747474;display:inline-block;vertical-align:text-top;margin-right:2px;content:"";-webkit-mask:url(../../img/feather-customised/user.7a4d23d.svg);mask:url(../../img/feather-customised/user.7a4d23d.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:80%;mask-size:80%;width:16px;height:16px}.mx_RoomDirectory_join,.mx_RoomDirectory_preview{-ms-flex-item-align:center;align-self:center;white-space:nowrap}.mx_RoomDirectory_name{display:inline-block;font-size:1.8rem;font-weight:600}.mx_RoomDirectory_perms{display:inline-block}.mx_RoomDirectory_perm{border-radius:10px;display:inline-block;height:20px;line-height:2rem;padding:0 5px;color:#fff;background-color:#aaa}.mx_RoomDirectory_topic{cursor:auto;color:#747474;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}.mx_RoomDirectory_alias{font-size:1.2rem;color:#a2a2a2}.mx_RoomDirectory_table tr{padding-bottom:10px;cursor:pointer}.mx_RoomDirectory .mx_RoomView_MessageList{padding:0}.mx_RoomDirectory>span{font-size:1.5rem;margin-top:0}.mx_RoomDirectory>span .mx_AccessibleButton{padding:0}.mx_RoomSearch{-webkit-box-flex:1;-ms-flex:1;flex:1;border-radius:8px;background-color:rgba(141,151,165,.2);border:1px solid transparent;height:28px;padding:1px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomSearch .mx_RoomSearch_icon{width:16px;height:16px;-webkit-mask:url(../../img/element-icons/roomlist/search.3774248.svg);mask:url(../../img/element-icons/roomlist/search.3774248.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#737d8c;margin-left:7px}.mx_RoomSearch .mx_RoomSearch_input{border:none!important;-webkit-box-flex:1!important;-ms-flex:1!important;flex:1!important;color:#2e2f32!important;padding:0;height:100%;width:100%;font-size:1.2rem;line-height:1.6rem}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-webkit-input-placeholder{color:#8d99a5!important}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-moz-placeholder{color:#8d99a5!important}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded):-ms-input-placeholder{color:#8d99a5!important}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-ms-input-placeholder{color:#8d99a5!important}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::placeholder{color:#8d99a5!important}.mx_RoomSearch.mx_RoomSearch_hasQuery{border-color:#737d8c}.mx_RoomSearch.mx_RoomSearch_focused{-webkit-box-shadow:0 0 4px 4px rgba(0,132,255,.5);box-shadow:0 0 4px 4px rgba(0,132,255,.5);border-color:transparent}.mx_RoomSearch.mx_RoomSearch_focused,.mx_RoomSearch.mx_RoomSearch_hasQuery{background-color:#fff}.mx_RoomSearch.mx_RoomSearch_focused .mx_RoomSearch_clearButton,.mx_RoomSearch.mx_RoomSearch_hasQuery .mx_RoomSearch_clearButton{width:16px;height:16px;-webkit-mask-image:url(../../img/element-icons/roomlist/search-clear.6164d97.svg);mask-image:url(../../img/element-icons/roomlist/search-clear.6164d97.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#737d8c;margin-right:8px}.mx_RoomSearch .mx_RoomSearch_clearButton{width:0;height:0}.mx_RoomSearch.mx_RoomSearch_minimized{border-radius:32px;height:auto;width:auto;padding:8px}.mx_RoomSearch.mx_RoomSearch_minimized .mx_RoomSearch_icon{margin-left:0}.mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages){margin-left:65px;min-height:50px}.mx_RoomStatusBar_typingIndicatorAvatars{width:52px;margin-top:-1px;text-align:left}.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_image{margin-right:-12px;border:1px solid #fff}.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_initial{padding-left:1px;padding-top:1px}.mx_RoomStatusBar_typingIndicatorRemaining{display:inline-block;color:#acacac;background-color:#ddd;border:1px solid #fff;border-radius:40px;width:24px;height:24px;line-height:2.4rem;font-size:.8em;vertical-align:top;text-align:center;position:absolute}.mx_RoomStatusBar_scrollDownIndicator{cursor:pointer;padding-left:1px}.mx_RoomStatusBar_unreadMessagesBar{padding-top:10px;color:#ff4b55;cursor:pointer}.mx_RoomStatusBar_connectionLostBar{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:19px;min-height:58px}.mx_RoomStatusBar_unsentMessages>div[role=alert]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:70px;margin:12px;padding-left:16px;background-color:#f3f8fd;border-radius:4px}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge{margin-right:12px}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge .mx_NotificationBadge{width:24px!important;height:24px!important;border-radius:24px!important}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge .mx_NotificationBadge .mx_NotificationBadge_count{font-size:1.6rem!important}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentTitle{color:#ff4b55;font-size:1.5rem}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentDescription{font-size:1.2rem}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;text-align:right;margin-right:22px;color:#61708b}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton{padding:5px 10px 5px 28px;display:inline-block;position:relative}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton:nth-child(2){border-left:1px solid #e3e8f0}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton:before{content:"";position:absolute;left:10px;background-color:#61708b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton.mx_RoomStatusBar_unsentCancelAllBtn:before{-webkit-mask-image:url(../../img/element-icons/trashcan.26f6c28.svg);mask-image:url(../../img/element-icons/trashcan.26f6c28.svg);width:12px;height:16px;top:calc(50% - 8px)}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton.mx_RoomStatusBar_unsentResendAllBtn{padding-left:34px}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton.mx_RoomStatusBar_unsentResendAllBtn:before{-webkit-mask-image:url(../../img/element-icons/retry.6cd23ad.svg);mask-image:url(../../img/element-icons/retry.6cd23ad.svg);width:18px;height:18px;top:calc(50% - 9px)}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_InlineSpinner{vertical-align:middle;margin-right:5px;top:1px}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_InlineSpinner+span{margin-right:10px}.mx_RoomStatusBar_connectionLostBar img{padding-left:10px;padding-right:10px;vertical-align:middle;float:left}.mx_RoomStatusBar_connectionLostBar_title{color:#ff4b55}.mx_RoomStatusBar_connectionLostBar_desc{color:#2e2f32;font-size:1.3rem;opacity:.5;padding-bottom:20px}.mx_RoomStatusBar_resend_link{color:#2e2f32!important;text-decoration:underline!important;cursor:pointer}.mx_RoomStatusBar_typingBar{height:50px;line-height:5rem;color:#2e2f32;opacity:.5;overflow-y:hidden;display:block}.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages){min-height:40px}.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_indicator{margin-top:10px}.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_typingBar{height:40px;line-height:4rem}.mx_RoomView{word-wrap:break-word;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@-webkit-keyframes mx_RoomView_fileDropTarget_animation{0%{opacity:0}to{opacity:.95}}@keyframes mx_RoomView_fileDropTarget_animation{0%{opacity:0}to{opacity:.95}}.mx_RoomView_fileDropTarget{min-width:0;width:100%;height:100%;font-size:1.8rem;text-align:center;pointer-events:none;background-color:#fff;opacity:.95;position:absolute;z-index:3000;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-animation:mx_RoomView_fileDropTarget_animation;animation:mx_RoomView_fileDropTarget_animation;-webkit-animation-duration:.5s;animation-duration:.5s}@-webkit-keyframes mx_RoomView_fileDropTarget_image_animation{0%{width:0}to{width:32px}}@keyframes mx_RoomView_fileDropTarget_image_animation{0%{width:0}to{width:32px}}.mx_RoomView_fileDropTarget_image{-webkit-animation:mx_RoomView_fileDropTarget_image_animation;animation:mx_RoomView_fileDropTarget_image_animation;-webkit-animation-duration:.5s;animation-duration:.5s;margin-bottom:16px}.mx_RoomView_auxPanel{min-width:0;width:100%;margin:0 auto;overflow:auto;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_RoomView_auxPanel_fullHeight{position:absolute;top:0;bottom:0;left:0;right:0;z-index:3000;background-color:#fff}.mx_RoomView_auxPanel_hiddenHighlights{border-bottom:1px solid transparent;padding:10px 26px;color:#ff4b55;cursor:pointer}.mx_RoomView_auxPanel_apps{max-width:1920px!important}.mx_RoomView .mx_MainSplit,.mx_RoomView_messagePanel{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_RoomView_messagePanel{width:100%;overflow-y:auto;overflow-anchor:none}.mx_RoomView_messagePanelSearchSpinner{-webkit-box-flex:1;-ms-flex:1;flex:1;background-image:url(../../img/typing-indicator-2x.0eb9f0e.gif);background-position:center 367px;background-size:25px;background-repeat:no-repeat;position:relative}.mx_RoomView_messagePanelSearchSpinner:before{background-color:#888;-webkit-mask:url(../../img/feather-customised/search-input.044bfa7.svg);mask:url(../../img/feather-customised/search-input.044bfa7.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:50px;mask-size:50px;content:"";position:absolute;top:286px;left:0;right:0;height:50px}.mx_RoomView_body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.mx_RoomView_body .mx_RoomView_messagePanel,.mx_RoomView_body .mx_RoomView_messagePanelSearchSpinner,.mx_RoomView_body .mx_RoomView_messagePanelSpinner{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.mx_RoomView_body .mx_RoomView_timeline{position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_RoomView_statusArea{width:100%;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;max-height:0;background-color:#fff;z-index:1000;overflow:hidden;-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.mx_RoomView_statusArea_expanded{max-height:100px}.mx_RoomView_statusAreaBox{margin:auto;min-height:50px}.mx_RoomView_statusAreaBox_line{margin-left:65px;border-top:1px solid transparent;height:1px}.mx_RoomView_messageListWrapper{min-height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_RoomView_searchResultsPanel a{text-decoration:none;color:inherit}.mx_RoomView_empty{font-size:1.3rem;padding:0 24px;margin-right:30px;text-align:center;margin-bottom:80px}.mx_RoomView_MessageList{list-style-type:none;padding:18px;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_RoomView_MessageList li{clear:both}li.mx_RoomView_myReadMarker_container{height:0;margin:0;padding:0;border:0}hr.mx_RoomView_myReadMarker{border-top:1px solid #0dbd8b;border-bottom:1px solid #0dbd8b;margin-top:0;position:relative;top:-1px;z-index:1;-webkit-transition:width easeinsine .4s 1s,opacity easeinsine .4s 1s;transition:width easeinsine .4s 1s,opacity easeinsine .4s 1s;width:99%;opacity:1}.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner{background-color:#fff}.mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename{color:#fff;opacity:1}.mx_RoomView_inCall .mx_RoomView_statusAreaBox_line{margin-top:2px;border:none;height:0}.mx_RoomView_inCall .mx_MessageComposer_wrapper{border-top:2px hidden;padding-top:1px}.mx_RoomView_voipChevron{position:absolute;bottom:-11px;right:11px}.mx_RoomView_voipButton{float:right;margin-right:13px;margin-top:13px;cursor:pointer}.mx_RoomView_voipButton object{pointer-events:none}.mx_RoomView .mx_MessageComposer{width:100%;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-right:2px}.mx_RoomView_ongoingConfCallNotification{width:100%;text-align:center;background-color:#ff4b55;color:#fff;font-weight:700;padding:6px 0;cursor:pointer}.mx_RoomView_ongoingConfCallNotification a{color:#fff!important}.mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList{margin-bottom:4px}.mx_MatrixChat_useCompactLayout .mx_RoomView_statusAreaBox{min-height:42px}.mx_ScrollPanel .mx_RoomView_MessageList{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_SearchBox{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0}.mx_SearchBox.mx_SearchBox_blurred:not(:hover){background-color:transparent}.mx_SearchBox .mx_SearchBox_closeButton{cursor:pointer;background-image:url(../../img/icons-close.11ff07c.svg);background-repeat:no-repeat;width:16px;height:16px;background-position:50%;padding:9px}.mx_SpacePanel{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;background-color:hsla(0,0%,91%,.77);padding:0;margin:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow-y:auto}.mx_SpacePanel .mx_SpacePanel_spaceTreeWrapper{-webkit-box-flex:1;-ms-flex:1;flex:1;padding:8px 8px 16px 0}.mx_SpacePanel .mx_SpacePanel_toggleCollapse{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:40px;height:40px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:32px;mask-size:32px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;margin-left:16px;margin-bottom:12px;background-color:#8d99a5;-webkit-mask-image:url(../../img/element-icons/expand-space-panel.e6f74b9.svg);mask-image:url(../../img/element-icons/expand-space-panel.e6f74b9.svg)}.mx_SpacePanel .mx_SpacePanel_toggleCollapse.expanded{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.mx_SpacePanel ul{margin:0;list-style:none;padding:0}.mx_SpacePanel ul>.mx_SpaceItem{padding-left:16px}.mx_SpacePanel .mx_SpaceButton_toggleCollapse{cursor:pointer}.mx_SpacePanel .mx_SpaceTreeLevel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-width:250px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_SpacePanel .mx_SpaceItem{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-flow:wrap;flex-flow:wrap}.mx_SpacePanel .mx_SpaceItem.mx_SpaceItem_narrow{-ms-flex-item-align:baseline;align-self:baseline}.mx_SpacePanel .mx_SpaceItem.collapsed>.mx_SpaceButton>.mx_SpaceButton_toggleCollapse{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.mx_SpacePanel .mx_SpaceItem.collapsed>.mx_SpaceTreeLevel{display:none}.mx_SpacePanel .mx_SpaceItem:not(.hasSubSpaces)>.mx_SpaceButton{margin-left:16px;min-width:40px}.mx_SpacePanel .mx_SpaceButton{border-radius:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:4px 4px 4px 0;width:100%}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper{background-color:#fff}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active.mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper{padding:1px;border:3px solid #737d8c}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_selectionWrapper{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:12px;padding:4px}.mx_SpacePanel .mx_SpaceButton:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper{width:100%;padding-right:16px;overflow:hidden}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_name{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-left:8px;white-space:nowrap;display:block;text-overflow:ellipsis;overflow:hidden;padding-right:8px;font-size:1.4rem;line-height:1.8rem}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_toggleCollapse{width:16px;height:20px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:20px;mask-size:20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#8d99a5;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon{width:32px;min-width:32px;height:32px;border-radius:8px;position:relative}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon:before{position:absolute;content:"";width:32px;height:32px;top:0;left:0;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:18px;mask-size:18px}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon{background-color:#fff}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon:before{background-color:#3f3d3d;-webkit-mask-image:url(../../img/element-icons/home.b706c0e.svg);mask-image:url(../../img/element-icons/home.b706c0e.svg)}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_new .mx_SpaceButton_icon{background-color:#0dbd8b;-webkit-transition:all .1s ease-in-out;transition:all .1s ease-in-out}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_new .mx_SpaceButton_icon:before{background-color:#fff;-webkit-mask-image:url(../../img/element-icons/plus.62cc275.svg);mask-image:url(../../img/element-icons/plus.62cc275.svg);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_newCancel .mx_SpaceButton_icon{background-color:#c1c6cd}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_newCancel .mx_SpaceButton_icon:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.mx_SpacePanel .mx_SpaceButton .mx_BaseAvatar_image{border-radius:8px}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton{width:20px;min-width:20px;height:20px;margin-top:auto;margin-bottom:auto;display:none;position:absolute;right:4px}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton:before{top:2px;left:2px;content:"";width:16px;height:16px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);background:#2e2f32}.mx_SpacePanel .mx_SpacePanel_badgeContainer{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge{margin:0 2px}.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge_dot{margin:0 7px}.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer{right:0;top:0}.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer .mx_NotificationBadge{background-clip:padding-box}.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer .mx_NotificationBadge_dot{margin:0 -1px 0 0;border:3px solid hsla(0,0%,91%,.77)}.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer .mx_NotificationBadge_2char,.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer .mx_NotificationBadge_3char{margin:-5px -5px 0 0;border:2px solid hsla(0,0%,91%,.77)}.mx_SpacePanel.collapsed .mx_SpaceButton.mx_SpaceButton_active .mx_SpacePanel_badgeContainer{right:-3px;top:-3px}.mx_SpacePanel:not(.collapsed) .mx_SpacePanel_badgeContainer{position:absolute;right:4px}.mx_SpacePanel:not(.collapsed) .mx_SpaceButton:focus-within:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpacePanel_badgeContainer,.mx_SpacePanel:not(.collapsed) .mx_SpaceButton:hover:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpacePanel_badgeContainer,.mx_SpacePanel:not(.collapsed) .mx_SpaceButton_hasMenuOpen:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpacePanel_badgeContainer{width:0;height:0;display:none}.mx_SpacePanel:not(.collapsed) .mx_SpaceButton:focus-within:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton,.mx_SpacePanel:not(.collapsed) .mx_SpaceButton:hover:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton,.mx_SpacePanel:not(.collapsed) .mx_SpaceButton_hasMenuOpen:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton{display:block}.mx_SpacePanel>.mx_AutoHideScrollbar>.mx_SpaceButton,.mx_SpacePanel>.mx_AutoHideScrollbar>.mx_SpaceButton.mx_SpaceButton_active:before{height:32px}.mx_SpacePanel>.mx_AutoHideScrollbar>ul{padding-left:0}.mx_SpacePanel_contextMenu .mx_SpacePanel_contextMenu_header{margin:12px 16px;font-weight:600;font-size:1.5rem;line-height:1.8rem}.mx_SpacePanel_contextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton{color:#0dbd8b}.mx_SpacePanel_contextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton .mx_SpacePanel_iconInvite:before{background-color:#0dbd8b;-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconSettings:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconLeave:before{-webkit-mask-image:url(../../img/element-icons/leave.bb917e7.svg);mask-image:url(../../img/element-icons/leave.bb917e7.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconMembers:before{-webkit-mask-image:url(../../img/element-icons/room/members.88c3e93.svg);mask-image:url(../../img/element-icons/room/members.88c3e93.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconPlus:before{-webkit-mask-image:url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);mask-image:url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconHash:before{-webkit-mask-image:url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);mask-image:url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconExplore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg);mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg)}.mx_SpacePanel_sharePublicSpace{margin:0}.mx_SpaceRoomDirectory_dialogWrapper>.mx_Dialog{max-width:960px;height:100%}.mx_SpaceRoomDirectory{height:100%;margin-bottom:12px;color:#2e2f32;word-break:break-word;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_SpaceRoomDirectory,.mx_SpaceRoomDirectory .mx_Dialog_title,.mx_SpaceRoomView_landing .mx_Dialog_title{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_SpaceRoomDirectory .mx_Dialog_title .mx_BaseAvatar,.mx_SpaceRoomView_landing .mx_Dialog_title .mx_BaseAvatar{margin-right:12px;-ms-flex-item-align:center;align-self:center}.mx_SpaceRoomDirectory .mx_Dialog_title .mx_BaseAvatar_image,.mx_SpaceRoomView_landing .mx_Dialog_title .mx_BaseAvatar_image{border-radius:8px}.mx_SpaceRoomDirectory .mx_Dialog_title>div>h1,.mx_SpaceRoomView_landing .mx_Dialog_title>div>h1{font-weight:600;font-size:1.8rem;line-height:2.2rem;margin:0}.mx_SpaceRoomDirectory .mx_Dialog_title>div>div,.mx_SpaceRoomView_landing .mx_Dialog_title>div>div{font-weight:400;color:#737d8c;font-size:1.5rem;line-height:2.4rem}.mx_SpaceRoomDirectory .mx_AccessibleButton_kind_link,.mx_SpaceRoomView_landing .mx_AccessibleButton_kind_link{padding:0}.mx_SpaceRoomDirectory .mx_SearchBox,.mx_SpaceRoomView_landing .mx_SearchBox{margin:24px 0 16px}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_noResults,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_noResults{text-align:center}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_noResults>div,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_noResults>div{font-size:1.5rem;line-height:2.4rem;color:#737d8c}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:32px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.5rem;line-height:2.4rem;color:#2e2f32}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton{padding:4px 12px;font-weight:400}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton+.mx_AccessibleButton,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton+.mx_AccessibleButton{margin-left:16px}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton_kind_danger_outline,.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton_kind_primary_outline,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton_kind_danger_outline,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton_kind_primary_outline{padding:3px 12px}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader>span,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader>span{margin-left:auto}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_error,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_error{position:relative;font-weight:600;color:#ff4b55;font-size:1.5rem;line-height:1.8rem;margin:20px auto 12px;padding-left:24px;width:-webkit-max-content;width:-moz-max-content;width:max-content}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_error:before,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_error:before{content:"";position:absolute;height:16px;width:16px;left:0;background-image:url(../../img/element-icons/warning-badge.de1033e.svg)}.mx_SpaceRoomDirectory_list{margin-top:16px;padding-bottom:40px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomCount>h3{display:inline;font-weight:600;font-size:1.8rem;line-height:2.2rem;color:#2e2f32}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomCount>span{margin-left:8px;font-size:1.5rem;line-height:2.4rem;color:#737d8c}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace .mx_BaseAvatar_image{border-radius:8px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle{position:absolute;left:-1px;top:10px;height:16px;width:16px;border-radius:4px;background-color:#fff}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle:before{content:"";position:absolute;top:0;left:0;height:16px;width:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#8d99a5;-webkit-mask-size:16px;mask-size:16px;-webkit-transform:rotate(270deg);transform:rotate(270deg);-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle.mx_SpaceRoomDirectory_subspace_toggle_shown:before{-webkit-transform:rotate(0deg);transform:rotate(0deg)}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_children{position:relative;padding-left:12px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile{position:relative;padding:8px 16px;border-radius:8px;min-height:56px;-webkit-box-sizing:border-box;box-sizing:border-box;display:grid;grid-template-columns:20px auto -webkit-max-content;grid-template-columns:20px auto max-content;grid-column-gap:8px;grid-row-gap:6px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_BaseAvatar{grid-row:1;grid-column:1}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_name{font-weight:600;font-size:1.5rem;line-height:1.8rem;grid-row:1;grid-column:2}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_name .mx_InfoTooltip{display:inline;margin-left:12px;color:#8d99a5;font-size:1.2rem;line-height:1.5rem}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_name .mx_InfoTooltip .mx_InfoTooltip_icon{margin-right:4px;position:relative;vertical-align:text-top}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_name .mx_InfoTooltip .mx_InfoTooltip_icon:before{position:absolute;top:0;left:0}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_info{font-size:1.4rem;line-height:1.8rem;color:#737d8c;grid-row:2;grid-column:1/3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions{text-align:right;margin-left:20px;grid-column:3;grid-row:1/3}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions .mx_AccessibleButton{line-height:2.4rem;padding:4px 16px;display:inline-block;visibility:hidden}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions .mx_AccessibleButton_kind_danger_outline,.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions .mx_AccessibleButton_kind_primary_outline{padding:3px 16px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions .mx_Checkbox{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;margin-left:12px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:hover{background-color:hsla(0,0%,91%,.77)}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:hover .mx_AccessibleButton{visibility:visible}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:before,.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_children:before{content:"";position:absolute;background-color:hsla(0,0%,91%,.77);width:1px;height:100%;left:6px;top:0}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_actions .mx_SpaceRoomDirectory_actionsText{font-weight:400;font-size:1.2rem;line-height:1.5rem;color:#737d8c}.mx_SpaceRoomDirectory_list>hr{border:none;height:1px;background-color:rgba(141,151,165,.2);margin:20px 0}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_createRoom{display:block;margin:16px auto 0;width:-webkit-max-content;width:-moz-max-content;width:max-content}.mx_SpaceRoomView .mx_MainSplit>div:first-child{padding:80px 60px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-height:100%;overflow-y:auto}.mx_SpaceRoomView .mx_MainSplit>div:first-child h1{margin:0;font-size:2.4rem;font-weight:600;color:#2e2f32;width:-webkit-max-content;width:-moz-max-content;width:max-content}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_description{font-size:1.5rem;color:#737d8c;margin-top:12px;margin-bottom:24px;max-width:428px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_AddExistingToSpace{max-width:428px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_AddExistingToSpace .mx_AddExistingToSpace_content{height:calc(100vh - 360px);max-height:400px}.mx_SpaceRoomView .mx_MainSplit>div:first-child:not(.mx_SpaceRoomView_landing) .mx_SpaceFeedbackPrompt{width:428px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_buttons{display:block;margin-top:44px;width:428px;text-align:right}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_buttons .mx_AccessibleButton_hasKind{padding:8px 22px;margin-left:16px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_buttons input.mx_AccessibleButton{border:none}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_Field{max-width:428px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_Field+.mx_Field{margin-top:28px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_errorText{font-weight:600;font-size:1.2rem;line-height:1.5rem;color:#ff4b55;margin-bottom:28px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_AccessibleButton_disabled{cursor:not-allowed}.mx_SpaceRoomView .mx_SpaceRoomView_preview{padding:32px 24px!important;margin:auto;max-width:480px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:2px 15px 30px rgba(0,0,0,.48);box-shadow:2px 15px 30px rgba(0,0,0,.48);border-radius:8px;position:relative}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_BetaCard_betaPill{position:absolute;right:24px;top:32px}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_spaceBetaPrompt{font-weight:600;font-size:1.4rem;line-height:2.4rem;color:#2e2f32;margin-top:24px;position:relative;padding-left:24px}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_spaceBetaPrompt .mx_AccessibleButton_kind_link{display:inline;padding:0;font-size:inherit;line-height:inherit}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_spaceBetaPrompt:before{content:"";position:absolute;height:2.4rem;width:20px;left:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);background-color:#737d8c}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:20px;font-size:1.5rem}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter>div{margin-left:8px}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter>div .mx_SpaceRoomView_preview_inviter_name{line-height:1.8rem}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter>div .mx_SpaceRoomView_preview_inviter_mxid{line-height:2.4rem;color:#737d8c}.mx_SpaceRoomView .mx_SpaceRoomView_preview>.mx_BaseAvatar>.mx_BaseAvatar_image,.mx_SpaceRoomView .mx_SpaceRoomView_preview>.mx_BaseAvatar_image{border-radius:12px}.mx_SpaceRoomView .mx_SpaceRoomView_preview h1.mx_SpaceRoomView_preview_name{margin:20px 0!important}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_topic{font-size:1.4rem;line-height:2.2rem;color:#737d8c;margin:20px 0;max-height:160px;overflow-y:auto}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_joinButtons{margin-top:20px}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_joinButtons .mx_AccessibleButton{width:200px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:14px 0}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_joinButtons .mx_AccessibleButton+.mx_AccessibleButton{margin-left:20px}.mx_SpaceRoomView .mx_SpaceRoomView_landing>.mx_BaseAvatar>.mx_BaseAvatar_image,.mx_SpaceRoomView .mx_SpaceRoomView_landing>.mx_BaseAvatar_image{border-radius:12px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name{margin:24px 0 16px;font-size:1.5rem;color:#737d8c}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name>span{display:inline-block}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name .mx_SpaceRoomView_landing_nameRow{margin-top:12px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name .mx_SpaceRoomView_landing_nameRow>h1{display:inline-block}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name .mx_SpaceRoomView_landing_inviter .mx_BaseAvatar{margin-right:4px;vertical-align:middle}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_info{display:inline-block;margin:0 auto 0 0}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_FacePile{display:inline-block;margin-right:12px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_FacePile .mx_FacePile_faces{cursor:pointer}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_landing_inviteButton{position:relative;padding:4px 18px 4px 40px;line-height:2.4rem;height:-webkit-min-content;height:-moz-min-content;height:min-content}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_landing_inviteButton:before{position:absolute;content:"";left:8px;height:16px;width:16px;background:#fff;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_landing_settingsButton{position:relative;margin-left:16px;width:24px;height:24px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_landing_settingsButton:before{position:absolute;content:"";left:0;top:0;height:24px;width:24px;background:#8d99a5;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_topic{font-size:1.5rem;margin-top:12px;margin-bottom:16px}.mx_SpaceRoomView .mx_SpaceRoomView_landing>hr{border:none;height:1px;background-color:hsla(0,0%,91%,.77)}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SearchBox{margin:0 0 20px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceFeedbackPrompt{margin-bottom:16px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceFeedbackPrompt+hr{display:none}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton{position:relative;padding:16px 32px 16px 72px;width:432px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;border:1px solid #e7e7e7;font-size:1.5rem;margin:20px 0}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton>h3{font-weight:600;margin:0 0 4px}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton>span{color:#737d8c}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton:before{position:absolute;content:"";width:32px;height:32px;top:24px;left:20px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px;mask-size:24px;background-color:#8d99a5}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton:hover{border-color:#0dbd8b}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton:hover:before{background-color:#0dbd8b}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton:hover>span{color:#2e2f32}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope .mx_SpaceRoomView_privateScope_justMeButton:before{-webkit-mask-image:url(../../img/element-icons/room/members.88c3e93.svg);mask-image:url(../../img/element-icons/room/members.88c3e93.svg)}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope .mx_SpaceRoomView_privateScope_meAndMyTeammatesButton:before{-webkit-mask-image:url(../../img/element-icons/community-members.cbb31c1.svg);mask-image:url(../../img/element-icons/community-members.cbb31c1.svg)}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_betaDisclaimer{padding:58px 16px 16px;position:relative;border-radius:8px;background-color:#f3f8fd;max-width:428px;margin:20px 0 30px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_betaDisclaimer .mx_BetaCard_betaPill{position:absolute;left:16px;top:16px}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons{color:#737d8c;margin-top:28px}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_AccessibleButton{position:relative;display:inline-block;padding-left:32px;line-height:24px}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_AccessibleButton:before{content:"";position:absolute;height:24px;width:24px;top:0;left:0;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_AccessibleButton+.mx_AccessibleButton{margin-left:32px}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_SpaceRoomView_inviteTeammates_inviteDialogButton:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_SpaceRoomView_info{color:#737d8c;font-size:1.5rem;line-height:2.4rem;margin:20px 0}.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private,.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public{padding-left:20px;position:relative}.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private:before,.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public:before{position:absolute;content:"";width:20px;height:20px;top:0;left:-2px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#8d99a5}.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public:before{-webkit-mask-size:12px;mask-size:12px;-webkit-mask-image:url(../../img/globe.8201f08.svg);mask-image:url(../../img/globe.8201f08.svg)}.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private:before{-webkit-mask-size:14px;mask-size:14px;-webkit-mask-image:url(../../img/element-icons/lock.1f264bd.svg);mask-image:url(../../img/element-icons/lock.1f264bd.svg)}.mx_SpaceRoomView_info .mx_AccessibleButton_kind_link{color:inherit;position:relative;padding-left:16px}.mx_SpaceRoomView_info .mx_AccessibleButton_kind_link:before{content:"·";position:absolute;left:6px}.mx_SpaceFeedbackPrompt{margin-top:18px;margin-bottom:12px}.mx_SpaceFeedbackPrompt>hr{border:none;border-top:1px solid #e7e7e7;margin-bottom:12px}.mx_SpaceFeedbackPrompt>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;font-size:1.5rem;line-height:2.4rem}.mx_SpaceFeedbackPrompt>div>span{color:#737d8c;position:relative;padding-left:32px;font-size:inherit;line-height:inherit;margin-right:auto}.mx_SpaceFeedbackPrompt>div>span:before{content:"";position:absolute;left:0;top:2px;height:20px;width:20px;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);-webkit-mask-position:center;mask-position:center}.mx_SpaceFeedbackPrompt>div .mx_AccessibleButton_kind_link{color:#0dbd8b;position:relative;padding:0 0 0 24px;margin-left:8px;font-size:inherit;line-height:inherit}.mx_SpaceFeedbackPrompt>div .mx_AccessibleButton_kind_link:before{content:"";position:absolute;left:0;height:16px;width:16px;background-color:#0dbd8b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);mask-image:url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);-webkit-mask-position:center;mask-position:center}.mx_TabbedView{padding:0 0 0 16px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:absolute;top:0;bottom:0;left:0;right:0;margin:8px 0 0}.mx_TabbedView_tabLabels{width:170px;max-width:170px;color:#45474a;position:fixed}.mx_TabbedView_tabLabel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:text-top;cursor:pointer;padding:8px 0;border-radius:8px;font-size:1.3rem;position:relative}.mx_TabbedView_tabLabel_active{background-color:#0dbd8b;color:#fff}.mx_TabbedView_maskedIcon{margin-left:8px;margin-right:16px;width:16px;height:16px;display:inline-block}.mx_TabbedView_maskedIcon:before{display:inline-block;background-color:#454545;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:16px;mask-size:16px;width:16px;height:16px;-webkit-mask-position:center;mask-position:center;content:""}.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon:before{background-color:#fff}.mx_TabbedView_tabLabel_text{vertical-align:middle}.mx_TabbedView_tabPanel{margin-left:240px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_TabbedView_tabPanel,.mx_TabbedView_tabPanelContent{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;min-height:0}.mx_TabbedView_tabPanelContent{overflow:auto}.mx_ToastContainer{position:absolute;top:0;left:70px;z-index:101;padding:4px;display:grid;grid-template-rows:1fr 14px 6px}.mx_ToastContainer.mx_ToastContainer_stacked:before{content:"";margin:0 4px;grid-row:2/4}.mx_ToastContainer .mx_Toast_toast,.mx_ToastContainer.mx_ToastContainer_stacked:before{grid-column:1;background-color:#f2f5f8;-webkit-box-shadow:0 4px 20px rgba(0,0,0,.5);box-shadow:0 4px 20px rgba(0,0,0,.5);border-radius:8px}.mx_ToastContainer .mx_Toast_toast{grid-row:1/3;color:#2e2f32;overflow:hidden;display:grid;grid-template-columns:22px 1fr;grid-column-gap:8px;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;grid-row-gap:4px;row-gap:4px;padding:8px}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon:after,.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon:before{content:"";width:22px;height:22px;grid-column:1;grid-row:1;-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-size:100%;background-repeat:no-repeat}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification:after{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);background-color:#2e2f32}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification_warning:before{background-color:#fff;-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);-webkit-mask-size:90%;mask-size:90%}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification_warning:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_secure_backup:after{-webkit-mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);background-color:#2e2f32}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_body,.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_title{grid-column:2}.mx_ToastContainer .mx_Toast_toast:not(.mx_Toast_hasIcon){padding-left:12px}.mx_ToastContainer .mx_Toast_toast:not(.mx_Toast_hasIcon) .mx_Toast_title{grid-column:1/-1}.mx_ToastContainer .mx_Toast_toast .mx_Toast_description,.mx_ToastContainer .mx_Toast_toast .mx_Toast_title{padding-right:8px}.mx_ToastContainer .mx_Toast_toast .mx_Toast_title{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_ToastContainer .mx_Toast_toast .mx_Toast_title h2{grid-column:1/3;grid-row:1;margin:0;font-size:1.5rem;font-weight:600;display:inline;width:auto;vertical-align:middle}.mx_ToastContainer .mx_Toast_toast .mx_Toast_title span{padding-left:8px;float:right;font-size:1.2rem;line-height:2.2rem;color:#61708b}.mx_ToastContainer .mx_Toast_toast .mx_Toast_body{grid-column:1/3;grid-row:2}.mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons{float:right;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons .mx_FormButton{min-width:96px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_ToastContainer .mx_Toast_toast .mx_Toast_description{max-width:272px;overflow:hidden;text-overflow:ellipsis;margin:4px 0 11px;font-size:1.2rem}.mx_ToastContainer .mx_Toast_toast .mx_Toast_description .mx_AccessibleButton_kind_link{font-size:inherit;padding:0}.mx_ToastContainer .mx_Toast_toast .mx_Toast_description a{text-decoration:none}.mx_ToastContainer .mx_Toast_toast .mx_Toast_detail{color:#737d8c}.mx_ToastContainer .mx_Toast_toast .mx_Toast_deviceID{font-size:1rem}.mx_UploadBar{padding-left:65px;position:relative}.mx_UploadBar .mx_ProgressBar{width:calc(100% - 40px)}.mx_UploadBar_filename{margin-top:5px;color:#61708b;position:relative;padding-left:22px;font-size:1.5rem;vertical-align:middle}.mx_UploadBar_filename:before{content:"";height:18px;width:18px;left:0;-webkit-mask-image:url(../../img/element-icons/upload.e2a53e0.svg);mask-image:url(../../img/element-icons/upload.e2a53e0.svg)}.mx_UploadBar_cancel,.mx_UploadBar_filename:before{position:absolute;top:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#61708b}.mx_UploadBar_cancel{right:0;height:16px;width:16px;margin-right:16px;-webkit-mask-image:url(../../img/icons-close.11ff07c.svg);mask-image:url(../../img/icons-close.11ff07c.svg)}.mx_UserMenu{padding-right:6px}.mx_UserMenu.mx_UserMenu_prototype{margin-bottom:6px;padding-right:0}.mx_UserMenu.mx_UserMenu_prototype .mx_UserMenu_headerButtons{margin-right:2px}.mx_UserMenu.mx_UserMenu_prototype:after{content:"";border-bottom:1px solid #2e2f32;opacity:.2;display:block;padding-top:8px}.mx_UserMenu .mx_UserMenu_headerButtons{width:16px;height:16px;position:relative;display:block}.mx_UserMenu .mx_UserMenu_headerButtons:before{content:"";width:16px;height:16px;position:absolute;top:0;left:0;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#8d99a5;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_UserMenu .mx_UserMenu_row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userAvatarContainer{position:relative;margin-right:8px;height:32px;padding:3px 0}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userAvatarContainer .mx_UserMenu_userAvatar{border-radius:32px;-o-object-fit:cover;object-fit:cover}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_subUserName,.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_userName{display:block}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_subUserName{color:#61708b;font-size:1.3rem;line-height:1.8rem;-webkit-box-flex:1;-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userName{font-weight:600;font-size:1.5rem;line-height:2rem;-webkit-box-flex:1;-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd{width:24px;height:24px;margin-right:8px;position:relative}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd:before{content:"";position:absolute;width:24px;height:24px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#61708b}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd.mx_UserMenu_dnd_noisy:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd.mx_UserMenu_dnd_muted:before{-webkit-mask-image:url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);mask-image:url(../../img/element-icons/roomlist/notifications-off.0c57561.svg)}.mx_UserMenu.mx_UserMenu_minimized{padding-right:0}.mx_UserMenu.mx_UserMenu_minimized .mx_UserMenu_userAvatarContainer{margin-right:0}.mx_UserMenu_contextMenu{width:258px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype{padding-bottom:16px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype .mx_UserMenu_contextMenu_header{padding-bottom:0;padding-top:16px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype .mx_UserMenu_contextMenu_header:nth-child(n+2){padding-top:8px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype hr{width:85%;opacity:.2;border:none;border-bottom:1px solid #2e2f32}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu>.mx_IconizedContextMenu_optionList{margin-top:4px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu>.mx_IconizedContextMenu_optionList:before{border:none}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu>.mx_IconizedContextMenu_optionList>.mx_AccessibleButton{padding-top:2px;padding-bottom:2px}.mx_UserMenu_contextMenu.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_AccessibleButton{padding-top:16px;padding-bottom:16px}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header{padding:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:calc(100% - 40px)}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name *{-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name .mx_UserMenu_contextMenu_displayName{font-weight:700;font-size:1.5rem;line-height:2rem}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name .mx_UserMenu_contextMenu_userId{font-size:1.5rem;line-height:2.4rem}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_themeButton{min-width:32px;max-width:32px;width:32px;height:32px;margin-left:8px;border-radius:32px;background-color:#e3e8f0;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts,.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_hostingLink{padding-top:0}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts{display:inline-block}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts>span{font-weight:600;display:block}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts>span+span{margin-top:8px}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts .mx_AccessibleButton_kind_link{font-weight:400;font-size:inherit;padding:0}.mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon{width:16px;height:16px;display:block}.mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon:before{content:"";width:16px;height:16px;display:block;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#2e2f32}.mx_UserMenu_contextMenu .mx_UserMenu_iconHome:before{-webkit-mask-image:url(../../img/element-icons/roomlist/home.1b4edd5.svg);mask-image:url(../../img/element-icons/roomlist/home.1b4edd5.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconHosting:before{-webkit-mask-image:url(../../img/element-icons/brands/element.182040d.svg);mask-image:url(../../img/element-icons/brands/element.182040d.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconBell:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconLock:before{-webkit-mask-image:url(../../img/element-icons/security.66f2fa6.svg);mask-image:url(../../img/element-icons/security.66f2fa6.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconSettings:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconArchive:before{-webkit-mask-image:url(../../img/element-icons/roomlist/archived.226584d.svg);mask-image:url(../../img/element-icons/roomlist/archived.226584d.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconMessage:before{-webkit-mask-image:url(../../img/element-icons/roomlist/feedback.b9a3f53.svg);mask-image:url(../../img/element-icons/roomlist/feedback.b9a3f53.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconSignOut:before{-webkit-mask-image:url(../../img/element-icons/leave.bb917e7.svg);mask-image:url(../../img/element-icons/leave.bb917e7.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconMembers:before{-webkit-mask-image:url(../../img/element-icons/room/members.88c3e93.svg);mask-image:url(../../img/element-icons/room/members.88c3e93.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconInvite:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_ViewSource_separator{clear:both;border-bottom:1px solid #e5e5e5;padding-top:.7em;padding-bottom:.7em}.mx_ViewSource_heading{font-size:1.7rem;font-weight:400;color:#2e2f32;margin-top:.7em}.mx_ViewSource pre{text-align:left;font-size:1.2rem;padding:.5em 1em;word-wrap:break-word;white-space:pre-wrap}.mx_ViewSource_details{margin-top:.8em}.mx_CompleteSecurity_header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CompleteSecurity_headerIcon{width:24px;height:24px;margin-right:4px;position:relative}.mx_CompleteSecurity_heroIcon{width:128px;height:128px;position:relative;margin:0 auto}.mx_CompleteSecurity_body{font-size:1.5rem}.mx_CompleteSecurity_waiting{color:#8d99a5}.mx_CompleteSecurity_actionRow{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin-top:2.8rem}.mx_CompleteSecurity_actionRow .mx_AccessibleButton{-webkit-margin-start:18px;margin-inline-start:18px}.mx_CompleteSecurity_actionRow .mx_AccessibleButton.warning{color:#ff4b55}.mx_Login_submit{vertical-align:middle;border:0;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;padding:7px 1.5em;cursor:pointer;display:inline-block;outline:none;width:100%;margin-top:24px;margin-bottom:24px;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center}.mx_Login_submit:disabled{opacity:.3;cursor:default}.mx_Login_loader{display:inline;position:relative;top:2px;left:8px}.mx_Login_loader .mx_Spinner{display:inline}.mx_Login_loader .mx_Spinner img{width:16px;height:16px}.mx_Login_error{color:#ff4b55;font-weight:700;text-align:center;margin-top:12px;margin-bottom:12px}.mx_Login_error.mx_Login_serverError{text-align:left;font-weight:400}.mx_Login_error.mx_Login_serverError.mx_Login_serverErrorNonFatal{color:#ff8d13}.mx_Login_type_container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#232f32}.mx_Login_type_container .mx_Field{margin:0}.mx_Login_type_label{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_Login_underlinedServerName{width:-webkit-max-content;width:-moz-max-content;width:max-content;border-bottom:1px dashed #0dbd8b}div.mx_AccessibleButton_kind_link.mx_Login_forgot{display:block;margin:0 auto;font-size:inherit;padding:0}div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled{cursor:not-allowed}.mx_AuthBody{width:500px;font-size:1.2rem;color:#61708b;background-color:#fff;border-radius:0 4px 4px 0;padding:25px 60px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_AuthBody h2{font-size:2.4rem;font-weight:600;margin-top:8px;color:#232f32}.mx_AuthBody h3{font-size:1.4rem;font-weight:600;color:#61708b}.mx_AuthBody h3.mx_AuthBody_centered{text-align:center}.mx_AuthBody a:hover,.mx_AuthBody a:link,.mx_AuthBody a:visited{color:#0dbd8b;text-decoration:none}.mx_AuthBody input[type=password],.mx_AuthBody input[type=text]{color:#232f32}.mx_AuthBody .mx_Field input,.mx_AuthBody .mx_Field select{color:#232f32;background-color:#fff}.mx_AuthBody .mx_Field label{color:#232f32}.mx_AuthBody .mx_Field input:not(:-moz-placeholder-shown)+label,.mx_AuthBody .mx_Field textarea:not(:-moz-placeholder-shown)+label{background-color:#fff}.mx_AuthBody .mx_Field input:not(:-ms-input-placeholder)+label,.mx_AuthBody .mx_Field textarea:not(:-ms-input-placeholder)+label{background-color:#fff}.mx_AuthBody .mx_Field_labelAlwaysTopLeft label,.mx_AuthBody .mx_Field input:focus+label,.mx_AuthBody .mx_Field input:not(:placeholder-shown)+label,.mx_AuthBody .mx_Field select+label,.mx_AuthBody .mx_Field textarea:focus+label,.mx_AuthBody .mx_Field textarea:not(:placeholder-shown)+label{background-color:#fff}.mx_AuthBody input.error{color:#ff4b55}.mx_AuthBody .mx_Field input{-webkit-box-sizing:border-box;box-sizing:border-box}.mx_AuthBody .mx_Field_select:before{background-color:#232f32}.mx_AuthBody .mx_Dropdown{color:#232f32}.mx_AuthBody .mx_Dropdown_arrow{background:#232f32}.mx_AuthBody .mx_Dropdown_menu{background-color:#fff}.mx_AuthBody .mx_Dropdown_menu .mx_Dropdown_option_highlight{background-color:#ddd}.mx_AuthBody_fieldRow{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:10px}.mx_AuthBody_fieldRow>.mx_Field{margin:0 5px}.mx_AuthBody_fieldRow>.mx_Field:first-child{margin-left:0}.mx_AuthBody_fieldRow>.mx_Field:last-child{margin-right:0}.mx_AuthBody_paddedFooter{height:80px;padding-top:28px;text-align:center}.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_title{margin-top:16px;font-size:1.5rem;line-height:2.4rem}.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_title .mx_InlineSpinner img{vertical-align:sub;margin-right:5px}.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_subtitle{margin-top:8px;font-size:1rem;line-height:1.4rem}.mx_AuthBody_changeFlow{display:block;text-align:center;width:100%}.mx_AuthBody_changeFlow>a{font-weight:600}.mx_SSOButtons+.mx_AuthBody_changeFlow{margin-top:24px}.mx_AuthBody_spinner{margin:1em 0}@media only screen and (max-width:480px){.mx_AuthBody{border-radius:4px;width:auto;max-width:500px;padding:10px}}.mx_AuthButtons{min-height:24px;height:unset!important;padding-top:13px!important;padding-bottom:14px!important;-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.mx_AuthButtons_loginButton_wrapper{text-align:center;width:100%}.mx_AuthButtons_loginButton,.mx_AuthButtons_registerButton{margin-top:3px;height:40px;border:0;border-radius:40px;margin-left:4px;margin-right:4px;min-width:80px;background-color:#0dbd8b;color:#fff;cursor:pointer;font-size:1.5rem;padding:0 11px;word-break:break-word}.mx_AuthFooter{text-align:center;width:100%;font-size:1.4rem;opacity:.72;padding:20px 0;background:-webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.8)));background:linear-gradient(transparent,rgba(0,0,0,.8))}.mx_AuthFooter a:hover,.mx_AuthFooter a:link,.mx_AuthFooter a:visited{color:#fff;margin:0 22px}.mx_AuthHeader{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:206px;padding:25px;-webkit-box-sizing:border-box;box-sizing:border-box}@media only screen and (max-width:480px){.mx_AuthHeader{display:none}}.mx_AuthHeaderLogo{margin-top:15px;-webkit-box-flex:1;-ms-flex:1;flex:1;padding:0 25px}.mx_AuthHeaderLogo img{width:100%}@media only screen and (max-width:480px){.mx_AuthHeaderLogo{display:none}}.mx_AuthPage{width:100%;min-height:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background-color:#2e3649}.mx_AuthPage,.mx_AuthPage_modal{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_AuthPage_modal{margin:100px auto auto;border-radius:4px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.33);box-shadow:0 2px 4px 0 rgba(0,0,0,.33);background-color:hsla(0,0%,96.1%,.9)}@media only screen and (max-width:480px){.mx_AuthPage_modal{margin-top:0}}.mx_CompleteSecurityBody{width:600px;color:#232f32;background-color:#fff;border-radius:4px;padding:20px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_CompleteSecurityBody h2{font-size:2.4rem;font-weight:600;margin-top:0}.mx_CompleteSecurityBody h3{font-size:1.4rem;font-weight:600}.mx_CompleteSecurityBody a:hover,.mx_CompleteSecurityBody a:link,.mx_CompleteSecurityBody a:visited{color:#0dbd8b;text-decoration:none}.mx_CountryDropdown .mx_Dropdown_input .mx_Dropdown_option{padding:0 3px}.mx_CountryDropdown .mx_Dropdown_arrow{padding-right:3px}.mx_CountryDropdown_shortOption{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:100%}.mx_CountryDropdown_option,.mx_CountryDropdown_shortOption{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CountryDropdown_option{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_InteractiveAuthEntryComponents_emailWrapper{padding-right:100px;position:relative;margin-top:32px;margin-bottom:32px}.mx_InteractiveAuthEntryComponents_emailWrapper:after,.mx_InteractiveAuthEntryComponents_emailWrapper:before{position:absolute;width:116px;height:116px;content:"";right:-10px}.mx_InteractiveAuthEntryComponents_emailWrapper:before{background-color:rgba(244,246,250,.91);border-radius:50%;top:-20px}.mx_InteractiveAuthEntryComponents_emailWrapper:after{background-image:url(../../img/element-icons/email-prompt.1d04dfe.svg);background-repeat:no-repeat;background-position:50%;background-size:contain;top:-25px}.mx_InteractiveAuthEntryComponents_msisdnWrapper{text-align:center}.mx_InteractiveAuthEntryComponents_msisdnEntry{font-size:200%;font-weight:700;border:1px solid #c7c7c7;border-radius:3px;width:6em}.mx_InteractiveAuthEntryComponents_msisdnEntry:focus{border:1px solid #0dbd8b}.mx_InteractiveAuthEntryComponents_msisdnSubmit{margin-top:4px;margin-bottom:5px}.mx_InteractiveAuthEntryComponents_termsSubmit{margin-top:20px;margin-bottom:5px;display:block;width:100%}.mx_InteractiveAuthEntryComponents_msisdnSubmit:disabled{background-color:#747474;cursor:default}.mx_InteractiveAuthEntryComponents_termsSubmit:disabled{background-color:#92caad;cursor:default}.mx_InteractiveAuthEntryComponents_termsPolicy{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_InteractiveAuthEntryComponents_passwordSection{width:300px}.mx_InteractiveAuthEntryComponents_sso_buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin-top:20px}.mx_InteractiveAuthEntryComponents_sso_buttons .mx_AccessibleButton{margin-left:5px}.mx_AuthBody_language{width:100%}.mx_AuthBody_language .mx_Dropdown_input{border:none;font-size:1.4rem;font-weight:600;color:#4e5054;width:auto}.mx_AuthBody_language .mx_Dropdown_arrow{background:#4e5054}progress.mx_PassphraseField_progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;border:0;height:4px;position:absolute;top:-12px;border-radius:"2px"}progress.mx_PassphraseField_progress::-moz-progress-bar{border-radius:"2px"}progress.mx_PassphraseField_progress::-webkit-progress-bar,progress.mx_PassphraseField_progress::-webkit-progress-value{border-radius:"2px"}progress.mx_PassphraseField_progress{color:#ff4b55}progress.mx_PassphraseField_progress::-moz-progress-bar{background-color:#ff4b55}progress.mx_PassphraseField_progress::-webkit-progress-value{background-color:#ff4b55}progress.mx_PassphraseField_progress[value="2"],progress.mx_PassphraseField_progress[value="3"]{color:#ff812d}progress.mx_PassphraseField_progress[value="2"]::-moz-progress-bar,progress.mx_PassphraseField_progress[value="3"]::-moz-progress-bar{background-color:#ff812d}progress.mx_PassphraseField_progress[value="2"]::-webkit-progress-value,progress.mx_PassphraseField_progress[value="3"]::-webkit-progress-value{background-color:#ff812d}progress.mx_PassphraseField_progress[value="4"]{color:#0dbd8b}progress.mx_PassphraseField_progress[value="4"]::-moz-progress-bar{background-color:#0dbd8b}progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value{background-color:#0dbd8b}.mx_Welcome{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_Welcome.mx_WelcomePage_registrationDisabled .mx_ButtonCreateAccount{display:none}.mx_Welcome .mx_AuthBody_language{width:160px;margin-bottom:10px}.mx_BaseAvatar{position:relative;display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_BaseAvatar_initial{position:absolute;left:0;color:#fff;text-align:center;speak:none;pointer-events:none;font-weight:400}.mx_BaseAvatar_image{-o-object-fit:cover;object-fit:cover;border-radius:125px;vertical-align:top;background-color:#fff}.mx_DecoratedRoomAvatar,.mx_ExtraTile{position:relative}.mx_DecoratedRoomAvatar.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar,.mx_ExtraTile.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar{-webkit-mask-image:url(../../img/element-icons/roomlist/decorated-avatar-mask.76c407f.svg);mask-image:url(../../img/element-icons/roomlist/decorated-avatar-mask.76c407f.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon{position:absolute;bottom:-2px;right:-2px;margin:4px;width:8px;height:8px;border-radius:50%}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon:before{content:"";width:8px;height:8px;position:absolute;border-radius:8px}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_globe:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_globe:before{-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#737d8c;-webkit-mask-image:url(../../img/globe.8201f08.svg);mask-image:url(../../img/globe.8201f08.svg)}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_offline:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_offline:before{background-color:#e3e8f0}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_online:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_online:before{background-color:#0dbd8b}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_away:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_away:before{background-color:#d9b072}.mx_DecoratedRoomAvatar .mx_NotificationBadge,.mx_DecoratedRoomAvatar .mx_RoomTile_badgeContainer,.mx_ExtraTile .mx_NotificationBadge,.mx_ExtraTile .mx_RoomTile_badgeContainer{position:absolute;top:0;right:0;height:18px;width:18px}.mx_MessageComposer_avatar .mx_BaseAvatar{padding:2px;border:1px solid transparent;border-radius:100%}.mx_MessageComposer_avatar .mx_BaseAvatar_initial{left:2px}.mx_MemberStatusMessageAvatar_hasStatus .mx_BaseAvatar{border-color:#0dbd8b}@-webkit-keyframes shadow-pulse{0%{-webkit-box-shadow:0 0 0 0 rgba(13,189,139,.2);box-shadow:0 0 0 0 rgba(13,189,139,.2)}to{-webkit-box-shadow:0 0 0 6px rgba(13,189,139,0);box-shadow:0 0 0 6px rgba(13,189,139,0)}}@keyframes shadow-pulse{0%{-webkit-box-shadow:0 0 0 0 rgba(13,189,139,.2);box-shadow:0 0 0 0 rgba(13,189,139,.2)}to{-webkit-box-shadow:0 0 0 6px rgba(13,189,139,0);box-shadow:0 0 0 6px rgba(13,189,139,0)}}.mx_PulsedAvatar img{-webkit-animation:shadow-pulse 1s infinite;animation:shadow-pulse 1s infinite}.mx_WidgetAvatar{border-radius:4px}.mx_BetaCard{margin-bottom:20px;padding:24px;background-color:#f4f6fa;border-radius:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_BetaCard>div .mx_BetaCard_title{font-weight:600;font-size:1.8rem;line-height:2.2rem;color:#2e2f32;margin:4px 0 14px}.mx_BetaCard>div .mx_BetaCard_title .mx_BetaCard_betaPill{margin-left:12px}.mx_BetaCard>div .mx_BetaCard_caption{font-size:1.5rem;line-height:2rem;color:#737d8c;margin-bottom:20px}.mx_BetaCard>div .mx_AccessibleButton{display:block;margin:12px 0;padding:7px 40px;width:auto}.mx_BetaCard>div .mx_BetaCard_disclaimer{font-size:1.2rem;line-height:1.5rem;color:#737d8c;margin-top:20px}.mx_BetaCard>img{margin:auto 0 auto 20px;width:300px;-o-object-fit:contain;object-fit:contain;height:100%}.mx_BetaCard_betaPill{background-color:#238cf5;padding:4px 10px;border-radius:8px;text-transform:uppercase;font-size:12px;line-height:15px;color:#fff;display:inline-block;vertical-align:text-bottom}.mx_BetaCard_betaPill.mx_BetaCard_betaPill_clickable{cursor:pointer}.mx_BetaDot{border-radius:50%;margin:10px;height:12px;width:12px;-webkit-transform:scale(1);transform:scale(1);background:#238cf5;-webkit-box-shadow:0 0 0 0 #238cf5;box-shadow:0 0 0 0 #238cf5;-webkit-animation:mx_Beta_bluePulse 2s infinite;animation:mx_Beta_bluePulse 2s infinite;-webkit-animation-iteration-count:20;animation-iteration-count:20}@-webkit-keyframes mx_Beta_bluePulse{0%{-webkit-transform:scale(.95);transform:scale(.95);-webkit-box-shadow:0 0 0 0 rgba(35,140,245,.7);box-shadow:0 0 0 0 rgba(35,140,245,.7)}70%{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:0 0 0 10px rgba(35,140,245,0);box-shadow:0 0 0 10px rgba(35,140,245,0)}to{-webkit-transform:scale(.95);transform:scale(.95);-webkit-box-shadow:0 0 0 0 rgba(35,140,245,0);box-shadow:0 0 0 0 rgba(35,140,245,0)}}@keyframes mx_Beta_bluePulse{0%{-webkit-transform:scale(.95);transform:scale(.95);-webkit-box-shadow:0 0 0 0 rgba(35,140,245,.7);box-shadow:0 0 0 0 rgba(35,140,245,.7)}70%{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:0 0 0 10px rgba(35,140,245,0);box-shadow:0 0 0 10px rgba(35,140,245,0)}to{-webkit-transform:scale(.95);transform:scale(.95);-webkit-box-shadow:0 0 0 0 rgba(35,140,245,0);box-shadow:0 0 0 0 rgba(35,140,245,0)}}.mx_CallContextMenu_item{width:205px;height:40px;padding-left:16px;line-height:40px;vertical-align:center}.mx_IconizedContextMenu{min-width:146px}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList>*{padding-left:20px;padding-right:20px}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_optionList_notFirst:before,.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:nth-child(n+2):before{border-top:1px solid #2e2f32;opacity:.1;content:"";width:100%;position:absolute;left:0}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:first-child .mx_AccessibleButton:first-child{border-radius:8px 8px 0 0}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:last-child .mx_AccessibleButton:last-child{border-radius:0 0 8px 8px}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton{padding-top:12px;padding-bottom:12px;text-decoration:none;color:#2e2f32;font-size:1.5rem;line-height:2.4rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton:hover{background-color:#f5f8fa}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_AccessibleButton_disabled{opacity:.5;cursor:not-allowed}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton .mx_IconizedContextMenu_icon,.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton img{width:16px;min-width:16px;max-width:16px}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton span.mx_IconizedContextMenu_label{width:100%;-webkit-box-flex:1;-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton .mx_IconizedContextMenu_icon+.mx_IconizedContextMenu_label{padding-left:14px}.mx_IconizedContextMenu .mx_IconizedContextMenu_icon{position:relative;width:16px;height:16px}.mx_IconizedContextMenu .mx_IconizedContextMenu_icon:before{content:"";width:16px;height:16px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#2e2f32}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_AccessibleButton{color:#ff4b55!important}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_IconizedContextMenu_icon:before{background-color:#ff4b55}.mx_IconizedContextMenu .mx_IconizedContextMenu_active.mx_AccessibleButton,.mx_IconizedContextMenu .mx_IconizedContextMenu_active .mx_AccessibleButton{color:#0dbd8b!important}.mx_IconizedContextMenu .mx_IconizedContextMenu_active .mx_IconizedContextMenu_icon:before{background-color:#0dbd8b}.mx_IconizedContextMenu.mx_IconizedContextMenu_compact .mx_IconizedContextMenu_optionList>*{padding:8px 16px 8px 11px}.mx_IconizedContextMenu .mx_IconizedContextMenu_checked{margin-left:16px;margin-right:-5px}.mx_IconizedContextMenu .mx_IconizedContextMenu_checked:before{-webkit-mask-image:url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);mask-image:url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg)}.mx_MessageContextMenu{padding:6px}.mx_MessageContextMenu_field{display:block;padding:3px 6px;cursor:pointer;white-space:nowrap}.mx_MessageContextMenu_field.mx_MessageContextMenu_fieldSet{font-weight:700}.mx_StatusMessageContextMenu{padding:10px}.mx_StatusMessageContextMenu_form{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}input.mx_StatusMessageContextMenu_message{border-radius:4px;border:1px solid #e7e7e7;padding:6.5px 11px;background-color:#fff;font-weight:400;margin:0 0 10px}.mx_StatusMessageContextMenu_message::-webkit-input-placeholder{color:#61708b}.mx_StatusMessageContextMenu_message::-moz-placeholder{color:#61708b}.mx_StatusMessageContextMenu_message:-ms-input-placeholder{color:#61708b}.mx_StatusMessageContextMenu_message::-ms-input-placeholder{color:#61708b}.mx_StatusMessageContextMenu_message::placeholder{color:#61708b}.mx_StatusMessageContextMenu_actionContainer{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_StatusMessageContextMenu_clear,.mx_StatusMessageContextMenu_submit{vertical-align:middle;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;cursor:pointer;display:inline-block;outline:none;-ms-flex-item-align:start;align-self:start;font-size:1.2rem;padding:6px 1em;border:1px solid transparent;margin-right:10px}.mx_StatusMessageContextMenu_submit[disabled]{opacity:.49}.mx_StatusMessageContextMenu_clear{color:#ff4b55;background-color:transparent;border:1px solid #ff4b55}.mx_StatusMessageContextMenu_actionContainer .mx_Spinner{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_TagTileContextMenu_item{padding:8px 20px 8px 8px;cursor:pointer;white-space:nowrap;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1.6rem}.mx_TagTileContextMenu_item:before{content:"";height:15px;width:15px;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;margin-right:8px}.mx_TagTileContextMenu_viewCommunity:before{-webkit-mask-image:url(../../img/element-icons/view-community.0cad1a5.svg);mask-image:url(../../img/element-icons/view-community.0cad1a5.svg)}.mx_TagTileContextMenu_hideCommunity:before{-webkit-mask-image:url(../../img/element-icons/hide.2b52315.svg);mask-image:url(../../img/element-icons/hide.2b52315.svg)}.mx_TagTileContextMenu_separator{margin-top:0;margin-bottom:0;border-style:none;border-top:1px solid;border-color:#e7e7e7}.mx_AddExistingToSpaceDialog_wrapper .mx_Dialog{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_AddExistingToSpace .mx_SearchBox{margin:0 0 15px;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0}.mx_AddExistingToSpace .mx_AddExistingToSpace_content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_AddExistingToSpace .mx_AddExistingToSpace_noResults{display:block;margin-top:24px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section:not(:first-child){margin-top:24px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section>h3{margin:0;color:#737d8c;font-size:1.2rem;font-weight:600;line-height:1.5rem}.mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AddExistingToSpace_entry{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AddExistingToSpace_entry .mx_DecoratedRoomAvatar{margin-right:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AddExistingToSpace_entry .mx_AddExistingToSpace_entry_name{font-size:1.5rem;line-height:30px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AddExistingToSpace_entry .mx_Checkbox{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_AddExistingToSpace .mx_AddExistingToSpace_section_spaces .mx_BaseAvatar{margin-right:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section_spaces .mx_BaseAvatar_image{border-radius:8px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section_experimental{position:relative;border-radius:8px;margin:12px 0;padding:8px 8px 8px 42px;background-color:#f3f8fd;font-size:1.2rem;line-height:1.5rem;color:#737d8c}.mx_AddExistingToSpace .mx_AddExistingToSpace_section_experimental:before{content:"";position:absolute;left:10px;top:calc(50% - 8px);height:16px;width:16px;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);-webkit-mask-position:center;mask-position:center}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:20px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;font-size:1.2rem;line-height:1.5rem;color:#737d8c}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_ProgressBar{height:8px;width:100%;border-radius:8px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_ProgressBar::-moz-progress-bar{border-radius:8px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_ProgressBar::-webkit-progress-bar,.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_ProgressBar::-webkit-progress-value{border-radius:8px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_AddExistingToSpace_progressText{margin-top:8px;font-size:1.5rem;line-height:2.4rem;color:#2e2f32}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span>*{vertical-align:middle}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error{padding-left:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error>img{-ms-flex-item-align:center;align-self:center}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error .mx_AddExistingToSpace_errorHeading{font-weight:600;font-size:1.5rem;line-height:1.8rem;color:#ff4b55}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error .mx_AddExistingToSpace_errorCaption{margin-top:4px;font-size:1.2rem;line-height:1.5rem;color:#2e2f32}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AccessibleButton{display:inline-block;-ms-flex-item-align:center;align-self:center}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AccessibleButton_kind_primary{padding:8px 36px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_retryButton{margin-left:12px;padding-left:24px;position:relative}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_retryButton:before{content:"";position:absolute;background-color:#2e2f32;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/retry.6cd23ad.svg);mask-image:url(../../img/element-icons/retry.6cd23ad.svg);width:18px;height:18px;left:0}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AccessibleButton_kind_link{padding:0}.mx_AddExistingToSpaceDialog{width:480px;color:#2e2f32;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;min-height:0;height:80vh}.mx_AddExistingToSpaceDialog,.mx_AddExistingToSpaceDialog .mx_Dialog_title{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_BaseAvatar_image{border-radius:8px;margin:0;vertical-align:unset}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_BaseAvatar{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin:auto 16px auto 5px;vertical-align:middle}.mx_AddExistingToSpaceDialog .mx_Dialog_title>div>h1{font-weight:600;font-size:1.8rem;line-height:2.2rem;margin:0}.mx_AddExistingToSpaceDialog .mx_Dialog_title>div .mx_AddExistingToSpaceDialog_onlySpace{color:#737d8c;font-size:1.5rem;line-height:2.4rem}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input{border:none}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input>.mx_Dropdown_option{padding-left:0;-webkit-box-flex:unset;-ms-flex:unset;flex:unset;height:unset;color:#737d8c;font-size:1.5rem;line-height:2.4rem}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input>.mx_Dropdown_option .mx_BaseAvatar{display:none}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input .mx_Dropdown_menu .mx_AddExistingToSpaceDialog_dropdownOptionActive{color:#0dbd8b;padding-right:32px;position:relative}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input .mx_Dropdown_menu .mx_AddExistingToSpaceDialog_dropdownOptionActive:before{content:"";width:20px;height:20px;top:8px;right:0;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#0dbd8b;-webkit-mask-image:url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);mask-image:url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg)}.mx_AddExistingToSpaceDialog .mx_AddExistingToSpace{display:contents}.mx_AddressPickerDialog a:hover,.mx_AddressPickerDialog a:link,.mx_AddressPickerDialog a:visited{color:#0dbd8b;text-decoration:none}.mx_AddressPickerDialog_input,.mx_AddressPickerDialog_input:focus{height:26px;font-size:1.4rem;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;padding-left:12px;padding-right:12px;margin:0!important;border:0!important;outline:0!important;width:1000%;resize:none;overflow:hidden;vertical-align:middle;-webkit-box-sizing:border-box;box-sizing:border-box;word-wrap:nowrap}.mx_AddressPickerDialog .mx_Dialog_content{min-height:50px}.mx_AddressPickerDialog_inputContainer{border-radius:3px;border:1px solid #e7e7e7;line-height:3.6rem;padding:1px 4px;max-height:150px;overflow-x:hidden;overflow-y:auto}.mx_AddressPickerDialog_error{margin-top:10px;color:#ff4b55}.mx_AddressPickerDialog_cancel{position:absolute;right:11px;top:13px;cursor:pointer}.mx_AddressPickerDialog_cancel object{pointer-events:none}.mx_AddressPickerDialog_identityServer{margin-top:1em}.mx_AnalyticsModal table{margin:10px 0}.mx_BetaFeedbackDialog .mx_BetaFeedbackDialog_subheading{color:#2e2f32;font-size:1.4rem;line-height:2rem;margin-bottom:24px}.mx_BetaFeedbackDialog .mx_AccessibleButton_kind_link{padding:0;font-size:inherit;line-height:inherit}.mx_BugReportDialog .mx_BugReportDialog_download .mx_AccessibleButton_kind_link{padding-left:0}.mx_ChangelogDialog_content{max-height:300px;overflow:auto}.mx_ChangelogDialog_li{padding:.2em}.mx_ChatCreateOrReuseDialog .mx_ChatCreateOrReuseDialog_tiles{margin-top:24px}.mx_ChatCreateOrReuseDialog .mx_Dialog_content{margin-bottom:24px;min-height:100px}.mx_ChatCreateOrReuseDialog .mx_RoomTile_badge{display:none}.mx_ChatCreateOrReuseDialog_profile{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_ChatCreateOrReuseDialog_profile_name{padding:14px}.mx_CommunityPrototypeInviteDialog.mx_Dialog_fixedWidth{width:360px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content{margin-bottom:0}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_people{position:relative;margin-bottom:4px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_people .mx_AccessibleButton{display:inline-block;background-color:#ddd;border-radius:4px;padding:3px 5px;font-size:1.2rem;float:right}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_morePeople{margin-top:8px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person{position:relative;margin-top:4px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person>*{vertical-align:middle}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_Checkbox{position:absolute;right:0;top:calc(50% - 8px);width:16px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_CommunityPrototypeInviteDialog_personIdentifiers{display:inline-block}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_CommunityPrototypeInviteDialog_personIdentifiers>*{display:block}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_CommunityPrototypeInviteDialog_personIdentifiers .mx_CommunityPrototypeInviteDialog_personName{font-weight:600;font-size:1.4rem;color:#2e2f32;margin-left:7px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_CommunityPrototypeInviteDialog_personIdentifiers .mx_CommunityPrototypeInviteDialog_personId{font-size:1.2rem;color:#61708b;margin-left:7px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_primaryButton{display:block;font-size:1.3rem;line-height:20px;height:20px;margin-top:24px}.mx_ConfirmUserActionDialog .mx_Dialog_content{min-height:48px;margin-bottom:24px}.mx_ConfirmUserActionDialog_avatar{float:left;margin-right:20px;margin-top:-2px}.mx_ConfirmUserActionDialog_name{font-size:1.8rem}.mx_ConfirmUserActionDialog_userId{font-size:1.3rem}.mx_ConfirmUserActionDialog_reasonField{font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#2e2f32;background-color:#fff;border-radius:3px;border:1px solid #e7e7e7;line-height:3.6rem;padding:1px 16px;margin-bottom:24px;width:90%}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin-bottom:12px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName{-ms-flex-preferred-size:66.66%;flex-basis:66.66%;padding-right:100px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_Field input{font-size:1.6rem;line-height:2rem}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_subtext{display:block;color:#61708b;margin-bottom:16px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_subtext:last-child{margin-top:16px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_subtext.mx_CreateCommunityPrototypeDialog_subtext_error{color:#ff4b55}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_communityId{position:relative}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_communityId .mx_InfoTooltip{float:right}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_AccessibleButton{display:block;height:32px;font-size:1.6rem;line-height:32px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar{-ms-flex-preferred-size:33.33%;flex-basis:33.33%}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer{margin-top:12px;margin-bottom:20px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer .mx_CreateCommunityPrototypeDialog_avatar,.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer .mx_CreateCommunityPrototypeDialog_placeholderAvatar{width:96px;height:96px;border-radius:96px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer .mx_CreateCommunityPrototypeDialog_placeholderAvatar{background-color:#368bd6}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer .mx_CreateCommunityPrototypeDialog_placeholderAvatar:before{display:inline-block;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:96px;mask-size:96px;width:96px;height:96px;-webkit-mask-position:center;mask-position:center;content:"";vertical-align:middle;-webkit-mask-image:url(../../img/element-icons/add-photo.c0b4c3b.svg);mask-image:url(../../img/element-icons/add-photo.c0b4c3b.svg)}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_tip>b,.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_tip>span{display:block;color:#61708b}.mx_CreateGroupDialog_inputRow{margin-top:10px;margin-bottom:10px}.mx_CreateGroupDialog_label{text-align:left;padding-bottom:12px}.mx_CreateGroupDialog_input{font-size:1.5rem;border-radius:3px;border:1px solid #e7e7e7;padding:9px;color:#2e2f32;background-color:#fff}.mx_CreateGroupDialog_input_hasPrefixAndSuffix{border-radius:0}.mx_CreateGroupDialog_input_group{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_CreateGroupDialog_prefix,.mx_CreateGroupDialog_suffix{padding:0 5px;line-height:3.7rem;background-color:#e3e8f0;border:1px solid #e7e7e7;text-align:center}.mx_CreateGroupDialog_prefix{border-right:0;border-radius:3px 0 0 3px}.mx_CreateGroupDialog_suffix{border-left:0;border-radius:0 3px 3px 0}.mx_CreateRoomDialog_details{margin-top:15px}.mx_CreateRoomDialog_details .mx_CreateRoomDialog_details_summary{outline:none;list-style:none;font-weight:600;cursor:pointer;color:#0dbd8b}.mx_CreateRoomDialog_details .mx_CreateRoomDialog_details_summary::-webkit-details-marker{display:none}.mx_CreateRoomDialog_details>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;margin:5px 0}.mx_CreateRoomDialog_details>div input[type=checkbox]{margin-right:10px}.mx_CreateRoomDialog_label{text-align:left;padding-bottom:12px}.mx_CreateRoomDialog_input_container{padding-right:20px}.mx_CreateRoomDialog_input{font-size:1.5rem;border-radius:3px;border:1px solid #e7e7e7;padding:9px;color:#2e2f32;background-color:#fff;width:100%}.mx_CreateRoomDialog_aliasContainer{display:-webkit-box;display:-ms-flexbox;display:flex;margin:10px 0}.mx_CreateRoomDialog_aliasContainer .mx_RoomAliasField{margin:0}.mx_CreateRoomDialog.mx_Dialog_fixedWidth{width:450px}.mx_CreateRoomDialog .mx_Dialog_content{margin-bottom:40px}.mx_CreateRoomDialog .mx_Field_input label,.mx_CreateRoomDialog p{color:#61708b}.mx_CreateRoomDialog .mx_SettingsFlag{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_CreateRoomDialog .mx_SettingsFlag_label{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0;font-weight:600}.mx_CreateRoomDialog .mx_ToggleSwitch{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-left:30px}.mx_CreateRoomDialog .mx_CreateRoomDialog_topic{margin-bottom:36px}.mx_CreateRoomDialog .mx_Dialog_content>.mx_SettingsFlag{margin-top:24px}.mx_CreateRoomDialog p{margin:0 85px 0 0;font-size:1.2rem}.mx_DeactivateAccountDialog .mx_Dialog_content{margin-bottom:30px}.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section{margin-top:60px}.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section .mx_Field{width:300px}.mx_DevTools_content{margin:10px 0}.mx_DevTools_ServersInRoomList_button{cursor:default!important}.mx_DevTools_RoomStateExplorer_query{margin-bottom:10px}.mx_DevTools_RoomStateExplorer_button,.mx_DevTools_ServersInRoomList_button{margin-bottom:10px;width:100%}.mx_DevTools_label_left{float:left}.mx_DevTools_label_right{float:right}.mx_DevTools_label_bottom{clear:both;border-bottom:1px solid #e5e5e5}.mx_DevTools_inputRow{display:table-row}.mx_DevTools_inputLabelCell{display:table-cell;font-weight:700;padding-right:24px}.mx_DevTools_inputCell{display:table-cell;width:240px}.mx_DevTools_inputCell input{display:inline-block;border:0;border-bottom:1px solid hsla(0,0%,59.2%,.5);padding:0;width:240px;color:rgba(74,74,74,.9);font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.6rem}.mx_DevTools_textarea{font-size:1.2rem;max-width:684px;min-height:250px;padding:10px}.mx_DevTools_eventTypeStateKeyGroup{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mx_DevTools_content .mx_Field_input:first-of-type{margin-right:42px}.mx_DevTools_tgl{display:none}.mx_DevTools_tgl,.mx_DevTools_tgl *,.mx_DevTools_tgl+.mx_DevTools_tgl-btn,.mx_DevTools_tgl:after,.mx_DevTools_tgl :after,.mx_DevTools_tgl:before,.mx_DevTools_tgl :before{-webkit-box-sizing:border-box;box-sizing:border-box}.mx_DevTools_tgl+.mx_DevTools_tgl-btn::-moz-selection,.mx_DevTools_tgl::-moz-selection,.mx_DevTools_tgl ::-moz-selection,.mx_DevTools_tgl:after::-moz-selection,.mx_DevTools_tgl :after::-moz-selection,.mx_DevTools_tgl:before::-moz-selection,.mx_DevTools_tgl :before::-moz-selection{background:none}.mx_DevTools_tgl+.mx_DevTools_tgl-btn::selection,.mx_DevTools_tgl::selection,.mx_DevTools_tgl ::selection,.mx_DevTools_tgl:after::selection,.mx_DevTools_tgl :after::selection,.mx_DevTools_tgl:before::selection,.mx_DevTools_tgl :before::selection{background:none}.mx_DevTools_tgl+.mx_DevTools_tgl-btn{outline:0;display:block;width:7em;height:2em;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_DevTools_tgl+.mx_DevTools_tgl-btn:after,.mx_DevTools_tgl+.mx_DevTools_tgl-btn:before{position:relative;display:block;content:"";width:50%;height:100%}.mx_DevTools_tgl+.mx_DevTools_tgl-btn:after{left:0}.mx_DevTools_tgl+.mx_DevTools_tgl-btn:before{display:none}.mx_DevTools_tgl:checked+.mx_DevTools_tgl-btn:after{left:50%}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn{padding:2px;-webkit-transition:all .2s ease;transition:all .2s ease;font-family:sans-serif;-webkit-perspective:100px;perspective:100px}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:after,.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:before{display:inline-block;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%;text-align:center;position:absolute;line-height:2em;font-weight:700;color:#fff;top:0;left:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:4px}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:after{content:attr(data-tg-on);background:#02c66f;-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:before{background:#ff3a19;content:attr(data-tg-off)}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:active:before{-webkit-transform:rotateY(-20deg);transform:rotateY(-20deg)}.mx_DevTools_tgl-flip:checked+.mx_DevTools_tgl-btn:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.mx_DevTools_tgl-flip:checked+.mx_DevTools_tgl-btn:after{-webkit-transform:rotateY(0);transform:rotateY(0);left:0;background:#7fc6a6}.mx_DevTools_tgl-flip:checked+.mx_DevTools_tgl-btn:active:after{-webkit-transform:rotateY(20deg);transform:rotateY(20deg)}.mx_DevTools_VerificationRequest{border:1px solid #ccc;border-radius:3px;padding:1px 5px;margin-bottom:6px;font-family:Inconsolata,Twemoji,Apple Color Emoji,Segoe UI Emoji,Courier,monospace,Noto Color Emoji}.mx_DevTools_VerificationRequest dl{display:grid;grid-template-columns:-webkit-max-content auto;grid-template-columns:max-content auto;margin:0}.mx_DevTools_VerificationRequest dd{grid-column-start:2}.mx_DevTools_VerificationRequest dd:empty{color:#666}.mx_DevTools_VerificationRequest dd:empty:after{content:"(empty)"}.mx_DevTools_VerificationRequest dt{font-weight:700;grid-column-start:1}.mx_DevTools_VerificationRequest dt:after{content:":"}.mx_DevTools_SettingsExplorer table{width:100%;table-layout:fixed;border-collapse:collapse}.mx_DevTools_SettingsExplorer table th{border-bottom:1px solid #0dbd8b;text-align:left}.mx_DevTools_SettingsExplorer table td,.mx_DevTools_SettingsExplorer table th{width:360px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_DevTools_SettingsExplorer table td+td,.mx_DevTools_SettingsExplorer table th+th{width:auto}.mx_DevTools_SettingsExplorer table tr:hover{background-color:rgba(13,189,139,.5)}.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_mutable{background-color:#0dbd8b}.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_immutable{background-color:#ff4b55}.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_edit{float:right;margin-right:16px}.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_warning{border:2px solid #ff4b55;border-radius:4px;padding:4px;margin-bottom:8px}.mx_EditCommunityPrototypeDialog.mx_Dialog_fixedWidth{width:360px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content{margin-bottom:12px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_AccessibleButton.mx_AccessibleButton_kind_primary{display:block;height:32px;font-size:1.6rem;line-height:32px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_rowAvatar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer{margin-top:20px;margin-bottom:20px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer .mx_EditCommunityPrototypeDialog_avatar,.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer .mx_EditCommunityPrototypeDialog_placeholderAvatar{width:96px;height:96px;border-radius:96px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer .mx_EditCommunityPrototypeDialog_placeholderAvatar{background-color:#368bd6}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer .mx_EditCommunityPrototypeDialog_placeholderAvatar:before{display:inline-block;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:96px;mask-size:96px;width:96px;height:96px;-webkit-mask-position:center;mask-position:center;content:"";vertical-align:middle;-webkit-mask-image:url(../../img/element-icons/add-photo.c0b4c3b.svg);mask-image:url(../../img/element-icons/add-photo.c0b4c3b.svg)}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_tip{margin-left:20px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_tip>b,.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_tip>span{display:block;color:#61708b}.mx_FeedbackDialog hr{margin:24px 0;border-color:#e7e7e7}.mx_FeedbackDialog .mx_Dialog_content{margin-bottom:24px}.mx_FeedbackDialog .mx_Dialog_content>h2{margin-bottom:32px}.mx_FeedbackDialog .mx_FeedbackDialog_section{position:relative;padding-left:52px}.mx_FeedbackDialog .mx_FeedbackDialog_section>p{color:#8d99a5}.mx_FeedbackDialog .mx_FeedbackDialog_section .mx_AccessibleButton_kind_link{padding:0;font-size:inherit}.mx_FeedbackDialog .mx_FeedbackDialog_section .mx_AccessibleButton_kind_link,.mx_FeedbackDialog .mx_FeedbackDialog_section a{color:#0dbd8b;text-decoration:underline}.mx_FeedbackDialog .mx_FeedbackDialog_section:after,.mx_FeedbackDialog .mx_FeedbackDialog_section:before{content:"";position:absolute;width:40px;height:40px;left:0;top:0}.mx_FeedbackDialog .mx_FeedbackDialog_section:before{background-color:#c1c6cd;border-radius:20px}.mx_FeedbackDialog .mx_FeedbackDialog_section:after{background:#fff;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:24px;mask-size:24px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mx_FeedbackDialog .mx_FeedbackDialog_reportBug:after{-webkit-mask-image:url(../../img/feather-customised/bug.3dc7afa.svg);mask-image:url(../../img/feather-customised/bug.3dc7afa.svg)}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:20px;-webkit-transition:font-size 1s,border .5s;transition:font-size 1s,border .5s;border-radius:50%;border:2px solid transparent;margin-top:12px;margin-bottom:24px;vertical-align:top;cursor:pointer}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton input[type=radio]+div{display:none}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton .mx_RadioButton_content{background:#c1c6cd;width:40px;height:40px;text-align:center;line-height:40px;border-radius:20px;margin:5px}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton .mx_RadioButton_spacer{display:none}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton+.mx_RadioButton{margin-left:16px}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton_checked{font-size:24px;border-color:#0dbd8b}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp:after{-webkit-mask-image:url(../../img/element-icons/feedback.a91241e.svg);mask-image:url(../../img/element-icons/feedback.a91241e.svg)}.mx_GroupAddressPicker_checkboxContainer{margin-top:10px;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_HostSignupDialog{width:90vw;max-width:580px;height:80vh;max-height:600px;background-color:#fff}.mx_HostSignupDialog .mx_HostSignupDialog_info{text-align:center}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_content_top{margin-bottom:24px}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_paragraphs{text-align:left;padding-left:25%;padding-right:25%}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_buttons{margin-bottom:24px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_buttons button{padding:12px;margin:0 16px}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_footer img{padding-right:5px}.mx_HostSignupDialog iframe{width:100%;height:100%;border:none;background-color:#fff;min-height:540px}.mx_HostSignupDialog_text_dark{color:#2e2f32}.mx_HostSignupDialog_text_light{color:#737d8c}.mx_HostSignup_maximize_button{-webkit-mask:url(../../img/feather-customised/maximise.dc32127.svg);mask:url(../../img/feather-customised/maximise.dc32127.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;right:10px}.mx_HostSignup_maximize_button,.mx_HostSignup_minimize_button{width:14px;height:14px;background-color:#c1c1c1;cursor:pointer;position:absolute;top:10px}.mx_HostSignup_minimize_button{-webkit-mask:url(../../img/feather-customised/minimise.aec9142.svg);mask:url(../../img/feather-customised/minimise.aec9142.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;right:25px}.mx_HostSignup_persisted{width:90vw;max-width:580px;height:80vh;max-height:600px;top:0;left:0;position:fixed;display:none}.mx_HostSignupDialog_minimized{position:fixed;bottom:80px;right:26px;width:314px;height:217px;overflow:hidden}.mx_HostSignupDialog_minimized.mx_Dialog{padding:12px}.mx_HostSignupDialog_minimized .mx_Dialog_title{text-align:left!important;padding-left:20px;font-size:1.5rem}.mx_HostSignupDialog_minimized iframe{width:100%;height:100%;border:none;background-color:#fff}.mx_IncomingSasDialog_opponentProfile_image{position:relative}.mx_IncomingSasDialog_opponentProfile h2{display:inline-block;margin-left:10px}.mx_InviteDialog_addressBar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.mx_InviteDialog_addressBar .mx_InviteDialog_editor{-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;background-color:#f3f8fd;border-radius:4px;min-height:25px;padding-left:8px;overflow-x:hidden;overflow-y:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mx_InviteDialog_addressBar .mx_InviteDialog_editor .mx_InviteDialog_userTile{margin:6px 6px 0 0;display:inline-block;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}.mx_InviteDialog_addressBar .mx_InviteDialog_editor>input[type=text]{margin:6px 0!important;height:24px;line-height:2.4rem;font-size:1.4rem;padding-left:12px;border:0!important;outline:0!important;resize:none;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:40%;-webkit-box-flex:1!important;-ms-flex:1!important;flex:1!important;color:#2e2f32!important}.mx_InviteDialog_addressBar .mx_InviteDialog_goButton{min-width:48px;margin-left:10px;height:25px;line-height:2.5rem}.mx_InviteDialog_addressBar .mx_InviteDialog_buttonAndSpinner .mx_Spinner{width:20px;height:20px;margin-left:5px;display:inline-block;vertical-align:middle}.mx_InviteDialog_section{padding-bottom:10px}.mx_InviteDialog_section h3{font-size:1.2rem;color:#61708b;font-weight:700;text-transform:uppercase}.mx_InviteDialog_section .mx_InviteDialog_subname{margin-bottom:10px;margin-top:-10px;font-size:1.2rem;color:#61708b}.mx_InviteDialog_roomTile{cursor:pointer;padding:5px 10px}.mx_InviteDialog_roomTile:hover{background-color:#f3f8fd;border-radius:4px}.mx_InviteDialog_roomTile *{vertical-align:middle}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_avatarStack{display:inline-block;position:relative;width:36px;height:36px}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_avatarStack>*{position:absolute;top:0;left:0}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_selected{width:36px;height:36px;border-radius:36px;background-color:#368bd6;display:inline-block;position:relative}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_selected:before{content:"";width:24px;height:24px;grid-column:1;grid-row:1;-webkit-mask-image:url(../../img/feather-customised/check.5745b4e.svg);mask-image:url(../../img/feather-customised/check.5745b4e.svg);-webkit-mask-size:100%;mask-size:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;position:absolute;top:6px;left:6px;background-color:#fff}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_nameStack{display:inline-block}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_name{font-weight:600;font-size:1.4rem;color:#2e2f32;margin-left:7px}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_userId{font-size:1.2rem;color:#61708b;margin-left:7px}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_time{text-align:right;font-size:1.2rem;color:#61708b;float:right;line-height:3.6rem}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_highlight{font-weight:900}.mx_InviteDialog_userTile{margin-right:8px}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill{background-color:#368bd6;border-radius:12px;display:inline-block;height:24px;line-height:2.4rem;padding-left:8px;padding-right:8px;color:#fff}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_avatar{border-radius:20px;position:relative;left:-5px;top:2px}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_name,.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill img.mx_InviteDialog_userTile_avatar{vertical-align:top}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_threepidAvatar{background-color:#fff}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_remove{display:inline-block;margin-left:4px}.mx_InviteDialog{height:590px;padding-left:20px}.mx_InviteDialog_userSections{margin-top:10px;overflow-y:auto;padding-right:45px;height:455px}.mx_InviteDialog_addressBar,.mx_InviteDialog_helpText{margin-right:45px}.mx_InviteDialog_helpText .mx_AccessibleButton_kind_link{padding:0}.mx_KeyboardShortcutsDialog{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-bottom:-50px;max-height:1100px}.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_category{width:33.3333%;margin:0 0 40px}.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_category>div{padding-left:5px}.mx_KeyboardShortcutsDialog h3{margin:0 0 10px}.mx_KeyboardShortcutsDialog h5{margin:15px 0 5px;font-weight:400}.mx_KeyboardShortcutsDialog kbd{padding:5px;border-radius:4px;background-color:#f3f8fd;margin-right:5px;min-width:20px;text-align:center;display:inline-block;border:1px solid #e9edf1;-webkit-box-shadow:0 2px #e9edf1;box-shadow:0 2px #e9edf1;margin-bottom:4px;text-transform:capitalize}.mx_KeyboardShortcutsDialog kbd+kbd{margin-left:5px}.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_inline div{display:inline}.mx_MessageEditHistoryDialog .mx_Dialog_header>.mx_Dialog_title{text-align:center}.mx_MessageEditHistoryDialog{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-height:60vh}.mx_MessageEditHistoryDialog_scrollPanel{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.mx_MessageEditHistoryDialog_error{color:#ff4b55;text-align:center}.mx_MessageEditHistoryDialog_edits{list-style-type:none;font-size:1.4rem;padding:0;color:#2e2f32}.mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_deletion,.mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_insertion{padding:0 2px}.mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_deletion{color:#ff4c55;background-color:rgba(255,76,85,.1);text-decoration:line-through}.mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_insertion{color:#1aa97b;background-color:rgba(26,169,123,.1);text-decoration:underline}.mx_MessageEditHistoryDialog_edits .mx_EventTile_content,.mx_MessageEditHistoryDialog_edits .mx_EventTile_line{margin-right:0}.mx_MessageEditHistoryDialog_edits .mx_MessageActionBar .mx_AccessibleButton{font-size:1rem;padding:0 8px}.mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning{margin-bottom:24px}.mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning>img{vertical-align:middle;margin-right:8px}.mx_ModalWidgetDialog .mx_ModalWidgetDialog_buttons{float:right;margin-top:24px}.mx_ModalWidgetDialog .mx_ModalWidgetDialog_buttons .mx_AccessibleButton+.mx_AccessibleButton{margin-left:8px}.mx_ModalWidgetDialog iframe{width:100%;height:450px;border:0;border-radius:8px}.mx_NewSessionReviewDialog_header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:0}.mx_NewSessionReviewDialog_headerIcon{width:24px;height:24px;margin-right:4px;position:relative}.mx_NewSessionReviewDialog_deviceName{font-weight:600}.mx_NewSessionReviewDialog_deviceID{font-size:1.2rem;color:#8d99a5}.mx_RegistrationEmailPromptDialog{width:417px}.mx_RegistrationEmailPromptDialog .mx_Dialog_content{margin-bottom:24px;color:#8d99a5}.mx_RegistrationEmailPromptDialog .mx_Dialog_primary{width:100%}.mx_RoomSettingsDialog_settingsIcon:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_RoomSettingsDialog_securityIcon:before{-webkit-mask-image:url(../../img/element-icons/security.66f2fa6.svg);mask-image:url(../../img/element-icons/security.66f2fa6.svg)}.mx_RoomSettingsDialog_rolesIcon:before{-webkit-mask-image:url(../../img/element-icons/room/settings/roles.bad9a9e.svg);mask-image:url(../../img/element-icons/room/settings/roles.bad9a9e.svg)}.mx_RoomSettingsDialog_notificationsIcon:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_RoomSettingsDialog_bridgesIcon:before{-webkit-mask-image:url(../../img/feather-customised/bridge.b2ca042.svg);mask-image:url(../../img/feather-customised/bridge.b2ca042.svg)}.mx_RoomSettingsDialog_warningIcon:before{-webkit-mask-image:url(../../img/element-icons/room/settings/advanced.e079c15.svg);mask-image:url(../../img/element-icons/room/settings/advanced.e079c15.svg)}.mx_RoomSettingsDialog .mx_Dialog_title{-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0 auto;padding-right:80px}.mx_RoomSettingsDialog .mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder:before{-webkit-mask:url(../../img/feather-customised/image.a8671b8.svg);mask:url(../../img/feather-customised/image.a8671b8.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:36px;mask-size:36px;-webkit-mask-position:center;mask-position:center}.mx_RoomSettingsDialog_BridgeList{padding:0}.mx_RoomSettingsDialog_BridgeList .mx_AccessibleButton{display:inline;margin:0;padding:0}.mx_RoomSettingsDialog_BridgeList li{list-style-type:none;padding:5px;margin-bottom:8px;border:1px solid transparent;border-radius:5px}.mx_RoomSettingsDialog_BridgeList li .column-icon{float:left;padding-right:10px}.mx_RoomSettingsDialog_BridgeList li .column-icon *{border-radius:5px;border:1px solid #e3e8f0}.mx_RoomSettingsDialog_BridgeList li .column-icon .noProtocolIcon{width:48px;height:48px;background:#e3e8f0;border-radius:5px}.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon{float:left;margin-right:5px}.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon img{border-radius:5px;border-width:1px;border-color:transparent}.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon span{left:auto}.mx_RoomSettingsDialog_BridgeList li .column-data{display:inline-block;width:85%}.mx_RoomSettingsDialog_BridgeList li .column-data>h3{margin-top:0;margin-bottom:0;font-size:16pt;color:#2e2f32}.mx_RoomSettingsDialog_BridgeList li .column-data>*{margin-top:4px;margin-bottom:0}.mx_RoomSettingsDialog_BridgeList li .column-data .workspace-channel-details{color:#2e2f32;font-weight:600}.mx_RoomSettingsDialog_BridgeList li .column-data .workspace-channel-details .channel{margin-left:5px}.mx_RoomSettingsDialog_BridgeList li .column-data .metadata{color:#61708b;margin-bottom:0;overflow-y:visible;text-overflow:ellipsis;white-space:normal;padding:0}.mx_RoomSettingsDialog_BridgeList li .column-data .metadata>li{padding:0;border:0}.mx_RoomUpgradeDialog{padding-right:70px}.mx_RoomUpgradeWarningDialog{max-width:38vw;width:38vw}.mx_RoomUpgradeWarningDialog .mx_SettingsFlag{font-weight:700}.mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_ToggleSwitch{display:inline-block;vertical-align:middle;margin-left:8px;float:right}.mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_SettingsFlag_label{display:inline-block;vertical-align:middle}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content{padding-right:85px;color:#2e2f32}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content hr{border-color:#2e2f32;opacity:.1;border-bottom:none}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content ul{padding:16px}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content ul li:nth-child(n+2){margin-top:16px}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timestamp{display:inline-block;width:115px;color:#61708b;line-height:24px;vertical-align:top}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline{display:inline-block;width:calc(100% - 155px)}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_timeline_header span{margin-left:8px;vertical-align:middle}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_txn{position:relative;margin-top:8px}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_txn .mx_ServerOfflineDialog_content_context_txn_desc{width:calc(100% - 100px)}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_txn .mx_AccessibleButton{float:right;padding:0}.mx_ServerPickerDialog{width:468px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_ServerPickerDialog .mx_Dialog_content{margin-bottom:0}.mx_ServerPickerDialog .mx_Dialog_content>p{color:#737d8c;font-size:1.4rem;margin:16px 0}.mx_ServerPickerDialog .mx_Dialog_content>p:first-of-type{margin-bottom:40px}.mx_ServerPickerDialog .mx_Dialog_content>p:last-of-type{margin:0 24px 24px}.mx_ServerPickerDialog .mx_Dialog_content>h4{font-size:1.5rem;font-weight:600;color:#737d8c;margin-left:8px}.mx_ServerPickerDialog .mx_Dialog_content>a{color:#0dbd8b;margin-left:8px}.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserverRadio input[type=radio]+div{margin-top:auto;margin-bottom:auto}.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver{border-top:none;border-left:none;border-right:none;border-radius:unset}.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver>input{padding-left:0}.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver>label{margin-left:0}.mx_ServerPickerDialog .mx_AccessibleButton_kind_primary{width:calc(100% - 64px);margin:0 8px;padding:15px 18px}.mx_SetEmailDialog_email_input{border-radius:3px;border:1px solid #e7e7e7;padding:9px;color:rgba(74,74,74,.9);background-color:#fff;font-size:1.5rem;width:100%;max-width:280px;margin-bottom:10px}.mx_SetEmailDialog_email_input:focus{outline:none;-webkit-box-shadow:none;box-shadow:none;border:1px solid #0dbd8b}.mx_RoomSettingsDialog,.mx_UserSettingsDialog{width:90vw;max-width:1000px;height:80vh}.mx_RoomSettingsDialog .mx_TabbedView,.mx_UserSettingsDialog .mx_TabbedView{top:65px}.mx_RoomSettingsDialog .mx_TabbedView .mx_SettingsTab,.mx_UserSettingsDialog .mx_TabbedView .mx_SettingsTab{-webkit-box-sizing:border-box;box-sizing:border-box;min-width:580px;padding-right:100px;padding-bottom:100px}.mx_RoomSettingsDialog .mx_Dialog_title,.mx_UserSettingsDialog .mx_Dialog_title{margin-bottom:24px}.mx_ShareDialog hr{margin-top:25px;margin-bottom:25px;border-color:#747474}.mx_ShareDialog_content{margin:10px 0}.mx_ShareDialog_matrixto{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;border-radius:5px;border:1px solid #747474;margin-bottom:10px;margin-top:30px;padding:10px}.mx_ShareDialog_matrixto a{text-decoration:none}.mx_ShareDialog_matrixto_link{-ms-flex-negative:1;flex-shrink:1;overflow:hidden;text-overflow:ellipsis}.mx_ShareDialog_matrixto_copy{-ms-flex-negative:0;flex-shrink:0;cursor:pointer;margin-left:20px;display:inherit}.mx_ShareDialog_matrixto_copy>div{-webkit-mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);background-color:#2e2f32;margin-left:5px;width:20px;height:20px;background-repeat:no-repeat}.mx_ShareDialog_split{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mx_ShareDialog_qrcode_container{float:left;height:256px;width:256px;margin-right:64px}.mx_ShareDialog_qrcode_container+.mx_ShareDialog_social_container{width:299px}.mx_ShareDialog_social_container{display:inline-block}.mx_ShareDialog_social_icon{display:inline-grid;margin-right:10px;margin-bottom:10px}.mx_SlashCommandHelpDialog .mx_SlashCommandHelpDialog_headerRow h2{margin-bottom:2px}.mx_SlashCommandHelpDialog .mx_Dialog_content{margin-top:12px;margin-bottom:34px}.mx_SpaceSettingsDialog{width:480px;color:#2e2f32}.mx_SpaceSettingsDialog .mx_SpaceSettings_errorText{font-weight:600;font-size:1.2rem;line-height:1.5rem;color:#ff4b55;margin-bottom:28px}.mx_SpaceSettingsDialog .mx_ToggleSwitch{display:inline-block;vertical-align:middle;margin-left:16px}.mx_SpaceSettingsDialog .mx_AccessibleButton_kind_danger{margin-top:28px}.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:64px}.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons .mx_AccessibleButton{display:inline-block}.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons .mx_AccessibleButton_kind_link{margin-left:auto}.mx_SpaceSettingsDialog .mx_AccessibleButton_hasKind{padding:8px 22px}.mx_TabbedIntegrationManagerDialog .mx_Dialog{width:60%;height:70%;overflow:hidden;padding:0;max-width:none;max-height:none;position:relative}.mx_TabbedIntegrationManagerDialog_container{position:absolute;top:0;bottom:0;left:0;right:0}.mx_TabbedIntegrationManagerDialog_container .mx_TabbedIntegrationManagerDialog_currentManager{width:100%;height:100%;border-top:1px solid #0dbd8b}.mx_TabbedIntegrationManagerDialog_container .mx_TabbedIntegrationManagerDialog_currentManager iframe{background-color:#fff;border:0;width:100%;height:100%}.mx_TabbedIntegrationManagerDialog_tab{display:inline-block;border:1px solid #0dbd8b;border-bottom:0;border-top-left-radius:3px;border-top-right-radius:3px;padding:10px 8px;margin-right:5px}.mx_TabbedIntegrationManagerDialog_currentTab{background-color:#0dbd8b;color:#fff}.mx_TermsDialog_forIntegrationManager .mx_Dialog{width:60%;height:70%;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_TermsDialog_termsTableHeader{font-weight:700;text-align:left}.mx_TermsDialog_termsTable{font-size:1.2rem;width:100%}.mx_TermsDialog_service,.mx_TermsDialog_summary{padding-right:10px}.mx_TermsDialog_link{display:inline-block;-webkit-mask-image:url(../../img/external-link.a8d3e9b.svg);mask-image:url(../../img/external-link.a8d3e9b.svg);background-color:#0dbd8b;width:10px;height:10px}.mx_UntrustedDeviceDialog .mx_Dialog_title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_UntrustedDeviceDialog .mx_Dialog_title .mx_E2EIcon{margin-left:0}.mx_UploadConfirmDialog_fileIcon{margin-right:5px}.mx_UploadConfirmDialog_previewOuter{text-align:center}.mx_UploadConfirmDialog_previewInner{display:inline-block;text-align:left}.mx_UploadConfirmDialog_imagePreview{max-height:300px;max-width:100%;border-radius:4px;border:1px solid #c1c1c1}.mx_UserSettingsDialog_settingsIcon:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_UserSettingsDialog_appearanceIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/appearance.cdebd40.svg);mask-image:url(../../img/element-icons/settings/appearance.cdebd40.svg)}.mx_UserSettingsDialog_voiceIcon:before{-webkit-mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg)}.mx_UserSettingsDialog_bellIcon:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_UserSettingsDialog_preferencesIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/preference.82bfabd.svg);mask-image:url(../../img/element-icons/settings/preference.82bfabd.svg)}.mx_UserSettingsDialog_securityIcon:before{-webkit-mask-image:url(../../img/element-icons/security.66f2fa6.svg);mask-image:url(../../img/element-icons/security.66f2fa6.svg)}.mx_UserSettingsDialog_helpIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/help.68b703f.svg);mask-image:url(../../img/element-icons/settings/help.68b703f.svg)}.mx_UserSettingsDialog_labsIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/lab-flags.6fbe5e2.svg);mask-image:url(../../img/element-icons/settings/lab-flags.6fbe5e2.svg)}.mx_UserSettingsDialog_mjolnirIcon:before{-webkit-mask-image:url(../../img/element-icons/room/composer/emoji.52d7369.svg);mask-image:url(../../img/element-icons/room/composer/emoji.52d7369.svg)}.mx_UserSettingsDialog_flairIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/flair.4227a88.svg);mask-image:url(../../img/element-icons/settings/flair.4227a88.svg)}.mx_WidgetCapabilitiesPromptDialog .text-muted{font-size:1.2rem}.mx_WidgetCapabilitiesPromptDialog .mx_Dialog_content{margin-bottom:16px}.mx_WidgetCapabilitiesPromptDialog .mx_WidgetCapabilitiesPromptDialog_cap{margin-top:20px;font-size:1.5rem;line-height:1.5rem}.mx_WidgetCapabilitiesPromptDialog .mx_WidgetCapabilitiesPromptDialog_cap .mx_WidgetCapabilitiesPromptDialog_byline{color:#61708b;margin-left:26px;font-size:1.2rem;line-height:1.2rem}.mx_WidgetCapabilitiesPromptDialog .mx_Dialog_buttons{margin-top:40px}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag{line-height:calc(1.4rem + 14px);color:#61708b;font-size:1.2rem}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch{display:inline-block;vertical-align:middle;margin-right:8px;width:3.2rem;height:1.5rem}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch.mx_ToggleSwitch_on>.mx_ToggleSwitch_ball{left:calc(100% - 1.5rem)}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch .mx_ToggleSwitch_ball{width:1.5rem;height:1.5rem;border-radius:1.5rem}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_SettingsFlag_label{display:inline-block;vertical-align:middle}.mx_WidgetOpenIDPermissionsDialog .mx_SettingsFlag .mx_ToggleSwitch{display:inline-block;vertical-align:middle;margin-right:8px}.mx_WidgetOpenIDPermissionsDialog .mx_SettingsFlag .mx_SettingsFlag_label{display:inline-block;vertical-align:middle}.mx_AccessSecretStorageDialog_reset{position:relative;padding-left:24px;margin-top:7px}.mx_AccessSecretStorageDialog_reset:before{content:"";display:inline-block;position:absolute;height:16px;width:16px;left:0;top:2px;background-image:url(../../img/element-icons/warning-badge.de1033e.svg)}.mx_AccessSecretStorageDialog_reset .mx_AccessSecretStorageDialog_reset_link{color:#ff4b55}.mx_AccessSecretStorageDialog_titleWithIcon:before{content:"";display:inline-block;width:24px;height:24px;margin-right:8px;position:relative;top:5px;background-color:#2e2f32}.mx_AccessSecretStorageDialog_resetBadge:before{background-image:url(../../img/element-icons/warning-badge.de1033e.svg);background-size:24px;background-color:transparent}.mx_AccessSecretStorageDialog_secureBackupTitle:before{-webkit-mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg)}.mx_AccessSecretStorageDialog_securePhraseTitle:before{-webkit-mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg);mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg)}.mx_AccessSecretStorageDialog_keyStatus{height:30px}.mx_AccessSecretStorageDialog_passPhraseInput{width:300px;border:1px solid #0dbd8b;border-radius:5px;padding:10px}.mx_AccessSecretStorageDialog_recoveryKeyEntry{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText{margin:16px}.mx_AccessSecretStorageDialog_recoveryKeyFeedback:before{content:"";display:inline-block;vertical-align:bottom;width:20px;height:20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:20px;mask-size:20px;margin-right:5px}.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid{color:#0dbd8b}.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid:before{-webkit-mask-image:url(../../img/feather-customised/check.5745b4e.svg);mask-image:url(../../img/feather-customised/check.5745b4e.svg);background-color:#0dbd8b}.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid{color:#ff4b55}.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid:before{-webkit-mask-image:url(../../img/feather-customised/x.9662221.svg);mask-image:url(../../img/feather-customised/x.9662221.svg);background-color:#ff4b55}.mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput{display:none}.mx_CreateCrossSigningDialog{width:560px}.mx_CreateCrossSigningDialog details .mx_AccessibleButton{margin:1em 0}.mx_CreateCrossSigningDialog .mx_Dialog_title,.mx_CreateKeyBackupDialog .mx_Dialog_title{margin-bottom:1em}.mx_CreateKeyBackupDialog_primaryContainer{padding:20px}.mx_CreateKeyBackupDialog_primaryContainer:after{content:"";clear:both;display:block}.mx_CreateKeyBackupDialog_passPhraseContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mx_CreateKeyBackupDialog_passPhraseInput{-webkit-box-flex:0;-ms-flex:none;flex:none;width:250px;border:1px solid #0dbd8b;border-radius:5px;padding:10px;margin-bottom:1em}.mx_CreateKeyBackupDialog_passPhraseMatch{margin-left:20px}.mx_CreateKeyBackupDialog_recoveryKeyHeader{margin-bottom:1em}.mx_CreateKeyBackupDialog_recoveryKeyContainer{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_CreateKeyBackupDialog_recoveryKey{width:262px;padding:20px;color:#888;background-color:#f7f7f7;margin-right:12px}.mx_CreateKeyBackupDialog_recoveryKeyButtons{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CreateKeyBackupDialog_recoveryKeyButtons button{-webkit-box-flex:1;-ms-flex:1;flex:1;white-space:nowrap}.mx_CreateKeyBackupDialog details .mx_AccessibleButton{margin:1em 0}.mx_CreateSecretStorageDialog{width:560px}.mx_CreateSecretStorageDialog .mx_SettingsFlag{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_CreateSecretStorageDialog .mx_SettingsFlag_label{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0;font-weight:600}.mx_CreateSecretStorageDialog .mx_ToggleSwitch{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-left:30px}.mx_CreateSecretStorageDialog details .mx_AccessibleButton{margin:1em 0}.mx_CreateSecretStorageDialog .mx_Dialog_title{margin-bottom:1em}.mx_CreateSecretStorageDialog_titleWithIcon:before{content:"";display:inline-block;width:24px;height:24px;margin-right:8px;position:relative;top:5px;background-color:#2e2f32}.mx_CreateSecretStorageDialog_secureBackupTitle:before{-webkit-mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg)}.mx_CreateSecretStorageDialog_securePhraseTitle:before{-webkit-mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg);mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg)}.mx_CreateSecretStorageDialog_centeredBody,.mx_CreateSecretStorageDialog_centeredTitle{text-align:center}.mx_CreateSecretStorageDialog_primaryContainer{padding-top:20px}.mx_CreateSecretStorageDialog_primaryContainer:after{content:"";clear:both;display:block}.mx_CreateSecretStorageDialog_primaryContainer .mx_RadioButton{margin-bottom:16px;padding:11px}.mx_CreateSecretStorageDialog_optionTitle{color:#45474a;font-weight:600;font-size:1.8rem;padding-bottom:10px}.mx_CreateSecretStorageDialog_optionIcon{display:inline-block;width:24px;height:24px;margin-right:8px;position:relative;top:5px;background-color:#2e2f32}.mx_CreateSecretStorageDialog_optionIcon_securePhrase{-webkit-mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg);mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg)}.mx_CreateSecretStorageDialog_optionIcon_secureBackup{-webkit-mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg)}.mx_CreateSecretStorageDialog_passPhraseContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mx_Field.mx_CreateSecretStorageDialog_passPhraseField{margin-top:0}.mx_CreateSecretStorageDialog_passPhraseMatch{width:200px;margin-left:20px}.mx_CreateSecretStorageDialog_recoveryKeyContainer{width:380px;margin-left:auto;margin-right:auto}.mx_CreateSecretStorageDialog_recoveryKey{font-weight:700;text-align:center;padding:20px;color:#888;background-color:#f7f7f7;border-radius:6px;word-spacing:1em;margin-bottom:20px}.mx_CreateSecretStorageDialog_recoveryKeyButtons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton{width:160px;padding-left:0;padding-right:0;white-space:nowrap}.mx_CreateSecretStorageDialog_continueSpinner{margin-top:33px;text-align:right}.mx_CreateSecretStorageDialog_continueSpinner img{width:20px;height:20px}.mx_KeyBackupFailedDialog .mx_Dialog_title{margin-bottom:32px}.mx_KeyBackupFailedDialog_title{position:relative;padding-left:45px;padding-bottom:10px}.mx_KeyBackupFailedDialog_title:before{-webkit-mask:url(../../img/e2e/lock-warning-filled.993fb6c.svg);mask:url(../../img/e2e/lock-warning-filled.993fb6c.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#2e2f32;content:"";position:absolute;top:-6px;right:0;bottom:0;left:0}.mx_KeyBackupFailedDialog .mx_Dialog_buttons{margin-top:36px}.mx_RestoreKeyBackupDialog_keyStatus{height:30px}.mx_RestoreKeyBackupDialog_primaryContainer{padding:20px}.mx_RestoreKeyBackupDialog_passPhraseInput,.mx_RestoreKeyBackupDialog_recoveryKeyInput{width:300px;border:1px solid #0dbd8b;border-radius:5px;padding:10px}.mx_RestoreKeyBackupDialog_content>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;min-height:110px}.mx_NetworkDropdown{height:32px;position:relative;padding-right:32px;margin-left:auto;margin-right:9px;margin-top:12px}.mx_NetworkDropdown,.mx_NetworkDropdown .mx_AccessibleButton{width:-webkit-max-content;width:-moz-max-content;width:max-content}.mx_NetworkDropdown_menu{min-width:204px;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;border:1px solid #c1c1c1;background-color:#fff;max-height:calc(100vh - 20px);overflow-y:auto}.mx_NetworkDropdown_menu_network{font-weight:700}.mx_NetworkDropdown_server{padding:12px 0;border-bottom:1px solid #9fa9ba}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_title{padding:0 10px;font-size:1.5rem;font-weight:600;line-height:2rem;margin-bottom:4px;position:relative}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_title .mx_AccessibleButton{position:absolute;display:inline;right:10px;height:16px;width:16px;margin-top:2px}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_title .mx_AccessibleButton:after{content:"";position:absolute;width:16px;height:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/feather-customised/x.9662221.svg);mask-image:url(../../img/feather-customised/x.9662221.svg);background-color:#ff4b55}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_subtitle{padding:0 10px;font-size:1rem;line-height:1.4rem;margin-top:-4px;margin-bottom:4px;color:#61708b}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_network{font-size:1.2rem;line-height:1.6rem;padding:4px 10px;cursor:pointer;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_network[aria-checked=true]:after{content:"";position:absolute;width:16px;height:16px;right:10px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/feather-customised/check.5745b4e.svg);mask-image:url(../../img/feather-customised/check.5745b4e.svg);background-color:#0dbd8b}.mx_NetworkDropdown_server_add:hover,.mx_NetworkDropdown_server_network:hover{background-color:#f3f8fd}.mx_NetworkDropdown_server_add{padding:16px 10px 16px 32px;position:relative;border-radius:0 0 4px 4px}.mx_NetworkDropdown_server_add:before{content:"";position:absolute;width:16px;height:16px;left:7px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/feather-customised/plus.38ae979.svg);mask-image:url(../../img/feather-customised/plus.38ae979.svg);background-color:#61708b}.mx_NetworkDropdown_handle{position:relative}.mx_NetworkDropdown_handle:after{content:"";position:absolute;width:26px;height:26px;right:-27.5px;top:-3px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);background-color:#2e2f32}.mx_NetworkDropdown_handle .mx_NetworkDropdown_handle_server{color:#61708b;font-size:1.2rem}.mx_NetworkDropdown_dialog .mx_Dialog{width:45vw}.mx_AccessibleButton{cursor:pointer}.mx_AccessibleButton_disabled{cursor:default}.mx_AccessibleButton_hasKind{padding:7px 18px;text-align:center;border-radius:8px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:1.4rem}.mx_AccessibleButton_kind_primary{color:#fff;background-color:#0dbd8b;font-weight:600}.mx_AccessibleButton_kind_primary_outline{color:#0dbd8b;background-color:#fff;border:1px solid #0dbd8b;font-weight:600}.mx_AccessibleButton_kind_secondary{color:#0dbd8b;font-weight:600}.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled,.mx_AccessibleButton_kind_primary_outline.mx_AccessibleButton_disabled{opacity:.4}.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm{padding:5px 12px;color:#fff;background-color:#0dbd8b}.mx_AccessibleButton_kind_primary_sm.mx_AccessibleButton_disabled{opacity:.4}.mx_AccessibleButton_kind_danger{color:#fff;background-color:#ff4b55}.mx_AccessibleButton_kind_danger_outline{color:#ff4b55;background-color:#fff;border:1px solid #ff4b55}.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled{color:#fff;background-color:#f5b6bb}.mx_AccessibleButton_kind_danger_outline.mx_AccessibleButton_disabled{color:#f5b6bb;border-color:#f5b6bb}.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm{padding:5px 12px;color:#fff;background-color:#ff4b55}.mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled{color:#fff;background-color:#f5b6bb}.mx_AccessibleButton_kind_link{color:#0dbd8b;background-color:transparent}.mx_AccessibleButton_kind_link.mx_AccessibleButton_disabled{opacity:.4}.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link_sm{padding:5px 12px;color:#0dbd8b;background-color:transparent}.mx_AccessibleButton_kind_link_sm.mx_AccessibleButton_disabled{opacity:.4}.mx_AddressSelector{position:absolute;background-color:#fff;width:485px;max-height:116px;overflow-y:auto;border-radius:3px;border:1px solid #0dbd8b;cursor:pointer;z-index:1}.mx_AddressSelector.mx_AddressSelector_empty{display:none}.mx_AddressSelector_addressListElement .mx_AddressTile{background-color:#fff;border:1px solid #fff}.mx_AddressSelector_addressListElement.mx_AddressSelector_selected{background-color:#f2f5f8}.mx_AddressSelector_addressListElement.mx_AddressSelector_selected .mx_AddressTile{background-color:#f2f5f8;border:1px solid #f2f5f8}.mx_AddressTile{display:inline-block;border-radius:3px;background-color:rgba(74,73,74,.1);border:1px solid #e7e7e7;line-height:2.6rem;color:#2e2f32;font-size:1.4rem;font-weight:400;margin-right:4px}.mx_AddressTile.mx_AddressTile_error{background-color:rgba(255,0,100,.1);color:#ff4b55;border-color:#ff4b55}.mx_AddressTile_network{padding-right:4px}.mx_AddressTile_avatar,.mx_AddressTile_network{display:inline-block;position:relative;padding-left:2px;vertical-align:middle}.mx_AddressTile_avatar{padding-right:7px}.mx_AddressTile_mx{display:inline-block;margin:0;border:0;padding:0}.mx_AddressTile_name{display:inline-block;padding-right:4px;font-weight:600;overflow:hidden;height:26px;vertical-align:middle}.mx_AddressTile_name.mx_AddressTile_justified{width:180px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_id{display:inline-block;padding-right:11px}.mx_AddressTile_id.mx_AddressTile_justified{width:200px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_unknownMx{display:inline-block;font-weight:600;padding-right:11px}.mx_AddressTile_unknownMxl.mx_AddressTile_justified{width:380px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_email{display:inline-block;font-weight:600;padding-right:11px}.mx_AddressTile_email.mx_AddressTile_justified{width:200px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_unknown{display:inline-block;padding-right:11px}.mx_AddressTile_unknown.mx_AddressTile_justified{width:380px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_dismiss{display:inline-block;padding-right:11px;padding-left:1px;cursor:pointer}.mx_AddressTile_dismiss object{pointer-events:none}.mx_DesktopBuildsNotice{text-align:center;padding:0 16px}.mx_DesktopBuildsNotice>*{vertical-align:middle}.mx_DesktopBuildsNotice>img{margin-right:8px}.mx_desktopCapturerSourcePicker{overflow:hidden}.mx_desktopCapturerSourcePicker_tabLabels{display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 0 8px}.mx_desktopCapturerSourcePicker_tabLabel,.mx_desktopCapturerSourcePicker_tabLabel_selected{width:100%;text-align:center;border-radius:8px;padding:8px 0;font-size:1.3rem}.mx_desktopCapturerSourcePicker_tabLabel_selected{background-color:#0dbd8b;color:#fff}.mx_desktopCapturerSourcePicker_panel{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;height:500px;overflow:overlay}.mx_desktopCapturerSourcePicker_stream_button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:8px;border-radius:4px}.mx_desktopCapturerSourcePicker_stream_button:focus,.mx_desktopCapturerSourcePicker_stream_button:hover{background:#fff}.mx_desktopCapturerSourcePicker_stream_thumbnail{margin:4px;width:312px}.mx_desktopCapturerSourcePicker_stream_name{margin:0 4px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:312px}.mx_DirectorySearchBox{display:-webkit-box;display:-ms-flexbox;display:flex;padding-left:9px;padding-right:9px}.mx_DirectorySearchBox_joinButton{display:table-cell;padding:3px 10px;background-color:#f2f5f8;border-radius:3px;background-image:url(../../img/icon-return.cb24475.svg);background-position:8px 70%;background-repeat:no-repeat;text-indent:18px;font-weight:600;font-size:1.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.mx_DirectorySearchBox_clear{background-color:#ff4b55;-webkit-mask:url(../../img/cancel.4b9715b.svg);mask:url(../../img/cancel.4b9715b.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:10px;mask-size:10px;width:15px;height:15px;cursor:pointer}.mx_Dropdown{position:relative;color:#2e2f32}.mx_Dropdown_disabled{opacity:.3}.mx_Dropdown_input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;border-radius:3px;border:1px solid #c7c7c7;font-size:1.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_Dropdown_input.mx_AccessibleButton_disabled{cursor:not-allowed}.mx_Dropdown_input:focus{border-color:#238cf5}.mx_Dropdown_input.mx_AccessibleButton:focus{-webkit-filter:none;filter:none}.mx_Dropdown_arrow{width:10px;height:6px;padding-right:9px;-webkit-mask:url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);mask:url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#2e2f32}.mx_Dropdown_option{height:35px;line-height:3.5rem;padding-left:8px;padding-right:8px}.mx_Dropdown_input>.mx_Dropdown_option{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_Dropdown_input>.mx_Dropdown_option,.mx_Dropdown_option div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mx_Dropdown_option .mx_Dropdown_option_emoji,.mx_Dropdown_option img{margin:5px;width:16px;vertical-align:middle}.mx_Dropdown_option_emoji{font-size:1.6rem;line-height:1.6rem}input.mx_Dropdown_option,input.mx_Dropdown_option:focus{font-weight:400;border:0;padding-top:0;padding-bottom:0;width:60%}.mx_Dropdown_menu{position:absolute;left:-1px;right:-1px;top:100%;z-index:2;margin:0;padding:0;border-radius:3px;border:1px solid #238cf5;background-color:#fff;max-height:200px;overflow-y:auto}.mx_Dropdown_menu .mx_Dropdown_option{height:auto;min-height:35px}.mx_Dropdown_menu .mx_Dropdown_option_highlight{background-color:#ddd}.mx_Dropdown_searchPrompt{font-weight:400;margin-left:5px;margin-bottom:5px}.mx_EditableItemList{margin-top:12px;margin-bottom:10px}.mx_EditableItem{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:5px}.mx_EditableItem_delete{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3;margin-right:5px;cursor:pointer;vertical-align:middle;width:14px;height:14px;-webkit-mask-image:url(../../img/feather-customised/cancel.23c2689.svg);mask-image:url(../../img/feather-customised/cancel.23c2689.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#ff4b55;-webkit-mask-size:100%;mask-size:100%}.mx_EditableItem_email{vertical-align:middle}.mx_EditableItem_promptText{margin-right:10px;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.mx_EditableItem_confirmBtn{margin-right:5px}.mx_EditableItem_item{-webkit-box-flex:1;-ms-flex:auto 1 0px;flex:auto 1 0;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;width:calc(100% - 14px);overflow-x:hidden;text-overflow:ellipsis}.mx_EditableItemList_label{margin-bottom:5px}.mx_ErrorBoundary{width:100%;height:100%;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_ErrorBoundary,.mx_ErrorBoundary_body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_ErrorBoundary_body{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-width:400px}.mx_ErrorBoundary_body .mx_AccessibleButton{margin-top:5px}.mx_EventListSummary{position:relative}.mx_TextualEvent.mx_EventListSummary_summary{font-size:1.4rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mx_EventListSummary_avatars{display:inline-block;margin-right:8px;padding-top:8px;line-height:1.2rem}.mx_EventListSummary_avatars .mx_BaseAvatar{margin-right:-4px;cursor:pointer}.mx_EventListSummary_toggle{color:#0dbd8b;cursor:pointer;float:right;margin-right:10px;margin-top:8px}.mx_EventListSummary_line{border-bottom:1px solid transparent;margin-left:63px;line-height:3rem}.mx_MatrixChat_useCompactLayout .mx_EventListSummary{font-size:1.3rem}.mx_MatrixChat_useCompactLayout .mx_EventListSummary .mx_EventTile_line{line-height:2rem}.mx_MatrixChat_useCompactLayout .mx_EventListSummary_line{line-height:2.2rem}.mx_MatrixChat_useCompactLayout .mx_EventListSummary_toggle{margin-top:3px}.mx_MatrixChat_useCompactLayout .mx_TextualEvent.mx_EventListSummary_summary{font-size:1.3rem}.mx_FacePile .mx_FacePile_faces{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;vertical-align:middle}.mx_FacePile .mx_FacePile_faces>.mx_FacePile_face+.mx_FacePile_face{margin-right:-8px}.mx_FacePile .mx_FacePile_faces .mx_BaseAvatar_image{border:1px solid #fff}.mx_FacePile .mx_FacePile_faces .mx_BaseAvatar_initial{margin:1px}.mx_FacePile .mx_FacePile_faces .mx_FacePile_more{position:relative;border-radius:100%;width:30px;height:30px;background-color:hsla(0,0%,91%,.77)}.mx_FacePile .mx_FacePile_faces .mx_FacePile_more:before{content:"";z-index:1;position:absolute;top:0;left:0;height:inherit;width:inherit;background:#8d99a5;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:20px;mask-size:20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg)}.mx_FacePile .mx_FacePile_summary{margin-left:12px;font-size:1.4rem;line-height:2.4rem;color:#8d99a5}.mx_Field{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0;position:relative;margin:1em 0;border-radius:4px;-webkit-transition:border-color .25s;transition:border-color .25s;border:1px solid #e7e7e7}.mx_Field_prefix{border-right:1px solid #e7e7e7}.mx_Field_postfix{border-left:1px solid #e7e7e7}.mx_Field input,.mx_Field select,.mx_Field textarea{font-weight:400;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;border:none;border-radius:4px;padding:8px 9px;color:#2e2f32;background-color:#fff;-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.mx_Field select{-moz-appearance:none;-webkit-appearance:none}.mx_Field_select:before{content:"";position:absolute;top:15px;right:10px;width:10px;height:6px;-webkit-mask:url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);mask:url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#2e2f32;z-index:1;pointer-events:none}.mx_Field:focus-within{border-color:#238cf5}.mx_Field input:focus,.mx_Field select:focus,.mx_Field textarea:focus{outline:0}.mx_Field input::-webkit-input-placeholder,.mx_Field textarea::-webkit-input-placeholder{-webkit-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input::-moz-placeholder,.mx_Field textarea::-moz-placeholder{-moz-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input:-ms-input-placeholder,.mx_Field textarea:-ms-input-placeholder{-ms-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input::-ms-input-placeholder,.mx_Field textarea::-ms-input-placeholder{-ms-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input::placeholder,.mx_Field textarea::placeholder{-webkit-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input:placeholder-shown:focus::-webkit-input-placeholder,.mx_Field textarea:placeholder-shown:focus::-webkit-input-placeholder{-webkit-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:placeholder-shown:focus::-moz-placeholder,.mx_Field textarea:placeholder-shown:focus::-moz-placeholder{-moz-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:placeholder-shown:focus:-ms-input-placeholder,.mx_Field textarea:placeholder-shown:focus:-ms-input-placeholder{-ms-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:placeholder-shown:focus::-ms-input-placeholder,.mx_Field textarea:placeholder-shown:focus::-ms-input-placeholder{-ms-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:-moz-placeholder-shown:focus::placeholder,.mx_Field textarea:-moz-placeholder-shown:focus::placeholder{-moz-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:-ms-input-placeholder:focus::placeholder,.mx_Field textarea:-ms-input-placeholder:focus::placeholder{-ms-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:placeholder-shown:focus::placeholder,.mx_Field textarea:placeholder-shown:focus::placeholder{-webkit-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field label{-webkit-transition:font-size .25s ease-out .1s,color .25s ease-out .1s,top .25s ease-out .1s,background-color .25s ease-out .1s;transition:font-size .25s ease-out .1s,color .25s ease-out .1s,top .25s ease-out .1s,background-color .25s ease-out .1s;color:#2e2f32;background-color:transparent;font-size:1.4rem;position:absolute;left:0;top:0;margin:7px 8px;padding:2px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:calc(100% - 20px)}.mx_Field input:not(:-moz-placeholder-shown)+label,.mx_Field textarea:not(:-moz-placeholder-shown)+label{-moz-transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;font-size:1rem;top:-13px;padding:0 2px;background-color:#fff;pointer-events:auto}.mx_Field input:not(:-ms-input-placeholder)+label,.mx_Field textarea:not(:-ms-input-placeholder)+label{-ms-transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;font-size:1rem;top:-13px;padding:0 2px;background-color:#fff;pointer-events:auto}.mx_Field_labelAlwaysTopLeft label,.mx_Field input:focus+label,.mx_Field input:not(:placeholder-shown)+label,.mx_Field select+label,.mx_Field textarea:focus+label,.mx_Field textarea:not(:placeholder-shown)+label{-webkit-transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;font-size:1rem;top:-13px;padding:0 2px;background-color:#fff;pointer-events:auto}.mx_Field input:focus+label,.mx_Field select:focus+label,.mx_Field textarea:focus+label{color:#238cf5}.mx_Field input:disabled,.mx_Field input:disabled+label,.mx_Field select:disabled,.mx_Field select:disabled+label,.mx_Field textarea:disabled,.mx_Field textarea:disabled+label{background-color:#fff;color:#888}.mx_Field_valid.mx_Field,.mx_Field_valid.mx_Field:focus-within{border-color:#0dbd8b}.mx_Field_valid.mx_Field:focus-within label,.mx_Field_valid.mx_Field label{color:#0dbd8b}.mx_Field_invalid.mx_Field,.mx_Field_invalid.mx_Field:focus-within{border-color:#ff4b55}.mx_Field_invalid.mx_Field:focus-within label,.mx_Field_invalid.mx_Field label{color:#ff4b55}.mx_Field_tooltip{margin-top:-12px;margin-left:4px;width:200px}.mx_Field_tooltip.mx_Field_valid{-webkit-animation:mx_fadeout 1s 2s forwards;animation:mx_fadeout 1s 2s forwards}.mx_Field .mx_Dropdown_input{border:initial;border-radius:0;border-radius:initial}.mx_Field .mx_CountryDropdown{width:7.8rem}.mx_FormButton{line-height:1.6rem;padding:5px 15px;font-size:1.2rem;height:-webkit-min-content;height:-moz-min-content;height:min-content}.mx_FormButton:not(:last-child){margin-right:8px}.mx_FormButton.mx_AccessibleButton_kind_primary{color:#0dbd8b;background-color:rgba(3,179,129,.16)}.mx_FormButton.mx_AccessibleButton_kind_danger{color:#ff4b55;background-color:rgba(255,75,85,.16)}.mx_FormButton.mx_AccessibleButton_kind_secondary{color:#737d8c;border:1px solid #737d8c;background-color:unset}.mx_ImageView{width:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_ImageView,.mx_ImageView_image_wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%}.mx_ImageView_image_wrapper{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.mx_ImageView_image{pointer-events:all;-ms-flex-negative:0;flex-shrink:0}.mx_ImageView_panel{width:100%;height:68px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mx_ImageView_info_wrapper,.mx_ImageView_panel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_ImageView_info_wrapper{pointer-events:all;padding-left:32px;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;color:#fff}.mx_ImageView_info{padding-left:12px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_ImageView_info_sender{font-weight:700}.mx_ImageView_toolbar{padding-right:16px;pointer-events:all;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_ImageView_button{margin-left:24px;display:block}.mx_ImageView_button:before{content:"";height:22px;width:22px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;display:block;background-color:#c1c6cd}.mx_ImageView_button_rotateCW:before{-webkit-mask-image:url(../../img/image-view/rotate-cw.60d903e.svg);mask-image:url(../../img/image-view/rotate-cw.60d903e.svg)}.mx_ImageView_button_rotateCCW:before{-webkit-mask-image:url(../../img/image-view/rotate-ccw.b28ae4a.svg);mask-image:url(../../img/image-view/rotate-ccw.b28ae4a.svg)}.mx_ImageView_button_zoomOut:before{-webkit-mask-image:url(../../img/image-view/zoom-out.8506f80.svg);mask-image:url(../../img/image-view/zoom-out.8506f80.svg)}.mx_ImageView_button_zoomIn:before{-webkit-mask-image:url(../../img/image-view/zoom-in.3b3f32e.svg);mask-image:url(../../img/image-view/zoom-in.3b3f32e.svg)}.mx_ImageView_button_download:before{-webkit-mask-image:url(../../img/image-view/download.2eac468.svg);mask-image:url(../../img/image-view/download.2eac468.svg)}.mx_ImageView_button_more:before{-webkit-mask-image:url(../../img/image-view/more.0427c6c.svg);mask-image:url(../../img/image-view/more.0427c6c.svg)}.mx_ImageView_button_close{border-radius:100%;background:#21262c}.mx_ImageView_button_close:before{width:32px;height:32px;-webkit-mask-image:url(../../img/image-view/close.97d1731.svg);mask-image:url(../../img/image-view/close.97d1731.svg);-webkit-mask-size:40%;mask-size:40%}.mx_InfoTooltip_icon,.mx_InfoTooltip_icon:before{width:16px;height:16px;display:inline-block}.mx_InfoTooltip_icon:before{background-color:#61708b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-position:center;mask-position:center;content:"";vertical-align:middle;-webkit-mask-image:url(../../img/element-icons/info.dc07e19.svg);mask-image:url(../../img/element-icons/info.dc07e19.svg)}.mx_InlineSpinner{display:inline}.mx_InlineSpinner_spin img{margin:0 6px;vertical-align:-3px}.mx_InviteReason{position:relative;margin-bottom:1em}.mx_InviteReason .mx_InviteReason_reason{visibility:visible}.mx_InviteReason .mx_InviteReason_view{display:none;position:absolute;top:0;bottom:0;left:0;right:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;color:#737d8c}.mx_InviteReason .mx_InviteReason_view:before{content:"";margin-right:8px;background-color:#737d8c;-webkit-mask-image:url(../../img/feather-customised/eye.52aa0d2.svg);mask-image:url(../../img/feather-customised/eye.52aa0d2.svg);display:inline-block;width:18px;height:14px}.mx_InviteReason_hidden .mx_InviteReason_reason{visibility:hidden}.mx_InviteReason_hidden .mx_InviteReason_view{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_ManageIntegsButton_error{position:relative;float:right;cursor:not-allowed}.mx_ManageIntegsButton_error img{position:absolute;right:-5px;top:-5px}.mx_ManageIntegsButton_errorPopup{position:absolute;top:110%;left:-275%;width:550%;padding:30%;font-size:10pt;line-height:1.5em;border-radius:5px;background-color:#0dbd8b;color:#fff;text-align:center;z-index:1000}.mx_ManageIntegsButton_error .mx_ManageIntegsButton_errorPopup{display:none}.mx_ManageIntegsButton_error:hover .mx_ManageIntegsButton_errorPopup{display:inline}.mx_MiniAvatarUploader{position:relative;width:-webkit-min-content;width:-moz-min-content;width:min-content}.mx_MiniAvatarUploader .mx_Tooltip{display:inline-block;position:absolute;z-index:unset;width:-webkit-max-content;width:-moz-max-content;width:max-content;left:72px;top:0}.mx_MiniAvatarUploader:after,.mx_MiniAvatarUploader:before{content:"";position:absolute;height:26px;width:26px;right:-6px;bottom:-6px}.mx_MiniAvatarUploader:before{background-color:#fff;border-radius:50%;z-index:1}.mx_MiniAvatarUploader:after{background-color:#737d8c;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/camera.a81a395.svg);mask-image:url(../../img/element-icons/camera.a81a395.svg);-webkit-mask-size:16px;mask-size:16px;z-index:2}.mx_MiniAvatarUploader.mx_MiniAvatarUploader_busy:after{background:url(../../img/spinner.0b29ec9.gif) no-repeat 50%;background-size:80%;-webkit-mask:unset;mask:unset}.mx_MiniAvatarUploader_input{display:none}.mx_PowerSelector{width:100%}.mx_PowerSelector .mx_Field input,.mx_PowerSelector .mx_Field select{-webkit-box-sizing:border-box;box-sizing:border-box}progress.mx_ProgressBar{height:6px;width:60px;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:6px}progress.mx_ProgressBar::-moz-progress-bar{border-radius:6px}progress.mx_ProgressBar::-webkit-progress-bar,progress.mx_ProgressBar::-webkit-progress-value{border-radius:6px}progress.mx_ProgressBar{color:#0dbd8b}progress.mx_ProgressBar::-moz-progress-bar{background-color:#0dbd8b}progress.mx_ProgressBar::-webkit-progress-value{background-color:#0dbd8b}progress.mx_ProgressBar{background-color:rgba(141,151,165,.2)}progress.mx_ProgressBar::-webkit-progress-bar{background-color:rgba(141,151,165,.2)}progress.mx_ProgressBar ::-webkit-progress-value{-webkit-transition:width 1s;transition:width 1s}progress.mx_ProgressBar ::-moz-progress-bar{-moz-transition:padding-bottom 1s;transition:padding-bottom 1s;padding-bottom:var(--value);transform-origin:0 0;transform:rotate(-90deg) translateX(-15px);padding-left:15px;height:0}.mx_QRCode img{border-radius:8px}.mx_ReplyThread{margin-top:0}.mx_ReplyThread .mx_DateSeparator{font-size:1em!important;margin-top:0;margin-bottom:0;padding-bottom:1px;bottom:-5px}.mx_ReplyThread_show{cursor:pointer}blockquote.mx_ReplyThread{margin-left:0;padding-left:10px;border-left:4px solid #ddd}.mx_ResizeHandle{cursor:row-resize;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;z-index:100}.mx_ResizeHandle.mx_ResizeHandle_horizontal{margin:0 -5px;padding:0 5px;cursor:col-resize}.mx_ResizeHandle.mx_ResizeHandle_vertical{margin:-5px 0;padding:5px 0;cursor:row-resize}.mx_MatrixChat>.mx_ResizeHandle.mx_ResizeHandle_horizontal{margin:0 -10px 0 0;padding:0 8px 0 0}.mx_ResizeHandle>div{background:transparent}.mx_ResizeHandle.mx_ResizeHandle_horizontal>div{width:1px;height:100%}.mx_ResizeHandle.mx_ResizeHandle_vertical>div{height:1px}.mx_AtRoomPill,.mx_GroupPill,.mx_RoomPill,.mx_UserPill{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:middle;border-radius:1.6rem;line-height:1.5rem;padding-left:0}a.mx_Pill{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 1ch)}.mx_Pill{padding:.1rem .4em .1rem .1rem;vertical-align:text-top;line-height:1.7rem}.mx_EventTile_content .markdown-body a.mx_GroupPill,.mx_GroupPill{color:#fff;background-color:#aaa}.mx_EventTile_content .markdown-body a.mx_Pill{text-decoration:none}.mx_EventTile_content .markdown-body a.mx_UserPill,.mx_UserPill{color:#2e2f32;background-color:rgba(0,0,0,.1)}.mx_UserPill_selected{background-color:#0dbd8b!important}.mx_EventTile_content .markdown-body a.mx_AtRoomPill,.mx_EventTile_content .mx_AtRoomPill,.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me,.mx_MessageComposer_input .mx_AtRoomPill{color:#fff;background-color:#ff4b55}.mx_EventTile_content .markdown-body a.mx_GroupPill,.mx_EventTile_content .markdown-body a.mx_RoomPill,.mx_GroupPill,.mx_RoomPill{color:#fff;background-color:#aaa}.mx_EventTile_body .mx_GroupPill,.mx_EventTile_body .mx_RoomPill,.mx_EventTile_body .mx_UserPill{cursor:pointer}.mx_AtRoomPill .mx_BaseAvatar,.mx_GroupPill .mx_BaseAvatar,.mx_RoomPill .mx_BaseAvatar,.mx_UserPill .mx_BaseAvatar{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:10rem;margin-right:.24rem}.mx_Markdown_BOLD{font-weight:700}.mx_Markdown_ITALIC{font-style:italic}.mx_Markdown_CODE{padding:.2em 0;margin:0;font-size:85%;background-color:rgba(0,0,0,.04);border-radius:3px}.mx_Markdown_HR{display:block;background:#e9e9e9}.mx_Markdown_STRIKETHROUGH{text-decoration:line-through}.mx_RoleButton{margin-left:4px;margin-right:4px;cursor:pointer;display:inline-block}.mx_RoleButton object{pointer-events:none}.mx_RoleButton_tooltip{display:inline-block;position:relative;top:-25px;left:6px}.mx_RoomAliasField{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;min-width:0;max-width:100%}.mx_RoomAliasField input{width:150px;padding-left:0;padding-right:0}.mx_RoomAliasField input::-webkit-input-placeholder{color:#888;font-weight:400}.mx_RoomAliasField input::-moz-placeholder{color:#888;font-weight:400}.mx_RoomAliasField input:-ms-input-placeholder{color:#888;font-weight:400}.mx_RoomAliasField input::-ms-input-placeholder{color:#888;font-weight:400}.mx_RoomAliasField input::placeholder{color:#888;font-weight:400}.mx_RoomAliasField .mx_Field_postfix,.mx_RoomAliasField .mx_Field_prefix{color:#888;border-left:none;border-right:none;font-weight:600;padding:9px 10px;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_RoomAliasField .mx_Field_postfix{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 180px)}.mx_SSOButtons{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_SSOButtons .mx_SSOButtons_row+.mx_SSOButtons_row{margin-top:16px}.mx_SSOButtons .mx_SSOButton{position:relative;width:100%;padding:7px 32px;text-align:center;border-radius:8px;display:inline-block;font-size:1.4rem;font-weight:600;border:1px solid #e7e7e7;color:#2e2f32}.mx_SSOButtons .mx_SSOButton>img{-o-object-fit:contain;object-fit:contain;position:absolute;left:8px;top:4px}.mx_SSOButtons .mx_SSOButton_default{color:#0dbd8b;background-color:#fff;border-color:#0dbd8b}.mx_SSOButtons .mx_SSOButton_default.mx_SSOButton_primary{color:#fff;background-color:#0dbd8b}.mx_SSOButtons .mx_SSOButton_mini{-webkit-box-sizing:border-box;box-sizing:border-box;width:50px;height:50px;min-width:50px;padding:12px}.mx_SSOButtons .mx_SSOButton_mini>img{left:12px;top:12px}.mx_SSOButtons .mx_SSOButton_mini+.mx_SSOButton_mini{margin-left:16px}.mx_ServerPicker{margin-bottom:14px;border-bottom:1px solid rgba(141,151,165,.2);display:grid;grid-template-columns:auto -webkit-min-content;grid-template-columns:auto min-content;grid-template-rows:auto auto auto;font-size:1.4rem;line-height:2rem}.mx_ServerPicker>h3{font-weight:600;margin:0 0 20px;grid-column:1;grid-row:1}.mx_ServerPicker .mx_ServerPicker_help{width:20px;height:20px;background-color:#c1c6cd;border-radius:10px;grid-column:2;grid-row:1;margin-left:auto;text-align:center;color:#fff;font-size:16px;position:relative}.mx_ServerPicker .mx_ServerPicker_help:before{content:"";width:24px;height:24px;position:absolute;top:-2px;left:-2px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/i.80d84f3.svg);mask-image:url(../../img/element-icons/i.80d84f3.svg);background:#fff}.mx_ServerPicker .mx_ServerPicker_server{color:#232f32;grid-column:1;grid-row:2;margin-bottom:16px}.mx_ServerPicker .mx_ServerPicker_change{padding:0;font-size:inherit;grid-column:2;grid-row:2}.mx_ServerPicker .mx_ServerPicker_desc{margin-top:-12px;color:#8d99a5;grid-column:1/2;grid-row:3;margin-bottom:16px}.mx_ServerPicker_helpDialog .mx_Dialog_content{width:456px}.mx_Slider{position:relative;margin:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_Slider_dotContainer{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mx_Slider_bar,.mx_Slider_dotContainer{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_Slider_bar{-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;height:1em;width:100%;padding:0 .5em;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_Slider_bar>hr{width:100%;height:.4em;background-color:#c1c9d6;border:0}.mx_Slider_selection{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:calc(100% - 1em);height:1em;position:absolute;pointer-events:none}.mx_Slider_selectionDot{position:absolute;width:1.1em;height:1.1em;background-color:#0dbd8b;border-radius:50%;-webkit-box-shadow:0 0 6px #d3d3d3;box-shadow:0 0 6px #d3d3d3;z-index:10}.mx_Slider_selection>hr{margin:0;border:.2em solid #0dbd8b}.mx_Slider_dot{height:1em;width:1em;border-radius:50%;background-color:#c1c9d6;z-index:0}.mx_Slider_dotActive{background-color:#0dbd8b}.mx_Slider_dotValue{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#c1c9d6}.mx_Slider_labelContainer{width:1em}.mx_Slider_label{position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;left:-50%}.mx_Spinner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_MatrixChat_middlePanel .mx_Spinner{height:auto}.mx_Checkbox{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mx_Checkbox input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0}.mx_Checkbox input[type=checkbox]+label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_Checkbox input[type=checkbox]+label>.mx_Checkbox_background{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-negative:0;flex-shrink:0;height:1.6rem;width:1.6rem;size:.5rem;border:.15rem solid rgba(97,112,139,.5);-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:.4rem}.mx_Checkbox input[type=checkbox]+label>.mx_Checkbox_background img{display:none;height:100%;width:100%;-webkit-filter:invert(100%);filter:invert(100%)}.mx_Checkbox input[type=checkbox]:checked+label>.mx_Checkbox_background{background:#0dbd8b;border-color:#0dbd8b}.mx_Checkbox input[type=checkbox]:checked+label>.mx_Checkbox_background img{display:block}.mx_Checkbox input[type=checkbox]+label>:not(.mx_Checkbox_background){margin-left:10px}.mx_Checkbox input[type=checkbox]:disabled+label{opacity:.5;cursor:not-allowed}.mx_Checkbox input[type=checkbox]:checked:disabled+label>.mx_Checkbox_background{background-color:#0dbd8b;border-color:#0dbd8b}.mx_Checkbox input[type=checkbox].focus-visible+label .mx_Checkbox_background{outline-width:2px;outline-style:solid;outline-color:Highlight}@media (-webkit-min-device-pixel-ratio:0){.mx_Checkbox input[type=checkbox].focus-visible+label .mx_Checkbox_background{outline-color:-webkit-focus-ring-color;outline-style:auto}}.mx_RadioButton{position:relative;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.mx_RadioButton,.mx_RadioButton>.mx_RadioButton_content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_RadioButton>.mx_RadioButton_content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-left:8px;margin-right:8px}.mx_RadioButton .mx_RadioButton_spacer{-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;height:1.6rem;width:1.6rem}.mx_RadioButton>input[type=radio]{margin:0;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.mx_RadioButton>input[type=radio]+div{-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;height:1.6rem;width:1.6rem;margin-left:2px;border:.15rem solid #61708b;border-radius:1.6rem}.mx_RadioButton>input[type=radio]+div>div{-webkit-box-sizing:border-box;box-sizing:border-box;height:.8rem;width:.8rem;border-radius:.8rem}.mx_RadioButton>input[type=radio].focus-visible+div{outline-width:2px;outline-style:solid;outline-color:Highlight}@media (-webkit-min-device-pixel-ratio:0){.mx_RadioButton>input[type=radio].focus-visible+div{outline-color:-webkit-focus-ring-color;outline-style:auto}}.mx_RadioButton>input[type=radio]:checked+div{border-color:#0dbd8b}.mx_RadioButton>input[type=radio]:checked+div>div{background:#0dbd8b}.mx_RadioButton>input[type=radio]:disabled+div,.mx_RadioButton>input[type=radio]:disabled+div+span{opacity:.5;cursor:not-allowed}.mx_RadioButton>input[type=radio]:disabled+div{border-color:#61708b}.mx_RadioButton>input[type=radio]:checked:disabled+div>div{background-color:#61708b}.mx_RadioButton_outlined{border:1px solid #e3e8f0;border-radius:8px}.mx_RadioButton_checked{border-color:#0dbd8b}.mx_SyntaxHighlight{background:none!important;color:#747474!important}.mx_TextWithTooltip_tooltip{display:none}.mx_ToggleSwitch{-webkit-transition:background-color .2s ease-out .1s;transition:background-color .2s ease-out .1s;width:4.4rem;height:2rem;border-radius:1.5rem;padding:2px;background-color:#c1c9d6;opacity:.5}.mx_ToggleSwitch_enabled{cursor:pointer;opacity:1}.mx_ToggleSwitch.mx_ToggleSwitch_on{background-color:#0dbd8b}.mx_ToggleSwitch.mx_ToggleSwitch_on>.mx_ToggleSwitch_ball{left:calc(100% - 2rem)}.mx_ToggleSwitch_ball{position:relative;width:2rem;height:2rem;border-radius:2rem;background-color:#fff;-webkit-transition:left .15s ease-out .1s;transition:left .15s ease-out .1s;left:0}@-webkit-keyframes mx_fadein{0%{opacity:0}to{opacity:1}}@keyframes mx_fadein{0%{opacity:0}to{opacity:1}}@-webkit-keyframes mx_fadeout{0%{opacity:1}to{opacity:0}}@keyframes mx_fadeout{0%{opacity:1}to{opacity:0}}.mx_Tooltip_chevron{position:absolute;left:-7px;top:10px;width:0;height:0;border-top:7px solid transparent;border-right:7px solid #e7e7e7;border-bottom:7px solid transparent}.mx_Tooltip_chevron:after{content:"";width:0;height:0;border-top:6px solid transparent;border-right:6px solid #fff;border-bottom:6px solid transparent;position:absolute;top:-6px;left:1px}.mx_Tooltip{position:fixed;border-radius:8px;-webkit-box-shadow:4px 4px 12px 0 rgba(118,131,156,.6);box-shadow:4px 4px 12px 0 rgba(118,131,156,.6);z-index:6000;padding:10px;pointer-events:none;line-height:1.4rem;font-size:1.2rem;font-weight:500;max-width:200px;word-break:break-word;margin-right:50px;background-color:#27303a;color:#fff;border:0;text-align:center}.mx_Tooltip,.mx_Tooltip .mx_Tooltip_chevron{display:none}.mx_Tooltip.mx_Tooltip_visible{-webkit-animation:mx_fadein .2s forwards;animation:mx_fadein .2s forwards}.mx_Tooltip.mx_Tooltip_invisible{-webkit-animation:mx_fadeout .1s forwards;animation:mx_fadeout .1s forwards}.mx_Field_tooltip{background-color:#fff;color:#2e2f32;border:1px solid #e7e7e7;text-align:unset}.mx_Field_tooltip .mx_Tooltip_chevron{display:unset}.mx_Tooltip_title{font-weight:600}.mx_Tooltip_sub{opacity:.7;margin-top:4px}.mx_TooltipButton{display:inline-block;width:11px;height:11px;margin-left:5px;border:2px solid #dbdbdb;border-radius:20px;color:#dbdbdb;-webkit-transition:opacity .2s ease-in;transition:opacity .2s ease-in;opacity:.6;line-height:1.1rem;text-align:center;cursor:pointer}.mx_TooltipButton:hover{opacity:1}.mx_TooltipButton_container{position:relative;top:-18px;left:4px}.mx_TooltipButton_helpText{width:400px;text-align:start;line-height:17px!important}.mx_Validation{position:relative}.mx_Validation_details{padding-left:20px;margin:0}.mx_Validation_description+.mx_Validation_details{margin:1em 0 0}.mx_Validation_detail{position:relative;font-weight:400;list-style:none;margin-bottom:.5em}.mx_Validation_detail:last-child{margin-bottom:0}.mx_Validation_detail:before{content:"";position:absolute;width:14px;height:14px;top:0;left:-18px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.mx_Validation_detail.mx_Validation_valid{color:#0dbd8b}.mx_Validation_detail.mx_Validation_valid:before{-webkit-mask-image:url(../../img/feather-customised/check.5745b4e.svg);mask-image:url(../../img/feather-customised/check.5745b4e.svg);background-color:#0dbd8b}.mx_Validation_detail.mx_Validation_invalid{color:#ff4b55}.mx_Validation_detail.mx_Validation_invalid:before{-webkit-mask-image:url(../../img/feather-customised/x.9662221.svg);mask-image:url(../../img/feather-customised/x.9662221.svg);background-color:#ff4b55}.mx_EmojiPicker{width:340px;height:450px;border-radius:4px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_EmojiPicker_body{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-y:scroll;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.mx_EmojiPicker_header{padding:4px 8px 0;border-bottom:1px solid #e9edf1}.mx_EmojiPicker_anchor{padding:8px 8px 6px;border:none;border-bottom:2px solid transparent;background-color:transparent;border-radius:4px 4px 0 0;width:36px;height:38px}.mx_EmojiPicker_anchor:not(:disabled){cursor:pointer}.mx_EmojiPicker_anchor:not(:disabled):hover{background-color:#ddd;border-bottom:2px solid #0dbd8b}.mx_EmojiPicker_anchor:before{background-color:#2e2f32;content:"";display:inline-block;-webkit-mask-size:100%;mask-size:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;width:100%;height:100%}.mx_EmojiPicker_anchor:disabled:before{background-color:#ddd}.mx_EmojiPicker_anchor_activity:before{-webkit-mask-image:url(../../img/emojipicker/activity.921ec9f.svg);mask-image:url(../../img/emojipicker/activity.921ec9f.svg)}.mx_EmojiPicker_anchor_custom:before{-webkit-mask-image:url(../../img/emojipicker/custom.e1cd0fd.svg);mask-image:url(../../img/emojipicker/custom.e1cd0fd.svg)}.mx_EmojiPicker_anchor_flags:before{-webkit-mask-image:url(../../img/emojipicker/flags.1a8855e.svg);mask-image:url(../../img/emojipicker/flags.1a8855e.svg)}.mx_EmojiPicker_anchor_foods:before{-webkit-mask-image:url(../../img/emojipicker/foods.c6b220a.svg);mask-image:url(../../img/emojipicker/foods.c6b220a.svg)}.mx_EmojiPicker_anchor_nature:before{-webkit-mask-image:url(../../img/emojipicker/nature.6540b99.svg);mask-image:url(../../img/emojipicker/nature.6540b99.svg)}.mx_EmojiPicker_anchor_objects:before{-webkit-mask-image:url(../../img/emojipicker/objects.4d34f58.svg);mask-image:url(../../img/emojipicker/objects.4d34f58.svg)}.mx_EmojiPicker_anchor_people:before{-webkit-mask-image:url(../../img/emojipicker/people.e918580.svg);mask-image:url(../../img/emojipicker/people.e918580.svg)}.mx_EmojiPicker_anchor_places:before{-webkit-mask-image:url(../../img/emojipicker/places.7310322.svg);mask-image:url(../../img/emojipicker/places.7310322.svg)}.mx_EmojiPicker_anchor_recent:before{-webkit-mask-image:url(../../img/emojipicker/recent.13b42e2.svg);mask-image:url(../../img/emojipicker/recent.13b42e2.svg)}.mx_EmojiPicker_anchor_symbols:before{-webkit-mask-image:url(../../img/emojipicker/symbols.15a557d.svg);mask-image:url(../../img/emojipicker/symbols.15a557d.svg)}.mx_EmojiPicker_anchor_visible{border-bottom:2px solid #0dbd8b}.mx_EmojiPicker_search{margin:8px;border-radius:4px;border:1px solid #e7e7e7;background-color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_EmojiPicker_search input{-webkit-box-flex:1;-ms-flex:1;flex:1;border:none;padding:8px 12px;border-radius:4px 0}.mx_EmojiPicker_search button{border:none;background-color:inherit;margin:0;padding:8px;-ms-flex-item-align:center;align-self:center;width:32px;height:32px}.mx_EmojiPicker_search_clear{cursor:pointer}.mx_EmojiPicker_search_icon{width:16px;margin:8px}.mx_EmojiPicker_search_icon:not(.mx_EmojiPicker_search_clear){pointer-events:none}.mx_EmojiPicker_search_icon:after{-webkit-mask:url(../../img/emojipicker/search.973c315.svg) no-repeat;mask:url(../../img/emojipicker/search.973c315.svg) no-repeat;-webkit-mask-size:100%;mask-size:100%;background-color:#2e2f32;content:"";display:inline-block;width:100%;height:100%}.mx_EmojiPicker_search_clear:after{-webkit-mask-image:url(../../img/emojipicker/delete.f7344c5.svg);mask-image:url(../../img/emojipicker/delete.f7344c5.svg)}.mx_EmojiPicker_category{padding:0 12px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_EmojiPicker_category_label{width:304px}.mx_EmojiPicker_list{width:304px;padding:0;margin:0}.mx_EmojiPicker_item_wrapper{display:inline-block;list-style:none;width:38px;cursor:pointer}.mx_EmojiPicker_item{display:inline-block;font-size:2rem;padding:5px;width:100%;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;border-radius:4px}.mx_EmojiPicker_item:hover{background-color:#ddd}.mx_EmojiPicker_item_selected{color:rgba(0,0,0,.5);border:1px solid #0dbd8b;padding:4px}.mx_EmojiPicker_category_label,.mx_EmojiPicker_preview_name{font-size:1.6rem;font-weight:600;margin:0}.mx_EmojiPicker_footer{border-top:1px solid #e9edf1;min-height:72px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_EmojiPicker_preview_emoji{font-size:3.2rem;padding:8px 16px}.mx_EmojiPicker_preview_text{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_EmojiPicker_name{text-transform:capitalize}.mx_EmojiPicker_shortcode{color:#747474;font-size:1.4rem}.mx_EmojiPicker_shortcode:after,.mx_EmojiPicker_shortcode:before{content:":"}.mx_EmojiPicker_quick{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:distribute;justify-content:space-around}.mx_EmojiPicker_quick_header .mx_EmojiPicker_name{margin-right:4px}.mx_GroupPublicity_toggle{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:8px}.mx_GroupPublicity_toggle .mx_GroupTile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%}.mx_GroupPublicity_toggle .mx_ToggleSwitch{float:right}.mx_GroupRoomTile{position:relative;color:#2e2f32;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_GroupRoomList_wrapper{padding:10px}.mx_GroupUserSettings_groupPublicity_scrollbox{height:200px;border:1px solid transparent;border-radius:3px;overflow:hidden}.mx_CreateEvent:before{background-color:#91a1c0;-webkit-mask-image:url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);mask-image:url(../../img/element-icons/chat-bubbles.e2bd2cb.svg)}.mx_DateSeparator{clear:both;margin:4px 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.4rem;color:#9e9e9e}.mx_DateSeparator>hr{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;height:0;border:none;border-bottom:1px solid transparent}.mx_DateSeparator>div{margin:0 25px;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_EventTileBubble{background-color:#f2f5f8;padding:10px;border-radius:8px;margin:10px auto;max-width:75%;-webkit-box-sizing:border-box;box-sizing:border-box;display:grid;grid-template-columns:24px minmax(0,1fr) -webkit-min-content;grid-template-columns:24px minmax(0,1fr) min-content}.mx_EventTileBubble:after,.mx_EventTileBubble:before{position:relative;grid-column:1;grid-row:1/3;width:16px;height:16px;content:"";top:0;bottom:0;left:0;right:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;margin-top:4px}.mx_EventTileBubble .mx_EventTileBubble_subtitle,.mx_EventTileBubble .mx_EventTileBubble_title{overflow-wrap:break-word}.mx_EventTileBubble .mx_EventTileBubble_title{font-weight:600;font-size:1.5rem;grid-column:2;grid-row:1}.mx_EventTileBubble .mx_EventTileBubble_subtitle{font-size:1.2rem;grid-column:2;grid-row:2}.mx_MEmoteBody{white-space:pre-wrap}.mx_MEmoteBody_sender{cursor:pointer}.mx_MFileBody_download{color:#0dbd8b}.mx_MFileBody_download .mx_MFileBody_download_icon{width:12px;height:12px;-webkit-mask-size:12px;mask-size:12px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/download.4f331f0.svg);mask-image:url(../../img/download.4f331f0.svg);background-color:#0dbd8b;display:inline-block}.mx_MFileBody_download a{color:#0dbd8b;text-decoration:none;cursor:pointer}.mx_MFileBody_download object{margin-left:-16px;padding-right:4px;margin-top:-4px;vertical-align:middle;pointer-events:none}.mx_MFileBody_download iframe{margin:0;padding:0;border:none;width:100%;height:1.5em}.mx_MFileBody_info{background-color:#e3e8f0;border-radius:12px;width:243px;padding:6px 12px;color:#737d8c}.mx_MFileBody_info .mx_MFileBody_info_icon{background-color:#fff;border-radius:20px;display:inline-block;width:32px;height:32px;position:relative;vertical-align:middle;margin-right:12px}.mx_MFileBody_info .mx_MFileBody_info_icon:before{content:"";-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-image:url(../../img/element-icons/room/composer/attach.359c84e.svg);mask-image:url(../../img/element-icons/room/composer/attach.359c84e.svg);background-color:#737d8c;width:13px;height:15px;position:absolute;top:8px;left:9px}.mx_MFileBody_info .mx_MFileBody_info_filename{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:inline-block;width:calc(100% - 44px);vertical-align:middle}.mx_MImageBody{display:block;margin-right:34px}.mx_MImageBody_thumbnail{position:absolute;width:100%;height:100%;left:0;top:0;border-radius:4px}.mx_MImageBody_thumbnail_container{overflow:hidden;position:relative}.mx_MImageBody_thumbnail_spinner{position:absolute;left:50%;top:50%}.mx_MImageBody_thumbnail_spinner>*{-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.mx_MImageBody_gifLabel{position:absolute;display:block;top:0;left:14px;padding:5px;border-radius:5px;background:rgba(0,0,0,.7);border:2px solid rgba(0,0,0,.2);color:#fff;pointer-events:none}.mx_HiddenImagePlaceholder{position:absolute;left:0;top:0;bottom:0;right:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center;cursor:pointer;background-color:#f3f8fd}.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button{color:#0dbd8b}.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button span.mx_HiddenImagePlaceholder_eye{margin-right:8px;background-color:#0dbd8b;-webkit-mask-image:url(../../img/feather-customised/eye.52aa0d2.svg);mask-image:url(../../img/feather-customised/eye.52aa0d2.svg);display:inline-block;width:18px;height:14px}.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button span:not(.mx_HiddenImagePlaceholder_eye){vertical-align:text-bottom}.mx_EventTile:hover .mx_HiddenImagePlaceholder{background-color:#fff}.mx_MJitsiWidgetEvent:before{background-color:#91a1c0;-webkit-mask-image:url(../../img/element-icons/call/video-call.f465ed0.svg);mask-image:url(../../img/element-icons/call/video-call.f465ed0.svg)}.mx_MNoticeBody{white-space:pre-wrap;opacity:.6}.mx_MStickerBody_wrapper{padding:20px 0}.mx_MStickerBody_tooltip{position:absolute;top:50%}.mx_MStickerBody_hidden{max-width:220px;text-decoration:none;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_MTextBody{white-space:pre-wrap}span.mx_MVideoBody video.mx_MVideoBody{max-width:100%;height:auto;border-radius:4px}.mx_MVoiceMessageBody{display:inline-block}.mx_MessageActionBar{position:absolute;visibility:hidden;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;height:24px;line-height:2.4rem;border-radius:4px;background:#fff;top:-26px;right:8px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1}.mx_MessageActionBar:before{content:"";position:absolute;width:calc(66px + 100%);height:calc(20px + 100%);top:-12px;left:-58px;z-index:-1;cursor:auto}.mx_MessageActionBar>*{white-space:nowrap;display:inline-block;position:relative;border:1px solid #e9edf1;margin-left:-1px}.mx_MessageActionBar>:hover{border-color:#ddd;z-index:1}.mx_MessageActionBar>:first-child{border-radius:3px 0 0 3px}.mx_MessageActionBar>:last-child{border-radius:0 3px 3px 0}.mx_MessageActionBar>:only-child{border-radius:3px}.mx_MessageActionBar_maskButton{width:27px}.mx_MessageActionBar_maskButton:after{content:"";position:absolute;top:0;left:0;height:100%;width:100%;-webkit-mask-size:18px;mask-size:18px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#2e2f32}.mx_MessageActionBar_reactButton:after{-webkit-mask-image:url(../../img/element-icons/room/message-bar/emoji.af14771.svg);mask-image:url(../../img/element-icons/room/message-bar/emoji.af14771.svg)}.mx_MessageActionBar_replyButton:after{-webkit-mask-image:url(../../img/element-icons/room/message-bar/reply.5812741.svg);mask-image:url(../../img/element-icons/room/message-bar/reply.5812741.svg)}.mx_MessageActionBar_editButton:after{-webkit-mask-image:url(../../img/element-icons/room/message-bar/edit.688678e.svg);mask-image:url(../../img/element-icons/room/message-bar/edit.688678e.svg)}.mx_MessageActionBar_optionsButton:after{-webkit-mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);mask-image:url(../../img/element-icons/context-menu.829cc1a.svg)}.mx_MessageActionBar_resendButton:after{-webkit-mask-image:url(../../img/element-icons/retry.6cd23ad.svg);mask-image:url(../../img/element-icons/retry.6cd23ad.svg)}.mx_MessageActionBar_cancelButton:after{-webkit-mask-image:url(../../img/element-icons/trashcan.26f6c28.svg);mask-image:url(../../img/element-icons/trashcan.26f6c28.svg)}.mx_MessageTimestamp{color:#acacac;font-size:1rem;-webkit-font-feature-settings:"tnum";font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.mx_MjolnirBody{opacity:.4}.mx_ReactionsRow{margin:6px 0;color:#2e2f32}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton{position:relative;display:inline-block;visibility:hidden;width:24px;height:24px;vertical-align:middle;margin-left:4px}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton:before{content:"";position:absolute;height:100%;width:100%;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#8d99a5;-webkit-mask-image:url(../../img/element-icons/room/message-bar/emoji.af14771.svg);mask-image:url(../../img/element-icons/room/message-bar/emoji.af14771.svg)}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton.mx_ReactionsRow_addReactionButton_active{visibility:visible}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton.mx_ReactionsRow_addReactionButton_active:before,.mx_ReactionsRow .mx_ReactionsRow_addReactionButton:hover:before{background-color:#2e2f32}.mx_EventTile:hover .mx_ReactionsRow_addReactionButton{visibility:visible}.mx_ReactionsRow_showAll{text-decoration:none;font-size:1.2rem;line-height:2rem;margin-left:4px;vertical-align:middle}.mx_ReactionsRow_showAll:link,.mx_ReactionsRow_showAll:visited{color:#8d99a5}.mx_ReactionsRow_showAll:hover{color:#2e2f32}.mx_ReactionsRowButton{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;line-height:2rem;margin-right:6px;padding:1px 6px;border:1px solid #e9edf1;border-radius:10px;background-color:#f3f8fd;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.mx_ReactionsRowButton:hover{border-color:#ddd}.mx_ReactionsRowButton.mx_ReactionsRowButton_selected{background-color:#e9fff9;border-color:#0dbd8b}.mx_ReactionsRowButton.mx_AccessibleButton_disabled{cursor:not-allowed}.mx_ReactionsRowButton .mx_ReactionsRowButton_content{max-width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-right:4px}.mx_RedactedBody{white-space:pre-wrap;color:#61708b;vertical-align:middle;padding-left:20px;position:relative}.mx_RedactedBody:before{height:14px;width:14px;background-color:#61708b;-webkit-mask-image:url(../../img/feather-customised/trash.custom.1e6ecd4.svg);mask-image:url(../../img/feather-customised/trash.custom.1e6ecd4.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;content:"";position:absolute;top:1px;left:0}.mx_RoomAvatarEvent{opacity:.5;overflow-y:hidden}.mx_RoomAvatarEvent_avatar{display:inline;position:relative;top:5px}.mx_SenderProfile_name{font-weight:600}.mx_TextualEvent{opacity:.5;overflow-y:hidden}.mx_UnknownBody{white-space:pre-wrap}.mx_EventTile_content.mx_ViewSourceEvent{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:.6;font-size:1.2rem}.mx_EventTile_content.mx_ViewSourceEvent code,.mx_EventTile_content.mx_ViewSourceEvent pre{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_EventTile_content.mx_ViewSourceEvent pre{line-height:1.2;margin:3.5px 0}.mx_EventTile_content.mx_ViewSourceEvent .mx_ViewSourceEvent_toggle{width:12px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 center;mask-position:0 center;-webkit-mask-size:auto 12px;mask-size:auto 12px;visibility:hidden;background-color:#0dbd8b;-webkit-mask-image:url(../../img/feather-customised/maximise.dc32127.svg);mask-image:url(../../img/feather-customised/maximise.dc32127.svg)}.mx_EventTile_content.mx_ViewSourceEvent.mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle{-webkit-mask-position:0 bottom;mask-position:0 bottom;margin-bottom:7px;-webkit-mask-image:url(../../img/feather-customised/minimise.aec9142.svg);mask-image:url(../../img/feather-customised/minimise.aec9142.svg)}.mx_EventTile_content.mx_ViewSourceEvent:hover .mx_ViewSourceEvent_toggle{visibility:visible}.mx_cryptoEvent.mx_cryptoEvent_icon:before{background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:90%;mask-size:90%}.mx_cryptoEvent.mx_cryptoEvent_icon:after,.mx_cryptoEvent.mx_cryptoEvent_icon:before{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg)}.mx_cryptoEvent.mx_cryptoEvent_icon:after{background-color:#91a1c0}.mx_cryptoEvent.mx_cryptoEvent_icon_verified:after{-webkit-mask-image:url(../../img/e2e/verified.5be6c9f.svg);mask-image:url(../../img/e2e/verified.5be6c9f.svg);background-color:#0dbd8b}.mx_cryptoEvent.mx_cryptoEvent_icon_warning:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_cryptoEvent .mx_cryptoEvent_buttons,.mx_cryptoEvent .mx_cryptoEvent_state{grid-column:3;grid-row:1/3}.mx_cryptoEvent .mx_cryptoEvent_buttons{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_cryptoEvent .mx_cryptoEvent_state{width:130px;padding:10px 20px;margin:auto 0;text-align:center;color:#8d99a5;overflow-wrap:break-word;font-size:1.2rem}.mx_BaseCard{padding:0 8px;overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_BaseCard .mx_BaseCard_header{margin:8px 0}.mx_BaseCard .mx_BaseCard_header>h2{margin:0 44px;font-size:1.8rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back,.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close{position:absolute;background-color:rgba(141,151,165,.2);height:20px;width:20px;margin:12px;top:0;border-radius:10px}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back:before,.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close:before{content:"";position:absolute;height:20px;width:20px;top:0;left:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#91a1c0}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back{left:0}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back:before{-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-mask-size:22px;mask-size:22px;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close{right:0}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close:before{-webkit-mask-image:url(../../img/icons-close.11ff07c.svg);mask-image:url(../../img/icons-close.11ff07c.svg);-webkit-mask-size:8px;mask-size:8px}.mx_BaseCard .mx_AutoHideScrollbar{margin-right:-8px;padding-right:8px;min-height:0;width:100%;height:100%}.mx_BaseCard .mx_BaseCard_Group{margin:20px 0 16px}.mx_BaseCard .mx_BaseCard_Group>*{margin-left:12px;margin-right:12px}.mx_BaseCard .mx_BaseCard_Group>h1{color:#8d99a5;font-size:1.2rem;font-weight:500}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button{padding:10px 38px 10px 12px;margin:0;position:relative;font-size:1.3rem;height:20px;line-height:20px;border-radius:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button:hover{background-color:rgba(141,151,165,.1)}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button:after{content:"";position:absolute;top:10px;right:6px;height:20px;width:20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#c1c6cd;-webkit-transform:rotate(270deg);transform:rotate(270deg);-webkit-mask-size:20px;mask-size:20px;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button.mx_AccessibleButton_disabled{padding-right:12px}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button.mx_AccessibleButton_disabled:after{content:unset}.mx_BaseCard .mx_BaseCard_footer{padding-top:4px;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_kind_secondary{color:#737d8c;background-color:rgba(141,151,165,.2);font-weight:600;font-size:1.4rem}.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_disabled{cursor:not-allowed}.mx_FilePanel.mx_BaseCard,.mx_MemberList.mx_BaseCard,.mx_NotificationPanel.mx_BaseCard,.mx_UserInfo.mx_BaseCard{padding:32px 0 0}.mx_FilePanel.mx_BaseCard .mx_AutoHideScrollbar,.mx_MemberList.mx_BaseCard .mx_AutoHideScrollbar,.mx_NotificationPanel.mx_BaseCard .mx_AutoHideScrollbar,.mx_UserInfo.mx_BaseCard .mx_AutoHideScrollbar{margin-right:unset;padding-right:unset}.mx_EncryptionInfo_spinner .mx_Spinner{margin-top:25px;margin-bottom:15px}.mx_EncryptionInfo_spinner{text-align:center}.mx_RoomSummaryCard .mx_BaseCard_header{text-align:center;margin-top:20px}.mx_RoomSummaryCard .mx_BaseCard_header h2{font-weight:600;font-size:1.8rem;margin:12px 0 4px}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_alias{font-size:1.3rem;color:#737d8c}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_alias,.mx_RoomSummaryCard .mx_BaseCard_header h2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee{display:inline-block;position:relative;width:54px;height:54px;border-radius:50%;background-color:#737d8c;margin-top:-3px;margin-left:-10px;border:3px solid #f2f5f8}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee:before{content:"";position:absolute;top:13px;left:13px;height:28px;width:28px;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-image:url(../../img/e2e/disabled.6c5c6be.svg);mask-image:url(../../img/e2e/disabled.6c5c6be.svg);background-color:#fff}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_normal{background-color:#424446}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_normal:before{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg)}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_verified{background-color:#0dbd8b}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_verified:before{-webkit-mask-image:url(../../img/e2e/verified.5be6c9f.svg);mask-image:url(../../img/e2e/verified.5be6c9f.svg)}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_warning{background-color:#ff4b55}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_warning:before{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg)}.mx_RoomSummaryCard .mx_RoomSummaryCard_aboutGroup .mx_RoomSummaryCard_Button{padding-left:44px}.mx_RoomSummaryCard .mx_RoomSummaryCard_aboutGroup .mx_RoomSummaryCard_Button:before{content:"";position:absolute;top:8px;left:10px;height:24px;width:24px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#c1c6cd}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button{padding:0;height:auto;color:#8d99a5}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_icon_app{padding:10px 48px 10px 12px;text-overflow:ellipsis;overflow:hidden}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_icon_app .mx_BaseAvatar_image{vertical-align:top;margin-right:12px}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_icon_app span{color:#2e2f32}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options,.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle{position:absolute;top:0;height:100%;width:24px;padding:12px 4px;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:24px}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options:hover:after,.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle:hover:after{content:"";position:absolute;height:24px;width:24px;top:8px;left:0;border-radius:12px;background-color:rgba(141,151,165,.1)}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options:before,.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle:before{content:"";position:absolute;height:16px;width:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:16px;mask-size:16px;background-color:#c1c6cd}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle{right:24px}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle:before{-webkit-mask-image:url(../../img/element-icons/room/pin-upright.65783fb.svg);mask-image:url(../../img/element-icons/room/pin-upright.65783fb.svg)}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options{right:48px;display:none}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options:before{-webkit-mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg)}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button.mx_RoomSummaryCard_Button_pinned:after{opacity:.2}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button.mx_RoomSummaryCard_Button_pinned .mx_RoomSummaryCard_app_pinToggle:before{background-color:#0dbd8b}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:hover .mx_RoomSummaryCard_icon_app{padding-right:72px}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:hover .mx_RoomSummaryCard_app_options{display:unset}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:before{content:unset}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:after{top:8px;pointer-events:none}.mx_RoomSummaryCard .mx_AccessibleButton_kind_link{padding:0;margin-top:12px;margin-bottom:12px;font-size:1.3rem;font-weight:600}.mx_RoomSummaryCard_icon_people:before{-webkit-mask-image:url(../../img/element-icons/room/members.88c3e93.svg);mask-image:url(../../img/element-icons/room/members.88c3e93.svg)}.mx_RoomSummaryCard_icon_files:before{-webkit-mask-image:url(../../img/element-icons/room/files.5709c0c.svg);mask-image:url(../../img/element-icons/room/files.5709c0c.svg)}.mx_RoomSummaryCard_icon_share:before{-webkit-mask-image:url(../../img/element-icons/room/share.54dc3fb.svg);mask-image:url(../../img/element-icons/room/share.54dc3fb.svg)}.mx_RoomSummaryCard_icon_settings:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_UserInfo.mx_BaseCard{padding-top:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-y:auto;font-size:1.2rem}.mx_UserInfo.mx_BaseCard .mx_UserInfo_cancel{cursor:pointer;position:absolute;top:0;border-radius:4px;background-color:#f2f5f8;margin:9px;z-index:1}.mx_UserInfo.mx_BaseCard .mx_UserInfo_cancel div{height:16px;width:16px;padding:4px;-webkit-mask-image:url(../../img/minimise.871d2de.svg);mask-image:url(../../img/minimise.871d2de.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:7px center;mask-position:7px center;background-color:#91a1c0}.mx_UserInfo.mx_BaseCard h2{font-size:1.8rem;font-weight:600;margin:18px 0 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_container{padding:8px 16px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_separator{border-bottom:1px solid rgba(46,47,50,.1)}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetailsContainer{padding-top:0;padding-bottom:0;margin-bottom:8px}.mx_UserInfo.mx_BaseCard .mx_RoomTile_nameContainer{width:154px}.mx_UserInfo.mx_BaseCard .mx_RoomTile_badge{display:none}.mx_UserInfo.mx_BaseCard .mx_RoomTile_name{width:160px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar{margin:24px 32px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar>div{max-width:30vh;margin:0 auto;-webkit-transition:.5s;transition:.5s}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar>div>div{padding-top:100%;position:relative}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar>div>div *{border-radius:100%;position:absolute;top:0;left:0;width:100%!important;height:100%!important}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar .mx_BaseAvatar_initial{z-index:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:6rem!important;width:100%!important;-webkit-transition:font-size .5s;transition:font-size .5s}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image{cursor:-webkit-zoom-in;cursor:zoom-in}.mx_UserInfo.mx_BaseCard h3{text-transform:uppercase;color:#8d99a5;font-weight:600;font-size:1.2rem;margin:4px 0}.mx_UserInfo.mx_BaseCard p{margin:5px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile{text-align:center}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.8rem;line-height:2.5rem;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;word-break:break-all;text-overflow:ellipsis}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 .mx_E2EIcon{margin-top:3px;margin-right:4px;min-width:18px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_UserInfo_profileStatus{margin-top:12px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField{margin:6px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField,.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField .mx_UserInfo_roleDescription{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField .mx_UserInfo_roleDescription{margin:11px 0 12px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField .mx_Field{margin:0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_field{cursor:pointer;color:#0dbd8b;line-height:1.6rem;margin:8px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_field.mx_UserInfo_destructive{color:#ff4b55}.mx_UserInfo.mx_BaseCard .mx_UserInfo_statusMessage{font-size:1.1rem;opacity:.5;overflow:hidden;white-space:nowrap;text-overflow:clip}.mx_UserInfo.mx_BaseCard .mx_AutoHideScrollbar{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator){padding-top:16px;padding-bottom:0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator)>:not(h3){margin-left:8px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device{display:-webkit-box;display:-ms-flexbox;display:flex;margin:8px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device.mx_UserInfo_device_verified .mx_UserInfo_device_trusted{color:#0dbd8b}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device.mx_UserInfo_device_unverified .mx_UserInfo_device_trusted{color:#ff4b55}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device .mx_UserInfo_device_name{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:5px;word-break:break-word}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_E2EIcon{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin:2px 5px 0 0;width:12px;height:12px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_expand{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:11px}.mx_UserInfo.mx_BaseCard .mx_AccessibleButton.mx_AccessibleButton_hasKind{padding:8px 18px}.mx_UserInfo.mx_BaseCard .mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary{color:#0dbd8b;background-color:rgba(3,179,129,.16)}.mx_UserInfo.mx_BaseCard .mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger{color:#ff4b55;background-color:rgba(255,75,85,.16)}.mx_UserInfo.mx_BaseCard .mx_UserInfo_wideButton,.mx_UserInfo.mx_BaseCard .mx_VerificationShowSas .mx_AccessibleButton{display:block;margin:16px 0 8px}.mx_UserInfo.mx_BaseCard .mx_VerificationShowSas .mx_AccessibleButton+.mx_AccessibleButton{margin:8px 0}.mx_UserInfo.mx_UserInfo_smallAvatar .mx_UserInfo_avatar>div{max-width:72px;margin:0 auto}.mx_UserInfo.mx_UserInfo_smallAvatar .mx_UserInfo_avatar .mx_BaseAvatar_initial{font-size:40px!important}.mx_VerificationPanel_reciprocate_section .mx_E2EIcon,.mx_VerificationPanel_verified_section .mx_E2EIcon{margin:20px auto!important}.mx_UserInfo .mx_EncryptionPanel_cancel{-webkit-mask:url(../../img/feather-customised/cancel.23c2689.svg);mask:url(../../img/feather-customised/cancel.23c2689.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;width:14px;height:14px;background-color:#61708b;cursor:pointer;position:absolute;z-index:100;top:14px;right:14px}.mx_UserInfo .mx_VerificationPanel_qrCode{padding:4px 4px 0;background:#fff;border-radius:4px;width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:100%;margin:0 auto!important}.mx_UserInfo .mx_VerificationPanel_qrCode canvas{height:auto!important;width:100%!important;max-width:240px}.mx_UserInfo .mx_VerificationPanel_reciprocate_section .mx_FormButton{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;padding:10px;display:block;margin:10px 0}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:10px;margin-bottom:10px;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions>.mx_VerificationPanel_QRPhase_betweenText,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions>.mx_VerificationPanel_QRPhase_betweenText{width:50px;vertical-align:middle;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption{background-color:#f3f8fd;border-radius:10px;-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;padding:20px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;max-width:310px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_noQR,.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption canvas,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_noQR,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption canvas{width:220px!important;height:220px!important;background-color:#fff;border-radius:4px;vertical-align:middle;text-align:center;padding:10px}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption>p,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption>p{margin-top:0;font-weight:700}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_helpText,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_helpText{font-size:1.4rem;margin:30px 0;text-align:center}.mx_CompleteSecurity_body .mx_VerificationPanel_verified_section .mx_AccessibleButton,.mx_Dialog .mx_VerificationPanel_verified_section .mx_AccessibleButton{float:right}.mx_CompleteSecurity_body .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton,.mx_Dialog .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton{margin-left:10px;padding:7px 40px}.mx_CompleteSecurity_body .mx_VerificationPanel_reciprocate_section .mx_VerificationPanel_reciprocateButtons,.mx_Dialog .mx_VerificationPanel_reciprocate_section .mx_VerificationPanel_reciprocateButtons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_WidgetCard{height:100%;display:contents}.mx_WidgetCard .mx_AppTileFullWidth{max-width:unset;height:100%;border:0}.mx_WidgetCard .mx_BaseCard_header{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mx_WidgetCard .mx_BaseCard_header>h2{margin-right:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_WidgetCard .mx_BaseCard_header .mx_WidgetCard_optionsButton{position:relative;margin-right:44px;height:20px;width:20px;min-width:20px;padding:0}.mx_WidgetCard .mx_BaseCard_header .mx_WidgetCard_optionsButton:before{content:"";position:absolute;width:20px;height:20px;top:0;left:4px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);background-color:#737d8c}.mx_WidgetCard_maxPinnedTooltip{background-color:#ff4b55;color:#fff}.mx_AliasSettings_editable{border:0;border-bottom:1px solid #c7c7c7;padding:0;min-width:240px}.mx_AliasSettings_editable:focus{border-bottom:1px solid #0dbd8b;outline:none;-webkit-box-shadow:none;box-shadow:none}.mx_AliasSettings summary{cursor:pointer;color:#0dbd8b;font-weight:600;list-style:none}.mx_AliasSettings summary::-webkit-details-marker{display:none}.mx_AliasSettings .mx_AliasSettings_localAliasHeader{margin-top:35px}.mx_AppsDrawer{margin:5px 5px 5px 18px;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden}.mx_AppsDrawer .mx_AppsContainer_resizerHandleContainer{width:100%;height:10px;margin-top:-3px;display:block;position:relative}.mx_AppsDrawer .mx_AppsContainer_resizerHandle{cursor:ns-resize;width:100%!important;height:100%!important;position:absolute;bottom:0!important}.mx_AppsDrawer .mx_AppsContainer_resizerHandle:after{content:"";position:absolute;border-radius:3px;top:6px;bottom:0;left:calc(50% - 32px);right:calc(50% - 32px)}.mx_AppsDrawer:hover .mx_AppsContainer_resizerHandle:after{opacity:.8;background:#2e2f32}.mx_AppsDrawer:hover .mx_ResizeHandle_horizontal:before{position:absolute;left:3px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:64px;width:4px;border-radius:4px;content:"";background-color:#2e2f32;opacity:.8}.mx_AppsContainer_resizer{margin-bottom:8px}.mx_AppsContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;height:100%;width:100%;-webkit-box-flex:1;-ms-flex:1;flex:1;min-height:0}.mx_AppsContainer .mx_AppTile:first-of-type{border-left-width:8px;border-radius:10px 0 0 10px}.mx_AppsContainer .mx_AppTile:last-of-type{border-right-width:8px;border-radius:0 10px 10px 0}.mx_AppsContainer .mx_ResizeHandle_horizontal{position:relative}.mx_AppsContainer .mx_ResizeHandle_horizontal>div{width:0}.mx_AppsDrawer_2apps .mx_AppTile{width:50%}.mx_AppsDrawer_2apps .mx_AppTile:nth-child(3){-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;width:0!important;min-width:240px!important}.mx_AppsDrawer_3apps .mx_AppTile{width:33%}.mx_AppsDrawer_3apps .mx_AppTile:nth-child(3){-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;width:0!important;min-width:240px!important}.mx_AppTile{width:50%;min-width:240px;border-color:#f2f5f8;border-style:solid;border-width:8px 5px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#f2f5f8}.mx_AppTileFullWidth{width:100%!important;border:5px solid #f2f5f8;border-radius:8px;background-color:#f2f5f8}.mx_AppTile_mini,.mx_AppTileFullWidth{margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_AppTile_mini{width:100%;height:200px}.mx_AppTile .mx_AppTile_persistedWrapper,.mx_AppTile_mini .mx_AppTile_persistedWrapper,.mx_AppTileFullWidth .mx_AppTile_persistedWrapper{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_AppTile_persistedWrapper div{width:100%;height:100%}.mx_AppTileMenuBar{margin:0;font-size:1.2rem;background-color:#f2f5f8;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:100%;padding-top:2px;padding-bottom:8px}.mx_AppTileMenuBarTitle{line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mx_AppTileMenuBarTitle .mx_WidgetAvatar{margin-right:12px}.mx_AppTileMenuBarTitle>:last-child{margin-left:9px}.mx_AppTileMenuBarWidgets{float:right;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_AppTileMenuBar_iconButton{width:12px;height:12px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 center;mask-position:0 center;-webkit-mask-size:auto 12px;mask-size:auto 12px;background-color:#212121;margin:0 3px}.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout{-webkit-mask-image:url(../../img/feather-customised/widget/external-link.7ab6751.svg);mask-image:url(../../img/feather-customised/widget/external-link.7ab6751.svg)}.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_menu{-webkit-mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg)}.mx_AppTileBody{height:100%;background-color:#fff}.mx_AppTileBody,.mx_AppTileBody_mini{width:100%;overflow:hidden;border-radius:8px}.mx_AppTileBody_mini{height:200px}.mx_AppTile .mx_AppTileBody,.mx_AppTile_mini .mx_AppTileBody_mini,.mx_AppTileFullWidth .mx_AppTileBody{height:inherit;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_AppTileBody_mini iframe,.mx_AppTileBody iframe{border:none;width:100%;height:100%}.mx_AppTileBody iframe{overflow:hidden;padding:0;margin:0;display:block}.mx_AppPermissionWarning{text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.6rem}.mx_AppPermissionWarning_row{margin-bottom:12px}.mx_AppPermissionWarning_smallText{font-size:1.2rem}.mx_AppPermissionWarning_bolder{font-weight:600}.mx_AppPermissionWarning h4{margin:0;padding:0}.mx_AppPermissionWarning_helpIcon{margin-top:1px;margin-right:2px;width:10px;height:10px;display:inline-block}.mx_AppPermissionWarning_helpIcon:before{display:inline-block;background-color:#0dbd8b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:12px;mask-size:12px;width:12px;height:12px;-webkit-mask-position:center;mask-position:center;content:"";vertical-align:middle;-webkit-mask-image:url(../../img/feather-customised/help-circle.03fb6cf.svg);mask-image:url(../../img/feather-customised/help-circle.03fb6cf.svg)}.mx_AppPermissionWarning_tooltip{-webkit-box-shadow:none;box-shadow:none;background-color:#27303a;color:#fff;border:none;border-radius:3px;padding:6px 8px}.mx_AppPermissionWarning_tooltip ul{list-style-position:inside;padding-left:2px;margin-left:0}.mx_AppLoading{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:700;position:relative;height:100%;background-color:#fff!important;border-radius:8px}.mx_AppLoading .mx_Spinner{position:absolute;top:0;bottom:0;left:0;right:0}.mx_AppLoading_spinner_fadeIn{-webkit-animation-fill-mode:backwards;animation-fill-mode:backwards;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:.5s;animation-delay:.5s;-webkit-animation-name:mx_AppLoading_spinner_fadeIn_animation;animation-name:mx_AppLoading_spinner_fadeIn_animation}@-webkit-keyframes mx_AppLoading_spinner_fadeIn_animation{0%{opacity:0}to{opacity:1}}@keyframes mx_AppLoading_spinner_fadeIn_animation{0%{opacity:0}to{opacity:1}}.mx_AppLoading iframe{display:none}.mx_AppsDrawer_resizing .mx_AppTile_persistedWrapper{z-index:1}.mx_Autocomplete{position:absolute;bottom:0;z-index:1001;width:100%;background:#fff;border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;max-height:50vh;overflow:auto;-webkit-box-shadow:0 -16px 32px rgba(0,0,0,.04);box-shadow:0 -16px 32px rgba(0,0,0,.04)}.mx_Autocomplete_ProviderSection{border-bottom:1px solid transparent}.mx_Autocomplete_Completion_block{height:34px;display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 12px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#2e2f32}.mx_Autocomplete_Completion_block *{margin:0 3px}.mx_Autocomplete_Completion_pill{-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:2rem;height:3.4rem;padding:.4rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#2e2f32}.mx_Autocomplete_Completion_pill>*{margin-right:.3rem}.mx_Autocomplete_Completion_subtitle{font-style:italic;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_Autocomplete_Completion_description{color:grey}.mx_Autocomplete_Completion_container_pill{margin:12px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-flow:wrap;flex-flow:wrap}.mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_description,.mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_subtitle,.mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_title{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mx_Autocomplete_Completion.selected,.mx_Autocomplete_Completion:hover{background:#f2f5f8;outline:none}.mx_Autocomplete_provider_name{margin:12px;color:#2e2f32;font-weight:400;opacity:.4}.m_RoomView_auxPanel_stateViews{padding:5px 5px 5px 19px;border-bottom:1px solid transparent}.m_RoomView_auxPanel_stateViews_span a{text-decoration:none;color:inherit}.m_RoomView_auxPanel_stateViews_span[data-severity=warning]{font-weight:700;color:orange}.m_RoomView_auxPanel_stateViews_span[data-severity=alert]{font-weight:700;color:red}.m_RoomView_auxPanel_stateViews_span[data-severity=normal]{font-weight:400}.m_RoomView_auxPanel_stateViews_span[data-severity=notice]{font-weight:400;color:#a2a2a2}.m_RoomView_auxPanel_stateViews_delim{padding:0 5px;color:#a2a2a2}.mx_BasicMessageComposer{position:relative}.mx_BasicMessageComposer .mx_BasicMessageComposer_inputEmpty>:first-child:before{content:var(--placeholder);opacity:.333;width:0;height:0;overflow:visible;display:inline-block;pointer-events:none;white-space:nowrap}@-webkit-keyframes visualbell{0%{background-color:#faa}to{background-color:#fff}}.mx_BasicMessageComposer.mx_BasicMessageComposer_input_error{-webkit-animation:visualbell .2s;animation:visualbell .2s}.mx_BasicMessageComposer .mx_BasicMessageComposer_input{white-space:pre-wrap;word-wrap:break-word;outline:none;overflow-x:hidden}.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_RoomPill,.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_UserPill{position:relative}.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_RoomPill:before,.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_UserPill:before{content:var(--avatar-letter);width:1.6rem;height:1.6rem;margin-right:.24rem;background:var(--avatar-background),#fff;color:#fff;background-repeat:no-repeat;background-size:1.6rem;border-radius:1.6rem;text-align:center;font-weight:400;line-height:1.6rem;font-size:1.04rem}.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_disabled{pointer-events:none}.mx_BasicMessageComposer .mx_BasicMessageComposer_AutoCompleteWrapper{position:relative;height:0}.mx_E2EIcon{width:16px;height:16px;margin:0 9px;position:relative;display:block}.mx_E2EIcon_normal:after,.mx_E2EIcon_normal:before,.mx_E2EIcon_verified:after,.mx_E2EIcon_verified:before,.mx_E2EIcon_warning:after,.mx_E2EIcon_warning:before{content:"";display:block;position:absolute;top:0;bottom:0;left:0;right:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.mx_E2EIcon:before{background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:90%;mask-size:90%}.mx_E2EIcon:before,.mx_E2EIcon_bordered{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg)}.mx_E2EIcon_bordered{background-color:#f3f8fd}.mx_E2EIcon_bordered:after{-webkit-mask-size:75%;mask-size:75%}.mx_E2EIcon_bordered:before{-webkit-mask-size:65%;mask-size:65%}.mx_E2EIcon_warning:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_E2EIcon_normal:after{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);background-color:#91a1c0}.mx_E2EIcon_verified:after{-webkit-mask-image:url(../../img/e2e/verified.5be6c9f.svg);mask-image:url(../../img/e2e/verified.5be6c9f.svg);background-color:#0dbd8b}.mx_EditMessageComposer{padding:3px;margin:-7px -10px -5px;overflow:visible!important}.mx_EditMessageComposer .mx_BasicMessageComposer_input{border-radius:4px;border:1px solid transparent;background-color:#fff;max-height:200px;padding:3px 6px}.mx_EditMessageComposer .mx_BasicMessageComposer_input:focus{border-color:rgba(13,189,139,.5)}.mx_EditMessageComposer .mx_EditMessageComposer_buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;position:absolute;left:0;background:#f3f8fd;z-index:100;right:0;margin:0 -110px 0 0;padding:5px 147px 5px 5px}.mx_EditMessageComposer .mx_EditMessageComposer_buttons .mx_AccessibleButton{margin-left:5px;padding:5px 40px}.mx_EventTile_last .mx_EditMessageComposer_buttons{position:static;margin-right:-147px}.mx_EntityTile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#2e2f32;cursor:pointer}.mx_EntityTile .mx_E2EIcon{margin:0;position:absolute;bottom:2px;right:7px}.mx_EntityTile:hover{padding-right:30px;position:relative}.mx_EntityTile:hover:before{content:"";position:absolute;top:calc(50% - 8px);right:-8px;-webkit-mask:url(../../img/member_chevron.4163a20.png);mask:url(../../img/member_chevron.4163a20.png);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;width:16px;height:16px;background-color:#91a1c0}.mx_EntityTile .mx_PresenceLabel{display:none}.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_PresenceLabel{display:block}.mx_EntityTile_invite{display:table-cell;vertical-align:middle;margin-left:10px;width:26px}.mx_EntityTile_avatar,.mx_GroupRoomTile_avatar{padding:4px 12px 4px 3px;position:relative}.mx_EntityTile_name,.mx_GroupRoomTile_name{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow:hidden;font-size:1.4rem;text-overflow:ellipsis;white-space:nowrap}.mx_EntityTile_details{overflow:hidden;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_EntityTile_ellipsis .mx_EntityTile_name,.mx_EntityTile_invitePlaceholder .mx_EntityTile_name{font-style:italic;color:#2e2f32}.mx_EntityTile_offline_beenactive .mx_EntityTile_avatar,.mx_EntityTile_offline_beenactive .mx_EntityTile_name,.mx_EntityTile_unavailable .mx_EntityTile_avatar,.mx_EntityTile_unavailable .mx_EntityTile_name{opacity:.5}.mx_EntityTile_offline_neveractive .mx_EntityTile_avatar,.mx_EntityTile_offline_neveractive .mx_EntityTile_name,.mx_EntityTile_unknown .mx_EntityTile_avatar,.mx_EntityTile_unknown .mx_EntityTile_name{opacity:.25}.mx_EntityTile_subtext{font-size:1.1rem;opacity:.5;overflow:hidden;white-space:nowrap;text-overflow:clip}.mx_EntityTile_power{-webkit-padding-start:6px;padding-inline-start:6px;font-size:1rem;color:#8d99a5;max-width:6em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mx_EntityTile:hover .mx_EntityTile_power{display:none}.mx_EventTile{max-width:100%;clear:both;padding-top:18px;font-size:1.4rem;position:relative}.mx_EventTile.mx_EventTile_info{padding-top:1px}.mx_EventTile_avatar{top:14px;left:8px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar{top:.6rem;left:64px}.mx_EventTile_continuation{padding-top:0!important}.mx_EventTile_continuation.mx_EventTile_isEditing{padding-top:5px!important;margin-top:-5px}.mx_EventTile_isEditing{background-color:#f3f8fd}.mx_EventTile .mx_SenderProfile{color:#2e2f32;font-size:1.4rem;display:inline-block;overflow:hidden;cursor:pointer;padding-bottom:0;padding-top:0;margin:0;white-space:nowrap;text-overflow:ellipsis;max-width:calc(100% - 64px)}.mx_EventTile .mx_SenderProfile .mx_Flair{opacity:.7;margin-left:5px;display:inline-block;vertical-align:top;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_EventTile .mx_SenderProfile .mx_Flair img{vertical-align:-2px;margin-right:2px;border-radius:8px}.mx_EventTile_isEditing .mx_MessageTimestamp{visibility:hidden!important}.mx_EventTile .mx_MessageTimestamp{display:block;visibility:hidden;white-space:nowrap;left:0;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_EventTile_continuation .mx_EventTile_line{clear:both}.mx_EventTile_line,.mx_EventTile_reply{position:relative;padding-left:64px;border-radius:4px}.mx_EventListSummary .mx_EventTile_line,.mx_RoomView_timeline_rr_enabled .mx_EventTile_line{margin-right:110px}.mx_EventTile_bubbleContainer{display:grid;grid-template-columns:1fr 100px}.mx_EventTile_bubbleContainer .mx_EventTile_line{margin-right:0;grid-column:1/3;padding:0!important}.mx_EventTile_bubbleContainer .mx_EventTile_msgOption{grid-column:2}.mx_EventTile_reply{margin-right:10px}.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji{font-size:48px!important;line-height:57px!important}.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp{visibility:visible}.mx_EventTile_selected>div>a>.mx_MessageTimestamp{left:3px;width:auto}.mx_EventTile.focus-visible:focus-within>div>a>.mx_MessageTimestamp,.mx_EventTile.mx_EventTile_actionBarFocused>div>a>.mx_MessageTimestamp,.mx_EventTile:hover>div>a>.mx_MessageTimestamp,.mx_EventTile_last>div>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_EventTile.focus-visible:focus-within>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_EventTile.mx_EventTile_actionBarFocused>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_EventTile:hover>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_EventTile_last>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_ReplyThread .mx_EventTile>a>.mx_MessageTimestamp{visibility:visible}.mx_EventTile.focus-visible:focus-within .mx_MessageActionBar,.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,.mx_EventTile:hover .mx_MessageActionBar,[data-whatinput=keyboard] .mx_EventTile:focus-within .mx_MessageActionBar{visibility:visible}.mx_EventTile_selected>.mx_EventTile_line{border-left:4px solid #0dbd8b;padding-left:60px;background-color:#f6f7f8}.mx_EventTile_highlight,.mx_EventTile_highlight .markdown-body{color:#ff4b55}.mx_EventTile_highlight .markdown-body .mx_EventTile_line,.mx_EventTile_highlight .mx_EventTile_line{background-color:#fff8e3}.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line{padding-left:78px}.mx_EventTile.focus-visible:focus-within .mx_EventTile_line,.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line,.mx_EventTile:hover .mx_EventTile_line{background-color:#f6f7f8}.mx_EventTile_searchHighlight{border-radius:5px;padding-left:2px;padding-right:2px;cursor:pointer}.mx_EventTile_searchHighlight,.mx_EventTile_searchHighlight a{background-color:#0dbd8b;color:#fff}.mx_EventTile_receiptSending:before,.mx_EventTile_receiptSent:before{background-color:#8d99a5;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:14px;mask-size:14px;width:14px;height:14px;content:"";position:absolute;top:0;left:0;right:0}.mx_EventTile_receiptSent:before{-webkit-mask-image:url(../../img/element-icons/circle-sent.5079cbe.svg);mask-image:url(../../img/element-icons/circle-sent.5079cbe.svg)}.mx_EventTile_receiptSending:before{-webkit-mask-image:url(../../img/element-icons/circle-sending.bcca6aa.svg);mask-image:url(../../img/element-icons/circle-sending.bcca6aa.svg)}.mx_EventTile_contextual{opacity:.4}.mx_EventTile_msgOption{float:right;text-align:right;position:relative;width:90px;height:1px;margin-right:10px}.mx_EventTile_msgOption a{text-decoration:none}.mx_EventTile_readAvatars{position:relative;display:inline-block;width:14px;height:14px;top:-2.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1}.mx_EventTile_readAvatars .mx_BaseAvatar{position:absolute;display:inline-block;height:1.4rem;width:1.4rem;-webkit-transition:left .1s ease-out,top .3s ease-out;transition:left .1s ease-out,top .3s ease-out;-webkit-transition:left var(--transition-short) ease-out,top var(--transition-standard) ease-out;transition:left var(--transition-short) ease-out,top var(--transition-standard) ease-out}.mx_EventTile_readAvatarRemainder{color:#acacac;font-size:1.1rem;position:absolute}.mx_EventTile_content{display:block;overflow-y:hidden;overflow-x:hidden;margin-right:34px}.mx_EventTile_body{overflow-y:hidden}.mx_EventTile_spoiler{cursor:pointer}.mx_EventTile_spoiler_reason{color:#acacac;font-size:1.1rem}.mx_EventTile_spoiler_content{-webkit-filter:blur(5px) saturate(.1) sepia(1);filter:blur(5px) saturate(.1) sepia(1);-webkit-transition-duration:.5s;transition-duration:.5s}.mx_EventTile_spoiler.visible>.mx_EventTile_spoiler_content{-webkit-filter:none;filter:none}.mx_EventTile_e2eIcon{position:absolute;top:6px;left:44px;width:14px;height:14px;display:block;bottom:0;right:0;opacity:.2;background-repeat:no-repeat;background-size:contain}.mx_EventTile_e2eIcon:after,.mx_EventTile_e2eIcon:before{content:"";display:block;position:absolute;top:0;bottom:0;left:0;right:0;-webkit-mask-size:contain;mask-size:contain}.mx_EventTile_e2eIcon:after,.mx_EventTile_e2eIcon:before{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.mx_EventTile_e2eIcon:before{background-color:#fff;-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);-webkit-mask-size:90%;mask-size:90%}.mx_EventTile_e2eIcon_undecryptable:after,.mx_EventTile_e2eIcon_unverified:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_EventTile_e2eIcon_undecryptable,.mx_EventTile_e2eIcon_unverified{opacity:1}.mx_EventTile_e2eIcon_unknown:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_EventTile_e2eIcon_unknown{opacity:1}.mx_EventTile_e2eIcon_unencrypted:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_EventTile_e2eIcon_unencrypted{opacity:1}.mx_EventTile_e2eIcon_unauthenticated:after{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);background-color:#91a1c0}.mx_EventTile_e2eIcon_unauthenticated{opacity:1}.mx_EventTile_keyRequestInfo{font-size:1.2rem}.mx_EventTile_keyRequestInfo_text{opacity:.5}.mx_EventTile_keyRequestInfo_text a{color:#2e2f32;text-decoration:underline;cursor:pointer}.mx_EventTile_keyRequestInfo_tooltip_contents p{text-align:auto;margin-left:3px;margin-right:3px}.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child{margin-top:0}.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child{margin-bottom:0}.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line{padding-left:60px}.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line{border-left:4px solid #76cfa5}.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line{border-left:4px solid #e8bf37}.mx_EventTile:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line{padding-left:78px}.mx_EventTile:hover .mx_EventTile_e2eIcon{opacity:1}.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line>a>.mx_MessageTimestamp,.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line>a>.mx_MessageTimestamp,.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line>a>.mx_MessageTimestamp{width:38px}.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line>.mx_EventTile_e2eIcon,.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line>.mx_EventTile_e2eIcon,.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line>.mx_EventTile_e2eIcon{display:block;left:41px}.mx_EventTile_content .mx_EventTile_edited{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:1.2rem;color:#9e9e9e;display:inline-block;margin-left:9px;cursor:pointer}.mx_EventTile_body pre{border:1px solid transparent}.mx_EventTile_content .markdown-body{font-family:inherit!important;white-space:normal!important;line-height:inherit!important;color:inherit;font-size:1.4rem}.mx_EventTile_content .markdown-body code,.mx_EventTile_content .markdown-body pre{font-family:Inconsolata,Twemoji,Apple Color Emoji,Segoe UI Emoji,Courier,monospace,Noto Color Emoji!important;color:#333}.mx_EventTile_content .markdown-body pre{overflow-x:overlay;overflow-y:visible}.mx_EventTile_content .markdown-body code{background-color:#f8f8f8}.mx_EventTile_lineNumbers{float:left;margin:0 .5em 0 -1.5em;color:grey}.mx_EventTile_lineNumber{text-align:right;display:block;padding-left:1em}.mx_EventTile_collapsedCodeBlock{max-height:30vh}.mx_EventTile.focus-visible:focus-within .mx_EventTile_body pre,.mx_EventTile:hover .mx_EventTile_body pre{border:1px solid #e5e5e5}.mx_EventTile_pre_container{position:relative}.mx_EventTile_button{position:absolute;display:inline-block;visibility:hidden;cursor:pointer;top:8px;right:8px;width:19px;height:19px;background-color:#2e2f32}.mx_EventTile_buttonBottom{top:33px}.mx_EventTile_copyButton{-webkit-mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg)}.mx_EventTile_collapseButton{-webkit-mask-image:url(../../img/feather-customised/minimise.aec9142.svg);mask-image:url(../../img/feather-customised/minimise.aec9142.svg)}.mx_EventTile_collapseButton,.mx_EventTile_expandButton{-webkit-mask-size:75%;mask-size:75%;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mx_EventTile_expandButton{-webkit-mask-image:url(../../img/feather-customised/maximise.dc32127.svg);mask-image:url(../../img/feather-customised/maximise.dc32127.svg)}.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_collapseButton,.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton,.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_expandButton,.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_collapseButton,.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton,.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_expandButton{visibility:visible}.mx_EventTile_content .markdown-body h1,.mx_EventTile_content .markdown-body h2,.mx_EventTile_content .markdown-body h3,.mx_EventTile_content .markdown-body h4,.mx_EventTile_content .markdown-body h5,.mx_EventTile_content .markdown-body h6{font-family:inherit!important;color:inherit}.mx_EventTile_content .markdown-body h1,.mx_EventTile_content .markdown-body h2{font-size:1.5em;border-bottom:none!important}.mx_EventTile_content .markdown-body a{color:#238cf5}.mx_EventTile_content .markdown-body .hljs{display:inline!important}.mx_EventTile_tileError{color:red;text-align:center;margin-right:0}.mx_EventTile_tileError .mx_EventTile_line{padding-left:0;margin-right:0}.mx_EventTile_tileError .mx_EventTile_line span{padding:4px 8px}.mx_EventTile_tileError a{margin-left:1em}@media only screen and (max-width:480px){.mx_EventTile_line,.mx_EventTile_reply{padding-left:0;margin-right:0}.mx_EventTile_content{margin-top:10px;margin-right:0}}.mx_GroupLayout .mx_EventTile>.mx_SenderProfile{line-height:2rem;margin-left:64px}.mx_GroupLayout .mx_EventTile>.mx_EventTile_line{padding-left:64px}.mx_GroupLayout .mx_EventTile>.mx_EventTile_avatar{position:absolute}.mx_GroupLayout .mx_EventTile .mx_MessageTimestamp{position:absolute;width:46px}.mx_GroupLayout .mx_EventTile .mx_EventTile_line,.mx_GroupLayout .mx_EventTile .mx_EventTile_reply{padding-top:1px;padding-bottom:3px;line-height:2.2rem}.mx_GroupLayout .mx_EventTile_info .mx_EventTile_line{padding-left:82px}.mx_MatrixChat_useCompactLayout .mx_EventTile{padding-top:4px}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_line,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_reply{padding-top:0;padding-bottom:0}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info{padding-top:0;font-size:1.3rem}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_line,.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_reply{line-height:2rem}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar{top:4px}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_SenderProfile{font-size:1.3rem}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote{padding-top:8px}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote .mx_EventTile_avatar{top:2px}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote .mx_EventTile_line,.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote .mx_EventTile_reply{padding-top:0;padding-bottom:1px}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation{padding-top:0}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation .mx_EventTile_line,.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation .mx_EventTile_reply{padding-top:0;padding-bottom:0}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_avatar{top:2px}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_e2eIcon{top:3px}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_readAvatars{top:-2rem}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body blockquote,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body dl,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body ol,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body p,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body pre,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body table,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body ul{margin-bottom:4px}.mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList h2{margin-top:6px}.mx_IRCLayout{--name-width:70px;line-height:1.8rem!important}.mx_IRCLayout .mx_EventTile>a{text-decoration:none}.mx_IRCLayout .mx_EventTile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding-top:0}.mx_IRCLayout .mx_EventTile>*{margin-right:5px}.mx_IRCLayout .mx_EventTile>.mx_EventTile_msgOption{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5;-ms-flex-negative:0;flex-shrink:0}.mx_IRCLayout .mx_EventTile>.mx_EventTile_msgOption .mx_EventTile_readAvatars{top:.2rem}.mx_IRCLayout .mx_EventTile>.mx_SenderProfile{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-ms-flex-negative:0;flex-shrink:0;width:var(--name-width);text-overflow:ellipsis;text-align:left;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:visible;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_IRCLayout .mx_EventTile .mx_EventTile_line,.mx_IRCLayout .mx_EventTile .mx_EventTile_reply{padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;min-width:0}.mx_IRCLayout .mx_EventTile>.mx_EventTile_avatar{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;position:relative;top:0;left:0;-ms-flex-negative:0;flex-shrink:0;height:1.8rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_IRCLayout .mx_EventTile>.mx_EventTile_avatar>.mx_BaseAvatar,.mx_IRCLayout .mx_EventTile>.mx_EventTile_avatar>.mx_BaseAvatar>*{height:1.4rem!important;width:1.4rem!important;font-size:1rem!important;line-height:1.5rem!important}.mx_IRCLayout .mx_EventTile .mx_MessageTimestamp{font-size:1rem;width:45px;text-align:right}.mx_IRCLayout .mx_EventTile>.mx_EventTile_e2eIcon{position:absolute;right:unset;left:unset;top:0;padding:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;height:1.8rem;background-position:50%}.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_EventTile_e2eIcon,.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_MTextBody,.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_ReplyThread_wrapper_empty,.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_TextualEvent{display:inline-block}.mx_IRCLayout .mx_EventTile .mx_EventTile_reply{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.mx_IRCLayout .mx_EventTile .mx_EditMessageComposer_buttons{position:relative}.mx_IRCLayout .mx_EventTile_emote>.mx_EventTile_avatar{margin-left:calc(var(--name-width) + 19px)}.mx_IRCLayout blockquote{margin:0}.mx_IRCLayout .mx_EventListSummary>.mx_EventTile_line{padding-left:calc(var(--name-width) + 74px)}.mx_IRCLayout .mx_EventListSummary .mx_EventListSummary_avatars{padding:0;margin:0 9px 0 0}.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar{left:calc(var(--name-width) + 24px);top:0}.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_line{left:calc(var(--name-width) + 24px)}.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_TextualEvent{line-height:1.8rem}.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line{padding-left:0;border-left:0}.mx_IRCLayout .mx_SenderProfile_hover{background-color:#fff;overflow:hidden}.mx_IRCLayout .mx_SenderProfile_hover>span{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_IRCLayout .mx_SenderProfile_hover>span>.mx_SenderProfile_name{overflow:hidden;text-overflow:ellipsis;min-width:var(--name-width);text-align:end}.mx_IRCLayout .mx_SenderProfile:hover{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_IRCLayout .mx_SenderProfile_hover:hover{overflow:visible;width:max(auto,100%);z-index:10}.mx_IRCLayout .mx_ReplyThread{margin:0}.mx_IRCLayout .mx_ReplyThread .mx_SenderProfile{width:unset;max-width:var(--name-width)}.mx_IRCLayout .mx_ReplyThread .mx_SenderProfile_hover{background:transparent}.mx_IRCLayout .mx_ReplyThread .mx_SenderProfile_hover>span>.mx_SenderProfile_name{min-width:inherit}.mx_IRCLayout .mx_ReplyThread .mx_EventTile_emote>.mx_EventTile_avatar{margin-left:0}.mx_IRCLayout .mx_ReplyThread .mx_MessageTimestamp{width:auto}.mx_IRCLayout .mx_ReplyThread .mx_EventTile_e2eIcon{position:relative;-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.mx_IRCLayout .mx_ProfileResizer{position:absolute;height:100%;width:15px;left:calc(80px + var(--name-width));cursor:col-resize;z-index:100}.mx_IRCLayout .mx_Flair>img{height:1.4rem!important;width:1.4rem!important}.mx_JumpToBottomButton{z-index:1000;position:absolute;bottom:12px;right:24px;width:38px;height:50px;text-align:center}.mx_JumpToBottomButton_badge{position:relative;top:-12px;border-radius:16px;font-weight:700;font-size:1.2rem;line-height:1.4rem;text-align:center;display:inline-block;padding:0 4px;color:#fff;background-color:#61708b}.mx_JumpToBottomButton_highlight .mx_JumpToBottomButton_badge{color:#f2f5f8;background-color:#ff4b55}.mx_JumpToBottomButton_scrollDown{position:relative;height:38px;border-radius:19px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;border:1.3px solid #61708b;cursor:pointer}.mx_JumpToBottomButton_scrollDown:before{content:"";position:absolute;top:0;bottom:0;left:0;right:0;-webkit-mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;background:#61708b}.mx_LinkPreviewWidget{margin-top:15px;margin-right:15px;margin-bottom:15px;display:-webkit-box;display:-ms-flexbox;display:flex;border-left:4px solid #ddd;color:#888}.mx_LinkPreviewWidget_image{-webkit-box-flex:0;-ms-flex:0 0 100px;flex:0 0 100px;margin-left:15px;text-align:center;cursor:pointer}.mx_LinkPreviewWidget_caption{margin-left:15px;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.mx_LinkPreviewWidget_title{display:inline;font-weight:700;white-space:normal}.mx_LinkPreviewWidget_siteName{display:inline}.mx_LinkPreviewWidget_description{margin-top:8px;white-space:normal;word-wrap:break-word}.mx_LinkPreviewWidget_cancel{cursor:pointer;width:18px;height:18px}.mx_LinkPreviewWidget_cancel img{-webkit-box-flex:0;-ms-flex:0 0 40px;flex:0 0 40px;visibility:hidden}.mx_LinkPreviewWidget:hover .mx_LinkPreviewWidget_cancel img,.mx_LinkPreviewWidget_cancel.focus-visible:focus img{visibility:visible}.mx_MatrixChat_useCompactLayout .mx_LinkPreviewWidget{margin-top:6px;margin-bottom:6px}.mx_MemberInfo{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-y:auto;margin-top:8px}.mx_MemberInfo,.mx_MemberInfo_name{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_MemberInfo_name{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_MemberInfo_name>.mx_E2EIcon{margin-right:0}.mx_MemberInfo_cancel{height:16px;width:16px;padding:10px 0 10px 10px;cursor:pointer;-webkit-mask-image:url(../../img/minimise.871d2de.svg);mask-image:url(../../img/minimise.871d2de.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:16px center;mask-position:16px center;background-color:#91a1c0}.mx_MemberInfo_name h2{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-x:auto;max-height:50px}.mx_MemberInfo h2{font-size:1.8rem;font-weight:600;margin:16px 0 16px 15px}.mx_MemberInfo_container{margin:0 16px 16px}.mx_MemberInfo .mx_RoomTile_nameContainer{width:154px}.mx_MemberInfo .mx_RoomTile_badge{display:none}.mx_MemberInfo .mx_RoomTile_name{width:160px}.mx_MemberInfo_avatar{background:hsla(0,0%,91%,.77);margin-bottom:16px}.mx_MemberInfo_avatar>img{height:auto;width:100%;max-height:30vh;-o-object-fit:contain;object-fit:contain;display:block}.mx_MemberInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image{cursor:-webkit-zoom-in;cursor:zoom-in}.mx_MemberInfo_profile{margin-bottom:16px}.mx_MemberInfo h3{text-transform:uppercase;color:#9fa9ba;font-weight:700;font-size:1.2rem;margin:4px 0}.mx_MemberInfo_profileField{font-size:1.5rem;position:relative}.mx_MemberInfo_buttons{margin-bottom:16px}.mx_MemberInfo_field{cursor:pointer;font-size:1.5rem;color:#2e2f32;margin-left:8px;line-height:2.3rem}.mx_MemberInfo_createRoom{cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 8px}.mx_MemberInfo_createRoom_label{width:auto!important;cursor:pointer}.mx_MemberInfo label{font-size:1.3rem}.mx_MemberInfo label .mx_MemberInfo_label_text{display:inline-block;max-width:180px;vertical-align:text-top}.mx_MemberInfo input[type=radio]{vertical-align:-2px;margin-right:5px;margin-left:8px}.mx_MemberInfo_statusMessage{font-size:1.1rem;opacity:.5;overflow:hidden;white-space:nowrap;text-overflow:clip}.mx_MemberInfo .mx_MemberInfo_scrollContainer{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_GroupMemberList,.mx_GroupRoomList,.mx_MemberList{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-height:0}.mx_GroupMemberList .mx_Spinner,.mx_GroupRoomList .mx_Spinner,.mx_MemberList .mx_Spinner{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}.mx_GroupMemberList .mx_SearchBox,.mx_GroupRoomList .mx_SearchBox,.mx_MemberList .mx_SearchBox{margin-bottom:5px}.mx_GroupMemberList h2,.mx_GroupRoomList h2,.mx_MemberList h2{text-transform:uppercase;color:#3d3b39;font-weight:600;font-size:1.3rem;padding-left:3px;padding-right:12px;margin-top:8px;margin-bottom:4px}.mx_GroupMemberList .mx_AutoHideScrollbar,.mx_GroupRoomList .mx_AutoHideScrollbar,.mx_MemberList .mx_AutoHideScrollbar{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_GroupMemberList .mx_RightPanel_scopeHeader,.mx_GroupRoomList .mx_RightPanel_scopeHeader,.mx_MemberList .mx_RightPanel_scopeHeader{margin-top:-8px}.mx_GroupMemberList_query,.mx_GroupRoomList_query{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_MemberList_chevron{position:absolute;right:35px;margin-top:-15px}.mx_MemberList_border{overflow-y:auto;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0px}.mx_MemberList_query{height:16px}.mx_MemberList_query[type=text]{font-size:1.2rem}.mx_MemberList_wrapper{padding:10px}.mx_MemberList_invite{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;position:relative;background-color:#0dbd8b;border-radius:4px;margin:5px 9px 9px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:#fff;font-weight:600}.mx_MemberList_invite.mx_AccessibleButton_disabled{background-color:#888;cursor:not-allowed}.mx_MemberList_invite span{padding:8px 0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mx_MemberList_invite span:before{content:"";display:inline-block;background-color:#fff;-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:20px;mask-size:20px;width:20px;height:20px;margin-right:5px}.mx_MemberList_inviteCommunity span:before{-webkit-mask-image:url(../../img/icon-invite-people.d82f491.svg);mask-image:url(../../img/icon-invite-people.d82f491.svg)}.mx_MemberList_addRoomToCommunity span:before{-webkit-mask-image:url(../../img/icons-room-add.bd36e26.svg);mask-image:url(../../img/icons-room-add.bd36e26.svg)}.mx_MessageComposer_wrapper{vertical-align:middle;margin:auto;border-top:1px solid transparent;position:relative;padding-left:82px;padding-right:6px}.mx_MessageComposer_replaced_wrapper{margin-left:auto;margin-right:auto}.mx_MessageComposer_replaced_valign{height:60px;display:table-cell;vertical-align:middle}.mx_MessageComposer_roomReplaced_icon{float:left;margin-right:20px;margin-top:5px;width:31px;height:31px}.mx_MessageComposer_roomReplaced_header{font-weight:700}.mx_MessageComposer_autocomplete_wrapper{position:relative;height:0}.mx_MessageComposer_row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.mx_MessageComposer .mx_MessageComposer_avatar{position:absolute;left:26px}.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar{display:block}.mx_MessageComposer_composecontrols{width:100%}.mx_MessageComposer_e2eIcon.mx_E2EIcon{position:absolute;left:60px;margin-right:0;margin-left:3px;width:12px;height:12px}.mx_MessageComposer_noperm_error{width:100%;height:60px;font-style:italic;color:#888;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_MessageComposer_input_wrapper{cursor:text}.mx_MessageComposer_input,.mx_MessageComposer_input_wrapper{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_MessageComposer_input{vertical-align:middle;min-height:60px;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;font-size:1.4rem;margin-right:6px}.mx_MessageComposer_editor{width:100%;max-height:120px;min-height:19px;overflow-y:auto;overflow-x:hidden;word-break:break-word}.mx_MessageComposer_editor>:first-child{margin-top:0!important}.mx_MessageComposer_editor>:last-child{margin-bottom:0!important}@keyframes visualbell{0%{background-color:#faa}to{background-color:#fff}}.mx_MessageComposer_input_error{-webkit-animation:visualbell .2s;animation:visualbell .2s}.mx_MessageComposer_input blockquote{color:#777;margin:0 0 16px;padding:0 15px;border-left:4px solid #ddd}.mx_MessageComposer_input pre{background-color:rgba(0,0,0,.04);border-radius:3px;padding:10px}.mx_MessageComposer_input textarea{display:block;width:100%;padding:0;margin-top:6px;margin-bottom:6px;border:0;resize:none;outline:none;-webkit-box-shadow:none;box-shadow:none;color:#2e2f32;background-color:#fff;font-size:1.4rem;max-height:120px;overflow:auto;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji}.mx_MessageComposer_input textarea::-moz-placeholder{line-height:100%;color:#0dbd8b;opacity:1}.mx_MessageComposer_input textarea::-webkit-input-placeholder{color:#0dbd8b}.mx_MessageComposer_button_highlight{background:rgba(13,189,139,.25)}.mx_MessageComposer_button_highlight:before{background-color:#0dbd8b!important}.mx_MessageComposer_button{position:relative;margin-right:6px;cursor:pointer;height:26px;width:26px;border-radius:100%}.mx_MessageComposer_button:before{content:"";position:absolute;top:3px;left:3px;height:20px;width:20px;background-color:#c1c6cd;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}.mx_MessageComposer_button:hover{background:rgba(13,189,139,.1)}.mx_MessageComposer_button:hover:before{background-color:#0dbd8b}.mx_MessageComposer_button.mx_MessageComposer_hangup:not(.mx_AccessibleButton_disabled):before{background-color:#ff4b55}.mx_MessageComposer_upload:before{-webkit-mask-image:url(../../img/element-icons/room/composer/attach.359c84e.svg);mask-image:url(../../img/element-icons/room/composer/attach.359c84e.svg)}.mx_MessageComposer_voiceMessage:before{-webkit-mask-image:url(../../img/voip/mic-on-mask.97ec7a0.svg);mask-image:url(../../img/voip/mic-on-mask.97ec7a0.svg)}.mx_MessageComposer_emoji:before{-webkit-mask-image:url(../../img/element-icons/room/composer/emoji.52d7369.svg);mask-image:url(../../img/element-icons/room/composer/emoji.52d7369.svg)}.mx_MessageComposer_stickers:before{-webkit-mask-image:url(../../img/element-icons/room/composer/sticker.8dbe5ec.svg);mask-image:url(../../img/element-icons/room/composer/sticker.8dbe5ec.svg)}.mx_MessageComposer_sendMessage{cursor:pointer;position:relative;margin-right:6px;width:32px;height:32px;border-radius:100%;background-color:#0dbd8b}.mx_MessageComposer_sendMessage:before{position:absolute;height:16px;width:16px;top:8px;left:9px;-webkit-mask-image:url(../../img/element-icons/send-message.a4e9cf8.svg);mask-image:url(../../img/element-icons/send-message.a4e9cf8.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;background-color:#fff;content:""}.mx_MessageComposer_formatting{cursor:pointer;margin:0 11px;width:24px;height:18px}.mx_MessageComposer_formatbar_wrapper{width:100%;background-color:#fff;-webkit-box-shadow:inset 0 1px 0 0 rgba(0,0,0,.08);box-shadow:inset 0 1px 0 0 rgba(0,0,0,.08)}.mx_MessageComposer_formatbar{margin:auto;display:-webkit-box;display:-ms-flexbox;display:flex;height:30px;-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:62px;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1rem;color:#888}.mx_MessageComposer_formatbar *{margin-right:4px}.mx_MessageComposer_format_button,.mx_MessageComposer_formatbar_cancel,.mx_MessageComposer_formatbar_markdown{cursor:pointer}.mx_MessageComposer_formatbar_cancel{margin-right:22px}.mx_MessageComposer_formatbar_markdown{height:17px;width:30px;margin-right:64px}.mx_MessageComposer_input_markdownIndicator{height:10px;width:12px;padding:4px 4px 4px 0}.mx_MessageComposer_formatbar_markdown,.mx_MessageComposer_input_markdownIndicator{cursor:pointer;-webkit-mask-image:url(../../img/markdown.6905ba8.svg);mask-image:url(../../img/markdown.6905ba8.svg);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#c1c6cd}.mx_MessageComposer_formatbar_markdown.mx_MessageComposer_markdownDisabled,.mx_MessageComposer_input_markdownIndicator.mx_MessageComposer_markdownDisabled{opacity:.2}.mx_MatrixChat_useCompactLayout .mx_MessageComposer_input{min-height:50px}.mx_MatrixChat_useCompactLayout .mx_MessageComposer_noperm_error{height:50px}.mx_MessageComposerFormatBar{display:none;width:130px;height:24px;position:absolute;cursor:pointer;border-radius:4px;background-color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1000}.mx_MessageComposerFormatBar.mx_MessageComposerFormatBar_shown{display:block}.mx_MessageComposerFormatBar>*{white-space:nowrap;display:inline-block;position:relative;border:1px solid #e9edf1;margin-left:-1px}.mx_MessageComposerFormatBar>:hover{border-color:#ddd;z-index:1}.mx_MessageComposerFormatBar>:first-child{border-radius:3px 0 0 3px}.mx_MessageComposerFormatBar>:last-child{border-radius:0 3px 3px 0}.mx_MessageComposerFormatBar>:only-child{border-radius:3px}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button{width:27px;height:24px;-webkit-box-sizing:border-box;box-sizing:border-box;background:none;vertical-align:middle}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button:after{content:"";position:absolute;top:0;left:0;height:100%;width:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#2e2f32}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconBold:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/bold.0d80ac7.svg);mask-image:url(../../img/element-icons/room/format-bar/bold.0d80ac7.svg)}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconItalic:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/italic.bf18054.svg);mask-image:url(../../img/element-icons/room/format-bar/italic.bf18054.svg)}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconStrikethrough:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/strikethrough.0264f7b.svg);mask-image:url(../../img/element-icons/room/format-bar/strikethrough.0264f7b.svg)}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconQuote:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/quote.560cd8f.svg);mask-image:url(../../img/element-icons/room/format-bar/quote.560cd8f.svg)}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconCode:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/code.27444ba.svg);mask-image:url(../../img/element-icons/room/format-bar/code.27444ba.svg)}.mx_MessageComposerFormatBar_buttonTooltip{white-space:nowrap;font-size:1.3rem;font-weight:600;min-width:54px;text-align:center}.mx_MessageComposerFormatBar_buttonTooltip .mx_MessageComposerFormatBar_tooltipShortcut{font-size:.9rem;opacity:.7}.mx_NewRoomIntro{margin:40px 0 48px 64px}.mx_NewRoomIntro .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover):after,.mx_NewRoomIntro .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover):before{content:unset}.mx_NewRoomIntro .mx_AccessibleButton_kind_link{padding:0;font-size:inherit}.mx_NewRoomIntro .mx_NewRoomIntro_buttons{margin-top:28px}.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton{line-height:2.4rem;display:inline-block}.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton+.mx_AccessibleButton{margin-left:12px}.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton:not(.mx_AccessibleButton_kind_primary_outline):before{content:"";display:inline-block;background-color:#fff;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:20px;mask-size:20px;width:20px;height:20px;margin-right:5px;vertical-align:text-bottom}.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_NewRoomIntro_inviteButton:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_NewRoomIntro>h2{margin-top:24px;font-size:2.4rem;font-weight:600}.mx_NewRoomIntro>p{margin:0;font-size:1.5rem;color:#737d8c}.mx_NotificationBadge:not(.mx_NotificationBadge_visible){display:none}.mx_NotificationBadge.mx_NotificationBadge_visible{background-color:#61708b;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_highlighted{background-color:#ff4b55}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_dot{background-color:#2e2f32;width:6px;height:6px;border-radius:6px}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_2char{width:1.6rem;height:1.6rem;border-radius:1.6rem}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_3char{width:2.6rem;height:1.6rem;border-radius:1.6rem}.mx_NotificationBadge.mx_NotificationBadge_visible .mx_NotificationBadge_count{font-size:1rem;line-height:1.4rem;color:#fff}.mx_PinnedEventTile{min-height:40px;margin-bottom:5px;width:100%;border-radius:5px}.mx_PinnedEventTile:hover{background-color:#f6f7f8}.mx_PinnedEventTile .mx_PinnedEventTile_sender,.mx_PinnedEventTile .mx_PinnedEventTile_timestamp{color:#868686;font-size:.8em;vertical-align:top;display:inline-block;padding-bottom:3px}.mx_PinnedEventTile .mx_PinnedEventTile_timestamp{padding-left:15px;display:none}.mx_PinnedEventTile .mx_PinnedEventTile_senderAvatar .mx_BaseAvatar{float:left;margin-right:10px}.mx_PinnedEventTile_actions{float:right;margin-right:10px;display:none}.mx_PinnedEventTile:hover .mx_PinnedEventTile_timestamp{display:inline-block}.mx_PinnedEventTile:hover .mx_PinnedEventTile_actions{display:block}.mx_PinnedEventTile_unpinButton{display:inline-block;cursor:pointer;margin-left:10px}.mx_PinnedEventTile_gotoButton{display:inline-block;font-size:.7em}.mx_PinnedEventTile_message{margin-left:50px;position:relative;top:0;left:0}.mx_PinnedEventsPanel{border-top:1px solid transparent}.mx_PinnedEventsPanel_body{max-height:300px;overflow-y:auto;padding-bottom:15px}.mx_PinnedEventsPanel_header{margin:0;padding-top:8px;padding-bottom:15px}.mx_PinnedEventsPanel_cancel{margin:12px;float:right;display:inline-block}.mx_PresenceLabel{font-size:1.1rem;opacity:.5}.mx_ReplyPreview{background:#fff;border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;max-height:50vh;overflow:auto;-webkit-box-shadow:0 -16px 32px rgba(0,0,0,.04);box-shadow:0 -16px 32px rgba(0,0,0,.04)}.mx_ReplyPreview_section{border-bottom:1px solid transparent}.mx_ReplyPreview_header{margin:12px;color:#2e2f32;font-weight:400;opacity:.4}.mx_ReplyPreview_title{float:left}.mx_ReplyPreview_cancel{float:right;cursor:pointer}.mx_ReplyPreview_clear{clear:both}.mx_RoomBreadcrumbs{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_crumb{margin-right:8px;width:32px}.mx_RoomBreadcrumbs.mx_RoomBreadcrumbs-enter{margin-left:-40px}.mx_RoomBreadcrumbs.mx_RoomBreadcrumbs-enter-active{margin-left:0;-webkit-transition:margin-left .64s cubic-bezier(.66,.02,.36,1);transition:margin-left .64s cubic-bezier(.66,.02,.36,1)}.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_placeholder{font-weight:600;font-size:1.4rem;line-height:32px;height:32px}.mx_RoomBreadcrumbs_Tooltip{margin-left:-42px;margin-top:-42px}.mx_RoomHeader{-webkit-box-flex:0;-ms-flex:0 0 50px;flex:0 0 50px;border-bottom:1px solid transparent;background-color:#fff}.mx_RoomHeader .mx_RoomHeader_e2eIcon{height:12px;width:12px}.mx_RoomHeader .mx_RoomHeader_e2eIcon .mx_E2EIcon{margin:0;position:absolute;height:12px;width:12px}.mx_RoomHeader_wrapper{margin:auto;height:50px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:0;padding:0 10px 0 18px}.mx_RoomHeader_wrapper .mx_InviteOnlyIcon_large{margin:0}.mx_RoomHeader_spinner{-webkit-box-flex:1;-ms-flex:1;flex:1;height:36px;padding-left:12px;padding-right:12px}.mx_RoomHeader_textButton{vertical-align:middle;border:0;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;padding:7px 1.5em;cursor:pointer;display:inline-block;outline:none;margin-right:8px;margin-top:-5px}.mx_RoomHeader_textButton_danger{background-color:#ff4b55}.mx_RoomHeader_cancelButton{cursor:pointer;padding-left:12px;padding-right:12px}.mx_RoomHeader_buttons{background-color:#fff}.mx_RoomHeader_buttons,.mx_RoomHeader_info{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomHeader_info{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomHeader_simpleHeader{line-height:5.2rem;color:#45474a;font-size:1.8rem;font-weight:600;overflow:hidden;margin-left:63px;text-overflow:ellipsis;width:100%}.mx_RoomHeader_simpleHeader .mx_RoomHeader_cancelButton{float:right}.mx_RoomHeader_simpleHeader .mx_RoomHeader_icon{margin-left:14px;margin-right:24px;vertical-align:-4px}.mx_RoomHeader_name{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;overflow:hidden;color:#45474a;font-weight:600;font-size:1.8rem;margin:0 7px;border-bottom:1px solid transparent;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomHeader_nametext{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.mx_RoomHeader_settingsHint{color:#a2a2a2!important}.mx_RoomHeader_searchStatus{font-weight:400;opacity:.6}.mx_RoomHeader_avatar,.mx_RoomHeader_avatarPicker,.mx_RoomHeader_avatarPicker_edit,.mx_RoomHeader_avatarPicker_remove,.mx_RoomHeader_name{cursor:pointer}.mx_RoomHeader_avatarPicker_remove{position:absolute;top:-11px;right:-9px}.mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable){color:#0dbd8b}.mx_RoomHeader_placeholder{color:#a2a2a2!important}.mx_RoomHeader_editable{border-bottom:1px solid #c7c7c7!important;min-width:150px;cursor:text}.mx_RoomHeader_editable:focus{border-bottom:1px solid #0dbd8b!important;outline:none;-webkit-box-shadow:none;box-shadow:none}.mx_RoomHeader_topic{-webkit-box-flex:1;-ms-flex:1;flex:1;color:#9e9e9e;font-weight:400;font-size:1.3rem;margin:4px 7px 0;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid transparent;line-height:1.2em;max-height:2.4em}.mx_RoomHeader_avatar{-webkit-box-flex:0;-ms-flex:0;flex:0;margin:0 6px 0 7px;position:relative}.mx_RoomHeader_avatar .mx_BaseAvatar_image{-o-object-fit:cover;object-fit:cover}.mx_RoomHeader_avatarPicker{position:relative}.mx_RoomHeader_avatarPicker_edit{position:absolute;left:16px;top:18px}.mx_RoomHeader_avatarPicker_edit>label{cursor:pointer}.mx_RoomHeader_avatarPicker_edit>input{display:none}.mx_RoomHeader_button{position:relative;margin-left:1px;margin-right:1px;cursor:pointer;height:32px;width:32px;border-radius:100%}.mx_RoomHeader_button:before{content:"";position:absolute;top:4px;left:4px;height:24px;width:24px;background-color:#c1c6cd;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_RoomHeader_button:hover{background:rgba(13,189,139,.1)}.mx_RoomHeader_button:hover:before{background-color:#0dbd8b}.mx_RoomHeader_forgetButton:before{-webkit-mask-image:url(../../img/element-icons/leave.bb917e7.svg);mask-image:url(../../img/element-icons/leave.bb917e7.svg);width:26px}.mx_RoomHeader_appsButton:before{-webkit-mask-image:url(../../img/element-icons/room/apps.5ee9f78.svg);mask-image:url(../../img/element-icons/room/apps.5ee9f78.svg)}.mx_RoomHeader_appsButton_highlight:before{background-color:#0dbd8b}.mx_RoomHeader_searchButton:before{-webkit-mask-image:url(../../img/element-icons/room/search-inset.db6314d.svg);mask-image:url(../../img/element-icons/room/search-inset.db6314d.svg)}.mx_RoomHeader_voiceCallButton:before{-webkit-mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);-webkit-mask-size:20px;mask-size:20px;-webkit-mask-position:center;mask-position:center}.mx_RoomHeader_videoCallButton:before{-webkit-mask-image:url(../../img/element-icons/call/video-call.f465ed0.svg);mask-image:url(../../img/element-icons/call/video-call.f465ed0.svg)}.mx_RoomHeader_showPanel{height:16px}.mx_RoomHeader_voipButton{display:table-cell}.mx_RoomHeader_voipButtons{margin-top:18px}.mx_RoomHeader_pinnedButton:before{-webkit-mask-image:url(../../img/element-icons/room/pin.6ab67ed.svg);mask-image:url(../../img/element-icons/room/pin.6ab67ed.svg)}.mx_RoomHeader_pinsIndicator{position:absolute;right:0;bottom:4px;width:8px;height:8px;border-radius:8px;background-color:#8d99a5}.mx_RoomHeader_pinsIndicatorUnread{background-color:#ff4b55}@media only screen and (max-width:480px){.mx_RoomHeader_wrapper{padding:0}.mx_RoomHeader{overflow:hidden}}.mx_RoomList{padding-right:7px}.mx_RoomList_iconPlus:before{-webkit-mask-image:url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);mask-image:url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg)}.mx_RoomList_iconHash:before{-webkit-mask-image:url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);mask-image:url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg)}.mx_RoomList_iconExplore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg)}.mx_RoomList_iconBrowse:before{-webkit-mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg);mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg)}.mx_RoomList_iconDialpad:before{-webkit-mask-image:url(../../img/element-icons/roomlist/dialpad.37f876f.svg);mask-image:url(../../img/element-icons/roomlist/dialpad.37f876f.svg)}.mx_RoomList_explorePrompt{margin:4px 12px;padding-top:12px;border-top:1px solid #e7e7e7;font-size:1.4rem}.mx_RoomList_explorePrompt div:first-child{font-weight:600;line-height:1.8rem;color:#2e2f32}.mx_RoomList_explorePrompt .mx_AccessibleButton{color:#2e2f32;position:relative;padding:8px 8px 8px 32px;font-size:inherit;margin-top:12px;display:block;text-align:start;background-color:rgba(141,151,165,.2);border-radius:4px}.mx_RoomList_explorePrompt .mx_AccessibleButton:before{content:"";width:16px;height:16px;position:absolute;top:8px;left:8px;background:#737d8c;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mx_RoomList_explorePrompt .mx_AccessibleButton.mx_RoomList_explorePrompt_startChat:before{-webkit-mask-image:url(../../img/element-icons/feedback.a91241e.svg);mask-image:url(../../img/element-icons/feedback.a91241e.svg)}.mx_RoomList_explorePrompt .mx_AccessibleButton.mx_RoomList_explorePrompt_explore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg)}.mx_RoomList_explorePrompt .mx_AccessibleButton.mx_RoomList_explorePrompt_spaceInvite:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_RoomList_explorePrompt .mx_AccessibleButton.mx_RoomList_explorePrompt_spaceExplore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg);mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg)}.mx_RoomPreviewBar{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-align-items:center}.mx_RoomPreviewBar h3{font-size:1.8rem;font-weight:600}.mx_RoomPreviewBar h3.mx_RoomPreviewBar_spinnerTitle{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomPreviewBar .mx_RoomPreviewBar_message p,.mx_RoomPreviewBar h3{word-break:break-all;word-break:break-word}.mx_RoomPreviewBar .mx_Spinner{width:auto;height:auto;margin:10px 10px 10px 0;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_RoomPreviewBar .mx_RoomPreviewBar_footer{font-size:1.2rem;line-height:2rem}.mx_RoomPreviewBar .mx_RoomPreviewBar_footer .mx_Spinner{vertical-align:middle;display:inline-block}.mx_RoomPreviewBar_actions,.mx_RoomPreviewBar_message{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomPreviewBar_message{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.mx_RoomPreviewBar_message p{overflow-wrap:break-word}.mx_RoomPreviewBar_panel{padding:8px 8px 8px 20px;border-top:1px solid transparent;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding:3px 8px}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions>*{margin-left:12px}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;min-width:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message>*{margin:4px}.mx_RoomPreviewBar_dialog{margin:auto;-webkit-box-sizing:content;box-sizing:content;width:400px;border-radius:4px;padding:20px;text-align:center}.mx_RoomPreviewBar_dialog,.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message>*{margin:5px 0 20px}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions .mx_AccessibleButton{padding:7px 50px}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions>*{margin-top:12px}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions .mx_AccessibleButton.mx_AccessibleButton_kind_primary{margin-bottom:7px}.mx_RoomPreviewBar_inviter{font-weight:600}a.mx_RoomPreviewBar_inviter{text-decoration:underline;cursor:pointer}.mx_RoomSublist{margin-left:8px;margin-bottom:4px}.mx_RoomSublist.mx_RoomSublist_hidden{display:none}.mx_RoomSublist .mx_RoomSublist_headerContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-bottom:8px;max-height:24px;color:#8d99a5}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable.mx_RoomSublist_headerContainer_sticky{position:fixed;height:32px;width:calc(100% - 22px)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer .mx_NotificationBadge{margin-left:8px}.mx_RoomSublist .mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) .mx_NotificationBadge{margin-right:4px}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton,.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton{margin-left:8px;position:relative;width:24px;height:24px;border-radius:8px}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:before,.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton:before{content:"";width:16px;height:16px;position:absolute;top:4px;left:4px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#61708b}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:hover,.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton:hover{background:rgba(141,151,165,.2)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton{visibility:hidden;width:0;margin:0}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:before{-webkit-mask-image:url(../../img/element-icons/roomlist/plus.daac9ba.svg);mask-image:url(../../img/element-icons/roomlist/plus.daac9ba.svg)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton:before{-webkit-mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);mask-image:url(../../img/element-icons/context-menu.829cc1a.svg)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:calc(100% - 16px);line-height:1.6rem;font-size:1.3rem;font-weight:600;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText .mx_RoomSublist_collapseBtn{display:inline-block;position:relative;width:14px;height:14px;margin-right:6px}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText .mx_RoomSublist_collapseBtn:before{content:"";width:18px;height:18px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#8d99a5;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText .mx_RoomSublist_collapseBtn.mx_RoomSublist_collapseBtn_collapsed:before{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.mx_RoomSublist:first-child .mx_RoomSublist_headerContainer{height:0;padding-bottom:4px}.mx_RoomSublist .mx_RoomSublist_resizeBox{position:relative;-ms-flex-direction:column;flex-direction:column}.mx_RoomSublist .mx_RoomSublist_resizeBox,.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_tiles{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;overflow:hidden}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_tiles{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;-ms-flex-direction:column;flex-direction:column;-webkit-mask-image:linear-gradient(0deg,transparent,#000 4px);mask-image:linear-gradient(0deg,transparent,#000 4px)}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandles_showNButton{-webkit-box-flex:0;-ms-flex:0 0 32px;flex:0 0 32px}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandles{-webkit-box-flex:0;-ms-flex:0 0 4px;flex:0 0 4px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandle{cursor:ns-resize;border-radius:3px;max-width:64px;height:4px!important;position:relative!important;bottom:0!important}.mx_RoomSublist .mx_RoomSublist_resizeBox.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_resizerHandle,.mx_RoomSublist .mx_RoomSublist_resizeBox:hover .mx_RoomSublist_resizerHandle{opacity:.8;background-color:#2e2f32}.mx_RoomSublist .mx_RoomSublist_showNButton{cursor:pointer;font-size:1.3rem;line-height:1.8rem;color:#737d8c;height:24px;padding-bottom:4px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showNButtonChevron{position:relative;width:18px;height:18px;margin-left:12px;margin-right:16px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#8d99a5;left:-1px}.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showLessButtonChevron,.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showMoreButtonChevron{-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showLessButtonChevron{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mx_RoomSublist.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton,.mx_RoomSublist:not(.mx_RoomSublist_minimized)>.mx_RoomSublist_headerContainer:focus-within .mx_RoomSublist_menuButton,.mx_RoomSublist:not(.mx_RoomSublist_minimized)>.mx_RoomSublist_headerContainer:hover .mx_RoomSublist_menuButton{visibility:visible;width:24px;margin-left:8px}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer{height:auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0;-ms-flex-item-align:end;align-self:flex-end;margin-right:0}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;max-width:100%}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;visibility:visible;width:32px!important;height:32px!important;margin-left:0!important;background-color:rgba(141,151,165,.2);margin-top:8px}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:before{top:8px;left:8px}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_resizeBox{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_showNButton{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_showNButton .mx_RoomSublist_showNButtonChevron{margin-right:12px}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_menuButton{height:16px}.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton,.mx_RoomSublist.mx_RoomSublist_minimized>.mx_RoomSublist_headerContainer:hover .mx_RoomSublist_menuButton{visibility:visible;position:absolute;bottom:48px;right:0;width:16px;height:16px;border-radius:0;z-index:1;background-color:hsla(0,0%,96.1%,.9)}.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton:before,.mx_RoomSublist.mx_RoomSublist_minimized>.mx_RoomSublist_headerContainer:hover .mx_RoomSublist_menuButton:before{top:0;left:0}.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) .mx_RoomSublist_menuButton,.mx_RoomSublist.mx_RoomSublist_minimized>.mx_RoomSublist_headerContainer:hover.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) .mx_RoomSublist_menuButton{bottom:8px}.mx_RoomSublist_contextMenu{padding:20px 16px;width:250px}.mx_RoomSublist_contextMenu hr{margin-top:16px;margin-bottom:16px;margin-right:16px;border:1px solid #2e2f32;opacity:.1}.mx_RoomSublist_contextMenu .mx_RoomSublist_contextMenu_title{font-size:1.5rem;line-height:2rem;font-weight:600;margin-bottom:4px}.mx_RoomSublist_contextMenu .mx_Checkbox,.mx_RoomSublist_contextMenu .mx_RadioButton{margin-top:8px}.mx_RoomSublist_addRoomTooltip{margin-top:-3px}.mx_RoomSublist_skeletonUI{position:relative;margin-left:4px;height:288px}.mx_RoomSublist_skeletonUI:before{background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(hsla(0,0%,100%,0)));background:linear-gradient(180deg,#fff,hsla(0,0%,100%,0));width:100%;height:100%;content:"";position:absolute;-webkit-mask-repeat:repeat-y;mask-repeat:repeat-y;-webkit-mask-size:auto 48px;mask-size:auto 48px;-webkit-mask-image:url(../../img/element-icons/roomlist/skeleton-ui.1f67400.svg);mask-image:url(../../img/element-icons/roomlist/skeleton-ui.1f67400.svg)}.mx_RoomTile{margin-bottom:4px;padding:4px;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomTile.mx_RoomTile_hasMenuOpen,.mx_RoomTile.mx_RoomTile_selected,.mx_RoomTile:focus-within,.mx_RoomTile:hover{background-color:#fff;border-radius:8px}.mx_RoomTile .mx_DecoratedRoomAvatar,.mx_RoomTile .mx_RoomTile_avatarContainer{margin-right:8px}.mx_RoomTile .mx_RoomTile_nameContainer{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;min-width:0;margin-right:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_messagePreview,.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name{margin:0 2px;width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name{font-size:1.4rem;line-height:1.8rem}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name.mx_RoomTile_nameHasUnreadEvents{font-weight:600}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_messagePreview{font-size:1.3rem;line-height:1.8rem;color:#737d8c}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_nameWithPreview{margin-top:-4px}.mx_RoomTile .mx_RoomTile_notificationsButton{margin-left:4px}.mx_RoomTile .mx_RoomTile_badgeContainer{height:16px;margin:auto 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge{margin-right:2px}.mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge_dot{margin-left:5px;margin-right:7px}.mx_RoomTile .mx_RoomTile_menuButton,.mx_RoomTile .mx_RoomTile_notificationsButton{width:20px;min-width:20px;height:20px;margin-top:auto;margin-bottom:auto;position:relative;display:none}.mx_RoomTile .mx_RoomTile_menuButton:before,.mx_RoomTile .mx_RoomTile_notificationsButton:before{top:2px;left:2px;content:"";width:16px;height:16px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#2e2f32}.mx_RoomTile .mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show{display:block}.mx_RoomTile .mx_RoomTile_menuButton:before{-webkit-mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);mask-image:url(../../img/element-icons/context-menu.829cc1a.svg)}.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen .mx_RoomTile_badgeContainer,.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within .mx_RoomTile_badgeContainer,.mx_RoomTile:not(.mx_RoomTile_minimized):hover .mx_RoomTile_badgeContainer{width:0;height:0;display:none}.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen .mx_RoomTile_menuButton,.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen .mx_RoomTile_notificationsButton,.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within .mx_RoomTile_menuButton,.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within .mx_RoomTile_notificationsButton,.mx_RoomTile:not(.mx_RoomTile_minimized):hover .mx_RoomTile_menuButton,.mx_RoomTile:not(.mx_RoomTile_minimized):hover .mx_RoomTile_notificationsButton{display:block}.mx_RoomTile.mx_RoomTile_minimized{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative}.mx_RoomTile.mx_RoomTile_minimized .mx_DecoratedRoomAvatar,.mx_RoomTile.mx_RoomTile_minimized .mx_RoomTile_avatarContainer{margin-right:0}.mx_RoomTile_iconBell:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_RoomTile_iconBellDot:before{-webkit-mask-image:url(../../img/element-icons/roomlist/notifications-default.8b8509e.svg);mask-image:url(../../img/element-icons/roomlist/notifications-default.8b8509e.svg)}.mx_RoomTile_iconBellCrossed:before{-webkit-mask-image:url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);mask-image:url(../../img/element-icons/roomlist/notifications-off.0c57561.svg)}.mx_RoomTile_iconBellMentions:before{-webkit-mask-image:url(../../img/element-icons/roomlist/notifications-dm.ffa8881.svg);mask-image:url(../../img/element-icons/roomlist/notifications-dm.ffa8881.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconStar:before{-webkit-mask-image:url(../../img/element-icons/roomlist/favorite.ff7609d.svg);mask-image:url(../../img/element-icons/roomlist/favorite.ff7609d.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconArrowDown:before{-webkit-mask-image:url(../../img/element-icons/roomlist/low-priority.6c7fb97.svg);mask-image:url(../../img/element-icons/roomlist/low-priority.6c7fb97.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconSettings:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconInvite:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconSignOut:before{-webkit-mask-image:url(../../img/element-icons/leave.bb917e7.svg);mask-image:url(../../img/element-icons/leave.bb917e7.svg)}.mx_RoomUpgradeWarningBar{max-height:235px;background-color:#f7f7f7;padding-left:20px;padding-right:20px;overflow:scroll}.mx_RoomUpgradeWarningBar_wrapped{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;text-align:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center}.mx_RoomUpgradeWarningBar_header{color:#ff4b55;font-weight:700}.mx_RoomUpgradeWarningBar_body{color:#ff4b55}.mx_RoomUpgradeWarningBar_upgradelink{color:#ff4b55;text-decoration:underline}.mx_RoomUpgradeWarningBar_small{color:#888;font-size:70%}.mx_SearchBar{height:56px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-bottom:1px solid transparent}.mx_SearchBar .mx_SearchBar_input{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;margin-left:22px}.mx_SearchBar .mx_SearchBar_searchButton{cursor:pointer;width:37px;height:37px;background-color:#0dbd8b;-webkit-mask:url(../../img/feather-customised/search-input.044bfa7.svg);mask:url(../../img/feather-customised/search-input.044bfa7.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.mx_SearchBar .mx_SearchBar_buttons{display:inherit}.mx_SearchBar .mx_SearchBar_button{border:0;margin:0 0 0 22px;padding:5px;font-size:1.5rem;cursor:pointer;color:#2e2f32;border-bottom:2px solid #0dbd8b;font-weight:600}.mx_SearchBar .mx_SearchBar_unselected{color:#9fa9ba;border-color:transparent}.mx_SearchBar .mx_SearchBar_cancel{background-color:#ff4b55;-webkit-mask:url(../../img/cancel.4b9715b.svg);mask:url(../../img/cancel.4b9715b.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:14px;mask-size:14px;padding:9px;margin:0 12px 0 3px;cursor:pointer}.mx_SendMessageComposer{-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;font-size:1.4rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-right:6px;min-width:0}.mx_SendMessageComposer,.mx_SendMessageComposer .mx_BasicMessageComposer{-webkit-box-flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal}.mx_SendMessageComposer .mx_BasicMessageComposer{-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;min-height:50px}.mx_SendMessageComposer .mx_BasicMessageComposer .mx_BasicMessageComposer_input{padding:3px 0;margin:auto 0;max-height:140px;overflow-y:auto}.mx_Stickers_content{overflow:hidden}.mx_Stickers_content_container{overflow:hidden;height:300px}#mx_persistedElement_stickerPicker .mx_AppTileFullWidth{height:unset;-webkit-box-sizing:border-box;box-sizing:border-box;border-left:none;border-right:none;border-bottom:none}#mx_persistedElement_stickerPicker .mx_AppTileMenuBar{padding:0}#mx_persistedElement_stickerPicker iframe{height:283px}.mx_Stickers_contentPlaceholder{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.mx_Stickers_contentPlaceholder p{max-width:200px}.mx_Stickers_addLink{display:inline;cursor:pointer;color:#0dbd8b}.mx_Stickers_hideStickers{z-index:2001}.mx_TopUnreadMessagesBar{z-index:1000;position:absolute;top:24px;right:24px;width:38px}.mx_TopUnreadMessagesBar:after{content:"";position:absolute;top:-8px;left:10.5px;width:4px;height:4px;border-radius:16px;background-color:#f2f5f8;border:6px solid #0dbd8b;pointer-events:none}.mx_TopUnreadMessagesBar_scrollUp{height:38px;border-radius:19px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;border:1.3px solid #61708b;cursor:pointer}.mx_TopUnreadMessagesBar_scrollUp:before{content:"";position:absolute;width:36px;height:36px;-webkit-mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;background:#61708b;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mx_TopUnreadMessagesBar_markAsRead{display:block;width:18px;height:18px;background:#fff;border:1.3px solid #61708b;border-radius:10px;margin:5px auto}.mx_TopUnreadMessagesBar_markAsRead:before{content:"";position:absolute;width:18px;height:18px;-webkit-mask-image:url(../../img/cancel.4b9715b.svg);mask-image:url(../../img/cancel.4b9715b.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:10px;mask-size:10px;-webkit-mask-position:4px 4px;mask-position:4px 4px;background:#61708b}.mx_VoiceRecordComposerTile_stop{width:28px;height:28px;border:2px solid #e3e8f0;border-radius:32px;margin-right:16px;position:relative}.mx_VoiceRecordComposerTile_stop:after{content:"";width:14px;height:14px;position:absolute;top:7px;left:7px;border-radius:2px;background-color:#ff4b55}.mx_VoiceRecordComposerTile_delete{width:14px;height:18px;vertical-align:middle;margin-right:11px;background-color:#8d99a5;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/trashcan.26f6c28.svg);mask-image:url(../../img/element-icons/trashcan.26f6c28.svg)}.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer{margin:6px 12px 6px 6px;position:relative}.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording{padding-left:22px}.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording:before{-webkit-animation:recording-pulse 2s infinite;animation:recording-pulse 2s infinite;content:"";background-color:#ff4b55;width:10px;height:10px;position:absolute;left:12px;top:18px;border-radius:10px}@-webkit-keyframes recording-pulse{0%{opacity:1}35%{opacity:0}65%{opacity:1}}@keyframes recording-pulse{0%{opacity:1}35%{opacity:0}65%{opacity:1}}.mx_WhoIsTypingTile{margin-left:-18px;padding-top:18px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_WhoIsTypingTile_avatars{-webkit-box-flex:0;-ms-flex:0 0 83px;flex:0 0 83px;text-align:center}.mx_WhoIsTypingTile_avatars>:not(:first-child){margin-left:-12px}.mx_WhoIsTypingTile_avatars .mx_BaseAvatar_initial{padding-top:1px}.mx_WhoIsTypingTile_avatars .mx_BaseAvatar{border:1px solid #fff;border-radius:40px}.mx_WhoIsTypingTile_remainingAvatarPlaceholder{position:relative;display:inline-block;color:#acacac;background-color:#ddd;border:1px solid #fff;border-radius:40px;width:24px;height:24px;line-height:2.4rem;font-size:.8em;vertical-align:top;text-align:center}.mx_WhoIsTypingTile_label{-webkit-box-flex:1;-ms-flex:1;flex:1;font-size:1.4rem;font-weight:600;color:#9e9e9e}.mx_WhoIsTypingTile_label>span{background-image:url(../../img/typing-indicator-2x.0eb9f0e.gif);background-size:25px;background-position:0 100%;background-repeat:no-repeat;padding-bottom:15px;display:block}.mx_MatrixChat_useCompactLayout .mx_WhoIsTypingTile{padding-top:4px}.mx_AvatarSetting_avatar{width:90px;min-width:90px;height:90px;margin-top:8px;position:relative}.mx_AvatarSetting_avatar .mx_AvatarSetting_hover{-webkit-transition:opacity .08s cubic-bezier(.46,.03,.52,.96);transition:opacity .08s cubic-bezier(.46,.03,.52,.96);position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none;line-height:90px;text-align:center}.mx_AvatarSetting_avatar .mx_AvatarSetting_hover>span{color:#fff;position:relative;font-weight:500}.mx_AvatarSetting_avatar .mx_AvatarSetting_hover .mx_AvatarSetting_hoverBg{position:absolute;top:0;bottom:0;left:0;right:0;opacity:.5;background-color:#2e2f32;border-radius:90px}.mx_AvatarSetting_avatar.mx_AvatarSetting_avatar_hovering .mx_AvatarSetting_hover{opacity:1}.mx_AvatarSetting_avatar:not(.mx_AvatarSetting_avatar_hovering) .mx_AvatarSetting_hover{opacity:0}.mx_AvatarSetting_avatar>*{-webkit-box-sizing:border-box;box-sizing:border-box}.mx_AvatarSetting_avatar .mx_AccessibleButton.mx_AccessibleButton_kind_primary{margin-top:8px}.mx_AvatarSetting_avatar .mx_AccessibleButton.mx_AccessibleButton_kind_link_sm{width:100%}.mx_AvatarSetting_avatar>img{cursor:pointer;-o-object-fit:cover;object-fit:cover}.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder,.mx_AvatarSetting_avatar>img{display:block;height:90px;width:inherit;border-radius:90px;cursor:pointer}.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder:before{background-color:#2e2f32;-webkit-mask:url(../../img/feather-customised/user.7a4d23d.svg);mask:url(../../img/feather-customised/user.7a4d23d.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:36px;mask-size:36px;-webkit-mask-position:center;mask-position:center;content:"";position:absolute;top:0;bottom:0;left:0;right:0}.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton{width:32px;height:32px;border-radius:32px;background-color:#e7e7e7;position:absolute;bottom:0;right:0}.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton:before{content:"";display:block;width:100%;height:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:55%;mask-size:55%;background-color:#2e2f32;-webkit-mask-image:url(../../img/feather-customised/edit.fd55ec2.svg);mask-image:url(../../img/feather-customised/edit.fd55ec2.svg)}.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder{background-color:#f4f6fa}.mx_CrossSigningPanel_statusList{border-spacing:0}.mx_CrossSigningPanel_statusList td{padding:0}.mx_CrossSigningPanel_statusList td:first-of-type{-webkit-padding-end:1em;padding-inline-end:1em}.mx_CrossSigningPanel_buttonRow{margin:1em 0}.mx_CrossSigningPanel_buttonRow :nth-child(n+1){-webkit-margin-end:10px;margin-inline-end:10px}.mx_DevicesPanel{display:table;table-layout:fixed;width:880px;border-spacing:10px}.mx_DevicesPanel_header{display:table-header-group;font-weight:700}.mx_DevicesPanel_header>.mx_DevicesPanel_deviceButtons{height:48px}.mx_DevicesPanel_header>div{display:table-cell;vertical-align:middle}.mx_DevicesPanel_header .mx_DevicesPanel_deviceName{width:50%}.mx_DevicesPanel_header .mx_DevicesPanel_deviceLastSeen{width:30%}.mx_DevicesPanel_header .mx_DevicesPanel_deviceButtons{width:20%}.mx_DevicesPanel_device{display:table-row}.mx_DevicesPanel_device>div{display:table-cell}.mx_DevicesPanel_myDevice{font-weight:700}.mx_E2eAdvancedPanel_settingLongDescription{margin-right:150px}.mx_ExistingEmailAddress{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:5px}.mx_ExistingEmailAddress_delete{margin-right:5px;cursor:pointer;vertical-align:middle}.mx_ExistingEmailAddress_email,.mx_ExistingEmailAddress_promptText{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:10px}.mx_ExistingEmailAddress_confirmBtn{margin-left:5px}.mx_IntegrationManager .mx_Dialog{width:60%;height:70%;overflow:hidden;padding:0;max-width:none;max-height:none}.mx_IntegrationManager iframe{background-color:#fff;border:0;width:100%;height:100%}.mx_IntegrationManager_loading h3{text-align:center}.mx_IntegrationManager_error{text-align:center;padding-top:20px}.mx_IntegrationManager_error h3{color:#ff4b55}.mx_UserNotifSettings_tableRow{display:table-row}.mx_UserNotifSettings_inputCell{display:table-cell;padding-bottom:8px;padding-right:8px;width:16px}.mx_UserNotifSettings_labelCell{padding-bottom:8px;width:400px;display:table-cell}.mx_UserNotifSettings_pushRulesTableWrapper{padding-bottom:8px}.mx_UserNotifSettings_pushRulesTable{width:100%;table-layout:fixed}.mx_UserNotifSettings_pushRulesTable thead{font-weight:700}.mx_UserNotifSettings_pushRulesTable tbody th{font-weight:400}.mx_UserNotifSettings_pushRulesTable tbody th:first-child{text-align:left}.mx_UserNotifSettings_keywords{cursor:pointer;color:#0dbd8b}.mx_UserNotifSettings_devicesTable td{padding-left:20px;padding-right:20px}.mx_UserNotifSettings_notifTable{display:table;position:relative}.mx_UserNotifSettings_notifTable .mx_Spinner{position:absolute}.mx_NotificationSound_soundUpload{display:none}.mx_NotificationSound_browse{color:#0dbd8b;border:1px solid #0dbd8b;background-color:transparent}.mx_NotificationSound_save{margin-left:5px;color:#fff;background-color:#0dbd8b}.mx_NotificationSound_resetSound{margin-top:5px;color:#fff;border:#ff4b55;background-color:#ff4b55}.mx_ExistingPhoneNumber{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:5px}.mx_ExistingPhoneNumber_delete{margin-right:5px;cursor:pointer;vertical-align:middle}.mx_ExistingPhoneNumber_address,.mx_ExistingPhoneNumber_promptText{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:10px}.mx_ExistingPhoneNumber_confirmBtn{margin-left:5px}.mx_ExistingPhoneNumber_verification{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_ExistingPhoneNumber_verification .mx_Field{margin:0 0 0 1em}.mx_PhoneNumbers_input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_PhoneNumbers_input>.mx_Field{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_PhoneNumbers_country{width:80px}.mx_ProfileSettings_controls_topic>textarea{resize:vertical}.mx_ProfileSettings_profile{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_ProfileSettings_controls{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;margin-right:54px}.mx_ProfileSettings_controls .mx_SettingsTab_subheading{margin-top:0}.mx_ProfileSettings_controls .mx_Field #profileTopic{height:4em}.mx_ProfileSettings_controls .mx_Field:first-child{margin-top:0}.mx_ProfileSettings_hostingSignup{margin-left:20px}.mx_ProfileSettings_hostingSignup img{margin-left:5px}.mx_ProfileSettings_avatarUpload{display:none}.mx_ProfileSettings_profileForm{margin-right:100px;border-bottom:1px solid #e7e7e7}.mx_ProfileSettings_buttons{margin-top:10px;margin-bottom:28px}.mx_ProfileSettings_buttons>.mx_AccessibleButton_kind_link{padding-left:0}.mx_SecureBackupPanel_deviceNotVerified,.mx_SecureBackupPanel_deviceVerified,.mx_SecureBackupPanel_sigInvalid,.mx_SecureBackupPanel_sigValid{font-weight:700}.mx_SecureBackupPanel_deviceVerified,.mx_SecureBackupPanel_sigValid{color:#76cfa5}.mx_SecureBackupPanel_deviceNotVerified,.mx_SecureBackupPanel_sigInvalid{color:#ba6363}.mx_SecureBackupPanel_deviceName{font-style:italic}.mx_SecureBackupPanel_buttonRow{margin:1em 0}.mx_SecureBackupPanel_buttonRow :nth-child(n+1){-webkit-margin-end:10px;margin-inline-end:10px}.mx_SecureBackupPanel_statusList{border-spacing:0}.mx_SecureBackupPanel_statusList td{padding:0}.mx_SecureBackupPanel_statusList td:first-of-type{-webkit-padding-end:1em;padding-inline-end:1em}.mx_SetIdServer .mx_Field_input{margin-right:100px}.mx_SetIdServer_tooltip{max-width:120px}.mx_SetIntegrationManager{margin-top:10px;margin-bottom:10px}.mx_SetIntegrationManager>.mx_SettingsTab_heading{margin-bottom:10px}.mx_SetIntegrationManager>.mx_SettingsTab_heading>.mx_SettingsTab_subheading{display:inline-block;padding-left:5px}.mx_SetIntegrationManager .mx_ToggleSwitch{display:inline-block;float:right;top:9px;margin-right:100px}.mx_ExistingSpellCheckLanguage{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:5px}.mx_ExistingSpellCheckLanguage_language{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:10px}.mx_GeneralUserSettingsTab_spellCheckLanguageInput{margin-top:1em;margin-bottom:1em}.mx_SpellCheckLanguages{margin-right:100px}.mx_UpdateCheckButton_summary{margin-left:16px}.mx_UpdateCheckButton_summary .mx_AccessibleButton_kind_link{padding:0}.mx_SettingsTab{color:#61708b}.mx_SettingsTab_warningText{color:#ff4b55}.mx_SettingsTab_heading{font-size:2rem;font-weight:600;color:#2e2f32;margin-bottom:10px}.mx_SettingsTab_heading:nth-child(n+2){margin-top:30px}.mx_SettingsTab_subheading{font-size:1.6rem;display:block;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-weight:600;color:#2e2f32;margin-bottom:10px;margin-top:12px}.mx_SettingsTab_subsectionText{color:#61708b;font-size:1.4rem;display:block;margin:10px 100px 10px 0}.mx_SettingsTab_section{margin-bottom:24px}.mx_SettingsTab_section .mx_SettingsFlag{margin-right:100px;margin-bottom:10px}.mx_SettingsTab_section.mx_SettingsTab_subsectionText .mx_SettingsFlag{margin-right:0!important}.mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label{vertical-align:middle;display:inline-block;font-size:1.4rem;color:#2e2f32;max-width:calc(100% - 4.8rem);-webkit-box-sizing:border-box;box-sizing:border-box;padding-right:10px}.mx_SettingsTab_section .mx_SettingsFlag .mx_ToggleSwitch{float:right}.mx_SettingsTab_linkBtn{cursor:pointer;color:#0dbd8b;word-break:break-all}.mx_SettingsTab a{color:#238cf5}.mx_GeneralRoomSettingsTab_profileSection{margin-top:10px}.mx_RolesRoomSettingsTab ul{margin-bottom:0}.mx_RolesRoomSettingsTab_unbanBtn{margin-right:10px;margin-bottom:5px}.mx_SecurityRoomSettingsTab_warning{display:block}.mx_SecurityRoomSettingsTab_warning img{vertical-align:middle;margin-right:5px;margin-left:3px;margin-bottom:5px}.mx_SecurityRoomSettingsTab_encryptionSection{margin-bottom:25px}.mx_AppearanceUserSettingsTab_fontSlider,.mx_AppearanceUserSettingsTab_fontSlider_preview,.mx_AppearanceUserSettingsTab_Layout{margin-right:100px}.mx_AppearanceUserSettingsTab .mx_Field{width:256px}.mx_AppearanceUserSettingsTab_fontScaling{color:#2e2f32}.mx_AppearanceUserSettingsTab_fontSlider{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:15px;background:rgba(227,232,240,.2);border-radius:10px;font-size:10px;margin-top:24px;margin-bottom:24px}.mx_AppearanceUserSettingsTab_fontSlider_preview{border:1px solid #e3e8f0;border-radius:10px;padding:0 16px 9px;pointer-events:none}.mx_AppearanceUserSettingsTab_fontSlider_preview .mx_EventTile_msgOption{display:none}.mx_AppearanceUserSettingsTab_fontSlider_preview.mx_IRCLayout{padding-top:9px}.mx_AppearanceUserSettingsTab_fontSlider_smallText{font-size:15px;padding-right:20px;padding-left:5px;font-weight:500}.mx_AppearanceUserSettingsTab_fontSlider_largeText{font-size:18px;padding-left:20px;padding-right:5px;font-weight:500}.mx_AppearanceUserSettingsTab>.mx_SettingsTab_SubHeading{margin-bottom:32px}.mx_AppearanceUserSettingsTab_themeSection{color:#2e2f32}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:4px;margin-bottom:30px}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton{padding:1.6rem;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:10px;width:180px;background:#e3e8f0;opacity:.4;-ms-flex-negative:1;flex-shrink:1;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;margin-right:15px;margin-top:10px;font-weight:600;color:#61708b}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton>span{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled{opacity:1}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_light{background-color:#f3f8fd;color:#2e2f32}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_dark{background-color:#25282e;color:#f3f8fd}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_dark>input>div,.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_dark>input>div>div{border-color:#e3e8f0}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_black{background-color:#000;color:#f3f8fd}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_black>input>div,.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_black>input>div>div{border-color:#e3e8f0}.mx_SettingsTab_customFontSizeField{margin-left:calc(1.6rem + 10px)}.mx_AppearanceUserSettingsTab_Layout_RadioButtons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;color:#2e2f32}.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_AppearanceUserSettingsTab_spacer{width:24px}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:1;flex-shrink:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:300px;border:1px solid #e3e8f0;border-radius:10px}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_EventTile_msgOption,.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_MessageActionBar{display:none}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_AppearanceUserSettingsTab_Layout_RadioButton_preview{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:10px;pointer-events:none}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_RadioButton{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;padding:10px}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_EventTile_content{margin-right:0}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton.mx_AppearanceUserSettingsTab_Layout_RadioButton_selected{border-color:#0dbd8b}.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton{border-top:1px solid #e3e8f0}.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton>input+div{border-color:rgba(97,112,139,.2)}.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton_checked{background-color:rgba(13,189,139,.08)}.mx_AppearanceUserSettingsTab_Advanced{color:#2e2f32}.mx_AppearanceUserSettingsTab_Advanced>*{margin-bottom:16px}.mx_AppearanceUserSettingsTab_Advanced .mx_AppearanceUserSettingsTab_AdvancedToggle{color:#0dbd8b;cursor:pointer}.mx_AppearanceUserSettingsTab_Advanced .mx_AppearanceUserSettingsTab_systemFont{margin-left:calc(1.6rem + 10px)}.mx_GeneralUserSettingsTab_changePassword .mx_Field{margin-right:100px}.mx_GeneralUserSettingsTab_changePassword .mx_Field:first-child{margin-top:0}.mx_GeneralUserSettingsTab_accountSection .mx_SettingsTab_subheading:nth-child(n+1),.mx_GeneralUserSettingsTab_discovery .mx_SettingsTab_subheading:nth-child(n+2),.mx_SetIdServer .mx_SettingsTab_subheading{margin-top:24px}.mx_GeneralUserSettingsTab_accountSection .mx_Spinner,.mx_GeneralUserSettingsTab_discovery .mx_Spinner{-webkit-box-pack:left;-ms-flex-pack:left;justify-content:left}.mx_GeneralUserSettingsTab_accountSection .mx_EmailAddresses,.mx_GeneralUserSettingsTab_accountSection .mx_PhoneNumbers,.mx_GeneralUserSettingsTab_discovery .mx_ExistingEmailAddress,.mx_GeneralUserSettingsTab_discovery .mx_ExistingPhoneNumber,.mx_GeneralUserSettingsTab_languageInput{margin-right:100px}.mx_GeneralUserSettingsTab_warningIcon{vertical-align:middle}.mx_HelpUserSettingsTab_debugButton{margin-bottom:5px;margin-top:5px}.mx_HelpUserSettingsTab span.mx_AccessibleButton{word-break:break-word}.mx_HelpUserSettingsTab code{word-break:break-all;-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}.mx_HelpUserSettingsTab_accessToken{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;border-radius:5px;border:1px solid #747474;margin-bottom:10px;margin-top:10px;padding:10px}.mx_HelpUserSettingsTab_accessToken_copy{-ms-flex-negative:0;flex-shrink:0;cursor:pointer;margin-left:20px;display:inherit}.mx_HelpUserSettingsTab_accessToken_copy>div{-webkit-mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);background-color:#2e2f32;margin-left:5px;width:20px;height:20px;background-repeat:no-repeat}.mx_LabsUserSettingsTab .mx_SettingsTab_section{margin-top:32px}.mx_LabsUserSettingsTab .mx_SettingsTab_section .mx_SettingsFlag{margin-right:0}.mx_MjolnirUserSettingsTab .mx_Field{margin-right:100px}.mx_MjolnirUserSettingsTab_listItem{margin-bottom:2px}.mx_NotificationUserSettingsTab .mx_SettingsTab_heading{margin-bottom:10px}.mx_PreferencesUserSettingsTab .mx_Field{margin-right:100px}.mx_PreferencesUserSettingsTab .mx_SettingsTab_section{margin-bottom:30px}.mx_SecurityUserSettingsTab .mx_DevicesPanel{width:auto;max-width:880px}.mx_SecurityUserSettingsTab_deviceInfo{display:table;padding-left:0}.mx_SecurityUserSettingsTab_deviceInfo>li{display:table-row}.mx_SecurityUserSettingsTab_deviceInfo>li>label,.mx_SecurityUserSettingsTab_deviceInfo>li>span{display:table-cell;padding-right:1em}.mx_SecurityUserSettingsTab_bulkOptions .mx_AccessibleButton,.mx_SecurityUserSettingsTab_importExportButtons .mx_AccessibleButton{margin-right:10px}.mx_SecurityUserSettingsTab_importExportButtons{margin-bottom:15px}.mx_SecurityUserSettingsTab_ignoredUser{margin-bottom:5px}.mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton{margin-right:10px}.mx_SecurityUserSettingsTab .mx_SettingsTab_section .mx_AccessibleButton_kind_link{padding:0;font-size:inherit}.mx_SecurityUserSettingsTab .mx_SecurityUserSettingsTab_warning{color:#ff4b55;position:relative;padding-left:40px;margin-top:30px}.mx_SecurityUserSettingsTab .mx_SecurityUserSettingsTab_warning:before{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 center;mask-position:0 center;-webkit-mask-size:2.4rem;mask-size:2.4rem;position:absolute;width:2.4rem;height:2.4rem;content:"";top:0;left:0;background-color:#ff4b55;-webkit-mask-image:url(../../img/feather-customised/alert-triangle.38aca3a.svg);mask-image:url(../../img/feather-customised/alert-triangle.38aca3a.svg)}.mx_VoiceUserSettingsTab .mx_Field{margin-right:100px}.mx_VoiceUserSettingsTab_missingMediaPermissions{margin-bottom:15px}.mx_SpaceBasicSettings .mx_Field{margin:32px 0}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:24px}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer .mx_SpaceBasicSettings_avatar{position:relative;height:80px;width:80px;background-color:#8d99a5;border-radius:16px}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer img.mx_SpaceBasicSettings_avatar{width:80px;height:80px;-o-object-fit:cover;object-fit:cover;border-radius:16px}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer div.mx_SpaceBasicSettings_avatar{cursor:pointer}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer div.mx_SpaceBasicSettings_avatar:before{content:"";position:absolute;height:80px;width:80px;top:0;left:0;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:20px;mask-size:20px;-webkit-mask-image:url(../../img/element-icons/camera.a81a395.svg);mask-image:url(../../img/element-icons/camera.a81a395.svg)}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer>input[type=file]{display:none}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer>.mx_AccessibleButton_kind_link{display:inline-block;padding:0;margin:auto 16px;color:#368bd6}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer>.mx_SpaceBasicSettings_avatar_remove{color:#ff4b55}.mx_SpaceBasicSettings .mx_FormButton{padding:8px 22px;margin-left:auto;display:block;width:-webkit-min-content;width:-moz-min-content;width:min-content}.mx_SpaceBasicSettings .mx_AccessibleButton_disabled{cursor:not-allowed}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu_background{background-color:rgba(46,48,51,.38);opacity:.6;left:71px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu{padding:24px;width:480px;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#fff;position:relative}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu>div>h2{font-weight:600;font-size:1.8rem;margin-top:4px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu>div>p{font-size:1.5rem;color:#737d8c;margin:0}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_BetaCard_betaPill{position:absolute;top:24px;right:24px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType{position:relative;padding:16px 32px 16px 72px;width:432px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;border:1px solid #e7e7e7;font-size:1.5rem;margin:20px 0}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType>h3{font-weight:600;margin:0 0 4px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType>span{color:#737d8c}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:before{position:absolute;content:"";width:32px;height:32px;top:24px;left:20px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px;mask-size:24px;background-color:#8d99a5}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover{border-color:#0dbd8b}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover:before{background-color:#0dbd8b}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover>span{color:#2e2f32}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType_public:before{-webkit-mask-image:url(../../img/globe.8201f08.svg);mask-image:url(../../img/globe.8201f08.svg)}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType_private:before{-webkit-mask-image:url(../../img/element-icons/lock.1f264bd.svg);mask-image:url(../../img/element-icons/lock.1f264bd.svg)}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenu_back{width:28px;height:28px;position:relative;background-color:rgba(141,151,165,.2);border-radius:14px;margin-bottom:12px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenu_back:before{content:"";position:absolute;height:28px;width:28px;top:0;left:0;background-color:#8d99a5;-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:2px 3px;mask-position:2px 3px;-webkit-mask-size:24px;mask-size:24px;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton_kind_primary{padding:8px 22px;margin-left:auto;display:block;width:-webkit-min-content;width:-moz-min-content;width:min-content}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton_disabled{cursor:not-allowed}.mx_SpacePublicShare .mx_AccessibleButton{position:relative;padding:16px 32px 16px 72px;width:432px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;border:1px solid #e7e7e7;font-size:1.5rem;margin:20px 0}.mx_SpacePublicShare .mx_AccessibleButton>h3{font-weight:600;margin:0 0 4px}.mx_SpacePublicShare .mx_AccessibleButton>span{color:#737d8c}.mx_SpacePublicShare .mx_AccessibleButton:before{position:absolute;content:"";width:32px;height:32px;top:24px;left:20px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px;mask-size:24px;background-color:#8d99a5}.mx_SpacePublicShare .mx_AccessibleButton:hover{border-color:#0dbd8b}.mx_SpacePublicShare .mx_AccessibleButton:hover:before{background-color:#0dbd8b}.mx_SpacePublicShare .mx_AccessibleButton:hover>span{color:#2e2f32}.mx_SpacePublicShare .mx_AccessibleButton.mx_SpacePublicShare_shareButton:before{-webkit-mask-image:url(../../img/element-icons/link.8f4b1fc.svg);mask-image:url(../../img/element-icons/link.8f4b1fc.svg)}.mx_SpacePublicShare .mx_AccessibleButton.mx_SpacePublicShare_inviteButton:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_InlineTermsAgreement_cbContainer{margin-bottom:10px;font-size:1.4rem}.mx_InlineTermsAgreement_cbContainer a{color:#0dbd8b;text-decoration:none}.mx_InlineTermsAgreement_cbContainer .mx_InlineTermsAgreement_checkbox{margin-top:10px}.mx_InlineTermsAgreement_cbContainer .mx_InlineTermsAgreement_checkbox input{vertical-align:text-bottom}.mx_InlineTermsAgreement_link{display:inline-block;-webkit-mask-image:url(../../img/external-link.a8d3e9b.svg);mask-image:url(../../img/external-link.a8d3e9b.svg);background-color:#0dbd8b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:12px;height:12px;margin-left:3px;vertical-align:middle}.mx_AnalyticsToast .mx_AccessibleButton_kind_danger{background:none;color:#0dbd8b}.mx_AnalyticsToast .mx_AccessibleButton_kind_primary{background:#0dbd8b;color:#fff}.mx_NonUrgentEchoFailureToast .mx_NonUrgentEchoFailureToast_icon{display:inline-block;width:1.8rem;height:1.8rem;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#fff;-webkit-mask-image:url(../../img/element-icons/cloud-off.33cd28e.svg);mask-image:url(../../img/element-icons/cloud-off.33cd28e.svg);margin-right:8px}.mx_NonUrgentEchoFailureToast span{vertical-align:middle}.mx_NonUrgentEchoFailureToast .mx_AccessibleButton{padding:0}.mx_VerificationShowSas_decimalSas{text-align:center;font-weight:700;padding-left:3px;padding-right:3px}.mx_VerificationShowSas_decimalSas span{margin-left:5px;margin-right:5px}.mx_VerificationShowSas_emojiSas{text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:25px 0}.mx_VerificationShowSas_emojiSas_block{display:inline-block;margin-bottom:16px;position:relative;width:52px}.mx_AuthPage_modal .mx_VerificationShowSas_emojiSas_block,.mx_Dialog .mx_VerificationShowSas_emojiSas_block{width:60px}.mx_VerificationShowSas_emojiSas_emoji{font-size:3.2rem}.mx_VerificationShowSas_emojiSas_label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:1.2rem}.mx_VerificationShowSas_emojiSas_break{-ms-flex-preferred-size:100%;flex-basis:100%}.mx_VerificationShowSas .mx_Dialog_buttons button.mx_VerificationShowSas_matchButton{color:#0dbd8b;background-color:rgba(3,179,129,.16);border:none}.mx_VerificationShowSas .mx_Dialog_buttons button.mx_VerificationShowSas_noMatchButton{color:#ff4b55;background-color:rgba(255,75,85,.16);border:none}.mx_PlayPauseButton{position:relative;width:32px;height:32px;border-radius:32px;background-color:#fff}.mx_PlayPauseButton:before{content:"";position:absolute;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_PlayPauseButton.mx_PlayPauseButton_disabled:before{opacity:.5}.mx_PlayPauseButton.mx_PlayPauseButton_play:before{width:13px;height:16px;top:8px;left:12px;-webkit-mask-image:url(../../img/element-icons/play.a72552b.svg);mask-image:url(../../img/element-icons/play.a72552b.svg)}.mx_PlayPauseButton.mx_PlayPauseButton_pause:before{width:10px;height:12px;top:10px;left:11px;-webkit-mask-image:url(../../img/element-icons/pause.c4c0886.svg);mask-image:url(../../img/element-icons/pause.c4c0886.svg)}.mx_VoiceMessagePrimaryContainer{padding:7px 12px 7px 11px;background-color:#e3e8f0;border-radius:12px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#737d8c;font-size:1.4rem;line-height:2.4rem}.mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar{background-color:#c1c6cd}.mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar.mx_Waveform_bar_100pct{-webkit-transition:background-color .25s ease;transition:background-color .25s ease;background-color:#737d8c}.mx_VoiceMessagePrimaryContainer .mx_Clock{width:4.2rem;padding-right:6px;padding-left:8px}.mx_Waveform{position:relative;height:30px;top:1px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.mx_Waveform .mx_Waveform_bar{width:0;border:1px solid transparent;border-radius:2px;min-height:0;max-height:100%;margin-left:1px;margin-right:1px}.mx_CallContainer{position:absolute;right:20px;bottom:72px;z-index:100;pointer-events:none}.mx_CallContainer .mx_CallPreview{pointer-events:auto;cursor:pointer}.mx_CallContainer .mx_CallPreview .mx_CallView_video{width:350px}.mx_CallContainer .mx_CallPreview .mx_VideoFeed_local{border-radius:8px;overflow:hidden}.mx_CallContainer .mx_AppTile_persistedWrapper div{min-width:350px}.mx_CallContainer .mx_IncomingCallBox{min-width:250px;background-color:#f4f6fa;padding:8px;-webkit-box-shadow:0 14px 24px rgba(0,0,0,.08);box-shadow:0 14px 24px rgba(0,0,0,.08);border-radius:8px;pointer-events:auto;cursor:pointer}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo{display:-webkit-box;display:-ms-flexbox;display:flex;direction:row}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo .mx_BaseAvatar_initial,.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo img{margin:8px}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo h1,.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo p{margin:0;padding:0;font-size:1.4rem;line-height:1.6rem}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo h1{font-weight:700}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons{padding:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons>.mx_IncomingCallBox_spacer{width:8px}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons>*{-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;margin-right:0;font-size:1.5rem;line-height:2.4rem}.mx_CallView{border-radius:8px;background-color:#f2f5f8;padding-left:8px;padding-right:8px;pointer-events:auto}.mx_CallView_large{padding-bottom:10px;margin:5px 5px 5px 18px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_CallView_large,.mx_CallView_large .mx_CallView_voice{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_CallView_pip{width:320px;padding-bottom:8px;margin-top:10px;background-color:#f4f6fa;-webkit-box-shadow:0 4px 20px rgba(0,0,0,.2);box-shadow:0 4px 20px rgba(0,0,0,.2);border-radius:8px}.mx_CallView_pip .mx_CallView_voice{height:180px}.mx_CallView_pip .mx_CallView_callControls{bottom:0}.mx_CallView_pip .mx_CallView_callControls_button:before{width:36px;height:36px}.mx_CallView_pip .mx_CallView_holdTransferContent{padding-top:10px;padding-bottom:25px}.mx_CallView_content{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:8px}.mx_CallView_voice{-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;background-color:#27303a}.mx_CallView_voice,.mx_CallView_voice_avatarsContainer{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-direction:normal}.mx_CallView_voice_avatarsContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-ms-flex-direction:row;flex-direction:row}.mx_CallView_voice_avatarsContainer div{margin-left:12px;margin-right:12px}.mx_CallView_voice .mx_CallView_holdTransferContent .mx_CallView_voice_avatarContainer{border-radius:2000px;overflow:hidden;position:relative}.mx_CallView_holdTransferContent{height:20px;padding-top:20px;padding-bottom:15px;color:#fff}.mx_CallView_holdTransferContent .mx_AccessibleButton_hasKind{padding:0;font-weight:700}.mx_CallView_video{width:100%;height:100%;z-index:30;overflow:hidden}.mx_CallView_video_hold{overflow:hidden}.mx_CallView_video_hold .mx_VideoFeed{visibility:hidden}.mx_CallView_video_holdBackground{position:absolute;width:100%;height:100%;left:0;right:0;background-repeat:no-repeat;background-size:cover;background-position:50%;-webkit-filter:blur(20px);filter:blur(20px)}.mx_CallView_video_holdBackground:after{content:"";display:block;position:absolute;width:100%;height:100%;left:0;right:0;background-color:rgba(0,0,0,.6)}.mx_CallView_video .mx_CallView_holdTransferContent{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-weight:700;color:#fff;text-align:center}.mx_CallView_video .mx_CallView_holdTransferContent:before{display:block;margin-left:auto;margin-right:auto;content:"";width:40px;height:40px;background-image:url(../../img/voip/paused.77799b3.svg);background-position:50%;background-size:cover}.mx_CallView_pip .mx_CallView_video .mx_CallView_holdTransferContent:before{width:30px;height:30px}.mx_CallView_video .mx_CallView_holdTransferContent .mx_AccessibleButton_hasKind{padding:0}.mx_CallView_header{height:44px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:left;-ms-flex-pack:left;justify-content:left;-ms-flex-negative:0;flex-shrink:0}.mx_CallView_header_callType{font-size:1.2rem;font-weight:700;vertical-align:middle}.mx_CallView_header_secondaryCallInfo:before{content:"·";margin-left:6px;margin-right:6px}.mx_CallView_header_controls{margin-left:auto}.mx_CallView_header_button{display:inline-block;vertical-align:middle;cursor:pointer}.mx_CallView_header_button:before{content:"";display:inline-block;height:20px;width:20px;vertical-align:middle;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}.mx_CallView_header_button_fullscreen:before{-webkit-mask-image:url(../../img/element-icons/call/fullscreen.43be138.svg);mask-image:url(../../img/element-icons/call/fullscreen.43be138.svg)}.mx_CallView_header_button_expand:before{-webkit-mask-image:url(../../img/element-icons/call/expand.7ef9f56.svg);mask-image:url(../../img/element-icons/call/expand.7ef9f56.svg)}.mx_CallView_header_callInfo{margin-left:12px;margin-right:16px}.mx_CallView_header_roomName{font-weight:700;font-size:12px;line-height:normal;height:15px}.mx_CallView_secondaryCall_roomName{margin-left:4px}.mx_CallView_header_callTypeSmall{font-size:12px;color:#737d8c;line-height:normal;height:15px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:240px}.mx_CallView_header_phoneIcon{display:inline-block;margin-right:6px;height:16px;width:16px;vertical-align:middle}.mx_CallView_header_phoneIcon:before{content:"";display:inline-block;vertical-align:top;height:16px;width:16px;background-color:#ff4b55;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg)}.mx_CallView_callControls{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;bottom:5px;width:100%;opacity:1;-webkit-transition:opacity .5s;transition:opacity .5s}.mx_CallView_callControls_hidden{opacity:.001;pointer-events:none}.mx_CallView_callControls_button{cursor:pointer;margin-left:8px;margin-right:8px}.mx_CallView_callControls_button:before{content:"";display:inline-block;height:48px;width:48px;background-repeat:no-repeat;background-size:contain;background-position:50%}.mx_CallView_callControls_dialpad{margin-right:auto}.mx_CallView_callControls_dialpad:before{background-image:url(../../img/voip/dialpad.fdda9a0.svg)}.mx_CallView_callControls_button_dialpad_hidden{margin-right:auto;cursor:auto}.mx_CallView_callControls_button_micOn:before{background-image:url(../../img/voip/mic-on.2592c14.svg)}.mx_CallView_callControls_button_micOff:before{background-image:url(../../img/voip/mic-off.774e42b.svg)}.mx_CallView_callControls_button_vidOn:before{background-image:url(../../img/voip/vid-on.b9b8bbf.svg)}.mx_CallView_callControls_button_vidOff:before{background-image:url(../../img/voip/vid-off.5552596.svg)}.mx_CallView_callControls_button_hangup:before{background-image:url(../../img/voip/hangup.9c3adeb.svg)}.mx_CallView_callControls_button_more{margin-left:auto}.mx_CallView_callControls_button_more:before{background-image:url(../../img/voip/more.5e8055e.svg)}.mx_CallView_callControls_button_more_hidden{margin-left:auto;cursor:auto}.mx_CallView_callControls_button_invisible{visibility:hidden;pointer-events:none;position:absolute}.mx_CallViewForRoom{overflow:hidden}.mx_CallViewForRoom .mx_CallViewForRoom_ResizeWrapper{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:8px}.mx_CallViewForRoom .mx_CallViewForRoom_ResizeWrapper:hover .mx_CallViewForRoom_ResizeHandle{width:100%!important;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_CallViewForRoom .mx_CallViewForRoom_ResizeWrapper:hover .mx_CallViewForRoom_ResizeHandle:after{content:"";margin-top:3px;border-radius:4px;height:4px;width:100%;max-width:64px;background-color:#2e2f32}.mx_DialPad{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:16px;gap:16px}.mx_DialPad_button{width:40px;height:40px;background-color:#e3e8f0;border-radius:40px;font-size:18px;font-weight:600;text-align:center;vertical-align:middle;line-height:40px}.mx_DialPad_deleteButton:before,.mx_DialPad_dialButton:before{content:"";display:inline-block;height:40px;width:40px;vertical-align:middle;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:20px;mask-size:20px;-webkit-mask-position:center;mask-position:center;background-color:#fff}.mx_DialPad_deleteButton{background-color:#ff4b55}.mx_DialPad_deleteButton:before{-webkit-mask-image:url(../../img/element-icons/call/delete.833d785.svg);mask-image:url(../../img/element-icons/call/delete.833d785.svg);-webkit-mask-position:9px;mask-position:9px}.mx_DialPad_dialButton{background-color:#0dbd8b}.mx_DialPad_dialButton:before{-webkit-mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg)}.mx_DialPadContextMenu_header{margin-top:12px;margin-left:12px;margin-right:12px}.mx_DialPadContextMenu_title{color:#61708b;font-size:12px;font-weight:600}.mx_DialPadContextMenu_dialled{height:1em;font-size:18px;font-weight:600}.mx_DialPadContextMenu_dialPad{margin:16px}.mx_DialPadContextMenu_horizSep{position:relative}.mx_DialPadContextMenu_horizSep:before{content:"";position:absolute;width:100%;border-bottom:1px solid #e3e8f0}.mx_Dialog_dialPadWrapper .mx_Dialog{padding:0}.mx_DialPadModal{width:192px;height:368px}.mx_DialPadModal_header{margin-top:12px;margin-left:12px;margin-right:12px}.mx_DialPadModal_title{color:#61708b;font-size:12px;font-weight:600}.mx_DialPadModal_cancel{float:right;-webkit-mask:url(../../img/feather-customised/cancel.23c2689.svg);mask:url(../../img/feather-customised/cancel.23c2689.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;width:14px;height:14px;background-color:#c1c1c1;cursor:pointer}.mx_DialPadModal_field{border:none;margin:0}.mx_DialPadModal_field input{font-size:18px;font-weight:600}.mx_DialPadModal_dialPad{margin-left:16px;margin-right:16px;margin-top:16px}.mx_DialPadModal_horizSep{position:relative}.mx_DialPadModal_horizSep:before{content:"";position:absolute;width:100%;border-bottom:1px solid #e3e8f0}.mx_VideoFeed_voice{padding-bottom:52px;background-color:#27303a}.mx_VideoFeed_remote{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_VideoFeed_remote.mx_VideoFeed_video{background-color:#000}.mx_VideoFeed_local{max-width:25%;max-height:25%;position:absolute;right:10px;top:10px;z-index:100;border-radius:4px}.mx_VideoFeed_local.mx_VideoFeed_video{background-color:transparent}.mx_VideoFeed_mirror{-webkit-transform:scaleX(-1);transform:scaleX(-1)}
+`
+const snackbarCSS = `
+#snackbar {
+ display: flex;
+ visibility: hidden;
+ min-width: 250px;
+ margin-left: -125px;
+ background-color: #333;
+ color: #fff;
+ text-align: center;
+ position: fixed;
+ z-index: 1;
+ left: 50%;
+ bottom: 30px;
+ font-size: 17px;
+ padding: 6px 16px;
+ font-family: Inter, "Roboto", "Helvetica", "Arial", sans-serif;
+ font-weight: 400;
+ line-height: 1.43;
+ border-radius: 4px;
+ letter-spacing: 0.01071em;
+}
+
+#snackbar.mx_show {
+ visibility: visible;
+ -webkit-animation: mx_snackbar_fadein 0.5s, mx_snackbar_fadeout 0.5s 2.5s;
+ animation: mx_snackbar_fadein 0.5s, mx_snackbar_fadeout 0.5s 2.5s;
+}
+
+a.mx_reply_anchor{
+ cursor: pointer;
+ color: #238cf5;
+}
+
+a.mx_reply_anchor:hover{
+ text-decoration: underline;
+}
+
+@-webkit-keyframes mx_snackbar_fadein {
+ from {bottom: 0; opacity: 0;}
+ to {bottom: 30px; opacity: 1;}
+}
+
+@keyframes mx_snackbar_fadein {
+ from {bottom: 0; opacity: 0;}
+ to {bottom: 30px; opacity: 1;}
+}
+
+@-webkit-keyframes mx_snackbar_fadeout {
+ from {bottom: 30px; opacity: 1;}
+ to {bottom: 0; opacity: 0;}
+}
+
+@keyframes mx_snackbar_fadeout {
+ from {bottom: 30px; opacity: 1;}
+ to {bottom: 0; opacity: 0;}
+}
+`
+export default lightCSS + snackbarCSS;
diff --git a/src/utils/exportUtils/exportJS.ts b/src/utils/exportUtils/exportJS.ts
new file mode 100644
index 0000000000..4fd0a5159d
--- /dev/null
+++ b/src/utils/exportUtils/exportJS.ts
@@ -0,0 +1,32 @@
+export default `
+function scrollToElement(replyId){
+ let el = document.getElementById(replyId);
+ if(!el) {
+ showToast("The message you're looking for wasn't exported");
+ return;
+ };
+ el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+ el.style.backgroundColor = '#f6f7f8';
+ el.style.transition = 'background-color 1s ease'
+ setTimeout(() => {
+ el.style.backgroundColor = "white"
+ }, 2000);
+}
+
+function showToast(text) {
+ let el = document.getElementById("snackbar");
+ el.innerHTML = text;
+ el.className = "mx_show";
+ setTimeout(() => {
+ el.className = el.className.replace("mx_show", "");
+ }, 2000);
+}
+
+window.onload = () => {
+ document.querySelectorAll('.mx_reply_anchor').forEach(element => {
+ element.addEventListener('click', event => {
+ scrollToElement(event.target.getAttribute("scroll-to"));
+ })
+ })
+}
+`
From 409213ceb4adbae2e83b875a9e1bc9e8233b6022 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 31 May 2021 19:07:49 +0530
Subject: [PATCH 024/176] Remove conditional
---
src/utils/exportUtils/HtmlExport.tsx | 10 ++++------
1 file changed, 4 insertions(+), 6 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 22cf04669b..6ce7ad5c94 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -187,13 +187,11 @@ export default class HTMLExporter extends Exporter {
if (!haveTileForEvent(event)) continue;
content += this._wantsDateSeparator(event, prevEvent) ? this.getDateSeparator(event) : "";
-
- if (event.getType() === "m.room.message") {
- const shouldBeJoined = !this._wantsDateSeparator(event, prevEvent)
+ const shouldBeJoined = !this._wantsDateSeparator(event, prevEvent)
&& shouldFormContinuation(prevEvent, event);
- const body = await this.createMessageBody(event, shouldBeJoined);
- content += body;
- }
+ const body = await this.createMessageBody(event, shouldBeJoined);
+
+ content += body;
prevEvent = event;
}
return this.wrapHTML(content, room);
From 59c1b67b7dcebb0adab9065e09d6bc0dc0497c15 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 31 May 2021 21:01:19 +0530
Subject: [PATCH 025/176] Enable support for image, video and audio files
---
src/components/views/messages/MAudioBody.js | 11 ++++-
src/components/views/messages/MFileBody.js | 8 ++--
src/components/views/messages/MImageBody.js | 10 +++--
src/components/views/messages/MVideoBody.tsx | 17 +++++++-
.../views/messages/MVoiceOrAudioBody.tsx | 3 +-
src/components/views/messages/MessageEvent.js | 4 ++
src/components/views/rooms/EventTile.tsx | 12 ++++--
src/utils/exportUtils/HtmlExport.tsx | 42 +++++++++++++++++--
8 files changed, 86 insertions(+), 21 deletions(-)
diff --git a/src/components/views/messages/MAudioBody.js b/src/components/views/messages/MAudioBody.js
index 0d5e449fc0..53aa013503 100644
--- a/src/components/views/messages/MAudioBody.js
+++ b/src/components/views/messages/MAudioBody.js
@@ -34,6 +34,7 @@ export default class MAudioBody extends React.Component {
error: null,
};
}
+
onPlayToggle() {
this.setState({
playing: !this.state.playing,
@@ -41,6 +42,7 @@ export default class MAudioBody extends React.Component {
}
_getContentUrl() {
+ if (this.props.mediaSrc) return this.props.mediaSrc;
const media = mediaFromContent(this.props.mxEvent.getContent());
if (media.isEncrypted) {
return this.state.decryptedUrl;
@@ -49,6 +51,11 @@ export default class MAudioBody extends React.Component {
}
}
+ getFileBody() {
+ if (this.props.mediaSrc) return null;
+ return <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />;
+ }
+
componentDidMount() {
const content = this.props.mxEvent.getContent();
if (content.file !== undefined && this.state.decryptedUrl === null) {
@@ -101,11 +108,11 @@ export default class MAudioBody extends React.Component {
}
const contentUrl = this._getContentUrl();
-
+ const fileBody = this.getFileBody();
return (
<span className="mx_MAudioBody">
<audio src={contentUrl} controls />
- <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />
+ { fileBody }
</span>
);
}
diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index 8f464e08bd..9dc1de7683 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -242,7 +242,7 @@ export default class MFileBody extends React.Component {
<span className="mx_MFileBody">
{placeholder}
<div className="mx_MFileBody_download">
- <div style={{display: "none"}}>
+ <div style={{ display: "none" }}>
{ /*
* Add dummy copy of the "a" tag
* We'll use it to learn how the download link
@@ -309,7 +309,7 @@ export default class MFileBody extends React.Component {
if (this.props.tileShape === "file_grid") {
return (
<span className="mx_MFileBody">
- {placeholder}
+ { placeholder }
<div className="mx_MFileBody_download">
<a className="mx_MFileBody_downloadLink" {...downloadProps}>
{ fileName }
@@ -323,7 +323,7 @@ export default class MFileBody extends React.Component {
} else {
return (
<span className="mx_MFileBody">
- {placeholder}
+ { placeholder }
<div className="mx_MFileBody_download">
<a {...downloadProps}>
<span className="mx_MFileBody_download_icon" />
@@ -336,7 +336,7 @@ export default class MFileBody extends React.Component {
} else {
const extra = text ? (': ' + text) : '';
return <span className="mx_MFileBody">
- {placeholder}
+ { placeholder }
{ _t("Invalid file%(extra)s", { extra: extra }) }
</span>;
}
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 6505b1d66a..31cdeed6a0 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -90,7 +90,7 @@ export default class MImageBody extends React.Component {
showImage() {
localStorage.setItem("mx_ShowImage_" + this.props.mxEvent.getId(), "true");
- this.setState({showImage: true});
+ this.setState({ showImage: true });
this._downloadImage();
}
@@ -172,6 +172,7 @@ export default class MImageBody extends React.Component {
}
_getContentUrl() {
+ if (this.props.mediaSrc) return this.props.mediaSrc;
const media = mediaFromContent(this.props.mxEvent.getContent());
if (media.isEncrypted) {
return this.state.decryptedUrl;
@@ -296,7 +297,7 @@ export default class MImageBody extends React.Component {
if (showImage) {
// Don't download anything becaue we don't want to display anything.
this._downloadImage();
- this.setState({showImage: true});
+ this.setState({ showImage: true });
}
this._afterComponentDidMount();
@@ -345,7 +346,7 @@ export default class MImageBody extends React.Component {
imageElement = <HiddenImagePlaceholder />;
} else {
imageElement = (
- <img style={{display: 'none'}} src={thumbUrl} ref={this._image}
+ <img style={{ display: 'none' }} src={thumbUrl} ref={this._image}
alt={content.body}
onError={this.onImageError}
onLoad={this.onImageLoad}
@@ -449,6 +450,7 @@ export default class MImageBody extends React.Component {
// Overidden by MStickerBody
getFileBody() {
+ if (this.props.mediaSrc) return null;
return <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />;
}
@@ -466,7 +468,7 @@ export default class MImageBody extends React.Component {
const contentUrl = this._getContentUrl();
let thumbUrl;
- if (this._isGif() && SettingsStore.getValue("autoplayGifsAndVideos")) {
+ if ((this._isGif() && SettingsStore.getValue("autoplayGifsAndVideos")) || this.props.mediaSrc) {
thumbUrl = contentUrl;
} else {
thumbUrl = this._getThumbUrl();
diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx
index 2efdce506e..68cbb6702c 100644
--- a/src/components/views/messages/MVideoBody.tsx
+++ b/src/components/views/messages/MVideoBody.tsx
@@ -29,6 +29,8 @@ interface IProps {
mxEvent: any;
/* called when the video has loaded */
onHeightChanged: () => void;
+ /* used to refer to the local file while exporting */
+ mediaSrc?: string;
}
interface IState {
@@ -76,6 +78,7 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
}
private getContentUrl(): string|null {
+ if (this.props.mediaSrc) return this.props.mediaSrc;
const media = mediaFromContent(this.props.mxEvent.getContent());
if (media.isEncrypted) {
return this.state.decryptedUrl;
@@ -90,6 +93,9 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
}
private getThumbUrl(): string|null {
+ // there's no need of thumbnail when the content is local
+ if (this.props.mediaSrc) return null;
+
const content = this.props.mxEvent.getContent();
const media = mediaFromContent(content);
if (media.isEncrypted) {
@@ -184,6 +190,11 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
this.props.onHeightChanged();
}
+ private getFileBody = () => {
+ if (this.props.mediaSrc) return null;
+ return <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />;
+ }
+
render() {
const content = this.props.mxEvent.getContent();
const autoplay = SettingsStore.getValue("autoplayGifsAndVideos");
@@ -197,7 +208,7 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
);
}
- // Important: If we aren't autoplaying and we haven't decrypred it yet, show a video with a poster.
+ // Important: If we aren't autoplaying and we haven't decrypted it yet, show a video with a poster.
if (content.file !== undefined && this.state.decryptedUrl === null && autoplay) {
// Need to decrypt the attachment
// The attachment is decrypted in componentDidMount.
@@ -229,6 +240,8 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
preload = "none";
}
}
+
+ const fileBody = this.getFileBody();
return (
<span className="mx_MVideoBody">
<video
@@ -246,7 +259,7 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
onPlay={this.videoOnPlay}
>
</video>
- <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />
+ { fileBody }
</span>
);
}
diff --git a/src/components/views/messages/MVoiceOrAudioBody.tsx b/src/components/views/messages/MVoiceOrAudioBody.tsx
index 0cebcf3440..d548d8d2fa 100644
--- a/src/components/views/messages/MVoiceOrAudioBody.tsx
+++ b/src/components/views/messages/MVoiceOrAudioBody.tsx
@@ -23,6 +23,7 @@ import MVoiceMessageBody from "./MVoiceMessageBody";
interface IProps {
mxEvent: MatrixEvent;
+ mediaSrc?: string;
}
@replaceableComponent("views.messages.MVoiceOrAudioBody")
@@ -30,7 +31,7 @@ export default class MVoiceOrAudioBody extends React.PureComponent<IProps> {
public render() {
const isVoiceMessage = !!this.props.mxEvent.getContent()['org.matrix.msc2516.voice'];
const voiceMessagesEnabled = SettingsStore.getValue("feature_voice_messages");
- if (isVoiceMessage && voiceMessagesEnabled) {
+ if (isVoiceMessage && voiceMessagesEnabled && !this.props.mediaSrc) {
return <MVoiceMessageBody {...this.props} />;
} else {
return <MAudioBody {...this.props} />;
diff --git a/src/components/views/messages/MessageEvent.js b/src/components/views/messages/MessageEvent.js
index 78e0dc422d..84a3d56d77 100644
--- a/src/components/views/messages/MessageEvent.js
+++ b/src/components/views/messages/MessageEvent.js
@@ -44,6 +44,9 @@ export default class MessageEvent extends React.Component {
/* the shape of the tile, used */
tileShape: PropTypes.string,
+ /* to set source to local file path during export */
+ mediaSrc: PropTypes.string,
+
/* the maximum image height to use, if the event is an image */
maxImageHeight: PropTypes.number,
@@ -120,6 +123,7 @@ export default class MessageEvent extends React.Component {
highlightLink={this.props.highlightLink}
showUrlPreview={this.props.showUrlPreview}
tileShape={this.props.tileShape}
+ mediaSrc={this.props.mediaSrc}
maxImageHeight={this.props.maxImageHeight}
replacingEventId={this.props.replacingEventId}
editState={this.props.editState}
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index ff10b3255a..8356119d71 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -103,7 +103,7 @@ for (const evType of ALL_RULE_TYPES) {
stateEventTileTypes[evType] = 'messages.TextualEvent';
}
-export function getHandlerTile(ev) {
+export function getHandlerTile(ev: MatrixEvent) {
const type = ev.getType();
// don't show verification requests we're not involved in,
@@ -251,6 +251,9 @@ interface IProps {
isExporting?: boolean;
+ // Used while exporting to refer to the local source rather than the online one
+ mediaSrc?: string;
+
// show twelve hour timestamps
isTwelveHour?: boolean;
@@ -342,7 +345,7 @@ export default class EventTile extends React.Component<IProps, IState> {
* or 'sent' receipt, for example.
* @returns {boolean}
*/
- private get isEligibleForSpecialReceipt() {
+ private get isEligibleForSpecialReceipt(): boolean {
// First, if there are other read receipts then just short-circuit this.
if (this.props.readReceipts && this.props.readReceipts.length > 0) return false;
if (!this.props.mxEvent) return false;
@@ -1150,6 +1153,7 @@ export default class EventTile extends React.Component<IProps, IState> {
mxEvent={this.props.mxEvent}
replacingEventId={this.props.replacingEventId}
editState={this.props.editState}
+ mediaSrc={this.props.mediaSrc}
highlights={this.props.highlights}
highlightLink={this.props.highlightLink}
showUrlPreview={this.props.showUrlPreview}
@@ -1332,8 +1336,8 @@ class SentReceipt extends React.PureComponent<ISentReceiptProps, ISentReceiptSta
return <span className="mx_EventTile_readAvatars">
<span className={receiptClasses} onMouseEnter={this.onHoverStart} onMouseLeave={this.onHoverEnd}>
- {nonCssBadge}
- {tooltip}
+ { nonCssBadge }
+ { tooltip }
</span>
</span>;
}
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 6ce7ad5c94..dfdd8a32cd 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -20,11 +20,13 @@ import exportJS from "./exportJS";
export default class HTMLExporter extends Exporter {
protected zip: JSZip;
protected avatars: Map<string, boolean>;
+ protected permalinkCreator: RoomPermalinkCreator;
constructor(res: MatrixEvent[], room: Room) {
super(res, room);
this.zip = new JSZip();
this.avatars = new Map<string, boolean>();
+ this.permalinkCreator = new RoomPermalinkCreator(this.room);
}
protected wrapHTML(content: string, room: Room) {
@@ -152,11 +154,12 @@ export default class HTMLExporter extends Exporter {
return wantsDateSeparator(prevEvent.getDate(), event.getDate());
}
- protected async createMessageBody(mxEv: MatrixEvent, joined = false) {
- const eventTile = <li id={mxEv.getId()}>
+
+ protected getEventTile(mxEv: MatrixEvent, continuation: boolean, mediaSrc?: string) {
+ return <li id={mxEv.getId()}>
<EventTile
mxEvent={mxEv}
- continuation={joined}
+ continuation={continuation}
isRedacted={mxEv.isRedacted()}
replacingEventId={mxEv.replacingEventId()}
isExporting={true}
@@ -166,8 +169,9 @@ export default class HTMLExporter extends Exporter {
checkUnmounting={() => false}
isTwelveHour={false}
last={false}
+ mediaSrc={mediaSrc}
lastInSection={false}
- permalinkCreator={new RoomPermalinkCreator(this.room)}
+ permalinkCreator={this.permalinkCreator}
lastSuccessful={false}
isSelectedEvent={false}
getRelationsForEvent={null}
@@ -177,6 +181,36 @@ export default class HTMLExporter extends Exporter {
showReadReceipts={false}
/>
</li>
+ }
+
+ protected async createMessageBody(mxEv: MatrixEvent, joined = false) {
+ let eventTile: JSX.Element;
+ switch (mxEv.getContent().msgtype) {
+ case "m.image": {
+ const blob = await this.getMediaBlob(mxEv);
+ const filePath = `images/${mxEv.getId()}.${blob.type.replace("image/", "")}`;
+ eventTile = this.getEventTile(mxEv, joined, filePath);
+ this.zip.file(filePath, blob);
+ break;
+ }
+ case "m.video": {
+ const blob = await this.getMediaBlob(mxEv);
+ const filePath = `videos/${mxEv.getId()}.${blob.type.replace("video/", "")}`;
+ eventTile = this.getEventTile(mxEv, joined, filePath);
+ this.zip.file(filePath, blob);
+ break;
+ }
+ case "m.audio": {
+ const blob = await this.getMediaBlob(mxEv);
+ const filePath = `audio/${mxEv.getId()}.${blob.type.replace("audio/", "")}`;
+ eventTile = this.getEventTile(mxEv, joined, filePath);
+ this.zip.file(filePath, blob);
+ break;
+ }
+ default:
+ eventTile = this.getEventTile(mxEv, joined);
+ break;
+ }
return renderToStaticMarkup(eventTile);
}
From fa073cd958ef7d994d4e733d468ccc5b49f6c61c Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 31 May 2021 21:35:08 +0530
Subject: [PATCH 026/176] Save and display room avatars
---
src/components/views/avatars/BaseAvatar.tsx | 2 +-
.../views/avatars/DecoratedRoomAvatar.tsx | 4 +-
src/utils/exportUtils/HtmlExport.tsx | 47 +++++++++++--------
3 files changed, 31 insertions(+), 22 deletions(-)
diff --git a/src/components/views/avatars/BaseAvatar.tsx b/src/components/views/avatars/BaseAvatar.tsx
index 8ce05e0a55..e0d0edd279 100644
--- a/src/components/views/avatars/BaseAvatar.tsx
+++ b/src/components/views/avatars/BaseAvatar.tsx
@@ -44,7 +44,7 @@ interface IProps {
className?: string;
}
-const calculateUrls = (url, urls) => {
+const calculateUrls = (url: string, urls: string[]) => {
// work out the full set of urls to try to load. This is formed like so:
// imageUrls: [ props.url, ...props.urls ]
diff --git a/src/components/views/avatars/DecoratedRoomAvatar.tsx b/src/components/views/avatars/DecoratedRoomAvatar.tsx
index f15538eabf..bd67255fc2 100644
--- a/src/components/views/avatars/DecoratedRoomAvatar.tsx
+++ b/src/components/views/avatars/DecoratedRoomAvatar.tsx
@@ -201,8 +201,8 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
oobData={this.props.oobData}
viewAvatarOnClick={this.props.viewAvatarOnClick}
/>
- {icon}
- {badge}
+ { icon }
+ { badge }
</div>;
}
}
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index dfdd8a32cd..f124359882 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -6,16 +6,18 @@ import { mediaFromContent } from "../../customisations/Media";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { Exporter } from "./Exporter";
-import * as ponyfill from "web-streams-polyfill/ponyfill"
import { renderToStaticMarkup } from 'react-dom/server'
import { Layout } from "../../settings/Layout";
import { shouldFormContinuation } from "../../components/structures/MessagePanel";
import { wantsDateSeparator } from "../../DateUtils";
import { RoomPermalinkCreator } from "../permalinks/Permalinks";
+import * as ponyfill from "web-streams-polyfill/ponyfill"
+import * as Avatar from "../../Avatar";
import EventTile, { haveTileForEvent } from "../../components/views/rooms/EventTile";
import DateSeparator from "../../components/views/messages/DateSeparator";
import exportCSS from "./exportCSS";
import exportJS from "./exportJS";
+import BaseAvatar from "../../components/views/avatars/BaseAvatar";
export default class HTMLExporter extends Exporter {
protected zip: JSZip;
@@ -29,7 +31,29 @@ export default class HTMLExporter extends Exporter {
this.permalinkCreator = new RoomPermalinkCreator(this.room);
}
- protected wrapHTML(content: string, room: Room) {
+ protected async getRoomAvatar() {
+ let blob: Blob;
+ const avatarUrl = Avatar.avatarUrlForRoom(this.room, 32, 32, "crop");
+ if (avatarUrl) {
+ const image = await fetch(avatarUrl);
+ blob = await image.blob();
+ this.zip.file("room.png", blob);
+ }
+ const avatar = (
+ <BaseAvatar
+ width={32}
+ height={32}
+ name={this.room.name}
+ title={this.room.name}
+ url={blob ? "room.png" : null}
+ resizeMethod={"crop"}
+ />
+ );
+ return renderToStaticMarkup(avatar);
+ }
+
+ protected async wrapHTML(content: string, room: Room) {
+ const roomAvatar = await this.getRoomAvatar();
return `
<!DOCTYPE html>
<html lang="en">
@@ -54,22 +78,7 @@ export default class HTMLExporter extends Exporter {
<div class="mx_RoomHeader_wrapper" aria-owns="mx_RightPanel">
<div class="mx_RoomHeader_avatar">
<div class="mx_DecoratedRoomAvatar">
- <span class="mx_BaseAvatar" role="presentation"
- ><span
- class="mx_BaseAvatar_initial"
- aria-hidden="true"
- style="
- font-size: 20.8px;
- width: 32px;
- line-height: 32px;
- "
- >G</span
- ><img
- class="mx_BaseAvatar_image"
- alt=""
- aria-hidden="true"
- style="width: 32px; height: 32px"
- /></span>
+ ${roomAvatar}
</div>
</div>
<div class="mx_RoomHeader_name">
@@ -228,7 +237,7 @@ export default class HTMLExporter extends Exporter {
content += body;
prevEvent = event;
}
- return this.wrapHTML(content, room);
+ return await this.wrapHTML(content, room);
}
public async export() {
From 28a1a551fe71b8264fa7198340481ba13f806bb0 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 31 May 2021 22:27:29 +0530
Subject: [PATCH 027/176] Save users' avatars
---
src/components/views/avatars/MemberAvatar.tsx | 4 +++-
src/components/views/messages/MImageBody.js | 4 ++--
src/components/views/rooms/EventTile.tsx | 10 ++++++--
src/utils/exportUtils/HtmlExport.tsx | 24 +++++++++++++++++--
4 files changed, 35 insertions(+), 7 deletions(-)
diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx
index 3205ca372c..8550f13e2d 100644
--- a/src/components/views/avatars/MemberAvatar.tsx
+++ b/src/components/views/avatars/MemberAvatar.tsx
@@ -36,6 +36,7 @@ interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" |
// Whether the onClick of the avatar should be overriden to dispatch `Action.ViewUser`
viewUserOnClick?: boolean;
title?: string;
+ avatarSrc?: string;
}
interface IState {
@@ -66,7 +67,8 @@ export default class MemberAvatar extends React.Component<IProps, IState> {
private static getState(props: IProps): IState {
if (props.member?.name) {
let imageUrl = null;
- if (props.member.getMxcAvatarUrl()) {
+ if (props.avatarSrc) imageUrl = props.avatarSrc;
+ else if (props.member.getMxcAvatarUrl()) {
imageUrl = mediaFromMxc(props.member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(
props.width,
props.height,
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 31cdeed6a0..9937624a0e 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -407,7 +407,7 @@ export default class MImageBody extends React.Component {
<div className="mx_MImageBody_thumbnail_container" style={{ maxHeight: maxHeight + "px" }} >
{ /* Calculate aspect ratio, using %padding will size _container correctly */ }
<div style={{ paddingBottom: (100 * infoHeight / infoWidth) + '%' }} />
- { showPlaceholder &&
+ { !this.props.mediaSrc && showPlaceholder &&
<div className="mx_MImageBody_thumbnail" style={{
// Constrain width here so that spinner appears central to the loaded thumbnail
maxWidth: infoWidth + "px",
@@ -418,7 +418,7 @@ export default class MImageBody extends React.Component {
</div>
}
- <div style={{display: !showPlaceholder ? undefined : 'none'}}>
+ <div style={{display: this.props.mediaSrc ? "block" : !showPlaceholder ? undefined : 'none'}}>
{ img }
{ gifLabel }
</div>
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 8356119d71..1f73d46e0a 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -254,6 +254,9 @@ interface IProps {
// Used while exporting to refer to the local source rather than the online one
mediaSrc?: string;
+ // Used while exporting to refer to the local avatar rather than the online one
+ avatarSrc?: string;
+
// show twelve hour timestamps
isTwelveHour?: boolean;
@@ -939,8 +942,11 @@ export default class EventTile extends React.Component<IProps, IState> {
}
avatar = (
<div className="mx_EventTile_avatar">
- <MemberAvatar member={member}
- width={avatarSize} height={avatarSize}
+ <MemberAvatar
+ avatarSrc = {this.props.avatarSrc}
+ member={member}
+ width={avatarSize}
+ height={avatarSize}
viewUserOnClick={true}
/>
</div>
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index f124359882..914b8867a9 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -2,7 +2,7 @@ import React from "react"
import streamSaver from "streamsaver";
import JSZip from "jszip";
import { decryptFile } from "../DecryptFile";
-import { mediaFromContent } from "../../customisations/Media";
+import { mediaFromContent, mediaFromMxc } from "../../customisations/Media";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { Exporter } from "./Exporter";
@@ -133,7 +133,23 @@ export default class HTMLExporter extends Exporter {
</html>`
}
- // will be used in the future
+ protected hasAvatar(event: MatrixEvent): boolean {
+ const member = event.sender;
+ if (member.getMxcAvatarUrl()) return true;
+ return false;
+ }
+
+ protected async saveAvatarIfNeeded(event: MatrixEvent) {
+ const member = event.sender;
+ const avatarUrl = mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(30, 30, "crop");
+ if (!this.avatars.has(member.userId)) {
+ this.avatars.set(member.userId, true);
+ const image = await fetch(avatarUrl);
+ const blob = await image.blob();
+ this.zip.file(`users/${member.userId}`, blob);
+ }
+ }
+
protected async getMediaBlob(event: MatrixEvent) {
let blob: Blob;
try {
@@ -165,6 +181,9 @@ export default class HTMLExporter extends Exporter {
protected getEventTile(mxEv: MatrixEvent, continuation: boolean, mediaSrc?: string) {
+ const hasAvatar = this.hasAvatar(mxEv);
+ if (hasAvatar) this.saveAvatarIfNeeded(mxEv);
+
return <li id={mxEv.getId()}>
<EventTile
mxEvent={mxEv}
@@ -179,6 +198,7 @@ export default class HTMLExporter extends Exporter {
isTwelveHour={false}
last={false}
mediaSrc={mediaSrc}
+ avatarSrc={hasAvatar ? `users/${mxEv.sender.userId}` : null}
lastInSection={false}
permalinkCreator={this.permalinkCreator}
lastSuccessful={false}
From 01284ef8c6a91127ab535af8a37f792ae760c825 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 31 May 2021 23:33:20 +0530
Subject: [PATCH 028/176] Handle encrypted voice messages
---
src/utils/exportUtils/HtmlExport.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 914b8867a9..a69fab9f06 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -155,7 +155,7 @@ export default class HTMLExporter extends Exporter {
try {
const isEncrypted = event.isEncrypted();
const content = event.getContent();
- if (isEncrypted) {
+ if (isEncrypted && !content.hasOwnProperty("org.matrix.msc1767.file")) {
blob = await decryptFile(content.file);
} else {
const media = mediaFromContent(event.getContent());
From a0a604618c6b399e193f1c42065516ed7d4f2f7c Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 31 May 2021 23:50:55 +0530
Subject: [PATCH 029/176] Handle non-media attachments
---
src/components/views/messages/MFileBody.js | 10 +++++++++-
src/components/views/rooms/EventTile.tsx | 2 +-
src/utils/exportUtils/HtmlExport.tsx | 8 ++++++++
3 files changed, 18 insertions(+), 2 deletions(-)
diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index 9dc1de7683..53d37d73da 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -102,6 +102,8 @@ export default class MFileBody extends React.Component {
tileShape: PropTypes.string,
/* whether or not to show the default placeholder for the file. Defaults to true. */
showGenericPlaceholder: PropTypes.bool,
+ /* to set source to local file path during export */
+ mediaSrc: PropTypes.string,
};
static defaultProps = {
@@ -178,7 +180,13 @@ export default class MFileBody extends React.Component {
);
}
- if (isEncrypted) {
+ if (this.props.mediaSrc) {
+ return <span className="mx_MFileBody">
+ <a href={this.props.mediaSrc}>
+ { placeholder }
+ </a>
+ </span>;
+ } else if (isEncrypted) {
if (this.state.decryptedBlob === null) {
// Need to decrypt the attachment
// Wait for the user to click on the link before downloading
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index be748d6b71..a7bfb40ad0 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -936,7 +936,7 @@ export default class EventTile extends React.Component<IProps, IState> {
avatar = (
<div className="mx_EventTile_avatar">
<MemberAvatar
- avatarSrc = {this.props.avatarSrc}
+ avatarSrc={this.props.avatarSrc}
member={member}
width={avatarSize}
height={avatarSize}
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index a69fab9f06..80ba643f81 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -236,6 +236,14 @@ export default class HTMLExporter extends Exporter {
this.zip.file(filePath, blob);
break;
}
+ case "m.file": {
+ const blob = await this.getMediaBlob(mxEv);
+ const fileName = mxEv.getContent().body;
+ const filePath = `files/${fileName}`;
+ eventTile = this.getEventTile(mxEv, joined, filePath);
+ this.zip.file(filePath, blob);
+ break;
+ }
default:
eventTile = this.getEventTile(mxEv, joined);
break;
From 80c0ad82fc2576a76efc411d150f8592938a3d5a Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 1 Jun 2021 12:40:03 +0530
Subject: [PATCH 030/176] Better file names
---
src/DateUtils.ts | 16 +++++
src/components/views/avatars/MemberAvatar.tsx | 13 ++--
src/i18n/strings/en_EN.json | 1 +
src/utils/exportUtils/HtmlExport.tsx | 67 ++++++++++++-------
4 files changed, 66 insertions(+), 31 deletions(-)
diff --git a/src/DateUtils.ts b/src/DateUtils.ts
index e4a1175d88..b567337e2c 100644
--- a/src/DateUtils.ts
+++ b/src/DateUtils.ts
@@ -136,3 +136,19 @@ export function wantsDateSeparator(prevEventDate: Date, nextEventDate: Date): bo
// Compare weekdays
return prevEventDate.getDay() !== nextEventDate.getDay();
}
+
+
+export function formatFullDateNoDayNoTime(date: Date) {
+ const dateTime = date.getFullYear() +
+ "-" +
+ pad(date.getMonth()) +
+ "-" +
+ pad(date.getDate()) +
+ _t(" at ") +
+ pad(date.getHours()) +
+ "." +
+ pad(date.getMinutes()) +
+ "." +
+ pad(date.getSeconds());
+ return dateTime;
+}
diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx
index 8550f13e2d..67d6ef38f0 100644
--- a/src/components/views/avatars/MemberAvatar.tsx
+++ b/src/components/views/avatars/MemberAvatar.tsx
@@ -16,14 +16,15 @@ limitations under the License.
*/
import React from 'react';
-import {RoomMember} from "matrix-js-sdk/src/models/room-member";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
import dis from "../../../dispatcher/dispatcher";
-import {Action} from "../../../dispatcher/actions";
+import { Action } from "../../../dispatcher/actions";
import BaseAvatar from "./BaseAvatar";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../../customisations/Media";
-import {ResizeMethod} from "../../../Avatar";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
+import { ResizeMethod } from "../../../Avatar";
+import { omit } from "lodash";
interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url"> {
member: RoomMember;
@@ -94,6 +95,8 @@ export default class MemberAvatar extends React.Component<IProps, IState> {
let {member, fallbackUserId, onClick, viewUserOnClick, ...otherProps} = this.props;
const userId = member ? member.userId : fallbackUserId;
+ otherProps = omit(otherProps, "avatarSrc");
+
if (viewUserOnClick) {
onClick = () => {
dis.dispatch({
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index df1037a863..682a31e0a3 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -103,6 +103,7 @@
"%(weekDayName)s, %(monthName)s %(day)s %(time)s": "%(weekDayName)s, %(monthName)s %(day)s %(time)s",
"%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s": "%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s",
"%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s %(time)s": "%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s %(time)s",
+ " at ": " at ",
"Who would you like to add to this community?": "Who would you like to add to this community?",
"Warning: any person you add to a community will be publicly visible to anyone who knows the community ID": "Warning: any person you add to a community will be publicly visible to anyone who knows the community ID",
"Invite new community members": "Invite new community members",
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 80ba643f81..eeb9f6a684 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -9,7 +9,7 @@ import { Exporter } from "./Exporter";
import { renderToStaticMarkup } from 'react-dom/server'
import { Layout } from "../../settings/Layout";
import { shouldFormContinuation } from "../../components/structures/MessagePanel";
-import { wantsDateSeparator } from "../../DateUtils";
+import { formatFullDateNoDayNoTime, wantsDateSeparator } from "../../DateUtils";
import { RoomPermalinkCreator } from "../permalinks/Permalinks";
import * as ponyfill from "web-streams-polyfill/ponyfill"
import * as Avatar from "../../Avatar";
@@ -18,6 +18,7 @@ import DateSeparator from "../../components/views/messages/DateSeparator";
import exportCSS from "./exportCSS";
import exportJS from "./exportJS";
import BaseAvatar from "../../components/views/avatars/BaseAvatar";
+import exportIcons from "./exportIcons";
export default class HTMLExporter extends Exporter {
protected zip: JSZip;
@@ -179,6 +180,37 @@ export default class HTMLExporter extends Exporter {
return wantsDateSeparator(prevEvent.getDate(), event.getDate());
}
+ protected splitFileName(file: string) {
+ const lastDot = file.lastIndexOf('.');
+ if (lastDot === -1) return [file, ""];
+ const fileName = file.slice(0, lastDot);
+ const ext = file.slice(lastDot + 1);
+ return [fileName, ext];
+ }
+
+ protected getFilePath(event: MatrixEvent) {
+ const mediaType = event.getContent().msgtype;
+ let fileDirectory: string;
+ switch (mediaType) {
+ case "m.image":
+ fileDirectory = "images";
+ break;
+ case "m.video":
+ fileDirectory = "videos";
+ break;
+ case "m.audio":
+ fileDirectory = "audio";
+ break;
+ default:
+ fileDirectory = "files";
+ break;
+ }
+ const fileDate = formatFullDateNoDayNoTime(new Date(event.getTs()));
+ const [fileName, fileExt] = this.splitFileName(event.getContent().body);
+ const filePath = fileDirectory + "/" + fileName + '-' + fileDate + '.' + fileExt;
+ return filePath;
+ }
+
protected getEventTile(mxEv: MatrixEvent, continuation: boolean, mediaSrc?: string) {
const hasAvatar = this.hasAvatar(mxEv);
@@ -215,31 +247,12 @@ export default class HTMLExporter extends Exporter {
protected async createMessageBody(mxEv: MatrixEvent, joined = false) {
let eventTile: JSX.Element;
switch (mxEv.getContent().msgtype) {
- case "m.image": {
- const blob = await this.getMediaBlob(mxEv);
- const filePath = `images/${mxEv.getId()}.${blob.type.replace("image/", "")}`;
- eventTile = this.getEventTile(mxEv, joined, filePath);
- this.zip.file(filePath, blob);
- break;
- }
- case "m.video": {
- const blob = await this.getMediaBlob(mxEv);
- const filePath = `videos/${mxEv.getId()}.${blob.type.replace("video/", "")}`;
- eventTile = this.getEventTile(mxEv, joined, filePath);
- this.zip.file(filePath, blob);
- break;
- }
+ case "m.image":
+ case "m.file":
+ case "m.video":
case "m.audio": {
const blob = await this.getMediaBlob(mxEv);
- const filePath = `audio/${mxEv.getId()}.${blob.type.replace("audio/", "")}`;
- eventTile = this.getEventTile(mxEv, joined, filePath);
- this.zip.file(filePath, blob);
- break;
- }
- case "m.file": {
- const blob = await this.getMediaBlob(mxEv);
- const fileName = mxEv.getContent().body;
- const filePath = `files/${fileName}`;
+ const filePath = this.getFilePath(mxEv);
eventTile = this.getEventTile(mxEv, joined, filePath);
this.zip.file(filePath, blob);
break;
@@ -273,8 +286,10 @@ export default class HTMLExporter extends Exporter {
this.zip.file("index.html", html);
this.zip.file("css/style.css", exportCSS);
this.zip.file("js/script.js", exportJS);
-
- const filename = `matrix-export-${new Date().toISOString()}.zip`;
+ for (const iconName in exportIcons) {
+ this.zip.file(`icons/${iconName}`, exportIcons[iconName]);
+ }
+ const filename = `matrix-export-${formatFullDateNoDayNoTime(new Date())}.zip`;
//Generate the zip file asynchronously
const blob = await this.zip.generateAsync({ type: "blob" });
From 395b6ba4b56a90124d898be36337bc324baa4f48 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 1 Jun 2021 12:44:05 +0530
Subject: [PATCH 031/176] Small refactor
---
src/DateUtils.ts | 25 +++++++++++++------------
1 file changed, 13 insertions(+), 12 deletions(-)
diff --git a/src/DateUtils.ts b/src/DateUtils.ts
index b567337e2c..6d390e9132 100644
--- a/src/DateUtils.ts
+++ b/src/DateUtils.ts
@@ -139,16 +139,17 @@ export function wantsDateSeparator(prevEventDate: Date, nextEventDate: Date): bo
export function formatFullDateNoDayNoTime(date: Date) {
- const dateTime = date.getFullYear() +
- "-" +
- pad(date.getMonth()) +
- "-" +
- pad(date.getDate()) +
- _t(" at ") +
- pad(date.getHours()) +
- "." +
- pad(date.getMinutes()) +
- "." +
- pad(date.getSeconds());
- return dateTime;
+ return (
+ date.getFullYear() +
+ "-" +
+ pad(date.getMonth()) +
+ "-" +
+ pad(date.getDate()) +
+ _t(" at ") +
+ pad(date.getHours()) +
+ "." +
+ pad(date.getMinutes()) +
+ "." +
+ pad(date.getSeconds())
+ );
}
From 5f9cf5760de362b20df89d184b7b6eb671db5bc3 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 1 Jun 2021 12:50:31 +0530
Subject: [PATCH 032/176] Fix untracked files
---
src/utils/exportUtils/exportCSS.ts | 2 +-
src/utils/exportUtils/exportIcons.ts | 15 +++++++++++++++
2 files changed, 16 insertions(+), 1 deletion(-)
create mode 100644 src/utils/exportUtils/exportIcons.ts
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index 5a63802097..dd645b4362 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -1,6 +1,6 @@
/* eslint-disable max-len */
const lightCSS = `
-@charset "utf-8";@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-Regular.4232a67.woff2) format("woff2"),url(../../fonts/Inter/Inter-Regular.3a1908c.woff) format("woff")}@font-face{font-family:Inter;font-style:italic;font-weight:400;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-Italic.b791861.woff2) format("woff2"),url(../../fonts/Inter/Inter-Italic.b13e6fe.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-Medium.027d14e.woff2) format("woff2"),url(../../fonts/Inter/Inter-Medium.d1f6b6e.woff) format("woff")}@font-face{font-family:Inter;font-style:italic;font-weight:500;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-MediumItalic.8154ac2.woff2) format("woff2"),url(../../fonts/Inter/Inter-MediumItalic.1912849.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-SemiBold.0802d48.woff2) format("woff2"),url(../../fonts/Inter/Inter-SemiBold.8357f92.woff) format("woff")}@font-face{font-family:Inter;font-style:italic;font-weight:600;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-SemiBoldItalic.10a60d8.woff2) format("woff2"),url(../../fonts/Inter/Inter-SemiBoldItalic.1c70752.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-Bold.fc28dff.woff2) format("woff2"),url(../../fonts/Inter/Inter-Bold.025b6f2.woff) format("woff")}@font-face{font-family:Inter;font-style:italic;font-weight:700;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-BoldItalic.2129bd0.woff2) format("woff2"),url(../../fonts/Inter/Inter-BoldItalic.80f8542.woff) format("woff")}@font-face{font-family:Inconsolata;font-style:normal;font-weight:400;src:local("Inconsolata Regular"),local("Inconsolata-Regular"),url(../../fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlX5qhExfHwNJU.2aafaa1.woff2) format("woff2");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Inconsolata;font-style:normal;font-weight:400;font-display:swap;src:local("Inconsolata Regular"),local("Inconsolata-Regular"),url(../../fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlZ5qhExfHw.5476fd3.woff2) format("woff2");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:Inconsolata;font-style:normal;font-weight:700;font-display:swap;src:local("Inconsolata Bold"),local("Inconsolata-Bold"),url(../../fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71n5_zaDpwm80E.6bc411a.woff2) format("woff2");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Inconsolata;font-style:normal;font-weight:700;font-display:swap;src:local("Inconsolata Bold"),local("Inconsolata-Bold"),url(../../fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71p5_zaDpwm.000abc6.woff2) format("woff2");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}.hljs-addition{background:#dfd}.hljs-deletion{background:#fdd}@supports ((-webkit-backdrop-filter:none) or (backdrop-filter:none)){.mx_LeftPanel{background-image:unset;background-image:var(--avatar-url,unset);background-repeat:no-repeat;background-size:cover;background-position:0 0}.mx_GroupFilterPanel,.mx_SpacePanel{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.mx_LeftPanel .mx_LeftPanel_roomListContainer{-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px)}}.mx_RoomSublist_showNButton{background-color:transparent!important}a:hover,a:link,a:visited{text-decoration:none}:root{font-size:10px;--transition-short:.1s;--transition-standard:.3s}@media (prefers-reduced-motion){:root{--transition-short:0;--transition-standard:0}}html{height:100%;overflow:hidden}body{font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.5rem;background-color:#fff;color:#2e2f32;border:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code,pre{font-family:Inconsolata,Twemoji,Apple Color Emoji,Segoe UI Emoji,Courier,monospace,Noto Color Emoji;font-size:100%!important}.error,.text-error,.text-warning,.warning{color:#ff4b55}.text-success{color:#0dbd8b}.text-muted{color:#61708b}b{font-weight:700}h2{color:#2e2f32;font-weight:400;font-size:1.8rem;margin-top:16px;margin-bottom:16px}a:hover,a:link,a:visited{color:#238cf5}input[type=password],input[type=search],input[type=text]{padding:9px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;font-weight:600;min-width:0}input[type=search].mx_textinput_icon,input[type=text].mx_textinput_icon{padding-left:36px;background-repeat:no-repeat;background-position:10px}input[type=search].mx_textinput_icon.mx_textinput_search,input[type=text].mx_textinput_icon.mx_textinput_search{background-image:url(../../img/feather-customised/search-input.044bfa7.svg)}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{opacity:1}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1}input::-ms-input-placeholder,textarea::-ms-input-placeholder{opacity:1}input::placeholder,textarea::placeholder{opacity:1}input[type=password],input[type=text],textarea{background-color:transparent;color:#2e2f32}textarea{font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;color:#2e2f32}input[type=password]:focus,input[type=text]:focus,textarea:focus{outline:none;-webkit-box-shadow:none;box-shadow:none}:focus:not(.focus-visible){outline:none}.mx_Dialog .mx_textinput>input[type=search],.mx_Dialog .mx_textinput>input[type=text],.mx_MatrixChat .mx_textinput>input[type=search],.mx_MatrixChat .mx_textinput>input[type=text]{border:none;-webkit-box-flex:1;-ms-flex:1;flex:1;color:#2e2f32}.mx_Dialog .mx_textinput,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search],.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text],.mx_MatrixChat .mx_textinput,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search],.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]{display:block;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:transparent;color:#9fa9ba;border-radius:4px;border:1px solid rgba(46,47,50,.1);margin:9px}.mx_Dialog .mx_textinput,.mx_MatrixChat .mx_textinput{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_Dialog .mx_textinput input::-webkit-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-webkit-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-webkit-input-placeholder,.mx_MatrixChat .mx_textinput input::-webkit-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-webkit-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-webkit-input-placeholder{color:rgba(159,169,186,.75)}.mx_Dialog .mx_textinput input::-moz-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-moz-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-moz-placeholder,.mx_MatrixChat .mx_textinput input::-moz-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-moz-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-moz-placeholder{color:rgba(159,169,186,.75)}.mx_Dialog .mx_textinput input:-ms-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]:-ms-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]:-ms-input-placeholder,.mx_MatrixChat .mx_textinput input:-ms-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]:-ms-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]:-ms-input-placeholder{color:rgba(159,169,186,.75)}.mx_Dialog .mx_textinput input::-ms-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-ms-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-ms-input-placeholder,.mx_MatrixChat .mx_textinput input::-ms-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-ms-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-ms-input-placeholder{color:rgba(159,169,186,.75)}.mx_Dialog .mx_textinput input::placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::placeholder,.mx_MatrixChat .mx_textinput input::placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::placeholder{color:rgba(159,169,186,.75)}.dark-panel{background-color:#f2f5f8}.dark-panel .mx_textinput,.dark-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search],.dark-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]{color:#9fa9ba;background-color:#fff;border:none}.light-panel .mx_textinput,.light-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search],.light-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]{color:#9fa9ba;background-color:#f2f5f8;border:none}::-moz-focus-inner{border:0}#mx_theme_accentColor{color:#0dbd8b}#mx_theme_secondaryAccentColor{color:#f2f5f8}#mx_theme_tertiaryAccentColor{color:#d3efe1}.mx_Dialog_wrapper{position:fixed;z-index:4000;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_Dialog{background-color:#fff;color:#747474;z-index:4012;font-weight:300;font-size:1.5rem;position:relative;padding:24px;max-height:80%;-webkit-box-shadow:2px 15px 30px 0 rgba(0,0,0,.48);box-shadow:2px 15px 30px 0 rgba(0,0,0,.48);border-radius:8px;overflow-y:auto}.mx_Dialog_fixedWidth{width:60vw;max-width:704px}.mx_Dialog_staticWrapper .mx_Dialog{z-index:4010}.mx_Dialog_background{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(46,48,51,.38);opacity:.8;z-index:4011}.mx_Dialog_background.mx_Dialog_staticBackground{z-index:4009}.mx_Dialog_wrapperWithStaticUnder .mx_Dialog_background{opacity:.4}.mx_Dialog_lightbox .mx_Dialog_background{opacity:.95;background-color:#000}.mx_Dialog_lightbox .mx_Dialog{border-radius:0;background-color:transparent;width:100%;height:100%;max-width:100%;max-height:100%;pointer-events:none;padding:0}.mx_Dialog_header{position:relative;margin-bottom:10px}.mx_Dialog_titleImage{vertical-align:sub;width:25px;height:25px;margin-left:-2px;margin-right:4px}.mx_Dialog_title{font-size:2.2rem;font-weight:600;line-height:3.6rem;color:#45474a}.mx_Dialog_header.mx_Dialog_headerWithButton>.mx_Dialog_title{text-align:center}.mx_Dialog_header.mx_Dialog_headerWithCancel>.mx_Dialog_title{margin-right:20px}.mx_Dialog_title.danger{color:#ff4b55}.mx_Dialog_cancelButton{-webkit-mask:url(../../img/feather-customised/cancel.23c2689.svg);mask:url(../../img/feather-customised/cancel.23c2689.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;width:14px;height:14px;background-color:#c1c1c1;cursor:pointer;position:absolute;top:10px;right:0}.mx_Dialog_content{margin:24px 0 68px;font-size:1.4rem;color:#2e2f32;word-wrap:break-word}.mx_Dialog_buttons{margin-top:20px;text-align:right}.mx_Dialog_buttons .mx_Dialog_buttons_additive{float:left}.mx_Dialog_buttons button,.mx_Dialog_buttons input[type=submit],.mx_Dialog button,.mx_Dialog input[type=submit]{vertical-align:middle;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;padding:7px 1.5em;cursor:pointer;display:inline-block;outline:none;margin-left:0;margin-right:8px;font-weight:600;border:1px solid #0dbd8b;color:#0dbd8b;background-color:#fff;font-family:inherit}.mx_Dialog button:last-child{margin-right:0}.mx_Dialog_buttons button:focus,.mx_Dialog_buttons input[type=submit]:focus,.mx_Dialog button:focus,.mx_Dialog input[type=submit]:focus{-webkit-filter:brightness(105%);filter:brightness(105%)}.mx_Dialog_buttons button.mx_Dialog_primary,.mx_Dialog_buttons input[type=submit].mx_Dialog_primary,.mx_Dialog button.mx_Dialog_primary,.mx_Dialog input[type=submit].mx_Dialog_primary{color:#fff;background-color:#0dbd8b;min-width:156px}.mx_Dialog_buttons button.danger,.mx_Dialog_buttons input[type=submit].danger,.mx_Dialog button.danger,.mx_Dialog input[type=submit].danger{background-color:#ff4b55;border:1px solid #ff4b55;color:#fff}.mx_Dialog button.warning,.mx_Dialog input[type=submit].warning{border:1px solid #ff4b55;color:#ff4b55}.mx_Dialog_buttons button:disabled,.mx_Dialog_buttons input[type=submit]:disabled,.mx_Dialog button:disabled,.mx_Dialog input[type=submit]:disabled{background-color:#747474;border:1px solid #747474;opacity:.7}.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog{width:auto;border-radius:8px;padding:0;-webkit-box-shadow:none;box-shadow:none;overflow-x:hidden;overflow-y:hidden}.mx_GeneralButton{vertical-align:middle;border:0;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;padding:7px 1.5em;cursor:pointer;display:inline-block;outline:none;display:inline;margin:auto}.mx_linkButton{cursor:pointer;color:#0dbd8b}.mx_TextInputDialog_label{text-align:left;padding-bottom:12px}.mx_TextInputDialog_input{font-size:1.5rem;border-radius:3px;border:1px solid #e7e7e7;padding:9px;color:#2e2f32;background-color:#fff}.mx_textButton{vertical-align:middle;border:0;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;cursor:pointer;display:inline-block;outline:none;font-size:1.5rem;padding:0 1.5em}.mx_button_row{margin-top:69px}.mx_Username_color1{color:#368bd6}.mx_Username_color2{color:#ac3ba8}.mx_Username_color3{color:#0dbd8b}.mx_Username_color4{color:#e64f7a}.mx_Username_color5{color:#ff812d}.mx_Username_color6{color:#2dc2c5}.mx_Username_color7{color:#5c56f5}.mx_Username_color8{color:#74d12c}.mx_Tooltip_dark .mx_Tooltip_chevron:after{border-right-color:#27303a}html{scrollbar-color:rgba(0,0,0,.2) transparent}*{scrollbar-width:thin}::-webkit-scrollbar{width:6px;height:6px;background-color:transparent}::-webkit-scrollbar-thumb{border-radius:3px;background-color:rgba(0,0,0,.2)}.mx_AutoHideScrollbar:hover{scrollbar-color:rgba(0,0,0,.2) transparent}.mx_AutoHideScrollbar:hover::-webkit-scrollbar{background-color:transparent}.mx_AutoHideScrollbar:hover::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.2)}.mx_AutoHideScrollbar{overflow-x:hidden;overflow-y:auto;overflow-y:overlay;-ms-overflow-style:-ms-autohiding-scrollbar}.mx_AutoHideScrollbar::-webkit-scrollbar,.mx_AutoHideScrollbar::-webkit-scrollbar-thumb{background-color:transparent}.mx_AutoHideScrollbar{scrollbar-color:transparent transparent}.mx_CompatibilityPage{width:100%;height:100%;background-color:#e55}.mx_CompatibilityPage_box{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:500px;height:300px;border:1px solid;padding:10px;background-color:#fcc}.mx_ContextualMenu_wrapper{position:fixed;z-index:5000}.mx_ContextualMenu_background{position:fixed;top:0;left:0;width:100%;height:100%;opacity:1;z-index:5000}.mx_ContextualMenu{border-radius:8px;-webkit-box-shadow:4px 4px 12px 0 rgba(118,131,156,.6);box-shadow:4px 4px 12px 0 rgba(118,131,156,.6);background-color:#fff;color:#2e2f32;position:absolute;font-size:1.4rem;z-index:5001}.mx_ContextualMenu_right{right:0}.mx_ContextualMenu.mx_ContextualMenu_withChevron_right{right:8px}.mx_ContextualMenu_chevron_right{position:absolute;right:-8px;top:0;width:0;height:0;border-top:8px solid transparent;border-left:8px solid #fff;border-bottom:8px solid transparent}.mx_ContextualMenu_left{left:0}.mx_ContextualMenu.mx_ContextualMenu_withChevron_left{left:8px}.mx_ContextualMenu_chevron_left{position:absolute;left:-8px;top:0;width:0;height:0;border-top:8px solid transparent;border-right:8px solid #fff;border-bottom:8px solid transparent}.mx_ContextualMenu_top{top:0}.mx_ContextualMenu.mx_ContextualMenu_withChevron_top{top:8px}.mx_ContextualMenu_chevron_top{position:absolute;left:0;top:-8px;width:0;height:0;border-left:8px solid transparent;border-bottom:8px solid #fff;border-right:8px solid transparent}.mx_ContextualMenu_bottom{bottom:0}.mx_ContextualMenu.mx_ContextualMenu_withChevron_bottom{bottom:8px}.mx_ContextualMenu_chevron_bottom{position:absolute;left:0;bottom:-8px;width:0;height:0;border-left:8px solid transparent;border-top:8px solid #fff;border-right:8px solid transparent}.mx_ContextualMenu_spinner{display:block;margin:0 auto}.mx_CreateRoom{width:960px;margin-left:auto;margin-right:auto;color:#2e2f32}.mx_CreateRoom input,.mx_CreateRoom textarea{border-radius:3px;border:1px solid #c7c7c7;font-weight:300;font-size:1.3rem;padding:9px;margin-top:6px}.mx_CreateRoom_description{width:330px}.mx_CustomRoomTagPanel{background-color:hsla(0,0%,91%,.77);max-height:40vh}.mx_CustomRoomTagPanel_scroller{max-height:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CustomRoomTagPanel .mx_AccessibleButton{margin:0 auto;width:40px;padding:10px 0 9px;position:relative}.mx_CustomRoomTagPanel .mx_BaseAvatar_image{-webkit-box-sizing:border-box;box-sizing:border-box;width:40px;height:40px}.mx_CustomRoomTagPanel .mx_AccessibleButton.CustomRoomTagPanel_tileSelected:before{content:"";height:56px;background-color:#238cf5;width:5px;position:absolute;left:-9px;border-radius:0 3px 3px 0;top:5px}.mx_FilePanel{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow-y:auto;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_FilePanel .mx_RoomView_messageListWrapper{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_FilePanel .mx_RoomView_MessageList{width:100%}.mx_FilePanel .mx_EventTile_avatar,.mx_FilePanel .mx_RoomView_MessageList h2{display:none}.mx_FilePanel .mx_EventTile{word-break:break-word;margin-top:32px}.mx_FilePanel .mx_EventTile .mx_MImageBody{margin-right:0}.mx_FilePanel .mx_EventTile .mx_MFileBody{line-height:2.4rem}.mx_FilePanel .mx_EventTile .mx_MFileBody_download{padding-top:8px;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.4rem;color:#acacac}.mx_FilePanel .mx_EventTile .mx_MFileBody_downloadLink{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;color:#747474}.mx_FilePanel .mx_EventTile .mx_MImageBody_size{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;font-size:1.4rem;text-align:right;white-space:nowrap}.mx_FilePanel .mx_EventTile_senderDetails{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:-2px}.mx_FilePanel .mx_EventTile_senderDetailsLink{text-decoration:none}.mx_FilePanel .mx_EventTile .mx_SenderProfile{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;line-height:normal;padding:0;font-size:1.4rem;opacity:1;color:#acacac}.mx_FilePanel .mx_EventTile .mx_MessageTimestamp{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;text-align:right;visibility:visible;position:static;font-size:1.4rem;opacity:1;color:#acacac}.mx_FilePanel .mx_EventTile_line{margin-right:0;padding-left:0}.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line{padding-left:0}.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line{background-color:#fff}.mx_FilePanel_empty:before{-webkit-mask-image:url(../../img/element-icons/room/files.5709c0c.svg);mask-image:url(../../img/element-icons/room/files.5709c0c.svg)}.mx_GenericErrorPage{width:100%;height:100%;background-color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_GenericErrorPage_box{display:inline;width:500px;min-height:125px;border:1px solid #f22;padding:10px 10px 20px;background-color:#fcc}.mx_GroupFilterPanel{-webkit-box-flex:1;-ms-flex:1;flex:1;background-color:hsla(0,0%,91%,.77);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;min-height:0}.mx_GroupFilterPanel_items_selected{cursor:pointer}.mx_GroupFilterPanel .mx_GroupFilterPanel_divider{height:0;width:90%;border:none;border-bottom:1px solid #8d99a5}.mx_GroupFilterPanel .mx_GroupFilterPanel_scroller{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;width:100%}.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-top:6px}.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer>div{margin:6px 0}.mx_GroupFilterPanel .mx_TagTile{position:relative}.mx_GroupFilterPanel .mx_TagTile .mx_BetaDot{position:absolute;right:-13px;top:-11px}.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_prototype{padding:3px}.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected_prototype{background-color:#fff;border-radius:6px}.mx_TagTile_selected_prototype .mx_TagTile_homeIcon:before{background-color:#2e2f32}.mx_TagTile:not(.mx_TagTile_selected_prototype) .mx_TagTile_homeIcon{background-color:rgba(92,100,112,.2);border-radius:48px}.mx_TagTile:not(.mx_TagTile_selected_prototype) .mx_TagTile_homeIcon:before{background-color:#5c6470}.mx_TagTile_homeIcon{width:32px;height:32px;position:relative}.mx_TagTile_homeIcon:before{-webkit-mask-image:url(../../img/element-icons/home.b706c0e.svg);mask-image:url(../../img/element-icons/home.b706c0e.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:21px;mask-size:21px;content:"";display:inline-block;width:32px;height:32px;position:absolute;top:calc(50% - 16px);left:calc(50% - 16px)}.mx_GroupFilterPanel .mx_TagTile_plus{margin-bottom:12px;height:32px;width:32px;border-radius:20px;background-color:rgba(92,100,112,.2);position:relative;display:block!important}.mx_GroupFilterPanel .mx_TagTile_plus:before{background-color:#5c6470;-webkit-mask-image:url(../../img/feather-customised/plus.38ae979.svg);mask-image:url(../../img/feather-customised/plus.38ae979.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;content:"";position:absolute;top:0;bottom:0;left:0;right:0}.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected:before{content:"";height:100%;background-color:#0dbd8b;width:4px;position:absolute;left:-12px;border-radius:0 3px 3px 0}.mx_GroupFilterPanel .mx_TagTile.mx_AccessibleButton:focus{-webkit-filter:none;filter:none}.mx_TagTile_tooltip{position:relative;top:-30px;left:5px}.mx_TagTile_context_button{min-width:15px;height:15px;position:absolute;right:-5px;top:-8px;border-radius:8px;background-color:#dbdbdb;color:#000;font-weight:600;font-size:1rem;text-align:center;padding-top:1px;padding-left:4px;padding-right:4px}.mx_TagTile_avatar{position:relative}.mx_TagTile_badge{position:absolute;right:-4px;top:-2px;border-radius:8px;color:#fff;font-weight:600;font-size:1.4rem;padding:0 5px;background-color:#61708b}.mx_TagTile_badgeHighlight{background-color:#ff4b55}.mx_GroupView{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden}.mx_GroupView_error{margin:auto}.mx_GroupView_header{min-height:52px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;padding-bottom:10px;padding-left:19px}.mx_GroupView_header_view{border-bottom:1px solid transparent;padding-bottom:0;padding-right:8px}.mx_GroupView_header_avatar,.mx_GroupView_header_info{display:table-cell;vertical-align:middle}.mx_GroupHeader_button{position:relative;margin-left:5px;margin-right:5px;cursor:pointer;height:20px;width:20px}.mx_GroupHeader_button:before{content:"";position:absolute;height:20px;width:20px;background-color:#91a1c0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_GroupHeader_editButton:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_GroupHeader_shareButton:before{-webkit-mask-image:url(../../img/element-icons/room/share.54dc3fb.svg);mask-image:url(../../img/element-icons/room/share.54dc3fb.svg)}.mx_GroupView_hostingSignup img{margin-left:5px}.mx_GroupView_editable{border-bottom:1px solid #c7c7c7!important;min-width:150px;cursor:text}.mx_GroupView_editable:focus{border-bottom:1px solid #0dbd8b!important;outline:none;-webkit-box-shadow:none;box-shadow:none}.mx_GroupView_header_isUserMember .mx_GroupView_header_name:hover div:not(.mx_GroupView_editable){color:#0dbd8b;cursor:pointer}.mx_GroupView_avatarPicker{position:relative}.mx_GroupView_avatarPicker_edit{position:absolute;top:50px;left:15px}.mx_GroupView_avatarPicker .mx_Spinner{width:48px;height:48px!important}.mx_GroupView_header_leftCol{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden}.mx_GroupView_header_rightCol{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_GroupView_textButton{display:inline-block}.mx_GroupView_header_groupid{font-weight:400;font-size:medium;padding-left:10px}.mx_GroupView_header_name{vertical-align:middle;width:100%;height:31px;color:#2e2f32;font-weight:700;font-size:2.2rem;padding-right:16px}.mx_GroupView_header_name,.mx_GroupView_header_shortDesc{overflow:hidden;padding-left:19px;text-overflow:ellipsis;border-bottom:1px solid transparent}.mx_GroupView_header_shortDesc{vertical-align:bottom;float:left;max-height:42px;color:#a2a2a2;font-weight:300;font-size:1.3rem;margin-right:16px}.mx_GroupView_avatarPicker_label{cursor:pointer}.mx_GroupView_cancelButton{padding-left:8px}.mx_GroupView_cancelButton img{position:relative;top:5px}.mx_GroupView input[type=radio]{margin:10px 10px 0}.mx_GroupView_label_text{display:inline-block;max-width:80%;vertical-align:.1em;line-height:2em}.mx_GroupView_body{margin:0 24px}.mx_GroupView_body,.mx_GroupView_rooms{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_GroupView_rooms{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_GroupView h3{text-transform:uppercase;color:#3d3b39;font-weight:600;font-size:1.3rem;margin-bottom:10px}.mx_GroupView_rooms_header .mx_AccessibleButton{padding-left:14px;margin-bottom:14px;height:24px}.mx_GroupView_group{border-top:1px solid transparent}.mx_GroupView_group_disabled{opacity:.3;pointer-events:none}.mx_GroupView_rooms_header_addRow_button{display:inline-block}.mx_GroupView_rooms_header_addRow_button object{pointer-events:none}.mx_GroupView_rooms_header_addRow_label{display:inline-block;vertical-align:top;line-height:2.4rem;padding-left:28px;color:#0dbd8b}.mx_GroupView_rooms .mx_RoomDetailList{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;border-top:1px solid transparent;padding-top:10px;word-break:break-word}.mx_GroupView .mx_RoomView_messageListWrapper{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_GroupView_membershipSection{color:#888;margin-top:10px}.mx_GroupView_membershipSubSection{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;display:-webkit-box;display:-ms-flexbox;display:flex;padding-bottom:8px}.mx_GroupView_membershipSubSection .mx_Spinner{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_GroupView_membershipSection_description{line-height:3.4rem}.mx_GroupView_membershipSection_description .mx_BaseAvatar{margin-right:10px}.mx_GroupView_membershipSection .mx_GroupView_textButton{margin-right:0;margin-top:0;margin-left:8px}.mx_GroupView_memberSettings_toggle label{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_GroupView_memberSettings input{margin-right:6px}.mx_GroupView_featuredThings{margin-top:20px}.mx_GroupView_featuredThings_header{font-weight:700;font-size:120%;margin-bottom:20px}.mx_GroupView_featuredThings_category{font-weight:700;font-size:110%;margin-top:10px}.mx_GroupView_featuredThings_container{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_GroupView_featuredThing,.mx_GroupView_featuredThings_addButton{display:table-cell;text-align:center;width:100px;margin:0 20px}.mx_GroupView_featuredThing{position:relative}.mx_GroupView_featuredThing .mx_GroupView_featuredThing_deleteButton{position:absolute;top:-7px;right:11px;opacity:.4}.mx_GroupView_featuredThing .mx_BaseAvatar{vertical-align:baseline;vertical-align:initial}.mx_GroupView_featuredThings_addButton object{pointer-events:none}.mx_GroupView_featuredThing_name{word-wrap:break-word}.mx_GroupView_uploadInput{display:none}.mx_GroupView_body .mx_AutoHideScrollbar>*{margin:11px 50px 50px 68px}.mx_GroupView_groupDesc textarea{width:100%;max-width:100%;height:150px}.mx_GroupView_changeDelayWarning,.mx_GroupView_groupDesc_placeholder{background-color:#f7f7f7;color:#888;border-radius:10px;text-align:center;margin:20px 0}.mx_GroupView_groupDesc_placeholder{padding:100px 20px;cursor:pointer}.mx_GroupView_changeDelayWarning{padding:40px 20px}.mx_GroupView .mx_MemberInfo .mx_AutoHideScrollbar>:not(.mx_MemberInfo_avatar){padding-left:16px;padding-right:16px}.mx_HeaderButtons{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomHeader_buttons+.mx_HeaderButtons:before{content:unset}.mx_HeaderButtons:before{content:"";background-color:#91a1c0;opacity:.5;margin:6px 8px;border-radius:1px;width:1px}.mx_HomePage{max-width:960px;width:100%;height:100%;margin-left:auto;margin-right:auto}.mx_HomePage_default{text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_HomePage_default .mx_HomePage_default_wrapper{margin:auto}.mx_HomePage_default img{height:48px}.mx_HomePage_default h1{font-weight:600;font-size:3.2rem;line-height:4.4rem;margin-bottom:4px}.mx_HomePage_default h4{margin-top:4px;font-weight:600;font-size:1.8rem;line-height:2.5rem;color:#61708b}.mx_HomePage_default .mx_MiniAvatarUploader{margin:0 auto}.mx_HomePage_default .mx_HomePage_default_buttons{margin:60px auto 0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton{padding:73px 8px 15px;width:160px;height:132px;margin:20px;position:relative;display:inline-block;border-radius:8px;vertical-align:top;word-break:break-word;-webkit-box-sizing:border-box;box-sizing:border-box;font-weight:600;font-size:1.5rem;line-height:2rem;color:#fff;background-color:#0dbd8b}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton:before{top:20px;left:60px;width:40px;height:40px;content:"";position:absolute;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_sendDm:before{-webkit-mask-image:url(../../img/element-icons/feedback.a91241e.svg);mask-image:url(../../img/element-icons/feedback.a91241e.svg)}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_explore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg)}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_createGroup:before{-webkit-mask-image:url(../../img/element-icons/community-members.cbb31c1.svg);mask-image:url(../../img/element-icons/community-members.cbb31c1.svg)}.mx_LeftPanel{background-color:hsla(0,0%,96.1%,.9);min-width:206px;max-width:50%;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_LeftPanel .mx_LeftPanel_GroupFilterPanelContainer{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;-ms-flex-preferred-size:56px;flex-basis:56px;height:100%;-ms-flex-direction:column;flex-direction:column}.mx_LeftPanel .mx_LeftPanel_GroupFilterPanelContainer,.mx_LeftPanel .mx_LeftPanel_roomListContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal}.mx_LeftPanel .mx_LeftPanel_roomListContainer{background-color:hsla(0,0%,96.1%,.9);-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;min-width:0;-ms-flex-direction:column;flex-direction:column}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_userHeader{padding:12px;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer{overflow-y:hidden;overflow-x:scroll;margin:12px 12px 0;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_leftOverflow{-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(5%,#000));-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%);mask-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(5%,#000));mask-image:linear-gradient(90deg,transparent,#000 5%)}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_rightOverflow{-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(#000),color-stop(95%,#000),to(transparent));-webkit-mask-image:linear-gradient(90deg,#000,#000 95%,transparent);mask-image:-webkit-gradient(linear,left top,right top,from(#000),color-stop(95%,#000),to(transparent));mask-image:linear-gradient(90deg,#000,#000 95%,transparent)}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow{-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(5%,#000),color-stop(95%,#000),to(transparent));-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(5%,#000),color-stop(95%,#000),to(transparent));mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer{margin-left:12px;margin-right:12px;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch_focused+.mx_LeftPanel_exploreButton,.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch_hasQuery+.mx_LeftPanel_exploreButton{-ms-flex-preferred-size:0;flex-basis:0;margin:0;width:0}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch_focused+.mx_LeftPanel_exploreButton:before,.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch_hasQuery+.mx_LeftPanel_exploreButton:before{content:none}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton{width:32px;height:32px;border-radius:8px;background-color:rgba(141,151,165,.2);position:relative;margin-left:8px}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton:before{content:"";position:absolute;top:8px;left:8px;width:16px;height:16px;-webkit-mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#737d8c}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton.mx_LeftPanel_exploreButton_space:before{-webkit-mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg);mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg)}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListFilterCount{font-size:1.3rem;font-weight:600;margin-left:12px;margin-top:14px;margin-bottom:-4px}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper{overflow:hidden;margin-top:10px;-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper.mx_LeftPanel_roomListWrapper_stickyBottom{padding-bottom:32px}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper.mx_LeftPanel_roomListWrapper_stickyTop{padding-top:32px}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_actualRoomListContainer{position:relative;height:100%}.mx_LeftPanel.mx_LeftPanel_minimized{min-width:unset;width:unset!important}.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer{width:68px}.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer .mx_LeftPanel_userHeader{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton{margin-left:0;margin-top:8px;background-color:transparent}.mx_LeftPanelWidget{margin-left:8px;margin-bottom:4px}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:24px;color:#8d99a5;margin-top:4px}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_stickable{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_headerText{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:calc(100% - 16px);line-height:1.6rem;font-size:1.3rem;font-weight:600;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_headerText .mx_LeftPanelWidget_collapseBtn{display:inline-block;position:relative;width:14px;height:14px;margin-right:6px}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_headerText .mx_LeftPanelWidget_collapseBtn:before{content:"";width:18px;height:18px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#8d99a5;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_headerText .mx_LeftPanelWidget_collapseBtn.mx_LeftPanelWidget_collapseBtn_collapsed:before{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.mx_LeftPanelWidget .mx_LeftPanelWidget_resizeBox{position:relative;-ms-flex-direction:column;flex-direction:column;overflow:visible}.mx_LeftPanelWidget .mx_AppTileFullWidth,.mx_LeftPanelWidget .mx_LeftPanelWidget_resizeBox{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal}.mx_LeftPanelWidget .mx_AppTileFullWidth{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;overflow:hidden;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-mask-image:linear-gradient(0deg,transparent,#000 4px);mask-image:linear-gradient(0deg,transparent,#000 4px)}.mx_LeftPanelWidget .mx_LeftPanelWidget_resizerHandle{cursor:ns-resize;border-radius:3px;width:unset!important;height:4px!important;position:absolute;top:-24px!important;left:calc(50% - 32px)!important;right:calc(50% - 32px)!important}.mx_LeftPanelWidget:hover .mx_LeftPanelWidget_resizerHandle{opacity:.8;background-color:#2e2f32}.mx_LeftPanelWidget .mx_LeftPanelWidget_maximizeButton{margin-left:8px;margin-right:7px;position:relative;width:24px;height:24px;border-radius:32px}.mx_LeftPanelWidget .mx_LeftPanelWidget_maximizeButton:before{content:"";width:16px;height:16px;position:absolute;top:4px;left:4px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/feather-customised/maximise.dc32127.svg);mask-image:url(../../img/feather-customised/maximise.dc32127.svg);background:#61708b}.mx_LeftPanelWidget_maximizeButtonTooltip{margin-top:-3px}.mx_MainSplit{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;min-width:0;min-height:0;height:100%}.mx_MainSplit>.mx_RightPanel_ResizeWrapper{padding:5px;margin-left:8px;height:calc(100vh - 51px)}.mx_MainSplit>.mx_RightPanel_ResizeWrapper:hover .mx_RightPanel_ResizeHandle{top:50%!important;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:64px!important;width:4px!important;border-radius:4px!important;background-color:#2e2f32;opacity:.8}.mx_MatrixChat_splash{position:relative;height:100%}.mx_MatrixChat_splashButtons{text-align:center;width:100%;position:absolute;bottom:30px}.mx_MatrixChat_wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%}.mx_MatrixToolbar{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;height:40px}.mx_MatrixChat{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-box-flex:1;-ms-flex:1;flex:1;min-height:0}.mx_MatrixChat_syncError{color:#fff;background-color:#df2a8b;border-radius:5px;display:table;padding:30px;position:absolute;top:100px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.mx_MatrixChat>:not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle){background-color:#fff;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0;height:100%}.mx_MatrixChat>.mx_ResizeHandle_horizontal:hover{position:relative}.mx_MatrixChat>.mx_ResizeHandle_horizontal:hover:before{position:absolute;left:6px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:64px;width:4px;border-radius:4px;content:" ";background-color:#2e2f32;opacity:.8}.mx_MyGroups{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_MyGroups .mx_BetaCard{margin:0 72px;max-width:760px}.mx_MyGroups .mx_RoomHeader_simpleHeader{margin-left:0}.mx_MyGroups_header{margin-left:2px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mx_MyGroups>:not(.mx_RoomHeader):not(.mx_BetaCard){max-width:960px;margin:40px}.mx_MyGroups_headerCard{-webkit-box-flex:1;-ms-flex:1 0 50%;flex:1 0 50%;margin-bottom:30px;min-width:400px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-right:13px;height:40px;width:40px;border-radius:20px;background-color:rgba(92,100,112,.2);position:relative}.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button:before{background-color:#5c6470;-webkit-mask:url(../../img/icons-create-room.817ede2.svg);mask:url(../../img/icons-create-room.817ede2.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:80%;mask-size:80%;content:"";position:absolute;top:0;bottom:0;left:0;right:0}.mx_MyGroups_headerCard_header{font-weight:700;margin-bottom:10px}.mx_MyGroups_headerCard_content{padding-right:15px}.mx_MyGroups_joinBox{visibility:hidden;height:0;margin:0}.mx_MyGroups_content{margin-left:2px;-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow-y:auto}.mx_MyGroups_scrollable{overflow-y:inherit}.mx_MyGroups_placeholder{background-color:#f7f7f7;color:#888;line-height:40rem;border-radius:10px;text-align:center}.mx_MyGroups_joinedGroups{border-top:1px solid transparent;overflow-x:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-line-pack:start;align-content:flex-start}.mx_MyGroups_joinedGroups .mx_GroupTile{min-width:300px;max-width:33%;-webkit-box-flex:1;-ms-flex:1 0 300px;flex:1 0 300px;height:75px;margin:10px 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;cursor:pointer}.mx_GroupTile_avatar{cursor:-webkit-grab,-webkit-grab;cursor:grab,-webkit-grab}.mx_GroupTile_profile{margin-left:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_GroupTile_profile .mx_GroupTile_desc,.mx_GroupTile_profile .mx_GroupTile_groupId,.mx_GroupTile_profile .mx_GroupTile_name{padding-right:10px}.mx_GroupTile_profile .mx_GroupTile_name{margin:0;font-size:1.5rem}.mx_GroupTile_profile .mx_GroupTile_groupId{font-size:1.3rem;opacity:.7}.mx_GroupTile_profile .mx_GroupTile_desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:1.3rem;max-height:36px;overflow:hidden}.mx_NonUrgentToastContainer{position:absolute;bottom:30px;left:28px;z-index:101}.mx_NonUrgentToastContainer .mx_NonUrgentToastContainer_toast{padding:10px 12px;border-radius:8px;width:320px;font-size:1.3rem;margin-top:8px;background-color:#17191c;color:#fff}.mx_NotificationPanel{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow-y:auto;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_NotificationPanel .mx_RoomView_messageListWrapper{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_NotificationPanel .mx_RoomView_MessageList{width:100%}.mx_NotificationPanel .mx_RoomView_MessageList h2{margin-left:0}.mx_NotificationPanel .mx_EventTile{word-break:break-word;position:relative;padding-bottom:18px}.mx_NotificationPanel .mx_EventTile:not(.mx_EventTile_last):not(.mx_EventTile_lastInSection):after{position:absolute;bottom:0;left:0;right:0;background-color:#8d99a5;height:1px;opacity:.4;content:""}.mx_NotificationPanel .mx_EventTile_roomName{font-weight:700;font-size:1.4rem}.mx_NotificationPanel .mx_EventTile_roomName>*{vertical-align:middle}.mx_NotificationPanel .mx_EventTile_roomName>.mx_BaseAvatar{margin-right:8px}.mx_NotificationPanel .mx_EventTile_roomName a{color:#2e2f32}.mx_NotificationPanel .mx_EventTile_avatar{display:none}.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp,.mx_NotificationPanel .mx_EventTile .mx_SenderProfile{color:#2e2f32;font-size:1.2rem;display:inline;padding-left:0}.mx_NotificationPanel .mx_EventTile_senderDetails{padding-left:36px;position:relative}.mx_NotificationPanel .mx_EventTile_senderDetails a{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_NotificationPanel .mx_EventTile_roomName a,.mx_NotificationPanel .mx_EventTile_senderDetails a{text-decoration:none!important}.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp{visibility:visible;position:static;display:inline}.mx_NotificationPanel .mx_EventTile_line{margin-right:0;padding:0 0 0 36px}.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line{padding-left:0}.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line{background-color:#fff}.mx_NotificationPanel .mx_EventTile_content{margin-right:0}.mx_NotificationPanel_empty:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_RightPanel{overflow-x:hidden;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-radius:8px;padding:4px 0;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%}.mx_RightPanel .mx_RoomView_MessageList{padding:14px 18px}.mx_RightPanel_header{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;border-bottom:1px solid transparent;-webkit-box-flex:0;-ms-flex:0 0 52px;flex:0 0 52px}.mx_RightPanel_headerButtonGroup{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;background-color:#fff;padding:0 9px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RightPanel_headerButton{cursor:pointer;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-left:1px;margin-right:1px;height:32px;width:32px;position:relative;border-radius:100%}.mx_RightPanel_headerButton:before{content:"";position:absolute;top:4px;left:4px;height:24px;width:24px;background-color:#c1c6cd;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_RightPanel_headerButton:hover{background:rgba(13,189,139,.1)}.mx_RightPanel_headerButton:hover:before{background-color:#0dbd8b}.mx_RightPanel_notifsButton:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg);-webkit-mask-position:center;mask-position:center}.mx_RightPanel_roomSummaryButton:before{-webkit-mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);-webkit-mask-position:center;mask-position:center}.mx_RightPanel_groupMembersButton:before{-webkit-mask-image:url(../../img/element-icons/community-members.cbb31c1.svg);mask-image:url(../../img/element-icons/community-members.cbb31c1.svg);-webkit-mask-position:center;mask-position:center}.mx_RightPanel_roomsButton:before{-webkit-mask-image:url(../../img/element-icons/community-rooms.8f0b6c9.svg);mask-image:url(../../img/element-icons/community-rooms.8f0b6c9.svg);-webkit-mask-position:center;mask-position:center}.mx_RightPanel_headerButton_highlight:before{background-color:#0dbd8b!important}.mx_RightPanel_headerButton_badge{font-size:.8rem;border-radius:8px;color:#fff;background-color:#0dbd8b;font-weight:700;position:absolute;top:-4px;left:20px;padding:2px 4px}.mx_RightPanel_collapsebutton{-webkit-box-flex:1;-ms-flex:1;flex:1;text-align:right;height:16px;border:none}.mx_RightPanel .mx_GroupRoomList,.mx_RightPanel .mx_MemberInfo,.mx_RightPanel .mx_MemberList,.mx_RightPanel_blank{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_RightPanel .mx_RoomView_messagePanelSpinner{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;margin:auto}.mx_RightPanel_empty{margin-right:-28px}.mx_RightPanel_empty h2{font-weight:700;margin:16px 0}.mx_RightPanel_empty h2,.mx_RightPanel_empty p{font-size:1.4rem}.mx_RightPanel_empty:before{content:"";display:block;margin:11px auto 29px;height:42px;width:42px;background-color:#91a1c0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}.mx_RightPanel_scopeHeader{margin:24px;text-align:center;font-weight:600;font-size:1.8rem;line-height:2.2rem}.mx_RightPanel_scopeHeader .mx_BaseAvatar{margin-right:8px;vertical-align:middle}.mx_RightPanel_scopeHeader .mx_BaseAvatar_image{border-radius:8px}.mx_RoomDirectory_dialogWrapper>.mx_Dialog{max-width:960px;height:100%}.mx_RoomDirectory_dialog{height:100%;flex-direction:column}.mx_RoomDirectory,.mx_RoomDirectory_dialog{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column}.mx_RoomDirectory{margin-bottom:12px;color:#2e2f32;word-break:break-word}.mx_RoomDirectory,.mx_RoomDirectory_list{flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_RoomDirectory_list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column}.mx_RoomDirectory_list .mx_RoomView_messageListWrapper{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_RoomDirectory_listheader{display:block;margin-top:13px}.mx_RoomDirectory_searchbox{-webkit-box-flex:1!important;-ms-flex:1!important;flex:1!important}.mx_RoomDirectory_listheader .mx_NetworkDropdown{-webkit-box-flex:0;-ms-flex:0 0 200px;flex:0 0 200px}.mx_RoomDirectory_tableWrapper{overflow-y:auto;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_RoomDirectory_table{color:#2e2f32;display:grid;font-size:1.2rem;grid-template-columns:-webkit-max-content auto -webkit-max-content -webkit-max-content -webkit-max-content;grid-template-columns:max-content auto max-content max-content max-content;grid-row-gap:24px;row-gap:24px;text-align:left;width:100%}.mx_RoomDirectory_roomAvatar{padding:2px 14px 0 0}.mx_RoomDirectory_roomMemberCount{-ms-flex-item-align:center;align-self:center;color:#747474;padding:3px 10px 0}.mx_RoomDirectory_roomMemberCount:before{background-color:#747474;display:inline-block;vertical-align:text-top;margin-right:2px;content:"";-webkit-mask:url(../../img/feather-customised/user.7a4d23d.svg);mask:url(../../img/feather-customised/user.7a4d23d.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:80%;mask-size:80%;width:16px;height:16px}.mx_RoomDirectory_join,.mx_RoomDirectory_preview{-ms-flex-item-align:center;align-self:center;white-space:nowrap}.mx_RoomDirectory_name{display:inline-block;font-size:1.8rem;font-weight:600}.mx_RoomDirectory_perms{display:inline-block}.mx_RoomDirectory_perm{border-radius:10px;display:inline-block;height:20px;line-height:2rem;padding:0 5px;color:#fff;background-color:#aaa}.mx_RoomDirectory_topic{cursor:auto;color:#747474;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}.mx_RoomDirectory_alias{font-size:1.2rem;color:#a2a2a2}.mx_RoomDirectory_table tr{padding-bottom:10px;cursor:pointer}.mx_RoomDirectory .mx_RoomView_MessageList{padding:0}.mx_RoomDirectory>span{font-size:1.5rem;margin-top:0}.mx_RoomDirectory>span .mx_AccessibleButton{padding:0}.mx_RoomSearch{-webkit-box-flex:1;-ms-flex:1;flex:1;border-radius:8px;background-color:rgba(141,151,165,.2);border:1px solid transparent;height:28px;padding:1px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomSearch .mx_RoomSearch_icon{width:16px;height:16px;-webkit-mask:url(../../img/element-icons/roomlist/search.3774248.svg);mask:url(../../img/element-icons/roomlist/search.3774248.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#737d8c;margin-left:7px}.mx_RoomSearch .mx_RoomSearch_input{border:none!important;-webkit-box-flex:1!important;-ms-flex:1!important;flex:1!important;color:#2e2f32!important;padding:0;height:100%;width:100%;font-size:1.2rem;line-height:1.6rem}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-webkit-input-placeholder{color:#8d99a5!important}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-moz-placeholder{color:#8d99a5!important}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded):-ms-input-placeholder{color:#8d99a5!important}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-ms-input-placeholder{color:#8d99a5!important}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::placeholder{color:#8d99a5!important}.mx_RoomSearch.mx_RoomSearch_hasQuery{border-color:#737d8c}.mx_RoomSearch.mx_RoomSearch_focused{-webkit-box-shadow:0 0 4px 4px rgba(0,132,255,.5);box-shadow:0 0 4px 4px rgba(0,132,255,.5);border-color:transparent}.mx_RoomSearch.mx_RoomSearch_focused,.mx_RoomSearch.mx_RoomSearch_hasQuery{background-color:#fff}.mx_RoomSearch.mx_RoomSearch_focused .mx_RoomSearch_clearButton,.mx_RoomSearch.mx_RoomSearch_hasQuery .mx_RoomSearch_clearButton{width:16px;height:16px;-webkit-mask-image:url(../../img/element-icons/roomlist/search-clear.6164d97.svg);mask-image:url(../../img/element-icons/roomlist/search-clear.6164d97.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#737d8c;margin-right:8px}.mx_RoomSearch .mx_RoomSearch_clearButton{width:0;height:0}.mx_RoomSearch.mx_RoomSearch_minimized{border-radius:32px;height:auto;width:auto;padding:8px}.mx_RoomSearch.mx_RoomSearch_minimized .mx_RoomSearch_icon{margin-left:0}.mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages){margin-left:65px;min-height:50px}.mx_RoomStatusBar_typingIndicatorAvatars{width:52px;margin-top:-1px;text-align:left}.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_image{margin-right:-12px;border:1px solid #fff}.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_initial{padding-left:1px;padding-top:1px}.mx_RoomStatusBar_typingIndicatorRemaining{display:inline-block;color:#acacac;background-color:#ddd;border:1px solid #fff;border-radius:40px;width:24px;height:24px;line-height:2.4rem;font-size:.8em;vertical-align:top;text-align:center;position:absolute}.mx_RoomStatusBar_scrollDownIndicator{cursor:pointer;padding-left:1px}.mx_RoomStatusBar_unreadMessagesBar{padding-top:10px;color:#ff4b55;cursor:pointer}.mx_RoomStatusBar_connectionLostBar{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:19px;min-height:58px}.mx_RoomStatusBar_unsentMessages>div[role=alert]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:70px;margin:12px;padding-left:16px;background-color:#f3f8fd;border-radius:4px}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge{margin-right:12px}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge .mx_NotificationBadge{width:24px!important;height:24px!important;border-radius:24px!important}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge .mx_NotificationBadge .mx_NotificationBadge_count{font-size:1.6rem!important}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentTitle{color:#ff4b55;font-size:1.5rem}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentDescription{font-size:1.2rem}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;text-align:right;margin-right:22px;color:#61708b}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton{padding:5px 10px 5px 28px;display:inline-block;position:relative}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton:nth-child(2){border-left:1px solid #e3e8f0}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton:before{content:"";position:absolute;left:10px;background-color:#61708b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton.mx_RoomStatusBar_unsentCancelAllBtn:before{-webkit-mask-image:url(../../img/element-icons/trashcan.26f6c28.svg);mask-image:url(../../img/element-icons/trashcan.26f6c28.svg);width:12px;height:16px;top:calc(50% - 8px)}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton.mx_RoomStatusBar_unsentResendAllBtn{padding-left:34px}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton.mx_RoomStatusBar_unsentResendAllBtn:before{-webkit-mask-image:url(../../img/element-icons/retry.6cd23ad.svg);mask-image:url(../../img/element-icons/retry.6cd23ad.svg);width:18px;height:18px;top:calc(50% - 9px)}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_InlineSpinner{vertical-align:middle;margin-right:5px;top:1px}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_InlineSpinner+span{margin-right:10px}.mx_RoomStatusBar_connectionLostBar img{padding-left:10px;padding-right:10px;vertical-align:middle;float:left}.mx_RoomStatusBar_connectionLostBar_title{color:#ff4b55}.mx_RoomStatusBar_connectionLostBar_desc{color:#2e2f32;font-size:1.3rem;opacity:.5;padding-bottom:20px}.mx_RoomStatusBar_resend_link{color:#2e2f32!important;text-decoration:underline!important;cursor:pointer}.mx_RoomStatusBar_typingBar{height:50px;line-height:5rem;color:#2e2f32;opacity:.5;overflow-y:hidden;display:block}.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages){min-height:40px}.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_indicator{margin-top:10px}.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_typingBar{height:40px;line-height:4rem}.mx_RoomView{word-wrap:break-word;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@-webkit-keyframes mx_RoomView_fileDropTarget_animation{0%{opacity:0}to{opacity:.95}}@keyframes mx_RoomView_fileDropTarget_animation{0%{opacity:0}to{opacity:.95}}.mx_RoomView_fileDropTarget{min-width:0;width:100%;height:100%;font-size:1.8rem;text-align:center;pointer-events:none;background-color:#fff;opacity:.95;position:absolute;z-index:3000;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-animation:mx_RoomView_fileDropTarget_animation;animation:mx_RoomView_fileDropTarget_animation;-webkit-animation-duration:.5s;animation-duration:.5s}@-webkit-keyframes mx_RoomView_fileDropTarget_image_animation{0%{width:0}to{width:32px}}@keyframes mx_RoomView_fileDropTarget_image_animation{0%{width:0}to{width:32px}}.mx_RoomView_fileDropTarget_image{-webkit-animation:mx_RoomView_fileDropTarget_image_animation;animation:mx_RoomView_fileDropTarget_image_animation;-webkit-animation-duration:.5s;animation-duration:.5s;margin-bottom:16px}.mx_RoomView_auxPanel{min-width:0;width:100%;margin:0 auto;overflow:auto;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_RoomView_auxPanel_fullHeight{position:absolute;top:0;bottom:0;left:0;right:0;z-index:3000;background-color:#fff}.mx_RoomView_auxPanel_hiddenHighlights{border-bottom:1px solid transparent;padding:10px 26px;color:#ff4b55;cursor:pointer}.mx_RoomView_auxPanel_apps{max-width:1920px!important}.mx_RoomView .mx_MainSplit,.mx_RoomView_messagePanel{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_RoomView_messagePanel{width:100%;overflow-y:auto;overflow-anchor:none}.mx_RoomView_messagePanelSearchSpinner{-webkit-box-flex:1;-ms-flex:1;flex:1;background-image:url(../../img/typing-indicator-2x.0eb9f0e.gif);background-position:center 367px;background-size:25px;background-repeat:no-repeat;position:relative}.mx_RoomView_messagePanelSearchSpinner:before{background-color:#888;-webkit-mask:url(../../img/feather-customised/search-input.044bfa7.svg);mask:url(../../img/feather-customised/search-input.044bfa7.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:50px;mask-size:50px;content:"";position:absolute;top:286px;left:0;right:0;height:50px}.mx_RoomView_body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.mx_RoomView_body .mx_RoomView_messagePanel,.mx_RoomView_body .mx_RoomView_messagePanelSearchSpinner,.mx_RoomView_body .mx_RoomView_messagePanelSpinner{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.mx_RoomView_body .mx_RoomView_timeline{position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_RoomView_statusArea{width:100%;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;max-height:0;background-color:#fff;z-index:1000;overflow:hidden;-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.mx_RoomView_statusArea_expanded{max-height:100px}.mx_RoomView_statusAreaBox{margin:auto;min-height:50px}.mx_RoomView_statusAreaBox_line{margin-left:65px;border-top:1px solid transparent;height:1px}.mx_RoomView_messageListWrapper{min-height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_RoomView_searchResultsPanel a{text-decoration:none;color:inherit}.mx_RoomView_empty{font-size:1.3rem;padding:0 24px;margin-right:30px;text-align:center;margin-bottom:80px}.mx_RoomView_MessageList{list-style-type:none;padding:18px;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_RoomView_MessageList li{clear:both}li.mx_RoomView_myReadMarker_container{height:0;margin:0;padding:0;border:0}hr.mx_RoomView_myReadMarker{border-top:1px solid #0dbd8b;border-bottom:1px solid #0dbd8b;margin-top:0;position:relative;top:-1px;z-index:1;-webkit-transition:width easeinsine .4s 1s,opacity easeinsine .4s 1s;transition:width easeinsine .4s 1s,opacity easeinsine .4s 1s;width:99%;opacity:1}.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner{background-color:#fff}.mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename{color:#fff;opacity:1}.mx_RoomView_inCall .mx_RoomView_statusAreaBox_line{margin-top:2px;border:none;height:0}.mx_RoomView_inCall .mx_MessageComposer_wrapper{border-top:2px hidden;padding-top:1px}.mx_RoomView_voipChevron{position:absolute;bottom:-11px;right:11px}.mx_RoomView_voipButton{float:right;margin-right:13px;margin-top:13px;cursor:pointer}.mx_RoomView_voipButton object{pointer-events:none}.mx_RoomView .mx_MessageComposer{width:100%;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-right:2px}.mx_RoomView_ongoingConfCallNotification{width:100%;text-align:center;background-color:#ff4b55;color:#fff;font-weight:700;padding:6px 0;cursor:pointer}.mx_RoomView_ongoingConfCallNotification a{color:#fff!important}.mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList{margin-bottom:4px}.mx_MatrixChat_useCompactLayout .mx_RoomView_statusAreaBox{min-height:42px}.mx_ScrollPanel .mx_RoomView_MessageList{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_SearchBox{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0}.mx_SearchBox.mx_SearchBox_blurred:not(:hover){background-color:transparent}.mx_SearchBox .mx_SearchBox_closeButton{cursor:pointer;background-image:url(../../img/icons-close.11ff07c.svg);background-repeat:no-repeat;width:16px;height:16px;background-position:50%;padding:9px}.mx_SpacePanel{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;background-color:hsla(0,0%,91%,.77);padding:0;margin:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow-y:auto}.mx_SpacePanel .mx_SpacePanel_spaceTreeWrapper{-webkit-box-flex:1;-ms-flex:1;flex:1;padding:8px 8px 16px 0}.mx_SpacePanel .mx_SpacePanel_toggleCollapse{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:40px;height:40px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:32px;mask-size:32px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;margin-left:16px;margin-bottom:12px;background-color:#8d99a5;-webkit-mask-image:url(../../img/element-icons/expand-space-panel.e6f74b9.svg);mask-image:url(../../img/element-icons/expand-space-panel.e6f74b9.svg)}.mx_SpacePanel .mx_SpacePanel_toggleCollapse.expanded{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.mx_SpacePanel ul{margin:0;list-style:none;padding:0}.mx_SpacePanel ul>.mx_SpaceItem{padding-left:16px}.mx_SpacePanel .mx_SpaceButton_toggleCollapse{cursor:pointer}.mx_SpacePanel .mx_SpaceTreeLevel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-width:250px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_SpacePanel .mx_SpaceItem{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-flow:wrap;flex-flow:wrap}.mx_SpacePanel .mx_SpaceItem.mx_SpaceItem_narrow{-ms-flex-item-align:baseline;align-self:baseline}.mx_SpacePanel .mx_SpaceItem.collapsed>.mx_SpaceButton>.mx_SpaceButton_toggleCollapse{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.mx_SpacePanel .mx_SpaceItem.collapsed>.mx_SpaceTreeLevel{display:none}.mx_SpacePanel .mx_SpaceItem:not(.hasSubSpaces)>.mx_SpaceButton{margin-left:16px;min-width:40px}.mx_SpacePanel .mx_SpaceButton{border-radius:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:4px 4px 4px 0;width:100%}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper{background-color:#fff}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active.mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper{padding:1px;border:3px solid #737d8c}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_selectionWrapper{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:12px;padding:4px}.mx_SpacePanel .mx_SpaceButton:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper{width:100%;padding-right:16px;overflow:hidden}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_name{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-left:8px;white-space:nowrap;display:block;text-overflow:ellipsis;overflow:hidden;padding-right:8px;font-size:1.4rem;line-height:1.8rem}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_toggleCollapse{width:16px;height:20px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:20px;mask-size:20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#8d99a5;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon{width:32px;min-width:32px;height:32px;border-radius:8px;position:relative}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon:before{position:absolute;content:"";width:32px;height:32px;top:0;left:0;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:18px;mask-size:18px}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon{background-color:#fff}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon:before{background-color:#3f3d3d;-webkit-mask-image:url(../../img/element-icons/home.b706c0e.svg);mask-image:url(../../img/element-icons/home.b706c0e.svg)}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_new .mx_SpaceButton_icon{background-color:#0dbd8b;-webkit-transition:all .1s ease-in-out;transition:all .1s ease-in-out}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_new .mx_SpaceButton_icon:before{background-color:#fff;-webkit-mask-image:url(../../img/element-icons/plus.62cc275.svg);mask-image:url(../../img/element-icons/plus.62cc275.svg);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_newCancel .mx_SpaceButton_icon{background-color:#c1c6cd}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_newCancel .mx_SpaceButton_icon:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.mx_SpacePanel .mx_SpaceButton .mx_BaseAvatar_image{border-radius:8px}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton{width:20px;min-width:20px;height:20px;margin-top:auto;margin-bottom:auto;display:none;position:absolute;right:4px}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton:before{top:2px;left:2px;content:"";width:16px;height:16px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);background:#2e2f32}.mx_SpacePanel .mx_SpacePanel_badgeContainer{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge{margin:0 2px}.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge_dot{margin:0 7px}.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer{right:0;top:0}.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer .mx_NotificationBadge{background-clip:padding-box}.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer .mx_NotificationBadge_dot{margin:0 -1px 0 0;border:3px solid hsla(0,0%,91%,.77)}.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer .mx_NotificationBadge_2char,.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer .mx_NotificationBadge_3char{margin:-5px -5px 0 0;border:2px solid hsla(0,0%,91%,.77)}.mx_SpacePanel.collapsed .mx_SpaceButton.mx_SpaceButton_active .mx_SpacePanel_badgeContainer{right:-3px;top:-3px}.mx_SpacePanel:not(.collapsed) .mx_SpacePanel_badgeContainer{position:absolute;right:4px}.mx_SpacePanel:not(.collapsed) .mx_SpaceButton:focus-within:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpacePanel_badgeContainer,.mx_SpacePanel:not(.collapsed) .mx_SpaceButton:hover:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpacePanel_badgeContainer,.mx_SpacePanel:not(.collapsed) .mx_SpaceButton_hasMenuOpen:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpacePanel_badgeContainer{width:0;height:0;display:none}.mx_SpacePanel:not(.collapsed) .mx_SpaceButton:focus-within:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton,.mx_SpacePanel:not(.collapsed) .mx_SpaceButton:hover:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton,.mx_SpacePanel:not(.collapsed) .mx_SpaceButton_hasMenuOpen:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton{display:block}.mx_SpacePanel>.mx_AutoHideScrollbar>.mx_SpaceButton,.mx_SpacePanel>.mx_AutoHideScrollbar>.mx_SpaceButton.mx_SpaceButton_active:before{height:32px}.mx_SpacePanel>.mx_AutoHideScrollbar>ul{padding-left:0}.mx_SpacePanel_contextMenu .mx_SpacePanel_contextMenu_header{margin:12px 16px;font-weight:600;font-size:1.5rem;line-height:1.8rem}.mx_SpacePanel_contextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton{color:#0dbd8b}.mx_SpacePanel_contextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton .mx_SpacePanel_iconInvite:before{background-color:#0dbd8b;-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconSettings:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconLeave:before{-webkit-mask-image:url(../../img/element-icons/leave.bb917e7.svg);mask-image:url(../../img/element-icons/leave.bb917e7.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconMembers:before{-webkit-mask-image:url(../../img/element-icons/room/members.88c3e93.svg);mask-image:url(../../img/element-icons/room/members.88c3e93.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconPlus:before{-webkit-mask-image:url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);mask-image:url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconHash:before{-webkit-mask-image:url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);mask-image:url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconExplore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg);mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg)}.mx_SpacePanel_sharePublicSpace{margin:0}.mx_SpaceRoomDirectory_dialogWrapper>.mx_Dialog{max-width:960px;height:100%}.mx_SpaceRoomDirectory{height:100%;margin-bottom:12px;color:#2e2f32;word-break:break-word;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_SpaceRoomDirectory,.mx_SpaceRoomDirectory .mx_Dialog_title,.mx_SpaceRoomView_landing .mx_Dialog_title{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_SpaceRoomDirectory .mx_Dialog_title .mx_BaseAvatar,.mx_SpaceRoomView_landing .mx_Dialog_title .mx_BaseAvatar{margin-right:12px;-ms-flex-item-align:center;align-self:center}.mx_SpaceRoomDirectory .mx_Dialog_title .mx_BaseAvatar_image,.mx_SpaceRoomView_landing .mx_Dialog_title .mx_BaseAvatar_image{border-radius:8px}.mx_SpaceRoomDirectory .mx_Dialog_title>div>h1,.mx_SpaceRoomView_landing .mx_Dialog_title>div>h1{font-weight:600;font-size:1.8rem;line-height:2.2rem;margin:0}.mx_SpaceRoomDirectory .mx_Dialog_title>div>div,.mx_SpaceRoomView_landing .mx_Dialog_title>div>div{font-weight:400;color:#737d8c;font-size:1.5rem;line-height:2.4rem}.mx_SpaceRoomDirectory .mx_AccessibleButton_kind_link,.mx_SpaceRoomView_landing .mx_AccessibleButton_kind_link{padding:0}.mx_SpaceRoomDirectory .mx_SearchBox,.mx_SpaceRoomView_landing .mx_SearchBox{margin:24px 0 16px}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_noResults,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_noResults{text-align:center}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_noResults>div,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_noResults>div{font-size:1.5rem;line-height:2.4rem;color:#737d8c}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:32px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.5rem;line-height:2.4rem;color:#2e2f32}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton{padding:4px 12px;font-weight:400}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton+.mx_AccessibleButton,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton+.mx_AccessibleButton{margin-left:16px}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton_kind_danger_outline,.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton_kind_primary_outline,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton_kind_danger_outline,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton_kind_primary_outline{padding:3px 12px}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader>span,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader>span{margin-left:auto}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_error,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_error{position:relative;font-weight:600;color:#ff4b55;font-size:1.5rem;line-height:1.8rem;margin:20px auto 12px;padding-left:24px;width:-webkit-max-content;width:-moz-max-content;width:max-content}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_error:before,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_error:before{content:"";position:absolute;height:16px;width:16px;left:0;background-image:url(../../img/element-icons/warning-badge.de1033e.svg)}.mx_SpaceRoomDirectory_list{margin-top:16px;padding-bottom:40px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomCount>h3{display:inline;font-weight:600;font-size:1.8rem;line-height:2.2rem;color:#2e2f32}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomCount>span{margin-left:8px;font-size:1.5rem;line-height:2.4rem;color:#737d8c}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace .mx_BaseAvatar_image{border-radius:8px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle{position:absolute;left:-1px;top:10px;height:16px;width:16px;border-radius:4px;background-color:#fff}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle:before{content:"";position:absolute;top:0;left:0;height:16px;width:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#8d99a5;-webkit-mask-size:16px;mask-size:16px;-webkit-transform:rotate(270deg);transform:rotate(270deg);-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle.mx_SpaceRoomDirectory_subspace_toggle_shown:before{-webkit-transform:rotate(0deg);transform:rotate(0deg)}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_children{position:relative;padding-left:12px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile{position:relative;padding:8px 16px;border-radius:8px;min-height:56px;-webkit-box-sizing:border-box;box-sizing:border-box;display:grid;grid-template-columns:20px auto -webkit-max-content;grid-template-columns:20px auto max-content;grid-column-gap:8px;grid-row-gap:6px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_BaseAvatar{grid-row:1;grid-column:1}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_name{font-weight:600;font-size:1.5rem;line-height:1.8rem;grid-row:1;grid-column:2}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_name .mx_InfoTooltip{display:inline;margin-left:12px;color:#8d99a5;font-size:1.2rem;line-height:1.5rem}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_name .mx_InfoTooltip .mx_InfoTooltip_icon{margin-right:4px;position:relative;vertical-align:text-top}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_name .mx_InfoTooltip .mx_InfoTooltip_icon:before{position:absolute;top:0;left:0}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_info{font-size:1.4rem;line-height:1.8rem;color:#737d8c;grid-row:2;grid-column:1/3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions{text-align:right;margin-left:20px;grid-column:3;grid-row:1/3}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions .mx_AccessibleButton{line-height:2.4rem;padding:4px 16px;display:inline-block;visibility:hidden}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions .mx_AccessibleButton_kind_danger_outline,.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions .mx_AccessibleButton_kind_primary_outline{padding:3px 16px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions .mx_Checkbox{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;margin-left:12px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:hover{background-color:hsla(0,0%,91%,.77)}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:hover .mx_AccessibleButton{visibility:visible}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:before,.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_children:before{content:"";position:absolute;background-color:hsla(0,0%,91%,.77);width:1px;height:100%;left:6px;top:0}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_actions .mx_SpaceRoomDirectory_actionsText{font-weight:400;font-size:1.2rem;line-height:1.5rem;color:#737d8c}.mx_SpaceRoomDirectory_list>hr{border:none;height:1px;background-color:rgba(141,151,165,.2);margin:20px 0}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_createRoom{display:block;margin:16px auto 0;width:-webkit-max-content;width:-moz-max-content;width:max-content}.mx_SpaceRoomView .mx_MainSplit>div:first-child{padding:80px 60px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-height:100%;overflow-y:auto}.mx_SpaceRoomView .mx_MainSplit>div:first-child h1{margin:0;font-size:2.4rem;font-weight:600;color:#2e2f32;width:-webkit-max-content;width:-moz-max-content;width:max-content}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_description{font-size:1.5rem;color:#737d8c;margin-top:12px;margin-bottom:24px;max-width:428px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_AddExistingToSpace{max-width:428px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_AddExistingToSpace .mx_AddExistingToSpace_content{height:calc(100vh - 360px);max-height:400px}.mx_SpaceRoomView .mx_MainSplit>div:first-child:not(.mx_SpaceRoomView_landing) .mx_SpaceFeedbackPrompt{width:428px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_buttons{display:block;margin-top:44px;width:428px;text-align:right}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_buttons .mx_AccessibleButton_hasKind{padding:8px 22px;margin-left:16px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_buttons input.mx_AccessibleButton{border:none}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_Field{max-width:428px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_Field+.mx_Field{margin-top:28px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_errorText{font-weight:600;font-size:1.2rem;line-height:1.5rem;color:#ff4b55;margin-bottom:28px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_AccessibleButton_disabled{cursor:not-allowed}.mx_SpaceRoomView .mx_SpaceRoomView_preview{padding:32px 24px!important;margin:auto;max-width:480px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:2px 15px 30px rgba(0,0,0,.48);box-shadow:2px 15px 30px rgba(0,0,0,.48);border-radius:8px;position:relative}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_BetaCard_betaPill{position:absolute;right:24px;top:32px}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_spaceBetaPrompt{font-weight:600;font-size:1.4rem;line-height:2.4rem;color:#2e2f32;margin-top:24px;position:relative;padding-left:24px}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_spaceBetaPrompt .mx_AccessibleButton_kind_link{display:inline;padding:0;font-size:inherit;line-height:inherit}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_spaceBetaPrompt:before{content:"";position:absolute;height:2.4rem;width:20px;left:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);background-color:#737d8c}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:20px;font-size:1.5rem}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter>div{margin-left:8px}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter>div .mx_SpaceRoomView_preview_inviter_name{line-height:1.8rem}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter>div .mx_SpaceRoomView_preview_inviter_mxid{line-height:2.4rem;color:#737d8c}.mx_SpaceRoomView .mx_SpaceRoomView_preview>.mx_BaseAvatar>.mx_BaseAvatar_image,.mx_SpaceRoomView .mx_SpaceRoomView_preview>.mx_BaseAvatar_image{border-radius:12px}.mx_SpaceRoomView .mx_SpaceRoomView_preview h1.mx_SpaceRoomView_preview_name{margin:20px 0!important}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_topic{font-size:1.4rem;line-height:2.2rem;color:#737d8c;margin:20px 0;max-height:160px;overflow-y:auto}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_joinButtons{margin-top:20px}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_joinButtons .mx_AccessibleButton{width:200px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:14px 0}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_joinButtons .mx_AccessibleButton+.mx_AccessibleButton{margin-left:20px}.mx_SpaceRoomView .mx_SpaceRoomView_landing>.mx_BaseAvatar>.mx_BaseAvatar_image,.mx_SpaceRoomView .mx_SpaceRoomView_landing>.mx_BaseAvatar_image{border-radius:12px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name{margin:24px 0 16px;font-size:1.5rem;color:#737d8c}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name>span{display:inline-block}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name .mx_SpaceRoomView_landing_nameRow{margin-top:12px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name .mx_SpaceRoomView_landing_nameRow>h1{display:inline-block}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name .mx_SpaceRoomView_landing_inviter .mx_BaseAvatar{margin-right:4px;vertical-align:middle}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_info{display:inline-block;margin:0 auto 0 0}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_FacePile{display:inline-block;margin-right:12px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_FacePile .mx_FacePile_faces{cursor:pointer}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_landing_inviteButton{position:relative;padding:4px 18px 4px 40px;line-height:2.4rem;height:-webkit-min-content;height:-moz-min-content;height:min-content}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_landing_inviteButton:before{position:absolute;content:"";left:8px;height:16px;width:16px;background:#fff;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_landing_settingsButton{position:relative;margin-left:16px;width:24px;height:24px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_landing_settingsButton:before{position:absolute;content:"";left:0;top:0;height:24px;width:24px;background:#8d99a5;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_topic{font-size:1.5rem;margin-top:12px;margin-bottom:16px}.mx_SpaceRoomView .mx_SpaceRoomView_landing>hr{border:none;height:1px;background-color:hsla(0,0%,91%,.77)}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SearchBox{margin:0 0 20px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceFeedbackPrompt{margin-bottom:16px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceFeedbackPrompt+hr{display:none}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton{position:relative;padding:16px 32px 16px 72px;width:432px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;border:1px solid #e7e7e7;font-size:1.5rem;margin:20px 0}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton>h3{font-weight:600;margin:0 0 4px}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton>span{color:#737d8c}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton:before{position:absolute;content:"";width:32px;height:32px;top:24px;left:20px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px;mask-size:24px;background-color:#8d99a5}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton:hover{border-color:#0dbd8b}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton:hover:before{background-color:#0dbd8b}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton:hover>span{color:#2e2f32}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope .mx_SpaceRoomView_privateScope_justMeButton:before{-webkit-mask-image:url(../../img/element-icons/room/members.88c3e93.svg);mask-image:url(../../img/element-icons/room/members.88c3e93.svg)}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope .mx_SpaceRoomView_privateScope_meAndMyTeammatesButton:before{-webkit-mask-image:url(../../img/element-icons/community-members.cbb31c1.svg);mask-image:url(../../img/element-icons/community-members.cbb31c1.svg)}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_betaDisclaimer{padding:58px 16px 16px;position:relative;border-radius:8px;background-color:#f3f8fd;max-width:428px;margin:20px 0 30px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_betaDisclaimer .mx_BetaCard_betaPill{position:absolute;left:16px;top:16px}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons{color:#737d8c;margin-top:28px}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_AccessibleButton{position:relative;display:inline-block;padding-left:32px;line-height:24px}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_AccessibleButton:before{content:"";position:absolute;height:24px;width:24px;top:0;left:0;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_AccessibleButton+.mx_AccessibleButton{margin-left:32px}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_SpaceRoomView_inviteTeammates_inviteDialogButton:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_SpaceRoomView_info{color:#737d8c;font-size:1.5rem;line-height:2.4rem;margin:20px 0}.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private,.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public{padding-left:20px;position:relative}.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private:before,.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public:before{position:absolute;content:"";width:20px;height:20px;top:0;left:-2px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#8d99a5}.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public:before{-webkit-mask-size:12px;mask-size:12px;-webkit-mask-image:url(../../img/globe.8201f08.svg);mask-image:url(../../img/globe.8201f08.svg)}.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private:before{-webkit-mask-size:14px;mask-size:14px;-webkit-mask-image:url(../../img/element-icons/lock.1f264bd.svg);mask-image:url(../../img/element-icons/lock.1f264bd.svg)}.mx_SpaceRoomView_info .mx_AccessibleButton_kind_link{color:inherit;position:relative;padding-left:16px}.mx_SpaceRoomView_info .mx_AccessibleButton_kind_link:before{content:"·";position:absolute;left:6px}.mx_SpaceFeedbackPrompt{margin-top:18px;margin-bottom:12px}.mx_SpaceFeedbackPrompt>hr{border:none;border-top:1px solid #e7e7e7;margin-bottom:12px}.mx_SpaceFeedbackPrompt>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;font-size:1.5rem;line-height:2.4rem}.mx_SpaceFeedbackPrompt>div>span{color:#737d8c;position:relative;padding-left:32px;font-size:inherit;line-height:inherit;margin-right:auto}.mx_SpaceFeedbackPrompt>div>span:before{content:"";position:absolute;left:0;top:2px;height:20px;width:20px;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);-webkit-mask-position:center;mask-position:center}.mx_SpaceFeedbackPrompt>div .mx_AccessibleButton_kind_link{color:#0dbd8b;position:relative;padding:0 0 0 24px;margin-left:8px;font-size:inherit;line-height:inherit}.mx_SpaceFeedbackPrompt>div .mx_AccessibleButton_kind_link:before{content:"";position:absolute;left:0;height:16px;width:16px;background-color:#0dbd8b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);mask-image:url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);-webkit-mask-position:center;mask-position:center}.mx_TabbedView{padding:0 0 0 16px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:absolute;top:0;bottom:0;left:0;right:0;margin:8px 0 0}.mx_TabbedView_tabLabels{width:170px;max-width:170px;color:#45474a;position:fixed}.mx_TabbedView_tabLabel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:text-top;cursor:pointer;padding:8px 0;border-radius:8px;font-size:1.3rem;position:relative}.mx_TabbedView_tabLabel_active{background-color:#0dbd8b;color:#fff}.mx_TabbedView_maskedIcon{margin-left:8px;margin-right:16px;width:16px;height:16px;display:inline-block}.mx_TabbedView_maskedIcon:before{display:inline-block;background-color:#454545;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:16px;mask-size:16px;width:16px;height:16px;-webkit-mask-position:center;mask-position:center;content:""}.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon:before{background-color:#fff}.mx_TabbedView_tabLabel_text{vertical-align:middle}.mx_TabbedView_tabPanel{margin-left:240px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_TabbedView_tabPanel,.mx_TabbedView_tabPanelContent{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;min-height:0}.mx_TabbedView_tabPanelContent{overflow:auto}.mx_ToastContainer{position:absolute;top:0;left:70px;z-index:101;padding:4px;display:grid;grid-template-rows:1fr 14px 6px}.mx_ToastContainer.mx_ToastContainer_stacked:before{content:"";margin:0 4px;grid-row:2/4}.mx_ToastContainer .mx_Toast_toast,.mx_ToastContainer.mx_ToastContainer_stacked:before{grid-column:1;background-color:#f2f5f8;-webkit-box-shadow:0 4px 20px rgba(0,0,0,.5);box-shadow:0 4px 20px rgba(0,0,0,.5);border-radius:8px}.mx_ToastContainer .mx_Toast_toast{grid-row:1/3;color:#2e2f32;overflow:hidden;display:grid;grid-template-columns:22px 1fr;grid-column-gap:8px;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;grid-row-gap:4px;row-gap:4px;padding:8px}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon:after,.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon:before{content:"";width:22px;height:22px;grid-column:1;grid-row:1;-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-size:100%;background-repeat:no-repeat}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification:after{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);background-color:#2e2f32}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification_warning:before{background-color:#fff;-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);-webkit-mask-size:90%;mask-size:90%}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification_warning:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_secure_backup:after{-webkit-mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);background-color:#2e2f32}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_body,.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_title{grid-column:2}.mx_ToastContainer .mx_Toast_toast:not(.mx_Toast_hasIcon){padding-left:12px}.mx_ToastContainer .mx_Toast_toast:not(.mx_Toast_hasIcon) .mx_Toast_title{grid-column:1/-1}.mx_ToastContainer .mx_Toast_toast .mx_Toast_description,.mx_ToastContainer .mx_Toast_toast .mx_Toast_title{padding-right:8px}.mx_ToastContainer .mx_Toast_toast .mx_Toast_title{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_ToastContainer .mx_Toast_toast .mx_Toast_title h2{grid-column:1/3;grid-row:1;margin:0;font-size:1.5rem;font-weight:600;display:inline;width:auto;vertical-align:middle}.mx_ToastContainer .mx_Toast_toast .mx_Toast_title span{padding-left:8px;float:right;font-size:1.2rem;line-height:2.2rem;color:#61708b}.mx_ToastContainer .mx_Toast_toast .mx_Toast_body{grid-column:1/3;grid-row:2}.mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons{float:right;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons .mx_FormButton{min-width:96px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_ToastContainer .mx_Toast_toast .mx_Toast_description{max-width:272px;overflow:hidden;text-overflow:ellipsis;margin:4px 0 11px;font-size:1.2rem}.mx_ToastContainer .mx_Toast_toast .mx_Toast_description .mx_AccessibleButton_kind_link{font-size:inherit;padding:0}.mx_ToastContainer .mx_Toast_toast .mx_Toast_description a{text-decoration:none}.mx_ToastContainer .mx_Toast_toast .mx_Toast_detail{color:#737d8c}.mx_ToastContainer .mx_Toast_toast .mx_Toast_deviceID{font-size:1rem}.mx_UploadBar{padding-left:65px;position:relative}.mx_UploadBar .mx_ProgressBar{width:calc(100% - 40px)}.mx_UploadBar_filename{margin-top:5px;color:#61708b;position:relative;padding-left:22px;font-size:1.5rem;vertical-align:middle}.mx_UploadBar_filename:before{content:"";height:18px;width:18px;left:0;-webkit-mask-image:url(../../img/element-icons/upload.e2a53e0.svg);mask-image:url(../../img/element-icons/upload.e2a53e0.svg)}.mx_UploadBar_cancel,.mx_UploadBar_filename:before{position:absolute;top:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#61708b}.mx_UploadBar_cancel{right:0;height:16px;width:16px;margin-right:16px;-webkit-mask-image:url(../../img/icons-close.11ff07c.svg);mask-image:url(../../img/icons-close.11ff07c.svg)}.mx_UserMenu{padding-right:6px}.mx_UserMenu.mx_UserMenu_prototype{margin-bottom:6px;padding-right:0}.mx_UserMenu.mx_UserMenu_prototype .mx_UserMenu_headerButtons{margin-right:2px}.mx_UserMenu.mx_UserMenu_prototype:after{content:"";border-bottom:1px solid #2e2f32;opacity:.2;display:block;padding-top:8px}.mx_UserMenu .mx_UserMenu_headerButtons{width:16px;height:16px;position:relative;display:block}.mx_UserMenu .mx_UserMenu_headerButtons:before{content:"";width:16px;height:16px;position:absolute;top:0;left:0;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#8d99a5;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_UserMenu .mx_UserMenu_row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userAvatarContainer{position:relative;margin-right:8px;height:32px;padding:3px 0}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userAvatarContainer .mx_UserMenu_userAvatar{border-radius:32px;-o-object-fit:cover;object-fit:cover}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_subUserName,.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_userName{display:block}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_subUserName{color:#61708b;font-size:1.3rem;line-height:1.8rem;-webkit-box-flex:1;-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userName{font-weight:600;font-size:1.5rem;line-height:2rem;-webkit-box-flex:1;-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd{width:24px;height:24px;margin-right:8px;position:relative}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd:before{content:"";position:absolute;width:24px;height:24px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#61708b}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd.mx_UserMenu_dnd_noisy:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd.mx_UserMenu_dnd_muted:before{-webkit-mask-image:url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);mask-image:url(../../img/element-icons/roomlist/notifications-off.0c57561.svg)}.mx_UserMenu.mx_UserMenu_minimized{padding-right:0}.mx_UserMenu.mx_UserMenu_minimized .mx_UserMenu_userAvatarContainer{margin-right:0}.mx_UserMenu_contextMenu{width:258px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype{padding-bottom:16px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype .mx_UserMenu_contextMenu_header{padding-bottom:0;padding-top:16px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype .mx_UserMenu_contextMenu_header:nth-child(n+2){padding-top:8px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype hr{width:85%;opacity:.2;border:none;border-bottom:1px solid #2e2f32}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu>.mx_IconizedContextMenu_optionList{margin-top:4px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu>.mx_IconizedContextMenu_optionList:before{border:none}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu>.mx_IconizedContextMenu_optionList>.mx_AccessibleButton{padding-top:2px;padding-bottom:2px}.mx_UserMenu_contextMenu.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_AccessibleButton{padding-top:16px;padding-bottom:16px}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header{padding:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:calc(100% - 40px)}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name *{-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name .mx_UserMenu_contextMenu_displayName{font-weight:700;font-size:1.5rem;line-height:2rem}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name .mx_UserMenu_contextMenu_userId{font-size:1.5rem;line-height:2.4rem}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_themeButton{min-width:32px;max-width:32px;width:32px;height:32px;margin-left:8px;border-radius:32px;background-color:#e3e8f0;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts,.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_hostingLink{padding-top:0}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts{display:inline-block}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts>span{font-weight:600;display:block}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts>span+span{margin-top:8px}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts .mx_AccessibleButton_kind_link{font-weight:400;font-size:inherit;padding:0}.mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon{width:16px;height:16px;display:block}.mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon:before{content:"";width:16px;height:16px;display:block;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#2e2f32}.mx_UserMenu_contextMenu .mx_UserMenu_iconHome:before{-webkit-mask-image:url(../../img/element-icons/roomlist/home.1b4edd5.svg);mask-image:url(../../img/element-icons/roomlist/home.1b4edd5.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconHosting:before{-webkit-mask-image:url(../../img/element-icons/brands/element.182040d.svg);mask-image:url(../../img/element-icons/brands/element.182040d.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconBell:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconLock:before{-webkit-mask-image:url(../../img/element-icons/security.66f2fa6.svg);mask-image:url(../../img/element-icons/security.66f2fa6.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconSettings:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconArchive:before{-webkit-mask-image:url(../../img/element-icons/roomlist/archived.226584d.svg);mask-image:url(../../img/element-icons/roomlist/archived.226584d.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconMessage:before{-webkit-mask-image:url(../../img/element-icons/roomlist/feedback.b9a3f53.svg);mask-image:url(../../img/element-icons/roomlist/feedback.b9a3f53.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconSignOut:before{-webkit-mask-image:url(../../img/element-icons/leave.bb917e7.svg);mask-image:url(../../img/element-icons/leave.bb917e7.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconMembers:before{-webkit-mask-image:url(../../img/element-icons/room/members.88c3e93.svg);mask-image:url(../../img/element-icons/room/members.88c3e93.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconInvite:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_ViewSource_separator{clear:both;border-bottom:1px solid #e5e5e5;padding-top:.7em;padding-bottom:.7em}.mx_ViewSource_heading{font-size:1.7rem;font-weight:400;color:#2e2f32;margin-top:.7em}.mx_ViewSource pre{text-align:left;font-size:1.2rem;padding:.5em 1em;word-wrap:break-word;white-space:pre-wrap}.mx_ViewSource_details{margin-top:.8em}.mx_CompleteSecurity_header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CompleteSecurity_headerIcon{width:24px;height:24px;margin-right:4px;position:relative}.mx_CompleteSecurity_heroIcon{width:128px;height:128px;position:relative;margin:0 auto}.mx_CompleteSecurity_body{font-size:1.5rem}.mx_CompleteSecurity_waiting{color:#8d99a5}.mx_CompleteSecurity_actionRow{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin-top:2.8rem}.mx_CompleteSecurity_actionRow .mx_AccessibleButton{-webkit-margin-start:18px;margin-inline-start:18px}.mx_CompleteSecurity_actionRow .mx_AccessibleButton.warning{color:#ff4b55}.mx_Login_submit{vertical-align:middle;border:0;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;padding:7px 1.5em;cursor:pointer;display:inline-block;outline:none;width:100%;margin-top:24px;margin-bottom:24px;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center}.mx_Login_submit:disabled{opacity:.3;cursor:default}.mx_Login_loader{display:inline;position:relative;top:2px;left:8px}.mx_Login_loader .mx_Spinner{display:inline}.mx_Login_loader .mx_Spinner img{width:16px;height:16px}.mx_Login_error{color:#ff4b55;font-weight:700;text-align:center;margin-top:12px;margin-bottom:12px}.mx_Login_error.mx_Login_serverError{text-align:left;font-weight:400}.mx_Login_error.mx_Login_serverError.mx_Login_serverErrorNonFatal{color:#ff8d13}.mx_Login_type_container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#232f32}.mx_Login_type_container .mx_Field{margin:0}.mx_Login_type_label{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_Login_underlinedServerName{width:-webkit-max-content;width:-moz-max-content;width:max-content;border-bottom:1px dashed #0dbd8b}div.mx_AccessibleButton_kind_link.mx_Login_forgot{display:block;margin:0 auto;font-size:inherit;padding:0}div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled{cursor:not-allowed}.mx_AuthBody{width:500px;font-size:1.2rem;color:#61708b;background-color:#fff;border-radius:0 4px 4px 0;padding:25px 60px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_AuthBody h2{font-size:2.4rem;font-weight:600;margin-top:8px;color:#232f32}.mx_AuthBody h3{font-size:1.4rem;font-weight:600;color:#61708b}.mx_AuthBody h3.mx_AuthBody_centered{text-align:center}.mx_AuthBody a:hover,.mx_AuthBody a:link,.mx_AuthBody a:visited{color:#0dbd8b;text-decoration:none}.mx_AuthBody input[type=password],.mx_AuthBody input[type=text]{color:#232f32}.mx_AuthBody .mx_Field input,.mx_AuthBody .mx_Field select{color:#232f32;background-color:#fff}.mx_AuthBody .mx_Field label{color:#232f32}.mx_AuthBody .mx_Field input:not(:-moz-placeholder-shown)+label,.mx_AuthBody .mx_Field textarea:not(:-moz-placeholder-shown)+label{background-color:#fff}.mx_AuthBody .mx_Field input:not(:-ms-input-placeholder)+label,.mx_AuthBody .mx_Field textarea:not(:-ms-input-placeholder)+label{background-color:#fff}.mx_AuthBody .mx_Field_labelAlwaysTopLeft label,.mx_AuthBody .mx_Field input:focus+label,.mx_AuthBody .mx_Field input:not(:placeholder-shown)+label,.mx_AuthBody .mx_Field select+label,.mx_AuthBody .mx_Field textarea:focus+label,.mx_AuthBody .mx_Field textarea:not(:placeholder-shown)+label{background-color:#fff}.mx_AuthBody input.error{color:#ff4b55}.mx_AuthBody .mx_Field input{-webkit-box-sizing:border-box;box-sizing:border-box}.mx_AuthBody .mx_Field_select:before{background-color:#232f32}.mx_AuthBody .mx_Dropdown{color:#232f32}.mx_AuthBody .mx_Dropdown_arrow{background:#232f32}.mx_AuthBody .mx_Dropdown_menu{background-color:#fff}.mx_AuthBody .mx_Dropdown_menu .mx_Dropdown_option_highlight{background-color:#ddd}.mx_AuthBody_fieldRow{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:10px}.mx_AuthBody_fieldRow>.mx_Field{margin:0 5px}.mx_AuthBody_fieldRow>.mx_Field:first-child{margin-left:0}.mx_AuthBody_fieldRow>.mx_Field:last-child{margin-right:0}.mx_AuthBody_paddedFooter{height:80px;padding-top:28px;text-align:center}.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_title{margin-top:16px;font-size:1.5rem;line-height:2.4rem}.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_title .mx_InlineSpinner img{vertical-align:sub;margin-right:5px}.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_subtitle{margin-top:8px;font-size:1rem;line-height:1.4rem}.mx_AuthBody_changeFlow{display:block;text-align:center;width:100%}.mx_AuthBody_changeFlow>a{font-weight:600}.mx_SSOButtons+.mx_AuthBody_changeFlow{margin-top:24px}.mx_AuthBody_spinner{margin:1em 0}@media only screen and (max-width:480px){.mx_AuthBody{border-radius:4px;width:auto;max-width:500px;padding:10px}}.mx_AuthButtons{min-height:24px;height:unset!important;padding-top:13px!important;padding-bottom:14px!important;-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.mx_AuthButtons_loginButton_wrapper{text-align:center;width:100%}.mx_AuthButtons_loginButton,.mx_AuthButtons_registerButton{margin-top:3px;height:40px;border:0;border-radius:40px;margin-left:4px;margin-right:4px;min-width:80px;background-color:#0dbd8b;color:#fff;cursor:pointer;font-size:1.5rem;padding:0 11px;word-break:break-word}.mx_AuthFooter{text-align:center;width:100%;font-size:1.4rem;opacity:.72;padding:20px 0;background:-webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.8)));background:linear-gradient(transparent,rgba(0,0,0,.8))}.mx_AuthFooter a:hover,.mx_AuthFooter a:link,.mx_AuthFooter a:visited{color:#fff;margin:0 22px}.mx_AuthHeader{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:206px;padding:25px;-webkit-box-sizing:border-box;box-sizing:border-box}@media only screen and (max-width:480px){.mx_AuthHeader{display:none}}.mx_AuthHeaderLogo{margin-top:15px;-webkit-box-flex:1;-ms-flex:1;flex:1;padding:0 25px}.mx_AuthHeaderLogo img{width:100%}@media only screen and (max-width:480px){.mx_AuthHeaderLogo{display:none}}.mx_AuthPage{width:100%;min-height:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background-color:#2e3649}.mx_AuthPage,.mx_AuthPage_modal{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_AuthPage_modal{margin:100px auto auto;border-radius:4px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.33);box-shadow:0 2px 4px 0 rgba(0,0,0,.33);background-color:hsla(0,0%,96.1%,.9)}@media only screen and (max-width:480px){.mx_AuthPage_modal{margin-top:0}}.mx_CompleteSecurityBody{width:600px;color:#232f32;background-color:#fff;border-radius:4px;padding:20px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_CompleteSecurityBody h2{font-size:2.4rem;font-weight:600;margin-top:0}.mx_CompleteSecurityBody h3{font-size:1.4rem;font-weight:600}.mx_CompleteSecurityBody a:hover,.mx_CompleteSecurityBody a:link,.mx_CompleteSecurityBody a:visited{color:#0dbd8b;text-decoration:none}.mx_CountryDropdown .mx_Dropdown_input .mx_Dropdown_option{padding:0 3px}.mx_CountryDropdown .mx_Dropdown_arrow{padding-right:3px}.mx_CountryDropdown_shortOption{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:100%}.mx_CountryDropdown_option,.mx_CountryDropdown_shortOption{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CountryDropdown_option{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_InteractiveAuthEntryComponents_emailWrapper{padding-right:100px;position:relative;margin-top:32px;margin-bottom:32px}.mx_InteractiveAuthEntryComponents_emailWrapper:after,.mx_InteractiveAuthEntryComponents_emailWrapper:before{position:absolute;width:116px;height:116px;content:"";right:-10px}.mx_InteractiveAuthEntryComponents_emailWrapper:before{background-color:rgba(244,246,250,.91);border-radius:50%;top:-20px}.mx_InteractiveAuthEntryComponents_emailWrapper:after{background-image:url(../../img/element-icons/email-prompt.1d04dfe.svg);background-repeat:no-repeat;background-position:50%;background-size:contain;top:-25px}.mx_InteractiveAuthEntryComponents_msisdnWrapper{text-align:center}.mx_InteractiveAuthEntryComponents_msisdnEntry{font-size:200%;font-weight:700;border:1px solid #c7c7c7;border-radius:3px;width:6em}.mx_InteractiveAuthEntryComponents_msisdnEntry:focus{border:1px solid #0dbd8b}.mx_InteractiveAuthEntryComponents_msisdnSubmit{margin-top:4px;margin-bottom:5px}.mx_InteractiveAuthEntryComponents_termsSubmit{margin-top:20px;margin-bottom:5px;display:block;width:100%}.mx_InteractiveAuthEntryComponents_msisdnSubmit:disabled{background-color:#747474;cursor:default}.mx_InteractiveAuthEntryComponents_termsSubmit:disabled{background-color:#92caad;cursor:default}.mx_InteractiveAuthEntryComponents_termsPolicy{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_InteractiveAuthEntryComponents_passwordSection{width:300px}.mx_InteractiveAuthEntryComponents_sso_buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin-top:20px}.mx_InteractiveAuthEntryComponents_sso_buttons .mx_AccessibleButton{margin-left:5px}.mx_AuthBody_language{width:100%}.mx_AuthBody_language .mx_Dropdown_input{border:none;font-size:1.4rem;font-weight:600;color:#4e5054;width:auto}.mx_AuthBody_language .mx_Dropdown_arrow{background:#4e5054}progress.mx_PassphraseField_progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;border:0;height:4px;position:absolute;top:-12px;border-radius:"2px"}progress.mx_PassphraseField_progress::-moz-progress-bar{border-radius:"2px"}progress.mx_PassphraseField_progress::-webkit-progress-bar,progress.mx_PassphraseField_progress::-webkit-progress-value{border-radius:"2px"}progress.mx_PassphraseField_progress{color:#ff4b55}progress.mx_PassphraseField_progress::-moz-progress-bar{background-color:#ff4b55}progress.mx_PassphraseField_progress::-webkit-progress-value{background-color:#ff4b55}progress.mx_PassphraseField_progress[value="2"],progress.mx_PassphraseField_progress[value="3"]{color:#ff812d}progress.mx_PassphraseField_progress[value="2"]::-moz-progress-bar,progress.mx_PassphraseField_progress[value="3"]::-moz-progress-bar{background-color:#ff812d}progress.mx_PassphraseField_progress[value="2"]::-webkit-progress-value,progress.mx_PassphraseField_progress[value="3"]::-webkit-progress-value{background-color:#ff812d}progress.mx_PassphraseField_progress[value="4"]{color:#0dbd8b}progress.mx_PassphraseField_progress[value="4"]::-moz-progress-bar{background-color:#0dbd8b}progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value{background-color:#0dbd8b}.mx_Welcome{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_Welcome.mx_WelcomePage_registrationDisabled .mx_ButtonCreateAccount{display:none}.mx_Welcome .mx_AuthBody_language{width:160px;margin-bottom:10px}.mx_BaseAvatar{position:relative;display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_BaseAvatar_initial{position:absolute;left:0;color:#fff;text-align:center;speak:none;pointer-events:none;font-weight:400}.mx_BaseAvatar_image{-o-object-fit:cover;object-fit:cover;border-radius:125px;vertical-align:top;background-color:#fff}.mx_DecoratedRoomAvatar,.mx_ExtraTile{position:relative}.mx_DecoratedRoomAvatar.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar,.mx_ExtraTile.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar{-webkit-mask-image:url(../../img/element-icons/roomlist/decorated-avatar-mask.76c407f.svg);mask-image:url(../../img/element-icons/roomlist/decorated-avatar-mask.76c407f.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon{position:absolute;bottom:-2px;right:-2px;margin:4px;width:8px;height:8px;border-radius:50%}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon:before{content:"";width:8px;height:8px;position:absolute;border-radius:8px}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_globe:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_globe:before{-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#737d8c;-webkit-mask-image:url(../../img/globe.8201f08.svg);mask-image:url(../../img/globe.8201f08.svg)}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_offline:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_offline:before{background-color:#e3e8f0}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_online:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_online:before{background-color:#0dbd8b}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_away:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_away:before{background-color:#d9b072}.mx_DecoratedRoomAvatar .mx_NotificationBadge,.mx_DecoratedRoomAvatar .mx_RoomTile_badgeContainer,.mx_ExtraTile .mx_NotificationBadge,.mx_ExtraTile .mx_RoomTile_badgeContainer{position:absolute;top:0;right:0;height:18px;width:18px}.mx_MessageComposer_avatar .mx_BaseAvatar{padding:2px;border:1px solid transparent;border-radius:100%}.mx_MessageComposer_avatar .mx_BaseAvatar_initial{left:2px}.mx_MemberStatusMessageAvatar_hasStatus .mx_BaseAvatar{border-color:#0dbd8b}@-webkit-keyframes shadow-pulse{0%{-webkit-box-shadow:0 0 0 0 rgba(13,189,139,.2);box-shadow:0 0 0 0 rgba(13,189,139,.2)}to{-webkit-box-shadow:0 0 0 6px rgba(13,189,139,0);box-shadow:0 0 0 6px rgba(13,189,139,0)}}@keyframes shadow-pulse{0%{-webkit-box-shadow:0 0 0 0 rgba(13,189,139,.2);box-shadow:0 0 0 0 rgba(13,189,139,.2)}to{-webkit-box-shadow:0 0 0 6px rgba(13,189,139,0);box-shadow:0 0 0 6px rgba(13,189,139,0)}}.mx_PulsedAvatar img{-webkit-animation:shadow-pulse 1s infinite;animation:shadow-pulse 1s infinite}.mx_WidgetAvatar{border-radius:4px}.mx_BetaCard{margin-bottom:20px;padding:24px;background-color:#f4f6fa;border-radius:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_BetaCard>div .mx_BetaCard_title{font-weight:600;font-size:1.8rem;line-height:2.2rem;color:#2e2f32;margin:4px 0 14px}.mx_BetaCard>div .mx_BetaCard_title .mx_BetaCard_betaPill{margin-left:12px}.mx_BetaCard>div .mx_BetaCard_caption{font-size:1.5rem;line-height:2rem;color:#737d8c;margin-bottom:20px}.mx_BetaCard>div .mx_AccessibleButton{display:block;margin:12px 0;padding:7px 40px;width:auto}.mx_BetaCard>div .mx_BetaCard_disclaimer{font-size:1.2rem;line-height:1.5rem;color:#737d8c;margin-top:20px}.mx_BetaCard>img{margin:auto 0 auto 20px;width:300px;-o-object-fit:contain;object-fit:contain;height:100%}.mx_BetaCard_betaPill{background-color:#238cf5;padding:4px 10px;border-radius:8px;text-transform:uppercase;font-size:12px;line-height:15px;color:#fff;display:inline-block;vertical-align:text-bottom}.mx_BetaCard_betaPill.mx_BetaCard_betaPill_clickable{cursor:pointer}.mx_BetaDot{border-radius:50%;margin:10px;height:12px;width:12px;-webkit-transform:scale(1);transform:scale(1);background:#238cf5;-webkit-box-shadow:0 0 0 0 #238cf5;box-shadow:0 0 0 0 #238cf5;-webkit-animation:mx_Beta_bluePulse 2s infinite;animation:mx_Beta_bluePulse 2s infinite;-webkit-animation-iteration-count:20;animation-iteration-count:20}@-webkit-keyframes mx_Beta_bluePulse{0%{-webkit-transform:scale(.95);transform:scale(.95);-webkit-box-shadow:0 0 0 0 rgba(35,140,245,.7);box-shadow:0 0 0 0 rgba(35,140,245,.7)}70%{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:0 0 0 10px rgba(35,140,245,0);box-shadow:0 0 0 10px rgba(35,140,245,0)}to{-webkit-transform:scale(.95);transform:scale(.95);-webkit-box-shadow:0 0 0 0 rgba(35,140,245,0);box-shadow:0 0 0 0 rgba(35,140,245,0)}}@keyframes mx_Beta_bluePulse{0%{-webkit-transform:scale(.95);transform:scale(.95);-webkit-box-shadow:0 0 0 0 rgba(35,140,245,.7);box-shadow:0 0 0 0 rgba(35,140,245,.7)}70%{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:0 0 0 10px rgba(35,140,245,0);box-shadow:0 0 0 10px rgba(35,140,245,0)}to{-webkit-transform:scale(.95);transform:scale(.95);-webkit-box-shadow:0 0 0 0 rgba(35,140,245,0);box-shadow:0 0 0 0 rgba(35,140,245,0)}}.mx_CallContextMenu_item{width:205px;height:40px;padding-left:16px;line-height:40px;vertical-align:center}.mx_IconizedContextMenu{min-width:146px}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList>*{padding-left:20px;padding-right:20px}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_optionList_notFirst:before,.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:nth-child(n+2):before{border-top:1px solid #2e2f32;opacity:.1;content:"";width:100%;position:absolute;left:0}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:first-child .mx_AccessibleButton:first-child{border-radius:8px 8px 0 0}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:last-child .mx_AccessibleButton:last-child{border-radius:0 0 8px 8px}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton{padding-top:12px;padding-bottom:12px;text-decoration:none;color:#2e2f32;font-size:1.5rem;line-height:2.4rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton:hover{background-color:#f5f8fa}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_AccessibleButton_disabled{opacity:.5;cursor:not-allowed}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton .mx_IconizedContextMenu_icon,.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton img{width:16px;min-width:16px;max-width:16px}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton span.mx_IconizedContextMenu_label{width:100%;-webkit-box-flex:1;-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton .mx_IconizedContextMenu_icon+.mx_IconizedContextMenu_label{padding-left:14px}.mx_IconizedContextMenu .mx_IconizedContextMenu_icon{position:relative;width:16px;height:16px}.mx_IconizedContextMenu .mx_IconizedContextMenu_icon:before{content:"";width:16px;height:16px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#2e2f32}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_AccessibleButton{color:#ff4b55!important}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_IconizedContextMenu_icon:before{background-color:#ff4b55}.mx_IconizedContextMenu .mx_IconizedContextMenu_active.mx_AccessibleButton,.mx_IconizedContextMenu .mx_IconizedContextMenu_active .mx_AccessibleButton{color:#0dbd8b!important}.mx_IconizedContextMenu .mx_IconizedContextMenu_active .mx_IconizedContextMenu_icon:before{background-color:#0dbd8b}.mx_IconizedContextMenu.mx_IconizedContextMenu_compact .mx_IconizedContextMenu_optionList>*{padding:8px 16px 8px 11px}.mx_IconizedContextMenu .mx_IconizedContextMenu_checked{margin-left:16px;margin-right:-5px}.mx_IconizedContextMenu .mx_IconizedContextMenu_checked:before{-webkit-mask-image:url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);mask-image:url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg)}.mx_MessageContextMenu{padding:6px}.mx_MessageContextMenu_field{display:block;padding:3px 6px;cursor:pointer;white-space:nowrap}.mx_MessageContextMenu_field.mx_MessageContextMenu_fieldSet{font-weight:700}.mx_StatusMessageContextMenu{padding:10px}.mx_StatusMessageContextMenu_form{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}input.mx_StatusMessageContextMenu_message{border-radius:4px;border:1px solid #e7e7e7;padding:6.5px 11px;background-color:#fff;font-weight:400;margin:0 0 10px}.mx_StatusMessageContextMenu_message::-webkit-input-placeholder{color:#61708b}.mx_StatusMessageContextMenu_message::-moz-placeholder{color:#61708b}.mx_StatusMessageContextMenu_message:-ms-input-placeholder{color:#61708b}.mx_StatusMessageContextMenu_message::-ms-input-placeholder{color:#61708b}.mx_StatusMessageContextMenu_message::placeholder{color:#61708b}.mx_StatusMessageContextMenu_actionContainer{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_StatusMessageContextMenu_clear,.mx_StatusMessageContextMenu_submit{vertical-align:middle;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;cursor:pointer;display:inline-block;outline:none;-ms-flex-item-align:start;align-self:start;font-size:1.2rem;padding:6px 1em;border:1px solid transparent;margin-right:10px}.mx_StatusMessageContextMenu_submit[disabled]{opacity:.49}.mx_StatusMessageContextMenu_clear{color:#ff4b55;background-color:transparent;border:1px solid #ff4b55}.mx_StatusMessageContextMenu_actionContainer .mx_Spinner{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_TagTileContextMenu_item{padding:8px 20px 8px 8px;cursor:pointer;white-space:nowrap;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1.6rem}.mx_TagTileContextMenu_item:before{content:"";height:15px;width:15px;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;margin-right:8px}.mx_TagTileContextMenu_viewCommunity:before{-webkit-mask-image:url(../../img/element-icons/view-community.0cad1a5.svg);mask-image:url(../../img/element-icons/view-community.0cad1a5.svg)}.mx_TagTileContextMenu_hideCommunity:before{-webkit-mask-image:url(../../img/element-icons/hide.2b52315.svg);mask-image:url(../../img/element-icons/hide.2b52315.svg)}.mx_TagTileContextMenu_separator{margin-top:0;margin-bottom:0;border-style:none;border-top:1px solid;border-color:#e7e7e7}.mx_AddExistingToSpaceDialog_wrapper .mx_Dialog{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_AddExistingToSpace .mx_SearchBox{margin:0 0 15px;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0}.mx_AddExistingToSpace .mx_AddExistingToSpace_content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_AddExistingToSpace .mx_AddExistingToSpace_noResults{display:block;margin-top:24px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section:not(:first-child){margin-top:24px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section>h3{margin:0;color:#737d8c;font-size:1.2rem;font-weight:600;line-height:1.5rem}.mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AddExistingToSpace_entry{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AddExistingToSpace_entry .mx_DecoratedRoomAvatar{margin-right:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AddExistingToSpace_entry .mx_AddExistingToSpace_entry_name{font-size:1.5rem;line-height:30px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AddExistingToSpace_entry .mx_Checkbox{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_AddExistingToSpace .mx_AddExistingToSpace_section_spaces .mx_BaseAvatar{margin-right:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section_spaces .mx_BaseAvatar_image{border-radius:8px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section_experimental{position:relative;border-radius:8px;margin:12px 0;padding:8px 8px 8px 42px;background-color:#f3f8fd;font-size:1.2rem;line-height:1.5rem;color:#737d8c}.mx_AddExistingToSpace .mx_AddExistingToSpace_section_experimental:before{content:"";position:absolute;left:10px;top:calc(50% - 8px);height:16px;width:16px;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);-webkit-mask-position:center;mask-position:center}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:20px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;font-size:1.2rem;line-height:1.5rem;color:#737d8c}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_ProgressBar{height:8px;width:100%;border-radius:8px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_ProgressBar::-moz-progress-bar{border-radius:8px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_ProgressBar::-webkit-progress-bar,.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_ProgressBar::-webkit-progress-value{border-radius:8px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_AddExistingToSpace_progressText{margin-top:8px;font-size:1.5rem;line-height:2.4rem;color:#2e2f32}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span>*{vertical-align:middle}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error{padding-left:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error>img{-ms-flex-item-align:center;align-self:center}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error .mx_AddExistingToSpace_errorHeading{font-weight:600;font-size:1.5rem;line-height:1.8rem;color:#ff4b55}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error .mx_AddExistingToSpace_errorCaption{margin-top:4px;font-size:1.2rem;line-height:1.5rem;color:#2e2f32}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AccessibleButton{display:inline-block;-ms-flex-item-align:center;align-self:center}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AccessibleButton_kind_primary{padding:8px 36px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_retryButton{margin-left:12px;padding-left:24px;position:relative}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_retryButton:before{content:"";position:absolute;background-color:#2e2f32;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/retry.6cd23ad.svg);mask-image:url(../../img/element-icons/retry.6cd23ad.svg);width:18px;height:18px;left:0}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AccessibleButton_kind_link{padding:0}.mx_AddExistingToSpaceDialog{width:480px;color:#2e2f32;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;min-height:0;height:80vh}.mx_AddExistingToSpaceDialog,.mx_AddExistingToSpaceDialog .mx_Dialog_title{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_BaseAvatar_image{border-radius:8px;margin:0;vertical-align:unset}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_BaseAvatar{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin:auto 16px auto 5px;vertical-align:middle}.mx_AddExistingToSpaceDialog .mx_Dialog_title>div>h1{font-weight:600;font-size:1.8rem;line-height:2.2rem;margin:0}.mx_AddExistingToSpaceDialog .mx_Dialog_title>div .mx_AddExistingToSpaceDialog_onlySpace{color:#737d8c;font-size:1.5rem;line-height:2.4rem}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input{border:none}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input>.mx_Dropdown_option{padding-left:0;-webkit-box-flex:unset;-ms-flex:unset;flex:unset;height:unset;color:#737d8c;font-size:1.5rem;line-height:2.4rem}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input>.mx_Dropdown_option .mx_BaseAvatar{display:none}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input .mx_Dropdown_menu .mx_AddExistingToSpaceDialog_dropdownOptionActive{color:#0dbd8b;padding-right:32px;position:relative}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input .mx_Dropdown_menu .mx_AddExistingToSpaceDialog_dropdownOptionActive:before{content:"";width:20px;height:20px;top:8px;right:0;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#0dbd8b;-webkit-mask-image:url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);mask-image:url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg)}.mx_AddExistingToSpaceDialog .mx_AddExistingToSpace{display:contents}.mx_AddressPickerDialog a:hover,.mx_AddressPickerDialog a:link,.mx_AddressPickerDialog a:visited{color:#0dbd8b;text-decoration:none}.mx_AddressPickerDialog_input,.mx_AddressPickerDialog_input:focus{height:26px;font-size:1.4rem;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;padding-left:12px;padding-right:12px;margin:0!important;border:0!important;outline:0!important;width:1000%;resize:none;overflow:hidden;vertical-align:middle;-webkit-box-sizing:border-box;box-sizing:border-box;word-wrap:nowrap}.mx_AddressPickerDialog .mx_Dialog_content{min-height:50px}.mx_AddressPickerDialog_inputContainer{border-radius:3px;border:1px solid #e7e7e7;line-height:3.6rem;padding:1px 4px;max-height:150px;overflow-x:hidden;overflow-y:auto}.mx_AddressPickerDialog_error{margin-top:10px;color:#ff4b55}.mx_AddressPickerDialog_cancel{position:absolute;right:11px;top:13px;cursor:pointer}.mx_AddressPickerDialog_cancel object{pointer-events:none}.mx_AddressPickerDialog_identityServer{margin-top:1em}.mx_AnalyticsModal table{margin:10px 0}.mx_BetaFeedbackDialog .mx_BetaFeedbackDialog_subheading{color:#2e2f32;font-size:1.4rem;line-height:2rem;margin-bottom:24px}.mx_BetaFeedbackDialog .mx_AccessibleButton_kind_link{padding:0;font-size:inherit;line-height:inherit}.mx_BugReportDialog .mx_BugReportDialog_download .mx_AccessibleButton_kind_link{padding-left:0}.mx_ChangelogDialog_content{max-height:300px;overflow:auto}.mx_ChangelogDialog_li{padding:.2em}.mx_ChatCreateOrReuseDialog .mx_ChatCreateOrReuseDialog_tiles{margin-top:24px}.mx_ChatCreateOrReuseDialog .mx_Dialog_content{margin-bottom:24px;min-height:100px}.mx_ChatCreateOrReuseDialog .mx_RoomTile_badge{display:none}.mx_ChatCreateOrReuseDialog_profile{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_ChatCreateOrReuseDialog_profile_name{padding:14px}.mx_CommunityPrototypeInviteDialog.mx_Dialog_fixedWidth{width:360px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content{margin-bottom:0}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_people{position:relative;margin-bottom:4px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_people .mx_AccessibleButton{display:inline-block;background-color:#ddd;border-radius:4px;padding:3px 5px;font-size:1.2rem;float:right}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_morePeople{margin-top:8px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person{position:relative;margin-top:4px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person>*{vertical-align:middle}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_Checkbox{position:absolute;right:0;top:calc(50% - 8px);width:16px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_CommunityPrototypeInviteDialog_personIdentifiers{display:inline-block}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_CommunityPrototypeInviteDialog_personIdentifiers>*{display:block}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_CommunityPrototypeInviteDialog_personIdentifiers .mx_CommunityPrototypeInviteDialog_personName{font-weight:600;font-size:1.4rem;color:#2e2f32;margin-left:7px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_CommunityPrototypeInviteDialog_personIdentifiers .mx_CommunityPrototypeInviteDialog_personId{font-size:1.2rem;color:#61708b;margin-left:7px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_primaryButton{display:block;font-size:1.3rem;line-height:20px;height:20px;margin-top:24px}.mx_ConfirmUserActionDialog .mx_Dialog_content{min-height:48px;margin-bottom:24px}.mx_ConfirmUserActionDialog_avatar{float:left;margin-right:20px;margin-top:-2px}.mx_ConfirmUserActionDialog_name{font-size:1.8rem}.mx_ConfirmUserActionDialog_userId{font-size:1.3rem}.mx_ConfirmUserActionDialog_reasonField{font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#2e2f32;background-color:#fff;border-radius:3px;border:1px solid #e7e7e7;line-height:3.6rem;padding:1px 16px;margin-bottom:24px;width:90%}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin-bottom:12px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName{-ms-flex-preferred-size:66.66%;flex-basis:66.66%;padding-right:100px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_Field input{font-size:1.6rem;line-height:2rem}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_subtext{display:block;color:#61708b;margin-bottom:16px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_subtext:last-child{margin-top:16px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_subtext.mx_CreateCommunityPrototypeDialog_subtext_error{color:#ff4b55}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_communityId{position:relative}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_communityId .mx_InfoTooltip{float:right}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_AccessibleButton{display:block;height:32px;font-size:1.6rem;line-height:32px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar{-ms-flex-preferred-size:33.33%;flex-basis:33.33%}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer{margin-top:12px;margin-bottom:20px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer .mx_CreateCommunityPrototypeDialog_avatar,.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer .mx_CreateCommunityPrototypeDialog_placeholderAvatar{width:96px;height:96px;border-radius:96px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer .mx_CreateCommunityPrototypeDialog_placeholderAvatar{background-color:#368bd6}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer .mx_CreateCommunityPrototypeDialog_placeholderAvatar:before{display:inline-block;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:96px;mask-size:96px;width:96px;height:96px;-webkit-mask-position:center;mask-position:center;content:"";vertical-align:middle;-webkit-mask-image:url(../../img/element-icons/add-photo.c0b4c3b.svg);mask-image:url(../../img/element-icons/add-photo.c0b4c3b.svg)}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_tip>b,.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_tip>span{display:block;color:#61708b}.mx_CreateGroupDialog_inputRow{margin-top:10px;margin-bottom:10px}.mx_CreateGroupDialog_label{text-align:left;padding-bottom:12px}.mx_CreateGroupDialog_input{font-size:1.5rem;border-radius:3px;border:1px solid #e7e7e7;padding:9px;color:#2e2f32;background-color:#fff}.mx_CreateGroupDialog_input_hasPrefixAndSuffix{border-radius:0}.mx_CreateGroupDialog_input_group{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_CreateGroupDialog_prefix,.mx_CreateGroupDialog_suffix{padding:0 5px;line-height:3.7rem;background-color:#e3e8f0;border:1px solid #e7e7e7;text-align:center}.mx_CreateGroupDialog_prefix{border-right:0;border-radius:3px 0 0 3px}.mx_CreateGroupDialog_suffix{border-left:0;border-radius:0 3px 3px 0}.mx_CreateRoomDialog_details{margin-top:15px}.mx_CreateRoomDialog_details .mx_CreateRoomDialog_details_summary{outline:none;list-style:none;font-weight:600;cursor:pointer;color:#0dbd8b}.mx_CreateRoomDialog_details .mx_CreateRoomDialog_details_summary::-webkit-details-marker{display:none}.mx_CreateRoomDialog_details>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;margin:5px 0}.mx_CreateRoomDialog_details>div input[type=checkbox]{margin-right:10px}.mx_CreateRoomDialog_label{text-align:left;padding-bottom:12px}.mx_CreateRoomDialog_input_container{padding-right:20px}.mx_CreateRoomDialog_input{font-size:1.5rem;border-radius:3px;border:1px solid #e7e7e7;padding:9px;color:#2e2f32;background-color:#fff;width:100%}.mx_CreateRoomDialog_aliasContainer{display:-webkit-box;display:-ms-flexbox;display:flex;margin:10px 0}.mx_CreateRoomDialog_aliasContainer .mx_RoomAliasField{margin:0}.mx_CreateRoomDialog.mx_Dialog_fixedWidth{width:450px}.mx_CreateRoomDialog .mx_Dialog_content{margin-bottom:40px}.mx_CreateRoomDialog .mx_Field_input label,.mx_CreateRoomDialog p{color:#61708b}.mx_CreateRoomDialog .mx_SettingsFlag{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_CreateRoomDialog .mx_SettingsFlag_label{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0;font-weight:600}.mx_CreateRoomDialog .mx_ToggleSwitch{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-left:30px}.mx_CreateRoomDialog .mx_CreateRoomDialog_topic{margin-bottom:36px}.mx_CreateRoomDialog .mx_Dialog_content>.mx_SettingsFlag{margin-top:24px}.mx_CreateRoomDialog p{margin:0 85px 0 0;font-size:1.2rem}.mx_DeactivateAccountDialog .mx_Dialog_content{margin-bottom:30px}.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section{margin-top:60px}.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section .mx_Field{width:300px}.mx_DevTools_content{margin:10px 0}.mx_DevTools_ServersInRoomList_button{cursor:default!important}.mx_DevTools_RoomStateExplorer_query{margin-bottom:10px}.mx_DevTools_RoomStateExplorer_button,.mx_DevTools_ServersInRoomList_button{margin-bottom:10px;width:100%}.mx_DevTools_label_left{float:left}.mx_DevTools_label_right{float:right}.mx_DevTools_label_bottom{clear:both;border-bottom:1px solid #e5e5e5}.mx_DevTools_inputRow{display:table-row}.mx_DevTools_inputLabelCell{display:table-cell;font-weight:700;padding-right:24px}.mx_DevTools_inputCell{display:table-cell;width:240px}.mx_DevTools_inputCell input{display:inline-block;border:0;border-bottom:1px solid hsla(0,0%,59.2%,.5);padding:0;width:240px;color:rgba(74,74,74,.9);font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.6rem}.mx_DevTools_textarea{font-size:1.2rem;max-width:684px;min-height:250px;padding:10px}.mx_DevTools_eventTypeStateKeyGroup{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mx_DevTools_content .mx_Field_input:first-of-type{margin-right:42px}.mx_DevTools_tgl{display:none}.mx_DevTools_tgl,.mx_DevTools_tgl *,.mx_DevTools_tgl+.mx_DevTools_tgl-btn,.mx_DevTools_tgl:after,.mx_DevTools_tgl :after,.mx_DevTools_tgl:before,.mx_DevTools_tgl :before{-webkit-box-sizing:border-box;box-sizing:border-box}.mx_DevTools_tgl+.mx_DevTools_tgl-btn::-moz-selection,.mx_DevTools_tgl::-moz-selection,.mx_DevTools_tgl ::-moz-selection,.mx_DevTools_tgl:after::-moz-selection,.mx_DevTools_tgl :after::-moz-selection,.mx_DevTools_tgl:before::-moz-selection,.mx_DevTools_tgl :before::-moz-selection{background:none}.mx_DevTools_tgl+.mx_DevTools_tgl-btn::selection,.mx_DevTools_tgl::selection,.mx_DevTools_tgl ::selection,.mx_DevTools_tgl:after::selection,.mx_DevTools_tgl :after::selection,.mx_DevTools_tgl:before::selection,.mx_DevTools_tgl :before::selection{background:none}.mx_DevTools_tgl+.mx_DevTools_tgl-btn{outline:0;display:block;width:7em;height:2em;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_DevTools_tgl+.mx_DevTools_tgl-btn:after,.mx_DevTools_tgl+.mx_DevTools_tgl-btn:before{position:relative;display:block;content:"";width:50%;height:100%}.mx_DevTools_tgl+.mx_DevTools_tgl-btn:after{left:0}.mx_DevTools_tgl+.mx_DevTools_tgl-btn:before{display:none}.mx_DevTools_tgl:checked+.mx_DevTools_tgl-btn:after{left:50%}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn{padding:2px;-webkit-transition:all .2s ease;transition:all .2s ease;font-family:sans-serif;-webkit-perspective:100px;perspective:100px}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:after,.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:before{display:inline-block;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%;text-align:center;position:absolute;line-height:2em;font-weight:700;color:#fff;top:0;left:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:4px}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:after{content:attr(data-tg-on);background:#02c66f;-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:before{background:#ff3a19;content:attr(data-tg-off)}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:active:before{-webkit-transform:rotateY(-20deg);transform:rotateY(-20deg)}.mx_DevTools_tgl-flip:checked+.mx_DevTools_tgl-btn:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.mx_DevTools_tgl-flip:checked+.mx_DevTools_tgl-btn:after{-webkit-transform:rotateY(0);transform:rotateY(0);left:0;background:#7fc6a6}.mx_DevTools_tgl-flip:checked+.mx_DevTools_tgl-btn:active:after{-webkit-transform:rotateY(20deg);transform:rotateY(20deg)}.mx_DevTools_VerificationRequest{border:1px solid #ccc;border-radius:3px;padding:1px 5px;margin-bottom:6px;font-family:Inconsolata,Twemoji,Apple Color Emoji,Segoe UI Emoji,Courier,monospace,Noto Color Emoji}.mx_DevTools_VerificationRequest dl{display:grid;grid-template-columns:-webkit-max-content auto;grid-template-columns:max-content auto;margin:0}.mx_DevTools_VerificationRequest dd{grid-column-start:2}.mx_DevTools_VerificationRequest dd:empty{color:#666}.mx_DevTools_VerificationRequest dd:empty:after{content:"(empty)"}.mx_DevTools_VerificationRequest dt{font-weight:700;grid-column-start:1}.mx_DevTools_VerificationRequest dt:after{content:":"}.mx_DevTools_SettingsExplorer table{width:100%;table-layout:fixed;border-collapse:collapse}.mx_DevTools_SettingsExplorer table th{border-bottom:1px solid #0dbd8b;text-align:left}.mx_DevTools_SettingsExplorer table td,.mx_DevTools_SettingsExplorer table th{width:360px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_DevTools_SettingsExplorer table td+td,.mx_DevTools_SettingsExplorer table th+th{width:auto}.mx_DevTools_SettingsExplorer table tr:hover{background-color:rgba(13,189,139,.5)}.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_mutable{background-color:#0dbd8b}.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_immutable{background-color:#ff4b55}.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_edit{float:right;margin-right:16px}.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_warning{border:2px solid #ff4b55;border-radius:4px;padding:4px;margin-bottom:8px}.mx_EditCommunityPrototypeDialog.mx_Dialog_fixedWidth{width:360px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content{margin-bottom:12px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_AccessibleButton.mx_AccessibleButton_kind_primary{display:block;height:32px;font-size:1.6rem;line-height:32px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_rowAvatar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer{margin-top:20px;margin-bottom:20px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer .mx_EditCommunityPrototypeDialog_avatar,.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer .mx_EditCommunityPrototypeDialog_placeholderAvatar{width:96px;height:96px;border-radius:96px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer .mx_EditCommunityPrototypeDialog_placeholderAvatar{background-color:#368bd6}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer .mx_EditCommunityPrototypeDialog_placeholderAvatar:before{display:inline-block;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:96px;mask-size:96px;width:96px;height:96px;-webkit-mask-position:center;mask-position:center;content:"";vertical-align:middle;-webkit-mask-image:url(../../img/element-icons/add-photo.c0b4c3b.svg);mask-image:url(../../img/element-icons/add-photo.c0b4c3b.svg)}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_tip{margin-left:20px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_tip>b,.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_tip>span{display:block;color:#61708b}.mx_FeedbackDialog hr{margin:24px 0;border-color:#e7e7e7}.mx_FeedbackDialog .mx_Dialog_content{margin-bottom:24px}.mx_FeedbackDialog .mx_Dialog_content>h2{margin-bottom:32px}.mx_FeedbackDialog .mx_FeedbackDialog_section{position:relative;padding-left:52px}.mx_FeedbackDialog .mx_FeedbackDialog_section>p{color:#8d99a5}.mx_FeedbackDialog .mx_FeedbackDialog_section .mx_AccessibleButton_kind_link{padding:0;font-size:inherit}.mx_FeedbackDialog .mx_FeedbackDialog_section .mx_AccessibleButton_kind_link,.mx_FeedbackDialog .mx_FeedbackDialog_section a{color:#0dbd8b;text-decoration:underline}.mx_FeedbackDialog .mx_FeedbackDialog_section:after,.mx_FeedbackDialog .mx_FeedbackDialog_section:before{content:"";position:absolute;width:40px;height:40px;left:0;top:0}.mx_FeedbackDialog .mx_FeedbackDialog_section:before{background-color:#c1c6cd;border-radius:20px}.mx_FeedbackDialog .mx_FeedbackDialog_section:after{background:#fff;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:24px;mask-size:24px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mx_FeedbackDialog .mx_FeedbackDialog_reportBug:after{-webkit-mask-image:url(../../img/feather-customised/bug.3dc7afa.svg);mask-image:url(../../img/feather-customised/bug.3dc7afa.svg)}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:20px;-webkit-transition:font-size 1s,border .5s;transition:font-size 1s,border .5s;border-radius:50%;border:2px solid transparent;margin-top:12px;margin-bottom:24px;vertical-align:top;cursor:pointer}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton input[type=radio]+div{display:none}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton .mx_RadioButton_content{background:#c1c6cd;width:40px;height:40px;text-align:center;line-height:40px;border-radius:20px;margin:5px}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton .mx_RadioButton_spacer{display:none}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton+.mx_RadioButton{margin-left:16px}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton_checked{font-size:24px;border-color:#0dbd8b}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp:after{-webkit-mask-image:url(../../img/element-icons/feedback.a91241e.svg);mask-image:url(../../img/element-icons/feedback.a91241e.svg)}.mx_GroupAddressPicker_checkboxContainer{margin-top:10px;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_HostSignupDialog{width:90vw;max-width:580px;height:80vh;max-height:600px;background-color:#fff}.mx_HostSignupDialog .mx_HostSignupDialog_info{text-align:center}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_content_top{margin-bottom:24px}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_paragraphs{text-align:left;padding-left:25%;padding-right:25%}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_buttons{margin-bottom:24px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_buttons button{padding:12px;margin:0 16px}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_footer img{padding-right:5px}.mx_HostSignupDialog iframe{width:100%;height:100%;border:none;background-color:#fff;min-height:540px}.mx_HostSignupDialog_text_dark{color:#2e2f32}.mx_HostSignupDialog_text_light{color:#737d8c}.mx_HostSignup_maximize_button{-webkit-mask:url(../../img/feather-customised/maximise.dc32127.svg);mask:url(../../img/feather-customised/maximise.dc32127.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;right:10px}.mx_HostSignup_maximize_button,.mx_HostSignup_minimize_button{width:14px;height:14px;background-color:#c1c1c1;cursor:pointer;position:absolute;top:10px}.mx_HostSignup_minimize_button{-webkit-mask:url(../../img/feather-customised/minimise.aec9142.svg);mask:url(../../img/feather-customised/minimise.aec9142.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;right:25px}.mx_HostSignup_persisted{width:90vw;max-width:580px;height:80vh;max-height:600px;top:0;left:0;position:fixed;display:none}.mx_HostSignupDialog_minimized{position:fixed;bottom:80px;right:26px;width:314px;height:217px;overflow:hidden}.mx_HostSignupDialog_minimized.mx_Dialog{padding:12px}.mx_HostSignupDialog_minimized .mx_Dialog_title{text-align:left!important;padding-left:20px;font-size:1.5rem}.mx_HostSignupDialog_minimized iframe{width:100%;height:100%;border:none;background-color:#fff}.mx_IncomingSasDialog_opponentProfile_image{position:relative}.mx_IncomingSasDialog_opponentProfile h2{display:inline-block;margin-left:10px}.mx_InviteDialog_addressBar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.mx_InviteDialog_addressBar .mx_InviteDialog_editor{-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;background-color:#f3f8fd;border-radius:4px;min-height:25px;padding-left:8px;overflow-x:hidden;overflow-y:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mx_InviteDialog_addressBar .mx_InviteDialog_editor .mx_InviteDialog_userTile{margin:6px 6px 0 0;display:inline-block;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}.mx_InviteDialog_addressBar .mx_InviteDialog_editor>input[type=text]{margin:6px 0!important;height:24px;line-height:2.4rem;font-size:1.4rem;padding-left:12px;border:0!important;outline:0!important;resize:none;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:40%;-webkit-box-flex:1!important;-ms-flex:1!important;flex:1!important;color:#2e2f32!important}.mx_InviteDialog_addressBar .mx_InviteDialog_goButton{min-width:48px;margin-left:10px;height:25px;line-height:2.5rem}.mx_InviteDialog_addressBar .mx_InviteDialog_buttonAndSpinner .mx_Spinner{width:20px;height:20px;margin-left:5px;display:inline-block;vertical-align:middle}.mx_InviteDialog_section{padding-bottom:10px}.mx_InviteDialog_section h3{font-size:1.2rem;color:#61708b;font-weight:700;text-transform:uppercase}.mx_InviteDialog_section .mx_InviteDialog_subname{margin-bottom:10px;margin-top:-10px;font-size:1.2rem;color:#61708b}.mx_InviteDialog_roomTile{cursor:pointer;padding:5px 10px}.mx_InviteDialog_roomTile:hover{background-color:#f3f8fd;border-radius:4px}.mx_InviteDialog_roomTile *{vertical-align:middle}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_avatarStack{display:inline-block;position:relative;width:36px;height:36px}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_avatarStack>*{position:absolute;top:0;left:0}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_selected{width:36px;height:36px;border-radius:36px;background-color:#368bd6;display:inline-block;position:relative}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_selected:before{content:"";width:24px;height:24px;grid-column:1;grid-row:1;-webkit-mask-image:url(../../img/feather-customised/check.5745b4e.svg);mask-image:url(../../img/feather-customised/check.5745b4e.svg);-webkit-mask-size:100%;mask-size:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;position:absolute;top:6px;left:6px;background-color:#fff}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_nameStack{display:inline-block}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_name{font-weight:600;font-size:1.4rem;color:#2e2f32;margin-left:7px}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_userId{font-size:1.2rem;color:#61708b;margin-left:7px}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_time{text-align:right;font-size:1.2rem;color:#61708b;float:right;line-height:3.6rem}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_highlight{font-weight:900}.mx_InviteDialog_userTile{margin-right:8px}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill{background-color:#368bd6;border-radius:12px;display:inline-block;height:24px;line-height:2.4rem;padding-left:8px;padding-right:8px;color:#fff}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_avatar{border-radius:20px;position:relative;left:-5px;top:2px}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_name,.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill img.mx_InviteDialog_userTile_avatar{vertical-align:top}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_threepidAvatar{background-color:#fff}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_remove{display:inline-block;margin-left:4px}.mx_InviteDialog{height:590px;padding-left:20px}.mx_InviteDialog_userSections{margin-top:10px;overflow-y:auto;padding-right:45px;height:455px}.mx_InviteDialog_addressBar,.mx_InviteDialog_helpText{margin-right:45px}.mx_InviteDialog_helpText .mx_AccessibleButton_kind_link{padding:0}.mx_KeyboardShortcutsDialog{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-bottom:-50px;max-height:1100px}.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_category{width:33.3333%;margin:0 0 40px}.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_category>div{padding-left:5px}.mx_KeyboardShortcutsDialog h3{margin:0 0 10px}.mx_KeyboardShortcutsDialog h5{margin:15px 0 5px;font-weight:400}.mx_KeyboardShortcutsDialog kbd{padding:5px;border-radius:4px;background-color:#f3f8fd;margin-right:5px;min-width:20px;text-align:center;display:inline-block;border:1px solid #e9edf1;-webkit-box-shadow:0 2px #e9edf1;box-shadow:0 2px #e9edf1;margin-bottom:4px;text-transform:capitalize}.mx_KeyboardShortcutsDialog kbd+kbd{margin-left:5px}.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_inline div{display:inline}.mx_MessageEditHistoryDialog .mx_Dialog_header>.mx_Dialog_title{text-align:center}.mx_MessageEditHistoryDialog{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-height:60vh}.mx_MessageEditHistoryDialog_scrollPanel{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.mx_MessageEditHistoryDialog_error{color:#ff4b55;text-align:center}.mx_MessageEditHistoryDialog_edits{list-style-type:none;font-size:1.4rem;padding:0;color:#2e2f32}.mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_deletion,.mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_insertion{padding:0 2px}.mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_deletion{color:#ff4c55;background-color:rgba(255,76,85,.1);text-decoration:line-through}.mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_insertion{color:#1aa97b;background-color:rgba(26,169,123,.1);text-decoration:underline}.mx_MessageEditHistoryDialog_edits .mx_EventTile_content,.mx_MessageEditHistoryDialog_edits .mx_EventTile_line{margin-right:0}.mx_MessageEditHistoryDialog_edits .mx_MessageActionBar .mx_AccessibleButton{font-size:1rem;padding:0 8px}.mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning{margin-bottom:24px}.mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning>img{vertical-align:middle;margin-right:8px}.mx_ModalWidgetDialog .mx_ModalWidgetDialog_buttons{float:right;margin-top:24px}.mx_ModalWidgetDialog .mx_ModalWidgetDialog_buttons .mx_AccessibleButton+.mx_AccessibleButton{margin-left:8px}.mx_ModalWidgetDialog iframe{width:100%;height:450px;border:0;border-radius:8px}.mx_NewSessionReviewDialog_header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:0}.mx_NewSessionReviewDialog_headerIcon{width:24px;height:24px;margin-right:4px;position:relative}.mx_NewSessionReviewDialog_deviceName{font-weight:600}.mx_NewSessionReviewDialog_deviceID{font-size:1.2rem;color:#8d99a5}.mx_RegistrationEmailPromptDialog{width:417px}.mx_RegistrationEmailPromptDialog .mx_Dialog_content{margin-bottom:24px;color:#8d99a5}.mx_RegistrationEmailPromptDialog .mx_Dialog_primary{width:100%}.mx_RoomSettingsDialog_settingsIcon:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_RoomSettingsDialog_securityIcon:before{-webkit-mask-image:url(../../img/element-icons/security.66f2fa6.svg);mask-image:url(../../img/element-icons/security.66f2fa6.svg)}.mx_RoomSettingsDialog_rolesIcon:before{-webkit-mask-image:url(../../img/element-icons/room/settings/roles.bad9a9e.svg);mask-image:url(../../img/element-icons/room/settings/roles.bad9a9e.svg)}.mx_RoomSettingsDialog_notificationsIcon:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_RoomSettingsDialog_bridgesIcon:before{-webkit-mask-image:url(../../img/feather-customised/bridge.b2ca042.svg);mask-image:url(../../img/feather-customised/bridge.b2ca042.svg)}.mx_RoomSettingsDialog_warningIcon:before{-webkit-mask-image:url(../../img/element-icons/room/settings/advanced.e079c15.svg);mask-image:url(../../img/element-icons/room/settings/advanced.e079c15.svg)}.mx_RoomSettingsDialog .mx_Dialog_title{-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0 auto;padding-right:80px}.mx_RoomSettingsDialog .mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder:before{-webkit-mask:url(../../img/feather-customised/image.a8671b8.svg);mask:url(../../img/feather-customised/image.a8671b8.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:36px;mask-size:36px;-webkit-mask-position:center;mask-position:center}.mx_RoomSettingsDialog_BridgeList{padding:0}.mx_RoomSettingsDialog_BridgeList .mx_AccessibleButton{display:inline;margin:0;padding:0}.mx_RoomSettingsDialog_BridgeList li{list-style-type:none;padding:5px;margin-bottom:8px;border:1px solid transparent;border-radius:5px}.mx_RoomSettingsDialog_BridgeList li .column-icon{float:left;padding-right:10px}.mx_RoomSettingsDialog_BridgeList li .column-icon *{border-radius:5px;border:1px solid #e3e8f0}.mx_RoomSettingsDialog_BridgeList li .column-icon .noProtocolIcon{width:48px;height:48px;background:#e3e8f0;border-radius:5px}.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon{float:left;margin-right:5px}.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon img{border-radius:5px;border-width:1px;border-color:transparent}.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon span{left:auto}.mx_RoomSettingsDialog_BridgeList li .column-data{display:inline-block;width:85%}.mx_RoomSettingsDialog_BridgeList li .column-data>h3{margin-top:0;margin-bottom:0;font-size:16pt;color:#2e2f32}.mx_RoomSettingsDialog_BridgeList li .column-data>*{margin-top:4px;margin-bottom:0}.mx_RoomSettingsDialog_BridgeList li .column-data .workspace-channel-details{color:#2e2f32;font-weight:600}.mx_RoomSettingsDialog_BridgeList li .column-data .workspace-channel-details .channel{margin-left:5px}.mx_RoomSettingsDialog_BridgeList li .column-data .metadata{color:#61708b;margin-bottom:0;overflow-y:visible;text-overflow:ellipsis;white-space:normal;padding:0}.mx_RoomSettingsDialog_BridgeList li .column-data .metadata>li{padding:0;border:0}.mx_RoomUpgradeDialog{padding-right:70px}.mx_RoomUpgradeWarningDialog{max-width:38vw;width:38vw}.mx_RoomUpgradeWarningDialog .mx_SettingsFlag{font-weight:700}.mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_ToggleSwitch{display:inline-block;vertical-align:middle;margin-left:8px;float:right}.mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_SettingsFlag_label{display:inline-block;vertical-align:middle}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content{padding-right:85px;color:#2e2f32}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content hr{border-color:#2e2f32;opacity:.1;border-bottom:none}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content ul{padding:16px}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content ul li:nth-child(n+2){margin-top:16px}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timestamp{display:inline-block;width:115px;color:#61708b;line-height:24px;vertical-align:top}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline{display:inline-block;width:calc(100% - 155px)}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_timeline_header span{margin-left:8px;vertical-align:middle}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_txn{position:relative;margin-top:8px}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_txn .mx_ServerOfflineDialog_content_context_txn_desc{width:calc(100% - 100px)}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_txn .mx_AccessibleButton{float:right;padding:0}.mx_ServerPickerDialog{width:468px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_ServerPickerDialog .mx_Dialog_content{margin-bottom:0}.mx_ServerPickerDialog .mx_Dialog_content>p{color:#737d8c;font-size:1.4rem;margin:16px 0}.mx_ServerPickerDialog .mx_Dialog_content>p:first-of-type{margin-bottom:40px}.mx_ServerPickerDialog .mx_Dialog_content>p:last-of-type{margin:0 24px 24px}.mx_ServerPickerDialog .mx_Dialog_content>h4{font-size:1.5rem;font-weight:600;color:#737d8c;margin-left:8px}.mx_ServerPickerDialog .mx_Dialog_content>a{color:#0dbd8b;margin-left:8px}.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserverRadio input[type=radio]+div{margin-top:auto;margin-bottom:auto}.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver{border-top:none;border-left:none;border-right:none;border-radius:unset}.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver>input{padding-left:0}.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver>label{margin-left:0}.mx_ServerPickerDialog .mx_AccessibleButton_kind_primary{width:calc(100% - 64px);margin:0 8px;padding:15px 18px}.mx_SetEmailDialog_email_input{border-radius:3px;border:1px solid #e7e7e7;padding:9px;color:rgba(74,74,74,.9);background-color:#fff;font-size:1.5rem;width:100%;max-width:280px;margin-bottom:10px}.mx_SetEmailDialog_email_input:focus{outline:none;-webkit-box-shadow:none;box-shadow:none;border:1px solid #0dbd8b}.mx_RoomSettingsDialog,.mx_UserSettingsDialog{width:90vw;max-width:1000px;height:80vh}.mx_RoomSettingsDialog .mx_TabbedView,.mx_UserSettingsDialog .mx_TabbedView{top:65px}.mx_RoomSettingsDialog .mx_TabbedView .mx_SettingsTab,.mx_UserSettingsDialog .mx_TabbedView .mx_SettingsTab{-webkit-box-sizing:border-box;box-sizing:border-box;min-width:580px;padding-right:100px;padding-bottom:100px}.mx_RoomSettingsDialog .mx_Dialog_title,.mx_UserSettingsDialog .mx_Dialog_title{margin-bottom:24px}.mx_ShareDialog hr{margin-top:25px;margin-bottom:25px;border-color:#747474}.mx_ShareDialog_content{margin:10px 0}.mx_ShareDialog_matrixto{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;border-radius:5px;border:1px solid #747474;margin-bottom:10px;margin-top:30px;padding:10px}.mx_ShareDialog_matrixto a{text-decoration:none}.mx_ShareDialog_matrixto_link{-ms-flex-negative:1;flex-shrink:1;overflow:hidden;text-overflow:ellipsis}.mx_ShareDialog_matrixto_copy{-ms-flex-negative:0;flex-shrink:0;cursor:pointer;margin-left:20px;display:inherit}.mx_ShareDialog_matrixto_copy>div{-webkit-mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);background-color:#2e2f32;margin-left:5px;width:20px;height:20px;background-repeat:no-repeat}.mx_ShareDialog_split{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mx_ShareDialog_qrcode_container{float:left;height:256px;width:256px;margin-right:64px}.mx_ShareDialog_qrcode_container+.mx_ShareDialog_social_container{width:299px}.mx_ShareDialog_social_container{display:inline-block}.mx_ShareDialog_social_icon{display:inline-grid;margin-right:10px;margin-bottom:10px}.mx_SlashCommandHelpDialog .mx_SlashCommandHelpDialog_headerRow h2{margin-bottom:2px}.mx_SlashCommandHelpDialog .mx_Dialog_content{margin-top:12px;margin-bottom:34px}.mx_SpaceSettingsDialog{width:480px;color:#2e2f32}.mx_SpaceSettingsDialog .mx_SpaceSettings_errorText{font-weight:600;font-size:1.2rem;line-height:1.5rem;color:#ff4b55;margin-bottom:28px}.mx_SpaceSettingsDialog .mx_ToggleSwitch{display:inline-block;vertical-align:middle;margin-left:16px}.mx_SpaceSettingsDialog .mx_AccessibleButton_kind_danger{margin-top:28px}.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:64px}.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons .mx_AccessibleButton{display:inline-block}.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons .mx_AccessibleButton_kind_link{margin-left:auto}.mx_SpaceSettingsDialog .mx_AccessibleButton_hasKind{padding:8px 22px}.mx_TabbedIntegrationManagerDialog .mx_Dialog{width:60%;height:70%;overflow:hidden;padding:0;max-width:none;max-height:none;position:relative}.mx_TabbedIntegrationManagerDialog_container{position:absolute;top:0;bottom:0;left:0;right:0}.mx_TabbedIntegrationManagerDialog_container .mx_TabbedIntegrationManagerDialog_currentManager{width:100%;height:100%;border-top:1px solid #0dbd8b}.mx_TabbedIntegrationManagerDialog_container .mx_TabbedIntegrationManagerDialog_currentManager iframe{background-color:#fff;border:0;width:100%;height:100%}.mx_TabbedIntegrationManagerDialog_tab{display:inline-block;border:1px solid #0dbd8b;border-bottom:0;border-top-left-radius:3px;border-top-right-radius:3px;padding:10px 8px;margin-right:5px}.mx_TabbedIntegrationManagerDialog_currentTab{background-color:#0dbd8b;color:#fff}.mx_TermsDialog_forIntegrationManager .mx_Dialog{width:60%;height:70%;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_TermsDialog_termsTableHeader{font-weight:700;text-align:left}.mx_TermsDialog_termsTable{font-size:1.2rem;width:100%}.mx_TermsDialog_service,.mx_TermsDialog_summary{padding-right:10px}.mx_TermsDialog_link{display:inline-block;-webkit-mask-image:url(../../img/external-link.a8d3e9b.svg);mask-image:url(../../img/external-link.a8d3e9b.svg);background-color:#0dbd8b;width:10px;height:10px}.mx_UntrustedDeviceDialog .mx_Dialog_title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_UntrustedDeviceDialog .mx_Dialog_title .mx_E2EIcon{margin-left:0}.mx_UploadConfirmDialog_fileIcon{margin-right:5px}.mx_UploadConfirmDialog_previewOuter{text-align:center}.mx_UploadConfirmDialog_previewInner{display:inline-block;text-align:left}.mx_UploadConfirmDialog_imagePreview{max-height:300px;max-width:100%;border-radius:4px;border:1px solid #c1c1c1}.mx_UserSettingsDialog_settingsIcon:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_UserSettingsDialog_appearanceIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/appearance.cdebd40.svg);mask-image:url(../../img/element-icons/settings/appearance.cdebd40.svg)}.mx_UserSettingsDialog_voiceIcon:before{-webkit-mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg)}.mx_UserSettingsDialog_bellIcon:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_UserSettingsDialog_preferencesIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/preference.82bfabd.svg);mask-image:url(../../img/element-icons/settings/preference.82bfabd.svg)}.mx_UserSettingsDialog_securityIcon:before{-webkit-mask-image:url(../../img/element-icons/security.66f2fa6.svg);mask-image:url(../../img/element-icons/security.66f2fa6.svg)}.mx_UserSettingsDialog_helpIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/help.68b703f.svg);mask-image:url(../../img/element-icons/settings/help.68b703f.svg)}.mx_UserSettingsDialog_labsIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/lab-flags.6fbe5e2.svg);mask-image:url(../../img/element-icons/settings/lab-flags.6fbe5e2.svg)}.mx_UserSettingsDialog_mjolnirIcon:before{-webkit-mask-image:url(../../img/element-icons/room/composer/emoji.52d7369.svg);mask-image:url(../../img/element-icons/room/composer/emoji.52d7369.svg)}.mx_UserSettingsDialog_flairIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/flair.4227a88.svg);mask-image:url(../../img/element-icons/settings/flair.4227a88.svg)}.mx_WidgetCapabilitiesPromptDialog .text-muted{font-size:1.2rem}.mx_WidgetCapabilitiesPromptDialog .mx_Dialog_content{margin-bottom:16px}.mx_WidgetCapabilitiesPromptDialog .mx_WidgetCapabilitiesPromptDialog_cap{margin-top:20px;font-size:1.5rem;line-height:1.5rem}.mx_WidgetCapabilitiesPromptDialog .mx_WidgetCapabilitiesPromptDialog_cap .mx_WidgetCapabilitiesPromptDialog_byline{color:#61708b;margin-left:26px;font-size:1.2rem;line-height:1.2rem}.mx_WidgetCapabilitiesPromptDialog .mx_Dialog_buttons{margin-top:40px}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag{line-height:calc(1.4rem + 14px);color:#61708b;font-size:1.2rem}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch{display:inline-block;vertical-align:middle;margin-right:8px;width:3.2rem;height:1.5rem}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch.mx_ToggleSwitch_on>.mx_ToggleSwitch_ball{left:calc(100% - 1.5rem)}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch .mx_ToggleSwitch_ball{width:1.5rem;height:1.5rem;border-radius:1.5rem}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_SettingsFlag_label{display:inline-block;vertical-align:middle}.mx_WidgetOpenIDPermissionsDialog .mx_SettingsFlag .mx_ToggleSwitch{display:inline-block;vertical-align:middle;margin-right:8px}.mx_WidgetOpenIDPermissionsDialog .mx_SettingsFlag .mx_SettingsFlag_label{display:inline-block;vertical-align:middle}.mx_AccessSecretStorageDialog_reset{position:relative;padding-left:24px;margin-top:7px}.mx_AccessSecretStorageDialog_reset:before{content:"";display:inline-block;position:absolute;height:16px;width:16px;left:0;top:2px;background-image:url(../../img/element-icons/warning-badge.de1033e.svg)}.mx_AccessSecretStorageDialog_reset .mx_AccessSecretStorageDialog_reset_link{color:#ff4b55}.mx_AccessSecretStorageDialog_titleWithIcon:before{content:"";display:inline-block;width:24px;height:24px;margin-right:8px;position:relative;top:5px;background-color:#2e2f32}.mx_AccessSecretStorageDialog_resetBadge:before{background-image:url(../../img/element-icons/warning-badge.de1033e.svg);background-size:24px;background-color:transparent}.mx_AccessSecretStorageDialog_secureBackupTitle:before{-webkit-mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg)}.mx_AccessSecretStorageDialog_securePhraseTitle:before{-webkit-mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg);mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg)}.mx_AccessSecretStorageDialog_keyStatus{height:30px}.mx_AccessSecretStorageDialog_passPhraseInput{width:300px;border:1px solid #0dbd8b;border-radius:5px;padding:10px}.mx_AccessSecretStorageDialog_recoveryKeyEntry{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText{margin:16px}.mx_AccessSecretStorageDialog_recoveryKeyFeedback:before{content:"";display:inline-block;vertical-align:bottom;width:20px;height:20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:20px;mask-size:20px;margin-right:5px}.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid{color:#0dbd8b}.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid:before{-webkit-mask-image:url(../../img/feather-customised/check.5745b4e.svg);mask-image:url(../../img/feather-customised/check.5745b4e.svg);background-color:#0dbd8b}.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid{color:#ff4b55}.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid:before{-webkit-mask-image:url(../../img/feather-customised/x.9662221.svg);mask-image:url(../../img/feather-customised/x.9662221.svg);background-color:#ff4b55}.mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput{display:none}.mx_CreateCrossSigningDialog{width:560px}.mx_CreateCrossSigningDialog details .mx_AccessibleButton{margin:1em 0}.mx_CreateCrossSigningDialog .mx_Dialog_title,.mx_CreateKeyBackupDialog .mx_Dialog_title{margin-bottom:1em}.mx_CreateKeyBackupDialog_primaryContainer{padding:20px}.mx_CreateKeyBackupDialog_primaryContainer:after{content:"";clear:both;display:block}.mx_CreateKeyBackupDialog_passPhraseContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mx_CreateKeyBackupDialog_passPhraseInput{-webkit-box-flex:0;-ms-flex:none;flex:none;width:250px;border:1px solid #0dbd8b;border-radius:5px;padding:10px;margin-bottom:1em}.mx_CreateKeyBackupDialog_passPhraseMatch{margin-left:20px}.mx_CreateKeyBackupDialog_recoveryKeyHeader{margin-bottom:1em}.mx_CreateKeyBackupDialog_recoveryKeyContainer{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_CreateKeyBackupDialog_recoveryKey{width:262px;padding:20px;color:#888;background-color:#f7f7f7;margin-right:12px}.mx_CreateKeyBackupDialog_recoveryKeyButtons{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CreateKeyBackupDialog_recoveryKeyButtons button{-webkit-box-flex:1;-ms-flex:1;flex:1;white-space:nowrap}.mx_CreateKeyBackupDialog details .mx_AccessibleButton{margin:1em 0}.mx_CreateSecretStorageDialog{width:560px}.mx_CreateSecretStorageDialog .mx_SettingsFlag{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_CreateSecretStorageDialog .mx_SettingsFlag_label{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0;font-weight:600}.mx_CreateSecretStorageDialog .mx_ToggleSwitch{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-left:30px}.mx_CreateSecretStorageDialog details .mx_AccessibleButton{margin:1em 0}.mx_CreateSecretStorageDialog .mx_Dialog_title{margin-bottom:1em}.mx_CreateSecretStorageDialog_titleWithIcon:before{content:"";display:inline-block;width:24px;height:24px;margin-right:8px;position:relative;top:5px;background-color:#2e2f32}.mx_CreateSecretStorageDialog_secureBackupTitle:before{-webkit-mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg)}.mx_CreateSecretStorageDialog_securePhraseTitle:before{-webkit-mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg);mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg)}.mx_CreateSecretStorageDialog_centeredBody,.mx_CreateSecretStorageDialog_centeredTitle{text-align:center}.mx_CreateSecretStorageDialog_primaryContainer{padding-top:20px}.mx_CreateSecretStorageDialog_primaryContainer:after{content:"";clear:both;display:block}.mx_CreateSecretStorageDialog_primaryContainer .mx_RadioButton{margin-bottom:16px;padding:11px}.mx_CreateSecretStorageDialog_optionTitle{color:#45474a;font-weight:600;font-size:1.8rem;padding-bottom:10px}.mx_CreateSecretStorageDialog_optionIcon{display:inline-block;width:24px;height:24px;margin-right:8px;position:relative;top:5px;background-color:#2e2f32}.mx_CreateSecretStorageDialog_optionIcon_securePhrase{-webkit-mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg);mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg)}.mx_CreateSecretStorageDialog_optionIcon_secureBackup{-webkit-mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg)}.mx_CreateSecretStorageDialog_passPhraseContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mx_Field.mx_CreateSecretStorageDialog_passPhraseField{margin-top:0}.mx_CreateSecretStorageDialog_passPhraseMatch{width:200px;margin-left:20px}.mx_CreateSecretStorageDialog_recoveryKeyContainer{width:380px;margin-left:auto;margin-right:auto}.mx_CreateSecretStorageDialog_recoveryKey{font-weight:700;text-align:center;padding:20px;color:#888;background-color:#f7f7f7;border-radius:6px;word-spacing:1em;margin-bottom:20px}.mx_CreateSecretStorageDialog_recoveryKeyButtons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton{width:160px;padding-left:0;padding-right:0;white-space:nowrap}.mx_CreateSecretStorageDialog_continueSpinner{margin-top:33px;text-align:right}.mx_CreateSecretStorageDialog_continueSpinner img{width:20px;height:20px}.mx_KeyBackupFailedDialog .mx_Dialog_title{margin-bottom:32px}.mx_KeyBackupFailedDialog_title{position:relative;padding-left:45px;padding-bottom:10px}.mx_KeyBackupFailedDialog_title:before{-webkit-mask:url(../../img/e2e/lock-warning-filled.993fb6c.svg);mask:url(../../img/e2e/lock-warning-filled.993fb6c.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#2e2f32;content:"";position:absolute;top:-6px;right:0;bottom:0;left:0}.mx_KeyBackupFailedDialog .mx_Dialog_buttons{margin-top:36px}.mx_RestoreKeyBackupDialog_keyStatus{height:30px}.mx_RestoreKeyBackupDialog_primaryContainer{padding:20px}.mx_RestoreKeyBackupDialog_passPhraseInput,.mx_RestoreKeyBackupDialog_recoveryKeyInput{width:300px;border:1px solid #0dbd8b;border-radius:5px;padding:10px}.mx_RestoreKeyBackupDialog_content>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;min-height:110px}.mx_NetworkDropdown{height:32px;position:relative;padding-right:32px;margin-left:auto;margin-right:9px;margin-top:12px}.mx_NetworkDropdown,.mx_NetworkDropdown .mx_AccessibleButton{width:-webkit-max-content;width:-moz-max-content;width:max-content}.mx_NetworkDropdown_menu{min-width:204px;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;border:1px solid #c1c1c1;background-color:#fff;max-height:calc(100vh - 20px);overflow-y:auto}.mx_NetworkDropdown_menu_network{font-weight:700}.mx_NetworkDropdown_server{padding:12px 0;border-bottom:1px solid #9fa9ba}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_title{padding:0 10px;font-size:1.5rem;font-weight:600;line-height:2rem;margin-bottom:4px;position:relative}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_title .mx_AccessibleButton{position:absolute;display:inline;right:10px;height:16px;width:16px;margin-top:2px}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_title .mx_AccessibleButton:after{content:"";position:absolute;width:16px;height:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/feather-customised/x.9662221.svg);mask-image:url(../../img/feather-customised/x.9662221.svg);background-color:#ff4b55}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_subtitle{padding:0 10px;font-size:1rem;line-height:1.4rem;margin-top:-4px;margin-bottom:4px;color:#61708b}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_network{font-size:1.2rem;line-height:1.6rem;padding:4px 10px;cursor:pointer;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_network[aria-checked=true]:after{content:"";position:absolute;width:16px;height:16px;right:10px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/feather-customised/check.5745b4e.svg);mask-image:url(../../img/feather-customised/check.5745b4e.svg);background-color:#0dbd8b}.mx_NetworkDropdown_server_add:hover,.mx_NetworkDropdown_server_network:hover{background-color:#f3f8fd}.mx_NetworkDropdown_server_add{padding:16px 10px 16px 32px;position:relative;border-radius:0 0 4px 4px}.mx_NetworkDropdown_server_add:before{content:"";position:absolute;width:16px;height:16px;left:7px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/feather-customised/plus.38ae979.svg);mask-image:url(../../img/feather-customised/plus.38ae979.svg);background-color:#61708b}.mx_NetworkDropdown_handle{position:relative}.mx_NetworkDropdown_handle:after{content:"";position:absolute;width:26px;height:26px;right:-27.5px;top:-3px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);background-color:#2e2f32}.mx_NetworkDropdown_handle .mx_NetworkDropdown_handle_server{color:#61708b;font-size:1.2rem}.mx_NetworkDropdown_dialog .mx_Dialog{width:45vw}.mx_AccessibleButton{cursor:pointer}.mx_AccessibleButton_disabled{cursor:default}.mx_AccessibleButton_hasKind{padding:7px 18px;text-align:center;border-radius:8px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:1.4rem}.mx_AccessibleButton_kind_primary{color:#fff;background-color:#0dbd8b;font-weight:600}.mx_AccessibleButton_kind_primary_outline{color:#0dbd8b;background-color:#fff;border:1px solid #0dbd8b;font-weight:600}.mx_AccessibleButton_kind_secondary{color:#0dbd8b;font-weight:600}.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled,.mx_AccessibleButton_kind_primary_outline.mx_AccessibleButton_disabled{opacity:.4}.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm{padding:5px 12px;color:#fff;background-color:#0dbd8b}.mx_AccessibleButton_kind_primary_sm.mx_AccessibleButton_disabled{opacity:.4}.mx_AccessibleButton_kind_danger{color:#fff;background-color:#ff4b55}.mx_AccessibleButton_kind_danger_outline{color:#ff4b55;background-color:#fff;border:1px solid #ff4b55}.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled{color:#fff;background-color:#f5b6bb}.mx_AccessibleButton_kind_danger_outline.mx_AccessibleButton_disabled{color:#f5b6bb;border-color:#f5b6bb}.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm{padding:5px 12px;color:#fff;background-color:#ff4b55}.mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled{color:#fff;background-color:#f5b6bb}.mx_AccessibleButton_kind_link{color:#0dbd8b;background-color:transparent}.mx_AccessibleButton_kind_link.mx_AccessibleButton_disabled{opacity:.4}.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link_sm{padding:5px 12px;color:#0dbd8b;background-color:transparent}.mx_AccessibleButton_kind_link_sm.mx_AccessibleButton_disabled{opacity:.4}.mx_AddressSelector{position:absolute;background-color:#fff;width:485px;max-height:116px;overflow-y:auto;border-radius:3px;border:1px solid #0dbd8b;cursor:pointer;z-index:1}.mx_AddressSelector.mx_AddressSelector_empty{display:none}.mx_AddressSelector_addressListElement .mx_AddressTile{background-color:#fff;border:1px solid #fff}.mx_AddressSelector_addressListElement.mx_AddressSelector_selected{background-color:#f2f5f8}.mx_AddressSelector_addressListElement.mx_AddressSelector_selected .mx_AddressTile{background-color:#f2f5f8;border:1px solid #f2f5f8}.mx_AddressTile{display:inline-block;border-radius:3px;background-color:rgba(74,73,74,.1);border:1px solid #e7e7e7;line-height:2.6rem;color:#2e2f32;font-size:1.4rem;font-weight:400;margin-right:4px}.mx_AddressTile.mx_AddressTile_error{background-color:rgba(255,0,100,.1);color:#ff4b55;border-color:#ff4b55}.mx_AddressTile_network{padding-right:4px}.mx_AddressTile_avatar,.mx_AddressTile_network{display:inline-block;position:relative;padding-left:2px;vertical-align:middle}.mx_AddressTile_avatar{padding-right:7px}.mx_AddressTile_mx{display:inline-block;margin:0;border:0;padding:0}.mx_AddressTile_name{display:inline-block;padding-right:4px;font-weight:600;overflow:hidden;height:26px;vertical-align:middle}.mx_AddressTile_name.mx_AddressTile_justified{width:180px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_id{display:inline-block;padding-right:11px}.mx_AddressTile_id.mx_AddressTile_justified{width:200px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_unknownMx{display:inline-block;font-weight:600;padding-right:11px}.mx_AddressTile_unknownMxl.mx_AddressTile_justified{width:380px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_email{display:inline-block;font-weight:600;padding-right:11px}.mx_AddressTile_email.mx_AddressTile_justified{width:200px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_unknown{display:inline-block;padding-right:11px}.mx_AddressTile_unknown.mx_AddressTile_justified{width:380px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_dismiss{display:inline-block;padding-right:11px;padding-left:1px;cursor:pointer}.mx_AddressTile_dismiss object{pointer-events:none}.mx_DesktopBuildsNotice{text-align:center;padding:0 16px}.mx_DesktopBuildsNotice>*{vertical-align:middle}.mx_DesktopBuildsNotice>img{margin-right:8px}.mx_desktopCapturerSourcePicker{overflow:hidden}.mx_desktopCapturerSourcePicker_tabLabels{display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 0 8px}.mx_desktopCapturerSourcePicker_tabLabel,.mx_desktopCapturerSourcePicker_tabLabel_selected{width:100%;text-align:center;border-radius:8px;padding:8px 0;font-size:1.3rem}.mx_desktopCapturerSourcePicker_tabLabel_selected{background-color:#0dbd8b;color:#fff}.mx_desktopCapturerSourcePicker_panel{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;height:500px;overflow:overlay}.mx_desktopCapturerSourcePicker_stream_button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:8px;border-radius:4px}.mx_desktopCapturerSourcePicker_stream_button:focus,.mx_desktopCapturerSourcePicker_stream_button:hover{background:#fff}.mx_desktopCapturerSourcePicker_stream_thumbnail{margin:4px;width:312px}.mx_desktopCapturerSourcePicker_stream_name{margin:0 4px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:312px}.mx_DirectorySearchBox{display:-webkit-box;display:-ms-flexbox;display:flex;padding-left:9px;padding-right:9px}.mx_DirectorySearchBox_joinButton{display:table-cell;padding:3px 10px;background-color:#f2f5f8;border-radius:3px;background-image:url(../../img/icon-return.cb24475.svg);background-position:8px 70%;background-repeat:no-repeat;text-indent:18px;font-weight:600;font-size:1.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.mx_DirectorySearchBox_clear{background-color:#ff4b55;-webkit-mask:url(../../img/cancel.4b9715b.svg);mask:url(../../img/cancel.4b9715b.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:10px;mask-size:10px;width:15px;height:15px;cursor:pointer}.mx_Dropdown{position:relative;color:#2e2f32}.mx_Dropdown_disabled{opacity:.3}.mx_Dropdown_input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;border-radius:3px;border:1px solid #c7c7c7;font-size:1.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_Dropdown_input.mx_AccessibleButton_disabled{cursor:not-allowed}.mx_Dropdown_input:focus{border-color:#238cf5}.mx_Dropdown_input.mx_AccessibleButton:focus{-webkit-filter:none;filter:none}.mx_Dropdown_arrow{width:10px;height:6px;padding-right:9px;-webkit-mask:url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);mask:url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#2e2f32}.mx_Dropdown_option{height:35px;line-height:3.5rem;padding-left:8px;padding-right:8px}.mx_Dropdown_input>.mx_Dropdown_option{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_Dropdown_input>.mx_Dropdown_option,.mx_Dropdown_option div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mx_Dropdown_option .mx_Dropdown_option_emoji,.mx_Dropdown_option img{margin:5px;width:16px;vertical-align:middle}.mx_Dropdown_option_emoji{font-size:1.6rem;line-height:1.6rem}input.mx_Dropdown_option,input.mx_Dropdown_option:focus{font-weight:400;border:0;padding-top:0;padding-bottom:0;width:60%}.mx_Dropdown_menu{position:absolute;left:-1px;right:-1px;top:100%;z-index:2;margin:0;padding:0;border-radius:3px;border:1px solid #238cf5;background-color:#fff;max-height:200px;overflow-y:auto}.mx_Dropdown_menu .mx_Dropdown_option{height:auto;min-height:35px}.mx_Dropdown_menu .mx_Dropdown_option_highlight{background-color:#ddd}.mx_Dropdown_searchPrompt{font-weight:400;margin-left:5px;margin-bottom:5px}.mx_EditableItemList{margin-top:12px;margin-bottom:10px}.mx_EditableItem{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:5px}.mx_EditableItem_delete{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3;margin-right:5px;cursor:pointer;vertical-align:middle;width:14px;height:14px;-webkit-mask-image:url(../../img/feather-customised/cancel.23c2689.svg);mask-image:url(../../img/feather-customised/cancel.23c2689.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#ff4b55;-webkit-mask-size:100%;mask-size:100%}.mx_EditableItem_email{vertical-align:middle}.mx_EditableItem_promptText{margin-right:10px;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.mx_EditableItem_confirmBtn{margin-right:5px}.mx_EditableItem_item{-webkit-box-flex:1;-ms-flex:auto 1 0px;flex:auto 1 0;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;width:calc(100% - 14px);overflow-x:hidden;text-overflow:ellipsis}.mx_EditableItemList_label{margin-bottom:5px}.mx_ErrorBoundary{width:100%;height:100%;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_ErrorBoundary,.mx_ErrorBoundary_body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_ErrorBoundary_body{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-width:400px}.mx_ErrorBoundary_body .mx_AccessibleButton{margin-top:5px}.mx_EventListSummary{position:relative}.mx_TextualEvent.mx_EventListSummary_summary{font-size:1.4rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mx_EventListSummary_avatars{display:inline-block;margin-right:8px;padding-top:8px;line-height:1.2rem}.mx_EventListSummary_avatars .mx_BaseAvatar{margin-right:-4px;cursor:pointer}.mx_EventListSummary_toggle{color:#0dbd8b;cursor:pointer;float:right;margin-right:10px;margin-top:8px}.mx_EventListSummary_line{border-bottom:1px solid transparent;margin-left:63px;line-height:3rem}.mx_MatrixChat_useCompactLayout .mx_EventListSummary{font-size:1.3rem}.mx_MatrixChat_useCompactLayout .mx_EventListSummary .mx_EventTile_line{line-height:2rem}.mx_MatrixChat_useCompactLayout .mx_EventListSummary_line{line-height:2.2rem}.mx_MatrixChat_useCompactLayout .mx_EventListSummary_toggle{margin-top:3px}.mx_MatrixChat_useCompactLayout .mx_TextualEvent.mx_EventListSummary_summary{font-size:1.3rem}.mx_FacePile .mx_FacePile_faces{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;vertical-align:middle}.mx_FacePile .mx_FacePile_faces>.mx_FacePile_face+.mx_FacePile_face{margin-right:-8px}.mx_FacePile .mx_FacePile_faces .mx_BaseAvatar_image{border:1px solid #fff}.mx_FacePile .mx_FacePile_faces .mx_BaseAvatar_initial{margin:1px}.mx_FacePile .mx_FacePile_faces .mx_FacePile_more{position:relative;border-radius:100%;width:30px;height:30px;background-color:hsla(0,0%,91%,.77)}.mx_FacePile .mx_FacePile_faces .mx_FacePile_more:before{content:"";z-index:1;position:absolute;top:0;left:0;height:inherit;width:inherit;background:#8d99a5;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:20px;mask-size:20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg)}.mx_FacePile .mx_FacePile_summary{margin-left:12px;font-size:1.4rem;line-height:2.4rem;color:#8d99a5}.mx_Field{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0;position:relative;margin:1em 0;border-radius:4px;-webkit-transition:border-color .25s;transition:border-color .25s;border:1px solid #e7e7e7}.mx_Field_prefix{border-right:1px solid #e7e7e7}.mx_Field_postfix{border-left:1px solid #e7e7e7}.mx_Field input,.mx_Field select,.mx_Field textarea{font-weight:400;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;border:none;border-radius:4px;padding:8px 9px;color:#2e2f32;background-color:#fff;-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.mx_Field select{-moz-appearance:none;-webkit-appearance:none}.mx_Field_select:before{content:"";position:absolute;top:15px;right:10px;width:10px;height:6px;-webkit-mask:url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);mask:url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#2e2f32;z-index:1;pointer-events:none}.mx_Field:focus-within{border-color:#238cf5}.mx_Field input:focus,.mx_Field select:focus,.mx_Field textarea:focus{outline:0}.mx_Field input::-webkit-input-placeholder,.mx_Field textarea::-webkit-input-placeholder{-webkit-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input::-moz-placeholder,.mx_Field textarea::-moz-placeholder{-moz-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input:-ms-input-placeholder,.mx_Field textarea:-ms-input-placeholder{-ms-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input::-ms-input-placeholder,.mx_Field textarea::-ms-input-placeholder{-ms-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input::placeholder,.mx_Field textarea::placeholder{-webkit-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input:placeholder-shown:focus::-webkit-input-placeholder,.mx_Field textarea:placeholder-shown:focus::-webkit-input-placeholder{-webkit-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:placeholder-shown:focus::-moz-placeholder,.mx_Field textarea:placeholder-shown:focus::-moz-placeholder{-moz-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:placeholder-shown:focus:-ms-input-placeholder,.mx_Field textarea:placeholder-shown:focus:-ms-input-placeholder{-ms-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:placeholder-shown:focus::-ms-input-placeholder,.mx_Field textarea:placeholder-shown:focus::-ms-input-placeholder{-ms-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:-moz-placeholder-shown:focus::placeholder,.mx_Field textarea:-moz-placeholder-shown:focus::placeholder{-moz-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:-ms-input-placeholder:focus::placeholder,.mx_Field textarea:-ms-input-placeholder:focus::placeholder{-ms-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:placeholder-shown:focus::placeholder,.mx_Field textarea:placeholder-shown:focus::placeholder{-webkit-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field label{-webkit-transition:font-size .25s ease-out .1s,color .25s ease-out .1s,top .25s ease-out .1s,background-color .25s ease-out .1s;transition:font-size .25s ease-out .1s,color .25s ease-out .1s,top .25s ease-out .1s,background-color .25s ease-out .1s;color:#2e2f32;background-color:transparent;font-size:1.4rem;position:absolute;left:0;top:0;margin:7px 8px;padding:2px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:calc(100% - 20px)}.mx_Field input:not(:-moz-placeholder-shown)+label,.mx_Field textarea:not(:-moz-placeholder-shown)+label{-moz-transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;font-size:1rem;top:-13px;padding:0 2px;background-color:#fff;pointer-events:auto}.mx_Field input:not(:-ms-input-placeholder)+label,.mx_Field textarea:not(:-ms-input-placeholder)+label{-ms-transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;font-size:1rem;top:-13px;padding:0 2px;background-color:#fff;pointer-events:auto}.mx_Field_labelAlwaysTopLeft label,.mx_Field input:focus+label,.mx_Field input:not(:placeholder-shown)+label,.mx_Field select+label,.mx_Field textarea:focus+label,.mx_Field textarea:not(:placeholder-shown)+label{-webkit-transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;font-size:1rem;top:-13px;padding:0 2px;background-color:#fff;pointer-events:auto}.mx_Field input:focus+label,.mx_Field select:focus+label,.mx_Field textarea:focus+label{color:#238cf5}.mx_Field input:disabled,.mx_Field input:disabled+label,.mx_Field select:disabled,.mx_Field select:disabled+label,.mx_Field textarea:disabled,.mx_Field textarea:disabled+label{background-color:#fff;color:#888}.mx_Field_valid.mx_Field,.mx_Field_valid.mx_Field:focus-within{border-color:#0dbd8b}.mx_Field_valid.mx_Field:focus-within label,.mx_Field_valid.mx_Field label{color:#0dbd8b}.mx_Field_invalid.mx_Field,.mx_Field_invalid.mx_Field:focus-within{border-color:#ff4b55}.mx_Field_invalid.mx_Field:focus-within label,.mx_Field_invalid.mx_Field label{color:#ff4b55}.mx_Field_tooltip{margin-top:-12px;margin-left:4px;width:200px}.mx_Field_tooltip.mx_Field_valid{-webkit-animation:mx_fadeout 1s 2s forwards;animation:mx_fadeout 1s 2s forwards}.mx_Field .mx_Dropdown_input{border:initial;border-radius:0;border-radius:initial}.mx_Field .mx_CountryDropdown{width:7.8rem}.mx_FormButton{line-height:1.6rem;padding:5px 15px;font-size:1.2rem;height:-webkit-min-content;height:-moz-min-content;height:min-content}.mx_FormButton:not(:last-child){margin-right:8px}.mx_FormButton.mx_AccessibleButton_kind_primary{color:#0dbd8b;background-color:rgba(3,179,129,.16)}.mx_FormButton.mx_AccessibleButton_kind_danger{color:#ff4b55;background-color:rgba(255,75,85,.16)}.mx_FormButton.mx_AccessibleButton_kind_secondary{color:#737d8c;border:1px solid #737d8c;background-color:unset}.mx_ImageView{width:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_ImageView,.mx_ImageView_image_wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%}.mx_ImageView_image_wrapper{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.mx_ImageView_image{pointer-events:all;-ms-flex-negative:0;flex-shrink:0}.mx_ImageView_panel{width:100%;height:68px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mx_ImageView_info_wrapper,.mx_ImageView_panel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_ImageView_info_wrapper{pointer-events:all;padding-left:32px;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;color:#fff}.mx_ImageView_info{padding-left:12px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_ImageView_info_sender{font-weight:700}.mx_ImageView_toolbar{padding-right:16px;pointer-events:all;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_ImageView_button{margin-left:24px;display:block}.mx_ImageView_button:before{content:"";height:22px;width:22px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;display:block;background-color:#c1c6cd}.mx_ImageView_button_rotateCW:before{-webkit-mask-image:url(../../img/image-view/rotate-cw.60d903e.svg);mask-image:url(../../img/image-view/rotate-cw.60d903e.svg)}.mx_ImageView_button_rotateCCW:before{-webkit-mask-image:url(../../img/image-view/rotate-ccw.b28ae4a.svg);mask-image:url(../../img/image-view/rotate-ccw.b28ae4a.svg)}.mx_ImageView_button_zoomOut:before{-webkit-mask-image:url(../../img/image-view/zoom-out.8506f80.svg);mask-image:url(../../img/image-view/zoom-out.8506f80.svg)}.mx_ImageView_button_zoomIn:before{-webkit-mask-image:url(../../img/image-view/zoom-in.3b3f32e.svg);mask-image:url(../../img/image-view/zoom-in.3b3f32e.svg)}.mx_ImageView_button_download:before{-webkit-mask-image:url(../../img/image-view/download.2eac468.svg);mask-image:url(../../img/image-view/download.2eac468.svg)}.mx_ImageView_button_more:before{-webkit-mask-image:url(../../img/image-view/more.0427c6c.svg);mask-image:url(../../img/image-view/more.0427c6c.svg)}.mx_ImageView_button_close{border-radius:100%;background:#21262c}.mx_ImageView_button_close:before{width:32px;height:32px;-webkit-mask-image:url(../../img/image-view/close.97d1731.svg);mask-image:url(../../img/image-view/close.97d1731.svg);-webkit-mask-size:40%;mask-size:40%}.mx_InfoTooltip_icon,.mx_InfoTooltip_icon:before{width:16px;height:16px;display:inline-block}.mx_InfoTooltip_icon:before{background-color:#61708b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-position:center;mask-position:center;content:"";vertical-align:middle;-webkit-mask-image:url(../../img/element-icons/info.dc07e19.svg);mask-image:url(../../img/element-icons/info.dc07e19.svg)}.mx_InlineSpinner{display:inline}.mx_InlineSpinner_spin img{margin:0 6px;vertical-align:-3px}.mx_InviteReason{position:relative;margin-bottom:1em}.mx_InviteReason .mx_InviteReason_reason{visibility:visible}.mx_InviteReason .mx_InviteReason_view{display:none;position:absolute;top:0;bottom:0;left:0;right:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;color:#737d8c}.mx_InviteReason .mx_InviteReason_view:before{content:"";margin-right:8px;background-color:#737d8c;-webkit-mask-image:url(../../img/feather-customised/eye.52aa0d2.svg);mask-image:url(../../img/feather-customised/eye.52aa0d2.svg);display:inline-block;width:18px;height:14px}.mx_InviteReason_hidden .mx_InviteReason_reason{visibility:hidden}.mx_InviteReason_hidden .mx_InviteReason_view{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_ManageIntegsButton_error{position:relative;float:right;cursor:not-allowed}.mx_ManageIntegsButton_error img{position:absolute;right:-5px;top:-5px}.mx_ManageIntegsButton_errorPopup{position:absolute;top:110%;left:-275%;width:550%;padding:30%;font-size:10pt;line-height:1.5em;border-radius:5px;background-color:#0dbd8b;color:#fff;text-align:center;z-index:1000}.mx_ManageIntegsButton_error .mx_ManageIntegsButton_errorPopup{display:none}.mx_ManageIntegsButton_error:hover .mx_ManageIntegsButton_errorPopup{display:inline}.mx_MiniAvatarUploader{position:relative;width:-webkit-min-content;width:-moz-min-content;width:min-content}.mx_MiniAvatarUploader .mx_Tooltip{display:inline-block;position:absolute;z-index:unset;width:-webkit-max-content;width:-moz-max-content;width:max-content;left:72px;top:0}.mx_MiniAvatarUploader:after,.mx_MiniAvatarUploader:before{content:"";position:absolute;height:26px;width:26px;right:-6px;bottom:-6px}.mx_MiniAvatarUploader:before{background-color:#fff;border-radius:50%;z-index:1}.mx_MiniAvatarUploader:after{background-color:#737d8c;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/camera.a81a395.svg);mask-image:url(../../img/element-icons/camera.a81a395.svg);-webkit-mask-size:16px;mask-size:16px;z-index:2}.mx_MiniAvatarUploader.mx_MiniAvatarUploader_busy:after{background:url(../../img/spinner.0b29ec9.gif) no-repeat 50%;background-size:80%;-webkit-mask:unset;mask:unset}.mx_MiniAvatarUploader_input{display:none}.mx_PowerSelector{width:100%}.mx_PowerSelector .mx_Field input,.mx_PowerSelector .mx_Field select{-webkit-box-sizing:border-box;box-sizing:border-box}progress.mx_ProgressBar{height:6px;width:60px;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:6px}progress.mx_ProgressBar::-moz-progress-bar{border-radius:6px}progress.mx_ProgressBar::-webkit-progress-bar,progress.mx_ProgressBar::-webkit-progress-value{border-radius:6px}progress.mx_ProgressBar{color:#0dbd8b}progress.mx_ProgressBar::-moz-progress-bar{background-color:#0dbd8b}progress.mx_ProgressBar::-webkit-progress-value{background-color:#0dbd8b}progress.mx_ProgressBar{background-color:rgba(141,151,165,.2)}progress.mx_ProgressBar::-webkit-progress-bar{background-color:rgba(141,151,165,.2)}progress.mx_ProgressBar ::-webkit-progress-value{-webkit-transition:width 1s;transition:width 1s}progress.mx_ProgressBar ::-moz-progress-bar{-moz-transition:padding-bottom 1s;transition:padding-bottom 1s;padding-bottom:var(--value);transform-origin:0 0;transform:rotate(-90deg) translateX(-15px);padding-left:15px;height:0}.mx_QRCode img{border-radius:8px}.mx_ReplyThread{margin-top:0}.mx_ReplyThread .mx_DateSeparator{font-size:1em!important;margin-top:0;margin-bottom:0;padding-bottom:1px;bottom:-5px}.mx_ReplyThread_show{cursor:pointer}blockquote.mx_ReplyThread{margin-left:0;padding-left:10px;border-left:4px solid #ddd}.mx_ResizeHandle{cursor:row-resize;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;z-index:100}.mx_ResizeHandle.mx_ResizeHandle_horizontal{margin:0 -5px;padding:0 5px;cursor:col-resize}.mx_ResizeHandle.mx_ResizeHandle_vertical{margin:-5px 0;padding:5px 0;cursor:row-resize}.mx_MatrixChat>.mx_ResizeHandle.mx_ResizeHandle_horizontal{margin:0 -10px 0 0;padding:0 8px 0 0}.mx_ResizeHandle>div{background:transparent}.mx_ResizeHandle.mx_ResizeHandle_horizontal>div{width:1px;height:100%}.mx_ResizeHandle.mx_ResizeHandle_vertical>div{height:1px}.mx_AtRoomPill,.mx_GroupPill,.mx_RoomPill,.mx_UserPill{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:middle;border-radius:1.6rem;line-height:1.5rem;padding-left:0}a.mx_Pill{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 1ch)}.mx_Pill{padding:.1rem .4em .1rem .1rem;vertical-align:text-top;line-height:1.7rem}.mx_EventTile_content .markdown-body a.mx_GroupPill,.mx_GroupPill{color:#fff;background-color:#aaa}.mx_EventTile_content .markdown-body a.mx_Pill{text-decoration:none}.mx_EventTile_content .markdown-body a.mx_UserPill,.mx_UserPill{color:#2e2f32;background-color:rgba(0,0,0,.1)}.mx_UserPill_selected{background-color:#0dbd8b!important}.mx_EventTile_content .markdown-body a.mx_AtRoomPill,.mx_EventTile_content .mx_AtRoomPill,.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me,.mx_MessageComposer_input .mx_AtRoomPill{color:#fff;background-color:#ff4b55}.mx_EventTile_content .markdown-body a.mx_GroupPill,.mx_EventTile_content .markdown-body a.mx_RoomPill,.mx_GroupPill,.mx_RoomPill{color:#fff;background-color:#aaa}.mx_EventTile_body .mx_GroupPill,.mx_EventTile_body .mx_RoomPill,.mx_EventTile_body .mx_UserPill{cursor:pointer}.mx_AtRoomPill .mx_BaseAvatar,.mx_GroupPill .mx_BaseAvatar,.mx_RoomPill .mx_BaseAvatar,.mx_UserPill .mx_BaseAvatar{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:10rem;margin-right:.24rem}.mx_Markdown_BOLD{font-weight:700}.mx_Markdown_ITALIC{font-style:italic}.mx_Markdown_CODE{padding:.2em 0;margin:0;font-size:85%;background-color:rgba(0,0,0,.04);border-radius:3px}.mx_Markdown_HR{display:block;background:#e9e9e9}.mx_Markdown_STRIKETHROUGH{text-decoration:line-through}.mx_RoleButton{margin-left:4px;margin-right:4px;cursor:pointer;display:inline-block}.mx_RoleButton object{pointer-events:none}.mx_RoleButton_tooltip{display:inline-block;position:relative;top:-25px;left:6px}.mx_RoomAliasField{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;min-width:0;max-width:100%}.mx_RoomAliasField input{width:150px;padding-left:0;padding-right:0}.mx_RoomAliasField input::-webkit-input-placeholder{color:#888;font-weight:400}.mx_RoomAliasField input::-moz-placeholder{color:#888;font-weight:400}.mx_RoomAliasField input:-ms-input-placeholder{color:#888;font-weight:400}.mx_RoomAliasField input::-ms-input-placeholder{color:#888;font-weight:400}.mx_RoomAliasField input::placeholder{color:#888;font-weight:400}.mx_RoomAliasField .mx_Field_postfix,.mx_RoomAliasField .mx_Field_prefix{color:#888;border-left:none;border-right:none;font-weight:600;padding:9px 10px;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_RoomAliasField .mx_Field_postfix{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 180px)}.mx_SSOButtons{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_SSOButtons .mx_SSOButtons_row+.mx_SSOButtons_row{margin-top:16px}.mx_SSOButtons .mx_SSOButton{position:relative;width:100%;padding:7px 32px;text-align:center;border-radius:8px;display:inline-block;font-size:1.4rem;font-weight:600;border:1px solid #e7e7e7;color:#2e2f32}.mx_SSOButtons .mx_SSOButton>img{-o-object-fit:contain;object-fit:contain;position:absolute;left:8px;top:4px}.mx_SSOButtons .mx_SSOButton_default{color:#0dbd8b;background-color:#fff;border-color:#0dbd8b}.mx_SSOButtons .mx_SSOButton_default.mx_SSOButton_primary{color:#fff;background-color:#0dbd8b}.mx_SSOButtons .mx_SSOButton_mini{-webkit-box-sizing:border-box;box-sizing:border-box;width:50px;height:50px;min-width:50px;padding:12px}.mx_SSOButtons .mx_SSOButton_mini>img{left:12px;top:12px}.mx_SSOButtons .mx_SSOButton_mini+.mx_SSOButton_mini{margin-left:16px}.mx_ServerPicker{margin-bottom:14px;border-bottom:1px solid rgba(141,151,165,.2);display:grid;grid-template-columns:auto -webkit-min-content;grid-template-columns:auto min-content;grid-template-rows:auto auto auto;font-size:1.4rem;line-height:2rem}.mx_ServerPicker>h3{font-weight:600;margin:0 0 20px;grid-column:1;grid-row:1}.mx_ServerPicker .mx_ServerPicker_help{width:20px;height:20px;background-color:#c1c6cd;border-radius:10px;grid-column:2;grid-row:1;margin-left:auto;text-align:center;color:#fff;font-size:16px;position:relative}.mx_ServerPicker .mx_ServerPicker_help:before{content:"";width:24px;height:24px;position:absolute;top:-2px;left:-2px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/i.80d84f3.svg);mask-image:url(../../img/element-icons/i.80d84f3.svg);background:#fff}.mx_ServerPicker .mx_ServerPicker_server{color:#232f32;grid-column:1;grid-row:2;margin-bottom:16px}.mx_ServerPicker .mx_ServerPicker_change{padding:0;font-size:inherit;grid-column:2;grid-row:2}.mx_ServerPicker .mx_ServerPicker_desc{margin-top:-12px;color:#8d99a5;grid-column:1/2;grid-row:3;margin-bottom:16px}.mx_ServerPicker_helpDialog .mx_Dialog_content{width:456px}.mx_Slider{position:relative;margin:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_Slider_dotContainer{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mx_Slider_bar,.mx_Slider_dotContainer{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_Slider_bar{-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;height:1em;width:100%;padding:0 .5em;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_Slider_bar>hr{width:100%;height:.4em;background-color:#c1c9d6;border:0}.mx_Slider_selection{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:calc(100% - 1em);height:1em;position:absolute;pointer-events:none}.mx_Slider_selectionDot{position:absolute;width:1.1em;height:1.1em;background-color:#0dbd8b;border-radius:50%;-webkit-box-shadow:0 0 6px #d3d3d3;box-shadow:0 0 6px #d3d3d3;z-index:10}.mx_Slider_selection>hr{margin:0;border:.2em solid #0dbd8b}.mx_Slider_dot{height:1em;width:1em;border-radius:50%;background-color:#c1c9d6;z-index:0}.mx_Slider_dotActive{background-color:#0dbd8b}.mx_Slider_dotValue{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#c1c9d6}.mx_Slider_labelContainer{width:1em}.mx_Slider_label{position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;left:-50%}.mx_Spinner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_MatrixChat_middlePanel .mx_Spinner{height:auto}.mx_Checkbox{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mx_Checkbox input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0}.mx_Checkbox input[type=checkbox]+label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_Checkbox input[type=checkbox]+label>.mx_Checkbox_background{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-negative:0;flex-shrink:0;height:1.6rem;width:1.6rem;size:.5rem;border:.15rem solid rgba(97,112,139,.5);-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:.4rem}.mx_Checkbox input[type=checkbox]+label>.mx_Checkbox_background img{display:none;height:100%;width:100%;-webkit-filter:invert(100%);filter:invert(100%)}.mx_Checkbox input[type=checkbox]:checked+label>.mx_Checkbox_background{background:#0dbd8b;border-color:#0dbd8b}.mx_Checkbox input[type=checkbox]:checked+label>.mx_Checkbox_background img{display:block}.mx_Checkbox input[type=checkbox]+label>:not(.mx_Checkbox_background){margin-left:10px}.mx_Checkbox input[type=checkbox]:disabled+label{opacity:.5;cursor:not-allowed}.mx_Checkbox input[type=checkbox]:checked:disabled+label>.mx_Checkbox_background{background-color:#0dbd8b;border-color:#0dbd8b}.mx_Checkbox input[type=checkbox].focus-visible+label .mx_Checkbox_background{outline-width:2px;outline-style:solid;outline-color:Highlight}@media (-webkit-min-device-pixel-ratio:0){.mx_Checkbox input[type=checkbox].focus-visible+label .mx_Checkbox_background{outline-color:-webkit-focus-ring-color;outline-style:auto}}.mx_RadioButton{position:relative;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.mx_RadioButton,.mx_RadioButton>.mx_RadioButton_content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_RadioButton>.mx_RadioButton_content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-left:8px;margin-right:8px}.mx_RadioButton .mx_RadioButton_spacer{-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;height:1.6rem;width:1.6rem}.mx_RadioButton>input[type=radio]{margin:0;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.mx_RadioButton>input[type=radio]+div{-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;height:1.6rem;width:1.6rem;margin-left:2px;border:.15rem solid #61708b;border-radius:1.6rem}.mx_RadioButton>input[type=radio]+div>div{-webkit-box-sizing:border-box;box-sizing:border-box;height:.8rem;width:.8rem;border-radius:.8rem}.mx_RadioButton>input[type=radio].focus-visible+div{outline-width:2px;outline-style:solid;outline-color:Highlight}@media (-webkit-min-device-pixel-ratio:0){.mx_RadioButton>input[type=radio].focus-visible+div{outline-color:-webkit-focus-ring-color;outline-style:auto}}.mx_RadioButton>input[type=radio]:checked+div{border-color:#0dbd8b}.mx_RadioButton>input[type=radio]:checked+div>div{background:#0dbd8b}.mx_RadioButton>input[type=radio]:disabled+div,.mx_RadioButton>input[type=radio]:disabled+div+span{opacity:.5;cursor:not-allowed}.mx_RadioButton>input[type=radio]:disabled+div{border-color:#61708b}.mx_RadioButton>input[type=radio]:checked:disabled+div>div{background-color:#61708b}.mx_RadioButton_outlined{border:1px solid #e3e8f0;border-radius:8px}.mx_RadioButton_checked{border-color:#0dbd8b}.mx_SyntaxHighlight{background:none!important;color:#747474!important}.mx_TextWithTooltip_tooltip{display:none}.mx_ToggleSwitch{-webkit-transition:background-color .2s ease-out .1s;transition:background-color .2s ease-out .1s;width:4.4rem;height:2rem;border-radius:1.5rem;padding:2px;background-color:#c1c9d6;opacity:.5}.mx_ToggleSwitch_enabled{cursor:pointer;opacity:1}.mx_ToggleSwitch.mx_ToggleSwitch_on{background-color:#0dbd8b}.mx_ToggleSwitch.mx_ToggleSwitch_on>.mx_ToggleSwitch_ball{left:calc(100% - 2rem)}.mx_ToggleSwitch_ball{position:relative;width:2rem;height:2rem;border-radius:2rem;background-color:#fff;-webkit-transition:left .15s ease-out .1s;transition:left .15s ease-out .1s;left:0}@-webkit-keyframes mx_fadein{0%{opacity:0}to{opacity:1}}@keyframes mx_fadein{0%{opacity:0}to{opacity:1}}@-webkit-keyframes mx_fadeout{0%{opacity:1}to{opacity:0}}@keyframes mx_fadeout{0%{opacity:1}to{opacity:0}}.mx_Tooltip_chevron{position:absolute;left:-7px;top:10px;width:0;height:0;border-top:7px solid transparent;border-right:7px solid #e7e7e7;border-bottom:7px solid transparent}.mx_Tooltip_chevron:after{content:"";width:0;height:0;border-top:6px solid transparent;border-right:6px solid #fff;border-bottom:6px solid transparent;position:absolute;top:-6px;left:1px}.mx_Tooltip{position:fixed;border-radius:8px;-webkit-box-shadow:4px 4px 12px 0 rgba(118,131,156,.6);box-shadow:4px 4px 12px 0 rgba(118,131,156,.6);z-index:6000;padding:10px;pointer-events:none;line-height:1.4rem;font-size:1.2rem;font-weight:500;max-width:200px;word-break:break-word;margin-right:50px;background-color:#27303a;color:#fff;border:0;text-align:center}.mx_Tooltip,.mx_Tooltip .mx_Tooltip_chevron{display:none}.mx_Tooltip.mx_Tooltip_visible{-webkit-animation:mx_fadein .2s forwards;animation:mx_fadein .2s forwards}.mx_Tooltip.mx_Tooltip_invisible{-webkit-animation:mx_fadeout .1s forwards;animation:mx_fadeout .1s forwards}.mx_Field_tooltip{background-color:#fff;color:#2e2f32;border:1px solid #e7e7e7;text-align:unset}.mx_Field_tooltip .mx_Tooltip_chevron{display:unset}.mx_Tooltip_title{font-weight:600}.mx_Tooltip_sub{opacity:.7;margin-top:4px}.mx_TooltipButton{display:inline-block;width:11px;height:11px;margin-left:5px;border:2px solid #dbdbdb;border-radius:20px;color:#dbdbdb;-webkit-transition:opacity .2s ease-in;transition:opacity .2s ease-in;opacity:.6;line-height:1.1rem;text-align:center;cursor:pointer}.mx_TooltipButton:hover{opacity:1}.mx_TooltipButton_container{position:relative;top:-18px;left:4px}.mx_TooltipButton_helpText{width:400px;text-align:start;line-height:17px!important}.mx_Validation{position:relative}.mx_Validation_details{padding-left:20px;margin:0}.mx_Validation_description+.mx_Validation_details{margin:1em 0 0}.mx_Validation_detail{position:relative;font-weight:400;list-style:none;margin-bottom:.5em}.mx_Validation_detail:last-child{margin-bottom:0}.mx_Validation_detail:before{content:"";position:absolute;width:14px;height:14px;top:0;left:-18px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.mx_Validation_detail.mx_Validation_valid{color:#0dbd8b}.mx_Validation_detail.mx_Validation_valid:before{-webkit-mask-image:url(../../img/feather-customised/check.5745b4e.svg);mask-image:url(../../img/feather-customised/check.5745b4e.svg);background-color:#0dbd8b}.mx_Validation_detail.mx_Validation_invalid{color:#ff4b55}.mx_Validation_detail.mx_Validation_invalid:before{-webkit-mask-image:url(../../img/feather-customised/x.9662221.svg);mask-image:url(../../img/feather-customised/x.9662221.svg);background-color:#ff4b55}.mx_EmojiPicker{width:340px;height:450px;border-radius:4px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_EmojiPicker_body{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-y:scroll;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.mx_EmojiPicker_header{padding:4px 8px 0;border-bottom:1px solid #e9edf1}.mx_EmojiPicker_anchor{padding:8px 8px 6px;border:none;border-bottom:2px solid transparent;background-color:transparent;border-radius:4px 4px 0 0;width:36px;height:38px}.mx_EmojiPicker_anchor:not(:disabled){cursor:pointer}.mx_EmojiPicker_anchor:not(:disabled):hover{background-color:#ddd;border-bottom:2px solid #0dbd8b}.mx_EmojiPicker_anchor:before{background-color:#2e2f32;content:"";display:inline-block;-webkit-mask-size:100%;mask-size:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;width:100%;height:100%}.mx_EmojiPicker_anchor:disabled:before{background-color:#ddd}.mx_EmojiPicker_anchor_activity:before{-webkit-mask-image:url(../../img/emojipicker/activity.921ec9f.svg);mask-image:url(../../img/emojipicker/activity.921ec9f.svg)}.mx_EmojiPicker_anchor_custom:before{-webkit-mask-image:url(../../img/emojipicker/custom.e1cd0fd.svg);mask-image:url(../../img/emojipicker/custom.e1cd0fd.svg)}.mx_EmojiPicker_anchor_flags:before{-webkit-mask-image:url(../../img/emojipicker/flags.1a8855e.svg);mask-image:url(../../img/emojipicker/flags.1a8855e.svg)}.mx_EmojiPicker_anchor_foods:before{-webkit-mask-image:url(../../img/emojipicker/foods.c6b220a.svg);mask-image:url(../../img/emojipicker/foods.c6b220a.svg)}.mx_EmojiPicker_anchor_nature:before{-webkit-mask-image:url(../../img/emojipicker/nature.6540b99.svg);mask-image:url(../../img/emojipicker/nature.6540b99.svg)}.mx_EmojiPicker_anchor_objects:before{-webkit-mask-image:url(../../img/emojipicker/objects.4d34f58.svg);mask-image:url(../../img/emojipicker/objects.4d34f58.svg)}.mx_EmojiPicker_anchor_people:before{-webkit-mask-image:url(../../img/emojipicker/people.e918580.svg);mask-image:url(../../img/emojipicker/people.e918580.svg)}.mx_EmojiPicker_anchor_places:before{-webkit-mask-image:url(../../img/emojipicker/places.7310322.svg);mask-image:url(../../img/emojipicker/places.7310322.svg)}.mx_EmojiPicker_anchor_recent:before{-webkit-mask-image:url(../../img/emojipicker/recent.13b42e2.svg);mask-image:url(../../img/emojipicker/recent.13b42e2.svg)}.mx_EmojiPicker_anchor_symbols:before{-webkit-mask-image:url(../../img/emojipicker/symbols.15a557d.svg);mask-image:url(../../img/emojipicker/symbols.15a557d.svg)}.mx_EmojiPicker_anchor_visible{border-bottom:2px solid #0dbd8b}.mx_EmojiPicker_search{margin:8px;border-radius:4px;border:1px solid #e7e7e7;background-color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_EmojiPicker_search input{-webkit-box-flex:1;-ms-flex:1;flex:1;border:none;padding:8px 12px;border-radius:4px 0}.mx_EmojiPicker_search button{border:none;background-color:inherit;margin:0;padding:8px;-ms-flex-item-align:center;align-self:center;width:32px;height:32px}.mx_EmojiPicker_search_clear{cursor:pointer}.mx_EmojiPicker_search_icon{width:16px;margin:8px}.mx_EmojiPicker_search_icon:not(.mx_EmojiPicker_search_clear){pointer-events:none}.mx_EmojiPicker_search_icon:after{-webkit-mask:url(../../img/emojipicker/search.973c315.svg) no-repeat;mask:url(../../img/emojipicker/search.973c315.svg) no-repeat;-webkit-mask-size:100%;mask-size:100%;background-color:#2e2f32;content:"";display:inline-block;width:100%;height:100%}.mx_EmojiPicker_search_clear:after{-webkit-mask-image:url(../../img/emojipicker/delete.f7344c5.svg);mask-image:url(../../img/emojipicker/delete.f7344c5.svg)}.mx_EmojiPicker_category{padding:0 12px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_EmojiPicker_category_label{width:304px}.mx_EmojiPicker_list{width:304px;padding:0;margin:0}.mx_EmojiPicker_item_wrapper{display:inline-block;list-style:none;width:38px;cursor:pointer}.mx_EmojiPicker_item{display:inline-block;font-size:2rem;padding:5px;width:100%;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;border-radius:4px}.mx_EmojiPicker_item:hover{background-color:#ddd}.mx_EmojiPicker_item_selected{color:rgba(0,0,0,.5);border:1px solid #0dbd8b;padding:4px}.mx_EmojiPicker_category_label,.mx_EmojiPicker_preview_name{font-size:1.6rem;font-weight:600;margin:0}.mx_EmojiPicker_footer{border-top:1px solid #e9edf1;min-height:72px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_EmojiPicker_preview_emoji{font-size:3.2rem;padding:8px 16px}.mx_EmojiPicker_preview_text{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_EmojiPicker_name{text-transform:capitalize}.mx_EmojiPicker_shortcode{color:#747474;font-size:1.4rem}.mx_EmojiPicker_shortcode:after,.mx_EmojiPicker_shortcode:before{content:":"}.mx_EmojiPicker_quick{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:distribute;justify-content:space-around}.mx_EmojiPicker_quick_header .mx_EmojiPicker_name{margin-right:4px}.mx_GroupPublicity_toggle{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:8px}.mx_GroupPublicity_toggle .mx_GroupTile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%}.mx_GroupPublicity_toggle .mx_ToggleSwitch{float:right}.mx_GroupRoomTile{position:relative;color:#2e2f32;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_GroupRoomList_wrapper{padding:10px}.mx_GroupUserSettings_groupPublicity_scrollbox{height:200px;border:1px solid transparent;border-radius:3px;overflow:hidden}.mx_CreateEvent:before{background-color:#91a1c0;-webkit-mask-image:url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);mask-image:url(../../img/element-icons/chat-bubbles.e2bd2cb.svg)}.mx_DateSeparator{clear:both;margin:4px 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.4rem;color:#9e9e9e}.mx_DateSeparator>hr{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;height:0;border:none;border-bottom:1px solid transparent}.mx_DateSeparator>div{margin:0 25px;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_EventTileBubble{background-color:#f2f5f8;padding:10px;border-radius:8px;margin:10px auto;max-width:75%;-webkit-box-sizing:border-box;box-sizing:border-box;display:grid;grid-template-columns:24px minmax(0,1fr) -webkit-min-content;grid-template-columns:24px minmax(0,1fr) min-content}.mx_EventTileBubble:after,.mx_EventTileBubble:before{position:relative;grid-column:1;grid-row:1/3;width:16px;height:16px;content:"";top:0;bottom:0;left:0;right:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;margin-top:4px}.mx_EventTileBubble .mx_EventTileBubble_subtitle,.mx_EventTileBubble .mx_EventTileBubble_title{overflow-wrap:break-word}.mx_EventTileBubble .mx_EventTileBubble_title{font-weight:600;font-size:1.5rem;grid-column:2;grid-row:1}.mx_EventTileBubble .mx_EventTileBubble_subtitle{font-size:1.2rem;grid-column:2;grid-row:2}.mx_MEmoteBody{white-space:pre-wrap}.mx_MEmoteBody_sender{cursor:pointer}.mx_MFileBody_download{color:#0dbd8b}.mx_MFileBody_download .mx_MFileBody_download_icon{width:12px;height:12px;-webkit-mask-size:12px;mask-size:12px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/download.4f331f0.svg);mask-image:url(../../img/download.4f331f0.svg);background-color:#0dbd8b;display:inline-block}.mx_MFileBody_download a{color:#0dbd8b;text-decoration:none;cursor:pointer}.mx_MFileBody_download object{margin-left:-16px;padding-right:4px;margin-top:-4px;vertical-align:middle;pointer-events:none}.mx_MFileBody_download iframe{margin:0;padding:0;border:none;width:100%;height:1.5em}.mx_MFileBody_info{background-color:#e3e8f0;border-radius:12px;width:243px;padding:6px 12px;color:#737d8c}.mx_MFileBody_info .mx_MFileBody_info_icon{background-color:#fff;border-radius:20px;display:inline-block;width:32px;height:32px;position:relative;vertical-align:middle;margin-right:12px}.mx_MFileBody_info .mx_MFileBody_info_icon:before{content:"";-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-image:url(../../img/element-icons/room/composer/attach.359c84e.svg);mask-image:url(../../img/element-icons/room/composer/attach.359c84e.svg);background-color:#737d8c;width:13px;height:15px;position:absolute;top:8px;left:9px}.mx_MFileBody_info .mx_MFileBody_info_filename{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:inline-block;width:calc(100% - 44px);vertical-align:middle}.mx_MImageBody{display:block;margin-right:34px}.mx_MImageBody_thumbnail{position:absolute;width:100%;height:100%;left:0;top:0;border-radius:4px}.mx_MImageBody_thumbnail_container{overflow:hidden;position:relative}.mx_MImageBody_thumbnail_spinner{position:absolute;left:50%;top:50%}.mx_MImageBody_thumbnail_spinner>*{-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.mx_MImageBody_gifLabel{position:absolute;display:block;top:0;left:14px;padding:5px;border-radius:5px;background:rgba(0,0,0,.7);border:2px solid rgba(0,0,0,.2);color:#fff;pointer-events:none}.mx_HiddenImagePlaceholder{position:absolute;left:0;top:0;bottom:0;right:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center;cursor:pointer;background-color:#f3f8fd}.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button{color:#0dbd8b}.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button span.mx_HiddenImagePlaceholder_eye{margin-right:8px;background-color:#0dbd8b;-webkit-mask-image:url(../../img/feather-customised/eye.52aa0d2.svg);mask-image:url(../../img/feather-customised/eye.52aa0d2.svg);display:inline-block;width:18px;height:14px}.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button span:not(.mx_HiddenImagePlaceholder_eye){vertical-align:text-bottom}.mx_EventTile:hover .mx_HiddenImagePlaceholder{background-color:#fff}.mx_MJitsiWidgetEvent:before{background-color:#91a1c0;-webkit-mask-image:url(../../img/element-icons/call/video-call.f465ed0.svg);mask-image:url(../../img/element-icons/call/video-call.f465ed0.svg)}.mx_MNoticeBody{white-space:pre-wrap;opacity:.6}.mx_MStickerBody_wrapper{padding:20px 0}.mx_MStickerBody_tooltip{position:absolute;top:50%}.mx_MStickerBody_hidden{max-width:220px;text-decoration:none;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_MTextBody{white-space:pre-wrap}span.mx_MVideoBody video.mx_MVideoBody{max-width:100%;height:auto;border-radius:4px}.mx_MVoiceMessageBody{display:inline-block}.mx_MessageActionBar{position:absolute;visibility:hidden;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;height:24px;line-height:2.4rem;border-radius:4px;background:#fff;top:-26px;right:8px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1}.mx_MessageActionBar:before{content:"";position:absolute;width:calc(66px + 100%);height:calc(20px + 100%);top:-12px;left:-58px;z-index:-1;cursor:auto}.mx_MessageActionBar>*{white-space:nowrap;display:inline-block;position:relative;border:1px solid #e9edf1;margin-left:-1px}.mx_MessageActionBar>:hover{border-color:#ddd;z-index:1}.mx_MessageActionBar>:first-child{border-radius:3px 0 0 3px}.mx_MessageActionBar>:last-child{border-radius:0 3px 3px 0}.mx_MessageActionBar>:only-child{border-radius:3px}.mx_MessageActionBar_maskButton{width:27px}.mx_MessageActionBar_maskButton:after{content:"";position:absolute;top:0;left:0;height:100%;width:100%;-webkit-mask-size:18px;mask-size:18px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#2e2f32}.mx_MessageActionBar_reactButton:after{-webkit-mask-image:url(../../img/element-icons/room/message-bar/emoji.af14771.svg);mask-image:url(../../img/element-icons/room/message-bar/emoji.af14771.svg)}.mx_MessageActionBar_replyButton:after{-webkit-mask-image:url(../../img/element-icons/room/message-bar/reply.5812741.svg);mask-image:url(../../img/element-icons/room/message-bar/reply.5812741.svg)}.mx_MessageActionBar_editButton:after{-webkit-mask-image:url(../../img/element-icons/room/message-bar/edit.688678e.svg);mask-image:url(../../img/element-icons/room/message-bar/edit.688678e.svg)}.mx_MessageActionBar_optionsButton:after{-webkit-mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);mask-image:url(../../img/element-icons/context-menu.829cc1a.svg)}.mx_MessageActionBar_resendButton:after{-webkit-mask-image:url(../../img/element-icons/retry.6cd23ad.svg);mask-image:url(../../img/element-icons/retry.6cd23ad.svg)}.mx_MessageActionBar_cancelButton:after{-webkit-mask-image:url(../../img/element-icons/trashcan.26f6c28.svg);mask-image:url(../../img/element-icons/trashcan.26f6c28.svg)}.mx_MessageTimestamp{color:#acacac;font-size:1rem;-webkit-font-feature-settings:"tnum";font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.mx_MjolnirBody{opacity:.4}.mx_ReactionsRow{margin:6px 0;color:#2e2f32}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton{position:relative;display:inline-block;visibility:hidden;width:24px;height:24px;vertical-align:middle;margin-left:4px}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton:before{content:"";position:absolute;height:100%;width:100%;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#8d99a5;-webkit-mask-image:url(../../img/element-icons/room/message-bar/emoji.af14771.svg);mask-image:url(../../img/element-icons/room/message-bar/emoji.af14771.svg)}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton.mx_ReactionsRow_addReactionButton_active{visibility:visible}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton.mx_ReactionsRow_addReactionButton_active:before,.mx_ReactionsRow .mx_ReactionsRow_addReactionButton:hover:before{background-color:#2e2f32}.mx_EventTile:hover .mx_ReactionsRow_addReactionButton{visibility:visible}.mx_ReactionsRow_showAll{text-decoration:none;font-size:1.2rem;line-height:2rem;margin-left:4px;vertical-align:middle}.mx_ReactionsRow_showAll:link,.mx_ReactionsRow_showAll:visited{color:#8d99a5}.mx_ReactionsRow_showAll:hover{color:#2e2f32}.mx_ReactionsRowButton{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;line-height:2rem;margin-right:6px;padding:1px 6px;border:1px solid #e9edf1;border-radius:10px;background-color:#f3f8fd;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.mx_ReactionsRowButton:hover{border-color:#ddd}.mx_ReactionsRowButton.mx_ReactionsRowButton_selected{background-color:#e9fff9;border-color:#0dbd8b}.mx_ReactionsRowButton.mx_AccessibleButton_disabled{cursor:not-allowed}.mx_ReactionsRowButton .mx_ReactionsRowButton_content{max-width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-right:4px}.mx_RedactedBody{white-space:pre-wrap;color:#61708b;vertical-align:middle;padding-left:20px;position:relative}.mx_RedactedBody:before{height:14px;width:14px;background-color:#61708b;-webkit-mask-image:url(../../img/feather-customised/trash.custom.1e6ecd4.svg);mask-image:url(../../img/feather-customised/trash.custom.1e6ecd4.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;content:"";position:absolute;top:1px;left:0}.mx_RoomAvatarEvent{opacity:.5;overflow-y:hidden}.mx_RoomAvatarEvent_avatar{display:inline;position:relative;top:5px}.mx_SenderProfile_name{font-weight:600}.mx_TextualEvent{opacity:.5;overflow-y:hidden}.mx_UnknownBody{white-space:pre-wrap}.mx_EventTile_content.mx_ViewSourceEvent{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:.6;font-size:1.2rem}.mx_EventTile_content.mx_ViewSourceEvent code,.mx_EventTile_content.mx_ViewSourceEvent pre{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_EventTile_content.mx_ViewSourceEvent pre{line-height:1.2;margin:3.5px 0}.mx_EventTile_content.mx_ViewSourceEvent .mx_ViewSourceEvent_toggle{width:12px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 center;mask-position:0 center;-webkit-mask-size:auto 12px;mask-size:auto 12px;visibility:hidden;background-color:#0dbd8b;-webkit-mask-image:url(../../img/feather-customised/maximise.dc32127.svg);mask-image:url(../../img/feather-customised/maximise.dc32127.svg)}.mx_EventTile_content.mx_ViewSourceEvent.mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle{-webkit-mask-position:0 bottom;mask-position:0 bottom;margin-bottom:7px;-webkit-mask-image:url(../../img/feather-customised/minimise.aec9142.svg);mask-image:url(../../img/feather-customised/minimise.aec9142.svg)}.mx_EventTile_content.mx_ViewSourceEvent:hover .mx_ViewSourceEvent_toggle{visibility:visible}.mx_cryptoEvent.mx_cryptoEvent_icon:before{background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:90%;mask-size:90%}.mx_cryptoEvent.mx_cryptoEvent_icon:after,.mx_cryptoEvent.mx_cryptoEvent_icon:before{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg)}.mx_cryptoEvent.mx_cryptoEvent_icon:after{background-color:#91a1c0}.mx_cryptoEvent.mx_cryptoEvent_icon_verified:after{-webkit-mask-image:url(../../img/e2e/verified.5be6c9f.svg);mask-image:url(../../img/e2e/verified.5be6c9f.svg);background-color:#0dbd8b}.mx_cryptoEvent.mx_cryptoEvent_icon_warning:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_cryptoEvent .mx_cryptoEvent_buttons,.mx_cryptoEvent .mx_cryptoEvent_state{grid-column:3;grid-row:1/3}.mx_cryptoEvent .mx_cryptoEvent_buttons{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_cryptoEvent .mx_cryptoEvent_state{width:130px;padding:10px 20px;margin:auto 0;text-align:center;color:#8d99a5;overflow-wrap:break-word;font-size:1.2rem}.mx_BaseCard{padding:0 8px;overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_BaseCard .mx_BaseCard_header{margin:8px 0}.mx_BaseCard .mx_BaseCard_header>h2{margin:0 44px;font-size:1.8rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back,.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close{position:absolute;background-color:rgba(141,151,165,.2);height:20px;width:20px;margin:12px;top:0;border-radius:10px}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back:before,.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close:before{content:"";position:absolute;height:20px;width:20px;top:0;left:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#91a1c0}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back{left:0}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back:before{-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-mask-size:22px;mask-size:22px;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close{right:0}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close:before{-webkit-mask-image:url(../../img/icons-close.11ff07c.svg);mask-image:url(../../img/icons-close.11ff07c.svg);-webkit-mask-size:8px;mask-size:8px}.mx_BaseCard .mx_AutoHideScrollbar{margin-right:-8px;padding-right:8px;min-height:0;width:100%;height:100%}.mx_BaseCard .mx_BaseCard_Group{margin:20px 0 16px}.mx_BaseCard .mx_BaseCard_Group>*{margin-left:12px;margin-right:12px}.mx_BaseCard .mx_BaseCard_Group>h1{color:#8d99a5;font-size:1.2rem;font-weight:500}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button{padding:10px 38px 10px 12px;margin:0;position:relative;font-size:1.3rem;height:20px;line-height:20px;border-radius:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button:hover{background-color:rgba(141,151,165,.1)}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button:after{content:"";position:absolute;top:10px;right:6px;height:20px;width:20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#c1c6cd;-webkit-transform:rotate(270deg);transform:rotate(270deg);-webkit-mask-size:20px;mask-size:20px;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button.mx_AccessibleButton_disabled{padding-right:12px}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button.mx_AccessibleButton_disabled:after{content:unset}.mx_BaseCard .mx_BaseCard_footer{padding-top:4px;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_kind_secondary{color:#737d8c;background-color:rgba(141,151,165,.2);font-weight:600;font-size:1.4rem}.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_disabled{cursor:not-allowed}.mx_FilePanel.mx_BaseCard,.mx_MemberList.mx_BaseCard,.mx_NotificationPanel.mx_BaseCard,.mx_UserInfo.mx_BaseCard{padding:32px 0 0}.mx_FilePanel.mx_BaseCard .mx_AutoHideScrollbar,.mx_MemberList.mx_BaseCard .mx_AutoHideScrollbar,.mx_NotificationPanel.mx_BaseCard .mx_AutoHideScrollbar,.mx_UserInfo.mx_BaseCard .mx_AutoHideScrollbar{margin-right:unset;padding-right:unset}.mx_EncryptionInfo_spinner .mx_Spinner{margin-top:25px;margin-bottom:15px}.mx_EncryptionInfo_spinner{text-align:center}.mx_RoomSummaryCard .mx_BaseCard_header{text-align:center;margin-top:20px}.mx_RoomSummaryCard .mx_BaseCard_header h2{font-weight:600;font-size:1.8rem;margin:12px 0 4px}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_alias{font-size:1.3rem;color:#737d8c}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_alias,.mx_RoomSummaryCard .mx_BaseCard_header h2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee{display:inline-block;position:relative;width:54px;height:54px;border-radius:50%;background-color:#737d8c;margin-top:-3px;margin-left:-10px;border:3px solid #f2f5f8}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee:before{content:"";position:absolute;top:13px;left:13px;height:28px;width:28px;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-image:url(../../img/e2e/disabled.6c5c6be.svg);mask-image:url(../../img/e2e/disabled.6c5c6be.svg);background-color:#fff}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_normal{background-color:#424446}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_normal:before{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg)}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_verified{background-color:#0dbd8b}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_verified:before{-webkit-mask-image:url(../../img/e2e/verified.5be6c9f.svg);mask-image:url(../../img/e2e/verified.5be6c9f.svg)}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_warning{background-color:#ff4b55}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_warning:before{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg)}.mx_RoomSummaryCard .mx_RoomSummaryCard_aboutGroup .mx_RoomSummaryCard_Button{padding-left:44px}.mx_RoomSummaryCard .mx_RoomSummaryCard_aboutGroup .mx_RoomSummaryCard_Button:before{content:"";position:absolute;top:8px;left:10px;height:24px;width:24px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#c1c6cd}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button{padding:0;height:auto;color:#8d99a5}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_icon_app{padding:10px 48px 10px 12px;text-overflow:ellipsis;overflow:hidden}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_icon_app .mx_BaseAvatar_image{vertical-align:top;margin-right:12px}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_icon_app span{color:#2e2f32}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options,.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle{position:absolute;top:0;height:100%;width:24px;padding:12px 4px;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:24px}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options:hover:after,.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle:hover:after{content:"";position:absolute;height:24px;width:24px;top:8px;left:0;border-radius:12px;background-color:rgba(141,151,165,.1)}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options:before,.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle:before{content:"";position:absolute;height:16px;width:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:16px;mask-size:16px;background-color:#c1c6cd}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle{right:24px}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle:before{-webkit-mask-image:url(../../img/element-icons/room/pin-upright.65783fb.svg);mask-image:url(../../img/element-icons/room/pin-upright.65783fb.svg)}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options{right:48px;display:none}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options:before{-webkit-mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg)}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button.mx_RoomSummaryCard_Button_pinned:after{opacity:.2}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button.mx_RoomSummaryCard_Button_pinned .mx_RoomSummaryCard_app_pinToggle:before{background-color:#0dbd8b}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:hover .mx_RoomSummaryCard_icon_app{padding-right:72px}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:hover .mx_RoomSummaryCard_app_options{display:unset}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:before{content:unset}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:after{top:8px;pointer-events:none}.mx_RoomSummaryCard .mx_AccessibleButton_kind_link{padding:0;margin-top:12px;margin-bottom:12px;font-size:1.3rem;font-weight:600}.mx_RoomSummaryCard_icon_people:before{-webkit-mask-image:url(../../img/element-icons/room/members.88c3e93.svg);mask-image:url(../../img/element-icons/room/members.88c3e93.svg)}.mx_RoomSummaryCard_icon_files:before{-webkit-mask-image:url(../../img/element-icons/room/files.5709c0c.svg);mask-image:url(../../img/element-icons/room/files.5709c0c.svg)}.mx_RoomSummaryCard_icon_share:before{-webkit-mask-image:url(../../img/element-icons/room/share.54dc3fb.svg);mask-image:url(../../img/element-icons/room/share.54dc3fb.svg)}.mx_RoomSummaryCard_icon_settings:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_UserInfo.mx_BaseCard{padding-top:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-y:auto;font-size:1.2rem}.mx_UserInfo.mx_BaseCard .mx_UserInfo_cancel{cursor:pointer;position:absolute;top:0;border-radius:4px;background-color:#f2f5f8;margin:9px;z-index:1}.mx_UserInfo.mx_BaseCard .mx_UserInfo_cancel div{height:16px;width:16px;padding:4px;-webkit-mask-image:url(../../img/minimise.871d2de.svg);mask-image:url(../../img/minimise.871d2de.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:7px center;mask-position:7px center;background-color:#91a1c0}.mx_UserInfo.mx_BaseCard h2{font-size:1.8rem;font-weight:600;margin:18px 0 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_container{padding:8px 16px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_separator{border-bottom:1px solid rgba(46,47,50,.1)}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetailsContainer{padding-top:0;padding-bottom:0;margin-bottom:8px}.mx_UserInfo.mx_BaseCard .mx_RoomTile_nameContainer{width:154px}.mx_UserInfo.mx_BaseCard .mx_RoomTile_badge{display:none}.mx_UserInfo.mx_BaseCard .mx_RoomTile_name{width:160px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar{margin:24px 32px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar>div{max-width:30vh;margin:0 auto;-webkit-transition:.5s;transition:.5s}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar>div>div{padding-top:100%;position:relative}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar>div>div *{border-radius:100%;position:absolute;top:0;left:0;width:100%!important;height:100%!important}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar .mx_BaseAvatar_initial{z-index:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:6rem!important;width:100%!important;-webkit-transition:font-size .5s;transition:font-size .5s}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image{cursor:-webkit-zoom-in;cursor:zoom-in}.mx_UserInfo.mx_BaseCard h3{text-transform:uppercase;color:#8d99a5;font-weight:600;font-size:1.2rem;margin:4px 0}.mx_UserInfo.mx_BaseCard p{margin:5px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile{text-align:center}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.8rem;line-height:2.5rem;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;word-break:break-all;text-overflow:ellipsis}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 .mx_E2EIcon{margin-top:3px;margin-right:4px;min-width:18px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_UserInfo_profileStatus{margin-top:12px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField{margin:6px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField,.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField .mx_UserInfo_roleDescription{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField .mx_UserInfo_roleDescription{margin:11px 0 12px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField .mx_Field{margin:0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_field{cursor:pointer;color:#0dbd8b;line-height:1.6rem;margin:8px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_field.mx_UserInfo_destructive{color:#ff4b55}.mx_UserInfo.mx_BaseCard .mx_UserInfo_statusMessage{font-size:1.1rem;opacity:.5;overflow:hidden;white-space:nowrap;text-overflow:clip}.mx_UserInfo.mx_BaseCard .mx_AutoHideScrollbar{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator){padding-top:16px;padding-bottom:0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator)>:not(h3){margin-left:8px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device{display:-webkit-box;display:-ms-flexbox;display:flex;margin:8px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device.mx_UserInfo_device_verified .mx_UserInfo_device_trusted{color:#0dbd8b}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device.mx_UserInfo_device_unverified .mx_UserInfo_device_trusted{color:#ff4b55}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device .mx_UserInfo_device_name{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:5px;word-break:break-word}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_E2EIcon{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin:2px 5px 0 0;width:12px;height:12px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_expand{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:11px}.mx_UserInfo.mx_BaseCard .mx_AccessibleButton.mx_AccessibleButton_hasKind{padding:8px 18px}.mx_UserInfo.mx_BaseCard .mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary{color:#0dbd8b;background-color:rgba(3,179,129,.16)}.mx_UserInfo.mx_BaseCard .mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger{color:#ff4b55;background-color:rgba(255,75,85,.16)}.mx_UserInfo.mx_BaseCard .mx_UserInfo_wideButton,.mx_UserInfo.mx_BaseCard .mx_VerificationShowSas .mx_AccessibleButton{display:block;margin:16px 0 8px}.mx_UserInfo.mx_BaseCard .mx_VerificationShowSas .mx_AccessibleButton+.mx_AccessibleButton{margin:8px 0}.mx_UserInfo.mx_UserInfo_smallAvatar .mx_UserInfo_avatar>div{max-width:72px;margin:0 auto}.mx_UserInfo.mx_UserInfo_smallAvatar .mx_UserInfo_avatar .mx_BaseAvatar_initial{font-size:40px!important}.mx_VerificationPanel_reciprocate_section .mx_E2EIcon,.mx_VerificationPanel_verified_section .mx_E2EIcon{margin:20px auto!important}.mx_UserInfo .mx_EncryptionPanel_cancel{-webkit-mask:url(../../img/feather-customised/cancel.23c2689.svg);mask:url(../../img/feather-customised/cancel.23c2689.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;width:14px;height:14px;background-color:#61708b;cursor:pointer;position:absolute;z-index:100;top:14px;right:14px}.mx_UserInfo .mx_VerificationPanel_qrCode{padding:4px 4px 0;background:#fff;border-radius:4px;width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:100%;margin:0 auto!important}.mx_UserInfo .mx_VerificationPanel_qrCode canvas{height:auto!important;width:100%!important;max-width:240px}.mx_UserInfo .mx_VerificationPanel_reciprocate_section .mx_FormButton{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;padding:10px;display:block;margin:10px 0}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:10px;margin-bottom:10px;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions>.mx_VerificationPanel_QRPhase_betweenText,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions>.mx_VerificationPanel_QRPhase_betweenText{width:50px;vertical-align:middle;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption{background-color:#f3f8fd;border-radius:10px;-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;padding:20px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;max-width:310px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_noQR,.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption canvas,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_noQR,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption canvas{width:220px!important;height:220px!important;background-color:#fff;border-radius:4px;vertical-align:middle;text-align:center;padding:10px}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption>p,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption>p{margin-top:0;font-weight:700}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_helpText,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_helpText{font-size:1.4rem;margin:30px 0;text-align:center}.mx_CompleteSecurity_body .mx_VerificationPanel_verified_section .mx_AccessibleButton,.mx_Dialog .mx_VerificationPanel_verified_section .mx_AccessibleButton{float:right}.mx_CompleteSecurity_body .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton,.mx_Dialog .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton{margin-left:10px;padding:7px 40px}.mx_CompleteSecurity_body .mx_VerificationPanel_reciprocate_section .mx_VerificationPanel_reciprocateButtons,.mx_Dialog .mx_VerificationPanel_reciprocate_section .mx_VerificationPanel_reciprocateButtons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_WidgetCard{height:100%;display:contents}.mx_WidgetCard .mx_AppTileFullWidth{max-width:unset;height:100%;border:0}.mx_WidgetCard .mx_BaseCard_header{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mx_WidgetCard .mx_BaseCard_header>h2{margin-right:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_WidgetCard .mx_BaseCard_header .mx_WidgetCard_optionsButton{position:relative;margin-right:44px;height:20px;width:20px;min-width:20px;padding:0}.mx_WidgetCard .mx_BaseCard_header .mx_WidgetCard_optionsButton:before{content:"";position:absolute;width:20px;height:20px;top:0;left:4px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);background-color:#737d8c}.mx_WidgetCard_maxPinnedTooltip{background-color:#ff4b55;color:#fff}.mx_AliasSettings_editable{border:0;border-bottom:1px solid #c7c7c7;padding:0;min-width:240px}.mx_AliasSettings_editable:focus{border-bottom:1px solid #0dbd8b;outline:none;-webkit-box-shadow:none;box-shadow:none}.mx_AliasSettings summary{cursor:pointer;color:#0dbd8b;font-weight:600;list-style:none}.mx_AliasSettings summary::-webkit-details-marker{display:none}.mx_AliasSettings .mx_AliasSettings_localAliasHeader{margin-top:35px}.mx_AppsDrawer{margin:5px 5px 5px 18px;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden}.mx_AppsDrawer .mx_AppsContainer_resizerHandleContainer{width:100%;height:10px;margin-top:-3px;display:block;position:relative}.mx_AppsDrawer .mx_AppsContainer_resizerHandle{cursor:ns-resize;width:100%!important;height:100%!important;position:absolute;bottom:0!important}.mx_AppsDrawer .mx_AppsContainer_resizerHandle:after{content:"";position:absolute;border-radius:3px;top:6px;bottom:0;left:calc(50% - 32px);right:calc(50% - 32px)}.mx_AppsDrawer:hover .mx_AppsContainer_resizerHandle:after{opacity:.8;background:#2e2f32}.mx_AppsDrawer:hover .mx_ResizeHandle_horizontal:before{position:absolute;left:3px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:64px;width:4px;border-radius:4px;content:"";background-color:#2e2f32;opacity:.8}.mx_AppsContainer_resizer{margin-bottom:8px}.mx_AppsContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;height:100%;width:100%;-webkit-box-flex:1;-ms-flex:1;flex:1;min-height:0}.mx_AppsContainer .mx_AppTile:first-of-type{border-left-width:8px;border-radius:10px 0 0 10px}.mx_AppsContainer .mx_AppTile:last-of-type{border-right-width:8px;border-radius:0 10px 10px 0}.mx_AppsContainer .mx_ResizeHandle_horizontal{position:relative}.mx_AppsContainer .mx_ResizeHandle_horizontal>div{width:0}.mx_AppsDrawer_2apps .mx_AppTile{width:50%}.mx_AppsDrawer_2apps .mx_AppTile:nth-child(3){-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;width:0!important;min-width:240px!important}.mx_AppsDrawer_3apps .mx_AppTile{width:33%}.mx_AppsDrawer_3apps .mx_AppTile:nth-child(3){-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;width:0!important;min-width:240px!important}.mx_AppTile{width:50%;min-width:240px;border-color:#f2f5f8;border-style:solid;border-width:8px 5px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#f2f5f8}.mx_AppTileFullWidth{width:100%!important;border:5px solid #f2f5f8;border-radius:8px;background-color:#f2f5f8}.mx_AppTile_mini,.mx_AppTileFullWidth{margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_AppTile_mini{width:100%;height:200px}.mx_AppTile .mx_AppTile_persistedWrapper,.mx_AppTile_mini .mx_AppTile_persistedWrapper,.mx_AppTileFullWidth .mx_AppTile_persistedWrapper{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_AppTile_persistedWrapper div{width:100%;height:100%}.mx_AppTileMenuBar{margin:0;font-size:1.2rem;background-color:#f2f5f8;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:100%;padding-top:2px;padding-bottom:8px}.mx_AppTileMenuBarTitle{line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mx_AppTileMenuBarTitle .mx_WidgetAvatar{margin-right:12px}.mx_AppTileMenuBarTitle>:last-child{margin-left:9px}.mx_AppTileMenuBarWidgets{float:right;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_AppTileMenuBar_iconButton{width:12px;height:12px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 center;mask-position:0 center;-webkit-mask-size:auto 12px;mask-size:auto 12px;background-color:#212121;margin:0 3px}.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout{-webkit-mask-image:url(../../img/feather-customised/widget/external-link.7ab6751.svg);mask-image:url(../../img/feather-customised/widget/external-link.7ab6751.svg)}.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_menu{-webkit-mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg)}.mx_AppTileBody{height:100%;background-color:#fff}.mx_AppTileBody,.mx_AppTileBody_mini{width:100%;overflow:hidden;border-radius:8px}.mx_AppTileBody_mini{height:200px}.mx_AppTile .mx_AppTileBody,.mx_AppTile_mini .mx_AppTileBody_mini,.mx_AppTileFullWidth .mx_AppTileBody{height:inherit;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_AppTileBody_mini iframe,.mx_AppTileBody iframe{border:none;width:100%;height:100%}.mx_AppTileBody iframe{overflow:hidden;padding:0;margin:0;display:block}.mx_AppPermissionWarning{text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.6rem}.mx_AppPermissionWarning_row{margin-bottom:12px}.mx_AppPermissionWarning_smallText{font-size:1.2rem}.mx_AppPermissionWarning_bolder{font-weight:600}.mx_AppPermissionWarning h4{margin:0;padding:0}.mx_AppPermissionWarning_helpIcon{margin-top:1px;margin-right:2px;width:10px;height:10px;display:inline-block}.mx_AppPermissionWarning_helpIcon:before{display:inline-block;background-color:#0dbd8b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:12px;mask-size:12px;width:12px;height:12px;-webkit-mask-position:center;mask-position:center;content:"";vertical-align:middle;-webkit-mask-image:url(../../img/feather-customised/help-circle.03fb6cf.svg);mask-image:url(../../img/feather-customised/help-circle.03fb6cf.svg)}.mx_AppPermissionWarning_tooltip{-webkit-box-shadow:none;box-shadow:none;background-color:#27303a;color:#fff;border:none;border-radius:3px;padding:6px 8px}.mx_AppPermissionWarning_tooltip ul{list-style-position:inside;padding-left:2px;margin-left:0}.mx_AppLoading{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:700;position:relative;height:100%;background-color:#fff!important;border-radius:8px}.mx_AppLoading .mx_Spinner{position:absolute;top:0;bottom:0;left:0;right:0}.mx_AppLoading_spinner_fadeIn{-webkit-animation-fill-mode:backwards;animation-fill-mode:backwards;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:.5s;animation-delay:.5s;-webkit-animation-name:mx_AppLoading_spinner_fadeIn_animation;animation-name:mx_AppLoading_spinner_fadeIn_animation}@-webkit-keyframes mx_AppLoading_spinner_fadeIn_animation{0%{opacity:0}to{opacity:1}}@keyframes mx_AppLoading_spinner_fadeIn_animation{0%{opacity:0}to{opacity:1}}.mx_AppLoading iframe{display:none}.mx_AppsDrawer_resizing .mx_AppTile_persistedWrapper{z-index:1}.mx_Autocomplete{position:absolute;bottom:0;z-index:1001;width:100%;background:#fff;border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;max-height:50vh;overflow:auto;-webkit-box-shadow:0 -16px 32px rgba(0,0,0,.04);box-shadow:0 -16px 32px rgba(0,0,0,.04)}.mx_Autocomplete_ProviderSection{border-bottom:1px solid transparent}.mx_Autocomplete_Completion_block{height:34px;display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 12px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#2e2f32}.mx_Autocomplete_Completion_block *{margin:0 3px}.mx_Autocomplete_Completion_pill{-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:2rem;height:3.4rem;padding:.4rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#2e2f32}.mx_Autocomplete_Completion_pill>*{margin-right:.3rem}.mx_Autocomplete_Completion_subtitle{font-style:italic;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_Autocomplete_Completion_description{color:grey}.mx_Autocomplete_Completion_container_pill{margin:12px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-flow:wrap;flex-flow:wrap}.mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_description,.mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_subtitle,.mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_title{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mx_Autocomplete_Completion.selected,.mx_Autocomplete_Completion:hover{background:#f2f5f8;outline:none}.mx_Autocomplete_provider_name{margin:12px;color:#2e2f32;font-weight:400;opacity:.4}.m_RoomView_auxPanel_stateViews{padding:5px 5px 5px 19px;border-bottom:1px solid transparent}.m_RoomView_auxPanel_stateViews_span a{text-decoration:none;color:inherit}.m_RoomView_auxPanel_stateViews_span[data-severity=warning]{font-weight:700;color:orange}.m_RoomView_auxPanel_stateViews_span[data-severity=alert]{font-weight:700;color:red}.m_RoomView_auxPanel_stateViews_span[data-severity=normal]{font-weight:400}.m_RoomView_auxPanel_stateViews_span[data-severity=notice]{font-weight:400;color:#a2a2a2}.m_RoomView_auxPanel_stateViews_delim{padding:0 5px;color:#a2a2a2}.mx_BasicMessageComposer{position:relative}.mx_BasicMessageComposer .mx_BasicMessageComposer_inputEmpty>:first-child:before{content:var(--placeholder);opacity:.333;width:0;height:0;overflow:visible;display:inline-block;pointer-events:none;white-space:nowrap}@-webkit-keyframes visualbell{0%{background-color:#faa}to{background-color:#fff}}.mx_BasicMessageComposer.mx_BasicMessageComposer_input_error{-webkit-animation:visualbell .2s;animation:visualbell .2s}.mx_BasicMessageComposer .mx_BasicMessageComposer_input{white-space:pre-wrap;word-wrap:break-word;outline:none;overflow-x:hidden}.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_RoomPill,.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_UserPill{position:relative}.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_RoomPill:before,.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_UserPill:before{content:var(--avatar-letter);width:1.6rem;height:1.6rem;margin-right:.24rem;background:var(--avatar-background),#fff;color:#fff;background-repeat:no-repeat;background-size:1.6rem;border-radius:1.6rem;text-align:center;font-weight:400;line-height:1.6rem;font-size:1.04rem}.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_disabled{pointer-events:none}.mx_BasicMessageComposer .mx_BasicMessageComposer_AutoCompleteWrapper{position:relative;height:0}.mx_E2EIcon{width:16px;height:16px;margin:0 9px;position:relative;display:block}.mx_E2EIcon_normal:after,.mx_E2EIcon_normal:before,.mx_E2EIcon_verified:after,.mx_E2EIcon_verified:before,.mx_E2EIcon_warning:after,.mx_E2EIcon_warning:before{content:"";display:block;position:absolute;top:0;bottom:0;left:0;right:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.mx_E2EIcon:before{background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:90%;mask-size:90%}.mx_E2EIcon:before,.mx_E2EIcon_bordered{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg)}.mx_E2EIcon_bordered{background-color:#f3f8fd}.mx_E2EIcon_bordered:after{-webkit-mask-size:75%;mask-size:75%}.mx_E2EIcon_bordered:before{-webkit-mask-size:65%;mask-size:65%}.mx_E2EIcon_warning:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_E2EIcon_normal:after{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);background-color:#91a1c0}.mx_E2EIcon_verified:after{-webkit-mask-image:url(../../img/e2e/verified.5be6c9f.svg);mask-image:url(../../img/e2e/verified.5be6c9f.svg);background-color:#0dbd8b}.mx_EditMessageComposer{padding:3px;margin:-7px -10px -5px;overflow:visible!important}.mx_EditMessageComposer .mx_BasicMessageComposer_input{border-radius:4px;border:1px solid transparent;background-color:#fff;max-height:200px;padding:3px 6px}.mx_EditMessageComposer .mx_BasicMessageComposer_input:focus{border-color:rgba(13,189,139,.5)}.mx_EditMessageComposer .mx_EditMessageComposer_buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;position:absolute;left:0;background:#f3f8fd;z-index:100;right:0;margin:0 -110px 0 0;padding:5px 147px 5px 5px}.mx_EditMessageComposer .mx_EditMessageComposer_buttons .mx_AccessibleButton{margin-left:5px;padding:5px 40px}.mx_EventTile_last .mx_EditMessageComposer_buttons{position:static;margin-right:-147px}.mx_EntityTile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#2e2f32;cursor:pointer}.mx_EntityTile .mx_E2EIcon{margin:0;position:absolute;bottom:2px;right:7px}.mx_EntityTile:hover{padding-right:30px;position:relative}.mx_EntityTile:hover:before{content:"";position:absolute;top:calc(50% - 8px);right:-8px;-webkit-mask:url(../../img/member_chevron.4163a20.png);mask:url(../../img/member_chevron.4163a20.png);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;width:16px;height:16px;background-color:#91a1c0}.mx_EntityTile .mx_PresenceLabel{display:none}.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_PresenceLabel{display:block}.mx_EntityTile_invite{display:table-cell;vertical-align:middle;margin-left:10px;width:26px}.mx_EntityTile_avatar,.mx_GroupRoomTile_avatar{padding:4px 12px 4px 3px;position:relative}.mx_EntityTile_name,.mx_GroupRoomTile_name{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow:hidden;font-size:1.4rem;text-overflow:ellipsis;white-space:nowrap}.mx_EntityTile_details{overflow:hidden;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_EntityTile_ellipsis .mx_EntityTile_name,.mx_EntityTile_invitePlaceholder .mx_EntityTile_name{font-style:italic;color:#2e2f32}.mx_EntityTile_offline_beenactive .mx_EntityTile_avatar,.mx_EntityTile_offline_beenactive .mx_EntityTile_name,.mx_EntityTile_unavailable .mx_EntityTile_avatar,.mx_EntityTile_unavailable .mx_EntityTile_name{opacity:.5}.mx_EntityTile_offline_neveractive .mx_EntityTile_avatar,.mx_EntityTile_offline_neveractive .mx_EntityTile_name,.mx_EntityTile_unknown .mx_EntityTile_avatar,.mx_EntityTile_unknown .mx_EntityTile_name{opacity:.25}.mx_EntityTile_subtext{font-size:1.1rem;opacity:.5;overflow:hidden;white-space:nowrap;text-overflow:clip}.mx_EntityTile_power{-webkit-padding-start:6px;padding-inline-start:6px;font-size:1rem;color:#8d99a5;max-width:6em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mx_EntityTile:hover .mx_EntityTile_power{display:none}.mx_EventTile{max-width:100%;clear:both;padding-top:18px;font-size:1.4rem;position:relative}.mx_EventTile.mx_EventTile_info{padding-top:1px}.mx_EventTile_avatar{top:14px;left:8px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar{top:.6rem;left:64px}.mx_EventTile_continuation{padding-top:0!important}.mx_EventTile_continuation.mx_EventTile_isEditing{padding-top:5px!important;margin-top:-5px}.mx_EventTile_isEditing{background-color:#f3f8fd}.mx_EventTile .mx_SenderProfile{color:#2e2f32;font-size:1.4rem;display:inline-block;overflow:hidden;cursor:pointer;padding-bottom:0;padding-top:0;margin:0;white-space:nowrap;text-overflow:ellipsis;max-width:calc(100% - 64px)}.mx_EventTile .mx_SenderProfile .mx_Flair{opacity:.7;margin-left:5px;display:inline-block;vertical-align:top;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_EventTile .mx_SenderProfile .mx_Flair img{vertical-align:-2px;margin-right:2px;border-radius:8px}.mx_EventTile_isEditing .mx_MessageTimestamp{visibility:hidden!important}.mx_EventTile .mx_MessageTimestamp{display:block;visibility:hidden;white-space:nowrap;left:0;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_EventTile_continuation .mx_EventTile_line{clear:both}.mx_EventTile_line,.mx_EventTile_reply{position:relative;padding-left:64px;border-radius:4px}.mx_EventListSummary .mx_EventTile_line,.mx_RoomView_timeline_rr_enabled .mx_EventTile_line{margin-right:110px}.mx_EventTile_bubbleContainer{display:grid;grid-template-columns:1fr 100px}.mx_EventTile_bubbleContainer .mx_EventTile_line{margin-right:0;grid-column:1/3;padding:0!important}.mx_EventTile_bubbleContainer .mx_EventTile_msgOption{grid-column:2}.mx_EventTile_reply{margin-right:10px}.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji{font-size:48px!important;line-height:57px!important}.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp{visibility:visible}.mx_EventTile_selected>div>a>.mx_MessageTimestamp{left:3px;width:auto}.mx_EventTile.focus-visible:focus-within>div>a>.mx_MessageTimestamp,.mx_EventTile.mx_EventTile_actionBarFocused>div>a>.mx_MessageTimestamp,.mx_EventTile:hover>div>a>.mx_MessageTimestamp,.mx_EventTile_last>div>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_EventTile.focus-visible:focus-within>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_EventTile.mx_EventTile_actionBarFocused>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_EventTile:hover>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_EventTile_last>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_ReplyThread .mx_EventTile>a>.mx_MessageTimestamp{visibility:visible}.mx_EventTile.focus-visible:focus-within .mx_MessageActionBar,.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,.mx_EventTile:hover .mx_MessageActionBar,[data-whatinput=keyboard] .mx_EventTile:focus-within .mx_MessageActionBar{visibility:visible}.mx_EventTile_selected>.mx_EventTile_line{border-left:4px solid #0dbd8b;padding-left:60px;background-color:#f6f7f8}.mx_EventTile_highlight,.mx_EventTile_highlight .markdown-body{color:#ff4b55}.mx_EventTile_highlight .markdown-body .mx_EventTile_line,.mx_EventTile_highlight .mx_EventTile_line{background-color:#fff8e3}.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line{padding-left:78px}.mx_EventTile.focus-visible:focus-within .mx_EventTile_line,.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line,.mx_EventTile:hover .mx_EventTile_line{background-color:#f6f7f8}.mx_EventTile_searchHighlight{border-radius:5px;padding-left:2px;padding-right:2px;cursor:pointer}.mx_EventTile_searchHighlight,.mx_EventTile_searchHighlight a{background-color:#0dbd8b;color:#fff}.mx_EventTile_receiptSending:before,.mx_EventTile_receiptSent:before{background-color:#8d99a5;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:14px;mask-size:14px;width:14px;height:14px;content:"";position:absolute;top:0;left:0;right:0}.mx_EventTile_receiptSent:before{-webkit-mask-image:url(../../img/element-icons/circle-sent.5079cbe.svg);mask-image:url(../../img/element-icons/circle-sent.5079cbe.svg)}.mx_EventTile_receiptSending:before{-webkit-mask-image:url(../../img/element-icons/circle-sending.bcca6aa.svg);mask-image:url(../../img/element-icons/circle-sending.bcca6aa.svg)}.mx_EventTile_contextual{opacity:.4}.mx_EventTile_msgOption{float:right;text-align:right;position:relative;width:90px;height:1px;margin-right:10px}.mx_EventTile_msgOption a{text-decoration:none}.mx_EventTile_readAvatars{position:relative;display:inline-block;width:14px;height:14px;top:-2.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1}.mx_EventTile_readAvatars .mx_BaseAvatar{position:absolute;display:inline-block;height:1.4rem;width:1.4rem;-webkit-transition:left .1s ease-out,top .3s ease-out;transition:left .1s ease-out,top .3s ease-out;-webkit-transition:left var(--transition-short) ease-out,top var(--transition-standard) ease-out;transition:left var(--transition-short) ease-out,top var(--transition-standard) ease-out}.mx_EventTile_readAvatarRemainder{color:#acacac;font-size:1.1rem;position:absolute}.mx_EventTile_content{display:block;overflow-y:hidden;overflow-x:hidden;margin-right:34px}.mx_EventTile_body{overflow-y:hidden}.mx_EventTile_spoiler{cursor:pointer}.mx_EventTile_spoiler_reason{color:#acacac;font-size:1.1rem}.mx_EventTile_spoiler_content{-webkit-filter:blur(5px) saturate(.1) sepia(1);filter:blur(5px) saturate(.1) sepia(1);-webkit-transition-duration:.5s;transition-duration:.5s}.mx_EventTile_spoiler.visible>.mx_EventTile_spoiler_content{-webkit-filter:none;filter:none}.mx_EventTile_e2eIcon{position:absolute;top:6px;left:44px;width:14px;height:14px;display:block;bottom:0;right:0;opacity:.2;background-repeat:no-repeat;background-size:contain}.mx_EventTile_e2eIcon:after,.mx_EventTile_e2eIcon:before{content:"";display:block;position:absolute;top:0;bottom:0;left:0;right:0;-webkit-mask-size:contain;mask-size:contain}.mx_EventTile_e2eIcon:after,.mx_EventTile_e2eIcon:before{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.mx_EventTile_e2eIcon:before{background-color:#fff;-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);-webkit-mask-size:90%;mask-size:90%}.mx_EventTile_e2eIcon_undecryptable:after,.mx_EventTile_e2eIcon_unverified:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_EventTile_e2eIcon_undecryptable,.mx_EventTile_e2eIcon_unverified{opacity:1}.mx_EventTile_e2eIcon_unknown:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_EventTile_e2eIcon_unknown{opacity:1}.mx_EventTile_e2eIcon_unencrypted:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_EventTile_e2eIcon_unencrypted{opacity:1}.mx_EventTile_e2eIcon_unauthenticated:after{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);background-color:#91a1c0}.mx_EventTile_e2eIcon_unauthenticated{opacity:1}.mx_EventTile_keyRequestInfo{font-size:1.2rem}.mx_EventTile_keyRequestInfo_text{opacity:.5}.mx_EventTile_keyRequestInfo_text a{color:#2e2f32;text-decoration:underline;cursor:pointer}.mx_EventTile_keyRequestInfo_tooltip_contents p{text-align:auto;margin-left:3px;margin-right:3px}.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child{margin-top:0}.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child{margin-bottom:0}.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line{padding-left:60px}.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line{border-left:4px solid #76cfa5}.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line{border-left:4px solid #e8bf37}.mx_EventTile:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line{padding-left:78px}.mx_EventTile:hover .mx_EventTile_e2eIcon{opacity:1}.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line>a>.mx_MessageTimestamp,.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line>a>.mx_MessageTimestamp,.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line>a>.mx_MessageTimestamp{width:38px}.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line>.mx_EventTile_e2eIcon,.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line>.mx_EventTile_e2eIcon,.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line>.mx_EventTile_e2eIcon{display:block;left:41px}.mx_EventTile_content .mx_EventTile_edited{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:1.2rem;color:#9e9e9e;display:inline-block;margin-left:9px;cursor:pointer}.mx_EventTile_body pre{border:1px solid transparent}.mx_EventTile_content .markdown-body{font-family:inherit!important;white-space:normal!important;line-height:inherit!important;color:inherit;font-size:1.4rem}.mx_EventTile_content .markdown-body code,.mx_EventTile_content .markdown-body pre{font-family:Inconsolata,Twemoji,Apple Color Emoji,Segoe UI Emoji,Courier,monospace,Noto Color Emoji!important;color:#333}.mx_EventTile_content .markdown-body pre{overflow-x:overlay;overflow-y:visible}.mx_EventTile_content .markdown-body code{background-color:#f8f8f8}.mx_EventTile_lineNumbers{float:left;margin:0 .5em 0 -1.5em;color:grey}.mx_EventTile_lineNumber{text-align:right;display:block;padding-left:1em}.mx_EventTile_collapsedCodeBlock{max-height:30vh}.mx_EventTile.focus-visible:focus-within .mx_EventTile_body pre,.mx_EventTile:hover .mx_EventTile_body pre{border:1px solid #e5e5e5}.mx_EventTile_pre_container{position:relative}.mx_EventTile_button{position:absolute;display:inline-block;visibility:hidden;cursor:pointer;top:8px;right:8px;width:19px;height:19px;background-color:#2e2f32}.mx_EventTile_buttonBottom{top:33px}.mx_EventTile_copyButton{-webkit-mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg)}.mx_EventTile_collapseButton{-webkit-mask-image:url(../../img/feather-customised/minimise.aec9142.svg);mask-image:url(../../img/feather-customised/minimise.aec9142.svg)}.mx_EventTile_collapseButton,.mx_EventTile_expandButton{-webkit-mask-size:75%;mask-size:75%;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mx_EventTile_expandButton{-webkit-mask-image:url(../../img/feather-customised/maximise.dc32127.svg);mask-image:url(../../img/feather-customised/maximise.dc32127.svg)}.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_collapseButton,.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton,.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_expandButton,.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_collapseButton,.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton,.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_expandButton{visibility:visible}.mx_EventTile_content .markdown-body h1,.mx_EventTile_content .markdown-body h2,.mx_EventTile_content .markdown-body h3,.mx_EventTile_content .markdown-body h4,.mx_EventTile_content .markdown-body h5,.mx_EventTile_content .markdown-body h6{font-family:inherit!important;color:inherit}.mx_EventTile_content .markdown-body h1,.mx_EventTile_content .markdown-body h2{font-size:1.5em;border-bottom:none!important}.mx_EventTile_content .markdown-body a{color:#238cf5}.mx_EventTile_content .markdown-body .hljs{display:inline!important}.mx_EventTile_tileError{color:red;text-align:center;margin-right:0}.mx_EventTile_tileError .mx_EventTile_line{padding-left:0;margin-right:0}.mx_EventTile_tileError .mx_EventTile_line span{padding:4px 8px}.mx_EventTile_tileError a{margin-left:1em}@media only screen and (max-width:480px){.mx_EventTile_line,.mx_EventTile_reply{padding-left:0;margin-right:0}.mx_EventTile_content{margin-top:10px;margin-right:0}}.mx_GroupLayout .mx_EventTile>.mx_SenderProfile{line-height:2rem;margin-left:64px}.mx_GroupLayout .mx_EventTile>.mx_EventTile_line{padding-left:64px}.mx_GroupLayout .mx_EventTile>.mx_EventTile_avatar{position:absolute}.mx_GroupLayout .mx_EventTile .mx_MessageTimestamp{position:absolute;width:46px}.mx_GroupLayout .mx_EventTile .mx_EventTile_line,.mx_GroupLayout .mx_EventTile .mx_EventTile_reply{padding-top:1px;padding-bottom:3px;line-height:2.2rem}.mx_GroupLayout .mx_EventTile_info .mx_EventTile_line{padding-left:82px}.mx_MatrixChat_useCompactLayout .mx_EventTile{padding-top:4px}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_line,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_reply{padding-top:0;padding-bottom:0}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info{padding-top:0;font-size:1.3rem}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_line,.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_reply{line-height:2rem}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar{top:4px}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_SenderProfile{font-size:1.3rem}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote{padding-top:8px}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote .mx_EventTile_avatar{top:2px}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote .mx_EventTile_line,.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote .mx_EventTile_reply{padding-top:0;padding-bottom:1px}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation{padding-top:0}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation .mx_EventTile_line,.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation .mx_EventTile_reply{padding-top:0;padding-bottom:0}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_avatar{top:2px}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_e2eIcon{top:3px}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_readAvatars{top:-2rem}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body blockquote,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body dl,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body ol,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body p,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body pre,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body table,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body ul{margin-bottom:4px}.mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList h2{margin-top:6px}.mx_IRCLayout{--name-width:70px;line-height:1.8rem!important}.mx_IRCLayout .mx_EventTile>a{text-decoration:none}.mx_IRCLayout .mx_EventTile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding-top:0}.mx_IRCLayout .mx_EventTile>*{margin-right:5px}.mx_IRCLayout .mx_EventTile>.mx_EventTile_msgOption{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5;-ms-flex-negative:0;flex-shrink:0}.mx_IRCLayout .mx_EventTile>.mx_EventTile_msgOption .mx_EventTile_readAvatars{top:.2rem}.mx_IRCLayout .mx_EventTile>.mx_SenderProfile{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-ms-flex-negative:0;flex-shrink:0;width:var(--name-width);text-overflow:ellipsis;text-align:left;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:visible;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_IRCLayout .mx_EventTile .mx_EventTile_line,.mx_IRCLayout .mx_EventTile .mx_EventTile_reply{padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;min-width:0}.mx_IRCLayout .mx_EventTile>.mx_EventTile_avatar{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;position:relative;top:0;left:0;-ms-flex-negative:0;flex-shrink:0;height:1.8rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_IRCLayout .mx_EventTile>.mx_EventTile_avatar>.mx_BaseAvatar,.mx_IRCLayout .mx_EventTile>.mx_EventTile_avatar>.mx_BaseAvatar>*{height:1.4rem!important;width:1.4rem!important;font-size:1rem!important;line-height:1.5rem!important}.mx_IRCLayout .mx_EventTile .mx_MessageTimestamp{font-size:1rem;width:45px;text-align:right}.mx_IRCLayout .mx_EventTile>.mx_EventTile_e2eIcon{position:absolute;right:unset;left:unset;top:0;padding:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;height:1.8rem;background-position:50%}.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_EventTile_e2eIcon,.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_MTextBody,.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_ReplyThread_wrapper_empty,.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_TextualEvent{display:inline-block}.mx_IRCLayout .mx_EventTile .mx_EventTile_reply{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.mx_IRCLayout .mx_EventTile .mx_EditMessageComposer_buttons{position:relative}.mx_IRCLayout .mx_EventTile_emote>.mx_EventTile_avatar{margin-left:calc(var(--name-width) + 19px)}.mx_IRCLayout blockquote{margin:0}.mx_IRCLayout .mx_EventListSummary>.mx_EventTile_line{padding-left:calc(var(--name-width) + 74px)}.mx_IRCLayout .mx_EventListSummary .mx_EventListSummary_avatars{padding:0;margin:0 9px 0 0}.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar{left:calc(var(--name-width) + 24px);top:0}.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_line{left:calc(var(--name-width) + 24px)}.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_TextualEvent{line-height:1.8rem}.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line{padding-left:0;border-left:0}.mx_IRCLayout .mx_SenderProfile_hover{background-color:#fff;overflow:hidden}.mx_IRCLayout .mx_SenderProfile_hover>span{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_IRCLayout .mx_SenderProfile_hover>span>.mx_SenderProfile_name{overflow:hidden;text-overflow:ellipsis;min-width:var(--name-width);text-align:end}.mx_IRCLayout .mx_SenderProfile:hover{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_IRCLayout .mx_SenderProfile_hover:hover{overflow:visible;width:max(auto,100%);z-index:10}.mx_IRCLayout .mx_ReplyThread{margin:0}.mx_IRCLayout .mx_ReplyThread .mx_SenderProfile{width:unset;max-width:var(--name-width)}.mx_IRCLayout .mx_ReplyThread .mx_SenderProfile_hover{background:transparent}.mx_IRCLayout .mx_ReplyThread .mx_SenderProfile_hover>span>.mx_SenderProfile_name{min-width:inherit}.mx_IRCLayout .mx_ReplyThread .mx_EventTile_emote>.mx_EventTile_avatar{margin-left:0}.mx_IRCLayout .mx_ReplyThread .mx_MessageTimestamp{width:auto}.mx_IRCLayout .mx_ReplyThread .mx_EventTile_e2eIcon{position:relative;-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.mx_IRCLayout .mx_ProfileResizer{position:absolute;height:100%;width:15px;left:calc(80px + var(--name-width));cursor:col-resize;z-index:100}.mx_IRCLayout .mx_Flair>img{height:1.4rem!important;width:1.4rem!important}.mx_JumpToBottomButton{z-index:1000;position:absolute;bottom:12px;right:24px;width:38px;height:50px;text-align:center}.mx_JumpToBottomButton_badge{position:relative;top:-12px;border-radius:16px;font-weight:700;font-size:1.2rem;line-height:1.4rem;text-align:center;display:inline-block;padding:0 4px;color:#fff;background-color:#61708b}.mx_JumpToBottomButton_highlight .mx_JumpToBottomButton_badge{color:#f2f5f8;background-color:#ff4b55}.mx_JumpToBottomButton_scrollDown{position:relative;height:38px;border-radius:19px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;border:1.3px solid #61708b;cursor:pointer}.mx_JumpToBottomButton_scrollDown:before{content:"";position:absolute;top:0;bottom:0;left:0;right:0;-webkit-mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;background:#61708b}.mx_LinkPreviewWidget{margin-top:15px;margin-right:15px;margin-bottom:15px;display:-webkit-box;display:-ms-flexbox;display:flex;border-left:4px solid #ddd;color:#888}.mx_LinkPreviewWidget_image{-webkit-box-flex:0;-ms-flex:0 0 100px;flex:0 0 100px;margin-left:15px;text-align:center;cursor:pointer}.mx_LinkPreviewWidget_caption{margin-left:15px;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.mx_LinkPreviewWidget_title{display:inline;font-weight:700;white-space:normal}.mx_LinkPreviewWidget_siteName{display:inline}.mx_LinkPreviewWidget_description{margin-top:8px;white-space:normal;word-wrap:break-word}.mx_LinkPreviewWidget_cancel{cursor:pointer;width:18px;height:18px}.mx_LinkPreviewWidget_cancel img{-webkit-box-flex:0;-ms-flex:0 0 40px;flex:0 0 40px;visibility:hidden}.mx_LinkPreviewWidget:hover .mx_LinkPreviewWidget_cancel img,.mx_LinkPreviewWidget_cancel.focus-visible:focus img{visibility:visible}.mx_MatrixChat_useCompactLayout .mx_LinkPreviewWidget{margin-top:6px;margin-bottom:6px}.mx_MemberInfo{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-y:auto;margin-top:8px}.mx_MemberInfo,.mx_MemberInfo_name{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_MemberInfo_name{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_MemberInfo_name>.mx_E2EIcon{margin-right:0}.mx_MemberInfo_cancel{height:16px;width:16px;padding:10px 0 10px 10px;cursor:pointer;-webkit-mask-image:url(../../img/minimise.871d2de.svg);mask-image:url(../../img/minimise.871d2de.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:16px center;mask-position:16px center;background-color:#91a1c0}.mx_MemberInfo_name h2{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-x:auto;max-height:50px}.mx_MemberInfo h2{font-size:1.8rem;font-weight:600;margin:16px 0 16px 15px}.mx_MemberInfo_container{margin:0 16px 16px}.mx_MemberInfo .mx_RoomTile_nameContainer{width:154px}.mx_MemberInfo .mx_RoomTile_badge{display:none}.mx_MemberInfo .mx_RoomTile_name{width:160px}.mx_MemberInfo_avatar{background:hsla(0,0%,91%,.77);margin-bottom:16px}.mx_MemberInfo_avatar>img{height:auto;width:100%;max-height:30vh;-o-object-fit:contain;object-fit:contain;display:block}.mx_MemberInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image{cursor:-webkit-zoom-in;cursor:zoom-in}.mx_MemberInfo_profile{margin-bottom:16px}.mx_MemberInfo h3{text-transform:uppercase;color:#9fa9ba;font-weight:700;font-size:1.2rem;margin:4px 0}.mx_MemberInfo_profileField{font-size:1.5rem;position:relative}.mx_MemberInfo_buttons{margin-bottom:16px}.mx_MemberInfo_field{cursor:pointer;font-size:1.5rem;color:#2e2f32;margin-left:8px;line-height:2.3rem}.mx_MemberInfo_createRoom{cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 8px}.mx_MemberInfo_createRoom_label{width:auto!important;cursor:pointer}.mx_MemberInfo label{font-size:1.3rem}.mx_MemberInfo label .mx_MemberInfo_label_text{display:inline-block;max-width:180px;vertical-align:text-top}.mx_MemberInfo input[type=radio]{vertical-align:-2px;margin-right:5px;margin-left:8px}.mx_MemberInfo_statusMessage{font-size:1.1rem;opacity:.5;overflow:hidden;white-space:nowrap;text-overflow:clip}.mx_MemberInfo .mx_MemberInfo_scrollContainer{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_GroupMemberList,.mx_GroupRoomList,.mx_MemberList{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-height:0}.mx_GroupMemberList .mx_Spinner,.mx_GroupRoomList .mx_Spinner,.mx_MemberList .mx_Spinner{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}.mx_GroupMemberList .mx_SearchBox,.mx_GroupRoomList .mx_SearchBox,.mx_MemberList .mx_SearchBox{margin-bottom:5px}.mx_GroupMemberList h2,.mx_GroupRoomList h2,.mx_MemberList h2{text-transform:uppercase;color:#3d3b39;font-weight:600;font-size:1.3rem;padding-left:3px;padding-right:12px;margin-top:8px;margin-bottom:4px}.mx_GroupMemberList .mx_AutoHideScrollbar,.mx_GroupRoomList .mx_AutoHideScrollbar,.mx_MemberList .mx_AutoHideScrollbar{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_GroupMemberList .mx_RightPanel_scopeHeader,.mx_GroupRoomList .mx_RightPanel_scopeHeader,.mx_MemberList .mx_RightPanel_scopeHeader{margin-top:-8px}.mx_GroupMemberList_query,.mx_GroupRoomList_query{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_MemberList_chevron{position:absolute;right:35px;margin-top:-15px}.mx_MemberList_border{overflow-y:auto;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0px}.mx_MemberList_query{height:16px}.mx_MemberList_query[type=text]{font-size:1.2rem}.mx_MemberList_wrapper{padding:10px}.mx_MemberList_invite{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;position:relative;background-color:#0dbd8b;border-radius:4px;margin:5px 9px 9px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:#fff;font-weight:600}.mx_MemberList_invite.mx_AccessibleButton_disabled{background-color:#888;cursor:not-allowed}.mx_MemberList_invite span{padding:8px 0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mx_MemberList_invite span:before{content:"";display:inline-block;background-color:#fff;-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:20px;mask-size:20px;width:20px;height:20px;margin-right:5px}.mx_MemberList_inviteCommunity span:before{-webkit-mask-image:url(../../img/icon-invite-people.d82f491.svg);mask-image:url(../../img/icon-invite-people.d82f491.svg)}.mx_MemberList_addRoomToCommunity span:before{-webkit-mask-image:url(../../img/icons-room-add.bd36e26.svg);mask-image:url(../../img/icons-room-add.bd36e26.svg)}.mx_MessageComposer_wrapper{vertical-align:middle;margin:auto;border-top:1px solid transparent;position:relative;padding-left:82px;padding-right:6px}.mx_MessageComposer_replaced_wrapper{margin-left:auto;margin-right:auto}.mx_MessageComposer_replaced_valign{height:60px;display:table-cell;vertical-align:middle}.mx_MessageComposer_roomReplaced_icon{float:left;margin-right:20px;margin-top:5px;width:31px;height:31px}.mx_MessageComposer_roomReplaced_header{font-weight:700}.mx_MessageComposer_autocomplete_wrapper{position:relative;height:0}.mx_MessageComposer_row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.mx_MessageComposer .mx_MessageComposer_avatar{position:absolute;left:26px}.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar{display:block}.mx_MessageComposer_composecontrols{width:100%}.mx_MessageComposer_e2eIcon.mx_E2EIcon{position:absolute;left:60px;margin-right:0;margin-left:3px;width:12px;height:12px}.mx_MessageComposer_noperm_error{width:100%;height:60px;font-style:italic;color:#888;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_MessageComposer_input_wrapper{cursor:text}.mx_MessageComposer_input,.mx_MessageComposer_input_wrapper{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_MessageComposer_input{vertical-align:middle;min-height:60px;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;font-size:1.4rem;margin-right:6px}.mx_MessageComposer_editor{width:100%;max-height:120px;min-height:19px;overflow-y:auto;overflow-x:hidden;word-break:break-word}.mx_MessageComposer_editor>:first-child{margin-top:0!important}.mx_MessageComposer_editor>:last-child{margin-bottom:0!important}@keyframes visualbell{0%{background-color:#faa}to{background-color:#fff}}.mx_MessageComposer_input_error{-webkit-animation:visualbell .2s;animation:visualbell .2s}.mx_MessageComposer_input blockquote{color:#777;margin:0 0 16px;padding:0 15px;border-left:4px solid #ddd}.mx_MessageComposer_input pre{background-color:rgba(0,0,0,.04);border-radius:3px;padding:10px}.mx_MessageComposer_input textarea{display:block;width:100%;padding:0;margin-top:6px;margin-bottom:6px;border:0;resize:none;outline:none;-webkit-box-shadow:none;box-shadow:none;color:#2e2f32;background-color:#fff;font-size:1.4rem;max-height:120px;overflow:auto;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji}.mx_MessageComposer_input textarea::-moz-placeholder{line-height:100%;color:#0dbd8b;opacity:1}.mx_MessageComposer_input textarea::-webkit-input-placeholder{color:#0dbd8b}.mx_MessageComposer_button_highlight{background:rgba(13,189,139,.25)}.mx_MessageComposer_button_highlight:before{background-color:#0dbd8b!important}.mx_MessageComposer_button{position:relative;margin-right:6px;cursor:pointer;height:26px;width:26px;border-radius:100%}.mx_MessageComposer_button:before{content:"";position:absolute;top:3px;left:3px;height:20px;width:20px;background-color:#c1c6cd;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}.mx_MessageComposer_button:hover{background:rgba(13,189,139,.1)}.mx_MessageComposer_button:hover:before{background-color:#0dbd8b}.mx_MessageComposer_button.mx_MessageComposer_hangup:not(.mx_AccessibleButton_disabled):before{background-color:#ff4b55}.mx_MessageComposer_upload:before{-webkit-mask-image:url(../../img/element-icons/room/composer/attach.359c84e.svg);mask-image:url(../../img/element-icons/room/composer/attach.359c84e.svg)}.mx_MessageComposer_voiceMessage:before{-webkit-mask-image:url(../../img/voip/mic-on-mask.97ec7a0.svg);mask-image:url(../../img/voip/mic-on-mask.97ec7a0.svg)}.mx_MessageComposer_emoji:before{-webkit-mask-image:url(../../img/element-icons/room/composer/emoji.52d7369.svg);mask-image:url(../../img/element-icons/room/composer/emoji.52d7369.svg)}.mx_MessageComposer_stickers:before{-webkit-mask-image:url(../../img/element-icons/room/composer/sticker.8dbe5ec.svg);mask-image:url(../../img/element-icons/room/composer/sticker.8dbe5ec.svg)}.mx_MessageComposer_sendMessage{cursor:pointer;position:relative;margin-right:6px;width:32px;height:32px;border-radius:100%;background-color:#0dbd8b}.mx_MessageComposer_sendMessage:before{position:absolute;height:16px;width:16px;top:8px;left:9px;-webkit-mask-image:url(../../img/element-icons/send-message.a4e9cf8.svg);mask-image:url(../../img/element-icons/send-message.a4e9cf8.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;background-color:#fff;content:""}.mx_MessageComposer_formatting{cursor:pointer;margin:0 11px;width:24px;height:18px}.mx_MessageComposer_formatbar_wrapper{width:100%;background-color:#fff;-webkit-box-shadow:inset 0 1px 0 0 rgba(0,0,0,.08);box-shadow:inset 0 1px 0 0 rgba(0,0,0,.08)}.mx_MessageComposer_formatbar{margin:auto;display:-webkit-box;display:-ms-flexbox;display:flex;height:30px;-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:62px;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1rem;color:#888}.mx_MessageComposer_formatbar *{margin-right:4px}.mx_MessageComposer_format_button,.mx_MessageComposer_formatbar_cancel,.mx_MessageComposer_formatbar_markdown{cursor:pointer}.mx_MessageComposer_formatbar_cancel{margin-right:22px}.mx_MessageComposer_formatbar_markdown{height:17px;width:30px;margin-right:64px}.mx_MessageComposer_input_markdownIndicator{height:10px;width:12px;padding:4px 4px 4px 0}.mx_MessageComposer_formatbar_markdown,.mx_MessageComposer_input_markdownIndicator{cursor:pointer;-webkit-mask-image:url(../../img/markdown.6905ba8.svg);mask-image:url(../../img/markdown.6905ba8.svg);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#c1c6cd}.mx_MessageComposer_formatbar_markdown.mx_MessageComposer_markdownDisabled,.mx_MessageComposer_input_markdownIndicator.mx_MessageComposer_markdownDisabled{opacity:.2}.mx_MatrixChat_useCompactLayout .mx_MessageComposer_input{min-height:50px}.mx_MatrixChat_useCompactLayout .mx_MessageComposer_noperm_error{height:50px}.mx_MessageComposerFormatBar{display:none;width:130px;height:24px;position:absolute;cursor:pointer;border-radius:4px;background-color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1000}.mx_MessageComposerFormatBar.mx_MessageComposerFormatBar_shown{display:block}.mx_MessageComposerFormatBar>*{white-space:nowrap;display:inline-block;position:relative;border:1px solid #e9edf1;margin-left:-1px}.mx_MessageComposerFormatBar>:hover{border-color:#ddd;z-index:1}.mx_MessageComposerFormatBar>:first-child{border-radius:3px 0 0 3px}.mx_MessageComposerFormatBar>:last-child{border-radius:0 3px 3px 0}.mx_MessageComposerFormatBar>:only-child{border-radius:3px}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button{width:27px;height:24px;-webkit-box-sizing:border-box;box-sizing:border-box;background:none;vertical-align:middle}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button:after{content:"";position:absolute;top:0;left:0;height:100%;width:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#2e2f32}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconBold:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/bold.0d80ac7.svg);mask-image:url(../../img/element-icons/room/format-bar/bold.0d80ac7.svg)}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconItalic:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/italic.bf18054.svg);mask-image:url(../../img/element-icons/room/format-bar/italic.bf18054.svg)}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconStrikethrough:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/strikethrough.0264f7b.svg);mask-image:url(../../img/element-icons/room/format-bar/strikethrough.0264f7b.svg)}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconQuote:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/quote.560cd8f.svg);mask-image:url(../../img/element-icons/room/format-bar/quote.560cd8f.svg)}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconCode:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/code.27444ba.svg);mask-image:url(../../img/element-icons/room/format-bar/code.27444ba.svg)}.mx_MessageComposerFormatBar_buttonTooltip{white-space:nowrap;font-size:1.3rem;font-weight:600;min-width:54px;text-align:center}.mx_MessageComposerFormatBar_buttonTooltip .mx_MessageComposerFormatBar_tooltipShortcut{font-size:.9rem;opacity:.7}.mx_NewRoomIntro{margin:40px 0 48px 64px}.mx_NewRoomIntro .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover):after,.mx_NewRoomIntro .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover):before{content:unset}.mx_NewRoomIntro .mx_AccessibleButton_kind_link{padding:0;font-size:inherit}.mx_NewRoomIntro .mx_NewRoomIntro_buttons{margin-top:28px}.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton{line-height:2.4rem;display:inline-block}.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton+.mx_AccessibleButton{margin-left:12px}.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton:not(.mx_AccessibleButton_kind_primary_outline):before{content:"";display:inline-block;background-color:#fff;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:20px;mask-size:20px;width:20px;height:20px;margin-right:5px;vertical-align:text-bottom}.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_NewRoomIntro_inviteButton:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_NewRoomIntro>h2{margin-top:24px;font-size:2.4rem;font-weight:600}.mx_NewRoomIntro>p{margin:0;font-size:1.5rem;color:#737d8c}.mx_NotificationBadge:not(.mx_NotificationBadge_visible){display:none}.mx_NotificationBadge.mx_NotificationBadge_visible{background-color:#61708b;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_highlighted{background-color:#ff4b55}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_dot{background-color:#2e2f32;width:6px;height:6px;border-radius:6px}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_2char{width:1.6rem;height:1.6rem;border-radius:1.6rem}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_3char{width:2.6rem;height:1.6rem;border-radius:1.6rem}.mx_NotificationBadge.mx_NotificationBadge_visible .mx_NotificationBadge_count{font-size:1rem;line-height:1.4rem;color:#fff}.mx_PinnedEventTile{min-height:40px;margin-bottom:5px;width:100%;border-radius:5px}.mx_PinnedEventTile:hover{background-color:#f6f7f8}.mx_PinnedEventTile .mx_PinnedEventTile_sender,.mx_PinnedEventTile .mx_PinnedEventTile_timestamp{color:#868686;font-size:.8em;vertical-align:top;display:inline-block;padding-bottom:3px}.mx_PinnedEventTile .mx_PinnedEventTile_timestamp{padding-left:15px;display:none}.mx_PinnedEventTile .mx_PinnedEventTile_senderAvatar .mx_BaseAvatar{float:left;margin-right:10px}.mx_PinnedEventTile_actions{float:right;margin-right:10px;display:none}.mx_PinnedEventTile:hover .mx_PinnedEventTile_timestamp{display:inline-block}.mx_PinnedEventTile:hover .mx_PinnedEventTile_actions{display:block}.mx_PinnedEventTile_unpinButton{display:inline-block;cursor:pointer;margin-left:10px}.mx_PinnedEventTile_gotoButton{display:inline-block;font-size:.7em}.mx_PinnedEventTile_message{margin-left:50px;position:relative;top:0;left:0}.mx_PinnedEventsPanel{border-top:1px solid transparent}.mx_PinnedEventsPanel_body{max-height:300px;overflow-y:auto;padding-bottom:15px}.mx_PinnedEventsPanel_header{margin:0;padding-top:8px;padding-bottom:15px}.mx_PinnedEventsPanel_cancel{margin:12px;float:right;display:inline-block}.mx_PresenceLabel{font-size:1.1rem;opacity:.5}.mx_ReplyPreview{background:#fff;border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;max-height:50vh;overflow:auto;-webkit-box-shadow:0 -16px 32px rgba(0,0,0,.04);box-shadow:0 -16px 32px rgba(0,0,0,.04)}.mx_ReplyPreview_section{border-bottom:1px solid transparent}.mx_ReplyPreview_header{margin:12px;color:#2e2f32;font-weight:400;opacity:.4}.mx_ReplyPreview_title{float:left}.mx_ReplyPreview_cancel{float:right;cursor:pointer}.mx_ReplyPreview_clear{clear:both}.mx_RoomBreadcrumbs{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_crumb{margin-right:8px;width:32px}.mx_RoomBreadcrumbs.mx_RoomBreadcrumbs-enter{margin-left:-40px}.mx_RoomBreadcrumbs.mx_RoomBreadcrumbs-enter-active{margin-left:0;-webkit-transition:margin-left .64s cubic-bezier(.66,.02,.36,1);transition:margin-left .64s cubic-bezier(.66,.02,.36,1)}.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_placeholder{font-weight:600;font-size:1.4rem;line-height:32px;height:32px}.mx_RoomBreadcrumbs_Tooltip{margin-left:-42px;margin-top:-42px}.mx_RoomHeader{-webkit-box-flex:0;-ms-flex:0 0 50px;flex:0 0 50px;border-bottom:1px solid transparent;background-color:#fff}.mx_RoomHeader .mx_RoomHeader_e2eIcon{height:12px;width:12px}.mx_RoomHeader .mx_RoomHeader_e2eIcon .mx_E2EIcon{margin:0;position:absolute;height:12px;width:12px}.mx_RoomHeader_wrapper{margin:auto;height:50px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:0;padding:0 10px 0 18px}.mx_RoomHeader_wrapper .mx_InviteOnlyIcon_large{margin:0}.mx_RoomHeader_spinner{-webkit-box-flex:1;-ms-flex:1;flex:1;height:36px;padding-left:12px;padding-right:12px}.mx_RoomHeader_textButton{vertical-align:middle;border:0;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;padding:7px 1.5em;cursor:pointer;display:inline-block;outline:none;margin-right:8px;margin-top:-5px}.mx_RoomHeader_textButton_danger{background-color:#ff4b55}.mx_RoomHeader_cancelButton{cursor:pointer;padding-left:12px;padding-right:12px}.mx_RoomHeader_buttons{background-color:#fff}.mx_RoomHeader_buttons,.mx_RoomHeader_info{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomHeader_info{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomHeader_simpleHeader{line-height:5.2rem;color:#45474a;font-size:1.8rem;font-weight:600;overflow:hidden;margin-left:63px;text-overflow:ellipsis;width:100%}.mx_RoomHeader_simpleHeader .mx_RoomHeader_cancelButton{float:right}.mx_RoomHeader_simpleHeader .mx_RoomHeader_icon{margin-left:14px;margin-right:24px;vertical-align:-4px}.mx_RoomHeader_name{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;overflow:hidden;color:#45474a;font-weight:600;font-size:1.8rem;margin:0 7px;border-bottom:1px solid transparent;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomHeader_nametext{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.mx_RoomHeader_settingsHint{color:#a2a2a2!important}.mx_RoomHeader_searchStatus{font-weight:400;opacity:.6}.mx_RoomHeader_avatar,.mx_RoomHeader_avatarPicker,.mx_RoomHeader_avatarPicker_edit,.mx_RoomHeader_avatarPicker_remove,.mx_RoomHeader_name{cursor:pointer}.mx_RoomHeader_avatarPicker_remove{position:absolute;top:-11px;right:-9px}.mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable){color:#0dbd8b}.mx_RoomHeader_placeholder{color:#a2a2a2!important}.mx_RoomHeader_editable{border-bottom:1px solid #c7c7c7!important;min-width:150px;cursor:text}.mx_RoomHeader_editable:focus{border-bottom:1px solid #0dbd8b!important;outline:none;-webkit-box-shadow:none;box-shadow:none}.mx_RoomHeader_topic{-webkit-box-flex:1;-ms-flex:1;flex:1;color:#9e9e9e;font-weight:400;font-size:1.3rem;margin:4px 7px 0;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid transparent;line-height:1.2em;max-height:2.4em}.mx_RoomHeader_avatar{-webkit-box-flex:0;-ms-flex:0;flex:0;margin:0 6px 0 7px;position:relative}.mx_RoomHeader_avatar .mx_BaseAvatar_image{-o-object-fit:cover;object-fit:cover}.mx_RoomHeader_avatarPicker{position:relative}.mx_RoomHeader_avatarPicker_edit{position:absolute;left:16px;top:18px}.mx_RoomHeader_avatarPicker_edit>label{cursor:pointer}.mx_RoomHeader_avatarPicker_edit>input{display:none}.mx_RoomHeader_button{position:relative;margin-left:1px;margin-right:1px;cursor:pointer;height:32px;width:32px;border-radius:100%}.mx_RoomHeader_button:before{content:"";position:absolute;top:4px;left:4px;height:24px;width:24px;background-color:#c1c6cd;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_RoomHeader_button:hover{background:rgba(13,189,139,.1)}.mx_RoomHeader_button:hover:before{background-color:#0dbd8b}.mx_RoomHeader_forgetButton:before{-webkit-mask-image:url(../../img/element-icons/leave.bb917e7.svg);mask-image:url(../../img/element-icons/leave.bb917e7.svg);width:26px}.mx_RoomHeader_appsButton:before{-webkit-mask-image:url(../../img/element-icons/room/apps.5ee9f78.svg);mask-image:url(../../img/element-icons/room/apps.5ee9f78.svg)}.mx_RoomHeader_appsButton_highlight:before{background-color:#0dbd8b}.mx_RoomHeader_searchButton:before{-webkit-mask-image:url(../../img/element-icons/room/search-inset.db6314d.svg);mask-image:url(../../img/element-icons/room/search-inset.db6314d.svg)}.mx_RoomHeader_voiceCallButton:before{-webkit-mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);-webkit-mask-size:20px;mask-size:20px;-webkit-mask-position:center;mask-position:center}.mx_RoomHeader_videoCallButton:before{-webkit-mask-image:url(../../img/element-icons/call/video-call.f465ed0.svg);mask-image:url(../../img/element-icons/call/video-call.f465ed0.svg)}.mx_RoomHeader_showPanel{height:16px}.mx_RoomHeader_voipButton{display:table-cell}.mx_RoomHeader_voipButtons{margin-top:18px}.mx_RoomHeader_pinnedButton:before{-webkit-mask-image:url(../../img/element-icons/room/pin.6ab67ed.svg);mask-image:url(../../img/element-icons/room/pin.6ab67ed.svg)}.mx_RoomHeader_pinsIndicator{position:absolute;right:0;bottom:4px;width:8px;height:8px;border-radius:8px;background-color:#8d99a5}.mx_RoomHeader_pinsIndicatorUnread{background-color:#ff4b55}@media only screen and (max-width:480px){.mx_RoomHeader_wrapper{padding:0}.mx_RoomHeader{overflow:hidden}}.mx_RoomList{padding-right:7px}.mx_RoomList_iconPlus:before{-webkit-mask-image:url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);mask-image:url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg)}.mx_RoomList_iconHash:before{-webkit-mask-image:url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);mask-image:url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg)}.mx_RoomList_iconExplore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg)}.mx_RoomList_iconBrowse:before{-webkit-mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg);mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg)}.mx_RoomList_iconDialpad:before{-webkit-mask-image:url(../../img/element-icons/roomlist/dialpad.37f876f.svg);mask-image:url(../../img/element-icons/roomlist/dialpad.37f876f.svg)}.mx_RoomList_explorePrompt{margin:4px 12px;padding-top:12px;border-top:1px solid #e7e7e7;font-size:1.4rem}.mx_RoomList_explorePrompt div:first-child{font-weight:600;line-height:1.8rem;color:#2e2f32}.mx_RoomList_explorePrompt .mx_AccessibleButton{color:#2e2f32;position:relative;padding:8px 8px 8px 32px;font-size:inherit;margin-top:12px;display:block;text-align:start;background-color:rgba(141,151,165,.2);border-radius:4px}.mx_RoomList_explorePrompt .mx_AccessibleButton:before{content:"";width:16px;height:16px;position:absolute;top:8px;left:8px;background:#737d8c;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mx_RoomList_explorePrompt .mx_AccessibleButton.mx_RoomList_explorePrompt_startChat:before{-webkit-mask-image:url(../../img/element-icons/feedback.a91241e.svg);mask-image:url(../../img/element-icons/feedback.a91241e.svg)}.mx_RoomList_explorePrompt .mx_AccessibleButton.mx_RoomList_explorePrompt_explore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg)}.mx_RoomList_explorePrompt .mx_AccessibleButton.mx_RoomList_explorePrompt_spaceInvite:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_RoomList_explorePrompt .mx_AccessibleButton.mx_RoomList_explorePrompt_spaceExplore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg);mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg)}.mx_RoomPreviewBar{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-align-items:center}.mx_RoomPreviewBar h3{font-size:1.8rem;font-weight:600}.mx_RoomPreviewBar h3.mx_RoomPreviewBar_spinnerTitle{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomPreviewBar .mx_RoomPreviewBar_message p,.mx_RoomPreviewBar h3{word-break:break-all;word-break:break-word}.mx_RoomPreviewBar .mx_Spinner{width:auto;height:auto;margin:10px 10px 10px 0;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_RoomPreviewBar .mx_RoomPreviewBar_footer{font-size:1.2rem;line-height:2rem}.mx_RoomPreviewBar .mx_RoomPreviewBar_footer .mx_Spinner{vertical-align:middle;display:inline-block}.mx_RoomPreviewBar_actions,.mx_RoomPreviewBar_message{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomPreviewBar_message{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.mx_RoomPreviewBar_message p{overflow-wrap:break-word}.mx_RoomPreviewBar_panel{padding:8px 8px 8px 20px;border-top:1px solid transparent;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding:3px 8px}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions>*{margin-left:12px}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;min-width:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message>*{margin:4px}.mx_RoomPreviewBar_dialog{margin:auto;-webkit-box-sizing:content;box-sizing:content;width:400px;border-radius:4px;padding:20px;text-align:center}.mx_RoomPreviewBar_dialog,.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message>*{margin:5px 0 20px}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions .mx_AccessibleButton{padding:7px 50px}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions>*{margin-top:12px}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions .mx_AccessibleButton.mx_AccessibleButton_kind_primary{margin-bottom:7px}.mx_RoomPreviewBar_inviter{font-weight:600}a.mx_RoomPreviewBar_inviter{text-decoration:underline;cursor:pointer}.mx_RoomSublist{margin-left:8px;margin-bottom:4px}.mx_RoomSublist.mx_RoomSublist_hidden{display:none}.mx_RoomSublist .mx_RoomSublist_headerContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-bottom:8px;max-height:24px;color:#8d99a5}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable.mx_RoomSublist_headerContainer_sticky{position:fixed;height:32px;width:calc(100% - 22px)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer .mx_NotificationBadge{margin-left:8px}.mx_RoomSublist .mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) .mx_NotificationBadge{margin-right:4px}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton,.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton{margin-left:8px;position:relative;width:24px;height:24px;border-radius:8px}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:before,.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton:before{content:"";width:16px;height:16px;position:absolute;top:4px;left:4px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#61708b}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:hover,.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton:hover{background:rgba(141,151,165,.2)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton{visibility:hidden;width:0;margin:0}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:before{-webkit-mask-image:url(../../img/element-icons/roomlist/plus.daac9ba.svg);mask-image:url(../../img/element-icons/roomlist/plus.daac9ba.svg)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton:before{-webkit-mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);mask-image:url(../../img/element-icons/context-menu.829cc1a.svg)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:calc(100% - 16px);line-height:1.6rem;font-size:1.3rem;font-weight:600;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText .mx_RoomSublist_collapseBtn{display:inline-block;position:relative;width:14px;height:14px;margin-right:6px}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText .mx_RoomSublist_collapseBtn:before{content:"";width:18px;height:18px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#8d99a5;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText .mx_RoomSublist_collapseBtn.mx_RoomSublist_collapseBtn_collapsed:before{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.mx_RoomSublist:first-child .mx_RoomSublist_headerContainer{height:0;padding-bottom:4px}.mx_RoomSublist .mx_RoomSublist_resizeBox{position:relative;-ms-flex-direction:column;flex-direction:column}.mx_RoomSublist .mx_RoomSublist_resizeBox,.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_tiles{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;overflow:hidden}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_tiles{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;-ms-flex-direction:column;flex-direction:column;-webkit-mask-image:linear-gradient(0deg,transparent,#000 4px);mask-image:linear-gradient(0deg,transparent,#000 4px)}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandles_showNButton{-webkit-box-flex:0;-ms-flex:0 0 32px;flex:0 0 32px}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandles{-webkit-box-flex:0;-ms-flex:0 0 4px;flex:0 0 4px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandle{cursor:ns-resize;border-radius:3px;max-width:64px;height:4px!important;position:relative!important;bottom:0!important}.mx_RoomSublist .mx_RoomSublist_resizeBox.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_resizerHandle,.mx_RoomSublist .mx_RoomSublist_resizeBox:hover .mx_RoomSublist_resizerHandle{opacity:.8;background-color:#2e2f32}.mx_RoomSublist .mx_RoomSublist_showNButton{cursor:pointer;font-size:1.3rem;line-height:1.8rem;color:#737d8c;height:24px;padding-bottom:4px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showNButtonChevron{position:relative;width:18px;height:18px;margin-left:12px;margin-right:16px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#8d99a5;left:-1px}.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showLessButtonChevron,.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showMoreButtonChevron{-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showLessButtonChevron{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mx_RoomSublist.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton,.mx_RoomSublist:not(.mx_RoomSublist_minimized)>.mx_RoomSublist_headerContainer:focus-within .mx_RoomSublist_menuButton,.mx_RoomSublist:not(.mx_RoomSublist_minimized)>.mx_RoomSublist_headerContainer:hover .mx_RoomSublist_menuButton{visibility:visible;width:24px;margin-left:8px}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer{height:auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0;-ms-flex-item-align:end;align-self:flex-end;margin-right:0}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;max-width:100%}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;visibility:visible;width:32px!important;height:32px!important;margin-left:0!important;background-color:rgba(141,151,165,.2);margin-top:8px}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:before{top:8px;left:8px}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_resizeBox{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_showNButton{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_showNButton .mx_RoomSublist_showNButtonChevron{margin-right:12px}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_menuButton{height:16px}.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton,.mx_RoomSublist.mx_RoomSublist_minimized>.mx_RoomSublist_headerContainer:hover .mx_RoomSublist_menuButton{visibility:visible;position:absolute;bottom:48px;right:0;width:16px;height:16px;border-radius:0;z-index:1;background-color:hsla(0,0%,96.1%,.9)}.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton:before,.mx_RoomSublist.mx_RoomSublist_minimized>.mx_RoomSublist_headerContainer:hover .mx_RoomSublist_menuButton:before{top:0;left:0}.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) .mx_RoomSublist_menuButton,.mx_RoomSublist.mx_RoomSublist_minimized>.mx_RoomSublist_headerContainer:hover.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) .mx_RoomSublist_menuButton{bottom:8px}.mx_RoomSublist_contextMenu{padding:20px 16px;width:250px}.mx_RoomSublist_contextMenu hr{margin-top:16px;margin-bottom:16px;margin-right:16px;border:1px solid #2e2f32;opacity:.1}.mx_RoomSublist_contextMenu .mx_RoomSublist_contextMenu_title{font-size:1.5rem;line-height:2rem;font-weight:600;margin-bottom:4px}.mx_RoomSublist_contextMenu .mx_Checkbox,.mx_RoomSublist_contextMenu .mx_RadioButton{margin-top:8px}.mx_RoomSublist_addRoomTooltip{margin-top:-3px}.mx_RoomSublist_skeletonUI{position:relative;margin-left:4px;height:288px}.mx_RoomSublist_skeletonUI:before{background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(hsla(0,0%,100%,0)));background:linear-gradient(180deg,#fff,hsla(0,0%,100%,0));width:100%;height:100%;content:"";position:absolute;-webkit-mask-repeat:repeat-y;mask-repeat:repeat-y;-webkit-mask-size:auto 48px;mask-size:auto 48px;-webkit-mask-image:url(../../img/element-icons/roomlist/skeleton-ui.1f67400.svg);mask-image:url(../../img/element-icons/roomlist/skeleton-ui.1f67400.svg)}.mx_RoomTile{margin-bottom:4px;padding:4px;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomTile.mx_RoomTile_hasMenuOpen,.mx_RoomTile.mx_RoomTile_selected,.mx_RoomTile:focus-within,.mx_RoomTile:hover{background-color:#fff;border-radius:8px}.mx_RoomTile .mx_DecoratedRoomAvatar,.mx_RoomTile .mx_RoomTile_avatarContainer{margin-right:8px}.mx_RoomTile .mx_RoomTile_nameContainer{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;min-width:0;margin-right:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_messagePreview,.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name{margin:0 2px;width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name{font-size:1.4rem;line-height:1.8rem}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name.mx_RoomTile_nameHasUnreadEvents{font-weight:600}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_messagePreview{font-size:1.3rem;line-height:1.8rem;color:#737d8c}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_nameWithPreview{margin-top:-4px}.mx_RoomTile .mx_RoomTile_notificationsButton{margin-left:4px}.mx_RoomTile .mx_RoomTile_badgeContainer{height:16px;margin:auto 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge{margin-right:2px}.mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge_dot{margin-left:5px;margin-right:7px}.mx_RoomTile .mx_RoomTile_menuButton,.mx_RoomTile .mx_RoomTile_notificationsButton{width:20px;min-width:20px;height:20px;margin-top:auto;margin-bottom:auto;position:relative;display:none}.mx_RoomTile .mx_RoomTile_menuButton:before,.mx_RoomTile .mx_RoomTile_notificationsButton:before{top:2px;left:2px;content:"";width:16px;height:16px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#2e2f32}.mx_RoomTile .mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show{display:block}.mx_RoomTile .mx_RoomTile_menuButton:before{-webkit-mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);mask-image:url(../../img/element-icons/context-menu.829cc1a.svg)}.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen .mx_RoomTile_badgeContainer,.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within .mx_RoomTile_badgeContainer,.mx_RoomTile:not(.mx_RoomTile_minimized):hover .mx_RoomTile_badgeContainer{width:0;height:0;display:none}.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen .mx_RoomTile_menuButton,.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen .mx_RoomTile_notificationsButton,.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within .mx_RoomTile_menuButton,.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within .mx_RoomTile_notificationsButton,.mx_RoomTile:not(.mx_RoomTile_minimized):hover .mx_RoomTile_menuButton,.mx_RoomTile:not(.mx_RoomTile_minimized):hover .mx_RoomTile_notificationsButton{display:block}.mx_RoomTile.mx_RoomTile_minimized{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative}.mx_RoomTile.mx_RoomTile_minimized .mx_DecoratedRoomAvatar,.mx_RoomTile.mx_RoomTile_minimized .mx_RoomTile_avatarContainer{margin-right:0}.mx_RoomTile_iconBell:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_RoomTile_iconBellDot:before{-webkit-mask-image:url(../../img/element-icons/roomlist/notifications-default.8b8509e.svg);mask-image:url(../../img/element-icons/roomlist/notifications-default.8b8509e.svg)}.mx_RoomTile_iconBellCrossed:before{-webkit-mask-image:url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);mask-image:url(../../img/element-icons/roomlist/notifications-off.0c57561.svg)}.mx_RoomTile_iconBellMentions:before{-webkit-mask-image:url(../../img/element-icons/roomlist/notifications-dm.ffa8881.svg);mask-image:url(../../img/element-icons/roomlist/notifications-dm.ffa8881.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconStar:before{-webkit-mask-image:url(../../img/element-icons/roomlist/favorite.ff7609d.svg);mask-image:url(../../img/element-icons/roomlist/favorite.ff7609d.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconArrowDown:before{-webkit-mask-image:url(../../img/element-icons/roomlist/low-priority.6c7fb97.svg);mask-image:url(../../img/element-icons/roomlist/low-priority.6c7fb97.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconSettings:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconInvite:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconSignOut:before{-webkit-mask-image:url(../../img/element-icons/leave.bb917e7.svg);mask-image:url(../../img/element-icons/leave.bb917e7.svg)}.mx_RoomUpgradeWarningBar{max-height:235px;background-color:#f7f7f7;padding-left:20px;padding-right:20px;overflow:scroll}.mx_RoomUpgradeWarningBar_wrapped{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;text-align:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center}.mx_RoomUpgradeWarningBar_header{color:#ff4b55;font-weight:700}.mx_RoomUpgradeWarningBar_body{color:#ff4b55}.mx_RoomUpgradeWarningBar_upgradelink{color:#ff4b55;text-decoration:underline}.mx_RoomUpgradeWarningBar_small{color:#888;font-size:70%}.mx_SearchBar{height:56px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-bottom:1px solid transparent}.mx_SearchBar .mx_SearchBar_input{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;margin-left:22px}.mx_SearchBar .mx_SearchBar_searchButton{cursor:pointer;width:37px;height:37px;background-color:#0dbd8b;-webkit-mask:url(../../img/feather-customised/search-input.044bfa7.svg);mask:url(../../img/feather-customised/search-input.044bfa7.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.mx_SearchBar .mx_SearchBar_buttons{display:inherit}.mx_SearchBar .mx_SearchBar_button{border:0;margin:0 0 0 22px;padding:5px;font-size:1.5rem;cursor:pointer;color:#2e2f32;border-bottom:2px solid #0dbd8b;font-weight:600}.mx_SearchBar .mx_SearchBar_unselected{color:#9fa9ba;border-color:transparent}.mx_SearchBar .mx_SearchBar_cancel{background-color:#ff4b55;-webkit-mask:url(../../img/cancel.4b9715b.svg);mask:url(../../img/cancel.4b9715b.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:14px;mask-size:14px;padding:9px;margin:0 12px 0 3px;cursor:pointer}.mx_SendMessageComposer{-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;font-size:1.4rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-right:6px;min-width:0}.mx_SendMessageComposer,.mx_SendMessageComposer .mx_BasicMessageComposer{-webkit-box-flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal}.mx_SendMessageComposer .mx_BasicMessageComposer{-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;min-height:50px}.mx_SendMessageComposer .mx_BasicMessageComposer .mx_BasicMessageComposer_input{padding:3px 0;margin:auto 0;max-height:140px;overflow-y:auto}.mx_Stickers_content{overflow:hidden}.mx_Stickers_content_container{overflow:hidden;height:300px}#mx_persistedElement_stickerPicker .mx_AppTileFullWidth{height:unset;-webkit-box-sizing:border-box;box-sizing:border-box;border-left:none;border-right:none;border-bottom:none}#mx_persistedElement_stickerPicker .mx_AppTileMenuBar{padding:0}#mx_persistedElement_stickerPicker iframe{height:283px}.mx_Stickers_contentPlaceholder{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.mx_Stickers_contentPlaceholder p{max-width:200px}.mx_Stickers_addLink{display:inline;cursor:pointer;color:#0dbd8b}.mx_Stickers_hideStickers{z-index:2001}.mx_TopUnreadMessagesBar{z-index:1000;position:absolute;top:24px;right:24px;width:38px}.mx_TopUnreadMessagesBar:after{content:"";position:absolute;top:-8px;left:10.5px;width:4px;height:4px;border-radius:16px;background-color:#f2f5f8;border:6px solid #0dbd8b;pointer-events:none}.mx_TopUnreadMessagesBar_scrollUp{height:38px;border-radius:19px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;border:1.3px solid #61708b;cursor:pointer}.mx_TopUnreadMessagesBar_scrollUp:before{content:"";position:absolute;width:36px;height:36px;-webkit-mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;background:#61708b;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mx_TopUnreadMessagesBar_markAsRead{display:block;width:18px;height:18px;background:#fff;border:1.3px solid #61708b;border-radius:10px;margin:5px auto}.mx_TopUnreadMessagesBar_markAsRead:before{content:"";position:absolute;width:18px;height:18px;-webkit-mask-image:url(../../img/cancel.4b9715b.svg);mask-image:url(../../img/cancel.4b9715b.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:10px;mask-size:10px;-webkit-mask-position:4px 4px;mask-position:4px 4px;background:#61708b}.mx_VoiceRecordComposerTile_stop{width:28px;height:28px;border:2px solid #e3e8f0;border-radius:32px;margin-right:16px;position:relative}.mx_VoiceRecordComposerTile_stop:after{content:"";width:14px;height:14px;position:absolute;top:7px;left:7px;border-radius:2px;background-color:#ff4b55}.mx_VoiceRecordComposerTile_delete{width:14px;height:18px;vertical-align:middle;margin-right:11px;background-color:#8d99a5;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/trashcan.26f6c28.svg);mask-image:url(../../img/element-icons/trashcan.26f6c28.svg)}.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer{margin:6px 12px 6px 6px;position:relative}.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording{padding-left:22px}.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording:before{-webkit-animation:recording-pulse 2s infinite;animation:recording-pulse 2s infinite;content:"";background-color:#ff4b55;width:10px;height:10px;position:absolute;left:12px;top:18px;border-radius:10px}@-webkit-keyframes recording-pulse{0%{opacity:1}35%{opacity:0}65%{opacity:1}}@keyframes recording-pulse{0%{opacity:1}35%{opacity:0}65%{opacity:1}}.mx_WhoIsTypingTile{margin-left:-18px;padding-top:18px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_WhoIsTypingTile_avatars{-webkit-box-flex:0;-ms-flex:0 0 83px;flex:0 0 83px;text-align:center}.mx_WhoIsTypingTile_avatars>:not(:first-child){margin-left:-12px}.mx_WhoIsTypingTile_avatars .mx_BaseAvatar_initial{padding-top:1px}.mx_WhoIsTypingTile_avatars .mx_BaseAvatar{border:1px solid #fff;border-radius:40px}.mx_WhoIsTypingTile_remainingAvatarPlaceholder{position:relative;display:inline-block;color:#acacac;background-color:#ddd;border:1px solid #fff;border-radius:40px;width:24px;height:24px;line-height:2.4rem;font-size:.8em;vertical-align:top;text-align:center}.mx_WhoIsTypingTile_label{-webkit-box-flex:1;-ms-flex:1;flex:1;font-size:1.4rem;font-weight:600;color:#9e9e9e}.mx_WhoIsTypingTile_label>span{background-image:url(../../img/typing-indicator-2x.0eb9f0e.gif);background-size:25px;background-position:0 100%;background-repeat:no-repeat;padding-bottom:15px;display:block}.mx_MatrixChat_useCompactLayout .mx_WhoIsTypingTile{padding-top:4px}.mx_AvatarSetting_avatar{width:90px;min-width:90px;height:90px;margin-top:8px;position:relative}.mx_AvatarSetting_avatar .mx_AvatarSetting_hover{-webkit-transition:opacity .08s cubic-bezier(.46,.03,.52,.96);transition:opacity .08s cubic-bezier(.46,.03,.52,.96);position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none;line-height:90px;text-align:center}.mx_AvatarSetting_avatar .mx_AvatarSetting_hover>span{color:#fff;position:relative;font-weight:500}.mx_AvatarSetting_avatar .mx_AvatarSetting_hover .mx_AvatarSetting_hoverBg{position:absolute;top:0;bottom:0;left:0;right:0;opacity:.5;background-color:#2e2f32;border-radius:90px}.mx_AvatarSetting_avatar.mx_AvatarSetting_avatar_hovering .mx_AvatarSetting_hover{opacity:1}.mx_AvatarSetting_avatar:not(.mx_AvatarSetting_avatar_hovering) .mx_AvatarSetting_hover{opacity:0}.mx_AvatarSetting_avatar>*{-webkit-box-sizing:border-box;box-sizing:border-box}.mx_AvatarSetting_avatar .mx_AccessibleButton.mx_AccessibleButton_kind_primary{margin-top:8px}.mx_AvatarSetting_avatar .mx_AccessibleButton.mx_AccessibleButton_kind_link_sm{width:100%}.mx_AvatarSetting_avatar>img{cursor:pointer;-o-object-fit:cover;object-fit:cover}.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder,.mx_AvatarSetting_avatar>img{display:block;height:90px;width:inherit;border-radius:90px;cursor:pointer}.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder:before{background-color:#2e2f32;-webkit-mask:url(../../img/feather-customised/user.7a4d23d.svg);mask:url(../../img/feather-customised/user.7a4d23d.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:36px;mask-size:36px;-webkit-mask-position:center;mask-position:center;content:"";position:absolute;top:0;bottom:0;left:0;right:0}.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton{width:32px;height:32px;border-radius:32px;background-color:#e7e7e7;position:absolute;bottom:0;right:0}.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton:before{content:"";display:block;width:100%;height:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:55%;mask-size:55%;background-color:#2e2f32;-webkit-mask-image:url(../../img/feather-customised/edit.fd55ec2.svg);mask-image:url(../../img/feather-customised/edit.fd55ec2.svg)}.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder{background-color:#f4f6fa}.mx_CrossSigningPanel_statusList{border-spacing:0}.mx_CrossSigningPanel_statusList td{padding:0}.mx_CrossSigningPanel_statusList td:first-of-type{-webkit-padding-end:1em;padding-inline-end:1em}.mx_CrossSigningPanel_buttonRow{margin:1em 0}.mx_CrossSigningPanel_buttonRow :nth-child(n+1){-webkit-margin-end:10px;margin-inline-end:10px}.mx_DevicesPanel{display:table;table-layout:fixed;width:880px;border-spacing:10px}.mx_DevicesPanel_header{display:table-header-group;font-weight:700}.mx_DevicesPanel_header>.mx_DevicesPanel_deviceButtons{height:48px}.mx_DevicesPanel_header>div{display:table-cell;vertical-align:middle}.mx_DevicesPanel_header .mx_DevicesPanel_deviceName{width:50%}.mx_DevicesPanel_header .mx_DevicesPanel_deviceLastSeen{width:30%}.mx_DevicesPanel_header .mx_DevicesPanel_deviceButtons{width:20%}.mx_DevicesPanel_device{display:table-row}.mx_DevicesPanel_device>div{display:table-cell}.mx_DevicesPanel_myDevice{font-weight:700}.mx_E2eAdvancedPanel_settingLongDescription{margin-right:150px}.mx_ExistingEmailAddress{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:5px}.mx_ExistingEmailAddress_delete{margin-right:5px;cursor:pointer;vertical-align:middle}.mx_ExistingEmailAddress_email,.mx_ExistingEmailAddress_promptText{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:10px}.mx_ExistingEmailAddress_confirmBtn{margin-left:5px}.mx_IntegrationManager .mx_Dialog{width:60%;height:70%;overflow:hidden;padding:0;max-width:none;max-height:none}.mx_IntegrationManager iframe{background-color:#fff;border:0;width:100%;height:100%}.mx_IntegrationManager_loading h3{text-align:center}.mx_IntegrationManager_error{text-align:center;padding-top:20px}.mx_IntegrationManager_error h3{color:#ff4b55}.mx_UserNotifSettings_tableRow{display:table-row}.mx_UserNotifSettings_inputCell{display:table-cell;padding-bottom:8px;padding-right:8px;width:16px}.mx_UserNotifSettings_labelCell{padding-bottom:8px;width:400px;display:table-cell}.mx_UserNotifSettings_pushRulesTableWrapper{padding-bottom:8px}.mx_UserNotifSettings_pushRulesTable{width:100%;table-layout:fixed}.mx_UserNotifSettings_pushRulesTable thead{font-weight:700}.mx_UserNotifSettings_pushRulesTable tbody th{font-weight:400}.mx_UserNotifSettings_pushRulesTable tbody th:first-child{text-align:left}.mx_UserNotifSettings_keywords{cursor:pointer;color:#0dbd8b}.mx_UserNotifSettings_devicesTable td{padding-left:20px;padding-right:20px}.mx_UserNotifSettings_notifTable{display:table;position:relative}.mx_UserNotifSettings_notifTable .mx_Spinner{position:absolute}.mx_NotificationSound_soundUpload{display:none}.mx_NotificationSound_browse{color:#0dbd8b;border:1px solid #0dbd8b;background-color:transparent}.mx_NotificationSound_save{margin-left:5px;color:#fff;background-color:#0dbd8b}.mx_NotificationSound_resetSound{margin-top:5px;color:#fff;border:#ff4b55;background-color:#ff4b55}.mx_ExistingPhoneNumber{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:5px}.mx_ExistingPhoneNumber_delete{margin-right:5px;cursor:pointer;vertical-align:middle}.mx_ExistingPhoneNumber_address,.mx_ExistingPhoneNumber_promptText{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:10px}.mx_ExistingPhoneNumber_confirmBtn{margin-left:5px}.mx_ExistingPhoneNumber_verification{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_ExistingPhoneNumber_verification .mx_Field{margin:0 0 0 1em}.mx_PhoneNumbers_input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_PhoneNumbers_input>.mx_Field{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_PhoneNumbers_country{width:80px}.mx_ProfileSettings_controls_topic>textarea{resize:vertical}.mx_ProfileSettings_profile{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_ProfileSettings_controls{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;margin-right:54px}.mx_ProfileSettings_controls .mx_SettingsTab_subheading{margin-top:0}.mx_ProfileSettings_controls .mx_Field #profileTopic{height:4em}.mx_ProfileSettings_controls .mx_Field:first-child{margin-top:0}.mx_ProfileSettings_hostingSignup{margin-left:20px}.mx_ProfileSettings_hostingSignup img{margin-left:5px}.mx_ProfileSettings_avatarUpload{display:none}.mx_ProfileSettings_profileForm{margin-right:100px;border-bottom:1px solid #e7e7e7}.mx_ProfileSettings_buttons{margin-top:10px;margin-bottom:28px}.mx_ProfileSettings_buttons>.mx_AccessibleButton_kind_link{padding-left:0}.mx_SecureBackupPanel_deviceNotVerified,.mx_SecureBackupPanel_deviceVerified,.mx_SecureBackupPanel_sigInvalid,.mx_SecureBackupPanel_sigValid{font-weight:700}.mx_SecureBackupPanel_deviceVerified,.mx_SecureBackupPanel_sigValid{color:#76cfa5}.mx_SecureBackupPanel_deviceNotVerified,.mx_SecureBackupPanel_sigInvalid{color:#ba6363}.mx_SecureBackupPanel_deviceName{font-style:italic}.mx_SecureBackupPanel_buttonRow{margin:1em 0}.mx_SecureBackupPanel_buttonRow :nth-child(n+1){-webkit-margin-end:10px;margin-inline-end:10px}.mx_SecureBackupPanel_statusList{border-spacing:0}.mx_SecureBackupPanel_statusList td{padding:0}.mx_SecureBackupPanel_statusList td:first-of-type{-webkit-padding-end:1em;padding-inline-end:1em}.mx_SetIdServer .mx_Field_input{margin-right:100px}.mx_SetIdServer_tooltip{max-width:120px}.mx_SetIntegrationManager{margin-top:10px;margin-bottom:10px}.mx_SetIntegrationManager>.mx_SettingsTab_heading{margin-bottom:10px}.mx_SetIntegrationManager>.mx_SettingsTab_heading>.mx_SettingsTab_subheading{display:inline-block;padding-left:5px}.mx_SetIntegrationManager .mx_ToggleSwitch{display:inline-block;float:right;top:9px;margin-right:100px}.mx_ExistingSpellCheckLanguage{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:5px}.mx_ExistingSpellCheckLanguage_language{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:10px}.mx_GeneralUserSettingsTab_spellCheckLanguageInput{margin-top:1em;margin-bottom:1em}.mx_SpellCheckLanguages{margin-right:100px}.mx_UpdateCheckButton_summary{margin-left:16px}.mx_UpdateCheckButton_summary .mx_AccessibleButton_kind_link{padding:0}.mx_SettingsTab{color:#61708b}.mx_SettingsTab_warningText{color:#ff4b55}.mx_SettingsTab_heading{font-size:2rem;font-weight:600;color:#2e2f32;margin-bottom:10px}.mx_SettingsTab_heading:nth-child(n+2){margin-top:30px}.mx_SettingsTab_subheading{font-size:1.6rem;display:block;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-weight:600;color:#2e2f32;margin-bottom:10px;margin-top:12px}.mx_SettingsTab_subsectionText{color:#61708b;font-size:1.4rem;display:block;margin:10px 100px 10px 0}.mx_SettingsTab_section{margin-bottom:24px}.mx_SettingsTab_section .mx_SettingsFlag{margin-right:100px;margin-bottom:10px}.mx_SettingsTab_section.mx_SettingsTab_subsectionText .mx_SettingsFlag{margin-right:0!important}.mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label{vertical-align:middle;display:inline-block;font-size:1.4rem;color:#2e2f32;max-width:calc(100% - 4.8rem);-webkit-box-sizing:border-box;box-sizing:border-box;padding-right:10px}.mx_SettingsTab_section .mx_SettingsFlag .mx_ToggleSwitch{float:right}.mx_SettingsTab_linkBtn{cursor:pointer;color:#0dbd8b;word-break:break-all}.mx_SettingsTab a{color:#238cf5}.mx_GeneralRoomSettingsTab_profileSection{margin-top:10px}.mx_RolesRoomSettingsTab ul{margin-bottom:0}.mx_RolesRoomSettingsTab_unbanBtn{margin-right:10px;margin-bottom:5px}.mx_SecurityRoomSettingsTab_warning{display:block}.mx_SecurityRoomSettingsTab_warning img{vertical-align:middle;margin-right:5px;margin-left:3px;margin-bottom:5px}.mx_SecurityRoomSettingsTab_encryptionSection{margin-bottom:25px}.mx_AppearanceUserSettingsTab_fontSlider,.mx_AppearanceUserSettingsTab_fontSlider_preview,.mx_AppearanceUserSettingsTab_Layout{margin-right:100px}.mx_AppearanceUserSettingsTab .mx_Field{width:256px}.mx_AppearanceUserSettingsTab_fontScaling{color:#2e2f32}.mx_AppearanceUserSettingsTab_fontSlider{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:15px;background:rgba(227,232,240,.2);border-radius:10px;font-size:10px;margin-top:24px;margin-bottom:24px}.mx_AppearanceUserSettingsTab_fontSlider_preview{border:1px solid #e3e8f0;border-radius:10px;padding:0 16px 9px;pointer-events:none}.mx_AppearanceUserSettingsTab_fontSlider_preview .mx_EventTile_msgOption{display:none}.mx_AppearanceUserSettingsTab_fontSlider_preview.mx_IRCLayout{padding-top:9px}.mx_AppearanceUserSettingsTab_fontSlider_smallText{font-size:15px;padding-right:20px;padding-left:5px;font-weight:500}.mx_AppearanceUserSettingsTab_fontSlider_largeText{font-size:18px;padding-left:20px;padding-right:5px;font-weight:500}.mx_AppearanceUserSettingsTab>.mx_SettingsTab_SubHeading{margin-bottom:32px}.mx_AppearanceUserSettingsTab_themeSection{color:#2e2f32}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:4px;margin-bottom:30px}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton{padding:1.6rem;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:10px;width:180px;background:#e3e8f0;opacity:.4;-ms-flex-negative:1;flex-shrink:1;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;margin-right:15px;margin-top:10px;font-weight:600;color:#61708b}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton>span{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled{opacity:1}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_light{background-color:#f3f8fd;color:#2e2f32}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_dark{background-color:#25282e;color:#f3f8fd}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_dark>input>div,.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_dark>input>div>div{border-color:#e3e8f0}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_black{background-color:#000;color:#f3f8fd}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_black>input>div,.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_black>input>div>div{border-color:#e3e8f0}.mx_SettingsTab_customFontSizeField{margin-left:calc(1.6rem + 10px)}.mx_AppearanceUserSettingsTab_Layout_RadioButtons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;color:#2e2f32}.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_AppearanceUserSettingsTab_spacer{width:24px}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:1;flex-shrink:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:300px;border:1px solid #e3e8f0;border-radius:10px}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_EventTile_msgOption,.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_MessageActionBar{display:none}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_AppearanceUserSettingsTab_Layout_RadioButton_preview{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:10px;pointer-events:none}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_RadioButton{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;padding:10px}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_EventTile_content{margin-right:0}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton.mx_AppearanceUserSettingsTab_Layout_RadioButton_selected{border-color:#0dbd8b}.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton{border-top:1px solid #e3e8f0}.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton>input+div{border-color:rgba(97,112,139,.2)}.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton_checked{background-color:rgba(13,189,139,.08)}.mx_AppearanceUserSettingsTab_Advanced{color:#2e2f32}.mx_AppearanceUserSettingsTab_Advanced>*{margin-bottom:16px}.mx_AppearanceUserSettingsTab_Advanced .mx_AppearanceUserSettingsTab_AdvancedToggle{color:#0dbd8b;cursor:pointer}.mx_AppearanceUserSettingsTab_Advanced .mx_AppearanceUserSettingsTab_systemFont{margin-left:calc(1.6rem + 10px)}.mx_GeneralUserSettingsTab_changePassword .mx_Field{margin-right:100px}.mx_GeneralUserSettingsTab_changePassword .mx_Field:first-child{margin-top:0}.mx_GeneralUserSettingsTab_accountSection .mx_SettingsTab_subheading:nth-child(n+1),.mx_GeneralUserSettingsTab_discovery .mx_SettingsTab_subheading:nth-child(n+2),.mx_SetIdServer .mx_SettingsTab_subheading{margin-top:24px}.mx_GeneralUserSettingsTab_accountSection .mx_Spinner,.mx_GeneralUserSettingsTab_discovery .mx_Spinner{-webkit-box-pack:left;-ms-flex-pack:left;justify-content:left}.mx_GeneralUserSettingsTab_accountSection .mx_EmailAddresses,.mx_GeneralUserSettingsTab_accountSection .mx_PhoneNumbers,.mx_GeneralUserSettingsTab_discovery .mx_ExistingEmailAddress,.mx_GeneralUserSettingsTab_discovery .mx_ExistingPhoneNumber,.mx_GeneralUserSettingsTab_languageInput{margin-right:100px}.mx_GeneralUserSettingsTab_warningIcon{vertical-align:middle}.mx_HelpUserSettingsTab_debugButton{margin-bottom:5px;margin-top:5px}.mx_HelpUserSettingsTab span.mx_AccessibleButton{word-break:break-word}.mx_HelpUserSettingsTab code{word-break:break-all;-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}.mx_HelpUserSettingsTab_accessToken{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;border-radius:5px;border:1px solid #747474;margin-bottom:10px;margin-top:10px;padding:10px}.mx_HelpUserSettingsTab_accessToken_copy{-ms-flex-negative:0;flex-shrink:0;cursor:pointer;margin-left:20px;display:inherit}.mx_HelpUserSettingsTab_accessToken_copy>div{-webkit-mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);background-color:#2e2f32;margin-left:5px;width:20px;height:20px;background-repeat:no-repeat}.mx_LabsUserSettingsTab .mx_SettingsTab_section{margin-top:32px}.mx_LabsUserSettingsTab .mx_SettingsTab_section .mx_SettingsFlag{margin-right:0}.mx_MjolnirUserSettingsTab .mx_Field{margin-right:100px}.mx_MjolnirUserSettingsTab_listItem{margin-bottom:2px}.mx_NotificationUserSettingsTab .mx_SettingsTab_heading{margin-bottom:10px}.mx_PreferencesUserSettingsTab .mx_Field{margin-right:100px}.mx_PreferencesUserSettingsTab .mx_SettingsTab_section{margin-bottom:30px}.mx_SecurityUserSettingsTab .mx_DevicesPanel{width:auto;max-width:880px}.mx_SecurityUserSettingsTab_deviceInfo{display:table;padding-left:0}.mx_SecurityUserSettingsTab_deviceInfo>li{display:table-row}.mx_SecurityUserSettingsTab_deviceInfo>li>label,.mx_SecurityUserSettingsTab_deviceInfo>li>span{display:table-cell;padding-right:1em}.mx_SecurityUserSettingsTab_bulkOptions .mx_AccessibleButton,.mx_SecurityUserSettingsTab_importExportButtons .mx_AccessibleButton{margin-right:10px}.mx_SecurityUserSettingsTab_importExportButtons{margin-bottom:15px}.mx_SecurityUserSettingsTab_ignoredUser{margin-bottom:5px}.mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton{margin-right:10px}.mx_SecurityUserSettingsTab .mx_SettingsTab_section .mx_AccessibleButton_kind_link{padding:0;font-size:inherit}.mx_SecurityUserSettingsTab .mx_SecurityUserSettingsTab_warning{color:#ff4b55;position:relative;padding-left:40px;margin-top:30px}.mx_SecurityUserSettingsTab .mx_SecurityUserSettingsTab_warning:before{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 center;mask-position:0 center;-webkit-mask-size:2.4rem;mask-size:2.4rem;position:absolute;width:2.4rem;height:2.4rem;content:"";top:0;left:0;background-color:#ff4b55;-webkit-mask-image:url(../../img/feather-customised/alert-triangle.38aca3a.svg);mask-image:url(../../img/feather-customised/alert-triangle.38aca3a.svg)}.mx_VoiceUserSettingsTab .mx_Field{margin-right:100px}.mx_VoiceUserSettingsTab_missingMediaPermissions{margin-bottom:15px}.mx_SpaceBasicSettings .mx_Field{margin:32px 0}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:24px}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer .mx_SpaceBasicSettings_avatar{position:relative;height:80px;width:80px;background-color:#8d99a5;border-radius:16px}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer img.mx_SpaceBasicSettings_avatar{width:80px;height:80px;-o-object-fit:cover;object-fit:cover;border-radius:16px}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer div.mx_SpaceBasicSettings_avatar{cursor:pointer}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer div.mx_SpaceBasicSettings_avatar:before{content:"";position:absolute;height:80px;width:80px;top:0;left:0;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:20px;mask-size:20px;-webkit-mask-image:url(../../img/element-icons/camera.a81a395.svg);mask-image:url(../../img/element-icons/camera.a81a395.svg)}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer>input[type=file]{display:none}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer>.mx_AccessibleButton_kind_link{display:inline-block;padding:0;margin:auto 16px;color:#368bd6}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer>.mx_SpaceBasicSettings_avatar_remove{color:#ff4b55}.mx_SpaceBasicSettings .mx_FormButton{padding:8px 22px;margin-left:auto;display:block;width:-webkit-min-content;width:-moz-min-content;width:min-content}.mx_SpaceBasicSettings .mx_AccessibleButton_disabled{cursor:not-allowed}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu_background{background-color:rgba(46,48,51,.38);opacity:.6;left:71px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu{padding:24px;width:480px;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#fff;position:relative}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu>div>h2{font-weight:600;font-size:1.8rem;margin-top:4px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu>div>p{font-size:1.5rem;color:#737d8c;margin:0}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_BetaCard_betaPill{position:absolute;top:24px;right:24px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType{position:relative;padding:16px 32px 16px 72px;width:432px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;border:1px solid #e7e7e7;font-size:1.5rem;margin:20px 0}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType>h3{font-weight:600;margin:0 0 4px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType>span{color:#737d8c}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:before{position:absolute;content:"";width:32px;height:32px;top:24px;left:20px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px;mask-size:24px;background-color:#8d99a5}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover{border-color:#0dbd8b}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover:before{background-color:#0dbd8b}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover>span{color:#2e2f32}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType_public:before{-webkit-mask-image:url(../../img/globe.8201f08.svg);mask-image:url(../../img/globe.8201f08.svg)}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType_private:before{-webkit-mask-image:url(../../img/element-icons/lock.1f264bd.svg);mask-image:url(../../img/element-icons/lock.1f264bd.svg)}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenu_back{width:28px;height:28px;position:relative;background-color:rgba(141,151,165,.2);border-radius:14px;margin-bottom:12px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenu_back:before{content:"";position:absolute;height:28px;width:28px;top:0;left:0;background-color:#8d99a5;-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:2px 3px;mask-position:2px 3px;-webkit-mask-size:24px;mask-size:24px;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton_kind_primary{padding:8px 22px;margin-left:auto;display:block;width:-webkit-min-content;width:-moz-min-content;width:min-content}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton_disabled{cursor:not-allowed}.mx_SpacePublicShare .mx_AccessibleButton{position:relative;padding:16px 32px 16px 72px;width:432px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;border:1px solid #e7e7e7;font-size:1.5rem;margin:20px 0}.mx_SpacePublicShare .mx_AccessibleButton>h3{font-weight:600;margin:0 0 4px}.mx_SpacePublicShare .mx_AccessibleButton>span{color:#737d8c}.mx_SpacePublicShare .mx_AccessibleButton:before{position:absolute;content:"";width:32px;height:32px;top:24px;left:20px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px;mask-size:24px;background-color:#8d99a5}.mx_SpacePublicShare .mx_AccessibleButton:hover{border-color:#0dbd8b}.mx_SpacePublicShare .mx_AccessibleButton:hover:before{background-color:#0dbd8b}.mx_SpacePublicShare .mx_AccessibleButton:hover>span{color:#2e2f32}.mx_SpacePublicShare .mx_AccessibleButton.mx_SpacePublicShare_shareButton:before{-webkit-mask-image:url(../../img/element-icons/link.8f4b1fc.svg);mask-image:url(../../img/element-icons/link.8f4b1fc.svg)}.mx_SpacePublicShare .mx_AccessibleButton.mx_SpacePublicShare_inviteButton:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_InlineTermsAgreement_cbContainer{margin-bottom:10px;font-size:1.4rem}.mx_InlineTermsAgreement_cbContainer a{color:#0dbd8b;text-decoration:none}.mx_InlineTermsAgreement_cbContainer .mx_InlineTermsAgreement_checkbox{margin-top:10px}.mx_InlineTermsAgreement_cbContainer .mx_InlineTermsAgreement_checkbox input{vertical-align:text-bottom}.mx_InlineTermsAgreement_link{display:inline-block;-webkit-mask-image:url(../../img/external-link.a8d3e9b.svg);mask-image:url(../../img/external-link.a8d3e9b.svg);background-color:#0dbd8b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:12px;height:12px;margin-left:3px;vertical-align:middle}.mx_AnalyticsToast .mx_AccessibleButton_kind_danger{background:none;color:#0dbd8b}.mx_AnalyticsToast .mx_AccessibleButton_kind_primary{background:#0dbd8b;color:#fff}.mx_NonUrgentEchoFailureToast .mx_NonUrgentEchoFailureToast_icon{display:inline-block;width:1.8rem;height:1.8rem;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#fff;-webkit-mask-image:url(../../img/element-icons/cloud-off.33cd28e.svg);mask-image:url(../../img/element-icons/cloud-off.33cd28e.svg);margin-right:8px}.mx_NonUrgentEchoFailureToast span{vertical-align:middle}.mx_NonUrgentEchoFailureToast .mx_AccessibleButton{padding:0}.mx_VerificationShowSas_decimalSas{text-align:center;font-weight:700;padding-left:3px;padding-right:3px}.mx_VerificationShowSas_decimalSas span{margin-left:5px;margin-right:5px}.mx_VerificationShowSas_emojiSas{text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:25px 0}.mx_VerificationShowSas_emojiSas_block{display:inline-block;margin-bottom:16px;position:relative;width:52px}.mx_AuthPage_modal .mx_VerificationShowSas_emojiSas_block,.mx_Dialog .mx_VerificationShowSas_emojiSas_block{width:60px}.mx_VerificationShowSas_emojiSas_emoji{font-size:3.2rem}.mx_VerificationShowSas_emojiSas_label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:1.2rem}.mx_VerificationShowSas_emojiSas_break{-ms-flex-preferred-size:100%;flex-basis:100%}.mx_VerificationShowSas .mx_Dialog_buttons button.mx_VerificationShowSas_matchButton{color:#0dbd8b;background-color:rgba(3,179,129,.16);border:none}.mx_VerificationShowSas .mx_Dialog_buttons button.mx_VerificationShowSas_noMatchButton{color:#ff4b55;background-color:rgba(255,75,85,.16);border:none}.mx_PlayPauseButton{position:relative;width:32px;height:32px;border-radius:32px;background-color:#fff}.mx_PlayPauseButton:before{content:"";position:absolute;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_PlayPauseButton.mx_PlayPauseButton_disabled:before{opacity:.5}.mx_PlayPauseButton.mx_PlayPauseButton_play:before{width:13px;height:16px;top:8px;left:12px;-webkit-mask-image:url(../../img/element-icons/play.a72552b.svg);mask-image:url(../../img/element-icons/play.a72552b.svg)}.mx_PlayPauseButton.mx_PlayPauseButton_pause:before{width:10px;height:12px;top:10px;left:11px;-webkit-mask-image:url(../../img/element-icons/pause.c4c0886.svg);mask-image:url(../../img/element-icons/pause.c4c0886.svg)}.mx_VoiceMessagePrimaryContainer{padding:7px 12px 7px 11px;background-color:#e3e8f0;border-radius:12px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#737d8c;font-size:1.4rem;line-height:2.4rem}.mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar{background-color:#c1c6cd}.mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar.mx_Waveform_bar_100pct{-webkit-transition:background-color .25s ease;transition:background-color .25s ease;background-color:#737d8c}.mx_VoiceMessagePrimaryContainer .mx_Clock{width:4.2rem;padding-right:6px;padding-left:8px}.mx_Waveform{position:relative;height:30px;top:1px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.mx_Waveform .mx_Waveform_bar{width:0;border:1px solid transparent;border-radius:2px;min-height:0;max-height:100%;margin-left:1px;margin-right:1px}.mx_CallContainer{position:absolute;right:20px;bottom:72px;z-index:100;pointer-events:none}.mx_CallContainer .mx_CallPreview{pointer-events:auto;cursor:pointer}.mx_CallContainer .mx_CallPreview .mx_CallView_video{width:350px}.mx_CallContainer .mx_CallPreview .mx_VideoFeed_local{border-radius:8px;overflow:hidden}.mx_CallContainer .mx_AppTile_persistedWrapper div{min-width:350px}.mx_CallContainer .mx_IncomingCallBox{min-width:250px;background-color:#f4f6fa;padding:8px;-webkit-box-shadow:0 14px 24px rgba(0,0,0,.08);box-shadow:0 14px 24px rgba(0,0,0,.08);border-radius:8px;pointer-events:auto;cursor:pointer}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo{display:-webkit-box;display:-ms-flexbox;display:flex;direction:row}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo .mx_BaseAvatar_initial,.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo img{margin:8px}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo h1,.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo p{margin:0;padding:0;font-size:1.4rem;line-height:1.6rem}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo h1{font-weight:700}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons{padding:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons>.mx_IncomingCallBox_spacer{width:8px}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons>*{-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;margin-right:0;font-size:1.5rem;line-height:2.4rem}.mx_CallView{border-radius:8px;background-color:#f2f5f8;padding-left:8px;padding-right:8px;pointer-events:auto}.mx_CallView_large{padding-bottom:10px;margin:5px 5px 5px 18px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_CallView_large,.mx_CallView_large .mx_CallView_voice{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_CallView_pip{width:320px;padding-bottom:8px;margin-top:10px;background-color:#f4f6fa;-webkit-box-shadow:0 4px 20px rgba(0,0,0,.2);box-shadow:0 4px 20px rgba(0,0,0,.2);border-radius:8px}.mx_CallView_pip .mx_CallView_voice{height:180px}.mx_CallView_pip .mx_CallView_callControls{bottom:0}.mx_CallView_pip .mx_CallView_callControls_button:before{width:36px;height:36px}.mx_CallView_pip .mx_CallView_holdTransferContent{padding-top:10px;padding-bottom:25px}.mx_CallView_content{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:8px}.mx_CallView_voice{-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;background-color:#27303a}.mx_CallView_voice,.mx_CallView_voice_avatarsContainer{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-direction:normal}.mx_CallView_voice_avatarsContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-ms-flex-direction:row;flex-direction:row}.mx_CallView_voice_avatarsContainer div{margin-left:12px;margin-right:12px}.mx_CallView_voice .mx_CallView_holdTransferContent .mx_CallView_voice_avatarContainer{border-radius:2000px;overflow:hidden;position:relative}.mx_CallView_holdTransferContent{height:20px;padding-top:20px;padding-bottom:15px;color:#fff}.mx_CallView_holdTransferContent .mx_AccessibleButton_hasKind{padding:0;font-weight:700}.mx_CallView_video{width:100%;height:100%;z-index:30;overflow:hidden}.mx_CallView_video_hold{overflow:hidden}.mx_CallView_video_hold .mx_VideoFeed{visibility:hidden}.mx_CallView_video_holdBackground{position:absolute;width:100%;height:100%;left:0;right:0;background-repeat:no-repeat;background-size:cover;background-position:50%;-webkit-filter:blur(20px);filter:blur(20px)}.mx_CallView_video_holdBackground:after{content:"";display:block;position:absolute;width:100%;height:100%;left:0;right:0;background-color:rgba(0,0,0,.6)}.mx_CallView_video .mx_CallView_holdTransferContent{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-weight:700;color:#fff;text-align:center}.mx_CallView_video .mx_CallView_holdTransferContent:before{display:block;margin-left:auto;margin-right:auto;content:"";width:40px;height:40px;background-image:url(../../img/voip/paused.77799b3.svg);background-position:50%;background-size:cover}.mx_CallView_pip .mx_CallView_video .mx_CallView_holdTransferContent:before{width:30px;height:30px}.mx_CallView_video .mx_CallView_holdTransferContent .mx_AccessibleButton_hasKind{padding:0}.mx_CallView_header{height:44px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:left;-ms-flex-pack:left;justify-content:left;-ms-flex-negative:0;flex-shrink:0}.mx_CallView_header_callType{font-size:1.2rem;font-weight:700;vertical-align:middle}.mx_CallView_header_secondaryCallInfo:before{content:"·";margin-left:6px;margin-right:6px}.mx_CallView_header_controls{margin-left:auto}.mx_CallView_header_button{display:inline-block;vertical-align:middle;cursor:pointer}.mx_CallView_header_button:before{content:"";display:inline-block;height:20px;width:20px;vertical-align:middle;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}.mx_CallView_header_button_fullscreen:before{-webkit-mask-image:url(../../img/element-icons/call/fullscreen.43be138.svg);mask-image:url(../../img/element-icons/call/fullscreen.43be138.svg)}.mx_CallView_header_button_expand:before{-webkit-mask-image:url(../../img/element-icons/call/expand.7ef9f56.svg);mask-image:url(../../img/element-icons/call/expand.7ef9f56.svg)}.mx_CallView_header_callInfo{margin-left:12px;margin-right:16px}.mx_CallView_header_roomName{font-weight:700;font-size:12px;line-height:normal;height:15px}.mx_CallView_secondaryCall_roomName{margin-left:4px}.mx_CallView_header_callTypeSmall{font-size:12px;color:#737d8c;line-height:normal;height:15px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:240px}.mx_CallView_header_phoneIcon{display:inline-block;margin-right:6px;height:16px;width:16px;vertical-align:middle}.mx_CallView_header_phoneIcon:before{content:"";display:inline-block;vertical-align:top;height:16px;width:16px;background-color:#ff4b55;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg)}.mx_CallView_callControls{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;bottom:5px;width:100%;opacity:1;-webkit-transition:opacity .5s;transition:opacity .5s}.mx_CallView_callControls_hidden{opacity:.001;pointer-events:none}.mx_CallView_callControls_button{cursor:pointer;margin-left:8px;margin-right:8px}.mx_CallView_callControls_button:before{content:"";display:inline-block;height:48px;width:48px;background-repeat:no-repeat;background-size:contain;background-position:50%}.mx_CallView_callControls_dialpad{margin-right:auto}.mx_CallView_callControls_dialpad:before{background-image:url(../../img/voip/dialpad.fdda9a0.svg)}.mx_CallView_callControls_button_dialpad_hidden{margin-right:auto;cursor:auto}.mx_CallView_callControls_button_micOn:before{background-image:url(../../img/voip/mic-on.2592c14.svg)}.mx_CallView_callControls_button_micOff:before{background-image:url(../../img/voip/mic-off.774e42b.svg)}.mx_CallView_callControls_button_vidOn:before{background-image:url(../../img/voip/vid-on.b9b8bbf.svg)}.mx_CallView_callControls_button_vidOff:before{background-image:url(../../img/voip/vid-off.5552596.svg)}.mx_CallView_callControls_button_hangup:before{background-image:url(../../img/voip/hangup.9c3adeb.svg)}.mx_CallView_callControls_button_more{margin-left:auto}.mx_CallView_callControls_button_more:before{background-image:url(../../img/voip/more.5e8055e.svg)}.mx_CallView_callControls_button_more_hidden{margin-left:auto;cursor:auto}.mx_CallView_callControls_button_invisible{visibility:hidden;pointer-events:none;position:absolute}.mx_CallViewForRoom{overflow:hidden}.mx_CallViewForRoom .mx_CallViewForRoom_ResizeWrapper{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:8px}.mx_CallViewForRoom .mx_CallViewForRoom_ResizeWrapper:hover .mx_CallViewForRoom_ResizeHandle{width:100%!important;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_CallViewForRoom .mx_CallViewForRoom_ResizeWrapper:hover .mx_CallViewForRoom_ResizeHandle:after{content:"";margin-top:3px;border-radius:4px;height:4px;width:100%;max-width:64px;background-color:#2e2f32}.mx_DialPad{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:16px;gap:16px}.mx_DialPad_button{width:40px;height:40px;background-color:#e3e8f0;border-radius:40px;font-size:18px;font-weight:600;text-align:center;vertical-align:middle;line-height:40px}.mx_DialPad_deleteButton:before,.mx_DialPad_dialButton:before{content:"";display:inline-block;height:40px;width:40px;vertical-align:middle;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:20px;mask-size:20px;-webkit-mask-position:center;mask-position:center;background-color:#fff}.mx_DialPad_deleteButton{background-color:#ff4b55}.mx_DialPad_deleteButton:before{-webkit-mask-image:url(../../img/element-icons/call/delete.833d785.svg);mask-image:url(../../img/element-icons/call/delete.833d785.svg);-webkit-mask-position:9px;mask-position:9px}.mx_DialPad_dialButton{background-color:#0dbd8b}.mx_DialPad_dialButton:before{-webkit-mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg)}.mx_DialPadContextMenu_header{margin-top:12px;margin-left:12px;margin-right:12px}.mx_DialPadContextMenu_title{color:#61708b;font-size:12px;font-weight:600}.mx_DialPadContextMenu_dialled{height:1em;font-size:18px;font-weight:600}.mx_DialPadContextMenu_dialPad{margin:16px}.mx_DialPadContextMenu_horizSep{position:relative}.mx_DialPadContextMenu_horizSep:before{content:"";position:absolute;width:100%;border-bottom:1px solid #e3e8f0}.mx_Dialog_dialPadWrapper .mx_Dialog{padding:0}.mx_DialPadModal{width:192px;height:368px}.mx_DialPadModal_header{margin-top:12px;margin-left:12px;margin-right:12px}.mx_DialPadModal_title{color:#61708b;font-size:12px;font-weight:600}.mx_DialPadModal_cancel{float:right;-webkit-mask:url(../../img/feather-customised/cancel.23c2689.svg);mask:url(../../img/feather-customised/cancel.23c2689.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;width:14px;height:14px;background-color:#c1c1c1;cursor:pointer}.mx_DialPadModal_field{border:none;margin:0}.mx_DialPadModal_field input{font-size:18px;font-weight:600}.mx_DialPadModal_dialPad{margin-left:16px;margin-right:16px;margin-top:16px}.mx_DialPadModal_horizSep{position:relative}.mx_DialPadModal_horizSep:before{content:"";position:absolute;width:100%;border-bottom:1px solid #e3e8f0}.mx_VideoFeed_voice{padding-bottom:52px;background-color:#27303a}.mx_VideoFeed_remote{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_VideoFeed_remote.mx_VideoFeed_video{background-color:#000}.mx_VideoFeed_local{max-width:25%;max-height:25%;position:absolute;right:10px;top:10px;z-index:100;border-radius:4px}.mx_VideoFeed_local.mx_VideoFeed_video{background-color:transparent}.mx_VideoFeed_mirror{-webkit-transform:scaleX(-1);transform:scaleX(-1)}
+@charset "utf-8";@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-Regular.4232a67.woff2) format("woff2"),url(../../fonts/Inter/Inter-Regular.3a1908c.woff) format("woff")}@font-face{font-family:Inter;font-style:italic;font-weight:400;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-Italic.b791861.woff2) format("woff2"),url(../../fonts/Inter/Inter-Italic.b13e6fe.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-Medium.027d14e.woff2) format("woff2"),url(../../fonts/Inter/Inter-Medium.d1f6b6e.woff) format("woff")}@font-face{font-family:Inter;font-style:italic;font-weight:500;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-MediumItalic.8154ac2.woff2) format("woff2"),url(../../fonts/Inter/Inter-MediumItalic.1912849.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-SemiBold.0802d48.woff2) format("woff2"),url(../../fonts/Inter/Inter-SemiBold.8357f92.woff) format("woff")}@font-face{font-family:Inter;font-style:italic;font-weight:600;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-SemiBoldItalic.10a60d8.woff2) format("woff2"),url(../../fonts/Inter/Inter-SemiBoldItalic.1c70752.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-Bold.fc28dff.woff2) format("woff2"),url(../../fonts/Inter/Inter-Bold.025b6f2.woff) format("woff")}@font-face{font-family:Inter;font-style:italic;font-weight:700;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-BoldItalic.2129bd0.woff2) format("woff2"),url(../../fonts/Inter/Inter-BoldItalic.80f8542.woff) format("woff")}@font-face{font-family:Inconsolata;font-style:normal;font-weight:400;src:local("Inconsolata Regular"),local("Inconsolata-Regular"),url(../../fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlX5qhExfHwNJU.2aafaa1.woff2) format("woff2");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Inconsolata;font-style:normal;font-weight:400;font-display:swap;src:local("Inconsolata Regular"),local("Inconsolata-Regular"),url(../../fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlZ5qhExfHw.5476fd3.woff2) format("woff2");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:Inconsolata;font-style:normal;font-weight:700;font-display:swap;src:local("Inconsolata Bold"),local("Inconsolata-Bold"),url(../../fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71n5_zaDpwm80E.6bc411a.woff2) format("woff2");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Inconsolata;font-style:normal;font-weight:700;font-display:swap;src:local("Inconsolata Bold"),local("Inconsolata-Bold"),url(../../fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71p5_zaDpwm.000abc6.woff2) format("woff2");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}.hljs-addition{background:#dfd}.hljs-deletion{background:#fdd}@supports ((-webkit-backdrop-filter:none) or (backdrop-filter:none)){.mx_LeftPanel{background-image:unset;background-image:var(--avatar-url,unset);background-repeat:no-repeat;background-size:cover;background-position:0 0}.mx_GroupFilterPanel,.mx_SpacePanel{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.mx_LeftPanel .mx_LeftPanel_roomListContainer{-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px)}}.mx_RoomSublist_showNButton{background-color:transparent!important}a:hover,a:link,a:visited{text-decoration:none}:root{font-size:10px;--transition-short:.1s;--transition-standard:.3s}@media (prefers-reduced-motion){:root{--transition-short:0;--transition-standard:0}}html{height:100%;overflow:hidden}body{font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.5rem;background-color:#fff;color:#2e2f32;border:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code,pre{font-family:Inconsolata,Twemoji,Apple Color Emoji,Segoe UI Emoji,Courier,monospace,Noto Color Emoji;font-size:100%!important}.error,.text-error,.text-warning,.warning{color:#ff4b55}.text-success{color:#0dbd8b}.text-muted{color:#61708b}b{font-weight:700}h2{color:#2e2f32;font-weight:400;font-size:1.8rem;margin-top:16px;margin-bottom:16px}a:hover,a:link,a:visited{color:#238cf5}input[type=password],input[type=search],input[type=text]{padding:9px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;font-weight:600;min-width:0}input[type=search].mx_textinput_icon,input[type=text].mx_textinput_icon{padding-left:36px;background-repeat:no-repeat;background-position:10px}input[type=search].mx_textinput_icon.mx_textinput_search,input[type=text].mx_textinput_icon.mx_textinput_search{background-image:url(../../img/feather-customised/search-input.044bfa7.svg)}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{opacity:1}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1}input::-ms-input-placeholder,textarea::-ms-input-placeholder{opacity:1}input::placeholder,textarea::placeholder{opacity:1}input[type=password],input[type=text],textarea{background-color:transparent;color:#2e2f32}textarea{font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;color:#2e2f32}input[type=password]:focus,input[type=text]:focus,textarea:focus{outline:none;-webkit-box-shadow:none;box-shadow:none}:focus:not(.focus-visible){outline:none}.mx_Dialog .mx_textinput>input[type=search],.mx_Dialog .mx_textinput>input[type=text],.mx_MatrixChat .mx_textinput>input[type=search],.mx_MatrixChat .mx_textinput>input[type=text]{border:none;-webkit-box-flex:1;-ms-flex:1;flex:1;color:#2e2f32}.mx_Dialog .mx_textinput,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search],.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text],.mx_MatrixChat .mx_textinput,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search],.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]{display:block;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:transparent;color:#9fa9ba;border-radius:4px;border:1px solid rgba(46,47,50,.1);margin:9px}.mx_Dialog .mx_textinput,.mx_MatrixChat .mx_textinput{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_Dialog .mx_textinput input::-webkit-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-webkit-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-webkit-input-placeholder,.mx_MatrixChat .mx_textinput input::-webkit-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-webkit-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-webkit-input-placeholder{color:rgba(159,169,186,.75)}.mx_Dialog .mx_textinput input::-moz-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-moz-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-moz-placeholder,.mx_MatrixChat .mx_textinput input::-moz-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-moz-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-moz-placeholder{color:rgba(159,169,186,.75)}.mx_Dialog .mx_textinput input:-ms-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]:-ms-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]:-ms-input-placeholder,.mx_MatrixChat .mx_textinput input:-ms-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]:-ms-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]:-ms-input-placeholder{color:rgba(159,169,186,.75)}.mx_Dialog .mx_textinput input::-ms-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-ms-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-ms-input-placeholder,.mx_MatrixChat .mx_textinput input::-ms-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-ms-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-ms-input-placeholder{color:rgba(159,169,186,.75)}.mx_Dialog .mx_textinput input::placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::placeholder,.mx_MatrixChat .mx_textinput input::placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::placeholder{color:rgba(159,169,186,.75)}.dark-panel{background-color:#f2f5f8}.dark-panel .mx_textinput,.dark-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search],.dark-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]{color:#9fa9ba;background-color:#fff;border:none}.light-panel .mx_textinput,.light-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search],.light-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]{color:#9fa9ba;background-color:#f2f5f8;border:none}::-moz-focus-inner{border:0}#mx_theme_accentColor{color:#0dbd8b}#mx_theme_secondaryAccentColor{color:#f2f5f8}#mx_theme_tertiaryAccentColor{color:#d3efe1}.mx_Dialog_wrapper{position:fixed;z-index:4000;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_Dialog{background-color:#fff;color:#747474;z-index:4012;font-weight:300;font-size:1.5rem;position:relative;padding:24px;max-height:80%;-webkit-box-shadow:2px 15px 30px 0 rgba(0,0,0,.48);box-shadow:2px 15px 30px 0 rgba(0,0,0,.48);border-radius:8px;overflow-y:auto}.mx_Dialog_fixedWidth{width:60vw;max-width:704px}.mx_Dialog_staticWrapper .mx_Dialog{z-index:4010}.mx_Dialog_background{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(46,48,51,.38);opacity:.8;z-index:4011}.mx_Dialog_background.mx_Dialog_staticBackground{z-index:4009}.mx_Dialog_wrapperWithStaticUnder .mx_Dialog_background{opacity:.4}.mx_Dialog_lightbox .mx_Dialog_background{opacity:.95;background-color:#000}.mx_Dialog_lightbox .mx_Dialog{border-radius:0;background-color:transparent;width:100%;height:100%;max-width:100%;max-height:100%;pointer-events:none;padding:0}.mx_Dialog_header{position:relative;margin-bottom:10px}.mx_Dialog_titleImage{vertical-align:sub;width:25px;height:25px;margin-left:-2px;margin-right:4px}.mx_Dialog_title{font-size:2.2rem;font-weight:600;line-height:3.6rem;color:#45474a}.mx_Dialog_header.mx_Dialog_headerWithButton>.mx_Dialog_title{text-align:center}.mx_Dialog_header.mx_Dialog_headerWithCancel>.mx_Dialog_title{margin-right:20px}.mx_Dialog_title.danger{color:#ff4b55}.mx_Dialog_cancelButton{-webkit-mask:url(../../img/feather-customised/cancel.23c2689.svg);mask:url(../../img/feather-customised/cancel.23c2689.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;width:14px;height:14px;background-color:#c1c1c1;cursor:pointer;position:absolute;top:10px;right:0}.mx_Dialog_content{margin:24px 0 68px;font-size:1.4rem;color:#2e2f32;word-wrap:break-word}.mx_Dialog_buttons{margin-top:20px;text-align:right}.mx_Dialog_buttons .mx_Dialog_buttons_additive{float:left}.mx_Dialog_buttons button,.mx_Dialog_buttons input[type=submit],.mx_Dialog button,.mx_Dialog input[type=submit]{vertical-align:middle;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;padding:7px 1.5em;cursor:pointer;display:inline-block;outline:none;margin-left:0;margin-right:8px;font-weight:600;border:1px solid #0dbd8b;color:#0dbd8b;background-color:#fff;font-family:inherit}.mx_Dialog button:last-child{margin-right:0}.mx_Dialog_buttons button:focus,.mx_Dialog_buttons input[type=submit]:focus,.mx_Dialog button:focus,.mx_Dialog input[type=submit]:focus{-webkit-filter:brightness(105%);filter:brightness(105%)}.mx_Dialog_buttons button.mx_Dialog_primary,.mx_Dialog_buttons input[type=submit].mx_Dialog_primary,.mx_Dialog button.mx_Dialog_primary,.mx_Dialog input[type=submit].mx_Dialog_primary{color:#fff;background-color:#0dbd8b;min-width:156px}.mx_Dialog_buttons button.danger,.mx_Dialog_buttons input[type=submit].danger,.mx_Dialog button.danger,.mx_Dialog input[type=submit].danger{background-color:#ff4b55;border:1px solid #ff4b55;color:#fff}.mx_Dialog button.warning,.mx_Dialog input[type=submit].warning{border:1px solid #ff4b55;color:#ff4b55}.mx_Dialog_buttons button:disabled,.mx_Dialog_buttons input[type=submit]:disabled,.mx_Dialog button:disabled,.mx_Dialog input[type=submit]:disabled{background-color:#747474;border:1px solid #747474;opacity:.7}.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog{width:auto;border-radius:8px;padding:0;-webkit-box-shadow:none;box-shadow:none;overflow-x:hidden;overflow-y:hidden}.mx_GeneralButton{vertical-align:middle;border:0;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;padding:7px 1.5em;cursor:pointer;display:inline-block;outline:none;display:inline;margin:auto}.mx_linkButton{cursor:pointer;color:#0dbd8b}.mx_TextInputDialog_label{text-align:left;padding-bottom:12px}.mx_TextInputDialog_input{font-size:1.5rem;border-radius:3px;border:1px solid #e7e7e7;padding:9px;color:#2e2f32;background-color:#fff}.mx_textButton{vertical-align:middle;border:0;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;cursor:pointer;display:inline-block;outline:none;font-size:1.5rem;padding:0 1.5em}.mx_button_row{margin-top:69px}.mx_Username_color1{color:#368bd6}.mx_Username_color2{color:#ac3ba8}.mx_Username_color3{color:#0dbd8b}.mx_Username_color4{color:#e64f7a}.mx_Username_color5{color:#ff812d}.mx_Username_color6{color:#2dc2c5}.mx_Username_color7{color:#5c56f5}.mx_Username_color8{color:#74d12c}.mx_Tooltip_dark .mx_Tooltip_chevron:after{border-right-color:#27303a}html{scrollbar-color:rgba(0,0,0,.2) transparent}*{scrollbar-width:thin}::-webkit-scrollbar{width:6px;height:6px;background-color:transparent}::-webkit-scrollbar-thumb{border-radius:3px;background-color:rgba(0,0,0,.2)}.mx_AutoHideScrollbar:hover{scrollbar-color:rgba(0,0,0,.2) transparent}.mx_AutoHideScrollbar:hover::-webkit-scrollbar{background-color:transparent}.mx_AutoHideScrollbar:hover::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.2)}.mx_AutoHideScrollbar{overflow-x:hidden;overflow-y:auto;overflow-y:overlay;-ms-overflow-style:-ms-autohiding-scrollbar}.mx_AutoHideScrollbar::-webkit-scrollbar,.mx_AutoHideScrollbar::-webkit-scrollbar-thumb{background-color:transparent}.mx_AutoHideScrollbar{scrollbar-color:transparent transparent}.mx_CompatibilityPage{width:100%;height:100%;background-color:#e55}.mx_CompatibilityPage_box{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:500px;height:300px;border:1px solid;padding:10px;background-color:#fcc}.mx_ContextualMenu_wrapper{position:fixed;z-index:5000}.mx_ContextualMenu_background{position:fixed;top:0;left:0;width:100%;height:100%;opacity:1;z-index:5000}.mx_ContextualMenu{border-radius:8px;-webkit-box-shadow:4px 4px 12px 0 rgba(118,131,156,.6);box-shadow:4px 4px 12px 0 rgba(118,131,156,.6);background-color:#fff;color:#2e2f32;position:absolute;font-size:1.4rem;z-index:5001}.mx_ContextualMenu_right{right:0}.mx_ContextualMenu.mx_ContextualMenu_withChevron_right{right:8px}.mx_ContextualMenu_chevron_right{position:absolute;right:-8px;top:0;width:0;height:0;border-top:8px solid transparent;border-left:8px solid #fff;border-bottom:8px solid transparent}.mx_ContextualMenu_left{left:0}.mx_ContextualMenu.mx_ContextualMenu_withChevron_left{left:8px}.mx_ContextualMenu_chevron_left{position:absolute;left:-8px;top:0;width:0;height:0;border-top:8px solid transparent;border-right:8px solid #fff;border-bottom:8px solid transparent}.mx_ContextualMenu_top{top:0}.mx_ContextualMenu.mx_ContextualMenu_withChevron_top{top:8px}.mx_ContextualMenu_chevron_top{position:absolute;left:0;top:-8px;width:0;height:0;border-left:8px solid transparent;border-bottom:8px solid #fff;border-right:8px solid transparent}.mx_ContextualMenu_bottom{bottom:0}.mx_ContextualMenu.mx_ContextualMenu_withChevron_bottom{bottom:8px}.mx_ContextualMenu_chevron_bottom{position:absolute;left:0;bottom:-8px;width:0;height:0;border-left:8px solid transparent;border-top:8px solid #fff;border-right:8px solid transparent}.mx_ContextualMenu_spinner{display:block;margin:0 auto}.mx_CreateRoom{width:960px;margin-left:auto;margin-right:auto;color:#2e2f32}.mx_CreateRoom input,.mx_CreateRoom textarea{border-radius:3px;border:1px solid #c7c7c7;font-weight:300;font-size:1.3rem;padding:9px;margin-top:6px}.mx_CreateRoom_description{width:330px}.mx_CustomRoomTagPanel{background-color:hsla(0,0%,91%,.77);max-height:40vh}.mx_CustomRoomTagPanel_scroller{max-height:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CustomRoomTagPanel .mx_AccessibleButton{margin:0 auto;width:40px;padding:10px 0 9px;position:relative}.mx_CustomRoomTagPanel .mx_BaseAvatar_image{-webkit-box-sizing:border-box;box-sizing:border-box;width:40px;height:40px}.mx_CustomRoomTagPanel .mx_AccessibleButton.CustomRoomTagPanel_tileSelected:before{content:"";height:56px;background-color:#238cf5;width:5px;position:absolute;left:-9px;border-radius:0 3px 3px 0;top:5px}.mx_FilePanel{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow-y:auto;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_FilePanel .mx_RoomView_messageListWrapper{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_FilePanel .mx_RoomView_MessageList{width:100%}.mx_FilePanel .mx_EventTile_avatar,.mx_FilePanel .mx_RoomView_MessageList h2{display:none}.mx_FilePanel .mx_EventTile{word-break:break-word;margin-top:32px}.mx_FilePanel .mx_EventTile .mx_MImageBody{margin-right:0}.mx_FilePanel .mx_EventTile .mx_MFileBody{line-height:2.4rem}.mx_FilePanel .mx_EventTile .mx_MFileBody_download{padding-top:8px;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.4rem;color:#acacac}.mx_FilePanel .mx_EventTile .mx_MFileBody_downloadLink{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;color:#747474}.mx_FilePanel .mx_EventTile .mx_MImageBody_size{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;font-size:1.4rem;text-align:right;white-space:nowrap}.mx_FilePanel .mx_EventTile_senderDetails{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:-2px}.mx_FilePanel .mx_EventTile_senderDetailsLink{text-decoration:none}.mx_FilePanel .mx_EventTile .mx_SenderProfile{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;line-height:normal;padding:0;font-size:1.4rem;opacity:1;color:#acacac}.mx_FilePanel .mx_EventTile .mx_MessageTimestamp{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;text-align:right;visibility:visible;position:static;font-size:1.4rem;opacity:1;color:#acacac}.mx_FilePanel .mx_EventTile_line{margin-right:0;padding-left:0}.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line{padding-left:0}.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line{background-color:#fff}.mx_FilePanel_empty:before{-webkit-mask-image:url(../../img/element-icons/room/files.5709c0c.svg);mask-image:url(../../img/element-icons/room/files.5709c0c.svg)}.mx_GenericErrorPage{width:100%;height:100%;background-color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_GenericErrorPage_box{display:inline;width:500px;min-height:125px;border:1px solid #f22;padding:10px 10px 20px;background-color:#fcc}.mx_GroupFilterPanel{-webkit-box-flex:1;-ms-flex:1;flex:1;background-color:hsla(0,0%,91%,.77);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;min-height:0}.mx_GroupFilterPanel_items_selected{cursor:pointer}.mx_GroupFilterPanel .mx_GroupFilterPanel_divider{height:0;width:90%;border:none;border-bottom:1px solid #8d99a5}.mx_GroupFilterPanel .mx_GroupFilterPanel_scroller{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;width:100%}.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-top:6px}.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer>div{margin:6px 0}.mx_GroupFilterPanel .mx_TagTile{position:relative}.mx_GroupFilterPanel .mx_TagTile .mx_BetaDot{position:absolute;right:-13px;top:-11px}.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_prototype{padding:3px}.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected_prototype{background-color:#fff;border-radius:6px}.mx_TagTile_selected_prototype .mx_TagTile_homeIcon:before{background-color:#2e2f32}.mx_TagTile:not(.mx_TagTile_selected_prototype) .mx_TagTile_homeIcon{background-color:rgba(92,100,112,.2);border-radius:48px}.mx_TagTile:not(.mx_TagTile_selected_prototype) .mx_TagTile_homeIcon:before{background-color:#5c6470}.mx_TagTile_homeIcon{width:32px;height:32px;position:relative}.mx_TagTile_homeIcon:before{-webkit-mask-image:url(../../img/element-icons/home.b706c0e.svg);mask-image:url(../../img/element-icons/home.b706c0e.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:21px;mask-size:21px;content:"";display:inline-block;width:32px;height:32px;position:absolute;top:calc(50% - 16px);left:calc(50% - 16px)}.mx_GroupFilterPanel .mx_TagTile_plus{margin-bottom:12px;height:32px;width:32px;border-radius:20px;background-color:rgba(92,100,112,.2);position:relative;display:block!important}.mx_GroupFilterPanel .mx_TagTile_plus:before{background-color:#5c6470;-webkit-mask-image:url(../../img/feather-customised/plus.38ae979.svg);mask-image:url(../../img/feather-customised/plus.38ae979.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;content:"";position:absolute;top:0;bottom:0;left:0;right:0}.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected:before{content:"";height:100%;background-color:#0dbd8b;width:4px;position:absolute;left:-12px;border-radius:0 3px 3px 0}.mx_GroupFilterPanel .mx_TagTile.mx_AccessibleButton:focus{-webkit-filter:none;filter:none}.mx_TagTile_tooltip{position:relative;top:-30px;left:5px}.mx_TagTile_context_button{min-width:15px;height:15px;position:absolute;right:-5px;top:-8px;border-radius:8px;background-color:#dbdbdb;color:#000;font-weight:600;font-size:1rem;text-align:center;padding-top:1px;padding-left:4px;padding-right:4px}.mx_TagTile_avatar{position:relative}.mx_TagTile_badge{position:absolute;right:-4px;top:-2px;border-radius:8px;color:#fff;font-weight:600;font-size:1.4rem;padding:0 5px;background-color:#61708b}.mx_TagTile_badgeHighlight{background-color:#ff4b55}.mx_GroupView{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden}.mx_GroupView_error{margin:auto}.mx_GroupView_header{min-height:52px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;padding-bottom:10px;padding-left:19px}.mx_GroupView_header_view{border-bottom:1px solid transparent;padding-bottom:0;padding-right:8px}.mx_GroupView_header_avatar,.mx_GroupView_header_info{display:table-cell;vertical-align:middle}.mx_GroupHeader_button{position:relative;margin-left:5px;margin-right:5px;cursor:pointer;height:20px;width:20px}.mx_GroupHeader_button:before{content:"";position:absolute;height:20px;width:20px;background-color:#91a1c0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_GroupHeader_editButton:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_GroupHeader_shareButton:before{-webkit-mask-image:url(../../img/element-icons/room/share.54dc3fb.svg);mask-image:url(../../img/element-icons/room/share.54dc3fb.svg)}.mx_GroupView_hostingSignup img{margin-left:5px}.mx_GroupView_editable{border-bottom:1px solid #c7c7c7!important;min-width:150px;cursor:text}.mx_GroupView_editable:focus{border-bottom:1px solid #0dbd8b!important;outline:none;-webkit-box-shadow:none;box-shadow:none}.mx_GroupView_header_isUserMember .mx_GroupView_header_name:hover div:not(.mx_GroupView_editable){color:#0dbd8b;cursor:pointer}.mx_GroupView_avatarPicker{position:relative}.mx_GroupView_avatarPicker_edit{position:absolute;top:50px;left:15px}.mx_GroupView_avatarPicker .mx_Spinner{width:48px;height:48px!important}.mx_GroupView_header_leftCol{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden}.mx_GroupView_header_rightCol{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_GroupView_textButton{display:inline-block}.mx_GroupView_header_groupid{font-weight:400;font-size:medium;padding-left:10px}.mx_GroupView_header_name{vertical-align:middle;width:100%;height:31px;color:#2e2f32;font-weight:700;font-size:2.2rem;padding-right:16px}.mx_GroupView_header_name,.mx_GroupView_header_shortDesc{overflow:hidden;padding-left:19px;text-overflow:ellipsis;border-bottom:1px solid transparent}.mx_GroupView_header_shortDesc{vertical-align:bottom;float:left;max-height:42px;color:#a2a2a2;font-weight:300;font-size:1.3rem;margin-right:16px}.mx_GroupView_avatarPicker_label{cursor:pointer}.mx_GroupView_cancelButton{padding-left:8px}.mx_GroupView_cancelButton img{position:relative;top:5px}.mx_GroupView input[type=radio]{margin:10px 10px 0}.mx_GroupView_label_text{display:inline-block;max-width:80%;vertical-align:.1em;line-height:2em}.mx_GroupView_body{margin:0 24px}.mx_GroupView_body,.mx_GroupView_rooms{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_GroupView_rooms{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_GroupView h3{text-transform:uppercase;color:#3d3b39;font-weight:600;font-size:1.3rem;margin-bottom:10px}.mx_GroupView_rooms_header .mx_AccessibleButton{padding-left:14px;margin-bottom:14px;height:24px}.mx_GroupView_group{border-top:1px solid transparent}.mx_GroupView_group_disabled{opacity:.3;pointer-events:none}.mx_GroupView_rooms_header_addRow_button{display:inline-block}.mx_GroupView_rooms_header_addRow_button object{pointer-events:none}.mx_GroupView_rooms_header_addRow_label{display:inline-block;vertical-align:top;line-height:2.4rem;padding-left:28px;color:#0dbd8b}.mx_GroupView_rooms .mx_RoomDetailList{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;border-top:1px solid transparent;padding-top:10px;word-break:break-word}.mx_GroupView .mx_RoomView_messageListWrapper{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_GroupView_membershipSection{color:#888;margin-top:10px}.mx_GroupView_membershipSubSection{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;display:-webkit-box;display:-ms-flexbox;display:flex;padding-bottom:8px}.mx_GroupView_membershipSubSection .mx_Spinner{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_GroupView_membershipSection_description{line-height:3.4rem}.mx_GroupView_membershipSection_description .mx_BaseAvatar{margin-right:10px}.mx_GroupView_membershipSection .mx_GroupView_textButton{margin-right:0;margin-top:0;margin-left:8px}.mx_GroupView_memberSettings_toggle label{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_GroupView_memberSettings input{margin-right:6px}.mx_GroupView_featuredThings{margin-top:20px}.mx_GroupView_featuredThings_header{font-weight:700;font-size:120%;margin-bottom:20px}.mx_GroupView_featuredThings_category{font-weight:700;font-size:110%;margin-top:10px}.mx_GroupView_featuredThings_container{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_GroupView_featuredThing,.mx_GroupView_featuredThings_addButton{display:table-cell;text-align:center;width:100px;margin:0 20px}.mx_GroupView_featuredThing{position:relative}.mx_GroupView_featuredThing .mx_GroupView_featuredThing_deleteButton{position:absolute;top:-7px;right:11px;opacity:.4}.mx_GroupView_featuredThing .mx_BaseAvatar{vertical-align:baseline;vertical-align:initial}.mx_GroupView_featuredThings_addButton object{pointer-events:none}.mx_GroupView_featuredThing_name{word-wrap:break-word}.mx_GroupView_uploadInput{display:none}.mx_GroupView_body .mx_AutoHideScrollbar>*{margin:11px 50px 50px 68px}.mx_GroupView_groupDesc textarea{width:100%;max-width:100%;height:150px}.mx_GroupView_changeDelayWarning,.mx_GroupView_groupDesc_placeholder{background-color:#f7f7f7;color:#888;border-radius:10px;text-align:center;margin:20px 0}.mx_GroupView_groupDesc_placeholder{padding:100px 20px;cursor:pointer}.mx_GroupView_changeDelayWarning{padding:40px 20px}.mx_GroupView .mx_MemberInfo .mx_AutoHideScrollbar>:not(.mx_MemberInfo_avatar){padding-left:16px;padding-right:16px}.mx_HeaderButtons{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomHeader_buttons+.mx_HeaderButtons:before{content:unset}.mx_HeaderButtons:before{content:"";background-color:#91a1c0;opacity:.5;margin:6px 8px;border-radius:1px;width:1px}.mx_HomePage{max-width:960px;width:100%;height:100%;margin-left:auto;margin-right:auto}.mx_HomePage_default{text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_HomePage_default .mx_HomePage_default_wrapper{margin:auto}.mx_HomePage_default img{height:48px}.mx_HomePage_default h1{font-weight:600;font-size:3.2rem;line-height:4.4rem;margin-bottom:4px}.mx_HomePage_default h4{margin-top:4px;font-weight:600;font-size:1.8rem;line-height:2.5rem;color:#61708b}.mx_HomePage_default .mx_MiniAvatarUploader{margin:0 auto}.mx_HomePage_default .mx_HomePage_default_buttons{margin:60px auto 0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton{padding:73px 8px 15px;width:160px;height:132px;margin:20px;position:relative;display:inline-block;border-radius:8px;vertical-align:top;word-break:break-word;-webkit-box-sizing:border-box;box-sizing:border-box;font-weight:600;font-size:1.5rem;line-height:2rem;color:#fff;background-color:#0dbd8b}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton:before{top:20px;left:60px;width:40px;height:40px;content:"";position:absolute;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_sendDm:before{-webkit-mask-image:url(../../img/element-icons/feedback.a91241e.svg);mask-image:url(../../img/element-icons/feedback.a91241e.svg)}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_explore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg)}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_createGroup:before{-webkit-mask-image:url(../../img/element-icons/community-members.cbb31c1.svg);mask-image:url(../../img/element-icons/community-members.cbb31c1.svg)}.mx_LeftPanel{background-color:hsla(0,0%,96.1%,.9);min-width:206px;max-width:50%;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_LeftPanel .mx_LeftPanel_GroupFilterPanelContainer{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;-ms-flex-preferred-size:56px;flex-basis:56px;height:100%;-ms-flex-direction:column;flex-direction:column}.mx_LeftPanel .mx_LeftPanel_GroupFilterPanelContainer,.mx_LeftPanel .mx_LeftPanel_roomListContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal}.mx_LeftPanel .mx_LeftPanel_roomListContainer{background-color:hsla(0,0%,96.1%,.9);-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;min-width:0;-ms-flex-direction:column;flex-direction:column}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_userHeader{padding:12px;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer{overflow-y:hidden;overflow-x:scroll;margin:12px 12px 0;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_leftOverflow{-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(5%,#000));-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%);mask-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(5%,#000));mask-image:linear-gradient(90deg,transparent,#000 5%)}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_rightOverflow{-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(#000),color-stop(95%,#000),to(transparent));-webkit-mask-image:linear-gradient(90deg,#000,#000 95%,transparent);mask-image:-webkit-gradient(linear,left top,right top,from(#000),color-stop(95%,#000),to(transparent));mask-image:linear-gradient(90deg,#000,#000 95%,transparent)}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow{-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(5%,#000),color-stop(95%,#000),to(transparent));-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(5%,#000),color-stop(95%,#000),to(transparent));mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer{margin-left:12px;margin-right:12px;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch_focused+.mx_LeftPanel_exploreButton,.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch_hasQuery+.mx_LeftPanel_exploreButton{-ms-flex-preferred-size:0;flex-basis:0;margin:0;width:0}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch_focused+.mx_LeftPanel_exploreButton:before,.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch_hasQuery+.mx_LeftPanel_exploreButton:before{content:none}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton{width:32px;height:32px;border-radius:8px;background-color:rgba(141,151,165,.2);position:relative;margin-left:8px}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton:before{content:"";position:absolute;top:8px;left:8px;width:16px;height:16px;-webkit-mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#737d8c}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton.mx_LeftPanel_exploreButton_space:before{-webkit-mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg);mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg)}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListFilterCount{font-size:1.3rem;font-weight:600;margin-left:12px;margin-top:14px;margin-bottom:-4px}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper{overflow:hidden;margin-top:10px;-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper.mx_LeftPanel_roomListWrapper_stickyBottom{padding-bottom:32px}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper.mx_LeftPanel_roomListWrapper_stickyTop{padding-top:32px}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_actualRoomListContainer{position:relative;height:100%}.mx_LeftPanel.mx_LeftPanel_minimized{min-width:unset;width:unset!important}.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer{width:68px}.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer .mx_LeftPanel_userHeader{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton{margin-left:0;margin-top:8px;background-color:transparent}.mx_LeftPanelWidget{margin-left:8px;margin-bottom:4px}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:24px;color:#8d99a5;margin-top:4px}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_stickable{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_headerText{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:calc(100% - 16px);line-height:1.6rem;font-size:1.3rem;font-weight:600;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_headerText .mx_LeftPanelWidget_collapseBtn{display:inline-block;position:relative;width:14px;height:14px;margin-right:6px}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_headerText .mx_LeftPanelWidget_collapseBtn:before{content:"";width:18px;height:18px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#8d99a5;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_headerText .mx_LeftPanelWidget_collapseBtn.mx_LeftPanelWidget_collapseBtn_collapsed:before{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.mx_LeftPanelWidget .mx_LeftPanelWidget_resizeBox{position:relative;-ms-flex-direction:column;flex-direction:column;overflow:visible}.mx_LeftPanelWidget .mx_AppTileFullWidth,.mx_LeftPanelWidget .mx_LeftPanelWidget_resizeBox{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal}.mx_LeftPanelWidget .mx_AppTileFullWidth{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;overflow:hidden;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-mask-image:linear-gradient(0deg,transparent,#000 4px);mask-image:linear-gradient(0deg,transparent,#000 4px)}.mx_LeftPanelWidget .mx_LeftPanelWidget_resizerHandle{cursor:ns-resize;border-radius:3px;width:unset!important;height:4px!important;position:absolute;top:-24px!important;left:calc(50% - 32px)!important;right:calc(50% - 32px)!important}.mx_LeftPanelWidget:hover .mx_LeftPanelWidget_resizerHandle{opacity:.8;background-color:#2e2f32}.mx_LeftPanelWidget .mx_LeftPanelWidget_maximizeButton{margin-left:8px;margin-right:7px;position:relative;width:24px;height:24px;border-radius:32px}.mx_LeftPanelWidget .mx_LeftPanelWidget_maximizeButton:before{content:"";width:16px;height:16px;position:absolute;top:4px;left:4px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/feather-customised/maximise.dc32127.svg);mask-image:url(../../img/feather-customised/maximise.dc32127.svg);background:#61708b}.mx_LeftPanelWidget_maximizeButtonTooltip{margin-top:-3px}.mx_MainSplit{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;min-width:0;min-height:0;height:100%}.mx_MainSplit>.mx_RightPanel_ResizeWrapper{padding:5px;margin-left:8px;height:calc(100vh - 51px)}.mx_MainSplit>.mx_RightPanel_ResizeWrapper:hover .mx_RightPanel_ResizeHandle{top:50%!important;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:64px!important;width:4px!important;border-radius:4px!important;background-color:#2e2f32;opacity:.8}.mx_MatrixChat_splash{position:relative;height:100%}.mx_MatrixChat_splashButtons{text-align:center;width:100%;position:absolute;bottom:30px}.mx_MatrixChat_wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%}.mx_MatrixToolbar{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;height:40px}.mx_MatrixChat{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-box-flex:1;-ms-flex:1;flex:1;min-height:0}.mx_MatrixChat_syncError{color:#fff;background-color:#df2a8b;border-radius:5px;display:table;padding:30px;position:absolute;top:100px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.mx_MatrixChat>:not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle){background-color:#fff;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0;height:100%}.mx_MatrixChat>.mx_ResizeHandle_horizontal:hover{position:relative}.mx_MatrixChat>.mx_ResizeHandle_horizontal:hover:before{position:absolute;left:6px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:64px;width:4px;border-radius:4px;content:" ";background-color:#2e2f32;opacity:.8}.mx_MyGroups{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_MyGroups .mx_BetaCard{margin:0 72px;max-width:760px}.mx_MyGroups .mx_RoomHeader_simpleHeader{margin-left:0}.mx_MyGroups_header{margin-left:2px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mx_MyGroups>:not(.mx_RoomHeader):not(.mx_BetaCard){max-width:960px;margin:40px}.mx_MyGroups_headerCard{-webkit-box-flex:1;-ms-flex:1 0 50%;flex:1 0 50%;margin-bottom:30px;min-width:400px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-right:13px;height:40px;width:40px;border-radius:20px;background-color:rgba(92,100,112,.2);position:relative}.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button:before{background-color:#5c6470;-webkit-mask:url(../../img/icons-create-room.817ede2.svg);mask:url(../../img/icons-create-room.817ede2.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:80%;mask-size:80%;content:"";position:absolute;top:0;bottom:0;left:0;right:0}.mx_MyGroups_headerCard_header{font-weight:700;margin-bottom:10px}.mx_MyGroups_headerCard_content{padding-right:15px}.mx_MyGroups_joinBox{visibility:hidden;height:0;margin:0}.mx_MyGroups_content{margin-left:2px;-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow-y:auto}.mx_MyGroups_scrollable{overflow-y:inherit}.mx_MyGroups_placeholder{background-color:#f7f7f7;color:#888;line-height:40rem;border-radius:10px;text-align:center}.mx_MyGroups_joinedGroups{border-top:1px solid transparent;overflow-x:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-line-pack:start;align-content:flex-start}.mx_MyGroups_joinedGroups .mx_GroupTile{min-width:300px;max-width:33%;-webkit-box-flex:1;-ms-flex:1 0 300px;flex:1 0 300px;height:75px;margin:10px 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;cursor:pointer}.mx_GroupTile_avatar{cursor:-webkit-grab,-webkit-grab;cursor:grab,-webkit-grab}.mx_GroupTile_profile{margin-left:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_GroupTile_profile .mx_GroupTile_desc,.mx_GroupTile_profile .mx_GroupTile_groupId,.mx_GroupTile_profile .mx_GroupTile_name{padding-right:10px}.mx_GroupTile_profile .mx_GroupTile_name{margin:0;font-size:1.5rem}.mx_GroupTile_profile .mx_GroupTile_groupId{font-size:1.3rem;opacity:.7}.mx_GroupTile_profile .mx_GroupTile_desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:1.3rem;max-height:36px;overflow:hidden}.mx_NonUrgentToastContainer{position:absolute;bottom:30px;left:28px;z-index:101}.mx_NonUrgentToastContainer .mx_NonUrgentToastContainer_toast{padding:10px 12px;border-radius:8px;width:320px;font-size:1.3rem;margin-top:8px;background-color:#17191c;color:#fff}.mx_NotificationPanel{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow-y:auto;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_NotificationPanel .mx_RoomView_messageListWrapper{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_NotificationPanel .mx_RoomView_MessageList{width:100%}.mx_NotificationPanel .mx_RoomView_MessageList h2{margin-left:0}.mx_NotificationPanel .mx_EventTile{word-break:break-word;position:relative;padding-bottom:18px}.mx_NotificationPanel .mx_EventTile:not(.mx_EventTile_last):not(.mx_EventTile_lastInSection):after{position:absolute;bottom:0;left:0;right:0;background-color:#8d99a5;height:1px;opacity:.4;content:""}.mx_NotificationPanel .mx_EventTile_roomName{font-weight:700;font-size:1.4rem}.mx_NotificationPanel .mx_EventTile_roomName>*{vertical-align:middle}.mx_NotificationPanel .mx_EventTile_roomName>.mx_BaseAvatar{margin-right:8px}.mx_NotificationPanel .mx_EventTile_roomName a{color:#2e2f32}.mx_NotificationPanel .mx_EventTile_avatar{display:none}.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp,.mx_NotificationPanel .mx_EventTile .mx_SenderProfile{color:#2e2f32;font-size:1.2rem;display:inline;padding-left:0}.mx_NotificationPanel .mx_EventTile_senderDetails{padding-left:36px;position:relative}.mx_NotificationPanel .mx_EventTile_senderDetails a{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_NotificationPanel .mx_EventTile_roomName a,.mx_NotificationPanel .mx_EventTile_senderDetails a{text-decoration:none!important}.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp{visibility:visible;position:static;display:inline}.mx_NotificationPanel .mx_EventTile_line{margin-right:0;padding:0 0 0 36px}.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line{padding-left:0}.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line{background-color:#fff}.mx_NotificationPanel .mx_EventTile_content{margin-right:0}.mx_NotificationPanel_empty:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_RightPanel{overflow-x:hidden;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-radius:8px;padding:4px 0;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%}.mx_RightPanel .mx_RoomView_MessageList{padding:14px 18px}.mx_RightPanel_header{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;border-bottom:1px solid transparent;-webkit-box-flex:0;-ms-flex:0 0 52px;flex:0 0 52px}.mx_RightPanel_headerButtonGroup{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;background-color:#fff;padding:0 9px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RightPanel_headerButton{cursor:pointer;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-left:1px;margin-right:1px;height:32px;width:32px;position:relative;border-radius:100%}.mx_RightPanel_headerButton:before{content:"";position:absolute;top:4px;left:4px;height:24px;width:24px;background-color:#c1c6cd;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_RightPanel_headerButton:hover{background:rgba(13,189,139,.1)}.mx_RightPanel_headerButton:hover:before{background-color:#0dbd8b}.mx_RightPanel_notifsButton:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg);-webkit-mask-position:center;mask-position:center}.mx_RightPanel_roomSummaryButton:before{-webkit-mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);-webkit-mask-position:center;mask-position:center}.mx_RightPanel_groupMembersButton:before{-webkit-mask-image:url(../../img/element-icons/community-members.cbb31c1.svg);mask-image:url(../../img/element-icons/community-members.cbb31c1.svg);-webkit-mask-position:center;mask-position:center}.mx_RightPanel_roomsButton:before{-webkit-mask-image:url(../../img/element-icons/community-rooms.8f0b6c9.svg);mask-image:url(../../img/element-icons/community-rooms.8f0b6c9.svg);-webkit-mask-position:center;mask-position:center}.mx_RightPanel_headerButton_highlight:before{background-color:#0dbd8b!important}.mx_RightPanel_headerButton_badge{font-size:.8rem;border-radius:8px;color:#fff;background-color:#0dbd8b;font-weight:700;position:absolute;top:-4px;left:20px;padding:2px 4px}.mx_RightPanel_collapsebutton{-webkit-box-flex:1;-ms-flex:1;flex:1;text-align:right;height:16px;border:none}.mx_RightPanel .mx_GroupRoomList,.mx_RightPanel .mx_MemberInfo,.mx_RightPanel .mx_MemberList,.mx_RightPanel_blank{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_RightPanel .mx_RoomView_messagePanelSpinner{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;margin:auto}.mx_RightPanel_empty{margin-right:-28px}.mx_RightPanel_empty h2{font-weight:700;margin:16px 0}.mx_RightPanel_empty h2,.mx_RightPanel_empty p{font-size:1.4rem}.mx_RightPanel_empty:before{content:"";display:block;margin:11px auto 29px;height:42px;width:42px;background-color:#91a1c0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}.mx_RightPanel_scopeHeader{margin:24px;text-align:center;font-weight:600;font-size:1.8rem;line-height:2.2rem}.mx_RightPanel_scopeHeader .mx_BaseAvatar{margin-right:8px;vertical-align:middle}.mx_RightPanel_scopeHeader .mx_BaseAvatar_image{border-radius:8px}.mx_RoomDirectory_dialogWrapper>.mx_Dialog{max-width:960px;height:100%}.mx_RoomDirectory_dialog{height:100%;flex-direction:column}.mx_RoomDirectory,.mx_RoomDirectory_dialog{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column}.mx_RoomDirectory{margin-bottom:12px;color:#2e2f32;word-break:break-word}.mx_RoomDirectory,.mx_RoomDirectory_list{flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_RoomDirectory_list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column}.mx_RoomDirectory_list .mx_RoomView_messageListWrapper{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_RoomDirectory_listheader{display:block;margin-top:13px}.mx_RoomDirectory_searchbox{-webkit-box-flex:1!important;-ms-flex:1!important;flex:1!important}.mx_RoomDirectory_listheader .mx_NetworkDropdown{-webkit-box-flex:0;-ms-flex:0 0 200px;flex:0 0 200px}.mx_RoomDirectory_tableWrapper{overflow-y:auto;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_RoomDirectory_table{color:#2e2f32;display:grid;font-size:1.2rem;grid-template-columns:-webkit-max-content auto -webkit-max-content -webkit-max-content -webkit-max-content;grid-template-columns:max-content auto max-content max-content max-content;grid-row-gap:24px;row-gap:24px;text-align:left;width:100%}.mx_RoomDirectory_roomAvatar{padding:2px 14px 0 0}.mx_RoomDirectory_roomMemberCount{-ms-flex-item-align:center;align-self:center;color:#747474;padding:3px 10px 0}.mx_RoomDirectory_roomMemberCount:before{background-color:#747474;display:inline-block;vertical-align:text-top;margin-right:2px;content:"";-webkit-mask:url(../../img/feather-customised/user.7a4d23d.svg);mask:url(../../img/feather-customised/user.7a4d23d.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:80%;mask-size:80%;width:16px;height:16px}.mx_RoomDirectory_join,.mx_RoomDirectory_preview{-ms-flex-item-align:center;align-self:center;white-space:nowrap}.mx_RoomDirectory_name{display:inline-block;font-size:1.8rem;font-weight:600}.mx_RoomDirectory_perms{display:inline-block}.mx_RoomDirectory_perm{border-radius:10px;display:inline-block;height:20px;line-height:2rem;padding:0 5px;color:#fff;background-color:#aaa}.mx_RoomDirectory_topic{cursor:auto;color:#747474;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}.mx_RoomDirectory_alias{font-size:1.2rem;color:#a2a2a2}.mx_RoomDirectory_table tr{padding-bottom:10px;cursor:pointer}.mx_RoomDirectory .mx_RoomView_MessageList{padding:0}.mx_RoomDirectory>span{font-size:1.5rem;margin-top:0}.mx_RoomDirectory>span .mx_AccessibleButton{padding:0}.mx_RoomSearch{-webkit-box-flex:1;-ms-flex:1;flex:1;border-radius:8px;background-color:rgba(141,151,165,.2);border:1px solid transparent;height:28px;padding:1px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomSearch .mx_RoomSearch_icon{width:16px;height:16px;-webkit-mask:url(../../img/element-icons/roomlist/search.3774248.svg);mask:url(../../img/element-icons/roomlist/search.3774248.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#737d8c;margin-left:7px}.mx_RoomSearch .mx_RoomSearch_input{border:none!important;-webkit-box-flex:1!important;-ms-flex:1!important;flex:1!important;color:#2e2f32!important;padding:0;height:100%;width:100%;font-size:1.2rem;line-height:1.6rem}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-webkit-input-placeholder{color:#8d99a5!important}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-moz-placeholder{color:#8d99a5!important}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded):-ms-input-placeholder{color:#8d99a5!important}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-ms-input-placeholder{color:#8d99a5!important}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::placeholder{color:#8d99a5!important}.mx_RoomSearch.mx_RoomSearch_hasQuery{border-color:#737d8c}.mx_RoomSearch.mx_RoomSearch_focused{-webkit-box-shadow:0 0 4px 4px rgba(0,132,255,.5);box-shadow:0 0 4px 4px rgba(0,132,255,.5);border-color:transparent}.mx_RoomSearch.mx_RoomSearch_focused,.mx_RoomSearch.mx_RoomSearch_hasQuery{background-color:#fff}.mx_RoomSearch.mx_RoomSearch_focused .mx_RoomSearch_clearButton,.mx_RoomSearch.mx_RoomSearch_hasQuery .mx_RoomSearch_clearButton{width:16px;height:16px;-webkit-mask-image:url(../../img/element-icons/roomlist/search-clear.6164d97.svg);mask-image:url(../../img/element-icons/roomlist/search-clear.6164d97.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#737d8c;margin-right:8px}.mx_RoomSearch .mx_RoomSearch_clearButton{width:0;height:0}.mx_RoomSearch.mx_RoomSearch_minimized{border-radius:32px;height:auto;width:auto;padding:8px}.mx_RoomSearch.mx_RoomSearch_minimized .mx_RoomSearch_icon{margin-left:0}.mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages){margin-left:65px;min-height:50px}.mx_RoomStatusBar_typingIndicatorAvatars{width:52px;margin-top:-1px;text-align:left}.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_image{margin-right:-12px;border:1px solid #fff}.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_initial{padding-left:1px;padding-top:1px}.mx_RoomStatusBar_typingIndicatorRemaining{display:inline-block;color:#acacac;background-color:#ddd;border:1px solid #fff;border-radius:40px;width:24px;height:24px;line-height:2.4rem;font-size:.8em;vertical-align:top;text-align:center;position:absolute}.mx_RoomStatusBar_scrollDownIndicator{cursor:pointer;padding-left:1px}.mx_RoomStatusBar_unreadMessagesBar{padding-top:10px;color:#ff4b55;cursor:pointer}.mx_RoomStatusBar_connectionLostBar{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:19px;min-height:58px}.mx_RoomStatusBar_unsentMessages>div[role=alert]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:70px;margin:12px;padding-left:16px;background-color:#f3f8fd;border-radius:4px}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge{margin-right:12px}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge .mx_NotificationBadge{width:24px!important;height:24px!important;border-radius:24px!important}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge .mx_NotificationBadge .mx_NotificationBadge_count{font-size:1.6rem!important}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentTitle{color:#ff4b55;font-size:1.5rem}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentDescription{font-size:1.2rem}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;text-align:right;margin-right:22px;color:#61708b}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton{padding:5px 10px 5px 28px;display:inline-block;position:relative}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton:nth-child(2){border-left:1px solid #e3e8f0}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton:before{content:"";position:absolute;left:10px;background-color:#61708b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton.mx_RoomStatusBar_unsentCancelAllBtn:before{-webkit-mask-image:url(../../img/element-icons/trashcan.26f6c28.svg);mask-image:url(../../img/element-icons/trashcan.26f6c28.svg);width:12px;height:16px;top:calc(50% - 8px)}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton.mx_RoomStatusBar_unsentResendAllBtn{padding-left:34px}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton.mx_RoomStatusBar_unsentResendAllBtn:before{-webkit-mask-image:url(../../img/element-icons/retry.6cd23ad.svg);mask-image:url(../../img/element-icons/retry.6cd23ad.svg);width:18px;height:18px;top:calc(50% - 9px)}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_InlineSpinner{vertical-align:middle;margin-right:5px;top:1px}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_InlineSpinner+span{margin-right:10px}.mx_RoomStatusBar_connectionLostBar img{padding-left:10px;padding-right:10px;vertical-align:middle;float:left}.mx_RoomStatusBar_connectionLostBar_title{color:#ff4b55}.mx_RoomStatusBar_connectionLostBar_desc{color:#2e2f32;font-size:1.3rem;opacity:.5;padding-bottom:20px}.mx_RoomStatusBar_resend_link{color:#2e2f32!important;text-decoration:underline!important;cursor:pointer}.mx_RoomStatusBar_typingBar{height:50px;line-height:5rem;color:#2e2f32;opacity:.5;overflow-y:hidden;display:block}.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages){min-height:40px}.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_indicator{margin-top:10px}.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_typingBar{height:40px;line-height:4rem}.mx_RoomView{word-wrap:break-word;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@-webkit-keyframes mx_RoomView_fileDropTarget_animation{0%{opacity:0}to{opacity:.95}}@keyframes mx_RoomView_fileDropTarget_animation{0%{opacity:0}to{opacity:.95}}.mx_RoomView_fileDropTarget{min-width:0;width:100%;height:100%;font-size:1.8rem;text-align:center;pointer-events:none;background-color:#fff;opacity:.95;position:absolute;z-index:3000;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-animation:mx_RoomView_fileDropTarget_animation;animation:mx_RoomView_fileDropTarget_animation;-webkit-animation-duration:.5s;animation-duration:.5s}@-webkit-keyframes mx_RoomView_fileDropTarget_image_animation{0%{width:0}to{width:32px}}@keyframes mx_RoomView_fileDropTarget_image_animation{0%{width:0}to{width:32px}}.mx_RoomView_fileDropTarget_image{-webkit-animation:mx_RoomView_fileDropTarget_image_animation;animation:mx_RoomView_fileDropTarget_image_animation;-webkit-animation-duration:.5s;animation-duration:.5s;margin-bottom:16px}.mx_RoomView_auxPanel{min-width:0;width:100%;margin:0 auto;overflow:auto;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_RoomView_auxPanel_fullHeight{position:absolute;top:0;bottom:0;left:0;right:0;z-index:3000;background-color:#fff}.mx_RoomView_auxPanel_hiddenHighlights{border-bottom:1px solid transparent;padding:10px 26px;color:#ff4b55;cursor:pointer}.mx_RoomView_auxPanel_apps{max-width:1920px!important}.mx_RoomView .mx_MainSplit,.mx_RoomView_messagePanel{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_RoomView_messagePanel{width:100%;overflow-y:auto;overflow-anchor:none}.mx_RoomView_messagePanelSearchSpinner{-webkit-box-flex:1;-ms-flex:1;flex:1;background-image:url(../../img/typing-indicator-2x.0eb9f0e.gif);background-position:center 367px;background-size:25px;background-repeat:no-repeat;position:relative}.mx_RoomView_messagePanelSearchSpinner:before{background-color:#888;-webkit-mask:url(../../img/feather-customised/search-input.044bfa7.svg);mask:url(../../img/feather-customised/search-input.044bfa7.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:50px;mask-size:50px;content:"";position:absolute;top:286px;left:0;right:0;height:50px}.mx_RoomView_body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.mx_RoomView_body .mx_RoomView_messagePanel,.mx_RoomView_body .mx_RoomView_messagePanelSearchSpinner,.mx_RoomView_body .mx_RoomView_messagePanelSpinner{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.mx_RoomView_body .mx_RoomView_timeline{position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_RoomView_statusArea{width:100%;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;max-height:0;background-color:#fff;z-index:1000;overflow:hidden;-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.mx_RoomView_statusArea_expanded{max-height:100px}.mx_RoomView_statusAreaBox{margin:auto;min-height:50px}.mx_RoomView_statusAreaBox_line{margin-left:65px;border-top:1px solid transparent;height:1px}.mx_RoomView_messageListWrapper{min-height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_RoomView_searchResultsPanel a{text-decoration:none;color:inherit}.mx_RoomView_empty{font-size:1.3rem;padding:0 24px;margin-right:30px;text-align:center;margin-bottom:80px}.mx_RoomView_MessageList{list-style-type:none;padding:18px;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_RoomView_MessageList li{clear:both}li.mx_RoomView_myReadMarker_container{height:0;margin:0;padding:0;border:0}hr.mx_RoomView_myReadMarker{border-top:1px solid #0dbd8b;border-bottom:1px solid #0dbd8b;margin-top:0;position:relative;top:-1px;z-index:1;-webkit-transition:width easeinsine .4s 1s,opacity easeinsine .4s 1s;transition:width easeinsine .4s 1s,opacity easeinsine .4s 1s;width:99%;opacity:1}.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner{background-color:#fff}.mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename{color:#fff;opacity:1}.mx_RoomView_inCall .mx_RoomView_statusAreaBox_line{margin-top:2px;border:none;height:0}.mx_RoomView_inCall .mx_MessageComposer_wrapper{border-top:2px hidden;padding-top:1px}.mx_RoomView_voipChevron{position:absolute;bottom:-11px;right:11px}.mx_RoomView_voipButton{float:right;margin-right:13px;margin-top:13px;cursor:pointer}.mx_RoomView_voipButton object{pointer-events:none}.mx_RoomView .mx_MessageComposer{width:100%;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-right:2px}.mx_RoomView_ongoingConfCallNotification{width:100%;text-align:center;background-color:#ff4b55;color:#fff;font-weight:700;padding:6px 0;cursor:pointer}.mx_RoomView_ongoingConfCallNotification a{color:#fff!important}.mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList{margin-bottom:4px}.mx_MatrixChat_useCompactLayout .mx_RoomView_statusAreaBox{min-height:42px}.mx_ScrollPanel .mx_RoomView_MessageList{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_SearchBox{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0}.mx_SearchBox.mx_SearchBox_blurred:not(:hover){background-color:transparent}.mx_SearchBox .mx_SearchBox_closeButton{cursor:pointer;background-image:url(../../img/icons-close.11ff07c.svg);background-repeat:no-repeat;width:16px;height:16px;background-position:50%;padding:9px}.mx_SpacePanel{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;background-color:hsla(0,0%,91%,.77);padding:0;margin:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow-y:auto}.mx_SpacePanel .mx_SpacePanel_spaceTreeWrapper{-webkit-box-flex:1;-ms-flex:1;flex:1;padding:8px 8px 16px 0}.mx_SpacePanel .mx_SpacePanel_toggleCollapse{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:40px;height:40px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:32px;mask-size:32px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;margin-left:16px;margin-bottom:12px;background-color:#8d99a5;-webkit-mask-image:url(../../img/element-icons/expand-space-panel.e6f74b9.svg);mask-image:url(../../img/element-icons/expand-space-panel.e6f74b9.svg)}.mx_SpacePanel .mx_SpacePanel_toggleCollapse.expanded{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.mx_SpacePanel ul{margin:0;list-style:none;padding:0}.mx_SpacePanel ul>.mx_SpaceItem{padding-left:16px}.mx_SpacePanel .mx_SpaceButton_toggleCollapse{cursor:pointer}.mx_SpacePanel .mx_SpaceTreeLevel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-width:250px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_SpacePanel .mx_SpaceItem{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-flow:wrap;flex-flow:wrap}.mx_SpacePanel .mx_SpaceItem.mx_SpaceItem_narrow{-ms-flex-item-align:baseline;align-self:baseline}.mx_SpacePanel .mx_SpaceItem.collapsed>.mx_SpaceButton>.mx_SpaceButton_toggleCollapse{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.mx_SpacePanel .mx_SpaceItem.collapsed>.mx_SpaceTreeLevel{display:none}.mx_SpacePanel .mx_SpaceItem:not(.hasSubSpaces)>.mx_SpaceButton{margin-left:16px;min-width:40px}.mx_SpacePanel .mx_SpaceButton{border-radius:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:4px 4px 4px 0;width:100%}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper{background-color:#fff}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active.mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper{padding:1px;border:3px solid #737d8c}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_selectionWrapper{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:12px;padding:4px}.mx_SpacePanel .mx_SpaceButton:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper{width:100%;padding-right:16px;overflow:hidden}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_name{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-left:8px;white-space:nowrap;display:block;text-overflow:ellipsis;overflow:hidden;padding-right:8px;font-size:1.4rem;line-height:1.8rem}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_toggleCollapse{width:16px;height:20px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:20px;mask-size:20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#8d99a5;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon{width:32px;min-width:32px;height:32px;border-radius:8px;position:relative}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon:before{position:absolute;content:"";width:32px;height:32px;top:0;left:0;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:18px;mask-size:18px}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon{background-color:#fff}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon:before{background-color:#3f3d3d;-webkit-mask-image:url(../../img/element-icons/home.b706c0e.svg);mask-image:url(../../img/element-icons/home.b706c0e.svg)}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_new .mx_SpaceButton_icon{background-color:#0dbd8b;-webkit-transition:all .1s ease-in-out;transition:all .1s ease-in-out}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_new .mx_SpaceButton_icon:before{background-color:#fff;-webkit-mask-image:url(../../img/element-icons/plus.62cc275.svg);mask-image:url(../../img/element-icons/plus.62cc275.svg);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_newCancel .mx_SpaceButton_icon{background-color:#c1c6cd}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_newCancel .mx_SpaceButton_icon:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.mx_SpacePanel .mx_SpaceButton .mx_BaseAvatar_image{border-radius:8px}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton{width:20px;min-width:20px;height:20px;margin-top:auto;margin-bottom:auto;display:none;position:absolute;right:4px}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton:before{top:2px;left:2px;content:"";width:16px;height:16px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);background:#2e2f32}.mx_SpacePanel .mx_SpacePanel_badgeContainer{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge{margin:0 2px}.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge_dot{margin:0 7px}.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer{right:0;top:0}.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer .mx_NotificationBadge{background-clip:padding-box}.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer .mx_NotificationBadge_dot{margin:0 -1px 0 0;border:3px solid hsla(0,0%,91%,.77)}.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer .mx_NotificationBadge_2char,.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer .mx_NotificationBadge_3char{margin:-5px -5px 0 0;border:2px solid hsla(0,0%,91%,.77)}.mx_SpacePanel.collapsed .mx_SpaceButton.mx_SpaceButton_active .mx_SpacePanel_badgeContainer{right:-3px;top:-3px}.mx_SpacePanel:not(.collapsed) .mx_SpacePanel_badgeContainer{position:absolute;right:4px}.mx_SpacePanel:not(.collapsed) .mx_SpaceButton:focus-within:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpacePanel_badgeContainer,.mx_SpacePanel:not(.collapsed) .mx_SpaceButton:hover:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpacePanel_badgeContainer,.mx_SpacePanel:not(.collapsed) .mx_SpaceButton_hasMenuOpen:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpacePanel_badgeContainer{width:0;height:0;display:none}.mx_SpacePanel:not(.collapsed) .mx_SpaceButton:focus-within:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton,.mx_SpacePanel:not(.collapsed) .mx_SpaceButton:hover:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton,.mx_SpacePanel:not(.collapsed) .mx_SpaceButton_hasMenuOpen:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton{display:block}.mx_SpacePanel>.mx_AutoHideScrollbar>.mx_SpaceButton,.mx_SpacePanel>.mx_AutoHideScrollbar>.mx_SpaceButton.mx_SpaceButton_active:before{height:32px}.mx_SpacePanel>.mx_AutoHideScrollbar>ul{padding-left:0}.mx_SpacePanel_contextMenu .mx_SpacePanel_contextMenu_header{margin:12px 16px;font-weight:600;font-size:1.5rem;line-height:1.8rem}.mx_SpacePanel_contextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton{color:#0dbd8b}.mx_SpacePanel_contextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton .mx_SpacePanel_iconInvite:before{background-color:#0dbd8b;-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconSettings:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconLeave:before{-webkit-mask-image:url(../../img/element-icons/leave.bb917e7.svg);mask-image:url(../../img/element-icons/leave.bb917e7.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconMembers:before{-webkit-mask-image:url(../../img/element-icons/room/members.88c3e93.svg);mask-image:url(../../img/element-icons/room/members.88c3e93.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconPlus:before{-webkit-mask-image:url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);mask-image:url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconHash:before{-webkit-mask-image:url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);mask-image:url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconExplore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg);mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg)}.mx_SpacePanel_sharePublicSpace{margin:0}.mx_SpaceRoomDirectory_dialogWrapper>.mx_Dialog{max-width:960px;height:100%}.mx_SpaceRoomDirectory{height:100%;margin-bottom:12px;color:#2e2f32;word-break:break-word;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_SpaceRoomDirectory,.mx_SpaceRoomDirectory .mx_Dialog_title,.mx_SpaceRoomView_landing .mx_Dialog_title{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_SpaceRoomDirectory .mx_Dialog_title .mx_BaseAvatar,.mx_SpaceRoomView_landing .mx_Dialog_title .mx_BaseAvatar{margin-right:12px;-ms-flex-item-align:center;align-self:center}.mx_SpaceRoomDirectory .mx_Dialog_title .mx_BaseAvatar_image,.mx_SpaceRoomView_landing .mx_Dialog_title .mx_BaseAvatar_image{border-radius:8px}.mx_SpaceRoomDirectory .mx_Dialog_title>div>h1,.mx_SpaceRoomView_landing .mx_Dialog_title>div>h1{font-weight:600;font-size:1.8rem;line-height:2.2rem;margin:0}.mx_SpaceRoomDirectory .mx_Dialog_title>div>div,.mx_SpaceRoomView_landing .mx_Dialog_title>div>div{font-weight:400;color:#737d8c;font-size:1.5rem;line-height:2.4rem}.mx_SpaceRoomDirectory .mx_AccessibleButton_kind_link,.mx_SpaceRoomView_landing .mx_AccessibleButton_kind_link{padding:0}.mx_SpaceRoomDirectory .mx_SearchBox,.mx_SpaceRoomView_landing .mx_SearchBox{margin:24px 0 16px}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_noResults,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_noResults{text-align:center}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_noResults>div,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_noResults>div{font-size:1.5rem;line-height:2.4rem;color:#737d8c}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:32px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.5rem;line-height:2.4rem;color:#2e2f32}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton{padding:4px 12px;font-weight:400}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton+.mx_AccessibleButton,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton+.mx_AccessibleButton{margin-left:16px}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton_kind_danger_outline,.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton_kind_primary_outline,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton_kind_danger_outline,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton_kind_primary_outline{padding:3px 12px}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader>span,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader>span{margin-left:auto}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_error,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_error{position:relative;font-weight:600;color:#ff4b55;font-size:1.5rem;line-height:1.8rem;margin:20px auto 12px;padding-left:24px;width:-webkit-max-content;width:-moz-max-content;width:max-content}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_error:before,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_error:before{content:"";position:absolute;height:16px;width:16px;left:0;background-image:url(../../img/element-icons/warning-badge.de1033e.svg)}.mx_SpaceRoomDirectory_list{margin-top:16px;padding-bottom:40px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomCount>h3{display:inline;font-weight:600;font-size:1.8rem;line-height:2.2rem;color:#2e2f32}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomCount>span{margin-left:8px;font-size:1.5rem;line-height:2.4rem;color:#737d8c}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace .mx_BaseAvatar_image{border-radius:8px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle{position:absolute;left:-1px;top:10px;height:16px;width:16px;border-radius:4px;background-color:#fff}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle:before{content:"";position:absolute;top:0;left:0;height:16px;width:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#8d99a5;-webkit-mask-size:16px;mask-size:16px;-webkit-transform:rotate(270deg);transform:rotate(270deg);-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle.mx_SpaceRoomDirectory_subspace_toggle_shown:before{-webkit-transform:rotate(0deg);transform:rotate(0deg)}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_children{position:relative;padding-left:12px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile{position:relative;padding:8px 16px;border-radius:8px;min-height:56px;-webkit-box-sizing:border-box;box-sizing:border-box;display:grid;grid-template-columns:20px auto -webkit-max-content;grid-template-columns:20px auto max-content;grid-column-gap:8px;grid-row-gap:6px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_BaseAvatar{grid-row:1;grid-column:1}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_name{font-weight:600;font-size:1.5rem;line-height:1.8rem;grid-row:1;grid-column:2}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_name .mx_InfoTooltip{display:inline;margin-left:12px;color:#8d99a5;font-size:1.2rem;line-height:1.5rem}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_name .mx_InfoTooltip .mx_InfoTooltip_icon{margin-right:4px;position:relative;vertical-align:text-top}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_name .mx_InfoTooltip .mx_InfoTooltip_icon:before{position:absolute;top:0;left:0}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_info{font-size:1.4rem;line-height:1.8rem;color:#737d8c;grid-row:2;grid-column:1/3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions{text-align:right;margin-left:20px;grid-column:3;grid-row:1/3}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions .mx_AccessibleButton{line-height:2.4rem;padding:4px 16px;display:inline-block;visibility:hidden}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions .mx_AccessibleButton_kind_danger_outline,.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions .mx_AccessibleButton_kind_primary_outline{padding:3px 16px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions .mx_Checkbox{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;margin-left:12px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:hover{background-color:hsla(0,0%,91%,.77)}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:hover .mx_AccessibleButton{visibility:visible}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:before,.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_children:before{content:"";position:absolute;background-color:hsla(0,0%,91%,.77);width:1px;height:100%;left:6px;top:0}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_actions .mx_SpaceRoomDirectory_actionsText{font-weight:400;font-size:1.2rem;line-height:1.5rem;color:#737d8c}.mx_SpaceRoomDirectory_list>hr{border:none;height:1px;background-color:rgba(141,151,165,.2);margin:20px 0}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_createRoom{display:block;margin:16px auto 0;width:-webkit-max-content;width:-moz-max-content;width:max-content}.mx_SpaceRoomView .mx_MainSplit>div:first-child{padding:80px 60px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-height:100%;overflow-y:auto}.mx_SpaceRoomView .mx_MainSplit>div:first-child h1{margin:0;font-size:2.4rem;font-weight:600;color:#2e2f32;width:-webkit-max-content;width:-moz-max-content;width:max-content}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_description{font-size:1.5rem;color:#737d8c;margin-top:12px;margin-bottom:24px;max-width:428px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_AddExistingToSpace{max-width:428px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_AddExistingToSpace .mx_AddExistingToSpace_content{height:calc(100vh - 360px);max-height:400px}.mx_SpaceRoomView .mx_MainSplit>div:first-child:not(.mx_SpaceRoomView_landing) .mx_SpaceFeedbackPrompt{width:428px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_buttons{display:block;margin-top:44px;width:428px;text-align:right}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_buttons .mx_AccessibleButton_hasKind{padding:8px 22px;margin-left:16px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_buttons input.mx_AccessibleButton{border:none}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_Field{max-width:428px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_Field+.mx_Field{margin-top:28px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_errorText{font-weight:600;font-size:1.2rem;line-height:1.5rem;color:#ff4b55;margin-bottom:28px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_AccessibleButton_disabled{cursor:not-allowed}.mx_SpaceRoomView .mx_SpaceRoomView_preview{padding:32px 24px!important;margin:auto;max-width:480px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:2px 15px 30px rgba(0,0,0,.48);box-shadow:2px 15px 30px rgba(0,0,0,.48);border-radius:8px;position:relative}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_BetaCard_betaPill{position:absolute;right:24px;top:32px}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_spaceBetaPrompt{font-weight:600;font-size:1.4rem;line-height:2.4rem;color:#2e2f32;margin-top:24px;position:relative;padding-left:24px}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_spaceBetaPrompt .mx_AccessibleButton_kind_link{display:inline;padding:0;font-size:inherit;line-height:inherit}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_spaceBetaPrompt:before{content:"";position:absolute;height:2.4rem;width:20px;left:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);background-color:#737d8c}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:20px;font-size:1.5rem}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter>div{margin-left:8px}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter>div .mx_SpaceRoomView_preview_inviter_name{line-height:1.8rem}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter>div .mx_SpaceRoomView_preview_inviter_mxid{line-height:2.4rem;color:#737d8c}.mx_SpaceRoomView .mx_SpaceRoomView_preview>.mx_BaseAvatar>.mx_BaseAvatar_image,.mx_SpaceRoomView .mx_SpaceRoomView_preview>.mx_BaseAvatar_image{border-radius:12px}.mx_SpaceRoomView .mx_SpaceRoomView_preview h1.mx_SpaceRoomView_preview_name{margin:20px 0!important}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_topic{font-size:1.4rem;line-height:2.2rem;color:#737d8c;margin:20px 0;max-height:160px;overflow-y:auto}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_joinButtons{margin-top:20px}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_joinButtons .mx_AccessibleButton{width:200px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:14px 0}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_joinButtons .mx_AccessibleButton+.mx_AccessibleButton{margin-left:20px}.mx_SpaceRoomView .mx_SpaceRoomView_landing>.mx_BaseAvatar>.mx_BaseAvatar_image,.mx_SpaceRoomView .mx_SpaceRoomView_landing>.mx_BaseAvatar_image{border-radius:12px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name{margin:24px 0 16px;font-size:1.5rem;color:#737d8c}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name>span{display:inline-block}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name .mx_SpaceRoomView_landing_nameRow{margin-top:12px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name .mx_SpaceRoomView_landing_nameRow>h1{display:inline-block}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name .mx_SpaceRoomView_landing_inviter .mx_BaseAvatar{margin-right:4px;vertical-align:middle}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_info{display:inline-block;margin:0 auto 0 0}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_FacePile{display:inline-block;margin-right:12px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_FacePile .mx_FacePile_faces{cursor:pointer}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_landing_inviteButton{position:relative;padding:4px 18px 4px 40px;line-height:2.4rem;height:-webkit-min-content;height:-moz-min-content;height:min-content}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_landing_inviteButton:before{position:absolute;content:"";left:8px;height:16px;width:16px;background:#fff;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_landing_settingsButton{position:relative;margin-left:16px;width:24px;height:24px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_landing_settingsButton:before{position:absolute;content:"";left:0;top:0;height:24px;width:24px;background:#8d99a5;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_topic{font-size:1.5rem;margin-top:12px;margin-bottom:16px}.mx_SpaceRoomView .mx_SpaceRoomView_landing>hr{border:none;height:1px;background-color:hsla(0,0%,91%,.77)}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SearchBox{margin:0 0 20px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceFeedbackPrompt{margin-bottom:16px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceFeedbackPrompt+hr{display:none}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton{position:relative;padding:16px 32px 16px 72px;width:432px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;border:1px solid #e7e7e7;font-size:1.5rem;margin:20px 0}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton>h3{font-weight:600;margin:0 0 4px}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton>span{color:#737d8c}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton:before{position:absolute;content:"";width:32px;height:32px;top:24px;left:20px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px;mask-size:24px;background-color:#8d99a5}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton:hover{border-color:#0dbd8b}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton:hover:before{background-color:#0dbd8b}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton:hover>span{color:#2e2f32}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope .mx_SpaceRoomView_privateScope_justMeButton:before{-webkit-mask-image:url(../../img/element-icons/room/members.88c3e93.svg);mask-image:url(../../img/element-icons/room/members.88c3e93.svg)}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope .mx_SpaceRoomView_privateScope_meAndMyTeammatesButton:before{-webkit-mask-image:url(../../img/element-icons/community-members.cbb31c1.svg);mask-image:url(../../img/element-icons/community-members.cbb31c1.svg)}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_betaDisclaimer{padding:58px 16px 16px;position:relative;border-radius:8px;background-color:#f3f8fd;max-width:428px;margin:20px 0 30px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_betaDisclaimer .mx_BetaCard_betaPill{position:absolute;left:16px;top:16px}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons{color:#737d8c;margin-top:28px}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_AccessibleButton{position:relative;display:inline-block;padding-left:32px;line-height:24px}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_AccessibleButton:before{content:"";position:absolute;height:24px;width:24px;top:0;left:0;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_AccessibleButton+.mx_AccessibleButton{margin-left:32px}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_SpaceRoomView_inviteTeammates_inviteDialogButton:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_SpaceRoomView_info{color:#737d8c;font-size:1.5rem;line-height:2.4rem;margin:20px 0}.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private,.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public{padding-left:20px;position:relative}.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private:before,.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public:before{position:absolute;content:"";width:20px;height:20px;top:0;left:-2px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#8d99a5}.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public:before{-webkit-mask-size:12px;mask-size:12px;-webkit-mask-image:url(../../img/globe.8201f08.svg);mask-image:url(../../img/globe.8201f08.svg)}.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private:before{-webkit-mask-size:14px;mask-size:14px;-webkit-mask-image:url(../../img/element-icons/lock.1f264bd.svg);mask-image:url(../../img/element-icons/lock.1f264bd.svg)}.mx_SpaceRoomView_info .mx_AccessibleButton_kind_link{color:inherit;position:relative;padding-left:16px}.mx_SpaceRoomView_info .mx_AccessibleButton_kind_link:before{content:"·";position:absolute;left:6px}.mx_SpaceFeedbackPrompt{margin-top:18px;margin-bottom:12px}.mx_SpaceFeedbackPrompt>hr{border:none;border-top:1px solid #e7e7e7;margin-bottom:12px}.mx_SpaceFeedbackPrompt>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;font-size:1.5rem;line-height:2.4rem}.mx_SpaceFeedbackPrompt>div>span{color:#737d8c;position:relative;padding-left:32px;font-size:inherit;line-height:inherit;margin-right:auto}.mx_SpaceFeedbackPrompt>div>span:before{content:"";position:absolute;left:0;top:2px;height:20px;width:20px;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);-webkit-mask-position:center;mask-position:center}.mx_SpaceFeedbackPrompt>div .mx_AccessibleButton_kind_link{color:#0dbd8b;position:relative;padding:0 0 0 24px;margin-left:8px;font-size:inherit;line-height:inherit}.mx_SpaceFeedbackPrompt>div .mx_AccessibleButton_kind_link:before{content:"";position:absolute;left:0;height:16px;width:16px;background-color:#0dbd8b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);mask-image:url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);-webkit-mask-position:center;mask-position:center}.mx_TabbedView{padding:0 0 0 16px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:absolute;top:0;bottom:0;left:0;right:0;margin:8px 0 0}.mx_TabbedView_tabLabels{width:170px;max-width:170px;color:#45474a;position:fixed}.mx_TabbedView_tabLabel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:text-top;cursor:pointer;padding:8px 0;border-radius:8px;font-size:1.3rem;position:relative}.mx_TabbedView_tabLabel_active{background-color:#0dbd8b;color:#fff}.mx_TabbedView_maskedIcon{margin-left:8px;margin-right:16px;width:16px;height:16px;display:inline-block}.mx_TabbedView_maskedIcon:before{display:inline-block;background-color:#454545;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:16px;mask-size:16px;width:16px;height:16px;-webkit-mask-position:center;mask-position:center;content:""}.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon:before{background-color:#fff}.mx_TabbedView_tabLabel_text{vertical-align:middle}.mx_TabbedView_tabPanel{margin-left:240px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_TabbedView_tabPanel,.mx_TabbedView_tabPanelContent{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;min-height:0}.mx_TabbedView_tabPanelContent{overflow:auto}.mx_ToastContainer{position:absolute;top:0;left:70px;z-index:101;padding:4px;display:grid;grid-template-rows:1fr 14px 6px}.mx_ToastContainer.mx_ToastContainer_stacked:before{content:"";margin:0 4px;grid-row:2/4}.mx_ToastContainer .mx_Toast_toast,.mx_ToastContainer.mx_ToastContainer_stacked:before{grid-column:1;background-color:#f2f5f8;-webkit-box-shadow:0 4px 20px rgba(0,0,0,.5);box-shadow:0 4px 20px rgba(0,0,0,.5);border-radius:8px}.mx_ToastContainer .mx_Toast_toast{grid-row:1/3;color:#2e2f32;overflow:hidden;display:grid;grid-template-columns:22px 1fr;grid-column-gap:8px;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;grid-row-gap:4px;row-gap:4px;padding:8px}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon:after,.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon:before{content:"";width:22px;height:22px;grid-column:1;grid-row:1;-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-size:100%;background-repeat:no-repeat}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification:after{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);background-color:#2e2f32}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification_warning:before{background-color:#fff;-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);-webkit-mask-size:90%;mask-size:90%}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification_warning:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_secure_backup:after{-webkit-mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);background-color:#2e2f32}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_body,.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_title{grid-column:2}.mx_ToastContainer .mx_Toast_toast:not(.mx_Toast_hasIcon){padding-left:12px}.mx_ToastContainer .mx_Toast_toast:not(.mx_Toast_hasIcon) .mx_Toast_title{grid-column:1/-1}.mx_ToastContainer .mx_Toast_toast .mx_Toast_description,.mx_ToastContainer .mx_Toast_toast .mx_Toast_title{padding-right:8px}.mx_ToastContainer .mx_Toast_toast .mx_Toast_title{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_ToastContainer .mx_Toast_toast .mx_Toast_title h2{grid-column:1/3;grid-row:1;margin:0;font-size:1.5rem;font-weight:600;display:inline;width:auto;vertical-align:middle}.mx_ToastContainer .mx_Toast_toast .mx_Toast_title span{padding-left:8px;float:right;font-size:1.2rem;line-height:2.2rem;color:#61708b}.mx_ToastContainer .mx_Toast_toast .mx_Toast_body{grid-column:1/3;grid-row:2}.mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons{float:right;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons .mx_FormButton{min-width:96px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_ToastContainer .mx_Toast_toast .mx_Toast_description{max-width:272px;overflow:hidden;text-overflow:ellipsis;margin:4px 0 11px;font-size:1.2rem}.mx_ToastContainer .mx_Toast_toast .mx_Toast_description .mx_AccessibleButton_kind_link{font-size:inherit;padding:0}.mx_ToastContainer .mx_Toast_toast .mx_Toast_description a{text-decoration:none}.mx_ToastContainer .mx_Toast_toast .mx_Toast_detail{color:#737d8c}.mx_ToastContainer .mx_Toast_toast .mx_Toast_deviceID{font-size:1rem}.mx_UploadBar{padding-left:65px;position:relative}.mx_UploadBar .mx_ProgressBar{width:calc(100% - 40px)}.mx_UploadBar_filename{margin-top:5px;color:#61708b;position:relative;padding-left:22px;font-size:1.5rem;vertical-align:middle}.mx_UploadBar_filename:before{content:"";height:18px;width:18px;left:0;-webkit-mask-image:url(../../img/element-icons/upload.e2a53e0.svg);mask-image:url(../../img/element-icons/upload.e2a53e0.svg)}.mx_UploadBar_cancel,.mx_UploadBar_filename:before{position:absolute;top:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#61708b}.mx_UploadBar_cancel{right:0;height:16px;width:16px;margin-right:16px;-webkit-mask-image:url(../../img/icons-close.11ff07c.svg);mask-image:url(../../img/icons-close.11ff07c.svg)}.mx_UserMenu{padding-right:6px}.mx_UserMenu.mx_UserMenu_prototype{margin-bottom:6px;padding-right:0}.mx_UserMenu.mx_UserMenu_prototype .mx_UserMenu_headerButtons{margin-right:2px}.mx_UserMenu.mx_UserMenu_prototype:after{content:"";border-bottom:1px solid #2e2f32;opacity:.2;display:block;padding-top:8px}.mx_UserMenu .mx_UserMenu_headerButtons{width:16px;height:16px;position:relative;display:block}.mx_UserMenu .mx_UserMenu_headerButtons:before{content:"";width:16px;height:16px;position:absolute;top:0;left:0;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#8d99a5;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_UserMenu .mx_UserMenu_row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userAvatarContainer{position:relative;margin-right:8px;height:32px;padding:3px 0}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userAvatarContainer .mx_UserMenu_userAvatar{border-radius:32px;-o-object-fit:cover;object-fit:cover}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_subUserName,.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_userName{display:block}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_subUserName{color:#61708b;font-size:1.3rem;line-height:1.8rem;-webkit-box-flex:1;-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userName{font-weight:600;font-size:1.5rem;line-height:2rem;-webkit-box-flex:1;-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd{width:24px;height:24px;margin-right:8px;position:relative}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd:before{content:"";position:absolute;width:24px;height:24px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#61708b}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd.mx_UserMenu_dnd_noisy:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd.mx_UserMenu_dnd_muted:before{-webkit-mask-image:url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);mask-image:url(../../img/element-icons/roomlist/notifications-off.0c57561.svg)}.mx_UserMenu.mx_UserMenu_minimized{padding-right:0}.mx_UserMenu.mx_UserMenu_minimized .mx_UserMenu_userAvatarContainer{margin-right:0}.mx_UserMenu_contextMenu{width:258px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype{padding-bottom:16px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype .mx_UserMenu_contextMenu_header{padding-bottom:0;padding-top:16px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype .mx_UserMenu_contextMenu_header:nth-child(n+2){padding-top:8px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype hr{width:85%;opacity:.2;border:none;border-bottom:1px solid #2e2f32}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu>.mx_IconizedContextMenu_optionList{margin-top:4px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu>.mx_IconizedContextMenu_optionList:before{border:none}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu>.mx_IconizedContextMenu_optionList>.mx_AccessibleButton{padding-top:2px;padding-bottom:2px}.mx_UserMenu_contextMenu.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_AccessibleButton{padding-top:16px;padding-bottom:16px}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header{padding:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:calc(100% - 40px)}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name *{-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name .mx_UserMenu_contextMenu_displayName{font-weight:700;font-size:1.5rem;line-height:2rem}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name .mx_UserMenu_contextMenu_userId{font-size:1.5rem;line-height:2.4rem}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_themeButton{min-width:32px;max-width:32px;width:32px;height:32px;margin-left:8px;border-radius:32px;background-color:#e3e8f0;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts,.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_hostingLink{padding-top:0}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts{display:inline-block}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts>span{font-weight:600;display:block}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts>span+span{margin-top:8px}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts .mx_AccessibleButton_kind_link{font-weight:400;font-size:inherit;padding:0}.mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon{width:16px;height:16px;display:block}.mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon:before{content:"";width:16px;height:16px;display:block;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#2e2f32}.mx_UserMenu_contextMenu .mx_UserMenu_iconHome:before{-webkit-mask-image:url(../../img/element-icons/roomlist/home.1b4edd5.svg);mask-image:url(../../img/element-icons/roomlist/home.1b4edd5.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconHosting:before{-webkit-mask-image:url(../../img/element-icons/brands/element.182040d.svg);mask-image:url(../../img/element-icons/brands/element.182040d.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconBell:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconLock:before{-webkit-mask-image:url(../../img/element-icons/security.66f2fa6.svg);mask-image:url(../../img/element-icons/security.66f2fa6.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconSettings:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconArchive:before{-webkit-mask-image:url(../../img/element-icons/roomlist/archived.226584d.svg);mask-image:url(../../img/element-icons/roomlist/archived.226584d.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconMessage:before{-webkit-mask-image:url(../../img/element-icons/roomlist/feedback.b9a3f53.svg);mask-image:url(../../img/element-icons/roomlist/feedback.b9a3f53.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconSignOut:before{-webkit-mask-image:url(../../img/element-icons/leave.bb917e7.svg);mask-image:url(../../img/element-icons/leave.bb917e7.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconMembers:before{-webkit-mask-image:url(../../img/element-icons/room/members.88c3e93.svg);mask-image:url(../../img/element-icons/room/members.88c3e93.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconInvite:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_ViewSource_separator{clear:both;border-bottom:1px solid #e5e5e5;padding-top:.7em;padding-bottom:.7em}.mx_ViewSource_heading{font-size:1.7rem;font-weight:400;color:#2e2f32;margin-top:.7em}.mx_ViewSource pre{text-align:left;font-size:1.2rem;padding:.5em 1em;word-wrap:break-word;white-space:pre-wrap}.mx_ViewSource_details{margin-top:.8em}.mx_CompleteSecurity_header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CompleteSecurity_headerIcon{width:24px;height:24px;margin-right:4px;position:relative}.mx_CompleteSecurity_heroIcon{width:128px;height:128px;position:relative;margin:0 auto}.mx_CompleteSecurity_body{font-size:1.5rem}.mx_CompleteSecurity_waiting{color:#8d99a5}.mx_CompleteSecurity_actionRow{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin-top:2.8rem}.mx_CompleteSecurity_actionRow .mx_AccessibleButton{-webkit-margin-start:18px;margin-inline-start:18px}.mx_CompleteSecurity_actionRow .mx_AccessibleButton.warning{color:#ff4b55}.mx_Login_submit{vertical-align:middle;border:0;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;padding:7px 1.5em;cursor:pointer;display:inline-block;outline:none;width:100%;margin-top:24px;margin-bottom:24px;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center}.mx_Login_submit:disabled{opacity:.3;cursor:default}.mx_Login_loader{display:inline;position:relative;top:2px;left:8px}.mx_Login_loader .mx_Spinner{display:inline}.mx_Login_loader .mx_Spinner img{width:16px;height:16px}.mx_Login_error{color:#ff4b55;font-weight:700;text-align:center;margin-top:12px;margin-bottom:12px}.mx_Login_error.mx_Login_serverError{text-align:left;font-weight:400}.mx_Login_error.mx_Login_serverError.mx_Login_serverErrorNonFatal{color:#ff8d13}.mx_Login_type_container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#232f32}.mx_Login_type_container .mx_Field{margin:0}.mx_Login_type_label{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_Login_underlinedServerName{width:-webkit-max-content;width:-moz-max-content;width:max-content;border-bottom:1px dashed #0dbd8b}div.mx_AccessibleButton_kind_link.mx_Login_forgot{display:block;margin:0 auto;font-size:inherit;padding:0}div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled{cursor:not-allowed}.mx_AuthBody{width:500px;font-size:1.2rem;color:#61708b;background-color:#fff;border-radius:0 4px 4px 0;padding:25px 60px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_AuthBody h2{font-size:2.4rem;font-weight:600;margin-top:8px;color:#232f32}.mx_AuthBody h3{font-size:1.4rem;font-weight:600;color:#61708b}.mx_AuthBody h3.mx_AuthBody_centered{text-align:center}.mx_AuthBody a:hover,.mx_AuthBody a:link,.mx_AuthBody a:visited{color:#0dbd8b;text-decoration:none}.mx_AuthBody input[type=password],.mx_AuthBody input[type=text]{color:#232f32}.mx_AuthBody .mx_Field input,.mx_AuthBody .mx_Field select{color:#232f32;background-color:#fff}.mx_AuthBody .mx_Field label{color:#232f32}.mx_AuthBody .mx_Field input:not(:-moz-placeholder-shown)+label,.mx_AuthBody .mx_Field textarea:not(:-moz-placeholder-shown)+label{background-color:#fff}.mx_AuthBody .mx_Field input:not(:-ms-input-placeholder)+label,.mx_AuthBody .mx_Field textarea:not(:-ms-input-placeholder)+label{background-color:#fff}.mx_AuthBody .mx_Field_labelAlwaysTopLeft label,.mx_AuthBody .mx_Field input:focus+label,.mx_AuthBody .mx_Field input:not(:placeholder-shown)+label,.mx_AuthBody .mx_Field select+label,.mx_AuthBody .mx_Field textarea:focus+label,.mx_AuthBody .mx_Field textarea:not(:placeholder-shown)+label{background-color:#fff}.mx_AuthBody input.error{color:#ff4b55}.mx_AuthBody .mx_Field input{-webkit-box-sizing:border-box;box-sizing:border-box}.mx_AuthBody .mx_Field_select:before{background-color:#232f32}.mx_AuthBody .mx_Dropdown{color:#232f32}.mx_AuthBody .mx_Dropdown_arrow{background:#232f32}.mx_AuthBody .mx_Dropdown_menu{background-color:#fff}.mx_AuthBody .mx_Dropdown_menu .mx_Dropdown_option_highlight{background-color:#ddd}.mx_AuthBody_fieldRow{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:10px}.mx_AuthBody_fieldRow>.mx_Field{margin:0 5px}.mx_AuthBody_fieldRow>.mx_Field:first-child{margin-left:0}.mx_AuthBody_fieldRow>.mx_Field:last-child{margin-right:0}.mx_AuthBody_paddedFooter{height:80px;padding-top:28px;text-align:center}.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_title{margin-top:16px;font-size:1.5rem;line-height:2.4rem}.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_title .mx_InlineSpinner img{vertical-align:sub;margin-right:5px}.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_subtitle{margin-top:8px;font-size:1rem;line-height:1.4rem}.mx_AuthBody_changeFlow{display:block;text-align:center;width:100%}.mx_AuthBody_changeFlow>a{font-weight:600}.mx_SSOButtons+.mx_AuthBody_changeFlow{margin-top:24px}.mx_AuthBody_spinner{margin:1em 0}@media only screen and (max-width:480px){.mx_AuthBody{border-radius:4px;width:auto;max-width:500px;padding:10px}}.mx_AuthButtons{min-height:24px;height:unset!important;padding-top:13px!important;padding-bottom:14px!important;-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.mx_AuthButtons_loginButton_wrapper{text-align:center;width:100%}.mx_AuthButtons_loginButton,.mx_AuthButtons_registerButton{margin-top:3px;height:40px;border:0;border-radius:40px;margin-left:4px;margin-right:4px;min-width:80px;background-color:#0dbd8b;color:#fff;cursor:pointer;font-size:1.5rem;padding:0 11px;word-break:break-word}.mx_AuthFooter{text-align:center;width:100%;font-size:1.4rem;opacity:.72;padding:20px 0;background:-webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.8)));background:linear-gradient(transparent,rgba(0,0,0,.8))}.mx_AuthFooter a:hover,.mx_AuthFooter a:link,.mx_AuthFooter a:visited{color:#fff;margin:0 22px}.mx_AuthHeader{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:206px;padding:25px;-webkit-box-sizing:border-box;box-sizing:border-box}@media only screen and (max-width:480px){.mx_AuthHeader{display:none}}.mx_AuthHeaderLogo{margin-top:15px;-webkit-box-flex:1;-ms-flex:1;flex:1;padding:0 25px}.mx_AuthHeaderLogo img{width:100%}@media only screen and (max-width:480px){.mx_AuthHeaderLogo{display:none}}.mx_AuthPage{width:100%;min-height:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background-color:#2e3649}.mx_AuthPage,.mx_AuthPage_modal{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_AuthPage_modal{margin:100px auto auto;border-radius:4px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.33);box-shadow:0 2px 4px 0 rgba(0,0,0,.33);background-color:hsla(0,0%,96.1%,.9)}@media only screen and (max-width:480px){.mx_AuthPage_modal{margin-top:0}}.mx_CompleteSecurityBody{width:600px;color:#232f32;background-color:#fff;border-radius:4px;padding:20px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_CompleteSecurityBody h2{font-size:2.4rem;font-weight:600;margin-top:0}.mx_CompleteSecurityBody h3{font-size:1.4rem;font-weight:600}.mx_CompleteSecurityBody a:hover,.mx_CompleteSecurityBody a:link,.mx_CompleteSecurityBody a:visited{color:#0dbd8b;text-decoration:none}.mx_CountryDropdown .mx_Dropdown_input .mx_Dropdown_option{padding:0 3px}.mx_CountryDropdown .mx_Dropdown_arrow{padding-right:3px}.mx_CountryDropdown_shortOption{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:100%}.mx_CountryDropdown_option,.mx_CountryDropdown_shortOption{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CountryDropdown_option{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_InteractiveAuthEntryComponents_emailWrapper{padding-right:100px;position:relative;margin-top:32px;margin-bottom:32px}.mx_InteractiveAuthEntryComponents_emailWrapper:after,.mx_InteractiveAuthEntryComponents_emailWrapper:before{position:absolute;width:116px;height:116px;content:"";right:-10px}.mx_InteractiveAuthEntryComponents_emailWrapper:before{background-color:rgba(244,246,250,.91);border-radius:50%;top:-20px}.mx_InteractiveAuthEntryComponents_emailWrapper:after{background-image:url(../../img/element-icons/email-prompt.1d04dfe.svg);background-repeat:no-repeat;background-position:50%;background-size:contain;top:-25px}.mx_InteractiveAuthEntryComponents_msisdnWrapper{text-align:center}.mx_InteractiveAuthEntryComponents_msisdnEntry{font-size:200%;font-weight:700;border:1px solid #c7c7c7;border-radius:3px;width:6em}.mx_InteractiveAuthEntryComponents_msisdnEntry:focus{border:1px solid #0dbd8b}.mx_InteractiveAuthEntryComponents_msisdnSubmit{margin-top:4px;margin-bottom:5px}.mx_InteractiveAuthEntryComponents_termsSubmit{margin-top:20px;margin-bottom:5px;display:block;width:100%}.mx_InteractiveAuthEntryComponents_msisdnSubmit:disabled{background-color:#747474;cursor:default}.mx_InteractiveAuthEntryComponents_termsSubmit:disabled{background-color:#92caad;cursor:default}.mx_InteractiveAuthEntryComponents_termsPolicy{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_InteractiveAuthEntryComponents_passwordSection{width:300px}.mx_InteractiveAuthEntryComponents_sso_buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin-top:20px}.mx_InteractiveAuthEntryComponents_sso_buttons .mx_AccessibleButton{margin-left:5px}.mx_AuthBody_language{width:100%}.mx_AuthBody_language .mx_Dropdown_input{border:none;font-size:1.4rem;font-weight:600;color:#4e5054;width:auto}.mx_AuthBody_language .mx_Dropdown_arrow{background:#4e5054}progress.mx_PassphraseField_progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;border:0;height:4px;position:absolute;top:-12px;border-radius:"2px"}progress.mx_PassphraseField_progress::-moz-progress-bar{border-radius:"2px"}progress.mx_PassphraseField_progress::-webkit-progress-bar,progress.mx_PassphraseField_progress::-webkit-progress-value{border-radius:"2px"}progress.mx_PassphraseField_progress{color:#ff4b55}progress.mx_PassphraseField_progress::-moz-progress-bar{background-color:#ff4b55}progress.mx_PassphraseField_progress::-webkit-progress-value{background-color:#ff4b55}progress.mx_PassphraseField_progress[value="2"],progress.mx_PassphraseField_progress[value="3"]{color:#ff812d}progress.mx_PassphraseField_progress[value="2"]::-moz-progress-bar,progress.mx_PassphraseField_progress[value="3"]::-moz-progress-bar{background-color:#ff812d}progress.mx_PassphraseField_progress[value="2"]::-webkit-progress-value,progress.mx_PassphraseField_progress[value="3"]::-webkit-progress-value{background-color:#ff812d}progress.mx_PassphraseField_progress[value="4"]{color:#0dbd8b}progress.mx_PassphraseField_progress[value="4"]::-moz-progress-bar{background-color:#0dbd8b}progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value{background-color:#0dbd8b}.mx_Welcome{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_Welcome.mx_WelcomePage_registrationDisabled .mx_ButtonCreateAccount{display:none}.mx_Welcome .mx_AuthBody_language{width:160px;margin-bottom:10px}.mx_BaseAvatar{position:relative;display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_BaseAvatar_initial{position:absolute;left:0;color:#fff;text-align:center;speak:none;pointer-events:none;font-weight:400}.mx_BaseAvatar_image{-o-object-fit:cover;object-fit:cover;border-radius:125px;vertical-align:top;background-color:#fff}.mx_DecoratedRoomAvatar,.mx_ExtraTile{position:relative}.mx_DecoratedRoomAvatar.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar,.mx_ExtraTile.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar{-webkit-mask-image:url(../../img/element-icons/roomlist/decorated-avatar-mask.76c407f.svg);mask-image:url(../../img/element-icons/roomlist/decorated-avatar-mask.76c407f.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon{position:absolute;bottom:-2px;right:-2px;margin:4px;width:8px;height:8px;border-radius:50%}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon:before{content:"";width:8px;height:8px;position:absolute;border-radius:8px}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_globe:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_globe:before{-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#737d8c;-webkit-mask-image:url(../../img/globe.8201f08.svg);mask-image:url(../../img/globe.8201f08.svg)}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_offline:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_offline:before{background-color:#e3e8f0}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_online:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_online:before{background-color:#0dbd8b}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_away:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_away:before{background-color:#d9b072}.mx_DecoratedRoomAvatar .mx_NotificationBadge,.mx_DecoratedRoomAvatar .mx_RoomTile_badgeContainer,.mx_ExtraTile .mx_NotificationBadge,.mx_ExtraTile .mx_RoomTile_badgeContainer{position:absolute;top:0;right:0;height:18px;width:18px}.mx_MessageComposer_avatar .mx_BaseAvatar{padding:2px;border:1px solid transparent;border-radius:100%}.mx_MessageComposer_avatar .mx_BaseAvatar_initial{left:2px}.mx_MemberStatusMessageAvatar_hasStatus .mx_BaseAvatar{border-color:#0dbd8b}@-webkit-keyframes shadow-pulse{0%{-webkit-box-shadow:0 0 0 0 rgba(13,189,139,.2);box-shadow:0 0 0 0 rgba(13,189,139,.2)}to{-webkit-box-shadow:0 0 0 6px rgba(13,189,139,0);box-shadow:0 0 0 6px rgba(13,189,139,0)}}@keyframes shadow-pulse{0%{-webkit-box-shadow:0 0 0 0 rgba(13,189,139,.2);box-shadow:0 0 0 0 rgba(13,189,139,.2)}to{-webkit-box-shadow:0 0 0 6px rgba(13,189,139,0);box-shadow:0 0 0 6px rgba(13,189,139,0)}}.mx_PulsedAvatar img{-webkit-animation:shadow-pulse 1s infinite;animation:shadow-pulse 1s infinite}.mx_WidgetAvatar{border-radius:4px}.mx_BetaCard{margin-bottom:20px;padding:24px;background-color:#f4f6fa;border-radius:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_BetaCard>div .mx_BetaCard_title{font-weight:600;font-size:1.8rem;line-height:2.2rem;color:#2e2f32;margin:4px 0 14px}.mx_BetaCard>div .mx_BetaCard_title .mx_BetaCard_betaPill{margin-left:12px}.mx_BetaCard>div .mx_BetaCard_caption{font-size:1.5rem;line-height:2rem;color:#737d8c;margin-bottom:20px}.mx_BetaCard>div .mx_AccessibleButton{display:block;margin:12px 0;padding:7px 40px;width:auto}.mx_BetaCard>div .mx_BetaCard_disclaimer{font-size:1.2rem;line-height:1.5rem;color:#737d8c;margin-top:20px}.mx_BetaCard>img{margin:auto 0 auto 20px;width:300px;-o-object-fit:contain;object-fit:contain;height:100%}.mx_BetaCard_betaPill{background-color:#238cf5;padding:4px 10px;border-radius:8px;text-transform:uppercase;font-size:12px;line-height:15px;color:#fff;display:inline-block;vertical-align:text-bottom}.mx_BetaCard_betaPill.mx_BetaCard_betaPill_clickable{cursor:pointer}.mx_BetaDot{border-radius:50%;margin:10px;height:12px;width:12px;-webkit-transform:scale(1);transform:scale(1);background:#238cf5;-webkit-box-shadow:0 0 0 0 #238cf5;box-shadow:0 0 0 0 #238cf5;-webkit-animation:mx_Beta_bluePulse 2s infinite;animation:mx_Beta_bluePulse 2s infinite;-webkit-animation-iteration-count:20;animation-iteration-count:20}@-webkit-keyframes mx_Beta_bluePulse{0%{-webkit-transform:scale(.95);transform:scale(.95);-webkit-box-shadow:0 0 0 0 rgba(35,140,245,.7);box-shadow:0 0 0 0 rgba(35,140,245,.7)}70%{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:0 0 0 10px rgba(35,140,245,0);box-shadow:0 0 0 10px rgba(35,140,245,0)}to{-webkit-transform:scale(.95);transform:scale(.95);-webkit-box-shadow:0 0 0 0 rgba(35,140,245,0);box-shadow:0 0 0 0 rgba(35,140,245,0)}}@keyframes mx_Beta_bluePulse{0%{-webkit-transform:scale(.95);transform:scale(.95);-webkit-box-shadow:0 0 0 0 rgba(35,140,245,.7);box-shadow:0 0 0 0 rgba(35,140,245,.7)}70%{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:0 0 0 10px rgba(35,140,245,0);box-shadow:0 0 0 10px rgba(35,140,245,0)}to{-webkit-transform:scale(.95);transform:scale(.95);-webkit-box-shadow:0 0 0 0 rgba(35,140,245,0);box-shadow:0 0 0 0 rgba(35,140,245,0)}}.mx_CallContextMenu_item{width:205px;height:40px;padding-left:16px;line-height:40px;vertical-align:center}.mx_IconizedContextMenu{min-width:146px}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList>*{padding-left:20px;padding-right:20px}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_optionList_notFirst:before,.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:nth-child(n+2):before{border-top:1px solid #2e2f32;opacity:.1;content:"";width:100%;position:absolute;left:0}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:first-child .mx_AccessibleButton:first-child{border-radius:8px 8px 0 0}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:last-child .mx_AccessibleButton:last-child{border-radius:0 0 8px 8px}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton{padding-top:12px;padding-bottom:12px;text-decoration:none;color:#2e2f32;font-size:1.5rem;line-height:2.4rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton:hover{background-color:#f5f8fa}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_AccessibleButton_disabled{opacity:.5;cursor:not-allowed}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton .mx_IconizedContextMenu_icon,.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton img{width:16px;min-width:16px;max-width:16px}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton span.mx_IconizedContextMenu_label{width:100%;-webkit-box-flex:1;-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton .mx_IconizedContextMenu_icon+.mx_IconizedContextMenu_label{padding-left:14px}.mx_IconizedContextMenu .mx_IconizedContextMenu_icon{position:relative;width:16px;height:16px}.mx_IconizedContextMenu .mx_IconizedContextMenu_icon:before{content:"";width:16px;height:16px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#2e2f32}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_AccessibleButton{color:#ff4b55!important}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_IconizedContextMenu_icon:before{background-color:#ff4b55}.mx_IconizedContextMenu .mx_IconizedContextMenu_active.mx_AccessibleButton,.mx_IconizedContextMenu .mx_IconizedContextMenu_active .mx_AccessibleButton{color:#0dbd8b!important}.mx_IconizedContextMenu .mx_IconizedContextMenu_active .mx_IconizedContextMenu_icon:before{background-color:#0dbd8b}.mx_IconizedContextMenu.mx_IconizedContextMenu_compact .mx_IconizedContextMenu_optionList>*{padding:8px 16px 8px 11px}.mx_IconizedContextMenu .mx_IconizedContextMenu_checked{margin-left:16px;margin-right:-5px}.mx_IconizedContextMenu .mx_IconizedContextMenu_checked:before{-webkit-mask-image:url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);mask-image:url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg)}.mx_MessageContextMenu{padding:6px}.mx_MessageContextMenu_field{display:block;padding:3px 6px;cursor:pointer;white-space:nowrap}.mx_MessageContextMenu_field.mx_MessageContextMenu_fieldSet{font-weight:700}.mx_StatusMessageContextMenu{padding:10px}.mx_StatusMessageContextMenu_form{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}input.mx_StatusMessageContextMenu_message{border-radius:4px;border:1px solid #e7e7e7;padding:6.5px 11px;background-color:#fff;font-weight:400;margin:0 0 10px}.mx_StatusMessageContextMenu_message::-webkit-input-placeholder{color:#61708b}.mx_StatusMessageContextMenu_message::-moz-placeholder{color:#61708b}.mx_StatusMessageContextMenu_message:-ms-input-placeholder{color:#61708b}.mx_StatusMessageContextMenu_message::-ms-input-placeholder{color:#61708b}.mx_StatusMessageContextMenu_message::placeholder{color:#61708b}.mx_StatusMessageContextMenu_actionContainer{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_StatusMessageContextMenu_clear,.mx_StatusMessageContextMenu_submit{vertical-align:middle;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;cursor:pointer;display:inline-block;outline:none;-ms-flex-item-align:start;align-self:start;font-size:1.2rem;padding:6px 1em;border:1px solid transparent;margin-right:10px}.mx_StatusMessageContextMenu_submit[disabled]{opacity:.49}.mx_StatusMessageContextMenu_clear{color:#ff4b55;background-color:transparent;border:1px solid #ff4b55}.mx_StatusMessageContextMenu_actionContainer .mx_Spinner{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_TagTileContextMenu_item{padding:8px 20px 8px 8px;cursor:pointer;white-space:nowrap;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1.6rem}.mx_TagTileContextMenu_item:before{content:"";height:15px;width:15px;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;margin-right:8px}.mx_TagTileContextMenu_viewCommunity:before{-webkit-mask-image:url(../../img/element-icons/view-community.0cad1a5.svg);mask-image:url(../../img/element-icons/view-community.0cad1a5.svg)}.mx_TagTileContextMenu_hideCommunity:before{-webkit-mask-image:url(../../img/element-icons/hide.2b52315.svg);mask-image:url(../../img/element-icons/hide.2b52315.svg)}.mx_TagTileContextMenu_separator{margin-top:0;margin-bottom:0;border-style:none;border-top:1px solid;border-color:#e7e7e7}.mx_AddExistingToSpaceDialog_wrapper .mx_Dialog{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_AddExistingToSpace .mx_SearchBox{margin:0 0 15px;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0}.mx_AddExistingToSpace .mx_AddExistingToSpace_content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_AddExistingToSpace .mx_AddExistingToSpace_noResults{display:block;margin-top:24px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section:not(:first-child){margin-top:24px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section>h3{margin:0;color:#737d8c;font-size:1.2rem;font-weight:600;line-height:1.5rem}.mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AddExistingToSpace_entry{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AddExistingToSpace_entry .mx_DecoratedRoomAvatar{margin-right:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AddExistingToSpace_entry .mx_AddExistingToSpace_entry_name{font-size:1.5rem;line-height:30px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AddExistingToSpace_entry .mx_Checkbox{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_AddExistingToSpace .mx_AddExistingToSpace_section_spaces .mx_BaseAvatar{margin-right:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section_spaces .mx_BaseAvatar_image{border-radius:8px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section_experimental{position:relative;border-radius:8px;margin:12px 0;padding:8px 8px 8px 42px;background-color:#f3f8fd;font-size:1.2rem;line-height:1.5rem;color:#737d8c}.mx_AddExistingToSpace .mx_AddExistingToSpace_section_experimental:before{content:"";position:absolute;left:10px;top:calc(50% - 8px);height:16px;width:16px;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);-webkit-mask-position:center;mask-position:center}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:20px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;font-size:1.2rem;line-height:1.5rem;color:#737d8c}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_ProgressBar{height:8px;width:100%;border-radius:8px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_ProgressBar::-moz-progress-bar{border-radius:8px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_ProgressBar::-webkit-progress-bar,.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_ProgressBar::-webkit-progress-value{border-radius:8px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_AddExistingToSpace_progressText{margin-top:8px;font-size:1.5rem;line-height:2.4rem;color:#2e2f32}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span>*{vertical-align:middle}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error{padding-left:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error>img{-ms-flex-item-align:center;align-self:center}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error .mx_AddExistingToSpace_errorHeading{font-weight:600;font-size:1.5rem;line-height:1.8rem;color:#ff4b55}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error .mx_AddExistingToSpace_errorCaption{margin-top:4px;font-size:1.2rem;line-height:1.5rem;color:#2e2f32}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AccessibleButton{display:inline-block;-ms-flex-item-align:center;align-self:center}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AccessibleButton_kind_primary{padding:8px 36px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_retryButton{margin-left:12px;padding-left:24px;position:relative}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_retryButton:before{content:"";position:absolute;background-color:#2e2f32;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/retry.6cd23ad.svg);mask-image:url(../../img/element-icons/retry.6cd23ad.svg);width:18px;height:18px;left:0}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AccessibleButton_kind_link{padding:0}.mx_AddExistingToSpaceDialog{width:480px;color:#2e2f32;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;min-height:0;height:80vh}.mx_AddExistingToSpaceDialog,.mx_AddExistingToSpaceDialog .mx_Dialog_title{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_BaseAvatar_image{border-radius:8px;margin:0;vertical-align:unset}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_BaseAvatar{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin:auto 16px auto 5px;vertical-align:middle}.mx_AddExistingToSpaceDialog .mx_Dialog_title>div>h1{font-weight:600;font-size:1.8rem;line-height:2.2rem;margin:0}.mx_AddExistingToSpaceDialog .mx_Dialog_title>div .mx_AddExistingToSpaceDialog_onlySpace{color:#737d8c;font-size:1.5rem;line-height:2.4rem}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input{border:none}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input>.mx_Dropdown_option{padding-left:0;-webkit-box-flex:unset;-ms-flex:unset;flex:unset;height:unset;color:#737d8c;font-size:1.5rem;line-height:2.4rem}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input>.mx_Dropdown_option .mx_BaseAvatar{display:none}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input .mx_Dropdown_menu .mx_AddExistingToSpaceDialog_dropdownOptionActive{color:#0dbd8b;padding-right:32px;position:relative}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input .mx_Dropdown_menu .mx_AddExistingToSpaceDialog_dropdownOptionActive:before{content:"";width:20px;height:20px;top:8px;right:0;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#0dbd8b;-webkit-mask-image:url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);mask-image:url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg)}.mx_AddExistingToSpaceDialog .mx_AddExistingToSpace{display:contents}.mx_AddressPickerDialog a:hover,.mx_AddressPickerDialog a:link,.mx_AddressPickerDialog a:visited{color:#0dbd8b;text-decoration:none}.mx_AddressPickerDialog_input,.mx_AddressPickerDialog_input:focus{height:26px;font-size:1.4rem;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;padding-left:12px;padding-right:12px;margin:0!important;border:0!important;outline:0!important;width:1000%;resize:none;overflow:hidden;vertical-align:middle;-webkit-box-sizing:border-box;box-sizing:border-box;word-wrap:nowrap}.mx_AddressPickerDialog .mx_Dialog_content{min-height:50px}.mx_AddressPickerDialog_inputContainer{border-radius:3px;border:1px solid #e7e7e7;line-height:3.6rem;padding:1px 4px;max-height:150px;overflow-x:hidden;overflow-y:auto}.mx_AddressPickerDialog_error{margin-top:10px;color:#ff4b55}.mx_AddressPickerDialog_cancel{position:absolute;right:11px;top:13px;cursor:pointer}.mx_AddressPickerDialog_cancel object{pointer-events:none}.mx_AddressPickerDialog_identityServer{margin-top:1em}.mx_AnalyticsModal table{margin:10px 0}.mx_BetaFeedbackDialog .mx_BetaFeedbackDialog_subheading{color:#2e2f32;font-size:1.4rem;line-height:2rem;margin-bottom:24px}.mx_BetaFeedbackDialog .mx_AccessibleButton_kind_link{padding:0;font-size:inherit;line-height:inherit}.mx_BugReportDialog .mx_BugReportDialog_download .mx_AccessibleButton_kind_link{padding-left:0}.mx_ChangelogDialog_content{max-height:300px;overflow:auto}.mx_ChangelogDialog_li{padding:.2em}.mx_ChatCreateOrReuseDialog .mx_ChatCreateOrReuseDialog_tiles{margin-top:24px}.mx_ChatCreateOrReuseDialog .mx_Dialog_content{margin-bottom:24px;min-height:100px}.mx_ChatCreateOrReuseDialog .mx_RoomTile_badge{display:none}.mx_ChatCreateOrReuseDialog_profile{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_ChatCreateOrReuseDialog_profile_name{padding:14px}.mx_CommunityPrototypeInviteDialog.mx_Dialog_fixedWidth{width:360px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content{margin-bottom:0}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_people{position:relative;margin-bottom:4px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_people .mx_AccessibleButton{display:inline-block;background-color:#ddd;border-radius:4px;padding:3px 5px;font-size:1.2rem;float:right}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_morePeople{margin-top:8px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person{position:relative;margin-top:4px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person>*{vertical-align:middle}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_Checkbox{position:absolute;right:0;top:calc(50% - 8px);width:16px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_CommunityPrototypeInviteDialog_personIdentifiers{display:inline-block}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_CommunityPrototypeInviteDialog_personIdentifiers>*{display:block}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_CommunityPrototypeInviteDialog_personIdentifiers .mx_CommunityPrototypeInviteDialog_personName{font-weight:600;font-size:1.4rem;color:#2e2f32;margin-left:7px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_CommunityPrototypeInviteDialog_personIdentifiers .mx_CommunityPrototypeInviteDialog_personId{font-size:1.2rem;color:#61708b;margin-left:7px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_primaryButton{display:block;font-size:1.3rem;line-height:20px;height:20px;margin-top:24px}.mx_ConfirmUserActionDialog .mx_Dialog_content{min-height:48px;margin-bottom:24px}.mx_ConfirmUserActionDialog_avatar{float:left;margin-right:20px;margin-top:-2px}.mx_ConfirmUserActionDialog_name{font-size:1.8rem}.mx_ConfirmUserActionDialog_userId{font-size:1.3rem}.mx_ConfirmUserActionDialog_reasonField{font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#2e2f32;background-color:#fff;border-radius:3px;border:1px solid #e7e7e7;line-height:3.6rem;padding:1px 16px;margin-bottom:24px;width:90%}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin-bottom:12px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName{-ms-flex-preferred-size:66.66%;flex-basis:66.66%;padding-right:100px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_Field input{font-size:1.6rem;line-height:2rem}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_subtext{display:block;color:#61708b;margin-bottom:16px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_subtext:last-child{margin-top:16px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_subtext.mx_CreateCommunityPrototypeDialog_subtext_error{color:#ff4b55}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_communityId{position:relative}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_communityId .mx_InfoTooltip{float:right}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_AccessibleButton{display:block;height:32px;font-size:1.6rem;line-height:32px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar{-ms-flex-preferred-size:33.33%;flex-basis:33.33%}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer{margin-top:12px;margin-bottom:20px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer .mx_CreateCommunityPrototypeDialog_avatar,.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer .mx_CreateCommunityPrototypeDialog_placeholderAvatar{width:96px;height:96px;border-radius:96px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer .mx_CreateCommunityPrototypeDialog_placeholderAvatar{background-color:#368bd6}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer .mx_CreateCommunityPrototypeDialog_placeholderAvatar:before{display:inline-block;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:96px;mask-size:96px;width:96px;height:96px;-webkit-mask-position:center;mask-position:center;content:"";vertical-align:middle;-webkit-mask-image:url(../../img/element-icons/add-photo.c0b4c3b.svg);mask-image:url(../../img/element-icons/add-photo.c0b4c3b.svg)}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_tip>b,.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_tip>span{display:block;color:#61708b}.mx_CreateGroupDialog_inputRow{margin-top:10px;margin-bottom:10px}.mx_CreateGroupDialog_label{text-align:left;padding-bottom:12px}.mx_CreateGroupDialog_input{font-size:1.5rem;border-radius:3px;border:1px solid #e7e7e7;padding:9px;color:#2e2f32;background-color:#fff}.mx_CreateGroupDialog_input_hasPrefixAndSuffix{border-radius:0}.mx_CreateGroupDialog_input_group{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_CreateGroupDialog_prefix,.mx_CreateGroupDialog_suffix{padding:0 5px;line-height:3.7rem;background-color:#e3e8f0;border:1px solid #e7e7e7;text-align:center}.mx_CreateGroupDialog_prefix{border-right:0;border-radius:3px 0 0 3px}.mx_CreateGroupDialog_suffix{border-left:0;border-radius:0 3px 3px 0}.mx_CreateRoomDialog_details{margin-top:15px}.mx_CreateRoomDialog_details .mx_CreateRoomDialog_details_summary{outline:none;list-style:none;font-weight:600;cursor:pointer;color:#0dbd8b}.mx_CreateRoomDialog_details .mx_CreateRoomDialog_details_summary::-webkit-details-marker{display:none}.mx_CreateRoomDialog_details>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;margin:5px 0}.mx_CreateRoomDialog_details>div input[type=checkbox]{margin-right:10px}.mx_CreateRoomDialog_label{text-align:left;padding-bottom:12px}.mx_CreateRoomDialog_input_container{padding-right:20px}.mx_CreateRoomDialog_input{font-size:1.5rem;border-radius:3px;border:1px solid #e7e7e7;padding:9px;color:#2e2f32;background-color:#fff;width:100%}.mx_CreateRoomDialog_aliasContainer{display:-webkit-box;display:-ms-flexbox;display:flex;margin:10px 0}.mx_CreateRoomDialog_aliasContainer .mx_RoomAliasField{margin:0}.mx_CreateRoomDialog.mx_Dialog_fixedWidth{width:450px}.mx_CreateRoomDialog .mx_Dialog_content{margin-bottom:40px}.mx_CreateRoomDialog .mx_Field_input label,.mx_CreateRoomDialog p{color:#61708b}.mx_CreateRoomDialog .mx_SettingsFlag{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_CreateRoomDialog .mx_SettingsFlag_label{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0;font-weight:600}.mx_CreateRoomDialog .mx_ToggleSwitch{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-left:30px}.mx_CreateRoomDialog .mx_CreateRoomDialog_topic{margin-bottom:36px}.mx_CreateRoomDialog .mx_Dialog_content>.mx_SettingsFlag{margin-top:24px}.mx_CreateRoomDialog p{margin:0 85px 0 0;font-size:1.2rem}.mx_DeactivateAccountDialog .mx_Dialog_content{margin-bottom:30px}.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section{margin-top:60px}.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section .mx_Field{width:300px}.mx_DevTools_content{margin:10px 0}.mx_DevTools_ServersInRoomList_button{cursor:default!important}.mx_DevTools_RoomStateExplorer_query{margin-bottom:10px}.mx_DevTools_RoomStateExplorer_button,.mx_DevTools_ServersInRoomList_button{margin-bottom:10px;width:100%}.mx_DevTools_label_left{float:left}.mx_DevTools_label_right{float:right}.mx_DevTools_label_bottom{clear:both;border-bottom:1px solid #e5e5e5}.mx_DevTools_inputRow{display:table-row}.mx_DevTools_inputLabelCell{display:table-cell;font-weight:700;padding-right:24px}.mx_DevTools_inputCell{display:table-cell;width:240px}.mx_DevTools_inputCell input{display:inline-block;border:0;border-bottom:1px solid hsla(0,0%,59.2%,.5);padding:0;width:240px;color:rgba(74,74,74,.9);font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.6rem}.mx_DevTools_textarea{font-size:1.2rem;max-width:684px;min-height:250px;padding:10px}.mx_DevTools_eventTypeStateKeyGroup{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mx_DevTools_content .mx_Field_input:first-of-type{margin-right:42px}.mx_DevTools_tgl{display:none}.mx_DevTools_tgl,.mx_DevTools_tgl *,.mx_DevTools_tgl+.mx_DevTools_tgl-btn,.mx_DevTools_tgl:after,.mx_DevTools_tgl :after,.mx_DevTools_tgl:before,.mx_DevTools_tgl :before{-webkit-box-sizing:border-box;box-sizing:border-box}.mx_DevTools_tgl+.mx_DevTools_tgl-btn::-moz-selection,.mx_DevTools_tgl::-moz-selection,.mx_DevTools_tgl ::-moz-selection,.mx_DevTools_tgl:after::-moz-selection,.mx_DevTools_tgl :after::-moz-selection,.mx_DevTools_tgl:before::-moz-selection,.mx_DevTools_tgl :before::-moz-selection{background:none}.mx_DevTools_tgl+.mx_DevTools_tgl-btn::selection,.mx_DevTools_tgl::selection,.mx_DevTools_tgl ::selection,.mx_DevTools_tgl:after::selection,.mx_DevTools_tgl :after::selection,.mx_DevTools_tgl:before::selection,.mx_DevTools_tgl :before::selection{background:none}.mx_DevTools_tgl+.mx_DevTools_tgl-btn{outline:0;display:block;width:7em;height:2em;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_DevTools_tgl+.mx_DevTools_tgl-btn:after,.mx_DevTools_tgl+.mx_DevTools_tgl-btn:before{position:relative;display:block;content:"";width:50%;height:100%}.mx_DevTools_tgl+.mx_DevTools_tgl-btn:after{left:0}.mx_DevTools_tgl+.mx_DevTools_tgl-btn:before{display:none}.mx_DevTools_tgl:checked+.mx_DevTools_tgl-btn:after{left:50%}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn{padding:2px;-webkit-transition:all .2s ease;transition:all .2s ease;font-family:sans-serif;-webkit-perspective:100px;perspective:100px}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:after,.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:before{display:inline-block;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%;text-align:center;position:absolute;line-height:2em;font-weight:700;color:#fff;top:0;left:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:4px}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:after{content:attr(data-tg-on);background:#02c66f;-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:before{background:#ff3a19;content:attr(data-tg-off)}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:active:before{-webkit-transform:rotateY(-20deg);transform:rotateY(-20deg)}.mx_DevTools_tgl-flip:checked+.mx_DevTools_tgl-btn:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.mx_DevTools_tgl-flip:checked+.mx_DevTools_tgl-btn:after{-webkit-transform:rotateY(0);transform:rotateY(0);left:0;background:#7fc6a6}.mx_DevTools_tgl-flip:checked+.mx_DevTools_tgl-btn:active:after{-webkit-transform:rotateY(20deg);transform:rotateY(20deg)}.mx_DevTools_VerificationRequest{border:1px solid #ccc;border-radius:3px;padding:1px 5px;margin-bottom:6px;font-family:Inconsolata,Twemoji,Apple Color Emoji,Segoe UI Emoji,Courier,monospace,Noto Color Emoji}.mx_DevTools_VerificationRequest dl{display:grid;grid-template-columns:-webkit-max-content auto;grid-template-columns:max-content auto;margin:0}.mx_DevTools_VerificationRequest dd{grid-column-start:2}.mx_DevTools_VerificationRequest dd:empty{color:#666}.mx_DevTools_VerificationRequest dd:empty:after{content:"(empty)"}.mx_DevTools_VerificationRequest dt{font-weight:700;grid-column-start:1}.mx_DevTools_VerificationRequest dt:after{content:":"}.mx_DevTools_SettingsExplorer table{width:100%;table-layout:fixed;border-collapse:collapse}.mx_DevTools_SettingsExplorer table th{border-bottom:1px solid #0dbd8b;text-align:left}.mx_DevTools_SettingsExplorer table td,.mx_DevTools_SettingsExplorer table th{width:360px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_DevTools_SettingsExplorer table td+td,.mx_DevTools_SettingsExplorer table th+th{width:auto}.mx_DevTools_SettingsExplorer table tr:hover{background-color:rgba(13,189,139,.5)}.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_mutable{background-color:#0dbd8b}.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_immutable{background-color:#ff4b55}.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_edit{float:right;margin-right:16px}.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_warning{border:2px solid #ff4b55;border-radius:4px;padding:4px;margin-bottom:8px}.mx_EditCommunityPrototypeDialog.mx_Dialog_fixedWidth{width:360px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content{margin-bottom:12px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_AccessibleButton.mx_AccessibleButton_kind_primary{display:block;height:32px;font-size:1.6rem;line-height:32px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_rowAvatar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer{margin-top:20px;margin-bottom:20px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer .mx_EditCommunityPrototypeDialog_avatar,.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer .mx_EditCommunityPrototypeDialog_placeholderAvatar{width:96px;height:96px;border-radius:96px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer .mx_EditCommunityPrototypeDialog_placeholderAvatar{background-color:#368bd6}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer .mx_EditCommunityPrototypeDialog_placeholderAvatar:before{display:inline-block;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:96px;mask-size:96px;width:96px;height:96px;-webkit-mask-position:center;mask-position:center;content:"";vertical-align:middle;-webkit-mask-image:url(../../img/element-icons/add-photo.c0b4c3b.svg);mask-image:url(../../img/element-icons/add-photo.c0b4c3b.svg)}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_tip{margin-left:20px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_tip>b,.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_tip>span{display:block;color:#61708b}.mx_FeedbackDialog hr{margin:24px 0;border-color:#e7e7e7}.mx_FeedbackDialog .mx_Dialog_content{margin-bottom:24px}.mx_FeedbackDialog .mx_Dialog_content>h2{margin-bottom:32px}.mx_FeedbackDialog .mx_FeedbackDialog_section{position:relative;padding-left:52px}.mx_FeedbackDialog .mx_FeedbackDialog_section>p{color:#8d99a5}.mx_FeedbackDialog .mx_FeedbackDialog_section .mx_AccessibleButton_kind_link{padding:0;font-size:inherit}.mx_FeedbackDialog .mx_FeedbackDialog_section .mx_AccessibleButton_kind_link,.mx_FeedbackDialog .mx_FeedbackDialog_section a{color:#0dbd8b;text-decoration:underline}.mx_FeedbackDialog .mx_FeedbackDialog_section:after,.mx_FeedbackDialog .mx_FeedbackDialog_section:before{content:"";position:absolute;width:40px;height:40px;left:0;top:0}.mx_FeedbackDialog .mx_FeedbackDialog_section:before{background-color:#c1c6cd;border-radius:20px}.mx_FeedbackDialog .mx_FeedbackDialog_section:after{background:#fff;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:24px;mask-size:24px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mx_FeedbackDialog .mx_FeedbackDialog_reportBug:after{-webkit-mask-image:url(../../img/feather-customised/bug.3dc7afa.svg);mask-image:url(../../img/feather-customised/bug.3dc7afa.svg)}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:20px;-webkit-transition:font-size 1s,border .5s;transition:font-size 1s,border .5s;border-radius:50%;border:2px solid transparent;margin-top:12px;margin-bottom:24px;vertical-align:top;cursor:pointer}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton input[type=radio]+div{display:none}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton .mx_RadioButton_content{background:#c1c6cd;width:40px;height:40px;text-align:center;line-height:40px;border-radius:20px;margin:5px}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton .mx_RadioButton_spacer{display:none}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton+.mx_RadioButton{margin-left:16px}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton_checked{font-size:24px;border-color:#0dbd8b}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp:after{-webkit-mask-image:url(../../img/element-icons/feedback.a91241e.svg);mask-image:url(../../img/element-icons/feedback.a91241e.svg)}.mx_GroupAddressPicker_checkboxContainer{margin-top:10px;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_HostSignupDialog{width:90vw;max-width:580px;height:80vh;max-height:600px;background-color:#fff}.mx_HostSignupDialog .mx_HostSignupDialog_info{text-align:center}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_content_top{margin-bottom:24px}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_paragraphs{text-align:left;padding-left:25%;padding-right:25%}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_buttons{margin-bottom:24px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_buttons button{padding:12px;margin:0 16px}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_footer img{padding-right:5px}.mx_HostSignupDialog iframe{width:100%;height:100%;border:none;background-color:#fff;min-height:540px}.mx_HostSignupDialog_text_dark{color:#2e2f32}.mx_HostSignupDialog_text_light{color:#737d8c}.mx_HostSignup_maximize_button{-webkit-mask:url(../../img/feather-customised/maximise.dc32127.svg);mask:url(../../img/feather-customised/maximise.dc32127.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;right:10px}.mx_HostSignup_maximize_button,.mx_HostSignup_minimize_button{width:14px;height:14px;background-color:#c1c1c1;cursor:pointer;position:absolute;top:10px}.mx_HostSignup_minimize_button{-webkit-mask:url(../../img/feather-customised/minimise.aec9142.svg);mask:url(../../img/feather-customised/minimise.aec9142.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;right:25px}.mx_HostSignup_persisted{width:90vw;max-width:580px;height:80vh;max-height:600px;top:0;left:0;position:fixed;display:none}.mx_HostSignupDialog_minimized{position:fixed;bottom:80px;right:26px;width:314px;height:217px;overflow:hidden}.mx_HostSignupDialog_minimized.mx_Dialog{padding:12px}.mx_HostSignupDialog_minimized .mx_Dialog_title{text-align:left!important;padding-left:20px;font-size:1.5rem}.mx_HostSignupDialog_minimized iframe{width:100%;height:100%;border:none;background-color:#fff}.mx_IncomingSasDialog_opponentProfile_image{position:relative}.mx_IncomingSasDialog_opponentProfile h2{display:inline-block;margin-left:10px}.mx_InviteDialog_addressBar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.mx_InviteDialog_addressBar .mx_InviteDialog_editor{-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;background-color:#f3f8fd;border-radius:4px;min-height:25px;padding-left:8px;overflow-x:hidden;overflow-y:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mx_InviteDialog_addressBar .mx_InviteDialog_editor .mx_InviteDialog_userTile{margin:6px 6px 0 0;display:inline-block;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}.mx_InviteDialog_addressBar .mx_InviteDialog_editor>input[type=text]{margin:6px 0!important;height:24px;line-height:2.4rem;font-size:1.4rem;padding-left:12px;border:0!important;outline:0!important;resize:none;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:40%;-webkit-box-flex:1!important;-ms-flex:1!important;flex:1!important;color:#2e2f32!important}.mx_InviteDialog_addressBar .mx_InviteDialog_goButton{min-width:48px;margin-left:10px;height:25px;line-height:2.5rem}.mx_InviteDialog_addressBar .mx_InviteDialog_buttonAndSpinner .mx_Spinner{width:20px;height:20px;margin-left:5px;display:inline-block;vertical-align:middle}.mx_InviteDialog_section{padding-bottom:10px}.mx_InviteDialog_section h3{font-size:1.2rem;color:#61708b;font-weight:700;text-transform:uppercase}.mx_InviteDialog_section .mx_InviteDialog_subname{margin-bottom:10px;margin-top:-10px;font-size:1.2rem;color:#61708b}.mx_InviteDialog_roomTile{cursor:pointer;padding:5px 10px}.mx_InviteDialog_roomTile:hover{background-color:#f3f8fd;border-radius:4px}.mx_InviteDialog_roomTile *{vertical-align:middle}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_avatarStack{display:inline-block;position:relative;width:36px;height:36px}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_avatarStack>*{position:absolute;top:0;left:0}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_selected{width:36px;height:36px;border-radius:36px;background-color:#368bd6;display:inline-block;position:relative}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_selected:before{content:"";width:24px;height:24px;grid-column:1;grid-row:1;-webkit-mask-image:url(../../img/feather-customised/check.5745b4e.svg);mask-image:url(../../img/feather-customised/check.5745b4e.svg);-webkit-mask-size:100%;mask-size:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;position:absolute;top:6px;left:6px;background-color:#fff}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_nameStack{display:inline-block}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_name{font-weight:600;font-size:1.4rem;color:#2e2f32;margin-left:7px}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_userId{font-size:1.2rem;color:#61708b;margin-left:7px}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_time{text-align:right;font-size:1.2rem;color:#61708b;float:right;line-height:3.6rem}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_highlight{font-weight:900}.mx_InviteDialog_userTile{margin-right:8px}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill{background-color:#368bd6;border-radius:12px;display:inline-block;height:24px;line-height:2.4rem;padding-left:8px;padding-right:8px;color:#fff}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_avatar{border-radius:20px;position:relative;left:-5px;top:2px}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_name,.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill img.mx_InviteDialog_userTile_avatar{vertical-align:top}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_threepidAvatar{background-color:#fff}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_remove{display:inline-block;margin-left:4px}.mx_InviteDialog{height:590px;padding-left:20px}.mx_InviteDialog_userSections{margin-top:10px;overflow-y:auto;padding-right:45px;height:455px}.mx_InviteDialog_addressBar,.mx_InviteDialog_helpText{margin-right:45px}.mx_InviteDialog_helpText .mx_AccessibleButton_kind_link{padding:0}.mx_KeyboardShortcutsDialog{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-bottom:-50px;max-height:1100px}.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_category{width:33.3333%;margin:0 0 40px}.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_category>div{padding-left:5px}.mx_KeyboardShortcutsDialog h3{margin:0 0 10px}.mx_KeyboardShortcutsDialog h5{margin:15px 0 5px;font-weight:400}.mx_KeyboardShortcutsDialog kbd{padding:5px;border-radius:4px;background-color:#f3f8fd;margin-right:5px;min-width:20px;text-align:center;display:inline-block;border:1px solid #e9edf1;-webkit-box-shadow:0 2px #e9edf1;box-shadow:0 2px #e9edf1;margin-bottom:4px;text-transform:capitalize}.mx_KeyboardShortcutsDialog kbd+kbd{margin-left:5px}.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_inline div{display:inline}.mx_MessageEditHistoryDialog .mx_Dialog_header>.mx_Dialog_title{text-align:center}.mx_MessageEditHistoryDialog{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-height:60vh}.mx_MessageEditHistoryDialog_scrollPanel{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.mx_MessageEditHistoryDialog_error{color:#ff4b55;text-align:center}.mx_MessageEditHistoryDialog_edits{list-style-type:none;font-size:1.4rem;padding:0;color:#2e2f32}.mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_deletion,.mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_insertion{padding:0 2px}.mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_deletion{color:#ff4c55;background-color:rgba(255,76,85,.1);text-decoration:line-through}.mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_insertion{color:#1aa97b;background-color:rgba(26,169,123,.1);text-decoration:underline}.mx_MessageEditHistoryDialog_edits .mx_EventTile_content,.mx_MessageEditHistoryDialog_edits .mx_EventTile_line{margin-right:0}.mx_MessageEditHistoryDialog_edits .mx_MessageActionBar .mx_AccessibleButton{font-size:1rem;padding:0 8px}.mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning{margin-bottom:24px}.mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning>img{vertical-align:middle;margin-right:8px}.mx_ModalWidgetDialog .mx_ModalWidgetDialog_buttons{float:right;margin-top:24px}.mx_ModalWidgetDialog .mx_ModalWidgetDialog_buttons .mx_AccessibleButton+.mx_AccessibleButton{margin-left:8px}.mx_ModalWidgetDialog iframe{width:100%;height:450px;border:0;border-radius:8px}.mx_NewSessionReviewDialog_header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:0}.mx_NewSessionReviewDialog_headerIcon{width:24px;height:24px;margin-right:4px;position:relative}.mx_NewSessionReviewDialog_deviceName{font-weight:600}.mx_NewSessionReviewDialog_deviceID{font-size:1.2rem;color:#8d99a5}.mx_RegistrationEmailPromptDialog{width:417px}.mx_RegistrationEmailPromptDialog .mx_Dialog_content{margin-bottom:24px;color:#8d99a5}.mx_RegistrationEmailPromptDialog .mx_Dialog_primary{width:100%}.mx_RoomSettingsDialog_settingsIcon:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_RoomSettingsDialog_securityIcon:before{-webkit-mask-image:url(../../img/element-icons/security.66f2fa6.svg);mask-image:url(../../img/element-icons/security.66f2fa6.svg)}.mx_RoomSettingsDialog_rolesIcon:before{-webkit-mask-image:url(../../img/element-icons/room/settings/roles.bad9a9e.svg);mask-image:url(../../img/element-icons/room/settings/roles.bad9a9e.svg)}.mx_RoomSettingsDialog_notificationsIcon:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_RoomSettingsDialog_bridgesIcon:before{-webkit-mask-image:url(../../img/feather-customised/bridge.b2ca042.svg);mask-image:url(../../img/feather-customised/bridge.b2ca042.svg)}.mx_RoomSettingsDialog_warningIcon:before{-webkit-mask-image:url(../../img/element-icons/room/settings/advanced.e079c15.svg);mask-image:url(../../img/element-icons/room/settings/advanced.e079c15.svg)}.mx_RoomSettingsDialog .mx_Dialog_title{-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0 auto;padding-right:80px}.mx_RoomSettingsDialog .mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder:before{-webkit-mask:url(../../img/feather-customised/image.a8671b8.svg);mask:url(../../img/feather-customised/image.a8671b8.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:36px;mask-size:36px;-webkit-mask-position:center;mask-position:center}.mx_RoomSettingsDialog_BridgeList{padding:0}.mx_RoomSettingsDialog_BridgeList .mx_AccessibleButton{display:inline;margin:0;padding:0}.mx_RoomSettingsDialog_BridgeList li{list-style-type:none;padding:5px;margin-bottom:8px;border:1px solid transparent;border-radius:5px}.mx_RoomSettingsDialog_BridgeList li .column-icon{float:left;padding-right:10px}.mx_RoomSettingsDialog_BridgeList li .column-icon *{border-radius:5px;border:1px solid #e3e8f0}.mx_RoomSettingsDialog_BridgeList li .column-icon .noProtocolIcon{width:48px;height:48px;background:#e3e8f0;border-radius:5px}.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon{float:left;margin-right:5px}.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon img{border-radius:5px;border-width:1px;border-color:transparent}.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon span{left:auto}.mx_RoomSettingsDialog_BridgeList li .column-data{display:inline-block;width:85%}.mx_RoomSettingsDialog_BridgeList li .column-data>h3{margin-top:0;margin-bottom:0;font-size:16pt;color:#2e2f32}.mx_RoomSettingsDialog_BridgeList li .column-data>*{margin-top:4px;margin-bottom:0}.mx_RoomSettingsDialog_BridgeList li .column-data .workspace-channel-details{color:#2e2f32;font-weight:600}.mx_RoomSettingsDialog_BridgeList li .column-data .workspace-channel-details .channel{margin-left:5px}.mx_RoomSettingsDialog_BridgeList li .column-data .metadata{color:#61708b;margin-bottom:0;overflow-y:visible;text-overflow:ellipsis;white-space:normal;padding:0}.mx_RoomSettingsDialog_BridgeList li .column-data .metadata>li{padding:0;border:0}.mx_RoomUpgradeDialog{padding-right:70px}.mx_RoomUpgradeWarningDialog{max-width:38vw;width:38vw}.mx_RoomUpgradeWarningDialog .mx_SettingsFlag{font-weight:700}.mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_ToggleSwitch{display:inline-block;vertical-align:middle;margin-left:8px;float:right}.mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_SettingsFlag_label{display:inline-block;vertical-align:middle}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content{padding-right:85px;color:#2e2f32}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content hr{border-color:#2e2f32;opacity:.1;border-bottom:none}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content ul{padding:16px}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content ul li:nth-child(n+2){margin-top:16px}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timestamp{display:inline-block;width:115px;color:#61708b;line-height:24px;vertical-align:top}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline{display:inline-block;width:calc(100% - 155px)}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_timeline_header span{margin-left:8px;vertical-align:middle}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_txn{position:relative;margin-top:8px}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_txn .mx_ServerOfflineDialog_content_context_txn_desc{width:calc(100% - 100px)}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_txn .mx_AccessibleButton{float:right;padding:0}.mx_ServerPickerDialog{width:468px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_ServerPickerDialog .mx_Dialog_content{margin-bottom:0}.mx_ServerPickerDialog .mx_Dialog_content>p{color:#737d8c;font-size:1.4rem;margin:16px 0}.mx_ServerPickerDialog .mx_Dialog_content>p:first-of-type{margin-bottom:40px}.mx_ServerPickerDialog .mx_Dialog_content>p:last-of-type{margin:0 24px 24px}.mx_ServerPickerDialog .mx_Dialog_content>h4{font-size:1.5rem;font-weight:600;color:#737d8c;margin-left:8px}.mx_ServerPickerDialog .mx_Dialog_content>a{color:#0dbd8b;margin-left:8px}.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserverRadio input[type=radio]+div{margin-top:auto;margin-bottom:auto}.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver{border-top:none;border-left:none;border-right:none;border-radius:unset}.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver>input{padding-left:0}.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver>label{margin-left:0}.mx_ServerPickerDialog .mx_AccessibleButton_kind_primary{width:calc(100% - 64px);margin:0 8px;padding:15px 18px}.mx_SetEmailDialog_email_input{border-radius:3px;border:1px solid #e7e7e7;padding:9px;color:rgba(74,74,74,.9);background-color:#fff;font-size:1.5rem;width:100%;max-width:280px;margin-bottom:10px}.mx_SetEmailDialog_email_input:focus{outline:none;-webkit-box-shadow:none;box-shadow:none;border:1px solid #0dbd8b}.mx_RoomSettingsDialog,.mx_UserSettingsDialog{width:90vw;max-width:1000px;height:80vh}.mx_RoomSettingsDialog .mx_TabbedView,.mx_UserSettingsDialog .mx_TabbedView{top:65px}.mx_RoomSettingsDialog .mx_TabbedView .mx_SettingsTab,.mx_UserSettingsDialog .mx_TabbedView .mx_SettingsTab{-webkit-box-sizing:border-box;box-sizing:border-box;min-width:580px;padding-right:100px;padding-bottom:100px}.mx_RoomSettingsDialog .mx_Dialog_title,.mx_UserSettingsDialog .mx_Dialog_title{margin-bottom:24px}.mx_ShareDialog hr{margin-top:25px;margin-bottom:25px;border-color:#747474}.mx_ShareDialog_content{margin:10px 0}.mx_ShareDialog_matrixto{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;border-radius:5px;border:1px solid #747474;margin-bottom:10px;margin-top:30px;padding:10px}.mx_ShareDialog_matrixto a{text-decoration:none}.mx_ShareDialog_matrixto_link{-ms-flex-negative:1;flex-shrink:1;overflow:hidden;text-overflow:ellipsis}.mx_ShareDialog_matrixto_copy{-ms-flex-negative:0;flex-shrink:0;cursor:pointer;margin-left:20px;display:inherit}.mx_ShareDialog_matrixto_copy>div{-webkit-mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);background-color:#2e2f32;margin-left:5px;width:20px;height:20px;background-repeat:no-repeat}.mx_ShareDialog_split{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mx_ShareDialog_qrcode_container{float:left;height:256px;width:256px;margin-right:64px}.mx_ShareDialog_qrcode_container+.mx_ShareDialog_social_container{width:299px}.mx_ShareDialog_social_container{display:inline-block}.mx_ShareDialog_social_icon{display:inline-grid;margin-right:10px;margin-bottom:10px}.mx_SlashCommandHelpDialog .mx_SlashCommandHelpDialog_headerRow h2{margin-bottom:2px}.mx_SlashCommandHelpDialog .mx_Dialog_content{margin-top:12px;margin-bottom:34px}.mx_SpaceSettingsDialog{width:480px;color:#2e2f32}.mx_SpaceSettingsDialog .mx_SpaceSettings_errorText{font-weight:600;font-size:1.2rem;line-height:1.5rem;color:#ff4b55;margin-bottom:28px}.mx_SpaceSettingsDialog .mx_ToggleSwitch{display:inline-block;vertical-align:middle;margin-left:16px}.mx_SpaceSettingsDialog .mx_AccessibleButton_kind_danger{margin-top:28px}.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:64px}.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons .mx_AccessibleButton{display:inline-block}.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons .mx_AccessibleButton_kind_link{margin-left:auto}.mx_SpaceSettingsDialog .mx_AccessibleButton_hasKind{padding:8px 22px}.mx_TabbedIntegrationManagerDialog .mx_Dialog{width:60%;height:70%;overflow:hidden;padding:0;max-width:none;max-height:none;position:relative}.mx_TabbedIntegrationManagerDialog_container{position:absolute;top:0;bottom:0;left:0;right:0}.mx_TabbedIntegrationManagerDialog_container .mx_TabbedIntegrationManagerDialog_currentManager{width:100%;height:100%;border-top:1px solid #0dbd8b}.mx_TabbedIntegrationManagerDialog_container .mx_TabbedIntegrationManagerDialog_currentManager iframe{background-color:#fff;border:0;width:100%;height:100%}.mx_TabbedIntegrationManagerDialog_tab{display:inline-block;border:1px solid #0dbd8b;border-bottom:0;border-top-left-radius:3px;border-top-right-radius:3px;padding:10px 8px;margin-right:5px}.mx_TabbedIntegrationManagerDialog_currentTab{background-color:#0dbd8b;color:#fff}.mx_TermsDialog_forIntegrationManager .mx_Dialog{width:60%;height:70%;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_TermsDialog_termsTableHeader{font-weight:700;text-align:left}.mx_TermsDialog_termsTable{font-size:1.2rem;width:100%}.mx_TermsDialog_service,.mx_TermsDialog_summary{padding-right:10px}.mx_TermsDialog_link{display:inline-block;-webkit-mask-image:url(../../img/external-link.a8d3e9b.svg);mask-image:url(../../img/external-link.a8d3e9b.svg);background-color:#0dbd8b;width:10px;height:10px}.mx_UntrustedDeviceDialog .mx_Dialog_title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_UntrustedDeviceDialog .mx_Dialog_title .mx_E2EIcon{margin-left:0}.mx_UploadConfirmDialog_fileIcon{margin-right:5px}.mx_UploadConfirmDialog_previewOuter{text-align:center}.mx_UploadConfirmDialog_previewInner{display:inline-block;text-align:left}.mx_UploadConfirmDialog_imagePreview{max-height:300px;max-width:100%;border-radius:4px;border:1px solid #c1c1c1}.mx_UserSettingsDialog_settingsIcon:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_UserSettingsDialog_appearanceIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/appearance.cdebd40.svg);mask-image:url(../../img/element-icons/settings/appearance.cdebd40.svg)}.mx_UserSettingsDialog_voiceIcon:before{-webkit-mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg)}.mx_UserSettingsDialog_bellIcon:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_UserSettingsDialog_preferencesIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/preference.82bfabd.svg);mask-image:url(../../img/element-icons/settings/preference.82bfabd.svg)}.mx_UserSettingsDialog_securityIcon:before{-webkit-mask-image:url(../../img/element-icons/security.66f2fa6.svg);mask-image:url(../../img/element-icons/security.66f2fa6.svg)}.mx_UserSettingsDialog_helpIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/help.68b703f.svg);mask-image:url(../../img/element-icons/settings/help.68b703f.svg)}.mx_UserSettingsDialog_labsIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/lab-flags.6fbe5e2.svg);mask-image:url(../../img/element-icons/settings/lab-flags.6fbe5e2.svg)}.mx_UserSettingsDialog_mjolnirIcon:before{-webkit-mask-image:url(../../img/element-icons/room/composer/emoji.52d7369.svg);mask-image:url(../../img/element-icons/room/composer/emoji.52d7369.svg)}.mx_UserSettingsDialog_flairIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/flair.4227a88.svg);mask-image:url(../../img/element-icons/settings/flair.4227a88.svg)}.mx_WidgetCapabilitiesPromptDialog .text-muted{font-size:1.2rem}.mx_WidgetCapabilitiesPromptDialog .mx_Dialog_content{margin-bottom:16px}.mx_WidgetCapabilitiesPromptDialog .mx_WidgetCapabilitiesPromptDialog_cap{margin-top:20px;font-size:1.5rem;line-height:1.5rem}.mx_WidgetCapabilitiesPromptDialog .mx_WidgetCapabilitiesPromptDialog_cap .mx_WidgetCapabilitiesPromptDialog_byline{color:#61708b;margin-left:26px;font-size:1.2rem;line-height:1.2rem}.mx_WidgetCapabilitiesPromptDialog .mx_Dialog_buttons{margin-top:40px}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag{line-height:calc(1.4rem + 14px);color:#61708b;font-size:1.2rem}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch{display:inline-block;vertical-align:middle;margin-right:8px;width:3.2rem;height:1.5rem}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch.mx_ToggleSwitch_on>.mx_ToggleSwitch_ball{left:calc(100% - 1.5rem)}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch .mx_ToggleSwitch_ball{width:1.5rem;height:1.5rem;border-radius:1.5rem}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_SettingsFlag_label{display:inline-block;vertical-align:middle}.mx_WidgetOpenIDPermissionsDialog .mx_SettingsFlag .mx_ToggleSwitch{display:inline-block;vertical-align:middle;margin-right:8px}.mx_WidgetOpenIDPermissionsDialog .mx_SettingsFlag .mx_SettingsFlag_label{display:inline-block;vertical-align:middle}.mx_AccessSecretStorageDialog_reset{position:relative;padding-left:24px;margin-top:7px}.mx_AccessSecretStorageDialog_reset:before{content:"";display:inline-block;position:absolute;height:16px;width:16px;left:0;top:2px;background-image:url(../../img/element-icons/warning-badge.de1033e.svg)}.mx_AccessSecretStorageDialog_reset .mx_AccessSecretStorageDialog_reset_link{color:#ff4b55}.mx_AccessSecretStorageDialog_titleWithIcon:before{content:"";display:inline-block;width:24px;height:24px;margin-right:8px;position:relative;top:5px;background-color:#2e2f32}.mx_AccessSecretStorageDialog_resetBadge:before{background-image:url(../../img/element-icons/warning-badge.de1033e.svg);background-size:24px;background-color:transparent}.mx_AccessSecretStorageDialog_secureBackupTitle:before{-webkit-mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg)}.mx_AccessSecretStorageDialog_securePhraseTitle:before{-webkit-mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg);mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg)}.mx_AccessSecretStorageDialog_keyStatus{height:30px}.mx_AccessSecretStorageDialog_passPhraseInput{width:300px;border:1px solid #0dbd8b;border-radius:5px;padding:10px}.mx_AccessSecretStorageDialog_recoveryKeyEntry{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText{margin:16px}.mx_AccessSecretStorageDialog_recoveryKeyFeedback:before{content:"";display:inline-block;vertical-align:bottom;width:20px;height:20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:20px;mask-size:20px;margin-right:5px}.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid{color:#0dbd8b}.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid:before{-webkit-mask-image:url(../../img/feather-customised/check.5745b4e.svg);mask-image:url(../../img/feather-customised/check.5745b4e.svg);background-color:#0dbd8b}.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid{color:#ff4b55}.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid:before{-webkit-mask-image:url(../../img/feather-customised/x.9662221.svg);mask-image:url(../../img/feather-customised/x.9662221.svg);background-color:#ff4b55}.mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput{display:none}.mx_CreateCrossSigningDialog{width:560px}.mx_CreateCrossSigningDialog details .mx_AccessibleButton{margin:1em 0}.mx_CreateCrossSigningDialog .mx_Dialog_title,.mx_CreateKeyBackupDialog .mx_Dialog_title{margin-bottom:1em}.mx_CreateKeyBackupDialog_primaryContainer{padding:20px}.mx_CreateKeyBackupDialog_primaryContainer:after{content:"";clear:both;display:block}.mx_CreateKeyBackupDialog_passPhraseContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mx_CreateKeyBackupDialog_passPhraseInput{-webkit-box-flex:0;-ms-flex:none;flex:none;width:250px;border:1px solid #0dbd8b;border-radius:5px;padding:10px;margin-bottom:1em}.mx_CreateKeyBackupDialog_passPhraseMatch{margin-left:20px}.mx_CreateKeyBackupDialog_recoveryKeyHeader{margin-bottom:1em}.mx_CreateKeyBackupDialog_recoveryKeyContainer{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_CreateKeyBackupDialog_recoveryKey{width:262px;padding:20px;color:#888;background-color:#f7f7f7;margin-right:12px}.mx_CreateKeyBackupDialog_recoveryKeyButtons{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CreateKeyBackupDialog_recoveryKeyButtons button{-webkit-box-flex:1;-ms-flex:1;flex:1;white-space:nowrap}.mx_CreateKeyBackupDialog details .mx_AccessibleButton{margin:1em 0}.mx_CreateSecretStorageDialog{width:560px}.mx_CreateSecretStorageDialog .mx_SettingsFlag{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_CreateSecretStorageDialog .mx_SettingsFlag_label{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0;font-weight:600}.mx_CreateSecretStorageDialog .mx_ToggleSwitch{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-left:30px}.mx_CreateSecretStorageDialog details .mx_AccessibleButton{margin:1em 0}.mx_CreateSecretStorageDialog .mx_Dialog_title{margin-bottom:1em}.mx_CreateSecretStorageDialog_titleWithIcon:before{content:"";display:inline-block;width:24px;height:24px;margin-right:8px;position:relative;top:5px;background-color:#2e2f32}.mx_CreateSecretStorageDialog_secureBackupTitle:before{-webkit-mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg)}.mx_CreateSecretStorageDialog_securePhraseTitle:before{-webkit-mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg);mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg)}.mx_CreateSecretStorageDialog_centeredBody,.mx_CreateSecretStorageDialog_centeredTitle{text-align:center}.mx_CreateSecretStorageDialog_primaryContainer{padding-top:20px}.mx_CreateSecretStorageDialog_primaryContainer:after{content:"";clear:both;display:block}.mx_CreateSecretStorageDialog_primaryContainer .mx_RadioButton{margin-bottom:16px;padding:11px}.mx_CreateSecretStorageDialog_optionTitle{color:#45474a;font-weight:600;font-size:1.8rem;padding-bottom:10px}.mx_CreateSecretStorageDialog_optionIcon{display:inline-block;width:24px;height:24px;margin-right:8px;position:relative;top:5px;background-color:#2e2f32}.mx_CreateSecretStorageDialog_optionIcon_securePhrase{-webkit-mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg);mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg)}.mx_CreateSecretStorageDialog_optionIcon_secureBackup{-webkit-mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg)}.mx_CreateSecretStorageDialog_passPhraseContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mx_Field.mx_CreateSecretStorageDialog_passPhraseField{margin-top:0}.mx_CreateSecretStorageDialog_passPhraseMatch{width:200px;margin-left:20px}.mx_CreateSecretStorageDialog_recoveryKeyContainer{width:380px;margin-left:auto;margin-right:auto}.mx_CreateSecretStorageDialog_recoveryKey{font-weight:700;text-align:center;padding:20px;color:#888;background-color:#f7f7f7;border-radius:6px;word-spacing:1em;margin-bottom:20px}.mx_CreateSecretStorageDialog_recoveryKeyButtons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton{width:160px;padding-left:0;padding-right:0;white-space:nowrap}.mx_CreateSecretStorageDialog_continueSpinner{margin-top:33px;text-align:right}.mx_CreateSecretStorageDialog_continueSpinner img{width:20px;height:20px}.mx_KeyBackupFailedDialog .mx_Dialog_title{margin-bottom:32px}.mx_KeyBackupFailedDialog_title{position:relative;padding-left:45px;padding-bottom:10px}.mx_KeyBackupFailedDialog_title:before{-webkit-mask:url(../../img/e2e/lock-warning-filled.993fb6c.svg);mask:url(../../img/e2e/lock-warning-filled.993fb6c.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#2e2f32;content:"";position:absolute;top:-6px;right:0;bottom:0;left:0}.mx_KeyBackupFailedDialog .mx_Dialog_buttons{margin-top:36px}.mx_RestoreKeyBackupDialog_keyStatus{height:30px}.mx_RestoreKeyBackupDialog_primaryContainer{padding:20px}.mx_RestoreKeyBackupDialog_passPhraseInput,.mx_RestoreKeyBackupDialog_recoveryKeyInput{width:300px;border:1px solid #0dbd8b;border-radius:5px;padding:10px}.mx_RestoreKeyBackupDialog_content>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;min-height:110px}.mx_NetworkDropdown{height:32px;position:relative;padding-right:32px;margin-left:auto;margin-right:9px;margin-top:12px}.mx_NetworkDropdown,.mx_NetworkDropdown .mx_AccessibleButton{width:-webkit-max-content;width:-moz-max-content;width:max-content}.mx_NetworkDropdown_menu{min-width:204px;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;border:1px solid #c1c1c1;background-color:#fff;max-height:calc(100vh - 20px);overflow-y:auto}.mx_NetworkDropdown_menu_network{font-weight:700}.mx_NetworkDropdown_server{padding:12px 0;border-bottom:1px solid #9fa9ba}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_title{padding:0 10px;font-size:1.5rem;font-weight:600;line-height:2rem;margin-bottom:4px;position:relative}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_title .mx_AccessibleButton{position:absolute;display:inline;right:10px;height:16px;width:16px;margin-top:2px}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_title .mx_AccessibleButton:after{content:"";position:absolute;width:16px;height:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/feather-customised/x.9662221.svg);mask-image:url(../../img/feather-customised/x.9662221.svg);background-color:#ff4b55}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_subtitle{padding:0 10px;font-size:1rem;line-height:1.4rem;margin-top:-4px;margin-bottom:4px;color:#61708b}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_network{font-size:1.2rem;line-height:1.6rem;padding:4px 10px;cursor:pointer;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_network[aria-checked=true]:after{content:"";position:absolute;width:16px;height:16px;right:10px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/feather-customised/check.5745b4e.svg);mask-image:url(../../img/feather-customised/check.5745b4e.svg);background-color:#0dbd8b}.mx_NetworkDropdown_server_add:hover,.mx_NetworkDropdown_server_network:hover{background-color:#f3f8fd}.mx_NetworkDropdown_server_add{padding:16px 10px 16px 32px;position:relative;border-radius:0 0 4px 4px}.mx_NetworkDropdown_server_add:before{content:"";position:absolute;width:16px;height:16px;left:7px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/feather-customised/plus.38ae979.svg);mask-image:url(../../img/feather-customised/plus.38ae979.svg);background-color:#61708b}.mx_NetworkDropdown_handle{position:relative}.mx_NetworkDropdown_handle:after{content:"";position:absolute;width:26px;height:26px;right:-27.5px;top:-3px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);background-color:#2e2f32}.mx_NetworkDropdown_handle .mx_NetworkDropdown_handle_server{color:#61708b;font-size:1.2rem}.mx_NetworkDropdown_dialog .mx_Dialog{width:45vw}.mx_AccessibleButton{cursor:pointer}.mx_AccessibleButton_disabled{cursor:default}.mx_AccessibleButton_hasKind{padding:7px 18px;text-align:center;border-radius:8px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:1.4rem}.mx_AccessibleButton_kind_primary{color:#fff;background-color:#0dbd8b;font-weight:600}.mx_AccessibleButton_kind_primary_outline{color:#0dbd8b;background-color:#fff;border:1px solid #0dbd8b;font-weight:600}.mx_AccessibleButton_kind_secondary{color:#0dbd8b;font-weight:600}.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled,.mx_AccessibleButton_kind_primary_outline.mx_AccessibleButton_disabled{opacity:.4}.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm{padding:5px 12px;color:#fff;background-color:#0dbd8b}.mx_AccessibleButton_kind_primary_sm.mx_AccessibleButton_disabled{opacity:.4}.mx_AccessibleButton_kind_danger{color:#fff;background-color:#ff4b55}.mx_AccessibleButton_kind_danger_outline{color:#ff4b55;background-color:#fff;border:1px solid #ff4b55}.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled{color:#fff;background-color:#f5b6bb}.mx_AccessibleButton_kind_danger_outline.mx_AccessibleButton_disabled{color:#f5b6bb;border-color:#f5b6bb}.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm{padding:5px 12px;color:#fff;background-color:#ff4b55}.mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled{color:#fff;background-color:#f5b6bb}.mx_AccessibleButton_kind_link{color:#0dbd8b;background-color:transparent}.mx_AccessibleButton_kind_link.mx_AccessibleButton_disabled{opacity:.4}.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link_sm{padding:5px 12px;color:#0dbd8b;background-color:transparent}.mx_AccessibleButton_kind_link_sm.mx_AccessibleButton_disabled{opacity:.4}.mx_AddressSelector{position:absolute;background-color:#fff;width:485px;max-height:116px;overflow-y:auto;border-radius:3px;border:1px solid #0dbd8b;cursor:pointer;z-index:1}.mx_AddressSelector.mx_AddressSelector_empty{display:none}.mx_AddressSelector_addressListElement .mx_AddressTile{background-color:#fff;border:1px solid #fff}.mx_AddressSelector_addressListElement.mx_AddressSelector_selected{background-color:#f2f5f8}.mx_AddressSelector_addressListElement.mx_AddressSelector_selected .mx_AddressTile{background-color:#f2f5f8;border:1px solid #f2f5f8}.mx_AddressTile{display:inline-block;border-radius:3px;background-color:rgba(74,73,74,.1);border:1px solid #e7e7e7;line-height:2.6rem;color:#2e2f32;font-size:1.4rem;font-weight:400;margin-right:4px}.mx_AddressTile.mx_AddressTile_error{background-color:rgba(255,0,100,.1);color:#ff4b55;border-color:#ff4b55}.mx_AddressTile_network{padding-right:4px}.mx_AddressTile_avatar,.mx_AddressTile_network{display:inline-block;position:relative;padding-left:2px;vertical-align:middle}.mx_AddressTile_avatar{padding-right:7px}.mx_AddressTile_mx{display:inline-block;margin:0;border:0;padding:0}.mx_AddressTile_name{display:inline-block;padding-right:4px;font-weight:600;overflow:hidden;height:26px;vertical-align:middle}.mx_AddressTile_name.mx_AddressTile_justified{width:180px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_id{display:inline-block;padding-right:11px}.mx_AddressTile_id.mx_AddressTile_justified{width:200px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_unknownMx{display:inline-block;font-weight:600;padding-right:11px}.mx_AddressTile_unknownMxl.mx_AddressTile_justified{width:380px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_email{display:inline-block;font-weight:600;padding-right:11px}.mx_AddressTile_email.mx_AddressTile_justified{width:200px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_unknown{display:inline-block;padding-right:11px}.mx_AddressTile_unknown.mx_AddressTile_justified{width:380px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_dismiss{display:inline-block;padding-right:11px;padding-left:1px;cursor:pointer}.mx_AddressTile_dismiss object{pointer-events:none}.mx_DesktopBuildsNotice{text-align:center;padding:0 16px}.mx_DesktopBuildsNotice>*{vertical-align:middle}.mx_DesktopBuildsNotice>img{margin-right:8px}.mx_desktopCapturerSourcePicker{overflow:hidden}.mx_desktopCapturerSourcePicker_tabLabels{display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 0 8px}.mx_desktopCapturerSourcePicker_tabLabel,.mx_desktopCapturerSourcePicker_tabLabel_selected{width:100%;text-align:center;border-radius:8px;padding:8px 0;font-size:1.3rem}.mx_desktopCapturerSourcePicker_tabLabel_selected{background-color:#0dbd8b;color:#fff}.mx_desktopCapturerSourcePicker_panel{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;height:500px;overflow:overlay}.mx_desktopCapturerSourcePicker_stream_button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:8px;border-radius:4px}.mx_desktopCapturerSourcePicker_stream_button:focus,.mx_desktopCapturerSourcePicker_stream_button:hover{background:#fff}.mx_desktopCapturerSourcePicker_stream_thumbnail{margin:4px;width:312px}.mx_desktopCapturerSourcePicker_stream_name{margin:0 4px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:312px}.mx_DirectorySearchBox{display:-webkit-box;display:-ms-flexbox;display:flex;padding-left:9px;padding-right:9px}.mx_DirectorySearchBox_joinButton{display:table-cell;padding:3px 10px;background-color:#f2f5f8;border-radius:3px;background-image:url(../../img/icon-return.cb24475.svg);background-position:8px 70%;background-repeat:no-repeat;text-indent:18px;font-weight:600;font-size:1.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.mx_DirectorySearchBox_clear{background-color:#ff4b55;-webkit-mask:url(../../img/cancel.4b9715b.svg);mask:url(../../img/cancel.4b9715b.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:10px;mask-size:10px;width:15px;height:15px;cursor:pointer}.mx_Dropdown{position:relative;color:#2e2f32}.mx_Dropdown_disabled{opacity:.3}.mx_Dropdown_input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;border-radius:3px;border:1px solid #c7c7c7;font-size:1.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_Dropdown_input.mx_AccessibleButton_disabled{cursor:not-allowed}.mx_Dropdown_input:focus{border-color:#238cf5}.mx_Dropdown_input.mx_AccessibleButton:focus{-webkit-filter:none;filter:none}.mx_Dropdown_arrow{width:10px;height:6px;padding-right:9px;-webkit-mask:url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);mask:url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#2e2f32}.mx_Dropdown_option{height:35px;line-height:3.5rem;padding-left:8px;padding-right:8px}.mx_Dropdown_input>.mx_Dropdown_option{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_Dropdown_input>.mx_Dropdown_option,.mx_Dropdown_option div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mx_Dropdown_option .mx_Dropdown_option_emoji,.mx_Dropdown_option img{margin:5px;width:16px;vertical-align:middle}.mx_Dropdown_option_emoji{font-size:1.6rem;line-height:1.6rem}input.mx_Dropdown_option,input.mx_Dropdown_option:focus{font-weight:400;border:0;padding-top:0;padding-bottom:0;width:60%}.mx_Dropdown_menu{position:absolute;left:-1px;right:-1px;top:100%;z-index:2;margin:0;padding:0;border-radius:3px;border:1px solid #238cf5;background-color:#fff;max-height:200px;overflow-y:auto}.mx_Dropdown_menu .mx_Dropdown_option{height:auto;min-height:35px}.mx_Dropdown_menu .mx_Dropdown_option_highlight{background-color:#ddd}.mx_Dropdown_searchPrompt{font-weight:400;margin-left:5px;margin-bottom:5px}.mx_EditableItemList{margin-top:12px;margin-bottom:10px}.mx_EditableItem{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:5px}.mx_EditableItem_delete{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3;margin-right:5px;cursor:pointer;vertical-align:middle;width:14px;height:14px;-webkit-mask-image:url(../../img/feather-customised/cancel.23c2689.svg);mask-image:url(../../img/feather-customised/cancel.23c2689.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#ff4b55;-webkit-mask-size:100%;mask-size:100%}.mx_EditableItem_email{vertical-align:middle}.mx_EditableItem_promptText{margin-right:10px;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.mx_EditableItem_confirmBtn{margin-right:5px}.mx_EditableItem_item{-webkit-box-flex:1;-ms-flex:auto 1 0px;flex:auto 1 0;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;width:calc(100% - 14px);overflow-x:hidden;text-overflow:ellipsis}.mx_EditableItemList_label{margin-bottom:5px}.mx_ErrorBoundary{width:100%;height:100%;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_ErrorBoundary,.mx_ErrorBoundary_body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_ErrorBoundary_body{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-width:400px}.mx_ErrorBoundary_body .mx_AccessibleButton{margin-top:5px}.mx_EventListSummary{position:relative}.mx_TextualEvent.mx_EventListSummary_summary{font-size:1.4rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mx_EventListSummary_avatars{display:inline-block;margin-right:8px;padding-top:8px;line-height:1.2rem}.mx_EventListSummary_avatars .mx_BaseAvatar{margin-right:-4px;cursor:pointer}.mx_EventListSummary_toggle{color:#0dbd8b;cursor:pointer;float:right;margin-right:10px;margin-top:8px}.mx_EventListSummary_line{border-bottom:1px solid transparent;margin-left:63px;line-height:3rem}.mx_MatrixChat_useCompactLayout .mx_EventListSummary{font-size:1.3rem}.mx_MatrixChat_useCompactLayout .mx_EventListSummary .mx_EventTile_line{line-height:2rem}.mx_MatrixChat_useCompactLayout .mx_EventListSummary_line{line-height:2.2rem}.mx_MatrixChat_useCompactLayout .mx_EventListSummary_toggle{margin-top:3px}.mx_MatrixChat_useCompactLayout .mx_TextualEvent.mx_EventListSummary_summary{font-size:1.3rem}.mx_FacePile .mx_FacePile_faces{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;vertical-align:middle}.mx_FacePile .mx_FacePile_faces>.mx_FacePile_face+.mx_FacePile_face{margin-right:-8px}.mx_FacePile .mx_FacePile_faces .mx_BaseAvatar_image{border:1px solid #fff}.mx_FacePile .mx_FacePile_faces .mx_BaseAvatar_initial{margin:1px}.mx_FacePile .mx_FacePile_faces .mx_FacePile_more{position:relative;border-radius:100%;width:30px;height:30px;background-color:hsla(0,0%,91%,.77)}.mx_FacePile .mx_FacePile_faces .mx_FacePile_more:before{content:"";z-index:1;position:absolute;top:0;left:0;height:inherit;width:inherit;background:#8d99a5;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:20px;mask-size:20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg)}.mx_FacePile .mx_FacePile_summary{margin-left:12px;font-size:1.4rem;line-height:2.4rem;color:#8d99a5}.mx_Field{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0;position:relative;margin:1em 0;border-radius:4px;-webkit-transition:border-color .25s;transition:border-color .25s;border:1px solid #e7e7e7}.mx_Field_prefix{border-right:1px solid #e7e7e7}.mx_Field_postfix{border-left:1px solid #e7e7e7}.mx_Field input,.mx_Field select,.mx_Field textarea{font-weight:400;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;border:none;border-radius:4px;padding:8px 9px;color:#2e2f32;background-color:#fff;-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.mx_Field select{-moz-appearance:none;-webkit-appearance:none}.mx_Field_select:before{content:"";position:absolute;top:15px;right:10px;width:10px;height:6px;-webkit-mask:url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);mask:url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#2e2f32;z-index:1;pointer-events:none}.mx_Field:focus-within{border-color:#238cf5}.mx_Field input:focus,.mx_Field select:focus,.mx_Field textarea:focus{outline:0}.mx_Field input::-webkit-input-placeholder,.mx_Field textarea::-webkit-input-placeholder{-webkit-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input::-moz-placeholder,.mx_Field textarea::-moz-placeholder{-moz-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input:-ms-input-placeholder,.mx_Field textarea:-ms-input-placeholder{-ms-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input::-ms-input-placeholder,.mx_Field textarea::-ms-input-placeholder{-ms-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input::placeholder,.mx_Field textarea::placeholder{-webkit-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input:placeholder-shown:focus::-webkit-input-placeholder,.mx_Field textarea:placeholder-shown:focus::-webkit-input-placeholder{-webkit-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:placeholder-shown:focus::-moz-placeholder,.mx_Field textarea:placeholder-shown:focus::-moz-placeholder{-moz-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:placeholder-shown:focus:-ms-input-placeholder,.mx_Field textarea:placeholder-shown:focus:-ms-input-placeholder{-ms-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:placeholder-shown:focus::-ms-input-placeholder,.mx_Field textarea:placeholder-shown:focus::-ms-input-placeholder{-ms-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:-moz-placeholder-shown:focus::placeholder,.mx_Field textarea:-moz-placeholder-shown:focus::placeholder{-moz-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:-ms-input-placeholder:focus::placeholder,.mx_Field textarea:-ms-input-placeholder:focus::placeholder{-ms-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:placeholder-shown:focus::placeholder,.mx_Field textarea:placeholder-shown:focus::placeholder{-webkit-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field label{-webkit-transition:font-size .25s ease-out .1s,color .25s ease-out .1s,top .25s ease-out .1s,background-color .25s ease-out .1s;transition:font-size .25s ease-out .1s,color .25s ease-out .1s,top .25s ease-out .1s,background-color .25s ease-out .1s;color:#2e2f32;background-color:transparent;font-size:1.4rem;position:absolute;left:0;top:0;margin:7px 8px;padding:2px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:calc(100% - 20px)}.mx_Field input:not(:-moz-placeholder-shown)+label,.mx_Field textarea:not(:-moz-placeholder-shown)+label{-moz-transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;font-size:1rem;top:-13px;padding:0 2px;background-color:#fff;pointer-events:auto}.mx_Field input:not(:-ms-input-placeholder)+label,.mx_Field textarea:not(:-ms-input-placeholder)+label{-ms-transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;font-size:1rem;top:-13px;padding:0 2px;background-color:#fff;pointer-events:auto}.mx_Field_labelAlwaysTopLeft label,.mx_Field input:focus+label,.mx_Field input:not(:placeholder-shown)+label,.mx_Field select+label,.mx_Field textarea:focus+label,.mx_Field textarea:not(:placeholder-shown)+label{-webkit-transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;font-size:1rem;top:-13px;padding:0 2px;background-color:#fff;pointer-events:auto}.mx_Field input:focus+label,.mx_Field select:focus+label,.mx_Field textarea:focus+label{color:#238cf5}.mx_Field input:disabled,.mx_Field input:disabled+label,.mx_Field select:disabled,.mx_Field select:disabled+label,.mx_Field textarea:disabled,.mx_Field textarea:disabled+label{background-color:#fff;color:#888}.mx_Field_valid.mx_Field,.mx_Field_valid.mx_Field:focus-within{border-color:#0dbd8b}.mx_Field_valid.mx_Field:focus-within label,.mx_Field_valid.mx_Field label{color:#0dbd8b}.mx_Field_invalid.mx_Field,.mx_Field_invalid.mx_Field:focus-within{border-color:#ff4b55}.mx_Field_invalid.mx_Field:focus-within label,.mx_Field_invalid.mx_Field label{color:#ff4b55}.mx_Field_tooltip{margin-top:-12px;margin-left:4px;width:200px}.mx_Field_tooltip.mx_Field_valid{-webkit-animation:mx_fadeout 1s 2s forwards;animation:mx_fadeout 1s 2s forwards}.mx_Field .mx_Dropdown_input{border:initial;border-radius:0;border-radius:initial}.mx_Field .mx_CountryDropdown{width:7.8rem}.mx_FormButton{line-height:1.6rem;padding:5px 15px;font-size:1.2rem;height:-webkit-min-content;height:-moz-min-content;height:min-content}.mx_FormButton:not(:last-child){margin-right:8px}.mx_FormButton.mx_AccessibleButton_kind_primary{color:#0dbd8b;background-color:rgba(3,179,129,.16)}.mx_FormButton.mx_AccessibleButton_kind_danger{color:#ff4b55;background-color:rgba(255,75,85,.16)}.mx_FormButton.mx_AccessibleButton_kind_secondary{color:#737d8c;border:1px solid #737d8c;background-color:unset}.mx_ImageView{width:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_ImageView,.mx_ImageView_image_wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%}.mx_ImageView_image_wrapper{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.mx_ImageView_image{pointer-events:all;-ms-flex-negative:0;flex-shrink:0}.mx_ImageView_panel{width:100%;height:68px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mx_ImageView_info_wrapper,.mx_ImageView_panel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_ImageView_info_wrapper{pointer-events:all;padding-left:32px;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;color:#fff}.mx_ImageView_info{padding-left:12px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_ImageView_info_sender{font-weight:700}.mx_ImageView_toolbar{padding-right:16px;pointer-events:all;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_ImageView_button{margin-left:24px;display:block}.mx_ImageView_button:before{content:"";height:22px;width:22px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;display:block;background-color:#c1c6cd}.mx_ImageView_button_rotateCW:before{-webkit-mask-image:url(../../img/image-view/rotate-cw.60d903e.svg);mask-image:url(../../img/image-view/rotate-cw.60d903e.svg)}.mx_ImageView_button_rotateCCW:before{-webkit-mask-image:url(../../img/image-view/rotate-ccw.b28ae4a.svg);mask-image:url(../../img/image-view/rotate-ccw.b28ae4a.svg)}.mx_ImageView_button_zoomOut:before{-webkit-mask-image:url(../../img/image-view/zoom-out.8506f80.svg);mask-image:url(../../img/image-view/zoom-out.8506f80.svg)}.mx_ImageView_button_zoomIn:before{-webkit-mask-image:url(../../img/image-view/zoom-in.3b3f32e.svg);mask-image:url(../../img/image-view/zoom-in.3b3f32e.svg)}.mx_ImageView_button_download:before{-webkit-mask-image:url(../../img/image-view/download.2eac468.svg);mask-image:url(../../img/image-view/download.2eac468.svg)}.mx_ImageView_button_more:before{-webkit-mask-image:url(../../img/image-view/more.0427c6c.svg);mask-image:url(../../img/image-view/more.0427c6c.svg)}.mx_ImageView_button_close{border-radius:100%;background:#21262c}.mx_ImageView_button_close:before{width:32px;height:32px;-webkit-mask-image:url(../../img/image-view/close.97d1731.svg);mask-image:url(../../img/image-view/close.97d1731.svg);-webkit-mask-size:40%;mask-size:40%}.mx_InfoTooltip_icon,.mx_InfoTooltip_icon:before{width:16px;height:16px;display:inline-block}.mx_InfoTooltip_icon:before{background-color:#61708b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-position:center;mask-position:center;content:"";vertical-align:middle;-webkit-mask-image:url(../../img/element-icons/info.dc07e19.svg);mask-image:url(../../img/element-icons/info.dc07e19.svg)}.mx_InlineSpinner{display:inline}.mx_InlineSpinner_spin img{margin:0 6px;vertical-align:-3px}.mx_InviteReason{position:relative;margin-bottom:1em}.mx_InviteReason .mx_InviteReason_reason{visibility:visible}.mx_InviteReason .mx_InviteReason_view{display:none;position:absolute;top:0;bottom:0;left:0;right:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;color:#737d8c}.mx_InviteReason .mx_InviteReason_view:before{content:"";margin-right:8px;background-color:#737d8c;-webkit-mask-image:url(../../img/feather-customised/eye.52aa0d2.svg);mask-image:url(../../img/feather-customised/eye.52aa0d2.svg);display:inline-block;width:18px;height:14px}.mx_InviteReason_hidden .mx_InviteReason_reason{visibility:hidden}.mx_InviteReason_hidden .mx_InviteReason_view{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_ManageIntegsButton_error{position:relative;float:right;cursor:not-allowed}.mx_ManageIntegsButton_error img{position:absolute;right:-5px;top:-5px}.mx_ManageIntegsButton_errorPopup{position:absolute;top:110%;left:-275%;width:550%;padding:30%;font-size:10pt;line-height:1.5em;border-radius:5px;background-color:#0dbd8b;color:#fff;text-align:center;z-index:1000}.mx_ManageIntegsButton_error .mx_ManageIntegsButton_errorPopup{display:none}.mx_ManageIntegsButton_error:hover .mx_ManageIntegsButton_errorPopup{display:inline}.mx_MiniAvatarUploader{position:relative;width:-webkit-min-content;width:-moz-min-content;width:min-content}.mx_MiniAvatarUploader .mx_Tooltip{display:inline-block;position:absolute;z-index:unset;width:-webkit-max-content;width:-moz-max-content;width:max-content;left:72px;top:0}.mx_MiniAvatarUploader:after,.mx_MiniAvatarUploader:before{content:"";position:absolute;height:26px;width:26px;right:-6px;bottom:-6px}.mx_MiniAvatarUploader:before{background-color:#fff;border-radius:50%;z-index:1}.mx_MiniAvatarUploader:after{background-color:#737d8c;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/camera.a81a395.svg);mask-image:url(../../img/element-icons/camera.a81a395.svg);-webkit-mask-size:16px;mask-size:16px;z-index:2}.mx_MiniAvatarUploader.mx_MiniAvatarUploader_busy:after{background:url(../../img/spinner.0b29ec9.gif) no-repeat 50%;background-size:80%;-webkit-mask:unset;mask:unset}.mx_MiniAvatarUploader_input{display:none}.mx_PowerSelector{width:100%}.mx_PowerSelector .mx_Field input,.mx_PowerSelector .mx_Field select{-webkit-box-sizing:border-box;box-sizing:border-box}progress.mx_ProgressBar{height:6px;width:60px;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:6px}progress.mx_ProgressBar::-moz-progress-bar{border-radius:6px}progress.mx_ProgressBar::-webkit-progress-bar,progress.mx_ProgressBar::-webkit-progress-value{border-radius:6px}progress.mx_ProgressBar{color:#0dbd8b}progress.mx_ProgressBar::-moz-progress-bar{background-color:#0dbd8b}progress.mx_ProgressBar::-webkit-progress-value{background-color:#0dbd8b}progress.mx_ProgressBar{background-color:rgba(141,151,165,.2)}progress.mx_ProgressBar::-webkit-progress-bar{background-color:rgba(141,151,165,.2)}progress.mx_ProgressBar ::-webkit-progress-value{-webkit-transition:width 1s;transition:width 1s}progress.mx_ProgressBar ::-moz-progress-bar{-moz-transition:padding-bottom 1s;transition:padding-bottom 1s;padding-bottom:var(--value);transform-origin:0 0;transform:rotate(-90deg) translateX(-15px);padding-left:15px;height:0}.mx_QRCode img{border-radius:8px}.mx_ReplyThread{margin-top:0}.mx_ReplyThread .mx_DateSeparator{font-size:1em!important;margin-top:0;margin-bottom:0;padding-bottom:1px;bottom:-5px}.mx_ReplyThread_show{cursor:pointer}blockquote.mx_ReplyThread{margin-left:0;padding-left:10px;border-left:4px solid #ddd}.mx_ResizeHandle{cursor:row-resize;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;z-index:100}.mx_ResizeHandle.mx_ResizeHandle_horizontal{margin:0 -5px;padding:0 5px;cursor:col-resize}.mx_ResizeHandle.mx_ResizeHandle_vertical{margin:-5px 0;padding:5px 0;cursor:row-resize}.mx_MatrixChat>.mx_ResizeHandle.mx_ResizeHandle_horizontal{margin:0 -10px 0 0;padding:0 8px 0 0}.mx_ResizeHandle>div{background:transparent}.mx_ResizeHandle.mx_ResizeHandle_horizontal>div{width:1px;height:100%}.mx_ResizeHandle.mx_ResizeHandle_vertical>div{height:1px}.mx_AtRoomPill,.mx_GroupPill,.mx_RoomPill,.mx_UserPill{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:middle;border-radius:1.6rem;line-height:1.5rem;padding-left:0}a.mx_Pill{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 1ch)}.mx_Pill{padding:.1rem .4em .1rem .1rem;vertical-align:text-top;line-height:1.7rem}.mx_EventTile_content .markdown-body a.mx_GroupPill,.mx_GroupPill{color:#fff;background-color:#aaa}.mx_EventTile_content .markdown-body a.mx_Pill{text-decoration:none}.mx_EventTile_content .markdown-body a.mx_UserPill,.mx_UserPill{color:#2e2f32;background-color:rgba(0,0,0,.1)}.mx_UserPill_selected{background-color:#0dbd8b!important}.mx_EventTile_content .markdown-body a.mx_AtRoomPill,.mx_EventTile_content .mx_AtRoomPill,.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me,.mx_MessageComposer_input .mx_AtRoomPill{color:#fff;background-color:#ff4b55}.mx_EventTile_content .markdown-body a.mx_GroupPill,.mx_EventTile_content .markdown-body a.mx_RoomPill,.mx_GroupPill,.mx_RoomPill{color:#fff;background-color:#aaa}.mx_EventTile_body .mx_GroupPill,.mx_EventTile_body .mx_RoomPill,.mx_EventTile_body .mx_UserPill{cursor:pointer}.mx_AtRoomPill .mx_BaseAvatar,.mx_GroupPill .mx_BaseAvatar,.mx_RoomPill .mx_BaseAvatar,.mx_UserPill .mx_BaseAvatar{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:10rem;margin-right:.24rem}.mx_Markdown_BOLD{font-weight:700}.mx_Markdown_ITALIC{font-style:italic}.mx_Markdown_CODE{padding:.2em 0;margin:0;font-size:85%;background-color:rgba(0,0,0,.04);border-radius:3px}.mx_Markdown_HR{display:block;background:#e9e9e9}.mx_Markdown_STRIKETHROUGH{text-decoration:line-through}.mx_RoleButton{margin-left:4px;margin-right:4px;cursor:pointer;display:inline-block}.mx_RoleButton object{pointer-events:none}.mx_RoleButton_tooltip{display:inline-block;position:relative;top:-25px;left:6px}.mx_RoomAliasField{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;min-width:0;max-width:100%}.mx_RoomAliasField input{width:150px;padding-left:0;padding-right:0}.mx_RoomAliasField input::-webkit-input-placeholder{color:#888;font-weight:400}.mx_RoomAliasField input::-moz-placeholder{color:#888;font-weight:400}.mx_RoomAliasField input:-ms-input-placeholder{color:#888;font-weight:400}.mx_RoomAliasField input::-ms-input-placeholder{color:#888;font-weight:400}.mx_RoomAliasField input::placeholder{color:#888;font-weight:400}.mx_RoomAliasField .mx_Field_postfix,.mx_RoomAliasField .mx_Field_prefix{color:#888;border-left:none;border-right:none;font-weight:600;padding:9px 10px;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_RoomAliasField .mx_Field_postfix{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 180px)}.mx_SSOButtons{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_SSOButtons .mx_SSOButtons_row+.mx_SSOButtons_row{margin-top:16px}.mx_SSOButtons .mx_SSOButton{position:relative;width:100%;padding:7px 32px;text-align:center;border-radius:8px;display:inline-block;font-size:1.4rem;font-weight:600;border:1px solid #e7e7e7;color:#2e2f32}.mx_SSOButtons .mx_SSOButton>img{-o-object-fit:contain;object-fit:contain;position:absolute;left:8px;top:4px}.mx_SSOButtons .mx_SSOButton_default{color:#0dbd8b;background-color:#fff;border-color:#0dbd8b}.mx_SSOButtons .mx_SSOButton_default.mx_SSOButton_primary{color:#fff;background-color:#0dbd8b}.mx_SSOButtons .mx_SSOButton_mini{-webkit-box-sizing:border-box;box-sizing:border-box;width:50px;height:50px;min-width:50px;padding:12px}.mx_SSOButtons .mx_SSOButton_mini>img{left:12px;top:12px}.mx_SSOButtons .mx_SSOButton_mini+.mx_SSOButton_mini{margin-left:16px}.mx_ServerPicker{margin-bottom:14px;border-bottom:1px solid rgba(141,151,165,.2);display:grid;grid-template-columns:auto -webkit-min-content;grid-template-columns:auto min-content;grid-template-rows:auto auto auto;font-size:1.4rem;line-height:2rem}.mx_ServerPicker>h3{font-weight:600;margin:0 0 20px;grid-column:1;grid-row:1}.mx_ServerPicker .mx_ServerPicker_help{width:20px;height:20px;background-color:#c1c6cd;border-radius:10px;grid-column:2;grid-row:1;margin-left:auto;text-align:center;color:#fff;font-size:16px;position:relative}.mx_ServerPicker .mx_ServerPicker_help:before{content:"";width:24px;height:24px;position:absolute;top:-2px;left:-2px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/i.80d84f3.svg);mask-image:url(../../img/element-icons/i.80d84f3.svg);background:#fff}.mx_ServerPicker .mx_ServerPicker_server{color:#232f32;grid-column:1;grid-row:2;margin-bottom:16px}.mx_ServerPicker .mx_ServerPicker_change{padding:0;font-size:inherit;grid-column:2;grid-row:2}.mx_ServerPicker .mx_ServerPicker_desc{margin-top:-12px;color:#8d99a5;grid-column:1/2;grid-row:3;margin-bottom:16px}.mx_ServerPicker_helpDialog .mx_Dialog_content{width:456px}.mx_Slider{position:relative;margin:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_Slider_dotContainer{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mx_Slider_bar,.mx_Slider_dotContainer{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_Slider_bar{-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;height:1em;width:100%;padding:0 .5em;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_Slider_bar>hr{width:100%;height:.4em;background-color:#c1c9d6;border:0}.mx_Slider_selection{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:calc(100% - 1em);height:1em;position:absolute;pointer-events:none}.mx_Slider_selectionDot{position:absolute;width:1.1em;height:1.1em;background-color:#0dbd8b;border-radius:50%;-webkit-box-shadow:0 0 6px #d3d3d3;box-shadow:0 0 6px #d3d3d3;z-index:10}.mx_Slider_selection>hr{margin:0;border:.2em solid #0dbd8b}.mx_Slider_dot{height:1em;width:1em;border-radius:50%;background-color:#c1c9d6;z-index:0}.mx_Slider_dotActive{background-color:#0dbd8b}.mx_Slider_dotValue{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#c1c9d6}.mx_Slider_labelContainer{width:1em}.mx_Slider_label{position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;left:-50%}.mx_Spinner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_MatrixChat_middlePanel .mx_Spinner{height:auto}.mx_Checkbox{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mx_Checkbox input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0}.mx_Checkbox input[type=checkbox]+label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_Checkbox input[type=checkbox]+label>.mx_Checkbox_background{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-negative:0;flex-shrink:0;height:1.6rem;width:1.6rem;size:.5rem;border:.15rem solid rgba(97,112,139,.5);-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:.4rem}.mx_Checkbox input[type=checkbox]+label>.mx_Checkbox_background img{display:none;height:100%;width:100%;-webkit-filter:invert(100%);filter:invert(100%)}.mx_Checkbox input[type=checkbox]:checked+label>.mx_Checkbox_background{background:#0dbd8b;border-color:#0dbd8b}.mx_Checkbox input[type=checkbox]:checked+label>.mx_Checkbox_background img{display:block}.mx_Checkbox input[type=checkbox]+label>:not(.mx_Checkbox_background){margin-left:10px}.mx_Checkbox input[type=checkbox]:disabled+label{opacity:.5;cursor:not-allowed}.mx_Checkbox input[type=checkbox]:checked:disabled+label>.mx_Checkbox_background{background-color:#0dbd8b;border-color:#0dbd8b}.mx_Checkbox input[type=checkbox].focus-visible+label .mx_Checkbox_background{outline-width:2px;outline-style:solid;outline-color:Highlight}@media (-webkit-min-device-pixel-ratio:0){.mx_Checkbox input[type=checkbox].focus-visible+label .mx_Checkbox_background{outline-color:-webkit-focus-ring-color;outline-style:auto}}.mx_RadioButton{position:relative;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.mx_RadioButton,.mx_RadioButton>.mx_RadioButton_content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_RadioButton>.mx_RadioButton_content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-left:8px;margin-right:8px}.mx_RadioButton .mx_RadioButton_spacer{-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;height:1.6rem;width:1.6rem}.mx_RadioButton>input[type=radio]{margin:0;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.mx_RadioButton>input[type=radio]+div{-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;height:1.6rem;width:1.6rem;margin-left:2px;border:.15rem solid #61708b;border-radius:1.6rem}.mx_RadioButton>input[type=radio]+div>div{-webkit-box-sizing:border-box;box-sizing:border-box;height:.8rem;width:.8rem;border-radius:.8rem}.mx_RadioButton>input[type=radio].focus-visible+div{outline-width:2px;outline-style:solid;outline-color:Highlight}@media (-webkit-min-device-pixel-ratio:0){.mx_RadioButton>input[type=radio].focus-visible+div{outline-color:-webkit-focus-ring-color;outline-style:auto}}.mx_RadioButton>input[type=radio]:checked+div{border-color:#0dbd8b}.mx_RadioButton>input[type=radio]:checked+div>div{background:#0dbd8b}.mx_RadioButton>input[type=radio]:disabled+div,.mx_RadioButton>input[type=radio]:disabled+div+span{opacity:.5;cursor:not-allowed}.mx_RadioButton>input[type=radio]:disabled+div{border-color:#61708b}.mx_RadioButton>input[type=radio]:checked:disabled+div>div{background-color:#61708b}.mx_RadioButton_outlined{border:1px solid #e3e8f0;border-radius:8px}.mx_RadioButton_checked{border-color:#0dbd8b}.mx_SyntaxHighlight{background:none!important;color:#747474!important}.mx_TextWithTooltip_tooltip{display:none}.mx_ToggleSwitch{-webkit-transition:background-color .2s ease-out .1s;transition:background-color .2s ease-out .1s;width:4.4rem;height:2rem;border-radius:1.5rem;padding:2px;background-color:#c1c9d6;opacity:.5}.mx_ToggleSwitch_enabled{cursor:pointer;opacity:1}.mx_ToggleSwitch.mx_ToggleSwitch_on{background-color:#0dbd8b}.mx_ToggleSwitch.mx_ToggleSwitch_on>.mx_ToggleSwitch_ball{left:calc(100% - 2rem)}.mx_ToggleSwitch_ball{position:relative;width:2rem;height:2rem;border-radius:2rem;background-color:#fff;-webkit-transition:left .15s ease-out .1s;transition:left .15s ease-out .1s;left:0}@-webkit-keyframes mx_fadein{0%{opacity:0}to{opacity:1}}@keyframes mx_fadein{0%{opacity:0}to{opacity:1}}@-webkit-keyframes mx_fadeout{0%{opacity:1}to{opacity:0}}@keyframes mx_fadeout{0%{opacity:1}to{opacity:0}}.mx_Tooltip_chevron{position:absolute;left:-7px;top:10px;width:0;height:0;border-top:7px solid transparent;border-right:7px solid #e7e7e7;border-bottom:7px solid transparent}.mx_Tooltip_chevron:after{content:"";width:0;height:0;border-top:6px solid transparent;border-right:6px solid #fff;border-bottom:6px solid transparent;position:absolute;top:-6px;left:1px}.mx_Tooltip{position:fixed;border-radius:8px;-webkit-box-shadow:4px 4px 12px 0 rgba(118,131,156,.6);box-shadow:4px 4px 12px 0 rgba(118,131,156,.6);z-index:6000;padding:10px;pointer-events:none;line-height:1.4rem;font-size:1.2rem;font-weight:500;max-width:200px;word-break:break-word;margin-right:50px;background-color:#27303a;color:#fff;border:0;text-align:center}.mx_Tooltip,.mx_Tooltip .mx_Tooltip_chevron{display:none}.mx_Tooltip.mx_Tooltip_visible{-webkit-animation:mx_fadein .2s forwards;animation:mx_fadein .2s forwards}.mx_Tooltip.mx_Tooltip_invisible{-webkit-animation:mx_fadeout .1s forwards;animation:mx_fadeout .1s forwards}.mx_Field_tooltip{background-color:#fff;color:#2e2f32;border:1px solid #e7e7e7;text-align:unset}.mx_Field_tooltip .mx_Tooltip_chevron{display:unset}.mx_Tooltip_title{font-weight:600}.mx_Tooltip_sub{opacity:.7;margin-top:4px}.mx_TooltipButton{display:inline-block;width:11px;height:11px;margin-left:5px;border:2px solid #dbdbdb;border-radius:20px;color:#dbdbdb;-webkit-transition:opacity .2s ease-in;transition:opacity .2s ease-in;opacity:.6;line-height:1.1rem;text-align:center;cursor:pointer}.mx_TooltipButton:hover{opacity:1}.mx_TooltipButton_container{position:relative;top:-18px;left:4px}.mx_TooltipButton_helpText{width:400px;text-align:start;line-height:17px!important}.mx_Validation{position:relative}.mx_Validation_details{padding-left:20px;margin:0}.mx_Validation_description+.mx_Validation_details{margin:1em 0 0}.mx_Validation_detail{position:relative;font-weight:400;list-style:none;margin-bottom:.5em}.mx_Validation_detail:last-child{margin-bottom:0}.mx_Validation_detail:before{content:"";position:absolute;width:14px;height:14px;top:0;left:-18px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.mx_Validation_detail.mx_Validation_valid{color:#0dbd8b}.mx_Validation_detail.mx_Validation_valid:before{-webkit-mask-image:url(../../img/feather-customised/check.5745b4e.svg);mask-image:url(../../img/feather-customised/check.5745b4e.svg);background-color:#0dbd8b}.mx_Validation_detail.mx_Validation_invalid{color:#ff4b55}.mx_Validation_detail.mx_Validation_invalid:before{-webkit-mask-image:url(../../img/feather-customised/x.9662221.svg);mask-image:url(../../img/feather-customised/x.9662221.svg);background-color:#ff4b55}.mx_EmojiPicker{width:340px;height:450px;border-radius:4px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_EmojiPicker_body{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-y:scroll;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.mx_EmojiPicker_header{padding:4px 8px 0;border-bottom:1px solid #e9edf1}.mx_EmojiPicker_anchor{padding:8px 8px 6px;border:none;border-bottom:2px solid transparent;background-color:transparent;border-radius:4px 4px 0 0;width:36px;height:38px}.mx_EmojiPicker_anchor:not(:disabled){cursor:pointer}.mx_EmojiPicker_anchor:not(:disabled):hover{background-color:#ddd;border-bottom:2px solid #0dbd8b}.mx_EmojiPicker_anchor:before{background-color:#2e2f32;content:"";display:inline-block;-webkit-mask-size:100%;mask-size:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;width:100%;height:100%}.mx_EmojiPicker_anchor:disabled:before{background-color:#ddd}.mx_EmojiPicker_anchor_activity:before{-webkit-mask-image:url(../../img/emojipicker/activity.921ec9f.svg);mask-image:url(../../img/emojipicker/activity.921ec9f.svg)}.mx_EmojiPicker_anchor_custom:before{-webkit-mask-image:url(../../img/emojipicker/custom.e1cd0fd.svg);mask-image:url(../../img/emojipicker/custom.e1cd0fd.svg)}.mx_EmojiPicker_anchor_flags:before{-webkit-mask-image:url(../../img/emojipicker/flags.1a8855e.svg);mask-image:url(../../img/emojipicker/flags.1a8855e.svg)}.mx_EmojiPicker_anchor_foods:before{-webkit-mask-image:url(../../img/emojipicker/foods.c6b220a.svg);mask-image:url(../../img/emojipicker/foods.c6b220a.svg)}.mx_EmojiPicker_anchor_nature:before{-webkit-mask-image:url(../../img/emojipicker/nature.6540b99.svg);mask-image:url(../../img/emojipicker/nature.6540b99.svg)}.mx_EmojiPicker_anchor_objects:before{-webkit-mask-image:url(../../img/emojipicker/objects.4d34f58.svg);mask-image:url(../../img/emojipicker/objects.4d34f58.svg)}.mx_EmojiPicker_anchor_people:before{-webkit-mask-image:url(../../img/emojipicker/people.e918580.svg);mask-image:url(../../img/emojipicker/people.e918580.svg)}.mx_EmojiPicker_anchor_places:before{-webkit-mask-image:url(../../img/emojipicker/places.7310322.svg);mask-image:url(../../img/emojipicker/places.7310322.svg)}.mx_EmojiPicker_anchor_recent:before{-webkit-mask-image:url(../../img/emojipicker/recent.13b42e2.svg);mask-image:url(../../img/emojipicker/recent.13b42e2.svg)}.mx_EmojiPicker_anchor_symbols:before{-webkit-mask-image:url(../../img/emojipicker/symbols.15a557d.svg);mask-image:url(../../img/emojipicker/symbols.15a557d.svg)}.mx_EmojiPicker_anchor_visible{border-bottom:2px solid #0dbd8b}.mx_EmojiPicker_search{margin:8px;border-radius:4px;border:1px solid #e7e7e7;background-color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_EmojiPicker_search input{-webkit-box-flex:1;-ms-flex:1;flex:1;border:none;padding:8px 12px;border-radius:4px 0}.mx_EmojiPicker_search button{border:none;background-color:inherit;margin:0;padding:8px;-ms-flex-item-align:center;align-self:center;width:32px;height:32px}.mx_EmojiPicker_search_clear{cursor:pointer}.mx_EmojiPicker_search_icon{width:16px;margin:8px}.mx_EmojiPicker_search_icon:not(.mx_EmojiPicker_search_clear){pointer-events:none}.mx_EmojiPicker_search_icon:after{-webkit-mask:url(../../img/emojipicker/search.973c315.svg) no-repeat;mask:url(../../img/emojipicker/search.973c315.svg) no-repeat;-webkit-mask-size:100%;mask-size:100%;background-color:#2e2f32;content:"";display:inline-block;width:100%;height:100%}.mx_EmojiPicker_search_clear:after{-webkit-mask-image:url(../../img/emojipicker/delete.f7344c5.svg);mask-image:url(../../img/emojipicker/delete.f7344c5.svg)}.mx_EmojiPicker_category{padding:0 12px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_EmojiPicker_category_label{width:304px}.mx_EmojiPicker_list{width:304px;padding:0;margin:0}.mx_EmojiPicker_item_wrapper{display:inline-block;list-style:none;width:38px;cursor:pointer}.mx_EmojiPicker_item{display:inline-block;font-size:2rem;padding:5px;width:100%;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;border-radius:4px}.mx_EmojiPicker_item:hover{background-color:#ddd}.mx_EmojiPicker_item_selected{color:rgba(0,0,0,.5);border:1px solid #0dbd8b;padding:4px}.mx_EmojiPicker_category_label,.mx_EmojiPicker_preview_name{font-size:1.6rem;font-weight:600;margin:0}.mx_EmojiPicker_footer{border-top:1px solid #e9edf1;min-height:72px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_EmojiPicker_preview_emoji{font-size:3.2rem;padding:8px 16px}.mx_EmojiPicker_preview_text{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_EmojiPicker_name{text-transform:capitalize}.mx_EmojiPicker_shortcode{color:#747474;font-size:1.4rem}.mx_EmojiPicker_shortcode:after,.mx_EmojiPicker_shortcode:before{content:":"}.mx_EmojiPicker_quick{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:distribute;justify-content:space-around}.mx_EmojiPicker_quick_header .mx_EmojiPicker_name{margin-right:4px}.mx_GroupPublicity_toggle{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:8px}.mx_GroupPublicity_toggle .mx_GroupTile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%}.mx_GroupPublicity_toggle .mx_ToggleSwitch{float:right}.mx_GroupRoomTile{position:relative;color:#2e2f32;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_GroupRoomList_wrapper{padding:10px}.mx_GroupUserSettings_groupPublicity_scrollbox{height:200px;border:1px solid transparent;border-radius:3px;overflow:hidden}.mx_CreateEvent:before{background-color:#91a1c0;-webkit-mask-image:url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);mask-image:url(../../img/element-icons/chat-bubbles.e2bd2cb.svg)}.mx_DateSeparator{clear:both;margin:4px 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.4rem;color:#9e9e9e}.mx_DateSeparator>hr{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;height:0;border:none;border-bottom:1px solid transparent}.mx_DateSeparator>div{margin:0 25px;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_EventTileBubble{background-color:#f2f5f8;padding:10px;border-radius:8px;margin:10px auto;max-width:75%;-webkit-box-sizing:border-box;box-sizing:border-box;display:grid;grid-template-columns:24px minmax(0,1fr) -webkit-min-content;grid-template-columns:24px minmax(0,1fr) min-content}.mx_EventTileBubble:after,.mx_EventTileBubble:before{position:relative;grid-column:1;grid-row:1/3;width:16px;height:16px;content:"";top:0;bottom:0;left:0;right:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;margin-top:4px}.mx_EventTileBubble .mx_EventTileBubble_subtitle,.mx_EventTileBubble .mx_EventTileBubble_title{overflow-wrap:break-word}.mx_EventTileBubble .mx_EventTileBubble_title{font-weight:600;font-size:1.5rem;grid-column:2;grid-row:1}.mx_EventTileBubble .mx_EventTileBubble_subtitle{font-size:1.2rem;grid-column:2;grid-row:2}.mx_MEmoteBody{white-space:pre-wrap}.mx_MEmoteBody_sender{cursor:pointer}.mx_MFileBody_download{color:#0dbd8b}.mx_MFileBody_download .mx_MFileBody_download_icon{width:12px;height:12px;-webkit-mask-size:12px;mask-size:12px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/download.4f331f0.svg);mask-image:url(../../img/download.4f331f0.svg);background-color:#0dbd8b;display:inline-block}.mx_MFileBody_download a{color:#0dbd8b;text-decoration:none;cursor:pointer}.mx_MFileBody_download object{margin-left:-16px;padding-right:4px;margin-top:-4px;vertical-align:middle;pointer-events:none}.mx_MFileBody_download iframe{margin:0;padding:0;border:none;width:100%;height:1.5em}.mx_MFileBody_info{background-color:#e3e8f0;border-radius:12px;width:243px;padding:6px 12px;color:#737d8c}.mx_MFileBody_info .mx_MFileBody_info_icon{background-color:#fff;border-radius:20px;display:inline-block;width:32px;height:32px;position:relative;vertical-align:middle;margin-right:12px}.mx_MFileBody_info .mx_MFileBody_info_icon:before{content:"";-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-image:url(../icons/attach.svg);mask-image:url(../icons/attach.svg);background-color:#737d8c;width:13px;height:15px;position:absolute;top:8px;left:9px}.mx_MFileBody_info .mx_MFileBody_info_filename{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:inline-block;width:calc(100% - 44px);vertical-align:middle}.mx_MImageBody{display:block;margin-right:34px}.mx_MImageBody_thumbnail{position:absolute;width:100%;height:100%;left:0;top:0;border-radius:4px}.mx_MImageBody_thumbnail_container{overflow:hidden;position:relative}.mx_MImageBody_thumbnail_spinner{position:absolute;left:50%;top:50%}.mx_MImageBody_thumbnail_spinner>*{-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.mx_MImageBody_gifLabel{position:absolute;display:block;top:0;left:14px;padding:5px;border-radius:5px;background:rgba(0,0,0,.7);border:2px solid rgba(0,0,0,.2);color:#fff;pointer-events:none}.mx_HiddenImagePlaceholder{position:absolute;left:0;top:0;bottom:0;right:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center;cursor:pointer;background-color:#f3f8fd}.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button{color:#0dbd8b}.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button span.mx_HiddenImagePlaceholder_eye{margin-right:8px;background-color:#0dbd8b;-webkit-mask-image:url(../../img/feather-customised/eye.52aa0d2.svg);mask-image:url(../../img/feather-customised/eye.52aa0d2.svg);display:inline-block;width:18px;height:14px}.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button span:not(.mx_HiddenImagePlaceholder_eye){vertical-align:text-bottom}.mx_EventTile:hover .mx_HiddenImagePlaceholder{background-color:#fff}.mx_MJitsiWidgetEvent:before{background-color:#91a1c0;-webkit-mask-image:url(../../img/element-icons/call/video-call.f465ed0.svg);mask-image:url(../../img/element-icons/call/video-call.f465ed0.svg)}.mx_MNoticeBody{white-space:pre-wrap;opacity:.6}.mx_MStickerBody_wrapper{padding:20px 0}.mx_MStickerBody_tooltip{position:absolute;top:50%}.mx_MStickerBody_hidden{max-width:220px;text-decoration:none;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_MTextBody{white-space:pre-wrap}span.mx_MVideoBody video.mx_MVideoBody{max-width:100%;height:auto;border-radius:4px}.mx_MVoiceMessageBody{display:inline-block}.mx_MessageActionBar{position:absolute;visibility:hidden;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;height:24px;line-height:2.4rem;border-radius:4px;background:#fff;top:-26px;right:8px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1}.mx_MessageActionBar:before{content:"";position:absolute;width:calc(66px + 100%);height:calc(20px + 100%);top:-12px;left:-58px;z-index:-1;cursor:auto}.mx_MessageActionBar>*{white-space:nowrap;display:inline-block;position:relative;border:1px solid #e9edf1;margin-left:-1px}.mx_MessageActionBar>:hover{border-color:#ddd;z-index:1}.mx_MessageActionBar>:first-child{border-radius:3px 0 0 3px}.mx_MessageActionBar>:last-child{border-radius:0 3px 3px 0}.mx_MessageActionBar>:only-child{border-radius:3px}.mx_MessageActionBar_maskButton{width:27px}.mx_MessageActionBar_maskButton:after{content:"";position:absolute;top:0;left:0;height:100%;width:100%;-webkit-mask-size:18px;mask-size:18px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#2e2f32}.mx_MessageActionBar_reactButton:after{-webkit-mask-image:url(../../img/element-icons/room/message-bar/emoji.af14771.svg);mask-image:url(../../img/element-icons/room/message-bar/emoji.af14771.svg)}.mx_MessageActionBar_replyButton:after{-webkit-mask-image:url(../../img/element-icons/room/message-bar/reply.5812741.svg);mask-image:url(../../img/element-icons/room/message-bar/reply.5812741.svg)}.mx_MessageActionBar_editButton:after{-webkit-mask-image:url(../../img/element-icons/room/message-bar/edit.688678e.svg);mask-image:url(../../img/element-icons/room/message-bar/edit.688678e.svg)}.mx_MessageActionBar_optionsButton:after{-webkit-mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);mask-image:url(../../img/element-icons/context-menu.829cc1a.svg)}.mx_MessageActionBar_resendButton:after{-webkit-mask-image:url(../../img/element-icons/retry.6cd23ad.svg);mask-image:url(../../img/element-icons/retry.6cd23ad.svg)}.mx_MessageActionBar_cancelButton:after{-webkit-mask-image:url(../../img/element-icons/trashcan.26f6c28.svg);mask-image:url(../../img/element-icons/trashcan.26f6c28.svg)}.mx_MessageTimestamp{color:#acacac;font-size:1rem;-webkit-font-feature-settings:"tnum";font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.mx_MjolnirBody{opacity:.4}.mx_ReactionsRow{margin:6px 0;color:#2e2f32}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton{position:relative;display:inline-block;visibility:hidden;width:24px;height:24px;vertical-align:middle;margin-left:4px}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton:before{content:"";position:absolute;height:100%;width:100%;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#8d99a5;-webkit-mask-image:url(../../img/element-icons/room/message-bar/emoji.af14771.svg);mask-image:url(../../img/element-icons/room/message-bar/emoji.af14771.svg)}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton.mx_ReactionsRow_addReactionButton_active{visibility:visible}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton.mx_ReactionsRow_addReactionButton_active:before,.mx_ReactionsRow .mx_ReactionsRow_addReactionButton:hover:before{background-color:#2e2f32}.mx_EventTile:hover .mx_ReactionsRow_addReactionButton{visibility:visible}.mx_ReactionsRow_showAll{text-decoration:none;font-size:1.2rem;line-height:2rem;margin-left:4px;vertical-align:middle}.mx_ReactionsRow_showAll:link,.mx_ReactionsRow_showAll:visited{color:#8d99a5}.mx_ReactionsRow_showAll:hover{color:#2e2f32}.mx_ReactionsRowButton{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;line-height:2rem;margin-right:6px;padding:1px 6px;border:1px solid #e9edf1;border-radius:10px;background-color:#f3f8fd;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.mx_ReactionsRowButton:hover{border-color:#ddd}.mx_ReactionsRowButton.mx_ReactionsRowButton_selected{background-color:#e9fff9;border-color:#0dbd8b}.mx_ReactionsRowButton.mx_AccessibleButton_disabled{cursor:not-allowed}.mx_ReactionsRowButton .mx_ReactionsRowButton_content{max-width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-right:4px}.mx_RedactedBody{white-space:pre-wrap;color:#61708b;vertical-align:middle;padding-left:20px;position:relative}.mx_RedactedBody:before{height:14px;width:14px;background-color:#61708b;-webkit-mask-image:url(../icons/trash.svg);mask-image:url(../icons/trash.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;content:"";position:absolute;top:1px;left:0}.mx_RoomAvatarEvent{opacity:.5;overflow-y:hidden}.mx_RoomAvatarEvent_avatar{display:inline;position:relative;top:5px}.mx_SenderProfile_name{font-weight:600}.mx_TextualEvent{opacity:.5;overflow-y:hidden}.mx_UnknownBody{white-space:pre-wrap}.mx_EventTile_content.mx_ViewSourceEvent{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:.6;font-size:1.2rem}.mx_EventTile_content.mx_ViewSourceEvent code,.mx_EventTile_content.mx_ViewSourceEvent pre{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_EventTile_content.mx_ViewSourceEvent pre{line-height:1.2;margin:3.5px 0}.mx_EventTile_content.mx_ViewSourceEvent .mx_ViewSourceEvent_toggle{width:12px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 center;mask-position:0 center;-webkit-mask-size:auto 12px;mask-size:auto 12px;visibility:hidden;background-color:#0dbd8b;-webkit-mask-image:url(../../img/feather-customised/maximise.dc32127.svg);mask-image:url(../../img/feather-customised/maximise.dc32127.svg)}.mx_EventTile_content.mx_ViewSourceEvent.mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle{-webkit-mask-position:0 bottom;mask-position:0 bottom;margin-bottom:7px;-webkit-mask-image:url(../../img/feather-customised/minimise.aec9142.svg);mask-image:url(../../img/feather-customised/minimise.aec9142.svg)}.mx_EventTile_content.mx_ViewSourceEvent:hover .mx_ViewSourceEvent_toggle{visibility:visible}.mx_cryptoEvent.mx_cryptoEvent_icon:before{background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:90%;mask-size:90%}.mx_cryptoEvent.mx_cryptoEvent_icon:after,.mx_cryptoEvent.mx_cryptoEvent_icon:before{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg)}.mx_cryptoEvent.mx_cryptoEvent_icon:after{background-color:#91a1c0}.mx_cryptoEvent.mx_cryptoEvent_icon_verified:after{-webkit-mask-image:url(../../img/e2e/verified.5be6c9f.svg);mask-image:url(../../img/e2e/verified.5be6c9f.svg);background-color:#0dbd8b}.mx_cryptoEvent.mx_cryptoEvent_icon_warning:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_cryptoEvent .mx_cryptoEvent_buttons,.mx_cryptoEvent .mx_cryptoEvent_state{grid-column:3;grid-row:1/3}.mx_cryptoEvent .mx_cryptoEvent_buttons{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_cryptoEvent .mx_cryptoEvent_state{width:130px;padding:10px 20px;margin:auto 0;text-align:center;color:#8d99a5;overflow-wrap:break-word;font-size:1.2rem}.mx_BaseCard{padding:0 8px;overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_BaseCard .mx_BaseCard_header{margin:8px 0}.mx_BaseCard .mx_BaseCard_header>h2{margin:0 44px;font-size:1.8rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back,.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close{position:absolute;background-color:rgba(141,151,165,.2);height:20px;width:20px;margin:12px;top:0;border-radius:10px}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back:before,.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close:before{content:"";position:absolute;height:20px;width:20px;top:0;left:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#91a1c0}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back{left:0}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back:before{-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-mask-size:22px;mask-size:22px;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close{right:0}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close:before{-webkit-mask-image:url(../../img/icons-close.11ff07c.svg);mask-image:url(../../img/icons-close.11ff07c.svg);-webkit-mask-size:8px;mask-size:8px}.mx_BaseCard .mx_AutoHideScrollbar{margin-right:-8px;padding-right:8px;min-height:0;width:100%;height:100%}.mx_BaseCard .mx_BaseCard_Group{margin:20px 0 16px}.mx_BaseCard .mx_BaseCard_Group>*{margin-left:12px;margin-right:12px}.mx_BaseCard .mx_BaseCard_Group>h1{color:#8d99a5;font-size:1.2rem;font-weight:500}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button{padding:10px 38px 10px 12px;margin:0;position:relative;font-size:1.3rem;height:20px;line-height:20px;border-radius:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button:hover{background-color:rgba(141,151,165,.1)}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button:after{content:"";position:absolute;top:10px;right:6px;height:20px;width:20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#c1c6cd;-webkit-transform:rotate(270deg);transform:rotate(270deg);-webkit-mask-size:20px;mask-size:20px;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button.mx_AccessibleButton_disabled{padding-right:12px}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button.mx_AccessibleButton_disabled:after{content:unset}.mx_BaseCard .mx_BaseCard_footer{padding-top:4px;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_kind_secondary{color:#737d8c;background-color:rgba(141,151,165,.2);font-weight:600;font-size:1.4rem}.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_disabled{cursor:not-allowed}.mx_FilePanel.mx_BaseCard,.mx_MemberList.mx_BaseCard,.mx_NotificationPanel.mx_BaseCard,.mx_UserInfo.mx_BaseCard{padding:32px 0 0}.mx_FilePanel.mx_BaseCard .mx_AutoHideScrollbar,.mx_MemberList.mx_BaseCard .mx_AutoHideScrollbar,.mx_NotificationPanel.mx_BaseCard .mx_AutoHideScrollbar,.mx_UserInfo.mx_BaseCard .mx_AutoHideScrollbar{margin-right:unset;padding-right:unset}.mx_EncryptionInfo_spinner .mx_Spinner{margin-top:25px;margin-bottom:15px}.mx_EncryptionInfo_spinner{text-align:center}.mx_RoomSummaryCard .mx_BaseCard_header{text-align:center;margin-top:20px}.mx_RoomSummaryCard .mx_BaseCard_header h2{font-weight:600;font-size:1.8rem;margin:12px 0 4px}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_alias{font-size:1.3rem;color:#737d8c}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_alias,.mx_RoomSummaryCard .mx_BaseCard_header h2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee{display:inline-block;position:relative;width:54px;height:54px;border-radius:50%;background-color:#737d8c;margin-top:-3px;margin-left:-10px;border:3px solid #f2f5f8}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee:before{content:"";position:absolute;top:13px;left:13px;height:28px;width:28px;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-image:url(../../img/e2e/disabled.6c5c6be.svg);mask-image:url(../../img/e2e/disabled.6c5c6be.svg);background-color:#fff}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_normal{background-color:#424446}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_normal:before{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg)}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_verified{background-color:#0dbd8b}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_verified:before{-webkit-mask-image:url(../../img/e2e/verified.5be6c9f.svg);mask-image:url(../../img/e2e/verified.5be6c9f.svg)}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_warning{background-color:#ff4b55}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_warning:before{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg)}.mx_RoomSummaryCard .mx_RoomSummaryCard_aboutGroup .mx_RoomSummaryCard_Button{padding-left:44px}.mx_RoomSummaryCard .mx_RoomSummaryCard_aboutGroup .mx_RoomSummaryCard_Button:before{content:"";position:absolute;top:8px;left:10px;height:24px;width:24px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#c1c6cd}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button{padding:0;height:auto;color:#8d99a5}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_icon_app{padding:10px 48px 10px 12px;text-overflow:ellipsis;overflow:hidden}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_icon_app .mx_BaseAvatar_image{vertical-align:top;margin-right:12px}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_icon_app span{color:#2e2f32}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options,.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle{position:absolute;top:0;height:100%;width:24px;padding:12px 4px;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:24px}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options:hover:after,.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle:hover:after{content:"";position:absolute;height:24px;width:24px;top:8px;left:0;border-radius:12px;background-color:rgba(141,151,165,.1)}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options:before,.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle:before{content:"";position:absolute;height:16px;width:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:16px;mask-size:16px;background-color:#c1c6cd}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle{right:24px}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle:before{-webkit-mask-image:url(../../img/element-icons/room/pin-upright.65783fb.svg);mask-image:url(../../img/element-icons/room/pin-upright.65783fb.svg)}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options{right:48px;display:none}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options:before{-webkit-mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg)}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button.mx_RoomSummaryCard_Button_pinned:after{opacity:.2}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button.mx_RoomSummaryCard_Button_pinned .mx_RoomSummaryCard_app_pinToggle:before{background-color:#0dbd8b}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:hover .mx_RoomSummaryCard_icon_app{padding-right:72px}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:hover .mx_RoomSummaryCard_app_options{display:unset}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:before{content:unset}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:after{top:8px;pointer-events:none}.mx_RoomSummaryCard .mx_AccessibleButton_kind_link{padding:0;margin-top:12px;margin-bottom:12px;font-size:1.3rem;font-weight:600}.mx_RoomSummaryCard_icon_people:before{-webkit-mask-image:url(../../img/element-icons/room/members.88c3e93.svg);mask-image:url(../../img/element-icons/room/members.88c3e93.svg)}.mx_RoomSummaryCard_icon_files:before{-webkit-mask-image:url(../../img/element-icons/room/files.5709c0c.svg);mask-image:url(../../img/element-icons/room/files.5709c0c.svg)}.mx_RoomSummaryCard_icon_share:before{-webkit-mask-image:url(../../img/element-icons/room/share.54dc3fb.svg);mask-image:url(../../img/element-icons/room/share.54dc3fb.svg)}.mx_RoomSummaryCard_icon_settings:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_UserInfo.mx_BaseCard{padding-top:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-y:auto;font-size:1.2rem}.mx_UserInfo.mx_BaseCard .mx_UserInfo_cancel{cursor:pointer;position:absolute;top:0;border-radius:4px;background-color:#f2f5f8;margin:9px;z-index:1}.mx_UserInfo.mx_BaseCard .mx_UserInfo_cancel div{height:16px;width:16px;padding:4px;-webkit-mask-image:url(../../img/minimise.871d2de.svg);mask-image:url(../../img/minimise.871d2de.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:7px center;mask-position:7px center;background-color:#91a1c0}.mx_UserInfo.mx_BaseCard h2{font-size:1.8rem;font-weight:600;margin:18px 0 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_container{padding:8px 16px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_separator{border-bottom:1px solid rgba(46,47,50,.1)}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetailsContainer{padding-top:0;padding-bottom:0;margin-bottom:8px}.mx_UserInfo.mx_BaseCard .mx_RoomTile_nameContainer{width:154px}.mx_UserInfo.mx_BaseCard .mx_RoomTile_badge{display:none}.mx_UserInfo.mx_BaseCard .mx_RoomTile_name{width:160px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar{margin:24px 32px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar>div{max-width:30vh;margin:0 auto;-webkit-transition:.5s;transition:.5s}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar>div>div{padding-top:100%;position:relative}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar>div>div *{border-radius:100%;position:absolute;top:0;left:0;width:100%!important;height:100%!important}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar .mx_BaseAvatar_initial{z-index:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:6rem!important;width:100%!important;-webkit-transition:font-size .5s;transition:font-size .5s}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image{cursor:-webkit-zoom-in;cursor:zoom-in}.mx_UserInfo.mx_BaseCard h3{text-transform:uppercase;color:#8d99a5;font-weight:600;font-size:1.2rem;margin:4px 0}.mx_UserInfo.mx_BaseCard p{margin:5px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile{text-align:center}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.8rem;line-height:2.5rem;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;word-break:break-all;text-overflow:ellipsis}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 .mx_E2EIcon{margin-top:3px;margin-right:4px;min-width:18px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_UserInfo_profileStatus{margin-top:12px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField{margin:6px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField,.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField .mx_UserInfo_roleDescription{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField .mx_UserInfo_roleDescription{margin:11px 0 12px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField .mx_Field{margin:0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_field{cursor:pointer;color:#0dbd8b;line-height:1.6rem;margin:8px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_field.mx_UserInfo_destructive{color:#ff4b55}.mx_UserInfo.mx_BaseCard .mx_UserInfo_statusMessage{font-size:1.1rem;opacity:.5;overflow:hidden;white-space:nowrap;text-overflow:clip}.mx_UserInfo.mx_BaseCard .mx_AutoHideScrollbar{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator){padding-top:16px;padding-bottom:0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator)>:not(h3){margin-left:8px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device{display:-webkit-box;display:-ms-flexbox;display:flex;margin:8px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device.mx_UserInfo_device_verified .mx_UserInfo_device_trusted{color:#0dbd8b}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device.mx_UserInfo_device_unverified .mx_UserInfo_device_trusted{color:#ff4b55}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device .mx_UserInfo_device_name{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:5px;word-break:break-word}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_E2EIcon{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin:2px 5px 0 0;width:12px;height:12px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_expand{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:11px}.mx_UserInfo.mx_BaseCard .mx_AccessibleButton.mx_AccessibleButton_hasKind{padding:8px 18px}.mx_UserInfo.mx_BaseCard .mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary{color:#0dbd8b;background-color:rgba(3,179,129,.16)}.mx_UserInfo.mx_BaseCard .mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger{color:#ff4b55;background-color:rgba(255,75,85,.16)}.mx_UserInfo.mx_BaseCard .mx_UserInfo_wideButton,.mx_UserInfo.mx_BaseCard .mx_VerificationShowSas .mx_AccessibleButton{display:block;margin:16px 0 8px}.mx_UserInfo.mx_BaseCard .mx_VerificationShowSas .mx_AccessibleButton+.mx_AccessibleButton{margin:8px 0}.mx_UserInfo.mx_UserInfo_smallAvatar .mx_UserInfo_avatar>div{max-width:72px;margin:0 auto}.mx_UserInfo.mx_UserInfo_smallAvatar .mx_UserInfo_avatar .mx_BaseAvatar_initial{font-size:40px!important}.mx_VerificationPanel_reciprocate_section .mx_E2EIcon,.mx_VerificationPanel_verified_section .mx_E2EIcon{margin:20px auto!important}.mx_UserInfo .mx_EncryptionPanel_cancel{-webkit-mask:url(../../img/feather-customised/cancel.23c2689.svg);mask:url(../../img/feather-customised/cancel.23c2689.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;width:14px;height:14px;background-color:#61708b;cursor:pointer;position:absolute;z-index:100;top:14px;right:14px}.mx_UserInfo .mx_VerificationPanel_qrCode{padding:4px 4px 0;background:#fff;border-radius:4px;width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:100%;margin:0 auto!important}.mx_UserInfo .mx_VerificationPanel_qrCode canvas{height:auto!important;width:100%!important;max-width:240px}.mx_UserInfo .mx_VerificationPanel_reciprocate_section .mx_FormButton{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;padding:10px;display:block;margin:10px 0}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:10px;margin-bottom:10px;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions>.mx_VerificationPanel_QRPhase_betweenText,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions>.mx_VerificationPanel_QRPhase_betweenText{width:50px;vertical-align:middle;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption{background-color:#f3f8fd;border-radius:10px;-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;padding:20px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;max-width:310px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_noQR,.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption canvas,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_noQR,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption canvas{width:220px!important;height:220px!important;background-color:#fff;border-radius:4px;vertical-align:middle;text-align:center;padding:10px}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption>p,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption>p{margin-top:0;font-weight:700}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_helpText,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_helpText{font-size:1.4rem;margin:30px 0;text-align:center}.mx_CompleteSecurity_body .mx_VerificationPanel_verified_section .mx_AccessibleButton,.mx_Dialog .mx_VerificationPanel_verified_section .mx_AccessibleButton{float:right}.mx_CompleteSecurity_body .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton,.mx_Dialog .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton{margin-left:10px;padding:7px 40px}.mx_CompleteSecurity_body .mx_VerificationPanel_reciprocate_section .mx_VerificationPanel_reciprocateButtons,.mx_Dialog .mx_VerificationPanel_reciprocate_section .mx_VerificationPanel_reciprocateButtons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_WidgetCard{height:100%;display:contents}.mx_WidgetCard .mx_AppTileFullWidth{max-width:unset;height:100%;border:0}.mx_WidgetCard .mx_BaseCard_header{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mx_WidgetCard .mx_BaseCard_header>h2{margin-right:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_WidgetCard .mx_BaseCard_header .mx_WidgetCard_optionsButton{position:relative;margin-right:44px;height:20px;width:20px;min-width:20px;padding:0}.mx_WidgetCard .mx_BaseCard_header .mx_WidgetCard_optionsButton:before{content:"";position:absolute;width:20px;height:20px;top:0;left:4px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);background-color:#737d8c}.mx_WidgetCard_maxPinnedTooltip{background-color:#ff4b55;color:#fff}.mx_AliasSettings_editable{border:0;border-bottom:1px solid #c7c7c7;padding:0;min-width:240px}.mx_AliasSettings_editable:focus{border-bottom:1px solid #0dbd8b;outline:none;-webkit-box-shadow:none;box-shadow:none}.mx_AliasSettings summary{cursor:pointer;color:#0dbd8b;font-weight:600;list-style:none}.mx_AliasSettings summary::-webkit-details-marker{display:none}.mx_AliasSettings .mx_AliasSettings_localAliasHeader{margin-top:35px}.mx_AppsDrawer{margin:5px 5px 5px 18px;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden}.mx_AppsDrawer .mx_AppsContainer_resizerHandleContainer{width:100%;height:10px;margin-top:-3px;display:block;position:relative}.mx_AppsDrawer .mx_AppsContainer_resizerHandle{cursor:ns-resize;width:100%!important;height:100%!important;position:absolute;bottom:0!important}.mx_AppsDrawer .mx_AppsContainer_resizerHandle:after{content:"";position:absolute;border-radius:3px;top:6px;bottom:0;left:calc(50% - 32px);right:calc(50% - 32px)}.mx_AppsDrawer:hover .mx_AppsContainer_resizerHandle:after{opacity:.8;background:#2e2f32}.mx_AppsDrawer:hover .mx_ResizeHandle_horizontal:before{position:absolute;left:3px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:64px;width:4px;border-radius:4px;content:"";background-color:#2e2f32;opacity:.8}.mx_AppsContainer_resizer{margin-bottom:8px}.mx_AppsContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;height:100%;width:100%;-webkit-box-flex:1;-ms-flex:1;flex:1;min-height:0}.mx_AppsContainer .mx_AppTile:first-of-type{border-left-width:8px;border-radius:10px 0 0 10px}.mx_AppsContainer .mx_AppTile:last-of-type{border-right-width:8px;border-radius:0 10px 10px 0}.mx_AppsContainer .mx_ResizeHandle_horizontal{position:relative}.mx_AppsContainer .mx_ResizeHandle_horizontal>div{width:0}.mx_AppsDrawer_2apps .mx_AppTile{width:50%}.mx_AppsDrawer_2apps .mx_AppTile:nth-child(3){-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;width:0!important;min-width:240px!important}.mx_AppsDrawer_3apps .mx_AppTile{width:33%}.mx_AppsDrawer_3apps .mx_AppTile:nth-child(3){-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;width:0!important;min-width:240px!important}.mx_AppTile{width:50%;min-width:240px;border-color:#f2f5f8;border-style:solid;border-width:8px 5px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#f2f5f8}.mx_AppTileFullWidth{width:100%!important;border:5px solid #f2f5f8;border-radius:8px;background-color:#f2f5f8}.mx_AppTile_mini,.mx_AppTileFullWidth{margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_AppTile_mini{width:100%;height:200px}.mx_AppTile .mx_AppTile_persistedWrapper,.mx_AppTile_mini .mx_AppTile_persistedWrapper,.mx_AppTileFullWidth .mx_AppTile_persistedWrapper{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_AppTile_persistedWrapper div{width:100%;height:100%}.mx_AppTileMenuBar{margin:0;font-size:1.2rem;background-color:#f2f5f8;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:100%;padding-top:2px;padding-bottom:8px}.mx_AppTileMenuBarTitle{line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mx_AppTileMenuBarTitle .mx_WidgetAvatar{margin-right:12px}.mx_AppTileMenuBarTitle>:last-child{margin-left:9px}.mx_AppTileMenuBarWidgets{float:right;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_AppTileMenuBar_iconButton{width:12px;height:12px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 center;mask-position:0 center;-webkit-mask-size:auto 12px;mask-size:auto 12px;background-color:#212121;margin:0 3px}.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout{-webkit-mask-image:url(../../img/feather-customised/widget/external-link.7ab6751.svg);mask-image:url(../../img/feather-customised/widget/external-link.7ab6751.svg)}.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_menu{-webkit-mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg)}.mx_AppTileBody{height:100%;background-color:#fff}.mx_AppTileBody,.mx_AppTileBody_mini{width:100%;overflow:hidden;border-radius:8px}.mx_AppTileBody_mini{height:200px}.mx_AppTile .mx_AppTileBody,.mx_AppTile_mini .mx_AppTileBody_mini,.mx_AppTileFullWidth .mx_AppTileBody{height:inherit;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_AppTileBody_mini iframe,.mx_AppTileBody iframe{border:none;width:100%;height:100%}.mx_AppTileBody iframe{overflow:hidden;padding:0;margin:0;display:block}.mx_AppPermissionWarning{text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.6rem}.mx_AppPermissionWarning_row{margin-bottom:12px}.mx_AppPermissionWarning_smallText{font-size:1.2rem}.mx_AppPermissionWarning_bolder{font-weight:600}.mx_AppPermissionWarning h4{margin:0;padding:0}.mx_AppPermissionWarning_helpIcon{margin-top:1px;margin-right:2px;width:10px;height:10px;display:inline-block}.mx_AppPermissionWarning_helpIcon:before{display:inline-block;background-color:#0dbd8b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:12px;mask-size:12px;width:12px;height:12px;-webkit-mask-position:center;mask-position:center;content:"";vertical-align:middle;-webkit-mask-image:url(../../img/feather-customised/help-circle.03fb6cf.svg);mask-image:url(../../img/feather-customised/help-circle.03fb6cf.svg)}.mx_AppPermissionWarning_tooltip{-webkit-box-shadow:none;box-shadow:none;background-color:#27303a;color:#fff;border:none;border-radius:3px;padding:6px 8px}.mx_AppPermissionWarning_tooltip ul{list-style-position:inside;padding-left:2px;margin-left:0}.mx_AppLoading{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:700;position:relative;height:100%;background-color:#fff!important;border-radius:8px}.mx_AppLoading .mx_Spinner{position:absolute;top:0;bottom:0;left:0;right:0}.mx_AppLoading_spinner_fadeIn{-webkit-animation-fill-mode:backwards;animation-fill-mode:backwards;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:.5s;animation-delay:.5s;-webkit-animation-name:mx_AppLoading_spinner_fadeIn_animation;animation-name:mx_AppLoading_spinner_fadeIn_animation}@-webkit-keyframes mx_AppLoading_spinner_fadeIn_animation{0%{opacity:0}to{opacity:1}}@keyframes mx_AppLoading_spinner_fadeIn_animation{0%{opacity:0}to{opacity:1}}.mx_AppLoading iframe{display:none}.mx_AppsDrawer_resizing .mx_AppTile_persistedWrapper{z-index:1}.mx_Autocomplete{position:absolute;bottom:0;z-index:1001;width:100%;background:#fff;border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;max-height:50vh;overflow:auto;-webkit-box-shadow:0 -16px 32px rgba(0,0,0,.04);box-shadow:0 -16px 32px rgba(0,0,0,.04)}.mx_Autocomplete_ProviderSection{border-bottom:1px solid transparent}.mx_Autocomplete_Completion_block{height:34px;display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 12px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#2e2f32}.mx_Autocomplete_Completion_block *{margin:0 3px}.mx_Autocomplete_Completion_pill{-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:2rem;height:3.4rem;padding:.4rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#2e2f32}.mx_Autocomplete_Completion_pill>*{margin-right:.3rem}.mx_Autocomplete_Completion_subtitle{font-style:italic;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_Autocomplete_Completion_description{color:grey}.mx_Autocomplete_Completion_container_pill{margin:12px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-flow:wrap;flex-flow:wrap}.mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_description,.mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_subtitle,.mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_title{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mx_Autocomplete_Completion.selected,.mx_Autocomplete_Completion:hover{background:#f2f5f8;outline:none}.mx_Autocomplete_provider_name{margin:12px;color:#2e2f32;font-weight:400;opacity:.4}.m_RoomView_auxPanel_stateViews{padding:5px 5px 5px 19px;border-bottom:1px solid transparent}.m_RoomView_auxPanel_stateViews_span a{text-decoration:none;color:inherit}.m_RoomView_auxPanel_stateViews_span[data-severity=warning]{font-weight:700;color:orange}.m_RoomView_auxPanel_stateViews_span[data-severity=alert]{font-weight:700;color:red}.m_RoomView_auxPanel_stateViews_span[data-severity=normal]{font-weight:400}.m_RoomView_auxPanel_stateViews_span[data-severity=notice]{font-weight:400;color:#a2a2a2}.m_RoomView_auxPanel_stateViews_delim{padding:0 5px;color:#a2a2a2}.mx_BasicMessageComposer{position:relative}.mx_BasicMessageComposer .mx_BasicMessageComposer_inputEmpty>:first-child:before{content:var(--placeholder);opacity:.333;width:0;height:0;overflow:visible;display:inline-block;pointer-events:none;white-space:nowrap}@-webkit-keyframes visualbell{0%{background-color:#faa}to{background-color:#fff}}.mx_BasicMessageComposer.mx_BasicMessageComposer_input_error{-webkit-animation:visualbell .2s;animation:visualbell .2s}.mx_BasicMessageComposer .mx_BasicMessageComposer_input{white-space:pre-wrap;word-wrap:break-word;outline:none;overflow-x:hidden}.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_RoomPill,.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_UserPill{position:relative}.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_RoomPill:before,.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_UserPill:before{content:var(--avatar-letter);width:1.6rem;height:1.6rem;margin-right:.24rem;background:var(--avatar-background),#fff;color:#fff;background-repeat:no-repeat;background-size:1.6rem;border-radius:1.6rem;text-align:center;font-weight:400;line-height:1.6rem;font-size:1.04rem}.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_disabled{pointer-events:none}.mx_BasicMessageComposer .mx_BasicMessageComposer_AutoCompleteWrapper{position:relative;height:0}.mx_E2EIcon{width:16px;height:16px;margin:0 9px;position:relative;display:block}.mx_E2EIcon_normal:after,.mx_E2EIcon_normal:before,.mx_E2EIcon_verified:after,.mx_E2EIcon_verified:before,.mx_E2EIcon_warning:after,.mx_E2EIcon_warning:before{content:"";display:block;position:absolute;top:0;bottom:0;left:0;right:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.mx_E2EIcon:before{background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:90%;mask-size:90%}.mx_E2EIcon:before,.mx_E2EIcon_bordered{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg)}.mx_E2EIcon_bordered{background-color:#f3f8fd}.mx_E2EIcon_bordered:after{-webkit-mask-size:75%;mask-size:75%}.mx_E2EIcon_bordered:before{-webkit-mask-size:65%;mask-size:65%}.mx_E2EIcon_warning:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_E2EIcon_normal:after{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);background-color:#91a1c0}.mx_E2EIcon_verified:after{-webkit-mask-image:url(../../img/e2e/verified.5be6c9f.svg);mask-image:url(../../img/e2e/verified.5be6c9f.svg);background-color:#0dbd8b}.mx_EditMessageComposer{padding:3px;margin:-7px -10px -5px;overflow:visible!important}.mx_EditMessageComposer .mx_BasicMessageComposer_input{border-radius:4px;border:1px solid transparent;background-color:#fff;max-height:200px;padding:3px 6px}.mx_EditMessageComposer .mx_BasicMessageComposer_input:focus{border-color:rgba(13,189,139,.5)}.mx_EditMessageComposer .mx_EditMessageComposer_buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;position:absolute;left:0;background:#f3f8fd;z-index:100;right:0;margin:0 -110px 0 0;padding:5px 147px 5px 5px}.mx_EditMessageComposer .mx_EditMessageComposer_buttons .mx_AccessibleButton{margin-left:5px;padding:5px 40px}.mx_EventTile_last .mx_EditMessageComposer_buttons{position:static;margin-right:-147px}.mx_EntityTile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#2e2f32;cursor:pointer}.mx_EntityTile .mx_E2EIcon{margin:0;position:absolute;bottom:2px;right:7px}.mx_EntityTile:hover{padding-right:30px;position:relative}.mx_EntityTile:hover:before{content:"";position:absolute;top:calc(50% - 8px);right:-8px;-webkit-mask:url(../../img/member_chevron.4163a20.png);mask:url(../../img/member_chevron.4163a20.png);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;width:16px;height:16px;background-color:#91a1c0}.mx_EntityTile .mx_PresenceLabel{display:none}.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_PresenceLabel{display:block}.mx_EntityTile_invite{display:table-cell;vertical-align:middle;margin-left:10px;width:26px}.mx_EntityTile_avatar,.mx_GroupRoomTile_avatar{padding:4px 12px 4px 3px;position:relative}.mx_EntityTile_name,.mx_GroupRoomTile_name{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow:hidden;font-size:1.4rem;text-overflow:ellipsis;white-space:nowrap}.mx_EntityTile_details{overflow:hidden;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_EntityTile_ellipsis .mx_EntityTile_name,.mx_EntityTile_invitePlaceholder .mx_EntityTile_name{font-style:italic;color:#2e2f32}.mx_EntityTile_offline_beenactive .mx_EntityTile_avatar,.mx_EntityTile_offline_beenactive .mx_EntityTile_name,.mx_EntityTile_unavailable .mx_EntityTile_avatar,.mx_EntityTile_unavailable .mx_EntityTile_name{opacity:.5}.mx_EntityTile_offline_neveractive .mx_EntityTile_avatar,.mx_EntityTile_offline_neveractive .mx_EntityTile_name,.mx_EntityTile_unknown .mx_EntityTile_avatar,.mx_EntityTile_unknown .mx_EntityTile_name{opacity:.25}.mx_EntityTile_subtext{font-size:1.1rem;opacity:.5;overflow:hidden;white-space:nowrap;text-overflow:clip}.mx_EntityTile_power{-webkit-padding-start:6px;padding-inline-start:6px;font-size:1rem;color:#8d99a5;max-width:6em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mx_EntityTile:hover .mx_EntityTile_power{display:none}.mx_EventTile{max-width:100%;clear:both;padding-top:18px;font-size:1.4rem;position:relative}.mx_EventTile.mx_EventTile_info{padding-top:1px}.mx_EventTile_avatar{top:14px;left:8px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar{top:.6rem;left:64px}.mx_EventTile_continuation{padding-top:0!important}.mx_EventTile_continuation.mx_EventTile_isEditing{padding-top:5px!important;margin-top:-5px}.mx_EventTile_isEditing{background-color:#f3f8fd}.mx_EventTile .mx_SenderProfile{color:#2e2f32;font-size:1.4rem;display:inline-block;overflow:hidden;cursor:pointer;padding-bottom:0;padding-top:0;margin:0;white-space:nowrap;text-overflow:ellipsis;max-width:calc(100% - 64px)}.mx_EventTile .mx_SenderProfile .mx_Flair{opacity:.7;margin-left:5px;display:inline-block;vertical-align:top;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_EventTile .mx_SenderProfile .mx_Flair img{vertical-align:-2px;margin-right:2px;border-radius:8px}.mx_EventTile_isEditing .mx_MessageTimestamp{visibility:hidden!important}.mx_EventTile .mx_MessageTimestamp{display:block;visibility:hidden;white-space:nowrap;left:0;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_EventTile_continuation .mx_EventTile_line{clear:both}.mx_EventTile_line,.mx_EventTile_reply{position:relative;padding-left:64px;border-radius:4px}.mx_EventListSummary .mx_EventTile_line,.mx_RoomView_timeline_rr_enabled .mx_EventTile_line{margin-right:110px}.mx_EventTile_bubbleContainer{display:grid;grid-template-columns:1fr 100px}.mx_EventTile_bubbleContainer .mx_EventTile_line{margin-right:0;grid-column:1/3;padding:0!important}.mx_EventTile_bubbleContainer .mx_EventTile_msgOption{grid-column:2}.mx_EventTile_reply{margin-right:10px}.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji{font-size:48px!important;line-height:57px!important}.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp{visibility:visible}.mx_EventTile_selected>div>a>.mx_MessageTimestamp{left:3px;width:auto}.mx_EventTile.focus-visible:focus-within>div>a>.mx_MessageTimestamp,.mx_EventTile.mx_EventTile_actionBarFocused>div>a>.mx_MessageTimestamp,.mx_EventTile:hover>div>a>.mx_MessageTimestamp,.mx_EventTile_last>div>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_EventTile.focus-visible:focus-within>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_EventTile.mx_EventTile_actionBarFocused>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_EventTile:hover>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_EventTile_last>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_ReplyThread .mx_EventTile>a>.mx_MessageTimestamp{visibility:visible}.mx_EventTile.focus-visible:focus-within .mx_MessageActionBar,.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,.mx_EventTile:hover .mx_MessageActionBar,[data-whatinput=keyboard] .mx_EventTile:focus-within .mx_MessageActionBar{visibility:visible}.mx_EventTile_selected>.mx_EventTile_line{border-left:4px solid #0dbd8b;padding-left:60px;background-color:#f6f7f8}.mx_EventTile_highlight,.mx_EventTile_highlight .markdown-body{color:#ff4b55}.mx_EventTile_highlight .markdown-body .mx_EventTile_line,.mx_EventTile_highlight .mx_EventTile_line{background-color:#fff8e3}.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line{padding-left:78px}.mx_EventTile.focus-visible:focus-within .mx_EventTile_line,.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line,.mx_EventTile:hover .mx_EventTile_line{background-color:#f6f7f8}.mx_EventTile_searchHighlight{border-radius:5px;padding-left:2px;padding-right:2px;cursor:pointer}.mx_EventTile_searchHighlight,.mx_EventTile_searchHighlight a{background-color:#0dbd8b;color:#fff}.mx_EventTile_receiptSending:before,.mx_EventTile_receiptSent:before{background-color:#8d99a5;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:14px;mask-size:14px;width:14px;height:14px;content:"";position:absolute;top:0;left:0;right:0}.mx_EventTile_receiptSent:before{-webkit-mask-image:url(../../img/element-icons/circle-sent.5079cbe.svg);mask-image:url(../../img/element-icons/circle-sent.5079cbe.svg)}.mx_EventTile_receiptSending:before{-webkit-mask-image:url(../../img/element-icons/circle-sending.bcca6aa.svg);mask-image:url(../../img/element-icons/circle-sending.bcca6aa.svg)}.mx_EventTile_contextual{opacity:.4}.mx_EventTile_msgOption{float:right;text-align:right;position:relative;width:90px;height:1px;margin-right:10px}.mx_EventTile_msgOption a{text-decoration:none}.mx_EventTile_readAvatars{position:relative;display:inline-block;width:14px;height:14px;top:-2.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1}.mx_EventTile_readAvatars .mx_BaseAvatar{position:absolute;display:inline-block;height:1.4rem;width:1.4rem;-webkit-transition:left .1s ease-out,top .3s ease-out;transition:left .1s ease-out,top .3s ease-out;-webkit-transition:left var(--transition-short) ease-out,top var(--transition-standard) ease-out;transition:left var(--transition-short) ease-out,top var(--transition-standard) ease-out}.mx_EventTile_readAvatarRemainder{color:#acacac;font-size:1.1rem;position:absolute}.mx_EventTile_content{display:block;overflow-y:hidden;overflow-x:hidden;margin-right:34px}.mx_EventTile_body{overflow-y:hidden}.mx_EventTile_spoiler{cursor:pointer}.mx_EventTile_spoiler_reason{color:#acacac;font-size:1.1rem}.mx_EventTile_spoiler_content{-webkit-filter:blur(5px) saturate(.1) sepia(1);filter:blur(5px) saturate(.1) sepia(1);-webkit-transition-duration:.5s;transition-duration:.5s}.mx_EventTile_spoiler.visible>.mx_EventTile_spoiler_content{-webkit-filter:none;filter:none}.mx_EventTile_e2eIcon{position:absolute;top:6px;left:44px;width:14px;height:14px;display:block;bottom:0;right:0;opacity:.2;background-repeat:no-repeat;background-size:contain}.mx_EventTile_e2eIcon:after,.mx_EventTile_e2eIcon:before{content:"";display:block;position:absolute;top:0;bottom:0;left:0;right:0;-webkit-mask-size:contain;mask-size:contain}.mx_EventTile_e2eIcon:after,.mx_EventTile_e2eIcon:before{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.mx_EventTile_e2eIcon:before{background-color:#fff;-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);-webkit-mask-size:90%;mask-size:90%}.mx_EventTile_e2eIcon_undecryptable:after,.mx_EventTile_e2eIcon_unverified:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_EventTile_e2eIcon_undecryptable,.mx_EventTile_e2eIcon_unverified{opacity:1}.mx_EventTile_e2eIcon_unknown:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_EventTile_e2eIcon_unknown{opacity:1}.mx_EventTile_e2eIcon_unencrypted:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_EventTile_e2eIcon_unencrypted{opacity:1}.mx_EventTile_e2eIcon_unauthenticated:after{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);background-color:#91a1c0}.mx_EventTile_e2eIcon_unauthenticated{opacity:1}.mx_EventTile_keyRequestInfo{font-size:1.2rem}.mx_EventTile_keyRequestInfo_text{opacity:.5}.mx_EventTile_keyRequestInfo_text a{color:#2e2f32;text-decoration:underline;cursor:pointer}.mx_EventTile_keyRequestInfo_tooltip_contents p{text-align:auto;margin-left:3px;margin-right:3px}.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child{margin-top:0}.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child{margin-bottom:0}.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line{padding-left:60px}.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line{border-left:4px solid #76cfa5}.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line{border-left:4px solid #e8bf37}.mx_EventTile:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line{padding-left:78px}.mx_EventTile:hover .mx_EventTile_e2eIcon{opacity:1}.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line>a>.mx_MessageTimestamp,.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line>a>.mx_MessageTimestamp,.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line>a>.mx_MessageTimestamp{width:38px}.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line>.mx_EventTile_e2eIcon,.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line>.mx_EventTile_e2eIcon,.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line>.mx_EventTile_e2eIcon{display:block;left:41px}.mx_EventTile_content .mx_EventTile_edited{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:1.2rem;color:#9e9e9e;display:inline-block;margin-left:9px;cursor:pointer}.mx_EventTile_body pre{border:1px solid transparent}.mx_EventTile_content .markdown-body{font-family:inherit!important;white-space:normal!important;line-height:inherit!important;color:inherit;font-size:1.4rem}.mx_EventTile_content .markdown-body code,.mx_EventTile_content .markdown-body pre{font-family:Inconsolata,Twemoji,Apple Color Emoji,Segoe UI Emoji,Courier,monospace,Noto Color Emoji!important;color:#333}.mx_EventTile_content .markdown-body pre{overflow-x:overlay;overflow-y:visible}.mx_EventTile_content .markdown-body code{background-color:#f8f8f8}.mx_EventTile_lineNumbers{float:left;margin:0 .5em 0 -1.5em;color:grey}.mx_EventTile_lineNumber{text-align:right;display:block;padding-left:1em}.mx_EventTile_collapsedCodeBlock{max-height:30vh}.mx_EventTile.focus-visible:focus-within .mx_EventTile_body pre,.mx_EventTile:hover .mx_EventTile_body pre{border:1px solid #e5e5e5}.mx_EventTile_pre_container{position:relative}.mx_EventTile_button{position:absolute;display:inline-block;visibility:hidden;cursor:pointer;top:8px;right:8px;width:19px;height:19px;background-color:#2e2f32}.mx_EventTile_buttonBottom{top:33px}.mx_EventTile_copyButton{-webkit-mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg)}.mx_EventTile_collapseButton{-webkit-mask-image:url(../../img/feather-customised/minimise.aec9142.svg);mask-image:url(../../img/feather-customised/minimise.aec9142.svg)}.mx_EventTile_collapseButton,.mx_EventTile_expandButton{-webkit-mask-size:75%;mask-size:75%;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mx_EventTile_expandButton{-webkit-mask-image:url(../../img/feather-customised/maximise.dc32127.svg);mask-image:url(../../img/feather-customised/maximise.dc32127.svg)}.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_collapseButton,.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton,.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_expandButton,.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_collapseButton,.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton,.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_expandButton{visibility:visible}.mx_EventTile_content .markdown-body h1,.mx_EventTile_content .markdown-body h2,.mx_EventTile_content .markdown-body h3,.mx_EventTile_content .markdown-body h4,.mx_EventTile_content .markdown-body h5,.mx_EventTile_content .markdown-body h6{font-family:inherit!important;color:inherit}.mx_EventTile_content .markdown-body h1,.mx_EventTile_content .markdown-body h2{font-size:1.5em;border-bottom:none!important}.mx_EventTile_content .markdown-body a{color:#238cf5}.mx_EventTile_content .markdown-body .hljs{display:inline!important}.mx_EventTile_tileError{color:red;text-align:center;margin-right:0}.mx_EventTile_tileError .mx_EventTile_line{padding-left:0;margin-right:0}.mx_EventTile_tileError .mx_EventTile_line span{padding:4px 8px}.mx_EventTile_tileError a{margin-left:1em}@media only screen and (max-width:480px){.mx_EventTile_line,.mx_EventTile_reply{padding-left:0;margin-right:0}.mx_EventTile_content{margin-top:10px;margin-right:0}}.mx_GroupLayout .mx_EventTile>.mx_SenderProfile{line-height:2rem;margin-left:64px}.mx_GroupLayout .mx_EventTile>.mx_EventTile_line{padding-left:64px}.mx_GroupLayout .mx_EventTile>.mx_EventTile_avatar{position:absolute}.mx_GroupLayout .mx_EventTile .mx_MessageTimestamp{position:absolute;width:46px}.mx_GroupLayout .mx_EventTile .mx_EventTile_line,.mx_GroupLayout .mx_EventTile .mx_EventTile_reply{padding-top:1px;padding-bottom:3px;line-height:2.2rem}.mx_GroupLayout .mx_EventTile_info .mx_EventTile_line{padding-left:82px}.mx_MatrixChat_useCompactLayout .mx_EventTile{padding-top:4px}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_line,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_reply{padding-top:0;padding-bottom:0}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info{padding-top:0;font-size:1.3rem}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_line,.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_reply{line-height:2rem}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar{top:4px}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_SenderProfile{font-size:1.3rem}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote{padding-top:8px}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote .mx_EventTile_avatar{top:2px}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote .mx_EventTile_line,.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote .mx_EventTile_reply{padding-top:0;padding-bottom:1px}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation{padding-top:0}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation .mx_EventTile_line,.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation .mx_EventTile_reply{padding-top:0;padding-bottom:0}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_avatar{top:2px}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_e2eIcon{top:3px}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_readAvatars{top:-2rem}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body blockquote,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body dl,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body ol,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body p,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body pre,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body table,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body ul{margin-bottom:4px}.mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList h2{margin-top:6px}.mx_IRCLayout{--name-width:70px;line-height:1.8rem!important}.mx_IRCLayout .mx_EventTile>a{text-decoration:none}.mx_IRCLayout .mx_EventTile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding-top:0}.mx_IRCLayout .mx_EventTile>*{margin-right:5px}.mx_IRCLayout .mx_EventTile>.mx_EventTile_msgOption{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5;-ms-flex-negative:0;flex-shrink:0}.mx_IRCLayout .mx_EventTile>.mx_EventTile_msgOption .mx_EventTile_readAvatars{top:.2rem}.mx_IRCLayout .mx_EventTile>.mx_SenderProfile{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-ms-flex-negative:0;flex-shrink:0;width:var(--name-width);text-overflow:ellipsis;text-align:left;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:visible;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_IRCLayout .mx_EventTile .mx_EventTile_line,.mx_IRCLayout .mx_EventTile .mx_EventTile_reply{padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;min-width:0}.mx_IRCLayout .mx_EventTile>.mx_EventTile_avatar{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;position:relative;top:0;left:0;-ms-flex-negative:0;flex-shrink:0;height:1.8rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_IRCLayout .mx_EventTile>.mx_EventTile_avatar>.mx_BaseAvatar,.mx_IRCLayout .mx_EventTile>.mx_EventTile_avatar>.mx_BaseAvatar>*{height:1.4rem!important;width:1.4rem!important;font-size:1rem!important;line-height:1.5rem!important}.mx_IRCLayout .mx_EventTile .mx_MessageTimestamp{font-size:1rem;width:45px;text-align:right}.mx_IRCLayout .mx_EventTile>.mx_EventTile_e2eIcon{position:absolute;right:unset;left:unset;top:0;padding:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;height:1.8rem;background-position:50%}.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_EventTile_e2eIcon,.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_MTextBody,.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_ReplyThread_wrapper_empty,.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_TextualEvent{display:inline-block}.mx_IRCLayout .mx_EventTile .mx_EventTile_reply{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.mx_IRCLayout .mx_EventTile .mx_EditMessageComposer_buttons{position:relative}.mx_IRCLayout .mx_EventTile_emote>.mx_EventTile_avatar{margin-left:calc(var(--name-width) + 19px)}.mx_IRCLayout blockquote{margin:0}.mx_IRCLayout .mx_EventListSummary>.mx_EventTile_line{padding-left:calc(var(--name-width) + 74px)}.mx_IRCLayout .mx_EventListSummary .mx_EventListSummary_avatars{padding:0;margin:0 9px 0 0}.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar{left:calc(var(--name-width) + 24px);top:0}.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_line{left:calc(var(--name-width) + 24px)}.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_TextualEvent{line-height:1.8rem}.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line{padding-left:0;border-left:0}.mx_IRCLayout .mx_SenderProfile_hover{background-color:#fff;overflow:hidden}.mx_IRCLayout .mx_SenderProfile_hover>span{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_IRCLayout .mx_SenderProfile_hover>span>.mx_SenderProfile_name{overflow:hidden;text-overflow:ellipsis;min-width:var(--name-width);text-align:end}.mx_IRCLayout .mx_SenderProfile:hover{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_IRCLayout .mx_SenderProfile_hover:hover{overflow:visible;width:max(auto,100%);z-index:10}.mx_IRCLayout .mx_ReplyThread{margin:0}.mx_IRCLayout .mx_ReplyThread .mx_SenderProfile{width:unset;max-width:var(--name-width)}.mx_IRCLayout .mx_ReplyThread .mx_SenderProfile_hover{background:transparent}.mx_IRCLayout .mx_ReplyThread .mx_SenderProfile_hover>span>.mx_SenderProfile_name{min-width:inherit}.mx_IRCLayout .mx_ReplyThread .mx_EventTile_emote>.mx_EventTile_avatar{margin-left:0}.mx_IRCLayout .mx_ReplyThread .mx_MessageTimestamp{width:auto}.mx_IRCLayout .mx_ReplyThread .mx_EventTile_e2eIcon{position:relative;-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.mx_IRCLayout .mx_ProfileResizer{position:absolute;height:100%;width:15px;left:calc(80px + var(--name-width));cursor:col-resize;z-index:100}.mx_IRCLayout .mx_Flair>img{height:1.4rem!important;width:1.4rem!important}.mx_JumpToBottomButton{z-index:1000;position:absolute;bottom:12px;right:24px;width:38px;height:50px;text-align:center}.mx_JumpToBottomButton_badge{position:relative;top:-12px;border-radius:16px;font-weight:700;font-size:1.2rem;line-height:1.4rem;text-align:center;display:inline-block;padding:0 4px;color:#fff;background-color:#61708b}.mx_JumpToBottomButton_highlight .mx_JumpToBottomButton_badge{color:#f2f5f8;background-color:#ff4b55}.mx_JumpToBottomButton_scrollDown{position:relative;height:38px;border-radius:19px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;border:1.3px solid #61708b;cursor:pointer}.mx_JumpToBottomButton_scrollDown:before{content:"";position:absolute;top:0;bottom:0;left:0;right:0;-webkit-mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;background:#61708b}.mx_LinkPreviewWidget{margin-top:15px;margin-right:15px;margin-bottom:15px;display:-webkit-box;display:-ms-flexbox;display:flex;border-left:4px solid #ddd;color:#888}.mx_LinkPreviewWidget_image{-webkit-box-flex:0;-ms-flex:0 0 100px;flex:0 0 100px;margin-left:15px;text-align:center;cursor:pointer}.mx_LinkPreviewWidget_caption{margin-left:15px;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.mx_LinkPreviewWidget_title{display:inline;font-weight:700;white-space:normal}.mx_LinkPreviewWidget_siteName{display:inline}.mx_LinkPreviewWidget_description{margin-top:8px;white-space:normal;word-wrap:break-word}.mx_LinkPreviewWidget_cancel{cursor:pointer;width:18px;height:18px}.mx_LinkPreviewWidget_cancel img{-webkit-box-flex:0;-ms-flex:0 0 40px;flex:0 0 40px;visibility:hidden}.mx_LinkPreviewWidget:hover .mx_LinkPreviewWidget_cancel img,.mx_LinkPreviewWidget_cancel.focus-visible:focus img{visibility:visible}.mx_MatrixChat_useCompactLayout .mx_LinkPreviewWidget{margin-top:6px;margin-bottom:6px}.mx_MemberInfo{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-y:auto;margin-top:8px}.mx_MemberInfo,.mx_MemberInfo_name{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_MemberInfo_name{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_MemberInfo_name>.mx_E2EIcon{margin-right:0}.mx_MemberInfo_cancel{height:16px;width:16px;padding:10px 0 10px 10px;cursor:pointer;-webkit-mask-image:url(../../img/minimise.871d2de.svg);mask-image:url(../../img/minimise.871d2de.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:16px center;mask-position:16px center;background-color:#91a1c0}.mx_MemberInfo_name h2{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-x:auto;max-height:50px}.mx_MemberInfo h2{font-size:1.8rem;font-weight:600;margin:16px 0 16px 15px}.mx_MemberInfo_container{margin:0 16px 16px}.mx_MemberInfo .mx_RoomTile_nameContainer{width:154px}.mx_MemberInfo .mx_RoomTile_badge{display:none}.mx_MemberInfo .mx_RoomTile_name{width:160px}.mx_MemberInfo_avatar{background:hsla(0,0%,91%,.77);margin-bottom:16px}.mx_MemberInfo_avatar>img{height:auto;width:100%;max-height:30vh;-o-object-fit:contain;object-fit:contain;display:block}.mx_MemberInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image{cursor:-webkit-zoom-in;cursor:zoom-in}.mx_MemberInfo_profile{margin-bottom:16px}.mx_MemberInfo h3{text-transform:uppercase;color:#9fa9ba;font-weight:700;font-size:1.2rem;margin:4px 0}.mx_MemberInfo_profileField{font-size:1.5rem;position:relative}.mx_MemberInfo_buttons{margin-bottom:16px}.mx_MemberInfo_field{cursor:pointer;font-size:1.5rem;color:#2e2f32;margin-left:8px;line-height:2.3rem}.mx_MemberInfo_createRoom{cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 8px}.mx_MemberInfo_createRoom_label{width:auto!important;cursor:pointer}.mx_MemberInfo label{font-size:1.3rem}.mx_MemberInfo label .mx_MemberInfo_label_text{display:inline-block;max-width:180px;vertical-align:text-top}.mx_MemberInfo input[type=radio]{vertical-align:-2px;margin-right:5px;margin-left:8px}.mx_MemberInfo_statusMessage{font-size:1.1rem;opacity:.5;overflow:hidden;white-space:nowrap;text-overflow:clip}.mx_MemberInfo .mx_MemberInfo_scrollContainer{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_GroupMemberList,.mx_GroupRoomList,.mx_MemberList{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-height:0}.mx_GroupMemberList .mx_Spinner,.mx_GroupRoomList .mx_Spinner,.mx_MemberList .mx_Spinner{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}.mx_GroupMemberList .mx_SearchBox,.mx_GroupRoomList .mx_SearchBox,.mx_MemberList .mx_SearchBox{margin-bottom:5px}.mx_GroupMemberList h2,.mx_GroupRoomList h2,.mx_MemberList h2{text-transform:uppercase;color:#3d3b39;font-weight:600;font-size:1.3rem;padding-left:3px;padding-right:12px;margin-top:8px;margin-bottom:4px}.mx_GroupMemberList .mx_AutoHideScrollbar,.mx_GroupRoomList .mx_AutoHideScrollbar,.mx_MemberList .mx_AutoHideScrollbar{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_GroupMemberList .mx_RightPanel_scopeHeader,.mx_GroupRoomList .mx_RightPanel_scopeHeader,.mx_MemberList .mx_RightPanel_scopeHeader{margin-top:-8px}.mx_GroupMemberList_query,.mx_GroupRoomList_query{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_MemberList_chevron{position:absolute;right:35px;margin-top:-15px}.mx_MemberList_border{overflow-y:auto;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0px}.mx_MemberList_query{height:16px}.mx_MemberList_query[type=text]{font-size:1.2rem}.mx_MemberList_wrapper{padding:10px}.mx_MemberList_invite{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;position:relative;background-color:#0dbd8b;border-radius:4px;margin:5px 9px 9px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:#fff;font-weight:600}.mx_MemberList_invite.mx_AccessibleButton_disabled{background-color:#888;cursor:not-allowed}.mx_MemberList_invite span{padding:8px 0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mx_MemberList_invite span:before{content:"";display:inline-block;background-color:#fff;-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:20px;mask-size:20px;width:20px;height:20px;margin-right:5px}.mx_MemberList_inviteCommunity span:before{-webkit-mask-image:url(../../img/icon-invite-people.d82f491.svg);mask-image:url(../../img/icon-invite-people.d82f491.svg)}.mx_MemberList_addRoomToCommunity span:before{-webkit-mask-image:url(../../img/icons-room-add.bd36e26.svg);mask-image:url(../../img/icons-room-add.bd36e26.svg)}.mx_MessageComposer_wrapper{vertical-align:middle;margin:auto;border-top:1px solid transparent;position:relative;padding-left:82px;padding-right:6px}.mx_MessageComposer_replaced_wrapper{margin-left:auto;margin-right:auto}.mx_MessageComposer_replaced_valign{height:60px;display:table-cell;vertical-align:middle}.mx_MessageComposer_roomReplaced_icon{float:left;margin-right:20px;margin-top:5px;width:31px;height:31px}.mx_MessageComposer_roomReplaced_header{font-weight:700}.mx_MessageComposer_autocomplete_wrapper{position:relative;height:0}.mx_MessageComposer_row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.mx_MessageComposer .mx_MessageComposer_avatar{position:absolute;left:26px}.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar{display:block}.mx_MessageComposer_composecontrols{width:100%}.mx_MessageComposer_e2eIcon.mx_E2EIcon{position:absolute;left:60px;margin-right:0;margin-left:3px;width:12px;height:12px}.mx_MessageComposer_noperm_error{width:100%;height:60px;font-style:italic;color:#888;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_MessageComposer_input_wrapper{cursor:text}.mx_MessageComposer_input,.mx_MessageComposer_input_wrapper{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_MessageComposer_input{vertical-align:middle;min-height:60px;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;font-size:1.4rem;margin-right:6px}.mx_MessageComposer_editor{width:100%;max-height:120px;min-height:19px;overflow-y:auto;overflow-x:hidden;word-break:break-word}.mx_MessageComposer_editor>:first-child{margin-top:0!important}.mx_MessageComposer_editor>:last-child{margin-bottom:0!important}@keyframes visualbell{0%{background-color:#faa}to{background-color:#fff}}.mx_MessageComposer_input_error{-webkit-animation:visualbell .2s;animation:visualbell .2s}.mx_MessageComposer_input blockquote{color:#777;margin:0 0 16px;padding:0 15px;border-left:4px solid #ddd}.mx_MessageComposer_input pre{background-color:rgba(0,0,0,.04);border-radius:3px;padding:10px}.mx_MessageComposer_input textarea{display:block;width:100%;padding:0;margin-top:6px;margin-bottom:6px;border:0;resize:none;outline:none;-webkit-box-shadow:none;box-shadow:none;color:#2e2f32;background-color:#fff;font-size:1.4rem;max-height:120px;overflow:auto;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji}.mx_MessageComposer_input textarea::-moz-placeholder{line-height:100%;color:#0dbd8b;opacity:1}.mx_MessageComposer_input textarea::-webkit-input-placeholder{color:#0dbd8b}.mx_MessageComposer_button_highlight{background:rgba(13,189,139,.25)}.mx_MessageComposer_button_highlight:before{background-color:#0dbd8b!important}.mx_MessageComposer_button{position:relative;margin-right:6px;cursor:pointer;height:26px;width:26px;border-radius:100%}.mx_MessageComposer_button:before{content:"";position:absolute;top:3px;left:3px;height:20px;width:20px;background-color:#c1c6cd;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}.mx_MessageComposer_button:hover{background:rgba(13,189,139,.1)}.mx_MessageComposer_button:hover:before{background-color:#0dbd8b}.mx_MessageComposer_button.mx_MessageComposer_hangup:not(.mx_AccessibleButton_disabled):before{background-color:#ff4b55}.mx_MessageComposer_upload:before{-webkit-mask-image:url(../icons/attach.svg);mask-image:url(../icons/attach.svg)}.mx_MessageComposer_voiceMessage:before{-webkit-mask-image:url(../../img/voip/mic-on-mask.97ec7a0.svg);mask-image:url(../../img/voip/mic-on-mask.97ec7a0.svg)}.mx_MessageComposer_emoji:before{-webkit-mask-image:url(../../img/element-icons/room/composer/emoji.52d7369.svg);mask-image:url(../../img/element-icons/room/composer/emoji.52d7369.svg)}.mx_MessageComposer_stickers:before{-webkit-mask-image:url(../../img/element-icons/room/composer/sticker.8dbe5ec.svg);mask-image:url(../../img/element-icons/room/composer/sticker.8dbe5ec.svg)}.mx_MessageComposer_sendMessage{cursor:pointer;position:relative;margin-right:6px;width:32px;height:32px;border-radius:100%;background-color:#0dbd8b}.mx_MessageComposer_sendMessage:before{position:absolute;height:16px;width:16px;top:8px;left:9px;-webkit-mask-image:url(../../img/element-icons/send-message.a4e9cf8.svg);mask-image:url(../../img/element-icons/send-message.a4e9cf8.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;background-color:#fff;content:""}.mx_MessageComposer_formatting{cursor:pointer;margin:0 11px;width:24px;height:18px}.mx_MessageComposer_formatbar_wrapper{width:100%;background-color:#fff;-webkit-box-shadow:inset 0 1px 0 0 rgba(0,0,0,.08);box-shadow:inset 0 1px 0 0 rgba(0,0,0,.08)}.mx_MessageComposer_formatbar{margin:auto;display:-webkit-box;display:-ms-flexbox;display:flex;height:30px;-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:62px;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1rem;color:#888}.mx_MessageComposer_formatbar *{margin-right:4px}.mx_MessageComposer_format_button,.mx_MessageComposer_formatbar_cancel,.mx_MessageComposer_formatbar_markdown{cursor:pointer}.mx_MessageComposer_formatbar_cancel{margin-right:22px}.mx_MessageComposer_formatbar_markdown{height:17px;width:30px;margin-right:64px}.mx_MessageComposer_input_markdownIndicator{height:10px;width:12px;padding:4px 4px 4px 0}.mx_MessageComposer_formatbar_markdown,.mx_MessageComposer_input_markdownIndicator{cursor:pointer;-webkit-mask-image:url(../../img/markdown.6905ba8.svg);mask-image:url(../../img/markdown.6905ba8.svg);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#c1c6cd}.mx_MessageComposer_formatbar_markdown.mx_MessageComposer_markdownDisabled,.mx_MessageComposer_input_markdownIndicator.mx_MessageComposer_markdownDisabled{opacity:.2}.mx_MatrixChat_useCompactLayout .mx_MessageComposer_input{min-height:50px}.mx_MatrixChat_useCompactLayout .mx_MessageComposer_noperm_error{height:50px}.mx_MessageComposerFormatBar{display:none;width:130px;height:24px;position:absolute;cursor:pointer;border-radius:4px;background-color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1000}.mx_MessageComposerFormatBar.mx_MessageComposerFormatBar_shown{display:block}.mx_MessageComposerFormatBar>*{white-space:nowrap;display:inline-block;position:relative;border:1px solid #e9edf1;margin-left:-1px}.mx_MessageComposerFormatBar>:hover{border-color:#ddd;z-index:1}.mx_MessageComposerFormatBar>:first-child{border-radius:3px 0 0 3px}.mx_MessageComposerFormatBar>:last-child{border-radius:0 3px 3px 0}.mx_MessageComposerFormatBar>:only-child{border-radius:3px}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button{width:27px;height:24px;-webkit-box-sizing:border-box;box-sizing:border-box;background:none;vertical-align:middle}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button:after{content:"";position:absolute;top:0;left:0;height:100%;width:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#2e2f32}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconBold:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/bold.0d80ac7.svg);mask-image:url(../../img/element-icons/room/format-bar/bold.0d80ac7.svg)}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconItalic:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/italic.bf18054.svg);mask-image:url(../../img/element-icons/room/format-bar/italic.bf18054.svg)}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconStrikethrough:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/strikethrough.0264f7b.svg);mask-image:url(../../img/element-icons/room/format-bar/strikethrough.0264f7b.svg)}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconQuote:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/quote.560cd8f.svg);mask-image:url(../../img/element-icons/room/format-bar/quote.560cd8f.svg)}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconCode:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/code.27444ba.svg);mask-image:url(../../img/element-icons/room/format-bar/code.27444ba.svg)}.mx_MessageComposerFormatBar_buttonTooltip{white-space:nowrap;font-size:1.3rem;font-weight:600;min-width:54px;text-align:center}.mx_MessageComposerFormatBar_buttonTooltip .mx_MessageComposerFormatBar_tooltipShortcut{font-size:.9rem;opacity:.7}.mx_NewRoomIntro{margin:40px 0 48px 64px}.mx_NewRoomIntro .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover):after,.mx_NewRoomIntro .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover):before{content:unset}.mx_NewRoomIntro .mx_AccessibleButton_kind_link{padding:0;font-size:inherit}.mx_NewRoomIntro .mx_NewRoomIntro_buttons{margin-top:28px}.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton{line-height:2.4rem;display:inline-block}.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton+.mx_AccessibleButton{margin-left:12px}.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton:not(.mx_AccessibleButton_kind_primary_outline):before{content:"";display:inline-block;background-color:#fff;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:20px;mask-size:20px;width:20px;height:20px;margin-right:5px;vertical-align:text-bottom}.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_NewRoomIntro_inviteButton:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_NewRoomIntro>h2{margin-top:24px;font-size:2.4rem;font-weight:600}.mx_NewRoomIntro>p{margin:0;font-size:1.5rem;color:#737d8c}.mx_NotificationBadge:not(.mx_NotificationBadge_visible){display:none}.mx_NotificationBadge.mx_NotificationBadge_visible{background-color:#61708b;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_highlighted{background-color:#ff4b55}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_dot{background-color:#2e2f32;width:6px;height:6px;border-radius:6px}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_2char{width:1.6rem;height:1.6rem;border-radius:1.6rem}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_3char{width:2.6rem;height:1.6rem;border-radius:1.6rem}.mx_NotificationBadge.mx_NotificationBadge_visible .mx_NotificationBadge_count{font-size:1rem;line-height:1.4rem;color:#fff}.mx_PinnedEventTile{min-height:40px;margin-bottom:5px;width:100%;border-radius:5px}.mx_PinnedEventTile:hover{background-color:#f6f7f8}.mx_PinnedEventTile .mx_PinnedEventTile_sender,.mx_PinnedEventTile .mx_PinnedEventTile_timestamp{color:#868686;font-size:.8em;vertical-align:top;display:inline-block;padding-bottom:3px}.mx_PinnedEventTile .mx_PinnedEventTile_timestamp{padding-left:15px;display:none}.mx_PinnedEventTile .mx_PinnedEventTile_senderAvatar .mx_BaseAvatar{float:left;margin-right:10px}.mx_PinnedEventTile_actions{float:right;margin-right:10px;display:none}.mx_PinnedEventTile:hover .mx_PinnedEventTile_timestamp{display:inline-block}.mx_PinnedEventTile:hover .mx_PinnedEventTile_actions{display:block}.mx_PinnedEventTile_unpinButton{display:inline-block;cursor:pointer;margin-left:10px}.mx_PinnedEventTile_gotoButton{display:inline-block;font-size:.7em}.mx_PinnedEventTile_message{margin-left:50px;position:relative;top:0;left:0}.mx_PinnedEventsPanel{border-top:1px solid transparent}.mx_PinnedEventsPanel_body{max-height:300px;overflow-y:auto;padding-bottom:15px}.mx_PinnedEventsPanel_header{margin:0;padding-top:8px;padding-bottom:15px}.mx_PinnedEventsPanel_cancel{margin:12px;float:right;display:inline-block}.mx_PresenceLabel{font-size:1.1rem;opacity:.5}.mx_ReplyPreview{background:#fff;border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;max-height:50vh;overflow:auto;-webkit-box-shadow:0 -16px 32px rgba(0,0,0,.04);box-shadow:0 -16px 32px rgba(0,0,0,.04)}.mx_ReplyPreview_section{border-bottom:1px solid transparent}.mx_ReplyPreview_header{margin:12px;color:#2e2f32;font-weight:400;opacity:.4}.mx_ReplyPreview_title{float:left}.mx_ReplyPreview_cancel{float:right;cursor:pointer}.mx_ReplyPreview_clear{clear:both}.mx_RoomBreadcrumbs{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_crumb{margin-right:8px;width:32px}.mx_RoomBreadcrumbs.mx_RoomBreadcrumbs-enter{margin-left:-40px}.mx_RoomBreadcrumbs.mx_RoomBreadcrumbs-enter-active{margin-left:0;-webkit-transition:margin-left .64s cubic-bezier(.66,.02,.36,1);transition:margin-left .64s cubic-bezier(.66,.02,.36,1)}.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_placeholder{font-weight:600;font-size:1.4rem;line-height:32px;height:32px}.mx_RoomBreadcrumbs_Tooltip{margin-left:-42px;margin-top:-42px}.mx_RoomHeader{-webkit-box-flex:0;-ms-flex:0 0 50px;flex:0 0 50px;border-bottom:1px solid transparent;background-color:#fff}.mx_RoomHeader .mx_RoomHeader_e2eIcon{height:12px;width:12px}.mx_RoomHeader .mx_RoomHeader_e2eIcon .mx_E2EIcon{margin:0;position:absolute;height:12px;width:12px}.mx_RoomHeader_wrapper{margin:auto;height:50px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:0;padding:0 10px 0 18px}.mx_RoomHeader_wrapper .mx_InviteOnlyIcon_large{margin:0}.mx_RoomHeader_spinner{-webkit-box-flex:1;-ms-flex:1;flex:1;height:36px;padding-left:12px;padding-right:12px}.mx_RoomHeader_textButton{vertical-align:middle;border:0;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;padding:7px 1.5em;cursor:pointer;display:inline-block;outline:none;margin-right:8px;margin-top:-5px}.mx_RoomHeader_textButton_danger{background-color:#ff4b55}.mx_RoomHeader_cancelButton{cursor:pointer;padding-left:12px;padding-right:12px}.mx_RoomHeader_buttons{background-color:#fff}.mx_RoomHeader_buttons,.mx_RoomHeader_info{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomHeader_info{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomHeader_simpleHeader{line-height:5.2rem;color:#45474a;font-size:1.8rem;font-weight:600;overflow:hidden;margin-left:63px;text-overflow:ellipsis;width:100%}.mx_RoomHeader_simpleHeader .mx_RoomHeader_cancelButton{float:right}.mx_RoomHeader_simpleHeader .mx_RoomHeader_icon{margin-left:14px;margin-right:24px;vertical-align:-4px}.mx_RoomHeader_name{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;overflow:hidden;color:#45474a;font-weight:600;font-size:1.8rem;margin:0 7px;border-bottom:1px solid transparent;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomHeader_nametext{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.mx_RoomHeader_settingsHint{color:#a2a2a2!important}.mx_RoomHeader_searchStatus{font-weight:400;opacity:.6}.mx_RoomHeader_avatar,.mx_RoomHeader_avatarPicker,.mx_RoomHeader_avatarPicker_edit,.mx_RoomHeader_avatarPicker_remove,.mx_RoomHeader_name{cursor:pointer}.mx_RoomHeader_avatarPicker_remove{position:absolute;top:-11px;right:-9px}.mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable){color:#0dbd8b}.mx_RoomHeader_placeholder{color:#a2a2a2!important}.mx_RoomHeader_editable{border-bottom:1px solid #c7c7c7!important;min-width:150px;cursor:text}.mx_RoomHeader_editable:focus{border-bottom:1px solid #0dbd8b!important;outline:none;-webkit-box-shadow:none;box-shadow:none}.mx_RoomHeader_topic{-webkit-box-flex:1;-ms-flex:1;flex:1;color:#9e9e9e;font-weight:400;font-size:1.3rem;margin:4px 7px 0;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid transparent;line-height:1.2em;max-height:2.4em}.mx_RoomHeader_avatar{-webkit-box-flex:0;-ms-flex:0;flex:0;margin:0 6px 0 7px;position:relative}.mx_RoomHeader_avatar .mx_BaseAvatar_image{-o-object-fit:cover;object-fit:cover}.mx_RoomHeader_avatarPicker{position:relative}.mx_RoomHeader_avatarPicker_edit{position:absolute;left:16px;top:18px}.mx_RoomHeader_avatarPicker_edit>label{cursor:pointer}.mx_RoomHeader_avatarPicker_edit>input{display:none}.mx_RoomHeader_button{position:relative;margin-left:1px;margin-right:1px;cursor:pointer;height:32px;width:32px;border-radius:100%}.mx_RoomHeader_button:before{content:"";position:absolute;top:4px;left:4px;height:24px;width:24px;background-color:#c1c6cd;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_RoomHeader_button:hover{background:rgba(13,189,139,.1)}.mx_RoomHeader_button:hover:before{background-color:#0dbd8b}.mx_RoomHeader_forgetButton:before{-webkit-mask-image:url(../../img/element-icons/leave.bb917e7.svg);mask-image:url(../../img/element-icons/leave.bb917e7.svg);width:26px}.mx_RoomHeader_appsButton:before{-webkit-mask-image:url(../../img/element-icons/room/apps.5ee9f78.svg);mask-image:url(../../img/element-icons/room/apps.5ee9f78.svg)}.mx_RoomHeader_appsButton_highlight:before{background-color:#0dbd8b}.mx_RoomHeader_searchButton:before{-webkit-mask-image:url(../../img/element-icons/room/search-inset.db6314d.svg);mask-image:url(../../img/element-icons/room/search-inset.db6314d.svg)}.mx_RoomHeader_voiceCallButton:before{-webkit-mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);-webkit-mask-size:20px;mask-size:20px;-webkit-mask-position:center;mask-position:center}.mx_RoomHeader_videoCallButton:before{-webkit-mask-image:url(../../img/element-icons/call/video-call.f465ed0.svg);mask-image:url(../../img/element-icons/call/video-call.f465ed0.svg)}.mx_RoomHeader_showPanel{height:16px}.mx_RoomHeader_voipButton{display:table-cell}.mx_RoomHeader_voipButtons{margin-top:18px}.mx_RoomHeader_pinnedButton:before{-webkit-mask-image:url(../../img/element-icons/room/pin.6ab67ed.svg);mask-image:url(../../img/element-icons/room/pin.6ab67ed.svg)}.mx_RoomHeader_pinsIndicator{position:absolute;right:0;bottom:4px;width:8px;height:8px;border-radius:8px;background-color:#8d99a5}.mx_RoomHeader_pinsIndicatorUnread{background-color:#ff4b55}@media only screen and (max-width:480px){.mx_RoomHeader_wrapper{padding:0}.mx_RoomHeader{overflow:hidden}}.mx_RoomList{padding-right:7px}.mx_RoomList_iconPlus:before{-webkit-mask-image:url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);mask-image:url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg)}.mx_RoomList_iconHash:before{-webkit-mask-image:url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);mask-image:url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg)}.mx_RoomList_iconExplore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg)}.mx_RoomList_iconBrowse:before{-webkit-mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg);mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg)}.mx_RoomList_iconDialpad:before{-webkit-mask-image:url(../../img/element-icons/roomlist/dialpad.37f876f.svg);mask-image:url(../../img/element-icons/roomlist/dialpad.37f876f.svg)}.mx_RoomList_explorePrompt{margin:4px 12px;padding-top:12px;border-top:1px solid #e7e7e7;font-size:1.4rem}.mx_RoomList_explorePrompt div:first-child{font-weight:600;line-height:1.8rem;color:#2e2f32}.mx_RoomList_explorePrompt .mx_AccessibleButton{color:#2e2f32;position:relative;padding:8px 8px 8px 32px;font-size:inherit;margin-top:12px;display:block;text-align:start;background-color:rgba(141,151,165,.2);border-radius:4px}.mx_RoomList_explorePrompt .mx_AccessibleButton:before{content:"";width:16px;height:16px;position:absolute;top:8px;left:8px;background:#737d8c;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mx_RoomList_explorePrompt .mx_AccessibleButton.mx_RoomList_explorePrompt_startChat:before{-webkit-mask-image:url(../../img/element-icons/feedback.a91241e.svg);mask-image:url(../../img/element-icons/feedback.a91241e.svg)}.mx_RoomList_explorePrompt .mx_AccessibleButton.mx_RoomList_explorePrompt_explore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg)}.mx_RoomList_explorePrompt .mx_AccessibleButton.mx_RoomList_explorePrompt_spaceInvite:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_RoomList_explorePrompt .mx_AccessibleButton.mx_RoomList_explorePrompt_spaceExplore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg);mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg)}.mx_RoomPreviewBar{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-align-items:center}.mx_RoomPreviewBar h3{font-size:1.8rem;font-weight:600}.mx_RoomPreviewBar h3.mx_RoomPreviewBar_spinnerTitle{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomPreviewBar .mx_RoomPreviewBar_message p,.mx_RoomPreviewBar h3{word-break:break-all;word-break:break-word}.mx_RoomPreviewBar .mx_Spinner{width:auto;height:auto;margin:10px 10px 10px 0;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_RoomPreviewBar .mx_RoomPreviewBar_footer{font-size:1.2rem;line-height:2rem}.mx_RoomPreviewBar .mx_RoomPreviewBar_footer .mx_Spinner{vertical-align:middle;display:inline-block}.mx_RoomPreviewBar_actions,.mx_RoomPreviewBar_message{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomPreviewBar_message{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.mx_RoomPreviewBar_message p{overflow-wrap:break-word}.mx_RoomPreviewBar_panel{padding:8px 8px 8px 20px;border-top:1px solid transparent;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding:3px 8px}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions>*{margin-left:12px}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;min-width:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message>*{margin:4px}.mx_RoomPreviewBar_dialog{margin:auto;-webkit-box-sizing:content;box-sizing:content;width:400px;border-radius:4px;padding:20px;text-align:center}.mx_RoomPreviewBar_dialog,.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message>*{margin:5px 0 20px}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions .mx_AccessibleButton{padding:7px 50px}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions>*{margin-top:12px}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions .mx_AccessibleButton.mx_AccessibleButton_kind_primary{margin-bottom:7px}.mx_RoomPreviewBar_inviter{font-weight:600}a.mx_RoomPreviewBar_inviter{text-decoration:underline;cursor:pointer}.mx_RoomSublist{margin-left:8px;margin-bottom:4px}.mx_RoomSublist.mx_RoomSublist_hidden{display:none}.mx_RoomSublist .mx_RoomSublist_headerContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-bottom:8px;max-height:24px;color:#8d99a5}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable.mx_RoomSublist_headerContainer_sticky{position:fixed;height:32px;width:calc(100% - 22px)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer .mx_NotificationBadge{margin-left:8px}.mx_RoomSublist .mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) .mx_NotificationBadge{margin-right:4px}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton,.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton{margin-left:8px;position:relative;width:24px;height:24px;border-radius:8px}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:before,.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton:before{content:"";width:16px;height:16px;position:absolute;top:4px;left:4px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#61708b}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:hover,.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton:hover{background:rgba(141,151,165,.2)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton{visibility:hidden;width:0;margin:0}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:before{-webkit-mask-image:url(../../img/element-icons/roomlist/plus.daac9ba.svg);mask-image:url(../../img/element-icons/roomlist/plus.daac9ba.svg)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton:before{-webkit-mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);mask-image:url(../../img/element-icons/context-menu.829cc1a.svg)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:calc(100% - 16px);line-height:1.6rem;font-size:1.3rem;font-weight:600;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText .mx_RoomSublist_collapseBtn{display:inline-block;position:relative;width:14px;height:14px;margin-right:6px}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText .mx_RoomSublist_collapseBtn:before{content:"";width:18px;height:18px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#8d99a5;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText .mx_RoomSublist_collapseBtn.mx_RoomSublist_collapseBtn_collapsed:before{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.mx_RoomSublist:first-child .mx_RoomSublist_headerContainer{height:0;padding-bottom:4px}.mx_RoomSublist .mx_RoomSublist_resizeBox{position:relative;-ms-flex-direction:column;flex-direction:column}.mx_RoomSublist .mx_RoomSublist_resizeBox,.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_tiles{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;overflow:hidden}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_tiles{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;-ms-flex-direction:column;flex-direction:column;-webkit-mask-image:linear-gradient(0deg,transparent,#000 4px);mask-image:linear-gradient(0deg,transparent,#000 4px)}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandles_showNButton{-webkit-box-flex:0;-ms-flex:0 0 32px;flex:0 0 32px}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandles{-webkit-box-flex:0;-ms-flex:0 0 4px;flex:0 0 4px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandle{cursor:ns-resize;border-radius:3px;max-width:64px;height:4px!important;position:relative!important;bottom:0!important}.mx_RoomSublist .mx_RoomSublist_resizeBox.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_resizerHandle,.mx_RoomSublist .mx_RoomSublist_resizeBox:hover .mx_RoomSublist_resizerHandle{opacity:.8;background-color:#2e2f32}.mx_RoomSublist .mx_RoomSublist_showNButton{cursor:pointer;font-size:1.3rem;line-height:1.8rem;color:#737d8c;height:24px;padding-bottom:4px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showNButtonChevron{position:relative;width:18px;height:18px;margin-left:12px;margin-right:16px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#8d99a5;left:-1px}.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showLessButtonChevron,.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showMoreButtonChevron{-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showLessButtonChevron{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mx_RoomSublist.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton,.mx_RoomSublist:not(.mx_RoomSublist_minimized)>.mx_RoomSublist_headerContainer:focus-within .mx_RoomSublist_menuButton,.mx_RoomSublist:not(.mx_RoomSublist_minimized)>.mx_RoomSublist_headerContainer:hover .mx_RoomSublist_menuButton{visibility:visible;width:24px;margin-left:8px}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer{height:auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0;-ms-flex-item-align:end;align-self:flex-end;margin-right:0}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;max-width:100%}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;visibility:visible;width:32px!important;height:32px!important;margin-left:0!important;background-color:rgba(141,151,165,.2);margin-top:8px}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:before{top:8px;left:8px}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_resizeBox{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_showNButton{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_showNButton .mx_RoomSublist_showNButtonChevron{margin-right:12px}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_menuButton{height:16px}.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton,.mx_RoomSublist.mx_RoomSublist_minimized>.mx_RoomSublist_headerContainer:hover .mx_RoomSublist_menuButton{visibility:visible;position:absolute;bottom:48px;right:0;width:16px;height:16px;border-radius:0;z-index:1;background-color:hsla(0,0%,96.1%,.9)}.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton:before,.mx_RoomSublist.mx_RoomSublist_minimized>.mx_RoomSublist_headerContainer:hover .mx_RoomSublist_menuButton:before{top:0;left:0}.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) .mx_RoomSublist_menuButton,.mx_RoomSublist.mx_RoomSublist_minimized>.mx_RoomSublist_headerContainer:hover.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) .mx_RoomSublist_menuButton{bottom:8px}.mx_RoomSublist_contextMenu{padding:20px 16px;width:250px}.mx_RoomSublist_contextMenu hr{margin-top:16px;margin-bottom:16px;margin-right:16px;border:1px solid #2e2f32;opacity:.1}.mx_RoomSublist_contextMenu .mx_RoomSublist_contextMenu_title{font-size:1.5rem;line-height:2rem;font-weight:600;margin-bottom:4px}.mx_RoomSublist_contextMenu .mx_Checkbox,.mx_RoomSublist_contextMenu .mx_RadioButton{margin-top:8px}.mx_RoomSublist_addRoomTooltip{margin-top:-3px}.mx_RoomSublist_skeletonUI{position:relative;margin-left:4px;height:288px}.mx_RoomSublist_skeletonUI:before{background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(hsla(0,0%,100%,0)));background:linear-gradient(180deg,#fff,hsla(0,0%,100%,0));width:100%;height:100%;content:"";position:absolute;-webkit-mask-repeat:repeat-y;mask-repeat:repeat-y;-webkit-mask-size:auto 48px;mask-size:auto 48px;-webkit-mask-image:url(../../img/element-icons/roomlist/skeleton-ui.1f67400.svg);mask-image:url(../../img/element-icons/roomlist/skeleton-ui.1f67400.svg)}.mx_RoomTile{margin-bottom:4px;padding:4px;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomTile.mx_RoomTile_hasMenuOpen,.mx_RoomTile.mx_RoomTile_selected,.mx_RoomTile:focus-within,.mx_RoomTile:hover{background-color:#fff;border-radius:8px}.mx_RoomTile .mx_DecoratedRoomAvatar,.mx_RoomTile .mx_RoomTile_avatarContainer{margin-right:8px}.mx_RoomTile .mx_RoomTile_nameContainer{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;min-width:0;margin-right:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_messagePreview,.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name{margin:0 2px;width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name{font-size:1.4rem;line-height:1.8rem}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name.mx_RoomTile_nameHasUnreadEvents{font-weight:600}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_messagePreview{font-size:1.3rem;line-height:1.8rem;color:#737d8c}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_nameWithPreview{margin-top:-4px}.mx_RoomTile .mx_RoomTile_notificationsButton{margin-left:4px}.mx_RoomTile .mx_RoomTile_badgeContainer{height:16px;margin:auto 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge{margin-right:2px}.mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge_dot{margin-left:5px;margin-right:7px}.mx_RoomTile .mx_RoomTile_menuButton,.mx_RoomTile .mx_RoomTile_notificationsButton{width:20px;min-width:20px;height:20px;margin-top:auto;margin-bottom:auto;position:relative;display:none}.mx_RoomTile .mx_RoomTile_menuButton:before,.mx_RoomTile .mx_RoomTile_notificationsButton:before{top:2px;left:2px;content:"";width:16px;height:16px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#2e2f32}.mx_RoomTile .mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show{display:block}.mx_RoomTile .mx_RoomTile_menuButton:before{-webkit-mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);mask-image:url(../../img/element-icons/context-menu.829cc1a.svg)}.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen .mx_RoomTile_badgeContainer,.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within .mx_RoomTile_badgeContainer,.mx_RoomTile:not(.mx_RoomTile_minimized):hover .mx_RoomTile_badgeContainer{width:0;height:0;display:none}.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen .mx_RoomTile_menuButton,.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen .mx_RoomTile_notificationsButton,.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within .mx_RoomTile_menuButton,.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within .mx_RoomTile_notificationsButton,.mx_RoomTile:not(.mx_RoomTile_minimized):hover .mx_RoomTile_menuButton,.mx_RoomTile:not(.mx_RoomTile_minimized):hover .mx_RoomTile_notificationsButton{display:block}.mx_RoomTile.mx_RoomTile_minimized{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative}.mx_RoomTile.mx_RoomTile_minimized .mx_DecoratedRoomAvatar,.mx_RoomTile.mx_RoomTile_minimized .mx_RoomTile_avatarContainer{margin-right:0}.mx_RoomTile_iconBell:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_RoomTile_iconBellDot:before{-webkit-mask-image:url(../../img/element-icons/roomlist/notifications-default.8b8509e.svg);mask-image:url(../../img/element-icons/roomlist/notifications-default.8b8509e.svg)}.mx_RoomTile_iconBellCrossed:before{-webkit-mask-image:url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);mask-image:url(../../img/element-icons/roomlist/notifications-off.0c57561.svg)}.mx_RoomTile_iconBellMentions:before{-webkit-mask-image:url(../../img/element-icons/roomlist/notifications-dm.ffa8881.svg);mask-image:url(../../img/element-icons/roomlist/notifications-dm.ffa8881.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconStar:before{-webkit-mask-image:url(../../img/element-icons/roomlist/favorite.ff7609d.svg);mask-image:url(../../img/element-icons/roomlist/favorite.ff7609d.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconArrowDown:before{-webkit-mask-image:url(../../img/element-icons/roomlist/low-priority.6c7fb97.svg);mask-image:url(../../img/element-icons/roomlist/low-priority.6c7fb97.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconSettings:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconInvite:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconSignOut:before{-webkit-mask-image:url(../../img/element-icons/leave.bb917e7.svg);mask-image:url(../../img/element-icons/leave.bb917e7.svg)}.mx_RoomUpgradeWarningBar{max-height:235px;background-color:#f7f7f7;padding-left:20px;padding-right:20px;overflow:scroll}.mx_RoomUpgradeWarningBar_wrapped{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;text-align:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center}.mx_RoomUpgradeWarningBar_header{color:#ff4b55;font-weight:700}.mx_RoomUpgradeWarningBar_body{color:#ff4b55}.mx_RoomUpgradeWarningBar_upgradelink{color:#ff4b55;text-decoration:underline}.mx_RoomUpgradeWarningBar_small{color:#888;font-size:70%}.mx_SearchBar{height:56px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-bottom:1px solid transparent}.mx_SearchBar .mx_SearchBar_input{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;margin-left:22px}.mx_SearchBar .mx_SearchBar_searchButton{cursor:pointer;width:37px;height:37px;background-color:#0dbd8b;-webkit-mask:url(../../img/feather-customised/search-input.044bfa7.svg);mask:url(../../img/feather-customised/search-input.044bfa7.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.mx_SearchBar .mx_SearchBar_buttons{display:inherit}.mx_SearchBar .mx_SearchBar_button{border:0;margin:0 0 0 22px;padding:5px;font-size:1.5rem;cursor:pointer;color:#2e2f32;border-bottom:2px solid #0dbd8b;font-weight:600}.mx_SearchBar .mx_SearchBar_unselected{color:#9fa9ba;border-color:transparent}.mx_SearchBar .mx_SearchBar_cancel{background-color:#ff4b55;-webkit-mask:url(../../img/cancel.4b9715b.svg);mask:url(../../img/cancel.4b9715b.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:14px;mask-size:14px;padding:9px;margin:0 12px 0 3px;cursor:pointer}.mx_SendMessageComposer{-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;font-size:1.4rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-right:6px;min-width:0}.mx_SendMessageComposer,.mx_SendMessageComposer .mx_BasicMessageComposer{-webkit-box-flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal}.mx_SendMessageComposer .mx_BasicMessageComposer{-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;min-height:50px}.mx_SendMessageComposer .mx_BasicMessageComposer .mx_BasicMessageComposer_input{padding:3px 0;margin:auto 0;max-height:140px;overflow-y:auto}.mx_Stickers_content{overflow:hidden}.mx_Stickers_content_container{overflow:hidden;height:300px}#mx_persistedElement_stickerPicker .mx_AppTileFullWidth{height:unset;-webkit-box-sizing:border-box;box-sizing:border-box;border-left:none;border-right:none;border-bottom:none}#mx_persistedElement_stickerPicker .mx_AppTileMenuBar{padding:0}#mx_persistedElement_stickerPicker iframe{height:283px}.mx_Stickers_contentPlaceholder{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.mx_Stickers_contentPlaceholder p{max-width:200px}.mx_Stickers_addLink{display:inline;cursor:pointer;color:#0dbd8b}.mx_Stickers_hideStickers{z-index:2001}.mx_TopUnreadMessagesBar{z-index:1000;position:absolute;top:24px;right:24px;width:38px}.mx_TopUnreadMessagesBar:after{content:"";position:absolute;top:-8px;left:10.5px;width:4px;height:4px;border-radius:16px;background-color:#f2f5f8;border:6px solid #0dbd8b;pointer-events:none}.mx_TopUnreadMessagesBar_scrollUp{height:38px;border-radius:19px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;border:1.3px solid #61708b;cursor:pointer}.mx_TopUnreadMessagesBar_scrollUp:before{content:"";position:absolute;width:36px;height:36px;-webkit-mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;background:#61708b;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mx_TopUnreadMessagesBar_markAsRead{display:block;width:18px;height:18px;background:#fff;border:1.3px solid #61708b;border-radius:10px;margin:5px auto}.mx_TopUnreadMessagesBar_markAsRead:before{content:"";position:absolute;width:18px;height:18px;-webkit-mask-image:url(../../img/cancel.4b9715b.svg);mask-image:url(../../img/cancel.4b9715b.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:10px;mask-size:10px;-webkit-mask-position:4px 4px;mask-position:4px 4px;background:#61708b}.mx_VoiceRecordComposerTile_stop{width:28px;height:28px;border:2px solid #e3e8f0;border-radius:32px;margin-right:16px;position:relative}.mx_VoiceRecordComposerTile_stop:after{content:"";width:14px;height:14px;position:absolute;top:7px;left:7px;border-radius:2px;background-color:#ff4b55}.mx_VoiceRecordComposerTile_delete{width:14px;height:18px;vertical-align:middle;margin-right:11px;background-color:#8d99a5;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/trashcan.26f6c28.svg);mask-image:url(../../img/element-icons/trashcan.26f6c28.svg)}.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer{margin:6px 12px 6px 6px;position:relative}.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording{padding-left:22px}.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording:before{-webkit-animation:recording-pulse 2s infinite;animation:recording-pulse 2s infinite;content:"";background-color:#ff4b55;width:10px;height:10px;position:absolute;left:12px;top:18px;border-radius:10px}@-webkit-keyframes recording-pulse{0%{opacity:1}35%{opacity:0}65%{opacity:1}}@keyframes recording-pulse{0%{opacity:1}35%{opacity:0}65%{opacity:1}}.mx_WhoIsTypingTile{margin-left:-18px;padding-top:18px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_WhoIsTypingTile_avatars{-webkit-box-flex:0;-ms-flex:0 0 83px;flex:0 0 83px;text-align:center}.mx_WhoIsTypingTile_avatars>:not(:first-child){margin-left:-12px}.mx_WhoIsTypingTile_avatars .mx_BaseAvatar_initial{padding-top:1px}.mx_WhoIsTypingTile_avatars .mx_BaseAvatar{border:1px solid #fff;border-radius:40px}.mx_WhoIsTypingTile_remainingAvatarPlaceholder{position:relative;display:inline-block;color:#acacac;background-color:#ddd;border:1px solid #fff;border-radius:40px;width:24px;height:24px;line-height:2.4rem;font-size:.8em;vertical-align:top;text-align:center}.mx_WhoIsTypingTile_label{-webkit-box-flex:1;-ms-flex:1;flex:1;font-size:1.4rem;font-weight:600;color:#9e9e9e}.mx_WhoIsTypingTile_label>span{background-image:url(../../img/typing-indicator-2x.0eb9f0e.gif);background-size:25px;background-position:0 100%;background-repeat:no-repeat;padding-bottom:15px;display:block}.mx_MatrixChat_useCompactLayout .mx_WhoIsTypingTile{padding-top:4px}.mx_AvatarSetting_avatar{width:90px;min-width:90px;height:90px;margin-top:8px;position:relative}.mx_AvatarSetting_avatar .mx_AvatarSetting_hover{-webkit-transition:opacity .08s cubic-bezier(.46,.03,.52,.96);transition:opacity .08s cubic-bezier(.46,.03,.52,.96);position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none;line-height:90px;text-align:center}.mx_AvatarSetting_avatar .mx_AvatarSetting_hover>span{color:#fff;position:relative;font-weight:500}.mx_AvatarSetting_avatar .mx_AvatarSetting_hover .mx_AvatarSetting_hoverBg{position:absolute;top:0;bottom:0;left:0;right:0;opacity:.5;background-color:#2e2f32;border-radius:90px}.mx_AvatarSetting_avatar.mx_AvatarSetting_avatar_hovering .mx_AvatarSetting_hover{opacity:1}.mx_AvatarSetting_avatar:not(.mx_AvatarSetting_avatar_hovering) .mx_AvatarSetting_hover{opacity:0}.mx_AvatarSetting_avatar>*{-webkit-box-sizing:border-box;box-sizing:border-box}.mx_AvatarSetting_avatar .mx_AccessibleButton.mx_AccessibleButton_kind_primary{margin-top:8px}.mx_AvatarSetting_avatar .mx_AccessibleButton.mx_AccessibleButton_kind_link_sm{width:100%}.mx_AvatarSetting_avatar>img{cursor:pointer;-o-object-fit:cover;object-fit:cover}.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder,.mx_AvatarSetting_avatar>img{display:block;height:90px;width:inherit;border-radius:90px;cursor:pointer}.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder:before{background-color:#2e2f32;-webkit-mask:url(../../img/feather-customised/user.7a4d23d.svg);mask:url(../../img/feather-customised/user.7a4d23d.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:36px;mask-size:36px;-webkit-mask-position:center;mask-position:center;content:"";position:absolute;top:0;bottom:0;left:0;right:0}.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton{width:32px;height:32px;border-radius:32px;background-color:#e7e7e7;position:absolute;bottom:0;right:0}.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton:before{content:"";display:block;width:100%;height:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:55%;mask-size:55%;background-color:#2e2f32;-webkit-mask-image:url(../../img/feather-customised/edit.fd55ec2.svg);mask-image:url(../../img/feather-customised/edit.fd55ec2.svg)}.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder{background-color:#f4f6fa}.mx_CrossSigningPanel_statusList{border-spacing:0}.mx_CrossSigningPanel_statusList td{padding:0}.mx_CrossSigningPanel_statusList td:first-of-type{-webkit-padding-end:1em;padding-inline-end:1em}.mx_CrossSigningPanel_buttonRow{margin:1em 0}.mx_CrossSigningPanel_buttonRow :nth-child(n+1){-webkit-margin-end:10px;margin-inline-end:10px}.mx_DevicesPanel{display:table;table-layout:fixed;width:880px;border-spacing:10px}.mx_DevicesPanel_header{display:table-header-group;font-weight:700}.mx_DevicesPanel_header>.mx_DevicesPanel_deviceButtons{height:48px}.mx_DevicesPanel_header>div{display:table-cell;vertical-align:middle}.mx_DevicesPanel_header .mx_DevicesPanel_deviceName{width:50%}.mx_DevicesPanel_header .mx_DevicesPanel_deviceLastSeen{width:30%}.mx_DevicesPanel_header .mx_DevicesPanel_deviceButtons{width:20%}.mx_DevicesPanel_device{display:table-row}.mx_DevicesPanel_device>div{display:table-cell}.mx_DevicesPanel_myDevice{font-weight:700}.mx_E2eAdvancedPanel_settingLongDescription{margin-right:150px}.mx_ExistingEmailAddress{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:5px}.mx_ExistingEmailAddress_delete{margin-right:5px;cursor:pointer;vertical-align:middle}.mx_ExistingEmailAddress_email,.mx_ExistingEmailAddress_promptText{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:10px}.mx_ExistingEmailAddress_confirmBtn{margin-left:5px}.mx_IntegrationManager .mx_Dialog{width:60%;height:70%;overflow:hidden;padding:0;max-width:none;max-height:none}.mx_IntegrationManager iframe{background-color:#fff;border:0;width:100%;height:100%}.mx_IntegrationManager_loading h3{text-align:center}.mx_IntegrationManager_error{text-align:center;padding-top:20px}.mx_IntegrationManager_error h3{color:#ff4b55}.mx_UserNotifSettings_tableRow{display:table-row}.mx_UserNotifSettings_inputCell{display:table-cell;padding-bottom:8px;padding-right:8px;width:16px}.mx_UserNotifSettings_labelCell{padding-bottom:8px;width:400px;display:table-cell}.mx_UserNotifSettings_pushRulesTableWrapper{padding-bottom:8px}.mx_UserNotifSettings_pushRulesTable{width:100%;table-layout:fixed}.mx_UserNotifSettings_pushRulesTable thead{font-weight:700}.mx_UserNotifSettings_pushRulesTable tbody th{font-weight:400}.mx_UserNotifSettings_pushRulesTable tbody th:first-child{text-align:left}.mx_UserNotifSettings_keywords{cursor:pointer;color:#0dbd8b}.mx_UserNotifSettings_devicesTable td{padding-left:20px;padding-right:20px}.mx_UserNotifSettings_notifTable{display:table;position:relative}.mx_UserNotifSettings_notifTable .mx_Spinner{position:absolute}.mx_NotificationSound_soundUpload{display:none}.mx_NotificationSound_browse{color:#0dbd8b;border:1px solid #0dbd8b;background-color:transparent}.mx_NotificationSound_save{margin-left:5px;color:#fff;background-color:#0dbd8b}.mx_NotificationSound_resetSound{margin-top:5px;color:#fff;border:#ff4b55;background-color:#ff4b55}.mx_ExistingPhoneNumber{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:5px}.mx_ExistingPhoneNumber_delete{margin-right:5px;cursor:pointer;vertical-align:middle}.mx_ExistingPhoneNumber_address,.mx_ExistingPhoneNumber_promptText{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:10px}.mx_ExistingPhoneNumber_confirmBtn{margin-left:5px}.mx_ExistingPhoneNumber_verification{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_ExistingPhoneNumber_verification .mx_Field{margin:0 0 0 1em}.mx_PhoneNumbers_input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_PhoneNumbers_input>.mx_Field{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_PhoneNumbers_country{width:80px}.mx_ProfileSettings_controls_topic>textarea{resize:vertical}.mx_ProfileSettings_profile{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_ProfileSettings_controls{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;margin-right:54px}.mx_ProfileSettings_controls .mx_SettingsTab_subheading{margin-top:0}.mx_ProfileSettings_controls .mx_Field #profileTopic{height:4em}.mx_ProfileSettings_controls .mx_Field:first-child{margin-top:0}.mx_ProfileSettings_hostingSignup{margin-left:20px}.mx_ProfileSettings_hostingSignup img{margin-left:5px}.mx_ProfileSettings_avatarUpload{display:none}.mx_ProfileSettings_profileForm{margin-right:100px;border-bottom:1px solid #e7e7e7}.mx_ProfileSettings_buttons{margin-top:10px;margin-bottom:28px}.mx_ProfileSettings_buttons>.mx_AccessibleButton_kind_link{padding-left:0}.mx_SecureBackupPanel_deviceNotVerified,.mx_SecureBackupPanel_deviceVerified,.mx_SecureBackupPanel_sigInvalid,.mx_SecureBackupPanel_sigValid{font-weight:700}.mx_SecureBackupPanel_deviceVerified,.mx_SecureBackupPanel_sigValid{color:#76cfa5}.mx_SecureBackupPanel_deviceNotVerified,.mx_SecureBackupPanel_sigInvalid{color:#ba6363}.mx_SecureBackupPanel_deviceName{font-style:italic}.mx_SecureBackupPanel_buttonRow{margin:1em 0}.mx_SecureBackupPanel_buttonRow :nth-child(n+1){-webkit-margin-end:10px;margin-inline-end:10px}.mx_SecureBackupPanel_statusList{border-spacing:0}.mx_SecureBackupPanel_statusList td{padding:0}.mx_SecureBackupPanel_statusList td:first-of-type{-webkit-padding-end:1em;padding-inline-end:1em}.mx_SetIdServer .mx_Field_input{margin-right:100px}.mx_SetIdServer_tooltip{max-width:120px}.mx_SetIntegrationManager{margin-top:10px;margin-bottom:10px}.mx_SetIntegrationManager>.mx_SettingsTab_heading{margin-bottom:10px}.mx_SetIntegrationManager>.mx_SettingsTab_heading>.mx_SettingsTab_subheading{display:inline-block;padding-left:5px}.mx_SetIntegrationManager .mx_ToggleSwitch{display:inline-block;float:right;top:9px;margin-right:100px}.mx_ExistingSpellCheckLanguage{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:5px}.mx_ExistingSpellCheckLanguage_language{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:10px}.mx_GeneralUserSettingsTab_spellCheckLanguageInput{margin-top:1em;margin-bottom:1em}.mx_SpellCheckLanguages{margin-right:100px}.mx_UpdateCheckButton_summary{margin-left:16px}.mx_UpdateCheckButton_summary .mx_AccessibleButton_kind_link{padding:0}.mx_SettingsTab{color:#61708b}.mx_SettingsTab_warningText{color:#ff4b55}.mx_SettingsTab_heading{font-size:2rem;font-weight:600;color:#2e2f32;margin-bottom:10px}.mx_SettingsTab_heading:nth-child(n+2){margin-top:30px}.mx_SettingsTab_subheading{font-size:1.6rem;display:block;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-weight:600;color:#2e2f32;margin-bottom:10px;margin-top:12px}.mx_SettingsTab_subsectionText{color:#61708b;font-size:1.4rem;display:block;margin:10px 100px 10px 0}.mx_SettingsTab_section{margin-bottom:24px}.mx_SettingsTab_section .mx_SettingsFlag{margin-right:100px;margin-bottom:10px}.mx_SettingsTab_section.mx_SettingsTab_subsectionText .mx_SettingsFlag{margin-right:0!important}.mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label{vertical-align:middle;display:inline-block;font-size:1.4rem;color:#2e2f32;max-width:calc(100% - 4.8rem);-webkit-box-sizing:border-box;box-sizing:border-box;padding-right:10px}.mx_SettingsTab_section .mx_SettingsFlag .mx_ToggleSwitch{float:right}.mx_SettingsTab_linkBtn{cursor:pointer;color:#0dbd8b;word-break:break-all}.mx_SettingsTab a{color:#238cf5}.mx_GeneralRoomSettingsTab_profileSection{margin-top:10px}.mx_RolesRoomSettingsTab ul{margin-bottom:0}.mx_RolesRoomSettingsTab_unbanBtn{margin-right:10px;margin-bottom:5px}.mx_SecurityRoomSettingsTab_warning{display:block}.mx_SecurityRoomSettingsTab_warning img{vertical-align:middle;margin-right:5px;margin-left:3px;margin-bottom:5px}.mx_SecurityRoomSettingsTab_encryptionSection{margin-bottom:25px}.mx_AppearanceUserSettingsTab_fontSlider,.mx_AppearanceUserSettingsTab_fontSlider_preview,.mx_AppearanceUserSettingsTab_Layout{margin-right:100px}.mx_AppearanceUserSettingsTab .mx_Field{width:256px}.mx_AppearanceUserSettingsTab_fontScaling{color:#2e2f32}.mx_AppearanceUserSettingsTab_fontSlider{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:15px;background:rgba(227,232,240,.2);border-radius:10px;font-size:10px;margin-top:24px;margin-bottom:24px}.mx_AppearanceUserSettingsTab_fontSlider_preview{border:1px solid #e3e8f0;border-radius:10px;padding:0 16px 9px;pointer-events:none}.mx_AppearanceUserSettingsTab_fontSlider_preview .mx_EventTile_msgOption{display:none}.mx_AppearanceUserSettingsTab_fontSlider_preview.mx_IRCLayout{padding-top:9px}.mx_AppearanceUserSettingsTab_fontSlider_smallText{font-size:15px;padding-right:20px;padding-left:5px;font-weight:500}.mx_AppearanceUserSettingsTab_fontSlider_largeText{font-size:18px;padding-left:20px;padding-right:5px;font-weight:500}.mx_AppearanceUserSettingsTab>.mx_SettingsTab_SubHeading{margin-bottom:32px}.mx_AppearanceUserSettingsTab_themeSection{color:#2e2f32}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:4px;margin-bottom:30px}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton{padding:1.6rem;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:10px;width:180px;background:#e3e8f0;opacity:.4;-ms-flex-negative:1;flex-shrink:1;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;margin-right:15px;margin-top:10px;font-weight:600;color:#61708b}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton>span{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled{opacity:1}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_light{background-color:#f3f8fd;color:#2e2f32}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_dark{background-color:#25282e;color:#f3f8fd}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_dark>input>div,.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_dark>input>div>div{border-color:#e3e8f0}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_black{background-color:#000;color:#f3f8fd}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_black>input>div,.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_black>input>div>div{border-color:#e3e8f0}.mx_SettingsTab_customFontSizeField{margin-left:calc(1.6rem + 10px)}.mx_AppearanceUserSettingsTab_Layout_RadioButtons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;color:#2e2f32}.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_AppearanceUserSettingsTab_spacer{width:24px}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:1;flex-shrink:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:300px;border:1px solid #e3e8f0;border-radius:10px}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_EventTile_msgOption,.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_MessageActionBar{display:none}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_AppearanceUserSettingsTab_Layout_RadioButton_preview{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:10px;pointer-events:none}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_RadioButton{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;padding:10px}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_EventTile_content{margin-right:0}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton.mx_AppearanceUserSettingsTab_Layout_RadioButton_selected{border-color:#0dbd8b}.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton{border-top:1px solid #e3e8f0}.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton>input+div{border-color:rgba(97,112,139,.2)}.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton_checked{background-color:rgba(13,189,139,.08)}.mx_AppearanceUserSettingsTab_Advanced{color:#2e2f32}.mx_AppearanceUserSettingsTab_Advanced>*{margin-bottom:16px}.mx_AppearanceUserSettingsTab_Advanced .mx_AppearanceUserSettingsTab_AdvancedToggle{color:#0dbd8b;cursor:pointer}.mx_AppearanceUserSettingsTab_Advanced .mx_AppearanceUserSettingsTab_systemFont{margin-left:calc(1.6rem + 10px)}.mx_GeneralUserSettingsTab_changePassword .mx_Field{margin-right:100px}.mx_GeneralUserSettingsTab_changePassword .mx_Field:first-child{margin-top:0}.mx_GeneralUserSettingsTab_accountSection .mx_SettingsTab_subheading:nth-child(n+1),.mx_GeneralUserSettingsTab_discovery .mx_SettingsTab_subheading:nth-child(n+2),.mx_SetIdServer .mx_SettingsTab_subheading{margin-top:24px}.mx_GeneralUserSettingsTab_accountSection .mx_Spinner,.mx_GeneralUserSettingsTab_discovery .mx_Spinner{-webkit-box-pack:left;-ms-flex-pack:left;justify-content:left}.mx_GeneralUserSettingsTab_accountSection .mx_EmailAddresses,.mx_GeneralUserSettingsTab_accountSection .mx_PhoneNumbers,.mx_GeneralUserSettingsTab_discovery .mx_ExistingEmailAddress,.mx_GeneralUserSettingsTab_discovery .mx_ExistingPhoneNumber,.mx_GeneralUserSettingsTab_languageInput{margin-right:100px}.mx_GeneralUserSettingsTab_warningIcon{vertical-align:middle}.mx_HelpUserSettingsTab_debugButton{margin-bottom:5px;margin-top:5px}.mx_HelpUserSettingsTab span.mx_AccessibleButton{word-break:break-word}.mx_HelpUserSettingsTab code{word-break:break-all;-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}.mx_HelpUserSettingsTab_accessToken{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;border-radius:5px;border:1px solid #747474;margin-bottom:10px;margin-top:10px;padding:10px}.mx_HelpUserSettingsTab_accessToken_copy{-ms-flex-negative:0;flex-shrink:0;cursor:pointer;margin-left:20px;display:inherit}.mx_HelpUserSettingsTab_accessToken_copy>div{-webkit-mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);background-color:#2e2f32;margin-left:5px;width:20px;height:20px;background-repeat:no-repeat}.mx_LabsUserSettingsTab .mx_SettingsTab_section{margin-top:32px}.mx_LabsUserSettingsTab .mx_SettingsTab_section .mx_SettingsFlag{margin-right:0}.mx_MjolnirUserSettingsTab .mx_Field{margin-right:100px}.mx_MjolnirUserSettingsTab_listItem{margin-bottom:2px}.mx_NotificationUserSettingsTab .mx_SettingsTab_heading{margin-bottom:10px}.mx_PreferencesUserSettingsTab .mx_Field{margin-right:100px}.mx_PreferencesUserSettingsTab .mx_SettingsTab_section{margin-bottom:30px}.mx_SecurityUserSettingsTab .mx_DevicesPanel{width:auto;max-width:880px}.mx_SecurityUserSettingsTab_deviceInfo{display:table;padding-left:0}.mx_SecurityUserSettingsTab_deviceInfo>li{display:table-row}.mx_SecurityUserSettingsTab_deviceInfo>li>label,.mx_SecurityUserSettingsTab_deviceInfo>li>span{display:table-cell;padding-right:1em}.mx_SecurityUserSettingsTab_bulkOptions .mx_AccessibleButton,.mx_SecurityUserSettingsTab_importExportButtons .mx_AccessibleButton{margin-right:10px}.mx_SecurityUserSettingsTab_importExportButtons{margin-bottom:15px}.mx_SecurityUserSettingsTab_ignoredUser{margin-bottom:5px}.mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton{margin-right:10px}.mx_SecurityUserSettingsTab .mx_SettingsTab_section .mx_AccessibleButton_kind_link{padding:0;font-size:inherit}.mx_SecurityUserSettingsTab .mx_SecurityUserSettingsTab_warning{color:#ff4b55;position:relative;padding-left:40px;margin-top:30px}.mx_SecurityUserSettingsTab .mx_SecurityUserSettingsTab_warning:before{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 center;mask-position:0 center;-webkit-mask-size:2.4rem;mask-size:2.4rem;position:absolute;width:2.4rem;height:2.4rem;content:"";top:0;left:0;background-color:#ff4b55;-webkit-mask-image:url(../../img/feather-customised/alert-triangle.38aca3a.svg);mask-image:url(../../img/feather-customised/alert-triangle.38aca3a.svg)}.mx_VoiceUserSettingsTab .mx_Field{margin-right:100px}.mx_VoiceUserSettingsTab_missingMediaPermissions{margin-bottom:15px}.mx_SpaceBasicSettings .mx_Field{margin:32px 0}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:24px}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer .mx_SpaceBasicSettings_avatar{position:relative;height:80px;width:80px;background-color:#8d99a5;border-radius:16px}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer img.mx_SpaceBasicSettings_avatar{width:80px;height:80px;-o-object-fit:cover;object-fit:cover;border-radius:16px}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer div.mx_SpaceBasicSettings_avatar{cursor:pointer}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer div.mx_SpaceBasicSettings_avatar:before{content:"";position:absolute;height:80px;width:80px;top:0;left:0;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:20px;mask-size:20px;-webkit-mask-image:url(../../img/element-icons/camera.a81a395.svg);mask-image:url(../../img/element-icons/camera.a81a395.svg)}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer>input[type=file]{display:none}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer>.mx_AccessibleButton_kind_link{display:inline-block;padding:0;margin:auto 16px;color:#368bd6}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer>.mx_SpaceBasicSettings_avatar_remove{color:#ff4b55}.mx_SpaceBasicSettings .mx_FormButton{padding:8px 22px;margin-left:auto;display:block;width:-webkit-min-content;width:-moz-min-content;width:min-content}.mx_SpaceBasicSettings .mx_AccessibleButton_disabled{cursor:not-allowed}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu_background{background-color:rgba(46,48,51,.38);opacity:.6;left:71px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu{padding:24px;width:480px;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#fff;position:relative}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu>div>h2{font-weight:600;font-size:1.8rem;margin-top:4px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu>div>p{font-size:1.5rem;color:#737d8c;margin:0}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_BetaCard_betaPill{position:absolute;top:24px;right:24px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType{position:relative;padding:16px 32px 16px 72px;width:432px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;border:1px solid #e7e7e7;font-size:1.5rem;margin:20px 0}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType>h3{font-weight:600;margin:0 0 4px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType>span{color:#737d8c}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:before{position:absolute;content:"";width:32px;height:32px;top:24px;left:20px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px;mask-size:24px;background-color:#8d99a5}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover{border-color:#0dbd8b}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover:before{background-color:#0dbd8b}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover>span{color:#2e2f32}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType_public:before{-webkit-mask-image:url(../../img/globe.8201f08.svg);mask-image:url(../../img/globe.8201f08.svg)}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType_private:before{-webkit-mask-image:url(../../img/element-icons/lock.1f264bd.svg);mask-image:url(../../img/element-icons/lock.1f264bd.svg)}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenu_back{width:28px;height:28px;position:relative;background-color:rgba(141,151,165,.2);border-radius:14px;margin-bottom:12px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenu_back:before{content:"";position:absolute;height:28px;width:28px;top:0;left:0;background-color:#8d99a5;-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:2px 3px;mask-position:2px 3px;-webkit-mask-size:24px;mask-size:24px;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton_kind_primary{padding:8px 22px;margin-left:auto;display:block;width:-webkit-min-content;width:-moz-min-content;width:min-content}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton_disabled{cursor:not-allowed}.mx_SpacePublicShare .mx_AccessibleButton{position:relative;padding:16px 32px 16px 72px;width:432px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;border:1px solid #e7e7e7;font-size:1.5rem;margin:20px 0}.mx_SpacePublicShare .mx_AccessibleButton>h3{font-weight:600;margin:0 0 4px}.mx_SpacePublicShare .mx_AccessibleButton>span{color:#737d8c}.mx_SpacePublicShare .mx_AccessibleButton:before{position:absolute;content:"";width:32px;height:32px;top:24px;left:20px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px;mask-size:24px;background-color:#8d99a5}.mx_SpacePublicShare .mx_AccessibleButton:hover{border-color:#0dbd8b}.mx_SpacePublicShare .mx_AccessibleButton:hover:before{background-color:#0dbd8b}.mx_SpacePublicShare .mx_AccessibleButton:hover>span{color:#2e2f32}.mx_SpacePublicShare .mx_AccessibleButton.mx_SpacePublicShare_shareButton:before{-webkit-mask-image:url(../../img/element-icons/link.8f4b1fc.svg);mask-image:url(../../img/element-icons/link.8f4b1fc.svg)}.mx_SpacePublicShare .mx_AccessibleButton.mx_SpacePublicShare_inviteButton:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_InlineTermsAgreement_cbContainer{margin-bottom:10px;font-size:1.4rem}.mx_InlineTermsAgreement_cbContainer a{color:#0dbd8b;text-decoration:none}.mx_InlineTermsAgreement_cbContainer .mx_InlineTermsAgreement_checkbox{margin-top:10px}.mx_InlineTermsAgreement_cbContainer .mx_InlineTermsAgreement_checkbox input{vertical-align:text-bottom}.mx_InlineTermsAgreement_link{display:inline-block;-webkit-mask-image:url(../../img/external-link.a8d3e9b.svg);mask-image:url(../../img/external-link.a8d3e9b.svg);background-color:#0dbd8b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:12px;height:12px;margin-left:3px;vertical-align:middle}.mx_AnalyticsToast .mx_AccessibleButton_kind_danger{background:none;color:#0dbd8b}.mx_AnalyticsToast .mx_AccessibleButton_kind_primary{background:#0dbd8b;color:#fff}.mx_NonUrgentEchoFailureToast .mx_NonUrgentEchoFailureToast_icon{display:inline-block;width:1.8rem;height:1.8rem;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#fff;-webkit-mask-image:url(../../img/element-icons/cloud-off.33cd28e.svg);mask-image:url(../../img/element-icons/cloud-off.33cd28e.svg);margin-right:8px}.mx_NonUrgentEchoFailureToast span{vertical-align:middle}.mx_NonUrgentEchoFailureToast .mx_AccessibleButton{padding:0}.mx_VerificationShowSas_decimalSas{text-align:center;font-weight:700;padding-left:3px;padding-right:3px}.mx_VerificationShowSas_decimalSas span{margin-left:5px;margin-right:5px}.mx_VerificationShowSas_emojiSas{text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:25px 0}.mx_VerificationShowSas_emojiSas_block{display:inline-block;margin-bottom:16px;position:relative;width:52px}.mx_AuthPage_modal .mx_VerificationShowSas_emojiSas_block,.mx_Dialog .mx_VerificationShowSas_emojiSas_block{width:60px}.mx_VerificationShowSas_emojiSas_emoji{font-size:3.2rem}.mx_VerificationShowSas_emojiSas_label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:1.2rem}.mx_VerificationShowSas_emojiSas_break{-ms-flex-preferred-size:100%;flex-basis:100%}.mx_VerificationShowSas .mx_Dialog_buttons button.mx_VerificationShowSas_matchButton{color:#0dbd8b;background-color:rgba(3,179,129,.16);border:none}.mx_VerificationShowSas .mx_Dialog_buttons button.mx_VerificationShowSas_noMatchButton{color:#ff4b55;background-color:rgba(255,75,85,.16);border:none}.mx_PlayPauseButton{position:relative;width:32px;height:32px;border-radius:32px;background-color:#fff}.mx_PlayPauseButton:before{content:"";position:absolute;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_PlayPauseButton.mx_PlayPauseButton_disabled:before{opacity:.5}.mx_PlayPauseButton.mx_PlayPauseButton_play:before{width:13px;height:16px;top:8px;left:12px;-webkit-mask-image:url(../../img/element-icons/play.a72552b.svg);mask-image:url(../../img/element-icons/play.a72552b.svg)}.mx_PlayPauseButton.mx_PlayPauseButton_pause:before{width:10px;height:12px;top:10px;left:11px;-webkit-mask-image:url(../../img/element-icons/pause.c4c0886.svg);mask-image:url(../../img/element-icons/pause.c4c0886.svg)}.mx_VoiceMessagePrimaryContainer{padding:7px 12px 7px 11px;background-color:#e3e8f0;border-radius:12px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#737d8c;font-size:1.4rem;line-height:2.4rem}.mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar{background-color:#c1c6cd}.mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar.mx_Waveform_bar_100pct{-webkit-transition:background-color .25s ease;transition:background-color .25s ease;background-color:#737d8c}.mx_VoiceMessagePrimaryContainer .mx_Clock{width:4.2rem;padding-right:6px;padding-left:8px}.mx_Waveform{position:relative;height:30px;top:1px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.mx_Waveform .mx_Waveform_bar{width:0;border:1px solid transparent;border-radius:2px;min-height:0;max-height:100%;margin-left:1px;margin-right:1px}.mx_CallContainer{position:absolute;right:20px;bottom:72px;z-index:100;pointer-events:none}.mx_CallContainer .mx_CallPreview{pointer-events:auto;cursor:pointer}.mx_CallContainer .mx_CallPreview .mx_CallView_video{width:350px}.mx_CallContainer .mx_CallPreview .mx_VideoFeed_local{border-radius:8px;overflow:hidden}.mx_CallContainer .mx_AppTile_persistedWrapper div{min-width:350px}.mx_CallContainer .mx_IncomingCallBox{min-width:250px;background-color:#f4f6fa;padding:8px;-webkit-box-shadow:0 14px 24px rgba(0,0,0,.08);box-shadow:0 14px 24px rgba(0,0,0,.08);border-radius:8px;pointer-events:auto;cursor:pointer}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo{display:-webkit-box;display:-ms-flexbox;display:flex;direction:row}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo .mx_BaseAvatar_initial,.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo img{margin:8px}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo h1,.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo p{margin:0;padding:0;font-size:1.4rem;line-height:1.6rem}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo h1{font-weight:700}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons{padding:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons>.mx_IncomingCallBox_spacer{width:8px}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons>*{-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;margin-right:0;font-size:1.5rem;line-height:2.4rem}.mx_CallView{border-radius:8px;background-color:#f2f5f8;padding-left:8px;padding-right:8px;pointer-events:auto}.mx_CallView_large{padding-bottom:10px;margin:5px 5px 5px 18px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_CallView_large,.mx_CallView_large .mx_CallView_voice{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_CallView_pip{width:320px;padding-bottom:8px;margin-top:10px;background-color:#f4f6fa;-webkit-box-shadow:0 4px 20px rgba(0,0,0,.2);box-shadow:0 4px 20px rgba(0,0,0,.2);border-radius:8px}.mx_CallView_pip .mx_CallView_voice{height:180px}.mx_CallView_pip .mx_CallView_callControls{bottom:0}.mx_CallView_pip .mx_CallView_callControls_button:before{width:36px;height:36px}.mx_CallView_pip .mx_CallView_holdTransferContent{padding-top:10px;padding-bottom:25px}.mx_CallView_content{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:8px}.mx_CallView_voice{-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;background-color:#27303a}.mx_CallView_voice,.mx_CallView_voice_avatarsContainer{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-direction:normal}.mx_CallView_voice_avatarsContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-ms-flex-direction:row;flex-direction:row}.mx_CallView_voice_avatarsContainer div{margin-left:12px;margin-right:12px}.mx_CallView_voice .mx_CallView_holdTransferContent .mx_CallView_voice_avatarContainer{border-radius:2000px;overflow:hidden;position:relative}.mx_CallView_holdTransferContent{height:20px;padding-top:20px;padding-bottom:15px;color:#fff}.mx_CallView_holdTransferContent .mx_AccessibleButton_hasKind{padding:0;font-weight:700}.mx_CallView_video{width:100%;height:100%;z-index:30;overflow:hidden}.mx_CallView_video_hold{overflow:hidden}.mx_CallView_video_hold .mx_VideoFeed{visibility:hidden}.mx_CallView_video_holdBackground{position:absolute;width:100%;height:100%;left:0;right:0;background-repeat:no-repeat;background-size:cover;background-position:50%;-webkit-filter:blur(20px);filter:blur(20px)}.mx_CallView_video_holdBackground:after{content:"";display:block;position:absolute;width:100%;height:100%;left:0;right:0;background-color:rgba(0,0,0,.6)}.mx_CallView_video .mx_CallView_holdTransferContent{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-weight:700;color:#fff;text-align:center}.mx_CallView_video .mx_CallView_holdTransferContent:before{display:block;margin-left:auto;margin-right:auto;content:"";width:40px;height:40px;background-image:url(../../img/voip/paused.77799b3.svg);background-position:50%;background-size:cover}.mx_CallView_pip .mx_CallView_video .mx_CallView_holdTransferContent:before{width:30px;height:30px}.mx_CallView_video .mx_CallView_holdTransferContent .mx_AccessibleButton_hasKind{padding:0}.mx_CallView_header{height:44px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:left;-ms-flex-pack:left;justify-content:left;-ms-flex-negative:0;flex-shrink:0}.mx_CallView_header_callType{font-size:1.2rem;font-weight:700;vertical-align:middle}.mx_CallView_header_secondaryCallInfo:before{content:"·";margin-left:6px;margin-right:6px}.mx_CallView_header_controls{margin-left:auto}.mx_CallView_header_button{display:inline-block;vertical-align:middle;cursor:pointer}.mx_CallView_header_button:before{content:"";display:inline-block;height:20px;width:20px;vertical-align:middle;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}.mx_CallView_header_button_fullscreen:before{-webkit-mask-image:url(../../img/element-icons/call/fullscreen.43be138.svg);mask-image:url(../../img/element-icons/call/fullscreen.43be138.svg)}.mx_CallView_header_button_expand:before{-webkit-mask-image:url(../../img/element-icons/call/expand.7ef9f56.svg);mask-image:url(../../img/element-icons/call/expand.7ef9f56.svg)}.mx_CallView_header_callInfo{margin-left:12px;margin-right:16px}.mx_CallView_header_roomName{font-weight:700;font-size:12px;line-height:normal;height:15px}.mx_CallView_secondaryCall_roomName{margin-left:4px}.mx_CallView_header_callTypeSmall{font-size:12px;color:#737d8c;line-height:normal;height:15px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:240px}.mx_CallView_header_phoneIcon{display:inline-block;margin-right:6px;height:16px;width:16px;vertical-align:middle}.mx_CallView_header_phoneIcon:before{content:"";display:inline-block;vertical-align:top;height:16px;width:16px;background-color:#ff4b55;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg)}.mx_CallView_callControls{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;bottom:5px;width:100%;opacity:1;-webkit-transition:opacity .5s;transition:opacity .5s}.mx_CallView_callControls_hidden{opacity:.001;pointer-events:none}.mx_CallView_callControls_button{cursor:pointer;margin-left:8px;margin-right:8px}.mx_CallView_callControls_button:before{content:"";display:inline-block;height:48px;width:48px;background-repeat:no-repeat;background-size:contain;background-position:50%}.mx_CallView_callControls_dialpad{margin-right:auto}.mx_CallView_callControls_dialpad:before{background-image:url(../../img/voip/dialpad.fdda9a0.svg)}.mx_CallView_callControls_button_dialpad_hidden{margin-right:auto;cursor:auto}.mx_CallView_callControls_button_micOn:before{background-image:url(../../img/voip/mic-on.2592c14.svg)}.mx_CallView_callControls_button_micOff:before{background-image:url(../../img/voip/mic-off.774e42b.svg)}.mx_CallView_callControls_button_vidOn:before{background-image:url(../../img/voip/vid-on.b9b8bbf.svg)}.mx_CallView_callControls_button_vidOff:before{background-image:url(../../img/voip/vid-off.5552596.svg)}.mx_CallView_callControls_button_hangup:before{background-image:url(../../img/voip/hangup.9c3adeb.svg)}.mx_CallView_callControls_button_more{margin-left:auto}.mx_CallView_callControls_button_more:before{background-image:url(../../img/voip/more.5e8055e.svg)}.mx_CallView_callControls_button_more_hidden{margin-left:auto;cursor:auto}.mx_CallView_callControls_button_invisible{visibility:hidden;pointer-events:none;position:absolute}.mx_CallViewForRoom{overflow:hidden}.mx_CallViewForRoom .mx_CallViewForRoom_ResizeWrapper{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:8px}.mx_CallViewForRoom .mx_CallViewForRoom_ResizeWrapper:hover .mx_CallViewForRoom_ResizeHandle{width:100%!important;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_CallViewForRoom .mx_CallViewForRoom_ResizeWrapper:hover .mx_CallViewForRoom_ResizeHandle:after{content:"";margin-top:3px;border-radius:4px;height:4px;width:100%;max-width:64px;background-color:#2e2f32}.mx_DialPad{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:16px;gap:16px}.mx_DialPad_button{width:40px;height:40px;background-color:#e3e8f0;border-radius:40px;font-size:18px;font-weight:600;text-align:center;vertical-align:middle;line-height:40px}.mx_DialPad_deleteButton:before,.mx_DialPad_dialButton:before{content:"";display:inline-block;height:40px;width:40px;vertical-align:middle;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:20px;mask-size:20px;-webkit-mask-position:center;mask-position:center;background-color:#fff}.mx_DialPad_deleteButton{background-color:#ff4b55}.mx_DialPad_deleteButton:before{-webkit-mask-image:url(../../img/element-icons/call/delete.833d785.svg);mask-image:url(../../img/element-icons/call/delete.833d785.svg);-webkit-mask-position:9px;mask-position:9px}.mx_DialPad_dialButton{background-color:#0dbd8b}.mx_DialPad_dialButton:before{-webkit-mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg)}.mx_DialPadContextMenu_header{margin-top:12px;margin-left:12px;margin-right:12px}.mx_DialPadContextMenu_title{color:#61708b;font-size:12px;font-weight:600}.mx_DialPadContextMenu_dialled{height:1em;font-size:18px;font-weight:600}.mx_DialPadContextMenu_dialPad{margin:16px}.mx_DialPadContextMenu_horizSep{position:relative}.mx_DialPadContextMenu_horizSep:before{content:"";position:absolute;width:100%;border-bottom:1px solid #e3e8f0}.mx_Dialog_dialPadWrapper .mx_Dialog{padding:0}.mx_DialPadModal{width:192px;height:368px}.mx_DialPadModal_header{margin-top:12px;margin-left:12px;margin-right:12px}.mx_DialPadModal_title{color:#61708b;font-size:12px;font-weight:600}.mx_DialPadModal_cancel{float:right;-webkit-mask:url(../../img/feather-customised/cancel.23c2689.svg);mask:url(../../img/feather-customised/cancel.23c2689.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;width:14px;height:14px;background-color:#c1c1c1;cursor:pointer}.mx_DialPadModal_field{border:none;margin:0}.mx_DialPadModal_field input{font-size:18px;font-weight:600}.mx_DialPadModal_dialPad{margin-left:16px;margin-right:16px;margin-top:16px}.mx_DialPadModal_horizSep{position:relative}.mx_DialPadModal_horizSep:before{content:"";position:absolute;width:100%;border-bottom:1px solid #e3e8f0}.mx_VideoFeed_voice{padding-bottom:52px;background-color:#27303a}.mx_VideoFeed_remote{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_VideoFeed_remote.mx_VideoFeed_video{background-color:#000}.mx_VideoFeed_local{max-width:25%;max-height:25%;position:absolute;right:10px;top:10px;z-index:100;border-radius:4px}.mx_VideoFeed_local.mx_VideoFeed_video{background-color:transparent}.mx_VideoFeed_mirror{-webkit-transform:scaleX(-1);transform:scaleX(-1)}
`
const snackbarCSS = `
#snackbar {
diff --git a/src/utils/exportUtils/exportIcons.ts b/src/utils/exportUtils/exportIcons.ts
new file mode 100644
index 0000000000..2a19e9c4d1
--- /dev/null
+++ b/src/utils/exportUtils/exportIcons.ts
@@ -0,0 +1,15 @@
+/* eslint-disable max-len */
+export default {
+ "trash.svg": `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M2.25 5.5H5.16667H21.75" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M16.5 5.5L15 1H9L7.5 5.5" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M5.25 9.25V20.75C5.25 21.8546 6.14543 22.75 7.25 22.75H16.75C17.8546 22.75 18.75 21.8546 18.75 20.75V9.25" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M9.75 9.25V18.25" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M14.25 9.25V18.25" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
+ `,
+ "attach.svg": `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M15.8155 13.0336L11.2282 17.4193C9.08205 19.45 5.53015 19.6024 3.45617 17.4193C1.4888 15.3484 1.48412 12.0136 3.63032 9.98294L11.8691 2.10597C13.2999 0.752226 15.5435 0.535035 16.984 2.05147C18.5968 3.7491 18.1298 5.99061 16.699 7.34435L8.6284 14.9682C7.913 15.645 6.7551 15.7233 6.03771 14.9682C5.34842 14.2426 5.45967 13.0625 6.17507 12.3856L10.9045 7.86398" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
+ `,
+};
From 1382bd4fee3c1fcee27ff5b89e3828d84e4450b4 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 1 Jun 2021 14:47:01 +0530
Subject: [PATCH 033/176] Handle icons and skip decryption checks during export
---
src/components/views/messages/MAudioBody.js | 2 +-
src/components/views/messages/MFileBody.js | 5 ++++-
src/components/views/messages/MImageBody.js | 6 +++---
src/components/views/messages/MVideoBody.tsx | 2 +-
src/components/views/messages/MessageEvent.js | 4 ++++
.../views/messages/RedactedBody.tsx | 4 +++-
src/components/views/rooms/EventTile.tsx | 2 ++
src/utils/exportUtils/exportCSS.ts | 21 +++++++++++++++++++
8 files changed, 39 insertions(+), 7 deletions(-)
diff --git a/src/components/views/messages/MAudioBody.js b/src/components/views/messages/MAudioBody.js
index 53aa013503..2c3eba8cb3 100644
--- a/src/components/views/messages/MAudioBody.js
+++ b/src/components/views/messages/MAudioBody.js
@@ -95,7 +95,7 @@ export default class MAudioBody extends React.Component {
);
}
- if (content.file !== undefined && this.state.decryptedUrl === null) {
+ if (!this.props.mediaSrc && content.file !== undefined && this.state.decryptedUrl === null) {
// Need to decrypt the attachment
// The attachment is decrypted in componentDidMount.
// For now add an img tag with a 16x16 spinner.
diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index 53d37d73da..19b8d7342b 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -104,6 +104,7 @@ export default class MFileBody extends React.Component {
showGenericPlaceholder: PropTypes.bool,
/* to set source to local file path during export */
mediaSrc: PropTypes.string,
+ isExporting: PropTypes.bool,
};
static defaultProps = {
@@ -174,7 +175,9 @@ export default class MFileBody extends React.Component {
if (this.props.showGenericPlaceholder) {
placeholder = (
<div className="mx_MFileBody_info">
- <span className="mx_MFileBody_info_icon" />
+ <span className="mx_MFileBody_info_icon" >
+ {this.props.isExporting ? <img class="mx_export_attach_icon" src="icons/attach.svg" /> : null}
+ </span>
<span className="mx_MFileBody_info_filename">{this.presentableTextForFile(content, false)}</span>
</div>
);
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 9937624a0e..56cc6a5eec 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -370,9 +370,9 @@ export default class MImageBody extends React.Component {
let gifLabel = null;
// e2e image hasn't been decrypted yet
- if (content.file !== undefined && this.state.decryptedUrl === null) {
+ if (!this.props.mediaSrc && content.file !== undefined && this.state.decryptedUrl === null) {
placeholder = <InlineSpinner w={32} h={32} />;
- } else if (!this.state.imgLoaded) {
+ } else if (!this.props.mediaSrc && !this.state.imgLoaded) {
// Deliberately, getSpinner is left unimplemented here, MStickerBody overides
placeholder = this.getPlaceholder();
}
@@ -407,7 +407,7 @@ export default class MImageBody extends React.Component {
<div className="mx_MImageBody_thumbnail_container" style={{ maxHeight: maxHeight + "px" }} >
{ /* Calculate aspect ratio, using %padding will size _container correctly */ }
<div style={{ paddingBottom: (100 * infoHeight / infoWidth) + '%' }} />
- { !this.props.mediaSrc && showPlaceholder &&
+ {showPlaceholder &&
<div className="mx_MImageBody_thumbnail" style={{
// Constrain width here so that spinner appears central to the loaded thumbnail
maxWidth: infoWidth + "px",
diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx
index 68cbb6702c..2b4327068e 100644
--- a/src/components/views/messages/MVideoBody.tsx
+++ b/src/components/views/messages/MVideoBody.tsx
@@ -209,7 +209,7 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
}
// Important: If we aren't autoplaying and we haven't decrypted it yet, show a video with a poster.
- if (content.file !== undefined && this.state.decryptedUrl === null && autoplay) {
+ if (!this.props.mediaSrc && content.file !== undefined && this.state.decryptedUrl === null && autoplay) {
// Need to decrypt the attachment
// The attachment is decrypted in componentDidMount.
// For now add an img tag with a spinner.
diff --git a/src/components/views/messages/MessageEvent.js b/src/components/views/messages/MessageEvent.js
index 84a3d56d77..e243c3c8bd 100644
--- a/src/components/views/messages/MessageEvent.js
+++ b/src/components/views/messages/MessageEvent.js
@@ -47,6 +47,9 @@ export default class MessageEvent extends React.Component {
/* to set source to local file path during export */
mediaSrc: PropTypes.string,
+ /* to set source to local file path during export */
+ isExporting: PropTypes.bool,
+
/* the maximum image height to use, if the event is an image */
maxImageHeight: PropTypes.number,
@@ -124,6 +127,7 @@ export default class MessageEvent extends React.Component {
showUrlPreview={this.props.showUrlPreview}
tileShape={this.props.tileShape}
mediaSrc={this.props.mediaSrc}
+ isExporting={this.props.isExporting}
maxImageHeight={this.props.maxImageHeight}
replacingEventId={this.props.replacingEventId}
editState={this.props.editState}
diff --git a/src/components/views/messages/RedactedBody.tsx b/src/components/views/messages/RedactedBody.tsx
index 5f80460d03..fb4f0b0efa 100644
--- a/src/components/views/messages/RedactedBody.tsx
+++ b/src/components/views/messages/RedactedBody.tsx
@@ -24,9 +24,10 @@ import SettingsStore from "../../../settings/SettingsStore";
interface IProps {
mxEvent: MatrixEvent;
+ isExporting: boolean;
}
-const RedactedBody = React.forwardRef<any, IProps>(({mxEvent}, ref) => {
+const RedactedBody = React.forwardRef<any, IProps>(({mxEvent, isExporting}, ref) => {
const cli: MatrixClient = useContext(MatrixClientContext);
let text = _t("Message deleted");
@@ -44,6 +45,7 @@ const RedactedBody = React.forwardRef<any, IProps>(({mxEvent}, ref) => {
return (
<span className="mx_RedactedBody" ref={ref} title={titleText}>
+ { isExporting ? <img className="mx_export_trash_icon" src="icons/trash.svg" title="Redacted" /> : null }
{ text }
</span>
);
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index a7bfb40ad0..302d35fcce 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -311,6 +311,7 @@ export default class EventTile extends React.Component<IProps, IState> {
static defaultProps = {
// no-op function because onHeightChanged is optional yet some sub-components assume its existence
onHeightChanged: function() {},
+ isExporting: false,
};
static contextType = MatrixClientContext;
@@ -1150,6 +1151,7 @@ export default class EventTile extends React.Component<IProps, IState> {
{ thread }
<EventTileType ref={this.tile}
mxEvent={this.props.mxEvent}
+ isExporting={this.props.isExporting}
replacingEventId={this.props.replacingEventId}
editState={this.props.editState}
mediaSrc={this.props.mediaSrc}
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index dd645b4362..b34d22cfae 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -58,5 +58,26 @@ a.mx_reply_anchor:hover{
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
+
+.mx_MFileBody_info .mx_MFileBody_info_icon img.mx_export_attach_icon {
+ content: '';
+ background-color: #ffffff;
+ width: 13px;
+ height: 15px;
+ position: absolute;
+ top: 8px;
+ left: 9px;
+}
+
+.mx_RedactedBody img.mx_export_trash_icon {
+ height: 14px;
+ width: 14px;
+ background-color: #ffffff;
+ content: '';
+ position: absolute;
+ top: 1px;
+ left: 0;
+}
+
`
export default lightCSS + snackbarCSS;
From 9c38af007583b7fda45620f20d26b6f53259e9b1 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 1 Jun 2021 17:06:39 +0530
Subject: [PATCH 034/176] Make reply UI work even when javascript is disabled
---
src/components/views/elements/ReplyThread.js | 2 +-
src/utils/exportUtils/HtmlExport.tsx | 2 +-
src/utils/exportUtils/exportCSS.ts | 20 +++++++++++++++
src/utils/exportUtils/exportJS.ts | 27 ++++++++------------
4 files changed, 33 insertions(+), 18 deletions(-)
diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index 018c5d1e6e..f67889cca5 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -374,7 +374,7 @@ export default class ReplyThread extends React.Component {
} else if (this.props.isExporting) {
const eventId = ReplyThread.getParentEventId(this.props.parentEv);
header = <p style={{ marginTop: -5, marginBottom: 5 }}>
- In reply to <a className="mx_reply_anchor" scroll-to={`${eventId}`}>this message</a>
+ In reply to <a className="mx_reply_anchor" href={`#${eventId}`} scroll-to={eventId}>this message</a>
</p>;
} else if (this.state.loading) {
const Spinner = sdk.getComponent("elements.Spinner");
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index eeb9f6a684..87c11e59ad 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -216,7 +216,7 @@ export default class HTMLExporter extends Exporter {
const hasAvatar = this.hasAvatar(mxEv);
if (hasAvatar) this.saveAvatarIfNeeded(mxEv);
- return <li id={mxEv.getId()}>
+ return <li className="mx_Export_EventWrapper" id={mxEv.getId()}>
<EventTile
mxEvent={mxEv}
continuation={continuation}
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index b34d22cfae..8aee952cbc 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -69,6 +69,26 @@ a.mx_reply_anchor:hover{
left: 9px;
}
+* {
+ scroll-behavior: smooth !important;
+}
+
+
+li.mx_Export_EventWrapper:target {
+ background: white;
+ animation: mx_event_highlight_animation 2s linear;
+}
+
+
+@keyframes mx_event_highlight_animation {
+ 0%,100% {
+ background: white;
+ }
+ 50% {
+ background: #e3e2df;
+ }
+}
+
.mx_RedactedBody img.mx_export_trash_icon {
height: 14px;
width: 14px;
diff --git a/src/utils/exportUtils/exportJS.ts b/src/utils/exportUtils/exportJS.ts
index 4fd0a5159d..2f7ba550e7 100644
--- a/src/utils/exportUtils/exportJS.ts
+++ b/src/utils/exportUtils/exportJS.ts
@@ -1,16 +1,10 @@
export default `
-function scrollToElement(replyId){
- let el = document.getElementById(replyId);
- if(!el) {
- showToast("The message you're looking for wasn't exported");
- return;
- };
- el.scrollIntoView({ behavior: 'smooth', block: 'center' });
- el.style.backgroundColor = '#f6f7f8';
- el.style.transition = 'background-color 1s ease'
- setTimeout(() => {
- el.style.backgroundColor = "white"
- }, 2000);
+function showToastIfNeeded(replyId){
+ let el = document.getElementById(replyId);
+ if(!el) {
+ showToast("The message you're looking for wasn't exported");
+ return;
+ };
}
function showToast(text) {
@@ -23,10 +17,11 @@ function showToast(text) {
}
window.onload = () => {
- document.querySelectorAll('.mx_reply_anchor').forEach(element => {
- element.addEventListener('click', event => {
- scrollToElement(event.target.getAttribute("scroll-to"));
- })
+document.querySelectorAll('.mx_reply_anchor').forEach(element => {
+ element.addEventListener('click', event => {
+ showToastIfNeeded(event.target.getAttribute("scroll-to"));
})
+})
}
+
`
From fc61e96218398828a40ac30c7a585b39ce41e3b1 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 1 Jun 2021 17:22:13 +0530
Subject: [PATCH 035/176] Remove unnecessary export
---
src/HtmlUtils.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/HtmlUtils.tsx b/src/HtmlUtils.tsx
index 1d5defe45d..ef5ac383e3 100644
--- a/src/HtmlUtils.tsx
+++ b/src/HtmlUtils.tsx
@@ -233,7 +233,7 @@ const transformTags: IExtendedSanitizeOptions["transformTags"] = { // custom to
},
};
-export const sanitizeHtmlParams: IExtendedSanitizeOptions = {
+const sanitizeHtmlParams: IExtendedSanitizeOptions = {
allowedTags: [
'font', // custom to matrix for IRC-style font coloring
'del', // for markdown
From 01a3b854c3cad0198a631b873fffd099a66936ac Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 1 Jun 2021 20:08:10 +0530
Subject: [PATCH 036/176] Add sticker support
---
src/utils/exportUtils/HtmlExport.tsx | 24 +++++++++---------------
1 file changed, 9 insertions(+), 15 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 87c11e59ad..0babf01fe7 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -246,21 +246,15 @@ export default class HTMLExporter extends Exporter {
protected async createMessageBody(mxEv: MatrixEvent, joined = false) {
let eventTile: JSX.Element;
- switch (mxEv.getContent().msgtype) {
- case "m.image":
- case "m.file":
- case "m.video":
- case "m.audio": {
- const blob = await this.getMediaBlob(mxEv);
- const filePath = this.getFilePath(mxEv);
- eventTile = this.getEventTile(mxEv, joined, filePath);
- this.zip.file(filePath, blob);
- break;
- }
- default:
- eventTile = this.getEventTile(mxEv, joined);
- break;
- }
+ const attachmentTypes = ["m.sticker", "m.image", "m.file", "m.video", "m.audio"]
+
+ if (mxEv.getType() === attachmentTypes[0] || attachmentTypes.includes(mxEv.getContent().msgtype)) {
+ const blob = await this.getMediaBlob(mxEv);
+ const filePath = this.getFilePath(mxEv);
+ eventTile = this.getEventTile(mxEv, joined, filePath);
+ this.zip.file(filePath, blob);
+ } else eventTile = this.getEventTile(mxEv, joined);
+
return renderToStaticMarkup(eventTile);
}
From c63c59b4080de22b4a871773ac13454ce36cce37 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 1 Jun 2021 21:52:04 +0530
Subject: [PATCH 037/176] Rename date function
---
src/DateUtils.ts | 2 +-
src/utils/exportUtils/HtmlExport.tsx | 6 +++---
2 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/src/DateUtils.ts b/src/DateUtils.ts
index 6d390e9132..e629782d6f 100644
--- a/src/DateUtils.ts
+++ b/src/DateUtils.ts
@@ -138,7 +138,7 @@ export function wantsDateSeparator(prevEventDate: Date, nextEventDate: Date): bo
}
-export function formatFullDateNoDayNoTime(date: Date) {
+export function formatFullDateNoDay(date: Date) {
return (
date.getFullYear() +
"-" +
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 0babf01fe7..d5a4220304 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -9,7 +9,7 @@ import { Exporter } from "./Exporter";
import { renderToStaticMarkup } from 'react-dom/server'
import { Layout } from "../../settings/Layout";
import { shouldFormContinuation } from "../../components/structures/MessagePanel";
-import { formatFullDateNoDayNoTime, wantsDateSeparator } from "../../DateUtils";
+import { formatFullDateNoDay, wantsDateSeparator } from "../../DateUtils";
import { RoomPermalinkCreator } from "../permalinks/Permalinks";
import * as ponyfill from "web-streams-polyfill/ponyfill"
import * as Avatar from "../../Avatar";
@@ -205,7 +205,7 @@ export default class HTMLExporter extends Exporter {
fileDirectory = "files";
break;
}
- const fileDate = formatFullDateNoDayNoTime(new Date(event.getTs()));
+ const fileDate = formatFullDateNoDay(new Date(event.getTs()));
const [fileName, fileExt] = this.splitFileName(event.getContent().body);
const filePath = fileDirectory + "/" + fileName + '-' + fileDate + '.' + fileExt;
return filePath;
@@ -283,7 +283,7 @@ export default class HTMLExporter extends Exporter {
for (const iconName in exportIcons) {
this.zip.file(`icons/${iconName}`, exportIcons[iconName]);
}
- const filename = `matrix-export-${formatFullDateNoDayNoTime(new Date())}.zip`;
+ const filename = `matrix-export-${formatFullDateNoDay(new Date())}.zip`;
//Generate the zip file asynchronously
const blob = await this.zip.generateAsync({ type: "blob" });
From 692e499cf2711b4d8fce1f0799643dd8f99cb4f0 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 2 Jun 2021 12:06:00 +0530
Subject: [PATCH 038/176] Handle encrypted stickers and store stickers in a
separate folder
---
src/DateUtils.ts | 1 -
src/components/views/messages/MFileBody.js | 4 +++-
src/utils/exportUtils/HtmlExport.tsx | 11 ++++++-----
3 files changed, 9 insertions(+), 7 deletions(-)
diff --git a/src/DateUtils.ts b/src/DateUtils.ts
index e629782d6f..4bfe575e3c 100644
--- a/src/DateUtils.ts
+++ b/src/DateUtils.ts
@@ -137,7 +137,6 @@ export function wantsDateSeparator(prevEventDate: Date, nextEventDate: Date): bo
return prevEventDate.getDay() !== nextEventDate.getDay();
}
-
export function formatFullDateNoDay(date: Date) {
return (
date.getFullYear() +
diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index 19b8d7342b..8afd4abaf6 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -176,7 +176,9 @@ export default class MFileBody extends React.Component {
placeholder = (
<div className="mx_MFileBody_info">
<span className="mx_MFileBody_info_icon" >
- {this.props.isExporting ? <img class="mx_export_attach_icon" src="icons/attach.svg" /> : null}
+ {this.props.isExporting ?
+ <img className="mx_export_attach_icon" src="icons/attach.svg" />
+ : null}
</span>
<span className="mx_MFileBody_info_filename">{this.presentableTextForFile(content, false)}</span>
</div>
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index d5a4220304..47b318c409 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -156,7 +156,9 @@ export default class HTMLExporter extends Exporter {
try {
const isEncrypted = event.isEncrypted();
const content = event.getContent();
- if (isEncrypted && !content.hasOwnProperty("org.matrix.msc1767.file")) {
+ const shouldDecrypt = isEncrypted && !content.hasOwnProperty("org.matrix.msc1767.file")
+ && event.getType() !== "m.sticker";
+ if (shouldDecrypt) {
blob = await decryptFile(content.file);
} else {
const media = mediaFromContent(event.getContent());
@@ -185,7 +187,7 @@ export default class HTMLExporter extends Exporter {
if (lastDot === -1) return [file, ""];
const fileName = file.slice(0, lastDot);
const ext = file.slice(lastDot + 1);
- return [fileName, ext];
+ return [fileName, '.' + ext];
}
protected getFilePath(event: MatrixEvent) {
@@ -202,12 +204,11 @@ export default class HTMLExporter extends Exporter {
fileDirectory = "audio";
break;
default:
- fileDirectory = "files";
- break;
+ fileDirectory = event.getType() === "m.sticker" ? "stickers" : "files";
}
const fileDate = formatFullDateNoDay(new Date(event.getTs()));
const [fileName, fileExt] = this.splitFileName(event.getContent().body);
- const filePath = fileDirectory + "/" + fileName + '-' + fileDate + '.' + fileExt;
+ const filePath = fileDirectory + "/" + fileName + '-' + fileDate + fileExt;
return filePath;
}
From f84ae4a1734f5b37f3836f7ce3de890168ae9049 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 2 Jun 2021 13:12:03 +0530
Subject: [PATCH 039/176] Add await
---
src/utils/exportUtils/HtmlExport.tsx | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 47b318c409..f4fa4d0cf4 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -213,9 +213,9 @@ export default class HTMLExporter extends Exporter {
}
- protected getEventTile(mxEv: MatrixEvent, continuation: boolean, mediaSrc?: string) {
+ protected async getEventTile(mxEv: MatrixEvent, continuation: boolean, mediaSrc?: string) {
const hasAvatar = this.hasAvatar(mxEv);
- if (hasAvatar) this.saveAvatarIfNeeded(mxEv);
+ if (hasAvatar) await this.saveAvatarIfNeeded(mxEv);
return <li className="mx_Export_EventWrapper" id={mxEv.getId()}>
<EventTile
@@ -252,9 +252,9 @@ export default class HTMLExporter extends Exporter {
if (mxEv.getType() === attachmentTypes[0] || attachmentTypes.includes(mxEv.getContent().msgtype)) {
const blob = await this.getMediaBlob(mxEv);
const filePath = this.getFilePath(mxEv);
- eventTile = this.getEventTile(mxEv, joined, filePath);
+ eventTile = await this.getEventTile(mxEv, joined, filePath);
this.zip.file(filePath, blob);
- } else eventTile = this.getEventTile(mxEv, joined);
+ } else eventTile = await this.getEventTile(mxEv, joined);
return renderToStaticMarkup(eventTile);
}
From 183166c460f5e42605399d954d944874edc835fc Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Thu, 3 Jun 2021 12:40:00 +0530
Subject: [PATCH 040/176] Unminify CSS and apply suggestions from the design
team
---
src/DateUtils.ts | 12 +-
src/i18n/strings/en_EN.json | 3 +
src/utils/exportUtils/HtmlExport.tsx | 55 +-
src/utils/exportUtils/exportCSS.ts | 19469 ++++++++++++++++++++++++-
4 files changed, 19525 insertions(+), 14 deletions(-)
diff --git a/src/DateUtils.ts b/src/DateUtils.ts
index 4bfe575e3c..481afb312b 100644
--- a/src/DateUtils.ts
+++ b/src/DateUtils.ts
@@ -141,7 +141,7 @@ export function formatFullDateNoDay(date: Date) {
return (
date.getFullYear() +
"-" +
- pad(date.getMonth()) +
+ pad(date.getMonth() + 1) +
"-" +
pad(date.getDate()) +
_t(" at ") +
@@ -152,3 +152,13 @@ export function formatFullDateNoDay(date: Date) {
pad(date.getSeconds())
);
}
+
+export function formatFullDateNoDayNoTime(date: Date) {
+ return (
+ date.getFullYear() +
+ "/" +
+ pad(date.getMonth() + 1) +
+ "/" +
+ pad(date.getDate())
+ );
+}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 682a31e0a3..35e6839c52 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -725,6 +725,9 @@
"Invite to %(spaceName)s": "Invite to %(spaceName)s",
"Share your public space": "Share your public space",
"Unknown App": "Unknown App",
+ "%(creatorName)s created this room.": "%(creatorName)s created this room.",
+ "This is the start of export of <b>%(roomName)s</b>.\n Exported by %(exporterDetails)s at %(exportDate)s. ": "This is the start of export of <b>%(roomName)s</b>.\n Exported by %(exporterDetails)s at %(exportDate)s. ",
+ "Topic: %(topic)s": "Topic: %(topic)s",
"Help us improve %(brand)s": "Help us improve %(brand)s",
"Send <UsageDataLink>anonymous usage data</UsageDataLink> which helps us improve %(brand)s. This will use a <PolicyLink>cookie</PolicyLink>.": "Send <UsageDataLink>anonymous usage data</UsageDataLink> which helps us improve %(brand)s. This will use a <PolicyLink>cookie</PolicyLink>.",
"Yes": "Yes",
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index f4fa4d0cf4..1432b61e85 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -9,7 +9,7 @@ import { Exporter } from "./Exporter";
import { renderToStaticMarkup } from 'react-dom/server'
import { Layout } from "../../settings/Layout";
import { shouldFormContinuation } from "../../components/structures/MessagePanel";
-import { formatFullDateNoDay, wantsDateSeparator } from "../../DateUtils";
+import { formatFullDateNoDay, formatFullDateNoDayNoTime, wantsDateSeparator } from "../../DateUtils";
import { RoomPermalinkCreator } from "../permalinks/Permalinks";
import * as ponyfill from "web-streams-polyfill/ponyfill"
import * as Avatar from "../../Avatar";
@@ -19,6 +19,9 @@ import exportCSS from "./exportCSS";
import exportJS from "./exportJS";
import BaseAvatar from "../../components/views/avatars/BaseAvatar";
import exportIcons from "./exportIcons";
+import { _t } from "../../languageHandler";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+import { EventType } from "matrix-js-sdk/src/@types/event";
export default class HTMLExporter extends Exporter {
protected zip: JSZip;
@@ -32,21 +35,22 @@ export default class HTMLExporter extends Exporter {
this.permalinkCreator = new RoomPermalinkCreator(this.room);
}
- protected async getRoomAvatar() {
+ protected async getRoomAvatar(avatarSide: number) {
let blob: Blob;
- const avatarUrl = Avatar.avatarUrlForRoom(this.room, 32, 32, "crop");
+ const avatarUrl = Avatar.avatarUrlForRoom(this.room, avatarSide, avatarSide, "crop");
+ const avatarPath = `room/avatar${avatarSide}.png`;
if (avatarUrl) {
const image = await fetch(avatarUrl);
blob = await image.blob();
- this.zip.file("room.png", blob);
+ this.zip.file(avatarPath, blob);
}
const avatar = (
<BaseAvatar
- width={32}
- height={32}
+ width={avatarSide}
+ height={avatarSide}
name={this.room.name}
title={this.room.name}
- url={blob ? "room.png" : null}
+ url={blob ? avatarPath : null}
resizeMethod={"crop"}
/>
);
@@ -54,7 +58,32 @@ export default class HTMLExporter extends Exporter {
}
protected async wrapHTML(content: string, room: Room) {
- const roomAvatar = await this.getRoomAvatar();
+ const roomAvatar32 = await this.getRoomAvatar(32);
+ const exportDate = formatFullDateNoDayNoTime(new Date());
+ const cli = MatrixClientPeg.get();
+ const creator = room.currentState.getStateEvents(EventType.RoomCreate, "")?.getSender();
+ const creatorName = room?.getMember(creator)?.rawDisplayName || creator;
+ const exporter = cli.getUserId();
+ const exporterName = room?.getMember(exporter)?.rawDisplayName;
+ const topic = room.currentState.getStateEvents(EventType.RoomTopic, "")?.getContent()?.topic
+ || room.topic || "";
+ const createdText = _t("%(creatorName)s created this room.", {
+ creatorName,
+ });
+
+ const exportedText = _t(`This is the start of export of <b>%(roomName)s</b>.
+ Exported by %(exporterDetails)s at %(exportDate)s. `, {
+ exportDate,
+ roomName: room.name,
+ exporterDetails: `<a href="https://matrix.to/#/${exporter}" target="_blank" rel="noopener noreferrer">
+ ${exporterName ? `<b>${ exporterName }</b>(${ exporter })` : `<b>${ exporter }</b>`}
+ </a>`,
+ });
+
+ const topicText = topic ? _t("Topic: %(topic)s", { topic }) : "";
+ const roomAvatar52 = await this.getRoomAvatar(52);
+
+
return `
<!DOCTYPE html>
<html lang="en">
@@ -79,7 +108,7 @@ export default class HTMLExporter extends Exporter {
<div class="mx_RoomHeader_wrapper" aria-owns="mx_RightPanel">
<div class="mx_RoomHeader_avatar">
<div class="mx_DecoratedRoomAvatar">
- ${roomAvatar}
+ ${roomAvatar32}
</div>
</div>
<div class="mx_RoomHeader_name">
@@ -91,7 +120,7 @@ export default class HTMLExporter extends Exporter {
${room.name}
</div>
</div>
- <div class="mx_RoomHeader_topic" dir="auto"></div>
+ <div class="mx_RoomHeader_topic" dir="auto"> ${topic} </div>
</div>
</div>
<div class="mx_MainSplit">
@@ -113,6 +142,12 @@ export default class HTMLExporter extends Exporter {
aria-live="polite"
role="list"
>
+ <div class="mx_NewRoomIntro">
+ ${roomAvatar52}
+ <h2> ${room.name} </h2>
+ <p> ${createdText} <br/><br/> ${exportedText} </p>
+ <p> ${topicText} </p>
+ </div>
${content}
</ol>
</div>
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index 8aee952cbc..6f2284cc32 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -1,6 +1,19469 @@
/* eslint-disable max-len */
-const lightCSS = `
-@charset "utf-8";@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-Regular.4232a67.woff2) format("woff2"),url(../../fonts/Inter/Inter-Regular.3a1908c.woff) format("woff")}@font-face{font-family:Inter;font-style:italic;font-weight:400;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-Italic.b791861.woff2) format("woff2"),url(../../fonts/Inter/Inter-Italic.b13e6fe.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-Medium.027d14e.woff2) format("woff2"),url(../../fonts/Inter/Inter-Medium.d1f6b6e.woff) format("woff")}@font-face{font-family:Inter;font-style:italic;font-weight:500;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-MediumItalic.8154ac2.woff2) format("woff2"),url(../../fonts/Inter/Inter-MediumItalic.1912849.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-SemiBold.0802d48.woff2) format("woff2"),url(../../fonts/Inter/Inter-SemiBold.8357f92.woff) format("woff")}@font-face{font-family:Inter;font-style:italic;font-weight:600;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-SemiBoldItalic.10a60d8.woff2) format("woff2"),url(../../fonts/Inter/Inter-SemiBoldItalic.1c70752.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-Bold.fc28dff.woff2) format("woff2"),url(../../fonts/Inter/Inter-Bold.025b6f2.woff) format("woff")}@font-face{font-family:Inter;font-style:italic;font-weight:700;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-BoldItalic.2129bd0.woff2) format("woff2"),url(../../fonts/Inter/Inter-BoldItalic.80f8542.woff) format("woff")}@font-face{font-family:Inconsolata;font-style:normal;font-weight:400;src:local("Inconsolata Regular"),local("Inconsolata-Regular"),url(../../fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlX5qhExfHwNJU.2aafaa1.woff2) format("woff2");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Inconsolata;font-style:normal;font-weight:400;font-display:swap;src:local("Inconsolata Regular"),local("Inconsolata-Regular"),url(../../fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlZ5qhExfHw.5476fd3.woff2) format("woff2");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:Inconsolata;font-style:normal;font-weight:700;font-display:swap;src:local("Inconsolata Bold"),local("Inconsolata-Bold"),url(../../fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71n5_zaDpwm80E.6bc411a.woff2) format("woff2");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Inconsolata;font-style:normal;font-weight:700;font-display:swap;src:local("Inconsolata Bold"),local("Inconsolata-Bold"),url(../../fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71p5_zaDpwm.000abc6.woff2) format("woff2");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}.hljs-addition{background:#dfd}.hljs-deletion{background:#fdd}@supports ((-webkit-backdrop-filter:none) or (backdrop-filter:none)){.mx_LeftPanel{background-image:unset;background-image:var(--avatar-url,unset);background-repeat:no-repeat;background-size:cover;background-position:0 0}.mx_GroupFilterPanel,.mx_SpacePanel{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.mx_LeftPanel .mx_LeftPanel_roomListContainer{-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px)}}.mx_RoomSublist_showNButton{background-color:transparent!important}a:hover,a:link,a:visited{text-decoration:none}:root{font-size:10px;--transition-short:.1s;--transition-standard:.3s}@media (prefers-reduced-motion){:root{--transition-short:0;--transition-standard:0}}html{height:100%;overflow:hidden}body{font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.5rem;background-color:#fff;color:#2e2f32;border:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code,pre{font-family:Inconsolata,Twemoji,Apple Color Emoji,Segoe UI Emoji,Courier,monospace,Noto Color Emoji;font-size:100%!important}.error,.text-error,.text-warning,.warning{color:#ff4b55}.text-success{color:#0dbd8b}.text-muted{color:#61708b}b{font-weight:700}h2{color:#2e2f32;font-weight:400;font-size:1.8rem;margin-top:16px;margin-bottom:16px}a:hover,a:link,a:visited{color:#238cf5}input[type=password],input[type=search],input[type=text]{padding:9px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;font-weight:600;min-width:0}input[type=search].mx_textinput_icon,input[type=text].mx_textinput_icon{padding-left:36px;background-repeat:no-repeat;background-position:10px}input[type=search].mx_textinput_icon.mx_textinput_search,input[type=text].mx_textinput_icon.mx_textinput_search{background-image:url(../../img/feather-customised/search-input.044bfa7.svg)}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{opacity:1}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1}input::-ms-input-placeholder,textarea::-ms-input-placeholder{opacity:1}input::placeholder,textarea::placeholder{opacity:1}input[type=password],input[type=text],textarea{background-color:transparent;color:#2e2f32}textarea{font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;color:#2e2f32}input[type=password]:focus,input[type=text]:focus,textarea:focus{outline:none;-webkit-box-shadow:none;box-shadow:none}:focus:not(.focus-visible){outline:none}.mx_Dialog .mx_textinput>input[type=search],.mx_Dialog .mx_textinput>input[type=text],.mx_MatrixChat .mx_textinput>input[type=search],.mx_MatrixChat .mx_textinput>input[type=text]{border:none;-webkit-box-flex:1;-ms-flex:1;flex:1;color:#2e2f32}.mx_Dialog .mx_textinput,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search],.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text],.mx_MatrixChat .mx_textinput,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search],.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]{display:block;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:transparent;color:#9fa9ba;border-radius:4px;border:1px solid rgba(46,47,50,.1);margin:9px}.mx_Dialog .mx_textinput,.mx_MatrixChat .mx_textinput{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_Dialog .mx_textinput input::-webkit-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-webkit-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-webkit-input-placeholder,.mx_MatrixChat .mx_textinput input::-webkit-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-webkit-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-webkit-input-placeholder{color:rgba(159,169,186,.75)}.mx_Dialog .mx_textinput input::-moz-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-moz-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-moz-placeholder,.mx_MatrixChat .mx_textinput input::-moz-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-moz-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-moz-placeholder{color:rgba(159,169,186,.75)}.mx_Dialog .mx_textinput input:-ms-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]:-ms-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]:-ms-input-placeholder,.mx_MatrixChat .mx_textinput input:-ms-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]:-ms-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]:-ms-input-placeholder{color:rgba(159,169,186,.75)}.mx_Dialog .mx_textinput input::-ms-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-ms-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-ms-input-placeholder,.mx_MatrixChat .mx_textinput input::-ms-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-ms-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-ms-input-placeholder{color:rgba(159,169,186,.75)}.mx_Dialog .mx_textinput input::placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::placeholder,.mx_MatrixChat .mx_textinput input::placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::placeholder{color:rgba(159,169,186,.75)}.dark-panel{background-color:#f2f5f8}.dark-panel .mx_textinput,.dark-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search],.dark-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]{color:#9fa9ba;background-color:#fff;border:none}.light-panel .mx_textinput,.light-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search],.light-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]{color:#9fa9ba;background-color:#f2f5f8;border:none}::-moz-focus-inner{border:0}#mx_theme_accentColor{color:#0dbd8b}#mx_theme_secondaryAccentColor{color:#f2f5f8}#mx_theme_tertiaryAccentColor{color:#d3efe1}.mx_Dialog_wrapper{position:fixed;z-index:4000;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_Dialog{background-color:#fff;color:#747474;z-index:4012;font-weight:300;font-size:1.5rem;position:relative;padding:24px;max-height:80%;-webkit-box-shadow:2px 15px 30px 0 rgba(0,0,0,.48);box-shadow:2px 15px 30px 0 rgba(0,0,0,.48);border-radius:8px;overflow-y:auto}.mx_Dialog_fixedWidth{width:60vw;max-width:704px}.mx_Dialog_staticWrapper .mx_Dialog{z-index:4010}.mx_Dialog_background{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(46,48,51,.38);opacity:.8;z-index:4011}.mx_Dialog_background.mx_Dialog_staticBackground{z-index:4009}.mx_Dialog_wrapperWithStaticUnder .mx_Dialog_background{opacity:.4}.mx_Dialog_lightbox .mx_Dialog_background{opacity:.95;background-color:#000}.mx_Dialog_lightbox .mx_Dialog{border-radius:0;background-color:transparent;width:100%;height:100%;max-width:100%;max-height:100%;pointer-events:none;padding:0}.mx_Dialog_header{position:relative;margin-bottom:10px}.mx_Dialog_titleImage{vertical-align:sub;width:25px;height:25px;margin-left:-2px;margin-right:4px}.mx_Dialog_title{font-size:2.2rem;font-weight:600;line-height:3.6rem;color:#45474a}.mx_Dialog_header.mx_Dialog_headerWithButton>.mx_Dialog_title{text-align:center}.mx_Dialog_header.mx_Dialog_headerWithCancel>.mx_Dialog_title{margin-right:20px}.mx_Dialog_title.danger{color:#ff4b55}.mx_Dialog_cancelButton{-webkit-mask:url(../../img/feather-customised/cancel.23c2689.svg);mask:url(../../img/feather-customised/cancel.23c2689.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;width:14px;height:14px;background-color:#c1c1c1;cursor:pointer;position:absolute;top:10px;right:0}.mx_Dialog_content{margin:24px 0 68px;font-size:1.4rem;color:#2e2f32;word-wrap:break-word}.mx_Dialog_buttons{margin-top:20px;text-align:right}.mx_Dialog_buttons .mx_Dialog_buttons_additive{float:left}.mx_Dialog_buttons button,.mx_Dialog_buttons input[type=submit],.mx_Dialog button,.mx_Dialog input[type=submit]{vertical-align:middle;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;padding:7px 1.5em;cursor:pointer;display:inline-block;outline:none;margin-left:0;margin-right:8px;font-weight:600;border:1px solid #0dbd8b;color:#0dbd8b;background-color:#fff;font-family:inherit}.mx_Dialog button:last-child{margin-right:0}.mx_Dialog_buttons button:focus,.mx_Dialog_buttons input[type=submit]:focus,.mx_Dialog button:focus,.mx_Dialog input[type=submit]:focus{-webkit-filter:brightness(105%);filter:brightness(105%)}.mx_Dialog_buttons button.mx_Dialog_primary,.mx_Dialog_buttons input[type=submit].mx_Dialog_primary,.mx_Dialog button.mx_Dialog_primary,.mx_Dialog input[type=submit].mx_Dialog_primary{color:#fff;background-color:#0dbd8b;min-width:156px}.mx_Dialog_buttons button.danger,.mx_Dialog_buttons input[type=submit].danger,.mx_Dialog button.danger,.mx_Dialog input[type=submit].danger{background-color:#ff4b55;border:1px solid #ff4b55;color:#fff}.mx_Dialog button.warning,.mx_Dialog input[type=submit].warning{border:1px solid #ff4b55;color:#ff4b55}.mx_Dialog_buttons button:disabled,.mx_Dialog_buttons input[type=submit]:disabled,.mx_Dialog button:disabled,.mx_Dialog input[type=submit]:disabled{background-color:#747474;border:1px solid #747474;opacity:.7}.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog{width:auto;border-radius:8px;padding:0;-webkit-box-shadow:none;box-shadow:none;overflow-x:hidden;overflow-y:hidden}.mx_GeneralButton{vertical-align:middle;border:0;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;padding:7px 1.5em;cursor:pointer;display:inline-block;outline:none;display:inline;margin:auto}.mx_linkButton{cursor:pointer;color:#0dbd8b}.mx_TextInputDialog_label{text-align:left;padding-bottom:12px}.mx_TextInputDialog_input{font-size:1.5rem;border-radius:3px;border:1px solid #e7e7e7;padding:9px;color:#2e2f32;background-color:#fff}.mx_textButton{vertical-align:middle;border:0;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;cursor:pointer;display:inline-block;outline:none;font-size:1.5rem;padding:0 1.5em}.mx_button_row{margin-top:69px}.mx_Username_color1{color:#368bd6}.mx_Username_color2{color:#ac3ba8}.mx_Username_color3{color:#0dbd8b}.mx_Username_color4{color:#e64f7a}.mx_Username_color5{color:#ff812d}.mx_Username_color6{color:#2dc2c5}.mx_Username_color7{color:#5c56f5}.mx_Username_color8{color:#74d12c}.mx_Tooltip_dark .mx_Tooltip_chevron:after{border-right-color:#27303a}html{scrollbar-color:rgba(0,0,0,.2) transparent}*{scrollbar-width:thin}::-webkit-scrollbar{width:6px;height:6px;background-color:transparent}::-webkit-scrollbar-thumb{border-radius:3px;background-color:rgba(0,0,0,.2)}.mx_AutoHideScrollbar:hover{scrollbar-color:rgba(0,0,0,.2) transparent}.mx_AutoHideScrollbar:hover::-webkit-scrollbar{background-color:transparent}.mx_AutoHideScrollbar:hover::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.2)}.mx_AutoHideScrollbar{overflow-x:hidden;overflow-y:auto;overflow-y:overlay;-ms-overflow-style:-ms-autohiding-scrollbar}.mx_AutoHideScrollbar::-webkit-scrollbar,.mx_AutoHideScrollbar::-webkit-scrollbar-thumb{background-color:transparent}.mx_AutoHideScrollbar{scrollbar-color:transparent transparent}.mx_CompatibilityPage{width:100%;height:100%;background-color:#e55}.mx_CompatibilityPage_box{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:500px;height:300px;border:1px solid;padding:10px;background-color:#fcc}.mx_ContextualMenu_wrapper{position:fixed;z-index:5000}.mx_ContextualMenu_background{position:fixed;top:0;left:0;width:100%;height:100%;opacity:1;z-index:5000}.mx_ContextualMenu{border-radius:8px;-webkit-box-shadow:4px 4px 12px 0 rgba(118,131,156,.6);box-shadow:4px 4px 12px 0 rgba(118,131,156,.6);background-color:#fff;color:#2e2f32;position:absolute;font-size:1.4rem;z-index:5001}.mx_ContextualMenu_right{right:0}.mx_ContextualMenu.mx_ContextualMenu_withChevron_right{right:8px}.mx_ContextualMenu_chevron_right{position:absolute;right:-8px;top:0;width:0;height:0;border-top:8px solid transparent;border-left:8px solid #fff;border-bottom:8px solid transparent}.mx_ContextualMenu_left{left:0}.mx_ContextualMenu.mx_ContextualMenu_withChevron_left{left:8px}.mx_ContextualMenu_chevron_left{position:absolute;left:-8px;top:0;width:0;height:0;border-top:8px solid transparent;border-right:8px solid #fff;border-bottom:8px solid transparent}.mx_ContextualMenu_top{top:0}.mx_ContextualMenu.mx_ContextualMenu_withChevron_top{top:8px}.mx_ContextualMenu_chevron_top{position:absolute;left:0;top:-8px;width:0;height:0;border-left:8px solid transparent;border-bottom:8px solid #fff;border-right:8px solid transparent}.mx_ContextualMenu_bottom{bottom:0}.mx_ContextualMenu.mx_ContextualMenu_withChevron_bottom{bottom:8px}.mx_ContextualMenu_chevron_bottom{position:absolute;left:0;bottom:-8px;width:0;height:0;border-left:8px solid transparent;border-top:8px solid #fff;border-right:8px solid transparent}.mx_ContextualMenu_spinner{display:block;margin:0 auto}.mx_CreateRoom{width:960px;margin-left:auto;margin-right:auto;color:#2e2f32}.mx_CreateRoom input,.mx_CreateRoom textarea{border-radius:3px;border:1px solid #c7c7c7;font-weight:300;font-size:1.3rem;padding:9px;margin-top:6px}.mx_CreateRoom_description{width:330px}.mx_CustomRoomTagPanel{background-color:hsla(0,0%,91%,.77);max-height:40vh}.mx_CustomRoomTagPanel_scroller{max-height:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CustomRoomTagPanel .mx_AccessibleButton{margin:0 auto;width:40px;padding:10px 0 9px;position:relative}.mx_CustomRoomTagPanel .mx_BaseAvatar_image{-webkit-box-sizing:border-box;box-sizing:border-box;width:40px;height:40px}.mx_CustomRoomTagPanel .mx_AccessibleButton.CustomRoomTagPanel_tileSelected:before{content:"";height:56px;background-color:#238cf5;width:5px;position:absolute;left:-9px;border-radius:0 3px 3px 0;top:5px}.mx_FilePanel{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow-y:auto;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_FilePanel .mx_RoomView_messageListWrapper{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_FilePanel .mx_RoomView_MessageList{width:100%}.mx_FilePanel .mx_EventTile_avatar,.mx_FilePanel .mx_RoomView_MessageList h2{display:none}.mx_FilePanel .mx_EventTile{word-break:break-word;margin-top:32px}.mx_FilePanel .mx_EventTile .mx_MImageBody{margin-right:0}.mx_FilePanel .mx_EventTile .mx_MFileBody{line-height:2.4rem}.mx_FilePanel .mx_EventTile .mx_MFileBody_download{padding-top:8px;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.4rem;color:#acacac}.mx_FilePanel .mx_EventTile .mx_MFileBody_downloadLink{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;color:#747474}.mx_FilePanel .mx_EventTile .mx_MImageBody_size{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;font-size:1.4rem;text-align:right;white-space:nowrap}.mx_FilePanel .mx_EventTile_senderDetails{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:-2px}.mx_FilePanel .mx_EventTile_senderDetailsLink{text-decoration:none}.mx_FilePanel .mx_EventTile .mx_SenderProfile{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;line-height:normal;padding:0;font-size:1.4rem;opacity:1;color:#acacac}.mx_FilePanel .mx_EventTile .mx_MessageTimestamp{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;text-align:right;visibility:visible;position:static;font-size:1.4rem;opacity:1;color:#acacac}.mx_FilePanel .mx_EventTile_line{margin-right:0;padding-left:0}.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line{padding-left:0}.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line{background-color:#fff}.mx_FilePanel_empty:before{-webkit-mask-image:url(../../img/element-icons/room/files.5709c0c.svg);mask-image:url(../../img/element-icons/room/files.5709c0c.svg)}.mx_GenericErrorPage{width:100%;height:100%;background-color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_GenericErrorPage_box{display:inline;width:500px;min-height:125px;border:1px solid #f22;padding:10px 10px 20px;background-color:#fcc}.mx_GroupFilterPanel{-webkit-box-flex:1;-ms-flex:1;flex:1;background-color:hsla(0,0%,91%,.77);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;min-height:0}.mx_GroupFilterPanel_items_selected{cursor:pointer}.mx_GroupFilterPanel .mx_GroupFilterPanel_divider{height:0;width:90%;border:none;border-bottom:1px solid #8d99a5}.mx_GroupFilterPanel .mx_GroupFilterPanel_scroller{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;width:100%}.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-top:6px}.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer>div{margin:6px 0}.mx_GroupFilterPanel .mx_TagTile{position:relative}.mx_GroupFilterPanel .mx_TagTile .mx_BetaDot{position:absolute;right:-13px;top:-11px}.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_prototype{padding:3px}.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected_prototype{background-color:#fff;border-radius:6px}.mx_TagTile_selected_prototype .mx_TagTile_homeIcon:before{background-color:#2e2f32}.mx_TagTile:not(.mx_TagTile_selected_prototype) .mx_TagTile_homeIcon{background-color:rgba(92,100,112,.2);border-radius:48px}.mx_TagTile:not(.mx_TagTile_selected_prototype) .mx_TagTile_homeIcon:before{background-color:#5c6470}.mx_TagTile_homeIcon{width:32px;height:32px;position:relative}.mx_TagTile_homeIcon:before{-webkit-mask-image:url(../../img/element-icons/home.b706c0e.svg);mask-image:url(../../img/element-icons/home.b706c0e.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:21px;mask-size:21px;content:"";display:inline-block;width:32px;height:32px;position:absolute;top:calc(50% - 16px);left:calc(50% - 16px)}.mx_GroupFilterPanel .mx_TagTile_plus{margin-bottom:12px;height:32px;width:32px;border-radius:20px;background-color:rgba(92,100,112,.2);position:relative;display:block!important}.mx_GroupFilterPanel .mx_TagTile_plus:before{background-color:#5c6470;-webkit-mask-image:url(../../img/feather-customised/plus.38ae979.svg);mask-image:url(../../img/feather-customised/plus.38ae979.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;content:"";position:absolute;top:0;bottom:0;left:0;right:0}.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected:before{content:"";height:100%;background-color:#0dbd8b;width:4px;position:absolute;left:-12px;border-radius:0 3px 3px 0}.mx_GroupFilterPanel .mx_TagTile.mx_AccessibleButton:focus{-webkit-filter:none;filter:none}.mx_TagTile_tooltip{position:relative;top:-30px;left:5px}.mx_TagTile_context_button{min-width:15px;height:15px;position:absolute;right:-5px;top:-8px;border-radius:8px;background-color:#dbdbdb;color:#000;font-weight:600;font-size:1rem;text-align:center;padding-top:1px;padding-left:4px;padding-right:4px}.mx_TagTile_avatar{position:relative}.mx_TagTile_badge{position:absolute;right:-4px;top:-2px;border-radius:8px;color:#fff;font-weight:600;font-size:1.4rem;padding:0 5px;background-color:#61708b}.mx_TagTile_badgeHighlight{background-color:#ff4b55}.mx_GroupView{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden}.mx_GroupView_error{margin:auto}.mx_GroupView_header{min-height:52px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;padding-bottom:10px;padding-left:19px}.mx_GroupView_header_view{border-bottom:1px solid transparent;padding-bottom:0;padding-right:8px}.mx_GroupView_header_avatar,.mx_GroupView_header_info{display:table-cell;vertical-align:middle}.mx_GroupHeader_button{position:relative;margin-left:5px;margin-right:5px;cursor:pointer;height:20px;width:20px}.mx_GroupHeader_button:before{content:"";position:absolute;height:20px;width:20px;background-color:#91a1c0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_GroupHeader_editButton:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_GroupHeader_shareButton:before{-webkit-mask-image:url(../../img/element-icons/room/share.54dc3fb.svg);mask-image:url(../../img/element-icons/room/share.54dc3fb.svg)}.mx_GroupView_hostingSignup img{margin-left:5px}.mx_GroupView_editable{border-bottom:1px solid #c7c7c7!important;min-width:150px;cursor:text}.mx_GroupView_editable:focus{border-bottom:1px solid #0dbd8b!important;outline:none;-webkit-box-shadow:none;box-shadow:none}.mx_GroupView_header_isUserMember .mx_GroupView_header_name:hover div:not(.mx_GroupView_editable){color:#0dbd8b;cursor:pointer}.mx_GroupView_avatarPicker{position:relative}.mx_GroupView_avatarPicker_edit{position:absolute;top:50px;left:15px}.mx_GroupView_avatarPicker .mx_Spinner{width:48px;height:48px!important}.mx_GroupView_header_leftCol{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden}.mx_GroupView_header_rightCol{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_GroupView_textButton{display:inline-block}.mx_GroupView_header_groupid{font-weight:400;font-size:medium;padding-left:10px}.mx_GroupView_header_name{vertical-align:middle;width:100%;height:31px;color:#2e2f32;font-weight:700;font-size:2.2rem;padding-right:16px}.mx_GroupView_header_name,.mx_GroupView_header_shortDesc{overflow:hidden;padding-left:19px;text-overflow:ellipsis;border-bottom:1px solid transparent}.mx_GroupView_header_shortDesc{vertical-align:bottom;float:left;max-height:42px;color:#a2a2a2;font-weight:300;font-size:1.3rem;margin-right:16px}.mx_GroupView_avatarPicker_label{cursor:pointer}.mx_GroupView_cancelButton{padding-left:8px}.mx_GroupView_cancelButton img{position:relative;top:5px}.mx_GroupView input[type=radio]{margin:10px 10px 0}.mx_GroupView_label_text{display:inline-block;max-width:80%;vertical-align:.1em;line-height:2em}.mx_GroupView_body{margin:0 24px}.mx_GroupView_body,.mx_GroupView_rooms{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_GroupView_rooms{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_GroupView h3{text-transform:uppercase;color:#3d3b39;font-weight:600;font-size:1.3rem;margin-bottom:10px}.mx_GroupView_rooms_header .mx_AccessibleButton{padding-left:14px;margin-bottom:14px;height:24px}.mx_GroupView_group{border-top:1px solid transparent}.mx_GroupView_group_disabled{opacity:.3;pointer-events:none}.mx_GroupView_rooms_header_addRow_button{display:inline-block}.mx_GroupView_rooms_header_addRow_button object{pointer-events:none}.mx_GroupView_rooms_header_addRow_label{display:inline-block;vertical-align:top;line-height:2.4rem;padding-left:28px;color:#0dbd8b}.mx_GroupView_rooms .mx_RoomDetailList{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;border-top:1px solid transparent;padding-top:10px;word-break:break-word}.mx_GroupView .mx_RoomView_messageListWrapper{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_GroupView_membershipSection{color:#888;margin-top:10px}.mx_GroupView_membershipSubSection{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;display:-webkit-box;display:-ms-flexbox;display:flex;padding-bottom:8px}.mx_GroupView_membershipSubSection .mx_Spinner{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_GroupView_membershipSection_description{line-height:3.4rem}.mx_GroupView_membershipSection_description .mx_BaseAvatar{margin-right:10px}.mx_GroupView_membershipSection .mx_GroupView_textButton{margin-right:0;margin-top:0;margin-left:8px}.mx_GroupView_memberSettings_toggle label{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_GroupView_memberSettings input{margin-right:6px}.mx_GroupView_featuredThings{margin-top:20px}.mx_GroupView_featuredThings_header{font-weight:700;font-size:120%;margin-bottom:20px}.mx_GroupView_featuredThings_category{font-weight:700;font-size:110%;margin-top:10px}.mx_GroupView_featuredThings_container{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_GroupView_featuredThing,.mx_GroupView_featuredThings_addButton{display:table-cell;text-align:center;width:100px;margin:0 20px}.mx_GroupView_featuredThing{position:relative}.mx_GroupView_featuredThing .mx_GroupView_featuredThing_deleteButton{position:absolute;top:-7px;right:11px;opacity:.4}.mx_GroupView_featuredThing .mx_BaseAvatar{vertical-align:baseline;vertical-align:initial}.mx_GroupView_featuredThings_addButton object{pointer-events:none}.mx_GroupView_featuredThing_name{word-wrap:break-word}.mx_GroupView_uploadInput{display:none}.mx_GroupView_body .mx_AutoHideScrollbar>*{margin:11px 50px 50px 68px}.mx_GroupView_groupDesc textarea{width:100%;max-width:100%;height:150px}.mx_GroupView_changeDelayWarning,.mx_GroupView_groupDesc_placeholder{background-color:#f7f7f7;color:#888;border-radius:10px;text-align:center;margin:20px 0}.mx_GroupView_groupDesc_placeholder{padding:100px 20px;cursor:pointer}.mx_GroupView_changeDelayWarning{padding:40px 20px}.mx_GroupView .mx_MemberInfo .mx_AutoHideScrollbar>:not(.mx_MemberInfo_avatar){padding-left:16px;padding-right:16px}.mx_HeaderButtons{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomHeader_buttons+.mx_HeaderButtons:before{content:unset}.mx_HeaderButtons:before{content:"";background-color:#91a1c0;opacity:.5;margin:6px 8px;border-radius:1px;width:1px}.mx_HomePage{max-width:960px;width:100%;height:100%;margin-left:auto;margin-right:auto}.mx_HomePage_default{text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_HomePage_default .mx_HomePage_default_wrapper{margin:auto}.mx_HomePage_default img{height:48px}.mx_HomePage_default h1{font-weight:600;font-size:3.2rem;line-height:4.4rem;margin-bottom:4px}.mx_HomePage_default h4{margin-top:4px;font-weight:600;font-size:1.8rem;line-height:2.5rem;color:#61708b}.mx_HomePage_default .mx_MiniAvatarUploader{margin:0 auto}.mx_HomePage_default .mx_HomePage_default_buttons{margin:60px auto 0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton{padding:73px 8px 15px;width:160px;height:132px;margin:20px;position:relative;display:inline-block;border-radius:8px;vertical-align:top;word-break:break-word;-webkit-box-sizing:border-box;box-sizing:border-box;font-weight:600;font-size:1.5rem;line-height:2rem;color:#fff;background-color:#0dbd8b}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton:before{top:20px;left:60px;width:40px;height:40px;content:"";position:absolute;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_sendDm:before{-webkit-mask-image:url(../../img/element-icons/feedback.a91241e.svg);mask-image:url(../../img/element-icons/feedback.a91241e.svg)}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_explore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg)}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_createGroup:before{-webkit-mask-image:url(../../img/element-icons/community-members.cbb31c1.svg);mask-image:url(../../img/element-icons/community-members.cbb31c1.svg)}.mx_LeftPanel{background-color:hsla(0,0%,96.1%,.9);min-width:206px;max-width:50%;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_LeftPanel .mx_LeftPanel_GroupFilterPanelContainer{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;-ms-flex-preferred-size:56px;flex-basis:56px;height:100%;-ms-flex-direction:column;flex-direction:column}.mx_LeftPanel .mx_LeftPanel_GroupFilterPanelContainer,.mx_LeftPanel .mx_LeftPanel_roomListContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal}.mx_LeftPanel .mx_LeftPanel_roomListContainer{background-color:hsla(0,0%,96.1%,.9);-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;min-width:0;-ms-flex-direction:column;flex-direction:column}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_userHeader{padding:12px;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer{overflow-y:hidden;overflow-x:scroll;margin:12px 12px 0;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_leftOverflow{-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(5%,#000));-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%);mask-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(5%,#000));mask-image:linear-gradient(90deg,transparent,#000 5%)}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_rightOverflow{-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(#000),color-stop(95%,#000),to(transparent));-webkit-mask-image:linear-gradient(90deg,#000,#000 95%,transparent);mask-image:-webkit-gradient(linear,left top,right top,from(#000),color-stop(95%,#000),to(transparent));mask-image:linear-gradient(90deg,#000,#000 95%,transparent)}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow{-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(5%,#000),color-stop(95%,#000),to(transparent));-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(5%,#000),color-stop(95%,#000),to(transparent));mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer{margin-left:12px;margin-right:12px;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch_focused+.mx_LeftPanel_exploreButton,.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch_hasQuery+.mx_LeftPanel_exploreButton{-ms-flex-preferred-size:0;flex-basis:0;margin:0;width:0}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch_focused+.mx_LeftPanel_exploreButton:before,.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch_hasQuery+.mx_LeftPanel_exploreButton:before{content:none}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton{width:32px;height:32px;border-radius:8px;background-color:rgba(141,151,165,.2);position:relative;margin-left:8px}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton:before{content:"";position:absolute;top:8px;left:8px;width:16px;height:16px;-webkit-mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#737d8c}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton.mx_LeftPanel_exploreButton_space:before{-webkit-mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg);mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg)}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListFilterCount{font-size:1.3rem;font-weight:600;margin-left:12px;margin-top:14px;margin-bottom:-4px}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper{overflow:hidden;margin-top:10px;-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper.mx_LeftPanel_roomListWrapper_stickyBottom{padding-bottom:32px}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper.mx_LeftPanel_roomListWrapper_stickyTop{padding-top:32px}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_actualRoomListContainer{position:relative;height:100%}.mx_LeftPanel.mx_LeftPanel_minimized{min-width:unset;width:unset!important}.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer{width:68px}.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer .mx_LeftPanel_userHeader{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton{margin-left:0;margin-top:8px;background-color:transparent}.mx_LeftPanelWidget{margin-left:8px;margin-bottom:4px}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:24px;color:#8d99a5;margin-top:4px}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_stickable{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_headerText{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:calc(100% - 16px);line-height:1.6rem;font-size:1.3rem;font-weight:600;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_headerText .mx_LeftPanelWidget_collapseBtn{display:inline-block;position:relative;width:14px;height:14px;margin-right:6px}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_headerText .mx_LeftPanelWidget_collapseBtn:before{content:"";width:18px;height:18px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#8d99a5;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_headerText .mx_LeftPanelWidget_collapseBtn.mx_LeftPanelWidget_collapseBtn_collapsed:before{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.mx_LeftPanelWidget .mx_LeftPanelWidget_resizeBox{position:relative;-ms-flex-direction:column;flex-direction:column;overflow:visible}.mx_LeftPanelWidget .mx_AppTileFullWidth,.mx_LeftPanelWidget .mx_LeftPanelWidget_resizeBox{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal}.mx_LeftPanelWidget .mx_AppTileFullWidth{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;overflow:hidden;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-mask-image:linear-gradient(0deg,transparent,#000 4px);mask-image:linear-gradient(0deg,transparent,#000 4px)}.mx_LeftPanelWidget .mx_LeftPanelWidget_resizerHandle{cursor:ns-resize;border-radius:3px;width:unset!important;height:4px!important;position:absolute;top:-24px!important;left:calc(50% - 32px)!important;right:calc(50% - 32px)!important}.mx_LeftPanelWidget:hover .mx_LeftPanelWidget_resizerHandle{opacity:.8;background-color:#2e2f32}.mx_LeftPanelWidget .mx_LeftPanelWidget_maximizeButton{margin-left:8px;margin-right:7px;position:relative;width:24px;height:24px;border-radius:32px}.mx_LeftPanelWidget .mx_LeftPanelWidget_maximizeButton:before{content:"";width:16px;height:16px;position:absolute;top:4px;left:4px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/feather-customised/maximise.dc32127.svg);mask-image:url(../../img/feather-customised/maximise.dc32127.svg);background:#61708b}.mx_LeftPanelWidget_maximizeButtonTooltip{margin-top:-3px}.mx_MainSplit{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;min-width:0;min-height:0;height:100%}.mx_MainSplit>.mx_RightPanel_ResizeWrapper{padding:5px;margin-left:8px;height:calc(100vh - 51px)}.mx_MainSplit>.mx_RightPanel_ResizeWrapper:hover .mx_RightPanel_ResizeHandle{top:50%!important;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:64px!important;width:4px!important;border-radius:4px!important;background-color:#2e2f32;opacity:.8}.mx_MatrixChat_splash{position:relative;height:100%}.mx_MatrixChat_splashButtons{text-align:center;width:100%;position:absolute;bottom:30px}.mx_MatrixChat_wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%}.mx_MatrixToolbar{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;height:40px}.mx_MatrixChat{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-box-flex:1;-ms-flex:1;flex:1;min-height:0}.mx_MatrixChat_syncError{color:#fff;background-color:#df2a8b;border-radius:5px;display:table;padding:30px;position:absolute;top:100px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.mx_MatrixChat>:not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle){background-color:#fff;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0;height:100%}.mx_MatrixChat>.mx_ResizeHandle_horizontal:hover{position:relative}.mx_MatrixChat>.mx_ResizeHandle_horizontal:hover:before{position:absolute;left:6px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:64px;width:4px;border-radius:4px;content:" ";background-color:#2e2f32;opacity:.8}.mx_MyGroups{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_MyGroups .mx_BetaCard{margin:0 72px;max-width:760px}.mx_MyGroups .mx_RoomHeader_simpleHeader{margin-left:0}.mx_MyGroups_header{margin-left:2px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mx_MyGroups>:not(.mx_RoomHeader):not(.mx_BetaCard){max-width:960px;margin:40px}.mx_MyGroups_headerCard{-webkit-box-flex:1;-ms-flex:1 0 50%;flex:1 0 50%;margin-bottom:30px;min-width:400px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-right:13px;height:40px;width:40px;border-radius:20px;background-color:rgba(92,100,112,.2);position:relative}.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button:before{background-color:#5c6470;-webkit-mask:url(../../img/icons-create-room.817ede2.svg);mask:url(../../img/icons-create-room.817ede2.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:80%;mask-size:80%;content:"";position:absolute;top:0;bottom:0;left:0;right:0}.mx_MyGroups_headerCard_header{font-weight:700;margin-bottom:10px}.mx_MyGroups_headerCard_content{padding-right:15px}.mx_MyGroups_joinBox{visibility:hidden;height:0;margin:0}.mx_MyGroups_content{margin-left:2px;-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow-y:auto}.mx_MyGroups_scrollable{overflow-y:inherit}.mx_MyGroups_placeholder{background-color:#f7f7f7;color:#888;line-height:40rem;border-radius:10px;text-align:center}.mx_MyGroups_joinedGroups{border-top:1px solid transparent;overflow-x:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-line-pack:start;align-content:flex-start}.mx_MyGroups_joinedGroups .mx_GroupTile{min-width:300px;max-width:33%;-webkit-box-flex:1;-ms-flex:1 0 300px;flex:1 0 300px;height:75px;margin:10px 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;cursor:pointer}.mx_GroupTile_avatar{cursor:-webkit-grab,-webkit-grab;cursor:grab,-webkit-grab}.mx_GroupTile_profile{margin-left:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_GroupTile_profile .mx_GroupTile_desc,.mx_GroupTile_profile .mx_GroupTile_groupId,.mx_GroupTile_profile .mx_GroupTile_name{padding-right:10px}.mx_GroupTile_profile .mx_GroupTile_name{margin:0;font-size:1.5rem}.mx_GroupTile_profile .mx_GroupTile_groupId{font-size:1.3rem;opacity:.7}.mx_GroupTile_profile .mx_GroupTile_desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:1.3rem;max-height:36px;overflow:hidden}.mx_NonUrgentToastContainer{position:absolute;bottom:30px;left:28px;z-index:101}.mx_NonUrgentToastContainer .mx_NonUrgentToastContainer_toast{padding:10px 12px;border-radius:8px;width:320px;font-size:1.3rem;margin-top:8px;background-color:#17191c;color:#fff}.mx_NotificationPanel{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow-y:auto;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_NotificationPanel .mx_RoomView_messageListWrapper{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_NotificationPanel .mx_RoomView_MessageList{width:100%}.mx_NotificationPanel .mx_RoomView_MessageList h2{margin-left:0}.mx_NotificationPanel .mx_EventTile{word-break:break-word;position:relative;padding-bottom:18px}.mx_NotificationPanel .mx_EventTile:not(.mx_EventTile_last):not(.mx_EventTile_lastInSection):after{position:absolute;bottom:0;left:0;right:0;background-color:#8d99a5;height:1px;opacity:.4;content:""}.mx_NotificationPanel .mx_EventTile_roomName{font-weight:700;font-size:1.4rem}.mx_NotificationPanel .mx_EventTile_roomName>*{vertical-align:middle}.mx_NotificationPanel .mx_EventTile_roomName>.mx_BaseAvatar{margin-right:8px}.mx_NotificationPanel .mx_EventTile_roomName a{color:#2e2f32}.mx_NotificationPanel .mx_EventTile_avatar{display:none}.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp,.mx_NotificationPanel .mx_EventTile .mx_SenderProfile{color:#2e2f32;font-size:1.2rem;display:inline;padding-left:0}.mx_NotificationPanel .mx_EventTile_senderDetails{padding-left:36px;position:relative}.mx_NotificationPanel .mx_EventTile_senderDetails a{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_NotificationPanel .mx_EventTile_roomName a,.mx_NotificationPanel .mx_EventTile_senderDetails a{text-decoration:none!important}.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp{visibility:visible;position:static;display:inline}.mx_NotificationPanel .mx_EventTile_line{margin-right:0;padding:0 0 0 36px}.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line{padding-left:0}.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line{background-color:#fff}.mx_NotificationPanel .mx_EventTile_content{margin-right:0}.mx_NotificationPanel_empty:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_RightPanel{overflow-x:hidden;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-radius:8px;padding:4px 0;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%}.mx_RightPanel .mx_RoomView_MessageList{padding:14px 18px}.mx_RightPanel_header{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;border-bottom:1px solid transparent;-webkit-box-flex:0;-ms-flex:0 0 52px;flex:0 0 52px}.mx_RightPanel_headerButtonGroup{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;background-color:#fff;padding:0 9px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RightPanel_headerButton{cursor:pointer;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-left:1px;margin-right:1px;height:32px;width:32px;position:relative;border-radius:100%}.mx_RightPanel_headerButton:before{content:"";position:absolute;top:4px;left:4px;height:24px;width:24px;background-color:#c1c6cd;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_RightPanel_headerButton:hover{background:rgba(13,189,139,.1)}.mx_RightPanel_headerButton:hover:before{background-color:#0dbd8b}.mx_RightPanel_notifsButton:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg);-webkit-mask-position:center;mask-position:center}.mx_RightPanel_roomSummaryButton:before{-webkit-mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);-webkit-mask-position:center;mask-position:center}.mx_RightPanel_groupMembersButton:before{-webkit-mask-image:url(../../img/element-icons/community-members.cbb31c1.svg);mask-image:url(../../img/element-icons/community-members.cbb31c1.svg);-webkit-mask-position:center;mask-position:center}.mx_RightPanel_roomsButton:before{-webkit-mask-image:url(../../img/element-icons/community-rooms.8f0b6c9.svg);mask-image:url(../../img/element-icons/community-rooms.8f0b6c9.svg);-webkit-mask-position:center;mask-position:center}.mx_RightPanel_headerButton_highlight:before{background-color:#0dbd8b!important}.mx_RightPanel_headerButton_badge{font-size:.8rem;border-radius:8px;color:#fff;background-color:#0dbd8b;font-weight:700;position:absolute;top:-4px;left:20px;padding:2px 4px}.mx_RightPanel_collapsebutton{-webkit-box-flex:1;-ms-flex:1;flex:1;text-align:right;height:16px;border:none}.mx_RightPanel .mx_GroupRoomList,.mx_RightPanel .mx_MemberInfo,.mx_RightPanel .mx_MemberList,.mx_RightPanel_blank{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_RightPanel .mx_RoomView_messagePanelSpinner{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;margin:auto}.mx_RightPanel_empty{margin-right:-28px}.mx_RightPanel_empty h2{font-weight:700;margin:16px 0}.mx_RightPanel_empty h2,.mx_RightPanel_empty p{font-size:1.4rem}.mx_RightPanel_empty:before{content:"";display:block;margin:11px auto 29px;height:42px;width:42px;background-color:#91a1c0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}.mx_RightPanel_scopeHeader{margin:24px;text-align:center;font-weight:600;font-size:1.8rem;line-height:2.2rem}.mx_RightPanel_scopeHeader .mx_BaseAvatar{margin-right:8px;vertical-align:middle}.mx_RightPanel_scopeHeader .mx_BaseAvatar_image{border-radius:8px}.mx_RoomDirectory_dialogWrapper>.mx_Dialog{max-width:960px;height:100%}.mx_RoomDirectory_dialog{height:100%;flex-direction:column}.mx_RoomDirectory,.mx_RoomDirectory_dialog{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column}.mx_RoomDirectory{margin-bottom:12px;color:#2e2f32;word-break:break-word}.mx_RoomDirectory,.mx_RoomDirectory_list{flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_RoomDirectory_list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column}.mx_RoomDirectory_list .mx_RoomView_messageListWrapper{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_RoomDirectory_listheader{display:block;margin-top:13px}.mx_RoomDirectory_searchbox{-webkit-box-flex:1!important;-ms-flex:1!important;flex:1!important}.mx_RoomDirectory_listheader .mx_NetworkDropdown{-webkit-box-flex:0;-ms-flex:0 0 200px;flex:0 0 200px}.mx_RoomDirectory_tableWrapper{overflow-y:auto;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_RoomDirectory_table{color:#2e2f32;display:grid;font-size:1.2rem;grid-template-columns:-webkit-max-content auto -webkit-max-content -webkit-max-content -webkit-max-content;grid-template-columns:max-content auto max-content max-content max-content;grid-row-gap:24px;row-gap:24px;text-align:left;width:100%}.mx_RoomDirectory_roomAvatar{padding:2px 14px 0 0}.mx_RoomDirectory_roomMemberCount{-ms-flex-item-align:center;align-self:center;color:#747474;padding:3px 10px 0}.mx_RoomDirectory_roomMemberCount:before{background-color:#747474;display:inline-block;vertical-align:text-top;margin-right:2px;content:"";-webkit-mask:url(../../img/feather-customised/user.7a4d23d.svg);mask:url(../../img/feather-customised/user.7a4d23d.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:80%;mask-size:80%;width:16px;height:16px}.mx_RoomDirectory_join,.mx_RoomDirectory_preview{-ms-flex-item-align:center;align-self:center;white-space:nowrap}.mx_RoomDirectory_name{display:inline-block;font-size:1.8rem;font-weight:600}.mx_RoomDirectory_perms{display:inline-block}.mx_RoomDirectory_perm{border-radius:10px;display:inline-block;height:20px;line-height:2rem;padding:0 5px;color:#fff;background-color:#aaa}.mx_RoomDirectory_topic{cursor:auto;color:#747474;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}.mx_RoomDirectory_alias{font-size:1.2rem;color:#a2a2a2}.mx_RoomDirectory_table tr{padding-bottom:10px;cursor:pointer}.mx_RoomDirectory .mx_RoomView_MessageList{padding:0}.mx_RoomDirectory>span{font-size:1.5rem;margin-top:0}.mx_RoomDirectory>span .mx_AccessibleButton{padding:0}.mx_RoomSearch{-webkit-box-flex:1;-ms-flex:1;flex:1;border-radius:8px;background-color:rgba(141,151,165,.2);border:1px solid transparent;height:28px;padding:1px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomSearch .mx_RoomSearch_icon{width:16px;height:16px;-webkit-mask:url(../../img/element-icons/roomlist/search.3774248.svg);mask:url(../../img/element-icons/roomlist/search.3774248.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#737d8c;margin-left:7px}.mx_RoomSearch .mx_RoomSearch_input{border:none!important;-webkit-box-flex:1!important;-ms-flex:1!important;flex:1!important;color:#2e2f32!important;padding:0;height:100%;width:100%;font-size:1.2rem;line-height:1.6rem}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-webkit-input-placeholder{color:#8d99a5!important}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-moz-placeholder{color:#8d99a5!important}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded):-ms-input-placeholder{color:#8d99a5!important}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-ms-input-placeholder{color:#8d99a5!important}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::placeholder{color:#8d99a5!important}.mx_RoomSearch.mx_RoomSearch_hasQuery{border-color:#737d8c}.mx_RoomSearch.mx_RoomSearch_focused{-webkit-box-shadow:0 0 4px 4px rgba(0,132,255,.5);box-shadow:0 0 4px 4px rgba(0,132,255,.5);border-color:transparent}.mx_RoomSearch.mx_RoomSearch_focused,.mx_RoomSearch.mx_RoomSearch_hasQuery{background-color:#fff}.mx_RoomSearch.mx_RoomSearch_focused .mx_RoomSearch_clearButton,.mx_RoomSearch.mx_RoomSearch_hasQuery .mx_RoomSearch_clearButton{width:16px;height:16px;-webkit-mask-image:url(../../img/element-icons/roomlist/search-clear.6164d97.svg);mask-image:url(../../img/element-icons/roomlist/search-clear.6164d97.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#737d8c;margin-right:8px}.mx_RoomSearch .mx_RoomSearch_clearButton{width:0;height:0}.mx_RoomSearch.mx_RoomSearch_minimized{border-radius:32px;height:auto;width:auto;padding:8px}.mx_RoomSearch.mx_RoomSearch_minimized .mx_RoomSearch_icon{margin-left:0}.mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages){margin-left:65px;min-height:50px}.mx_RoomStatusBar_typingIndicatorAvatars{width:52px;margin-top:-1px;text-align:left}.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_image{margin-right:-12px;border:1px solid #fff}.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_initial{padding-left:1px;padding-top:1px}.mx_RoomStatusBar_typingIndicatorRemaining{display:inline-block;color:#acacac;background-color:#ddd;border:1px solid #fff;border-radius:40px;width:24px;height:24px;line-height:2.4rem;font-size:.8em;vertical-align:top;text-align:center;position:absolute}.mx_RoomStatusBar_scrollDownIndicator{cursor:pointer;padding-left:1px}.mx_RoomStatusBar_unreadMessagesBar{padding-top:10px;color:#ff4b55;cursor:pointer}.mx_RoomStatusBar_connectionLostBar{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:19px;min-height:58px}.mx_RoomStatusBar_unsentMessages>div[role=alert]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:70px;margin:12px;padding-left:16px;background-color:#f3f8fd;border-radius:4px}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge{margin-right:12px}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge .mx_NotificationBadge{width:24px!important;height:24px!important;border-radius:24px!important}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge .mx_NotificationBadge .mx_NotificationBadge_count{font-size:1.6rem!important}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentTitle{color:#ff4b55;font-size:1.5rem}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentDescription{font-size:1.2rem}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;text-align:right;margin-right:22px;color:#61708b}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton{padding:5px 10px 5px 28px;display:inline-block;position:relative}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton:nth-child(2){border-left:1px solid #e3e8f0}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton:before{content:"";position:absolute;left:10px;background-color:#61708b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton.mx_RoomStatusBar_unsentCancelAllBtn:before{-webkit-mask-image:url(../../img/element-icons/trashcan.26f6c28.svg);mask-image:url(../../img/element-icons/trashcan.26f6c28.svg);width:12px;height:16px;top:calc(50% - 8px)}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton.mx_RoomStatusBar_unsentResendAllBtn{padding-left:34px}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton.mx_RoomStatusBar_unsentResendAllBtn:before{-webkit-mask-image:url(../../img/element-icons/retry.6cd23ad.svg);mask-image:url(../../img/element-icons/retry.6cd23ad.svg);width:18px;height:18px;top:calc(50% - 9px)}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_InlineSpinner{vertical-align:middle;margin-right:5px;top:1px}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_InlineSpinner+span{margin-right:10px}.mx_RoomStatusBar_connectionLostBar img{padding-left:10px;padding-right:10px;vertical-align:middle;float:left}.mx_RoomStatusBar_connectionLostBar_title{color:#ff4b55}.mx_RoomStatusBar_connectionLostBar_desc{color:#2e2f32;font-size:1.3rem;opacity:.5;padding-bottom:20px}.mx_RoomStatusBar_resend_link{color:#2e2f32!important;text-decoration:underline!important;cursor:pointer}.mx_RoomStatusBar_typingBar{height:50px;line-height:5rem;color:#2e2f32;opacity:.5;overflow-y:hidden;display:block}.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages){min-height:40px}.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_indicator{margin-top:10px}.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_typingBar{height:40px;line-height:4rem}.mx_RoomView{word-wrap:break-word;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@-webkit-keyframes mx_RoomView_fileDropTarget_animation{0%{opacity:0}to{opacity:.95}}@keyframes mx_RoomView_fileDropTarget_animation{0%{opacity:0}to{opacity:.95}}.mx_RoomView_fileDropTarget{min-width:0;width:100%;height:100%;font-size:1.8rem;text-align:center;pointer-events:none;background-color:#fff;opacity:.95;position:absolute;z-index:3000;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-animation:mx_RoomView_fileDropTarget_animation;animation:mx_RoomView_fileDropTarget_animation;-webkit-animation-duration:.5s;animation-duration:.5s}@-webkit-keyframes mx_RoomView_fileDropTarget_image_animation{0%{width:0}to{width:32px}}@keyframes mx_RoomView_fileDropTarget_image_animation{0%{width:0}to{width:32px}}.mx_RoomView_fileDropTarget_image{-webkit-animation:mx_RoomView_fileDropTarget_image_animation;animation:mx_RoomView_fileDropTarget_image_animation;-webkit-animation-duration:.5s;animation-duration:.5s;margin-bottom:16px}.mx_RoomView_auxPanel{min-width:0;width:100%;margin:0 auto;overflow:auto;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_RoomView_auxPanel_fullHeight{position:absolute;top:0;bottom:0;left:0;right:0;z-index:3000;background-color:#fff}.mx_RoomView_auxPanel_hiddenHighlights{border-bottom:1px solid transparent;padding:10px 26px;color:#ff4b55;cursor:pointer}.mx_RoomView_auxPanel_apps{max-width:1920px!important}.mx_RoomView .mx_MainSplit,.mx_RoomView_messagePanel{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_RoomView_messagePanel{width:100%;overflow-y:auto;overflow-anchor:none}.mx_RoomView_messagePanelSearchSpinner{-webkit-box-flex:1;-ms-flex:1;flex:1;background-image:url(../../img/typing-indicator-2x.0eb9f0e.gif);background-position:center 367px;background-size:25px;background-repeat:no-repeat;position:relative}.mx_RoomView_messagePanelSearchSpinner:before{background-color:#888;-webkit-mask:url(../../img/feather-customised/search-input.044bfa7.svg);mask:url(../../img/feather-customised/search-input.044bfa7.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:50px;mask-size:50px;content:"";position:absolute;top:286px;left:0;right:0;height:50px}.mx_RoomView_body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.mx_RoomView_body .mx_RoomView_messagePanel,.mx_RoomView_body .mx_RoomView_messagePanelSearchSpinner,.mx_RoomView_body .mx_RoomView_messagePanelSpinner{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.mx_RoomView_body .mx_RoomView_timeline{position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_RoomView_statusArea{width:100%;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;max-height:0;background-color:#fff;z-index:1000;overflow:hidden;-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.mx_RoomView_statusArea_expanded{max-height:100px}.mx_RoomView_statusAreaBox{margin:auto;min-height:50px}.mx_RoomView_statusAreaBox_line{margin-left:65px;border-top:1px solid transparent;height:1px}.mx_RoomView_messageListWrapper{min-height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_RoomView_searchResultsPanel a{text-decoration:none;color:inherit}.mx_RoomView_empty{font-size:1.3rem;padding:0 24px;margin-right:30px;text-align:center;margin-bottom:80px}.mx_RoomView_MessageList{list-style-type:none;padding:18px;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_RoomView_MessageList li{clear:both}li.mx_RoomView_myReadMarker_container{height:0;margin:0;padding:0;border:0}hr.mx_RoomView_myReadMarker{border-top:1px solid #0dbd8b;border-bottom:1px solid #0dbd8b;margin-top:0;position:relative;top:-1px;z-index:1;-webkit-transition:width easeinsine .4s 1s,opacity easeinsine .4s 1s;transition:width easeinsine .4s 1s,opacity easeinsine .4s 1s;width:99%;opacity:1}.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner{background-color:#fff}.mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename{color:#fff;opacity:1}.mx_RoomView_inCall .mx_RoomView_statusAreaBox_line{margin-top:2px;border:none;height:0}.mx_RoomView_inCall .mx_MessageComposer_wrapper{border-top:2px hidden;padding-top:1px}.mx_RoomView_voipChevron{position:absolute;bottom:-11px;right:11px}.mx_RoomView_voipButton{float:right;margin-right:13px;margin-top:13px;cursor:pointer}.mx_RoomView_voipButton object{pointer-events:none}.mx_RoomView .mx_MessageComposer{width:100%;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-right:2px}.mx_RoomView_ongoingConfCallNotification{width:100%;text-align:center;background-color:#ff4b55;color:#fff;font-weight:700;padding:6px 0;cursor:pointer}.mx_RoomView_ongoingConfCallNotification a{color:#fff!important}.mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList{margin-bottom:4px}.mx_MatrixChat_useCompactLayout .mx_RoomView_statusAreaBox{min-height:42px}.mx_ScrollPanel .mx_RoomView_MessageList{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_SearchBox{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0}.mx_SearchBox.mx_SearchBox_blurred:not(:hover){background-color:transparent}.mx_SearchBox .mx_SearchBox_closeButton{cursor:pointer;background-image:url(../../img/icons-close.11ff07c.svg);background-repeat:no-repeat;width:16px;height:16px;background-position:50%;padding:9px}.mx_SpacePanel{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;background-color:hsla(0,0%,91%,.77);padding:0;margin:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow-y:auto}.mx_SpacePanel .mx_SpacePanel_spaceTreeWrapper{-webkit-box-flex:1;-ms-flex:1;flex:1;padding:8px 8px 16px 0}.mx_SpacePanel .mx_SpacePanel_toggleCollapse{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:40px;height:40px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:32px;mask-size:32px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;margin-left:16px;margin-bottom:12px;background-color:#8d99a5;-webkit-mask-image:url(../../img/element-icons/expand-space-panel.e6f74b9.svg);mask-image:url(../../img/element-icons/expand-space-panel.e6f74b9.svg)}.mx_SpacePanel .mx_SpacePanel_toggleCollapse.expanded{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.mx_SpacePanel ul{margin:0;list-style:none;padding:0}.mx_SpacePanel ul>.mx_SpaceItem{padding-left:16px}.mx_SpacePanel .mx_SpaceButton_toggleCollapse{cursor:pointer}.mx_SpacePanel .mx_SpaceTreeLevel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-width:250px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_SpacePanel .mx_SpaceItem{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-flow:wrap;flex-flow:wrap}.mx_SpacePanel .mx_SpaceItem.mx_SpaceItem_narrow{-ms-flex-item-align:baseline;align-self:baseline}.mx_SpacePanel .mx_SpaceItem.collapsed>.mx_SpaceButton>.mx_SpaceButton_toggleCollapse{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.mx_SpacePanel .mx_SpaceItem.collapsed>.mx_SpaceTreeLevel{display:none}.mx_SpacePanel .mx_SpaceItem:not(.hasSubSpaces)>.mx_SpaceButton{margin-left:16px;min-width:40px}.mx_SpacePanel .mx_SpaceButton{border-radius:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:4px 4px 4px 0;width:100%}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper{background-color:#fff}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active.mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper{padding:1px;border:3px solid #737d8c}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_selectionWrapper{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:12px;padding:4px}.mx_SpacePanel .mx_SpaceButton:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper{width:100%;padding-right:16px;overflow:hidden}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_name{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-left:8px;white-space:nowrap;display:block;text-overflow:ellipsis;overflow:hidden;padding-right:8px;font-size:1.4rem;line-height:1.8rem}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_toggleCollapse{width:16px;height:20px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:20px;mask-size:20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#8d99a5;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon{width:32px;min-width:32px;height:32px;border-radius:8px;position:relative}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon:before{position:absolute;content:"";width:32px;height:32px;top:0;left:0;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:18px;mask-size:18px}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon{background-color:#fff}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon:before{background-color:#3f3d3d;-webkit-mask-image:url(../../img/element-icons/home.b706c0e.svg);mask-image:url(../../img/element-icons/home.b706c0e.svg)}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_new .mx_SpaceButton_icon{background-color:#0dbd8b;-webkit-transition:all .1s ease-in-out;transition:all .1s ease-in-out}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_new .mx_SpaceButton_icon:before{background-color:#fff;-webkit-mask-image:url(../../img/element-icons/plus.62cc275.svg);mask-image:url(../../img/element-icons/plus.62cc275.svg);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_newCancel .mx_SpaceButton_icon{background-color:#c1c6cd}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_newCancel .mx_SpaceButton_icon:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.mx_SpacePanel .mx_SpaceButton .mx_BaseAvatar_image{border-radius:8px}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton{width:20px;min-width:20px;height:20px;margin-top:auto;margin-bottom:auto;display:none;position:absolute;right:4px}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton:before{top:2px;left:2px;content:"";width:16px;height:16px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);background:#2e2f32}.mx_SpacePanel .mx_SpacePanel_badgeContainer{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge{margin:0 2px}.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge_dot{margin:0 7px}.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer{right:0;top:0}.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer .mx_NotificationBadge{background-clip:padding-box}.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer .mx_NotificationBadge_dot{margin:0 -1px 0 0;border:3px solid hsla(0,0%,91%,.77)}.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer .mx_NotificationBadge_2char,.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer .mx_NotificationBadge_3char{margin:-5px -5px 0 0;border:2px solid hsla(0,0%,91%,.77)}.mx_SpacePanel.collapsed .mx_SpaceButton.mx_SpaceButton_active .mx_SpacePanel_badgeContainer{right:-3px;top:-3px}.mx_SpacePanel:not(.collapsed) .mx_SpacePanel_badgeContainer{position:absolute;right:4px}.mx_SpacePanel:not(.collapsed) .mx_SpaceButton:focus-within:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpacePanel_badgeContainer,.mx_SpacePanel:not(.collapsed) .mx_SpaceButton:hover:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpacePanel_badgeContainer,.mx_SpacePanel:not(.collapsed) .mx_SpaceButton_hasMenuOpen:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpacePanel_badgeContainer{width:0;height:0;display:none}.mx_SpacePanel:not(.collapsed) .mx_SpaceButton:focus-within:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton,.mx_SpacePanel:not(.collapsed) .mx_SpaceButton:hover:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton,.mx_SpacePanel:not(.collapsed) .mx_SpaceButton_hasMenuOpen:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton{display:block}.mx_SpacePanel>.mx_AutoHideScrollbar>.mx_SpaceButton,.mx_SpacePanel>.mx_AutoHideScrollbar>.mx_SpaceButton.mx_SpaceButton_active:before{height:32px}.mx_SpacePanel>.mx_AutoHideScrollbar>ul{padding-left:0}.mx_SpacePanel_contextMenu .mx_SpacePanel_contextMenu_header{margin:12px 16px;font-weight:600;font-size:1.5rem;line-height:1.8rem}.mx_SpacePanel_contextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton{color:#0dbd8b}.mx_SpacePanel_contextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton .mx_SpacePanel_iconInvite:before{background-color:#0dbd8b;-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconSettings:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconLeave:before{-webkit-mask-image:url(../../img/element-icons/leave.bb917e7.svg);mask-image:url(../../img/element-icons/leave.bb917e7.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconMembers:before{-webkit-mask-image:url(../../img/element-icons/room/members.88c3e93.svg);mask-image:url(../../img/element-icons/room/members.88c3e93.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconPlus:before{-webkit-mask-image:url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);mask-image:url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconHash:before{-webkit-mask-image:url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);mask-image:url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconExplore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg);mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg)}.mx_SpacePanel_sharePublicSpace{margin:0}.mx_SpaceRoomDirectory_dialogWrapper>.mx_Dialog{max-width:960px;height:100%}.mx_SpaceRoomDirectory{height:100%;margin-bottom:12px;color:#2e2f32;word-break:break-word;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_SpaceRoomDirectory,.mx_SpaceRoomDirectory .mx_Dialog_title,.mx_SpaceRoomView_landing .mx_Dialog_title{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_SpaceRoomDirectory .mx_Dialog_title .mx_BaseAvatar,.mx_SpaceRoomView_landing .mx_Dialog_title .mx_BaseAvatar{margin-right:12px;-ms-flex-item-align:center;align-self:center}.mx_SpaceRoomDirectory .mx_Dialog_title .mx_BaseAvatar_image,.mx_SpaceRoomView_landing .mx_Dialog_title .mx_BaseAvatar_image{border-radius:8px}.mx_SpaceRoomDirectory .mx_Dialog_title>div>h1,.mx_SpaceRoomView_landing .mx_Dialog_title>div>h1{font-weight:600;font-size:1.8rem;line-height:2.2rem;margin:0}.mx_SpaceRoomDirectory .mx_Dialog_title>div>div,.mx_SpaceRoomView_landing .mx_Dialog_title>div>div{font-weight:400;color:#737d8c;font-size:1.5rem;line-height:2.4rem}.mx_SpaceRoomDirectory .mx_AccessibleButton_kind_link,.mx_SpaceRoomView_landing .mx_AccessibleButton_kind_link{padding:0}.mx_SpaceRoomDirectory .mx_SearchBox,.mx_SpaceRoomView_landing .mx_SearchBox{margin:24px 0 16px}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_noResults,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_noResults{text-align:center}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_noResults>div,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_noResults>div{font-size:1.5rem;line-height:2.4rem;color:#737d8c}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:32px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.5rem;line-height:2.4rem;color:#2e2f32}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton{padding:4px 12px;font-weight:400}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton+.mx_AccessibleButton,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton+.mx_AccessibleButton{margin-left:16px}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton_kind_danger_outline,.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton_kind_primary_outline,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton_kind_danger_outline,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton_kind_primary_outline{padding:3px 12px}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader>span,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader>span{margin-left:auto}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_error,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_error{position:relative;font-weight:600;color:#ff4b55;font-size:1.5rem;line-height:1.8rem;margin:20px auto 12px;padding-left:24px;width:-webkit-max-content;width:-moz-max-content;width:max-content}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_error:before,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_error:before{content:"";position:absolute;height:16px;width:16px;left:0;background-image:url(../../img/element-icons/warning-badge.de1033e.svg)}.mx_SpaceRoomDirectory_list{margin-top:16px;padding-bottom:40px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomCount>h3{display:inline;font-weight:600;font-size:1.8rem;line-height:2.2rem;color:#2e2f32}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomCount>span{margin-left:8px;font-size:1.5rem;line-height:2.4rem;color:#737d8c}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace .mx_BaseAvatar_image{border-radius:8px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle{position:absolute;left:-1px;top:10px;height:16px;width:16px;border-radius:4px;background-color:#fff}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle:before{content:"";position:absolute;top:0;left:0;height:16px;width:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#8d99a5;-webkit-mask-size:16px;mask-size:16px;-webkit-transform:rotate(270deg);transform:rotate(270deg);-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle.mx_SpaceRoomDirectory_subspace_toggle_shown:before{-webkit-transform:rotate(0deg);transform:rotate(0deg)}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_children{position:relative;padding-left:12px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile{position:relative;padding:8px 16px;border-radius:8px;min-height:56px;-webkit-box-sizing:border-box;box-sizing:border-box;display:grid;grid-template-columns:20px auto -webkit-max-content;grid-template-columns:20px auto max-content;grid-column-gap:8px;grid-row-gap:6px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_BaseAvatar{grid-row:1;grid-column:1}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_name{font-weight:600;font-size:1.5rem;line-height:1.8rem;grid-row:1;grid-column:2}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_name .mx_InfoTooltip{display:inline;margin-left:12px;color:#8d99a5;font-size:1.2rem;line-height:1.5rem}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_name .mx_InfoTooltip .mx_InfoTooltip_icon{margin-right:4px;position:relative;vertical-align:text-top}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_name .mx_InfoTooltip .mx_InfoTooltip_icon:before{position:absolute;top:0;left:0}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_info{font-size:1.4rem;line-height:1.8rem;color:#737d8c;grid-row:2;grid-column:1/3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions{text-align:right;margin-left:20px;grid-column:3;grid-row:1/3}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions .mx_AccessibleButton{line-height:2.4rem;padding:4px 16px;display:inline-block;visibility:hidden}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions .mx_AccessibleButton_kind_danger_outline,.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions .mx_AccessibleButton_kind_primary_outline{padding:3px 16px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions .mx_Checkbox{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;margin-left:12px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:hover{background-color:hsla(0,0%,91%,.77)}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:hover .mx_AccessibleButton{visibility:visible}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:before,.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_children:before{content:"";position:absolute;background-color:hsla(0,0%,91%,.77);width:1px;height:100%;left:6px;top:0}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_actions .mx_SpaceRoomDirectory_actionsText{font-weight:400;font-size:1.2rem;line-height:1.5rem;color:#737d8c}.mx_SpaceRoomDirectory_list>hr{border:none;height:1px;background-color:rgba(141,151,165,.2);margin:20px 0}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_createRoom{display:block;margin:16px auto 0;width:-webkit-max-content;width:-moz-max-content;width:max-content}.mx_SpaceRoomView .mx_MainSplit>div:first-child{padding:80px 60px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-height:100%;overflow-y:auto}.mx_SpaceRoomView .mx_MainSplit>div:first-child h1{margin:0;font-size:2.4rem;font-weight:600;color:#2e2f32;width:-webkit-max-content;width:-moz-max-content;width:max-content}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_description{font-size:1.5rem;color:#737d8c;margin-top:12px;margin-bottom:24px;max-width:428px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_AddExistingToSpace{max-width:428px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_AddExistingToSpace .mx_AddExistingToSpace_content{height:calc(100vh - 360px);max-height:400px}.mx_SpaceRoomView .mx_MainSplit>div:first-child:not(.mx_SpaceRoomView_landing) .mx_SpaceFeedbackPrompt{width:428px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_buttons{display:block;margin-top:44px;width:428px;text-align:right}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_buttons .mx_AccessibleButton_hasKind{padding:8px 22px;margin-left:16px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_buttons input.mx_AccessibleButton{border:none}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_Field{max-width:428px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_Field+.mx_Field{margin-top:28px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_errorText{font-weight:600;font-size:1.2rem;line-height:1.5rem;color:#ff4b55;margin-bottom:28px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_AccessibleButton_disabled{cursor:not-allowed}.mx_SpaceRoomView .mx_SpaceRoomView_preview{padding:32px 24px!important;margin:auto;max-width:480px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:2px 15px 30px rgba(0,0,0,.48);box-shadow:2px 15px 30px rgba(0,0,0,.48);border-radius:8px;position:relative}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_BetaCard_betaPill{position:absolute;right:24px;top:32px}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_spaceBetaPrompt{font-weight:600;font-size:1.4rem;line-height:2.4rem;color:#2e2f32;margin-top:24px;position:relative;padding-left:24px}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_spaceBetaPrompt .mx_AccessibleButton_kind_link{display:inline;padding:0;font-size:inherit;line-height:inherit}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_spaceBetaPrompt:before{content:"";position:absolute;height:2.4rem;width:20px;left:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);background-color:#737d8c}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:20px;font-size:1.5rem}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter>div{margin-left:8px}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter>div .mx_SpaceRoomView_preview_inviter_name{line-height:1.8rem}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter>div .mx_SpaceRoomView_preview_inviter_mxid{line-height:2.4rem;color:#737d8c}.mx_SpaceRoomView .mx_SpaceRoomView_preview>.mx_BaseAvatar>.mx_BaseAvatar_image,.mx_SpaceRoomView .mx_SpaceRoomView_preview>.mx_BaseAvatar_image{border-radius:12px}.mx_SpaceRoomView .mx_SpaceRoomView_preview h1.mx_SpaceRoomView_preview_name{margin:20px 0!important}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_topic{font-size:1.4rem;line-height:2.2rem;color:#737d8c;margin:20px 0;max-height:160px;overflow-y:auto}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_joinButtons{margin-top:20px}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_joinButtons .mx_AccessibleButton{width:200px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:14px 0}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_joinButtons .mx_AccessibleButton+.mx_AccessibleButton{margin-left:20px}.mx_SpaceRoomView .mx_SpaceRoomView_landing>.mx_BaseAvatar>.mx_BaseAvatar_image,.mx_SpaceRoomView .mx_SpaceRoomView_landing>.mx_BaseAvatar_image{border-radius:12px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name{margin:24px 0 16px;font-size:1.5rem;color:#737d8c}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name>span{display:inline-block}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name .mx_SpaceRoomView_landing_nameRow{margin-top:12px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name .mx_SpaceRoomView_landing_nameRow>h1{display:inline-block}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name .mx_SpaceRoomView_landing_inviter .mx_BaseAvatar{margin-right:4px;vertical-align:middle}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_info{display:inline-block;margin:0 auto 0 0}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_FacePile{display:inline-block;margin-right:12px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_FacePile .mx_FacePile_faces{cursor:pointer}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_landing_inviteButton{position:relative;padding:4px 18px 4px 40px;line-height:2.4rem;height:-webkit-min-content;height:-moz-min-content;height:min-content}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_landing_inviteButton:before{position:absolute;content:"";left:8px;height:16px;width:16px;background:#fff;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_landing_settingsButton{position:relative;margin-left:16px;width:24px;height:24px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_landing_settingsButton:before{position:absolute;content:"";left:0;top:0;height:24px;width:24px;background:#8d99a5;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_topic{font-size:1.5rem;margin-top:12px;margin-bottom:16px}.mx_SpaceRoomView .mx_SpaceRoomView_landing>hr{border:none;height:1px;background-color:hsla(0,0%,91%,.77)}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SearchBox{margin:0 0 20px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceFeedbackPrompt{margin-bottom:16px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceFeedbackPrompt+hr{display:none}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton{position:relative;padding:16px 32px 16px 72px;width:432px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;border:1px solid #e7e7e7;font-size:1.5rem;margin:20px 0}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton>h3{font-weight:600;margin:0 0 4px}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton>span{color:#737d8c}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton:before{position:absolute;content:"";width:32px;height:32px;top:24px;left:20px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px;mask-size:24px;background-color:#8d99a5}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton:hover{border-color:#0dbd8b}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton:hover:before{background-color:#0dbd8b}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton:hover>span{color:#2e2f32}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope .mx_SpaceRoomView_privateScope_justMeButton:before{-webkit-mask-image:url(../../img/element-icons/room/members.88c3e93.svg);mask-image:url(../../img/element-icons/room/members.88c3e93.svg)}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope .mx_SpaceRoomView_privateScope_meAndMyTeammatesButton:before{-webkit-mask-image:url(../../img/element-icons/community-members.cbb31c1.svg);mask-image:url(../../img/element-icons/community-members.cbb31c1.svg)}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_betaDisclaimer{padding:58px 16px 16px;position:relative;border-radius:8px;background-color:#f3f8fd;max-width:428px;margin:20px 0 30px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_betaDisclaimer .mx_BetaCard_betaPill{position:absolute;left:16px;top:16px}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons{color:#737d8c;margin-top:28px}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_AccessibleButton{position:relative;display:inline-block;padding-left:32px;line-height:24px}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_AccessibleButton:before{content:"";position:absolute;height:24px;width:24px;top:0;left:0;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_AccessibleButton+.mx_AccessibleButton{margin-left:32px}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_SpaceRoomView_inviteTeammates_inviteDialogButton:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_SpaceRoomView_info{color:#737d8c;font-size:1.5rem;line-height:2.4rem;margin:20px 0}.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private,.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public{padding-left:20px;position:relative}.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private:before,.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public:before{position:absolute;content:"";width:20px;height:20px;top:0;left:-2px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#8d99a5}.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public:before{-webkit-mask-size:12px;mask-size:12px;-webkit-mask-image:url(../../img/globe.8201f08.svg);mask-image:url(../../img/globe.8201f08.svg)}.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private:before{-webkit-mask-size:14px;mask-size:14px;-webkit-mask-image:url(../../img/element-icons/lock.1f264bd.svg);mask-image:url(../../img/element-icons/lock.1f264bd.svg)}.mx_SpaceRoomView_info .mx_AccessibleButton_kind_link{color:inherit;position:relative;padding-left:16px}.mx_SpaceRoomView_info .mx_AccessibleButton_kind_link:before{content:"·";position:absolute;left:6px}.mx_SpaceFeedbackPrompt{margin-top:18px;margin-bottom:12px}.mx_SpaceFeedbackPrompt>hr{border:none;border-top:1px solid #e7e7e7;margin-bottom:12px}.mx_SpaceFeedbackPrompt>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;font-size:1.5rem;line-height:2.4rem}.mx_SpaceFeedbackPrompt>div>span{color:#737d8c;position:relative;padding-left:32px;font-size:inherit;line-height:inherit;margin-right:auto}.mx_SpaceFeedbackPrompt>div>span:before{content:"";position:absolute;left:0;top:2px;height:20px;width:20px;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);-webkit-mask-position:center;mask-position:center}.mx_SpaceFeedbackPrompt>div .mx_AccessibleButton_kind_link{color:#0dbd8b;position:relative;padding:0 0 0 24px;margin-left:8px;font-size:inherit;line-height:inherit}.mx_SpaceFeedbackPrompt>div .mx_AccessibleButton_kind_link:before{content:"";position:absolute;left:0;height:16px;width:16px;background-color:#0dbd8b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);mask-image:url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);-webkit-mask-position:center;mask-position:center}.mx_TabbedView{padding:0 0 0 16px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:absolute;top:0;bottom:0;left:0;right:0;margin:8px 0 0}.mx_TabbedView_tabLabels{width:170px;max-width:170px;color:#45474a;position:fixed}.mx_TabbedView_tabLabel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:text-top;cursor:pointer;padding:8px 0;border-radius:8px;font-size:1.3rem;position:relative}.mx_TabbedView_tabLabel_active{background-color:#0dbd8b;color:#fff}.mx_TabbedView_maskedIcon{margin-left:8px;margin-right:16px;width:16px;height:16px;display:inline-block}.mx_TabbedView_maskedIcon:before{display:inline-block;background-color:#454545;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:16px;mask-size:16px;width:16px;height:16px;-webkit-mask-position:center;mask-position:center;content:""}.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon:before{background-color:#fff}.mx_TabbedView_tabLabel_text{vertical-align:middle}.mx_TabbedView_tabPanel{margin-left:240px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_TabbedView_tabPanel,.mx_TabbedView_tabPanelContent{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;min-height:0}.mx_TabbedView_tabPanelContent{overflow:auto}.mx_ToastContainer{position:absolute;top:0;left:70px;z-index:101;padding:4px;display:grid;grid-template-rows:1fr 14px 6px}.mx_ToastContainer.mx_ToastContainer_stacked:before{content:"";margin:0 4px;grid-row:2/4}.mx_ToastContainer .mx_Toast_toast,.mx_ToastContainer.mx_ToastContainer_stacked:before{grid-column:1;background-color:#f2f5f8;-webkit-box-shadow:0 4px 20px rgba(0,0,0,.5);box-shadow:0 4px 20px rgba(0,0,0,.5);border-radius:8px}.mx_ToastContainer .mx_Toast_toast{grid-row:1/3;color:#2e2f32;overflow:hidden;display:grid;grid-template-columns:22px 1fr;grid-column-gap:8px;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;grid-row-gap:4px;row-gap:4px;padding:8px}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon:after,.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon:before{content:"";width:22px;height:22px;grid-column:1;grid-row:1;-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-size:100%;background-repeat:no-repeat}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification:after{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);background-color:#2e2f32}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification_warning:before{background-color:#fff;-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);-webkit-mask-size:90%;mask-size:90%}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification_warning:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_secure_backup:after{-webkit-mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);background-color:#2e2f32}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_body,.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_title{grid-column:2}.mx_ToastContainer .mx_Toast_toast:not(.mx_Toast_hasIcon){padding-left:12px}.mx_ToastContainer .mx_Toast_toast:not(.mx_Toast_hasIcon) .mx_Toast_title{grid-column:1/-1}.mx_ToastContainer .mx_Toast_toast .mx_Toast_description,.mx_ToastContainer .mx_Toast_toast .mx_Toast_title{padding-right:8px}.mx_ToastContainer .mx_Toast_toast .mx_Toast_title{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_ToastContainer .mx_Toast_toast .mx_Toast_title h2{grid-column:1/3;grid-row:1;margin:0;font-size:1.5rem;font-weight:600;display:inline;width:auto;vertical-align:middle}.mx_ToastContainer .mx_Toast_toast .mx_Toast_title span{padding-left:8px;float:right;font-size:1.2rem;line-height:2.2rem;color:#61708b}.mx_ToastContainer .mx_Toast_toast .mx_Toast_body{grid-column:1/3;grid-row:2}.mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons{float:right;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons .mx_FormButton{min-width:96px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_ToastContainer .mx_Toast_toast .mx_Toast_description{max-width:272px;overflow:hidden;text-overflow:ellipsis;margin:4px 0 11px;font-size:1.2rem}.mx_ToastContainer .mx_Toast_toast .mx_Toast_description .mx_AccessibleButton_kind_link{font-size:inherit;padding:0}.mx_ToastContainer .mx_Toast_toast .mx_Toast_description a{text-decoration:none}.mx_ToastContainer .mx_Toast_toast .mx_Toast_detail{color:#737d8c}.mx_ToastContainer .mx_Toast_toast .mx_Toast_deviceID{font-size:1rem}.mx_UploadBar{padding-left:65px;position:relative}.mx_UploadBar .mx_ProgressBar{width:calc(100% - 40px)}.mx_UploadBar_filename{margin-top:5px;color:#61708b;position:relative;padding-left:22px;font-size:1.5rem;vertical-align:middle}.mx_UploadBar_filename:before{content:"";height:18px;width:18px;left:0;-webkit-mask-image:url(../../img/element-icons/upload.e2a53e0.svg);mask-image:url(../../img/element-icons/upload.e2a53e0.svg)}.mx_UploadBar_cancel,.mx_UploadBar_filename:before{position:absolute;top:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#61708b}.mx_UploadBar_cancel{right:0;height:16px;width:16px;margin-right:16px;-webkit-mask-image:url(../../img/icons-close.11ff07c.svg);mask-image:url(../../img/icons-close.11ff07c.svg)}.mx_UserMenu{padding-right:6px}.mx_UserMenu.mx_UserMenu_prototype{margin-bottom:6px;padding-right:0}.mx_UserMenu.mx_UserMenu_prototype .mx_UserMenu_headerButtons{margin-right:2px}.mx_UserMenu.mx_UserMenu_prototype:after{content:"";border-bottom:1px solid #2e2f32;opacity:.2;display:block;padding-top:8px}.mx_UserMenu .mx_UserMenu_headerButtons{width:16px;height:16px;position:relative;display:block}.mx_UserMenu .mx_UserMenu_headerButtons:before{content:"";width:16px;height:16px;position:absolute;top:0;left:0;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#8d99a5;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_UserMenu .mx_UserMenu_row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userAvatarContainer{position:relative;margin-right:8px;height:32px;padding:3px 0}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userAvatarContainer .mx_UserMenu_userAvatar{border-radius:32px;-o-object-fit:cover;object-fit:cover}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_subUserName,.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_userName{display:block}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_subUserName{color:#61708b;font-size:1.3rem;line-height:1.8rem;-webkit-box-flex:1;-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userName{font-weight:600;font-size:1.5rem;line-height:2rem;-webkit-box-flex:1;-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd{width:24px;height:24px;margin-right:8px;position:relative}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd:before{content:"";position:absolute;width:24px;height:24px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#61708b}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd.mx_UserMenu_dnd_noisy:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd.mx_UserMenu_dnd_muted:before{-webkit-mask-image:url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);mask-image:url(../../img/element-icons/roomlist/notifications-off.0c57561.svg)}.mx_UserMenu.mx_UserMenu_minimized{padding-right:0}.mx_UserMenu.mx_UserMenu_minimized .mx_UserMenu_userAvatarContainer{margin-right:0}.mx_UserMenu_contextMenu{width:258px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype{padding-bottom:16px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype .mx_UserMenu_contextMenu_header{padding-bottom:0;padding-top:16px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype .mx_UserMenu_contextMenu_header:nth-child(n+2){padding-top:8px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype hr{width:85%;opacity:.2;border:none;border-bottom:1px solid #2e2f32}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu>.mx_IconizedContextMenu_optionList{margin-top:4px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu>.mx_IconizedContextMenu_optionList:before{border:none}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu>.mx_IconizedContextMenu_optionList>.mx_AccessibleButton{padding-top:2px;padding-bottom:2px}.mx_UserMenu_contextMenu.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_AccessibleButton{padding-top:16px;padding-bottom:16px}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header{padding:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:calc(100% - 40px)}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name *{-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name .mx_UserMenu_contextMenu_displayName{font-weight:700;font-size:1.5rem;line-height:2rem}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name .mx_UserMenu_contextMenu_userId{font-size:1.5rem;line-height:2.4rem}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_themeButton{min-width:32px;max-width:32px;width:32px;height:32px;margin-left:8px;border-radius:32px;background-color:#e3e8f0;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts,.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_hostingLink{padding-top:0}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts{display:inline-block}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts>span{font-weight:600;display:block}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts>span+span{margin-top:8px}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts .mx_AccessibleButton_kind_link{font-weight:400;font-size:inherit;padding:0}.mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon{width:16px;height:16px;display:block}.mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon:before{content:"";width:16px;height:16px;display:block;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#2e2f32}.mx_UserMenu_contextMenu .mx_UserMenu_iconHome:before{-webkit-mask-image:url(../../img/element-icons/roomlist/home.1b4edd5.svg);mask-image:url(../../img/element-icons/roomlist/home.1b4edd5.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconHosting:before{-webkit-mask-image:url(../../img/element-icons/brands/element.182040d.svg);mask-image:url(../../img/element-icons/brands/element.182040d.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconBell:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconLock:before{-webkit-mask-image:url(../../img/element-icons/security.66f2fa6.svg);mask-image:url(../../img/element-icons/security.66f2fa6.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconSettings:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconArchive:before{-webkit-mask-image:url(../../img/element-icons/roomlist/archived.226584d.svg);mask-image:url(../../img/element-icons/roomlist/archived.226584d.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconMessage:before{-webkit-mask-image:url(../../img/element-icons/roomlist/feedback.b9a3f53.svg);mask-image:url(../../img/element-icons/roomlist/feedback.b9a3f53.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconSignOut:before{-webkit-mask-image:url(../../img/element-icons/leave.bb917e7.svg);mask-image:url(../../img/element-icons/leave.bb917e7.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconMembers:before{-webkit-mask-image:url(../../img/element-icons/room/members.88c3e93.svg);mask-image:url(../../img/element-icons/room/members.88c3e93.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconInvite:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_ViewSource_separator{clear:both;border-bottom:1px solid #e5e5e5;padding-top:.7em;padding-bottom:.7em}.mx_ViewSource_heading{font-size:1.7rem;font-weight:400;color:#2e2f32;margin-top:.7em}.mx_ViewSource pre{text-align:left;font-size:1.2rem;padding:.5em 1em;word-wrap:break-word;white-space:pre-wrap}.mx_ViewSource_details{margin-top:.8em}.mx_CompleteSecurity_header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CompleteSecurity_headerIcon{width:24px;height:24px;margin-right:4px;position:relative}.mx_CompleteSecurity_heroIcon{width:128px;height:128px;position:relative;margin:0 auto}.mx_CompleteSecurity_body{font-size:1.5rem}.mx_CompleteSecurity_waiting{color:#8d99a5}.mx_CompleteSecurity_actionRow{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin-top:2.8rem}.mx_CompleteSecurity_actionRow .mx_AccessibleButton{-webkit-margin-start:18px;margin-inline-start:18px}.mx_CompleteSecurity_actionRow .mx_AccessibleButton.warning{color:#ff4b55}.mx_Login_submit{vertical-align:middle;border:0;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;padding:7px 1.5em;cursor:pointer;display:inline-block;outline:none;width:100%;margin-top:24px;margin-bottom:24px;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center}.mx_Login_submit:disabled{opacity:.3;cursor:default}.mx_Login_loader{display:inline;position:relative;top:2px;left:8px}.mx_Login_loader .mx_Spinner{display:inline}.mx_Login_loader .mx_Spinner img{width:16px;height:16px}.mx_Login_error{color:#ff4b55;font-weight:700;text-align:center;margin-top:12px;margin-bottom:12px}.mx_Login_error.mx_Login_serverError{text-align:left;font-weight:400}.mx_Login_error.mx_Login_serverError.mx_Login_serverErrorNonFatal{color:#ff8d13}.mx_Login_type_container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#232f32}.mx_Login_type_container .mx_Field{margin:0}.mx_Login_type_label{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_Login_underlinedServerName{width:-webkit-max-content;width:-moz-max-content;width:max-content;border-bottom:1px dashed #0dbd8b}div.mx_AccessibleButton_kind_link.mx_Login_forgot{display:block;margin:0 auto;font-size:inherit;padding:0}div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled{cursor:not-allowed}.mx_AuthBody{width:500px;font-size:1.2rem;color:#61708b;background-color:#fff;border-radius:0 4px 4px 0;padding:25px 60px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_AuthBody h2{font-size:2.4rem;font-weight:600;margin-top:8px;color:#232f32}.mx_AuthBody h3{font-size:1.4rem;font-weight:600;color:#61708b}.mx_AuthBody h3.mx_AuthBody_centered{text-align:center}.mx_AuthBody a:hover,.mx_AuthBody a:link,.mx_AuthBody a:visited{color:#0dbd8b;text-decoration:none}.mx_AuthBody input[type=password],.mx_AuthBody input[type=text]{color:#232f32}.mx_AuthBody .mx_Field input,.mx_AuthBody .mx_Field select{color:#232f32;background-color:#fff}.mx_AuthBody .mx_Field label{color:#232f32}.mx_AuthBody .mx_Field input:not(:-moz-placeholder-shown)+label,.mx_AuthBody .mx_Field textarea:not(:-moz-placeholder-shown)+label{background-color:#fff}.mx_AuthBody .mx_Field input:not(:-ms-input-placeholder)+label,.mx_AuthBody .mx_Field textarea:not(:-ms-input-placeholder)+label{background-color:#fff}.mx_AuthBody .mx_Field_labelAlwaysTopLeft label,.mx_AuthBody .mx_Field input:focus+label,.mx_AuthBody .mx_Field input:not(:placeholder-shown)+label,.mx_AuthBody .mx_Field select+label,.mx_AuthBody .mx_Field textarea:focus+label,.mx_AuthBody .mx_Field textarea:not(:placeholder-shown)+label{background-color:#fff}.mx_AuthBody input.error{color:#ff4b55}.mx_AuthBody .mx_Field input{-webkit-box-sizing:border-box;box-sizing:border-box}.mx_AuthBody .mx_Field_select:before{background-color:#232f32}.mx_AuthBody .mx_Dropdown{color:#232f32}.mx_AuthBody .mx_Dropdown_arrow{background:#232f32}.mx_AuthBody .mx_Dropdown_menu{background-color:#fff}.mx_AuthBody .mx_Dropdown_menu .mx_Dropdown_option_highlight{background-color:#ddd}.mx_AuthBody_fieldRow{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:10px}.mx_AuthBody_fieldRow>.mx_Field{margin:0 5px}.mx_AuthBody_fieldRow>.mx_Field:first-child{margin-left:0}.mx_AuthBody_fieldRow>.mx_Field:last-child{margin-right:0}.mx_AuthBody_paddedFooter{height:80px;padding-top:28px;text-align:center}.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_title{margin-top:16px;font-size:1.5rem;line-height:2.4rem}.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_title .mx_InlineSpinner img{vertical-align:sub;margin-right:5px}.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_subtitle{margin-top:8px;font-size:1rem;line-height:1.4rem}.mx_AuthBody_changeFlow{display:block;text-align:center;width:100%}.mx_AuthBody_changeFlow>a{font-weight:600}.mx_SSOButtons+.mx_AuthBody_changeFlow{margin-top:24px}.mx_AuthBody_spinner{margin:1em 0}@media only screen and (max-width:480px){.mx_AuthBody{border-radius:4px;width:auto;max-width:500px;padding:10px}}.mx_AuthButtons{min-height:24px;height:unset!important;padding-top:13px!important;padding-bottom:14px!important;-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.mx_AuthButtons_loginButton_wrapper{text-align:center;width:100%}.mx_AuthButtons_loginButton,.mx_AuthButtons_registerButton{margin-top:3px;height:40px;border:0;border-radius:40px;margin-left:4px;margin-right:4px;min-width:80px;background-color:#0dbd8b;color:#fff;cursor:pointer;font-size:1.5rem;padding:0 11px;word-break:break-word}.mx_AuthFooter{text-align:center;width:100%;font-size:1.4rem;opacity:.72;padding:20px 0;background:-webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.8)));background:linear-gradient(transparent,rgba(0,0,0,.8))}.mx_AuthFooter a:hover,.mx_AuthFooter a:link,.mx_AuthFooter a:visited{color:#fff;margin:0 22px}.mx_AuthHeader{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:206px;padding:25px;-webkit-box-sizing:border-box;box-sizing:border-box}@media only screen and (max-width:480px){.mx_AuthHeader{display:none}}.mx_AuthHeaderLogo{margin-top:15px;-webkit-box-flex:1;-ms-flex:1;flex:1;padding:0 25px}.mx_AuthHeaderLogo img{width:100%}@media only screen and (max-width:480px){.mx_AuthHeaderLogo{display:none}}.mx_AuthPage{width:100%;min-height:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background-color:#2e3649}.mx_AuthPage,.mx_AuthPage_modal{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_AuthPage_modal{margin:100px auto auto;border-radius:4px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.33);box-shadow:0 2px 4px 0 rgba(0,0,0,.33);background-color:hsla(0,0%,96.1%,.9)}@media only screen and (max-width:480px){.mx_AuthPage_modal{margin-top:0}}.mx_CompleteSecurityBody{width:600px;color:#232f32;background-color:#fff;border-radius:4px;padding:20px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_CompleteSecurityBody h2{font-size:2.4rem;font-weight:600;margin-top:0}.mx_CompleteSecurityBody h3{font-size:1.4rem;font-weight:600}.mx_CompleteSecurityBody a:hover,.mx_CompleteSecurityBody a:link,.mx_CompleteSecurityBody a:visited{color:#0dbd8b;text-decoration:none}.mx_CountryDropdown .mx_Dropdown_input .mx_Dropdown_option{padding:0 3px}.mx_CountryDropdown .mx_Dropdown_arrow{padding-right:3px}.mx_CountryDropdown_shortOption{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:100%}.mx_CountryDropdown_option,.mx_CountryDropdown_shortOption{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CountryDropdown_option{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_InteractiveAuthEntryComponents_emailWrapper{padding-right:100px;position:relative;margin-top:32px;margin-bottom:32px}.mx_InteractiveAuthEntryComponents_emailWrapper:after,.mx_InteractiveAuthEntryComponents_emailWrapper:before{position:absolute;width:116px;height:116px;content:"";right:-10px}.mx_InteractiveAuthEntryComponents_emailWrapper:before{background-color:rgba(244,246,250,.91);border-radius:50%;top:-20px}.mx_InteractiveAuthEntryComponents_emailWrapper:after{background-image:url(../../img/element-icons/email-prompt.1d04dfe.svg);background-repeat:no-repeat;background-position:50%;background-size:contain;top:-25px}.mx_InteractiveAuthEntryComponents_msisdnWrapper{text-align:center}.mx_InteractiveAuthEntryComponents_msisdnEntry{font-size:200%;font-weight:700;border:1px solid #c7c7c7;border-radius:3px;width:6em}.mx_InteractiveAuthEntryComponents_msisdnEntry:focus{border:1px solid #0dbd8b}.mx_InteractiveAuthEntryComponents_msisdnSubmit{margin-top:4px;margin-bottom:5px}.mx_InteractiveAuthEntryComponents_termsSubmit{margin-top:20px;margin-bottom:5px;display:block;width:100%}.mx_InteractiveAuthEntryComponents_msisdnSubmit:disabled{background-color:#747474;cursor:default}.mx_InteractiveAuthEntryComponents_termsSubmit:disabled{background-color:#92caad;cursor:default}.mx_InteractiveAuthEntryComponents_termsPolicy{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_InteractiveAuthEntryComponents_passwordSection{width:300px}.mx_InteractiveAuthEntryComponents_sso_buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin-top:20px}.mx_InteractiveAuthEntryComponents_sso_buttons .mx_AccessibleButton{margin-left:5px}.mx_AuthBody_language{width:100%}.mx_AuthBody_language .mx_Dropdown_input{border:none;font-size:1.4rem;font-weight:600;color:#4e5054;width:auto}.mx_AuthBody_language .mx_Dropdown_arrow{background:#4e5054}progress.mx_PassphraseField_progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;border:0;height:4px;position:absolute;top:-12px;border-radius:"2px"}progress.mx_PassphraseField_progress::-moz-progress-bar{border-radius:"2px"}progress.mx_PassphraseField_progress::-webkit-progress-bar,progress.mx_PassphraseField_progress::-webkit-progress-value{border-radius:"2px"}progress.mx_PassphraseField_progress{color:#ff4b55}progress.mx_PassphraseField_progress::-moz-progress-bar{background-color:#ff4b55}progress.mx_PassphraseField_progress::-webkit-progress-value{background-color:#ff4b55}progress.mx_PassphraseField_progress[value="2"],progress.mx_PassphraseField_progress[value="3"]{color:#ff812d}progress.mx_PassphraseField_progress[value="2"]::-moz-progress-bar,progress.mx_PassphraseField_progress[value="3"]::-moz-progress-bar{background-color:#ff812d}progress.mx_PassphraseField_progress[value="2"]::-webkit-progress-value,progress.mx_PassphraseField_progress[value="3"]::-webkit-progress-value{background-color:#ff812d}progress.mx_PassphraseField_progress[value="4"]{color:#0dbd8b}progress.mx_PassphraseField_progress[value="4"]::-moz-progress-bar{background-color:#0dbd8b}progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value{background-color:#0dbd8b}.mx_Welcome{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_Welcome.mx_WelcomePage_registrationDisabled .mx_ButtonCreateAccount{display:none}.mx_Welcome .mx_AuthBody_language{width:160px;margin-bottom:10px}.mx_BaseAvatar{position:relative;display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_BaseAvatar_initial{position:absolute;left:0;color:#fff;text-align:center;speak:none;pointer-events:none;font-weight:400}.mx_BaseAvatar_image{-o-object-fit:cover;object-fit:cover;border-radius:125px;vertical-align:top;background-color:#fff}.mx_DecoratedRoomAvatar,.mx_ExtraTile{position:relative}.mx_DecoratedRoomAvatar.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar,.mx_ExtraTile.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar{-webkit-mask-image:url(../../img/element-icons/roomlist/decorated-avatar-mask.76c407f.svg);mask-image:url(../../img/element-icons/roomlist/decorated-avatar-mask.76c407f.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon{position:absolute;bottom:-2px;right:-2px;margin:4px;width:8px;height:8px;border-radius:50%}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon:before{content:"";width:8px;height:8px;position:absolute;border-radius:8px}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_globe:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_globe:before{-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#737d8c;-webkit-mask-image:url(../../img/globe.8201f08.svg);mask-image:url(../../img/globe.8201f08.svg)}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_offline:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_offline:before{background-color:#e3e8f0}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_online:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_online:before{background-color:#0dbd8b}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_away:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_away:before{background-color:#d9b072}.mx_DecoratedRoomAvatar .mx_NotificationBadge,.mx_DecoratedRoomAvatar .mx_RoomTile_badgeContainer,.mx_ExtraTile .mx_NotificationBadge,.mx_ExtraTile .mx_RoomTile_badgeContainer{position:absolute;top:0;right:0;height:18px;width:18px}.mx_MessageComposer_avatar .mx_BaseAvatar{padding:2px;border:1px solid transparent;border-radius:100%}.mx_MessageComposer_avatar .mx_BaseAvatar_initial{left:2px}.mx_MemberStatusMessageAvatar_hasStatus .mx_BaseAvatar{border-color:#0dbd8b}@-webkit-keyframes shadow-pulse{0%{-webkit-box-shadow:0 0 0 0 rgba(13,189,139,.2);box-shadow:0 0 0 0 rgba(13,189,139,.2)}to{-webkit-box-shadow:0 0 0 6px rgba(13,189,139,0);box-shadow:0 0 0 6px rgba(13,189,139,0)}}@keyframes shadow-pulse{0%{-webkit-box-shadow:0 0 0 0 rgba(13,189,139,.2);box-shadow:0 0 0 0 rgba(13,189,139,.2)}to{-webkit-box-shadow:0 0 0 6px rgba(13,189,139,0);box-shadow:0 0 0 6px rgba(13,189,139,0)}}.mx_PulsedAvatar img{-webkit-animation:shadow-pulse 1s infinite;animation:shadow-pulse 1s infinite}.mx_WidgetAvatar{border-radius:4px}.mx_BetaCard{margin-bottom:20px;padding:24px;background-color:#f4f6fa;border-radius:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_BetaCard>div .mx_BetaCard_title{font-weight:600;font-size:1.8rem;line-height:2.2rem;color:#2e2f32;margin:4px 0 14px}.mx_BetaCard>div .mx_BetaCard_title .mx_BetaCard_betaPill{margin-left:12px}.mx_BetaCard>div .mx_BetaCard_caption{font-size:1.5rem;line-height:2rem;color:#737d8c;margin-bottom:20px}.mx_BetaCard>div .mx_AccessibleButton{display:block;margin:12px 0;padding:7px 40px;width:auto}.mx_BetaCard>div .mx_BetaCard_disclaimer{font-size:1.2rem;line-height:1.5rem;color:#737d8c;margin-top:20px}.mx_BetaCard>img{margin:auto 0 auto 20px;width:300px;-o-object-fit:contain;object-fit:contain;height:100%}.mx_BetaCard_betaPill{background-color:#238cf5;padding:4px 10px;border-radius:8px;text-transform:uppercase;font-size:12px;line-height:15px;color:#fff;display:inline-block;vertical-align:text-bottom}.mx_BetaCard_betaPill.mx_BetaCard_betaPill_clickable{cursor:pointer}.mx_BetaDot{border-radius:50%;margin:10px;height:12px;width:12px;-webkit-transform:scale(1);transform:scale(1);background:#238cf5;-webkit-box-shadow:0 0 0 0 #238cf5;box-shadow:0 0 0 0 #238cf5;-webkit-animation:mx_Beta_bluePulse 2s infinite;animation:mx_Beta_bluePulse 2s infinite;-webkit-animation-iteration-count:20;animation-iteration-count:20}@-webkit-keyframes mx_Beta_bluePulse{0%{-webkit-transform:scale(.95);transform:scale(.95);-webkit-box-shadow:0 0 0 0 rgba(35,140,245,.7);box-shadow:0 0 0 0 rgba(35,140,245,.7)}70%{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:0 0 0 10px rgba(35,140,245,0);box-shadow:0 0 0 10px rgba(35,140,245,0)}to{-webkit-transform:scale(.95);transform:scale(.95);-webkit-box-shadow:0 0 0 0 rgba(35,140,245,0);box-shadow:0 0 0 0 rgba(35,140,245,0)}}@keyframes mx_Beta_bluePulse{0%{-webkit-transform:scale(.95);transform:scale(.95);-webkit-box-shadow:0 0 0 0 rgba(35,140,245,.7);box-shadow:0 0 0 0 rgba(35,140,245,.7)}70%{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:0 0 0 10px rgba(35,140,245,0);box-shadow:0 0 0 10px rgba(35,140,245,0)}to{-webkit-transform:scale(.95);transform:scale(.95);-webkit-box-shadow:0 0 0 0 rgba(35,140,245,0);box-shadow:0 0 0 0 rgba(35,140,245,0)}}.mx_CallContextMenu_item{width:205px;height:40px;padding-left:16px;line-height:40px;vertical-align:center}.mx_IconizedContextMenu{min-width:146px}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList>*{padding-left:20px;padding-right:20px}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_optionList_notFirst:before,.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:nth-child(n+2):before{border-top:1px solid #2e2f32;opacity:.1;content:"";width:100%;position:absolute;left:0}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:first-child .mx_AccessibleButton:first-child{border-radius:8px 8px 0 0}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:last-child .mx_AccessibleButton:last-child{border-radius:0 0 8px 8px}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton{padding-top:12px;padding-bottom:12px;text-decoration:none;color:#2e2f32;font-size:1.5rem;line-height:2.4rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton:hover{background-color:#f5f8fa}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_AccessibleButton_disabled{opacity:.5;cursor:not-allowed}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton .mx_IconizedContextMenu_icon,.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton img{width:16px;min-width:16px;max-width:16px}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton span.mx_IconizedContextMenu_label{width:100%;-webkit-box-flex:1;-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton .mx_IconizedContextMenu_icon+.mx_IconizedContextMenu_label{padding-left:14px}.mx_IconizedContextMenu .mx_IconizedContextMenu_icon{position:relative;width:16px;height:16px}.mx_IconizedContextMenu .mx_IconizedContextMenu_icon:before{content:"";width:16px;height:16px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#2e2f32}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_AccessibleButton{color:#ff4b55!important}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_IconizedContextMenu_icon:before{background-color:#ff4b55}.mx_IconizedContextMenu .mx_IconizedContextMenu_active.mx_AccessibleButton,.mx_IconizedContextMenu .mx_IconizedContextMenu_active .mx_AccessibleButton{color:#0dbd8b!important}.mx_IconizedContextMenu .mx_IconizedContextMenu_active .mx_IconizedContextMenu_icon:before{background-color:#0dbd8b}.mx_IconizedContextMenu.mx_IconizedContextMenu_compact .mx_IconizedContextMenu_optionList>*{padding:8px 16px 8px 11px}.mx_IconizedContextMenu .mx_IconizedContextMenu_checked{margin-left:16px;margin-right:-5px}.mx_IconizedContextMenu .mx_IconizedContextMenu_checked:before{-webkit-mask-image:url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);mask-image:url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg)}.mx_MessageContextMenu{padding:6px}.mx_MessageContextMenu_field{display:block;padding:3px 6px;cursor:pointer;white-space:nowrap}.mx_MessageContextMenu_field.mx_MessageContextMenu_fieldSet{font-weight:700}.mx_StatusMessageContextMenu{padding:10px}.mx_StatusMessageContextMenu_form{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}input.mx_StatusMessageContextMenu_message{border-radius:4px;border:1px solid #e7e7e7;padding:6.5px 11px;background-color:#fff;font-weight:400;margin:0 0 10px}.mx_StatusMessageContextMenu_message::-webkit-input-placeholder{color:#61708b}.mx_StatusMessageContextMenu_message::-moz-placeholder{color:#61708b}.mx_StatusMessageContextMenu_message:-ms-input-placeholder{color:#61708b}.mx_StatusMessageContextMenu_message::-ms-input-placeholder{color:#61708b}.mx_StatusMessageContextMenu_message::placeholder{color:#61708b}.mx_StatusMessageContextMenu_actionContainer{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_StatusMessageContextMenu_clear,.mx_StatusMessageContextMenu_submit{vertical-align:middle;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;cursor:pointer;display:inline-block;outline:none;-ms-flex-item-align:start;align-self:start;font-size:1.2rem;padding:6px 1em;border:1px solid transparent;margin-right:10px}.mx_StatusMessageContextMenu_submit[disabled]{opacity:.49}.mx_StatusMessageContextMenu_clear{color:#ff4b55;background-color:transparent;border:1px solid #ff4b55}.mx_StatusMessageContextMenu_actionContainer .mx_Spinner{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_TagTileContextMenu_item{padding:8px 20px 8px 8px;cursor:pointer;white-space:nowrap;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1.6rem}.mx_TagTileContextMenu_item:before{content:"";height:15px;width:15px;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;margin-right:8px}.mx_TagTileContextMenu_viewCommunity:before{-webkit-mask-image:url(../../img/element-icons/view-community.0cad1a5.svg);mask-image:url(../../img/element-icons/view-community.0cad1a5.svg)}.mx_TagTileContextMenu_hideCommunity:before{-webkit-mask-image:url(../../img/element-icons/hide.2b52315.svg);mask-image:url(../../img/element-icons/hide.2b52315.svg)}.mx_TagTileContextMenu_separator{margin-top:0;margin-bottom:0;border-style:none;border-top:1px solid;border-color:#e7e7e7}.mx_AddExistingToSpaceDialog_wrapper .mx_Dialog{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_AddExistingToSpace .mx_SearchBox{margin:0 0 15px;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0}.mx_AddExistingToSpace .mx_AddExistingToSpace_content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_AddExistingToSpace .mx_AddExistingToSpace_noResults{display:block;margin-top:24px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section:not(:first-child){margin-top:24px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section>h3{margin:0;color:#737d8c;font-size:1.2rem;font-weight:600;line-height:1.5rem}.mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AddExistingToSpace_entry{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AddExistingToSpace_entry .mx_DecoratedRoomAvatar{margin-right:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AddExistingToSpace_entry .mx_AddExistingToSpace_entry_name{font-size:1.5rem;line-height:30px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AddExistingToSpace_entry .mx_Checkbox{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_AddExistingToSpace .mx_AddExistingToSpace_section_spaces .mx_BaseAvatar{margin-right:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section_spaces .mx_BaseAvatar_image{border-radius:8px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section_experimental{position:relative;border-radius:8px;margin:12px 0;padding:8px 8px 8px 42px;background-color:#f3f8fd;font-size:1.2rem;line-height:1.5rem;color:#737d8c}.mx_AddExistingToSpace .mx_AddExistingToSpace_section_experimental:before{content:"";position:absolute;left:10px;top:calc(50% - 8px);height:16px;width:16px;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);-webkit-mask-position:center;mask-position:center}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:20px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;font-size:1.2rem;line-height:1.5rem;color:#737d8c}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_ProgressBar{height:8px;width:100%;border-radius:8px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_ProgressBar::-moz-progress-bar{border-radius:8px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_ProgressBar::-webkit-progress-bar,.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_ProgressBar::-webkit-progress-value{border-radius:8px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_AddExistingToSpace_progressText{margin-top:8px;font-size:1.5rem;line-height:2.4rem;color:#2e2f32}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span>*{vertical-align:middle}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error{padding-left:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error>img{-ms-flex-item-align:center;align-self:center}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error .mx_AddExistingToSpace_errorHeading{font-weight:600;font-size:1.5rem;line-height:1.8rem;color:#ff4b55}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error .mx_AddExistingToSpace_errorCaption{margin-top:4px;font-size:1.2rem;line-height:1.5rem;color:#2e2f32}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AccessibleButton{display:inline-block;-ms-flex-item-align:center;align-self:center}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AccessibleButton_kind_primary{padding:8px 36px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_retryButton{margin-left:12px;padding-left:24px;position:relative}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_retryButton:before{content:"";position:absolute;background-color:#2e2f32;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/retry.6cd23ad.svg);mask-image:url(../../img/element-icons/retry.6cd23ad.svg);width:18px;height:18px;left:0}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AccessibleButton_kind_link{padding:0}.mx_AddExistingToSpaceDialog{width:480px;color:#2e2f32;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;min-height:0;height:80vh}.mx_AddExistingToSpaceDialog,.mx_AddExistingToSpaceDialog .mx_Dialog_title{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_BaseAvatar_image{border-radius:8px;margin:0;vertical-align:unset}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_BaseAvatar{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin:auto 16px auto 5px;vertical-align:middle}.mx_AddExistingToSpaceDialog .mx_Dialog_title>div>h1{font-weight:600;font-size:1.8rem;line-height:2.2rem;margin:0}.mx_AddExistingToSpaceDialog .mx_Dialog_title>div .mx_AddExistingToSpaceDialog_onlySpace{color:#737d8c;font-size:1.5rem;line-height:2.4rem}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input{border:none}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input>.mx_Dropdown_option{padding-left:0;-webkit-box-flex:unset;-ms-flex:unset;flex:unset;height:unset;color:#737d8c;font-size:1.5rem;line-height:2.4rem}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input>.mx_Dropdown_option .mx_BaseAvatar{display:none}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input .mx_Dropdown_menu .mx_AddExistingToSpaceDialog_dropdownOptionActive{color:#0dbd8b;padding-right:32px;position:relative}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input .mx_Dropdown_menu .mx_AddExistingToSpaceDialog_dropdownOptionActive:before{content:"";width:20px;height:20px;top:8px;right:0;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#0dbd8b;-webkit-mask-image:url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);mask-image:url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg)}.mx_AddExistingToSpaceDialog .mx_AddExistingToSpace{display:contents}.mx_AddressPickerDialog a:hover,.mx_AddressPickerDialog a:link,.mx_AddressPickerDialog a:visited{color:#0dbd8b;text-decoration:none}.mx_AddressPickerDialog_input,.mx_AddressPickerDialog_input:focus{height:26px;font-size:1.4rem;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;padding-left:12px;padding-right:12px;margin:0!important;border:0!important;outline:0!important;width:1000%;resize:none;overflow:hidden;vertical-align:middle;-webkit-box-sizing:border-box;box-sizing:border-box;word-wrap:nowrap}.mx_AddressPickerDialog .mx_Dialog_content{min-height:50px}.mx_AddressPickerDialog_inputContainer{border-radius:3px;border:1px solid #e7e7e7;line-height:3.6rem;padding:1px 4px;max-height:150px;overflow-x:hidden;overflow-y:auto}.mx_AddressPickerDialog_error{margin-top:10px;color:#ff4b55}.mx_AddressPickerDialog_cancel{position:absolute;right:11px;top:13px;cursor:pointer}.mx_AddressPickerDialog_cancel object{pointer-events:none}.mx_AddressPickerDialog_identityServer{margin-top:1em}.mx_AnalyticsModal table{margin:10px 0}.mx_BetaFeedbackDialog .mx_BetaFeedbackDialog_subheading{color:#2e2f32;font-size:1.4rem;line-height:2rem;margin-bottom:24px}.mx_BetaFeedbackDialog .mx_AccessibleButton_kind_link{padding:0;font-size:inherit;line-height:inherit}.mx_BugReportDialog .mx_BugReportDialog_download .mx_AccessibleButton_kind_link{padding-left:0}.mx_ChangelogDialog_content{max-height:300px;overflow:auto}.mx_ChangelogDialog_li{padding:.2em}.mx_ChatCreateOrReuseDialog .mx_ChatCreateOrReuseDialog_tiles{margin-top:24px}.mx_ChatCreateOrReuseDialog .mx_Dialog_content{margin-bottom:24px;min-height:100px}.mx_ChatCreateOrReuseDialog .mx_RoomTile_badge{display:none}.mx_ChatCreateOrReuseDialog_profile{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_ChatCreateOrReuseDialog_profile_name{padding:14px}.mx_CommunityPrototypeInviteDialog.mx_Dialog_fixedWidth{width:360px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content{margin-bottom:0}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_people{position:relative;margin-bottom:4px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_people .mx_AccessibleButton{display:inline-block;background-color:#ddd;border-radius:4px;padding:3px 5px;font-size:1.2rem;float:right}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_morePeople{margin-top:8px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person{position:relative;margin-top:4px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person>*{vertical-align:middle}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_Checkbox{position:absolute;right:0;top:calc(50% - 8px);width:16px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_CommunityPrototypeInviteDialog_personIdentifiers{display:inline-block}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_CommunityPrototypeInviteDialog_personIdentifiers>*{display:block}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_CommunityPrototypeInviteDialog_personIdentifiers .mx_CommunityPrototypeInviteDialog_personName{font-weight:600;font-size:1.4rem;color:#2e2f32;margin-left:7px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_CommunityPrototypeInviteDialog_personIdentifiers .mx_CommunityPrototypeInviteDialog_personId{font-size:1.2rem;color:#61708b;margin-left:7px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_primaryButton{display:block;font-size:1.3rem;line-height:20px;height:20px;margin-top:24px}.mx_ConfirmUserActionDialog .mx_Dialog_content{min-height:48px;margin-bottom:24px}.mx_ConfirmUserActionDialog_avatar{float:left;margin-right:20px;margin-top:-2px}.mx_ConfirmUserActionDialog_name{font-size:1.8rem}.mx_ConfirmUserActionDialog_userId{font-size:1.3rem}.mx_ConfirmUserActionDialog_reasonField{font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#2e2f32;background-color:#fff;border-radius:3px;border:1px solid #e7e7e7;line-height:3.6rem;padding:1px 16px;margin-bottom:24px;width:90%}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin-bottom:12px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName{-ms-flex-preferred-size:66.66%;flex-basis:66.66%;padding-right:100px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_Field input{font-size:1.6rem;line-height:2rem}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_subtext{display:block;color:#61708b;margin-bottom:16px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_subtext:last-child{margin-top:16px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_subtext.mx_CreateCommunityPrototypeDialog_subtext_error{color:#ff4b55}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_communityId{position:relative}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_communityId .mx_InfoTooltip{float:right}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_AccessibleButton{display:block;height:32px;font-size:1.6rem;line-height:32px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar{-ms-flex-preferred-size:33.33%;flex-basis:33.33%}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer{margin-top:12px;margin-bottom:20px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer .mx_CreateCommunityPrototypeDialog_avatar,.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer .mx_CreateCommunityPrototypeDialog_placeholderAvatar{width:96px;height:96px;border-radius:96px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer .mx_CreateCommunityPrototypeDialog_placeholderAvatar{background-color:#368bd6}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer .mx_CreateCommunityPrototypeDialog_placeholderAvatar:before{display:inline-block;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:96px;mask-size:96px;width:96px;height:96px;-webkit-mask-position:center;mask-position:center;content:"";vertical-align:middle;-webkit-mask-image:url(../../img/element-icons/add-photo.c0b4c3b.svg);mask-image:url(../../img/element-icons/add-photo.c0b4c3b.svg)}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_tip>b,.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_tip>span{display:block;color:#61708b}.mx_CreateGroupDialog_inputRow{margin-top:10px;margin-bottom:10px}.mx_CreateGroupDialog_label{text-align:left;padding-bottom:12px}.mx_CreateGroupDialog_input{font-size:1.5rem;border-radius:3px;border:1px solid #e7e7e7;padding:9px;color:#2e2f32;background-color:#fff}.mx_CreateGroupDialog_input_hasPrefixAndSuffix{border-radius:0}.mx_CreateGroupDialog_input_group{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_CreateGroupDialog_prefix,.mx_CreateGroupDialog_suffix{padding:0 5px;line-height:3.7rem;background-color:#e3e8f0;border:1px solid #e7e7e7;text-align:center}.mx_CreateGroupDialog_prefix{border-right:0;border-radius:3px 0 0 3px}.mx_CreateGroupDialog_suffix{border-left:0;border-radius:0 3px 3px 0}.mx_CreateRoomDialog_details{margin-top:15px}.mx_CreateRoomDialog_details .mx_CreateRoomDialog_details_summary{outline:none;list-style:none;font-weight:600;cursor:pointer;color:#0dbd8b}.mx_CreateRoomDialog_details .mx_CreateRoomDialog_details_summary::-webkit-details-marker{display:none}.mx_CreateRoomDialog_details>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;margin:5px 0}.mx_CreateRoomDialog_details>div input[type=checkbox]{margin-right:10px}.mx_CreateRoomDialog_label{text-align:left;padding-bottom:12px}.mx_CreateRoomDialog_input_container{padding-right:20px}.mx_CreateRoomDialog_input{font-size:1.5rem;border-radius:3px;border:1px solid #e7e7e7;padding:9px;color:#2e2f32;background-color:#fff;width:100%}.mx_CreateRoomDialog_aliasContainer{display:-webkit-box;display:-ms-flexbox;display:flex;margin:10px 0}.mx_CreateRoomDialog_aliasContainer .mx_RoomAliasField{margin:0}.mx_CreateRoomDialog.mx_Dialog_fixedWidth{width:450px}.mx_CreateRoomDialog .mx_Dialog_content{margin-bottom:40px}.mx_CreateRoomDialog .mx_Field_input label,.mx_CreateRoomDialog p{color:#61708b}.mx_CreateRoomDialog .mx_SettingsFlag{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_CreateRoomDialog .mx_SettingsFlag_label{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0;font-weight:600}.mx_CreateRoomDialog .mx_ToggleSwitch{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-left:30px}.mx_CreateRoomDialog .mx_CreateRoomDialog_topic{margin-bottom:36px}.mx_CreateRoomDialog .mx_Dialog_content>.mx_SettingsFlag{margin-top:24px}.mx_CreateRoomDialog p{margin:0 85px 0 0;font-size:1.2rem}.mx_DeactivateAccountDialog .mx_Dialog_content{margin-bottom:30px}.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section{margin-top:60px}.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section .mx_Field{width:300px}.mx_DevTools_content{margin:10px 0}.mx_DevTools_ServersInRoomList_button{cursor:default!important}.mx_DevTools_RoomStateExplorer_query{margin-bottom:10px}.mx_DevTools_RoomStateExplorer_button,.mx_DevTools_ServersInRoomList_button{margin-bottom:10px;width:100%}.mx_DevTools_label_left{float:left}.mx_DevTools_label_right{float:right}.mx_DevTools_label_bottom{clear:both;border-bottom:1px solid #e5e5e5}.mx_DevTools_inputRow{display:table-row}.mx_DevTools_inputLabelCell{display:table-cell;font-weight:700;padding-right:24px}.mx_DevTools_inputCell{display:table-cell;width:240px}.mx_DevTools_inputCell input{display:inline-block;border:0;border-bottom:1px solid hsla(0,0%,59.2%,.5);padding:0;width:240px;color:rgba(74,74,74,.9);font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.6rem}.mx_DevTools_textarea{font-size:1.2rem;max-width:684px;min-height:250px;padding:10px}.mx_DevTools_eventTypeStateKeyGroup{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mx_DevTools_content .mx_Field_input:first-of-type{margin-right:42px}.mx_DevTools_tgl{display:none}.mx_DevTools_tgl,.mx_DevTools_tgl *,.mx_DevTools_tgl+.mx_DevTools_tgl-btn,.mx_DevTools_tgl:after,.mx_DevTools_tgl :after,.mx_DevTools_tgl:before,.mx_DevTools_tgl :before{-webkit-box-sizing:border-box;box-sizing:border-box}.mx_DevTools_tgl+.mx_DevTools_tgl-btn::-moz-selection,.mx_DevTools_tgl::-moz-selection,.mx_DevTools_tgl ::-moz-selection,.mx_DevTools_tgl:after::-moz-selection,.mx_DevTools_tgl :after::-moz-selection,.mx_DevTools_tgl:before::-moz-selection,.mx_DevTools_tgl :before::-moz-selection{background:none}.mx_DevTools_tgl+.mx_DevTools_tgl-btn::selection,.mx_DevTools_tgl::selection,.mx_DevTools_tgl ::selection,.mx_DevTools_tgl:after::selection,.mx_DevTools_tgl :after::selection,.mx_DevTools_tgl:before::selection,.mx_DevTools_tgl :before::selection{background:none}.mx_DevTools_tgl+.mx_DevTools_tgl-btn{outline:0;display:block;width:7em;height:2em;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_DevTools_tgl+.mx_DevTools_tgl-btn:after,.mx_DevTools_tgl+.mx_DevTools_tgl-btn:before{position:relative;display:block;content:"";width:50%;height:100%}.mx_DevTools_tgl+.mx_DevTools_tgl-btn:after{left:0}.mx_DevTools_tgl+.mx_DevTools_tgl-btn:before{display:none}.mx_DevTools_tgl:checked+.mx_DevTools_tgl-btn:after{left:50%}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn{padding:2px;-webkit-transition:all .2s ease;transition:all .2s ease;font-family:sans-serif;-webkit-perspective:100px;perspective:100px}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:after,.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:before{display:inline-block;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%;text-align:center;position:absolute;line-height:2em;font-weight:700;color:#fff;top:0;left:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:4px}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:after{content:attr(data-tg-on);background:#02c66f;-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:before{background:#ff3a19;content:attr(data-tg-off)}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:active:before{-webkit-transform:rotateY(-20deg);transform:rotateY(-20deg)}.mx_DevTools_tgl-flip:checked+.mx_DevTools_tgl-btn:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.mx_DevTools_tgl-flip:checked+.mx_DevTools_tgl-btn:after{-webkit-transform:rotateY(0);transform:rotateY(0);left:0;background:#7fc6a6}.mx_DevTools_tgl-flip:checked+.mx_DevTools_tgl-btn:active:after{-webkit-transform:rotateY(20deg);transform:rotateY(20deg)}.mx_DevTools_VerificationRequest{border:1px solid #ccc;border-radius:3px;padding:1px 5px;margin-bottom:6px;font-family:Inconsolata,Twemoji,Apple Color Emoji,Segoe UI Emoji,Courier,monospace,Noto Color Emoji}.mx_DevTools_VerificationRequest dl{display:grid;grid-template-columns:-webkit-max-content auto;grid-template-columns:max-content auto;margin:0}.mx_DevTools_VerificationRequest dd{grid-column-start:2}.mx_DevTools_VerificationRequest dd:empty{color:#666}.mx_DevTools_VerificationRequest dd:empty:after{content:"(empty)"}.mx_DevTools_VerificationRequest dt{font-weight:700;grid-column-start:1}.mx_DevTools_VerificationRequest dt:after{content:":"}.mx_DevTools_SettingsExplorer table{width:100%;table-layout:fixed;border-collapse:collapse}.mx_DevTools_SettingsExplorer table th{border-bottom:1px solid #0dbd8b;text-align:left}.mx_DevTools_SettingsExplorer table td,.mx_DevTools_SettingsExplorer table th{width:360px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_DevTools_SettingsExplorer table td+td,.mx_DevTools_SettingsExplorer table th+th{width:auto}.mx_DevTools_SettingsExplorer table tr:hover{background-color:rgba(13,189,139,.5)}.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_mutable{background-color:#0dbd8b}.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_immutable{background-color:#ff4b55}.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_edit{float:right;margin-right:16px}.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_warning{border:2px solid #ff4b55;border-radius:4px;padding:4px;margin-bottom:8px}.mx_EditCommunityPrototypeDialog.mx_Dialog_fixedWidth{width:360px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content{margin-bottom:12px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_AccessibleButton.mx_AccessibleButton_kind_primary{display:block;height:32px;font-size:1.6rem;line-height:32px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_rowAvatar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer{margin-top:20px;margin-bottom:20px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer .mx_EditCommunityPrototypeDialog_avatar,.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer .mx_EditCommunityPrototypeDialog_placeholderAvatar{width:96px;height:96px;border-radius:96px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer .mx_EditCommunityPrototypeDialog_placeholderAvatar{background-color:#368bd6}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer .mx_EditCommunityPrototypeDialog_placeholderAvatar:before{display:inline-block;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:96px;mask-size:96px;width:96px;height:96px;-webkit-mask-position:center;mask-position:center;content:"";vertical-align:middle;-webkit-mask-image:url(../../img/element-icons/add-photo.c0b4c3b.svg);mask-image:url(../../img/element-icons/add-photo.c0b4c3b.svg)}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_tip{margin-left:20px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_tip>b,.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_tip>span{display:block;color:#61708b}.mx_FeedbackDialog hr{margin:24px 0;border-color:#e7e7e7}.mx_FeedbackDialog .mx_Dialog_content{margin-bottom:24px}.mx_FeedbackDialog .mx_Dialog_content>h2{margin-bottom:32px}.mx_FeedbackDialog .mx_FeedbackDialog_section{position:relative;padding-left:52px}.mx_FeedbackDialog .mx_FeedbackDialog_section>p{color:#8d99a5}.mx_FeedbackDialog .mx_FeedbackDialog_section .mx_AccessibleButton_kind_link{padding:0;font-size:inherit}.mx_FeedbackDialog .mx_FeedbackDialog_section .mx_AccessibleButton_kind_link,.mx_FeedbackDialog .mx_FeedbackDialog_section a{color:#0dbd8b;text-decoration:underline}.mx_FeedbackDialog .mx_FeedbackDialog_section:after,.mx_FeedbackDialog .mx_FeedbackDialog_section:before{content:"";position:absolute;width:40px;height:40px;left:0;top:0}.mx_FeedbackDialog .mx_FeedbackDialog_section:before{background-color:#c1c6cd;border-radius:20px}.mx_FeedbackDialog .mx_FeedbackDialog_section:after{background:#fff;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:24px;mask-size:24px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mx_FeedbackDialog .mx_FeedbackDialog_reportBug:after{-webkit-mask-image:url(../../img/feather-customised/bug.3dc7afa.svg);mask-image:url(../../img/feather-customised/bug.3dc7afa.svg)}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:20px;-webkit-transition:font-size 1s,border .5s;transition:font-size 1s,border .5s;border-radius:50%;border:2px solid transparent;margin-top:12px;margin-bottom:24px;vertical-align:top;cursor:pointer}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton input[type=radio]+div{display:none}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton .mx_RadioButton_content{background:#c1c6cd;width:40px;height:40px;text-align:center;line-height:40px;border-radius:20px;margin:5px}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton .mx_RadioButton_spacer{display:none}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton+.mx_RadioButton{margin-left:16px}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton_checked{font-size:24px;border-color:#0dbd8b}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp:after{-webkit-mask-image:url(../../img/element-icons/feedback.a91241e.svg);mask-image:url(../../img/element-icons/feedback.a91241e.svg)}.mx_GroupAddressPicker_checkboxContainer{margin-top:10px;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_HostSignupDialog{width:90vw;max-width:580px;height:80vh;max-height:600px;background-color:#fff}.mx_HostSignupDialog .mx_HostSignupDialog_info{text-align:center}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_content_top{margin-bottom:24px}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_paragraphs{text-align:left;padding-left:25%;padding-right:25%}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_buttons{margin-bottom:24px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_buttons button{padding:12px;margin:0 16px}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_footer img{padding-right:5px}.mx_HostSignupDialog iframe{width:100%;height:100%;border:none;background-color:#fff;min-height:540px}.mx_HostSignupDialog_text_dark{color:#2e2f32}.mx_HostSignupDialog_text_light{color:#737d8c}.mx_HostSignup_maximize_button{-webkit-mask:url(../../img/feather-customised/maximise.dc32127.svg);mask:url(../../img/feather-customised/maximise.dc32127.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;right:10px}.mx_HostSignup_maximize_button,.mx_HostSignup_minimize_button{width:14px;height:14px;background-color:#c1c1c1;cursor:pointer;position:absolute;top:10px}.mx_HostSignup_minimize_button{-webkit-mask:url(../../img/feather-customised/minimise.aec9142.svg);mask:url(../../img/feather-customised/minimise.aec9142.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;right:25px}.mx_HostSignup_persisted{width:90vw;max-width:580px;height:80vh;max-height:600px;top:0;left:0;position:fixed;display:none}.mx_HostSignupDialog_minimized{position:fixed;bottom:80px;right:26px;width:314px;height:217px;overflow:hidden}.mx_HostSignupDialog_minimized.mx_Dialog{padding:12px}.mx_HostSignupDialog_minimized .mx_Dialog_title{text-align:left!important;padding-left:20px;font-size:1.5rem}.mx_HostSignupDialog_minimized iframe{width:100%;height:100%;border:none;background-color:#fff}.mx_IncomingSasDialog_opponentProfile_image{position:relative}.mx_IncomingSasDialog_opponentProfile h2{display:inline-block;margin-left:10px}.mx_InviteDialog_addressBar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.mx_InviteDialog_addressBar .mx_InviteDialog_editor{-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;background-color:#f3f8fd;border-radius:4px;min-height:25px;padding-left:8px;overflow-x:hidden;overflow-y:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mx_InviteDialog_addressBar .mx_InviteDialog_editor .mx_InviteDialog_userTile{margin:6px 6px 0 0;display:inline-block;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}.mx_InviteDialog_addressBar .mx_InviteDialog_editor>input[type=text]{margin:6px 0!important;height:24px;line-height:2.4rem;font-size:1.4rem;padding-left:12px;border:0!important;outline:0!important;resize:none;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:40%;-webkit-box-flex:1!important;-ms-flex:1!important;flex:1!important;color:#2e2f32!important}.mx_InviteDialog_addressBar .mx_InviteDialog_goButton{min-width:48px;margin-left:10px;height:25px;line-height:2.5rem}.mx_InviteDialog_addressBar .mx_InviteDialog_buttonAndSpinner .mx_Spinner{width:20px;height:20px;margin-left:5px;display:inline-block;vertical-align:middle}.mx_InviteDialog_section{padding-bottom:10px}.mx_InviteDialog_section h3{font-size:1.2rem;color:#61708b;font-weight:700;text-transform:uppercase}.mx_InviteDialog_section .mx_InviteDialog_subname{margin-bottom:10px;margin-top:-10px;font-size:1.2rem;color:#61708b}.mx_InviteDialog_roomTile{cursor:pointer;padding:5px 10px}.mx_InviteDialog_roomTile:hover{background-color:#f3f8fd;border-radius:4px}.mx_InviteDialog_roomTile *{vertical-align:middle}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_avatarStack{display:inline-block;position:relative;width:36px;height:36px}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_avatarStack>*{position:absolute;top:0;left:0}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_selected{width:36px;height:36px;border-radius:36px;background-color:#368bd6;display:inline-block;position:relative}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_selected:before{content:"";width:24px;height:24px;grid-column:1;grid-row:1;-webkit-mask-image:url(../../img/feather-customised/check.5745b4e.svg);mask-image:url(../../img/feather-customised/check.5745b4e.svg);-webkit-mask-size:100%;mask-size:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;position:absolute;top:6px;left:6px;background-color:#fff}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_nameStack{display:inline-block}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_name{font-weight:600;font-size:1.4rem;color:#2e2f32;margin-left:7px}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_userId{font-size:1.2rem;color:#61708b;margin-left:7px}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_time{text-align:right;font-size:1.2rem;color:#61708b;float:right;line-height:3.6rem}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_highlight{font-weight:900}.mx_InviteDialog_userTile{margin-right:8px}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill{background-color:#368bd6;border-radius:12px;display:inline-block;height:24px;line-height:2.4rem;padding-left:8px;padding-right:8px;color:#fff}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_avatar{border-radius:20px;position:relative;left:-5px;top:2px}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_name,.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill img.mx_InviteDialog_userTile_avatar{vertical-align:top}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_threepidAvatar{background-color:#fff}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_remove{display:inline-block;margin-left:4px}.mx_InviteDialog{height:590px;padding-left:20px}.mx_InviteDialog_userSections{margin-top:10px;overflow-y:auto;padding-right:45px;height:455px}.mx_InviteDialog_addressBar,.mx_InviteDialog_helpText{margin-right:45px}.mx_InviteDialog_helpText .mx_AccessibleButton_kind_link{padding:0}.mx_KeyboardShortcutsDialog{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-bottom:-50px;max-height:1100px}.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_category{width:33.3333%;margin:0 0 40px}.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_category>div{padding-left:5px}.mx_KeyboardShortcutsDialog h3{margin:0 0 10px}.mx_KeyboardShortcutsDialog h5{margin:15px 0 5px;font-weight:400}.mx_KeyboardShortcutsDialog kbd{padding:5px;border-radius:4px;background-color:#f3f8fd;margin-right:5px;min-width:20px;text-align:center;display:inline-block;border:1px solid #e9edf1;-webkit-box-shadow:0 2px #e9edf1;box-shadow:0 2px #e9edf1;margin-bottom:4px;text-transform:capitalize}.mx_KeyboardShortcutsDialog kbd+kbd{margin-left:5px}.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_inline div{display:inline}.mx_MessageEditHistoryDialog .mx_Dialog_header>.mx_Dialog_title{text-align:center}.mx_MessageEditHistoryDialog{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-height:60vh}.mx_MessageEditHistoryDialog_scrollPanel{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.mx_MessageEditHistoryDialog_error{color:#ff4b55;text-align:center}.mx_MessageEditHistoryDialog_edits{list-style-type:none;font-size:1.4rem;padding:0;color:#2e2f32}.mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_deletion,.mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_insertion{padding:0 2px}.mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_deletion{color:#ff4c55;background-color:rgba(255,76,85,.1);text-decoration:line-through}.mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_insertion{color:#1aa97b;background-color:rgba(26,169,123,.1);text-decoration:underline}.mx_MessageEditHistoryDialog_edits .mx_EventTile_content,.mx_MessageEditHistoryDialog_edits .mx_EventTile_line{margin-right:0}.mx_MessageEditHistoryDialog_edits .mx_MessageActionBar .mx_AccessibleButton{font-size:1rem;padding:0 8px}.mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning{margin-bottom:24px}.mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning>img{vertical-align:middle;margin-right:8px}.mx_ModalWidgetDialog .mx_ModalWidgetDialog_buttons{float:right;margin-top:24px}.mx_ModalWidgetDialog .mx_ModalWidgetDialog_buttons .mx_AccessibleButton+.mx_AccessibleButton{margin-left:8px}.mx_ModalWidgetDialog iframe{width:100%;height:450px;border:0;border-radius:8px}.mx_NewSessionReviewDialog_header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:0}.mx_NewSessionReviewDialog_headerIcon{width:24px;height:24px;margin-right:4px;position:relative}.mx_NewSessionReviewDialog_deviceName{font-weight:600}.mx_NewSessionReviewDialog_deviceID{font-size:1.2rem;color:#8d99a5}.mx_RegistrationEmailPromptDialog{width:417px}.mx_RegistrationEmailPromptDialog .mx_Dialog_content{margin-bottom:24px;color:#8d99a5}.mx_RegistrationEmailPromptDialog .mx_Dialog_primary{width:100%}.mx_RoomSettingsDialog_settingsIcon:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_RoomSettingsDialog_securityIcon:before{-webkit-mask-image:url(../../img/element-icons/security.66f2fa6.svg);mask-image:url(../../img/element-icons/security.66f2fa6.svg)}.mx_RoomSettingsDialog_rolesIcon:before{-webkit-mask-image:url(../../img/element-icons/room/settings/roles.bad9a9e.svg);mask-image:url(../../img/element-icons/room/settings/roles.bad9a9e.svg)}.mx_RoomSettingsDialog_notificationsIcon:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_RoomSettingsDialog_bridgesIcon:before{-webkit-mask-image:url(../../img/feather-customised/bridge.b2ca042.svg);mask-image:url(../../img/feather-customised/bridge.b2ca042.svg)}.mx_RoomSettingsDialog_warningIcon:before{-webkit-mask-image:url(../../img/element-icons/room/settings/advanced.e079c15.svg);mask-image:url(../../img/element-icons/room/settings/advanced.e079c15.svg)}.mx_RoomSettingsDialog .mx_Dialog_title{-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0 auto;padding-right:80px}.mx_RoomSettingsDialog .mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder:before{-webkit-mask:url(../../img/feather-customised/image.a8671b8.svg);mask:url(../../img/feather-customised/image.a8671b8.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:36px;mask-size:36px;-webkit-mask-position:center;mask-position:center}.mx_RoomSettingsDialog_BridgeList{padding:0}.mx_RoomSettingsDialog_BridgeList .mx_AccessibleButton{display:inline;margin:0;padding:0}.mx_RoomSettingsDialog_BridgeList li{list-style-type:none;padding:5px;margin-bottom:8px;border:1px solid transparent;border-radius:5px}.mx_RoomSettingsDialog_BridgeList li .column-icon{float:left;padding-right:10px}.mx_RoomSettingsDialog_BridgeList li .column-icon *{border-radius:5px;border:1px solid #e3e8f0}.mx_RoomSettingsDialog_BridgeList li .column-icon .noProtocolIcon{width:48px;height:48px;background:#e3e8f0;border-radius:5px}.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon{float:left;margin-right:5px}.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon img{border-radius:5px;border-width:1px;border-color:transparent}.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon span{left:auto}.mx_RoomSettingsDialog_BridgeList li .column-data{display:inline-block;width:85%}.mx_RoomSettingsDialog_BridgeList li .column-data>h3{margin-top:0;margin-bottom:0;font-size:16pt;color:#2e2f32}.mx_RoomSettingsDialog_BridgeList li .column-data>*{margin-top:4px;margin-bottom:0}.mx_RoomSettingsDialog_BridgeList li .column-data .workspace-channel-details{color:#2e2f32;font-weight:600}.mx_RoomSettingsDialog_BridgeList li .column-data .workspace-channel-details .channel{margin-left:5px}.mx_RoomSettingsDialog_BridgeList li .column-data .metadata{color:#61708b;margin-bottom:0;overflow-y:visible;text-overflow:ellipsis;white-space:normal;padding:0}.mx_RoomSettingsDialog_BridgeList li .column-data .metadata>li{padding:0;border:0}.mx_RoomUpgradeDialog{padding-right:70px}.mx_RoomUpgradeWarningDialog{max-width:38vw;width:38vw}.mx_RoomUpgradeWarningDialog .mx_SettingsFlag{font-weight:700}.mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_ToggleSwitch{display:inline-block;vertical-align:middle;margin-left:8px;float:right}.mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_SettingsFlag_label{display:inline-block;vertical-align:middle}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content{padding-right:85px;color:#2e2f32}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content hr{border-color:#2e2f32;opacity:.1;border-bottom:none}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content ul{padding:16px}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content ul li:nth-child(n+2){margin-top:16px}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timestamp{display:inline-block;width:115px;color:#61708b;line-height:24px;vertical-align:top}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline{display:inline-block;width:calc(100% - 155px)}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_timeline_header span{margin-left:8px;vertical-align:middle}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_txn{position:relative;margin-top:8px}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_txn .mx_ServerOfflineDialog_content_context_txn_desc{width:calc(100% - 100px)}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_txn .mx_AccessibleButton{float:right;padding:0}.mx_ServerPickerDialog{width:468px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_ServerPickerDialog .mx_Dialog_content{margin-bottom:0}.mx_ServerPickerDialog .mx_Dialog_content>p{color:#737d8c;font-size:1.4rem;margin:16px 0}.mx_ServerPickerDialog .mx_Dialog_content>p:first-of-type{margin-bottom:40px}.mx_ServerPickerDialog .mx_Dialog_content>p:last-of-type{margin:0 24px 24px}.mx_ServerPickerDialog .mx_Dialog_content>h4{font-size:1.5rem;font-weight:600;color:#737d8c;margin-left:8px}.mx_ServerPickerDialog .mx_Dialog_content>a{color:#0dbd8b;margin-left:8px}.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserverRadio input[type=radio]+div{margin-top:auto;margin-bottom:auto}.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver{border-top:none;border-left:none;border-right:none;border-radius:unset}.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver>input{padding-left:0}.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver>label{margin-left:0}.mx_ServerPickerDialog .mx_AccessibleButton_kind_primary{width:calc(100% - 64px);margin:0 8px;padding:15px 18px}.mx_SetEmailDialog_email_input{border-radius:3px;border:1px solid #e7e7e7;padding:9px;color:rgba(74,74,74,.9);background-color:#fff;font-size:1.5rem;width:100%;max-width:280px;margin-bottom:10px}.mx_SetEmailDialog_email_input:focus{outline:none;-webkit-box-shadow:none;box-shadow:none;border:1px solid #0dbd8b}.mx_RoomSettingsDialog,.mx_UserSettingsDialog{width:90vw;max-width:1000px;height:80vh}.mx_RoomSettingsDialog .mx_TabbedView,.mx_UserSettingsDialog .mx_TabbedView{top:65px}.mx_RoomSettingsDialog .mx_TabbedView .mx_SettingsTab,.mx_UserSettingsDialog .mx_TabbedView .mx_SettingsTab{-webkit-box-sizing:border-box;box-sizing:border-box;min-width:580px;padding-right:100px;padding-bottom:100px}.mx_RoomSettingsDialog .mx_Dialog_title,.mx_UserSettingsDialog .mx_Dialog_title{margin-bottom:24px}.mx_ShareDialog hr{margin-top:25px;margin-bottom:25px;border-color:#747474}.mx_ShareDialog_content{margin:10px 0}.mx_ShareDialog_matrixto{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;border-radius:5px;border:1px solid #747474;margin-bottom:10px;margin-top:30px;padding:10px}.mx_ShareDialog_matrixto a{text-decoration:none}.mx_ShareDialog_matrixto_link{-ms-flex-negative:1;flex-shrink:1;overflow:hidden;text-overflow:ellipsis}.mx_ShareDialog_matrixto_copy{-ms-flex-negative:0;flex-shrink:0;cursor:pointer;margin-left:20px;display:inherit}.mx_ShareDialog_matrixto_copy>div{-webkit-mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);background-color:#2e2f32;margin-left:5px;width:20px;height:20px;background-repeat:no-repeat}.mx_ShareDialog_split{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mx_ShareDialog_qrcode_container{float:left;height:256px;width:256px;margin-right:64px}.mx_ShareDialog_qrcode_container+.mx_ShareDialog_social_container{width:299px}.mx_ShareDialog_social_container{display:inline-block}.mx_ShareDialog_social_icon{display:inline-grid;margin-right:10px;margin-bottom:10px}.mx_SlashCommandHelpDialog .mx_SlashCommandHelpDialog_headerRow h2{margin-bottom:2px}.mx_SlashCommandHelpDialog .mx_Dialog_content{margin-top:12px;margin-bottom:34px}.mx_SpaceSettingsDialog{width:480px;color:#2e2f32}.mx_SpaceSettingsDialog .mx_SpaceSettings_errorText{font-weight:600;font-size:1.2rem;line-height:1.5rem;color:#ff4b55;margin-bottom:28px}.mx_SpaceSettingsDialog .mx_ToggleSwitch{display:inline-block;vertical-align:middle;margin-left:16px}.mx_SpaceSettingsDialog .mx_AccessibleButton_kind_danger{margin-top:28px}.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:64px}.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons .mx_AccessibleButton{display:inline-block}.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons .mx_AccessibleButton_kind_link{margin-left:auto}.mx_SpaceSettingsDialog .mx_AccessibleButton_hasKind{padding:8px 22px}.mx_TabbedIntegrationManagerDialog .mx_Dialog{width:60%;height:70%;overflow:hidden;padding:0;max-width:none;max-height:none;position:relative}.mx_TabbedIntegrationManagerDialog_container{position:absolute;top:0;bottom:0;left:0;right:0}.mx_TabbedIntegrationManagerDialog_container .mx_TabbedIntegrationManagerDialog_currentManager{width:100%;height:100%;border-top:1px solid #0dbd8b}.mx_TabbedIntegrationManagerDialog_container .mx_TabbedIntegrationManagerDialog_currentManager iframe{background-color:#fff;border:0;width:100%;height:100%}.mx_TabbedIntegrationManagerDialog_tab{display:inline-block;border:1px solid #0dbd8b;border-bottom:0;border-top-left-radius:3px;border-top-right-radius:3px;padding:10px 8px;margin-right:5px}.mx_TabbedIntegrationManagerDialog_currentTab{background-color:#0dbd8b;color:#fff}.mx_TermsDialog_forIntegrationManager .mx_Dialog{width:60%;height:70%;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_TermsDialog_termsTableHeader{font-weight:700;text-align:left}.mx_TermsDialog_termsTable{font-size:1.2rem;width:100%}.mx_TermsDialog_service,.mx_TermsDialog_summary{padding-right:10px}.mx_TermsDialog_link{display:inline-block;-webkit-mask-image:url(../../img/external-link.a8d3e9b.svg);mask-image:url(../../img/external-link.a8d3e9b.svg);background-color:#0dbd8b;width:10px;height:10px}.mx_UntrustedDeviceDialog .mx_Dialog_title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_UntrustedDeviceDialog .mx_Dialog_title .mx_E2EIcon{margin-left:0}.mx_UploadConfirmDialog_fileIcon{margin-right:5px}.mx_UploadConfirmDialog_previewOuter{text-align:center}.mx_UploadConfirmDialog_previewInner{display:inline-block;text-align:left}.mx_UploadConfirmDialog_imagePreview{max-height:300px;max-width:100%;border-radius:4px;border:1px solid #c1c1c1}.mx_UserSettingsDialog_settingsIcon:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_UserSettingsDialog_appearanceIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/appearance.cdebd40.svg);mask-image:url(../../img/element-icons/settings/appearance.cdebd40.svg)}.mx_UserSettingsDialog_voiceIcon:before{-webkit-mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg)}.mx_UserSettingsDialog_bellIcon:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_UserSettingsDialog_preferencesIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/preference.82bfabd.svg);mask-image:url(../../img/element-icons/settings/preference.82bfabd.svg)}.mx_UserSettingsDialog_securityIcon:before{-webkit-mask-image:url(../../img/element-icons/security.66f2fa6.svg);mask-image:url(../../img/element-icons/security.66f2fa6.svg)}.mx_UserSettingsDialog_helpIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/help.68b703f.svg);mask-image:url(../../img/element-icons/settings/help.68b703f.svg)}.mx_UserSettingsDialog_labsIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/lab-flags.6fbe5e2.svg);mask-image:url(../../img/element-icons/settings/lab-flags.6fbe5e2.svg)}.mx_UserSettingsDialog_mjolnirIcon:before{-webkit-mask-image:url(../../img/element-icons/room/composer/emoji.52d7369.svg);mask-image:url(../../img/element-icons/room/composer/emoji.52d7369.svg)}.mx_UserSettingsDialog_flairIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/flair.4227a88.svg);mask-image:url(../../img/element-icons/settings/flair.4227a88.svg)}.mx_WidgetCapabilitiesPromptDialog .text-muted{font-size:1.2rem}.mx_WidgetCapabilitiesPromptDialog .mx_Dialog_content{margin-bottom:16px}.mx_WidgetCapabilitiesPromptDialog .mx_WidgetCapabilitiesPromptDialog_cap{margin-top:20px;font-size:1.5rem;line-height:1.5rem}.mx_WidgetCapabilitiesPromptDialog .mx_WidgetCapabilitiesPromptDialog_cap .mx_WidgetCapabilitiesPromptDialog_byline{color:#61708b;margin-left:26px;font-size:1.2rem;line-height:1.2rem}.mx_WidgetCapabilitiesPromptDialog .mx_Dialog_buttons{margin-top:40px}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag{line-height:calc(1.4rem + 14px);color:#61708b;font-size:1.2rem}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch{display:inline-block;vertical-align:middle;margin-right:8px;width:3.2rem;height:1.5rem}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch.mx_ToggleSwitch_on>.mx_ToggleSwitch_ball{left:calc(100% - 1.5rem)}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch .mx_ToggleSwitch_ball{width:1.5rem;height:1.5rem;border-radius:1.5rem}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_SettingsFlag_label{display:inline-block;vertical-align:middle}.mx_WidgetOpenIDPermissionsDialog .mx_SettingsFlag .mx_ToggleSwitch{display:inline-block;vertical-align:middle;margin-right:8px}.mx_WidgetOpenIDPermissionsDialog .mx_SettingsFlag .mx_SettingsFlag_label{display:inline-block;vertical-align:middle}.mx_AccessSecretStorageDialog_reset{position:relative;padding-left:24px;margin-top:7px}.mx_AccessSecretStorageDialog_reset:before{content:"";display:inline-block;position:absolute;height:16px;width:16px;left:0;top:2px;background-image:url(../../img/element-icons/warning-badge.de1033e.svg)}.mx_AccessSecretStorageDialog_reset .mx_AccessSecretStorageDialog_reset_link{color:#ff4b55}.mx_AccessSecretStorageDialog_titleWithIcon:before{content:"";display:inline-block;width:24px;height:24px;margin-right:8px;position:relative;top:5px;background-color:#2e2f32}.mx_AccessSecretStorageDialog_resetBadge:before{background-image:url(../../img/element-icons/warning-badge.de1033e.svg);background-size:24px;background-color:transparent}.mx_AccessSecretStorageDialog_secureBackupTitle:before{-webkit-mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg)}.mx_AccessSecretStorageDialog_securePhraseTitle:before{-webkit-mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg);mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg)}.mx_AccessSecretStorageDialog_keyStatus{height:30px}.mx_AccessSecretStorageDialog_passPhraseInput{width:300px;border:1px solid #0dbd8b;border-radius:5px;padding:10px}.mx_AccessSecretStorageDialog_recoveryKeyEntry{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText{margin:16px}.mx_AccessSecretStorageDialog_recoveryKeyFeedback:before{content:"";display:inline-block;vertical-align:bottom;width:20px;height:20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:20px;mask-size:20px;margin-right:5px}.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid{color:#0dbd8b}.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid:before{-webkit-mask-image:url(../../img/feather-customised/check.5745b4e.svg);mask-image:url(../../img/feather-customised/check.5745b4e.svg);background-color:#0dbd8b}.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid{color:#ff4b55}.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid:before{-webkit-mask-image:url(../../img/feather-customised/x.9662221.svg);mask-image:url(../../img/feather-customised/x.9662221.svg);background-color:#ff4b55}.mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput{display:none}.mx_CreateCrossSigningDialog{width:560px}.mx_CreateCrossSigningDialog details .mx_AccessibleButton{margin:1em 0}.mx_CreateCrossSigningDialog .mx_Dialog_title,.mx_CreateKeyBackupDialog .mx_Dialog_title{margin-bottom:1em}.mx_CreateKeyBackupDialog_primaryContainer{padding:20px}.mx_CreateKeyBackupDialog_primaryContainer:after{content:"";clear:both;display:block}.mx_CreateKeyBackupDialog_passPhraseContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mx_CreateKeyBackupDialog_passPhraseInput{-webkit-box-flex:0;-ms-flex:none;flex:none;width:250px;border:1px solid #0dbd8b;border-radius:5px;padding:10px;margin-bottom:1em}.mx_CreateKeyBackupDialog_passPhraseMatch{margin-left:20px}.mx_CreateKeyBackupDialog_recoveryKeyHeader{margin-bottom:1em}.mx_CreateKeyBackupDialog_recoveryKeyContainer{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_CreateKeyBackupDialog_recoveryKey{width:262px;padding:20px;color:#888;background-color:#f7f7f7;margin-right:12px}.mx_CreateKeyBackupDialog_recoveryKeyButtons{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CreateKeyBackupDialog_recoveryKeyButtons button{-webkit-box-flex:1;-ms-flex:1;flex:1;white-space:nowrap}.mx_CreateKeyBackupDialog details .mx_AccessibleButton{margin:1em 0}.mx_CreateSecretStorageDialog{width:560px}.mx_CreateSecretStorageDialog .mx_SettingsFlag{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_CreateSecretStorageDialog .mx_SettingsFlag_label{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0;font-weight:600}.mx_CreateSecretStorageDialog .mx_ToggleSwitch{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-left:30px}.mx_CreateSecretStorageDialog details .mx_AccessibleButton{margin:1em 0}.mx_CreateSecretStorageDialog .mx_Dialog_title{margin-bottom:1em}.mx_CreateSecretStorageDialog_titleWithIcon:before{content:"";display:inline-block;width:24px;height:24px;margin-right:8px;position:relative;top:5px;background-color:#2e2f32}.mx_CreateSecretStorageDialog_secureBackupTitle:before{-webkit-mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg)}.mx_CreateSecretStorageDialog_securePhraseTitle:before{-webkit-mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg);mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg)}.mx_CreateSecretStorageDialog_centeredBody,.mx_CreateSecretStorageDialog_centeredTitle{text-align:center}.mx_CreateSecretStorageDialog_primaryContainer{padding-top:20px}.mx_CreateSecretStorageDialog_primaryContainer:after{content:"";clear:both;display:block}.mx_CreateSecretStorageDialog_primaryContainer .mx_RadioButton{margin-bottom:16px;padding:11px}.mx_CreateSecretStorageDialog_optionTitle{color:#45474a;font-weight:600;font-size:1.8rem;padding-bottom:10px}.mx_CreateSecretStorageDialog_optionIcon{display:inline-block;width:24px;height:24px;margin-right:8px;position:relative;top:5px;background-color:#2e2f32}.mx_CreateSecretStorageDialog_optionIcon_securePhrase{-webkit-mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg);mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg)}.mx_CreateSecretStorageDialog_optionIcon_secureBackup{-webkit-mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg)}.mx_CreateSecretStorageDialog_passPhraseContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mx_Field.mx_CreateSecretStorageDialog_passPhraseField{margin-top:0}.mx_CreateSecretStorageDialog_passPhraseMatch{width:200px;margin-left:20px}.mx_CreateSecretStorageDialog_recoveryKeyContainer{width:380px;margin-left:auto;margin-right:auto}.mx_CreateSecretStorageDialog_recoveryKey{font-weight:700;text-align:center;padding:20px;color:#888;background-color:#f7f7f7;border-radius:6px;word-spacing:1em;margin-bottom:20px}.mx_CreateSecretStorageDialog_recoveryKeyButtons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton{width:160px;padding-left:0;padding-right:0;white-space:nowrap}.mx_CreateSecretStorageDialog_continueSpinner{margin-top:33px;text-align:right}.mx_CreateSecretStorageDialog_continueSpinner img{width:20px;height:20px}.mx_KeyBackupFailedDialog .mx_Dialog_title{margin-bottom:32px}.mx_KeyBackupFailedDialog_title{position:relative;padding-left:45px;padding-bottom:10px}.mx_KeyBackupFailedDialog_title:before{-webkit-mask:url(../../img/e2e/lock-warning-filled.993fb6c.svg);mask:url(../../img/e2e/lock-warning-filled.993fb6c.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#2e2f32;content:"";position:absolute;top:-6px;right:0;bottom:0;left:0}.mx_KeyBackupFailedDialog .mx_Dialog_buttons{margin-top:36px}.mx_RestoreKeyBackupDialog_keyStatus{height:30px}.mx_RestoreKeyBackupDialog_primaryContainer{padding:20px}.mx_RestoreKeyBackupDialog_passPhraseInput,.mx_RestoreKeyBackupDialog_recoveryKeyInput{width:300px;border:1px solid #0dbd8b;border-radius:5px;padding:10px}.mx_RestoreKeyBackupDialog_content>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;min-height:110px}.mx_NetworkDropdown{height:32px;position:relative;padding-right:32px;margin-left:auto;margin-right:9px;margin-top:12px}.mx_NetworkDropdown,.mx_NetworkDropdown .mx_AccessibleButton{width:-webkit-max-content;width:-moz-max-content;width:max-content}.mx_NetworkDropdown_menu{min-width:204px;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;border:1px solid #c1c1c1;background-color:#fff;max-height:calc(100vh - 20px);overflow-y:auto}.mx_NetworkDropdown_menu_network{font-weight:700}.mx_NetworkDropdown_server{padding:12px 0;border-bottom:1px solid #9fa9ba}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_title{padding:0 10px;font-size:1.5rem;font-weight:600;line-height:2rem;margin-bottom:4px;position:relative}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_title .mx_AccessibleButton{position:absolute;display:inline;right:10px;height:16px;width:16px;margin-top:2px}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_title .mx_AccessibleButton:after{content:"";position:absolute;width:16px;height:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/feather-customised/x.9662221.svg);mask-image:url(../../img/feather-customised/x.9662221.svg);background-color:#ff4b55}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_subtitle{padding:0 10px;font-size:1rem;line-height:1.4rem;margin-top:-4px;margin-bottom:4px;color:#61708b}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_network{font-size:1.2rem;line-height:1.6rem;padding:4px 10px;cursor:pointer;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_network[aria-checked=true]:after{content:"";position:absolute;width:16px;height:16px;right:10px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/feather-customised/check.5745b4e.svg);mask-image:url(../../img/feather-customised/check.5745b4e.svg);background-color:#0dbd8b}.mx_NetworkDropdown_server_add:hover,.mx_NetworkDropdown_server_network:hover{background-color:#f3f8fd}.mx_NetworkDropdown_server_add{padding:16px 10px 16px 32px;position:relative;border-radius:0 0 4px 4px}.mx_NetworkDropdown_server_add:before{content:"";position:absolute;width:16px;height:16px;left:7px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/feather-customised/plus.38ae979.svg);mask-image:url(../../img/feather-customised/plus.38ae979.svg);background-color:#61708b}.mx_NetworkDropdown_handle{position:relative}.mx_NetworkDropdown_handle:after{content:"";position:absolute;width:26px;height:26px;right:-27.5px;top:-3px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);background-color:#2e2f32}.mx_NetworkDropdown_handle .mx_NetworkDropdown_handle_server{color:#61708b;font-size:1.2rem}.mx_NetworkDropdown_dialog .mx_Dialog{width:45vw}.mx_AccessibleButton{cursor:pointer}.mx_AccessibleButton_disabled{cursor:default}.mx_AccessibleButton_hasKind{padding:7px 18px;text-align:center;border-radius:8px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:1.4rem}.mx_AccessibleButton_kind_primary{color:#fff;background-color:#0dbd8b;font-weight:600}.mx_AccessibleButton_kind_primary_outline{color:#0dbd8b;background-color:#fff;border:1px solid #0dbd8b;font-weight:600}.mx_AccessibleButton_kind_secondary{color:#0dbd8b;font-weight:600}.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled,.mx_AccessibleButton_kind_primary_outline.mx_AccessibleButton_disabled{opacity:.4}.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm{padding:5px 12px;color:#fff;background-color:#0dbd8b}.mx_AccessibleButton_kind_primary_sm.mx_AccessibleButton_disabled{opacity:.4}.mx_AccessibleButton_kind_danger{color:#fff;background-color:#ff4b55}.mx_AccessibleButton_kind_danger_outline{color:#ff4b55;background-color:#fff;border:1px solid #ff4b55}.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled{color:#fff;background-color:#f5b6bb}.mx_AccessibleButton_kind_danger_outline.mx_AccessibleButton_disabled{color:#f5b6bb;border-color:#f5b6bb}.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm{padding:5px 12px;color:#fff;background-color:#ff4b55}.mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled{color:#fff;background-color:#f5b6bb}.mx_AccessibleButton_kind_link{color:#0dbd8b;background-color:transparent}.mx_AccessibleButton_kind_link.mx_AccessibleButton_disabled{opacity:.4}.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link_sm{padding:5px 12px;color:#0dbd8b;background-color:transparent}.mx_AccessibleButton_kind_link_sm.mx_AccessibleButton_disabled{opacity:.4}.mx_AddressSelector{position:absolute;background-color:#fff;width:485px;max-height:116px;overflow-y:auto;border-radius:3px;border:1px solid #0dbd8b;cursor:pointer;z-index:1}.mx_AddressSelector.mx_AddressSelector_empty{display:none}.mx_AddressSelector_addressListElement .mx_AddressTile{background-color:#fff;border:1px solid #fff}.mx_AddressSelector_addressListElement.mx_AddressSelector_selected{background-color:#f2f5f8}.mx_AddressSelector_addressListElement.mx_AddressSelector_selected .mx_AddressTile{background-color:#f2f5f8;border:1px solid #f2f5f8}.mx_AddressTile{display:inline-block;border-radius:3px;background-color:rgba(74,73,74,.1);border:1px solid #e7e7e7;line-height:2.6rem;color:#2e2f32;font-size:1.4rem;font-weight:400;margin-right:4px}.mx_AddressTile.mx_AddressTile_error{background-color:rgba(255,0,100,.1);color:#ff4b55;border-color:#ff4b55}.mx_AddressTile_network{padding-right:4px}.mx_AddressTile_avatar,.mx_AddressTile_network{display:inline-block;position:relative;padding-left:2px;vertical-align:middle}.mx_AddressTile_avatar{padding-right:7px}.mx_AddressTile_mx{display:inline-block;margin:0;border:0;padding:0}.mx_AddressTile_name{display:inline-block;padding-right:4px;font-weight:600;overflow:hidden;height:26px;vertical-align:middle}.mx_AddressTile_name.mx_AddressTile_justified{width:180px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_id{display:inline-block;padding-right:11px}.mx_AddressTile_id.mx_AddressTile_justified{width:200px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_unknownMx{display:inline-block;font-weight:600;padding-right:11px}.mx_AddressTile_unknownMxl.mx_AddressTile_justified{width:380px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_email{display:inline-block;font-weight:600;padding-right:11px}.mx_AddressTile_email.mx_AddressTile_justified{width:200px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_unknown{display:inline-block;padding-right:11px}.mx_AddressTile_unknown.mx_AddressTile_justified{width:380px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_dismiss{display:inline-block;padding-right:11px;padding-left:1px;cursor:pointer}.mx_AddressTile_dismiss object{pointer-events:none}.mx_DesktopBuildsNotice{text-align:center;padding:0 16px}.mx_DesktopBuildsNotice>*{vertical-align:middle}.mx_DesktopBuildsNotice>img{margin-right:8px}.mx_desktopCapturerSourcePicker{overflow:hidden}.mx_desktopCapturerSourcePicker_tabLabels{display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 0 8px}.mx_desktopCapturerSourcePicker_tabLabel,.mx_desktopCapturerSourcePicker_tabLabel_selected{width:100%;text-align:center;border-radius:8px;padding:8px 0;font-size:1.3rem}.mx_desktopCapturerSourcePicker_tabLabel_selected{background-color:#0dbd8b;color:#fff}.mx_desktopCapturerSourcePicker_panel{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;height:500px;overflow:overlay}.mx_desktopCapturerSourcePicker_stream_button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:8px;border-radius:4px}.mx_desktopCapturerSourcePicker_stream_button:focus,.mx_desktopCapturerSourcePicker_stream_button:hover{background:#fff}.mx_desktopCapturerSourcePicker_stream_thumbnail{margin:4px;width:312px}.mx_desktopCapturerSourcePicker_stream_name{margin:0 4px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:312px}.mx_DirectorySearchBox{display:-webkit-box;display:-ms-flexbox;display:flex;padding-left:9px;padding-right:9px}.mx_DirectorySearchBox_joinButton{display:table-cell;padding:3px 10px;background-color:#f2f5f8;border-radius:3px;background-image:url(../../img/icon-return.cb24475.svg);background-position:8px 70%;background-repeat:no-repeat;text-indent:18px;font-weight:600;font-size:1.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.mx_DirectorySearchBox_clear{background-color:#ff4b55;-webkit-mask:url(../../img/cancel.4b9715b.svg);mask:url(../../img/cancel.4b9715b.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:10px;mask-size:10px;width:15px;height:15px;cursor:pointer}.mx_Dropdown{position:relative;color:#2e2f32}.mx_Dropdown_disabled{opacity:.3}.mx_Dropdown_input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;border-radius:3px;border:1px solid #c7c7c7;font-size:1.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_Dropdown_input.mx_AccessibleButton_disabled{cursor:not-allowed}.mx_Dropdown_input:focus{border-color:#238cf5}.mx_Dropdown_input.mx_AccessibleButton:focus{-webkit-filter:none;filter:none}.mx_Dropdown_arrow{width:10px;height:6px;padding-right:9px;-webkit-mask:url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);mask:url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#2e2f32}.mx_Dropdown_option{height:35px;line-height:3.5rem;padding-left:8px;padding-right:8px}.mx_Dropdown_input>.mx_Dropdown_option{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_Dropdown_input>.mx_Dropdown_option,.mx_Dropdown_option div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mx_Dropdown_option .mx_Dropdown_option_emoji,.mx_Dropdown_option img{margin:5px;width:16px;vertical-align:middle}.mx_Dropdown_option_emoji{font-size:1.6rem;line-height:1.6rem}input.mx_Dropdown_option,input.mx_Dropdown_option:focus{font-weight:400;border:0;padding-top:0;padding-bottom:0;width:60%}.mx_Dropdown_menu{position:absolute;left:-1px;right:-1px;top:100%;z-index:2;margin:0;padding:0;border-radius:3px;border:1px solid #238cf5;background-color:#fff;max-height:200px;overflow-y:auto}.mx_Dropdown_menu .mx_Dropdown_option{height:auto;min-height:35px}.mx_Dropdown_menu .mx_Dropdown_option_highlight{background-color:#ddd}.mx_Dropdown_searchPrompt{font-weight:400;margin-left:5px;margin-bottom:5px}.mx_EditableItemList{margin-top:12px;margin-bottom:10px}.mx_EditableItem{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:5px}.mx_EditableItem_delete{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3;margin-right:5px;cursor:pointer;vertical-align:middle;width:14px;height:14px;-webkit-mask-image:url(../../img/feather-customised/cancel.23c2689.svg);mask-image:url(../../img/feather-customised/cancel.23c2689.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#ff4b55;-webkit-mask-size:100%;mask-size:100%}.mx_EditableItem_email{vertical-align:middle}.mx_EditableItem_promptText{margin-right:10px;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.mx_EditableItem_confirmBtn{margin-right:5px}.mx_EditableItem_item{-webkit-box-flex:1;-ms-flex:auto 1 0px;flex:auto 1 0;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;width:calc(100% - 14px);overflow-x:hidden;text-overflow:ellipsis}.mx_EditableItemList_label{margin-bottom:5px}.mx_ErrorBoundary{width:100%;height:100%;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_ErrorBoundary,.mx_ErrorBoundary_body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_ErrorBoundary_body{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-width:400px}.mx_ErrorBoundary_body .mx_AccessibleButton{margin-top:5px}.mx_EventListSummary{position:relative}.mx_TextualEvent.mx_EventListSummary_summary{font-size:1.4rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mx_EventListSummary_avatars{display:inline-block;margin-right:8px;padding-top:8px;line-height:1.2rem}.mx_EventListSummary_avatars .mx_BaseAvatar{margin-right:-4px;cursor:pointer}.mx_EventListSummary_toggle{color:#0dbd8b;cursor:pointer;float:right;margin-right:10px;margin-top:8px}.mx_EventListSummary_line{border-bottom:1px solid transparent;margin-left:63px;line-height:3rem}.mx_MatrixChat_useCompactLayout .mx_EventListSummary{font-size:1.3rem}.mx_MatrixChat_useCompactLayout .mx_EventListSummary .mx_EventTile_line{line-height:2rem}.mx_MatrixChat_useCompactLayout .mx_EventListSummary_line{line-height:2.2rem}.mx_MatrixChat_useCompactLayout .mx_EventListSummary_toggle{margin-top:3px}.mx_MatrixChat_useCompactLayout .mx_TextualEvent.mx_EventListSummary_summary{font-size:1.3rem}.mx_FacePile .mx_FacePile_faces{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;vertical-align:middle}.mx_FacePile .mx_FacePile_faces>.mx_FacePile_face+.mx_FacePile_face{margin-right:-8px}.mx_FacePile .mx_FacePile_faces .mx_BaseAvatar_image{border:1px solid #fff}.mx_FacePile .mx_FacePile_faces .mx_BaseAvatar_initial{margin:1px}.mx_FacePile .mx_FacePile_faces .mx_FacePile_more{position:relative;border-radius:100%;width:30px;height:30px;background-color:hsla(0,0%,91%,.77)}.mx_FacePile .mx_FacePile_faces .mx_FacePile_more:before{content:"";z-index:1;position:absolute;top:0;left:0;height:inherit;width:inherit;background:#8d99a5;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:20px;mask-size:20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg)}.mx_FacePile .mx_FacePile_summary{margin-left:12px;font-size:1.4rem;line-height:2.4rem;color:#8d99a5}.mx_Field{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0;position:relative;margin:1em 0;border-radius:4px;-webkit-transition:border-color .25s;transition:border-color .25s;border:1px solid #e7e7e7}.mx_Field_prefix{border-right:1px solid #e7e7e7}.mx_Field_postfix{border-left:1px solid #e7e7e7}.mx_Field input,.mx_Field select,.mx_Field textarea{font-weight:400;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;border:none;border-radius:4px;padding:8px 9px;color:#2e2f32;background-color:#fff;-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.mx_Field select{-moz-appearance:none;-webkit-appearance:none}.mx_Field_select:before{content:"";position:absolute;top:15px;right:10px;width:10px;height:6px;-webkit-mask:url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);mask:url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#2e2f32;z-index:1;pointer-events:none}.mx_Field:focus-within{border-color:#238cf5}.mx_Field input:focus,.mx_Field select:focus,.mx_Field textarea:focus{outline:0}.mx_Field input::-webkit-input-placeholder,.mx_Field textarea::-webkit-input-placeholder{-webkit-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input::-moz-placeholder,.mx_Field textarea::-moz-placeholder{-moz-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input:-ms-input-placeholder,.mx_Field textarea:-ms-input-placeholder{-ms-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input::-ms-input-placeholder,.mx_Field textarea::-ms-input-placeholder{-ms-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input::placeholder,.mx_Field textarea::placeholder{-webkit-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input:placeholder-shown:focus::-webkit-input-placeholder,.mx_Field textarea:placeholder-shown:focus::-webkit-input-placeholder{-webkit-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:placeholder-shown:focus::-moz-placeholder,.mx_Field textarea:placeholder-shown:focus::-moz-placeholder{-moz-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:placeholder-shown:focus:-ms-input-placeholder,.mx_Field textarea:placeholder-shown:focus:-ms-input-placeholder{-ms-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:placeholder-shown:focus::-ms-input-placeholder,.mx_Field textarea:placeholder-shown:focus::-ms-input-placeholder{-ms-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:-moz-placeholder-shown:focus::placeholder,.mx_Field textarea:-moz-placeholder-shown:focus::placeholder{-moz-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:-ms-input-placeholder:focus::placeholder,.mx_Field textarea:-ms-input-placeholder:focus::placeholder{-ms-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:placeholder-shown:focus::placeholder,.mx_Field textarea:placeholder-shown:focus::placeholder{-webkit-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field label{-webkit-transition:font-size .25s ease-out .1s,color .25s ease-out .1s,top .25s ease-out .1s,background-color .25s ease-out .1s;transition:font-size .25s ease-out .1s,color .25s ease-out .1s,top .25s ease-out .1s,background-color .25s ease-out .1s;color:#2e2f32;background-color:transparent;font-size:1.4rem;position:absolute;left:0;top:0;margin:7px 8px;padding:2px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:calc(100% - 20px)}.mx_Field input:not(:-moz-placeholder-shown)+label,.mx_Field textarea:not(:-moz-placeholder-shown)+label{-moz-transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;font-size:1rem;top:-13px;padding:0 2px;background-color:#fff;pointer-events:auto}.mx_Field input:not(:-ms-input-placeholder)+label,.mx_Field textarea:not(:-ms-input-placeholder)+label{-ms-transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;font-size:1rem;top:-13px;padding:0 2px;background-color:#fff;pointer-events:auto}.mx_Field_labelAlwaysTopLeft label,.mx_Field input:focus+label,.mx_Field input:not(:placeholder-shown)+label,.mx_Field select+label,.mx_Field textarea:focus+label,.mx_Field textarea:not(:placeholder-shown)+label{-webkit-transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;font-size:1rem;top:-13px;padding:0 2px;background-color:#fff;pointer-events:auto}.mx_Field input:focus+label,.mx_Field select:focus+label,.mx_Field textarea:focus+label{color:#238cf5}.mx_Field input:disabled,.mx_Field input:disabled+label,.mx_Field select:disabled,.mx_Field select:disabled+label,.mx_Field textarea:disabled,.mx_Field textarea:disabled+label{background-color:#fff;color:#888}.mx_Field_valid.mx_Field,.mx_Field_valid.mx_Field:focus-within{border-color:#0dbd8b}.mx_Field_valid.mx_Field:focus-within label,.mx_Field_valid.mx_Field label{color:#0dbd8b}.mx_Field_invalid.mx_Field,.mx_Field_invalid.mx_Field:focus-within{border-color:#ff4b55}.mx_Field_invalid.mx_Field:focus-within label,.mx_Field_invalid.mx_Field label{color:#ff4b55}.mx_Field_tooltip{margin-top:-12px;margin-left:4px;width:200px}.mx_Field_tooltip.mx_Field_valid{-webkit-animation:mx_fadeout 1s 2s forwards;animation:mx_fadeout 1s 2s forwards}.mx_Field .mx_Dropdown_input{border:initial;border-radius:0;border-radius:initial}.mx_Field .mx_CountryDropdown{width:7.8rem}.mx_FormButton{line-height:1.6rem;padding:5px 15px;font-size:1.2rem;height:-webkit-min-content;height:-moz-min-content;height:min-content}.mx_FormButton:not(:last-child){margin-right:8px}.mx_FormButton.mx_AccessibleButton_kind_primary{color:#0dbd8b;background-color:rgba(3,179,129,.16)}.mx_FormButton.mx_AccessibleButton_kind_danger{color:#ff4b55;background-color:rgba(255,75,85,.16)}.mx_FormButton.mx_AccessibleButton_kind_secondary{color:#737d8c;border:1px solid #737d8c;background-color:unset}.mx_ImageView{width:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_ImageView,.mx_ImageView_image_wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%}.mx_ImageView_image_wrapper{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.mx_ImageView_image{pointer-events:all;-ms-flex-negative:0;flex-shrink:0}.mx_ImageView_panel{width:100%;height:68px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mx_ImageView_info_wrapper,.mx_ImageView_panel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_ImageView_info_wrapper{pointer-events:all;padding-left:32px;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;color:#fff}.mx_ImageView_info{padding-left:12px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_ImageView_info_sender{font-weight:700}.mx_ImageView_toolbar{padding-right:16px;pointer-events:all;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_ImageView_button{margin-left:24px;display:block}.mx_ImageView_button:before{content:"";height:22px;width:22px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;display:block;background-color:#c1c6cd}.mx_ImageView_button_rotateCW:before{-webkit-mask-image:url(../../img/image-view/rotate-cw.60d903e.svg);mask-image:url(../../img/image-view/rotate-cw.60d903e.svg)}.mx_ImageView_button_rotateCCW:before{-webkit-mask-image:url(../../img/image-view/rotate-ccw.b28ae4a.svg);mask-image:url(../../img/image-view/rotate-ccw.b28ae4a.svg)}.mx_ImageView_button_zoomOut:before{-webkit-mask-image:url(../../img/image-view/zoom-out.8506f80.svg);mask-image:url(../../img/image-view/zoom-out.8506f80.svg)}.mx_ImageView_button_zoomIn:before{-webkit-mask-image:url(../../img/image-view/zoom-in.3b3f32e.svg);mask-image:url(../../img/image-view/zoom-in.3b3f32e.svg)}.mx_ImageView_button_download:before{-webkit-mask-image:url(../../img/image-view/download.2eac468.svg);mask-image:url(../../img/image-view/download.2eac468.svg)}.mx_ImageView_button_more:before{-webkit-mask-image:url(../../img/image-view/more.0427c6c.svg);mask-image:url(../../img/image-view/more.0427c6c.svg)}.mx_ImageView_button_close{border-radius:100%;background:#21262c}.mx_ImageView_button_close:before{width:32px;height:32px;-webkit-mask-image:url(../../img/image-view/close.97d1731.svg);mask-image:url(../../img/image-view/close.97d1731.svg);-webkit-mask-size:40%;mask-size:40%}.mx_InfoTooltip_icon,.mx_InfoTooltip_icon:before{width:16px;height:16px;display:inline-block}.mx_InfoTooltip_icon:before{background-color:#61708b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-position:center;mask-position:center;content:"";vertical-align:middle;-webkit-mask-image:url(../../img/element-icons/info.dc07e19.svg);mask-image:url(../../img/element-icons/info.dc07e19.svg)}.mx_InlineSpinner{display:inline}.mx_InlineSpinner_spin img{margin:0 6px;vertical-align:-3px}.mx_InviteReason{position:relative;margin-bottom:1em}.mx_InviteReason .mx_InviteReason_reason{visibility:visible}.mx_InviteReason .mx_InviteReason_view{display:none;position:absolute;top:0;bottom:0;left:0;right:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;color:#737d8c}.mx_InviteReason .mx_InviteReason_view:before{content:"";margin-right:8px;background-color:#737d8c;-webkit-mask-image:url(../../img/feather-customised/eye.52aa0d2.svg);mask-image:url(../../img/feather-customised/eye.52aa0d2.svg);display:inline-block;width:18px;height:14px}.mx_InviteReason_hidden .mx_InviteReason_reason{visibility:hidden}.mx_InviteReason_hidden .mx_InviteReason_view{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_ManageIntegsButton_error{position:relative;float:right;cursor:not-allowed}.mx_ManageIntegsButton_error img{position:absolute;right:-5px;top:-5px}.mx_ManageIntegsButton_errorPopup{position:absolute;top:110%;left:-275%;width:550%;padding:30%;font-size:10pt;line-height:1.5em;border-radius:5px;background-color:#0dbd8b;color:#fff;text-align:center;z-index:1000}.mx_ManageIntegsButton_error .mx_ManageIntegsButton_errorPopup{display:none}.mx_ManageIntegsButton_error:hover .mx_ManageIntegsButton_errorPopup{display:inline}.mx_MiniAvatarUploader{position:relative;width:-webkit-min-content;width:-moz-min-content;width:min-content}.mx_MiniAvatarUploader .mx_Tooltip{display:inline-block;position:absolute;z-index:unset;width:-webkit-max-content;width:-moz-max-content;width:max-content;left:72px;top:0}.mx_MiniAvatarUploader:after,.mx_MiniAvatarUploader:before{content:"";position:absolute;height:26px;width:26px;right:-6px;bottom:-6px}.mx_MiniAvatarUploader:before{background-color:#fff;border-radius:50%;z-index:1}.mx_MiniAvatarUploader:after{background-color:#737d8c;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/camera.a81a395.svg);mask-image:url(../../img/element-icons/camera.a81a395.svg);-webkit-mask-size:16px;mask-size:16px;z-index:2}.mx_MiniAvatarUploader.mx_MiniAvatarUploader_busy:after{background:url(../../img/spinner.0b29ec9.gif) no-repeat 50%;background-size:80%;-webkit-mask:unset;mask:unset}.mx_MiniAvatarUploader_input{display:none}.mx_PowerSelector{width:100%}.mx_PowerSelector .mx_Field input,.mx_PowerSelector .mx_Field select{-webkit-box-sizing:border-box;box-sizing:border-box}progress.mx_ProgressBar{height:6px;width:60px;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:6px}progress.mx_ProgressBar::-moz-progress-bar{border-radius:6px}progress.mx_ProgressBar::-webkit-progress-bar,progress.mx_ProgressBar::-webkit-progress-value{border-radius:6px}progress.mx_ProgressBar{color:#0dbd8b}progress.mx_ProgressBar::-moz-progress-bar{background-color:#0dbd8b}progress.mx_ProgressBar::-webkit-progress-value{background-color:#0dbd8b}progress.mx_ProgressBar{background-color:rgba(141,151,165,.2)}progress.mx_ProgressBar::-webkit-progress-bar{background-color:rgba(141,151,165,.2)}progress.mx_ProgressBar ::-webkit-progress-value{-webkit-transition:width 1s;transition:width 1s}progress.mx_ProgressBar ::-moz-progress-bar{-moz-transition:padding-bottom 1s;transition:padding-bottom 1s;padding-bottom:var(--value);transform-origin:0 0;transform:rotate(-90deg) translateX(-15px);padding-left:15px;height:0}.mx_QRCode img{border-radius:8px}.mx_ReplyThread{margin-top:0}.mx_ReplyThread .mx_DateSeparator{font-size:1em!important;margin-top:0;margin-bottom:0;padding-bottom:1px;bottom:-5px}.mx_ReplyThread_show{cursor:pointer}blockquote.mx_ReplyThread{margin-left:0;padding-left:10px;border-left:4px solid #ddd}.mx_ResizeHandle{cursor:row-resize;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;z-index:100}.mx_ResizeHandle.mx_ResizeHandle_horizontal{margin:0 -5px;padding:0 5px;cursor:col-resize}.mx_ResizeHandle.mx_ResizeHandle_vertical{margin:-5px 0;padding:5px 0;cursor:row-resize}.mx_MatrixChat>.mx_ResizeHandle.mx_ResizeHandle_horizontal{margin:0 -10px 0 0;padding:0 8px 0 0}.mx_ResizeHandle>div{background:transparent}.mx_ResizeHandle.mx_ResizeHandle_horizontal>div{width:1px;height:100%}.mx_ResizeHandle.mx_ResizeHandle_vertical>div{height:1px}.mx_AtRoomPill,.mx_GroupPill,.mx_RoomPill,.mx_UserPill{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:middle;border-radius:1.6rem;line-height:1.5rem;padding-left:0}a.mx_Pill{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 1ch)}.mx_Pill{padding:.1rem .4em .1rem .1rem;vertical-align:text-top;line-height:1.7rem}.mx_EventTile_content .markdown-body a.mx_GroupPill,.mx_GroupPill{color:#fff;background-color:#aaa}.mx_EventTile_content .markdown-body a.mx_Pill{text-decoration:none}.mx_EventTile_content .markdown-body a.mx_UserPill,.mx_UserPill{color:#2e2f32;background-color:rgba(0,0,0,.1)}.mx_UserPill_selected{background-color:#0dbd8b!important}.mx_EventTile_content .markdown-body a.mx_AtRoomPill,.mx_EventTile_content .mx_AtRoomPill,.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me,.mx_MessageComposer_input .mx_AtRoomPill{color:#fff;background-color:#ff4b55}.mx_EventTile_content .markdown-body a.mx_GroupPill,.mx_EventTile_content .markdown-body a.mx_RoomPill,.mx_GroupPill,.mx_RoomPill{color:#fff;background-color:#aaa}.mx_EventTile_body .mx_GroupPill,.mx_EventTile_body .mx_RoomPill,.mx_EventTile_body .mx_UserPill{cursor:pointer}.mx_AtRoomPill .mx_BaseAvatar,.mx_GroupPill .mx_BaseAvatar,.mx_RoomPill .mx_BaseAvatar,.mx_UserPill .mx_BaseAvatar{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:10rem;margin-right:.24rem}.mx_Markdown_BOLD{font-weight:700}.mx_Markdown_ITALIC{font-style:italic}.mx_Markdown_CODE{padding:.2em 0;margin:0;font-size:85%;background-color:rgba(0,0,0,.04);border-radius:3px}.mx_Markdown_HR{display:block;background:#e9e9e9}.mx_Markdown_STRIKETHROUGH{text-decoration:line-through}.mx_RoleButton{margin-left:4px;margin-right:4px;cursor:pointer;display:inline-block}.mx_RoleButton object{pointer-events:none}.mx_RoleButton_tooltip{display:inline-block;position:relative;top:-25px;left:6px}.mx_RoomAliasField{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;min-width:0;max-width:100%}.mx_RoomAliasField input{width:150px;padding-left:0;padding-right:0}.mx_RoomAliasField input::-webkit-input-placeholder{color:#888;font-weight:400}.mx_RoomAliasField input::-moz-placeholder{color:#888;font-weight:400}.mx_RoomAliasField input:-ms-input-placeholder{color:#888;font-weight:400}.mx_RoomAliasField input::-ms-input-placeholder{color:#888;font-weight:400}.mx_RoomAliasField input::placeholder{color:#888;font-weight:400}.mx_RoomAliasField .mx_Field_postfix,.mx_RoomAliasField .mx_Field_prefix{color:#888;border-left:none;border-right:none;font-weight:600;padding:9px 10px;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_RoomAliasField .mx_Field_postfix{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 180px)}.mx_SSOButtons{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_SSOButtons .mx_SSOButtons_row+.mx_SSOButtons_row{margin-top:16px}.mx_SSOButtons .mx_SSOButton{position:relative;width:100%;padding:7px 32px;text-align:center;border-radius:8px;display:inline-block;font-size:1.4rem;font-weight:600;border:1px solid #e7e7e7;color:#2e2f32}.mx_SSOButtons .mx_SSOButton>img{-o-object-fit:contain;object-fit:contain;position:absolute;left:8px;top:4px}.mx_SSOButtons .mx_SSOButton_default{color:#0dbd8b;background-color:#fff;border-color:#0dbd8b}.mx_SSOButtons .mx_SSOButton_default.mx_SSOButton_primary{color:#fff;background-color:#0dbd8b}.mx_SSOButtons .mx_SSOButton_mini{-webkit-box-sizing:border-box;box-sizing:border-box;width:50px;height:50px;min-width:50px;padding:12px}.mx_SSOButtons .mx_SSOButton_mini>img{left:12px;top:12px}.mx_SSOButtons .mx_SSOButton_mini+.mx_SSOButton_mini{margin-left:16px}.mx_ServerPicker{margin-bottom:14px;border-bottom:1px solid rgba(141,151,165,.2);display:grid;grid-template-columns:auto -webkit-min-content;grid-template-columns:auto min-content;grid-template-rows:auto auto auto;font-size:1.4rem;line-height:2rem}.mx_ServerPicker>h3{font-weight:600;margin:0 0 20px;grid-column:1;grid-row:1}.mx_ServerPicker .mx_ServerPicker_help{width:20px;height:20px;background-color:#c1c6cd;border-radius:10px;grid-column:2;grid-row:1;margin-left:auto;text-align:center;color:#fff;font-size:16px;position:relative}.mx_ServerPicker .mx_ServerPicker_help:before{content:"";width:24px;height:24px;position:absolute;top:-2px;left:-2px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/i.80d84f3.svg);mask-image:url(../../img/element-icons/i.80d84f3.svg);background:#fff}.mx_ServerPicker .mx_ServerPicker_server{color:#232f32;grid-column:1;grid-row:2;margin-bottom:16px}.mx_ServerPicker .mx_ServerPicker_change{padding:0;font-size:inherit;grid-column:2;grid-row:2}.mx_ServerPicker .mx_ServerPicker_desc{margin-top:-12px;color:#8d99a5;grid-column:1/2;grid-row:3;margin-bottom:16px}.mx_ServerPicker_helpDialog .mx_Dialog_content{width:456px}.mx_Slider{position:relative;margin:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_Slider_dotContainer{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mx_Slider_bar,.mx_Slider_dotContainer{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_Slider_bar{-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;height:1em;width:100%;padding:0 .5em;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_Slider_bar>hr{width:100%;height:.4em;background-color:#c1c9d6;border:0}.mx_Slider_selection{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:calc(100% - 1em);height:1em;position:absolute;pointer-events:none}.mx_Slider_selectionDot{position:absolute;width:1.1em;height:1.1em;background-color:#0dbd8b;border-radius:50%;-webkit-box-shadow:0 0 6px #d3d3d3;box-shadow:0 0 6px #d3d3d3;z-index:10}.mx_Slider_selection>hr{margin:0;border:.2em solid #0dbd8b}.mx_Slider_dot{height:1em;width:1em;border-radius:50%;background-color:#c1c9d6;z-index:0}.mx_Slider_dotActive{background-color:#0dbd8b}.mx_Slider_dotValue{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#c1c9d6}.mx_Slider_labelContainer{width:1em}.mx_Slider_label{position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;left:-50%}.mx_Spinner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_MatrixChat_middlePanel .mx_Spinner{height:auto}.mx_Checkbox{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mx_Checkbox input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0}.mx_Checkbox input[type=checkbox]+label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_Checkbox input[type=checkbox]+label>.mx_Checkbox_background{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-negative:0;flex-shrink:0;height:1.6rem;width:1.6rem;size:.5rem;border:.15rem solid rgba(97,112,139,.5);-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:.4rem}.mx_Checkbox input[type=checkbox]+label>.mx_Checkbox_background img{display:none;height:100%;width:100%;-webkit-filter:invert(100%);filter:invert(100%)}.mx_Checkbox input[type=checkbox]:checked+label>.mx_Checkbox_background{background:#0dbd8b;border-color:#0dbd8b}.mx_Checkbox input[type=checkbox]:checked+label>.mx_Checkbox_background img{display:block}.mx_Checkbox input[type=checkbox]+label>:not(.mx_Checkbox_background){margin-left:10px}.mx_Checkbox input[type=checkbox]:disabled+label{opacity:.5;cursor:not-allowed}.mx_Checkbox input[type=checkbox]:checked:disabled+label>.mx_Checkbox_background{background-color:#0dbd8b;border-color:#0dbd8b}.mx_Checkbox input[type=checkbox].focus-visible+label .mx_Checkbox_background{outline-width:2px;outline-style:solid;outline-color:Highlight}@media (-webkit-min-device-pixel-ratio:0){.mx_Checkbox input[type=checkbox].focus-visible+label .mx_Checkbox_background{outline-color:-webkit-focus-ring-color;outline-style:auto}}.mx_RadioButton{position:relative;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.mx_RadioButton,.mx_RadioButton>.mx_RadioButton_content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_RadioButton>.mx_RadioButton_content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-left:8px;margin-right:8px}.mx_RadioButton .mx_RadioButton_spacer{-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;height:1.6rem;width:1.6rem}.mx_RadioButton>input[type=radio]{margin:0;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.mx_RadioButton>input[type=radio]+div{-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;height:1.6rem;width:1.6rem;margin-left:2px;border:.15rem solid #61708b;border-radius:1.6rem}.mx_RadioButton>input[type=radio]+div>div{-webkit-box-sizing:border-box;box-sizing:border-box;height:.8rem;width:.8rem;border-radius:.8rem}.mx_RadioButton>input[type=radio].focus-visible+div{outline-width:2px;outline-style:solid;outline-color:Highlight}@media (-webkit-min-device-pixel-ratio:0){.mx_RadioButton>input[type=radio].focus-visible+div{outline-color:-webkit-focus-ring-color;outline-style:auto}}.mx_RadioButton>input[type=radio]:checked+div{border-color:#0dbd8b}.mx_RadioButton>input[type=radio]:checked+div>div{background:#0dbd8b}.mx_RadioButton>input[type=radio]:disabled+div,.mx_RadioButton>input[type=radio]:disabled+div+span{opacity:.5;cursor:not-allowed}.mx_RadioButton>input[type=radio]:disabled+div{border-color:#61708b}.mx_RadioButton>input[type=radio]:checked:disabled+div>div{background-color:#61708b}.mx_RadioButton_outlined{border:1px solid #e3e8f0;border-radius:8px}.mx_RadioButton_checked{border-color:#0dbd8b}.mx_SyntaxHighlight{background:none!important;color:#747474!important}.mx_TextWithTooltip_tooltip{display:none}.mx_ToggleSwitch{-webkit-transition:background-color .2s ease-out .1s;transition:background-color .2s ease-out .1s;width:4.4rem;height:2rem;border-radius:1.5rem;padding:2px;background-color:#c1c9d6;opacity:.5}.mx_ToggleSwitch_enabled{cursor:pointer;opacity:1}.mx_ToggleSwitch.mx_ToggleSwitch_on{background-color:#0dbd8b}.mx_ToggleSwitch.mx_ToggleSwitch_on>.mx_ToggleSwitch_ball{left:calc(100% - 2rem)}.mx_ToggleSwitch_ball{position:relative;width:2rem;height:2rem;border-radius:2rem;background-color:#fff;-webkit-transition:left .15s ease-out .1s;transition:left .15s ease-out .1s;left:0}@-webkit-keyframes mx_fadein{0%{opacity:0}to{opacity:1}}@keyframes mx_fadein{0%{opacity:0}to{opacity:1}}@-webkit-keyframes mx_fadeout{0%{opacity:1}to{opacity:0}}@keyframes mx_fadeout{0%{opacity:1}to{opacity:0}}.mx_Tooltip_chevron{position:absolute;left:-7px;top:10px;width:0;height:0;border-top:7px solid transparent;border-right:7px solid #e7e7e7;border-bottom:7px solid transparent}.mx_Tooltip_chevron:after{content:"";width:0;height:0;border-top:6px solid transparent;border-right:6px solid #fff;border-bottom:6px solid transparent;position:absolute;top:-6px;left:1px}.mx_Tooltip{position:fixed;border-radius:8px;-webkit-box-shadow:4px 4px 12px 0 rgba(118,131,156,.6);box-shadow:4px 4px 12px 0 rgba(118,131,156,.6);z-index:6000;padding:10px;pointer-events:none;line-height:1.4rem;font-size:1.2rem;font-weight:500;max-width:200px;word-break:break-word;margin-right:50px;background-color:#27303a;color:#fff;border:0;text-align:center}.mx_Tooltip,.mx_Tooltip .mx_Tooltip_chevron{display:none}.mx_Tooltip.mx_Tooltip_visible{-webkit-animation:mx_fadein .2s forwards;animation:mx_fadein .2s forwards}.mx_Tooltip.mx_Tooltip_invisible{-webkit-animation:mx_fadeout .1s forwards;animation:mx_fadeout .1s forwards}.mx_Field_tooltip{background-color:#fff;color:#2e2f32;border:1px solid #e7e7e7;text-align:unset}.mx_Field_tooltip .mx_Tooltip_chevron{display:unset}.mx_Tooltip_title{font-weight:600}.mx_Tooltip_sub{opacity:.7;margin-top:4px}.mx_TooltipButton{display:inline-block;width:11px;height:11px;margin-left:5px;border:2px solid #dbdbdb;border-radius:20px;color:#dbdbdb;-webkit-transition:opacity .2s ease-in;transition:opacity .2s ease-in;opacity:.6;line-height:1.1rem;text-align:center;cursor:pointer}.mx_TooltipButton:hover{opacity:1}.mx_TooltipButton_container{position:relative;top:-18px;left:4px}.mx_TooltipButton_helpText{width:400px;text-align:start;line-height:17px!important}.mx_Validation{position:relative}.mx_Validation_details{padding-left:20px;margin:0}.mx_Validation_description+.mx_Validation_details{margin:1em 0 0}.mx_Validation_detail{position:relative;font-weight:400;list-style:none;margin-bottom:.5em}.mx_Validation_detail:last-child{margin-bottom:0}.mx_Validation_detail:before{content:"";position:absolute;width:14px;height:14px;top:0;left:-18px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.mx_Validation_detail.mx_Validation_valid{color:#0dbd8b}.mx_Validation_detail.mx_Validation_valid:before{-webkit-mask-image:url(../../img/feather-customised/check.5745b4e.svg);mask-image:url(../../img/feather-customised/check.5745b4e.svg);background-color:#0dbd8b}.mx_Validation_detail.mx_Validation_invalid{color:#ff4b55}.mx_Validation_detail.mx_Validation_invalid:before{-webkit-mask-image:url(../../img/feather-customised/x.9662221.svg);mask-image:url(../../img/feather-customised/x.9662221.svg);background-color:#ff4b55}.mx_EmojiPicker{width:340px;height:450px;border-radius:4px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_EmojiPicker_body{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-y:scroll;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.mx_EmojiPicker_header{padding:4px 8px 0;border-bottom:1px solid #e9edf1}.mx_EmojiPicker_anchor{padding:8px 8px 6px;border:none;border-bottom:2px solid transparent;background-color:transparent;border-radius:4px 4px 0 0;width:36px;height:38px}.mx_EmojiPicker_anchor:not(:disabled){cursor:pointer}.mx_EmojiPicker_anchor:not(:disabled):hover{background-color:#ddd;border-bottom:2px solid #0dbd8b}.mx_EmojiPicker_anchor:before{background-color:#2e2f32;content:"";display:inline-block;-webkit-mask-size:100%;mask-size:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;width:100%;height:100%}.mx_EmojiPicker_anchor:disabled:before{background-color:#ddd}.mx_EmojiPicker_anchor_activity:before{-webkit-mask-image:url(../../img/emojipicker/activity.921ec9f.svg);mask-image:url(../../img/emojipicker/activity.921ec9f.svg)}.mx_EmojiPicker_anchor_custom:before{-webkit-mask-image:url(../../img/emojipicker/custom.e1cd0fd.svg);mask-image:url(../../img/emojipicker/custom.e1cd0fd.svg)}.mx_EmojiPicker_anchor_flags:before{-webkit-mask-image:url(../../img/emojipicker/flags.1a8855e.svg);mask-image:url(../../img/emojipicker/flags.1a8855e.svg)}.mx_EmojiPicker_anchor_foods:before{-webkit-mask-image:url(../../img/emojipicker/foods.c6b220a.svg);mask-image:url(../../img/emojipicker/foods.c6b220a.svg)}.mx_EmojiPicker_anchor_nature:before{-webkit-mask-image:url(../../img/emojipicker/nature.6540b99.svg);mask-image:url(../../img/emojipicker/nature.6540b99.svg)}.mx_EmojiPicker_anchor_objects:before{-webkit-mask-image:url(../../img/emojipicker/objects.4d34f58.svg);mask-image:url(../../img/emojipicker/objects.4d34f58.svg)}.mx_EmojiPicker_anchor_people:before{-webkit-mask-image:url(../../img/emojipicker/people.e918580.svg);mask-image:url(../../img/emojipicker/people.e918580.svg)}.mx_EmojiPicker_anchor_places:before{-webkit-mask-image:url(../../img/emojipicker/places.7310322.svg);mask-image:url(../../img/emojipicker/places.7310322.svg)}.mx_EmojiPicker_anchor_recent:before{-webkit-mask-image:url(../../img/emojipicker/recent.13b42e2.svg);mask-image:url(../../img/emojipicker/recent.13b42e2.svg)}.mx_EmojiPicker_anchor_symbols:before{-webkit-mask-image:url(../../img/emojipicker/symbols.15a557d.svg);mask-image:url(../../img/emojipicker/symbols.15a557d.svg)}.mx_EmojiPicker_anchor_visible{border-bottom:2px solid #0dbd8b}.mx_EmojiPicker_search{margin:8px;border-radius:4px;border:1px solid #e7e7e7;background-color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_EmojiPicker_search input{-webkit-box-flex:1;-ms-flex:1;flex:1;border:none;padding:8px 12px;border-radius:4px 0}.mx_EmojiPicker_search button{border:none;background-color:inherit;margin:0;padding:8px;-ms-flex-item-align:center;align-self:center;width:32px;height:32px}.mx_EmojiPicker_search_clear{cursor:pointer}.mx_EmojiPicker_search_icon{width:16px;margin:8px}.mx_EmojiPicker_search_icon:not(.mx_EmojiPicker_search_clear){pointer-events:none}.mx_EmojiPicker_search_icon:after{-webkit-mask:url(../../img/emojipicker/search.973c315.svg) no-repeat;mask:url(../../img/emojipicker/search.973c315.svg) no-repeat;-webkit-mask-size:100%;mask-size:100%;background-color:#2e2f32;content:"";display:inline-block;width:100%;height:100%}.mx_EmojiPicker_search_clear:after{-webkit-mask-image:url(../../img/emojipicker/delete.f7344c5.svg);mask-image:url(../../img/emojipicker/delete.f7344c5.svg)}.mx_EmojiPicker_category{padding:0 12px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_EmojiPicker_category_label{width:304px}.mx_EmojiPicker_list{width:304px;padding:0;margin:0}.mx_EmojiPicker_item_wrapper{display:inline-block;list-style:none;width:38px;cursor:pointer}.mx_EmojiPicker_item{display:inline-block;font-size:2rem;padding:5px;width:100%;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;border-radius:4px}.mx_EmojiPicker_item:hover{background-color:#ddd}.mx_EmojiPicker_item_selected{color:rgba(0,0,0,.5);border:1px solid #0dbd8b;padding:4px}.mx_EmojiPicker_category_label,.mx_EmojiPicker_preview_name{font-size:1.6rem;font-weight:600;margin:0}.mx_EmojiPicker_footer{border-top:1px solid #e9edf1;min-height:72px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_EmojiPicker_preview_emoji{font-size:3.2rem;padding:8px 16px}.mx_EmojiPicker_preview_text{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_EmojiPicker_name{text-transform:capitalize}.mx_EmojiPicker_shortcode{color:#747474;font-size:1.4rem}.mx_EmojiPicker_shortcode:after,.mx_EmojiPicker_shortcode:before{content:":"}.mx_EmojiPicker_quick{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:distribute;justify-content:space-around}.mx_EmojiPicker_quick_header .mx_EmojiPicker_name{margin-right:4px}.mx_GroupPublicity_toggle{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:8px}.mx_GroupPublicity_toggle .mx_GroupTile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%}.mx_GroupPublicity_toggle .mx_ToggleSwitch{float:right}.mx_GroupRoomTile{position:relative;color:#2e2f32;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_GroupRoomList_wrapper{padding:10px}.mx_GroupUserSettings_groupPublicity_scrollbox{height:200px;border:1px solid transparent;border-radius:3px;overflow:hidden}.mx_CreateEvent:before{background-color:#91a1c0;-webkit-mask-image:url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);mask-image:url(../../img/element-icons/chat-bubbles.e2bd2cb.svg)}.mx_DateSeparator{clear:both;margin:4px 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.4rem;color:#9e9e9e}.mx_DateSeparator>hr{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;height:0;border:none;border-bottom:1px solid transparent}.mx_DateSeparator>div{margin:0 25px;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_EventTileBubble{background-color:#f2f5f8;padding:10px;border-radius:8px;margin:10px auto;max-width:75%;-webkit-box-sizing:border-box;box-sizing:border-box;display:grid;grid-template-columns:24px minmax(0,1fr) -webkit-min-content;grid-template-columns:24px minmax(0,1fr) min-content}.mx_EventTileBubble:after,.mx_EventTileBubble:before{position:relative;grid-column:1;grid-row:1/3;width:16px;height:16px;content:"";top:0;bottom:0;left:0;right:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;margin-top:4px}.mx_EventTileBubble .mx_EventTileBubble_subtitle,.mx_EventTileBubble .mx_EventTileBubble_title{overflow-wrap:break-word}.mx_EventTileBubble .mx_EventTileBubble_title{font-weight:600;font-size:1.5rem;grid-column:2;grid-row:1}.mx_EventTileBubble .mx_EventTileBubble_subtitle{font-size:1.2rem;grid-column:2;grid-row:2}.mx_MEmoteBody{white-space:pre-wrap}.mx_MEmoteBody_sender{cursor:pointer}.mx_MFileBody_download{color:#0dbd8b}.mx_MFileBody_download .mx_MFileBody_download_icon{width:12px;height:12px;-webkit-mask-size:12px;mask-size:12px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/download.4f331f0.svg);mask-image:url(../../img/download.4f331f0.svg);background-color:#0dbd8b;display:inline-block}.mx_MFileBody_download a{color:#0dbd8b;text-decoration:none;cursor:pointer}.mx_MFileBody_download object{margin-left:-16px;padding-right:4px;margin-top:-4px;vertical-align:middle;pointer-events:none}.mx_MFileBody_download iframe{margin:0;padding:0;border:none;width:100%;height:1.5em}.mx_MFileBody_info{background-color:#e3e8f0;border-radius:12px;width:243px;padding:6px 12px;color:#737d8c}.mx_MFileBody_info .mx_MFileBody_info_icon{background-color:#fff;border-radius:20px;display:inline-block;width:32px;height:32px;position:relative;vertical-align:middle;margin-right:12px}.mx_MFileBody_info .mx_MFileBody_info_icon:before{content:"";-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-image:url(../icons/attach.svg);mask-image:url(../icons/attach.svg);background-color:#737d8c;width:13px;height:15px;position:absolute;top:8px;left:9px}.mx_MFileBody_info .mx_MFileBody_info_filename{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:inline-block;width:calc(100% - 44px);vertical-align:middle}.mx_MImageBody{display:block;margin-right:34px}.mx_MImageBody_thumbnail{position:absolute;width:100%;height:100%;left:0;top:0;border-radius:4px}.mx_MImageBody_thumbnail_container{overflow:hidden;position:relative}.mx_MImageBody_thumbnail_spinner{position:absolute;left:50%;top:50%}.mx_MImageBody_thumbnail_spinner>*{-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.mx_MImageBody_gifLabel{position:absolute;display:block;top:0;left:14px;padding:5px;border-radius:5px;background:rgba(0,0,0,.7);border:2px solid rgba(0,0,0,.2);color:#fff;pointer-events:none}.mx_HiddenImagePlaceholder{position:absolute;left:0;top:0;bottom:0;right:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center;cursor:pointer;background-color:#f3f8fd}.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button{color:#0dbd8b}.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button span.mx_HiddenImagePlaceholder_eye{margin-right:8px;background-color:#0dbd8b;-webkit-mask-image:url(../../img/feather-customised/eye.52aa0d2.svg);mask-image:url(../../img/feather-customised/eye.52aa0d2.svg);display:inline-block;width:18px;height:14px}.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button span:not(.mx_HiddenImagePlaceholder_eye){vertical-align:text-bottom}.mx_EventTile:hover .mx_HiddenImagePlaceholder{background-color:#fff}.mx_MJitsiWidgetEvent:before{background-color:#91a1c0;-webkit-mask-image:url(../../img/element-icons/call/video-call.f465ed0.svg);mask-image:url(../../img/element-icons/call/video-call.f465ed0.svg)}.mx_MNoticeBody{white-space:pre-wrap;opacity:.6}.mx_MStickerBody_wrapper{padding:20px 0}.mx_MStickerBody_tooltip{position:absolute;top:50%}.mx_MStickerBody_hidden{max-width:220px;text-decoration:none;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_MTextBody{white-space:pre-wrap}span.mx_MVideoBody video.mx_MVideoBody{max-width:100%;height:auto;border-radius:4px}.mx_MVoiceMessageBody{display:inline-block}.mx_MessageActionBar{position:absolute;visibility:hidden;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;height:24px;line-height:2.4rem;border-radius:4px;background:#fff;top:-26px;right:8px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1}.mx_MessageActionBar:before{content:"";position:absolute;width:calc(66px + 100%);height:calc(20px + 100%);top:-12px;left:-58px;z-index:-1;cursor:auto}.mx_MessageActionBar>*{white-space:nowrap;display:inline-block;position:relative;border:1px solid #e9edf1;margin-left:-1px}.mx_MessageActionBar>:hover{border-color:#ddd;z-index:1}.mx_MessageActionBar>:first-child{border-radius:3px 0 0 3px}.mx_MessageActionBar>:last-child{border-radius:0 3px 3px 0}.mx_MessageActionBar>:only-child{border-radius:3px}.mx_MessageActionBar_maskButton{width:27px}.mx_MessageActionBar_maskButton:after{content:"";position:absolute;top:0;left:0;height:100%;width:100%;-webkit-mask-size:18px;mask-size:18px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#2e2f32}.mx_MessageActionBar_reactButton:after{-webkit-mask-image:url(../../img/element-icons/room/message-bar/emoji.af14771.svg);mask-image:url(../../img/element-icons/room/message-bar/emoji.af14771.svg)}.mx_MessageActionBar_replyButton:after{-webkit-mask-image:url(../../img/element-icons/room/message-bar/reply.5812741.svg);mask-image:url(../../img/element-icons/room/message-bar/reply.5812741.svg)}.mx_MessageActionBar_editButton:after{-webkit-mask-image:url(../../img/element-icons/room/message-bar/edit.688678e.svg);mask-image:url(../../img/element-icons/room/message-bar/edit.688678e.svg)}.mx_MessageActionBar_optionsButton:after{-webkit-mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);mask-image:url(../../img/element-icons/context-menu.829cc1a.svg)}.mx_MessageActionBar_resendButton:after{-webkit-mask-image:url(../../img/element-icons/retry.6cd23ad.svg);mask-image:url(../../img/element-icons/retry.6cd23ad.svg)}.mx_MessageActionBar_cancelButton:after{-webkit-mask-image:url(../../img/element-icons/trashcan.26f6c28.svg);mask-image:url(../../img/element-icons/trashcan.26f6c28.svg)}.mx_MessageTimestamp{color:#acacac;font-size:1rem;-webkit-font-feature-settings:"tnum";font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.mx_MjolnirBody{opacity:.4}.mx_ReactionsRow{margin:6px 0;color:#2e2f32}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton{position:relative;display:inline-block;visibility:hidden;width:24px;height:24px;vertical-align:middle;margin-left:4px}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton:before{content:"";position:absolute;height:100%;width:100%;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#8d99a5;-webkit-mask-image:url(../../img/element-icons/room/message-bar/emoji.af14771.svg);mask-image:url(../../img/element-icons/room/message-bar/emoji.af14771.svg)}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton.mx_ReactionsRow_addReactionButton_active{visibility:visible}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton.mx_ReactionsRow_addReactionButton_active:before,.mx_ReactionsRow .mx_ReactionsRow_addReactionButton:hover:before{background-color:#2e2f32}.mx_EventTile:hover .mx_ReactionsRow_addReactionButton{visibility:visible}.mx_ReactionsRow_showAll{text-decoration:none;font-size:1.2rem;line-height:2rem;margin-left:4px;vertical-align:middle}.mx_ReactionsRow_showAll:link,.mx_ReactionsRow_showAll:visited{color:#8d99a5}.mx_ReactionsRow_showAll:hover{color:#2e2f32}.mx_ReactionsRowButton{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;line-height:2rem;margin-right:6px;padding:1px 6px;border:1px solid #e9edf1;border-radius:10px;background-color:#f3f8fd;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.mx_ReactionsRowButton:hover{border-color:#ddd}.mx_ReactionsRowButton.mx_ReactionsRowButton_selected{background-color:#e9fff9;border-color:#0dbd8b}.mx_ReactionsRowButton.mx_AccessibleButton_disabled{cursor:not-allowed}.mx_ReactionsRowButton .mx_ReactionsRowButton_content{max-width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-right:4px}.mx_RedactedBody{white-space:pre-wrap;color:#61708b;vertical-align:middle;padding-left:20px;position:relative}.mx_RedactedBody:before{height:14px;width:14px;background-color:#61708b;-webkit-mask-image:url(../icons/trash.svg);mask-image:url(../icons/trash.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;content:"";position:absolute;top:1px;left:0}.mx_RoomAvatarEvent{opacity:.5;overflow-y:hidden}.mx_RoomAvatarEvent_avatar{display:inline;position:relative;top:5px}.mx_SenderProfile_name{font-weight:600}.mx_TextualEvent{opacity:.5;overflow-y:hidden}.mx_UnknownBody{white-space:pre-wrap}.mx_EventTile_content.mx_ViewSourceEvent{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:.6;font-size:1.2rem}.mx_EventTile_content.mx_ViewSourceEvent code,.mx_EventTile_content.mx_ViewSourceEvent pre{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_EventTile_content.mx_ViewSourceEvent pre{line-height:1.2;margin:3.5px 0}.mx_EventTile_content.mx_ViewSourceEvent .mx_ViewSourceEvent_toggle{width:12px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 center;mask-position:0 center;-webkit-mask-size:auto 12px;mask-size:auto 12px;visibility:hidden;background-color:#0dbd8b;-webkit-mask-image:url(../../img/feather-customised/maximise.dc32127.svg);mask-image:url(../../img/feather-customised/maximise.dc32127.svg)}.mx_EventTile_content.mx_ViewSourceEvent.mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle{-webkit-mask-position:0 bottom;mask-position:0 bottom;margin-bottom:7px;-webkit-mask-image:url(../../img/feather-customised/minimise.aec9142.svg);mask-image:url(../../img/feather-customised/minimise.aec9142.svg)}.mx_EventTile_content.mx_ViewSourceEvent:hover .mx_ViewSourceEvent_toggle{visibility:visible}.mx_cryptoEvent.mx_cryptoEvent_icon:before{background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:90%;mask-size:90%}.mx_cryptoEvent.mx_cryptoEvent_icon:after,.mx_cryptoEvent.mx_cryptoEvent_icon:before{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg)}.mx_cryptoEvent.mx_cryptoEvent_icon:after{background-color:#91a1c0}.mx_cryptoEvent.mx_cryptoEvent_icon_verified:after{-webkit-mask-image:url(../../img/e2e/verified.5be6c9f.svg);mask-image:url(../../img/e2e/verified.5be6c9f.svg);background-color:#0dbd8b}.mx_cryptoEvent.mx_cryptoEvent_icon_warning:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_cryptoEvent .mx_cryptoEvent_buttons,.mx_cryptoEvent .mx_cryptoEvent_state{grid-column:3;grid-row:1/3}.mx_cryptoEvent .mx_cryptoEvent_buttons{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_cryptoEvent .mx_cryptoEvent_state{width:130px;padding:10px 20px;margin:auto 0;text-align:center;color:#8d99a5;overflow-wrap:break-word;font-size:1.2rem}.mx_BaseCard{padding:0 8px;overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_BaseCard .mx_BaseCard_header{margin:8px 0}.mx_BaseCard .mx_BaseCard_header>h2{margin:0 44px;font-size:1.8rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back,.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close{position:absolute;background-color:rgba(141,151,165,.2);height:20px;width:20px;margin:12px;top:0;border-radius:10px}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back:before,.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close:before{content:"";position:absolute;height:20px;width:20px;top:0;left:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#91a1c0}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back{left:0}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back:before{-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-mask-size:22px;mask-size:22px;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close{right:0}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close:before{-webkit-mask-image:url(../../img/icons-close.11ff07c.svg);mask-image:url(../../img/icons-close.11ff07c.svg);-webkit-mask-size:8px;mask-size:8px}.mx_BaseCard .mx_AutoHideScrollbar{margin-right:-8px;padding-right:8px;min-height:0;width:100%;height:100%}.mx_BaseCard .mx_BaseCard_Group{margin:20px 0 16px}.mx_BaseCard .mx_BaseCard_Group>*{margin-left:12px;margin-right:12px}.mx_BaseCard .mx_BaseCard_Group>h1{color:#8d99a5;font-size:1.2rem;font-weight:500}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button{padding:10px 38px 10px 12px;margin:0;position:relative;font-size:1.3rem;height:20px;line-height:20px;border-radius:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button:hover{background-color:rgba(141,151,165,.1)}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button:after{content:"";position:absolute;top:10px;right:6px;height:20px;width:20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#c1c6cd;-webkit-transform:rotate(270deg);transform:rotate(270deg);-webkit-mask-size:20px;mask-size:20px;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button.mx_AccessibleButton_disabled{padding-right:12px}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button.mx_AccessibleButton_disabled:after{content:unset}.mx_BaseCard .mx_BaseCard_footer{padding-top:4px;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_kind_secondary{color:#737d8c;background-color:rgba(141,151,165,.2);font-weight:600;font-size:1.4rem}.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_disabled{cursor:not-allowed}.mx_FilePanel.mx_BaseCard,.mx_MemberList.mx_BaseCard,.mx_NotificationPanel.mx_BaseCard,.mx_UserInfo.mx_BaseCard{padding:32px 0 0}.mx_FilePanel.mx_BaseCard .mx_AutoHideScrollbar,.mx_MemberList.mx_BaseCard .mx_AutoHideScrollbar,.mx_NotificationPanel.mx_BaseCard .mx_AutoHideScrollbar,.mx_UserInfo.mx_BaseCard .mx_AutoHideScrollbar{margin-right:unset;padding-right:unset}.mx_EncryptionInfo_spinner .mx_Spinner{margin-top:25px;margin-bottom:15px}.mx_EncryptionInfo_spinner{text-align:center}.mx_RoomSummaryCard .mx_BaseCard_header{text-align:center;margin-top:20px}.mx_RoomSummaryCard .mx_BaseCard_header h2{font-weight:600;font-size:1.8rem;margin:12px 0 4px}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_alias{font-size:1.3rem;color:#737d8c}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_alias,.mx_RoomSummaryCard .mx_BaseCard_header h2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee{display:inline-block;position:relative;width:54px;height:54px;border-radius:50%;background-color:#737d8c;margin-top:-3px;margin-left:-10px;border:3px solid #f2f5f8}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee:before{content:"";position:absolute;top:13px;left:13px;height:28px;width:28px;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-image:url(../../img/e2e/disabled.6c5c6be.svg);mask-image:url(../../img/e2e/disabled.6c5c6be.svg);background-color:#fff}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_normal{background-color:#424446}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_normal:before{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg)}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_verified{background-color:#0dbd8b}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_verified:before{-webkit-mask-image:url(../../img/e2e/verified.5be6c9f.svg);mask-image:url(../../img/e2e/verified.5be6c9f.svg)}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_warning{background-color:#ff4b55}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_warning:before{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg)}.mx_RoomSummaryCard .mx_RoomSummaryCard_aboutGroup .mx_RoomSummaryCard_Button{padding-left:44px}.mx_RoomSummaryCard .mx_RoomSummaryCard_aboutGroup .mx_RoomSummaryCard_Button:before{content:"";position:absolute;top:8px;left:10px;height:24px;width:24px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#c1c6cd}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button{padding:0;height:auto;color:#8d99a5}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_icon_app{padding:10px 48px 10px 12px;text-overflow:ellipsis;overflow:hidden}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_icon_app .mx_BaseAvatar_image{vertical-align:top;margin-right:12px}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_icon_app span{color:#2e2f32}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options,.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle{position:absolute;top:0;height:100%;width:24px;padding:12px 4px;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:24px}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options:hover:after,.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle:hover:after{content:"";position:absolute;height:24px;width:24px;top:8px;left:0;border-radius:12px;background-color:rgba(141,151,165,.1)}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options:before,.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle:before{content:"";position:absolute;height:16px;width:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:16px;mask-size:16px;background-color:#c1c6cd}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle{right:24px}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle:before{-webkit-mask-image:url(../../img/element-icons/room/pin-upright.65783fb.svg);mask-image:url(../../img/element-icons/room/pin-upright.65783fb.svg)}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options{right:48px;display:none}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options:before{-webkit-mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg)}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button.mx_RoomSummaryCard_Button_pinned:after{opacity:.2}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button.mx_RoomSummaryCard_Button_pinned .mx_RoomSummaryCard_app_pinToggle:before{background-color:#0dbd8b}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:hover .mx_RoomSummaryCard_icon_app{padding-right:72px}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:hover .mx_RoomSummaryCard_app_options{display:unset}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:before{content:unset}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:after{top:8px;pointer-events:none}.mx_RoomSummaryCard .mx_AccessibleButton_kind_link{padding:0;margin-top:12px;margin-bottom:12px;font-size:1.3rem;font-weight:600}.mx_RoomSummaryCard_icon_people:before{-webkit-mask-image:url(../../img/element-icons/room/members.88c3e93.svg);mask-image:url(../../img/element-icons/room/members.88c3e93.svg)}.mx_RoomSummaryCard_icon_files:before{-webkit-mask-image:url(../../img/element-icons/room/files.5709c0c.svg);mask-image:url(../../img/element-icons/room/files.5709c0c.svg)}.mx_RoomSummaryCard_icon_share:before{-webkit-mask-image:url(../../img/element-icons/room/share.54dc3fb.svg);mask-image:url(../../img/element-icons/room/share.54dc3fb.svg)}.mx_RoomSummaryCard_icon_settings:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_UserInfo.mx_BaseCard{padding-top:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-y:auto;font-size:1.2rem}.mx_UserInfo.mx_BaseCard .mx_UserInfo_cancel{cursor:pointer;position:absolute;top:0;border-radius:4px;background-color:#f2f5f8;margin:9px;z-index:1}.mx_UserInfo.mx_BaseCard .mx_UserInfo_cancel div{height:16px;width:16px;padding:4px;-webkit-mask-image:url(../../img/minimise.871d2de.svg);mask-image:url(../../img/minimise.871d2de.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:7px center;mask-position:7px center;background-color:#91a1c0}.mx_UserInfo.mx_BaseCard h2{font-size:1.8rem;font-weight:600;margin:18px 0 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_container{padding:8px 16px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_separator{border-bottom:1px solid rgba(46,47,50,.1)}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetailsContainer{padding-top:0;padding-bottom:0;margin-bottom:8px}.mx_UserInfo.mx_BaseCard .mx_RoomTile_nameContainer{width:154px}.mx_UserInfo.mx_BaseCard .mx_RoomTile_badge{display:none}.mx_UserInfo.mx_BaseCard .mx_RoomTile_name{width:160px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar{margin:24px 32px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar>div{max-width:30vh;margin:0 auto;-webkit-transition:.5s;transition:.5s}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar>div>div{padding-top:100%;position:relative}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar>div>div *{border-radius:100%;position:absolute;top:0;left:0;width:100%!important;height:100%!important}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar .mx_BaseAvatar_initial{z-index:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:6rem!important;width:100%!important;-webkit-transition:font-size .5s;transition:font-size .5s}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image{cursor:-webkit-zoom-in;cursor:zoom-in}.mx_UserInfo.mx_BaseCard h3{text-transform:uppercase;color:#8d99a5;font-weight:600;font-size:1.2rem;margin:4px 0}.mx_UserInfo.mx_BaseCard p{margin:5px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile{text-align:center}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.8rem;line-height:2.5rem;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;word-break:break-all;text-overflow:ellipsis}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 .mx_E2EIcon{margin-top:3px;margin-right:4px;min-width:18px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_UserInfo_profileStatus{margin-top:12px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField{margin:6px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField,.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField .mx_UserInfo_roleDescription{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField .mx_UserInfo_roleDescription{margin:11px 0 12px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField .mx_Field{margin:0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_field{cursor:pointer;color:#0dbd8b;line-height:1.6rem;margin:8px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_field.mx_UserInfo_destructive{color:#ff4b55}.mx_UserInfo.mx_BaseCard .mx_UserInfo_statusMessage{font-size:1.1rem;opacity:.5;overflow:hidden;white-space:nowrap;text-overflow:clip}.mx_UserInfo.mx_BaseCard .mx_AutoHideScrollbar{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator){padding-top:16px;padding-bottom:0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator)>:not(h3){margin-left:8px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device{display:-webkit-box;display:-ms-flexbox;display:flex;margin:8px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device.mx_UserInfo_device_verified .mx_UserInfo_device_trusted{color:#0dbd8b}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device.mx_UserInfo_device_unverified .mx_UserInfo_device_trusted{color:#ff4b55}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device .mx_UserInfo_device_name{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:5px;word-break:break-word}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_E2EIcon{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin:2px 5px 0 0;width:12px;height:12px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_expand{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:11px}.mx_UserInfo.mx_BaseCard .mx_AccessibleButton.mx_AccessibleButton_hasKind{padding:8px 18px}.mx_UserInfo.mx_BaseCard .mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary{color:#0dbd8b;background-color:rgba(3,179,129,.16)}.mx_UserInfo.mx_BaseCard .mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger{color:#ff4b55;background-color:rgba(255,75,85,.16)}.mx_UserInfo.mx_BaseCard .mx_UserInfo_wideButton,.mx_UserInfo.mx_BaseCard .mx_VerificationShowSas .mx_AccessibleButton{display:block;margin:16px 0 8px}.mx_UserInfo.mx_BaseCard .mx_VerificationShowSas .mx_AccessibleButton+.mx_AccessibleButton{margin:8px 0}.mx_UserInfo.mx_UserInfo_smallAvatar .mx_UserInfo_avatar>div{max-width:72px;margin:0 auto}.mx_UserInfo.mx_UserInfo_smallAvatar .mx_UserInfo_avatar .mx_BaseAvatar_initial{font-size:40px!important}.mx_VerificationPanel_reciprocate_section .mx_E2EIcon,.mx_VerificationPanel_verified_section .mx_E2EIcon{margin:20px auto!important}.mx_UserInfo .mx_EncryptionPanel_cancel{-webkit-mask:url(../../img/feather-customised/cancel.23c2689.svg);mask:url(../../img/feather-customised/cancel.23c2689.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;width:14px;height:14px;background-color:#61708b;cursor:pointer;position:absolute;z-index:100;top:14px;right:14px}.mx_UserInfo .mx_VerificationPanel_qrCode{padding:4px 4px 0;background:#fff;border-radius:4px;width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:100%;margin:0 auto!important}.mx_UserInfo .mx_VerificationPanel_qrCode canvas{height:auto!important;width:100%!important;max-width:240px}.mx_UserInfo .mx_VerificationPanel_reciprocate_section .mx_FormButton{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;padding:10px;display:block;margin:10px 0}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:10px;margin-bottom:10px;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions>.mx_VerificationPanel_QRPhase_betweenText,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions>.mx_VerificationPanel_QRPhase_betweenText{width:50px;vertical-align:middle;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption{background-color:#f3f8fd;border-radius:10px;-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;padding:20px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;max-width:310px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_noQR,.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption canvas,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_noQR,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption canvas{width:220px!important;height:220px!important;background-color:#fff;border-radius:4px;vertical-align:middle;text-align:center;padding:10px}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption>p,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption>p{margin-top:0;font-weight:700}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_helpText,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_helpText{font-size:1.4rem;margin:30px 0;text-align:center}.mx_CompleteSecurity_body .mx_VerificationPanel_verified_section .mx_AccessibleButton,.mx_Dialog .mx_VerificationPanel_verified_section .mx_AccessibleButton{float:right}.mx_CompleteSecurity_body .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton,.mx_Dialog .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton{margin-left:10px;padding:7px 40px}.mx_CompleteSecurity_body .mx_VerificationPanel_reciprocate_section .mx_VerificationPanel_reciprocateButtons,.mx_Dialog .mx_VerificationPanel_reciprocate_section .mx_VerificationPanel_reciprocateButtons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_WidgetCard{height:100%;display:contents}.mx_WidgetCard .mx_AppTileFullWidth{max-width:unset;height:100%;border:0}.mx_WidgetCard .mx_BaseCard_header{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mx_WidgetCard .mx_BaseCard_header>h2{margin-right:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_WidgetCard .mx_BaseCard_header .mx_WidgetCard_optionsButton{position:relative;margin-right:44px;height:20px;width:20px;min-width:20px;padding:0}.mx_WidgetCard .mx_BaseCard_header .mx_WidgetCard_optionsButton:before{content:"";position:absolute;width:20px;height:20px;top:0;left:4px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);background-color:#737d8c}.mx_WidgetCard_maxPinnedTooltip{background-color:#ff4b55;color:#fff}.mx_AliasSettings_editable{border:0;border-bottom:1px solid #c7c7c7;padding:0;min-width:240px}.mx_AliasSettings_editable:focus{border-bottom:1px solid #0dbd8b;outline:none;-webkit-box-shadow:none;box-shadow:none}.mx_AliasSettings summary{cursor:pointer;color:#0dbd8b;font-weight:600;list-style:none}.mx_AliasSettings summary::-webkit-details-marker{display:none}.mx_AliasSettings .mx_AliasSettings_localAliasHeader{margin-top:35px}.mx_AppsDrawer{margin:5px 5px 5px 18px;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden}.mx_AppsDrawer .mx_AppsContainer_resizerHandleContainer{width:100%;height:10px;margin-top:-3px;display:block;position:relative}.mx_AppsDrawer .mx_AppsContainer_resizerHandle{cursor:ns-resize;width:100%!important;height:100%!important;position:absolute;bottom:0!important}.mx_AppsDrawer .mx_AppsContainer_resizerHandle:after{content:"";position:absolute;border-radius:3px;top:6px;bottom:0;left:calc(50% - 32px);right:calc(50% - 32px)}.mx_AppsDrawer:hover .mx_AppsContainer_resizerHandle:after{opacity:.8;background:#2e2f32}.mx_AppsDrawer:hover .mx_ResizeHandle_horizontal:before{position:absolute;left:3px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:64px;width:4px;border-radius:4px;content:"";background-color:#2e2f32;opacity:.8}.mx_AppsContainer_resizer{margin-bottom:8px}.mx_AppsContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;height:100%;width:100%;-webkit-box-flex:1;-ms-flex:1;flex:1;min-height:0}.mx_AppsContainer .mx_AppTile:first-of-type{border-left-width:8px;border-radius:10px 0 0 10px}.mx_AppsContainer .mx_AppTile:last-of-type{border-right-width:8px;border-radius:0 10px 10px 0}.mx_AppsContainer .mx_ResizeHandle_horizontal{position:relative}.mx_AppsContainer .mx_ResizeHandle_horizontal>div{width:0}.mx_AppsDrawer_2apps .mx_AppTile{width:50%}.mx_AppsDrawer_2apps .mx_AppTile:nth-child(3){-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;width:0!important;min-width:240px!important}.mx_AppsDrawer_3apps .mx_AppTile{width:33%}.mx_AppsDrawer_3apps .mx_AppTile:nth-child(3){-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;width:0!important;min-width:240px!important}.mx_AppTile{width:50%;min-width:240px;border-color:#f2f5f8;border-style:solid;border-width:8px 5px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#f2f5f8}.mx_AppTileFullWidth{width:100%!important;border:5px solid #f2f5f8;border-radius:8px;background-color:#f2f5f8}.mx_AppTile_mini,.mx_AppTileFullWidth{margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_AppTile_mini{width:100%;height:200px}.mx_AppTile .mx_AppTile_persistedWrapper,.mx_AppTile_mini .mx_AppTile_persistedWrapper,.mx_AppTileFullWidth .mx_AppTile_persistedWrapper{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_AppTile_persistedWrapper div{width:100%;height:100%}.mx_AppTileMenuBar{margin:0;font-size:1.2rem;background-color:#f2f5f8;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:100%;padding-top:2px;padding-bottom:8px}.mx_AppTileMenuBarTitle{line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mx_AppTileMenuBarTitle .mx_WidgetAvatar{margin-right:12px}.mx_AppTileMenuBarTitle>:last-child{margin-left:9px}.mx_AppTileMenuBarWidgets{float:right;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_AppTileMenuBar_iconButton{width:12px;height:12px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 center;mask-position:0 center;-webkit-mask-size:auto 12px;mask-size:auto 12px;background-color:#212121;margin:0 3px}.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout{-webkit-mask-image:url(../../img/feather-customised/widget/external-link.7ab6751.svg);mask-image:url(../../img/feather-customised/widget/external-link.7ab6751.svg)}.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_menu{-webkit-mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg)}.mx_AppTileBody{height:100%;background-color:#fff}.mx_AppTileBody,.mx_AppTileBody_mini{width:100%;overflow:hidden;border-radius:8px}.mx_AppTileBody_mini{height:200px}.mx_AppTile .mx_AppTileBody,.mx_AppTile_mini .mx_AppTileBody_mini,.mx_AppTileFullWidth .mx_AppTileBody{height:inherit;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_AppTileBody_mini iframe,.mx_AppTileBody iframe{border:none;width:100%;height:100%}.mx_AppTileBody iframe{overflow:hidden;padding:0;margin:0;display:block}.mx_AppPermissionWarning{text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.6rem}.mx_AppPermissionWarning_row{margin-bottom:12px}.mx_AppPermissionWarning_smallText{font-size:1.2rem}.mx_AppPermissionWarning_bolder{font-weight:600}.mx_AppPermissionWarning h4{margin:0;padding:0}.mx_AppPermissionWarning_helpIcon{margin-top:1px;margin-right:2px;width:10px;height:10px;display:inline-block}.mx_AppPermissionWarning_helpIcon:before{display:inline-block;background-color:#0dbd8b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:12px;mask-size:12px;width:12px;height:12px;-webkit-mask-position:center;mask-position:center;content:"";vertical-align:middle;-webkit-mask-image:url(../../img/feather-customised/help-circle.03fb6cf.svg);mask-image:url(../../img/feather-customised/help-circle.03fb6cf.svg)}.mx_AppPermissionWarning_tooltip{-webkit-box-shadow:none;box-shadow:none;background-color:#27303a;color:#fff;border:none;border-radius:3px;padding:6px 8px}.mx_AppPermissionWarning_tooltip ul{list-style-position:inside;padding-left:2px;margin-left:0}.mx_AppLoading{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:700;position:relative;height:100%;background-color:#fff!important;border-radius:8px}.mx_AppLoading .mx_Spinner{position:absolute;top:0;bottom:0;left:0;right:0}.mx_AppLoading_spinner_fadeIn{-webkit-animation-fill-mode:backwards;animation-fill-mode:backwards;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:.5s;animation-delay:.5s;-webkit-animation-name:mx_AppLoading_spinner_fadeIn_animation;animation-name:mx_AppLoading_spinner_fadeIn_animation}@-webkit-keyframes mx_AppLoading_spinner_fadeIn_animation{0%{opacity:0}to{opacity:1}}@keyframes mx_AppLoading_spinner_fadeIn_animation{0%{opacity:0}to{opacity:1}}.mx_AppLoading iframe{display:none}.mx_AppsDrawer_resizing .mx_AppTile_persistedWrapper{z-index:1}.mx_Autocomplete{position:absolute;bottom:0;z-index:1001;width:100%;background:#fff;border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;max-height:50vh;overflow:auto;-webkit-box-shadow:0 -16px 32px rgba(0,0,0,.04);box-shadow:0 -16px 32px rgba(0,0,0,.04)}.mx_Autocomplete_ProviderSection{border-bottom:1px solid transparent}.mx_Autocomplete_Completion_block{height:34px;display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 12px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#2e2f32}.mx_Autocomplete_Completion_block *{margin:0 3px}.mx_Autocomplete_Completion_pill{-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:2rem;height:3.4rem;padding:.4rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#2e2f32}.mx_Autocomplete_Completion_pill>*{margin-right:.3rem}.mx_Autocomplete_Completion_subtitle{font-style:italic;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_Autocomplete_Completion_description{color:grey}.mx_Autocomplete_Completion_container_pill{margin:12px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-flow:wrap;flex-flow:wrap}.mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_description,.mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_subtitle,.mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_title{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mx_Autocomplete_Completion.selected,.mx_Autocomplete_Completion:hover{background:#f2f5f8;outline:none}.mx_Autocomplete_provider_name{margin:12px;color:#2e2f32;font-weight:400;opacity:.4}.m_RoomView_auxPanel_stateViews{padding:5px 5px 5px 19px;border-bottom:1px solid transparent}.m_RoomView_auxPanel_stateViews_span a{text-decoration:none;color:inherit}.m_RoomView_auxPanel_stateViews_span[data-severity=warning]{font-weight:700;color:orange}.m_RoomView_auxPanel_stateViews_span[data-severity=alert]{font-weight:700;color:red}.m_RoomView_auxPanel_stateViews_span[data-severity=normal]{font-weight:400}.m_RoomView_auxPanel_stateViews_span[data-severity=notice]{font-weight:400;color:#a2a2a2}.m_RoomView_auxPanel_stateViews_delim{padding:0 5px;color:#a2a2a2}.mx_BasicMessageComposer{position:relative}.mx_BasicMessageComposer .mx_BasicMessageComposer_inputEmpty>:first-child:before{content:var(--placeholder);opacity:.333;width:0;height:0;overflow:visible;display:inline-block;pointer-events:none;white-space:nowrap}@-webkit-keyframes visualbell{0%{background-color:#faa}to{background-color:#fff}}.mx_BasicMessageComposer.mx_BasicMessageComposer_input_error{-webkit-animation:visualbell .2s;animation:visualbell .2s}.mx_BasicMessageComposer .mx_BasicMessageComposer_input{white-space:pre-wrap;word-wrap:break-word;outline:none;overflow-x:hidden}.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_RoomPill,.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_UserPill{position:relative}.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_RoomPill:before,.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_UserPill:before{content:var(--avatar-letter);width:1.6rem;height:1.6rem;margin-right:.24rem;background:var(--avatar-background),#fff;color:#fff;background-repeat:no-repeat;background-size:1.6rem;border-radius:1.6rem;text-align:center;font-weight:400;line-height:1.6rem;font-size:1.04rem}.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_disabled{pointer-events:none}.mx_BasicMessageComposer .mx_BasicMessageComposer_AutoCompleteWrapper{position:relative;height:0}.mx_E2EIcon{width:16px;height:16px;margin:0 9px;position:relative;display:block}.mx_E2EIcon_normal:after,.mx_E2EIcon_normal:before,.mx_E2EIcon_verified:after,.mx_E2EIcon_verified:before,.mx_E2EIcon_warning:after,.mx_E2EIcon_warning:before{content:"";display:block;position:absolute;top:0;bottom:0;left:0;right:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.mx_E2EIcon:before{background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:90%;mask-size:90%}.mx_E2EIcon:before,.mx_E2EIcon_bordered{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg)}.mx_E2EIcon_bordered{background-color:#f3f8fd}.mx_E2EIcon_bordered:after{-webkit-mask-size:75%;mask-size:75%}.mx_E2EIcon_bordered:before{-webkit-mask-size:65%;mask-size:65%}.mx_E2EIcon_warning:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_E2EIcon_normal:after{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);background-color:#91a1c0}.mx_E2EIcon_verified:after{-webkit-mask-image:url(../../img/e2e/verified.5be6c9f.svg);mask-image:url(../../img/e2e/verified.5be6c9f.svg);background-color:#0dbd8b}.mx_EditMessageComposer{padding:3px;margin:-7px -10px -5px;overflow:visible!important}.mx_EditMessageComposer .mx_BasicMessageComposer_input{border-radius:4px;border:1px solid transparent;background-color:#fff;max-height:200px;padding:3px 6px}.mx_EditMessageComposer .mx_BasicMessageComposer_input:focus{border-color:rgba(13,189,139,.5)}.mx_EditMessageComposer .mx_EditMessageComposer_buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;position:absolute;left:0;background:#f3f8fd;z-index:100;right:0;margin:0 -110px 0 0;padding:5px 147px 5px 5px}.mx_EditMessageComposer .mx_EditMessageComposer_buttons .mx_AccessibleButton{margin-left:5px;padding:5px 40px}.mx_EventTile_last .mx_EditMessageComposer_buttons{position:static;margin-right:-147px}.mx_EntityTile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#2e2f32;cursor:pointer}.mx_EntityTile .mx_E2EIcon{margin:0;position:absolute;bottom:2px;right:7px}.mx_EntityTile:hover{padding-right:30px;position:relative}.mx_EntityTile:hover:before{content:"";position:absolute;top:calc(50% - 8px);right:-8px;-webkit-mask:url(../../img/member_chevron.4163a20.png);mask:url(../../img/member_chevron.4163a20.png);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;width:16px;height:16px;background-color:#91a1c0}.mx_EntityTile .mx_PresenceLabel{display:none}.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_PresenceLabel{display:block}.mx_EntityTile_invite{display:table-cell;vertical-align:middle;margin-left:10px;width:26px}.mx_EntityTile_avatar,.mx_GroupRoomTile_avatar{padding:4px 12px 4px 3px;position:relative}.mx_EntityTile_name,.mx_GroupRoomTile_name{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow:hidden;font-size:1.4rem;text-overflow:ellipsis;white-space:nowrap}.mx_EntityTile_details{overflow:hidden;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_EntityTile_ellipsis .mx_EntityTile_name,.mx_EntityTile_invitePlaceholder .mx_EntityTile_name{font-style:italic;color:#2e2f32}.mx_EntityTile_offline_beenactive .mx_EntityTile_avatar,.mx_EntityTile_offline_beenactive .mx_EntityTile_name,.mx_EntityTile_unavailable .mx_EntityTile_avatar,.mx_EntityTile_unavailable .mx_EntityTile_name{opacity:.5}.mx_EntityTile_offline_neveractive .mx_EntityTile_avatar,.mx_EntityTile_offline_neveractive .mx_EntityTile_name,.mx_EntityTile_unknown .mx_EntityTile_avatar,.mx_EntityTile_unknown .mx_EntityTile_name{opacity:.25}.mx_EntityTile_subtext{font-size:1.1rem;opacity:.5;overflow:hidden;white-space:nowrap;text-overflow:clip}.mx_EntityTile_power{-webkit-padding-start:6px;padding-inline-start:6px;font-size:1rem;color:#8d99a5;max-width:6em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mx_EntityTile:hover .mx_EntityTile_power{display:none}.mx_EventTile{max-width:100%;clear:both;padding-top:18px;font-size:1.4rem;position:relative}.mx_EventTile.mx_EventTile_info{padding-top:1px}.mx_EventTile_avatar{top:14px;left:8px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar{top:.6rem;left:64px}.mx_EventTile_continuation{padding-top:0!important}.mx_EventTile_continuation.mx_EventTile_isEditing{padding-top:5px!important;margin-top:-5px}.mx_EventTile_isEditing{background-color:#f3f8fd}.mx_EventTile .mx_SenderProfile{color:#2e2f32;font-size:1.4rem;display:inline-block;overflow:hidden;cursor:pointer;padding-bottom:0;padding-top:0;margin:0;white-space:nowrap;text-overflow:ellipsis;max-width:calc(100% - 64px)}.mx_EventTile .mx_SenderProfile .mx_Flair{opacity:.7;margin-left:5px;display:inline-block;vertical-align:top;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_EventTile .mx_SenderProfile .mx_Flair img{vertical-align:-2px;margin-right:2px;border-radius:8px}.mx_EventTile_isEditing .mx_MessageTimestamp{visibility:hidden!important}.mx_EventTile .mx_MessageTimestamp{display:block;visibility:hidden;white-space:nowrap;left:0;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_EventTile_continuation .mx_EventTile_line{clear:both}.mx_EventTile_line,.mx_EventTile_reply{position:relative;padding-left:64px;border-radius:4px}.mx_EventListSummary .mx_EventTile_line,.mx_RoomView_timeline_rr_enabled .mx_EventTile_line{margin-right:110px}.mx_EventTile_bubbleContainer{display:grid;grid-template-columns:1fr 100px}.mx_EventTile_bubbleContainer .mx_EventTile_line{margin-right:0;grid-column:1/3;padding:0!important}.mx_EventTile_bubbleContainer .mx_EventTile_msgOption{grid-column:2}.mx_EventTile_reply{margin-right:10px}.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji{font-size:48px!important;line-height:57px!important}.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp{visibility:visible}.mx_EventTile_selected>div>a>.mx_MessageTimestamp{left:3px;width:auto}.mx_EventTile.focus-visible:focus-within>div>a>.mx_MessageTimestamp,.mx_EventTile.mx_EventTile_actionBarFocused>div>a>.mx_MessageTimestamp,.mx_EventTile:hover>div>a>.mx_MessageTimestamp,.mx_EventTile_last>div>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_EventTile.focus-visible:focus-within>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_EventTile.mx_EventTile_actionBarFocused>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_EventTile:hover>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_EventTile_last>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_ReplyThread .mx_EventTile>a>.mx_MessageTimestamp{visibility:visible}.mx_EventTile.focus-visible:focus-within .mx_MessageActionBar,.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,.mx_EventTile:hover .mx_MessageActionBar,[data-whatinput=keyboard] .mx_EventTile:focus-within .mx_MessageActionBar{visibility:visible}.mx_EventTile_selected>.mx_EventTile_line{border-left:4px solid #0dbd8b;padding-left:60px;background-color:#f6f7f8}.mx_EventTile_highlight,.mx_EventTile_highlight .markdown-body{color:#ff4b55}.mx_EventTile_highlight .markdown-body .mx_EventTile_line,.mx_EventTile_highlight .mx_EventTile_line{background-color:#fff8e3}.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line{padding-left:78px}.mx_EventTile.focus-visible:focus-within .mx_EventTile_line,.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line,.mx_EventTile:hover .mx_EventTile_line{background-color:#f6f7f8}.mx_EventTile_searchHighlight{border-radius:5px;padding-left:2px;padding-right:2px;cursor:pointer}.mx_EventTile_searchHighlight,.mx_EventTile_searchHighlight a{background-color:#0dbd8b;color:#fff}.mx_EventTile_receiptSending:before,.mx_EventTile_receiptSent:before{background-color:#8d99a5;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:14px;mask-size:14px;width:14px;height:14px;content:"";position:absolute;top:0;left:0;right:0}.mx_EventTile_receiptSent:before{-webkit-mask-image:url(../../img/element-icons/circle-sent.5079cbe.svg);mask-image:url(../../img/element-icons/circle-sent.5079cbe.svg)}.mx_EventTile_receiptSending:before{-webkit-mask-image:url(../../img/element-icons/circle-sending.bcca6aa.svg);mask-image:url(../../img/element-icons/circle-sending.bcca6aa.svg)}.mx_EventTile_contextual{opacity:.4}.mx_EventTile_msgOption{float:right;text-align:right;position:relative;width:90px;height:1px;margin-right:10px}.mx_EventTile_msgOption a{text-decoration:none}.mx_EventTile_readAvatars{position:relative;display:inline-block;width:14px;height:14px;top:-2.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1}.mx_EventTile_readAvatars .mx_BaseAvatar{position:absolute;display:inline-block;height:1.4rem;width:1.4rem;-webkit-transition:left .1s ease-out,top .3s ease-out;transition:left .1s ease-out,top .3s ease-out;-webkit-transition:left var(--transition-short) ease-out,top var(--transition-standard) ease-out;transition:left var(--transition-short) ease-out,top var(--transition-standard) ease-out}.mx_EventTile_readAvatarRemainder{color:#acacac;font-size:1.1rem;position:absolute}.mx_EventTile_content{display:block;overflow-y:hidden;overflow-x:hidden;margin-right:34px}.mx_EventTile_body{overflow-y:hidden}.mx_EventTile_spoiler{cursor:pointer}.mx_EventTile_spoiler_reason{color:#acacac;font-size:1.1rem}.mx_EventTile_spoiler_content{-webkit-filter:blur(5px) saturate(.1) sepia(1);filter:blur(5px) saturate(.1) sepia(1);-webkit-transition-duration:.5s;transition-duration:.5s}.mx_EventTile_spoiler.visible>.mx_EventTile_spoiler_content{-webkit-filter:none;filter:none}.mx_EventTile_e2eIcon{position:absolute;top:6px;left:44px;width:14px;height:14px;display:block;bottom:0;right:0;opacity:.2;background-repeat:no-repeat;background-size:contain}.mx_EventTile_e2eIcon:after,.mx_EventTile_e2eIcon:before{content:"";display:block;position:absolute;top:0;bottom:0;left:0;right:0;-webkit-mask-size:contain;mask-size:contain}.mx_EventTile_e2eIcon:after,.mx_EventTile_e2eIcon:before{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.mx_EventTile_e2eIcon:before{background-color:#fff;-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);-webkit-mask-size:90%;mask-size:90%}.mx_EventTile_e2eIcon_undecryptable:after,.mx_EventTile_e2eIcon_unverified:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_EventTile_e2eIcon_undecryptable,.mx_EventTile_e2eIcon_unverified{opacity:1}.mx_EventTile_e2eIcon_unknown:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_EventTile_e2eIcon_unknown{opacity:1}.mx_EventTile_e2eIcon_unencrypted:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_EventTile_e2eIcon_unencrypted{opacity:1}.mx_EventTile_e2eIcon_unauthenticated:after{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);background-color:#91a1c0}.mx_EventTile_e2eIcon_unauthenticated{opacity:1}.mx_EventTile_keyRequestInfo{font-size:1.2rem}.mx_EventTile_keyRequestInfo_text{opacity:.5}.mx_EventTile_keyRequestInfo_text a{color:#2e2f32;text-decoration:underline;cursor:pointer}.mx_EventTile_keyRequestInfo_tooltip_contents p{text-align:auto;margin-left:3px;margin-right:3px}.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child{margin-top:0}.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child{margin-bottom:0}.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line{padding-left:60px}.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line{border-left:4px solid #76cfa5}.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line{border-left:4px solid #e8bf37}.mx_EventTile:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line{padding-left:78px}.mx_EventTile:hover .mx_EventTile_e2eIcon{opacity:1}.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line>a>.mx_MessageTimestamp,.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line>a>.mx_MessageTimestamp,.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line>a>.mx_MessageTimestamp{width:38px}.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line>.mx_EventTile_e2eIcon,.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line>.mx_EventTile_e2eIcon,.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line>.mx_EventTile_e2eIcon{display:block;left:41px}.mx_EventTile_content .mx_EventTile_edited{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:1.2rem;color:#9e9e9e;display:inline-block;margin-left:9px;cursor:pointer}.mx_EventTile_body pre{border:1px solid transparent}.mx_EventTile_content .markdown-body{font-family:inherit!important;white-space:normal!important;line-height:inherit!important;color:inherit;font-size:1.4rem}.mx_EventTile_content .markdown-body code,.mx_EventTile_content .markdown-body pre{font-family:Inconsolata,Twemoji,Apple Color Emoji,Segoe UI Emoji,Courier,monospace,Noto Color Emoji!important;color:#333}.mx_EventTile_content .markdown-body pre{overflow-x:overlay;overflow-y:visible}.mx_EventTile_content .markdown-body code{background-color:#f8f8f8}.mx_EventTile_lineNumbers{float:left;margin:0 .5em 0 -1.5em;color:grey}.mx_EventTile_lineNumber{text-align:right;display:block;padding-left:1em}.mx_EventTile_collapsedCodeBlock{max-height:30vh}.mx_EventTile.focus-visible:focus-within .mx_EventTile_body pre,.mx_EventTile:hover .mx_EventTile_body pre{border:1px solid #e5e5e5}.mx_EventTile_pre_container{position:relative}.mx_EventTile_button{position:absolute;display:inline-block;visibility:hidden;cursor:pointer;top:8px;right:8px;width:19px;height:19px;background-color:#2e2f32}.mx_EventTile_buttonBottom{top:33px}.mx_EventTile_copyButton{-webkit-mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg)}.mx_EventTile_collapseButton{-webkit-mask-image:url(../../img/feather-customised/minimise.aec9142.svg);mask-image:url(../../img/feather-customised/minimise.aec9142.svg)}.mx_EventTile_collapseButton,.mx_EventTile_expandButton{-webkit-mask-size:75%;mask-size:75%;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mx_EventTile_expandButton{-webkit-mask-image:url(../../img/feather-customised/maximise.dc32127.svg);mask-image:url(../../img/feather-customised/maximise.dc32127.svg)}.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_collapseButton,.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton,.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_expandButton,.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_collapseButton,.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton,.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_expandButton{visibility:visible}.mx_EventTile_content .markdown-body h1,.mx_EventTile_content .markdown-body h2,.mx_EventTile_content .markdown-body h3,.mx_EventTile_content .markdown-body h4,.mx_EventTile_content .markdown-body h5,.mx_EventTile_content .markdown-body h6{font-family:inherit!important;color:inherit}.mx_EventTile_content .markdown-body h1,.mx_EventTile_content .markdown-body h2{font-size:1.5em;border-bottom:none!important}.mx_EventTile_content .markdown-body a{color:#238cf5}.mx_EventTile_content .markdown-body .hljs{display:inline!important}.mx_EventTile_tileError{color:red;text-align:center;margin-right:0}.mx_EventTile_tileError .mx_EventTile_line{padding-left:0;margin-right:0}.mx_EventTile_tileError .mx_EventTile_line span{padding:4px 8px}.mx_EventTile_tileError a{margin-left:1em}@media only screen and (max-width:480px){.mx_EventTile_line,.mx_EventTile_reply{padding-left:0;margin-right:0}.mx_EventTile_content{margin-top:10px;margin-right:0}}.mx_GroupLayout .mx_EventTile>.mx_SenderProfile{line-height:2rem;margin-left:64px}.mx_GroupLayout .mx_EventTile>.mx_EventTile_line{padding-left:64px}.mx_GroupLayout .mx_EventTile>.mx_EventTile_avatar{position:absolute}.mx_GroupLayout .mx_EventTile .mx_MessageTimestamp{position:absolute;width:46px}.mx_GroupLayout .mx_EventTile .mx_EventTile_line,.mx_GroupLayout .mx_EventTile .mx_EventTile_reply{padding-top:1px;padding-bottom:3px;line-height:2.2rem}.mx_GroupLayout .mx_EventTile_info .mx_EventTile_line{padding-left:82px}.mx_MatrixChat_useCompactLayout .mx_EventTile{padding-top:4px}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_line,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_reply{padding-top:0;padding-bottom:0}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info{padding-top:0;font-size:1.3rem}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_line,.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_reply{line-height:2rem}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar{top:4px}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_SenderProfile{font-size:1.3rem}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote{padding-top:8px}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote .mx_EventTile_avatar{top:2px}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote .mx_EventTile_line,.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote .mx_EventTile_reply{padding-top:0;padding-bottom:1px}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation{padding-top:0}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation .mx_EventTile_line,.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation .mx_EventTile_reply{padding-top:0;padding-bottom:0}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_avatar{top:2px}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_e2eIcon{top:3px}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_readAvatars{top:-2rem}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body blockquote,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body dl,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body ol,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body p,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body pre,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body table,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body ul{margin-bottom:4px}.mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList h2{margin-top:6px}.mx_IRCLayout{--name-width:70px;line-height:1.8rem!important}.mx_IRCLayout .mx_EventTile>a{text-decoration:none}.mx_IRCLayout .mx_EventTile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding-top:0}.mx_IRCLayout .mx_EventTile>*{margin-right:5px}.mx_IRCLayout .mx_EventTile>.mx_EventTile_msgOption{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5;-ms-flex-negative:0;flex-shrink:0}.mx_IRCLayout .mx_EventTile>.mx_EventTile_msgOption .mx_EventTile_readAvatars{top:.2rem}.mx_IRCLayout .mx_EventTile>.mx_SenderProfile{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-ms-flex-negative:0;flex-shrink:0;width:var(--name-width);text-overflow:ellipsis;text-align:left;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:visible;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_IRCLayout .mx_EventTile .mx_EventTile_line,.mx_IRCLayout .mx_EventTile .mx_EventTile_reply{padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;min-width:0}.mx_IRCLayout .mx_EventTile>.mx_EventTile_avatar{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;position:relative;top:0;left:0;-ms-flex-negative:0;flex-shrink:0;height:1.8rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_IRCLayout .mx_EventTile>.mx_EventTile_avatar>.mx_BaseAvatar,.mx_IRCLayout .mx_EventTile>.mx_EventTile_avatar>.mx_BaseAvatar>*{height:1.4rem!important;width:1.4rem!important;font-size:1rem!important;line-height:1.5rem!important}.mx_IRCLayout .mx_EventTile .mx_MessageTimestamp{font-size:1rem;width:45px;text-align:right}.mx_IRCLayout .mx_EventTile>.mx_EventTile_e2eIcon{position:absolute;right:unset;left:unset;top:0;padding:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;height:1.8rem;background-position:50%}.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_EventTile_e2eIcon,.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_MTextBody,.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_ReplyThread_wrapper_empty,.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_TextualEvent{display:inline-block}.mx_IRCLayout .mx_EventTile .mx_EventTile_reply{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.mx_IRCLayout .mx_EventTile .mx_EditMessageComposer_buttons{position:relative}.mx_IRCLayout .mx_EventTile_emote>.mx_EventTile_avatar{margin-left:calc(var(--name-width) + 19px)}.mx_IRCLayout blockquote{margin:0}.mx_IRCLayout .mx_EventListSummary>.mx_EventTile_line{padding-left:calc(var(--name-width) + 74px)}.mx_IRCLayout .mx_EventListSummary .mx_EventListSummary_avatars{padding:0;margin:0 9px 0 0}.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar{left:calc(var(--name-width) + 24px);top:0}.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_line{left:calc(var(--name-width) + 24px)}.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_TextualEvent{line-height:1.8rem}.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line{padding-left:0;border-left:0}.mx_IRCLayout .mx_SenderProfile_hover{background-color:#fff;overflow:hidden}.mx_IRCLayout .mx_SenderProfile_hover>span{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_IRCLayout .mx_SenderProfile_hover>span>.mx_SenderProfile_name{overflow:hidden;text-overflow:ellipsis;min-width:var(--name-width);text-align:end}.mx_IRCLayout .mx_SenderProfile:hover{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_IRCLayout .mx_SenderProfile_hover:hover{overflow:visible;width:max(auto,100%);z-index:10}.mx_IRCLayout .mx_ReplyThread{margin:0}.mx_IRCLayout .mx_ReplyThread .mx_SenderProfile{width:unset;max-width:var(--name-width)}.mx_IRCLayout .mx_ReplyThread .mx_SenderProfile_hover{background:transparent}.mx_IRCLayout .mx_ReplyThread .mx_SenderProfile_hover>span>.mx_SenderProfile_name{min-width:inherit}.mx_IRCLayout .mx_ReplyThread .mx_EventTile_emote>.mx_EventTile_avatar{margin-left:0}.mx_IRCLayout .mx_ReplyThread .mx_MessageTimestamp{width:auto}.mx_IRCLayout .mx_ReplyThread .mx_EventTile_e2eIcon{position:relative;-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.mx_IRCLayout .mx_ProfileResizer{position:absolute;height:100%;width:15px;left:calc(80px + var(--name-width));cursor:col-resize;z-index:100}.mx_IRCLayout .mx_Flair>img{height:1.4rem!important;width:1.4rem!important}.mx_JumpToBottomButton{z-index:1000;position:absolute;bottom:12px;right:24px;width:38px;height:50px;text-align:center}.mx_JumpToBottomButton_badge{position:relative;top:-12px;border-radius:16px;font-weight:700;font-size:1.2rem;line-height:1.4rem;text-align:center;display:inline-block;padding:0 4px;color:#fff;background-color:#61708b}.mx_JumpToBottomButton_highlight .mx_JumpToBottomButton_badge{color:#f2f5f8;background-color:#ff4b55}.mx_JumpToBottomButton_scrollDown{position:relative;height:38px;border-radius:19px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;border:1.3px solid #61708b;cursor:pointer}.mx_JumpToBottomButton_scrollDown:before{content:"";position:absolute;top:0;bottom:0;left:0;right:0;-webkit-mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;background:#61708b}.mx_LinkPreviewWidget{margin-top:15px;margin-right:15px;margin-bottom:15px;display:-webkit-box;display:-ms-flexbox;display:flex;border-left:4px solid #ddd;color:#888}.mx_LinkPreviewWidget_image{-webkit-box-flex:0;-ms-flex:0 0 100px;flex:0 0 100px;margin-left:15px;text-align:center;cursor:pointer}.mx_LinkPreviewWidget_caption{margin-left:15px;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.mx_LinkPreviewWidget_title{display:inline;font-weight:700;white-space:normal}.mx_LinkPreviewWidget_siteName{display:inline}.mx_LinkPreviewWidget_description{margin-top:8px;white-space:normal;word-wrap:break-word}.mx_LinkPreviewWidget_cancel{cursor:pointer;width:18px;height:18px}.mx_LinkPreviewWidget_cancel img{-webkit-box-flex:0;-ms-flex:0 0 40px;flex:0 0 40px;visibility:hidden}.mx_LinkPreviewWidget:hover .mx_LinkPreviewWidget_cancel img,.mx_LinkPreviewWidget_cancel.focus-visible:focus img{visibility:visible}.mx_MatrixChat_useCompactLayout .mx_LinkPreviewWidget{margin-top:6px;margin-bottom:6px}.mx_MemberInfo{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-y:auto;margin-top:8px}.mx_MemberInfo,.mx_MemberInfo_name{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_MemberInfo_name{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_MemberInfo_name>.mx_E2EIcon{margin-right:0}.mx_MemberInfo_cancel{height:16px;width:16px;padding:10px 0 10px 10px;cursor:pointer;-webkit-mask-image:url(../../img/minimise.871d2de.svg);mask-image:url(../../img/minimise.871d2de.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:16px center;mask-position:16px center;background-color:#91a1c0}.mx_MemberInfo_name h2{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-x:auto;max-height:50px}.mx_MemberInfo h2{font-size:1.8rem;font-weight:600;margin:16px 0 16px 15px}.mx_MemberInfo_container{margin:0 16px 16px}.mx_MemberInfo .mx_RoomTile_nameContainer{width:154px}.mx_MemberInfo .mx_RoomTile_badge{display:none}.mx_MemberInfo .mx_RoomTile_name{width:160px}.mx_MemberInfo_avatar{background:hsla(0,0%,91%,.77);margin-bottom:16px}.mx_MemberInfo_avatar>img{height:auto;width:100%;max-height:30vh;-o-object-fit:contain;object-fit:contain;display:block}.mx_MemberInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image{cursor:-webkit-zoom-in;cursor:zoom-in}.mx_MemberInfo_profile{margin-bottom:16px}.mx_MemberInfo h3{text-transform:uppercase;color:#9fa9ba;font-weight:700;font-size:1.2rem;margin:4px 0}.mx_MemberInfo_profileField{font-size:1.5rem;position:relative}.mx_MemberInfo_buttons{margin-bottom:16px}.mx_MemberInfo_field{cursor:pointer;font-size:1.5rem;color:#2e2f32;margin-left:8px;line-height:2.3rem}.mx_MemberInfo_createRoom{cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 8px}.mx_MemberInfo_createRoom_label{width:auto!important;cursor:pointer}.mx_MemberInfo label{font-size:1.3rem}.mx_MemberInfo label .mx_MemberInfo_label_text{display:inline-block;max-width:180px;vertical-align:text-top}.mx_MemberInfo input[type=radio]{vertical-align:-2px;margin-right:5px;margin-left:8px}.mx_MemberInfo_statusMessage{font-size:1.1rem;opacity:.5;overflow:hidden;white-space:nowrap;text-overflow:clip}.mx_MemberInfo .mx_MemberInfo_scrollContainer{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_GroupMemberList,.mx_GroupRoomList,.mx_MemberList{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-height:0}.mx_GroupMemberList .mx_Spinner,.mx_GroupRoomList .mx_Spinner,.mx_MemberList .mx_Spinner{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}.mx_GroupMemberList .mx_SearchBox,.mx_GroupRoomList .mx_SearchBox,.mx_MemberList .mx_SearchBox{margin-bottom:5px}.mx_GroupMemberList h2,.mx_GroupRoomList h2,.mx_MemberList h2{text-transform:uppercase;color:#3d3b39;font-weight:600;font-size:1.3rem;padding-left:3px;padding-right:12px;margin-top:8px;margin-bottom:4px}.mx_GroupMemberList .mx_AutoHideScrollbar,.mx_GroupRoomList .mx_AutoHideScrollbar,.mx_MemberList .mx_AutoHideScrollbar{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_GroupMemberList .mx_RightPanel_scopeHeader,.mx_GroupRoomList .mx_RightPanel_scopeHeader,.mx_MemberList .mx_RightPanel_scopeHeader{margin-top:-8px}.mx_GroupMemberList_query,.mx_GroupRoomList_query{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_MemberList_chevron{position:absolute;right:35px;margin-top:-15px}.mx_MemberList_border{overflow-y:auto;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0px}.mx_MemberList_query{height:16px}.mx_MemberList_query[type=text]{font-size:1.2rem}.mx_MemberList_wrapper{padding:10px}.mx_MemberList_invite{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;position:relative;background-color:#0dbd8b;border-radius:4px;margin:5px 9px 9px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:#fff;font-weight:600}.mx_MemberList_invite.mx_AccessibleButton_disabled{background-color:#888;cursor:not-allowed}.mx_MemberList_invite span{padding:8px 0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mx_MemberList_invite span:before{content:"";display:inline-block;background-color:#fff;-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:20px;mask-size:20px;width:20px;height:20px;margin-right:5px}.mx_MemberList_inviteCommunity span:before{-webkit-mask-image:url(../../img/icon-invite-people.d82f491.svg);mask-image:url(../../img/icon-invite-people.d82f491.svg)}.mx_MemberList_addRoomToCommunity span:before{-webkit-mask-image:url(../../img/icons-room-add.bd36e26.svg);mask-image:url(../../img/icons-room-add.bd36e26.svg)}.mx_MessageComposer_wrapper{vertical-align:middle;margin:auto;border-top:1px solid transparent;position:relative;padding-left:82px;padding-right:6px}.mx_MessageComposer_replaced_wrapper{margin-left:auto;margin-right:auto}.mx_MessageComposer_replaced_valign{height:60px;display:table-cell;vertical-align:middle}.mx_MessageComposer_roomReplaced_icon{float:left;margin-right:20px;margin-top:5px;width:31px;height:31px}.mx_MessageComposer_roomReplaced_header{font-weight:700}.mx_MessageComposer_autocomplete_wrapper{position:relative;height:0}.mx_MessageComposer_row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.mx_MessageComposer .mx_MessageComposer_avatar{position:absolute;left:26px}.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar{display:block}.mx_MessageComposer_composecontrols{width:100%}.mx_MessageComposer_e2eIcon.mx_E2EIcon{position:absolute;left:60px;margin-right:0;margin-left:3px;width:12px;height:12px}.mx_MessageComposer_noperm_error{width:100%;height:60px;font-style:italic;color:#888;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_MessageComposer_input_wrapper{cursor:text}.mx_MessageComposer_input,.mx_MessageComposer_input_wrapper{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_MessageComposer_input{vertical-align:middle;min-height:60px;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;font-size:1.4rem;margin-right:6px}.mx_MessageComposer_editor{width:100%;max-height:120px;min-height:19px;overflow-y:auto;overflow-x:hidden;word-break:break-word}.mx_MessageComposer_editor>:first-child{margin-top:0!important}.mx_MessageComposer_editor>:last-child{margin-bottom:0!important}@keyframes visualbell{0%{background-color:#faa}to{background-color:#fff}}.mx_MessageComposer_input_error{-webkit-animation:visualbell .2s;animation:visualbell .2s}.mx_MessageComposer_input blockquote{color:#777;margin:0 0 16px;padding:0 15px;border-left:4px solid #ddd}.mx_MessageComposer_input pre{background-color:rgba(0,0,0,.04);border-radius:3px;padding:10px}.mx_MessageComposer_input textarea{display:block;width:100%;padding:0;margin-top:6px;margin-bottom:6px;border:0;resize:none;outline:none;-webkit-box-shadow:none;box-shadow:none;color:#2e2f32;background-color:#fff;font-size:1.4rem;max-height:120px;overflow:auto;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji}.mx_MessageComposer_input textarea::-moz-placeholder{line-height:100%;color:#0dbd8b;opacity:1}.mx_MessageComposer_input textarea::-webkit-input-placeholder{color:#0dbd8b}.mx_MessageComposer_button_highlight{background:rgba(13,189,139,.25)}.mx_MessageComposer_button_highlight:before{background-color:#0dbd8b!important}.mx_MessageComposer_button{position:relative;margin-right:6px;cursor:pointer;height:26px;width:26px;border-radius:100%}.mx_MessageComposer_button:before{content:"";position:absolute;top:3px;left:3px;height:20px;width:20px;background-color:#c1c6cd;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}.mx_MessageComposer_button:hover{background:rgba(13,189,139,.1)}.mx_MessageComposer_button:hover:before{background-color:#0dbd8b}.mx_MessageComposer_button.mx_MessageComposer_hangup:not(.mx_AccessibleButton_disabled):before{background-color:#ff4b55}.mx_MessageComposer_upload:before{-webkit-mask-image:url(../icons/attach.svg);mask-image:url(../icons/attach.svg)}.mx_MessageComposer_voiceMessage:before{-webkit-mask-image:url(../../img/voip/mic-on-mask.97ec7a0.svg);mask-image:url(../../img/voip/mic-on-mask.97ec7a0.svg)}.mx_MessageComposer_emoji:before{-webkit-mask-image:url(../../img/element-icons/room/composer/emoji.52d7369.svg);mask-image:url(../../img/element-icons/room/composer/emoji.52d7369.svg)}.mx_MessageComposer_stickers:before{-webkit-mask-image:url(../../img/element-icons/room/composer/sticker.8dbe5ec.svg);mask-image:url(../../img/element-icons/room/composer/sticker.8dbe5ec.svg)}.mx_MessageComposer_sendMessage{cursor:pointer;position:relative;margin-right:6px;width:32px;height:32px;border-radius:100%;background-color:#0dbd8b}.mx_MessageComposer_sendMessage:before{position:absolute;height:16px;width:16px;top:8px;left:9px;-webkit-mask-image:url(../../img/element-icons/send-message.a4e9cf8.svg);mask-image:url(../../img/element-icons/send-message.a4e9cf8.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;background-color:#fff;content:""}.mx_MessageComposer_formatting{cursor:pointer;margin:0 11px;width:24px;height:18px}.mx_MessageComposer_formatbar_wrapper{width:100%;background-color:#fff;-webkit-box-shadow:inset 0 1px 0 0 rgba(0,0,0,.08);box-shadow:inset 0 1px 0 0 rgba(0,0,0,.08)}.mx_MessageComposer_formatbar{margin:auto;display:-webkit-box;display:-ms-flexbox;display:flex;height:30px;-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:62px;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1rem;color:#888}.mx_MessageComposer_formatbar *{margin-right:4px}.mx_MessageComposer_format_button,.mx_MessageComposer_formatbar_cancel,.mx_MessageComposer_formatbar_markdown{cursor:pointer}.mx_MessageComposer_formatbar_cancel{margin-right:22px}.mx_MessageComposer_formatbar_markdown{height:17px;width:30px;margin-right:64px}.mx_MessageComposer_input_markdownIndicator{height:10px;width:12px;padding:4px 4px 4px 0}.mx_MessageComposer_formatbar_markdown,.mx_MessageComposer_input_markdownIndicator{cursor:pointer;-webkit-mask-image:url(../../img/markdown.6905ba8.svg);mask-image:url(../../img/markdown.6905ba8.svg);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#c1c6cd}.mx_MessageComposer_formatbar_markdown.mx_MessageComposer_markdownDisabled,.mx_MessageComposer_input_markdownIndicator.mx_MessageComposer_markdownDisabled{opacity:.2}.mx_MatrixChat_useCompactLayout .mx_MessageComposer_input{min-height:50px}.mx_MatrixChat_useCompactLayout .mx_MessageComposer_noperm_error{height:50px}.mx_MessageComposerFormatBar{display:none;width:130px;height:24px;position:absolute;cursor:pointer;border-radius:4px;background-color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1000}.mx_MessageComposerFormatBar.mx_MessageComposerFormatBar_shown{display:block}.mx_MessageComposerFormatBar>*{white-space:nowrap;display:inline-block;position:relative;border:1px solid #e9edf1;margin-left:-1px}.mx_MessageComposerFormatBar>:hover{border-color:#ddd;z-index:1}.mx_MessageComposerFormatBar>:first-child{border-radius:3px 0 0 3px}.mx_MessageComposerFormatBar>:last-child{border-radius:0 3px 3px 0}.mx_MessageComposerFormatBar>:only-child{border-radius:3px}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button{width:27px;height:24px;-webkit-box-sizing:border-box;box-sizing:border-box;background:none;vertical-align:middle}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button:after{content:"";position:absolute;top:0;left:0;height:100%;width:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#2e2f32}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconBold:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/bold.0d80ac7.svg);mask-image:url(../../img/element-icons/room/format-bar/bold.0d80ac7.svg)}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconItalic:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/italic.bf18054.svg);mask-image:url(../../img/element-icons/room/format-bar/italic.bf18054.svg)}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconStrikethrough:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/strikethrough.0264f7b.svg);mask-image:url(../../img/element-icons/room/format-bar/strikethrough.0264f7b.svg)}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconQuote:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/quote.560cd8f.svg);mask-image:url(../../img/element-icons/room/format-bar/quote.560cd8f.svg)}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconCode:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/code.27444ba.svg);mask-image:url(../../img/element-icons/room/format-bar/code.27444ba.svg)}.mx_MessageComposerFormatBar_buttonTooltip{white-space:nowrap;font-size:1.3rem;font-weight:600;min-width:54px;text-align:center}.mx_MessageComposerFormatBar_buttonTooltip .mx_MessageComposerFormatBar_tooltipShortcut{font-size:.9rem;opacity:.7}.mx_NewRoomIntro{margin:40px 0 48px 64px}.mx_NewRoomIntro .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover):after,.mx_NewRoomIntro .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover):before{content:unset}.mx_NewRoomIntro .mx_AccessibleButton_kind_link{padding:0;font-size:inherit}.mx_NewRoomIntro .mx_NewRoomIntro_buttons{margin-top:28px}.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton{line-height:2.4rem;display:inline-block}.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton+.mx_AccessibleButton{margin-left:12px}.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton:not(.mx_AccessibleButton_kind_primary_outline):before{content:"";display:inline-block;background-color:#fff;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:20px;mask-size:20px;width:20px;height:20px;margin-right:5px;vertical-align:text-bottom}.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_NewRoomIntro_inviteButton:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_NewRoomIntro>h2{margin-top:24px;font-size:2.4rem;font-weight:600}.mx_NewRoomIntro>p{margin:0;font-size:1.5rem;color:#737d8c}.mx_NotificationBadge:not(.mx_NotificationBadge_visible){display:none}.mx_NotificationBadge.mx_NotificationBadge_visible{background-color:#61708b;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_highlighted{background-color:#ff4b55}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_dot{background-color:#2e2f32;width:6px;height:6px;border-radius:6px}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_2char{width:1.6rem;height:1.6rem;border-radius:1.6rem}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_3char{width:2.6rem;height:1.6rem;border-radius:1.6rem}.mx_NotificationBadge.mx_NotificationBadge_visible .mx_NotificationBadge_count{font-size:1rem;line-height:1.4rem;color:#fff}.mx_PinnedEventTile{min-height:40px;margin-bottom:5px;width:100%;border-radius:5px}.mx_PinnedEventTile:hover{background-color:#f6f7f8}.mx_PinnedEventTile .mx_PinnedEventTile_sender,.mx_PinnedEventTile .mx_PinnedEventTile_timestamp{color:#868686;font-size:.8em;vertical-align:top;display:inline-block;padding-bottom:3px}.mx_PinnedEventTile .mx_PinnedEventTile_timestamp{padding-left:15px;display:none}.mx_PinnedEventTile .mx_PinnedEventTile_senderAvatar .mx_BaseAvatar{float:left;margin-right:10px}.mx_PinnedEventTile_actions{float:right;margin-right:10px;display:none}.mx_PinnedEventTile:hover .mx_PinnedEventTile_timestamp{display:inline-block}.mx_PinnedEventTile:hover .mx_PinnedEventTile_actions{display:block}.mx_PinnedEventTile_unpinButton{display:inline-block;cursor:pointer;margin-left:10px}.mx_PinnedEventTile_gotoButton{display:inline-block;font-size:.7em}.mx_PinnedEventTile_message{margin-left:50px;position:relative;top:0;left:0}.mx_PinnedEventsPanel{border-top:1px solid transparent}.mx_PinnedEventsPanel_body{max-height:300px;overflow-y:auto;padding-bottom:15px}.mx_PinnedEventsPanel_header{margin:0;padding-top:8px;padding-bottom:15px}.mx_PinnedEventsPanel_cancel{margin:12px;float:right;display:inline-block}.mx_PresenceLabel{font-size:1.1rem;opacity:.5}.mx_ReplyPreview{background:#fff;border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;max-height:50vh;overflow:auto;-webkit-box-shadow:0 -16px 32px rgba(0,0,0,.04);box-shadow:0 -16px 32px rgba(0,0,0,.04)}.mx_ReplyPreview_section{border-bottom:1px solid transparent}.mx_ReplyPreview_header{margin:12px;color:#2e2f32;font-weight:400;opacity:.4}.mx_ReplyPreview_title{float:left}.mx_ReplyPreview_cancel{float:right;cursor:pointer}.mx_ReplyPreview_clear{clear:both}.mx_RoomBreadcrumbs{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_crumb{margin-right:8px;width:32px}.mx_RoomBreadcrumbs.mx_RoomBreadcrumbs-enter{margin-left:-40px}.mx_RoomBreadcrumbs.mx_RoomBreadcrumbs-enter-active{margin-left:0;-webkit-transition:margin-left .64s cubic-bezier(.66,.02,.36,1);transition:margin-left .64s cubic-bezier(.66,.02,.36,1)}.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_placeholder{font-weight:600;font-size:1.4rem;line-height:32px;height:32px}.mx_RoomBreadcrumbs_Tooltip{margin-left:-42px;margin-top:-42px}.mx_RoomHeader{-webkit-box-flex:0;-ms-flex:0 0 50px;flex:0 0 50px;border-bottom:1px solid transparent;background-color:#fff}.mx_RoomHeader .mx_RoomHeader_e2eIcon{height:12px;width:12px}.mx_RoomHeader .mx_RoomHeader_e2eIcon .mx_E2EIcon{margin:0;position:absolute;height:12px;width:12px}.mx_RoomHeader_wrapper{margin:auto;height:50px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:0;padding:0 10px 0 18px}.mx_RoomHeader_wrapper .mx_InviteOnlyIcon_large{margin:0}.mx_RoomHeader_spinner{-webkit-box-flex:1;-ms-flex:1;flex:1;height:36px;padding-left:12px;padding-right:12px}.mx_RoomHeader_textButton{vertical-align:middle;border:0;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;padding:7px 1.5em;cursor:pointer;display:inline-block;outline:none;margin-right:8px;margin-top:-5px}.mx_RoomHeader_textButton_danger{background-color:#ff4b55}.mx_RoomHeader_cancelButton{cursor:pointer;padding-left:12px;padding-right:12px}.mx_RoomHeader_buttons{background-color:#fff}.mx_RoomHeader_buttons,.mx_RoomHeader_info{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomHeader_info{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomHeader_simpleHeader{line-height:5.2rem;color:#45474a;font-size:1.8rem;font-weight:600;overflow:hidden;margin-left:63px;text-overflow:ellipsis;width:100%}.mx_RoomHeader_simpleHeader .mx_RoomHeader_cancelButton{float:right}.mx_RoomHeader_simpleHeader .mx_RoomHeader_icon{margin-left:14px;margin-right:24px;vertical-align:-4px}.mx_RoomHeader_name{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;overflow:hidden;color:#45474a;font-weight:600;font-size:1.8rem;margin:0 7px;border-bottom:1px solid transparent;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomHeader_nametext{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.mx_RoomHeader_settingsHint{color:#a2a2a2!important}.mx_RoomHeader_searchStatus{font-weight:400;opacity:.6}.mx_RoomHeader_avatar,.mx_RoomHeader_avatarPicker,.mx_RoomHeader_avatarPicker_edit,.mx_RoomHeader_avatarPicker_remove,.mx_RoomHeader_name{cursor:pointer}.mx_RoomHeader_avatarPicker_remove{position:absolute;top:-11px;right:-9px}.mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable){color:#0dbd8b}.mx_RoomHeader_placeholder{color:#a2a2a2!important}.mx_RoomHeader_editable{border-bottom:1px solid #c7c7c7!important;min-width:150px;cursor:text}.mx_RoomHeader_editable:focus{border-bottom:1px solid #0dbd8b!important;outline:none;-webkit-box-shadow:none;box-shadow:none}.mx_RoomHeader_topic{-webkit-box-flex:1;-ms-flex:1;flex:1;color:#9e9e9e;font-weight:400;font-size:1.3rem;margin:4px 7px 0;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid transparent;line-height:1.2em;max-height:2.4em}.mx_RoomHeader_avatar{-webkit-box-flex:0;-ms-flex:0;flex:0;margin:0 6px 0 7px;position:relative}.mx_RoomHeader_avatar .mx_BaseAvatar_image{-o-object-fit:cover;object-fit:cover}.mx_RoomHeader_avatarPicker{position:relative}.mx_RoomHeader_avatarPicker_edit{position:absolute;left:16px;top:18px}.mx_RoomHeader_avatarPicker_edit>label{cursor:pointer}.mx_RoomHeader_avatarPicker_edit>input{display:none}.mx_RoomHeader_button{position:relative;margin-left:1px;margin-right:1px;cursor:pointer;height:32px;width:32px;border-radius:100%}.mx_RoomHeader_button:before{content:"";position:absolute;top:4px;left:4px;height:24px;width:24px;background-color:#c1c6cd;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_RoomHeader_button:hover{background:rgba(13,189,139,.1)}.mx_RoomHeader_button:hover:before{background-color:#0dbd8b}.mx_RoomHeader_forgetButton:before{-webkit-mask-image:url(../../img/element-icons/leave.bb917e7.svg);mask-image:url(../../img/element-icons/leave.bb917e7.svg);width:26px}.mx_RoomHeader_appsButton:before{-webkit-mask-image:url(../../img/element-icons/room/apps.5ee9f78.svg);mask-image:url(../../img/element-icons/room/apps.5ee9f78.svg)}.mx_RoomHeader_appsButton_highlight:before{background-color:#0dbd8b}.mx_RoomHeader_searchButton:before{-webkit-mask-image:url(../../img/element-icons/room/search-inset.db6314d.svg);mask-image:url(../../img/element-icons/room/search-inset.db6314d.svg)}.mx_RoomHeader_voiceCallButton:before{-webkit-mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);-webkit-mask-size:20px;mask-size:20px;-webkit-mask-position:center;mask-position:center}.mx_RoomHeader_videoCallButton:before{-webkit-mask-image:url(../../img/element-icons/call/video-call.f465ed0.svg);mask-image:url(../../img/element-icons/call/video-call.f465ed0.svg)}.mx_RoomHeader_showPanel{height:16px}.mx_RoomHeader_voipButton{display:table-cell}.mx_RoomHeader_voipButtons{margin-top:18px}.mx_RoomHeader_pinnedButton:before{-webkit-mask-image:url(../../img/element-icons/room/pin.6ab67ed.svg);mask-image:url(../../img/element-icons/room/pin.6ab67ed.svg)}.mx_RoomHeader_pinsIndicator{position:absolute;right:0;bottom:4px;width:8px;height:8px;border-radius:8px;background-color:#8d99a5}.mx_RoomHeader_pinsIndicatorUnread{background-color:#ff4b55}@media only screen and (max-width:480px){.mx_RoomHeader_wrapper{padding:0}.mx_RoomHeader{overflow:hidden}}.mx_RoomList{padding-right:7px}.mx_RoomList_iconPlus:before{-webkit-mask-image:url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);mask-image:url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg)}.mx_RoomList_iconHash:before{-webkit-mask-image:url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);mask-image:url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg)}.mx_RoomList_iconExplore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg)}.mx_RoomList_iconBrowse:before{-webkit-mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg);mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg)}.mx_RoomList_iconDialpad:before{-webkit-mask-image:url(../../img/element-icons/roomlist/dialpad.37f876f.svg);mask-image:url(../../img/element-icons/roomlist/dialpad.37f876f.svg)}.mx_RoomList_explorePrompt{margin:4px 12px;padding-top:12px;border-top:1px solid #e7e7e7;font-size:1.4rem}.mx_RoomList_explorePrompt div:first-child{font-weight:600;line-height:1.8rem;color:#2e2f32}.mx_RoomList_explorePrompt .mx_AccessibleButton{color:#2e2f32;position:relative;padding:8px 8px 8px 32px;font-size:inherit;margin-top:12px;display:block;text-align:start;background-color:rgba(141,151,165,.2);border-radius:4px}.mx_RoomList_explorePrompt .mx_AccessibleButton:before{content:"";width:16px;height:16px;position:absolute;top:8px;left:8px;background:#737d8c;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mx_RoomList_explorePrompt .mx_AccessibleButton.mx_RoomList_explorePrompt_startChat:before{-webkit-mask-image:url(../../img/element-icons/feedback.a91241e.svg);mask-image:url(../../img/element-icons/feedback.a91241e.svg)}.mx_RoomList_explorePrompt .mx_AccessibleButton.mx_RoomList_explorePrompt_explore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg)}.mx_RoomList_explorePrompt .mx_AccessibleButton.mx_RoomList_explorePrompt_spaceInvite:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_RoomList_explorePrompt .mx_AccessibleButton.mx_RoomList_explorePrompt_spaceExplore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg);mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg)}.mx_RoomPreviewBar{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-align-items:center}.mx_RoomPreviewBar h3{font-size:1.8rem;font-weight:600}.mx_RoomPreviewBar h3.mx_RoomPreviewBar_spinnerTitle{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomPreviewBar .mx_RoomPreviewBar_message p,.mx_RoomPreviewBar h3{word-break:break-all;word-break:break-word}.mx_RoomPreviewBar .mx_Spinner{width:auto;height:auto;margin:10px 10px 10px 0;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_RoomPreviewBar .mx_RoomPreviewBar_footer{font-size:1.2rem;line-height:2rem}.mx_RoomPreviewBar .mx_RoomPreviewBar_footer .mx_Spinner{vertical-align:middle;display:inline-block}.mx_RoomPreviewBar_actions,.mx_RoomPreviewBar_message{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomPreviewBar_message{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.mx_RoomPreviewBar_message p{overflow-wrap:break-word}.mx_RoomPreviewBar_panel{padding:8px 8px 8px 20px;border-top:1px solid transparent;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding:3px 8px}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions>*{margin-left:12px}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;min-width:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message>*{margin:4px}.mx_RoomPreviewBar_dialog{margin:auto;-webkit-box-sizing:content;box-sizing:content;width:400px;border-radius:4px;padding:20px;text-align:center}.mx_RoomPreviewBar_dialog,.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message>*{margin:5px 0 20px}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions .mx_AccessibleButton{padding:7px 50px}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions>*{margin-top:12px}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions .mx_AccessibleButton.mx_AccessibleButton_kind_primary{margin-bottom:7px}.mx_RoomPreviewBar_inviter{font-weight:600}a.mx_RoomPreviewBar_inviter{text-decoration:underline;cursor:pointer}.mx_RoomSublist{margin-left:8px;margin-bottom:4px}.mx_RoomSublist.mx_RoomSublist_hidden{display:none}.mx_RoomSublist .mx_RoomSublist_headerContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-bottom:8px;max-height:24px;color:#8d99a5}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable.mx_RoomSublist_headerContainer_sticky{position:fixed;height:32px;width:calc(100% - 22px)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer .mx_NotificationBadge{margin-left:8px}.mx_RoomSublist .mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) .mx_NotificationBadge{margin-right:4px}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton,.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton{margin-left:8px;position:relative;width:24px;height:24px;border-radius:8px}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:before,.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton:before{content:"";width:16px;height:16px;position:absolute;top:4px;left:4px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#61708b}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:hover,.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton:hover{background:rgba(141,151,165,.2)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton{visibility:hidden;width:0;margin:0}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:before{-webkit-mask-image:url(../../img/element-icons/roomlist/plus.daac9ba.svg);mask-image:url(../../img/element-icons/roomlist/plus.daac9ba.svg)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton:before{-webkit-mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);mask-image:url(../../img/element-icons/context-menu.829cc1a.svg)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:calc(100% - 16px);line-height:1.6rem;font-size:1.3rem;font-weight:600;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText .mx_RoomSublist_collapseBtn{display:inline-block;position:relative;width:14px;height:14px;margin-right:6px}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText .mx_RoomSublist_collapseBtn:before{content:"";width:18px;height:18px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#8d99a5;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText .mx_RoomSublist_collapseBtn.mx_RoomSublist_collapseBtn_collapsed:before{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.mx_RoomSublist:first-child .mx_RoomSublist_headerContainer{height:0;padding-bottom:4px}.mx_RoomSublist .mx_RoomSublist_resizeBox{position:relative;-ms-flex-direction:column;flex-direction:column}.mx_RoomSublist .mx_RoomSublist_resizeBox,.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_tiles{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;overflow:hidden}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_tiles{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;-ms-flex-direction:column;flex-direction:column;-webkit-mask-image:linear-gradient(0deg,transparent,#000 4px);mask-image:linear-gradient(0deg,transparent,#000 4px)}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandles_showNButton{-webkit-box-flex:0;-ms-flex:0 0 32px;flex:0 0 32px}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandles{-webkit-box-flex:0;-ms-flex:0 0 4px;flex:0 0 4px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandle{cursor:ns-resize;border-radius:3px;max-width:64px;height:4px!important;position:relative!important;bottom:0!important}.mx_RoomSublist .mx_RoomSublist_resizeBox.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_resizerHandle,.mx_RoomSublist .mx_RoomSublist_resizeBox:hover .mx_RoomSublist_resizerHandle{opacity:.8;background-color:#2e2f32}.mx_RoomSublist .mx_RoomSublist_showNButton{cursor:pointer;font-size:1.3rem;line-height:1.8rem;color:#737d8c;height:24px;padding-bottom:4px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showNButtonChevron{position:relative;width:18px;height:18px;margin-left:12px;margin-right:16px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#8d99a5;left:-1px}.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showLessButtonChevron,.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showMoreButtonChevron{-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showLessButtonChevron{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mx_RoomSublist.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton,.mx_RoomSublist:not(.mx_RoomSublist_minimized)>.mx_RoomSublist_headerContainer:focus-within .mx_RoomSublist_menuButton,.mx_RoomSublist:not(.mx_RoomSublist_minimized)>.mx_RoomSublist_headerContainer:hover .mx_RoomSublist_menuButton{visibility:visible;width:24px;margin-left:8px}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer{height:auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0;-ms-flex-item-align:end;align-self:flex-end;margin-right:0}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;max-width:100%}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;visibility:visible;width:32px!important;height:32px!important;margin-left:0!important;background-color:rgba(141,151,165,.2);margin-top:8px}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:before{top:8px;left:8px}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_resizeBox{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_showNButton{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_showNButton .mx_RoomSublist_showNButtonChevron{margin-right:12px}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_menuButton{height:16px}.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton,.mx_RoomSublist.mx_RoomSublist_minimized>.mx_RoomSublist_headerContainer:hover .mx_RoomSublist_menuButton{visibility:visible;position:absolute;bottom:48px;right:0;width:16px;height:16px;border-radius:0;z-index:1;background-color:hsla(0,0%,96.1%,.9)}.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton:before,.mx_RoomSublist.mx_RoomSublist_minimized>.mx_RoomSublist_headerContainer:hover .mx_RoomSublist_menuButton:before{top:0;left:0}.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) .mx_RoomSublist_menuButton,.mx_RoomSublist.mx_RoomSublist_minimized>.mx_RoomSublist_headerContainer:hover.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) .mx_RoomSublist_menuButton{bottom:8px}.mx_RoomSublist_contextMenu{padding:20px 16px;width:250px}.mx_RoomSublist_contextMenu hr{margin-top:16px;margin-bottom:16px;margin-right:16px;border:1px solid #2e2f32;opacity:.1}.mx_RoomSublist_contextMenu .mx_RoomSublist_contextMenu_title{font-size:1.5rem;line-height:2rem;font-weight:600;margin-bottom:4px}.mx_RoomSublist_contextMenu .mx_Checkbox,.mx_RoomSublist_contextMenu .mx_RadioButton{margin-top:8px}.mx_RoomSublist_addRoomTooltip{margin-top:-3px}.mx_RoomSublist_skeletonUI{position:relative;margin-left:4px;height:288px}.mx_RoomSublist_skeletonUI:before{background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(hsla(0,0%,100%,0)));background:linear-gradient(180deg,#fff,hsla(0,0%,100%,0));width:100%;height:100%;content:"";position:absolute;-webkit-mask-repeat:repeat-y;mask-repeat:repeat-y;-webkit-mask-size:auto 48px;mask-size:auto 48px;-webkit-mask-image:url(../../img/element-icons/roomlist/skeleton-ui.1f67400.svg);mask-image:url(../../img/element-icons/roomlist/skeleton-ui.1f67400.svg)}.mx_RoomTile{margin-bottom:4px;padding:4px;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomTile.mx_RoomTile_hasMenuOpen,.mx_RoomTile.mx_RoomTile_selected,.mx_RoomTile:focus-within,.mx_RoomTile:hover{background-color:#fff;border-radius:8px}.mx_RoomTile .mx_DecoratedRoomAvatar,.mx_RoomTile .mx_RoomTile_avatarContainer{margin-right:8px}.mx_RoomTile .mx_RoomTile_nameContainer{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;min-width:0;margin-right:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_messagePreview,.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name{margin:0 2px;width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name{font-size:1.4rem;line-height:1.8rem}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name.mx_RoomTile_nameHasUnreadEvents{font-weight:600}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_messagePreview{font-size:1.3rem;line-height:1.8rem;color:#737d8c}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_nameWithPreview{margin-top:-4px}.mx_RoomTile .mx_RoomTile_notificationsButton{margin-left:4px}.mx_RoomTile .mx_RoomTile_badgeContainer{height:16px;margin:auto 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge{margin-right:2px}.mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge_dot{margin-left:5px;margin-right:7px}.mx_RoomTile .mx_RoomTile_menuButton,.mx_RoomTile .mx_RoomTile_notificationsButton{width:20px;min-width:20px;height:20px;margin-top:auto;margin-bottom:auto;position:relative;display:none}.mx_RoomTile .mx_RoomTile_menuButton:before,.mx_RoomTile .mx_RoomTile_notificationsButton:before{top:2px;left:2px;content:"";width:16px;height:16px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#2e2f32}.mx_RoomTile .mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show{display:block}.mx_RoomTile .mx_RoomTile_menuButton:before{-webkit-mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);mask-image:url(../../img/element-icons/context-menu.829cc1a.svg)}.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen .mx_RoomTile_badgeContainer,.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within .mx_RoomTile_badgeContainer,.mx_RoomTile:not(.mx_RoomTile_minimized):hover .mx_RoomTile_badgeContainer{width:0;height:0;display:none}.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen .mx_RoomTile_menuButton,.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen .mx_RoomTile_notificationsButton,.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within .mx_RoomTile_menuButton,.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within .mx_RoomTile_notificationsButton,.mx_RoomTile:not(.mx_RoomTile_minimized):hover .mx_RoomTile_menuButton,.mx_RoomTile:not(.mx_RoomTile_minimized):hover .mx_RoomTile_notificationsButton{display:block}.mx_RoomTile.mx_RoomTile_minimized{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative}.mx_RoomTile.mx_RoomTile_minimized .mx_DecoratedRoomAvatar,.mx_RoomTile.mx_RoomTile_minimized .mx_RoomTile_avatarContainer{margin-right:0}.mx_RoomTile_iconBell:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_RoomTile_iconBellDot:before{-webkit-mask-image:url(../../img/element-icons/roomlist/notifications-default.8b8509e.svg);mask-image:url(../../img/element-icons/roomlist/notifications-default.8b8509e.svg)}.mx_RoomTile_iconBellCrossed:before{-webkit-mask-image:url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);mask-image:url(../../img/element-icons/roomlist/notifications-off.0c57561.svg)}.mx_RoomTile_iconBellMentions:before{-webkit-mask-image:url(../../img/element-icons/roomlist/notifications-dm.ffa8881.svg);mask-image:url(../../img/element-icons/roomlist/notifications-dm.ffa8881.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconStar:before{-webkit-mask-image:url(../../img/element-icons/roomlist/favorite.ff7609d.svg);mask-image:url(../../img/element-icons/roomlist/favorite.ff7609d.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconArrowDown:before{-webkit-mask-image:url(../../img/element-icons/roomlist/low-priority.6c7fb97.svg);mask-image:url(../../img/element-icons/roomlist/low-priority.6c7fb97.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconSettings:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconInvite:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconSignOut:before{-webkit-mask-image:url(../../img/element-icons/leave.bb917e7.svg);mask-image:url(../../img/element-icons/leave.bb917e7.svg)}.mx_RoomUpgradeWarningBar{max-height:235px;background-color:#f7f7f7;padding-left:20px;padding-right:20px;overflow:scroll}.mx_RoomUpgradeWarningBar_wrapped{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;text-align:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center}.mx_RoomUpgradeWarningBar_header{color:#ff4b55;font-weight:700}.mx_RoomUpgradeWarningBar_body{color:#ff4b55}.mx_RoomUpgradeWarningBar_upgradelink{color:#ff4b55;text-decoration:underline}.mx_RoomUpgradeWarningBar_small{color:#888;font-size:70%}.mx_SearchBar{height:56px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-bottom:1px solid transparent}.mx_SearchBar .mx_SearchBar_input{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;margin-left:22px}.mx_SearchBar .mx_SearchBar_searchButton{cursor:pointer;width:37px;height:37px;background-color:#0dbd8b;-webkit-mask:url(../../img/feather-customised/search-input.044bfa7.svg);mask:url(../../img/feather-customised/search-input.044bfa7.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.mx_SearchBar .mx_SearchBar_buttons{display:inherit}.mx_SearchBar .mx_SearchBar_button{border:0;margin:0 0 0 22px;padding:5px;font-size:1.5rem;cursor:pointer;color:#2e2f32;border-bottom:2px solid #0dbd8b;font-weight:600}.mx_SearchBar .mx_SearchBar_unselected{color:#9fa9ba;border-color:transparent}.mx_SearchBar .mx_SearchBar_cancel{background-color:#ff4b55;-webkit-mask:url(../../img/cancel.4b9715b.svg);mask:url(../../img/cancel.4b9715b.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:14px;mask-size:14px;padding:9px;margin:0 12px 0 3px;cursor:pointer}.mx_SendMessageComposer{-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;font-size:1.4rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-right:6px;min-width:0}.mx_SendMessageComposer,.mx_SendMessageComposer .mx_BasicMessageComposer{-webkit-box-flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal}.mx_SendMessageComposer .mx_BasicMessageComposer{-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;min-height:50px}.mx_SendMessageComposer .mx_BasicMessageComposer .mx_BasicMessageComposer_input{padding:3px 0;margin:auto 0;max-height:140px;overflow-y:auto}.mx_Stickers_content{overflow:hidden}.mx_Stickers_content_container{overflow:hidden;height:300px}#mx_persistedElement_stickerPicker .mx_AppTileFullWidth{height:unset;-webkit-box-sizing:border-box;box-sizing:border-box;border-left:none;border-right:none;border-bottom:none}#mx_persistedElement_stickerPicker .mx_AppTileMenuBar{padding:0}#mx_persistedElement_stickerPicker iframe{height:283px}.mx_Stickers_contentPlaceholder{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.mx_Stickers_contentPlaceholder p{max-width:200px}.mx_Stickers_addLink{display:inline;cursor:pointer;color:#0dbd8b}.mx_Stickers_hideStickers{z-index:2001}.mx_TopUnreadMessagesBar{z-index:1000;position:absolute;top:24px;right:24px;width:38px}.mx_TopUnreadMessagesBar:after{content:"";position:absolute;top:-8px;left:10.5px;width:4px;height:4px;border-radius:16px;background-color:#f2f5f8;border:6px solid #0dbd8b;pointer-events:none}.mx_TopUnreadMessagesBar_scrollUp{height:38px;border-radius:19px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;border:1.3px solid #61708b;cursor:pointer}.mx_TopUnreadMessagesBar_scrollUp:before{content:"";position:absolute;width:36px;height:36px;-webkit-mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;background:#61708b;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mx_TopUnreadMessagesBar_markAsRead{display:block;width:18px;height:18px;background:#fff;border:1.3px solid #61708b;border-radius:10px;margin:5px auto}.mx_TopUnreadMessagesBar_markAsRead:before{content:"";position:absolute;width:18px;height:18px;-webkit-mask-image:url(../../img/cancel.4b9715b.svg);mask-image:url(../../img/cancel.4b9715b.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:10px;mask-size:10px;-webkit-mask-position:4px 4px;mask-position:4px 4px;background:#61708b}.mx_VoiceRecordComposerTile_stop{width:28px;height:28px;border:2px solid #e3e8f0;border-radius:32px;margin-right:16px;position:relative}.mx_VoiceRecordComposerTile_stop:after{content:"";width:14px;height:14px;position:absolute;top:7px;left:7px;border-radius:2px;background-color:#ff4b55}.mx_VoiceRecordComposerTile_delete{width:14px;height:18px;vertical-align:middle;margin-right:11px;background-color:#8d99a5;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/trashcan.26f6c28.svg);mask-image:url(../../img/element-icons/trashcan.26f6c28.svg)}.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer{margin:6px 12px 6px 6px;position:relative}.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording{padding-left:22px}.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording:before{-webkit-animation:recording-pulse 2s infinite;animation:recording-pulse 2s infinite;content:"";background-color:#ff4b55;width:10px;height:10px;position:absolute;left:12px;top:18px;border-radius:10px}@-webkit-keyframes recording-pulse{0%{opacity:1}35%{opacity:0}65%{opacity:1}}@keyframes recording-pulse{0%{opacity:1}35%{opacity:0}65%{opacity:1}}.mx_WhoIsTypingTile{margin-left:-18px;padding-top:18px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_WhoIsTypingTile_avatars{-webkit-box-flex:0;-ms-flex:0 0 83px;flex:0 0 83px;text-align:center}.mx_WhoIsTypingTile_avatars>:not(:first-child){margin-left:-12px}.mx_WhoIsTypingTile_avatars .mx_BaseAvatar_initial{padding-top:1px}.mx_WhoIsTypingTile_avatars .mx_BaseAvatar{border:1px solid #fff;border-radius:40px}.mx_WhoIsTypingTile_remainingAvatarPlaceholder{position:relative;display:inline-block;color:#acacac;background-color:#ddd;border:1px solid #fff;border-radius:40px;width:24px;height:24px;line-height:2.4rem;font-size:.8em;vertical-align:top;text-align:center}.mx_WhoIsTypingTile_label{-webkit-box-flex:1;-ms-flex:1;flex:1;font-size:1.4rem;font-weight:600;color:#9e9e9e}.mx_WhoIsTypingTile_label>span{background-image:url(../../img/typing-indicator-2x.0eb9f0e.gif);background-size:25px;background-position:0 100%;background-repeat:no-repeat;padding-bottom:15px;display:block}.mx_MatrixChat_useCompactLayout .mx_WhoIsTypingTile{padding-top:4px}.mx_AvatarSetting_avatar{width:90px;min-width:90px;height:90px;margin-top:8px;position:relative}.mx_AvatarSetting_avatar .mx_AvatarSetting_hover{-webkit-transition:opacity .08s cubic-bezier(.46,.03,.52,.96);transition:opacity .08s cubic-bezier(.46,.03,.52,.96);position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none;line-height:90px;text-align:center}.mx_AvatarSetting_avatar .mx_AvatarSetting_hover>span{color:#fff;position:relative;font-weight:500}.mx_AvatarSetting_avatar .mx_AvatarSetting_hover .mx_AvatarSetting_hoverBg{position:absolute;top:0;bottom:0;left:0;right:0;opacity:.5;background-color:#2e2f32;border-radius:90px}.mx_AvatarSetting_avatar.mx_AvatarSetting_avatar_hovering .mx_AvatarSetting_hover{opacity:1}.mx_AvatarSetting_avatar:not(.mx_AvatarSetting_avatar_hovering) .mx_AvatarSetting_hover{opacity:0}.mx_AvatarSetting_avatar>*{-webkit-box-sizing:border-box;box-sizing:border-box}.mx_AvatarSetting_avatar .mx_AccessibleButton.mx_AccessibleButton_kind_primary{margin-top:8px}.mx_AvatarSetting_avatar .mx_AccessibleButton.mx_AccessibleButton_kind_link_sm{width:100%}.mx_AvatarSetting_avatar>img{cursor:pointer;-o-object-fit:cover;object-fit:cover}.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder,.mx_AvatarSetting_avatar>img{display:block;height:90px;width:inherit;border-radius:90px;cursor:pointer}.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder:before{background-color:#2e2f32;-webkit-mask:url(../../img/feather-customised/user.7a4d23d.svg);mask:url(../../img/feather-customised/user.7a4d23d.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:36px;mask-size:36px;-webkit-mask-position:center;mask-position:center;content:"";position:absolute;top:0;bottom:0;left:0;right:0}.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton{width:32px;height:32px;border-radius:32px;background-color:#e7e7e7;position:absolute;bottom:0;right:0}.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton:before{content:"";display:block;width:100%;height:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:55%;mask-size:55%;background-color:#2e2f32;-webkit-mask-image:url(../../img/feather-customised/edit.fd55ec2.svg);mask-image:url(../../img/feather-customised/edit.fd55ec2.svg)}.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder{background-color:#f4f6fa}.mx_CrossSigningPanel_statusList{border-spacing:0}.mx_CrossSigningPanel_statusList td{padding:0}.mx_CrossSigningPanel_statusList td:first-of-type{-webkit-padding-end:1em;padding-inline-end:1em}.mx_CrossSigningPanel_buttonRow{margin:1em 0}.mx_CrossSigningPanel_buttonRow :nth-child(n+1){-webkit-margin-end:10px;margin-inline-end:10px}.mx_DevicesPanel{display:table;table-layout:fixed;width:880px;border-spacing:10px}.mx_DevicesPanel_header{display:table-header-group;font-weight:700}.mx_DevicesPanel_header>.mx_DevicesPanel_deviceButtons{height:48px}.mx_DevicesPanel_header>div{display:table-cell;vertical-align:middle}.mx_DevicesPanel_header .mx_DevicesPanel_deviceName{width:50%}.mx_DevicesPanel_header .mx_DevicesPanel_deviceLastSeen{width:30%}.mx_DevicesPanel_header .mx_DevicesPanel_deviceButtons{width:20%}.mx_DevicesPanel_device{display:table-row}.mx_DevicesPanel_device>div{display:table-cell}.mx_DevicesPanel_myDevice{font-weight:700}.mx_E2eAdvancedPanel_settingLongDescription{margin-right:150px}.mx_ExistingEmailAddress{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:5px}.mx_ExistingEmailAddress_delete{margin-right:5px;cursor:pointer;vertical-align:middle}.mx_ExistingEmailAddress_email,.mx_ExistingEmailAddress_promptText{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:10px}.mx_ExistingEmailAddress_confirmBtn{margin-left:5px}.mx_IntegrationManager .mx_Dialog{width:60%;height:70%;overflow:hidden;padding:0;max-width:none;max-height:none}.mx_IntegrationManager iframe{background-color:#fff;border:0;width:100%;height:100%}.mx_IntegrationManager_loading h3{text-align:center}.mx_IntegrationManager_error{text-align:center;padding-top:20px}.mx_IntegrationManager_error h3{color:#ff4b55}.mx_UserNotifSettings_tableRow{display:table-row}.mx_UserNotifSettings_inputCell{display:table-cell;padding-bottom:8px;padding-right:8px;width:16px}.mx_UserNotifSettings_labelCell{padding-bottom:8px;width:400px;display:table-cell}.mx_UserNotifSettings_pushRulesTableWrapper{padding-bottom:8px}.mx_UserNotifSettings_pushRulesTable{width:100%;table-layout:fixed}.mx_UserNotifSettings_pushRulesTable thead{font-weight:700}.mx_UserNotifSettings_pushRulesTable tbody th{font-weight:400}.mx_UserNotifSettings_pushRulesTable tbody th:first-child{text-align:left}.mx_UserNotifSettings_keywords{cursor:pointer;color:#0dbd8b}.mx_UserNotifSettings_devicesTable td{padding-left:20px;padding-right:20px}.mx_UserNotifSettings_notifTable{display:table;position:relative}.mx_UserNotifSettings_notifTable .mx_Spinner{position:absolute}.mx_NotificationSound_soundUpload{display:none}.mx_NotificationSound_browse{color:#0dbd8b;border:1px solid #0dbd8b;background-color:transparent}.mx_NotificationSound_save{margin-left:5px;color:#fff;background-color:#0dbd8b}.mx_NotificationSound_resetSound{margin-top:5px;color:#fff;border:#ff4b55;background-color:#ff4b55}.mx_ExistingPhoneNumber{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:5px}.mx_ExistingPhoneNumber_delete{margin-right:5px;cursor:pointer;vertical-align:middle}.mx_ExistingPhoneNumber_address,.mx_ExistingPhoneNumber_promptText{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:10px}.mx_ExistingPhoneNumber_confirmBtn{margin-left:5px}.mx_ExistingPhoneNumber_verification{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_ExistingPhoneNumber_verification .mx_Field{margin:0 0 0 1em}.mx_PhoneNumbers_input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_PhoneNumbers_input>.mx_Field{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_PhoneNumbers_country{width:80px}.mx_ProfileSettings_controls_topic>textarea{resize:vertical}.mx_ProfileSettings_profile{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_ProfileSettings_controls{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;margin-right:54px}.mx_ProfileSettings_controls .mx_SettingsTab_subheading{margin-top:0}.mx_ProfileSettings_controls .mx_Field #profileTopic{height:4em}.mx_ProfileSettings_controls .mx_Field:first-child{margin-top:0}.mx_ProfileSettings_hostingSignup{margin-left:20px}.mx_ProfileSettings_hostingSignup img{margin-left:5px}.mx_ProfileSettings_avatarUpload{display:none}.mx_ProfileSettings_profileForm{margin-right:100px;border-bottom:1px solid #e7e7e7}.mx_ProfileSettings_buttons{margin-top:10px;margin-bottom:28px}.mx_ProfileSettings_buttons>.mx_AccessibleButton_kind_link{padding-left:0}.mx_SecureBackupPanel_deviceNotVerified,.mx_SecureBackupPanel_deviceVerified,.mx_SecureBackupPanel_sigInvalid,.mx_SecureBackupPanel_sigValid{font-weight:700}.mx_SecureBackupPanel_deviceVerified,.mx_SecureBackupPanel_sigValid{color:#76cfa5}.mx_SecureBackupPanel_deviceNotVerified,.mx_SecureBackupPanel_sigInvalid{color:#ba6363}.mx_SecureBackupPanel_deviceName{font-style:italic}.mx_SecureBackupPanel_buttonRow{margin:1em 0}.mx_SecureBackupPanel_buttonRow :nth-child(n+1){-webkit-margin-end:10px;margin-inline-end:10px}.mx_SecureBackupPanel_statusList{border-spacing:0}.mx_SecureBackupPanel_statusList td{padding:0}.mx_SecureBackupPanel_statusList td:first-of-type{-webkit-padding-end:1em;padding-inline-end:1em}.mx_SetIdServer .mx_Field_input{margin-right:100px}.mx_SetIdServer_tooltip{max-width:120px}.mx_SetIntegrationManager{margin-top:10px;margin-bottom:10px}.mx_SetIntegrationManager>.mx_SettingsTab_heading{margin-bottom:10px}.mx_SetIntegrationManager>.mx_SettingsTab_heading>.mx_SettingsTab_subheading{display:inline-block;padding-left:5px}.mx_SetIntegrationManager .mx_ToggleSwitch{display:inline-block;float:right;top:9px;margin-right:100px}.mx_ExistingSpellCheckLanguage{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:5px}.mx_ExistingSpellCheckLanguage_language{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:10px}.mx_GeneralUserSettingsTab_spellCheckLanguageInput{margin-top:1em;margin-bottom:1em}.mx_SpellCheckLanguages{margin-right:100px}.mx_UpdateCheckButton_summary{margin-left:16px}.mx_UpdateCheckButton_summary .mx_AccessibleButton_kind_link{padding:0}.mx_SettingsTab{color:#61708b}.mx_SettingsTab_warningText{color:#ff4b55}.mx_SettingsTab_heading{font-size:2rem;font-weight:600;color:#2e2f32;margin-bottom:10px}.mx_SettingsTab_heading:nth-child(n+2){margin-top:30px}.mx_SettingsTab_subheading{font-size:1.6rem;display:block;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-weight:600;color:#2e2f32;margin-bottom:10px;margin-top:12px}.mx_SettingsTab_subsectionText{color:#61708b;font-size:1.4rem;display:block;margin:10px 100px 10px 0}.mx_SettingsTab_section{margin-bottom:24px}.mx_SettingsTab_section .mx_SettingsFlag{margin-right:100px;margin-bottom:10px}.mx_SettingsTab_section.mx_SettingsTab_subsectionText .mx_SettingsFlag{margin-right:0!important}.mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label{vertical-align:middle;display:inline-block;font-size:1.4rem;color:#2e2f32;max-width:calc(100% - 4.8rem);-webkit-box-sizing:border-box;box-sizing:border-box;padding-right:10px}.mx_SettingsTab_section .mx_SettingsFlag .mx_ToggleSwitch{float:right}.mx_SettingsTab_linkBtn{cursor:pointer;color:#0dbd8b;word-break:break-all}.mx_SettingsTab a{color:#238cf5}.mx_GeneralRoomSettingsTab_profileSection{margin-top:10px}.mx_RolesRoomSettingsTab ul{margin-bottom:0}.mx_RolesRoomSettingsTab_unbanBtn{margin-right:10px;margin-bottom:5px}.mx_SecurityRoomSettingsTab_warning{display:block}.mx_SecurityRoomSettingsTab_warning img{vertical-align:middle;margin-right:5px;margin-left:3px;margin-bottom:5px}.mx_SecurityRoomSettingsTab_encryptionSection{margin-bottom:25px}.mx_AppearanceUserSettingsTab_fontSlider,.mx_AppearanceUserSettingsTab_fontSlider_preview,.mx_AppearanceUserSettingsTab_Layout{margin-right:100px}.mx_AppearanceUserSettingsTab .mx_Field{width:256px}.mx_AppearanceUserSettingsTab_fontScaling{color:#2e2f32}.mx_AppearanceUserSettingsTab_fontSlider{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:15px;background:rgba(227,232,240,.2);border-radius:10px;font-size:10px;margin-top:24px;margin-bottom:24px}.mx_AppearanceUserSettingsTab_fontSlider_preview{border:1px solid #e3e8f0;border-radius:10px;padding:0 16px 9px;pointer-events:none}.mx_AppearanceUserSettingsTab_fontSlider_preview .mx_EventTile_msgOption{display:none}.mx_AppearanceUserSettingsTab_fontSlider_preview.mx_IRCLayout{padding-top:9px}.mx_AppearanceUserSettingsTab_fontSlider_smallText{font-size:15px;padding-right:20px;padding-left:5px;font-weight:500}.mx_AppearanceUserSettingsTab_fontSlider_largeText{font-size:18px;padding-left:20px;padding-right:5px;font-weight:500}.mx_AppearanceUserSettingsTab>.mx_SettingsTab_SubHeading{margin-bottom:32px}.mx_AppearanceUserSettingsTab_themeSection{color:#2e2f32}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:4px;margin-bottom:30px}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton{padding:1.6rem;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:10px;width:180px;background:#e3e8f0;opacity:.4;-ms-flex-negative:1;flex-shrink:1;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;margin-right:15px;margin-top:10px;font-weight:600;color:#61708b}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton>span{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled{opacity:1}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_light{background-color:#f3f8fd;color:#2e2f32}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_dark{background-color:#25282e;color:#f3f8fd}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_dark>input>div,.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_dark>input>div>div{border-color:#e3e8f0}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_black{background-color:#000;color:#f3f8fd}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_black>input>div,.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_black>input>div>div{border-color:#e3e8f0}.mx_SettingsTab_customFontSizeField{margin-left:calc(1.6rem + 10px)}.mx_AppearanceUserSettingsTab_Layout_RadioButtons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;color:#2e2f32}.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_AppearanceUserSettingsTab_spacer{width:24px}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:1;flex-shrink:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:300px;border:1px solid #e3e8f0;border-radius:10px}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_EventTile_msgOption,.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_MessageActionBar{display:none}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_AppearanceUserSettingsTab_Layout_RadioButton_preview{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:10px;pointer-events:none}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_RadioButton{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;padding:10px}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_EventTile_content{margin-right:0}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton.mx_AppearanceUserSettingsTab_Layout_RadioButton_selected{border-color:#0dbd8b}.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton{border-top:1px solid #e3e8f0}.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton>input+div{border-color:rgba(97,112,139,.2)}.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton_checked{background-color:rgba(13,189,139,.08)}.mx_AppearanceUserSettingsTab_Advanced{color:#2e2f32}.mx_AppearanceUserSettingsTab_Advanced>*{margin-bottom:16px}.mx_AppearanceUserSettingsTab_Advanced .mx_AppearanceUserSettingsTab_AdvancedToggle{color:#0dbd8b;cursor:pointer}.mx_AppearanceUserSettingsTab_Advanced .mx_AppearanceUserSettingsTab_systemFont{margin-left:calc(1.6rem + 10px)}.mx_GeneralUserSettingsTab_changePassword .mx_Field{margin-right:100px}.mx_GeneralUserSettingsTab_changePassword .mx_Field:first-child{margin-top:0}.mx_GeneralUserSettingsTab_accountSection .mx_SettingsTab_subheading:nth-child(n+1),.mx_GeneralUserSettingsTab_discovery .mx_SettingsTab_subheading:nth-child(n+2),.mx_SetIdServer .mx_SettingsTab_subheading{margin-top:24px}.mx_GeneralUserSettingsTab_accountSection .mx_Spinner,.mx_GeneralUserSettingsTab_discovery .mx_Spinner{-webkit-box-pack:left;-ms-flex-pack:left;justify-content:left}.mx_GeneralUserSettingsTab_accountSection .mx_EmailAddresses,.mx_GeneralUserSettingsTab_accountSection .mx_PhoneNumbers,.mx_GeneralUserSettingsTab_discovery .mx_ExistingEmailAddress,.mx_GeneralUserSettingsTab_discovery .mx_ExistingPhoneNumber,.mx_GeneralUserSettingsTab_languageInput{margin-right:100px}.mx_GeneralUserSettingsTab_warningIcon{vertical-align:middle}.mx_HelpUserSettingsTab_debugButton{margin-bottom:5px;margin-top:5px}.mx_HelpUserSettingsTab span.mx_AccessibleButton{word-break:break-word}.mx_HelpUserSettingsTab code{word-break:break-all;-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}.mx_HelpUserSettingsTab_accessToken{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;border-radius:5px;border:1px solid #747474;margin-bottom:10px;margin-top:10px;padding:10px}.mx_HelpUserSettingsTab_accessToken_copy{-ms-flex-negative:0;flex-shrink:0;cursor:pointer;margin-left:20px;display:inherit}.mx_HelpUserSettingsTab_accessToken_copy>div{-webkit-mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);background-color:#2e2f32;margin-left:5px;width:20px;height:20px;background-repeat:no-repeat}.mx_LabsUserSettingsTab .mx_SettingsTab_section{margin-top:32px}.mx_LabsUserSettingsTab .mx_SettingsTab_section .mx_SettingsFlag{margin-right:0}.mx_MjolnirUserSettingsTab .mx_Field{margin-right:100px}.mx_MjolnirUserSettingsTab_listItem{margin-bottom:2px}.mx_NotificationUserSettingsTab .mx_SettingsTab_heading{margin-bottom:10px}.mx_PreferencesUserSettingsTab .mx_Field{margin-right:100px}.mx_PreferencesUserSettingsTab .mx_SettingsTab_section{margin-bottom:30px}.mx_SecurityUserSettingsTab .mx_DevicesPanel{width:auto;max-width:880px}.mx_SecurityUserSettingsTab_deviceInfo{display:table;padding-left:0}.mx_SecurityUserSettingsTab_deviceInfo>li{display:table-row}.mx_SecurityUserSettingsTab_deviceInfo>li>label,.mx_SecurityUserSettingsTab_deviceInfo>li>span{display:table-cell;padding-right:1em}.mx_SecurityUserSettingsTab_bulkOptions .mx_AccessibleButton,.mx_SecurityUserSettingsTab_importExportButtons .mx_AccessibleButton{margin-right:10px}.mx_SecurityUserSettingsTab_importExportButtons{margin-bottom:15px}.mx_SecurityUserSettingsTab_ignoredUser{margin-bottom:5px}.mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton{margin-right:10px}.mx_SecurityUserSettingsTab .mx_SettingsTab_section .mx_AccessibleButton_kind_link{padding:0;font-size:inherit}.mx_SecurityUserSettingsTab .mx_SecurityUserSettingsTab_warning{color:#ff4b55;position:relative;padding-left:40px;margin-top:30px}.mx_SecurityUserSettingsTab .mx_SecurityUserSettingsTab_warning:before{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 center;mask-position:0 center;-webkit-mask-size:2.4rem;mask-size:2.4rem;position:absolute;width:2.4rem;height:2.4rem;content:"";top:0;left:0;background-color:#ff4b55;-webkit-mask-image:url(../../img/feather-customised/alert-triangle.38aca3a.svg);mask-image:url(../../img/feather-customised/alert-triangle.38aca3a.svg)}.mx_VoiceUserSettingsTab .mx_Field{margin-right:100px}.mx_VoiceUserSettingsTab_missingMediaPermissions{margin-bottom:15px}.mx_SpaceBasicSettings .mx_Field{margin:32px 0}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:24px}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer .mx_SpaceBasicSettings_avatar{position:relative;height:80px;width:80px;background-color:#8d99a5;border-radius:16px}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer img.mx_SpaceBasicSettings_avatar{width:80px;height:80px;-o-object-fit:cover;object-fit:cover;border-radius:16px}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer div.mx_SpaceBasicSettings_avatar{cursor:pointer}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer div.mx_SpaceBasicSettings_avatar:before{content:"";position:absolute;height:80px;width:80px;top:0;left:0;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:20px;mask-size:20px;-webkit-mask-image:url(../../img/element-icons/camera.a81a395.svg);mask-image:url(../../img/element-icons/camera.a81a395.svg)}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer>input[type=file]{display:none}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer>.mx_AccessibleButton_kind_link{display:inline-block;padding:0;margin:auto 16px;color:#368bd6}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer>.mx_SpaceBasicSettings_avatar_remove{color:#ff4b55}.mx_SpaceBasicSettings .mx_FormButton{padding:8px 22px;margin-left:auto;display:block;width:-webkit-min-content;width:-moz-min-content;width:min-content}.mx_SpaceBasicSettings .mx_AccessibleButton_disabled{cursor:not-allowed}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu_background{background-color:rgba(46,48,51,.38);opacity:.6;left:71px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu{padding:24px;width:480px;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#fff;position:relative}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu>div>h2{font-weight:600;font-size:1.8rem;margin-top:4px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu>div>p{font-size:1.5rem;color:#737d8c;margin:0}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_BetaCard_betaPill{position:absolute;top:24px;right:24px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType{position:relative;padding:16px 32px 16px 72px;width:432px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;border:1px solid #e7e7e7;font-size:1.5rem;margin:20px 0}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType>h3{font-weight:600;margin:0 0 4px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType>span{color:#737d8c}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:before{position:absolute;content:"";width:32px;height:32px;top:24px;left:20px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px;mask-size:24px;background-color:#8d99a5}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover{border-color:#0dbd8b}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover:before{background-color:#0dbd8b}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover>span{color:#2e2f32}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType_public:before{-webkit-mask-image:url(../../img/globe.8201f08.svg);mask-image:url(../../img/globe.8201f08.svg)}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType_private:before{-webkit-mask-image:url(../../img/element-icons/lock.1f264bd.svg);mask-image:url(../../img/element-icons/lock.1f264bd.svg)}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenu_back{width:28px;height:28px;position:relative;background-color:rgba(141,151,165,.2);border-radius:14px;margin-bottom:12px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenu_back:before{content:"";position:absolute;height:28px;width:28px;top:0;left:0;background-color:#8d99a5;-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:2px 3px;mask-position:2px 3px;-webkit-mask-size:24px;mask-size:24px;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton_kind_primary{padding:8px 22px;margin-left:auto;display:block;width:-webkit-min-content;width:-moz-min-content;width:min-content}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton_disabled{cursor:not-allowed}.mx_SpacePublicShare .mx_AccessibleButton{position:relative;padding:16px 32px 16px 72px;width:432px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;border:1px solid #e7e7e7;font-size:1.5rem;margin:20px 0}.mx_SpacePublicShare .mx_AccessibleButton>h3{font-weight:600;margin:0 0 4px}.mx_SpacePublicShare .mx_AccessibleButton>span{color:#737d8c}.mx_SpacePublicShare .mx_AccessibleButton:before{position:absolute;content:"";width:32px;height:32px;top:24px;left:20px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px;mask-size:24px;background-color:#8d99a5}.mx_SpacePublicShare .mx_AccessibleButton:hover{border-color:#0dbd8b}.mx_SpacePublicShare .mx_AccessibleButton:hover:before{background-color:#0dbd8b}.mx_SpacePublicShare .mx_AccessibleButton:hover>span{color:#2e2f32}.mx_SpacePublicShare .mx_AccessibleButton.mx_SpacePublicShare_shareButton:before{-webkit-mask-image:url(../../img/element-icons/link.8f4b1fc.svg);mask-image:url(../../img/element-icons/link.8f4b1fc.svg)}.mx_SpacePublicShare .mx_AccessibleButton.mx_SpacePublicShare_inviteButton:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_InlineTermsAgreement_cbContainer{margin-bottom:10px;font-size:1.4rem}.mx_InlineTermsAgreement_cbContainer a{color:#0dbd8b;text-decoration:none}.mx_InlineTermsAgreement_cbContainer .mx_InlineTermsAgreement_checkbox{margin-top:10px}.mx_InlineTermsAgreement_cbContainer .mx_InlineTermsAgreement_checkbox input{vertical-align:text-bottom}.mx_InlineTermsAgreement_link{display:inline-block;-webkit-mask-image:url(../../img/external-link.a8d3e9b.svg);mask-image:url(../../img/external-link.a8d3e9b.svg);background-color:#0dbd8b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:12px;height:12px;margin-left:3px;vertical-align:middle}.mx_AnalyticsToast .mx_AccessibleButton_kind_danger{background:none;color:#0dbd8b}.mx_AnalyticsToast .mx_AccessibleButton_kind_primary{background:#0dbd8b;color:#fff}.mx_NonUrgentEchoFailureToast .mx_NonUrgentEchoFailureToast_icon{display:inline-block;width:1.8rem;height:1.8rem;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#fff;-webkit-mask-image:url(../../img/element-icons/cloud-off.33cd28e.svg);mask-image:url(../../img/element-icons/cloud-off.33cd28e.svg);margin-right:8px}.mx_NonUrgentEchoFailureToast span{vertical-align:middle}.mx_NonUrgentEchoFailureToast .mx_AccessibleButton{padding:0}.mx_VerificationShowSas_decimalSas{text-align:center;font-weight:700;padding-left:3px;padding-right:3px}.mx_VerificationShowSas_decimalSas span{margin-left:5px;margin-right:5px}.mx_VerificationShowSas_emojiSas{text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:25px 0}.mx_VerificationShowSas_emojiSas_block{display:inline-block;margin-bottom:16px;position:relative;width:52px}.mx_AuthPage_modal .mx_VerificationShowSas_emojiSas_block,.mx_Dialog .mx_VerificationShowSas_emojiSas_block{width:60px}.mx_VerificationShowSas_emojiSas_emoji{font-size:3.2rem}.mx_VerificationShowSas_emojiSas_label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:1.2rem}.mx_VerificationShowSas_emojiSas_break{-ms-flex-preferred-size:100%;flex-basis:100%}.mx_VerificationShowSas .mx_Dialog_buttons button.mx_VerificationShowSas_matchButton{color:#0dbd8b;background-color:rgba(3,179,129,.16);border:none}.mx_VerificationShowSas .mx_Dialog_buttons button.mx_VerificationShowSas_noMatchButton{color:#ff4b55;background-color:rgba(255,75,85,.16);border:none}.mx_PlayPauseButton{position:relative;width:32px;height:32px;border-radius:32px;background-color:#fff}.mx_PlayPauseButton:before{content:"";position:absolute;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_PlayPauseButton.mx_PlayPauseButton_disabled:before{opacity:.5}.mx_PlayPauseButton.mx_PlayPauseButton_play:before{width:13px;height:16px;top:8px;left:12px;-webkit-mask-image:url(../../img/element-icons/play.a72552b.svg);mask-image:url(../../img/element-icons/play.a72552b.svg)}.mx_PlayPauseButton.mx_PlayPauseButton_pause:before{width:10px;height:12px;top:10px;left:11px;-webkit-mask-image:url(../../img/element-icons/pause.c4c0886.svg);mask-image:url(../../img/element-icons/pause.c4c0886.svg)}.mx_VoiceMessagePrimaryContainer{padding:7px 12px 7px 11px;background-color:#e3e8f0;border-radius:12px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#737d8c;font-size:1.4rem;line-height:2.4rem}.mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar{background-color:#c1c6cd}.mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar.mx_Waveform_bar_100pct{-webkit-transition:background-color .25s ease;transition:background-color .25s ease;background-color:#737d8c}.mx_VoiceMessagePrimaryContainer .mx_Clock{width:4.2rem;padding-right:6px;padding-left:8px}.mx_Waveform{position:relative;height:30px;top:1px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.mx_Waveform .mx_Waveform_bar{width:0;border:1px solid transparent;border-radius:2px;min-height:0;max-height:100%;margin-left:1px;margin-right:1px}.mx_CallContainer{position:absolute;right:20px;bottom:72px;z-index:100;pointer-events:none}.mx_CallContainer .mx_CallPreview{pointer-events:auto;cursor:pointer}.mx_CallContainer .mx_CallPreview .mx_CallView_video{width:350px}.mx_CallContainer .mx_CallPreview .mx_VideoFeed_local{border-radius:8px;overflow:hidden}.mx_CallContainer .mx_AppTile_persistedWrapper div{min-width:350px}.mx_CallContainer .mx_IncomingCallBox{min-width:250px;background-color:#f4f6fa;padding:8px;-webkit-box-shadow:0 14px 24px rgba(0,0,0,.08);box-shadow:0 14px 24px rgba(0,0,0,.08);border-radius:8px;pointer-events:auto;cursor:pointer}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo{display:-webkit-box;display:-ms-flexbox;display:flex;direction:row}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo .mx_BaseAvatar_initial,.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo img{margin:8px}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo h1,.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo p{margin:0;padding:0;font-size:1.4rem;line-height:1.6rem}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo h1{font-weight:700}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons{padding:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons>.mx_IncomingCallBox_spacer{width:8px}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons>*{-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;margin-right:0;font-size:1.5rem;line-height:2.4rem}.mx_CallView{border-radius:8px;background-color:#f2f5f8;padding-left:8px;padding-right:8px;pointer-events:auto}.mx_CallView_large{padding-bottom:10px;margin:5px 5px 5px 18px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_CallView_large,.mx_CallView_large .mx_CallView_voice{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_CallView_pip{width:320px;padding-bottom:8px;margin-top:10px;background-color:#f4f6fa;-webkit-box-shadow:0 4px 20px rgba(0,0,0,.2);box-shadow:0 4px 20px rgba(0,0,0,.2);border-radius:8px}.mx_CallView_pip .mx_CallView_voice{height:180px}.mx_CallView_pip .mx_CallView_callControls{bottom:0}.mx_CallView_pip .mx_CallView_callControls_button:before{width:36px;height:36px}.mx_CallView_pip .mx_CallView_holdTransferContent{padding-top:10px;padding-bottom:25px}.mx_CallView_content{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:8px}.mx_CallView_voice{-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;background-color:#27303a}.mx_CallView_voice,.mx_CallView_voice_avatarsContainer{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-direction:normal}.mx_CallView_voice_avatarsContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-ms-flex-direction:row;flex-direction:row}.mx_CallView_voice_avatarsContainer div{margin-left:12px;margin-right:12px}.mx_CallView_voice .mx_CallView_holdTransferContent .mx_CallView_voice_avatarContainer{border-radius:2000px;overflow:hidden;position:relative}.mx_CallView_holdTransferContent{height:20px;padding-top:20px;padding-bottom:15px;color:#fff}.mx_CallView_holdTransferContent .mx_AccessibleButton_hasKind{padding:0;font-weight:700}.mx_CallView_video{width:100%;height:100%;z-index:30;overflow:hidden}.mx_CallView_video_hold{overflow:hidden}.mx_CallView_video_hold .mx_VideoFeed{visibility:hidden}.mx_CallView_video_holdBackground{position:absolute;width:100%;height:100%;left:0;right:0;background-repeat:no-repeat;background-size:cover;background-position:50%;-webkit-filter:blur(20px);filter:blur(20px)}.mx_CallView_video_holdBackground:after{content:"";display:block;position:absolute;width:100%;height:100%;left:0;right:0;background-color:rgba(0,0,0,.6)}.mx_CallView_video .mx_CallView_holdTransferContent{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-weight:700;color:#fff;text-align:center}.mx_CallView_video .mx_CallView_holdTransferContent:before{display:block;margin-left:auto;margin-right:auto;content:"";width:40px;height:40px;background-image:url(../../img/voip/paused.77799b3.svg);background-position:50%;background-size:cover}.mx_CallView_pip .mx_CallView_video .mx_CallView_holdTransferContent:before{width:30px;height:30px}.mx_CallView_video .mx_CallView_holdTransferContent .mx_AccessibleButton_hasKind{padding:0}.mx_CallView_header{height:44px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:left;-ms-flex-pack:left;justify-content:left;-ms-flex-negative:0;flex-shrink:0}.mx_CallView_header_callType{font-size:1.2rem;font-weight:700;vertical-align:middle}.mx_CallView_header_secondaryCallInfo:before{content:"·";margin-left:6px;margin-right:6px}.mx_CallView_header_controls{margin-left:auto}.mx_CallView_header_button{display:inline-block;vertical-align:middle;cursor:pointer}.mx_CallView_header_button:before{content:"";display:inline-block;height:20px;width:20px;vertical-align:middle;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}.mx_CallView_header_button_fullscreen:before{-webkit-mask-image:url(../../img/element-icons/call/fullscreen.43be138.svg);mask-image:url(../../img/element-icons/call/fullscreen.43be138.svg)}.mx_CallView_header_button_expand:before{-webkit-mask-image:url(../../img/element-icons/call/expand.7ef9f56.svg);mask-image:url(../../img/element-icons/call/expand.7ef9f56.svg)}.mx_CallView_header_callInfo{margin-left:12px;margin-right:16px}.mx_CallView_header_roomName{font-weight:700;font-size:12px;line-height:normal;height:15px}.mx_CallView_secondaryCall_roomName{margin-left:4px}.mx_CallView_header_callTypeSmall{font-size:12px;color:#737d8c;line-height:normal;height:15px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:240px}.mx_CallView_header_phoneIcon{display:inline-block;margin-right:6px;height:16px;width:16px;vertical-align:middle}.mx_CallView_header_phoneIcon:before{content:"";display:inline-block;vertical-align:top;height:16px;width:16px;background-color:#ff4b55;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg)}.mx_CallView_callControls{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;bottom:5px;width:100%;opacity:1;-webkit-transition:opacity .5s;transition:opacity .5s}.mx_CallView_callControls_hidden{opacity:.001;pointer-events:none}.mx_CallView_callControls_button{cursor:pointer;margin-left:8px;margin-right:8px}.mx_CallView_callControls_button:before{content:"";display:inline-block;height:48px;width:48px;background-repeat:no-repeat;background-size:contain;background-position:50%}.mx_CallView_callControls_dialpad{margin-right:auto}.mx_CallView_callControls_dialpad:before{background-image:url(../../img/voip/dialpad.fdda9a0.svg)}.mx_CallView_callControls_button_dialpad_hidden{margin-right:auto;cursor:auto}.mx_CallView_callControls_button_micOn:before{background-image:url(../../img/voip/mic-on.2592c14.svg)}.mx_CallView_callControls_button_micOff:before{background-image:url(../../img/voip/mic-off.774e42b.svg)}.mx_CallView_callControls_button_vidOn:before{background-image:url(../../img/voip/vid-on.b9b8bbf.svg)}.mx_CallView_callControls_button_vidOff:before{background-image:url(../../img/voip/vid-off.5552596.svg)}.mx_CallView_callControls_button_hangup:before{background-image:url(../../img/voip/hangup.9c3adeb.svg)}.mx_CallView_callControls_button_more{margin-left:auto}.mx_CallView_callControls_button_more:before{background-image:url(../../img/voip/more.5e8055e.svg)}.mx_CallView_callControls_button_more_hidden{margin-left:auto;cursor:auto}.mx_CallView_callControls_button_invisible{visibility:hidden;pointer-events:none;position:absolute}.mx_CallViewForRoom{overflow:hidden}.mx_CallViewForRoom .mx_CallViewForRoom_ResizeWrapper{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:8px}.mx_CallViewForRoom .mx_CallViewForRoom_ResizeWrapper:hover .mx_CallViewForRoom_ResizeHandle{width:100%!important;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_CallViewForRoom .mx_CallViewForRoom_ResizeWrapper:hover .mx_CallViewForRoom_ResizeHandle:after{content:"";margin-top:3px;border-radius:4px;height:4px;width:100%;max-width:64px;background-color:#2e2f32}.mx_DialPad{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:16px;gap:16px}.mx_DialPad_button{width:40px;height:40px;background-color:#e3e8f0;border-radius:40px;font-size:18px;font-weight:600;text-align:center;vertical-align:middle;line-height:40px}.mx_DialPad_deleteButton:before,.mx_DialPad_dialButton:before{content:"";display:inline-block;height:40px;width:40px;vertical-align:middle;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:20px;mask-size:20px;-webkit-mask-position:center;mask-position:center;background-color:#fff}.mx_DialPad_deleteButton{background-color:#ff4b55}.mx_DialPad_deleteButton:before{-webkit-mask-image:url(../../img/element-icons/call/delete.833d785.svg);mask-image:url(../../img/element-icons/call/delete.833d785.svg);-webkit-mask-position:9px;mask-position:9px}.mx_DialPad_dialButton{background-color:#0dbd8b}.mx_DialPad_dialButton:before{-webkit-mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg)}.mx_DialPadContextMenu_header{margin-top:12px;margin-left:12px;margin-right:12px}.mx_DialPadContextMenu_title{color:#61708b;font-size:12px;font-weight:600}.mx_DialPadContextMenu_dialled{height:1em;font-size:18px;font-weight:600}.mx_DialPadContextMenu_dialPad{margin:16px}.mx_DialPadContextMenu_horizSep{position:relative}.mx_DialPadContextMenu_horizSep:before{content:"";position:absolute;width:100%;border-bottom:1px solid #e3e8f0}.mx_Dialog_dialPadWrapper .mx_Dialog{padding:0}.mx_DialPadModal{width:192px;height:368px}.mx_DialPadModal_header{margin-top:12px;margin-left:12px;margin-right:12px}.mx_DialPadModal_title{color:#61708b;font-size:12px;font-weight:600}.mx_DialPadModal_cancel{float:right;-webkit-mask:url(../../img/feather-customised/cancel.23c2689.svg);mask:url(../../img/feather-customised/cancel.23c2689.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;width:14px;height:14px;background-color:#c1c1c1;cursor:pointer}.mx_DialPadModal_field{border:none;margin:0}.mx_DialPadModal_field input{font-size:18px;font-weight:600}.mx_DialPadModal_dialPad{margin-left:16px;margin-right:16px;margin-top:16px}.mx_DialPadModal_horizSep{position:relative}.mx_DialPadModal_horizSep:before{content:"";position:absolute;width:100%;border-bottom:1px solid #e3e8f0}.mx_VideoFeed_voice{padding-bottom:52px;background-color:#27303a}.mx_VideoFeed_remote{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_VideoFeed_remote.mx_VideoFeed_video{background-color:#000}.mx_VideoFeed_local{max-width:25%;max-height:25%;position:absolute;right:10px;top:10px;z-index:100;border-radius:4px}.mx_VideoFeed_local.mx_VideoFeed_video{background-color:transparent}.mx_VideoFeed_mirror{-webkit-transform:scaleX(-1);transform:scaleX(-1)}
+const lightCSS = `@charset "utf-8";
+.hljs-addition {
+ background: #dfd;
+}
+.hljs-deletion {
+ background: #fdd;
+}
+@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
+ .mx_LeftPanel {
+ background-image: unset;
+ background-image: var(--avatar-url, unset);
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: 0 0;
+ }
+ .mx_GroupFilterPanel,
+ .mx_SpacePanel {
+ -webkit-backdrop-filter: blur(20px);
+ backdrop-filter: blur(20px);
+ }
+ .mx_LeftPanel .mx_LeftPanel_roomListContainer {
+ -webkit-backdrop-filter: blur(40px);
+ backdrop-filter: blur(40px);
+ }
+}
+.mx_RoomSublist_showNButton {
+ background-color: transparent !important;
+}
+a:hover,
+a:link,
+a:visited {
+ text-decoration: none;
+}
+:root {
+ font-size: 10px;
+ --transition-short: 0.1s;
+ --transition-standard: 0.3s;
+}
+@media (prefers-reduced-motion) {
+ :root {
+ --transition-short: 0;
+ --transition-standard: 0;
+ }
+}
+html {
+ height: 100%;
+ overflow: hidden;
+}
+body {
+ font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ font-size: 1.5rem;
+ background-color: #fff;
+ color: #2e2f32;
+ border: 0;
+ margin: 0;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+code,
+pre {
+ font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
+ font-size: 100% !important;
+}
+.error,
+.text-error,
+.text-warning,
+.warning {
+ color: #ff4b55;
+}
+.text-success {
+ color: #0dbd8b;
+}
+.text-muted {
+ color: #61708b;
+}
+b {
+ font-weight: 700;
+}
+h2 {
+ color: #2e2f32;
+ font-weight: 400;
+ font-size: 1.8rem;
+ margin-top: 16px;
+ margin-bottom: 16px;
+}
+a:hover,
+a:link,
+a:visited {
+ color: #238cf5;
+}
+input[type="password"],
+input[type="search"],
+input[type="text"] {
+ padding: 9px;
+ font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ font-size: 1.4rem;
+ font-weight: 600;
+ min-width: 0;
+}
+input[type="search"].mx_textinput_icon,
+input[type="text"].mx_textinput_icon {
+ padding-left: 36px;
+ background-repeat: no-repeat;
+ background-position: 10px;
+}
+input[type="search"].mx_textinput_icon.mx_textinput_search,
+input[type="text"].mx_textinput_icon.mx_textinput_search {
+ background-image: url(../../img/feather-customised/search-input.044bfa7.svg);
+}
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+ display: none;
+}
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder {
+ opacity: 1;
+}
+input::-moz-placeholder,
+textarea::-moz-placeholder {
+ opacity: 1;
+}
+input:-ms-input-placeholder,
+textarea:-ms-input-placeholder {
+ opacity: 1;
+}
+input::-ms-input-placeholder,
+textarea::-ms-input-placeholder {
+ opacity: 1;
+}
+input::placeholder,
+textarea::placeholder {
+ opacity: 1;
+}
+input[type="password"],
+input[type="text"],
+textarea {
+ background-color: transparent;
+ color: #2e2f32;
+}
+textarea {
+ font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ color: #2e2f32;
+}
+input[type="password"]:focus,
+input[type="text"]:focus,
+textarea:focus {
+ outline: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+:focus:not(.focus-visible) {
+ outline: none;
+}
+.mx_Dialog .mx_textinput > input[type="search"],
+.mx_Dialog .mx_textinput > input[type="text"],
+.mx_MatrixChat .mx_textinput > input[type="search"],
+.mx_MatrixChat .mx_textinput > input[type="text"] {
+ border: none;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ color: #2e2f32;
+}
+.mx_Dialog .mx_textinput,
+.mx_Dialog
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="search"],
+.mx_Dialog
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="text"],
+.mx_MatrixChat .mx_textinput,
+.mx_MatrixChat
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="search"],
+.mx_MatrixChat
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="text"] {
+ display: block;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ background-color: transparent;
+ color: #9fa9ba;
+ border-radius: 4px;
+ border: 1px solid rgba(46, 47, 50, 0.1);
+ margin: 9px;
+}
+.mx_Dialog .mx_textinput,
+.mx_MatrixChat .mx_textinput {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_Dialog .mx_textinput input::-webkit-input-placeholder,
+.mx_Dialog
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="search"]::-webkit-input-placeholder,
+.mx_Dialog
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="text"]::-webkit-input-placeholder,
+.mx_MatrixChat .mx_textinput input::-webkit-input-placeholder,
+.mx_MatrixChat
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="search"]::-webkit-input-placeholder,
+.mx_MatrixChat
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="text"]::-webkit-input-placeholder {
+ color: rgba(159, 169, 186, 0.75);
+}
+.mx_Dialog .mx_textinput input::-moz-placeholder,
+.mx_Dialog
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="search"]::-moz-placeholder,
+.mx_Dialog
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="text"]::-moz-placeholder,
+.mx_MatrixChat .mx_textinput input::-moz-placeholder,
+.mx_MatrixChat
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="search"]::-moz-placeholder,
+.mx_MatrixChat
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="text"]::-moz-placeholder {
+ color: rgba(159, 169, 186, 0.75);
+}
+.mx_Dialog .mx_textinput input:-ms-input-placeholder,
+.mx_Dialog
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="search"]:-ms-input-placeholder,
+.mx_Dialog
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="text"]:-ms-input-placeholder,
+.mx_MatrixChat .mx_textinput input:-ms-input-placeholder,
+.mx_MatrixChat
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="search"]:-ms-input-placeholder,
+.mx_MatrixChat
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="text"]:-ms-input-placeholder {
+ color: rgba(159, 169, 186, 0.75);
+}
+.mx_Dialog .mx_textinput input::-ms-input-placeholder,
+.mx_Dialog
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="search"]::-ms-input-placeholder,
+.mx_Dialog
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="text"]::-ms-input-placeholder,
+.mx_MatrixChat .mx_textinput input::-ms-input-placeholder,
+.mx_MatrixChat
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="search"]::-ms-input-placeholder,
+.mx_MatrixChat
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="text"]::-ms-input-placeholder {
+ color: rgba(159, 169, 186, 0.75);
+}
+.mx_Dialog .mx_textinput input::placeholder,
+.mx_Dialog
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="search"]::placeholder,
+.mx_Dialog
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="text"]::placeholder,
+.mx_MatrixChat .mx_textinput input::placeholder,
+.mx_MatrixChat
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="search"]::placeholder,
+.mx_MatrixChat
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="text"]::placeholder {
+ color: rgba(159, 169, 186, 0.75);
+}
+.dark-panel {
+ background-color: #f2f5f8;
+}
+.dark-panel .mx_textinput,
+.dark-panel
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="search"],
+.dark-panel
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="text"] {
+ color: #9fa9ba;
+ background-color: #fff;
+ border: none;
+}
+.light-panel .mx_textinput,
+.light-panel
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="search"],
+.light-panel
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="text"] {
+ color: #9fa9ba;
+ background-color: #f2f5f8;
+ border: none;
+}
+::-moz-focus-inner {
+ border: 0;
+}
+#mx_theme_accentColor {
+ color: #0dbd8b;
+}
+#mx_theme_secondaryAccentColor {
+ color: #f2f5f8;
+}
+#mx_theme_tertiaryAccentColor {
+ color: #d3efe1;
+}
+.mx_Dialog_wrapper {
+ position: fixed;
+ z-index: 4000;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_Dialog {
+ background-color: #fff;
+ color: #747474;
+ z-index: 4012;
+ font-weight: 300;
+ font-size: 1.5rem;
+ position: relative;
+ padding: 24px;
+ max-height: 80%;
+ -webkit-box-shadow: 2px 15px 30px 0 rgba(0, 0, 0, 0.48);
+ box-shadow: 2px 15px 30px 0 rgba(0, 0, 0, 0.48);
+ border-radius: 8px;
+ overflow-y: auto;
+}
+.mx_Dialog_fixedWidth {
+ width: 60vw;
+ max-width: 704px;
+}
+.mx_Dialog_staticWrapper .mx_Dialog {
+ z-index: 4010;
+}
+.mx_Dialog_background {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(46, 48, 51, 0.38);
+ opacity: 0.8;
+ z-index: 4011;
+}
+.mx_Dialog_background.mx_Dialog_staticBackground {
+ z-index: 4009;
+}
+.mx_Dialog_wrapperWithStaticUnder .mx_Dialog_background {
+ opacity: 0.4;
+}
+.mx_Dialog_lightbox .mx_Dialog_background {
+ opacity: 0.95;
+ background-color: #000;
+}
+.mx_Dialog_lightbox .mx_Dialog {
+ border-radius: 0;
+ background-color: transparent;
+ width: 100%;
+ height: 100%;
+ max-width: 100%;
+ max-height: 100%;
+ pointer-events: none;
+ padding: 0;
+}
+.mx_Dialog_header {
+ position: relative;
+ margin-bottom: 10px;
+}
+.mx_Dialog_titleImage {
+ vertical-align: sub;
+ width: 25px;
+ height: 25px;
+ margin-left: -2px;
+ margin-right: 4px;
+}
+.mx_Dialog_title {
+ font-size: 2.2rem;
+ font-weight: 600;
+ line-height: 3.6rem;
+ color: #45474a;
+}
+.mx_Dialog_header.mx_Dialog_headerWithButton > .mx_Dialog_title {
+ text-align: center;
+}
+.mx_Dialog_header.mx_Dialog_headerWithCancel > .mx_Dialog_title {
+ margin-right: 20px;
+}
+.mx_Dialog_title.danger {
+ color: #ff4b55;
+}
+.mx_Dialog_cancelButton {
+ -webkit-mask: url(../../img/feather-customised/cancel.23c2689.svg);
+ mask: url(../../img/feather-customised/cancel.23c2689.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: cover;
+ mask-size: cover;
+ width: 14px;
+ height: 14px;
+ background-color: #c1c1c1;
+ cursor: pointer;
+ position: absolute;
+ top: 10px;
+ right: 0;
+}
+.mx_Dialog_content {
+ margin: 24px 0 68px;
+ font-size: 1.4rem;
+ color: #2e2f32;
+ word-wrap: break-word;
+}
+.mx_Dialog_buttons {
+ margin-top: 20px;
+ text-align: right;
+}
+.mx_Dialog_buttons .mx_Dialog_buttons_additive {
+ float: left;
+}
+.mx_Dialog_buttons button,
+.mx_Dialog_buttons input[type="submit"],
+.mx_Dialog button,
+.mx_Dialog input[type="submit"] {
+ vertical-align: middle;
+ border-radius: 8px;
+ font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ font-size: 1.4rem;
+ color: #fff;
+ background-color: #0dbd8b;
+ width: auto;
+ padding: 7px 1.5em;
+ cursor: pointer;
+ display: inline-block;
+ outline: none;
+ margin-left: 0;
+ margin-right: 8px;
+ font-weight: 600;
+ border: 1px solid #0dbd8b;
+ color: #0dbd8b;
+ background-color: #fff;
+ font-family: inherit;
+}
+.mx_Dialog button:last-child {
+ margin-right: 0;
+}
+.mx_Dialog_buttons button:focus,
+.mx_Dialog_buttons input[type="submit"]:focus,
+.mx_Dialog button:focus,
+.mx_Dialog input[type="submit"]:focus {
+ -webkit-filter: brightness(105%);
+ filter: brightness(105%);
+}
+.mx_Dialog_buttons button.mx_Dialog_primary,
+.mx_Dialog_buttons input[type="submit"].mx_Dialog_primary,
+.mx_Dialog button.mx_Dialog_primary,
+.mx_Dialog input[type="submit"].mx_Dialog_primary {
+ color: #fff;
+ background-color: #0dbd8b;
+ min-width: 156px;
+}
+.mx_Dialog_buttons button.danger,
+.mx_Dialog_buttons input[type="submit"].danger,
+.mx_Dialog button.danger,
+.mx_Dialog input[type="submit"].danger {
+ background-color: #ff4b55;
+ border: 1px solid #ff4b55;
+ color: #fff;
+}
+.mx_Dialog button.warning,
+.mx_Dialog input[type="submit"].warning {
+ border: 1px solid #ff4b55;
+ color: #ff4b55;
+}
+.mx_Dialog_buttons button:disabled,
+.mx_Dialog_buttons input[type="submit"]:disabled,
+.mx_Dialog button:disabled,
+.mx_Dialog input[type="submit"]:disabled {
+ background-color: #747474;
+ border: 1px solid #747474;
+ opacity: 0.7;
+}
+.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog {
+ width: auto;
+ border-radius: 8px;
+ padding: 0;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ overflow-x: hidden;
+ overflow-y: hidden;
+}
+.mx_GeneralButton {
+ vertical-align: middle;
+ border: 0;
+ border-radius: 8px;
+ font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ font-size: 1.4rem;
+ color: #fff;
+ background-color: #0dbd8b;
+ width: auto;
+ padding: 7px 1.5em;
+ cursor: pointer;
+ display: inline-block;
+ outline: none;
+ display: inline;
+ margin: auto;
+}
+.mx_linkButton {
+ cursor: pointer;
+ color: #0dbd8b;
+}
+.mx_TextInputDialog_label {
+ text-align: left;
+ padding-bottom: 12px;
+}
+.mx_TextInputDialog_input {
+ font-size: 1.5rem;
+ border-radius: 3px;
+ border: 1px solid #e7e7e7;
+ padding: 9px;
+ color: #2e2f32;
+ background-color: #fff;
+}
+.mx_textButton {
+ vertical-align: middle;
+ border: 0;
+ border-radius: 8px;
+ font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ font-size: 1.4rem;
+ color: #fff;
+ background-color: #0dbd8b;
+ width: auto;
+ cursor: pointer;
+ display: inline-block;
+ outline: none;
+ font-size: 1.5rem;
+ padding: 0 1.5em;
+}
+.mx_button_row {
+ margin-top: 69px;
+}
+.mx_Username_color1 {
+ color: #368bd6;
+}
+.mx_Username_color2 {
+ color: #ac3ba8;
+}
+.mx_Username_color3 {
+ color: #0dbd8b;
+}
+.mx_Username_color4 {
+ color: #e64f7a;
+}
+.mx_Username_color5 {
+ color: #ff812d;
+}
+.mx_Username_color6 {
+ color: #2dc2c5;
+}
+.mx_Username_color7 {
+ color: #5c56f5;
+}
+.mx_Username_color8 {
+ color: #74d12c;
+}
+.mx_Tooltip_dark .mx_Tooltip_chevron:after {
+ border-right-color: #27303a;
+}
+html {
+ scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+}
+* {
+ scrollbar-width: thin;
+}
+::-webkit-scrollbar {
+ width: 6px;
+ height: 6px;
+ background-color: transparent;
+}
+::-webkit-scrollbar-thumb {
+ border-radius: 3px;
+ background-color: rgba(0, 0, 0, 0.2);
+}
+.mx_AutoHideScrollbar:hover {
+ scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+}
+.mx_AutoHideScrollbar:hover::-webkit-scrollbar {
+ background-color: transparent;
+}
+.mx_AutoHideScrollbar:hover::-webkit-scrollbar-thumb {
+ background-color: rgba(0, 0, 0, 0.2);
+}
+.mx_AutoHideScrollbar {
+ overflow-x: hidden;
+ overflow-y: auto;
+ overflow-y: overlay;
+ -ms-overflow-style: -ms-autohiding-scrollbar;
+}
+.mx_AutoHideScrollbar::-webkit-scrollbar,
+.mx_AutoHideScrollbar::-webkit-scrollbar-thumb {
+ background-color: transparent;
+}
+.mx_AutoHideScrollbar {
+ scrollbar-color: transparent transparent;
+}
+.mx_CompatibilityPage {
+ width: 100%;
+ height: 100%;
+ background-color: #e55;
+}
+.mx_CompatibilityPage_box {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ margin: auto;
+ width: 500px;
+ height: 300px;
+ border: 1px solid;
+ padding: 10px;
+ background-color: #fcc;
+}
+.mx_ContextualMenu_wrapper {
+ position: fixed;
+ z-index: 5000;
+}
+.mx_ContextualMenu_background {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 1;
+ z-index: 5000;
+}
+.mx_ContextualMenu {
+ border-radius: 8px;
+ -webkit-box-shadow: 4px 4px 12px 0 rgba(118, 131, 156, 0.6);
+ box-shadow: 4px 4px 12px 0 rgba(118, 131, 156, 0.6);
+ background-color: #fff;
+ color: #2e2f32;
+ position: absolute;
+ font-size: 1.4rem;
+ z-index: 5001;
+}
+.mx_ContextualMenu_right {
+ right: 0;
+}
+.mx_ContextualMenu.mx_ContextualMenu_withChevron_right {
+ right: 8px;
+}
+.mx_ContextualMenu_chevron_right {
+ position: absolute;
+ right: -8px;
+ top: 0;
+ width: 0;
+ height: 0;
+ border-top: 8px solid transparent;
+ border-left: 8px solid #fff;
+ border-bottom: 8px solid transparent;
+}
+.mx_ContextualMenu_left {
+ left: 0;
+}
+.mx_ContextualMenu.mx_ContextualMenu_withChevron_left {
+ left: 8px;
+}
+.mx_ContextualMenu_chevron_left {
+ position: absolute;
+ left: -8px;
+ top: 0;
+ width: 0;
+ height: 0;
+ border-top: 8px solid transparent;
+ border-right: 8px solid #fff;
+ border-bottom: 8px solid transparent;
+}
+.mx_ContextualMenu_top {
+ top: 0;
+}
+.mx_ContextualMenu.mx_ContextualMenu_withChevron_top {
+ top: 8px;
+}
+.mx_ContextualMenu_chevron_top {
+ position: absolute;
+ left: 0;
+ top: -8px;
+ width: 0;
+ height: 0;
+ border-left: 8px solid transparent;
+ border-bottom: 8px solid #fff;
+ border-right: 8px solid transparent;
+}
+.mx_ContextualMenu_bottom {
+ bottom: 0;
+}
+.mx_ContextualMenu.mx_ContextualMenu_withChevron_bottom {
+ bottom: 8px;
+}
+.mx_ContextualMenu_chevron_bottom {
+ position: absolute;
+ left: 0;
+ bottom: -8px;
+ width: 0;
+ height: 0;
+ border-left: 8px solid transparent;
+ border-top: 8px solid #fff;
+ border-right: 8px solid transparent;
+}
+.mx_ContextualMenu_spinner {
+ display: block;
+ margin: 0 auto;
+}
+.mx_CreateRoom {
+ width: 960px;
+ margin-left: auto;
+ margin-right: auto;
+ color: #2e2f32;
+}
+.mx_CreateRoom input,
+.mx_CreateRoom textarea {
+ border-radius: 3px;
+ border: 1px solid #c7c7c7;
+ font-weight: 300;
+ font-size: 1.3rem;
+ padding: 9px;
+ margin-top: 6px;
+}
+.mx_CreateRoom_description {
+ width: 330px;
+}
+.mx_CustomRoomTagPanel {
+ background-color: hsla(0, 0%, 91%, 0.77);
+ max-height: 40vh;
+}
+.mx_CustomRoomTagPanel_scroller {
+ max-height: inherit;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_CustomRoomTagPanel .mx_AccessibleButton {
+ margin: 0 auto;
+ width: 40px;
+ padding: 10px 0 9px;
+ position: relative;
+}
+.mx_CustomRoomTagPanel .mx_BaseAvatar_image {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ width: 40px;
+ height: 40px;
+}
+.mx_CustomRoomTagPanel
+ .mx_AccessibleButton.CustomRoomTagPanel_tileSelected:before {
+ content: "";
+ height: 56px;
+ background-color: #238cf5;
+ width: 5px;
+ position: absolute;
+ left: -9px;
+ border-radius: 0 3px 3px 0;
+ top: 5px;
+}
+.mx_FilePanel {
+ -webkit-box-ordinal-group: 3;
+ -ms-flex-order: 2;
+ order: 2;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0;
+ overflow-y: auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_FilePanel .mx_RoomView_messageListWrapper {
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_FilePanel .mx_RoomView_MessageList {
+ width: 100%;
+}
+.mx_FilePanel .mx_EventTile_avatar,
+.mx_FilePanel .mx_RoomView_MessageList h2 {
+ display: none;
+}
+.mx_FilePanel .mx_EventTile {
+ word-break: break-word;
+ margin-top: 32px;
+}
+.mx_FilePanel .mx_EventTile .mx_MImageBody {
+ margin-right: 0;
+}
+.mx_FilePanel .mx_EventTile .mx_MFileBody {
+ line-height: 2.4rem;
+}
+.mx_FilePanel .mx_EventTile .mx_MFileBody_download {
+ padding-top: 8px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ font-size: 1.4rem;
+ color: #acacac;
+}
+.mx_FilePanel .mx_EventTile .mx_MFileBody_downloadLink {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ color: #747474;
+}
+.mx_FilePanel .mx_EventTile .mx_MImageBody_size {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 0px;
+ flex: 1 0 0;
+ font-size: 1.4rem;
+ text-align: right;
+ white-space: nowrap;
+}
+.mx_FilePanel .mx_EventTile_senderDetails {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin-top: -2px;
+}
+.mx_FilePanel .mx_EventTile_senderDetailsLink {
+ text-decoration: none;
+}
+.mx_FilePanel .mx_EventTile .mx_SenderProfile {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ line-height: normal;
+ padding: 0;
+ font-size: 1.4rem;
+ opacity: 1;
+ color: #acacac;
+}
+.mx_FilePanel .mx_EventTile .mx_MessageTimestamp {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 0px;
+ flex: 1 0 0;
+ text-align: right;
+ visibility: visible;
+ position: static;
+ font-size: 1.4rem;
+ opacity: 1;
+ color: #acacac;
+}
+.mx_FilePanel .mx_EventTile_line {
+ margin-right: 0;
+ padding-left: 0;
+}
+.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line {
+ padding-left: 0;
+}
+.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
+ background-color: #fff;
+}
+.mx_FilePanel_empty:before {
+ -webkit-mask-image: url(../../img/element-icons/room/files.5709c0c.svg);
+ mask-image: url(../../img/element-icons/room/files.5709c0c.svg);
+}
+.mx_GenericErrorPage {
+ width: 100%;
+ height: 100%;
+ background-color: #fff;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_GenericErrorPage_box {
+ display: inline;
+ width: 500px;
+ min-height: 125px;
+ border: 1px solid #f22;
+ padding: 10px 10px 20px;
+ background-color: #fcc;
+}
+.mx_GroupFilterPanel {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ background-color: hsla(0, 0%, 91%, 0.77);
+ cursor: pointer;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ min-height: 0;
+}
+.mx_GroupFilterPanel_items_selected {
+ cursor: pointer;
+}
+.mx_GroupFilterPanel .mx_GroupFilterPanel_divider {
+ height: 0;
+ width: 90%;
+ border: none;
+ border-bottom: 1px solid #8d99a5;
+}
+.mx_GroupFilterPanel .mx_GroupFilterPanel_scroller {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ width: 100%;
+}
+.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ padding-top: 6px;
+}
+.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer > div {
+ margin: 6px 0;
+}
+.mx_GroupFilterPanel .mx_TagTile {
+ position: relative;
+}
+.mx_GroupFilterPanel .mx_TagTile .mx_BetaDot {
+ position: absolute;
+ right: -13px;
+ top: -11px;
+}
+.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_prototype {
+ padding: 3px;
+}
+.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected_prototype {
+ background-color: #fff;
+ border-radius: 6px;
+}
+.mx_TagTile_selected_prototype .mx_TagTile_homeIcon:before {
+ background-color: #2e2f32;
+}
+.mx_TagTile:not(.mx_TagTile_selected_prototype) .mx_TagTile_homeIcon {
+ background-color: rgba(92, 100, 112, 0.2);
+ border-radius: 48px;
+}
+.mx_TagTile:not(.mx_TagTile_selected_prototype) .mx_TagTile_homeIcon:before {
+ background-color: #5c6470;
+}
+.mx_TagTile_homeIcon {
+ width: 32px;
+ height: 32px;
+ position: relative;
+}
+.mx_TagTile_homeIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/home.b706c0e.svg);
+ mask-image: url(../../img/element-icons/home.b706c0e.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 21px;
+ mask-size: 21px;
+ content: "";
+ display: inline-block;
+ width: 32px;
+ height: 32px;
+ position: absolute;
+ top: calc(50% - 16px);
+ left: calc(50% - 16px);
+}
+.mx_GroupFilterPanel .mx_TagTile_plus {
+ margin-bottom: 12px;
+ height: 32px;
+ width: 32px;
+ border-radius: 20px;
+ background-color: rgba(92, 100, 112, 0.2);
+ position: relative;
+ display: block !important;
+}
+.mx_GroupFilterPanel .mx_TagTile_plus:before {
+ background-color: #5c6470;
+ -webkit-mask-image: url(../../img/feather-customised/plus.38ae979.svg);
+ mask-image: url(../../img/feather-customised/plus.38ae979.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ content: "";
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected:before {
+ content: "";
+ height: 100%;
+ background-color: #0dbd8b;
+ width: 4px;
+ position: absolute;
+ left: -12px;
+ border-radius: 0 3px 3px 0;
+}
+.mx_GroupFilterPanel .mx_TagTile.mx_AccessibleButton:focus {
+ -webkit-filter: none;
+ filter: none;
+}
+.mx_TagTile_tooltip {
+ position: relative;
+ top: -30px;
+ left: 5px;
+}
+.mx_TagTile_context_button {
+ min-width: 15px;
+ height: 15px;
+ position: absolute;
+ right: -5px;
+ top: -8px;
+ border-radius: 8px;
+ background-color: #dbdbdb;
+ color: #000;
+ font-weight: 600;
+ font-size: 1rem;
+ text-align: center;
+ padding-top: 1px;
+ padding-left: 4px;
+ padding-right: 4px;
+}
+.mx_TagTile_avatar {
+ position: relative;
+}
+.mx_TagTile_badge {
+ position: absolute;
+ right: -4px;
+ top: -2px;
+ border-radius: 8px;
+ color: #fff;
+ font-weight: 600;
+ font-size: 1.4rem;
+ padding: 0 5px;
+ background-color: #61708b;
+}
+.mx_TagTile_badgeHighlight {
+ background-color: #ff4b55;
+}
+.mx_GroupView {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ overflow: hidden;
+}
+.mx_GroupView_error {
+ margin: auto;
+}
+.mx_GroupView_header {
+ min-height: 52px;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ padding-bottom: 10px;
+ padding-left: 19px;
+}
+.mx_GroupView_header_view {
+ border-bottom: 1px solid transparent;
+ padding-bottom: 0;
+ padding-right: 8px;
+}
+.mx_GroupView_header_avatar,
+.mx_GroupView_header_info {
+ display: table-cell;
+ vertical-align: middle;
+}
+.mx_GroupHeader_button {
+ position: relative;
+ margin-left: 5px;
+ margin-right: 5px;
+ cursor: pointer;
+ height: 20px;
+ width: 20px;
+}
+.mx_GroupHeader_button:before {
+ content: "";
+ position: absolute;
+ height: 20px;
+ width: 20px;
+ background-color: #91a1c0;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+}
+.mx_GroupHeader_editButton:before {
+ -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
+ mask-image: url(../../img/element-icons/settings.6b381af.svg);
+}
+.mx_GroupHeader_shareButton:before {
+ -webkit-mask-image: url(../../img/element-icons/room/share.54dc3fb.svg);
+ mask-image: url(../../img/element-icons/room/share.54dc3fb.svg);
+}
+.mx_GroupView_hostingSignup img {
+ margin-left: 5px;
+}
+.mx_GroupView_editable {
+ border-bottom: 1px solid #c7c7c7 !important;
+ min-width: 150px;
+ cursor: text;
+}
+.mx_GroupView_editable:focus {
+ border-bottom: 1px solid #0dbd8b !important;
+ outline: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.mx_GroupView_header_isUserMember
+ .mx_GroupView_header_name:hover
+ div:not(.mx_GroupView_editable) {
+ color: #0dbd8b;
+ cursor: pointer;
+}
+.mx_GroupView_avatarPicker {
+ position: relative;
+}
+.mx_GroupView_avatarPicker_edit {
+ position: absolute;
+ top: 50px;
+ left: 15px;
+}
+.mx_GroupView_avatarPicker .mx_Spinner {
+ width: 48px;
+ height: 48px !important;
+}
+.mx_GroupView_header_leftCol {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ overflow: hidden;
+}
+.mx_GroupView_header_rightCol {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_GroupView_textButton {
+ display: inline-block;
+}
+.mx_GroupView_header_groupid {
+ font-weight: 400;
+ font-size: medium;
+ padding-left: 10px;
+}
+.mx_GroupView_header_name {
+ vertical-align: middle;
+ width: 100%;
+ height: 31px;
+ color: #2e2f32;
+ font-weight: 700;
+ font-size: 2.2rem;
+ padding-right: 16px;
+}
+.mx_GroupView_header_name,
+.mx_GroupView_header_shortDesc {
+ overflow: hidden;
+ padding-left: 19px;
+ text-overflow: ellipsis;
+ border-bottom: 1px solid transparent;
+}
+.mx_GroupView_header_shortDesc {
+ vertical-align: bottom;
+ float: left;
+ max-height: 42px;
+ color: #a2a2a2;
+ font-weight: 300;
+ font-size: 1.3rem;
+ margin-right: 16px;
+}
+.mx_GroupView_avatarPicker_label {
+ cursor: pointer;
+}
+.mx_GroupView_cancelButton {
+ padding-left: 8px;
+}
+.mx_GroupView_cancelButton img {
+ position: relative;
+ top: 5px;
+}
+.mx_GroupView input[type="radio"] {
+ margin: 10px 10px 0;
+}
+.mx_GroupView_label_text {
+ display: inline-block;
+ max-width: 80%;
+ vertical-align: 0.1em;
+ line-height: 2em;
+}
+.mx_GroupView_body {
+ margin: 0 24px;
+}
+.mx_GroupView_body,
+.mx_GroupView_rooms {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+.mx_GroupView_rooms {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ min-height: 200px;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.mx_GroupView h3 {
+ text-transform: uppercase;
+ color: #3d3b39;
+ font-weight: 600;
+ font-size: 1.3rem;
+ margin-bottom: 10px;
+}
+.mx_GroupView_rooms_header .mx_AccessibleButton {
+ padding-left: 14px;
+ margin-bottom: 14px;
+ height: 24px;
+}
+.mx_GroupView_group {
+ border-top: 1px solid transparent;
+}
+.mx_GroupView_group_disabled {
+ opacity: 0.3;
+ pointer-events: none;
+}
+.mx_GroupView_rooms_header_addRow_button {
+ display: inline-block;
+}
+.mx_GroupView_rooms_header_addRow_button object {
+ pointer-events: none;
+}
+.mx_GroupView_rooms_header_addRow_label {
+ display: inline-block;
+ vertical-align: top;
+ line-height: 2.4rem;
+ padding-left: 28px;
+ color: #0dbd8b;
+}
+.mx_GroupView_rooms .mx_RoomDetailList {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ border-top: 1px solid transparent;
+ padding-top: 10px;
+ word-break: break-word;
+}
+.mx_GroupView .mx_RoomView_messageListWrapper {
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+}
+.mx_GroupView_membershipSection {
+ color: #888;
+ margin-top: 10px;
+}
+.mx_GroupView_membershipSubSection {
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ padding-bottom: 8px;
+}
+.mx_GroupView_membershipSubSection .mx_Spinner {
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+}
+.mx_GroupView_membershipSection_description {
+ line-height: 3.4rem;
+}
+.mx_GroupView_membershipSection_description .mx_BaseAvatar {
+ margin-right: 10px;
+}
+.mx_GroupView_membershipSection .mx_GroupView_textButton {
+ margin-right: 0;
+ margin-top: 0;
+ margin-left: 8px;
+}
+.mx_GroupView_memberSettings_toggle label {
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.mx_GroupView_memberSettings input {
+ margin-right: 6px;
+}
+.mx_GroupView_featuredThings {
+ margin-top: 20px;
+}
+.mx_GroupView_featuredThings_header {
+ font-weight: 700;
+ font-size: 120%;
+ margin-bottom: 20px;
+}
+.mx_GroupView_featuredThings_category {
+ font-weight: 700;
+ font-size: 110%;
+ margin-top: 10px;
+}
+.mx_GroupView_featuredThings_container {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_GroupView_featuredThing,
+.mx_GroupView_featuredThings_addButton {
+ display: table-cell;
+ text-align: center;
+ width: 100px;
+ margin: 0 20px;
+}
+.mx_GroupView_featuredThing {
+ position: relative;
+}
+.mx_GroupView_featuredThing .mx_GroupView_featuredThing_deleteButton {
+ position: absolute;
+ top: -7px;
+ right: 11px;
+ opacity: 0.4;
+}
+.mx_GroupView_featuredThing .mx_BaseAvatar {
+ vertical-align: baseline;
+ vertical-align: initial;
+}
+.mx_GroupView_featuredThings_addButton object {
+ pointer-events: none;
+}
+.mx_GroupView_featuredThing_name {
+ word-wrap: break-word;
+}
+.mx_GroupView_uploadInput {
+ display: none;
+}
+.mx_GroupView_body .mx_AutoHideScrollbar > * {
+ margin: 11px 50px 50px 68px;
+}
+.mx_GroupView_groupDesc textarea {
+ width: 100%;
+ max-width: 100%;
+ height: 150px;
+}
+.mx_GroupView_changeDelayWarning,
+.mx_GroupView_groupDesc_placeholder {
+ background-color: #f7f7f7;
+ color: #888;
+ border-radius: 10px;
+ text-align: center;
+ margin: 20px 0;
+}
+.mx_GroupView_groupDesc_placeholder {
+ padding: 100px 20px;
+ cursor: pointer;
+}
+.mx_GroupView_changeDelayWarning {
+ padding: 40px 20px;
+}
+.mx_GroupView
+ .mx_MemberInfo
+ .mx_AutoHideScrollbar
+ > :not(.mx_MemberInfo_avatar) {
+ padding-left: 16px;
+ padding-right: 16px;
+}
+.mx_HeaderButtons {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_RoomHeader_buttons + .mx_HeaderButtons:before {
+ content: unset;
+}
+.mx_HeaderButtons:before {
+ content: "";
+ background-color: #91a1c0;
+ opacity: 0.5;
+ margin: 6px 8px;
+ border-radius: 1px;
+ width: 1px;
+}
+.mx_HomePage {
+ max-width: 960px;
+ width: 100%;
+ height: 100%;
+ margin-left: auto;
+ margin-right: auto;
+}
+.mx_HomePage_default {
+ text-align: center;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_HomePage_default .mx_HomePage_default_wrapper {
+ margin: auto;
+}
+.mx_HomePage_default img {
+ height: 48px;
+}
+.mx_HomePage_default h1 {
+ font-weight: 600;
+ font-size: 3.2rem;
+ line-height: 4.4rem;
+ margin-bottom: 4px;
+}
+.mx_HomePage_default h4 {
+ margin-top: 4px;
+ font-weight: 600;
+ font-size: 1.8rem;
+ line-height: 2.5rem;
+ color: #61708b;
+}
+.mx_HomePage_default .mx_MiniAvatarUploader {
+ margin: 0 auto;
+}
+.mx_HomePage_default .mx_HomePage_default_buttons {
+ margin: 60px auto 0;
+ width: -webkit-fit-content;
+ width: -moz-fit-content;
+ width: fit-content;
+}
+.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton {
+ padding: 73px 8px 15px;
+ width: 160px;
+ height: 132px;
+ margin: 20px;
+ position: relative;
+ display: inline-block;
+ border-radius: 8px;
+ vertical-align: top;
+ word-break: break-word;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ font-weight: 600;
+ font-size: 1.5rem;
+ line-height: 2rem;
+ color: #fff;
+ background-color: #0dbd8b;
+}
+.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton:before {
+ top: 20px;
+ left: 60px;
+ width: 40px;
+ height: 40px;
+ content: "";
+ position: absolute;
+ background-color: #fff;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+}
+.mx_HomePage_default
+ .mx_HomePage_default_buttons
+ .mx_AccessibleButton.mx_HomePage_button_sendDm:before {
+ -webkit-mask-image: url(../../img/element-icons/feedback.a91241e.svg);
+ mask-image: url(../../img/element-icons/feedback.a91241e.svg);
+}
+.mx_HomePage_default
+ .mx_HomePage_default_buttons
+ .mx_AccessibleButton.mx_HomePage_button_explore:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
+ mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
+}
+.mx_HomePage_default
+ .mx_HomePage_default_buttons
+ .mx_AccessibleButton.mx_HomePage_button_createGroup:before {
+ -webkit-mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
+ mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
+}
+.mx_LeftPanel {
+ background-color: hsla(0, 0%, 96.1%, 0.9);
+ min-width: 206px;
+ max-width: 50%;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_LeftPanel .mx_LeftPanel_GroupFilterPanelContainer {
+ -webkit-box-flex: 0;
+ -ms-flex-positive: 0;
+ flex-grow: 0;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ -ms-flex-preferred-size: 56px;
+ flex-basis: 56px;
+ height: 100%;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_LeftPanel .mx_LeftPanel_GroupFilterPanelContainer,
+.mx_LeftPanel .mx_LeftPanel_roomListContainer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+}
+.mx_LeftPanel .mx_LeftPanel_roomListContainer {
+ background-color: hsla(0, 0%, 96.1%, 0.9);
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 0px;
+ flex: 1 0 0;
+ min-width: 0;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_userHeader {
+ padding: 12px;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_LeftPanel
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_breadcrumbsContainer {
+ overflow-y: hidden;
+ overflow-x: scroll;
+ margin: 12px 12px 0;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_LeftPanel
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_leftOverflow {
+ -webkit-mask-image: -webkit-gradient(
+ linear,
+ left top,
+ right top,
+ from(transparent),
+ color-stop(5%, #000)
+ );
+ -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%);
+ mask-image: -webkit-gradient(
+ linear,
+ left top,
+ right top,
+ from(transparent),
+ color-stop(5%, #000)
+ );
+ mask-image: linear-gradient(90deg, transparent, #000 5%);
+}
+.mx_LeftPanel
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_rightOverflow {
+ -webkit-mask-image: -webkit-gradient(
+ linear,
+ left top,
+ right top,
+ from(#000),
+ color-stop(95%, #000),
+ to(transparent)
+ );
+ -webkit-mask-image: linear-gradient(90deg, #000, #000 95%, transparent);
+ mask-image: -webkit-gradient(
+ linear,
+ left top,
+ right top,
+ from(#000),
+ color-stop(95%, #000),
+ to(transparent)
+ );
+ mask-image: linear-gradient(90deg, #000, #000 95%, transparent);
+}
+.mx_LeftPanel
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow {
+ -webkit-mask-image: -webkit-gradient(
+ linear,
+ left top,
+ right top,
+ from(transparent),
+ color-stop(5%, #000),
+ color-stop(95%, #000),
+ to(transparent)
+ );
+ -webkit-mask-image: linear-gradient(
+ 90deg,
+ transparent,
+ #000 5%,
+ #000 95%,
+ transparent
+ );
+ mask-image: -webkit-gradient(
+ linear,
+ left top,
+ right top,
+ from(transparent),
+ color-stop(5%, #000),
+ color-stop(95%, #000),
+ to(transparent)
+ );
+ mask-image: linear-gradient(
+ 90deg,
+ transparent,
+ #000 5%,
+ #000 95%,
+ transparent
+ );
+}
+.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer {
+ margin-left: 12px;
+ margin-right: 12px;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_LeftPanel
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_filterContainer
+ .mx_RoomSearch_focused
+ + .mx_LeftPanel_exploreButton,
+.mx_LeftPanel
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_filterContainer
+ .mx_RoomSearch_hasQuery
+ + .mx_LeftPanel_exploreButton {
+ -ms-flex-preferred-size: 0;
+ flex-basis: 0;
+ margin: 0;
+ width: 0;
+}
+.mx_LeftPanel
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_filterContainer
+ .mx_RoomSearch_focused
+ + .mx_LeftPanel_exploreButton:before,
+.mx_LeftPanel
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_filterContainer
+ .mx_RoomSearch_hasQuery
+ + .mx_LeftPanel_exploreButton:before {
+ content: none;
+}
+.mx_LeftPanel
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_filterContainer
+ .mx_LeftPanel_exploreButton {
+ width: 32px;
+ height: 32px;
+ border-radius: 8px;
+ background-color: rgba(141, 151, 165, 0.2);
+ position: relative;
+ margin-left: 8px;
+}
+.mx_LeftPanel
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_filterContainer
+ .mx_LeftPanel_exploreButton:before {
+ content: "";
+ position: absolute;
+ top: 8px;
+ left: 8px;
+ width: 16px;
+ height: 16px;
+ -webkit-mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
+ mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background: #737d8c;
+}
+.mx_LeftPanel
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_filterContainer
+ .mx_LeftPanel_exploreButton.mx_LeftPanel_exploreButton_space:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
+ mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
+}
+.mx_LeftPanel
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_roomListFilterCount {
+ font-size: 1.3rem;
+ font-weight: 600;
+ margin-left: 12px;
+ margin-top: 14px;
+ margin-bottom: -4px;
+}
+.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper {
+ overflow: hidden;
+ margin-top: 10px;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 0px;
+ flex: 1 0 0;
+}
+.mx_LeftPanel
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_roomListWrapper.mx_LeftPanel_roomListWrapper_stickyBottom {
+ padding-bottom: 32px;
+}
+.mx_LeftPanel
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_roomListWrapper.mx_LeftPanel_roomListWrapper_stickyTop {
+ padding-top: 32px;
+}
+.mx_LeftPanel
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_actualRoomListContainer {
+ position: relative;
+ height: 100%;
+}
+.mx_LeftPanel.mx_LeftPanel_minimized {
+ min-width: unset;
+ width: unset !important;
+}
+.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer {
+ width: 68px;
+}
+.mx_LeftPanel.mx_LeftPanel_minimized
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_userHeader {
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_LeftPanel.mx_LeftPanel_minimized
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_filterContainer {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_LeftPanel.mx_LeftPanel_minimized
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_filterContainer
+ .mx_LeftPanel_exploreButton {
+ margin-left: 0;
+ margin-top: 8px;
+ background-color: transparent;
+}
+.mx_LeftPanelWidget {
+ margin-left: 8px;
+ margin-bottom: 4px;
+}
+.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ height: 24px;
+ color: #8d99a5;
+ margin-top: 4px;
+}
+.mx_LeftPanelWidget
+ .mx_LeftPanelWidget_headerContainer
+ .mx_LeftPanelWidget_stickable {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ max-width: 100%;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_LeftPanelWidget
+ .mx_LeftPanelWidget_headerContainer
+ .mx_LeftPanelWidget_headerText {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ max-width: calc(100% - 16px);
+ line-height: 1.6rem;
+ font-size: 1.3rem;
+ font-weight: 600;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
+.mx_LeftPanelWidget
+ .mx_LeftPanelWidget_headerContainer
+ .mx_LeftPanelWidget_headerText
+ .mx_LeftPanelWidget_collapseBtn {
+ display: inline-block;
+ position: relative;
+ width: 14px;
+ height: 14px;
+ margin-right: 6px;
+}
+.mx_LeftPanelWidget
+ .mx_LeftPanelWidget_headerContainer
+ .mx_LeftPanelWidget_headerText
+ .mx_LeftPanelWidget_collapseBtn:before {
+ content: "";
+ width: 18px;
+ height: 18px;
+ position: absolute;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background-color: #8d99a5;
+ -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+ mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+}
+.mx_LeftPanelWidget
+ .mx_LeftPanelWidget_headerContainer
+ .mx_LeftPanelWidget_headerText
+ .mx_LeftPanelWidget_collapseBtn.mx_LeftPanelWidget_collapseBtn_collapsed:before {
+ -webkit-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+}
+.mx_LeftPanelWidget .mx_LeftPanelWidget_resizeBox {
+ position: relative;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ overflow: visible;
+}
+.mx_LeftPanelWidget .mx_AppTileFullWidth,
+.mx_LeftPanelWidget .mx_LeftPanelWidget_resizeBox {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+}
+.mx_LeftPanelWidget .mx_AppTileFullWidth {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 0px;
+ flex: 1 0 0;
+ overflow: hidden;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ -webkit-mask-image: linear-gradient(0deg, transparent, #000 4px);
+ mask-image: linear-gradient(0deg, transparent, #000 4px);
+}
+.mx_LeftPanelWidget .mx_LeftPanelWidget_resizerHandle {
+ cursor: ns-resize;
+ border-radius: 3px;
+ width: unset !important;
+ height: 4px !important;
+ position: absolute;
+ top: -24px !important;
+ left: calc(50% - 32px) !important;
+ right: calc(50% - 32px) !important;
+}
+.mx_LeftPanelWidget:hover .mx_LeftPanelWidget_resizerHandle {
+ opacity: 0.8;
+ background-color: #2e2f32;
+}
+.mx_LeftPanelWidget .mx_LeftPanelWidget_maximizeButton {
+ margin-left: 8px;
+ margin-right: 7px;
+ position: relative;
+ width: 24px;
+ height: 24px;
+ border-radius: 32px;
+}
+.mx_LeftPanelWidget .mx_LeftPanelWidget_maximizeButton:before {
+ content: "";
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ top: 4px;
+ left: 4px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-image: url(../../img/feather-customised/maximise.dc32127.svg);
+ mask-image: url(../../img/feather-customised/maximise.dc32127.svg);
+ background: #61708b;
+}
+.mx_LeftPanelWidget_maximizeButtonTooltip {
+ margin-top: -3px;
+}
+.mx_MainSplit {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ min-width: 0;
+ min-height: 0;
+ height: 100%;
+}
+.mx_MainSplit > .mx_RightPanel_ResizeWrapper {
+ padding: 5px;
+ margin-left: 8px;
+ height: calc(100vh - 51px);
+}
+.mx_MainSplit > .mx_RightPanel_ResizeWrapper:hover .mx_RightPanel_ResizeHandle {
+ top: 50% !important;
+ -webkit-transform: translateY(-50%);
+ transform: translateY(-50%);
+ height: 64px !important;
+ width: 4px !important;
+ border-radius: 4px !important;
+ background-color: #2e2f32;
+ opacity: 0.8;
+}
+.mx_MatrixChat_splash {
+ position: relative;
+ height: 100%;
+}
+.mx_MatrixChat_splashButtons {
+ text-align: center;
+ width: 100%;
+ position: absolute;
+ bottom: 30px;
+}
+.mx_MatrixChat_wrapper {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+}
+.mx_MatrixToolbar {
+ -webkit-box-ordinal-group: 2;
+ -ms-flex-order: 1;
+ order: 1;
+ height: 40px;
+}
+.mx_MatrixChat {
+ width: 100%;
+ height: 100%;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-ordinal-group: 3;
+ -ms-flex-order: 2;
+ order: 2;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ min-height: 0;
+}
+.mx_MatrixChat_syncError {
+ color: #fff;
+ background-color: #df2a8b;
+ border-radius: 5px;
+ display: table;
+ padding: 30px;
+ position: absolute;
+ top: 100px;
+ left: 50%;
+ -webkit-transform: translateX(-50%);
+ transform: translateX(-50%);
+}
+.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle) {
+ background-color: #fff;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0;
+ min-width: 0;
+ height: 100%;
+}
+.mx_MatrixChat > .mx_ResizeHandle_horizontal:hover {
+ position: relative;
+}
+.mx_MatrixChat > .mx_ResizeHandle_horizontal:hover:before {
+ position: absolute;
+ left: 6px;
+ top: 50%;
+ -webkit-transform: translateY(-50%);
+ transform: translateY(-50%);
+ height: 64px;
+ width: 4px;
+ border-radius: 4px;
+ content: " ";
+ background-color: #2e2f32;
+ opacity: 0.8;
+}
+.mx_MyGroups {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_MyGroups .mx_BetaCard {
+ margin: 0 72px;
+ max-width: 760px;
+}
+.mx_MyGroups .mx_RoomHeader_simpleHeader {
+ margin-left: 0;
+}
+.mx_MyGroups_header {
+ margin-left: 2px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+}
+.mx_MyGroups > :not(.mx_RoomHeader):not(.mx_BetaCard) {
+ max-width: 960px;
+ margin: 40px;
+}
+.mx_MyGroups_headerCard {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 50%;
+ flex: 1 0 50%;
+ margin-bottom: 30px;
+ min-width: 400px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ margin-right: 13px;
+ height: 40px;
+ width: 40px;
+ border-radius: 20px;
+ background-color: rgba(92, 100, 112, 0.2);
+ position: relative;
+}
+.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button:before {
+ background-color: #5c6470;
+ -webkit-mask: url(../../img/icons-create-room.817ede2.svg);
+ mask: url(../../img/icons-create-room.817ede2.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 80%;
+ mask-size: 80%;
+ content: "";
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+.mx_MyGroups_headerCard_header {
+ font-weight: 700;
+ margin-bottom: 10px;
+}
+.mx_MyGroups_headerCard_content {
+ padding-right: 15px;
+}
+.mx_MyGroups_joinBox {
+ visibility: hidden;
+ height: 0;
+ margin: 0;
+}
+.mx_MyGroups_content {
+ margin-left: 2px;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 0px;
+ flex: 1 0 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ overflow-y: auto;
+}
+.mx_MyGroups_scrollable {
+ overflow-y: inherit;
+}
+.mx_MyGroups_placeholder {
+ background-color: #f7f7f7;
+ color: #888;
+ line-height: 40rem;
+ border-radius: 10px;
+ text-align: center;
+}
+.mx_MyGroups_joinedGroups {
+ border-top: 1px solid transparent;
+ overflow-x: hidden;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+ -ms-flex-line-pack: start;
+ align-content: flex-start;
+}
+.mx_MyGroups_joinedGroups .mx_GroupTile {
+ min-width: 300px;
+ max-width: 33%;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 300px;
+ flex: 1 0 300px;
+ height: 75px;
+ margin: 10px 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+ cursor: pointer;
+}
+.mx_GroupTile_avatar {
+ cursor: -webkit-grab, -webkit-grab;
+ cursor: grab, -webkit-grab;
+}
+.mx_GroupTile_profile {
+ margin-left: 10px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_GroupTile_profile .mx_GroupTile_desc,
+.mx_GroupTile_profile .mx_GroupTile_groupId,
+.mx_GroupTile_profile .mx_GroupTile_name {
+ padding-right: 10px;
+}
+.mx_GroupTile_profile .mx_GroupTile_name {
+ margin: 0;
+ font-size: 1.5rem;
+}
+.mx_GroupTile_profile .mx_GroupTile_groupId {
+ font-size: 1.3rem;
+ opacity: 0.7;
+}
+.mx_GroupTile_profile .mx_GroupTile_desc {
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ font-size: 1.3rem;
+ max-height: 36px;
+ overflow: hidden;
+}
+.mx_NonUrgentToastContainer {
+ position: absolute;
+ bottom: 30px;
+ left: 28px;
+ z-index: 101;
+}
+.mx_NonUrgentToastContainer .mx_NonUrgentToastContainer_toast {
+ padding: 10px 12px;
+ border-radius: 8px;
+ width: 320px;
+ font-size: 1.3rem;
+ margin-top: 8px;
+ background-color: #17191c;
+ color: #fff;
+}
+.mx_NotificationPanel {
+ -webkit-box-ordinal-group: 3;
+ -ms-flex-order: 2;
+ order: 2;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0;
+ overflow-y: auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_NotificationPanel .mx_RoomView_messageListWrapper {
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_NotificationPanel .mx_RoomView_MessageList {
+ width: 100%;
+}
+.mx_NotificationPanel .mx_RoomView_MessageList h2 {
+ margin-left: 0;
+}
+.mx_NotificationPanel .mx_EventTile {
+ word-break: break-word;
+ position: relative;
+ padding-bottom: 18px;
+}
+.mx_NotificationPanel
+ .mx_EventTile:not(.mx_EventTile_last):not(.mx_EventTile_lastInSection):after {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background-color: #8d99a5;
+ height: 1px;
+ opacity: 0.4;
+ content: "";
+}
+.mx_NotificationPanel .mx_EventTile_roomName {
+ font-weight: 700;
+ font-size: 1.4rem;
+}
+.mx_NotificationPanel .mx_EventTile_roomName > * {
+ vertical-align: middle;
+}
+.mx_NotificationPanel .mx_EventTile_roomName > .mx_BaseAvatar {
+ margin-right: 8px;
+}
+.mx_NotificationPanel .mx_EventTile_roomName a {
+ color: #2e2f32;
+}
+.mx_NotificationPanel .mx_EventTile_avatar {
+ display: none;
+}
+.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp,
+.mx_NotificationPanel .mx_EventTile .mx_SenderProfile {
+ color: #2e2f32;
+ font-size: 1.2rem;
+ display: inline;
+ padding-left: 0;
+}
+.mx_NotificationPanel .mx_EventTile_senderDetails {
+ padding-left: 36px;
+ position: relative;
+}
+.mx_NotificationPanel .mx_EventTile_senderDetails a {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_NotificationPanel .mx_EventTile_roomName a,
+.mx_NotificationPanel .mx_EventTile_senderDetails a {
+ text-decoration: none !important;
+}
+.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
+ visibility: visible;
+ position: static;
+ display: inline;
+}
+.mx_NotificationPanel .mx_EventTile_line {
+ margin-right: 0;
+ padding: 0 0 0 36px;
+}
+.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line {
+ padding-left: 0;
+}
+.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
+ background-color: #fff;
+}
+.mx_NotificationPanel .mx_EventTile_content {
+ margin-right: 0;
+}
+.mx_NotificationPanel_empty:before {
+ -webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
+ mask-image: url(../../img/element-icons/notifications.d298b39.svg);
+}
+.mx_RightPanel {
+ overflow-x: hidden;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ position: relative;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ border-radius: 8px;
+ padding: 4px 0;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ height: 100%;
+}
+.mx_RightPanel .mx_RoomView_MessageList {
+ padding: 14px 18px;
+}
+.mx_RightPanel_header {
+ -webkit-box-ordinal-group: 2;
+ -ms-flex-order: 1;
+ order: 1;
+ border-bottom: 1px solid transparent;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 52px;
+ flex: 0 0 52px;
+}
+.mx_RightPanel_headerButtonGroup {
+ height: 100%;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ background-color: #fff;
+ padding: 0 9px;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_RightPanel_headerButton {
+ cursor: pointer;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ margin-left: 1px;
+ margin-right: 1px;
+ height: 32px;
+ width: 32px;
+ position: relative;
+ border-radius: 100%;
+}
+.mx_RightPanel_headerButton:before {
+ content: "";
+ position: absolute;
+ top: 4px;
+ left: 4px;
+ height: 24px;
+ width: 24px;
+ background-color: #c1c6cd;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+}
+.mx_RightPanel_headerButton:hover {
+ background: rgba(13, 189, 139, 0.1);
+}
+.mx_RightPanel_headerButton:hover:before {
+ background-color: #0dbd8b;
+}
+.mx_RightPanel_notifsButton:before {
+ -webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
+ mask-image: url(../../img/element-icons/notifications.d298b39.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+.mx_RightPanel_roomSummaryButton:before {
+ -webkit-mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
+ mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+.mx_RightPanel_groupMembersButton:before {
+ -webkit-mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
+ mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+.mx_RightPanel_roomsButton:before {
+ -webkit-mask-image: url(../../img/element-icons/community-rooms.8f0b6c9.svg);
+ mask-image: url(../../img/element-icons/community-rooms.8f0b6c9.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+.mx_RightPanel_headerButton_highlight:before {
+ background-color: #0dbd8b !important;
+}
+.mx_RightPanel_headerButton_badge {
+ font-size: 0.8rem;
+ border-radius: 8px;
+ color: #fff;
+ background-color: #0dbd8b;
+ font-weight: 700;
+ position: absolute;
+ top: -4px;
+ left: 20px;
+ padding: 2px 4px;
+}
+.mx_RightPanel_collapsebutton {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ text-align: right;
+ height: 16px;
+ border: none;
+}
+.mx_RightPanel .mx_GroupRoomList,
+.mx_RightPanel .mx_MemberInfo,
+.mx_RightPanel .mx_MemberList,
+.mx_RightPanel_blank {
+ -webkit-box-ordinal-group: 3;
+ -ms-flex-order: 2;
+ order: 2;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0;
+}
+.mx_RightPanel .mx_RoomView_messagePanelSpinner {
+ -webkit-box-ordinal-group: 3;
+ -ms-flex-order: 2;
+ order: 2;
+ margin: auto;
+}
+.mx_RightPanel_empty {
+ margin-right: -28px;
+}
+.mx_RightPanel_empty h2 {
+ font-weight: 700;
+ margin: 16px 0;
+}
+.mx_RightPanel_empty h2,
+.mx_RightPanel_empty p {
+ font-size: 1.4rem;
+}
+.mx_RightPanel_empty:before {
+ content: "";
+ display: block;
+ margin: 11px auto 29px;
+ height: 42px;
+ width: 42px;
+ background-color: #91a1c0;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+.mx_RightPanel_scopeHeader {
+ margin: 24px;
+ text-align: center;
+ font-weight: 600;
+ font-size: 1.8rem;
+ line-height: 2.2rem;
+}
+.mx_RightPanel_scopeHeader .mx_BaseAvatar {
+ margin-right: 8px;
+ vertical-align: middle;
+}
+.mx_RightPanel_scopeHeader .mx_BaseAvatar_image {
+ border-radius: 8px;
+}
+.mx_RoomDirectory_dialogWrapper > .mx_Dialog {
+ max-width: 960px;
+ height: 100%;
+}
+.mx_RoomDirectory_dialog {
+ height: 100%;
+ flex-direction: column;
+}
+.mx_RoomDirectory,
+.mx_RoomDirectory_dialog {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+}
+.mx_RoomDirectory {
+ margin-bottom: 12px;
+ color: #2e2f32;
+ word-break: break-word;
+}
+.mx_RoomDirectory,
+.mx_RoomDirectory_list {
+ flex-direction: column;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+}
+.mx_RoomDirectory_list {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+}
+.mx_RoomDirectory_list .mx_RoomView_messageListWrapper {
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+}
+.mx_RoomDirectory_listheader {
+ display: block;
+ margin-top: 13px;
+}
+.mx_RoomDirectory_searchbox {
+ -webkit-box-flex: 1 !important;
+ -ms-flex: 1 !important;
+ flex: 1 !important;
+}
+.mx_RoomDirectory_listheader .mx_NetworkDropdown {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 200px;
+ flex: 0 0 200px;
+}
+.mx_RoomDirectory_tableWrapper {
+ overflow-y: auto;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0;
+}
+.mx_RoomDirectory_table {
+ color: #2e2f32;
+ display: grid;
+ font-size: 1.2rem;
+ grid-template-columns: -webkit-max-content auto -webkit-max-content -webkit-max-content -webkit-max-content;
+ grid-template-columns: max-content auto max-content max-content max-content;
+ grid-row-gap: 24px;
+ row-gap: 24px;
+ text-align: left;
+ width: 100%;
+}
+.mx_RoomDirectory_roomAvatar {
+ padding: 2px 14px 0 0;
+}
+.mx_RoomDirectory_roomMemberCount {
+ -ms-flex-item-align: center;
+ align-self: center;
+ color: #747474;
+ padding: 3px 10px 0;
+}
+.mx_RoomDirectory_roomMemberCount:before {
+ background-color: #747474;
+ display: inline-block;
+ vertical-align: text-top;
+ margin-right: 2px;
+ content: "";
+ -webkit-mask: url(../../img/feather-customised/user.7a4d23d.svg);
+ mask: url(../../img/feather-customised/user.7a4d23d.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 80%;
+ mask-size: 80%;
+ width: 16px;
+ height: 16px;
+}
+.mx_RoomDirectory_join,
+.mx_RoomDirectory_preview {
+ -ms-flex-item-align: center;
+ align-self: center;
+ white-space: nowrap;
+}
+.mx_RoomDirectory_name {
+ display: inline-block;
+ font-size: 1.8rem;
+ font-weight: 600;
+}
+.mx_RoomDirectory_perms {
+ display: inline-block;
+}
+.mx_RoomDirectory_perm {
+ border-radius: 10px;
+ display: inline-block;
+ height: 20px;
+ line-height: 2rem;
+ padding: 0 5px;
+ color: #fff;
+ background-color: #aaa;
+}
+.mx_RoomDirectory_topic {
+ cursor: auto;
+ color: #747474;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 3;
+ overflow: hidden;
+}
+.mx_RoomDirectory_alias {
+ font-size: 1.2rem;
+ color: #a2a2a2;
+}
+.mx_RoomDirectory_table tr {
+ padding-bottom: 10px;
+ cursor: pointer;
+}
+.mx_RoomDirectory .mx_RoomView_MessageList {
+ padding: 0;
+}
+.mx_RoomDirectory > span {
+ font-size: 1.5rem;
+ margin-top: 0;
+}
+.mx_RoomDirectory > span .mx_AccessibleButton {
+ padding: 0;
+}
+.mx_RoomSearch {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ border-radius: 8px;
+ background-color: rgba(141, 151, 165, 0.2);
+ border: 1px solid transparent;
+ height: 28px;
+ padding: 1px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_RoomSearch .mx_RoomSearch_icon {
+ width: 16px;
+ height: 16px;
+ -webkit-mask: url(../../img/element-icons/roomlist/search.3774248.svg);
+ mask: url(../../img/element-icons/roomlist/search.3774248.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background-color: #737d8c;
+ margin-left: 7px;
+}
+.mx_RoomSearch .mx_RoomSearch_input {
+ border: none !important;
+ -webkit-box-flex: 1 !important;
+ -ms-flex: 1 !important;
+ flex: 1 !important;
+ color: #2e2f32 !important;
+ padding: 0;
+ height: 100%;
+ width: 100%;
+ font-size: 1.2rem;
+ line-height: 1.6rem;
+}
+.mx_RoomSearch
+ .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-webkit-input-placeholder {
+ color: #8d99a5 !important;
+}
+.mx_RoomSearch
+ .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-moz-placeholder {
+ color: #8d99a5 !important;
+}
+.mx_RoomSearch
+ .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded):-ms-input-placeholder {
+ color: #8d99a5 !important;
+}
+.mx_RoomSearch
+ .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-ms-input-placeholder {
+ color: #8d99a5 !important;
+}
+.mx_RoomSearch
+ .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::placeholder {
+ color: #8d99a5 !important;
+}
+.mx_RoomSearch.mx_RoomSearch_hasQuery {
+ border-color: #737d8c;
+}
+.mx_RoomSearch.mx_RoomSearch_focused {
+ -webkit-box-shadow: 0 0 4px 4px rgba(0, 132, 255, 0.5);
+ box-shadow: 0 0 4px 4px rgba(0, 132, 255, 0.5);
+ border-color: transparent;
+}
+.mx_RoomSearch.mx_RoomSearch_focused,
+.mx_RoomSearch.mx_RoomSearch_hasQuery {
+ background-color: #fff;
+}
+.mx_RoomSearch.mx_RoomSearch_focused .mx_RoomSearch_clearButton,
+.mx_RoomSearch.mx_RoomSearch_hasQuery .mx_RoomSearch_clearButton {
+ width: 16px;
+ height: 16px;
+ -webkit-mask-image: url(../../img/element-icons/roomlist/search-clear.6164d97.svg);
+ mask-image: url(../../img/element-icons/roomlist/search-clear.6164d97.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background-color: #737d8c;
+ margin-right: 8px;
+}
+.mx_RoomSearch .mx_RoomSearch_clearButton {
+ width: 0;
+ height: 0;
+}
+.mx_RoomSearch.mx_RoomSearch_minimized {
+ border-radius: 32px;
+ height: auto;
+ width: auto;
+ padding: 8px;
+}
+.mx_RoomSearch.mx_RoomSearch_minimized .mx_RoomSearch_icon {
+ margin-left: 0;
+}
+.mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages) {
+ margin-left: 65px;
+ min-height: 50px;
+}
+.mx_RoomStatusBar_typingIndicatorAvatars {
+ width: 52px;
+ margin-top: -1px;
+ text-align: left;
+}
+.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_image {
+ margin-right: -12px;
+ border: 1px solid #fff;
+}
+.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_initial {
+ padding-left: 1px;
+ padding-top: 1px;
+}
+.mx_RoomStatusBar_typingIndicatorRemaining {
+ display: inline-block;
+ color: #acacac;
+ background-color: #ddd;
+ border: 1px solid #fff;
+ border-radius: 40px;
+ width: 24px;
+ height: 24px;
+ line-height: 2.4rem;
+ font-size: 0.8em;
+ vertical-align: top;
+ text-align: center;
+ position: absolute;
+}
+.mx_RoomStatusBar_scrollDownIndicator {
+ cursor: pointer;
+ padding-left: 1px;
+}
+.mx_RoomStatusBar_unreadMessagesBar {
+ padding-top: 10px;
+ color: #ff4b55;
+ cursor: pointer;
+}
+.mx_RoomStatusBar_connectionLostBar {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin-top: 19px;
+ min-height: 58px;
+}
+.mx_RoomStatusBar_unsentMessages > div[role="alert"] {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ min-height: 70px;
+ margin: 12px;
+ padding-left: 16px;
+ background-color: #f3f8fd;
+ border-radius: 4px;
+}
+.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge {
+ margin-right: 12px;
+}
+.mx_RoomStatusBar_unsentMessages
+ .mx_RoomStatusBar_unsentBadge
+ .mx_NotificationBadge {
+ width: 24px !important;
+ height: 24px !important;
+ border-radius: 24px !important;
+}
+.mx_RoomStatusBar_unsentMessages
+ .mx_RoomStatusBar_unsentBadge
+ .mx_NotificationBadge
+ .mx_NotificationBadge_count {
+ font-size: 1.6rem !important;
+}
+.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentTitle {
+ color: #ff4b55;
+ font-size: 1.5rem;
+}
+.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentDescription {
+ font-size: 1.2rem;
+}
+.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ text-align: right;
+ margin-right: 22px;
+ color: #61708b;
+}
+.mx_RoomStatusBar_unsentMessages
+ .mx_RoomStatusBar_unsentButtonBar
+ .mx_AccessibleButton {
+ padding: 5px 10px 5px 28px;
+ display: inline-block;
+ position: relative;
+}
+.mx_RoomStatusBar_unsentMessages
+ .mx_RoomStatusBar_unsentButtonBar
+ .mx_AccessibleButton:nth-child(2) {
+ border-left: 1px solid #e3e8f0;
+}
+.mx_RoomStatusBar_unsentMessages
+ .mx_RoomStatusBar_unsentButtonBar
+ .mx_AccessibleButton:before {
+ content: "";
+ position: absolute;
+ left: 10px;
+ background-color: #61708b;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+}
+.mx_RoomStatusBar_unsentMessages
+ .mx_RoomStatusBar_unsentButtonBar
+ .mx_AccessibleButton.mx_RoomStatusBar_unsentCancelAllBtn:before {
+ -webkit-mask-image: url(../../img/element-icons/trashcan.26f6c28.svg);
+ mask-image: url(../../img/element-icons/trashcan.26f6c28.svg);
+ width: 12px;
+ height: 16px;
+ top: calc(50% - 8px);
+}
+.mx_RoomStatusBar_unsentMessages
+ .mx_RoomStatusBar_unsentButtonBar
+ .mx_AccessibleButton.mx_RoomStatusBar_unsentResendAllBtn {
+ padding-left: 34px;
+}
+.mx_RoomStatusBar_unsentMessages
+ .mx_RoomStatusBar_unsentButtonBar
+ .mx_AccessibleButton.mx_RoomStatusBar_unsentResendAllBtn:before {
+ -webkit-mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
+ mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
+ width: 18px;
+ height: 18px;
+ top: calc(50% - 9px);
+}
+.mx_RoomStatusBar_unsentMessages
+ .mx_RoomStatusBar_unsentButtonBar
+ .mx_InlineSpinner {
+ vertical-align: middle;
+ margin-right: 5px;
+ top: 1px;
+}
+.mx_RoomStatusBar_unsentMessages
+ .mx_RoomStatusBar_unsentButtonBar
+ .mx_InlineSpinner
+ + span {
+ margin-right: 10px;
+}
+.mx_RoomStatusBar_connectionLostBar img {
+ padding-left: 10px;
+ padding-right: 10px;
+ vertical-align: middle;
+ float: left;
+}
+.mx_RoomStatusBar_connectionLostBar_title {
+ color: #ff4b55;
+}
+.mx_RoomStatusBar_connectionLostBar_desc {
+ color: #2e2f32;
+ font-size: 1.3rem;
+ opacity: 0.5;
+ padding-bottom: 20px;
+}
+.mx_RoomStatusBar_resend_link {
+ color: #2e2f32 !important;
+ text-decoration: underline !important;
+ cursor: pointer;
+}
+.mx_RoomStatusBar_typingBar {
+ height: 50px;
+ line-height: 5rem;
+ color: #2e2f32;
+ opacity: 0.5;
+ overflow-y: hidden;
+ display: block;
+}
+.mx_MatrixChat_useCompactLayout
+ .mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages) {
+ min-height: 40px;
+}
+.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_indicator {
+ margin-top: 10px;
+}
+.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_typingBar {
+ height: 40px;
+ line-height: 4rem;
+}
+.mx_RoomView {
+ word-wrap: break-word;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+@-webkit-keyframes mx_RoomView_fileDropTarget_animation {
+ 0% {
+ opacity: 0;
+ }
+ to {
+ opacity: 0.95;
+ }
+}
+@keyframes mx_RoomView_fileDropTarget_animation {
+ 0% {
+ opacity: 0;
+ }
+ to {
+ opacity: 0.95;
+ }
+}
+.mx_RoomView_fileDropTarget {
+ min-width: 0;
+ width: 100%;
+ height: 100%;
+ font-size: 1.8rem;
+ text-align: center;
+ pointer-events: none;
+ background-color: #fff;
+ opacity: 0.95;
+ position: absolute;
+ z-index: 3000;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-animation: mx_RoomView_fileDropTarget_animation;
+ animation: mx_RoomView_fileDropTarget_animation;
+ -webkit-animation-duration: 0.5s;
+ animation-duration: 0.5s;
+}
+@-webkit-keyframes mx_RoomView_fileDropTarget_image_animation {
+ 0% {
+ width: 0;
+ }
+ to {
+ width: 32px;
+ }
+}
+@keyframes mx_RoomView_fileDropTarget_image_animation {
+ 0% {
+ width: 0;
+ }
+ to {
+ width: 32px;
+ }
+}
+.mx_RoomView_fileDropTarget_image {
+ -webkit-animation: mx_RoomView_fileDropTarget_image_animation;
+ animation: mx_RoomView_fileDropTarget_image_animation;
+ -webkit-animation-duration: 0.5s;
+ animation-duration: 0.5s;
+ margin-bottom: 16px;
+}
+.mx_RoomView_auxPanel {
+ min-width: 0;
+ width: 100%;
+ margin: 0 auto;
+ overflow: auto;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+}
+.mx_RoomView_auxPanel_fullHeight {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: 3000;
+ background-color: #fff;
+}
+.mx_RoomView_auxPanel_hiddenHighlights {
+ border-bottom: 1px solid transparent;
+ padding: 10px 26px;
+ color: #ff4b55;
+ cursor: pointer;
+}
+.mx_RoomView_auxPanel_apps {
+ max-width: 1920px !important;
+}
+.mx_RoomView .mx_MainSplit,
+.mx_RoomView_messagePanel {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0;
+}
+.mx_RoomView_messagePanel {
+ width: 100%;
+ overflow-y: auto;
+ overflow-anchor: none;
+}
+.mx_RoomView_messagePanelSearchSpinner {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ background-image: url(../../img/typing-indicator-2x.0eb9f0e.gif);
+ background-position: center 367px;
+ background-size: 25px;
+ background-repeat: no-repeat;
+ position: relative;
+}
+.mx_RoomView_messagePanelSearchSpinner:before {
+ background-color: #888;
+ -webkit-mask: url(../../img/feather-customised/search-input.044bfa7.svg);
+ mask: url(../../img/feather-customised/search-input.044bfa7.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 50px;
+ mask-size: 50px;
+ content: "";
+ position: absolute;
+ top: 286px;
+ left: 0;
+ right: 0;
+ height: 50px;
+}
+.mx_RoomView_body {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ min-width: 0;
+}
+.mx_RoomView_body .mx_RoomView_messagePanel,
+.mx_RoomView_body .mx_RoomView_messagePanelSearchSpinner,
+.mx_RoomView_body .mx_RoomView_messagePanelSpinner {
+ -webkit-box-ordinal-group: 3;
+ -ms-flex-order: 2;
+ order: 2;
+}
+.mx_RoomView_body .mx_RoomView_timeline {
+ position: relative;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_RoomView_statusArea {
+ width: 100%;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ max-height: 0;
+ background-color: #fff;
+ z-index: 1000;
+ overflow: hidden;
+ -webkit-transition: all 0.2s ease-out;
+ transition: all 0.2s ease-out;
+}
+.mx_RoomView_statusArea_expanded {
+ max-height: 100px;
+}
+.mx_RoomView_statusAreaBox {
+ margin: auto;
+ min-height: 50px;
+}
+.mx_RoomView_statusAreaBox_line {
+ margin-left: 65px;
+ border-top: 1px solid transparent;
+ height: 1px;
+}
+.mx_RoomView_messageListWrapper {
+ min-height: 100%;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+}
+.mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper {
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+}
+.mx_RoomView_searchResultsPanel a {
+ text-decoration: none;
+ color: inherit;
+}
+.mx_RoomView_empty {
+ font-size: 1.3rem;
+ padding: 0 24px;
+ margin-right: 30px;
+ text-align: center;
+ margin-bottom: 80px;
+}
+.mx_RoomView_MessageList {
+ list-style-type: none;
+ padding: 18px;
+ margin: 0;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.mx_RoomView_MessageList li {
+ clear: both;
+}
+li.mx_RoomView_myReadMarker_container {
+ height: 0;
+ margin: 0;
+ padding: 0;
+ border: 0;
+}
+hr.mx_RoomView_myReadMarker {
+ border-top: 1px solid #0dbd8b;
+ border-bottom: 1px solid #0dbd8b;
+ margin-top: 0;
+ position: relative;
+ top: -1px;
+ z-index: 1;
+ -webkit-transition: width easeinsine 0.4s 1s, opacity easeinsine 0.4s 1s;
+ transition: width easeinsine 0.4s 1s, opacity easeinsine 0.4s 1s;
+ width: 99%;
+ opacity: 1;
+}
+.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
+ background-color: #fff;
+}
+.mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename {
+ color: #fff;
+ opacity: 1;
+}
+.mx_RoomView_inCall .mx_RoomView_statusAreaBox_line {
+ margin-top: 2px;
+ border: none;
+ height: 0;
+}
+.mx_RoomView_inCall .mx_MessageComposer_wrapper {
+ border-top: 2px hidden;
+ padding-top: 1px;
+}
+.mx_RoomView_voipChevron {
+ position: absolute;
+ bottom: -11px;
+ right: 11px;
+}
+.mx_RoomView_voipButton {
+ float: right;
+ margin-right: 13px;
+ margin-top: 13px;
+ cursor: pointer;
+}
+.mx_RoomView_voipButton object {
+ pointer-events: none;
+}
+.mx_RoomView .mx_MessageComposer {
+ width: 100%;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ margin-right: 2px;
+}
+.mx_RoomView_ongoingConfCallNotification {
+ width: 100%;
+ text-align: center;
+ background-color: #ff4b55;
+ color: #fff;
+ font-weight: 700;
+ padding: 6px 0;
+ cursor: pointer;
+}
+.mx_RoomView_ongoingConfCallNotification a {
+ color: #fff !important;
+}
+.mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList {
+ margin-bottom: 4px;
+}
+.mx_MatrixChat_useCompactLayout .mx_RoomView_statusAreaBox {
+ min-height: 42px;
+}
+.mx_ScrollPanel .mx_RoomView_MessageList {
+ position: relative;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+}
+.mx_SearchBox {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0;
+ min-width: 0;
+}
+.mx_SearchBox.mx_SearchBox_blurred:not(:hover) {
+ background-color: transparent;
+}
+.mx_SearchBox .mx_SearchBox_closeButton {
+ cursor: pointer;
+ background-image: url(../../img/icons-close.11ff07c.svg);
+ background-repeat: no-repeat;
+ width: 16px;
+ height: 16px;
+ background-position: 50%;
+ padding: 9px;
+}
+.mx_SpacePanel {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ background-color: hsla(0, 0%, 91%, 0.77);
+ padding: 0;
+ margin: 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ overflow-y: auto;
+}
+.mx_SpacePanel .mx_SpacePanel_spaceTreeWrapper {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ padding: 8px 8px 16px 0;
+}
+.mx_SpacePanel .mx_SpacePanel_toggleCollapse {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ width: 40px;
+ height: 40px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 32px;
+ mask-size: 32px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ margin-left: 16px;
+ margin-bottom: 12px;
+ background-color: #8d99a5;
+ -webkit-mask-image: url(../../img/element-icons/expand-space-panel.e6f74b9.svg);
+ mask-image: url(../../img/element-icons/expand-space-panel.e6f74b9.svg);
+}
+.mx_SpacePanel .mx_SpacePanel_toggleCollapse.expanded {
+ -webkit-transform: scaleX(-1);
+ transform: scaleX(-1);
+}
+.mx_SpacePanel ul {
+ margin: 0;
+ list-style: none;
+ padding: 0;
+}
+.mx_SpacePanel ul > .mx_SpaceItem {
+ padding-left: 16px;
+}
+.mx_SpacePanel .mx_SpaceButton_toggleCollapse {
+ cursor: pointer;
+}
+.mx_SpacePanel .mx_SpaceTreeLevel {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ max-width: 250px;
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+.mx_SpacePanel .mx_SpaceItem {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -ms-flex-flow: wrap;
+ flex-flow: wrap;
+}
+.mx_SpacePanel .mx_SpaceItem.mx_SpaceItem_narrow {
+ -ms-flex-item-align: baseline;
+ align-self: baseline;
+}
+.mx_SpacePanel
+ .mx_SpaceItem.collapsed
+ > .mx_SpaceButton
+ > .mx_SpaceButton_toggleCollapse {
+ -webkit-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+}
+.mx_SpacePanel .mx_SpaceItem.collapsed > .mx_SpaceTreeLevel {
+ display: none;
+}
+.mx_SpacePanel .mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton {
+ margin-left: 16px;
+ min-width: 40px;
+}
+.mx_SpacePanel .mx_SpaceButton {
+ border-radius: 8px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ padding: 4px 4px 4px 0;
+ width: 100%;
+}
+.mx_SpacePanel
+ .mx_SpaceButton.mx_SpaceButton_active:not(.mx_SpaceButton_narrow)
+ .mx_SpaceButton_selectionWrapper {
+ background-color: #fff;
+}
+.mx_SpacePanel
+ .mx_SpaceButton.mx_SpaceButton_active.mx_SpaceButton_narrow
+ .mx_SpaceButton_selectionWrapper {
+ padding: 1px;
+ border: 3px solid #737d8c;
+}
+.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_selectionWrapper {
+ position: relative;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ border-radius: 12px;
+ padding: 4px;
+}
+.mx_SpacePanel
+ .mx_SpaceButton:not(.mx_SpaceButton_narrow)
+ .mx_SpaceButton_selectionWrapper {
+ width: 100%;
+ padding-right: 16px;
+ overflow: hidden;
+}
+.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_name {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ margin-left: 8px;
+ white-space: nowrap;
+ display: block;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ padding-right: 8px;
+ font-size: 1.4rem;
+ line-height: 1.8rem;
+}
+.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_toggleCollapse {
+ width: 16px;
+ height: 20px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 20px;
+ mask-size: 20px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background-color: #8d99a5;
+ -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+ mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+}
+.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon {
+ width: 32px;
+ min-width: 32px;
+ height: 32px;
+ border-radius: 8px;
+ position: relative;
+}
+.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon:before {
+ position: absolute;
+ content: "";
+ width: 32px;
+ height: 32px;
+ top: 0;
+ left: 0;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 18px;
+ mask-size: 18px;
+}
+.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon {
+ background-color: #fff;
+}
+.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon:before {
+ background-color: #3f3d3d;
+ -webkit-mask-image: url(../../img/element-icons/home.b706c0e.svg);
+ mask-image: url(../../img/element-icons/home.b706c0e.svg);
+}
+.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_new .mx_SpaceButton_icon {
+ background-color: #0dbd8b;
+ -webkit-transition: all 0.1s ease-in-out;
+ transition: all 0.1s ease-in-out;
+}
+.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_new .mx_SpaceButton_icon:before {
+ background-color: #fff;
+ -webkit-mask-image: url(../../img/element-icons/plus.62cc275.svg);
+ mask-image: url(../../img/element-icons/plus.62cc275.svg);
+ -webkit-transition: all 0.2s ease-in-out;
+ transition: all 0.2s ease-in-out;
+}
+.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_newCancel .mx_SpaceButton_icon {
+ background-color: #c1c6cd;
+}
+.mx_SpacePanel
+ .mx_SpaceButton.mx_SpaceButton_newCancel
+ .mx_SpaceButton_icon:before {
+ -webkit-transform: rotate(45deg);
+ transform: rotate(45deg);
+}
+.mx_SpacePanel .mx_SpaceButton .mx_BaseAvatar_image {
+ border-radius: 8px;
+}
+.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton {
+ width: 20px;
+ min-width: 20px;
+ height: 20px;
+ margin-top: auto;
+ margin-bottom: auto;
+ display: none;
+ position: absolute;
+ right: 4px;
+}
+.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton:before {
+ top: 2px;
+ left: 2px;
+ content: "";
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
+ mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
+ background: #2e2f32;
+}
+.mx_SpacePanel .mx_SpacePanel_badgeContainer {
+ position: absolute;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge {
+ margin: 0 2px;
+}
+.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge_dot {
+ margin: 0 7px;
+}
+.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer {
+ right: 0;
+ top: 0;
+}
+.mx_SpacePanel.collapsed
+ .mx_SpaceButton
+ .mx_SpacePanel_badgeContainer
+ .mx_NotificationBadge {
+ background-clip: padding-box;
+}
+.mx_SpacePanel.collapsed
+ .mx_SpaceButton
+ .mx_SpacePanel_badgeContainer
+ .mx_NotificationBadge_dot {
+ margin: 0 -1px 0 0;
+ border: 3px solid hsla(0, 0%, 91%, 0.77);
+}
+.mx_SpacePanel.collapsed
+ .mx_SpaceButton
+ .mx_SpacePanel_badgeContainer
+ .mx_NotificationBadge_2char,
+.mx_SpacePanel.collapsed
+ .mx_SpaceButton
+ .mx_SpacePanel_badgeContainer
+ .mx_NotificationBadge_3char {
+ margin: -5px -5px 0 0;
+ border: 2px solid hsla(0, 0%, 91%, 0.77);
+}
+.mx_SpacePanel.collapsed
+ .mx_SpaceButton.mx_SpaceButton_active
+ .mx_SpacePanel_badgeContainer {
+ right: -3px;
+ top: -3px;
+}
+.mx_SpacePanel:not(.collapsed) .mx_SpacePanel_badgeContainer {
+ position: absolute;
+ right: 4px;
+}
+.mx_SpacePanel:not(.collapsed)
+ .mx_SpaceButton:focus-within:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite)
+ .mx_SpacePanel_badgeContainer,
+.mx_SpacePanel:not(.collapsed)
+ .mx_SpaceButton:hover:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite)
+ .mx_SpacePanel_badgeContainer,
+.mx_SpacePanel:not(.collapsed)
+ .mx_SpaceButton_hasMenuOpen:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite)
+ .mx_SpacePanel_badgeContainer {
+ width: 0;
+ height: 0;
+ display: none;
+}
+.mx_SpacePanel:not(.collapsed)
+ .mx_SpaceButton:focus-within:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite)
+ .mx_SpaceButton_menuButton,
+.mx_SpacePanel:not(.collapsed)
+ .mx_SpaceButton:hover:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite)
+ .mx_SpaceButton_menuButton,
+.mx_SpacePanel:not(.collapsed)
+ .mx_SpaceButton_hasMenuOpen:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite)
+ .mx_SpaceButton_menuButton {
+ display: block;
+}
+.mx_SpacePanel > .mx_AutoHideScrollbar > .mx_SpaceButton,
+.mx_SpacePanel
+ > .mx_AutoHideScrollbar
+ > .mx_SpaceButton.mx_SpaceButton_active:before {
+ height: 32px;
+}
+.mx_SpacePanel > .mx_AutoHideScrollbar > ul {
+ padding-left: 0;
+}
+.mx_SpacePanel_contextMenu .mx_SpacePanel_contextMenu_header {
+ margin: 12px 16px;
+ font-weight: 600;
+ font-size: 1.5rem;
+ line-height: 1.8rem;
+}
+.mx_SpacePanel_contextMenu
+ .mx_IconizedContextMenu_optionList
+ .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton {
+ color: #0dbd8b;
+}
+.mx_SpacePanel_contextMenu
+ .mx_IconizedContextMenu_optionList
+ .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton
+ .mx_SpacePanel_iconInvite:before {
+ background-color: #0dbd8b;
+ -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+ mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+}
+.mx_SpacePanel_contextMenu .mx_SpacePanel_iconSettings:before {
+ -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
+ mask-image: url(../../img/element-icons/settings.6b381af.svg);
+}
+.mx_SpacePanel_contextMenu .mx_SpacePanel_iconLeave:before {
+ -webkit-mask-image: url(../../img/element-icons/leave.bb917e7.svg);
+ mask-image: url(../../img/element-icons/leave.bb917e7.svg);
+}
+.mx_SpacePanel_contextMenu .mx_SpacePanel_iconMembers:before {
+ -webkit-mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
+ mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
+}
+.mx_SpacePanel_contextMenu .mx_SpacePanel_iconPlus:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);
+ mask-image: url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);
+}
+.mx_SpacePanel_contextMenu .mx_SpacePanel_iconHash:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);
+ mask-image: url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);
+}
+.mx_SpacePanel_contextMenu .mx_SpacePanel_iconExplore:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
+ mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
+}
+.mx_SpacePanel_sharePublicSpace {
+ margin: 0;
+}
+.mx_SpaceRoomDirectory_dialogWrapper > .mx_Dialog {
+ max-width: 960px;
+ height: 100%;
+}
+.mx_SpaceRoomDirectory {
+ height: 100%;
+ margin-bottom: 12px;
+ color: #2e2f32;
+ word-break: break-word;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_SpaceRoomDirectory,
+.mx_SpaceRoomDirectory .mx_Dialog_title,
+.mx_SpaceRoomView_landing .mx_Dialog_title {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_SpaceRoomDirectory .mx_Dialog_title .mx_BaseAvatar,
+.mx_SpaceRoomView_landing .mx_Dialog_title .mx_BaseAvatar {
+ margin-right: 12px;
+ -ms-flex-item-align: center;
+ align-self: center;
+}
+.mx_SpaceRoomDirectory .mx_Dialog_title .mx_BaseAvatar_image,
+.mx_SpaceRoomView_landing .mx_Dialog_title .mx_BaseAvatar_image {
+ border-radius: 8px;
+}
+.mx_SpaceRoomDirectory .mx_Dialog_title > div > h1,
+.mx_SpaceRoomView_landing .mx_Dialog_title > div > h1 {
+ font-weight: 600;
+ font-size: 1.8rem;
+ line-height: 2.2rem;
+ margin: 0;
+}
+.mx_SpaceRoomDirectory .mx_Dialog_title > div > div,
+.mx_SpaceRoomView_landing .mx_Dialog_title > div > div {
+ font-weight: 400;
+ color: #737d8c;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+}
+.mx_SpaceRoomDirectory .mx_AccessibleButton_kind_link,
+.mx_SpaceRoomView_landing .mx_AccessibleButton_kind_link {
+ padding: 0;
+}
+.mx_SpaceRoomDirectory .mx_SearchBox,
+.mx_SpaceRoomView_landing .mx_SearchBox {
+ margin: 24px 0 16px;
+}
+.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_noResults,
+.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_noResults {
+ text-align: center;
+}
+.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_noResults > div,
+.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_noResults > div {
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+ color: #737d8c;
+}
+.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader,
+.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ min-height: 32px;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+ color: #2e2f32;
+}
+.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton,
+.mx_SpaceRoomView_landing
+ .mx_SpaceRoomDirectory_listHeader
+ .mx_AccessibleButton {
+ padding: 4px 12px;
+ font-weight: 400;
+}
+.mx_SpaceRoomDirectory
+ .mx_SpaceRoomDirectory_listHeader
+ .mx_AccessibleButton
+ + .mx_AccessibleButton,
+.mx_SpaceRoomView_landing
+ .mx_SpaceRoomDirectory_listHeader
+ .mx_AccessibleButton
+ + .mx_AccessibleButton {
+ margin-left: 16px;
+}
+.mx_SpaceRoomDirectory
+ .mx_SpaceRoomDirectory_listHeader
+ .mx_AccessibleButton_kind_danger_outline,
+.mx_SpaceRoomDirectory
+ .mx_SpaceRoomDirectory_listHeader
+ .mx_AccessibleButton_kind_primary_outline,
+.mx_SpaceRoomView_landing
+ .mx_SpaceRoomDirectory_listHeader
+ .mx_AccessibleButton_kind_danger_outline,
+.mx_SpaceRoomView_landing
+ .mx_SpaceRoomDirectory_listHeader
+ .mx_AccessibleButton_kind_primary_outline {
+ padding: 3px 12px;
+}
+.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader > span,
+.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader > span {
+ margin-left: auto;
+}
+.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_error,
+.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_error {
+ position: relative;
+ font-weight: 600;
+ color: #ff4b55;
+ font-size: 1.5rem;
+ line-height: 1.8rem;
+ margin: 20px auto 12px;
+ padding-left: 24px;
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+}
+.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_error:before,
+.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_error:before {
+ content: "";
+ position: absolute;
+ height: 16px;
+ width: 16px;
+ left: 0;
+ background-image: url(../../img/element-icons/warning-badge.de1033e.svg);
+}
+.mx_SpaceRoomDirectory_list {
+ margin-top: 16px;
+ padding-bottom: 40px;
+}
+.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomCount > h3 {
+ display: inline;
+ font-weight: 600;
+ font-size: 1.8rem;
+ line-height: 2.2rem;
+ color: #2e2f32;
+}
+.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomCount > span {
+ margin-left: 8px;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+ color: #737d8c;
+}
+.mx_SpaceRoomDirectory_list
+ .mx_SpaceRoomDirectory_subspace
+ .mx_BaseAvatar_image {
+ border-radius: 8px;
+}
+.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle {
+ position: absolute;
+ left: -1px;
+ top: 10px;
+ height: 16px;
+ width: 16px;
+ border-radius: 4px;
+ background-color: #fff;
+}
+.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle:before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 16px;
+ width: 16px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ background-color: #8d99a5;
+ -webkit-mask-size: 16px;
+ mask-size: 16px;
+ -webkit-transform: rotate(270deg);
+ transform: rotate(270deg);
+ -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+ mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+}
+.mx_SpaceRoomDirectory_list
+ .mx_SpaceRoomDirectory_subspace_toggle.mx_SpaceRoomDirectory_subspace_toggle_shown:before {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+}
+.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_children {
+ position: relative;
+ padding-left: 12px;
+}
+.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile {
+ position: relative;
+ padding: 8px 16px;
+ border-radius: 8px;
+ min-height: 56px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ display: grid;
+ grid-template-columns: 20px auto -webkit-max-content;
+ grid-template-columns: 20px auto max-content;
+ grid-column-gap: 8px;
+ grid-row-gap: 6px;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_BaseAvatar {
+ grid-row: 1;
+ grid-column: 1;
+}
+.mx_SpaceRoomDirectory_list
+ .mx_SpaceRoomDirectory_roomTile
+ .mx_SpaceRoomDirectory_roomTile_name {
+ font-weight: 600;
+ font-size: 1.5rem;
+ line-height: 1.8rem;
+ grid-row: 1;
+ grid-column: 2;
+}
+.mx_SpaceRoomDirectory_list
+ .mx_SpaceRoomDirectory_roomTile
+ .mx_SpaceRoomDirectory_roomTile_name
+ .mx_InfoTooltip {
+ display: inline;
+ margin-left: 12px;
+ color: #8d99a5;
+ font-size: 1.2rem;
+ line-height: 1.5rem;
+}
+.mx_SpaceRoomDirectory_list
+ .mx_SpaceRoomDirectory_roomTile
+ .mx_SpaceRoomDirectory_roomTile_name
+ .mx_InfoTooltip
+ .mx_InfoTooltip_icon {
+ margin-right: 4px;
+ position: relative;
+ vertical-align: text-top;
+}
+.mx_SpaceRoomDirectory_list
+ .mx_SpaceRoomDirectory_roomTile
+ .mx_SpaceRoomDirectory_roomTile_name
+ .mx_InfoTooltip
+ .mx_InfoTooltip_icon:before {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+.mx_SpaceRoomDirectory_list
+ .mx_SpaceRoomDirectory_roomTile
+ .mx_SpaceRoomDirectory_roomTile_info {
+ font-size: 1.4rem;
+ line-height: 1.8rem;
+ color: #737d8c;
+ grid-row: 2;
+ grid-column: 1/3;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ overflow: hidden;
+}
+.mx_SpaceRoomDirectory_list
+ .mx_SpaceRoomDirectory_roomTile
+ .mx_SpaceRoomDirectory_actions {
+ text-align: right;
+ margin-left: 20px;
+ grid-column: 3;
+ grid-row: 1/3;
+}
+.mx_SpaceRoomDirectory_list
+ .mx_SpaceRoomDirectory_roomTile
+ .mx_SpaceRoomDirectory_actions
+ .mx_AccessibleButton {
+ line-height: 2.4rem;
+ padding: 4px 16px;
+ display: inline-block;
+ visibility: hidden;
+}
+.mx_SpaceRoomDirectory_list
+ .mx_SpaceRoomDirectory_roomTile
+ .mx_SpaceRoomDirectory_actions
+ .mx_AccessibleButton_kind_danger_outline,
+.mx_SpaceRoomDirectory_list
+ .mx_SpaceRoomDirectory_roomTile
+ .mx_SpaceRoomDirectory_actions
+ .mx_AccessibleButton_kind_primary_outline {
+ padding: 3px 16px;
+}
+.mx_SpaceRoomDirectory_list
+ .mx_SpaceRoomDirectory_roomTile
+ .mx_SpaceRoomDirectory_actions
+ .mx_Checkbox {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ vertical-align: middle;
+ margin-left: 12px;
+}
+.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:hover {
+ background-color: hsla(0, 0%, 91%, 0.77);
+}
+.mx_SpaceRoomDirectory_list
+ .mx_SpaceRoomDirectory_roomTile:hover
+ .mx_AccessibleButton {
+ visibility: visible;
+}
+.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:before,
+.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_children:before {
+ content: "";
+ position: absolute;
+ background-color: hsla(0, 0%, 91%, 0.77);
+ width: 1px;
+ height: 100%;
+ left: 6px;
+ top: 0;
+}
+.mx_SpaceRoomDirectory_list
+ .mx_SpaceRoomDirectory_actions
+ .mx_SpaceRoomDirectory_actionsText {
+ font-weight: 400;
+ font-size: 1.2rem;
+ line-height: 1.5rem;
+ color: #737d8c;
+}
+.mx_SpaceRoomDirectory_list > hr {
+ border: none;
+ height: 1px;
+ background-color: rgba(141, 151, 165, 0.2);
+ margin: 20px 0;
+}
+.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_createRoom {
+ display: block;
+ margin: 16px auto 0;
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+}
+.mx_SpaceRoomView .mx_MainSplit > div:first-child {
+ padding: 80px 60px;
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ max-height: 100%;
+ overflow-y: auto;
+}
+.mx_SpaceRoomView .mx_MainSplit > div:first-child h1 {
+ margin: 0;
+ font-size: 2.4rem;
+ font-weight: 600;
+ color: #2e2f32;
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+}
+.mx_SpaceRoomView
+ .mx_MainSplit
+ > div:first-child
+ .mx_SpaceRoomView_description {
+ font-size: 1.5rem;
+ color: #737d8c;
+ margin-top: 12px;
+ margin-bottom: 24px;
+ max-width: 428px;
+}
+.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_AddExistingToSpace {
+ max-width: 428px;
+}
+.mx_SpaceRoomView
+ .mx_MainSplit
+ > div:first-child
+ .mx_AddExistingToSpace
+ .mx_AddExistingToSpace_content {
+ height: calc(100vh - 360px);
+ max-height: 400px;
+}
+.mx_SpaceRoomView
+ .mx_MainSplit
+ > div:first-child:not(.mx_SpaceRoomView_landing)
+ .mx_SpaceFeedbackPrompt {
+ width: 428px;
+}
+.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_SpaceRoomView_buttons {
+ display: block;
+ margin-top: 44px;
+ width: 428px;
+ text-align: right;
+}
+.mx_SpaceRoomView
+ .mx_MainSplit
+ > div:first-child
+ .mx_SpaceRoomView_buttons
+ .mx_AccessibleButton_hasKind {
+ padding: 8px 22px;
+ margin-left: 16px;
+}
+.mx_SpaceRoomView
+ .mx_MainSplit
+ > div:first-child
+ .mx_SpaceRoomView_buttons
+ input.mx_AccessibleButton {
+ border: none;
+}
+.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_Field {
+ max-width: 428px;
+}
+.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_Field + .mx_Field {
+ margin-top: 28px;
+}
+.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_SpaceRoomView_errorText {
+ font-weight: 600;
+ font-size: 1.2rem;
+ line-height: 1.5rem;
+ color: #ff4b55;
+ margin-bottom: 28px;
+}
+.mx_SpaceRoomView
+ .mx_MainSplit
+ > div:first-child
+ .mx_AccessibleButton_disabled {
+ cursor: not-allowed;
+}
+.mx_SpaceRoomView .mx_SpaceRoomView_preview {
+ padding: 32px 24px !important;
+ margin: auto;
+ max-width: 480px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ -webkit-box-shadow: 2px 15px 30px rgba(0, 0, 0, 0.48);
+ box-shadow: 2px 15px 30px rgba(0, 0, 0, 0.48);
+ border-radius: 8px;
+ position: relative;
+}
+.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_BetaCard_betaPill {
+ position: absolute;
+ right: 24px;
+ top: 32px;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_preview
+ .mx_SpaceRoomView_preview_spaceBetaPrompt {
+ font-weight: 600;
+ font-size: 1.4rem;
+ line-height: 2.4rem;
+ color: #2e2f32;
+ margin-top: 24px;
+ position: relative;
+ padding-left: 24px;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_preview
+ .mx_SpaceRoomView_preview_spaceBetaPrompt
+ .mx_AccessibleButton_kind_link {
+ display: inline;
+ padding: 0;
+ font-size: inherit;
+ line-height: inherit;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_preview
+ .mx_SpaceRoomView_preview_spaceBetaPrompt:before {
+ content: "";
+ position: absolute;
+ height: 2.4rem;
+ width: 20px;
+ left: 0;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
+ mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
+ background-color: #737d8c;
+}
+.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_preview
+ .mx_SpaceRoomView_preview_inviter
+ > div {
+ margin-left: 8px;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_preview
+ .mx_SpaceRoomView_preview_inviter
+ > div
+ .mx_SpaceRoomView_preview_inviter_name {
+ line-height: 1.8rem;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_preview
+ .mx_SpaceRoomView_preview_inviter
+ > div
+ .mx_SpaceRoomView_preview_inviter_mxid {
+ line-height: 2.4rem;
+ color: #737d8c;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_preview
+ > .mx_BaseAvatar
+ > .mx_BaseAvatar_image,
+.mx_SpaceRoomView .mx_SpaceRoomView_preview > .mx_BaseAvatar_image {
+ border-radius: 12px;
+}
+.mx_SpaceRoomView .mx_SpaceRoomView_preview h1.mx_SpaceRoomView_preview_name {
+ margin: 20px 0 !important;
+}
+.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_topic {
+ font-size: 1.4rem;
+ line-height: 2.2rem;
+ color: #737d8c;
+ margin: 20px 0;
+ max-height: 160px;
+ overflow-y: auto;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_preview
+ .mx_SpaceRoomView_preview_joinButtons {
+ margin-top: 20px;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_preview
+ .mx_SpaceRoomView_preview_joinButtons
+ .mx_AccessibleButton {
+ width: 200px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ padding: 14px 0;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_preview
+ .mx_SpaceRoomView_preview_joinButtons
+ .mx_AccessibleButton
+ + .mx_AccessibleButton {
+ margin-left: 20px;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_landing
+ > .mx_BaseAvatar
+ > .mx_BaseAvatar_image,
+.mx_SpaceRoomView .mx_SpaceRoomView_landing > .mx_BaseAvatar_image {
+ border-radius: 12px;
+}
+.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name {
+ margin: 24px 0 16px;
+ font-size: 1.5rem;
+ color: #737d8c;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_landing
+ .mx_SpaceRoomView_landing_name
+ > span {
+ display: inline-block;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_landing
+ .mx_SpaceRoomView_landing_name
+ .mx_SpaceRoomView_landing_nameRow {
+ margin-top: 12px;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_landing
+ .mx_SpaceRoomView_landing_name
+ .mx_SpaceRoomView_landing_nameRow
+ > h1 {
+ display: inline-block;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_landing
+ .mx_SpaceRoomView_landing_name
+ .mx_SpaceRoomView_landing_inviter
+ .mx_BaseAvatar {
+ margin-right: 4px;
+ vertical-align: middle;
+}
+.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_landing
+ .mx_SpaceRoomView_landing_info
+ .mx_SpaceRoomView_info {
+ display: inline-block;
+ margin: 0 auto 0 0;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_landing
+ .mx_SpaceRoomView_landing_info
+ .mx_FacePile {
+ display: inline-block;
+ margin-right: 12px;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_landing
+ .mx_SpaceRoomView_landing_info
+ .mx_FacePile
+ .mx_FacePile_faces {
+ cursor: pointer;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_landing
+ .mx_SpaceRoomView_landing_info
+ .mx_SpaceRoomView_landing_inviteButton {
+ position: relative;
+ padding: 4px 18px 4px 40px;
+ line-height: 2.4rem;
+ height: -webkit-min-content;
+ height: -moz-min-content;
+ height: min-content;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_landing
+ .mx_SpaceRoomView_landing_info
+ .mx_SpaceRoomView_landing_inviteButton:before {
+ position: absolute;
+ content: "";
+ left: 8px;
+ height: 16px;
+ width: 16px;
+ background: #fff;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 16px;
+ mask-size: 16px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+ mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_landing
+ .mx_SpaceRoomView_landing_info
+ .mx_SpaceRoomView_landing_settingsButton {
+ position: relative;
+ margin-left: 16px;
+ width: 24px;
+ height: 24px;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_landing
+ .mx_SpaceRoomView_landing_info
+ .mx_SpaceRoomView_landing_settingsButton:before {
+ position: absolute;
+ content: "";
+ left: 0;
+ top: 0;
+ height: 24px;
+ width: 24px;
+ background: #8d99a5;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
+ mask-image: url(../../img/element-icons/settings.6b381af.svg);
+}
+.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_topic {
+ font-size: 1.5rem;
+ margin-top: 12px;
+ margin-bottom: 16px;
+}
+.mx_SpaceRoomView .mx_SpaceRoomView_landing > hr {
+ border: none;
+ height: 1px;
+ background-color: hsla(0, 0%, 91%, 0.77);
+}
+.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SearchBox {
+ margin: 0 0 20px;
+}
+.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceFeedbackPrompt {
+ margin-bottom: 16px;
+}
+.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceFeedbackPrompt + hr {
+ display: none;
+}
+.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton {
+ position: relative;
+ padding: 16px 32px 16px 72px;
+ width: 432px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ border-radius: 8px;
+ border: 1px solid #e7e7e7;
+ font-size: 1.5rem;
+ margin: 20px 0;
+}
+.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton > h3 {
+ font-weight: 600;
+ margin: 0 0 4px;
+}
+.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton > span {
+ color: #737d8c;
+}
+.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton:before {
+ position: absolute;
+ content: "";
+ width: 32px;
+ height: 32px;
+ top: 24px;
+ left: 20px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 24px;
+ mask-size: 24px;
+ background-color: #8d99a5;
+}
+.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton:hover {
+ border-color: #0dbd8b;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_privateScope
+ > .mx_AccessibleButton:hover:before {
+ background-color: #0dbd8b;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_privateScope
+ > .mx_AccessibleButton:hover
+ > span {
+ color: #2e2f32;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_privateScope
+ .mx_SpaceRoomView_privateScope_justMeButton:before {
+ -webkit-mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
+ mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_privateScope
+ .mx_SpaceRoomView_privateScope_meAndMyTeammatesButton:before {
+ -webkit-mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
+ mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_inviteTeammates
+ .mx_SpaceRoomView_inviteTeammates_betaDisclaimer {
+ padding: 58px 16px 16px;
+ position: relative;
+ border-radius: 8px;
+ background-color: #f3f8fd;
+ max-width: 428px;
+ margin: 20px 0 30px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_inviteTeammates
+ .mx_SpaceRoomView_inviteTeammates_betaDisclaimer
+ .mx_BetaCard_betaPill {
+ position: absolute;
+ left: 16px;
+ top: 16px;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_inviteTeammates
+ .mx_SpaceRoomView_inviteTeammates_buttons {
+ color: #737d8c;
+ margin-top: 28px;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_inviteTeammates
+ .mx_SpaceRoomView_inviteTeammates_buttons
+ .mx_AccessibleButton {
+ position: relative;
+ display: inline-block;
+ padding-left: 32px;
+ line-height: 24px;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_inviteTeammates
+ .mx_SpaceRoomView_inviteTeammates_buttons
+ .mx_AccessibleButton:before {
+ content: "";
+ position: absolute;
+ height: 24px;
+ width: 24px;
+ top: 0;
+ left: 0;
+ background-color: #737d8c;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_inviteTeammates
+ .mx_SpaceRoomView_inviteTeammates_buttons
+ .mx_AccessibleButton
+ + .mx_AccessibleButton {
+ margin-left: 32px;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_inviteTeammates
+ .mx_SpaceRoomView_inviteTeammates_buttons
+ .mx_SpaceRoomView_inviteTeammates_inviteDialogButton:before {
+ -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+ mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+}
+.mx_SpaceRoomView_info {
+ color: #737d8c;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+ margin: 20px 0;
+}
+.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private,
+.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public {
+ padding-left: 20px;
+ position: relative;
+}
+.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private:before,
+.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public:before {
+ position: absolute;
+ content: "";
+ width: 20px;
+ height: 20px;
+ top: 0;
+ left: -2px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background-color: #8d99a5;
+}
+.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public:before {
+ -webkit-mask-size: 12px;
+ mask-size: 12px;
+ -webkit-mask-image: url(../../img/globe.8201f08.svg);
+ mask-image: url(../../img/globe.8201f08.svg);
+}
+.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private:before {
+ -webkit-mask-size: 14px;
+ mask-size: 14px;
+ -webkit-mask-image: url(../../img/element-icons/lock.1f264bd.svg);
+ mask-image: url(../../img/element-icons/lock.1f264bd.svg);
+}
+.mx_SpaceRoomView_info .mx_AccessibleButton_kind_link {
+ color: inherit;
+ position: relative;
+ padding-left: 16px;
+}
+.mx_SpaceRoomView_info .mx_AccessibleButton_kind_link:before {
+ content: "·";
+ position: absolute;
+ left: 6px;
+}
+.mx_SpaceFeedbackPrompt {
+ margin-top: 18px;
+ margin-bottom: 12px;
+}
+.mx_SpaceFeedbackPrompt > hr {
+ border: none;
+ border-top: 1px solid #e7e7e7;
+ margin-bottom: 12px;
+}
+.mx_SpaceFeedbackPrompt > div {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+}
+.mx_SpaceFeedbackPrompt > div > span {
+ color: #737d8c;
+ position: relative;
+ padding-left: 32px;
+ font-size: inherit;
+ line-height: inherit;
+ margin-right: auto;
+}
+.mx_SpaceFeedbackPrompt > div > span:before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 2px;
+ height: 20px;
+ width: 20px;
+ background-color: #737d8c;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
+ mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+.mx_SpaceFeedbackPrompt > div .mx_AccessibleButton_kind_link {
+ color: #0dbd8b;
+ position: relative;
+ padding: 0 0 0 24px;
+ margin-left: 8px;
+ font-size: inherit;
+ line-height: inherit;
+}
+.mx_SpaceFeedbackPrompt > div .mx_AccessibleButton_kind_link:before {
+ content: "";
+ position: absolute;
+ left: 0;
+ height: 16px;
+ width: 16px;
+ background-color: #0dbd8b;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-image: url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);
+ mask-image: url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+.mx_TabbedView {
+ padding: 0 0 0 16px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ margin: 8px 0 0;
+}
+.mx_TabbedView_tabLabels {
+ width: 170px;
+ max-width: 170px;
+ color: #45474a;
+ position: fixed;
+}
+.mx_TabbedView_tabLabel {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ vertical-align: text-top;
+ cursor: pointer;
+ padding: 8px 0;
+ border-radius: 8px;
+ font-size: 1.3rem;
+ position: relative;
+}
+.mx_TabbedView_tabLabel_active {
+ background-color: #0dbd8b;
+ color: #fff;
+}
+.mx_TabbedView_maskedIcon {
+ margin-left: 8px;
+ margin-right: 16px;
+ width: 16px;
+ height: 16px;
+ display: inline-block;
+}
+.mx_TabbedView_maskedIcon:before {
+ display: inline-block;
+ background-color: #454545;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 16px;
+ mask-size: 16px;
+ width: 16px;
+ height: 16px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ content: "";
+}
+.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon:before {
+ background-color: #fff;
+}
+.mx_TabbedView_tabLabel_text {
+ vertical-align: middle;
+}
+.mx_TabbedView_tabPanel {
+ margin-left: 240px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_TabbedView_tabPanel,
+.mx_TabbedView_tabPanelContent {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ min-height: 0;
+}
+.mx_TabbedView_tabPanelContent {
+ overflow: auto;
+}
+.mx_ToastContainer {
+ position: absolute;
+ top: 0;
+ left: 70px;
+ z-index: 101;
+ padding: 4px;
+ display: grid;
+ grid-template-rows: 1fr 14px 6px;
+}
+.mx_ToastContainer.mx_ToastContainer_stacked:before {
+ content: "";
+ margin: 0 4px;
+ grid-row: 2/4;
+}
+.mx_ToastContainer .mx_Toast_toast,
+.mx_ToastContainer.mx_ToastContainer_stacked:before {
+ grid-column: 1;
+ background-color: #f2f5f8;
+ -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+ border-radius: 8px;
+}
+.mx_ToastContainer .mx_Toast_toast {
+ grid-row: 1/3;
+ color: #2e2f32;
+ overflow: hidden;
+ display: grid;
+ grid-template-columns: 22px 1fr;
+ grid-column-gap: 8px;
+ -webkit-column-gap: 8px;
+ -moz-column-gap: 8px;
+ column-gap: 8px;
+ grid-row-gap: 4px;
+ row-gap: 4px;
+ padding: 8px;
+}
+.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon:after,
+.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon:before {
+ content: "";
+ width: 22px;
+ height: 22px;
+ grid-column: 1;
+ grid-row: 1;
+ -webkit-mask-size: 100%;
+ mask-size: 100%;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background-size: 100%;
+ background-repeat: no-repeat;
+}
+.mx_ToastContainer
+ .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification:after {
+ -webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
+ mask-image: url(../../img/e2e/normal.76f0c09.svg);
+ background-color: #2e2f32;
+}
+.mx_ToastContainer
+ .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification_warning:before {
+ background-color: #fff;
+ -webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
+ mask-image: url(../../img/e2e/normal.76f0c09.svg);
+ -webkit-mask-size: 90%;
+ mask-size: 90%;
+}
+.mx_ToastContainer
+ .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification_warning:after {
+ -webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
+ mask-image: url(../../img/e2e/warning.78bb264.svg);
+ background-color: #ff4b55;
+}
+.mx_ToastContainer
+ .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_secure_backup:after {
+ -webkit-mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
+ mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
+ background-color: #2e2f32;
+}
+.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_body,
+.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_title {
+ grid-column: 2;
+}
+.mx_ToastContainer .mx_Toast_toast:not(.mx_Toast_hasIcon) {
+ padding-left: 12px;
+}
+.mx_ToastContainer .mx_Toast_toast:not(.mx_Toast_hasIcon) .mx_Toast_title {
+ grid-column: 1/-1;
+}
+.mx_ToastContainer .mx_Toast_toast .mx_Toast_description,
+.mx_ToastContainer .mx_Toast_toast .mx_Toast_title {
+ padding-right: 8px;
+}
+.mx_ToastContainer .mx_Toast_toast .mx_Toast_title {
+ width: 100%;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.mx_ToastContainer .mx_Toast_toast .mx_Toast_title h2 {
+ grid-column: 1/3;
+ grid-row: 1;
+ margin: 0;
+ font-size: 1.5rem;
+ font-weight: 600;
+ display: inline;
+ width: auto;
+ vertical-align: middle;
+}
+.mx_ToastContainer .mx_Toast_toast .mx_Toast_title span {
+ padding-left: 8px;
+ float: right;
+ font-size: 1.2rem;
+ line-height: 2.2rem;
+ color: #61708b;
+}
+.mx_ToastContainer .mx_Toast_toast .mx_Toast_body {
+ grid-column: 1/3;
+ grid-row: 2;
+}
+.mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons {
+ float: right;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons .mx_FormButton {
+ min-width: 96px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.mx_ToastContainer .mx_Toast_toast .mx_Toast_description {
+ max-width: 272px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin: 4px 0 11px;
+ font-size: 1.2rem;
+}
+.mx_ToastContainer
+ .mx_Toast_toast
+ .mx_Toast_description
+ .mx_AccessibleButton_kind_link {
+ font-size: inherit;
+ padding: 0;
+}
+.mx_ToastContainer .mx_Toast_toast .mx_Toast_description a {
+ text-decoration: none;
+}
+.mx_ToastContainer .mx_Toast_toast .mx_Toast_detail {
+ color: #737d8c;
+}
+.mx_ToastContainer .mx_Toast_toast .mx_Toast_deviceID {
+ font-size: 1rem;
+}
+.mx_UploadBar {
+ padding-left: 65px;
+ position: relative;
+}
+.mx_UploadBar .mx_ProgressBar {
+ width: calc(100% - 40px);
+}
+.mx_UploadBar_filename {
+ margin-top: 5px;
+ color: #61708b;
+ position: relative;
+ padding-left: 22px;
+ font-size: 1.5rem;
+ vertical-align: middle;
+}
+.mx_UploadBar_filename:before {
+ content: "";
+ height: 18px;
+ width: 18px;
+ left: 0;
+ -webkit-mask-image: url(../../img/element-icons/upload.e2a53e0.svg);
+ mask-image: url(../../img/element-icons/upload.e2a53e0.svg);
+}
+.mx_UploadBar_cancel,
+.mx_UploadBar_filename:before {
+ position: absolute;
+ top: 0;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ background-color: #61708b;
+}
+.mx_UploadBar_cancel {
+ right: 0;
+ height: 16px;
+ width: 16px;
+ margin-right: 16px;
+ -webkit-mask-image: url(../../img/icons-close.11ff07c.svg);
+ mask-image: url(../../img/icons-close.11ff07c.svg);
+}
+.mx_UserMenu {
+ padding-right: 6px;
+}
+.mx_UserMenu.mx_UserMenu_prototype {
+ margin-bottom: 6px;
+ padding-right: 0;
+}
+.mx_UserMenu.mx_UserMenu_prototype .mx_UserMenu_headerButtons {
+ margin-right: 2px;
+}
+.mx_UserMenu.mx_UserMenu_prototype:after {
+ content: "";
+ border-bottom: 1px solid #2e2f32;
+ opacity: 0.2;
+ display: block;
+ padding-top: 8px;
+}
+.mx_UserMenu .mx_UserMenu_headerButtons {
+ width: 16px;
+ height: 16px;
+ position: relative;
+ display: block;
+}
+.mx_UserMenu .mx_UserMenu_headerButtons:before {
+ content: "";
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background: #8d99a5;
+ -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+ mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+}
+.mx_UserMenu .mx_UserMenu_row {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userAvatarContainer {
+ position: relative;
+ margin-right: 8px;
+ height: 32px;
+ padding: 3px 0;
+}
+.mx_UserMenu
+ .mx_UserMenu_row
+ .mx_UserMenu_userAvatarContainer
+ .mx_UserMenu_userAvatar {
+ border-radius: 32px;
+ -o-object-fit: cover;
+ object-fit: cover;
+}
+.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ min-width: 0;
+}
+.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_subUserName,
+.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_userName {
+ display: block;
+}
+.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_subUserName {
+ color: #61708b;
+ font-size: 1.3rem;
+ line-height: 1.8rem;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
+.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userName {
+ font-weight: 600;
+ font-size: 1.5rem;
+ line-height: 2rem;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
+.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd {
+ width: 24px;
+ height: 24px;
+ margin-right: 8px;
+ position: relative;
+}
+.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd:before {
+ content: "";
+ position: absolute;
+ width: 24px;
+ height: 24px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background: #61708b;
+}
+.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd.mx_UserMenu_dnd_noisy:before {
+ -webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
+ mask-image: url(../../img/element-icons/notifications.d298b39.svg);
+}
+.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd.mx_UserMenu_dnd_muted:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);
+ mask-image: url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);
+}
+.mx_UserMenu.mx_UserMenu_minimized {
+ padding-right: 0;
+}
+.mx_UserMenu.mx_UserMenu_minimized .mx_UserMenu_userAvatarContainer {
+ margin-right: 0;
+}
+.mx_UserMenu_contextMenu {
+ width: 258px;
+}
+.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype {
+ padding-bottom: 16px;
+}
+.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype
+ .mx_UserMenu_contextMenu_header {
+ padding-bottom: 0;
+ padding-top: 16px;
+}
+.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype
+ .mx_UserMenu_contextMenu_header:nth-child(n + 2) {
+ padding-top: 8px;
+}
+.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype hr {
+ width: 85%;
+ opacity: 0.2;
+ border: none;
+ border-bottom: 1px solid #2e2f32;
+}
+.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu
+ > .mx_IconizedContextMenu_optionList {
+ margin-top: 4px;
+}
+.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu
+ > .mx_IconizedContextMenu_optionList:before {
+ border: none;
+}
+.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu
+ > .mx_IconizedContextMenu_optionList
+ > .mx_AccessibleButton {
+ padding-top: 2px;
+ padding-bottom: 2px;
+}
+.mx_UserMenu_contextMenu.mx_IconizedContextMenu
+ .mx_IconizedContextMenu_optionList_red
+ .mx_AccessibleButton {
+ padding-top: 16px;
+ padding-bottom: 16px;
+}
+.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header {
+ padding: 20px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_UserMenu_contextMenu
+ .mx_UserMenu_contextMenu_header
+ .mx_UserMenu_contextMenu_name {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ width: calc(100% - 40px);
+}
+.mx_UserMenu_contextMenu
+ .mx_UserMenu_contextMenu_header
+ .mx_UserMenu_contextMenu_name
+ * {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ width: 100%;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
+.mx_UserMenu_contextMenu
+ .mx_UserMenu_contextMenu_header
+ .mx_UserMenu_contextMenu_name
+ .mx_UserMenu_contextMenu_displayName {
+ font-weight: 700;
+ font-size: 1.5rem;
+ line-height: 2rem;
+}
+.mx_UserMenu_contextMenu
+ .mx_UserMenu_contextMenu_header
+ .mx_UserMenu_contextMenu_name
+ .mx_UserMenu_contextMenu_userId {
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+}
+.mx_UserMenu_contextMenu
+ .mx_UserMenu_contextMenu_header
+ .mx_UserMenu_contextMenu_themeButton {
+ min-width: 32px;
+ max-width: 32px;
+ width: 32px;
+ height: 32px;
+ margin-left: 8px;
+ border-radius: 32px;
+ background-color: #e3e8f0;
+ cursor: pointer;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_UserMenu_contextMenu
+ .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts,
+.mx_UserMenu_contextMenu
+ .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_hostingLink {
+ padding-top: 0;
+}
+.mx_UserMenu_contextMenu
+ .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts {
+ display: inline-block;
+}
+.mx_UserMenu_contextMenu
+ .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts
+ > span {
+ font-weight: 600;
+ display: block;
+}
+.mx_UserMenu_contextMenu
+ .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts
+ > span
+ + span {
+ margin-top: 8px;
+}
+.mx_UserMenu_contextMenu
+ .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts
+ .mx_AccessibleButton_kind_link {
+ font-weight: 400;
+ font-size: inherit;
+ padding: 0;
+}
+.mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon {
+ width: 16px;
+ height: 16px;
+ display: block;
+}
+.mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon:before {
+ content: "";
+ width: 16px;
+ height: 16px;
+ display: block;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background: #2e2f32;
+}
+.mx_UserMenu_contextMenu .mx_UserMenu_iconHome:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/home.1b4edd5.svg);
+ mask-image: url(../../img/element-icons/roomlist/home.1b4edd5.svg);
+}
+.mx_UserMenu_contextMenu .mx_UserMenu_iconHosting:before {
+ -webkit-mask-image: url(../../img/element-icons/brands/element.182040d.svg);
+ mask-image: url(../../img/element-icons/brands/element.182040d.svg);
+}
+.mx_UserMenu_contextMenu .mx_UserMenu_iconBell:before {
+ -webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
+ mask-image: url(../../img/element-icons/notifications.d298b39.svg);
+}
+.mx_UserMenu_contextMenu .mx_UserMenu_iconLock:before {
+ -webkit-mask-image: url(../../img/element-icons/security.66f2fa6.svg);
+ mask-image: url(../../img/element-icons/security.66f2fa6.svg);
+}
+.mx_UserMenu_contextMenu .mx_UserMenu_iconSettings:before {
+ -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
+ mask-image: url(../../img/element-icons/settings.6b381af.svg);
+}
+.mx_UserMenu_contextMenu .mx_UserMenu_iconArchive:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/archived.226584d.svg);
+ mask-image: url(../../img/element-icons/roomlist/archived.226584d.svg);
+}
+.mx_UserMenu_contextMenu .mx_UserMenu_iconMessage:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/feedback.b9a3f53.svg);
+ mask-image: url(../../img/element-icons/roomlist/feedback.b9a3f53.svg);
+}
+.mx_UserMenu_contextMenu .mx_UserMenu_iconSignOut:before {
+ -webkit-mask-image: url(../../img/element-icons/leave.bb917e7.svg);
+ mask-image: url(../../img/element-icons/leave.bb917e7.svg);
+}
+.mx_UserMenu_contextMenu .mx_UserMenu_iconMembers:before {
+ -webkit-mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
+ mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
+}
+.mx_UserMenu_contextMenu .mx_UserMenu_iconInvite:before {
+ -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+ mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+}
+.mx_ViewSource_separator {
+ clear: both;
+ border-bottom: 1px solid #e5e5e5;
+ padding-top: 0.7em;
+ padding-bottom: 0.7em;
+}
+.mx_ViewSource_heading {
+ font-size: 1.7rem;
+ font-weight: 400;
+ color: #2e2f32;
+ margin-top: 0.7em;
+}
+.mx_ViewSource pre {
+ text-align: left;
+ font-size: 1.2rem;
+ padding: 0.5em 1em;
+ word-wrap: break-word;
+ white-space: pre-wrap;
+}
+.mx_ViewSource_details {
+ margin-top: 0.8em;
+}
+.mx_CompleteSecurity_header {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_CompleteSecurity_headerIcon {
+ width: 24px;
+ height: 24px;
+ margin-right: 4px;
+ position: relative;
+}
+.mx_CompleteSecurity_heroIcon {
+ width: 128px;
+ height: 128px;
+ position: relative;
+ margin: 0 auto;
+}
+.mx_CompleteSecurity_body {
+ font-size: 1.5rem;
+}
+.mx_CompleteSecurity_waiting {
+ color: #8d99a5;
+}
+.mx_CompleteSecurity_actionRow {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+ margin-top: 2.8rem;
+}
+.mx_CompleteSecurity_actionRow .mx_AccessibleButton {
+ -webkit-margin-start: 18px;
+ margin-inline-start: 18px;
+}
+.mx_CompleteSecurity_actionRow .mx_AccessibleButton.warning {
+ color: #ff4b55;
+}
+.mx_Login_submit {
+ vertical-align: middle;
+ border: 0;
+ border-radius: 8px;
+ font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
+ Helvetica, Sans-Serif, Noto Color Emoji;
+ font-size: 1.4rem;
+ color: #fff;
+ background-color: #0dbd8b;
+ width: auto;
+ padding: 7px 1.5em;
+ cursor: pointer;
+ display: inline-block;
+ outline: none;
+ width: 100%;
+ margin-top: 24px;
+ margin-bottom: 24px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ text-align: center;
+}
+.mx_Login_submit:disabled {
+ opacity: 0.3;
+ cursor: default;
+}
+.mx_Login_loader {
+ display: inline;
+ position: relative;
+ top: 2px;
+ left: 8px;
+}
+.mx_Login_loader .mx_Spinner {
+ display: inline;
+}
+.mx_Login_loader .mx_Spinner img {
+ width: 16px;
+ height: 16px;
+}
+.mx_Login_error {
+ color: #ff4b55;
+ font-weight: 700;
+ text-align: center;
+ margin-top: 12px;
+ margin-bottom: 12px;
+}
+.mx_Login_error.mx_Login_serverError {
+ text-align: left;
+ font-weight: 400;
+}
+.mx_Login_error.mx_Login_serverError.mx_Login_serverErrorNonFatal {
+ color: #ff8d13;
+}
+.mx_Login_type_container {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #232f32;
+}
+.mx_Login_type_container .mx_Field {
+ margin: 0;
+}
+.mx_Login_type_label {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+}
+.mx_Login_underlinedServerName {
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+ border-bottom: 1px dashed #0dbd8b;
+}
+div.mx_AccessibleButton_kind_link.mx_Login_forgot {
+ display: block;
+ margin: 0 auto;
+ font-size: inherit;
+ padding: 0;
+}
+div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
+ cursor: not-allowed;
+}
+.mx_AuthBody {
+ width: 500px;
+ font-size: 1.2rem;
+ color: #61708b;
+ background-color: #fff;
+ border-radius: 0 4px 4px 0;
+ padding: 25px 60px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.mx_AuthBody h2 {
+ font-size: 2.4rem;
+ font-weight: 600;
+ margin-top: 8px;
+ color: #232f32;
+}
+.mx_AuthBody h3 {
+ font-size: 1.4rem;
+ font-weight: 600;
+ color: #61708b;
+}
+.mx_AuthBody h3.mx_AuthBody_centered {
+ text-align: center;
+}
+.mx_AuthBody a:hover,
+.mx_AuthBody a:link,
+.mx_AuthBody a:visited {
+ color: #0dbd8b;
+ text-decoration: none;
+}
+.mx_AuthBody input[type="password"],
+.mx_AuthBody input[type="text"] {
+ color: #232f32;
+}
+.mx_AuthBody .mx_Field input,
+.mx_AuthBody .mx_Field select {
+ color: #232f32;
+ background-color: #fff;
+}
+.mx_AuthBody .mx_Field label {
+ color: #232f32;
+}
+.mx_AuthBody .mx_Field input:not(:-moz-placeholder-shown) + label,
+.mx_AuthBody .mx_Field textarea:not(:-moz-placeholder-shown) + label {
+ background-color: #fff;
+}
+.mx_AuthBody .mx_Field input:not(:-ms-input-placeholder) + label,
+.mx_AuthBody .mx_Field textarea:not(:-ms-input-placeholder) + label {
+ background-color: #fff;
+}
+.mx_AuthBody .mx_Field_labelAlwaysTopLeft label,
+.mx_AuthBody .mx_Field input:focus + label,
+.mx_AuthBody .mx_Field input:not(:placeholder-shown) + label,
+.mx_AuthBody .mx_Field select + label,
+.mx_AuthBody .mx_Field textarea:focus + label,
+.mx_AuthBody .mx_Field textarea:not(:placeholder-shown) + label {
+ background-color: #fff;
+}
+.mx_AuthBody input.error {
+ color: #ff4b55;
+}
+.mx_AuthBody .mx_Field input {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.mx_AuthBody .mx_Field_select:before {
+ background-color: #232f32;
+}
+.mx_AuthBody .mx_Dropdown {
+ color: #232f32;
+}
+.mx_AuthBody .mx_Dropdown_arrow {
+ background: #232f32;
+}
+.mx_AuthBody .mx_Dropdown_menu {
+ background-color: #fff;
+}
+.mx_AuthBody .mx_Dropdown_menu .mx_Dropdown_option_highlight {
+ background-color: #ddd;
+}
+.mx_AuthBody_fieldRow {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin-bottom: 10px;
+}
+.mx_AuthBody_fieldRow > .mx_Field {
+ margin: 0 5px;
+}
+.mx_AuthBody_fieldRow > .mx_Field:first-child {
+ margin-left: 0;
+}
+.mx_AuthBody_fieldRow > .mx_Field:last-child {
+ margin-right: 0;
+}
+.mx_AuthBody_paddedFooter {
+ height: 80px;
+ padding-top: 28px;
+ text-align: center;
+}
+.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_title {
+ margin-top: 16px;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+}
+.mx_AuthBody_paddedFooter
+ .mx_AuthBody_paddedFooter_title
+ .mx_InlineSpinner
+ img {
+ vertical-align: sub;
+ margin-right: 5px;
+}
+.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_subtitle {
+ margin-top: 8px;
+ font-size: 1rem;
+ line-height: 1.4rem;
+}
+.mx_AuthBody_changeFlow {
+ display: block;
+ text-align: center;
+ width: 100%;
+}
+.mx_AuthBody_changeFlow > a {
+ font-weight: 600;
+}
+.mx_SSOButtons + .mx_AuthBody_changeFlow {
+ margin-top: 24px;
+}
+.mx_AuthBody_spinner {
+ margin: 1em 0;
+}
+@media only screen and (max-width: 480px) {
+ .mx_AuthBody {
+ border-radius: 4px;
+ width: auto;
+ max-width: 500px;
+ padding: 10px;
+ }
+}
+.mx_AuthButtons {
+ min-height: 24px;
+ height: unset !important;
+ padding-top: 13px !important;
+ padding-bottom: 14px !important;
+ -webkit-box-ordinal-group: 5;
+ -ms-flex-order: 4;
+ order: 4;
+}
+.mx_AuthButtons_loginButton_wrapper {
+ text-align: center;
+ width: 100%;
+}
+.mx_AuthButtons_loginButton,
+.mx_AuthButtons_registerButton {
+ margin-top: 3px;
+ height: 40px;
+ border: 0;
+ border-radius: 40px;
+ margin-left: 4px;
+ margin-right: 4px;
+ min-width: 80px;
+ background-color: #0dbd8b;
+ color: #fff;
+ cursor: pointer;
+ font-size: 1.5rem;
+ padding: 0 11px;
+ word-break: break-word;
+}
+.mx_AuthFooter {
+ text-align: center;
+ width: 100%;
+ font-size: 1.4rem;
+ opacity: 0.72;
+ padding: 20px 0;
+ background: -webkit-gradient(
+ linear,
+ left top,
+ left bottom,
+ from(transparent),
+ to(rgba(0, 0, 0, 0.8))
+ );
+ background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
+}
+.mx_AuthFooter a:hover,
+.mx_AuthFooter a:link,
+.mx_AuthFooter a:visited {
+ color: #fff;
+ margin: 0 22px;
+}
+.mx_AuthHeader {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ width: 206px;
+ padding: 25px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+@media only screen and (max-width: 480px) {
+ .mx_AuthHeader {
+ display: none;
+ }
+}
+.mx_AuthHeaderLogo {
+ margin-top: 15px;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ padding: 0 25px;
+}
+.mx_AuthHeaderLogo img {
+ width: 100%;
+}
+@media only screen and (max-width: 480px) {
+ .mx_AuthHeaderLogo {
+ display: none;
+ }
+}
+.mx_AuthPage {
+ width: 100%;
+ min-height: 100%;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ background-color: #2e3649;
+}
+.mx_AuthPage,
+.mx_AuthPage_modal {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_AuthPage_modal {
+ margin: 100px auto auto;
+ border-radius: 4px;
+ -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33);
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33);
+ background-color: hsla(0, 0%, 96.1%, 0.9);
+}
+@media only screen and (max-width: 480px) {
+ .mx_AuthPage_modal {
+ margin-top: 0;
+ }
+}
+.mx_CompleteSecurityBody {
+ width: 600px;
+ color: #232f32;
+ background-color: #fff;
+ border-radius: 4px;
+ padding: 20px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.mx_CompleteSecurityBody h2 {
+ font-size: 2.4rem;
+ font-weight: 600;
+ margin-top: 0;
+}
+.mx_CompleteSecurityBody h3 {
+ font-size: 1.4rem;
+ font-weight: 600;
+}
+.mx_CompleteSecurityBody a:hover,
+.mx_CompleteSecurityBody a:link,
+.mx_CompleteSecurityBody a:visited {
+ color: #0dbd8b;
+ text-decoration: none;
+}
+.mx_CountryDropdown .mx_Dropdown_input .mx_Dropdown_option {
+ padding: 0 3px;
+}
+.mx_CountryDropdown .mx_Dropdown_arrow {
+ padding-right: 3px;
+}
+.mx_CountryDropdown_shortOption {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ height: 100%;
+}
+.mx_CountryDropdown_option,
+.mx_CountryDropdown_shortOption {
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_CountryDropdown_option {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_InteractiveAuthEntryComponents_emailWrapper {
+ padding-right: 100px;
+ position: relative;
+ margin-top: 32px;
+ margin-bottom: 32px;
+}
+.mx_InteractiveAuthEntryComponents_emailWrapper:after,
+.mx_InteractiveAuthEntryComponents_emailWrapper:before {
+ position: absolute;
+ width: 116px;
+ height: 116px;
+ content: "";
+ right: -10px;
+}
+.mx_InteractiveAuthEntryComponents_emailWrapper:before {
+ background-color: rgba(244, 246, 250, 0.91);
+ border-radius: 50%;
+ top: -20px;
+}
+.mx_InteractiveAuthEntryComponents_emailWrapper:after {
+ background-image: url(../../img/element-icons/email-prompt.1d04dfe.svg);
+ background-repeat: no-repeat;
+ background-position: 50%;
+ background-size: contain;
+ top: -25px;
+}
+.mx_InteractiveAuthEntryComponents_msisdnWrapper {
+ text-align: center;
+}
+.mx_InteractiveAuthEntryComponents_msisdnEntry {
+ font-size: 200%;
+ font-weight: 700;
+ border: 1px solid #c7c7c7;
+ border-radius: 3px;
+ width: 6em;
+}
+.mx_InteractiveAuthEntryComponents_msisdnEntry:focus {
+ border: 1px solid #0dbd8b;
+}
+.mx_InteractiveAuthEntryComponents_msisdnSubmit {
+ margin-top: 4px;
+ margin-bottom: 5px;
+}
+.mx_InteractiveAuthEntryComponents_termsSubmit {
+ margin-top: 20px;
+ margin-bottom: 5px;
+ display: block;
+ width: 100%;
+}
+.mx_InteractiveAuthEntryComponents_msisdnSubmit:disabled {
+ background-color: #747474;
+ cursor: default;
+}
+.mx_InteractiveAuthEntryComponents_termsSubmit:disabled {
+ background-color: #92caad;
+ cursor: default;
+}
+.mx_InteractiveAuthEntryComponents_termsPolicy {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: start;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_InteractiveAuthEntryComponents_passwordSection {
+ width: 300px;
+}
+.mx_InteractiveAuthEntryComponents_sso_buttons {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+ margin-top: 20px;
+}
+.mx_InteractiveAuthEntryComponents_sso_buttons .mx_AccessibleButton {
+ margin-left: 5px;
+}
+.mx_AuthBody_language {
+ width: 100%;
+}
+.mx_AuthBody_language .mx_Dropdown_input {
+ border: none;
+ font-size: 1.4rem;
+ font-weight: 600;
+ color: #4e5054;
+ width: auto;
+}
+.mx_AuthBody_language .mx_Dropdown_arrow {
+ background: #4e5054;
+}
+progress.mx_PassphraseField_progress {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ width: 100%;
+ border: 0;
+ height: 4px;
+ position: absolute;
+ top: -12px;
+ border-radius: "2px";
+}
+progress.mx_PassphraseField_progress::-moz-progress-bar {
+ border-radius: "2px";
+}
+progress.mx_PassphraseField_progress::-webkit-progress-bar,
+progress.mx_PassphraseField_progress::-webkit-progress-value {
+ border-radius: "2px";
+}
+progress.mx_PassphraseField_progress {
+ color: #ff4b55;
+}
+progress.mx_PassphraseField_progress::-moz-progress-bar {
+ background-color: #ff4b55;
+}
+progress.mx_PassphraseField_progress::-webkit-progress-value {
+ background-color: #ff4b55;
+}
+progress.mx_PassphraseField_progress[value="2"],
+progress.mx_PassphraseField_progress[value="3"] {
+ color: #ff812d;
+}
+progress.mx_PassphraseField_progress[value="2"]::-moz-progress-bar,
+progress.mx_PassphraseField_progress[value="3"]::-moz-progress-bar {
+ background-color: #ff812d;
+}
+progress.mx_PassphraseField_progress[value="2"]::-webkit-progress-value,
+progress.mx_PassphraseField_progress[value="3"]::-webkit-progress-value {
+ background-color: #ff812d;
+}
+progress.mx_PassphraseField_progress[value="4"] {
+ color: #0dbd8b;
+}
+progress.mx_PassphraseField_progress[value="4"]::-moz-progress-bar {
+ background-color: #0dbd8b;
+}
+progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
+ background-color: #0dbd8b;
+}
+.mx_Welcome {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_Welcome.mx_WelcomePage_registrationDisabled .mx_ButtonCreateAccount {
+ display: none;
+}
+.mx_Welcome .mx_AuthBody_language {
+ width: 160px;
+ margin-bottom: 10px;
+}
+.mx_BaseAvatar {
+ position: relative;
+ display: inline-block;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.mx_BaseAvatar_initial {
+ position: absolute;
+ left: 0;
+ color: #fff;
+ text-align: center;
+ speak: none;
+ pointer-events: none;
+ font-weight: 400;
+}
+.mx_BaseAvatar_image {
+ -o-object-fit: cover;
+ object-fit: cover;
+ border-radius: 125px;
+ vertical-align: top;
+ background-color: #fff;
+}
+.mx_DecoratedRoomAvatar,
+.mx_ExtraTile {
+ position: relative;
+}
+.mx_DecoratedRoomAvatar.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar,
+.mx_ExtraTile.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/decorated-avatar-mask.76c407f.svg);
+ mask-image: url(../../img/element-icons/roomlist/decorated-avatar-mask.76c407f.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+}
+.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon,
+.mx_ExtraTile .mx_DecoratedRoomAvatar_icon {
+ position: absolute;
+ bottom: -2px;
+ right: -2px;
+ margin: 4px;
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+}
+.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon:before,
+.mx_ExtraTile .mx_DecoratedRoomAvatar_icon:before {
+ content: "";
+ width: 8px;
+ height: 8px;
+ position: absolute;
+ border-radius: 8px;
+}
+.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_globe:before,
+.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_globe:before {
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background: #737d8c;
+ -webkit-mask-image: url(../../img/globe.8201f08.svg);
+ mask-image: url(../../img/globe.8201f08.svg);
+}
+.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_offline:before,
+.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_offline:before {
+ background-color: #e3e8f0;
+}
+.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_online:before,
+.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_online:before {
+ background-color: #0dbd8b;
+}
+.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_away:before,
+.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_away:before {
+ background-color: #d9b072;
+}
+.mx_DecoratedRoomAvatar .mx_NotificationBadge,
+.mx_DecoratedRoomAvatar .mx_RoomTile_badgeContainer,
+.mx_ExtraTile .mx_NotificationBadge,
+.mx_ExtraTile .mx_RoomTile_badgeContainer {
+ position: absolute;
+ top: 0;
+ right: 0;
+ height: 18px;
+ width: 18px;
+}
+.mx_MessageComposer_avatar .mx_BaseAvatar {
+ padding: 2px;
+ border: 1px solid transparent;
+ border-radius: 100%;
+}
+.mx_MessageComposer_avatar .mx_BaseAvatar_initial {
+ left: 2px;
+}
+.mx_MemberStatusMessageAvatar_hasStatus .mx_BaseAvatar {
+ border-color: #0dbd8b;
+}
+@-webkit-keyframes shadow-pulse {
+ 0% {
+ -webkit-box-shadow: 0 0 0 0 rgba(13, 189, 139, 0.2);
+ box-shadow: 0 0 0 0 rgba(13, 189, 139, 0.2);
+ }
+ to {
+ -webkit-box-shadow: 0 0 0 6px rgba(13, 189, 139, 0);
+ box-shadow: 0 0 0 6px rgba(13, 189, 139, 0);
+ }
+}
+@keyframes shadow-pulse {
+ 0% {
+ -webkit-box-shadow: 0 0 0 0 rgba(13, 189, 139, 0.2);
+ box-shadow: 0 0 0 0 rgba(13, 189, 139, 0.2);
+ }
+ to {
+ -webkit-box-shadow: 0 0 0 6px rgba(13, 189, 139, 0);
+ box-shadow: 0 0 0 6px rgba(13, 189, 139, 0);
+ }
+}
+.mx_PulsedAvatar img {
+ -webkit-animation: shadow-pulse 1s infinite;
+ animation: shadow-pulse 1s infinite;
+}
+.mx_WidgetAvatar {
+ border-radius: 4px;
+}
+.mx_BetaCard {
+ margin-bottom: 20px;
+ padding: 24px;
+ background-color: #f4f6fa;
+ border-radius: 8px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.mx_BetaCard > div .mx_BetaCard_title {
+ font-weight: 600;
+ font-size: 1.8rem;
+ line-height: 2.2rem;
+ color: #2e2f32;
+ margin: 4px 0 14px;
+}
+.mx_BetaCard > div .mx_BetaCard_title .mx_BetaCard_betaPill {
+ margin-left: 12px;
+}
+.mx_BetaCard > div .mx_BetaCard_caption {
+ font-size: 1.5rem;
+ line-height: 2rem;
+ color: #737d8c;
+ margin-bottom: 20px;
+}
+.mx_BetaCard > div .mx_AccessibleButton {
+ display: block;
+ margin: 12px 0;
+ padding: 7px 40px;
+ width: auto;
+}
+.mx_BetaCard > div .mx_BetaCard_disclaimer {
+ font-size: 1.2rem;
+ line-height: 1.5rem;
+ color: #737d8c;
+ margin-top: 20px;
+}
+.mx_BetaCard > img {
+ margin: auto 0 auto 20px;
+ width: 300px;
+ -o-object-fit: contain;
+ object-fit: contain;
+ height: 100%;
+}
+.mx_BetaCard_betaPill {
+ background-color: #238cf5;
+ padding: 4px 10px;
+ border-radius: 8px;
+ text-transform: uppercase;
+ font-size: 12px;
+ line-height: 15px;
+ color: #fff;
+ display: inline-block;
+ vertical-align: text-bottom;
+}
+.mx_BetaCard_betaPill.mx_BetaCard_betaPill_clickable {
+ cursor: pointer;
+}
+.mx_BetaDot {
+ border-radius: 50%;
+ margin: 10px;
+ height: 12px;
+ width: 12px;
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ background: #238cf5;
+ -webkit-box-shadow: 0 0 0 0 #238cf5;
+ box-shadow: 0 0 0 0 #238cf5;
+ -webkit-animation: mx_Beta_bluePulse 2s infinite;
+ animation: mx_Beta_bluePulse 2s infinite;
+ -webkit-animation-iteration-count: 20;
+ animation-iteration-count: 20;
+}
+@-webkit-keyframes mx_Beta_bluePulse {
+ 0% {
+ -webkit-transform: scale(0.95);
+ transform: scale(0.95);
+ -webkit-box-shadow: 0 0 0 0 rgba(35, 140, 245, 0.7);
+ box-shadow: 0 0 0 0 rgba(35, 140, 245, 0.7);
+ }
+ 70% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ -webkit-box-shadow: 0 0 0 10px rgba(35, 140, 245, 0);
+ box-shadow: 0 0 0 10px rgba(35, 140, 245, 0);
+ }
+ to {
+ -webkit-transform: scale(0.95);
+ transform: scale(0.95);
+ -webkit-box-shadow: 0 0 0 0 rgba(35, 140, 245, 0);
+ box-shadow: 0 0 0 0 rgba(35, 140, 245, 0);
+ }
+}
+@keyframes mx_Beta_bluePulse {
+ 0% {
+ -webkit-transform: scale(0.95);
+ transform: scale(0.95);
+ -webkit-box-shadow: 0 0 0 0 rgba(35, 140, 245, 0.7);
+ box-shadow: 0 0 0 0 rgba(35, 140, 245, 0.7);
+ }
+ 70% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ -webkit-box-shadow: 0 0 0 10px rgba(35, 140, 245, 0);
+ box-shadow: 0 0 0 10px rgba(35, 140, 245, 0);
+ }
+ to {
+ -webkit-transform: scale(0.95);
+ transform: scale(0.95);
+ -webkit-box-shadow: 0 0 0 0 rgba(35, 140, 245, 0);
+ box-shadow: 0 0 0 0 rgba(35, 140, 245, 0);
+ }
+}
+.mx_CallContextMenu_item {
+ width: 205px;
+ height: 40px;
+ padding-left: 16px;
+ line-height: 40px;
+ vertical-align: center;
+}
+.mx_IconizedContextMenu {
+ min-width: 146px;
+}
+.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList > * {
+ padding-left: 20px;
+ padding-right: 20px;
+}
+.mx_IconizedContextMenu
+ .mx_IconizedContextMenu_optionList
+ .mx_IconizedContextMenu_optionList_notFirst:before,
+.mx_IconizedContextMenu
+ .mx_IconizedContextMenu_optionList:nth-child(n + 2):before {
+ border-top: 1px solid #2e2f32;
+ opacity: 0.1;
+ content: "";
+ width: 100%;
+ position: absolute;
+ left: 0;
+}
+.mx_IconizedContextMenu
+ .mx_IconizedContextMenu_optionList:first-child
+ .mx_AccessibleButton:first-child {
+ border-radius: 8px 8px 0 0;
+}
+.mx_IconizedContextMenu
+ .mx_IconizedContextMenu_optionList:last-child
+ .mx_AccessibleButton:last-child {
+ border-radius: 0 0 8px 8px;
+}
+.mx_IconizedContextMenu
+ .mx_IconizedContextMenu_optionList
+ .mx_AccessibleButton {
+ padding-top: 12px;
+ padding-bottom: 12px;
+ text-decoration: none;
+ color: #2e2f32;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_IconizedContextMenu
+ .mx_IconizedContextMenu_optionList
+ .mx_AccessibleButton:hover {
+ background-color: #f5f8fa;
+}
+.mx_IconizedContextMenu
+ .mx_IconizedContextMenu_optionList
+ .mx_AccessibleButton.mx_AccessibleButton_disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+.mx_IconizedContextMenu
+ .mx_IconizedContextMenu_optionList
+ .mx_AccessibleButton
+ .mx_IconizedContextMenu_icon,
+.mx_IconizedContextMenu
+ .mx_IconizedContextMenu_optionList
+ .mx_AccessibleButton
+ img {
+ width: 16px;
+ min-width: 16px;
+ max-width: 16px;
+}
+.mx_IconizedContextMenu
+ .mx_IconizedContextMenu_optionList
+ .mx_AccessibleButton
+ span.mx_IconizedContextMenu_label {
+ width: 100%;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
+.mx_IconizedContextMenu
+ .mx_IconizedContextMenu_optionList
+ .mx_AccessibleButton
+ .mx_IconizedContextMenu_icon
+ + .mx_IconizedContextMenu_label {
+ padding-left: 14px;
+}
+.mx_IconizedContextMenu .mx_IconizedContextMenu_icon {
+ position: relative;
+ width: 16px;
+ height: 16px;
+}
+.mx_IconizedContextMenu .mx_IconizedContextMenu_icon:before {
+ content: "";
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background: #2e2f32;
+}
+.mx_IconizedContextMenu
+ .mx_IconizedContextMenu_optionList_red
+ .mx_AccessibleButton {
+ color: #ff4b55 !important;
+}
+.mx_IconizedContextMenu
+ .mx_IconizedContextMenu_optionList_red
+ .mx_IconizedContextMenu_icon:before {
+ background-color: #ff4b55;
+}
+.mx_IconizedContextMenu .mx_IconizedContextMenu_active.mx_AccessibleButton,
+.mx_IconizedContextMenu .mx_IconizedContextMenu_active .mx_AccessibleButton {
+ color: #0dbd8b !important;
+}
+.mx_IconizedContextMenu
+ .mx_IconizedContextMenu_active
+ .mx_IconizedContextMenu_icon:before {
+ background-color: #0dbd8b;
+}
+.mx_IconizedContextMenu.mx_IconizedContextMenu_compact
+ .mx_IconizedContextMenu_optionList
+ > * {
+ padding: 8px 16px 8px 11px;
+}
+.mx_IconizedContextMenu .mx_IconizedContextMenu_checked {
+ margin-left: 16px;
+ margin-right: -5px;
+}
+.mx_IconizedContextMenu .mx_IconizedContextMenu_checked:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);
+ mask-image: url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);
+}
+.mx_MessageContextMenu {
+ padding: 6px;
+}
+.mx_MessageContextMenu_field {
+ display: block;
+ padding: 3px 6px;
+ cursor: pointer;
+ white-space: nowrap;
+}
+.mx_MessageContextMenu_field.mx_MessageContextMenu_fieldSet {
+ font-weight: 700;
+}
+.mx_StatusMessageContextMenu {
+ padding: 10px;
+}
+.mx_StatusMessageContextMenu_form {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+input.mx_StatusMessageContextMenu_message {
+ border-radius: 4px;
+ border: 1px solid #e7e7e7;
+ padding: 6.5px 11px;
+ background-color: #fff;
+ font-weight: 400;
+ margin: 0 0 10px;
+}
+.mx_StatusMessageContextMenu_message::-webkit-input-placeholder {
+ color: #61708b;
+}
+.mx_StatusMessageContextMenu_message::-moz-placeholder {
+ color: #61708b;
+}
+.mx_StatusMessageContextMenu_message:-ms-input-placeholder {
+ color: #61708b;
+}
+.mx_StatusMessageContextMenu_message::-ms-input-placeholder {
+ color: #61708b;
+}
+.mx_StatusMessageContextMenu_message::placeholder {
+ color: #61708b;
+}
+.mx_StatusMessageContextMenu_actionContainer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_StatusMessageContextMenu_clear,
+.mx_StatusMessageContextMenu_submit {
+ vertical-align: middle;
+ border-radius: 8px;
+ font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
+ Helvetica, Sans-Serif, Noto Color Emoji;
+ font-size: 1.4rem;
+ color: #fff;
+ background-color: #0dbd8b;
+ width: auto;
+ cursor: pointer;
+ display: inline-block;
+ outline: none;
+ -ms-flex-item-align: start;
+ align-self: start;
+ font-size: 1.2rem;
+ padding: 6px 1em;
+ border: 1px solid transparent;
+ margin-right: 10px;
+}
+.mx_StatusMessageContextMenu_submit[disabled] {
+ opacity: 0.49;
+}
+.mx_StatusMessageContextMenu_clear {
+ color: #ff4b55;
+ background-color: transparent;
+ border: 1px solid #ff4b55;
+}
+.mx_StatusMessageContextMenu_actionContainer .mx_Spinner {
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+}
+.mx_TagTileContextMenu_item {
+ padding: 8px 20px 8px 8px;
+ cursor: pointer;
+ white-space: nowrap;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ line-height: 1.6rem;
+}
+.mx_TagTileContextMenu_item:before {
+ content: "";
+ height: 15px;
+ width: 15px;
+ background-color: currentColor;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ margin-right: 8px;
+}
+.mx_TagTileContextMenu_viewCommunity:before {
+ -webkit-mask-image: url(../../img/element-icons/view-community.0cad1a5.svg);
+ mask-image: url(../../img/element-icons/view-community.0cad1a5.svg);
+}
+.mx_TagTileContextMenu_hideCommunity:before {
+ -webkit-mask-image: url(../../img/element-icons/hide.2b52315.svg);
+ mask-image: url(../../img/element-icons/hide.2b52315.svg);
+}
+.mx_TagTileContextMenu_separator {
+ margin-top: 0;
+ margin-bottom: 0;
+ border-style: none;
+ border-top: 1px solid;
+ border-color: #e7e7e7;
+}
+.mx_AddExistingToSpaceDialog_wrapper .mx_Dialog {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_AddExistingToSpace .mx_SearchBox {
+ margin: 0 0 15px;
+ -webkit-box-flex: 0;
+ -ms-flex-positive: 0;
+ flex-grow: 0;
+}
+.mx_AddExistingToSpace .mx_AddExistingToSpace_content {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+.mx_AddExistingToSpace .mx_AddExistingToSpace_noResults {
+ display: block;
+ margin-top: 24px;
+}
+.mx_AddExistingToSpace .mx_AddExistingToSpace_section:not(:first-child) {
+ margin-top: 24px;
+}
+.mx_AddExistingToSpace .mx_AddExistingToSpace_section > h3 {
+ margin: 0;
+ color: #737d8c;
+ font-size: 1.2rem;
+ font-weight: 600;
+ line-height: 1.5rem;
+}
+.mx_AddExistingToSpace
+ .mx_AddExistingToSpace_section
+ .mx_AddExistingToSpace_entry {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin-top: 12px;
+}
+.mx_AddExistingToSpace
+ .mx_AddExistingToSpace_section
+ .mx_AddExistingToSpace_entry
+ .mx_DecoratedRoomAvatar {
+ margin-right: 12px;
+}
+.mx_AddExistingToSpace
+ .mx_AddExistingToSpace_section
+ .mx_AddExistingToSpace_entry
+ .mx_AddExistingToSpace_entry_name {
+ font-size: 1.5rem;
+ line-height: 30px;
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ margin-right: 12px;
+}
+.mx_AddExistingToSpace
+ .mx_AddExistingToSpace_section
+ .mx_AddExistingToSpace_entry
+ .mx_Checkbox {
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_AddExistingToSpace .mx_AddExistingToSpace_section_spaces .mx_BaseAvatar {
+ margin-right: 12px;
+}
+.mx_AddExistingToSpace
+ .mx_AddExistingToSpace_section_spaces
+ .mx_BaseAvatar_image {
+ border-radius: 8px;
+}
+.mx_AddExistingToSpace .mx_AddExistingToSpace_section_experimental {
+ position: relative;
+ border-radius: 8px;
+ margin: 12px 0;
+ padding: 8px 8px 8px 42px;
+ background-color: #f3f8fd;
+ font-size: 1.2rem;
+ line-height: 1.5rem;
+ color: #737d8c;
+}
+.mx_AddExistingToSpace .mx_AddExistingToSpace_section_experimental:before {
+ content: "";
+ position: absolute;
+ left: 10px;
+ top: calc(50% - 8px);
+ height: 16px;
+ width: 16px;
+ background-color: #737d8c;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
+ mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+.mx_AddExistingToSpace .mx_AddExistingToSpace_footer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin-top: 20px;
+}
+.mx_AddExistingToSpace .mx_AddExistingToSpace_footer > span {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ font-size: 1.2rem;
+ line-height: 1.5rem;
+ color: #737d8c;
+}
+.mx_AddExistingToSpace .mx_AddExistingToSpace_footer > span .mx_ProgressBar {
+ height: 8px;
+ width: 100%;
+ border-radius: 8px;
+}
+.mx_AddExistingToSpace
+ .mx_AddExistingToSpace_footer
+ > span
+ .mx_ProgressBar::-moz-progress-bar {
+ border-radius: 8px;
+}
+.mx_AddExistingToSpace
+ .mx_AddExistingToSpace_footer
+ > span
+ .mx_ProgressBar::-webkit-progress-bar,
+.mx_AddExistingToSpace
+ .mx_AddExistingToSpace_footer
+ > span
+ .mx_ProgressBar::-webkit-progress-value {
+ border-radius: 8px;
+}
+.mx_AddExistingToSpace
+ .mx_AddExistingToSpace_footer
+ > span
+ .mx_AddExistingToSpace_progressText {
+ margin-top: 8px;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+ color: #2e2f32;
+}
+.mx_AddExistingToSpace .mx_AddExistingToSpace_footer > span > * {
+ vertical-align: middle;
+}
+.mx_AddExistingToSpace
+ .mx_AddExistingToSpace_footer
+ .mx_AddExistingToSpace_error {
+ padding-left: 12px;
+}
+.mx_AddExistingToSpace
+ .mx_AddExistingToSpace_footer
+ .mx_AddExistingToSpace_error
+ > img {
+ -ms-flex-item-align: center;
+ align-self: center;
+}
+.mx_AddExistingToSpace
+ .mx_AddExistingToSpace_footer
+ .mx_AddExistingToSpace_error
+ .mx_AddExistingToSpace_errorHeading {
+ font-weight: 600;
+ font-size: 1.5rem;
+ line-height: 1.8rem;
+ color: #ff4b55;
+}
+.mx_AddExistingToSpace
+ .mx_AddExistingToSpace_footer
+ .mx_AddExistingToSpace_error
+ .mx_AddExistingToSpace_errorCaption {
+ margin-top: 4px;
+ font-size: 1.2rem;
+ line-height: 1.5rem;
+ color: #2e2f32;
+}
+.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AccessibleButton {
+ display: inline-block;
+ -ms-flex-item-align: center;
+ align-self: center;
+}
+.mx_AddExistingToSpace
+ .mx_AddExistingToSpace_footer
+ .mx_AccessibleButton_kind_primary {
+ padding: 8px 36px;
+}
+.mx_AddExistingToSpace
+ .mx_AddExistingToSpace_footer
+ .mx_AddExistingToSpace_retryButton {
+ margin-left: 12px;
+ padding-left: 24px;
+ position: relative;
+}
+.mx_AddExistingToSpace
+ .mx_AddExistingToSpace_footer
+ .mx_AddExistingToSpace_retryButton:before {
+ content: "";
+ position: absolute;
+ background-color: #2e2f32;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
+ mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
+ width: 18px;
+ height: 18px;
+ left: 0;
+}
+.mx_AddExistingToSpace
+ .mx_AddExistingToSpace_footer
+ .mx_AccessibleButton_kind_link {
+ padding: 0;
+}
+.mx_AddExistingToSpaceDialog {
+ width: 480px;
+ color: #2e2f32;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ min-height: 0;
+ height: 80vh;
+}
+.mx_AddExistingToSpaceDialog,
+.mx_AddExistingToSpaceDialog .mx_Dialog_title {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_BaseAvatar_image {
+ border-radius: 8px;
+ margin: 0;
+ vertical-align: unset;
+}
+.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_BaseAvatar {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ margin: auto 16px auto 5px;
+ vertical-align: middle;
+}
+.mx_AddExistingToSpaceDialog .mx_Dialog_title > div > h1 {
+ font-weight: 600;
+ font-size: 1.8rem;
+ line-height: 2.2rem;
+ margin: 0;
+}
+.mx_AddExistingToSpaceDialog
+ .mx_Dialog_title
+ > div
+ .mx_AddExistingToSpaceDialog_onlySpace {
+ color: #737d8c;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+}
+.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input {
+ border: none;
+}
+.mx_AddExistingToSpaceDialog
+ .mx_Dialog_title
+ .mx_Dropdown_input
+ > .mx_Dropdown_option {
+ padding-left: 0;
+ -webkit-box-flex: unset;
+ -ms-flex: unset;
+ flex: unset;
+ height: unset;
+ color: #737d8c;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+}
+.mx_AddExistingToSpaceDialog
+ .mx_Dialog_title
+ .mx_Dropdown_input
+ > .mx_Dropdown_option
+ .mx_BaseAvatar {
+ display: none;
+}
+.mx_AddExistingToSpaceDialog
+ .mx_Dialog_title
+ .mx_Dropdown_input
+ .mx_Dropdown_menu
+ .mx_AddExistingToSpaceDialog_dropdownOptionActive {
+ color: #0dbd8b;
+ padding-right: 32px;
+ position: relative;
+}
+.mx_AddExistingToSpaceDialog
+ .mx_Dialog_title
+ .mx_Dropdown_input
+ .mx_Dropdown_menu
+ .mx_AddExistingToSpaceDialog_dropdownOptionActive:before {
+ content: "";
+ width: 20px;
+ height: 20px;
+ top: 8px;
+ right: 0;
+ position: absolute;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background-color: #0dbd8b;
+ -webkit-mask-image: url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);
+ mask-image: url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);
+}
+.mx_AddExistingToSpaceDialog .mx_AddExistingToSpace {
+ display: contents;
+}
+.mx_AddressPickerDialog a:hover,
+.mx_AddressPickerDialog a:link,
+.mx_AddressPickerDialog a:visited {
+ color: #0dbd8b;
+ text-decoration: none;
+}
+.mx_AddressPickerDialog_input,
+.mx_AddressPickerDialog_input:focus {
+ height: 26px;
+ font-size: 1.4rem;
+ font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
+ Helvetica, Sans-Serif, Noto Color Emoji;
+ padding-left: 12px;
+ padding-right: 12px;
+ margin: 0 !important;
+ border: 0 !important;
+ outline: 0 !important;
+ width: 1000%;
+ resize: none;
+ overflow: hidden;
+ vertical-align: middle;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ word-wrap: nowrap;
+}
+.mx_AddressPickerDialog .mx_Dialog_content {
+ min-height: 50px;
+}
+.mx_AddressPickerDialog_inputContainer {
+ border-radius: 3px;
+ border: 1px solid #e7e7e7;
+ line-height: 3.6rem;
+ padding: 1px 4px;
+ max-height: 150px;
+ overflow-x: hidden;
+ overflow-y: auto;
+}
+.mx_AddressPickerDialog_error {
+ margin-top: 10px;
+ color: #ff4b55;
+}
+.mx_AddressPickerDialog_cancel {
+ position: absolute;
+ right: 11px;
+ top: 13px;
+ cursor: pointer;
+}
+.mx_AddressPickerDialog_cancel object {
+ pointer-events: none;
+}
+.mx_AddressPickerDialog_identityServer {
+ margin-top: 1em;
+}
+.mx_AnalyticsModal table {
+ margin: 10px 0;
+}
+.mx_BetaFeedbackDialog .mx_BetaFeedbackDialog_subheading {
+ color: #2e2f32;
+ font-size: 1.4rem;
+ line-height: 2rem;
+ margin-bottom: 24px;
+}
+.mx_BetaFeedbackDialog .mx_AccessibleButton_kind_link {
+ padding: 0;
+ font-size: inherit;
+ line-height: inherit;
+}
+.mx_BugReportDialog
+ .mx_BugReportDialog_download
+ .mx_AccessibleButton_kind_link {
+ padding-left: 0;
+}
+.mx_ChangelogDialog_content {
+ max-height: 300px;
+ overflow: auto;
+}
+.mx_ChangelogDialog_li {
+ padding: 0.2em;
+}
+.mx_ChatCreateOrReuseDialog .mx_ChatCreateOrReuseDialog_tiles {
+ margin-top: 24px;
+}
+.mx_ChatCreateOrReuseDialog .mx_Dialog_content {
+ margin-bottom: 24px;
+ min-height: 100px;
+}
+.mx_ChatCreateOrReuseDialog .mx_RoomTile_badge {
+ display: none;
+}
+.mx_ChatCreateOrReuseDialog_profile {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_ChatCreateOrReuseDialog_profile_name {
+ padding: 14px;
+}
+.mx_CommunityPrototypeInviteDialog.mx_Dialog_fixedWidth {
+ width: 360px;
+}
+.mx_CommunityPrototypeInviteDialog .mx_Dialog_content {
+ margin-bottom: 0;
+}
+.mx_CommunityPrototypeInviteDialog
+ .mx_Dialog_content
+ .mx_CommunityPrototypeInviteDialog_people {
+ position: relative;
+ margin-bottom: 4px;
+}
+.mx_CommunityPrototypeInviteDialog
+ .mx_Dialog_content
+ .mx_CommunityPrototypeInviteDialog_people
+ .mx_AccessibleButton {
+ display: inline-block;
+ background-color: #ddd;
+ border-radius: 4px;
+ padding: 3px 5px;
+ font-size: 1.2rem;
+ float: right;
+}
+.mx_CommunityPrototypeInviteDialog
+ .mx_Dialog_content
+ .mx_CommunityPrototypeInviteDialog_morePeople {
+ margin-top: 8px;
+}
+.mx_CommunityPrototypeInviteDialog
+ .mx_Dialog_content
+ .mx_CommunityPrototypeInviteDialog_person {
+ position: relative;
+ margin-top: 4px;
+}
+.mx_CommunityPrototypeInviteDialog
+ .mx_Dialog_content
+ .mx_CommunityPrototypeInviteDialog_person
+ > * {
+ vertical-align: middle;
+}
+.mx_CommunityPrototypeInviteDialog
+ .mx_Dialog_content
+ .mx_CommunityPrototypeInviteDialog_person
+ .mx_Checkbox {
+ position: absolute;
+ right: 0;
+ top: calc(50% - 8px);
+ width: 16px;
+}
+.mx_CommunityPrototypeInviteDialog
+ .mx_Dialog_content
+ .mx_CommunityPrototypeInviteDialog_person
+ .mx_CommunityPrototypeInviteDialog_personIdentifiers {
+ display: inline-block;
+}
+.mx_CommunityPrototypeInviteDialog
+ .mx_Dialog_content
+ .mx_CommunityPrototypeInviteDialog_person
+ .mx_CommunityPrototypeInviteDialog_personIdentifiers
+ > * {
+ display: block;
+}
+.mx_CommunityPrototypeInviteDialog
+ .mx_Dialog_content
+ .mx_CommunityPrototypeInviteDialog_person
+ .mx_CommunityPrototypeInviteDialog_personIdentifiers
+ .mx_CommunityPrototypeInviteDialog_personName {
+ font-weight: 600;
+ font-size: 1.4rem;
+ color: #2e2f32;
+ margin-left: 7px;
+}
+.mx_CommunityPrototypeInviteDialog
+ .mx_Dialog_content
+ .mx_CommunityPrototypeInviteDialog_person
+ .mx_CommunityPrototypeInviteDialog_personIdentifiers
+ .mx_CommunityPrototypeInviteDialog_personId {
+ font-size: 1.2rem;
+ color: #61708b;
+ margin-left: 7px;
+}
+.mx_CommunityPrototypeInviteDialog
+ .mx_Dialog_content
+ .mx_CommunityPrototypeInviteDialog_primaryButton {
+ display: block;
+ font-size: 1.3rem;
+ line-height: 20px;
+ height: 20px;
+ margin-top: 24px;
+}
+.mx_ConfirmUserActionDialog .mx_Dialog_content {
+ min-height: 48px;
+ margin-bottom: 24px;
+}
+.mx_ConfirmUserActionDialog_avatar {
+ float: left;
+ margin-right: 20px;
+ margin-top: -2px;
+}
+.mx_ConfirmUserActionDialog_name {
+ font-size: 1.8rem;
+}
+.mx_ConfirmUserActionDialog_userId {
+ font-size: 1.3rem;
+}
+.mx_ConfirmUserActionDialog_reasonField {
+ font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
+ Helvetica, Sans-Serif, Noto Color Emoji;
+ font-size: 1.4rem;
+ color: #2e2f32;
+ background-color: #fff;
+ border-radius: 3px;
+ border: 1px solid #e7e7e7;
+ line-height: 3.6rem;
+ padding: 1px 16px;
+ margin-bottom: 24px;
+ width: 90%;
+}
+.mx_CreateCommunityPrototypeDialog .mx_Dialog_content {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ margin-bottom: 12px;
+}
+.mx_CreateCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_CreateCommunityPrototypeDialog_colName {
+ -ms-flex-preferred-size: 66.66%;
+ flex-basis: 66.66%;
+ padding-right: 100px;
+}
+.mx_CreateCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_CreateCommunityPrototypeDialog_colName
+ .mx_Field
+ input {
+ font-size: 1.6rem;
+ line-height: 2rem;
+}
+.mx_CreateCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_CreateCommunityPrototypeDialog_colName
+ .mx_CreateCommunityPrototypeDialog_subtext {
+ display: block;
+ color: #61708b;
+ margin-bottom: 16px;
+}
+.mx_CreateCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_CreateCommunityPrototypeDialog_colName
+ .mx_CreateCommunityPrototypeDialog_subtext:last-child {
+ margin-top: 16px;
+}
+.mx_CreateCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_CreateCommunityPrototypeDialog_colName
+ .mx_CreateCommunityPrototypeDialog_subtext.mx_CreateCommunityPrototypeDialog_subtext_error {
+ color: #ff4b55;
+}
+.mx_CreateCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_CreateCommunityPrototypeDialog_colName
+ .mx_CreateCommunityPrototypeDialog_communityId {
+ position: relative;
+}
+.mx_CreateCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_CreateCommunityPrototypeDialog_colName
+ .mx_CreateCommunityPrototypeDialog_communityId
+ .mx_InfoTooltip {
+ float: right;
+}
+.mx_CreateCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_CreateCommunityPrototypeDialog_colName
+ .mx_AccessibleButton {
+ display: block;
+ height: 32px;
+ font-size: 1.6rem;
+ line-height: 32px;
+}
+.mx_CreateCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_CreateCommunityPrototypeDialog_colAvatar {
+ -ms-flex-preferred-size: 33.33%;
+ flex-basis: 33.33%;
+}
+.mx_CreateCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_CreateCommunityPrototypeDialog_colAvatar
+ .mx_CreateCommunityPrototypeDialog_avatarContainer {
+ margin-top: 12px;
+ margin-bottom: 20px;
+}
+.mx_CreateCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_CreateCommunityPrototypeDialog_colAvatar
+ .mx_CreateCommunityPrototypeDialog_avatarContainer
+ .mx_CreateCommunityPrototypeDialog_avatar,
+.mx_CreateCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_CreateCommunityPrototypeDialog_colAvatar
+ .mx_CreateCommunityPrototypeDialog_avatarContainer
+ .mx_CreateCommunityPrototypeDialog_placeholderAvatar {
+ width: 96px;
+ height: 96px;
+ border-radius: 96px;
+}
+.mx_CreateCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_CreateCommunityPrototypeDialog_colAvatar
+ .mx_CreateCommunityPrototypeDialog_avatarContainer
+ .mx_CreateCommunityPrototypeDialog_placeholderAvatar {
+ background-color: #368bd6;
+}
+.mx_CreateCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_CreateCommunityPrototypeDialog_colAvatar
+ .mx_CreateCommunityPrototypeDialog_avatarContainer
+ .mx_CreateCommunityPrototypeDialog_placeholderAvatar:before {
+ display: inline-block;
+ background-color: #fff;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 96px;
+ mask-size: 96px;
+ width: 96px;
+ height: 96px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ content: "";
+ vertical-align: middle;
+ -webkit-mask-image: url(../../img/element-icons/add-photo.c0b4c3b.svg);
+ mask-image: url(../../img/element-icons/add-photo.c0b4c3b.svg);
+}
+.mx_CreateCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_CreateCommunityPrototypeDialog_colAvatar
+ .mx_CreateCommunityPrototypeDialog_tip
+ > b,
+.mx_CreateCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_CreateCommunityPrototypeDialog_colAvatar
+ .mx_CreateCommunityPrototypeDialog_tip
+ > span {
+ display: block;
+ color: #61708b;
+}
+.mx_CreateGroupDialog_inputRow {
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
+.mx_CreateGroupDialog_label {
+ text-align: left;
+ padding-bottom: 12px;
+}
+.mx_CreateGroupDialog_input {
+ font-size: 1.5rem;
+ border-radius: 3px;
+ border: 1px solid #e7e7e7;
+ padding: 9px;
+ color: #2e2f32;
+ background-color: #fff;
+}
+.mx_CreateGroupDialog_input_hasPrefixAndSuffix {
+ border-radius: 0;
+}
+.mx_CreateGroupDialog_input_group {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_CreateGroupDialog_prefix,
+.mx_CreateGroupDialog_suffix {
+ padding: 0 5px;
+ line-height: 3.7rem;
+ background-color: #e3e8f0;
+ border: 1px solid #e7e7e7;
+ text-align: center;
+}
+.mx_CreateGroupDialog_prefix {
+ border-right: 0;
+ border-radius: 3px 0 0 3px;
+}
+.mx_CreateGroupDialog_suffix {
+ border-left: 0;
+ border-radius: 0 3px 3px 0;
+}
+.mx_CreateRoomDialog_details {
+ margin-top: 15px;
+}
+.mx_CreateRoomDialog_details .mx_CreateRoomDialog_details_summary {
+ outline: none;
+ list-style: none;
+ font-weight: 600;
+ cursor: pointer;
+ color: #0dbd8b;
+}
+.mx_CreateRoomDialog_details
+ .mx_CreateRoomDialog_details_summary::-webkit-details-marker {
+ display: none;
+}
+.mx_CreateRoomDialog_details > div {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+ margin: 5px 0;
+}
+.mx_CreateRoomDialog_details > div input[type="checkbox"] {
+ margin-right: 10px;
+}
+.mx_CreateRoomDialog_label {
+ text-align: left;
+ padding-bottom: 12px;
+}
+.mx_CreateRoomDialog_input_container {
+ padding-right: 20px;
+}
+.mx_CreateRoomDialog_input {
+ font-size: 1.5rem;
+ border-radius: 3px;
+ border: 1px solid #e7e7e7;
+ padding: 9px;
+ color: #2e2f32;
+ background-color: #fff;
+ width: 100%;
+}
+.mx_CreateRoomDialog_aliasContainer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin: 10px 0;
+}
+.mx_CreateRoomDialog_aliasContainer .mx_RoomAliasField {
+ margin: 0;
+}
+.mx_CreateRoomDialog.mx_Dialog_fixedWidth {
+ width: 450px;
+}
+.mx_CreateRoomDialog .mx_Dialog_content {
+ margin-bottom: 40px;
+}
+.mx_CreateRoomDialog .mx_Field_input label,
+.mx_CreateRoomDialog p {
+ color: #61708b;
+}
+.mx_CreateRoomDialog .mx_SettingsFlag {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_CreateRoomDialog .mx_SettingsFlag_label {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0;
+ min-width: 0;
+ font-weight: 600;
+}
+.mx_CreateRoomDialog .mx_ToggleSwitch {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ margin-left: 30px;
+}
+.mx_CreateRoomDialog .mx_CreateRoomDialog_topic {
+ margin-bottom: 36px;
+}
+.mx_CreateRoomDialog .mx_Dialog_content > .mx_SettingsFlag {
+ margin-top: 24px;
+}
+.mx_CreateRoomDialog p {
+ margin: 0 85px 0 0;
+ font-size: 1.2rem;
+}
+.mx_DeactivateAccountDialog .mx_Dialog_content {
+ margin-bottom: 30px;
+}
+.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section {
+ margin-top: 60px;
+}
+.mx_DeactivateAccountDialog
+ .mx_DeactivateAccountDialog_input_section
+ .mx_Field {
+ width: 300px;
+}
+.mx_DevTools_content {
+ margin: 10px 0;
+}
+.mx_DevTools_ServersInRoomList_button {
+ cursor: default !important;
+}
+.mx_DevTools_RoomStateExplorer_query {
+ margin-bottom: 10px;
+}
+.mx_DevTools_RoomStateExplorer_button,
+.mx_DevTools_ServersInRoomList_button {
+ margin-bottom: 10px;
+ width: 100%;
+}
+.mx_DevTools_label_left {
+ float: left;
+}
+.mx_DevTools_label_right {
+ float: right;
+}
+.mx_DevTools_label_bottom {
+ clear: both;
+ border-bottom: 1px solid #e5e5e5;
+}
+.mx_DevTools_inputRow {
+ display: table-row;
+}
+.mx_DevTools_inputLabelCell {
+ display: table-cell;
+ font-weight: 700;
+ padding-right: 24px;
+}
+.mx_DevTools_inputCell {
+ display: table-cell;
+ width: 240px;
+}
+.mx_DevTools_inputCell input {
+ display: inline-block;
+ border: 0;
+ border-bottom: 1px solid hsla(0, 0%, 59.2%, 0.5);
+ padding: 0;
+ width: 240px;
+ color: rgba(74, 74, 74, 0.9);
+ font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
+ Helvetica, Sans-Serif, Noto Color Emoji;
+ font-size: 1.6rem;
+}
+.mx_DevTools_textarea {
+ font-size: 1.2rem;
+ max-width: 684px;
+ min-height: 250px;
+ padding: 10px;
+}
+.mx_DevTools_eventTypeStateKeyGroup {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+}
+.mx_DevTools_content .mx_Field_input:first-of-type {
+ margin-right: 42px;
+}
+.mx_DevTools_tgl {
+ display: none;
+}
+.mx_DevTools_tgl,
+.mx_DevTools_tgl *,
+.mx_DevTools_tgl + .mx_DevTools_tgl-btn,
+.mx_DevTools_tgl:after,
+.mx_DevTools_tgl :after,
+.mx_DevTools_tgl:before,
+.mx_DevTools_tgl :before {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.mx_DevTools_tgl + .mx_DevTools_tgl-btn::-moz-selection,
+.mx_DevTools_tgl::-moz-selection,
+.mx_DevTools_tgl ::-moz-selection,
+.mx_DevTools_tgl:after::-moz-selection,
+.mx_DevTools_tgl :after::-moz-selection,
+.mx_DevTools_tgl:before::-moz-selection,
+.mx_DevTools_tgl :before::-moz-selection {
+ background: none;
+}
+.mx_DevTools_tgl + .mx_DevTools_tgl-btn::selection,
+.mx_DevTools_tgl::selection,
+.mx_DevTools_tgl ::selection,
+.mx_DevTools_tgl:after::selection,
+.mx_DevTools_tgl :after::selection,
+.mx_DevTools_tgl:before::selection,
+.mx_DevTools_tgl :before::selection {
+ background: none;
+}
+.mx_DevTools_tgl + .mx_DevTools_tgl-btn {
+ outline: 0;
+ display: block;
+ width: 7em;
+ height: 2em;
+ position: relative;
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.mx_DevTools_tgl + .mx_DevTools_tgl-btn:after,
+.mx_DevTools_tgl + .mx_DevTools_tgl-btn:before {
+ position: relative;
+ display: block;
+ content: "";
+ width: 50%;
+ height: 100%;
+}
+.mx_DevTools_tgl + .mx_DevTools_tgl-btn:after {
+ left: 0;
+}
+.mx_DevTools_tgl + .mx_DevTools_tgl-btn:before {
+ display: none;
+}
+.mx_DevTools_tgl:checked + .mx_DevTools_tgl-btn:after {
+ left: 50%;
+}
+.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn {
+ padding: 2px;
+ -webkit-transition: all 0.2s ease;
+ transition: all 0.2s ease;
+ font-family: sans-serif;
+ -webkit-perspective: 100px;
+ perspective: 100px;
+}
+.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:after,
+.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:before {
+ display: inline-block;
+ -webkit-transition: all 0.4s ease;
+ transition: all 0.4s ease;
+ width: 100%;
+ text-align: center;
+ position: absolute;
+ line-height: 2em;
+ font-weight: 700;
+ color: #fff;
+ top: 0;
+ left: 0;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
+ border-radius: 4px;
+}
+.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:after {
+ content: attr(data-tg-on);
+ background: #02c66f;
+ -webkit-transform: rotateY(-180deg);
+ transform: rotateY(-180deg);
+}
+.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:before {
+ background: #ff3a19;
+ content: attr(data-tg-off);
+}
+.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:active:before {
+ -webkit-transform: rotateY(-20deg);
+ transform: rotateY(-20deg);
+}
+.mx_DevTools_tgl-flip:checked + .mx_DevTools_tgl-btn:before {
+ -webkit-transform: rotateY(180deg);
+ transform: rotateY(180deg);
+}
+.mx_DevTools_tgl-flip:checked + .mx_DevTools_tgl-btn:after {
+ -webkit-transform: rotateY(0);
+ transform: rotateY(0);
+ left: 0;
+ background: #7fc6a6;
+}
+.mx_DevTools_tgl-flip:checked + .mx_DevTools_tgl-btn:active:after {
+ -webkit-transform: rotateY(20deg);
+ transform: rotateY(20deg);
+}
+.mx_DevTools_VerificationRequest {
+ border: 1px solid #ccc;
+ border-radius: 3px;
+ padding: 1px 5px;
+ margin-bottom: 6px;
+ font-family: Inconsolata, Twemoji, Apple Color Emoji, Segoe UI Emoji, Courier,
+ monospace, Noto Color Emoji;
+}
+.mx_DevTools_VerificationRequest dl {
+ display: grid;
+ grid-template-columns: -webkit-max-content auto;
+ grid-template-columns: max-content auto;
+ margin: 0;
+}
+.mx_DevTools_VerificationRequest dd {
+ grid-column-start: 2;
+}
+.mx_DevTools_VerificationRequest dd:empty {
+ color: #666;
+}
+.mx_DevTools_VerificationRequest dd:empty:after {
+ content: "(empty)";
+}
+.mx_DevTools_VerificationRequest dt {
+ font-weight: 700;
+ grid-column-start: 1;
+}
+.mx_DevTools_VerificationRequest dt:after {
+ content: ":";
+}
+.mx_DevTools_SettingsExplorer table {
+ width: 100%;
+ table-layout: fixed;
+ border-collapse: collapse;
+}
+.mx_DevTools_SettingsExplorer table th {
+ border-bottom: 1px solid #0dbd8b;
+ text-align: left;
+}
+.mx_DevTools_SettingsExplorer table td,
+.mx_DevTools_SettingsExplorer table th {
+ width: 360px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
+.mx_DevTools_SettingsExplorer table td + td,
+.mx_DevTools_SettingsExplorer table th + th {
+ width: auto;
+}
+.mx_DevTools_SettingsExplorer table tr:hover {
+ background-color: rgba(13, 189, 139, 0.5);
+}
+.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_mutable {
+ background-color: #0dbd8b;
+}
+.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_immutable {
+ background-color: #ff4b55;
+}
+.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_edit {
+ float: right;
+ margin-right: 16px;
+}
+.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_warning {
+ border: 2px solid #ff4b55;
+ border-radius: 4px;
+ padding: 4px;
+ margin-bottom: 8px;
+}
+.mx_EditCommunityPrototypeDialog.mx_Dialog_fixedWidth {
+ width: 360px;
+}
+.mx_EditCommunityPrototypeDialog .mx_Dialog_content {
+ margin-bottom: 12px;
+}
+.mx_EditCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_AccessibleButton.mx_AccessibleButton_kind_primary {
+ display: block;
+ height: 32px;
+ font-size: 1.6rem;
+ line-height: 32px;
+}
+.mx_EditCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_EditCommunityPrototypeDialog_rowAvatar {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_EditCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_EditCommunityPrototypeDialog_avatarContainer {
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+.mx_EditCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_EditCommunityPrototypeDialog_avatarContainer
+ .mx_EditCommunityPrototypeDialog_avatar,
+.mx_EditCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_EditCommunityPrototypeDialog_avatarContainer
+ .mx_EditCommunityPrototypeDialog_placeholderAvatar {
+ width: 96px;
+ height: 96px;
+ border-radius: 96px;
+}
+.mx_EditCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_EditCommunityPrototypeDialog_avatarContainer
+ .mx_EditCommunityPrototypeDialog_placeholderAvatar {
+ background-color: #368bd6;
+}
+.mx_EditCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_EditCommunityPrototypeDialog_avatarContainer
+ .mx_EditCommunityPrototypeDialog_placeholderAvatar:before {
+ display: inline-block;
+ background-color: #fff;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 96px;
+ mask-size: 96px;
+ width: 96px;
+ height: 96px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ content: "";
+ vertical-align: middle;
+ -webkit-mask-image: url(../../img/element-icons/add-photo.c0b4c3b.svg);
+ mask-image: url(../../img/element-icons/add-photo.c0b4c3b.svg);
+}
+.mx_EditCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_EditCommunityPrototypeDialog_tip {
+ margin-left: 20px;
+}
+.mx_EditCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_EditCommunityPrototypeDialog_tip
+ > b,
+.mx_EditCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_EditCommunityPrototypeDialog_tip
+ > span {
+ display: block;
+ color: #61708b;
+}
+.mx_FeedbackDialog hr {
+ margin: 24px 0;
+ border-color: #e7e7e7;
+}
+.mx_FeedbackDialog .mx_Dialog_content {
+ margin-bottom: 24px;
+}
+.mx_FeedbackDialog .mx_Dialog_content > h2 {
+ margin-bottom: 32px;
+}
+.mx_FeedbackDialog .mx_FeedbackDialog_section {
+ position: relative;
+ padding-left: 52px;
+}
+.mx_FeedbackDialog .mx_FeedbackDialog_section > p {
+ color: #8d99a5;
+}
+.mx_FeedbackDialog .mx_FeedbackDialog_section .mx_AccessibleButton_kind_link {
+ padding: 0;
+ font-size: inherit;
+}
+.mx_FeedbackDialog .mx_FeedbackDialog_section .mx_AccessibleButton_kind_link,
+.mx_FeedbackDialog .mx_FeedbackDialog_section a {
+ color: #0dbd8b;
+ text-decoration: underline;
+}
+.mx_FeedbackDialog .mx_FeedbackDialog_section:after,
+.mx_FeedbackDialog .mx_FeedbackDialog_section:before {
+ content: "";
+ position: absolute;
+ width: 40px;
+ height: 40px;
+ left: 0;
+ top: 0;
+}
+.mx_FeedbackDialog .mx_FeedbackDialog_section:before {
+ background-color: #c1c6cd;
+ border-radius: 20px;
+}
+.mx_FeedbackDialog .mx_FeedbackDialog_section:after {
+ background: #fff;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 24px;
+ mask-size: 24px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+}
+.mx_FeedbackDialog .mx_FeedbackDialog_reportBug:after {
+ -webkit-mask-image: url(../../img/feather-customised/bug.3dc7afa.svg);
+ mask-image: url(../../img/feather-customised/bug.3dc7afa.svg);
+}
+.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ font-size: 20px;
+ -webkit-transition: font-size 1s, border 0.5s;
+ transition: font-size 1s, border 0.5s;
+ border-radius: 50%;
+ border: 2px solid transparent;
+ margin-top: 12px;
+ margin-bottom: 24px;
+ vertical-align: top;
+ cursor: pointer;
+}
+.mx_FeedbackDialog
+ .mx_FeedbackDialog_rateApp
+ .mx_RadioButton
+ input[type="radio"]
+ + div {
+ display: none;
+}
+.mx_FeedbackDialog
+ .mx_FeedbackDialog_rateApp
+ .mx_RadioButton
+ .mx_RadioButton_content {
+ background: #c1c6cd;
+ width: 40px;
+ height: 40px;
+ text-align: center;
+ line-height: 40px;
+ border-radius: 20px;
+ margin: 5px;
+}
+.mx_FeedbackDialog
+ .mx_FeedbackDialog_rateApp
+ .mx_RadioButton
+ .mx_RadioButton_spacer {
+ display: none;
+}
+.mx_FeedbackDialog
+ .mx_FeedbackDialog_rateApp
+ .mx_RadioButton
+ + .mx_RadioButton {
+ margin-left: 16px;
+}
+.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton_checked {
+ font-size: 24px;
+ border-color: #0dbd8b;
+}
+.mx_FeedbackDialog .mx_FeedbackDialog_rateApp:after {
+ -webkit-mask-image: url(../../img/element-icons/feedback.a91241e.svg);
+ mask-image: url(../../img/element-icons/feedback.a91241e.svg);
+}
+.mx_GroupAddressPicker_checkboxContainer {
+ margin-top: 10px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_HostSignupDialog {
+ width: 90vw;
+ max-width: 580px;
+ height: 80vh;
+ max-height: 600px;
+ background-color: #fff;
+}
+.mx_HostSignupDialog .mx_HostSignupDialog_info {
+ text-align: center;
+}
+.mx_HostSignupDialog
+ .mx_HostSignupDialog_info
+ .mx_HostSignupDialog_content_top {
+ margin-bottom: 24px;
+}
+.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_paragraphs {
+ text-align: left;
+ padding-left: 25%;
+ padding-right: 25%;
+}
+.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_buttons {
+ margin-bottom: 24px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_HostSignupDialog
+ .mx_HostSignupDialog_info
+ .mx_HostSignupDialog_buttons
+ button {
+ padding: 12px;
+ margin: 0 16px;
+}
+.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_footer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: baseline;
+ -ms-flex-align: baseline;
+ align-items: baseline;
+}
+.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_footer img {
+ padding-right: 5px;
+}
+.mx_HostSignupDialog iframe {
+ width: 100%;
+ height: 100%;
+ border: none;
+ background-color: #fff;
+ min-height: 540px;
+}
+.mx_HostSignupDialog_text_dark {
+ color: #2e2f32;
+}
+.mx_HostSignupDialog_text_light {
+ color: #737d8c;
+}
+.mx_HostSignup_maximize_button {
+ -webkit-mask: url(../../img/feather-customised/maximise.dc32127.svg);
+ mask: url(../../img/feather-customised/maximise.dc32127.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: cover;
+ mask-size: cover;
+ right: 10px;
+}
+.mx_HostSignup_maximize_button,
+.mx_HostSignup_minimize_button {
+ width: 14px;
+ height: 14px;
+ background-color: #c1c1c1;
+ cursor: pointer;
+ position: absolute;
+ top: 10px;
+}
+.mx_HostSignup_minimize_button {
+ -webkit-mask: url(../../img/feather-customised/minimise.aec9142.svg);
+ mask: url(../../img/feather-customised/minimise.aec9142.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: cover;
+ mask-size: cover;
+ right: 25px;
+}
+.mx_HostSignup_persisted {
+ width: 90vw;
+ max-width: 580px;
+ height: 80vh;
+ max-height: 600px;
+ top: 0;
+ left: 0;
+ position: fixed;
+ display: none;
+}
+.mx_HostSignupDialog_minimized {
+ position: fixed;
+ bottom: 80px;
+ right: 26px;
+ width: 314px;
+ height: 217px;
+ overflow: hidden;
+}
+.mx_HostSignupDialog_minimized.mx_Dialog {
+ padding: 12px;
+}
+.mx_HostSignupDialog_minimized .mx_Dialog_title {
+ text-align: left !important;
+ padding-left: 20px;
+ font-size: 1.5rem;
+}
+.mx_HostSignupDialog_minimized iframe {
+ width: 100%;
+ height: 100%;
+ border: none;
+ background-color: #fff;
+}
+.mx_IncomingSasDialog_opponentProfile_image {
+ position: relative;
+}
+.mx_IncomingSasDialog_opponentProfile h2 {
+ display: inline-block;
+ margin-left: 10px;
+}
+.mx_InviteDialog_addressBar {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+}
+.mx_InviteDialog_addressBar .mx_InviteDialog_editor {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ width: 100%;
+ background-color: #f3f8fd;
+ border-radius: 4px;
+ min-height: 25px;
+ padding-left: 8px;
+ overflow-x: hidden;
+ overflow-y: auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+}
+.mx_InviteDialog_addressBar .mx_InviteDialog_editor .mx_InviteDialog_userTile {
+ margin: 6px 6px 0 0;
+ display: inline-block;
+ min-width: -webkit-max-content;
+ min-width: -moz-max-content;
+ min-width: max-content;
+}
+.mx_InviteDialog_addressBar .mx_InviteDialog_editor > input[type="text"] {
+ margin: 6px 0 !important;
+ height: 24px;
+ line-height: 2.4rem;
+ font-size: 1.4rem;
+ padding-left: 12px;
+ border: 0 !important;
+ outline: 0 !important;
+ resize: none;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ min-width: 40%;
+ -webkit-box-flex: 1 !important;
+ -ms-flex: 1 !important;
+ flex: 1 !important;
+ color: #2e2f32 !important;
+}
+.mx_InviteDialog_addressBar .mx_InviteDialog_goButton {
+ min-width: 48px;
+ margin-left: 10px;
+ height: 25px;
+ line-height: 2.5rem;
+}
+.mx_InviteDialog_addressBar .mx_InviteDialog_buttonAndSpinner .mx_Spinner {
+ width: 20px;
+ height: 20px;
+ margin-left: 5px;
+ display: inline-block;
+ vertical-align: middle;
+}
+.mx_InviteDialog_section {
+ padding-bottom: 10px;
+}
+.mx_InviteDialog_section h3 {
+ font-size: 1.2rem;
+ color: #61708b;
+ font-weight: 700;
+ text-transform: uppercase;
+}
+.mx_InviteDialog_section .mx_InviteDialog_subname {
+ margin-bottom: 10px;
+ margin-top: -10px;
+ font-size: 1.2rem;
+ color: #61708b;
+}
+.mx_InviteDialog_roomTile {
+ cursor: pointer;
+ padding: 5px 10px;
+}
+.mx_InviteDialog_roomTile:hover {
+ background-color: #f3f8fd;
+ border-radius: 4px;
+}
+.mx_InviteDialog_roomTile * {
+ vertical-align: middle;
+}
+.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_avatarStack {
+ display: inline-block;
+ position: relative;
+ width: 36px;
+ height: 36px;
+}
+.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_avatarStack > * {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_selected {
+ width: 36px;
+ height: 36px;
+ border-radius: 36px;
+ background-color: #368bd6;
+ display: inline-block;
+ position: relative;
+}
+.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_selected:before {
+ content: "";
+ width: 24px;
+ height: 24px;
+ grid-column: 1;
+ grid-row: 1;
+ -webkit-mask-image: url(../../img/feather-customised/check.5745b4e.svg);
+ mask-image: url(../../img/feather-customised/check.5745b4e.svg);
+ -webkit-mask-size: 100%;
+ mask-size: 100%;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ position: absolute;
+ top: 6px;
+ left: 6px;
+ background-color: #fff;
+}
+.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_nameStack {
+ display: inline-block;
+}
+.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_name {
+ font-weight: 600;
+ font-size: 1.4rem;
+ color: #2e2f32;
+ margin-left: 7px;
+}
+.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_userId {
+ font-size: 1.2rem;
+ color: #61708b;
+ margin-left: 7px;
+}
+.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_time {
+ text-align: right;
+ font-size: 1.2rem;
+ color: #61708b;
+ float: right;
+ line-height: 3.6rem;
+}
+.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_highlight {
+ font-weight: 900;
+}
+.mx_InviteDialog_userTile {
+ margin-right: 8px;
+}
+.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill {
+ background-color: #368bd6;
+ border-radius: 12px;
+ display: inline-block;
+ height: 24px;
+ line-height: 2.4rem;
+ padding-left: 8px;
+ padding-right: 8px;
+ color: #fff;
+}
+.mx_InviteDialog_userTile
+ .mx_InviteDialog_userTile_pill
+ .mx_InviteDialog_userTile_avatar {
+ border-radius: 20px;
+ position: relative;
+ left: -5px;
+ top: 2px;
+}
+.mx_InviteDialog_userTile
+ .mx_InviteDialog_userTile_pill
+ .mx_InviteDialog_userTile_name,
+.mx_InviteDialog_userTile
+ .mx_InviteDialog_userTile_pill
+ img.mx_InviteDialog_userTile_avatar {
+ vertical-align: top;
+}
+.mx_InviteDialog_userTile
+ .mx_InviteDialog_userTile_pill
+ .mx_InviteDialog_userTile_threepidAvatar {
+ background-color: #fff;
+}
+.mx_InviteDialog_userTile .mx_InviteDialog_userTile_remove {
+ display: inline-block;
+ margin-left: 4px;
+}
+.mx_InviteDialog {
+ height: 590px;
+ padding-left: 20px;
+}
+.mx_InviteDialog_userSections {
+ margin-top: 10px;
+ overflow-y: auto;
+ padding-right: 45px;
+ height: 455px;
+}
+.mx_InviteDialog_addressBar,
+.mx_InviteDialog_helpText {
+ margin-right: 45px;
+}
+.mx_InviteDialog_helpText .mx_AccessibleButton_kind_link {
+ padding: 0;
+}
+.mx_KeyboardShortcutsDialog {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ margin-bottom: -50px;
+ max-height: 1100px;
+}
+.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_category {
+ width: 33.3333%;
+ margin: 0 0 40px;
+}
+.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_category > div {
+ padding-left: 5px;
+}
+.mx_KeyboardShortcutsDialog h3 {
+ margin: 0 0 10px;
+}
+.mx_KeyboardShortcutsDialog h5 {
+ margin: 15px 0 5px;
+ font-weight: 400;
+}
+.mx_KeyboardShortcutsDialog kbd {
+ padding: 5px;
+ border-radius: 4px;
+ background-color: #f3f8fd;
+ margin-right: 5px;
+ min-width: 20px;
+ text-align: center;
+ display: inline-block;
+ border: 1px solid #e9edf1;
+ -webkit-box-shadow: 0 2px #e9edf1;
+ box-shadow: 0 2px #e9edf1;
+ margin-bottom: 4px;
+ text-transform: capitalize;
+}
+.mx_KeyboardShortcutsDialog kbd + kbd {
+ margin-left: 5px;
+}
+.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_inline div {
+ display: inline;
+}
+.mx_MessageEditHistoryDialog .mx_Dialog_header > .mx_Dialog_title {
+ text-align: center;
+}
+.mx_MessageEditHistoryDialog {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ max-height: 60vh;
+}
+.mx_MessageEditHistoryDialog_scrollPanel {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+}
+.mx_MessageEditHistoryDialog_error {
+ color: #ff4b55;
+ text-align: center;
+}
+.mx_MessageEditHistoryDialog_edits {
+ list-style-type: none;
+ font-size: 1.4rem;
+ padding: 0;
+ color: #2e2f32;
+}
+.mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_deletion,
+.mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_insertion {
+ padding: 0 2px;
+}
+.mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_deletion {
+ color: #ff4c55;
+ background-color: rgba(255, 76, 85, 0.1);
+ text-decoration: line-through;
+}
+.mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_insertion {
+ color: #1aa97b;
+ background-color: rgba(26, 169, 123, 0.1);
+ text-decoration: underline;
+}
+.mx_MessageEditHistoryDialog_edits .mx_EventTile_content,
+.mx_MessageEditHistoryDialog_edits .mx_EventTile_line {
+ margin-right: 0;
+}
+.mx_MessageEditHistoryDialog_edits .mx_MessageActionBar .mx_AccessibleButton {
+ font-size: 1rem;
+ padding: 0 8px;
+}
+.mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning {
+ margin-bottom: 24px;
+}
+.mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning > img {
+ vertical-align: middle;
+ margin-right: 8px;
+}
+.mx_ModalWidgetDialog .mx_ModalWidgetDialog_buttons {
+ float: right;
+ margin-top: 24px;
+}
+.mx_ModalWidgetDialog
+ .mx_ModalWidgetDialog_buttons
+ .mx_AccessibleButton
+ + .mx_AccessibleButton {
+ margin-left: 8px;
+}
+.mx_ModalWidgetDialog iframe {
+ width: 100%;
+ height: 450px;
+ border: 0;
+ border-radius: 8px;
+}
+.mx_NewSessionReviewDialog_header {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ margin-top: 0;
+}
+.mx_NewSessionReviewDialog_headerIcon {
+ width: 24px;
+ height: 24px;
+ margin-right: 4px;
+ position: relative;
+}
+.mx_NewSessionReviewDialog_deviceName {
+ font-weight: 600;
+}
+.mx_NewSessionReviewDialog_deviceID {
+ font-size: 1.2rem;
+ color: #8d99a5;
+}
+.mx_RegistrationEmailPromptDialog {
+ width: 417px;
+}
+.mx_RegistrationEmailPromptDialog .mx_Dialog_content {
+ margin-bottom: 24px;
+ color: #8d99a5;
+}
+.mx_RegistrationEmailPromptDialog .mx_Dialog_primary {
+ width: 100%;
+}
+.mx_RoomSettingsDialog_settingsIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
+ mask-image: url(../../img/element-icons/settings.6b381af.svg);
+}
+.mx_RoomSettingsDialog_securityIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/security.66f2fa6.svg);
+ mask-image: url(../../img/element-icons/security.66f2fa6.svg);
+}
+.mx_RoomSettingsDialog_rolesIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/room/settings/roles.bad9a9e.svg);
+ mask-image: url(../../img/element-icons/room/settings/roles.bad9a9e.svg);
+}
+.mx_RoomSettingsDialog_notificationsIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
+ mask-image: url(../../img/element-icons/notifications.d298b39.svg);
+}
+.mx_RoomSettingsDialog_bridgesIcon:before {
+ -webkit-mask-image: url(../../img/feather-customised/bridge.b2ca042.svg);
+ mask-image: url(../../img/feather-customised/bridge.b2ca042.svg);
+}
+.mx_RoomSettingsDialog_warningIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/room/settings/advanced.e079c15.svg);
+ mask-image: url(../../img/element-icons/room/settings/advanced.e079c15.svg);
+}
+.mx_RoomSettingsDialog .mx_Dialog_title {
+ -ms-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ margin: 0 auto;
+ padding-right: 80px;
+}
+.mx_RoomSettingsDialog
+ .mx_AvatarSetting_avatar
+ .mx_AvatarSetting_avatarPlaceholder:before {
+ -webkit-mask: url(../../img/feather-customised/image.a8671b8.svg);
+ mask: url(../../img/feather-customised/image.a8671b8.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 36px;
+ mask-size: 36px;
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+.mx_RoomSettingsDialog_BridgeList {
+ padding: 0;
+}
+.mx_RoomSettingsDialog_BridgeList .mx_AccessibleButton {
+ display: inline;
+ margin: 0;
+ padding: 0;
+}
+.mx_RoomSettingsDialog_BridgeList li {
+ list-style-type: none;
+ padding: 5px;
+ margin-bottom: 8px;
+ border: 1px solid transparent;
+ border-radius: 5px;
+}
+.mx_RoomSettingsDialog_BridgeList li .column-icon {
+ float: left;
+ padding-right: 10px;
+}
+.mx_RoomSettingsDialog_BridgeList li .column-icon * {
+ border-radius: 5px;
+ border: 1px solid #e3e8f0;
+}
+.mx_RoomSettingsDialog_BridgeList li .column-icon .noProtocolIcon {
+ width: 48px;
+ height: 48px;
+ background: #e3e8f0;
+ border-radius: 5px;
+}
+.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon {
+ float: left;
+ margin-right: 5px;
+}
+.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon img {
+ border-radius: 5px;
+ border-width: 1px;
+ border-color: transparent;
+}
+.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon span {
+ left: auto;
+}
+.mx_RoomSettingsDialog_BridgeList li .column-data {
+ display: inline-block;
+ width: 85%;
+}
+.mx_RoomSettingsDialog_BridgeList li .column-data > h3 {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 16pt;
+ color: #2e2f32;
+}
+.mx_RoomSettingsDialog_BridgeList li .column-data > * {
+ margin-top: 4px;
+ margin-bottom: 0;
+}
+.mx_RoomSettingsDialog_BridgeList li .column-data .workspace-channel-details {
+ color: #2e2f32;
+ font-weight: 600;
+}
+.mx_RoomSettingsDialog_BridgeList
+ li
+ .column-data
+ .workspace-channel-details
+ .channel {
+ margin-left: 5px;
+}
+.mx_RoomSettingsDialog_BridgeList li .column-data .metadata {
+ color: #61708b;
+ margin-bottom: 0;
+ overflow-y: visible;
+ text-overflow: ellipsis;
+ white-space: normal;
+ padding: 0;
+}
+.mx_RoomSettingsDialog_BridgeList li .column-data .metadata > li {
+ padding: 0;
+ border: 0;
+}
+.mx_RoomUpgradeDialog {
+ padding-right: 70px;
+}
+.mx_RoomUpgradeWarningDialog {
+ max-width: 38vw;
+ width: 38vw;
+}
+.mx_RoomUpgradeWarningDialog .mx_SettingsFlag {
+ font-weight: 700;
+}
+.mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_ToggleSwitch {
+ display: inline-block;
+ vertical-align: middle;
+ margin-left: 8px;
+ float: right;
+}
+.mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_SettingsFlag_label {
+ display: inline-block;
+ vertical-align: middle;
+}
+.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content {
+ padding-right: 85px;
+ color: #2e2f32;
+}
+.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content hr {
+ border-color: #2e2f32;
+ opacity: 0.1;
+ border-bottom: none;
+}
+.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content ul {
+ padding: 16px;
+}
+.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content ul li:nth-child(n + 2) {
+ margin-top: 16px;
+}
+.mx_ServerOfflineDialog
+ .mx_ServerOfflineDialog_content
+ .mx_ServerOfflineDialog_content_context
+ .mx_ServerOfflineDialog_content_context_timestamp {
+ display: inline-block;
+ width: 115px;
+ color: #61708b;
+ line-height: 24px;
+ vertical-align: top;
+}
+.mx_ServerOfflineDialog
+ .mx_ServerOfflineDialog_content
+ .mx_ServerOfflineDialog_content_context
+ .mx_ServerOfflineDialog_content_context_timeline {
+ display: inline-block;
+ width: calc(100% - 155px);
+}
+.mx_ServerOfflineDialog
+ .mx_ServerOfflineDialog_content
+ .mx_ServerOfflineDialog_content_context
+ .mx_ServerOfflineDialog_content_context_timeline
+ .mx_ServerOfflineDialog_content_context_timeline_header
+ span {
+ margin-left: 8px;
+ vertical-align: middle;
+}
+.mx_ServerOfflineDialog
+ .mx_ServerOfflineDialog_content
+ .mx_ServerOfflineDialog_content_context
+ .mx_ServerOfflineDialog_content_context_timeline
+ .mx_ServerOfflineDialog_content_context_txn {
+ position: relative;
+ margin-top: 8px;
+}
+.mx_ServerOfflineDialog
+ .mx_ServerOfflineDialog_content
+ .mx_ServerOfflineDialog_content_context
+ .mx_ServerOfflineDialog_content_context_timeline
+ .mx_ServerOfflineDialog_content_context_txn
+ .mx_ServerOfflineDialog_content_context_txn_desc {
+ width: calc(100% - 100px);
+}
+.mx_ServerOfflineDialog
+ .mx_ServerOfflineDialog_content
+ .mx_ServerOfflineDialog_content_context
+ .mx_ServerOfflineDialog_content_context_timeline
+ .mx_ServerOfflineDialog_content_context_txn
+ .mx_AccessibleButton {
+ float: right;
+ padding: 0;
+}
+.mx_ServerPickerDialog {
+ width: 468px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.mx_ServerPickerDialog .mx_Dialog_content {
+ margin-bottom: 0;
+}
+.mx_ServerPickerDialog .mx_Dialog_content > p {
+ color: #737d8c;
+ font-size: 1.4rem;
+ margin: 16px 0;
+}
+.mx_ServerPickerDialog .mx_Dialog_content > p:first-of-type {
+ margin-bottom: 40px;
+}
+.mx_ServerPickerDialog .mx_Dialog_content > p:last-of-type {
+ margin: 0 24px 24px;
+}
+.mx_ServerPickerDialog .mx_Dialog_content > h4 {
+ font-size: 1.5rem;
+ font-weight: 600;
+ color: #737d8c;
+ margin-left: 8px;
+}
+.mx_ServerPickerDialog .mx_Dialog_content > a {
+ color: #0dbd8b;
+ margin-left: 8px;
+}
+.mx_ServerPickerDialog
+ .mx_ServerPickerDialog_otherHomeserverRadio
+ input[type="radio"]
+ + div {
+ margin-top: auto;
+ margin-bottom: auto;
+}
+.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver {
+ border-top: none;
+ border-left: none;
+ border-right: none;
+ border-radius: unset;
+}
+.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver > input {
+ padding-left: 0;
+}
+.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver > label {
+ margin-left: 0;
+}
+.mx_ServerPickerDialog .mx_AccessibleButton_kind_primary {
+ width: calc(100% - 64px);
+ margin: 0 8px;
+ padding: 15px 18px;
+}
+.mx_SetEmailDialog_email_input {
+ border-radius: 3px;
+ border: 1px solid #e7e7e7;
+ padding: 9px;
+ color: rgba(74, 74, 74, 0.9);
+ background-color: #fff;
+ font-size: 1.5rem;
+ width: 100%;
+ max-width: 280px;
+ margin-bottom: 10px;
+}
+.mx_SetEmailDialog_email_input:focus {
+ outline: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ border: 1px solid #0dbd8b;
+}
+.mx_RoomSettingsDialog,
+.mx_UserSettingsDialog {
+ width: 90vw;
+ max-width: 1000px;
+ height: 80vh;
+}
+.mx_RoomSettingsDialog .mx_TabbedView,
+.mx_UserSettingsDialog .mx_TabbedView {
+ top: 65px;
+}
+.mx_RoomSettingsDialog .mx_TabbedView .mx_SettingsTab,
+.mx_UserSettingsDialog .mx_TabbedView .mx_SettingsTab {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ min-width: 580px;
+ padding-right: 100px;
+ padding-bottom: 100px;
+}
+.mx_RoomSettingsDialog .mx_Dialog_title,
+.mx_UserSettingsDialog .mx_Dialog_title {
+ margin-bottom: 24px;
+}
+.mx_ShareDialog hr {
+ margin-top: 25px;
+ margin-bottom: 25px;
+ border-color: #747474;
+}
+.mx_ShareDialog_content {
+ margin: 10px 0;
+}
+.mx_ShareDialog_matrixto {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ border-radius: 5px;
+ border: 1px solid #747474;
+ margin-bottom: 10px;
+ margin-top: 30px;
+ padding: 10px;
+}
+.mx_ShareDialog_matrixto a {
+ text-decoration: none;
+}
+.mx_ShareDialog_matrixto_link {
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.mx_ShareDialog_matrixto_copy {
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ cursor: pointer;
+ margin-left: 20px;
+ display: inherit;
+}
+.mx_ShareDialog_matrixto_copy > div {
+ -webkit-mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
+ mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
+ background-color: #2e2f32;
+ margin-left: 5px;
+ width: 20px;
+ height: 20px;
+ background-repeat: no-repeat;
+}
+.mx_ShareDialog_split {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+}
+.mx_ShareDialog_qrcode_container {
+ float: left;
+ height: 256px;
+ width: 256px;
+ margin-right: 64px;
+}
+.mx_ShareDialog_qrcode_container + .mx_ShareDialog_social_container {
+ width: 299px;
+}
+.mx_ShareDialog_social_container {
+ display: inline-block;
+}
+.mx_ShareDialog_social_icon {
+ display: inline-grid;
+ margin-right: 10px;
+ margin-bottom: 10px;
+}
+.mx_SlashCommandHelpDialog .mx_SlashCommandHelpDialog_headerRow h2 {
+ margin-bottom: 2px;
+}
+.mx_SlashCommandHelpDialog .mx_Dialog_content {
+ margin-top: 12px;
+ margin-bottom: 34px;
+}
+.mx_SpaceSettingsDialog {
+ width: 480px;
+ color: #2e2f32;
+}
+.mx_SpaceSettingsDialog .mx_SpaceSettings_errorText {
+ font-weight: 600;
+ font-size: 1.2rem;
+ line-height: 1.5rem;
+ color: #ff4b55;
+ margin-bottom: 28px;
+}
+.mx_SpaceSettingsDialog .mx_ToggleSwitch {
+ display: inline-block;
+ vertical-align: middle;
+ margin-left: 16px;
+}
+.mx_SpaceSettingsDialog .mx_AccessibleButton_kind_danger {
+ margin-top: 28px;
+}
+.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin-top: 64px;
+}
+.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons .mx_AccessibleButton {
+ display: inline-block;
+}
+.mx_SpaceSettingsDialog
+ .mx_SpaceSettingsDialog_buttons
+ .mx_AccessibleButton_kind_link {
+ margin-left: auto;
+}
+.mx_SpaceSettingsDialog .mx_AccessibleButton_hasKind {
+ padding: 8px 22px;
+}
+.mx_TabbedIntegrationManagerDialog .mx_Dialog {
+ width: 60%;
+ height: 70%;
+ overflow: hidden;
+ padding: 0;
+ max-width: none;
+ max-height: none;
+ position: relative;
+}
+.mx_TabbedIntegrationManagerDialog_container {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+.mx_TabbedIntegrationManagerDialog_container
+ .mx_TabbedIntegrationManagerDialog_currentManager {
+ width: 100%;
+ height: 100%;
+ border-top: 1px solid #0dbd8b;
+}
+.mx_TabbedIntegrationManagerDialog_container
+ .mx_TabbedIntegrationManagerDialog_currentManager
+ iframe {
+ background-color: #fff;
+ border: 0;
+ width: 100%;
+ height: 100%;
+}
+.mx_TabbedIntegrationManagerDialog_tab {
+ display: inline-block;
+ border: 1px solid #0dbd8b;
+ border-bottom: 0;
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px;
+ padding: 10px 8px;
+ margin-right: 5px;
+}
+.mx_TabbedIntegrationManagerDialog_currentTab {
+ background-color: #0dbd8b;
+ color: #fff;
+}
+.mx_TermsDialog_forIntegrationManager .mx_Dialog {
+ width: 60%;
+ height: 70%;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.mx_TermsDialog_termsTableHeader {
+ font-weight: 700;
+ text-align: left;
+}
+.mx_TermsDialog_termsTable {
+ font-size: 1.2rem;
+ width: 100%;
+}
+.mx_TermsDialog_service,
+.mx_TermsDialog_summary {
+ padding-right: 10px;
+}
+.mx_TermsDialog_link {
+ display: inline-block;
+ -webkit-mask-image: url(../../img/external-link.a8d3e9b.svg);
+ mask-image: url(../../img/external-link.a8d3e9b.svg);
+ background-color: #0dbd8b;
+ width: 10px;
+ height: 10px;
+}
+.mx_UntrustedDeviceDialog .mx_Dialog_title {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_UntrustedDeviceDialog .mx_Dialog_title .mx_E2EIcon {
+ margin-left: 0;
+}
+.mx_UploadConfirmDialog_fileIcon {
+ margin-right: 5px;
+}
+.mx_UploadConfirmDialog_previewOuter {
+ text-align: center;
+}
+.mx_UploadConfirmDialog_previewInner {
+ display: inline-block;
+ text-align: left;
+}
+.mx_UploadConfirmDialog_imagePreview {
+ max-height: 300px;
+ max-width: 100%;
+ border-radius: 4px;
+ border: 1px solid #c1c1c1;
+}
+.mx_UserSettingsDialog_settingsIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
+ mask-image: url(../../img/element-icons/settings.6b381af.svg);
+}
+.mx_UserSettingsDialog_appearanceIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/settings/appearance.cdebd40.svg);
+ mask-image: url(../../img/element-icons/settings/appearance.cdebd40.svg);
+}
+.mx_UserSettingsDialog_voiceIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
+ mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
+}
+.mx_UserSettingsDialog_bellIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
+ mask-image: url(../../img/element-icons/notifications.d298b39.svg);
+}
+.mx_UserSettingsDialog_preferencesIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/settings/preference.82bfabd.svg);
+ mask-image: url(../../img/element-icons/settings/preference.82bfabd.svg);
+}
+.mx_UserSettingsDialog_securityIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/security.66f2fa6.svg);
+ mask-image: url(../../img/element-icons/security.66f2fa6.svg);
+}
+.mx_UserSettingsDialog_helpIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/settings/help.68b703f.svg);
+ mask-image: url(../../img/element-icons/settings/help.68b703f.svg);
+}
+.mx_UserSettingsDialog_labsIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/settings/lab-flags.6fbe5e2.svg);
+ mask-image: url(../../img/element-icons/settings/lab-flags.6fbe5e2.svg);
+}
+.mx_UserSettingsDialog_mjolnirIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/room/composer/emoji.52d7369.svg);
+ mask-image: url(../../img/element-icons/room/composer/emoji.52d7369.svg);
+}
+.mx_UserSettingsDialog_flairIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/settings/flair.4227a88.svg);
+ mask-image: url(../../img/element-icons/settings/flair.4227a88.svg);
+}
+.mx_WidgetCapabilitiesPromptDialog .text-muted {
+ font-size: 1.2rem;
+}
+.mx_WidgetCapabilitiesPromptDialog .mx_Dialog_content {
+ margin-bottom: 16px;
+}
+.mx_WidgetCapabilitiesPromptDialog .mx_WidgetCapabilitiesPromptDialog_cap {
+ margin-top: 20px;
+ font-size: 1.5rem;
+ line-height: 1.5rem;
+}
+.mx_WidgetCapabilitiesPromptDialog
+ .mx_WidgetCapabilitiesPromptDialog_cap
+ .mx_WidgetCapabilitiesPromptDialog_byline {
+ color: #61708b;
+ margin-left: 26px;
+ font-size: 1.2rem;
+ line-height: 1.2rem;
+}
+.mx_WidgetCapabilitiesPromptDialog .mx_Dialog_buttons {
+ margin-top: 40px;
+}
+.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag {
+ line-height: calc(1.4rem + 14px);
+ color: #61708b;
+ font-size: 1.2rem;
+}
+.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch {
+ display: inline-block;
+ vertical-align: middle;
+ margin-right: 8px;
+ width: 3.2rem;
+ height: 1.5rem;
+}
+.mx_WidgetCapabilitiesPromptDialog
+ .mx_SettingsFlag
+ .mx_ToggleSwitch.mx_ToggleSwitch_on
+ > .mx_ToggleSwitch_ball {
+ left: calc(100% - 1.5rem);
+}
+.mx_WidgetCapabilitiesPromptDialog
+ .mx_SettingsFlag
+ .mx_ToggleSwitch
+ .mx_ToggleSwitch_ball {
+ width: 1.5rem;
+ height: 1.5rem;
+ border-radius: 1.5rem;
+}
+.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_SettingsFlag_label {
+ display: inline-block;
+ vertical-align: middle;
+}
+.mx_WidgetOpenIDPermissionsDialog .mx_SettingsFlag .mx_ToggleSwitch {
+ display: inline-block;
+ vertical-align: middle;
+ margin-right: 8px;
+}
+.mx_WidgetOpenIDPermissionsDialog .mx_SettingsFlag .mx_SettingsFlag_label {
+ display: inline-block;
+ vertical-align: middle;
+}
+.mx_AccessSecretStorageDialog_reset {
+ position: relative;
+ padding-left: 24px;
+ margin-top: 7px;
+}
+.mx_AccessSecretStorageDialog_reset:before {
+ content: "";
+ display: inline-block;
+ position: absolute;
+ height: 16px;
+ width: 16px;
+ left: 0;
+ top: 2px;
+ background-image: url(../../img/element-icons/warning-badge.de1033e.svg);
+}
+.mx_AccessSecretStorageDialog_reset .mx_AccessSecretStorageDialog_reset_link {
+ color: #ff4b55;
+}
+.mx_AccessSecretStorageDialog_titleWithIcon:before {
+ content: "";
+ display: inline-block;
+ width: 24px;
+ height: 24px;
+ margin-right: 8px;
+ position: relative;
+ top: 5px;
+ background-color: #2e2f32;
+}
+.mx_AccessSecretStorageDialog_resetBadge:before {
+ background-image: url(../../img/element-icons/warning-badge.de1033e.svg);
+ background-size: 24px;
+ background-color: transparent;
+}
+.mx_AccessSecretStorageDialog_secureBackupTitle:before {
+ -webkit-mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
+ mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
+}
+.mx_AccessSecretStorageDialog_securePhraseTitle:before {
+ -webkit-mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
+ mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
+}
+.mx_AccessSecretStorageDialog_keyStatus {
+ height: 30px;
+}
+.mx_AccessSecretStorageDialog_passPhraseInput {
+ width: 300px;
+ border: 1px solid #0dbd8b;
+ border-radius: 5px;
+ padding: 10px;
+}
+.mx_AccessSecretStorageDialog_recoveryKeyEntry {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+.mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText {
+ margin: 16px;
+}
+.mx_AccessSecretStorageDialog_recoveryKeyFeedback:before {
+ content: "";
+ display: inline-block;
+ vertical-align: bottom;
+ width: 20px;
+ height: 20px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 20px;
+ mask-size: 20px;
+ margin-right: 5px;
+}
+.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid {
+ color: #0dbd8b;
+}
+.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid:before {
+ -webkit-mask-image: url(../../img/feather-customised/check.5745b4e.svg);
+ mask-image: url(../../img/feather-customised/check.5745b4e.svg);
+ background-color: #0dbd8b;
+}
+.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid {
+ color: #ff4b55;
+}
+.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid:before {
+ -webkit-mask-image: url(../../img/feather-customised/x.9662221.svg);
+ mask-image: url(../../img/feather-customised/x.9662221.svg);
+ background-color: #ff4b55;
+}
+.mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput {
+ display: none;
+}
+.mx_CreateCrossSigningDialog {
+ width: 560px;
+}
+.mx_CreateCrossSigningDialog details .mx_AccessibleButton {
+ margin: 1em 0;
+}
+.mx_CreateCrossSigningDialog .mx_Dialog_title,
+.mx_CreateKeyBackupDialog .mx_Dialog_title {
+ margin-bottom: 1em;
+}
+.mx_CreateKeyBackupDialog_primaryContainer {
+ padding: 20px;
+}
+.mx_CreateKeyBackupDialog_primaryContainer:after {
+ content: "";
+ clear: both;
+ display: block;
+}
+.mx_CreateKeyBackupDialog_passPhraseContainer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+}
+.mx_CreateKeyBackupDialog_passPhraseInput {
+ -webkit-box-flex: 0;
+ -ms-flex: none;
+ flex: none;
+ width: 250px;
+ border: 1px solid #0dbd8b;
+ border-radius: 5px;
+ padding: 10px;
+ margin-bottom: 1em;
+}
+.mx_CreateKeyBackupDialog_passPhraseMatch {
+ margin-left: 20px;
+}
+.mx_CreateKeyBackupDialog_recoveryKeyHeader {
+ margin-bottom: 1em;
+}
+.mx_CreateKeyBackupDialog_recoveryKeyContainer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_CreateKeyBackupDialog_recoveryKey {
+ width: 262px;
+ padding: 20px;
+ color: #888;
+ background-color: #f7f7f7;
+ margin-right: 12px;
+}
+.mx_CreateKeyBackupDialog_recoveryKeyButtons {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_CreateKeyBackupDialog_recoveryKeyButtons button {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ white-space: nowrap;
+}
+.mx_CreateKeyBackupDialog details .mx_AccessibleButton {
+ margin: 1em 0;
+}
+.mx_CreateSecretStorageDialog {
+ width: 560px;
+}
+.mx_CreateSecretStorageDialog .mx_SettingsFlag {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_CreateSecretStorageDialog .mx_SettingsFlag_label {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0;
+ min-width: 0;
+ font-weight: 600;
+}
+.mx_CreateSecretStorageDialog .mx_ToggleSwitch {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ margin-left: 30px;
+}
+.mx_CreateSecretStorageDialog details .mx_AccessibleButton {
+ margin: 1em 0;
+}
+.mx_CreateSecretStorageDialog .mx_Dialog_title {
+ margin-bottom: 1em;
+}
+.mx_CreateSecretStorageDialog_titleWithIcon:before {
+ content: "";
+ display: inline-block;
+ width: 24px;
+ height: 24px;
+ margin-right: 8px;
+ position: relative;
+ top: 5px;
+ background-color: #2e2f32;
+}
+.mx_CreateSecretStorageDialog_secureBackupTitle:before {
+ -webkit-mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
+ mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
+}
+.mx_CreateSecretStorageDialog_securePhraseTitle:before {
+ -webkit-mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
+ mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
+}
+.mx_CreateSecretStorageDialog_centeredBody,
+.mx_CreateSecretStorageDialog_centeredTitle {
+ text-align: center;
+}
+.mx_CreateSecretStorageDialog_primaryContainer {
+ padding-top: 20px;
+}
+.mx_CreateSecretStorageDialog_primaryContainer:after {
+ content: "";
+ clear: both;
+ display: block;
+}
+.mx_CreateSecretStorageDialog_primaryContainer .mx_RadioButton {
+ margin-bottom: 16px;
+ padding: 11px;
+}
+.mx_CreateSecretStorageDialog_optionTitle {
+ color: #45474a;
+ font-weight: 600;
+ font-size: 1.8rem;
+ padding-bottom: 10px;
+}
+.mx_CreateSecretStorageDialog_optionIcon {
+ display: inline-block;
+ width: 24px;
+ height: 24px;
+ margin-right: 8px;
+ position: relative;
+ top: 5px;
+ background-color: #2e2f32;
+}
+.mx_CreateSecretStorageDialog_optionIcon_securePhrase {
+ -webkit-mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
+ mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
+}
+.mx_CreateSecretStorageDialog_optionIcon_secureBackup {
+ -webkit-mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
+ mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
+}
+.mx_CreateSecretStorageDialog_passPhraseContainer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+}
+.mx_Field.mx_CreateSecretStorageDialog_passPhraseField {
+ margin-top: 0;
+}
+.mx_CreateSecretStorageDialog_passPhraseMatch {
+ width: 200px;
+ margin-left: 20px;
+}
+.mx_CreateSecretStorageDialog_recoveryKeyContainer {
+ width: 380px;
+ margin-left: auto;
+ margin-right: auto;
+}
+.mx_CreateSecretStorageDialog_recoveryKey {
+ font-weight: 700;
+ text-align: center;
+ padding: 20px;
+ color: #888;
+ background-color: #f7f7f7;
+ border-radius: 6px;
+ word-spacing: 1em;
+ margin-bottom: 20px;
+}
+.mx_CreateSecretStorageDialog_recoveryKeyButtons {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton {
+ width: 160px;
+ padding-left: 0;
+ padding-right: 0;
+ white-space: nowrap;
+}
+.mx_CreateSecretStorageDialog_continueSpinner {
+ margin-top: 33px;
+ text-align: right;
+}
+.mx_CreateSecretStorageDialog_continueSpinner img {
+ width: 20px;
+ height: 20px;
+}
+.mx_KeyBackupFailedDialog .mx_Dialog_title {
+ margin-bottom: 32px;
+}
+.mx_KeyBackupFailedDialog_title {
+ position: relative;
+ padding-left: 45px;
+ padding-bottom: 10px;
+}
+.mx_KeyBackupFailedDialog_title:before {
+ -webkit-mask: url(../../img/e2e/lock-warning-filled.993fb6c.svg);
+ mask: url(../../img/e2e/lock-warning-filled.993fb6c.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background-color: #2e2f32;
+ content: "";
+ position: absolute;
+ top: -6px;
+ right: 0;
+ bottom: 0;
+ left: 0;
+}
+.mx_KeyBackupFailedDialog .mx_Dialog_buttons {
+ margin-top: 36px;
+}
+.mx_RestoreKeyBackupDialog_keyStatus {
+ height: 30px;
+}
+.mx_RestoreKeyBackupDialog_primaryContainer {
+ padding: 20px;
+}
+.mx_RestoreKeyBackupDialog_passPhraseInput,
+.mx_RestoreKeyBackupDialog_recoveryKeyInput {
+ width: 300px;
+ border: 1px solid #0dbd8b;
+ border-radius: 5px;
+ padding: 10px;
+}
+.mx_RestoreKeyBackupDialog_content > div {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ min-height: 110px;
+}
+.mx_NetworkDropdown {
+ height: 32px;
+ position: relative;
+ padding-right: 32px;
+ margin-left: auto;
+ margin-right: 9px;
+ margin-top: 12px;
+}
+.mx_NetworkDropdown,
+.mx_NetworkDropdown .mx_AccessibleButton {
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+}
+.mx_NetworkDropdown_menu {
+ min-width: 204px;
+ margin: 0;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ border-radius: 4px;
+ border: 1px solid #c1c1c1;
+ background-color: #fff;
+ max-height: calc(100vh - 20px);
+ overflow-y: auto;
+}
+.mx_NetworkDropdown_menu_network {
+ font-weight: 700;
+}
+.mx_NetworkDropdown_server {
+ padding: 12px 0;
+ border-bottom: 1px solid #9fa9ba;
+}
+.mx_NetworkDropdown_server .mx_NetworkDropdown_server_title {
+ padding: 0 10px;
+ font-size: 1.5rem;
+ font-weight: 600;
+ line-height: 2rem;
+ margin-bottom: 4px;
+ position: relative;
+}
+.mx_NetworkDropdown_server
+ .mx_NetworkDropdown_server_title
+ .mx_AccessibleButton {
+ position: absolute;
+ display: inline;
+ right: 10px;
+ height: 16px;
+ width: 16px;
+ margin-top: 2px;
+}
+.mx_NetworkDropdown_server
+ .mx_NetworkDropdown_server_title
+ .mx_AccessibleButton:after {
+ content: "";
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-image: url(../../img/feather-customised/x.9662221.svg);
+ mask-image: url(../../img/feather-customised/x.9662221.svg);
+ background-color: #ff4b55;
+}
+.mx_NetworkDropdown_server .mx_NetworkDropdown_server_subtitle {
+ padding: 0 10px;
+ font-size: 1rem;
+ line-height: 1.4rem;
+ margin-top: -4px;
+ margin-bottom: 4px;
+ color: #61708b;
+}
+.mx_NetworkDropdown_server .mx_NetworkDropdown_server_network {
+ font-size: 1.2rem;
+ line-height: 1.6rem;
+ padding: 4px 10px;
+ cursor: pointer;
+ position: relative;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+.mx_NetworkDropdown_server
+ .mx_NetworkDropdown_server_network[aria-checked="true"]:after {
+ content: "";
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ right: 10px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-image: url(../../img/feather-customised/check.5745b4e.svg);
+ mask-image: url(../../img/feather-customised/check.5745b4e.svg);
+ background-color: #0dbd8b;
+}
+.mx_NetworkDropdown_server_add:hover,
+.mx_NetworkDropdown_server_network:hover {
+ background-color: #f3f8fd;
+}
+.mx_NetworkDropdown_server_add {
+ padding: 16px 10px 16px 32px;
+ position: relative;
+ border-radius: 0 0 4px 4px;
+}
+.mx_NetworkDropdown_server_add:before {
+ content: "";
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ left: 7px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-image: url(../../img/feather-customised/plus.38ae979.svg);
+ mask-image: url(../../img/feather-customised/plus.38ae979.svg);
+ background-color: #61708b;
+}
+.mx_NetworkDropdown_handle {
+ position: relative;
+}
+.mx_NetworkDropdown_handle:after {
+ content: "";
+ position: absolute;
+ width: 26px;
+ height: 26px;
+ right: -27.5px;
+ top: -3px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-image: url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);
+ mask-image: url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);
+ background-color: #2e2f32;
+}
+.mx_NetworkDropdown_handle .mx_NetworkDropdown_handle_server {
+ color: #61708b;
+ font-size: 1.2rem;
+}
+.mx_NetworkDropdown_dialog .mx_Dialog {
+ width: 45vw;
+}
+.mx_AccessibleButton {
+ cursor: pointer;
+}
+.mx_AccessibleButton_disabled {
+ cursor: default;
+}
+.mx_AccessibleButton_hasKind {
+ padding: 7px 18px;
+ text-align: center;
+ border-radius: 8px;
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ font-size: 1.4rem;
+}
+.mx_AccessibleButton_kind_primary {
+ color: #fff;
+ background-color: #0dbd8b;
+ font-weight: 600;
+}
+.mx_AccessibleButton_kind_primary_outline {
+ color: #0dbd8b;
+ background-color: #fff;
+ border: 1px solid #0dbd8b;
+ font-weight: 600;
+}
+.mx_AccessibleButton_kind_secondary {
+ color: #0dbd8b;
+ font-weight: 600;
+}
+.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled,
+.mx_AccessibleButton_kind_primary_outline.mx_AccessibleButton_disabled {
+ opacity: 0.4;
+}
+.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm {
+ padding: 5px 12px;
+ color: #fff;
+ background-color: #0dbd8b;
+}
+.mx_AccessibleButton_kind_primary_sm.mx_AccessibleButton_disabled {
+ opacity: 0.4;
+}
+.mx_AccessibleButton_kind_danger {
+ color: #fff;
+ background-color: #ff4b55;
+}
+.mx_AccessibleButton_kind_danger_outline {
+ color: #ff4b55;
+ background-color: #fff;
+ border: 1px solid #ff4b55;
+}
+.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled {
+ color: #fff;
+ background-color: #f5b6bb;
+}
+.mx_AccessibleButton_kind_danger_outline.mx_AccessibleButton_disabled {
+ color: #f5b6bb;
+ border-color: #f5b6bb;
+}
+.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm {
+ padding: 5px 12px;
+ color: #fff;
+ background-color: #ff4b55;
+}
+.mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled {
+ color: #fff;
+ background-color: #f5b6bb;
+}
+.mx_AccessibleButton_kind_link {
+ color: #0dbd8b;
+ background-color: transparent;
+}
+.mx_AccessibleButton_kind_link.mx_AccessibleButton_disabled {
+ opacity: 0.4;
+}
+.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link_sm {
+ padding: 5px 12px;
+ color: #0dbd8b;
+ background-color: transparent;
+}
+.mx_AccessibleButton_kind_link_sm.mx_AccessibleButton_disabled {
+ opacity: 0.4;
+}
+.mx_AddressSelector {
+ position: absolute;
+ background-color: #fff;
+ width: 485px;
+ max-height: 116px;
+ overflow-y: auto;
+ border-radius: 3px;
+ border: 1px solid #0dbd8b;
+ cursor: pointer;
+ z-index: 1;
+}
+.mx_AddressSelector.mx_AddressSelector_empty {
+ display: none;
+}
+.mx_AddressSelector_addressListElement .mx_AddressTile {
+ background-color: #fff;
+ border: 1px solid #fff;
+}
+.mx_AddressSelector_addressListElement.mx_AddressSelector_selected {
+ background-color: #f2f5f8;
+}
+.mx_AddressSelector_addressListElement.mx_AddressSelector_selected
+ .mx_AddressTile {
+ background-color: #f2f5f8;
+ border: 1px solid #f2f5f8;
+}
+.mx_AddressTile {
+ display: inline-block;
+ border-radius: 3px;
+ background-color: rgba(74, 73, 74, 0.1);
+ border: 1px solid #e7e7e7;
+ line-height: 2.6rem;
+ color: #2e2f32;
+ font-size: 1.4rem;
+ font-weight: 400;
+ margin-right: 4px;
+}
+.mx_AddressTile.mx_AddressTile_error {
+ background-color: rgba(255, 0, 100, 0.1);
+ color: #ff4b55;
+ border-color: #ff4b55;
+}
+.mx_AddressTile_network {
+ padding-right: 4px;
+}
+.mx_AddressTile_avatar,
+.mx_AddressTile_network {
+ display: inline-block;
+ position: relative;
+ padding-left: 2px;
+ vertical-align: middle;
+}
+.mx_AddressTile_avatar {
+ padding-right: 7px;
+}
+.mx_AddressTile_mx {
+ display: inline-block;
+ margin: 0;
+ border: 0;
+ padding: 0;
+}
+.mx_AddressTile_name {
+ display: inline-block;
+ padding-right: 4px;
+ font-weight: 600;
+ overflow: hidden;
+ height: 26px;
+ vertical-align: middle;
+}
+.mx_AddressTile_name.mx_AddressTile_justified {
+ width: 180px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ vertical-align: middle;
+}
+.mx_AddressTile_id {
+ display: inline-block;
+ padding-right: 11px;
+}
+.mx_AddressTile_id.mx_AddressTile_justified {
+ width: 200px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ vertical-align: middle;
+}
+.mx_AddressTile_unknownMx {
+ display: inline-block;
+ font-weight: 600;
+ padding-right: 11px;
+}
+.mx_AddressTile_unknownMxl.mx_AddressTile_justified {
+ width: 380px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ vertical-align: middle;
+}
+.mx_AddressTile_email {
+ display: inline-block;
+ font-weight: 600;
+ padding-right: 11px;
+}
+.mx_AddressTile_email.mx_AddressTile_justified {
+ width: 200px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ vertical-align: middle;
+}
+.mx_AddressTile_unknown {
+ display: inline-block;
+ padding-right: 11px;
+}
+.mx_AddressTile_unknown.mx_AddressTile_justified {
+ width: 380px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ vertical-align: middle;
+}
+.mx_AddressTile_dismiss {
+ display: inline-block;
+ padding-right: 11px;
+ padding-left: 1px;
+ cursor: pointer;
+}
+.mx_AddressTile_dismiss object {
+ pointer-events: none;
+}
+.mx_DesktopBuildsNotice {
+ text-align: center;
+ padding: 0 16px;
+}
+.mx_DesktopBuildsNotice > * {
+ vertical-align: middle;
+}
+.mx_DesktopBuildsNotice > img {
+ margin-right: 8px;
+}
+.mx_desktopCapturerSourcePicker {
+ overflow: hidden;
+}
+.mx_desktopCapturerSourcePicker_tabLabels {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ padding: 0 0 8px;
+}
+.mx_desktopCapturerSourcePicker_tabLabel,
+.mx_desktopCapturerSourcePicker_tabLabel_selected {
+ width: 100%;
+ text-align: center;
+ border-radius: 8px;
+ padding: 8px 0;
+ font-size: 1.3rem;
+}
+.mx_desktopCapturerSourcePicker_tabLabel_selected {
+ background-color: #0dbd8b;
+ color: #fff;
+}
+.mx_desktopCapturerSourcePicker_panel {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+ height: 500px;
+ overflow: overlay;
+}
+.mx_desktopCapturerSourcePicker_stream_button {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ margin: 8px;
+ border-radius: 4px;
+}
+.mx_desktopCapturerSourcePicker_stream_button:focus,
+.mx_desktopCapturerSourcePicker_stream_button:hover {
+ background: #fff;
+}
+.mx_desktopCapturerSourcePicker_stream_thumbnail {
+ margin: 4px;
+ width: 312px;
+}
+.mx_desktopCapturerSourcePicker_stream_name {
+ margin: 0 4px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ width: 312px;
+}
+.mx_DirectorySearchBox {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ padding-left: 9px;
+ padding-right: 9px;
+}
+.mx_DirectorySearchBox_joinButton {
+ display: table-cell;
+ padding: 3px 10px;
+ background-color: #f2f5f8;
+ border-radius: 3px;
+ background-image: url(../../img/icon-return.cb24475.svg);
+ background-position: 8px 70%;
+ background-repeat: no-repeat;
+ text-indent: 18px;
+ font-weight: 600;
+ font-size: 1.2rem;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ cursor: pointer;
+}
+.mx_DirectorySearchBox_clear {
+ background-color: #ff4b55;
+ -webkit-mask: url(../../img/cancel.4b9715b.svg);
+ mask: url(../../img/cancel.4b9715b.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 10px;
+ mask-size: 10px;
+ width: 15px;
+ height: 15px;
+ cursor: pointer;
+}
+.mx_Dropdown {
+ position: relative;
+ color: #2e2f32;
+}
+.mx_Dropdown_disabled {
+ opacity: 0.3;
+}
+.mx_Dropdown_input {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ position: relative;
+ border-radius: 3px;
+ border: 1px solid #c7c7c7;
+ font-size: 1.2rem;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.mx_Dropdown_input.mx_AccessibleButton_disabled {
+ cursor: not-allowed;
+}
+.mx_Dropdown_input:focus {
+ border-color: #238cf5;
+}
+.mx_Dropdown_input.mx_AccessibleButton:focus {
+ -webkit-filter: none;
+ filter: none;
+}
+.mx_Dropdown_arrow {
+ width: 10px;
+ height: 6px;
+ padding-right: 9px;
+ -webkit-mask: url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);
+ mask: url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background: #2e2f32;
+}
+.mx_Dropdown_option {
+ height: 35px;
+ line-height: 3.5rem;
+ padding-left: 8px;
+ padding-right: 8px;
+}
+.mx_Dropdown_input > .mx_Dropdown_option {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_Dropdown_input > .mx_Dropdown_option,
+.mx_Dropdown_option div {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+.mx_Dropdown_option .mx_Dropdown_option_emoji,
+.mx_Dropdown_option img {
+ margin: 5px;
+ width: 16px;
+ vertical-align: middle;
+}
+.mx_Dropdown_option_emoji {
+ font-size: 1.6rem;
+ line-height: 1.6rem;
+}
+input.mx_Dropdown_option,
+input.mx_Dropdown_option:focus {
+ font-weight: 400;
+ border: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+ width: 60%;
+}
+.mx_Dropdown_menu {
+ position: absolute;
+ left: -1px;
+ right: -1px;
+ top: 100%;
+ z-index: 2;
+ margin: 0;
+ padding: 0;
+ border-radius: 3px;
+ border: 1px solid #238cf5;
+ background-color: #fff;
+ max-height: 200px;
+ overflow-y: auto;
+}
+.mx_Dropdown_menu .mx_Dropdown_option {
+ height: auto;
+ min-height: 35px;
+}
+.mx_Dropdown_menu .mx_Dropdown_option_highlight {
+ background-color: #ddd;
+}
+.mx_Dropdown_searchPrompt {
+ font-weight: 400;
+ margin-left: 5px;
+ margin-bottom: 5px;
+}
+.mx_EditableItemList {
+ margin-top: 12px;
+ margin-bottom: 10px;
+}
+.mx_EditableItem {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin-bottom: 5px;
+}
+.mx_EditableItem_delete {
+ -webkit-box-ordinal-group: 4;
+ -ms-flex-order: 3;
+ order: 3;
+ margin-right: 5px;
+ cursor: pointer;
+ vertical-align: middle;
+ width: 14px;
+ height: 14px;
+ -webkit-mask-image: url(../../img/feather-customised/cancel.23c2689.svg);
+ mask-image: url(../../img/feather-customised/cancel.23c2689.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background-color: #ff4b55;
+ -webkit-mask-size: 100%;
+ mask-size: 100%;
+}
+.mx_EditableItem_email {
+ vertical-align: middle;
+}
+.mx_EditableItem_promptText {
+ margin-right: 10px;
+ -webkit-box-ordinal-group: 3;
+ -ms-flex-order: 2;
+ order: 2;
+}
+.mx_EditableItem_confirmBtn {
+ margin-right: 5px;
+}
+.mx_EditableItem_item {
+ -webkit-box-flex: 1;
+ -ms-flex: auto 1 0px;
+ flex: auto 1 0;
+ -webkit-box-ordinal-group: 2;
+ -ms-flex-order: 1;
+ order: 1;
+ width: calc(100% - 14px);
+ overflow-x: hidden;
+ text-overflow: ellipsis;
+}
+.mx_EditableItemList_label {
+ margin-bottom: 5px;
+}
+.mx_ErrorBoundary {
+ width: 100%;
+ height: 100%;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_ErrorBoundary,
+.mx_ErrorBoundary_body {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_ErrorBoundary_body {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ max-width: 400px;
+}
+.mx_ErrorBoundary_body .mx_AccessibleButton {
+ margin-top: 5px;
+}
+.mx_EventListSummary {
+ position: relative;
+}
+.mx_TextualEvent.mx_EventListSummary_summary {
+ font-size: 1.4rem;
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+}
+.mx_EventListSummary_avatars {
+ display: inline-block;
+ margin-right: 8px;
+ padding-top: 8px;
+ line-height: 1.2rem;
+}
+.mx_EventListSummary_avatars .mx_BaseAvatar {
+ margin-right: -4px;
+ cursor: pointer;
+}
+.mx_EventListSummary_toggle {
+ color: #0dbd8b;
+ cursor: pointer;
+ float: right;
+ margin-right: 10px;
+ margin-top: 8px;
+}
+.mx_EventListSummary_line {
+ border-bottom: 1px solid transparent;
+ margin-left: 63px;
+ line-height: 3rem;
+}
+.mx_MatrixChat_useCompactLayout .mx_EventListSummary {
+ font-size: 1.3rem;
+}
+.mx_MatrixChat_useCompactLayout .mx_EventListSummary .mx_EventTile_line {
+ line-height: 2rem;
+}
+.mx_MatrixChat_useCompactLayout .mx_EventListSummary_line {
+ line-height: 2.2rem;
+}
+.mx_MatrixChat_useCompactLayout .mx_EventListSummary_toggle {
+ margin-top: 3px;
+}
+.mx_MatrixChat_useCompactLayout .mx_TextualEvent.mx_EventListSummary_summary {
+ font-size: 1.3rem;
+}
+.mx_FacePile .mx_FacePile_faces {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: reverse;
+ -ms-flex-direction: row-reverse;
+ flex-direction: row-reverse;
+ vertical-align: middle;
+}
+.mx_FacePile .mx_FacePile_faces > .mx_FacePile_face + .mx_FacePile_face {
+ margin-right: -8px;
+}
+.mx_FacePile .mx_FacePile_faces .mx_BaseAvatar_image {
+ border: 1px solid #fff;
+}
+.mx_FacePile .mx_FacePile_faces .mx_BaseAvatar_initial {
+ margin: 1px;
+}
+.mx_FacePile .mx_FacePile_faces .mx_FacePile_more {
+ position: relative;
+ border-radius: 100%;
+ width: 30px;
+ height: 30px;
+ background-color: hsla(0, 0%, 91%, 0.77);
+}
+.mx_FacePile .mx_FacePile_faces .mx_FacePile_more:before {
+ content: "";
+ z-index: 1;
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: inherit;
+ width: inherit;
+ background: #8d99a5;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 20px;
+ mask-size: 20px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
+ mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
+}
+.mx_FacePile .mx_FacePile_summary {
+ margin-left: 12px;
+ font-size: 1.4rem;
+ line-height: 2.4rem;
+ color: #8d99a5;
+}
+.mx_Field {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ min-width: 0;
+ position: relative;
+ margin: 1em 0;
+ border-radius: 4px;
+ -webkit-transition: border-color 0.25s;
+ transition: border-color 0.25s;
+ border: 1px solid #e7e7e7;
+}
+.mx_Field_prefix {
+ border-right: 1px solid #e7e7e7;
+}
+.mx_Field_postfix {
+ border-left: 1px solid #e7e7e7;
+}
+.mx_Field input,
+.mx_Field select,
+.mx_Field textarea {
+ font-weight: 400;
+ font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
+ Helvetica, Sans-Serif, Noto Color Emoji;
+ font-size: 1.4rem;
+ border: none;
+ border-radius: 4px;
+ padding: 8px 9px;
+ color: #2e2f32;
+ background-color: #fff;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ min-width: 0;
+}
+.mx_Field select {
+ -moz-appearance: none;
+ -webkit-appearance: none;
+}
+.mx_Field_select:before {
+ content: "";
+ position: absolute;
+ top: 15px;
+ right: 10px;
+ width: 10px;
+ height: 6px;
+ -webkit-mask: url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);
+ mask: url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background-color: #2e2f32;
+ z-index: 1;
+ pointer-events: none;
+}
+.mx_Field:focus-within {
+ border-color: #238cf5;
+}
+.mx_Field input:focus,
+.mx_Field select:focus,
+.mx_Field textarea:focus {
+ outline: 0;
+}
+.mx_Field input::-webkit-input-placeholder,
+.mx_Field textarea::-webkit-input-placeholder {
+ -webkit-transition: color 0.25s ease-in 0s;
+ transition: color 0.25s ease-in 0s;
+ color: transparent;
+}
+.mx_Field input::-moz-placeholder,
+.mx_Field textarea::-moz-placeholder {
+ -moz-transition: color 0.25s ease-in 0s;
+ transition: color 0.25s ease-in 0s;
+ color: transparent;
+}
+.mx_Field input:-ms-input-placeholder,
+.mx_Field textarea:-ms-input-placeholder {
+ -ms-transition: color 0.25s ease-in 0s;
+ transition: color 0.25s ease-in 0s;
+ color: transparent;
+}
+.mx_Field input::-ms-input-placeholder,
+.mx_Field textarea::-ms-input-placeholder {
+ -ms-transition: color 0.25s ease-in 0s;
+ transition: color 0.25s ease-in 0s;
+ color: transparent;
+}
+.mx_Field input::placeholder,
+.mx_Field textarea::placeholder {
+ -webkit-transition: color 0.25s ease-in 0s;
+ transition: color 0.25s ease-in 0s;
+ color: transparent;
+}
+.mx_Field input:placeholder-shown:focus::-webkit-input-placeholder,
+.mx_Field textarea:placeholder-shown:focus::-webkit-input-placeholder {
+ -webkit-transition: color 0.25s ease-in 0.1s;
+ transition: color 0.25s ease-in 0.1s;
+ color: #888;
+}
+.mx_Field input:placeholder-shown:focus::-moz-placeholder,
+.mx_Field textarea:placeholder-shown:focus::-moz-placeholder {
+ -moz-transition: color 0.25s ease-in 0.1s;
+ transition: color 0.25s ease-in 0.1s;
+ color: #888;
+}
+.mx_Field input:placeholder-shown:focus:-ms-input-placeholder,
+.mx_Field textarea:placeholder-shown:focus:-ms-input-placeholder {
+ -ms-transition: color 0.25s ease-in 0.1s;
+ transition: color 0.25s ease-in 0.1s;
+ color: #888;
+}
+.mx_Field input:placeholder-shown:focus::-ms-input-placeholder,
+.mx_Field textarea:placeholder-shown:focus::-ms-input-placeholder {
+ -ms-transition: color 0.25s ease-in 0.1s;
+ transition: color 0.25s ease-in 0.1s;
+ color: #888;
+}
+.mx_Field input:-moz-placeholder-shown:focus::placeholder,
+.mx_Field textarea:-moz-placeholder-shown:focus::placeholder {
+ -moz-transition: color 0.25s ease-in 0.1s;
+ transition: color 0.25s ease-in 0.1s;
+ color: #888;
+}
+.mx_Field input:-ms-input-placeholder:focus::placeholder,
+.mx_Field textarea:-ms-input-placeholder:focus::placeholder {
+ -ms-transition: color 0.25s ease-in 0.1s;
+ transition: color 0.25s ease-in 0.1s;
+ color: #888;
+}
+.mx_Field input:placeholder-shown:focus::placeholder,
+.mx_Field textarea:placeholder-shown:focus::placeholder {
+ -webkit-transition: color 0.25s ease-in 0.1s;
+ transition: color 0.25s ease-in 0.1s;
+ color: #888;
+}
+.mx_Field label {
+ -webkit-transition: font-size 0.25s ease-out 0.1s, color 0.25s ease-out 0.1s,
+ top 0.25s ease-out 0.1s, background-color 0.25s ease-out 0.1s;
+ transition: font-size 0.25s ease-out 0.1s, color 0.25s ease-out 0.1s,
+ top 0.25s ease-out 0.1s, background-color 0.25s ease-out 0.1s;
+ color: #2e2f32;
+ background-color: transparent;
+ font-size: 1.4rem;
+ position: absolute;
+ left: 0;
+ top: 0;
+ margin: 7px 8px;
+ padding: 2px;
+ pointer-events: none;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ max-width: calc(100% - 20px);
+}
+.mx_Field input:not(:-moz-placeholder-shown) + label,
+.mx_Field textarea:not(:-moz-placeholder-shown) + label {
+ -moz-transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
+ top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
+ transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
+ top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
+ font-size: 1rem;
+ top: -13px;
+ padding: 0 2px;
+ background-color: #fff;
+ pointer-events: auto;
+}
+.mx_Field input:not(:-ms-input-placeholder) + label,
+.mx_Field textarea:not(:-ms-input-placeholder) + label {
+ -ms-transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
+ top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
+ transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
+ top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
+ font-size: 1rem;
+ top: -13px;
+ padding: 0 2px;
+ background-color: #fff;
+ pointer-events: auto;
+}
+.mx_Field_labelAlwaysTopLeft label,
+.mx_Field input:focus + label,
+.mx_Field input:not(:placeholder-shown) + label,
+.mx_Field select + label,
+.mx_Field textarea:focus + label,
+.mx_Field textarea:not(:placeholder-shown) + label {
+ -webkit-transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
+ top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
+ transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
+ top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
+ font-size: 1rem;
+ top: -13px;
+ padding: 0 2px;
+ background-color: #fff;
+ pointer-events: auto;
+}
+.mx_Field input:focus + label,
+.mx_Field select:focus + label,
+.mx_Field textarea:focus + label {
+ color: #238cf5;
+}
+.mx_Field input:disabled,
+.mx_Field input:disabled + label,
+.mx_Field select:disabled,
+.mx_Field select:disabled + label,
+.mx_Field textarea:disabled,
+.mx_Field textarea:disabled + label {
+ background-color: #fff;
+ color: #888;
+}
+.mx_Field_valid.mx_Field,
+.mx_Field_valid.mx_Field:focus-within {
+ border-color: #0dbd8b;
+}
+.mx_Field_valid.mx_Field:focus-within label,
+.mx_Field_valid.mx_Field label {
+ color: #0dbd8b;
+}
+.mx_Field_invalid.mx_Field,
+.mx_Field_invalid.mx_Field:focus-within {
+ border-color: #ff4b55;
+}
+.mx_Field_invalid.mx_Field:focus-within label,
+.mx_Field_invalid.mx_Field label {
+ color: #ff4b55;
+}
+.mx_Field_tooltip {
+ margin-top: -12px;
+ margin-left: 4px;
+ width: 200px;
+}
+.mx_Field_tooltip.mx_Field_valid {
+ -webkit-animation: mx_fadeout 1s 2s forwards;
+ animation: mx_fadeout 1s 2s forwards;
+}
+.mx_Field .mx_Dropdown_input {
+ border: initial;
+ border-radius: 0;
+ border-radius: initial;
+}
+.mx_Field .mx_CountryDropdown {
+ width: 7.8rem;
+}
+.mx_FormButton {
+ line-height: 1.6rem;
+ padding: 5px 15px;
+ font-size: 1.2rem;
+ height: -webkit-min-content;
+ height: -moz-min-content;
+ height: min-content;
+}
+.mx_FormButton:not(:last-child) {
+ margin-right: 8px;
+}
+.mx_FormButton.mx_AccessibleButton_kind_primary {
+ color: #0dbd8b;
+ background-color: rgba(3, 179, 129, 0.16);
+}
+.mx_FormButton.mx_AccessibleButton_kind_danger {
+ color: #ff4b55;
+ background-color: rgba(255, 75, 85, 0.16);
+}
+.mx_FormButton.mx_AccessibleButton_kind_secondary {
+ color: #737d8c;
+ border: 1px solid #737d8c;
+ background-color: unset;
+}
+.mx_ImageView {
+ width: 100%;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_ImageView,
+.mx_ImageView_image_wrapper {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ height: 100%;
+}
+.mx_ImageView_image_wrapper {
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ overflow: hidden;
+}
+.mx_ImageView_image {
+ pointer-events: all;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+}
+.mx_ImageView_panel {
+ width: 100%;
+ height: 68px;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+}
+.mx_ImageView_info_wrapper,
+.mx_ImageView_panel {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_ImageView_info_wrapper {
+ pointer-events: all;
+ padding-left: 32px;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ color: #fff;
+}
+.mx_ImageView_info {
+ padding-left: 12px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_ImageView_info_sender {
+ font-weight: 700;
+}
+.mx_ImageView_toolbar {
+ padding-right: 16px;
+ pointer-events: all;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_ImageView_button {
+ margin-left: 24px;
+ display: block;
+}
+.mx_ImageView_button:before {
+ content: "";
+ height: 22px;
+ width: 22px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-position: center;
+ mask-position: center;
+ display: block;
+ background-color: #c1c6cd;
+}
+.mx_ImageView_button_rotateCW:before {
+ -webkit-mask-image: url(../../img/image-view/rotate-cw.60d903e.svg);
+ mask-image: url(../../img/image-view/rotate-cw.60d903e.svg);
+}
+.mx_ImageView_button_rotateCCW:before {
+ -webkit-mask-image: url(../../img/image-view/rotate-ccw.b28ae4a.svg);
+ mask-image: url(../../img/image-view/rotate-ccw.b28ae4a.svg);
+}
+.mx_ImageView_button_zoomOut:before {
+ -webkit-mask-image: url(../../img/image-view/zoom-out.8506f80.svg);
+ mask-image: url(../../img/image-view/zoom-out.8506f80.svg);
+}
+.mx_ImageView_button_zoomIn:before {
+ -webkit-mask-image: url(../../img/image-view/zoom-in.3b3f32e.svg);
+ mask-image: url(../../img/image-view/zoom-in.3b3f32e.svg);
+}
+.mx_ImageView_button_download:before {
+ -webkit-mask-image: url(../../img/image-view/download.2eac468.svg);
+ mask-image: url(../../img/image-view/download.2eac468.svg);
+}
+.mx_ImageView_button_more:before {
+ -webkit-mask-image: url(../../img/image-view/more.0427c6c.svg);
+ mask-image: url(../../img/image-view/more.0427c6c.svg);
+}
+.mx_ImageView_button_close {
+ border-radius: 100%;
+ background: #21262c;
+}
+.mx_ImageView_button_close:before {
+ width: 32px;
+ height: 32px;
+ -webkit-mask-image: url(../../img/image-view/close.97d1731.svg);
+ mask-image: url(../../img/image-view/close.97d1731.svg);
+ -webkit-mask-size: 40%;
+ mask-size: 40%;
+}
+.mx_InfoTooltip_icon,
+.mx_InfoTooltip_icon:before {
+ width: 16px;
+ height: 16px;
+ display: inline-block;
+}
+.mx_InfoTooltip_icon:before {
+ background-color: #61708b;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 16px;
+ mask-size: 16px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ content: "";
+ vertical-align: middle;
+ -webkit-mask-image: url(../../img/element-icons/info.dc07e19.svg);
+ mask-image: url(../../img/element-icons/info.dc07e19.svg);
+}
+.mx_InlineSpinner {
+ display: inline;
+}
+.mx_InlineSpinner_spin img {
+ margin: 0 6px;
+ vertical-align: -3px;
+}
+.mx_InviteReason {
+ position: relative;
+ margin-bottom: 1em;
+}
+.mx_InviteReason .mx_InviteReason_reason {
+ visibility: visible;
+}
+.mx_InviteReason .mx_InviteReason_view {
+ display: none;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ cursor: pointer;
+ color: #737d8c;
+}
+.mx_InviteReason .mx_InviteReason_view:before {
+ content: "";
+ margin-right: 8px;
+ background-color: #737d8c;
+ -webkit-mask-image: url(../../img/feather-customised/eye.52aa0d2.svg);
+ mask-image: url(../../img/feather-customised/eye.52aa0d2.svg);
+ display: inline-block;
+ width: 18px;
+ height: 14px;
+}
+.mx_InviteReason_hidden .mx_InviteReason_reason {
+ visibility: hidden;
+}
+.mx_InviteReason_hidden .mx_InviteReason_view {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_ManageIntegsButton_error {
+ position: relative;
+ float: right;
+ cursor: not-allowed;
+}
+.mx_ManageIntegsButton_error img {
+ position: absolute;
+ right: -5px;
+ top: -5px;
+}
+.mx_ManageIntegsButton_errorPopup {
+ position: absolute;
+ top: 110%;
+ left: -275%;
+ width: 550%;
+ padding: 30%;
+ font-size: 10pt;
+ line-height: 1.5em;
+ border-radius: 5px;
+ background-color: #0dbd8b;
+ color: #fff;
+ text-align: center;
+ z-index: 1000;
+}
+.mx_ManageIntegsButton_error .mx_ManageIntegsButton_errorPopup {
+ display: none;
+}
+.mx_ManageIntegsButton_error:hover .mx_ManageIntegsButton_errorPopup {
+ display: inline;
+}
+.mx_MiniAvatarUploader {
+ position: relative;
+ width: -webkit-min-content;
+ width: -moz-min-content;
+ width: min-content;
+}
+.mx_MiniAvatarUploader .mx_Tooltip {
+ display: inline-block;
+ position: absolute;
+ z-index: unset;
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+ left: 72px;
+ top: 0;
+}
+.mx_MiniAvatarUploader:after,
+.mx_MiniAvatarUploader:before {
+ content: "";
+ position: absolute;
+ height: 26px;
+ width: 26px;
+ right: -6px;
+ bottom: -6px;
+}
+.mx_MiniAvatarUploader:before {
+ background-color: #fff;
+ border-radius: 50%;
+ z-index: 1;
+}
+.mx_MiniAvatarUploader:after {
+ background-color: #737d8c;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-image: url(../../img/element-icons/camera.a81a395.svg);
+ mask-image: url(../../img/element-icons/camera.a81a395.svg);
+ -webkit-mask-size: 16px;
+ mask-size: 16px;
+ z-index: 2;
+}
+.mx_MiniAvatarUploader.mx_MiniAvatarUploader_busy:after {
+ background: url(../../img/spinner.0b29ec9.gif) no-repeat 50%;
+ background-size: 80%;
+ -webkit-mask: unset;
+ mask: unset;
+}
+.mx_MiniAvatarUploader_input {
+ display: none;
+}
+.mx_PowerSelector {
+ width: 100%;
+}
+.mx_PowerSelector .mx_Field input,
+.mx_PowerSelector .mx_Field select {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+progress.mx_ProgressBar {
+ height: 6px;
+ width: 60px;
+ overflow: hidden;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ border: none;
+ border-radius: 6px;
+}
+progress.mx_ProgressBar::-moz-progress-bar {
+ border-radius: 6px;
+}
+progress.mx_ProgressBar::-webkit-progress-bar,
+progress.mx_ProgressBar::-webkit-progress-value {
+ border-radius: 6px;
+}
+progress.mx_ProgressBar {
+ color: #0dbd8b;
+}
+progress.mx_ProgressBar::-moz-progress-bar {
+ background-color: #0dbd8b;
+}
+progress.mx_ProgressBar::-webkit-progress-value {
+ background-color: #0dbd8b;
+}
+progress.mx_ProgressBar {
+ background-color: rgba(141, 151, 165, 0.2);
+}
+progress.mx_ProgressBar::-webkit-progress-bar {
+ background-color: rgba(141, 151, 165, 0.2);
+}
+progress.mx_ProgressBar ::-webkit-progress-value {
+ -webkit-transition: width 1s;
+ transition: width 1s;
+}
+progress.mx_ProgressBar ::-moz-progress-bar {
+ -moz-transition: padding-bottom 1s;
+ transition: padding-bottom 1s;
+ padding-bottom: var(--value);
+ transform-origin: 0 0;
+ transform: rotate(-90deg) translateX(-15px);
+ padding-left: 15px;
+ height: 0;
+}
+.mx_QRCode img {
+ border-radius: 8px;
+}
+.mx_ReplyThread {
+ margin-top: 0;
+}
+.mx_ReplyThread .mx_DateSeparator {
+ font-size: 1em !important;
+ margin-top: 0;
+ margin-bottom: 0;
+ padding-bottom: 1px;
+ bottom: -5px;
+}
+.mx_ReplyThread_show {
+ cursor: pointer;
+}
+blockquote.mx_ReplyThread {
+ margin-left: 0;
+ padding-left: 10px;
+ border-left: 4px solid #ddd;
+}
+.mx_ResizeHandle {
+ cursor: row-resize;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ z-index: 100;
+}
+.mx_ResizeHandle.mx_ResizeHandle_horizontal {
+ margin: 0 -5px;
+ padding: 0 5px;
+ cursor: col-resize;
+}
+.mx_ResizeHandle.mx_ResizeHandle_vertical {
+ margin: -5px 0;
+ padding: 5px 0;
+ cursor: row-resize;
+}
+.mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
+ margin: 0 -10px 0 0;
+ padding: 0 8px 0 0;
+}
+.mx_ResizeHandle > div {
+ background: transparent;
+}
+.mx_ResizeHandle.mx_ResizeHandle_horizontal > div {
+ width: 1px;
+ height: 100%;
+}
+.mx_ResizeHandle.mx_ResizeHandle_vertical > div {
+ height: 1px;
+}
+.mx_AtRoomPill,
+.mx_GroupPill,
+.mx_RoomPill,
+.mx_UserPill {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ vertical-align: middle;
+ border-radius: 1.6rem;
+ line-height: 1.5rem;
+ padding-left: 0;
+}
+a.mx_Pill {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ max-width: calc(100% - 1ch);
+}
+.mx_Pill {
+ padding: 0.1rem 0.4em 0.1rem 0.1rem;
+ vertical-align: text-top;
+ line-height: 1.7rem;
+}
+.mx_EventTile_content .markdown-body a.mx_GroupPill,
+.mx_GroupPill {
+ color: #fff;
+ background-color: #aaa;
+}
+.mx_EventTile_content .markdown-body a.mx_Pill {
+ text-decoration: none;
+}
+.mx_EventTile_content .markdown-body a.mx_UserPill,
+.mx_UserPill {
+ color: #2e2f32;
+ background-color: rgba(0, 0, 0, 0.1);
+}
+.mx_UserPill_selected {
+ background-color: #0dbd8b !important;
+}
+.mx_EventTile_content .markdown-body a.mx_AtRoomPill,
+.mx_EventTile_content .mx_AtRoomPill,
+.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me,
+.mx_MessageComposer_input .mx_AtRoomPill {
+ color: #fff;
+ background-color: #ff4b55;
+}
+.mx_EventTile_content .markdown-body a.mx_GroupPill,
+.mx_EventTile_content .markdown-body a.mx_RoomPill,
+.mx_GroupPill,
+.mx_RoomPill {
+ color: #fff;
+ background-color: #aaa;
+}
+.mx_EventTile_body .mx_GroupPill,
+.mx_EventTile_body .mx_RoomPill,
+.mx_EventTile_body .mx_UserPill {
+ cursor: pointer;
+}
+.mx_AtRoomPill .mx_BaseAvatar,
+.mx_GroupPill .mx_BaseAvatar,
+.mx_RoomPill .mx_BaseAvatar,
+.mx_UserPill .mx_BaseAvatar {
+ position: relative;
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ border-radius: 10rem;
+ margin-right: 0.24rem;
+}
+.mx_Markdown_BOLD {
+ font-weight: 700;
+}
+.mx_Markdown_ITALIC {
+ font-style: italic;
+}
+.mx_Markdown_CODE {
+ padding: 0.2em 0;
+ margin: 0;
+ font-size: 85%;
+ background-color: rgba(0, 0, 0, 0.04);
+ border-radius: 3px;
+}
+.mx_Markdown_HR {
+ display: block;
+ background: #e9e9e9;
+}
+.mx_Markdown_STRIKETHROUGH {
+ text-decoration: line-through;
+}
+.mx_RoleButton {
+ margin-left: 4px;
+ margin-right: 4px;
+ cursor: pointer;
+ display: inline-block;
+}
+.mx_RoleButton object {
+ pointer-events: none;
+}
+.mx_RoleButton_tooltip {
+ display: inline-block;
+ position: relative;
+ top: -25px;
+ left: 6px;
+}
+.mx_RoomAliasField {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: stretch;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+ min-width: 0;
+ max-width: 100%;
+}
+.mx_RoomAliasField input {
+ width: 150px;
+ padding-left: 0;
+ padding-right: 0;
+}
+.mx_RoomAliasField input::-webkit-input-placeholder {
+ color: #888;
+ font-weight: 400;
+}
+.mx_RoomAliasField input::-moz-placeholder {
+ color: #888;
+ font-weight: 400;
+}
+.mx_RoomAliasField input:-ms-input-placeholder {
+ color: #888;
+ font-weight: 400;
+}
+.mx_RoomAliasField input::-ms-input-placeholder {
+ color: #888;
+ font-weight: 400;
+}
+.mx_RoomAliasField input::placeholder {
+ color: #888;
+ font-weight: 400;
+}
+.mx_RoomAliasField .mx_Field_postfix,
+.mx_RoomAliasField .mx_Field_prefix {
+ color: #888;
+ border-left: none;
+ border-right: none;
+ font-weight: 600;
+ padding: 9px 10px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+}
+.mx_RoomAliasField .mx_Field_postfix {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ max-width: calc(100% - 180px);
+}
+.mx_SSOButtons {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_SSOButtons .mx_SSOButtons_row + .mx_SSOButtons_row {
+ margin-top: 16px;
+}
+.mx_SSOButtons .mx_SSOButton {
+ position: relative;
+ width: 100%;
+ padding: 7px 32px;
+ text-align: center;
+ border-radius: 8px;
+ display: inline-block;
+ font-size: 1.4rem;
+ font-weight: 600;
+ border: 1px solid #e7e7e7;
+ color: #2e2f32;
+}
+.mx_SSOButtons .mx_SSOButton > img {
+ -o-object-fit: contain;
+ object-fit: contain;
+ position: absolute;
+ left: 8px;
+ top: 4px;
+}
+.mx_SSOButtons .mx_SSOButton_default {
+ color: #0dbd8b;
+ background-color: #fff;
+ border-color: #0dbd8b;
+}
+.mx_SSOButtons .mx_SSOButton_default.mx_SSOButton_primary {
+ color: #fff;
+ background-color: #0dbd8b;
+}
+.mx_SSOButtons .mx_SSOButton_mini {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ width: 50px;
+ height: 50px;
+ min-width: 50px;
+ padding: 12px;
+}
+.mx_SSOButtons .mx_SSOButton_mini > img {
+ left: 12px;
+ top: 12px;
+}
+.mx_SSOButtons .mx_SSOButton_mini + .mx_SSOButton_mini {
+ margin-left: 16px;
+}
+.mx_ServerPicker {
+ margin-bottom: 14px;
+ border-bottom: 1px solid rgba(141, 151, 165, 0.2);
+ display: grid;
+ grid-template-columns: auto -webkit-min-content;
+ grid-template-columns: auto min-content;
+ grid-template-rows: auto auto auto;
+ font-size: 1.4rem;
+ line-height: 2rem;
+}
+.mx_ServerPicker > h3 {
+ font-weight: 600;
+ margin: 0 0 20px;
+ grid-column: 1;
+ grid-row: 1;
+}
+.mx_ServerPicker .mx_ServerPicker_help {
+ width: 20px;
+ height: 20px;
+ background-color: #c1c6cd;
+ border-radius: 10px;
+ grid-column: 2;
+ grid-row: 1;
+ margin-left: auto;
+ text-align: center;
+ color: #fff;
+ font-size: 16px;
+ position: relative;
+}
+.mx_ServerPicker .mx_ServerPicker_help:before {
+ content: "";
+ width: 24px;
+ height: 24px;
+ position: absolute;
+ top: -2px;
+ left: -2px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-image: url(../../img/element-icons/i.80d84f3.svg);
+ mask-image: url(../../img/element-icons/i.80d84f3.svg);
+ background: #fff;
+}
+.mx_ServerPicker .mx_ServerPicker_server {
+ color: #232f32;
+ grid-column: 1;
+ grid-row: 2;
+ margin-bottom: 16px;
+}
+.mx_ServerPicker .mx_ServerPicker_change {
+ padding: 0;
+ font-size: inherit;
+ grid-column: 2;
+ grid-row: 2;
+}
+.mx_ServerPicker .mx_ServerPicker_desc {
+ margin-top: -12px;
+ color: #8d99a5;
+ grid-column: 1/2;
+ grid-row: 3;
+ margin-bottom: 16px;
+}
+.mx_ServerPicker_helpDialog .mx_Dialog_content {
+ width: 456px;
+}
+.mx_Slider {
+ position: relative;
+ margin: 0;
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+.mx_Slider_dotContainer {
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+}
+.mx_Slider_bar,
+.mx_Slider_dotContainer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_Slider_bar {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ position: absolute;
+ height: 1em;
+ width: 100%;
+ padding: 0 0.5em;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_Slider_bar > hr {
+ width: 100%;
+ height: 0.4em;
+ background-color: #c1c9d6;
+ border: 0;
+}
+.mx_Slider_selection {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ width: calc(100% - 1em);
+ height: 1em;
+ position: absolute;
+ pointer-events: none;
+}
+.mx_Slider_selectionDot {
+ position: absolute;
+ width: 1.1em;
+ height: 1.1em;
+ background-color: #0dbd8b;
+ border-radius: 50%;
+ -webkit-box-shadow: 0 0 6px #d3d3d3;
+ box-shadow: 0 0 6px #d3d3d3;
+ z-index: 10;
+}
+.mx_Slider_selection > hr {
+ margin: 0;
+ border: 0.2em solid #0dbd8b;
+}
+.mx_Slider_dot {
+ height: 1em;
+ width: 1em;
+ border-radius: 50%;
+ background-color: #c1c9d6;
+ z-index: 0;
+}
+.mx_Slider_dotActive {
+ background-color: #0dbd8b;
+}
+.mx_Slider_dotValue {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #c1c9d6;
+}
+.mx_Slider_labelContainer {
+ width: 1em;
+}
+.mx_Slider_label {
+ position: relative;
+ width: -webkit-fit-content;
+ width: -moz-fit-content;
+ width: fit-content;
+ left: -50%;
+}
+.mx_Spinner {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+}
+.mx_MatrixChat_middlePanel .mx_Spinner {
+ height: auto;
+}
+.mx_Checkbox {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+}
+.mx_Checkbox input[type="checkbox"] {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ margin: 0;
+ padding: 0;
+}
+.mx_Checkbox input[type="checkbox"] + label {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+.mx_Checkbox input[type="checkbox"] + label > .mx_Checkbox_background {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ position: relative;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ height: 1.6rem;
+ width: 1.6rem;
+ size: 0.5rem;
+ border: 0.15rem solid rgba(97, 112, 139, 0.5);
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ border-radius: 0.4rem;
+}
+.mx_Checkbox input[type="checkbox"] + label > .mx_Checkbox_background img {
+ display: none;
+ height: 100%;
+ width: 100%;
+ -webkit-filter: invert(100%);
+ filter: invert(100%);
+}
+.mx_Checkbox input[type="checkbox"]:checked + label > .mx_Checkbox_background {
+ background: #0dbd8b;
+ border-color: #0dbd8b;
+}
+.mx_Checkbox
+ input[type="checkbox"]:checked
+ + label
+ > .mx_Checkbox_background
+ img {
+ display: block;
+}
+.mx_Checkbox input[type="checkbox"] + label > :not(.mx_Checkbox_background) {
+ margin-left: 10px;
+}
+.mx_Checkbox input[type="checkbox"]:disabled + label {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+.mx_Checkbox
+ input[type="checkbox"]:checked:disabled
+ + label
+ > .mx_Checkbox_background {
+ background-color: #0dbd8b;
+ border-color: #0dbd8b;
+}
+.mx_Checkbox
+ input[type="checkbox"].focus-visible
+ + label
+ .mx_Checkbox_background {
+ outline-width: 2px;
+ outline-style: solid;
+ outline-color: Highlight;
+}
+@media (-webkit-min-device-pixel-ratio: 0) {
+ .mx_Checkbox
+ input[type="checkbox"].focus-visible
+ + label
+ .mx_Checkbox_background {
+ outline-color: -webkit-focus-ring-color;
+ outline-style: auto;
+ }
+}
+.mx_RadioButton {
+ position: relative;
+ -webkit-box-align: baseline;
+ -ms-flex-align: baseline;
+ align-items: baseline;
+}
+.mx_RadioButton,
+.mx_RadioButton > .mx_RadioButton_content {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+.mx_RadioButton > .mx_RadioButton_content {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ margin-left: 8px;
+ margin-right: 8px;
+}
+.mx_RadioButton .mx_RadioButton_spacer {
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ -webkit-box-flex: 0;
+ -ms-flex-positive: 0;
+ flex-grow: 0;
+ height: 1.6rem;
+ width: 1.6rem;
+}
+.mx_RadioButton > input[type="radio"] {
+ margin: 0;
+ padding: 0;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+}
+.mx_RadioButton > input[type="radio"] + div {
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ -webkit-box-flex: 0;
+ -ms-flex-positive: 0;
+ flex-grow: 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ height: 1.6rem;
+ width: 1.6rem;
+ margin-left: 2px;
+ border: 0.15rem solid #61708b;
+ border-radius: 1.6rem;
+}
+.mx_RadioButton > input[type="radio"] + div > div {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ height: 0.8rem;
+ width: 0.8rem;
+ border-radius: 0.8rem;
+}
+.mx_RadioButton > input[type="radio"].focus-visible + div {
+ outline-width: 2px;
+ outline-style: solid;
+ outline-color: Highlight;
+}
+@media (-webkit-min-device-pixel-ratio: 0) {
+ .mx_RadioButton > input[type="radio"].focus-visible + div {
+ outline-color: -webkit-focus-ring-color;
+ outline-style: auto;
+ }
+}
+.mx_RadioButton > input[type="radio"]:checked + div {
+ border-color: #0dbd8b;
+}
+.mx_RadioButton > input[type="radio"]:checked + div > div {
+ background: #0dbd8b;
+}
+.mx_RadioButton > input[type="radio"]:disabled + div,
+.mx_RadioButton > input[type="radio"]:disabled + div + span {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+.mx_RadioButton > input[type="radio"]:disabled + div {
+ border-color: #61708b;
+}
+.mx_RadioButton > input[type="radio"]:checked:disabled + div > div {
+ background-color: #61708b;
+}
+.mx_RadioButton_outlined {
+ border: 1px solid #e3e8f0;
+ border-radius: 8px;
+}
+.mx_RadioButton_checked {
+ border-color: #0dbd8b;
+}
+.mx_SyntaxHighlight {
+ background: none !important;
+ color: #747474 !important;
+}
+.mx_TextWithTooltip_tooltip {
+ display: none;
+}
+.mx_ToggleSwitch {
+ -webkit-transition: background-color 0.2s ease-out 0.1s;
+ transition: background-color 0.2s ease-out 0.1s;
+ width: 4.4rem;
+ height: 2rem;
+ border-radius: 1.5rem;
+ padding: 2px;
+ background-color: #c1c9d6;
+ opacity: 0.5;
+}
+.mx_ToggleSwitch_enabled {
+ cursor: pointer;
+ opacity: 1;
+}
+.mx_ToggleSwitch.mx_ToggleSwitch_on {
+ background-color: #0dbd8b;
+}
+.mx_ToggleSwitch.mx_ToggleSwitch_on > .mx_ToggleSwitch_ball {
+ left: calc(100% - 2rem);
+}
+.mx_ToggleSwitch_ball {
+ position: relative;
+ width: 2rem;
+ height: 2rem;
+ border-radius: 2rem;
+ background-color: #fff;
+ -webkit-transition: left 0.15s ease-out 0.1s;
+ transition: left 0.15s ease-out 0.1s;
+ left: 0;
+}
+@-webkit-keyframes mx_fadein {
+ 0% {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+@keyframes mx_fadein {
+ 0% {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+@-webkit-keyframes mx_fadeout {
+ 0% {
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ }
+}
+@keyframes mx_fadeout {
+ 0% {
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ }
+}
+.mx_Tooltip_chevron {
+ position: absolute;
+ left: -7px;
+ top: 10px;
+ width: 0;
+ height: 0;
+ border-top: 7px solid transparent;
+ border-right: 7px solid #e7e7e7;
+ border-bottom: 7px solid transparent;
+}
+.mx_Tooltip_chevron:after {
+ content: "";
+ width: 0;
+ height: 0;
+ border-top: 6px solid transparent;
+ border-right: 6px solid #fff;
+ border-bottom: 6px solid transparent;
+ position: absolute;
+ top: -6px;
+ left: 1px;
+}
+.mx_Tooltip {
+ position: fixed;
+ border-radius: 8px;
+ -webkit-box-shadow: 4px 4px 12px 0 rgba(118, 131, 156, 0.6);
+ box-shadow: 4px 4px 12px 0 rgba(118, 131, 156, 0.6);
+ z-index: 6000;
+ padding: 10px;
+ pointer-events: none;
+ line-height: 1.4rem;
+ font-size: 1.2rem;
+ font-weight: 500;
+ max-width: 200px;
+ word-break: break-word;
+ margin-right: 50px;
+ background-color: #27303a;
+ color: #fff;
+ border: 0;
+ text-align: center;
+}
+.mx_Tooltip,
+.mx_Tooltip .mx_Tooltip_chevron {
+ display: none;
+}
+.mx_Tooltip.mx_Tooltip_visible {
+ -webkit-animation: mx_fadein 0.2s forwards;
+ animation: mx_fadein 0.2s forwards;
+}
+.mx_Tooltip.mx_Tooltip_invisible {
+ -webkit-animation: mx_fadeout 0.1s forwards;
+ animation: mx_fadeout 0.1s forwards;
+}
+.mx_Field_tooltip {
+ background-color: #fff;
+ color: #2e2f32;
+ border: 1px solid #e7e7e7;
+ text-align: unset;
+}
+.mx_Field_tooltip .mx_Tooltip_chevron {
+ display: unset;
+}
+.mx_Tooltip_title {
+ font-weight: 600;
+}
+.mx_Tooltip_sub {
+ opacity: 0.7;
+ margin-top: 4px;
+}
+.mx_TooltipButton {
+ display: inline-block;
+ width: 11px;
+ height: 11px;
+ margin-left: 5px;
+ border: 2px solid #dbdbdb;
+ border-radius: 20px;
+ color: #dbdbdb;
+ -webkit-transition: opacity 0.2s ease-in;
+ transition: opacity 0.2s ease-in;
+ opacity: 0.6;
+ line-height: 1.1rem;
+ text-align: center;
+ cursor: pointer;
+}
+.mx_TooltipButton:hover {
+ opacity: 1;
+}
+.mx_TooltipButton_container {
+ position: relative;
+ top: -18px;
+ left: 4px;
+}
+.mx_TooltipButton_helpText {
+ width: 400px;
+ text-align: start;
+ line-height: 17px !important;
+}
+.mx_Validation {
+ position: relative;
+}
+.mx_Validation_details {
+ padding-left: 20px;
+ margin: 0;
+}
+.mx_Validation_description + .mx_Validation_details {
+ margin: 1em 0 0;
+}
+.mx_Validation_detail {
+ position: relative;
+ font-weight: 400;
+ list-style: none;
+ margin-bottom: 0.5em;
+}
+.mx_Validation_detail:last-child {
+ margin-bottom: 0;
+}
+.mx_Validation_detail:before {
+ content: "";
+ position: absolute;
+ width: 14px;
+ height: 14px;
+ top: 0;
+ left: -18px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+}
+.mx_Validation_detail.mx_Validation_valid {
+ color: #0dbd8b;
+}
+.mx_Validation_detail.mx_Validation_valid:before {
+ -webkit-mask-image: url(../../img/feather-customised/check.5745b4e.svg);
+ mask-image: url(../../img/feather-customised/check.5745b4e.svg);
+ background-color: #0dbd8b;
+}
+.mx_Validation_detail.mx_Validation_invalid {
+ color: #ff4b55;
+}
+.mx_Validation_detail.mx_Validation_invalid:before {
+ -webkit-mask-image: url(../../img/feather-customised/x.9662221.svg);
+ mask-image: url(../../img/feather-customised/x.9662221.svg);
+ background-color: #ff4b55;
+}
+.mx_EmojiPicker {
+ width: 340px;
+ height: 450px;
+ border-radius: 4px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_EmojiPicker_body {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ overflow-y: scroll;
+ scrollbar-width: thin;
+ scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+}
+.mx_EmojiPicker_header {
+ padding: 4px 8px 0;
+ border-bottom: 1px solid #e9edf1;
+}
+.mx_EmojiPicker_anchor {
+ padding: 8px 8px 6px;
+ border: none;
+ border-bottom: 2px solid transparent;
+ background-color: transparent;
+ border-radius: 4px 4px 0 0;
+ width: 36px;
+ height: 38px;
+}
+.mx_EmojiPicker_anchor:not(:disabled) {
+ cursor: pointer;
+}
+.mx_EmojiPicker_anchor:not(:disabled):hover {
+ background-color: #ddd;
+ border-bottom: 2px solid #0dbd8b;
+}
+.mx_EmojiPicker_anchor:before {
+ background-color: #2e2f32;
+ content: "";
+ display: inline-block;
+ -webkit-mask-size: 100%;
+ mask-size: 100%;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ width: 100%;
+ height: 100%;
+}
+.mx_EmojiPicker_anchor:disabled:before {
+ background-color: #ddd;
+}
+.mx_EmojiPicker_anchor_activity:before {
+ -webkit-mask-image: url(../../img/emojipicker/activity.921ec9f.svg);
+ mask-image: url(../../img/emojipicker/activity.921ec9f.svg);
+}
+.mx_EmojiPicker_anchor_custom:before {
+ -webkit-mask-image: url(../../img/emojipicker/custom.e1cd0fd.svg);
+ mask-image: url(../../img/emojipicker/custom.e1cd0fd.svg);
+}
+.mx_EmojiPicker_anchor_flags:before {
+ -webkit-mask-image: url(../../img/emojipicker/flags.1a8855e.svg);
+ mask-image: url(../../img/emojipicker/flags.1a8855e.svg);
+}
+.mx_EmojiPicker_anchor_foods:before {
+ -webkit-mask-image: url(../../img/emojipicker/foods.c6b220a.svg);
+ mask-image: url(../../img/emojipicker/foods.c6b220a.svg);
+}
+.mx_EmojiPicker_anchor_nature:before {
+ -webkit-mask-image: url(../../img/emojipicker/nature.6540b99.svg);
+ mask-image: url(../../img/emojipicker/nature.6540b99.svg);
+}
+.mx_EmojiPicker_anchor_objects:before {
+ -webkit-mask-image: url(../../img/emojipicker/objects.4d34f58.svg);
+ mask-image: url(../../img/emojipicker/objects.4d34f58.svg);
+}
+.mx_EmojiPicker_anchor_people:before {
+ -webkit-mask-image: url(../../img/emojipicker/people.e918580.svg);
+ mask-image: url(../../img/emojipicker/people.e918580.svg);
+}
+.mx_EmojiPicker_anchor_places:before {
+ -webkit-mask-image: url(../../img/emojipicker/places.7310322.svg);
+ mask-image: url(../../img/emojipicker/places.7310322.svg);
+}
+.mx_EmojiPicker_anchor_recent:before {
+ -webkit-mask-image: url(../../img/emojipicker/recent.13b42e2.svg);
+ mask-image: url(../../img/emojipicker/recent.13b42e2.svg);
+}
+.mx_EmojiPicker_anchor_symbols:before {
+ -webkit-mask-image: url(../../img/emojipicker/symbols.15a557d.svg);
+ mask-image: url(../../img/emojipicker/symbols.15a557d.svg);
+}
+.mx_EmojiPicker_anchor_visible {
+ border-bottom: 2px solid #0dbd8b;
+}
+.mx_EmojiPicker_search {
+ margin: 8px;
+ border-radius: 4px;
+ border: 1px solid #e7e7e7;
+ background-color: #fff;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_EmojiPicker_search input {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ border: none;
+ padding: 8px 12px;
+ border-radius: 4px 0;
+}
+.mx_EmojiPicker_search button {
+ border: none;
+ background-color: inherit;
+ margin: 0;
+ padding: 8px;
+ -ms-flex-item-align: center;
+ align-self: center;
+ width: 32px;
+ height: 32px;
+}
+.mx_EmojiPicker_search_clear {
+ cursor: pointer;
+}
+.mx_EmojiPicker_search_icon {
+ width: 16px;
+ margin: 8px;
+}
+.mx_EmojiPicker_search_icon:not(.mx_EmojiPicker_search_clear) {
+ pointer-events: none;
+}
+.mx_EmojiPicker_search_icon:after {
+ -webkit-mask: url(../../img/emojipicker/search.973c315.svg) no-repeat;
+ mask: url(../../img/emojipicker/search.973c315.svg) no-repeat;
+ -webkit-mask-size: 100%;
+ mask-size: 100%;
+ background-color: #2e2f32;
+ content: "";
+ display: inline-block;
+ width: 100%;
+ height: 100%;
+}
+.mx_EmojiPicker_search_clear:after {
+ -webkit-mask-image: url(../../img/emojipicker/delete.f7344c5.svg);
+ mask-image: url(../../img/emojipicker/delete.f7344c5.svg);
+}
+.mx_EmojiPicker_category {
+ padding: 0 12px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_EmojiPicker_category_label {
+ width: 304px;
+}
+.mx_EmojiPicker_list {
+ width: 304px;
+ padding: 0;
+ margin: 0;
+}
+.mx_EmojiPicker_item_wrapper {
+ display: inline-block;
+ list-style: none;
+ width: 38px;
+ cursor: pointer;
+}
+.mx_EmojiPicker_item {
+ display: inline-block;
+ font-size: 2rem;
+ padding: 5px;
+ width: 100%;
+ height: 100%;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ text-align: center;
+ border-radius: 4px;
+}
+.mx_EmojiPicker_item:hover {
+ background-color: #ddd;
+}
+.mx_EmojiPicker_item_selected {
+ color: rgba(0, 0, 0, 0.5);
+ border: 1px solid #0dbd8b;
+ padding: 4px;
+}
+.mx_EmojiPicker_category_label,
+.mx_EmojiPicker_preview_name {
+ font-size: 1.6rem;
+ font-weight: 600;
+ margin: 0;
+}
+.mx_EmojiPicker_footer {
+ border-top: 1px solid #e9edf1;
+ min-height: 72px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_EmojiPicker_preview_emoji {
+ font-size: 3.2rem;
+ padding: 8px 16px;
+}
+.mx_EmojiPicker_preview_text {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_EmojiPicker_name {
+ text-transform: capitalize;
+}
+.mx_EmojiPicker_shortcode {
+ color: #747474;
+ font-size: 1.4rem;
+}
+.mx_EmojiPicker_shortcode:after,
+.mx_EmojiPicker_shortcode:before {
+ content: ":";
+}
+.mx_EmojiPicker_quick {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -ms-flex-pack: distribute;
+ justify-content: space-around;
+}
+.mx_EmojiPicker_quick_header .mx_EmojiPicker_name {
+ margin-right: 4px;
+}
+.mx_GroupPublicity_toggle {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ margin: 8px;
+}
+.mx_GroupPublicity_toggle .mx_GroupTile {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+ cursor: pointer;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ width: 100%;
+}
+.mx_GroupPublicity_toggle .mx_ToggleSwitch {
+ float: right;
+}
+.mx_GroupRoomTile {
+ position: relative;
+ color: #2e2f32;
+ cursor: pointer;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_GroupRoomList_wrapper {
+ padding: 10px;
+}
+.mx_GroupUserSettings_groupPublicity_scrollbox {
+ height: 200px;
+ border: 1px solid transparent;
+ border-radius: 3px;
+ overflow: hidden;
+}
+.mx_CreateEvent:before {
+ background-color: #91a1c0;
+ -webkit-mask-image: url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);
+ mask-image: url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);
+}
+.mx_DateSeparator {
+ clear: both;
+ margin: 4px 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ font-size: 1.4rem;
+ color: #9e9e9e;
+}
+.mx_DateSeparator > hr {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0;
+ height: 0;
+ border: none;
+ border-bottom: 1px solid transparent;
+}
+.mx_DateSeparator > div {
+ margin: 0 25px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+}
+.mx_EventTileBubble {
+ background-color: #f2f5f8;
+ padding: 10px;
+ border-radius: 8px;
+ margin: 10px auto;
+ max-width: 75%;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ display: grid;
+ grid-template-columns: 24px minmax(0, 1fr) -webkit-min-content;
+ grid-template-columns: 24px minmax(0, 1fr) min-content;
+}
+.mx_EventTileBubble:after,
+.mx_EventTileBubble:before {
+ position: relative;
+ grid-column: 1;
+ grid-row: 1/3;
+ width: 16px;
+ height: 16px;
+ content: "";
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ margin-top: 4px;
+}
+.mx_EventTileBubble .mx_EventTileBubble_subtitle,
+.mx_EventTileBubble .mx_EventTileBubble_title {
+ overflow-wrap: break-word;
+}
+.mx_EventTileBubble .mx_EventTileBubble_title {
+ font-weight: 600;
+ font-size: 1.5rem;
+ grid-column: 2;
+ grid-row: 1;
+}
+.mx_EventTileBubble .mx_EventTileBubble_subtitle {
+ font-size: 1.2rem;
+ grid-column: 2;
+ grid-row: 2;
+}
+.mx_MEmoteBody {
+ white-space: pre-wrap;
+}
+.mx_MEmoteBody_sender {
+ cursor: pointer;
+}
+.mx_MFileBody_download {
+ color: #0dbd8b;
+}
+.mx_MFileBody_download .mx_MFileBody_download_icon {
+ width: 12px;
+ height: 12px;
+ -webkit-mask-size: 12px;
+ mask-size: 12px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-image: url(../../img/download.4f331f0.svg);
+ mask-image: url(../../img/download.4f331f0.svg);
+ background-color: #0dbd8b;
+ display: inline-block;
+}
+.mx_MFileBody_download a {
+ color: #0dbd8b;
+ text-decoration: none;
+ cursor: pointer;
+}
+.mx_MFileBody_download object {
+ margin-left: -16px;
+ padding-right: 4px;
+ margin-top: -4px;
+ vertical-align: middle;
+ pointer-events: none;
+}
+.mx_MFileBody_download iframe {
+ margin: 0;
+ padding: 0;
+ border: none;
+ width: 100%;
+ height: 1.5em;
+}
+.mx_MFileBody_info {
+ background-color: #e3e8f0;
+ border-radius: 12px;
+ width: 243px;
+ padding: 6px 12px;
+ color: #737d8c;
+}
+.mx_MFileBody_info .mx_MFileBody_info_icon {
+ background-color: #fff;
+ border-radius: 20px;
+ display: inline-block;
+ width: 32px;
+ height: 32px;
+ position: relative;
+ vertical-align: middle;
+ margin-right: 12px;
+}
+.mx_MFileBody_info .mx_MFileBody_info_icon:before {
+ content: "";
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: cover;
+ mask-size: cover;
+ -webkit-mask-image: url(../icons/attach.svg);
+ mask-image: url(../icons/attach.svg);
+ background-color: #737d8c;
+ width: 13px;
+ height: 15px;
+ position: absolute;
+ top: 8px;
+ left: 9px;
+}
+.mx_MFileBody_info .mx_MFileBody_info_filename {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ display: inline-block;
+ width: calc(100% - 44px);
+ vertical-align: middle;
+}
+.mx_MImageBody {
+ display: block;
+ margin-right: 34px;
+}
+.mx_MImageBody_thumbnail {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ border-radius: 4px;
+}
+.mx_MImageBody_thumbnail_container {
+ overflow: hidden;
+ position: relative;
+}
+.mx_MImageBody_thumbnail_spinner {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+}
+.mx_MImageBody_thumbnail_spinner > * {
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+}
+.mx_MImageBody_gifLabel {
+ position: absolute;
+ display: block;
+ top: 0;
+ left: 14px;
+ padding: 5px;
+ border-radius: 5px;
+ background: rgba(0, 0, 0, 0.7);
+ border: 2px solid rgba(0, 0, 0, 0.2);
+ color: #fff;
+ pointer-events: none;
+}
+.mx_HiddenImagePlaceholder {
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ text-align: center;
+ cursor: pointer;
+ background-color: #f3f8fd;
+}
+.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button {
+ color: #0dbd8b;
+}
+.mx_HiddenImagePlaceholder
+ .mx_HiddenImagePlaceholder_button
+ span.mx_HiddenImagePlaceholder_eye {
+ margin-right: 8px;
+ background-color: #0dbd8b;
+ -webkit-mask-image: url(../../img/feather-customised/eye.52aa0d2.svg);
+ mask-image: url(../../img/feather-customised/eye.52aa0d2.svg);
+ display: inline-block;
+ width: 18px;
+ height: 14px;
+}
+.mx_HiddenImagePlaceholder
+ .mx_HiddenImagePlaceholder_button
+ span:not(.mx_HiddenImagePlaceholder_eye) {
+ vertical-align: text-bottom;
+}
+.mx_EventTile:hover .mx_HiddenImagePlaceholder {
+ background-color: #fff;
+}
+.mx_MJitsiWidgetEvent:before {
+ background-color: #91a1c0;
+ -webkit-mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
+ mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
+}
+.mx_MNoticeBody {
+ white-space: pre-wrap;
+ opacity: 0.6;
+}
+.mx_MStickerBody_wrapper {
+ padding: 20px 0;
+}
+.mx_MStickerBody_tooltip {
+ position: absolute;
+ top: 50%;
+}
+.mx_MStickerBody_hidden {
+ max-width: 220px;
+ text-decoration: none;
+ text-align: center;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_MTextBody {
+ white-space: pre-wrap;
+}
+span.mx_MVideoBody video.mx_MVideoBody {
+ max-width: 100%;
+ height: auto;
+ border-radius: 4px;
+}
+.mx_MVoiceMessageBody {
+ display: inline-block;
+}
+.mx_MessageActionBar {
+ position: absolute;
+ visibility: hidden;
+ cursor: pointer;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ height: 24px;
+ line-height: 2.4rem;
+ border-radius: 4px;
+ background: #fff;
+ top: -26px;
+ right: 8px;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ z-index: 1;
+}
+.mx_MessageActionBar:before {
+ content: "";
+ position: absolute;
+ width: calc(66px + 100%);
+ height: calc(20px + 100%);
+ top: -12px;
+ left: -58px;
+ z-index: -1;
+ cursor: auto;
+}
+.mx_MessageActionBar > * {
+ white-space: nowrap;
+ display: inline-block;
+ position: relative;
+ border: 1px solid #e9edf1;
+ margin-left: -1px;
+}
+.mx_MessageActionBar > :hover {
+ border-color: #ddd;
+ z-index: 1;
+}
+.mx_MessageActionBar > :first-child {
+ border-radius: 3px 0 0 3px;
+}
+.mx_MessageActionBar > :last-child {
+ border-radius: 0 3px 3px 0;
+}
+.mx_MessageActionBar > :only-child {
+ border-radius: 3px;
+}
+.mx_MessageActionBar_maskButton {
+ width: 27px;
+}
+.mx_MessageActionBar_maskButton:after {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ -webkit-mask-size: 18px;
+ mask-size: 18px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ background-color: #2e2f32;
+}
+.mx_MessageActionBar_reactButton:after {
+ -webkit-mask-image: url(../../img/element-icons/room/message-bar/emoji.af14771.svg);
+ mask-image: url(../../img/element-icons/room/message-bar/emoji.af14771.svg);
+}
+.mx_MessageActionBar_replyButton:after {
+ -webkit-mask-image: url(../../img/element-icons/room/message-bar/reply.5812741.svg);
+ mask-image: url(../../img/element-icons/room/message-bar/reply.5812741.svg);
+}
+.mx_MessageActionBar_editButton:after {
+ -webkit-mask-image: url(../../img/element-icons/room/message-bar/edit.688678e.svg);
+ mask-image: url(../../img/element-icons/room/message-bar/edit.688678e.svg);
+}
+.mx_MessageActionBar_optionsButton:after {
+ -webkit-mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
+ mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
+}
+.mx_MessageActionBar_resendButton:after {
+ -webkit-mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
+ mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
+}
+.mx_MessageActionBar_cancelButton:after {
+ -webkit-mask-image: url(../../img/element-icons/trashcan.26f6c28.svg);
+ mask-image: url(../../img/element-icons/trashcan.26f6c28.svg);
+}
+.mx_MessageTimestamp {
+ color: #acacac;
+ font-size: 1rem;
+ -webkit-font-feature-settings: "tnum";
+ font-feature-settings: "tnum";
+ font-variant-numeric: tabular-nums;
+}
+.mx_MjolnirBody {
+ opacity: 0.4;
+}
+.mx_ReactionsRow {
+ margin: 6px 0;
+ color: #2e2f32;
+}
+.mx_ReactionsRow .mx_ReactionsRow_addReactionButton {
+ position: relative;
+ display: inline-block;
+ visibility: hidden;
+ width: 24px;
+ height: 24px;
+ vertical-align: middle;
+ margin-left: 4px;
+}
+.mx_ReactionsRow .mx_ReactionsRow_addReactionButton:before {
+ content: "";
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ -webkit-mask-size: 16px;
+ mask-size: 16px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ background-color: #8d99a5;
+ -webkit-mask-image: url(../../img/element-icons/room/message-bar/emoji.af14771.svg);
+ mask-image: url(../../img/element-icons/room/message-bar/emoji.af14771.svg);
+}
+.mx_ReactionsRow
+ .mx_ReactionsRow_addReactionButton.mx_ReactionsRow_addReactionButton_active {
+ visibility: visible;
+}
+.mx_ReactionsRow
+ .mx_ReactionsRow_addReactionButton.mx_ReactionsRow_addReactionButton_active:before,
+.mx_ReactionsRow .mx_ReactionsRow_addReactionButton:hover:before {
+ background-color: #2e2f32;
+}
+.mx_EventTile:hover .mx_ReactionsRow_addReactionButton {
+ visibility: visible;
+}
+.mx_ReactionsRow_showAll {
+ text-decoration: none;
+ font-size: 1.2rem;
+ line-height: 2rem;
+ margin-left: 4px;
+ vertical-align: middle;
+}
+.mx_ReactionsRow_showAll:link,
+.mx_ReactionsRow_showAll:visited {
+ color: #8d99a5;
+}
+.mx_ReactionsRow_showAll:hover {
+ color: #2e2f32;
+}
+.mx_ReactionsRowButton {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ line-height: 2rem;
+ margin-right: 6px;
+ padding: 1px 6px;
+ border: 1px solid #e9edf1;
+ border-radius: 10px;
+ background-color: #f3f8fd;
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ vertical-align: middle;
+}
+.mx_ReactionsRowButton:hover {
+ border-color: #ddd;
+}
+.mx_ReactionsRowButton.mx_ReactionsRowButton_selected {
+ background-color: #e9fff9;
+ border-color: #0dbd8b;
+}
+.mx_ReactionsRowButton.mx_AccessibleButton_disabled {
+ cursor: not-allowed;
+}
+.mx_ReactionsRowButton .mx_ReactionsRowButton_content {
+ max-width: 100px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ padding-right: 4px;
+}
+.mx_RedactedBody {
+ white-space: pre-wrap;
+ color: #61708b;
+ vertical-align: middle;
+ padding-left: 20px;
+ position: relative;
+}
+.mx_RedactedBody:before {
+ height: 14px;
+ width: 14px;
+ background-color: #61708b;
+ -webkit-mask-image: url(../icons/trash.svg);
+ mask-image: url(../icons/trash.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ content: "";
+ position: absolute;
+ top: 1px;
+ left: 0;
+}
+.mx_RoomAvatarEvent {
+ opacity: 0.5;
+ overflow-y: hidden;
+}
+.mx_RoomAvatarEvent_avatar {
+ display: inline;
+ position: relative;
+ top: 5px;
+}
+.mx_SenderProfile_name {
+ font-weight: 600;
+}
+.mx_TextualEvent {
+ opacity: 0.5;
+ overflow-y: hidden;
+}
+.mx_UnknownBody {
+ white-space: pre-wrap;
+}
+.mx_EventTile_content.mx_ViewSourceEvent {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ opacity: 0.6;
+ font-size: 1.2rem;
+}
+.mx_EventTile_content.mx_ViewSourceEvent code,
+.mx_EventTile_content.mx_ViewSourceEvent pre {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+}
+.mx_EventTile_content.mx_ViewSourceEvent pre {
+ line-height: 1.2;
+ margin: 3.5px 0;
+}
+.mx_EventTile_content.mx_ViewSourceEvent .mx_ViewSourceEvent_toggle {
+ width: 12px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: 0 center;
+ mask-position: 0 center;
+ -webkit-mask-size: auto 12px;
+ mask-size: auto 12px;
+ visibility: hidden;
+ background-color: #0dbd8b;
+ -webkit-mask-image: url(../../img/feather-customised/maximise.dc32127.svg);
+ mask-image: url(../../img/feather-customised/maximise.dc32127.svg);
+}
+.mx_EventTile_content.mx_ViewSourceEvent.mx_ViewSourceEvent_expanded
+ .mx_ViewSourceEvent_toggle {
+ -webkit-mask-position: 0 bottom;
+ mask-position: 0 bottom;
+ margin-bottom: 7px;
+ -webkit-mask-image: url(../../img/feather-customised/minimise.aec9142.svg);
+ mask-image: url(../../img/feather-customised/minimise.aec9142.svg);
+}
+.mx_EventTile_content.mx_ViewSourceEvent:hover .mx_ViewSourceEvent_toggle {
+ visibility: visible;
+}
+.mx_cryptoEvent.mx_cryptoEvent_icon:before {
+ background-color: #fff;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 90%;
+ mask-size: 90%;
+}
+.mx_cryptoEvent.mx_cryptoEvent_icon:after,
+.mx_cryptoEvent.mx_cryptoEvent_icon:before {
+ -webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
+ mask-image: url(../../img/e2e/normal.76f0c09.svg);
+}
+.mx_cryptoEvent.mx_cryptoEvent_icon:after {
+ background-color: #91a1c0;
+}
+.mx_cryptoEvent.mx_cryptoEvent_icon_verified:after {
+ -webkit-mask-image: url(../../img/e2e/verified.5be6c9f.svg);
+ mask-image: url(../../img/e2e/verified.5be6c9f.svg);
+ background-color: #0dbd8b;
+}
+.mx_cryptoEvent.mx_cryptoEvent_icon_warning:after {
+ -webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
+ mask-image: url(../../img/e2e/warning.78bb264.svg);
+ background-color: #ff4b55;
+}
+.mx_cryptoEvent .mx_cryptoEvent_buttons,
+.mx_cryptoEvent .mx_cryptoEvent_state {
+ grid-column: 3;
+ grid-row: 1/3;
+}
+.mx_cryptoEvent .mx_cryptoEvent_buttons {
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_cryptoEvent .mx_cryptoEvent_state {
+ width: 130px;
+ padding: 10px 20px;
+ margin: auto 0;
+ text-align: center;
+ color: #8d99a5;
+ overflow-wrap: break-word;
+ font-size: 1.2rem;
+}
+.mx_BaseCard {
+ padding: 0 8px;
+ overflow: hidden;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+}
+.mx_BaseCard .mx_BaseCard_header {
+ margin: 8px 0;
+}
+.mx_BaseCard .mx_BaseCard_header > h2 {
+ margin: 0 44px;
+ font-size: 1.8rem;
+ font-weight: 600;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back,
+.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close {
+ position: absolute;
+ background-color: rgba(141, 151, 165, 0.2);
+ height: 20px;
+ width: 20px;
+ margin: 12px;
+ top: 0;
+ border-radius: 10px;
+}
+.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back:before,
+.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close:before {
+ content: "";
+ position: absolute;
+ height: 20px;
+ width: 20px;
+ top: 0;
+ left: 0;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ background-color: #91a1c0;
+}
+.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back {
+ left: 0;
+}
+.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back:before {
+ -webkit-transform: rotate(90deg);
+ transform: rotate(90deg);
+ -webkit-mask-size: 22px;
+ mask-size: 22px;
+ -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+ mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+}
+.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close {
+ right: 0;
+}
+.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close:before {
+ -webkit-mask-image: url(../../img/icons-close.11ff07c.svg);
+ mask-image: url(../../img/icons-close.11ff07c.svg);
+ -webkit-mask-size: 8px;
+ mask-size: 8px;
+}
+.mx_BaseCard .mx_AutoHideScrollbar {
+ margin-right: -8px;
+ padding-right: 8px;
+ min-height: 0;
+ width: 100%;
+ height: 100%;
+}
+.mx_BaseCard .mx_BaseCard_Group {
+ margin: 20px 0 16px;
+}
+.mx_BaseCard .mx_BaseCard_Group > * {
+ margin-left: 12px;
+ margin-right: 12px;
+}
+.mx_BaseCard .mx_BaseCard_Group > h1 {
+ color: #8d99a5;
+ font-size: 1.2rem;
+ font-weight: 500;
+}
+.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button {
+ padding: 10px 38px 10px 12px;
+ margin: 0;
+ position: relative;
+ font-size: 1.3rem;
+ height: 20px;
+ line-height: 20px;
+ border-radius: 8px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button:hover {
+ background-color: rgba(141, 151, 165, 0.1);
+}
+.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button:after {
+ content: "";
+ position: absolute;
+ top: 10px;
+ right: 6px;
+ height: 20px;
+ width: 20px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ background-color: #c1c6cd;
+ -webkit-transform: rotate(270deg);
+ transform: rotate(270deg);
+ -webkit-mask-size: 20px;
+ mask-size: 20px;
+ -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+ mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+}
+.mx_BaseCard
+ .mx_BaseCard_Group
+ .mx_BaseCard_Button.mx_AccessibleButton_disabled {
+ padding-right: 12px;
+}
+.mx_BaseCard
+ .mx_BaseCard_Group
+ .mx_BaseCard_Button.mx_AccessibleButton_disabled:after {
+ content: unset;
+}
+.mx_BaseCard .mx_BaseCard_footer {
+ padding-top: 4px;
+ text-align: center;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-pack: distribute;
+ justify-content: space-around;
+}
+.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_kind_secondary {
+ color: #737d8c;
+ background-color: rgba(141, 151, 165, 0.2);
+ font-weight: 600;
+ font-size: 1.4rem;
+}
+.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_disabled {
+ cursor: not-allowed;
+}
+.mx_FilePanel.mx_BaseCard,
+.mx_MemberList.mx_BaseCard,
+.mx_NotificationPanel.mx_BaseCard,
+.mx_UserInfo.mx_BaseCard {
+ padding: 32px 0 0;
+}
+.mx_FilePanel.mx_BaseCard .mx_AutoHideScrollbar,
+.mx_MemberList.mx_BaseCard .mx_AutoHideScrollbar,
+.mx_NotificationPanel.mx_BaseCard .mx_AutoHideScrollbar,
+.mx_UserInfo.mx_BaseCard .mx_AutoHideScrollbar {
+ margin-right: unset;
+ padding-right: unset;
+}
+.mx_EncryptionInfo_spinner .mx_Spinner {
+ margin-top: 25px;
+ margin-bottom: 15px;
+}
+.mx_EncryptionInfo_spinner {
+ text-align: center;
+}
+.mx_RoomSummaryCard .mx_BaseCard_header {
+ text-align: center;
+ margin-top: 20px;
+}
+.mx_RoomSummaryCard .mx_BaseCard_header h2 {
+ font-weight: 600;
+ font-size: 1.8rem;
+ margin: 12px 0 4px;
+}
+.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_alias {
+ font-size: 1.3rem;
+ color: #737d8c;
+}
+.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_alias,
+.mx_RoomSummaryCard .mx_BaseCard_header h2 {
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+}
+.mx_RoomSummaryCard
+ .mx_BaseCard_header
+ .mx_RoomSummaryCard_avatar
+ .mx_RoomSummaryCard_e2ee {
+ display: inline-block;
+ position: relative;
+ width: 54px;
+ height: 54px;
+ border-radius: 50%;
+ background-color: #737d8c;
+ margin-top: -3px;
+ margin-left: -10px;
+ border: 3px solid #f2f5f8;
+}
+.mx_RoomSummaryCard
+ .mx_BaseCard_header
+ .mx_RoomSummaryCard_avatar
+ .mx_RoomSummaryCard_e2ee:before {
+ content: "";
+ position: absolute;
+ top: 13px;
+ left: 13px;
+ height: 28px;
+ width: 28px;
+ -webkit-mask-size: cover;
+ mask-size: cover;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-image: url(../../img/e2e/disabled.6c5c6be.svg);
+ mask-image: url(../../img/e2e/disabled.6c5c6be.svg);
+ background-color: #fff;
+}
+.mx_RoomSummaryCard
+ .mx_BaseCard_header
+ .mx_RoomSummaryCard_avatar
+ .mx_RoomSummaryCard_e2ee_normal {
+ background-color: #424446;
+}
+.mx_RoomSummaryCard
+ .mx_BaseCard_header
+ .mx_RoomSummaryCard_avatar
+ .mx_RoomSummaryCard_e2ee_normal:before {
+ -webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
+ mask-image: url(../../img/e2e/normal.76f0c09.svg);
+}
+.mx_RoomSummaryCard
+ .mx_BaseCard_header
+ .mx_RoomSummaryCard_avatar
+ .mx_RoomSummaryCard_e2ee_verified {
+ background-color: #0dbd8b;
+}
+.mx_RoomSummaryCard
+ .mx_BaseCard_header
+ .mx_RoomSummaryCard_avatar
+ .mx_RoomSummaryCard_e2ee_verified:before {
+ -webkit-mask-image: url(../../img/e2e/verified.5be6c9f.svg);
+ mask-image: url(../../img/e2e/verified.5be6c9f.svg);
+}
+.mx_RoomSummaryCard
+ .mx_BaseCard_header
+ .mx_RoomSummaryCard_avatar
+ .mx_RoomSummaryCard_e2ee_warning {
+ background-color: #ff4b55;
+}
+.mx_RoomSummaryCard
+ .mx_BaseCard_header
+ .mx_RoomSummaryCard_avatar
+ .mx_RoomSummaryCard_e2ee_warning:before {
+ -webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
+ mask-image: url(../../img/e2e/warning.78bb264.svg);
+}
+.mx_RoomSummaryCard .mx_RoomSummaryCard_aboutGroup .mx_RoomSummaryCard_Button {
+ padding-left: 44px;
+}
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_aboutGroup
+ .mx_RoomSummaryCard_Button:before {
+ content: "";
+ position: absolute;
+ top: 8px;
+ left: 10px;
+ height: 24px;
+ width: 24px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ background-color: #c1c6cd;
+}
+.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button {
+ padding: 0;
+ height: auto;
+ color: #8d99a5;
+}
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button
+ .mx_RoomSummaryCard_icon_app {
+ padding: 10px 48px 10px 12px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button
+ .mx_RoomSummaryCard_icon_app
+ .mx_BaseAvatar_image {
+ vertical-align: top;
+ margin-right: 12px;
+}
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button
+ .mx_RoomSummaryCard_icon_app
+ span {
+ color: #2e2f32;
+}
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button
+ .mx_RoomSummaryCard_app_options,
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button
+ .mx_RoomSummaryCard_app_pinToggle {
+ position: absolute;
+ top: 0;
+ height: 100%;
+ width: 24px;
+ padding: 12px 4px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ min-width: 24px;
+}
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button
+ .mx_RoomSummaryCard_app_options:hover:after,
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button
+ .mx_RoomSummaryCard_app_pinToggle:hover:after {
+ content: "";
+ position: absolute;
+ height: 24px;
+ width: 24px;
+ top: 8px;
+ left: 0;
+ border-radius: 12px;
+ background-color: rgba(141, 151, 165, 0.1);
+}
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button
+ .mx_RoomSummaryCard_app_options:before,
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button
+ .mx_RoomSummaryCard_app_pinToggle:before {
+ content: "";
+ position: absolute;
+ height: 16px;
+ width: 16px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 16px;
+ mask-size: 16px;
+ background-color: #c1c6cd;
+}
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button
+ .mx_RoomSummaryCard_app_pinToggle {
+ right: 24px;
+}
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button
+ .mx_RoomSummaryCard_app_pinToggle:before {
+ -webkit-mask-image: url(../../img/element-icons/room/pin-upright.65783fb.svg);
+ mask-image: url(../../img/element-icons/room/pin-upright.65783fb.svg);
+}
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button
+ .mx_RoomSummaryCard_app_options {
+ right: 48px;
+ display: none;
+}
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button
+ .mx_RoomSummaryCard_app_options:before {
+ -webkit-mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
+ mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
+}
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button.mx_RoomSummaryCard_Button_pinned:after {
+ opacity: 0.2;
+}
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button.mx_RoomSummaryCard_Button_pinned
+ .mx_RoomSummaryCard_app_pinToggle:before {
+ background-color: #0dbd8b;
+}
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button:hover
+ .mx_RoomSummaryCard_icon_app {
+ padding-right: 72px;
+}
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button:hover
+ .mx_RoomSummaryCard_app_options {
+ display: unset;
+}
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button:before {
+ content: unset;
+}
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button:after {
+ top: 8px;
+ pointer-events: none;
+}
+.mx_RoomSummaryCard .mx_AccessibleButton_kind_link {
+ padding: 0;
+ margin-top: 12px;
+ margin-bottom: 12px;
+ font-size: 1.3rem;
+ font-weight: 600;
+}
+.mx_RoomSummaryCard_icon_people:before {
+ -webkit-mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
+ mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
+}
+.mx_RoomSummaryCard_icon_files:before {
+ -webkit-mask-image: url(../../img/element-icons/room/files.5709c0c.svg);
+ mask-image: url(../../img/element-icons/room/files.5709c0c.svg);
+}
+.mx_RoomSummaryCard_icon_share:before {
+ -webkit-mask-image: url(../../img/element-icons/room/share.54dc3fb.svg);
+ mask-image: url(../../img/element-icons/room/share.54dc3fb.svg);
+}
+.mx_RoomSummaryCard_icon_settings:before {
+ -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
+ mask-image: url(../../img/element-icons/settings.6b381af.svg);
+}
+.mx_UserInfo.mx_BaseCard {
+ padding-top: 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ overflow-y: auto;
+ font-size: 1.2rem;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_cancel {
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ border-radius: 4px;
+ background-color: #f2f5f8;
+ margin: 9px;
+ z-index: 1;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_cancel div {
+ height: 16px;
+ width: 16px;
+ padding: 4px;
+ -webkit-mask-image: url(../../img/minimise.871d2de.svg);
+ mask-image: url(../../img/minimise.871d2de.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: 7px center;
+ mask-position: 7px center;
+ background-color: #91a1c0;
+}
+.mx_UserInfo.mx_BaseCard h2 {
+ font-size: 1.8rem;
+ font-weight: 600;
+ margin: 18px 0 0;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_container {
+ padding: 8px 16px;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_separator {
+ border-bottom: 1px solid rgba(46, 47, 50, 0.1);
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetailsContainer {
+ padding-top: 0;
+ padding-bottom: 0;
+ margin-bottom: 8px;
+}
+.mx_UserInfo.mx_BaseCard .mx_RoomTile_nameContainer {
+ width: 154px;
+}
+.mx_UserInfo.mx_BaseCard .mx_RoomTile_badge {
+ display: none;
+}
+.mx_UserInfo.mx_BaseCard .mx_RoomTile_name {
+ width: 160px;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar {
+ margin: 24px 32px 0;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar > div {
+ max-width: 30vh;
+ margin: 0 auto;
+ -webkit-transition: 0.5s;
+ transition: 0.5s;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar > div > div {
+ padding-top: 100%;
+ position: relative;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar > div > div * {
+ border-radius: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100% !important;
+ height: 100% !important;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar .mx_BaseAvatar_initial {
+ z-index: 1;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ font-size: 6rem !important;
+ width: 100% !important;
+ -webkit-transition: font-size 0.5s;
+ transition: font-size 0.5s;
+}
+.mx_UserInfo.mx_BaseCard
+ .mx_UserInfo_avatar
+ .mx_BaseAvatar.mx_BaseAvatar_image {
+ cursor: -webkit-zoom-in;
+ cursor: zoom-in;
+}
+.mx_UserInfo.mx_BaseCard h3 {
+ text-transform: uppercase;
+ color: #8d99a5;
+ font-weight: 600;
+ font-size: 1.2rem;
+ margin: 4px 0;
+}
+.mx_UserInfo.mx_BaseCard p {
+ margin: 5px 0;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile {
+ text-align: center;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ font-size: 1.8rem;
+ line-height: 2.5rem;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 span {
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ overflow: hidden;
+ word-break: break-all;
+ text-overflow: ellipsis;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 .mx_E2EIcon {
+ margin-top: 3px;
+ margin-right: 4px;
+ min-width: 18px;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_UserInfo_profileStatus {
+ margin-top: 12px;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField {
+ margin: 6px 0;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField,
+.mx_UserInfo.mx_BaseCard
+ .mx_UserInfo_memberDetails
+ .mx_UserInfo_profileField
+ .mx_UserInfo_roleDescription {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_UserInfo.mx_BaseCard
+ .mx_UserInfo_memberDetails
+ .mx_UserInfo_profileField
+ .mx_UserInfo_roleDescription {
+ margin: 11px 0 12px;
+}
+.mx_UserInfo.mx_BaseCard
+ .mx_UserInfo_memberDetails
+ .mx_UserInfo_profileField
+ .mx_Field {
+ margin: 0;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_field {
+ cursor: pointer;
+ color: #0dbd8b;
+ line-height: 1.6rem;
+ margin: 8px 0;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_field.mx_UserInfo_destructive {
+ color: #ff4b55;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_statusMessage {
+ font-size: 1.1rem;
+ opacity: 0.5;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: clip;
+}
+.mx_UserInfo.mx_BaseCard .mx_AutoHideScrollbar {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator) {
+ padding-top: 16px;
+ padding-bottom: 0;
+}
+.mx_UserInfo.mx_BaseCard
+ .mx_UserInfo_container:not(.mx_UserInfo_separator)
+ > :not(h3) {
+ margin-left: 8px;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin: 8px 0;
+}
+.mx_UserInfo.mx_BaseCard
+ .mx_UserInfo_devices
+ .mx_UserInfo_device.mx_UserInfo_device_verified
+ .mx_UserInfo_device_trusted {
+ color: #0dbd8b;
+}
+.mx_UserInfo.mx_BaseCard
+ .mx_UserInfo_devices
+ .mx_UserInfo_device.mx_UserInfo_device_unverified
+ .mx_UserInfo_device_trusted {
+ color: #ff4b55;
+}
+.mx_UserInfo.mx_BaseCard
+ .mx_UserInfo_devices
+ .mx_UserInfo_device
+ .mx_UserInfo_device_name {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ margin-right: 5px;
+ word-break: break-word;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_E2EIcon {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ margin: 2px 5px 0 0;
+ width: 12px;
+ height: 12px;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_expand {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin-top: 11px;
+}
+.mx_UserInfo.mx_BaseCard .mx_AccessibleButton.mx_AccessibleButton_hasKind {
+ padding: 8px 18px;
+}
+.mx_UserInfo.mx_BaseCard
+ .mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary {
+ color: #0dbd8b;
+ background-color: rgba(3, 179, 129, 0.16);
+}
+.mx_UserInfo.mx_BaseCard
+ .mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger {
+ color: #ff4b55;
+ background-color: rgba(255, 75, 85, 0.16);
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_wideButton,
+.mx_UserInfo.mx_BaseCard .mx_VerificationShowSas .mx_AccessibleButton {
+ display: block;
+ margin: 16px 0 8px;
+}
+.mx_UserInfo.mx_BaseCard
+ .mx_VerificationShowSas
+ .mx_AccessibleButton
+ + .mx_AccessibleButton {
+ margin: 8px 0;
+}
+.mx_UserInfo.mx_UserInfo_smallAvatar .mx_UserInfo_avatar > div {
+ max-width: 72px;
+ margin: 0 auto;
+}
+.mx_UserInfo.mx_UserInfo_smallAvatar
+ .mx_UserInfo_avatar
+ .mx_BaseAvatar_initial {
+ font-size: 40px !important;
+}
+.mx_VerificationPanel_reciprocate_section .mx_E2EIcon,
+.mx_VerificationPanel_verified_section .mx_E2EIcon {
+ margin: 20px auto !important;
+}
+.mx_UserInfo .mx_EncryptionPanel_cancel {
+ -webkit-mask: url(../../img/feather-customised/cancel.23c2689.svg);
+ mask: url(../../img/feather-customised/cancel.23c2689.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: cover;
+ mask-size: cover;
+ width: 14px;
+ height: 14px;
+ background-color: #61708b;
+ cursor: pointer;
+ position: absolute;
+ z-index: 100;
+ top: 14px;
+ right: 14px;
+}
+.mx_UserInfo .mx_VerificationPanel_qrCode {
+ padding: 4px 4px 0;
+ background: #fff;
+ border-radius: 4px;
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+ max-width: 100%;
+ margin: 0 auto !important;
+}
+.mx_UserInfo .mx_VerificationPanel_qrCode canvas {
+ height: auto !important;
+ width: 100% !important;
+ max-width: 240px;
+}
+.mx_UserInfo .mx_VerificationPanel_reciprocate_section .mx_FormButton {
+ width: 100%;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ padding: 10px;
+ display: block;
+ margin: 10px 0;
+}
+.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions,
+.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ -webkit-box-align: stretch;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_CompleteSecurity_body
+ .mx_VerificationPanel_QRPhase_startOptions
+ > .mx_VerificationPanel_QRPhase_betweenText,
+.mx_Dialog
+ .mx_VerificationPanel_QRPhase_startOptions
+ > .mx_VerificationPanel_QRPhase_betweenText {
+ width: 50px;
+ vertical-align: middle;
+ text-align: center;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_CompleteSecurity_body
+ .mx_VerificationPanel_QRPhase_startOptions
+ .mx_VerificationPanel_QRPhase_startOption,
+.mx_Dialog
+ .mx_VerificationPanel_QRPhase_startOptions
+ .mx_VerificationPanel_QRPhase_startOption {
+ background-color: #f3f8fd;
+ border-radius: 10px;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ padding: 20px;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ position: relative;
+ max-width: 310px;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+}
+.mx_CompleteSecurity_body
+ .mx_VerificationPanel_QRPhase_startOptions
+ .mx_VerificationPanel_QRPhase_startOption
+ .mx_VerificationPanel_QRPhase_noQR,
+.mx_CompleteSecurity_body
+ .mx_VerificationPanel_QRPhase_startOptions
+ .mx_VerificationPanel_QRPhase_startOption
+ canvas,
+.mx_Dialog
+ .mx_VerificationPanel_QRPhase_startOptions
+ .mx_VerificationPanel_QRPhase_startOption
+ .mx_VerificationPanel_QRPhase_noQR,
+.mx_Dialog
+ .mx_VerificationPanel_QRPhase_startOptions
+ .mx_VerificationPanel_QRPhase_startOption
+ canvas {
+ width: 220px !important;
+ height: 220px !important;
+ background-color: #fff;
+ border-radius: 4px;
+ vertical-align: middle;
+ text-align: center;
+ padding: 10px;
+}
+.mx_CompleteSecurity_body
+ .mx_VerificationPanel_QRPhase_startOptions
+ .mx_VerificationPanel_QRPhase_startOption
+ > p,
+.mx_Dialog
+ .mx_VerificationPanel_QRPhase_startOptions
+ .mx_VerificationPanel_QRPhase_startOption
+ > p {
+ margin-top: 0;
+ font-weight: 700;
+}
+.mx_CompleteSecurity_body
+ .mx_VerificationPanel_QRPhase_startOptions
+ .mx_VerificationPanel_QRPhase_startOption
+ .mx_VerificationPanel_QRPhase_helpText,
+.mx_Dialog
+ .mx_VerificationPanel_QRPhase_startOptions
+ .mx_VerificationPanel_QRPhase_startOption
+ .mx_VerificationPanel_QRPhase_helpText {
+ font-size: 1.4rem;
+ margin: 30px 0;
+ text-align: center;
+}
+.mx_CompleteSecurity_body
+ .mx_VerificationPanel_verified_section
+ .mx_AccessibleButton,
+.mx_Dialog .mx_VerificationPanel_verified_section .mx_AccessibleButton {
+ float: right;
+}
+.mx_CompleteSecurity_body
+ .mx_VerificationPanel_reciprocate_section
+ .mx_AccessibleButton,
+.mx_Dialog .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton {
+ margin-left: 10px;
+ padding: 7px 40px;
+}
+.mx_CompleteSecurity_body
+ .mx_VerificationPanel_reciprocate_section
+ .mx_VerificationPanel_reciprocateButtons,
+.mx_Dialog
+ .mx_VerificationPanel_reciprocate_section
+ .mx_VerificationPanel_reciprocateButtons {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+}
+.mx_WidgetCard {
+ height: 100%;
+ display: contents;
+}
+.mx_WidgetCard .mx_AppTileFullWidth {
+ max-width: unset;
+ height: 100%;
+ border: 0;
+}
+.mx_WidgetCard .mx_BaseCard_header {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+}
+.mx_WidgetCard .mx_BaseCard_header > h2 {
+ margin-right: 0;
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+.mx_WidgetCard .mx_BaseCard_header .mx_WidgetCard_optionsButton {
+ position: relative;
+ margin-right: 44px;
+ height: 20px;
+ width: 20px;
+ min-width: 20px;
+ padding: 0;
+}
+.mx_WidgetCard .mx_BaseCard_header .mx_WidgetCard_optionsButton:before {
+ content: "";
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ top: 0;
+ left: 4px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
+ mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
+ background-color: #737d8c;
+}
+.mx_WidgetCard_maxPinnedTooltip {
+ background-color: #ff4b55;
+ color: #fff;
+}
+.mx_AliasSettings_editable {
+ border: 0;
+ border-bottom: 1px solid #c7c7c7;
+ padding: 0;
+ min-width: 240px;
+}
+.mx_AliasSettings_editable:focus {
+ border-bottom: 1px solid #0dbd8b;
+ outline: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.mx_AliasSettings summary {
+ cursor: pointer;
+ color: #0dbd8b;
+ font-weight: 600;
+ list-style: none;
+}
+.mx_AliasSettings summary::-webkit-details-marker {
+ display: none;
+}
+.mx_AliasSettings .mx_AliasSettings_localAliasHeader {
+ margin-top: 35px;
+}
+.mx_AppsDrawer {
+ margin: 5px 5px 5px 18px;
+ position: relative;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ overflow: hidden;
+}
+.mx_AppsDrawer .mx_AppsContainer_resizerHandleContainer {
+ width: 100%;
+ height: 10px;
+ margin-top: -3px;
+ display: block;
+ position: relative;
+}
+.mx_AppsDrawer .mx_AppsContainer_resizerHandle {
+ cursor: ns-resize;
+ width: 100% !important;
+ height: 100% !important;
+ position: absolute;
+ bottom: 0 !important;
+}
+.mx_AppsDrawer .mx_AppsContainer_resizerHandle:after {
+ content: "";
+ position: absolute;
+ border-radius: 3px;
+ top: 6px;
+ bottom: 0;
+ left: calc(50% - 32px);
+ right: calc(50% - 32px);
+}
+.mx_AppsDrawer:hover .mx_AppsContainer_resizerHandle:after {
+ opacity: 0.8;
+ background: #2e2f32;
+}
+.mx_AppsDrawer:hover .mx_ResizeHandle_horizontal:before {
+ position: absolute;
+ left: 3px;
+ top: 50%;
+ -webkit-transform: translateY(-50%);
+ transform: translateY(-50%);
+ height: 64px;
+ width: 4px;
+ border-radius: 4px;
+ content: "";
+ background-color: #2e2f32;
+ opacity: 0.8;
+}
+.mx_AppsContainer_resizer {
+ margin-bottom: 8px;
+}
+.mx_AppsContainer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: stretch;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ height: 100%;
+ width: 100%;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ min-height: 0;
+}
+.mx_AppsContainer .mx_AppTile:first-of-type {
+ border-left-width: 8px;
+ border-radius: 10px 0 0 10px;
+}
+.mx_AppsContainer .mx_AppTile:last-of-type {
+ border-right-width: 8px;
+ border-radius: 0 10px 10px 0;
+}
+.mx_AppsContainer .mx_ResizeHandle_horizontal {
+ position: relative;
+}
+.mx_AppsContainer .mx_ResizeHandle_horizontal > div {
+ width: 0;
+}
+.mx_AppsDrawer_2apps .mx_AppTile {
+ width: 50%;
+}
+.mx_AppsDrawer_2apps .mx_AppTile:nth-child(3) {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ width: 0 !important;
+ min-width: 240px !important;
+}
+.mx_AppsDrawer_3apps .mx_AppTile {
+ width: 33%;
+}
+.mx_AppsDrawer_3apps .mx_AppTile:nth-child(3) {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ width: 0 !important;
+ min-width: 240px !important;
+}
+.mx_AppTile {
+ width: 50%;
+ min-width: 240px;
+ border-color: #f2f5f8;
+ border-style: solid;
+ border-width: 8px 5px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ background-color: #f2f5f8;
+}
+.mx_AppTileFullWidth {
+ width: 100% !important;
+ border: 5px solid #f2f5f8;
+ border-radius: 8px;
+ background-color: #f2f5f8;
+}
+.mx_AppTile_mini,
+.mx_AppTileFullWidth {
+ margin: 0;
+ padding: 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_AppTile_mini {
+ width: 100%;
+ height: 200px;
+}
+.mx_AppTile .mx_AppTile_persistedWrapper,
+.mx_AppTile_mini .mx_AppTile_persistedWrapper,
+.mx_AppTileFullWidth .mx_AppTile_persistedWrapper {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+}
+.mx_AppTile_persistedWrapper div {
+ width: 100%;
+ height: 100%;
+}
+.mx_AppTileMenuBar {
+ margin: 0;
+ font-size: 1.2rem;
+ background-color: #f2f5f8;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ width: 100%;
+ padding-top: 2px;
+ padding-bottom: 8px;
+}
+.mx_AppTileMenuBarTitle {
+ line-height: 20px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.mx_AppTileMenuBarTitle .mx_WidgetAvatar {
+ margin-right: 12px;
+}
+.mx_AppTileMenuBarTitle > :last-child {
+ margin-left: 9px;
+}
+.mx_AppTileMenuBarWidgets {
+ float: right;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_AppTileMenuBar_iconButton {
+ width: 12px;
+ height: 12px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: 0 center;
+ mask-position: 0 center;
+ -webkit-mask-size: auto 12px;
+ mask-size: auto 12px;
+ background-color: #212121;
+ margin: 0 3px;
+}
+.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout {
+ -webkit-mask-image: url(../../img/feather-customised/widget/external-link.7ab6751.svg);
+ mask-image: url(../../img/feather-customised/widget/external-link.7ab6751.svg);
+}
+.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_menu {
+ -webkit-mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
+ mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
+}
+.mx_AppTileBody {
+ height: 100%;
+ background-color: #fff;
+}
+.mx_AppTileBody,
+.mx_AppTileBody_mini {
+ width: 100%;
+ overflow: hidden;
+ border-radius: 8px;
+}
+.mx_AppTileBody_mini {
+ height: 200px;
+}
+.mx_AppTile .mx_AppTileBody,
+.mx_AppTile_mini .mx_AppTileBody_mini,
+.mx_AppTileFullWidth .mx_AppTileBody {
+ height: inherit;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+}
+.mx_AppTileBody_mini iframe,
+.mx_AppTileBody iframe {
+ border: none;
+ width: 100%;
+ height: 100%;
+}
+.mx_AppTileBody iframe {
+ overflow: hidden;
+ padding: 0;
+ margin: 0;
+ display: block;
+}
+.mx_AppPermissionWarning {
+ text-align: center;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ height: 100%;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ font-size: 1.6rem;
+}
+.mx_AppPermissionWarning_row {
+ margin-bottom: 12px;
+}
+.mx_AppPermissionWarning_smallText {
+ font-size: 1.2rem;
+}
+.mx_AppPermissionWarning_bolder {
+ font-weight: 600;
+}
+.mx_AppPermissionWarning h4 {
+ margin: 0;
+ padding: 0;
+}
+.mx_AppPermissionWarning_helpIcon {
+ margin-top: 1px;
+ margin-right: 2px;
+ width: 10px;
+ height: 10px;
+ display: inline-block;
+}
+.mx_AppPermissionWarning_helpIcon:before {
+ display: inline-block;
+ background-color: #0dbd8b;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 12px;
+ mask-size: 12px;
+ width: 12px;
+ height: 12px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ content: "";
+ vertical-align: middle;
+ -webkit-mask-image: url(../../img/feather-customised/help-circle.03fb6cf.svg);
+ mask-image: url(../../img/feather-customised/help-circle.03fb6cf.svg);
+}
+.mx_AppPermissionWarning_tooltip {
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ background-color: #27303a;
+ color: #fff;
+ border: none;
+ border-radius: 3px;
+ padding: 6px 8px;
+}
+.mx_AppPermissionWarning_tooltip ul {
+ list-style-position: inside;
+ padding-left: 2px;
+ margin-left: 0;
+}
+.mx_AppLoading {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ font-weight: 700;
+ position: relative;
+ height: 100%;
+ background-color: #fff !important;
+ border-radius: 8px;
+}
+.mx_AppLoading .mx_Spinner {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+.mx_AppLoading_spinner_fadeIn {
+ -webkit-animation-fill-mode: backwards;
+ animation-fill-mode: backwards;
+ -webkit-animation-duration: 0.2s;
+ animation-duration: 0.2s;
+ -webkit-animation-delay: 0.5s;
+ animation-delay: 0.5s;
+ -webkit-animation-name: mx_AppLoading_spinner_fadeIn_animation;
+ animation-name: mx_AppLoading_spinner_fadeIn_animation;
+}
+@-webkit-keyframes mx_AppLoading_spinner_fadeIn_animation {
+ 0% {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+@keyframes mx_AppLoading_spinner_fadeIn_animation {
+ 0% {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+.mx_AppLoading iframe {
+ display: none;
+}
+.mx_AppsDrawer_resizing .mx_AppTile_persistedWrapper {
+ z-index: 1;
+}
+.mx_Autocomplete {
+ position: absolute;
+ bottom: 0;
+ z-index: 1001;
+ width: 100%;
+ background: #fff;
+ border: 1px solid transparent;
+ border-bottom: none;
+ border-radius: 8px 8px 0 0;
+ max-height: 50vh;
+ overflow: auto;
+ -webkit-box-shadow: 0 -16px 32px rgba(0, 0, 0, 0.04);
+ box-shadow: 0 -16px 32px rgba(0, 0, 0, 0.04);
+}
+.mx_Autocomplete_ProviderSection {
+ border-bottom: 1px solid transparent;
+}
+.mx_Autocomplete_Completion_block {
+ height: 34px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ padding: 0 12px;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ cursor: pointer;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #2e2f32;
+}
+.mx_Autocomplete_Completion_block * {
+ margin: 0 3px;
+}
+.mx_Autocomplete_Completion_pill {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ border-radius: 2rem;
+ height: 3.4rem;
+ padding: 0.4rem;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ cursor: pointer;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #2e2f32;
+}
+.mx_Autocomplete_Completion_pill > * {
+ margin-right: 0.3rem;
+}
+.mx_Autocomplete_Completion_subtitle {
+ font-style: italic;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+}
+.mx_Autocomplete_Completion_description {
+ color: grey;
+}
+.mx_Autocomplete_Completion_container_pill {
+ margin: 12px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-flow: wrap;
+ flex-flow: wrap;
+}
+.mx_Autocomplete_Completion_container_truncate
+ .mx_Autocomplete_Completion_description,
+.mx_Autocomplete_Completion_container_truncate
+ .mx_Autocomplete_Completion_subtitle,
+.mx_Autocomplete_Completion_container_truncate
+ .mx_Autocomplete_Completion_title {
+ max-width: 150px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.mx_Autocomplete_Completion.selected,
+.mx_Autocomplete_Completion:hover {
+ background: #f2f5f8;
+ outline: none;
+}
+.mx_Autocomplete_provider_name {
+ margin: 12px;
+ color: #2e2f32;
+ font-weight: 400;
+ opacity: 0.4;
+}
+.m_RoomView_auxPanel_stateViews {
+ padding: 5px 5px 5px 19px;
+ border-bottom: 1px solid transparent;
+}
+.m_RoomView_auxPanel_stateViews_span a {
+ text-decoration: none;
+ color: inherit;
+}
+.m_RoomView_auxPanel_stateViews_span[data-severity="warning"] {
+ font-weight: 700;
+ color: orange;
+}
+.m_RoomView_auxPanel_stateViews_span[data-severity="alert"] {
+ font-weight: 700;
+ color: red;
+}
+.m_RoomView_auxPanel_stateViews_span[data-severity="normal"] {
+ font-weight: 400;
+}
+.m_RoomView_auxPanel_stateViews_span[data-severity="notice"] {
+ font-weight: 400;
+ color: #a2a2a2;
+}
+.m_RoomView_auxPanel_stateViews_delim {
+ padding: 0 5px;
+ color: #a2a2a2;
+}
+.mx_BasicMessageComposer {
+ position: relative;
+}
+.mx_BasicMessageComposer
+ .mx_BasicMessageComposer_inputEmpty
+ > :first-child:before {
+ content: var(--placeholder);
+ opacity: 0.333;
+ width: 0;
+ height: 0;
+ overflow: visible;
+ display: inline-block;
+ pointer-events: none;
+ white-space: nowrap;
+}
+@-webkit-keyframes visualbell {
+ 0% {
+ background-color: #faa;
+ }
+ to {
+ background-color: #fff;
+ }
+}
+.mx_BasicMessageComposer.mx_BasicMessageComposer_input_error {
+ -webkit-animation: visualbell 0.2s;
+ animation: visualbell 0.2s;
+}
+.mx_BasicMessageComposer .mx_BasicMessageComposer_input {
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ outline: none;
+ overflow-x: hidden;
+}
+.mx_BasicMessageComposer
+ .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar
+ span.mx_RoomPill,
+.mx_BasicMessageComposer
+ .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar
+ span.mx_UserPill {
+ position: relative;
+}
+.mx_BasicMessageComposer
+ .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar
+ span.mx_RoomPill:before,
+.mx_BasicMessageComposer
+ .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar
+ span.mx_UserPill:before {
+ content: var(--avatar-letter);
+ width: 1.6rem;
+ height: 1.6rem;
+ margin-right: 0.24rem;
+ background: var(--avatar-background), #fff;
+ color: #fff;
+ background-repeat: no-repeat;
+ background-size: 1.6rem;
+ border-radius: 1.6rem;
+ text-align: center;
+ font-weight: 400;
+ line-height: 1.6rem;
+ font-size: 1.04rem;
+}
+.mx_BasicMessageComposer
+ .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_disabled {
+ pointer-events: none;
+}
+.mx_BasicMessageComposer .mx_BasicMessageComposer_AutoCompleteWrapper {
+ position: relative;
+ height: 0;
+}
+.mx_E2EIcon {
+ width: 16px;
+ height: 16px;
+ margin: 0 9px;
+ position: relative;
+ display: block;
+}
+.mx_E2EIcon_normal:after,
+.mx_E2EIcon_normal:before,
+.mx_E2EIcon_verified:after,
+.mx_E2EIcon_verified:before,
+.mx_E2EIcon_warning:after,
+.mx_E2EIcon_warning:before {
+ content: "";
+ display: block;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+}
+.mx_E2EIcon:before {
+ background-color: #fff;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 90%;
+ mask-size: 90%;
+}
+.mx_E2EIcon:before,
+.mx_E2EIcon_bordered {
+ -webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
+ mask-image: url(../../img/e2e/normal.76f0c09.svg);
+}
+.mx_E2EIcon_bordered {
+ background-color: #f3f8fd;
+}
+.mx_E2EIcon_bordered:after {
+ -webkit-mask-size: 75%;
+ mask-size: 75%;
+}
+.mx_E2EIcon_bordered:before {
+ -webkit-mask-size: 65%;
+ mask-size: 65%;
+}
+.mx_E2EIcon_warning:after {
+ -webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
+ mask-image: url(../../img/e2e/warning.78bb264.svg);
+ background-color: #ff4b55;
+}
+.mx_E2EIcon_normal:after {
+ -webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
+ mask-image: url(../../img/e2e/normal.76f0c09.svg);
+ background-color: #91a1c0;
+}
+.mx_E2EIcon_verified:after {
+ -webkit-mask-image: url(../../img/e2e/verified.5be6c9f.svg);
+ mask-image: url(../../img/e2e/verified.5be6c9f.svg);
+ background-color: #0dbd8b;
+}
+.mx_EditMessageComposer {
+ padding: 3px;
+ margin: -7px -10px -5px;
+ overflow: visible !important;
+}
+.mx_EditMessageComposer .mx_BasicMessageComposer_input {
+ border-radius: 4px;
+ border: 1px solid transparent;
+ background-color: #fff;
+ max-height: 200px;
+ padding: 3px 6px;
+}
+.mx_EditMessageComposer .mx_BasicMessageComposer_input:focus {
+ border-color: rgba(13, 189, 139, 0.5);
+}
+.mx_EditMessageComposer .mx_EditMessageComposer_buttons {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+ position: absolute;
+ left: 0;
+ background: #f3f8fd;
+ z-index: 100;
+ right: 0;
+ margin: 0 -110px 0 0;
+ padding: 5px 147px 5px 5px;
+}
+.mx_EditMessageComposer .mx_EditMessageComposer_buttons .mx_AccessibleButton {
+ margin-left: 5px;
+ padding: 5px 40px;
+}
+.mx_EventTile_last .mx_EditMessageComposer_buttons {
+ position: static;
+ margin-right: -147px;
+}
+.mx_EntityTile {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #2e2f32;
+ cursor: pointer;
+}
+.mx_EntityTile .mx_E2EIcon {
+ margin: 0;
+ position: absolute;
+ bottom: 2px;
+ right: 7px;
+}
+.mx_EntityTile:hover {
+ padding-right: 30px;
+ position: relative;
+}
+.mx_EntityTile:hover:before {
+ content: "";
+ position: absolute;
+ top: calc(50% - 8px);
+ right: -8px;
+ -webkit-mask: url(../../img/member_chevron.4163a20.png);
+ mask: url(../../img/member_chevron.4163a20.png);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ width: 16px;
+ height: 16px;
+ background-color: #91a1c0;
+}
+.mx_EntityTile .mx_PresenceLabel {
+ display: none;
+}
+.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_PresenceLabel {
+ display: block;
+}
+.mx_EntityTile_invite {
+ display: table-cell;
+ vertical-align: middle;
+ margin-left: 10px;
+ width: 26px;
+}
+.mx_EntityTile_avatar,
+.mx_GroupRoomTile_avatar {
+ padding: 4px 12px 4px 3px;
+ position: relative;
+}
+.mx_EntityTile_name,
+.mx_GroupRoomTile_name {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0;
+ overflow: hidden;
+ font-size: 1.4rem;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+.mx_EntityTile_details {
+ overflow: hidden;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+}
+.mx_EntityTile_ellipsis .mx_EntityTile_name,
+.mx_EntityTile_invitePlaceholder .mx_EntityTile_name {
+ font-style: italic;
+ color: #2e2f32;
+}
+.mx_EntityTile_offline_beenactive .mx_EntityTile_avatar,
+.mx_EntityTile_offline_beenactive .mx_EntityTile_name,
+.mx_EntityTile_unavailable .mx_EntityTile_avatar,
+.mx_EntityTile_unavailable .mx_EntityTile_name {
+ opacity: 0.5;
+}
+.mx_EntityTile_offline_neveractive .mx_EntityTile_avatar,
+.mx_EntityTile_offline_neveractive .mx_EntityTile_name,
+.mx_EntityTile_unknown .mx_EntityTile_avatar,
+.mx_EntityTile_unknown .mx_EntityTile_name {
+ opacity: 0.25;
+}
+.mx_EntityTile_subtext {
+ font-size: 1.1rem;
+ opacity: 0.5;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: clip;
+}
+.mx_EntityTile_power {
+ -webkit-padding-start: 6px;
+ padding-inline-start: 6px;
+ font-size: 1rem;
+ color: #8d99a5;
+ max-width: 6em;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+.mx_EntityTile:hover .mx_EntityTile_power {
+ display: none;
+}
+.mx_EventTile {
+ max-width: 100%;
+ clear: both;
+ padding-top: 18px;
+ font-size: 1.4rem;
+ position: relative;
+}
+.mx_EventTile.mx_EventTile_info {
+ padding-top: 1px;
+}
+.mx_EventTile_avatar {
+ top: 14px;
+ left: 8px;
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
+ top: 0.6rem;
+ left: 64px;
+}
+.mx_EventTile_continuation {
+ padding-top: 0 !important;
+}
+.mx_EventTile_continuation.mx_EventTile_isEditing {
+ padding-top: 5px !important;
+ margin-top: -5px;
+}
+.mx_EventTile_isEditing {
+ background-color: #f3f8fd;
+}
+.mx_EventTile .mx_SenderProfile {
+ color: #2e2f32;
+ font-size: 1.4rem;
+ display: inline-block;
+ overflow: hidden;
+ cursor: pointer;
+ padding-bottom: 0;
+ padding-top: 0;
+ margin: 0;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ max-width: calc(100% - 64px);
+}
+.mx_EventTile .mx_SenderProfile .mx_Flair {
+ opacity: 0.7;
+ margin-left: 5px;
+ display: inline-block;
+ vertical-align: top;
+ overflow: hidden;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.mx_EventTile .mx_SenderProfile .mx_Flair img {
+ vertical-align: -2px;
+ margin-right: 2px;
+ border-radius: 8px;
+}
+.mx_EventTile_isEditing .mx_MessageTimestamp {
+ visibility: hidden !important;
+}
+.mx_EventTile .mx_MessageTimestamp {
+ display: block;
+ visibility: hidden;
+ white-space: nowrap;
+ left: 0;
+ text-align: center;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.mx_EventTile_continuation .mx_EventTile_line {
+ clear: both;
+}
+.mx_EventTile_line,
+.mx_EventTile_reply {
+ position: relative;
+ padding-left: 64px;
+ border-radius: 4px;
+}
+.mx_EventListSummary .mx_EventTile_line,
+.mx_RoomView_timeline_rr_enabled .mx_EventTile_line {
+ margin-right: 110px;
+}
+.mx_EventTile_bubbleContainer {
+ display: grid;
+ grid-template-columns: 1fr 100px;
+}
+.mx_EventTile_bubbleContainer .mx_EventTile_line {
+ margin-right: 0;
+ grid-column: 1/3;
+ padding: 0 !important;
+}
+.mx_EventTile_bubbleContainer .mx_EventTile_msgOption {
+ grid-column: 2;
+}
+.mx_EventTile_reply {
+ margin-right: 10px;
+}
+.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
+ font-size: 48px !important;
+ line-height: 57px !important;
+}
+.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp {
+ visibility: visible;
+}
+.mx_EventTile_selected > div > a > .mx_MessageTimestamp {
+ left: 3px;
+ width: auto;
+}
+.mx_EventTile.focus-visible:focus-within > div > a > .mx_MessageTimestamp,
+.mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp,
+.mx_EventTile:hover > div > a > .mx_MessageTimestamp,
+.mx_EventTile_last > div > a > .mx_MessageTimestamp,
+.mx_IRCLayout
+ .mx_EventTile.focus-visible:focus-within
+ > a
+ > .mx_MessageTimestamp,
+.mx_IRCLayout
+ .mx_EventTile.mx_EventTile_actionBarFocused
+ > a
+ > .mx_MessageTimestamp,
+.mx_IRCLayout .mx_EventTile:hover > a > .mx_MessageTimestamp,
+.mx_IRCLayout .mx_EventTile_last > a > .mx_MessageTimestamp,
+.mx_IRCLayout .mx_ReplyThread .mx_EventTile > a > .mx_MessageTimestamp {
+ visibility: visible;
+}
+.mx_EventTile.focus-visible:focus-within .mx_MessageActionBar,
+.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,
+.mx_EventTile:hover .mx_MessageActionBar,
+[data-whatinput="keyboard"] .mx_EventTile:focus-within .mx_MessageActionBar {
+ visibility: visible;
+}
+.mx_EventTile_selected > .mx_EventTile_line {
+ border-left: 4px solid #0dbd8b;
+ padding-left: 60px;
+ background-color: #f6f7f8;
+}
+.mx_EventTile_highlight,
+.mx_EventTile_highlight .markdown-body {
+ color: #ff4b55;
+}
+.mx_EventTile_highlight .markdown-body .mx_EventTile_line,
+.mx_EventTile_highlight .mx_EventTile_line {
+ background-color: #fff8e3;
+}
+.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line {
+ padding-left: 78px;
+}
+.mx_EventTile.focus-visible:focus-within .mx_EventTile_line,
+.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line,
+.mx_EventTile:hover .mx_EventTile_line {
+ background-color: #f6f7f8;
+}
+.mx_EventTile_searchHighlight {
+ border-radius: 5px;
+ padding-left: 2px;
+ padding-right: 2px;
+ cursor: pointer;
+}
+.mx_EventTile_searchHighlight,
+.mx_EventTile_searchHighlight a {
+ background-color: #0dbd8b;
+ color: #fff;
+}
+.mx_EventTile_receiptSending:before,
+.mx_EventTile_receiptSent:before {
+ background-color: #8d99a5;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 14px;
+ mask-size: 14px;
+ width: 14px;
+ height: 14px;
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+}
+.mx_EventTile_receiptSent:before {
+ -webkit-mask-image: url(../../img/element-icons/circle-sent.5079cbe.svg);
+ mask-image: url(../../img/element-icons/circle-sent.5079cbe.svg);
+}
+.mx_EventTile_receiptSending:before {
+ -webkit-mask-image: url(../../img/element-icons/circle-sending.bcca6aa.svg);
+ mask-image: url(../../img/element-icons/circle-sending.bcca6aa.svg);
+}
+.mx_EventTile_contextual {
+ opacity: 0.4;
+}
+.mx_EventTile_msgOption {
+ float: right;
+ text-align: right;
+ position: relative;
+ width: 90px;
+ height: 1px;
+ margin-right: 10px;
+}
+.mx_EventTile_msgOption a {
+ text-decoration: none;
+}
+.mx_EventTile_readAvatars {
+ position: relative;
+ display: inline-block;
+ width: 14px;
+ height: 14px;
+ top: -2.2rem;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ z-index: 1;
+}
+.mx_EventTile_readAvatars .mx_BaseAvatar {
+ position: absolute;
+ display: inline-block;
+ height: 1.4rem;
+ width: 1.4rem;
+ -webkit-transition: left 0.1s ease-out, top 0.3s ease-out;
+ transition: left 0.1s ease-out, top 0.3s ease-out;
+ -webkit-transition: left var(--transition-short) ease-out,
+ top var(--transition-standard) ease-out;
+ transition: left var(--transition-short) ease-out,
+ top var(--transition-standard) ease-out;
+}
+.mx_EventTile_readAvatarRemainder {
+ color: #acacac;
+ font-size: 1.1rem;
+ position: absolute;
+}
+.mx_EventTile_content {
+ display: block;
+ overflow-y: hidden;
+ overflow-x: hidden;
+ margin-right: 34px;
+}
+.mx_EventTile_body {
+ overflow-y: hidden;
+}
+.mx_EventTile_spoiler {
+ cursor: pointer;
+}
+.mx_EventTile_spoiler_reason {
+ color: #acacac;
+ font-size: 1.1rem;
+}
+.mx_EventTile_spoiler_content {
+ -webkit-filter: blur(5px) saturate(0.1) sepia(1);
+ filter: blur(5px) saturate(0.1) sepia(1);
+ -webkit-transition-duration: 0.5s;
+ transition-duration: 0.5s;
+}
+.mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content {
+ -webkit-filter: none;
+ filter: none;
+}
+.mx_EventTile_e2eIcon {
+ position: absolute;
+ top: 6px;
+ left: 44px;
+ width: 14px;
+ height: 14px;
+ display: block;
+ bottom: 0;
+ right: 0;
+ opacity: 0.2;
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+.mx_EventTile_e2eIcon:after,
+.mx_EventTile_e2eIcon:before {
+ content: "";
+ display: block;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+}
+.mx_EventTile_e2eIcon:after,
+.mx_EventTile_e2eIcon:before {
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+.mx_EventTile_e2eIcon:before {
+ background-color: #fff;
+ -webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
+ mask-image: url(../../img/e2e/normal.76f0c09.svg);
+ -webkit-mask-size: 90%;
+ mask-size: 90%;
+}
+.mx_EventTile_e2eIcon_undecryptable:after,
+.mx_EventTile_e2eIcon_unverified:after {
+ -webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
+ mask-image: url(../../img/e2e/warning.78bb264.svg);
+ background-color: #ff4b55;
+}
+.mx_EventTile_e2eIcon_undecryptable,
+.mx_EventTile_e2eIcon_unverified {
+ opacity: 1;
+}
+.mx_EventTile_e2eIcon_unknown:after {
+ -webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
+ mask-image: url(../../img/e2e/warning.78bb264.svg);
+ background-color: #ff4b55;
+}
+.mx_EventTile_e2eIcon_unknown {
+ opacity: 1;
+}
+.mx_EventTile_e2eIcon_unencrypted:after {
+ -webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
+ mask-image: url(../../img/e2e/warning.78bb264.svg);
+ background-color: #ff4b55;
+}
+.mx_EventTile_e2eIcon_unencrypted {
+ opacity: 1;
+}
+.mx_EventTile_e2eIcon_unauthenticated:after {
+ -webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
+ mask-image: url(../../img/e2e/normal.76f0c09.svg);
+ background-color: #91a1c0;
+}
+.mx_EventTile_e2eIcon_unauthenticated {
+ opacity: 1;
+}
+.mx_EventTile_keyRequestInfo {
+ font-size: 1.2rem;
+}
+.mx_EventTile_keyRequestInfo_text {
+ opacity: 0.5;
+}
+.mx_EventTile_keyRequestInfo_text a {
+ color: #2e2f32;
+ text-decoration: underline;
+ cursor: pointer;
+}
+.mx_EventTile_keyRequestInfo_tooltip_contents p {
+ text-align: auto;
+ margin-left: 3px;
+ margin-right: 3px;
+}
+.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child {
+ margin-top: 0;
+}
+.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child {
+ margin-bottom: 0;
+}
+.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,
+.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
+.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
+ padding-left: 60px;
+}
+.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
+ border-left: 4px solid #76cfa5;
+}
+.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,
+.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
+ border-left: 4px solid #e8bf37;
+}
+.mx_EventTile:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line,
+.mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info
+ .mx_EventTile_line,
+.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line {
+ padding-left: 78px;
+}
+.mx_EventTile:hover .mx_EventTile_e2eIcon {
+ opacity: 1;
+}
+.mx_EventTile:hover.mx_EventTile_unknown
+ .mx_EventTile_line
+ > a
+ > .mx_MessageTimestamp,
+.mx_EventTile:hover.mx_EventTile_unverified
+ .mx_EventTile_line
+ > a
+ > .mx_MessageTimestamp,
+.mx_EventTile:hover.mx_EventTile_verified
+ .mx_EventTile_line
+ > a
+ > .mx_MessageTimestamp {
+ width: 38px;
+}
+.mx_EventTile:hover.mx_EventTile_unknown
+ .mx_EventTile_line
+ > .mx_EventTile_e2eIcon,
+.mx_EventTile:hover.mx_EventTile_unverified
+ .mx_EventTile_line
+ > .mx_EventTile_e2eIcon,
+.mx_EventTile:hover.mx_EventTile_verified
+ .mx_EventTile_line
+ > .mx_EventTile_e2eIcon {
+ display: block;
+ left: 41px;
+}
+.mx_EventTile_content .mx_EventTile_edited {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ font-size: 1.2rem;
+ color: #9e9e9e;
+ display: inline-block;
+ margin-left: 9px;
+ cursor: pointer;
+}
+.mx_EventTile_body pre {
+ border: 1px solid transparent;
+}
+.mx_EventTile_content .markdown-body {
+ font-family: inherit !important;
+ white-space: normal !important;
+ line-height: inherit !important;
+ color: inherit;
+ font-size: 1.4rem;
+}
+.mx_EventTile_content .markdown-body code,
+.mx_EventTile_content .markdown-body pre {
+ font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
+ color: #333;
+}
+.mx_EventTile_content .markdown-body pre {
+ overflow-x: overlay;
+ overflow-y: visible;
+}
+.mx_EventTile_content .markdown-body code {
+ background-color: #f8f8f8;
+}
+.mx_EventTile_lineNumbers {
+ float: left;
+ margin: 0 0.5em 0 -1.5em;
+ color: grey;
+}
+.mx_EventTile_lineNumber {
+ text-align: right;
+ display: block;
+ padding-left: 1em;
+}
+.mx_EventTile_collapsedCodeBlock {
+ max-height: 30vh;
+}
+.mx_EventTile.focus-visible:focus-within .mx_EventTile_body pre,
+.mx_EventTile:hover .mx_EventTile_body pre {
+ border: 1px solid #e5e5e5;
+}
+.mx_EventTile_pre_container {
+ position: relative;
+}
+.mx_EventTile_button {
+ position: absolute;
+ display: inline-block;
+ visibility: hidden;
+ cursor: pointer;
+ top: 8px;
+ right: 8px;
+ width: 19px;
+ height: 19px;
+ background-color: #2e2f32;
+}
+.mx_EventTile_buttonBottom {
+ top: 33px;
+}
+.mx_EventTile_copyButton {
+ -webkit-mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
+ mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
+}
+.mx_EventTile_collapseButton {
+ -webkit-mask-image: url(../../img/feather-customised/minimise.aec9142.svg);
+ mask-image: url(../../img/feather-customised/minimise.aec9142.svg);
+}
+.mx_EventTile_collapseButton,
+.mx_EventTile_expandButton {
+ -webkit-mask-size: 75%;
+ mask-size: 75%;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+}
+.mx_EventTile_expandButton {
+ -webkit-mask-image: url(../../img/feather-customised/maximise.dc32127.svg);
+ mask-image: url(../../img/feather-customised/maximise.dc32127.svg);
+}
+.mx_EventTile_body
+ .mx_EventTile_pre_container:focus-within
+ .mx_EventTile_collapseButton,
+.mx_EventTile_body
+ .mx_EventTile_pre_container:focus-within
+ .mx_EventTile_copyButton,
+.mx_EventTile_body
+ .mx_EventTile_pre_container:focus-within
+ .mx_EventTile_expandButton,
+.mx_EventTile_body
+ .mx_EventTile_pre_container:hover
+ .mx_EventTile_collapseButton,
+.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton,
+.mx_EventTile_body
+ .mx_EventTile_pre_container:hover
+ .mx_EventTile_expandButton {
+ visibility: visible;
+}
+.mx_EventTile_content .markdown-body h1,
+.mx_EventTile_content .markdown-body h2,
+.mx_EventTile_content .markdown-body h3,
+.mx_EventTile_content .markdown-body h4,
+.mx_EventTile_content .markdown-body h5,
+.mx_EventTile_content .markdown-body h6 {
+ font-family: inherit !important;
+ color: inherit;
+}
+.mx_EventTile_content .markdown-body h1,
+.mx_EventTile_content .markdown-body h2 {
+ font-size: 1.5em;
+ border-bottom: none !important;
+}
+.mx_EventTile_content .markdown-body a {
+ color: #238cf5;
+}
+.mx_EventTile_content .markdown-body .hljs {
+ display: inline !important;
+}
+.mx_EventTile_tileError {
+ color: red;
+ text-align: center;
+ margin-right: 0;
+}
+.mx_EventTile_tileError .mx_EventTile_line {
+ padding-left: 0;
+ margin-right: 0;
+}
+.mx_EventTile_tileError .mx_EventTile_line span {
+ padding: 4px 8px;
+}
+.mx_EventTile_tileError a {
+ margin-left: 1em;
+}
+@media only screen and (max-width: 480px) {
+ .mx_EventTile_line,
+ .mx_EventTile_reply {
+ padding-left: 0;
+ margin-right: 0;
+ }
+ .mx_EventTile_content {
+ margin-top: 10px;
+ margin-right: 0;
+ }
+}
+.mx_GroupLayout .mx_EventTile > .mx_SenderProfile {
+ line-height: 2rem;
+ margin-left: 64px;
+}
+.mx_GroupLayout .mx_EventTile > .mx_EventTile_line {
+ padding-left: 64px;
+}
+.mx_GroupLayout .mx_EventTile > .mx_EventTile_avatar {
+ position: absolute;
+}
+.mx_GroupLayout .mx_EventTile .mx_MessageTimestamp {
+ position: absolute;
+ width: 46px;
+}
+.mx_GroupLayout .mx_EventTile .mx_EventTile_line,
+.mx_GroupLayout .mx_EventTile .mx_EventTile_reply {
+ padding-top: 1px;
+ padding-bottom: 3px;
+ line-height: 2.2rem;
+}
+.mx_GroupLayout .mx_EventTile_info .mx_EventTile_line {
+ padding-left: 82px;
+}
+.mx_MatrixChat_useCompactLayout .mx_EventTile {
+ padding-top: 4px;
+}
+.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_line,
+.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_reply {
+ padding-top: 0;
+ padding-bottom: 0;
+}
+.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info {
+ padding-top: 0;
+ font-size: 1.3rem;
+}
+.mx_MatrixChat_useCompactLayout
+ .mx_EventTile.mx_EventTile_info
+ .mx_EventTile_line,
+.mx_MatrixChat_useCompactLayout
+ .mx_EventTile.mx_EventTile_info
+ .mx_EventTile_reply {
+ line-height: 2rem;
+}
+.mx_MatrixChat_useCompactLayout
+ .mx_EventTile.mx_EventTile_info
+ .mx_EventTile_avatar {
+ top: 4px;
+}
+.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_SenderProfile {
+ font-size: 1.3rem;
+}
+.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote {
+ padding-top: 8px;
+}
+.mx_MatrixChat_useCompactLayout
+ .mx_EventTile.mx_EventTile_emote
+ .mx_EventTile_avatar {
+ top: 2px;
+}
+.mx_MatrixChat_useCompactLayout
+ .mx_EventTile.mx_EventTile_emote
+ .mx_EventTile_line,
+.mx_MatrixChat_useCompactLayout
+ .mx_EventTile.mx_EventTile_emote
+ .mx_EventTile_reply {
+ padding-top: 0;
+ padding-bottom: 1px;
+}
+.mx_MatrixChat_useCompactLayout
+ .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation {
+ padding-top: 0;
+}
+.mx_MatrixChat_useCompactLayout
+ .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation
+ .mx_EventTile_line,
+.mx_MatrixChat_useCompactLayout
+ .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation
+ .mx_EventTile_reply {
+ padding-top: 0;
+ padding-bottom: 0;
+}
+.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_avatar {
+ top: 2px;
+}
+.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_e2eIcon {
+ top: 3px;
+}
+.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_readAvatars {
+ top: -2rem;
+}
+.mx_MatrixChat_useCompactLayout
+ .mx_EventTile
+ .mx_EventTile_content
+ .markdown-body
+ blockquote,
+.mx_MatrixChat_useCompactLayout
+ .mx_EventTile
+ .mx_EventTile_content
+ .markdown-body
+ dl,
+.mx_MatrixChat_useCompactLayout
+ .mx_EventTile
+ .mx_EventTile_content
+ .markdown-body
+ ol,
+.mx_MatrixChat_useCompactLayout
+ .mx_EventTile
+ .mx_EventTile_content
+ .markdown-body
+ p,
+.mx_MatrixChat_useCompactLayout
+ .mx_EventTile
+ .mx_EventTile_content
+ .markdown-body
+ pre,
+.mx_MatrixChat_useCompactLayout
+ .mx_EventTile
+ .mx_EventTile_content
+ .markdown-body
+ table,
+.mx_MatrixChat_useCompactLayout
+ .mx_EventTile
+ .mx_EventTile_content
+ .markdown-body
+ ul {
+ margin-bottom: 4px;
+}
+.mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList h2 {
+ margin-top: 6px;
+}
+.mx_IRCLayout {
+ --name-width: 70px;
+ line-height: 1.8rem !important;
+}
+.mx_IRCLayout .mx_EventTile > a {
+ text-decoration: none;
+}
+.mx_IRCLayout .mx_EventTile {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+ padding-top: 0;
+}
+.mx_IRCLayout .mx_EventTile > * {
+ margin-right: 5px;
+}
+.mx_IRCLayout .mx_EventTile > .mx_EventTile_msgOption {
+ -webkit-box-ordinal-group: 6;
+ -ms-flex-order: 5;
+ order: 5;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+}
+.mx_IRCLayout
+ .mx_EventTile
+ > .mx_EventTile_msgOption
+ .mx_EventTile_readAvatars {
+ top: 0.2rem;
+}
+.mx_IRCLayout .mx_EventTile > .mx_SenderProfile {
+ -webkit-box-ordinal-group: 3;
+ -ms-flex-order: 2;
+ order: 2;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ width: var(--name-width);
+ text-overflow: ellipsis;
+ text-align: left;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ overflow: visible;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+}
+.mx_IRCLayout .mx_EventTile .mx_EventTile_line,
+.mx_IRCLayout .mx_EventTile .mx_EventTile_reply {
+ padding: 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-ordinal-group: 4;
+ -ms-flex-order: 3;
+ order: 3;
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ min-width: 0;
+}
+.mx_IRCLayout .mx_EventTile > .mx_EventTile_avatar {
+ -webkit-box-ordinal-group: 2;
+ -ms-flex-order: 1;
+ order: 1;
+ position: relative;
+ top: 0;
+ left: 0;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ height: 1.8rem;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_IRCLayout .mx_EventTile > .mx_EventTile_avatar > .mx_BaseAvatar,
+.mx_IRCLayout .mx_EventTile > .mx_EventTile_avatar > .mx_BaseAvatar > * {
+ height: 1.4rem !important;
+ width: 1.4rem !important;
+ font-size: 1rem !important;
+ line-height: 1.5rem !important;
+}
+.mx_IRCLayout .mx_EventTile .mx_MessageTimestamp {
+ font-size: 1rem;
+ width: 45px;
+ text-align: right;
+}
+.mx_IRCLayout .mx_EventTile > .mx_EventTile_e2eIcon {
+ position: absolute;
+ right: unset;
+ left: unset;
+ top: 0;
+ padding: 0;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ -webkit-box-flex: 0;
+ -ms-flex-positive: 0;
+ flex-grow: 0;
+ height: 1.8rem;
+ background-position: 50%;
+}
+.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_EventTile_e2eIcon,
+.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_MTextBody,
+.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_ReplyThread_wrapper_empty,
+.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_TextualEvent {
+ display: inline-block;
+}
+.mx_IRCLayout .mx_EventTile .mx_EventTile_reply {
+ -webkit-box-ordinal-group: 5;
+ -ms-flex-order: 4;
+ order: 4;
+}
+.mx_IRCLayout .mx_EventTile .mx_EditMessageComposer_buttons {
+ position: relative;
+}
+.mx_IRCLayout .mx_EventTile_emote > .mx_EventTile_avatar {
+ margin-left: calc(var(--name-width) + 19px);
+}
+.mx_IRCLayout blockquote {
+ margin: 0;
+}
+.mx_IRCLayout .mx_EventListSummary > .mx_EventTile_line {
+ padding-left: calc(var(--name-width) + 74px);
+}
+.mx_IRCLayout .mx_EventListSummary .mx_EventListSummary_avatars {
+ padding: 0;
+ margin: 0 9px 0 0;
+}
+.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
+ left: calc(var(--name-width) + 24px);
+ top: 0;
+}
+.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_line {
+ left: calc(var(--name-width) + 24px);
+}
+.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_TextualEvent {
+ line-height: 1.8rem;
+}
+.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,
+.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
+.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
+ padding-left: 0;
+ border-left: 0;
+}
+.mx_IRCLayout .mx_SenderProfile_hover {
+ background-color: #fff;
+ overflow: hidden;
+}
+.mx_IRCLayout .mx_SenderProfile_hover > span {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_IRCLayout .mx_SenderProfile_hover > span > .mx_SenderProfile_name {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ min-width: var(--name-width);
+ text-align: end;
+}
+.mx_IRCLayout .mx_SenderProfile:hover {
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+}
+.mx_IRCLayout .mx_SenderProfile_hover:hover {
+ overflow: visible;
+ width: max(auto, 100%);
+ z-index: 10;
+}
+.mx_IRCLayout .mx_ReplyThread {
+ margin: 0;
+}
+.mx_IRCLayout .mx_ReplyThread .mx_SenderProfile {
+ width: unset;
+ max-width: var(--name-width);
+}
+.mx_IRCLayout .mx_ReplyThread .mx_SenderProfile_hover {
+ background: transparent;
+}
+.mx_IRCLayout
+ .mx_ReplyThread
+ .mx_SenderProfile_hover
+ > span
+ > .mx_SenderProfile_name {
+ min-width: inherit;
+}
+.mx_IRCLayout .mx_ReplyThread .mx_EventTile_emote > .mx_EventTile_avatar {
+ margin-left: 0;
+}
+.mx_IRCLayout .mx_ReplyThread .mx_MessageTimestamp {
+ width: auto;
+}
+.mx_IRCLayout .mx_ReplyThread .mx_EventTile_e2eIcon {
+ position: relative;
+ -webkit-box-ordinal-group: 0;
+ -ms-flex-order: -1;
+ order: -1;
+}
+.mx_IRCLayout .mx_ProfileResizer {
+ position: absolute;
+ height: 100%;
+ width: 15px;
+ left: calc(80px + var(--name-width));
+ cursor: col-resize;
+ z-index: 100;
+}
+.mx_IRCLayout .mx_Flair > img {
+ height: 1.4rem !important;
+ width: 1.4rem !important;
+}
+.mx_JumpToBottomButton {
+ z-index: 1000;
+ position: absolute;
+ bottom: 12px;
+ right: 24px;
+ width: 38px;
+ height: 50px;
+ text-align: center;
+}
+.mx_JumpToBottomButton_badge {
+ position: relative;
+ top: -12px;
+ border-radius: 16px;
+ font-weight: 700;
+ font-size: 1.2rem;
+ line-height: 1.4rem;
+ text-align: center;
+ display: inline-block;
+ padding: 0 4px;
+ color: #fff;
+ background-color: #61708b;
+}
+.mx_JumpToBottomButton_highlight .mx_JumpToBottomButton_badge {
+ color: #f2f5f8;
+ background-color: #ff4b55;
+}
+.mx_JumpToBottomButton_scrollDown {
+ position: relative;
+ height: 38px;
+ border-radius: 19px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ background: #fff;
+ border: 1.3px solid #61708b;
+ cursor: pointer;
+}
+.mx_JumpToBottomButton_scrollDown:before {
+ content: "";
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ -webkit-mask-image: url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);
+ mask-image: url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ background: #61708b;
+}
+.mx_LinkPreviewWidget {
+ margin-top: 15px;
+ margin-right: 15px;
+ margin-bottom: 15px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ border-left: 4px solid #ddd;
+ color: #888;
+}
+.mx_LinkPreviewWidget_image {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 100px;
+ flex: 0 0 100px;
+ margin-left: 15px;
+ text-align: center;
+ cursor: pointer;
+}
+.mx_LinkPreviewWidget_caption {
+ margin-left: 15px;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+}
+.mx_LinkPreviewWidget_title {
+ display: inline;
+ font-weight: 700;
+ white-space: normal;
+}
+.mx_LinkPreviewWidget_siteName {
+ display: inline;
+}
+.mx_LinkPreviewWidget_description {
+ margin-top: 8px;
+ white-space: normal;
+ word-wrap: break-word;
+}
+.mx_LinkPreviewWidget_cancel {
+ cursor: pointer;
+ width: 18px;
+ height: 18px;
+}
+.mx_LinkPreviewWidget_cancel img {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 40px;
+ flex: 0 0 40px;
+ visibility: hidden;
+}
+.mx_LinkPreviewWidget:hover .mx_LinkPreviewWidget_cancel img,
+.mx_LinkPreviewWidget_cancel.focus-visible:focus img {
+ visibility: visible;
+}
+.mx_MatrixChat_useCompactLayout .mx_LinkPreviewWidget {
+ margin-top: 6px;
+ margin-bottom: 6px;
+}
+.mx_MemberInfo {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ overflow-y: auto;
+ margin-top: 8px;
+}
+.mx_MemberInfo,
+.mx_MemberInfo_name {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_MemberInfo_name {
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_MemberInfo_name > .mx_E2EIcon {
+ margin-right: 0;
+}
+.mx_MemberInfo_cancel {
+ height: 16px;
+ width: 16px;
+ padding: 10px 0 10px 10px;
+ cursor: pointer;
+ -webkit-mask-image: url(../../img/minimise.871d2de.svg);
+ mask-image: url(../../img/minimise.871d2de.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: 16px center;
+ mask-position: 16px center;
+ background-color: #91a1c0;
+}
+.mx_MemberInfo_name h2 {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ overflow-x: auto;
+ max-height: 50px;
+}
+.mx_MemberInfo h2 {
+ font-size: 1.8rem;
+ font-weight: 600;
+ margin: 16px 0 16px 15px;
+}
+.mx_MemberInfo_container {
+ margin: 0 16px 16px;
+}
+.mx_MemberInfo .mx_RoomTile_nameContainer {
+ width: 154px;
+}
+.mx_MemberInfo .mx_RoomTile_badge {
+ display: none;
+}
+.mx_MemberInfo .mx_RoomTile_name {
+ width: 160px;
+}
+.mx_MemberInfo_avatar {
+ background: hsla(0, 0%, 91%, 0.77);
+ margin-bottom: 16px;
+}
+.mx_MemberInfo_avatar > img {
+ height: auto;
+ width: 100%;
+ max-height: 30vh;
+ -o-object-fit: contain;
+ object-fit: contain;
+ display: block;
+}
+.mx_MemberInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {
+ cursor: -webkit-zoom-in;
+ cursor: zoom-in;
+}
+.mx_MemberInfo_profile {
+ margin-bottom: 16px;
+}
+.mx_MemberInfo h3 {
+ text-transform: uppercase;
+ color: #9fa9ba;
+ font-weight: 700;
+ font-size: 1.2rem;
+ margin: 4px 0;
+}
+.mx_MemberInfo_profileField {
+ font-size: 1.5rem;
+ position: relative;
+}
+.mx_MemberInfo_buttons {
+ margin-bottom: 16px;
+}
+.mx_MemberInfo_field {
+ cursor: pointer;
+ font-size: 1.5rem;
+ color: #2e2f32;
+ margin-left: 8px;
+ line-height: 2.3rem;
+}
+.mx_MemberInfo_createRoom {
+ cursor: pointer;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ padding: 0 8px;
+}
+.mx_MemberInfo_createRoom_label {
+ width: auto !important;
+ cursor: pointer;
+}
+.mx_MemberInfo label {
+ font-size: 1.3rem;
+}
+.mx_MemberInfo label .mx_MemberInfo_label_text {
+ display: inline-block;
+ max-width: 180px;
+ vertical-align: text-top;
+}
+.mx_MemberInfo input[type="radio"] {
+ vertical-align: -2px;
+ margin-right: 5px;
+ margin-left: 8px;
+}
+.mx_MemberInfo_statusMessage {
+ font-size: 1.1rem;
+ opacity: 0.5;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: clip;
+}
+.mx_MemberInfo .mx_MemberInfo_scrollContainer {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+}
+.mx_GroupMemberList,
+.mx_GroupRoomList,
+.mx_MemberList {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ min-height: 0;
+}
+.mx_GroupMemberList .mx_Spinner,
+.mx_GroupRoomList .mx_Spinner,
+.mx_MemberList .mx_Spinner {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 auto;
+ flex: 1 0 auto;
+}
+.mx_GroupMemberList .mx_SearchBox,
+.mx_GroupRoomList .mx_SearchBox,
+.mx_MemberList .mx_SearchBox {
+ margin-bottom: 5px;
+}
+.mx_GroupMemberList h2,
+.mx_GroupRoomList h2,
+.mx_MemberList h2 {
+ text-transform: uppercase;
+ color: #3d3b39;
+ font-weight: 600;
+ font-size: 1.3rem;
+ padding-left: 3px;
+ padding-right: 12px;
+ margin-top: 8px;
+ margin-bottom: 4px;
+}
+.mx_GroupMemberList .mx_AutoHideScrollbar,
+.mx_GroupRoomList .mx_AutoHideScrollbar,
+.mx_MemberList .mx_AutoHideScrollbar {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0;
+}
+.mx_GroupMemberList .mx_RightPanel_scopeHeader,
+.mx_GroupRoomList .mx_RightPanel_scopeHeader,
+.mx_MemberList .mx_RightPanel_scopeHeader {
+ margin-top: -8px;
+}
+.mx_GroupMemberList_query,
+.mx_GroupRoomList_query {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+}
+.mx_MemberList_chevron {
+ position: absolute;
+ right: 35px;
+ margin-top: -15px;
+}
+.mx_MemberList_border {
+ overflow-y: auto;
+ -webkit-box-ordinal-group: 2;
+ -ms-flex-order: 1;
+ order: 1;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0px;
+}
+.mx_MemberList_query {
+ height: 16px;
+}
+.mx_MemberList_query[type="text"] {
+ font-size: 1.2rem;
+}
+.mx_MemberList_wrapper {
+ padding: 10px;
+}
+.mx_MemberList_invite {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ position: relative;
+ background-color: #0dbd8b;
+ border-radius: 4px;
+ margin: 5px 9px 9px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ color: #fff;
+ font-weight: 600;
+}
+.mx_MemberList_invite.mx_AccessibleButton_disabled {
+ background-color: #888;
+ cursor: not-allowed;
+}
+.mx_MemberList_invite span {
+ padding: 8px 0;
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+}
+.mx_MemberList_invite span:before {
+ content: "";
+ display: inline-block;
+ background-color: #fff;
+ -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+ mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 20px;
+ mask-size: 20px;
+ width: 20px;
+ height: 20px;
+ margin-right: 5px;
+}
+.mx_MemberList_inviteCommunity span:before {
+ -webkit-mask-image: url(../../img/icon-invite-people.d82f491.svg);
+ mask-image: url(../../img/icon-invite-people.d82f491.svg);
+}
+.mx_MemberList_addRoomToCommunity span:before {
+ -webkit-mask-image: url(../../img/icons-room-add.bd36e26.svg);
+ mask-image: url(../../img/icons-room-add.bd36e26.svg);
+}
+.mx_MessageComposer_wrapper {
+ vertical-align: middle;
+ margin: auto;
+ border-top: 1px solid transparent;
+ position: relative;
+ padding-left: 82px;
+ padding-right: 6px;
+}
+.mx_MessageComposer_replaced_wrapper {
+ margin-left: auto;
+ margin-right: auto;
+}
+.mx_MessageComposer_replaced_valign {
+ height: 60px;
+ display: table-cell;
+ vertical-align: middle;
+}
+.mx_MessageComposer_roomReplaced_icon {
+ float: left;
+ margin-right: 20px;
+ margin-top: 5px;
+ width: 31px;
+ height: 31px;
+}
+.mx_MessageComposer_roomReplaced_header {
+ font-weight: 700;
+}
+.mx_MessageComposer_autocomplete_wrapper {
+ position: relative;
+ height: 0;
+}
+.mx_MessageComposer_row {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ width: 100%;
+}
+.mx_MessageComposer .mx_MessageComposer_avatar {
+ position: absolute;
+ left: 26px;
+}
+.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar {
+ display: block;
+}
+.mx_MessageComposer_composecontrols {
+ width: 100%;
+}
+.mx_MessageComposer_e2eIcon.mx_E2EIcon {
+ position: absolute;
+ left: 60px;
+ margin-right: 0;
+ margin-left: 3px;
+ width: 12px;
+ height: 12px;
+}
+.mx_MessageComposer_noperm_error {
+ width: 100%;
+ height: 60px;
+ font-style: italic;
+ color: #888;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_MessageComposer_input_wrapper {
+ cursor: text;
+}
+.mx_MessageComposer_input,
+.mx_MessageComposer_input_wrapper {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_MessageComposer_input {
+ vertical-align: middle;
+ min-height: 60px;
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ -webkit-box-align: start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+ font-size: 1.4rem;
+ margin-right: 6px;
+}
+.mx_MessageComposer_editor {
+ width: 100%;
+ max-height: 120px;
+ min-height: 19px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ word-break: break-word;
+}
+.mx_MessageComposer_editor > :first-child {
+ margin-top: 0 !important;
+}
+.mx_MessageComposer_editor > :last-child {
+ margin-bottom: 0 !important;
+}
+@keyframes visualbell {
+ 0% {
+ background-color: #faa;
+ }
+ to {
+ background-color: #fff;
+ }
+}
+.mx_MessageComposer_input_error {
+ -webkit-animation: visualbell 0.2s;
+ animation: visualbell 0.2s;
+}
+.mx_MessageComposer_input blockquote {
+ color: #777;
+ margin: 0 0 16px;
+ padding: 0 15px;
+ border-left: 4px solid #ddd;
+}
+.mx_MessageComposer_input pre {
+ background-color: rgba(0, 0, 0, 0.04);
+ border-radius: 3px;
+ padding: 10px;
+}
+.mx_MessageComposer_input textarea {
+ display: block;
+ width: 100%;
+ padding: 0;
+ margin-top: 6px;
+ margin-bottom: 6px;
+ border: 0;
+ resize: none;
+ outline: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ color: #2e2f32;
+ background-color: #fff;
+ font-size: 1.4rem;
+ max-height: 120px;
+ overflow: auto;
+ font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+}
+.mx_MessageComposer_input textarea::-moz-placeholder {
+ line-height: 100%;
+ color: #0dbd8b;
+ opacity: 1;
+}
+.mx_MessageComposer_input textarea::-webkit-input-placeholder {
+ color: #0dbd8b;
+}
+.mx_MessageComposer_button_highlight {
+ background: rgba(13, 189, 139, 0.25);
+}
+.mx_MessageComposer_button_highlight:before {
+ background-color: #0dbd8b !important;
+}
+.mx_MessageComposer_button {
+ position: relative;
+ margin-right: 6px;
+ cursor: pointer;
+ height: 26px;
+ width: 26px;
+ border-radius: 100%;
+}
+.mx_MessageComposer_button:before {
+ content: "";
+ position: absolute;
+ top: 3px;
+ left: 3px;
+ height: 20px;
+ width: 20px;
+ background-color: #c1c6cd;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+.mx_MessageComposer_button:hover {
+ background: rgba(13, 189, 139, 0.1);
+}
+.mx_MessageComposer_button:hover:before {
+ background-color: #0dbd8b;
+}
+.mx_MessageComposer_button.mx_MessageComposer_hangup:not(.mx_AccessibleButton_disabled):before {
+ background-color: #ff4b55;
+}
+.mx_MessageComposer_upload:before {
+ -webkit-mask-image: url(../icons/attach.svg);
+ mask-image: url(../icons/attach.svg);
+}
+.mx_MessageComposer_voiceMessage:before {
+ -webkit-mask-image: url(../../img/voip/mic-on-mask.97ec7a0.svg);
+ mask-image: url(../../img/voip/mic-on-mask.97ec7a0.svg);
+}
+.mx_MessageComposer_emoji:before {
+ -webkit-mask-image: url(../../img/element-icons/room/composer/emoji.52d7369.svg);
+ mask-image: url(../../img/element-icons/room/composer/emoji.52d7369.svg);
+}
+.mx_MessageComposer_stickers:before {
+ -webkit-mask-image: url(../../img/element-icons/room/composer/sticker.8dbe5ec.svg);
+ mask-image: url(../../img/element-icons/room/composer/sticker.8dbe5ec.svg);
+}
+.mx_MessageComposer_sendMessage {
+ cursor: pointer;
+ position: relative;
+ margin-right: 6px;
+ width: 32px;
+ height: 32px;
+ border-radius: 100%;
+ background-color: #0dbd8b;
+}
+.mx_MessageComposer_sendMessage:before {
+ position: absolute;
+ height: 16px;
+ width: 16px;
+ top: 8px;
+ left: 9px;
+ -webkit-mask-image: url(../../img/element-icons/send-message.a4e9cf8.svg);
+ mask-image: url(../../img/element-icons/send-message.a4e9cf8.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-position: center;
+ mask-position: center;
+ background-color: #fff;
+ content: "";
+}
+.mx_MessageComposer_formatting {
+ cursor: pointer;
+ margin: 0 11px;
+ width: 24px;
+ height: 18px;
+}
+.mx_MessageComposer_formatbar_wrapper {
+ width: 100%;
+ background-color: #fff;
+ -webkit-box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08);
+ box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08);
+}
+.mx_MessageComposer_formatbar {
+ margin: auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ height: 30px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ padding-left: 62px;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ font-size: 1rem;
+ color: #888;
+}
+.mx_MessageComposer_formatbar * {
+ margin-right: 4px;
+}
+.mx_MessageComposer_format_button,
+.mx_MessageComposer_formatbar_cancel,
+.mx_MessageComposer_formatbar_markdown {
+ cursor: pointer;
+}
+.mx_MessageComposer_formatbar_cancel {
+ margin-right: 22px;
+}
+.mx_MessageComposer_formatbar_markdown {
+ height: 17px;
+ width: 30px;
+ margin-right: 64px;
+}
+.mx_MessageComposer_input_markdownIndicator {
+ height: 10px;
+ width: 12px;
+ padding: 4px 4px 4px 0;
+}
+.mx_MessageComposer_formatbar_markdown,
+.mx_MessageComposer_input_markdownIndicator {
+ cursor: pointer;
+ -webkit-mask-image: url(../../img/markdown.6905ba8.svg);
+ mask-image: url(../../img/markdown.6905ba8.svg);
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background-color: #c1c6cd;
+}
+.mx_MessageComposer_formatbar_markdown.mx_MessageComposer_markdownDisabled,
+.mx_MessageComposer_input_markdownIndicator.mx_MessageComposer_markdownDisabled {
+ opacity: 0.2;
+}
+.mx_MatrixChat_useCompactLayout .mx_MessageComposer_input {
+ min-height: 50px;
+}
+.mx_MatrixChat_useCompactLayout .mx_MessageComposer_noperm_error {
+ height: 50px;
+}
+.mx_MessageComposerFormatBar {
+ display: none;
+ width: 130px;
+ height: 24px;
+ position: absolute;
+ cursor: pointer;
+ border-radius: 4px;
+ background-color: #fff;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ z-index: 1000;
+}
+.mx_MessageComposerFormatBar.mx_MessageComposerFormatBar_shown {
+ display: block;
+}
+.mx_MessageComposerFormatBar > * {
+ white-space: nowrap;
+ display: inline-block;
+ position: relative;
+ border: 1px solid #e9edf1;
+ margin-left: -1px;
+}
+.mx_MessageComposerFormatBar > :hover {
+ border-color: #ddd;
+ z-index: 1;
+}
+.mx_MessageComposerFormatBar > :first-child {
+ border-radius: 3px 0 0 3px;
+}
+.mx_MessageComposerFormatBar > :last-child {
+ border-radius: 0 3px 3px 0;
+}
+.mx_MessageComposerFormatBar > :only-child {
+ border-radius: 3px;
+}
+.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button {
+ width: 27px;
+ height: 24px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ background: none;
+ vertical-align: middle;
+}
+.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button:after {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ background-color: #2e2f32;
+}
+.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconBold:after {
+ -webkit-mask-image: url(../../img/element-icons/room/format-bar/bold.0d80ac7.svg);
+ mask-image: url(../../img/element-icons/room/format-bar/bold.0d80ac7.svg);
+}
+.mx_MessageComposerFormatBar
+ .mx_MessageComposerFormatBar_buttonIconItalic:after {
+ -webkit-mask-image: url(../../img/element-icons/room/format-bar/italic.bf18054.svg);
+ mask-image: url(../../img/element-icons/room/format-bar/italic.bf18054.svg);
+}
+.mx_MessageComposerFormatBar
+ .mx_MessageComposerFormatBar_buttonIconStrikethrough:after {
+ -webkit-mask-image: url(../../img/element-icons/room/format-bar/strikethrough.0264f7b.svg);
+ mask-image: url(../../img/element-icons/room/format-bar/strikethrough.0264f7b.svg);
+}
+.mx_MessageComposerFormatBar
+ .mx_MessageComposerFormatBar_buttonIconQuote:after {
+ -webkit-mask-image: url(../../img/element-icons/room/format-bar/quote.560cd8f.svg);
+ mask-image: url(../../img/element-icons/room/format-bar/quote.560cd8f.svg);
+}
+.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconCode:after {
+ -webkit-mask-image: url(../../img/element-icons/room/format-bar/code.27444ba.svg);
+ mask-image: url(../../img/element-icons/room/format-bar/code.27444ba.svg);
+}
+.mx_MessageComposerFormatBar_buttonTooltip {
+ white-space: nowrap;
+ font-size: 1.3rem;
+ font-weight: 600;
+ min-width: 54px;
+ text-align: center;
+}
+.mx_MessageComposerFormatBar_buttonTooltip
+ .mx_MessageComposerFormatBar_tooltipShortcut {
+ font-size: 0.9rem;
+ opacity: 0.7;
+}
+.mx_NewRoomIntro {
+ margin: 40px 0 48px 64px;
+}
+.mx_NewRoomIntro
+ .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover):after,
+.mx_NewRoomIntro
+ .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover):before {
+ content: unset;
+}
+.mx_NewRoomIntro .mx_AccessibleButton_kind_link {
+ padding: 0;
+ font-size: inherit;
+}
+.mx_NewRoomIntro .mx_NewRoomIntro_buttons {
+ margin-top: 28px;
+}
+.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton {
+ line-height: 2.4rem;
+ display: inline-block;
+}
+.mx_NewRoomIntro
+ .mx_NewRoomIntro_buttons
+ .mx_AccessibleButton
+ + .mx_AccessibleButton {
+ margin-left: 12px;
+}
+.mx_NewRoomIntro
+ .mx_NewRoomIntro_buttons
+ .mx_AccessibleButton:not(.mx_AccessibleButton_kind_primary_outline):before {
+ content: "";
+ display: inline-block;
+ background-color: #fff;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 20px;
+ mask-size: 20px;
+ width: 20px;
+ height: 20px;
+ margin-right: 5px;
+ vertical-align: text-bottom;
+}
+.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_NewRoomIntro_inviteButton:before {
+ -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+ mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+}
+.mx_NewRoomIntro > h2 {
+ margin-top: 24px;
+ font-size: 2.4rem;
+ font-weight: 600;
+}
+.mx_NewRoomIntro > p {
+ margin: 0;
+ font-size: 1.5rem;
+ color: #737d8c;
+}
+.mx_NotificationBadge:not(.mx_NotificationBadge_visible) {
+ display: none;
+}
+.mx_NotificationBadge.mx_NotificationBadge_visible {
+ background-color: #61708b;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_highlighted {
+ background-color: #ff4b55;
+}
+.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_dot {
+ background-color: #2e2f32;
+ width: 6px;
+ height: 6px;
+ border-radius: 6px;
+}
+.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_2char {
+ width: 1.6rem;
+ height: 1.6rem;
+ border-radius: 1.6rem;
+}
+.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_3char {
+ width: 2.6rem;
+ height: 1.6rem;
+ border-radius: 1.6rem;
+}
+.mx_NotificationBadge.mx_NotificationBadge_visible .mx_NotificationBadge_count {
+ font-size: 1rem;
+ line-height: 1.4rem;
+ color: #fff;
+}
+.mx_PinnedEventTile {
+ min-height: 40px;
+ margin-bottom: 5px;
+ width: 100%;
+ border-radius: 5px;
+}
+.mx_PinnedEventTile:hover {
+ background-color: #f6f7f8;
+}
+.mx_PinnedEventTile .mx_PinnedEventTile_sender,
+.mx_PinnedEventTile .mx_PinnedEventTile_timestamp {
+ color: #868686;
+ font-size: 0.8em;
+ vertical-align: top;
+ display: inline-block;
+ padding-bottom: 3px;
+}
+.mx_PinnedEventTile .mx_PinnedEventTile_timestamp {
+ padding-left: 15px;
+ display: none;
+}
+.mx_PinnedEventTile .mx_PinnedEventTile_senderAvatar .mx_BaseAvatar {
+ float: left;
+ margin-right: 10px;
+}
+.mx_PinnedEventTile_actions {
+ float: right;
+ margin-right: 10px;
+ display: none;
+}
+.mx_PinnedEventTile:hover .mx_PinnedEventTile_timestamp {
+ display: inline-block;
+}
+.mx_PinnedEventTile:hover .mx_PinnedEventTile_actions {
+ display: block;
+}
+.mx_PinnedEventTile_unpinButton {
+ display: inline-block;
+ cursor: pointer;
+ margin-left: 10px;
+}
+.mx_PinnedEventTile_gotoButton {
+ display: inline-block;
+ font-size: 0.7em;
+}
+.mx_PinnedEventTile_message {
+ margin-left: 50px;
+ position: relative;
+ top: 0;
+ left: 0;
+}
+.mx_PinnedEventsPanel {
+ border-top: 1px solid transparent;
+}
+.mx_PinnedEventsPanel_body {
+ max-height: 300px;
+ overflow-y: auto;
+ padding-bottom: 15px;
+}
+.mx_PinnedEventsPanel_header {
+ margin: 0;
+ padding-top: 8px;
+ padding-bottom: 15px;
+}
+.mx_PinnedEventsPanel_cancel {
+ margin: 12px;
+ float: right;
+ display: inline-block;
+}
+.mx_PresenceLabel {
+ font-size: 1.1rem;
+ opacity: 0.5;
+}
+.mx_ReplyPreview {
+ background: #fff;
+ border: 1px solid transparent;
+ border-bottom: none;
+ border-radius: 8px 8px 0 0;
+ max-height: 50vh;
+ overflow: auto;
+ -webkit-box-shadow: 0 -16px 32px rgba(0, 0, 0, 0.04);
+ box-shadow: 0 -16px 32px rgba(0, 0, 0, 0.04);
+}
+.mx_ReplyPreview_section {
+ border-bottom: 1px solid transparent;
+}
+.mx_ReplyPreview_header {
+ margin: 12px;
+ color: #2e2f32;
+ font-weight: 400;
+ opacity: 0.4;
+}
+.mx_ReplyPreview_title {
+ float: left;
+}
+.mx_ReplyPreview_cancel {
+ float: right;
+ cursor: pointer;
+}
+.mx_ReplyPreview_clear {
+ clear: both;
+}
+.mx_RoomBreadcrumbs {
+ width: 100%;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+}
+.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_crumb {
+ margin-right: 8px;
+ width: 32px;
+}
+.mx_RoomBreadcrumbs.mx_RoomBreadcrumbs-enter {
+ margin-left: -40px;
+}
+.mx_RoomBreadcrumbs.mx_RoomBreadcrumbs-enter-active {
+ margin-left: 0;
+ -webkit-transition: margin-left 0.64s cubic-bezier(0.66, 0.02, 0.36, 1);
+ transition: margin-left 0.64s cubic-bezier(0.66, 0.02, 0.36, 1);
+}
+.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_placeholder {
+ font-weight: 600;
+ font-size: 1.4rem;
+ line-height: 32px;
+ height: 32px;
+}
+.mx_RoomBreadcrumbs_Tooltip {
+ margin-left: -42px;
+ margin-top: -42px;
+}
+.mx_RoomHeader {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 50px;
+ flex: 0 0 50px;
+ border-bottom: 1px solid transparent;
+ background-color: #fff;
+}
+.mx_RoomHeader .mx_RoomHeader_e2eIcon {
+ height: 12px;
+ width: 12px;
+}
+.mx_RoomHeader .mx_RoomHeader_e2eIcon .mx_E2EIcon {
+ margin: 0;
+ position: absolute;
+ height: 12px;
+ width: 12px;
+}
+.mx_RoomHeader_wrapper {
+ margin: auto;
+ height: 50px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ min-width: 0;
+ padding: 0 10px 0 18px;
+}
+.mx_RoomHeader_wrapper .mx_InviteOnlyIcon_large {
+ margin: 0;
+}
+.mx_RoomHeader_spinner {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ height: 36px;
+ padding-left: 12px;
+ padding-right: 12px;
+}
+.mx_RoomHeader_textButton {
+ vertical-align: middle;
+ border: 0;
+ border-radius: 8px;
+ font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ font-size: 1.4rem;
+ color: #fff;
+ background-color: #0dbd8b;
+ width: auto;
+ padding: 7px 1.5em;
+ cursor: pointer;
+ display: inline-block;
+ outline: none;
+ margin-right: 8px;
+ margin-top: -5px;
+}
+.mx_RoomHeader_textButton_danger {
+ background-color: #ff4b55;
+}
+.mx_RoomHeader_cancelButton {
+ cursor: pointer;
+ padding-left: 12px;
+ padding-right: 12px;
+}
+.mx_RoomHeader_buttons {
+ background-color: #fff;
+}
+.mx_RoomHeader_buttons,
+.mx_RoomHeader_info {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_RoomHeader_info {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_RoomHeader_simpleHeader {
+ line-height: 5.2rem;
+ color: #45474a;
+ font-size: 1.8rem;
+ font-weight: 600;
+ overflow: hidden;
+ margin-left: 63px;
+ text-overflow: ellipsis;
+ width: 100%;
+}
+.mx_RoomHeader_simpleHeader .mx_RoomHeader_cancelButton {
+ float: right;
+}
+.mx_RoomHeader_simpleHeader .mx_RoomHeader_icon {
+ margin-left: 14px;
+ margin-right: 24px;
+ vertical-align: -4px;
+}
+.mx_RoomHeader_name {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
+ overflow: hidden;
+ color: #45474a;
+ font-weight: 600;
+ font-size: 1.8rem;
+ margin: 0 7px;
+ border-bottom: 1px solid transparent;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_RoomHeader_nametext {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+.mx_RoomHeader_settingsHint {
+ color: #a2a2a2 !important;
+}
+.mx_RoomHeader_searchStatus {
+ font-weight: 400;
+ opacity: 0.6;
+}
+.mx_RoomHeader_avatar,
+.mx_RoomHeader_avatarPicker,
+.mx_RoomHeader_avatarPicker_edit,
+.mx_RoomHeader_avatarPicker_remove,
+.mx_RoomHeader_name {
+ cursor: pointer;
+}
+.mx_RoomHeader_avatarPicker_remove {
+ position: absolute;
+ top: -11px;
+ right: -9px;
+}
+.mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable) {
+ color: #0dbd8b;
+}
+.mx_RoomHeader_placeholder {
+ color: #a2a2a2 !important;
+}
+.mx_RoomHeader_editable {
+ border-bottom: 1px solid #c7c7c7 !important;
+ min-width: 150px;
+ cursor: text;
+}
+.mx_RoomHeader_editable:focus {
+ border-bottom: 1px solid #0dbd8b !important;
+ outline: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.mx_RoomHeader_topic {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ color: #9e9e9e;
+ font-weight: 400;
+ font-size: 1.3rem;
+ margin: 4px 7px 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ border-bottom: 1px solid transparent;
+ line-height: 1.2em;
+ max-height: 2.4em;
+}
+.mx_RoomHeader_avatar {
+ -webkit-box-flex: 0;
+ -ms-flex: 0;
+ flex: 0;
+ margin: 0 6px 0 7px;
+ position: relative;
+}
+.mx_RoomHeader_avatar .mx_BaseAvatar_image {
+ -o-object-fit: cover;
+ object-fit: cover;
+}
+.mx_RoomHeader_avatarPicker {
+ position: relative;
+}
+.mx_RoomHeader_avatarPicker_edit {
+ position: absolute;
+ left: 16px;
+ top: 18px;
+}
+.mx_RoomHeader_avatarPicker_edit > label {
+ cursor: pointer;
+}
+.mx_RoomHeader_avatarPicker_edit > input {
+ display: none;
+}
+.mx_RoomHeader_button {
+ position: relative;
+ margin-left: 1px;
+ margin-right: 1px;
+ cursor: pointer;
+ height: 32px;
+ width: 32px;
+ border-radius: 100%;
+}
+.mx_RoomHeader_button:before {
+ content: "";
+ position: absolute;
+ top: 4px;
+ left: 4px;
+ height: 24px;
+ width: 24px;
+ background-color: #c1c6cd;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+}
+.mx_RoomHeader_button:hover {
+ background: rgba(13, 189, 139, 0.1);
+}
+.mx_RoomHeader_button:hover:before {
+ background-color: #0dbd8b;
+}
+.mx_RoomHeader_forgetButton:before {
+ -webkit-mask-image: url(../../img/element-icons/leave.bb917e7.svg);
+ mask-image: url(../../img/element-icons/leave.bb917e7.svg);
+ width: 26px;
+}
+.mx_RoomHeader_appsButton:before {
+ -webkit-mask-image: url(../../img/element-icons/room/apps.5ee9f78.svg);
+ mask-image: url(../../img/element-icons/room/apps.5ee9f78.svg);
+}
+.mx_RoomHeader_appsButton_highlight:before {
+ background-color: #0dbd8b;
+}
+.mx_RoomHeader_searchButton:before {
+ -webkit-mask-image: url(../../img/element-icons/room/search-inset.db6314d.svg);
+ mask-image: url(../../img/element-icons/room/search-inset.db6314d.svg);
+}
+.mx_RoomHeader_voiceCallButton:before {
+ -webkit-mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
+ mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
+ -webkit-mask-size: 20px;
+ mask-size: 20px;
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+.mx_RoomHeader_videoCallButton:before {
+ -webkit-mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
+ mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
+}
+.mx_RoomHeader_showPanel {
+ height: 16px;
+}
+.mx_RoomHeader_voipButton {
+ display: table-cell;
+}
+.mx_RoomHeader_voipButtons {
+ margin-top: 18px;
+}
+.mx_RoomHeader_pinnedButton:before {
+ -webkit-mask-image: url(../../img/element-icons/room/pin.6ab67ed.svg);
+ mask-image: url(../../img/element-icons/room/pin.6ab67ed.svg);
+}
+.mx_RoomHeader_pinsIndicator {
+ position: absolute;
+ right: 0;
+ bottom: 4px;
+ width: 8px;
+ height: 8px;
+ border-radius: 8px;
+ background-color: #8d99a5;
+}
+.mx_RoomHeader_pinsIndicatorUnread {
+ background-color: #ff4b55;
+}
+@media only screen and (max-width: 480px) {
+ .mx_RoomHeader_wrapper {
+ padding: 0;
+ }
+ .mx_RoomHeader {
+ overflow: hidden;
+ }
+}
+.mx_RoomList {
+ padding-right: 7px;
+}
+.mx_RoomList_iconPlus:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);
+ mask-image: url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);
+}
+.mx_RoomList_iconHash:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);
+ mask-image: url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);
+}
+.mx_RoomList_iconExplore:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
+ mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
+}
+.mx_RoomList_iconBrowse:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
+ mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
+}
+.mx_RoomList_iconDialpad:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/dialpad.37f876f.svg);
+ mask-image: url(../../img/element-icons/roomlist/dialpad.37f876f.svg);
+}
+.mx_RoomList_explorePrompt {
+ margin: 4px 12px;
+ padding-top: 12px;
+ border-top: 1px solid #e7e7e7;
+ font-size: 1.4rem;
+}
+.mx_RoomList_explorePrompt div:first-child {
+ font-weight: 600;
+ line-height: 1.8rem;
+ color: #2e2f32;
+}
+.mx_RoomList_explorePrompt .mx_AccessibleButton {
+ color: #2e2f32;
+ position: relative;
+ padding: 8px 8px 8px 32px;
+ font-size: inherit;
+ margin-top: 12px;
+ display: block;
+ text-align: start;
+ background-color: rgba(141, 151, 165, 0.2);
+ border-radius: 4px;
+}
+.mx_RoomList_explorePrompt .mx_AccessibleButton:before {
+ content: "";
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ top: 8px;
+ left: 8px;
+ background: #737d8c;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+}
+.mx_RoomList_explorePrompt
+ .mx_AccessibleButton.mx_RoomList_explorePrompt_startChat:before {
+ -webkit-mask-image: url(../../img/element-icons/feedback.a91241e.svg);
+ mask-image: url(../../img/element-icons/feedback.a91241e.svg);
+}
+.mx_RoomList_explorePrompt
+ .mx_AccessibleButton.mx_RoomList_explorePrompt_explore:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
+ mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
+}
+.mx_RoomList_explorePrompt
+ .mx_AccessibleButton.mx_RoomList_explorePrompt_spaceInvite:before {
+ -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+ mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+}
+.mx_RoomList_explorePrompt
+ .mx_AccessibleButton.mx_RoomList_explorePrompt_spaceExplore:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
+ mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
+}
+.mx_RoomPreviewBar {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+}
+.mx_RoomPreviewBar h3 {
+ font-size: 1.8rem;
+ font-weight: 600;
+}
+.mx_RoomPreviewBar h3.mx_RoomPreviewBar_spinnerTitle {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_RoomPreviewBar .mx_RoomPreviewBar_message p,
+.mx_RoomPreviewBar h3 {
+ word-break: break-all;
+ word-break: break-word;
+}
+.mx_RoomPreviewBar .mx_Spinner {
+ width: auto;
+ height: auto;
+ margin: 10px 10px 10px 0;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+}
+.mx_RoomPreviewBar .mx_RoomPreviewBar_footer {
+ font-size: 1.2rem;
+ line-height: 2rem;
+}
+.mx_RoomPreviewBar .mx_RoomPreviewBar_footer .mx_Spinner {
+ vertical-align: middle;
+ display: inline-block;
+}
+.mx_RoomPreviewBar_actions,
+.mx_RoomPreviewBar_message {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_RoomPreviewBar_message {
+ -webkit-box-align: stretch;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+}
+.mx_RoomPreviewBar_message p {
+ overflow-wrap: break-word;
+}
+.mx_RoomPreviewBar_panel {
+ padding: 8px 8px 8px 20px;
+ border-top: 1px solid transparent;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+}
+.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ padding: 3px 8px;
+}
+.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions > * {
+ margin-left: 12px;
+}
+.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 0px;
+ flex: 1 0 0;
+ min-width: 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message > * {
+ margin: 4px;
+}
+.mx_RoomPreviewBar_dialog {
+ margin: auto;
+ -webkit-box-sizing: content;
+ box-sizing: content;
+ width: 400px;
+ border-radius: 4px;
+ padding: 20px;
+ text-align: center;
+}
+.mx_RoomPreviewBar_dialog,
+.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message > * {
+ margin: 5px 0 20px;
+}
+.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: reverse;
+ -ms-flex-direction: column-reverse;
+ flex-direction: column-reverse;
+}
+.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions .mx_AccessibleButton {
+ padding: 7px 50px;
+}
+.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions > * {
+ margin-top: 12px;
+}
+.mx_RoomPreviewBar_dialog
+ .mx_RoomPreviewBar_actions
+ .mx_AccessibleButton.mx_AccessibleButton_kind_primary {
+ margin-bottom: 7px;
+}
+.mx_RoomPreviewBar_inviter {
+ font-weight: 600;
+}
+a.mx_RoomPreviewBar_inviter {
+ text-decoration: underline;
+ cursor: pointer;
+}
+.mx_RoomSublist {
+ margin-left: 8px;
+ margin-bottom: 4px;
+}
+.mx_RoomSublist.mx_RoomSublist_hidden {
+ display: none;
+}
+.mx_RoomSublist .mx_RoomSublist_headerContainer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ padding-bottom: 8px;
+ max-height: 24px;
+ color: #8d99a5;
+}
+.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ max-width: 100%;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_RoomSublist
+ .mx_RoomSublist_headerContainer
+ .mx_RoomSublist_stickable.mx_RoomSublist_headerContainer_sticky {
+ position: fixed;
+ height: 32px;
+ width: calc(100% - 22px);
+}
+.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_RoomSublist
+ .mx_RoomSublist_headerContainer
+ .mx_RoomSublist_badgeContainer
+ .mx_NotificationBadge {
+ margin-left: 8px;
+}
+.mx_RoomSublist
+ .mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux)
+ .mx_NotificationBadge {
+ margin-right: 4px;
+}
+.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton,
+.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton {
+ margin-left: 8px;
+ position: relative;
+ width: 24px;
+ height: 24px;
+ border-radius: 8px;
+}
+.mx_RoomSublist
+ .mx_RoomSublist_headerContainer
+ .mx_RoomSublist_auxButton:before,
+.mx_RoomSublist
+ .mx_RoomSublist_headerContainer
+ .mx_RoomSublist_menuButton:before {
+ content: "";
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ top: 4px;
+ left: 4px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background: #61708b;
+}
+.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:hover,
+.mx_RoomSublist
+ .mx_RoomSublist_headerContainer
+ .mx_RoomSublist_menuButton:hover {
+ background: rgba(141, 151, 165, 0.2);
+}
+.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton {
+ visibility: hidden;
+ width: 0;
+ margin: 0;
+}
+.mx_RoomSublist
+ .mx_RoomSublist_headerContainer
+ .mx_RoomSublist_auxButton:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/plus.daac9ba.svg);
+ mask-image: url(../../img/element-icons/roomlist/plus.daac9ba.svg);
+}
+.mx_RoomSublist
+ .mx_RoomSublist_headerContainer
+ .mx_RoomSublist_menuButton:before {
+ -webkit-mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
+ mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
+}
+.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ max-width: calc(100% - 16px);
+ line-height: 1.6rem;
+ font-size: 1.3rem;
+ font-weight: 600;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
+.mx_RoomSublist
+ .mx_RoomSublist_headerContainer
+ .mx_RoomSublist_headerText
+ .mx_RoomSublist_collapseBtn {
+ display: inline-block;
+ position: relative;
+ width: 14px;
+ height: 14px;
+ margin-right: 6px;
+}
+.mx_RoomSublist
+ .mx_RoomSublist_headerContainer
+ .mx_RoomSublist_headerText
+ .mx_RoomSublist_collapseBtn:before {
+ content: "";
+ width: 18px;
+ height: 18px;
+ position: absolute;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background-color: #8d99a5;
+ -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+ mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+}
+.mx_RoomSublist
+ .mx_RoomSublist_headerContainer
+ .mx_RoomSublist_headerText
+ .mx_RoomSublist_collapseBtn.mx_RoomSublist_collapseBtn_collapsed:before {
+ -webkit-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+}
+.mx_RoomSublist:first-child .mx_RoomSublist_headerContainer {
+ height: 0;
+ padding-bottom: 4px;
+}
+.mx_RoomSublist .mx_RoomSublist_resizeBox {
+ position: relative;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_RoomSublist .mx_RoomSublist_resizeBox,
+.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_tiles {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ overflow: hidden;
+}
+.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_tiles {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 0px;
+ flex: 1 0 0;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-mask-image: linear-gradient(0deg, transparent, #000 4px);
+ mask-image: linear-gradient(0deg, transparent, #000 4px);
+}
+.mx_RoomSublist
+ .mx_RoomSublist_resizeBox
+ .mx_RoomSublist_resizerHandles_showNButton {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 32px;
+ flex: 0 0 32px;
+}
+.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandles {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 4px;
+ flex: 0 0 4px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ width: 100%;
+}
+.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandle {
+ cursor: ns-resize;
+ border-radius: 3px;
+ max-width: 64px;
+ height: 4px !important;
+ position: relative !important;
+ bottom: 0 !important;
+}
+.mx_RoomSublist
+ .mx_RoomSublist_resizeBox.mx_RoomSublist_hasMenuOpen
+ .mx_RoomSublist_resizerHandle,
+.mx_RoomSublist .mx_RoomSublist_resizeBox:hover .mx_RoomSublist_resizerHandle {
+ opacity: 0.8;
+ background-color: #2e2f32;
+}
+.mx_RoomSublist .mx_RoomSublist_showNButton {
+ cursor: pointer;
+ font-size: 1.3rem;
+ line-height: 1.8rem;
+ color: #737d8c;
+ height: 24px;
+ padding-bottom: 4px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showNButtonChevron {
+ position: relative;
+ width: 18px;
+ height: 18px;
+ margin-left: 12px;
+ margin-right: 16px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background: #8d99a5;
+ left: -1px;
+}
+.mx_RoomSublist
+ .mx_RoomSublist_showNButton
+ .mx_RoomSublist_showLessButtonChevron,
+.mx_RoomSublist
+ .mx_RoomSublist_showNButton
+ .mx_RoomSublist_showMoreButtonChevron {
+ -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+ mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+}
+.mx_RoomSublist
+ .mx_RoomSublist_showNButton
+ .mx_RoomSublist_showLessButtonChevron {
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+.mx_RoomSublist.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton,
+.mx_RoomSublist:not(.mx_RoomSublist_minimized)
+ > .mx_RoomSublist_headerContainer:focus-within
+ .mx_RoomSublist_menuButton,
+.mx_RoomSublist:not(.mx_RoomSublist_minimized)
+ > .mx_RoomSublist_headerContainer:hover
+ .mx_RoomSublist_menuButton {
+ visibility: visible;
+ width: 24px;
+ margin-left: 8px;
+}
+.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer {
+ height: auto;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ position: relative;
+}
+.mx_RoomSublist.mx_RoomSublist_minimized
+ .mx_RoomSublist_headerContainer
+ .mx_RoomSublist_badgeContainer {
+ -webkit-box-ordinal-group: 1;
+ -ms-flex-order: 0;
+ order: 0;
+ -ms-flex-item-align: end;
+ align-self: flex-end;
+ margin-right: 0;
+}
+.mx_RoomSublist.mx_RoomSublist_minimized
+ .mx_RoomSublist_headerContainer
+ .mx_RoomSublist_stickable {
+ -webkit-box-ordinal-group: 2;
+ -ms-flex-order: 1;
+ order: 1;
+ max-width: 100%;
+}
+.mx_RoomSublist.mx_RoomSublist_minimized
+ .mx_RoomSublist_headerContainer
+ .mx_RoomSublist_auxButton {
+ -webkit-box-ordinal-group: 3;
+ -ms-flex-order: 2;
+ order: 2;
+ visibility: visible;
+ width: 32px !important;
+ height: 32px !important;
+ margin-left: 0 !important;
+ background-color: rgba(141, 151, 165, 0.2);
+ margin-top: 8px;
+}
+.mx_RoomSublist.mx_RoomSublist_minimized
+ .mx_RoomSublist_headerContainer
+ .mx_RoomSublist_auxButton:before {
+ top: 8px;
+ left: 8px;
+}
+.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_resizeBox {
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_showNButton {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_RoomSublist.mx_RoomSublist_minimized
+ .mx_RoomSublist_showNButton
+ .mx_RoomSublist_showNButtonChevron {
+ margin-right: 12px;
+}
+.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_menuButton {
+ height: 16px;
+}
+.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen
+ .mx_RoomSublist_menuButton,
+.mx_RoomSublist.mx_RoomSublist_minimized
+ > .mx_RoomSublist_headerContainer:hover
+ .mx_RoomSublist_menuButton {
+ visibility: visible;
+ position: absolute;
+ bottom: 48px;
+ right: 0;
+ width: 16px;
+ height: 16px;
+ border-radius: 0;
+ z-index: 1;
+ background-color: hsla(0, 0%, 96.1%, 0.9);
+}
+.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen
+ .mx_RoomSublist_menuButton:before,
+.mx_RoomSublist.mx_RoomSublist_minimized
+ > .mx_RoomSublist_headerContainer:hover
+ .mx_RoomSublist_menuButton:before {
+ top: 0;
+ left: 0;
+}
+.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux)
+ .mx_RoomSublist_menuButton,
+.mx_RoomSublist.mx_RoomSublist_minimized
+ > .mx_RoomSublist_headerContainer:hover.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux)
+ .mx_RoomSublist_menuButton {
+ bottom: 8px;
+}
+.mx_RoomSublist_contextMenu {
+ padding: 20px 16px;
+ width: 250px;
+}
+.mx_RoomSublist_contextMenu hr {
+ margin-top: 16px;
+ margin-bottom: 16px;
+ margin-right: 16px;
+ border: 1px solid #2e2f32;
+ opacity: 0.1;
+}
+.mx_RoomSublist_contextMenu .mx_RoomSublist_contextMenu_title {
+ font-size: 1.5rem;
+ line-height: 2rem;
+ font-weight: 600;
+ margin-bottom: 4px;
+}
+.mx_RoomSublist_contextMenu .mx_Checkbox,
+.mx_RoomSublist_contextMenu .mx_RadioButton {
+ margin-top: 8px;
+}
+.mx_RoomSublist_addRoomTooltip {
+ margin-top: -3px;
+}
+.mx_RoomSublist_skeletonUI {
+ position: relative;
+ margin-left: 4px;
+ height: 288px;
+}
+.mx_RoomSublist_skeletonUI:before {
+ background: -webkit-gradient(
+ linear,
+ left top,
+ left bottom,
+ from(#fff),
+ to(hsla(0, 0%, 100%, 0))
+ );
+ background: linear-gradient(180deg, #fff, hsla(0, 0%, 100%, 0));
+ width: 100%;
+ height: 100%;
+ content: "";
+ position: absolute;
+ -webkit-mask-repeat: repeat-y;
+ mask-repeat: repeat-y;
+ -webkit-mask-size: auto 48px;
+ mask-size: auto 48px;
+ -webkit-mask-image: url(../../img/element-icons/roomlist/skeleton-ui.1f67400.svg);
+ mask-image: url(../../img/element-icons/roomlist/skeleton-ui.1f67400.svg);
+}
+.mx_RoomTile {
+ margin-bottom: 4px;
+ padding: 4px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_RoomTile.mx_RoomTile_hasMenuOpen,
+.mx_RoomTile.mx_RoomTile_selected,
+.mx_RoomTile:focus-within,
+.mx_RoomTile:hover {
+ background-color: #fff;
+ border-radius: 8px;
+}
+.mx_RoomTile .mx_DecoratedRoomAvatar,
+.mx_RoomTile .mx_RoomTile_avatarContainer {
+ margin-right: 8px;
+}
+.mx_RoomTile .mx_RoomTile_nameContainer {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ min-width: 0;
+ margin-right: 8px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_messagePreview,
+.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name {
+ margin: 0 2px;
+ width: 100%;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
+.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name {
+ font-size: 1.4rem;
+ line-height: 1.8rem;
+}
+.mx_RoomTile
+ .mx_RoomTile_nameContainer
+ .mx_RoomTile_name.mx_RoomTile_nameHasUnreadEvents {
+ font-weight: 600;
+}
+.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_messagePreview {
+ font-size: 1.3rem;
+ line-height: 1.8rem;
+ color: #737d8c;
+}
+.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_nameWithPreview {
+ margin-top: -4px;
+}
+.mx_RoomTile .mx_RoomTile_notificationsButton {
+ margin-left: 4px;
+}
+.mx_RoomTile .mx_RoomTile_badgeContainer {
+ height: 16px;
+ margin: auto 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge {
+ margin-right: 2px;
+}
+.mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge_dot {
+ margin-left: 5px;
+ margin-right: 7px;
+}
+.mx_RoomTile .mx_RoomTile_menuButton,
+.mx_RoomTile .mx_RoomTile_notificationsButton {
+ width: 20px;
+ min-width: 20px;
+ height: 20px;
+ margin-top: auto;
+ margin-bottom: auto;
+ position: relative;
+ display: none;
+}
+.mx_RoomTile .mx_RoomTile_menuButton:before,
+.mx_RoomTile .mx_RoomTile_notificationsButton:before {
+ top: 2px;
+ left: 2px;
+ content: "";
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background: #2e2f32;
+}
+.mx_RoomTile
+ .mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
+ display: block;
+}
+.mx_RoomTile .mx_RoomTile_menuButton:before {
+ -webkit-mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
+ mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
+}
+.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen
+ .mx_RoomTile_badgeContainer,
+.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within
+ .mx_RoomTile_badgeContainer,
+.mx_RoomTile:not(.mx_RoomTile_minimized):hover .mx_RoomTile_badgeContainer {
+ width: 0;
+ height: 0;
+ display: none;
+}
+.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen
+ .mx_RoomTile_menuButton,
+.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen
+ .mx_RoomTile_notificationsButton,
+.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within .mx_RoomTile_menuButton,
+.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within
+ .mx_RoomTile_notificationsButton,
+.mx_RoomTile:not(.mx_RoomTile_minimized):hover .mx_RoomTile_menuButton,
+.mx_RoomTile:not(.mx_RoomTile_minimized):hover
+ .mx_RoomTile_notificationsButton {
+ display: block;
+}
+.mx_RoomTile.mx_RoomTile_minimized {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ position: relative;
+}
+.mx_RoomTile.mx_RoomTile_minimized .mx_DecoratedRoomAvatar,
+.mx_RoomTile.mx_RoomTile_minimized .mx_RoomTile_avatarContainer {
+ margin-right: 0;
+}
+.mx_RoomTile_iconBell:before {
+ -webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
+ mask-image: url(../../img/element-icons/notifications.d298b39.svg);
+}
+.mx_RoomTile_iconBellDot:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-default.8b8509e.svg);
+ mask-image: url(../../img/element-icons/roomlist/notifications-default.8b8509e.svg);
+}
+.mx_RoomTile_iconBellCrossed:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);
+ mask-image: url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);
+}
+.mx_RoomTile_iconBellMentions:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-dm.ffa8881.svg);
+ mask-image: url(../../img/element-icons/roomlist/notifications-dm.ffa8881.svg);
+}
+.mx_RoomTile_contextMenu .mx_RoomTile_iconStar:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/favorite.ff7609d.svg);
+ mask-image: url(../../img/element-icons/roomlist/favorite.ff7609d.svg);
+}
+.mx_RoomTile_contextMenu .mx_RoomTile_iconArrowDown:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/low-priority.6c7fb97.svg);
+ mask-image: url(../../img/element-icons/roomlist/low-priority.6c7fb97.svg);
+}
+.mx_RoomTile_contextMenu .mx_RoomTile_iconSettings:before {
+ -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
+ mask-image: url(../../img/element-icons/settings.6b381af.svg);
+}
+.mx_RoomTile_contextMenu .mx_RoomTile_iconInvite:before {
+ -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+ mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+}
+.mx_RoomTile_contextMenu .mx_RoomTile_iconSignOut:before {
+ -webkit-mask-image: url(../../img/element-icons/leave.bb917e7.svg);
+ mask-image: url(../../img/element-icons/leave.bb917e7.svg);
+}
+.mx_RoomUpgradeWarningBar {
+ max-height: 235px;
+ background-color: #f7f7f7;
+ padding-left: 20px;
+ padding-right: 20px;
+ overflow: scroll;
+}
+.mx_RoomUpgradeWarningBar_wrapped {
+ width: 100%;
+ height: 100%;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ text-align: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-align-items: center;
+}
+.mx_RoomUpgradeWarningBar_header {
+ color: #ff4b55;
+ font-weight: 700;
+}
+.mx_RoomUpgradeWarningBar_body {
+ color: #ff4b55;
+}
+.mx_RoomUpgradeWarningBar_upgradelink {
+ color: #ff4b55;
+ text-decoration: underline;
+}
+.mx_RoomUpgradeWarningBar_small {
+ color: #888;
+ font-size: 70%;
+}
+.mx_SearchBar {
+ height: 56px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ border-bottom: 1px solid transparent;
+}
+.mx_SearchBar .mx_SearchBar_input {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0;
+ margin-left: 22px;
+}
+.mx_SearchBar .mx_SearchBar_searchButton {
+ cursor: pointer;
+ width: 37px;
+ height: 37px;
+ background-color: #0dbd8b;
+ -webkit-mask: url(../../img/feather-customised/search-input.044bfa7.svg);
+ mask: url(../../img/feather-customised/search-input.044bfa7.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+.mx_SearchBar .mx_SearchBar_buttons {
+ display: inherit;
+}
+.mx_SearchBar .mx_SearchBar_button {
+ border: 0;
+ margin: 0 0 0 22px;
+ padding: 5px;
+ font-size: 1.5rem;
+ cursor: pointer;
+ color: #2e2f32;
+ border-bottom: 2px solid #0dbd8b;
+ font-weight: 600;
+}
+.mx_SearchBar .mx_SearchBar_unselected {
+ color: #9fa9ba;
+ border-color: transparent;
+}
+.mx_SearchBar .mx_SearchBar_cancel {
+ background-color: #ff4b55;
+ -webkit-mask: url(../../img/cancel.4b9715b.svg);
+ mask: url(../../img/cancel.4b9715b.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 14px;
+ mask-size: 14px;
+ padding: 9px;
+ margin: 0 12px 0 3px;
+ cursor: pointer;
+}
+.mx_SendMessageComposer {
+ -ms-flex: 1;
+ flex: 1;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ font-size: 1.4rem;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ margin-right: 6px;
+ min-width: 0;
+}
+.mx_SendMessageComposer,
+.mx_SendMessageComposer .mx_BasicMessageComposer {
+ -webkit-box-flex: 1;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+}
+.mx_SendMessageComposer .mx_BasicMessageComposer {
+ -ms-flex: 1;
+ flex: 1;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ min-height: 50px;
+}
+.mx_SendMessageComposer
+ .mx_BasicMessageComposer
+ .mx_BasicMessageComposer_input {
+ padding: 3px 0;
+ margin: auto 0;
+ max-height: 140px;
+ overflow-y: auto;
+}
+.mx_Stickers_content {
+ overflow: hidden;
+}
+.mx_Stickers_content_container {
+ overflow: hidden;
+ height: 300px;
+}
+#mx_persistedElement_stickerPicker .mx_AppTileFullWidth {
+ height: unset;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ border-left: none;
+ border-right: none;
+ border-bottom: none;
+}
+#mx_persistedElement_stickerPicker .mx_AppTileMenuBar {
+ padding: 0;
+}
+#mx_persistedElement_stickerPicker iframe {
+ height: 283px;
+}
+.mx_Stickers_contentPlaceholder {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ text-align: center;
+}
+.mx_Stickers_contentPlaceholder p {
+ max-width: 200px;
+}
+.mx_Stickers_addLink {
+ display: inline;
+ cursor: pointer;
+ color: #0dbd8b;
+}
+.mx_Stickers_hideStickers {
+ z-index: 2001;
+}
+.mx_TopUnreadMessagesBar {
+ z-index: 1000;
+ position: absolute;
+ top: 24px;
+ right: 24px;
+ width: 38px;
+}
+.mx_TopUnreadMessagesBar:after {
+ content: "";
+ position: absolute;
+ top: -8px;
+ left: 10.5px;
+ width: 4px;
+ height: 4px;
+ border-radius: 16px;
+ background-color: #f2f5f8;
+ border: 6px solid #0dbd8b;
+ pointer-events: none;
+}
+.mx_TopUnreadMessagesBar_scrollUp {
+ height: 38px;
+ border-radius: 19px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ background: #fff;
+ border: 1.3px solid #61708b;
+ cursor: pointer;
+}
+.mx_TopUnreadMessagesBar_scrollUp:before {
+ content: "";
+ position: absolute;
+ width: 36px;
+ height: 36px;
+ -webkit-mask-image: url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);
+ mask-image: url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ background: #61708b;
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+.mx_TopUnreadMessagesBar_markAsRead {
+ display: block;
+ width: 18px;
+ height: 18px;
+ background: #fff;
+ border: 1.3px solid #61708b;
+ border-radius: 10px;
+ margin: 5px auto;
+}
+.mx_TopUnreadMessagesBar_markAsRead:before {
+ content: "";
+ position: absolute;
+ width: 18px;
+ height: 18px;
+ -webkit-mask-image: url(../../img/cancel.4b9715b.svg);
+ mask-image: url(../../img/cancel.4b9715b.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 10px;
+ mask-size: 10px;
+ -webkit-mask-position: 4px 4px;
+ mask-position: 4px 4px;
+ background: #61708b;
+}
+.mx_VoiceRecordComposerTile_stop {
+ width: 28px;
+ height: 28px;
+ border: 2px solid #e3e8f0;
+ border-radius: 32px;
+ margin-right: 16px;
+ position: relative;
+}
+.mx_VoiceRecordComposerTile_stop:after {
+ content: "";
+ width: 14px;
+ height: 14px;
+ position: absolute;
+ top: 7px;
+ left: 7px;
+ border-radius: 2px;
+ background-color: #ff4b55;
+}
+.mx_VoiceRecordComposerTile_delete {
+ width: 14px;
+ height: 18px;
+ vertical-align: middle;
+ margin-right: 11px;
+ background-color: #8d99a5;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-image: url(../../img/element-icons/trashcan.26f6c28.svg);
+ mask-image: url(../../img/element-icons/trashcan.26f6c28.svg);
+}
+.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer {
+ margin: 6px 12px 6px 6px;
+ position: relative;
+}
+.mx_MessageComposer_row
+ .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording {
+ padding-left: 22px;
+}
+.mx_MessageComposer_row
+ .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording:before {
+ -webkit-animation: recording-pulse 2s infinite;
+ animation: recording-pulse 2s infinite;
+ content: "";
+ background-color: #ff4b55;
+ width: 10px;
+ height: 10px;
+ position: absolute;
+ left: 12px;
+ top: 18px;
+ border-radius: 10px;
+}
+@-webkit-keyframes recording-pulse {
+ 0% {
+ opacity: 1;
+ }
+ 35% {
+ opacity: 0;
+ }
+ 65% {
+ opacity: 1;
+ }
+}
+@keyframes recording-pulse {
+ 0% {
+ opacity: 1;
+ }
+ 35% {
+ opacity: 0;
+ }
+ 65% {
+ opacity: 1;
+ }
+}
+.mx_WhoIsTypingTile {
+ margin-left: -18px;
+ padding-top: 18px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_WhoIsTypingTile_avatars {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 83px;
+ flex: 0 0 83px;
+ text-align: center;
+}
+.mx_WhoIsTypingTile_avatars > :not(:first-child) {
+ margin-left: -12px;
+}
+.mx_WhoIsTypingTile_avatars .mx_BaseAvatar_initial {
+ padding-top: 1px;
+}
+.mx_WhoIsTypingTile_avatars .mx_BaseAvatar {
+ border: 1px solid #fff;
+ border-radius: 40px;
+}
+.mx_WhoIsTypingTile_remainingAvatarPlaceholder {
+ position: relative;
+ display: inline-block;
+ color: #acacac;
+ background-color: #ddd;
+ border: 1px solid #fff;
+ border-radius: 40px;
+ width: 24px;
+ height: 24px;
+ line-height: 2.4rem;
+ font-size: 0.8em;
+ vertical-align: top;
+ text-align: center;
+}
+.mx_WhoIsTypingTile_label {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ font-size: 1.4rem;
+ font-weight: 600;
+ color: #9e9e9e;
+}
+.mx_WhoIsTypingTile_label > span {
+ background-image: url(../../img/typing-indicator-2x.0eb9f0e.gif);
+ background-size: 25px;
+ background-position: 0 100%;
+ background-repeat: no-repeat;
+ padding-bottom: 15px;
+ display: block;
+}
+.mx_MatrixChat_useCompactLayout .mx_WhoIsTypingTile {
+ padding-top: 4px;
+}
+.mx_AvatarSetting_avatar {
+ width: 90px;
+ min-width: 90px;
+ height: 90px;
+ margin-top: 8px;
+ position: relative;
+}
+.mx_AvatarSetting_avatar .mx_AvatarSetting_hover {
+ -webkit-transition: opacity 0.08s cubic-bezier(0.46, 0.03, 0.52, 0.96);
+ transition: opacity 0.08s cubic-bezier(0.46, 0.03, 0.52, 0.96);
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ pointer-events: none;
+ line-height: 90px;
+ text-align: center;
+}
+.mx_AvatarSetting_avatar .mx_AvatarSetting_hover > span {
+ color: #fff;
+ position: relative;
+ font-weight: 500;
+}
+.mx_AvatarSetting_avatar .mx_AvatarSetting_hover .mx_AvatarSetting_hoverBg {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ opacity: 0.5;
+ background-color: #2e2f32;
+ border-radius: 90px;
+}
+.mx_AvatarSetting_avatar.mx_AvatarSetting_avatar_hovering
+ .mx_AvatarSetting_hover {
+ opacity: 1;
+}
+.mx_AvatarSetting_avatar:not(.mx_AvatarSetting_avatar_hovering)
+ .mx_AvatarSetting_hover {
+ opacity: 0;
+}
+.mx_AvatarSetting_avatar > * {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.mx_AvatarSetting_avatar .mx_AccessibleButton.mx_AccessibleButton_kind_primary {
+ margin-top: 8px;
+}
+.mx_AvatarSetting_avatar .mx_AccessibleButton.mx_AccessibleButton_kind_link_sm {
+ width: 100%;
+}
+.mx_AvatarSetting_avatar > img {
+ cursor: pointer;
+ -o-object-fit: cover;
+ object-fit: cover;
+}
+.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder,
+.mx_AvatarSetting_avatar > img {
+ display: block;
+ height: 90px;
+ width: inherit;
+ border-radius: 90px;
+ cursor: pointer;
+}
+.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder:before {
+ background-color: #2e2f32;
+ -webkit-mask: url(../../img/feather-customised/user.7a4d23d.svg);
+ mask: url(../../img/feather-customised/user.7a4d23d.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 36px;
+ mask-size: 36px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ content: "";
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton {
+ width: 32px;
+ height: 32px;
+ border-radius: 32px;
+ background-color: #e7e7e7;
+ position: absolute;
+ bottom: 0;
+ right: 0;
+}
+.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton:before {
+ content: "";
+ display: block;
+ width: 100%;
+ height: 100%;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 55%;
+ mask-size: 55%;
+ background-color: #2e2f32;
+ -webkit-mask-image: url(../../img/feather-customised/edit.fd55ec2.svg);
+ mask-image: url(../../img/feather-customised/edit.fd55ec2.svg);
+}
+.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder {
+ background-color: #f4f6fa;
+}
+.mx_CrossSigningPanel_statusList {
+ border-spacing: 0;
+}
+.mx_CrossSigningPanel_statusList td {
+ padding: 0;
+}
+.mx_CrossSigningPanel_statusList td:first-of-type {
+ -webkit-padding-end: 1em;
+ padding-inline-end: 1em;
+}
+.mx_CrossSigningPanel_buttonRow {
+ margin: 1em 0;
+}
+.mx_CrossSigningPanel_buttonRow :nth-child(n + 1) {
+ -webkit-margin-end: 10px;
+ margin-inline-end: 10px;
+}
+.mx_DevicesPanel {
+ display: table;
+ table-layout: fixed;
+ width: 880px;
+ border-spacing: 10px;
+}
+.mx_DevicesPanel_header {
+ display: table-header-group;
+ font-weight: 700;
+}
+.mx_DevicesPanel_header > .mx_DevicesPanel_deviceButtons {
+ height: 48px;
+}
+.mx_DevicesPanel_header > div {
+ display: table-cell;
+ vertical-align: middle;
+}
+.mx_DevicesPanel_header .mx_DevicesPanel_deviceName {
+ width: 50%;
+}
+.mx_DevicesPanel_header .mx_DevicesPanel_deviceLastSeen {
+ width: 30%;
+}
+.mx_DevicesPanel_header .mx_DevicesPanel_deviceButtons {
+ width: 20%;
+}
+.mx_DevicesPanel_device {
+ display: table-row;
+}
+.mx_DevicesPanel_device > div {
+ display: table-cell;
+}
+.mx_DevicesPanel_myDevice {
+ font-weight: 700;
+}
+.mx_E2eAdvancedPanel_settingLongDescription {
+ margin-right: 150px;
+}
+.mx_ExistingEmailAddress {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ margin-bottom: 5px;
+}
+.mx_ExistingEmailAddress_delete {
+ margin-right: 5px;
+ cursor: pointer;
+ vertical-align: middle;
+}
+.mx_ExistingEmailAddress_email,
+.mx_ExistingEmailAddress_promptText {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ margin-right: 10px;
+}
+.mx_ExistingEmailAddress_confirmBtn {
+ margin-left: 5px;
+}
+.mx_IntegrationManager .mx_Dialog {
+ width: 60%;
+ height: 70%;
+ overflow: hidden;
+ padding: 0;
+ max-width: none;
+ max-height: none;
+}
+.mx_IntegrationManager iframe {
+ background-color: #fff;
+ border: 0;
+ width: 100%;
+ height: 100%;
+}
+.mx_IntegrationManager_loading h3 {
+ text-align: center;
+}
+.mx_IntegrationManager_error {
+ text-align: center;
+ padding-top: 20px;
+}
+.mx_IntegrationManager_error h3 {
+ color: #ff4b55;
+}
+.mx_UserNotifSettings_tableRow {
+ display: table-row;
+}
+.mx_UserNotifSettings_inputCell {
+ display: table-cell;
+ padding-bottom: 8px;
+ padding-right: 8px;
+ width: 16px;
+}
+.mx_UserNotifSettings_labelCell {
+ padding-bottom: 8px;
+ width: 400px;
+ display: table-cell;
+}
+.mx_UserNotifSettings_pushRulesTableWrapper {
+ padding-bottom: 8px;
+}
+.mx_UserNotifSettings_pushRulesTable {
+ width: 100%;
+ table-layout: fixed;
+}
+.mx_UserNotifSettings_pushRulesTable thead {
+ font-weight: 700;
+}
+.mx_UserNotifSettings_pushRulesTable tbody th {
+ font-weight: 400;
+}
+.mx_UserNotifSettings_pushRulesTable tbody th:first-child {
+ text-align: left;
+}
+.mx_UserNotifSettings_keywords {
+ cursor: pointer;
+ color: #0dbd8b;
+}
+.mx_UserNotifSettings_devicesTable td {
+ padding-left: 20px;
+ padding-right: 20px;
+}
+.mx_UserNotifSettings_notifTable {
+ display: table;
+ position: relative;
+}
+.mx_UserNotifSettings_notifTable .mx_Spinner {
+ position: absolute;
+}
+.mx_NotificationSound_soundUpload {
+ display: none;
+}
+.mx_NotificationSound_browse {
+ color: #0dbd8b;
+ border: 1px solid #0dbd8b;
+ background-color: transparent;
+}
+.mx_NotificationSound_save {
+ margin-left: 5px;
+ color: #fff;
+ background-color: #0dbd8b;
+}
+.mx_NotificationSound_resetSound {
+ margin-top: 5px;
+ color: #fff;
+ border: #ff4b55;
+ background-color: #ff4b55;
+}
+.mx_ExistingPhoneNumber {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ margin-bottom: 5px;
+}
+.mx_ExistingPhoneNumber_delete {
+ margin-right: 5px;
+ cursor: pointer;
+ vertical-align: middle;
+}
+.mx_ExistingPhoneNumber_address,
+.mx_ExistingPhoneNumber_promptText {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ margin-right: 10px;
+}
+.mx_ExistingPhoneNumber_confirmBtn {
+ margin-left: 5px;
+}
+.mx_ExistingPhoneNumber_verification {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_ExistingPhoneNumber_verification .mx_Field {
+ margin: 0 0 0 1em;
+}
+.mx_PhoneNumbers_input {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_PhoneNumbers_input > .mx_Field {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+.mx_PhoneNumbers_country {
+ width: 80px;
+}
+.mx_ProfileSettings_controls_topic > textarea {
+ resize: vertical;
+}
+.mx_ProfileSettings_profile {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_ProfileSettings_controls {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ margin-right: 54px;
+}
+.mx_ProfileSettings_controls .mx_SettingsTab_subheading {
+ margin-top: 0;
+}
+.mx_ProfileSettings_controls .mx_Field #profileTopic {
+ height: 4em;
+}
+.mx_ProfileSettings_controls .mx_Field:first-child {
+ margin-top: 0;
+}
+.mx_ProfileSettings_hostingSignup {
+ margin-left: 20px;
+}
+.mx_ProfileSettings_hostingSignup img {
+ margin-left: 5px;
+}
+.mx_ProfileSettings_avatarUpload {
+ display: none;
+}
+.mx_ProfileSettings_profileForm {
+ margin-right: 100px;
+ border-bottom: 1px solid #e7e7e7;
+}
+.mx_ProfileSettings_buttons {
+ margin-top: 10px;
+ margin-bottom: 28px;
+}
+.mx_ProfileSettings_buttons > .mx_AccessibleButton_kind_link {
+ padding-left: 0;
+}
+.mx_SecureBackupPanel_deviceNotVerified,
+.mx_SecureBackupPanel_deviceVerified,
+.mx_SecureBackupPanel_sigInvalid,
+.mx_SecureBackupPanel_sigValid {
+ font-weight: 700;
+}
+.mx_SecureBackupPanel_deviceVerified,
+.mx_SecureBackupPanel_sigValid {
+ color: #76cfa5;
+}
+.mx_SecureBackupPanel_deviceNotVerified,
+.mx_SecureBackupPanel_sigInvalid {
+ color: #ba6363;
+}
+.mx_SecureBackupPanel_deviceName {
+ font-style: italic;
+}
+.mx_SecureBackupPanel_buttonRow {
+ margin: 1em 0;
+}
+.mx_SecureBackupPanel_buttonRow :nth-child(n + 1) {
+ -webkit-margin-end: 10px;
+ margin-inline-end: 10px;
+}
+.mx_SecureBackupPanel_statusList {
+ border-spacing: 0;
+}
+.mx_SecureBackupPanel_statusList td {
+ padding: 0;
+}
+.mx_SecureBackupPanel_statusList td:first-of-type {
+ -webkit-padding-end: 1em;
+ padding-inline-end: 1em;
+}
+.mx_SetIdServer .mx_Field_input {
+ margin-right: 100px;
+}
+.mx_SetIdServer_tooltip {
+ max-width: 120px;
+}
+.mx_SetIntegrationManager {
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
+.mx_SetIntegrationManager > .mx_SettingsTab_heading {
+ margin-bottom: 10px;
+}
+.mx_SetIntegrationManager
+ > .mx_SettingsTab_heading
+ > .mx_SettingsTab_subheading {
+ display: inline-block;
+ padding-left: 5px;
+}
+.mx_SetIntegrationManager .mx_ToggleSwitch {
+ display: inline-block;
+ float: right;
+ top: 9px;
+ margin-right: 100px;
+}
+.mx_ExistingSpellCheckLanguage {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ margin-bottom: 5px;
+}
+.mx_ExistingSpellCheckLanguage_language {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ margin-right: 10px;
+}
+.mx_GeneralUserSettingsTab_spellCheckLanguageInput {
+ margin-top: 1em;
+ margin-bottom: 1em;
+}
+.mx_SpellCheckLanguages {
+ margin-right: 100px;
+}
+.mx_UpdateCheckButton_summary {
+ margin-left: 16px;
+}
+.mx_UpdateCheckButton_summary .mx_AccessibleButton_kind_link {
+ padding: 0;
+}
+.mx_SettingsTab {
+ color: #61708b;
+}
+.mx_SettingsTab_warningText {
+ color: #ff4b55;
+}
+.mx_SettingsTab_heading {
+ font-size: 2rem;
+ font-weight: 600;
+ color: #2e2f32;
+ margin-bottom: 10px;
+}
+.mx_SettingsTab_heading:nth-child(n + 2) {
+ margin-top: 30px;
+}
+.mx_SettingsTab_subheading {
+ font-size: 1.6rem;
+ display: block;
+ font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ font-weight: 600;
+ color: #2e2f32;
+ margin-bottom: 10px;
+ margin-top: 12px;
+}
+.mx_SettingsTab_subsectionText {
+ color: #61708b;
+ font-size: 1.4rem;
+ display: block;
+ margin: 10px 100px 10px 0;
+}
+.mx_SettingsTab_section {
+ margin-bottom: 24px;
+}
+.mx_SettingsTab_section .mx_SettingsFlag {
+ margin-right: 100px;
+ margin-bottom: 10px;
+}
+.mx_SettingsTab_section.mx_SettingsTab_subsectionText .mx_SettingsFlag {
+ margin-right: 0 !important;
+}
+.mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label {
+ vertical-align: middle;
+ display: inline-block;
+ font-size: 1.4rem;
+ color: #2e2f32;
+ max-width: calc(100% - 4.8rem);
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ padding-right: 10px;
+}
+.mx_SettingsTab_section .mx_SettingsFlag .mx_ToggleSwitch {
+ float: right;
+}
+.mx_SettingsTab_linkBtn {
+ cursor: pointer;
+ color: #0dbd8b;
+ word-break: break-all;
+}
+.mx_SettingsTab a {
+ color: #238cf5;
+}
+.mx_GeneralRoomSettingsTab_profileSection {
+ margin-top: 10px;
+}
+.mx_RolesRoomSettingsTab ul {
+ margin-bottom: 0;
+}
+.mx_RolesRoomSettingsTab_unbanBtn {
+ margin-right: 10px;
+ margin-bottom: 5px;
+}
+.mx_SecurityRoomSettingsTab_warning {
+ display: block;
+}
+.mx_SecurityRoomSettingsTab_warning img {
+ vertical-align: middle;
+ margin-right: 5px;
+ margin-left: 3px;
+ margin-bottom: 5px;
+}
+.mx_SecurityRoomSettingsTab_encryptionSection {
+ margin-bottom: 25px;
+}
+.mx_AppearanceUserSettingsTab_fontSlider,
+.mx_AppearanceUserSettingsTab_fontSlider_preview,
+.mx_AppearanceUserSettingsTab_Layout {
+ margin-right: 100px;
+}
+.mx_AppearanceUserSettingsTab .mx_Field {
+ width: 256px;
+}
+.mx_AppearanceUserSettingsTab_fontScaling {
+ color: #2e2f32;
+}
+.mx_AppearanceUserSettingsTab_fontSlider {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ padding: 15px;
+ background: rgba(227, 232, 240, 0.2);
+ border-radius: 10px;
+ font-size: 10px;
+ margin-top: 24px;
+ margin-bottom: 24px;
+}
+.mx_AppearanceUserSettingsTab_fontSlider_preview {
+ border: 1px solid #e3e8f0;
+ border-radius: 10px;
+ padding: 0 16px 9px;
+ pointer-events: none;
+}
+.mx_AppearanceUserSettingsTab_fontSlider_preview .mx_EventTile_msgOption {
+ display: none;
+}
+.mx_AppearanceUserSettingsTab_fontSlider_preview.mx_IRCLayout {
+ padding-top: 9px;
+}
+.mx_AppearanceUserSettingsTab_fontSlider_smallText {
+ font-size: 15px;
+ padding-right: 20px;
+ padding-left: 5px;
+ font-weight: 500;
+}
+.mx_AppearanceUserSettingsTab_fontSlider_largeText {
+ font-size: 18px;
+ padding-left: 20px;
+ padding-right: 5px;
+ font-weight: 500;
+}
+.mx_AppearanceUserSettingsTab > .mx_SettingsTab_SubHeading {
+ margin-bottom: 32px;
+}
+.mx_AppearanceUserSettingsTab_themeSection {
+ color: #2e2f32;
+}
+.mx_AppearanceUserSettingsTab_themeSection > .mx_ThemeSelectors {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ margin-top: 4px;
+ margin-bottom: 30px;
+}
+.mx_AppearanceUserSettingsTab_themeSection
+ > .mx_ThemeSelectors
+ > .mx_RadioButton {
+ padding: 1.6rem;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ border-radius: 10px;
+ width: 180px;
+ background: #e3e8f0;
+ opacity: 0.4;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ -webkit-box-flex: 0;
+ -ms-flex-positive: 0;
+ flex-grow: 0;
+ margin-right: 15px;
+ margin-top: 10px;
+ font-weight: 600;
+ color: #61708b;
+}
+.mx_AppearanceUserSettingsTab_themeSection
+ > .mx_ThemeSelectors
+ > .mx_RadioButton
+ > span {
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_AppearanceUserSettingsTab_themeSection
+ > .mx_ThemeSelectors
+ > .mx_RadioButton_enabled {
+ opacity: 1;
+}
+.mx_AppearanceUserSettingsTab_themeSection
+ > .mx_ThemeSelectors
+ > .mx_RadioButton_enabled.mx_ThemeSelector_light {
+ background-color: #f3f8fd;
+ color: #2e2f32;
+}
+.mx_AppearanceUserSettingsTab_themeSection
+ > .mx_ThemeSelectors
+ > .mx_RadioButton_enabled.mx_ThemeSelector_dark {
+ background-color: #25282e;
+ color: #f3f8fd;
+}
+.mx_AppearanceUserSettingsTab_themeSection
+ > .mx_ThemeSelectors
+ > .mx_RadioButton_enabled.mx_ThemeSelector_dark
+ > input
+ > div,
+.mx_AppearanceUserSettingsTab_themeSection
+ > .mx_ThemeSelectors
+ > .mx_RadioButton_enabled.mx_ThemeSelector_dark
+ > input
+ > div
+ > div {
+ border-color: #e3e8f0;
+}
+.mx_AppearanceUserSettingsTab_themeSection
+ > .mx_ThemeSelectors
+ > .mx_RadioButton_enabled.mx_ThemeSelector_black {
+ background-color: #000;
+ color: #f3f8fd;
+}
+.mx_AppearanceUserSettingsTab_themeSection
+ > .mx_ThemeSelectors
+ > .mx_RadioButton_enabled.mx_ThemeSelector_black
+ > input
+ > div,
+.mx_AppearanceUserSettingsTab_themeSection
+ > .mx_ThemeSelectors
+ > .mx_RadioButton_enabled.mx_ThemeSelector_black
+ > input
+ > div
+ > div {
+ border-color: #e3e8f0;
+}
+.mx_SettingsTab_customFontSizeField {
+ margin-left: calc(1.6rem + 10px);
+}
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ color: #2e2f32;
+}
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons
+ .mx_AppearanceUserSettingsTab_spacer {
+ width: 24px;
+}
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons
+ > .mx_AppearanceUserSettingsTab_Layout_RadioButton {
+ -webkit-box-flex: 0;
+ -ms-flex-positive: 0;
+ flex-grow: 0;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ width: 300px;
+ border: 1px solid #e3e8f0;
+ border-radius: 10px;
+}
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons
+ > .mx_AppearanceUserSettingsTab_Layout_RadioButton
+ .mx_EventTile_msgOption,
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons
+ > .mx_AppearanceUserSettingsTab_Layout_RadioButton
+ .mx_MessageActionBar {
+ display: none;
+}
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons
+ > .mx_AppearanceUserSettingsTab_Layout_RadioButton
+ .mx_AppearanceUserSettingsTab_Layout_RadioButton_preview {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ padding: 10px;
+ pointer-events: none;
+}
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons
+ > .mx_AppearanceUserSettingsTab_Layout_RadioButton
+ .mx_RadioButton {
+ -webkit-box-flex: 0;
+ -ms-flex-positive: 0;
+ flex-grow: 0;
+ padding: 10px;
+}
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons
+ > .mx_AppearanceUserSettingsTab_Layout_RadioButton
+ .mx_EventTile_content {
+ margin-right: 0;
+}
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons
+ > .mx_AppearanceUserSettingsTab_Layout_RadioButton.mx_AppearanceUserSettingsTab_Layout_RadioButton_selected {
+ border-color: #0dbd8b;
+}
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton {
+ border-top: 1px solid #e3e8f0;
+}
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons
+ .mx_RadioButton
+ > input
+ + div {
+ border-color: rgba(97, 112, 139, 0.2);
+}
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton_checked {
+ background-color: rgba(13, 189, 139, 0.08);
+}
+.mx_AppearanceUserSettingsTab_Advanced {
+ color: #2e2f32;
+}
+.mx_AppearanceUserSettingsTab_Advanced > * {
+ margin-bottom: 16px;
+}
+.mx_AppearanceUserSettingsTab_Advanced
+ .mx_AppearanceUserSettingsTab_AdvancedToggle {
+ color: #0dbd8b;
+ cursor: pointer;
+}
+.mx_AppearanceUserSettingsTab_Advanced
+ .mx_AppearanceUserSettingsTab_systemFont {
+ margin-left: calc(1.6rem + 10px);
+}
+.mx_GeneralUserSettingsTab_changePassword .mx_Field {
+ margin-right: 100px;
+}
+.mx_GeneralUserSettingsTab_changePassword .mx_Field:first-child {
+ margin-top: 0;
+}
+.mx_GeneralUserSettingsTab_accountSection
+ .mx_SettingsTab_subheading:nth-child(n + 1),
+.mx_GeneralUserSettingsTab_discovery
+ .mx_SettingsTab_subheading:nth-child(n + 2),
+.mx_SetIdServer .mx_SettingsTab_subheading {
+ margin-top: 24px;
+}
+.mx_GeneralUserSettingsTab_accountSection .mx_Spinner,
+.mx_GeneralUserSettingsTab_discovery .mx_Spinner {
+ -webkit-box-pack: left;
+ -ms-flex-pack: left;
+ justify-content: left;
+}
+.mx_GeneralUserSettingsTab_accountSection .mx_EmailAddresses,
+.mx_GeneralUserSettingsTab_accountSection .mx_PhoneNumbers,
+.mx_GeneralUserSettingsTab_discovery .mx_ExistingEmailAddress,
+.mx_GeneralUserSettingsTab_discovery .mx_ExistingPhoneNumber,
+.mx_GeneralUserSettingsTab_languageInput {
+ margin-right: 100px;
+}
+.mx_GeneralUserSettingsTab_warningIcon {
+ vertical-align: middle;
+}
+.mx_HelpUserSettingsTab_debugButton {
+ margin-bottom: 5px;
+ margin-top: 5px;
+}
+.mx_HelpUserSettingsTab span.mx_AccessibleButton {
+ word-break: break-word;
+}
+.mx_HelpUserSettingsTab code {
+ word-break: break-all;
+ -webkit-user-select: all;
+ -moz-user-select: all;
+ -ms-user-select: all;
+ user-select: all;
+}
+.mx_HelpUserSettingsTab_accessToken {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ border-radius: 5px;
+ border: 1px solid #747474;
+ margin-bottom: 10px;
+ margin-top: 10px;
+ padding: 10px;
+}
+.mx_HelpUserSettingsTab_accessToken_copy {
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ cursor: pointer;
+ margin-left: 20px;
+ display: inherit;
+}
+.mx_HelpUserSettingsTab_accessToken_copy > div {
+ -webkit-mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
+ mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
+ background-color: #2e2f32;
+ margin-left: 5px;
+ width: 20px;
+ height: 20px;
+ background-repeat: no-repeat;
+}
+.mx_LabsUserSettingsTab .mx_SettingsTab_section {
+ margin-top: 32px;
+}
+.mx_LabsUserSettingsTab .mx_SettingsTab_section .mx_SettingsFlag {
+ margin-right: 0;
+}
+.mx_MjolnirUserSettingsTab .mx_Field {
+ margin-right: 100px;
+}
+.mx_MjolnirUserSettingsTab_listItem {
+ margin-bottom: 2px;
+}
+.mx_NotificationUserSettingsTab .mx_SettingsTab_heading {
+ margin-bottom: 10px;
+}
+.mx_PreferencesUserSettingsTab .mx_Field {
+ margin-right: 100px;
+}
+.mx_PreferencesUserSettingsTab .mx_SettingsTab_section {
+ margin-bottom: 30px;
+}
+.mx_SecurityUserSettingsTab .mx_DevicesPanel {
+ width: auto;
+ max-width: 880px;
+}
+.mx_SecurityUserSettingsTab_deviceInfo {
+ display: table;
+ padding-left: 0;
+}
+.mx_SecurityUserSettingsTab_deviceInfo > li {
+ display: table-row;
+}
+.mx_SecurityUserSettingsTab_deviceInfo > li > label,
+.mx_SecurityUserSettingsTab_deviceInfo > li > span {
+ display: table-cell;
+ padding-right: 1em;
+}
+.mx_SecurityUserSettingsTab_bulkOptions .mx_AccessibleButton,
+.mx_SecurityUserSettingsTab_importExportButtons .mx_AccessibleButton {
+ margin-right: 10px;
+}
+.mx_SecurityUserSettingsTab_importExportButtons {
+ margin-bottom: 15px;
+}
+.mx_SecurityUserSettingsTab_ignoredUser {
+ margin-bottom: 5px;
+}
+.mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton {
+ margin-right: 10px;
+}
+.mx_SecurityUserSettingsTab
+ .mx_SettingsTab_section
+ .mx_AccessibleButton_kind_link {
+ padding: 0;
+ font-size: inherit;
+}
+.mx_SecurityUserSettingsTab .mx_SecurityUserSettingsTab_warning {
+ color: #ff4b55;
+ position: relative;
+ padding-left: 40px;
+ margin-top: 30px;
+}
+.mx_SecurityUserSettingsTab .mx_SecurityUserSettingsTab_warning:before {
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: 0 center;
+ mask-position: 0 center;
+ -webkit-mask-size: 2.4rem;
+ mask-size: 2.4rem;
+ position: absolute;
+ width: 2.4rem;
+ height: 2.4rem;
+ content: "";
+ top: 0;
+ left: 0;
+ background-color: #ff4b55;
+ -webkit-mask-image: url(../../img/feather-customised/alert-triangle.38aca3a.svg);
+ mask-image: url(../../img/feather-customised/alert-triangle.38aca3a.svg);
+}
+.mx_VoiceUserSettingsTab .mx_Field {
+ margin-right: 100px;
+}
+.mx_VoiceUserSettingsTab_missingMediaPermissions {
+ margin-bottom: 15px;
+}
+.mx_SpaceBasicSettings .mx_Field {
+ margin: 32px 0;
+}
+.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin-top: 24px;
+}
+.mx_SpaceBasicSettings
+ .mx_SpaceBasicSettings_avatarContainer
+ .mx_SpaceBasicSettings_avatar {
+ position: relative;
+ height: 80px;
+ width: 80px;
+ background-color: #8d99a5;
+ border-radius: 16px;
+}
+.mx_SpaceBasicSettings
+ .mx_SpaceBasicSettings_avatarContainer
+ img.mx_SpaceBasicSettings_avatar {
+ width: 80px;
+ height: 80px;
+ -o-object-fit: cover;
+ object-fit: cover;
+ border-radius: 16px;
+}
+.mx_SpaceBasicSettings
+ .mx_SpaceBasicSettings_avatarContainer
+ div.mx_SpaceBasicSettings_avatar {
+ cursor: pointer;
+}
+.mx_SpaceBasicSettings
+ .mx_SpaceBasicSettings_avatarContainer
+ div.mx_SpaceBasicSettings_avatar:before {
+ content: "";
+ position: absolute;
+ height: 80px;
+ width: 80px;
+ top: 0;
+ left: 0;
+ background-color: #fff;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 20px;
+ mask-size: 20px;
+ -webkit-mask-image: url(../../img/element-icons/camera.a81a395.svg);
+ mask-image: url(../../img/element-icons/camera.a81a395.svg);
+}
+.mx_SpaceBasicSettings
+ .mx_SpaceBasicSettings_avatarContainer
+ > input[type="file"] {
+ display: none;
+}
+.mx_SpaceBasicSettings
+ .mx_SpaceBasicSettings_avatarContainer
+ > .mx_AccessibleButton_kind_link {
+ display: inline-block;
+ padding: 0;
+ margin: auto 16px;
+ color: #368bd6;
+}
+.mx_SpaceBasicSettings
+ .mx_SpaceBasicSettings_avatarContainer
+ > .mx_SpaceBasicSettings_avatar_remove {
+ color: #ff4b55;
+}
+.mx_SpaceBasicSettings .mx_FormButton {
+ padding: 8px 22px;
+ margin-left: auto;
+ display: block;
+ width: -webkit-min-content;
+ width: -moz-min-content;
+ width: min-content;
+}
+.mx_SpaceBasicSettings .mx_AccessibleButton_disabled {
+ cursor: not-allowed;
+}
+.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu_background {
+ background-color: rgba(46, 48, 51, 0.38);
+ opacity: 0.6;
+ left: 71px;
+}
+.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu {
+ padding: 24px;
+ width: 480px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ background-color: #fff;
+ position: relative;
+}
+.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu > div > h2 {
+ font-weight: 600;
+ font-size: 1.8rem;
+ margin-top: 4px;
+}
+.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu > div > p {
+ font-size: 1.5rem;
+ color: #737d8c;
+ margin: 0;
+}
+.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_BetaCard_betaPill {
+ position: absolute;
+ top: 24px;
+ right: 24px;
+}
+.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType {
+ position: relative;
+ padding: 16px 32px 16px 72px;
+ width: 432px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ border-radius: 8px;
+ border: 1px solid #e7e7e7;
+ font-size: 1.5rem;
+ margin: 20px 0;
+}
+.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType > h3 {
+ font-weight: 600;
+ margin: 0 0 4px;
+}
+.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType > span {
+ color: #737d8c;
+}
+.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:before {
+ position: absolute;
+ content: "";
+ width: 32px;
+ height: 32px;
+ top: 24px;
+ left: 20px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 24px;
+ mask-size: 24px;
+ background-color: #8d99a5;
+}
+.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover {
+ border-color: #0dbd8b;
+}
+.mx_SpaceCreateMenu_wrapper
+ .mx_ContextualMenu
+ .mx_SpaceCreateMenuType:hover:before {
+ background-color: #0dbd8b;
+}
+.mx_SpaceCreateMenu_wrapper
+ .mx_ContextualMenu
+ .mx_SpaceCreateMenuType:hover
+ > span {
+ color: #2e2f32;
+}
+.mx_SpaceCreateMenu_wrapper
+ .mx_ContextualMenu
+ .mx_SpaceCreateMenuType_public:before {
+ -webkit-mask-image: url(../../img/globe.8201f08.svg);
+ mask-image: url(../../img/globe.8201f08.svg);
+}
+.mx_SpaceCreateMenu_wrapper
+ .mx_ContextualMenu
+ .mx_SpaceCreateMenuType_private:before {
+ -webkit-mask-image: url(../../img/element-icons/lock.1f264bd.svg);
+ mask-image: url(../../img/element-icons/lock.1f264bd.svg);
+}
+.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenu_back {
+ width: 28px;
+ height: 28px;
+ position: relative;
+ background-color: rgba(141, 151, 165, 0.2);
+ border-radius: 14px;
+ margin-bottom: 12px;
+}
+.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenu_back:before {
+ content: "";
+ position: absolute;
+ height: 28px;
+ width: 28px;
+ top: 0;
+ left: 0;
+ background-color: #8d99a5;
+ -webkit-transform: rotate(90deg);
+ transform: rotate(90deg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: 2px 3px;
+ mask-position: 2px 3px;
+ -webkit-mask-size: 24px;
+ mask-size: 24px;
+ -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+ mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+}
+.mx_SpaceCreateMenu_wrapper
+ .mx_ContextualMenu
+ .mx_AccessibleButton_kind_primary {
+ padding: 8px 22px;
+ margin-left: auto;
+ display: block;
+ width: -webkit-min-content;
+ width: -moz-min-content;
+ width: min-content;
+}
+.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton_disabled {
+ cursor: not-allowed;
+}
+.mx_SpacePublicShare .mx_AccessibleButton {
+ position: relative;
+ padding: 16px 32px 16px 72px;
+ width: 432px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ border-radius: 8px;
+ border: 1px solid #e7e7e7;
+ font-size: 1.5rem;
+ margin: 20px 0;
+}
+.mx_SpacePublicShare .mx_AccessibleButton > h3 {
+ font-weight: 600;
+ margin: 0 0 4px;
+}
+.mx_SpacePublicShare .mx_AccessibleButton > span {
+ color: #737d8c;
+}
+.mx_SpacePublicShare .mx_AccessibleButton:before {
+ position: absolute;
+ content: "";
+ width: 32px;
+ height: 32px;
+ top: 24px;
+ left: 20px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 24px;
+ mask-size: 24px;
+ background-color: #8d99a5;
+}
+.mx_SpacePublicShare .mx_AccessibleButton:hover {
+ border-color: #0dbd8b;
+}
+.mx_SpacePublicShare .mx_AccessibleButton:hover:before {
+ background-color: #0dbd8b;
+}
+.mx_SpacePublicShare .mx_AccessibleButton:hover > span {
+ color: #2e2f32;
+}
+.mx_SpacePublicShare
+ .mx_AccessibleButton.mx_SpacePublicShare_shareButton:before {
+ -webkit-mask-image: url(../../img/element-icons/link.8f4b1fc.svg);
+ mask-image: url(../../img/element-icons/link.8f4b1fc.svg);
+}
+.mx_SpacePublicShare
+ .mx_AccessibleButton.mx_SpacePublicShare_inviteButton:before {
+ -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+ mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+}
+.mx_InlineTermsAgreement_cbContainer {
+ margin-bottom: 10px;
+ font-size: 1.4rem;
+}
+.mx_InlineTermsAgreement_cbContainer a {
+ color: #0dbd8b;
+ text-decoration: none;
+}
+.mx_InlineTermsAgreement_cbContainer .mx_InlineTermsAgreement_checkbox {
+ margin-top: 10px;
+}
+.mx_InlineTermsAgreement_cbContainer .mx_InlineTermsAgreement_checkbox input {
+ vertical-align: text-bottom;
+}
+.mx_InlineTermsAgreement_link {
+ display: inline-block;
+ -webkit-mask-image: url(../../img/external-link.a8d3e9b.svg);
+ mask-image: url(../../img/external-link.a8d3e9b.svg);
+ background-color: #0dbd8b;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ width: 12px;
+ height: 12px;
+ margin-left: 3px;
+ vertical-align: middle;
+}
+.mx_AnalyticsToast .mx_AccessibleButton_kind_danger {
+ background: none;
+ color: #0dbd8b;
+}
+.mx_AnalyticsToast .mx_AccessibleButton_kind_primary {
+ background: #0dbd8b;
+ color: #fff;
+}
+.mx_NonUrgentEchoFailureToast .mx_NonUrgentEchoFailureToast_icon {
+ display: inline-block;
+ width: 1.8rem;
+ height: 1.8rem;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background-color: #fff;
+ -webkit-mask-image: url(../../img/element-icons/cloud-off.33cd28e.svg);
+ mask-image: url(../../img/element-icons/cloud-off.33cd28e.svg);
+ margin-right: 8px;
+}
+.mx_NonUrgentEchoFailureToast span {
+ vertical-align: middle;
+}
+.mx_NonUrgentEchoFailureToast .mx_AccessibleButton {
+ padding: 0;
+}
+.mx_VerificationShowSas_decimalSas {
+ text-align: center;
+ font-weight: 700;
+ padding-left: 3px;
+ padding-right: 3px;
+}
+.mx_VerificationShowSas_decimalSas span {
+ margin-left: 5px;
+ margin-right: 5px;
+}
+.mx_VerificationShowSas_emojiSas {
+ text-align: center;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ margin: 25px 0;
+}
+.mx_VerificationShowSas_emojiSas_block {
+ display: inline-block;
+ margin-bottom: 16px;
+ position: relative;
+ width: 52px;
+}
+.mx_AuthPage_modal .mx_VerificationShowSas_emojiSas_block,
+.mx_Dialog .mx_VerificationShowSas_emojiSas_block {
+ width: 60px;
+}
+.mx_VerificationShowSas_emojiSas_emoji {
+ font-size: 3.2rem;
+}
+.mx_VerificationShowSas_emojiSas_label {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ font-size: 1.2rem;
+}
+.mx_VerificationShowSas_emojiSas_break {
+ -ms-flex-preferred-size: 100%;
+ flex-basis: 100%;
+}
+.mx_VerificationShowSas
+ .mx_Dialog_buttons
+ button.mx_VerificationShowSas_matchButton {
+ color: #0dbd8b;
+ background-color: rgba(3, 179, 129, 0.16);
+ border: none;
+}
+.mx_VerificationShowSas
+ .mx_Dialog_buttons
+ button.mx_VerificationShowSas_noMatchButton {
+ color: #ff4b55;
+ background-color: rgba(255, 75, 85, 0.16);
+ border: none;
+}
+.mx_PlayPauseButton {
+ position: relative;
+ width: 32px;
+ height: 32px;
+ border-radius: 32px;
+ background-color: #fff;
+}
+.mx_PlayPauseButton:before {
+ content: "";
+ position: absolute;
+ background-color: #737d8c;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+}
+.mx_PlayPauseButton.mx_PlayPauseButton_disabled:before {
+ opacity: 0.5;
+}
+.mx_PlayPauseButton.mx_PlayPauseButton_play:before {
+ width: 13px;
+ height: 16px;
+ top: 8px;
+ left: 12px;
+ -webkit-mask-image: url(../../img/element-icons/play.a72552b.svg);
+ mask-image: url(../../img/element-icons/play.a72552b.svg);
+}
+.mx_PlayPauseButton.mx_PlayPauseButton_pause:before {
+ width: 10px;
+ height: 12px;
+ top: 10px;
+ left: 11px;
+ -webkit-mask-image: url(../../img/element-icons/pause.c4c0886.svg);
+ mask-image: url(../../img/element-icons/pause.c4c0886.svg);
+}
+.mx_VoiceMessagePrimaryContainer {
+ padding: 7px 12px 7px 11px;
+ background-color: #e3e8f0;
+ border-radius: 12px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #737d8c;
+ font-size: 1.4rem;
+ line-height: 2.4rem;
+}
+.mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar {
+ background-color: #c1c6cd;
+}
+.mx_VoiceMessagePrimaryContainer
+ .mx_Waveform
+ .mx_Waveform_bar.mx_Waveform_bar_100pct {
+ -webkit-transition: background-color 0.25s ease;
+ transition: background-color 0.25s ease;
+ background-color: #737d8c;
+}
+.mx_VoiceMessagePrimaryContainer .mx_Clock {
+ width: 4.2rem;
+ padding-right: 6px;
+ padding-left: 8px;
+}
+.mx_Waveform {
+ position: relative;
+ height: 30px;
+ top: 1px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ overflow: hidden;
+}
+.mx_Waveform .mx_Waveform_bar {
+ width: 0;
+ border: 1px solid transparent;
+ border-radius: 2px;
+ min-height: 0;
+ max-height: 100%;
+ margin-left: 1px;
+ margin-right: 1px;
+}
+.mx_CallContainer {
+ position: absolute;
+ right: 20px;
+ bottom: 72px;
+ z-index: 100;
+ pointer-events: none;
+}
+.mx_CallContainer .mx_CallPreview {
+ pointer-events: auto;
+ cursor: pointer;
+}
+.mx_CallContainer .mx_CallPreview .mx_CallView_video {
+ width: 350px;
+}
+.mx_CallContainer .mx_CallPreview .mx_VideoFeed_local {
+ border-radius: 8px;
+ overflow: hidden;
+}
+.mx_CallContainer .mx_AppTile_persistedWrapper div {
+ min-width: 350px;
+}
+.mx_CallContainer .mx_IncomingCallBox {
+ min-width: 250px;
+ background-color: #f4f6fa;
+ padding: 8px;
+ -webkit-box-shadow: 0 14px 24px rgba(0, 0, 0, 0.08);
+ box-shadow: 0 14px 24px rgba(0, 0, 0, 0.08);
+ border-radius: 8px;
+ pointer-events: auto;
+ cursor: pointer;
+}
+.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ direction: row;
+}
+.mx_CallContainer
+ .mx_IncomingCallBox
+ .mx_IncomingCallBox_CallerInfo
+ .mx_BaseAvatar_initial,
+.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo img {
+ margin: 8px;
+}
+.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo > div {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo h1,
+.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo p {
+ margin: 0;
+ padding: 0;
+ font-size: 1.4rem;
+ line-height: 1.6rem;
+}
+.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo h1 {
+ font-weight: 700;
+}
+.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons {
+ padding: 8px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+}
+.mx_CallContainer
+ .mx_IncomingCallBox
+ .mx_IncomingCallBox_buttons
+ > .mx_IncomingCallBox_spacer {
+ width: 8px;
+}
+.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons > * {
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ margin-right: 0;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+}
+.mx_CallView {
+ border-radius: 8px;
+ background-color: #f2f5f8;
+ padding-left: 8px;
+ padding-right: 8px;
+ pointer-events: auto;
+}
+.mx_CallView_large {
+ padding-bottom: 10px;
+ margin: 5px 5px 5px 18px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_CallView_large,
+.mx_CallView_large .mx_CallView_voice {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+}
+.mx_CallView_pip {
+ width: 320px;
+ padding-bottom: 8px;
+ margin-top: 10px;
+ background-color: #f4f6fa;
+ -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+ border-radius: 8px;
+}
+.mx_CallView_pip .mx_CallView_voice {
+ height: 180px;
+}
+.mx_CallView_pip .mx_CallView_callControls {
+ bottom: 0;
+}
+.mx_CallView_pip .mx_CallView_callControls_button:before {
+ width: 36px;
+ height: 36px;
+}
+.mx_CallView_pip .mx_CallView_holdTransferContent {
+ padding-top: 10px;
+ padding-bottom: 25px;
+}
+.mx_CallView_content {
+ position: relative;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ border-radius: 8px;
+}
+.mx_CallView_voice {
+ -webkit-box-orient: vertical;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ background-color: #27303a;
+}
+.mx_CallView_voice,
+.mx_CallView_voice_avatarsContainer {
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-direction: normal;
+}
+.mx_CallView_voice_avatarsContainer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+}
+.mx_CallView_voice_avatarsContainer div {
+ margin-left: 12px;
+ margin-right: 12px;
+}
+.mx_CallView_voice
+ .mx_CallView_holdTransferContent
+ .mx_CallView_voice_avatarContainer {
+ border-radius: 2000px;
+ overflow: hidden;
+ position: relative;
+}
+.mx_CallView_holdTransferContent {
+ height: 20px;
+ padding-top: 20px;
+ padding-bottom: 15px;
+ color: #fff;
+}
+.mx_CallView_holdTransferContent .mx_AccessibleButton_hasKind {
+ padding: 0;
+ font-weight: 700;
+}
+.mx_CallView_video {
+ width: 100%;
+ height: 100%;
+ z-index: 30;
+ overflow: hidden;
+}
+.mx_CallView_video_hold {
+ overflow: hidden;
+}
+.mx_CallView_video_hold .mx_VideoFeed {
+ visibility: hidden;
+}
+.mx_CallView_video_holdBackground {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ right: 0;
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: 50%;
+ -webkit-filter: blur(20px);
+ filter: blur(20px);
+}
+.mx_CallView_video_holdBackground:after {
+ content: "";
+ display: block;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ right: 0;
+ background-color: rgba(0, 0, 0, 0.6);
+}
+.mx_CallView_video .mx_CallView_holdTransferContent {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ font-weight: 700;
+ color: #fff;
+ text-align: center;
+}
+.mx_CallView_video .mx_CallView_holdTransferContent:before {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ content: "";
+ width: 40px;
+ height: 40px;
+ background-image: url(../../img/voip/paused.77799b3.svg);
+ background-position: 50%;
+ background-size: cover;
+}
+.mx_CallView_pip .mx_CallView_video .mx_CallView_holdTransferContent:before {
+ width: 30px;
+ height: 30px;
+}
+.mx_CallView_video
+ .mx_CallView_holdTransferContent
+ .mx_AccessibleButton_hasKind {
+ padding: 0;
+}
+.mx_CallView_header {
+ height: 44px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: left;
+ -ms-flex-pack: left;
+ justify-content: left;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+}
+.mx_CallView_header_callType {
+ font-size: 1.2rem;
+ font-weight: 700;
+ vertical-align: middle;
+}
+.mx_CallView_header_secondaryCallInfo:before {
+ content: "·";
+ margin-left: 6px;
+ margin-right: 6px;
+}
+.mx_CallView_header_controls {
+ margin-left: auto;
+}
+.mx_CallView_header_button {
+ display: inline-block;
+ vertical-align: middle;
+ cursor: pointer;
+}
+.mx_CallView_header_button:before {
+ content: "";
+ display: inline-block;
+ height: 20px;
+ width: 20px;
+ vertical-align: middle;
+ background-color: #737d8c;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+.mx_CallView_header_button_fullscreen:before {
+ -webkit-mask-image: url(../../img/element-icons/call/fullscreen.43be138.svg);
+ mask-image: url(../../img/element-icons/call/fullscreen.43be138.svg);
+}
+.mx_CallView_header_button_expand:before {
+ -webkit-mask-image: url(../../img/element-icons/call/expand.7ef9f56.svg);
+ mask-image: url(../../img/element-icons/call/expand.7ef9f56.svg);
+}
+.mx_CallView_header_callInfo {
+ margin-left: 12px;
+ margin-right: 16px;
+}
+.mx_CallView_header_roomName {
+ font-weight: 700;
+ font-size: 12px;
+ line-height: normal;
+ height: 15px;
+}
+.mx_CallView_secondaryCall_roomName {
+ margin-left: 4px;
+}
+.mx_CallView_header_callTypeSmall {
+ font-size: 12px;
+ color: #737d8c;
+ line-height: normal;
+ height: 15px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ max-width: 240px;
+}
+.mx_CallView_header_phoneIcon {
+ display: inline-block;
+ margin-right: 6px;
+ height: 16px;
+ width: 16px;
+ vertical-align: middle;
+}
+.mx_CallView_header_phoneIcon:before {
+ content: "";
+ display: inline-block;
+ vertical-align: top;
+ height: 16px;
+ width: 16px;
+ background-color: #ff4b55;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
+ mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
+}
+.mx_CallView_callControls {
+ position: absolute;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ bottom: 5px;
+ width: 100%;
+ opacity: 1;
+ -webkit-transition: opacity 0.5s;
+ transition: opacity 0.5s;
+}
+.mx_CallView_callControls_hidden {
+ opacity: 0.001;
+ pointer-events: none;
+}
+.mx_CallView_callControls_button {
+ cursor: pointer;
+ margin-left: 8px;
+ margin-right: 8px;
+}
+.mx_CallView_callControls_button:before {
+ content: "";
+ display: inline-block;
+ height: 48px;
+ width: 48px;
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-position: 50%;
+}
+.mx_CallView_callControls_dialpad {
+ margin-right: auto;
+}
+.mx_CallView_callControls_dialpad:before {
+ background-image: url(../../img/voip/dialpad.fdda9a0.svg);
+}
+.mx_CallView_callControls_button_dialpad_hidden {
+ margin-right: auto;
+ cursor: auto;
+}
+.mx_CallView_callControls_button_micOn:before {
+ background-image: url(../../img/voip/mic-on.2592c14.svg);
+}
+.mx_CallView_callControls_button_micOff:before {
+ background-image: url(../../img/voip/mic-off.774e42b.svg);
+}
+.mx_CallView_callControls_button_vidOn:before {
+ background-image: url(../../img/voip/vid-on.b9b8bbf.svg);
+}
+.mx_CallView_callControls_button_vidOff:before {
+ background-image: url(../../img/voip/vid-off.5552596.svg);
+}
+.mx_CallView_callControls_button_hangup:before {
+ background-image: url(../../img/voip/hangup.9c3adeb.svg);
+}
+.mx_CallView_callControls_button_more {
+ margin-left: auto;
+}
+.mx_CallView_callControls_button_more:before {
+ background-image: url(../../img/voip/more.5e8055e.svg);
+}
+.mx_CallView_callControls_button_more_hidden {
+ margin-left: auto;
+ cursor: auto;
+}
+.mx_CallView_callControls_button_invisible {
+ visibility: hidden;
+ pointer-events: none;
+ position: absolute;
+}
+.mx_CallViewForRoom {
+ overflow: hidden;
+}
+.mx_CallViewForRoom .mx_CallViewForRoom_ResizeWrapper {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin-bottom: 8px;
+}
+.mx_CallViewForRoom
+ .mx_CallViewForRoom_ResizeWrapper:hover
+ .mx_CallViewForRoom_ResizeHandle {
+ width: 100% !important;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_CallViewForRoom
+ .mx_CallViewForRoom_ResizeWrapper:hover
+ .mx_CallViewForRoom_ResizeHandle:after {
+ content: "";
+ margin-top: 3px;
+ border-radius: 4px;
+ height: 4px;
+ width: 100%;
+ max-width: 64px;
+ background-color: #2e2f32;
+}
+.mx_DialPad {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ grid-gap: 16px;
+ gap: 16px;
+}
+.mx_DialPad_button {
+ width: 40px;
+ height: 40px;
+ background-color: #e3e8f0;
+ border-radius: 40px;
+ font-size: 18px;
+ font-weight: 600;
+ text-align: center;
+ vertical-align: middle;
+ line-height: 40px;
+}
+.mx_DialPad_deleteButton:before,
+.mx_DialPad_dialButton:before {
+ content: "";
+ display: inline-block;
+ height: 40px;
+ width: 40px;
+ vertical-align: middle;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 20px;
+ mask-size: 20px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ background-color: #fff;
+}
+.mx_DialPad_deleteButton {
+ background-color: #ff4b55;
+}
+.mx_DialPad_deleteButton:before {
+ -webkit-mask-image: url(../../img/element-icons/call/delete.833d785.svg);
+ mask-image: url(../../img/element-icons/call/delete.833d785.svg);
+ -webkit-mask-position: 9px;
+ mask-position: 9px;
+}
+.mx_DialPad_dialButton {
+ background-color: #0dbd8b;
+}
+.mx_DialPad_dialButton:before {
+ -webkit-mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
+ mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
+}
+.mx_DialPadContextMenu_header {
+ margin-top: 12px;
+ margin-left: 12px;
+ margin-right: 12px;
+}
+.mx_DialPadContextMenu_title {
+ color: #61708b;
+ font-size: 12px;
+ font-weight: 600;
+}
+.mx_DialPadContextMenu_dialled {
+ height: 1em;
+ font-size: 18px;
+ font-weight: 600;
+}
+.mx_DialPadContextMenu_dialPad {
+ margin: 16px;
+}
+.mx_DialPadContextMenu_horizSep {
+ position: relative;
+}
+.mx_DialPadContextMenu_horizSep:before {
+ content: "";
+ position: absolute;
+ width: 100%;
+ border-bottom: 1px solid #e3e8f0;
+}
+.mx_Dialog_dialPadWrapper .mx_Dialog {
+ padding: 0;
+}
+.mx_DialPadModal {
+ width: 192px;
+ height: 368px;
+}
+.mx_DialPadModal_header {
+ margin-top: 12px;
+ margin-left: 12px;
+ margin-right: 12px;
+}
+.mx_DialPadModal_title {
+ color: #61708b;
+ font-size: 12px;
+ font-weight: 600;
+}
+.mx_DialPadModal_cancel {
+ float: right;
+ -webkit-mask: url(../../img/feather-customised/cancel.23c2689.svg);
+ mask: url(../../img/feather-customised/cancel.23c2689.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: cover;
+ mask-size: cover;
+ width: 14px;
+ height: 14px;
+ background-color: #c1c1c1;
+ cursor: pointer;
+}
+.mx_DialPadModal_field {
+ border: none;
+ margin: 0;
+}
+.mx_DialPadModal_field input {
+ font-size: 18px;
+ font-weight: 600;
+}
+.mx_DialPadModal_dialPad {
+ margin-left: 16px;
+ margin-right: 16px;
+ margin-top: 16px;
+}
+.mx_DialPadModal_horizSep {
+ position: relative;
+}
+.mx_DialPadModal_horizSep:before {
+ content: "";
+ position: absolute;
+ width: 100%;
+ border-bottom: 1px solid #e3e8f0;
+}
+.mx_VideoFeed_voice {
+ padding-bottom: 52px;
+ background-color: #27303a;
+}
+.mx_VideoFeed_remote {
+ width: 100%;
+ height: 100%;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_VideoFeed_remote.mx_VideoFeed_video {
+ background-color: #000;
+}
+.mx_VideoFeed_local {
+ max-width: 25%;
+ max-height: 25%;
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ z-index: 100;
+ border-radius: 4px;
+}
+.mx_VideoFeed_local.mx_VideoFeed_video {
+ background-color: transparent;
+}
+.mx_VideoFeed_mirror {
+ -webkit-transform: scaleX(-1);
+ transform: scaleX(-1);
+}
`
const snackbarCSS = `
#snackbar {
@@ -17,7 +19480,7 @@ const snackbarCSS = `
bottom: 30px;
font-size: 17px;
padding: 6px 16px;
- font-family: Inter, "Roboto", "Helvetica", "Arial", sans-serif;
+ font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
font-weight: 400;
line-height: 1.43;
border-radius: 4px;
From 4c22d1f2a13b7a003d5eebe81e0fa23193d3cbf5 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Thu, 3 Jun 2021 13:21:56 +0530
Subject: [PATCH 041/176] Refactor
---
src/utils/exportUtils/Exporter.ts | 31 +++++++++++++++++++-
src/utils/exportUtils/HtmlExport.tsx | 42 +++++++++++++++-------------
src/utils/exportUtils/exportUtils.ts | 34 ++--------------------
3 files changed, 55 insertions(+), 52 deletions(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index c782cc5a63..5e2de1faf1 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -1,7 +1,36 @@
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+import { TimelineWindow } from "matrix-js-sdk/src/timeline-window";
+import { arrayFastClone } from "../arrays";
export abstract class Exporter {
- constructor(protected res: MatrixEvent[], protected room: Room) {}
+ constructor(protected room: Room) {}
+
+ protected getTimelineConversation = () : MatrixEvent => {
+ if (!this.room) return;
+
+ const cli = MatrixClientPeg.get();
+
+ const timelineSet = this.room.getUnfilteredTimelineSet();
+
+ const timelineWindow = new TimelineWindow(
+ cli, timelineSet,
+ {windowLimit: Number.MAX_VALUE});
+
+ timelineWindow.load(null, 30);
+
+ const events = timelineWindow.getEvents();
+
+ // Clone and reverse the events so that we preserve the order
+ arrayFastClone(events)
+ .reverse()
+ .forEach(event => {
+ cli.decryptEventIfNeeded(event);
+ });
+
+ return events;
+ };
+
abstract export(): Promise<Blob>;
}
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 1432b61e85..c3174285e5 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -11,25 +11,25 @@ import { Layout } from "../../settings/Layout";
import { shouldFormContinuation } from "../../components/structures/MessagePanel";
import { formatFullDateNoDay, formatFullDateNoDayNoTime, wantsDateSeparator } from "../../DateUtils";
import { RoomPermalinkCreator } from "../permalinks/Permalinks";
+import { _t } from "../../languageHandler";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+import { EventType } from "matrix-js-sdk/src/@types/event";
import * as ponyfill from "web-streams-polyfill/ponyfill"
import * as Avatar from "../../Avatar";
import EventTile, { haveTileForEvent } from "../../components/views/rooms/EventTile";
import DateSeparator from "../../components/views/messages/DateSeparator";
+import BaseAvatar from "../../components/views/avatars/BaseAvatar";
import exportCSS from "./exportCSS";
import exportJS from "./exportJS";
-import BaseAvatar from "../../components/views/avatars/BaseAvatar";
import exportIcons from "./exportIcons";
-import { _t } from "../../languageHandler";
-import { MatrixClientPeg } from "../../MatrixClientPeg";
-import { EventType } from "matrix-js-sdk/src/@types/event";
export default class HTMLExporter extends Exporter {
protected zip: JSZip;
protected avatars: Map<string, boolean>;
protected permalinkCreator: RoomPermalinkCreator;
- constructor(res: MatrixEvent[], room: Room) {
- super(res, room);
+ constructor(room: Room) {
+ super(room);
this.zip = new JSZip();
this.avatars = new Map<string, boolean>();
this.permalinkCreator = new RoomPermalinkCreator(this.room);
@@ -57,16 +57,16 @@ export default class HTMLExporter extends Exporter {
return renderToStaticMarkup(avatar);
}
- protected async wrapHTML(content: string, room: Room) {
+ protected async wrapHTML(content: string) {
const roomAvatar32 = await this.getRoomAvatar(32);
const exportDate = formatFullDateNoDayNoTime(new Date());
const cli = MatrixClientPeg.get();
- const creator = room.currentState.getStateEvents(EventType.RoomCreate, "")?.getSender();
- const creatorName = room?.getMember(creator)?.rawDisplayName || creator;
+ const creator = this.room.currentState.getStateEvents(EventType.RoomCreate, "")?.getSender();
+ const creatorName = this.room?.getMember(creator)?.rawDisplayName || creator;
const exporter = cli.getUserId();
- const exporterName = room?.getMember(exporter)?.rawDisplayName;
- const topic = room.currentState.getStateEvents(EventType.RoomTopic, "")?.getContent()?.topic
- || room.topic || "";
+ const exporterName = this.room?.getMember(exporter)?.rawDisplayName;
+ const topic = this.room.currentState.getStateEvents(EventType.RoomTopic, "")?.getContent()?.topic
+ || this.room.topic || "";
const createdText = _t("%(creatorName)s created this room.", {
creatorName,
});
@@ -74,7 +74,7 @@ export default class HTMLExporter extends Exporter {
const exportedText = _t(`This is the start of export of <b>%(roomName)s</b>.
Exported by %(exporterDetails)s at %(exportDate)s. `, {
exportDate,
- roomName: room.name,
+ roomName: this.room.name,
exporterDetails: `<a href="https://matrix.to/#/${exporter}" target="_blank" rel="noopener noreferrer">
${exporterName ? `<b>${ exporterName }</b>(${ exporter })` : `<b>${ exporter }</b>`}
</a>`,
@@ -115,9 +115,9 @@ export default class HTMLExporter extends Exporter {
<div
dir="auto"
class="mx_RoomHeader_nametext"
- title="${room.name}"
+ title="${this.room.name}"
>
- ${room.name}
+ ${this.room.name}
</div>
</div>
<div class="mx_RoomHeader_topic" dir="auto"> ${topic} </div>
@@ -144,7 +144,7 @@ export default class HTMLExporter extends Exporter {
>
<div class="mx_NewRoomIntro">
${roomAvatar52}
- <h2> ${room.name} </h2>
+ <h2> ${this.room.name} </h2>
<p> ${createdText} <br/><br/> ${exportedText} </p>
<p> ${topicText} </p>
</div>
@@ -294,7 +294,7 @@ export default class HTMLExporter extends Exporter {
return renderToStaticMarkup(eventTile);
}
- protected async createHTML(events: MatrixEvent[], room: Room) {
+ protected async createHTML(events: MatrixEvent[]) {
let content = "";
let prevEvent = null;
for (const event of events) {
@@ -308,17 +308,21 @@ export default class HTMLExporter extends Exporter {
content += body;
prevEvent = event;
}
- return await this.wrapHTML(content, room);
+ return await this.wrapHTML(content);
}
public async export() {
- const html = await this.createHTML(this.res, this.room);
+ const res = this.getTimelineConversation();
+ const html = await this.createHTML(res);
+
this.zip.file("index.html", html);
this.zip.file("css/style.css", exportCSS);
this.zip.file("js/script.js", exportJS);
+
for (const iconName in exportIcons) {
this.zip.file(`icons/${iconName}`, exportIcons[iconName]);
}
+
const filename = `matrix-export-${formatFullDateNoDay(new Date())}.zip`;
//Generate the zip file asynchronously
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 5e1c4fffbb..34edee0ac6 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -1,7 +1,4 @@
-import { MatrixClientPeg } from "../../MatrixClientPeg";
-import { arrayFastClone } from "../arrays";
-import { TimelineWindow } from "matrix-js-sdk/src/timeline-window";
-import Room from 'matrix-js-sdk/src/models/room';
+import { Room } from 'matrix-js-sdk/src/models/room';
import HTMLExporter from "./HtmlExport";
export enum exportFormats {
@@ -14,37 +11,10 @@ export enum exportOptions {
TIMELINE = "TIMELINE",
}
-const getTimelineConversation = (room: Room) => {
- if (!room) return;
-
- const cli = MatrixClientPeg.get();
-
- const timelineSet = room.getUnfilteredTimelineSet();
-
- const timelineWindow = new TimelineWindow(
- cli, timelineSet,
- {windowLimit: Number.MAX_VALUE});
-
- timelineWindow.load(null, 30);
-
- const events = timelineWindow.getEvents();
-
- // Clone and reverse the events so that we preserve the order
- arrayFastClone(events)
- .reverse()
- .forEach(event => {
- cli.decryptEventIfNeeded(event);
- });
-
- return events;
-};
-
-
const exportConversationalHistory = async (room: Room, format: string, options) => {
- const res = getTimelineConversation(room);
switch (format) {
case exportFormats.HTML:
- await new HTMLExporter(res, room).export();
+ await new HTMLExporter(room).export();
break;
case exportFormats.JSON:
break;
From e7f0df7fcc57de7905abc6cf22971277f0572449 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Thu, 3 Jun 2021 13:39:14 +0530
Subject: [PATCH 042/176] Small fix
---
src/utils/exportUtils/Exporter.ts | 4 ++--
src/utils/exportUtils/HtmlExport.tsx | 2 +-
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 5e2de1faf1..6bdf5319f0 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -4,10 +4,10 @@ import { MatrixClientPeg } from "../../MatrixClientPeg";
import { TimelineWindow } from "matrix-js-sdk/src/timeline-window";
import { arrayFastClone } from "../arrays";
-export abstract class Exporter {
+export default abstract class Exporter {
constructor(protected room: Room) {}
- protected getTimelineConversation = () : MatrixEvent => {
+ protected getTimelineConversation = () : MatrixEvent[] => {
if (!this.room) return;
const cli = MatrixClientPeg.get();
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index c3174285e5..371ce9fffc 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -1,11 +1,11 @@
import React from "react"
import streamSaver from "streamsaver";
import JSZip from "jszip";
+import Exporter from "./Exporter";
import { decryptFile } from "../DecryptFile";
import { mediaFromContent, mediaFromMxc } from "../../customisations/Media";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { Exporter } from "./Exporter";
import { renderToStaticMarkup } from 'react-dom/server'
import { Layout } from "../../settings/Layout";
import { shouldFormContinuation } from "../../components/structures/MessagePanel";
From f32726d5ede52decae84812556bf94cfe6c5ebc0 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 4 Jun 2021 15:08:17 +0530
Subject: [PATCH 043/176] Begin extended implementation
---
src/components/views/rooms/RoomHeader.js | 5 +-
src/utils/exportUtils/Exporter.ts | 122 ++++++++++++++++++++++-
src/utils/exportUtils/HtmlExport.tsx | 23 +++--
src/utils/exportUtils/exportUtils.ts | 15 ++-
4 files changed, 145 insertions(+), 20 deletions(-)
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 717a5cecb7..b05156e1ef 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -32,8 +32,7 @@ import RoomTopic from "../elements/RoomTopic";
import RoomName from "../elements/RoomName";
import {PlaceCallType} from "../../../CallHandler";
import {replaceableComponent} from "../../../utils/replaceableComponent";
-import exportConversationalHistory from '../../../utils/exportUtils/exportUtils';
-import { exportFormats, exportOptions } from '../../../utils/exportUtils/exportUtils';
+import exportConversationalHistory, { exportTypes, exportFormats } from '../../../utils/exportUtils/exportUtils';
@replaceableComponent("views.rooms.RoomHeader")
@@ -121,7 +120,7 @@ export default class RoomHeader extends React.Component {
}
_exportConvertionalHistory = async () => {
- await exportConversationalHistory(this.props.room, exportFormats.HTML, exportOptions.TIMELINE);
+ await exportConversationalHistory(this.props.room, exportFormats.HTML, exportTypes.LAST_N_MESSAGES, 30);
}
render() {
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 6bdf5319f0..21b231163b 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -3,9 +3,11 @@ import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixClientPeg } from "../../MatrixClientPeg";
import { TimelineWindow } from "matrix-js-sdk/src/timeline-window";
import { arrayFastClone } from "../arrays";
+import { exportTypes } from "./exportUtils";
+import { RoomMember } from 'matrix-js-sdk/src/models/room-member';
export default abstract class Exporter {
- constructor(protected room: Room) {}
+ constructor(protected room: Room, protected exportType: exportTypes, protected numberOfEvents?: number) {}
protected getTimelineConversation = () : MatrixEvent[] => {
if (!this.room) return;
@@ -20,7 +22,7 @@ export default abstract class Exporter {
timelineWindow.load(null, 30);
- const events = timelineWindow.getEvents();
+ const events: MatrixEvent[] = timelineWindow.getEvents();
// Clone and reverse the events so that we preserve the order
arrayFastClone(events)
@@ -32,5 +34,121 @@ export default abstract class Exporter {
return events;
};
+ protected eventToJson(ev) {
+ const jsonEvent = ev.toJSON();
+ const e = ev.isEncrypted() ? jsonEvent.decrypted : jsonEvent;
+ if (ev.isEncrypted()) {
+ e.curve25519Key = ev.getSenderKey();
+ e.ed25519Key = ev.getClaimedEd25519Key();
+ e.algorithm = ev.getWireContent().algorithm;
+ e.forwardingCurve25519KeyChain = ev.getForwardingCurve25519KeyChain();
+ } else {
+ delete e.curve25519Key;
+ delete e.ed25519Key;
+ delete e.algorithm;
+ delete e.forwardingCurve25519KeyChain;
+ }
+ return e;
+ }
+
+
+ protected getRequiredEvents = async () : Promise<MatrixEvent[]> => {
+ const client = MatrixClientPeg.get();
+ const eventMapper = client.getEventMapper({ preventReEmit: true });
+
+ let prevToken: string|null = null;
+ let limit = this.numberOfEvents || Number.MAX_VALUE;
+ let events: MatrixEvent[] = [];
+ const stateRes: any[] = [];
+ while (limit) {
+ const eventsPerCrawl = Math.min(limit, 100);
+ const res = await client._createMessagesRequest(this.room.roomId, prevToken, eventsPerCrawl, "b");
+
+ if (res.state) stateRes.push(...res.state);
+ if (res.chunk.length === 0) break;
+
+ limit -= eventsPerCrawl;
+
+ const matrixEvents: MatrixEvent[] = res.chunk.map(eventMapper);
+
+ matrixEvents.forEach(mxEv => events.push(mxEv));
+
+ prevToken = res.end;
+ }
+ events = events.reverse()
+ let stateEvents = [];
+ if (stateRes !== undefined) {
+ stateEvents = stateRes.map(eventMapper);
+ }
+
+ const profiles = {};
+
+ stateEvents.forEach(ev => {
+ if (ev.event.content &&
+ ev.event.content.membership === "join") {
+ profiles[ev.event.sender] = {
+ displayname: ev.event.content.displayname,
+ avatar_url: ev.event.content.avatar_url,
+ };
+ }
+ });
+
+ const decryptionPromises = events
+ .filter(event => event.isEncrypted())
+ .map(event => {
+ return client.decryptEventIfNeeded(event, {
+ isRetry: true,
+ emit: false,
+ });
+ });
+
+ // Let us wait for all the events to get decrypted.
+ await Promise.all(decryptionPromises);
+
+ const eventsWithProfile = events.map((ev) => {
+ const e = this.eventToJson(ev);
+
+ let profile: any = {};
+ if (e.sender in profiles) profile = profiles[e.sender];
+ const object = {
+ event: e,
+ profile: profile,
+ };
+ return object;
+ });
+
+ const matrixEvents = eventsWithProfile.map(e => {
+ const matrixEvent = eventMapper(e.event);
+
+ const member = new RoomMember(this.room.roomId, matrixEvent.getSender());
+
+ member.name = e.profile.displayname;
+
+ const memberEvent = eventMapper(
+ {
+ content: {
+ membership: "join",
+ avatar_url: e.profile.avatar_url,
+ displayname: e.profile.displayname,
+ },
+ type: "m.room.member",
+ event_id: matrixEvent.getId() + ":eventIndex",
+ room_id: matrixEvent.getRoomId(),
+ sender: matrixEvent.getSender(),
+ origin_server_ts: matrixEvent.getTs(),
+ state_key: matrixEvent.getSender(),
+ },
+ );
+
+ member.events.member = memberEvent;
+ matrixEvent.sender = member;
+
+ return matrixEvent;
+ });
+
+
+ return matrixEvents;
+ }
+
abstract export(): Promise<Blob>;
}
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 371ce9fffc..069e47d15b 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -22,23 +22,24 @@ import BaseAvatar from "../../components/views/avatars/BaseAvatar";
import exportCSS from "./exportCSS";
import exportJS from "./exportJS";
import exportIcons from "./exportIcons";
+import { exportTypes } from "./exportUtils";
export default class HTMLExporter extends Exporter {
protected zip: JSZip;
protected avatars: Map<string, boolean>;
protected permalinkCreator: RoomPermalinkCreator;
- constructor(room: Room) {
- super(room);
+ constructor(room: Room, exportType: exportTypes, numberOfEvents?: number) {
+ super(room, exportType, numberOfEvents);
this.zip = new JSZip();
this.avatars = new Map<string, boolean>();
this.permalinkCreator = new RoomPermalinkCreator(this.room);
}
- protected async getRoomAvatar(avatarSide: number) {
+ protected async getRoomAvatar() {
let blob: Blob;
- const avatarUrl = Avatar.avatarUrlForRoom(this.room, avatarSide, avatarSide, "crop");
- const avatarPath = `room/avatar${avatarSide}.png`;
+ const avatarUrl = Avatar.avatarUrlForRoom(this.room, 32, 32, "crop");
+ const avatarPath = "room.png";
if (avatarUrl) {
const image = await fetch(avatarUrl);
blob = await image.blob();
@@ -46,8 +47,8 @@ export default class HTMLExporter extends Exporter {
}
const avatar = (
<BaseAvatar
- width={avatarSide}
- height={avatarSide}
+ width={32}
+ height={32}
name={this.room.name}
title={this.room.name}
url={blob ? avatarPath : null}
@@ -58,7 +59,7 @@ export default class HTMLExporter extends Exporter {
}
protected async wrapHTML(content: string) {
- const roomAvatar32 = await this.getRoomAvatar(32);
+ const roomAvatar = await this.getRoomAvatar();
const exportDate = formatFullDateNoDayNoTime(new Date());
const cli = MatrixClientPeg.get();
const creator = this.room.currentState.getStateEvents(EventType.RoomCreate, "")?.getSender();
@@ -81,7 +82,6 @@ export default class HTMLExporter extends Exporter {
});
const topicText = topic ? _t("Topic: %(topic)s", { topic }) : "";
- const roomAvatar52 = await this.getRoomAvatar(52);
return `
@@ -108,7 +108,7 @@ export default class HTMLExporter extends Exporter {
<div class="mx_RoomHeader_wrapper" aria-owns="mx_RightPanel">
<div class="mx_RoomHeader_avatar">
<div class="mx_DecoratedRoomAvatar">
- ${roomAvatar32}
+ ${roomAvatar}
</div>
</div>
<div class="mx_RoomHeader_name">
@@ -143,9 +143,10 @@ export default class HTMLExporter extends Exporter {
role="list"
>
<div class="mx_NewRoomIntro">
- ${roomAvatar52}
+ ${roomAvatar}
<h2> ${this.room.name} </h2>
<p> ${createdText} <br/><br/> ${exportedText} </p>
+ <br/>
<p> ${topicText} </p>
</div>
${content}
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 34edee0ac6..f2d85af636 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -1,4 +1,4 @@
-import { Room } from 'matrix-js-sdk/src/models/room';
+import { Room } from "matrix-js-sdk/src/models/room";
import HTMLExporter from "./HtmlExport";
export enum exportFormats {
@@ -7,14 +7,21 @@ export enum exportFormats {
LOGS = "LOGS",
}
-export enum exportOptions {
+export enum exportTypes {
TIMELINE = "TIMELINE",
+ BEGINNING = "BEGINNING",
+ LAST_N_MESSAGES = "LAST_N_MESSAGES",
}
-const exportConversationalHistory = async (room: Room, format: string, options) => {
+const exportConversationalHistory = async (
+ room: Room,
+ format: string,
+ exportType: exportTypes,
+ numberOfEvents?: number,
+) => {
switch (format) {
case exportFormats.HTML:
- await new HTMLExporter(room).export();
+ await new HTMLExporter(room, exportType, numberOfEvents).export();
break;
case exportFormats.JSON:
break;
From 56488d2c428ed10f228dc3bdce94f4c5f2e6b6b4 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 7 Jun 2021 11:34:03 +0530
Subject: [PATCH 044/176] Modify the process for setting event metadata and
refactor
---
src/components/views/rooms/RoomHeader.js | 6 +-
src/utils/exportUtils/Exporter.ts | 104 +++++------------------
src/utils/exportUtils/HtmlExport.tsx | 16 ++--
3 files changed, 32 insertions(+), 94 deletions(-)
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index ba3b72e779..ac621f7010 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -84,8 +84,8 @@ export default class RoomHeader extends React.Component {
}, 500);
- _exportConvertionalHistory = async () => {
- await exportConversationalHistory(this.props.room, exportFormats.HTML, exportTypes.LAST_N_MESSAGES, 30);
+ _exportConversationalHistory = async () => {
+ await exportConversationalHistory(this.props.room, exportFormats.HTML, exportTypes.LAST_N_MESSAGES, 250);
}
render() {
@@ -198,7 +198,7 @@ export default class RoomHeader extends React.Component {
const exportButton = <AccessibleTooltipButton
className="mx_RoomHeader_button mx_ImageView_button_download"
- onClick={this._exportConvertionalHistory}
+ onClick={this._exportConversationalHistory}
title={_t("Export conversation")} />;
const rightRow =
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 8e3a454e2e..b0f1104bd2 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -4,10 +4,9 @@ import { MatrixClientPeg } from "../../MatrixClientPeg";
import { TimelineWindow } from "matrix-js-sdk/src/timeline-window";
import { arrayFastClone } from "../arrays";
import { exportTypes } from "./exportUtils";
-import { RoomMember } from 'matrix-js-sdk/src/models/room-member';
export default abstract class Exporter {
- constructor(protected room: Room, protected exportType: exportTypes, protected numberOfEvents?: number) {}
+ protected constructor(protected room: Room, protected exportType: exportTypes, protected numberOfEvents?: number) {}
protected getTimelineConversation = () : MatrixEvent[] => {
if (!this.room) return;
@@ -34,37 +33,32 @@ export default abstract class Exporter {
return events;
};
- protected eventToJson(ev) {
- const jsonEvent = ev.toJSON();
- const e = ev.isEncrypted() ? jsonEvent.decrypted : jsonEvent;
- if (ev.isEncrypted()) {
- e.curve25519Key = ev.getSenderKey();
- e.ed25519Key = ev.getClaimedEd25519Key();
- e.algorithm = ev.getWireContent().algorithm;
- e.forwardingCurve25519KeyChain = ev.getForwardingCurve25519KeyChain();
- } else {
- delete e.curve25519Key;
- delete e.ed25519Key;
- delete e.algorithm;
- delete e.forwardingCurve25519KeyChain;
+ protected setEventMetadata = (event: MatrixEvent) => {
+ const client = MatrixClientPeg.get();
+ const roomState = client.getRoom(this.room.roomId).currentState;
+ event.sender = roomState.getSentinelMember(
+ event.getSender(),
+ );
+ if (event.getType() === "m.room.member") {
+ event.target = roomState.getSentinelMember(
+ event.getStateKey(),
+ );
}
- return e;
+ return event;
}
-
protected getRequiredEvents = async () : Promise<MatrixEvent[]> => {
const client = MatrixClientPeg.get();
- const eventMapper = client.getEventMapper({ preventReEmit: true });
+ const eventMapper = client.getEventMapper();
let prevToken: string|null = null;
let limit = this.numberOfEvents || Number.MAX_VALUE;
let events: MatrixEvent[] = [];
- const stateRes: any[] = [];
+
while (limit) {
const eventsPerCrawl = Math.min(limit, 100);
const res: any = await client.createMessagesRequest(this.room.roomId, prevToken, eventsPerCrawl, "b");
- if (res.state) stateRes.push(...res.state);
if (res.chunk.length === 0) break;
limit -= eventsPerCrawl;
@@ -75,79 +69,25 @@ export default abstract class Exporter {
prevToken = res.end;
}
- events = events.reverse()
- let stateEvents = [];
- if (stateRes !== undefined) {
- stateEvents = stateRes.map(eventMapper);
- }
-
- const profiles = {};
-
- stateEvents.forEach(ev => {
- if (ev.event.content &&
- ev.event.content.membership === "join") {
- profiles[ev.event.sender] = {
- displayname: ev.event.content.displayname,
- avatar_url: ev.event.content.avatar_url,
- };
- }
- });
+ events = events.reverse();
const decryptionPromises = events
.filter(event => event.isEncrypted())
.map(event => {
return client.decryptEventIfNeeded(event, {
- isRetry: true,
- emit: false,
+ isRetry: true,
+ emit: false,
});
});
- // Let us wait for all the events to get decrypted.
+ //Wait for all the events to get decrypted.
await Promise.all(decryptionPromises);
- const eventsWithProfile = events.map((ev) => {
- const e = this.eventToJson(ev);
+ events.map((event) => {
+ return this.setEventMetadata(event);
+ })
- let profile: any = {};
- if (e.sender in profiles) profile = profiles[e.sender];
- const object = {
- event: e,
- profile: profile,
- };
- return object;
- });
-
- const matrixEvents = eventsWithProfile.map(e => {
- const matrixEvent = eventMapper(e.event);
-
- const member = new RoomMember(this.room.roomId, matrixEvent.getSender());
-
- member.name = e.profile.displayname;
-
- const memberEvent = eventMapper(
- {
- content: {
- membership: "join",
- avatar_url: e.profile.avatar_url,
- displayname: e.profile.displayname,
- },
- type: "m.room.member",
- event_id: matrixEvent.getId() + ":eventIndex",
- room_id: matrixEvent.getRoomId(),
- sender: matrixEvent.getSender(),
- origin_server_ts: matrixEvent.getTs(),
- state_key: matrixEvent.getSender(),
- },
- );
-
- member.events.member = memberEvent;
- matrixEvent.sender = member;
-
- return matrixEvent;
- });
-
-
- return matrixEvents;
+ return events;
}
abstract export(): Promise<Blob>;
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 069e47d15b..7a2b615dbd 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -77,7 +77,7 @@ export default class HTMLExporter extends Exporter {
exportDate,
roomName: this.room.name,
exporterDetails: `<a href="https://matrix.to/#/${exporter}" target="_blank" rel="noopener noreferrer">
- ${exporterName ? `<b>${ exporterName }</b>(${ exporter })` : `<b>${ exporter }</b>`}
+ ${exporterName ? `<b>${ exporterName }</b>(${ exporter })` : `<b>${ exporter }</b>`}
</a>`,
});
@@ -108,7 +108,7 @@ export default class HTMLExporter extends Exporter {
<div class="mx_RoomHeader_wrapper" aria-owns="mx_RightPanel">
<div class="mx_RoomHeader_avatar">
<div class="mx_DecoratedRoomAvatar">
- ${roomAvatar}
+ ${roomAvatar}
</div>
</div>
<div class="mx_RoomHeader_name">
@@ -172,8 +172,7 @@ export default class HTMLExporter extends Exporter {
protected hasAvatar(event: MatrixEvent): boolean {
const member = event.sender;
- if (member.getMxcAvatarUrl()) return true;
- return false;
+ return !!member.getMxcAvatarUrl();
}
protected async saveAvatarIfNeeded(event: MatrixEvent) {
@@ -244,8 +243,7 @@ export default class HTMLExporter extends Exporter {
}
const fileDate = formatFullDateNoDay(new Date(event.getTs()));
const [fileName, fileExt] = this.splitFileName(event.getContent().body);
- const filePath = fileDirectory + "/" + fileName + '-' + fileDate + fileExt;
- return filePath;
+ return fileDirectory + "/" + fileName + '-' + fileDate + fileExt;
}
@@ -313,7 +311,7 @@ export default class HTMLExporter extends Exporter {
}
public async export() {
- const res = this.getTimelineConversation();
+ const res = await this.getRequiredEvents();
const html = await this.createHTML(res);
this.zip.file("index.html", html);
@@ -342,7 +340,7 @@ export default class HTMLExporter extends Exporter {
const blobPiece = blob.slice(fPointer, fPointer + sliceSize);
const reader = new FileReader();
- const waiter = new Promise<void>((resolve, reject) => {
+ const waiter = new Promise<void>((resolve) => {
reader.onloadend = evt => {
const arrayBufferNew: any = evt.target.result;
const uint8ArrayNew = new Uint8Array(arrayBufferNew);
@@ -353,7 +351,7 @@ export default class HTMLExporter extends Exporter {
});
await waiter;
}
- writer.close();
+ await writer.close();
return blob;
}
From 2b432a7718fe1b43a557b7e87a047d81e4213ecc Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 7 Jun 2021 11:50:19 +0530
Subject: [PATCH 045/176] Add markdown CSS
---
src/utils/exportUtils/exportCSS.ts | 15 +++++++++------
1 file changed, 9 insertions(+), 6 deletions(-)
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index 6f2284cc32..7813c1651a 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -19503,7 +19503,7 @@ a.mx_reply_anchor:hover{
}
@-webkit-keyframes mx_snackbar_fadein {
- from {bottom: 0; opacity: 0;}
+ from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@@ -19513,7 +19513,7 @@ a.mx_reply_anchor:hover{
}
@-webkit-keyframes mx_snackbar_fadeout {
- from {bottom: 30px; opacity: 1;}
+ from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
@@ -19544,11 +19544,11 @@ li.mx_Export_EventWrapper:target {
@keyframes mx_event_highlight_animation {
- 0%,100% {
+ 0%,100% {
background: white;
}
- 50% {
- background: #e3e2df;
+ 50% {
+ background: #e3e2df;
}
}
@@ -19563,4 +19563,7 @@ li.mx_Export_EventWrapper:target {
}
`
-export default lightCSS + snackbarCSS;
+
+const markdownCSS = `.markdown-body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;overflow:hidden;font-family:'Helvetica Neue',Helvetica,'Segoe UI',Arial,freesans,sans-serif;font-size:16px;line-height:1.6;word-wrap:break-word}.markdown-body *{-moz-box-sizing:border-box;box-sizing:border-box}.markdown-body>:first-child{margin-top:0!important}.markdown-body>:last-child{margin-bottom:0!important}.markdown-body a{background:0 0;color:#4183c4;text-decoration:none}.markdown-body a:active,.markdown-body a:hover{outline:0}.markdown-body a:active,.markdown-body a:focus,.markdown-body a:hover{text-decoration:underline}.markdown-body strong{font-weight:700}.markdown-body em{font-style:italic}.markdown-body blockquote,.markdown-body dl,.markdown-body ol,.markdown-body p,.markdown-body pre,.markdown-body table,.markdown-body ul{margin-top:0;margin-bottom:16px}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{font-family:'Helvetica Neue',Helvetica,'Segoe UI',Arial,freesans,sans-serif;position:relative;margin-top:1em;margin-bottom:16px;font-weight:700;line-height:1.4}.markdown-body h1,.markdown-body h2{padding-bottom:.3em;border-bottom:1px solid #eee}.markdown-body h1{font-size:2.25em;line-height:1.2}.markdown-body h2{font-size:1.75em;line-height:1.225}.markdown-body h3{font-size:1.5em}.markdown-body h4{font-size:1.25em}.markdown-body h5{font-size:1em}.markdown-body h6{font-size:1em;color:#777}.markdown-body code,.markdown-body kbd,.markdown-body pre{font-family:Consolas,'Liberation Mono',Menlo,Courier,monospace}.markdown-body code{padding:.2em 0;margin:0;font-size:85%;background-color:rgba(0,0,0,.04);border-radius:3px}.markdown-body code:after,.markdown-body code:before{letter-spacing:-.2em;content:'\\00a0'}.markdown-body pre{word-wrap:normal;padding:16px;overflow:auto;font-size:85%;line-height:1.45;background-color:#f7f7f7;border-radius:3px}.markdown-body pre code{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background:0 0}.markdown-body pre code:after,.markdown-body pre code:before{content:normal}.markdown-body pre>code{font-size:1em;word-break:normal;white-space:pre;border:0}.markdown-body kbd{background-color:#e7e7e7;background-image:-webkit-linear-gradient(#fefefe,#e7e7e7);background-image:linear-gradient(#fefefe,#e7e7e7);background-repeat:repeat-x;display:inline-block;padding:5px 5px 1px;margin:0 1px;font-size:11px;line-height:10px;color:#000;border:1px solid #cfcfcf;border-radius:2px;box-shadow:0 1px 0 #ccc}.markdown-body hr:after,.markdown-body hr:before{display:table;content:''}.markdown-body input{color:inherit;font:inherit;margin:0;font-size:13px;line-height:1.4;font-family:Helvetica,Arial,freesans,clean,sans-serif,'Segoe UI Emoji','Segoe UI Symbol'}.markdown-body input[disabled]{cursor:default}.markdown-body input[type=checkbox]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0}.markdown-body blockquote{margin:0 0 16px;padding:0 15px;color:#777;border-left:4px solid #ddd}.markdown-body blockquote>:first-child{margin-top:0}.markdown-body blockquote>:last-child{margin-bottom:0}.markdown-body img{border:0;max-width:100%;-moz-box-sizing:border-box;box-sizing:border-box}.markdown-body hr{-moz-box-sizing:content-box;box-sizing:content-box;overflow:hidden;background:#e7e7e7;height:4px;padding:0;margin:16px 0;border:0}.markdown-body hr:after{clear:both}.markdown-body td,.markdown-body th{padding:0}.markdown-body table{border-collapse:collapse;border-spacing:0;display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}.markdown-body table td,.markdown-body table th{padding:6px 13px;border:1px solid #ddd}.markdown-body table th{font-weight:700}.markdown-body table tr{background-color:#fff;border-top:1px solid #ccc}.markdown-body table tr:nth-child(2n){background-color:#f8f8f8}.markdown-body ol,.markdown-body ul{padding:0 0 0 2em}.markdown-body ol ol,.markdown-body ul ol{list-style-type:lower-roman}.markdown-body ol ol,.markdown-body ol ul,.markdown-body ul ol,.markdown-body ul ul{margin-top:0;margin-bottom:0}.markdown-body ol ol ol,.markdown-body ol ul ol,.markdown-body ul ol ol,.markdown-body ul ul ol{list-style-type:lower-alpha}.markdown-body li>p{margin-top:16px}.markdown-body dd{margin-left:0}.markdown-body dl{padding:0}.markdown-body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:700}.markdown-body dl dd{padding:0 16px;margin-bottom:16px}`
+
+export default lightCSS + markdownCSS + snackbarCSS;
From b68ea484447a2a4ed2ea52f313fa0dc5de869184 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 7 Jun 2021 12:22:02 +0530
Subject: [PATCH 046/176] Explicitly declare cli and use alt attribute for
images
---
src/components/views/messages/MFileBody.js | 2 +-
src/components/views/messages/RedactedBody.tsx | 16 +++++++++-------
2 files changed, 10 insertions(+), 8 deletions(-)
diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index 8afd4abaf6..195040518b 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -177,7 +177,7 @@ export default class MFileBody extends React.Component {
<div className="mx_MFileBody_info">
<span className="mx_MFileBody_info_icon" >
{this.props.isExporting ?
- <img className="mx_export_attach_icon" src="icons/attach.svg" />
+ <img alt="Attachment" className="mx_export_attach_icon" src="icons/attach.svg" />
: null}
</span>
<span className="mx_MFileBody_info_filename">{this.presentableTextForFile(content, false)}</span>
diff --git a/src/components/views/messages/RedactedBody.tsx b/src/components/views/messages/RedactedBody.tsx
index fb4f0b0efa..9490aeddf2 100644
--- a/src/components/views/messages/RedactedBody.tsx
+++ b/src/components/views/messages/RedactedBody.tsx
@@ -14,13 +14,14 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import React, {useContext} from "react";
-import {MatrixClient} from "matrix-js-sdk/src/client";
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import React, { useContext } from "react";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { _t } from "../../../languageHandler";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import {formatFullDate} from "../../../DateUtils";
+import { formatFullDate } from "../../../DateUtils";
import SettingsStore from "../../../settings/SettingsStore";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
interface IProps {
mxEvent: MatrixEvent;
@@ -28,8 +29,9 @@ interface IProps {
}
const RedactedBody = React.forwardRef<any, IProps>(({mxEvent, isExporting}, ref) => {
- const cli: MatrixClient = useContext(MatrixClientContext);
-
+ let cli: MatrixClient = useContext(MatrixClientContext);
+ // As context doesn't propagate during export, we'll have to explicitly declare
+ if (isExporting) cli = MatrixClientPeg.get();
let text = _t("Message deleted");
const unsigned = mxEvent.getUnsigned();
const redactedBecauseUserId = unsigned && unsigned.redacted_because && unsigned.redacted_because.sender;
@@ -45,7 +47,7 @@ const RedactedBody = React.forwardRef<any, IProps>(({mxEvent, isExporting}, ref)
return (
<span className="mx_RedactedBody" ref={ref} title={titleText}>
- { isExporting ? <img className="mx_export_trash_icon" src="icons/trash.svg" title="Redacted" /> : null }
+ { isExporting ? <img alt="Redacted" className="mx_export_trash_icon" src="icons/trash.svg" /> : null }
{ text }
</span>
);
From 0f06f1b9c4bc51dd68f2ad78bcfb57c12d4bea0f Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 7 Jun 2021 14:47:27 +0530
Subject: [PATCH 047/176] Replace map with for loop
---
src/utils/exportUtils/Exporter.ts | 5 ++---
1 file changed, 2 insertions(+), 3 deletions(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index b0f1104bd2..a95833a461 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -69,6 +69,7 @@ export default abstract class Exporter {
prevToken = res.end;
}
+ //Reverse the events so that we preserve the order
events = events.reverse();
const decryptionPromises = events
@@ -83,9 +84,7 @@ export default abstract class Exporter {
//Wait for all the events to get decrypted.
await Promise.all(decryptionPromises);
- events.map((event) => {
- return this.setEventMetadata(event);
- })
+ for (let i = 0; i < events.length; i++) this.setEventMetadata(events[i]);
return events;
}
From 9e298e9f4503024583d4be6df99c1d226824745c Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 8 Jun 2021 12:36:28 +0530
Subject: [PATCH 048/176] Add logs and unload listener
---
src/components/views/rooms/RoomHeader.js | 2 +-
src/utils/exportUtils/Exporter.ts | 4 ++--
src/utils/exportUtils/HtmlExport.tsx | 23 ++++++++++++++++++++++-
3 files changed, 25 insertions(+), 4 deletions(-)
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index ac621f7010..31bd9ba167 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -85,7 +85,7 @@ export default class RoomHeader extends React.Component {
_exportConversationalHistory = async () => {
- await exportConversationalHistory(this.props.room, exportFormats.HTML, exportTypes.LAST_N_MESSAGES, 250);
+ await exportConversationalHistory(this.props.room, exportFormats.HTML, exportTypes.LAST_N_MESSAGES, 100);
}
render() {
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index a95833a461..583e16b1fd 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -26,8 +26,8 @@ export default abstract class Exporter {
// Clone and reverse the events so that we preserve the order
arrayFastClone(events)
.reverse()
- .forEach(event => {
- cli.decryptEventIfNeeded(event);
+ .forEach(async (event) => {
+ await cli.decryptEventIfNeeded(event);
});
return events;
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 7a2b615dbd..e553d3c900 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -34,6 +34,12 @@ export default class HTMLExporter extends Exporter {
this.zip = new JSZip();
this.avatars = new Map<string, boolean>();
this.permalinkCreator = new RoomPermalinkCreator(this.room);
+ window.addEventListener("beforeunload", this.onBeforeUnload)
+ }
+
+ protected onBeforeUnload = (e: BeforeUnloadEvent) => {
+ e.preventDefault();
+ return e.returnValue = "Are you sure you want to exit during this export?";
}
protected async getRoomAvatar() {
@@ -311,22 +317,35 @@ export default class HTMLExporter extends Exporter {
}
public async export() {
+ console.info("Starting export process...");
+ console.info("Fetching events...");
+ const fetchStart = performance.now();
const res = await this.getRequiredEvents();
+ const fetchEnd = performance.now();
+
+ console.log(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000} s`);
+ console.info("Creating HTML...");
+
const html = await this.createHTML(res);
this.zip.file("index.html", html);
this.zip.file("css/style.css", exportCSS);
this.zip.file("js/script.js", exportJS);
+
for (const iconName in exportIcons) {
this.zip.file(`icons/${iconName}`, exportIcons[iconName]);
}
const filename = `matrix-export-${formatFullDateNoDay(new Date())}.zip`;
+ console.info("HTML creation successful!");
+ console.info("Generating a ZIP...");
//Generate the zip file asynchronously
const blob = await this.zip.generateAsync({ type: "blob" });
+ console.log("ZIP generated successfully");
+ console.info("Writing to file system...")
//Support for firefox browser
streamSaver.WritableStream = ponyfill.WritableStream
//Create a writable stream to the directory
@@ -352,7 +371,9 @@ export default class HTMLExporter extends Exporter {
await waiter;
}
await writer.close();
-
+ const exportEnd = performance.now();
+ console.info(`Export Successful! Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+ window.removeEventListener("beforeunload", this.onBeforeUnload);
return blob;
}
}
From 6f8c1638aa43930413ecd2b234c1326d11d699fb Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 8 Jun 2021 18:35:45 +0530
Subject: [PATCH 049/176] isExporting -> forExport and wrap EventTile with
Context Provider
---
src/components/views/elements/ReplyThread.js | 10 ++--
.../views/messages/DateSeparator.js | 4 +-
src/components/views/messages/MFileBody.js | 4 +-
src/components/views/messages/MessageEvent.js | 4 +-
.../views/messages/RedactedBody.tsx | 11 ++--
src/components/views/rooms/EventTile.tsx | 14 ++---
src/utils/exportUtils/HtmlExport.tsx | 56 ++++++++++---------
src/utils/exportUtils/exportUtils.ts | 5 +-
8 files changed, 55 insertions(+), 53 deletions(-)
diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index 6e265903d8..c6eeb2c879 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -46,7 +46,7 @@ export default class ReplyThread extends React.Component {
permalinkCreator: PropTypes.instanceOf(RoomPermalinkCreator).isRequired,
// Specifies which layout to use.
layout: LayoutPropType,
- isExporting: PropTypes.bool,
+ forExport: PropTypes.bool,
};
static contextType = MatrixClientContext;
@@ -69,7 +69,7 @@ export default class ReplyThread extends React.Component {
this.unmounted = false;
- if (this.props.isExporting) return;
+ if (this.props.forExport) return;
this.context.on("Event.replaced", this.onEventReplaced);
this.room = this.context.getRoom(this.props.parentEv.getRoomId());
@@ -216,13 +216,13 @@ export default class ReplyThread extends React.Component {
};
}
- static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, layout, isExporting) {
+ static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, layout, forExport) {
if (!ReplyThread.getParentEventId(parentEv)) {
return null;
}
return <ReplyThread
parentEv={parentEv}
- isExporting={isExporting}
+ forExport={forExport}
onHeightChanged={onHeightChanged}
ref={ref}
permalinkCreator={permalinkCreator}
@@ -367,7 +367,7 @@ export default class ReplyThread extends React.Component {
})
}
</blockquote>;
- } else if (this.props.isExporting) {
+ } else if (this.props.forExport) {
const eventId = ReplyThread.getParentEventId(this.props.parentEv);
header = <p style={{ marginTop: -5, marginBottom: 5 }}>
In reply to <a className="mx_reply_anchor" href={`#${eventId}`} scroll-to={eventId}>this message</a>
diff --git a/src/components/views/messages/DateSeparator.js b/src/components/views/messages/DateSeparator.js
index 2aba0eaef8..5e15b584c5 100644
--- a/src/components/views/messages/DateSeparator.js
+++ b/src/components/views/messages/DateSeparator.js
@@ -37,14 +37,14 @@ function getdaysArray() {
export default class DateSeparator extends React.Component {
static propTypes = {
ts: PropTypes.number.isRequired,
- isExporting: PropTypes.bool,
+ forExport: PropTypes.bool,
};
getLabel() {
const date = new Date(this.props.ts);
// During the time the archive is being viewed, a specific day might not make sense, so we return the full date
- if (this.props.isExporting) return formatFullDateNoTime(date);
+ if (this.props.forExport) return formatFullDateNoTime(date);
const today = new Date();
const yesterday = new Date();
diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index 195040518b..1ef2c2eb64 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -104,7 +104,7 @@ export default class MFileBody extends React.Component {
showGenericPlaceholder: PropTypes.bool,
/* to set source to local file path during export */
mediaSrc: PropTypes.string,
- isExporting: PropTypes.bool,
+ forExport: PropTypes.bool,
};
static defaultProps = {
@@ -176,7 +176,7 @@ export default class MFileBody extends React.Component {
placeholder = (
<div className="mx_MFileBody_info">
<span className="mx_MFileBody_info_icon" >
- {this.props.isExporting ?
+ {this.props.forExport ?
<img alt="Attachment" className="mx_export_attach_icon" src="icons/attach.svg" />
: null}
</span>
diff --git a/src/components/views/messages/MessageEvent.js b/src/components/views/messages/MessageEvent.js
index e243c3c8bd..49dcc7b5e2 100644
--- a/src/components/views/messages/MessageEvent.js
+++ b/src/components/views/messages/MessageEvent.js
@@ -48,7 +48,7 @@ export default class MessageEvent extends React.Component {
mediaSrc: PropTypes.string,
/* to set source to local file path during export */
- isExporting: PropTypes.bool,
+ forExport: PropTypes.bool,
/* the maximum image height to use, if the event is an image */
maxImageHeight: PropTypes.number,
@@ -127,7 +127,7 @@ export default class MessageEvent extends React.Component {
showUrlPreview={this.props.showUrlPreview}
tileShape={this.props.tileShape}
mediaSrc={this.props.mediaSrc}
- isExporting={this.props.isExporting}
+ forExport={this.props.forExport}
maxImageHeight={this.props.maxImageHeight}
replacingEventId={this.props.replacingEventId}
editState={this.props.editState}
diff --git a/src/components/views/messages/RedactedBody.tsx b/src/components/views/messages/RedactedBody.tsx
index 9490aeddf2..7fa6a3b093 100644
--- a/src/components/views/messages/RedactedBody.tsx
+++ b/src/components/views/messages/RedactedBody.tsx
@@ -21,17 +21,14 @@ import { _t } from "../../../languageHandler";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import { formatFullDate } from "../../../DateUtils";
import SettingsStore from "../../../settings/SettingsStore";
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
interface IProps {
mxEvent: MatrixEvent;
- isExporting: boolean;
+ forExport: boolean;
}
-const RedactedBody = React.forwardRef<any, IProps>(({mxEvent, isExporting}, ref) => {
- let cli: MatrixClient = useContext(MatrixClientContext);
- // As context doesn't propagate during export, we'll have to explicitly declare
- if (isExporting) cli = MatrixClientPeg.get();
+const RedactedBody = React.forwardRef<any, IProps>(({mxEvent, forExport}, ref) => {
+ const cli: MatrixClient = useContext(MatrixClientContext);
let text = _t("Message deleted");
const unsigned = mxEvent.getUnsigned();
const redactedBecauseUserId = unsigned && unsigned.redacted_because && unsigned.redacted_because.sender;
@@ -47,7 +44,7 @@ const RedactedBody = React.forwardRef<any, IProps>(({mxEvent, isExporting}, ref)
return (
<span className="mx_RedactedBody" ref={ref} title={titleText}>
- { isExporting ? <img alt="Redacted" className="mx_export_trash_icon" src="icons/trash.svg" /> : null }
+ { forExport ? <img alt="Redacted" className="mx_export_trash_icon" src="icons/trash.svg" /> : null }
{ text }
</span>
);
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 614c53735e..7d8bad0bed 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -249,7 +249,7 @@ interface IProps {
// for now.
tileShape?: 'notif' | 'file_grid' | 'reply' | 'reply_preview';
- isExporting?: boolean;
+ forExport?: boolean;
// Used while exporting to refer to the local source rather than the online one
mediaSrc?: string;
@@ -320,7 +320,7 @@ export default class EventTile extends React.Component<IProps, IState> {
static defaultProps = {
// no-op function because onHeightChanged is optional yet some sub-components assume its existence
onHeightChanged: function() {},
- isExporting: false,
+ forExport: false,
};
static contextType = MatrixClientContext;
@@ -427,8 +427,6 @@ export default class EventTile extends React.Component<IProps, IState> {
// TODO: [REACT-WARNING] Move into constructor
// eslint-disable-next-line camelcase
UNSAFE_componentWillMount() {
- // Context isn't propagated through renderToStaticMarkup so we'll have to explicitly set it during export
- if (this.props.isExporting) this.context = MatrixClientPeg.get();
this.verifyEvent(this.props.mxEvent);
}
@@ -631,7 +629,7 @@ export default class EventTile extends React.Component<IProps, IState> {
}
shouldHighlight() {
- if (this.props.isExporting) return false;
+ if (this.props.forExport) return false;
const actions = this.context.getPushActionsForEvent(this.props.mxEvent.replacingEvent() || this.props.mxEvent);
if (!actions || !actions.tweaks) { return false; }
@@ -981,7 +979,7 @@ export default class EventTile extends React.Component<IProps, IState> {
}
const MessageActionBar = sdk.getComponent('messages.MessageActionBar');
- const showMessageActionBar = !isEditing && !this.props.isExporting;
+ const showMessageActionBar = !isEditing && !this.props.forExport;
const actionBar = showMessageActionBar ? <MessageActionBar
mxEvent={this.props.mxEvent}
reactions={this.state.reactions}
@@ -1155,7 +1153,7 @@ export default class EventTile extends React.Component<IProps, IState> {
this.props.permalinkCreator,
this.replyThread,
this.props.layout,
- this.props.isExporting,
+ this.props.forExport,
);
// tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
@@ -1179,7 +1177,7 @@ export default class EventTile extends React.Component<IProps, IState> {
{ thread }
<EventTileType ref={this.tile}
mxEvent={this.props.mxEvent}
- isExporting={this.props.isExporting}
+ forExport={this.props.forExport}
replacingEventId={this.props.replacingEventId}
editState={this.props.editState}
mediaSrc={this.props.mediaSrc}
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index e553d3c900..b9d4763153 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -23,16 +23,20 @@ import exportCSS from "./exportCSS";
import exportJS from "./exportJS";
import exportIcons from "./exportIcons";
import { exportTypes } from "./exportUtils";
+import MatrixClientContext from "../../contexts/MatrixClientContext";
+import { MatrixClient } from "matrix-js-sdk";
export default class HTMLExporter extends Exporter {
protected zip: JSZip;
protected avatars: Map<string, boolean>;
protected permalinkCreator: RoomPermalinkCreator;
+ protected matrixClient: MatrixClient;
constructor(room: Room, exportType: exportTypes, numberOfEvents?: number) {
super(room, exportType, numberOfEvents);
this.zip = new JSZip();
this.avatars = new Map<string, boolean>();
+ this.matrixClient = MatrixClientPeg.get();
this.permalinkCreator = new RoomPermalinkCreator(this.room);
window.addEventListener("beforeunload", this.onBeforeUnload)
}
@@ -214,7 +218,7 @@ export default class HTMLExporter extends Exporter {
protected getDateSeparator(event: MatrixEvent) {
const ts = event.getTs();
- const dateSeparator = <li key={ts}><DateSeparator isExporting={true} key={ts} ts={ts} /></li>;
+ const dateSeparator = <li key={ts}><DateSeparator forExport={true} key={ts} ts={ts} /></li>;
return renderToStaticMarkup(dateSeparator);
}
@@ -258,30 +262,32 @@ export default class HTMLExporter extends Exporter {
if (hasAvatar) await this.saveAvatarIfNeeded(mxEv);
return <li className="mx_Export_EventWrapper" id={mxEv.getId()}>
- <EventTile
- mxEvent={mxEv}
- continuation={continuation}
- isRedacted={mxEv.isRedacted()}
- replacingEventId={mxEv.replacingEventId()}
- isExporting={true}
- readReceipts={null}
- readReceiptMap={null}
- showUrlPreview={false}
- checkUnmounting={() => false}
- isTwelveHour={false}
- last={false}
- mediaSrc={mediaSrc}
- avatarSrc={hasAvatar ? `users/${mxEv.sender.userId}` : null}
- lastInSection={false}
- permalinkCreator={this.permalinkCreator}
- lastSuccessful={false}
- isSelectedEvent={false}
- getRelationsForEvent={null}
- showReactions={false}
- layout={Layout.Group}
- enableFlair={false}
- showReadReceipts={false}
- />
+ <MatrixClientContext.Provider value = {this.matrixClient}>
+ <EventTile
+ mxEvent={mxEv}
+ continuation={continuation}
+ isRedacted={mxEv.isRedacted()}
+ replacingEventId={mxEv.replacingEventId()}
+ forExport={true}
+ readReceipts={null}
+ readReceiptMap={null}
+ showUrlPreview={false}
+ checkUnmounting={() => false}
+ isTwelveHour={false}
+ last={false}
+ mediaSrc={mediaSrc}
+ avatarSrc={hasAvatar ? `users/${mxEv.sender.userId}` : null}
+ lastInSection={false}
+ permalinkCreator={this.permalinkCreator}
+ lastSuccessful={false}
+ isSelectedEvent={false}
+ getRelationsForEvent={null}
+ showReactions={false}
+ layout={Layout.Group}
+ enableFlair={false}
+ showReadReceipts={false}
+ />
+ </MatrixClientContext.Provider>
</li>
}
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index f2d85af636..531b5d98e4 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -10,6 +10,7 @@ export enum exportFormats {
export enum exportTypes {
TIMELINE = "TIMELINE",
BEGINNING = "BEGINNING",
+ START_DATE = "START_DATE",
LAST_N_MESSAGES = "LAST_N_MESSAGES",
}
@@ -17,11 +18,11 @@ const exportConversationalHistory = async (
room: Room,
format: string,
exportType: exportTypes,
- numberOfEvents?: number,
+ exportTypeMetadata?: number,
) => {
switch (format) {
case exportFormats.HTML:
- await new HTMLExporter(room, exportType, numberOfEvents).export();
+ await new HTMLExporter(room, exportType, exportTypeMetadata).export();
break;
case exportFormats.JSON:
break;
From 0f6d09a74b213f452e93bce831d745a7d420fb5f Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 8 Jun 2021 18:37:14 +0530
Subject: [PATCH 050/176] Update src/utils/exportUtils/Exporter.ts
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/utils/exportUtils/Exporter.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 583e16b1fd..0783f686a9 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -81,7 +81,7 @@ export default abstract class Exporter {
});
});
- //Wait for all the events to get decrypted.
+ // Wait for all the events to get decrypted.
await Promise.all(decryptionPromises);
for (let i = 0; i < events.length; i++) this.setEventMetadata(events[i]);
From 03d8e1f9313545e84d8dac559045e2b3cf597b33 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 8 Jun 2021 18:37:36 +0530
Subject: [PATCH 051/176] Update src/utils/exportUtils/Exporter.ts
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/utils/exportUtils/Exporter.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 0783f686a9..66bb287354 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -69,7 +69,7 @@ export default abstract class Exporter {
prevToken = res.end;
}
- //Reverse the events so that we preserve the order
+ // Reverse the events so that we preserve the order
events = events.reverse();
const decryptionPromises = events
From d80e008d288903be15a4fd435fec8a10551cc84f Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 8 Jun 2021 18:37:44 +0530
Subject: [PATCH 052/176] Update src/utils/exportUtils/Exporter.ts
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/utils/exportUtils/Exporter.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 66bb287354..270669374b 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -8,7 +8,7 @@ import { exportTypes } from "./exportUtils";
export default abstract class Exporter {
protected constructor(protected room: Room, protected exportType: exportTypes, protected numberOfEvents?: number) {}
- protected getTimelineConversation = () : MatrixEvent[] => {
+ protected getTimelineConversation = (): MatrixEvent[] => {
if (!this.room) return;
const cli = MatrixClientPeg.get();
From 573ababb8c249a0a6e2576bac4ae3b85feef255f Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 9 Jun 2021 15:23:47 +0530
Subject: [PATCH 053/176] Get rid of mediaSrc and avatarSrc props
---
src/components/views/avatars/MemberAvatar.tsx | 8 ++++----
src/components/views/messages/MAudioBody.js | 6 +++---
src/components/views/messages/MFileBody.js | 8 ++++----
src/components/views/messages/MImageBody.js | 12 ++++++------
src/components/views/messages/MVideoBody.tsx | 10 +++++-----
.../views/messages/MVoiceOrAudioBody.tsx | 4 ++--
src/components/views/messages/MessageEvent.js | 4 ----
src/components/views/rooms/EventTile.tsx | 9 +--------
src/utils/exportUtils/HtmlExport.tsx | 17 ++++++++++-------
9 files changed, 35 insertions(+), 43 deletions(-)
diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx
index 67d6ef38f0..48bf0d3423 100644
--- a/src/components/views/avatars/MemberAvatar.tsx
+++ b/src/components/views/avatars/MemberAvatar.tsx
@@ -34,10 +34,10 @@ interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" |
resizeMethod?: ResizeMethod;
// The onClick to give the avatar
onClick?: React.MouseEventHandler;
- // Whether the onClick of the avatar should be overriden to dispatch `Action.ViewUser`
+ // Whether the onClick of the avatar should be overridden to dispatch `Action.ViewUser`
viewUserOnClick?: boolean;
title?: string;
- avatarSrc?: string;
+ forExport?: boolean;
}
interface IState {
@@ -68,7 +68,7 @@ export default class MemberAvatar extends React.Component<IProps, IState> {
private static getState(props: IProps): IState {
if (props.member?.name) {
let imageUrl = null;
- if (props.avatarSrc) imageUrl = props.avatarSrc;
+ if (props.forExport && props.member.getMxcAvatarUrl()) imageUrl = "AvatarForExport";
else if (props.member.getMxcAvatarUrl()) {
imageUrl = mediaFromMxc(props.member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(
props.width,
@@ -95,7 +95,7 @@ export default class MemberAvatar extends React.Component<IProps, IState> {
let {member, fallbackUserId, onClick, viewUserOnClick, ...otherProps} = this.props;
const userId = member ? member.userId : fallbackUserId;
- otherProps = omit(otherProps, "avatarSrc");
+ otherProps = omit(otherProps, "forExport");
if (viewUserOnClick) {
onClick = () => {
diff --git a/src/components/views/messages/MAudioBody.js b/src/components/views/messages/MAudioBody.js
index 2c3eba8cb3..6c6a0527ea 100644
--- a/src/components/views/messages/MAudioBody.js
+++ b/src/components/views/messages/MAudioBody.js
@@ -42,7 +42,7 @@ export default class MAudioBody extends React.Component {
}
_getContentUrl() {
- if (this.props.mediaSrc) return this.props.mediaSrc;
+ if (this.props.forExport) return "forExport";
const media = mediaFromContent(this.props.mxEvent.getContent());
if (media.isEncrypted) {
return this.state.decryptedUrl;
@@ -52,7 +52,7 @@ export default class MAudioBody extends React.Component {
}
getFileBody() {
- if (this.props.mediaSrc) return null;
+ if (this.props.forExport) return null;
return <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />;
}
@@ -95,7 +95,7 @@ export default class MAudioBody extends React.Component {
);
}
- if (!this.props.mediaSrc && content.file !== undefined && this.state.decryptedUrl === null) {
+ if (!this.props.forExport && content.file !== undefined && this.state.decryptedUrl === null) {
// Need to decrypt the attachment
// The attachment is decrypted in componentDidMount.
// For now add an img tag with a 16x16 spinner.
diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index 1ef2c2eb64..813b340bb9 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -102,8 +102,7 @@ export default class MFileBody extends React.Component {
tileShape: PropTypes.string,
/* whether or not to show the default placeholder for the file. Defaults to true. */
showGenericPlaceholder: PropTypes.bool,
- /* to set source to local file path during export */
- mediaSrc: PropTypes.string,
+
forExport: PropTypes.bool,
};
@@ -152,6 +151,7 @@ export default class MFileBody extends React.Component {
}
_getContentUrl() {
+ if (this.props.forExport) return null;
const media = mediaFromContent(this.props.mxEvent.getContent());
return media.srcHttp;
}
@@ -185,9 +185,9 @@ export default class MFileBody extends React.Component {
);
}
- if (this.props.mediaSrc) {
+ if (this.props.forExport) {
return <span className="mx_MFileBody">
- <a href={this.props.mediaSrc}>
+ <a href="forExport">
{ placeholder }
</a>
</span>;
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 56cc6a5eec..b8220d8a5c 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -172,7 +172,7 @@ export default class MImageBody extends React.Component {
}
_getContentUrl() {
- if (this.props.mediaSrc) return this.props.mediaSrc;
+ if (this.props.forExport) return "forExport";
const media = mediaFromContent(this.props.mxEvent.getContent());
if (media.isEncrypted) {
return this.state.decryptedUrl;
@@ -370,9 +370,9 @@ export default class MImageBody extends React.Component {
let gifLabel = null;
// e2e image hasn't been decrypted yet
- if (!this.props.mediaSrc && content.file !== undefined && this.state.decryptedUrl === null) {
+ if (!this.props.forExport && content.file !== undefined && this.state.decryptedUrl === null) {
placeholder = <InlineSpinner w={32} h={32} />;
- } else if (!this.props.mediaSrc && !this.state.imgLoaded) {
+ } else if (!this.props.forExport && !this.state.imgLoaded) {
// Deliberately, getSpinner is left unimplemented here, MStickerBody overides
placeholder = this.getPlaceholder();
}
@@ -418,7 +418,7 @@ export default class MImageBody extends React.Component {
</div>
}
- <div style={{display: this.props.mediaSrc ? "block" : !showPlaceholder ? undefined : 'none'}}>
+ <div style={{display: showPlaceholder ? 'none' : undefined}}>
{ img }
{ gifLabel }
</div>
@@ -450,7 +450,7 @@ export default class MImageBody extends React.Component {
// Overidden by MStickerBody
getFileBody() {
- if (this.props.mediaSrc) return null;
+ if (this.props.forExport) return null;
return <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />;
}
@@ -468,7 +468,7 @@ export default class MImageBody extends React.Component {
const contentUrl = this._getContentUrl();
let thumbUrl;
- if ((this._isGif() && SettingsStore.getValue("autoplayGifsAndVideos")) || this.props.mediaSrc) {
+ if (this.props.forExport || (this._isGif() && SettingsStore.getValue("autoplayGifsAndVideos"))) {
thumbUrl = contentUrl;
} else {
thumbUrl = this._getThumbUrl();
diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx
index 2b4327068e..a6d849e836 100644
--- a/src/components/views/messages/MVideoBody.tsx
+++ b/src/components/views/messages/MVideoBody.tsx
@@ -30,7 +30,7 @@ interface IProps {
/* called when the video has loaded */
onHeightChanged: () => void;
/* used to refer to the local file while exporting */
- mediaSrc?: string;
+ forExport?: boolean;
}
interface IState {
@@ -78,7 +78,7 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
}
private getContentUrl(): string|null {
- if (this.props.mediaSrc) return this.props.mediaSrc;
+ if (this.props.forExport) return "forExport";
const media = mediaFromContent(this.props.mxEvent.getContent());
if (media.isEncrypted) {
return this.state.decryptedUrl;
@@ -94,7 +94,7 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
private getThumbUrl(): string|null {
// there's no need of thumbnail when the content is local
- if (this.props.mediaSrc) return null;
+ if (this.props.forExport) return null;
const content = this.props.mxEvent.getContent();
const media = mediaFromContent(content);
@@ -191,7 +191,7 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
}
private getFileBody = () => {
- if (this.props.mediaSrc) return null;
+ if (this.props.forExport) return null;
return <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />;
}
@@ -209,7 +209,7 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
}
// Important: If we aren't autoplaying and we haven't decrypted it yet, show a video with a poster.
- if (!this.props.mediaSrc && content.file !== undefined && this.state.decryptedUrl === null && autoplay) {
+ if (!this.props.forExport && content.file !== undefined && this.state.decryptedUrl === null && autoplay) {
// Need to decrypt the attachment
// The attachment is decrypted in componentDidMount.
// For now add an img tag with a spinner.
diff --git a/src/components/views/messages/MVoiceOrAudioBody.tsx b/src/components/views/messages/MVoiceOrAudioBody.tsx
index d548d8d2fa..e5482c4b64 100644
--- a/src/components/views/messages/MVoiceOrAudioBody.tsx
+++ b/src/components/views/messages/MVoiceOrAudioBody.tsx
@@ -23,7 +23,7 @@ import MVoiceMessageBody from "./MVoiceMessageBody";
interface IProps {
mxEvent: MatrixEvent;
- mediaSrc?: string;
+ forExport?: boolean;
}
@replaceableComponent("views.messages.MVoiceOrAudioBody")
@@ -31,7 +31,7 @@ export default class MVoiceOrAudioBody extends React.PureComponent<IProps> {
public render() {
const isVoiceMessage = !!this.props.mxEvent.getContent()['org.matrix.msc2516.voice'];
const voiceMessagesEnabled = SettingsStore.getValue("feature_voice_messages");
- if (isVoiceMessage && voiceMessagesEnabled && !this.props.mediaSrc) {
+ if (!this.props.forExport && isVoiceMessage && voiceMessagesEnabled) {
return <MVoiceMessageBody {...this.props} />;
} else {
return <MAudioBody {...this.props} />;
diff --git a/src/components/views/messages/MessageEvent.js b/src/components/views/messages/MessageEvent.js
index 49dcc7b5e2..e53a796f70 100644
--- a/src/components/views/messages/MessageEvent.js
+++ b/src/components/views/messages/MessageEvent.js
@@ -44,9 +44,6 @@ export default class MessageEvent extends React.Component {
/* the shape of the tile, used */
tileShape: PropTypes.string,
- /* to set source to local file path during export */
- mediaSrc: PropTypes.string,
-
/* to set source to local file path during export */
forExport: PropTypes.bool,
@@ -126,7 +123,6 @@ export default class MessageEvent extends React.Component {
highlightLink={this.props.highlightLink}
showUrlPreview={this.props.showUrlPreview}
tileShape={this.props.tileShape}
- mediaSrc={this.props.mediaSrc}
forExport={this.props.forExport}
maxImageHeight={this.props.maxImageHeight}
replacingEventId={this.props.replacingEventId}
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index e1aa7ca81a..f8e3cc4887 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -251,12 +251,6 @@ interface IProps {
forExport?: boolean;
- // Used while exporting to refer to the local source rather than the online one
- mediaSrc?: string;
-
- // Used while exporting to refer to the local avatar rather than the online one
- avatarSrc?: string;
-
// show twelve hour timestamps
isTwelveHour?: boolean;
@@ -963,7 +957,7 @@ export default class EventTile extends React.Component<IProps, IState> {
avatar = (
<div className="mx_EventTile_avatar">
<MemberAvatar
- avatarSrc={this.props.avatarSrc}
+ forExport={this.props.forExport}
member={member}
width={avatarSize}
height={avatarSize}
@@ -1190,7 +1184,6 @@ export default class EventTile extends React.Component<IProps, IState> {
forExport={this.props.forExport}
replacingEventId={this.props.replacingEventId}
editState={this.props.editState}
- mediaSrc={this.props.mediaSrc}
highlights={this.props.highlights}
highlightLink={this.props.highlightLink}
showUrlPreview={this.props.showUrlPreview}
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index b9d4763153..8fb30b08a3 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -257,11 +257,10 @@ export default class HTMLExporter extends Exporter {
}
- protected async getEventTile(mxEv: MatrixEvent, continuation: boolean, mediaSrc?: string) {
+ protected async getEventTile(mxEv: MatrixEvent, continuation: boolean, filePath?: string) {
const hasAvatar = this.hasAvatar(mxEv);
if (hasAvatar) await this.saveAvatarIfNeeded(mxEv);
-
- return <li className="mx_Export_EventWrapper" id={mxEv.getId()}>
+ const eventTile = <li className="mx_Export_EventWrapper" id={mxEv.getId()}>
<MatrixClientContext.Provider value = {this.matrixClient}>
<EventTile
mxEvent={mxEv}
@@ -275,8 +274,6 @@ export default class HTMLExporter extends Exporter {
checkUnmounting={() => false}
isTwelveHour={false}
last={false}
- mediaSrc={mediaSrc}
- avatarSrc={hasAvatar ? `users/${mxEv.sender.userId}` : null}
lastInSection={false}
permalinkCreator={this.permalinkCreator}
lastSuccessful={false}
@@ -289,10 +286,16 @@ export default class HTMLExporter extends Exporter {
/>
</MatrixClientContext.Provider>
</li>
+ let eventTileMarkup = renderToStaticMarkup(eventTile);
+ if (filePath) eventTileMarkup = eventTileMarkup.replace(/(src=|href=)"forExport"/, `$1"${filePath}"`);
+ if (hasAvatar) {
+ eventTileMarkup = eventTileMarkup.replace(/src="AvatarForExport"/, `src="users/${mxEv.sender.userId}"`);
+ }
+ return eventTileMarkup;
}
protected async createMessageBody(mxEv: MatrixEvent, joined = false) {
- let eventTile: JSX.Element;
+ let eventTile: string;
const attachmentTypes = ["m.sticker", "m.image", "m.file", "m.video", "m.audio"]
if (mxEv.getType() === attachmentTypes[0] || attachmentTypes.includes(mxEv.getContent().msgtype)) {
@@ -302,7 +305,7 @@ export default class HTMLExporter extends Exporter {
this.zip.file(filePath, blob);
} else eventTile = await this.getEventTile(mxEv, joined);
- return renderToStaticMarkup(eventTile);
+ return eventTile;
}
protected async createHTML(events: MatrixEvent[]) {
From 716e2effbc0a8948c0b6a3303a286f1a5d2f93b4 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 9 Jun 2021 16:12:57 +0530
Subject: [PATCH 054/176] Enable proper i18n for date utils
---
src/DateUtils.ts | 21 ++++++---------
src/i18n/strings/en_EN.json | 4 +--
src/utils/exportUtils/HtmlExport.tsx | 38 ++++++++++++++++++++++------
3 files changed, 40 insertions(+), 23 deletions(-)
diff --git a/src/DateUtils.ts b/src/DateUtils.ts
index 481afb312b..1eaa331f52 100644
--- a/src/DateUtils.ts
+++ b/src/DateUtils.ts
@@ -138,19 +138,14 @@ export function wantsDateSeparator(prevEventDate: Date, nextEventDate: Date): bo
}
export function formatFullDateNoDay(date: Date) {
- return (
- date.getFullYear() +
- "-" +
- pad(date.getMonth() + 1) +
- "-" +
- pad(date.getDate()) +
- _t(" at ") +
- pad(date.getHours()) +
- "." +
- pad(date.getMinutes()) +
- "." +
- pad(date.getSeconds())
- );
+ return _t("%(year)s-%(month)s-%(day)s at %(hours)s.%(minutes)s.%(seconds)s", {
+ year: date.getFullYear(),
+ month: pad(date.getMonth() + 1),
+ day: pad(date.getDate()),
+ hours: pad(date.getHours()),
+ minutes: pad(date.getMinutes()),
+ seconds: pad(date.getSeconds()),
+ });
}
export function formatFullDateNoDayNoTime(date: Date) {
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 1c5fdcb848..c52ee00ae7 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -105,7 +105,7 @@
"%(weekDayName)s, %(monthName)s %(day)s %(time)s": "%(weekDayName)s, %(monthName)s %(day)s %(time)s",
"%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s": "%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s",
"%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s %(time)s": "%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s %(time)s",
- " at ": " at ",
+ "%(year)s-%(month)s-%(day)s at %(hours)s.%(minutes)s.%(seconds)s": "%(year)s-%(month)s-%(day)s at %(hours)s.%(minutes)s.%(seconds)s",
"Who would you like to add to this community?": "Who would you like to add to this community?",
"Warning: any person you add to a community will be publicly visible to anyone who knows the community ID": "Warning: any person you add to a community will be publicly visible to anyone who knows the community ID",
"Invite new community members": "Invite new community members",
@@ -728,7 +728,7 @@
"Share your public space": "Share your public space",
"Unknown App": "Unknown App",
"%(creatorName)s created this room.": "%(creatorName)s created this room.",
- "This is the start of export of <b>%(roomName)s</b>.\n Exported by %(exporterDetails)s at %(exportDate)s. ": "This is the start of export of <b>%(roomName)s</b>.\n Exported by %(exporterDetails)s at %(exportDate)s. ",
+ "This is the start of export of <roomName/>. Exported by <exporterDetails/> at %(exportDate)s.": "This is the start of export of <roomName/>. Exported by <exporterDetails/> at %(exportDate)s.",
"Topic: %(topic)s": "Topic: %(topic)s",
"Help us improve %(brand)s": "Help us improve %(brand)s",
"Send <UsageDataLink>anonymous usage data</UsageDataLink> which helps us improve %(brand)s. This will use a <PolicyLink>cookie</PolicyLink>.": "Send <UsageDataLink>anonymous usage data</UsageDataLink> which helps us improve %(brand)s. This will use a <PolicyLink>cookie</PolicyLink>.",
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 8fb30b08a3..3472d99507 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -82,14 +82,36 @@ export default class HTMLExporter extends Exporter {
creatorName,
});
- const exportedText = _t(`This is the start of export of <b>%(roomName)s</b>.
- Exported by %(exporterDetails)s at %(exportDate)s. `, {
- exportDate,
- roomName: this.room.name,
- exporterDetails: `<a href="https://matrix.to/#/${exporter}" target="_blank" rel="noopener noreferrer">
- ${exporterName ? `<b>${ exporterName }</b>(${ exporter })` : `<b>${ exporter }</b>`}
- </a>`,
- });
+ const exportedText = renderToStaticMarkup(
+ <p>
+ {_t(
+ "This is the start of export of <roomName/>. Exported by <exporterDetails/> at %(exportDate)s.",
+ {
+ exportDate,
+ },
+ {
+ roomName: () => <b>{this.room.name}</b>,
+ exporterDetails: () => (
+ <a
+ href={`https://matrix.to/#/${exporter}`}
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ {exporterName ? (
+ <>
+ <b>{exporterName}</b>
+ {exporter}
+ </>
+ ) : (
+ <b>{exporter}</b>
+ )}
+ </a>
+ ),
+ },
+ )}
+ </p>,
+ );
+
const topicText = topic ? _t("Topic: %(topic)s", { topic }) : "";
From 9204ed30ce783d82f54c60384f38fec1ecc2625a Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 9 Jun 2021 16:40:52 +0530
Subject: [PATCH 055/176] Switch to localeDateString for i18n
---
src/DateUtils.ts | 10 +++-------
src/i18n/strings/en_EN.json | 2 +-
2 files changed, 4 insertions(+), 8 deletions(-)
diff --git a/src/DateUtils.ts b/src/DateUtils.ts
index 1eaa331f52..758971e58d 100644
--- a/src/DateUtils.ts
+++ b/src/DateUtils.ts
@@ -138,13 +138,9 @@ export function wantsDateSeparator(prevEventDate: Date, nextEventDate: Date): bo
}
export function formatFullDateNoDay(date: Date) {
- return _t("%(year)s-%(month)s-%(day)s at %(hours)s.%(minutes)s.%(seconds)s", {
- year: date.getFullYear(),
- month: pad(date.getMonth() + 1),
- day: pad(date.getDate()),
- hours: pad(date.getHours()),
- minutes: pad(date.getMinutes()),
- seconds: pad(date.getSeconds()),
+ return _t("%(date)s at %(time)s", {
+ date: date.toLocaleDateString().replace(/\//g, '-'),
+ time: date.toLocaleTimeString().replace(/:/g, '-'),
});
}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index c52ee00ae7..fc0b3c6c06 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -105,7 +105,7 @@
"%(weekDayName)s, %(monthName)s %(day)s %(time)s": "%(weekDayName)s, %(monthName)s %(day)s %(time)s",
"%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s": "%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s",
"%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s %(time)s": "%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s %(time)s",
- "%(year)s-%(month)s-%(day)s at %(hours)s.%(minutes)s.%(seconds)s": "%(year)s-%(month)s-%(day)s at %(hours)s.%(minutes)s.%(seconds)s",
+ "%(date)s at %(time)s": "%(date)s at %(time)s",
"Who would you like to add to this community?": "Who would you like to add to this community?",
"Warning: any person you add to a community will be publicly visible to anyone who knows the community ID": "Warning: any person you add to a community will be publicly visible to anyone who knows the community ID",
"Invite new community members": "Invite new community members",
From 80e5d4cd77686af850e69a3fce2a5e19bdb59d63 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Thu, 10 Jun 2021 11:53:41 +0530
Subject: [PATCH 056/176] Increase eventsPerCrawl for larger chunks and rely on
chunk's length for crawled events size
---
src/utils/exportUtils/Exporter.ts | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 270669374b..36494e13ef 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -56,12 +56,12 @@ export default abstract class Exporter {
let events: MatrixEvent[] = [];
while (limit) {
- const eventsPerCrawl = Math.min(limit, 100);
+ const eventsPerCrawl = Math.min(limit, 1000);
const res: any = await client.createMessagesRequest(this.room.roomId, prevToken, eventsPerCrawl, "b");
if (res.chunk.length === 0) break;
- limit -= eventsPerCrawl;
+ limit -= res.chunk.length;
const matrixEvents: MatrixEvent[] = res.chunk.map(eventMapper);
From a1b614f2b38ad864fe26f828cc930901c9fd6b9c Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 11 Jun 2021 12:04:05 +0530
Subject: [PATCH 057/176] Implement exporting from a specific start date and
fix few bugs
---
src/components/views/messages/MImageBody.js | 2 +-
src/components/views/rooms/RoomHeader.js | 7 ++-
src/utils/exportUtils/Exporter.ts | 60 ++++++++++-----------
src/utils/exportUtils/HtmlExport.tsx | 13 ++---
src/utils/exportUtils/exportCSS.ts | 2 +-
src/utils/exportUtils/exportUtils.ts | 9 +++-
6 files changed, 52 insertions(+), 41 deletions(-)
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index b8220d8a5c..d854baec46 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -432,7 +432,7 @@ export default class MImageBody extends React.Component {
// Overidden by MStickerBody
wrapImage(contentUrl, children) {
- return <a href={contentUrl} onClick={this.onClick}>
+ return <a href={contentUrl} target={this.props.forExport ? "__blank" : undefined} onClick={this.onClick}>
{children}
</a>;
}
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index a0055e1b5c..3b507763fa 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -82,7 +82,12 @@ export default class RoomHeader extends React.Component {
_exportConversationalHistory = async () => {
- await exportConversationalHistory(this.props.room, exportFormats.HTML, exportTypes.LAST_N_MESSAGES, 100);
+ await exportConversationalHistory(
+ this.props.room,
+ exportFormats.HTML,
+ exportTypes.START_DATE,
+ { startDate: parseInt(new Date("2021.05.20").getTime().toFixed(0)) },
+ );
}
render() {
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 36494e13ef..5b0d2df188 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -1,37 +1,15 @@
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixClientPeg } from "../../MatrixClientPeg";
-import { TimelineWindow } from "matrix-js-sdk/src/timeline-window";
-import { arrayFastClone } from "../arrays";
import { exportTypes } from "./exportUtils";
+import { exportOptions } from "./exportUtils";
export default abstract class Exporter {
- protected constructor(protected room: Room, protected exportType: exportTypes, protected numberOfEvents?: number) {}
-
- protected getTimelineConversation = (): MatrixEvent[] => {
- if (!this.room) return;
-
- const cli = MatrixClientPeg.get();
-
- const timelineSet = this.room.getUnfilteredTimelineSet();
-
- const timelineWindow = new TimelineWindow(
- cli, timelineSet,
- {windowLimit: Number.MAX_VALUE});
-
- timelineWindow.load(null, 30);
-
- const events: MatrixEvent[] = timelineWindow.getEvents();
-
- // Clone and reverse the events so that we preserve the order
- arrayFastClone(events)
- .reverse()
- .forEach(async (event) => {
- await cli.decryptEventIfNeeded(event);
- });
-
- return events;
- };
+ protected constructor(
+ protected room: Room,
+ protected exportType: exportTypes,
+ protected exportOptions?: exportOptions,
+ ) {}
protected setEventMetadata = (event: MatrixEvent) => {
const client = MatrixClientPeg.get();
@@ -47,12 +25,27 @@ export default abstract class Exporter {
return event;
}
+ protected getLimit = () => {
+ let limit: number;
+ switch (this.exportType) {
+ case exportTypes.LAST_N_MESSAGES:
+ limit = this.exportOptions.numberOfMessages;
+ break;
+ case exportTypes.TIMELINE:
+ limit = 40;
+ break;
+ default:
+ limit = Number.MAX_VALUE;
+ }
+ return limit;
+ }
+
protected getRequiredEvents = async () : Promise<MatrixEvent[]> => {
const client = MatrixClientPeg.get();
const eventMapper = client.getEventMapper();
let prevToken: string|null = null;
- let limit = this.numberOfEvents || Number.MAX_VALUE;
+ let limit = this.getLimit();
let events: MatrixEvent[] = [];
while (limit) {
@@ -65,7 +58,14 @@ export default abstract class Exporter {
const matrixEvents: MatrixEvent[] = res.chunk.map(eventMapper);
- matrixEvents.forEach(mxEv => events.push(mxEv));
+ for (const mxEv of matrixEvents) {
+ if (this.exportOptions.startDate && mxEv.getTs() < this.exportOptions.startDate) {
+ // Once the last message received is older than the start date, we break out of both the loops
+ limit = 0;
+ break;
+ }
+ events.push(mxEv);
+ }
prevToken = res.end;
}
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 3472d99507..ded4e82b84 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -23,6 +23,7 @@ import exportCSS from "./exportCSS";
import exportJS from "./exportJS";
import exportIcons from "./exportIcons";
import { exportTypes } from "./exportUtils";
+import { exportOptions } from "./exportUtils";
import MatrixClientContext from "../../contexts/MatrixClientContext";
import { MatrixClient } from "matrix-js-sdk";
@@ -32,8 +33,8 @@ export default class HTMLExporter extends Exporter {
protected permalinkCreator: RoomPermalinkCreator;
protected matrixClient: MatrixClient;
- constructor(room: Room, exportType: exportTypes, numberOfEvents?: number) {
- super(room, exportType, numberOfEvents);
+ constructor(room: Room, exportType: exportTypes, exportOptions: exportOptions) {
+ super(room, exportType, exportOptions);
this.zip = new JSZip();
this.avatars = new Map<string, boolean>();
this.matrixClient = MatrixClientPeg.get();
@@ -282,7 +283,7 @@ export default class HTMLExporter extends Exporter {
protected async getEventTile(mxEv: MatrixEvent, continuation: boolean, filePath?: string) {
const hasAvatar = this.hasAvatar(mxEv);
if (hasAvatar) await this.saveAvatarIfNeeded(mxEv);
- const eventTile = <li className="mx_Export_EventWrapper" id={mxEv.getId()}>
+ const eventTile = <div className="mx_Export_EventWrapper" id={mxEv.getId()}>
<MatrixClientContext.Provider value = {this.matrixClient}>
<EventTile
mxEvent={mxEv}
@@ -307,11 +308,11 @@ export default class HTMLExporter extends Exporter {
showReadReceipts={false}
/>
</MatrixClientContext.Provider>
- </li>
+ </div>
let eventTileMarkup = renderToStaticMarkup(eventTile);
- if (filePath) eventTileMarkup = eventTileMarkup.replace(/(src=|href=)"forExport"/, `$1"${filePath}"`);
+ if (filePath) eventTileMarkup = eventTileMarkup.replace(/(src=|href=)"forExport"/g, `$1"${filePath}"`);
if (hasAvatar) {
- eventTileMarkup = eventTileMarkup.replace(/src="AvatarForExport"/, `src="users/${mxEv.sender.userId}"`);
+ eventTileMarkup = eventTileMarkup.replace(/src="AvatarForExport"/g, `src="users/${mxEv.sender.userId}"`);
}
return eventTileMarkup;
}
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index 7813c1651a..cbba088361 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -19537,7 +19537,7 @@ a.mx_reply_anchor:hover{
}
-li.mx_Export_EventWrapper:target {
+.mx_Export_EventWrapper:target {
background: white;
animation: mx_event_highlight_animation 2s linear;
}
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 531b5d98e4..ed285b47bc 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -14,15 +14,20 @@ export enum exportTypes {
LAST_N_MESSAGES = "LAST_N_MESSAGES",
}
+export interface exportOptions {
+ startDate?: number;
+ numberOfMessages?: number;
+}
+
const exportConversationalHistory = async (
room: Room,
format: string,
exportType: exportTypes,
- exportTypeMetadata?: number,
+ exportOptions?: exportOptions,
) => {
switch (format) {
case exportFormats.HTML:
- await new HTMLExporter(room, exportType, exportTypeMetadata).export();
+ await new HTMLExporter(room, exportType, exportOptions).export();
break;
case exportFormats.JSON:
break;
From ab653d99520692ee8d8fca3e0d6635fa336ae46f Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 14 Jun 2021 11:08:17 +0530
Subject: [PATCH 058/176] Handle requests with no attachments
---
src/components/views/rooms/RoomHeader.js | 2 +-
src/utils/exportUtils/HtmlExport.tsx | 40 +++++++++++++++++-------
src/utils/exportUtils/exportUtils.ts | 1 +
3 files changed, 31 insertions(+), 12 deletions(-)
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 3b507763fa..3372785390 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -86,7 +86,7 @@ export default class RoomHeader extends React.Component {
this.props.room,
exportFormats.HTML,
exportTypes.START_DATE,
- { startDate: parseInt(new Date("2021.05.20").getTime().toFixed(0)) },
+ { startDate: parseInt(new Date("2021.05.20").getTime().toFixed(0)), attachmentsIncluded: false },
);
}
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index ded4e82b84..11b1fa80dc 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -72,10 +72,9 @@ export default class HTMLExporter extends Exporter {
protected async wrapHTML(content: string) {
const roomAvatar = await this.getRoomAvatar();
const exportDate = formatFullDateNoDayNoTime(new Date());
- const cli = MatrixClientPeg.get();
const creator = this.room.currentState.getStateEvents(EventType.RoomCreate, "")?.getSender();
const creatorName = this.room?.getMember(creator)?.rawDisplayName || creator;
- const exporter = cli.getUserId();
+ const exporter = this.matrixClient.getUserId();
const exporterName = this.room?.getMember(exporter)?.rawDisplayName;
const topic = this.room.currentState.getStateEvents(EventType.RoomTopic, "")?.getContent()?.topic
|| this.room.topic || "";
@@ -113,10 +112,8 @@ export default class HTMLExporter extends Exporter {
</p>,
);
-
const topicText = topic ? _t("Topic: %(topic)s", { topic }) : "";
-
return `
<!DOCTYPE html>
<html lang="en">
@@ -279,10 +276,10 @@ export default class HTMLExporter extends Exporter {
return fileDirectory + "/" + fileName + '-' + fileDate + fileExt;
}
-
protected async getEventTile(mxEv: MatrixEvent, continuation: boolean, filePath?: string) {
const hasAvatar = this.hasAvatar(mxEv);
if (hasAvatar) await this.saveAvatarIfNeeded(mxEv);
+
const eventTile = <div className="mx_Export_EventWrapper" id={mxEv.getId()}>
<MatrixClientContext.Provider value = {this.matrixClient}>
<EventTile
@@ -317,15 +314,36 @@ export default class HTMLExporter extends Exporter {
return eventTileMarkup;
}
+ protected isAttachment(mxEv: MatrixEvent) {
+ const attachmentTypes = ["m.sticker", "m.image", "m.file", "m.video", "m.audio"];
+ return mxEv.getType() === attachmentTypes[0] || attachmentTypes.includes(mxEv.getContent().msgtype);
+ }
+
protected async createMessageBody(mxEv: MatrixEvent, joined = false) {
let eventTile: string;
- const attachmentTypes = ["m.sticker", "m.image", "m.file", "m.video", "m.audio"]
- if (mxEv.getType() === attachmentTypes[0] || attachmentTypes.includes(mxEv.getContent().msgtype)) {
- const blob = await this.getMediaBlob(mxEv);
- const filePath = this.getFilePath(mxEv);
- eventTile = await this.getEventTile(mxEv, joined, filePath);
- this.zip.file(filePath, blob);
+ if (this.isAttachment(mxEv)) {
+ if (this.exportOptions.attachmentsIncluded) {
+ const blob = await this.getMediaBlob(mxEv);
+ const filePath = this.getFilePath(mxEv);
+ eventTile = await this.getEventTile(mxEv, joined, filePath);
+ this.zip.file(filePath, blob);
+ } else {
+ const modifiedContent = {
+ msgtype: "m.text",
+ body: "**Media omitted**",
+ format: "org.matrix.custom.html",
+ formatted_body: "<strong>Media omitted</strong>",
+ }
+ if (mxEv.isEncrypted()) {
+ mxEv._clearEvent.content = modifiedContent;
+ mxEv._clearEvent.type = "m.room.message";
+ } else {
+ mxEv.event.content = modifiedContent;
+ mxEv.event.type = "m.room.message";
+ }
+ eventTile = await this.getEventTile(mxEv, joined);
+ }
} else eventTile = await this.getEventTile(mxEv, joined);
return eventTile;
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index ed285b47bc..407cef3077 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -17,6 +17,7 @@ export enum exportTypes {
export interface exportOptions {
startDate?: number;
numberOfMessages?: number;
+ attachmentsIncluded: boolean;
}
const exportConversationalHistory = async (
From 30c7017fadb3909648d22500412e623de850d71c Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 14 Jun 2021 18:06:40 +0530
Subject: [PATCH 059/176] Move generic functions into base class
---
src/utils/exportUtils/Exporter.ts | 57 ++++++++++++++++++++++++++++
src/utils/exportUtils/HtmlExport.tsx | 57 +---------------------------
2 files changed, 58 insertions(+), 56 deletions(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 5b0d2df188..8aeda1f3c5 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -3,6 +3,9 @@ import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixClientPeg } from "../../MatrixClientPeg";
import { exportTypes } from "./exportUtils";
import { exportOptions } from "./exportUtils";
+import { decryptFile } from "../DecryptFile";
+import { mediaFromContent } from "../../customisations/Media";
+import { formatFullDateNoDay } from "../../DateUtils";
export default abstract class Exporter {
protected constructor(
@@ -89,5 +92,59 @@ export default abstract class Exporter {
return events;
}
+ protected async getMediaBlob(event: MatrixEvent) {
+ let blob: Blob;
+ try {
+ const isEncrypted = event.isEncrypted();
+ const content = event.getContent();
+ const shouldDecrypt = isEncrypted && !content.hasOwnProperty("org.matrix.msc1767.file")
+ && event.getType() !== "m.sticker";
+ if (shouldDecrypt) {
+ blob = await decryptFile(content.file);
+ } else {
+ const media = mediaFromContent(event.getContent());
+ const image = await fetch(media.srcHttp);
+ blob = await image.blob();
+ }
+ } catch (err) {
+ console.log("Error decrypting media");
+ }
+ return blob;
+ }
+
+ protected splitFileName(file: string) {
+ const lastDot = file.lastIndexOf('.');
+ if (lastDot === -1) return [file, ""];
+ const fileName = file.slice(0, lastDot);
+ const ext = file.slice(lastDot + 1);
+ return [fileName, '.' + ext];
+ }
+
+ protected getFilePath(event: MatrixEvent) {
+ const mediaType = event.getContent().msgtype;
+ let fileDirectory: string;
+ switch (mediaType) {
+ case "m.image":
+ fileDirectory = "images";
+ break;
+ case "m.video":
+ fileDirectory = "videos";
+ break;
+ case "m.audio":
+ fileDirectory = "audio";
+ break;
+ default:
+ fileDirectory = event.getType() === "m.sticker" ? "stickers" : "files";
+ }
+ const fileDate = formatFullDateNoDay(new Date(event.getTs()));
+ const [fileName, fileExt] = this.splitFileName(event.getContent().body);
+ return fileDirectory + "/" + fileName + '-' + fileDate + fileExt;
+ }
+
+ protected isAttachment(mxEv: MatrixEvent) {
+ const attachmentTypes = ["m.sticker", "m.image", "m.file", "m.video", "m.audio"];
+ return mxEv.getType() === attachmentTypes[0] || attachmentTypes.includes(mxEv.getContent().msgtype);
+ }
+
abstract export(): Promise<Blob>;
}
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 11b1fa80dc..eed1a818e4 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -2,8 +2,7 @@ import React from "react"
import streamSaver from "streamsaver";
import JSZip from "jszip";
import Exporter from "./Exporter";
-import { decryptFile } from "../DecryptFile";
-import { mediaFromContent, mediaFromMxc } from "../../customisations/Media";
+import { mediaFromMxc } from "../../customisations/Media";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { renderToStaticMarkup } from 'react-dom/server'
@@ -216,26 +215,6 @@ export default class HTMLExporter extends Exporter {
}
}
- protected async getMediaBlob(event: MatrixEvent) {
- let blob: Blob;
- try {
- const isEncrypted = event.isEncrypted();
- const content = event.getContent();
- const shouldDecrypt = isEncrypted && !content.hasOwnProperty("org.matrix.msc1767.file")
- && event.getType() !== "m.sticker";
- if (shouldDecrypt) {
- blob = await decryptFile(content.file);
- } else {
- const media = mediaFromContent(event.getContent());
- const image = await fetch(media.srcHttp);
- blob = await image.blob();
- }
- } catch (err) {
- console.log("Error decrypting media");
- }
- return blob;
- }
-
protected getDateSeparator(event: MatrixEvent) {
const ts = event.getTs();
const dateSeparator = <li key={ts}><DateSeparator forExport={true} key={ts} ts={ts} /></li>;
@@ -247,35 +226,6 @@ export default class HTMLExporter extends Exporter {
return wantsDateSeparator(prevEvent.getDate(), event.getDate());
}
- protected splitFileName(file: string) {
- const lastDot = file.lastIndexOf('.');
- if (lastDot === -1) return [file, ""];
- const fileName = file.slice(0, lastDot);
- const ext = file.slice(lastDot + 1);
- return [fileName, '.' + ext];
- }
-
- protected getFilePath(event: MatrixEvent) {
- const mediaType = event.getContent().msgtype;
- let fileDirectory: string;
- switch (mediaType) {
- case "m.image":
- fileDirectory = "images";
- break;
- case "m.video":
- fileDirectory = "videos";
- break;
- case "m.audio":
- fileDirectory = "audio";
- break;
- default:
- fileDirectory = event.getType() === "m.sticker" ? "stickers" : "files";
- }
- const fileDate = formatFullDateNoDay(new Date(event.getTs()));
- const [fileName, fileExt] = this.splitFileName(event.getContent().body);
- return fileDirectory + "/" + fileName + '-' + fileDate + fileExt;
- }
-
protected async getEventTile(mxEv: MatrixEvent, continuation: boolean, filePath?: string) {
const hasAvatar = this.hasAvatar(mxEv);
if (hasAvatar) await this.saveAvatarIfNeeded(mxEv);
@@ -314,11 +264,6 @@ export default class HTMLExporter extends Exporter {
return eventTileMarkup;
}
- protected isAttachment(mxEv: MatrixEvent) {
- const attachmentTypes = ["m.sticker", "m.image", "m.file", "m.video", "m.audio"];
- return mxEv.getType() === attachmentTypes[0] || attachmentTypes.includes(mxEv.getContent().msgtype);
- }
-
protected async createMessageBody(mxEv: MatrixEvent, joined = false) {
let eventTile: string;
From bd75849e73076aff42b8af38f866df5f2907cefa Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 15 Jun 2021 16:41:31 +0530
Subject: [PATCH 060/176] Enable option to set maximum file size
---
src/components/views/rooms/RoomHeader.js | 6 +++++-
src/i18n/strings/en_EN.json | 2 ++
src/utils/exportUtils/HtmlExport.tsx | 14 ++++++++++++--
src/utils/exportUtils/exportUtils.ts | 1 +
4 files changed, 20 insertions(+), 3 deletions(-)
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 3372785390..f0f9b4d646 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -86,7 +86,11 @@ export default class RoomHeader extends React.Component {
this.props.room,
exportFormats.HTML,
exportTypes.START_DATE,
- { startDate: parseInt(new Date("2021.05.20").getTime().toFixed(0)), attachmentsIncluded: false },
+ {
+ startDate: parseInt(new Date("2021.05.20").getTime().toFixed(0)),
+ attachmentsIncluded: true,
+ maxSize: 3 * 1024 * 1024, // 3 MB
+ },
);
}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 8640735557..8748c5ba80 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -727,6 +727,8 @@
"Invite to %(spaceName)s": "Invite to %(spaceName)s",
"Share your public space": "Share your public space",
"Unknown App": "Unknown App",
+ "Media omitted": "Media omitted",
+ "Media omitted - file size limit exceeded": "Media omitted - file size limit exceeded",
"%(creatorName)s created this room.": "%(creatorName)s created this room.",
"This is the start of export of <roomName/>. Exported by <exporterDetails/> at %(exportDate)s.": "This is the start of export of <roomName/>. Exported by <exporterDetails/> at %(exportDate)s.",
"Topic: %(topic)s": "Topic: %(topic)s",
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index eed1a818e4..c1b2f4ea70 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -31,6 +31,8 @@ export default class HTMLExporter extends Exporter {
protected avatars: Map<string, boolean>;
protected permalinkCreator: RoomPermalinkCreator;
protected matrixClient: MatrixClient;
+ protected totalSize: number;
+ protected mediaOmitText: string;
constructor(room: Room, exportType: exportTypes, exportOptions: exportOptions) {
super(room, exportType, exportOptions);
@@ -38,6 +40,10 @@ export default class HTMLExporter extends Exporter {
this.avatars = new Map<string, boolean>();
this.matrixClient = MatrixClientPeg.get();
this.permalinkCreator = new RoomPermalinkCreator(this.room);
+ this.totalSize = 0;
+ this.mediaOmitText = !this.exportOptions.attachmentsIncluded
+ ? _t("Media omitted")
+ : _t("Media omitted - file size limit exceeded");
window.addEventListener("beforeunload", this.onBeforeUnload)
}
@@ -270,15 +276,19 @@ export default class HTMLExporter extends Exporter {
if (this.isAttachment(mxEv)) {
if (this.exportOptions.attachmentsIncluded) {
const blob = await this.getMediaBlob(mxEv);
+ this.totalSize += blob.size;
const filePath = this.getFilePath(mxEv);
eventTile = await this.getEventTile(mxEv, joined, filePath);
+ if (this.totalSize > this.exportOptions.maxSize - 1024 * 1024) {
+ this.exportOptions.attachmentsIncluded = false;
+ }
this.zip.file(filePath, blob);
} else {
const modifiedContent = {
msgtype: "m.text",
- body: "**Media omitted**",
+ body: `**${this.mediaOmitText}**`,
format: "org.matrix.custom.html",
- formatted_body: "<strong>Media omitted</strong>",
+ formatted_body: `<strong>${this.mediaOmitText}</strong>`,
}
if (mxEv.isEncrypted()) {
mxEv._clearEvent.content = modifiedContent;
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 407cef3077..77fb23509e 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -18,6 +18,7 @@ export interface exportOptions {
startDate?: number;
numberOfMessages?: number;
attachmentsIncluded: boolean;
+ maxSize: number;
}
const exportConversationalHistory = async (
From 9e6b8ff9f5b0d2d7f6be4fd2ab1103ab0c934718 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Thu, 17 Jun 2021 10:46:08 +0530
Subject: [PATCH 061/176] Start implementation of plain text export
---
src/TextForEvent.ts | 4 +-
src/components/views/rooms/RoomHeader.js | 2 +-
src/utils/exportUtils/Exporter.ts | 2 +-
src/utils/exportUtils/PlainTextExport.ts | 68 ++++++++++++++++++++++++
src/utils/exportUtils/exportUtils.ts | 2 +
5 files changed, 74 insertions(+), 4 deletions(-)
create mode 100644 src/utils/exportUtils/PlainTextExport.ts
diff --git a/src/TextForEvent.ts b/src/TextForEvent.ts
index 649c53664e..df2047a645 100644
--- a/src/TextForEvent.ts
+++ b/src/TextForEvent.ts
@@ -238,12 +238,12 @@ function textForServerACLEvent(ev): () => string | null {
function textForMessageEvent(ev): () => string | null {
return () => {
const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
- let message = senderDisplayName + ': ' + ev.getContent().body;
+ let message = ev.getContent().body;
if (ev.getContent().msgtype === "m.emote") {
message = "* " + senderDisplayName + " " + message;
} else if (ev.getContent().msgtype === "m.image") {
message = _t('%(senderDisplayName)s sent an image.', {senderDisplayName});
- }
+ } else message = senderDisplayName + ': ' + message;
return message;
};
}
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index f0f9b4d646..1a21e503f3 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -84,7 +84,7 @@ export default class RoomHeader extends React.Component {
_exportConversationalHistory = async () => {
await exportConversationalHistory(
this.props.room,
- exportFormats.HTML,
+ exportFormats.LOGS,
exportTypes.START_DATE,
{
startDate: parseInt(new Date("2021.05.20").getTime().toFixed(0)),
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 8aeda1f3c5..44bb7b6a88 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -146,5 +146,5 @@ export default abstract class Exporter {
return mxEv.getType() === attachmentTypes[0] || attachmentTypes.includes(mxEv.getContent().msgtype);
}
- abstract export(): Promise<Blob>;
+ abstract export(): Promise<any>;
}
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
new file mode 100644
index 0000000000..6d29a4bb6d
--- /dev/null
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -0,0 +1,68 @@
+import streamSaver from "streamsaver";
+import Exporter from "./Exporter";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { formatFullDateNoDay } from "../../DateUtils";
+import { _t } from "../../languageHandler";
+import * as ponyfill from "web-streams-polyfill/ponyfill"
+import { haveTileForEvent } from "../../components/views/rooms/EventTile";
+import { exportTypes } from "./exportUtils";
+import { exportOptions } from "./exportUtils";
+import { textForEvent } from "../../TextForEvent";
+
+export default class PlainTextExporter extends Exporter {
+ protected totalSize: number;
+ protected mediaOmitText: string;
+
+ constructor(room: Room, exportType: exportTypes, exportOptions: exportOptions) {
+ super(room, exportType, exportOptions);
+ this.totalSize = 0;
+ this.mediaOmitText = !this.exportOptions.attachmentsIncluded
+ ? _t("Media omitted")
+ : _t("Media omitted - file size limit exceeded");
+ window.addEventListener("beforeunload", this.onBeforeUnload)
+ }
+
+ protected onBeforeUnload = (e: BeforeUnloadEvent) => {
+ e.preventDefault();
+ return e.returnValue = "Are you sure you want to exit during this export?";
+ }
+
+ protected async createOutput(events: MatrixEvent[]) {
+ let content = "";
+ for (const event of events) {
+ if (!haveTileForEvent(event)) continue;
+ content += `${new Date(event.getTs()).toLocaleString()} - ${textForEvent(event)}\n`;
+ }
+ return content;
+ }
+
+ public async export() {
+ console.info("Starting export process...");
+ console.info("Fetching events...");
+ const fetchStart = performance.now();
+ const res = await this.getRequiredEvents();
+ const fetchEnd = performance.now();
+
+ console.log(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000} s`);
+ console.info("Creating Output...");
+
+ const text = await this.createOutput(res);
+
+ const filename = `matrix-export-${formatFullDateNoDay(new Date())}.txt`;
+
+ console.info("Writing to a file...");
+ //Support for firefox browser
+ streamSaver.WritableStream = ponyfill.WritableStream
+ //Create a writable stream to the directory
+ const fileStream = streamSaver.createWriteStream(filename);
+ const writer = fileStream.getWriter();
+ const data = new TextEncoder().encode(text);
+ await writer.write(data);
+ await writer.close();
+ const exportEnd = performance.now();
+ console.info(`Export Successful! Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+ window.removeEventListener("beforeunload", this.onBeforeUnload);
+ }
+}
+
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 77fb23509e..22457f926b 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -1,5 +1,6 @@
import { Room } from "matrix-js-sdk/src/models/room";
import HTMLExporter from "./HtmlExport";
+import PlainTextExporter from "./PlainTextExport";
export enum exportFormats {
HTML = "HTML",
@@ -34,6 +35,7 @@ const exportConversationalHistory = async (
case exportFormats.JSON:
break;
case exportFormats.LOGS:
+ await new PlainTextExporter(room, exportType, exportOptions).export();
break;
}
};
From 44f458d5770c03c507299a400775296cc2f5eebb Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 21 Jun 2021 11:43:47 +0530
Subject: [PATCH 062/176] Modify local avatar's url to not contain colons
---
src/components/views/avatars/MemberAvatar.tsx | 2 +-
src/utils/exportUtils/HtmlExport.tsx | 11 +++++++----
2 files changed, 8 insertions(+), 5 deletions(-)
diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx
index 48bf0d3423..7488616fb6 100644
--- a/src/components/views/avatars/MemberAvatar.tsx
+++ b/src/components/views/avatars/MemberAvatar.tsx
@@ -68,7 +68,7 @@ export default class MemberAvatar extends React.Component<IProps, IState> {
private static getState(props: IProps): IState {
if (props.member?.name) {
let imageUrl = null;
- if (props.forExport && props.member.getMxcAvatarUrl()) imageUrl = "AvatarForExport";
+ if (props.forExport && props.member.getMxcAvatarUrl()) imageUrl = "avatarForExport";
else if (props.member.getMxcAvatarUrl()) {
imageUrl = mediaFromMxc(props.member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(
props.width,
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index c1b2f4ea70..b5df531721 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -217,7 +217,7 @@ export default class HTMLExporter extends Exporter {
this.avatars.set(member.userId, true);
const image = await fetch(avatarUrl);
const blob = await image.blob();
- this.zip.file(`users/${member.userId}`, blob);
+ this.zip.file(`users/${member.userId.replace(/:/g, '-')}`, blob);
}
}
@@ -265,7 +265,10 @@ export default class HTMLExporter extends Exporter {
let eventTileMarkup = renderToStaticMarkup(eventTile);
if (filePath) eventTileMarkup = eventTileMarkup.replace(/(src=|href=)"forExport"/g, `$1"${filePath}"`);
if (hasAvatar) {
- eventTileMarkup = eventTileMarkup.replace(/src="AvatarForExport"/g, `src="users/${mxEv.sender.userId}"`);
+ eventTileMarkup = eventTileMarkup.replace(
+ /src="avatarForExport"/g,
+ `src="users/${mxEv.sender.userId.replace(/:/g, "-")}"`,
+ );
}
return eventTileMarkup;
}
@@ -291,8 +294,8 @@ export default class HTMLExporter extends Exporter {
formatted_body: `<strong>${this.mediaOmitText}</strong>`,
}
if (mxEv.isEncrypted()) {
- mxEv._clearEvent.content = modifiedContent;
- mxEv._clearEvent.type = "m.room.message";
+ mxEv.clearEvent.content = modifiedContent;
+ mxEv.clearEvent.type = "m.room.message";
} else {
mxEv.event.content = modifiedContent;
mxEv.event.type = "m.room.message";
From a0e0453635926cff3c9e63a5c3b5f5fdff52f6d5 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 22 Jun 2021 09:27:49 +0530
Subject: [PATCH 063/176] Fix type lint
---
src/utils/exportUtils/HtmlExport.tsx | 25 +++++++++++++------------
1 file changed, 13 insertions(+), 12 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index c1b2f4ea70..4456fd3737 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -217,7 +217,7 @@ export default class HTMLExporter extends Exporter {
this.avatars.set(member.userId, true);
const image = await fetch(avatarUrl);
const blob = await image.blob();
- this.zip.file(`users/${member.userId}`, blob);
+ this.zip.file(`users/${member.userId.replace(/:/g, '-')}`, blob);
}
}
@@ -265,7 +265,10 @@ export default class HTMLExporter extends Exporter {
let eventTileMarkup = renderToStaticMarkup(eventTile);
if (filePath) eventTileMarkup = eventTileMarkup.replace(/(src=|href=)"forExport"/g, `$1"${filePath}"`);
if (hasAvatar) {
- eventTileMarkup = eventTileMarkup.replace(/src="AvatarForExport"/g, `src="users/${mxEv.sender.userId}"`);
+ eventTileMarkup = eventTileMarkup.replace(
+ /src="avatarForExport"/g,
+ `src="users/${mxEv.sender.userId.replace(/:/g, "-")}"`,
+ );
}
return eventTileMarkup;
}
@@ -286,18 +289,16 @@ export default class HTMLExporter extends Exporter {
} else {
const modifiedContent = {
msgtype: "m.text",
- body: `**${this.mediaOmitText}**`,
+ body: `*${this.mediaOmitText}*`,
format: "org.matrix.custom.html",
- formatted_body: `<strong>${this.mediaOmitText}</strong>`,
+ formatted_body: `<em>${this.mediaOmitText}</em>`,
}
- if (mxEv.isEncrypted()) {
- mxEv._clearEvent.content = modifiedContent;
- mxEv._clearEvent.type = "m.room.message";
- } else {
- mxEv.event.content = modifiedContent;
- mxEv.event.type = "m.room.message";
- }
- eventTile = await this.getEventTile(mxEv, joined);
+ const modifiedEvent = new MatrixEvent();
+ modifiedEvent.event = mxEv.event;
+ modifiedEvent.sender = mxEv.sender;
+ modifiedEvent.event.type = "m.room.message";
+ modifiedEvent.event.content = modifiedContent;
+ eventTile = await this.getEventTile(modifiedEvent, joined);
}
} else eventTile = await this.getEventTile(mxEv, joined);
From bf189204f24110b68d058797d5303c32e08b47d3 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 22 Jun 2021 10:49:14 +0530
Subject: [PATCH 064/176] Implement IRC bridge style reply formatting
---
src/utils/exportUtils/Exporter.ts | 20 +++++++-----
src/utils/exportUtils/PlainTextExport.ts | 40 +++++++++++++++++++++++-
2 files changed, 51 insertions(+), 9 deletions(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 44bb7b6a88..177735f8d9 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -1,11 +1,10 @@
-import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { Room } from "matrix-js-sdk/src/models/room";
-import { MatrixClientPeg } from "../../MatrixClientPeg";
-import { exportTypes } from "./exportUtils";
-import { exportOptions } from "./exportUtils";
-import { decryptFile } from "../DecryptFile";
-import { mediaFromContent } from "../../customisations/Media";
-import { formatFullDateNoDay } from "../../DateUtils";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import {Room} from "matrix-js-sdk/src/models/room";
+import {MatrixClientPeg} from "../../MatrixClientPeg";
+import {exportOptions, exportTypes} from "./exportUtils";
+import {decryptFile} from "../DecryptFile";
+import {mediaFromContent} from "../../customisations/Media";
+import {formatFullDateNoDay} from "../../DateUtils";
export default abstract class Exporter {
protected constructor(
@@ -141,6 +140,11 @@ export default abstract class Exporter {
return fileDirectory + "/" + fileName + '-' + fileDate + fileExt;
}
+ protected isReply(mxEvent) {
+ const relatesTo = mxEvent.getContent()["m.relates_to"];
+ return !!(relatesTo && relatesTo["m.in_reply_to"]);
+ }
+
protected isAttachment(mxEv: MatrixEvent) {
const attachmentTypes = ["m.sticker", "m.image", "m.file", "m.video", "m.audio"];
return mxEv.getType() === attachmentTypes[0] || attachmentTypes.includes(mxEv.getContent().msgtype);
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 6d29a4bb6d..72ab0f122f 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -28,11 +28,49 @@ export default class PlainTextExporter extends Exporter {
return e.returnValue = "Are you sure you want to exit during this export?";
}
+ protected textForReplyEvent = (ev : MatrixEvent) => {
+ const REPLY_REGEX = /> <(.*?)>(.*?)\n\n(.*)/;
+ const REPLY_SOURCE_MAX_LENGTH = 32;
+ const content = ev.getContent();
+
+ const match = REPLY_REGEX.exec(content.body);
+
+ let rplSource: string;
+ const rplName = match[1];
+ const rplText = match[3];
+ const sourceMatch = REPLY_REGEX.exec(content.body);
+ rplSource = sourceMatch && sourceMatch.length === 4 ? sourceMatch[3] : content.body;
+ rplSource = rplSource.substring(0, REPLY_SOURCE_MAX_LENGTH);
+ // Get the first non-blank line from the source.
+ const lines = rplSource.split('\n').filter((line) => !/^\s*$/.test(line))
+ if (lines.length > 0) {
+ // Cut to a maximum length.
+ rplSource = lines[0].substring(0, REPLY_SOURCE_MAX_LENGTH);
+ // Ellipsis if needed.
+ if (lines[0].length > REPLY_SOURCE_MAX_LENGTH) {
+ rplSource = rplSource + "...";
+ }
+ // Wrap in formatting
+ rplSource = ` "${rplSource}"`;
+ } else {
+ // Don't show a source because we couldn't format one.
+ rplSource = "";
+ }
+
+ return `<${rplName}${rplSource}> ${rplText}`;
+ }
+
+ protected _textForEvent = (mxEv: MatrixEvent) => {
+ const senderDisplayName = mxEv.sender && mxEv.sender.name ? mxEv.sender.name : mxEv.getSender();
+ if (this.isReply(mxEv)) return senderDisplayName + ": " + this.textForReplyEvent(mxEv);
+ else return textForEvent(mxEv);
+ }
+
protected async createOutput(events: MatrixEvent[]) {
let content = "";
for (const event of events) {
if (!haveTileForEvent(event)) continue;
- content += `${new Date(event.getTs()).toLocaleString()} - ${textForEvent(event)}\n`;
+ content += `${new Date(event.getTs()).toLocaleString()} - ${this._textForEvent(event)}\n`;
}
return content;
}
From c58abd9582b2a4d4bdd88dc32fcac1cc655ee253 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 22 Jun 2021 10:51:16 +0530
Subject: [PATCH 065/176] Revert auto format
---
src/utils/exportUtils/Exporter.ts | 14 +++++++-------
1 file changed, 7 insertions(+), 7 deletions(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 177735f8d9..ba35c5904f 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -1,10 +1,10 @@
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
-import {Room} from "matrix-js-sdk/src/models/room";
-import {MatrixClientPeg} from "../../MatrixClientPeg";
-import {exportOptions, exportTypes} from "./exportUtils";
-import {decryptFile} from "../DecryptFile";
-import {mediaFromContent} from "../../customisations/Media";
-import {formatFullDateNoDay} from "../../DateUtils";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+import { exportOptions, exportTypes } from "./exportUtils";
+import { decryptFile } from "../DecryptFile";
+import { mediaFromContent } from "../../customisations/Media";
+import { formatFullDateNoDay } from "../../DateUtils";
export default abstract class Exporter {
protected constructor(
From 8a1cd77ef4df4f343bb307145ffc18e945fb7b9d Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 22 Jun 2021 12:12:37 +0530
Subject: [PATCH 066/176] Handle no match cases and modify textForEvent to
handle redacted messages
---
src/TextForEvent.ts | 15 +++++++++------
src/utils/exportUtils/PlainTextExport.ts | 7 ++++---
2 files changed, 13 insertions(+), 9 deletions(-)
diff --git a/src/TextForEvent.ts b/src/TextForEvent.ts
index df2047a645..70952eeca5 100644
--- a/src/TextForEvent.ts
+++ b/src/TextForEvent.ts
@@ -13,13 +13,14 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
-import {MatrixClientPeg} from './MatrixClientPeg';
+import { MatrixClientPeg } from './MatrixClientPeg';
import { _t } from './languageHandler';
import * as Roles from './Roles';
-import {isValid3pidInvite} from "./RoomInvite";
+import { isValid3pidInvite } from "./RoomInvite";
import SettingsStore from "./settings/SettingsStore";
-import {ALL_RULE_TYPES, ROOM_RULE_TYPES, SERVER_RULE_TYPES, USER_RULE_TYPES} from "./mjolnir/BanList";
-import {WIDGET_LAYOUT_EVENT_TYPE} from "./stores/widgets/WidgetLayoutStore";
+import { ALL_RULE_TYPES, ROOM_RULE_TYPES, SERVER_RULE_TYPES, USER_RULE_TYPES } from "./mjolnir/BanList";
+import { WIDGET_LAYOUT_EVENT_TYPE } from "./stores/widgets/WidgetLayoutStore";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
// These functions are frequently used just to check whether an event has
// any text to display at all. For this reason they return deferred values
@@ -235,11 +236,13 @@ function textForServerACLEvent(ev): () => string | null {
return getText;
}
-function textForMessageEvent(ev): () => string | null {
+function textForMessageEvent(ev: MatrixEvent): () => string | null {
return () => {
const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
+ const isRedacted = ev.isRedacted();
let message = ev.getContent().body;
- if (ev.getContent().msgtype === "m.emote") {
+ if (isRedacted) message = "Message Deleted";
+ else if (ev.getContent().msgtype === "m.emote") {
message = "* " + senderDisplayName + " " + message;
} else if (ev.getContent().msgtype === "m.image") {
message = _t('%(senderDisplayName)s sent an image.', {senderDisplayName});
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 72ab0f122f..69c80122d6 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -35,12 +35,13 @@ export default class PlainTextExporter extends Exporter {
const match = REPLY_REGEX.exec(content.body);
+ if (!match) return content.body;
+
let rplSource: string;
const rplName = match[1];
const rplText = match[3];
- const sourceMatch = REPLY_REGEX.exec(content.body);
- rplSource = sourceMatch && sourceMatch.length === 4 ? sourceMatch[3] : content.body;
- rplSource = rplSource.substring(0, REPLY_SOURCE_MAX_LENGTH);
+
+ rplSource = match[2].substring(1, REPLY_SOURCE_MAX_LENGTH);
// Get the first non-blank line from the source.
const lines = rplSource.split('\n').filter((line) => !/^\s*$/.test(line))
if (lines.length > 0) {
From 12ecaf30df245a17093c2dfcef0ab6df07b8beee Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 22 Jun 2021 12:14:31 +0530
Subject: [PATCH 067/176] i18n
---
src/TextForEvent.ts | 2 +-
src/i18n/strings/en_EN.json | 1 +
2 files changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/TextForEvent.ts b/src/TextForEvent.ts
index 70952eeca5..6975550154 100644
--- a/src/TextForEvent.ts
+++ b/src/TextForEvent.ts
@@ -241,7 +241,7 @@ function textForMessageEvent(ev: MatrixEvent): () => string | null {
const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
const isRedacted = ev.isRedacted();
let message = ev.getContent().body;
- if (isRedacted) message = "Message Deleted";
+ if (isRedacted) message = _t("Message Deleted");
else if (ev.getContent().msgtype === "m.emote") {
message = "* " + senderDisplayName + " " + message;
} else if (ev.getContent().msgtype === "m.image") {
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 71fbfd53e7..5c9c81dcfe 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -525,6 +525,7 @@
"%(senderDisplayName)s set the server ACLs for this room.": "%(senderDisplayName)s set the server ACLs for this room.",
"%(senderDisplayName)s changed the server ACLs for this room.": "%(senderDisplayName)s changed the server ACLs for this room.",
"🎉 All servers are banned from participating! This room can no longer be used.": "🎉 All servers are banned from participating! This room can no longer be used.",
+ "Message Deleted": "Message Deleted",
"%(senderDisplayName)s sent an image.": "%(senderDisplayName)s sent an image.",
"%(senderName)s set the main address for this room to %(address)s.": "%(senderName)s set the main address for this room to %(address)s.",
"%(senderName)s removed the main address for this room.": "%(senderName)s removed the main address for this room.",
From db875508d8379befb0f4d0fa1464e757570a1d72 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 22 Jun 2021 12:50:15 +0530
Subject: [PATCH 068/176] Add text for room avatar events and skip empty text
events
---
src/TextForEvent.ts | 13 +++++++++++--
src/i18n/strings/en_EN.json | 2 ++
src/utils/exportUtils/Exporter.ts | 7 +++++--
src/utils/exportUtils/PlainTextExport.ts | 3 ++-
4 files changed, 20 insertions(+), 5 deletions(-)
diff --git a/src/TextForEvent.ts b/src/TextForEvent.ts
index 6975550154..de65733be8 100644
--- a/src/TextForEvent.ts
+++ b/src/TextForEvent.ts
@@ -116,6 +116,11 @@ function textForTopicEvent(ev): () => string | null {
});
}
+function textForRoomAvatarEvent(ev: MatrixEvent): () => string | null {
+ const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
+ return () => _t('%(senderDisplayName)s changed the room avatar.', {senderDisplayName});
+}
+
function textForRoomNameEvent(ev): () => string | null {
const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
@@ -242,10 +247,12 @@ function textForMessageEvent(ev: MatrixEvent): () => string | null {
const isRedacted = ev.isRedacted();
let message = ev.getContent().body;
if (isRedacted) message = _t("Message Deleted");
- else if (ev.getContent().msgtype === "m.emote") {
+ if (ev.getContent().msgtype === "m.emote") {
message = "* " + senderDisplayName + " " + message;
} else if (ev.getContent().msgtype === "m.image") {
message = _t('%(senderDisplayName)s sent an image.', {senderDisplayName});
+ } else if (ev.getType() == "m.sticker") {
+ message = _t('%(senderDisplayName)s sent a sticker.', {senderDisplayName});
} else message = senderDisplayName + ': ' + message;
return message;
};
@@ -603,6 +610,7 @@ interface IHandlers {
const handlers: IHandlers = {
'm.room.message': textForMessageEvent,
'm.call.invite': textForCallInviteEvent,
+ 'm.sticker': textForMessageEvent,
'm.call.answer': textForCallAnswerEvent,
'm.call.hangup': textForCallHangupEvent,
'm.call.reject': textForCallRejectEvent,
@@ -613,6 +621,7 @@ const stateHandlers: IHandlers = {
'm.room.name': textForRoomNameEvent,
'm.room.topic': textForTopicEvent,
'm.room.member': textForMemberEvent,
+ "m.room.avatar": textForRoomAvatarEvent,
'm.room.third_party_invite': textForThreePidInviteEvent,
'm.room.history_visibility': textForHistoryVisibilityEvent,
'm.room.power_levels': textForPowerEvent,
@@ -638,7 +647,7 @@ export function hasText(ev): boolean {
return Boolean(handler?.(ev));
}
-export function textForEvent(ev): string {
+export function textForEvent(ev: MatrixEvent): string {
const handler = (ev.isState() ? stateHandlers : handlers)[ev.getType()];
return handler?.(ev)?.() || '';
}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 5c9c81dcfe..2bad735745 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -509,6 +509,7 @@
"%(senderName)s withdrew %(targetName)s's invitation.": "%(senderName)s withdrew %(targetName)s's invitation.",
"%(senderName)s kicked %(targetName)s.": "%(senderName)s kicked %(targetName)s.",
"%(senderDisplayName)s changed the topic to \"%(topic)s\".": "%(senderDisplayName)s changed the topic to \"%(topic)s\".",
+ "%(senderDisplayName)s changed the room avatar.": "%(senderDisplayName)s changed the room avatar.",
"%(senderDisplayName)s removed the room name.": "%(senderDisplayName)s removed the room name.",
"%(senderDisplayName)s changed the room name from %(oldRoomName)s to %(newRoomName)s.": "%(senderDisplayName)s changed the room name from %(oldRoomName)s to %(newRoomName)s.",
"%(senderDisplayName)s changed the room name to %(roomName)s.": "%(senderDisplayName)s changed the room name to %(roomName)s.",
@@ -527,6 +528,7 @@
"🎉 All servers are banned from participating! This room can no longer be used.": "🎉 All servers are banned from participating! This room can no longer be used.",
"Message Deleted": "Message Deleted",
"%(senderDisplayName)s sent an image.": "%(senderDisplayName)s sent an image.",
+ "%(senderDisplayName)s sent a sticker.": "%(senderDisplayName)s sent a sticker.",
"%(senderName)s set the main address for this room to %(address)s.": "%(senderName)s set the main address for this room to %(address)s.",
"%(senderName)s removed the main address for this room.": "%(senderName)s removed the main address for this room.",
"%(senderName)s added the alternative addresses %(addresses)s for this room.|other": "%(senderName)s added the alternative addresses %(addresses)s for this room.",
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index ba35c5904f..d5e1186b0f 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -140,8 +140,11 @@ export default abstract class Exporter {
return fileDirectory + "/" + fileName + '-' + fileDate + fileExt;
}
- protected isReply(mxEvent) {
- const relatesTo = mxEvent.getContent()["m.relates_to"];
+ protected isReply(event: MatrixEvent) {
+ const isEncrypted = event.isEncrypted();
+ // If encrypted, in_reply_to lies in event.event.content
+ const content = isEncrypted ? event.event.content : event.getContent();
+ const relatesTo = content["m.relates_to"];
return !!(relatesTo && relatesTo["m.in_reply_to"]);
}
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 69c80122d6..d6e76b5968 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -71,7 +71,8 @@ export default class PlainTextExporter extends Exporter {
let content = "";
for (const event of events) {
if (!haveTileForEvent(event)) continue;
- content += `${new Date(event.getTs()).toLocaleString()} - ${this._textForEvent(event)}\n`;
+ const textForEvent = this._textForEvent(event);
+ content += textForEvent && `${new Date(event.getTs()).toLocaleString()} - ${textForEvent}\n`;
}
return content;
}
From 36a69313cdd3e1f9317f47b3a0cb0f6ef96c5dd4 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 22 Jun 2021 14:53:48 +0530
Subject: [PATCH 069/176] Display redactedBecauseUserId for redacted events
---
src/TextForEvent.ts | 12 ++++++++++--
src/i18n/strings/en_EN.json | 5 ++---
2 files changed, 12 insertions(+), 5 deletions(-)
diff --git a/src/TextForEvent.ts b/src/TextForEvent.ts
index de65733be8..ad3417fd8c 100644
--- a/src/TextForEvent.ts
+++ b/src/TextForEvent.ts
@@ -244,9 +244,17 @@ function textForServerACLEvent(ev): () => string | null {
function textForMessageEvent(ev: MatrixEvent): () => string | null {
return () => {
const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
- const isRedacted = ev.isRedacted();
let message = ev.getContent().body;
- if (isRedacted) message = _t("Message Deleted");
+ if (ev.isRedacted()) {
+ message = _t("Message deleted");
+ const unsigned = ev.getUnsigned();
+ const redactedBecauseUserId = unsigned && unsigned.redacted_because && unsigned.redacted_because.sender;
+ if (redactedBecauseUserId && redactedBecauseUserId !== ev.getSender()) {
+ const room = MatrixClientPeg.get().getRoom(ev.getRoomId());
+ const sender = room && room.getMember(redactedBecauseUserId);
+ message = _t("Message deleted by %(name)s", { name: sender ? sender.name : redactedBecauseUserId });
+ }
+ }
if (ev.getContent().msgtype === "m.emote") {
message = "* " + senderDisplayName + " " + message;
} else if (ev.getContent().msgtype === "m.image") {
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 2bad735745..7a25ebfb7a 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -526,7 +526,8 @@
"%(senderDisplayName)s set the server ACLs for this room.": "%(senderDisplayName)s set the server ACLs for this room.",
"%(senderDisplayName)s changed the server ACLs for this room.": "%(senderDisplayName)s changed the server ACLs for this room.",
"🎉 All servers are banned from participating! This room can no longer be used.": "🎉 All servers are banned from participating! This room can no longer be used.",
- "Message Deleted": "Message Deleted",
+ "Message deleted": "Message deleted",
+ "Message deleted by %(name)s": "Message deleted by %(name)s",
"%(senderDisplayName)s sent an image.": "%(senderDisplayName)s sent an image.",
"%(senderDisplayName)s sent a sticker.": "%(senderDisplayName)s sent a sticker.",
"%(senderName)s set the main address for this room to %(address)s.": "%(senderName)s set the main address for this room to %(address)s.",
@@ -1881,8 +1882,6 @@
"Reactions": "Reactions",
"<reactors/><reactedWith> reacted with %(content)s</reactedWith>": "<reactors/><reactedWith> reacted with %(content)s</reactedWith>",
"<reactors/><reactedWith>reacted with %(shortName)s</reactedWith>": "<reactors/><reactedWith>reacted with %(shortName)s</reactedWith>",
- "Message deleted": "Message deleted",
- "Message deleted by %(name)s": "Message deleted by %(name)s",
"Message deleted on %(date)s": "Message deleted on %(date)s",
"%(senderDisplayName)s changed the avatar for %(roomName)s": "%(senderDisplayName)s changed the avatar for %(roomName)s",
"%(senderDisplayName)s removed the room avatar.": "%(senderDisplayName)s removed the room avatar.",
From 438b9d473079e01862b49fd5aff7c08c1302d853 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 23 Jun 2021 11:58:50 +0530
Subject: [PATCH 070/176] Get rid of jszip and replace it with a custom library
---
package.json | 1 -
.../views/elements/EventListSummary.tsx | 3 +-
src/components/views/rooms/EventTile.tsx | 2 +-
src/components/views/rooms/RoomHeader.js | 4 +-
src/utils/exportUtils/Exporter.ts | 27 +-
src/utils/exportUtils/HtmlExport.tsx | 58 ++--
src/utils/exportUtils/PlainTextExport.ts | 57 +++-
src/utils/exportUtils/StreamToZip.ts | 293 +++++++++++++++++-
yarn.lock | 34 +-
9 files changed, 377 insertions(+), 102 deletions(-)
diff --git a/package.json b/package.json
index 6e0a55de9c..485e4d7872 100644
--- a/package.json
+++ b/package.json
@@ -76,7 +76,6 @@
"highlight.js": "^10.5.0",
"html-entities": "^1.4.0",
"is-ip": "^3.1.0",
- "jszip": "^3.6.0",
"katex": "^0.12.0",
"linkifyjs": "^2.1.9",
"lodash": "^4.17.20",
diff --git a/src/components/views/elements/EventListSummary.tsx b/src/components/views/elements/EventListSummary.tsx
index 86d3e082ad..ef40251dec 100644
--- a/src/components/views/elements/EventListSummary.tsx
+++ b/src/components/views/elements/EventListSummary.tsx
@@ -76,7 +76,8 @@ const EventListSummary: React.FC<IProps> = ({
{ children }
</React.Fragment>;
} else {
- const avatars = summaryMembers.map((m) => <MemberAvatar key={m.userId} member={m} width={14} height={14} />);
+ const avatars = summaryMembers.map((m, idx) =>
+ <MemberAvatar key={m.userId + idx} member={m} width={14} height={14} />);
body = (
<div className="mx_EventTile_line">
<div className="mx_EventTile_info">
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index a1687d146f..20f02ff96c 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -105,7 +105,7 @@ for (const evType of ALL_RULE_TYPES) {
stateEventTileTypes[evType] = 'messages.TextualEvent';
}
-export function getHandlerTile(ev: MatrixEvent) {
+export function getHandlerTile(ev) {
const type = ev.getType();
// don't show verification requests we're not involved in,
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 1a21e503f3..891b690f7b 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -84,12 +84,12 @@ export default class RoomHeader extends React.Component {
_exportConversationalHistory = async () => {
await exportConversationalHistory(
this.props.room,
- exportFormats.LOGS,
+ exportFormats.HTML,
exportTypes.START_DATE,
{
startDate: parseInt(new Date("2021.05.20").getTime().toFixed(0)),
attachmentsIncluded: true,
- maxSize: 3 * 1024 * 1024, // 3 MB
+ maxSize: 7 * 1024 * 1024, // 3 MB
},
);
}
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index d5e1186b0f..f6dce9c8e8 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -6,12 +6,37 @@ import { decryptFile } from "../DecryptFile";
import { mediaFromContent } from "../../customisations/Media";
import { formatFullDateNoDay } from "../../DateUtils";
+type FileStream = {
+ name: string,
+ stream(): ReadableStream,
+};
+
export default abstract class Exporter {
+ protected files: FileStream[];
protected constructor(
protected room: Room,
protected exportType: exportTypes,
protected exportOptions?: exportOptions,
- ) {}
+ ) {
+ this.files = [];
+ }
+
+ protected addFile = (filePath: string, blob: Blob) => {
+ const file = {
+ name: filePath,
+ stream: () => blob.stream(),
+ }
+ this.files.push(file);
+ }
+
+ protected pumpToFileStream = async (reader: ReadableStreamDefaultReader, writer: WritableStreamDefaultWriter) => {
+ const res = await reader.read();
+ if (res.done) await writer.close();
+ else {
+ await writer.write(res.value);
+ await this.pumpToFileStream(reader, writer)
+ }
+ }
protected setEventMetadata = (event: MatrixEvent) => {
const client = MatrixClientPeg.get();
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 4456fd3737..1dec02981c 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -1,6 +1,5 @@
import React from "react"
import streamSaver from "streamsaver";
-import JSZip from "jszip";
import Exporter from "./Exporter";
import { mediaFromMxc } from "../../customisations/Media";
import { Room } from "matrix-js-sdk/src/models/room";
@@ -25,9 +24,9 @@ import { exportTypes } from "./exportUtils";
import { exportOptions } from "./exportUtils";
import MatrixClientContext from "../../contexts/MatrixClientContext";
import { MatrixClient } from "matrix-js-sdk";
+import zip from "./StreamToZip";
export default class HTMLExporter extends Exporter {
- protected zip: JSZip;
protected avatars: Map<string, boolean>;
protected permalinkCreator: RoomPermalinkCreator;
protected matrixClient: MatrixClient;
@@ -36,7 +35,6 @@ export default class HTMLExporter extends Exporter {
constructor(room: Room, exportType: exportTypes, exportOptions: exportOptions) {
super(room, exportType, exportOptions);
- this.zip = new JSZip();
this.avatars = new Map<string, boolean>();
this.matrixClient = MatrixClientPeg.get();
this.permalinkCreator = new RoomPermalinkCreator(this.room);
@@ -59,7 +57,7 @@ export default class HTMLExporter extends Exporter {
if (avatarUrl) {
const image = await fetch(avatarUrl);
blob = await image.blob();
- this.zip.file(avatarPath, blob);
+ this.addFile(avatarPath, blob);
}
const avatar = (
<BaseAvatar
@@ -217,7 +215,7 @@ export default class HTMLExporter extends Exporter {
this.avatars.set(member.userId, true);
const image = await fetch(avatarUrl);
const blob = await image.blob();
- this.zip.file(`users/${member.userId.replace(/:/g, '-')}`, blob);
+ this.addFile(`users/${member.userId.replace(/:/g, '-')}`, blob);
}
}
@@ -285,7 +283,7 @@ export default class HTMLExporter extends Exporter {
if (this.totalSize > this.exportOptions.maxSize - 1024 * 1024) {
this.exportOptions.attachmentsIncluded = false;
}
- this.zip.file(filePath, blob);
+ this.addFile(filePath, blob);
} else {
const modifiedContent = {
msgtype: "m.text",
@@ -334,53 +332,43 @@ export default class HTMLExporter extends Exporter {
const html = await this.createHTML(res);
- this.zip.file("index.html", html);
- this.zip.file("css/style.css", exportCSS);
- this.zip.file("js/script.js", exportJS);
+ this.addFile("index.html", new Blob([html]));
+ this.addFile("css/style.css", new Blob([exportCSS]));
+ this.addFile("js/script.js", new Blob([exportJS]));
for (const iconName in exportIcons) {
- this.zip.file(`icons/${iconName}`, exportIcons[iconName]);
+ this.addFile(`icons/${iconName}`, new Blob([exportIcons[iconName]]));
}
const filename = `matrix-export-${formatFullDateNoDay(new Date())}.zip`;
console.info("HTML creation successful!");
- console.info("Generating a ZIP...");
- //Generate the zip file asynchronously
- const blob = await this.zip.generateAsync({ type: "blob" });
- console.log("ZIP generated successfully");
- console.info("Writing to file system...")
//Support for firefox browser
streamSaver.WritableStream = ponyfill.WritableStream
//Create a writable stream to the directory
- const fileStream = streamSaver.createWriteStream(filename, { size: blob.size });
+ const fileStream = streamSaver.createWriteStream(filename);
+
const writer = fileStream.getWriter();
+ const files = this.files;
- // Here we chunk the blob into pieces of 10 MB, the size might be dynamically generated.
- // This can be used to keep track of the progress
- const sliceSize = 10 * 1e6;
- for (let fPointer = 0; fPointer < blob.size; fPointer += sliceSize) {
- const blobPiece = blob.slice(fPointer, fPointer + sliceSize);
- const reader = new FileReader();
+ console.info("Generating a ZIP...");
+ const readableZipStream = zip({
+ start(ctrl) {
+ for (const file of files) ctrl.enqueue(file);
+ ctrl.close();
+ },
+ });
+
+ console.info("Writing to file system...")
+
+ const reader = readableZipStream.getReader()
+ await this.pumpToFileStream(reader, writer);
- const waiter = new Promise<void>((resolve) => {
- reader.onloadend = evt => {
- const arrayBufferNew: any = evt.target.result;
- const uint8ArrayNew = new Uint8Array(arrayBufferNew);
- writer.write(uint8ArrayNew);
- resolve();
- };
- reader.readAsArrayBuffer(blobPiece);
- });
- await waiter;
- }
- await writer.close();
const exportEnd = performance.now();
console.info(`Export Successful! Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
window.removeEventListener("beforeunload", this.onBeforeUnload);
- return blob;
}
}
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index d6e76b5968..862fac3aa1 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -5,18 +5,23 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { formatFullDateNoDay } from "../../DateUtils";
import { _t } from "../../languageHandler";
import * as ponyfill from "web-streams-polyfill/ponyfill"
+import "web-streams-polyfill/ponyfill" // to support blob.stream()
import { haveTileForEvent } from "../../components/views/rooms/EventTile";
import { exportTypes } from "./exportUtils";
import { exportOptions } from "./exportUtils";
import { textForEvent } from "../../TextForEvent";
+import zip from "./StreamToZip";
+
export default class PlainTextExporter extends Exporter {
protected totalSize: number;
protected mediaOmitText: string;
+ private readonly fileDir: string;
constructor(room: Room, exportType: exportTypes, exportOptions: exportOptions) {
super(room, exportType, exportOptions);
this.totalSize = 0;
+ this.fileDir = `matrix-export-${formatFullDateNoDay(new Date())}`;
this.mediaOmitText = !this.exportOptions.attachmentsIncluded
? _t("Media omitted")
: _t("Media omitted - file size limit exceeded");
@@ -61,8 +66,17 @@ export default class PlainTextExporter extends Exporter {
return `<${rplName}${rplSource}> ${rplText}`;
}
- protected _textForEvent = (mxEv: MatrixEvent) => {
+ protected _textForEvent = async (mxEv: MatrixEvent) => {
const senderDisplayName = mxEv.sender && mxEv.sender.name ? mxEv.sender.name : mxEv.getSender();
+ if (this.exportOptions.attachmentsIncluded && this.isAttachment(mxEv)) {
+ const blob = await this.getMediaBlob(mxEv);
+ this.totalSize += blob.size;
+ const filePath = this.getFilePath(mxEv);
+ this.addFile(filePath, blob);
+ if (this.totalSize > this.exportOptions.maxSize - 1024 * 1024) {
+ this.exportOptions.attachmentsIncluded = false;
+ }
+ }
if (this.isReply(mxEv)) return senderDisplayName + ": " + this.textForReplyEvent(mxEv);
else return textForEvent(mxEv);
}
@@ -71,12 +85,18 @@ export default class PlainTextExporter extends Exporter {
let content = "";
for (const event of events) {
if (!haveTileForEvent(event)) continue;
- const textForEvent = this._textForEvent(event);
+ const textForEvent = await this._textForEvent(event);
content += textForEvent && `${new Date(event.getTs()).toLocaleString()} - ${textForEvent}\n`;
}
return content;
}
+ protected getFileName = () => {
+ if (this.exportOptions.attachmentsIncluded) {
+ return `${this.room.name}.txt`;
+ } else return `${this.fileDir}.txt`
+ }
+
public async export() {
console.info("Starting export process...");
console.info("Fetching events...");
@@ -89,17 +109,30 @@ export default class PlainTextExporter extends Exporter {
const text = await this.createOutput(res);
- const filename = `matrix-export-${formatFullDateNoDay(new Date())}.txt`;
-
- console.info("Writing to a file...");
- //Support for firefox browser
+ console.info("Writing to the file system...");
streamSaver.WritableStream = ponyfill.WritableStream
- //Create a writable stream to the directory
- const fileStream = streamSaver.createWriteStream(filename);
- const writer = fileStream.getWriter();
- const data = new TextEncoder().encode(text);
- await writer.write(data);
- await writer.close();
+
+ const files = this.files;
+ if (files.length) {
+ this.addFile(this.getFileName(), new Blob([text]));
+ const fileStream = streamSaver.createWriteStream(`${this.fileDir}.zip`);
+ const readableZipStream = zip({
+ start(ctrl) {
+ for (const file of files) ctrl.enqueue(file);
+ ctrl.close();
+ },
+ });
+ const writer = fileStream.getWriter()
+ const reader = readableZipStream.getReader()
+ await this.pumpToFileStream(reader, writer);
+ } else {
+ const fileStream = streamSaver.createWriteStream(`${this.fileDir}.txt`);
+ const writer = fileStream.getWriter()
+ const data = new TextEncoder().encode(text);
+ await writer.write(data);
+ await writer.close();
+ }
+
const exportEnd = performance.now();
console.info(`Export Successful! Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
window.removeEventListener("beforeunload", this.onBeforeUnload);
diff --git a/src/utils/exportUtils/StreamToZip.ts b/src/utils/exportUtils/StreamToZip.ts
index 01a2880386..b98e3e142f 100644
--- a/src/utils/exportUtils/StreamToZip.ts
+++ b/src/utils/exportUtils/StreamToZip.ts
@@ -1,17 +1,278 @@
-/*Not to be reviewed now*/
-// class fileCheckSum {
-// protected CRC32: number;
-// public table: any[];
-// constructor() {
-// this.CRC32 = -1
-// }
+/* global ReadableStream */
-// protected append(data: any[]) {
-// let crc = this.CRC32 | 0;
-// const table = this.table;
-// for (let offset = 0, len = data.length | 0; offset < len; offset++) {
-// crc = (crc >>> 8) ^ table[(crc ^ data[offset]) & 0xFF]
-// }
-// this.CRC32 = crc
-// }
-// }
+type TypedArray =
+ | Int8Array
+ | Uint8Array
+ | Int16Array
+ | Uint16Array
+ | Int32Array
+ | Uint32Array
+ | Uint8ClampedArray
+ | Float32Array
+ | Float64Array;
+
+
+/**
+ * 32-bit cyclic redundancy check, or CRC-32 - checksum
+ */
+class Crc32 {
+ crc: number;
+ table: any;
+ constructor() {
+ this.crc = -1;
+ this.table = (() => {
+ let i
+ let j
+ let t;
+ const table = [];
+
+ for (i = 0; i < 256; i++) {
+ t = i;
+ for (j = 0; j < 8; j++) {
+ t = (t & 1)
+ ? (t >>> 1) ^ 0xEDB88320
+ : t >>> 1;
+ }
+ table[i] = t;
+ }
+ return table
+ })()
+ }
+
+ append(data: TypedArray) {
+ let crc = this.crc | 0;
+ const table = this.table;
+ for (let offset = 0, len = data.length | 0; offset < len; offset++) {
+ crc = (crc >>> 8) ^ table[(crc ^ data[offset]) & 0xFF];
+ }
+ this.crc = crc;
+ }
+
+ get() {
+ return ~this.crc;
+ }
+}
+
+
+type DataHelper = {
+ array: Uint8Array,
+ view: DataView,
+}
+
+const getDataHelper = (byteLength: number): DataHelper => {
+ const uint8 = new Uint8Array(byteLength)
+ return {
+ array: uint8,
+ view: new DataView(uint8.buffer),
+ };
+}
+
+type FileLike = File & {
+ directory: string,
+ comment: string,
+ stream(): ReadableStream,
+}
+
+type ZipObj = {
+ crc?: Crc32,
+ uncompressedLength: number,
+ compressedLength: number,
+ ctrl: ReadableStreamDefaultController,
+ writeFooter: Function,
+ writeHeader: Function,
+ reader?: ReadableStreamDefaultReader,
+ offset: number
+ header?: DataHelper,
+ fileLike: FileLike,
+ level: number,
+ directory: boolean,
+}
+
+const pump = (zipObj: ZipObj) => zipObj.reader ? zipObj.reader.read().then(chunk => {
+ if (zipObj.crc) {
+ if (chunk.done) return zipObj.writeFooter();
+ const outputData = chunk.value;
+ zipObj.crc.append(outputData);
+ zipObj.uncompressedLength += outputData.length;
+ zipObj.compressedLength += outputData.length;
+ zipObj.ctrl.enqueue(outputData);
+ } else {
+ throw new Error('Missing zipObj.crc');
+ }
+}) : undefined;
+
+export default function ZIP(underlyingSource: UnderlyingSource) {
+ const files = Object.create(null);
+ const filenames: string[] = [];
+ const encoder = new TextEncoder();
+ let offset = 0;
+ let activeZipIndex = 0;
+ let ctrl: ReadableStreamDefaultController;
+ let activeZipObject: ZipObj;
+ let closed: boolean;
+
+ function next() {
+ activeZipIndex++;
+ activeZipObject = files[filenames[activeZipIndex]];
+ if (activeZipObject) processNextChunk();
+ else if (closed) closeZip();
+ }
+
+ const zipWriter: ReadableStreamDefaultController = {
+ desiredSize: null,
+
+ error(err) {
+ console.error(err)
+ },
+
+ enqueue(fileLike: FileLike) {
+ if (closed) {
+ throw new TypeError(
+ "Cannot enqueue a chunk into a readable stream that is closed or has been requested to be closed",
+ );
+ }
+
+ let name = fileLike.name.trim();
+ const date = new Date(typeof fileLike.lastModified === 'undefined' ? Date.now() : fileLike.lastModified);
+
+ if (fileLike.directory && !name.endsWith('/')) name += '/';
+ if (files[name]) throw new Error('File already exists.');
+
+ const nameBuf = encoder.encode(name);
+ filenames.push(name);
+
+ const zipObject: ZipObj = files[name] = {
+ level: 0,
+ ctrl,
+ directory: !!fileLike.directory,
+ nameBuf,
+ comment: encoder.encode(fileLike.comment || ''),
+ compressedLength: 0,
+ uncompressedLength: 0,
+ offset,
+
+ writeHeader() {
+ const header = getDataHelper(26)
+ const data = getDataHelper(30 + nameBuf.length)
+
+ zipObject.offset = offset;
+ zipObject.header = header;
+
+ if (zipObject.level !== 0 && !zipObject.directory) {
+ header.view.setUint16(4, 0x0800);
+ }
+
+ header.view.setUint32(0, 0x14000808);
+ header.view.setUint16(
+ 6,
+ (((date.getHours() << 6) | date.getMinutes()) << 5) | (date.getSeconds() / 2),
+ true,
+ );
+ header.view.setUint16(
+ 8,
+ ((((date.getFullYear() - 1980) << 4) | (date.getMonth() + 1)) << 5) |
+ date.getDate(),
+ true,
+ );
+ header.view.setUint16(22, nameBuf.length, true);
+ data.view.setUint32(0, 0x504b0304);
+ data.array.set(header.array, 4);
+ data.array.set(nameBuf, 30);
+ offset += data.array.length;
+ ctrl.enqueue(data.array);
+ },
+
+ writeFooter() {
+ const footer = getDataHelper(16);
+ footer.view.setUint32(0, 0x504b0708);
+
+ if (zipObject.crc && zipObject.header) {
+ zipObject.header.view.setUint32(10, zipObject.crc.get(), true);
+ zipObject.header.view.setUint32(14, zipObject.compressedLength, true);
+ zipObject.header.view.setUint32(18, zipObject.uncompressedLength, true);
+ footer.view.setUint32(4, zipObject.crc.get(), true);
+ footer.view.setUint32(8, zipObject.compressedLength, true);
+ footer.view.setUint32(12, zipObject.uncompressedLength, true);
+ }
+
+ ctrl.enqueue(footer.array);
+ offset += zipObject.compressedLength + 16;
+ next()
+ },
+ fileLike,
+ }
+
+ if (!activeZipObject) {
+ activeZipObject = zipObject;
+ processNextChunk();
+ }
+ },
+
+ close() {
+ if (closed) {
+ throw new TypeError(
+ "Cannot close a readable stream that has already been requested to be closed",
+ );
+ }
+ if (!activeZipObject) closeZip();
+ closed = true;
+ },
+ }
+
+ function closeZip() {
+ let length = 0;
+ let index = 0
+ let indexFilename;
+ let file;
+
+ for (indexFilename = 0; indexFilename < filenames.length; indexFilename++) {
+ file = files[filenames[indexFilename]];
+ length += 46 + file.nameBuf.length + file.comment.length;
+ }
+ const data = getDataHelper(length + 22)
+ for (indexFilename = 0; indexFilename < filenames.length; indexFilename++) {
+ file = files[filenames[indexFilename]];
+ data.view.setUint32(index, 0x504b0102);
+ data.view.setUint16(index + 4, 0x1400);
+ data.array.set(file.header.array, index + 6);
+ data.view.setUint16(index + 32, file.comment.length, true);
+ if (file.directory) {
+ data.view.setUint8(index + 38, 0x10);
+ }
+ data.view.setUint32(index + 42, file.offset, true);
+ data.array.set(file.nameBuf, index + 46);
+ data.array.set(file.comment, index + 46 + file.nameBuf.length);
+ index += 46 + file.nameBuf.length + file.comment.length;
+ }
+ data.view.setUint32(index, 0x504b0506);
+ data.view.setUint16(index + 8, filenames.length, true);
+ data.view.setUint16(index + 10, filenames.length, true);
+ data.view.setUint32(index + 12, length, true);
+ data.view.setUint32(index + 16, offset, true);
+ ctrl.enqueue(data.array);
+ ctrl.close();
+ }
+
+ function processNextChunk() {
+ if (!activeZipObject) return;
+ if (activeZipObject.reader) return pump(activeZipObject);
+ if (activeZipObject.fileLike.stream) {
+ activeZipObject.crc = new Crc32();
+ activeZipObject.reader = activeZipObject.fileLike.stream().getReader();
+ activeZipObject.writeHeader();
+ } else next();
+ }
+
+ return new ReadableStream({
+ start: c => {
+ ctrl = c;
+ underlyingSource.start && Promise.resolve(underlyingSource.start(zipWriter));
+ },
+ pull() {
+ return processNextChunk() || (
+ underlyingSource.pull &&
+ Promise.resolve(underlyingSource.pull(zipWriter))
+ )
+ },
+ });
+}
diff --git a/yarn.lock b/yarn.lock
index f02daedcd2..79d79db88f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4363,11 +4363,6 @@ ignore@^5.1.4, ignore@^5.1.8:
resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
-immediate@~3.0.5:
- version "3.0.6"
- resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
- integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
-
immutable@^3.7.4:
version "3.8.2"
resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
@@ -5494,16 +5489,6 @@ jsprim@^1.2.2:
array-includes "^3.1.2"
object.assign "^4.1.2"
-jszip@^3.6.0:
- version "3.6.0"
- resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.6.0.tgz#839b72812e3f97819cc13ac4134ffced95dd6af9"
- integrity sha512-jgnQoG9LKnWO3mnVNBnfhkh0QknICd1FGSrXcgrl67zioyJ4wgx25o9ZqwNtrROSflGBCGYnJfjrIyRIby1OoQ==
- dependencies:
- lie "~3.3.0"
- pako "~1.0.2"
- readable-stream "~2.3.6"
- set-immediate-shim "~1.0.1"
-
katex@^0.12.0:
version "0.12.0"
resolved "https://registry.yarnpkg.com/katex/-/katex-0.12.0.tgz#2fb1c665dbd2b043edcf8a1f5c555f46beaa0cb9"
@@ -5571,13 +5556,6 @@ levn@^0.4.1:
prelude-ls "^1.2.1"
type-check "~0.4.0"
-lie@~3.3.0:
- version "3.3.0"
- resolved "https://registry.yarnpkg.com/lie/-/lie-3.3.0.tgz#dcf82dee545f46074daf200c7c1c5a08e0f40f6a"
- integrity sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==
- dependencies:
- immediate "~3.0.5"
-
lines-and-columns@^1.1.6:
version "1.1.6"
resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
@@ -6346,11 +6324,6 @@ pako@^2.0.3:
resolved "https://registry.yarnpkg.com/pako/-/pako-2.0.3.tgz#cdf475e31b678565251406de9e759196a0ea7a43"
integrity sha512-WjR1hOeg+kki3ZIOjaf4b5WVcay1jaliKSYiEaB1XzwhMQZJxRdQRv0V31EKBYlxb4T7SK3hjfc/jxyU64BoSw==
-pako@~1.0.2:
- version "1.0.11"
- resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
- integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
-
parent-module@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -6959,7 +6932,7 @@ read-pkg@^5.2.0:
parse-json "^5.0.0"
type-fest "^0.6.0"
-readable-stream@^2.0.2, readable-stream@~2.3.6:
+readable-stream@^2.0.2:
version "2.3.7"
resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
@@ -7393,11 +7366,6 @@ set-blocking@^2.0.0:
resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
-set-immediate-shim@~1.0.1:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
- integrity sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E=
-
set-value@^2.0.0, set-value@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
From 5fff64f1280919640819601185799384ef81cb35 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 23 Jun 2021 12:14:20 +0530
Subject: [PATCH 071/176] Fix types
---
src/utils/exportUtils/HtmlExport.tsx | 3 +--
yarn.lock | 2 +-
2 files changed, 2 insertions(+), 3 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 1dec02981c..9271db241e 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -79,8 +79,7 @@ export default class HTMLExporter extends Exporter {
const creatorName = this.room?.getMember(creator)?.rawDisplayName || creator;
const exporter = this.matrixClient.getUserId();
const exporterName = this.room?.getMember(exporter)?.rawDisplayName;
- const topic = this.room.currentState.getStateEvents(EventType.RoomTopic, "")?.getContent()?.topic
- || this.room.topic || "";
+ const topic = this.room.currentState.getStateEvents(EventType.RoomTopic, "")?.getContent()?.topic || "";
const createdText = _t("%(creatorName)s created this room.", {
creatorName,
});
diff --git a/yarn.lock b/yarn.lock
index 7ebe0d2ba8..0cc8be983f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1486,7 +1486,7 @@
resolved "https://registry.yarnpkg.com/@types/counterpart/-/counterpart-0.18.1.tgz#b1b784d9e54d9879f0a8cb12f2caedab65430fe8"
integrity sha512-PRuFlBBkvdDOtxlIASzTmkEFar+S66Ek48NVVTWMUjtJAdn5vyMSN8y6IZIoIymGpR36q2nZbIYazBWyFxL+IQ==
-"@types/diff-match-patch@^1.0.32":
+"@types/diff-match-patch@^1.0.5":
version "1.0.32"
resolved "https://registry.yarnpkg.com/@types/diff-match-patch/-/diff-match-patch-1.0.32.tgz#d9c3b8c914aa8229485351db4865328337a3d09f"
integrity sha512-bPYT5ECFiblzsVzyURaNhljBH2Gh1t9LowgUwciMrNAhFewLkHT2H0Mto07Y4/3KCOGZHRQll3CTtQZ0X11D/A==
From dd40f81edf3263789724310cc831b0bbe1f356be Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Thu, 24 Jun 2021 14:03:12 +0530
Subject: [PATCH 072/176] Wrap media fetch in try catch
---
src/utils/exportUtils/HtmlExport.tsx | 57 ++++++++++++++++++----------
1 file changed, 36 insertions(+), 21 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 9271db241e..e05a7bd494 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -57,6 +57,7 @@ export default class HTMLExporter extends Exporter {
if (avatarUrl) {
const image = await fetch(avatarUrl);
blob = await image.blob();
+ this.totalSize += blob.size;
this.addFile(avatarPath, blob);
}
const avatar = (
@@ -270,32 +271,44 @@ export default class HTMLExporter extends Exporter {
return eventTileMarkup;
}
+ protected createModifiedEvent = (text: string, mxEv: MatrixEvent) => {
+ const modifiedContent = {
+ msgtype: "m.text",
+ body: `*${text}*`,
+ format: "org.matrix.custom.html",
+ formatted_body: `<em>${text}</em>`,
+ }
+ const modifiedEvent = new MatrixEvent();
+ modifiedEvent.event = mxEv.event;
+ modifiedEvent.sender = mxEv.sender;
+ modifiedEvent.event.type = "m.room.message";
+ modifiedEvent.event.content = modifiedContent;
+ return modifiedEvent;
+ }
+
protected async createMessageBody(mxEv: MatrixEvent, joined = false) {
let eventTile: string;
if (this.isAttachment(mxEv)) {
if (this.exportOptions.attachmentsIncluded) {
- const blob = await this.getMediaBlob(mxEv);
- this.totalSize += blob.size;
- const filePath = this.getFilePath(mxEv);
- eventTile = await this.getEventTile(mxEv, joined, filePath);
- if (this.totalSize > this.exportOptions.maxSize - 1024 * 1024) {
- this.exportOptions.attachmentsIncluded = false;
+ try {
+ const blob = await this.getMediaBlob(mxEv);
+ this.totalSize += blob.size;
+ const filePath = this.getFilePath(mxEv);
+ eventTile = await this.getEventTile(mxEv, joined, filePath);
+ if (this.totalSize > this.exportOptions.maxSize - 1024 * 512) {
+ this.exportOptions.attachmentsIncluded = false;
+ }
+ this.addFile(filePath, blob);
+ } catch (e) {
+ console.log("Error while fetching file");
+ eventTile = await this.getEventTile(
+ this.createModifiedEvent(_t("Error fetching file"), mxEv),
+ joined,
+ );
}
- this.addFile(filePath, blob);
} else {
- const modifiedContent = {
- msgtype: "m.text",
- body: `*${this.mediaOmitText}*`,
- format: "org.matrix.custom.html",
- formatted_body: `<em>${this.mediaOmitText}</em>`,
- }
- const modifiedEvent = new MatrixEvent();
- modifiedEvent.event = mxEv.event;
- modifiedEvent.sender = mxEv.sender;
- modifiedEvent.event.type = "m.room.message";
- modifiedEvent.event.content = modifiedContent;
- eventTile = await this.getEventTile(modifiedEvent, joined);
+ eventTile = await this.getEventTile(this.createModifiedEvent(this.mediaOmitText, mxEv), joined);
}
} else eventTile = await this.getEventTile(mxEv, joined);
@@ -305,14 +318,16 @@ export default class HTMLExporter extends Exporter {
protected async createHTML(events: MatrixEvent[]) {
let content = "";
let prevEvent = null;
- for (const event of events) {
+ for (let i = 0; i < events.length; i++) {
+ const event = events[i];
+ console.log("Processing event " + i + " out of " + events.length);
if (!haveTileForEvent(event)) continue;
content += this._wantsDateSeparator(event, prevEvent) ? this.getDateSeparator(event) : "";
const shouldBeJoined = !this._wantsDateSeparator(event, prevEvent)
&& shouldFormContinuation(prevEvent, event);
const body = await this.createMessageBody(event, shouldBeJoined);
-
+ this.totalSize += Buffer.byteLength(body);
content += body;
prevEvent = event;
}
From 4bfac11911c139d926bb00ea120cbe4705249b00 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Thu, 24 Jun 2021 14:04:37 +0530
Subject: [PATCH 073/176] i18n
---
src/i18n/strings/en_EN.json | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index f0f8cd343b..ae9fc753e0 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -736,6 +736,7 @@
"%(creatorName)s created this room.": "%(creatorName)s created this room.",
"This is the start of export of <roomName/>. Exported by <exporterDetails/> at %(exportDate)s.": "This is the start of export of <roomName/>. Exported by <exporterDetails/> at %(exportDate)s.",
"Topic: %(topic)s": "Topic: %(topic)s",
+ "Error fetching file": "Error fetching file",
"Help us improve %(brand)s": "Help us improve %(brand)s",
"Send <UsageDataLink>anonymous usage data</UsageDataLink> which helps us improve %(brand)s. This will use a <PolicyLink>cookie</PolicyLink>.": "Send <UsageDataLink>anonymous usage data</UsageDataLink> which helps us improve %(brand)s. This will use a <PolicyLink>cookie</PolicyLink>.",
"Yes": "Yes",
From 112dfa2b96fc7e4d6dd10348ea293034eeca6b36 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Thu, 24 Jun 2021 18:19:12 +0530
Subject: [PATCH 074/176] Finish JSON export implementation
---
src/components/views/rooms/RoomHeader.js | 6 +-
src/utils/exportUtils/Exporter.ts | 13 +--
src/utils/exportUtils/HtmlExport.tsx | 8 +-
src/utils/exportUtils/JSONExport.ts | 124 +++++++++++++++++++++++
src/utils/exportUtils/PlainTextExport.ts | 1 -
src/utils/exportUtils/exportUtils.ts | 2 +
6 files changed, 138 insertions(+), 16 deletions(-)
create mode 100644 src/utils/exportUtils/JSONExport.ts
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 891b690f7b..f37145261c 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -84,12 +84,12 @@ export default class RoomHeader extends React.Component {
_exportConversationalHistory = async () => {
await exportConversationalHistory(
this.props.room,
- exportFormats.HTML,
+ exportFormats.JSON,
exportTypes.START_DATE,
{
startDate: parseInt(new Date("2021.05.20").getTime().toFixed(0)),
- attachmentsIncluded: true,
- maxSize: 7 * 1024 * 1024, // 3 MB
+ attachmentsIncluded: false,
+ maxSize: 7 * 1024 * 1024, // 7 MB
},
);
}
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index f6dce9c8e8..5e766ff7ba 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -5,6 +5,7 @@ import { exportOptions, exportTypes } from "./exportUtils";
import { decryptFile } from "../DecryptFile";
import { mediaFromContent } from "../../customisations/Media";
import { formatFullDateNoDay } from "../../DateUtils";
+import { MatrixClient } from "matrix-js-sdk";
type FileStream = {
name: string,
@@ -13,12 +14,14 @@ type FileStream = {
export default abstract class Exporter {
protected files: FileStream[];
+ protected client: MatrixClient;
protected constructor(
protected room: Room,
protected exportType: exportTypes,
protected exportOptions?: exportOptions,
) {
this.files = [];
+ this.client = MatrixClientPeg.get();
}
protected addFile = (filePath: string, blob: Blob) => {
@@ -39,8 +42,7 @@ export default abstract class Exporter {
}
protected setEventMetadata = (event: MatrixEvent) => {
- const client = MatrixClientPeg.get();
- const roomState = client.getRoom(this.room.roomId).currentState;
+ const roomState = this.client.getRoom(this.room.roomId).currentState;
event.sender = roomState.getSentinelMember(
event.getSender(),
);
@@ -68,8 +70,7 @@ export default abstract class Exporter {
}
protected getRequiredEvents = async () : Promise<MatrixEvent[]> => {
- const client = MatrixClientPeg.get();
- const eventMapper = client.getEventMapper();
+ const eventMapper = this.client.getEventMapper();
let prevToken: string|null = null;
let limit = this.getLimit();
@@ -77,7 +78,7 @@ export default abstract class Exporter {
while (limit) {
const eventsPerCrawl = Math.min(limit, 1000);
- const res: any = await client.createMessagesRequest(this.room.roomId, prevToken, eventsPerCrawl, "b");
+ const res: any = await this.client.createMessagesRequest(this.room.roomId, prevToken, eventsPerCrawl, "b");
if (res.chunk.length === 0) break;
@@ -102,7 +103,7 @@ export default abstract class Exporter {
const decryptionPromises = events
.filter(event => event.isEncrypted())
.map(event => {
- return client.decryptEventIfNeeded(event, {
+ return this.client.decryptEventIfNeeded(event, {
isRetry: true,
emit: false,
});
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index e05a7bd494..2db4e243a7 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -10,7 +10,6 @@ import { shouldFormContinuation } from "../../components/structures/MessagePanel
import { formatFullDateNoDay, formatFullDateNoDayNoTime, wantsDateSeparator } from "../../DateUtils";
import { RoomPermalinkCreator } from "../permalinks/Permalinks";
import { _t } from "../../languageHandler";
-import { MatrixClientPeg } from "../../MatrixClientPeg";
import { EventType } from "matrix-js-sdk/src/@types/event";
import * as ponyfill from "web-streams-polyfill/ponyfill"
import * as Avatar from "../../Avatar";
@@ -23,20 +22,17 @@ import exportIcons from "./exportIcons";
import { exportTypes } from "./exportUtils";
import { exportOptions } from "./exportUtils";
import MatrixClientContext from "../../contexts/MatrixClientContext";
-import { MatrixClient } from "matrix-js-sdk";
import zip from "./StreamToZip";
export default class HTMLExporter extends Exporter {
protected avatars: Map<string, boolean>;
protected permalinkCreator: RoomPermalinkCreator;
- protected matrixClient: MatrixClient;
protected totalSize: number;
protected mediaOmitText: string;
constructor(room: Room, exportType: exportTypes, exportOptions: exportOptions) {
super(room, exportType, exportOptions);
this.avatars = new Map<string, boolean>();
- this.matrixClient = MatrixClientPeg.get();
this.permalinkCreator = new RoomPermalinkCreator(this.room);
this.totalSize = 0;
this.mediaOmitText = !this.exportOptions.attachmentsIncluded
@@ -78,7 +74,7 @@ export default class HTMLExporter extends Exporter {
const exportDate = formatFullDateNoDayNoTime(new Date());
const creator = this.room.currentState.getStateEvents(EventType.RoomCreate, "")?.getSender();
const creatorName = this.room?.getMember(creator)?.rawDisplayName || creator;
- const exporter = this.matrixClient.getUserId();
+ const exporter = this.client.getUserId();
const exporterName = this.room?.getMember(exporter)?.rawDisplayName;
const topic = this.room.currentState.getStateEvents(EventType.RoomTopic, "")?.getContent()?.topic || "";
const createdText = _t("%(creatorName)s created this room.", {
@@ -235,7 +231,7 @@ export default class HTMLExporter extends Exporter {
if (hasAvatar) await this.saveAvatarIfNeeded(mxEv);
const eventTile = <div className="mx_Export_EventWrapper" id={mxEv.getId()}>
- <MatrixClientContext.Provider value = {this.matrixClient}>
+ <MatrixClientContext.Provider value = {this.client}>
<EventTile
mxEvent={mxEv}
continuation={continuation}
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
new file mode 100644
index 0000000000..89cfbcb4ff
--- /dev/null
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -0,0 +1,124 @@
+import streamSaver from "streamsaver";
+import Exporter from "./Exporter";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { formatFullDateNoDay, formatFullDateNoDayNoTime } from "../../DateUtils";
+import * as ponyfill from "web-streams-polyfill/ponyfill"
+import { haveTileForEvent } from "../../components/views/rooms/EventTile";
+import { exportTypes } from "./exportUtils";
+import { exportOptions } from "./exportUtils";
+import zip from "./StreamToZip";
+import { EventType } from "../../../../matrix-js-sdk/src/@types/event";
+
+
+export default class JSONExporter extends Exporter {
+ protected totalSize: number;
+
+ constructor(room: Room, exportType: exportTypes, exportOptions: exportOptions) {
+ super(room, exportType, exportOptions);
+ this.totalSize = 0;
+ window.addEventListener("beforeunload", this.onBeforeUnload)
+ }
+
+ protected wrapJSON(json: string): string {
+ const exportDate = formatFullDateNoDayNoTime(new Date());
+ const creator = this.room.currentState.getStateEvents(EventType.RoomCreate, "")?.getSender();
+ const creatorName = this.room?.getMember(creator)?.rawDisplayName || creator;
+ const topic = this.room.currentState.getStateEvents(EventType.RoomTopic, "")?.getContent()?.topic || "";
+ const exporter = this.client.getUserId();
+ const exporterName = this.room?.getMember(exporter)?.rawDisplayName || exporter;
+ return `{
+"room_name": "${this.room.name}",
+"room_creator": "${creatorName}",
+"topic": "${topic}",
+"export_date": "${exportDate}",
+"exported_by": "${exporterName}",
+"messages": [
+${json}
+]
+}`
+ }
+
+ protected indentEachLine(string: string) {
+ const indent = ' ';
+ const regex = /^(?!\s*$)/gm;
+ return string.replace(regex, indent.repeat(1));
+ }
+
+ protected onBeforeUnload = (e: BeforeUnloadEvent) => {
+ e.preventDefault();
+ return e.returnValue = "Are you sure you want to exit during this export?";
+ }
+
+ protected async getJSONString(mxEv: MatrixEvent) {
+ if (this.exportOptions.attachmentsIncluded && this.isAttachment(mxEv)) {
+ try {
+ const blob = await this.getMediaBlob(mxEv);
+ this.totalSize += blob.size;
+ const filePath = this.getFilePath(mxEv);
+ this.addFile(filePath, blob);
+ if (this.totalSize > this.exportOptions.maxSize - 1024 * 1024) {
+ this.exportOptions.attachmentsIncluded = false;
+ }
+ } catch (err) {
+ console.log("Error fetching file: " + err);
+ }
+ }
+ const jsonEvent: any = mxEv.toJSON();
+ const clearEvent = mxEv.isEncrypted() ? jsonEvent.decrypted : jsonEvent;
+ const jsonString = JSON.stringify(clearEvent, null, 2);
+ return jsonString.length > 2 ? jsonString + ",\n" : "";
+ }
+
+ protected async createOutput(events: MatrixEvent[]) {
+ let content = "";
+ for (const event of events) {
+ if (!haveTileForEvent(event)) continue;
+ content += await this.getJSONString(event);
+ }
+ return this.wrapJSON(this.indentEachLine(content.slice(0, -2)));
+ }
+
+ public async export() {
+ console.info("Starting export process...");
+ console.info("Fetching events...");
+ const fetchStart = performance.now();
+ const res = await this.getRequiredEvents();
+ const fetchEnd = performance.now();
+
+ console.log(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000} s`);
+ console.info("Creating Output...");
+
+ const text = await this.createOutput(res);
+
+ console.info("Writing to the file system...");
+ streamSaver.WritableStream = ponyfill.WritableStream
+
+ const fileName = `matrix-export-${formatFullDateNoDay(new Date())}.json`;
+ const files = this.files;
+ if (files.length) {
+ this.addFile("result.json", new Blob([text]));
+ const fileStream = streamSaver.createWriteStream(fileName.slice(0, -5) + ".zip");
+ const readableZipStream = zip({
+ start(ctrl) {
+ for (const file of files) ctrl.enqueue(file);
+ ctrl.close();
+ },
+ });
+ const writer = fileStream.getWriter()
+ const reader = readableZipStream.getReader()
+ await this.pumpToFileStream(reader, writer);
+ } else {
+ const fileStream = streamSaver.createWriteStream(fileName);
+ const writer = fileStream.getWriter()
+ const data = new TextEncoder().encode(text);
+ await writer.write(data);
+ await writer.close();
+ }
+
+ const exportEnd = performance.now();
+ console.info(`Export Successful! Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+ window.removeEventListener("beforeunload", this.onBeforeUnload);
+ }
+}
+
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 862fac3aa1..89a9ff4b98 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -5,7 +5,6 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { formatFullDateNoDay } from "../../DateUtils";
import { _t } from "../../languageHandler";
import * as ponyfill from "web-streams-polyfill/ponyfill"
-import "web-streams-polyfill/ponyfill" // to support blob.stream()
import { haveTileForEvent } from "../../components/views/rooms/EventTile";
import { exportTypes } from "./exportUtils";
import { exportOptions } from "./exportUtils";
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 22457f926b..ba87dbdd67 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -1,5 +1,6 @@
import { Room } from "matrix-js-sdk/src/models/room";
import HTMLExporter from "./HtmlExport";
+import JSONExporter from "./JSONExport";
import PlainTextExporter from "./PlainTextExport";
export enum exportFormats {
@@ -33,6 +34,7 @@ const exportConversationalHistory = async (
await new HTMLExporter(room, exportType, exportOptions).export();
break;
case exportFormats.JSON:
+ await new JSONExporter(room, exportType, exportOptions).export();
break;
case exportFormats.LOGS:
await new PlainTextExporter(room, exportType, exportOptions).export();
From 70cc2b20d5dc8f035505d17fde47418d2eb385e6 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Thu, 24 Jun 2021 18:23:08 +0530
Subject: [PATCH 075/176] Fix auto import
---
src/utils/exportUtils/JSONExport.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index 89cfbcb4ff..95903bfecd 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -8,7 +8,7 @@ import { haveTileForEvent } from "../../components/views/rooms/EventTile";
import { exportTypes } from "./exportUtils";
import { exportOptions } from "./exportUtils";
import zip from "./StreamToZip";
-import { EventType } from "../../../../matrix-js-sdk/src/@types/event";
+import { EventType } from "matrix-js-sdk/src/@types/event";
export default class JSONExporter extends Exporter {
From ccd02c48b311f5b0ca5e7136e723c00578b720b2 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Thu, 24 Jun 2021 22:49:36 +0530
Subject: [PATCH 076/176] Nicer indentation
---
src/utils/exportUtils/JSONExport.ts | 16 ++++++++--------
1 file changed, 8 insertions(+), 8 deletions(-)
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index 95903bfecd..af62428ae1 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -28,21 +28,21 @@ export default class JSONExporter extends Exporter {
const exporter = this.client.getUserId();
const exporterName = this.room?.getMember(exporter)?.rawDisplayName || exporter;
return `{
-"room_name": "${this.room.name}",
-"room_creator": "${creatorName}",
-"topic": "${topic}",
-"export_date": "${exportDate}",
-"exported_by": "${exporterName}",
-"messages": [
+ "room_name": "${this.room.name}",
+ "room_creator": "${creatorName}",
+ "topic": "${topic}",
+ "export_date": "${exportDate}",
+ "exported_by": "${exporterName}",
+ "messages": [
${json}
-]
+ ]
}`
}
protected indentEachLine(string: string) {
const indent = ' ';
const regex = /^(?!\s*$)/gm;
- return string.replace(regex, indent.repeat(1));
+ return string.replace(regex, indent.repeat(2));
}
protected onBeforeUnload = (e: BeforeUnloadEvent) => {
From 3718826e94bc163250c0f5ed397f4dd41f4a3e92 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 25 Jun 2021 11:16:59 +0530
Subject: [PATCH 077/176] refactor to share downloading code across all formats
---
src/components/views/rooms/RoomHeader.js | 4 +-
src/utils/exportUtils/Exporter.ts | 67 +++++++++++++++++++++---
src/utils/exportUtils/HtmlExport.tsx | 37 ++-----------
src/utils/exportUtils/JSONExport.ts | 43 ++++-----------
src/utils/exportUtils/PlainTextExport.ts | 44 +++-------------
src/utils/exportUtils/StreamToZip.ts | 2 +-
src/utils/exportUtils/exportUtils.ts | 4 +-
7 files changed, 83 insertions(+), 118 deletions(-)
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index f37145261c..d977b6d87b 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -84,11 +84,11 @@ export default class RoomHeader extends React.Component {
_exportConversationalHistory = async () => {
await exportConversationalHistory(
this.props.room,
- exportFormats.JSON,
+ exportFormats.PLAIN_TEXT,
exportTypes.START_DATE,
{
startDate: parseInt(new Date("2021.05.20").getTime().toFixed(0)),
- attachmentsIncluded: false,
+ attachmentsIncluded: true,
maxSize: 7 * 1024 * 1024, // 7 MB
},
);
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 5e766ff7ba..028b5c808e 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -1,3 +1,4 @@
+import streamSaver from "streamsaver";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixClientPeg } from "../../MatrixClientPeg";
@@ -6,6 +7,9 @@ import { decryptFile } from "../DecryptFile";
import { mediaFromContent } from "../../customisations/Media";
import { formatFullDateNoDay } from "../../DateUtils";
import { MatrixClient } from "matrix-js-sdk";
+import streamToZIP from "./StreamToZip";
+import * as ponyfill from "web-streams-polyfill/ponyfill"
+import "web-streams-polyfill/ponyfill"; // to support streams API for older browsers
type FileStream = {
name: string,
@@ -15,6 +19,9 @@ type FileStream = {
export default abstract class Exporter {
protected files: FileStream[];
protected client: MatrixClient;
+ protected writer: WritableStreamDefaultWriter<any>;
+ protected fileStream: WritableStream<any>;
+
protected constructor(
protected room: Room,
protected exportType: exportTypes,
@@ -22,9 +29,16 @@ export default abstract class Exporter {
) {
this.files = [];
this.client = MatrixClientPeg.get();
+ window.addEventListener("beforeunload", this.onBeforeUnload);
+ window.addEventListener("onunload", this.abortExport);
}
- protected addFile = (filePath: string, blob: Blob) => {
+ protected onBeforeUnload(e: BeforeUnloadEvent) {
+ e.preventDefault();
+ return e.returnValue = "Are you sure you want to exit during this export?";
+ }
+
+ protected addFile(filePath: string, blob: Blob) {
const file = {
name: filePath,
stream: () => blob.stream(),
@@ -32,16 +46,53 @@ export default abstract class Exporter {
this.files.push(file);
}
- protected pumpToFileStream = async (reader: ReadableStreamDefaultReader, writer: WritableStreamDefaultWriter) => {
+ protected async downloadZIP() {
+ const filename = `matrix-export-${formatFullDateNoDay(new Date())}.zip`;
+ //Support for firefox browser
+ streamSaver.WritableStream = ponyfill.WritableStream
+ //Create a writable stream to the directory
+ this.fileStream = streamSaver.createWriteStream(filename);
+
+ this.writer = this.fileStream.getWriter();
+ const files = this.files;
+
+ console.info("Generating a ZIP...");
+ const readableZipStream = streamToZIP({
+ start(ctrl) {
+ for (const file of files) ctrl.enqueue(file);
+ ctrl.close();
+ },
+ });
+
+ console.info("Writing to the file system...")
+
+ const reader = readableZipStream.getReader()
+ await this.pumpToFileStream(reader);
+ }
+
+ protected async downloadPlainText(fileName: string, text: string): Promise<any> {
+ this.fileStream = streamSaver.createWriteStream(fileName);
+ this.writer = this.fileStream.getWriter()
+ const data = new TextEncoder().encode(text);
+ await this.writer.write(data);
+ await this.writer.close();
+ }
+
+ protected async abortExport(): Promise<void> {
+ if (this.fileStream) await this.fileStream.abort();
+ if (this.writer) await this.writer.abort();
+ }
+
+ protected async pumpToFileStream(reader: ReadableStreamDefaultReader) {
const res = await reader.read();
- if (res.done) await writer.close();
+ if (res.done) await this.writer.close();
else {
- await writer.write(res.value);
- await this.pumpToFileStream(reader, writer)
+ await this.writer.write(res.value);
+ await this.pumpToFileStream(reader);
}
}
- protected setEventMetadata = (event: MatrixEvent) => {
+ protected setEventMetadata(event: MatrixEvent) {
const roomState = this.client.getRoom(this.room.roomId).currentState;
event.sender = roomState.getSentinelMember(
event.getSender(),
@@ -54,7 +105,7 @@ export default abstract class Exporter {
return event;
}
- protected getLimit = () => {
+ protected getLimit() {
let limit: number;
switch (this.exportType) {
case exportTypes.LAST_N_MESSAGES:
@@ -69,7 +120,7 @@ export default abstract class Exporter {
return limit;
}
- protected getRequiredEvents = async () : Promise<MatrixEvent[]> => {
+ protected async getRequiredEvents():Promise<MatrixEvent[]> {
const eventMapper = this.client.getEventMapper();
let prevToken: string|null = null;
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 2db4e243a7..6415f996db 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -1,5 +1,4 @@
import React from "react"
-import streamSaver from "streamsaver";
import Exporter from "./Exporter";
import { mediaFromMxc } from "../../customisations/Media";
import { Room } from "matrix-js-sdk/src/models/room";
@@ -7,11 +6,10 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { renderToStaticMarkup } from 'react-dom/server'
import { Layout } from "../../settings/Layout";
import { shouldFormContinuation } from "../../components/structures/MessagePanel";
-import { formatFullDateNoDay, formatFullDateNoDayNoTime, wantsDateSeparator } from "../../DateUtils";
+import { formatFullDateNoDayNoTime, wantsDateSeparator } from "../../DateUtils";
import { RoomPermalinkCreator } from "../permalinks/Permalinks";
import { _t } from "../../languageHandler";
import { EventType } from "matrix-js-sdk/src/@types/event";
-import * as ponyfill from "web-streams-polyfill/ponyfill"
import * as Avatar from "../../Avatar";
import EventTile, { haveTileForEvent } from "../../components/views/rooms/EventTile";
import DateSeparator from "../../components/views/messages/DateSeparator";
@@ -22,7 +20,6 @@ import exportIcons from "./exportIcons";
import { exportTypes } from "./exportUtils";
import { exportOptions } from "./exportUtils";
import MatrixClientContext from "../../contexts/MatrixClientContext";
-import zip from "./StreamToZip";
export default class HTMLExporter extends Exporter {
protected avatars: Map<string, boolean>;
@@ -38,12 +35,6 @@ export default class HTMLExporter extends Exporter {
this.mediaOmitText = !this.exportOptions.attachmentsIncluded
? _t("Media omitted")
: _t("Media omitted - file size limit exceeded");
- window.addEventListener("beforeunload", this.onBeforeUnload)
- }
-
- protected onBeforeUnload = (e: BeforeUnloadEvent) => {
- e.preventDefault();
- return e.returnValue = "Are you sure you want to exit during this export?";
}
protected async getRoomAvatar() {
@@ -267,7 +258,7 @@ export default class HTMLExporter extends Exporter {
return eventTileMarkup;
}
- protected createModifiedEvent = (text: string, mxEv: MatrixEvent) => {
+ protected createModifiedEvent(text: string, mxEv: MatrixEvent) {
const modifiedContent = {
msgtype: "m.text",
body: `*${text}*`,
@@ -351,34 +342,14 @@ export default class HTMLExporter extends Exporter {
this.addFile(`icons/${iconName}`, new Blob([exportIcons[iconName]]));
}
- const filename = `matrix-export-${formatFullDateNoDay(new Date())}.zip`;
-
console.info("HTML creation successful!");
- //Support for firefox browser
- streamSaver.WritableStream = ponyfill.WritableStream
- //Create a writable stream to the directory
- const fileStream = streamSaver.createWriteStream(filename);
-
- const writer = fileStream.getWriter();
- const files = this.files;
-
- console.info("Generating a ZIP...");
- const readableZipStream = zip({
- start(ctrl) {
- for (const file of files) ctrl.enqueue(file);
- ctrl.close();
- },
- });
-
- console.info("Writing to file system...")
-
- const reader = readableZipStream.getReader()
- await this.pumpToFileStream(reader, writer);
+ await this.downloadZIP();
const exportEnd = performance.now();
console.info(`Export Successful! Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
window.removeEventListener("beforeunload", this.onBeforeUnload);
+ window.removeEventListener("onunload", this.abortExport);
}
}
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index af62428ae1..b261b305f9 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -1,13 +1,10 @@
-import streamSaver from "streamsaver";
import Exporter from "./Exporter";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { formatFullDateNoDay, formatFullDateNoDayNoTime } from "../../DateUtils";
-import * as ponyfill from "web-streams-polyfill/ponyfill"
import { haveTileForEvent } from "../../components/views/rooms/EventTile";
import { exportTypes } from "./exportUtils";
import { exportOptions } from "./exportUtils";
-import zip from "./StreamToZip";
import { EventType } from "matrix-js-sdk/src/@types/event";
@@ -17,7 +14,6 @@ export default class JSONExporter extends Exporter {
constructor(room: Room, exportType: exportTypes, exportOptions: exportOptions) {
super(room, exportType, exportOptions);
this.totalSize = 0;
- window.addEventListener("beforeunload", this.onBeforeUnload)
}
protected wrapJSON(json: string): string {
@@ -39,15 +35,10 @@ ${json}
}`
}
- protected indentEachLine(string: string) {
+ protected indentEachLine(JSONString: string, spaces: number) {
const indent = ' ';
const regex = /^(?!\s*$)/gm;
- return string.replace(regex, indent.repeat(2));
- }
-
- protected onBeforeUnload = (e: BeforeUnloadEvent) => {
- e.preventDefault();
- return e.returnValue = "Are you sure you want to exit during this export?";
+ return JSONString.replace(regex, indent.repeat(spaces));
}
protected async getJSONString(mxEv: MatrixEvent) {
@@ -76,7 +67,7 @@ ${json}
if (!haveTileForEvent(event)) continue;
content += await this.getJSONString(event);
}
- return this.wrapJSON(this.indentEachLine(content.slice(0, -2)));
+ return this.wrapJSON(this.indentEachLine(content.slice(0, -2), 2));
}
public async export() {
@@ -91,34 +82,18 @@ ${json}
const text = await this.createOutput(res);
- console.info("Writing to the file system...");
- streamSaver.WritableStream = ponyfill.WritableStream
-
- const fileName = `matrix-export-${formatFullDateNoDay(new Date())}.json`;
- const files = this.files;
- if (files.length) {
- this.addFile("result.json", new Blob([text]));
- const fileStream = streamSaver.createWriteStream(fileName.slice(0, -5) + ".zip");
- const readableZipStream = zip({
- start(ctrl) {
- for (const file of files) ctrl.enqueue(file);
- ctrl.close();
- },
- });
- const writer = fileStream.getWriter()
- const reader = readableZipStream.getReader()
- await this.pumpToFileStream(reader, writer);
+ if (this.files.length) {
+ this.addFile("export.json", new Blob([text]));
+ await this.downloadZIP();
} else {
- const fileStream = streamSaver.createWriteStream(fileName);
- const writer = fileStream.getWriter()
- const data = new TextEncoder().encode(text);
- await writer.write(data);
- await writer.close();
+ const fileName = `matrix-export-${formatFullDateNoDay(new Date())}.json`;
+ await this.downloadPlainText(fileName, text);
}
const exportEnd = performance.now();
console.info(`Export Successful! Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
window.removeEventListener("beforeunload", this.onBeforeUnload);
+ window.removeEventListener("onunload", this.abortExport);
}
}
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 89a9ff4b98..61665d4646 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -1,35 +1,24 @@
-import streamSaver from "streamsaver";
import Exporter from "./Exporter";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { formatFullDateNoDay } from "../../DateUtils";
import { _t } from "../../languageHandler";
-import * as ponyfill from "web-streams-polyfill/ponyfill"
import { haveTileForEvent } from "../../components/views/rooms/EventTile";
import { exportTypes } from "./exportUtils";
import { exportOptions } from "./exportUtils";
import { textForEvent } from "../../TextForEvent";
-import zip from "./StreamToZip";
export default class PlainTextExporter extends Exporter {
protected totalSize: number;
protected mediaOmitText: string;
- private readonly fileDir: string;
constructor(room: Room, exportType: exportTypes, exportOptions: exportOptions) {
super(room, exportType, exportOptions);
this.totalSize = 0;
- this.fileDir = `matrix-export-${formatFullDateNoDay(new Date())}`;
this.mediaOmitText = !this.exportOptions.attachmentsIncluded
? _t("Media omitted")
: _t("Media omitted - file size limit exceeded");
- window.addEventListener("beforeunload", this.onBeforeUnload)
- }
-
- protected onBeforeUnload = (e: BeforeUnloadEvent) => {
- e.preventDefault();
- return e.returnValue = "Are you sure you want to exit during this export?";
}
protected textForReplyEvent = (ev : MatrixEvent) => {
@@ -90,12 +79,6 @@ export default class PlainTextExporter extends Exporter {
return content;
}
- protected getFileName = () => {
- if (this.exportOptions.attachmentsIncluded) {
- return `${this.room.name}.txt`;
- } else return `${this.fileDir}.txt`
- }
-
public async export() {
console.info("Starting export process...");
console.info("Fetching events...");
@@ -108,32 +91,17 @@ export default class PlainTextExporter extends Exporter {
const text = await this.createOutput(res);
- console.info("Writing to the file system...");
- streamSaver.WritableStream = ponyfill.WritableStream
-
- const files = this.files;
- if (files.length) {
- this.addFile(this.getFileName(), new Blob([text]));
- const fileStream = streamSaver.createWriteStream(`${this.fileDir}.zip`);
- const readableZipStream = zip({
- start(ctrl) {
- for (const file of files) ctrl.enqueue(file);
- ctrl.close();
- },
- });
- const writer = fileStream.getWriter()
- const reader = readableZipStream.getReader()
- await this.pumpToFileStream(reader, writer);
+ if (this.files.length) {
+ this.addFile("export.txt", new Blob([text]));
+ await this.downloadZIP();
} else {
- const fileStream = streamSaver.createWriteStream(`${this.fileDir}.txt`);
- const writer = fileStream.getWriter()
- const data = new TextEncoder().encode(text);
- await writer.write(data);
- await writer.close();
+ const fileName = `matrix-export-${formatFullDateNoDay(new Date())}.txt`;
+ await this.downloadPlainText(fileName, text);
}
const exportEnd = performance.now();
console.info(`Export Successful! Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+ window.removeEventListener("onunload", this.abortExport);
window.removeEventListener("beforeunload", this.onBeforeUnload);
}
}
diff --git a/src/utils/exportUtils/StreamToZip.ts b/src/utils/exportUtils/StreamToZip.ts
index b98e3e142f..a411d35190 100644
--- a/src/utils/exportUtils/StreamToZip.ts
+++ b/src/utils/exportUtils/StreamToZip.ts
@@ -101,7 +101,7 @@ const pump = (zipObj: ZipObj) => zipObj.reader ? zipObj.reader.read().then(chunk
}
}) : undefined;
-export default function ZIP(underlyingSource: UnderlyingSource) {
+export default function streamToZIP(underlyingSource: UnderlyingSource) {
const files = Object.create(null);
const filenames: string[] = [];
const encoder = new TextEncoder();
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index ba87dbdd67..0439d51ee2 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -6,7 +6,7 @@ import PlainTextExporter from "./PlainTextExport";
export enum exportFormats {
HTML = "HTML",
JSON = "JSON",
- LOGS = "LOGS",
+ PLAIN_TEXT = "PLAIN_TEXT",
}
export enum exportTypes {
@@ -36,7 +36,7 @@ const exportConversationalHistory = async (
case exportFormats.JSON:
await new JSONExporter(room, exportType, exportOptions).export();
break;
- case exportFormats.LOGS:
+ case exportFormats.PLAIN_TEXT:
await new PlainTextExporter(room, exportType, exportOptions).export();
break;
}
From 02f15d573ac9f98aa145706a0beaec2d6c2b3fbd Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 25 Jun 2021 11:52:26 +0530
Subject: [PATCH 078/176] Refactor
---
src/utils/exportUtils/Exporter.ts | 13 ++++++++-----
1 file changed, 8 insertions(+), 5 deletions(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 028b5c808e..2401bce0c8 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -48,15 +48,18 @@ export default abstract class Exporter {
protected async downloadZIP() {
const filename = `matrix-export-${formatFullDateNoDay(new Date())}.zip`;
- //Support for firefox browser
+
+ // Support for older browsers
streamSaver.WritableStream = ponyfill.WritableStream
- //Create a writable stream to the directory
+
+ // Create a writable stream to the directory
this.fileStream = streamSaver.createWriteStream(filename);
+ console.info("Generating a ZIP...");
+
this.writer = this.fileStream.getWriter();
const files = this.files;
- console.info("Generating a ZIP...");
const readableZipStream = streamToZIP({
start(ctrl) {
for (const file of files) ctrl.enqueue(file);
@@ -79,8 +82,8 @@ export default abstract class Exporter {
}
protected async abortExport(): Promise<void> {
- if (this.fileStream) await this.fileStream.abort();
- if (this.writer) await this.writer.abort();
+ await this.fileStream?.abort();
+ await this.writer?.abort();
}
protected async pumpToFileStream(reader: ReadableStreamDefaultReader) {
From abbe047bfdba27b8ecca2e4aa6a0c49f165464b8 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 25 Jun 2021 14:49:01 +0530
Subject: [PATCH 079/176] try catch for plain text
---
src/utils/exportUtils/Exporter.ts | 2 +-
src/utils/exportUtils/PlainTextExport.ts | 27 ++++++++++++++++--------
2 files changed, 19 insertions(+), 10 deletions(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 2401bce0c8..832d990f61 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -118,7 +118,7 @@ export default abstract class Exporter {
limit = 40;
break;
default:
- limit = Number.MAX_VALUE;
+ limit = 10**8;
}
return limit;
}
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 61665d4646..9852ea5301 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -56,16 +56,25 @@ export default class PlainTextExporter extends Exporter {
protected _textForEvent = async (mxEv: MatrixEvent) => {
const senderDisplayName = mxEv.sender && mxEv.sender.name ? mxEv.sender.name : mxEv.getSender();
- if (this.exportOptions.attachmentsIncluded && this.isAttachment(mxEv)) {
- const blob = await this.getMediaBlob(mxEv);
- this.totalSize += blob.size;
- const filePath = this.getFilePath(mxEv);
- this.addFile(filePath, blob);
- if (this.totalSize > this.exportOptions.maxSize - 1024 * 1024) {
- this.exportOptions.attachmentsIncluded = false;
- }
+ let mediaText = "";
+ if (this.isAttachment(mxEv)) {
+ if (this.exportOptions.attachmentsIncluded) {
+ try {
+ const blob = await this.getMediaBlob(mxEv);
+ this.totalSize += blob.size;
+ const filePath = this.getFilePath(mxEv);
+ mediaText = " (" + _t("File Attached") + ")";
+ this.addFile(filePath, blob);
+ if (this.totalSize > this.exportOptions.maxSize - 1024 * 1024) {
+ this.exportOptions.attachmentsIncluded = false;
+ }
+ } catch (error) {
+ mediaText = " (" + _t("Error fetching file") + ")";
+ console.log("Error fetching file" + error);
+ }
+ } else mediaText = ` (${this.mediaOmitText})`;
}
- if (this.isReply(mxEv)) return senderDisplayName + ": " + this.textForReplyEvent(mxEv);
+ if (this.isReply(mxEv)) return senderDisplayName + ": " + this.textForReplyEvent(mxEv) + mediaText;
else return textForEvent(mxEv);
}
From c885cd719fbd7a140b8f10c0ebecdae81e19d552 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 25 Jun 2021 14:58:59 +0530
Subject: [PATCH 080/176] i18n
---
src/i18n/strings/en_EN.json | 1 +
src/utils/exportUtils/PlainTextExport.ts | 2 +-
2 files changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index ca22dd04ab..d58a7e8831 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -741,6 +741,7 @@
"This is the start of export of <roomName/>. Exported by <exporterDetails/> at %(exportDate)s.": "This is the start of export of <roomName/>. Exported by <exporterDetails/> at %(exportDate)s.",
"Topic: %(topic)s": "Topic: %(topic)s",
"Error fetching file": "Error fetching file",
+ "File Attached": "File Attached",
"Help us improve %(brand)s": "Help us improve %(brand)s",
"Send <UsageDataLink>anonymous usage data</UsageDataLink> which helps us improve %(brand)s. This will use a <PolicyLink>cookie</PolicyLink>.": "Send <UsageDataLink>anonymous usage data</UsageDataLink> which helps us improve %(brand)s. This will use a <PolicyLink>cookie</PolicyLink>.",
"Yes": "Yes",
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 9852ea5301..1777abc616 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -70,7 +70,7 @@ export default class PlainTextExporter extends Exporter {
}
} catch (error) {
mediaText = " (" + _t("Error fetching file") + ")";
- console.log("Error fetching file" + error);
+ console.log("Error fetching file " + error);
}
} else mediaText = ` (${this.mediaOmitText})`;
}
From 593f14beae8ba0cb412f2b9b62c2a41eef88eff9 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 25 Jun 2021 15:01:14 +0530
Subject: [PATCH 081/176] Append media text to text for event
---
src/utils/exportUtils/PlainTextExport.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 1777abc616..4ec2e81d9d 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -75,7 +75,7 @@ export default class PlainTextExporter extends Exporter {
} else mediaText = ` (${this.mediaOmitText})`;
}
if (this.isReply(mxEv)) return senderDisplayName + ": " + this.textForReplyEvent(mxEv) + mediaText;
- else return textForEvent(mxEv);
+ else return textForEvent(mxEv) + mediaText;
}
protected async createOutput(events: MatrixEvent[]) {
From 4af8ec4d408900c1464c526819b83343df781e28 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 25 Jun 2021 15:19:17 +0530
Subject: [PATCH 082/176] Explicitly declare file extensions for stickers and
log event fetching progress
---
src/utils/exportUtils/Exporter.ts | 5 +++--
src/utils/exportUtils/HtmlExport.tsx | 2 +-
src/utils/exportUtils/JSONExport.ts | 7 ++++---
src/utils/exportUtils/PlainTextExport.ts | 2 +-
4 files changed, 9 insertions(+), 7 deletions(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 832d990f61..0834cb7dc8 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -148,7 +148,7 @@ export default abstract class Exporter {
}
events.push(mxEv);
}
-
+ console.log("Fetched " + events.length + " events so far.");
prevToken = res.end;
}
// Reverse the events so that we preserve the order
@@ -216,7 +216,8 @@ export default abstract class Exporter {
fileDirectory = event.getType() === "m.sticker" ? "stickers" : "files";
}
const fileDate = formatFullDateNoDay(new Date(event.getTs()));
- const [fileName, fileExt] = this.splitFileName(event.getContent().body);
+ let [fileName, fileExt] = this.splitFileName(event.getContent().body);
+ if (event.getType() === "m.sticker") fileExt = ".png";
return fileDirectory + "/" + fileName + '-' + fileDate + fileExt;
}
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 6415f996db..7b36439ad5 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -328,7 +328,7 @@ export default class HTMLExporter extends Exporter {
const res = await this.getRequiredEvents();
const fetchEnd = performance.now();
- console.log(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000} s`);
+ console.log(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000}s`);
console.info("Creating HTML...");
const html = await this.createHTML(res);
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index b261b305f9..4612a37481 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -77,8 +77,8 @@ ${json}
const res = await this.getRequiredEvents();
const fetchEnd = performance.now();
- console.log(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000} s`);
- console.info("Creating Output...");
+ console.log(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000}s`);
+ console.info("Creating output...");
const text = await this.createOutput(res);
@@ -91,7 +91,8 @@ ${json}
}
const exportEnd = performance.now();
- console.info(`Export Successful! Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+ console.info(`Export successful!`)
+ console.log(`Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
window.removeEventListener("beforeunload", this.onBeforeUnload);
window.removeEventListener("onunload", this.abortExport);
}
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 4ec2e81d9d..f8bb6fe34e 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -95,7 +95,7 @@ export default class PlainTextExporter extends Exporter {
const res = await this.getRequiredEvents();
const fetchEnd = performance.now();
- console.log(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000} s`);
+ console.log(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000}s`);
console.info("Creating Output...");
const text = await this.createOutput(res);
From 566e7bc8d6cb655a187c7cd6bcf89ec409d3e19e Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 25 Jun 2021 15:49:39 +0530
Subject: [PATCH 083/176] format
---
src/utils/exportUtils/HtmlExport.tsx | 9 ++++++---
src/utils/exportUtils/JSONExport.ts | 7 +++++--
src/utils/exportUtils/PlainTextExport.ts | 8 ++++++--
3 files changed, 17 insertions(+), 7 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 7b36439ad5..33d0e78915 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -324,20 +324,20 @@ export default class HTMLExporter extends Exporter {
public async export() {
console.info("Starting export process...");
console.info("Fetching events...");
+
const fetchStart = performance.now();
const res = await this.getRequiredEvents();
const fetchEnd = performance.now();
console.log(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000}s`);
- console.info("Creating HTML...");
+ console.info("Creating HTML...");
const html = await this.createHTML(res);
this.addFile("index.html", new Blob([html]));
this.addFile("css/style.css", new Blob([exportCSS]));
this.addFile("js/script.js", new Blob([exportJS]));
-
for (const iconName in exportIcons) {
this.addFile(`icons/${iconName}`, new Blob([exportIcons[iconName]]));
}
@@ -347,7 +347,10 @@ export default class HTMLExporter extends Exporter {
await this.downloadZIP();
const exportEnd = performance.now();
- console.info(`Export Successful! Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+
+ console.info("Export successful!")
+ console.log(`Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+
window.removeEventListener("beforeunload", this.onBeforeUnload);
window.removeEventListener("onunload", this.abortExport);
}
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index 4612a37481..d25d96b2e4 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -73,13 +73,14 @@ ${json}
public async export() {
console.info("Starting export process...");
console.info("Fetching events...");
+
const fetchStart = performance.now();
const res = await this.getRequiredEvents();
const fetchEnd = performance.now();
console.log(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000}s`);
- console.info("Creating output...");
+ console.info("Creating output...");
const text = await this.createOutput(res);
if (this.files.length) {
@@ -91,8 +92,10 @@ ${json}
}
const exportEnd = performance.now();
- console.info(`Export successful!`)
+
+ console.info("Export successful!")
console.log(`Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+
window.removeEventListener("beforeunload", this.onBeforeUnload);
window.removeEventListener("onunload", this.abortExport);
}
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index f8bb6fe34e..a207029955 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -91,13 +91,14 @@ export default class PlainTextExporter extends Exporter {
public async export() {
console.info("Starting export process...");
console.info("Fetching events...");
+
const fetchStart = performance.now();
const res = await this.getRequiredEvents();
const fetchEnd = performance.now();
console.log(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000}s`);
- console.info("Creating Output...");
+ console.info("Creating output...");
const text = await this.createOutput(res);
if (this.files.length) {
@@ -109,7 +110,10 @@ export default class PlainTextExporter extends Exporter {
}
const exportEnd = performance.now();
- console.info(`Export Successful! Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+
+ console.info("Export successful!")
+ console.log(`Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+
window.removeEventListener("onunload", this.abortExport);
window.removeEventListener("beforeunload", this.onBeforeUnload);
}
From 4d6ad91e5262fbf917216cc36772243c7f57a2e9 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 25 Jun 2021 22:45:14 +0530
Subject: [PATCH 084/176] Add export option to right panel
---
res/css/views/right_panel/_RoomSummaryCard.scss | 4 ++++
res/img/element-icons/export.svg | 14 ++++++++++++++
.../views/right_panel/RoomSummaryCard.tsx | 3 +++
src/i18n/strings/en_EN.json | 1 +
4 files changed, 22 insertions(+)
create mode 100644 res/img/element-icons/export.svg
diff --git a/res/css/views/right_panel/_RoomSummaryCard.scss b/res/css/views/right_panel/_RoomSummaryCard.scss
index dc7804d072..663682da2e 100644
--- a/res/css/views/right_panel/_RoomSummaryCard.scss
+++ b/res/css/views/right_panel/_RoomSummaryCard.scss
@@ -239,3 +239,7 @@ limitations under the License.
.mx_RoomSummaryCard_icon_settings::before {
mask-image: url('$(res)/img/element-icons/settings.svg');
}
+
+.mx_RoomSummaryCard_icon_export::before {
+ mask-image: url('$(res)/img/element-icons/export.svg');
+}
diff --git a/res/img/element-icons/export.svg b/res/img/element-icons/export.svg
new file mode 100644
index 0000000000..49899e9520
--- /dev/null
+++ b/res/img/element-icons/export.svg
@@ -0,0 +1,14 @@
+<svg
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+>
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47716 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM12.7071 17.7071C12.6112 17.803 12.5007 17.8753 12.3828 17.9241L11.2929 17.7071L11.2925 17.7067L7.2929 13.7071C6.90237 13.3166 6.90237 12.6834 7.2929 12.2929C7.68342 11.9024 8.31658 11.9024 8.70711 12.2929L11 14.5858L11 7C11 6.44771 11.4477 6 12 6C12.5523 6 13 6.44771 13 7L13 14.5858L15.2929 12.2929C15.6834 11.9024 16.3166 11.9024 16.7071 12.2929C17.0976 12.6834 17.0976 13.3166 16.7071 13.7071L12.7071 17.7071ZM12.3828 17.9241L11.295 17.7092C11.4758 17.8889 11.7249 18 12 18C12.1356 18 12.2649 17.973 12.3828 17.9241Z"
+ fill="#C1C6CD"
+ />
+</svg>
diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx
index 937037f644..28996305c7 100644
--- a/src/components/views/right_panel/RoomSummaryCard.tsx
+++ b/src/components/views/right_panel/RoomSummaryCard.tsx
@@ -279,6 +279,9 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
<Button className="mx_RoomSummaryCard_icon_settings" onClick={onRoomSettingsClick}>
{_t("Room settings")}
</Button>
+ <Button className="mx_RoomSummaryCard_icon_export" onClick = {() => {}}>
+ {_t("Export chat")}
+ </Button>
</Group>
{ SettingsStore.getValue(UIFeature.Widgets) && <AppsSection room={room} /> }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index d58a7e8831..189c686815 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1790,6 +1790,7 @@
"Show files": "Show files",
"Share room": "Share room",
"Room settings": "Room settings",
+ "Export chat": "Export chat",
"Trusted": "Trusted",
"Not trusted": "Not trusted",
"%(count)s verified sessions|other": "%(count)s verified sessions",
From c3dc51c4526eeb0c78b3c46bd59b4392781f74c1 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Sat, 26 Jun 2021 12:14:18 +0530
Subject: [PATCH 085/176] Create export dialog and async import export utils
---
src/components/views/dialogs/ExportDialog.tsx | 56 +++++++++++++++++++
.../views/right_panel/RoomSummaryCard.tsx | 9 ++-
src/components/views/rooms/RoomHeader.js | 21 -------
src/i18n/strings/en_EN.json | 4 +-
4 files changed, 66 insertions(+), 24 deletions(-)
create mode 100644 src/components/views/dialogs/ExportDialog.tsx
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
new file mode 100644
index 0000000000..22223848ea
--- /dev/null
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { Room } from 'matrix-js-sdk/src';
+import { _t } from '../../../languageHandler';
+import { IDialogProps } from './IDialogProps';
+import BaseDialog from "./BaseDialog"
+import DialogButtons from "../elements/DialogButtons";
+
+interface IProps extends IDialogProps{
+ room: Room;
+}
+
+export default class ExportDialog extends React.PureComponent<IProps> {
+ onExportClick = async () => {
+ const {
+ default: exportConversationalHistory,
+ exportFormats,
+ exportTypes,
+ } = await import("../../../utils/exportUtils/exportUtils");
+
+ await exportConversationalHistory(
+ this.props.room,
+ exportFormats.PLAIN_TEXT,
+ exportTypes.START_DATE,
+ {
+ startDate: parseInt(new Date("2021.05.20").getTime().toFixed(0)),
+ attachmentsIncluded: true,
+ maxSize: 7 * 1024 * 1024, // 7 MB
+ },
+ );
+ };
+
+ onCancel = () => {
+ this.props.onFinished(false);
+ };
+
+ render() {
+ return (
+ <BaseDialog
+ title={_t("Export Chat")}
+ contentId='mx_Dialog_content'
+ hasCancel={true}
+ onFinished={this.props.onFinished}
+ fixedWidth={false}
+ >
+ <div className="mx_Dialog_content" id='mx_Dialog_content'>
+ Export
+ </div>
+ <DialogButtons
+ primaryButton={_t('Export')}
+ onPrimaryButtonClick={this.onExportClick}
+ onCancel={this.onCancel}
+ />
+ </BaseDialog>
+ );
+ }
+}
diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx
index 28996305c7..0cc5bf8e7f 100644
--- a/src/components/views/right_panel/RoomSummaryCard.tsx
+++ b/src/components/views/right_panel/RoomSummaryCard.tsx
@@ -47,6 +47,7 @@ import {useRoomMemberCount} from "../../../hooks/useRoomMembers";
import { Container, MAX_PINNED, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
import RoomName from "../elements/RoomName";
import UIStore from "../../../stores/UIStore";
+import ExportDialog from "../dialogs/ExportDialog";
interface IProps {
room: Room;
@@ -233,6 +234,12 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
});
};
+ const onRoomExportClick = () => {
+ Modal.createTrackedDialog('export room dialog', '', ExportDialog, {
+ room,
+ });
+ };
+
const isRoomEncrypted = useIsEncrypted(cli, room);
const roomContext = useContext(RoomContext);
const e2eStatus = roomContext.e2eStatus;
@@ -279,7 +286,7 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
<Button className="mx_RoomSummaryCard_icon_settings" onClick={onRoomSettingsClick}>
{_t("Room settings")}
</Button>
- <Button className="mx_RoomSummaryCard_icon_export" onClick = {() => {}}>
+ <Button className="mx_RoomSummaryCard_icon_export" onClick = {onRoomExportClick}>
{_t("Export chat")}
</Button>
</Group>
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index d977b6d87b..0e1a7bc60b 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -31,7 +31,6 @@ import RoomTopic from "../elements/RoomTopic";
import RoomName from "../elements/RoomName";
import { PlaceCallType } from "../../../CallHandler";
import { replaceableComponent } from "../../../utils/replaceableComponent";
-import exportConversationalHistory, { exportTypes, exportFormats } from '../../../utils/exportUtils/exportUtils';
@replaceableComponent("views.rooms.RoomHeader")
@@ -80,20 +79,6 @@ export default class RoomHeader extends React.Component {
this.forceUpdate();
}, 500);
-
- _exportConversationalHistory = async () => {
- await exportConversationalHistory(
- this.props.room,
- exportFormats.PLAIN_TEXT,
- exportTypes.START_DATE,
- {
- startDate: parseInt(new Date("2021.05.20").getTime().toFixed(0)),
- attachmentsIncluded: true,
- maxSize: 7 * 1024 * 1024, // 7 MB
- },
- );
- }
-
render() {
let searchStatus = null;
@@ -197,14 +182,8 @@ export default class RoomHeader extends React.Component {
title={_t("Video call")} />;
}
- const exportButton = <AccessibleTooltipButton
- className="mx_RoomHeader_button mx_ImageView_button_download"
- onClick={this._exportConversationalHistory}
- title={_t("Export conversation")} />;
-
const rightRow =
<div className="mx_RoomHeader_buttons">
- { exportButton }
{ videoCallButton }
{ voiceCallButton }
{ forgetButton }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 189c686815..00212fa137 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1593,7 +1593,6 @@
"Search": "Search",
"Voice call": "Voice call",
"Video call": "Video call",
- "Export conversation": "Export conversation",
"Start a Conversation": "Start a Conversation",
"Open dial pad": "Open dial pad",
"Invites": "Invites",
@@ -2250,6 +2249,8 @@
"There was an error updating your community. The server is unable to process your request.": "There was an error updating your community. The server is unable to process your request.",
"Update community": "Update community",
"An error has occurred.": "An error has occurred.",
+ "Export Chat": "Export Chat",
+ "Export": "Export",
"Feedback sent": "Feedback sent",
"Rate %(brand)s": "Rate %(brand)s",
"Tell us below how you feel about %(brand)s so far.": "Tell us below how you feel about %(brand)s so far.",
@@ -2978,7 +2979,6 @@
"The exported file will allow anyone who can read it to decrypt any encrypted messages that you can see, so you should be careful to keep it secure. To help with this, you should enter a passphrase below, which will be used to encrypt the exported data. It will only be possible to import the data by using the same passphrase.": "The exported file will allow anyone who can read it to decrypt any encrypted messages that you can see, so you should be careful to keep it secure. To help with this, you should enter a passphrase below, which will be used to encrypt the exported data. It will only be possible to import the data by using the same passphrase.",
"Enter passphrase": "Enter passphrase",
"Confirm passphrase": "Confirm passphrase",
- "Export": "Export",
"Import room keys": "Import room keys",
"This process allows you to import encryption keys that you had previously exported from another Matrix client. You will then be able to decrypt any messages that the other client could decrypt.": "This process allows you to import encryption keys that you had previously exported from another Matrix client. You will then be able to decrypt any messages that the other client could decrypt.",
"The export file will be protected with a passphrase. You should enter the passphrase here, to decrypt the file.": "The export file will be protected with a passphrase. You should enter the passphrase here, to decrypt the file.",
From 92e34c7993b5303050676705667027e81b335a70 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Sat, 26 Jun 2021 13:04:10 +0530
Subject: [PATCH 086/176] Format dropdown
---
src/components/views/dialogs/ExportDialog.tsx | 95 +++++++++++--------
.../views/right_panel/RoomSummaryCard.tsx | 5 +-
src/i18n/strings/en_EN.json | 1 +
src/utils/exportUtils/exportUtils.ts | 20 +++-
4 files changed, 76 insertions(+), 45 deletions(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 22223848ea..7aba38c5c0 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -1,56 +1,75 @@
-import React from 'react';
-import { Room } from 'matrix-js-sdk/src';
-import { _t } from '../../../languageHandler';
-import { IDialogProps } from './IDialogProps';
-import BaseDialog from "./BaseDialog"
+import React, { useState } from "react";
+import { Room } from "matrix-js-sdk/src";
+import { _t } from "../../../languageHandler";
+import { IDialogProps } from "./IDialogProps";
+import BaseDialog from "./BaseDialog";
import DialogButtons from "../elements/DialogButtons";
+import Dropdown from "../elements/Dropdown";
+import exportConversationalHistory, {
+ exportFormats,
+ exportTypes,
+} from "../../../utils/exportUtils/exportUtils";
-interface IProps extends IDialogProps{
+interface IProps extends IDialogProps {
room: Room;
}
-export default class ExportDialog extends React.PureComponent<IProps> {
- onExportClick = async () => {
- const {
- default: exportConversationalHistory,
- exportFormats,
- exportTypes,
- } = await import("../../../utils/exportUtils/exportUtils");
-
+const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
+ const [format, setFormat] = useState("HTML");
+ const onExportClick = async () => {
await exportConversationalHistory(
- this.props.room,
+ room,
exportFormats.PLAIN_TEXT,
exportTypes.START_DATE,
{
- startDate: parseInt(new Date("2021.05.20").getTime().toFixed(0)),
+ startDate: parseInt(
+ new Date("2021.05.20").getTime().toFixed(0),
+ ),
attachmentsIncluded: true,
maxSize: 7 * 1024 * 1024, // 7 MB
},
);
};
- onCancel = () => {
- this.props.onFinished(false);
+ const onCancel = () => {
+ onFinished(false);
};
- render() {
- return (
- <BaseDialog
- title={_t("Export Chat")}
- contentId='mx_Dialog_content'
- hasCancel={true}
- onFinished={this.props.onFinished}
- fixedWidth={false}
+ const options = Object.keys(exportFormats).map(key => {
+ return <div key={key}>
+ { exportFormats[key] }
+ </div>
+ })
+
+ return (
+ <BaseDialog
+ title={_t("Export Chat")}
+ contentId="mx_Dialog_content"
+ hasCancel={true}
+ onFinished={onFinished}
+ fixedWidth={true}
+ >
+ <p>
+ {_t(
+ "Select from the options below to export chats from your timeline",
+ )}
+ </p>
+
+ <Dropdown
+ onOptionChange={(key: string) => { setFormat(key) }}
+ value={format}
+ label={_t("Export formats")}
>
- <div className="mx_Dialog_content" id='mx_Dialog_content'>
- Export
- </div>
- <DialogButtons
- primaryButton={_t('Export')}
- onPrimaryButtonClick={this.onExportClick}
- onCancel={this.onCancel}
- />
- </BaseDialog>
- );
- }
-}
+ { options }
+ </Dropdown>
+
+ <DialogButtons
+ primaryButton={_t("Export")}
+ onPrimaryButtonClick={onExportClick}
+ onCancel={onCancel}
+ />
+ </BaseDialog>
+ );
+};
+
+export default ExportDialog;
diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx
index 0cc5bf8e7f..5dd5790bfb 100644
--- a/src/components/views/right_panel/RoomSummaryCard.tsx
+++ b/src/components/views/right_panel/RoomSummaryCard.tsx
@@ -47,7 +47,6 @@ import {useRoomMemberCount} from "../../../hooks/useRoomMembers";
import { Container, MAX_PINNED, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
import RoomName from "../elements/RoomName";
import UIStore from "../../../stores/UIStore";
-import ExportDialog from "../dialogs/ExportDialog";
interface IProps {
room: Room;
@@ -234,7 +233,9 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
});
};
- const onRoomExportClick = () => {
+ const onRoomExportClick = async () => {
+ const {default: ExportDialog} = await import("../dialogs/ExportDialog");
+
Modal.createTrackedDialog('export room dialog', '', ExportDialog, {
room,
});
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 00212fa137..9ab4a77c9f 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2250,6 +2250,7 @@
"Update community": "Update community",
"An error has occurred.": "An error has occurred.",
"Export Chat": "Export Chat",
+ "Select from the options below to export chats from your timeline": "Select from the options below to export chats from your timeline",
"Export": "Export",
"Feedback sent": "Feedback sent",
"Rate %(brand)s": "Rate %(brand)s",
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 0439d51ee2..7a1d4a9f11 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -1,19 +1,29 @@
import { Room } from "matrix-js-sdk/src/models/room";
+import { _t } from "../../languageHandler";
import HTMLExporter from "./HtmlExport";
import JSONExporter from "./JSONExport";
import PlainTextExporter from "./PlainTextExport";
+_t("HTML");
+_t("JSON");
+_t("Plain Text");
+
export enum exportFormats {
HTML = "HTML",
JSON = "JSON",
- PLAIN_TEXT = "PLAIN_TEXT",
+ PLAIN_TEXT = "Plain Text",
}
+_t("Current Timeline");
+_t("From the beginning")
+_t("From a specific date")
+_t("Last n messages");
+
export enum exportTypes {
- TIMELINE = "TIMELINE",
- BEGINNING = "BEGINNING",
- START_DATE = "START_DATE",
- LAST_N_MESSAGES = "LAST_N_MESSAGES",
+ TIMELINE = "Current Timeline",
+ BEGINNING = "From the beginning",
+ START_DATE = "From a specific date",
+ LAST_N_MESSAGES = "Last n messages",
}
export interface exportOptions {
From e505646f2189965772e4f8c6b5fb7d3da7a87a66 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Sat, 26 Jun 2021 21:53:50 +0530
Subject: [PATCH 087/176] Finish dialog implementation of export settings
---
res/css/_components.scss | 1 +
res/css/views/dialogs/_ExportDialog.scss | 22 ++++
src/components/views/dialogs/ExportDialog.tsx | 107 ++++++++++++++----
src/components/views/elements/Field.tsx | 2 +-
src/i18n/strings/en_EN.json | 11 ++
src/utils/exportUtils/exportUtils.ts | 43 ++++---
6 files changed, 151 insertions(+), 35 deletions(-)
create mode 100644 res/css/views/dialogs/_ExportDialog.scss
diff --git a/res/css/_components.scss b/res/css/_components.scss
index ec3af8655e..c0fade8e5e 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -75,6 +75,7 @@
@import "./views/dialogs/_DeactivateAccountDialog.scss";
@import "./views/dialogs/_DevtoolsDialog.scss";
@import "./views/dialogs/_EditCommunityPrototypeDialog.scss";
+@import "./views/dialogs/_ExportDialog.scss";
@import "./views/dialogs/_FeedbackDialog.scss";
@import "./views/dialogs/_ForwardDialog.scss";
@import "./views/dialogs/_GroupAddressPicker.scss";
diff --git a/res/css/views/dialogs/_ExportDialog.scss b/res/css/views/dialogs/_ExportDialog.scss
new file mode 100644
index 0000000000..69b76221bb
--- /dev/null
+++ b/res/css/views/dialogs/_ExportDialog.scss
@@ -0,0 +1,22 @@
+.mx_ExportDialog_subheading {
+ font-size: $font-16px;
+ display: block;
+ font-family: $font-family;
+ font-weight: 600;
+ color: $primary-fg-color;
+ margin-top: 18px;
+ margin-bottom: 12px;
+}
+
+.mx_ExportDialog .mx_RadioButton > .mx_RadioButton_content {
+ margin-top: 5px;
+ margin-bottom: 5px;
+}
+
+.mx_ExportDialog .mx_Field {
+ width: 256px;
+}
+
+.mx_ExportDialog .mx_Field_postfix {
+ padding: 9px 10px;
+}
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 7aba38c5c0..8cefffaa9f 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -4,10 +4,14 @@ import { _t } from "../../../languageHandler";
import { IDialogProps } from "./IDialogProps";
import BaseDialog from "./BaseDialog";
import DialogButtons from "../elements/DialogButtons";
-import Dropdown from "../elements/Dropdown";
+import Field from "../elements/Field";
+import StyledRadioGroup from "../elements/StyledRadioGroup";
+import StyledCheckbox from "../elements/StyledCheckbox";
import exportConversationalHistory, {
exportFormats,
exportTypes,
+ textForFormat,
+ textForType,
} from "../../../utils/exportUtils/exportUtils";
interface IProps extends IDialogProps {
@@ -15,18 +19,21 @@ interface IProps extends IDialogProps {
}
const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
- const [format, setFormat] = useState("HTML");
+ const [exportFormat, setExportFormat] = useState("HTML");
+ const [exportType, setExportType] = useState("TIMELINE");
+ const [includeAttachments, setAttachments] = useState(false);
+ const [numberOfMessages, setNumberOfMessages] = useState<number | null>();
+ const [sizeLimit, setSizeLimit] = useState<number | null>(8);
+
const onExportClick = async () => {
await exportConversationalHistory(
room,
- exportFormats.PLAIN_TEXT,
- exportTypes.START_DATE,
+ exportFormats[exportFormat],
+ exportTypes[exportType],
{
- startDate: parseInt(
- new Date("2021.05.20").getTime().toFixed(0),
- ),
- attachmentsIncluded: true,
- maxSize: 7 * 1024 * 1024, // 7 MB
+ numberOfMessages,
+ attachmentsIncluded: includeAttachments,
+ maxSize: sizeLimit * 1024 * 1024,
},
);
};
@@ -35,15 +42,40 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
onFinished(false);
};
- const options = Object.keys(exportFormats).map(key => {
- return <div key={key}>
- { exportFormats[key] }
- </div>
- })
+ const exportFormatOptions = Object.keys(exportFormats).map((format) => ({
+ value: format,
+ label: textForFormat(format),
+ }));
+
+ const exportTypeOptions = Object.keys(exportTypes).map((type) => {
+ return (
+ <option key={type} value={type}>
+ {textForType(type)}
+ </option>
+ );
+ });
+
+ let MessageCount = null;
+ if (exportType === exportTypes.LAST_N_MESSAGES) {
+ MessageCount = (
+ <Field
+ element="input"
+ value={numberOfMessages}
+ label={_t("Number of messages")}
+ onChange={(e) => {
+ setNumberOfMessages(parseInt(e.target.value));
+ }}
+ type="number"
+ />
+ );
+ }
+
+ const sizePostFix = (<span title={_t("MB")}>{_t("MB")}</span>);
return (
<BaseDialog
title={_t("Export Chat")}
+ className="mx_ExportDialog"
contentId="mx_Dialog_content"
hasCancel={true}
onFinished={onFinished}
@@ -55,13 +87,48 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
)}
</p>
- <Dropdown
- onOptionChange={(key: string) => { setFormat(key) }}
- value={format}
- label={_t("Export formats")}
+ <span className="mx_ExportDialog_subheading">{_t("Format")}</span>
+
+ <StyledRadioGroup
+ name="feedbackRating"
+ value={exportFormat}
+ onChange={(key) => setExportFormat(key)}
+ definitions={exportFormatOptions}
+ />
+
+ <span className="mx_ExportDialog_subheading">{_t("Messages")}</span>
+
+ <Field
+ element="select"
+ value={exportType}
+ onChange={(e) => {
+ setExportType(e.target.value);
+ }}
>
- { options }
- </Dropdown>
+ {exportTypeOptions}
+ </Field>
+ { MessageCount }
+
+ <span className="mx_ExportDialog_subheading">
+ {_t("Size Limit")}
+ </span>
+
+ <Field
+ type="number"
+ autoComplete="off"
+ value={sizeLimit}
+ postfixComponent={sizePostFix}
+ onChange={(e) => setSizeLimit(e.target.value)}
+ />
+
+ <StyledCheckbox
+ checked={includeAttachments}
+ onChange={(e) =>
+ setAttachments((e.target as HTMLInputElement).checked)
+ }
+ >
+ {_t("Include Attachments")}
+ </StyledCheckbox>
<DialogButtons
primaryButton={_t("Export")}
diff --git a/src/components/views/elements/Field.tsx b/src/components/views/elements/Field.tsx
index 1373c2df0e..ca02df71a9 100644
--- a/src/components/views/elements/Field.tsx
+++ b/src/components/views/elements/Field.tsx
@@ -77,7 +77,7 @@ export interface IInputProps extends IProps, InputHTMLAttributes<HTMLInputElemen
// The element to create. Defaults to "input".
element?: "input";
// The input's value. This is a controlled component, so the value is required.
- value: string;
+ value: string | number;
}
interface ISelectProps extends IProps, SelectHTMLAttributes<HTMLSelectElement> {
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 9ab4a77c9f..cb28f2b07b 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -735,6 +735,12 @@
"Invite to %(spaceName)s": "Invite to %(spaceName)s",
"Share your public space": "Share your public space",
"Unknown App": "Unknown App",
+ "HTML": "HTML",
+ "JSON": "JSON",
+ "Plain Text": "Plain Text",
+ "From the beginning": "From the beginning",
+ "For a number of messages": "For a number of messages",
+ "Current Timeline": "Current Timeline",
"Media omitted": "Media omitted",
"Media omitted - file size limit exceeded": "Media omitted - file size limit exceeded",
"%(creatorName)s created this room.": "%(creatorName)s created this room.",
@@ -2249,8 +2255,13 @@
"There was an error updating your community. The server is unable to process your request.": "There was an error updating your community. The server is unable to process your request.",
"Update community": "Update community",
"An error has occurred.": "An error has occurred.",
+ "Number of messages": "Number of messages",
+ "MB": "MB",
"Export Chat": "Export Chat",
"Select from the options below to export chats from your timeline": "Select from the options below to export chats from your timeline",
+ "Format": "Format",
+ "Size Limit": "Size Limit",
+ "Include Attachments": "Include Attachments",
"Export": "Export",
"Feedback sent": "Feedback sent",
"Rate %(brand)s": "Rate %(brand)s",
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 7a1d4a9f11..37d0bbc524 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -4,26 +4,41 @@ import HTMLExporter from "./HtmlExport";
import JSONExporter from "./JSONExport";
import PlainTextExporter from "./PlainTextExport";
-_t("HTML");
-_t("JSON");
-_t("Plain Text");
-
export enum exportFormats {
HTML = "HTML",
JSON = "JSON",
- PLAIN_TEXT = "Plain Text",
+ PLAIN_TEXT = "PLAIN_TEXT",
}
-_t("Current Timeline");
-_t("From the beginning")
-_t("From a specific date")
-_t("Last n messages");
-
export enum exportTypes {
- TIMELINE = "Current Timeline",
- BEGINNING = "From the beginning",
- START_DATE = "From a specific date",
- LAST_N_MESSAGES = "Last n messages",
+ TIMELINE = "TIMELINE",
+ BEGINNING = "BEGINNING",
+ // START_DATE = "START_DATE",
+ LAST_N_MESSAGES = "LAST_N_MESSAGES",
+}
+
+export const textForFormat = (format: string) => {
+ switch (format) {
+ case exportFormats.HTML:
+ return _t("HTML");
+ case exportFormats.JSON:
+ return _t("JSON");
+ case exportFormats.PLAIN_TEXT:
+ return _t("Plain Text");
+ }
+}
+
+export const textForType = (type: string) => {
+ switch (type) {
+ case exportTypes.BEGINNING:
+ return _t("From the beginning");
+ case exportTypes.LAST_N_MESSAGES:
+ return _t("For a number of messages");
+ case exportTypes.TIMELINE:
+ return _t("Current Timeline");
+ // case exportTypes.START_DATE:
+ // return _t("From a specific date");
+ }
}
export interface exportOptions {
From 46f34ba4554dc59df0a360dff03c1e8a7d553eb6 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Sat, 26 Jun 2021 23:07:38 +0530
Subject: [PATCH 088/176] Add validation
---
src/components/views/dialogs/ExportDialog.tsx | 98 +++++++++++++++++--
src/i18n/strings/en_EN.json | 5 +
2 files changed, 96 insertions(+), 7 deletions(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 8cefffaa9f..c4eb031aa5 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
import { Room } from "matrix-js-sdk/src";
import { _t } from "../../../languageHandler";
import { IDialogProps } from "./IDialogProps";
@@ -13,6 +13,7 @@ import exportConversationalHistory, {
textForFormat,
textForType,
} from "../../../utils/exportUtils/exportUtils";
+import { IFieldState, IValidationResult } from "../elements/Validation";
interface IProps extends IDialogProps {
room: Room;
@@ -22,10 +23,26 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
const [exportFormat, setExportFormat] = useState("HTML");
const [exportType, setExportType] = useState("TIMELINE");
const [includeAttachments, setAttachments] = useState(false);
- const [numberOfMessages, setNumberOfMessages] = useState<number | null>();
+ const [numberOfMessages, setNumberOfMessages] = useState<number>(100);
const [sizeLimit, setSizeLimit] = useState<number | null>(8);
+ const [sizeLimitRef, messageCountRef] = [useRef<any>(), useRef<any>()];
const onExportClick = async () => {
+ const isValidSize = await sizeLimitRef.current.validate({
+ focused: false,
+ });
+ if (!isValidSize) {
+ sizeLimitRef.current.validate({ focused: true });
+ return;
+ }
+ if (exportType === exportTypes.LAST_N_MESSAGES) {
+ const isValidNumberOfMessages =
+ await messageCountRef.current.validate({ focused: false });
+ if (!isValidNumberOfMessages) {
+ messageCountRef.current.validate({ focused: true });
+ return;
+ }
+ }
await exportConversationalHistory(
room,
exportFormats[exportFormat],
@@ -38,6 +55,69 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
);
};
+ const onValidateSize = async ({
+ value,
+ }: Pick<IFieldState, "value">): Promise<IValidationResult> => {
+ const parsedSize = parseFloat(value);
+ const min = 1;
+ const max = 4000;
+
+ if (isNaN(parsedSize)) {
+ return { valid: false, feedback: _t("Size must be a number") };
+ }
+
+ if (!(min <= parsedSize && parsedSize <= max)) {
+ return {
+ valid: false,
+ feedback: _t(
+ "Size can only be between %(min)s MB and %(max)s MB",
+ { min, max },
+ ),
+ };
+ }
+
+ return {
+ valid: true,
+ feedback: _t("Enter size between %(min)s MB and %(max)s MB", {
+ min,
+ max,
+ }),
+ };
+ };
+
+ const onValidateNumberOfMessages = async ({
+ value,
+ }: Pick<IFieldState, "value">): Promise<IValidationResult> => {
+ const parsedSize = parseFloat(value);
+ const min = 1;
+ const max = 10 ** 8;
+
+ if (isNaN(parsedSize)) {
+ return {
+ valid: false,
+ feedback: _t("Number of messages must be a number"),
+ };
+ }
+
+ if (!(min <= parsedSize && parsedSize <= max)) {
+ return {
+ valid: false,
+ feedback: _t(
+ "Number of messages can only be between %(min)s and %(max)s",
+ { min, max },
+ ),
+ };
+ }
+
+ return {
+ valid: true,
+ feedback: _t("Enter a number between %(min)s and %(max)s", {
+ min,
+ max,
+ }),
+ };
+ };
+
const onCancel = () => {
onFinished(false);
};
@@ -54,23 +134,24 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
</option>
);
});
-
let MessageCount = null;
if (exportType === exportTypes.LAST_N_MESSAGES) {
MessageCount = (
<Field
element="input"
+ type="number"
value={numberOfMessages}
+ ref={messageCountRef}
+ onValidate={onValidateNumberOfMessages}
label={_t("Number of messages")}
onChange={(e) => {
setNumberOfMessages(parseInt(e.target.value));
}}
- type="number"
/>
);
}
- const sizePostFix = (<span title={_t("MB")}>{_t("MB")}</span>);
+ const sizePostFix = <span title={_t("MB")}>{_t("MB")}</span>;
return (
<BaseDialog
@@ -107,7 +188,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
>
{exportTypeOptions}
</Field>
- { MessageCount }
+ {MessageCount}
<span className="mx_ExportDialog_subheading">
{_t("Size Limit")}
@@ -116,9 +197,12 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
<Field
type="number"
autoComplete="off"
+ onValidate={onValidateSize}
+ element="input"
+ ref={sizeLimitRef}
value={sizeLimit}
postfixComponent={sizePostFix}
- onChange={(e) => setSizeLimit(e.target.value)}
+ onChange={(e) => setSizeLimit(parseInt(e.target.value))}
/>
<StyledCheckbox
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index cb28f2b07b..8af51cb580 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2255,6 +2255,11 @@
"There was an error updating your community. The server is unable to process your request.": "There was an error updating your community. The server is unable to process your request.",
"Update community": "Update community",
"An error has occurred.": "An error has occurred.",
+ "Size can only be between %(min)s MB and %(max)s MB": "Size can only be between %(min)s MB and %(max)s MB",
+ "Enter size between %(min)s MB and %(max)s MB": "Enter size between %(min)s MB and %(max)s MB",
+ "Number of messages must be a number": "Number of messages must be a number",
+ "Number of messages can only be between %(min)s and %(max)s": "Number of messages can only be between %(min)s and %(max)s",
+ "Enter a number between %(min)s and %(max)s": "Enter a number between %(min)s and %(max)s",
"Number of messages": "Number of messages",
"MB": "MB",
"Export Chat": "Export Chat",
From 55ffb318e5f9cd34435f3fe5cad053fbfbb43ce9 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Sat, 26 Jun 2021 23:08:37 +0530
Subject: [PATCH 089/176] Change format order
---
src/utils/exportUtils/exportUtils.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 37d0bbc524..132783fdcc 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -6,8 +6,8 @@ import PlainTextExporter from "./PlainTextExport";
export enum exportFormats {
HTML = "HTML",
- JSON = "JSON",
PLAIN_TEXT = "PLAIN_TEXT",
+ JSON = "JSON",
}
export enum exportTypes {
From 685441baf55053706768b5a259e6056f286a28d8 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Sat, 26 Jun 2021 23:40:35 +0530
Subject: [PATCH 090/176] Remove avatarForExport string
---
src/components/views/avatars/MemberAvatar.tsx | 3 +--
src/utils/exportUtils/HtmlExport.tsx | 21 ++++++++++++-------
2 files changed, 15 insertions(+), 9 deletions(-)
diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx
index 81b75cb450..61723efb21 100644
--- a/src/components/views/avatars/MemberAvatar.tsx
+++ b/src/components/views/avatars/MemberAvatar.tsx
@@ -67,8 +67,7 @@ export default class MemberAvatar extends React.Component<IProps, IState> {
private static getState(props: IProps): IState {
if (props.member?.name) {
let imageUrl = null;
- if (props.forExport && props.member.getMxcAvatarUrl()) imageUrl = "avatarForExport";
- else if (props.member.getMxcAvatarUrl()) {
+ if (props.member.getMxcAvatarUrl()) {
imageUrl = mediaFromMxc(props.member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(
props.width,
props.height,
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 33d0e78915..f69cb4fb7f 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -190,19 +190,26 @@ export default class HTMLExporter extends Exporter {
</html>`
}
- protected hasAvatar(event: MatrixEvent): boolean {
+ protected getAvatarURL(event: MatrixEvent): string {
const member = event.sender;
- return !!member.getMxcAvatarUrl();
+ return (
+ member.getMxcAvatarUrl() &&
+ mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(
+ 30,
+ 30,
+ "crop",
+ )
+ );
}
protected async saveAvatarIfNeeded(event: MatrixEvent) {
const member = event.sender;
- const avatarUrl = mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(30, 30, "crop");
if (!this.avatars.has(member.userId)) {
+ const avatarUrl = this.getAvatarURL(event);
this.avatars.set(member.userId, true);
const image = await fetch(avatarUrl);
const blob = await image.blob();
- this.addFile(`users/${member.userId.replace(/:/g, '-')}`, blob);
+ this.addFile(`users/${member.userId.replace(/:/g, '-')}.png`, blob);
}
}
@@ -218,7 +225,7 @@ export default class HTMLExporter extends Exporter {
}
protected async getEventTile(mxEv: MatrixEvent, continuation: boolean, filePath?: string) {
- const hasAvatar = this.hasAvatar(mxEv);
+ const hasAvatar = !!this.getAvatarURL(mxEv);
if (hasAvatar) await this.saveAvatarIfNeeded(mxEv);
const eventTile = <div className="mx_Export_EventWrapper" id={mxEv.getId()}>
@@ -251,8 +258,8 @@ export default class HTMLExporter extends Exporter {
if (filePath) eventTileMarkup = eventTileMarkup.replace(/(src=|href=)"forExport"/g, `$1"${filePath}"`);
if (hasAvatar) {
eventTileMarkup = eventTileMarkup.replace(
- /src="avatarForExport"/g,
- `src="users/${mxEv.sender.userId.replace(/:/g, "-")}"`,
+ encodeURI(this.getAvatarURL(mxEv)).replace(/&/g, '&'),
+ `users/${mxEv.sender.userId.replace(/:/g, "-")}.png`,
);
}
return eventTileMarkup;
From d46fe678b0e355148176af2414b25f1a72260ed0 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Sun, 27 Jun 2021 20:55:54 +0530
Subject: [PATCH 091/176] Handle export cancellation
---
src/components/views/dialogs/ExportDialog.tsx | 66 +++++++++++++++----
src/utils/exportUtils/Exporter.ts | 30 ++++++++-
src/utils/exportUtils/HtmlExport.tsx | 15 +++--
src/utils/exportUtils/JSONExport.ts | 12 ++--
src/utils/exportUtils/PlainTextExport.ts | 14 ++--
src/utils/exportUtils/exportUtils.ts | 24 -------
6 files changed, 107 insertions(+), 54 deletions(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index c4eb031aa5..ed567c43e1 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -7,13 +7,17 @@ import DialogButtons from "../elements/DialogButtons";
import Field from "../elements/Field";
import StyledRadioGroup from "../elements/StyledRadioGroup";
import StyledCheckbox from "../elements/StyledCheckbox";
-import exportConversationalHistory, {
+import {
exportFormats,
exportTypes,
textForFormat,
textForType,
} from "../../../utils/exportUtils/exportUtils";
import { IFieldState, IValidationResult } from "../elements/Validation";
+import HTMLExporter from "../../../utils/exportUtils/HtmlExport";
+import JSONExporter from "../../../utils/exportUtils/JSONExport";
+import PlainTextExporter from "../../../utils/exportUtils/PlainTextExport";
+import { useStateCallback } from "../../../hooks/useStateCallback";
interface IProps extends IDialogProps {
room: Room;
@@ -26,6 +30,52 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
const [numberOfMessages, setNumberOfMessages] = useState<number>(100);
const [sizeLimit, setSizeLimit] = useState<number | null>(8);
const [sizeLimitRef, messageCountRef] = [useRef<any>(), useRef<any>()];
+ const [Exporter, setExporter] = useStateCallback(
+ null,
+ async (Exporter: HTMLExporter | PlainTextExporter | JSONExporter) => {
+ await Exporter?.export();
+ },
+ );
+
+ const startExport = async () => {
+ const exportOptions = {
+ numberOfMessages,
+ attachmentsIncluded: includeAttachments,
+ maxSize: sizeLimit * 1024 * 1024,
+ };
+ switch (exportFormat) {
+ case exportFormats.HTML:
+ setExporter(
+ new HTMLExporter(
+ room,
+ exportTypes[exportType],
+ exportOptions,
+ ),
+ );
+ break;
+ case exportFormats.JSON:
+ setExporter(
+ new JSONExporter(
+ room,
+ exportTypes[exportType],
+ exportOptions,
+ ),
+ );
+ break;
+ case exportFormats.PLAIN_TEXT:
+ setExporter(
+ new PlainTextExporter(
+ room,
+ exportTypes[exportType],
+ exportOptions,
+ ),
+ );
+ break;
+ default:
+ console.error("Unknown export format");
+ return;
+ }
+ };
const onExportClick = async () => {
const isValidSize = await sizeLimitRef.current.validate({
@@ -43,16 +93,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
return;
}
}
- await exportConversationalHistory(
- room,
- exportFormats[exportFormat],
- exportTypes[exportType],
- {
- numberOfMessages,
- attachmentsIncluded: includeAttachments,
- maxSize: sizeLimit * 1024 * 1024,
- },
- );
+ await startExport();
};
const onValidateSize = async ({
@@ -118,7 +159,8 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
};
};
- const onCancel = () => {
+ const onCancel = async () => {
+ await Exporter?.cancelExport();
onFinished(false);
};
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 0834cb7dc8..de9aba0ff7 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -21,16 +21,18 @@ export default abstract class Exporter {
protected client: MatrixClient;
protected writer: WritableStreamDefaultWriter<any>;
protected fileStream: WritableStream<any>;
+ protected cancelled: boolean;
protected constructor(
protected room: Room,
protected exportType: exportTypes,
protected exportOptions?: exportOptions,
) {
+ this.cancelled = false;
this.files = [];
this.client = MatrixClientPeg.get();
window.addEventListener("beforeunload", this.onBeforeUnload);
- window.addEventListener("onunload", this.abortExport);
+ window.addEventListener("onunload", this.abortWriter);
}
protected onBeforeUnload(e: BeforeUnloadEvent) {
@@ -55,7 +57,8 @@ export default abstract class Exporter {
// Create a writable stream to the directory
this.fileStream = streamSaver.createWriteStream(filename);
- console.info("Generating a ZIP...");
+ if (!this.cancelled) console.info("Generating a ZIP...");
+ else return this.cleanUp();
this.writer = this.fileStream.getWriter();
const files = this.files;
@@ -67,21 +70,37 @@ export default abstract class Exporter {
},
});
+ if (this.cancelled) return this.cleanUp();
+
console.info("Writing to the file system...")
const reader = readableZipStream.getReader()
await this.pumpToFileStream(reader);
}
+ protected cleanUp() {
+ console.log("Cleaning up...");
+ window.removeEventListener("beforeunload", this.onBeforeUnload);
+ window.removeEventListener("onunload", this.abortWriter);
+ return "";
+ }
+
+ public async cancelExport() {
+ console.log("Cancelling export...");
+ this.cancelled = true;
+ await this.abortWriter();
+ }
+
protected async downloadPlainText(fileName: string, text: string): Promise<any> {
this.fileStream = streamSaver.createWriteStream(fileName);
this.writer = this.fileStream.getWriter()
const data = new TextEncoder().encode(text);
+ if (this.cancelled) return this.cleanUp();
await this.writer.write(data);
await this.writer.close();
}
- protected async abortExport(): Promise<void> {
+ protected async abortWriter(): Promise<void> {
await this.fileStream?.abort();
await this.writer?.abort();
}
@@ -134,6 +153,11 @@ export default abstract class Exporter {
const eventsPerCrawl = Math.min(limit, 1000);
const res: any = await this.client.createMessagesRequest(this.room.roomId, prevToken, eventsPerCrawl, "b");
+ if (this.cancelled) {
+ this.cleanUp();
+ return [];
+ }
+
if (res.chunk.length === 0) break;
limit -= res.chunk.length;
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index f69cb4fb7f..a62f926097 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -314,7 +314,7 @@ export default class HTMLExporter extends Exporter {
let prevEvent = null;
for (let i = 0; i < events.length; i++) {
const event = events[i];
- console.log("Processing event " + i + " out of " + events.length);
+ if (this.cancelled) return this.cleanUp();
if (!haveTileForEvent(event)) continue;
content += this._wantsDateSeparator(event, prevEvent) ? this.getDateSeparator(event) : "";
@@ -349,17 +349,18 @@ export default class HTMLExporter extends Exporter {
this.addFile(`icons/${iconName}`, new Blob([exportIcons[iconName]]));
}
- console.info("HTML creation successful!");
-
await this.downloadZIP();
const exportEnd = performance.now();
- console.info("Export successful!")
- console.log(`Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+ if (this.cancelled) {
+ console.info("Export cancelled successfully");
+ } else {
+ console.info("Export successful!")
+ console.log(`Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+ }
- window.removeEventListener("beforeunload", this.onBeforeUnload);
- window.removeEventListener("onunload", this.abortExport);
+ this.cleanUp();
}
}
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index d25d96b2e4..cbdc78a711 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -64,6 +64,7 @@ ${json}
protected async createOutput(events: MatrixEvent[]) {
let content = "";
for (const event of events) {
+ if (this.cancelled) return this.cleanUp();
if (!haveTileForEvent(event)) continue;
content += await this.getJSONString(event);
}
@@ -93,11 +94,14 @@ ${json}
const exportEnd = performance.now();
- console.info("Export successful!")
- console.log(`Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+ if (this.cancelled) {
+ console.info("Export cancelled successfully");
+ } else {
+ console.info("Export successful!")
+ console.log(`Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+ }
- window.removeEventListener("beforeunload", this.onBeforeUnload);
- window.removeEventListener("onunload", this.abortExport);
+ this.cleanUp()
}
}
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index a207029955..dff4399b95 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -81,6 +81,7 @@ export default class PlainTextExporter extends Exporter {
protected async createOutput(events: MatrixEvent[]) {
let content = "";
for (const event of events) {
+ if (this.cancelled) return this.cleanUp();
if (!haveTileForEvent(event)) continue;
const textForEvent = await this._textForEvent(event);
content += textForEvent && `${new Date(event.getTs()).toLocaleString()} - ${textForEvent}\n`;
@@ -101,6 +102,8 @@ export default class PlainTextExporter extends Exporter {
console.info("Creating output...");
const text = await this.createOutput(res);
+ if (this.cancelled) return this.cleanUp();
+
if (this.files.length) {
this.addFile("export.txt", new Blob([text]));
await this.downloadZIP();
@@ -111,11 +114,14 @@ export default class PlainTextExporter extends Exporter {
const exportEnd = performance.now();
- console.info("Export successful!")
- console.log(`Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+ if (this.cancelled) {
+ console.info("Export cancelled successfully");
+ } else {
+ console.info("Export successful!")
+ console.log(`Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+ }
- window.removeEventListener("onunload", this.abortExport);
- window.removeEventListener("beforeunload", this.onBeforeUnload);
+ this.cleanUp();
}
}
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 132783fdcc..2baff69b36 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -1,8 +1,4 @@
-import { Room } from "matrix-js-sdk/src/models/room";
import { _t } from "../../languageHandler";
-import HTMLExporter from "./HtmlExport";
-import JSONExporter from "./JSONExport";
-import PlainTextExporter from "./PlainTextExport";
export enum exportFormats {
HTML = "HTML",
@@ -48,23 +44,3 @@ export interface exportOptions {
maxSize: number;
}
-const exportConversationalHistory = async (
- room: Room,
- format: string,
- exportType: exportTypes,
- exportOptions?: exportOptions,
-) => {
- switch (format) {
- case exportFormats.HTML:
- await new HTMLExporter(room, exportType, exportOptions).export();
- break;
- case exportFormats.JSON:
- await new JSONExporter(room, exportType, exportOptions).export();
- break;
- case exportFormats.PLAIN_TEXT:
- await new PlainTextExporter(room, exportType, exportOptions).export();
- break;
- }
-};
-
-export default exportConversationalHistory;
From d8f763664b2aea8f30f9bca46d6193927c90b687 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Sun, 27 Jun 2021 22:18:43 +0530
Subject: [PATCH 092/176] Add warning modal during export
---
src/components/views/dialogs/ExportDialog.tsx | 54 +++++++++++++++++--
src/i18n/strings/en_EN.json | 2 +
2 files changed, 52 insertions(+), 4 deletions(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index ed567c43e1..ec1e8d4cd9 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -18,6 +18,8 @@ import HTMLExporter from "../../../utils/exportUtils/HtmlExport";
import JSONExporter from "../../../utils/exportUtils/JSONExport";
import PlainTextExporter from "../../../utils/exportUtils/PlainTextExport";
import { useStateCallback } from "../../../hooks/useStateCallback";
+import Modal from "../../../Modal";
+import QuestionDialog from "./QuestionDialog";
interface IProps extends IDialogProps {
room: Room;
@@ -27,13 +29,14 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
const [exportFormat, setExportFormat] = useState("HTML");
const [exportType, setExportType] = useState("TIMELINE");
const [includeAttachments, setAttachments] = useState(false);
+ const [isExporting, setExporting] = useState(false);
const [numberOfMessages, setNumberOfMessages] = useState<number>(100);
const [sizeLimit, setSizeLimit] = useState<number | null>(8);
const [sizeLimitRef, messageCountRef] = [useRef<any>(), useRef<any>()];
const [Exporter, setExporter] = useStateCallback(
null,
async (Exporter: HTMLExporter | PlainTextExporter | JSONExporter) => {
- await Exporter?.export();
+ await Exporter?.export().then(() => setExporting(false));
},
);
@@ -93,6 +96,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
return;
}
}
+ setExporting(true);
await startExport();
};
@@ -160,8 +164,31 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
};
const onCancel = async () => {
- await Exporter?.cancelExport();
- onFinished(false);
+ if (isExporting) {
+ const { finished } = Modal.createTrackedDialog(
+ "Warning",
+ "",
+ QuestionDialog,
+ {
+ title: _t("Warning"),
+ description: (
+ <div>
+ <p>
+ {_t(`Are you sure you want to stop exporting your data?
+ If you do, you'll need to start over.`)}
+ </p>
+ </div>
+ ),
+ danger: true,
+ button: _t("Yes"),
+ },
+ );
+ const [proceed] = await finished;
+ if (!proceed) return;
+ await Exporter?.cancelExport();
+ setExporting(false);
+ setExporter(null);
+ } else onFinished(false);
};
const exportFormatOptions = Object.keys(exportFormats).map((format) => ({
@@ -195,7 +222,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
const sizePostFix = <span title={_t("MB")}>{_t("MB")}</span>;
- return (
+ const ExportSettings = (
<BaseDialog
title={_t("Export Chat")}
className="mx_ExportDialog"
@@ -259,10 +286,29 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
<DialogButtons
primaryButton={_t("Export")}
onPrimaryButtonClick={onExportClick}
+ onCancel={() => onFinished(false)}
+ />
+ </BaseDialog>
+ );
+
+ const ExportProgress = (
+ <BaseDialog
+ title={_t("Exporting you data...")}
+ className="mx_ExportDialog"
+ contentId="mx_Dialog_content"
+ onFinished={onFinished}
+ fixedWidth={true}
+ >
+ <DialogButtons
+ primaryButton={_t("Cancel")}
+ primaryButtonClass="danger"
+ hasCancel={false}
onCancel={onCancel}
/>
</BaseDialog>
);
+
+ return isExporting ? ExportProgress : ExportSettings;
};
export default ExportDialog;
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 5e443b1474..4d8b9806ab 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2259,6 +2259,7 @@
"Number of messages must be a number": "Number of messages must be a number",
"Number of messages can only be between %(min)s and %(max)s": "Number of messages can only be between %(min)s and %(max)s",
"Enter a number between %(min)s and %(max)s": "Enter a number between %(min)s and %(max)s",
+ "Are you sure you want to stop exporting your data? \n If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? \n If you do, you'll need to start over.",
"Number of messages": "Number of messages",
"MB": "MB",
"Export Chat": "Export Chat",
@@ -2267,6 +2268,7 @@
"Size Limit": "Size Limit",
"Include Attachments": "Include Attachments",
"Export": "Export",
+ "Exporting you data...": "Exporting you data...",
"Feedback sent": "Feedback sent",
"Rate %(brand)s": "Rate %(brand)s",
"Tell us below how you feel about %(brand)s so far.": "Tell us below how you feel about %(brand)s so far.",
From efd8bf3a0fec30ed95d05830c1256e322701ba8a Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 28 Jun 2021 11:00:34 +0530
Subject: [PATCH 093/176] Delint
---
src/utils/exportUtils/PlainTextExport.ts | 2 --
1 file changed, 2 deletions(-)
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index dff4399b95..d6d686a841 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -102,8 +102,6 @@ export default class PlainTextExporter extends Exporter {
console.info("Creating output...");
const text = await this.createOutput(res);
- if (this.cancelled) return this.cleanUp();
-
if (this.files.length) {
this.addFile("export.txt", new Blob([text]));
await this.downloadZIP();
From 64b683a0df6639f0013ce79f5bee53db78f0206d Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 28 Jun 2021 12:20:41 +0530
Subject: [PATCH 094/176] Add cancel warning and progress completion modals
---
src/components/views/dialogs/ExportDialog.tsx | 122 +++++++++++++-----
src/i18n/strings/en_EN.json | 10 +-
2 files changed, 97 insertions(+), 35 deletions(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index ec1e8d4cd9..e5454b1c18 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -18,25 +18,28 @@ import HTMLExporter from "../../../utils/exportUtils/HtmlExport";
import JSONExporter from "../../../utils/exportUtils/JSONExport";
import PlainTextExporter from "../../../utils/exportUtils/PlainTextExport";
import { useStateCallback } from "../../../hooks/useStateCallback";
-import Modal from "../../../Modal";
-import QuestionDialog from "./QuestionDialog";
interface IProps extends IDialogProps {
room: Room;
}
const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
- const [exportFormat, setExportFormat] = useState("HTML");
- const [exportType, setExportType] = useState("TIMELINE");
+ const [exportFormat, setExportFormat] = useState(exportFormats.HTML);
+ const [exportType, setExportType] = useState(exportTypes.TIMELINE);
const [includeAttachments, setAttachments] = useState(false);
const [isExporting, setExporting] = useState(false);
const [numberOfMessages, setNumberOfMessages] = useState<number>(100);
const [sizeLimit, setSizeLimit] = useState<number | null>(8);
const [sizeLimitRef, messageCountRef] = [useRef<any>(), useRef<any>()];
+ const [displayCancel, setCancelWarning] = useState(false);
+ const [exportCancelled, setExportCancelled] = useState(false);
+ const [exportSuccessful, setExportSuccessful] = useState(false);
const [Exporter, setExporter] = useStateCallback(
null,
async (Exporter: HTMLExporter | PlainTextExporter | JSONExporter) => {
- await Exporter?.export().then(() => setExporting(false));
+ await Exporter?.export().then(() => {
+ if (!exportCancelled) setExportSuccessful(true);
+ });
},
);
@@ -164,31 +167,16 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
};
const onCancel = async () => {
- if (isExporting) {
- const { finished } = Modal.createTrackedDialog(
- "Warning",
- "",
- QuestionDialog,
- {
- title: _t("Warning"),
- description: (
- <div>
- <p>
- {_t(`Are you sure you want to stop exporting your data?
- If you do, you'll need to start over.`)}
- </p>
- </div>
- ),
- danger: true,
- button: _t("Yes"),
- },
- );
- const [proceed] = await finished;
- if (!proceed) return;
- await Exporter?.cancelExport();
+ if (isExporting) setCancelWarning(true);
+ else onFinished(false);
+ };
+
+ const confirmCanel = async () => {
+ await Exporter?.cancelExport().then(() => {
+ setExportCancelled(true);
setExporting(false);
setExporter(null);
- } else onFinished(false);
+ });
};
const exportFormatOptions = Object.keys(exportFormats).map((format) => ({
@@ -222,6 +210,31 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
const sizePostFix = <span title={_t("MB")}>{_t("MB")}</span>;
+ const ExportCancelWarning = (
+ <BaseDialog
+ title={_t("Warning")}
+ className="mx_ExportDialog"
+ contentId="mx_Dialog_content"
+ onFinished={onFinished}
+ fixedWidth={true}
+ >
+ <p>
+ {" "}
+ {_t(
+ "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
+ )}{" "}
+ </p>
+ <DialogButtons
+ primaryButton={_t("Abort export process")}
+ primaryButtonClass="danger"
+ hasCancel={true}
+ cancelButton={_t("Continue")}
+ onCancel={() => setCancelWarning(false)}
+ onPrimaryButtonClick={confirmCanel}
+ />
+ </BaseDialog>
+ );
+
const ExportSettings = (
<BaseDialog
title={_t("Export Chat")}
@@ -242,7 +255,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
<StyledRadioGroup
name="feedbackRating"
value={exportFormat}
- onChange={(key) => setExportFormat(key)}
+ onChange={(key) => setExportFormat(exportFormats[key])}
definitions={exportFormatOptions}
/>
@@ -252,7 +265,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
element="select"
value={exportType}
onChange={(e) => {
- setExportType(e.target.value);
+ setExportType(exportTypes[e.target.value]);
}}
>
{exportTypeOptions}
@@ -291,9 +304,45 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
</BaseDialog>
);
+ const ExportSuccessful = (
+ <BaseDialog
+ title={_t("Export Successful")}
+ className="mx_ExportDialog"
+ contentId="mx_Dialog_content"
+ onFinished={onFinished}
+ fixedWidth={true}
+ >
+ <p> {_t("Your messages were successfully exported")} </p>
+
+ <DialogButtons
+ primaryButton={_t("Okay")}
+ hasCancel={false}
+ onPrimaryButtonClick={onFinished}
+ />
+ </BaseDialog>
+ );
+
+ const ExportCancelSuccess = (
+ <BaseDialog
+ title={_t("Export Cancelled")}
+ className="mx_ExportDialog"
+ contentId="mx_Dialog_content"
+ onFinished={onFinished}
+ fixedWidth={true}
+ >
+ <p> {_t("The export was cancelled successfully")} </p>
+
+ <DialogButtons
+ primaryButton={_t("Okay")}
+ hasCancel={false}
+ onPrimaryButtonClick={onFinished}
+ />
+ </BaseDialog>
+ );
+
const ExportProgress = (
<BaseDialog
- title={_t("Exporting you data...")}
+ title={_t("Exporting your data...")}
className="mx_ExportDialog"
contentId="mx_Dialog_content"
onFinished={onFinished}
@@ -303,12 +352,19 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
primaryButton={_t("Cancel")}
primaryButtonClass="danger"
hasCancel={false}
- onCancel={onCancel}
+ onPrimaryButtonClick={onCancel}
/>
</BaseDialog>
);
- return isExporting ? ExportProgress : ExportSettings;
+ let componentToDisplay: JSX.Element;
+ if (exportCancelled) componentToDisplay = ExportCancelSuccess;
+ else if (exportSuccessful) componentToDisplay = ExportSuccessful;
+ else if (!isExporting) componentToDisplay = ExportSettings;
+ else if (displayCancel) componentToDisplay = ExportCancelWarning;
+ else componentToDisplay = ExportProgress;
+
+ return componentToDisplay;
};
export default ExportDialog;
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 4d8b9806ab..7489846008 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2259,16 +2259,22 @@
"Number of messages must be a number": "Number of messages must be a number",
"Number of messages can only be between %(min)s and %(max)s": "Number of messages can only be between %(min)s and %(max)s",
"Enter a number between %(min)s and %(max)s": "Enter a number between %(min)s and %(max)s",
- "Are you sure you want to stop exporting your data? \n If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? \n If you do, you'll need to start over.",
"Number of messages": "Number of messages",
"MB": "MB",
+ "Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
+ "Abort export process": "Abort export process",
"Export Chat": "Export Chat",
"Select from the options below to export chats from your timeline": "Select from the options below to export chats from your timeline",
"Format": "Format",
"Size Limit": "Size Limit",
"Include Attachments": "Include Attachments",
"Export": "Export",
- "Exporting you data...": "Exporting you data...",
+ "Export Successful": "Export Successful",
+ "Your messages were successfully exported": "Your messages were successfully exported",
+ "Okay": "Okay",
+ "Export Cancelled": "Export Cancelled",
+ "The export was cancelled successfully": "The export was cancelled successfully",
+ "Exporting your data...": "Exporting your data...",
"Feedback sent": "Feedback sent",
"Rate %(brand)s": "Rate %(brand)s",
"Tell us below how you feel about %(brand)s so far.": "Tell us below how you feel about %(brand)s so far.",
From 00ee3efbff4f597b2996faca822c9ba35a41a813 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 28 Jun 2021 12:39:05 +0530
Subject: [PATCH 095/176] Wrap avatar fetch in try catch
---
src/utils/exportUtils/HtmlExport.tsx | 26 +++++++++++++++++---------
1 file changed, 17 insertions(+), 9 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index a62f926097..7ece487cf7 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -42,10 +42,14 @@ export default class HTMLExporter extends Exporter {
const avatarUrl = Avatar.avatarUrlForRoom(this.room, 32, 32, "crop");
const avatarPath = "room.png";
if (avatarUrl) {
- const image = await fetch(avatarUrl);
- blob = await image.blob();
- this.totalSize += blob.size;
- this.addFile(avatarPath, blob);
+ try {
+ const image = await fetch(avatarUrl);
+ blob = await image.blob();
+ this.totalSize += blob.size;
+ this.addFile(avatarPath, blob);
+ } catch (err) {
+ console.log("Failed to fetch room's avatar" + err);
+ }
}
const avatar = (
<BaseAvatar
@@ -205,11 +209,15 @@ export default class HTMLExporter extends Exporter {
protected async saveAvatarIfNeeded(event: MatrixEvent) {
const member = event.sender;
if (!this.avatars.has(member.userId)) {
- const avatarUrl = this.getAvatarURL(event);
- this.avatars.set(member.userId, true);
- const image = await fetch(avatarUrl);
- const blob = await image.blob();
- this.addFile(`users/${member.userId.replace(/:/g, '-')}.png`, blob);
+ try {
+ const avatarUrl = this.getAvatarURL(event);
+ this.avatars.set(member.userId, true);
+ const image = await fetch(avatarUrl);
+ const blob = await image.blob();
+ this.addFile(`users/${member.userId.replace(/:/g, '-')}.png`, blob);
+ } catch (err) {
+ console.log("Failed to fetch user's avatar" + err);
+ }
}
}
From fc8100131631ddf0597b4d1128fa81817d3f006f Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 28 Jun 2021 13:23:50 +0530
Subject: [PATCH 096/176] Hide alt text if the image isn't present (for
unavailable avatars)
---
src/utils/exportUtils/exportCSS.ts | 9 +++++++--
1 file changed, 7 insertions(+), 2 deletions(-)
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index cbba088361..0a3ccfb935 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -19465,7 +19465,7 @@ a.mx_RoomPreviewBar_inviter {
transform: scaleX(-1);
}
`
-const snackbarCSS = `
+const customCSS = `
#snackbar {
display: flex;
visibility: hidden;
@@ -19562,8 +19562,13 @@ a.mx_reply_anchor:hover{
left: 0;
}
+img {
+ white-space: nowrap;
+ overflow: hidden;
+}
+
`
const markdownCSS = `.markdown-body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;overflow:hidden;font-family:'Helvetica Neue',Helvetica,'Segoe UI',Arial,freesans,sans-serif;font-size:16px;line-height:1.6;word-wrap:break-word}.markdown-body *{-moz-box-sizing:border-box;box-sizing:border-box}.markdown-body>:first-child{margin-top:0!important}.markdown-body>:last-child{margin-bottom:0!important}.markdown-body a{background:0 0;color:#4183c4;text-decoration:none}.markdown-body a:active,.markdown-body a:hover{outline:0}.markdown-body a:active,.markdown-body a:focus,.markdown-body a:hover{text-decoration:underline}.markdown-body strong{font-weight:700}.markdown-body em{font-style:italic}.markdown-body blockquote,.markdown-body dl,.markdown-body ol,.markdown-body p,.markdown-body pre,.markdown-body table,.markdown-body ul{margin-top:0;margin-bottom:16px}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{font-family:'Helvetica Neue',Helvetica,'Segoe UI',Arial,freesans,sans-serif;position:relative;margin-top:1em;margin-bottom:16px;font-weight:700;line-height:1.4}.markdown-body h1,.markdown-body h2{padding-bottom:.3em;border-bottom:1px solid #eee}.markdown-body h1{font-size:2.25em;line-height:1.2}.markdown-body h2{font-size:1.75em;line-height:1.225}.markdown-body h3{font-size:1.5em}.markdown-body h4{font-size:1.25em}.markdown-body h5{font-size:1em}.markdown-body h6{font-size:1em;color:#777}.markdown-body code,.markdown-body kbd,.markdown-body pre{font-family:Consolas,'Liberation Mono',Menlo,Courier,monospace}.markdown-body code{padding:.2em 0;margin:0;font-size:85%;background-color:rgba(0,0,0,.04);border-radius:3px}.markdown-body code:after,.markdown-body code:before{letter-spacing:-.2em;content:'\\00a0'}.markdown-body pre{word-wrap:normal;padding:16px;overflow:auto;font-size:85%;line-height:1.45;background-color:#f7f7f7;border-radius:3px}.markdown-body pre code{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background:0 0}.markdown-body pre code:after,.markdown-body pre code:before{content:normal}.markdown-body pre>code{font-size:1em;word-break:normal;white-space:pre;border:0}.markdown-body kbd{background-color:#e7e7e7;background-image:-webkit-linear-gradient(#fefefe,#e7e7e7);background-image:linear-gradient(#fefefe,#e7e7e7);background-repeat:repeat-x;display:inline-block;padding:5px 5px 1px;margin:0 1px;font-size:11px;line-height:10px;color:#000;border:1px solid #cfcfcf;border-radius:2px;box-shadow:0 1px 0 #ccc}.markdown-body hr:after,.markdown-body hr:before{display:table;content:''}.markdown-body input{color:inherit;font:inherit;margin:0;font-size:13px;line-height:1.4;font-family:Helvetica,Arial,freesans,clean,sans-serif,'Segoe UI Emoji','Segoe UI Symbol'}.markdown-body input[disabled]{cursor:default}.markdown-body input[type=checkbox]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0}.markdown-body blockquote{margin:0 0 16px;padding:0 15px;color:#777;border-left:4px solid #ddd}.markdown-body blockquote>:first-child{margin-top:0}.markdown-body blockquote>:last-child{margin-bottom:0}.markdown-body img{border:0;max-width:100%;-moz-box-sizing:border-box;box-sizing:border-box}.markdown-body hr{-moz-box-sizing:content-box;box-sizing:content-box;overflow:hidden;background:#e7e7e7;height:4px;padding:0;margin:16px 0;border:0}.markdown-body hr:after{clear:both}.markdown-body td,.markdown-body th{padding:0}.markdown-body table{border-collapse:collapse;border-spacing:0;display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}.markdown-body table td,.markdown-body table th{padding:6px 13px;border:1px solid #ddd}.markdown-body table th{font-weight:700}.markdown-body table tr{background-color:#fff;border-top:1px solid #ccc}.markdown-body table tr:nth-child(2n){background-color:#f8f8f8}.markdown-body ol,.markdown-body ul{padding:0 0 0 2em}.markdown-body ol ol,.markdown-body ul ol{list-style-type:lower-roman}.markdown-body ol ol,.markdown-body ol ul,.markdown-body ul ol,.markdown-body ul ul{margin-top:0;margin-bottom:0}.markdown-body ol ol ol,.markdown-body ol ul ol,.markdown-body ul ol ol,.markdown-body ul ul ol{list-style-type:lower-alpha}.markdown-body li>p{margin-top:16px}.markdown-body dd{margin-left:0}.markdown-body dl{padding:0}.markdown-body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:700}.markdown-body dl dd{padding:0 16px;margin-bottom:16px}`
-export default lightCSS + markdownCSS + snackbarCSS;
+export default lightCSS + markdownCSS + customCSS;
From f0d0b77b8cd7c289a68457996a8cbfc706f49dc4 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 10:13:14 +0530
Subject: [PATCH 097/176] Update src/TextForEvent.tsx
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/TextForEvent.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/TextForEvent.tsx b/src/TextForEvent.tsx
index b1f3ebaef8..ac09060e22 100644
--- a/src/TextForEvent.tsx
+++ b/src/TextForEvent.tsx
@@ -137,7 +137,7 @@ function textForTopicEvent(ev): () => string | null {
function textForRoomAvatarEvent(ev: MatrixEvent): () => string | null {
const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
- return () => _t('%(senderDisplayName)s changed the room avatar.', {senderDisplayName});
+ return () => _t('%(senderDisplayName)s changed the room avatar.', { senderDisplayName });
}
function textForRoomNameEvent(ev): () => string | null {
From 4ddbe76fbde3084577dbad5eb976e7606c39eaa9 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 10:13:38 +0530
Subject: [PATCH 098/176] Update src/components/views/dialogs/ExportDialog.tsx
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/components/views/dialogs/ExportDialog.tsx | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index e5454b1c18..4556eed3bb 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -30,7 +30,8 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
const [isExporting, setExporting] = useState(false);
const [numberOfMessages, setNumberOfMessages] = useState<number>(100);
const [sizeLimit, setSizeLimit] = useState<number | null>(8);
- const [sizeLimitRef, messageCountRef] = [useRef<any>(), useRef<any>()];
+ const sizeLimitRef = useRef<Field>();
+ const messageCountRef = useRef<Field>();
const [displayCancel, setCancelWarning] = useState(false);
const [exportCancelled, setExportCancelled] = useState(false);
const [exportSuccessful, setExportSuccessful] = useState(false);
From e6cb0666efae673657c496719e47900fcd85a57d Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 10:13:51 +0530
Subject: [PATCH 099/176] Update src/utils/exportUtils/exportUtils.ts
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/utils/exportUtils/exportUtils.ts | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 2baff69b36..07da0ee7af 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -13,7 +13,7 @@ export enum exportTypes {
LAST_N_MESSAGES = "LAST_N_MESSAGES",
}
-export const textForFormat = (format: string) => {
+export const textForFormat = (format: string): string => {
switch (format) {
case exportFormats.HTML:
return _t("HTML");
@@ -43,4 +43,3 @@ export interface exportOptions {
attachmentsIncluded: boolean;
maxSize: number;
}
-
From efccf19e9ef9af88872acc71b7659e018bb2294c Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 10:14:00 +0530
Subject: [PATCH 100/176] Update src/utils/exportUtils/exportUtils.ts
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/utils/exportUtils/exportUtils.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 07da0ee7af..7587ca4524 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -24,7 +24,7 @@ export const textForFormat = (format: string): string => {
}
}
-export const textForType = (type: string) => {
+export const textForType = (type: string): string => {
switch (type) {
case exportTypes.BEGINNING:
return _t("From the beginning");
From 7b683a1f6406545e54e9c74d63979041d48b5b83 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 10:14:24 +0530
Subject: [PATCH 101/176] Update src/components/views/dialogs/ExportDialog.tsx
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/components/views/dialogs/ExportDialog.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 4556eed3bb..60cd06a483 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -35,7 +35,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
const [displayCancel, setCancelWarning] = useState(false);
const [exportCancelled, setExportCancelled] = useState(false);
const [exportSuccessful, setExportSuccessful] = useState(false);
- const [Exporter, setExporter] = useStateCallback(
+ const [Exporter, setExporter] = useStateCallback<Exporter>(
null,
async (Exporter: HTMLExporter | PlainTextExporter | JSONExporter) => {
await Exporter?.export().then(() => {
From 1014e9ea48c4779e9b92ec9e2e0b3f4c83be4c32 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 10:14:56 +0530
Subject: [PATCH 102/176] Update src/components/views/dialogs/ExportDialog.tsx
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/components/views/dialogs/ExportDialog.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 60cd06a483..844c7eae5a 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -269,7 +269,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
setExportType(exportTypes[e.target.value]);
}}
>
- {exportTypeOptions}
+ { exportTypeOptions }
</Field>
{MessageCount}
From 7a5aea14418d716ee35594e487979b33e0203961 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 10:15:20 +0530
Subject: [PATCH 103/176] Update src/components/views/dialogs/ExportDialog.tsx
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/components/views/dialogs/ExportDialog.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 844c7eae5a..6189bb00c8 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -271,7 +271,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
>
{ exportTypeOptions }
</Field>
- {MessageCount}
+ { MessageCount }
<span className="mx_ExportDialog_subheading">
{_t("Size Limit")}
From b626a3d5cb9c50d1b50cffedc007469976a11eaf Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 10:15:46 +0530
Subject: [PATCH 104/176] Update src/components/views/dialogs/ExportDialog.tsx
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/components/views/dialogs/ExportDialog.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 6189bb00c8..b7dcf57d4a 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -260,7 +260,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
definitions={exportFormatOptions}
/>
- <span className="mx_ExportDialog_subheading">{_t("Messages")}</span>
+ <span className="mx_ExportDialog_subheading">{ _t("Messages") }</span>
<Field
element="select"
From 7bbfaed5005a156cb3bb1eac04918b54f42409fc Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 10:16:08 +0530
Subject: [PATCH 105/176] Update src/components/views/dialogs/ExportDialog.tsx
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/components/views/dialogs/ExportDialog.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index b7dcf57d4a..bfa719e247 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -251,7 +251,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
)}
</p>
- <span className="mx_ExportDialog_subheading">{_t("Format")}</span>
+ <span className="mx_ExportDialog_subheading">{ _t("Format") }</span>
<StyledRadioGroup
name="feedbackRating"
From a92ddb3f27527abb4449d4f68f58241f6c6fe174 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 10:16:32 +0530
Subject: [PATCH 106/176] Update src/components/views/dialogs/ExportDialog.tsx
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/components/views/dialogs/ExportDialog.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index bfa719e247..6c95ac809e 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -313,7 +313,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
onFinished={onFinished}
fixedWidth={true}
>
- <p> {_t("Your messages were successfully exported")} </p>
+ <p>{ _t("Your messages were successfully exported") }</p>
<DialogButtons
primaryButton={_t("Okay")}
From e459f3841d7df1cb6ab46b58519b68f6fb71aeab Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 10:17:14 +0530
Subject: [PATCH 107/176] Update src/components/views/dialogs/ExportDialog.tsx
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/components/views/dialogs/ExportDialog.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 6c95ac809e..e66012869f 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -274,7 +274,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
{ MessageCount }
<span className="mx_ExportDialog_subheading">
- {_t("Size Limit")}
+ { _t("Size Limit") }
</span>
<Field
From 7a09bcb5a20bef564c2da7bf2e3f5078620d9e6b Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 10:17:38 +0530
Subject: [PATCH 108/176] Update src/components/views/dialogs/ExportDialog.tsx
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/components/views/dialogs/ExportDialog.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index e66012869f..622630f5da 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -294,7 +294,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
setAttachments((e.target as HTMLInputElement).checked)
}
>
- {_t("Include Attachments")}
+ { _t("Include Attachments") }
</StyledCheckbox>
<DialogButtons
From 60c6af501b29ce946c5feb0bb907d786027110b0 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 10:18:17 +0530
Subject: [PATCH 109/176] Update src/components/views/dialogs/ExportDialog.tsx
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/components/views/dialogs/ExportDialog.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 622630f5da..a8bb0fd7fa 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -331,7 +331,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
onFinished={onFinished}
fixedWidth={true}
>
- <p> {_t("The export was cancelled successfully")} </p>
+ <p>{ _t("The export was cancelled successfully") }</p>
<DialogButtons
primaryButton={_t("Okay")}
From b506de098947a9391a903561ad484f30db1b0191 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 10:19:11 +0530
Subject: [PATCH 110/176] Update src/components/views/messages/MFileBody.js
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/components/views/messages/MFileBody.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index 813b340bb9..af1c011f30 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -175,7 +175,7 @@ export default class MFileBody extends React.Component {
if (this.props.showGenericPlaceholder) {
placeholder = (
<div className="mx_MFileBody_info">
- <span className="mx_MFileBody_info_icon" >
+ <span className="mx_MFileBody_info_icon">
{this.props.forExport ?
<img alt="Attachment" className="mx_export_attach_icon" src="icons/attach.svg" />
: null}
From de6bc3f2eddded08d7e8530a7fc19debc2cf9668 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 10:19:57 +0530
Subject: [PATCH 111/176] Update src/utils/exportUtils/Exporter.ts
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/utils/exportUtils/Exporter.ts | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index de9aba0ff7..e26d25f595 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -12,8 +12,8 @@ import * as ponyfill from "web-streams-polyfill/ponyfill"
import "web-streams-polyfill/ponyfill"; // to support streams API for older browsers
type FileStream = {
- name: string,
- stream(): ReadableStream,
+ name: string;
+ stream(): ReadableStream;
};
export default abstract class Exporter {
From 025a7eb9a56ee99579366a67685ca3fcc4c25992 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 10:36:24 +0530
Subject: [PATCH 112/176] Iterate PR
---
res/css/views/dialogs/_ExportDialog.scss | 38 +++---
src/components/views/avatars/MemberAvatar.tsx | 3 +-
src/components/views/dialogs/ExportDialog.tsx | 119 ++++++++----------
.../views/elements/EventListSummary.tsx | 2 +-
4 files changed, 78 insertions(+), 84 deletions(-)
diff --git a/res/css/views/dialogs/_ExportDialog.scss b/res/css/views/dialogs/_ExportDialog.scss
index 69b76221bb..d3af6c843b 100644
--- a/res/css/views/dialogs/_ExportDialog.scss
+++ b/res/css/views/dialogs/_ExportDialog.scss
@@ -1,22 +1,24 @@
-.mx_ExportDialog_subheading {
- font-size: $font-16px;
- display: block;
- font-family: $font-family;
- font-weight: 600;
- color: $primary-fg-color;
- margin-top: 18px;
- margin-bottom: 12px;
-}
+.mx_ExportDialog {
+ .mx_ExportDialog_subheading {
+ font-size: $font-16px;
+ display: block;
+ font-family: $font-family;
+ font-weight: $font-semi-bold;
+ color: $primary-fg-color;
+ margin-top: 18px;
+ margin-bottom: 12px;
+ }
-.mx_ExportDialog .mx_RadioButton > .mx_RadioButton_content {
- margin-top: 5px;
- margin-bottom: 5px;
-}
+ .mx_RadioButton > .mx_RadioButton_content {
+ margin-top: 5px;
+ margin-bottom: 5px;
+ }
-.mx_ExportDialog .mx_Field {
- width: 256px;
-}
+ .mx_Field {
+ width: 256px;
+ }
-.mx_ExportDialog .mx_Field_postfix {
- padding: 9px 10px;
+ .mx_Field_postfix {
+ padding: 9px 10px;
+ }
}
diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx
index 61723efb21..6015e4f568 100644
--- a/src/components/views/avatars/MemberAvatar.tsx
+++ b/src/components/views/avatars/MemberAvatar.tsx
@@ -18,12 +18,13 @@ limitations under the License.
import React from 'react';
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
import { ResizeMethod } from 'matrix-js-sdk/src/@types/partials';
+import { omit } from "lodash";
+
import dis from "../../../dispatcher/dispatcher";
import { Action } from "../../../dispatcher/actions";
import BaseAvatar from "./BaseAvatar";
import { replaceableComponent } from "../../../utils/replaceableComponent";
import { mediaFromMxc } from "../../../customisations/Media";
-import { omit } from "lodash";
interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url"> {
member: RoomMember;
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index a8bb0fd7fa..62fa7b5bc6 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -18,6 +18,7 @@ import HTMLExporter from "../../../utils/exportUtils/HtmlExport";
import JSONExporter from "../../../utils/exportUtils/JSONExport";
import PlainTextExporter from "../../../utils/exportUtils/PlainTextExport";
import { useStateCallback } from "../../../hooks/useStateCallback";
+import Exporter from "../../../utils/exportUtils/Exporter";
interface IProps extends IDialogProps {
room: Room;
@@ -37,8 +38,8 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
const [exportSuccessful, setExportSuccessful] = useState(false);
const [Exporter, setExporter] = useStateCallback<Exporter>(
null,
- async (Exporter: HTMLExporter | PlainTextExporter | JSONExporter) => {
- await Exporter?.export().then(() => {
+ async (exporter: Exporter) => {
+ await exporter?.export().then(() => {
if (!exportCancelled) setExportSuccessful(true);
});
},
@@ -115,7 +116,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
return { valid: false, feedback: _t("Size must be a number") };
}
- if (!(min <= parsedSize && parsedSize <= max)) {
+ if (min >= parsedSize || parsedSize >= max) {
return {
valid: false,
feedback: _t(
@@ -148,7 +149,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
};
}
- if (!(min <= parsedSize && parsedSize <= max)) {
+ if (min >= parsedSize || parsedSize >= max) {
return {
valid: false,
feedback: _t(
@@ -192,9 +193,9 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
</option>
);
});
- let MessageCount = null;
+ let messageCount = null;
if (exportType === exportTypes.LAST_N_MESSAGES) {
- MessageCount = (
+ messageCount = (
<Field
element="input"
type="number"
@@ -209,34 +210,45 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
);
}
- const sizePostFix = <span title={_t("MB")}>{_t("MB")}</span>;
+ const sizePostFix = <span>{ _t("MB") }</span>;
- const ExportCancelWarning = (
- <BaseDialog
- title={_t("Warning")}
+ let componentToDisplay: JSX.Element;
+ if (exportCancelled) {
+ // Display successful cancellation message
+ return <BaseDialog
+ title={_t("Export Cancelled")}
className="mx_ExportDialog"
contentId="mx_Dialog_content"
onFinished={onFinished}
fixedWidth={true}
>
- <p>
- {" "}
- {_t(
- "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
- )}{" "}
- </p>
+ <p>{ _t("The export was cancelled successfully") }</p>
+
<DialogButtons
- primaryButton={_t("Abort export process")}
- primaryButtonClass="danger"
- hasCancel={true}
- cancelButton={_t("Continue")}
- onCancel={() => setCancelWarning(false)}
- onPrimaryButtonClick={confirmCanel}
+ primaryButton={_t("Okay")}
+ hasCancel={false}
+ onPrimaryButtonClick={onFinished}
/>
</BaseDialog>
- );
+ } else if (exportSuccessful) {
+ // Display successful export message
+ return <BaseDialog
+ title={_t("Export Successful")}
+ className="mx_ExportDialog"
+ contentId="mx_Dialog_content"
+ onFinished={onFinished}
+ fixedWidth={true}
+ >
+ <p>{ _t("Your messages were successfully exported") }</p>
- const ExportSettings = (
+ <DialogButtons
+ primaryButton={_t("Okay")}
+ hasCancel={false}
+ onPrimaryButtonClick={onFinished}
+ />
+ </BaseDialog>
+ } else if (!isExporting) {
+ // Display export settings
<BaseDialog
title={_t("Export Chat")}
className="mx_ExportDialog"
@@ -271,7 +283,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
>
{ exportTypeOptions }
</Field>
- { MessageCount }
+ { messageCount }
<span className="mx_ExportDialog_subheading">
{ _t("Size Limit") }
@@ -303,46 +315,32 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
onCancel={() => onFinished(false)}
/>
</BaseDialog>
- );
-
- const ExportSuccessful = (
+ } else if (displayCancel) {
+ // Display cancel warning
<BaseDialog
- title={_t("Export Successful")}
+ title={_t("Warning")}
className="mx_ExportDialog"
contentId="mx_Dialog_content"
onFinished={onFinished}
fixedWidth={true}
>
- <p>{ _t("Your messages were successfully exported") }</p>
-
+ <p>
+ {_t(
+ "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
+ )}
+ </p>
<DialogButtons
- primaryButton={_t("Okay")}
- hasCancel={false}
- onPrimaryButtonClick={onFinished}
+ primaryButton={_t("Abort export process")}
+ primaryButtonClass="danger"
+ hasCancel={true}
+ cancelButton={_t("Continue")}
+ onCancel={() => setCancelWarning(false)}
+ onPrimaryButtonClick={confirmCanel}
/>
</BaseDialog>
- );
-
- const ExportCancelSuccess = (
- <BaseDialog
- title={_t("Export Cancelled")}
- className="mx_ExportDialog"
- contentId="mx_Dialog_content"
- onFinished={onFinished}
- fixedWidth={true}
- >
- <p>{ _t("The export was cancelled successfully") }</p>
-
- <DialogButtons
- primaryButton={_t("Okay")}
- hasCancel={false}
- onPrimaryButtonClick={onFinished}
- />
- </BaseDialog>
- );
-
- const ExportProgress = (
- <BaseDialog
+ } else {
+ // Display progress dialog
+ return <BaseDialog
title={_t("Exporting your data...")}
className="mx_ExportDialog"
contentId="mx_Dialog_content"
@@ -356,14 +354,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
onPrimaryButtonClick={onCancel}
/>
</BaseDialog>
- );
-
- let componentToDisplay: JSX.Element;
- if (exportCancelled) componentToDisplay = ExportCancelSuccess;
- else if (exportSuccessful) componentToDisplay = ExportSuccessful;
- else if (!isExporting) componentToDisplay = ExportSettings;
- else if (displayCancel) componentToDisplay = ExportCancelWarning;
- else componentToDisplay = ExportProgress;
+ }
return componentToDisplay;
};
diff --git a/src/components/views/elements/EventListSummary.tsx b/src/components/views/elements/EventListSummary.tsx
index ef40251dec..665263d19c 100644
--- a/src/components/views/elements/EventListSummary.tsx
+++ b/src/components/views/elements/EventListSummary.tsx
@@ -77,7 +77,7 @@ const EventListSummary: React.FC<IProps> = ({
</React.Fragment>;
} else {
const avatars = summaryMembers.map((m, idx) =>
- <MemberAvatar key={m.userId + idx} member={m} width={14} height={14} />);
+ <MemberAvatar key={m.userId} member={m} width={14} height={14} />);
body = (
<div className="mx_EventTile_line">
<div className="mx_EventTile_info">
From e404fa3caedb7ec78dcc5750b8b48328b0ca50d2 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 10:57:02 +0530
Subject: [PATCH 113/176] Apply suggestions
---
src/components/views/dialogs/ExportDialog.tsx | 257 +++++++++---------
src/components/views/elements/ReplyThread.js | 18 +-
src/i18n/strings/en_EN.json | 14 +-
src/utils/exportUtils/JSONExport.ts | 37 +--
4 files changed, 161 insertions(+), 165 deletions(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 62fa7b5bc6..21239edb3c 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -212,151 +212,154 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
const sizePostFix = <span>{ _t("MB") }</span>;
- let componentToDisplay: JSX.Element;
if (exportCancelled) {
// Display successful cancellation message
- return <BaseDialog
- title={_t("Export Cancelled")}
- className="mx_ExportDialog"
- contentId="mx_Dialog_content"
- onFinished={onFinished}
- fixedWidth={true}
- >
- <p>{ _t("The export was cancelled successfully") }</p>
+ return (
+ <BaseDialog
+ title={_t("Export Cancelled")}
+ className="mx_ExportDialog"
+ contentId="mx_Dialog_content"
+ onFinished={onFinished}
+ fixedWidth={true}
+ >
+ <p>{ _t("The export was cancelled successfully") }</p>
- <DialogButtons
- primaryButton={_t("Okay")}
- hasCancel={false}
- onPrimaryButtonClick={onFinished}
- />
- </BaseDialog>
+ <DialogButtons
+ primaryButton={ _t("Okay") }
+ hasCancel={false}
+ onPrimaryButtonClick={onFinished}
+ />
+ </BaseDialog>
+ );
} else if (exportSuccessful) {
// Display successful export message
- return <BaseDialog
- title={_t("Export Successful")}
- className="mx_ExportDialog"
- contentId="mx_Dialog_content"
- onFinished={onFinished}
- fixedWidth={true}
- >
- <p>{ _t("Your messages were successfully exported") }</p>
+ return (
+ <BaseDialog
+ title={_t("Export Successful")}
+ className="mx_ExportDialog"
+ contentId="mx_Dialog_content"
+ onFinished={onFinished}
+ fixedWidth={true}
+ >
+ <p>{ _t("Your messages were successfully exported") }</p>
- <DialogButtons
- primaryButton={_t("Okay")}
- hasCancel={false}
- onPrimaryButtonClick={onFinished}
- />
- </BaseDialog>
+ <DialogButtons
+ primaryButton={_t("Okay")}
+ hasCancel={false}
+ onPrimaryButtonClick={onFinished}
+ />
+ </BaseDialog>
+ );
} else if (!isExporting) {
// Display export settings
- <BaseDialog
- title={_t("Export Chat")}
- className="mx_ExportDialog"
- contentId="mx_Dialog_content"
- hasCancel={true}
- onFinished={onFinished}
- fixedWidth={true}
- >
- <p>
- {_t(
- "Select from the options below to export chats from your timeline",
- )}
- </p>
-
- <span className="mx_ExportDialog_subheading">{ _t("Format") }</span>
-
- <StyledRadioGroup
- name="feedbackRating"
- value={exportFormat}
- onChange={(key) => setExportFormat(exportFormats[key])}
- definitions={exportFormatOptions}
- />
-
- <span className="mx_ExportDialog_subheading">{ _t("Messages") }</span>
-
- <Field
- element="select"
- value={exportType}
- onChange={(e) => {
- setExportType(exportTypes[e.target.value]);
- }}
+ return (
+ <BaseDialog
+ title={_t("Export Chat")}
+ className="mx_ExportDialog"
+ contentId="mx_Dialog_content"
+ hasCancel={true}
+ onFinished={onFinished}
+ fixedWidth={true}
>
- { exportTypeOptions }
- </Field>
- { messageCount }
+ <p>
+ { _t("Select from the options below to export chats from your timeline") }
+ </p>
- <span className="mx_ExportDialog_subheading">
- { _t("Size Limit") }
- </span>
+ <span className="mx_ExportDialog_subheading">{ _t("Format") }</span>
- <Field
- type="number"
- autoComplete="off"
- onValidate={onValidateSize}
- element="input"
- ref={sizeLimitRef}
- value={sizeLimit}
- postfixComponent={sizePostFix}
- onChange={(e) => setSizeLimit(parseInt(e.target.value))}
- />
+ <StyledRadioGroup
+ name="feedbackRating"
+ value={exportFormat}
+ onChange={(key) => setExportFormat(exportFormats[key])}
+ definitions={exportFormatOptions}
+ />
- <StyledCheckbox
- checked={includeAttachments}
- onChange={(e) =>
- setAttachments((e.target as HTMLInputElement).checked)
- }
- >
- { _t("Include Attachments") }
- </StyledCheckbox>
+ <span className="mx_ExportDialog_subheading">{ _t("Messages") }</span>
- <DialogButtons
- primaryButton={_t("Export")}
- onPrimaryButtonClick={onExportClick}
- onCancel={() => onFinished(false)}
- />
- </BaseDialog>
+ <Field
+ element="select"
+ value={exportType}
+ onChange={(e) => {
+ setExportType(exportTypes[e.target.value]);
+ }}
+ >
+ { exportTypeOptions }
+ </Field>
+ { messageCount }
+
+ <span className="mx_ExportDialog_subheading">{ _t("Size Limit") }</span>
+
+ <Field
+ type="number"
+ autoComplete="off"
+ onValidate={onValidateSize}
+ element="input"
+ ref={sizeLimitRef}
+ value={sizeLimit}
+ postfixComponent={sizePostFix}
+ onChange={(e) => setSizeLimit(parseInt(e.target.value))}
+ />
+
+ <StyledCheckbox
+ checked={includeAttachments}
+ onChange={(e) =>
+ setAttachments((e.target as HTMLInputElement).checked)
+ }
+ >
+ { _t("Include Attachments") }
+ </StyledCheckbox>
+
+ <DialogButtons
+ primaryButton={_t("Export")}
+ onPrimaryButtonClick={onExportClick}
+ onCancel={() => onFinished(false)}
+ />
+ </BaseDialog>
+ );
} else if (displayCancel) {
// Display cancel warning
- <BaseDialog
- title={_t("Warning")}
- className="mx_ExportDialog"
- contentId="mx_Dialog_content"
- onFinished={onFinished}
- fixedWidth={true}
- >
- <p>
- {_t(
- "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
- )}
- </p>
- <DialogButtons
- primaryButton={_t("Abort export process")}
- primaryButtonClass="danger"
- hasCancel={true}
- cancelButton={_t("Continue")}
- onCancel={() => setCancelWarning(false)}
- onPrimaryButtonClick={confirmCanel}
- />
- </BaseDialog>
+ return (
+ <BaseDialog
+ title={_t("Warning")}
+ className="mx_ExportDialog"
+ contentId="mx_Dialog_content"
+ onFinished={onFinished}
+ fixedWidth={true}
+ >
+ <p>
+ {_t(
+ "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
+ )}
+ </p>
+ <DialogButtons
+ primaryButton={_t("Abort export process")}
+ primaryButtonClass="danger"
+ hasCancel={true}
+ cancelButton={_t("Continue")}
+ onCancel={() => setCancelWarning(false)}
+ onPrimaryButtonClick={confirmCanel}
+ />
+ </BaseDialog>
+ );
} else {
// Display progress dialog
- return <BaseDialog
- title={_t("Exporting your data...")}
- className="mx_ExportDialog"
- contentId="mx_Dialog_content"
- onFinished={onFinished}
- fixedWidth={true}
- >
- <DialogButtons
- primaryButton={_t("Cancel")}
- primaryButtonClass="danger"
- hasCancel={false}
- onPrimaryButtonClick={onCancel}
- />
- </BaseDialog>
+ return (
+ <BaseDialog
+ title={_t("Exporting your data...")}
+ className="mx_ExportDialog"
+ contentId="mx_Dialog_content"
+ onFinished={onFinished}
+ fixedWidth={true}
+ >
+ <DialogButtons
+ primaryButton={_t("Cancel")}
+ primaryButtonClass="danger"
+ hasCancel={false}
+ onPrimaryButtonClick={onCancel}
+ />
+ </BaseDialog>
+ );
}
-
- return componentToDisplay;
};
export default ExportDialog;
diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index cda237f69d..a9bea25851 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -73,16 +73,16 @@ export default class ReplyThread extends React.Component {
this.unmounted = false;
- if (this.props.forExport) return;
+ if (this.props.forExport) {
+ this.context.on("Event.replaced", this.onEventReplaced);
+ this.room = this.context.getRoom(this.props.parentEv.getRoomId());
+ this.room.on("Room.redaction", this.onRoomRedaction);
+ this.room.on("Room.redactionCancelled", this.onRoomRedaction);
- this.context.on("Event.replaced", this.onEventReplaced);
- this.room = this.context.getRoom(this.props.parentEv.getRoomId());
- this.room.on("Room.redaction", this.onRoomRedaction);
- this.room.on("Room.redactionCancelled", this.onRoomRedaction);
-
- this.onQuoteClick = this.onQuoteClick.bind(this);
- this.canCollapse = this.canCollapse.bind(this);
- this.collapse = this.collapse.bind(this);
+ this.onQuoteClick = this.onQuoteClick.bind(this);
+ this.canCollapse = this.canCollapse.bind(this);
+ this.collapse = this.collapse.bind(this);
+ }
}
static getParentEventId(ev) {
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 7489846008..3929cfa1a6 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2261,19 +2261,19 @@
"Enter a number between %(min)s and %(max)s": "Enter a number between %(min)s and %(max)s",
"Number of messages": "Number of messages",
"MB": "MB",
- "Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
- "Abort export process": "Abort export process",
+ "Export Cancelled": "Export Cancelled",
+ "The export was cancelled successfully": "The export was cancelled successfully",
+ "Okay": "Okay",
+ "Export Successful": "Export Successful",
+ "Your messages were successfully exported": "Your messages were successfully exported",
"Export Chat": "Export Chat",
"Select from the options below to export chats from your timeline": "Select from the options below to export chats from your timeline",
"Format": "Format",
"Size Limit": "Size Limit",
"Include Attachments": "Include Attachments",
"Export": "Export",
- "Export Successful": "Export Successful",
- "Your messages were successfully exported": "Your messages were successfully exported",
- "Okay": "Okay",
- "Export Cancelled": "Export Cancelled",
- "The export was cancelled successfully": "The export was cancelled successfully",
+ "Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
+ "Abort export process": "Abort export process",
"Exporting your data...": "Exporting your data...",
"Feedback sent": "Feedback sent",
"Rate %(brand)s": "Rate %(brand)s",
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index cbdc78a711..5c3b44da1b 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -10,35 +10,30 @@ import { EventType } from "matrix-js-sdk/src/@types/event";
export default class JSONExporter extends Exporter {
protected totalSize: number;
+ protected messages: any[];
constructor(room: Room, exportType: exportTypes, exportOptions: exportOptions) {
super(room, exportType, exportOptions);
this.totalSize = 0;
+ this.messages = [];
}
- protected wrapJSON(json: string): string {
+ protected createJSONString(): string {
const exportDate = formatFullDateNoDayNoTime(new Date());
const creator = this.room.currentState.getStateEvents(EventType.RoomCreate, "")?.getSender();
const creatorName = this.room?.getMember(creator)?.rawDisplayName || creator;
const topic = this.room.currentState.getStateEvents(EventType.RoomTopic, "")?.getContent()?.topic || "";
const exporter = this.client.getUserId();
const exporterName = this.room?.getMember(exporter)?.rawDisplayName || exporter;
- return `{
- "room_name": "${this.room.name}",
- "room_creator": "${creatorName}",
- "topic": "${topic}",
- "export_date": "${exportDate}",
- "exported_by": "${exporterName}",
- "messages": [
-${json}
- ]
-}`
- }
-
- protected indentEachLine(JSONString: string, spaces: number) {
- const indent = ' ';
- const regex = /^(?!\s*$)/gm;
- return JSONString.replace(regex, indent.repeat(spaces));
+ const jsonObject = {
+ room_name: this.room.name,
+ room_creator: creatorName,
+ topic,
+ export_date: exportDate,
+ exported_by: exporterName,
+ messages: this.messages,
+ }
+ return JSON.stringify(jsonObject, null, 2);
}
protected async getJSONString(mxEv: MatrixEvent) {
@@ -57,18 +52,16 @@ ${json}
}
const jsonEvent: any = mxEv.toJSON();
const clearEvent = mxEv.isEncrypted() ? jsonEvent.decrypted : jsonEvent;
- const jsonString = JSON.stringify(clearEvent, null, 2);
- return jsonString.length > 2 ? jsonString + ",\n" : "";
+ return clearEvent;
}
protected async createOutput(events: MatrixEvent[]) {
- let content = "";
for (const event of events) {
if (this.cancelled) return this.cleanUp();
if (!haveTileForEvent(event)) continue;
- content += await this.getJSONString(event);
+ this.messages.push(await this.getJSONString(event));
}
- return this.wrapJSON(this.indentEachLine(content.slice(0, -2), 2));
+ return this.createJSONString();
}
public async export() {
From 6cbbc0ecb4d1be96e0aace9719bf0a03419f855b Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 11:29:05 +0530
Subject: [PATCH 114/176] Replace hard coded forExport string by mxc url
---
src/components/views/messages/MAudioBody.js | 2 +-
src/components/views/messages/MImageBody.js | 2 +-
src/components/views/messages/MVideoBody.tsx | 2 +-
src/utils/exportUtils/HtmlExport.tsx | 4 +++-
src/utils/exportUtils/StreamToZip.ts | 3 ++-
5 files changed, 8 insertions(+), 5 deletions(-)
diff --git a/src/components/views/messages/MAudioBody.js b/src/components/views/messages/MAudioBody.js
index 6c6a0527ea..9a8d401185 100644
--- a/src/components/views/messages/MAudioBody.js
+++ b/src/components/views/messages/MAudioBody.js
@@ -42,7 +42,7 @@ export default class MAudioBody extends React.Component {
}
_getContentUrl() {
- if (this.props.forExport) return "forExport";
+ if (this.props.forExport) return this.props.mxEvent.getContent().url;
const media = mediaFromContent(this.props.mxEvent.getContent());
if (media.isEncrypted) {
return this.state.decryptedUrl;
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index d854baec46..2916391f58 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -172,7 +172,7 @@ export default class MImageBody extends React.Component {
}
_getContentUrl() {
- if (this.props.forExport) return "forExport";
+ if (this.props.forExport) return this.props.mxEvent.getContent().url;
const media = mediaFromContent(this.props.mxEvent.getContent());
if (media.isEncrypted) {
return this.state.decryptedUrl;
diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx
index a6d849e836..505a1b5a7e 100644
--- a/src/components/views/messages/MVideoBody.tsx
+++ b/src/components/views/messages/MVideoBody.tsx
@@ -78,7 +78,7 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
}
private getContentUrl(): string|null {
- if (this.props.forExport) return "forExport";
+ if (this.props.forExport) return this.props.mxEvent.getContent().url;
const media = mediaFromContent(this.props.mxEvent.getContent());
if (media.isEncrypted) {
return this.state.decryptedUrl;
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 7ece487cf7..f96efaea4b 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -263,7 +263,9 @@ export default class HTMLExporter extends Exporter {
</MatrixClientContext.Provider>
</div>
let eventTileMarkup = renderToStaticMarkup(eventTile);
- if (filePath) eventTileMarkup = eventTileMarkup.replace(/(src=|href=)"forExport"/g, `$1"${filePath}"`);
+ if (filePath) {
+ eventTileMarkup = eventTileMarkup.split(mxEv.getContent().url).join(filePath);
+ }
if (hasAvatar) {
eventTileMarkup = eventTileMarkup.replace(
encodeURI(this.getAvatarURL(mxEv)).replace(/&/g, '&'),
diff --git a/src/utils/exportUtils/StreamToZip.ts b/src/utils/exportUtils/StreamToZip.ts
index a411d35190..5e5b692793 100644
--- a/src/utils/exportUtils/StreamToZip.ts
+++ b/src/utils/exportUtils/StreamToZip.ts
@@ -136,7 +136,8 @@ export default function streamToZIP(underlyingSource: UnderlyingSource) {
const date = new Date(typeof fileLike.lastModified === 'undefined' ? Date.now() : fileLike.lastModified);
if (fileLike.directory && !name.endsWith('/')) name += '/';
- if (files[name]) throw new Error('File already exists.');
+ // if file already exists, do not enqueue
+ if (files[name]) return;
const nameBuf = encoder.encode(name);
filenames.push(name);
From 3fc4be0be9d77001f2649ce2f97bd032651a7e9d Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 11:40:26 +0530
Subject: [PATCH 115/176] Add return types to ABC Exporter
---
src/utils/exportUtils/Exporter.ts | 26 +++++++++++++-------------
1 file changed, 13 insertions(+), 13 deletions(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index e26d25f595..3f2e8e3caa 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -35,12 +35,12 @@ export default abstract class Exporter {
window.addEventListener("onunload", this.abortWriter);
}
- protected onBeforeUnload(e: BeforeUnloadEvent) {
+ protected onBeforeUnload(e: BeforeUnloadEvent): string {
e.preventDefault();
return e.returnValue = "Are you sure you want to exit during this export?";
}
- protected addFile(filePath: string, blob: Blob) {
+ protected addFile(filePath: string, blob: Blob): void {
const file = {
name: filePath,
stream: () => blob.stream(),
@@ -48,7 +48,7 @@ export default abstract class Exporter {
this.files.push(file);
}
- protected async downloadZIP() {
+ protected async downloadZIP(): Promise<any> {
const filename = `matrix-export-${formatFullDateNoDay(new Date())}.zip`;
// Support for older browsers
@@ -78,14 +78,14 @@ export default abstract class Exporter {
await this.pumpToFileStream(reader);
}
- protected cleanUp() {
+ protected cleanUp(): string {
console.log("Cleaning up...");
window.removeEventListener("beforeunload", this.onBeforeUnload);
window.removeEventListener("onunload", this.abortWriter);
return "";
}
- public async cancelExport() {
+ public async cancelExport(): Promise<void> {
console.log("Cancelling export...");
this.cancelled = true;
await this.abortWriter();
@@ -105,7 +105,7 @@ export default abstract class Exporter {
await this.writer?.abort();
}
- protected async pumpToFileStream(reader: ReadableStreamDefaultReader) {
+ protected async pumpToFileStream(reader: ReadableStreamDefaultReader): Promise<void> {
const res = await reader.read();
if (res.done) await this.writer.close();
else {
@@ -114,7 +114,7 @@ export default abstract class Exporter {
}
}
- protected setEventMetadata(event: MatrixEvent) {
+ protected setEventMetadata(event: MatrixEvent): MatrixEvent {
const roomState = this.client.getRoom(this.room.roomId).currentState;
event.sender = roomState.getSentinelMember(
event.getSender(),
@@ -127,7 +127,7 @@ export default abstract class Exporter {
return event;
}
- protected getLimit() {
+ protected getLimit(): number {
let limit: number;
switch (this.exportType) {
case exportTypes.LAST_N_MESSAGES:
@@ -195,7 +195,7 @@ export default abstract class Exporter {
return events;
}
- protected async getMediaBlob(event: MatrixEvent) {
+ protected async getMediaBlob(event: MatrixEvent): Promise<Blob> {
let blob: Blob;
try {
const isEncrypted = event.isEncrypted();
@@ -215,7 +215,7 @@ export default abstract class Exporter {
return blob;
}
- protected splitFileName(file: string) {
+ protected splitFileName(file: string): string[] {
const lastDot = file.lastIndexOf('.');
if (lastDot === -1) return [file, ""];
const fileName = file.slice(0, lastDot);
@@ -223,7 +223,7 @@ export default abstract class Exporter {
return [fileName, '.' + ext];
}
- protected getFilePath(event: MatrixEvent) {
+ protected getFilePath(event: MatrixEvent): string {
const mediaType = event.getContent().msgtype;
let fileDirectory: string;
switch (mediaType) {
@@ -245,7 +245,7 @@ export default abstract class Exporter {
return fileDirectory + "/" + fileName + '-' + fileDate + fileExt;
}
- protected isReply(event: MatrixEvent) {
+ protected isReply(event: MatrixEvent): boolean {
const isEncrypted = event.isEncrypted();
// If encrypted, in_reply_to lies in event.event.content
const content = isEncrypted ? event.event.content : event.getContent();
@@ -253,7 +253,7 @@ export default abstract class Exporter {
return !!(relatesTo && relatesTo["m.in_reply_to"]);
}
- protected isAttachment(mxEv: MatrixEvent) {
+ protected isAttachment(mxEv: MatrixEvent): boolean {
const attachmentTypes = ["m.sticker", "m.image", "m.file", "m.video", "m.audio"];
return mxEv.getType() === attachmentTypes[0] || attachmentTypes.includes(mxEv.getContent().msgtype);
}
From 747273cc9caaed6134a64bb40036519ea20bfbdf Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 12:06:58 +0530
Subject: [PATCH 116/176] Convert input's value to string to use existing types
---
src/components/views/dialogs/ExportDialog.tsx | 8 ++++----
src/components/views/elements/Field.tsx | 2 +-
src/components/views/messages/MFileBody.js | 2 +-
3 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 21239edb3c..16d144c87b 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -116,7 +116,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
return { valid: false, feedback: _t("Size must be a number") };
}
- if (min >= parsedSize || parsedSize >= max) {
+ if (min > parsedSize || parsedSize > max) {
return {
valid: false,
feedback: _t(
@@ -149,7 +149,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
};
}
- if (min >= parsedSize || parsedSize >= max) {
+ if (min > parsedSize || parsedSize > max) {
return {
valid: false,
feedback: _t(
@@ -199,7 +199,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
<Field
element="input"
type="number"
- value={numberOfMessages}
+ value={numberOfMessages.toString()}
ref={messageCountRef}
onValidate={onValidateNumberOfMessages}
label={_t("Number of messages")}
@@ -295,7 +295,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
onValidate={onValidateSize}
element="input"
ref={sizeLimitRef}
- value={sizeLimit}
+ value={sizeLimit.toString()}
postfixComponent={sizePostFix}
onChange={(e) => setSizeLimit(parseInt(e.target.value))}
/>
diff --git a/src/components/views/elements/Field.tsx b/src/components/views/elements/Field.tsx
index ca02df71a9..1373c2df0e 100644
--- a/src/components/views/elements/Field.tsx
+++ b/src/components/views/elements/Field.tsx
@@ -77,7 +77,7 @@ export interface IInputProps extends IProps, InputHTMLAttributes<HTMLInputElemen
// The element to create. Defaults to "input".
element?: "input";
// The input's value. This is a controlled component, so the value is required.
- value: string | number;
+ value: string;
}
interface ISelectProps extends IProps, SelectHTMLAttributes<HTMLSelectElement> {
diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index af1c011f30..d1a2903d76 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -187,7 +187,7 @@ export default class MFileBody extends React.Component {
if (this.props.forExport) {
return <span className="mx_MFileBody">
- <a href="forExport">
+ <a href={this.props.mxEvent.getContent().url}>
{ placeholder }
</a>
</span>;
From 497d8102e213b00792947a70695a0aaf747b95c3 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 12:54:44 +0530
Subject: [PATCH 117/176] Handle mxc urls for non-encrypted rooms
---
src/components/views/messages/MAudioBody.js | 5 +++--
src/components/views/messages/MFileBody.js | 3 ++-
src/components/views/messages/MImageBody.js | 5 +++--
src/components/views/messages/MVideoBody.tsx | 5 +++--
src/utils/exportUtils/HtmlExport.tsx | 5 +++--
5 files changed, 14 insertions(+), 9 deletions(-)
diff --git a/src/components/views/messages/MAudioBody.js b/src/components/views/messages/MAudioBody.js
index 9a8d401185..2258aa1713 100644
--- a/src/components/views/messages/MAudioBody.js
+++ b/src/components/views/messages/MAudioBody.js
@@ -42,8 +42,9 @@ export default class MAudioBody extends React.Component {
}
_getContentUrl() {
- if (this.props.forExport) return this.props.mxEvent.getContent().url;
- const media = mediaFromContent(this.props.mxEvent.getContent());
+ const content = this.props.mxEvent.getContent();
+ if (this.props.forExport) return content.file?.url || content.url;
+ const media = mediaFromContent(content);
if (media.isEncrypted) {
return this.state.decryptedUrl;
} else {
diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index d1a2903d76..c33ad5f21b 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -186,8 +186,9 @@ export default class MFileBody extends React.Component {
}
if (this.props.forExport) {
+ const content = this.props.mxEvent.getContent();
return <span className="mx_MFileBody">
- <a href={this.props.mxEvent.getContent().url}>
+ <a href={content.file?.url || content.url}>
{ placeholder }
</a>
</span>;
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 2916391f58..9229755d29 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -172,8 +172,9 @@ export default class MImageBody extends React.Component {
}
_getContentUrl() {
- if (this.props.forExport) return this.props.mxEvent.getContent().url;
- const media = mediaFromContent(this.props.mxEvent.getContent());
+ const content = this.props.mxEvent.getContent();
+ if (this.props.forExport) return content.url || content.file.url;
+ const media = mediaFromContent(content);
if (media.isEncrypted) {
return this.state.decryptedUrl;
} else {
diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx
index 505a1b5a7e..ec9cbcf7b5 100644
--- a/src/components/views/messages/MVideoBody.tsx
+++ b/src/components/views/messages/MVideoBody.tsx
@@ -78,8 +78,9 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
}
private getContentUrl(): string|null {
- if (this.props.forExport) return this.props.mxEvent.getContent().url;
- const media = mediaFromContent(this.props.mxEvent.getContent());
+ const content = this.props.mxEvent.getContent();
+ if (this.props.forExport) return content.file?.url || content.url;
+ const media = mediaFromContent(content);
if (media.isEncrypted) {
return this.state.decryptedUrl;
} else {
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index f96efaea4b..f05581a6cb 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -264,7 +264,8 @@ export default class HTMLExporter extends Exporter {
</div>
let eventTileMarkup = renderToStaticMarkup(eventTile);
if (filePath) {
- eventTileMarkup = eventTileMarkup.split(mxEv.getContent().url).join(filePath);
+ const mxc = mxEv.getContent().url || mxEv.getContent().file?.url;
+ eventTileMarkup = eventTileMarkup.split(mxc).join(filePath);
}
if (hasAvatar) {
eventTileMarkup = eventTileMarkup.replace(
@@ -305,7 +306,7 @@ export default class HTMLExporter extends Exporter {
}
this.addFile(filePath, blob);
} catch (e) {
- console.log("Error while fetching file");
+ console.log("Error while fetching file" + e);
eventTile = await this.getEventTile(
this.createModifiedEvent(_t("Error fetching file"), mxEv),
joined,
From b0be7d2861af9eb3a4ef3af6e60c4cc0da843168 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 19:43:21 +0530
Subject: [PATCH 118/176] Add license and negate the conditional
---
src/components/views/elements/ReplyThread.js | 2 +-
src/utils/exportUtils/Exporter.ts | 2 +-
src/utils/exportUtils/{StreamToZip.ts => ZipStream.ts} | 2 ++
3 files changed, 4 insertions(+), 2 deletions(-)
rename src/utils/exportUtils/{StreamToZip.ts => ZipStream.ts} (98%)
diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index a9bea25851..1ca68f18a8 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -73,7 +73,7 @@ export default class ReplyThread extends React.Component {
this.unmounted = false;
- if (this.props.forExport) {
+ if (!this.props.forExport) {
this.context.on("Event.replaced", this.onEventReplaced);
this.room = this.context.getRoom(this.props.parentEv.getRoomId());
this.room.on("Room.redaction", this.onRoomRedaction);
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 3f2e8e3caa..1a0b9fe187 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -7,7 +7,7 @@ import { decryptFile } from "../DecryptFile";
import { mediaFromContent } from "../../customisations/Media";
import { formatFullDateNoDay } from "../../DateUtils";
import { MatrixClient } from "matrix-js-sdk";
-import streamToZIP from "./StreamToZip";
+import streamToZIP from "./ZipStream";
import * as ponyfill from "web-streams-polyfill/ponyfill"
import "web-streams-polyfill/ponyfill"; // to support streams API for older browsers
diff --git a/src/utils/exportUtils/StreamToZip.ts b/src/utils/exportUtils/ZipStream.ts
similarity index 98%
rename from src/utils/exportUtils/StreamToZip.ts
rename to src/utils/exportUtils/ZipStream.ts
index 5e5b692793..4cb9060915 100644
--- a/src/utils/exportUtils/StreamToZip.ts
+++ b/src/utils/exportUtils/ZipStream.ts
@@ -1,3 +1,5 @@
+// Based on https://github.com/jimmywarting/StreamSaver.js/blob/master/examples/zip-stream.js
+
/* global ReadableStream */
type TypedArray =
From 7d5db4689c04bb3c012747db25ad11af7bf80b0b Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 30 Jun 2021 10:03:33 +0530
Subject: [PATCH 119/176] Disable close icon during export
---
src/components/views/dialogs/ExportDialog.tsx | 5 +++--
src/i18n/strings/en_EN.json | 2 +-
2 files changed, 4 insertions(+), 3 deletions(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 16d144c87b..ff542bfbf4 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -268,7 +268,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
<span className="mx_ExportDialog_subheading">{ _t("Format") }</span>
<StyledRadioGroup
- name="feedbackRating"
+ name="exportFormat"
value={exportFormat}
onChange={(key) => setExportFormat(exportFormats[key])}
definitions={exportFormatOptions}
@@ -332,7 +332,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
)}
</p>
<DialogButtons
- primaryButton={_t("Abort export process")}
+ primaryButton={_t("Stop")}
primaryButtonClass="danger"
hasCancel={true}
cancelButton={_t("Continue")}
@@ -348,6 +348,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
title={_t("Exporting your data...")}
className="mx_ExportDialog"
contentId="mx_Dialog_content"
+ hasCancel={false}
onFinished={onFinished}
fixedWidth={true}
>
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 3929cfa1a6..c6a3e033ec 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2273,7 +2273,7 @@
"Include Attachments": "Include Attachments",
"Export": "Export",
"Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
- "Abort export process": "Abort export process",
+ "Stop": "Stop",
"Exporting your data...": "Exporting your data...",
"Feedback sent": "Feedback sent",
"Rate %(brand)s": "Rate %(brand)s",
From 08d886e9d1e6782cf2c2eaf2b5fb70f0982181c1 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 30 Jun 2021 14:08:22 +0530
Subject: [PATCH 120/176] Delint
---
src/TextForEvent.tsx | 4 +-
src/components/views/messages/MVideoBody.tsx | 2 +-
.../views/right_panel/RoomSummaryCard.tsx | 2 +-
src/components/views/rooms/RoomHeader.js | 1 -
src/utils/exportUtils/Exporter.ts | 14 ++--
src/utils/exportUtils/HtmlExport.tsx | 65 ++++++++++---------
src/utils/exportUtils/JSONExport.ts | 7 +-
src/utils/exportUtils/PlainTextExport.ts | 11 ++--
src/utils/exportUtils/ZipStream.ts | 38 +++++------
src/utils/exportUtils/exportCSS.ts | 6 +-
src/utils/exportUtils/exportJS.ts | 2 +-
src/utils/exportUtils/exportUtils.ts | 4 +-
12 files changed, 77 insertions(+), 79 deletions(-)
diff --git a/src/TextForEvent.tsx b/src/TextForEvent.tsx
index 32e4a2d1fa..c4cc8d71df 100644
--- a/src/TextForEvent.tsx
+++ b/src/TextForEvent.tsx
@@ -277,9 +277,9 @@ function textForMessageEvent(ev: MatrixEvent): () => string | null {
if (ev.getContent().msgtype === "m.emote") {
message = "* " + senderDisplayName + " " + message;
} else if (ev.getContent().msgtype === "m.image") {
- message = _t('%(senderDisplayName)s sent an image.', {senderDisplayName});
+ message = _t('%(senderDisplayName)s sent an image.', { senderDisplayName });
} else if (ev.getType() == "m.sticker") {
- message = _t('%(senderDisplayName)s sent a sticker.', {senderDisplayName});
+ message = _t('%(senderDisplayName)s sent a sticker.', { senderDisplayName });
} else message = senderDisplayName + ': ' + message;
return message;
};
diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx
index 67394875f6..8950574c66 100644
--- a/src/components/views/messages/MVideoBody.tsx
+++ b/src/components/views/messages/MVideoBody.tsx
@@ -194,7 +194,7 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
private getFileBody = () => {
if (this.props.forExport) return null;
return <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />;
- }
+ };
render() {
const content = this.props.mxEvent.getContent();
diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx
index 75049811e1..8766400729 100644
--- a/src/components/views/right_panel/RoomSummaryCard.tsx
+++ b/src/components/views/right_panel/RoomSummaryCard.tsx
@@ -234,7 +234,7 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
};
const onRoomExportClick = async () => {
- const {default: ExportDialog} = await import("../dialogs/ExportDialog");
+ const { default: ExportDialog } = await import("../dialogs/ExportDialog");
Modal.createTrackedDialog('export room dialog', '', ExportDialog, {
room,
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index ed90760e48..886317f2bf 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -32,7 +32,6 @@ import RoomName from "../elements/RoomName";
import { PlaceCallType } from "../../../CallHandler";
import { replaceableComponent } from "../../../utils/replaceableComponent";
-
@replaceableComponent("views.rooms.RoomHeader")
export default class RoomHeader extends React.Component {
static propTypes = {
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 1a0b9fe187..7d7b1bed16 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -8,7 +8,7 @@ import { mediaFromContent } from "../../customisations/Media";
import { formatFullDateNoDay } from "../../DateUtils";
import { MatrixClient } from "matrix-js-sdk";
import streamToZIP from "./ZipStream";
-import * as ponyfill from "web-streams-polyfill/ponyfill"
+import * as ponyfill from "web-streams-polyfill/ponyfill";
import "web-streams-polyfill/ponyfill"; // to support streams API for older browsers
type FileStream = {
@@ -44,7 +44,7 @@ export default abstract class Exporter {
const file = {
name: filePath,
stream: () => blob.stream(),
- }
+ };
this.files.push(file);
}
@@ -52,7 +52,7 @@ export default abstract class Exporter {
const filename = `matrix-export-${formatFullDateNoDay(new Date())}.zip`;
// Support for older browsers
- streamSaver.WritableStream = ponyfill.WritableStream
+ streamSaver.WritableStream = ponyfill.WritableStream;
// Create a writable stream to the directory
this.fileStream = streamSaver.createWriteStream(filename);
@@ -72,9 +72,9 @@ export default abstract class Exporter {
if (this.cancelled) return this.cleanUp();
- console.info("Writing to the file system...")
+ console.info("Writing to the file system...");
- const reader = readableZipStream.getReader()
+ const reader = readableZipStream.getReader();
await this.pumpToFileStream(reader);
}
@@ -93,7 +93,7 @@ export default abstract class Exporter {
protected async downloadPlainText(fileName: string, text: string): Promise<any> {
this.fileStream = streamSaver.createWriteStream(fileName);
- this.writer = this.fileStream.getWriter()
+ this.writer = this.fileStream.getWriter();
const data = new TextEncoder().encode(text);
if (this.cancelled) return this.cleanUp();
await this.writer.write(data);
@@ -142,7 +142,7 @@ export default abstract class Exporter {
return limit;
}
- protected async getRequiredEvents():Promise<MatrixEvent[]> {
+ protected async getRequiredEvents(): Promise<MatrixEvent[]> {
const eventMapper = this.client.getEventMapper();
let prevToken: string|null = null;
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index f05581a6cb..3c19c4280b 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -1,9 +1,9 @@
-import React from "react"
+import React from "react";
import Exporter from "./Exporter";
import { mediaFromMxc } from "../../customisations/Media";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { renderToStaticMarkup } from 'react-dom/server'
+import { renderToStaticMarkup } from "react-dom/server";
import { Layout } from "../../settings/Layout";
import { shouldFormContinuation } from "../../components/structures/MessagePanel";
import { formatFullDateNoDayNoTime, wantsDateSeparator } from "../../DateUtils";
@@ -191,7 +191,7 @@ export default class HTMLExporter extends Exporter {
</section>
<div id="snackbar"/>
</body>
- </html>`
+ </html>`;
}
protected getAvatarURL(event: MatrixEvent): string {
@@ -236,32 +236,35 @@ export default class HTMLExporter extends Exporter {
const hasAvatar = !!this.getAvatarURL(mxEv);
if (hasAvatar) await this.saveAvatarIfNeeded(mxEv);
- const eventTile = <div className="mx_Export_EventWrapper" id={mxEv.getId()}>
- <MatrixClientContext.Provider value = {this.client}>
- <EventTile
- mxEvent={mxEv}
- continuation={continuation}
- isRedacted={mxEv.isRedacted()}
- replacingEventId={mxEv.replacingEventId()}
- forExport={true}
- readReceipts={null}
- readReceiptMap={null}
- showUrlPreview={false}
- checkUnmounting={() => false}
- isTwelveHour={false}
- last={false}
- lastInSection={false}
- permalinkCreator={this.permalinkCreator}
- lastSuccessful={false}
- isSelectedEvent={false}
- getRelationsForEvent={null}
- showReactions={false}
- layout={Layout.Group}
- enableFlair={false}
- showReadReceipts={false}
- />
- </MatrixClientContext.Provider>
- </div>
+ const eventTile = (
+ <div className="mx_Export_EventWrapper" id={mxEv.getId()}>
+ <MatrixClientContext.Provider value={this.client}>
+ <EventTile
+ mxEvent={mxEv}
+ continuation={continuation}
+ isRedacted={mxEv.isRedacted()}
+ replacingEventId={mxEv.replacingEventId()}
+ forExport={true}
+ readReceipts={null}
+ readReceiptMap={null}
+ showUrlPreview={false}
+ checkUnmounting={() => false}
+ isTwelveHour={false}
+ last={false}
+ lastInSection={false}
+ permalinkCreator={this.permalinkCreator}
+ lastSuccessful={false}
+ isSelectedEvent={false}
+ getRelationsForEvent={null}
+ showReactions={false}
+ layout={Layout.Group}
+ enableFlair={false}
+ showReadReceipts={false}
+ />
+ </MatrixClientContext.Provider>
+ </div>
+ );
+
let eventTileMarkup = renderToStaticMarkup(eventTile);
if (filePath) {
const mxc = mxEv.getContent().url || mxEv.getContent().file?.url;
@@ -282,7 +285,7 @@ export default class HTMLExporter extends Exporter {
body: `*${text}*`,
format: "org.matrix.custom.html",
formatted_body: `<em>${text}</em>`,
- }
+ };
const modifiedEvent = new MatrixEvent();
modifiedEvent.event = mxEv.event;
modifiedEvent.sender = mxEv.sender;
@@ -367,7 +370,7 @@ export default class HTMLExporter extends Exporter {
if (this.cancelled) {
console.info("Export cancelled successfully");
} else {
- console.info("Export successful!")
+ console.info("Export successful!");
console.log(`Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
}
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index 5c3b44da1b..37f5724289 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -7,7 +7,6 @@ import { exportTypes } from "./exportUtils";
import { exportOptions } from "./exportUtils";
import { EventType } from "matrix-js-sdk/src/@types/event";
-
export default class JSONExporter extends Exporter {
protected totalSize: number;
protected messages: any[];
@@ -32,7 +31,7 @@ export default class JSONExporter extends Exporter {
export_date: exportDate,
exported_by: exporterName,
messages: this.messages,
- }
+ };
return JSON.stringify(jsonObject, null, 2);
}
@@ -90,11 +89,11 @@ export default class JSONExporter extends Exporter {
if (this.cancelled) {
console.info("Export cancelled successfully");
} else {
- console.info("Export successful!")
+ console.info("Export successful!");
console.log(`Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
}
- this.cleanUp()
+ this.cleanUp();
}
}
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index d6d686a841..0ab9407415 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -8,7 +8,6 @@ import { exportTypes } from "./exportUtils";
import { exportOptions } from "./exportUtils";
import { textForEvent } from "../../TextForEvent";
-
export default class PlainTextExporter extends Exporter {
protected totalSize: number;
protected mediaOmitText: string;
@@ -21,7 +20,7 @@ export default class PlainTextExporter extends Exporter {
: _t("Media omitted - file size limit exceeded");
}
- protected textForReplyEvent = (ev : MatrixEvent) => {
+ protected textForReplyEvent = (ev: MatrixEvent) => {
const REPLY_REGEX = /> <(.*?)>(.*?)\n\n(.*)/;
const REPLY_SOURCE_MAX_LENGTH = 32;
const content = ev.getContent();
@@ -36,7 +35,7 @@ export default class PlainTextExporter extends Exporter {
rplSource = match[2].substring(1, REPLY_SOURCE_MAX_LENGTH);
// Get the first non-blank line from the source.
- const lines = rplSource.split('\n').filter((line) => !/^\s*$/.test(line))
+ const lines = rplSource.split('\n').filter((line) => !/^\s*$/.test(line));
if (lines.length > 0) {
// Cut to a maximum length.
rplSource = lines[0].substring(0, REPLY_SOURCE_MAX_LENGTH);
@@ -52,7 +51,7 @@ export default class PlainTextExporter extends Exporter {
}
return `<${rplName}${rplSource}> ${rplText}`;
- }
+ };
protected _textForEvent = async (mxEv: MatrixEvent) => {
const senderDisplayName = mxEv.sender && mxEv.sender.name ? mxEv.sender.name : mxEv.getSender();
@@ -76,7 +75,7 @@ export default class PlainTextExporter extends Exporter {
}
if (this.isReply(mxEv)) return senderDisplayName + ": " + this.textForReplyEvent(mxEv) + mediaText;
else return textForEvent(mxEv) + mediaText;
- }
+ };
protected async createOutput(events: MatrixEvent[]) {
let content = "";
@@ -115,7 +114,7 @@ export default class PlainTextExporter extends Exporter {
if (this.cancelled) {
console.info("Export cancelled successfully");
} else {
- console.info("Export successful!")
+ console.info("Export successful!");
console.log(`Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
}
diff --git a/src/utils/exportUtils/ZipStream.ts b/src/utils/exportUtils/ZipStream.ts
index 4cb9060915..098e2ed12c 100644
--- a/src/utils/exportUtils/ZipStream.ts
+++ b/src/utils/exportUtils/ZipStream.ts
@@ -13,7 +13,6 @@ type TypedArray =
| Float32Array
| Float64Array;
-
/**
* 32-bit cyclic redundancy check, or CRC-32 - checksum
*/
@@ -23,8 +22,8 @@ class Crc32 {
constructor() {
this.crc = -1;
this.table = (() => {
- let i
- let j
+ let i;
+ let j;
let t;
const table = [];
@@ -37,8 +36,8 @@ class Crc32 {
}
table[i] = t;
}
- return table
- })()
+ return table;
+ })();
}
append(data: TypedArray) {
@@ -55,25 +54,24 @@ class Crc32 {
}
}
-
type DataHelper = {
array: Uint8Array,
view: DataView,
-}
+};
const getDataHelper = (byteLength: number): DataHelper => {
- const uint8 = new Uint8Array(byteLength)
+ const uint8 = new Uint8Array(byteLength);
return {
array: uint8,
view: new DataView(uint8.buffer),
};
-}
+};
type FileLike = File & {
directory: string,
comment: string,
stream(): ReadableStream,
-}
+};
type ZipObj = {
crc?: Crc32,
@@ -88,7 +86,7 @@ type ZipObj = {
fileLike: FileLike,
level: number,
directory: boolean,
-}
+};
const pump = (zipObj: ZipObj) => zipObj.reader ? zipObj.reader.read().then(chunk => {
if (zipObj.crc) {
@@ -124,7 +122,7 @@ export default function streamToZIP(underlyingSource: UnderlyingSource) {
desiredSize: null,
error(err) {
- console.error(err)
+ console.error(err);
},
enqueue(fileLike: FileLike) {
@@ -155,8 +153,8 @@ export default function streamToZIP(underlyingSource: UnderlyingSource) {
offset,
writeHeader() {
- const header = getDataHelper(26)
- const data = getDataHelper(30 + nameBuf.length)
+ const header = getDataHelper(26);
+ const data = getDataHelper(30 + nameBuf.length);
zipObject.offset = offset;
zipObject.header = header;
@@ -200,10 +198,10 @@ export default function streamToZIP(underlyingSource: UnderlyingSource) {
ctrl.enqueue(footer.array);
offset += zipObject.compressedLength + 16;
- next()
+ next();
},
fileLike,
- }
+ };
if (!activeZipObject) {
activeZipObject = zipObject;
@@ -220,11 +218,11 @@ export default function streamToZIP(underlyingSource: UnderlyingSource) {
if (!activeZipObject) closeZip();
closed = true;
},
- }
+ };
function closeZip() {
let length = 0;
- let index = 0
+ let index = 0;
let indexFilename;
let file;
@@ -232,7 +230,7 @@ export default function streamToZIP(underlyingSource: UnderlyingSource) {
file = files[filenames[indexFilename]];
length += 46 + file.nameBuf.length + file.comment.length;
}
- const data = getDataHelper(length + 22)
+ const data = getDataHelper(length + 22);
for (indexFilename = 0; indexFilename < filenames.length; indexFilename++) {
file = files[filenames[indexFilename]];
data.view.setUint32(index, 0x504b0102);
@@ -275,7 +273,7 @@ export default function streamToZIP(underlyingSource: UnderlyingSource) {
return processNextChunk() || (
underlyingSource.pull &&
Promise.resolve(underlyingSource.pull(zipWriter))
- )
+ );
},
});
}
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index 0a3ccfb935..7d07f19998 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -19464,7 +19464,7 @@ a.mx_RoomPreviewBar_inviter {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
-`
+`;
const customCSS = `
#snackbar {
display: flex;
@@ -19567,8 +19567,8 @@ img {
overflow: hidden;
}
-`
+`;
-const markdownCSS = `.markdown-body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;overflow:hidden;font-family:'Helvetica Neue',Helvetica,'Segoe UI',Arial,freesans,sans-serif;font-size:16px;line-height:1.6;word-wrap:break-word}.markdown-body *{-moz-box-sizing:border-box;box-sizing:border-box}.markdown-body>:first-child{margin-top:0!important}.markdown-body>:last-child{margin-bottom:0!important}.markdown-body a{background:0 0;color:#4183c4;text-decoration:none}.markdown-body a:active,.markdown-body a:hover{outline:0}.markdown-body a:active,.markdown-body a:focus,.markdown-body a:hover{text-decoration:underline}.markdown-body strong{font-weight:700}.markdown-body em{font-style:italic}.markdown-body blockquote,.markdown-body dl,.markdown-body ol,.markdown-body p,.markdown-body pre,.markdown-body table,.markdown-body ul{margin-top:0;margin-bottom:16px}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{font-family:'Helvetica Neue',Helvetica,'Segoe UI',Arial,freesans,sans-serif;position:relative;margin-top:1em;margin-bottom:16px;font-weight:700;line-height:1.4}.markdown-body h1,.markdown-body h2{padding-bottom:.3em;border-bottom:1px solid #eee}.markdown-body h1{font-size:2.25em;line-height:1.2}.markdown-body h2{font-size:1.75em;line-height:1.225}.markdown-body h3{font-size:1.5em}.markdown-body h4{font-size:1.25em}.markdown-body h5{font-size:1em}.markdown-body h6{font-size:1em;color:#777}.markdown-body code,.markdown-body kbd,.markdown-body pre{font-family:Consolas,'Liberation Mono',Menlo,Courier,monospace}.markdown-body code{padding:.2em 0;margin:0;font-size:85%;background-color:rgba(0,0,0,.04);border-radius:3px}.markdown-body code:after,.markdown-body code:before{letter-spacing:-.2em;content:'\\00a0'}.markdown-body pre{word-wrap:normal;padding:16px;overflow:auto;font-size:85%;line-height:1.45;background-color:#f7f7f7;border-radius:3px}.markdown-body pre code{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background:0 0}.markdown-body pre code:after,.markdown-body pre code:before{content:normal}.markdown-body pre>code{font-size:1em;word-break:normal;white-space:pre;border:0}.markdown-body kbd{background-color:#e7e7e7;background-image:-webkit-linear-gradient(#fefefe,#e7e7e7);background-image:linear-gradient(#fefefe,#e7e7e7);background-repeat:repeat-x;display:inline-block;padding:5px 5px 1px;margin:0 1px;font-size:11px;line-height:10px;color:#000;border:1px solid #cfcfcf;border-radius:2px;box-shadow:0 1px 0 #ccc}.markdown-body hr:after,.markdown-body hr:before{display:table;content:''}.markdown-body input{color:inherit;font:inherit;margin:0;font-size:13px;line-height:1.4;font-family:Helvetica,Arial,freesans,clean,sans-serif,'Segoe UI Emoji','Segoe UI Symbol'}.markdown-body input[disabled]{cursor:default}.markdown-body input[type=checkbox]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0}.markdown-body blockquote{margin:0 0 16px;padding:0 15px;color:#777;border-left:4px solid #ddd}.markdown-body blockquote>:first-child{margin-top:0}.markdown-body blockquote>:last-child{margin-bottom:0}.markdown-body img{border:0;max-width:100%;-moz-box-sizing:border-box;box-sizing:border-box}.markdown-body hr{-moz-box-sizing:content-box;box-sizing:content-box;overflow:hidden;background:#e7e7e7;height:4px;padding:0;margin:16px 0;border:0}.markdown-body hr:after{clear:both}.markdown-body td,.markdown-body th{padding:0}.markdown-body table{border-collapse:collapse;border-spacing:0;display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}.markdown-body table td,.markdown-body table th{padding:6px 13px;border:1px solid #ddd}.markdown-body table th{font-weight:700}.markdown-body table tr{background-color:#fff;border-top:1px solid #ccc}.markdown-body table tr:nth-child(2n){background-color:#f8f8f8}.markdown-body ol,.markdown-body ul{padding:0 0 0 2em}.markdown-body ol ol,.markdown-body ul ol{list-style-type:lower-roman}.markdown-body ol ol,.markdown-body ol ul,.markdown-body ul ol,.markdown-body ul ul{margin-top:0;margin-bottom:0}.markdown-body ol ol ol,.markdown-body ol ul ol,.markdown-body ul ol ol,.markdown-body ul ul ol{list-style-type:lower-alpha}.markdown-body li>p{margin-top:16px}.markdown-body dd{margin-left:0}.markdown-body dl{padding:0}.markdown-body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:700}.markdown-body dl dd{padding:0 16px;margin-bottom:16px}`
+const markdownCSS = `.markdown-body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;overflow:hidden;font-family:'Helvetica Neue',Helvetica,'Segoe UI',Arial,freesans,sans-serif;font-size:16px;line-height:1.6;word-wrap:break-word}.markdown-body *{-moz-box-sizing:border-box;box-sizing:border-box}.markdown-body>:first-child{margin-top:0!important}.markdown-body>:last-child{margin-bottom:0!important}.markdown-body a{background:0 0;color:#4183c4;text-decoration:none}.markdown-body a:active,.markdown-body a:hover{outline:0}.markdown-body a:active,.markdown-body a:focus,.markdown-body a:hover{text-decoration:underline}.markdown-body strong{font-weight:700}.markdown-body em{font-style:italic}.markdown-body blockquote,.markdown-body dl,.markdown-body ol,.markdown-body p,.markdown-body pre,.markdown-body table,.markdown-body ul{margin-top:0;margin-bottom:16px}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{font-family:'Helvetica Neue',Helvetica,'Segoe UI',Arial,freesans,sans-serif;position:relative;margin-top:1em;margin-bottom:16px;font-weight:700;line-height:1.4}.markdown-body h1,.markdown-body h2{padding-bottom:.3em;border-bottom:1px solid #eee}.markdown-body h1{font-size:2.25em;line-height:1.2}.markdown-body h2{font-size:1.75em;line-height:1.225}.markdown-body h3{font-size:1.5em}.markdown-body h4{font-size:1.25em}.markdown-body h5{font-size:1em}.markdown-body h6{font-size:1em;color:#777}.markdown-body code,.markdown-body kbd,.markdown-body pre{font-family:Consolas,'Liberation Mono',Menlo,Courier,monospace}.markdown-body code{padding:.2em 0;margin:0;font-size:85%;background-color:rgba(0,0,0,.04);border-radius:3px}.markdown-body code:after,.markdown-body code:before{letter-spacing:-.2em;content:'\\00a0'}.markdown-body pre{word-wrap:normal;padding:16px;overflow:auto;font-size:85%;line-height:1.45;background-color:#f7f7f7;border-radius:3px}.markdown-body pre code{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background:0 0}.markdown-body pre code:after,.markdown-body pre code:before{content:normal}.markdown-body pre>code{font-size:1em;word-break:normal;white-space:pre;border:0}.markdown-body kbd{background-color:#e7e7e7;background-image:-webkit-linear-gradient(#fefefe,#e7e7e7);background-image:linear-gradient(#fefefe,#e7e7e7);background-repeat:repeat-x;display:inline-block;padding:5px 5px 1px;margin:0 1px;font-size:11px;line-height:10px;color:#000;border:1px solid #cfcfcf;border-radius:2px;box-shadow:0 1px 0 #ccc}.markdown-body hr:after,.markdown-body hr:before{display:table;content:''}.markdown-body input{color:inherit;font:inherit;margin:0;font-size:13px;line-height:1.4;font-family:Helvetica,Arial,freesans,clean,sans-serif,'Segoe UI Emoji','Segoe UI Symbol'}.markdown-body input[disabled]{cursor:default}.markdown-body input[type=checkbox]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0}.markdown-body blockquote{margin:0 0 16px;padding:0 15px;color:#777;border-left:4px solid #ddd}.markdown-body blockquote>:first-child{margin-top:0}.markdown-body blockquote>:last-child{margin-bottom:0}.markdown-body img{border:0;max-width:100%;-moz-box-sizing:border-box;box-sizing:border-box}.markdown-body hr{-moz-box-sizing:content-box;box-sizing:content-box;overflow:hidden;background:#e7e7e7;height:4px;padding:0;margin:16px 0;border:0}.markdown-body hr:after{clear:both}.markdown-body td,.markdown-body th{padding:0}.markdown-body table{border-collapse:collapse;border-spacing:0;display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}.markdown-body table td,.markdown-body table th{padding:6px 13px;border:1px solid #ddd}.markdown-body table th{font-weight:700}.markdown-body table tr{background-color:#fff;border-top:1px solid #ccc}.markdown-body table tr:nth-child(2n){background-color:#f8f8f8}.markdown-body ol,.markdown-body ul{padding:0 0 0 2em}.markdown-body ol ol,.markdown-body ul ol{list-style-type:lower-roman}.markdown-body ol ol,.markdown-body ol ul,.markdown-body ul ol,.markdown-body ul ul{margin-top:0;margin-bottom:0}.markdown-body ol ol ol,.markdown-body ol ul ol,.markdown-body ul ol ol,.markdown-body ul ul ol{list-style-type:lower-alpha}.markdown-body li>p{margin-top:16px}.markdown-body dd{margin-left:0}.markdown-body dl{padding:0}.markdown-body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:700}.markdown-body dl dd{padding:0 16px;margin-bottom:16px}`;
export default lightCSS + markdownCSS + customCSS;
diff --git a/src/utils/exportUtils/exportJS.ts b/src/utils/exportUtils/exportJS.ts
index 2f7ba550e7..21b10b50d5 100644
--- a/src/utils/exportUtils/exportJS.ts
+++ b/src/utils/exportUtils/exportJS.ts
@@ -24,4 +24,4 @@ document.querySelectorAll('.mx_reply_anchor').forEach(element => {
})
}
-`
+`;
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 7587ca4524..6fa5ab9869 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -22,7 +22,7 @@ export const textForFormat = (format: string): string => {
case exportFormats.PLAIN_TEXT:
return _t("Plain Text");
}
-}
+};
export const textForType = (type: string): string => {
switch (type) {
@@ -35,7 +35,7 @@ export const textForType = (type: string): string => {
// case exportTypes.START_DATE:
// return _t("From a specific date");
}
-}
+};
export interface exportOptions {
startDate?: number;
From 6ca664636e523d83a45bb610c1e24053cef09c51 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 2 Jul 2021 10:23:25 +0530
Subject: [PATCH 121/176] Display progress
---
src/components/views/dialogs/ExportDialog.tsx | 5 +++++
src/utils/exportUtils/Exporter.ts | 18 +++++++++++----
src/utils/exportUtils/HtmlExport.tsx | 22 ++++++++++++-------
src/utils/exportUtils/JSONExport.ts | 13 ++++++++---
src/utils/exportUtils/PlainTextExport.ts | 19 +++++++++++-----
5 files changed, 56 insertions(+), 21 deletions(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index ff542bfbf4..d82bc1efd8 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -29,6 +29,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
const [exportType, setExportType] = useState(exportTypes.TIMELINE);
const [includeAttachments, setAttachments] = useState(false);
const [isExporting, setExporting] = useState(false);
+ const [exportProgressText, setExportProgressText] = useState("");
const [numberOfMessages, setNumberOfMessages] = useState<number>(100);
const [sizeLimit, setSizeLimit] = useState<number | null>(8);
const sizeLimitRef = useRef<Field>();
@@ -58,6 +59,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
room,
exportTypes[exportType],
exportOptions,
+ setExportProgressText,
),
);
break;
@@ -67,6 +69,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
room,
exportTypes[exportType],
exportOptions,
+ setExportProgressText,
),
);
break;
@@ -76,6 +79,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
room,
exportTypes[exportType],
exportOptions,
+ setExportProgressText,
),
);
break;
@@ -352,6 +356,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
onFinished={onFinished}
fixedWidth={true}
>
+ <p> { exportProgressText } </p>
<DialogButtons
primaryButton={_t("Cancel")}
primaryButtonClass="danger"
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 7d7b1bed16..3da058233d 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -26,7 +26,8 @@ export default abstract class Exporter {
protected constructor(
protected room: Room,
protected exportType: exportTypes,
- protected exportOptions?: exportOptions,
+ protected exportOptions: exportOptions,
+ protected setProgressText: React.Dispatch<React.SetStateAction<string>>,
) {
this.cancelled = false;
this.files = [];
@@ -40,6 +41,11 @@ export default abstract class Exporter {
return e.returnValue = "Are you sure you want to exit during this export?";
}
+ protected updateProgress(progress: string, log = true, show = true): void {
+ if (log) console.log(progress);
+ if (show) this.setProgressText(progress);
+ }
+
protected addFile(filePath: string, blob: Blob): void {
const file = {
name: filePath,
@@ -57,7 +63,7 @@ export default abstract class Exporter {
// Create a writable stream to the directory
this.fileStream = streamSaver.createWriteStream(filename);
- if (!this.cancelled) console.info("Generating a ZIP...");
+ if (!this.cancelled) this.updateProgress("Generating a ZIP...");
else return this.cleanUp();
this.writer = this.fileStream.getWriter();
@@ -72,7 +78,7 @@ export default abstract class Exporter {
if (this.cancelled) return this.cleanUp();
- console.info("Writing to the file system...");
+ this.updateProgress("Writing to the file system...");
const reader = readableZipStream.getReader();
await this.pumpToFileStream(reader);
@@ -172,7 +178,11 @@ export default abstract class Exporter {
}
events.push(mxEv);
}
- console.log("Fetched " + events.length + " events so far.");
+ this.updateProgress(
+ ("Fetched " + events.length + " events ") + (this.exportType === exportTypes.LAST_N_MESSAGES
+ ? `out of ${this.exportOptions.numberOfMessages}...`
+ : "so far..."),
+ );
prevToken = res.end;
}
// Reverse the events so that we preserve the order
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 3c19c4280b..fc963a27b8 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -27,8 +27,13 @@ export default class HTMLExporter extends Exporter {
protected totalSize: number;
protected mediaOmitText: string;
- constructor(room: Room, exportType: exportTypes, exportOptions: exportOptions) {
- super(room, exportType, exportOptions);
+ constructor(
+ room: Room,
+ exportType: exportTypes,
+ exportOptions: exportOptions,
+ setProgressText: React.Dispatch<React.SetStateAction<string>>,
+ ) {
+ super(room, exportType, exportOptions, setProgressText);
this.avatars = new Map<string, boolean>();
this.permalinkCreator = new RoomPermalinkCreator(this.room);
this.totalSize = 0;
@@ -328,6 +333,7 @@ export default class HTMLExporter extends Exporter {
let prevEvent = null;
for (let i = 0; i < events.length; i++) {
const event = events[i];
+ if (i % 100 == 0) this.updateProgress(`Processing event ${i ? i : 1} out of ${events.length}`, false, true);
if (this.cancelled) return this.cleanUp();
if (!haveTileForEvent(event)) continue;
@@ -343,16 +349,16 @@ export default class HTMLExporter extends Exporter {
}
public async export() {
- console.info("Starting export process...");
- console.info("Fetching events...");
+ this.updateProgress("Starting export process...", true, false);
+ this.updateProgress("Fetching events...");
const fetchStart = performance.now();
const res = await this.getRequiredEvents();
const fetchEnd = performance.now();
- console.log(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000}s`);
+ this.updateProgress(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000}s`, true, false);
- console.info("Creating HTML...");
+ this.updateProgress("Creating HTML...");
const html = await this.createHTML(res);
this.addFile("index.html", new Blob([html]));
@@ -370,8 +376,8 @@ export default class HTMLExporter extends Exporter {
if (this.cancelled) {
console.info("Export cancelled successfully");
} else {
- console.info("Export successful!");
- console.log(`Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+ this.updateProgress("Export successful!");
+ this.updateProgress(`Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
}
this.cleanUp();
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index 37f5724289..7b2a4f57a9 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -11,8 +11,13 @@ export default class JSONExporter extends Exporter {
protected totalSize: number;
protected messages: any[];
- constructor(room: Room, exportType: exportTypes, exportOptions: exportOptions) {
- super(room, exportType, exportOptions);
+ constructor(
+ room: Room,
+ exportType: exportTypes,
+ exportOptions: exportOptions,
+ setProgressText: React.Dispatch<React.SetStateAction<string>>,
+ ) {
+ super(room, exportType, exportOptions, setProgressText);
this.totalSize = 0;
this.messages = [];
}
@@ -55,7 +60,9 @@ export default class JSONExporter extends Exporter {
}
protected async createOutput(events: MatrixEvent[]) {
- for (const event of events) {
+ for (let i = 0; i < events.length; i++) {
+ const event = events[i];
+ if (i % 100 == 0) this.updateProgress(`Processing event ${i ? i : 1} out of ${events.length}`, false, true);
if (this.cancelled) return this.cleanUp();
if (!haveTileForEvent(event)) continue;
this.messages.push(await this.getJSONString(event));
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 0ab9407415..c437c52de9 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -12,8 +12,13 @@ export default class PlainTextExporter extends Exporter {
protected totalSize: number;
protected mediaOmitText: string;
- constructor(room: Room, exportType: exportTypes, exportOptions: exportOptions) {
- super(room, exportType, exportOptions);
+ constructor(
+ room: Room,
+ exportType: exportTypes,
+ exportOptions: exportOptions,
+ setProgressText: React.Dispatch<React.SetStateAction<string>>,
+ ) {
+ super(room, exportType, exportOptions, setProgressText);
this.totalSize = 0;
this.mediaOmitText = !this.exportOptions.attachmentsIncluded
? _t("Media omitted")
@@ -79,7 +84,9 @@ export default class PlainTextExporter extends Exporter {
protected async createOutput(events: MatrixEvent[]) {
let content = "";
- for (const event of events) {
+ for (let i = 0; i < events.length; i++) {
+ const event = events[i];
+ if (i % 100 == 0) this.updateProgress(`Processing event ${i ? i : 1} out of ${events.length}`, false, true);
if (this.cancelled) return this.cleanUp();
if (!haveTileForEvent(event)) continue;
const textForEvent = await this._textForEvent(event);
@@ -89,8 +96,8 @@ export default class PlainTextExporter extends Exporter {
}
public async export() {
- console.info("Starting export process...");
- console.info("Fetching events...");
+ this.updateProgress("Starting export process...");
+ this.updateProgress("Fetching events...");
const fetchStart = performance.now();
const res = await this.getRequiredEvents();
@@ -98,7 +105,7 @@ export default class PlainTextExporter extends Exporter {
console.log(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000}s`);
- console.info("Creating output...");
+ this.updateProgress("Creating output...");
const text = await this.createOutput(res);
if (this.files.length) {
From f2e67604e733c8ed972dc0c44567bb059914dbc1 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 2 Jul 2021 10:49:24 +0530
Subject: [PATCH 122/176] Delint
---
.../views/messages/DateSeparator.tsx | 2 +-
src/utils/exportUtils/ZipStream.ts | 32 +++++++++----------
2 files changed, 17 insertions(+), 17 deletions(-)
diff --git a/src/components/views/messages/DateSeparator.tsx b/src/components/views/messages/DateSeparator.tsx
index fa363c7c4c..d66fcbf118 100644
--- a/src/components/views/messages/DateSeparator.tsx
+++ b/src/components/views/messages/DateSeparator.tsx
@@ -35,7 +35,7 @@ function getDaysArray(): string[] {
interface IProps {
ts: number;
- forExport?: boolean
+ forExport?: boolean;
}
@replaceableComponent("views.messages.DateSeparator")
diff --git a/src/utils/exportUtils/ZipStream.ts b/src/utils/exportUtils/ZipStream.ts
index 098e2ed12c..04cd61fb06 100644
--- a/src/utils/exportUtils/ZipStream.ts
+++ b/src/utils/exportUtils/ZipStream.ts
@@ -55,8 +55,8 @@ class Crc32 {
}
type DataHelper = {
- array: Uint8Array,
- view: DataView,
+ array: Uint8Array;
+ view: DataView;
};
const getDataHelper = (byteLength: number): DataHelper => {
@@ -68,24 +68,24 @@ const getDataHelper = (byteLength: number): DataHelper => {
};
type FileLike = File & {
- directory: string,
- comment: string,
- stream(): ReadableStream,
+ directory: string;
+ comment: string;
+ stream(): ReadableStream;
};
type ZipObj = {
crc?: Crc32,
- uncompressedLength: number,
- compressedLength: number,
- ctrl: ReadableStreamDefaultController,
- writeFooter: Function,
- writeHeader: Function,
- reader?: ReadableStreamDefaultReader,
- offset: number
- header?: DataHelper,
- fileLike: FileLike,
- level: number,
- directory: boolean,
+ uncompressedLength: number;
+ compressedLength: number;
+ ctrl: ReadableStreamDefaultController;
+ writeFooter: Function;
+ writeHeader: Function;
+ reader?: ReadableStreamDefaultReader;
+ offset: number;
+ header?: DataHelper;
+ fileLike: FileLike;
+ level: number;
+ directory: boolean;
};
const pump = (zipObj: ZipObj) => zipObj.reader ? zipObj.reader.read().then(chunk => {
From 3dcc7738f68a5ed13936696f3099014f21581221 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 2 Jul 2021 10:53:19 +0530
Subject: [PATCH 123/176] Add missing semicolon
---
src/utils/exportUtils/ZipStream.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/utils/exportUtils/ZipStream.ts b/src/utils/exportUtils/ZipStream.ts
index 04cd61fb06..bf8020b7b6 100644
--- a/src/utils/exportUtils/ZipStream.ts
+++ b/src/utils/exportUtils/ZipStream.ts
@@ -74,7 +74,7 @@ type FileLike = File & {
};
type ZipObj = {
- crc?: Crc32,
+ crc?: Crc32;
uncompressedLength: number;
compressedLength: number;
ctrl: ReadableStreamDefaultController;
From 87c624d08578de0afab1a4505d0706c243b39c70 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 2 Jul 2021 16:52:33 +0530
Subject: [PATCH 124/176] Use ref for progress updates
---
src/components/views/dialogs/ExportDialog.tsx | 10 +++++-----
src/utils/exportUtils/Exporter.ts | 5 +++--
src/utils/exportUtils/HtmlExport.tsx | 8 ++++----
src/utils/exportUtils/JSONExport.ts | 7 ++++---
src/utils/exportUtils/PlainTextExport.ts | 7 ++++---
5 files changed, 20 insertions(+), 17 deletions(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index d82bc1efd8..64cac3364a 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -29,11 +29,11 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
const [exportType, setExportType] = useState(exportTypes.TIMELINE);
const [includeAttachments, setAttachments] = useState(false);
const [isExporting, setExporting] = useState(false);
- const [exportProgressText, setExportProgressText] = useState("");
const [numberOfMessages, setNumberOfMessages] = useState<number>(100);
const [sizeLimit, setSizeLimit] = useState<number | null>(8);
const sizeLimitRef = useRef<Field>();
const messageCountRef = useRef<Field>();
+ const exportProgressRef = useRef<HTMLParagraphElement>();
const [displayCancel, setCancelWarning] = useState(false);
const [exportCancelled, setExportCancelled] = useState(false);
const [exportSuccessful, setExportSuccessful] = useState(false);
@@ -59,7 +59,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
room,
exportTypes[exportType],
exportOptions,
- setExportProgressText,
+ exportProgressRef,
),
);
break;
@@ -69,7 +69,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
room,
exportTypes[exportType],
exportOptions,
- setExportProgressText,
+ exportProgressRef,
),
);
break;
@@ -79,7 +79,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
room,
exportTypes[exportType],
exportOptions,
- setExportProgressText,
+ exportProgressRef,
),
);
break;
@@ -356,7 +356,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
onFinished={onFinished}
fixedWidth={true}
>
- <p> { exportProgressText } </p>
+ <p ref={exportProgressRef} />
<DialogButtons
primaryButton={_t("Cancel")}
primaryButtonClass="danger"
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 3da058233d..d2b9df23e0 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -10,6 +10,7 @@ import { MatrixClient } from "matrix-js-sdk";
import streamToZIP from "./ZipStream";
import * as ponyfill from "web-streams-polyfill/ponyfill";
import "web-streams-polyfill/ponyfill"; // to support streams API for older browsers
+import { MutableRefObject } from "react";
type FileStream = {
name: string;
@@ -27,7 +28,7 @@ export default abstract class Exporter {
protected room: Room,
protected exportType: exportTypes,
protected exportOptions: exportOptions,
- protected setProgressText: React.Dispatch<React.SetStateAction<string>>,
+ protected exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
this.cancelled = false;
this.files = [];
@@ -43,7 +44,7 @@ export default abstract class Exporter {
protected updateProgress(progress: string, log = true, show = true): void {
if (log) console.log(progress);
- if (show) this.setProgressText(progress);
+ if (show) this.exportProgressRef.current.innerText = progress;
}
protected addFile(filePath: string, blob: Blob): void {
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index fc963a27b8..51ca9877bf 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { MutableRefObject } from "react";
import Exporter from "./Exporter";
import { mediaFromMxc } from "../../customisations/Media";
import { Room } from "matrix-js-sdk/src/models/room";
@@ -31,9 +31,9 @@ export default class HTMLExporter extends Exporter {
room: Room,
exportType: exportTypes,
exportOptions: exportOptions,
- setProgressText: React.Dispatch<React.SetStateAction<string>>,
+ exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
- super(room, exportType, exportOptions, setProgressText);
+ super(room, exportType, exportOptions, exportProgressRef);
this.avatars = new Map<string, boolean>();
this.permalinkCreator = new RoomPermalinkCreator(this.room);
this.totalSize = 0;
@@ -333,7 +333,7 @@ export default class HTMLExporter extends Exporter {
let prevEvent = null;
for (let i = 0; i < events.length; i++) {
const event = events[i];
- if (i % 100 == 0) this.updateProgress(`Processing event ${i ? i : 1} out of ${events.length}`, false, true);
+ this.updateProgress(`Processing event ${i + 1} out of ${events.length}`, false, true);
if (this.cancelled) return this.cleanUp();
if (!haveTileForEvent(event)) continue;
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index 7b2a4f57a9..ed42936787 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -6,6 +6,7 @@ import { haveTileForEvent } from "../../components/views/rooms/EventTile";
import { exportTypes } from "./exportUtils";
import { exportOptions } from "./exportUtils";
import { EventType } from "matrix-js-sdk/src/@types/event";
+import { MutableRefObject } from "react";
export default class JSONExporter extends Exporter {
protected totalSize: number;
@@ -15,9 +16,9 @@ export default class JSONExporter extends Exporter {
room: Room,
exportType: exportTypes,
exportOptions: exportOptions,
- setProgressText: React.Dispatch<React.SetStateAction<string>>,
+ exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
- super(room, exportType, exportOptions, setProgressText);
+ super(room, exportType, exportOptions, exportProgressRef);
this.totalSize = 0;
this.messages = [];
}
@@ -62,7 +63,7 @@ export default class JSONExporter extends Exporter {
protected async createOutput(events: MatrixEvent[]) {
for (let i = 0; i < events.length; i++) {
const event = events[i];
- if (i % 100 == 0) this.updateProgress(`Processing event ${i ? i : 1} out of ${events.length}`, false, true);
+ this.updateProgress(`Processing event ${i + 1} out of ${events.length}`, false, true);
if (this.cancelled) return this.cleanUp();
if (!haveTileForEvent(event)) continue;
this.messages.push(await this.getJSONString(event));
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index c437c52de9..109fa78162 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -7,6 +7,7 @@ import { haveTileForEvent } from "../../components/views/rooms/EventTile";
import { exportTypes } from "./exportUtils";
import { exportOptions } from "./exportUtils";
import { textForEvent } from "../../TextForEvent";
+import { MutableRefObject } from "react";
export default class PlainTextExporter extends Exporter {
protected totalSize: number;
@@ -16,9 +17,9 @@ export default class PlainTextExporter extends Exporter {
room: Room,
exportType: exportTypes,
exportOptions: exportOptions,
- setProgressText: React.Dispatch<React.SetStateAction<string>>,
+ exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
- super(room, exportType, exportOptions, setProgressText);
+ super(room, exportType, exportOptions, exportProgressRef);
this.totalSize = 0;
this.mediaOmitText = !this.exportOptions.attachmentsIncluded
? _t("Media omitted")
@@ -86,7 +87,7 @@ export default class PlainTextExporter extends Exporter {
let content = "";
for (let i = 0; i < events.length; i++) {
const event = events[i];
- if (i % 100 == 0) this.updateProgress(`Processing event ${i ? i : 1} out of ${events.length}`, false, true);
+ this.updateProgress(`Processing event ${i + 1} out of ${events.length}`, false, true);
if (this.cancelled) return this.cleanUp();
if (!haveTileForEvent(event)) continue;
const textForEvent = await this._textForEvent(event);
From ed93bf4c770846b02fed5aa9ce0e473ae1fac8c6 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 19 Jul 2021 13:00:37 +0530
Subject: [PATCH 125/176] Reverse events in-place
---
src/utils/exportUtils/Exporter.ts | 6 ++++--
1 file changed, 4 insertions(+), 2 deletions(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index d2b9df23e0..6cee2543d6 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -154,7 +154,7 @@ export default abstract class Exporter {
let prevToken: string|null = null;
let limit = this.getLimit();
- let events: MatrixEvent[] = [];
+ const events: MatrixEvent[] = [];
while (limit) {
const eventsPerCrawl = Math.min(limit, 1000);
@@ -187,7 +187,9 @@ export default abstract class Exporter {
prevToken = res.end;
}
// Reverse the events so that we preserve the order
- events = events.reverse();
+ for (let i = 0; i < Math.floor(events.length/2); i++) {
+ [events[i], events[events.length - i - 1]] = [events[events.length - i - 1], events[i]];
+ }
const decryptionPromises = events
.filter(event => event.isEncrypted())
From f07402d234940740bbf2b34cc416131443a32346 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 19 Jul 2021 13:17:19 +0530
Subject: [PATCH 126/176] Fix types and precompute blob sizes to avoid
overflows
---
src/components/views/messages/MImageBody.tsx | 2 +-
src/utils/exportUtils/HtmlExport.tsx | 18 +++++++++++-------
src/utils/exportUtils/JSONExport.ts | 12 +++++++-----
src/utils/exportUtils/PlainTextExport.ts | 16 ++++++++++------
src/utils/exportUtils/ZipStream.ts | 4 ++--
5 files changed, 31 insertions(+), 21 deletions(-)
diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx
index 7987ed007d..ee18046678 100644
--- a/src/components/views/messages/MImageBody.tsx
+++ b/src/components/views/messages/MImageBody.tsx
@@ -179,7 +179,7 @@ export default class MImageBody extends React.Component<IProps, IState> {
};
protected getContentUrl(): string {
- const content = this.props.mxEvent.getContent();
+ const content: IMediaEventContent= this.props.mxEvent.getContent();
if (this.props.forExport) return content.url || content.file.url;
const media = mediaFromContent(content);
if (media.isEncrypted) {
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 51ca9877bf..e545a32a17 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -306,13 +306,17 @@ export default class HTMLExporter extends Exporter {
if (this.exportOptions.attachmentsIncluded) {
try {
const blob = await this.getMediaBlob(mxEv);
- this.totalSize += blob.size;
- const filePath = this.getFilePath(mxEv);
- eventTile = await this.getEventTile(mxEv, joined, filePath);
- if (this.totalSize > this.exportOptions.maxSize - 1024 * 512) {
- this.exportOptions.attachmentsIncluded = false;
+ if (this.totalSize + blob.size > this.exportOptions.maxSize) {
+ eventTile = await this.getEventTile(this.createModifiedEvent(this.mediaOmitText, mxEv), joined);
+ } else {
+ this.totalSize += blob.size;
+ const filePath = this.getFilePath(mxEv);
+ eventTile = await this.getEventTile(mxEv, joined, filePath);
+ if (this.totalSize == this.exportOptions.maxSize) {
+ this.exportOptions.attachmentsIncluded = false;
+ }
+ this.addFile(filePath, blob);
}
- this.addFile(filePath, blob);
} catch (e) {
console.log("Error while fetching file" + e);
eventTile = await this.getEventTile(
@@ -339,7 +343,7 @@ export default class HTMLExporter extends Exporter {
content += this._wantsDateSeparator(event, prevEvent) ? this.getDateSeparator(event) : "";
const shouldBeJoined = !this._wantsDateSeparator(event, prevEvent)
- && shouldFormContinuation(prevEvent, event);
+ && shouldFormContinuation(prevEvent, event, false);
const body = await this.createMessageBody(event, shouldBeJoined);
this.totalSize += Buffer.byteLength(body);
content += body;
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index ed42936787..417a7a40f4 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -45,11 +45,13 @@ export default class JSONExporter extends Exporter {
if (this.exportOptions.attachmentsIncluded && this.isAttachment(mxEv)) {
try {
const blob = await this.getMediaBlob(mxEv);
- this.totalSize += blob.size;
- const filePath = this.getFilePath(mxEv);
- this.addFile(filePath, blob);
- if (this.totalSize > this.exportOptions.maxSize - 1024 * 1024) {
- this.exportOptions.attachmentsIncluded = false;
+ if (this.totalSize + blob.size < this.exportOptions.maxSize) {
+ this.totalSize += blob.size;
+ const filePath = this.getFilePath(mxEv);
+ if (this.totalSize == this.exportOptions.maxSize) {
+ this.exportOptions.attachmentsIncluded = false;
+ }
+ this.addFile(filePath, blob);
}
} catch (err) {
console.log("Error fetching file: " + err);
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 109fa78162..00efab0f33 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -66,12 +66,16 @@ export default class PlainTextExporter extends Exporter {
if (this.exportOptions.attachmentsIncluded) {
try {
const blob = await this.getMediaBlob(mxEv);
- this.totalSize += blob.size;
- const filePath = this.getFilePath(mxEv);
- mediaText = " (" + _t("File Attached") + ")";
- this.addFile(filePath, blob);
- if (this.totalSize > this.exportOptions.maxSize - 1024 * 1024) {
- this.exportOptions.attachmentsIncluded = false;
+ if (this.totalSize + blob.size > this.exportOptions.maxSize) {
+ mediaText = ` (${this.mediaOmitText})`;
+ } else {
+ this.totalSize += blob.size;
+ const filePath = this.getFilePath(mxEv);
+ mediaText = " (" + _t("File Attached") + ")";
+ this.addFile(filePath, blob);
+ if (this.totalSize == this.exportOptions.maxSize) {
+ this.exportOptions.attachmentsIncluded = false;
+ }
}
} catch (error) {
mediaText = " (" + _t("Error fetching file") + ")";
diff --git a/src/utils/exportUtils/ZipStream.ts b/src/utils/exportUtils/ZipStream.ts
index bf8020b7b6..2ee355f09c 100644
--- a/src/utils/exportUtils/ZipStream.ts
+++ b/src/utils/exportUtils/ZipStream.ts
@@ -223,8 +223,8 @@ export default function streamToZIP(underlyingSource: UnderlyingSource) {
function closeZip() {
let length = 0;
let index = 0;
- let indexFilename;
- let file;
+ let indexFilename: number;
+ let file: any;
for (indexFilename = 0; indexFilename < filenames.length; indexFilename++) {
file = files[filenames[indexFilename]];
From 6d0fd0322e29a2e4552028689e37109d8e86652e Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 19 Jul 2021 13:23:55 +0530
Subject: [PATCH 127/176] Delint
---
src/components/views/elements/ReplyThread.tsx | 2 +-
src/utils/exportUtils/Exporter.ts | 4 ++--
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/components/views/elements/ReplyThread.tsx b/src/components/views/elements/ReplyThread.tsx
index 10cb5b1804..29b3d1b7f5 100644
--- a/src/components/views/elements/ReplyThread.tsx
+++ b/src/components/views/elements/ReplyThread.tsx
@@ -44,7 +44,7 @@ interface IProps {
layout?: Layout;
// Whether to always show a timestamp
alwaysShowTimestamps?: boolean;
- forExport?: boolean,
+ forExport?: boolean;
}
interface IState {
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 6cee2543d6..17e1af1660 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -6,7 +6,7 @@ import { exportOptions, exportTypes } from "./exportUtils";
import { decryptFile } from "../DecryptFile";
import { mediaFromContent } from "../../customisations/Media";
import { formatFullDateNoDay } from "../../DateUtils";
-import { MatrixClient } from "matrix-js-sdk";
+import { Direction, MatrixClient } from "matrix-js-sdk";
import streamToZIP from "./ZipStream";
import * as ponyfill from "web-streams-polyfill/ponyfill";
import "web-streams-polyfill/ponyfill"; // to support streams API for older browsers
@@ -158,7 +158,7 @@ export default abstract class Exporter {
while (limit) {
const eventsPerCrawl = Math.min(limit, 1000);
- const res: any = await this.client.createMessagesRequest(this.room.roomId, prevToken, eventsPerCrawl, "b");
+ const res: any = await this.client.createMessagesRequest(this.room.roomId, prevToken, eventsPerCrawl, Direction.Backward);
if (this.cancelled) {
this.cleanUp();
From c0d2dbe7fd203e9c3c081387d1b52810e5f2071d Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 19 Jul 2021 13:28:09 +0530
Subject: [PATCH 128/176] Delint once more
---
src/utils/exportUtils/Exporter.ts | 7 ++++++-
1 file changed, 6 insertions(+), 1 deletion(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 17e1af1660..5366436dab 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -158,7 +158,12 @@ export default abstract class Exporter {
while (limit) {
const eventsPerCrawl = Math.min(limit, 1000);
- const res: any = await this.client.createMessagesRequest(this.room.roomId, prevToken, eventsPerCrawl, Direction.Backward);
+ const res = await this.client.createMessagesRequest(
+ this.room.roomId,
+ prevToken,
+ eventsPerCrawl,
+ Direction.Backward,
+ );
if (this.cancelled) {
this.cleanUp();
From 98aa1fe6b3d15b9da6fc495c812cb79f1c8a4eed Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 20 Jul 2021 13:47:51 +0530
Subject: [PATCH 129/176] Move @types/streamsaver to devDependencies
---
package.json | 2 +-
yarn.lock | 8 ++++----
2 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/package.json b/package.json
index f9766198f7..6611505b4c 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,6 @@
},
"dependencies": {
"@babel/runtime": "^7.12.5",
- "@types/streamsaver": "^2.0.0",
"await-lock": "^2.1.0",
"blurhash": "^1.1.3",
"browser-encrypt-attachment": "^0.3.0",
@@ -145,6 +144,7 @@
"@types/react-dom": "^17.0.2",
"@types/react-transition-group": "^4.4.0",
"@types/sanitize-html": "^2.3.1",
+ "@types/streamsaver": "^2.0.1",
"@types/zxcvbn": "^4.4.0",
"@typescript-eslint/eslint-plugin": "^4.17.0",
"@typescript-eslint/parser": "^4.17.0",
diff --git a/yarn.lock b/yarn.lock
index 7c01d03dff..d018678631 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1709,10 +1709,10 @@
resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.0.tgz#7036640b4e21cc2f259ae826ce843d277dad8cff"
integrity sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw==
-"@types/streamsaver@^2.0.0":
- version "2.0.0"
- resolved "https://registry.yarnpkg.com/@types/streamsaver/-/streamsaver-2.0.0.tgz#2a6bdec0389f41a74c60091d37e84f8840d27ac9"
- integrity sha512-TzUEZk30QmNaS6GAhcOnH/Cl2mO7HCFhQUr6GpzvuoFziFCxmvuyLftHW79agJpZvIrqti9jSiDHMgflUwbejg==
+"@types/streamsaver@^2.0.1":
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/@types/streamsaver/-/streamsaver-2.0.1.tgz#fa5e5b891d1b282be3078c232a30ee004b8e0be0"
+ integrity sha512-I49NtT8w6syBI3Zg3ixCyygTHoTVMY0z2TMRcTgccdIsVd2MwlKk7ITLHLsJtgchUHcOd7QEARG9h0ifcA6l2Q==
"@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2":
version "2.0.3"
From 6dd3631a17cd8bbc16f586b26817558670f463ac Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 21 Jul 2021 11:48:37 +0530
Subject: [PATCH 130/176] Delint
---
src/components/views/dialogs/ExportDialog.tsx | 8 +++----
src/components/views/messages/MFileBody.tsx | 5 ++--
.../views/right_panel/RoomSummaryCard.tsx | 4 ++--
src/utils/exportUtils/HtmlExport.tsx | 24 +++++++++----------
src/utils/exportUtils/PlainTextExport.ts | 4 ++--
5 files changed, 22 insertions(+), 23 deletions(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 64cac3364a..b1de882950 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -193,7 +193,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
const exportTypeOptions = Object.keys(exportTypes).map((type) => {
return (
<option key={type} value={type}>
- {textForType(type)}
+ { textForType(type) }
</option>
);
});
@@ -229,7 +229,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
<p>{ _t("The export was cancelled successfully") }</p>
<DialogButtons
- primaryButton={ _t("Okay") }
+ primaryButton={_t("Okay")}
hasCancel={false}
onPrimaryButtonClick={onFinished}
/>
@@ -331,9 +331,9 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
fixedWidth={true}
>
<p>
- {_t(
+ { _t(
"Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
- )}
+ ) }
</p>
<DialogButtons
primaryButton={_t("Stop")}
diff --git a/src/components/views/messages/MFileBody.tsx b/src/components/views/messages/MFileBody.tsx
index e1cc1705d9..c2578625ac 100644
--- a/src/components/views/messages/MFileBody.tsx
+++ b/src/components/views/messages/MFileBody.tsx
@@ -125,7 +125,6 @@ export function presentableTextForFile(content: IContent, withSize = true): stri
interface IProps extends IBodyProps {
/* whether or not to show the default placeholder for the file. Defaults to true. */
showGenericPlaceholder: boolean;
- forExport?: boolean;
}
interface IState {
@@ -174,9 +173,9 @@ export default class MFileBody extends React.Component<IProps, IState> {
placeholder = (
<div className="mx_MFileBody_info">
<span className="mx_MFileBody_info_icon">
- {this.props.forExport ?
+ { this.props.forExport ?
<img alt="Attachment" className="mx_export_attach_icon" src="icons/attach.svg" />
- : null}
+ : null }
</span>
<span className="mx_MFileBody_info_filename">
{ presentableTextForFile(content, false) }
diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx
index b0d8070b8c..c1b4112423 100644
--- a/src/components/views/right_panel/RoomSummaryCard.tsx
+++ b/src/components/views/right_panel/RoomSummaryCard.tsx
@@ -287,8 +287,8 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
<Button className="mx_RoomSummaryCard_icon_settings" onClick={onRoomSettingsClick}>
{ _t("Room settings") }
</Button>
- <Button className="mx_RoomSummaryCard_icon_export" onClick = {onRoomExportClick}>
- {_t("Export chat")}
+ <Button className="mx_RoomSummaryCard_icon_export" onClick={onRoomExportClick}>
+ { _t("Export chat") }
</Button>
</Group>
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index e545a32a17..5b1b8ee8c7 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -63,7 +63,7 @@ export default class HTMLExporter extends Exporter {
name={this.room.name}
title={this.room.name}
url={blob ? avatarPath : null}
- resizeMethod={"crop"}
+ resizeMethod="crop"
/>
);
return renderToStaticMarkup(avatar);
@@ -83,31 +83,31 @@ export default class HTMLExporter extends Exporter {
const exportedText = renderToStaticMarkup(
<p>
- {_t(
+ { _t(
"This is the start of export of <roomName/>. Exported by <exporterDetails/> at %(exportDate)s.",
{
exportDate,
},
{
- roomName: () => <b>{this.room.name}</b>,
+ roomName: () => <b>{ this.room.name }</b>,
exporterDetails: () => (
<a
href={`https://matrix.to/#/${exporter}`}
target="_blank"
rel="noopener noreferrer"
>
- {exporterName ? (
+ { exporterName ? (
<>
- <b>{exporterName}</b>
- {exporter}
+ <b>{ exporterName }</b>
+ { exporter }
</>
) : (
- <b>{exporter}</b>
- )}
+ <b>{ exporter }</b>
+ ) }
</a>
),
},
- )}
+ ) }
</p>,
);
@@ -232,7 +232,7 @@ export default class HTMLExporter extends Exporter {
return renderToStaticMarkup(dateSeparator);
}
- protected _wantsDateSeparator(event: MatrixEvent, prevEvent: MatrixEvent) {
+ protected needsDateSeparator(event: MatrixEvent, prevEvent: MatrixEvent) {
if (prevEvent == null) return true;
return wantsDateSeparator(prevEvent.getDate(), event.getDate());
}
@@ -341,8 +341,8 @@ export default class HTMLExporter extends Exporter {
if (this.cancelled) return this.cleanUp();
if (!haveTileForEvent(event)) continue;
- content += this._wantsDateSeparator(event, prevEvent) ? this.getDateSeparator(event) : "";
- const shouldBeJoined = !this._wantsDateSeparator(event, prevEvent)
+ content += this.needsDateSeparator(event, prevEvent) ? this.getDateSeparator(event) : "";
+ const shouldBeJoined = !this.needsDateSeparator(event, prevEvent)
&& shouldFormContinuation(prevEvent, event, false);
const body = await this.createMessageBody(event, shouldBeJoined);
this.totalSize += Buffer.byteLength(body);
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 00efab0f33..feb4afe618 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -59,7 +59,7 @@ export default class PlainTextExporter extends Exporter {
return `<${rplName}${rplSource}> ${rplText}`;
};
- protected _textForEvent = async (mxEv: MatrixEvent) => {
+ protected plainTextForEvent = async (mxEv: MatrixEvent) => {
const senderDisplayName = mxEv.sender && mxEv.sender.name ? mxEv.sender.name : mxEv.getSender();
let mediaText = "";
if (this.isAttachment(mxEv)) {
@@ -94,7 +94,7 @@ export default class PlainTextExporter extends Exporter {
this.updateProgress(`Processing event ${i + 1} out of ${events.length}`, false, true);
if (this.cancelled) return this.cleanUp();
if (!haveTileForEvent(event)) continue;
- const textForEvent = await this._textForEvent(event);
+ const textForEvent = await this.plainTextForEvent(event);
content += textForEvent && `${new Date(event.getTs()).toLocaleString()} - ${textForEvent}\n`;
}
return content;
From c81bac1a4c9d004f1d1f7c4a48d08149f9939266 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 23 Jul 2021 10:47:40 +0530
Subject: [PATCH 131/176] Add try catch for event tile errors
---
src/components/views/messages/CallEvent.tsx | 4 +-
src/utils/exportUtils/HtmlExport.tsx | 56 ++++++++++++---------
2 files changed, 34 insertions(+), 26 deletions(-)
diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx
index c0be3b46bb..f760f29ea2 100644
--- a/src/components/views/messages/CallEvent.tsx
+++ b/src/components/views/messages/CallEvent.tsx
@@ -46,7 +46,7 @@ export default class CallEvent extends React.Component<IProps, IState> {
super(props);
this.state = {
- callState: this.props.callEventGrouper.state,
+ callState: this.props.callEventGrouper?.state,
silenced: false,
};
}
@@ -184,7 +184,7 @@ export default class CallEvent extends React.Component<IProps, IState> {
render() {
const event = this.props.mxEvent;
const sender = event.sender ? event.sender.name : event.getSender();
- const isVoice = this.props.callEventGrouper.isVoice;
+ const isVoice = this.props.callEventGrouper?.isVoice;
const callType = isVoice ? _t("Voice call") : _t("Video call");
const content = this.renderContent(this.state.callState);
const className = classNames({
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 5b1b8ee8c7..6f2394242c 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -301,33 +301,41 @@ export default class HTMLExporter extends Exporter {
protected async createMessageBody(mxEv: MatrixEvent, joined = false) {
let eventTile: string;
-
- if (this.isAttachment(mxEv)) {
- if (this.exportOptions.attachmentsIncluded) {
- try {
- const blob = await this.getMediaBlob(mxEv);
- if (this.totalSize + blob.size > this.exportOptions.maxSize) {
- eventTile = await this.getEventTile(this.createModifiedEvent(this.mediaOmitText, mxEv), joined);
- } else {
- this.totalSize += blob.size;
- const filePath = this.getFilePath(mxEv);
- eventTile = await this.getEventTile(mxEv, joined, filePath);
- if (this.totalSize == this.exportOptions.maxSize) {
- this.exportOptions.attachmentsIncluded = false;
+ try {
+ if (this.isAttachment(mxEv)) {
+ if (this.exportOptions.attachmentsIncluded) {
+ try {
+ const blob = await this.getMediaBlob(mxEv);
+ if (this.totalSize + blob.size > this.exportOptions.maxSize) {
+ eventTile = await this.getEventTile(
+ this.createModifiedEvent(this.mediaOmitText, mxEv),
+ joined,
+ );
+ } else {
+ this.totalSize += blob.size;
+ const filePath = this.getFilePath(mxEv);
+ eventTile = await this.getEventTile(mxEv, joined, filePath);
+ if (this.totalSize == this.exportOptions.maxSize) {
+ this.exportOptions.attachmentsIncluded = false;
+ }
+ this.addFile(filePath, blob);
}
- this.addFile(filePath, blob);
+ } catch (e) {
+ console.log("Error while fetching file" + e);
+ eventTile = await this.getEventTile(
+ this.createModifiedEvent(_t("Error fetching file"), mxEv),
+ joined,
+ );
}
- } catch (e) {
- console.log("Error while fetching file" + e);
- eventTile = await this.getEventTile(
- this.createModifiedEvent(_t("Error fetching file"), mxEv),
- joined,
- );
+ } else {
+ eventTile = await this.getEventTile(this.createModifiedEvent(this.mediaOmitText, mxEv), joined);
}
- } else {
- eventTile = await this.getEventTile(this.createModifiedEvent(this.mediaOmitText, mxEv), joined);
- }
- } else eventTile = await this.getEventTile(mxEv, joined);
+ } else eventTile = await this.getEventTile(mxEv, joined);
+ } catch (e) {
+ // TODO: Handle callEvent errors
+ console.error(e);
+ eventTile = await this.getEventTile(this.createModifiedEvent("Error parsing HTML", mxEv), joined);
+ }
return eventTile;
}
From 3d4d1d32d9cae26a73375d3932fd618cbca2e3ab Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 26 Jul 2021 00:09:59 +0530
Subject: [PATCH 132/176] Modify design according to the design team
---
res/css/views/dialogs/_ExportDialog.scss | 49 +++++
src/components/views/dialogs/ExportDialog.tsx | 170 ++++++++++--------
src/i18n/strings/en_EN.json | 8 +-
src/utils/exportUtils/Exporter.ts | 10 +-
src/utils/exportUtils/HtmlExport.tsx | 4 +-
src/utils/exportUtils/exportUtils.ts | 2 +-
6 files changed, 154 insertions(+), 89 deletions(-)
diff --git a/res/css/views/dialogs/_ExportDialog.scss b/res/css/views/dialogs/_ExportDialog.scss
index d3af6c843b..03b7b2a8d3 100644
--- a/res/css/views/dialogs/_ExportDialog.scss
+++ b/res/css/views/dialogs/_ExportDialog.scss
@@ -9,6 +9,34 @@
margin-bottom: 12px;
}
+ &.mx_ExportDialog_Exporting .mx_ExportDialog_options {
+ pointer-events: none;
+ }
+
+ .mx_ExportDialog_progress {
+ .mx_Dialog_buttons {
+ margin-top: unset;
+ margin-left: 18px;
+ }
+ .mx_ExportDialog_spinner {
+ animation: mx_rotate 2s linear infinite;
+ z-index: 2;
+ position: relative;
+ margin-right: 10px;
+ width: 24px;
+ height: 24px;
+ & .mx_ExportDialog_spinner_path {
+ stroke: #0dbd8b;
+ stroke-linecap: round;
+ animation: mx_dash 1.5s ease-in-out infinite;
+ }
+ }
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ align-items: center;
+ }
+
.mx_RadioButton > .mx_RadioButton_content {
margin-top: 5px;
margin-bottom: 5px;
@@ -22,3 +50,24 @@
padding: 9px 10px;
}
}
+
+@keyframes mx_rotate {
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+@keyframes mx_dash {
+ 0% {
+ stroke-dasharray: 1, 150;
+ stroke-dashoffset: 0;
+ }
+ 50% {
+ stroke-dasharray: 90, 150;
+ stroke-dashoffset: -35;
+ }
+ 100% {
+ stroke-dasharray: 90, 150;
+ stroke-dashoffset: -124;
+ }
+}
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index b1de882950..570308edc1 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -197,6 +197,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
</option>
);
});
+
let messageCount = null;
if (exportType === exportTypes.LAST_N_MESSAGES) {
messageCount = (
@@ -254,72 +255,6 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
/>
</BaseDialog>
);
- } else if (!isExporting) {
- // Display export settings
- return (
- <BaseDialog
- title={_t("Export Chat")}
- className="mx_ExportDialog"
- contentId="mx_Dialog_content"
- hasCancel={true}
- onFinished={onFinished}
- fixedWidth={true}
- >
- <p>
- { _t("Select from the options below to export chats from your timeline") }
- </p>
-
- <span className="mx_ExportDialog_subheading">{ _t("Format") }</span>
-
- <StyledRadioGroup
- name="exportFormat"
- value={exportFormat}
- onChange={(key) => setExportFormat(exportFormats[key])}
- definitions={exportFormatOptions}
- />
-
- <span className="mx_ExportDialog_subheading">{ _t("Messages") }</span>
-
- <Field
- element="select"
- value={exportType}
- onChange={(e) => {
- setExportType(exportTypes[e.target.value]);
- }}
- >
- { exportTypeOptions }
- </Field>
- { messageCount }
-
- <span className="mx_ExportDialog_subheading">{ _t("Size Limit") }</span>
-
- <Field
- type="number"
- autoComplete="off"
- onValidate={onValidateSize}
- element="input"
- ref={sizeLimitRef}
- value={sizeLimit.toString()}
- postfixComponent={sizePostFix}
- onChange={(e) => setSizeLimit(parseInt(e.target.value))}
- />
-
- <StyledCheckbox
- checked={includeAttachments}
- onChange={(e) =>
- setAttachments((e.target as HTMLInputElement).checked)
- }
- >
- { _t("Include Attachments") }
- </StyledCheckbox>
-
- <DialogButtons
- primaryButton={_t("Export")}
- onPrimaryButtonClick={onExportClick}
- onCancel={() => onFinished(false)}
- />
- </BaseDialog>
- );
} else if (displayCancel) {
// Display cancel warning
return (
@@ -346,23 +281,104 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
</BaseDialog>
);
} else {
- // Display progress dialog
+ // Display export settings
return (
<BaseDialog
- title={_t("Exporting your data...")}
- className="mx_ExportDialog"
+ title={_t("Export Chat")}
+ className={`mx_ExportDialog ${isExporting && "mx_ExportDialog_Exporting"}`}
contentId="mx_Dialog_content"
- hasCancel={false}
+ hasCancel={true}
onFinished={onFinished}
fixedWidth={true}
>
- <p ref={exportProgressRef} />
- <DialogButtons
- primaryButton={_t("Cancel")}
- primaryButtonClass="danger"
- hasCancel={false}
- onPrimaryButtonClick={onCancel}
- />
+ <p>
+ { _t(
+ "Select from the options below to export chats from your timeline",
+ ) }
+ </p>
+
+ <span className="mx_ExportDialog_subheading">
+ { _t("Format") }
+ </span>
+
+ <div className="mx_ExportDialog_options">
+ <StyledRadioGroup
+ name="exportFormat"
+ value={exportFormat}
+ onChange={(key) => setExportFormat(exportFormats[key])}
+ definitions={exportFormatOptions}
+ />
+
+ <span className="mx_ExportDialog_subheading">
+ { _t("Messages") }
+ </span>
+
+ <Field
+ element="select"
+ value={exportType}
+ onChange={(e) => {
+ setExportType(exportTypes[e.target.value]);
+ }}
+ >
+ { exportTypeOptions }
+ </Field>
+ { messageCount }
+
+ <span className="mx_ExportDialog_subheading">
+ { _t("Size Limit") }
+ </span>
+
+ <Field
+ type="number"
+ autoComplete="off"
+ onValidate={onValidateSize}
+ element="input"
+ ref={sizeLimitRef}
+ value={sizeLimit.toString()}
+ postfixComponent={sizePostFix}
+ onChange={(e) => setSizeLimit(parseInt(e.target.value))}
+ />
+
+ <StyledCheckbox
+ checked={includeAttachments}
+ onChange={(e) =>
+ setAttachments(
+ (e.target as HTMLInputElement).checked,
+ )
+ }
+ >
+ { _t("Include Attachments") }
+ </StyledCheckbox>
+ </div>
+ { isExporting ? (
+ <div className = "mx_ExportDialog_progress">
+ <svg className="mx_ExportDialog_spinner" viewBox="0 0 50 50">
+ <circle
+ className="mx_ExportDialog_spinner_path"
+ cx="25"
+ cy="25"
+ r="20"
+ fill="none"
+ stroke-width="5"
+ ></circle>
+ </svg>
+ <p ref={exportProgressRef}>
+ { _t("Processing...") }
+ </p>
+ <DialogButtons
+ primaryButton={_t("Cancel")}
+ primaryButtonClass="danger"
+ hasCancel={false}
+ onPrimaryButtonClick={onCancel}
+ />
+ </div>
+ ) : (
+ <DialogButtons
+ primaryButton={_t("Export")}
+ onPrimaryButtonClick={onExportClick}
+ onCancel={() => onFinished(false)}
+ />
+ ) }
</BaseDialog>
);
}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index d69b368550..01485741ef 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -730,7 +730,7 @@
"JSON": "JSON",
"Plain Text": "Plain Text",
"From the beginning": "From the beginning",
- "For a number of messages": "For a number of messages",
+ "Specify a number of messages": "Specify a number of messages",
"Current Timeline": "Current Timeline",
"Media omitted": "Media omitted",
"Media omitted - file size limit exceeded": "Media omitted - file size limit exceeded",
@@ -2272,15 +2272,15 @@
"Okay": "Okay",
"Export Successful": "Export Successful",
"Your messages were successfully exported": "Your messages were successfully exported",
+ "Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
+ "Stop": "Stop",
"Export Chat": "Export Chat",
"Select from the options below to export chats from your timeline": "Select from the options below to export chats from your timeline",
"Format": "Format",
"Size Limit": "Size Limit",
"Include Attachments": "Include Attachments",
+ "Processing...": "Processing...",
"Export": "Export",
- "Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
- "Stop": "Stop",
- "Exporting your data...": "Exporting your data...",
"Feedback sent": "Feedback sent",
"Rate %(brand)s": "Rate %(brand)s",
"Tell us below how you feel about %(brand)s so far.": "Tell us below how you feel about %(brand)s so far.",
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 5366436dab..d43f937c7b 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -44,7 +44,7 @@ export default abstract class Exporter {
protected updateProgress(progress: string, log = true, show = true): void {
if (log) console.log(progress);
- if (show) this.exportProgressRef.current.innerText = progress;
+ if (show && this.exportProgressRef.current) this.exportProgressRef.current.innerText = progress;
}
protected addFile(filePath: string, blob: Blob): void {
@@ -64,7 +64,7 @@ export default abstract class Exporter {
// Create a writable stream to the directory
this.fileStream = streamSaver.createWriteStream(filename);
- if (!this.cancelled) this.updateProgress("Generating a ZIP...");
+ if (!this.cancelled) this.updateProgress("Generating a ZIP");
else return this.cleanUp();
this.writer = this.fileStream.getWriter();
@@ -79,7 +79,7 @@ export default abstract class Exporter {
if (this.cancelled) return this.cleanUp();
- this.updateProgress("Writing to the file system...");
+ this.updateProgress("Writing to the file system");
const reader = readableZipStream.getReader();
await this.pumpToFileStream(reader);
@@ -186,8 +186,8 @@ export default abstract class Exporter {
}
this.updateProgress(
("Fetched " + events.length + " events ") + (this.exportType === exportTypes.LAST_N_MESSAGES
- ? `out of ${this.exportOptions.numberOfMessages}...`
- : "so far..."),
+ ? `out of ${this.exportOptions.numberOfMessages}`
+ : "so far"),
);
prevToken = res.end;
}
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 6f2394242c..3f98b4c92a 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -361,8 +361,8 @@ export default class HTMLExporter extends Exporter {
}
public async export() {
- this.updateProgress("Starting export process...", true, false);
- this.updateProgress("Fetching events...");
+ this.updateProgress("Starting export process", true, false);
+ this.updateProgress("Fetching events");
const fetchStart = performance.now();
const res = await this.getRequiredEvents();
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 6fa5ab9869..3e281269bf 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -29,7 +29,7 @@ export const textForType = (type: string): string => {
case exportTypes.BEGINNING:
return _t("From the beginning");
case exportTypes.LAST_N_MESSAGES:
- return _t("For a number of messages");
+ return _t("Specify a number of messages");
case exportTypes.TIMELINE:
return _t("Current Timeline");
// case exportTypes.START_DATE:
From 2487fe73803439ffff70694e6511f06aa53522c3 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 26 Jul 2021 00:13:52 +0530
Subject: [PATCH 133/176] Delint
---
src/components/views/dialogs/ExportDialog.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 570308edc1..bb7ba1ed86 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -351,7 +351,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
</StyledCheckbox>
</div>
{ isExporting ? (
- <div className = "mx_ExportDialog_progress">
+ <div className="mx_ExportDialog_progress">
<svg className="mx_ExportDialog_spinner" viewBox="0 0 50 50">
<circle
className="mx_ExportDialog_spinner_path"
From 9fe64c34a50a7a833c39952f7b93db78e8d8db01 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 26 Jul 2021 00:24:04 +0530
Subject: [PATCH 134/176] Delint
---
src/components/views/dialogs/ExportDialog.tsx | 2 +-
src/components/views/messages/MVideoBody.tsx | 3 +--
2 files changed, 2 insertions(+), 3 deletions(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index bb7ba1ed86..8dd6eb92fd 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -360,7 +360,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
r="20"
fill="none"
stroke-width="5"
- ></circle>
+ />
</svg>
<p ref={exportProgressRef}>
{ _t("Processing...") }
diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx
index 9ec45c2fb6..3239482515 100644
--- a/src/components/views/messages/MVideoBody.tsx
+++ b/src/components/views/messages/MVideoBody.tsx
@@ -279,8 +279,7 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
width={width}
poster={poster}
onPlay={this.videoOnPlay}
- >
- </video>
+ />
{ fileBody }
</span>
);
From 30a64a1b5a0e01c565771c605dd4d5a97a5da7c1 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 26 Jul 2021 12:41:36 +0530
Subject: [PATCH 135/176] Gray out and hide some options during export
---
res/css/views/dialogs/_ExportDialog.scss | 30 +++++++++++++++++--
src/components/views/dialogs/ExportDialog.tsx | 6 ++--
src/i18n/strings/en_EN.json | 1 +
3 files changed, 31 insertions(+), 6 deletions(-)
diff --git a/res/css/views/dialogs/_ExportDialog.scss b/res/css/views/dialogs/_ExportDialog.scss
index 03b7b2a8d3..d01f258d62 100644
--- a/res/css/views/dialogs/_ExportDialog.scss
+++ b/res/css/views/dialogs/_ExportDialog.scss
@@ -9,8 +9,32 @@
margin-bottom: 12px;
}
- &.mx_ExportDialog_Exporting .mx_ExportDialog_options {
- pointer-events: none;
+ &.mx_ExportDialog_Exporting {
+ .mx_ExportDialog_options {
+ pointer-events: none;
+ }
+
+ .mx_RadioButton input[type="radio"]:checked + div > div {
+ background: gray;
+ }
+
+ .mx_Field_valid.mx_Field label,
+ .mx_Field_valid.mx_Field:focus-within label {
+ color: unset;
+ }
+
+ .mx_Field_valid.mx_Field,
+ .mx_Field_valid.mx_Field:focus-within {
+ border-color: unset;
+ }
+
+ .mx_Checkbox
+ input[type="checkbox"]:checked
+ + label
+ > .mx_Checkbox_background {
+ background: gray;
+ border-color: gray;
+ }
}
.mx_ExportDialog_progress {
@@ -26,7 +50,7 @@
width: 24px;
height: 24px;
& .mx_ExportDialog_spinner_path {
- stroke: #0dbd8b;
+ stroke: $accent-color;
stroke-linecap: round;
animation: mx_dash 1.5s ease-in-out infinite;
}
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 8dd6eb92fd..82ea111ed4 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -284,18 +284,18 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
// Display export settings
return (
<BaseDialog
- title={_t("Export Chat")}
+ title={isExporting ? _t("Exporting your data") : _t("Export Chat")}
className={`mx_ExportDialog ${isExporting && "mx_ExportDialog_Exporting"}`}
contentId="mx_Dialog_content"
hasCancel={true}
onFinished={onFinished}
fixedWidth={true}
>
- <p>
+ { !isExporting ? <p>
{ _t(
"Select from the options below to export chats from your timeline",
) }
- </p>
+ </p> : null}
<span className="mx_ExportDialog_subheading">
{ _t("Format") }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 46926ee798..a55576921c 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2300,6 +2300,7 @@
"Your messages were successfully exported": "Your messages were successfully exported",
"Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
"Stop": "Stop",
+ "Exporting your data": "Exporting your data",
"Export Chat": "Export Chat",
"Select from the options below to export chats from your timeline": "Select from the options below to export chats from your timeline",
"Format": "Format",
From 06d84a16d014ff18cec417f0cbdd988f36967702 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 26 Jul 2021 12:58:17 +0530
Subject: [PATCH 136/176] Delint
---
res/css/views/dialogs/_ExportDialog.scss | 18 +++++++++++-------
1 file changed, 11 insertions(+), 7 deletions(-)
diff --git a/res/css/views/dialogs/_ExportDialog.scss b/res/css/views/dialogs/_ExportDialog.scss
index d01f258d62..4255768447 100644
--- a/res/css/views/dialogs/_ExportDialog.scss
+++ b/res/css/views/dialogs/_ExportDialog.scss
@@ -14,24 +14,28 @@
pointer-events: none;
}
+ .mx_Field_select::before {
+ display: none;
+ }
+
.mx_RadioButton input[type="radio"]:checked + div > div {
background: gray;
}
+ .mx_RadioButton input[type=radio]:checked + div {
+ border-color: unset;
+ }
+
.mx_Field_valid.mx_Field label,
.mx_Field_valid.mx_Field:focus-within label {
color: unset;
}
- .mx_Field_valid.mx_Field,
- .mx_Field_valid.mx_Field:focus-within {
- border-color: unset;
+ .mx_Field_valid.mx_Field, .mx_Field_valid.mx_Field:focus-within {
+ border-color: $input-border-color;
}
- .mx_Checkbox
- input[type="checkbox"]:checked
- + label
- > .mx_Checkbox_background {
+ .mx_Checkbox input[type="checkbox"]:checked + label > .mx_Checkbox_background {
background: gray;
border-color: gray;
}
From ad1da9ea821fae42e6c96dd86a32a265a2c91c89 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 26 Jul 2021 13:03:15 +0530
Subject: [PATCH 137/176] Delint2
---
src/components/views/dialogs/ExportDialog.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 82ea111ed4..82c38763c3 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -295,7 +295,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
{ _t(
"Select from the options below to export chats from your timeline",
) }
- </p> : null}
+ </p> : null }
<span className="mx_ExportDialog_subheading">
{ _t("Format") }
From a4da8f9e9ef0e553c947ea7ae88d76a0aa435286 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 26 Jul 2021 15:07:45 +0530
Subject: [PATCH 138/176] Update exportCSS
---
src/utils/exportUtils/exportCSS.ts | 7612 ++++++++++++++++++++++++----
1 file changed, 6732 insertions(+), 880 deletions(-)
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index 7d07f19998..49f3bf3bb7 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -3,9 +3,11 @@ const lightCSS = `@charset "utf-8";
.hljs-addition {
background: #dfd;
}
+
.hljs-deletion {
background: #fdd;
}
+
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
.mx_LeftPanel {
background-image: unset;
@@ -24,31 +26,40 @@ const lightCSS = `@charset "utf-8";
backdrop-filter: blur(40px);
}
}
+
.mx_RoomSublist_showNButton {
background-color: transparent !important;
}
+
a:hover,
a:link,
a:visited {
text-decoration: none;
}
+
:root {
font-size: 10px;
--transition-short: 0.1s;
--transition-standard: 0.3s;
}
+
@media (prefers-reduced-motion) {
:root {
--transition-short: 0;
--transition-standard: 0;
}
}
+
html {
height: 100%;
overflow: hidden;
+ -ms-scroll-chaining: none;
+ overscroll-behavior: none;
}
+
body {
- font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
+ Helvetica, Sans-Serif, Noto Color Emoji;
font-size: 1.5rem;
background-color: #fff;
color: #2e2f32;
@@ -57,26 +68,33 @@ body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
+
code,
pre {
- font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
+ font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
+ monospace;
font-size: 100% !important;
}
+
.error,
.text-error,
.text-warning,
.warning {
color: #ff4b55;
}
+
.text-success {
color: #0dbd8b;
}
+
.text-muted {
color: #61708b;
}
+
b {
font-weight: 700;
}
+
h2 {
color: #2e2f32;
font-weight: 400;
@@ -84,66 +102,81 @@ h2 {
margin-top: 16px;
margin-bottom: 16px;
}
+
a:hover,
a:link,
a:visited {
color: #238cf5;
}
+
input[type="password"],
input[type="search"],
input[type="text"] {
padding: 9px;
- font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
+ Helvetica, Sans-Serif, Noto Color Emoji;
font-size: 1.4rem;
font-weight: 600;
min-width: 0;
}
+
input[type="search"].mx_textinput_icon,
input[type="text"].mx_textinput_icon {
padding-left: 36px;
background-repeat: no-repeat;
background-position: 10px;
}
+
input[type="search"].mx_textinput_icon.mx_textinput_search,
input[type="text"].mx_textinput_icon.mx_textinput_search {
background-image: url(../../img/feather-customised/search-input.044bfa7.svg);
}
+
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
+
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
opacity: 1;
}
+
input::-moz-placeholder,
textarea::-moz-placeholder {
opacity: 1;
}
+
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
opacity: 1;
}
+
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
opacity: 1;
}
+
input::placeholder,
textarea::placeholder {
opacity: 1;
}
+
input[type="password"],
input[type="text"],
textarea {
background-color: transparent;
color: #2e2f32;
}
+
textarea {
- font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
+ Helvetica, Sans-Serif, Noto Color Emoji;
color: #2e2f32;
}
+
input[type="password"]:focus,
input[type="text"]:focus,
textarea:focus {
@@ -151,9 +184,11 @@ textarea:focus {
-webkit-box-shadow: none;
box-shadow: none;
}
+
:focus:not(.focus-visible) {
outline: none;
}
+
.mx_Dialog .mx_textinput > input[type="search"],
.mx_Dialog .mx_textinput > input[type="text"],
.mx_MatrixChat .mx_textinput > input[type="search"],
@@ -164,6 +199,7 @@ textarea:focus {
flex: 1;
color: #2e2f32;
}
+
.mx_Dialog .mx_textinput,
.mx_Dialog
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
@@ -187,6 +223,7 @@ textarea:focus {
border: 1px solid rgba(46, 47, 50, 0.1);
margin: 9px;
}
+
.mx_Dialog .mx_textinput,
.mx_MatrixChat .mx_textinput {
display: -webkit-box;
@@ -196,6 +233,7 @@ textarea:focus {
-ms-flex-align: center;
align-items: center;
}
+
.mx_Dialog .mx_textinput input::-webkit-input-placeholder,
.mx_Dialog
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
@@ -212,6 +250,7 @@ textarea:focus {
> input[type="text"]::-webkit-input-placeholder {
color: rgba(159, 169, 186, 0.75);
}
+
.mx_Dialog .mx_textinput input::-moz-placeholder,
.mx_Dialog
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
@@ -228,6 +267,7 @@ textarea:focus {
> input[type="text"]::-moz-placeholder {
color: rgba(159, 169, 186, 0.75);
}
+
.mx_Dialog .mx_textinput input:-ms-input-placeholder,
.mx_Dialog
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
@@ -244,6 +284,7 @@ textarea:focus {
> input[type="text"]:-ms-input-placeholder {
color: rgba(159, 169, 186, 0.75);
}
+
.mx_Dialog .mx_textinput input::-ms-input-placeholder,
.mx_Dialog
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
@@ -260,6 +301,7 @@ textarea:focus {
> input[type="text"]::-ms-input-placeholder {
color: rgba(159, 169, 186, 0.75);
}
+
.mx_Dialog .mx_textinput input::placeholder,
.mx_Dialog
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
@@ -276,9 +318,11 @@ textarea:focus {
> input[type="text"]::placeholder {
color: rgba(159, 169, 186, 0.75);
}
+
.dark-panel {
background-color: #f2f5f8;
}
+
.dark-panel .mx_textinput,
.dark-panel
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
@@ -290,6 +334,7 @@ textarea:focus {
background-color: #fff;
border: none;
}
+
.light-panel .mx_textinput,
.light-panel
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
@@ -301,18 +346,23 @@ textarea:focus {
background-color: #f2f5f8;
border: none;
}
+
::-moz-focus-inner {
border: 0;
}
+
#mx_theme_accentColor {
color: #0dbd8b;
}
+
#mx_theme_secondaryAccentColor {
color: #f2f5f8;
}
+
#mx_theme_tertiaryAccentColor {
color: #d3efe1;
}
+
.mx_Dialog_wrapper {
position: fixed;
z-index: 4000;
@@ -330,6 +380,7 @@ textarea:focus {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_Dialog {
background-color: #fff;
color: #747474;
@@ -344,13 +395,17 @@ textarea:focus {
border-radius: 8px;
overflow-y: auto;
}
+
.mx_Dialog_fixedWidth {
width: 60vw;
max-width: 704px;
}
+
.mx_Dialog_staticWrapper .mx_Dialog {
z-index: 4010;
+ contain: content;
}
+
.mx_Dialog_background {
position: fixed;
top: 0;
@@ -361,16 +416,20 @@ textarea:focus {
opacity: 0.8;
z-index: 4011;
}
+
.mx_Dialog_background.mx_Dialog_staticBackground {
z-index: 4009;
}
+
.mx_Dialog_wrapperWithStaticUnder .mx_Dialog_background {
opacity: 0.4;
}
+
.mx_Dialog_lightbox .mx_Dialog_background {
opacity: 0.95;
background-color: #000;
}
+
.mx_Dialog_lightbox .mx_Dialog {
border-radius: 0;
background-color: transparent;
@@ -381,10 +440,12 @@ textarea:focus {
pointer-events: none;
padding: 0;
}
+
.mx_Dialog_header {
position: relative;
margin-bottom: 10px;
}
+
.mx_Dialog_titleImage {
vertical-align: sub;
width: 25px;
@@ -392,21 +453,26 @@ textarea:focus {
margin-left: -2px;
margin-right: 4px;
}
+
.mx_Dialog_title {
font-size: 2.2rem;
font-weight: 600;
line-height: 3.6rem;
color: #45474a;
}
+
.mx_Dialog_header.mx_Dialog_headerWithButton > .mx_Dialog_title {
text-align: center;
}
+
.mx_Dialog_header.mx_Dialog_headerWithCancel > .mx_Dialog_title {
margin-right: 20px;
}
+
.mx_Dialog_title.danger {
color: #ff4b55;
}
+
.mx_Dialog_cancelButton {
-webkit-mask: url(../../img/feather-customised/cancel.23c2689.svg);
mask: url(../../img/feather-customised/cancel.23c2689.svg);
@@ -424,26 +490,31 @@ textarea:focus {
top: 10px;
right: 0;
}
+
.mx_Dialog_content {
margin: 24px 0 68px;
font-size: 1.4rem;
color: #2e2f32;
word-wrap: break-word;
}
+
.mx_Dialog_buttons {
margin-top: 20px;
text-align: right;
}
+
.mx_Dialog_buttons .mx_Dialog_buttons_additive {
float: left;
}
+
.mx_Dialog_buttons button,
.mx_Dialog_buttons input[type="submit"],
.mx_Dialog button,
.mx_Dialog input[type="submit"] {
vertical-align: middle;
border-radius: 8px;
- font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
+ Helvetica, Sans-Serif, Noto Color Emoji;
font-size: 1.4rem;
color: #fff;
background-color: #0dbd8b;
@@ -460,9 +531,11 @@ textarea:focus {
background-color: #fff;
font-family: inherit;
}
+
.mx_Dialog button:last-child {
margin-right: 0;
}
+
.mx_Dialog_buttons button:focus,
.mx_Dialog_buttons input[type="submit"]:focus,
.mx_Dialog button:focus,
@@ -470,6 +543,7 @@ textarea:focus {
-webkit-filter: brightness(105%);
filter: brightness(105%);
}
+
.mx_Dialog_buttons button.mx_Dialog_primary,
.mx_Dialog_buttons input[type="submit"].mx_Dialog_primary,
.mx_Dialog button.mx_Dialog_primary,
@@ -478,6 +552,7 @@ textarea:focus {
background-color: #0dbd8b;
min-width: 156px;
}
+
.mx_Dialog_buttons button.danger,
.mx_Dialog_buttons input[type="submit"].danger,
.mx_Dialog button.danger,
@@ -486,11 +561,13 @@ textarea:focus {
border: 1px solid #ff4b55;
color: #fff;
}
+
.mx_Dialog button.warning,
.mx_Dialog input[type="submit"].warning {
border: 1px solid #ff4b55;
color: #ff4b55;
}
+
.mx_Dialog_buttons button:disabled,
.mx_Dialog_buttons input[type="submit"]:disabled,
.mx_Dialog button:disabled,
@@ -499,6 +576,7 @@ textarea:focus {
border: 1px solid #747474;
opacity: 0.7;
}
+
.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog {
width: auto;
border-radius: 8px;
@@ -508,11 +586,13 @@ textarea:focus {
overflow-x: hidden;
overflow-y: hidden;
}
+
.mx_GeneralButton {
vertical-align: middle;
border: 0;
border-radius: 8px;
- font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
+ Helvetica, Sans-Serif, Noto Color Emoji;
font-size: 1.4rem;
color: #fff;
background-color: #0dbd8b;
@@ -524,14 +604,17 @@ textarea:focus {
display: inline;
margin: auto;
}
+
.mx_linkButton {
cursor: pointer;
color: #0dbd8b;
}
+
.mx_TextInputDialog_label {
text-align: left;
padding-bottom: 12px;
}
+
.mx_TextInputDialog_input {
font-size: 1.5rem;
border-radius: 3px;
@@ -540,11 +623,13 @@ textarea:focus {
color: #2e2f32;
background-color: #fff;
}
+
.mx_textButton {
vertical-align: middle;
border: 0;
border-radius: 8px;
- font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
+ Helvetica, Sans-Serif, Noto Color Emoji;
font-size: 1.4rem;
color: #fff;
background-color: #0dbd8b;
@@ -555,78 +640,100 @@ textarea:focus {
font-size: 1.5rem;
padding: 0 1.5em;
}
+
.mx_button_row {
margin-top: 69px;
}
+
.mx_Username_color1 {
color: #368bd6;
}
+
.mx_Username_color2 {
color: #ac3ba8;
}
+
.mx_Username_color3 {
color: #0dbd8b;
}
+
.mx_Username_color4 {
color: #e64f7a;
}
+
.mx_Username_color5 {
color: #ff812d;
}
+
.mx_Username_color6 {
color: #2dc2c5;
}
+
.mx_Username_color7 {
color: #5c56f5;
}
+
.mx_Username_color8 {
color: #74d12c;
}
+
.mx_Tooltip_dark .mx_Tooltip_chevron:after {
border-right-color: #27303a;
}
+
html {
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
+
* {
scrollbar-width: thin;
}
+
::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: transparent;
}
+
::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: rgba(0, 0, 0, 0.2);
}
+
.mx_AutoHideScrollbar:hover {
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
+
.mx_AutoHideScrollbar:hover::-webkit-scrollbar {
background-color: transparent;
}
+
.mx_AutoHideScrollbar:hover::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
}
+
.mx_AutoHideScrollbar {
overflow-x: hidden;
overflow-y: auto;
overflow-y: overlay;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
+
.mx_AutoHideScrollbar::-webkit-scrollbar,
.mx_AutoHideScrollbar::-webkit-scrollbar-thumb {
background-color: transparent;
}
+
.mx_AutoHideScrollbar {
scrollbar-color: transparent transparent;
}
+
.mx_CompatibilityPage {
width: 100%;
height: 100%;
background-color: #e55;
}
+
.mx_CompatibilityPage_box {
position: absolute;
top: 0;
@@ -640,10 +747,12 @@ html {
padding: 10px;
background-color: #fcc;
}
+
.mx_ContextualMenu_wrapper {
position: fixed;
z-index: 5000;
}
+
.mx_ContextualMenu_background {
position: fixed;
top: 0;
@@ -653,6 +762,7 @@ html {
opacity: 1;
z-index: 5000;
}
+
.mx_ContextualMenu {
border-radius: 8px;
-webkit-box-shadow: 4px 4px 12px 0 rgba(118, 131, 156, 0.6);
@@ -662,13 +772,17 @@ html {
position: absolute;
font-size: 1.4rem;
z-index: 5001;
+ contain: content;
}
+
.mx_ContextualMenu_right {
right: 0;
}
+
.mx_ContextualMenu.mx_ContextualMenu_withChevron_right {
right: 8px;
}
+
.mx_ContextualMenu_chevron_right {
position: absolute;
right: -8px;
@@ -679,12 +793,15 @@ html {
border-left: 8px solid #fff;
border-bottom: 8px solid transparent;
}
+
.mx_ContextualMenu_left {
left: 0;
}
+
.mx_ContextualMenu.mx_ContextualMenu_withChevron_left {
left: 8px;
}
+
.mx_ContextualMenu_chevron_left {
position: absolute;
left: -8px;
@@ -695,12 +812,15 @@ html {
border-right: 8px solid #fff;
border-bottom: 8px solid transparent;
}
+
.mx_ContextualMenu_top {
top: 0;
}
+
.mx_ContextualMenu.mx_ContextualMenu_withChevron_top {
top: 8px;
}
+
.mx_ContextualMenu_chevron_top {
position: absolute;
left: 0;
@@ -711,12 +831,15 @@ html {
border-bottom: 8px solid #fff;
border-right: 8px solid transparent;
}
+
.mx_ContextualMenu_bottom {
bottom: 0;
}
+
.mx_ContextualMenu.mx_ContextualMenu_withChevron_bottom {
bottom: 8px;
}
+
.mx_ContextualMenu_chevron_bottom {
position: absolute;
left: 0;
@@ -727,16 +850,14 @@ html {
border-top: 8px solid #fff;
border-right: 8px solid transparent;
}
-.mx_ContextualMenu_spinner {
- display: block;
- margin: 0 auto;
-}
+
.mx_CreateRoom {
width: 960px;
margin-left: auto;
margin-right: auto;
color: #2e2f32;
}
+
.mx_CreateRoom input,
.mx_CreateRoom textarea {
border-radius: 3px;
@@ -746,13 +867,16 @@ html {
padding: 9px;
margin-top: 6px;
}
+
.mx_CreateRoom_description {
width: 330px;
}
+
.mx_CustomRoomTagPanel {
background-color: hsla(0, 0%, 91%, 0.77);
max-height: 40vh;
}
+
.mx_CustomRoomTagPanel_scroller {
max-height: inherit;
display: -webkit-box;
@@ -766,18 +890,21 @@ html {
-ms-flex-align: center;
align-items: center;
}
+
.mx_CustomRoomTagPanel .mx_AccessibleButton {
margin: 0 auto;
width: 40px;
padding: 10px 0 9px;
position: relative;
}
+
.mx_CustomRoomTagPanel .mx_BaseAvatar_image {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 40px;
height: 40px;
}
+
.mx_CustomRoomTagPanel
.mx_AccessibleButton.CustomRoomTagPanel_tileSelected:before {
content: "";
@@ -789,6 +916,7 @@ html {
border-radius: 0 3px 3px 0;
top: 5px;
}
+
.mx_FilePanel {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
@@ -801,6 +929,7 @@ html {
display: -ms-flexbox;
display: flex;
}
+
.mx_FilePanel .mx_RoomView_messageListWrapper {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
@@ -813,23 +942,34 @@ html {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_FilePanel .mx_RoomView_MessageList {
width: 100%;
}
+
.mx_FilePanel .mx_EventTile_avatar,
.mx_FilePanel .mx_RoomView_MessageList h2 {
display: none;
}
-.mx_FilePanel .mx_EventTile {
+
+.mx_FilePanel .mx_EventTile:not([data-layout="bubble"]) {
word-break: break-word;
- margin-top: 32px;
+ margin-top: 10px;
+ padding-top: 0;
}
+
+.mx_FilePanel .mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_line {
+ padding-left: 0;
+}
+
.mx_FilePanel .mx_EventTile .mx_MImageBody {
margin-right: 0;
}
+
.mx_FilePanel .mx_EventTile .mx_MFileBody {
line-height: 2.4rem;
}
+
.mx_FilePanel .mx_EventTile .mx_MFileBody_download {
padding-top: 8px;
display: -webkit-box;
@@ -838,12 +978,14 @@ html {
font-size: 1.4rem;
color: #acacac;
}
+
.mx_FilePanel .mx_EventTile .mx_MFileBody_downloadLink {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
color: #747474;
}
+
.mx_FilePanel .mx_EventTile .mx_MImageBody_size {
-webkit-box-flex: 1;
-ms-flex: 1 0 0px;
@@ -852,15 +994,18 @@ html {
text-align: right;
white-space: nowrap;
}
+
.mx_FilePanel .mx_EventTile_senderDetails {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: -2px;
}
+
.mx_FilePanel .mx_EventTile_senderDetailsLink {
text-decoration: none;
}
+
.mx_FilePanel .mx_EventTile .mx_SenderProfile {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
@@ -871,6 +1016,7 @@ html {
opacity: 1;
color: #acacac;
}
+
.mx_FilePanel .mx_EventTile .mx_MessageTimestamp {
-webkit-box-flex: 1;
-ms-flex: 1 0 0px;
@@ -882,20 +1028,21 @@ html {
opacity: 1;
color: #acacac;
}
+
.mx_FilePanel .mx_EventTile_line {
margin-right: 0;
padding-left: 0;
}
+
.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line {
padding-left: 0;
}
-.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
- background-color: #fff;
-}
+
.mx_FilePanel_empty:before {
-webkit-mask-image: url(../../img/element-icons/room/files.5709c0c.svg);
mask-image: url(../../img/element-icons/room/files.5709c0c.svg);
}
+
.mx_GenericErrorPage {
width: 100%;
height: 100%;
@@ -910,6 +1057,7 @@ html {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_GenericErrorPage_box {
display: inline;
width: 500px;
@@ -918,6 +1066,7 @@ html {
padding: 10px 10px 20px;
background-color: #fcc;
}
+
.mx_GroupFilterPanel {
-webkit-box-flex: 1;
-ms-flex: 1;
@@ -939,21 +1088,25 @@ html {
justify-content: space-between;
min-height: 0;
}
+
.mx_GroupFilterPanel_items_selected {
cursor: pointer;
}
+
.mx_GroupFilterPanel .mx_GroupFilterPanel_divider {
height: 0;
width: 90%;
border: none;
border-bottom: 1px solid #8d99a5;
}
+
.mx_GroupFilterPanel .mx_GroupFilterPanel_scroller {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
width: 100%;
}
+
.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer {
display: -webkit-box;
display: -ms-flexbox;
@@ -967,39 +1120,49 @@ html {
align-items: center;
padding-top: 6px;
}
+
.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer > div {
margin: 6px 0;
}
+
.mx_GroupFilterPanel .mx_TagTile {
position: relative;
}
+
.mx_GroupFilterPanel .mx_TagTile .mx_BetaDot {
position: absolute;
right: -13px;
top: -11px;
}
+
.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_prototype {
padding: 3px;
}
+
.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected_prototype {
background-color: #fff;
border-radius: 6px;
}
+
.mx_TagTile_selected_prototype .mx_TagTile_homeIcon:before {
background-color: #2e2f32;
}
+
.mx_TagTile:not(.mx_TagTile_selected_prototype) .mx_TagTile_homeIcon {
background-color: rgba(92, 100, 112, 0.2);
border-radius: 48px;
}
+
.mx_TagTile:not(.mx_TagTile_selected_prototype) .mx_TagTile_homeIcon:before {
background-color: #5c6470;
}
+
.mx_TagTile_homeIcon {
width: 32px;
height: 32px;
position: relative;
}
+
.mx_TagTile_homeIcon:before {
-webkit-mask-image: url(../../img/element-icons/home.b706c0e.svg);
mask-image: url(../../img/element-icons/home.b706c0e.svg);
@@ -1017,6 +1180,7 @@ html {
top: calc(50% - 16px);
left: calc(50% - 16px);
}
+
.mx_GroupFilterPanel .mx_TagTile_plus {
margin-bottom: 12px;
height: 32px;
@@ -1026,6 +1190,7 @@ html {
position: relative;
display: block !important;
}
+
.mx_GroupFilterPanel .mx_TagTile_plus:before {
background-color: #5c6470;
-webkit-mask-image: url(../../img/feather-customised/plus.38ae979.svg);
@@ -1041,6 +1206,7 @@ html {
left: 0;
right: 0;
}
+
.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected:before {
content: "";
height: 100%;
@@ -1050,15 +1216,18 @@ html {
left: -12px;
border-radius: 0 3px 3px 0;
}
+
.mx_GroupFilterPanel .mx_TagTile.mx_AccessibleButton:focus {
-webkit-filter: none;
filter: none;
}
+
.mx_TagTile_tooltip {
position: relative;
top: -30px;
left: 5px;
}
+
.mx_TagTile_context_button {
min-width: 15px;
height: 15px;
@@ -1075,9 +1244,11 @@ html {
padding-left: 4px;
padding-right: 4px;
}
+
.mx_TagTile_avatar {
position: relative;
}
+
.mx_TagTile_badge {
position: absolute;
right: -4px;
@@ -1089,9 +1260,11 @@ html {
padding: 0 5px;
background-color: #61708b;
}
+
.mx_TagTile_badgeHighlight {
background-color: #ff4b55;
}
+
.mx_GroupView {
display: -webkit-box;
display: -ms-flexbox;
@@ -1102,9 +1275,11 @@ html {
flex-direction: column;
overflow: hidden;
}
+
.mx_GroupView_error {
margin: auto;
}
+
.mx_GroupView_header {
min-height: 52px;
-webkit-box-align: center;
@@ -1116,16 +1291,19 @@ html {
padding-bottom: 10px;
padding-left: 19px;
}
+
.mx_GroupView_header_view {
border-bottom: 1px solid transparent;
padding-bottom: 0;
padding-right: 8px;
}
+
.mx_GroupView_header_avatar,
.mx_GroupView_header_info {
display: table-cell;
vertical-align: middle;
}
+
.mx_GroupHeader_button {
position: relative;
margin-left: 5px;
@@ -1134,6 +1312,7 @@ html {
height: 20px;
width: 20px;
}
+
.mx_GroupHeader_button:before {
content: "";
position: absolute;
@@ -1145,52 +1324,63 @@ html {
-webkit-mask-size: contain;
mask-size: contain;
}
+
.mx_GroupHeader_editButton:before {
-webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
mask-image: url(../../img/element-icons/settings.6b381af.svg);
}
+
.mx_GroupHeader_shareButton:before {
-webkit-mask-image: url(../../img/element-icons/room/share.54dc3fb.svg);
mask-image: url(../../img/element-icons/room/share.54dc3fb.svg);
}
+
.mx_GroupView_hostingSignup img {
margin-left: 5px;
}
+
.mx_GroupView_editable {
border-bottom: 1px solid #c7c7c7 !important;
min-width: 150px;
cursor: text;
}
+
.mx_GroupView_editable:focus {
border-bottom: 1px solid #0dbd8b !important;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
+
.mx_GroupView_header_isUserMember
.mx_GroupView_header_name:hover
div:not(.mx_GroupView_editable) {
color: #0dbd8b;
cursor: pointer;
}
+
.mx_GroupView_avatarPicker {
position: relative;
}
+
.mx_GroupView_avatarPicker_edit {
position: absolute;
top: 50px;
left: 15px;
}
+
.mx_GroupView_avatarPicker .mx_Spinner {
width: 48px;
height: 48px !important;
}
+
.mx_GroupView_header_leftCol {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
overflow: hidden;
}
+
.mx_GroupView_header_rightCol {
display: -webkit-box;
display: -ms-flexbox;
@@ -1199,14 +1389,17 @@ html {
-ms-flex-align: center;
align-items: center;
}
+
.mx_GroupView_textButton {
display: inline-block;
}
+
.mx_GroupView_header_groupid {
font-weight: 400;
font-size: medium;
padding-left: 10px;
}
+
.mx_GroupView_header_name {
vertical-align: middle;
width: 100%;
@@ -1216,6 +1409,7 @@ html {
font-size: 2.2rem;
padding-right: 16px;
}
+
.mx_GroupView_header_name,
.mx_GroupView_header_shortDesc {
overflow: hidden;
@@ -1223,6 +1417,7 @@ html {
text-overflow: ellipsis;
border-bottom: 1px solid transparent;
}
+
.mx_GroupView_header_shortDesc {
vertical-align: bottom;
float: left;
@@ -1232,34 +1427,42 @@ html {
font-size: 1.3rem;
margin-right: 16px;
}
+
.mx_GroupView_avatarPicker_label {
cursor: pointer;
}
+
.mx_GroupView_cancelButton {
padding-left: 8px;
}
+
.mx_GroupView_cancelButton img {
position: relative;
top: 5px;
}
+
.mx_GroupView input[type="radio"] {
margin: 10px 10px 0;
}
+
.mx_GroupView_label_text {
display: inline-block;
max-width: 80%;
vertical-align: 0.1em;
line-height: 2em;
}
+
.mx_GroupView_body {
margin: 0 24px;
}
+
.mx_GroupView_body,
.mx_GroupView_rooms {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
+
.mx_GroupView_rooms {
display: -webkit-box;
display: -ms-flexbox;
@@ -1274,6 +1477,7 @@ html {
-ms-user-select: none;
user-select: none;
}
+
.mx_GroupView h3 {
text-transform: uppercase;
color: #3d3b39;
@@ -1281,24 +1485,30 @@ html {
font-size: 1.3rem;
margin-bottom: 10px;
}
+
.mx_GroupView_rooms_header .mx_AccessibleButton {
padding-left: 14px;
margin-bottom: 14px;
height: 24px;
}
+
.mx_GroupView_group {
border-top: 1px solid transparent;
}
+
.mx_GroupView_group_disabled {
opacity: 0.3;
pointer-events: none;
}
+
.mx_GroupView_rooms_header_addRow_button {
display: inline-block;
}
+
.mx_GroupView_rooms_header_addRow_button object {
pointer-events: none;
}
+
.mx_GroupView_rooms_header_addRow_label {
display: inline-block;
vertical-align: top;
@@ -1306,6 +1516,7 @@ html {
padding-left: 28px;
color: #0dbd8b;
}
+
.mx_GroupView_rooms .mx_RoomDetailList {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
@@ -1314,15 +1525,18 @@ html {
padding-top: 10px;
word-break: break-word;
}
+
.mx_GroupView .mx_RoomView_messageListWrapper {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
+
.mx_GroupView_membershipSection {
color: #888;
margin-top: 10px;
}
+
.mx_GroupView_membershipSubSection {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
@@ -1332,22 +1546,27 @@ html {
display: flex;
padding-bottom: 8px;
}
+
.mx_GroupView_membershipSubSection .mx_Spinner {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
+
.mx_GroupView_membershipSection_description {
line-height: 3.4rem;
}
+
.mx_GroupView_membershipSection_description .mx_BaseAvatar {
margin-right: 10px;
}
+
.mx_GroupView_membershipSection .mx_GroupView_textButton {
margin-right: 0;
margin-top: 0;
margin-left: 8px;
}
+
.mx_GroupView_memberSettings_toggle label {
cursor: pointer;
-webkit-user-select: none;
@@ -1355,27 +1574,33 @@ html {
-ms-user-select: none;
user-select: none;
}
+
.mx_GroupView_memberSettings input {
margin-right: 6px;
}
+
.mx_GroupView_featuredThings {
margin-top: 20px;
}
+
.mx_GroupView_featuredThings_header {
font-weight: 700;
font-size: 120%;
margin-bottom: 20px;
}
+
.mx_GroupView_featuredThings_category {
font-weight: 700;
font-size: 110%;
margin-top: 10px;
}
+
.mx_GroupView_featuredThings_container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_GroupView_featuredThing,
.mx_GroupView_featuredThings_addButton {
display: table-cell;
@@ -1383,36 +1608,45 @@ html {
width: 100px;
margin: 0 20px;
}
+
.mx_GroupView_featuredThing {
position: relative;
}
+
.mx_GroupView_featuredThing .mx_GroupView_featuredThing_deleteButton {
position: absolute;
top: -7px;
right: 11px;
opacity: 0.4;
}
+
.mx_GroupView_featuredThing .mx_BaseAvatar {
vertical-align: baseline;
vertical-align: initial;
}
+
.mx_GroupView_featuredThings_addButton object {
pointer-events: none;
}
+
.mx_GroupView_featuredThing_name {
word-wrap: break-word;
}
+
.mx_GroupView_uploadInput {
display: none;
}
+
.mx_GroupView_body .mx_AutoHideScrollbar > * {
margin: 11px 50px 50px 68px;
}
+
.mx_GroupView_groupDesc textarea {
width: 100%;
max-width: 100%;
height: 150px;
}
+
.mx_GroupView_changeDelayWarning,
.mx_GroupView_groupDesc_placeholder {
background-color: #f7f7f7;
@@ -1421,13 +1655,16 @@ html {
text-align: center;
margin: 20px 0;
}
+
.mx_GroupView_groupDesc_placeholder {
padding: 100px 20px;
cursor: pointer;
}
+
.mx_GroupView_changeDelayWarning {
padding: 40px 20px;
}
+
.mx_GroupView
.mx_MemberInfo
.mx_AutoHideScrollbar
@@ -1435,14 +1672,17 @@ html {
padding-left: 16px;
padding-right: 16px;
}
+
.mx_HeaderButtons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_RoomHeader_buttons + .mx_HeaderButtons:before {
content: unset;
}
+
.mx_HeaderButtons:before {
content: "";
background-color: #91a1c0;
@@ -1451,6 +1691,7 @@ html {
border-radius: 1px;
width: 1px;
}
+
.mx_HomePage {
max-width: 960px;
width: 100%;
@@ -1458,24 +1699,29 @@ html {
margin-left: auto;
margin-right: auto;
}
+
.mx_HomePage_default {
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_HomePage_default .mx_HomePage_default_wrapper {
margin: auto;
}
+
.mx_HomePage_default img {
height: 48px;
}
+
.mx_HomePage_default h1 {
font-weight: 600;
font-size: 3.2rem;
line-height: 4.4rem;
margin-bottom: 4px;
}
+
.mx_HomePage_default h4 {
margin-top: 4px;
font-weight: 600;
@@ -1483,15 +1729,18 @@ html {
line-height: 2.5rem;
color: #61708b;
}
+
.mx_HomePage_default .mx_MiniAvatarUploader {
margin: 0 auto;
}
+
.mx_HomePage_default .mx_HomePage_default_buttons {
margin: 60px auto 0;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
+
.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton {
padding: 73px 8px 15px;
width: 160px;
@@ -1510,6 +1759,7 @@ html {
color: #fff;
background-color: #0dbd8b;
}
+
.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton:before {
top: 20px;
left: 60px;
@@ -1523,24 +1773,28 @@ html {
-webkit-mask-size: contain;
mask-size: contain;
}
+
.mx_HomePage_default
.mx_HomePage_default_buttons
.mx_AccessibleButton.mx_HomePage_button_sendDm:before {
-webkit-mask-image: url(../../img/element-icons/feedback.a91241e.svg);
mask-image: url(../../img/element-icons/feedback.a91241e.svg);
}
+
.mx_HomePage_default
.mx_HomePage_default_buttons
.mx_AccessibleButton.mx_HomePage_button_explore:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
}
+
.mx_HomePage_default
.mx_HomePage_default_buttons
.mx_AccessibleButton.mx_HomePage_button_createGroup:before {
-webkit-mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
}
+
.mx_LeftPanel {
background-color: hsla(0, 0%, 96.1%, 0.9);
min-width: 206px;
@@ -1548,7 +1802,9 @@ html {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
+ contain: content;
}
+
.mx_LeftPanel .mx_LeftPanel_GroupFilterPanelContainer {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
@@ -1561,6 +1817,7 @@ html {
-ms-flex-direction: column;
flex-direction: column;
}
+
.mx_LeftPanel .mx_LeftPanel_GroupFilterPanelContainer,
.mx_LeftPanel .mx_LeftPanel_roomListContainer {
display: -webkit-box;
@@ -1569,6 +1826,7 @@ html {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
}
+
.mx_LeftPanel .mx_LeftPanel_roomListContainer {
background-color: hsla(0, 0%, 96.1%, 0.9);
-webkit-box-flex: 1;
@@ -1578,6 +1836,7 @@ html {
-ms-flex-direction: column;
flex-direction: column;
}
+
.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_userHeader {
padding: 12px;
-ms-flex-negative: 0;
@@ -1590,6 +1849,7 @@ html {
-ms-flex-direction: column;
flex-direction: column;
}
+
.mx_LeftPanel
.mx_LeftPanel_roomListContainer
.mx_LeftPanel_breadcrumbsContainer {
@@ -1605,7 +1865,9 @@ html {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
+ contain: content;
}
+
.mx_LeftPanel
.mx_LeftPanel_roomListContainer
.mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_leftOverflow {
@@ -1626,6 +1888,7 @@ html {
);
mask-image: linear-gradient(90deg, transparent, #000 5%);
}
+
.mx_LeftPanel
.mx_LeftPanel_roomListContainer
.mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_rightOverflow {
@@ -1648,6 +1911,7 @@ html {
);
mask-image: linear-gradient(90deg, #000, #000 95%, transparent);
}
+
.mx_LeftPanel
.mx_LeftPanel_roomListContainer
.mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow {
@@ -1684,6 +1948,7 @@ html {
transparent
);
}
+
.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer {
margin-left: 12px;
margin-right: 12px;
@@ -1696,6 +1961,7 @@ html {
-ms-flex-align: center;
align-items: center;
}
+
.mx_LeftPanel
.mx_LeftPanel_roomListContainer
.mx_LeftPanel_filterContainer
@@ -1711,6 +1977,7 @@ html {
margin: 0;
width: 0;
}
+
.mx_LeftPanel
.mx_LeftPanel_roomListContainer
.mx_LeftPanel_filterContainer
@@ -1723,6 +1990,40 @@ html {
+ .mx_LeftPanel_exploreButton:before {
content: none;
}
+
+.mx_LeftPanel
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_filterContainer
+ .mx_LeftPanel_dialPadButton {
+ width: 32px;
+ height: 32px;
+ border-radius: 8px;
+ background-color: rgba(141, 151, 165, 0.2);
+ position: relative;
+ margin-left: 8px;
+}
+
+.mx_LeftPanel
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_filterContainer
+ .mx_LeftPanel_dialPadButton:before {
+ content: "";
+ position: absolute;
+ top: 8px;
+ left: 8px;
+ width: 16px;
+ height: 16px;
+ -webkit-mask-image: url(../../img/element-icons/call/dialpad.3be6cbc.svg);
+ mask-image: url(../../img/element-icons/call/dialpad.3be6cbc.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background: #737d8c;
+}
+
.mx_LeftPanel
.mx_LeftPanel_roomListContainer
.mx_LeftPanel_filterContainer
@@ -1734,6 +2035,7 @@ html {
position: relative;
margin-left: 8px;
}
+
.mx_LeftPanel
.mx_LeftPanel_roomListContainer
.mx_LeftPanel_filterContainer
@@ -1754,6 +2056,7 @@ html {
mask-repeat: no-repeat;
background: #737d8c;
}
+
.mx_LeftPanel
.mx_LeftPanel_roomListContainer
.mx_LeftPanel_filterContainer
@@ -1761,6 +2064,7 @@ html {
-webkit-mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
}
+
.mx_LeftPanel
.mx_LeftPanel_roomListContainer
.mx_LeftPanel_roomListFilterCount {
@@ -1770,6 +2074,7 @@ html {
margin-top: 14px;
margin-bottom: -4px;
}
+
.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper {
overflow: hidden;
margin-top: 10px;
@@ -1777,29 +2082,35 @@ html {
-ms-flex: 1 0 0px;
flex: 1 0 0;
}
+
.mx_LeftPanel
.mx_LeftPanel_roomListContainer
.mx_LeftPanel_roomListWrapper.mx_LeftPanel_roomListWrapper_stickyBottom {
padding-bottom: 32px;
}
+
.mx_LeftPanel
.mx_LeftPanel_roomListContainer
.mx_LeftPanel_roomListWrapper.mx_LeftPanel_roomListWrapper_stickyTop {
padding-top: 32px;
}
+
.mx_LeftPanel
.mx_LeftPanel_roomListContainer
.mx_LeftPanel_actualRoomListContainer {
position: relative;
height: 100%;
}
+
.mx_LeftPanel.mx_LeftPanel_minimized {
min-width: unset;
width: unset !important;
}
+
.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer {
width: 68px;
}
+
.mx_LeftPanel.mx_LeftPanel_minimized
.mx_LeftPanel_roomListContainer
.mx_LeftPanel_userHeader {
@@ -1811,6 +2122,7 @@ html {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_LeftPanel.mx_LeftPanel_minimized
.mx_LeftPanel_roomListContainer
.mx_LeftPanel_filterContainer {
@@ -1822,6 +2134,11 @@ html {
-ms-flex-pack: center;
justify-content: center;
}
+
+.mx_LeftPanel.mx_LeftPanel_minimized
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_filterContainer
+ .mx_LeftPanel_dialPadButton,
.mx_LeftPanel.mx_LeftPanel_minimized
.mx_LeftPanel_roomListContainer
.mx_LeftPanel_filterContainer
@@ -1830,10 +2147,12 @@ html {
margin-top: 8px;
background-color: transparent;
}
+
.mx_LeftPanelWidget {
margin-left: 8px;
margin-bottom: 4px;
}
+
.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer {
display: -webkit-box;
display: -ms-flexbox;
@@ -1845,6 +2164,7 @@ html {
color: #8d99a5;
margin-top: 4px;
}
+
.mx_LeftPanelWidget
.mx_LeftPanelWidget_headerContainer
.mx_LeftPanelWidget_stickable {
@@ -1859,6 +2179,7 @@ html {
-ms-flex-align: center;
align-items: center;
}
+
.mx_LeftPanelWidget
.mx_LeftPanelWidget_headerContainer
.mx_LeftPanelWidget_headerText {
@@ -1873,6 +2194,7 @@ html {
overflow: hidden;
white-space: nowrap;
}
+
.mx_LeftPanelWidget
.mx_LeftPanelWidget_headerContainer
.mx_LeftPanelWidget_headerText
@@ -1883,6 +2205,7 @@ html {
height: 14px;
margin-right: 6px;
}
+
.mx_LeftPanelWidget
.mx_LeftPanelWidget_headerContainer
.mx_LeftPanelWidget_headerText
@@ -1901,6 +2224,7 @@ html {
-webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
}
+
.mx_LeftPanelWidget
.mx_LeftPanelWidget_headerContainer
.mx_LeftPanelWidget_headerText
@@ -1908,12 +2232,14 @@ html {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
+
.mx_LeftPanelWidget .mx_LeftPanelWidget_resizeBox {
position: relative;
-ms-flex-direction: column;
flex-direction: column;
overflow: visible;
}
+
.mx_LeftPanelWidget .mx_AppTileFullWidth,
.mx_LeftPanelWidget .mx_LeftPanelWidget_resizeBox {
display: -webkit-box;
@@ -1922,6 +2248,7 @@ html {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
}
+
.mx_LeftPanelWidget .mx_AppTileFullWidth {
-webkit-box-flex: 1;
-ms-flex: 1 0 0px;
@@ -1934,6 +2261,7 @@ html {
-webkit-mask-image: linear-gradient(0deg, transparent, #000 4px);
mask-image: linear-gradient(0deg, transparent, #000 4px);
}
+
.mx_LeftPanelWidget .mx_LeftPanelWidget_resizerHandle {
cursor: ns-resize;
border-radius: 3px;
@@ -1944,10 +2272,12 @@ html {
left: calc(50% - 32px) !important;
right: calc(50% - 32px) !important;
}
+
.mx_LeftPanelWidget:hover .mx_LeftPanelWidget_resizerHandle {
opacity: 0.8;
background-color: #2e2f32;
}
+
.mx_LeftPanelWidget .mx_LeftPanelWidget_maximizeButton {
margin-left: 8px;
margin-right: 7px;
@@ -1956,6 +2286,7 @@ html {
height: 24px;
border-radius: 32px;
}
+
.mx_LeftPanelWidget .mx_LeftPanelWidget_maximizeButton:before {
content: "";
width: 16px;
@@ -1973,9 +2304,11 @@ html {
mask-image: url(../../img/feather-customised/maximise.dc32127.svg);
background: #61708b;
}
+
.mx_LeftPanelWidget_maximizeButtonTooltip {
margin-top: -3px;
}
+
.mx_MainSplit {
display: -webkit-box;
display: -ms-flexbox;
@@ -1988,11 +2321,13 @@ html {
min-height: 0;
height: 100%;
}
+
.mx_MainSplit > .mx_RightPanel_ResizeWrapper {
padding: 5px;
margin-left: 8px;
height: calc(100vh - 51px);
}
+
.mx_MainSplit > .mx_RightPanel_ResizeWrapper:hover .mx_RightPanel_ResizeHandle {
top: 50% !important;
-webkit-transform: translateY(-50%);
@@ -2003,16 +2338,19 @@ html {
background-color: #2e2f32;
opacity: 0.8;
}
+
.mx_MatrixChat_splash {
position: relative;
height: 100%;
}
+
.mx_MatrixChat_splashButtons {
text-align: center;
width: 100%;
position: absolute;
bottom: 30px;
}
+
.mx_MatrixChat_wrapper {
display: -webkit-box;
display: -ms-flexbox;
@@ -2024,12 +2362,14 @@ html {
width: 100%;
height: 100%;
}
+
.mx_MatrixToolbar {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
height: 40px;
}
+
.mx_MatrixChat {
width: 100%;
height: 100%;
@@ -2044,6 +2384,7 @@ html {
flex: 1;
min-height: 0;
}
+
.mx_MatrixChat_syncError {
color: #fff;
background-color: #df2a8b;
@@ -2056,6 +2397,7 @@ html {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
+
.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle) {
background-color: #fff;
-webkit-box-flex: 1;
@@ -2064,9 +2406,11 @@ html {
min-width: 0;
height: 100%;
}
+
.mx_MatrixChat > .mx_ResizeHandle_horizontal:hover {
position: relative;
}
+
.mx_MatrixChat > .mx_ResizeHandle_horizontal:hover:before {
position: absolute;
left: 6px;
@@ -2080,6 +2424,7 @@ html {
background-color: #2e2f32;
opacity: 0.8;
}
+
.mx_MyGroups {
display: -webkit-box;
display: -ms-flexbox;
@@ -2089,13 +2434,16 @@ html {
-ms-flex-direction: column;
flex-direction: column;
}
+
.mx_MyGroups .mx_BetaCard {
margin: 0 72px;
max-width: 760px;
}
+
.mx_MyGroups .mx_RoomHeader_simpleHeader {
margin-left: 0;
}
+
.mx_MyGroups_header {
margin-left: 2px;
display: -webkit-box;
@@ -2104,10 +2452,12 @@ html {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
+
.mx_MyGroups > :not(.mx_RoomHeader):not(.mx_BetaCard) {
max-width: 960px;
margin: 40px;
}
+
.mx_MyGroups_headerCard {
-webkit-box-flex: 1;
-ms-flex: 1 0 50%;
@@ -2121,6 +2471,7 @@ html {
-ms-flex-align: center;
align-items: center;
}
+
.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
@@ -2132,6 +2483,7 @@ html {
background-color: rgba(92, 100, 112, 0.2);
position: relative;
}
+
.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button:before {
background-color: #5c6470;
-webkit-mask: url(../../img/icons-create-room.817ede2.svg);
@@ -2149,18 +2501,22 @@ html {
left: 0;
right: 0;
}
+
.mx_MyGroups_headerCard_header {
font-weight: 700;
margin-bottom: 10px;
}
+
.mx_MyGroups_headerCard_content {
padding-right: 15px;
}
+
.mx_MyGroups_joinBox {
visibility: hidden;
height: 0;
margin: 0;
}
+
.mx_MyGroups_content {
margin-left: 2px;
-webkit-box-flex: 1;
@@ -2175,9 +2531,11 @@ html {
flex-direction: column;
overflow-y: auto;
}
+
.mx_MyGroups_scrollable {
overflow-y: inherit;
}
+
.mx_MyGroups_placeholder {
background-color: #f7f7f7;
color: #888;
@@ -2185,6 +2543,7 @@ html {
border-radius: 10px;
text-align: center;
}
+
.mx_MyGroups_joinedGroups {
border-top: 1px solid transparent;
overflow-x: hidden;
@@ -2198,6 +2557,7 @@ html {
-ms-flex-line-pack: start;
align-content: flex-start;
}
+
.mx_MyGroups_joinedGroups .mx_GroupTile {
min-width: 300px;
max-width: 33%;
@@ -2214,10 +2574,12 @@ html {
align-items: flex-start;
cursor: pointer;
}
+
.mx_GroupTile_avatar {
cursor: -webkit-grab, -webkit-grab;
cursor: grab, -webkit-grab;
}
+
.mx_GroupTile_profile {
margin-left: 10px;
display: -webkit-box;
@@ -2231,19 +2593,23 @@ html {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_GroupTile_profile .mx_GroupTile_desc,
.mx_GroupTile_profile .mx_GroupTile_groupId,
.mx_GroupTile_profile .mx_GroupTile_name {
padding-right: 10px;
}
+
.mx_GroupTile_profile .mx_GroupTile_name {
margin: 0;
font-size: 1.5rem;
}
+
.mx_GroupTile_profile .mx_GroupTile_groupId {
font-size: 1.3rem;
opacity: 0.7;
}
+
.mx_GroupTile_profile .mx_GroupTile_desc {
display: -webkit-box;
-webkit-line-clamp: 2;
@@ -2252,12 +2618,14 @@ html {
max-height: 36px;
overflow: hidden;
}
+
.mx_NonUrgentToastContainer {
position: absolute;
bottom: 30px;
left: 28px;
z-index: 101;
}
+
.mx_NonUrgentToastContainer .mx_NonUrgentToastContainer_toast {
padding: 10px 12px;
border-radius: 8px;
@@ -2267,6 +2635,7 @@ html {
background-color: #17191c;
color: #fff;
}
+
.mx_NotificationPanel {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
@@ -2279,6 +2648,7 @@ html {
display: -ms-flexbox;
display: flex;
}
+
.mx_NotificationPanel .mx_RoomView_messageListWrapper {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
@@ -2291,17 +2661,21 @@ html {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_NotificationPanel .mx_RoomView_MessageList {
width: 100%;
}
+
.mx_NotificationPanel .mx_RoomView_MessageList h2 {
margin-left: 0;
}
+
.mx_NotificationPanel .mx_EventTile {
word-break: break-word;
position: relative;
padding-bottom: 18px;
}
+
.mx_NotificationPanel
.mx_EventTile:not(.mx_EventTile_last):not(.mx_EventTile_lastInSection):after {
position: absolute;
@@ -2313,64 +2687,87 @@ html {
opacity: 0.4;
content: "";
}
+
.mx_NotificationPanel .mx_EventTile_roomName {
font-weight: 700;
font-size: 1.4rem;
}
+
.mx_NotificationPanel .mx_EventTile_roomName > * {
vertical-align: middle;
}
+
.mx_NotificationPanel .mx_EventTile_roomName > .mx_BaseAvatar {
margin-right: 8px;
}
+
.mx_NotificationPanel .mx_EventTile_roomName a {
color: #2e2f32;
}
+
.mx_NotificationPanel .mx_EventTile_avatar {
display: none;
}
+
.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp,
.mx_NotificationPanel .mx_EventTile .mx_SenderProfile {
color: #2e2f32;
font-size: 1.2rem;
display: inline;
- padding-left: 0;
}
-.mx_NotificationPanel .mx_EventTile_senderDetails {
+
+.mx_NotificationPanel
+ .mx_EventTile:not([data-layout="bubble"])
+ .mx_EventTile_senderDetails {
padding-left: 36px;
position: relative;
}
-.mx_NotificationPanel .mx_EventTile_senderDetails a {
+
+.mx_NotificationPanel
+ .mx_EventTile:not([data-layout="bubble"])
+ .mx_EventTile_senderDetails
+ a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_NotificationPanel .mx_EventTile_roomName a,
.mx_NotificationPanel .mx_EventTile_senderDetails a {
text-decoration: none !important;
}
+
.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
visibility: visible;
position: static;
display: inline;
+ padding-left: 5px;
}
-.mx_NotificationPanel .mx_EventTile_line {
+
+.mx_NotificationPanel
+ .mx_EventTile:not([data-layout="bubble"])
+ .mx_EventTile_line {
margin-right: 0;
padding: 0 0 0 36px;
}
+
.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line {
padding-left: 0;
}
+
.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
background-color: #fff;
}
+
.mx_NotificationPanel .mx_EventTile_content {
margin-right: 0;
}
+
.mx_NotificationPanel_empty:before {
-webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
mask-image: url(../../img/element-icons/notifications.d298b39.svg);
}
+
.mx_RightPanel {
overflow-x: hidden;
-webkit-box-flex: 0;
@@ -2389,10 +2786,13 @@ html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
+ contain: strict;
}
+
.mx_RightPanel .mx_RoomView_MessageList {
padding: 14px 18px;
}
+
.mx_RightPanel_header {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
@@ -2402,6 +2802,7 @@ html {
-ms-flex: 0 0 52px;
flex: 0 0 52px;
}
+
.mx_RightPanel_headerButtonGroup {
height: 100%;
display: -webkit-box;
@@ -2413,6 +2814,7 @@ html {
-ms-flex-align: center;
align-items: center;
}
+
.mx_RightPanel_headerButton {
cursor: pointer;
-webkit-box-flex: 0;
@@ -2425,6 +2827,7 @@ html {
position: relative;
border-radius: 100%;
}
+
.mx_RightPanel_headerButton:before {
content: "";
position: absolute;
@@ -2438,39 +2841,154 @@ html {
-webkit-mask-size: contain;
mask-size: contain;
}
+
.mx_RightPanel_headerButton:hover {
background: rgba(13, 189, 139, 0.1);
}
+
.mx_RightPanel_headerButton:hover:before {
background-color: #0dbd8b;
}
+
.mx_RightPanel_notifsButton:before {
-webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
mask-image: url(../../img/element-icons/notifications.d298b39.svg);
-webkit-mask-position: center;
mask-position: center;
}
+
.mx_RightPanel_roomSummaryButton:before {
-webkit-mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
-webkit-mask-position: center;
mask-position: center;
}
+
.mx_RightPanel_groupMembersButton:before {
-webkit-mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
-webkit-mask-position: center;
mask-position: center;
}
+
.mx_RightPanel_roomsButton:before {
-webkit-mask-image: url(../../img/element-icons/community-rooms.8f0b6c9.svg);
mask-image: url(../../img/element-icons/community-rooms.8f0b6c9.svg);
-webkit-mask-position: center;
mask-position: center;
}
+
+.mx_RightPanel_pinnedMessagesButton:before {
+ -webkit-mask-image: url(../../img/element-icons/room/pin.a996417.svg);
+ mask-image: url(../../img/element-icons/room/pin.a996417.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+
+.mx_RightPanel_pinnedMessagesButton
+ .mx_RightPanel_pinnedMessagesButton_unreadIndicator {
+ position: absolute;
+ right: 0;
+ top: 0;
+ margin: 4px;
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ background: #ff4b55;
+ -webkit-box-shadow: 0 0 0 0 #ff4b55;
+ box-shadow: 0 0 0 0 #ff4b55;
+ -webkit-animation: mx_RightPanel_indicator_pulse 2s infinite;
+ animation: mx_RightPanel_indicator_pulse 2s infinite;
+ -webkit-animation-iteration-count: 1;
+ animation-iteration-count: 1;
+}
+
+.mx_RightPanel_pinnedMessagesButton
+ .mx_RightPanel_pinnedMessagesButton_unreadIndicator:after {
+ content: "";
+ position: absolute;
+ width: inherit;
+ height: inherit;
+ top: 0;
+ left: 0;
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ -webkit-transform-origin: center center;
+ transform-origin: center center;
+ -webkit-animation-name: mx_RightPanel_indicator_pulse_shadow;
+ animation-name: mx_RightPanel_indicator_pulse_shadow;
+ -webkit-animation-duration: inherit;
+ animation-duration: inherit;
+ -webkit-animation-iteration-count: inherit;
+ animation-iteration-count: inherit;
+ border-radius: 50%;
+ background: #ff4b55;
+}
+
+@-webkit-keyframes mx_RightPanel_indicator_pulse {
+ 0% {
+ -webkit-transform: scale(0.95);
+ transform: scale(0.95);
+ }
+ 70% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+ to {
+ -webkit-transform: scale(0.95);
+ transform: scale(0.95);
+ }
+}
+
+@keyframes mx_RightPanel_indicator_pulse {
+ 0% {
+ -webkit-transform: scale(0.95);
+ transform: scale(0.95);
+ }
+ 70% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+ to {
+ -webkit-transform: scale(0.95);
+ transform: scale(0.95);
+ }
+}
+
+@-webkit-keyframes mx_RightPanel_indicator_pulse_shadow {
+ 0% {
+ opacity: 0.7;
+ }
+ 70% {
+ -webkit-transform: scale(2.2);
+ transform: scale(2.2);
+ opacity: 0;
+ }
+ to {
+ opacity: 0;
+ }
+}
+
+@keyframes mx_RightPanel_indicator_pulse_shadow {
+ 0% {
+ opacity: 0.7;
+ }
+ 70% {
+ -webkit-transform: scale(2.2);
+ transform: scale(2.2);
+ opacity: 0;
+ }
+ to {
+ opacity: 0;
+ }
+}
+
.mx_RightPanel_headerButton_highlight:before {
background-color: #0dbd8b !important;
}
+
.mx_RightPanel_headerButton_badge {
font-size: 0.8rem;
border-radius: 8px;
@@ -2482,6 +3000,7 @@ html {
left: 20px;
padding: 2px 4px;
}
+
.mx_RightPanel_collapsebutton {
-webkit-box-flex: 1;
-ms-flex: 1;
@@ -2490,6 +3009,7 @@ html {
height: 16px;
border: none;
}
+
.mx_RightPanel .mx_GroupRoomList,
.mx_RightPanel .mx_MemberInfo,
.mx_RightPanel .mx_MemberList,
@@ -2501,23 +3021,28 @@ html {
-ms-flex: 1 1 0px;
flex: 1 1 0;
}
+
.mx_RightPanel .mx_RoomView_messagePanelSpinner {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
margin: auto;
}
+
.mx_RightPanel_empty {
margin-right: -28px;
}
+
.mx_RightPanel_empty h2 {
font-weight: 700;
margin: 16px 0;
}
+
.mx_RightPanel_empty h2,
.mx_RightPanel_empty p {
font-size: 1.4rem;
}
+
.mx_RightPanel_empty:before {
content: "";
display: block;
@@ -2532,6 +3057,7 @@ html {
-webkit-mask-position: center;
mask-position: center;
}
+
.mx_RightPanel_scopeHeader {
margin: 24px;
text-align: center;
@@ -2539,21 +3065,26 @@ html {
font-size: 1.8rem;
line-height: 2.2rem;
}
+
.mx_RightPanel_scopeHeader .mx_BaseAvatar {
margin-right: 8px;
vertical-align: middle;
}
+
.mx_RightPanel_scopeHeader .mx_BaseAvatar_image {
border-radius: 8px;
}
+
.mx_RoomDirectory_dialogWrapper > .mx_Dialog {
max-width: 960px;
height: 100%;
}
+
.mx_RoomDirectory_dialog {
height: 100%;
flex-direction: column;
}
+
.mx_RoomDirectory,
.mx_RoomDirectory_dialog {
display: -webkit-box;
@@ -2563,11 +3094,13 @@ html {
-webkit-box-direction: normal;
-ms-flex-direction: column;
}
+
.mx_RoomDirectory {
margin-bottom: 12px;
color: #2e2f32;
word-break: break-word;
}
+
.mx_RoomDirectory,
.mx_RoomDirectory_list {
flex-direction: column;
@@ -2575,6 +3108,7 @@ html {
-ms-flex: 1;
flex: 1;
}
+
.mx_RoomDirectory_list {
display: -webkit-box;
display: -ms-flexbox;
@@ -2583,31 +3117,74 @@ html {
-webkit-box-direction: normal;
-ms-flex-direction: column;
}
+
.mx_RoomDirectory_list .mx_RoomView_messageListWrapper {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
+
.mx_RoomDirectory_listheader {
display: block;
margin-top: 13px;
}
+
.mx_RoomDirectory_searchbox {
-webkit-box-flex: 1 !important;
-ms-flex: 1 !important;
flex: 1 !important;
}
+
.mx_RoomDirectory_listheader .mx_NetworkDropdown {
-webkit-box-flex: 0;
-ms-flex: 0 0 200px;
flex: 0 0 200px;
}
+
.mx_RoomDirectory_tableWrapper {
overflow-y: auto;
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
}
+
+.mx_RoomDirectory_tableWrapper .mx_RoomDirectory_footer {
+ margin-top: 24px;
+ text-align: center;
+}
+
+.mx_RoomDirectory_tableWrapper .mx_RoomDirectory_footer > h5 {
+ margin: 0;
+ font-weight: 600;
+ font-size: 1.5rem;
+ line-height: 1.8rem;
+ color: #2e2f32;
+}
+
+.mx_RoomDirectory_tableWrapper .mx_RoomDirectory_footer > p {
+ margin: 40px auto 60px;
+ font-size: 1.4rem;
+ line-height: 2rem;
+ color: #737d8c;
+ max-width: 464px;
+}
+
+.mx_RoomDirectory_tableWrapper .mx_RoomDirectory_footer > hr {
+ margin: 0;
+ border: none;
+ height: 1px;
+ background-color: #f3f8fd;
+}
+
+.mx_RoomDirectory_tableWrapper
+ .mx_RoomDirectory_footer
+ .mx_RoomDirectory_newRoom {
+ margin: 24px auto 0;
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+}
+
.mx_RoomDirectory_table {
color: #2e2f32;
display: grid;
@@ -2619,15 +3196,18 @@ html {
text-align: left;
width: 100%;
}
+
.mx_RoomDirectory_roomAvatar {
padding: 2px 14px 0 0;
}
+
.mx_RoomDirectory_roomMemberCount {
-ms-flex-item-align: center;
align-self: center;
color: #747474;
padding: 3px 10px 0;
}
+
.mx_RoomDirectory_roomMemberCount:before {
background-color: #747474;
display: inline-block;
@@ -2645,20 +3225,24 @@ html {
width: 16px;
height: 16px;
}
+
.mx_RoomDirectory_join,
.mx_RoomDirectory_preview {
-ms-flex-item-align: center;
align-self: center;
white-space: nowrap;
}
+
.mx_RoomDirectory_name {
display: inline-block;
font-size: 1.8rem;
font-weight: 600;
}
+
.mx_RoomDirectory_perms {
display: inline-block;
}
+
.mx_RoomDirectory_perm {
border-radius: 10px;
display: inline-block;
@@ -2668,6 +3252,7 @@ html {
color: #fff;
background-color: #aaa;
}
+
.mx_RoomDirectory_topic {
cursor: auto;
color: #747474;
@@ -2676,24 +3261,25 @@ html {
-webkit-line-clamp: 3;
overflow: hidden;
}
+
.mx_RoomDirectory_alias {
font-size: 1.2rem;
color: #a2a2a2;
}
-.mx_RoomDirectory_table tr {
- padding-bottom: 10px;
- cursor: pointer;
-}
+
.mx_RoomDirectory .mx_RoomView_MessageList {
padding: 0;
}
+
.mx_RoomDirectory > span {
font-size: 1.5rem;
margin-top: 0;
}
+
.mx_RoomDirectory > span .mx_AccessibleButton {
padding: 0;
}
+
.mx_RoomSearch {
-webkit-box-flex: 1;
-ms-flex: 1;
@@ -2710,6 +3296,7 @@ html {
-ms-flex-align: center;
align-items: center;
}
+
.mx_RoomSearch .mx_RoomSearch_icon {
width: 16px;
height: 16px;
@@ -2720,6 +3307,7 @@ html {
background-color: #737d8c;
margin-left: 7px;
}
+
.mx_RoomSearch .mx_RoomSearch_input {
border: none !important;
-webkit-box-flex: 1 !important;
@@ -2732,38 +3320,47 @@ html {
font-size: 1.2rem;
line-height: 1.6rem;
}
+
.mx_RoomSearch
.mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-webkit-input-placeholder {
color: #8d99a5 !important;
}
+
.mx_RoomSearch
.mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-moz-placeholder {
color: #8d99a5 !important;
}
+
.mx_RoomSearch
.mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded):-ms-input-placeholder {
color: #8d99a5 !important;
}
+
.mx_RoomSearch
.mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-ms-input-placeholder {
color: #8d99a5 !important;
}
+
.mx_RoomSearch
.mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::placeholder {
color: #8d99a5 !important;
}
+
.mx_RoomSearch.mx_RoomSearch_hasQuery {
border-color: #737d8c;
}
+
.mx_RoomSearch.mx_RoomSearch_focused {
-webkit-box-shadow: 0 0 4px 4px rgba(0, 132, 255, 0.5);
box-shadow: 0 0 4px 4px rgba(0, 132, 255, 0.5);
border-color: transparent;
}
+
.mx_RoomSearch.mx_RoomSearch_focused,
.mx_RoomSearch.mx_RoomSearch_hasQuery {
background-color: #fff;
}
+
.mx_RoomSearch.mx_RoomSearch_focused .mx_RoomSearch_clearButton,
.mx_RoomSearch.mx_RoomSearch_hasQuery .mx_RoomSearch_clearButton {
width: 16px;
@@ -2779,36 +3376,44 @@ html {
background-color: #737d8c;
margin-right: 8px;
}
+
.mx_RoomSearch .mx_RoomSearch_clearButton {
width: 0;
height: 0;
}
+
.mx_RoomSearch.mx_RoomSearch_minimized {
border-radius: 32px;
height: auto;
width: auto;
padding: 8px;
}
+
.mx_RoomSearch.mx_RoomSearch_minimized .mx_RoomSearch_icon {
margin-left: 0;
}
+
.mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages) {
margin-left: 65px;
min-height: 50px;
}
+
.mx_RoomStatusBar_typingIndicatorAvatars {
width: 52px;
margin-top: -1px;
text-align: left;
}
+
.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_image {
margin-right: -12px;
border: 1px solid #fff;
}
+
.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_initial {
padding-left: 1px;
padding-top: 1px;
}
+
.mx_RoomStatusBar_typingIndicatorRemaining {
display: inline-block;
color: #acacac;
@@ -2823,15 +3428,18 @@ html {
text-align: center;
position: absolute;
}
+
.mx_RoomStatusBar_scrollDownIndicator {
cursor: pointer;
padding-left: 1px;
}
+
.mx_RoomStatusBar_unreadMessagesBar {
padding-top: 10px;
color: #ff4b55;
cursor: pointer;
}
+
.mx_RoomStatusBar_connectionLostBar {
display: -webkit-box;
display: -ms-flexbox;
@@ -2839,6 +3447,7 @@ html {
margin-top: 19px;
min-height: 58px;
}
+
.mx_RoomStatusBar_unsentMessages > div[role="alert"] {
display: -webkit-box;
display: -ms-flexbox;
@@ -2852,9 +3461,11 @@ html {
background-color: #f3f8fd;
border-radius: 4px;
}
+
.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge {
margin-right: 12px;
}
+
.mx_RoomStatusBar_unsentMessages
.mx_RoomStatusBar_unsentBadge
.mx_NotificationBadge {
@@ -2862,19 +3473,23 @@ html {
height: 24px !important;
border-radius: 24px !important;
}
+
.mx_RoomStatusBar_unsentMessages
.mx_RoomStatusBar_unsentBadge
.mx_NotificationBadge
.mx_NotificationBadge_count {
font-size: 1.6rem !important;
}
+
.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentTitle {
color: #ff4b55;
font-size: 1.5rem;
}
+
.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentDescription {
font-size: 1.2rem;
}
+
.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
@@ -2883,18 +3498,21 @@ html {
margin-right: 22px;
color: #61708b;
}
+
.mx_RoomStatusBar_unsentMessages
.mx_RoomStatusBar_unsentButtonBar
.mx_AccessibleButton {
- padding: 5px 10px 5px 28px;
+ padding: 5px 10px 5px 30px;
display: inline-block;
position: relative;
}
+
.mx_RoomStatusBar_unsentMessages
.mx_RoomStatusBar_unsentButtonBar
.mx_AccessibleButton:nth-child(2) {
border-left: 1px solid #e3e8f0;
}
+
.mx_RoomStatusBar_unsentMessages
.mx_RoomStatusBar_unsentButtonBar
.mx_AccessibleButton:before {
@@ -2908,30 +3526,33 @@ html {
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
+ width: 18px;
+ height: 18px;
+ top: 50%;
+ -webkit-transform: translateY(-50%);
+ transform: translateY(-50%);
}
+
.mx_RoomStatusBar_unsentMessages
.mx_RoomStatusBar_unsentButtonBar
.mx_AccessibleButton.mx_RoomStatusBar_unsentCancelAllBtn:before {
- -webkit-mask-image: url(../../img/element-icons/trashcan.26f6c28.svg);
- mask-image: url(../../img/element-icons/trashcan.26f6c28.svg);
- width: 12px;
- height: 16px;
- top: calc(50% - 8px);
+ -webkit-mask-image: url(../../img/element-icons/trashcan.3b626db.svg);
+ mask-image: url(../../img/element-icons/trashcan.3b626db.svg);
}
+
.mx_RoomStatusBar_unsentMessages
.mx_RoomStatusBar_unsentButtonBar
.mx_AccessibleButton.mx_RoomStatusBar_unsentResendAllBtn {
padding-left: 34px;
}
+
.mx_RoomStatusBar_unsentMessages
.mx_RoomStatusBar_unsentButtonBar
.mx_AccessibleButton.mx_RoomStatusBar_unsentResendAllBtn:before {
-webkit-mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
- width: 18px;
- height: 18px;
- top: calc(50% - 9px);
}
+
.mx_RoomStatusBar_unsentMessages
.mx_RoomStatusBar_unsentButtonBar
.mx_InlineSpinner {
@@ -2939,32 +3560,38 @@ html {
margin-right: 5px;
top: 1px;
}
+
.mx_RoomStatusBar_unsentMessages
.mx_RoomStatusBar_unsentButtonBar
.mx_InlineSpinner
+ span {
margin-right: 10px;
}
+
.mx_RoomStatusBar_connectionLostBar img {
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: left;
}
+
.mx_RoomStatusBar_connectionLostBar_title {
color: #ff4b55;
}
+
.mx_RoomStatusBar_connectionLostBar_desc {
color: #2e2f32;
font-size: 1.3rem;
opacity: 0.5;
padding-bottom: 20px;
}
+
.mx_RoomStatusBar_resend_link {
color: #2e2f32 !important;
text-decoration: underline !important;
cursor: pointer;
}
+
.mx_RoomStatusBar_typingBar {
height: 50px;
line-height: 5rem;
@@ -2973,17 +3600,21 @@ html {
overflow-y: hidden;
display: block;
}
+
.mx_MatrixChat_useCompactLayout
.mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages) {
min-height: 40px;
}
+
.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_indicator {
margin-top: 10px;
}
+
.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_typingBar {
height: 40px;
line-height: 4rem;
}
+
.mx_RoomView {
word-wrap: break-word;
display: -webkit-box;
@@ -2994,6 +3625,7 @@ html {
-ms-flex-direction: column;
flex-direction: column;
}
+
@-webkit-keyframes mx_RoomView_fileDropTarget_animation {
0% {
opacity: 0;
@@ -3002,6 +3634,7 @@ html {
opacity: 0.95;
}
}
+
@keyframes mx_RoomView_fileDropTarget_animation {
0% {
opacity: 0;
@@ -3010,6 +3643,7 @@ html {
opacity: 0.95;
}
}
+
.mx_RoomView_fileDropTarget {
min-width: 0;
width: 100%;
@@ -3039,29 +3673,38 @@ html {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
}
+
@-webkit-keyframes mx_RoomView_fileDropTarget_image_animation {
0% {
- width: 0;
+ -webkit-transform: scaleX(0);
+ transform: scaleX(0);
}
to {
- width: 32px;
+ -webkit-transform: scaleX(1);
+ transform: scaleX(1);
}
}
+
@keyframes mx_RoomView_fileDropTarget_image_animation {
0% {
- width: 0;
+ -webkit-transform: scaleX(0);
+ transform: scaleX(0);
}
to {
- width: 32px;
+ -webkit-transform: scaleX(1);
+ transform: scaleX(1);
}
}
+
.mx_RoomView_fileDropTarget_image {
+ width: 32px;
-webkit-animation: mx_RoomView_fileDropTarget_image_animation;
animation: mx_RoomView_fileDropTarget_image_animation;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
margin-bottom: 16px;
}
+
.mx_RoomView_auxPanel {
min-width: 0;
width: 100%;
@@ -3071,6 +3714,7 @@ html {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
+
.mx_RoomView_auxPanel_fullHeight {
position: absolute;
top: 0;
@@ -3080,26 +3724,31 @@ html {
z-index: 3000;
background-color: #fff;
}
+
.mx_RoomView_auxPanel_hiddenHighlights {
border-bottom: 1px solid transparent;
padding: 10px 26px;
color: #ff4b55;
cursor: pointer;
}
+
.mx_RoomView_auxPanel_apps {
max-width: 1920px !important;
}
+
.mx_RoomView .mx_MainSplit,
.mx_RoomView_messagePanel {
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
}
+
.mx_RoomView_messagePanel {
width: 100%;
overflow-y: auto;
overflow-anchor: none;
}
+
.mx_RoomView_messagePanelSearchSpinner {
-webkit-box-flex: 1;
-ms-flex: 1;
@@ -3110,6 +3759,7 @@ html {
background-repeat: no-repeat;
position: relative;
}
+
.mx_RoomView_messagePanelSearchSpinner:before {
background-color: #888;
-webkit-mask: url(../../img/feather-customised/search-input.044bfa7.svg);
@@ -3127,6 +3777,7 @@ html {
right: 0;
height: 50px;
}
+
.mx_RoomView_body {
display: -webkit-box;
display: -ms-flexbox;
@@ -3140,6 +3791,7 @@ html {
flex: 1;
min-width: 0;
}
+
.mx_RoomView_body .mx_RoomView_messagePanel,
.mx_RoomView_body .mx_RoomView_messagePanelSearchSpinner,
.mx_RoomView_body .mx_RoomView_messagePanelSpinner {
@@ -3147,6 +3799,7 @@ html {
-ms-flex-order: 2;
order: 2;
}
+
.mx_RoomView_body .mx_RoomView_timeline {
position: relative;
-webkit-box-flex: 1;
@@ -3159,7 +3812,9 @@ html {
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
+ contain: content;
}
+
.mx_RoomView_statusArea {
width: 100%;
-webkit-box-flex: 0;
@@ -3172,18 +3827,22 @@ html {
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
+
.mx_RoomView_statusArea_expanded {
max-height: 100px;
}
+
.mx_RoomView_statusAreaBox {
margin: auto;
min-height: 50px;
}
+
.mx_RoomView_statusAreaBox_line {
margin-left: 65px;
border-top: 1px solid transparent;
height: 1px;
}
+
.mx_RoomView_messageListWrapper {
min-height: 100%;
display: -webkit-box;
@@ -3197,15 +3856,18 @@ html {
-ms-flex-pack: end;
justify-content: flex-end;
}
+
.mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
+
.mx_RoomView_searchResultsPanel a {
text-decoration: none;
color: inherit;
}
+
.mx_RoomView_empty {
font-size: 1.3rem;
padding: 0 24px;
@@ -3213,6 +3875,7 @@ html {
text-align: center;
margin-bottom: 80px;
}
+
.mx_RoomView_MessageList {
list-style-type: none;
padding: 18px;
@@ -3220,15 +3883,18 @@ html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
+
.mx_RoomView_MessageList li {
clear: both;
}
+
li.mx_RoomView_myReadMarker_container {
height: 0;
margin: 0;
padding: 0;
border: 0;
}
+
hr.mx_RoomView_myReadMarker {
border-top: 1px solid #0dbd8b;
border-bottom: 1px solid #0dbd8b;
@@ -3236,41 +3902,50 @@ hr.mx_RoomView_myReadMarker {
position: relative;
top: -1px;
z-index: 1;
+ will-change: width;
-webkit-transition: width easeinsine 0.4s 1s, opacity easeinsine 0.4s 1s;
transition: width easeinsine 0.4s 1s, opacity easeinsine 0.4s 1s;
width: 99%;
opacity: 1;
}
+
.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
background-color: #fff;
}
+
.mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename {
color: #fff;
opacity: 1;
}
+
.mx_RoomView_inCall .mx_RoomView_statusAreaBox_line {
margin-top: 2px;
border: none;
height: 0;
}
+
.mx_RoomView_inCall .mx_MessageComposer_wrapper {
border-top: 2px hidden;
padding-top: 1px;
}
+
.mx_RoomView_voipChevron {
position: absolute;
bottom: -11px;
right: 11px;
}
+
.mx_RoomView_voipButton {
float: right;
margin-right: 13px;
margin-top: 13px;
cursor: pointer;
}
+
.mx_RoomView_voipButton object {
pointer-events: none;
}
+
.mx_RoomView .mx_MessageComposer {
width: 100%;
-webkit-box-flex: 0;
@@ -3278,6 +3953,7 @@ hr.mx_RoomView_myReadMarker {
flex: 0 0 auto;
margin-right: 2px;
}
+
.mx_RoomView_ongoingConfCallNotification {
width: 100%;
text-align: center;
@@ -3287,15 +3963,19 @@ hr.mx_RoomView_myReadMarker {
padding: 6px 0;
cursor: pointer;
}
+
.mx_RoomView_ongoingConfCallNotification a {
color: #fff !important;
}
+
.mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList {
margin-bottom: 4px;
}
+
.mx_MatrixChat_useCompactLayout .mx_RoomView_statusAreaBox {
min-height: 42px;
}
+
.mx_ScrollPanel .mx_RoomView_MessageList {
position: relative;
display: -webkit-box;
@@ -3308,16 +3988,21 @@ hr.mx_RoomView_myReadMarker {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
+ content-visibility: auto;
+ contain-intrinsic-size: 50px;
}
+
.mx_SearchBox {
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
min-width: 0;
}
+
.mx_SearchBox.mx_SearchBox_blurred:not(:hover) {
background-color: transparent;
}
+
.mx_SearchBox .mx_SearchBox_closeButton {
cursor: pointer;
background-image: url(../../img/icons-close.11ff07c.svg);
@@ -3327,6 +4012,7 @@ hr.mx_RoomView_myReadMarker {
background-position: 50%;
padding: 9px;
}
+
.mx_SpacePanel {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
@@ -3341,14 +4027,15 @@ hr.mx_RoomView_myReadMarker {
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
- overflow-y: auto;
}
+
.mx_SpacePanel .mx_SpacePanel_spaceTreeWrapper {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 8px 8px 16px 0;
}
+
.mx_SpacePanel .mx_SpacePanel_toggleCollapse {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
@@ -3367,21 +4054,30 @@ hr.mx_RoomView_myReadMarker {
-webkit-mask-image: url(../../img/element-icons/expand-space-panel.e6f74b9.svg);
mask-image: url(../../img/element-icons/expand-space-panel.e6f74b9.svg);
}
+
.mx_SpacePanel .mx_SpacePanel_toggleCollapse.expanded {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
+
.mx_SpacePanel ul {
margin: 0;
list-style: none;
padding: 0;
}
+
.mx_SpacePanel ul > .mx_SpaceItem {
padding-left: 16px;
}
+
.mx_SpacePanel .mx_SpaceButton_toggleCollapse {
cursor: pointer;
}
+
+.mx_SpacePanel .mx_SpaceItem_dragging .mx_SpaceButton_toggleCollapse {
+ visibility: hidden;
+}
+
.mx_SpacePanel .mx_SpaceTreeLevel {
display: -webkit-box;
display: -ms-flexbox;
@@ -3395,6 +4091,7 @@ hr.mx_RoomView_myReadMarker {
-ms-flex-positive: 1;
flex-grow: 1;
}
+
.mx_SpacePanel .mx_SpaceItem {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
@@ -3402,10 +4099,12 @@ hr.mx_RoomView_myReadMarker {
-ms-flex-flow: wrap;
flex-flow: wrap;
}
+
.mx_SpacePanel .mx_SpaceItem.mx_SpaceItem_narrow {
-ms-flex-item-align: baseline;
align-self: baseline;
}
+
.mx_SpacePanel
.mx_SpaceItem.collapsed
> .mx_SpaceButton
@@ -3413,13 +4112,16 @@ hr.mx_RoomView_myReadMarker {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
+
.mx_SpacePanel .mx_SpaceItem.collapsed > .mx_SpaceTreeLevel {
display: none;
}
+
.mx_SpacePanel .mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton {
margin-left: 16px;
min-width: 40px;
}
+
.mx_SpacePanel .mx_SpaceButton {
border-radius: 8px;
display: -webkit-box;
@@ -3431,17 +4133,20 @@ hr.mx_RoomView_myReadMarker {
padding: 4px 4px 4px 0;
width: 100%;
}
+
.mx_SpacePanel
.mx_SpaceButton.mx_SpaceButton_active:not(.mx_SpaceButton_narrow)
.mx_SpaceButton_selectionWrapper {
background-color: #fff;
}
+
.mx_SpacePanel
.mx_SpaceButton.mx_SpaceButton_active.mx_SpaceButton_narrow
.mx_SpaceButton_selectionWrapper {
padding: 1px;
border: 3px solid #737d8c;
}
+
.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_selectionWrapper {
position: relative;
display: -webkit-box;
@@ -3456,6 +4161,7 @@ hr.mx_RoomView_myReadMarker {
border-radius: 12px;
padding: 4px;
}
+
.mx_SpacePanel
.mx_SpaceButton:not(.mx_SpaceButton_narrow)
.mx_SpaceButton_selectionWrapper {
@@ -3463,6 +4169,7 @@ hr.mx_RoomView_myReadMarker {
padding-right: 16px;
overflow: hidden;
}
+
.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_name {
-webkit-box-flex: 1;
-ms-flex: 1;
@@ -3476,6 +4183,7 @@ hr.mx_RoomView_myReadMarker {
font-size: 1.4rem;
line-height: 1.8rem;
}
+
.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_toggleCollapse {
width: 16px;
height: 20px;
@@ -3489,6 +4197,7 @@ hr.mx_RoomView_myReadMarker {
-webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
}
+
.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon {
width: 32px;
min-width: 32px;
@@ -3496,6 +4205,7 @@ hr.mx_RoomView_myReadMarker {
border-radius: 8px;
position: relative;
}
+
.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon:before {
position: absolute;
content: "";
@@ -3510,19 +4220,23 @@ hr.mx_RoomView_myReadMarker {
-webkit-mask-size: 18px;
mask-size: 18px;
}
+
.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon {
background-color: #fff;
}
+
.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon:before {
background-color: #3f3d3d;
-webkit-mask-image: url(../../img/element-icons/home.b706c0e.svg);
mask-image: url(../../img/element-icons/home.b706c0e.svg);
}
+
.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_new .mx_SpaceButton_icon {
background-color: #0dbd8b;
-webkit-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
+
.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_new .mx_SpaceButton_icon:before {
background-color: #fff;
-webkit-mask-image: url(../../img/element-icons/plus.62cc275.svg);
@@ -3530,18 +4244,22 @@ hr.mx_RoomView_myReadMarker {
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
+
.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_newCancel .mx_SpaceButton_icon {
background-color: #c1c6cd;
}
+
.mx_SpacePanel
.mx_SpaceButton.mx_SpaceButton_newCancel
.mx_SpaceButton_icon:before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
+
.mx_SpacePanel .mx_SpaceButton .mx_BaseAvatar_image {
border-radius: 8px;
}
+
.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton {
width: 20px;
min-width: 20px;
@@ -3552,6 +4270,7 @@ hr.mx_RoomView_myReadMarker {
position: absolute;
right: 4px;
}
+
.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton:before {
top: 2px;
left: 2px;
@@ -3569,6 +4288,7 @@ hr.mx_RoomView_myReadMarker {
mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
background: #2e2f32;
}
+
.mx_SpacePanel .mx_SpacePanel_badgeContainer {
position: absolute;
display: -webkit-box;
@@ -3578,22 +4298,27 @@ hr.mx_RoomView_myReadMarker {
-ms-flex-align: center;
align-items: center;
}
+
.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge {
margin: 0 2px;
}
+
.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge_dot {
margin: 0 7px;
}
+
.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer {
right: 0;
top: 0;
}
+
.mx_SpacePanel.collapsed
.mx_SpaceButton
.mx_SpacePanel_badgeContainer
.mx_NotificationBadge {
background-clip: padding-box;
}
+
.mx_SpacePanel.collapsed
.mx_SpaceButton
.mx_SpacePanel_badgeContainer
@@ -3601,6 +4326,7 @@ hr.mx_RoomView_myReadMarker {
margin: 0 -1px 0 0;
border: 3px solid hsla(0, 0%, 91%, 0.77);
}
+
.mx_SpacePanel.collapsed
.mx_SpaceButton
.mx_SpacePanel_badgeContainer
@@ -3612,16 +4338,19 @@ hr.mx_RoomView_myReadMarker {
margin: -5px -5px 0 0;
border: 2px solid hsla(0, 0%, 91%, 0.77);
}
+
.mx_SpacePanel.collapsed
.mx_SpaceButton.mx_SpaceButton_active
.mx_SpacePanel_badgeContainer {
right: -3px;
top: -3px;
}
+
.mx_SpacePanel:not(.collapsed) .mx_SpacePanel_badgeContainer {
position: absolute;
right: 4px;
}
+
.mx_SpacePanel:not(.collapsed)
.mx_SpaceButton:focus-within:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite)
.mx_SpacePanel_badgeContainer,
@@ -3635,6 +4364,7 @@ hr.mx_RoomView_myReadMarker {
height: 0;
display: none;
}
+
.mx_SpacePanel:not(.collapsed)
.mx_SpaceButton:focus-within:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite)
.mx_SpaceButton_menuButton,
@@ -3646,26 +4376,31 @@ hr.mx_RoomView_myReadMarker {
.mx_SpaceButton_menuButton {
display: block;
}
+
.mx_SpacePanel > .mx_AutoHideScrollbar > .mx_SpaceButton,
.mx_SpacePanel
> .mx_AutoHideScrollbar
> .mx_SpaceButton.mx_SpaceButton_active:before {
height: 32px;
}
+
.mx_SpacePanel > .mx_AutoHideScrollbar > ul {
padding-left: 0;
}
+
.mx_SpacePanel_contextMenu .mx_SpacePanel_contextMenu_header {
margin: 12px 16px;
font-weight: 600;
font-size: 1.5rem;
line-height: 1.8rem;
}
+
.mx_SpacePanel_contextMenu
.mx_IconizedContextMenu_optionList
.mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton {
color: #0dbd8b;
}
+
.mx_SpacePanel_contextMenu
.mx_IconizedContextMenu_optionList
.mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton
@@ -3674,37 +4409,46 @@ hr.mx_RoomView_myReadMarker {
-webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
}
+
.mx_SpacePanel_contextMenu .mx_SpacePanel_iconSettings:before {
-webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
mask-image: url(../../img/element-icons/settings.6b381af.svg);
}
+
.mx_SpacePanel_contextMenu .mx_SpacePanel_iconLeave:before {
-webkit-mask-image: url(../../img/element-icons/leave.bb917e7.svg);
mask-image: url(../../img/element-icons/leave.bb917e7.svg);
}
+
.mx_SpacePanel_contextMenu .mx_SpacePanel_iconMembers:before {
-webkit-mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
}
+
.mx_SpacePanel_contextMenu .mx_SpacePanel_iconPlus:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);
mask-image: url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);
}
+
.mx_SpacePanel_contextMenu .mx_SpacePanel_iconHash:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);
mask-image: url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);
}
+
.mx_SpacePanel_contextMenu .mx_SpacePanel_iconExplore:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
}
+
.mx_SpacePanel_sharePublicSpace {
margin: 0;
}
+
.mx_SpaceRoomDirectory_dialogWrapper > .mx_Dialog {
max-width: 960px;
height: 100%;
}
+
.mx_SpaceRoomDirectory {
height: 100%;
margin-bottom: 12px;
@@ -3715,6 +4459,7 @@ hr.mx_RoomView_myReadMarker {
-ms-flex-direction: column;
flex-direction: column;
}
+
.mx_SpaceRoomDirectory,
.mx_SpaceRoomDirectory .mx_Dialog_title,
.mx_SpaceRoomView_landing .mx_Dialog_title {
@@ -3722,16 +4467,19 @@ hr.mx_RoomView_myReadMarker {
display: -ms-flexbox;
display: flex;
}
+
.mx_SpaceRoomDirectory .mx_Dialog_title .mx_BaseAvatar,
.mx_SpaceRoomView_landing .mx_Dialog_title .mx_BaseAvatar {
margin-right: 12px;
-ms-flex-item-align: center;
align-self: center;
}
+
.mx_SpaceRoomDirectory .mx_Dialog_title .mx_BaseAvatar_image,
.mx_SpaceRoomView_landing .mx_Dialog_title .mx_BaseAvatar_image {
border-radius: 8px;
}
+
.mx_SpaceRoomDirectory .mx_Dialog_title > div > h1,
.mx_SpaceRoomView_landing .mx_Dialog_title > div > h1 {
font-weight: 600;
@@ -3739,6 +4487,7 @@ hr.mx_RoomView_myReadMarker {
line-height: 2.2rem;
margin: 0;
}
+
.mx_SpaceRoomDirectory .mx_Dialog_title > div > div,
.mx_SpaceRoomView_landing .mx_Dialog_title > div > div {
font-weight: 400;
@@ -3746,24 +4495,29 @@ hr.mx_RoomView_myReadMarker {
font-size: 1.5rem;
line-height: 2.4rem;
}
+
.mx_SpaceRoomDirectory .mx_AccessibleButton_kind_link,
.mx_SpaceRoomView_landing .mx_AccessibleButton_kind_link {
padding: 0;
}
+
.mx_SpaceRoomDirectory .mx_SearchBox,
.mx_SpaceRoomView_landing .mx_SearchBox {
margin: 24px 0 16px;
}
+
.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_noResults,
.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_noResults {
text-align: center;
}
+
.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_noResults > div,
.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_noResults > div {
font-size: 1.5rem;
line-height: 2.4rem;
color: #737d8c;
}
+
.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader,
.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader {
display: -webkit-box;
@@ -3777,6 +4531,7 @@ hr.mx_RoomView_myReadMarker {
line-height: 2.4rem;
color: #2e2f32;
}
+
.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton,
.mx_SpaceRoomView_landing
.mx_SpaceRoomDirectory_listHeader
@@ -3784,6 +4539,7 @@ hr.mx_RoomView_myReadMarker {
padding: 4px 12px;
font-weight: 400;
}
+
.mx_SpaceRoomDirectory
.mx_SpaceRoomDirectory_listHeader
.mx_AccessibleButton
@@ -3794,6 +4550,7 @@ hr.mx_RoomView_myReadMarker {
+ .mx_AccessibleButton {
margin-left: 16px;
}
+
.mx_SpaceRoomDirectory
.mx_SpaceRoomDirectory_listHeader
.mx_AccessibleButton_kind_danger_outline,
@@ -3808,10 +4565,12 @@ hr.mx_RoomView_myReadMarker {
.mx_AccessibleButton_kind_primary_outline {
padding: 3px 12px;
}
+
.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader > span,
.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader > span {
margin-left: auto;
}
+
.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_error,
.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_error {
position: relative;
@@ -3825,6 +4584,7 @@ hr.mx_RoomView_myReadMarker {
width: -moz-max-content;
width: max-content;
}
+
.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_error:before,
.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_error:before {
content: "";
@@ -3832,12 +4592,14 @@ hr.mx_RoomView_myReadMarker {
height: 16px;
width: 16px;
left: 0;
- background-image: url(../../img/element-icons/warning-badge.de1033e.svg);
+ background-image: url(../../img/element-icons/warning-badge.413c9a9.svg);
}
+
.mx_SpaceRoomDirectory_list {
margin-top: 16px;
padding-bottom: 40px;
}
+
.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomCount > h3 {
display: inline;
font-weight: 600;
@@ -3845,17 +4607,20 @@ hr.mx_RoomView_myReadMarker {
line-height: 2.2rem;
color: #2e2f32;
}
+
.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomCount > span {
margin-left: 8px;
font-size: 1.5rem;
line-height: 2.4rem;
color: #737d8c;
}
+
.mx_SpaceRoomDirectory_list
.mx_SpaceRoomDirectory_subspace
.mx_BaseAvatar_image {
border-radius: 8px;
}
+
.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle {
position: absolute;
left: -1px;
@@ -3865,6 +4630,7 @@ hr.mx_RoomView_myReadMarker {
border-radius: 4px;
background-color: #fff;
}
+
.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle:before {
content: "";
position: absolute;
@@ -3884,15 +4650,18 @@ hr.mx_RoomView_myReadMarker {
-webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
}
+
.mx_SpaceRoomDirectory_list
.mx_SpaceRoomDirectory_subspace_toggle.mx_SpaceRoomDirectory_subspace_toggle_shown:before {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
+
.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_children {
position: relative;
padding-left: 12px;
}
+
.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile {
position: relative;
padding: 8px 16px;
@@ -3909,10 +4678,12 @@ hr.mx_RoomView_myReadMarker {
-ms-flex-align: center;
align-items: center;
}
+
.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_BaseAvatar {
grid-row: 1;
grid-column: 1;
}
+
.mx_SpaceRoomDirectory_list
.mx_SpaceRoomDirectory_roomTile
.mx_SpaceRoomDirectory_roomTile_name {
@@ -3922,6 +4693,7 @@ hr.mx_RoomView_myReadMarker {
grid-row: 1;
grid-column: 2;
}
+
.mx_SpaceRoomDirectory_list
.mx_SpaceRoomDirectory_roomTile
.mx_SpaceRoomDirectory_roomTile_name
@@ -3932,6 +4704,7 @@ hr.mx_RoomView_myReadMarker {
font-size: 1.2rem;
line-height: 1.5rem;
}
+
.mx_SpaceRoomDirectory_list
.mx_SpaceRoomDirectory_roomTile
.mx_SpaceRoomDirectory_roomTile_name
@@ -3941,6 +4714,7 @@ hr.mx_RoomView_myReadMarker {
position: relative;
vertical-align: text-top;
}
+
.mx_SpaceRoomDirectory_list
.mx_SpaceRoomDirectory_roomTile
.mx_SpaceRoomDirectory_roomTile_name
@@ -3950,6 +4724,7 @@ hr.mx_RoomView_myReadMarker {
top: 0;
left: 0;
}
+
.mx_SpaceRoomDirectory_list
.mx_SpaceRoomDirectory_roomTile
.mx_SpaceRoomDirectory_roomTile_info {
@@ -3963,6 +4738,7 @@ hr.mx_RoomView_myReadMarker {
-webkit-line-clamp: 2;
overflow: hidden;
}
+
.mx_SpaceRoomDirectory_list
.mx_SpaceRoomDirectory_roomTile
.mx_SpaceRoomDirectory_actions {
@@ -3971,6 +4747,7 @@ hr.mx_RoomView_myReadMarker {
grid-column: 3;
grid-row: 1/3;
}
+
.mx_SpaceRoomDirectory_list
.mx_SpaceRoomDirectory_roomTile
.mx_SpaceRoomDirectory_actions
@@ -3980,6 +4757,7 @@ hr.mx_RoomView_myReadMarker {
display: inline-block;
visibility: hidden;
}
+
.mx_SpaceRoomDirectory_list
.mx_SpaceRoomDirectory_roomTile
.mx_SpaceRoomDirectory_actions
@@ -3990,6 +4768,7 @@ hr.mx_RoomView_myReadMarker {
.mx_AccessibleButton_kind_primary_outline {
padding: 3px 16px;
}
+
.mx_SpaceRoomDirectory_list
.mx_SpaceRoomDirectory_roomTile
.mx_SpaceRoomDirectory_actions
@@ -4000,14 +4779,17 @@ hr.mx_RoomView_myReadMarker {
vertical-align: middle;
margin-left: 12px;
}
+
.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:hover {
background-color: hsla(0, 0%, 91%, 0.77);
}
+
.mx_SpaceRoomDirectory_list
.mx_SpaceRoomDirectory_roomTile:hover
.mx_AccessibleButton {
visibility: visible;
}
+
.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:before,
.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_children:before {
content: "";
@@ -4018,6 +4800,7 @@ hr.mx_RoomView_myReadMarker {
left: 6px;
top: 0;
}
+
.mx_SpaceRoomDirectory_list
.mx_SpaceRoomDirectory_actions
.mx_SpaceRoomDirectory_actionsText {
@@ -4026,12 +4809,14 @@ hr.mx_RoomView_myReadMarker {
line-height: 1.5rem;
color: #737d8c;
}
+
.mx_SpaceRoomDirectory_list > hr {
border: none;
height: 1px;
background-color: rgba(141, 151, 165, 0.2);
margin: 20px 0;
}
+
.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_createRoom {
display: block;
margin: 16px auto 0;
@@ -4039,6 +4824,7 @@ hr.mx_RoomView_myReadMarker {
width: -moz-max-content;
width: max-content;
}
+
.mx_SpaceRoomView .mx_MainSplit > div:first-child {
padding: 80px 60px;
-webkit-box-flex: 1;
@@ -4047,6 +4833,7 @@ hr.mx_RoomView_myReadMarker {
max-height: 100%;
overflow-y: auto;
}
+
.mx_SpaceRoomView .mx_MainSplit > div:first-child h1 {
margin: 0;
font-size: 2.4rem;
@@ -4056,6 +4843,7 @@ hr.mx_RoomView_myReadMarker {
width: -moz-max-content;
width: max-content;
}
+
.mx_SpaceRoomView
.mx_MainSplit
> div:first-child
@@ -4066,9 +4854,11 @@ hr.mx_RoomView_myReadMarker {
margin-bottom: 24px;
max-width: 428px;
}
+
.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_AddExistingToSpace {
max-width: 428px;
}
+
.mx_SpaceRoomView
.mx_MainSplit
> div:first-child
@@ -4077,18 +4867,21 @@ hr.mx_RoomView_myReadMarker {
height: calc(100vh - 360px);
max-height: 400px;
}
+
.mx_SpaceRoomView
.mx_MainSplit
> div:first-child:not(.mx_SpaceRoomView_landing)
.mx_SpaceFeedbackPrompt {
width: 428px;
}
+
.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_SpaceRoomView_buttons {
display: block;
margin-top: 44px;
width: 428px;
text-align: right;
}
+
.mx_SpaceRoomView
.mx_MainSplit
> div:first-child
@@ -4097,6 +4890,7 @@ hr.mx_RoomView_myReadMarker {
padding: 8px 22px;
margin-left: 16px;
}
+
.mx_SpaceRoomView
.mx_MainSplit
> div:first-child
@@ -4104,12 +4898,15 @@ hr.mx_RoomView_myReadMarker {
input.mx_AccessibleButton {
border: none;
}
+
.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_Field {
max-width: 428px;
}
+
.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_Field + .mx_Field {
margin-top: 28px;
}
+
.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_SpaceRoomView_errorText {
font-weight: 600;
font-size: 1.2rem;
@@ -4117,12 +4914,14 @@ hr.mx_RoomView_myReadMarker {
color: #ff4b55;
margin-bottom: 28px;
}
+
.mx_SpaceRoomView
.mx_MainSplit
> div:first-child
.mx_AccessibleButton_disabled {
cursor: not-allowed;
}
+
.mx_SpaceRoomView .mx_SpaceRoomView_preview {
padding: 32px 24px !important;
margin: auto;
@@ -4134,11 +4933,13 @@ hr.mx_RoomView_myReadMarker {
border-radius: 8px;
position: relative;
}
+
.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_BetaCard_betaPill {
position: absolute;
right: 24px;
top: 32px;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_preview
.mx_SpaceRoomView_preview_spaceBetaPrompt {
@@ -4150,6 +4951,7 @@ hr.mx_RoomView_myReadMarker {
position: relative;
padding-left: 24px;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_preview
.mx_SpaceRoomView_preview_spaceBetaPrompt
@@ -4159,6 +4961,7 @@ hr.mx_RoomView_myReadMarker {
font-size: inherit;
line-height: inherit;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_preview
.mx_SpaceRoomView_preview_spaceBetaPrompt:before {
@@ -4177,6 +4980,7 @@ hr.mx_RoomView_myReadMarker {
mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
background-color: #737d8c;
}
+
.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter {
display: -webkit-box;
display: -ms-flexbox;
@@ -4187,12 +4991,14 @@ hr.mx_RoomView_myReadMarker {
margin-bottom: 20px;
font-size: 1.5rem;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_preview
.mx_SpaceRoomView_preview_inviter
> div {
margin-left: 8px;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_preview
.mx_SpaceRoomView_preview_inviter
@@ -4200,6 +5006,7 @@ hr.mx_RoomView_myReadMarker {
.mx_SpaceRoomView_preview_inviter_name {
line-height: 1.8rem;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_preview
.mx_SpaceRoomView_preview_inviter
@@ -4208,6 +5015,7 @@ hr.mx_RoomView_myReadMarker {
line-height: 2.4rem;
color: #737d8c;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_preview
> .mx_BaseAvatar
@@ -4215,9 +5023,11 @@ hr.mx_RoomView_myReadMarker {
.mx_SpaceRoomView .mx_SpaceRoomView_preview > .mx_BaseAvatar_image {
border-radius: 12px;
}
+
.mx_SpaceRoomView .mx_SpaceRoomView_preview h1.mx_SpaceRoomView_preview_name {
margin: 20px 0 !important;
}
+
.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_topic {
font-size: 1.4rem;
line-height: 2.2rem;
@@ -4226,11 +5036,13 @@ hr.mx_RoomView_myReadMarker {
max-height: 160px;
overflow-y: auto;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_preview
.mx_SpaceRoomView_preview_joinButtons {
margin-top: 20px;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_preview
.mx_SpaceRoomView_preview_joinButtons
@@ -4240,6 +5052,7 @@ hr.mx_RoomView_myReadMarker {
box-sizing: border-box;
padding: 14px 0;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_preview
.mx_SpaceRoomView_preview_joinButtons
@@ -4247,6 +5060,17 @@ hr.mx_RoomView_myReadMarker {
+ .mx_AccessibleButton {
margin-left: 20px;
}
+
+.mx_SpaceRoomView .mx_SpaceRoomView_landing {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_landing
> .mx_BaseAvatar
@@ -4254,23 +5078,27 @@ hr.mx_RoomView_myReadMarker {
.mx_SpaceRoomView .mx_SpaceRoomView_landing > .mx_BaseAvatar_image {
border-radius: 12px;
}
+
.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name {
margin: 24px 0 16px;
font-size: 1.5rem;
color: #737d8c;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_landing
.mx_SpaceRoomView_landing_name
> span {
display: inline-block;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_landing
.mx_SpaceRoomView_landing_name
.mx_SpaceRoomView_landing_nameRow {
margin-top: 12px;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_landing
.mx_SpaceRoomView_landing_name
@@ -4278,6 +5106,7 @@ hr.mx_RoomView_myReadMarker {
> h1 {
display: inline-block;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_landing
.mx_SpaceRoomView_landing_name
@@ -4286,6 +5115,7 @@ hr.mx_RoomView_myReadMarker {
margin-right: 4px;
vertical-align: middle;
}
+
.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info {
display: -webkit-box;
display: -ms-flexbox;
@@ -4294,6 +5124,7 @@ hr.mx_RoomView_myReadMarker {
-ms-flex-align: center;
align-items: center;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_landing
.mx_SpaceRoomView_landing_info
@@ -4301,6 +5132,7 @@ hr.mx_RoomView_myReadMarker {
display: inline-block;
margin: 0 auto 0 0;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_landing
.mx_SpaceRoomView_landing_info
@@ -4308,6 +5140,7 @@ hr.mx_RoomView_myReadMarker {
display: inline-block;
margin-right: 12px;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_landing
.mx_SpaceRoomView_landing_info
@@ -4315,6 +5148,7 @@ hr.mx_RoomView_myReadMarker {
.mx_FacePile_faces {
cursor: pointer;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_landing
.mx_SpaceRoomView_landing_info
@@ -4326,6 +5160,7 @@ hr.mx_RoomView_myReadMarker {
height: -moz-min-content;
height: min-content;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_landing
.mx_SpaceRoomView_landing_info
@@ -4345,6 +5180,7 @@ hr.mx_RoomView_myReadMarker {
-webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_landing
.mx_SpaceRoomView_landing_info
@@ -4354,6 +5190,7 @@ hr.mx_RoomView_myReadMarker {
width: 24px;
height: 24px;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_landing
.mx_SpaceRoomView_landing_info
@@ -4374,25 +5211,40 @@ hr.mx_RoomView_myReadMarker {
-webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
mask-image: url(../../img/element-icons/settings.6b381af.svg);
}
+
.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_topic {
font-size: 1.5rem;
margin-top: 12px;
margin-bottom: 16px;
+ white-space: pre-wrap;
+ word-wrap: break-word;
}
+
.mx_SpaceRoomView .mx_SpaceRoomView_landing > hr {
border: none;
height: 1px;
background-color: hsla(0, 0%, 91%, 0.77);
}
+
.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SearchBox {
margin: 0 0 20px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0;
+ flex: 0;
}
+
.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceFeedbackPrompt {
margin-bottom: 16px;
}
+
.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceFeedbackPrompt + hr {
display: none;
}
+
+.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_list {
+ display: contents;
+}
+
.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton {
position: relative;
padding: 16px 32px 16px 72px;
@@ -4404,13 +5256,16 @@ hr.mx_RoomView_myReadMarker {
font-size: 1.5rem;
margin: 20px 0;
}
+
.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton > h3 {
font-weight: 600;
margin: 0 0 4px;
}
+
.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton > span {
color: #737d8c;
}
+
.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton:before {
position: absolute;
content: "";
@@ -4426,32 +5281,82 @@ hr.mx_RoomView_myReadMarker {
mask-size: 24px;
background-color: #8d99a5;
}
+
.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton:hover {
border-color: #0dbd8b;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_privateScope
> .mx_AccessibleButton:hover:before {
background-color: #0dbd8b;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_privateScope
> .mx_AccessibleButton:hover
> span {
color: #2e2f32;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_privateScope
.mx_SpaceRoomView_privateScope_justMeButton:before {
-webkit-mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_privateScope
.mx_SpaceRoomView_privateScope_meAndMyTeammatesButton:before {
-webkit-mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
}
+
+.mx_SpaceRoomView .mx_SpaceRoomView_betaWarning {
+ padding: 12px 12px 12px 54px;
+ position: relative;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+ width: 432px;
+ border-radius: 8px;
+ background-color: #f7f7f7;
+ color: #737d8c;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+.mx_SpaceRoomView .mx_SpaceRoomView_betaWarning > h3 {
+ font-weight: 600;
+ font-size: inherit;
+ line-height: inherit;
+ margin: 0;
+}
+
+.mx_SpaceRoomView .mx_SpaceRoomView_betaWarning > p {
+ font-size: inherit;
+ line-height: inherit;
+ margin: 0;
+}
+
+.mx_SpaceRoomView .mx_SpaceRoomView_betaWarning:before {
+ -webkit-mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
+ mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ content: "";
+ width: 20px;
+ height: 20px;
+ position: absolute;
+ top: 14px;
+ left: 14px;
+ background-color: #737d8c;
+}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_inviteTeammates
.mx_SpaceRoomView_inviteTeammates_betaDisclaimer {
@@ -4464,6 +5369,7 @@ hr.mx_RoomView_myReadMarker {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_inviteTeammates
.mx_SpaceRoomView_inviteTeammates_betaDisclaimer
@@ -4472,12 +5378,14 @@ hr.mx_RoomView_myReadMarker {
left: 16px;
top: 16px;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_inviteTeammates
.mx_SpaceRoomView_inviteTeammates_buttons {
color: #737d8c;
margin-top: 28px;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_inviteTeammates
.mx_SpaceRoomView_inviteTeammates_buttons
@@ -4487,6 +5395,7 @@ hr.mx_RoomView_myReadMarker {
padding-left: 32px;
line-height: 24px;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_inviteTeammates
.mx_SpaceRoomView_inviteTeammates_buttons
@@ -4505,6 +5414,7 @@ hr.mx_RoomView_myReadMarker {
-webkit-mask-size: contain;
mask-size: contain;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_inviteTeammates
.mx_SpaceRoomView_inviteTeammates_buttons
@@ -4512,6 +5422,7 @@ hr.mx_RoomView_myReadMarker {
+ .mx_AccessibleButton {
margin-left: 32px;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_inviteTeammates
.mx_SpaceRoomView_inviteTeammates_buttons
@@ -4519,17 +5430,20 @@ hr.mx_RoomView_myReadMarker {
-webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
}
+
.mx_SpaceRoomView_info {
color: #737d8c;
font-size: 1.5rem;
line-height: 2.4rem;
margin: 20px 0;
}
+
.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private,
.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public {
padding-left: 20px;
position: relative;
}
+
.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private:before,
.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public:before {
position: absolute;
@@ -4544,37 +5458,44 @@ hr.mx_RoomView_myReadMarker {
mask-repeat: no-repeat;
background-color: #8d99a5;
}
+
.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public:before {
-webkit-mask-size: 12px;
mask-size: 12px;
-webkit-mask-image: url(../../img/globe.8201f08.svg);
mask-image: url(../../img/globe.8201f08.svg);
}
+
.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private:before {
-webkit-mask-size: 14px;
mask-size: 14px;
-webkit-mask-image: url(../../img/element-icons/lock.1f264bd.svg);
mask-image: url(../../img/element-icons/lock.1f264bd.svg);
}
+
.mx_SpaceRoomView_info .mx_AccessibleButton_kind_link {
color: inherit;
position: relative;
padding-left: 16px;
}
+
.mx_SpaceRoomView_info .mx_AccessibleButton_kind_link:before {
content: "·";
position: absolute;
left: 6px;
}
+
.mx_SpaceFeedbackPrompt {
margin-top: 18px;
margin-bottom: 12px;
}
+
.mx_SpaceFeedbackPrompt > hr {
border: none;
border-top: 1px solid #e7e7e7;
margin-bottom: 12px;
}
+
.mx_SpaceFeedbackPrompt > div {
display: -webkit-box;
display: -ms-flexbox;
@@ -4586,6 +5507,7 @@ hr.mx_RoomView_myReadMarker {
font-size: 1.5rem;
line-height: 2.4rem;
}
+
.mx_SpaceFeedbackPrompt > div > span {
color: #737d8c;
position: relative;
@@ -4594,6 +5516,7 @@ hr.mx_RoomView_myReadMarker {
line-height: inherit;
margin-right: auto;
}
+
.mx_SpaceFeedbackPrompt > div > span:before {
content: "";
position: absolute;
@@ -4611,6 +5534,7 @@ hr.mx_RoomView_myReadMarker {
-webkit-mask-position: center;
mask-position: center;
}
+
.mx_SpaceFeedbackPrompt > div .mx_AccessibleButton_kind_link {
color: #0dbd8b;
position: relative;
@@ -4619,6 +5543,7 @@ hr.mx_RoomView_myReadMarker {
font-size: inherit;
line-height: inherit;
}
+
.mx_SpaceFeedbackPrompt > div .mx_AccessibleButton_kind_link:before {
content: "";
position: absolute;
@@ -4635,28 +5560,132 @@ hr.mx_RoomView_myReadMarker {
-webkit-mask-position: center;
mask-position: center;
}
+
.mx_TabbedView {
padding: 0 0 0 16px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 8px 0 0;
}
-.mx_TabbedView_tabLabels {
+
+.mx_TabbedView,
+.mx_TabbedView_tabsOnLeft {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+
+.mx_TabbedView_tabsOnLeft {
+ position: absolute;
+}
+
+.mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabels {
width: 170px;
max-width: 170px;
- color: #45474a;
position: fixed;
}
+
+.mx_TabbedView_tabsOnLeft .mx_TabbedView_tabPanel {
+ margin-left: 240px;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+
+.mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabel_active {
+ background-color: #0dbd8b;
+ color: #fff;
+}
+
+.mx_TabbedView_tabsOnLeft
+ .mx_TabbedView_tabLabel_active
+ .mx_TabbedView_maskedIcon:before {
+ background-color: #fff;
+}
+
+.mx_TabbedView_tabsOnLeft .mx_TabbedView_maskedIcon {
+ width: 16px;
+ height: 16px;
+ margin-left: 8px;
+ margin-right: 16px;
+}
+
+.mx_TabbedView_tabsOnLeft .mx_TabbedView_maskedIcon:before {
+ -webkit-mask-size: 16px;
+ mask-size: 16px;
+ width: 16px;
+ height: 16px;
+}
+
+.mx_TabbedView_tabsOnTop {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+
+.mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabels {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin-bottom: 8px;
+}
+
+.mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabel {
+ padding-left: 0;
+ padding-right: 52px;
+}
+
+.mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabel .mx_TabbedView_tabLabel_text {
+ font-size: 15px;
+ color: #8d99a5;
+}
+
+.mx_TabbedView_tabsOnTop .mx_TabbedView_tabPanel {
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+}
+
+.mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabel_active,
+.mx_TabbedView_tabsOnTop
+ .mx_TabbedView_tabLabel_active
+ .mx_TabbedView_tabLabel_text {
+ color: #0dbd8b;
+}
+
+.mx_TabbedView_tabsOnTop
+ .mx_TabbedView_tabLabel_active
+ .mx_TabbedView_maskedIcon:before {
+ background-color: #0dbd8b;
+}
+
+.mx_TabbedView_tabsOnTop .mx_TabbedView_maskedIcon {
+ width: 22px;
+ height: 22px;
+ margin-left: 0;
+ margin-right: 8px;
+}
+
+.mx_TabbedView_tabsOnTop .mx_TabbedView_maskedIcon:before {
+ -webkit-mask-size: 22px;
+ mask-size: 22px;
+ width: inherit;
+ height: inherit;
+}
+
+.mx_TabbedView_tabLabels {
+ color: #45474a;
+}
+
.mx_TabbedView_tabLabel {
display: -webkit-box;
display: -ms-flexbox;
@@ -4671,46 +5700,31 @@ hr.mx_RoomView_myReadMarker {
font-size: 1.3rem;
position: relative;
}
-.mx_TabbedView_tabLabel_active {
- background-color: #0dbd8b;
- color: #fff;
-}
+
.mx_TabbedView_maskedIcon {
- margin-left: 8px;
- margin-right: 16px;
- width: 16px;
- height: 16px;
display: inline-block;
}
+
.mx_TabbedView_maskedIcon:before {
display: inline-block;
- background-color: #454545;
+ background-color: #c1c6cd;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
- -webkit-mask-size: 16px;
- mask-size: 16px;
- width: 16px;
- height: 16px;
-webkit-mask-position: center;
mask-position: center;
content: "";
}
-.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon:before {
- background-color: #fff;
-}
+
.mx_TabbedView_tabLabel_text {
vertical-align: middle;
}
+
.mx_TabbedView_tabPanel {
- margin-left: 240px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
}
+
.mx_TabbedView_tabPanel,
.mx_TabbedView_tabPanelContent {
-webkit-box-flex: 1;
@@ -4718,9 +5732,11 @@ hr.mx_RoomView_myReadMarker {
flex-grow: 1;
min-height: 0;
}
+
.mx_TabbedView_tabPanelContent {
overflow: auto;
}
+
.mx_ToastContainer {
position: absolute;
top: 0;
@@ -4730,11 +5746,13 @@ hr.mx_RoomView_myReadMarker {
display: grid;
grid-template-rows: 1fr 14px 6px;
}
+
.mx_ToastContainer.mx_ToastContainer_stacked:before {
content: "";
margin: 0 4px;
grid-row: 2/4;
}
+
.mx_ToastContainer .mx_Toast_toast,
.mx_ToastContainer.mx_ToastContainer_stacked:before {
grid-column: 1;
@@ -4743,6 +5761,7 @@ hr.mx_RoomView_myReadMarker {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
border-radius: 8px;
}
+
.mx_ToastContainer .mx_Toast_toast {
grid-row: 1/3;
color: #2e2f32;
@@ -4757,6 +5776,7 @@ hr.mx_RoomView_myReadMarker {
row-gap: 4px;
padding: 8px;
}
+
.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon:after,
.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon:before {
content: "";
@@ -4773,51 +5793,61 @@ hr.mx_RoomView_myReadMarker {
background-size: 100%;
background-repeat: no-repeat;
}
+
.mx_ToastContainer
.mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification:after {
-webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
mask-image: url(../../img/e2e/normal.76f0c09.svg);
background-color: #2e2f32;
}
+
.mx_ToastContainer
.mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification_warning:before {
background-color: #fff;
-webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
mask-image: url(../../img/e2e/normal.76f0c09.svg);
- -webkit-mask-size: 90%;
- mask-size: 90%;
+ -webkit-mask-size: 80%;
+ mask-size: 80%;
}
+
.mx_ToastContainer
.mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification_warning:after {
-webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
mask-image: url(../../img/e2e/warning.78bb264.svg);
background-color: #ff4b55;
}
+
.mx_ToastContainer
.mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_secure_backup:after {
-webkit-mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
background-color: #2e2f32;
}
+
.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_body,
.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_title {
grid-column: 2;
}
+
.mx_ToastContainer .mx_Toast_toast:not(.mx_Toast_hasIcon) {
padding-left: 12px;
}
+
.mx_ToastContainer .mx_Toast_toast:not(.mx_Toast_hasIcon) .mx_Toast_title {
grid-column: 1/-1;
}
+
.mx_ToastContainer .mx_Toast_toast .mx_Toast_description,
.mx_ToastContainer .mx_Toast_toast .mx_Toast_title {
padding-right: 8px;
}
+
.mx_ToastContainer .mx_Toast_toast .mx_Toast_title {
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
+
.mx_ToastContainer .mx_Toast_toast .mx_Toast_title h2 {
grid-column: 1/3;
grid-row: 1;
@@ -4828,6 +5858,7 @@ hr.mx_RoomView_myReadMarker {
width: auto;
vertical-align: middle;
}
+
.mx_ToastContainer .mx_Toast_toast .mx_Toast_title span {
padding-left: 8px;
float: right;
@@ -4835,21 +5866,33 @@ hr.mx_RoomView_myReadMarker {
line-height: 2.2rem;
color: #61708b;
}
+
.mx_ToastContainer .mx_Toast_toast .mx_Toast_body {
grid-column: 1/3;
grid-row: 2;
}
+
.mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons {
float: right;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
-.mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons .mx_FormButton {
+
+.mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons .mx_AccessibleButton {
min-width: 96px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
+
+.mx_ToastContainer
+ .mx_Toast_toast
+ .mx_Toast_buttons
+ .mx_AccessibleButton
+ + .mx_AccessibleButton {
+ margin-left: 5px;
+}
+
.mx_ToastContainer .mx_Toast_toast .mx_Toast_description {
max-width: 272px;
overflow: hidden;
@@ -4857,6 +5900,7 @@ hr.mx_RoomView_myReadMarker {
margin: 4px 0 11px;
font-size: 1.2rem;
}
+
.mx_ToastContainer
.mx_Toast_toast
.mx_Toast_description
@@ -4864,22 +5908,28 @@ hr.mx_RoomView_myReadMarker {
font-size: inherit;
padding: 0;
}
+
.mx_ToastContainer .mx_Toast_toast .mx_Toast_description a {
text-decoration: none;
}
+
.mx_ToastContainer .mx_Toast_toast .mx_Toast_detail {
color: #737d8c;
}
+
.mx_ToastContainer .mx_Toast_toast .mx_Toast_deviceID {
font-size: 1rem;
}
+
.mx_UploadBar {
padding-left: 65px;
position: relative;
}
+
.mx_UploadBar .mx_ProgressBar {
width: calc(100% - 40px);
}
+
.mx_UploadBar_filename {
margin-top: 5px;
color: #61708b;
@@ -4888,6 +5938,7 @@ hr.mx_RoomView_myReadMarker {
font-size: 1.5rem;
vertical-align: middle;
}
+
.mx_UploadBar_filename:before {
content: "";
height: 18px;
@@ -4896,6 +5947,7 @@ hr.mx_RoomView_myReadMarker {
-webkit-mask-image: url(../../img/element-icons/upload.e2a53e0.svg);
mask-image: url(../../img/element-icons/upload.e2a53e0.svg);
}
+
.mx_UploadBar_cancel,
.mx_UploadBar_filename:before {
position: absolute;
@@ -4906,6 +5958,7 @@ hr.mx_RoomView_myReadMarker {
mask-position: center;
background-color: #61708b;
}
+
.mx_UploadBar_cancel {
right: 0;
height: 16px;
@@ -4914,16 +5967,20 @@ hr.mx_RoomView_myReadMarker {
-webkit-mask-image: url(../../img/icons-close.11ff07c.svg);
mask-image: url(../../img/icons-close.11ff07c.svg);
}
+
.mx_UserMenu {
padding-right: 6px;
}
+
.mx_UserMenu.mx_UserMenu_prototype {
margin-bottom: 6px;
padding-right: 0;
}
+
.mx_UserMenu.mx_UserMenu_prototype .mx_UserMenu_headerButtons {
margin-right: 2px;
}
+
.mx_UserMenu.mx_UserMenu_prototype:after {
content: "";
border-bottom: 1px solid #2e2f32;
@@ -4931,12 +5988,14 @@ hr.mx_RoomView_myReadMarker {
display: block;
padding-top: 8px;
}
+
.mx_UserMenu .mx_UserMenu_headerButtons {
width: 16px;
height: 16px;
position: relative;
display: block;
}
+
.mx_UserMenu .mx_UserMenu_headerButtons:before {
content: "";
width: 16px;
@@ -4954,6 +6013,7 @@ hr.mx_RoomView_myReadMarker {
-webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
}
+
.mx_UserMenu .mx_UserMenu_row {
display: -webkit-box;
display: -ms-flexbox;
@@ -4962,12 +6022,14 @@ hr.mx_RoomView_myReadMarker {
-ms-flex-align: center;
align-items: center;
}
+
.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userAvatarContainer {
position: relative;
margin-right: 8px;
height: 32px;
padding: 3px 0;
}
+
.mx_UserMenu
.mx_UserMenu_row
.mx_UserMenu_userAvatarContainer
@@ -4976,16 +6038,19 @@ hr.mx_RoomView_myReadMarker {
-o-object-fit: cover;
object-fit: cover;
}
+
.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
min-width: 0;
}
+
.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_subUserName,
.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_userName {
display: block;
}
+
.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_subUserName {
color: #61708b;
font-size: 1.3rem;
@@ -4997,6 +6062,7 @@ hr.mx_RoomView_myReadMarker {
overflow: hidden;
white-space: nowrap;
}
+
.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userName {
font-weight: 600;
font-size: 1.5rem;
@@ -5008,12 +6074,14 @@ hr.mx_RoomView_myReadMarker {
overflow: hidden;
white-space: nowrap;
}
+
.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd {
width: 24px;
height: 24px;
margin-right: 8px;
position: relative;
}
+
.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd:before {
content: "";
position: absolute;
@@ -5027,61 +6095,75 @@ hr.mx_RoomView_myReadMarker {
mask-repeat: no-repeat;
background: #61708b;
}
+
.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd.mx_UserMenu_dnd_noisy:before {
-webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
mask-image: url(../../img/element-icons/notifications.d298b39.svg);
}
+
.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd.mx_UserMenu_dnd_muted:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);
mask-image: url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);
}
+
.mx_UserMenu.mx_UserMenu_minimized {
padding-right: 0;
}
+
.mx_UserMenu.mx_UserMenu_minimized .mx_UserMenu_userAvatarContainer {
margin-right: 0;
}
+
.mx_UserMenu_contextMenu {
width: 258px;
}
+
.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype {
padding-bottom: 16px;
}
+
.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype
.mx_UserMenu_contextMenu_header {
padding-bottom: 0;
padding-top: 16px;
}
+
.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype
.mx_UserMenu_contextMenu_header:nth-child(n + 2) {
padding-top: 8px;
}
+
.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype hr {
width: 85%;
opacity: 0.2;
border: none;
border-bottom: 1px solid #2e2f32;
}
+
.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu
> .mx_IconizedContextMenu_optionList {
margin-top: 4px;
}
+
.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu
> .mx_IconizedContextMenu_optionList:before {
border: none;
}
+
.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu
> .mx_IconizedContextMenu_optionList
> .mx_AccessibleButton {
padding-top: 2px;
padding-bottom: 2px;
}
+
.mx_UserMenu_contextMenu.mx_IconizedContextMenu
.mx_IconizedContextMenu_optionList_red
.mx_AccessibleButton {
padding-top: 16px;
padding-bottom: 16px;
}
+
.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header {
padding: 20px;
display: -webkit-box;
@@ -5091,6 +6173,7 @@ hr.mx_RoomView_myReadMarker {
-ms-flex-align: center;
align-items: center;
}
+
.mx_UserMenu_contextMenu
.mx_UserMenu_contextMenu_header
.mx_UserMenu_contextMenu_name {
@@ -5103,6 +6186,7 @@ hr.mx_RoomView_myReadMarker {
flex-direction: column;
width: calc(100% - 40px);
}
+
.mx_UserMenu_contextMenu
.mx_UserMenu_contextMenu_header
.mx_UserMenu_contextMenu_name
@@ -5115,6 +6199,7 @@ hr.mx_RoomView_myReadMarker {
overflow: hidden;
white-space: nowrap;
}
+
.mx_UserMenu_contextMenu
.mx_UserMenu_contextMenu_header
.mx_UserMenu_contextMenu_name
@@ -5123,6 +6208,7 @@ hr.mx_RoomView_myReadMarker {
font-size: 1.5rem;
line-height: 2rem;
}
+
.mx_UserMenu_contextMenu
.mx_UserMenu_contextMenu_header
.mx_UserMenu_contextMenu_name
@@ -5130,6 +6216,7 @@ hr.mx_RoomView_myReadMarker {
font-size: 1.5rem;
line-height: 2.4rem;
}
+
.mx_UserMenu_contextMenu
.mx_UserMenu_contextMenu_header
.mx_UserMenu_contextMenu_themeButton {
@@ -5151,28 +6238,33 @@ hr.mx_RoomView_myReadMarker {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_UserMenu_contextMenu
.mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts,
.mx_UserMenu_contextMenu
.mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_hostingLink {
padding-top: 0;
}
+
.mx_UserMenu_contextMenu
.mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts {
display: inline-block;
}
+
.mx_UserMenu_contextMenu
.mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts
> span {
font-weight: 600;
display: block;
}
+
.mx_UserMenu_contextMenu
.mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts
> span
+ span {
margin-top: 8px;
}
+
.mx_UserMenu_contextMenu
.mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts
.mx_AccessibleButton_kind_link {
@@ -5180,11 +6272,13 @@ hr.mx_RoomView_myReadMarker {
font-size: inherit;
padding: 0;
}
+
.mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon {
width: 16px;
height: 16px;
display: block;
}
+
.mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon:before {
content: "";
width: 16px;
@@ -5198,58 +6292,71 @@ hr.mx_RoomView_myReadMarker {
mask-repeat: no-repeat;
background: #2e2f32;
}
+
.mx_UserMenu_contextMenu .mx_UserMenu_iconHome:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/home.1b4edd5.svg);
mask-image: url(../../img/element-icons/roomlist/home.1b4edd5.svg);
}
+
.mx_UserMenu_contextMenu .mx_UserMenu_iconHosting:before {
-webkit-mask-image: url(../../img/element-icons/brands/element.182040d.svg);
mask-image: url(../../img/element-icons/brands/element.182040d.svg);
}
+
.mx_UserMenu_contextMenu .mx_UserMenu_iconBell:before {
-webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
mask-image: url(../../img/element-icons/notifications.d298b39.svg);
}
+
.mx_UserMenu_contextMenu .mx_UserMenu_iconLock:before {
-webkit-mask-image: url(../../img/element-icons/security.66f2fa6.svg);
mask-image: url(../../img/element-icons/security.66f2fa6.svg);
}
+
.mx_UserMenu_contextMenu .mx_UserMenu_iconSettings:before {
-webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
mask-image: url(../../img/element-icons/settings.6b381af.svg);
}
+
.mx_UserMenu_contextMenu .mx_UserMenu_iconArchive:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/archived.226584d.svg);
mask-image: url(../../img/element-icons/roomlist/archived.226584d.svg);
}
+
.mx_UserMenu_contextMenu .mx_UserMenu_iconMessage:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/feedback.b9a3f53.svg);
mask-image: url(../../img/element-icons/roomlist/feedback.b9a3f53.svg);
}
+
.mx_UserMenu_contextMenu .mx_UserMenu_iconSignOut:before {
-webkit-mask-image: url(../../img/element-icons/leave.bb917e7.svg);
mask-image: url(../../img/element-icons/leave.bb917e7.svg);
}
+
.mx_UserMenu_contextMenu .mx_UserMenu_iconMembers:before {
-webkit-mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
}
+
.mx_UserMenu_contextMenu .mx_UserMenu_iconInvite:before {
-webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
}
+
.mx_ViewSource_separator {
clear: both;
border-bottom: 1px solid #e5e5e5;
padding-top: 0.7em;
padding-bottom: 0.7em;
}
+
.mx_ViewSource_heading {
font-size: 1.7rem;
font-weight: 400;
color: #2e2f32;
margin-top: 0.7em;
}
+
.mx_ViewSource pre {
text-align: left;
font-size: 1.2rem;
@@ -5257,9 +6364,11 @@ hr.mx_RoomView_myReadMarker {
word-wrap: break-word;
white-space: pre-wrap;
}
+
.mx_ViewSource_details {
margin-top: 0.8em;
}
+
.mx_CompleteSecurity_header {
display: -webkit-box;
display: -ms-flexbox;
@@ -5268,24 +6377,29 @@ hr.mx_RoomView_myReadMarker {
-ms-flex-align: center;
align-items: center;
}
+
.mx_CompleteSecurity_headerIcon {
width: 24px;
height: 24px;
margin-right: 4px;
position: relative;
}
+
.mx_CompleteSecurity_heroIcon {
width: 128px;
height: 128px;
position: relative;
margin: 0 auto;
}
+
.mx_CompleteSecurity_body {
font-size: 1.5rem;
}
+
.mx_CompleteSecurity_waiting {
color: #8d99a5;
}
+
.mx_CompleteSecurity_actionRow {
display: -webkit-box;
display: -ms-flexbox;
@@ -5295,13 +6409,16 @@ hr.mx_RoomView_myReadMarker {
justify-content: flex-end;
margin-top: 2.8rem;
}
+
.mx_CompleteSecurity_actionRow .mx_AccessibleButton {
-webkit-margin-start: 18px;
margin-inline-start: 18px;
}
+
.mx_CompleteSecurity_actionRow .mx_AccessibleButton.warning {
color: #ff4b55;
}
+
.mx_Login_submit {
vertical-align: middle;
border: 0;
@@ -5323,23 +6440,28 @@ hr.mx_RoomView_myReadMarker {
box-sizing: border-box;
text-align: center;
}
+
.mx_Login_submit:disabled {
opacity: 0.3;
cursor: default;
}
+
.mx_Login_loader {
display: inline;
position: relative;
top: 2px;
left: 8px;
}
+
.mx_Login_loader .mx_Spinner {
display: inline;
}
+
.mx_Login_loader .mx_Spinner img {
width: 16px;
height: 16px;
}
+
.mx_Login_error {
color: #ff4b55;
font-weight: 700;
@@ -5347,13 +6469,16 @@ hr.mx_RoomView_myReadMarker {
margin-top: 12px;
margin-bottom: 12px;
}
+
.mx_Login_error.mx_Login_serverError {
text-align: left;
font-weight: 400;
}
+
.mx_Login_error.mx_Login_serverError.mx_Login_serverErrorNonFatal {
color: #ff8d13;
}
+
.mx_Login_type_container {
display: -webkit-box;
display: -ms-flexbox;
@@ -5363,29 +6488,274 @@ hr.mx_RoomView_myReadMarker {
align-items: center;
color: #232f32;
}
+
.mx_Login_type_container .mx_Field {
margin: 0;
}
+
.mx_Login_type_label {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
+
.mx_Login_underlinedServerName {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
border-bottom: 1px dashed #0dbd8b;
}
+
div.mx_AccessibleButton_kind_link.mx_Login_forgot {
display: block;
margin: 0 auto;
font-size: inherit;
padding: 0;
}
+
div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
cursor: not-allowed;
}
+
+.mx_MediaBody.mx_AudioPlayer_container {
+ padding: 16px 12px 12px;
+}
+
+.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_primaryContainer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+.mx_MediaBody.mx_AudioPlayer_container
+ .mx_AudioPlayer_primaryContainer
+ .mx_PlayPauseButton {
+ margin-right: 8px;
+}
+
+.mx_MediaBody.mx_AudioPlayer_container
+ .mx_AudioPlayer_primaryContainer
+ .mx_AudioPlayer_mediaInfo {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ overflow: hidden;
+}
+
+.mx_MediaBody.mx_AudioPlayer_container
+ .mx_AudioPlayer_primaryContainer
+ .mx_AudioPlayer_mediaInfo
+ > * {
+ display: block;
+}
+
+.mx_MediaBody.mx_AudioPlayer_container
+ .mx_AudioPlayer_primaryContainer
+ .mx_AudioPlayer_mediaInfo
+ .mx_AudioPlayer_mediaName {
+ color: #2e2f32;
+ font-size: 1.5rem;
+ line-height: 1.5rem;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ padding-bottom: 4px;
+}
+
+.mx_MediaBody.mx_AudioPlayer_container
+ .mx_AudioPlayer_primaryContainer
+ .mx_AudioPlayer_mediaInfo
+ .mx_AudioPlayer_byline {
+ font-size: 1.2rem;
+ line-height: 1.2rem;
+}
+
+.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_seek {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_seek .mx_SeekBar {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+}
+
+.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_seek .mx_Clock {
+ width: 4.2rem;
+ min-width: 4.2rem;
+ padding-left: 4px;
+ text-align: right;
+}
+
+.mx_PlayPauseButton {
+ position: relative;
+ width: 32px;
+ height: 32px;
+ min-width: 32px;
+ min-height: 32px;
+ border-radius: 32px;
+ background-color: #f4f6fa;
+}
+
+.mx_PlayPauseButton:before {
+ content: "";
+ position: absolute;
+ background-color: #737d8c;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+}
+
+.mx_PlayPauseButton.mx_PlayPauseButton_disabled:before {
+ opacity: 0.5;
+}
+
+.mx_PlayPauseButton.mx_PlayPauseButton_play:before {
+ width: 13px;
+ height: 16px;
+ top: 8px;
+ left: 12px;
+ -webkit-mask-image: url(../../img/element-icons/play.a72552b.svg);
+ mask-image: url(../../img/element-icons/play.a72552b.svg);
+}
+
+.mx_PlayPauseButton.mx_PlayPauseButton_pause:before {
+ width: 10px;
+ height: 12px;
+ top: 10px;
+ left: 11px;
+ -webkit-mask-image: url(../../img/element-icons/pause.c4c0886.svg);
+ mask-image: url(../../img/element-icons/pause.c4c0886.svg);
+}
+
+.mx_MediaBody.mx_VoiceMessagePrimaryContainer {
+ padding-right: 11px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ contain: content;
+}
+
+.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar {
+ background-color: #c1c6cd;
+ height: 100%;
+ -webkit-transform: scaleY(max(0.05, var(--barHeight)));
+ transform: scaleY(max(0.05, var(--barHeight)));
+}
+
+.mx_MediaBody.mx_VoiceMessagePrimaryContainer
+ .mx_Waveform
+ .mx_Waveform_bar.mx_Waveform_bar_100pct {
+ -webkit-transition: background-color 0.25s ease;
+ transition: background-color 0.25s ease;
+ background-color: #737d8c;
+}
+
+.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_Clock {
+ width: 4.2rem;
+ padding-right: 6px;
+ padding-left: 8px;
+}
+
+.mx_MediaBody.mx_VoiceMessagePrimaryContainer.mx_VoiceMessagePrimaryContainer_noWaveform {
+ max-width: 162px;
+}
+
+.mx_SeekBar {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ width: 100%;
+ height: 1px;
+ background: #c1c6cd;
+ outline: none;
+ position: relative;
+ cursor: pointer;
+}
+
+.mx_SeekBar::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 8px;
+ height: 8px;
+ border-radius: 8px;
+ background-color: #8d99a5;
+ cursor: pointer;
+}
+
+.mx_SeekBar::-moz-range-thumb {
+ width: 8px;
+ height: 8px;
+ border-radius: 8px;
+ background-color: #8d99a5;
+ cursor: pointer;
+ border: none;
+}
+
+.mx_SeekBar:before {
+ content: "";
+ background-color: #8d99a5;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 1px;
+ -webkit-transform-origin: 0 100%;
+ transform-origin: 0 100%;
+ -webkit-transform: scaleX(var(--fillTo));
+ transform: scaleX(var(--fillTo));
+}
+
+.mx_SeekBar::-moz-range-progress {
+ background-color: #8d99a5;
+ height: 1px;
+}
+
+.mx_SeekBar:disabled {
+ opacity: 0.5;
+}
+
+.mx_SeekBar:after {
+ content: "";
+ position: absolute;
+ top: -6px;
+ bottom: -6px;
+ left: 0;
+ right: 0;
+}
+
+.mx_Waveform {
+ position: relative;
+ height: 30px;
+ top: 1px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ overflow: hidden;
+}
+
+.mx_Waveform .mx_Waveform_bar {
+ width: 0;
+ border: 1px solid transparent;
+ border-radius: 2px;
+ min-height: 0;
+ max-height: 100%;
+ margin-left: 1px;
+ margin-right: 1px;
+}
+
.mx_AuthBody {
width: 500px;
font-size: 1.2rem;
@@ -5396,46 +6766,56 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
+
.mx_AuthBody h2 {
font-size: 2.4rem;
font-weight: 600;
margin-top: 8px;
color: #232f32;
}
+
.mx_AuthBody h3 {
font-size: 1.4rem;
font-weight: 600;
color: #61708b;
}
+
.mx_AuthBody h3.mx_AuthBody_centered {
text-align: center;
}
+
.mx_AuthBody a:hover,
.mx_AuthBody a:link,
.mx_AuthBody a:visited {
color: #0dbd8b;
text-decoration: none;
}
+
.mx_AuthBody input[type="password"],
.mx_AuthBody input[type="text"] {
color: #232f32;
}
+
.mx_AuthBody .mx_Field input,
.mx_AuthBody .mx_Field select {
color: #232f32;
background-color: #fff;
}
+
.mx_AuthBody .mx_Field label {
color: #232f32;
}
+
.mx_AuthBody .mx_Field input:not(:-moz-placeholder-shown) + label,
.mx_AuthBody .mx_Field textarea:not(:-moz-placeholder-shown) + label {
background-color: #fff;
}
+
.mx_AuthBody .mx_Field input:not(:-ms-input-placeholder) + label,
.mx_AuthBody .mx_Field textarea:not(:-ms-input-placeholder) + label {
background-color: #fff;
}
+
.mx_AuthBody .mx_Field_labelAlwaysTopLeft label,
.mx_AuthBody .mx_Field input:focus + label,
.mx_AuthBody .mx_Field input:not(:placeholder-shown) + label,
@@ -5444,53 +6824,67 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
.mx_AuthBody .mx_Field textarea:not(:placeholder-shown) + label {
background-color: #fff;
}
+
.mx_AuthBody input.error {
color: #ff4b55;
}
+
.mx_AuthBody .mx_Field input {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
+
.mx_AuthBody .mx_Field_select:before {
background-color: #232f32;
}
+
.mx_AuthBody .mx_Dropdown {
color: #232f32;
}
+
.mx_AuthBody .mx_Dropdown_arrow {
background: #232f32;
}
+
.mx_AuthBody .mx_Dropdown_menu {
background-color: #fff;
}
+
.mx_AuthBody .mx_Dropdown_menu .mx_Dropdown_option_highlight {
background-color: #ddd;
}
+
.mx_AuthBody_fieldRow {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 10px;
}
+
.mx_AuthBody_fieldRow > .mx_Field {
margin: 0 5px;
}
+
.mx_AuthBody_fieldRow > .mx_Field:first-child {
margin-left: 0;
}
+
.mx_AuthBody_fieldRow > .mx_Field:last-child {
margin-right: 0;
}
+
.mx_AuthBody_paddedFooter {
height: 80px;
padding-top: 28px;
text-align: center;
}
+
.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_title {
margin-top: 16px;
font-size: 1.5rem;
line-height: 2.4rem;
}
+
.mx_AuthBody_paddedFooter
.mx_AuthBody_paddedFooter_title
.mx_InlineSpinner
@@ -5498,25 +6892,31 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
vertical-align: sub;
margin-right: 5px;
}
+
.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_subtitle {
margin-top: 8px;
font-size: 1rem;
line-height: 1.4rem;
}
+
.mx_AuthBody_changeFlow {
display: block;
text-align: center;
width: 100%;
}
+
.mx_AuthBody_changeFlow > a {
font-weight: 600;
}
+
.mx_SSOButtons + .mx_AuthBody_changeFlow {
margin-top: 24px;
}
+
.mx_AuthBody_spinner {
margin: 1em 0;
}
+
@media only screen and (max-width: 480px) {
.mx_AuthBody {
border-radius: 4px;
@@ -5525,6 +6925,7 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
padding: 10px;
}
}
+
.mx_AuthButtons {
min-height: 24px;
height: unset !important;
@@ -5534,10 +6935,12 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
-ms-flex-order: 4;
order: 4;
}
+
.mx_AuthButtons_loginButton_wrapper {
text-align: center;
width: 100%;
}
+
.mx_AuthButtons_loginButton,
.mx_AuthButtons_registerButton {
margin-top: 3px;
@@ -5554,6 +6957,7 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
padding: 0 11px;
word-break: break-word;
}
+
.mx_AuthFooter {
text-align: center;
width: 100%;
@@ -5569,12 +6973,14 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
);
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
}
+
.mx_AuthFooter a:hover,
.mx_AuthFooter a:link,
.mx_AuthFooter a:visited {
color: #fff;
margin: 0 22px;
}
+
.mx_AuthHeader {
display: -webkit-box;
display: -ms-flexbox;
@@ -5588,11 +6994,13 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
+
@media only screen and (max-width: 480px) {
.mx_AuthHeader {
display: none;
}
}
+
.mx_AuthHeaderLogo {
margin-top: 15px;
-webkit-box-flex: 1;
@@ -5600,14 +7008,17 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
flex: 1;
padding: 0 25px;
}
+
.mx_AuthHeaderLogo img {
width: 100%;
}
+
@media only screen and (max-width: 480px) {
.mx_AuthHeaderLogo {
display: none;
}
}
+
.mx_AuthPage {
width: 100%;
min-height: 100%;
@@ -5617,12 +7028,14 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
flex-direction: column;
background-color: #2e3649;
}
+
.mx_AuthPage,
.mx_AuthPage_modal {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_AuthPage_modal {
margin: 100px auto auto;
border-radius: 4px;
@@ -5630,11 +7043,13 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33);
background-color: hsla(0, 0%, 96.1%, 0.9);
}
+
@media only screen and (max-width: 480px) {
.mx_AuthPage_modal {
margin-top: 0;
}
}
+
.mx_CompleteSecurityBody {
width: 600px;
color: #232f32;
@@ -5644,50 +7059,60 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
+
.mx_CompleteSecurityBody h2 {
font-size: 2.4rem;
font-weight: 600;
margin-top: 0;
}
+
.mx_CompleteSecurityBody h3 {
font-size: 1.4rem;
font-weight: 600;
}
+
.mx_CompleteSecurityBody a:hover,
.mx_CompleteSecurityBody a:link,
.mx_CompleteSecurityBody a:visited {
color: #0dbd8b;
text-decoration: none;
}
+
.mx_CountryDropdown .mx_Dropdown_input .mx_Dropdown_option {
padding: 0 3px;
}
+
.mx_CountryDropdown .mx_Dropdown_arrow {
padding-right: 3px;
}
+
.mx_CountryDropdown_shortOption {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
height: 100%;
}
+
.mx_CountryDropdown_option,
.mx_CountryDropdown_shortOption {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
+
.mx_CountryDropdown_option {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_InteractiveAuthEntryComponents_emailWrapper {
padding-right: 100px;
position: relative;
margin-top: 32px;
margin-bottom: 32px;
}
+
.mx_InteractiveAuthEntryComponents_emailWrapper:after,
.mx_InteractiveAuthEntryComponents_emailWrapper:before {
position: absolute;
@@ -5696,11 +7121,13 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
content: "";
right: -10px;
}
+
.mx_InteractiveAuthEntryComponents_emailWrapper:before {
background-color: rgba(244, 246, 250, 0.91);
border-radius: 50%;
top: -20px;
}
+
.mx_InteractiveAuthEntryComponents_emailWrapper:after {
background-image: url(../../img/element-icons/email-prompt.1d04dfe.svg);
background-repeat: no-repeat;
@@ -5708,9 +7135,11 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
background-size: contain;
top: -25px;
}
+
.mx_InteractiveAuthEntryComponents_msisdnWrapper {
text-align: center;
}
+
.mx_InteractiveAuthEntryComponents_msisdnEntry {
font-size: 200%;
font-weight: 700;
@@ -5718,27 +7147,33 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
border-radius: 3px;
width: 6em;
}
+
.mx_InteractiveAuthEntryComponents_msisdnEntry:focus {
border: 1px solid #0dbd8b;
}
+
.mx_InteractiveAuthEntryComponents_msisdnSubmit {
margin-top: 4px;
margin-bottom: 5px;
}
+
.mx_InteractiveAuthEntryComponents_termsSubmit {
margin-top: 20px;
margin-bottom: 5px;
display: block;
width: 100%;
}
+
.mx_InteractiveAuthEntryComponents_msisdnSubmit:disabled {
background-color: #747474;
cursor: default;
}
+
.mx_InteractiveAuthEntryComponents_termsSubmit:disabled {
background-color: #92caad;
cursor: default;
}
+
.mx_InteractiveAuthEntryComponents_termsPolicy {
display: -webkit-box;
display: -ms-flexbox;
@@ -5754,9 +7189,11 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
-ms-flex-align: center;
align-items: center;
}
+
.mx_InteractiveAuthEntryComponents_passwordSection {
width: 300px;
}
+
.mx_InteractiveAuthEntryComponents_sso_buttons {
display: -webkit-box;
display: -ms-flexbox;
@@ -5770,12 +7207,15 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
justify-content: flex-end;
margin-top: 20px;
}
+
.mx_InteractiveAuthEntryComponents_sso_buttons .mx_AccessibleButton {
margin-left: 5px;
}
+
.mx_AuthBody_language {
width: 100%;
}
+
.mx_AuthBody_language .mx_Dropdown_input {
border: none;
font-size: 1.4rem;
@@ -5783,9 +7223,11 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
color: #4e5054;
width: auto;
}
+
.mx_AuthBody_language .mx_Dropdown_arrow {
background: #4e5054;
}
+
progress.mx_PassphraseField_progress {
-webkit-appearance: none;
-moz-appearance: none;
@@ -5797,43 +7239,55 @@ progress.mx_PassphraseField_progress {
top: -12px;
border-radius: "2px";
}
+
progress.mx_PassphraseField_progress::-moz-progress-bar {
border-radius: "2px";
}
+
progress.mx_PassphraseField_progress::-webkit-progress-bar,
progress.mx_PassphraseField_progress::-webkit-progress-value {
border-radius: "2px";
}
+
progress.mx_PassphraseField_progress {
color: #ff4b55;
}
+
progress.mx_PassphraseField_progress::-moz-progress-bar {
background-color: #ff4b55;
}
+
progress.mx_PassphraseField_progress::-webkit-progress-value {
background-color: #ff4b55;
}
+
progress.mx_PassphraseField_progress[value="2"],
progress.mx_PassphraseField_progress[value="3"] {
color: #ff812d;
}
+
progress.mx_PassphraseField_progress[value="2"]::-moz-progress-bar,
progress.mx_PassphraseField_progress[value="3"]::-moz-progress-bar {
background-color: #ff812d;
}
+
progress.mx_PassphraseField_progress[value="2"]::-webkit-progress-value,
progress.mx_PassphraseField_progress[value="3"]::-webkit-progress-value {
background-color: #ff812d;
}
+
progress.mx_PassphraseField_progress[value="4"] {
color: #0dbd8b;
}
+
progress.mx_PassphraseField_progress[value="4"]::-moz-progress-bar {
background-color: #0dbd8b;
}
+
progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
background-color: #0dbd8b;
}
+
.mx_Welcome {
display: -webkit-box;
display: -ms-flexbox;
@@ -5846,13 +7300,16 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
-ms-flex-align: center;
align-items: center;
}
+
.mx_Welcome.mx_WelcomePage_registrationDisabled .mx_ButtonCreateAccount {
display: none;
}
+
.mx_Welcome .mx_AuthBody_language {
width: 160px;
margin-bottom: 10px;
}
+
.mx_BaseAvatar {
position: relative;
display: inline-block;
@@ -5861,6 +7318,7 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
-ms-user-select: none;
user-select: none;
}
+
.mx_BaseAvatar_initial {
position: absolute;
left: 0;
@@ -5870,6 +7328,7 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
pointer-events: none;
font-weight: 400;
}
+
.mx_BaseAvatar_image {
-o-object-fit: cover;
object-fit: cover;
@@ -5877,10 +7336,13 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
vertical-align: top;
background-color: #fff;
}
+
.mx_DecoratedRoomAvatar,
.mx_ExtraTile {
position: relative;
+ contain: content;
}
+
.mx_DecoratedRoomAvatar.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar,
.mx_ExtraTile.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar {
-webkit-mask-image: url(../../img/element-icons/roomlist/decorated-avatar-mask.76c407f.svg);
@@ -5892,6 +7354,7 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
+
.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon,
.mx_ExtraTile .mx_DecoratedRoomAvatar_icon {
position: absolute;
@@ -5902,6 +7365,7 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
height: 8px;
border-radius: 50%;
}
+
.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon:before,
.mx_ExtraTile .mx_DecoratedRoomAvatar_icon:before {
content: "";
@@ -5910,6 +7374,7 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
position: absolute;
border-radius: 8px;
}
+
.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_globe:before,
.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_globe:before {
-webkit-mask-position: center;
@@ -5922,18 +7387,22 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
-webkit-mask-image: url(../../img/globe.8201f08.svg);
mask-image: url(../../img/globe.8201f08.svg);
}
+
.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_offline:before,
.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_offline:before {
background-color: #e3e8f0;
}
+
.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_online:before,
.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_online:before {
background-color: #0dbd8b;
}
+
.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_away:before,
.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_away:before {
background-color: #d9b072;
}
+
.mx_DecoratedRoomAvatar .mx_NotificationBadge,
.mx_DecoratedRoomAvatar .mx_RoomTile_badgeContainer,
.mx_ExtraTile .mx_NotificationBadge,
@@ -5944,90 +7413,106 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
height: 18px;
width: 18px;
}
+
.mx_MessageComposer_avatar .mx_BaseAvatar {
padding: 2px;
border: 1px solid transparent;
border-radius: 100%;
}
+
.mx_MessageComposer_avatar .mx_BaseAvatar_initial {
left: 2px;
}
+
.mx_MemberStatusMessageAvatar_hasStatus .mx_BaseAvatar {
border-color: #0dbd8b;
}
-@-webkit-keyframes shadow-pulse {
- 0% {
- -webkit-box-shadow: 0 0 0 0 rgba(13, 189, 139, 0.2);
- box-shadow: 0 0 0 0 rgba(13, 189, 139, 0.2);
- }
- to {
- -webkit-box-shadow: 0 0 0 6px rgba(13, 189, 139, 0);
- box-shadow: 0 0 0 6px rgba(13, 189, 139, 0);
- }
-}
-@keyframes shadow-pulse {
- 0% {
- -webkit-box-shadow: 0 0 0 0 rgba(13, 189, 139, 0.2);
- box-shadow: 0 0 0 0 rgba(13, 189, 139, 0.2);
- }
- to {
- -webkit-box-shadow: 0 0 0 6px rgba(13, 189, 139, 0);
- box-shadow: 0 0 0 6px rgba(13, 189, 139, 0);
- }
-}
-.mx_PulsedAvatar img {
- -webkit-animation: shadow-pulse 1s infinite;
- animation: shadow-pulse 1s infinite;
-}
+
.mx_WidgetAvatar {
border-radius: 4px;
}
+
.mx_BetaCard {
margin-bottom: 20px;
padding: 24px;
background-color: #f4f6fa;
border-radius: 8px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
-.mx_BetaCard > div .mx_BetaCard_title {
+
+.mx_BetaCard .mx_BetaCard_columns {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+.mx_BetaCard .mx_BetaCard_columns > div .mx_BetaCard_title {
font-weight: 600;
font-size: 1.8rem;
line-height: 2.2rem;
color: #2e2f32;
margin: 4px 0 14px;
}
-.mx_BetaCard > div .mx_BetaCard_title .mx_BetaCard_betaPill {
+
+.mx_BetaCard
+ .mx_BetaCard_columns
+ > div
+ .mx_BetaCard_title
+ .mx_BetaCard_betaPill {
margin-left: 12px;
}
-.mx_BetaCard > div .mx_BetaCard_caption {
+
+.mx_BetaCard .mx_BetaCard_columns > div .mx_BetaCard_caption {
font-size: 1.5rem;
line-height: 2rem;
color: #737d8c;
margin-bottom: 20px;
}
-.mx_BetaCard > div .mx_AccessibleButton {
+
+.mx_BetaCard
+ .mx_BetaCard_columns
+ > div
+ .mx_BetaCard_buttons
+ .mx_AccessibleButton {
display: block;
margin: 12px 0;
padding: 7px 40px;
width: auto;
}
-.mx_BetaCard > div .mx_BetaCard_disclaimer {
+
+.mx_BetaCard .mx_BetaCard_columns > div .mx_BetaCard_disclaimer {
font-size: 1.2rem;
line-height: 1.5rem;
color: #737d8c;
margin-top: 20px;
}
-.mx_BetaCard > img {
+
+.mx_BetaCard .mx_BetaCard_columns > img {
margin: auto 0 auto 20px;
width: 300px;
-o-object-fit: contain;
object-fit: contain;
height: 100%;
}
+
+.mx_BetaCard .mx_BetaCard_relatedSettings .mx_SettingsFlag {
+ margin: 16px 0 0;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+ color: #2e2f32;
+}
+
+.mx_BetaCard
+ .mx_BetaCard_relatedSettings
+ .mx_SettingsFlag
+ .mx_SettingsFlag_microcopy {
+ margin-top: 4px;
+ font-size: 1.2rem;
+ line-height: 1.5rem;
+ color: #737d8c;
+}
+
.mx_BetaCard_betaPill {
background-color: #238cf5;
padding: 4px 10px;
@@ -6039,64 +7524,105 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
display: inline-block;
vertical-align: text-bottom;
}
+
.mx_BetaCard_betaPill.mx_BetaCard_betaPill_clickable {
cursor: pointer;
}
+
.mx_BetaDot {
- border-radius: 50%;
margin: 10px;
height: 12px;
width: 12px;
- -webkit-transform: scale(1);
- transform: scale(1);
- background: #238cf5;
- -webkit-box-shadow: 0 0 0 0 #238cf5;
- box-shadow: 0 0 0 0 #238cf5;
-webkit-animation: mx_Beta_bluePulse 2s infinite;
animation: mx_Beta_bluePulse 2s infinite;
-webkit-animation-iteration-count: 20;
animation-iteration-count: 20;
+ position: relative;
}
+
+.mx_BetaDot,
+.mx_BetaDot:after {
+ border-radius: 50%;
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ background: #238cf5;
+}
+
+.mx_BetaDot:after {
+ content: "";
+ position: absolute;
+ width: inherit;
+ height: inherit;
+ top: 0;
+ left: 0;
+ -webkit-transform-origin: center center;
+ transform-origin: center center;
+ -webkit-animation-name: mx_Beta_bluePulse_shadow;
+ animation-name: mx_Beta_bluePulse_shadow;
+ -webkit-animation-duration: inherit;
+ animation-duration: inherit;
+ -webkit-animation-iteration-count: inherit;
+ animation-iteration-count: inherit;
+}
+
@-webkit-keyframes mx_Beta_bluePulse {
0% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
- -webkit-box-shadow: 0 0 0 0 rgba(35, 140, 245, 0.7);
- box-shadow: 0 0 0 0 rgba(35, 140, 245, 0.7);
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
- -webkit-box-shadow: 0 0 0 10px rgba(35, 140, 245, 0);
- box-shadow: 0 0 0 10px rgba(35, 140, 245, 0);
}
to {
-webkit-transform: scale(0.95);
transform: scale(0.95);
- -webkit-box-shadow: 0 0 0 0 rgba(35, 140, 245, 0);
- box-shadow: 0 0 0 0 rgba(35, 140, 245, 0);
}
}
+
@keyframes mx_Beta_bluePulse {
0% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
- -webkit-box-shadow: 0 0 0 0 rgba(35, 140, 245, 0.7);
- box-shadow: 0 0 0 0 rgba(35, 140, 245, 0.7);
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
- -webkit-box-shadow: 0 0 0 10px rgba(35, 140, 245, 0);
- box-shadow: 0 0 0 10px rgba(35, 140, 245, 0);
}
to {
-webkit-transform: scale(0.95);
transform: scale(0.95);
- -webkit-box-shadow: 0 0 0 0 rgba(35, 140, 245, 0);
- box-shadow: 0 0 0 0 rgba(35, 140, 245, 0);
}
}
+
+@-webkit-keyframes mx_Beta_bluePulse_shadow {
+ 0% {
+ opacity: 0.7;
+ }
+ 70% {
+ -webkit-transform: scale(2.2);
+ transform: scale(2.2);
+ opacity: 0;
+ }
+ to {
+ opacity: 0;
+ }
+}
+
+@keyframes mx_Beta_bluePulse_shadow {
+ 0% {
+ opacity: 0.7;
+ }
+ 70% {
+ -webkit-transform: scale(2.2);
+ transform: scale(2.2);
+ opacity: 0;
+ }
+ to {
+ opacity: 0;
+ }
+}
+
.mx_CallContextMenu_item {
width: 205px;
height: 40px;
@@ -6104,13 +7630,16 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
line-height: 40px;
vertical-align: center;
}
+
.mx_IconizedContextMenu {
min-width: 146px;
}
+
.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList > * {
padding-left: 20px;
padding-right: 20px;
}
+
.mx_IconizedContextMenu
.mx_IconizedContextMenu_optionList
.mx_IconizedContextMenu_optionList_notFirst:before,
@@ -6123,16 +7652,19 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
position: absolute;
left: 0;
}
+
.mx_IconizedContextMenu
.mx_IconizedContextMenu_optionList:first-child
.mx_AccessibleButton:first-child {
border-radius: 8px 8px 0 0;
}
+
.mx_IconizedContextMenu
.mx_IconizedContextMenu_optionList:last-child
.mx_AccessibleButton:last-child {
border-radius: 0 0 8px 8px;
}
+
.mx_IconizedContextMenu
.mx_IconizedContextMenu_optionList
.mx_AccessibleButton {
@@ -6149,17 +7681,20 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
-ms-flex-align: center;
align-items: center;
}
+
.mx_IconizedContextMenu
.mx_IconizedContextMenu_optionList
.mx_AccessibleButton:hover {
background-color: #f5f8fa;
}
+
.mx_IconizedContextMenu
.mx_IconizedContextMenu_optionList
.mx_AccessibleButton.mx_AccessibleButton_disabled {
opacity: 0.5;
cursor: not-allowed;
}
+
.mx_IconizedContextMenu
.mx_IconizedContextMenu_optionList
.mx_AccessibleButton
@@ -6172,6 +7707,7 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
min-width: 16px;
max-width: 16px;
}
+
.mx_IconizedContextMenu
.mx_IconizedContextMenu_optionList
.mx_AccessibleButton
@@ -6184,6 +7720,7 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
overflow: hidden;
white-space: nowrap;
}
+
.mx_IconizedContextMenu
.mx_IconizedContextMenu_optionList
.mx_AccessibleButton
@@ -6191,11 +7728,13 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
+ .mx_IconizedContextMenu_label {
padding-left: 14px;
}
+
.mx_IconizedContextMenu .mx_IconizedContextMenu_icon {
position: relative;
width: 16px;
height: 16px;
}
+
.mx_IconizedContextMenu .mx_IconizedContextMenu_icon:before {
content: "";
width: 16px;
@@ -6209,53 +7748,130 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
mask-repeat: no-repeat;
background: #2e2f32;
}
+
.mx_IconizedContextMenu
.mx_IconizedContextMenu_optionList_red
.mx_AccessibleButton {
color: #ff4b55 !important;
}
+
.mx_IconizedContextMenu
.mx_IconizedContextMenu_optionList_red
.mx_IconizedContextMenu_icon:before {
background-color: #ff4b55;
}
+
.mx_IconizedContextMenu .mx_IconizedContextMenu_active.mx_AccessibleButton,
.mx_IconizedContextMenu .mx_IconizedContextMenu_active .mx_AccessibleButton {
color: #0dbd8b !important;
}
+
.mx_IconizedContextMenu
.mx_IconizedContextMenu_active
.mx_IconizedContextMenu_icon:before {
background-color: #0dbd8b;
}
+
.mx_IconizedContextMenu.mx_IconizedContextMenu_compact
.mx_IconizedContextMenu_optionList
> * {
padding: 8px 16px 8px 11px;
}
+
.mx_IconizedContextMenu .mx_IconizedContextMenu_checked {
margin-left: 16px;
margin-right: -5px;
}
+
.mx_IconizedContextMenu .mx_IconizedContextMenu_checked:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);
mask-image: url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);
}
-.mx_MessageContextMenu {
- padding: 6px;
-}
-.mx_MessageContextMenu_field {
+
+.mx_MessageContextMenu .mx_IconizedContextMenu_icon {
+ width: 16px;
+ height: 16px;
display: block;
- padding: 3px 6px;
- cursor: pointer;
- white-space: nowrap;
}
-.mx_MessageContextMenu_field.mx_MessageContextMenu_fieldSet {
- font-weight: 700;
+
+.mx_MessageContextMenu .mx_IconizedContextMenu_icon:before {
+ content: "";
+ width: 16px;
+ height: 16px;
+ display: block;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background: #2e2f32;
}
+
+.mx_MessageContextMenu .mx_MessageContextMenu_iconCollapse:before {
+ -webkit-mask-image: url(../../img/element-icons/message/chevron-up.90f4709.svg);
+ mask-image: url(../../img/element-icons/message/chevron-up.90f4709.svg);
+}
+
+.mx_MessageContextMenu .mx_MessageContextMenu_iconReport:before {
+ -webkit-mask-image: url(../../img/element-icons/warning-badge.413c9a9.svg);
+ mask-image: url(../../img/element-icons/warning-badge.413c9a9.svg);
+}
+
+.mx_MessageContextMenu .mx_MessageContextMenu_iconLink:before {
+ -webkit-mask-image: url(../../img/element-icons/link.8f4b1fc.svg);
+ mask-image: url(../../img/element-icons/link.8f4b1fc.svg);
+}
+
+.mx_MessageContextMenu .mx_MessageContextMenu_iconPermalink:before {
+ -webkit-mask-image: url(../../img/element-icons/room/share.54dc3fb.svg);
+ mask-image: url(../../img/element-icons/room/share.54dc3fb.svg);
+}
+
+.mx_MessageContextMenu .mx_MessageContextMenu_iconUnhidePreview:before {
+ -webkit-mask-image: url(../../img/element-icons/settings/appearance.cdebd40.svg);
+ mask-image: url(../../img/element-icons/settings/appearance.cdebd40.svg);
+}
+
+.mx_MessageContextMenu .mx_MessageContextMenu_iconForward:before {
+ -webkit-mask-image: url(../../img/element-icons/message/fwd.d1f50ee.svg);
+ mask-image: url(../../img/element-icons/message/fwd.d1f50ee.svg);
+}
+
+.mx_MessageContextMenu .mx_MessageContextMenu_iconRedact:before {
+ -webkit-mask-image: url(../../img/element-icons/trashcan.3b626db.svg);
+ mask-image: url(../../img/element-icons/trashcan.3b626db.svg);
+}
+
+.mx_MessageContextMenu .mx_MessageContextMenu_iconResend:before {
+ -webkit-mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
+ mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
+}
+
+.mx_MessageContextMenu .mx_MessageContextMenu_iconSource:before {
+ -webkit-mask-image: url(../../img/element-icons/room/format-bar/code.27444ba.svg);
+ mask-image: url(../../img/element-icons/room/format-bar/code.27444ba.svg);
+}
+
+.mx_MessageContextMenu .mx_MessageContextMenu_iconQuote:before {
+ -webkit-mask-image: url(../../img/element-icons/room/format-bar/quote.560cd8f.svg);
+ mask-image: url(../../img/element-icons/room/format-bar/quote.560cd8f.svg);
+}
+
+.mx_MessageContextMenu .mx_MessageContextMenu_iconPin:before {
+ -webkit-mask-image: url(../../img/element-icons/room/pin-upright.65783fb.svg);
+ mask-image: url(../../img/element-icons/room/pin-upright.65783fb.svg);
+}
+
+.mx_MessageContextMenu .mx_MessageContextMenu_iconUnpin:before {
+ -webkit-mask-image: url(../../img/element-icons/room/pin.a996417.svg);
+ mask-image: url(../../img/element-icons/room/pin.a996417.svg);
+}
+
.mx_StatusMessageContextMenu {
padding: 10px;
}
+
.mx_StatusMessageContextMenu_form {
display: -webkit-box;
display: -ms-flexbox;
@@ -6265,6 +7881,7 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
-ms-flex-direction: column;
flex-direction: column;
}
+
input.mx_StatusMessageContextMenu_message {
border-radius: 4px;
border: 1px solid #e7e7e7;
@@ -6273,26 +7890,33 @@ input.mx_StatusMessageContextMenu_message {
font-weight: 400;
margin: 0 0 10px;
}
+
.mx_StatusMessageContextMenu_message::-webkit-input-placeholder {
color: #61708b;
}
+
.mx_StatusMessageContextMenu_message::-moz-placeholder {
color: #61708b;
}
+
.mx_StatusMessageContextMenu_message:-ms-input-placeholder {
color: #61708b;
}
+
.mx_StatusMessageContextMenu_message::-ms-input-placeholder {
color: #61708b;
}
+
.mx_StatusMessageContextMenu_message::placeholder {
color: #61708b;
}
+
.mx_StatusMessageContextMenu_actionContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_StatusMessageContextMenu_clear,
.mx_StatusMessageContextMenu_submit {
vertical-align: middle;
@@ -6313,19 +7937,23 @@ input.mx_StatusMessageContextMenu_message {
border: 1px solid transparent;
margin-right: 10px;
}
+
.mx_StatusMessageContextMenu_submit[disabled] {
opacity: 0.49;
}
+
.mx_StatusMessageContextMenu_clear {
color: #ff4b55;
background-color: transparent;
border: 1px solid #ff4b55;
}
+
.mx_StatusMessageContextMenu_actionContainer .mx_Spinner {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
+
.mx_TagTileContextMenu_item {
padding: 8px 20px 8px 8px;
cursor: pointer;
@@ -6338,6 +7966,7 @@ input.mx_StatusMessageContextMenu_message {
align-items: center;
line-height: 1.6rem;
}
+
.mx_TagTileContextMenu_item:before {
content: "";
height: 15px;
@@ -6349,14 +7978,28 @@ input.mx_StatusMessageContextMenu_message {
mask-size: contain;
margin-right: 8px;
}
+
.mx_TagTileContextMenu_viewCommunity:before {
-webkit-mask-image: url(../../img/element-icons/view-community.0cad1a5.svg);
mask-image: url(../../img/element-icons/view-community.0cad1a5.svg);
}
+
+.mx_TagTileContextMenu_moveUp:before {
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+
+.mx_TagTileContextMenu_moveDown:before,
+.mx_TagTileContextMenu_moveUp:before {
+ -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+ mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+}
+
.mx_TagTileContextMenu_hideCommunity:before {
-webkit-mask-image: url(../../img/element-icons/hide.2b52315.svg);
mask-image: url(../../img/element-icons/hide.2b52315.svg);
}
+
.mx_TagTileContextMenu_separator {
margin-top: 0;
margin-bottom: 0;
@@ -6364,6 +8007,7 @@ input.mx_StatusMessageContextMenu_message {
border-top: 1px solid;
border-color: #e7e7e7;
}
+
.mx_AddExistingToSpaceDialog_wrapper .mx_Dialog {
display: -webkit-box;
display: -ms-flexbox;
@@ -6373,24 +8017,29 @@ input.mx_StatusMessageContextMenu_message {
-ms-flex-direction: column;
flex-direction: column;
}
+
.mx_AddExistingToSpace .mx_SearchBox {
margin: 0 0 15px;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
+
.mx_AddExistingToSpace .mx_AddExistingToSpace_content {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
+
.mx_AddExistingToSpace .mx_AddExistingToSpace_noResults {
display: block;
margin-top: 24px;
}
+
.mx_AddExistingToSpace .mx_AddExistingToSpace_section:not(:first-child) {
margin-top: 24px;
}
+
.mx_AddExistingToSpace .mx_AddExistingToSpace_section > h3 {
margin: 0;
color: #737d8c;
@@ -6398,6 +8047,7 @@ input.mx_StatusMessageContextMenu_message {
font-weight: 600;
line-height: 1.5rem;
}
+
.mx_AddExistingToSpace
.mx_AddExistingToSpace_section
.mx_AddExistingToSpace_entry {
@@ -6406,12 +8056,14 @@ input.mx_StatusMessageContextMenu_message {
display: flex;
margin-top: 12px;
}
+
.mx_AddExistingToSpace
.mx_AddExistingToSpace_section
.mx_AddExistingToSpace_entry
.mx_DecoratedRoomAvatar {
margin-right: 12px;
}
+
.mx_AddExistingToSpace
.mx_AddExistingToSpace_section
.mx_AddExistingToSpace_entry
@@ -6426,6 +8078,7 @@ input.mx_StatusMessageContextMenu_message {
text-overflow: ellipsis;
margin-right: 12px;
}
+
.mx_AddExistingToSpace
.mx_AddExistingToSpace_section
.mx_AddExistingToSpace_entry
@@ -6434,14 +8087,17 @@ input.mx_StatusMessageContextMenu_message {
-ms-flex-align: center;
align-items: center;
}
+
.mx_AddExistingToSpace .mx_AddExistingToSpace_section_spaces .mx_BaseAvatar {
margin-right: 12px;
}
+
.mx_AddExistingToSpace
.mx_AddExistingToSpace_section_spaces
.mx_BaseAvatar_image {
border-radius: 8px;
}
+
.mx_AddExistingToSpace .mx_AddExistingToSpace_section_experimental {
position: relative;
border-radius: 8px;
@@ -6452,6 +8108,7 @@ input.mx_StatusMessageContextMenu_message {
line-height: 1.5rem;
color: #737d8c;
}
+
.mx_AddExistingToSpace .mx_AddExistingToSpace_section_experimental:before {
content: "";
position: absolute;
@@ -6469,12 +8126,14 @@ input.mx_StatusMessageContextMenu_message {
-webkit-mask-position: center;
mask-position: center;
}
+
.mx_AddExistingToSpace .mx_AddExistingToSpace_footer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 20px;
}
+
.mx_AddExistingToSpace .mx_AddExistingToSpace_footer > span {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
@@ -6483,17 +8142,20 @@ input.mx_StatusMessageContextMenu_message {
line-height: 1.5rem;
color: #737d8c;
}
+
.mx_AddExistingToSpace .mx_AddExistingToSpace_footer > span .mx_ProgressBar {
height: 8px;
width: 100%;
border-radius: 8px;
}
+
.mx_AddExistingToSpace
.mx_AddExistingToSpace_footer
> span
.mx_ProgressBar::-moz-progress-bar {
border-radius: 8px;
}
+
.mx_AddExistingToSpace
.mx_AddExistingToSpace_footer
> span
@@ -6504,6 +8166,7 @@ input.mx_StatusMessageContextMenu_message {
.mx_ProgressBar::-webkit-progress-value {
border-radius: 8px;
}
+
.mx_AddExistingToSpace
.mx_AddExistingToSpace_footer
> span
@@ -6513,14 +8176,17 @@ input.mx_StatusMessageContextMenu_message {
line-height: 2.4rem;
color: #2e2f32;
}
+
.mx_AddExistingToSpace .mx_AddExistingToSpace_footer > span > * {
vertical-align: middle;
}
+
.mx_AddExistingToSpace
.mx_AddExistingToSpace_footer
.mx_AddExistingToSpace_error {
padding-left: 12px;
}
+
.mx_AddExistingToSpace
.mx_AddExistingToSpace_footer
.mx_AddExistingToSpace_error
@@ -6528,6 +8194,7 @@ input.mx_StatusMessageContextMenu_message {
-ms-flex-item-align: center;
align-self: center;
}
+
.mx_AddExistingToSpace
.mx_AddExistingToSpace_footer
.mx_AddExistingToSpace_error
@@ -6537,6 +8204,7 @@ input.mx_StatusMessageContextMenu_message {
line-height: 1.8rem;
color: #ff4b55;
}
+
.mx_AddExistingToSpace
.mx_AddExistingToSpace_footer
.mx_AddExistingToSpace_error
@@ -6546,16 +8214,19 @@ input.mx_StatusMessageContextMenu_message {
line-height: 1.5rem;
color: #2e2f32;
}
+
.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AccessibleButton {
display: inline-block;
-ms-flex-item-align: center;
align-self: center;
}
+
.mx_AddExistingToSpace
.mx_AddExistingToSpace_footer
.mx_AccessibleButton_kind_primary {
padding: 8px 36px;
}
+
.mx_AddExistingToSpace
.mx_AddExistingToSpace_footer
.mx_AddExistingToSpace_retryButton {
@@ -6563,6 +8234,7 @@ input.mx_StatusMessageContextMenu_message {
padding-left: 24px;
position: relative;
}
+
.mx_AddExistingToSpace
.mx_AddExistingToSpace_footer
.mx_AddExistingToSpace_retryButton:before {
@@ -6581,11 +8253,13 @@ input.mx_StatusMessageContextMenu_message {
height: 18px;
left: 0;
}
+
.mx_AddExistingToSpace
.mx_AddExistingToSpace_footer
.mx_AccessibleButton_kind_link {
padding: 0;
}
+
.mx_AddExistingToSpaceDialog {
width: 480px;
color: #2e2f32;
@@ -6598,17 +8272,20 @@ input.mx_StatusMessageContextMenu_message {
min-height: 0;
height: 80vh;
}
+
.mx_AddExistingToSpaceDialog,
.mx_AddExistingToSpaceDialog .mx_Dialog_title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_BaseAvatar_image {
border-radius: 8px;
margin: 0;
vertical-align: unset;
}
+
.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_BaseAvatar {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
@@ -6616,12 +8293,14 @@ input.mx_StatusMessageContextMenu_message {
margin: auto 16px auto 5px;
vertical-align: middle;
}
+
.mx_AddExistingToSpaceDialog .mx_Dialog_title > div > h1 {
font-weight: 600;
font-size: 1.8rem;
line-height: 2.2rem;
margin: 0;
}
+
.mx_AddExistingToSpaceDialog
.mx_Dialog_title
> div
@@ -6630,9 +8309,11 @@ input.mx_StatusMessageContextMenu_message {
font-size: 1.5rem;
line-height: 2.4rem;
}
+
.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input {
border: none;
}
+
.mx_AddExistingToSpaceDialog
.mx_Dialog_title
.mx_Dropdown_input
@@ -6646,6 +8327,7 @@ input.mx_StatusMessageContextMenu_message {
font-size: 1.5rem;
line-height: 2.4rem;
}
+
.mx_AddExistingToSpaceDialog
.mx_Dialog_title
.mx_Dropdown_input
@@ -6653,6 +8335,7 @@ input.mx_StatusMessageContextMenu_message {
.mx_BaseAvatar {
display: none;
}
+
.mx_AddExistingToSpaceDialog
.mx_Dialog_title
.mx_Dropdown_input
@@ -6662,6 +8345,7 @@ input.mx_StatusMessageContextMenu_message {
padding-right: 32px;
position: relative;
}
+
.mx_AddExistingToSpaceDialog
.mx_Dialog_title
.mx_Dropdown_input
@@ -6683,15 +8367,18 @@ input.mx_StatusMessageContextMenu_message {
-webkit-mask-image: url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);
mask-image: url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);
}
+
.mx_AddExistingToSpaceDialog .mx_AddExistingToSpace {
display: contents;
}
+
.mx_AddressPickerDialog a:hover,
.mx_AddressPickerDialog a:link,
.mx_AddressPickerDialog a:visited {
color: #0dbd8b;
text-decoration: none;
}
+
.mx_AddressPickerDialog_input,
.mx_AddressPickerDialog_input:focus {
height: 26px;
@@ -6711,9 +8398,11 @@ input.mx_StatusMessageContextMenu_message {
box-sizing: border-box;
word-wrap: nowrap;
}
+
.mx_AddressPickerDialog .mx_Dialog_content {
min-height: 50px;
}
+
.mx_AddressPickerDialog_inputContainer {
border-radius: 3px;
border: 1px solid #e7e7e7;
@@ -6723,78 +8412,97 @@ input.mx_StatusMessageContextMenu_message {
overflow-x: hidden;
overflow-y: auto;
}
+
.mx_AddressPickerDialog_error {
margin-top: 10px;
color: #ff4b55;
}
+
.mx_AddressPickerDialog_cancel {
position: absolute;
right: 11px;
top: 13px;
cursor: pointer;
}
+
.mx_AddressPickerDialog_cancel object {
pointer-events: none;
}
+
.mx_AddressPickerDialog_identityServer {
margin-top: 1em;
}
+
.mx_AnalyticsModal table {
margin: 10px 0;
}
+
.mx_BetaFeedbackDialog .mx_BetaFeedbackDialog_subheading {
color: #2e2f32;
font-size: 1.4rem;
line-height: 2rem;
margin-bottom: 24px;
}
+
.mx_BetaFeedbackDialog .mx_AccessibleButton_kind_link {
padding: 0;
font-size: inherit;
line-height: inherit;
}
+
.mx_BugReportDialog
.mx_BugReportDialog_download
.mx_AccessibleButton_kind_link {
padding-left: 0;
}
+
.mx_ChangelogDialog_content {
max-height: 300px;
overflow: auto;
}
+
.mx_ChangelogDialog_li {
padding: 0.2em;
}
+
.mx_ChatCreateOrReuseDialog .mx_ChatCreateOrReuseDialog_tiles {
margin-top: 24px;
}
+
.mx_ChatCreateOrReuseDialog .mx_Dialog_content {
margin-bottom: 24px;
min-height: 100px;
}
+
.mx_ChatCreateOrReuseDialog .mx_RoomTile_badge {
display: none;
}
+
.mx_ChatCreateOrReuseDialog_profile {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_ChatCreateOrReuseDialog_profile_name {
padding: 14px;
}
+
.mx_CommunityPrototypeInviteDialog.mx_Dialog_fixedWidth {
width: 360px;
}
+
.mx_CommunityPrototypeInviteDialog .mx_Dialog_content {
margin-bottom: 0;
}
+
.mx_CommunityPrototypeInviteDialog
.mx_Dialog_content
.mx_CommunityPrototypeInviteDialog_people {
position: relative;
margin-bottom: 4px;
}
+
.mx_CommunityPrototypeInviteDialog
.mx_Dialog_content
.mx_CommunityPrototypeInviteDialog_people
@@ -6806,23 +8514,27 @@ input.mx_StatusMessageContextMenu_message {
font-size: 1.2rem;
float: right;
}
+
.mx_CommunityPrototypeInviteDialog
.mx_Dialog_content
.mx_CommunityPrototypeInviteDialog_morePeople {
margin-top: 8px;
}
+
.mx_CommunityPrototypeInviteDialog
.mx_Dialog_content
.mx_CommunityPrototypeInviteDialog_person {
position: relative;
margin-top: 4px;
}
+
.mx_CommunityPrototypeInviteDialog
.mx_Dialog_content
.mx_CommunityPrototypeInviteDialog_person
> * {
vertical-align: middle;
}
+
.mx_CommunityPrototypeInviteDialog
.mx_Dialog_content
.mx_CommunityPrototypeInviteDialog_person
@@ -6832,12 +8544,14 @@ input.mx_StatusMessageContextMenu_message {
top: calc(50% - 8px);
width: 16px;
}
+
.mx_CommunityPrototypeInviteDialog
.mx_Dialog_content
.mx_CommunityPrototypeInviteDialog_person
.mx_CommunityPrototypeInviteDialog_personIdentifiers {
display: inline-block;
}
+
.mx_CommunityPrototypeInviteDialog
.mx_Dialog_content
.mx_CommunityPrototypeInviteDialog_person
@@ -6845,6 +8559,7 @@ input.mx_StatusMessageContextMenu_message {
> * {
display: block;
}
+
.mx_CommunityPrototypeInviteDialog
.mx_Dialog_content
.mx_CommunityPrototypeInviteDialog_person
@@ -6855,6 +8570,7 @@ input.mx_StatusMessageContextMenu_message {
color: #2e2f32;
margin-left: 7px;
}
+
.mx_CommunityPrototypeInviteDialog
.mx_Dialog_content
.mx_CommunityPrototypeInviteDialog_person
@@ -6864,6 +8580,7 @@ input.mx_StatusMessageContextMenu_message {
color: #61708b;
margin-left: 7px;
}
+
.mx_CommunityPrototypeInviteDialog
.mx_Dialog_content
.mx_CommunityPrototypeInviteDialog_primaryButton {
@@ -6873,21 +8590,26 @@ input.mx_StatusMessageContextMenu_message {
height: 20px;
margin-top: 24px;
}
+
.mx_ConfirmUserActionDialog .mx_Dialog_content {
min-height: 48px;
margin-bottom: 24px;
}
+
.mx_ConfirmUserActionDialog_avatar {
float: left;
margin-right: 20px;
margin-top: -2px;
}
+
.mx_ConfirmUserActionDialog_name {
font-size: 1.8rem;
}
+
.mx_ConfirmUserActionDialog_userId {
font-size: 1.3rem;
}
+
.mx_ConfirmUserActionDialog_reasonField {
font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
Helvetica, Sans-Serif, Noto Color Emoji;
@@ -6901,6 +8623,7 @@ input.mx_StatusMessageContextMenu_message {
margin-bottom: 24px;
width: 90%;
}
+
.mx_CreateCommunityPrototypeDialog .mx_Dialog_content {
display: -webkit-box;
display: -ms-flexbox;
@@ -6911,6 +8634,7 @@ input.mx_StatusMessageContextMenu_message {
flex-direction: row;
margin-bottom: 12px;
}
+
.mx_CreateCommunityPrototypeDialog
.mx_Dialog_content
.mx_CreateCommunityPrototypeDialog_colName {
@@ -6918,6 +8642,7 @@ input.mx_StatusMessageContextMenu_message {
flex-basis: 66.66%;
padding-right: 100px;
}
+
.mx_CreateCommunityPrototypeDialog
.mx_Dialog_content
.mx_CreateCommunityPrototypeDialog_colName
@@ -6926,6 +8651,7 @@ input.mx_StatusMessageContextMenu_message {
font-size: 1.6rem;
line-height: 2rem;
}
+
.mx_CreateCommunityPrototypeDialog
.mx_Dialog_content
.mx_CreateCommunityPrototypeDialog_colName
@@ -6934,24 +8660,28 @@ input.mx_StatusMessageContextMenu_message {
color: #61708b;
margin-bottom: 16px;
}
+
.mx_CreateCommunityPrototypeDialog
.mx_Dialog_content
.mx_CreateCommunityPrototypeDialog_colName
.mx_CreateCommunityPrototypeDialog_subtext:last-child {
margin-top: 16px;
}
+
.mx_CreateCommunityPrototypeDialog
.mx_Dialog_content
.mx_CreateCommunityPrototypeDialog_colName
.mx_CreateCommunityPrototypeDialog_subtext.mx_CreateCommunityPrototypeDialog_subtext_error {
color: #ff4b55;
}
+
.mx_CreateCommunityPrototypeDialog
.mx_Dialog_content
.mx_CreateCommunityPrototypeDialog_colName
.mx_CreateCommunityPrototypeDialog_communityId {
position: relative;
}
+
.mx_CreateCommunityPrototypeDialog
.mx_Dialog_content
.mx_CreateCommunityPrototypeDialog_colName
@@ -6959,6 +8689,7 @@ input.mx_StatusMessageContextMenu_message {
.mx_InfoTooltip {
float: right;
}
+
.mx_CreateCommunityPrototypeDialog
.mx_Dialog_content
.mx_CreateCommunityPrototypeDialog_colName
@@ -6968,12 +8699,14 @@ input.mx_StatusMessageContextMenu_message {
font-size: 1.6rem;
line-height: 32px;
}
+
.mx_CreateCommunityPrototypeDialog
.mx_Dialog_content
.mx_CreateCommunityPrototypeDialog_colAvatar {
-ms-flex-preferred-size: 33.33%;
flex-basis: 33.33%;
}
+
.mx_CreateCommunityPrototypeDialog
.mx_Dialog_content
.mx_CreateCommunityPrototypeDialog_colAvatar
@@ -6981,6 +8714,7 @@ input.mx_StatusMessageContextMenu_message {
margin-top: 12px;
margin-bottom: 20px;
}
+
.mx_CreateCommunityPrototypeDialog
.mx_Dialog_content
.mx_CreateCommunityPrototypeDialog_colAvatar
@@ -6995,6 +8729,7 @@ input.mx_StatusMessageContextMenu_message {
height: 96px;
border-radius: 96px;
}
+
.mx_CreateCommunityPrototypeDialog
.mx_Dialog_content
.mx_CreateCommunityPrototypeDialog_colAvatar
@@ -7002,6 +8737,7 @@ input.mx_StatusMessageContextMenu_message {
.mx_CreateCommunityPrototypeDialog_placeholderAvatar {
background-color: #368bd6;
}
+
.mx_CreateCommunityPrototypeDialog
.mx_Dialog_content
.mx_CreateCommunityPrototypeDialog_colAvatar
@@ -7022,6 +8758,7 @@ input.mx_StatusMessageContextMenu_message {
-webkit-mask-image: url(../../img/element-icons/add-photo.c0b4c3b.svg);
mask-image: url(../../img/element-icons/add-photo.c0b4c3b.svg);
}
+
.mx_CreateCommunityPrototypeDialog
.mx_Dialog_content
.mx_CreateCommunityPrototypeDialog_colAvatar
@@ -7035,14 +8772,17 @@ input.mx_StatusMessageContextMenu_message {
display: block;
color: #61708b;
}
+
.mx_CreateGroupDialog_inputRow {
margin-top: 10px;
margin-bottom: 10px;
}
+
.mx_CreateGroupDialog_label {
text-align: left;
padding-bottom: 12px;
}
+
.mx_CreateGroupDialog_input {
font-size: 1.5rem;
border-radius: 3px;
@@ -7051,14 +8791,17 @@ input.mx_StatusMessageContextMenu_message {
color: #2e2f32;
background-color: #fff;
}
+
.mx_CreateGroupDialog_input_hasPrefixAndSuffix {
border-radius: 0;
}
+
.mx_CreateGroupDialog_input_group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_CreateGroupDialog_prefix,
.mx_CreateGroupDialog_suffix {
padding: 0 5px;
@@ -7067,17 +8810,21 @@ input.mx_StatusMessageContextMenu_message {
border: 1px solid #e7e7e7;
text-align: center;
}
+
.mx_CreateGroupDialog_prefix {
border-right: 0;
border-radius: 3px 0 0 3px;
}
+
.mx_CreateGroupDialog_suffix {
border-left: 0;
border-radius: 0 3px 3px 0;
}
+
.mx_CreateRoomDialog_details {
margin-top: 15px;
}
+
.mx_CreateRoomDialog_details .mx_CreateRoomDialog_details_summary {
outline: none;
list-style: none;
@@ -7085,10 +8832,12 @@ input.mx_StatusMessageContextMenu_message {
cursor: pointer;
color: #0dbd8b;
}
+
.mx_CreateRoomDialog_details
.mx_CreateRoomDialog_details_summary::-webkit-details-marker {
display: none;
}
+
.mx_CreateRoomDialog_details > div {
display: -webkit-box;
display: -ms-flexbox;
@@ -7098,16 +8847,20 @@ input.mx_StatusMessageContextMenu_message {
align-items: flex-start;
margin: 5px 0;
}
+
.mx_CreateRoomDialog_details > div input[type="checkbox"] {
margin-right: 10px;
}
+
.mx_CreateRoomDialog_label {
text-align: left;
padding-bottom: 12px;
}
+
.mx_CreateRoomDialog_input_container {
padding-right: 20px;
}
+
.mx_CreateRoomDialog_input {
font-size: 1.5rem;
border-radius: 3px;
@@ -7117,30 +8870,37 @@ input.mx_StatusMessageContextMenu_message {
background-color: #fff;
width: 100%;
}
+
.mx_CreateRoomDialog_aliasContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
- margin: 10px 0;
+ margin: 24px 0 10px;
}
+
.mx_CreateRoomDialog_aliasContainer .mx_RoomAliasField {
margin: 0;
}
+
.mx_CreateRoomDialog.mx_Dialog_fixedWidth {
width: 450px;
}
+
.mx_CreateRoomDialog .mx_Dialog_content {
margin-bottom: 40px;
}
+
.mx_CreateRoomDialog .mx_Field_input label,
.mx_CreateRoomDialog p {
color: #61708b;
}
+
.mx_CreateRoomDialog .mx_SettingsFlag {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_CreateRoomDialog .mx_SettingsFlag_label {
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
@@ -7148,69 +8908,145 @@ input.mx_StatusMessageContextMenu_message {
min-width: 0;
font-weight: 600;
}
+
.mx_CreateRoomDialog .mx_ToggleSwitch {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
margin-left: 30px;
}
-.mx_CreateRoomDialog .mx_CreateRoomDialog_topic {
- margin-bottom: 36px;
-}
+
.mx_CreateRoomDialog .mx_Dialog_content > .mx_SettingsFlag {
margin-top: 24px;
}
+
.mx_CreateRoomDialog p {
margin: 0 85px 0 0;
font-size: 1.2rem;
}
+
+.mx_CreateRoomDialog .mx_Dropdown {
+ margin-bottom: 8px;
+ font-weight: 400;
+ font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
+ Helvetica, Sans-Serif, Noto Color Emoji;
+ font-size: 1.4rem;
+ color: #2e2f32;
+}
+
+.mx_CreateRoomDialog .mx_Dropdown .mx_Dropdown_input {
+ border: 1px solid #e7e7e7;
+}
+
+.mx_CreateRoomDialog .mx_Dropdown .mx_Dropdown_option {
+ font-size: 1.4rem;
+ line-height: 3.2rem;
+ height: 32px;
+ min-height: 32px;
+}
+
+.mx_CreateRoomDialog .mx_Dropdown .mx_Dropdown_option > div {
+ padding-left: 30px;
+ position: relative;
+}
+
+.mx_CreateRoomDialog .mx_Dropdown .mx_Dropdown_option > div:before {
+ content: "";
+ position: absolute;
+ height: 16px;
+ width: 16px;
+ left: 6px;
+ top: 8px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ background-color: #737d8c;
+}
+
+.mx_CreateRoomDialog .mx_Dropdown .mx_CreateRoomDialog_dropdown_invite:before {
+ -webkit-mask-image: url(../../img/element-icons/lock.1f264bd.svg);
+ mask-image: url(../../img/element-icons/lock.1f264bd.svg);
+ -webkit-mask-size: contain;
+ mask-size: contain;
+}
+
+.mx_CreateRoomDialog .mx_Dropdown .mx_CreateRoomDialog_dropdown_public:before {
+ -webkit-mask-image: url(../../img/globe.8201f08.svg);
+ mask-image: url(../../img/globe.8201f08.svg);
+ -webkit-mask-size: 12px;
+ mask-size: 12px;
+}
+
+.mx_CreateRoomDialog
+ .mx_Dropdown
+ .mx_CreateRoomDialog_dropdown_restricted:before {
+ -webkit-mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
+ mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
+ -webkit-mask-size: contain;
+ mask-size: contain;
+}
+
.mx_DeactivateAccountDialog .mx_Dialog_content {
margin-bottom: 30px;
}
+
.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section {
margin-top: 60px;
}
+
.mx_DeactivateAccountDialog
.mx_DeactivateAccountDialog_input_section
.mx_Field {
width: 300px;
}
+
.mx_DevTools_content {
margin: 10px 0;
}
+
.mx_DevTools_ServersInRoomList_button {
cursor: default !important;
}
+
.mx_DevTools_RoomStateExplorer_query {
margin-bottom: 10px;
}
+
.mx_DevTools_RoomStateExplorer_button,
.mx_DevTools_ServersInRoomList_button {
margin-bottom: 10px;
width: 100%;
}
+
.mx_DevTools_label_left {
float: left;
}
+
.mx_DevTools_label_right {
float: right;
}
+
.mx_DevTools_label_bottom {
clear: both;
border-bottom: 1px solid #e5e5e5;
}
+
.mx_DevTools_inputRow {
display: table-row;
}
+
.mx_DevTools_inputLabelCell {
display: table-cell;
font-weight: 700;
padding-right: 24px;
}
+
.mx_DevTools_inputCell {
display: table-cell;
width: 240px;
}
+
.mx_DevTools_inputCell input {
display: inline-block;
border: 0;
@@ -7222,12 +9058,14 @@ input.mx_StatusMessageContextMenu_message {
Helvetica, Sans-Serif, Noto Color Emoji;
font-size: 1.6rem;
}
+
.mx_DevTools_textarea {
font-size: 1.2rem;
max-width: 684px;
min-height: 250px;
padding: 10px;
}
+
.mx_DevTools_eventTypeStateKeyGroup {
display: -webkit-box;
display: -ms-flexbox;
@@ -7235,12 +9073,15 @@ input.mx_StatusMessageContextMenu_message {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
+
.mx_DevTools_content .mx_Field_input:first-of-type {
margin-right: 42px;
}
+
.mx_DevTools_tgl {
display: none;
}
+
.mx_DevTools_tgl,
.mx_DevTools_tgl *,
.mx_DevTools_tgl + .mx_DevTools_tgl-btn,
@@ -7251,6 +9092,7 @@ input.mx_StatusMessageContextMenu_message {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
+
.mx_DevTools_tgl + .mx_DevTools_tgl-btn::-moz-selection,
.mx_DevTools_tgl::-moz-selection,
.mx_DevTools_tgl ::-moz-selection,
@@ -7260,6 +9102,7 @@ input.mx_StatusMessageContextMenu_message {
.mx_DevTools_tgl :before::-moz-selection {
background: none;
}
+
.mx_DevTools_tgl + .mx_DevTools_tgl-btn::selection,
.mx_DevTools_tgl::selection,
.mx_DevTools_tgl ::selection,
@@ -7269,6 +9112,7 @@ input.mx_StatusMessageContextMenu_message {
.mx_DevTools_tgl :before::selection {
background: none;
}
+
.mx_DevTools_tgl + .mx_DevTools_tgl-btn {
outline: 0;
display: block;
@@ -7281,6 +9125,7 @@ input.mx_StatusMessageContextMenu_message {
-ms-user-select: none;
user-select: none;
}
+
.mx_DevTools_tgl + .mx_DevTools_tgl-btn:after,
.mx_DevTools_tgl + .mx_DevTools_tgl-btn:before {
position: relative;
@@ -7289,15 +9134,19 @@ input.mx_StatusMessageContextMenu_message {
width: 50%;
height: 100%;
}
+
.mx_DevTools_tgl + .mx_DevTools_tgl-btn:after {
left: 0;
}
+
.mx_DevTools_tgl + .mx_DevTools_tgl-btn:before {
display: none;
}
+
.mx_DevTools_tgl:checked + .mx_DevTools_tgl-btn:after {
left: 50%;
}
+
.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn {
padding: 2px;
-webkit-transition: all 0.2s ease;
@@ -7306,6 +9155,7 @@ input.mx_StatusMessageContextMenu_message {
-webkit-perspective: 100px;
perspective: 100px;
}
+
.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:after,
.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:before {
display: inline-block;
@@ -7323,73 +9173,89 @@ input.mx_StatusMessageContextMenu_message {
backface-visibility: hidden;
border-radius: 4px;
}
+
.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:after {
content: attr(data-tg-on);
background: #02c66f;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
+
.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:before {
background: #ff3a19;
content: attr(data-tg-off);
}
+
.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:active:before {
-webkit-transform: rotateY(-20deg);
transform: rotateY(-20deg);
}
+
.mx_DevTools_tgl-flip:checked + .mx_DevTools_tgl-btn:before {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
+
.mx_DevTools_tgl-flip:checked + .mx_DevTools_tgl-btn:after {
-webkit-transform: rotateY(0);
transform: rotateY(0);
left: 0;
background: #7fc6a6;
}
+
.mx_DevTools_tgl-flip:checked + .mx_DevTools_tgl-btn:active:after {
-webkit-transform: rotateY(20deg);
transform: rotateY(20deg);
}
+
.mx_DevTools_VerificationRequest {
border: 1px solid #ccc;
border-radius: 3px;
padding: 1px 5px;
margin-bottom: 6px;
- font-family: Inconsolata, Twemoji, Apple Color Emoji, Segoe UI Emoji, Courier,
- monospace, Noto Color Emoji;
+ font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
+ monospace;
}
+
.mx_DevTools_VerificationRequest dl {
display: grid;
grid-template-columns: -webkit-max-content auto;
grid-template-columns: max-content auto;
margin: 0;
}
+
.mx_DevTools_VerificationRequest dd {
grid-column-start: 2;
}
+
.mx_DevTools_VerificationRequest dd:empty {
color: #666;
}
+
.mx_DevTools_VerificationRequest dd:empty:after {
content: "(empty)";
}
+
.mx_DevTools_VerificationRequest dt {
font-weight: 700;
grid-column-start: 1;
}
+
.mx_DevTools_VerificationRequest dt:after {
content: ":";
}
+
.mx_DevTools_SettingsExplorer table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
+
.mx_DevTools_SettingsExplorer table th {
border-bottom: 1px solid #0dbd8b;
text-align: left;
}
+
.mx_DevTools_SettingsExplorer table td,
.mx_DevTools_SettingsExplorer table th {
width: 360px;
@@ -7397,35 +9263,44 @@ input.mx_StatusMessageContextMenu_message {
overflow: hidden;
white-space: nowrap;
}
+
.mx_DevTools_SettingsExplorer table td + td,
.mx_DevTools_SettingsExplorer table th + th {
width: auto;
}
+
.mx_DevTools_SettingsExplorer table tr:hover {
background-color: rgba(13, 189, 139, 0.5);
}
+
.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_mutable {
background-color: #0dbd8b;
}
+
.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_immutable {
background-color: #ff4b55;
}
+
.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_edit {
float: right;
margin-right: 16px;
}
+
.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_warning {
border: 2px solid #ff4b55;
border-radius: 4px;
padding: 4px;
margin-bottom: 8px;
}
+
.mx_EditCommunityPrototypeDialog.mx_Dialog_fixedWidth {
width: 360px;
}
+
.mx_EditCommunityPrototypeDialog .mx_Dialog_content {
margin-bottom: 12px;
}
+
.mx_EditCommunityPrototypeDialog
.mx_Dialog_content
.mx_AccessibleButton.mx_AccessibleButton_kind_primary {
@@ -7434,6 +9309,7 @@ input.mx_StatusMessageContextMenu_message {
font-size: 1.6rem;
line-height: 32px;
}
+
.mx_EditCommunityPrototypeDialog
.mx_Dialog_content
.mx_EditCommunityPrototypeDialog_rowAvatar {
@@ -7448,12 +9324,14 @@ input.mx_StatusMessageContextMenu_message {
-ms-flex-align: center;
align-items: center;
}
+
.mx_EditCommunityPrototypeDialog
.mx_Dialog_content
.mx_EditCommunityPrototypeDialog_avatarContainer {
margin-top: 20px;
margin-bottom: 20px;
}
+
.mx_EditCommunityPrototypeDialog
.mx_Dialog_content
.mx_EditCommunityPrototypeDialog_avatarContainer
@@ -7466,12 +9344,14 @@ input.mx_StatusMessageContextMenu_message {
height: 96px;
border-radius: 96px;
}
+
.mx_EditCommunityPrototypeDialog
.mx_Dialog_content
.mx_EditCommunityPrototypeDialog_avatarContainer
.mx_EditCommunityPrototypeDialog_placeholderAvatar {
background-color: #368bd6;
}
+
.mx_EditCommunityPrototypeDialog
.mx_Dialog_content
.mx_EditCommunityPrototypeDialog_avatarContainer
@@ -7491,11 +9371,13 @@ input.mx_StatusMessageContextMenu_message {
-webkit-mask-image: url(../../img/element-icons/add-photo.c0b4c3b.svg);
mask-image: url(../../img/element-icons/add-photo.c0b4c3b.svg);
}
+
.mx_EditCommunityPrototypeDialog
.mx_Dialog_content
.mx_EditCommunityPrototypeDialog_tip {
margin-left: 20px;
}
+
.mx_EditCommunityPrototypeDialog
.mx_Dialog_content
.mx_EditCommunityPrototypeDialog_tip
@@ -7507,32 +9389,194 @@ input.mx_StatusMessageContextMenu_message {
display: block;
color: #61708b;
}
+
+.mx_ExportDialog .mx_ExportDialog_subheading {
+ font-size: 1.6rem;
+ display: block;
+ font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
+ Helvetica, Sans-Serif, Noto Color Emoji;
+ font-weight: 600;
+ color: #2e2f32;
+ margin-top: 18px;
+ margin-bottom: 12px;
+}
+
+.mx_ExportDialog.mx_ExportDialog_Exporting .mx_ExportDialog_options {
+ pointer-events: none;
+}
+
+.mx_ExportDialog.mx_ExportDialog_Exporting .mx_Field_select:before {
+ display: none;
+}
+
+.mx_ExportDialog.mx_ExportDialog_Exporting
+ .mx_RadioButton
+ input[type="radio"]:checked
+ + div
+ > div {
+ background: grey;
+}
+
+.mx_ExportDialog.mx_ExportDialog_Exporting
+ .mx_RadioButton
+ input[type="radio"]:checked
+ + div {
+ border-color: unset;
+}
+
+.mx_ExportDialog.mx_ExportDialog_Exporting
+ .mx_Field_valid.mx_Field:focus-within
+ label,
+.mx_ExportDialog.mx_ExportDialog_Exporting .mx_Field_valid.mx_Field label {
+ color: unset;
+}
+
+.mx_ExportDialog.mx_ExportDialog_Exporting .mx_Field_valid.mx_Field,
+.mx_ExportDialog.mx_ExportDialog_Exporting
+ .mx_Field_valid.mx_Field:focus-within {
+ border-color: #e7e7e7;
+}
+
+.mx_ExportDialog.mx_ExportDialog_Exporting
+ .mx_Checkbox
+ input[type="checkbox"]:checked
+ + label
+ > .mx_Checkbox_background {
+ background: grey;
+ border-color: grey;
+}
+
+.mx_ExportDialog .mx_ExportDialog_progress .mx_Dialog_buttons {
+ margin-top: unset;
+ margin-left: 18px;
+}
+
+.mx_ExportDialog .mx_ExportDialog_progress .mx_ExportDialog_spinner {
+ -webkit-animation: mx_rotate 2s linear infinite;
+ animation: mx_rotate 2s linear infinite;
+ z-index: 2;
+ position: relative;
+ margin-right: 10px;
+ width: 24px;
+ height: 24px;
+}
+
+.mx_ExportDialog
+ .mx_ExportDialog_progress
+ .mx_ExportDialog_spinner
+ .mx_ExportDialog_spinner_path {
+ stroke: #0dbd8b;
+ stroke-linecap: round;
+ -webkit-animation: mx_dash 1.5s ease-in-out infinite;
+ animation: mx_dash 1.5s ease-in-out infinite;
+}
+
+.mx_ExportDialog .mx_ExportDialog_progress {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.mx_ExportDialog .mx_RadioButton > .mx_RadioButton_content {
+ margin-top: 5px;
+ margin-bottom: 5px;
+}
+
+.mx_ExportDialog .mx_Field {
+ width: 256px;
+}
+
+.mx_ExportDialog .mx_Field_postfix {
+ padding: 9px 10px;
+}
+
+@-webkit-keyframes mx_rotate {
+ to {
+ -webkit-transform: rotate(1turn);
+ transform: rotate(1turn);
+ }
+}
+
+@keyframes mx_rotate {
+ to {
+ -webkit-transform: rotate(1turn);
+ transform: rotate(1turn);
+ }
+}
+
+@-webkit-keyframes mx_dash {
+ 0% {
+ stroke-dasharray: 1, 150;
+ stroke-dashoffset: 0;
+ }
+ 50% {
+ stroke-dasharray: 90, 150;
+ stroke-dashoffset: -35;
+ }
+ to {
+ stroke-dasharray: 90, 150;
+ stroke-dashoffset: -124;
+ }
+}
+
+@keyframes mx_dash {
+ 0% {
+ stroke-dasharray: 1, 150;
+ stroke-dashoffset: 0;
+ }
+ 50% {
+ stroke-dasharray: 90, 150;
+ stroke-dashoffset: -35;
+ }
+ to {
+ stroke-dasharray: 90, 150;
+ stroke-dashoffset: -124;
+ }
+}
+
.mx_FeedbackDialog hr {
margin: 24px 0;
border-color: #e7e7e7;
}
+
.mx_FeedbackDialog .mx_Dialog_content {
margin-bottom: 24px;
}
+
.mx_FeedbackDialog .mx_Dialog_content > h2 {
margin-bottom: 32px;
}
+
.mx_FeedbackDialog .mx_FeedbackDialog_section {
position: relative;
padding-left: 52px;
}
+
.mx_FeedbackDialog .mx_FeedbackDialog_section > p {
color: #8d99a5;
}
+
.mx_FeedbackDialog .mx_FeedbackDialog_section .mx_AccessibleButton_kind_link {
padding: 0;
font-size: inherit;
}
+
.mx_FeedbackDialog .mx_FeedbackDialog_section .mx_AccessibleButton_kind_link,
.mx_FeedbackDialog .mx_FeedbackDialog_section a {
color: #0dbd8b;
text-decoration: underline;
}
+
.mx_FeedbackDialog .mx_FeedbackDialog_section:after,
.mx_FeedbackDialog .mx_FeedbackDialog_section:before {
content: "";
@@ -7542,10 +9586,12 @@ input.mx_StatusMessageContextMenu_message {
left: 0;
top: 0;
}
+
.mx_FeedbackDialog .mx_FeedbackDialog_section:before {
background-color: #c1c6cd;
border-radius: 20px;
}
+
.mx_FeedbackDialog .mx_FeedbackDialog_section:after {
background: #fff;
-webkit-mask-position: center;
@@ -7555,10 +9601,12 @@ input.mx_StatusMessageContextMenu_message {
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
+
.mx_FeedbackDialog .mx_FeedbackDialog_reportBug:after {
-webkit-mask-image: url(../../img/feather-customised/bug.3dc7afa.svg);
mask-image: url(../../img/feather-customised/bug.3dc7afa.svg);
}
+
.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
@@ -7573,6 +9621,7 @@ input.mx_StatusMessageContextMenu_message {
vertical-align: top;
cursor: pointer;
}
+
.mx_FeedbackDialog
.mx_FeedbackDialog_rateApp
.mx_RadioButton
@@ -7580,6 +9629,7 @@ input.mx_StatusMessageContextMenu_message {
+ div {
display: none;
}
+
.mx_FeedbackDialog
.mx_FeedbackDialog_rateApp
.mx_RadioButton
@@ -7592,32 +9642,254 @@ input.mx_StatusMessageContextMenu_message {
border-radius: 20px;
margin: 5px;
}
+
.mx_FeedbackDialog
.mx_FeedbackDialog_rateApp
.mx_RadioButton
.mx_RadioButton_spacer {
display: none;
}
+
.mx_FeedbackDialog
.mx_FeedbackDialog_rateApp
.mx_RadioButton
+ .mx_RadioButton {
margin-left: 16px;
}
+
.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton_checked {
font-size: 24px;
border-color: #0dbd8b;
}
+
.mx_FeedbackDialog .mx_FeedbackDialog_rateApp:after {
-webkit-mask-image: url(../../img/element-icons/feedback.a91241e.svg);
mask-image: url(../../img/element-icons/feedback.a91241e.svg);
}
+
+.mx_ForwardDialog {
+ width: 520px;
+ color: #2e2f32;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ min-height: 0;
+ height: 80vh;
+}
+
+.mx_ForwardDialog > h3 {
+ margin: 0 0 6px;
+ color: #737d8c;
+ font-size: 1.2rem;
+ font-weight: 600;
+ line-height: 1.5rem;
+}
+
+.mx_ForwardDialog > .mx_ForwardDialog_preview {
+ max-height: 30%;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ overflow-y: auto;
+}
+
+.mx_ForwardDialog
+ > .mx_ForwardDialog_preview
+ .mx_EventTile[data-layout="bubble"] {
+ margin-top: 20px;
+}
+
+.mx_ForwardDialog > .mx_ForwardDialog_preview div {
+ pointer-events: none;
+}
+
+.mx_ForwardDialog > .mx_ForwardDialog_preview .mx_EventTile_e2eIcon_unencrypted,
+.mx_ForwardDialog > .mx_ForwardDialog_preview .mx_EventTile_msgOption,
+.mx_ForwardDialog > .mx_ForwardDialog_preview .mx_MFileBody_download {
+ display: none;
+}
+
+.mx_ForwardDialog > hr {
+ width: 100%;
+ border: none;
+ border-top: 1px solid #e7e7e7;
+ margin: 12px 0;
+}
+
+.mx_ForwardDialog > .mx_ForwardList {
+ display: contents;
+}
+
+.mx_ForwardDialog > .mx_ForwardList .mx_SearchBox {
+ margin: 0 0 15px;
+ -webkit-box-flex: 0;
+ -ms-flex-positive: 0;
+ flex-grow: 0;
+}
+
+.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_content {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+
+.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_noResults {
+ display: block;
+ margin-top: 24px;
+}
+
+.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results:not(:first-child) {
+ margin-top: 24px;
+}
+
+.mx_ForwardDialog
+ > .mx_ForwardList
+ .mx_ForwardList_results
+ .mx_ForwardList_entry {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ height: 32px;
+ padding: 6px;
+ border-radius: 8px;
+}
+
+.mx_ForwardDialog
+ > .mx_ForwardList
+ .mx_ForwardList_results
+ .mx_ForwardList_entry:hover {
+ background-color: hsla(0, 0%, 91%, 0.77);
+}
+
+.mx_ForwardDialog
+ > .mx_ForwardList
+ .mx_ForwardList_results
+ .mx_ForwardList_entry
+ .mx_ForwardList_roomButton {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin-right: 12px;
+ min-width: 0;
+}
+
+.mx_ForwardDialog
+ > .mx_ForwardList
+ .mx_ForwardList_results
+ .mx_ForwardList_entry
+ .mx_ForwardList_roomButton
+ .mx_DecoratedRoomAvatar {
+ margin-right: 12px;
+}
+
+.mx_ForwardDialog
+ > .mx_ForwardList
+ .mx_ForwardList_results
+ .mx_ForwardList_entry
+ .mx_ForwardList_roomButton
+ .mx_ForwardList_entry_name {
+ font-size: 1.5rem;
+ line-height: 30px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ margin-right: 12px;
+}
+
+.mx_ForwardDialog
+ > .mx_ForwardList
+ .mx_ForwardList_results
+ .mx_ForwardList_entry
+ .mx_ForwardList_sendButton {
+ position: relative;
+}
+
+.mx_ForwardDialog
+ > .mx_ForwardList
+ .mx_ForwardList_results
+ .mx_ForwardList_entry
+ .mx_ForwardList_sendButton:not(.mx_ForwardList_canSend)
+ .mx_ForwardList_sendLabel {
+ visibility: hidden;
+}
+
+.mx_ForwardDialog
+ > .mx_ForwardList
+ .mx_ForwardList_results
+ .mx_ForwardList_entry
+ .mx_ForwardList_sendButton
+ .mx_ForwardList_sendIcon,
+.mx_ForwardDialog
+ > .mx_ForwardList
+ .mx_ForwardList_results
+ .mx_ForwardList_entry
+ .mx_ForwardList_sendButton
+ .mx_NotificationBadge {
+ position: absolute;
+}
+
+.mx_ForwardDialog
+ > .mx_ForwardList
+ .mx_ForwardList_results
+ .mx_ForwardList_entry
+ .mx_ForwardList_sendButton
+ .mx_NotificationBadge {
+ background-color: #fff;
+}
+
+.mx_ForwardDialog
+ > .mx_ForwardList
+ .mx_ForwardList_results
+ .mx_ForwardList_entry
+ .mx_ForwardList_sendButton.mx_ForwardList_sending
+ .mx_ForwardList_sendIcon {
+ background-color: #0dbd8b;
+ -webkit-mask-image: url(../../img/element-icons/circle-sending.bcca6aa.svg);
+ mask-image: url(../../img/element-icons/circle-sending.bcca6aa.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 14px;
+ mask-size: 14px;
+ width: 14px;
+ height: 14px;
+}
+
+.mx_ForwardDialog
+ > .mx_ForwardList
+ .mx_ForwardList_results
+ .mx_ForwardList_entry
+ .mx_ForwardList_sendButton.mx_ForwardList_sent
+ .mx_ForwardList_sendIcon {
+ background-color: #0dbd8b;
+ -webkit-mask-image: url(../../img/element-icons/circle-sent.5079cbe.svg);
+ mask-image: url(../../img/element-icons/circle-sent.5079cbe.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 14px;
+ mask-size: 14px;
+ width: 14px;
+ height: 14px;
+}
+
.mx_GroupAddressPicker_checkboxContainer {
margin-top: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_HostSignupDialog {
width: 90vw;
max-width: 580px;
@@ -7625,19 +9897,23 @@ input.mx_StatusMessageContextMenu_message {
max-height: 600px;
background-color: #fff;
}
+
.mx_HostSignupDialog .mx_HostSignupDialog_info {
text-align: center;
}
+
.mx_HostSignupDialog
.mx_HostSignupDialog_info
.mx_HostSignupDialog_content_top {
margin-bottom: 24px;
}
+
.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_paragraphs {
text-align: left;
padding-left: 25%;
padding-right: 25%;
}
+
.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_buttons {
margin-bottom: 24px;
display: -webkit-box;
@@ -7647,6 +9923,7 @@ input.mx_StatusMessageContextMenu_message {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_HostSignupDialog
.mx_HostSignupDialog_info
.mx_HostSignupDialog_buttons
@@ -7654,6 +9931,7 @@ input.mx_StatusMessageContextMenu_message {
padding: 12px;
margin: 0 16px;
}
+
.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_footer {
display: -webkit-box;
display: -ms-flexbox;
@@ -7665,9 +9943,11 @@ input.mx_StatusMessageContextMenu_message {
-ms-flex-align: baseline;
align-items: baseline;
}
+
.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_footer img {
padding-right: 5px;
}
+
.mx_HostSignupDialog iframe {
width: 100%;
height: 100%;
@@ -7675,12 +9955,15 @@ input.mx_StatusMessageContextMenu_message {
background-color: #fff;
min-height: 540px;
}
+
.mx_HostSignupDialog_text_dark {
color: #2e2f32;
}
+
.mx_HostSignupDialog_text_light {
color: #737d8c;
}
+
.mx_HostSignup_maximize_button {
-webkit-mask: url(../../img/feather-customised/maximise.dc32127.svg);
mask: url(../../img/feather-customised/maximise.dc32127.svg);
@@ -7692,6 +9975,7 @@ input.mx_StatusMessageContextMenu_message {
mask-size: cover;
right: 10px;
}
+
.mx_HostSignup_maximize_button,
.mx_HostSignup_minimize_button {
width: 14px;
@@ -7701,6 +9985,7 @@ input.mx_StatusMessageContextMenu_message {
position: absolute;
top: 10px;
}
+
.mx_HostSignup_minimize_button {
-webkit-mask: url(../../img/feather-customised/minimise.aec9142.svg);
mask: url(../../img/feather-customised/minimise.aec9142.svg);
@@ -7712,6 +9997,7 @@ input.mx_StatusMessageContextMenu_message {
mask-size: cover;
right: 25px;
}
+
.mx_HostSignup_persisted {
width: 90vw;
max-width: 580px;
@@ -7722,6 +10008,7 @@ input.mx_StatusMessageContextMenu_message {
position: fixed;
display: none;
}
+
.mx_HostSignupDialog_minimized {
position: fixed;
bottom: 80px;
@@ -7730,27 +10017,37 @@ input.mx_StatusMessageContextMenu_message {
height: 217px;
overflow: hidden;
}
+
.mx_HostSignupDialog_minimized.mx_Dialog {
padding: 12px;
}
+
.mx_HostSignupDialog_minimized .mx_Dialog_title {
text-align: left !important;
padding-left: 20px;
font-size: 1.5rem;
}
+
.mx_HostSignupDialog_minimized iframe {
width: 100%;
height: 100%;
border: none;
background-color: #fff;
}
+
.mx_IncomingSasDialog_opponentProfile_image {
position: relative;
}
+
.mx_IncomingSasDialog_opponentProfile h2 {
display: inline-block;
margin-left: 10px;
}
+
+.mx_InviteDialog_transferWrapper .mx_Dialog {
+ padding-bottom: 16px;
+}
+
.mx_InviteDialog_addressBar {
display: -webkit-box;
display: -ms-flexbox;
@@ -7759,7 +10056,9 @@ input.mx_StatusMessageContextMenu_message {
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
+ margin: 8px 45px 0 0;
}
+
.mx_InviteDialog_addressBar .mx_InviteDialog_editor {
-webkit-box-flex: 1;
-ms-flex: 1;
@@ -7777,6 +10076,7 @@ input.mx_StatusMessageContextMenu_message {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
+
.mx_InviteDialog_addressBar .mx_InviteDialog_editor .mx_InviteDialog_userTile {
margin: 6px 6px 0 0;
display: inline-block;
@@ -7784,6 +10084,7 @@ input.mx_StatusMessageContextMenu_message {
min-width: -moz-max-content;
min-width: max-content;
}
+
.mx_InviteDialog_addressBar .mx_InviteDialog_editor > input[type="text"] {
margin: 6px 0 !important;
height: 24px;
@@ -7801,12 +10102,14 @@ input.mx_StatusMessageContextMenu_message {
flex: 1 !important;
color: #2e2f32 !important;
}
+
.mx_InviteDialog_addressBar .mx_InviteDialog_goButton {
min-width: 48px;
margin-left: 10px;
height: 25px;
line-height: 2.5rem;
}
+
.mx_InviteDialog_addressBar .mx_InviteDialog_buttonAndSpinner .mx_Spinner {
width: 20px;
height: 20px;
@@ -7814,43 +10117,124 @@ input.mx_StatusMessageContextMenu_message {
display: inline-block;
vertical-align: middle;
}
+
.mx_InviteDialog_section {
- padding-bottom: 10px;
+ padding-bottom: 4px;
}
+
.mx_InviteDialog_section h3 {
font-size: 1.2rem;
color: #61708b;
font-weight: 700;
text-transform: uppercase;
}
+
+.mx_InviteDialog_section > p {
+ margin: 0;
+}
+
+.mx_InviteDialog_section > span {
+ color: #2e2f32;
+}
+
.mx_InviteDialog_section .mx_InviteDialog_subname {
margin-bottom: 10px;
margin-top: -10px;
font-size: 1.2rem;
color: #61708b;
}
+
+.mx_InviteDialog_section_hidden_suggestions_disclaimer {
+ padding: 8px 0 16px;
+ font-size: 1.4rem;
+}
+
+.mx_InviteDialog_section_hidden_suggestions_disclaimer > span {
+ color: #2e2f32;
+ font-weight: 600;
+}
+
+.mx_InviteDialog_section_hidden_suggestions_disclaimer > p {
+ margin: 0;
+}
+
+.mx_InviteDialog_footer {
+ border-top: 1px solid #e7e7e7;
+}
+
+.mx_InviteDialog_footer > h3 {
+ margin: 12px 0;
+ font-size: 1.2rem;
+ color: #61708b;
+ font-weight: 700;
+ text-transform: uppercase;
+}
+
+.mx_InviteDialog_footer .mx_InviteDialog_footer_link {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ border-radius: 4px;
+ border: 1px solid #747474;
+ padding: 8px;
+}
+
+.mx_InviteDialog_footer .mx_InviteDialog_footer_link > a {
+ text-decoration: none;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.mx_InviteDialog_footer .mx_InviteDialog_footer_link_copy {
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ cursor: pointer;
+ margin-left: 20px;
+ display: inherit;
+}
+
+.mx_InviteDialog_footer .mx_InviteDialog_footer_link_copy > div {
+ -webkit-mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
+ mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
+ background-color: #2e2f32;
+ margin-left: 5px;
+ width: 20px;
+ height: 20px;
+ background-repeat: no-repeat;
+}
+
.mx_InviteDialog_roomTile {
cursor: pointer;
padding: 5px 10px;
}
+
.mx_InviteDialog_roomTile:hover {
background-color: #f3f8fd;
border-radius: 4px;
}
+
.mx_InviteDialog_roomTile * {
vertical-align: middle;
}
+
.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_avatarStack {
display: inline-block;
position: relative;
width: 36px;
height: 36px;
}
+
.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_avatarStack > * {
position: absolute;
top: 0;
left: 0;
}
+
.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_selected {
width: 36px;
height: 36px;
@@ -7859,6 +10243,7 @@ input.mx_StatusMessageContextMenu_message {
display: inline-block;
position: relative;
}
+
.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_selected:before {
content: "";
width: 24px;
@@ -7876,20 +10261,32 @@ input.mx_StatusMessageContextMenu_message {
left: 6px;
background-color: #fff;
}
+
.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_nameStack {
display: inline-block;
+ overflow: hidden;
}
+
.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_name {
font-weight: 600;
font-size: 1.4rem;
color: #2e2f32;
margin-left: 7px;
}
+
.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_userId {
font-size: 1.2rem;
color: #61708b;
margin-left: 7px;
}
+
+.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_name,
+.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_userId {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_time {
text-align: right;
font-size: 1.2rem;
@@ -7897,12 +10294,15 @@ input.mx_StatusMessageContextMenu_message {
float: right;
line-height: 3.6rem;
}
+
.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_highlight {
font-weight: 900;
}
+
.mx_InviteDialog_userTile {
margin-right: 8px;
}
+
.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill {
background-color: #368bd6;
border-radius: 12px;
@@ -7913,6 +10313,7 @@ input.mx_StatusMessageContextMenu_message {
padding-right: 8px;
color: #fff;
}
+
.mx_InviteDialog_userTile
.mx_InviteDialog_userTile_pill
.mx_InviteDialog_userTile_avatar {
@@ -7921,6 +10322,7 @@ input.mx_StatusMessageContextMenu_message {
left: -5px;
top: 2px;
}
+
.mx_InviteDialog_userTile
.mx_InviteDialog_userTile_pill
.mx_InviteDialog_userTile_name,
@@ -7929,32 +10331,200 @@ input.mx_StatusMessageContextMenu_message {
img.mx_InviteDialog_userTile_avatar {
vertical-align: top;
}
+
.mx_InviteDialog_userTile
.mx_InviteDialog_userTile_pill
.mx_InviteDialog_userTile_threepidAvatar {
background-color: #fff;
}
+
.mx_InviteDialog_userTile .mx_InviteDialog_userTile_remove {
display: inline-block;
margin-left: 4px;
}
-.mx_InviteDialog {
- height: 590px;
+
+.mx_InviteDialog_other {
+ height: 600px;
padding-left: 20px;
}
+
+.mx_InviteDialog_other .mx_InviteDialog_userSections {
+ height: calc(100% - 115px);
+}
+
+.mx_InviteDialog_content {
+ height: calc(100% - 36px);
+ overflow: hidden;
+}
+
+.mx_InviteDialog_transfer {
+ width: 496px;
+ height: 466px;
+}
+
+.mx_InviteDialog_transfer,
+.mx_InviteDialog_transfer .mx_InviteDialog_content {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+
+.mx_InviteDialog_transfer .mx_InviteDialog_content .mx_TabbedView {
+ height: calc(100% - 60px);
+}
+
+.mx_InviteDialog_transfer .mx_InviteDialog_content {
+ overflow: visible;
+}
+
+.mx_InviteDialog_transfer .mx_InviteDialog_addressBar {
+ margin-top: 8px;
+}
+
+.mx_InviteDialog_transfer input[type="checkbox"] {
+ margin-right: 8px;
+}
+
.mx_InviteDialog_userSections {
- margin-top: 10px;
+ margin-top: 4px;
overflow-y: auto;
- padding-right: 45px;
- height: 455px;
+ padding: 0 45px 4px 0;
}
-.mx_InviteDialog_addressBar,
+
+.mx_InviteDialog_hasFooter .mx_InviteDialog_userSections {
+ height: calc(100% - 175px);
+}
+
.mx_InviteDialog_helpText {
- margin-right: 45px;
+ margin: 0;
}
+
.mx_InviteDialog_helpText .mx_AccessibleButton_kind_link {
padding: 0;
}
+
+.mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField {
+ border-top: 0;
+ border-left: 0;
+ border-right: 0;
+ border-radius: 0;
+ margin-top: 0;
+ border-color: #c1c6cd;
+}
+
+.mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField input {
+ font-size: 18px;
+ font-weight: 600;
+ padding-top: 0;
+}
+
+.mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField:focus-within {
+ border-color: #0dbd8b;
+}
+
+.mx_InviteDialog_dialPadField .mx_Field_postfix {
+ border-left: none;
+}
+
+.mx_InviteDialog_dialPad {
+ width: 224px;
+ margin-top: 16px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.mx_InviteDialog_dialPad .mx_DialPad {
+ grid-row-gap: 16px;
+ row-gap: 16px;
+ grid-column-gap: 48px;
+ -webkit-column-gap: 48px;
+ -moz-column-gap: 48px;
+ column-gap: 48px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.mx_InviteDialog_transferConsultConnect {
+ padding-top: 16px;
+ position: relative;
+ width: 496px;
+ left: -24px;
+ padding-left: 24px;
+ padding-right: 24px;
+ border-top: 1px solid #e3e8f0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.mx_InviteDialog_transferConsultConnect_pushRight {
+ margin-left: auto;
+}
+
+.mx_InviteDialog_userDirectoryIcon:before {
+ -webkit-mask-image: url(../../img/voip/tab-userdirectory.cc3ed9a.svg);
+ mask-image: url(../../img/voip/tab-userdirectory.cc3ed9a.svg);
+}
+
+.mx_InviteDialog_dialPadIcon:before {
+ -webkit-mask-image: url(../../img/voip/tab-dialpad.a4a190e.svg);
+ mask-image: url(../../img/voip/tab-dialpad.a4a190e.svg);
+}
+
+.mx_InviteDialog_multiInviterError > h4 {
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+ color: #737d8c;
+ font-weight: 400;
+}
+
+.mx_InviteDialog_multiInviterError
+ > div
+ .mx_InviteDialog_multiInviterError_entry {
+ margin-bottom: 24px;
+}
+
+.mx_InviteDialog_multiInviterError
+ > div
+ .mx_InviteDialog_multiInviterError_entry
+ .mx_InviteDialog_multiInviterError_entry_userProfile
+ .mx_InviteDialog_multiInviterError_entry_name {
+ margin-left: 6px;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+ font-weight: 600;
+ color: #2e2f32;
+}
+
+.mx_InviteDialog_multiInviterError
+ > div
+ .mx_InviteDialog_multiInviterError_entry
+ .mx_InviteDialog_multiInviterError_entry_userProfile
+ .mx_InviteDialog_multiInviterError_entry_userId {
+ margin-left: 6px;
+ font-size: 1.2rem;
+ line-height: 1.5rem;
+ color: #8d99a5;
+}
+
+.mx_InviteDialog_multiInviterError
+ > div
+ .mx_InviteDialog_multiInviterError_entry
+ .mx_InviteDialog_multiInviterError_entry_error {
+ margin-left: 32px;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+ color: #ff4b55;
+}
+
.mx_KeyboardShortcutsDialog {
display: -webkit-box;
display: -ms-flexbox;
@@ -7968,20 +10538,25 @@ input.mx_StatusMessageContextMenu_message {
margin-bottom: -50px;
max-height: 1100px;
}
+
.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_category {
width: 33.3333%;
margin: 0 0 40px;
}
+
.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_category > div {
padding-left: 5px;
}
+
.mx_KeyboardShortcutsDialog h3 {
margin: 0 0 10px;
}
+
.mx_KeyboardShortcutsDialog h5 {
margin: 15px 0 5px;
font-weight: 400;
}
+
.mx_KeyboardShortcutsDialog kbd {
padding: 5px;
border-radius: 4px;
@@ -7996,15 +10571,211 @@ input.mx_StatusMessageContextMenu_message {
margin-bottom: 4px;
text-transform: capitalize;
}
+
.mx_KeyboardShortcutsDialog kbd + kbd {
margin-left: 5px;
}
+
.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_inline div {
display: inline;
}
+
+.mx_ManageRestrictedJoinRuleDialog,
+.mx_ManageRestrictedJoinRuleDialog_wrapper .mx_Dialog {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+
+.mx_ManageRestrictedJoinRuleDialog {
+ width: 480px;
+ color: #2e2f32;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ min-height: 0;
+ height: 60vh;
+}
+
+.mx_ManageRestrictedJoinRuleDialog .mx_SearchBox {
+ margin: 0 0 15px;
+ -webkit-box-flex: 0;
+ -ms-flex-positive: 0;
+ flex-grow: 0;
+}
+
+.mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_content {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+
+.mx_ManageRestrictedJoinRuleDialog
+ .mx_ManageRestrictedJoinRuleDialog_noResults {
+ display: block;
+ margin-top: 24px;
+}
+
+.mx_ManageRestrictedJoinRuleDialog
+ .mx_ManageRestrictedJoinRuleDialog_section:not(:first-child) {
+ margin-top: 24px;
+}
+
+.mx_ManageRestrictedJoinRuleDialog
+ .mx_ManageRestrictedJoinRuleDialog_section
+ > h3 {
+ margin: 0;
+ color: #737d8c;
+ font-size: 1.2rem;
+ font-weight: 600;
+ line-height: 1.5rem;
+}
+
+.mx_ManageRestrictedJoinRuleDialog
+ .mx_ManageRestrictedJoinRuleDialog_section
+ .mx_ManageRestrictedJoinRuleDialog_entry {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin-top: 12px;
+}
+
+.mx_ManageRestrictedJoinRuleDialog
+ .mx_ManageRestrictedJoinRuleDialog_section
+ .mx_ManageRestrictedJoinRuleDialog_entry
+ > div {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+
+.mx_ManageRestrictedJoinRuleDialog
+ .mx_ManageRestrictedJoinRuleDialog_section
+ .mx_ManageRestrictedJoinRuleDialog_entry
+ .mx_RoomAvatar_isSpaceRoom
+ img,
+.mx_ManageRestrictedJoinRuleDialog
+ .mx_ManageRestrictedJoinRuleDialog_section
+ .mx_ManageRestrictedJoinRuleDialog_entry
+ img.mx_RoomAvatar_isSpaceRoom {
+ border-radius: 4px;
+}
+
+.mx_ManageRestrictedJoinRuleDialog
+ .mx_ManageRestrictedJoinRuleDialog_section
+ .mx_ManageRestrictedJoinRuleDialog_entry
+ .mx_ManageRestrictedJoinRuleDialog_entry_name {
+ margin: 0 8px;
+ font-size: 1.5rem;
+ line-height: 30px;
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+.mx_ManageRestrictedJoinRuleDialog
+ .mx_ManageRestrictedJoinRuleDialog_section
+ .mx_ManageRestrictedJoinRuleDialog_entry
+ .mx_ManageRestrictedJoinRuleDialog_entry_description {
+ margin-top: 8px;
+ font-size: 1.2rem;
+ line-height: 1.5rem;
+ color: #8d99a5;
+}
+
+.mx_ManageRestrictedJoinRuleDialog
+ .mx_ManageRestrictedJoinRuleDialog_section
+ .mx_ManageRestrictedJoinRuleDialog_entry
+ .mx_Checkbox {
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.mx_ManageRestrictedJoinRuleDialog
+ .mx_ManageRestrictedJoinRuleDialog_section_spaces
+ .mx_BaseAvatar {
+ margin-right: 12px;
+}
+
+.mx_ManageRestrictedJoinRuleDialog
+ .mx_ManageRestrictedJoinRuleDialog_section_spaces
+ .mx_BaseAvatar_image {
+ border-radius: 8px;
+}
+
+.mx_ManageRestrictedJoinRuleDialog
+ .mx_ManageRestrictedJoinRuleDialog_section_info {
+ position: relative;
+ border-radius: 8px;
+ margin: 12px 0;
+ padding: 8px 8px 8px 42px;
+ background-color: #f3f8fd;
+ font-size: 1.2rem;
+ line-height: 1.5rem;
+ color: #737d8c;
+}
+
+.mx_ManageRestrictedJoinRuleDialog
+ .mx_ManageRestrictedJoinRuleDialog_section_info:before {
+ content: "";
+ position: absolute;
+ left: 10px;
+ top: calc(50% - 8px);
+ height: 16px;
+ width: 16px;
+ background-color: #737d8c;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
+ mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+
+.mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_footer {
+ margin-top: 20px;
+}
+
+.mx_ManageRestrictedJoinRuleDialog
+ .mx_ManageRestrictedJoinRuleDialog_footer
+ .mx_ManageRestrictedJoinRuleDialog_footer_buttons {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+ margin-left: auto;
+}
+
+.mx_ManageRestrictedJoinRuleDialog
+ .mx_ManageRestrictedJoinRuleDialog_footer
+ .mx_ManageRestrictedJoinRuleDialog_footer_buttons
+ .mx_AccessibleButton {
+ display: inline-block;
+}
+
+.mx_ManageRestrictedJoinRuleDialog
+ .mx_ManageRestrictedJoinRuleDialog_footer
+ .mx_ManageRestrictedJoinRuleDialog_footer_buttons
+ .mx_AccessibleButton
+ + .mx_AccessibleButton {
+ margin-left: 24px;
+}
+
.mx_MessageEditHistoryDialog .mx_Dialog_header > .mx_Dialog_title {
text-align: center;
}
+
.mx_MessageEditHistoryDialog {
display: -webkit-box;
display: -ms-flexbox;
@@ -8015,66 +10786,80 @@ input.mx_StatusMessageContextMenu_message {
flex-direction: column;
max-height: 60vh;
}
+
.mx_MessageEditHistoryDialog_scrollPanel {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
+
.mx_MessageEditHistoryDialog_error {
color: #ff4b55;
text-align: center;
}
+
.mx_MessageEditHistoryDialog_edits {
list-style-type: none;
font-size: 1.4rem;
padding: 0;
color: #2e2f32;
}
+
.mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_deletion,
.mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_insertion {
padding: 0 2px;
}
+
.mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_deletion {
color: #ff4c55;
background-color: rgba(255, 76, 85, 0.1);
text-decoration: line-through;
}
+
.mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_insertion {
color: #1aa97b;
background-color: rgba(26, 169, 123, 0.1);
text-decoration: underline;
}
+
.mx_MessageEditHistoryDialog_edits .mx_EventTile_content,
.mx_MessageEditHistoryDialog_edits .mx_EventTile_line {
margin-right: 0;
}
+
.mx_MessageEditHistoryDialog_edits .mx_MessageActionBar .mx_AccessibleButton {
font-size: 1rem;
padding: 0 8px;
}
+
.mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning {
margin-bottom: 24px;
}
+
.mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning > img {
vertical-align: middle;
margin-right: 8px;
}
+
.mx_ModalWidgetDialog .mx_ModalWidgetDialog_buttons {
float: right;
margin-top: 24px;
}
+
.mx_ModalWidgetDialog
.mx_ModalWidgetDialog_buttons
.mx_AccessibleButton
+ .mx_AccessibleButton {
margin-left: 8px;
}
+
.mx_ModalWidgetDialog iframe {
width: 100%;
height: 450px;
border: 0;
border-radius: 8px;
}
+
.mx_NewSessionReviewDialog_header {
display: -webkit-box;
display: -ms-flexbox;
@@ -8084,53 +10869,66 @@ input.mx_StatusMessageContextMenu_message {
align-items: center;
margin-top: 0;
}
+
.mx_NewSessionReviewDialog_headerIcon {
width: 24px;
height: 24px;
margin-right: 4px;
position: relative;
}
+
.mx_NewSessionReviewDialog_deviceName {
font-weight: 600;
}
+
.mx_NewSessionReviewDialog_deviceID {
font-size: 1.2rem;
color: #8d99a5;
}
+
.mx_RegistrationEmailPromptDialog {
width: 417px;
}
+
.mx_RegistrationEmailPromptDialog .mx_Dialog_content {
margin-bottom: 24px;
color: #8d99a5;
}
+
.mx_RegistrationEmailPromptDialog .mx_Dialog_primary {
width: 100%;
}
+
.mx_RoomSettingsDialog_settingsIcon:before {
-webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
mask-image: url(../../img/element-icons/settings.6b381af.svg);
}
+
.mx_RoomSettingsDialog_securityIcon:before {
-webkit-mask-image: url(../../img/element-icons/security.66f2fa6.svg);
mask-image: url(../../img/element-icons/security.66f2fa6.svg);
}
+
.mx_RoomSettingsDialog_rolesIcon:before {
-webkit-mask-image: url(../../img/element-icons/room/settings/roles.bad9a9e.svg);
mask-image: url(../../img/element-icons/room/settings/roles.bad9a9e.svg);
}
+
.mx_RoomSettingsDialog_notificationsIcon:before {
-webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
mask-image: url(../../img/element-icons/notifications.d298b39.svg);
}
+
.mx_RoomSettingsDialog_bridgesIcon:before {
-webkit-mask-image: url(../../img/feather-customised/bridge.b2ca042.svg);
mask-image: url(../../img/feather-customised/bridge.b2ca042.svg);
}
+
.mx_RoomSettingsDialog_warningIcon:before {
-webkit-mask-image: url(../../img/element-icons/room/settings/advanced.e079c15.svg);
mask-image: url(../../img/element-icons/room/settings/advanced.e079c15.svg);
}
+
.mx_RoomSettingsDialog .mx_Dialog_title {
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
@@ -8139,6 +10937,7 @@ input.mx_StatusMessageContextMenu_message {
margin: 0 auto;
padding-right: 80px;
}
+
.mx_RoomSettingsDialog
.mx_AvatarSetting_avatar
.mx_AvatarSetting_avatarPlaceholder:before {
@@ -8151,14 +10950,17 @@ input.mx_StatusMessageContextMenu_message {
-webkit-mask-position: center;
mask-position: center;
}
+
.mx_RoomSettingsDialog_BridgeList {
padding: 0;
}
+
.mx_RoomSettingsDialog_BridgeList .mx_AccessibleButton {
display: inline;
margin: 0;
padding: 0;
}
+
.mx_RoomSettingsDialog_BridgeList li {
list-style-type: none;
padding: 5px;
@@ -8166,50 +10968,61 @@ input.mx_StatusMessageContextMenu_message {
border: 1px solid transparent;
border-radius: 5px;
}
+
.mx_RoomSettingsDialog_BridgeList li .column-icon {
float: left;
padding-right: 10px;
}
+
.mx_RoomSettingsDialog_BridgeList li .column-icon * {
border-radius: 5px;
border: 1px solid #e3e8f0;
}
+
.mx_RoomSettingsDialog_BridgeList li .column-icon .noProtocolIcon {
width: 48px;
height: 48px;
background: #e3e8f0;
border-radius: 5px;
}
+
.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon {
float: left;
margin-right: 5px;
}
+
.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon img {
border-radius: 5px;
border-width: 1px;
border-color: transparent;
}
+
.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon span {
left: auto;
}
+
.mx_RoomSettingsDialog_BridgeList li .column-data {
display: inline-block;
width: 85%;
}
+
.mx_RoomSettingsDialog_BridgeList li .column-data > h3 {
margin-top: 0;
margin-bottom: 0;
font-size: 16pt;
color: #2e2f32;
}
+
.mx_RoomSettingsDialog_BridgeList li .column-data > * {
margin-top: 4px;
margin-bottom: 0;
}
+
.mx_RoomSettingsDialog_BridgeList li .column-data .workspace-channel-details {
color: #2e2f32;
font-weight: 600;
}
+
.mx_RoomSettingsDialog_BridgeList
li
.column-data
@@ -8217,6 +11030,7 @@ input.mx_StatusMessageContextMenu_message {
.channel {
margin-left: 5px;
}
+
.mx_RoomSettingsDialog_BridgeList li .column-data .metadata {
color: #61708b;
margin-bottom: 0;
@@ -8225,45 +11039,56 @@ input.mx_StatusMessageContextMenu_message {
white-space: normal;
padding: 0;
}
+
.mx_RoomSettingsDialog_BridgeList li .column-data .metadata > li {
padding: 0;
border: 0;
}
+
.mx_RoomUpgradeDialog {
padding-right: 70px;
}
+
.mx_RoomUpgradeWarningDialog {
max-width: 38vw;
width: 38vw;
}
+
.mx_RoomUpgradeWarningDialog .mx_SettingsFlag {
font-weight: 700;
}
+
.mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_ToggleSwitch {
display: inline-block;
vertical-align: middle;
margin-left: 8px;
float: right;
}
+
.mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_SettingsFlag_label {
display: inline-block;
vertical-align: middle;
}
+
.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content {
padding-right: 85px;
color: #2e2f32;
}
+
.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content hr {
border-color: #2e2f32;
opacity: 0.1;
border-bottom: none;
}
+
.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content ul {
padding: 16px;
}
+
.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content ul li:nth-child(n + 2) {
margin-top: 16px;
}
+
.mx_ServerOfflineDialog
.mx_ServerOfflineDialog_content
.mx_ServerOfflineDialog_content_context
@@ -8274,6 +11099,7 @@ input.mx_StatusMessageContextMenu_message {
line-height: 24px;
vertical-align: top;
}
+
.mx_ServerOfflineDialog
.mx_ServerOfflineDialog_content
.mx_ServerOfflineDialog_content_context
@@ -8281,6 +11107,7 @@ input.mx_StatusMessageContextMenu_message {
display: inline-block;
width: calc(100% - 155px);
}
+
.mx_ServerOfflineDialog
.mx_ServerOfflineDialog_content
.mx_ServerOfflineDialog_content_context
@@ -8290,6 +11117,7 @@ input.mx_StatusMessageContextMenu_message {
margin-left: 8px;
vertical-align: middle;
}
+
.mx_ServerOfflineDialog
.mx_ServerOfflineDialog_content
.mx_ServerOfflineDialog_content_context
@@ -8298,6 +11126,7 @@ input.mx_StatusMessageContextMenu_message {
position: relative;
margin-top: 8px;
}
+
.mx_ServerOfflineDialog
.mx_ServerOfflineDialog_content
.mx_ServerOfflineDialog_content_context
@@ -8306,6 +11135,7 @@ input.mx_StatusMessageContextMenu_message {
.mx_ServerOfflineDialog_content_context_txn_desc {
width: calc(100% - 100px);
}
+
.mx_ServerOfflineDialog
.mx_ServerOfflineDialog_content
.mx_ServerOfflineDialog_content_context
@@ -8315,35 +11145,43 @@ input.mx_StatusMessageContextMenu_message {
float: right;
padding: 0;
}
+
.mx_ServerPickerDialog {
width: 468px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
+
.mx_ServerPickerDialog .mx_Dialog_content {
margin-bottom: 0;
}
+
.mx_ServerPickerDialog .mx_Dialog_content > p {
color: #737d8c;
font-size: 1.4rem;
margin: 16px 0;
}
+
.mx_ServerPickerDialog .mx_Dialog_content > p:first-of-type {
margin-bottom: 40px;
}
+
.mx_ServerPickerDialog .mx_Dialog_content > p:last-of-type {
margin: 0 24px 24px;
}
+
.mx_ServerPickerDialog .mx_Dialog_content > h4 {
font-size: 1.5rem;
font-weight: 600;
color: #737d8c;
margin-left: 8px;
}
+
.mx_ServerPickerDialog .mx_Dialog_content > a {
color: #0dbd8b;
margin-left: 8px;
}
+
.mx_ServerPickerDialog
.mx_ServerPickerDialog_otherHomeserverRadio
input[type="radio"]
@@ -8351,23 +11189,28 @@ input.mx_StatusMessageContextMenu_message {
margin-top: auto;
margin-bottom: auto;
}
+
.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver {
border-top: none;
border-left: none;
border-right: none;
border-radius: unset;
}
+
.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver > input {
padding-left: 0;
}
+
.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver > label {
margin-left: 0;
}
+
.mx_ServerPickerDialog .mx_AccessibleButton_kind_primary {
width: calc(100% - 64px);
margin: 0 8px;
padding: 15px 18px;
}
+
.mx_SetEmailDialog_email_input {
border-radius: 3px;
border: 1px solid #e7e7e7;
@@ -8379,23 +11222,30 @@ input.mx_StatusMessageContextMenu_message {
max-width: 280px;
margin-bottom: 10px;
}
+
.mx_SetEmailDialog_email_input:focus {
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
border: 1px solid #0dbd8b;
}
+
.mx_RoomSettingsDialog,
+.mx_SpaceSettingsDialog,
.mx_UserSettingsDialog {
width: 90vw;
max-width: 1000px;
height: 80vh;
}
+
.mx_RoomSettingsDialog .mx_TabbedView,
+.mx_SpaceSettingsDialog .mx_TabbedView,
.mx_UserSettingsDialog .mx_TabbedView {
top: 65px;
}
+
.mx_RoomSettingsDialog .mx_TabbedView .mx_SettingsTab,
+.mx_SpaceSettingsDialog .mx_TabbedView .mx_SettingsTab,
.mx_UserSettingsDialog .mx_TabbedView .mx_SettingsTab {
-webkit-box-sizing: border-box;
box-sizing: border-box;
@@ -8403,18 +11253,23 @@ input.mx_StatusMessageContextMenu_message {
padding-right: 100px;
padding-bottom: 100px;
}
+
.mx_RoomSettingsDialog .mx_Dialog_title,
+.mx_SpaceSettingsDialog .mx_Dialog_title,
.mx_UserSettingsDialog .mx_Dialog_title {
margin-bottom: 24px;
}
+
.mx_ShareDialog hr {
margin-top: 25px;
margin-bottom: 25px;
border-color: #747474;
}
+
.mx_ShareDialog_content {
margin: 10px 0;
}
+
.mx_ShareDialog_matrixto {
display: -webkit-box;
display: -ms-flexbox;
@@ -8428,15 +11283,18 @@ input.mx_StatusMessageContextMenu_message {
margin-top: 30px;
padding: 10px;
}
+
.mx_ShareDialog_matrixto a {
text-decoration: none;
}
+
.mx_ShareDialog_matrixto_link {
-ms-flex-negative: 1;
flex-shrink: 1;
overflow: hidden;
text-overflow: ellipsis;
}
+
.mx_ShareDialog_matrixto_copy {
-ms-flex-negative: 0;
flex-shrink: 0;
@@ -8444,7 +11302,9 @@ input.mx_StatusMessageContextMenu_message {
margin-left: 20px;
display: inherit;
}
-.mx_ShareDialog_matrixto_copy > div {
+
+.mx_ShareDialog_matrixto_copy:after {
+ content: "";
-webkit-mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
background-color: #2e2f32;
@@ -8453,6 +11313,7 @@ input.mx_StatusMessageContextMenu_message {
height: 20px;
background-repeat: no-repeat;
}
+
.mx_ShareDialog_split {
display: -webkit-box;
display: -ms-flexbox;
@@ -8460,34 +11321,41 @@ input.mx_StatusMessageContextMenu_message {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
+
.mx_ShareDialog_qrcode_container {
float: left;
height: 256px;
width: 256px;
margin-right: 64px;
}
+
.mx_ShareDialog_qrcode_container + .mx_ShareDialog_social_container {
width: 299px;
}
+
.mx_ShareDialog_social_container {
display: inline-block;
}
+
.mx_ShareDialog_social_icon {
display: inline-grid;
margin-right: 10px;
margin-bottom: 10px;
}
+
.mx_SlashCommandHelpDialog .mx_SlashCommandHelpDialog_headerRow h2 {
margin-bottom: 2px;
}
+
.mx_SlashCommandHelpDialog .mx_Dialog_content {
margin-top: 12px;
margin-bottom: 34px;
}
+
.mx_SpaceSettingsDialog {
- width: 480px;
color: #2e2f32;
}
+
.mx_SpaceSettingsDialog .mx_SpaceSettings_errorText {
font-weight: 600;
font-size: 1.2rem;
@@ -8495,31 +11363,91 @@ input.mx_StatusMessageContextMenu_message {
color: #ff4b55;
margin-bottom: 28px;
}
+
.mx_SpaceSettingsDialog .mx_ToggleSwitch {
display: inline-block;
vertical-align: middle;
margin-left: 16px;
}
-.mx_SpaceSettingsDialog .mx_AccessibleButton_kind_danger {
- margin-top: 28px;
+
+.mx_SpaceSettingsDialog
+ .mx_SettingsTab_section
+ .mx_SettingsTab_section_caption {
+ margin-top: 12px;
+ margin-bottom: 20px;
}
+
+.mx_SpaceSettingsDialog .mx_SettingsTab_section + .mx_SettingsTab_subheading {
+ border-top: 1px solid #e3e8f0;
+ margin-top: 0;
+ padding-top: 24px;
+}
+
+.mx_SpaceSettingsDialog .mx_SettingsTab_section .mx_RadioButton {
+ margin-top: 8px;
+ margin-bottom: 4px;
+}
+
+.mx_SpaceSettingsDialog
+ .mx_SettingsTab_section
+ .mx_RadioButton
+ .mx_RadioButton_content {
+ font-weight: 600;
+ line-height: 1.8rem;
+ color: #2e2f32;
+}
+
+.mx_SpaceSettingsDialog .mx_SettingsTab_section .mx_RadioButton + span {
+ font-size: 1.5rem;
+ line-height: 1.8rem;
+ color: #737d8c;
+ margin-left: 26px;
+}
+
+.mx_SpaceSettingsDialog .mx_SettingsTab_section .mx_SettingsTab_showAdvanced {
+ margin: 16px 0;
+ padding: 0;
+}
+
+.mx_SpaceSettingsDialog .mx_SettingsTab_section .mx_SettingsFlag {
+ margin-top: 24px;
+}
+
.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 64px;
}
+
.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons .mx_AccessibleButton {
display: inline-block;
}
+
.mx_SpaceSettingsDialog
.mx_SpaceSettingsDialog_buttons
.mx_AccessibleButton_kind_link {
margin-left: auto;
}
+
.mx_SpaceSettingsDialog .mx_AccessibleButton_hasKind {
padding: 8px 22px;
}
+
+.mx_SpaceSettingsDialog
+ .mx_TabbedView_tabLabel
+ .mx_SpaceSettingsDialog_generalIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
+ mask-image: url(../../img/element-icons/settings.6b381af.svg);
+}
+
+.mx_SpaceSettingsDialog
+ .mx_TabbedView_tabLabel
+ .mx_SpaceSettingsDialog_visibilityIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/eye.23b2229.svg);
+ mask-image: url(../../img/element-icons/eye.23b2229.svg);
+}
+
.mx_TabbedIntegrationManagerDialog .mx_Dialog {
width: 60%;
height: 70%;
@@ -8529,6 +11457,7 @@ input.mx_StatusMessageContextMenu_message {
max-height: none;
position: relative;
}
+
.mx_TabbedIntegrationManagerDialog_container {
position: absolute;
top: 0;
@@ -8536,12 +11465,14 @@ input.mx_StatusMessageContextMenu_message {
left: 0;
right: 0;
}
+
.mx_TabbedIntegrationManagerDialog_container
.mx_TabbedIntegrationManagerDialog_currentManager {
width: 100%;
height: 100%;
border-top: 1px solid #0dbd8b;
}
+
.mx_TabbedIntegrationManagerDialog_container
.mx_TabbedIntegrationManagerDialog_currentManager
iframe {
@@ -8550,6 +11481,7 @@ input.mx_StatusMessageContextMenu_message {
width: 100%;
height: 100%;
}
+
.mx_TabbedIntegrationManagerDialog_tab {
display: inline-block;
border: 1px solid #0dbd8b;
@@ -8559,28 +11491,34 @@ input.mx_StatusMessageContextMenu_message {
padding: 10px 8px;
margin-right: 5px;
}
+
.mx_TabbedIntegrationManagerDialog_currentTab {
background-color: #0dbd8b;
color: #fff;
}
+
.mx_TermsDialog_forIntegrationManager .mx_Dialog {
width: 60%;
height: 70%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
+
.mx_TermsDialog_termsTableHeader {
font-weight: 700;
text-align: left;
}
+
.mx_TermsDialog_termsTable {
font-size: 1.2rem;
width: 100%;
}
+
.mx_TermsDialog_service,
.mx_TermsDialog_summary {
padding-right: 10px;
}
+
.mx_TermsDialog_link {
display: inline-block;
-webkit-mask-image: url(../../img/external-link.a8d3e9b.svg);
@@ -8589,6 +11527,7 @@ input.mx_StatusMessageContextMenu_message {
width: 10px;
height: 10px;
}
+
.mx_UntrustedDeviceDialog .mx_Dialog_title {
display: -webkit-box;
display: -ms-flexbox;
@@ -8597,76 +11536,95 @@ input.mx_StatusMessageContextMenu_message {
-ms-flex-align: center;
align-items: center;
}
+
.mx_UntrustedDeviceDialog .mx_Dialog_title .mx_E2EIcon {
margin-left: 0;
}
+
.mx_UploadConfirmDialog_fileIcon {
margin-right: 5px;
}
+
.mx_UploadConfirmDialog_previewOuter {
text-align: center;
}
+
.mx_UploadConfirmDialog_previewInner {
display: inline-block;
text-align: left;
}
+
.mx_UploadConfirmDialog_imagePreview {
max-height: 300px;
max-width: 100%;
border-radius: 4px;
border: 1px solid #c1c1c1;
}
+
.mx_UserSettingsDialog_settingsIcon:before {
-webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
mask-image: url(../../img/element-icons/settings.6b381af.svg);
}
+
.mx_UserSettingsDialog_appearanceIcon:before {
-webkit-mask-image: url(../../img/element-icons/settings/appearance.cdebd40.svg);
mask-image: url(../../img/element-icons/settings/appearance.cdebd40.svg);
}
+
.mx_UserSettingsDialog_voiceIcon:before {
-webkit-mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
}
+
.mx_UserSettingsDialog_bellIcon:before {
-webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
mask-image: url(../../img/element-icons/notifications.d298b39.svg);
}
+
.mx_UserSettingsDialog_preferencesIcon:before {
-webkit-mask-image: url(../../img/element-icons/settings/preference.82bfabd.svg);
mask-image: url(../../img/element-icons/settings/preference.82bfabd.svg);
}
+
.mx_UserSettingsDialog_securityIcon:before {
-webkit-mask-image: url(../../img/element-icons/security.66f2fa6.svg);
mask-image: url(../../img/element-icons/security.66f2fa6.svg);
}
+
.mx_UserSettingsDialog_helpIcon:before {
-webkit-mask-image: url(../../img/element-icons/settings/help.68b703f.svg);
mask-image: url(../../img/element-icons/settings/help.68b703f.svg);
}
+
.mx_UserSettingsDialog_labsIcon:before {
-webkit-mask-image: url(../../img/element-icons/settings/lab-flags.6fbe5e2.svg);
mask-image: url(../../img/element-icons/settings/lab-flags.6fbe5e2.svg);
}
+
.mx_UserSettingsDialog_mjolnirIcon:before {
-webkit-mask-image: url(../../img/element-icons/room/composer/emoji.52d7369.svg);
mask-image: url(../../img/element-icons/room/composer/emoji.52d7369.svg);
}
+
.mx_UserSettingsDialog_flairIcon:before {
-webkit-mask-image: url(../../img/element-icons/settings/flair.4227a88.svg);
mask-image: url(../../img/element-icons/settings/flair.4227a88.svg);
}
+
.mx_WidgetCapabilitiesPromptDialog .text-muted {
font-size: 1.2rem;
}
+
.mx_WidgetCapabilitiesPromptDialog .mx_Dialog_content {
margin-bottom: 16px;
}
+
.mx_WidgetCapabilitiesPromptDialog .mx_WidgetCapabilitiesPromptDialog_cap {
margin-top: 20px;
font-size: 1.5rem;
line-height: 1.5rem;
}
+
.mx_WidgetCapabilitiesPromptDialog
.mx_WidgetCapabilitiesPromptDialog_cap
.mx_WidgetCapabilitiesPromptDialog_byline {
@@ -8675,14 +11633,17 @@ input.mx_StatusMessageContextMenu_message {
font-size: 1.2rem;
line-height: 1.2rem;
}
+
.mx_WidgetCapabilitiesPromptDialog .mx_Dialog_buttons {
margin-top: 40px;
}
+
.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag {
line-height: calc(1.4rem + 14px);
color: #61708b;
font-size: 1.2rem;
}
+
.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch {
display: inline-block;
vertical-align: middle;
@@ -8690,12 +11651,14 @@ input.mx_StatusMessageContextMenu_message {
width: 3.2rem;
height: 1.5rem;
}
+
.mx_WidgetCapabilitiesPromptDialog
.mx_SettingsFlag
.mx_ToggleSwitch.mx_ToggleSwitch_on
> .mx_ToggleSwitch_ball {
left: calc(100% - 1.5rem);
}
+
.mx_WidgetCapabilitiesPromptDialog
.mx_SettingsFlag
.mx_ToggleSwitch
@@ -8704,24 +11667,29 @@ input.mx_StatusMessageContextMenu_message {
height: 1.5rem;
border-radius: 1.5rem;
}
+
.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_SettingsFlag_label {
display: inline-block;
vertical-align: middle;
}
+
.mx_WidgetOpenIDPermissionsDialog .mx_SettingsFlag .mx_ToggleSwitch {
display: inline-block;
vertical-align: middle;
margin-right: 8px;
}
+
.mx_WidgetOpenIDPermissionsDialog .mx_SettingsFlag .mx_SettingsFlag_label {
display: inline-block;
vertical-align: middle;
}
+
.mx_AccessSecretStorageDialog_reset {
position: relative;
padding-left: 24px;
margin-top: 7px;
}
+
.mx_AccessSecretStorageDialog_reset:before {
content: "";
display: inline-block;
@@ -8730,11 +11698,14 @@ input.mx_StatusMessageContextMenu_message {
width: 16px;
left: 0;
top: 2px;
- background-image: url(../../img/element-icons/warning-badge.de1033e.svg);
+ background-image: url(../../img/element-icons/warning-badge.413c9a9.svg);
+ background-size: contain;
}
+
.mx_AccessSecretStorageDialog_reset .mx_AccessSecretStorageDialog_reset_link {
color: #ff4b55;
}
+
.mx_AccessSecretStorageDialog_titleWithIcon:before {
content: "";
display: inline-block;
@@ -8745,28 +11716,34 @@ input.mx_StatusMessageContextMenu_message {
top: 5px;
background-color: #2e2f32;
}
+
.mx_AccessSecretStorageDialog_resetBadge:before {
- background-image: url(../../img/element-icons/warning-badge.de1033e.svg);
+ background-image: url(../../img/element-icons/warning-badge.413c9a9.svg);
background-size: 24px;
background-color: transparent;
}
+
.mx_AccessSecretStorageDialog_secureBackupTitle:before {
-webkit-mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
}
+
.mx_AccessSecretStorageDialog_securePhraseTitle:before {
-webkit-mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
}
+
.mx_AccessSecretStorageDialog_keyStatus {
height: 30px;
}
+
.mx_AccessSecretStorageDialog_passPhraseInput {
width: 300px;
border: 1px solid #0dbd8b;
border-radius: 5px;
padding: 10px;
}
+
.mx_AccessSecretStorageDialog_recoveryKeyEntry {
display: -webkit-box;
display: -ms-flexbox;
@@ -8775,14 +11752,17 @@ input.mx_StatusMessageContextMenu_message {
-ms-flex-align: center;
align-items: center;
}
+
.mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
+
.mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText {
margin: 16px;
}
+
.mx_AccessSecretStorageDialog_recoveryKeyFeedback:before {
content: "";
display: inline-block;
@@ -8797,43 +11777,54 @@ input.mx_StatusMessageContextMenu_message {
mask-size: 20px;
margin-right: 5px;
}
+
.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid {
color: #0dbd8b;
}
+
.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid:before {
-webkit-mask-image: url(../../img/feather-customised/check.5745b4e.svg);
mask-image: url(../../img/feather-customised/check.5745b4e.svg);
background-color: #0dbd8b;
}
+
.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid {
color: #ff4b55;
}
+
.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid:before {
-webkit-mask-image: url(../../img/feather-customised/x.9662221.svg);
mask-image: url(../../img/feather-customised/x.9662221.svg);
background-color: #ff4b55;
}
+
.mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput {
display: none;
}
+
.mx_CreateCrossSigningDialog {
width: 560px;
}
+
.mx_CreateCrossSigningDialog details .mx_AccessibleButton {
margin: 1em 0;
}
+
.mx_CreateCrossSigningDialog .mx_Dialog_title,
.mx_CreateKeyBackupDialog .mx_Dialog_title {
margin-bottom: 1em;
}
+
.mx_CreateKeyBackupDialog_primaryContainer {
padding: 20px;
}
+
.mx_CreateKeyBackupDialog_primaryContainer:after {
content: "";
clear: both;
display: block;
}
+
.mx_CreateKeyBackupDialog_passPhraseContainer {
display: -webkit-box;
display: -ms-flexbox;
@@ -8842,6 +11833,7 @@ input.mx_StatusMessageContextMenu_message {
-ms-flex-align: start;
align-items: flex-start;
}
+
.mx_CreateKeyBackupDialog_passPhraseInput {
-webkit-box-flex: 0;
-ms-flex: none;
@@ -8852,17 +11844,21 @@ input.mx_StatusMessageContextMenu_message {
padding: 10px;
margin-bottom: 1em;
}
+
.mx_CreateKeyBackupDialog_passPhraseMatch {
margin-left: 20px;
}
+
.mx_CreateKeyBackupDialog_recoveryKeyHeader {
margin-bottom: 1em;
}
+
.mx_CreateKeyBackupDialog_recoveryKeyContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_CreateKeyBackupDialog_recoveryKey {
width: 262px;
padding: 20px;
@@ -8870,6 +11866,7 @@ input.mx_StatusMessageContextMenu_message {
background-color: #f7f7f7;
margin-right: 12px;
}
+
.mx_CreateKeyBackupDialog_recoveryKeyButtons {
-webkit-box-flex: 1;
-ms-flex: 1;
@@ -8881,23 +11878,28 @@ input.mx_StatusMessageContextMenu_message {
-ms-flex-align: center;
align-items: center;
}
+
.mx_CreateKeyBackupDialog_recoveryKeyButtons button {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
white-space: nowrap;
}
+
.mx_CreateKeyBackupDialog details .mx_AccessibleButton {
margin: 1em 0;
}
+
.mx_CreateSecretStorageDialog {
width: 560px;
}
+
.mx_CreateSecretStorageDialog .mx_SettingsFlag {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_CreateSecretStorageDialog .mx_SettingsFlag_label {
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
@@ -8905,18 +11907,22 @@ input.mx_StatusMessageContextMenu_message {
min-width: 0;
font-weight: 600;
}
+
.mx_CreateSecretStorageDialog .mx_ToggleSwitch {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
margin-left: 30px;
}
+
.mx_CreateSecretStorageDialog details .mx_AccessibleButton {
margin: 1em 0;
}
+
.mx_CreateSecretStorageDialog .mx_Dialog_title {
margin-bottom: 1em;
}
+
.mx_CreateSecretStorageDialog_titleWithIcon:before {
content: "";
display: inline-block;
@@ -8927,36 +11933,44 @@ input.mx_StatusMessageContextMenu_message {
top: 5px;
background-color: #2e2f32;
}
+
.mx_CreateSecretStorageDialog_secureBackupTitle:before {
-webkit-mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
}
+
.mx_CreateSecretStorageDialog_securePhraseTitle:before {
-webkit-mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
}
+
.mx_CreateSecretStorageDialog_centeredBody,
.mx_CreateSecretStorageDialog_centeredTitle {
text-align: center;
}
+
.mx_CreateSecretStorageDialog_primaryContainer {
padding-top: 20px;
}
+
.mx_CreateSecretStorageDialog_primaryContainer:after {
content: "";
clear: both;
display: block;
}
+
.mx_CreateSecretStorageDialog_primaryContainer .mx_RadioButton {
margin-bottom: 16px;
padding: 11px;
}
+
.mx_CreateSecretStorageDialog_optionTitle {
color: #45474a;
font-weight: 600;
font-size: 1.8rem;
padding-bottom: 10px;
}
+
.mx_CreateSecretStorageDialog_optionIcon {
display: inline-block;
width: 24px;
@@ -8966,14 +11980,17 @@ input.mx_StatusMessageContextMenu_message {
top: 5px;
background-color: #2e2f32;
}
+
.mx_CreateSecretStorageDialog_optionIcon_securePhrase {
-webkit-mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
}
+
.mx_CreateSecretStorageDialog_optionIcon_secureBackup {
-webkit-mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
}
+
.mx_CreateSecretStorageDialog_passPhraseContainer {
display: -webkit-box;
display: -ms-flexbox;
@@ -8982,18 +11999,22 @@ input.mx_StatusMessageContextMenu_message {
-ms-flex-align: start;
align-items: flex-start;
}
+
.mx_Field.mx_CreateSecretStorageDialog_passPhraseField {
margin-top: 0;
}
+
.mx_CreateSecretStorageDialog_passPhraseMatch {
width: 200px;
margin-left: 20px;
}
+
.mx_CreateSecretStorageDialog_recoveryKeyContainer {
width: 380px;
margin-left: auto;
margin-right: auto;
}
+
.mx_CreateSecretStorageDialog_recoveryKey {
font-weight: 700;
text-align: center;
@@ -9004,6 +12025,7 @@ input.mx_StatusMessageContextMenu_message {
word-spacing: 1em;
margin-bottom: 20px;
}
+
.mx_CreateSecretStorageDialog_recoveryKeyButtons {
display: -webkit-box;
display: -ms-flexbox;
@@ -9015,28 +12037,34 @@ input.mx_StatusMessageContextMenu_message {
-ms-flex-align: center;
align-items: center;
}
+
.mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton {
width: 160px;
padding-left: 0;
padding-right: 0;
white-space: nowrap;
}
+
.mx_CreateSecretStorageDialog_continueSpinner {
margin-top: 33px;
text-align: right;
}
+
.mx_CreateSecretStorageDialog_continueSpinner img {
width: 20px;
height: 20px;
}
+
.mx_KeyBackupFailedDialog .mx_Dialog_title {
margin-bottom: 32px;
}
+
.mx_KeyBackupFailedDialog_title {
position: relative;
padding-left: 45px;
padding-bottom: 10px;
}
+
.mx_KeyBackupFailedDialog_title:before {
-webkit-mask: url(../../img/e2e/lock-warning-filled.993fb6c.svg);
mask: url(../../img/e2e/lock-warning-filled.993fb6c.svg);
@@ -9050,15 +12078,19 @@ input.mx_StatusMessageContextMenu_message {
bottom: 0;
left: 0;
}
+
.mx_KeyBackupFailedDialog .mx_Dialog_buttons {
margin-top: 36px;
}
+
.mx_RestoreKeyBackupDialog_keyStatus {
height: 30px;
}
+
.mx_RestoreKeyBackupDialog_primaryContainer {
padding: 20px;
}
+
.mx_RestoreKeyBackupDialog_passPhraseInput,
.mx_RestoreKeyBackupDialog_recoveryKeyInput {
width: 300px;
@@ -9066,6 +12098,7 @@ input.mx_StatusMessageContextMenu_message {
border-radius: 5px;
padding: 10px;
}
+
.mx_RestoreKeyBackupDialog_content > div {
display: -webkit-box;
display: -ms-flexbox;
@@ -9079,6 +12112,7 @@ input.mx_StatusMessageContextMenu_message {
justify-content: space-between;
min-height: 110px;
}
+
.mx_NetworkDropdown {
height: 32px;
position: relative;
@@ -9087,12 +12121,14 @@ input.mx_StatusMessageContextMenu_message {
margin-right: 9px;
margin-top: 12px;
}
+
.mx_NetworkDropdown,
.mx_NetworkDropdown .mx_AccessibleButton {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
}
+
.mx_NetworkDropdown_menu {
min-width: 204px;
margin: 0;
@@ -9104,13 +12140,16 @@ input.mx_StatusMessageContextMenu_message {
max-height: calc(100vh - 20px);
overflow-y: auto;
}
+
.mx_NetworkDropdown_menu_network {
font-weight: 700;
}
+
.mx_NetworkDropdown_server {
padding: 12px 0;
border-bottom: 1px solid #9fa9ba;
}
+
.mx_NetworkDropdown_server .mx_NetworkDropdown_server_title {
padding: 0 10px;
font-size: 1.5rem;
@@ -9119,6 +12158,7 @@ input.mx_StatusMessageContextMenu_message {
margin-bottom: 4px;
position: relative;
}
+
.mx_NetworkDropdown_server
.mx_NetworkDropdown_server_title
.mx_AccessibleButton {
@@ -9129,6 +12169,7 @@ input.mx_StatusMessageContextMenu_message {
width: 16px;
margin-top: 2px;
}
+
.mx_NetworkDropdown_server
.mx_NetworkDropdown_server_title
.mx_AccessibleButton:after {
@@ -9146,6 +12187,7 @@ input.mx_StatusMessageContextMenu_message {
mask-image: url(../../img/feather-customised/x.9662221.svg);
background-color: #ff4b55;
}
+
.mx_NetworkDropdown_server .mx_NetworkDropdown_server_subtitle {
padding: 0 10px;
font-size: 1rem;
@@ -9154,6 +12196,7 @@ input.mx_StatusMessageContextMenu_message {
margin-bottom: 4px;
color: #61708b;
}
+
.mx_NetworkDropdown_server .mx_NetworkDropdown_server_network {
font-size: 1.2rem;
line-height: 1.6rem;
@@ -9164,6 +12207,7 @@ input.mx_StatusMessageContextMenu_message {
white-space: nowrap;
text-overflow: ellipsis;
}
+
.mx_NetworkDropdown_server
.mx_NetworkDropdown_server_network[aria-checked="true"]:after {
content: "";
@@ -9181,15 +12225,18 @@ input.mx_StatusMessageContextMenu_message {
mask-image: url(../../img/feather-customised/check.5745b4e.svg);
background-color: #0dbd8b;
}
+
.mx_NetworkDropdown_server_add:hover,
.mx_NetworkDropdown_server_network:hover {
background-color: #f3f8fd;
}
+
.mx_NetworkDropdown_server_add {
padding: 16px 10px 16px 32px;
position: relative;
border-radius: 0 0 4px 4px;
}
+
.mx_NetworkDropdown_server_add:before {
content: "";
position: absolute;
@@ -9206,9 +12253,11 @@ input.mx_StatusMessageContextMenu_message {
mask-image: url(../../img/feather-customised/plus.38ae979.svg);
background-color: #61708b;
}
+
.mx_NetworkDropdown_handle {
position: relative;
}
+
.mx_NetworkDropdown_handle:after {
content: "";
position: absolute;
@@ -9226,19 +12275,24 @@ input.mx_StatusMessageContextMenu_message {
mask-image: url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);
background-color: #2e2f32;
}
+
.mx_NetworkDropdown_handle .mx_NetworkDropdown_handle_server {
color: #61708b;
font-size: 1.2rem;
}
+
.mx_NetworkDropdown_dialog .mx_Dialog {
width: 45vw;
}
+
.mx_AccessibleButton {
cursor: pointer;
}
+
.mx_AccessibleButton_disabled {
cursor: default;
}
+
.mx_AccessibleButton_hasKind {
padding: 7px 18px;
text-align: center;
@@ -9254,74 +12308,91 @@ input.mx_StatusMessageContextMenu_message {
justify-content: center;
font-size: 1.4rem;
}
+
.mx_AccessibleButton_kind_primary {
color: #fff;
background-color: #0dbd8b;
font-weight: 600;
}
+
.mx_AccessibleButton_kind_primary_outline {
color: #0dbd8b;
background-color: #fff;
border: 1px solid #0dbd8b;
font-weight: 600;
}
+
.mx_AccessibleButton_kind_secondary {
color: #0dbd8b;
font-weight: 600;
}
+
.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled,
.mx_AccessibleButton_kind_primary_outline.mx_AccessibleButton_disabled {
opacity: 0.4;
}
+
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm {
padding: 5px 12px;
color: #fff;
background-color: #0dbd8b;
}
+
.mx_AccessibleButton_kind_primary_sm.mx_AccessibleButton_disabled {
opacity: 0.4;
}
+
.mx_AccessibleButton_kind_danger {
color: #fff;
background-color: #ff4b55;
}
+
.mx_AccessibleButton_kind_danger_outline {
color: #ff4b55;
- background-color: #fff;
+ background-color: transparent;
border: 1px solid #ff4b55;
}
+
.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled {
color: #fff;
background-color: #f5b6bb;
}
+
.mx_AccessibleButton_kind_danger_outline.mx_AccessibleButton_disabled {
color: #f5b6bb;
border-color: #f5b6bb;
}
+
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm {
padding: 5px 12px;
color: #fff;
background-color: #ff4b55;
}
+
.mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled {
color: #fff;
background-color: #f5b6bb;
}
+
.mx_AccessibleButton_kind_link {
color: #0dbd8b;
background-color: transparent;
}
+
.mx_AccessibleButton_kind_link.mx_AccessibleButton_disabled {
opacity: 0.4;
}
+
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link_sm {
padding: 5px 12px;
color: #0dbd8b;
background-color: transparent;
}
+
.mx_AccessibleButton_kind_link_sm.mx_AccessibleButton_disabled {
opacity: 0.4;
}
+
.mx_AddressSelector {
position: absolute;
background-color: #fff;
@@ -9333,21 +12404,26 @@ input.mx_StatusMessageContextMenu_message {
cursor: pointer;
z-index: 1;
}
+
.mx_AddressSelector.mx_AddressSelector_empty {
display: none;
}
+
.mx_AddressSelector_addressListElement .mx_AddressTile {
background-color: #fff;
border: 1px solid #fff;
}
+
.mx_AddressSelector_addressListElement.mx_AddressSelector_selected {
background-color: #f2f5f8;
}
+
.mx_AddressSelector_addressListElement.mx_AddressSelector_selected
.mx_AddressTile {
background-color: #f2f5f8;
border: 1px solid #f2f5f8;
}
+
.mx_AddressTile {
display: inline-block;
border-radius: 3px;
@@ -9359,14 +12435,17 @@ input.mx_StatusMessageContextMenu_message {
font-weight: 400;
margin-right: 4px;
}
+
.mx_AddressTile.mx_AddressTile_error {
background-color: rgba(255, 0, 100, 0.1);
color: #ff4b55;
border-color: #ff4b55;
}
+
.mx_AddressTile_network {
padding-right: 4px;
}
+
.mx_AddressTile_avatar,
.mx_AddressTile_network {
display: inline-block;
@@ -9374,15 +12453,18 @@ input.mx_StatusMessageContextMenu_message {
padding-left: 2px;
vertical-align: middle;
}
+
.mx_AddressTile_avatar {
padding-right: 7px;
}
+
.mx_AddressTile_mx {
display: inline-block;
margin: 0;
border: 0;
padding: 0;
}
+
.mx_AddressTile_name {
display: inline-block;
padding-right: 4px;
@@ -9391,6 +12473,7 @@ input.mx_StatusMessageContextMenu_message {
height: 26px;
vertical-align: middle;
}
+
.mx_AddressTile_name.mx_AddressTile_justified {
width: 180px;
overflow: hidden;
@@ -9398,10 +12481,12 @@ input.mx_StatusMessageContextMenu_message {
text-overflow: ellipsis;
vertical-align: middle;
}
+
.mx_AddressTile_id {
display: inline-block;
padding-right: 11px;
}
+
.mx_AddressTile_id.mx_AddressTile_justified {
width: 200px;
overflow: hidden;
@@ -9409,11 +12494,13 @@ input.mx_StatusMessageContextMenu_message {
text-overflow: ellipsis;
vertical-align: middle;
}
+
.mx_AddressTile_unknownMx {
display: inline-block;
font-weight: 600;
padding-right: 11px;
}
+
.mx_AddressTile_unknownMxl.mx_AddressTile_justified {
width: 380px;
overflow: hidden;
@@ -9421,11 +12508,13 @@ input.mx_StatusMessageContextMenu_message {
text-overflow: ellipsis;
vertical-align: middle;
}
+
.mx_AddressTile_email {
display: inline-block;
font-weight: 600;
padding-right: 11px;
}
+
.mx_AddressTile_email.mx_AddressTile_justified {
width: 200px;
overflow: hidden;
@@ -9433,10 +12522,12 @@ input.mx_StatusMessageContextMenu_message {
text-overflow: ellipsis;
vertical-align: middle;
}
+
.mx_AddressTile_unknown {
display: inline-block;
padding-right: 11px;
}
+
.mx_AddressTile_unknown.mx_AddressTile_justified {
width: 380px;
overflow: hidden;
@@ -9444,34 +12535,42 @@ input.mx_StatusMessageContextMenu_message {
text-overflow: ellipsis;
vertical-align: middle;
}
+
.mx_AddressTile_dismiss {
display: inline-block;
padding-right: 11px;
padding-left: 1px;
cursor: pointer;
}
+
.mx_AddressTile_dismiss object {
pointer-events: none;
}
+
.mx_DesktopBuildsNotice {
text-align: center;
padding: 0 16px;
}
+
.mx_DesktopBuildsNotice > * {
vertical-align: middle;
}
+
.mx_DesktopBuildsNotice > img {
margin-right: 8px;
}
+
.mx_desktopCapturerSourcePicker {
overflow: hidden;
}
+
.mx_desktopCapturerSourcePicker_tabLabels {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0 0 8px;
}
+
.mx_desktopCapturerSourcePicker_tabLabel,
.mx_desktopCapturerSourcePicker_tabLabel_selected {
width: 100%;
@@ -9480,10 +12579,12 @@ input.mx_StatusMessageContextMenu_message {
padding: 8px 0;
font-size: 1.3rem;
}
+
.mx_desktopCapturerSourcePicker_tabLabel_selected {
background-color: #0dbd8b;
color: #fff;
}
+
.mx_desktopCapturerSourcePicker_panel {
display: -webkit-box;
display: -ms-flexbox;
@@ -9499,6 +12600,7 @@ input.mx_StatusMessageContextMenu_message {
height: 500px;
overflow: overlay;
}
+
.mx_desktopCapturerSourcePicker_stream_button {
display: -webkit-box;
display: -ms-flexbox;
@@ -9510,14 +12612,17 @@ input.mx_StatusMessageContextMenu_message {
margin: 8px;
border-radius: 4px;
}
+
.mx_desktopCapturerSourcePicker_stream_button:focus,
.mx_desktopCapturerSourcePicker_stream_button:hover {
background: #fff;
}
+
.mx_desktopCapturerSourcePicker_stream_thumbnail {
margin: 4px;
width: 312px;
}
+
.mx_desktopCapturerSourcePicker_stream_name {
margin: 0 4px;
white-space: nowrap;
@@ -9525,6 +12630,33 @@ input.mx_StatusMessageContextMenu_message {
overflow: hidden;
width: 312px;
}
+
+.mx_DialPadBackspaceButton {
+ position: relative;
+ height: 28px;
+ width: 28px;
+}
+
+.mx_DialPadBackspaceButton:before {
+ content: "";
+ background-color: #8d97a5;
+ width: inherit;
+ height: inherit;
+ top: 0;
+ left: 0;
+ position: absolute;
+ display: inline-block;
+ vertical-align: middle;
+ -webkit-mask-image: url(../../img/element-icons/call/delete.833d785.svg);
+ mask-image: url(../../img/element-icons/call/delete.833d785.svg);
+ -webkit-mask-position: 8px;
+ mask-position: 8px;
+ -webkit-mask-size: 20px;
+ mask-size: 20px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+}
+
.mx_DirectorySearchBox {
display: -webkit-box;
display: -ms-flexbox;
@@ -9532,6 +12664,7 @@ input.mx_StatusMessageContextMenu_message {
padding-left: 9px;
padding-right: 9px;
}
+
.mx_DirectorySearchBox_joinButton {
display: table-cell;
padding: 3px 10px;
@@ -9549,6 +12682,7 @@ input.mx_StatusMessageContextMenu_message {
user-select: none;
cursor: pointer;
}
+
.mx_DirectorySearchBox_clear {
background-color: #ff4b55;
-webkit-mask: url(../../img/cancel.4b9715b.svg);
@@ -9563,13 +12697,16 @@ input.mx_StatusMessageContextMenu_message {
height: 15px;
cursor: pointer;
}
+
.mx_Dropdown {
position: relative;
color: #2e2f32;
}
+
.mx_Dropdown_disabled {
opacity: 0.3;
}
+
.mx_Dropdown_input {
display: -webkit-box;
display: -ms-flexbox;
@@ -9578,7 +12715,7 @@ input.mx_StatusMessageContextMenu_message {
-ms-flex-align: center;
align-items: center;
position: relative;
- border-radius: 3px;
+ border-radius: 4px;
border: 1px solid #c7c7c7;
font-size: 1.2rem;
-webkit-user-select: none;
@@ -9586,16 +12723,20 @@ input.mx_StatusMessageContextMenu_message {
-ms-user-select: none;
user-select: none;
}
+
.mx_Dropdown_input.mx_AccessibleButton_disabled {
cursor: not-allowed;
}
+
.mx_Dropdown_input:focus {
border-color: #238cf5;
}
+
.mx_Dropdown_input.mx_AccessibleButton:focus {
-webkit-filter: none;
filter: none;
}
+
.mx_Dropdown_arrow {
width: 10px;
height: 6px;
@@ -9606,12 +12747,14 @@ input.mx_StatusMessageContextMenu_message {
mask-repeat: no-repeat;
background: #2e2f32;
}
+
.mx_Dropdown_option {
height: 35px;
line-height: 3.5rem;
padding-left: 8px;
padding-right: 8px;
}
+
.mx_Dropdown_input > .mx_Dropdown_option {
-webkit-box-flex: 1;
-ms-flex: 1;
@@ -9623,22 +12766,26 @@ input.mx_StatusMessageContextMenu_message {
-ms-flex-align: center;
align-items: center;
}
+
.mx_Dropdown_input > .mx_Dropdown_option,
.mx_Dropdown_option div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
+
.mx_Dropdown_option .mx_Dropdown_option_emoji,
.mx_Dropdown_option img {
margin: 5px;
width: 16px;
vertical-align: middle;
}
+
.mx_Dropdown_option_emoji {
font-size: 1.6rem;
line-height: 1.6rem;
}
+
input.mx_Dropdown_option,
input.mx_Dropdown_option:focus {
font-weight: 400;
@@ -9647,6 +12794,7 @@ input.mx_Dropdown_option:focus {
padding-bottom: 0;
width: 60%;
}
+
.mx_Dropdown_menu {
position: absolute;
left: -1px;
@@ -9655,34 +12803,40 @@ input.mx_Dropdown_option:focus {
z-index: 2;
margin: 0;
padding: 0;
- border-radius: 3px;
+ border-radius: 4px;
border: 1px solid #238cf5;
background-color: #fff;
max-height: 200px;
overflow-y: auto;
}
+
.mx_Dropdown_menu .mx_Dropdown_option {
height: auto;
min-height: 35px;
}
+
.mx_Dropdown_menu .mx_Dropdown_option_highlight {
background-color: #ddd;
}
+
.mx_Dropdown_searchPrompt {
font-weight: 400;
margin-left: 5px;
margin-bottom: 5px;
}
+
.mx_EditableItemList {
margin-top: 12px;
margin-bottom: 10px;
}
+
.mx_EditableItem {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 5px;
}
+
.mx_EditableItem_delete {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
@@ -9700,18 +12854,22 @@ input.mx_Dropdown_option:focus {
-webkit-mask-size: 100%;
mask-size: 100%;
}
+
.mx_EditableItem_email {
vertical-align: middle;
}
+
.mx_EditableItem_promptText {
margin-right: 10px;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
+
.mx_EditableItem_confirmBtn {
margin-right: 5px;
}
+
.mx_EditableItem_item {
-webkit-box-flex: 1;
-ms-flex: auto 1 0px;
@@ -9723,9 +12881,11 @@ input.mx_Dropdown_option:focus {
overflow-x: hidden;
text-overflow: ellipsis;
}
+
.mx_EditableItemList_label {
margin-bottom: 5px;
}
+
.mx_ErrorBoundary {
width: 100%;
height: 100%;
@@ -9733,6 +12893,7 @@ input.mx_Dropdown_option:focus {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_ErrorBoundary,
.mx_ErrorBoundary_body {
display: -webkit-box;
@@ -9742,6 +12903,7 @@ input.mx_Dropdown_option:focus {
-ms-flex-align: center;
align-items: center;
}
+
.mx_ErrorBoundary_body {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
@@ -9749,28 +12911,34 @@ input.mx_Dropdown_option:focus {
flex-direction: column;
max-width: 400px;
}
+
.mx_ErrorBoundary_body .mx_AccessibleButton {
margin-top: 5px;
}
+
.mx_EventListSummary {
position: relative;
}
+
.mx_TextualEvent.mx_EventListSummary_summary {
font-size: 1.4rem;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
+
.mx_EventListSummary_avatars {
display: inline-block;
margin-right: 8px;
padding-top: 8px;
line-height: 1.2rem;
}
+
.mx_EventListSummary_avatars .mx_BaseAvatar {
margin-right: -4px;
cursor: pointer;
}
+
.mx_EventListSummary_toggle {
color: #0dbd8b;
cursor: pointer;
@@ -9778,26 +12946,33 @@ input.mx_Dropdown_option:focus {
margin-right: 10px;
margin-top: 8px;
}
+
.mx_EventListSummary_line {
border-bottom: 1px solid transparent;
margin-left: 63px;
line-height: 3rem;
}
+
.mx_MatrixChat_useCompactLayout .mx_EventListSummary {
font-size: 1.3rem;
}
+
.mx_MatrixChat_useCompactLayout .mx_EventListSummary .mx_EventTile_line {
line-height: 2rem;
}
+
.mx_MatrixChat_useCompactLayout .mx_EventListSummary_line {
line-height: 2.2rem;
}
+
.mx_MatrixChat_useCompactLayout .mx_EventListSummary_toggle {
margin-top: 3px;
}
+
.mx_MatrixChat_useCompactLayout .mx_TextualEvent.mx_EventListSummary_summary {
font-size: 1.3rem;
}
+
.mx_FacePile .mx_FacePile_faces {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
@@ -9808,15 +12983,19 @@ input.mx_Dropdown_option:focus {
flex-direction: row-reverse;
vertical-align: middle;
}
+
.mx_FacePile .mx_FacePile_faces > .mx_FacePile_face + .mx_FacePile_face {
margin-right: -8px;
}
+
.mx_FacePile .mx_FacePile_faces .mx_BaseAvatar_image {
border: 1px solid #fff;
}
+
.mx_FacePile .mx_FacePile_faces .mx_BaseAvatar_initial {
margin: 1px;
}
+
.mx_FacePile .mx_FacePile_faces .mx_FacePile_more {
position: relative;
border-radius: 100%;
@@ -9824,6 +13003,7 @@ input.mx_Dropdown_option:focus {
height: 30px;
background-color: hsla(0, 0%, 91%, 0.77);
}
+
.mx_FacePile .mx_FacePile_faces .mx_FacePile_more:before {
content: "";
z-index: 1;
@@ -9842,12 +13022,14 @@ input.mx_Dropdown_option:focus {
-webkit-mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
}
+
.mx_FacePile .mx_FacePile_summary {
margin-left: 12px;
font-size: 1.4rem;
line-height: 2.4rem;
color: #8d99a5;
}
+
.mx_Field {
display: -webkit-box;
display: -ms-flexbox;
@@ -9863,12 +13045,15 @@ input.mx_Dropdown_option:focus {
transition: border-color 0.25s;
border: 1px solid #e7e7e7;
}
+
.mx_Field_prefix {
border-right: 1px solid #e7e7e7;
}
+
.mx_Field_postfix {
border-left: 1px solid #e7e7e7;
}
+
.mx_Field input,
.mx_Field select,
.mx_Field textarea {
@@ -9886,10 +13071,12 @@ input.mx_Dropdown_option:focus {
flex: 1;
min-width: 0;
}
+
.mx_Field select {
-moz-appearance: none;
-webkit-appearance: none;
}
+
.mx_Field_select:before {
content: "";
position: absolute;
@@ -9905,86 +13092,101 @@ input.mx_Dropdown_option:focus {
z-index: 1;
pointer-events: none;
}
+
.mx_Field:focus-within {
border-color: #238cf5;
}
+
.mx_Field input:focus,
.mx_Field select:focus,
.mx_Field textarea:focus {
outline: 0;
}
+
.mx_Field input::-webkit-input-placeholder,
.mx_Field textarea::-webkit-input-placeholder {
-webkit-transition: color 0.25s ease-in 0s;
transition: color 0.25s ease-in 0s;
color: transparent;
}
+
.mx_Field input::-moz-placeholder,
.mx_Field textarea::-moz-placeholder {
-moz-transition: color 0.25s ease-in 0s;
transition: color 0.25s ease-in 0s;
color: transparent;
}
+
.mx_Field input:-ms-input-placeholder,
.mx_Field textarea:-ms-input-placeholder {
-ms-transition: color 0.25s ease-in 0s;
transition: color 0.25s ease-in 0s;
color: transparent;
}
+
.mx_Field input::-ms-input-placeholder,
.mx_Field textarea::-ms-input-placeholder {
-ms-transition: color 0.25s ease-in 0s;
transition: color 0.25s ease-in 0s;
color: transparent;
}
+
.mx_Field input::placeholder,
.mx_Field textarea::placeholder {
-webkit-transition: color 0.25s ease-in 0s;
transition: color 0.25s ease-in 0s;
color: transparent;
}
+
.mx_Field input:placeholder-shown:focus::-webkit-input-placeholder,
.mx_Field textarea:placeholder-shown:focus::-webkit-input-placeholder {
-webkit-transition: color 0.25s ease-in 0.1s;
transition: color 0.25s ease-in 0.1s;
color: #888;
}
+
.mx_Field input:placeholder-shown:focus::-moz-placeholder,
.mx_Field textarea:placeholder-shown:focus::-moz-placeholder {
-moz-transition: color 0.25s ease-in 0.1s;
transition: color 0.25s ease-in 0.1s;
color: #888;
}
+
.mx_Field input:placeholder-shown:focus:-ms-input-placeholder,
.mx_Field textarea:placeholder-shown:focus:-ms-input-placeholder {
-ms-transition: color 0.25s ease-in 0.1s;
transition: color 0.25s ease-in 0.1s;
color: #888;
}
+
.mx_Field input:placeholder-shown:focus::-ms-input-placeholder,
.mx_Field textarea:placeholder-shown:focus::-ms-input-placeholder {
-ms-transition: color 0.25s ease-in 0.1s;
transition: color 0.25s ease-in 0.1s;
color: #888;
}
+
.mx_Field input:-moz-placeholder-shown:focus::placeholder,
.mx_Field textarea:-moz-placeholder-shown:focus::placeholder {
-moz-transition: color 0.25s ease-in 0.1s;
transition: color 0.25s ease-in 0.1s;
color: #888;
}
+
.mx_Field input:-ms-input-placeholder:focus::placeholder,
.mx_Field textarea:-ms-input-placeholder:focus::placeholder {
-ms-transition: color 0.25s ease-in 0.1s;
transition: color 0.25s ease-in 0.1s;
color: #888;
}
+
.mx_Field input:placeholder-shown:focus::placeholder,
.mx_Field textarea:placeholder-shown:focus::placeholder {
-webkit-transition: color 0.25s ease-in 0.1s;
transition: color 0.25s ease-in 0.1s;
color: #888;
}
+
.mx_Field label {
-webkit-transition: font-size 0.25s ease-out 0.1s, color 0.25s ease-out 0.1s,
top 0.25s ease-out 0.1s, background-color 0.25s ease-out 0.1s;
@@ -10004,6 +13206,7 @@ input.mx_Dropdown_option:focus {
text-overflow: ellipsis;
max-width: calc(100% - 20px);
}
+
.mx_Field input:not(:-moz-placeholder-shown) + label,
.mx_Field textarea:not(:-moz-placeholder-shown) + label {
-moz-transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
@@ -10016,6 +13219,7 @@ input.mx_Dropdown_option:focus {
background-color: #fff;
pointer-events: auto;
}
+
.mx_Field input:not(:-ms-input-placeholder) + label,
.mx_Field textarea:not(:-ms-input-placeholder) + label {
-ms-transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
@@ -10028,6 +13232,7 @@ input.mx_Dropdown_option:focus {
background-color: #fff;
pointer-events: auto;
}
+
.mx_Field_labelAlwaysTopLeft label,
.mx_Field input:focus + label,
.mx_Field input:not(:placeholder-shown) + label,
@@ -10044,11 +13249,13 @@ input.mx_Dropdown_option:focus {
background-color: #fff;
pointer-events: auto;
}
+
.mx_Field input:focus + label,
.mx_Field select:focus + label,
.mx_Field textarea:focus + label {
color: #238cf5;
}
+
.mx_Field input:disabled,
.mx_Field input:disabled + label,
.mx_Field select:disabled,
@@ -10058,63 +13265,48 @@ input.mx_Dropdown_option:focus {
background-color: #fff;
color: #888;
}
+
.mx_Field_valid.mx_Field,
.mx_Field_valid.mx_Field:focus-within {
border-color: #0dbd8b;
}
+
.mx_Field_valid.mx_Field:focus-within label,
.mx_Field_valid.mx_Field label {
color: #0dbd8b;
}
+
.mx_Field_invalid.mx_Field,
.mx_Field_invalid.mx_Field:focus-within {
border-color: #ff4b55;
}
+
.mx_Field_invalid.mx_Field:focus-within label,
.mx_Field_invalid.mx_Field label {
color: #ff4b55;
}
+
.mx_Field_tooltip {
margin-top: -12px;
margin-left: 4px;
width: 200px;
}
+
.mx_Field_tooltip.mx_Field_valid {
-webkit-animation: mx_fadeout 1s 2s forwards;
animation: mx_fadeout 1s 2s forwards;
}
+
.mx_Field .mx_Dropdown_input {
border: initial;
border-radius: 0;
border-radius: initial;
}
+
.mx_Field .mx_CountryDropdown {
width: 7.8rem;
}
-.mx_FormButton {
- line-height: 1.6rem;
- padding: 5px 15px;
- font-size: 1.2rem;
- height: -webkit-min-content;
- height: -moz-min-content;
- height: min-content;
-}
-.mx_FormButton:not(:last-child) {
- margin-right: 8px;
-}
-.mx_FormButton.mx_AccessibleButton_kind_primary {
- color: #0dbd8b;
- background-color: rgba(3, 179, 129, 0.16);
-}
-.mx_FormButton.mx_AccessibleButton_kind_danger {
- color: #ff4b55;
- background-color: rgba(255, 75, 85, 0.16);
-}
-.mx_FormButton.mx_AccessibleButton_kind_secondary {
- color: #737d8c;
- border: 1px solid #737d8c;
- background-color: unset;
-}
+
.mx_ImageView {
width: 100%;
-webkit-box-orient: vertical;
@@ -10122,6 +13314,7 @@ input.mx_Dropdown_option:focus {
-ms-flex-direction: column;
flex-direction: column;
}
+
.mx_ImageView,
.mx_ImageView_image_wrapper {
display: -webkit-box;
@@ -10129,7 +13322,9 @@ input.mx_Dropdown_option:focus {
display: flex;
height: 100%;
}
+
.mx_ImageView_image_wrapper {
+ pointer-events: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
@@ -10138,11 +13333,12 @@ input.mx_Dropdown_option:focus {
align-items: center;
overflow: hidden;
}
+
.mx_ImageView_image {
- pointer-events: all;
-ms-flex-negative: 0;
flex-shrink: 0;
}
+
.mx_ImageView_panel {
width: 100%;
height: 68px;
@@ -10150,6 +13346,7 @@ input.mx_Dropdown_option:focus {
-ms-flex-pack: justify;
justify-content: space-between;
}
+
.mx_ImageView_info_wrapper,
.mx_ImageView_panel {
display: -webkit-box;
@@ -10159,8 +13356,9 @@ input.mx_Dropdown_option:focus {
-ms-flex-align: center;
align-items: center;
}
+
.mx_ImageView_info_wrapper {
- pointer-events: all;
+ pointer-events: auto;
padding-left: 32px;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
@@ -10168,6 +13366,7 @@ input.mx_Dropdown_option:focus {
flex-direction: row;
color: #fff;
}
+
.mx_ImageView_info {
padding-left: 12px;
display: -webkit-box;
@@ -10178,23 +13377,29 @@ input.mx_Dropdown_option:focus {
-ms-flex-direction: column;
flex-direction: column;
}
+
.mx_ImageView_info_sender {
font-weight: 700;
}
+
.mx_ImageView_toolbar {
padding-right: 16px;
- pointer-events: all;
+ pointer-events: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
+ grid-gap: 14px;
+ gap: 14px;
}
+
.mx_ImageView_button {
- margin-left: 24px;
+ padding: 5px;
display: block;
}
+
.mx_ImageView_button:before {
content: "";
height: 22px;
@@ -10208,34 +13413,43 @@ input.mx_Dropdown_option:focus {
display: block;
background-color: #c1c6cd;
}
+
.mx_ImageView_button_rotateCW:before {
-webkit-mask-image: url(../../img/image-view/rotate-cw.60d903e.svg);
mask-image: url(../../img/image-view/rotate-cw.60d903e.svg);
}
+
.mx_ImageView_button_rotateCCW:before {
-webkit-mask-image: url(../../img/image-view/rotate-ccw.b28ae4a.svg);
mask-image: url(../../img/image-view/rotate-ccw.b28ae4a.svg);
}
+
.mx_ImageView_button_zoomOut:before {
-webkit-mask-image: url(../../img/image-view/zoom-out.8506f80.svg);
mask-image: url(../../img/image-view/zoom-out.8506f80.svg);
}
+
.mx_ImageView_button_zoomIn:before {
-webkit-mask-image: url(../../img/image-view/zoom-in.3b3f32e.svg);
mask-image: url(../../img/image-view/zoom-in.3b3f32e.svg);
}
+
.mx_ImageView_button_download:before {
-webkit-mask-image: url(../../img/image-view/download.2eac468.svg);
mask-image: url(../../img/image-view/download.2eac468.svg);
}
+
.mx_ImageView_button_more:before {
-webkit-mask-image: url(../../img/image-view/more.0427c6c.svg);
mask-image: url(../../img/image-view/more.0427c6c.svg);
}
+
.mx_ImageView_button_close {
+ padding: 0;
border-radius: 100%;
background: #21262c;
}
+
.mx_ImageView_button_close:before {
width: 32px;
height: 32px;
@@ -10244,12 +13458,14 @@ input.mx_Dropdown_option:focus {
-webkit-mask-size: 40%;
mask-size: 40%;
}
+
.mx_InfoTooltip_icon,
.mx_InfoTooltip_icon:before {
width: 16px;
height: 16px;
display: inline-block;
}
+
.mx_InfoTooltip_icon:before {
background-color: #61708b;
-webkit-mask-repeat: no-repeat;
@@ -10260,23 +13476,41 @@ input.mx_Dropdown_option:focus {
mask-position: center;
content: "";
vertical-align: middle;
+}
+
+.mx_InfoTooltip_icon_info:before {
-webkit-mask-image: url(../../img/element-icons/info.dc07e19.svg);
mask-image: url(../../img/element-icons/info.dc07e19.svg);
}
+
+.mx_InfoTooltip_icon_warning:before {
+ -webkit-mask-image: url(../../img/element-icons/warning.d65f5be.svg);
+ mask-image: url(../../img/element-icons/warning.d65f5be.svg);
+}
+
.mx_InlineSpinner {
display: inline;
}
-.mx_InlineSpinner_spin img {
+
+.mx_InlineSpinner_icon,
+.mx_InlineSpinner img {
margin: 0 6px;
vertical-align: -3px;
}
+
+.mx_InlineSpinner_icon {
+ display: inline-block;
+}
+
.mx_InviteReason {
position: relative;
margin-bottom: 1em;
}
+
.mx_InviteReason .mx_InviteReason_reason {
visibility: visible;
}
+
.mx_InviteReason .mx_InviteReason_view {
display: none;
position: absolute;
@@ -10293,6 +13527,7 @@ input.mx_Dropdown_option:focus {
cursor: pointer;
color: #737d8c;
}
+
.mx_InviteReason .mx_InviteReason_view:before {
content: "";
margin-right: 8px;
@@ -10303,24 +13538,29 @@ input.mx_Dropdown_option:focus {
width: 18px;
height: 14px;
}
+
.mx_InviteReason_hidden .mx_InviteReason_reason {
visibility: hidden;
}
+
.mx_InviteReason_hidden .mx_InviteReason_view {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_ManageIntegsButton_error {
position: relative;
float: right;
cursor: not-allowed;
}
+
.mx_ManageIntegsButton_error img {
position: absolute;
right: -5px;
top: -5px;
}
+
.mx_ManageIntegsButton_errorPopup {
position: absolute;
top: 110%;
@@ -10335,18 +13575,22 @@ input.mx_Dropdown_option:focus {
text-align: center;
z-index: 1000;
}
+
.mx_ManageIntegsButton_error .mx_ManageIntegsButton_errorPopup {
display: none;
}
+
.mx_ManageIntegsButton_error:hover .mx_ManageIntegsButton_errorPopup {
display: inline;
}
+
.mx_MiniAvatarUploader {
position: relative;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
}
+
.mx_MiniAvatarUploader .mx_Tooltip {
display: inline-block;
position: absolute;
@@ -10357,21 +13601,23 @@ input.mx_Dropdown_option:focus {
left: 72px;
top: 0;
}
-.mx_MiniAvatarUploader:after,
-.mx_MiniAvatarUploader:before {
- content: "";
+
+.mx_MiniAvatarUploader .mx_MiniAvatarUploader_indicator {
position: absolute;
height: 26px;
width: 26px;
right: -6px;
bottom: -6px;
-}
-.mx_MiniAvatarUploader:before {
background-color: #fff;
border-radius: 50%;
z-index: 1;
}
-.mx_MiniAvatarUploader:after {
+
+.mx_MiniAvatarUploader
+ .mx_MiniAvatarUploader_indicator
+ .mx_MiniAvatarUploader_cameraIcon {
+ height: 100%;
+ width: 100%;
background-color: #737d8c;
-webkit-mask-position: center;
mask-position: center;
@@ -10383,23 +13629,21 @@ input.mx_Dropdown_option:focus {
mask-size: 16px;
z-index: 2;
}
-.mx_MiniAvatarUploader.mx_MiniAvatarUploader_busy:after {
- background: url(../../img/spinner.0b29ec9.gif) no-repeat 50%;
- background-size: 80%;
- -webkit-mask: unset;
- mask: unset;
-}
+
.mx_MiniAvatarUploader_input {
display: none;
}
+
.mx_PowerSelector {
width: 100%;
}
+
.mx_PowerSelector .mx_Field input,
.mx_PowerSelector .mx_Field select {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
+
progress.mx_ProgressBar {
height: 6px;
width: 60px;
@@ -10410,32 +13654,41 @@ progress.mx_ProgressBar {
border: none;
border-radius: 6px;
}
+
progress.mx_ProgressBar::-moz-progress-bar {
border-radius: 6px;
}
+
progress.mx_ProgressBar::-webkit-progress-bar,
progress.mx_ProgressBar::-webkit-progress-value {
border-radius: 6px;
}
+
progress.mx_ProgressBar {
color: #0dbd8b;
}
+
progress.mx_ProgressBar::-moz-progress-bar {
background-color: #0dbd8b;
}
+
progress.mx_ProgressBar::-webkit-progress-value {
background-color: #0dbd8b;
}
+
progress.mx_ProgressBar {
background-color: rgba(141, 151, 165, 0.2);
}
+
progress.mx_ProgressBar::-webkit-progress-bar {
background-color: rgba(141, 151, 165, 0.2);
}
+
progress.mx_ProgressBar ::-webkit-progress-value {
-webkit-transition: width 1s;
transition: width 1s;
}
+
progress.mx_ProgressBar ::-moz-progress-bar {
-moz-transition: padding-bottom 1s;
transition: padding-bottom 1s;
@@ -10445,27 +13698,54 @@ progress.mx_ProgressBar ::-moz-progress-bar {
padding-left: 15px;
height: 0;
}
+
.mx_QRCode img {
border-radius: 8px;
}
+
.mx_ReplyThread {
- margin-top: 0;
+ margin: 0 0 8px;
+ padding: 0 10px;
+ border-left: 2px solid #0dbd8b;
+ border-radius: 2px;
}
-.mx_ReplyThread .mx_DateSeparator {
- font-size: 1em !important;
- margin-top: 0;
- margin-bottom: 0;
- padding-bottom: 1px;
- bottom: -5px;
-}
-.mx_ReplyThread_show {
+
+.mx_ReplyThread .mx_ReplyThread_show {
cursor: pointer;
}
-blockquote.mx_ReplyThread {
- margin-left: 0;
- padding-left: 10px;
- border-left: 4px solid #ddd;
+
+.mx_ReplyThread.mx_ReplyThread_color1 {
+ border-left-color: #368bd6;
}
+
+.mx_ReplyThread.mx_ReplyThread_color2 {
+ border-left-color: #ac3ba8;
+}
+
+.mx_ReplyThread.mx_ReplyThread_color3 {
+ border-left-color: #0dbd8b;
+}
+
+.mx_ReplyThread.mx_ReplyThread_color4 {
+ border-left-color: #e64f7a;
+}
+
+.mx_ReplyThread.mx_ReplyThread_color5 {
+ border-left-color: #ff812d;
+}
+
+.mx_ReplyThread.mx_ReplyThread_color6 {
+ border-left-color: #2dc2c5;
+}
+
+.mx_ReplyThread.mx_ReplyThread_color7 {
+ border-left-color: #5c56f5;
+}
+
+.mx_ReplyThread.mx_ReplyThread_color8 {
+ border-left-color: #74d12c;
+}
+
.mx_ResizeHandle {
cursor: row-resize;
-webkit-box-flex: 0;
@@ -10473,30 +13753,37 @@ blockquote.mx_ReplyThread {
flex: 0 0 auto;
z-index: 100;
}
+
.mx_ResizeHandle.mx_ResizeHandle_horizontal {
margin: 0 -5px;
padding: 0 5px;
cursor: col-resize;
}
+
.mx_ResizeHandle.mx_ResizeHandle_vertical {
margin: -5px 0;
padding: 5px 0;
cursor: row-resize;
}
+
.mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
margin: 0 -10px 0 0;
padding: 0 8px 0 0;
}
+
.mx_ResizeHandle > div {
background: transparent;
}
+
.mx_ResizeHandle.mx_ResizeHandle_horizontal > div {
width: 1px;
height: 100%;
}
+
.mx_ResizeHandle.mx_ResizeHandle_vertical > div {
height: 1px;
}
+
.mx_AtRoomPill,
.mx_GroupPill,
.mx_RoomPill,
@@ -10512,33 +13799,40 @@ blockquote.mx_ReplyThread {
line-height: 1.5rem;
padding-left: 0;
}
+
a.mx_Pill {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: calc(100% - 1ch);
}
+
.mx_Pill {
padding: 0.1rem 0.4em 0.1rem 0.1rem;
vertical-align: text-top;
line-height: 1.7rem;
}
+
.mx_EventTile_content .markdown-body a.mx_GroupPill,
.mx_GroupPill {
color: #fff;
background-color: #aaa;
}
+
.mx_EventTile_content .markdown-body a.mx_Pill {
text-decoration: none;
}
+
.mx_EventTile_content .markdown-body a.mx_UserPill,
.mx_UserPill {
color: #2e2f32;
background-color: rgba(0, 0, 0, 0.1);
}
+
.mx_UserPill_selected {
background-color: #0dbd8b !important;
}
+
.mx_EventTile_content .markdown-body a.mx_AtRoomPill,
.mx_EventTile_content .mx_AtRoomPill,
.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me,
@@ -10546,6 +13840,7 @@ a.mx_Pill {
color: #fff;
background-color: #ff4b55;
}
+
.mx_EventTile_content .markdown-body a.mx_GroupPill,
.mx_EventTile_content .markdown-body a.mx_RoomPill,
.mx_GroupPill,
@@ -10553,11 +13848,13 @@ a.mx_Pill {
color: #fff;
background-color: #aaa;
}
+
.mx_EventTile_body .mx_GroupPill,
.mx_EventTile_body .mx_RoomPill,
.mx_EventTile_body .mx_UserPill {
cursor: pointer;
}
+
.mx_AtRoomPill .mx_BaseAvatar,
.mx_GroupPill .mx_BaseAvatar,
.mx_RoomPill .mx_BaseAvatar,
@@ -10572,12 +13869,15 @@ a.mx_Pill {
border-radius: 10rem;
margin-right: 0.24rem;
}
+
.mx_Markdown_BOLD {
font-weight: 700;
}
+
.mx_Markdown_ITALIC {
font-style: italic;
}
+
.mx_Markdown_CODE {
padding: 0.2em 0;
margin: 0;
@@ -10585,28 +13885,34 @@ a.mx_Pill {
background-color: rgba(0, 0, 0, 0.04);
border-radius: 3px;
}
+
.mx_Markdown_HR {
display: block;
background: #e9e9e9;
}
+
.mx_Markdown_STRIKETHROUGH {
text-decoration: line-through;
}
+
.mx_RoleButton {
margin-left: 4px;
margin-right: 4px;
cursor: pointer;
display: inline-block;
}
+
.mx_RoleButton object {
pointer-events: none;
}
+
.mx_RoleButton_tooltip {
display: inline-block;
position: relative;
top: -25px;
left: 6px;
}
+
.mx_RoomAliasField {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
@@ -10620,31 +13926,38 @@ a.mx_Pill {
min-width: 0;
max-width: 100%;
}
+
.mx_RoomAliasField input {
width: 150px;
padding-left: 0;
padding-right: 0;
}
+
.mx_RoomAliasField input::-webkit-input-placeholder {
color: #888;
font-weight: 400;
}
+
.mx_RoomAliasField input::-moz-placeholder {
color: #888;
font-weight: 400;
}
+
.mx_RoomAliasField input:-ms-input-placeholder {
color: #888;
font-weight: 400;
}
+
.mx_RoomAliasField input::-ms-input-placeholder {
color: #888;
font-weight: 400;
}
+
.mx_RoomAliasField input::placeholder {
color: #888;
font-weight: 400;
}
+
.mx_RoomAliasField .mx_Field_postfix,
.mx_RoomAliasField .mx_Field_prefix {
color: #888;
@@ -10656,12 +13969,14 @@ a.mx_Pill {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
+
.mx_RoomAliasField .mx_Field_postfix {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: calc(100% - 180px);
}
+
.mx_SSOButtons {
display: -webkit-box;
display: -ms-flexbox;
@@ -10672,9 +13987,11 @@ a.mx_Pill {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_SSOButtons .mx_SSOButtons_row + .mx_SSOButtons_row {
margin-top: 16px;
}
+
.mx_SSOButtons .mx_SSOButton {
position: relative;
width: 100%;
@@ -10687,6 +14004,7 @@ a.mx_Pill {
border: 1px solid #e7e7e7;
color: #2e2f32;
}
+
.mx_SSOButtons .mx_SSOButton > img {
-o-object-fit: contain;
object-fit: contain;
@@ -10694,15 +14012,18 @@ a.mx_Pill {
left: 8px;
top: 4px;
}
+
.mx_SSOButtons .mx_SSOButton_default {
color: #0dbd8b;
background-color: #fff;
border-color: #0dbd8b;
}
+
.mx_SSOButtons .mx_SSOButton_default.mx_SSOButton_primary {
color: #fff;
background-color: #0dbd8b;
}
+
.mx_SSOButtons .mx_SSOButton_mini {
-webkit-box-sizing: border-box;
box-sizing: border-box;
@@ -10711,13 +14032,16 @@ a.mx_Pill {
min-width: 50px;
padding: 12px;
}
+
.mx_SSOButtons .mx_SSOButton_mini > img {
left: 12px;
top: 12px;
}
+
.mx_SSOButtons .mx_SSOButton_mini + .mx_SSOButton_mini {
margin-left: 16px;
}
+
.mx_ServerPicker {
margin-bottom: 14px;
border-bottom: 1px solid rgba(141, 151, 165, 0.2);
@@ -10728,12 +14052,14 @@ a.mx_Pill {
font-size: 1.4rem;
line-height: 2rem;
}
+
.mx_ServerPicker > h3 {
font-weight: 600;
margin: 0 0 20px;
grid-column: 1;
grid-row: 1;
}
+
.mx_ServerPicker .mx_ServerPicker_help {
width: 20px;
height: 20px;
@@ -10747,6 +14073,7 @@ a.mx_Pill {
font-size: 16px;
position: relative;
}
+
.mx_ServerPicker .mx_ServerPicker_help:before {
content: "";
width: 24px;
@@ -10764,18 +14091,21 @@ a.mx_Pill {
mask-image: url(../../img/element-icons/i.80d84f3.svg);
background: #fff;
}
+
.mx_ServerPicker .mx_ServerPicker_server {
color: #232f32;
grid-column: 1;
grid-row: 2;
margin-bottom: 16px;
}
+
.mx_ServerPicker .mx_ServerPicker_change {
padding: 0;
font-size: inherit;
grid-column: 2;
grid-row: 2;
}
+
.mx_ServerPicker .mx_ServerPicker_desc {
margin-top: -12px;
color: #8d99a5;
@@ -10783,9 +14113,11 @@ a.mx_Pill {
grid-row: 3;
margin-bottom: 16px;
}
+
.mx_ServerPicker_helpDialog .mx_Dialog_content {
width: 456px;
}
+
.mx_Slider {
position: relative;
margin: 0;
@@ -10793,6 +14125,7 @@ a.mx_Pill {
-ms-flex-positive: 1;
flex-grow: 1;
}
+
.mx_Slider_dotContainer {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
@@ -10802,12 +14135,14 @@ a.mx_Pill {
-ms-flex-pack: justify;
justify-content: space-between;
}
+
.mx_Slider_bar,
.mx_Slider_dotContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_Slider_bar {
-webkit-box-sizing: border-box;
box-sizing: border-box;
@@ -10819,12 +14154,14 @@ a.mx_Pill {
-ms-flex-align: center;
align-items: center;
}
+
.mx_Slider_bar > hr {
width: 100%;
height: 0.4em;
background-color: #c1c9d6;
border: 0;
}
+
.mx_Slider_selection {
display: -webkit-box;
display: -ms-flexbox;
@@ -10837,6 +14174,7 @@ a.mx_Pill {
position: absolute;
pointer-events: none;
}
+
.mx_Slider_selectionDot {
position: absolute;
width: 1.1em;
@@ -10847,10 +14185,12 @@ a.mx_Pill {
box-shadow: 0 0 6px #d3d3d3;
z-index: 10;
}
+
.mx_Slider_selection > hr {
margin: 0;
border: 0.2em solid #0dbd8b;
}
+
.mx_Slider_dot {
height: 1em;
width: 1em;
@@ -10858,9 +14198,11 @@ a.mx_Pill {
background-color: #c1c9d6;
z-index: 0;
}
+
.mx_Slider_dotActive {
background-color: #0dbd8b;
}
+
.mx_Slider_dotValue {
display: -webkit-box;
display: -ms-flexbox;
@@ -10874,9 +14216,11 @@ a.mx_Pill {
align-items: center;
color: #c1c9d6;
}
+
.mx_Slider_labelContainer {
width: 1em;
}
+
.mx_Slider_label {
position: relative;
width: -webkit-fit-content;
@@ -10884,6 +14228,7 @@ a.mx_Pill {
width: fit-content;
left: -50%;
}
+
.mx_Spinner {
display: -webkit-box;
display: -ms-flexbox;
@@ -10900,9 +14245,43 @@ a.mx_Pill {
-ms-flex: 1;
flex: 1;
}
+
.mx_MatrixChat_middlePanel .mx_Spinner {
height: auto;
}
+
+@-webkit-keyframes spin {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ to {
+ -webkit-transform: rotate(1turn);
+ transform: rotate(1turn);
+ }
+}
+
+@keyframes spin {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ to {
+ -webkit-transform: rotate(1turn);
+ transform: rotate(1turn);
+ }
+}
+
+.mx_Spinner_icon {
+ background-color: #2e2f32;
+ -webkit-mask: url(../../img/spinner.5a0438d.svg);
+ mask: url(../../img/spinner.5a0438d.svg);
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-animation: spin 1.1s steps(12) infinite;
+ animation: spin 1.1s steps(12) infinite;
+}
+
.mx_Checkbox {
display: -webkit-box;
display: -ms-flexbox;
@@ -10911,6 +14290,7 @@ a.mx_Pill {
-ms-flex-align: start;
align-items: flex-start;
}
+
.mx_Checkbox input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
@@ -10918,6 +14298,7 @@ a.mx_Pill {
margin: 0;
padding: 0;
}
+
.mx_Checkbox input[type="checkbox"] + label {
display: -webkit-box;
display: -ms-flexbox;
@@ -10929,6 +14310,7 @@ a.mx_Pill {
-ms-flex-positive: 1;
flex-grow: 1;
}
+
.mx_Checkbox input[type="checkbox"] + label > .mx_Checkbox_background {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
@@ -10944,6 +14326,7 @@ a.mx_Pill {
box-sizing: border-box;
border-radius: 0.4rem;
}
+
.mx_Checkbox input[type="checkbox"] + label > .mx_Checkbox_background img {
display: none;
height: 100%;
@@ -10951,10 +14334,12 @@ a.mx_Pill {
-webkit-filter: invert(100%);
filter: invert(100%);
}
+
.mx_Checkbox input[type="checkbox"]:checked + label > .mx_Checkbox_background {
background: #0dbd8b;
border-color: #0dbd8b;
}
+
.mx_Checkbox
input[type="checkbox"]:checked
+ label
@@ -10962,13 +14347,16 @@ a.mx_Pill {
img {
display: block;
}
+
.mx_Checkbox input[type="checkbox"] + label > :not(.mx_Checkbox_background) {
margin-left: 10px;
}
+
.mx_Checkbox input[type="checkbox"]:disabled + label {
opacity: 0.5;
cursor: not-allowed;
}
+
.mx_Checkbox
input[type="checkbox"]:checked:disabled
+ label
@@ -10976,6 +14364,7 @@ a.mx_Pill {
background-color: #0dbd8b;
border-color: #0dbd8b;
}
+
.mx_Checkbox
input[type="checkbox"].focus-visible
+ label
@@ -10984,6 +14373,7 @@ a.mx_Pill {
outline-style: solid;
outline-color: Highlight;
}
+
@media (-webkit-min-device-pixel-ratio: 0) {
.mx_Checkbox
input[type="checkbox"].focus-visible
@@ -10993,12 +14383,14 @@ a.mx_Pill {
outline-style: auto;
}
}
+
.mx_RadioButton {
position: relative;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
+
.mx_RadioButton,
.mx_RadioButton > .mx_RadioButton_content {
display: -webkit-box;
@@ -11008,6 +14400,7 @@ a.mx_Pill {
-ms-flex-positive: 1;
flex-grow: 1;
}
+
.mx_RadioButton > .mx_RadioButton_content {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
@@ -11016,6 +14409,7 @@ a.mx_Pill {
margin-left: 8px;
margin-right: 8px;
}
+
.mx_RadioButton .mx_RadioButton_spacer {
-ms-flex-negative: 0;
flex-shrink: 0;
@@ -11025,14 +14419,16 @@ a.mx_Pill {
height: 1.6rem;
width: 1.6rem;
}
-.mx_RadioButton > input[type="radio"] {
+
+.mx_RadioButton input[type="radio"] {
margin: 0;
padding: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
-.mx_RadioButton > input[type="radio"] + div {
+
+.mx_RadioButton input[type="radio"] + div {
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
@@ -11055,55 +14451,140 @@ a.mx_Pill {
border: 0.15rem solid #61708b;
border-radius: 1.6rem;
}
-.mx_RadioButton > input[type="radio"] + div > div {
+
+.mx_RadioButton input[type="radio"] + div > div {
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 0.8rem;
width: 0.8rem;
border-radius: 0.8rem;
}
-.mx_RadioButton > input[type="radio"].focus-visible + div {
+
+.mx_RadioButton input[type="radio"].focus-visible + div {
outline-width: 2px;
outline-style: solid;
outline-color: Highlight;
}
+
@media (-webkit-min-device-pixel-ratio: 0) {
- .mx_RadioButton > input[type="radio"].focus-visible + div {
+ .mx_RadioButton input[type="radio"].focus-visible + div {
outline-color: -webkit-focus-ring-color;
outline-style: auto;
}
}
-.mx_RadioButton > input[type="radio"]:checked + div {
+
+.mx_RadioButton input[type="radio"]:checked + div {
border-color: #0dbd8b;
}
-.mx_RadioButton > input[type="radio"]:checked + div > div {
+
+.mx_RadioButton input[type="radio"]:checked + div > div {
background: #0dbd8b;
}
-.mx_RadioButton > input[type="radio"]:disabled + div,
-.mx_RadioButton > input[type="radio"]:disabled + div + span {
+
+.mx_RadioButton input[type="radio"]:disabled + div,
+.mx_RadioButton input[type="radio"]:disabled + div + span {
opacity: 0.5;
cursor: not-allowed;
}
-.mx_RadioButton > input[type="radio"]:disabled + div {
+
+.mx_RadioButton input[type="radio"]:disabled + div {
border-color: #61708b;
}
-.mx_RadioButton > input[type="radio"]:checked:disabled + div > div {
+
+.mx_RadioButton input[type="radio"]:checked:disabled + div > div {
background-color: #61708b;
}
+
+.mx_RadioButton .mx_RadioButton_innerLabel {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ position: relative;
+ top: 4px;
+}
+
.mx_RadioButton_outlined {
border: 1px solid #e3e8f0;
border-radius: 8px;
}
+
.mx_RadioButton_checked {
border-color: #0dbd8b;
}
+
.mx_SyntaxHighlight {
background: none !important;
color: #747474 !important;
}
+
+.mx_TagComposer .mx_TagComposer_input {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+.mx_TagComposer .mx_TagComposer_input .mx_Field {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ margin: 0;
+}
+
+.mx_TagComposer .mx_TagComposer_input .mx_AccessibleButton {
+ min-width: 70px;
+ padding: 0;
+ margin-left: 16px;
+}
+
+.mx_TagComposer .mx_TagComposer_input .mx_AccessibleButton,
+.mx_TagComposer .mx_TagComposer_input .mx_Field,
+.mx_TagComposer .mx_TagComposer_input .mx_Field input {
+ border-radius: 8px;
+}
+
+.mx_TagComposer .mx_TagComposer_tags {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ margin-top: 12px;
+}
+
+.mx_TagComposer .mx_TagComposer_tags .mx_TagComposer_tag {
+ padding: 6px 8px 8px 12px;
+ position: relative;
+ margin-right: 12px;
+ margin-top: 12px;
+}
+
+.mx_TagComposer .mx_TagComposer_tags .mx_TagComposer_tag:before {
+ content: "";
+ border-radius: 20px;
+ background-color: #8d99a5;
+ opacity: 0.15;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+}
+
+.mx_TagComposer .mx_TagComposer_tags .mx_AccessibleButton {
+ background-image: url(../../img/subtract.880420e.svg);
+ width: 16px;
+ height: 16px;
+ margin-left: 8px;
+ display: inline-block;
+ vertical-align: middle;
+ cursor: pointer;
+}
+
.mx_TextWithTooltip_tooltip {
display: none;
}
+
.mx_ToggleSwitch {
-webkit-transition: background-color 0.2s ease-out 0.1s;
transition: background-color 0.2s ease-out 0.1s;
@@ -11114,16 +14595,20 @@ a.mx_Pill {
background-color: #c1c9d6;
opacity: 0.5;
}
+
.mx_ToggleSwitch_enabled {
cursor: pointer;
opacity: 1;
}
+
.mx_ToggleSwitch.mx_ToggleSwitch_on {
background-color: #0dbd8b;
}
+
.mx_ToggleSwitch.mx_ToggleSwitch_on > .mx_ToggleSwitch_ball {
left: calc(100% - 2rem);
}
+
.mx_ToggleSwitch_ball {
position: relative;
width: 2rem;
@@ -11134,6 +14619,7 @@ a.mx_Pill {
transition: left 0.15s ease-out 0.1s;
left: 0;
}
+
@-webkit-keyframes mx_fadein {
0% {
opacity: 0;
@@ -11142,6 +14628,7 @@ a.mx_Pill {
opacity: 1;
}
}
+
@keyframes mx_fadein {
0% {
opacity: 0;
@@ -11150,6 +14637,7 @@ a.mx_Pill {
opacity: 1;
}
}
+
@-webkit-keyframes mx_fadeout {
0% {
opacity: 1;
@@ -11158,6 +14646,7 @@ a.mx_Pill {
opacity: 0;
}
}
+
@keyframes mx_fadeout {
0% {
opacity: 1;
@@ -11166,6 +14655,7 @@ a.mx_Pill {
opacity: 0;
}
}
+
.mx_Tooltip_chevron {
position: absolute;
left: -7px;
@@ -11176,6 +14666,7 @@ a.mx_Pill {
border-right: 7px solid #e7e7e7;
border-bottom: 7px solid transparent;
}
+
.mx_Tooltip_chevron:after {
content: "";
width: 0;
@@ -11187,6 +14678,7 @@ a.mx_Pill {
top: -6px;
left: 1px;
}
+
.mx_Tooltip {
position: fixed;
border-radius: 8px;
@@ -11206,34 +14698,42 @@ a.mx_Pill {
border: 0;
text-align: center;
}
+
.mx_Tooltip,
.mx_Tooltip .mx_Tooltip_chevron {
display: none;
}
+
.mx_Tooltip.mx_Tooltip_visible {
-webkit-animation: mx_fadein 0.2s forwards;
animation: mx_fadein 0.2s forwards;
}
+
.mx_Tooltip.mx_Tooltip_invisible {
-webkit-animation: mx_fadeout 0.1s forwards;
animation: mx_fadeout 0.1s forwards;
}
+
.mx_Field_tooltip {
background-color: #fff;
color: #2e2f32;
border: 1px solid #e7e7e7;
text-align: unset;
}
+
.mx_Field_tooltip .mx_Tooltip_chevron {
display: unset;
}
+
.mx_Tooltip_title {
font-weight: 600;
}
+
.mx_Tooltip_sub {
opacity: 0.7;
margin-top: 4px;
}
+
.mx_TooltipButton {
display: inline-block;
width: 11px;
@@ -11249,38 +14749,47 @@ a.mx_Pill {
text-align: center;
cursor: pointer;
}
+
.mx_TooltipButton:hover {
opacity: 1;
}
+
.mx_TooltipButton_container {
position: relative;
top: -18px;
left: 4px;
}
+
.mx_TooltipButton_helpText {
width: 400px;
text-align: start;
line-height: 17px !important;
}
+
.mx_Validation {
position: relative;
}
+
.mx_Validation_details {
padding-left: 20px;
margin: 0;
}
+
.mx_Validation_description + .mx_Validation_details {
margin: 1em 0 0;
}
+
.mx_Validation_detail {
position: relative;
font-weight: 400;
list-style: none;
margin-bottom: 0.5em;
}
+
.mx_Validation_detail:last-child {
margin-bottom: 0;
}
+
.mx_Validation_detail:before {
content: "";
position: absolute;
@@ -11295,22 +14804,27 @@ a.mx_Pill {
-webkit-mask-size: contain;
mask-size: contain;
}
+
.mx_Validation_detail.mx_Validation_valid {
color: #0dbd8b;
}
+
.mx_Validation_detail.mx_Validation_valid:before {
-webkit-mask-image: url(../../img/feather-customised/check.5745b4e.svg);
mask-image: url(../../img/feather-customised/check.5745b4e.svg);
background-color: #0dbd8b;
}
+
.mx_Validation_detail.mx_Validation_invalid {
color: #ff4b55;
}
+
.mx_Validation_detail.mx_Validation_invalid:before {
-webkit-mask-image: url(../../img/feather-customised/x.9662221.svg);
mask-image: url(../../img/feather-customised/x.9662221.svg);
background-color: #ff4b55;
}
+
.mx_EmojiPicker {
width: 340px;
height: 450px;
@@ -11323,6 +14837,7 @@ a.mx_Pill {
-ms-flex-direction: column;
flex-direction: column;
}
+
.mx_EmojiPicker_body {
-webkit-box-flex: 1;
-ms-flex: 1;
@@ -11331,10 +14846,12 @@ a.mx_Pill {
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
+
.mx_EmojiPicker_header {
padding: 4px 8px 0;
border-bottom: 1px solid #e9edf1;
}
+
.mx_EmojiPicker_anchor {
padding: 8px 8px 6px;
border: none;
@@ -11344,13 +14861,16 @@ a.mx_Pill {
width: 36px;
height: 38px;
}
+
.mx_EmojiPicker_anchor:not(:disabled) {
cursor: pointer;
}
+
.mx_EmojiPicker_anchor:not(:disabled):hover {
background-color: #ddd;
border-bottom: 2px solid #0dbd8b;
}
+
.mx_EmojiPicker_anchor:before {
background-color: #2e2f32;
content: "";
@@ -11362,52 +14882,65 @@ a.mx_Pill {
width: 100%;
height: 100%;
}
+
.mx_EmojiPicker_anchor:disabled:before {
background-color: #ddd;
}
+
.mx_EmojiPicker_anchor_activity:before {
-webkit-mask-image: url(../../img/emojipicker/activity.921ec9f.svg);
mask-image: url(../../img/emojipicker/activity.921ec9f.svg);
}
+
.mx_EmojiPicker_anchor_custom:before {
-webkit-mask-image: url(../../img/emojipicker/custom.e1cd0fd.svg);
mask-image: url(../../img/emojipicker/custom.e1cd0fd.svg);
}
+
.mx_EmojiPicker_anchor_flags:before {
-webkit-mask-image: url(../../img/emojipicker/flags.1a8855e.svg);
mask-image: url(../../img/emojipicker/flags.1a8855e.svg);
}
+
.mx_EmojiPicker_anchor_foods:before {
-webkit-mask-image: url(../../img/emojipicker/foods.c6b220a.svg);
mask-image: url(../../img/emojipicker/foods.c6b220a.svg);
}
+
.mx_EmojiPicker_anchor_nature:before {
-webkit-mask-image: url(../../img/emojipicker/nature.6540b99.svg);
mask-image: url(../../img/emojipicker/nature.6540b99.svg);
}
+
.mx_EmojiPicker_anchor_objects:before {
-webkit-mask-image: url(../../img/emojipicker/objects.4d34f58.svg);
mask-image: url(../../img/emojipicker/objects.4d34f58.svg);
}
+
.mx_EmojiPicker_anchor_people:before {
-webkit-mask-image: url(../../img/emojipicker/people.e918580.svg);
mask-image: url(../../img/emojipicker/people.e918580.svg);
}
+
.mx_EmojiPicker_anchor_places:before {
-webkit-mask-image: url(../../img/emojipicker/places.7310322.svg);
mask-image: url(../../img/emojipicker/places.7310322.svg);
}
+
.mx_EmojiPicker_anchor_recent:before {
-webkit-mask-image: url(../../img/emojipicker/recent.13b42e2.svg);
mask-image: url(../../img/emojipicker/recent.13b42e2.svg);
}
+
.mx_EmojiPicker_anchor_symbols:before {
-webkit-mask-image: url(../../img/emojipicker/symbols.15a557d.svg);
mask-image: url(../../img/emojipicker/symbols.15a557d.svg);
}
+
.mx_EmojiPicker_anchor_visible {
border-bottom: 2px solid #0dbd8b;
}
+
.mx_EmojiPicker_search {
margin: 8px;
border-radius: 4px;
@@ -11417,6 +14950,7 @@ a.mx_Pill {
display: -ms-flexbox;
display: flex;
}
+
.mx_EmojiPicker_search input {
-webkit-box-flex: 1;
-ms-flex: 1;
@@ -11425,6 +14959,7 @@ a.mx_Pill {
padding: 8px 12px;
border-radius: 4px 0;
}
+
.mx_EmojiPicker_search button {
border: none;
background-color: inherit;
@@ -11435,16 +14970,20 @@ a.mx_Pill {
width: 32px;
height: 32px;
}
+
.mx_EmojiPicker_search_clear {
cursor: pointer;
}
+
.mx_EmojiPicker_search_icon {
width: 16px;
margin: 8px;
}
+
.mx_EmojiPicker_search_icon:not(.mx_EmojiPicker_search_clear) {
pointer-events: none;
}
+
.mx_EmojiPicker_search_icon:after {
-webkit-mask: url(../../img/emojipicker/search.973c315.svg) no-repeat;
mask: url(../../img/emojipicker/search.973c315.svg) no-repeat;
@@ -11456,10 +14995,12 @@ a.mx_Pill {
width: 100%;
height: 100%;
}
+
.mx_EmojiPicker_search_clear:after {
-webkit-mask-image: url(../../img/emojipicker/delete.f7344c5.svg);
mask-image: url(../../img/emojipicker/delete.f7344c5.svg);
}
+
.mx_EmojiPicker_category {
padding: 0 12px;
display: -webkit-box;
@@ -11473,20 +15014,24 @@ a.mx_Pill {
-ms-flex-align: center;
align-items: center;
}
+
.mx_EmojiPicker_category_label {
width: 304px;
}
+
.mx_EmojiPicker_list {
width: 304px;
padding: 0;
margin: 0;
}
+
.mx_EmojiPicker_item_wrapper {
display: inline-block;
list-style: none;
width: 38px;
cursor: pointer;
}
+
.mx_EmojiPicker_item {
display: inline-block;
font-size: 2rem;
@@ -11498,20 +15043,24 @@ a.mx_Pill {
text-align: center;
border-radius: 4px;
}
+
.mx_EmojiPicker_item:hover {
background-color: #ddd;
}
+
.mx_EmojiPicker_item_selected {
color: rgba(0, 0, 0, 0.5);
border: 1px solid #0dbd8b;
padding: 4px;
}
+
.mx_EmojiPicker_category_label,
.mx_EmojiPicker_preview_name {
font-size: 1.6rem;
font-weight: 600;
margin: 0;
}
+
.mx_EmojiPicker_footer {
border-top: 1px solid #e9edf1;
min-height: 72px;
@@ -11522,10 +15071,12 @@ a.mx_Pill {
-ms-flex-align: center;
align-items: center;
}
+
.mx_EmojiPicker_preview_emoji {
font-size: 3.2rem;
padding: 8px 16px;
}
+
.mx_EmojiPicker_preview_text {
display: -webkit-box;
display: -ms-flexbox;
@@ -11535,17 +15086,21 @@ a.mx_Pill {
-ms-flex-direction: column;
flex-direction: column;
}
+
.mx_EmojiPicker_name {
text-transform: capitalize;
}
+
.mx_EmojiPicker_shortcode {
color: #747474;
font-size: 1.4rem;
}
+
.mx_EmojiPicker_shortcode:after,
.mx_EmojiPicker_shortcode:before {
content: ":";
}
+
.mx_EmojiPicker_quick {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
@@ -11554,9 +15109,11 @@ a.mx_Pill {
-ms-flex-pack: distribute;
justify-content: space-around;
}
+
.mx_EmojiPicker_quick_header .mx_EmojiPicker_name {
margin-right: 4px;
}
+
.mx_GroupPublicity_toggle {
display: -webkit-box;
display: -ms-flexbox;
@@ -11566,6 +15123,7 @@ a.mx_Pill {
align-items: center;
margin: 8px;
}
+
.mx_GroupPublicity_toggle .mx_GroupTile {
display: -webkit-box;
display: -ms-flexbox;
@@ -11578,9 +15136,11 @@ a.mx_Pill {
box-sizing: border-box;
width: 100%;
}
+
.mx_GroupPublicity_toggle .mx_ToggleSwitch {
float: right;
}
+
.mx_GroupRoomTile {
position: relative;
color: #2e2f32;
@@ -11592,20 +15152,228 @@ a.mx_Pill {
-ms-flex-align: center;
align-items: center;
}
+
.mx_GroupRoomList_wrapper {
padding: 10px;
}
+
.mx_GroupUserSettings_groupPublicity_scrollbox {
height: 200px;
border: 1px solid transparent;
border-radius: 3px;
overflow: hidden;
}
+
+.mx_CallEvent {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ background-color: #f2f5f8;
+ border-radius: 8px;
+ margin: 10px auto;
+ max-width: 75%;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ height: 60px;
+}
+
+.mx_CallEvent.mx_CallEvent_voice
+ .mx_CallEvent_content_button_answer
+ span:before,
+.mx_CallEvent.mx_CallEvent_voice
+ .mx_CallEvent_content_button_callBack
+ span:before,
+.mx_CallEvent.mx_CallEvent_voice .mx_CallEvent_type_icon:before {
+ -webkit-mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
+ mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
+}
+
+.mx_CallEvent.mx_CallEvent_video
+ .mx_CallEvent_content_button_answer
+ span:before,
+.mx_CallEvent.mx_CallEvent_video
+ .mx_CallEvent_content_button_callBack
+ span:before,
+.mx_CallEvent.mx_CallEvent_video .mx_CallEvent_type_icon:before {
+ -webkit-mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
+ mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
+}
+
+.mx_CallEvent .mx_CallEvent_info {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ margin-left: 12px;
+}
+
+.mx_CallEvent .mx_CallEvent_info .mx_CallEvent_info_basic {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ margin-left: 10px;
+}
+
+.mx_CallEvent .mx_CallEvent_info .mx_CallEvent_info_basic .mx_CallEvent_sender {
+ font-weight: 600;
+ font-size: 1.5rem;
+ line-height: 1.8rem;
+ margin-bottom: 3px;
+}
+
+.mx_CallEvent .mx_CallEvent_info .mx_CallEvent_info_basic .mx_CallEvent_type {
+ font-weight: 400;
+ color: #737d8c;
+ font-size: 1.2rem;
+ line-height: 1.3rem;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.mx_CallEvent
+ .mx_CallEvent_info
+ .mx_CallEvent_info_basic
+ .mx_CallEvent_type
+ .mx_CallEvent_type_icon {
+ height: 13px;
+ width: 13px;
+ margin-right: 5px;
+}
+
+.mx_CallEvent
+ .mx_CallEvent_info
+ .mx_CallEvent_info_basic
+ .mx_CallEvent_type
+ .mx_CallEvent_type_icon:before {
+ content: "";
+ position: absolute;
+ height: 13px;
+ width: 13px;
+ background-color: #8d99a5;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+}
+
+.mx_CallEvent .mx_CallEvent_content {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #737d8c;
+ margin-right: 16px;
+}
+
+.mx_CallEvent .mx_CallEvent_content .mx_CallEvent_content_button {
+ height: 24px;
+ padding: 0 12px;
+ margin-left: 8px;
+}
+
+.mx_CallEvent .mx_CallEvent_content .mx_CallEvent_content_button span {
+ padding: 8px 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.mx_CallEvent .mx_CallEvent_content .mx_CallEvent_content_button span:before {
+ content: "";
+ display: inline-block;
+ background-color: #fff;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 16px;
+ mask-size: 16px;
+ width: 16px;
+ height: 16px;
+ margin-right: 8px;
+}
+
+.mx_CallEvent
+ .mx_CallEvent_content
+ .mx_CallEvent_content_button_reject
+ span:before {
+ -webkit-mask-image: url(../../img/element-icons/call/hangup.a207e54.svg);
+ mask-image: url(../../img/element-icons/call/hangup.a207e54.svg);
+}
+
+.mx_CallEvent .mx_CallEvent_content .mx_CallEvent_content_tooltip {
+ margin-right: 5px;
+}
+
+.mx_CallEvent .mx_CallEvent_content .mx_CallEvent_iconButton {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ margin-right: 8px;
+}
+
+.mx_CallEvent .mx_CallEvent_content .mx_CallEvent_iconButton:before {
+ content: "";
+ height: 16px;
+ width: 16px;
+ background-color: #8d99a5;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+
+.mx_CallEvent .mx_CallEvent_content .mx_CallEvent_silence:before {
+ -webkit-mask-image: url(../../img/voip/silence.08cd2d6.svg);
+ mask-image: url(../../img/voip/silence.08cd2d6.svg);
+}
+
+.mx_CallEvent .mx_CallEvent_content .mx_CallEvent_unSilence:before {
+ -webkit-mask-image: url(../../img/voip/un-silence.cebdd12.svg);
+ mask-image: url(../../img/voip/un-silence.cebdd12.svg);
+}
+
.mx_CreateEvent:before {
background-color: #91a1c0;
-webkit-mask-image: url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);
mask-image: url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);
}
+
.mx_DateSeparator {
clear: both;
margin: 4px 0;
@@ -11618,6 +15386,7 @@ a.mx_Pill {
font-size: 1.4rem;
color: #9e9e9e;
}
+
.mx_DateSeparator > hr {
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
@@ -11626,12 +15395,14 @@ a.mx_Pill {
border: none;
border-bottom: 1px solid transparent;
}
+
.mx_DateSeparator > div {
margin: 0 25px;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
+
.mx_EventTileBubble {
background-color: #f2f5f8;
padding: 10px;
@@ -11644,6 +15415,7 @@ a.mx_Pill {
grid-template-columns: 24px minmax(0, 1fr) -webkit-min-content;
grid-template-columns: 24px minmax(0, 1fr) min-content;
}
+
.mx_EventTileBubble:after,
.mx_EventTileBubble:before {
position: relative;
@@ -11664,30 +15436,37 @@ a.mx_Pill {
mask-size: contain;
margin-top: 4px;
}
+
.mx_EventTileBubble .mx_EventTileBubble_subtitle,
.mx_EventTileBubble .mx_EventTileBubble_title {
overflow-wrap: break-word;
}
+
.mx_EventTileBubble .mx_EventTileBubble_title {
font-weight: 600;
font-size: 1.5rem;
grid-column: 2;
grid-row: 1;
}
+
.mx_EventTileBubble .mx_EventTileBubble_subtitle {
font-size: 1.2rem;
grid-column: 2;
grid-row: 2;
}
+
.mx_MEmoteBody {
white-space: pre-wrap;
}
+
.mx_MEmoteBody_sender {
cursor: pointer;
}
+
.mx_MFileBody_download {
color: #0dbd8b;
}
+
.mx_MFileBody_download .mx_MFileBody_download_icon {
width: 12px;
height: 12px;
@@ -11702,11 +15481,13 @@ a.mx_Pill {
background-color: #0dbd8b;
display: inline-block;
}
+
.mx_MFileBody_download a {
color: #0dbd8b;
text-decoration: none;
cursor: pointer;
}
+
.mx_MFileBody_download object {
margin-left: -16px;
padding-right: 4px;
@@ -11714,6 +15495,7 @@ a.mx_Pill {
vertical-align: middle;
pointer-events: none;
}
+
.mx_MFileBody_download iframe {
margin: 0;
padding: 0;
@@ -11721,15 +15503,9 @@ a.mx_Pill {
width: 100%;
height: 1.5em;
}
-.mx_MFileBody_info {
- background-color: #e3e8f0;
- border-radius: 12px;
- width: 243px;
- padding: 6px 12px;
- color: #737d8c;
-}
+
.mx_MFileBody_info .mx_MFileBody_info_icon {
- background-color: #fff;
+ background-color: #f4f6fa;
border-radius: 20px;
display: inline-block;
width: 32px;
@@ -11738,6 +15514,7 @@ a.mx_Pill {
vertical-align: middle;
margin-right: 12px;
}
+
.mx_MFileBody_info .mx_MFileBody_info_icon:before {
content: "";
-webkit-mask-repeat: no-repeat;
@@ -11746,15 +15523,16 @@ a.mx_Pill {
mask-position: center;
-webkit-mask-size: cover;
mask-size: cover;
- -webkit-mask-image: url(../icons/attach.svg);
- mask-image: url(../icons/attach.svg);
+ -webkit-mask-image: url(../../img/element-icons/room/composer/attach.359c84e.svg);
+ mask-image: url(../../img/element-icons/room/composer/attach.359c84e.svg);
background-color: #737d8c;
- width: 13px;
+ width: 15px;
height: 15px;
position: absolute;
top: 8px;
- left: 9px;
+ left: 8px;
}
+
.mx_MFileBody_info .mx_MFileBody_info_filename {
text-overflow: ellipsis;
overflow: hidden;
@@ -11763,31 +15541,31 @@ a.mx_Pill {
width: calc(100% - 44px);
vertical-align: middle;
}
-.mx_MImageBody {
- display: block;
- margin-right: 34px;
-}
+
.mx_MImageBody_thumbnail {
- position: absolute;
- width: 100%;
- height: 100%;
- left: 0;
- top: 0;
+ -o-object-fit: contain;
+ object-fit: contain;
+ border-radius: 4px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.mx_MImageBody_thumbnail > div > canvas {
border-radius: 4px;
}
+
.mx_MImageBody_thumbnail_container {
overflow: hidden;
position: relative;
}
-.mx_MImageBody_thumbnail_spinner {
- position: absolute;
- left: 50%;
- top: 50%;
-}
-.mx_MImageBody_thumbnail_spinner > * {
- -webkit-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
-}
+
.mx_MImageBody_gifLabel {
position: absolute;
display: block;
@@ -11800,6 +15578,7 @@ a.mx_Pill {
color: #fff;
pointer-events: none;
}
+
.mx_HiddenImagePlaceholder {
position: absolute;
left: 0;
@@ -11819,9 +15598,11 @@ a.mx_Pill {
cursor: pointer;
background-color: #f3f8fd;
}
+
.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button {
color: #0dbd8b;
}
+
.mx_HiddenImagePlaceholder
.mx_HiddenImagePlaceholder_button
span.mx_HiddenImagePlaceholder_eye {
@@ -11833,30 +15614,64 @@ a.mx_Pill {
width: 18px;
height: 14px;
}
+
.mx_HiddenImagePlaceholder
.mx_HiddenImagePlaceholder_button
span:not(.mx_HiddenImagePlaceholder_eye) {
vertical-align: text-bottom;
}
+
.mx_EventTile:hover .mx_HiddenImagePlaceholder {
background-color: #fff;
}
+
+.mx_MImageReplyBody {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+.mx_MImageReplyBody .mx_MImageBody_thumbnail_container {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ margin-right: 4px;
+}
+
+.mx_MImageReplyBody .mx_MImageReplyBody_info {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+}
+
+.mx_MImageReplyBody .mx_MImageReplyBody_info .mx_MImageReplyBody_sender {
+ grid-area: sender;
+}
+
+.mx_MImageReplyBody .mx_MImageReplyBody_info .mx_MImageReplyBody_filename {
+ grid-area: filename;
+}
+
.mx_MJitsiWidgetEvent:before {
background-color: #91a1c0;
-webkit-mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
}
+
.mx_MNoticeBody {
white-space: pre-wrap;
opacity: 0.6;
}
+
.mx_MStickerBody_wrapper {
padding: 20px 0;
}
+
.mx_MStickerBody_tooltip {
position: absolute;
top: 50%;
}
+
.mx_MStickerBody_hidden {
max-width: 220px;
text-decoration: none;
@@ -11871,17 +15686,27 @@ a.mx_Pill {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_MTextBody {
white-space: pre-wrap;
}
+
span.mx_MVideoBody video.mx_MVideoBody {
max-width: 100%;
height: auto;
border-radius: 4px;
}
-.mx_MVoiceMessageBody {
- display: inline-block;
+
+.mx_MediaBody {
+ background-color: #e3e8f0;
+ border-radius: 12px;
+ max-width: 243px;
+ color: #737d8c;
+ font-size: 1.4rem;
+ line-height: 2.4rem;
+ padding: 6px 12px;
}
+
.mx_MessageActionBar {
position: absolute;
visibility: hidden;
@@ -11889,11 +15714,12 @@ span.mx_MVideoBody video.mx_MVideoBody {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
- height: 24px;
+ height: 32px;
line-height: 2.4rem;
- border-radius: 4px;
+ border-radius: 8px;
background: #fff;
- top: -26px;
+ border: 1px solid #e7e7e7;
+ top: -32px;
right: 8px;
-webkit-user-select: none;
-moz-user-select: none;
@@ -11901,6 +15727,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
user-select: none;
z-index: 1;
}
+
.mx_MessageActionBar:before {
content: "";
position: absolute;
@@ -11911,29 +15738,25 @@ span.mx_MVideoBody video.mx_MVideoBody {
z-index: -1;
cursor: auto;
}
+
.mx_MessageActionBar > * {
white-space: nowrap;
display: inline-block;
position: relative;
- border: 1px solid #e9edf1;
- margin-left: -1px;
+ margin: 2px;
}
+
.mx_MessageActionBar > :hover {
- border-color: #ddd;
+ background: rgba(141, 151, 165, 0.2);
+ border-radius: 6px;
z-index: 1;
}
-.mx_MessageActionBar > :first-child {
- border-radius: 3px 0 0 3px;
-}
-.mx_MessageActionBar > :last-child {
- border-radius: 0 3px 3px 0;
-}
-.mx_MessageActionBar > :only-child {
- border-radius: 3px;
-}
+
.mx_MessageActionBar_maskButton {
- width: 27px;
+ width: 28px;
+ height: 28px;
}
+
.mx_MessageActionBar_maskButton:after {
content: "";
position: absolute;
@@ -11947,32 +15770,54 @@ span.mx_MVideoBody video.mx_MVideoBody {
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
+ background-color: #737d8c;
+}
+
+.mx_MessageActionBar_maskButton:hover:after {
background-color: #2e2f32;
}
+
.mx_MessageActionBar_reactButton:after {
-webkit-mask-image: url(../../img/element-icons/room/message-bar/emoji.af14771.svg);
mask-image: url(../../img/element-icons/room/message-bar/emoji.af14771.svg);
}
+
.mx_MessageActionBar_replyButton:after {
-webkit-mask-image: url(../../img/element-icons/room/message-bar/reply.5812741.svg);
mask-image: url(../../img/element-icons/room/message-bar/reply.5812741.svg);
}
+
.mx_MessageActionBar_editButton:after {
-webkit-mask-image: url(../../img/element-icons/room/message-bar/edit.688678e.svg);
mask-image: url(../../img/element-icons/room/message-bar/edit.688678e.svg);
}
+
.mx_MessageActionBar_optionsButton:after {
-webkit-mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
}
+
.mx_MessageActionBar_resendButton:after {
-webkit-mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
}
+
.mx_MessageActionBar_cancelButton:after {
- -webkit-mask-image: url(../../img/element-icons/trashcan.26f6c28.svg);
- mask-image: url(../../img/element-icons/trashcan.26f6c28.svg);
+ -webkit-mask-image: url(../../img/element-icons/trashcan.3b626db.svg);
+ mask-image: url(../../img/element-icons/trashcan.3b626db.svg);
}
+
+.mx_MessageActionBar_downloadButton:after {
+ -webkit-mask-size: 14px;
+ mask-size: 14px;
+ -webkit-mask-image: url(../../img/download.4f331f0.svg);
+ mask-image: url(../../img/download.4f331f0.svg);
+}
+
+.mx_MessageActionBar_downloadButton.mx_MessageActionBar_downloadSpinnerButton:after {
+ background-color: transparent;
+}
+
.mx_MessageTimestamp {
color: #acacac;
font-size: 1rem;
@@ -11980,13 +15825,16 @@ span.mx_MVideoBody video.mx_MVideoBody {
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
+
.mx_MjolnirBody {
opacity: 0.4;
}
+
.mx_ReactionsRow {
margin: 6px 0;
color: #2e2f32;
}
+
.mx_ReactionsRow .mx_ReactionsRow_addReactionButton {
position: relative;
display: inline-block;
@@ -11995,7 +15843,9 @@ span.mx_MVideoBody video.mx_MVideoBody {
height: 24px;
vertical-align: middle;
margin-left: 4px;
+ margin-right: 4px;
}
+
.mx_ReactionsRow .mx_ReactionsRow_addReactionButton:before {
content: "";
position: absolute;
@@ -12011,18 +15861,22 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-image: url(../../img/element-icons/room/message-bar/emoji.af14771.svg);
mask-image: url(../../img/element-icons/room/message-bar/emoji.af14771.svg);
}
+
.mx_ReactionsRow
.mx_ReactionsRow_addReactionButton.mx_ReactionsRow_addReactionButton_active {
visibility: visible;
}
+
.mx_ReactionsRow
.mx_ReactionsRow_addReactionButton.mx_ReactionsRow_addReactionButton_active:before,
.mx_ReactionsRow .mx_ReactionsRow_addReactionButton:hover:before {
background-color: #2e2f32;
}
+
.mx_EventTile:hover .mx_ReactionsRow_addReactionButton {
visibility: visible;
}
+
.mx_ReactionsRow_showAll {
text-decoration: none;
font-size: 1.2rem;
@@ -12030,13 +15884,16 @@ span.mx_MVideoBody video.mx_MVideoBody {
margin-left: 4px;
vertical-align: middle;
}
+
.mx_ReactionsRow_showAll:link,
.mx_ReactionsRow_showAll:visited {
color: #8d99a5;
}
+
.mx_ReactionsRow_showAll:hover {
color: #2e2f32;
}
+
.mx_ReactionsRowButton {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
@@ -12054,16 +15911,20 @@ span.mx_MVideoBody video.mx_MVideoBody {
user-select: none;
vertical-align: middle;
}
+
.mx_ReactionsRowButton:hover {
border-color: #ddd;
}
+
.mx_ReactionsRowButton.mx_ReactionsRowButton_selected {
background-color: #e9fff9;
border-color: #0dbd8b;
}
+
.mx_ReactionsRowButton.mx_AccessibleButton_disabled {
cursor: not-allowed;
}
+
.mx_ReactionsRowButton .mx_ReactionsRowButton_content {
max-width: 100px;
overflow: hidden;
@@ -12071,6 +15932,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
text-overflow: ellipsis;
padding-right: 4px;
}
+
.mx_RedactedBody {
white-space: pre-wrap;
color: #61708b;
@@ -12078,12 +15940,13 @@ span.mx_MVideoBody video.mx_MVideoBody {
padding-left: 20px;
position: relative;
}
+
.mx_RedactedBody:before {
height: 14px;
width: 14px;
background-color: #61708b;
- -webkit-mask-image: url(../icons/trash.svg);
- mask-image: url(../icons/trash.svg);
+ -webkit-mask-image: url(../../img/feather-customised/trash.custom.1e6ecd4.svg);
+ mask-image: url(../../img/feather-customised/trash.custom.1e6ecd4.svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
@@ -12095,25 +15958,43 @@ span.mx_MVideoBody video.mx_MVideoBody {
top: 1px;
left: 0;
}
+
.mx_RoomAvatarEvent {
opacity: 0.5;
overflow-y: hidden;
}
+
.mx_RoomAvatarEvent_avatar {
display: inline;
position: relative;
top: 5px;
}
-.mx_SenderProfile_name {
+
+.mx_SenderProfile_displayName {
font-weight: 600;
}
+
+.mx_SenderProfile_mxid {
+ font-weight: 600;
+ font-size: 1.1rem;
+ margin-left: 5px;
+ opacity: 0.5;
+}
+
.mx_TextualEvent {
opacity: 0.5;
overflow-y: hidden;
}
+
+.mx_TextualEvent a {
+ color: #0dbd8b;
+ cursor: pointer;
+}
+
.mx_UnknownBody {
white-space: pre-wrap;
}
+
.mx_EventTile_content.mx_ViewSourceEvent {
display: -webkit-box;
display: -ms-flexbox;
@@ -12121,16 +16002,19 @@ span.mx_MVideoBody video.mx_MVideoBody {
opacity: 0.6;
font-size: 1.2rem;
}
+
.mx_EventTile_content.mx_ViewSourceEvent code,
.mx_EventTile_content.mx_ViewSourceEvent pre {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
+
.mx_EventTile_content.mx_ViewSourceEvent pre {
line-height: 1.2;
margin: 3.5px 0;
}
+
.mx_EventTile_content.mx_ViewSourceEvent .mx_ViewSourceEvent_toggle {
width: 12px;
-webkit-mask-repeat: no-repeat;
@@ -12144,6 +16028,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-image: url(../../img/feather-customised/maximise.dc32127.svg);
mask-image: url(../../img/feather-customised/maximise.dc32127.svg);
}
+
.mx_EventTile_content.mx_ViewSourceEvent.mx_ViewSourceEvent_expanded
.mx_ViewSourceEvent_toggle {
-webkit-mask-position: 0 bottom;
@@ -12152,41 +16037,49 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-image: url(../../img/feather-customised/minimise.aec9142.svg);
mask-image: url(../../img/feather-customised/minimise.aec9142.svg);
}
+
.mx_EventTile_content.mx_ViewSourceEvent:hover .mx_ViewSourceEvent_toggle {
visibility: visible;
}
+
.mx_cryptoEvent.mx_cryptoEvent_icon:before {
background-color: #fff;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
- -webkit-mask-size: 90%;
- mask-size: 90%;
+ -webkit-mask-size: 80%;
+ mask-size: 80%;
}
+
.mx_cryptoEvent.mx_cryptoEvent_icon:after,
.mx_cryptoEvent.mx_cryptoEvent_icon:before {
-webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
mask-image: url(../../img/e2e/normal.76f0c09.svg);
}
+
.mx_cryptoEvent.mx_cryptoEvent_icon:after {
background-color: #91a1c0;
}
+
.mx_cryptoEvent.mx_cryptoEvent_icon_verified:after {
-webkit-mask-image: url(../../img/e2e/verified.5be6c9f.svg);
mask-image: url(../../img/e2e/verified.5be6c9f.svg);
background-color: #0dbd8b;
}
+
.mx_cryptoEvent.mx_cryptoEvent_icon_warning:after {
-webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
mask-image: url(../../img/e2e/warning.78bb264.svg);
background-color: #ff4b55;
}
+
.mx_cryptoEvent .mx_cryptoEvent_buttons,
.mx_cryptoEvent .mx_cryptoEvent_state {
grid-column: 3;
grid-row: 1/3;
}
+
.mx_cryptoEvent .mx_cryptoEvent_buttons {
-webkit-box-align: center;
-ms-flex-align: center;
@@ -12194,7 +16087,10 @@ span.mx_MVideoBody video.mx_MVideoBody {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
+ grid-gap: 5px;
+ gap: 5px;
}
+
.mx_cryptoEvent .mx_cryptoEvent_state {
width: 130px;
padding: 10px 20px;
@@ -12204,6 +16100,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
overflow-wrap: break-word;
font-size: 1.2rem;
}
+
.mx_BaseCard {
padding: 0 8px;
overflow: hidden;
@@ -12218,9 +16115,11 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex: 1;
flex: 1;
}
+
.mx_BaseCard .mx_BaseCard_header {
margin: 8px 0;
}
+
.mx_BaseCard .mx_BaseCard_header > h2 {
margin: 0 44px;
font-size: 1.8rem;
@@ -12229,6 +16128,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
text-overflow: ellipsis;
white-space: nowrap;
}
+
.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back,
.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close {
position: absolute;
@@ -12239,6 +16139,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
top: 0;
border-radius: 10px;
}
+
.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back:before,
.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close:before {
content: "";
@@ -12253,9 +16154,11 @@ span.mx_MVideoBody video.mx_MVideoBody {
mask-position: center;
background-color: #91a1c0;
}
+
.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back {
left: 0;
}
+
.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back:before {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
@@ -12264,15 +16167,18 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
}
+
.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close {
right: 0;
}
+
.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close:before {
-webkit-mask-image: url(../../img/icons-close.11ff07c.svg);
mask-image: url(../../img/icons-close.11ff07c.svg);
-webkit-mask-size: 8px;
mask-size: 8px;
}
+
.mx_BaseCard .mx_AutoHideScrollbar {
margin-right: -8px;
padding-right: 8px;
@@ -12280,18 +16186,22 @@ span.mx_MVideoBody video.mx_MVideoBody {
width: 100%;
height: 100%;
}
+
.mx_BaseCard .mx_BaseCard_Group {
margin: 20px 0 16px;
}
+
.mx_BaseCard .mx_BaseCard_Group > * {
margin-left: 12px;
margin-right: 12px;
}
+
.mx_BaseCard .mx_BaseCard_Group > h1 {
color: #8d99a5;
font-size: 1.2rem;
font-weight: 500;
}
+
.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button {
padding: 10px 38px 10px 12px;
margin: 0;
@@ -12304,9 +16214,11 @@ span.mx_MVideoBody video.mx_MVideoBody {
white-space: nowrap;
text-overflow: ellipsis;
}
+
.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button:hover {
background-color: rgba(141, 151, 165, 0.1);
}
+
.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button:after {
content: "";
position: absolute;
@@ -12326,16 +16238,19 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
}
+
.mx_BaseCard
.mx_BaseCard_Group
.mx_BaseCard_Button.mx_AccessibleButton_disabled {
padding-right: 12px;
}
+
.mx_BaseCard
.mx_BaseCard_Group
.mx_BaseCard_Button.mx_AccessibleButton_disabled:after {
content: unset;
}
+
.mx_BaseCard .mx_BaseCard_footer {
padding-top: 4px;
text-align: center;
@@ -12345,21 +16260,25 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-pack: distribute;
justify-content: space-around;
}
+
.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_kind_secondary {
color: #737d8c;
background-color: rgba(141, 151, 165, 0.2);
font-weight: 600;
font-size: 1.4rem;
}
+
.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_disabled {
cursor: not-allowed;
}
+
.mx_FilePanel.mx_BaseCard,
.mx_MemberList.mx_BaseCard,
.mx_NotificationPanel.mx_BaseCard,
.mx_UserInfo.mx_BaseCard {
padding: 32px 0 0;
}
+
.mx_FilePanel.mx_BaseCard .mx_AutoHideScrollbar,
.mx_MemberList.mx_BaseCard .mx_AutoHideScrollbar,
.mx_NotificationPanel.mx_BaseCard .mx_AutoHideScrollbar,
@@ -12367,26 +16286,131 @@ span.mx_MVideoBody video.mx_MVideoBody {
margin-right: unset;
padding-right: unset;
}
+
.mx_EncryptionInfo_spinner .mx_Spinner {
margin-top: 25px;
margin-bottom: 15px;
}
+
.mx_EncryptionInfo_spinner {
text-align: center;
}
+
+.mx_PinnedMessagesCard {
+ padding-top: 0;
+}
+
+.mx_PinnedMessagesCard .mx_BaseCard_header {
+ text-align: center;
+ margin-top: 0;
+ border-bottom: 1px solid #e7e7e7;
+}
+
+.mx_PinnedMessagesCard .mx_BaseCard_header > h2 {
+ font-weight: 600;
+ font-size: 1.8rem;
+ margin: 8px 0;
+}
+
+.mx_PinnedMessagesCard .mx_BaseCard_header .mx_BaseCard_close {
+ margin-right: 6px;
+}
+
+.mx_PinnedMessagesCard .mx_PinnedMessagesCard_empty {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ height: 100%;
+}
+
+.mx_PinnedMessagesCard .mx_PinnedMessagesCard_empty > div {
+ height: -webkit-max-content;
+ height: -moz-max-content;
+ height: max-content;
+ text-align: center;
+ margin: auto 40px;
+}
+
+.mx_PinnedMessagesCard
+ .mx_PinnedMessagesCard_empty
+ > div
+ .mx_PinnedMessagesCard_MessageActionBar {
+ pointer-events: none;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ height: 32px;
+ line-height: 2.4rem;
+ border-radius: 8px;
+ background: #fff;
+ border: 1px solid #e7e7e7;
+ padding: 1px;
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+ margin: 0 auto;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+.mx_PinnedMessagesCard
+ .mx_PinnedMessagesCard_empty
+ > div
+ .mx_PinnedMessagesCard_MessageActionBar
+ .mx_MessageActionBar_maskButton {
+ display: inline-block;
+ position: relative;
+}
+
+.mx_PinnedMessagesCard
+ .mx_PinnedMessagesCard_empty
+ > div
+ .mx_PinnedMessagesCard_MessageActionBar
+ .mx_MessageActionBar_optionsButton {
+ background: rgba(141, 151, 165, 0.2);
+ border-radius: 6px;
+ z-index: 1;
+}
+
+.mx_PinnedMessagesCard
+ .mx_PinnedMessagesCard_empty
+ > div
+ .mx_PinnedMessagesCard_MessageActionBar
+ .mx_MessageActionBar_optionsButton:after {
+ background-color: #2e2f32;
+}
+
+.mx_PinnedMessagesCard .mx_PinnedMessagesCard_empty > div > h2 {
+ font-weight: 600;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+ color: #2e2f32;
+ margin-top: 24px;
+ margin-bottom: 20px;
+}
+
+.mx_PinnedMessagesCard .mx_PinnedMessagesCard_empty > div > span {
+ font-size: 1.2rem;
+ line-height: 1.5rem;
+ color: #737d8c;
+}
+
.mx_RoomSummaryCard .mx_BaseCard_header {
text-align: center;
margin-top: 20px;
}
+
.mx_RoomSummaryCard .mx_BaseCard_header h2 {
font-weight: 600;
font-size: 1.8rem;
margin: 12px 0 4px;
}
+
.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_alias {
font-size: 1.3rem;
color: #737d8c;
}
+
.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_alias,
.mx_RoomSummaryCard .mx_BaseCard_header h2 {
display: -webkit-box;
@@ -12394,12 +16418,15 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
+ white-space: pre-wrap;
}
+
.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
+
.mx_RoomSummaryCard
.mx_BaseCard_header
.mx_RoomSummaryCard_avatar
@@ -12414,6 +16441,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
margin-left: -10px;
border: 3px solid #f2f5f8;
}
+
.mx_RoomSummaryCard
.mx_BaseCard_header
.mx_RoomSummaryCard_avatar
@@ -12434,12 +16462,14 @@ span.mx_MVideoBody video.mx_MVideoBody {
mask-image: url(../../img/e2e/disabled.6c5c6be.svg);
background-color: #fff;
}
+
.mx_RoomSummaryCard
.mx_BaseCard_header
.mx_RoomSummaryCard_avatar
.mx_RoomSummaryCard_e2ee_normal {
background-color: #424446;
}
+
.mx_RoomSummaryCard
.mx_BaseCard_header
.mx_RoomSummaryCard_avatar
@@ -12447,12 +16477,14 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
mask-image: url(../../img/e2e/normal.76f0c09.svg);
}
+
.mx_RoomSummaryCard
.mx_BaseCard_header
.mx_RoomSummaryCard_avatar
.mx_RoomSummaryCard_e2ee_verified {
background-color: #0dbd8b;
}
+
.mx_RoomSummaryCard
.mx_BaseCard_header
.mx_RoomSummaryCard_avatar
@@ -12460,12 +16492,14 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-image: url(../../img/e2e/verified.5be6c9f.svg);
mask-image: url(../../img/e2e/verified.5be6c9f.svg);
}
+
.mx_RoomSummaryCard
.mx_BaseCard_header
.mx_RoomSummaryCard_avatar
.mx_RoomSummaryCard_e2ee_warning {
background-color: #ff4b55;
}
+
.mx_RoomSummaryCard
.mx_BaseCard_header
.mx_RoomSummaryCard_avatar
@@ -12473,9 +16507,11 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
mask-image: url(../../img/e2e/warning.78bb264.svg);
}
+
.mx_RoomSummaryCard .mx_RoomSummaryCard_aboutGroup .mx_RoomSummaryCard_Button {
padding-left: 44px;
}
+
.mx_RoomSummaryCard
.mx_RoomSummaryCard_aboutGroup
.mx_RoomSummaryCard_Button:before {
@@ -12491,11 +16527,13 @@ span.mx_MVideoBody video.mx_MVideoBody {
mask-position: center;
background-color: #c1c6cd;
}
+
.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button {
padding: 0;
height: auto;
color: #8d99a5;
}
+
.mx_RoomSummaryCard
.mx_RoomSummaryCard_appsGroup
.mx_RoomSummaryCard_Button
@@ -12504,6 +16542,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
text-overflow: ellipsis;
overflow: hidden;
}
+
.mx_RoomSummaryCard
.mx_RoomSummaryCard_appsGroup
.mx_RoomSummaryCard_Button
@@ -12512,6 +16551,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
vertical-align: top;
margin-right: 12px;
}
+
.mx_RoomSummaryCard
.mx_RoomSummaryCard_appsGroup
.mx_RoomSummaryCard_Button
@@ -12519,6 +16559,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
span {
color: #2e2f32;
}
+
.mx_RoomSummaryCard
.mx_RoomSummaryCard_appsGroup
.mx_RoomSummaryCard_Button
@@ -12536,6 +16577,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
box-sizing: border-box;
min-width: 24px;
}
+
.mx_RoomSummaryCard
.mx_RoomSummaryCard_appsGroup
.mx_RoomSummaryCard_Button
@@ -12553,6 +16595,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
border-radius: 12px;
background-color: rgba(141, 151, 165, 0.1);
}
+
.mx_RoomSummaryCard
.mx_RoomSummaryCard_appsGroup
.mx_RoomSummaryCard_Button
@@ -12573,12 +16616,14 @@ span.mx_MVideoBody video.mx_MVideoBody {
mask-size: 16px;
background-color: #c1c6cd;
}
+
.mx_RoomSummaryCard
.mx_RoomSummaryCard_appsGroup
.mx_RoomSummaryCard_Button
.mx_RoomSummaryCard_app_pinToggle {
right: 24px;
}
+
.mx_RoomSummaryCard
.mx_RoomSummaryCard_appsGroup
.mx_RoomSummaryCard_Button
@@ -12586,6 +16631,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-image: url(../../img/element-icons/room/pin-upright.65783fb.svg);
mask-image: url(../../img/element-icons/room/pin-upright.65783fb.svg);
}
+
.mx_RoomSummaryCard
.mx_RoomSummaryCard_appsGroup
.mx_RoomSummaryCard_Button
@@ -12593,6 +16639,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
right: 48px;
display: none;
}
+
.mx_RoomSummaryCard
.mx_RoomSummaryCard_appsGroup
.mx_RoomSummaryCard_Button
@@ -12600,40 +16647,47 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
}
+
.mx_RoomSummaryCard
.mx_RoomSummaryCard_appsGroup
.mx_RoomSummaryCard_Button.mx_RoomSummaryCard_Button_pinned:after {
opacity: 0.2;
}
+
.mx_RoomSummaryCard
.mx_RoomSummaryCard_appsGroup
.mx_RoomSummaryCard_Button.mx_RoomSummaryCard_Button_pinned
.mx_RoomSummaryCard_app_pinToggle:before {
background-color: #0dbd8b;
}
+
.mx_RoomSummaryCard
.mx_RoomSummaryCard_appsGroup
.mx_RoomSummaryCard_Button:hover
.mx_RoomSummaryCard_icon_app {
padding-right: 72px;
}
+
.mx_RoomSummaryCard
.mx_RoomSummaryCard_appsGroup
.mx_RoomSummaryCard_Button:hover
.mx_RoomSummaryCard_app_options {
display: unset;
}
+
.mx_RoomSummaryCard
.mx_RoomSummaryCard_appsGroup
.mx_RoomSummaryCard_Button:before {
content: unset;
}
+
.mx_RoomSummaryCard
.mx_RoomSummaryCard_appsGroup
.mx_RoomSummaryCard_Button:after {
top: 8px;
pointer-events: none;
}
+
.mx_RoomSummaryCard .mx_AccessibleButton_kind_link {
padding: 0;
margin-top: 12px;
@@ -12641,22 +16695,32 @@ span.mx_MVideoBody video.mx_MVideoBody {
font-size: 1.3rem;
font-weight: 600;
}
+
.mx_RoomSummaryCard_icon_people:before {
-webkit-mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
}
+
.mx_RoomSummaryCard_icon_files:before {
-webkit-mask-image: url(../../img/element-icons/room/files.5709c0c.svg);
mask-image: url(../../img/element-icons/room/files.5709c0c.svg);
}
+
.mx_RoomSummaryCard_icon_share:before {
-webkit-mask-image: url(../../img/element-icons/room/share.54dc3fb.svg);
mask-image: url(../../img/element-icons/room/share.54dc3fb.svg);
}
+
.mx_RoomSummaryCard_icon_settings:before {
-webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
mask-image: url(../../img/element-icons/settings.6b381af.svg);
}
+
+.mx_RoomSummaryCard_icon_export:before {
+ -webkit-mask-image: url(../../img/element-icons/export.57444c5.svg);
+ mask-image: url(../../img/element-icons/export.57444c5.svg);
+}
+
.mx_UserInfo.mx_BaseCard {
padding-top: 0;
display: -webkit-box;
@@ -12672,6 +16736,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
overflow-y: auto;
font-size: 1.2rem;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_cancel {
cursor: pointer;
position: absolute;
@@ -12681,6 +16746,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
margin: 9px;
z-index: 1;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_cancel div {
height: 16px;
width: 16px;
@@ -12693,44 +16759,55 @@ span.mx_MVideoBody video.mx_MVideoBody {
mask-position: 7px center;
background-color: #91a1c0;
}
+
.mx_UserInfo.mx_BaseCard h2 {
font-size: 1.8rem;
font-weight: 600;
margin: 18px 0 0;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_container {
padding: 8px 16px;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_separator {
border-bottom: 1px solid rgba(46, 47, 50, 0.1);
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetailsContainer {
padding-top: 0;
padding-bottom: 0;
margin-bottom: 8px;
}
+
.mx_UserInfo.mx_BaseCard .mx_RoomTile_nameContainer {
width: 154px;
}
+
.mx_UserInfo.mx_BaseCard .mx_RoomTile_badge {
display: none;
}
+
.mx_UserInfo.mx_BaseCard .mx_RoomTile_name {
width: 160px;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar {
margin: 24px 32px 0;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar > div {
max-width: 30vh;
margin: 0 auto;
-webkit-transition: 0.5s;
transition: 0.5s;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar > div > div {
padding-top: 100%;
position: relative;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar > div > div * {
border-radius: 100%;
position: absolute;
@@ -12739,6 +16816,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
width: 100% !important;
height: 100% !important;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar .mx_BaseAvatar_initial {
z-index: 1;
display: -webkit-box;
@@ -12755,12 +16833,14 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-transition: font-size 0.5s;
transition: font-size 0.5s;
}
+
.mx_UserInfo.mx_BaseCard
.mx_UserInfo_avatar
.mx_BaseAvatar.mx_BaseAvatar_image {
cursor: -webkit-zoom-in;
cursor: zoom-in;
}
+
.mx_UserInfo.mx_BaseCard h3 {
text-transform: uppercase;
color: #8d99a5;
@@ -12768,12 +16848,15 @@ span.mx_MVideoBody video.mx_MVideoBody {
font-size: 1.2rem;
margin: 4px 0;
}
+
.mx_UserInfo.mx_BaseCard p {
margin: 5px 0;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile {
text-align: center;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 {
display: -webkit-box;
display: -ms-flexbox;
@@ -12787,6 +16870,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 span {
display: -webkit-box;
-webkit-box-orient: vertical;
@@ -12795,17 +16879,21 @@ span.mx_MVideoBody video.mx_MVideoBody {
word-break: break-all;
text-overflow: ellipsis;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 .mx_E2EIcon {
margin-top: 3px;
margin-right: 4px;
min-width: 18px;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_UserInfo_profileStatus {
margin-top: 12px;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField {
margin: 6px 0;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField,
.mx_UserInfo.mx_BaseCard
.mx_UserInfo_memberDetails
@@ -12821,27 +16909,32 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-align: center;
align-items: center;
}
+
.mx_UserInfo.mx_BaseCard
.mx_UserInfo_memberDetails
.mx_UserInfo_profileField
.mx_UserInfo_roleDescription {
margin: 11px 0 12px;
}
+
.mx_UserInfo.mx_BaseCard
.mx_UserInfo_memberDetails
.mx_UserInfo_profileField
.mx_Field {
margin: 0;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_field {
cursor: pointer;
color: #0dbd8b;
line-height: 1.6rem;
margin: 8px 0;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_field.mx_UserInfo_destructive {
color: #ff4b55;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_statusMessage {
font-size: 1.1rem;
opacity: 0.5;
@@ -12849,38 +16942,45 @@ span.mx_MVideoBody video.mx_MVideoBody {
white-space: nowrap;
text-overflow: clip;
}
+
.mx_UserInfo.mx_BaseCard .mx_AutoHideScrollbar {
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator) {
padding-top: 16px;
padding-bottom: 0;
}
+
.mx_UserInfo.mx_BaseCard
.mx_UserInfo_container:not(.mx_UserInfo_separator)
> :not(h3) {
margin-left: 8px;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 8px 0;
}
+
.mx_UserInfo.mx_BaseCard
.mx_UserInfo_devices
.mx_UserInfo_device.mx_UserInfo_device_verified
.mx_UserInfo_device_trusted {
color: #0dbd8b;
}
+
.mx_UserInfo.mx_BaseCard
.mx_UserInfo_devices
.mx_UserInfo_device.mx_UserInfo_device_unverified
.mx_UserInfo_device_trusted {
color: #ff4b55;
}
+
.mx_UserInfo.mx_BaseCard
.mx_UserInfo_devices
.mx_UserInfo_device
@@ -12891,6 +16991,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
margin-right: 5px;
word-break: break-word;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_E2EIcon {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
@@ -12899,49 +17000,47 @@ span.mx_MVideoBody video.mx_MVideoBody {
width: 12px;
height: 12px;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_expand {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 11px;
}
+
.mx_UserInfo.mx_BaseCard .mx_AccessibleButton.mx_AccessibleButton_hasKind {
padding: 8px 18px;
}
-.mx_UserInfo.mx_BaseCard
- .mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary {
- color: #0dbd8b;
- background-color: rgba(3, 179, 129, 0.16);
-}
-.mx_UserInfo.mx_BaseCard
- .mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger {
- color: #ff4b55;
- background-color: rgba(255, 75, 85, 0.16);
-}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_wideButton,
.mx_UserInfo.mx_BaseCard .mx_VerificationShowSas .mx_AccessibleButton {
display: block;
margin: 16px 0 8px;
}
+
.mx_UserInfo.mx_BaseCard
.mx_VerificationShowSas
.mx_AccessibleButton
+ .mx_AccessibleButton {
margin: 8px 0;
}
+
.mx_UserInfo.mx_UserInfo_smallAvatar .mx_UserInfo_avatar > div {
max-width: 72px;
margin: 0 auto;
}
+
.mx_UserInfo.mx_UserInfo_smallAvatar
.mx_UserInfo_avatar
.mx_BaseAvatar_initial {
font-size: 40px !important;
}
+
.mx_VerificationPanel_reciprocate_section .mx_E2EIcon,
.mx_VerificationPanel_verified_section .mx_E2EIcon {
margin: 20px auto !important;
}
+
.mx_UserInfo .mx_EncryptionPanel_cancel {
-webkit-mask: url(../../img/feather-customised/cancel.23c2689.svg);
mask: url(../../img/feather-customised/cancel.23c2689.svg);
@@ -12960,6 +17059,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
top: 14px;
right: 14px;
}
+
.mx_UserInfo .mx_VerificationPanel_qrCode {
padding: 4px 4px 0;
background: #fff;
@@ -12970,12 +17070,14 @@ span.mx_MVideoBody video.mx_MVideoBody {
max-width: 100%;
margin: 0 auto !important;
}
+
.mx_UserInfo .mx_VerificationPanel_qrCode canvas {
height: auto !important;
width: 100% !important;
max-width: 240px;
}
-.mx_UserInfo .mx_VerificationPanel_reciprocate_section .mx_FormButton {
+
+.mx_UserInfo .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton {
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
@@ -12983,6 +17085,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
display: block;
margin: 10px 0;
}
+
.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions,
.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions {
display: -webkit-box;
@@ -12997,6 +17100,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_CompleteSecurity_body
.mx_VerificationPanel_QRPhase_startOptions
> .mx_VerificationPanel_QRPhase_betweenText,
@@ -13016,6 +17120,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_CompleteSecurity_body
.mx_VerificationPanel_QRPhase_startOptions
.mx_VerificationPanel_QRPhase_startOption,
@@ -13044,6 +17149,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-pack: justify;
justify-content: space-between;
}
+
.mx_CompleteSecurity_body
.mx_VerificationPanel_QRPhase_startOptions
.mx_VerificationPanel_QRPhase_startOption
@@ -13068,6 +17174,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
text-align: center;
padding: 10px;
}
+
.mx_CompleteSecurity_body
.mx_VerificationPanel_QRPhase_startOptions
.mx_VerificationPanel_QRPhase_startOption
@@ -13079,6 +17186,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
margin-top: 0;
font-weight: 700;
}
+
.mx_CompleteSecurity_body
.mx_VerificationPanel_QRPhase_startOptions
.mx_VerificationPanel_QRPhase_startOption
@@ -13091,12 +17199,14 @@ span.mx_MVideoBody video.mx_MVideoBody {
margin: 30px 0;
text-align: center;
}
+
.mx_CompleteSecurity_body
.mx_VerificationPanel_verified_section
.mx_AccessibleButton,
.mx_Dialog .mx_VerificationPanel_verified_section .mx_AccessibleButton {
float: right;
}
+
.mx_CompleteSecurity_body
.mx_VerificationPanel_reciprocate_section
.mx_AccessibleButton,
@@ -13104,6 +17214,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
margin-left: 10px;
padding: 7px 40px;
}
+
.mx_CompleteSecurity_body
.mx_VerificationPanel_reciprocate_section
.mx_VerificationPanel_reciprocateButtons,
@@ -13121,26 +17232,31 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-pack: end;
justify-content: flex-end;
}
+
.mx_WidgetCard {
height: 100%;
display: contents;
}
+
.mx_WidgetCard .mx_AppTileFullWidth {
max-width: unset;
height: 100%;
border: 0;
}
+
.mx_WidgetCard .mx_BaseCard_header {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
+
.mx_WidgetCard .mx_BaseCard_header > h2 {
margin-right: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
+
.mx_WidgetCard .mx_BaseCard_header .mx_WidgetCard_optionsButton {
position: relative;
margin-right: 44px;
@@ -13149,6 +17265,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
min-width: 20px;
padding: 0;
}
+
.mx_WidgetCard .mx_BaseCard_header .mx_WidgetCard_optionsButton:before {
content: "";
position: absolute;
@@ -13166,34 +17283,41 @@ span.mx_MVideoBody video.mx_MVideoBody {
mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
background-color: #737d8c;
}
+
.mx_WidgetCard_maxPinnedTooltip {
background-color: #ff4b55;
color: #fff;
}
+
.mx_AliasSettings_editable {
border: 0;
border-bottom: 1px solid #c7c7c7;
padding: 0;
min-width: 240px;
}
+
.mx_AliasSettings_editable:focus {
border-bottom: 1px solid #0dbd8b;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
+
.mx_AliasSettings summary {
cursor: pointer;
color: #0dbd8b;
font-weight: 600;
list-style: none;
}
+
.mx_AliasSettings summary::-webkit-details-marker {
display: none;
}
+
.mx_AliasSettings .mx_AliasSettings_localAliasHeader {
margin-top: 35px;
}
+
.mx_AppsDrawer {
margin: 5px 5px 5px 18px;
position: relative;
@@ -13206,6 +17330,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
flex-direction: column;
overflow: hidden;
}
+
.mx_AppsDrawer .mx_AppsContainer_resizerHandleContainer {
width: 100%;
height: 10px;
@@ -13213,6 +17338,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
display: block;
position: relative;
}
+
.mx_AppsDrawer .mx_AppsContainer_resizerHandle {
cursor: ns-resize;
width: 100% !important;
@@ -13220,6 +17346,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
position: absolute;
bottom: 0 !important;
}
+
.mx_AppsDrawer .mx_AppsContainer_resizerHandle:after {
content: "";
position: absolute;
@@ -13229,10 +17356,12 @@ span.mx_MVideoBody video.mx_MVideoBody {
left: calc(50% - 32px);
right: calc(50% - 32px);
}
+
.mx_AppsDrawer:hover .mx_AppsContainer_resizerHandle:after {
opacity: 0.8;
background: #2e2f32;
}
+
.mx_AppsDrawer:hover .mx_ResizeHandle_horizontal:before {
position: absolute;
left: 3px;
@@ -13246,9 +17375,11 @@ span.mx_MVideoBody video.mx_MVideoBody {
background-color: #2e2f32;
opacity: 0.8;
}
+
.mx_AppsContainer_resizer {
margin-bottom: 8px;
}
+
.mx_AppsContainer {
display: -webkit-box;
display: -ms-flexbox;
@@ -13270,23 +17401,29 @@ span.mx_MVideoBody video.mx_MVideoBody {
flex: 1;
min-height: 0;
}
+
.mx_AppsContainer .mx_AppTile:first-of-type {
border-left-width: 8px;
border-radius: 10px 0 0 10px;
}
+
.mx_AppsContainer .mx_AppTile:last-of-type {
border-right-width: 8px;
border-radius: 0 10px 10px 0;
}
+
.mx_AppsContainer .mx_ResizeHandle_horizontal {
position: relative;
}
+
.mx_AppsContainer .mx_ResizeHandle_horizontal > div {
width: 0;
}
+
.mx_AppsDrawer_2apps .mx_AppTile {
width: 50%;
}
+
.mx_AppsDrawer_2apps .mx_AppTile:nth-child(3) {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
@@ -13294,9 +17431,11 @@ span.mx_MVideoBody video.mx_MVideoBody {
width: 0 !important;
min-width: 240px !important;
}
+
.mx_AppsDrawer_3apps .mx_AppTile {
width: 33%;
}
+
.mx_AppsDrawer_3apps .mx_AppTile:nth-child(3) {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
@@ -13304,6 +17443,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
width: 0 !important;
min-width: 240px !important;
}
+
.mx_AppTile {
width: 50%;
min-width: 240px;
@@ -13321,12 +17461,14 @@ span.mx_MVideoBody video.mx_MVideoBody {
box-sizing: border-box;
background-color: #f2f5f8;
}
+
.mx_AppTileFullWidth {
width: 100% !important;
border: 5px solid #f2f5f8;
border-radius: 8px;
background-color: #f2f5f8;
}
+
.mx_AppTile_mini,
.mx_AppTileFullWidth {
margin: 0;
@@ -13339,10 +17481,12 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-direction: column;
flex-direction: column;
}
+
.mx_AppTile_mini {
width: 100%;
height: 200px;
}
+
.mx_AppTile .mx_AppTile_persistedWrapper,
.mx_AppTile_mini .mx_AppTile_persistedWrapper,
.mx_AppTileFullWidth .mx_AppTile_persistedWrapper {
@@ -13350,10 +17494,12 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex: 1;
flex: 1;
}
+
.mx_AppTile_persistedWrapper div {
width: 100%;
height: 100%;
}
+
.mx_AppTileMenuBar {
margin: 0;
font-size: 1.2rem;
@@ -13375,18 +17521,22 @@ span.mx_MVideoBody video.mx_MVideoBody {
padding-top: 2px;
padding-bottom: 8px;
}
+
.mx_AppTileMenuBarTitle {
line-height: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
+
.mx_AppTileMenuBarTitle .mx_WidgetAvatar {
margin-right: 12px;
}
+
.mx_AppTileMenuBarTitle > :last-child {
margin-left: 9px;
}
+
.mx_AppTileMenuBarWidgets {
float: right;
display: -webkit-box;
@@ -13400,6 +17550,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-align: center;
align-items: center;
}
+
.mx_AppTileMenuBar_iconButton {
width: 12px;
height: 12px;
@@ -13412,27 +17563,33 @@ span.mx_MVideoBody video.mx_MVideoBody {
background-color: #212121;
margin: 0 3px;
}
+
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout {
-webkit-mask-image: url(../../img/feather-customised/widget/external-link.7ab6751.svg);
mask-image: url(../../img/feather-customised/widget/external-link.7ab6751.svg);
}
+
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_menu {
-webkit-mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
}
+
.mx_AppTileBody {
height: 100%;
background-color: #fff;
}
+
.mx_AppTileBody,
.mx_AppTileBody_mini {
width: 100%;
overflow: hidden;
border-radius: 8px;
}
+
.mx_AppTileBody_mini {
height: 200px;
}
+
.mx_AppTile .mx_AppTileBody,
.mx_AppTile_mini .mx_AppTileBody_mini,
.mx_AppTileFullWidth .mx_AppTileBody {
@@ -13441,18 +17598,21 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex: 1;
flex: 1;
}
+
.mx_AppTileBody_mini iframe,
.mx_AppTileBody iframe {
border: none;
width: 100%;
height: 100%;
}
+
.mx_AppTileBody iframe {
overflow: hidden;
padding: 0;
margin: 0;
display: block;
}
+
.mx_AppPermissionWarning {
text-align: center;
display: -webkit-box;
@@ -13471,19 +17631,24 @@ span.mx_MVideoBody video.mx_MVideoBody {
align-items: center;
font-size: 1.6rem;
}
+
.mx_AppPermissionWarning_row {
margin-bottom: 12px;
}
+
.mx_AppPermissionWarning_smallText {
font-size: 1.2rem;
}
+
.mx_AppPermissionWarning_bolder {
font-weight: 600;
}
+
.mx_AppPermissionWarning h4 {
margin: 0;
padding: 0;
}
+
.mx_AppPermissionWarning_helpIcon {
margin-top: 1px;
margin-right: 2px;
@@ -13491,6 +17656,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
height: 10px;
display: inline-block;
}
+
.mx_AppPermissionWarning_helpIcon:before {
display: inline-block;
background-color: #0dbd8b;
@@ -13507,6 +17673,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-image: url(../../img/feather-customised/help-circle.03fb6cf.svg);
mask-image: url(../../img/feather-customised/help-circle.03fb6cf.svg);
}
+
.mx_AppPermissionWarning_tooltip {
-webkit-box-shadow: none;
box-shadow: none;
@@ -13516,11 +17683,13 @@ span.mx_MVideoBody video.mx_MVideoBody {
border-radius: 3px;
padding: 6px 8px;
}
+
.mx_AppPermissionWarning_tooltip ul {
list-style-position: inside;
padding-left: 2px;
margin-left: 0;
}
+
.mx_AppLoading {
display: -webkit-box;
display: -ms-flexbox;
@@ -13541,6 +17710,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
background-color: #fff !important;
border-radius: 8px;
}
+
.mx_AppLoading .mx_Spinner {
position: absolute;
top: 0;
@@ -13548,6 +17718,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
left: 0;
right: 0;
}
+
.mx_AppLoading_spinner_fadeIn {
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
@@ -13558,6 +17729,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-animation-name: mx_AppLoading_spinner_fadeIn_animation;
animation-name: mx_AppLoading_spinner_fadeIn_animation;
}
+
@-webkit-keyframes mx_AppLoading_spinner_fadeIn_animation {
0% {
opacity: 0;
@@ -13566,6 +17738,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
opacity: 1;
}
}
+
@keyframes mx_AppLoading_spinner_fadeIn_animation {
0% {
opacity: 0;
@@ -13574,12 +17747,15 @@ span.mx_MVideoBody video.mx_MVideoBody {
opacity: 1;
}
}
+
.mx_AppLoading iframe {
display: none;
}
+
.mx_AppsDrawer_resizing .mx_AppTile_persistedWrapper {
z-index: 1;
}
+
.mx_Autocomplete {
position: absolute;
bottom: 0;
@@ -13594,9 +17770,11 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-box-shadow: 0 -16px 32px rgba(0, 0, 0, 0.04);
box-shadow: 0 -16px 32px rgba(0, 0, 0, 0.04);
}
+
.mx_Autocomplete_ProviderSection {
border-bottom: 1px solid transparent;
}
+
.mx_Autocomplete_Completion_block {
height: 34px;
display: -webkit-box;
@@ -13613,9 +17791,11 @@ span.mx_MVideoBody video.mx_MVideoBody {
align-items: center;
color: #2e2f32;
}
+
.mx_Autocomplete_Completion_block * {
margin: 0 3px;
}
+
.mx_Autocomplete_Completion_pill {
-webkit-box-sizing: border-box;
box-sizing: border-box;
@@ -13635,18 +17815,22 @@ span.mx_MVideoBody video.mx_MVideoBody {
align-items: center;
color: #2e2f32;
}
+
.mx_Autocomplete_Completion_pill > * {
margin-right: 0.3rem;
}
+
.mx_Autocomplete_Completion_subtitle {
font-style: italic;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
+
.mx_Autocomplete_Completion_description {
color: grey;
}
+
.mx_Autocomplete_Completion_container_pill {
margin: 12px;
display: -webkit-box;
@@ -13655,6 +17839,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-flow: wrap;
flex-flow: wrap;
}
+
.mx_Autocomplete_Completion_container_truncate
.mx_Autocomplete_Completion_description,
.mx_Autocomplete_Completion_container_truncate
@@ -13666,47 +17851,58 @@ span.mx_MVideoBody video.mx_MVideoBody {
overflow: hidden;
text-overflow: ellipsis;
}
+
.mx_Autocomplete_Completion.selected,
.mx_Autocomplete_Completion:hover {
background: #f2f5f8;
outline: none;
}
+
.mx_Autocomplete_provider_name {
margin: 12px;
color: #2e2f32;
font-weight: 400;
opacity: 0.4;
}
+
.m_RoomView_auxPanel_stateViews {
padding: 5px 5px 5px 19px;
border-bottom: 1px solid transparent;
}
+
.m_RoomView_auxPanel_stateViews_span a {
text-decoration: none;
color: inherit;
}
+
.m_RoomView_auxPanel_stateViews_span[data-severity="warning"] {
font-weight: 700;
color: orange;
}
+
.m_RoomView_auxPanel_stateViews_span[data-severity="alert"] {
font-weight: 700;
color: red;
}
+
.m_RoomView_auxPanel_stateViews_span[data-severity="normal"] {
font-weight: 400;
}
+
.m_RoomView_auxPanel_stateViews_span[data-severity="notice"] {
font-weight: 400;
color: #a2a2a2;
}
+
.m_RoomView_auxPanel_stateViews_delim {
padding: 0 5px;
color: #a2a2a2;
}
+
.mx_BasicMessageComposer {
position: relative;
}
+
.mx_BasicMessageComposer
.mx_BasicMessageComposer_inputEmpty
> :first-child:before {
@@ -13719,6 +17915,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
pointer-events: none;
white-space: nowrap;
}
+
@-webkit-keyframes visualbell {
0% {
background-color: #faa;
@@ -13727,16 +17924,19 @@ span.mx_MVideoBody video.mx_MVideoBody {
background-color: #fff;
}
}
+
.mx_BasicMessageComposer.mx_BasicMessageComposer_input_error {
-webkit-animation: visualbell 0.2s;
animation: visualbell 0.2s;
}
+
.mx_BasicMessageComposer .mx_BasicMessageComposer_input {
white-space: pre-wrap;
word-wrap: break-word;
outline: none;
overflow-x: hidden;
}
+
.mx_BasicMessageComposer
.mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar
span.mx_RoomPill,
@@ -13745,6 +17945,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
span.mx_UserPill {
position: relative;
}
+
.mx_BasicMessageComposer
.mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar
span.mx_RoomPill:before,
@@ -13765,14 +17966,17 @@ span.mx_MVideoBody video.mx_MVideoBody {
line-height: 1.6rem;
font-size: 1.04rem;
}
+
.mx_BasicMessageComposer
.mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_disabled {
pointer-events: none;
}
+
.mx_BasicMessageComposer .mx_BasicMessageComposer_AutoCompleteWrapper {
position: relative;
height: 0;
}
+
.mx_E2EIcon {
width: 16px;
height: 16px;
@@ -13780,6 +17984,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
position: relative;
display: block;
}
+
.mx_E2EIcon_normal:after,
.mx_E2EIcon_normal:before,
.mx_E2EIcon_verified:after,
@@ -13800,51 +18005,61 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-size: contain;
mask-size: contain;
}
+
.mx_E2EIcon:before {
background-color: #fff;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
- -webkit-mask-size: 90%;
- mask-size: 90%;
+ -webkit-mask-size: 80%;
+ mask-size: 80%;
}
+
.mx_E2EIcon:before,
.mx_E2EIcon_bordered {
-webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
mask-image: url(../../img/e2e/normal.76f0c09.svg);
}
+
.mx_E2EIcon_bordered {
background-color: #f3f8fd;
}
+
.mx_E2EIcon_bordered:after {
-webkit-mask-size: 75%;
mask-size: 75%;
}
+
.mx_E2EIcon_bordered:before {
- -webkit-mask-size: 65%;
- mask-size: 65%;
+ -webkit-mask-size: 60%;
+ mask-size: 60%;
}
+
.mx_E2EIcon_warning:after {
-webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
mask-image: url(../../img/e2e/warning.78bb264.svg);
background-color: #ff4b55;
}
+
.mx_E2EIcon_normal:after {
-webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
mask-image: url(../../img/e2e/normal.76f0c09.svg);
background-color: #91a1c0;
}
+
.mx_E2EIcon_verified:after {
-webkit-mask-image: url(../../img/e2e/verified.5be6c9f.svg);
mask-image: url(../../img/e2e/verified.5be6c9f.svg);
background-color: #0dbd8b;
}
+
.mx_EditMessageComposer {
padding: 3px;
margin: -7px -10px -5px;
overflow: visible !important;
}
+
.mx_EditMessageComposer .mx_BasicMessageComposer_input {
border-radius: 4px;
border: 1px solid transparent;
@@ -13852,9 +18067,11 @@ span.mx_MVideoBody video.mx_MVideoBody {
max-height: 200px;
padding: 3px 6px;
}
+
.mx_EditMessageComposer .mx_BasicMessageComposer_input:focus {
border-color: rgba(13, 189, 139, 0.5);
}
+
.mx_EditMessageComposer .mx_EditMessageComposer_buttons {
display: -webkit-box;
display: -ms-flexbox;
@@ -13874,14 +18091,17 @@ span.mx_MVideoBody video.mx_MVideoBody {
margin: 0 -110px 0 0;
padding: 5px 147px 5px 5px;
}
+
.mx_EditMessageComposer .mx_EditMessageComposer_buttons .mx_AccessibleButton {
margin-left: 5px;
padding: 5px 40px;
}
+
.mx_EventTile_last .mx_EditMessageComposer_buttons {
position: static;
margin-right: -147px;
}
+
.mx_EntityTile {
display: -webkit-box;
display: -ms-flexbox;
@@ -13892,16 +18112,19 @@ span.mx_MVideoBody video.mx_MVideoBody {
color: #2e2f32;
cursor: pointer;
}
+
.mx_EntityTile .mx_E2EIcon {
margin: 0;
position: absolute;
bottom: 2px;
right: 7px;
}
+
.mx_EntityTile:hover {
padding-right: 30px;
position: relative;
}
+
.mx_EntityTile:hover:before {
content: "";
position: absolute;
@@ -13915,23 +18138,28 @@ span.mx_MVideoBody video.mx_MVideoBody {
height: 16px;
background-color: #91a1c0;
}
+
.mx_EntityTile .mx_PresenceLabel {
display: none;
}
+
.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_PresenceLabel {
display: block;
}
+
.mx_EntityTile_invite {
display: table-cell;
vertical-align: middle;
margin-left: 10px;
width: 26px;
}
+
.mx_EntityTile_avatar,
.mx_GroupRoomTile_avatar {
padding: 4px 12px 4px 3px;
position: relative;
}
+
.mx_EntityTile_name,
.mx_GroupRoomTile_name {
-webkit-box-flex: 1;
@@ -13942,29 +18170,34 @@ span.mx_MVideoBody video.mx_MVideoBody {
text-overflow: ellipsis;
white-space: nowrap;
}
+
.mx_EntityTile_details {
overflow: hidden;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
+
.mx_EntityTile_ellipsis .mx_EntityTile_name,
.mx_EntityTile_invitePlaceholder .mx_EntityTile_name {
font-style: italic;
color: #2e2f32;
}
+
.mx_EntityTile_offline_beenactive .mx_EntityTile_avatar,
.mx_EntityTile_offline_beenactive .mx_EntityTile_name,
.mx_EntityTile_unavailable .mx_EntityTile_avatar,
.mx_EntityTile_unavailable .mx_EntityTile_name {
opacity: 0.5;
}
+
.mx_EntityTile_offline_neveractive .mx_EntityTile_avatar,
.mx_EntityTile_offline_neveractive .mx_EntityTile_name,
.mx_EntityTile_unknown .mx_EntityTile_avatar,
.mx_EntityTile_unknown .mx_EntityTile_name {
opacity: 0.25;
}
+
.mx_EntityTile_subtext {
font-size: 1.1rem;
opacity: 0.5;
@@ -13972,6 +18205,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
white-space: nowrap;
text-overflow: clip;
}
+
.mx_EntityTile_power {
-webkit-padding-start: 6px;
padding-inline-start: 6px;
@@ -13982,20 +18216,420 @@ span.mx_MVideoBody video.mx_MVideoBody {
text-overflow: ellipsis;
white-space: nowrap;
}
+
.mx_EntityTile:hover .mx_EntityTile_power {
display: none;
}
-.mx_EventTile {
+
+.mx_EventTile[data-layout="bubble"],
+.mx_EventTile[data-layout="bubble"] ~ .mx_EventListSummary {
+ --avatarSize: 32px;
+ --gutterSize: 11px;
+ --cornerRadius: 12px;
+ --maxWidth: 70%;
+}
+
+.mx_EventTile[data-layout="bubble"] {
+ position: relative;
+ margin-top: var(--gutterSize);
+ margin-left: 50px;
+ margin-right: 100px;
+}
+
+.mx_EventTile[data-layout="bubble"].mx_EventTile_continuation {
+ margin-top: 2px;
+}
+
+.mx_EventTile[data-layout="bubble"] .mx_EventTile {
+ padding-top: 0;
+}
+
+.mx_EventTile[data-layout="bubble"].mx_EventTile_selected:before,
+.mx_EventTile[data-layout="bubble"]:hover:before {
+ content: "";
+ position: absolute;
+ top: -1px;
+ bottom: -1px;
+ left: -60px;
+ right: -60px;
+ z-index: -1;
+ background: #fefcf5;
+ border-radius: 4px;
+}
+
+.mx_EventTile[data-layout="bubble"].mx_EventTile_selected
+ .mx_EventTile_avatar
+ img,
+.mx_EventTile[data-layout="bubble"]:hover .mx_EventTile_avatar img {
+ -webkit-box-shadow: 0 0 0 3px #fefcf5;
+ box-shadow: 0 0 0 3px #fefcf5;
+}
+
+.mx_EventTile[data-layout="bubble"] .mx_EventTile_line,
+.mx_EventTile[data-layout="bubble"] .mx_SenderProfile {
+ width: -webkit-fit-content;
+ width: -moz-fit-content;
+ width: fit-content;
+ max-width: 70%;
+}
+
+.mx_EventTile[data-layout="bubble"] .mx_SenderProfile {
+ position: relative;
+ top: -2px;
+ left: 2px;
+}
+
+.mx_EventTile[data-layout="bubble"][data-self="false"] .mx_EventTile_line {
+ border-bottom-right-radius: var(--cornerRadius);
+}
+
+.mx_EventTile[data-layout="bubble"][data-self="false"] .mx_EventTile_avatar {
+ left: -34px;
+}
+
+.mx_EventTile[data-layout="bubble"][data-self="false"] .mx_MessageActionBar {
+ right: 0;
+ -webkit-transform: translate3d(90%, 50%, 0);
+ transform: translate3d(90%, 50%, 0);
+}
+
+.mx_EventTile[data-layout="bubble"][data-self="false"] {
+ --backgroundColor: #f7f8f9;
+}
+
+.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line {
+ border-bottom-left-radius: var(--cornerRadius);
+ float: right;
+}
+
+.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line > a {
+ left: auto;
+ right: -68px;
+}
+
+.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_SenderProfile {
+ display: none;
+}
+
+.mx_EventTile[data-layout="bubble"][data-self="true"]
+ .mx_ReplyTile
+ .mx_SenderProfile {
+ display: block;
+}
+
+.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_ReactionsRow {
+ float: right;
+ clear: right;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+.mx_EventTile[data-layout="bubble"][data-self="true"]
+ .mx_ReactionsRow
+ > :last-child {
+ -webkit-box-ordinal-group: 0;
+ -ms-flex-order: -1;
+ order: -1;
+}
+
+.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_avatar {
+ top: -19px;
+ right: -35px;
+}
+
+.mx_EventTile[data-layout="bubble"][data-self="true"] {
+ --backgroundColor: #f8fdfc;
+}
+
+.mx_EventTile[data-layout="bubble"] .mx_EventTile_line {
+ position: relative;
+ padding: var(--gutterSize);
+ border-top-left-radius: var(--cornerRadius);
+ border-top-right-radius: var(--cornerRadius);
+ background: var(--backgroundColor);
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ grid-gap: 5px;
+ gap: 5px;
+ margin: 0 -12px 0 -9px;
+}
+
+.mx_EventTile[data-layout="bubble"] .mx_EventTile_line > a {
+ position: absolute;
+ padding: 10px 20px;
+ top: 0;
+ left: -68px;
+}
+
+.mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="false"]
+ .mx_EventTile_line {
+ border-top-left-radius: 0;
+}
+
+.mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="false"]
+ .mx_EventTile_line {
+ border-bottom-left-radius: var(--cornerRadius);
+}
+
+.mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="true"]
+ .mx_EventTile_line {
+ border-top-right-radius: 0;
+}
+
+.mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="true"]
+ .mx_EventTile_line {
+ border-bottom-right-radius: var(--cornerRadius);
+}
+
+.mx_EventTile[data-layout="bubble"] .mx_EventTile_avatar {
+ position: absolute;
+ top: 0;
+}
+
+.mx_EventTile[data-layout="bubble"] .mx_EventTile_avatar img {
+ -webkit-box-shadow: 0 0 0 3px #fff;
+ box-shadow: 0 0 0 3px #fff;
+ border-radius: 50%;
+}
+
+.mx_EventTile[data-layout="bubble"] .mx_BaseAvatar,
+.mx_EventTile[data-layout="bubble"] .mx_EventTile_avatar {
+ line-height: 1;
+}
+
+.mx_EventTile[data-layout="bubble"][data-has-reply="true"]
+ > .mx_EventTile_line {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+
+.mx_EventTile[data-layout="bubble"][data-has-reply="true"]
+ .mx_ReplyThread_show {
+ -webkit-box-ordinal-group: 100000;
+ -ms-flex-order: 99999;
+ order: 99999;
+}
+
+.mx_EventTile[data-layout="bubble"][data-has-reply="true"] .mx_ReplyThread {
+ margin: 0 calc(var(--gutterSize) * -1);
+}
+
+.mx_EventTile[data-layout="bubble"][data-has-reply="true"]
+ .mx_ReplyThread
+ .mx_EventTile_reply {
+ max-width: 90%;
+ padding: 0;
+}
+
+.mx_EventTile[data-layout="bubble"][data-has-reply="true"]
+ .mx_ReplyThread
+ .mx_EventTile_reply
+ > a {
+ display: none !important;
+}
+
+.mx_EventTile[data-layout="bubble"][data-has-reply="true"]
+ .mx_ReplyThread
+ .mx_EventTile {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ grid-gap: var(--gutterSize);
+ gap: var(--gutterSize);
+}
+
+.mx_EventTile[data-layout="bubble"][data-has-reply="true"]
+ .mx_ReplyThread
+ .mx_EventTile
+ .mx_EventTile_avatar {
+ position: static;
+}
+
+.mx_EventTile[data-layout="bubble"][data-has-reply="true"]
+ .mx_ReplyThread
+ .mx_EventTile
+ .mx_SenderProfile {
+ display: none;
+}
+
+.mx_EventTile[data-layout="bubble"] .mx_EditMessageComposer_buttons {
+ position: static;
+ padding: 0;
+ margin: 0;
+ background: transparent;
+}
+
+.mx_EventTile[data-layout="bubble"] .mx_ReactionsRow {
+ margin-right: -18px;
+ margin-left: -9px;
+}
+
+.mx_EventTile[data-layout="bubble"] .mx_ReplyThread {
+ border-left-width: 2px;
+ border-left-color: #c1c6cd;
+}
+
+.mx_EventTile[data-layout="bubble"].mx_EventTile_bubbleContainer,
+.mx_EventTile[data-layout="bubble"].mx_EventTile_info,
+.mx_EventTile[data-layout="bubble"]
+ ~ .mx_EventListSummary[data-expanded="false"] {
+ --backgroundColor: transparent;
+ --gutterSize: 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ padding: 5px 0;
+}
+
+.mx_EventTile[data-layout="bubble"].mx_EventTile_bubbleContainer
+ .mx_EventTile_avatar,
+.mx_EventTile[data-layout="bubble"].mx_EventTile_info .mx_EventTile_avatar,
+.mx_EventTile[data-layout="bubble"]
+ ~ .mx_EventListSummary[data-expanded="false"]
+ .mx_EventTile_avatar {
+ position: static;
+ -webkit-box-ordinal-group: 0;
+ -ms-flex-order: -1;
+ order: -1;
+ margin-right: 5px;
+}
+
+.mx_EventTile[data-layout="bubble"] ~ .mx_EventListSummary {
+ --maxWidth: 80%;
+ margin-left: calc(var(--avatarSize) + var(--gutterSize));
+ margin-right: calc(var(--gutterSize) + var(--avatarSize));
+}
+
+.mx_EventTile[data-layout="bubble"]
+ ~ .mx_EventListSummary
+ .mx_EventListSummary_toggle {
+ float: none;
+ -webkit-box-ordinal-group: 10;
+ -ms-flex-order: 9;
+ order: 9;
+ margin: 0 0 0 5px;
+}
+
+.mx_EventTile[data-layout="bubble"]
+ ~ .mx_EventListSummary
+ .mx_EventListSummary_avatars {
+ padding-top: 0;
+}
+
+.mx_EventTile[data-layout="bubble"] ~ .mx_EventListSummary:after {
+ content: "";
+ clear: both;
+}
+
+.mx_EventTile[data-layout="bubble"] ~ .mx_EventListSummary .mx_EventTile {
+ margin: 0 6px;
+}
+
+.mx_EventTile[data-layout="bubble"] ~ .mx_EventListSummary .mx_EventTile_line {
+ margin: 0 5px;
+}
+
+.mx_EventTile[data-layout="bubble"]
+ ~ .mx_EventListSummary
+ .mx_EventTile_line
+ > a {
+ left: auto;
+ right: 0;
+ -webkit-transform: translateX(calc(100% + 5px));
+ transform: translateX(calc(100% + 5px));
+}
+
+.mx_EventTile[data-layout="bubble"]
+ ~ .mx_EventListSummary
+ .mx_MessageActionBar {
+ -webkit-transform: translate3d(90%, 0, 0);
+ transform: translate3d(90%, 0, 0);
+}
+
+.mx_EventTile[data-layout="bubble"]
+ ~ .mx_EventListSummary[data-expanded="false"] {
+ padding: 0 34px;
+}
+
+.mx_EventTile[data-layout="bubble"].mx_EventTile_bad .mx_EventTile_line,
+.mx_EventTile[data-layout="bubble"].mx_EventTile_bad:hover:before,
+.mx_EventTile[data-layout="bubble"] ~ .mx_EventListSummary .mx_EventTile_line,
+.mx_EventTile[data-layout="bubble"] ~ .mx_EventListSummary:hover:before {
+ background: transparent;
+}
+
+.mx_EventTile[data-layout="bubble"] + .mx_EventListSummary .mx_EventTile {
+ margin-top: 0;
+ padding: 2px 0;
+}
+
+.mx_EventTile[data-layout="bubble"] .mx_EventListSummary_toggle {
+ margin-right: 55px;
+}
+
+.mx_EventTile[data-layout="bubble"].mx_EventTile_bad > .mx_EventTile_line {
+ display: grid;
+ grid-template: "reply reply" auto "shield body" auto "shield link" auto/auto 1fr;
+}
+
+.mx_EventTile[data-layout="bubble"].mx_EventTile_bad
+ > .mx_EventTile_line
+ .mx_EventTile_e2eIcon {
+ grid-area: shield;
+}
+
+.mx_EventTile[data-layout="bubble"].mx_EventTile_bad
+ > .mx_EventTile_line
+ .mx_UnknownBody {
+ grid-area: body;
+}
+
+.mx_EventTile[data-layout="bubble"].mx_EventTile_bad
+ > .mx_EventTile_line
+ .mx_EventTile_keyRequestInfo {
+ grid-area: link;
+}
+
+.mx_EventTile[data-layout="bubble"].mx_EventTile_bad
+ > .mx_EventTile_line
+ .mx_ReplyThread_wrapper {
+ grid-area: reply;
+}
+
+.mx_EventTile[data-layout="bubble"] .mx_EventTile_readAvatars {
+ position: absolute;
+ right: -110px;
+ bottom: 0;
+ top: auto;
+}
+
+.mx_EventTile[data-layout="bubble"] .mx_MTextBody {
+ max-width: 100%;
+}
+
+.mx_EventTile:not([data-layout="bubble"]) {
max-width: 100%;
clear: both;
padding-top: 18px;
font-size: 1.4rem;
position: relative;
}
-.mx_EventTile.mx_EventTile_info {
+
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_info {
padding-top: 1px;
}
-.mx_EventTile_avatar {
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_avatar {
top: 14px;
left: 8px;
cursor: pointer;
@@ -14004,21 +18638,27 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-user-select: none;
user-select: none;
}
-.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
+
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_info
+ .mx_EventTile_avatar {
top: 0.6rem;
left: 64px;
}
-.mx_EventTile_continuation {
+
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_continuation {
padding-top: 0 !important;
}
-.mx_EventTile_continuation.mx_EventTile_isEditing {
+
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_continuation.mx_EventTile_isEditing {
padding-top: 5px !important;
margin-top: -5px;
}
-.mx_EventTile_isEditing {
+
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_isEditing {
background-color: #f3f8fd;
}
-.mx_EventTile .mx_SenderProfile {
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_SenderProfile {
color: #2e2f32;
font-size: 1.4rem;
display: inline-block;
@@ -14031,7 +18671,8 @@ span.mx_MVideoBody video.mx_MVideoBody {
text-overflow: ellipsis;
max-width: calc(100% - 64px);
}
-.mx_EventTile .mx_SenderProfile .mx_Flair {
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_SenderProfile .mx_Flair {
opacity: 0.7;
margin-left: 5px;
display: inline-block;
@@ -14042,17 +18683,20 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-user-select: none;
user-select: none;
}
-.mx_EventTile .mx_SenderProfile .mx_Flair img {
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_SenderProfile .mx_Flair img {
vertical-align: -2px;
margin-right: 2px;
border-radius: 8px;
}
-.mx_EventTile_isEditing .mx_MessageTimestamp {
- visibility: hidden !important;
-}
-.mx_EventTile .mx_MessageTimestamp {
- display: block;
+
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_isEditing
+ .mx_MessageTimestamp {
visibility: hidden;
+}
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_MessageTimestamp {
+ display: block;
white-space: nowrap;
left: 0;
text-align: center;
@@ -14061,102 +18705,95 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-user-select: none;
user-select: none;
}
-.mx_EventTile_continuation .mx_EventTile_line {
+
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_continuation
+ .mx_EventTile_line {
clear: both;
}
-.mx_EventTile_line,
-.mx_EventTile_reply {
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_line,
+.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_reply {
position: relative;
padding-left: 64px;
- border-radius: 4px;
+ border-radius: 8px;
}
-.mx_EventListSummary .mx_EventTile_line,
-.mx_RoomView_timeline_rr_enabled .mx_EventTile_line {
- margin-right: 110px;
-}
-.mx_EventTile_bubbleContainer {
- display: grid;
- grid-template-columns: 1fr 100px;
-}
-.mx_EventTile_bubbleContainer .mx_EventTile_line {
- margin-right: 0;
- grid-column: 1/3;
- padding: 0 !important;
-}
-.mx_EventTile_bubbleContainer .mx_EventTile_msgOption {
- grid-column: 2;
-}
-.mx_EventTile_reply {
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_reply {
margin-right: 10px;
}
-.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
- font-size: 48px !important;
- line-height: 57px !important;
-}
-.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp {
- visibility: visible;
-}
-.mx_EventTile_selected > div > a > .mx_MessageTimestamp {
- left: 3px;
- width: auto;
-}
-.mx_EventTile.focus-visible:focus-within > div > a > .mx_MessageTimestamp,
-.mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp,
-.mx_EventTile:hover > div > a > .mx_MessageTimestamp,
-.mx_EventTile_last > div > a > .mx_MessageTimestamp,
-.mx_IRCLayout
- .mx_EventTile.focus-visible:focus-within
+
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_selected
+ > div
> a
- > .mx_MessageTimestamp,
-.mx_IRCLayout
- .mx_EventTile.mx_EventTile_actionBarFocused
- > a
- > .mx_MessageTimestamp,
-.mx_IRCLayout .mx_EventTile:hover > a > .mx_MessageTimestamp,
-.mx_IRCLayout .mx_EventTile_last > a > .mx_MessageTimestamp,
-.mx_IRCLayout .mx_ReplyThread .mx_EventTile > a > .mx_MessageTimestamp {
- visibility: visible;
+ > .mx_MessageTimestamp {
+ left: -4px;
}
-.mx_EventTile.focus-visible:focus-within .mx_MessageActionBar,
-.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,
-.mx_EventTile:hover .mx_MessageActionBar,
-[data-whatinput="keyboard"] .mx_EventTile:focus-within .mx_MessageActionBar {
- visibility: visible;
-}
-.mx_EventTile_selected > .mx_EventTile_line {
+
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_selected
+ > .mx_EventTile_line {
border-left: 4px solid #0dbd8b;
padding-left: 60px;
background-color: #f6f7f8;
}
-.mx_EventTile_highlight,
-.mx_EventTile_highlight .markdown-body {
+
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_highlight,
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_highlight
+ .markdown-body {
color: #ff4b55;
}
-.mx_EventTile_highlight .markdown-body .mx_EventTile_line,
-.mx_EventTile_highlight .mx_EventTile_line {
+
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_highlight
+ .markdown-body
+ .mx_EventTile_line,
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_highlight
+ .mx_EventTile_line {
background-color: #fff8e3;
}
-.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line {
+
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_info .mx_EventTile_line,
+.mx_EventTile:not([data-layout="bubble"])
+ ~ .mx_EventListSummary
+ .mx_EventTile_avatar
+ ~ .mx_EventTile_line {
+ padding-left: 82px;
+}
+
+.mx_EventTile:not([data-layout="bubble"])
+ ~ .mx_EventListSummary
+ .mx_EventTile_line {
+ padding-left: 64px;
+}
+
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_selected.mx_EventTile_info
+ .mx_EventTile_line {
padding-left: 78px;
}
-.mx_EventTile.focus-visible:focus-within .mx_EventTile_line,
-.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line,
-.mx_EventTile:hover .mx_EventTile_line {
+
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile.focus-visible:focus-within
+ .mx_EventTile_line,
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile.mx_EventTile_actionBarFocused
+ .mx_EventTile_line,
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile:hover
+ .mx_EventTile_line {
background-color: #f6f7f8;
}
-.mx_EventTile_searchHighlight {
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_searchHighlight {
+ background-color: #0dbd8b;
+ color: #fff;
border-radius: 5px;
padding-left: 2px;
padding-right: 2px;
cursor: pointer;
}
-.mx_EventTile_searchHighlight,
-.mx_EventTile_searchHighlight a {
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_searchHighlight a {
background-color: #0dbd8b;
color: #fff;
}
-.mx_EventTile_receiptSending:before,
-.mx_EventTile_receiptSent:before {
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_receiptSending:before,
+.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_receiptSent:before {
background-color: #8d99a5;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
@@ -14172,18 +18809,22 @@ span.mx_MVideoBody video.mx_MVideoBody {
left: 0;
right: 0;
}
-.mx_EventTile_receiptSent:before {
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_receiptSent:before {
-webkit-mask-image: url(../../img/element-icons/circle-sent.5079cbe.svg);
mask-image: url(../../img/element-icons/circle-sent.5079cbe.svg);
}
-.mx_EventTile_receiptSending:before {
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_receiptSending:before {
-webkit-mask-image: url(../../img/element-icons/circle-sending.bcca6aa.svg);
mask-image: url(../../img/element-icons/circle-sending.bcca6aa.svg);
}
-.mx_EventTile_contextual {
+
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_contextual {
opacity: 0.4;
}
-.mx_EventTile_msgOption {
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_msgOption {
float: right;
text-align: right;
position: relative;
@@ -14191,9 +18832,146 @@ span.mx_MVideoBody video.mx_MVideoBody {
height: 1px;
margin-right: 10px;
}
-.mx_EventTile_msgOption a {
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_msgOption a {
text-decoration: none;
}
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_body {
+ overflow-y: hidden;
+}
+
+.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unknown
+ .mx_EventTile_line,
+.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unverified
+ .mx_EventTile_line,
+.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_verified
+ .mx_EventTile_line {
+ padding-left: 60px;
+}
+
+.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_verified
+ .mx_EventTile_line {
+ border-left: 4px solid #76cfa5;
+}
+
+.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unknown
+ .mx_EventTile_line,
+.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unverified
+ .mx_EventTile_line {
+ border-left: 4px solid #e8bf37;
+}
+
+.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unknown.mx_EventTile_info
+ .mx_EventTile_line,
+.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unverified.mx_EventTile_info
+ .mx_EventTile_line,
+.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_verified.mx_EventTile_info
+ .mx_EventTile_line {
+ padding-left: 78px;
+}
+
+.mx_EventTile:not([data-layout="bubble"]):hover .mx_EventTile_e2eIcon {
+ opacity: 1;
+}
+
+.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unknown
+ .mx_EventTile_line
+ > a
+ > .mx_MessageTimestamp,
+.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unverified
+ .mx_EventTile_line
+ > a
+ > .mx_MessageTimestamp,
+.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_verified
+ .mx_EventTile_line
+ > a
+ > .mx_MessageTimestamp {
+ left: -4px;
+}
+
+.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unknown
+ .mx_EventTile_line
+ > .mx_EventTile_e2eIcon,
+.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unverified
+ .mx_EventTile_line
+ > .mx_EventTile_e2eIcon,
+.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_verified
+ .mx_EventTile_line
+ > .mx_EventTile_e2eIcon {
+ display: block;
+ left: 41px;
+}
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_MImageBody {
+ margin-right: 34px;
+}
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_e2eIcon {
+ position: absolute;
+ top: 6px;
+ left: 44px;
+ bottom: 0;
+ right: 0;
+}
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_ReactionsRow {
+ margin: 0;
+ padding: 6px 60px;
+}
+
+.mx_EventTile_content {
+ overflow-y: hidden;
+ overflow-x: hidden;
+ margin-right: 34px;
+}
+
+.mx_EventTile_spoiler {
+ cursor: pointer;
+}
+
+.mx_EventTile_spoiler_reason {
+ color: #acacac;
+ font-size: 1.1rem;
+}
+
+.mx_EventTile_spoiler_content {
+ -webkit-filter: blur(5px) saturate(0.1) sepia(1);
+ filter: blur(5px) saturate(0.1) sepia(1);
+ -webkit-transition-duration: 0.5s;
+ transition-duration: 0.5s;
+}
+
+.mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content {
+ -webkit-filter: none;
+ filter: none;
+}
+
+.mx_RoomView_timeline_rr_enabled
+ .mx_EventTile:not([data-layout="bubble"])
+ .mx_EventTile_line {
+ margin-right: 110px;
+}
+
+.mx_EventTile_bubbleContainer {
+ display: grid;
+ grid-template-columns: 1fr 100px;
+}
+
+.mx_EventTile_bubbleContainer .mx_EventTile_line {
+ margin-right: 0;
+ grid-column: 1/3;
+ padding: 0 !important;
+}
+
+.mx_EventTile_bubbleContainer .mx_EventTile_msgOption {
+ grid-column: 2;
+}
+
+.mx_EventTile_bubbleContainer:hover .mx_EventTile_line {
+ background-color: inherit !important;
+}
+
.mx_EventTile_readAvatars {
position: relative;
display: inline-block;
@@ -14206,11 +18984,13 @@ span.mx_MVideoBody video.mx_MVideoBody {
user-select: none;
z-index: 1;
}
+
.mx_EventTile_readAvatars .mx_BaseAvatar {
position: absolute;
display: inline-block;
height: 1.4rem;
width: 1.4rem;
+ will-change: left, top;
-webkit-transition: left 0.1s ease-out, top 0.3s ease-out;
transition: left 0.1s ease-out, top 0.3s ease-out;
-webkit-transition: left var(--transition-short) ease-out,
@@ -14218,50 +18998,40 @@ span.mx_MVideoBody video.mx_MVideoBody {
transition: left var(--transition-short) ease-out,
top var(--transition-standard) ease-out;
}
+
.mx_EventTile_readAvatarRemainder {
color: #acacac;
font-size: 1.1rem;
position: absolute;
}
-.mx_EventTile_content {
- display: block;
- overflow-y: hidden;
- overflow-x: hidden;
- margin-right: 34px;
+
+.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
+ font-size: 48px !important;
+ line-height: 57px !important;
}
-.mx_EventTile_body {
- overflow-y: hidden;
-}
-.mx_EventTile_spoiler {
+
+.mx_EventTile_content .mx_EventTile_edited {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ font-size: 1.2rem;
+ color: #9e9e9e;
+ display: inline-block;
+ margin-left: 9px;
cursor: pointer;
}
-.mx_EventTile_spoiler_reason {
- color: #acacac;
- font-size: 1.1rem;
-}
-.mx_EventTile_spoiler_content {
- -webkit-filter: blur(5px) saturate(0.1) sepia(1);
- filter: blur(5px) saturate(0.1) sepia(1);
- -webkit-transition-duration: 0.5s;
- transition-duration: 0.5s;
-}
-.mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content {
- -webkit-filter: none;
- filter: none;
-}
+
.mx_EventTile_e2eIcon {
- position: absolute;
- top: 6px;
- left: 44px;
+ position: relative;
width: 14px;
height: 14px;
display: block;
- bottom: 0;
- right: 0;
opacity: 0.2;
background-repeat: no-repeat;
background-size: contain;
}
+
.mx_EventTile_e2eIcon:after,
.mx_EventTile_e2eIcon:before {
content: "";
@@ -14274,6 +19044,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-size: contain;
mask-size: contain;
}
+
.mx_EventTile_e2eIcon:after,
.mx_EventTile_e2eIcon:before {
-webkit-mask-repeat: no-repeat;
@@ -14281,130 +19052,61 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-position: center;
mask-position: center;
}
+
.mx_EventTile_e2eIcon:before {
background-color: #fff;
-webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
mask-image: url(../../img/e2e/normal.76f0c09.svg);
- -webkit-mask-size: 90%;
- mask-size: 90%;
+ -webkit-mask-size: 80%;
+ mask-size: 80%;
}
+
.mx_EventTile_e2eIcon_undecryptable:after,
.mx_EventTile_e2eIcon_unverified:after {
-webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
mask-image: url(../../img/e2e/warning.78bb264.svg);
background-color: #ff4b55;
}
+
.mx_EventTile_e2eIcon_undecryptable,
.mx_EventTile_e2eIcon_unverified {
opacity: 1;
}
+
.mx_EventTile_e2eIcon_unknown:after {
-webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
mask-image: url(../../img/e2e/warning.78bb264.svg);
background-color: #ff4b55;
}
+
.mx_EventTile_e2eIcon_unknown {
opacity: 1;
}
+
.mx_EventTile_e2eIcon_unencrypted:after {
-webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
mask-image: url(../../img/e2e/warning.78bb264.svg);
background-color: #ff4b55;
}
+
.mx_EventTile_e2eIcon_unencrypted {
opacity: 1;
}
+
.mx_EventTile_e2eIcon_unauthenticated:after {
-webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
mask-image: url(../../img/e2e/normal.76f0c09.svg);
background-color: #91a1c0;
}
+
.mx_EventTile_e2eIcon_unauthenticated {
opacity: 1;
}
-.mx_EventTile_keyRequestInfo {
- font-size: 1.2rem;
-}
-.mx_EventTile_keyRequestInfo_text {
- opacity: 0.5;
-}
-.mx_EventTile_keyRequestInfo_text a {
- color: #2e2f32;
- text-decoration: underline;
- cursor: pointer;
-}
-.mx_EventTile_keyRequestInfo_tooltip_contents p {
- text-align: auto;
- margin-left: 3px;
- margin-right: 3px;
-}
-.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child {
- margin-top: 0;
-}
-.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child {
- margin-bottom: 0;
-}
-.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,
-.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
-.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
- padding-left: 60px;
-}
-.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
- border-left: 4px solid #76cfa5;
-}
-.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,
-.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
- border-left: 4px solid #e8bf37;
-}
-.mx_EventTile:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line,
-.mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info
- .mx_EventTile_line,
-.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line {
- padding-left: 78px;
-}
-.mx_EventTile:hover .mx_EventTile_e2eIcon {
- opacity: 1;
-}
-.mx_EventTile:hover.mx_EventTile_unknown
- .mx_EventTile_line
- > a
- > .mx_MessageTimestamp,
-.mx_EventTile:hover.mx_EventTile_unverified
- .mx_EventTile_line
- > a
- > .mx_MessageTimestamp,
-.mx_EventTile:hover.mx_EventTile_verified
- .mx_EventTile_line
- > a
- > .mx_MessageTimestamp {
- width: 38px;
-}
-.mx_EventTile:hover.mx_EventTile_unknown
- .mx_EventTile_line
- > .mx_EventTile_e2eIcon,
-.mx_EventTile:hover.mx_EventTile_unverified
- .mx_EventTile_line
- > .mx_EventTile_e2eIcon,
-.mx_EventTile:hover.mx_EventTile_verified
- .mx_EventTile_line
- > .mx_EventTile_e2eIcon {
- display: block;
- left: 41px;
-}
-.mx_EventTile_content .mx_EventTile_edited {
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- font-size: 1.2rem;
- color: #9e9e9e;
- display: inline-block;
- margin-left: 9px;
- cursor: pointer;
-}
+
.mx_EventTile_body pre {
border: 1px solid transparent;
}
+
.mx_EventTile_content .markdown-body {
font-family: inherit !important;
white-space: normal !important;
@@ -14412,38 +19114,47 @@ span.mx_MVideoBody video.mx_MVideoBody {
color: inherit;
font-size: 1.4rem;
}
+
.mx_EventTile_content .markdown-body code,
.mx_EventTile_content .markdown-body pre {
- font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
- color: #333;
+ font-family: Menlo, Consolas, Liberation Mono, Lucida Console, monospace !important;
+ background-color: #f3f8fd;
}
+
+.mx_EventTile_content .markdown-body pre code > * {
+ display: inline-block;
+}
+
.mx_EventTile_content .markdown-body pre {
overflow-x: overlay;
overflow-y: visible;
}
-.mx_EventTile_content .markdown-body code {
- background-color: #f8f8f8;
-}
+
.mx_EventTile_lineNumbers {
float: left;
margin: 0 0.5em 0 -1.5em;
color: grey;
}
+
.mx_EventTile_lineNumber {
text-align: right;
display: block;
padding-left: 1em;
}
+
.mx_EventTile_collapsedCodeBlock {
max-height: 30vh;
}
+
.mx_EventTile.focus-visible:focus-within .mx_EventTile_body pre,
.mx_EventTile:hover .mx_EventTile_body pre {
border: 1px solid #e5e5e5;
}
+
.mx_EventTile_pre_container {
position: relative;
}
+
.mx_EventTile_button {
position: absolute;
display: inline-block;
@@ -14455,17 +19166,21 @@ span.mx_MVideoBody video.mx_MVideoBody {
height: 19px;
background-color: #2e2f32;
}
+
.mx_EventTile_buttonBottom {
top: 33px;
}
+
.mx_EventTile_copyButton {
-webkit-mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
}
+
.mx_EventTile_collapseButton {
-webkit-mask-image: url(../../img/feather-customised/minimise.aec9142.svg);
mask-image: url(../../img/feather-customised/minimise.aec9142.svg);
}
+
.mx_EventTile_collapseButton,
.mx_EventTile_expandButton {
-webkit-mask-size: 75%;
@@ -14475,10 +19190,12 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
+
.mx_EventTile_expandButton {
-webkit-mask-image: url(../../img/feather-customised/maximise.dc32127.svg);
mask-image: url(../../img/feather-customised/maximise.dc32127.svg);
}
+
.mx_EventTile_body
.mx_EventTile_pre_container:focus-within
.mx_EventTile_collapseButton,
@@ -14497,6 +19214,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
.mx_EventTile_expandButton {
visibility: visible;
}
+
.mx_EventTile_content .markdown-body h1,
.mx_EventTile_content .markdown-body h2,
.mx_EventTile_content .markdown-body h3,
@@ -14506,32 +19224,75 @@ span.mx_MVideoBody video.mx_MVideoBody {
font-family: inherit !important;
color: inherit;
}
+
.mx_EventTile_content .markdown-body h1,
.mx_EventTile_content .markdown-body h2 {
font-size: 1.5em;
border-bottom: none !important;
}
+
.mx_EventTile_content .markdown-body a {
color: #238cf5;
}
+
.mx_EventTile_content .markdown-body .hljs {
display: inline !important;
}
+
+.mx_EventTile_keyRequestInfo {
+ font-size: 1.2rem;
+}
+
+.mx_EventTile_keyRequestInfo_text {
+ opacity: 0.5;
+}
+
+.mx_EventTile_keyRequestInfo_text a {
+ color: #2e2f32;
+ text-decoration: underline;
+ cursor: pointer;
+}
+
+.mx_EventTile_keyRequestInfo_tooltip_contents p {
+ text-align: auto;
+ margin-left: 3px;
+ margin-right: 3px;
+}
+
+.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child {
+ margin-top: 0;
+}
+
+.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child {
+ margin-bottom: 0;
+}
+
.mx_EventTile_tileError {
color: red;
text-align: center;
margin-right: 0;
}
+
.mx_EventTile_tileError .mx_EventTile_line {
padding-left: 0;
margin-right: 0;
}
+
.mx_EventTile_tileError .mx_EventTile_line span {
padding: 4px 8px;
}
+
.mx_EventTile_tileError a {
margin-left: 1em;
}
+
+.mx_EventTile.focus-visible:focus-within .mx_MessageActionBar,
+.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,
+.mx_EventTile:hover .mx_MessageActionBar,
+[data-whatinput="keyboard"] .mx_EventTile:focus-within .mx_MessageActionBar {
+ visibility: visible;
+}
+
@media only screen and (max-width: 480px) {
.mx_EventTile_line,
.mx_EventTile_reply {
@@ -14543,41 +19304,44 @@ span.mx_MVideoBody video.mx_MVideoBody {
margin-right: 0;
}
}
+
.mx_GroupLayout .mx_EventTile > .mx_SenderProfile {
line-height: 2rem;
margin-left: 64px;
}
-.mx_GroupLayout .mx_EventTile > .mx_EventTile_line {
- padding-left: 64px;
-}
+
.mx_GroupLayout .mx_EventTile > .mx_EventTile_avatar {
position: absolute;
+ z-index: 9;
}
+
.mx_GroupLayout .mx_EventTile .mx_MessageTimestamp {
position: absolute;
width: 46px;
}
+
.mx_GroupLayout .mx_EventTile .mx_EventTile_line,
.mx_GroupLayout .mx_EventTile .mx_EventTile_reply {
padding-top: 1px;
padding-bottom: 3px;
line-height: 2.2rem;
}
-.mx_GroupLayout .mx_EventTile_info .mx_EventTile_line {
- padding-left: 82px;
-}
+
.mx_MatrixChat_useCompactLayout .mx_EventTile {
padding-top: 4px;
}
+
.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_line,
.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_reply {
padding-top: 0;
padding-bottom: 0;
}
+
.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info {
padding-top: 0;
font-size: 1.3rem;
}
+
.mx_MatrixChat_useCompactLayout
.mx_EventTile.mx_EventTile_info
.mx_EventTile_line,
@@ -14586,22 +19350,27 @@ span.mx_MVideoBody video.mx_MVideoBody {
.mx_EventTile_reply {
line-height: 2rem;
}
+
.mx_MatrixChat_useCompactLayout
.mx_EventTile.mx_EventTile_info
.mx_EventTile_avatar {
top: 4px;
}
+
.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_SenderProfile {
font-size: 1.3rem;
}
+
.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote {
padding-top: 8px;
}
+
.mx_MatrixChat_useCompactLayout
.mx_EventTile.mx_EventTile_emote
.mx_EventTile_avatar {
top: 2px;
}
+
.mx_MatrixChat_useCompactLayout
.mx_EventTile.mx_EventTile_emote
.mx_EventTile_line,
@@ -14611,10 +19380,12 @@ span.mx_MVideoBody video.mx_MVideoBody {
padding-top: 0;
padding-bottom: 1px;
}
+
.mx_MatrixChat_useCompactLayout
.mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation {
padding-top: 0;
}
+
.mx_MatrixChat_useCompactLayout
.mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation
.mx_EventTile_line,
@@ -14624,15 +19395,19 @@ span.mx_MVideoBody video.mx_MVideoBody {
padding-top: 0;
padding-bottom: 0;
}
+
.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_avatar {
top: 2px;
}
+
.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_e2eIcon {
top: 3px;
}
+
.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_readAvatars {
top: -2rem;
}
+
.mx_MatrixChat_useCompactLayout
.mx_EventTile
.mx_EventTile_content
@@ -14670,16 +19445,21 @@ span.mx_MVideoBody video.mx_MVideoBody {
ul {
margin-bottom: 4px;
}
+
.mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList h2 {
margin-top: 6px;
}
+
.mx_IRCLayout {
--name-width: 70px;
line-height: 1.8rem !important;
}
+
.mx_IRCLayout .mx_EventTile > a {
text-decoration: none;
+ min-width: 45px;
}
+
.mx_IRCLayout .mx_EventTile {
display: -webkit-box;
display: -ms-flexbox;
@@ -14693,9 +19473,11 @@ span.mx_MVideoBody video.mx_MVideoBody {
align-items: flex-start;
padding-top: 0;
}
+
.mx_IRCLayout .mx_EventTile > * {
margin-right: 5px;
}
+
.mx_IRCLayout .mx_EventTile > .mx_EventTile_msgOption {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
@@ -14703,32 +19485,14 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-negative: 0;
flex-shrink: 0;
}
+
.mx_IRCLayout
.mx_EventTile
> .mx_EventTile_msgOption
.mx_EventTile_readAvatars {
top: 0.2rem;
}
-.mx_IRCLayout .mx_EventTile > .mx_SenderProfile {
- -webkit-box-ordinal-group: 3;
- -ms-flex-order: 2;
- order: 2;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- width: var(--name-width);
- text-overflow: ellipsis;
- text-align: left;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- overflow: visible;
- -webkit-box-pack: end;
- -ms-flex-pack: end;
- justify-content: flex-end;
-}
+
.mx_IRCLayout .mx_EventTile .mx_EventTile_line,
.mx_IRCLayout .mx_EventTile .mx_EventTile_reply {
padding: 0;
@@ -14749,6 +19513,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
flex-shrink: 1;
min-width: 0;
}
+
.mx_IRCLayout .mx_EventTile > .mx_EventTile_avatar {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
@@ -14766,6 +19531,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-align: center;
align-items: center;
}
+
.mx_IRCLayout .mx_EventTile > .mx_EventTile_avatar > .mx_BaseAvatar,
.mx_IRCLayout .mx_EventTile > .mx_EventTile_avatar > .mx_BaseAvatar > * {
height: 1.4rem !important;
@@ -14773,11 +19539,13 @@ span.mx_MVideoBody video.mx_MVideoBody {
font-size: 1rem !important;
line-height: 1.5rem !important;
}
+
.mx_IRCLayout .mx_EventTile .mx_MessageTimestamp {
font-size: 1rem;
width: 45px;
text-align: right;
}
+
.mx_IRCLayout .mx_EventTile > .mx_EventTile_e2eIcon {
position: absolute;
right: unset;
@@ -14792,103 +19560,130 @@ span.mx_MVideoBody video.mx_MVideoBody {
height: 1.8rem;
background-position: 50%;
}
+
.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_EventTile_e2eIcon,
.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_MTextBody,
-.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_ReplyThread_wrapper_empty,
.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_TextualEvent {
display: inline-block;
}
+
.mx_IRCLayout .mx_EventTile .mx_EventTile_reply {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
}
+
.mx_IRCLayout .mx_EventTile .mx_EditMessageComposer_buttons {
position: relative;
}
+
.mx_IRCLayout .mx_EventTile_emote > .mx_EventTile_avatar {
margin-left: calc(var(--name-width) + 19px);
}
+
.mx_IRCLayout blockquote {
margin: 0;
}
+
.mx_IRCLayout .mx_EventListSummary > .mx_EventTile_line {
padding-left: calc(var(--name-width) + 74px);
}
+
.mx_IRCLayout .mx_EventListSummary .mx_EventListSummary_avatars {
padding: 0;
margin: 0 9px 0 0;
}
+
.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
left: calc(var(--name-width) + 24px);
top: 0;
}
+
.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_line {
left: calc(var(--name-width) + 24px);
}
+
.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_TextualEvent {
line-height: 1.8rem;
}
+
.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,
.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
padding-left: 0;
border-left: 0;
}
-.mx_IRCLayout .mx_SenderProfile_hover {
- background-color: #fff;
- overflow: hidden;
-}
-.mx_IRCLayout .mx_SenderProfile_hover > span {
+
+.mx_IRCLayout .mx_SenderProfile {
+ width: var(--name-width);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-}
-.mx_IRCLayout .mx_SenderProfile_hover > span > .mx_SenderProfile_name {
- overflow: hidden;
- text-overflow: ellipsis;
- min-width: var(--name-width);
- text-align: end;
-}
-.mx_IRCLayout .mx_SenderProfile:hover {
+ -webkit-box-ordinal-group: 3;
+ -ms-flex-order: 2;
+ order: 2;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
}
-.mx_IRCLayout .mx_SenderProfile_hover:hover {
+
+.mx_IRCLayout .mx_SenderProfile > .mx_SenderProfile_displayName {
+ width: 100%;
+ text-align: end;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.mx_IRCLayout .mx_SenderProfile > .mx_SenderProfile_mxid {
+ visibility: collapse;
+}
+
+.mx_IRCLayout .mx_SenderProfile:hover {
overflow: visible;
- width: max(auto, 100%);
z-index: 10;
}
+
+.mx_IRCLayout .mx_SenderProfile:hover > .mx_SenderProfile_displayName {
+ overflow: visible;
+}
+
+.mx_IRCLayout .mx_SenderProfile:hover > .mx_SenderProfile_mxid {
+ visibility: visible;
+}
+
.mx_IRCLayout .mx_ReplyThread {
margin: 0;
}
+
.mx_IRCLayout .mx_ReplyThread .mx_SenderProfile {
+ -webkit-box-ordinal-group: unset;
+ -ms-flex-order: unset;
+ order: unset;
+ max-width: unset;
width: unset;
- max-width: var(--name-width);
-}
-.mx_IRCLayout .mx_ReplyThread .mx_SenderProfile_hover {
background: transparent;
}
-.mx_IRCLayout
- .mx_ReplyThread
- .mx_SenderProfile_hover
- > span
- > .mx_SenderProfile_name {
- min-width: inherit;
-}
+
.mx_IRCLayout .mx_ReplyThread .mx_EventTile_emote > .mx_EventTile_avatar {
margin-left: 0;
}
+
.mx_IRCLayout .mx_ReplyThread .mx_MessageTimestamp {
width: auto;
}
+
.mx_IRCLayout .mx_ReplyThread .mx_EventTile_e2eIcon {
position: relative;
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
+
.mx_IRCLayout .mx_ProfileResizer {
position: absolute;
height: 100%;
@@ -14897,10 +19692,12 @@ span.mx_MVideoBody video.mx_MVideoBody {
cursor: col-resize;
z-index: 100;
}
+
.mx_IRCLayout .mx_Flair > img {
height: 1.4rem !important;
width: 1.4rem !important;
}
+
.mx_JumpToBottomButton {
z-index: 1000;
position: absolute;
@@ -14910,6 +19707,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
height: 50px;
text-align: center;
}
+
.mx_JumpToBottomButton_badge {
position: relative;
top: -12px;
@@ -14923,12 +19721,15 @@ span.mx_MVideoBody video.mx_MVideoBody {
color: #fff;
background-color: #61708b;
}
+
.mx_JumpToBottomButton_highlight .mx_JumpToBottomButton_badge {
color: #f2f5f8;
background-color: #ff4b55;
}
+
.mx_JumpToBottomButton_scrollDown {
position: relative;
+ display: block;
height: 38px;
border-radius: 19px;
-webkit-box-sizing: border-box;
@@ -14937,6 +19738,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
border: 1.3px solid #61708b;
cursor: pointer;
}
+
.mx_JumpToBottomButton_scrollDown:before {
content: "";
position: absolute;
@@ -14952,6 +19754,30 @@ span.mx_MVideoBody video.mx_MVideoBody {
mask-size: contain;
background: #61708b;
}
+
+.mx_LinkPreviewGroup .mx_LinkPreviewGroup_hide {
+ cursor: pointer;
+ width: 18px;
+ height: 18px;
+}
+
+.mx_LinkPreviewGroup .mx_LinkPreviewGroup_hide img {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 40px;
+ flex: 0 0 40px;
+ visibility: hidden;
+}
+
+.mx_LinkPreviewGroup .mx_LinkPreviewGroup_hide.focus-visible:focus img,
+.mx_LinkPreviewGroup:hover .mx_LinkPreviewGroup_hide img {
+ visibility: visible;
+}
+
+.mx_LinkPreviewGroup > .mx_AccessibleButton {
+ color: #0dbd8b;
+ text-align: center;
+}
+
.mx_LinkPreviewWidget {
margin-top: 15px;
margin-right: 15px;
@@ -14959,9 +19785,11 @@ span.mx_MVideoBody video.mx_MVideoBody {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
- border-left: 4px solid #ddd;
+ border-left: 2px solid #ddd;
+ border-radius: 2px;
color: #888;
}
+
.mx_LinkPreviewWidget_image {
-webkit-box-flex: 0;
-ms-flex: 0 0 100px;
@@ -14970,44 +19798,42 @@ span.mx_MVideoBody video.mx_MVideoBody {
text-align: center;
cursor: pointer;
}
+
.mx_LinkPreviewWidget_caption {
margin-left: 15px;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
+ overflow: hidden;
}
+
.mx_LinkPreviewWidget_title {
- display: inline;
font-weight: 700;
white-space: normal;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
}
-.mx_LinkPreviewWidget_siteName {
- display: inline;
+
+.mx_LinkPreviewWidget_title .mx_LinkPreviewWidget_siteName {
+ font-weight: 400;
}
+
.mx_LinkPreviewWidget_description {
margin-top: 8px;
white-space: normal;
word-wrap: break-word;
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
}
-.mx_LinkPreviewWidget_cancel {
- cursor: pointer;
- width: 18px;
- height: 18px;
-}
-.mx_LinkPreviewWidget_cancel img {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 40px;
- flex: 0 0 40px;
- visibility: hidden;
-}
-.mx_LinkPreviewWidget:hover .mx_LinkPreviewWidget_cancel img,
-.mx_LinkPreviewWidget_cancel.focus-visible:focus img {
- visibility: visible;
-}
+
.mx_MatrixChat_useCompactLayout .mx_LinkPreviewWidget {
margin-top: 6px;
margin-bottom: 6px;
}
+
.mx_MemberInfo {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
@@ -15019,20 +19845,24 @@ span.mx_MVideoBody video.mx_MVideoBody {
overflow-y: auto;
margin-top: 8px;
}
+
.mx_MemberInfo,
.mx_MemberInfo_name {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_MemberInfo_name {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
+
.mx_MemberInfo_name > .mx_E2EIcon {
margin-right: 0;
}
+
.mx_MemberInfo_cancel {
height: 16px;
width: 16px;
@@ -15046,6 +19876,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
mask-position: 16px center;
background-color: #91a1c0;
}
+
.mx_MemberInfo_name h2 {
-webkit-box-flex: 1;
-ms-flex: 1;
@@ -15053,27 +19884,34 @@ span.mx_MVideoBody video.mx_MVideoBody {
overflow-x: auto;
max-height: 50px;
}
+
.mx_MemberInfo h2 {
font-size: 1.8rem;
font-weight: 600;
margin: 16px 0 16px 15px;
}
+
.mx_MemberInfo_container {
margin: 0 16px 16px;
}
+
.mx_MemberInfo .mx_RoomTile_nameContainer {
width: 154px;
}
+
.mx_MemberInfo .mx_RoomTile_badge {
display: none;
}
+
.mx_MemberInfo .mx_RoomTile_name {
width: 160px;
}
+
.mx_MemberInfo_avatar {
background: hsla(0, 0%, 91%, 0.77);
margin-bottom: 16px;
}
+
.mx_MemberInfo_avatar > img {
height: auto;
width: 100%;
@@ -15082,13 +19920,16 @@ span.mx_MVideoBody video.mx_MVideoBody {
object-fit: contain;
display: block;
}
+
.mx_MemberInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {
cursor: -webkit-zoom-in;
cursor: zoom-in;
}
+
.mx_MemberInfo_profile {
margin-bottom: 16px;
}
+
.mx_MemberInfo h3 {
text-transform: uppercase;
color: #9fa9ba;
@@ -15096,13 +19937,16 @@ span.mx_MVideoBody video.mx_MVideoBody {
font-size: 1.2rem;
margin: 4px 0;
}
+
.mx_MemberInfo_profileField {
font-size: 1.5rem;
position: relative;
}
+
.mx_MemberInfo_buttons {
margin-bottom: 16px;
}
+
.mx_MemberInfo_field {
cursor: pointer;
font-size: 1.5rem;
@@ -15110,6 +19954,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
margin-left: 8px;
line-height: 2.3rem;
}
+
.mx_MemberInfo_createRoom {
cursor: pointer;
display: -webkit-box;
@@ -15120,23 +19965,28 @@ span.mx_MVideoBody video.mx_MVideoBody {
align-items: center;
padding: 0 8px;
}
+
.mx_MemberInfo_createRoom_label {
width: auto !important;
cursor: pointer;
}
+
.mx_MemberInfo label {
font-size: 1.3rem;
}
+
.mx_MemberInfo label .mx_MemberInfo_label_text {
display: inline-block;
max-width: 180px;
vertical-align: text-top;
}
+
.mx_MemberInfo input[type="radio"] {
vertical-align: -2px;
margin-right: 5px;
margin-left: 8px;
}
+
.mx_MemberInfo_statusMessage {
font-size: 1.1rem;
opacity: 0.5;
@@ -15144,11 +19994,13 @@ span.mx_MVideoBody video.mx_MVideoBody {
white-space: nowrap;
text-overflow: clip;
}
+
.mx_MemberInfo .mx_MemberInfo_scrollContainer {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
+
.mx_GroupMemberList,
.mx_GroupRoomList,
.mx_MemberList {
@@ -15164,6 +20016,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
flex-direction: column;
min-height: 0;
}
+
.mx_GroupMemberList .mx_Spinner,
.mx_GroupRoomList .mx_Spinner,
.mx_MemberList .mx_Spinner {
@@ -15171,11 +20024,13 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
+
.mx_GroupMemberList .mx_SearchBox,
.mx_GroupRoomList .mx_SearchBox,
.mx_MemberList .mx_SearchBox {
margin-bottom: 5px;
}
+
.mx_GroupMemberList h2,
.mx_GroupRoomList h2,
.mx_MemberList h2 {
@@ -15188,6 +20043,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
margin-top: 8px;
margin-bottom: 4px;
}
+
.mx_GroupMemberList .mx_AutoHideScrollbar,
.mx_GroupRoomList .mx_AutoHideScrollbar,
.mx_MemberList .mx_AutoHideScrollbar {
@@ -15195,22 +20051,26 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex: 1 1 0px;
flex: 1 1 0;
}
+
.mx_GroupMemberList .mx_RightPanel_scopeHeader,
.mx_GroupRoomList .mx_RightPanel_scopeHeader,
.mx_MemberList .mx_RightPanel_scopeHeader {
margin-top: -8px;
}
+
.mx_GroupMemberList_query,
.mx_GroupRoomList_query {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
+
.mx_MemberList_chevron {
position: absolute;
right: 35px;
margin-top: -15px;
}
+
.mx_MemberList_border {
overflow-y: auto;
-webkit-box-ordinal-group: 2;
@@ -15220,15 +20080,19 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex: 1 1 0px;
flex: 1 1 0px;
}
+
.mx_MemberList_query {
height: 16px;
}
+
.mx_MemberList_query[type="text"] {
font-size: 1.2rem;
}
+
.mx_MemberList_wrapper {
padding: 10px;
}
+
.mx_MemberList_invite {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
@@ -15246,16 +20110,19 @@ span.mx_MVideoBody video.mx_MVideoBody {
color: #fff;
font-weight: 600;
}
+
.mx_MemberList_invite.mx_AccessibleButton_disabled {
background-color: #888;
cursor: not-allowed;
}
+
.mx_MemberList_invite span {
padding: 8px 0;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
+
.mx_MemberList_invite span:before {
content: "";
display: inline-block;
@@ -15272,14 +20139,17 @@ span.mx_MVideoBody video.mx_MVideoBody {
height: 20px;
margin-right: 5px;
}
+
.mx_MemberList_inviteCommunity span:before {
-webkit-mask-image: url(../../img/icon-invite-people.d82f491.svg);
mask-image: url(../../img/icon-invite-people.d82f491.svg);
}
+
.mx_MemberList_addRoomToCommunity span:before {
-webkit-mask-image: url(../../img/icons-room-add.bd36e26.svg);
mask-image: url(../../img/icons-room-add.bd36e26.svg);
}
+
.mx_MessageComposer_wrapper {
vertical-align: middle;
margin: auto;
@@ -15288,15 +20158,18 @@ span.mx_MVideoBody video.mx_MVideoBody {
padding-left: 82px;
padding-right: 6px;
}
+
.mx_MessageComposer_replaced_wrapper {
margin-left: auto;
margin-right: auto;
}
+
.mx_MessageComposer_replaced_valign {
height: 60px;
display: table-cell;
vertical-align: middle;
}
+
.mx_MessageComposer_roomReplaced_icon {
float: left;
margin-right: 20px;
@@ -15304,13 +20177,16 @@ span.mx_MVideoBody video.mx_MVideoBody {
width: 31px;
height: 31px;
}
+
.mx_MessageComposer_roomReplaced_header {
font-weight: 700;
}
+
.mx_MessageComposer_autocomplete_wrapper {
position: relative;
height: 0;
}
+
.mx_MessageComposer_row {
display: -webkit-box;
display: -ms-flexbox;
@@ -15324,16 +20200,20 @@ span.mx_MVideoBody video.mx_MVideoBody {
align-items: center;
width: 100%;
}
+
.mx_MessageComposer .mx_MessageComposer_avatar {
position: absolute;
left: 26px;
}
+
.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar {
display: block;
}
+
.mx_MessageComposer_composecontrols {
width: 100%;
}
+
.mx_MessageComposer_e2eIcon.mx_E2EIcon {
position: absolute;
left: 60px;
@@ -15342,6 +20222,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
width: 12px;
height: 12px;
}
+
.mx_MessageComposer_noperm_error {
width: 100%;
height: 60px;
@@ -15357,9 +20238,11 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_MessageComposer_input_wrapper {
cursor: text;
}
+
.mx_MessageComposer_input,
.mx_MessageComposer_input_wrapper {
-webkit-box-flex: 1;
@@ -15373,6 +20256,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-direction: column;
flex-direction: column;
}
+
.mx_MessageComposer_input {
vertical-align: middle;
min-height: 60px;
@@ -15385,6 +20269,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
font-size: 1.4rem;
margin-right: 6px;
}
+
.mx_MessageComposer_editor {
width: 100%;
max-height: 120px;
@@ -15393,12 +20278,15 @@ span.mx_MVideoBody video.mx_MVideoBody {
overflow-x: hidden;
word-break: break-word;
}
+
.mx_MessageComposer_editor > :first-child {
margin-top: 0 !important;
}
+
.mx_MessageComposer_editor > :last-child {
margin-bottom: 0 !important;
}
+
@keyframes visualbell {
0% {
background-color: #faa;
@@ -15407,21 +20295,25 @@ span.mx_MVideoBody video.mx_MVideoBody {
background-color: #fff;
}
}
+
.mx_MessageComposer_input_error {
-webkit-animation: visualbell 0.2s;
animation: visualbell 0.2s;
}
+
.mx_MessageComposer_input blockquote {
color: #777;
margin: 0 0 16px;
padding: 0 15px;
border-left: 4px solid #ddd;
}
+
.mx_MessageComposer_input pre {
background-color: rgba(0, 0, 0, 0.04);
border-radius: 3px;
padding: 10px;
}
+
.mx_MessageComposer_input textarea {
display: block;
width: 100%;
@@ -15438,22 +20330,28 @@ span.mx_MVideoBody video.mx_MVideoBody {
font-size: 1.4rem;
max-height: 120px;
overflow: auto;
- font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
+ Helvetica, Sans-Serif, Noto Color Emoji;
}
+
.mx_MessageComposer_input textarea::-moz-placeholder {
line-height: 100%;
color: #0dbd8b;
opacity: 1;
}
+
.mx_MessageComposer_input textarea::-webkit-input-placeholder {
color: #0dbd8b;
}
+
.mx_MessageComposer_button_highlight {
background: rgba(13, 189, 139, 0.25);
}
+
.mx_MessageComposer_button_highlight:before {
background-color: #0dbd8b !important;
}
+
.mx_MessageComposer_button {
position: relative;
margin-right: 6px;
@@ -15462,6 +20360,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
width: 26px;
border-radius: 100%;
}
+
.mx_MessageComposer_button:before {
content: "";
position: absolute;
@@ -15477,31 +20376,39 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-position: center;
mask-position: center;
}
+
.mx_MessageComposer_button:hover {
background: rgba(13, 189, 139, 0.1);
}
+
.mx_MessageComposer_button:hover:before {
background-color: #0dbd8b;
}
+
.mx_MessageComposer_button.mx_MessageComposer_hangup:not(.mx_AccessibleButton_disabled):before {
background-color: #ff4b55;
}
+
.mx_MessageComposer_upload:before {
- -webkit-mask-image: url(../icons/attach.svg);
- mask-image: url(../icons/attach.svg);
+ -webkit-mask-image: url(../../img/element-icons/room/composer/attach.359c84e.svg);
+ mask-image: url(../../img/element-icons/room/composer/attach.359c84e.svg);
}
+
.mx_MessageComposer_voiceMessage:before {
-webkit-mask-image: url(../../img/voip/mic-on-mask.97ec7a0.svg);
mask-image: url(../../img/voip/mic-on-mask.97ec7a0.svg);
}
+
.mx_MessageComposer_emoji:before {
-webkit-mask-image: url(../../img/element-icons/room/composer/emoji.52d7369.svg);
mask-image: url(../../img/element-icons/room/composer/emoji.52d7369.svg);
}
+
.mx_MessageComposer_stickers:before {
-webkit-mask-image: url(../../img/element-icons/room/composer/sticker.8dbe5ec.svg);
mask-image: url(../../img/element-icons/room/composer/sticker.8dbe5ec.svg);
}
+
.mx_MessageComposer_sendMessage {
cursor: pointer;
position: relative;
@@ -15511,6 +20418,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
border-radius: 100%;
background-color: #0dbd8b;
}
+
.mx_MessageComposer_sendMessage:before {
position: absolute;
height: 16px;
@@ -15528,18 +20436,21 @@ span.mx_MVideoBody video.mx_MVideoBody {
background-color: #fff;
content: "";
}
+
.mx_MessageComposer_formatting {
cursor: pointer;
margin: 0 11px;
width: 24px;
height: 18px;
}
+
.mx_MessageComposer_formatbar_wrapper {
width: 100%;
background-color: #fff;
-webkit-box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08);
box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08);
}
+
.mx_MessageComposer_formatbar {
margin: auto;
display: -webkit-box;
@@ -15559,27 +20470,33 @@ span.mx_MVideoBody video.mx_MVideoBody {
font-size: 1rem;
color: #888;
}
+
.mx_MessageComposer_formatbar * {
margin-right: 4px;
}
+
.mx_MessageComposer_format_button,
.mx_MessageComposer_formatbar_cancel,
.mx_MessageComposer_formatbar_markdown {
cursor: pointer;
}
+
.mx_MessageComposer_formatbar_cancel {
margin-right: 22px;
}
+
.mx_MessageComposer_formatbar_markdown {
height: 17px;
width: 30px;
margin-right: 64px;
}
+
.mx_MessageComposer_input_markdownIndicator {
height: 10px;
width: 12px;
padding: 4px 4px 4px 0;
}
+
.mx_MessageComposer_formatbar_markdown,
.mx_MessageComposer_input_markdownIndicator {
cursor: pointer;
@@ -15593,16 +20510,20 @@ span.mx_MVideoBody video.mx_MVideoBody {
mask-repeat: no-repeat;
background-color: #c1c6cd;
}
+
.mx_MessageComposer_formatbar_markdown.mx_MessageComposer_markdownDisabled,
.mx_MessageComposer_input_markdownIndicator.mx_MessageComposer_markdownDisabled {
opacity: 0.2;
}
+
.mx_MatrixChat_useCompactLayout .mx_MessageComposer_input {
min-height: 50px;
}
+
.mx_MatrixChat_useCompactLayout .mx_MessageComposer_noperm_error {
height: 50px;
}
+
.mx_MessageComposerFormatBar {
display: none;
width: 130px;
@@ -15617,9 +20538,11 @@ span.mx_MVideoBody video.mx_MVideoBody {
user-select: none;
z-index: 1000;
}
+
.mx_MessageComposerFormatBar.mx_MessageComposerFormatBar_shown {
display: block;
}
+
.mx_MessageComposerFormatBar > * {
white-space: nowrap;
display: inline-block;
@@ -15627,19 +20550,24 @@ span.mx_MVideoBody video.mx_MVideoBody {
border: 1px solid #e9edf1;
margin-left: -1px;
}
+
.mx_MessageComposerFormatBar > :hover {
border-color: #ddd;
z-index: 1;
}
+
.mx_MessageComposerFormatBar > :first-child {
border-radius: 3px 0 0 3px;
}
+
.mx_MessageComposerFormatBar > :last-child {
border-radius: 0 3px 3px 0;
}
+
.mx_MessageComposerFormatBar > :only-child {
border-radius: 3px;
}
+
.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button {
width: 27px;
height: 24px;
@@ -15648,6 +20576,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
background: none;
vertical-align: middle;
}
+
.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button:after {
content: "";
position: absolute;
@@ -15661,29 +20590,35 @@ span.mx_MVideoBody video.mx_MVideoBody {
mask-position: center;
background-color: #2e2f32;
}
+
.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconBold:after {
-webkit-mask-image: url(../../img/element-icons/room/format-bar/bold.0d80ac7.svg);
mask-image: url(../../img/element-icons/room/format-bar/bold.0d80ac7.svg);
}
+
.mx_MessageComposerFormatBar
.mx_MessageComposerFormatBar_buttonIconItalic:after {
-webkit-mask-image: url(../../img/element-icons/room/format-bar/italic.bf18054.svg);
mask-image: url(../../img/element-icons/room/format-bar/italic.bf18054.svg);
}
+
.mx_MessageComposerFormatBar
.mx_MessageComposerFormatBar_buttonIconStrikethrough:after {
-webkit-mask-image: url(../../img/element-icons/room/format-bar/strikethrough.0264f7b.svg);
mask-image: url(../../img/element-icons/room/format-bar/strikethrough.0264f7b.svg);
}
+
.mx_MessageComposerFormatBar
.mx_MessageComposerFormatBar_buttonIconQuote:after {
-webkit-mask-image: url(../../img/element-icons/room/format-bar/quote.560cd8f.svg);
mask-image: url(../../img/element-icons/room/format-bar/quote.560cd8f.svg);
}
+
.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconCode:after {
-webkit-mask-image: url(../../img/element-icons/room/format-bar/code.27444ba.svg);
mask-image: url(../../img/element-icons/room/format-bar/code.27444ba.svg);
}
+
.mx_MessageComposerFormatBar_buttonTooltip {
white-space: nowrap;
font-size: 1.3rem;
@@ -15691,37 +20626,44 @@ span.mx_MVideoBody video.mx_MVideoBody {
min-width: 54px;
text-align: center;
}
+
.mx_MessageComposerFormatBar_buttonTooltip
.mx_MessageComposerFormatBar_tooltipShortcut {
font-size: 0.9rem;
opacity: 0.7;
}
+
.mx_NewRoomIntro {
margin: 40px 0 48px 64px;
}
+
.mx_NewRoomIntro
- .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover):after,
-.mx_NewRoomIntro
- .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover):before {
- content: unset;
+ .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover)
+ .mx_MiniAvatarUploader_indicator {
+ display: none;
}
+
.mx_NewRoomIntro .mx_AccessibleButton_kind_link {
padding: 0;
font-size: inherit;
}
+
.mx_NewRoomIntro .mx_NewRoomIntro_buttons {
margin-top: 28px;
}
+
.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton {
line-height: 2.4rem;
display: inline-block;
}
+
.mx_NewRoomIntro
.mx_NewRoomIntro_buttons
.mx_AccessibleButton
+ .mx_AccessibleButton {
margin-left: 12px;
}
+
.mx_NewRoomIntro
.mx_NewRoomIntro_buttons
.mx_AccessibleButton:not(.mx_AccessibleButton_kind_primary_outline):before {
@@ -15739,23 +20681,28 @@ span.mx_MVideoBody video.mx_MVideoBody {
margin-right: 5px;
vertical-align: text-bottom;
}
+
.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_NewRoomIntro_inviteButton:before {
-webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
}
+
.mx_NewRoomIntro > h2 {
margin-top: 24px;
font-size: 2.4rem;
font-weight: 600;
}
+
.mx_NewRoomIntro > p {
margin: 0;
font-size: 1.5rem;
color: #737d8c;
}
+
.mx_NotificationBadge:not(.mx_NotificationBadge_visible) {
display: none;
}
+
.mx_NotificationBadge.mx_NotificationBadge_visible {
background-color: #61708b;
display: -webkit-box;
@@ -15768,103 +20715,129 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_highlighted {
background-color: #ff4b55;
}
+
.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_dot {
background-color: #2e2f32;
width: 6px;
height: 6px;
border-radius: 6px;
}
+
.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_2char {
width: 1.6rem;
height: 1.6rem;
border-radius: 1.6rem;
}
+
.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_3char {
width: 2.6rem;
height: 1.6rem;
border-radius: 1.6rem;
}
+
.mx_NotificationBadge.mx_NotificationBadge_visible .mx_NotificationBadge_count {
font-size: 1rem;
line-height: 1.4rem;
color: #fff;
}
+
.mx_PinnedEventTile {
min-height: 40px;
- margin-bottom: 5px;
width: 100%;
- border-radius: 5px;
+ padding: 0 4px 12px;
+ display: grid;
+ grid-template-areas: "avatar name remove" "content content content" "footer footer footer";
+ grid-template-rows: -webkit-max-content auto -webkit-max-content;
+ grid-template-rows: max-content auto max-content;
+ grid-template-columns: 24px auto 24px;
+ grid-row-gap: 12px;
+ grid-column-gap: 8px;
}
-.mx_PinnedEventTile:hover {
- background-color: #f6f7f8;
+
+.mx_PinnedEventTile + .mx_PinnedEventTile {
+ padding: 12px 4px;
+ border-top: 1px solid #e7e7e7;
}
-.mx_PinnedEventTile .mx_PinnedEventTile_sender,
-.mx_PinnedEventTile .mx_PinnedEventTile_timestamp {
- color: #868686;
- font-size: 0.8em;
- vertical-align: top;
- display: inline-block;
- padding-bottom: 3px;
+
+.mx_PinnedEventTile .mx_PinnedEventTile_senderAvatar {
+ grid-area: avatar;
}
-.mx_PinnedEventTile .mx_PinnedEventTile_timestamp {
- padding-left: 15px;
- display: none;
+
+.mx_PinnedEventTile .mx_PinnedEventTile_sender {
+ grid-area: name;
+ font-weight: 600;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
}
-.mx_PinnedEventTile .mx_PinnedEventTile_senderAvatar .mx_BaseAvatar {
- float: left;
- margin-right: 10px;
-}
-.mx_PinnedEventTile_actions {
- float: right;
- margin-right: 10px;
- display: none;
-}
-.mx_PinnedEventTile:hover .mx_PinnedEventTile_timestamp {
- display: inline-block;
-}
-.mx_PinnedEventTile:hover .mx_PinnedEventTile_actions {
- display: block;
-}
-.mx_PinnedEventTile_unpinButton {
- display: inline-block;
- cursor: pointer;
- margin-left: 10px;
-}
-.mx_PinnedEventTile_gotoButton {
- display: inline-block;
- font-size: 0.7em;
-}
-.mx_PinnedEventTile_message {
- margin-left: 50px;
+
+.mx_PinnedEventTile .mx_PinnedEventTile_unpinButton {
+ visibility: hidden;
+ grid-area: remove;
position: relative;
- top: 0;
- left: 0;
+ width: 24px;
+ height: 24px;
+ border-radius: 8px;
}
-.mx_PinnedEventsPanel {
- border-top: 1px solid transparent;
+
+.mx_PinnedEventTile .mx_PinnedEventTile_unpinButton:hover {
+ background-color: rgba(92, 100, 112, 0.2);
}
-.mx_PinnedEventsPanel_body {
- max-height: 300px;
- overflow-y: auto;
- padding-bottom: 15px;
+
+.mx_PinnedEventTile .mx_PinnedEventTile_unpinButton:before {
+ content: "";
+ position: absolute;
+ height: inherit;
+ width: inherit;
+ background: #737d8c;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 8px;
+ mask-size: 8px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-image: url(../../img/image-view/close.97d1731.svg);
+ mask-image: url(../../img/image-view/close.97d1731.svg);
}
-.mx_PinnedEventsPanel_header {
- margin: 0;
- padding-top: 8px;
- padding-bottom: 15px;
+
+.mx_PinnedEventTile .mx_PinnedEventTile_message {
+ grid-area: content;
}
-.mx_PinnedEventsPanel_cancel {
- margin: 12px;
- float: right;
- display: inline-block;
+
+.mx_PinnedEventTile .mx_PinnedEventTile_footer {
+ grid-area: footer;
+ font-size: 10px;
+ line-height: 12px;
}
+
+.mx_PinnedEventTile .mx_PinnedEventTile_footer .mx_PinnedEventTile_timestamp {
+ font-size: inherit;
+ line-height: inherit;
+ color: #737d8c;
+}
+
+.mx_PinnedEventTile .mx_PinnedEventTile_footer .mx_AccessibleButton_kind_link {
+ padding: 0;
+ margin-left: 12px;
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.mx_PinnedEventTile:hover .mx_PinnedEventTile_unpinButton {
+ visibility: visible;
+}
+
.mx_PresenceLabel {
font-size: 1.1rem;
opacity: 0.5;
}
+
.mx_ReplyPreview {
background: #fff;
border: 1px solid transparent;
@@ -15875,25 +20848,137 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-box-shadow: 0 -16px 32px rgba(0, 0, 0, 0.04);
box-shadow: 0 -16px 32px rgba(0, 0, 0, 0.04);
}
-.mx_ReplyPreview_section {
+
+.mx_ReplyPreview .mx_ReplyPreview_section {
border-bottom: 1px solid transparent;
}
-.mx_ReplyPreview_header {
- margin: 12px;
+
+.mx_ReplyPreview .mx_ReplyPreview_section .mx_ReplyPreview_header {
+ margin: 8px;
color: #2e2f32;
font-weight: 400;
opacity: 0.4;
}
-.mx_ReplyPreview_title {
+
+.mx_ReplyPreview .mx_ReplyPreview_section .mx_ReplyPreview_tile {
+ margin: 0 8px;
+}
+
+.mx_ReplyPreview .mx_ReplyPreview_section .mx_ReplyPreview_title {
float: left;
}
-.mx_ReplyPreview_cancel {
+
+.mx_ReplyPreview .mx_ReplyPreview_section .mx_ReplyPreview_cancel {
float: right;
cursor: pointer;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
}
-.mx_ReplyPreview_clear {
+
+.mx_ReplyPreview .mx_ReplyPreview_section .mx_ReplyPreview_clear {
clear: both;
}
+
+.mx_ReplyTile {
+ position: relative;
+ padding: 2px 0;
+ font-size: 1.4rem;
+ line-height: 1.6rem;
+}
+
+.mx_ReplyTile.mx_ReplyTile_audio .mx_MFileBody_info_icon:before {
+ -webkit-mask-image: url(../../img/element-icons/speaker.7124b41.svg);
+ mask-image: url(../../img/element-icons/speaker.7124b41.svg);
+}
+
+.mx_ReplyTile.mx_ReplyTile_video .mx_MFileBody_info_icon:before {
+ -webkit-mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
+ mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
+}
+
+.mx_ReplyTile .mx_MFileBody .mx_MFileBody_info {
+ margin: 5px 0;
+}
+
+.mx_ReplyTile .mx_MFileBody .mx_MFileBody_download {
+ display: none;
+}
+
+.mx_ReplyTile > a {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ text-decoration: none;
+ color: #2e2f32;
+}
+
+.mx_ReplyTile .mx_RedactedBody {
+ padding: 4px 0 2px 20px;
+}
+
+.mx_ReplyTile .mx_RedactedBody:before {
+ height: 13px;
+ width: 13px;
+ top: 5px;
+}
+
+.mx_ReplyTile .mx_EventTile_content {
+ pointer-events: none;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ line-height: 2.2rem;
+}
+
+.mx_ReplyTile .mx_EventTile_content .mx_EventTile_body.mx_EventTile_bigEmoji {
+ line-height: 2.2rem !important;
+ font-size: 1.4rem !important;
+}
+
+.mx_ReplyTile .mx_EventTile_content .mx_EventTile_lineNumbers {
+ display: none;
+}
+
+.mx_ReplyTile .mx_EventTile_content .mx_EventTile_pre_container > pre {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ padding: 4px;
+}
+
+.mx_ReplyTile .mx_EventTile_content .markdown-body blockquote,
+.mx_ReplyTile .mx_EventTile_content .markdown-body dl,
+.mx_ReplyTile .mx_EventTile_content .markdown-body ol,
+.mx_ReplyTile .mx_EventTile_content .markdown-body p,
+.mx_ReplyTile .mx_EventTile_content .markdown-body pre,
+.mx_ReplyTile .mx_EventTile_content .markdown-body table,
+.mx_ReplyTile .mx_EventTile_content .markdown-body ul {
+ margin-bottom: 4px;
+}
+
+.mx_ReplyTile.mx_ReplyTile_info {
+ padding-top: 0;
+}
+
+.mx_ReplyTile .mx_SenderProfile {
+ font-size: 1.4rem;
+ line-height: 1.7rem;
+ display: inline-block;
+ padding: 0;
+ margin: 0;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
.mx_RoomBreadcrumbs {
width: 100%;
display: -webkit-box;
@@ -15907,28 +20992,39 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-align: start;
align-items: flex-start;
}
+
.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_crumb {
margin-right: 8px;
width: 32px;
}
+
.mx_RoomBreadcrumbs.mx_RoomBreadcrumbs-enter {
- margin-left: -40px;
+ -webkit-transform: translateX(-40px);
+ transform: translateX(-40px);
}
+
.mx_RoomBreadcrumbs.mx_RoomBreadcrumbs-enter-active {
- margin-left: 0;
- -webkit-transition: margin-left 0.64s cubic-bezier(0.66, 0.02, 0.36, 1);
- transition: margin-left 0.64s cubic-bezier(0.66, 0.02, 0.36, 1);
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ -webkit-transition: -webkit-transform 0.64s cubic-bezier(0.66, 0.02, 0.36, 1);
+ transition: -webkit-transform 0.64s cubic-bezier(0.66, 0.02, 0.36, 1);
+ transition: transform 0.64s cubic-bezier(0.66, 0.02, 0.36, 1);
+ transition: transform 0.64s cubic-bezier(0.66, 0.02, 0.36, 1),
+ -webkit-transform 0.64s cubic-bezier(0.66, 0.02, 0.36, 1);
}
+
.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_placeholder {
font-weight: 600;
font-size: 1.4rem;
line-height: 32px;
height: 32px;
}
+
.mx_RoomBreadcrumbs_Tooltip {
margin-left: -42px;
margin-top: -42px;
}
+
.mx_RoomHeader {
-webkit-box-flex: 0;
-ms-flex: 0 0 50px;
@@ -15936,16 +21032,19 @@ span.mx_MVideoBody video.mx_MVideoBody {
border-bottom: 1px solid transparent;
background-color: #fff;
}
+
.mx_RoomHeader .mx_RoomHeader_e2eIcon {
height: 12px;
width: 12px;
}
+
.mx_RoomHeader .mx_RoomHeader_e2eIcon .mx_E2EIcon {
margin: 0;
position: absolute;
height: 12px;
width: 12px;
}
+
.mx_RoomHeader_wrapper {
margin: auto;
height: 50px;
@@ -15958,9 +21057,11 @@ span.mx_MVideoBody video.mx_MVideoBody {
min-width: 0;
padding: 0 10px 0 18px;
}
+
.mx_RoomHeader_wrapper .mx_InviteOnlyIcon_large {
margin: 0;
}
+
.mx_RoomHeader_spinner {
-webkit-box-flex: 1;
-ms-flex: 1;
@@ -15969,11 +21070,13 @@ span.mx_MVideoBody video.mx_MVideoBody {
padding-left: 12px;
padding-right: 12px;
}
+
.mx_RoomHeader_textButton {
vertical-align: middle;
border: 0;
border-radius: 8px;
- font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
+ Helvetica, Sans-Serif, Noto Color Emoji;
font-size: 1.4rem;
color: #fff;
background-color: #0dbd8b;
@@ -15985,23 +21088,28 @@ span.mx_MVideoBody video.mx_MVideoBody {
margin-right: 8px;
margin-top: -5px;
}
+
.mx_RoomHeader_textButton_danger {
background-color: #ff4b55;
}
+
.mx_RoomHeader_cancelButton {
cursor: pointer;
padding-left: 12px;
padding-right: 12px;
}
+
.mx_RoomHeader_buttons {
background-color: #fff;
}
+
.mx_RoomHeader_buttons,
.mx_RoomHeader_info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_RoomHeader_info {
-webkit-box-flex: 1;
-ms-flex: 1;
@@ -16010,6 +21118,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-align: center;
align-items: center;
}
+
.mx_RoomHeader_simpleHeader {
line-height: 5.2rem;
color: #45474a;
@@ -16020,14 +21129,17 @@ span.mx_MVideoBody video.mx_MVideoBody {
text-overflow: ellipsis;
width: 100%;
}
+
.mx_RoomHeader_simpleHeader .mx_RoomHeader_cancelButton {
float: right;
}
+
.mx_RoomHeader_simpleHeader .mx_RoomHeader_icon {
margin-left: 14px;
margin-right: 24px;
vertical-align: -4px;
}
+
.mx_RoomHeader_name {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
@@ -16042,18 +21154,22 @@ span.mx_MVideoBody video.mx_MVideoBody {
display: -ms-flexbox;
display: flex;
}
+
.mx_RoomHeader_nametext {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
+
.mx_RoomHeader_settingsHint {
color: #a2a2a2 !important;
}
+
.mx_RoomHeader_searchStatus {
font-weight: 400;
opacity: 0.6;
}
+
.mx_RoomHeader_avatar,
.mx_RoomHeader_avatarPicker,
.mx_RoomHeader_avatarPicker_edit,
@@ -16061,28 +21177,34 @@ span.mx_MVideoBody video.mx_MVideoBody {
.mx_RoomHeader_name {
cursor: pointer;
}
+
.mx_RoomHeader_avatarPicker_remove {
position: absolute;
top: -11px;
right: -9px;
}
+
.mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable) {
color: #0dbd8b;
}
+
.mx_RoomHeader_placeholder {
color: #a2a2a2 !important;
}
+
.mx_RoomHeader_editable {
border-bottom: 1px solid #c7c7c7 !important;
min-width: 150px;
cursor: text;
}
+
.mx_RoomHeader_editable:focus {
border-bottom: 1px solid #0dbd8b !important;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
+
.mx_RoomHeader_topic {
-webkit-box-flex: 1;
-ms-flex: 1;
@@ -16097,6 +21219,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
line-height: 1.2em;
max-height: 2.4em;
}
+
.mx_RoomHeader_avatar {
-webkit-box-flex: 0;
-ms-flex: 0;
@@ -16104,24 +21227,30 @@ span.mx_MVideoBody video.mx_MVideoBody {
margin: 0 6px 0 7px;
position: relative;
}
+
.mx_RoomHeader_avatar .mx_BaseAvatar_image {
-o-object-fit: cover;
object-fit: cover;
}
+
.mx_RoomHeader_avatarPicker {
position: relative;
}
+
.mx_RoomHeader_avatarPicker_edit {
position: absolute;
left: 16px;
top: 18px;
}
+
.mx_RoomHeader_avatarPicker_edit > label {
cursor: pointer;
}
+
.mx_RoomHeader_avatarPicker_edit > input {
display: none;
}
+
.mx_RoomHeader_button {
position: relative;
margin-left: 1px;
@@ -16131,6 +21260,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
width: 32px;
border-radius: 100%;
}
+
.mx_RoomHeader_button:before {
content: "";
position: absolute;
@@ -16144,28 +21274,35 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-size: contain;
mask-size: contain;
}
+
.mx_RoomHeader_button:hover {
background: rgba(13, 189, 139, 0.1);
}
+
.mx_RoomHeader_button:hover:before {
background-color: #0dbd8b;
}
+
.mx_RoomHeader_forgetButton:before {
-webkit-mask-image: url(../../img/element-icons/leave.bb917e7.svg);
mask-image: url(../../img/element-icons/leave.bb917e7.svg);
width: 26px;
}
+
.mx_RoomHeader_appsButton:before {
-webkit-mask-image: url(../../img/element-icons/room/apps.5ee9f78.svg);
mask-image: url(../../img/element-icons/room/apps.5ee9f78.svg);
}
+
.mx_RoomHeader_appsButton_highlight:before {
background-color: #0dbd8b;
}
+
.mx_RoomHeader_searchButton:before {
-webkit-mask-image: url(../../img/element-icons/room/search-inset.db6314d.svg);
mask-image: url(../../img/element-icons/room/search-inset.db6314d.svg);
}
+
.mx_RoomHeader_voiceCallButton:before {
-webkit-mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
@@ -16174,35 +21311,24 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-position: center;
mask-position: center;
}
+
.mx_RoomHeader_videoCallButton:before {
-webkit-mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
}
+
.mx_RoomHeader_showPanel {
height: 16px;
}
+
.mx_RoomHeader_voipButton {
display: table-cell;
}
+
.mx_RoomHeader_voipButtons {
margin-top: 18px;
}
-.mx_RoomHeader_pinnedButton:before {
- -webkit-mask-image: url(../../img/element-icons/room/pin.6ab67ed.svg);
- mask-image: url(../../img/element-icons/room/pin.6ab67ed.svg);
-}
-.mx_RoomHeader_pinsIndicator {
- position: absolute;
- right: 0;
- bottom: 4px;
- width: 8px;
- height: 8px;
- border-radius: 8px;
- background-color: #8d99a5;
-}
-.mx_RoomHeader_pinsIndicatorUnread {
- background-color: #ff4b55;
-}
+
@media only screen and (max-width: 480px) {
.mx_RoomHeader_wrapper {
padding: 0;
@@ -16211,40 +21337,49 @@ span.mx_MVideoBody video.mx_MVideoBody {
overflow: hidden;
}
}
+
.mx_RoomList {
padding-right: 7px;
}
+
.mx_RoomList_iconPlus:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);
mask-image: url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);
}
+
.mx_RoomList_iconHash:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);
mask-image: url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);
}
+
.mx_RoomList_iconExplore:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
}
+
.mx_RoomList_iconBrowse:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
}
+
.mx_RoomList_iconDialpad:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/dialpad.37f876f.svg);
mask-image: url(../../img/element-icons/roomlist/dialpad.37f876f.svg);
}
+
.mx_RoomList_explorePrompt {
margin: 4px 12px;
padding-top: 12px;
border-top: 1px solid #e7e7e7;
font-size: 1.4rem;
}
+
.mx_RoomList_explorePrompt div:first-child {
font-weight: 600;
line-height: 1.8rem;
color: #2e2f32;
}
+
.mx_RoomList_explorePrompt .mx_AccessibleButton {
color: #2e2f32;
position: relative;
@@ -16256,6 +21391,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
background-color: rgba(141, 151, 165, 0.2);
border-radius: 4px;
}
+
.mx_RoomList_explorePrompt .mx_AccessibleButton:before {
content: "";
width: 16px;
@@ -16271,26 +21407,31 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
+
.mx_RoomList_explorePrompt
.mx_AccessibleButton.mx_RoomList_explorePrompt_startChat:before {
-webkit-mask-image: url(../../img/element-icons/feedback.a91241e.svg);
mask-image: url(../../img/element-icons/feedback.a91241e.svg);
}
+
.mx_RoomList_explorePrompt
.mx_AccessibleButton.mx_RoomList_explorePrompt_explore:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
}
+
.mx_RoomList_explorePrompt
.mx_AccessibleButton.mx_RoomList_explorePrompt_spaceInvite:before {
-webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
}
+
.mx_RoomList_explorePrompt
.mx_AccessibleButton.mx_RoomList_explorePrompt_spaceExplore:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
}
+
.mx_RoomPreviewBar {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
@@ -16310,10 +21451,12 @@ span.mx_MVideoBody video.mx_MVideoBody {
display: flex;
-webkit-align-items: center;
}
+
.mx_RoomPreviewBar h3 {
font-size: 1.8rem;
font-weight: 600;
}
+
.mx_RoomPreviewBar h3.mx_RoomPreviewBar_spinnerTitle {
display: -webkit-box;
display: -ms-flexbox;
@@ -16326,11 +21469,13 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-align: center;
align-items: center;
}
+
.mx_RoomPreviewBar .mx_RoomPreviewBar_message p,
.mx_RoomPreviewBar h3 {
word-break: break-all;
word-break: break-word;
}
+
.mx_RoomPreviewBar .mx_Spinner {
width: auto;
height: auto;
@@ -16339,28 +21484,34 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
+
.mx_RoomPreviewBar .mx_RoomPreviewBar_footer {
font-size: 1.2rem;
line-height: 2rem;
}
+
.mx_RoomPreviewBar .mx_RoomPreviewBar_footer .mx_Spinner {
vertical-align: middle;
display: inline-block;
}
+
.mx_RoomPreviewBar_actions,
.mx_RoomPreviewBar_message {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_RoomPreviewBar_message {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
+
.mx_RoomPreviewBar_message p {
overflow-wrap: break-word;
}
+
.mx_RoomPreviewBar_panel {
padding: 8px 8px 8px 20px;
border-top: 1px solid transparent;
@@ -16369,6 +21520,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-direction: row;
flex-direction: row;
}
+
.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
@@ -16379,9 +21531,11 @@ span.mx_MVideoBody video.mx_MVideoBody {
flex-direction: row;
padding: 3px 8px;
}
+
.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions > * {
margin-left: 12px;
}
+
.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message {
-webkit-box-flex: 1;
-ms-flex: 1 0 0px;
@@ -16395,9 +21549,11 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-direction: column;
flex-direction: column;
}
+
.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message > * {
margin: 4px;
}
+
.mx_RoomPreviewBar_dialog {
margin: auto;
-webkit-box-sizing: content;
@@ -16407,6 +21563,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
padding: 20px;
text-align: center;
}
+
.mx_RoomPreviewBar_dialog,
.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message {
-webkit-box-orient: vertical;
@@ -16414,40 +21571,50 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-direction: column;
flex-direction: column;
}
+
.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message > * {
margin: 5px 0 20px;
}
+
.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
+
.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions .mx_AccessibleButton {
padding: 7px 50px;
}
+
.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions > * {
margin-top: 12px;
}
+
.mx_RoomPreviewBar_dialog
.mx_RoomPreviewBar_actions
.mx_AccessibleButton.mx_AccessibleButton_kind_primary {
margin-bottom: 7px;
}
+
.mx_RoomPreviewBar_inviter {
font-weight: 600;
}
+
a.mx_RoomPreviewBar_inviter {
text-decoration: underline;
cursor: pointer;
}
+
.mx_RoomSublist {
margin-left: 8px;
margin-bottom: 4px;
}
+
.mx_RoomSublist.mx_RoomSublist_hidden {
display: none;
}
+
.mx_RoomSublist .mx_RoomSublist_headerContainer {
display: -webkit-box;
display: -ms-flexbox;
@@ -16459,6 +21626,7 @@ a.mx_RoomPreviewBar_inviter {
max-height: 24px;
color: #8d99a5;
}
+
.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable {
-webkit-box-flex: 1;
-ms-flex: 1;
@@ -16471,13 +21639,15 @@ a.mx_RoomPreviewBar_inviter {
-ms-flex-align: center;
align-items: center;
}
+
.mx_RoomSublist
.mx_RoomSublist_headerContainer
.mx_RoomSublist_stickable.mx_RoomSublist_headerContainer_sticky {
position: fixed;
height: 32px;
- width: calc(100% - 22px);
+ width: calc(100% - 15px);
}
+
.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer {
display: -webkit-box;
display: -ms-flexbox;
@@ -16489,17 +21659,20 @@ a.mx_RoomPreviewBar_inviter {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_RoomSublist
.mx_RoomSublist_headerContainer
.mx_RoomSublist_badgeContainer
.mx_NotificationBadge {
margin-left: 8px;
}
+
.mx_RoomSublist
.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux)
.mx_NotificationBadge {
margin-right: 4px;
}
+
.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton,
.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton {
margin-left: 8px;
@@ -16508,6 +21681,7 @@ a.mx_RoomPreviewBar_inviter {
height: 24px;
border-radius: 8px;
}
+
.mx_RoomSublist
.mx_RoomSublist_headerContainer
.mx_RoomSublist_auxButton:before,
@@ -16528,29 +21702,34 @@ a.mx_RoomPreviewBar_inviter {
mask-repeat: no-repeat;
background: #61708b;
}
+
.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:hover,
.mx_RoomSublist
.mx_RoomSublist_headerContainer
.mx_RoomSublist_menuButton:hover {
background: rgba(141, 151, 165, 0.2);
}
+
.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton {
visibility: hidden;
width: 0;
margin: 0;
}
+
.mx_RoomSublist
.mx_RoomSublist_headerContainer
.mx_RoomSublist_auxButton:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/plus.daac9ba.svg);
mask-image: url(../../img/element-icons/roomlist/plus.daac9ba.svg);
}
+
.mx_RoomSublist
.mx_RoomSublist_headerContainer
.mx_RoomSublist_menuButton:before {
-webkit-mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
}
+
.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText {
-webkit-box-flex: 1;
-ms-flex: 1;
@@ -16563,6 +21742,7 @@ a.mx_RoomPreviewBar_inviter {
overflow: hidden;
white-space: nowrap;
}
+
.mx_RoomSublist
.mx_RoomSublist_headerContainer
.mx_RoomSublist_headerText
@@ -16573,6 +21753,7 @@ a.mx_RoomPreviewBar_inviter {
height: 14px;
margin-right: 6px;
}
+
.mx_RoomSublist
.mx_RoomSublist_headerContainer
.mx_RoomSublist_headerText
@@ -16591,6 +21772,7 @@ a.mx_RoomPreviewBar_inviter {
-webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
}
+
.mx_RoomSublist
.mx_RoomSublist_headerContainer
.mx_RoomSublist_headerText
@@ -16598,15 +21780,18 @@ a.mx_RoomPreviewBar_inviter {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
+
.mx_RoomSublist:first-child .mx_RoomSublist_headerContainer {
height: 0;
padding-bottom: 4px;
}
+
.mx_RoomSublist .mx_RoomSublist_resizeBox {
position: relative;
-ms-flex-direction: column;
flex-direction: column;
}
+
.mx_RoomSublist .mx_RoomSublist_resizeBox,
.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_tiles {
display: -webkit-box;
@@ -16616,15 +21801,19 @@ a.mx_RoomPreviewBar_inviter {
-webkit-box-direction: normal;
overflow: hidden;
}
+
.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_tiles {
-webkit-box-flex: 1;
-ms-flex: 1 0 0px;
flex: 1 0 0;
-ms-flex-direction: column;
flex-direction: column;
+ -ms-flex-item-align: stretch;
+ align-self: stretch;
-webkit-mask-image: linear-gradient(0deg, transparent, #000 4px);
mask-image: linear-gradient(0deg, transparent, #000 4px);
}
+
.mx_RoomSublist
.mx_RoomSublist_resizeBox
.mx_RoomSublist_resizerHandles_showNButton {
@@ -16632,6 +21821,7 @@ a.mx_RoomPreviewBar_inviter {
-ms-flex: 0 0 32px;
flex: 0 0 32px;
}
+
.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandles {
-webkit-box-flex: 0;
-ms-flex: 0 0 4px;
@@ -16644,6 +21834,7 @@ a.mx_RoomPreviewBar_inviter {
justify-content: center;
width: 100%;
}
+
.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandle {
cursor: ns-resize;
border-radius: 3px;
@@ -16652,6 +21843,7 @@ a.mx_RoomPreviewBar_inviter {
position: relative !important;
bottom: 0 !important;
}
+
.mx_RoomSublist
.mx_RoomSublist_resizeBox.mx_RoomSublist_hasMenuOpen
.mx_RoomSublist_resizerHandle,
@@ -16659,6 +21851,7 @@ a.mx_RoomPreviewBar_inviter {
opacity: 0.8;
background-color: #2e2f32;
}
+
.mx_RoomSublist .mx_RoomSublist_showNButton {
cursor: pointer;
font-size: 1.3rem;
@@ -16673,6 +21866,7 @@ a.mx_RoomPreviewBar_inviter {
-ms-flex-align: center;
align-items: center;
}
+
.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showNButtonChevron {
position: relative;
width: 18px;
@@ -16688,6 +21882,7 @@ a.mx_RoomPreviewBar_inviter {
background: #8d99a5;
left: -1px;
}
+
.mx_RoomSublist
.mx_RoomSublist_showNButton
.mx_RoomSublist_showLessButtonChevron,
@@ -16697,12 +21892,14 @@ a.mx_RoomPreviewBar_inviter {
-webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
}
+
.mx_RoomSublist
.mx_RoomSublist_showNButton
.mx_RoomSublist_showLessButtonChevron {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
+
.mx_RoomSublist.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton,
.mx_RoomSublist:not(.mx_RoomSublist_minimized)
> .mx_RoomSublist_headerContainer:focus-within
@@ -16714,6 +21911,7 @@ a.mx_RoomPreviewBar_inviter {
width: 24px;
margin-left: 8px;
}
+
.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer {
height: auto;
-webkit-box-orient: vertical;
@@ -16722,6 +21920,7 @@ a.mx_RoomPreviewBar_inviter {
flex-direction: column;
position: relative;
}
+
.mx_RoomSublist.mx_RoomSublist_minimized
.mx_RoomSublist_headerContainer
.mx_RoomSublist_badgeContainer {
@@ -16732,6 +21931,7 @@ a.mx_RoomPreviewBar_inviter {
align-self: flex-end;
margin-right: 0;
}
+
.mx_RoomSublist.mx_RoomSublist_minimized
.mx_RoomSublist_headerContainer
.mx_RoomSublist_stickable {
@@ -16740,6 +21940,7 @@ a.mx_RoomPreviewBar_inviter {
order: 1;
max-width: 100%;
}
+
.mx_RoomSublist.mx_RoomSublist_minimized
.mx_RoomSublist_headerContainer
.mx_RoomSublist_auxButton {
@@ -16753,31 +21954,37 @@ a.mx_RoomPreviewBar_inviter {
background-color: rgba(141, 151, 165, 0.2);
margin-top: 8px;
}
+
.mx_RoomSublist.mx_RoomSublist_minimized
.mx_RoomSublist_headerContainer
.mx_RoomSublist_auxButton:before {
top: 8px;
left: 8px;
}
+
.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_resizeBox {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
+
.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_showNButton {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
+
.mx_RoomSublist.mx_RoomSublist_minimized
.mx_RoomSublist_showNButton
.mx_RoomSublist_showNButtonChevron {
margin-right: 12px;
}
+
.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_menuButton {
height: 16px;
}
+
.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen
.mx_RoomSublist_menuButton,
.mx_RoomSublist.mx_RoomSublist_minimized
@@ -16793,6 +22000,7 @@ a.mx_RoomPreviewBar_inviter {
z-index: 1;
background-color: hsla(0, 0%, 96.1%, 0.9);
}
+
.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen
.mx_RoomSublist_menuButton:before,
.mx_RoomSublist.mx_RoomSublist_minimized
@@ -16801,6 +22009,7 @@ a.mx_RoomPreviewBar_inviter {
top: 0;
left: 0;
}
+
.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux)
.mx_RoomSublist_menuButton,
.mx_RoomSublist.mx_RoomSublist_minimized
@@ -16808,10 +22017,12 @@ a.mx_RoomPreviewBar_inviter {
.mx_RoomSublist_menuButton {
bottom: 8px;
}
+
.mx_RoomSublist_contextMenu {
padding: 20px 16px;
width: 250px;
}
+
.mx_RoomSublist_contextMenu hr {
margin-top: 16px;
margin-bottom: 16px;
@@ -16819,24 +22030,29 @@ a.mx_RoomPreviewBar_inviter {
border: 1px solid #2e2f32;
opacity: 0.1;
}
+
.mx_RoomSublist_contextMenu .mx_RoomSublist_contextMenu_title {
font-size: 1.5rem;
line-height: 2rem;
font-weight: 600;
margin-bottom: 4px;
}
+
.mx_RoomSublist_contextMenu .mx_Checkbox,
.mx_RoomSublist_contextMenu .mx_RadioButton {
margin-top: 8px;
}
+
.mx_RoomSublist_addRoomTooltip {
margin-top: -3px;
}
+
.mx_RoomSublist_skeletonUI {
position: relative;
margin-left: 4px;
height: 288px;
}
+
.mx_RoomSublist_skeletonUI:before {
background: -webkit-gradient(
linear,
@@ -16857,13 +22073,19 @@ a.mx_RoomPreviewBar_inviter {
-webkit-mask-image: url(../../img/element-icons/roomlist/skeleton-ui.1f67400.svg);
mask-image: url(../../img/element-icons/roomlist/skeleton-ui.1f67400.svg);
}
+
.mx_RoomTile {
margin-bottom: 4px;
padding: 4px;
+ contain: content;
+ height: 40px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_RoomTile.mx_RoomTile_hasMenuOpen,
.mx_RoomTile.mx_RoomTile_selected,
.mx_RoomTile:focus-within,
@@ -16871,10 +22093,12 @@ a.mx_RoomPreviewBar_inviter {
background-color: #fff;
border-radius: 8px;
}
+
.mx_RoomTile .mx_DecoratedRoomAvatar,
.mx_RoomTile .mx_RoomTile_avatarContainer {
margin-right: 8px;
}
+
.mx_RoomTile .mx_RoomTile_nameContainer {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
@@ -16892,6 +22116,7 @@ a.mx_RoomPreviewBar_inviter {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_messagePreview,
.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name {
margin: 0 2px;
@@ -16900,26 +22125,32 @@ a.mx_RoomPreviewBar_inviter {
overflow: hidden;
white-space: nowrap;
}
+
.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name {
font-size: 1.4rem;
line-height: 1.8rem;
}
+
.mx_RoomTile
.mx_RoomTile_nameContainer
.mx_RoomTile_name.mx_RoomTile_nameHasUnreadEvents {
font-weight: 600;
}
+
.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_messagePreview {
font-size: 1.3rem;
line-height: 1.8rem;
color: #737d8c;
}
+
.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_nameWithPreview {
margin-top: -4px;
}
+
.mx_RoomTile .mx_RoomTile_notificationsButton {
margin-left: 4px;
}
+
.mx_RoomTile .mx_RoomTile_badgeContainer {
height: 16px;
margin: auto 0;
@@ -16930,13 +22161,16 @@ a.mx_RoomPreviewBar_inviter {
-ms-flex-align: center;
align-items: center;
}
+
.mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge {
margin-right: 2px;
}
+
.mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge_dot {
margin-left: 5px;
margin-right: 7px;
}
+
.mx_RoomTile .mx_RoomTile_menuButton,
.mx_RoomTile .mx_RoomTile_notificationsButton {
width: 20px;
@@ -16947,6 +22181,7 @@ a.mx_RoomPreviewBar_inviter {
position: relative;
display: none;
}
+
.mx_RoomTile .mx_RoomTile_menuButton:before,
.mx_RoomTile .mx_RoomTile_notificationsButton:before {
top: 2px;
@@ -16963,14 +22198,17 @@ a.mx_RoomPreviewBar_inviter {
mask-repeat: no-repeat;
background: #2e2f32;
}
+
.mx_RoomTile
.mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
display: block;
}
+
.mx_RoomTile .mx_RoomTile_menuButton:before {
-webkit-mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
}
+
.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen
.mx_RoomTile_badgeContainer,
.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within
@@ -16980,6 +22218,7 @@ a.mx_RoomPreviewBar_inviter {
height: 0;
display: none;
}
+
.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen
.mx_RoomTile_menuButton,
.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen
@@ -16992,6 +22231,7 @@ a.mx_RoomPreviewBar_inviter {
.mx_RoomTile_notificationsButton {
display: block;
}
+
.mx_RoomTile.mx_RoomTile_minimized {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
@@ -17002,46 +22242,62 @@ a.mx_RoomPreviewBar_inviter {
align-items: center;
position: relative;
}
+
.mx_RoomTile.mx_RoomTile_minimized .mx_DecoratedRoomAvatar,
.mx_RoomTile.mx_RoomTile_minimized .mx_RoomTile_avatarContainer {
margin-right: 0;
}
+
.mx_RoomTile_iconBell:before {
-webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
mask-image: url(../../img/element-icons/notifications.d298b39.svg);
}
+
.mx_RoomTile_iconBellDot:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/notifications-default.8b8509e.svg);
mask-image: url(../../img/element-icons/roomlist/notifications-default.8b8509e.svg);
}
+
.mx_RoomTile_iconBellCrossed:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);
mask-image: url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);
}
+
.mx_RoomTile_iconBellMentions:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/notifications-dm.ffa8881.svg);
mask-image: url(../../img/element-icons/roomlist/notifications-dm.ffa8881.svg);
}
+
.mx_RoomTile_contextMenu .mx_RoomTile_iconStar:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/favorite.ff7609d.svg);
mask-image: url(../../img/element-icons/roomlist/favorite.ff7609d.svg);
}
+
.mx_RoomTile_contextMenu .mx_RoomTile_iconArrowDown:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/low-priority.6c7fb97.svg);
mask-image: url(../../img/element-icons/roomlist/low-priority.6c7fb97.svg);
}
+
.mx_RoomTile_contextMenu .mx_RoomTile_iconSettings:before {
-webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
mask-image: url(../../img/element-icons/settings.6b381af.svg);
}
+
+.mx_RoomTile_contextMenu .mx_RoomTile_iconCopyLink:before {
+ -webkit-mask-image: url(../../img/element-icons/link.8f4b1fc.svg);
+ mask-image: url(../../img/element-icons/link.8f4b1fc.svg);
+}
+
.mx_RoomTile_contextMenu .mx_RoomTile_iconInvite:before {
-webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
}
+
.mx_RoomTile_contextMenu .mx_RoomTile_iconSignOut:before {
-webkit-mask-image: url(../../img/element-icons/leave.bb917e7.svg);
mask-image: url(../../img/element-icons/leave.bb917e7.svg);
}
+
.mx_RoomUpgradeWarningBar {
max-height: 235px;
background-color: #f7f7f7;
@@ -17049,6 +22305,7 @@ a.mx_RoomPreviewBar_inviter {
padding-right: 20px;
overflow: scroll;
}
+
.mx_RoomUpgradeWarningBar_wrapped {
width: 100%;
height: 100%;
@@ -17068,21 +22325,26 @@ a.mx_RoomPreviewBar_inviter {
justify-content: center;
-webkit-align-items: center;
}
+
.mx_RoomUpgradeWarningBar_header {
color: #ff4b55;
font-weight: 700;
}
+
.mx_RoomUpgradeWarningBar_body {
color: #ff4b55;
}
+
.mx_RoomUpgradeWarningBar_upgradelink {
color: #ff4b55;
text-decoration: underline;
}
+
.mx_RoomUpgradeWarningBar_small {
color: #888;
font-size: 70%;
}
+
.mx_SearchBar {
height: 56px;
display: -webkit-box;
@@ -17093,12 +22355,14 @@ a.mx_RoomPreviewBar_inviter {
align-items: center;
border-bottom: 1px solid transparent;
}
+
.mx_SearchBar .mx_SearchBar_input {
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
margin-left: 22px;
}
+
.mx_SearchBar .mx_SearchBar_searchButton {
cursor: pointer;
width: 37px;
@@ -17111,9 +22375,11 @@ a.mx_RoomPreviewBar_inviter {
-webkit-mask-position: center;
mask-position: center;
}
+
.mx_SearchBar .mx_SearchBar_buttons {
display: inherit;
}
+
.mx_SearchBar .mx_SearchBar_button {
border: 0;
margin: 0 0 0 22px;
@@ -17124,10 +22390,12 @@ a.mx_RoomPreviewBar_inviter {
border-bottom: 2px solid #0dbd8b;
font-weight: 600;
}
+
.mx_SearchBar .mx_SearchBar_unselected {
color: #9fa9ba;
border-color: transparent;
}
+
.mx_SearchBar .mx_SearchBar_cancel {
background-color: #ff4b55;
-webkit-mask: url(../../img/cancel.4b9715b.svg);
@@ -17142,6 +22410,7 @@ a.mx_RoomPreviewBar_inviter {
margin: 0 12px 0 3px;
cursor: pointer;
}
+
.mx_SendMessageComposer {
-ms-flex: 1;
flex: 1;
@@ -17154,6 +22423,7 @@ a.mx_RoomPreviewBar_inviter {
margin-right: 6px;
min-width: 0;
}
+
.mx_SendMessageComposer,
.mx_SendMessageComposer .mx_BasicMessageComposer {
-webkit-box-flex: 1;
@@ -17163,13 +22433,15 @@ a.mx_RoomPreviewBar_inviter {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
}
+
.mx_SendMessageComposer .mx_BasicMessageComposer {
-ms-flex: 1;
flex: 1;
-ms-flex-direction: column;
flex-direction: column;
- min-height: 50px;
+ min-height: 55px;
}
+
.mx_SendMessageComposer
.mx_BasicMessageComposer
.mx_BasicMessageComposer_input {
@@ -17178,13 +22450,16 @@ a.mx_RoomPreviewBar_inviter {
max-height: 140px;
overflow-y: auto;
}
+
.mx_Stickers_content {
overflow: hidden;
}
+
.mx_Stickers_content_container {
overflow: hidden;
height: 300px;
}
+
#mx_persistedElement_stickerPicker .mx_AppTileFullWidth {
height: unset;
-webkit-box-sizing: border-box;
@@ -17193,12 +22468,15 @@ a.mx_RoomPreviewBar_inviter {
border-right: none;
border-bottom: none;
}
+
#mx_persistedElement_stickerPicker .mx_AppTileMenuBar {
padding: 0;
}
+
#mx_persistedElement_stickerPicker iframe {
height: 283px;
}
+
.mx_Stickers_contentPlaceholder {
display: -webkit-box;
display: -ms-flexbox;
@@ -17218,17 +22496,21 @@ a.mx_RoomPreviewBar_inviter {
justify-content: center;
text-align: center;
}
+
.mx_Stickers_contentPlaceholder p {
max-width: 200px;
}
+
.mx_Stickers_addLink {
display: inline;
cursor: pointer;
color: #0dbd8b;
}
+
.mx_Stickers_hideStickers {
z-index: 2001;
}
+
.mx_TopUnreadMessagesBar {
z-index: 1000;
position: absolute;
@@ -17236,6 +22518,7 @@ a.mx_RoomPreviewBar_inviter {
right: 24px;
width: 38px;
}
+
.mx_TopUnreadMessagesBar:after {
content: "";
position: absolute;
@@ -17248,6 +22531,7 @@ a.mx_RoomPreviewBar_inviter {
border: 6px solid #0dbd8b;
pointer-events: none;
}
+
.mx_TopUnreadMessagesBar_scrollUp {
height: 38px;
border-radius: 19px;
@@ -17257,6 +22541,7 @@ a.mx_RoomPreviewBar_inviter {
border: 1.3px solid #61708b;
cursor: pointer;
}
+
.mx_TopUnreadMessagesBar_scrollUp:before {
content: "";
position: absolute;
@@ -17272,6 +22557,7 @@ a.mx_RoomPreviewBar_inviter {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
+
.mx_TopUnreadMessagesBar_markAsRead {
display: block;
width: 18px;
@@ -17281,6 +22567,7 @@ a.mx_RoomPreviewBar_inviter {
border-radius: 10px;
margin: 5px auto;
}
+
.mx_TopUnreadMessagesBar_markAsRead:before {
content: "";
position: absolute;
@@ -17296,6 +22583,7 @@ a.mx_RoomPreviewBar_inviter {
mask-position: 4px 4px;
background: #61708b;
}
+
.mx_VoiceRecordComposerTile_stop {
width: 28px;
height: 28px;
@@ -17304,6 +22592,7 @@ a.mx_RoomPreviewBar_inviter {
margin-right: 16px;
position: relative;
}
+
.mx_VoiceRecordComposerTile_stop:after {
content: "";
width: 14px;
@@ -17314,27 +22603,31 @@ a.mx_RoomPreviewBar_inviter {
border-radius: 2px;
background-color: #ff4b55;
}
+
.mx_VoiceRecordComposerTile_delete {
- width: 14px;
- height: 18px;
+ width: 24px;
+ height: 24px;
vertical-align: middle;
- margin-right: 11px;
+ margin-right: 8px;
background-color: #8d99a5;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
- -webkit-mask-image: url(../../img/element-icons/trashcan.26f6c28.svg);
- mask-image: url(../../img/element-icons/trashcan.26f6c28.svg);
+ -webkit-mask-image: url(../../img/element-icons/trashcan.3b626db.svg);
+ mask-image: url(../../img/element-icons/trashcan.3b626db.svg);
}
+
.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer {
margin: 6px 12px 6px 6px;
position: relative;
}
+
.mx_MessageComposer_row
.mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording {
padding-left: 22px;
}
+
.mx_MessageComposer_row
.mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording:before {
-webkit-animation: recording-pulse 2s infinite;
@@ -17348,6 +22641,7 @@ a.mx_RoomPreviewBar_inviter {
top: 18px;
border-radius: 10px;
}
+
@-webkit-keyframes recording-pulse {
0% {
opacity: 1;
@@ -17359,6 +22653,7 @@ a.mx_RoomPreviewBar_inviter {
opacity: 1;
}
}
+
@keyframes recording-pulse {
0% {
opacity: 1;
@@ -17370,6 +22665,7 @@ a.mx_RoomPreviewBar_inviter {
opacity: 1;
}
}
+
.mx_WhoIsTypingTile {
margin-left: -18px;
padding-top: 18px;
@@ -17380,22 +22676,27 @@ a.mx_RoomPreviewBar_inviter {
-ms-flex-align: center;
align-items: center;
}
+
.mx_WhoIsTypingTile_avatars {
-webkit-box-flex: 0;
-ms-flex: 0 0 83px;
flex: 0 0 83px;
text-align: center;
}
+
.mx_WhoIsTypingTile_avatars > :not(:first-child) {
margin-left: -12px;
}
+
.mx_WhoIsTypingTile_avatars .mx_BaseAvatar_initial {
padding-top: 1px;
}
+
.mx_WhoIsTypingTile_avatars .mx_BaseAvatar {
border: 1px solid #fff;
border-radius: 40px;
}
+
.mx_WhoIsTypingTile_remainingAvatarPlaceholder {
position: relative;
display: inline-block;
@@ -17410,6 +22711,7 @@ a.mx_RoomPreviewBar_inviter {
vertical-align: top;
text-align: center;
}
+
.mx_WhoIsTypingTile_label {
-webkit-box-flex: 1;
-ms-flex: 1;
@@ -17418,6 +22720,7 @@ a.mx_RoomPreviewBar_inviter {
font-weight: 600;
color: #9e9e9e;
}
+
.mx_WhoIsTypingTile_label > span {
background-image: url(../../img/typing-indicator-2x.0eb9f0e.gif);
background-size: 25px;
@@ -17426,9 +22729,11 @@ a.mx_RoomPreviewBar_inviter {
padding-bottom: 15px;
display: block;
}
+
.mx_MatrixChat_useCompactLayout .mx_WhoIsTypingTile {
padding-top: 4px;
}
+
.mx_AvatarSetting_avatar {
width: 90px;
min-width: 90px;
@@ -17436,6 +22741,7 @@ a.mx_RoomPreviewBar_inviter {
margin-top: 8px;
position: relative;
}
+
.mx_AvatarSetting_avatar .mx_AvatarSetting_hover {
-webkit-transition: opacity 0.08s cubic-bezier(0.46, 0.03, 0.52, 0.96);
transition: opacity 0.08s cubic-bezier(0.46, 0.03, 0.52, 0.96);
@@ -17448,11 +22754,13 @@ a.mx_RoomPreviewBar_inviter {
line-height: 90px;
text-align: center;
}
+
.mx_AvatarSetting_avatar .mx_AvatarSetting_hover > span {
color: #fff;
position: relative;
font-weight: 500;
}
+
.mx_AvatarSetting_avatar .mx_AvatarSetting_hover .mx_AvatarSetting_hoverBg {
position: absolute;
top: 0;
@@ -17463,29 +22771,36 @@ a.mx_RoomPreviewBar_inviter {
background-color: #2e2f32;
border-radius: 90px;
}
+
.mx_AvatarSetting_avatar.mx_AvatarSetting_avatar_hovering
.mx_AvatarSetting_hover {
opacity: 1;
}
+
.mx_AvatarSetting_avatar:not(.mx_AvatarSetting_avatar_hovering)
.mx_AvatarSetting_hover {
opacity: 0;
}
+
.mx_AvatarSetting_avatar > * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
+
.mx_AvatarSetting_avatar .mx_AccessibleButton.mx_AccessibleButton_kind_primary {
margin-top: 8px;
}
+
.mx_AvatarSetting_avatar .mx_AccessibleButton.mx_AccessibleButton_kind_link_sm {
width: 100%;
}
+
.mx_AvatarSetting_avatar > img {
cursor: pointer;
-o-object-fit: cover;
object-fit: cover;
}
+
.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder,
.mx_AvatarSetting_avatar > img {
display: block;
@@ -17494,6 +22809,7 @@ a.mx_RoomPreviewBar_inviter {
border-radius: 90px;
cursor: pointer;
}
+
.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder:before {
background-color: #2e2f32;
-webkit-mask: url(../../img/feather-customised/user.7a4d23d.svg);
@@ -17511,6 +22827,7 @@ a.mx_RoomPreviewBar_inviter {
left: 0;
right: 0;
}
+
.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton {
width: 32px;
height: 32px;
@@ -17520,6 +22837,7 @@ a.mx_RoomPreviewBar_inviter {
bottom: 0;
right: 0;
}
+
.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton:before {
content: "";
display: block;
@@ -17535,64 +22853,82 @@ a.mx_RoomPreviewBar_inviter {
-webkit-mask-image: url(../../img/feather-customised/edit.fd55ec2.svg);
mask-image: url(../../img/feather-customised/edit.fd55ec2.svg);
}
+
.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder {
background-color: #f4f6fa;
}
+
.mx_CrossSigningPanel_statusList {
border-spacing: 0;
}
+
.mx_CrossSigningPanel_statusList td {
padding: 0;
}
+
.mx_CrossSigningPanel_statusList td:first-of-type {
-webkit-padding-end: 1em;
padding-inline-end: 1em;
}
+
.mx_CrossSigningPanel_buttonRow {
margin: 1em 0;
}
+
.mx_CrossSigningPanel_buttonRow :nth-child(n + 1) {
-webkit-margin-end: 10px;
margin-inline-end: 10px;
}
+
.mx_DevicesPanel {
display: table;
table-layout: fixed;
width: 880px;
border-spacing: 10px;
}
+
.mx_DevicesPanel_header {
display: table-header-group;
font-weight: 700;
}
+
.mx_DevicesPanel_header > .mx_DevicesPanel_deviceButtons {
height: 48px;
}
+
.mx_DevicesPanel_header > div {
display: table-cell;
vertical-align: middle;
}
+
.mx_DevicesPanel_header .mx_DevicesPanel_deviceName {
width: 50%;
}
+
.mx_DevicesPanel_header .mx_DevicesPanel_deviceLastSeen {
width: 30%;
}
+
.mx_DevicesPanel_header .mx_DevicesPanel_deviceButtons {
width: 20%;
}
+
.mx_DevicesPanel_device {
display: table-row;
}
+
.mx_DevicesPanel_device > div {
display: table-cell;
}
+
.mx_DevicesPanel_myDevice {
font-weight: 700;
}
+
.mx_E2eAdvancedPanel_settingLongDescription {
margin-right: 150px;
}
+
.mx_ExistingEmailAddress {
display: -webkit-box;
display: -ms-flexbox;
@@ -17602,11 +22938,13 @@ a.mx_RoomPreviewBar_inviter {
align-items: center;
margin-bottom: 5px;
}
+
.mx_ExistingEmailAddress_delete {
margin-right: 5px;
cursor: pointer;
vertical-align: middle;
}
+
.mx_ExistingEmailAddress_email,
.mx_ExistingEmailAddress_promptText {
-webkit-box-flex: 1;
@@ -17614,9 +22952,11 @@ a.mx_RoomPreviewBar_inviter {
flex: 1;
margin-right: 10px;
}
+
.mx_ExistingEmailAddress_confirmBtn {
margin-left: 5px;
}
+
.mx_IntegrationManager .mx_Dialog {
width: 60%;
height: 70%;
@@ -17625,86 +22965,117 @@ a.mx_RoomPreviewBar_inviter {
max-width: none;
max-height: none;
}
+
.mx_IntegrationManager iframe {
background-color: #fff;
border: 0;
width: 100%;
height: 100%;
}
+
.mx_IntegrationManager_loading h3 {
text-align: center;
}
+
.mx_IntegrationManager_error {
text-align: center;
padding-top: 20px;
}
+
.mx_IntegrationManager_error h3 {
color: #ff4b55;
}
-.mx_UserNotifSettings_tableRow {
- display: table-row;
+
+.mx_UserNotifSettings {
+ color: #2e2f32;
}
-.mx_UserNotifSettings_inputCell {
- display: table-cell;
- padding-bottom: 8px;
- padding-right: 8px;
- width: 16px;
-}
-.mx_UserNotifSettings_labelCell {
- padding-bottom: 8px;
- width: 400px;
- display: table-cell;
-}
-.mx_UserNotifSettings_pushRulesTableWrapper {
- padding-bottom: 8px;
-}
-.mx_UserNotifSettings_pushRulesTable {
- width: 100%;
+
+.mx_UserNotifSettings .mx_UserNotifSettings_pushRulesTable {
+ width: calc(100% + 12px);
table-layout: fixed;
+ border-collapse: collapse;
+ border-spacing: 0;
+ margin-top: 40px;
}
-.mx_UserNotifSettings_pushRulesTable thead {
- font-weight: 700;
+
+.mx_UserNotifSettings .mx_UserNotifSettings_pushRulesTable tr > th {
+ font-weight: 600;
}
-.mx_UserNotifSettings_pushRulesTable tbody th {
- font-weight: 400;
-}
-.mx_UserNotifSettings_pushRulesTable tbody th:first-child {
+
+.mx_UserNotifSettings .mx_UserNotifSettings_pushRulesTable tr > th:first-child {
text-align: left;
+ font-size: 1.8rem;
}
-.mx_UserNotifSettings_keywords {
- cursor: pointer;
- color: #0dbd8b;
+
+.mx_UserNotifSettings
+ .mx_UserNotifSettings_pushRulesTable
+ tr
+ > th:nth-child(n + 2) {
+ color: #737d8c;
+ font-size: 1.2rem;
+ vertical-align: middle;
+ width: 66px;
}
-.mx_UserNotifSettings_devicesTable td {
- padding-left: 20px;
- padding-right: 20px;
+
+.mx_UserNotifSettings
+ .mx_UserNotifSettings_pushRulesTable
+ tr
+ > td:nth-child(n + 2) {
+ text-align: center;
}
-.mx_UserNotifSettings_notifTable {
- display: table;
- position: relative;
+
+.mx_UserNotifSettings .mx_UserNotifSettings_pushRulesTable tr > td {
+ padding-top: 8px;
}
-.mx_UserNotifSettings_notifTable .mx_Spinner {
- position: absolute;
+
+.mx_UserNotifSettings .mx_UserNotifSettings_pushRulesTable .mx_RadioButton {
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
}
-.mx_NotificationSound_soundUpload {
+
+.mx_UserNotifSettings
+ .mx_UserNotifSettings_pushRulesTable
+ .mx_RadioButton
+ .mx_RadioButton_content,
+.mx_UserNotifSettings
+ .mx_UserNotifSettings_pushRulesTable
+ .mx_RadioButton
+ .mx_RadioButton_spacer {
display: none;
}
-.mx_NotificationSound_browse {
- color: #0dbd8b;
- border: 1px solid #0dbd8b;
- background-color: transparent;
+
+.mx_UserNotifSettings .mx_UserNotifSettings_floatingSection {
+ margin-top: 40px;
}
-.mx_NotificationSound_save {
- margin-left: 5px;
- color: #fff;
- background-color: #0dbd8b;
+
+.mx_UserNotifSettings .mx_UserNotifSettings_floatingSection > div:first-child {
+ font-size: 1.8rem;
+ font-weight: 600;
}
-.mx_NotificationSound_resetSound {
- margin-top: 5px;
- color: #fff;
- border: #ff4b55;
- background-color: #ff4b55;
+
+.mx_UserNotifSettings .mx_UserNotifSettings_floatingSection > table {
+ border-collapse: collapse;
+ border-spacing: 0;
+ margin-top: 8px;
}
+
+.mx_UserNotifSettings
+ .mx_UserNotifSettings_floatingSection
+ > table
+ tr
+ > td:first-child {
+ padding-right: 8px;
+}
+
+.mx_UserNotifSettings .mx_UserNotifSettings_clearNotifsButton {
+ margin-top: 8px;
+}
+
+.mx_UserNotifSettings .mx_TagComposer {
+ margin-top: 35px;
+}
+
.mx_ExistingPhoneNumber {
display: -webkit-box;
display: -ms-flexbox;
@@ -17714,11 +23085,13 @@ a.mx_RoomPreviewBar_inviter {
align-items: center;
margin-bottom: 5px;
}
+
.mx_ExistingPhoneNumber_delete {
margin-right: 5px;
cursor: pointer;
vertical-align: middle;
}
+
.mx_ExistingPhoneNumber_address,
.mx_ExistingPhoneNumber_promptText {
-webkit-box-flex: 1;
@@ -17726,9 +23099,11 @@ a.mx_RoomPreviewBar_inviter {
flex: 1;
margin-right: 10px;
}
+
.mx_ExistingPhoneNumber_confirmBtn {
margin-left: 5px;
}
+
.mx_ExistingPhoneNumber_verification {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
@@ -17737,9 +23112,11 @@ a.mx_RoomPreviewBar_inviter {
-ms-flex-align: center;
align-items: center;
}
+
.mx_ExistingPhoneNumber_verification .mx_Field {
margin: 0 0 0 1em;
}
+
.mx_PhoneNumbers_input {
display: -webkit-box;
display: -ms-flexbox;
@@ -17748,116 +23125,146 @@ a.mx_RoomPreviewBar_inviter {
-ms-flex-align: center;
align-items: center;
}
+
.mx_PhoneNumbers_input > .mx_Field {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
+
.mx_PhoneNumbers_country {
width: 80px;
}
+
.mx_ProfileSettings_controls_topic > textarea {
resize: vertical;
}
+
.mx_ProfileSettings_profile {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_ProfileSettings_controls {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
margin-right: 54px;
}
+
.mx_ProfileSettings_controls .mx_SettingsTab_subheading {
margin-top: 0;
}
+
.mx_ProfileSettings_controls .mx_Field #profileTopic {
height: 4em;
}
+
.mx_ProfileSettings_controls .mx_Field:first-child {
margin-top: 0;
}
+
.mx_ProfileSettings_hostingSignup {
margin-left: 20px;
}
+
.mx_ProfileSettings_hostingSignup img {
margin-left: 5px;
}
+
.mx_ProfileSettings_avatarUpload {
display: none;
}
+
.mx_ProfileSettings_profileForm {
margin-right: 100px;
border-bottom: 1px solid #e7e7e7;
}
+
.mx_ProfileSettings_buttons {
margin-top: 10px;
margin-bottom: 28px;
}
+
.mx_ProfileSettings_buttons > .mx_AccessibleButton_kind_link {
padding-left: 0;
}
+
.mx_SecureBackupPanel_deviceNotVerified,
.mx_SecureBackupPanel_deviceVerified,
.mx_SecureBackupPanel_sigInvalid,
.mx_SecureBackupPanel_sigValid {
font-weight: 700;
}
+
.mx_SecureBackupPanel_deviceVerified,
.mx_SecureBackupPanel_sigValid {
color: #76cfa5;
}
+
.mx_SecureBackupPanel_deviceNotVerified,
.mx_SecureBackupPanel_sigInvalid {
color: #ba6363;
}
+
.mx_SecureBackupPanel_deviceName {
font-style: italic;
}
+
.mx_SecureBackupPanel_buttonRow {
margin: 1em 0;
}
+
.mx_SecureBackupPanel_buttonRow :nth-child(n + 1) {
-webkit-margin-end: 10px;
margin-inline-end: 10px;
}
+
.mx_SecureBackupPanel_statusList {
border-spacing: 0;
}
+
.mx_SecureBackupPanel_statusList td {
padding: 0;
}
+
.mx_SecureBackupPanel_statusList td:first-of-type {
-webkit-padding-end: 1em;
padding-inline-end: 1em;
}
+
.mx_SetIdServer .mx_Field_input {
margin-right: 100px;
}
+
.mx_SetIdServer_tooltip {
max-width: 120px;
}
+
.mx_SetIntegrationManager {
margin-top: 10px;
margin-bottom: 10px;
}
+
.mx_SetIntegrationManager > .mx_SettingsTab_heading {
margin-bottom: 10px;
}
+
.mx_SetIntegrationManager
> .mx_SettingsTab_heading
> .mx_SettingsTab_subheading {
display: inline-block;
padding-left: 5px;
}
+
.mx_SetIntegrationManager .mx_ToggleSwitch {
display: inline-block;
float: right;
top: 9px;
margin-right: 100px;
}
+
.mx_ExistingSpellCheckLanguage {
display: -webkit-box;
display: -ms-flexbox;
@@ -17867,65 +23274,81 @@ a.mx_RoomPreviewBar_inviter {
align-items: center;
margin-bottom: 5px;
}
+
.mx_ExistingSpellCheckLanguage_language {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
margin-right: 10px;
}
+
.mx_GeneralUserSettingsTab_spellCheckLanguageInput {
margin-top: 1em;
margin-bottom: 1em;
}
+
.mx_SpellCheckLanguages {
margin-right: 100px;
}
+
.mx_UpdateCheckButton_summary {
margin-left: 16px;
}
+
.mx_UpdateCheckButton_summary .mx_AccessibleButton_kind_link {
padding: 0;
}
+
.mx_SettingsTab {
color: #61708b;
}
+
.mx_SettingsTab_warningText {
color: #ff4b55;
}
+
.mx_SettingsTab_heading {
font-size: 2rem;
font-weight: 600;
color: #2e2f32;
margin-bottom: 10px;
}
+
.mx_SettingsTab_heading:nth-child(n + 2) {
margin-top: 30px;
}
+
.mx_SettingsTab_subheading {
font-size: 1.6rem;
display: block;
- font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
+ Helvetica, Sans-Serif, Noto Color Emoji;
font-weight: 600;
color: #2e2f32;
margin-bottom: 10px;
margin-top: 12px;
}
+
.mx_SettingsTab_subsectionText {
color: #61708b;
font-size: 1.4rem;
display: block;
- margin: 10px 100px 10px 0;
+ margin: 10px 80px 10px 0;
}
+
.mx_SettingsTab_section {
margin-bottom: 24px;
}
+
.mx_SettingsTab_section .mx_SettingsFlag {
- margin-right: 100px;
+ margin-right: 80px;
margin-bottom: 10px;
}
+
.mx_SettingsTab_section.mx_SettingsTab_subsectionText .mx_SettingsFlag {
margin-right: 0 !important;
}
+
.mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label {
vertical-align: middle;
display: inline-block;
@@ -17936,50 +23359,155 @@ a.mx_RoomPreviewBar_inviter {
box-sizing: border-box;
padding-right: 10px;
}
+
.mx_SettingsTab_section .mx_SettingsFlag .mx_ToggleSwitch {
float: right;
}
+
.mx_SettingsTab_linkBtn {
cursor: pointer;
color: #0dbd8b;
word-break: break-all;
}
+
.mx_SettingsTab a {
color: #238cf5;
}
+
.mx_GeneralRoomSettingsTab_profileSection {
margin-top: 10px;
}
+
.mx_RolesRoomSettingsTab ul {
margin-bottom: 0;
}
+
.mx_RolesRoomSettingsTab_unbanBtn {
margin-right: 10px;
margin-bottom: 5px;
}
+
+.mx_SecurityRoomSettingsTab .mx_SettingsTab_showAdvanced {
+ padding: 0;
+ margin-bottom: 16px;
+}
+
+.mx_SecurityRoomSettingsTab .mx_SecurityRoomSettingsTab_spacesWithAccess > h4 {
+ color: #737d8c;
+ font-weight: 600;
+ font-size: 1.2rem;
+ line-height: 1.5rem;
+ text-transform: uppercase;
+}
+
+.mx_SecurityRoomSettingsTab
+ .mx_SecurityRoomSettingsTab_spacesWithAccess
+ > span {
+ font-weight: 500;
+ font-size: 1.4rem;
+ line-height: 32px;
+ color: #737d8c;
+ display: inline-block;
+}
+
+.mx_SecurityRoomSettingsTab
+ .mx_SecurityRoomSettingsTab_spacesWithAccess
+ > span
+ .mx_RoomAvatar_isSpaceRoom
+ img,
+.mx_SecurityRoomSettingsTab
+ .mx_SecurityRoomSettingsTab_spacesWithAccess
+ > span
+ img.mx_RoomAvatar_isSpaceRoom {
+ border-radius: 8px;
+}
+
+.mx_SecurityRoomSettingsTab
+ .mx_SecurityRoomSettingsTab_spacesWithAccess
+ > span
+ .mx_BaseAvatar {
+ margin-right: 8px;
+}
+
+.mx_SecurityRoomSettingsTab
+ .mx_SecurityRoomSettingsTab_spacesWithAccess
+ > span
+ + span {
+ margin-left: 16px;
+}
+
.mx_SecurityRoomSettingsTab_warning {
display: block;
}
+
.mx_SecurityRoomSettingsTab_warning img {
vertical-align: middle;
margin-right: 5px;
margin-left: 3px;
margin-bottom: 5px;
}
+
.mx_SecurityRoomSettingsTab_encryptionSection {
- margin-bottom: 25px;
+ padding-bottom: 24px;
+ border-bottom: 1px solid #e7e7e7;
+ margin-bottom: 32px;
}
+
+.mx_SecurityRoomSettingsTab_upgradeRequired {
+ margin-left: 16px;
+ padding: 4px 16px;
+ border: 1px solid #0dbd8b;
+ border-radius: 8px;
+ color: #0dbd8b;
+ font-size: 1.2rem;
+ line-height: 1.5rem;
+}
+
+.mx_SecurityRoomSettingsTab_joinRule .mx_RadioButton {
+ padding-top: 16px;
+ margin-bottom: 8px;
+}
+
+.mx_SecurityRoomSettingsTab_joinRule .mx_RadioButton .mx_RadioButton_content {
+ margin-left: 14px;
+ font-weight: 600;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+ color: #2e2f32;
+ display: block;
+}
+
+.mx_SecurityRoomSettingsTab_joinRule > span {
+ display: inline-block;
+ margin-left: 34px;
+ margin-bottom: 16px;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+ color: #737d8c;
+}
+
+.mx_SecurityRoomSettingsTab_joinRule > span + .mx_RadioButton {
+ border-top: 1px solid #e7e7e7;
+}
+
+.mx_SecurityRoomSettingsTab_joinRule .mx_AccessibleButton_kind_link {
+ padding: 0;
+ font-size: inherit;
+}
+
.mx_AppearanceUserSettingsTab_fontSlider,
-.mx_AppearanceUserSettingsTab_fontSlider_preview,
-.mx_AppearanceUserSettingsTab_Layout {
+.mx_AppearanceUserSettingsTab_fontSlider_preview {
margin-right: 100px;
}
+
.mx_AppearanceUserSettingsTab .mx_Field {
width: 256px;
}
+
.mx_AppearanceUserSettingsTab_fontScaling {
color: #2e2f32;
}
+
.mx_AppearanceUserSettingsTab_fontSlider {
display: -webkit-box;
display: -ms-flexbox;
@@ -17998,36 +23526,50 @@ a.mx_RoomPreviewBar_inviter {
margin-top: 24px;
margin-bottom: 24px;
}
+
.mx_AppearanceUserSettingsTab_fontSlider_preview {
border: 1px solid #e3e8f0;
border-radius: 10px;
padding: 0 16px 9px;
pointer-events: none;
+ display: flow-root;
}
+
+.mx_AppearanceUserSettingsTab_fontSlider_preview
+ .mx_EventTile[data-layout="bubble"] {
+ margin-top: 30px;
+}
+
.mx_AppearanceUserSettingsTab_fontSlider_preview .mx_EventTile_msgOption {
display: none;
}
+
.mx_AppearanceUserSettingsTab_fontSlider_preview.mx_IRCLayout {
padding-top: 9px;
}
+
.mx_AppearanceUserSettingsTab_fontSlider_smallText {
font-size: 15px;
padding-right: 20px;
padding-left: 5px;
font-weight: 500;
}
+
.mx_AppearanceUserSettingsTab_fontSlider_largeText {
font-size: 18px;
padding-left: 20px;
padding-right: 5px;
font-weight: 500;
}
+
.mx_AppearanceUserSettingsTab > .mx_SettingsTab_SubHeading {
margin-bottom: 32px;
}
+
.mx_AppearanceUserSettingsTab_themeSection {
color: #2e2f32;
}
+
.mx_AppearanceUserSettingsTab_themeSection > .mx_ThemeSelectors {
display: -webkit-box;
display: -ms-flexbox;
@@ -18041,6 +23583,7 @@ a.mx_RoomPreviewBar_inviter {
margin-top: 4px;
margin-bottom: 30px;
}
+
.mx_AppearanceUserSettingsTab_themeSection
> .mx_ThemeSelectors
> .mx_RadioButton {
@@ -18061,6 +23604,7 @@ a.mx_RoomPreviewBar_inviter {
font-weight: 600;
color: #61708b;
}
+
.mx_AppearanceUserSettingsTab_themeSection
> .mx_ThemeSelectors
> .mx_RadioButton
@@ -18069,23 +23613,27 @@ a.mx_RoomPreviewBar_inviter {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_AppearanceUserSettingsTab_themeSection
> .mx_ThemeSelectors
> .mx_RadioButton_enabled {
opacity: 1;
}
+
.mx_AppearanceUserSettingsTab_themeSection
> .mx_ThemeSelectors
> .mx_RadioButton_enabled.mx_ThemeSelector_light {
background-color: #f3f8fd;
color: #2e2f32;
}
+
.mx_AppearanceUserSettingsTab_themeSection
> .mx_ThemeSelectors
> .mx_RadioButton_enabled.mx_ThemeSelector_dark {
background-color: #25282e;
color: #f3f8fd;
}
+
.mx_AppearanceUserSettingsTab_themeSection
> .mx_ThemeSelectors
> .mx_RadioButton_enabled.mx_ThemeSelector_dark
@@ -18099,12 +23647,14 @@ a.mx_RoomPreviewBar_inviter {
> div {
border-color: #e3e8f0;
}
+
.mx_AppearanceUserSettingsTab_themeSection
> .mx_ThemeSelectors
> .mx_RadioButton_enabled.mx_ThemeSelector_black {
background-color: #000;
color: #f3f8fd;
}
+
.mx_AppearanceUserSettingsTab_themeSection
> .mx_ThemeSelectors
> .mx_RadioButton_enabled.mx_ThemeSelector_black
@@ -18118,9 +23668,11 @@ a.mx_RoomPreviewBar_inviter {
> div {
border-color: #e3e8f0;
}
+
.mx_SettingsTab_customFontSizeField {
margin-left: calc(1.6rem + 10px);
}
+
.mx_AppearanceUserSettingsTab_Layout_RadioButtons {
display: -webkit-box;
display: -ms-flexbox;
@@ -18129,12 +23681,11 @@ a.mx_RoomPreviewBar_inviter {
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
+ grid-gap: 24px;
+ gap: 24px;
color: #2e2f32;
}
-.mx_AppearanceUserSettingsTab_Layout_RadioButtons
- .mx_AppearanceUserSettingsTab_spacer {
- width: 24px;
-}
+
.mx_AppearanceUserSettingsTab_Layout_RadioButtons
> .mx_AppearanceUserSettingsTab_Layout_RadioButton {
-webkit-box-flex: 0;
@@ -18153,6 +23704,7 @@ a.mx_RoomPreviewBar_inviter {
border: 1px solid #e3e8f0;
border-radius: 10px;
}
+
.mx_AppearanceUserSettingsTab_Layout_RadioButtons
> .mx_AppearanceUserSettingsTab_Layout_RadioButton
.mx_EventTile_msgOption,
@@ -18161,6 +23713,7 @@ a.mx_RoomPreviewBar_inviter {
.mx_MessageActionBar {
display: none;
}
+
.mx_AppearanceUserSettingsTab_Layout_RadioButtons
> .mx_AppearanceUserSettingsTab_Layout_RadioButton
.mx_AppearanceUserSettingsTab_Layout_RadioButton_preview {
@@ -18176,6 +23729,7 @@ a.mx_RoomPreviewBar_inviter {
padding: 10px;
pointer-events: none;
}
+
.mx_AppearanceUserSettingsTab_Layout_RadioButtons
> .mx_AppearanceUserSettingsTab_Layout_RadioButton
.mx_RadioButton {
@@ -18184,48 +23738,81 @@ a.mx_RoomPreviewBar_inviter {
flex-grow: 0;
padding: 10px;
}
+
.mx_AppearanceUserSettingsTab_Layout_RadioButtons
> .mx_AppearanceUserSettingsTab_Layout_RadioButton
.mx_EventTile_content {
margin-right: 0;
}
+
.mx_AppearanceUserSettingsTab_Layout_RadioButtons
> .mx_AppearanceUserSettingsTab_Layout_RadioButton.mx_AppearanceUserSettingsTab_Layout_RadioButton_selected {
border-color: #0dbd8b;
}
+
.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton {
border-top: 1px solid #e3e8f0;
}
+
.mx_AppearanceUserSettingsTab_Layout_RadioButtons
.mx_RadioButton
> input
+ div {
border-color: rgba(97, 112, 139, 0.2);
}
+
.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton_checked {
background-color: rgba(13, 189, 139, 0.08);
}
+
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_EventTile {
+ margin: 0;
+}
+
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons
+ .mx_EventTile[data-layout="bubble"] {
+ margin-right: 40px;
+}
+
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons
+ .mx_EventTile[data-layout="irc"]
+ > a {
+ display: none;
+}
+
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons
+ .mx_EventTile
+ .mx_EventTile_line {
+ max-width: 90%;
+}
+
.mx_AppearanceUserSettingsTab_Advanced {
color: #2e2f32;
}
+
.mx_AppearanceUserSettingsTab_Advanced > * {
margin-bottom: 16px;
}
+
.mx_AppearanceUserSettingsTab_Advanced
.mx_AppearanceUserSettingsTab_AdvancedToggle {
color: #0dbd8b;
cursor: pointer;
}
+
.mx_AppearanceUserSettingsTab_Advanced
.mx_AppearanceUserSettingsTab_systemFont {
margin-left: calc(1.6rem + 10px);
}
+
.mx_GeneralUserSettingsTab_changePassword .mx_Field {
margin-right: 100px;
}
+
.mx_GeneralUserSettingsTab_changePassword .mx_Field:first-child {
margin-top: 0;
}
+
.mx_GeneralUserSettingsTab_accountSection
.mx_SettingsTab_subheading:nth-child(n + 1),
.mx_GeneralUserSettingsTab_discovery
@@ -18233,12 +23820,14 @@ a.mx_RoomPreviewBar_inviter {
.mx_SetIdServer .mx_SettingsTab_subheading {
margin-top: 24px;
}
+
.mx_GeneralUserSettingsTab_accountSection .mx_Spinner,
.mx_GeneralUserSettingsTab_discovery .mx_Spinner {
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;
}
+
.mx_GeneralUserSettingsTab_accountSection .mx_EmailAddresses,
.mx_GeneralUserSettingsTab_accountSection .mx_PhoneNumbers,
.mx_GeneralUserSettingsTab_discovery .mx_ExistingEmailAddress,
@@ -18246,16 +23835,20 @@ a.mx_RoomPreviewBar_inviter {
.mx_GeneralUserSettingsTab_languageInput {
margin-right: 100px;
}
+
.mx_GeneralUserSettingsTab_warningIcon {
vertical-align: middle;
}
+
.mx_HelpUserSettingsTab_debugButton {
margin-bottom: 5px;
margin-top: 5px;
}
+
.mx_HelpUserSettingsTab span.mx_AccessibleButton {
word-break: break-word;
}
+
.mx_HelpUserSettingsTab code {
word-break: break-all;
-webkit-user-select: all;
@@ -18263,6 +23856,7 @@ a.mx_RoomPreviewBar_inviter {
-ms-user-select: all;
user-select: all;
}
+
.mx_HelpUserSettingsTab_accessToken {
display: -webkit-box;
display: -ms-flexbox;
@@ -18276,6 +23870,7 @@ a.mx_RoomPreviewBar_inviter {
margin-top: 10px;
padding: 10px;
}
+
.mx_HelpUserSettingsTab_accessToken_copy {
-ms-flex-negative: 0;
flex-shrink: 0;
@@ -18283,6 +23878,7 @@ a.mx_RoomPreviewBar_inviter {
margin-left: 20px;
display: inherit;
}
+
.mx_HelpUserSettingsTab_accessToken_copy > div {
-webkit-mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
@@ -18292,68 +23888,86 @@ a.mx_RoomPreviewBar_inviter {
height: 20px;
background-repeat: no-repeat;
}
+
.mx_LabsUserSettingsTab .mx_SettingsTab_section {
margin-top: 32px;
}
+
.mx_LabsUserSettingsTab .mx_SettingsTab_section .mx_SettingsFlag {
margin-right: 0;
}
+
.mx_MjolnirUserSettingsTab .mx_Field {
margin-right: 100px;
}
+
.mx_MjolnirUserSettingsTab_listItem {
margin-bottom: 2px;
}
+
.mx_NotificationUserSettingsTab .mx_SettingsTab_heading {
margin-bottom: 10px;
}
+
.mx_PreferencesUserSettingsTab .mx_Field {
margin-right: 100px;
}
+
.mx_PreferencesUserSettingsTab .mx_SettingsTab_section {
margin-bottom: 30px;
}
+
.mx_SecurityUserSettingsTab .mx_DevicesPanel {
width: auto;
max-width: 880px;
}
+
.mx_SecurityUserSettingsTab_deviceInfo {
display: table;
padding-left: 0;
}
+
.mx_SecurityUserSettingsTab_deviceInfo > li {
display: table-row;
}
+
.mx_SecurityUserSettingsTab_deviceInfo > li > label,
.mx_SecurityUserSettingsTab_deviceInfo > li > span {
display: table-cell;
padding-right: 1em;
}
+
.mx_SecurityUserSettingsTab_bulkOptions .mx_AccessibleButton,
.mx_SecurityUserSettingsTab_importExportButtons .mx_AccessibleButton {
margin-right: 10px;
}
+
.mx_SecurityUserSettingsTab_importExportButtons {
margin-bottom: 15px;
}
+
.mx_SecurityUserSettingsTab_ignoredUser {
margin-bottom: 5px;
}
+
.mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton {
margin-right: 10px;
}
+
.mx_SecurityUserSettingsTab
.mx_SettingsTab_section
.mx_AccessibleButton_kind_link {
padding: 0;
font-size: inherit;
}
+
.mx_SecurityUserSettingsTab .mx_SecurityUserSettingsTab_warning {
color: #ff4b55;
position: relative;
padding-left: 40px;
margin-top: 30px;
}
+
.mx_SecurityUserSettingsTab .mx_SecurityUserSettingsTab_warning:before {
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
@@ -18371,21 +23985,26 @@ a.mx_RoomPreviewBar_inviter {
-webkit-mask-image: url(../../img/feather-customised/alert-triangle.38aca3a.svg);
mask-image: url(../../img/feather-customised/alert-triangle.38aca3a.svg);
}
+
.mx_VoiceUserSettingsTab .mx_Field {
margin-right: 100px;
}
+
.mx_VoiceUserSettingsTab_missingMediaPermissions {
margin-bottom: 15px;
}
+
.mx_SpaceBasicSettings .mx_Field {
- margin: 32px 0;
+ margin: 24px 0;
}
+
.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 24px;
}
+
.mx_SpaceBasicSettings
.mx_SpaceBasicSettings_avatarContainer
.mx_SpaceBasicSettings_avatar {
@@ -18395,6 +24014,7 @@ a.mx_RoomPreviewBar_inviter {
background-color: #8d99a5;
border-radius: 16px;
}
+
.mx_SpaceBasicSettings
.mx_SpaceBasicSettings_avatarContainer
img.mx_SpaceBasicSettings_avatar {
@@ -18404,11 +24024,13 @@ a.mx_RoomPreviewBar_inviter {
object-fit: cover;
border-radius: 16px;
}
+
.mx_SpaceBasicSettings
.mx_SpaceBasicSettings_avatarContainer
div.mx_SpaceBasicSettings_avatar {
cursor: pointer;
}
+
.mx_SpaceBasicSettings
.mx_SpaceBasicSettings_avatarContainer
div.mx_SpaceBasicSettings_avatar:before {
@@ -18428,11 +24050,13 @@ a.mx_RoomPreviewBar_inviter {
-webkit-mask-image: url(../../img/element-icons/camera.a81a395.svg);
mask-image: url(../../img/element-icons/camera.a81a395.svg);
}
+
.mx_SpaceBasicSettings
.mx_SpaceBasicSettings_avatarContainer
> input[type="file"] {
display: none;
}
+
.mx_SpaceBasicSettings
.mx_SpaceBasicSettings_avatarContainer
> .mx_AccessibleButton_kind_link {
@@ -18441,12 +24065,14 @@ a.mx_RoomPreviewBar_inviter {
margin: auto 16px;
color: #368bd6;
}
+
.mx_SpaceBasicSettings
.mx_SpaceBasicSettings_avatarContainer
> .mx_SpaceBasicSettings_avatar_remove {
color: #ff4b55;
}
-.mx_SpaceBasicSettings .mx_FormButton {
+
+.mx_SpaceBasicSettings .mx_AccessibleButton_hasKind {
padding: 8px 22px;
margin-left: auto;
display: block;
@@ -18454,14 +24080,17 @@ a.mx_RoomPreviewBar_inviter {
width: -moz-min-content;
width: min-content;
}
+
.mx_SpaceBasicSettings .mx_AccessibleButton_disabled {
cursor: not-allowed;
}
+
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu_background {
background-color: rgba(46, 48, 51, 0.38);
opacity: 0.6;
left: 71px;
}
+
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu {
padding: 24px;
width: 480px;
@@ -18470,21 +24099,25 @@ a.mx_RoomPreviewBar_inviter {
background-color: #fff;
position: relative;
}
+
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu > div > h2 {
font-weight: 600;
font-size: 1.8rem;
margin-top: 4px;
}
+
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu > div > p {
font-size: 1.5rem;
color: #737d8c;
margin: 0;
}
+
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_BetaCard_betaPill {
position: absolute;
top: 24px;
right: 24px;
}
+
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType {
position: relative;
padding: 16px 32px 16px 72px;
@@ -18496,13 +24129,16 @@ a.mx_RoomPreviewBar_inviter {
font-size: 1.5rem;
margin: 20px 0;
}
+
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType > h3 {
font-weight: 600;
margin: 0 0 4px;
}
+
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType > span {
color: #737d8c;
}
+
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:before {
position: absolute;
content: "";
@@ -18518,32 +24154,38 @@ a.mx_RoomPreviewBar_inviter {
mask-size: 24px;
background-color: #8d99a5;
}
+
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover {
border-color: #0dbd8b;
}
+
.mx_SpaceCreateMenu_wrapper
.mx_ContextualMenu
.mx_SpaceCreateMenuType:hover:before {
background-color: #0dbd8b;
}
+
.mx_SpaceCreateMenu_wrapper
.mx_ContextualMenu
.mx_SpaceCreateMenuType:hover
> span {
color: #2e2f32;
}
+
.mx_SpaceCreateMenu_wrapper
.mx_ContextualMenu
.mx_SpaceCreateMenuType_public:before {
-webkit-mask-image: url(../../img/globe.8201f08.svg);
mask-image: url(../../img/globe.8201f08.svg);
}
+
.mx_SpaceCreateMenu_wrapper
.mx_ContextualMenu
.mx_SpaceCreateMenuType_private:before {
-webkit-mask-image: url(../../img/element-icons/lock.1f264bd.svg);
mask-image: url(../../img/element-icons/lock.1f264bd.svg);
}
+
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenu_back {
width: 28px;
height: 28px;
@@ -18552,6 +24194,7 @@ a.mx_RoomPreviewBar_inviter {
border-radius: 14px;
margin-bottom: 12px;
}
+
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenu_back:before {
content: "";
position: absolute;
@@ -18571,6 +24214,7 @@ a.mx_RoomPreviewBar_inviter {
-webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
}
+
.mx_SpaceCreateMenu_wrapper
.mx_ContextualMenu
.mx_AccessibleButton_kind_primary {
@@ -18581,9 +24225,11 @@ a.mx_RoomPreviewBar_inviter {
width: -moz-min-content;
width: min-content;
}
+
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton_disabled {
cursor: not-allowed;
}
+
.mx_SpacePublicShare .mx_AccessibleButton {
position: relative;
padding: 16px 32px 16px 72px;
@@ -18595,13 +24241,16 @@ a.mx_RoomPreviewBar_inviter {
font-size: 1.5rem;
margin: 20px 0;
}
+
.mx_SpacePublicShare .mx_AccessibleButton > h3 {
font-weight: 600;
margin: 0 0 4px;
}
+
.mx_SpacePublicShare .mx_AccessibleButton > span {
color: #737d8c;
}
+
.mx_SpacePublicShare .mx_AccessibleButton:before {
position: absolute;
content: "";
@@ -18617,39 +24266,49 @@ a.mx_RoomPreviewBar_inviter {
mask-size: 24px;
background-color: #8d99a5;
}
+
.mx_SpacePublicShare .mx_AccessibleButton:hover {
border-color: #0dbd8b;
}
+
.mx_SpacePublicShare .mx_AccessibleButton:hover:before {
background-color: #0dbd8b;
}
+
.mx_SpacePublicShare .mx_AccessibleButton:hover > span {
color: #2e2f32;
}
+
.mx_SpacePublicShare
.mx_AccessibleButton.mx_SpacePublicShare_shareButton:before {
-webkit-mask-image: url(../../img/element-icons/link.8f4b1fc.svg);
mask-image: url(../../img/element-icons/link.8f4b1fc.svg);
}
+
.mx_SpacePublicShare
.mx_AccessibleButton.mx_SpacePublicShare_inviteButton:before {
-webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
}
+
.mx_InlineTermsAgreement_cbContainer {
margin-bottom: 10px;
font-size: 1.4rem;
}
+
.mx_InlineTermsAgreement_cbContainer a {
color: #0dbd8b;
text-decoration: none;
}
+
.mx_InlineTermsAgreement_cbContainer .mx_InlineTermsAgreement_checkbox {
margin-top: 10px;
}
+
.mx_InlineTermsAgreement_cbContainer .mx_InlineTermsAgreement_checkbox input {
vertical-align: text-bottom;
}
+
.mx_InlineTermsAgreement_link {
display: inline-block;
-webkit-mask-image: url(../../img/external-link.a8d3e9b.svg);
@@ -18664,14 +24323,17 @@ a.mx_RoomPreviewBar_inviter {
margin-left: 3px;
vertical-align: middle;
}
+
.mx_AnalyticsToast .mx_AccessibleButton_kind_danger {
background: none;
color: #0dbd8b;
}
+
.mx_AnalyticsToast .mx_AccessibleButton_kind_primary {
background: #0dbd8b;
color: #fff;
}
+
.mx_NonUrgentEchoFailureToast .mx_NonUrgentEchoFailureToast_icon {
display: inline-block;
width: 1.8rem;
@@ -18687,22 +24349,27 @@ a.mx_RoomPreviewBar_inviter {
mask-image: url(../../img/element-icons/cloud-off.33cd28e.svg);
margin-right: 8px;
}
+
.mx_NonUrgentEchoFailureToast span {
vertical-align: middle;
}
+
.mx_NonUrgentEchoFailureToast .mx_AccessibleButton {
padding: 0;
}
+
.mx_VerificationShowSas_decimalSas {
text-align: center;
font-weight: 700;
padding-left: 3px;
padding-right: 3px;
}
+
.mx_VerificationShowSas_decimalSas span {
margin-left: 5px;
margin-right: 5px;
}
+
.mx_VerificationShowSas_emojiSas {
text-align: center;
display: -webkit-box;
@@ -18715,29 +24382,35 @@ a.mx_RoomPreviewBar_inviter {
justify-content: center;
margin: 25px 0;
}
+
.mx_VerificationShowSas_emojiSas_block {
display: inline-block;
margin-bottom: 16px;
position: relative;
width: 52px;
}
+
.mx_AuthPage_modal .mx_VerificationShowSas_emojiSas_block,
.mx_Dialog .mx_VerificationShowSas_emojiSas_block {
width: 60px;
}
+
.mx_VerificationShowSas_emojiSas_emoji {
font-size: 3.2rem;
}
+
.mx_VerificationShowSas_emojiSas_label {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 1.2rem;
}
+
.mx_VerificationShowSas_emojiSas_break {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
+
.mx_VerificationShowSas
.mx_Dialog_buttons
button.mx_VerificationShowSas_matchButton {
@@ -18745,6 +24418,7 @@ a.mx_RoomPreviewBar_inviter {
background-color: rgba(3, 179, 129, 0.16);
border: none;
}
+
.mx_VerificationShowSas
.mx_Dialog_buttons
button.mx_VerificationShowSas_noMatchButton {
@@ -18752,91 +24426,7 @@ a.mx_RoomPreviewBar_inviter {
background-color: rgba(255, 75, 85, 0.16);
border: none;
}
-.mx_PlayPauseButton {
- position: relative;
- width: 32px;
- height: 32px;
- border-radius: 32px;
- background-color: #fff;
-}
-.mx_PlayPauseButton:before {
- content: "";
- position: absolute;
- background-color: #737d8c;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
-}
-.mx_PlayPauseButton.mx_PlayPauseButton_disabled:before {
- opacity: 0.5;
-}
-.mx_PlayPauseButton.mx_PlayPauseButton_play:before {
- width: 13px;
- height: 16px;
- top: 8px;
- left: 12px;
- -webkit-mask-image: url(../../img/element-icons/play.a72552b.svg);
- mask-image: url(../../img/element-icons/play.a72552b.svg);
-}
-.mx_PlayPauseButton.mx_PlayPauseButton_pause:before {
- width: 10px;
- height: 12px;
- top: 10px;
- left: 11px;
- -webkit-mask-image: url(../../img/element-icons/pause.c4c0886.svg);
- mask-image: url(../../img/element-icons/pause.c4c0886.svg);
-}
-.mx_VoiceMessagePrimaryContainer {
- padding: 7px 12px 7px 11px;
- background-color: #e3e8f0;
- border-radius: 12px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- color: #737d8c;
- font-size: 1.4rem;
- line-height: 2.4rem;
-}
-.mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar {
- background-color: #c1c6cd;
-}
-.mx_VoiceMessagePrimaryContainer
- .mx_Waveform
- .mx_Waveform_bar.mx_Waveform_bar_100pct {
- -webkit-transition: background-color 0.25s ease;
- transition: background-color 0.25s ease;
- background-color: #737d8c;
-}
-.mx_VoiceMessagePrimaryContainer .mx_Clock {
- width: 4.2rem;
- padding-right: 6px;
- padding-left: 8px;
-}
-.mx_Waveform {
- position: relative;
- height: 30px;
- top: 1px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- overflow: hidden;
-}
-.mx_Waveform .mx_Waveform_bar {
- width: 0;
- border: 1px solid transparent;
- border-radius: 2px;
- min-height: 0;
- max-height: 100%;
- margin-left: 1px;
- margin-right: 1px;
-}
+
.mx_CallContainer {
position: absolute;
right: 20px;
@@ -18844,20 +24434,25 @@ a.mx_RoomPreviewBar_inviter {
z-index: 100;
pointer-events: none;
}
+
.mx_CallContainer .mx_CallPreview {
pointer-events: auto;
cursor: pointer;
}
-.mx_CallContainer .mx_CallPreview .mx_CallView_video {
- width: 350px;
+
+.mx_CallContainer .mx_CallPreview .mx_VideoFeed_remote.mx_VideoFeed_voice {
+ min-height: 150px;
}
+
.mx_CallContainer .mx_CallPreview .mx_VideoFeed_local {
border-radius: 8px;
overflow: hidden;
}
+
.mx_CallContainer .mx_AppTile_persistedWrapper div {
min-width: 350px;
}
+
.mx_CallContainer .mx_IncomingCallBox {
min-width: 250px;
background-color: #f4f6fa;
@@ -18868,12 +24463,14 @@ a.mx_RoomPreviewBar_inviter {
pointer-events: auto;
cursor: pointer;
}
+
.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
direction: row;
}
+
.mx_CallContainer
.mx_IncomingCallBox
.mx_IncomingCallBox_CallerInfo
@@ -18881,6 +24478,7 @@ a.mx_RoomPreviewBar_inviter {
.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo img {
margin: 8px;
}
+
.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo > div {
display: -webkit-box;
display: -ms-flexbox;
@@ -18893,6 +24491,7 @@ a.mx_RoomPreviewBar_inviter {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo h1,
.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo p {
margin: 0;
@@ -18900,9 +24499,11 @@ a.mx_RoomPreviewBar_inviter {
font-size: 1.4rem;
line-height: 1.6rem;
}
+
.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo h1 {
font-weight: 700;
}
+
.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons {
padding: 8px;
display: -webkit-box;
@@ -18913,12 +24514,14 @@ a.mx_RoomPreviewBar_inviter {
-ms-flex-direction: row;
flex-direction: row;
}
+
.mx_CallContainer
.mx_IncomingCallBox
.mx_IncomingCallBox_buttons
> .mx_IncomingCallBox_spacer {
width: 8px;
}
+
.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons > * {
-ms-flex-negative: 0;
flex-shrink: 0;
@@ -18929,6 +24532,41 @@ a.mx_RoomPreviewBar_inviter {
font-size: 1.5rem;
line-height: 2.4rem;
}
+
+.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_iconButton {
+ position: absolute;
+ right: 8px;
+}
+
+.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_iconButton:before {
+ content: "";
+ height: 20px;
+ width: 20px;
+ background-color: #c1c6cd;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+
+.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_silence:before {
+ -webkit-mask-image: url(../../img/voip/silence.08cd2d6.svg);
+ mask-image: url(../../img/voip/silence.08cd2d6.svg);
+}
+
+.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_unSilence:before {
+ -webkit-mask-image: url(../../img/voip/un-silence.cebdd12.svg);
+ mask-image: url(../../img/voip/un-silence.cebdd12.svg);
+}
+
+.mx_CallPreview {
+ position: fixed;
+ left: 0;
+ top: 0;
+}
+
.mx_CallView {
border-radius: 8px;
background-color: #f2f5f8;
@@ -18936,6 +24574,7 @@ a.mx_RoomPreviewBar_inviter {
padding-right: 8px;
pointer-events: auto;
}
+
.mx_CallView_large {
padding-bottom: 10px;
margin: 5px 5px 5px 18px;
@@ -18947,35 +24586,41 @@ a.mx_RoomPreviewBar_inviter {
-ms-flex-direction: column;
flex-direction: column;
}
+
.mx_CallView_large,
.mx_CallView_large .mx_CallView_voice {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
+
.mx_CallView_pip {
width: 320px;
padding-bottom: 8px;
- margin-top: 10px;
background-color: #f4f6fa;
-webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
border-radius: 8px;
}
+
.mx_CallView_pip .mx_CallView_voice {
height: 180px;
}
+
.mx_CallView_pip .mx_CallView_callControls {
bottom: 0;
}
+
.mx_CallView_pip .mx_CallView_callControls_button:before {
width: 36px;
height: 36px;
}
+
.mx_CallView_pip .mx_CallView_holdTransferContent {
padding-top: 10px;
padding-bottom: 25px;
}
+
.mx_CallView_content {
position: relative;
display: -webkit-box;
@@ -18983,12 +24628,14 @@ a.mx_RoomPreviewBar_inviter {
display: flex;
border-radius: 8px;
}
+
.mx_CallView_voice {
-webkit-box-orient: vertical;
-ms-flex-direction: column;
flex-direction: column;
background-color: #27303a;
}
+
.mx_CallView_voice,
.mx_CallView_voice_avatarsContainer {
-webkit-box-align: center;
@@ -18999,6 +24646,7 @@ a.mx_RoomPreviewBar_inviter {
justify-content: center;
-webkit-box-direction: normal;
}
+
.mx_CallView_voice_avatarsContainer {
display: -webkit-box;
display: -ms-flexbox;
@@ -19007,10 +24655,12 @@ a.mx_RoomPreviewBar_inviter {
-ms-flex-direction: row;
flex-direction: row;
}
+
.mx_CallView_voice_avatarsContainer div {
margin-left: 12px;
margin-right: 12px;
}
+
.mx_CallView_voice
.mx_CallView_holdTransferContent
.mx_CallView_voice_avatarContainer {
@@ -19018,28 +24668,34 @@ a.mx_RoomPreviewBar_inviter {
overflow: hidden;
position: relative;
}
+
.mx_CallView_holdTransferContent {
height: 20px;
padding-top: 20px;
padding-bottom: 15px;
color: #fff;
}
+
.mx_CallView_holdTransferContent .mx_AccessibleButton_hasKind {
padding: 0;
font-weight: 700;
}
+
.mx_CallView_video {
width: 100%;
height: 100%;
z-index: 30;
overflow: hidden;
}
+
.mx_CallView_video_hold {
overflow: hidden;
}
+
.mx_CallView_video_hold .mx_VideoFeed {
visibility: hidden;
}
+
.mx_CallView_video_holdBackground {
position: absolute;
width: 100%;
@@ -19052,6 +24708,7 @@ a.mx_RoomPreviewBar_inviter {
-webkit-filter: blur(20px);
filter: blur(20px);
}
+
.mx_CallView_video_holdBackground:after {
content: "";
display: block;
@@ -19062,6 +24719,7 @@ a.mx_RoomPreviewBar_inviter {
right: 0;
background-color: rgba(0, 0, 0, 0.6);
}
+
.mx_CallView_video .mx_CallView_holdTransferContent {
position: absolute;
top: 50%;
@@ -19072,6 +24730,7 @@ a.mx_RoomPreviewBar_inviter {
color: #fff;
text-align: center;
}
+
.mx_CallView_video .mx_CallView_holdTransferContent:before {
display: block;
margin-left: auto;
@@ -19083,15 +24742,18 @@ a.mx_RoomPreviewBar_inviter {
background-position: 50%;
background-size: cover;
}
+
.mx_CallView_pip .mx_CallView_video .mx_CallView_holdTransferContent:before {
width: 30px;
height: 30px;
}
+
.mx_CallView_video
.mx_CallView_holdTransferContent
.mx_AccessibleButton_hasKind {
padding: 0;
}
+
.mx_CallView_header {
height: 44px;
display: -webkit-box;
@@ -19110,24 +24772,29 @@ a.mx_RoomPreviewBar_inviter {
-ms-flex-negative: 0;
flex-shrink: 0;
}
+
.mx_CallView_header_callType {
font-size: 1.2rem;
font-weight: 700;
vertical-align: middle;
}
+
.mx_CallView_header_secondaryCallInfo:before {
content: "·";
margin-left: 6px;
margin-right: 6px;
}
+
.mx_CallView_header_controls {
margin-left: auto;
}
+
.mx_CallView_header_button {
display: inline-block;
vertical-align: middle;
cursor: pointer;
}
+
.mx_CallView_header_button:before {
content: "";
display: inline-block;
@@ -19142,27 +24809,33 @@ a.mx_RoomPreviewBar_inviter {
-webkit-mask-position: center;
mask-position: center;
}
+
.mx_CallView_header_button_fullscreen:before {
-webkit-mask-image: url(../../img/element-icons/call/fullscreen.43be138.svg);
mask-image: url(../../img/element-icons/call/fullscreen.43be138.svg);
}
+
.mx_CallView_header_button_expand:before {
-webkit-mask-image: url(../../img/element-icons/call/expand.7ef9f56.svg);
mask-image: url(../../img/element-icons/call/expand.7ef9f56.svg);
}
+
.mx_CallView_header_callInfo {
margin-left: 12px;
margin-right: 16px;
}
+
.mx_CallView_header_roomName {
font-weight: 700;
font-size: 12px;
line-height: normal;
height: 15px;
}
+
.mx_CallView_secondaryCall_roomName {
margin-left: 4px;
}
+
.mx_CallView_header_callTypeSmall {
font-size: 12px;
color: #737d8c;
@@ -19173,6 +24846,7 @@ a.mx_RoomPreviewBar_inviter {
text-overflow: ellipsis;
max-width: 240px;
}
+
.mx_CallView_header_phoneIcon {
display: inline-block;
margin-right: 6px;
@@ -19180,6 +24854,7 @@ a.mx_RoomPreviewBar_inviter {
width: 16px;
vertical-align: middle;
}
+
.mx_CallView_header_phoneIcon:before {
content: "";
display: inline-block;
@@ -19196,6 +24871,7 @@ a.mx_RoomPreviewBar_inviter {
-webkit-mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
}
+
.mx_CallView_callControls {
position: absolute;
display: -webkit-box;
@@ -19210,15 +24886,18 @@ a.mx_RoomPreviewBar_inviter {
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
+
.mx_CallView_callControls_hidden {
opacity: 0.001;
pointer-events: none;
}
+
.mx_CallView_callControls_button {
cursor: pointer;
margin-left: 8px;
margin-right: 8px;
}
+
.mx_CallView_callControls_button:before {
content: "";
display: inline-block;
@@ -19228,55 +24907,70 @@ a.mx_RoomPreviewBar_inviter {
background-size: contain;
background-position: 50%;
}
+
.mx_CallView_callControls_dialpad {
margin-right: auto;
}
+
.mx_CallView_callControls_dialpad:before {
background-image: url(../../img/voip/dialpad.fdda9a0.svg);
}
+
.mx_CallView_callControls_button_dialpad_hidden {
margin-right: auto;
cursor: auto;
}
+
.mx_CallView_callControls_button_micOn:before {
background-image: url(../../img/voip/mic-on.2592c14.svg);
}
+
.mx_CallView_callControls_button_micOff:before {
background-image: url(../../img/voip/mic-off.774e42b.svg);
}
+
.mx_CallView_callControls_button_vidOn:before {
background-image: url(../../img/voip/vid-on.b9b8bbf.svg);
}
+
.mx_CallView_callControls_button_vidOff:before {
background-image: url(../../img/voip/vid-off.5552596.svg);
}
+
.mx_CallView_callControls_button_hangup:before {
background-image: url(../../img/voip/hangup.9c3adeb.svg);
}
+
.mx_CallView_callControls_button_more {
margin-left: auto;
}
+
.mx_CallView_callControls_button_more:before {
background-image: url(../../img/voip/more.5e8055e.svg);
}
+
.mx_CallView_callControls_button_more_hidden {
margin-left: auto;
cursor: auto;
}
+
.mx_CallView_callControls_button_invisible {
visibility: hidden;
pointer-events: none;
position: absolute;
}
+
.mx_CallViewForRoom {
overflow: hidden;
}
+
.mx_CallViewForRoom .mx_CallViewForRoom_ResizeWrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 8px;
}
+
.mx_CallViewForRoom
.mx_CallViewForRoom_ResizeWrapper:hover
.mx_CallViewForRoom_ResizeHandle {
@@ -19288,6 +24982,7 @@ a.mx_RoomPreviewBar_inviter {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_CallViewForRoom
.mx_CallViewForRoom_ResizeWrapper:hover
.mx_CallViewForRoom_ResizeHandle:after {
@@ -19299,13 +24994,36 @@ a.mx_RoomPreviewBar_inviter {
max-width: 64px;
background-color: #2e2f32;
}
+
.mx_DialPad {
display: grid;
+ grid-row-gap: 16px;
+ row-gap: 16px;
+ grid-column-gap: 0;
+ -webkit-column-gap: 0;
+ -moz-column-gap: 0;
+ column-gap: 0;
+ margin-top: 24px;
grid-template-columns: repeat(3, 1fr);
- grid-gap: 16px;
- gap: 16px;
}
+
+.mx_DialPad,
.mx_DialPad_button {
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.mx_DialPad_button {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
width: 40px;
height: 40px;
background-color: #e3e8f0;
@@ -19314,9 +25032,17 @@ a.mx_RoomPreviewBar_inviter {
font-weight: 600;
text-align: center;
vertical-align: middle;
- line-height: 40px;
}
-.mx_DialPad_deleteButton:before,
+
+.mx_DialPad_button .mx_DialPad_buttonSubText {
+ font-size: 8px;
+}
+
+.mx_DialPad_dialButton {
+ grid-column: 2;
+ background-color: #0dbd8b;
+}
+
.mx_DialPad_dialButton:before {
content: "";
display: inline-block;
@@ -19330,68 +25056,34 @@ a.mx_RoomPreviewBar_inviter {
-webkit-mask-position: center;
mask-position: center;
background-color: #fff;
-}
-.mx_DialPad_deleteButton {
- background-color: #ff4b55;
-}
-.mx_DialPad_deleteButton:before {
- -webkit-mask-image: url(../../img/element-icons/call/delete.833d785.svg);
- mask-image: url(../../img/element-icons/call/delete.833d785.svg);
- -webkit-mask-position: 9px;
- mask-position: 9px;
-}
-.mx_DialPad_dialButton {
- background-color: #0dbd8b;
-}
-.mx_DialPad_dialButton:before {
-webkit-mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
}
+
+.mx_DialPadContextMenu_dialPad .mx_DialPad {
+ grid-row-gap: 16px;
+ row-gap: 16px;
+ grid-column-gap: 32px;
+ -webkit-column-gap: 32px;
+ -moz-column-gap: 32px;
+ column-gap: 32px;
+}
+
+.mx_DialPadContextMenuWrapper {
+ padding: 15px;
+}
+
.mx_DialPadContextMenu_header {
- margin-top: 12px;
- margin-left: 12px;
- margin-right: 12px;
+ margin-top: 32px;
+ margin-left: 20px;
+ margin-right: 20px;
+ border: none;
+ border-bottom: 1px solid #c1c6cd;
+ -webkit-transition: border-bottom 0.25s;
+ transition: border-bottom 0.25s;
}
-.mx_DialPadContextMenu_title {
- color: #61708b;
- font-size: 12px;
- font-weight: 600;
-}
-.mx_DialPadContextMenu_dialled {
- height: 1em;
- font-size: 18px;
- font-weight: 600;
-}
-.mx_DialPadContextMenu_dialPad {
- margin: 16px;
-}
-.mx_DialPadContextMenu_horizSep {
- position: relative;
-}
-.mx_DialPadContextMenu_horizSep:before {
- content: "";
- position: absolute;
- width: 100%;
- border-bottom: 1px solid #e3e8f0;
-}
-.mx_Dialog_dialPadWrapper .mx_Dialog {
- padding: 0;
-}
-.mx_DialPadModal {
- width: 192px;
- height: 368px;
-}
-.mx_DialPadModal_header {
- margin-top: 12px;
- margin-left: 12px;
- margin-right: 12px;
-}
-.mx_DialPadModal_title {
- color: #61708b;
- font-size: 12px;
- font-weight: 600;
-}
-.mx_DialPadModal_cancel {
+
+.mx_DialPadContextMenu_cancel {
float: right;
-webkit-mask: url(../../img/feather-customised/cancel.23c2689.svg);
mask: url(../../img/feather-customised/cancel.23c2689.svg);
@@ -19406,32 +25098,111 @@ a.mx_RoomPreviewBar_inviter {
background-color: #c1c1c1;
cursor: pointer;
}
-.mx_DialPadModal_field {
+
+.mx_DialPadContextMenu_header:focus-within {
+ border-bottom: 1px solid #0dbd8b;
+}
+
+.mx_DialPadContextMenu_title {
+ color: #61708b;
+ font-size: 12px;
+ font-weight: 600;
+}
+
+.mx_DialPadContextMenu_dialled {
+ height: 1.5em;
+ font-size: 18px;
+ font-weight: 600;
border: none;
margin: 0;
}
+
+.mx_DialPadContextMenu_dialled input {
+ font-size: 18px;
+ font-weight: 600;
+ overflow: hidden;
+ max-width: 185px;
+ text-align: left;
+ direction: rtl;
+ padding: 8px 0;
+ background-color: transparent;
+}
+
+.mx_DialPadContextMenu_dialPad {
+ margin: 16px;
+}
+
+.mx_Dialog_dialPadWrapper .mx_Dialog {
+ padding: 0;
+}
+
+.mx_DialPadModal {
+ width: 292px;
+ height: 370px;
+ padding: 16px 0 0;
+}
+
+.mx_DialPadModal_header {
+ margin-top: 32px;
+ margin-left: 40px;
+ margin-right: 40px;
+ border-bottom: 1px solid #c1c6cd;
+ -webkit-transition: border-bottom 0.25s;
+ transition: border-bottom 0.25s;
+}
+
+.mx_DialPadModal_header:focus-within {
+ border-bottom: 1px solid #0dbd8b;
+}
+
+.mx_DialPadModal_title {
+ color: #61708b;
+ font-size: 12px;
+ font-weight: 600;
+}
+
+.mx_DialPadModal_cancel {
+ float: right;
+ -webkit-mask: url(../../img/feather-customised/cancel.23c2689.svg);
+ mask: url(../../img/feather-customised/cancel.23c2689.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: cover;
+ mask-size: cover;
+ width: 14px;
+ height: 14px;
+ background-color: #c1c1c1;
+ cursor: pointer;
+ margin-right: 16px;
+}
+
+.mx_DialPadModal_field {
+ border: none;
+ margin: 0;
+ height: 30px;
+}
+
+.mx_DialPadModal_field .mx_Field_postfix {
+ border-left: none;
+}
+
.mx_DialPadModal_field input {
font-size: 18px;
font-weight: 600;
}
+
.mx_DialPadModal_dialPad {
margin-left: 16px;
margin-right: 16px;
margin-top: 16px;
}
-.mx_DialPadModal_horizSep {
- position: relative;
-}
-.mx_DialPadModal_horizSep:before {
- content: "";
- position: absolute;
- width: 100%;
- border-bottom: 1px solid #e3e8f0;
-}
+
.mx_VideoFeed_voice {
- padding-bottom: 52px;
background-color: #27303a;
}
+
.mx_VideoFeed_remote {
width: 100%;
height: 100%;
@@ -19445,9 +25216,11 @@ a.mx_RoomPreviewBar_inviter {
-ms-flex-align: center;
align-items: center;
}
+
.mx_VideoFeed_remote.mx_VideoFeed_video {
background-color: #000;
}
+
.mx_VideoFeed_local {
max-width: 25%;
max-height: 25%;
@@ -19457,14 +25230,94 @@ a.mx_RoomPreviewBar_inviter {
z-index: 100;
border-radius: 4px;
}
+
.mx_VideoFeed_local.mx_VideoFeed_video {
background-color: transparent;
}
+
.mx_VideoFeed_mirror {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
+
+.hljs {
+ display: block;
+ overflow-x: auto;
+ padding: 0.5em;
+ color: #383a42;
+ background: #fafafa;
+}
+
+.hljs-comment,
+.hljs-quote {
+ color: #a0a1a7;
+ font-style: italic;
+}
+
+.hljs-doctag,
+.hljs-formula,
+.hljs-keyword {
+ color: #a626a4;
+}
+
+.hljs-deletion,
+.hljs-name,
+.hljs-section,
+.hljs-selector-tag,
+.hljs-subst {
+ color: #e45649;
+}
+
+.hljs-literal {
+ color: #0184bb;
+}
+
+.hljs-addition,
+.hljs-attribute,
+.hljs-meta-string,
+.hljs-regexp,
+.hljs-string {
+ color: #50a14f;
+}
+
+.hljs-built_in,
+.hljs-class .hljs-title {
+ color: #c18401;
+}
+
+.hljs-attr,
+.hljs-number,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-pseudo,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable {
+ color: #986801;
+}
+
+.hljs-bullet,
+.hljs-link,
+.hljs-meta,
+.hljs-selector-id,
+.hljs-symbol,
+.hljs-title {
+ color: #4078f2;
+}
+
+.hljs-emphasis {
+ font-style: italic;
+}
+
+.hljs-strong {
+ font-weight: 700;
+}
+
+.hljs-link {
+ text-decoration: underline;
+}
`;
+
const customCSS = `
#snackbar {
display: flex;
@@ -19566,7 +25419,6 @@ img {
white-space: nowrap;
overflow: hidden;
}
-
`;
const markdownCSS = `.markdown-body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;overflow:hidden;font-family:'Helvetica Neue',Helvetica,'Segoe UI',Arial,freesans,sans-serif;font-size:16px;line-height:1.6;word-wrap:break-word}.markdown-body *{-moz-box-sizing:border-box;box-sizing:border-box}.markdown-body>:first-child{margin-top:0!important}.markdown-body>:last-child{margin-bottom:0!important}.markdown-body a{background:0 0;color:#4183c4;text-decoration:none}.markdown-body a:active,.markdown-body a:hover{outline:0}.markdown-body a:active,.markdown-body a:focus,.markdown-body a:hover{text-decoration:underline}.markdown-body strong{font-weight:700}.markdown-body em{font-style:italic}.markdown-body blockquote,.markdown-body dl,.markdown-body ol,.markdown-body p,.markdown-body pre,.markdown-body table,.markdown-body ul{margin-top:0;margin-bottom:16px}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{font-family:'Helvetica Neue',Helvetica,'Segoe UI',Arial,freesans,sans-serif;position:relative;margin-top:1em;margin-bottom:16px;font-weight:700;line-height:1.4}.markdown-body h1,.markdown-body h2{padding-bottom:.3em;border-bottom:1px solid #eee}.markdown-body h1{font-size:2.25em;line-height:1.2}.markdown-body h2{font-size:1.75em;line-height:1.225}.markdown-body h3{font-size:1.5em}.markdown-body h4{font-size:1.25em}.markdown-body h5{font-size:1em}.markdown-body h6{font-size:1em;color:#777}.markdown-body code,.markdown-body kbd,.markdown-body pre{font-family:Consolas,'Liberation Mono',Menlo,Courier,monospace}.markdown-body code{padding:.2em 0;margin:0;font-size:85%;background-color:rgba(0,0,0,.04);border-radius:3px}.markdown-body code:after,.markdown-body code:before{letter-spacing:-.2em;content:'\\00a0'}.markdown-body pre{word-wrap:normal;padding:16px;overflow:auto;font-size:85%;line-height:1.45;background-color:#f7f7f7;border-radius:3px}.markdown-body pre code{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background:0 0}.markdown-body pre code:after,.markdown-body pre code:before{content:normal}.markdown-body pre>code{font-size:1em;word-break:normal;white-space:pre;border:0}.markdown-body kbd{background-color:#e7e7e7;background-image:-webkit-linear-gradient(#fefefe,#e7e7e7);background-image:linear-gradient(#fefefe,#e7e7e7);background-repeat:repeat-x;display:inline-block;padding:5px 5px 1px;margin:0 1px;font-size:11px;line-height:10px;color:#000;border:1px solid #cfcfcf;border-radius:2px;box-shadow:0 1px 0 #ccc}.markdown-body hr:after,.markdown-body hr:before{display:table;content:''}.markdown-body input{color:inherit;font:inherit;margin:0;font-size:13px;line-height:1.4;font-family:Helvetica,Arial,freesans,clean,sans-serif,'Segoe UI Emoji','Segoe UI Symbol'}.markdown-body input[disabled]{cursor:default}.markdown-body input[type=checkbox]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0}.markdown-body blockquote{margin:0 0 16px;padding:0 15px;color:#777;border-left:4px solid #ddd}.markdown-body blockquote>:first-child{margin-top:0}.markdown-body blockquote>:last-child{margin-bottom:0}.markdown-body img{border:0;max-width:100%;-moz-box-sizing:border-box;box-sizing:border-box}.markdown-body hr{-moz-box-sizing:content-box;box-sizing:content-box;overflow:hidden;background:#e7e7e7;height:4px;padding:0;margin:16px 0;border:0}.markdown-body hr:after{clear:both}.markdown-body td,.markdown-body th{padding:0}.markdown-body table{border-collapse:collapse;border-spacing:0;display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}.markdown-body table td,.markdown-body table th{padding:6px 13px;border:1px solid #ddd}.markdown-body table th{font-weight:700}.markdown-body table tr{background-color:#fff;border-top:1px solid #ccc}.markdown-body table tr:nth-child(2n){background-color:#f8f8f8}.markdown-body ol,.markdown-body ul{padding:0 0 0 2em}.markdown-body ol ol,.markdown-body ul ol{list-style-type:lower-roman}.markdown-body ol ol,.markdown-body ol ul,.markdown-body ul ol,.markdown-body ul ul{margin-top:0;margin-bottom:0}.markdown-body ol ol ol,.markdown-body ol ul ol,.markdown-body ul ol ol,.markdown-body ul ul ol{list-style-type:lower-alpha}.markdown-body li>p{margin-top:16px}.markdown-body dd{margin-left:0}.markdown-body dl{padding:0}.markdown-body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:700}.markdown-body dl dd{padding:0 16px;margin-bottom:16px}`;
From 41bc2b6481c85a476167fb7ccb2eaee1e1f8e950 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 26 Jul 2021 22:15:05 +0530
Subject: [PATCH 139/176] Move away from streamsaver(for now)
---
package.json | 4 +-
src/utils/exportUtils/Exporter.ts | 63 ++-----
src/utils/exportUtils/ZipStream.ts | 279 -----------------------------
yarn.lock | 49 +++--
4 files changed, 51 insertions(+), 344 deletions(-)
delete mode 100644 src/utils/exportUtils/ZipStream.ts
diff --git a/package.json b/package.json
index 15c310c2ce..30254ed78d 100644
--- a/package.json
+++ b/package.json
@@ -77,6 +77,7 @@
"highlight.js": "^10.5.0",
"html-entities": "^1.4.0",
"is-ip": "^3.1.0",
+ "jszip": "^3.7.0",
"katex": "^0.12.0",
"linkifyjs": "^2.1.9",
"lodash": "^4.17.20",
@@ -99,10 +100,8 @@
"resize-observer-polyfill": "^1.5.1",
"rfc4648": "^1.4.0",
"sanitize-html": "^2.3.2",
- "streamsaver": "^2.0.5",
"tar-js": "^0.3.0",
"url": "^0.11.0",
- "web-streams-polyfill": "^3.0.3",
"what-input": "^5.2.10",
"zxcvbn": "^4.4.2"
},
@@ -131,6 +130,7 @@
"@types/counterpart": "^0.18.1",
"@types/css-font-loading-module": "^0.0.6",
"@types/diff-match-patch": "^1.0.32",
+ "@types/file-saver": "^2.0.3",
"@types/flux": "^3.1.9",
"@types/jest": "^26.0.20",
"@types/linkifyjs": "^2.1.3",
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index d43f937c7b..c840731d47 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -1,4 +1,3 @@
-import streamSaver from "streamsaver";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixClientPeg } from "../../MatrixClientPeg";
@@ -7,21 +6,18 @@ import { decryptFile } from "../DecryptFile";
import { mediaFromContent } from "../../customisations/Media";
import { formatFullDateNoDay } from "../../DateUtils";
import { Direction, MatrixClient } from "matrix-js-sdk";
-import streamToZIP from "./ZipStream";
-import * as ponyfill from "web-streams-polyfill/ponyfill";
-import "web-streams-polyfill/ponyfill"; // to support streams API for older browsers
import { MutableRefObject } from "react";
+import JSZip from "jszip";
+import { saveAs } from "file-saver";
-type FileStream = {
+type BlobFile = {
name: string;
- stream(): ReadableStream;
+ blob: Blob;
};
export default abstract class Exporter {
- protected files: FileStream[];
+ protected files: BlobFile[];
protected client: MatrixClient;
- protected writer: WritableStreamDefaultWriter<any>;
- protected fileStream: WritableStream<any>;
protected cancelled: boolean;
protected constructor(
@@ -34,7 +30,6 @@ export default abstract class Exporter {
this.files = [];
this.client = MatrixClientPeg.get();
window.addEventListener("beforeunload", this.onBeforeUnload);
- window.addEventListener("onunload", this.abortWriter);
}
protected onBeforeUnload(e: BeforeUnloadEvent): string {
@@ -50,7 +45,7 @@ export default abstract class Exporter {
protected addFile(filePath: string, blob: Blob): void {
const file = {
name: filePath,
- stream: () => blob.stream(),
+ blob,
};
this.files.push(file);
}
@@ -58,67 +53,31 @@ export default abstract class Exporter {
protected async downloadZIP(): Promise<any> {
const filename = `matrix-export-${formatFullDateNoDay(new Date())}.zip`;
- // Support for older browsers
- streamSaver.WritableStream = ponyfill.WritableStream;
-
+ const zip = new JSZip();
// Create a writable stream to the directory
- this.fileStream = streamSaver.createWriteStream(filename);
-
if (!this.cancelled) this.updateProgress("Generating a ZIP");
else return this.cleanUp();
- this.writer = this.fileStream.getWriter();
- const files = this.files;
+ for (const file of this.files) zip.file(file.name, file.blob);
- const readableZipStream = streamToZIP({
- start(ctrl) {
- for (const file of files) ctrl.enqueue(file);
- ctrl.close();
- },
- });
+ const content = await zip.generateAsync({ type: "blob" });
- if (this.cancelled) return this.cleanUp();
-
- this.updateProgress("Writing to the file system");
-
- const reader = readableZipStream.getReader();
- await this.pumpToFileStream(reader);
+ await saveAs(content, filename);
}
protected cleanUp(): string {
console.log("Cleaning up...");
window.removeEventListener("beforeunload", this.onBeforeUnload);
- window.removeEventListener("onunload", this.abortWriter);
return "";
}
public async cancelExport(): Promise<void> {
console.log("Cancelling export...");
this.cancelled = true;
- await this.abortWriter();
}
protected async downloadPlainText(fileName: string, text: string): Promise<any> {
- this.fileStream = streamSaver.createWriteStream(fileName);
- this.writer = this.fileStream.getWriter();
- const data = new TextEncoder().encode(text);
- if (this.cancelled) return this.cleanUp();
- await this.writer.write(data);
- await this.writer.close();
- }
-
- protected async abortWriter(): Promise<void> {
- await this.fileStream?.abort();
- await this.writer?.abort();
- }
-
- protected async pumpToFileStream(reader: ReadableStreamDefaultReader): Promise<void> {
- const res = await reader.read();
- if (res.done) await this.writer.close();
- else {
- await this.writer.write(res.value);
- await this.pumpToFileStream(reader);
- }
+ await saveAs(new Blob[text], fileName);
}
protected setEventMetadata(event: MatrixEvent): MatrixEvent {
diff --git a/src/utils/exportUtils/ZipStream.ts b/src/utils/exportUtils/ZipStream.ts
deleted file mode 100644
index 2ee355f09c..0000000000
--- a/src/utils/exportUtils/ZipStream.ts
+++ /dev/null
@@ -1,279 +0,0 @@
-// Based on https://github.com/jimmywarting/StreamSaver.js/blob/master/examples/zip-stream.js
-
-/* global ReadableStream */
-
-type TypedArray =
- | Int8Array
- | Uint8Array
- | Int16Array
- | Uint16Array
- | Int32Array
- | Uint32Array
- | Uint8ClampedArray
- | Float32Array
- | Float64Array;
-
-/**
- * 32-bit cyclic redundancy check, or CRC-32 - checksum
- */
-class Crc32 {
- crc: number;
- table: any;
- constructor() {
- this.crc = -1;
- this.table = (() => {
- let i;
- let j;
- let t;
- const table = [];
-
- for (i = 0; i < 256; i++) {
- t = i;
- for (j = 0; j < 8; j++) {
- t = (t & 1)
- ? (t >>> 1) ^ 0xEDB88320
- : t >>> 1;
- }
- table[i] = t;
- }
- return table;
- })();
- }
-
- append(data: TypedArray) {
- let crc = this.crc | 0;
- const table = this.table;
- for (let offset = 0, len = data.length | 0; offset < len; offset++) {
- crc = (crc >>> 8) ^ table[(crc ^ data[offset]) & 0xFF];
- }
- this.crc = crc;
- }
-
- get() {
- return ~this.crc;
- }
-}
-
-type DataHelper = {
- array: Uint8Array;
- view: DataView;
-};
-
-const getDataHelper = (byteLength: number): DataHelper => {
- const uint8 = new Uint8Array(byteLength);
- return {
- array: uint8,
- view: new DataView(uint8.buffer),
- };
-};
-
-type FileLike = File & {
- directory: string;
- comment: string;
- stream(): ReadableStream;
-};
-
-type ZipObj = {
- crc?: Crc32;
- uncompressedLength: number;
- compressedLength: number;
- ctrl: ReadableStreamDefaultController;
- writeFooter: Function;
- writeHeader: Function;
- reader?: ReadableStreamDefaultReader;
- offset: number;
- header?: DataHelper;
- fileLike: FileLike;
- level: number;
- directory: boolean;
-};
-
-const pump = (zipObj: ZipObj) => zipObj.reader ? zipObj.reader.read().then(chunk => {
- if (zipObj.crc) {
- if (chunk.done) return zipObj.writeFooter();
- const outputData = chunk.value;
- zipObj.crc.append(outputData);
- zipObj.uncompressedLength += outputData.length;
- zipObj.compressedLength += outputData.length;
- zipObj.ctrl.enqueue(outputData);
- } else {
- throw new Error('Missing zipObj.crc');
- }
-}) : undefined;
-
-export default function streamToZIP(underlyingSource: UnderlyingSource) {
- const files = Object.create(null);
- const filenames: string[] = [];
- const encoder = new TextEncoder();
- let offset = 0;
- let activeZipIndex = 0;
- let ctrl: ReadableStreamDefaultController;
- let activeZipObject: ZipObj;
- let closed: boolean;
-
- function next() {
- activeZipIndex++;
- activeZipObject = files[filenames[activeZipIndex]];
- if (activeZipObject) processNextChunk();
- else if (closed) closeZip();
- }
-
- const zipWriter: ReadableStreamDefaultController = {
- desiredSize: null,
-
- error(err) {
- console.error(err);
- },
-
- enqueue(fileLike: FileLike) {
- if (closed) {
- throw new TypeError(
- "Cannot enqueue a chunk into a readable stream that is closed or has been requested to be closed",
- );
- }
-
- let name = fileLike.name.trim();
- const date = new Date(typeof fileLike.lastModified === 'undefined' ? Date.now() : fileLike.lastModified);
-
- if (fileLike.directory && !name.endsWith('/')) name += '/';
- // if file already exists, do not enqueue
- if (files[name]) return;
-
- const nameBuf = encoder.encode(name);
- filenames.push(name);
-
- const zipObject: ZipObj = files[name] = {
- level: 0,
- ctrl,
- directory: !!fileLike.directory,
- nameBuf,
- comment: encoder.encode(fileLike.comment || ''),
- compressedLength: 0,
- uncompressedLength: 0,
- offset,
-
- writeHeader() {
- const header = getDataHelper(26);
- const data = getDataHelper(30 + nameBuf.length);
-
- zipObject.offset = offset;
- zipObject.header = header;
-
- if (zipObject.level !== 0 && !zipObject.directory) {
- header.view.setUint16(4, 0x0800);
- }
-
- header.view.setUint32(0, 0x14000808);
- header.view.setUint16(
- 6,
- (((date.getHours() << 6) | date.getMinutes()) << 5) | (date.getSeconds() / 2),
- true,
- );
- header.view.setUint16(
- 8,
- ((((date.getFullYear() - 1980) << 4) | (date.getMonth() + 1)) << 5) |
- date.getDate(),
- true,
- );
- header.view.setUint16(22, nameBuf.length, true);
- data.view.setUint32(0, 0x504b0304);
- data.array.set(header.array, 4);
- data.array.set(nameBuf, 30);
- offset += data.array.length;
- ctrl.enqueue(data.array);
- },
-
- writeFooter() {
- const footer = getDataHelper(16);
- footer.view.setUint32(0, 0x504b0708);
-
- if (zipObject.crc && zipObject.header) {
- zipObject.header.view.setUint32(10, zipObject.crc.get(), true);
- zipObject.header.view.setUint32(14, zipObject.compressedLength, true);
- zipObject.header.view.setUint32(18, zipObject.uncompressedLength, true);
- footer.view.setUint32(4, zipObject.crc.get(), true);
- footer.view.setUint32(8, zipObject.compressedLength, true);
- footer.view.setUint32(12, zipObject.uncompressedLength, true);
- }
-
- ctrl.enqueue(footer.array);
- offset += zipObject.compressedLength + 16;
- next();
- },
- fileLike,
- };
-
- if (!activeZipObject) {
- activeZipObject = zipObject;
- processNextChunk();
- }
- },
-
- close() {
- if (closed) {
- throw new TypeError(
- "Cannot close a readable stream that has already been requested to be closed",
- );
- }
- if (!activeZipObject) closeZip();
- closed = true;
- },
- };
-
- function closeZip() {
- let length = 0;
- let index = 0;
- let indexFilename: number;
- let file: any;
-
- for (indexFilename = 0; indexFilename < filenames.length; indexFilename++) {
- file = files[filenames[indexFilename]];
- length += 46 + file.nameBuf.length + file.comment.length;
- }
- const data = getDataHelper(length + 22);
- for (indexFilename = 0; indexFilename < filenames.length; indexFilename++) {
- file = files[filenames[indexFilename]];
- data.view.setUint32(index, 0x504b0102);
- data.view.setUint16(index + 4, 0x1400);
- data.array.set(file.header.array, index + 6);
- data.view.setUint16(index + 32, file.comment.length, true);
- if (file.directory) {
- data.view.setUint8(index + 38, 0x10);
- }
- data.view.setUint32(index + 42, file.offset, true);
- data.array.set(file.nameBuf, index + 46);
- data.array.set(file.comment, index + 46 + file.nameBuf.length);
- index += 46 + file.nameBuf.length + file.comment.length;
- }
- data.view.setUint32(index, 0x504b0506);
- data.view.setUint16(index + 8, filenames.length, true);
- data.view.setUint16(index + 10, filenames.length, true);
- data.view.setUint32(index + 12, length, true);
- data.view.setUint32(index + 16, offset, true);
- ctrl.enqueue(data.array);
- ctrl.close();
- }
-
- function processNextChunk() {
- if (!activeZipObject) return;
- if (activeZipObject.reader) return pump(activeZipObject);
- if (activeZipObject.fileLike.stream) {
- activeZipObject.crc = new Crc32();
- activeZipObject.reader = activeZipObject.fileLike.stream().getReader();
- activeZipObject.writeHeader();
- } else next();
- }
-
- return new ReadableStream({
- start: c => {
- ctrl = c;
- underlyingSource.start && Promise.resolve(underlyingSource.start(zipWriter));
- },
- pull() {
- return processNextChunk() || (
- underlyingSource.pull &&
- Promise.resolve(underlyingSource.pull(zipWriter))
- );
- },
- });
-}
diff --git a/yarn.lock b/yarn.lock
index 8801940a35..dc3bc2ca7b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1468,6 +1468,11 @@
resolved "https://registry.yarnpkg.com/@types/fbemitter/-/fbemitter-2.0.32.tgz#8ed204da0f54e9c8eaec31b1eec91e25132d082c"
integrity sha1-jtIE2g9U6cjq7DGx7skeJRMtCCw=
+"@types/file-saver@^2.0.3":
+ version "2.0.3"
+ resolved "https://registry.yarnpkg.com/@types/file-saver/-/file-saver-2.0.3.tgz#b734c4f5a04d20615eaed3dc106e2ab321082009"
+ integrity sha512-MBIou8pd/41jkff7s97B47bc9+p0BszqqDJsO51yDm49uUxeKzrfuNl5fSLC6BpLEWKA8zlwyqALVmXrFwoBHQ==
+
"@types/flux@^3.1.9":
version "3.1.10"
resolved "https://registry.yarnpkg.com/@types/flux/-/flux-3.1.10.tgz#7c6306e86ecb434d00f38cb82f092640c7bd4098"
@@ -4141,6 +4146,11 @@ ignore@^5.1.4, ignore@^5.1.8:
resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
+immediate@~3.0.5:
+ version "3.0.6"
+ resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+ integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
+
immutable@^3.7.4:
version "3.8.2"
resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
@@ -5235,6 +5245,16 @@ jsprim@^1.2.2:
array-includes "^3.1.2"
object.assign "^4.1.2"
+jszip@^3.7.0:
+ version "3.7.0"
+ resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.7.0.tgz#9b8b995a4e7c9024653ce743e902076a82fdf4e6"
+ integrity sha512-Y2OlFIzrDOPWUnpU0LORIcDn2xN7rC9yKffFM/7pGhQuhO+SUhfm2trkJ/S5amjFvem0Y+1EALz/MEPkvHXVNw==
+ dependencies:
+ lie "~3.3.0"
+ pako "~1.0.2"
+ readable-stream "~2.3.6"
+ set-immediate-shim "~1.0.1"
+
katex@^0.12.0:
version "0.12.0"
resolved "https://registry.yarnpkg.com/katex/-/katex-0.12.0.tgz#2fb1c665dbd2b043edcf8a1f5c555f46beaa0cb9"
@@ -5302,6 +5322,13 @@ levn@~0.3.0:
prelude-ls "~1.1.2"
type-check "~0.3.2"
+lie@~3.3.0:
+ version "3.3.0"
+ resolved "https://registry.yarnpkg.com/lie/-/lie-3.3.0.tgz#dcf82dee545f46074daf200c7c1c5a08e0f40f6a"
+ integrity sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==
+ dependencies:
+ immediate "~3.0.5"
+
lines-and-columns@^1.1.6:
version "1.1.6"
resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
@@ -6015,6 +6042,11 @@ pako@^2.0.3:
resolved "https://registry.yarnpkg.com/pako/-/pako-2.0.3.tgz#cdf475e31b678565251406de9e759196a0ea7a43"
integrity sha512-WjR1hOeg+kki3ZIOjaf4b5WVcay1jaliKSYiEaB1XzwhMQZJxRdQRv0V31EKBYlxb4T7SK3hjfc/jxyU64BoSw==
+pako@~1.0.2:
+ version "1.0.11"
+ resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
+ integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
+
parent-module@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -6552,7 +6584,7 @@ read-pkg@^5.2.0:
parse-json "^5.0.0"
type-fest "^0.6.0"
-readable-stream@^2.0.2:
+readable-stream@^2.0.2, readable-stream@~2.3.6:
version "2.3.7"
resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
@@ -6953,6 +6985,11 @@ set-blocking@^2.0.0:
resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
+set-immediate-shim@~1.0.1:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
+ integrity sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E=
+
set-value@^2.0.0, set-value@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
@@ -7206,11 +7243,6 @@ static-extend@^0.1.1:
define-property "^0.2.5"
object-copy "^0.1.0"
-streamsaver@^2.0.5:
- version "2.0.5"
- resolved "https://registry.yarnpkg.com/streamsaver/-/streamsaver-2.0.5.tgz#3212f0e908fcece5b3a65591094475cf87850d00"
- integrity sha512-KIWtBvi8A6FiFZGNSyuIZRZM6C8AvnWTiCx/TYa7so420vC5sQwcBKkdqInuGWoWMfeWy/P+/cRqMtWVf4RW9w==
-
string-length@^4.0.1:
version "4.0.2"
resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a"
@@ -7916,11 +7948,6 @@ walker@^1.0.7, walker@~1.0.5:
dependencies:
makeerror "1.0.x"
-web-streams-polyfill@^3.0.3:
- version "3.0.3"
- resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-3.0.3.tgz#f49e487eedeca47a207c1aee41ee5578f884b42f"
- integrity sha512-d2H/t0eqRNM4w2WvmTdoeIvzAUSpK7JmATB8Nr2lb7nQ9BTIJVjbQ/TRFVEh2gUH1HwclPdoPtfMoFfetXaZnA==
-
webcrypto-core@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/webcrypto-core/-/webcrypto-core-1.2.0.tgz#44fda3f9315ed6effe9a1e47466e0935327733b5"
From b91309be82e0550edebe8d6d25f087b3478ba116 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 26 Jul 2021 23:40:27 +0530
Subject: [PATCH 140/176] Apply suggestions from review
---
res/css/views/dialogs/_ExportDialog.scss | 54 ++++++++-----------
src/components/views/avatars/MemberAvatar.tsx | 6 +--
src/components/views/dialogs/ExportDialog.tsx | 28 ++++++----
.../views/elements/EventListSummary.tsx | 4 +-
src/components/views/elements/ReplyThread.tsx | 10 +++-
.../views/messages/RedactedBody.tsx | 2 +-
src/i18n/strings/en_EN.json | 3 ++
src/utils/exportUtils/Exporter.ts | 24 +++++++--
src/utils/exportUtils/HtmlExport.tsx | 20 ++++++-
src/utils/exportUtils/JSONExport.ts | 20 ++++++-
src/utils/exportUtils/PlainTextExport.ts | 20 ++++++-
src/utils/exportUtils/exportCSS.ts | 21 ++++++++
src/utils/exportUtils/exportUtils.ts | 18 ++++++-
13 files changed, 169 insertions(+), 61 deletions(-)
diff --git a/res/css/views/dialogs/_ExportDialog.scss b/res/css/views/dialogs/_ExportDialog.scss
index 4255768447..b4bc2b84b2 100644
--- a/res/css/views/dialogs/_ExportDialog.scss
+++ b/res/css/views/dialogs/_ExportDialog.scss
@@ -1,3 +1,19 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
.mx_ExportDialog {
.mx_ExportDialog_subheading {
font-size: $font-16px;
@@ -46,19 +62,14 @@
margin-top: unset;
margin-left: 18px;
}
- .mx_ExportDialog_spinner {
- animation: mx_rotate 2s linear infinite;
- z-index: 2;
- position: relative;
+
+ .mx_Spinner {
+ width: unset;
+ height: unset;
+ flex: unset;
margin-right: 10px;
- width: 24px;
- height: 24px;
- & .mx_ExportDialog_spinner_path {
- stroke: $accent-color;
- stroke-linecap: round;
- animation: mx_dash 1.5s ease-in-out infinite;
- }
}
+
display: flex;
flex-direction: row;
justify-content: flex-end;
@@ -78,24 +89,3 @@
padding: 9px 10px;
}
}
-
-@keyframes mx_rotate {
- 100% {
- transform: rotate(360deg);
- }
-}
-
-@keyframes mx_dash {
- 0% {
- stroke-dasharray: 1, 150;
- stroke-dashoffset: 0;
- }
- 50% {
- stroke-dasharray: 90, 150;
- stroke-dashoffset: -35;
- }
- 100% {
- stroke-dasharray: 90, 150;
- stroke-dashoffset: -124;
- }
-}
diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx
index f2f6920231..9554a50684 100644
--- a/src/components/views/avatars/MemberAvatar.tsx
+++ b/src/components/views/avatars/MemberAvatar.tsx
@@ -18,7 +18,6 @@ limitations under the License.
import React from 'react';
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
import { ResizeMethod } from 'matrix-js-sdk/src/@types/partials';
-import { omit } from "lodash";
import dis from "../../../dispatcher/dispatcher";
import { Action } from "../../../dispatcher/actions";
@@ -91,11 +90,10 @@ export default class MemberAvatar extends React.Component<IProps, IState> {
}
render() {
- let { member, fallbackUserId, onClick, viewUserOnClick, ...otherProps } = this.props;
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ let { member, fallbackUserId, onClick, viewUserOnClick, forExport, ...otherProps } = this.props;
const userId = member ? member.userId : fallbackUserId;
- otherProps = omit(otherProps, "forExport");
-
if (viewUserOnClick) {
onClick = () => {
dis.dispatch({
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 82c38763c3..76f0074573 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -1,3 +1,19 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
import React, { useRef, useState } from "react";
import { Room } from "matrix-js-sdk/src";
import { _t } from "../../../languageHandler";
@@ -19,6 +35,7 @@ import JSONExporter from "../../../utils/exportUtils/JSONExport";
import PlainTextExporter from "../../../utils/exportUtils/PlainTextExport";
import { useStateCallback } from "../../../hooks/useStateCallback";
import Exporter from "../../../utils/exportUtils/Exporter";
+import Spinner from "../elements/Spinner";
interface IProps extends IDialogProps {
room: Room;
@@ -352,16 +369,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
</div>
{ isExporting ? (
<div className="mx_ExportDialog_progress">
- <svg className="mx_ExportDialog_spinner" viewBox="0 0 50 50">
- <circle
- className="mx_ExportDialog_spinner_path"
- cx="25"
- cy="25"
- r="20"
- fill="none"
- stroke-width="5"
- />
- </svg>
+ <Spinner w={24} h={24} />
<p ref={exportProgressRef}>
{ _t("Processing...") }
</p>
diff --git a/src/components/views/elements/EventListSummary.tsx b/src/components/views/elements/EventListSummary.tsx
index 1b29b0ed3f..99349a236e 100644
--- a/src/components/views/elements/EventListSummary.tsx
+++ b/src/components/views/elements/EventListSummary.tsx
@@ -76,8 +76,8 @@ const EventListSummary: React.FC<IProps> = ({
{ children }
</React.Fragment>;
} else {
- const avatars = summaryMembers.map((m, idx) =>
- <MemberAvatar key={m.userId} member={m} width={14} height={14} />);
+ const avatars = summaryMembers.map((m) => <MemberAvatar key={m.userId} member={m} width={14} height={14} />);
+
body = (
<div className="mx_EventTile_line">
<div className="mx_EventTile_info">
diff --git a/src/components/views/elements/ReplyThread.tsx b/src/components/views/elements/ReplyThread.tsx
index 29b3d1b7f5..2144cc602c 100644
--- a/src/components/views/elements/ReplyThread.tsx
+++ b/src/components/views/elements/ReplyThread.tsx
@@ -354,8 +354,14 @@ export default class ReplyThread extends React.Component<IProps, IState> {
</blockquote>;
} else if (this.props.forExport) {
const eventId = ReplyThread.getParentEventId(this.props.parentEv);
- header = <p style={{ marginTop: -5, marginBottom: 5 }}>
- In reply to <a className="mx_reply_anchor" href={`#${eventId}`} scroll-to={eventId}>this message</a>
+ header = <p className="mx_ReplyThread_Export">
+ { _t("In reply to <messageLink/>",
+ {},
+ { messageLink: () => (
+ <a className="mx_reply_anchor" href={`#${eventId}`} scroll-to={eventId}> { _t("this message") } </a>
+ ),
+ })
+ }
</p>;
} else if (this.state.loading) {
header = <Spinner w={16} h={16} />;
diff --git a/src/components/views/messages/RedactedBody.tsx b/src/components/views/messages/RedactedBody.tsx
index e326fa7b50..65933cb801 100644
--- a/src/components/views/messages/RedactedBody.tsx
+++ b/src/components/views/messages/RedactedBody.tsx
@@ -39,7 +39,7 @@ const RedactedBody = React.forwardRef<any, IBodyProps>(({ mxEvent, forExport },
return (
<span className="mx_RedactedBody" ref={ref} title={titleText}>
- { forExport ? <img alt="Redacted" className="mx_export_trash_icon" src="icons/trash.svg" /> : null }
+ { forExport ? <img alt={_t("Redacted")} className="mx_export_trash_icon" src="icons/trash.svg" /> : null }
{ text }
</span>
);
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index a55576921c..7197879983 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1951,6 +1951,7 @@
"<reactors/><reactedWith> reacted with %(content)s</reactedWith>": "<reactors/><reactedWith> reacted with %(content)s</reactedWith>",
"<reactors/><reactedWith>reacted with %(shortName)s</reactedWith>": "<reactors/><reactedWith>reacted with %(shortName)s</reactedWith>",
"Message deleted on %(date)s": "Message deleted on %(date)s",
+ "Redacted": "Redacted",
"%(senderDisplayName)s changed the avatar for %(roomName)s": "%(senderDisplayName)s changed the avatar for %(roomName)s",
"%(senderDisplayName)s removed the room avatar.": "%(senderDisplayName)s removed the room avatar.",
"%(senderDisplayName)s changed the room avatar to <img/>": "%(senderDisplayName)s changed the room avatar to <img/>",
@@ -2098,6 +2099,8 @@
"QR Code": "QR Code",
"Unable to load event that was replied to, it either does not exist or you do not have permission to view it.": "Unable to load event that was replied to, it either does not exist or you do not have permission to view it.",
"<a>In reply to</a> <pill>": "<a>In reply to</a> <pill>",
+ "In reply to <messageLink/>": "In reply to <messageLink/>",
+ "this message": "this message",
"Room address": "Room address",
"e.g. my-room": "e.g. my-room",
"Some characters not allowed": "Some characters not allowed",
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index c840731d47..8574a5ed67 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -1,7 +1,23 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixClientPeg } from "../../MatrixClientPeg";
-import { exportOptions, exportTypes } from "./exportUtils";
+import { IExportOptions, exportTypes } from "./exportUtils";
import { decryptFile } from "../DecryptFile";
import { mediaFromContent } from "../../customisations/Media";
import { formatFullDateNoDay } from "../../DateUtils";
@@ -23,7 +39,7 @@ export default abstract class Exporter {
protected constructor(
protected room: Room,
protected exportType: exportTypes,
- protected exportOptions: exportOptions,
+ protected exportOptions: IExportOptions,
protected exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
this.cancelled = false;
@@ -53,6 +69,8 @@ export default abstract class Exporter {
protected async downloadZIP(): Promise<any> {
const filename = `matrix-export-${formatFullDateNoDay(new Date())}.zip`;
+ console.log(this.files, this.files.length);
+
const zip = new JSZip();
// Create a writable stream to the directory
if (!this.cancelled) this.updateProgress("Generating a ZIP");
@@ -62,7 +80,7 @@ export default abstract class Exporter {
const content = await zip.generateAsync({ type: "blob" });
- await saveAs(content, filename);
+ saveAs(content, filename);
}
protected cleanUp(): string {
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 3f98b4c92a..ee5e395fe7 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -1,3 +1,19 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
import React, { MutableRefObject } from "react";
import Exporter from "./Exporter";
import { mediaFromMxc } from "../../customisations/Media";
@@ -18,7 +34,7 @@ import exportCSS from "./exportCSS";
import exportJS from "./exportJS";
import exportIcons from "./exportIcons";
import { exportTypes } from "./exportUtils";
-import { exportOptions } from "./exportUtils";
+import { IExportOptions } from "./exportUtils";
import MatrixClientContext from "../../contexts/MatrixClientContext";
export default class HTMLExporter extends Exporter {
@@ -30,7 +46,7 @@ export default class HTMLExporter extends Exporter {
constructor(
room: Room,
exportType: exportTypes,
- exportOptions: exportOptions,
+ exportOptions: IExportOptions,
exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
super(room, exportType, exportOptions, exportProgressRef);
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index 417a7a40f4..5e07f4ae45 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -1,10 +1,26 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
import Exporter from "./Exporter";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { formatFullDateNoDay, formatFullDateNoDayNoTime } from "../../DateUtils";
import { haveTileForEvent } from "../../components/views/rooms/EventTile";
import { exportTypes } from "./exportUtils";
-import { exportOptions } from "./exportUtils";
+import { IExportOptions } from "./exportUtils";
import { EventType } from "matrix-js-sdk/src/@types/event";
import { MutableRefObject } from "react";
@@ -15,7 +31,7 @@ export default class JSONExporter extends Exporter {
constructor(
room: Room,
exportType: exportTypes,
- exportOptions: exportOptions,
+ exportOptions: IExportOptions,
exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
super(room, exportType, exportOptions, exportProgressRef);
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index feb4afe618..dc5df022a2 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -1,3 +1,19 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
import Exporter from "./Exporter";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
@@ -5,7 +21,7 @@ import { formatFullDateNoDay } from "../../DateUtils";
import { _t } from "../../languageHandler";
import { haveTileForEvent } from "../../components/views/rooms/EventTile";
import { exportTypes } from "./exportUtils";
-import { exportOptions } from "./exportUtils";
+import { IExportOptions } from "./exportUtils";
import { textForEvent } from "../../TextForEvent";
import { MutableRefObject } from "react";
@@ -16,7 +32,7 @@ export default class PlainTextExporter extends Exporter {
constructor(
room: Room,
exportType: exportTypes,
- exportOptions: exportOptions,
+ exportOptions: IExportOptions,
exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
super(room, exportType, exportOptions, exportProgressRef);
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index 49f3bf3bb7..ff5c714079 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -1,3 +1,19 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
/* eslint-disable max-len */
const lightCSS = `@charset "utf-8";
.hljs-addition {
@@ -25405,6 +25421,11 @@ a.mx_reply_anchor:hover{
}
}
+.mx_ReplyThread_Export {
+ margin-top: -5px;
+ margin-bottom: 5px;
+}
+
.mx_RedactedBody img.mx_export_trash_icon {
height: 14px;
width: 14px;
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 3e281269bf..e170bb2433 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -1,3 +1,19 @@
+/*
+Copyright 2018-2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
import { _t } from "../../languageHandler";
export enum exportFormats {
@@ -37,7 +53,7 @@ export const textForType = (type: string): string => {
}
};
-export interface exportOptions {
+export interface IExportOptions {
startDate?: number;
numberOfMessages?: number;
attachmentsIncluded: boolean;
From 9771f4d6c48230751ad8e914e97d7c38a6061c45 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 27 Jul 2021 00:00:52 +0530
Subject: [PATCH 141/176] PascalCasing for enums
---
src/components/views/dialogs/ExportDialog.tsx | 32 +++++++++----------
src/utils/exportUtils/Exporter.ts | 10 +++---
src/utils/exportUtils/HtmlExport.tsx | 4 +--
src/utils/exportUtils/JSONExport.ts | 4 +--
src/utils/exportUtils/PlainTextExport.ts | 4 +--
src/utils/exportUtils/exportUtils.ts | 18 +++++------
6 files changed, 36 insertions(+), 36 deletions(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 76f0074573..b98f375971 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -24,8 +24,8 @@ import Field from "../elements/Field";
import StyledRadioGroup from "../elements/StyledRadioGroup";
import StyledCheckbox from "../elements/StyledCheckbox";
import {
- exportFormats,
- exportTypes,
+ ExportFormats,
+ ExportTypes,
textForFormat,
textForType,
} from "../../../utils/exportUtils/exportUtils";
@@ -42,8 +42,8 @@ interface IProps extends IDialogProps {
}
const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
- const [exportFormat, setExportFormat] = useState(exportFormats.HTML);
- const [exportType, setExportType] = useState(exportTypes.TIMELINE);
+ const [exportFormat, setExportFormat] = useState(ExportFormats.HTML);
+ const [exportType, setExportType] = useState(ExportTypes.TIMELINE);
const [includeAttachments, setAttachments] = useState(false);
const [isExporting, setExporting] = useState(false);
const [numberOfMessages, setNumberOfMessages] = useState<number>(100);
@@ -70,31 +70,31 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
maxSize: sizeLimit * 1024 * 1024,
};
switch (exportFormat) {
- case exportFormats.HTML:
+ case ExportFormats.HTML:
setExporter(
new HTMLExporter(
room,
- exportTypes[exportType],
+ ExportTypes[exportType],
exportOptions,
exportProgressRef,
),
);
break;
- case exportFormats.JSON:
+ case ExportFormats.JSON:
setExporter(
new JSONExporter(
room,
- exportTypes[exportType],
+ ExportTypes[exportType],
exportOptions,
exportProgressRef,
),
);
break;
- case exportFormats.PLAIN_TEXT:
+ case ExportFormats.PLAIN_TEXT:
setExporter(
new PlainTextExporter(
room,
- exportTypes[exportType],
+ ExportTypes[exportType],
exportOptions,
exportProgressRef,
),
@@ -114,7 +114,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
sizeLimitRef.current.validate({ focused: true });
return;
}
- if (exportType === exportTypes.LAST_N_MESSAGES) {
+ if (exportType === ExportTypes.LAST_N_MESSAGES) {
const isValidNumberOfMessages =
await messageCountRef.current.validate({ focused: false });
if (!isValidNumberOfMessages) {
@@ -202,12 +202,12 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
});
};
- const exportFormatOptions = Object.keys(exportFormats).map((format) => ({
+ const exportFormatOptions = Object.keys(ExportFormats).map((format) => ({
value: format,
label: textForFormat(format),
}));
- const exportTypeOptions = Object.keys(exportTypes).map((type) => {
+ const exportTypeOptions = Object.keys(ExportTypes).map((type) => {
return (
<option key={type} value={type}>
{ textForType(type) }
@@ -216,7 +216,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
});
let messageCount = null;
- if (exportType === exportTypes.LAST_N_MESSAGES) {
+ if (exportType === ExportTypes.LAST_N_MESSAGES) {
messageCount = (
<Field
element="input"
@@ -322,7 +322,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
<StyledRadioGroup
name="exportFormat"
value={exportFormat}
- onChange={(key) => setExportFormat(exportFormats[key])}
+ onChange={(key) => setExportFormat(ExportFormats[key])}
definitions={exportFormatOptions}
/>
@@ -334,7 +334,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
element="select"
value={exportType}
onChange={(e) => {
- setExportType(exportTypes[e.target.value]);
+ setExportType(ExportTypes[e.target.value]);
}}
>
{ exportTypeOptions }
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 8574a5ed67..0786641f44 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -17,7 +17,7 @@ limitations under the License.
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixClientPeg } from "../../MatrixClientPeg";
-import { IExportOptions, exportTypes } from "./exportUtils";
+import { IExportOptions, ExportTypes } from "./exportUtils";
import { decryptFile } from "../DecryptFile";
import { mediaFromContent } from "../../customisations/Media";
import { formatFullDateNoDay } from "../../DateUtils";
@@ -38,7 +38,7 @@ export default abstract class Exporter {
protected constructor(
protected room: Room,
- protected exportType: exportTypes,
+ protected exportType: ExportTypes,
protected exportOptions: IExportOptions,
protected exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
@@ -114,10 +114,10 @@ export default abstract class Exporter {
protected getLimit(): number {
let limit: number;
switch (this.exportType) {
- case exportTypes.LAST_N_MESSAGES:
+ case ExportTypes.LAST_N_MESSAGES:
limit = this.exportOptions.numberOfMessages;
break;
- case exportTypes.TIMELINE:
+ case ExportTypes.TIMELINE:
limit = 40;
break;
default:
@@ -162,7 +162,7 @@ export default abstract class Exporter {
events.push(mxEv);
}
this.updateProgress(
- ("Fetched " + events.length + " events ") + (this.exportType === exportTypes.LAST_N_MESSAGES
+ ("Fetched " + events.length + " events ") + (this.exportType === ExportTypes.LAST_N_MESSAGES
? `out of ${this.exportOptions.numberOfMessages}`
: "so far"),
);
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index ee5e395fe7..05ce8570da 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -33,7 +33,7 @@ import BaseAvatar from "../../components/views/avatars/BaseAvatar";
import exportCSS from "./exportCSS";
import exportJS from "./exportJS";
import exportIcons from "./exportIcons";
-import { exportTypes } from "./exportUtils";
+import { ExportTypes } from "./exportUtils";
import { IExportOptions } from "./exportUtils";
import MatrixClientContext from "../../contexts/MatrixClientContext";
@@ -45,7 +45,7 @@ export default class HTMLExporter extends Exporter {
constructor(
room: Room,
- exportType: exportTypes,
+ exportType: ExportTypes,
exportOptions: IExportOptions,
exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index 5e07f4ae45..3a9b923b08 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -19,7 +19,7 @@ import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { formatFullDateNoDay, formatFullDateNoDayNoTime } from "../../DateUtils";
import { haveTileForEvent } from "../../components/views/rooms/EventTile";
-import { exportTypes } from "./exportUtils";
+import { ExportTypes } from "./exportUtils";
import { IExportOptions } from "./exportUtils";
import { EventType } from "matrix-js-sdk/src/@types/event";
import { MutableRefObject } from "react";
@@ -30,7 +30,7 @@ export default class JSONExporter extends Exporter {
constructor(
room: Room,
- exportType: exportTypes,
+ exportType: ExportTypes,
exportOptions: IExportOptions,
exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index dc5df022a2..4f00a3aa06 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -20,7 +20,7 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { formatFullDateNoDay } from "../../DateUtils";
import { _t } from "../../languageHandler";
import { haveTileForEvent } from "../../components/views/rooms/EventTile";
-import { exportTypes } from "./exportUtils";
+import { ExportTypes } from "./exportUtils";
import { IExportOptions } from "./exportUtils";
import { textForEvent } from "../../TextForEvent";
import { MutableRefObject } from "react";
@@ -31,7 +31,7 @@ export default class PlainTextExporter extends Exporter {
constructor(
room: Room,
- exportType: exportTypes,
+ exportType: ExportTypes,
exportOptions: IExportOptions,
exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index e170bb2433..6b356c3ed2 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -16,37 +16,37 @@ limitations under the License.
import { _t } from "../../languageHandler";
-export enum exportFormats {
+export enum ExportFormats {
HTML = "HTML",
PLAIN_TEXT = "PLAIN_TEXT",
JSON = "JSON",
}
-export enum exportTypes {
+export enum ExportTypes {
TIMELINE = "TIMELINE",
BEGINNING = "BEGINNING",
- // START_DATE = "START_DATE",
LAST_N_MESSAGES = "LAST_N_MESSAGES",
+ // START_DATE = "START_DATE",
}
export const textForFormat = (format: string): string => {
switch (format) {
- case exportFormats.HTML:
+ case ExportFormats.HTML:
return _t("HTML");
- case exportFormats.JSON:
+ case ExportFormats.JSON:
return _t("JSON");
- case exportFormats.PLAIN_TEXT:
+ case ExportFormats.PLAIN_TEXT:
return _t("Plain Text");
}
};
export const textForType = (type: string): string => {
switch (type) {
- case exportTypes.BEGINNING:
+ case ExportTypes.BEGINNING:
return _t("From the beginning");
- case exportTypes.LAST_N_MESSAGES:
+ case ExportTypes.LAST_N_MESSAGES:
return _t("Specify a number of messages");
- case exportTypes.TIMELINE:
+ case ExportTypes.TIMELINE:
return _t("Current Timeline");
// case exportTypes.START_DATE:
// return _t("From a specific date");
From 57590b9a8aa0d52200a8ee5013b7b58ed61a9ef2 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 27 Jul 2021 11:37:47 +0530
Subject: [PATCH 142/176] Use raw-loaders to import svgs and exportJS
---
package.json | 1 +
src/@types/raw-loader.d.ts | 20 +++++++++++++
src/utils/exportUtils/HtmlExport.tsx | 2 +-
src/utils/exportUtils/exportIcons.ts | 18 ++++-------
src/utils/exportUtils/exportJS.js | 25 ++++++++++++++++
src/utils/exportUtils/exportJS.ts | 27 -----------------
yarn.lock | 45 ++++++++++++++++++++++++++--
7 files changed, 95 insertions(+), 43 deletions(-)
create mode 100644 src/@types/raw-loader.d.ts
create mode 100644 src/utils/exportUtils/exportJS.js
delete mode 100644 src/utils/exportUtils/exportJS.ts
diff --git a/package.json b/package.json
index 30254ed78d..086a1006cf 100644
--- a/package.json
+++ b/package.json
@@ -167,6 +167,7 @@
"matrix-mock-request": "^1.2.3",
"matrix-react-test-utils": "^0.2.3",
"matrix-web-i18n": "github:matrix-org/matrix-web-i18n",
+ "raw-loader": "^4.0.2",
"react-test-renderer": "^17.0.2",
"rimraf": "^3.0.2",
"stylelint": "^13.9.0",
diff --git a/src/@types/raw-loader.d.ts b/src/@types/raw-loader.d.ts
new file mode 100644
index 0000000000..ee9277c662
--- /dev/null
+++ b/src/@types/raw-loader.d.ts
@@ -0,0 +1,20 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+declare module '!!raw-loader!*' {
+ const contents: string;
+ export = contents;
+}
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 05ce8570da..c27f5b7d12 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -31,7 +31,7 @@ import EventTile, { haveTileForEvent } from "../../components/views/rooms/EventT
import DateSeparator from "../../components/views/messages/DateSeparator";
import BaseAvatar from "../../components/views/avatars/BaseAvatar";
import exportCSS from "./exportCSS";
-import exportJS from "./exportJS";
+import exportJS from "!!raw-loader!./exportJS";
import exportIcons from "./exportIcons";
import { ExportTypes } from "./exportUtils";
import { IExportOptions } from "./exportUtils";
diff --git a/src/utils/exportUtils/exportIcons.ts b/src/utils/exportUtils/exportIcons.ts
index 2a19e9c4d1..865fb08a06 100644
--- a/src/utils/exportUtils/exportIcons.ts
+++ b/src/utils/exportUtils/exportIcons.ts
@@ -1,15 +1,7 @@
-/* eslint-disable max-len */
+import Trash from "!!raw-loader!../../../res/img/element-icons/trashcan.svg";
+import Attach from "!!raw-loader!../../../res/img/element-icons/room/composer/attach.svg";
+
export default {
- "trash.svg": `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path d="M2.25 5.5H5.16667H21.75" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
- <path d="M16.5 5.5L15 1H9L7.5 5.5" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
- <path d="M5.25 9.25V20.75C5.25 21.8546 6.14543 22.75 7.25 22.75H16.75C17.8546 22.75 18.75 21.8546 18.75 20.75V9.25" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
- <path d="M9.75 9.25V18.25" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
- <path d="M14.25 9.25V18.25" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
- </svg>
- `,
- "attach.svg": `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path d="M15.8155 13.0336L11.2282 17.4193C9.08205 19.45 5.53015 19.6024 3.45617 17.4193C1.4888 15.3484 1.48412 12.0136 3.63032 9.98294L11.8691 2.10597C13.2999 0.752226 15.5435 0.535035 16.984 2.05147C18.5968 3.7491 18.1298 5.99061 16.699 7.34435L8.6284 14.9682C7.913 15.645 6.7551 15.7233 6.03771 14.9682C5.34842 14.2426 5.45967 13.0625 6.17507 12.3856L10.9045 7.86398" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
- </svg>
- `,
+ "trash.svg": Trash,
+ "attach.svg": Attach,
};
diff --git a/src/utils/exportUtils/exportJS.js b/src/utils/exportUtils/exportJS.js
new file mode 100644
index 0000000000..9e58c8b99c
--- /dev/null
+++ b/src/utils/exportUtils/exportJS.js
@@ -0,0 +1,25 @@
+function showToastIfNeeded(replyId) {
+ const el = document.getElementById(replyId);
+ if (!el) {
+ showToast("The message you're looking for wasn't exported");
+ return;
+ }
+}
+
+function showToast(text) {
+ const el = document.getElementById("snackbar");
+ el.innerHTML = text;
+ el.className = "mx_show";
+ setTimeout(() => {
+ el.className = el.className.replace("mx_show", "");
+ }, 2000);
+}
+
+window.onload = () => {
+ document.querySelectorAll('.mx_reply_anchor').forEach(element => {
+ element.addEventListener('click', event => {
+ showToastIfNeeded(event.target.getAttribute("scroll-to"));
+ });
+ });
+};
+
diff --git a/src/utils/exportUtils/exportJS.ts b/src/utils/exportUtils/exportJS.ts
deleted file mode 100644
index 21b10b50d5..0000000000
--- a/src/utils/exportUtils/exportJS.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-export default `
-function showToastIfNeeded(replyId){
- let el = document.getElementById(replyId);
- if(!el) {
- showToast("The message you're looking for wasn't exported");
- return;
- };
-}
-
-function showToast(text) {
- let el = document.getElementById("snackbar");
- el.innerHTML = text;
- el.className = "mx_show";
- setTimeout(() => {
- el.className = el.className.replace("mx_show", "");
- }, 2000);
-}
-
-window.onload = () => {
-document.querySelectorAll('.mx_reply_anchor').forEach(element => {
- element.addEventListener('click', event => {
- showToastIfNeeded(event.target.getAttribute("scroll-to"));
- })
-})
-}
-
-`;
diff --git a/yarn.lock b/yarn.lock
index dc3bc2ca7b..ea64ed5180 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1531,7 +1531,7 @@
jest-diff "^26.0.0"
pretty-format "^26.0.0"
-"@types/json-schema@^7.0.7":
+"@types/json-schema@^7.0.7", "@types/json-schema@^7.0.8":
version "7.0.8"
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.8.tgz#edf1bf1dbf4e04413ca8e5b17b3b7d7d54b59818"
integrity sha512-YSBPTLTVm2e2OoQIDYx8HaeWJ5tTToLH67kXR7zYNGupXMEHa2++G8k+DczX2cFVgalypqtyZIcU19AFcmOpmg==
@@ -1840,7 +1840,12 @@ agent-base@6:
dependencies:
debug "4"
-ajv@^6.10.0, ajv@^6.12.3, ajv@^6.12.4:
+ajv-keywords@^3.5.2:
+ version "3.5.2"
+ resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
+ integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
+
+ajv@^6.10.0, ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.5:
version "6.12.6"
resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -2216,6 +2221,11 @@ bcrypt-pbkdf@^1.0.0:
dependencies:
tweetnacl "^0.14.3"
+big.js@^5.2.2:
+ version "5.2.2"
+ resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
+ integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
+
binary-extensions@^1.0.0:
version "1.13.1"
resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.1.tgz#598afe54755b2868a5330d2aff9d4ebb53209b65"
@@ -3072,6 +3082,11 @@ emojibase-regex@^5.1.3:
resolved "https://registry.yarnpkg.com/emojibase-regex/-/emojibase-regex-5.1.3.tgz#f0ef621ed6ec624becd2326f999fd4ea01b94554"
integrity sha512-gT8T9LxLA8VJdI+8KQtyykB9qKzd7WuUL3M2yw6y9tplFeufOUANg3UKVaKUvkMcRNvZsSElWhxcJrx8WPE12g==
+emojis-list@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
+ integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
+
encoding@^0.1.11:
version "0.1.13"
resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9"
@@ -5339,6 +5354,15 @@ linkifyjs@^2.1.9:
resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-2.1.9.tgz#af06e45a2866ff06c4766582590d098a4d584702"
integrity sha512-74ivurkK6WHvHFozVaGtQWV38FzBwSTGNmJolEgFp7QgR2bl6ArUWlvT4GcHKbPe1z3nWYi+VUdDZk16zDOVug==
+loader-utils@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.0.tgz#e4cace5b816d425a166b5f097e10cd12b36064b0"
+ integrity sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==
+ dependencies:
+ big.js "^5.2.2"
+ emojis-list "^3.0.0"
+ json5 "^2.1.2"
+
locate-path@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
@@ -6445,6 +6469,14 @@ randexp@0.4.6:
discontinuous-range "1.0.0"
ret "~0.1.10"
+raw-loader@^4.0.2:
+ version "4.0.2"
+ resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-4.0.2.tgz#1aac6b7d1ad1501e66efdac1522c73e59a584eb6"
+ integrity sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==
+ dependencies:
+ loader-utils "^2.0.0"
+ schema-utils "^3.0.0"
+
re-resizable@^6.9.0:
version "6.9.0"
resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.9.0.tgz#9c3059b389ced6ade602234cc5bb1e12d231cd47"
@@ -6958,6 +6990,15 @@ scheduler@^0.20.2:
loose-envify "^1.1.0"
object-assign "^4.1.1"
+schema-utils@^3.0.0:
+ version "3.1.1"
+ resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.1.tgz#bc74c4b6b6995c1d88f76a8b77bea7219e0c8281"
+ integrity sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==
+ dependencies:
+ "@types/json-schema" "^7.0.8"
+ ajv "^6.12.5"
+ ajv-keywords "^3.5.2"
+
"semver@2 || 3 || 4 || 5", semver@^5.5.0, semver@^5.6.0:
version "5.7.1"
resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
From 6f922769a34d7db2b2c85c6efa82eb31a52d84d4 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 27 Jul 2021 11:45:10 +0530
Subject: [PATCH 143/176] Reduce max size to 2000 MB
---
src/components/views/dialogs/ExportDialog.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index b98f375971..5ebe6ed7c5 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -131,7 +131,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
}: Pick<IFieldState, "value">): Promise<IValidationResult> => {
const parsedSize = parseFloat(value);
const min = 1;
- const max = 4000;
+ const max = 2000;
if (isNaN(parsedSize)) {
return { valid: false, feedback: _t("Size must be a number") };
From 371d1026fad0900f5017f958e146bf3679594b8b Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 27 Jul 2021 12:11:08 +0530
Subject: [PATCH 144/176] Add jest-raw-loader
---
package.json | 4 +++-
src/@types/raw-loader.d.ts | 2 +-
src/utils/exportUtils/Exporter.ts | 2 --
yarn.lock | 5 +++++
4 files changed, 9 insertions(+), 4 deletions(-)
diff --git a/package.json b/package.json
index 086a1006cf..775c297c21 100644
--- a/package.json
+++ b/package.json
@@ -164,6 +164,7 @@
"jest-canvas-mock": "^2.3.0",
"jest-environment-jsdom-sixteen": "^1.0.3",
"jest-fetch-mock": "^3.0.3",
+ "jest-raw-loader": "^1.0.1",
"matrix-mock-request": "^1.2.3",
"matrix-react-test-utils": "^0.2.3",
"matrix-web-i18n": "github:matrix-org/matrix-web-i18n",
@@ -193,7 +194,8 @@
"decoderWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
"decoderWorker\\.min\\.wasm": "<rootDir>/__mocks__/empty.js",
"waveWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
- "workers/(.+)\\.worker\\.ts": "<rootDir>/__mocks__/workerMock.js"
+ "workers/(.+)\\.worker\\.ts": "<rootDir>/__mocks__/workerMock.js",
+ "^!!raw-loader!.*": "jest-raw-loader"
},
"transformIgnorePatterns": [
"/node_modules/(?!matrix-js-sdk).+$"
diff --git a/src/@types/raw-loader.d.ts b/src/@types/raw-loader.d.ts
index ee9277c662..efd825204e 100644
--- a/src/@types/raw-loader.d.ts
+++ b/src/@types/raw-loader.d.ts
@@ -16,5 +16,5 @@ limitations under the License.
declare module '!!raw-loader!*' {
const contents: string;
- export = contents;
+ export default contents;
}
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 0786641f44..fd0f603cb5 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -69,8 +69,6 @@ export default abstract class Exporter {
protected async downloadZIP(): Promise<any> {
const filename = `matrix-export-${formatFullDateNoDay(new Date())}.zip`;
- console.log(this.files, this.files.length);
-
const zip = new JSZip();
// Create a writable stream to the directory
if (!this.cancelled) this.updateProgress("Generating a ZIP");
diff --git a/yarn.lock b/yarn.lock
index ea64ed5180..e0e3e830c8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4956,6 +4956,11 @@ jest-pnp-resolver@^1.2.2:
resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz#b704ac0ae028a89108a4d040b3f919dfddc8e33c"
integrity sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==
+jest-raw-loader@^1.0.1:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/jest-raw-loader/-/jest-raw-loader-1.0.1.tgz#ce9f56d54650f157c4a7d16d224ba5d613bcd626"
+ integrity sha1-zp9W1UZQ8VfEp9FtIkul1hO81iY=
+
jest-regex-util@^26.0.0:
version "26.0.0"
resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-26.0.0.tgz#d25e7184b36e39fd466c3bc41be0971e821fee28"
From 6f8f0e831408b1896755666e169edb2e7d3655b9 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 27 Jul 2021 19:29:22 +0530
Subject: [PATCH 145/176] Change copyright year
---
src/utils/exportUtils/exportCSS.ts | 4 ++--
src/utils/exportUtils/exportIcons.ts | 8 ++++----
src/utils/exportUtils/exportUtils.ts | 2 +-
3 files changed, 7 insertions(+), 7 deletions(-)
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index ff5c714079..36dcea76bb 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -5,7 +5,7 @@ Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0
+http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
@@ -13,8 +13,8 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
-
/* eslint-disable max-len */
+
const lightCSS = `@charset "utf-8";
.hljs-addition {
background: #dfd;
diff --git a/src/utils/exportUtils/exportIcons.ts b/src/utils/exportUtils/exportIcons.ts
index 865fb08a06..181a62848e 100644
--- a/src/utils/exportUtils/exportIcons.ts
+++ b/src/utils/exportUtils/exportIcons.ts
@@ -1,7 +1,7 @@
-import Trash from "!!raw-loader!../../../res/img/element-icons/trashcan.svg";
-import Attach from "!!raw-loader!../../../res/img/element-icons/room/composer/attach.svg";
+import trashSVG from "!!raw-loader!../../../res/img/element-icons/trashcan.svg";
+import attachSVG from "!!raw-loader!../../../res/img/element-icons/room/composer/attach.svg";
export default {
- "trash.svg": Trash,
- "attach.svg": Attach,
+ "trash.svg": trashSVG,
+ "attach.svg": attachSVG,
};
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 6b356c3ed2..9b360fb3f1 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -1,5 +1,5 @@
/*
-Copyright 2018-2021 The Matrix.org Foundation C.I.C.
+Copyright 2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
From 04edf4103f1f78463b96551f01f1e191339d98da Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 30 Jul 2021 11:46:55 +0530
Subject: [PATCH 146/176] Remove unnecessary awaits
---
src/utils/exportUtils/Exporter.ts | 4 ++--
src/utils/exportUtils/JSONExport.ts | 2 +-
src/utils/exportUtils/PlainTextExport.ts | 2 +-
test/utils/export-test.ts | 15 +++++++++++++++
4 files changed, 19 insertions(+), 4 deletions(-)
create mode 100644 test/utils/export-test.ts
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index fd0f603cb5..b521b77aaa 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -92,8 +92,8 @@ export default abstract class Exporter {
this.cancelled = true;
}
- protected async downloadPlainText(fileName: string, text: string): Promise<any> {
- await saveAs(new Blob[text], fileName);
+ protected downloadPlainText(fileName: string, text: string) {
+ saveAs(new Blob[text], fileName);
}
protected setEventMetadata(event: MatrixEvent): MatrixEvent {
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index 3a9b923b08..356f4282db 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -107,7 +107,7 @@ export default class JSONExporter extends Exporter {
await this.downloadZIP();
} else {
const fileName = `matrix-export-${formatFullDateNoDay(new Date())}.json`;
- await this.downloadPlainText(fileName, text);
+ this.downloadPlainText(fileName, text);
}
const exportEnd = performance.now();
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 4f00a3aa06..1c946bb048 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -134,7 +134,7 @@ export default class PlainTextExporter extends Exporter {
await this.downloadZIP();
} else {
const fileName = `matrix-export-${formatFullDateNoDay(new Date())}.txt`;
- await this.downloadPlainText(fileName, text);
+ this.downloadPlainText(fileName, text);
}
const exportEnd = performance.now();
diff --git a/test/utils/export-test.ts b/test/utils/export-test.ts
new file mode 100644
index 0000000000..42c4e33b5b
--- /dev/null
+++ b/test/utils/export-test.ts
@@ -0,0 +1,15 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
From 4824c937070b853ac58082634c3eaa660aea4cc2 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 3 Aug 2021 14:36:21 +0530
Subject: [PATCH 147/176] Add a test file
---
src/utils/exportUtils/Exporter.ts | 19 +++---
src/utils/exportUtils/exportUtils.ts | 6 +-
test/test-utils.js | 3 +-
test/utils/export-test.ts | 15 -----
test/utils/export-test.tsx | 94 ++++++++++++++++++++++++++++
5 files changed, 112 insertions(+), 25 deletions(-)
delete mode 100644 test/utils/export-test.ts
create mode 100644 test/utils/export-test.tsx
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index b521b77aaa..47db141830 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -42,6 +42,9 @@ export default abstract class Exporter {
protected exportOptions: IExportOptions,
protected exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
+ if (exportOptions.maxSize < 1 || exportOptions.maxSize > 2000 || exportOptions.numberOfMessages > 10**8) {
+ throw new Error("Invalid export options");
+ }
this.cancelled = false;
this.files = [];
this.client = MatrixClientPeg.get();
@@ -109,7 +112,7 @@ export default abstract class Exporter {
return event;
}
- protected getLimit(): number {
+ public getLimit(): number {
let limit: number;
switch (this.exportType) {
case ExportTypes.LAST_N_MESSAGES:
@@ -152,11 +155,11 @@ export default abstract class Exporter {
const matrixEvents: MatrixEvent[] = res.chunk.map(eventMapper);
for (const mxEv of matrixEvents) {
- if (this.exportOptions.startDate && mxEv.getTs() < this.exportOptions.startDate) {
- // Once the last message received is older than the start date, we break out of both the loops
- limit = 0;
- break;
- }
+ // if (this.exportOptions.startDate && mxEv.getTs() < this.exportOptions.startDate) {
+ // // Once the last message received is older than the start date, we break out of both the loops
+ // limit = 0;
+ // break;
+ // }
events.push(mxEv);
}
this.updateProgress(
@@ -208,7 +211,7 @@ export default abstract class Exporter {
return blob;
}
- protected splitFileName(file: string): string[] {
+ public splitFileName(file: string): string[] {
const lastDot = file.lastIndexOf('.');
if (lastDot === -1) return [file, ""];
const fileName = file.slice(0, lastDot);
@@ -216,7 +219,7 @@ export default abstract class Exporter {
return [fileName, '.' + ext];
}
- protected getFilePath(event: MatrixEvent): string {
+ public getFilePath(event: MatrixEvent): string {
const mediaType = event.getContent().msgtype;
let fileDirectory: string;
switch (mediaType) {
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 9b360fb3f1..8410b747ea 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -37,6 +37,8 @@ export const textForFormat = (format: string): string => {
return _t("JSON");
case ExportFormats.PLAIN_TEXT:
return _t("Plain Text");
+ default:
+ throw new Error("Unknown format");
}
};
@@ -48,13 +50,15 @@ export const textForType = (type: string): string => {
return _t("Specify a number of messages");
case ExportTypes.TIMELINE:
return _t("Current Timeline");
+ default:
+ throw new Error("Unknown type: " + type);
// case exportTypes.START_DATE:
// return _t("From a specific date");
}
};
export interface IExportOptions {
- startDate?: number;
+ // startDate?: number;
numberOfMessages?: number;
attachmentsIncluded: boolean;
maxSize: number;
diff --git a/test/test-utils.js b/test/test-utils.js
index 5e29fd242e..4ce0c7f3ce 100644
--- a/test/test-utils.js
+++ b/test/test-utils.js
@@ -202,8 +202,9 @@ export function mkMembership(opts) {
* @param {Object} opts Values for the message
* @param {string} opts.room The room ID for the event.
* @param {string} opts.user The user ID for the event.
- * @param {string} opts.msg Optional. The content.body for the event.
+ * @param {number} opts.ts The timestamp for the event.
* @param {boolean} opts.event True to make a MatrixEvent.
+ * @param {string=} opts.msg Optional. The content.body for the event.
* @return {Object|MatrixEvent} The event
*/
export function mkMessage(opts) {
diff --git a/test/utils/export-test.ts b/test/utils/export-test.ts
deleted file mode 100644
index 42c4e33b5b..0000000000
--- a/test/utils/export-test.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/*
-Copyright 2021 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
diff --git a/test/utils/export-test.tsx b/test/utils/export-test.tsx
new file mode 100644
index 0000000000..3bcbadecd8
--- /dev/null
+++ b/test/utils/export-test.tsx
@@ -0,0 +1,94 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { MatrixClient, Room } from "matrix-js-sdk";
+import { MatrixClientPeg } from "../../src/MatrixClientPeg";
+import { textForFormat } from "../../src/utils/exportUtils/exportUtils";
+// import HTMLExporter from "../../src/utils/exportUtils/HtmlExport";
+// import PlainTextExporter from "../../src/utils/exportUtils/PlainTextExport";
+import * as TestUtilsMatrix from '../test-utils';
+import { stubClient } from '../test-utils';
+
+let client: MatrixClient;
+
+const MY_USER_ID = "@me:here";
+
+function generateRoomId() {
+ return '!' + Math.random().toString().slice(2, 10) + ':domain';
+}
+
+describe('export', function() {
+ stubClient();
+ client = MatrixClientPeg.get();
+ client.getUserId = () => {
+ return MY_USER_ID;
+ };
+
+ // const invalidExportOptions: IExportOptions[] = [
+ // {
+ // numberOfMessages: 10**9,
+ // maxSize: 1024,
+ // attachmentsIncluded: false,
+ // },
+ // {
+ // numberOfMessages: -1,
+ // maxSize: 4096,
+ // attachmentsIncluded: false,
+ // },
+ // {
+ // numberOfMessages: 0,
+ // maxSize: 1024,
+ // attachmentsIncluded: false,
+ // },
+ // ];
+
+ const events = mkEvents();
+ const room = createRoom();
+ console.log(events, room);
+ function createRoom() {
+ const room = new Room(generateRoomId(), null, client.getUserId());
+ return room;
+ }
+
+ function mkEvents() {
+ const events = [];
+ const ts0 = Date.now();
+ for (let i = 0; i < 10; i++) {
+ events.push(TestUtilsMatrix.mkMessage({
+ event: true, room: "!room:id", user: "@user:id",
+ ts: ts0 + i * 1000,
+ }));
+ }
+ return events;
+ }
+
+ it('checks if the export format is valid', function() {
+ expect(textForFormat('HTML')).toBeTruthy();
+ expect(textForFormat('JSON')).toBeTruthy();
+ expect(textForFormat('PLAIN_TEXT')).toBeTruthy();
+ try {
+ textForFormat('PDF');
+ throw new Error("Expected to throw an error");
+ } catch (e) {
+ expect(e.message).toBe("Unknown format");
+ }
+ });
+
+ it('checks if the export options are valid', function() {
+ // const html = new PlainTextExporter(room, ExportTypes.BEGINNING, invalidExportOptions[0], null);
+ });
+});
+
From b333612deab879160da92f8b4409d88ae6d4b398 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 3 Aug 2021 14:53:23 +0530
Subject: [PATCH 148/176] Fix comparing MB -> bytes
---
src/utils/exportUtils/Exporter.ts | 4 ++-
test/utils/export-test.tsx | 49 ++++++++++++++++++-------------
2 files changed, 31 insertions(+), 22 deletions(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 47db141830..f975e76ddd 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -42,7 +42,9 @@ export default abstract class Exporter {
protected exportOptions: IExportOptions,
protected exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
- if (exportOptions.maxSize < 1 || exportOptions.maxSize > 2000 || exportOptions.numberOfMessages > 10**8) {
+ if (exportOptions.maxSize < 1 * 1024 * 1024||
+ exportOptions.maxSize > 2000 * 1024 * 1024||
+ exportOptions.numberOfMessages > 10**8) {
throw new Error("Invalid export options");
}
this.cancelled = false;
diff --git a/test/utils/export-test.tsx b/test/utils/export-test.tsx
index 3bcbadecd8..279ebcff59 100644
--- a/test/utils/export-test.tsx
+++ b/test/utils/export-test.tsx
@@ -16,9 +16,9 @@ limitations under the License.
import { MatrixClient, Room } from "matrix-js-sdk";
import { MatrixClientPeg } from "../../src/MatrixClientPeg";
-import { textForFormat } from "../../src/utils/exportUtils/exportUtils";
-// import HTMLExporter from "../../src/utils/exportUtils/HtmlExport";
-// import PlainTextExporter from "../../src/utils/exportUtils/PlainTextExport";
+import { textForFormat, IExportOptions, ExportTypes } from "../../src/utils/exportUtils/exportUtils";
+import '../skinned-sdk';
+import PlainTextExporter from "../../src/utils/exportUtils/PlainTextExport";
import * as TestUtilsMatrix from '../test-utils';
import { stubClient } from '../test-utils';
@@ -37,23 +37,23 @@ describe('export', function() {
return MY_USER_ID;
};
- // const invalidExportOptions: IExportOptions[] = [
- // {
- // numberOfMessages: 10**9,
- // maxSize: 1024,
- // attachmentsIncluded: false,
- // },
- // {
- // numberOfMessages: -1,
- // maxSize: 4096,
- // attachmentsIncluded: false,
- // },
- // {
- // numberOfMessages: 0,
- // maxSize: 1024,
- // attachmentsIncluded: false,
- // },
- // ];
+ const invalidExportOptions: IExportOptions[] = [
+ {
+ numberOfMessages: 10**9,
+ maxSize: 1024 * 1024 * 1024,
+ attachmentsIncluded: false,
+ },
+ {
+ numberOfMessages: -1,
+ maxSize: 4096 * 1024 * 1024,
+ attachmentsIncluded: false,
+ },
+ {
+ numberOfMessages: 0,
+ maxSize: 0,
+ attachmentsIncluded: false,
+ },
+ ];
const events = mkEvents();
const room = createRoom();
@@ -88,7 +88,14 @@ describe('export', function() {
});
it('checks if the export options are valid', function() {
- // const html = new PlainTextExporter(room, ExportTypes.BEGINNING, invalidExportOptions[0], null);
+ for (const exportOption of invalidExportOptions) {
+ try {
+ new PlainTextExporter(room, ExportTypes.BEGINNING, exportOption, null);
+ throw new Error("Expected to throw an error");
+ } catch (e) {
+ expect(e.message).toBe("Invalid export options");
+ }
+ }
});
});
From e29d9db2e753dadd2729d9227d764416d5dc15fc Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 4 Aug 2021 12:37:13 +0530
Subject: [PATCH 149/176] Fetch exportCSS during export
---
src/utils/exportUtils/HtmlExport.tsx | 76 +-
src/utils/exportUtils/PlainTextExport.ts | 2 +-
src/utils/exportUtils/exportCSS.ts | 25530 +--------------------
3 files changed, 160 insertions(+), 25448 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index c27f5b7d12..54e21fdf14 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -30,12 +30,12 @@ import * as Avatar from "../../Avatar";
import EventTile, { haveTileForEvent } from "../../components/views/rooms/EventTile";
import DateSeparator from "../../components/views/messages/DateSeparator";
import BaseAvatar from "../../components/views/avatars/BaseAvatar";
-import exportCSS from "./exportCSS";
import exportJS from "!!raw-loader!./exportJS";
import exportIcons from "./exportIcons";
import { ExportTypes } from "./exportUtils";
import { IExportOptions } from "./exportUtils";
import MatrixClientContext from "../../contexts/MatrixClientContext";
+import getExportCSS from "./exportCSS";
export default class HTMLExporter extends Exporter {
protected avatars: Map<string, boolean>;
@@ -253,38 +253,40 @@ export default class HTMLExporter extends Exporter {
return wantsDateSeparator(prevEvent.getDate(), event.getDate());
}
- protected async getEventTile(mxEv: MatrixEvent, continuation: boolean, filePath?: string) {
+ public getEventTile(mxEv: MatrixEvent, continuation: boolean) {
+ return <div className="mx_Export_EventWrapper" id={mxEv.getId()}>
+ <MatrixClientContext.Provider value={this.client}>
+ <EventTile
+ mxEvent={mxEv}
+ continuation={continuation}
+ isRedacted={mxEv.isRedacted()}
+ replacingEventId={mxEv.replacingEventId()}
+ forExport={true}
+ readReceipts={null}
+ readReceiptMap={null}
+ showUrlPreview={false}
+ checkUnmounting={() => false}
+ isTwelveHour={false}
+ last={false}
+ lastInSection={false}
+ permalinkCreator={this.permalinkCreator}
+ lastSuccessful={false}
+ isSelectedEvent={false}
+ getRelationsForEvent={null}
+ showReactions={false}
+ layout={Layout.Group}
+ enableFlair={false}
+ showReadReceipts={false}
+ />
+ </MatrixClientContext.Provider>
+ </div>;
+ }
+
+ protected async getEventTileMarkup(mxEv: MatrixEvent, continuation: boolean, filePath?: string) {
const hasAvatar = !!this.getAvatarURL(mxEv);
if (hasAvatar) await this.saveAvatarIfNeeded(mxEv);
- const eventTile = (
- <div className="mx_Export_EventWrapper" id={mxEv.getId()}>
- <MatrixClientContext.Provider value={this.client}>
- <EventTile
- mxEvent={mxEv}
- continuation={continuation}
- isRedacted={mxEv.isRedacted()}
- replacingEventId={mxEv.replacingEventId()}
- forExport={true}
- readReceipts={null}
- readReceiptMap={null}
- showUrlPreview={false}
- checkUnmounting={() => false}
- isTwelveHour={false}
- last={false}
- lastInSection={false}
- permalinkCreator={this.permalinkCreator}
- lastSuccessful={false}
- isSelectedEvent={false}
- getRelationsForEvent={null}
- showReactions={false}
- layout={Layout.Group}
- enableFlair={false}
- showReadReceipts={false}
- />
- </MatrixClientContext.Provider>
- </div>
- );
+ const eventTile = this.getEventTile(mxEv, continuation);
let eventTileMarkup = renderToStaticMarkup(eventTile);
if (filePath) {
@@ -323,14 +325,14 @@ export default class HTMLExporter extends Exporter {
try {
const blob = await this.getMediaBlob(mxEv);
if (this.totalSize + blob.size > this.exportOptions.maxSize) {
- eventTile = await this.getEventTile(
+ eventTile = await this.getEventTileMarkup(
this.createModifiedEvent(this.mediaOmitText, mxEv),
joined,
);
} else {
this.totalSize += blob.size;
const filePath = this.getFilePath(mxEv);
- eventTile = await this.getEventTile(mxEv, joined, filePath);
+ eventTile = await this.getEventTileMarkup(mxEv, joined, filePath);
if (this.totalSize == this.exportOptions.maxSize) {
this.exportOptions.attachmentsIncluded = false;
}
@@ -338,19 +340,19 @@ export default class HTMLExporter extends Exporter {
}
} catch (e) {
console.log("Error while fetching file" + e);
- eventTile = await this.getEventTile(
+ eventTile = await this.getEventTileMarkup(
this.createModifiedEvent(_t("Error fetching file"), mxEv),
joined,
);
}
} else {
- eventTile = await this.getEventTile(this.createModifiedEvent(this.mediaOmitText, mxEv), joined);
+ eventTile = await this.getEventTileMarkup(this.createModifiedEvent(this.mediaOmitText, mxEv), joined);
}
- } else eventTile = await this.getEventTile(mxEv, joined);
+ } else eventTile = await this.getEventTileMarkup(mxEv, joined);
} catch (e) {
// TODO: Handle callEvent errors
console.error(e);
- eventTile = await this.getEventTile(this.createModifiedEvent("Error parsing HTML", mxEv), joined);
+ eventTile = await this.getEventTileMarkup(this.createModifiedEvent("Error parsing HTML", mxEv), joined);
}
return eventTile;
@@ -388,7 +390,7 @@ export default class HTMLExporter extends Exporter {
this.updateProgress("Creating HTML...");
const html = await this.createHTML(res);
-
+ const exportCSS = await getExportCSS();
this.addFile("index.html", new Blob([html]));
this.addFile("css/style.css", new Blob([exportCSS]));
this.addFile("js/script.js", new Blob([exportJS]));
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 1c946bb048..7ab4748848 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -42,7 +42,7 @@ export default class PlainTextExporter extends Exporter {
: _t("Media omitted - file size limit exceeded");
}
- protected textForReplyEvent = (ev: MatrixEvent) => {
+ public textForReplyEvent = (ev: MatrixEvent) => {
const REPLY_REGEX = /> <(.*?)>(.*?)\n\n(.*)/;
const REPLY_SOURCE_MAX_LENGTH = 32;
const content = ev.getContent();
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index 36dcea76bb..7079967d93 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -13,25435 +13,145 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
-/* eslint-disable max-len */
-const lightCSS = `@charset "utf-8";
-.hljs-addition {
- background: #dfd;
-}
-
-.hljs-deletion {
- background: #fdd;
-}
-
-@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
- .mx_LeftPanel {
- background-image: unset;
- background-image: var(--avatar-url, unset);
- background-repeat: no-repeat;
- background-size: cover;
- background-position: 0 0;
- }
- .mx_GroupFilterPanel,
- .mx_SpacePanel {
- -webkit-backdrop-filter: blur(20px);
- backdrop-filter: blur(20px);
- }
- .mx_LeftPanel .mx_LeftPanel_roomListContainer {
- -webkit-backdrop-filter: blur(40px);
- backdrop-filter: blur(40px);
- }
-}
-
-.mx_RoomSublist_showNButton {
- background-color: transparent !important;
-}
-
-a:hover,
-a:link,
-a:visited {
- text-decoration: none;
-}
-
-:root {
- font-size: 10px;
- --transition-short: 0.1s;
- --transition-standard: 0.3s;
-}
-
-@media (prefers-reduced-motion) {
- :root {
- --transition-short: 0;
- --transition-standard: 0;
- }
-}
-
-html {
- height: 100%;
- overflow: hidden;
- -ms-scroll-chaining: none;
- overscroll-behavior: none;
-}
-
-body {
- font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
- Helvetica, Sans-Serif, Noto Color Emoji;
- font-size: 1.5rem;
- background-color: #fff;
- color: #2e2f32;
- border: 0;
- margin: 0;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-code,
-pre {
- font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
- monospace;
- font-size: 100% !important;
-}
-
-.error,
-.text-error,
-.text-warning,
-.warning {
- color: #ff4b55;
-}
-
-.text-success {
- color: #0dbd8b;
-}
-
-.text-muted {
- color: #61708b;
-}
-
-b {
- font-weight: 700;
-}
-
-h2 {
- color: #2e2f32;
- font-weight: 400;
- font-size: 1.8rem;
- margin-top: 16px;
- margin-bottom: 16px;
-}
-
-a:hover,
-a:link,
-a:visited {
- color: #238cf5;
-}
-
-input[type="password"],
-input[type="search"],
-input[type="text"] {
- padding: 9px;
- font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
- Helvetica, Sans-Serif, Noto Color Emoji;
- font-size: 1.4rem;
- font-weight: 600;
- min-width: 0;
-}
-
-input[type="search"].mx_textinput_icon,
-input[type="text"].mx_textinput_icon {
- padding-left: 36px;
- background-repeat: no-repeat;
- background-position: 10px;
-}
-
-input[type="search"].mx_textinput_icon.mx_textinput_search,
-input[type="text"].mx_textinput_icon.mx_textinput_search {
- background-image: url(../../img/feather-customised/search-input.044bfa7.svg);
-}
-
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration {
- display: none;
-}
-
-input::-webkit-input-placeholder,
-textarea::-webkit-input-placeholder {
- opacity: 1;
-}
-
-input::-moz-placeholder,
-textarea::-moz-placeholder {
- opacity: 1;
-}
-
-input:-ms-input-placeholder,
-textarea:-ms-input-placeholder {
- opacity: 1;
-}
-
-input::-ms-input-placeholder,
-textarea::-ms-input-placeholder {
- opacity: 1;
-}
-
-input::placeholder,
-textarea::placeholder {
- opacity: 1;
-}
-
-input[type="password"],
-input[type="text"],
-textarea {
- background-color: transparent;
- color: #2e2f32;
-}
-
-textarea {
- font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
- Helvetica, Sans-Serif, Noto Color Emoji;
- color: #2e2f32;
-}
-
-input[type="password"]:focus,
-input[type="text"]:focus,
-textarea:focus {
- outline: none;
- -webkit-box-shadow: none;
- box-shadow: none;
-}
-
-:focus:not(.focus-visible) {
- outline: none;
-}
-
-.mx_Dialog .mx_textinput > input[type="search"],
-.mx_Dialog .mx_textinput > input[type="text"],
-.mx_MatrixChat .mx_textinput > input[type="search"],
-.mx_MatrixChat .mx_textinput > input[type="text"] {
- border: none;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- color: #2e2f32;
-}
-
-.mx_Dialog .mx_textinput,
-.mx_Dialog
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="search"],
-.mx_Dialog
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="text"],
-.mx_MatrixChat .mx_textinput,
-.mx_MatrixChat
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="search"],
-.mx_MatrixChat
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="text"] {
- display: block;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- background-color: transparent;
- color: #9fa9ba;
- border-radius: 4px;
- border: 1px solid rgba(46, 47, 50, 0.1);
- margin: 9px;
-}
-
-.mx_Dialog .mx_textinput,
-.mx_MatrixChat .mx_textinput {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_Dialog .mx_textinput input::-webkit-input-placeholder,
-.mx_Dialog
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="search"]::-webkit-input-placeholder,
-.mx_Dialog
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="text"]::-webkit-input-placeholder,
-.mx_MatrixChat .mx_textinput input::-webkit-input-placeholder,
-.mx_MatrixChat
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="search"]::-webkit-input-placeholder,
-.mx_MatrixChat
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="text"]::-webkit-input-placeholder {
- color: rgba(159, 169, 186, 0.75);
-}
-
-.mx_Dialog .mx_textinput input::-moz-placeholder,
-.mx_Dialog
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="search"]::-moz-placeholder,
-.mx_Dialog
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="text"]::-moz-placeholder,
-.mx_MatrixChat .mx_textinput input::-moz-placeholder,
-.mx_MatrixChat
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="search"]::-moz-placeholder,
-.mx_MatrixChat
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="text"]::-moz-placeholder {
- color: rgba(159, 169, 186, 0.75);
-}
-
-.mx_Dialog .mx_textinput input:-ms-input-placeholder,
-.mx_Dialog
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="search"]:-ms-input-placeholder,
-.mx_Dialog
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="text"]:-ms-input-placeholder,
-.mx_MatrixChat .mx_textinput input:-ms-input-placeholder,
-.mx_MatrixChat
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="search"]:-ms-input-placeholder,
-.mx_MatrixChat
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="text"]:-ms-input-placeholder {
- color: rgba(159, 169, 186, 0.75);
-}
-
-.mx_Dialog .mx_textinput input::-ms-input-placeholder,
-.mx_Dialog
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="search"]::-ms-input-placeholder,
-.mx_Dialog
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="text"]::-ms-input-placeholder,
-.mx_MatrixChat .mx_textinput input::-ms-input-placeholder,
-.mx_MatrixChat
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="search"]::-ms-input-placeholder,
-.mx_MatrixChat
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="text"]::-ms-input-placeholder {
- color: rgba(159, 169, 186, 0.75);
-}
-
-.mx_Dialog .mx_textinput input::placeholder,
-.mx_Dialog
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="search"]::placeholder,
-.mx_Dialog
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="text"]::placeholder,
-.mx_MatrixChat .mx_textinput input::placeholder,
-.mx_MatrixChat
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="search"]::placeholder,
-.mx_MatrixChat
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="text"]::placeholder {
- color: rgba(159, 169, 186, 0.75);
-}
-
-.dark-panel {
- background-color: #f2f5f8;
-}
-
-.dark-panel .mx_textinput,
-.dark-panel
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="search"],
-.dark-panel
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="text"] {
- color: #9fa9ba;
- background-color: #fff;
- border: none;
-}
-
-.light-panel .mx_textinput,
-.light-panel
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="search"],
-.light-panel
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="text"] {
- color: #9fa9ba;
- background-color: #f2f5f8;
- border: none;
-}
-
-::-moz-focus-inner {
- border: 0;
-}
-
-#mx_theme_accentColor {
- color: #0dbd8b;
-}
-
-#mx_theme_secondaryAccentColor {
- color: #f2f5f8;
-}
-
-#mx_theme_tertiaryAccentColor {
- color: #d3efe1;
-}
-
-.mx_Dialog_wrapper {
- position: fixed;
- z-index: 4000;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_Dialog {
- background-color: #fff;
- color: #747474;
- z-index: 4012;
- font-weight: 300;
- font-size: 1.5rem;
- position: relative;
- padding: 24px;
- max-height: 80%;
- -webkit-box-shadow: 2px 15px 30px 0 rgba(0, 0, 0, 0.48);
- box-shadow: 2px 15px 30px 0 rgba(0, 0, 0, 0.48);
- border-radius: 8px;
- overflow-y: auto;
-}
-
-.mx_Dialog_fixedWidth {
- width: 60vw;
- max-width: 704px;
-}
-
-.mx_Dialog_staticWrapper .mx_Dialog {
- z-index: 4010;
- contain: content;
-}
-
-.mx_Dialog_background {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(46, 48, 51, 0.38);
- opacity: 0.8;
- z-index: 4011;
-}
-
-.mx_Dialog_background.mx_Dialog_staticBackground {
- z-index: 4009;
-}
-
-.mx_Dialog_wrapperWithStaticUnder .mx_Dialog_background {
- opacity: 0.4;
-}
-
-.mx_Dialog_lightbox .mx_Dialog_background {
- opacity: 0.95;
- background-color: #000;
-}
-
-.mx_Dialog_lightbox .mx_Dialog {
- border-radius: 0;
- background-color: transparent;
- width: 100%;
- height: 100%;
- max-width: 100%;
- max-height: 100%;
- pointer-events: none;
- padding: 0;
-}
-
-.mx_Dialog_header {
- position: relative;
- margin-bottom: 10px;
-}
-
-.mx_Dialog_titleImage {
- vertical-align: sub;
- width: 25px;
- height: 25px;
- margin-left: -2px;
- margin-right: 4px;
-}
-
-.mx_Dialog_title {
- font-size: 2.2rem;
- font-weight: 600;
- line-height: 3.6rem;
- color: #45474a;
-}
-
-.mx_Dialog_header.mx_Dialog_headerWithButton > .mx_Dialog_title {
- text-align: center;
-}
-
-.mx_Dialog_header.mx_Dialog_headerWithCancel > .mx_Dialog_title {
- margin-right: 20px;
-}
-
-.mx_Dialog_title.danger {
- color: #ff4b55;
-}
-
-.mx_Dialog_cancelButton {
- -webkit-mask: url(../../img/feather-customised/cancel.23c2689.svg);
- mask: url(../../img/feather-customised/cancel.23c2689.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: cover;
- mask-size: cover;
- width: 14px;
- height: 14px;
- background-color: #c1c1c1;
- cursor: pointer;
- position: absolute;
- top: 10px;
- right: 0;
-}
-
-.mx_Dialog_content {
- margin: 24px 0 68px;
- font-size: 1.4rem;
- color: #2e2f32;
- word-wrap: break-word;
-}
-
-.mx_Dialog_buttons {
- margin-top: 20px;
- text-align: right;
-}
-
-.mx_Dialog_buttons .mx_Dialog_buttons_additive {
- float: left;
-}
-
-.mx_Dialog_buttons button,
-.mx_Dialog_buttons input[type="submit"],
-.mx_Dialog button,
-.mx_Dialog input[type="submit"] {
- vertical-align: middle;
- border-radius: 8px;
- font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
- Helvetica, Sans-Serif, Noto Color Emoji;
- font-size: 1.4rem;
- color: #fff;
- background-color: #0dbd8b;
- width: auto;
- padding: 7px 1.5em;
- cursor: pointer;
- display: inline-block;
- outline: none;
- margin-left: 0;
- margin-right: 8px;
- font-weight: 600;
- border: 1px solid #0dbd8b;
- color: #0dbd8b;
- background-color: #fff;
- font-family: inherit;
-}
-
-.mx_Dialog button:last-child {
- margin-right: 0;
-}
-
-.mx_Dialog_buttons button:focus,
-.mx_Dialog_buttons input[type="submit"]:focus,
-.mx_Dialog button:focus,
-.mx_Dialog input[type="submit"]:focus {
- -webkit-filter: brightness(105%);
- filter: brightness(105%);
-}
-
-.mx_Dialog_buttons button.mx_Dialog_primary,
-.mx_Dialog_buttons input[type="submit"].mx_Dialog_primary,
-.mx_Dialog button.mx_Dialog_primary,
-.mx_Dialog input[type="submit"].mx_Dialog_primary {
- color: #fff;
- background-color: #0dbd8b;
- min-width: 156px;
-}
-
-.mx_Dialog_buttons button.danger,
-.mx_Dialog_buttons input[type="submit"].danger,
-.mx_Dialog button.danger,
-.mx_Dialog input[type="submit"].danger {
- background-color: #ff4b55;
- border: 1px solid #ff4b55;
- color: #fff;
-}
-
-.mx_Dialog button.warning,
-.mx_Dialog input[type="submit"].warning {
- border: 1px solid #ff4b55;
- color: #ff4b55;
-}
-
-.mx_Dialog_buttons button:disabled,
-.mx_Dialog_buttons input[type="submit"]:disabled,
-.mx_Dialog button:disabled,
-.mx_Dialog input[type="submit"]:disabled {
- background-color: #747474;
- border: 1px solid #747474;
- opacity: 0.7;
-}
-
-.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog {
- width: auto;
- border-radius: 8px;
- padding: 0;
- -webkit-box-shadow: none;
- box-shadow: none;
- overflow-x: hidden;
- overflow-y: hidden;
-}
-
-.mx_GeneralButton {
- vertical-align: middle;
- border: 0;
- border-radius: 8px;
- font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
- Helvetica, Sans-Serif, Noto Color Emoji;
- font-size: 1.4rem;
- color: #fff;
- background-color: #0dbd8b;
- width: auto;
- padding: 7px 1.5em;
- cursor: pointer;
- display: inline-block;
- outline: none;
- display: inline;
- margin: auto;
-}
-
-.mx_linkButton {
- cursor: pointer;
- color: #0dbd8b;
-}
-
-.mx_TextInputDialog_label {
- text-align: left;
- padding-bottom: 12px;
-}
-
-.mx_TextInputDialog_input {
- font-size: 1.5rem;
- border-radius: 3px;
- border: 1px solid #e7e7e7;
- padding: 9px;
- color: #2e2f32;
- background-color: #fff;
-}
-
-.mx_textButton {
- vertical-align: middle;
- border: 0;
- border-radius: 8px;
- font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
- Helvetica, Sans-Serif, Noto Color Emoji;
- font-size: 1.4rem;
- color: #fff;
- background-color: #0dbd8b;
- width: auto;
- cursor: pointer;
- display: inline-block;
- outline: none;
- font-size: 1.5rem;
- padding: 0 1.5em;
-}
-
-.mx_button_row {
- margin-top: 69px;
-}
-
-.mx_Username_color1 {
- color: #368bd6;
-}
-
-.mx_Username_color2 {
- color: #ac3ba8;
-}
-
-.mx_Username_color3 {
- color: #0dbd8b;
-}
-
-.mx_Username_color4 {
- color: #e64f7a;
-}
-
-.mx_Username_color5 {
- color: #ff812d;
-}
-
-.mx_Username_color6 {
- color: #2dc2c5;
-}
-
-.mx_Username_color7 {
- color: #5c56f5;
-}
-
-.mx_Username_color8 {
- color: #74d12c;
-}
-
-.mx_Tooltip_dark .mx_Tooltip_chevron:after {
- border-right-color: #27303a;
-}
-
-html {
- scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
-}
-
-* {
- scrollbar-width: thin;
-}
-
-::-webkit-scrollbar {
- width: 6px;
- height: 6px;
- background-color: transparent;
-}
-
-::-webkit-scrollbar-thumb {
- border-radius: 3px;
- background-color: rgba(0, 0, 0, 0.2);
-}
-
-.mx_AutoHideScrollbar:hover {
- scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
-}
-
-.mx_AutoHideScrollbar:hover::-webkit-scrollbar {
- background-color: transparent;
-}
-
-.mx_AutoHideScrollbar:hover::-webkit-scrollbar-thumb {
- background-color: rgba(0, 0, 0, 0.2);
-}
-
-.mx_AutoHideScrollbar {
- overflow-x: hidden;
- overflow-y: auto;
- overflow-y: overlay;
- -ms-overflow-style: -ms-autohiding-scrollbar;
-}
-
-.mx_AutoHideScrollbar::-webkit-scrollbar,
-.mx_AutoHideScrollbar::-webkit-scrollbar-thumb {
- background-color: transparent;
-}
-
-.mx_AutoHideScrollbar {
- scrollbar-color: transparent transparent;
-}
-
-.mx_CompatibilityPage {
- width: 100%;
- height: 100%;
- background-color: #e55;
-}
-
-.mx_CompatibilityPage_box {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- margin: auto;
- width: 500px;
- height: 300px;
- border: 1px solid;
- padding: 10px;
- background-color: #fcc;
-}
-
-.mx_ContextualMenu_wrapper {
- position: fixed;
- z-index: 5000;
-}
-
-.mx_ContextualMenu_background {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- opacity: 1;
- z-index: 5000;
-}
-
-.mx_ContextualMenu {
- border-radius: 8px;
- -webkit-box-shadow: 4px 4px 12px 0 rgba(118, 131, 156, 0.6);
- box-shadow: 4px 4px 12px 0 rgba(118, 131, 156, 0.6);
- background-color: #fff;
- color: #2e2f32;
- position: absolute;
- font-size: 1.4rem;
- z-index: 5001;
- contain: content;
-}
-
-.mx_ContextualMenu_right {
- right: 0;
-}
-
-.mx_ContextualMenu.mx_ContextualMenu_withChevron_right {
- right: 8px;
-}
-
-.mx_ContextualMenu_chevron_right {
- position: absolute;
- right: -8px;
- top: 0;
- width: 0;
- height: 0;
- border-top: 8px solid transparent;
- border-left: 8px solid #fff;
- border-bottom: 8px solid transparent;
-}
-
-.mx_ContextualMenu_left {
- left: 0;
-}
-
-.mx_ContextualMenu.mx_ContextualMenu_withChevron_left {
- left: 8px;
-}
-
-.mx_ContextualMenu_chevron_left {
- position: absolute;
- left: -8px;
- top: 0;
- width: 0;
- height: 0;
- border-top: 8px solid transparent;
- border-right: 8px solid #fff;
- border-bottom: 8px solid transparent;
-}
-
-.mx_ContextualMenu_top {
- top: 0;
-}
-
-.mx_ContextualMenu.mx_ContextualMenu_withChevron_top {
- top: 8px;
-}
-
-.mx_ContextualMenu_chevron_top {
- position: absolute;
- left: 0;
- top: -8px;
- width: 0;
- height: 0;
- border-left: 8px solid transparent;
- border-bottom: 8px solid #fff;
- border-right: 8px solid transparent;
-}
-
-.mx_ContextualMenu_bottom {
- bottom: 0;
-}
-
-.mx_ContextualMenu.mx_ContextualMenu_withChevron_bottom {
- bottom: 8px;
-}
-
-.mx_ContextualMenu_chevron_bottom {
- position: absolute;
- left: 0;
- bottom: -8px;
- width: 0;
- height: 0;
- border-left: 8px solid transparent;
- border-top: 8px solid #fff;
- border-right: 8px solid transparent;
-}
-
-.mx_CreateRoom {
- width: 960px;
- margin-left: auto;
- margin-right: auto;
- color: #2e2f32;
-}
-
-.mx_CreateRoom input,
-.mx_CreateRoom textarea {
- border-radius: 3px;
- border: 1px solid #c7c7c7;
- font-weight: 300;
- font-size: 1.3rem;
- padding: 9px;
- margin-top: 6px;
-}
-
-.mx_CreateRoom_description {
- width: 330px;
-}
-
-.mx_CustomRoomTagPanel {
- background-color: hsla(0, 0%, 91%, 0.77);
- max-height: 40vh;
-}
-
-.mx_CustomRoomTagPanel_scroller {
- max-height: inherit;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_CustomRoomTagPanel .mx_AccessibleButton {
- margin: 0 auto;
- width: 40px;
- padding: 10px 0 9px;
- position: relative;
-}
-
-.mx_CustomRoomTagPanel .mx_BaseAvatar_image {
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- width: 40px;
- height: 40px;
-}
-
-.mx_CustomRoomTagPanel
- .mx_AccessibleButton.CustomRoomTagPanel_tileSelected:before {
- content: "";
- height: 56px;
- background-color: #238cf5;
- width: 5px;
- position: absolute;
- left: -9px;
- border-radius: 0 3px 3px 0;
- top: 5px;
-}
-
-.mx_FilePanel {
- -webkit-box-ordinal-group: 3;
- -ms-flex-order: 2;
- order: 2;
- -webkit-box-flex: 1;
- -ms-flex: 1 1 0px;
- flex: 1 1 0;
- overflow-y: auto;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_FilePanel .mx_RoomView_messageListWrapper {
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_FilePanel .mx_RoomView_MessageList {
- width: 100%;
-}
-
-.mx_FilePanel .mx_EventTile_avatar,
-.mx_FilePanel .mx_RoomView_MessageList h2 {
- display: none;
-}
-
-.mx_FilePanel .mx_EventTile:not([data-layout="bubble"]) {
- word-break: break-word;
- margin-top: 10px;
- padding-top: 0;
-}
-
-.mx_FilePanel .mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_line {
- padding-left: 0;
-}
-
-.mx_FilePanel .mx_EventTile .mx_MImageBody {
- margin-right: 0;
-}
-
-.mx_FilePanel .mx_EventTile .mx_MFileBody {
- line-height: 2.4rem;
-}
-
-.mx_FilePanel .mx_EventTile .mx_MFileBody_download {
- padding-top: 8px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- font-size: 1.4rem;
- color: #acacac;
-}
-
-.mx_FilePanel .mx_EventTile .mx_MFileBody_downloadLink {
- -webkit-box-flex: 1;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
- color: #747474;
-}
-
-.mx_FilePanel .mx_EventTile .mx_MImageBody_size {
- -webkit-box-flex: 1;
- -ms-flex: 1 0 0px;
- flex: 1 0 0;
- font-size: 1.4rem;
- text-align: right;
- white-space: nowrap;
-}
-
-.mx_FilePanel .mx_EventTile_senderDetails {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- margin-top: -2px;
-}
-
-.mx_FilePanel .mx_EventTile_senderDetailsLink {
- text-decoration: none;
-}
-
-.mx_FilePanel .mx_EventTile .mx_SenderProfile {
- -webkit-box-flex: 1;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
- line-height: normal;
- padding: 0;
- font-size: 1.4rem;
- opacity: 1;
- color: #acacac;
-}
-
-.mx_FilePanel .mx_EventTile .mx_MessageTimestamp {
- -webkit-box-flex: 1;
- -ms-flex: 1 0 0px;
- flex: 1 0 0;
- text-align: right;
- visibility: visible;
- position: static;
- font-size: 1.4rem;
- opacity: 1;
- color: #acacac;
-}
-
-.mx_FilePanel .mx_EventTile_line {
- margin-right: 0;
- padding-left: 0;
-}
-
-.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line {
- padding-left: 0;
-}
-
-.mx_FilePanel_empty:before {
- -webkit-mask-image: url(../../img/element-icons/room/files.5709c0c.svg);
- mask-image: url(../../img/element-icons/room/files.5709c0c.svg);
-}
-
-.mx_GenericErrorPage {
- width: 100%;
- height: 100%;
- background-color: #fff;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_GenericErrorPage_box {
- display: inline;
- width: 500px;
- min-height: 125px;
- border: 1px solid #f22;
- padding: 10px 10px 20px;
- background-color: #fcc;
-}
-
-.mx_GroupFilterPanel {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background-color: hsla(0, 0%, 91%, 0.77);
- cursor: pointer;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
- min-height: 0;
-}
-
-.mx_GroupFilterPanel_items_selected {
- cursor: pointer;
-}
-
-.mx_GroupFilterPanel .mx_GroupFilterPanel_divider {
- height: 0;
- width: 90%;
- border: none;
- border-bottom: 1px solid #8d99a5;
-}
-
-.mx_GroupFilterPanel .mx_GroupFilterPanel_scroller {
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- width: 100%;
-}
-
-.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding-top: 6px;
-}
-
-.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer > div {
- margin: 6px 0;
-}
-
-.mx_GroupFilterPanel .mx_TagTile {
- position: relative;
-}
-
-.mx_GroupFilterPanel .mx_TagTile .mx_BetaDot {
- position: absolute;
- right: -13px;
- top: -11px;
-}
-
-.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_prototype {
- padding: 3px;
-}
-
-.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected_prototype {
- background-color: #fff;
- border-radius: 6px;
-}
-
-.mx_TagTile_selected_prototype .mx_TagTile_homeIcon:before {
- background-color: #2e2f32;
-}
-
-.mx_TagTile:not(.mx_TagTile_selected_prototype) .mx_TagTile_homeIcon {
- background-color: rgba(92, 100, 112, 0.2);
- border-radius: 48px;
-}
-
-.mx_TagTile:not(.mx_TagTile_selected_prototype) .mx_TagTile_homeIcon:before {
- background-color: #5c6470;
-}
-
-.mx_TagTile_homeIcon {
- width: 32px;
- height: 32px;
- position: relative;
-}
-
-.mx_TagTile_homeIcon:before {
- -webkit-mask-image: url(../../img/element-icons/home.b706c0e.svg);
- mask-image: url(../../img/element-icons/home.b706c0e.svg);
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 21px;
- mask-size: 21px;
- content: "";
- display: inline-block;
- width: 32px;
- height: 32px;
- position: absolute;
- top: calc(50% - 16px);
- left: calc(50% - 16px);
-}
-
-.mx_GroupFilterPanel .mx_TagTile_plus {
- margin-bottom: 12px;
- height: 32px;
- width: 32px;
- border-radius: 20px;
- background-color: rgba(92, 100, 112, 0.2);
- position: relative;
- display: block !important;
-}
-
-.mx_GroupFilterPanel .mx_TagTile_plus:before {
- background-color: #5c6470;
- -webkit-mask-image: url(../../img/feather-customised/plus.38ae979.svg);
- mask-image: url(../../img/feather-customised/plus.38ae979.svg);
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- content: "";
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
-}
-
-.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected:before {
- content: "";
- height: 100%;
- background-color: #0dbd8b;
- width: 4px;
- position: absolute;
- left: -12px;
- border-radius: 0 3px 3px 0;
-}
-
-.mx_GroupFilterPanel .mx_TagTile.mx_AccessibleButton:focus {
- -webkit-filter: none;
- filter: none;
-}
-
-.mx_TagTile_tooltip {
- position: relative;
- top: -30px;
- left: 5px;
-}
-
-.mx_TagTile_context_button {
- min-width: 15px;
- height: 15px;
- position: absolute;
- right: -5px;
- top: -8px;
- border-radius: 8px;
- background-color: #dbdbdb;
- color: #000;
- font-weight: 600;
- font-size: 1rem;
- text-align: center;
- padding-top: 1px;
- padding-left: 4px;
- padding-right: 4px;
-}
-
-.mx_TagTile_avatar {
- position: relative;
-}
-
-.mx_TagTile_badge {
- position: absolute;
- right: -4px;
- top: -2px;
- border-radius: 8px;
- color: #fff;
- font-weight: 600;
- font-size: 1.4rem;
- padding: 0 5px;
- background-color: #61708b;
-}
-
-.mx_TagTile_badgeHighlight {
- background-color: #ff4b55;
-}
-
-.mx_GroupView {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- overflow: hidden;
-}
-
-.mx_GroupView_error {
- margin: auto;
-}
-
-.mx_GroupView_header {
- min-height: 52px;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- padding-bottom: 10px;
- padding-left: 19px;
-}
-
-.mx_GroupView_header_view {
- border-bottom: 1px solid transparent;
- padding-bottom: 0;
- padding-right: 8px;
-}
-
-.mx_GroupView_header_avatar,
-.mx_GroupView_header_info {
- display: table-cell;
- vertical-align: middle;
-}
-
-.mx_GroupHeader_button {
- position: relative;
- margin-left: 5px;
- margin-right: 5px;
- cursor: pointer;
- height: 20px;
- width: 20px;
-}
-
-.mx_GroupHeader_button:before {
- content: "";
- position: absolute;
- height: 20px;
- width: 20px;
- background-color: #91a1c0;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
-}
-
-.mx_GroupHeader_editButton:before {
- -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
- mask-image: url(../../img/element-icons/settings.6b381af.svg);
-}
-
-.mx_GroupHeader_shareButton:before {
- -webkit-mask-image: url(../../img/element-icons/room/share.54dc3fb.svg);
- mask-image: url(../../img/element-icons/room/share.54dc3fb.svg);
-}
-
-.mx_GroupView_hostingSignup img {
- margin-left: 5px;
-}
-
-.mx_GroupView_editable {
- border-bottom: 1px solid #c7c7c7 !important;
- min-width: 150px;
- cursor: text;
-}
-
-.mx_GroupView_editable:focus {
- border-bottom: 1px solid #0dbd8b !important;
- outline: none;
- -webkit-box-shadow: none;
- box-shadow: none;
-}
-
-.mx_GroupView_header_isUserMember
- .mx_GroupView_header_name:hover
- div:not(.mx_GroupView_editable) {
- color: #0dbd8b;
- cursor: pointer;
-}
-
-.mx_GroupView_avatarPicker {
- position: relative;
-}
-
-.mx_GroupView_avatarPicker_edit {
- position: absolute;
- top: 50px;
- left: 15px;
-}
-
-.mx_GroupView_avatarPicker .mx_Spinner {
- width: 48px;
- height: 48px !important;
-}
-
-.mx_GroupView_header_leftCol {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- overflow: hidden;
-}
-
-.mx_GroupView_header_rightCol {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_GroupView_textButton {
- display: inline-block;
-}
-
-.mx_GroupView_header_groupid {
- font-weight: 400;
- font-size: medium;
- padding-left: 10px;
-}
-
-.mx_GroupView_header_name {
- vertical-align: middle;
- width: 100%;
- height: 31px;
- color: #2e2f32;
- font-weight: 700;
- font-size: 2.2rem;
- padding-right: 16px;
-}
-
-.mx_GroupView_header_name,
-.mx_GroupView_header_shortDesc {
- overflow: hidden;
- padding-left: 19px;
- text-overflow: ellipsis;
- border-bottom: 1px solid transparent;
-}
-
-.mx_GroupView_header_shortDesc {
- vertical-align: bottom;
- float: left;
- max-height: 42px;
- color: #a2a2a2;
- font-weight: 300;
- font-size: 1.3rem;
- margin-right: 16px;
-}
-
-.mx_GroupView_avatarPicker_label {
- cursor: pointer;
-}
-
-.mx_GroupView_cancelButton {
- padding-left: 8px;
-}
-
-.mx_GroupView_cancelButton img {
- position: relative;
- top: 5px;
-}
-
-.mx_GroupView input[type="radio"] {
- margin: 10px 10px 0;
-}
-
-.mx_GroupView_label_text {
- display: inline-block;
- max-width: 80%;
- vertical-align: 0.1em;
- line-height: 2em;
-}
-
-.mx_GroupView_body {
- margin: 0 24px;
-}
-
-.mx_GroupView_body,
-.mx_GroupView_rooms {
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
-}
-
-.mx_GroupView_rooms {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- min-height: 200px;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.mx_GroupView h3 {
- text-transform: uppercase;
- color: #3d3b39;
- font-weight: 600;
- font-size: 1.3rem;
- margin-bottom: 10px;
-}
-
-.mx_GroupView_rooms_header .mx_AccessibleButton {
- padding-left: 14px;
- margin-bottom: 14px;
- height: 24px;
-}
-
-.mx_GroupView_group {
- border-top: 1px solid transparent;
-}
-
-.mx_GroupView_group_disabled {
- opacity: 0.3;
- pointer-events: none;
-}
-
-.mx_GroupView_rooms_header_addRow_button {
- display: inline-block;
-}
-
-.mx_GroupView_rooms_header_addRow_button object {
- pointer-events: none;
-}
-
-.mx_GroupView_rooms_header_addRow_label {
- display: inline-block;
- vertical-align: top;
- line-height: 2.4rem;
- padding-left: 28px;
- color: #0dbd8b;
-}
-
-.mx_GroupView_rooms .mx_RoomDetailList {
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- border-top: 1px solid transparent;
- padding-top: 10px;
- word-break: break-word;
-}
-
-.mx_GroupView .mx_RoomView_messageListWrapper {
- -webkit-box-pack: start;
- -ms-flex-pack: start;
- justify-content: flex-start;
-}
-
-.mx_GroupView_membershipSection {
- color: #888;
- margin-top: 10px;
-}
-
-.mx_GroupView_membershipSubSection {
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- padding-bottom: 8px;
-}
-
-.mx_GroupView_membershipSubSection .mx_Spinner {
- -webkit-box-pack: end;
- -ms-flex-pack: end;
- justify-content: flex-end;
-}
-
-.mx_GroupView_membershipSection_description {
- line-height: 3.4rem;
-}
-
-.mx_GroupView_membershipSection_description .mx_BaseAvatar {
- margin-right: 10px;
-}
-
-.mx_GroupView_membershipSection .mx_GroupView_textButton {
- margin-right: 0;
- margin-top: 0;
- margin-left: 8px;
-}
-
-.mx_GroupView_memberSettings_toggle label {
- cursor: pointer;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.mx_GroupView_memberSettings input {
- margin-right: 6px;
-}
-
-.mx_GroupView_featuredThings {
- margin-top: 20px;
-}
-
-.mx_GroupView_featuredThings_header {
- font-weight: 700;
- font-size: 120%;
- margin-bottom: 20px;
-}
-
-.mx_GroupView_featuredThings_category {
- font-weight: 700;
- font-size: 110%;
- margin-top: 10px;
-}
-
-.mx_GroupView_featuredThings_container {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_GroupView_featuredThing,
-.mx_GroupView_featuredThings_addButton {
- display: table-cell;
- text-align: center;
- width: 100px;
- margin: 0 20px;
-}
-
-.mx_GroupView_featuredThing {
- position: relative;
-}
-
-.mx_GroupView_featuredThing .mx_GroupView_featuredThing_deleteButton {
- position: absolute;
- top: -7px;
- right: 11px;
- opacity: 0.4;
-}
-
-.mx_GroupView_featuredThing .mx_BaseAvatar {
- vertical-align: baseline;
- vertical-align: initial;
-}
-
-.mx_GroupView_featuredThings_addButton object {
- pointer-events: none;
-}
-
-.mx_GroupView_featuredThing_name {
- word-wrap: break-word;
-}
-
-.mx_GroupView_uploadInput {
- display: none;
-}
-
-.mx_GroupView_body .mx_AutoHideScrollbar > * {
- margin: 11px 50px 50px 68px;
-}
-
-.mx_GroupView_groupDesc textarea {
- width: 100%;
- max-width: 100%;
- height: 150px;
-}
-
-.mx_GroupView_changeDelayWarning,
-.mx_GroupView_groupDesc_placeholder {
- background-color: #f7f7f7;
- color: #888;
- border-radius: 10px;
- text-align: center;
- margin: 20px 0;
-}
-
-.mx_GroupView_groupDesc_placeholder {
- padding: 100px 20px;
- cursor: pointer;
-}
-
-.mx_GroupView_changeDelayWarning {
- padding: 40px 20px;
-}
-
-.mx_GroupView
- .mx_MemberInfo
- .mx_AutoHideScrollbar
- > :not(.mx_MemberInfo_avatar) {
- padding-left: 16px;
- padding-right: 16px;
-}
-
-.mx_HeaderButtons {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_RoomHeader_buttons + .mx_HeaderButtons:before {
- content: unset;
-}
-
-.mx_HeaderButtons:before {
- content: "";
- background-color: #91a1c0;
- opacity: 0.5;
- margin: 6px 8px;
- border-radius: 1px;
- width: 1px;
-}
-
-.mx_HomePage {
- max-width: 960px;
- width: 100%;
- height: 100%;
- margin-left: auto;
- margin-right: auto;
-}
-
-.mx_HomePage_default {
- text-align: center;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_HomePage_default .mx_HomePage_default_wrapper {
- margin: auto;
-}
-
-.mx_HomePage_default img {
- height: 48px;
-}
-
-.mx_HomePage_default h1 {
- font-weight: 600;
- font-size: 3.2rem;
- line-height: 4.4rem;
- margin-bottom: 4px;
-}
-
-.mx_HomePage_default h4 {
- margin-top: 4px;
- font-weight: 600;
- font-size: 1.8rem;
- line-height: 2.5rem;
- color: #61708b;
-}
-
-.mx_HomePage_default .mx_MiniAvatarUploader {
- margin: 0 auto;
-}
-
-.mx_HomePage_default .mx_HomePage_default_buttons {
- margin: 60px auto 0;
- width: -webkit-fit-content;
- width: -moz-fit-content;
- width: fit-content;
-}
-
-.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton {
- padding: 73px 8px 15px;
- width: 160px;
- height: 132px;
- margin: 20px;
- position: relative;
- display: inline-block;
- border-radius: 8px;
- vertical-align: top;
- word-break: break-word;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- font-weight: 600;
- font-size: 1.5rem;
- line-height: 2rem;
- color: #fff;
- background-color: #0dbd8b;
-}
-
-.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton:before {
- top: 20px;
- left: 60px;
- width: 40px;
- height: 40px;
- content: "";
- position: absolute;
- background-color: #fff;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
-}
-
-.mx_HomePage_default
- .mx_HomePage_default_buttons
- .mx_AccessibleButton.mx_HomePage_button_sendDm:before {
- -webkit-mask-image: url(../../img/element-icons/feedback.a91241e.svg);
- mask-image: url(../../img/element-icons/feedback.a91241e.svg);
-}
-
-.mx_HomePage_default
- .mx_HomePage_default_buttons
- .mx_AccessibleButton.mx_HomePage_button_explore:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
- mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
-}
-
-.mx_HomePage_default
- .mx_HomePage_default_buttons
- .mx_AccessibleButton.mx_HomePage_button_createGroup:before {
- -webkit-mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
- mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
-}
-
-.mx_LeftPanel {
- background-color: hsla(0, 0%, 96.1%, 0.9);
- min-width: 206px;
- max-width: 50%;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- contain: content;
-}
-
-.mx_LeftPanel .mx_LeftPanel_GroupFilterPanelContainer {
- -webkit-box-flex: 0;
- -ms-flex-positive: 0;
- flex-grow: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- -ms-flex-preferred-size: 56px;
- flex-basis: 56px;
- height: 100%;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_LeftPanel .mx_LeftPanel_GroupFilterPanelContainer,
-.mx_LeftPanel .mx_LeftPanel_roomListContainer {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
-}
-
-.mx_LeftPanel .mx_LeftPanel_roomListContainer {
- background-color: hsla(0, 0%, 96.1%, 0.9);
- -webkit-box-flex: 1;
- -ms-flex: 1 0 0px;
- flex: 1 0 0;
- min-width: 0;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_userHeader {
- padding: 12px;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_LeftPanel
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_breadcrumbsContainer {
- overflow-y: hidden;
- overflow-x: scroll;
- margin: 12px 12px 0;
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- contain: content;
-}
-
-.mx_LeftPanel
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_leftOverflow {
- -webkit-mask-image: -webkit-gradient(
- linear,
- left top,
- right top,
- from(transparent),
- color-stop(5%, #000)
- );
- -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%);
- mask-image: -webkit-gradient(
- linear,
- left top,
- right top,
- from(transparent),
- color-stop(5%, #000)
- );
- mask-image: linear-gradient(90deg, transparent, #000 5%);
-}
-
-.mx_LeftPanel
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_rightOverflow {
- -webkit-mask-image: -webkit-gradient(
- linear,
- left top,
- right top,
- from(#000),
- color-stop(95%, #000),
- to(transparent)
- );
- -webkit-mask-image: linear-gradient(90deg, #000, #000 95%, transparent);
- mask-image: -webkit-gradient(
- linear,
- left top,
- right top,
- from(#000),
- color-stop(95%, #000),
- to(transparent)
- );
- mask-image: linear-gradient(90deg, #000, #000 95%, transparent);
-}
-
-.mx_LeftPanel
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow {
- -webkit-mask-image: -webkit-gradient(
- linear,
- left top,
- right top,
- from(transparent),
- color-stop(5%, #000),
- color-stop(95%, #000),
- to(transparent)
- );
- -webkit-mask-image: linear-gradient(
- 90deg,
- transparent,
- #000 5%,
- #000 95%,
- transparent
- );
- mask-image: -webkit-gradient(
- linear,
- left top,
- right top,
- from(transparent),
- color-stop(5%, #000),
- color-stop(95%, #000),
- to(transparent)
- );
- mask-image: linear-gradient(
- 90deg,
- transparent,
- #000 5%,
- #000 95%,
- transparent
- );
-}
-
-.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer {
- margin-left: 12px;
- margin-right: 12px;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_LeftPanel
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_filterContainer
- .mx_RoomSearch_focused
- + .mx_LeftPanel_exploreButton,
-.mx_LeftPanel
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_filterContainer
- .mx_RoomSearch_hasQuery
- + .mx_LeftPanel_exploreButton {
- -ms-flex-preferred-size: 0;
- flex-basis: 0;
- margin: 0;
- width: 0;
-}
-
-.mx_LeftPanel
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_filterContainer
- .mx_RoomSearch_focused
- + .mx_LeftPanel_exploreButton:before,
-.mx_LeftPanel
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_filterContainer
- .mx_RoomSearch_hasQuery
- + .mx_LeftPanel_exploreButton:before {
- content: none;
-}
-
-.mx_LeftPanel
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_filterContainer
- .mx_LeftPanel_dialPadButton {
- width: 32px;
- height: 32px;
- border-radius: 8px;
- background-color: rgba(141, 151, 165, 0.2);
- position: relative;
- margin-left: 8px;
-}
-
-.mx_LeftPanel
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_filterContainer
- .mx_LeftPanel_dialPadButton:before {
- content: "";
- position: absolute;
- top: 8px;
- left: 8px;
- width: 16px;
- height: 16px;
- -webkit-mask-image: url(../../img/element-icons/call/dialpad.3be6cbc.svg);
- mask-image: url(../../img/element-icons/call/dialpad.3be6cbc.svg);
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background: #737d8c;
-}
-
-.mx_LeftPanel
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_filterContainer
- .mx_LeftPanel_exploreButton {
- width: 32px;
- height: 32px;
- border-radius: 8px;
- background-color: rgba(141, 151, 165, 0.2);
- position: relative;
- margin-left: 8px;
-}
-
-.mx_LeftPanel
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_filterContainer
- .mx_LeftPanel_exploreButton:before {
- content: "";
- position: absolute;
- top: 8px;
- left: 8px;
- width: 16px;
- height: 16px;
- -webkit-mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
- mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background: #737d8c;
-}
-
-.mx_LeftPanel
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_filterContainer
- .mx_LeftPanel_exploreButton.mx_LeftPanel_exploreButton_space:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
- mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
-}
-
-.mx_LeftPanel
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_roomListFilterCount {
- font-size: 1.3rem;
- font-weight: 600;
- margin-left: 12px;
- margin-top: 14px;
- margin-bottom: -4px;
-}
-
-.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper {
- overflow: hidden;
- margin-top: 10px;
- -webkit-box-flex: 1;
- -ms-flex: 1 0 0px;
- flex: 1 0 0;
-}
-
-.mx_LeftPanel
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_roomListWrapper.mx_LeftPanel_roomListWrapper_stickyBottom {
- padding-bottom: 32px;
-}
-
-.mx_LeftPanel
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_roomListWrapper.mx_LeftPanel_roomListWrapper_stickyTop {
- padding-top: 32px;
-}
-
-.mx_LeftPanel
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_actualRoomListContainer {
- position: relative;
- height: 100%;
-}
-
-.mx_LeftPanel.mx_LeftPanel_minimized {
- min-width: unset;
- width: unset !important;
-}
-
-.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer {
- width: 68px;
-}
-
-.mx_LeftPanel.mx_LeftPanel_minimized
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_userHeader {
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_LeftPanel.mx_LeftPanel_minimized
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_filterContainer {
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_LeftPanel.mx_LeftPanel_minimized
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_filterContainer
- .mx_LeftPanel_dialPadButton,
-.mx_LeftPanel.mx_LeftPanel_minimized
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_filterContainer
- .mx_LeftPanel_exploreButton {
- margin-left: 0;
- margin-top: 8px;
- background-color: transparent;
-}
-
-.mx_LeftPanelWidget {
- margin-left: 8px;
- margin-bottom: 4px;
-}
-
-.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- height: 24px;
- color: #8d99a5;
- margin-top: 4px;
-}
-
-.mx_LeftPanelWidget
- .mx_LeftPanelWidget_headerContainer
- .mx_LeftPanelWidget_stickable {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- max-width: 100%;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_LeftPanelWidget
- .mx_LeftPanelWidget_headerContainer
- .mx_LeftPanelWidget_headerText {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- max-width: calc(100% - 16px);
- line-height: 1.6rem;
- font-size: 1.3rem;
- font-weight: 600;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
-}
-
-.mx_LeftPanelWidget
- .mx_LeftPanelWidget_headerContainer
- .mx_LeftPanelWidget_headerText
- .mx_LeftPanelWidget_collapseBtn {
- display: inline-block;
- position: relative;
- width: 14px;
- height: 14px;
- margin-right: 6px;
-}
-
-.mx_LeftPanelWidget
- .mx_LeftPanelWidget_headerContainer
- .mx_LeftPanelWidget_headerText
- .mx_LeftPanelWidget_collapseBtn:before {
- content: "";
- width: 18px;
- height: 18px;
- position: absolute;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background-color: #8d99a5;
- -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
- mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
-}
-
-.mx_LeftPanelWidget
- .mx_LeftPanelWidget_headerContainer
- .mx_LeftPanelWidget_headerText
- .mx_LeftPanelWidget_collapseBtn.mx_LeftPanelWidget_collapseBtn_collapsed:before {
- -webkit-transform: rotate(-90deg);
- transform: rotate(-90deg);
-}
-
-.mx_LeftPanelWidget .mx_LeftPanelWidget_resizeBox {
- position: relative;
- -ms-flex-direction: column;
- flex-direction: column;
- overflow: visible;
-}
-
-.mx_LeftPanelWidget .mx_AppTileFullWidth,
-.mx_LeftPanelWidget .mx_LeftPanelWidget_resizeBox {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
-}
-
-.mx_LeftPanelWidget .mx_AppTileFullWidth {
- -webkit-box-flex: 1;
- -ms-flex: 1 0 0px;
- flex: 1 0 0;
- overflow: hidden;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- -webkit-mask-image: linear-gradient(0deg, transparent, #000 4px);
- mask-image: linear-gradient(0deg, transparent, #000 4px);
-}
-
-.mx_LeftPanelWidget .mx_LeftPanelWidget_resizerHandle {
- cursor: ns-resize;
- border-radius: 3px;
- width: unset !important;
- height: 4px !important;
- position: absolute;
- top: -24px !important;
- left: calc(50% - 32px) !important;
- right: calc(50% - 32px) !important;
-}
-
-.mx_LeftPanelWidget:hover .mx_LeftPanelWidget_resizerHandle {
- opacity: 0.8;
- background-color: #2e2f32;
-}
-
-.mx_LeftPanelWidget .mx_LeftPanelWidget_maximizeButton {
- margin-left: 8px;
- margin-right: 7px;
- position: relative;
- width: 24px;
- height: 24px;
- border-radius: 32px;
-}
-
-.mx_LeftPanelWidget .mx_LeftPanelWidget_maximizeButton:before {
- content: "";
- width: 16px;
- height: 16px;
- position: absolute;
- top: 4px;
- left: 4px;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-image: url(../../img/feather-customised/maximise.dc32127.svg);
- mask-image: url(../../img/feather-customised/maximise.dc32127.svg);
- background: #61708b;
-}
-
-.mx_LeftPanelWidget_maximizeButtonTooltip {
- margin-top: -3px;
-}
-
-.mx_MainSplit {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- min-width: 0;
- min-height: 0;
- height: 100%;
-}
-
-.mx_MainSplit > .mx_RightPanel_ResizeWrapper {
- padding: 5px;
- margin-left: 8px;
- height: calc(100vh - 51px);
-}
-
-.mx_MainSplit > .mx_RightPanel_ResizeWrapper:hover .mx_RightPanel_ResizeHandle {
- top: 50% !important;
- -webkit-transform: translateY(-50%);
- transform: translateY(-50%);
- height: 64px !important;
- width: 4px !important;
- border-radius: 4px !important;
- background-color: #2e2f32;
- opacity: 0.8;
-}
-
-.mx_MatrixChat_splash {
- position: relative;
- height: 100%;
-}
-
-.mx_MatrixChat_splashButtons {
- text-align: center;
- width: 100%;
- position: absolute;
- bottom: 30px;
-}
-
-.mx_MatrixChat_wrapper {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- width: 100%;
- height: 100%;
-}
-
-.mx_MatrixToolbar {
- -webkit-box-ordinal-group: 2;
- -ms-flex-order: 1;
- order: 1;
- height: 40px;
-}
-
-.mx_MatrixChat {
- width: 100%;
- height: 100%;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-ordinal-group: 3;
- -ms-flex-order: 2;
- order: 2;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- min-height: 0;
-}
-
-.mx_MatrixChat_syncError {
- color: #fff;
- background-color: #df2a8b;
- border-radius: 5px;
- display: table;
- padding: 30px;
- position: absolute;
- top: 100px;
- left: 50%;
- -webkit-transform: translateX(-50%);
- transform: translateX(-50%);
-}
-
-.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle) {
- background-color: #fff;
- -webkit-box-flex: 1;
- -ms-flex: 1 1 0px;
- flex: 1 1 0;
- min-width: 0;
- height: 100%;
-}
-
-.mx_MatrixChat > .mx_ResizeHandle_horizontal:hover {
- position: relative;
-}
-
-.mx_MatrixChat > .mx_ResizeHandle_horizontal:hover:before {
- position: absolute;
- left: 6px;
- top: 50%;
- -webkit-transform: translateY(-50%);
- transform: translateY(-50%);
- height: 64px;
- width: 4px;
- border-radius: 4px;
- content: " ";
- background-color: #2e2f32;
- opacity: 0.8;
-}
-
-.mx_MyGroups {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_MyGroups .mx_BetaCard {
- margin: 0 72px;
- max-width: 760px;
-}
-
-.mx_MyGroups .mx_RoomHeader_simpleHeader {
- margin-left: 0;
-}
-
-.mx_MyGroups_header {
- margin-left: 2px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
-}
-
-.mx_MyGroups > :not(.mx_RoomHeader):not(.mx_BetaCard) {
- max-width: 960px;
- margin: 40px;
-}
-
-.mx_MyGroups_headerCard {
- -webkit-box-flex: 1;
- -ms-flex: 1 0 50%;
- flex: 1 0 50%;
- margin-bottom: 30px;
- min-width: 400px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- margin-right: 13px;
- height: 40px;
- width: 40px;
- border-radius: 20px;
- background-color: rgba(92, 100, 112, 0.2);
- position: relative;
-}
-
-.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button:before {
- background-color: #5c6470;
- -webkit-mask: url(../../img/icons-create-room.817ede2.svg);
- mask: url(../../img/icons-create-room.817ede2.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 80%;
- mask-size: 80%;
- content: "";
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
-}
-
-.mx_MyGroups_headerCard_header {
- font-weight: 700;
- margin-bottom: 10px;
-}
-
-.mx_MyGroups_headerCard_content {
- padding-right: 15px;
-}
-
-.mx_MyGroups_joinBox {
- visibility: hidden;
- height: 0;
- margin: 0;
-}
-
-.mx_MyGroups_content {
- margin-left: 2px;
- -webkit-box-flex: 1;
- -ms-flex: 1 0 0px;
- flex: 1 0 0;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- overflow-y: auto;
-}
-
-.mx_MyGroups_scrollable {
- overflow-y: inherit;
-}
-
-.mx_MyGroups_placeholder {
- background-color: #f7f7f7;
- color: #888;
- line-height: 40rem;
- border-radius: 10px;
- text-align: center;
-}
-
-.mx_MyGroups_joinedGroups {
- border-top: 1px solid transparent;
- overflow-x: hidden;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-flow: row wrap;
- flex-flow: row wrap;
- -ms-flex-line-pack: start;
- align-content: flex-start;
-}
-
-.mx_MyGroups_joinedGroups .mx_GroupTile {
- min-width: 300px;
- max-width: 33%;
- -webkit-box-flex: 1;
- -ms-flex: 1 0 300px;
- flex: 1 0 300px;
- height: 75px;
- margin: 10px 0;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: flex-start;
- cursor: pointer;
-}
-
-.mx_GroupTile_avatar {
- cursor: -webkit-grab, -webkit-grab;
- cursor: grab, -webkit-grab;
-}
-
-.mx_GroupTile_profile {
- margin-left: 10px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_GroupTile_profile .mx_GroupTile_desc,
-.mx_GroupTile_profile .mx_GroupTile_groupId,
-.mx_GroupTile_profile .mx_GroupTile_name {
- padding-right: 10px;
-}
-
-.mx_GroupTile_profile .mx_GroupTile_name {
- margin: 0;
- font-size: 1.5rem;
-}
-
-.mx_GroupTile_profile .mx_GroupTile_groupId {
- font-size: 1.3rem;
- opacity: 0.7;
-}
-
-.mx_GroupTile_profile .mx_GroupTile_desc {
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- font-size: 1.3rem;
- max-height: 36px;
- overflow: hidden;
-}
-
-.mx_NonUrgentToastContainer {
- position: absolute;
- bottom: 30px;
- left: 28px;
- z-index: 101;
-}
-
-.mx_NonUrgentToastContainer .mx_NonUrgentToastContainer_toast {
- padding: 10px 12px;
- border-radius: 8px;
- width: 320px;
- font-size: 1.3rem;
- margin-top: 8px;
- background-color: #17191c;
- color: #fff;
-}
-
-.mx_NotificationPanel {
- -webkit-box-ordinal-group: 3;
- -ms-flex-order: 2;
- order: 2;
- -webkit-box-flex: 1;
- -ms-flex: 1 1 0px;
- flex: 1 1 0;
- overflow-y: auto;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_NotificationPanel .mx_RoomView_messageListWrapper {
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_NotificationPanel .mx_RoomView_MessageList {
- width: 100%;
-}
-
-.mx_NotificationPanel .mx_RoomView_MessageList h2 {
- margin-left: 0;
-}
-
-.mx_NotificationPanel .mx_EventTile {
- word-break: break-word;
- position: relative;
- padding-bottom: 18px;
-}
-
-.mx_NotificationPanel
- .mx_EventTile:not(.mx_EventTile_last):not(.mx_EventTile_lastInSection):after {
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- background-color: #8d99a5;
- height: 1px;
- opacity: 0.4;
- content: "";
-}
-
-.mx_NotificationPanel .mx_EventTile_roomName {
- font-weight: 700;
- font-size: 1.4rem;
-}
-
-.mx_NotificationPanel .mx_EventTile_roomName > * {
- vertical-align: middle;
-}
-
-.mx_NotificationPanel .mx_EventTile_roomName > .mx_BaseAvatar {
- margin-right: 8px;
-}
-
-.mx_NotificationPanel .mx_EventTile_roomName a {
- color: #2e2f32;
-}
-
-.mx_NotificationPanel .mx_EventTile_avatar {
- display: none;
-}
-
-.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp,
-.mx_NotificationPanel .mx_EventTile .mx_SenderProfile {
- color: #2e2f32;
- font-size: 1.2rem;
- display: inline;
-}
-
-.mx_NotificationPanel
- .mx_EventTile:not([data-layout="bubble"])
- .mx_EventTile_senderDetails {
- padding-left: 36px;
- position: relative;
-}
-
-.mx_NotificationPanel
- .mx_EventTile:not([data-layout="bubble"])
- .mx_EventTile_senderDetails
- a {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_NotificationPanel .mx_EventTile_roomName a,
-.mx_NotificationPanel .mx_EventTile_senderDetails a {
- text-decoration: none !important;
-}
-
-.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
- visibility: visible;
- position: static;
- display: inline;
- padding-left: 5px;
-}
-
-.mx_NotificationPanel
- .mx_EventTile:not([data-layout="bubble"])
- .mx_EventTile_line {
- margin-right: 0;
- padding: 0 0 0 36px;
-}
-
-.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line {
- padding-left: 0;
-}
-
-.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
- background-color: #fff;
-}
-
-.mx_NotificationPanel .mx_EventTile_content {
- margin-right: 0;
-}
-
-.mx_NotificationPanel_empty:before {
- -webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
- mask-image: url(../../img/element-icons/notifications.d298b39.svg);
-}
-
-.mx_RightPanel {
- overflow-x: hidden;
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- position: relative;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- border-radius: 8px;
- padding: 4px 0;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- height: 100%;
- contain: strict;
-}
-
-.mx_RightPanel .mx_RoomView_MessageList {
- padding: 14px 18px;
-}
-
-.mx_RightPanel_header {
- -webkit-box-ordinal-group: 2;
- -ms-flex-order: 1;
- order: 1;
- border-bottom: 1px solid transparent;
- -webkit-box-flex: 0;
- -ms-flex: 0 0 52px;
- flex: 0 0 52px;
-}
-
-.mx_RightPanel_headerButtonGroup {
- height: 100%;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- background-color: #fff;
- padding: 0 9px;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_RightPanel_headerButton {
- cursor: pointer;
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- margin-left: 1px;
- margin-right: 1px;
- height: 32px;
- width: 32px;
- position: relative;
- border-radius: 100%;
-}
-
-.mx_RightPanel_headerButton:before {
- content: "";
- position: absolute;
- top: 4px;
- left: 4px;
- height: 24px;
- width: 24px;
- background-color: #c1c6cd;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
-}
-
-.mx_RightPanel_headerButton:hover {
- background: rgba(13, 189, 139, 0.1);
-}
-
-.mx_RightPanel_headerButton:hover:before {
- background-color: #0dbd8b;
-}
-
-.mx_RightPanel_notifsButton:before {
- -webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
- mask-image: url(../../img/element-icons/notifications.d298b39.svg);
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_RightPanel_roomSummaryButton:before {
- -webkit-mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
- mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_RightPanel_groupMembersButton:before {
- -webkit-mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
- mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_RightPanel_roomsButton:before {
- -webkit-mask-image: url(../../img/element-icons/community-rooms.8f0b6c9.svg);
- mask-image: url(../../img/element-icons/community-rooms.8f0b6c9.svg);
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_RightPanel_pinnedMessagesButton:before {
- -webkit-mask-image: url(../../img/element-icons/room/pin.a996417.svg);
- mask-image: url(../../img/element-icons/room/pin.a996417.svg);
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_RightPanel_pinnedMessagesButton
- .mx_RightPanel_pinnedMessagesButton_unreadIndicator {
- position: absolute;
- right: 0;
- top: 0;
- margin: 4px;
- width: 8px;
- height: 8px;
- border-radius: 50%;
- -webkit-transform: scale(1);
- transform: scale(1);
- background: #ff4b55;
- -webkit-box-shadow: 0 0 0 0 #ff4b55;
- box-shadow: 0 0 0 0 #ff4b55;
- -webkit-animation: mx_RightPanel_indicator_pulse 2s infinite;
- animation: mx_RightPanel_indicator_pulse 2s infinite;
- -webkit-animation-iteration-count: 1;
- animation-iteration-count: 1;
-}
-
-.mx_RightPanel_pinnedMessagesButton
- .mx_RightPanel_pinnedMessagesButton_unreadIndicator:after {
- content: "";
- position: absolute;
- width: inherit;
- height: inherit;
- top: 0;
- left: 0;
- -webkit-transform: scale(1);
- transform: scale(1);
- -webkit-transform-origin: center center;
- transform-origin: center center;
- -webkit-animation-name: mx_RightPanel_indicator_pulse_shadow;
- animation-name: mx_RightPanel_indicator_pulse_shadow;
- -webkit-animation-duration: inherit;
- animation-duration: inherit;
- -webkit-animation-iteration-count: inherit;
- animation-iteration-count: inherit;
- border-radius: 50%;
- background: #ff4b55;
-}
-
-@-webkit-keyframes mx_RightPanel_indicator_pulse {
- 0% {
- -webkit-transform: scale(0.95);
- transform: scale(0.95);
- }
- 70% {
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- to {
- -webkit-transform: scale(0.95);
- transform: scale(0.95);
- }
-}
-
-@keyframes mx_RightPanel_indicator_pulse {
- 0% {
- -webkit-transform: scale(0.95);
- transform: scale(0.95);
- }
- 70% {
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- to {
- -webkit-transform: scale(0.95);
- transform: scale(0.95);
- }
-}
-
-@-webkit-keyframes mx_RightPanel_indicator_pulse_shadow {
- 0% {
- opacity: 0.7;
- }
- 70% {
- -webkit-transform: scale(2.2);
- transform: scale(2.2);
- opacity: 0;
- }
- to {
- opacity: 0;
- }
-}
-
-@keyframes mx_RightPanel_indicator_pulse_shadow {
- 0% {
- opacity: 0.7;
- }
- 70% {
- -webkit-transform: scale(2.2);
- transform: scale(2.2);
- opacity: 0;
- }
- to {
- opacity: 0;
- }
-}
-
-.mx_RightPanel_headerButton_highlight:before {
- background-color: #0dbd8b !important;
-}
-
-.mx_RightPanel_headerButton_badge {
- font-size: 0.8rem;
- border-radius: 8px;
- color: #fff;
- background-color: #0dbd8b;
- font-weight: 700;
- position: absolute;
- top: -4px;
- left: 20px;
- padding: 2px 4px;
-}
-
-.mx_RightPanel_collapsebutton {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- text-align: right;
- height: 16px;
- border: none;
-}
-
-.mx_RightPanel .mx_GroupRoomList,
-.mx_RightPanel .mx_MemberInfo,
-.mx_RightPanel .mx_MemberList,
-.mx_RightPanel_blank {
- -webkit-box-ordinal-group: 3;
- -ms-flex-order: 2;
- order: 2;
- -webkit-box-flex: 1;
- -ms-flex: 1 1 0px;
- flex: 1 1 0;
-}
-
-.mx_RightPanel .mx_RoomView_messagePanelSpinner {
- -webkit-box-ordinal-group: 3;
- -ms-flex-order: 2;
- order: 2;
- margin: auto;
-}
-
-.mx_RightPanel_empty {
- margin-right: -28px;
-}
-
-.mx_RightPanel_empty h2 {
- font-weight: 700;
- margin: 16px 0;
-}
-
-.mx_RightPanel_empty h2,
-.mx_RightPanel_empty p {
- font-size: 1.4rem;
-}
-
-.mx_RightPanel_empty:before {
- content: "";
- display: block;
- margin: 11px auto 29px;
- height: 42px;
- width: 42px;
- background-color: #91a1c0;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_RightPanel_scopeHeader {
- margin: 24px;
- text-align: center;
- font-weight: 600;
- font-size: 1.8rem;
- line-height: 2.2rem;
-}
-
-.mx_RightPanel_scopeHeader .mx_BaseAvatar {
- margin-right: 8px;
- vertical-align: middle;
-}
-
-.mx_RightPanel_scopeHeader .mx_BaseAvatar_image {
- border-radius: 8px;
-}
-
-.mx_RoomDirectory_dialogWrapper > .mx_Dialog {
- max-width: 960px;
- height: 100%;
-}
-
-.mx_RoomDirectory_dialog {
- height: 100%;
- flex-direction: column;
-}
-
-.mx_RoomDirectory,
-.mx_RoomDirectory_dialog {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
-}
-
-.mx_RoomDirectory {
- margin-bottom: 12px;
- color: #2e2f32;
- word-break: break-word;
-}
-
-.mx_RoomDirectory,
-.mx_RoomDirectory_list {
- flex-direction: column;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
-}
-
-.mx_RoomDirectory_list {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
-}
-
-.mx_RoomDirectory_list .mx_RoomView_messageListWrapper {
- -webkit-box-pack: start;
- -ms-flex-pack: start;
- justify-content: flex-start;
-}
-
-.mx_RoomDirectory_listheader {
- display: block;
- margin-top: 13px;
-}
-
-.mx_RoomDirectory_searchbox {
- -webkit-box-flex: 1 !important;
- -ms-flex: 1 !important;
- flex: 1 !important;
-}
-
-.mx_RoomDirectory_listheader .mx_NetworkDropdown {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 200px;
- flex: 0 0 200px;
-}
-
-.mx_RoomDirectory_tableWrapper {
- overflow-y: auto;
- -webkit-box-flex: 1;
- -ms-flex: 1 1 0px;
- flex: 1 1 0;
-}
-
-.mx_RoomDirectory_tableWrapper .mx_RoomDirectory_footer {
- margin-top: 24px;
- text-align: center;
-}
-
-.mx_RoomDirectory_tableWrapper .mx_RoomDirectory_footer > h5 {
- margin: 0;
- font-weight: 600;
- font-size: 1.5rem;
- line-height: 1.8rem;
- color: #2e2f32;
-}
-
-.mx_RoomDirectory_tableWrapper .mx_RoomDirectory_footer > p {
- margin: 40px auto 60px;
- font-size: 1.4rem;
- line-height: 2rem;
- color: #737d8c;
- max-width: 464px;
-}
-
-.mx_RoomDirectory_tableWrapper .mx_RoomDirectory_footer > hr {
- margin: 0;
- border: none;
- height: 1px;
- background-color: #f3f8fd;
-}
-
-.mx_RoomDirectory_tableWrapper
- .mx_RoomDirectory_footer
- .mx_RoomDirectory_newRoom {
- margin: 24px auto 0;
- width: -webkit-max-content;
- width: -moz-max-content;
- width: max-content;
-}
-
-.mx_RoomDirectory_table {
- color: #2e2f32;
- display: grid;
- font-size: 1.2rem;
- grid-template-columns: -webkit-max-content auto -webkit-max-content -webkit-max-content -webkit-max-content;
- grid-template-columns: max-content auto max-content max-content max-content;
- grid-row-gap: 24px;
- row-gap: 24px;
- text-align: left;
- width: 100%;
-}
-
-.mx_RoomDirectory_roomAvatar {
- padding: 2px 14px 0 0;
-}
-
-.mx_RoomDirectory_roomMemberCount {
- -ms-flex-item-align: center;
- align-self: center;
- color: #747474;
- padding: 3px 10px 0;
-}
-
-.mx_RoomDirectory_roomMemberCount:before {
- background-color: #747474;
- display: inline-block;
- vertical-align: text-top;
- margin-right: 2px;
- content: "";
- -webkit-mask: url(../../img/feather-customised/user.7a4d23d.svg);
- mask: url(../../img/feather-customised/user.7a4d23d.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 80%;
- mask-size: 80%;
- width: 16px;
- height: 16px;
-}
-
-.mx_RoomDirectory_join,
-.mx_RoomDirectory_preview {
- -ms-flex-item-align: center;
- align-self: center;
- white-space: nowrap;
-}
-
-.mx_RoomDirectory_name {
- display: inline-block;
- font-size: 1.8rem;
- font-weight: 600;
-}
-
-.mx_RoomDirectory_perms {
- display: inline-block;
-}
-
-.mx_RoomDirectory_perm {
- border-radius: 10px;
- display: inline-block;
- height: 20px;
- line-height: 2rem;
- padding: 0 5px;
- color: #fff;
- background-color: #aaa;
-}
-
-.mx_RoomDirectory_topic {
- cursor: auto;
- color: #747474;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 3;
- overflow: hidden;
-}
-
-.mx_RoomDirectory_alias {
- font-size: 1.2rem;
- color: #a2a2a2;
-}
-
-.mx_RoomDirectory .mx_RoomView_MessageList {
- padding: 0;
-}
-
-.mx_RoomDirectory > span {
- font-size: 1.5rem;
- margin-top: 0;
-}
-
-.mx_RoomDirectory > span .mx_AccessibleButton {
- padding: 0;
-}
-
-.mx_RoomSearch {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- border-radius: 8px;
- background-color: rgba(141, 151, 165, 0.2);
- border: 1px solid transparent;
- height: 28px;
- padding: 1px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_RoomSearch .mx_RoomSearch_icon {
- width: 16px;
- height: 16px;
- -webkit-mask: url(../../img/element-icons/roomlist/search.3774248.svg);
- mask: url(../../img/element-icons/roomlist/search.3774248.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background-color: #737d8c;
- margin-left: 7px;
-}
-
-.mx_RoomSearch .mx_RoomSearch_input {
- border: none !important;
- -webkit-box-flex: 1 !important;
- -ms-flex: 1 !important;
- flex: 1 !important;
- color: #2e2f32 !important;
- padding: 0;
- height: 100%;
- width: 100%;
- font-size: 1.2rem;
- line-height: 1.6rem;
-}
-
-.mx_RoomSearch
- .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-webkit-input-placeholder {
- color: #8d99a5 !important;
-}
-
-.mx_RoomSearch
- .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-moz-placeholder {
- color: #8d99a5 !important;
-}
-
-.mx_RoomSearch
- .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded):-ms-input-placeholder {
- color: #8d99a5 !important;
-}
-
-.mx_RoomSearch
- .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-ms-input-placeholder {
- color: #8d99a5 !important;
-}
-
-.mx_RoomSearch
- .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::placeholder {
- color: #8d99a5 !important;
-}
-
-.mx_RoomSearch.mx_RoomSearch_hasQuery {
- border-color: #737d8c;
-}
-
-.mx_RoomSearch.mx_RoomSearch_focused {
- -webkit-box-shadow: 0 0 4px 4px rgba(0, 132, 255, 0.5);
- box-shadow: 0 0 4px 4px rgba(0, 132, 255, 0.5);
- border-color: transparent;
-}
-
-.mx_RoomSearch.mx_RoomSearch_focused,
-.mx_RoomSearch.mx_RoomSearch_hasQuery {
- background-color: #fff;
-}
-
-.mx_RoomSearch.mx_RoomSearch_focused .mx_RoomSearch_clearButton,
-.mx_RoomSearch.mx_RoomSearch_hasQuery .mx_RoomSearch_clearButton {
- width: 16px;
- height: 16px;
- -webkit-mask-image: url(../../img/element-icons/roomlist/search-clear.6164d97.svg);
- mask-image: url(../../img/element-icons/roomlist/search-clear.6164d97.svg);
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background-color: #737d8c;
- margin-right: 8px;
-}
-
-.mx_RoomSearch .mx_RoomSearch_clearButton {
- width: 0;
- height: 0;
-}
-
-.mx_RoomSearch.mx_RoomSearch_minimized {
- border-radius: 32px;
- height: auto;
- width: auto;
- padding: 8px;
-}
-
-.mx_RoomSearch.mx_RoomSearch_minimized .mx_RoomSearch_icon {
- margin-left: 0;
-}
-
-.mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages) {
- margin-left: 65px;
- min-height: 50px;
-}
-
-.mx_RoomStatusBar_typingIndicatorAvatars {
- width: 52px;
- margin-top: -1px;
- text-align: left;
-}
-
-.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_image {
- margin-right: -12px;
- border: 1px solid #fff;
-}
-
-.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_initial {
- padding-left: 1px;
- padding-top: 1px;
-}
-
-.mx_RoomStatusBar_typingIndicatorRemaining {
- display: inline-block;
- color: #acacac;
- background-color: #ddd;
- border: 1px solid #fff;
- border-radius: 40px;
- width: 24px;
- height: 24px;
- line-height: 2.4rem;
- font-size: 0.8em;
- vertical-align: top;
- text-align: center;
- position: absolute;
-}
-
-.mx_RoomStatusBar_scrollDownIndicator {
- cursor: pointer;
- padding-left: 1px;
-}
-
-.mx_RoomStatusBar_unreadMessagesBar {
- padding-top: 10px;
- color: #ff4b55;
- cursor: pointer;
-}
-
-.mx_RoomStatusBar_connectionLostBar {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- margin-top: 19px;
- min-height: 58px;
-}
-
-.mx_RoomStatusBar_unsentMessages > div[role="alert"] {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- min-height: 70px;
- margin: 12px;
- padding-left: 16px;
- background-color: #f3f8fd;
- border-radius: 4px;
-}
-
-.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge {
- margin-right: 12px;
-}
-
-.mx_RoomStatusBar_unsentMessages
- .mx_RoomStatusBar_unsentBadge
- .mx_NotificationBadge {
- width: 24px !important;
- height: 24px !important;
- border-radius: 24px !important;
-}
-
-.mx_RoomStatusBar_unsentMessages
- .mx_RoomStatusBar_unsentBadge
- .mx_NotificationBadge
- .mx_NotificationBadge_count {
- font-size: 1.6rem !important;
-}
-
-.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentTitle {
- color: #ff4b55;
- font-size: 1.5rem;
-}
-
-.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentDescription {
- font-size: 1.2rem;
-}
-
-.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar {
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- text-align: right;
- margin-right: 22px;
- color: #61708b;
-}
-
-.mx_RoomStatusBar_unsentMessages
- .mx_RoomStatusBar_unsentButtonBar
- .mx_AccessibleButton {
- padding: 5px 10px 5px 30px;
- display: inline-block;
- position: relative;
-}
-
-.mx_RoomStatusBar_unsentMessages
- .mx_RoomStatusBar_unsentButtonBar
- .mx_AccessibleButton:nth-child(2) {
- border-left: 1px solid #e3e8f0;
-}
-
-.mx_RoomStatusBar_unsentMessages
- .mx_RoomStatusBar_unsentButtonBar
- .mx_AccessibleButton:before {
- content: "";
- position: absolute;
- left: 10px;
- background-color: #61708b;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- width: 18px;
- height: 18px;
- top: 50%;
- -webkit-transform: translateY(-50%);
- transform: translateY(-50%);
-}
-
-.mx_RoomStatusBar_unsentMessages
- .mx_RoomStatusBar_unsentButtonBar
- .mx_AccessibleButton.mx_RoomStatusBar_unsentCancelAllBtn:before {
- -webkit-mask-image: url(../../img/element-icons/trashcan.3b626db.svg);
- mask-image: url(../../img/element-icons/trashcan.3b626db.svg);
-}
-
-.mx_RoomStatusBar_unsentMessages
- .mx_RoomStatusBar_unsentButtonBar
- .mx_AccessibleButton.mx_RoomStatusBar_unsentResendAllBtn {
- padding-left: 34px;
-}
-
-.mx_RoomStatusBar_unsentMessages
- .mx_RoomStatusBar_unsentButtonBar
- .mx_AccessibleButton.mx_RoomStatusBar_unsentResendAllBtn:before {
- -webkit-mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
- mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
-}
-
-.mx_RoomStatusBar_unsentMessages
- .mx_RoomStatusBar_unsentButtonBar
- .mx_InlineSpinner {
- vertical-align: middle;
- margin-right: 5px;
- top: 1px;
-}
-
-.mx_RoomStatusBar_unsentMessages
- .mx_RoomStatusBar_unsentButtonBar
- .mx_InlineSpinner
- + span {
- margin-right: 10px;
-}
-
-.mx_RoomStatusBar_connectionLostBar img {
- padding-left: 10px;
- padding-right: 10px;
- vertical-align: middle;
- float: left;
-}
-
-.mx_RoomStatusBar_connectionLostBar_title {
- color: #ff4b55;
-}
-
-.mx_RoomStatusBar_connectionLostBar_desc {
- color: #2e2f32;
- font-size: 1.3rem;
- opacity: 0.5;
- padding-bottom: 20px;
-}
-
-.mx_RoomStatusBar_resend_link {
- color: #2e2f32 !important;
- text-decoration: underline !important;
- cursor: pointer;
-}
-
-.mx_RoomStatusBar_typingBar {
- height: 50px;
- line-height: 5rem;
- color: #2e2f32;
- opacity: 0.5;
- overflow-y: hidden;
- display: block;
-}
-
-.mx_MatrixChat_useCompactLayout
- .mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages) {
- min-height: 40px;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_indicator {
- margin-top: 10px;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_typingBar {
- height: 40px;
- line-height: 4rem;
-}
-
-.mx_RoomView {
- word-wrap: break-word;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-@-webkit-keyframes mx_RoomView_fileDropTarget_animation {
- 0% {
- opacity: 0;
- }
- to {
- opacity: 0.95;
- }
-}
-
-@keyframes mx_RoomView_fileDropTarget_animation {
- 0% {
- opacity: 0;
- }
- to {
- opacity: 0.95;
- }
-}
-
-.mx_RoomView_fileDropTarget {
- min-width: 0;
- width: 100%;
- height: 100%;
- font-size: 1.8rem;
- text-align: center;
- pointer-events: none;
- background-color: #fff;
- opacity: 0.95;
- position: absolute;
- z-index: 3000;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-animation: mx_RoomView_fileDropTarget_animation;
- animation: mx_RoomView_fileDropTarget_animation;
- -webkit-animation-duration: 0.5s;
- animation-duration: 0.5s;
-}
-
-@-webkit-keyframes mx_RoomView_fileDropTarget_image_animation {
- 0% {
- -webkit-transform: scaleX(0);
- transform: scaleX(0);
- }
- to {
- -webkit-transform: scaleX(1);
- transform: scaleX(1);
- }
-}
-
-@keyframes mx_RoomView_fileDropTarget_image_animation {
- 0% {
- -webkit-transform: scaleX(0);
- transform: scaleX(0);
- }
- to {
- -webkit-transform: scaleX(1);
- transform: scaleX(1);
- }
-}
-
-.mx_RoomView_fileDropTarget_image {
- width: 32px;
- -webkit-animation: mx_RoomView_fileDropTarget_image_animation;
- animation: mx_RoomView_fileDropTarget_image_animation;
- -webkit-animation-duration: 0.5s;
- animation-duration: 0.5s;
- margin-bottom: 16px;
-}
-
-.mx_RoomView_auxPanel {
- min-width: 0;
- width: 100%;
- margin: 0 auto;
- overflow: auto;
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
-}
-
-.mx_RoomView_auxPanel_fullHeight {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- z-index: 3000;
- background-color: #fff;
-}
-
-.mx_RoomView_auxPanel_hiddenHighlights {
- border-bottom: 1px solid transparent;
- padding: 10px 26px;
- color: #ff4b55;
- cursor: pointer;
-}
-
-.mx_RoomView_auxPanel_apps {
- max-width: 1920px !important;
-}
-
-.mx_RoomView .mx_MainSplit,
-.mx_RoomView_messagePanel {
- -webkit-box-flex: 1;
- -ms-flex: 1 1 0px;
- flex: 1 1 0;
-}
-
-.mx_RoomView_messagePanel {
- width: 100%;
- overflow-y: auto;
- overflow-anchor: none;
-}
-
-.mx_RoomView_messagePanelSearchSpinner {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background-image: url(../../img/typing-indicator-2x.0eb9f0e.gif);
- background-position: center 367px;
- background-size: 25px;
- background-repeat: no-repeat;
- position: relative;
-}
-
-.mx_RoomView_messagePanelSearchSpinner:before {
- background-color: #888;
- -webkit-mask: url(../../img/feather-customised/search-input.044bfa7.svg);
- mask: url(../../img/feather-customised/search-input.044bfa7.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 50px;
- mask-size: 50px;
- content: "";
- position: absolute;
- top: 286px;
- left: 0;
- right: 0;
- height: 50px;
-}
-
-.mx_RoomView_body {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- min-width: 0;
-}
-
-.mx_RoomView_body .mx_RoomView_messagePanel,
-.mx_RoomView_body .mx_RoomView_messagePanelSearchSpinner,
-.mx_RoomView_body .mx_RoomView_messagePanelSpinner {
- -webkit-box-ordinal-group: 3;
- -ms-flex-order: 2;
- order: 2;
-}
-
-.mx_RoomView_body .mx_RoomView_timeline {
- position: relative;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- contain: content;
-}
-
-.mx_RoomView_statusArea {
- width: 100%;
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- max-height: 0;
- background-color: #fff;
- z-index: 1000;
- overflow: hidden;
- -webkit-transition: all 0.2s ease-out;
- transition: all 0.2s ease-out;
-}
-
-.mx_RoomView_statusArea_expanded {
- max-height: 100px;
-}
-
-.mx_RoomView_statusAreaBox {
- margin: auto;
- min-height: 50px;
-}
-
-.mx_RoomView_statusAreaBox_line {
- margin-left: 65px;
- border-top: 1px solid transparent;
- height: 1px;
-}
-
-.mx_RoomView_messageListWrapper {
- min-height: 100%;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: end;
- -ms-flex-pack: end;
- justify-content: flex-end;
-}
-
-.mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper {
- -webkit-box-pack: start;
- -ms-flex-pack: start;
- justify-content: flex-start;
-}
-
-.mx_RoomView_searchResultsPanel a {
- text-decoration: none;
- color: inherit;
-}
-
-.mx_RoomView_empty {
- font-size: 1.3rem;
- padding: 0 24px;
- margin-right: 30px;
- text-align: center;
- margin-bottom: 80px;
-}
-
-.mx_RoomView_MessageList {
- list-style-type: none;
- padding: 18px;
- margin: 0;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.mx_RoomView_MessageList li {
- clear: both;
-}
-
-li.mx_RoomView_myReadMarker_container {
- height: 0;
- margin: 0;
- padding: 0;
- border: 0;
-}
-
-hr.mx_RoomView_myReadMarker {
- border-top: 1px solid #0dbd8b;
- border-bottom: 1px solid #0dbd8b;
- margin-top: 0;
- position: relative;
- top: -1px;
- z-index: 1;
- will-change: width;
- -webkit-transition: width easeinsine 0.4s 1s, opacity easeinsine 0.4s 1s;
- transition: width easeinsine 0.4s 1s, opacity easeinsine 0.4s 1s;
- width: 99%;
- opacity: 1;
-}
-
-.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
- background-color: #fff;
-}
-
-.mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename {
- color: #fff;
- opacity: 1;
-}
-
-.mx_RoomView_inCall .mx_RoomView_statusAreaBox_line {
- margin-top: 2px;
- border: none;
- height: 0;
-}
-
-.mx_RoomView_inCall .mx_MessageComposer_wrapper {
- border-top: 2px hidden;
- padding-top: 1px;
-}
-
-.mx_RoomView_voipChevron {
- position: absolute;
- bottom: -11px;
- right: 11px;
-}
-
-.mx_RoomView_voipButton {
- float: right;
- margin-right: 13px;
- margin-top: 13px;
- cursor: pointer;
-}
-
-.mx_RoomView_voipButton object {
- pointer-events: none;
-}
-
-.mx_RoomView .mx_MessageComposer {
- width: 100%;
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- margin-right: 2px;
-}
-
-.mx_RoomView_ongoingConfCallNotification {
- width: 100%;
- text-align: center;
- background-color: #ff4b55;
- color: #fff;
- font-weight: 700;
- padding: 6px 0;
- cursor: pointer;
-}
-
-.mx_RoomView_ongoingConfCallNotification a {
- color: #fff !important;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList {
- margin-bottom: 4px;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_RoomView_statusAreaBox {
- min-height: 42px;
-}
-
-.mx_ScrollPanel .mx_RoomView_MessageList {
- position: relative;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: end;
- -ms-flex-pack: end;
- justify-content: flex-end;
- content-visibility: auto;
- contain-intrinsic-size: 50px;
-}
-
-.mx_SearchBox {
- -webkit-box-flex: 1;
- -ms-flex: 1 1 0px;
- flex: 1 1 0;
- min-width: 0;
-}
-
-.mx_SearchBox.mx_SearchBox_blurred:not(:hover) {
- background-color: transparent;
-}
-
-.mx_SearchBox .mx_SearchBox_closeButton {
- cursor: pointer;
- background-image: url(../../img/icons-close.11ff07c.svg);
- background-repeat: no-repeat;
- width: 16px;
- height: 16px;
- background-position: 50%;
- padding: 9px;
-}
-
-.mx_SpacePanel {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- background-color: hsla(0, 0%, 91%, 0.77);
- padding: 0;
- margin: 0;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_SpacePanel .mx_SpacePanel_spaceTreeWrapper {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- padding: 8px 8px 16px 0;
-}
-
-.mx_SpacePanel .mx_SpacePanel_toggleCollapse {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- width: 40px;
- height: 40px;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 32px;
- mask-size: 32px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- margin-left: 16px;
- margin-bottom: 12px;
- background-color: #8d99a5;
- -webkit-mask-image: url(../../img/element-icons/expand-space-panel.e6f74b9.svg);
- mask-image: url(../../img/element-icons/expand-space-panel.e6f74b9.svg);
-}
-
-.mx_SpacePanel .mx_SpacePanel_toggleCollapse.expanded {
- -webkit-transform: scaleX(-1);
- transform: scaleX(-1);
-}
-
-.mx_SpacePanel ul {
- margin: 0;
- list-style: none;
- padding: 0;
-}
-
-.mx_SpacePanel ul > .mx_SpaceItem {
- padding-left: 16px;
-}
-
-.mx_SpacePanel .mx_SpaceButton_toggleCollapse {
- cursor: pointer;
-}
-
-.mx_SpacePanel .mx_SpaceItem_dragging .mx_SpaceButton_toggleCollapse {
- visibility: hidden;
-}
-
-.mx_SpacePanel .mx_SpaceTreeLevel {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- max-width: 250px;
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
-}
-
-.mx_SpacePanel .mx_SpaceItem {
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -ms-flex-flow: wrap;
- flex-flow: wrap;
-}
-
-.mx_SpacePanel .mx_SpaceItem.mx_SpaceItem_narrow {
- -ms-flex-item-align: baseline;
- align-self: baseline;
-}
-
-.mx_SpacePanel
- .mx_SpaceItem.collapsed
- > .mx_SpaceButton
- > .mx_SpaceButton_toggleCollapse {
- -webkit-transform: rotate(-90deg);
- transform: rotate(-90deg);
-}
-
-.mx_SpacePanel .mx_SpaceItem.collapsed > .mx_SpaceTreeLevel {
- display: none;
-}
-
-.mx_SpacePanel .mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton {
- margin-left: 16px;
- min-width: 40px;
-}
-
-.mx_SpacePanel .mx_SpaceButton {
- border-radius: 8px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding: 4px 4px 4px 0;
- width: 100%;
-}
-
-.mx_SpacePanel
- .mx_SpaceButton.mx_SpaceButton_active:not(.mx_SpaceButton_narrow)
- .mx_SpaceButton_selectionWrapper {
- background-color: #fff;
-}
-
-.mx_SpacePanel
- .mx_SpaceButton.mx_SpaceButton_active.mx_SpaceButton_narrow
- .mx_SpaceButton_selectionWrapper {
- padding: 1px;
- border: 3px solid #737d8c;
-}
-
-.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_selectionWrapper {
- position: relative;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- border-radius: 12px;
- padding: 4px;
-}
-
-.mx_SpacePanel
- .mx_SpaceButton:not(.mx_SpaceButton_narrow)
- .mx_SpaceButton_selectionWrapper {
- width: 100%;
- padding-right: 16px;
- overflow: hidden;
-}
-
-.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_name {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- margin-left: 8px;
- white-space: nowrap;
- display: block;
- text-overflow: ellipsis;
- overflow: hidden;
- padding-right: 8px;
- font-size: 1.4rem;
- line-height: 1.8rem;
-}
-
-.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_toggleCollapse {
- width: 16px;
- height: 20px;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 20px;
- mask-size: 20px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background-color: #8d99a5;
- -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
- mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
-}
-
-.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon {
- width: 32px;
- min-width: 32px;
- height: 32px;
- border-radius: 8px;
- position: relative;
-}
-
-.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon:before {
- position: absolute;
- content: "";
- width: 32px;
- height: 32px;
- top: 0;
- left: 0;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 18px;
- mask-size: 18px;
-}
-
-.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon {
- background-color: #fff;
-}
-
-.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon:before {
- background-color: #3f3d3d;
- -webkit-mask-image: url(../../img/element-icons/home.b706c0e.svg);
- mask-image: url(../../img/element-icons/home.b706c0e.svg);
-}
-
-.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_new .mx_SpaceButton_icon {
- background-color: #0dbd8b;
- -webkit-transition: all 0.1s ease-in-out;
- transition: all 0.1s ease-in-out;
-}
-
-.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_new .mx_SpaceButton_icon:before {
- background-color: #fff;
- -webkit-mask-image: url(../../img/element-icons/plus.62cc275.svg);
- mask-image: url(../../img/element-icons/plus.62cc275.svg);
- -webkit-transition: all 0.2s ease-in-out;
- transition: all 0.2s ease-in-out;
-}
-
-.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_newCancel .mx_SpaceButton_icon {
- background-color: #c1c6cd;
-}
-
-.mx_SpacePanel
- .mx_SpaceButton.mx_SpaceButton_newCancel
- .mx_SpaceButton_icon:before {
- -webkit-transform: rotate(45deg);
- transform: rotate(45deg);
-}
-
-.mx_SpacePanel .mx_SpaceButton .mx_BaseAvatar_image {
- border-radius: 8px;
-}
-
-.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton {
- width: 20px;
- min-width: 20px;
- height: 20px;
- margin-top: auto;
- margin-bottom: auto;
- display: none;
- position: absolute;
- right: 4px;
-}
-
-.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton:before {
- top: 2px;
- left: 2px;
- content: "";
- width: 16px;
- height: 16px;
- position: absolute;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
- mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
- background: #2e2f32;
-}
-
-.mx_SpacePanel .mx_SpacePanel_badgeContainer {
- position: absolute;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge {
- margin: 0 2px;
-}
-
-.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge_dot {
- margin: 0 7px;
-}
-
-.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer {
- right: 0;
- top: 0;
-}
-
-.mx_SpacePanel.collapsed
- .mx_SpaceButton
- .mx_SpacePanel_badgeContainer
- .mx_NotificationBadge {
- background-clip: padding-box;
-}
-
-.mx_SpacePanel.collapsed
- .mx_SpaceButton
- .mx_SpacePanel_badgeContainer
- .mx_NotificationBadge_dot {
- margin: 0 -1px 0 0;
- border: 3px solid hsla(0, 0%, 91%, 0.77);
-}
-
-.mx_SpacePanel.collapsed
- .mx_SpaceButton
- .mx_SpacePanel_badgeContainer
- .mx_NotificationBadge_2char,
-.mx_SpacePanel.collapsed
- .mx_SpaceButton
- .mx_SpacePanel_badgeContainer
- .mx_NotificationBadge_3char {
- margin: -5px -5px 0 0;
- border: 2px solid hsla(0, 0%, 91%, 0.77);
-}
-
-.mx_SpacePanel.collapsed
- .mx_SpaceButton.mx_SpaceButton_active
- .mx_SpacePanel_badgeContainer {
- right: -3px;
- top: -3px;
-}
-
-.mx_SpacePanel:not(.collapsed) .mx_SpacePanel_badgeContainer {
- position: absolute;
- right: 4px;
-}
-
-.mx_SpacePanel:not(.collapsed)
- .mx_SpaceButton:focus-within:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite)
- .mx_SpacePanel_badgeContainer,
-.mx_SpacePanel:not(.collapsed)
- .mx_SpaceButton:hover:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite)
- .mx_SpacePanel_badgeContainer,
-.mx_SpacePanel:not(.collapsed)
- .mx_SpaceButton_hasMenuOpen:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite)
- .mx_SpacePanel_badgeContainer {
- width: 0;
- height: 0;
- display: none;
-}
-
-.mx_SpacePanel:not(.collapsed)
- .mx_SpaceButton:focus-within:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite)
- .mx_SpaceButton_menuButton,
-.mx_SpacePanel:not(.collapsed)
- .mx_SpaceButton:hover:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite)
- .mx_SpaceButton_menuButton,
-.mx_SpacePanel:not(.collapsed)
- .mx_SpaceButton_hasMenuOpen:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite)
- .mx_SpaceButton_menuButton {
- display: block;
-}
-
-.mx_SpacePanel > .mx_AutoHideScrollbar > .mx_SpaceButton,
-.mx_SpacePanel
- > .mx_AutoHideScrollbar
- > .mx_SpaceButton.mx_SpaceButton_active:before {
- height: 32px;
-}
-
-.mx_SpacePanel > .mx_AutoHideScrollbar > ul {
- padding-left: 0;
-}
-
-.mx_SpacePanel_contextMenu .mx_SpacePanel_contextMenu_header {
- margin: 12px 16px;
- font-weight: 600;
- font-size: 1.5rem;
- line-height: 1.8rem;
-}
-
-.mx_SpacePanel_contextMenu
- .mx_IconizedContextMenu_optionList
- .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton {
- color: #0dbd8b;
-}
-
-.mx_SpacePanel_contextMenu
- .mx_IconizedContextMenu_optionList
- .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton
- .mx_SpacePanel_iconInvite:before {
- background-color: #0dbd8b;
- -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
- mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
-}
-
-.mx_SpacePanel_contextMenu .mx_SpacePanel_iconSettings:before {
- -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
- mask-image: url(../../img/element-icons/settings.6b381af.svg);
-}
-
-.mx_SpacePanel_contextMenu .mx_SpacePanel_iconLeave:before {
- -webkit-mask-image: url(../../img/element-icons/leave.bb917e7.svg);
- mask-image: url(../../img/element-icons/leave.bb917e7.svg);
-}
-
-.mx_SpacePanel_contextMenu .mx_SpacePanel_iconMembers:before {
- -webkit-mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
- mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
-}
-
-.mx_SpacePanel_contextMenu .mx_SpacePanel_iconPlus:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);
- mask-image: url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);
-}
-
-.mx_SpacePanel_contextMenu .mx_SpacePanel_iconHash:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);
- mask-image: url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);
-}
-
-.mx_SpacePanel_contextMenu .mx_SpacePanel_iconExplore:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
- mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
-}
-
-.mx_SpacePanel_sharePublicSpace {
- margin: 0;
-}
-
-.mx_SpaceRoomDirectory_dialogWrapper > .mx_Dialog {
- max-width: 960px;
- height: 100%;
-}
-
-.mx_SpaceRoomDirectory {
- height: 100%;
- margin-bottom: 12px;
- color: #2e2f32;
- word-break: break-word;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_SpaceRoomDirectory,
-.mx_SpaceRoomDirectory .mx_Dialog_title,
-.mx_SpaceRoomView_landing .mx_Dialog_title {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_SpaceRoomDirectory .mx_Dialog_title .mx_BaseAvatar,
-.mx_SpaceRoomView_landing .mx_Dialog_title .mx_BaseAvatar {
- margin-right: 12px;
- -ms-flex-item-align: center;
- align-self: center;
-}
-
-.mx_SpaceRoomDirectory .mx_Dialog_title .mx_BaseAvatar_image,
-.mx_SpaceRoomView_landing .mx_Dialog_title .mx_BaseAvatar_image {
- border-radius: 8px;
-}
-
-.mx_SpaceRoomDirectory .mx_Dialog_title > div > h1,
-.mx_SpaceRoomView_landing .mx_Dialog_title > div > h1 {
- font-weight: 600;
- font-size: 1.8rem;
- line-height: 2.2rem;
- margin: 0;
-}
-
-.mx_SpaceRoomDirectory .mx_Dialog_title > div > div,
-.mx_SpaceRoomView_landing .mx_Dialog_title > div > div {
- font-weight: 400;
- color: #737d8c;
- font-size: 1.5rem;
- line-height: 2.4rem;
-}
-
-.mx_SpaceRoomDirectory .mx_AccessibleButton_kind_link,
-.mx_SpaceRoomView_landing .mx_AccessibleButton_kind_link {
- padding: 0;
-}
-
-.mx_SpaceRoomDirectory .mx_SearchBox,
-.mx_SpaceRoomView_landing .mx_SearchBox {
- margin: 24px 0 16px;
-}
-
-.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_noResults,
-.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_noResults {
- text-align: center;
-}
-
-.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_noResults > div,
-.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_noResults > div {
- font-size: 1.5rem;
- line-height: 2.4rem;
- color: #737d8c;
-}
-
-.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader,
-.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- min-height: 32px;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- font-size: 1.5rem;
- line-height: 2.4rem;
- color: #2e2f32;
-}
-
-.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton,
-.mx_SpaceRoomView_landing
- .mx_SpaceRoomDirectory_listHeader
- .mx_AccessibleButton {
- padding: 4px 12px;
- font-weight: 400;
-}
-
-.mx_SpaceRoomDirectory
- .mx_SpaceRoomDirectory_listHeader
- .mx_AccessibleButton
- + .mx_AccessibleButton,
-.mx_SpaceRoomView_landing
- .mx_SpaceRoomDirectory_listHeader
- .mx_AccessibleButton
- + .mx_AccessibleButton {
- margin-left: 16px;
-}
-
-.mx_SpaceRoomDirectory
- .mx_SpaceRoomDirectory_listHeader
- .mx_AccessibleButton_kind_danger_outline,
-.mx_SpaceRoomDirectory
- .mx_SpaceRoomDirectory_listHeader
- .mx_AccessibleButton_kind_primary_outline,
-.mx_SpaceRoomView_landing
- .mx_SpaceRoomDirectory_listHeader
- .mx_AccessibleButton_kind_danger_outline,
-.mx_SpaceRoomView_landing
- .mx_SpaceRoomDirectory_listHeader
- .mx_AccessibleButton_kind_primary_outline {
- padding: 3px 12px;
-}
-
-.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader > span,
-.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader > span {
- margin-left: auto;
-}
-
-.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_error,
-.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_error {
- position: relative;
- font-weight: 600;
- color: #ff4b55;
- font-size: 1.5rem;
- line-height: 1.8rem;
- margin: 20px auto 12px;
- padding-left: 24px;
- width: -webkit-max-content;
- width: -moz-max-content;
- width: max-content;
-}
-
-.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_error:before,
-.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_error:before {
- content: "";
- position: absolute;
- height: 16px;
- width: 16px;
- left: 0;
- background-image: url(../../img/element-icons/warning-badge.413c9a9.svg);
-}
-
-.mx_SpaceRoomDirectory_list {
- margin-top: 16px;
- padding-bottom: 40px;
-}
-
-.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomCount > h3 {
- display: inline;
- font-weight: 600;
- font-size: 1.8rem;
- line-height: 2.2rem;
- color: #2e2f32;
-}
-
-.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomCount > span {
- margin-left: 8px;
- font-size: 1.5rem;
- line-height: 2.4rem;
- color: #737d8c;
-}
-
-.mx_SpaceRoomDirectory_list
- .mx_SpaceRoomDirectory_subspace
- .mx_BaseAvatar_image {
- border-radius: 8px;
-}
-
-.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle {
- position: absolute;
- left: -1px;
- top: 10px;
- height: 16px;
- width: 16px;
- border-radius: 4px;
- background-color: #fff;
-}
-
-.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle:before {
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- height: 16px;
- width: 16px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- background-color: #8d99a5;
- -webkit-mask-size: 16px;
- mask-size: 16px;
- -webkit-transform: rotate(270deg);
- transform: rotate(270deg);
- -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
- mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
-}
-
-.mx_SpaceRoomDirectory_list
- .mx_SpaceRoomDirectory_subspace_toggle.mx_SpaceRoomDirectory_subspace_toggle_shown:before {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
-}
-
-.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_children {
- position: relative;
- padding-left: 12px;
-}
-
-.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile {
- position: relative;
- padding: 8px 16px;
- border-radius: 8px;
- min-height: 56px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- display: grid;
- grid-template-columns: 20px auto -webkit-max-content;
- grid-template-columns: 20px auto max-content;
- grid-column-gap: 8px;
- grid-row-gap: 6px;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_BaseAvatar {
- grid-row: 1;
- grid-column: 1;
-}
-
-.mx_SpaceRoomDirectory_list
- .mx_SpaceRoomDirectory_roomTile
- .mx_SpaceRoomDirectory_roomTile_name {
- font-weight: 600;
- font-size: 1.5rem;
- line-height: 1.8rem;
- grid-row: 1;
- grid-column: 2;
-}
-
-.mx_SpaceRoomDirectory_list
- .mx_SpaceRoomDirectory_roomTile
- .mx_SpaceRoomDirectory_roomTile_name
- .mx_InfoTooltip {
- display: inline;
- margin-left: 12px;
- color: #8d99a5;
- font-size: 1.2rem;
- line-height: 1.5rem;
-}
-
-.mx_SpaceRoomDirectory_list
- .mx_SpaceRoomDirectory_roomTile
- .mx_SpaceRoomDirectory_roomTile_name
- .mx_InfoTooltip
- .mx_InfoTooltip_icon {
- margin-right: 4px;
- position: relative;
- vertical-align: text-top;
-}
-
-.mx_SpaceRoomDirectory_list
- .mx_SpaceRoomDirectory_roomTile
- .mx_SpaceRoomDirectory_roomTile_name
- .mx_InfoTooltip
- .mx_InfoTooltip_icon:before {
- position: absolute;
- top: 0;
- left: 0;
-}
-
-.mx_SpaceRoomDirectory_list
- .mx_SpaceRoomDirectory_roomTile
- .mx_SpaceRoomDirectory_roomTile_info {
- font-size: 1.4rem;
- line-height: 1.8rem;
- color: #737d8c;
- grid-row: 2;
- grid-column: 1/3;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- overflow: hidden;
-}
-
-.mx_SpaceRoomDirectory_list
- .mx_SpaceRoomDirectory_roomTile
- .mx_SpaceRoomDirectory_actions {
- text-align: right;
- margin-left: 20px;
- grid-column: 3;
- grid-row: 1/3;
-}
-
-.mx_SpaceRoomDirectory_list
- .mx_SpaceRoomDirectory_roomTile
- .mx_SpaceRoomDirectory_actions
- .mx_AccessibleButton {
- line-height: 2.4rem;
- padding: 4px 16px;
- display: inline-block;
- visibility: hidden;
-}
-
-.mx_SpaceRoomDirectory_list
- .mx_SpaceRoomDirectory_roomTile
- .mx_SpaceRoomDirectory_actions
- .mx_AccessibleButton_kind_danger_outline,
-.mx_SpaceRoomDirectory_list
- .mx_SpaceRoomDirectory_roomTile
- .mx_SpaceRoomDirectory_actions
- .mx_AccessibleButton_kind_primary_outline {
- padding: 3px 16px;
-}
-
-.mx_SpaceRoomDirectory_list
- .mx_SpaceRoomDirectory_roomTile
- .mx_SpaceRoomDirectory_actions
- .mx_Checkbox {
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- vertical-align: middle;
- margin-left: 12px;
-}
-
-.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:hover {
- background-color: hsla(0, 0%, 91%, 0.77);
-}
-
-.mx_SpaceRoomDirectory_list
- .mx_SpaceRoomDirectory_roomTile:hover
- .mx_AccessibleButton {
- visibility: visible;
-}
-
-.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:before,
-.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_children:before {
- content: "";
- position: absolute;
- background-color: hsla(0, 0%, 91%, 0.77);
- width: 1px;
- height: 100%;
- left: 6px;
- top: 0;
-}
-
-.mx_SpaceRoomDirectory_list
- .mx_SpaceRoomDirectory_actions
- .mx_SpaceRoomDirectory_actionsText {
- font-weight: 400;
- font-size: 1.2rem;
- line-height: 1.5rem;
- color: #737d8c;
-}
-
-.mx_SpaceRoomDirectory_list > hr {
- border: none;
- height: 1px;
- background-color: rgba(141, 151, 165, 0.2);
- margin: 20px 0;
-}
-
-.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_createRoom {
- display: block;
- margin: 16px auto 0;
- width: -webkit-max-content;
- width: -moz-max-content;
- width: max-content;
-}
-
-.mx_SpaceRoomView .mx_MainSplit > div:first-child {
- padding: 80px 60px;
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- max-height: 100%;
- overflow-y: auto;
-}
-
-.mx_SpaceRoomView .mx_MainSplit > div:first-child h1 {
- margin: 0;
- font-size: 2.4rem;
- font-weight: 600;
- color: #2e2f32;
- width: -webkit-max-content;
- width: -moz-max-content;
- width: max-content;
-}
-
-.mx_SpaceRoomView
- .mx_MainSplit
- > div:first-child
- .mx_SpaceRoomView_description {
- font-size: 1.5rem;
- color: #737d8c;
- margin-top: 12px;
- margin-bottom: 24px;
- max-width: 428px;
-}
-
-.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_AddExistingToSpace {
- max-width: 428px;
-}
-
-.mx_SpaceRoomView
- .mx_MainSplit
- > div:first-child
- .mx_AddExistingToSpace
- .mx_AddExistingToSpace_content {
- height: calc(100vh - 360px);
- max-height: 400px;
-}
-
-.mx_SpaceRoomView
- .mx_MainSplit
- > div:first-child:not(.mx_SpaceRoomView_landing)
- .mx_SpaceFeedbackPrompt {
- width: 428px;
-}
-
-.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_SpaceRoomView_buttons {
- display: block;
- margin-top: 44px;
- width: 428px;
- text-align: right;
-}
-
-.mx_SpaceRoomView
- .mx_MainSplit
- > div:first-child
- .mx_SpaceRoomView_buttons
- .mx_AccessibleButton_hasKind {
- padding: 8px 22px;
- margin-left: 16px;
-}
-
-.mx_SpaceRoomView
- .mx_MainSplit
- > div:first-child
- .mx_SpaceRoomView_buttons
- input.mx_AccessibleButton {
- border: none;
-}
-
-.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_Field {
- max-width: 428px;
-}
-
-.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_Field + .mx_Field {
- margin-top: 28px;
-}
-
-.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_SpaceRoomView_errorText {
- font-weight: 600;
- font-size: 1.2rem;
- line-height: 1.5rem;
- color: #ff4b55;
- margin-bottom: 28px;
-}
-
-.mx_SpaceRoomView
- .mx_MainSplit
- > div:first-child
- .mx_AccessibleButton_disabled {
- cursor: not-allowed;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_preview {
- padding: 32px 24px !important;
- margin: auto;
- max-width: 480px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- -webkit-box-shadow: 2px 15px 30px rgba(0, 0, 0, 0.48);
- box-shadow: 2px 15px 30px rgba(0, 0, 0, 0.48);
- border-radius: 8px;
- position: relative;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_BetaCard_betaPill {
- position: absolute;
- right: 24px;
- top: 32px;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_preview
- .mx_SpaceRoomView_preview_spaceBetaPrompt {
- font-weight: 600;
- font-size: 1.4rem;
- line-height: 2.4rem;
- color: #2e2f32;
- margin-top: 24px;
- position: relative;
- padding-left: 24px;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_preview
- .mx_SpaceRoomView_preview_spaceBetaPrompt
- .mx_AccessibleButton_kind_link {
- display: inline;
- padding: 0;
- font-size: inherit;
- line-height: inherit;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_preview
- .mx_SpaceRoomView_preview_spaceBetaPrompt:before {
- content: "";
- position: absolute;
- height: 2.4rem;
- width: 20px;
- left: 0;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
- mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
- background-color: #737d8c;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- margin-bottom: 20px;
- font-size: 1.5rem;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_preview
- .mx_SpaceRoomView_preview_inviter
- > div {
- margin-left: 8px;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_preview
- .mx_SpaceRoomView_preview_inviter
- > div
- .mx_SpaceRoomView_preview_inviter_name {
- line-height: 1.8rem;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_preview
- .mx_SpaceRoomView_preview_inviter
- > div
- .mx_SpaceRoomView_preview_inviter_mxid {
- line-height: 2.4rem;
- color: #737d8c;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_preview
- > .mx_BaseAvatar
- > .mx_BaseAvatar_image,
-.mx_SpaceRoomView .mx_SpaceRoomView_preview > .mx_BaseAvatar_image {
- border-radius: 12px;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_preview h1.mx_SpaceRoomView_preview_name {
- margin: 20px 0 !important;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_topic {
- font-size: 1.4rem;
- line-height: 2.2rem;
- color: #737d8c;
- margin: 20px 0;
- max-height: 160px;
- overflow-y: auto;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_preview
- .mx_SpaceRoomView_preview_joinButtons {
- margin-top: 20px;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_preview
- .mx_SpaceRoomView_preview_joinButtons
- .mx_AccessibleButton {
- width: 200px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- padding: 14px 0;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_preview
- .mx_SpaceRoomView_preview_joinButtons
- .mx_AccessibleButton
- + .mx_AccessibleButton {
- margin-left: 20px;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_landing {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_landing
- > .mx_BaseAvatar
- > .mx_BaseAvatar_image,
-.mx_SpaceRoomView .mx_SpaceRoomView_landing > .mx_BaseAvatar_image {
- border-radius: 12px;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name {
- margin: 24px 0 16px;
- font-size: 1.5rem;
- color: #737d8c;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_landing
- .mx_SpaceRoomView_landing_name
- > span {
- display: inline-block;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_landing
- .mx_SpaceRoomView_landing_name
- .mx_SpaceRoomView_landing_nameRow {
- margin-top: 12px;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_landing
- .mx_SpaceRoomView_landing_name
- .mx_SpaceRoomView_landing_nameRow
- > h1 {
- display: inline-block;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_landing
- .mx_SpaceRoomView_landing_name
- .mx_SpaceRoomView_landing_inviter
- .mx_BaseAvatar {
- margin-right: 4px;
- vertical-align: middle;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_landing
- .mx_SpaceRoomView_landing_info
- .mx_SpaceRoomView_info {
- display: inline-block;
- margin: 0 auto 0 0;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_landing
- .mx_SpaceRoomView_landing_info
- .mx_FacePile {
- display: inline-block;
- margin-right: 12px;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_landing
- .mx_SpaceRoomView_landing_info
- .mx_FacePile
- .mx_FacePile_faces {
- cursor: pointer;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_landing
- .mx_SpaceRoomView_landing_info
- .mx_SpaceRoomView_landing_inviteButton {
- position: relative;
- padding: 4px 18px 4px 40px;
- line-height: 2.4rem;
- height: -webkit-min-content;
- height: -moz-min-content;
- height: min-content;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_landing
- .mx_SpaceRoomView_landing_info
- .mx_SpaceRoomView_landing_inviteButton:before {
- position: absolute;
- content: "";
- left: 8px;
- height: 16px;
- width: 16px;
- background: #fff;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 16px;
- mask-size: 16px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
- mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_landing
- .mx_SpaceRoomView_landing_info
- .mx_SpaceRoomView_landing_settingsButton {
- position: relative;
- margin-left: 16px;
- width: 24px;
- height: 24px;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_landing
- .mx_SpaceRoomView_landing_info
- .mx_SpaceRoomView_landing_settingsButton:before {
- position: absolute;
- content: "";
- left: 0;
- top: 0;
- height: 24px;
- width: 24px;
- background: #8d99a5;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
- mask-image: url(../../img/element-icons/settings.6b381af.svg);
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_topic {
- font-size: 1.5rem;
- margin-top: 12px;
- margin-bottom: 16px;
- white-space: pre-wrap;
- word-wrap: break-word;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_landing > hr {
- border: none;
- height: 1px;
- background-color: hsla(0, 0%, 91%, 0.77);
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SearchBox {
- margin: 0 0 20px;
- -webkit-box-flex: 0;
- -ms-flex: 0;
- flex: 0;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceFeedbackPrompt {
- margin-bottom: 16px;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceFeedbackPrompt + hr {
- display: none;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_list {
- display: contents;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton {
- position: relative;
- padding: 16px 32px 16px 72px;
- width: 432px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- border-radius: 8px;
- border: 1px solid #e7e7e7;
- font-size: 1.5rem;
- margin: 20px 0;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton > h3 {
- font-weight: 600;
- margin: 0 0 4px;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton > span {
- color: #737d8c;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton:before {
- position: absolute;
- content: "";
- width: 32px;
- height: 32px;
- top: 24px;
- left: 20px;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 24px;
- mask-size: 24px;
- background-color: #8d99a5;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton:hover {
- border-color: #0dbd8b;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_privateScope
- > .mx_AccessibleButton:hover:before {
- background-color: #0dbd8b;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_privateScope
- > .mx_AccessibleButton:hover
- > span {
- color: #2e2f32;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_privateScope
- .mx_SpaceRoomView_privateScope_justMeButton:before {
- -webkit-mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
- mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_privateScope
- .mx_SpaceRoomView_privateScope_meAndMyTeammatesButton:before {
- -webkit-mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
- mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_betaWarning {
- padding: 12px 12px 12px 54px;
- position: relative;
- font-size: 1.5rem;
- line-height: 2.4rem;
- width: 432px;
- border-radius: 8px;
- background-color: #f7f7f7;
- color: #737d8c;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_betaWarning > h3 {
- font-weight: 600;
- font-size: inherit;
- line-height: inherit;
- margin: 0;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_betaWarning > p {
- font-size: inherit;
- line-height: inherit;
- margin: 0;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_betaWarning:before {
- -webkit-mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
- mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- content: "";
- width: 20px;
- height: 20px;
- position: absolute;
- top: 14px;
- left: 14px;
- background-color: #737d8c;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_inviteTeammates
- .mx_SpaceRoomView_inviteTeammates_betaDisclaimer {
- padding: 58px 16px 16px;
- position: relative;
- border-radius: 8px;
- background-color: #f3f8fd;
- max-width: 428px;
- margin: 20px 0 30px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_inviteTeammates
- .mx_SpaceRoomView_inviteTeammates_betaDisclaimer
- .mx_BetaCard_betaPill {
- position: absolute;
- left: 16px;
- top: 16px;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_inviteTeammates
- .mx_SpaceRoomView_inviteTeammates_buttons {
- color: #737d8c;
- margin-top: 28px;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_inviteTeammates
- .mx_SpaceRoomView_inviteTeammates_buttons
- .mx_AccessibleButton {
- position: relative;
- display: inline-block;
- padding-left: 32px;
- line-height: 24px;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_inviteTeammates
- .mx_SpaceRoomView_inviteTeammates_buttons
- .mx_AccessibleButton:before {
- content: "";
- position: absolute;
- height: 24px;
- width: 24px;
- top: 0;
- left: 0;
- background-color: #737d8c;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_inviteTeammates
- .mx_SpaceRoomView_inviteTeammates_buttons
- .mx_AccessibleButton
- + .mx_AccessibleButton {
- margin-left: 32px;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_inviteTeammates
- .mx_SpaceRoomView_inviteTeammates_buttons
- .mx_SpaceRoomView_inviteTeammates_inviteDialogButton:before {
- -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
- mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
-}
-
-.mx_SpaceRoomView_info {
- color: #737d8c;
- font-size: 1.5rem;
- line-height: 2.4rem;
- margin: 20px 0;
-}
-
-.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private,
-.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public {
- padding-left: 20px;
- position: relative;
-}
-
-.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private:before,
-.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public:before {
- position: absolute;
- content: "";
- width: 20px;
- height: 20px;
- top: 0;
- left: -2px;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background-color: #8d99a5;
-}
-
-.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public:before {
- -webkit-mask-size: 12px;
- mask-size: 12px;
- -webkit-mask-image: url(../../img/globe.8201f08.svg);
- mask-image: url(../../img/globe.8201f08.svg);
-}
-
-.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private:before {
- -webkit-mask-size: 14px;
- mask-size: 14px;
- -webkit-mask-image: url(../../img/element-icons/lock.1f264bd.svg);
- mask-image: url(../../img/element-icons/lock.1f264bd.svg);
-}
-
-.mx_SpaceRoomView_info .mx_AccessibleButton_kind_link {
- color: inherit;
- position: relative;
- padding-left: 16px;
-}
-
-.mx_SpaceRoomView_info .mx_AccessibleButton_kind_link:before {
- content: "·";
- position: absolute;
- left: 6px;
-}
-
-.mx_SpaceFeedbackPrompt {
- margin-top: 18px;
- margin-bottom: 12px;
-}
-
-.mx_SpaceFeedbackPrompt > hr {
- border: none;
- border-top: 1px solid #e7e7e7;
- margin-bottom: 12px;
-}
-
-.mx_SpaceFeedbackPrompt > div {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- font-size: 1.5rem;
- line-height: 2.4rem;
-}
-
-.mx_SpaceFeedbackPrompt > div > span {
- color: #737d8c;
- position: relative;
- padding-left: 32px;
- font-size: inherit;
- line-height: inherit;
- margin-right: auto;
-}
-
-.mx_SpaceFeedbackPrompt > div > span:before {
- content: "";
- position: absolute;
- left: 0;
- top: 2px;
- height: 20px;
- width: 20px;
- background-color: #737d8c;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
- mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_SpaceFeedbackPrompt > div .mx_AccessibleButton_kind_link {
- color: #0dbd8b;
- position: relative;
- padding: 0 0 0 24px;
- margin-left: 8px;
- font-size: inherit;
- line-height: inherit;
-}
-
-.mx_SpaceFeedbackPrompt > div .mx_AccessibleButton_kind_link:before {
- content: "";
- position: absolute;
- left: 0;
- height: 16px;
- width: 16px;
- background-color: #0dbd8b;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-image: url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);
- mask-image: url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_TabbedView {
- padding: 0 0 0 16px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- margin: 8px 0 0;
-}
-
-.mx_TabbedView,
-.mx_TabbedView_tabsOnLeft {
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_TabbedView_tabsOnLeft {
- position: absolute;
-}
-
-.mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabels {
- width: 170px;
- max-width: 170px;
- position: fixed;
-}
-
-.mx_TabbedView_tabsOnLeft .mx_TabbedView_tabPanel {
- margin-left: 240px;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabel_active {
- background-color: #0dbd8b;
- color: #fff;
-}
-
-.mx_TabbedView_tabsOnLeft
- .mx_TabbedView_tabLabel_active
- .mx_TabbedView_maskedIcon:before {
- background-color: #fff;
-}
-
-.mx_TabbedView_tabsOnLeft .mx_TabbedView_maskedIcon {
- width: 16px;
- height: 16px;
- margin-left: 8px;
- margin-right: 16px;
-}
-
-.mx_TabbedView_tabsOnLeft .mx_TabbedView_maskedIcon:before {
- -webkit-mask-size: 16px;
- mask-size: 16px;
- width: 16px;
- height: 16px;
-}
-
-.mx_TabbedView_tabsOnTop {
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabels {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- margin-bottom: 8px;
-}
-
-.mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabel {
- padding-left: 0;
- padding-right: 52px;
-}
-
-.mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabel .mx_TabbedView_tabLabel_text {
- font-size: 15px;
- color: #8d99a5;
-}
-
-.mx_TabbedView_tabsOnTop .mx_TabbedView_tabPanel {
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
-}
-
-.mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabel_active,
-.mx_TabbedView_tabsOnTop
- .mx_TabbedView_tabLabel_active
- .mx_TabbedView_tabLabel_text {
- color: #0dbd8b;
-}
-
-.mx_TabbedView_tabsOnTop
- .mx_TabbedView_tabLabel_active
- .mx_TabbedView_maskedIcon:before {
- background-color: #0dbd8b;
-}
-
-.mx_TabbedView_tabsOnTop .mx_TabbedView_maskedIcon {
- width: 22px;
- height: 22px;
- margin-left: 0;
- margin-right: 8px;
-}
-
-.mx_TabbedView_tabsOnTop .mx_TabbedView_maskedIcon:before {
- -webkit-mask-size: 22px;
- mask-size: 22px;
- width: inherit;
- height: inherit;
-}
-
-.mx_TabbedView_tabLabels {
- color: #45474a;
-}
-
-.mx_TabbedView_tabLabel {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- vertical-align: text-top;
- cursor: pointer;
- padding: 8px 0;
- border-radius: 8px;
- font-size: 1.3rem;
- position: relative;
-}
-
-.mx_TabbedView_maskedIcon {
- display: inline-block;
-}
-
-.mx_TabbedView_maskedIcon:before {
- display: inline-block;
- background-color: #c1c6cd;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- content: "";
-}
-
-.mx_TabbedView_tabLabel_text {
- vertical-align: middle;
-}
-
-.mx_TabbedView_tabPanel {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_TabbedView_tabPanel,
-.mx_TabbedView_tabPanelContent {
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- min-height: 0;
-}
-
-.mx_TabbedView_tabPanelContent {
- overflow: auto;
-}
-
-.mx_ToastContainer {
- position: absolute;
- top: 0;
- left: 70px;
- z-index: 101;
- padding: 4px;
- display: grid;
- grid-template-rows: 1fr 14px 6px;
-}
-
-.mx_ToastContainer.mx_ToastContainer_stacked:before {
- content: "";
- margin: 0 4px;
- grid-row: 2/4;
-}
-
-.mx_ToastContainer .mx_Toast_toast,
-.mx_ToastContainer.mx_ToastContainer_stacked:before {
- grid-column: 1;
- background-color: #f2f5f8;
- -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
- border-radius: 8px;
-}
-
-.mx_ToastContainer .mx_Toast_toast {
- grid-row: 1/3;
- color: #2e2f32;
- overflow: hidden;
- display: grid;
- grid-template-columns: 22px 1fr;
- grid-column-gap: 8px;
- -webkit-column-gap: 8px;
- -moz-column-gap: 8px;
- column-gap: 8px;
- grid-row-gap: 4px;
- row-gap: 4px;
- padding: 8px;
-}
-
-.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon:after,
-.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon:before {
- content: "";
- width: 22px;
- height: 22px;
- grid-column: 1;
- grid-row: 1;
- -webkit-mask-size: 100%;
- mask-size: 100%;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background-size: 100%;
- background-repeat: no-repeat;
-}
-
-.mx_ToastContainer
- .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification:after {
- -webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
- mask-image: url(../../img/e2e/normal.76f0c09.svg);
- background-color: #2e2f32;
-}
-
-.mx_ToastContainer
- .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification_warning:before {
- background-color: #fff;
- -webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
- mask-image: url(../../img/e2e/normal.76f0c09.svg);
- -webkit-mask-size: 80%;
- mask-size: 80%;
-}
-
-.mx_ToastContainer
- .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification_warning:after {
- -webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
- mask-image: url(../../img/e2e/warning.78bb264.svg);
- background-color: #ff4b55;
-}
-
-.mx_ToastContainer
- .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_secure_backup:after {
- -webkit-mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
- mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
- background-color: #2e2f32;
-}
-
-.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_body,
-.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_title {
- grid-column: 2;
-}
-
-.mx_ToastContainer .mx_Toast_toast:not(.mx_Toast_hasIcon) {
- padding-left: 12px;
-}
-
-.mx_ToastContainer .mx_Toast_toast:not(.mx_Toast_hasIcon) .mx_Toast_title {
- grid-column: 1/-1;
-}
-
-.mx_ToastContainer .mx_Toast_toast .mx_Toast_description,
-.mx_ToastContainer .mx_Toast_toast .mx_Toast_title {
- padding-right: 8px;
-}
-
-.mx_ToastContainer .mx_Toast_toast .mx_Toast_title {
- width: 100%;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.mx_ToastContainer .mx_Toast_toast .mx_Toast_title h2 {
- grid-column: 1/3;
- grid-row: 1;
- margin: 0;
- font-size: 1.5rem;
- font-weight: 600;
- display: inline;
- width: auto;
- vertical-align: middle;
-}
-
-.mx_ToastContainer .mx_Toast_toast .mx_Toast_title span {
- padding-left: 8px;
- float: right;
- font-size: 1.2rem;
- line-height: 2.2rem;
- color: #61708b;
-}
-
-.mx_ToastContainer .mx_Toast_toast .mx_Toast_body {
- grid-column: 1/3;
- grid-row: 2;
-}
-
-.mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons {
- float: right;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons .mx_AccessibleButton {
- min-width: 96px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.mx_ToastContainer
- .mx_Toast_toast
- .mx_Toast_buttons
- .mx_AccessibleButton
- + .mx_AccessibleButton {
- margin-left: 5px;
-}
-
-.mx_ToastContainer .mx_Toast_toast .mx_Toast_description {
- max-width: 272px;
- overflow: hidden;
- text-overflow: ellipsis;
- margin: 4px 0 11px;
- font-size: 1.2rem;
-}
-
-.mx_ToastContainer
- .mx_Toast_toast
- .mx_Toast_description
- .mx_AccessibleButton_kind_link {
- font-size: inherit;
- padding: 0;
-}
-
-.mx_ToastContainer .mx_Toast_toast .mx_Toast_description a {
- text-decoration: none;
-}
-
-.mx_ToastContainer .mx_Toast_toast .mx_Toast_detail {
- color: #737d8c;
-}
-
-.mx_ToastContainer .mx_Toast_toast .mx_Toast_deviceID {
- font-size: 1rem;
-}
-
-.mx_UploadBar {
- padding-left: 65px;
- position: relative;
-}
-
-.mx_UploadBar .mx_ProgressBar {
- width: calc(100% - 40px);
-}
-
-.mx_UploadBar_filename {
- margin-top: 5px;
- color: #61708b;
- position: relative;
- padding-left: 22px;
- font-size: 1.5rem;
- vertical-align: middle;
-}
-
-.mx_UploadBar_filename:before {
- content: "";
- height: 18px;
- width: 18px;
- left: 0;
- -webkit-mask-image: url(../../img/element-icons/upload.e2a53e0.svg);
- mask-image: url(../../img/element-icons/upload.e2a53e0.svg);
-}
-
-.mx_UploadBar_cancel,
-.mx_UploadBar_filename:before {
- position: absolute;
- top: 0;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- background-color: #61708b;
-}
-
-.mx_UploadBar_cancel {
- right: 0;
- height: 16px;
- width: 16px;
- margin-right: 16px;
- -webkit-mask-image: url(../../img/icons-close.11ff07c.svg);
- mask-image: url(../../img/icons-close.11ff07c.svg);
-}
-
-.mx_UserMenu {
- padding-right: 6px;
-}
-
-.mx_UserMenu.mx_UserMenu_prototype {
- margin-bottom: 6px;
- padding-right: 0;
-}
-
-.mx_UserMenu.mx_UserMenu_prototype .mx_UserMenu_headerButtons {
- margin-right: 2px;
-}
-
-.mx_UserMenu.mx_UserMenu_prototype:after {
- content: "";
- border-bottom: 1px solid #2e2f32;
- opacity: 0.2;
- display: block;
- padding-top: 8px;
-}
-
-.mx_UserMenu .mx_UserMenu_headerButtons {
- width: 16px;
- height: 16px;
- position: relative;
- display: block;
-}
-
-.mx_UserMenu .mx_UserMenu_headerButtons:before {
- content: "";
- width: 16px;
- height: 16px;
- position: absolute;
- top: 0;
- left: 0;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background: #8d99a5;
- -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
- mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
-}
-
-.mx_UserMenu .mx_UserMenu_row {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userAvatarContainer {
- position: relative;
- margin-right: 8px;
- height: 32px;
- padding: 3px 0;
-}
-
-.mx_UserMenu
- .mx_UserMenu_row
- .mx_UserMenu_userAvatarContainer
- .mx_UserMenu_userAvatar {
- border-radius: 32px;
- -o-object-fit: cover;
- object-fit: cover;
-}
-
-.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- min-width: 0;
-}
-
-.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_subUserName,
-.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_userName {
- display: block;
-}
-
-.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_subUserName {
- color: #61708b;
- font-size: 1.3rem;
- line-height: 1.8rem;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
-}
-
-.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userName {
- font-weight: 600;
- font-size: 1.5rem;
- line-height: 2rem;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
-}
-
-.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd {
- width: 24px;
- height: 24px;
- margin-right: 8px;
- position: relative;
-}
-
-.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd:before {
- content: "";
- position: absolute;
- width: 24px;
- height: 24px;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background: #61708b;
-}
-
-.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd.mx_UserMenu_dnd_noisy:before {
- -webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
- mask-image: url(../../img/element-icons/notifications.d298b39.svg);
-}
-
-.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd.mx_UserMenu_dnd_muted:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);
- mask-image: url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);
-}
-
-.mx_UserMenu.mx_UserMenu_minimized {
- padding-right: 0;
-}
-
-.mx_UserMenu.mx_UserMenu_minimized .mx_UserMenu_userAvatarContainer {
- margin-right: 0;
-}
-
-.mx_UserMenu_contextMenu {
- width: 258px;
-}
-
-.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype {
- padding-bottom: 16px;
-}
-
-.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype
- .mx_UserMenu_contextMenu_header {
- padding-bottom: 0;
- padding-top: 16px;
-}
-
-.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype
- .mx_UserMenu_contextMenu_header:nth-child(n + 2) {
- padding-top: 8px;
-}
-
-.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype hr {
- width: 85%;
- opacity: 0.2;
- border: none;
- border-bottom: 1px solid #2e2f32;
-}
-
-.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu
- > .mx_IconizedContextMenu_optionList {
- margin-top: 4px;
-}
-
-.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu
- > .mx_IconizedContextMenu_optionList:before {
- border: none;
-}
-
-.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu
- > .mx_IconizedContextMenu_optionList
- > .mx_AccessibleButton {
- padding-top: 2px;
- padding-bottom: 2px;
-}
-
-.mx_UserMenu_contextMenu.mx_IconizedContextMenu
- .mx_IconizedContextMenu_optionList_red
- .mx_AccessibleButton {
- padding-top: 16px;
- padding-bottom: 16px;
-}
-
-.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header {
- padding: 20px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_UserMenu_contextMenu
- .mx_UserMenu_contextMenu_header
- .mx_UserMenu_contextMenu_name {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- width: calc(100% - 40px);
-}
-
-.mx_UserMenu_contextMenu
- .mx_UserMenu_contextMenu_header
- .mx_UserMenu_contextMenu_name
- * {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- width: 100%;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
-}
-
-.mx_UserMenu_contextMenu
- .mx_UserMenu_contextMenu_header
- .mx_UserMenu_contextMenu_name
- .mx_UserMenu_contextMenu_displayName {
- font-weight: 700;
- font-size: 1.5rem;
- line-height: 2rem;
-}
-
-.mx_UserMenu_contextMenu
- .mx_UserMenu_contextMenu_header
- .mx_UserMenu_contextMenu_name
- .mx_UserMenu_contextMenu_userId {
- font-size: 1.5rem;
- line-height: 2.4rem;
-}
-
-.mx_UserMenu_contextMenu
- .mx_UserMenu_contextMenu_header
- .mx_UserMenu_contextMenu_themeButton {
- min-width: 32px;
- max-width: 32px;
- width: 32px;
- height: 32px;
- margin-left: 8px;
- border-radius: 32px;
- background-color: #e3e8f0;
- cursor: pointer;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_UserMenu_contextMenu
- .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts,
-.mx_UserMenu_contextMenu
- .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_hostingLink {
- padding-top: 0;
-}
-
-.mx_UserMenu_contextMenu
- .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts {
- display: inline-block;
-}
-
-.mx_UserMenu_contextMenu
- .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts
- > span {
- font-weight: 600;
- display: block;
-}
-
-.mx_UserMenu_contextMenu
- .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts
- > span
- + span {
- margin-top: 8px;
-}
-
-.mx_UserMenu_contextMenu
- .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts
- .mx_AccessibleButton_kind_link {
- font-weight: 400;
- font-size: inherit;
- padding: 0;
-}
-
-.mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon {
- width: 16px;
- height: 16px;
- display: block;
-}
-
-.mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon:before {
- content: "";
- width: 16px;
- height: 16px;
- display: block;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background: #2e2f32;
-}
-
-.mx_UserMenu_contextMenu .mx_UserMenu_iconHome:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/home.1b4edd5.svg);
- mask-image: url(../../img/element-icons/roomlist/home.1b4edd5.svg);
-}
-
-.mx_UserMenu_contextMenu .mx_UserMenu_iconHosting:before {
- -webkit-mask-image: url(../../img/element-icons/brands/element.182040d.svg);
- mask-image: url(../../img/element-icons/brands/element.182040d.svg);
-}
-
-.mx_UserMenu_contextMenu .mx_UserMenu_iconBell:before {
- -webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
- mask-image: url(../../img/element-icons/notifications.d298b39.svg);
-}
-
-.mx_UserMenu_contextMenu .mx_UserMenu_iconLock:before {
- -webkit-mask-image: url(../../img/element-icons/security.66f2fa6.svg);
- mask-image: url(../../img/element-icons/security.66f2fa6.svg);
-}
-
-.mx_UserMenu_contextMenu .mx_UserMenu_iconSettings:before {
- -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
- mask-image: url(../../img/element-icons/settings.6b381af.svg);
-}
-
-.mx_UserMenu_contextMenu .mx_UserMenu_iconArchive:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/archived.226584d.svg);
- mask-image: url(../../img/element-icons/roomlist/archived.226584d.svg);
-}
-
-.mx_UserMenu_contextMenu .mx_UserMenu_iconMessage:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/feedback.b9a3f53.svg);
- mask-image: url(../../img/element-icons/roomlist/feedback.b9a3f53.svg);
-}
-
-.mx_UserMenu_contextMenu .mx_UserMenu_iconSignOut:before {
- -webkit-mask-image: url(../../img/element-icons/leave.bb917e7.svg);
- mask-image: url(../../img/element-icons/leave.bb917e7.svg);
-}
-
-.mx_UserMenu_contextMenu .mx_UserMenu_iconMembers:before {
- -webkit-mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
- mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
-}
-
-.mx_UserMenu_contextMenu .mx_UserMenu_iconInvite:before {
- -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
- mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
-}
-
-.mx_ViewSource_separator {
- clear: both;
- border-bottom: 1px solid #e5e5e5;
- padding-top: 0.7em;
- padding-bottom: 0.7em;
-}
-
-.mx_ViewSource_heading {
- font-size: 1.7rem;
- font-weight: 400;
- color: #2e2f32;
- margin-top: 0.7em;
-}
-
-.mx_ViewSource pre {
- text-align: left;
- font-size: 1.2rem;
- padding: 0.5em 1em;
- word-wrap: break-word;
- white-space: pre-wrap;
-}
-
-.mx_ViewSource_details {
- margin-top: 0.8em;
-}
-
-.mx_CompleteSecurity_header {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_CompleteSecurity_headerIcon {
- width: 24px;
- height: 24px;
- margin-right: 4px;
- position: relative;
-}
-
-.mx_CompleteSecurity_heroIcon {
- width: 128px;
- height: 128px;
- position: relative;
- margin: 0 auto;
-}
-
-.mx_CompleteSecurity_body {
- font-size: 1.5rem;
-}
-
-.mx_CompleteSecurity_waiting {
- color: #8d99a5;
-}
-
-.mx_CompleteSecurity_actionRow {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: end;
- -ms-flex-pack: end;
- justify-content: flex-end;
- margin-top: 2.8rem;
-}
-
-.mx_CompleteSecurity_actionRow .mx_AccessibleButton {
- -webkit-margin-start: 18px;
- margin-inline-start: 18px;
-}
-
-.mx_CompleteSecurity_actionRow .mx_AccessibleButton.warning {
- color: #ff4b55;
-}
-
-.mx_Login_submit {
- vertical-align: middle;
- border: 0;
- border-radius: 8px;
- font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
- Helvetica, Sans-Serif, Noto Color Emoji;
- font-size: 1.4rem;
- color: #fff;
- background-color: #0dbd8b;
- width: auto;
- padding: 7px 1.5em;
- cursor: pointer;
- display: inline-block;
- outline: none;
- width: 100%;
- margin-top: 24px;
- margin-bottom: 24px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- text-align: center;
-}
-
-.mx_Login_submit:disabled {
- opacity: 0.3;
- cursor: default;
-}
-
-.mx_Login_loader {
- display: inline;
- position: relative;
- top: 2px;
- left: 8px;
-}
-
-.mx_Login_loader .mx_Spinner {
- display: inline;
-}
-
-.mx_Login_loader .mx_Spinner img {
- width: 16px;
- height: 16px;
-}
-
-.mx_Login_error {
- color: #ff4b55;
- font-weight: 700;
- text-align: center;
- margin-top: 12px;
- margin-bottom: 12px;
-}
-
-.mx_Login_error.mx_Login_serverError {
- text-align: left;
- font-weight: 400;
-}
-
-.mx_Login_error.mx_Login_serverError.mx_Login_serverErrorNonFatal {
- color: #ff8d13;
-}
-
-.mx_Login_type_container {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- color: #232f32;
-}
-
-.mx_Login_type_container .mx_Field {
- margin: 0;
-}
-
-.mx_Login_type_label {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
-}
-
-.mx_Login_underlinedServerName {
- width: -webkit-max-content;
- width: -moz-max-content;
- width: max-content;
- border-bottom: 1px dashed #0dbd8b;
-}
-
-div.mx_AccessibleButton_kind_link.mx_Login_forgot {
- display: block;
- margin: 0 auto;
- font-size: inherit;
- padding: 0;
-}
-
-div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
- cursor: not-allowed;
-}
-
-.mx_MediaBody.mx_AudioPlayer_container {
- padding: 16px 12px 12px;
-}
-
-.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_primaryContainer {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_MediaBody.mx_AudioPlayer_container
- .mx_AudioPlayer_primaryContainer
- .mx_PlayPauseButton {
- margin-right: 8px;
-}
-
-.mx_MediaBody.mx_AudioPlayer_container
- .mx_AudioPlayer_primaryContainer
- .mx_AudioPlayer_mediaInfo {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- overflow: hidden;
-}
-
-.mx_MediaBody.mx_AudioPlayer_container
- .mx_AudioPlayer_primaryContainer
- .mx_AudioPlayer_mediaInfo
- > * {
- display: block;
-}
-
-.mx_MediaBody.mx_AudioPlayer_container
- .mx_AudioPlayer_primaryContainer
- .mx_AudioPlayer_mediaInfo
- .mx_AudioPlayer_mediaName {
- color: #2e2f32;
- font-size: 1.5rem;
- line-height: 1.5rem;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- padding-bottom: 4px;
-}
-
-.mx_MediaBody.mx_AudioPlayer_container
- .mx_AudioPlayer_primaryContainer
- .mx_AudioPlayer_mediaInfo
- .mx_AudioPlayer_byline {
- font-size: 1.2rem;
- line-height: 1.2rem;
-}
-
-.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_seek {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_seek .mx_SeekBar {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
-}
-
-.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_seek .mx_Clock {
- width: 4.2rem;
- min-width: 4.2rem;
- padding-left: 4px;
- text-align: right;
-}
-
-.mx_PlayPauseButton {
- position: relative;
- width: 32px;
- height: 32px;
- min-width: 32px;
- min-height: 32px;
- border-radius: 32px;
- background-color: #f4f6fa;
-}
-
-.mx_PlayPauseButton:before {
- content: "";
- position: absolute;
- background-color: #737d8c;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
-}
-
-.mx_PlayPauseButton.mx_PlayPauseButton_disabled:before {
- opacity: 0.5;
-}
-
-.mx_PlayPauseButton.mx_PlayPauseButton_play:before {
- width: 13px;
- height: 16px;
- top: 8px;
- left: 12px;
- -webkit-mask-image: url(../../img/element-icons/play.a72552b.svg);
- mask-image: url(../../img/element-icons/play.a72552b.svg);
-}
-
-.mx_PlayPauseButton.mx_PlayPauseButton_pause:before {
- width: 10px;
- height: 12px;
- top: 10px;
- left: 11px;
- -webkit-mask-image: url(../../img/element-icons/pause.c4c0886.svg);
- mask-image: url(../../img/element-icons/pause.c4c0886.svg);
-}
-
-.mx_MediaBody.mx_VoiceMessagePrimaryContainer {
- padding-right: 11px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- contain: content;
-}
-
-.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar {
- background-color: #c1c6cd;
- height: 100%;
- -webkit-transform: scaleY(max(0.05, var(--barHeight)));
- transform: scaleY(max(0.05, var(--barHeight)));
-}
-
-.mx_MediaBody.mx_VoiceMessagePrimaryContainer
- .mx_Waveform
- .mx_Waveform_bar.mx_Waveform_bar_100pct {
- -webkit-transition: background-color 0.25s ease;
- transition: background-color 0.25s ease;
- background-color: #737d8c;
-}
-
-.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_Clock {
- width: 4.2rem;
- padding-right: 6px;
- padding-left: 8px;
-}
-
-.mx_MediaBody.mx_VoiceMessagePrimaryContainer.mx_VoiceMessagePrimaryContainer_noWaveform {
- max-width: 162px;
-}
-
-.mx_SeekBar {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- width: 100%;
- height: 1px;
- background: #c1c6cd;
- outline: none;
- position: relative;
- cursor: pointer;
-}
-
-.mx_SeekBar::-webkit-slider-thumb {
- -webkit-appearance: none;
- appearance: none;
- width: 8px;
- height: 8px;
- border-radius: 8px;
- background-color: #8d99a5;
- cursor: pointer;
-}
-
-.mx_SeekBar::-moz-range-thumb {
- width: 8px;
- height: 8px;
- border-radius: 8px;
- background-color: #8d99a5;
- cursor: pointer;
- border: none;
-}
-
-.mx_SeekBar:before {
- content: "";
- background-color: #8d99a5;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 1px;
- -webkit-transform-origin: 0 100%;
- transform-origin: 0 100%;
- -webkit-transform: scaleX(var(--fillTo));
- transform: scaleX(var(--fillTo));
-}
-
-.mx_SeekBar::-moz-range-progress {
- background-color: #8d99a5;
- height: 1px;
-}
-
-.mx_SeekBar:disabled {
- opacity: 0.5;
-}
-
-.mx_SeekBar:after {
- content: "";
- position: absolute;
- top: -6px;
- bottom: -6px;
- left: 0;
- right: 0;
-}
-
-.mx_Waveform {
- position: relative;
- height: 30px;
- top: 1px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- overflow: hidden;
-}
-
-.mx_Waveform .mx_Waveform_bar {
- width: 0;
- border: 1px solid transparent;
- border-radius: 2px;
- min-height: 0;
- max-height: 100%;
- margin-left: 1px;
- margin-right: 1px;
-}
-
-.mx_AuthBody {
- width: 500px;
- font-size: 1.2rem;
- color: #61708b;
- background-color: #fff;
- border-radius: 0 4px 4px 0;
- padding: 25px 60px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.mx_AuthBody h2 {
- font-size: 2.4rem;
- font-weight: 600;
- margin-top: 8px;
- color: #232f32;
-}
-
-.mx_AuthBody h3 {
- font-size: 1.4rem;
- font-weight: 600;
- color: #61708b;
-}
-
-.mx_AuthBody h3.mx_AuthBody_centered {
- text-align: center;
-}
-
-.mx_AuthBody a:hover,
-.mx_AuthBody a:link,
-.mx_AuthBody a:visited {
- color: #0dbd8b;
- text-decoration: none;
-}
-
-.mx_AuthBody input[type="password"],
-.mx_AuthBody input[type="text"] {
- color: #232f32;
-}
-
-.mx_AuthBody .mx_Field input,
-.mx_AuthBody .mx_Field select {
- color: #232f32;
- background-color: #fff;
-}
-
-.mx_AuthBody .mx_Field label {
- color: #232f32;
-}
-
-.mx_AuthBody .mx_Field input:not(:-moz-placeholder-shown) + label,
-.mx_AuthBody .mx_Field textarea:not(:-moz-placeholder-shown) + label {
- background-color: #fff;
-}
-
-.mx_AuthBody .mx_Field input:not(:-ms-input-placeholder) + label,
-.mx_AuthBody .mx_Field textarea:not(:-ms-input-placeholder) + label {
- background-color: #fff;
-}
-
-.mx_AuthBody .mx_Field_labelAlwaysTopLeft label,
-.mx_AuthBody .mx_Field input:focus + label,
-.mx_AuthBody .mx_Field input:not(:placeholder-shown) + label,
-.mx_AuthBody .mx_Field select + label,
-.mx_AuthBody .mx_Field textarea:focus + label,
-.mx_AuthBody .mx_Field textarea:not(:placeholder-shown) + label {
- background-color: #fff;
-}
-
-.mx_AuthBody input.error {
- color: #ff4b55;
-}
-
-.mx_AuthBody .mx_Field input {
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.mx_AuthBody .mx_Field_select:before {
- background-color: #232f32;
-}
-
-.mx_AuthBody .mx_Dropdown {
- color: #232f32;
-}
-
-.mx_AuthBody .mx_Dropdown_arrow {
- background: #232f32;
-}
-
-.mx_AuthBody .mx_Dropdown_menu {
- background-color: #fff;
-}
-
-.mx_AuthBody .mx_Dropdown_menu .mx_Dropdown_option_highlight {
- background-color: #ddd;
-}
-
-.mx_AuthBody_fieldRow {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- margin-bottom: 10px;
-}
-
-.mx_AuthBody_fieldRow > .mx_Field {
- margin: 0 5px;
-}
-
-.mx_AuthBody_fieldRow > .mx_Field:first-child {
- margin-left: 0;
-}
-
-.mx_AuthBody_fieldRow > .mx_Field:last-child {
- margin-right: 0;
-}
-
-.mx_AuthBody_paddedFooter {
- height: 80px;
- padding-top: 28px;
- text-align: center;
-}
-
-.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_title {
- margin-top: 16px;
- font-size: 1.5rem;
- line-height: 2.4rem;
-}
-
-.mx_AuthBody_paddedFooter
- .mx_AuthBody_paddedFooter_title
- .mx_InlineSpinner
- img {
- vertical-align: sub;
- margin-right: 5px;
-}
-
-.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_subtitle {
- margin-top: 8px;
- font-size: 1rem;
- line-height: 1.4rem;
-}
-
-.mx_AuthBody_changeFlow {
- display: block;
- text-align: center;
- width: 100%;
-}
-
-.mx_AuthBody_changeFlow > a {
- font-weight: 600;
-}
-
-.mx_SSOButtons + .mx_AuthBody_changeFlow {
- margin-top: 24px;
-}
-
-.mx_AuthBody_spinner {
- margin: 1em 0;
-}
-
-@media only screen and (max-width: 480px) {
- .mx_AuthBody {
+/* global __webpack_hash__ */
+
+import ThemeWatcher from "../../settings/watchers/ThemeWatcher";
+
+const getExportCSS = async (): Promise<string> => {
+ const theme = new ThemeWatcher().getEffectiveTheme();
+ const hash = __webpack_hash__;
+ const bundle = await fetch(`bundles/${hash}/bundle.css`);
+ const bundleCSS = await bundle.text();
+ let themeCSS: string;
+ if (theme === 'light') {
+ const res = await fetch(`bundles/${hash}/theme-light.css`);
+ themeCSS = await res.text();
+ } else {
+ const res = await fetch(`bundles/${hash}/theme-dark.css`);
+ themeCSS = await res.text();
+ }
+ const fontFaceRegex = /@font-face {.*?}/sg;
+ themeCSS.replace(fontFaceRegex, '');
+ themeCSS.replace(
+ /font-family: Inter/g,
+ `font-family: -apple-system, BlinkMacSystemFont, avenir next,
+ avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif`,
+ );
+ themeCSS.replace(
+ /font-family: Inconsolata/g,
+ "font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace",
+ );
+
+ const customCSS = `
+#snackbar {
+ display: flex;
+ visibility: hidden;
+ min-width: 250px;
+ margin-left: -125px;
+ background-color: #333;
+ color: #fff;
+ text-align: center;
+ position: fixed;
+ z-index: 1;
+ left: 50%;
+ bottom: 30px;
+ font-size: 17px;
+ padding: 6px 16px;
+ font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ font-weight: 400;
+ line-height: 1.43;
border-radius: 4px;
- width: auto;
- max-width: 500px;
- padding: 10px;
+ letter-spacing: 0.01071em;
}
-}
-
-.mx_AuthButtons {
- min-height: 24px;
- height: unset !important;
- padding-top: 13px !important;
- padding-bottom: 14px !important;
- -webkit-box-ordinal-group: 5;
- -ms-flex-order: 4;
- order: 4;
-}
-
-.mx_AuthButtons_loginButton_wrapper {
- text-align: center;
- width: 100%;
-}
-
-.mx_AuthButtons_loginButton,
-.mx_AuthButtons_registerButton {
- margin-top: 3px;
- height: 40px;
- border: 0;
- border-radius: 40px;
- margin-left: 4px;
- margin-right: 4px;
- min-width: 80px;
- background-color: #0dbd8b;
- color: #fff;
- cursor: pointer;
- font-size: 1.5rem;
- padding: 0 11px;
- word-break: break-word;
-}
-
-.mx_AuthFooter {
- text-align: center;
- width: 100%;
- font-size: 1.4rem;
- opacity: 0.72;
- padding: 20px 0;
- background: -webkit-gradient(
- linear,
- left top,
- left bottom,
- from(transparent),
- to(rgba(0, 0, 0, 0.8))
- );
- background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
-}
-
-.mx_AuthFooter a:hover,
-.mx_AuthFooter a:link,
-.mx_AuthFooter a:visited {
- color: #fff;
- margin: 0 22px;
-}
-
-.mx_AuthHeader {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- width: 206px;
- padding: 25px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-@media only screen and (max-width: 480px) {
- .mx_AuthHeader {
- display: none;
+
+ #snackbar.mx_show {
+ visibility: visible;
+ -webkit-animation: mx_snackbar_fadein 0.5s, mx_snackbar_fadeout 0.5s 2.5s;
+ animation: mx_snackbar_fadein 0.5s, mx_snackbar_fadeout 0.5s 2.5s;
}
-}
-
-.mx_AuthHeaderLogo {
- margin-top: 15px;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- padding: 0 25px;
-}
-
-.mx_AuthHeaderLogo img {
- width: 100%;
-}
-
-@media only screen and (max-width: 480px) {
- .mx_AuthHeaderLogo {
- display: none;
+
+ a.mx_reply_anchor{
+ cursor: pointer;
+ color: #238cf5;
}
-}
-
-.mx_AuthPage {
- width: 100%;
- min-height: 100%;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- background-color: #2e3649;
-}
-
-.mx_AuthPage,
-.mx_AuthPage_modal {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_AuthPage_modal {
- margin: 100px auto auto;
- border-radius: 4px;
- -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33);
- box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33);
- background-color: hsla(0, 0%, 96.1%, 0.9);
-}
-
-@media only screen and (max-width: 480px) {
- .mx_AuthPage_modal {
- margin-top: 0;
+
+ a.mx_reply_anchor:hover{
+ text-decoration: underline;
}
-}
-
-.mx_CompleteSecurityBody {
- width: 600px;
- color: #232f32;
- background-color: #fff;
- border-radius: 4px;
- padding: 20px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.mx_CompleteSecurityBody h2 {
- font-size: 2.4rem;
- font-weight: 600;
- margin-top: 0;
-}
-
-.mx_CompleteSecurityBody h3 {
- font-size: 1.4rem;
- font-weight: 600;
-}
-
-.mx_CompleteSecurityBody a:hover,
-.mx_CompleteSecurityBody a:link,
-.mx_CompleteSecurityBody a:visited {
- color: #0dbd8b;
- text-decoration: none;
-}
-
-.mx_CountryDropdown .mx_Dropdown_input .mx_Dropdown_option {
- padding: 0 3px;
-}
-
-.mx_CountryDropdown .mx_Dropdown_arrow {
- padding-right: 3px;
-}
-
-.mx_CountryDropdown_shortOption {
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- height: 100%;
-}
-
-.mx_CountryDropdown_option,
-.mx_CountryDropdown_shortOption {
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_CountryDropdown_option {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_InteractiveAuthEntryComponents_emailWrapper {
- padding-right: 100px;
- position: relative;
- margin-top: 32px;
- margin-bottom: 32px;
-}
-
-.mx_InteractiveAuthEntryComponents_emailWrapper:after,
-.mx_InteractiveAuthEntryComponents_emailWrapper:before {
- position: absolute;
- width: 116px;
- height: 116px;
- content: "";
- right: -10px;
-}
-
-.mx_InteractiveAuthEntryComponents_emailWrapper:before {
- background-color: rgba(244, 246, 250, 0.91);
- border-radius: 50%;
- top: -20px;
-}
-
-.mx_InteractiveAuthEntryComponents_emailWrapper:after {
- background-image: url(../../img/element-icons/email-prompt.1d04dfe.svg);
- background-repeat: no-repeat;
- background-position: 50%;
- background-size: contain;
- top: -25px;
-}
-
-.mx_InteractiveAuthEntryComponents_msisdnWrapper {
- text-align: center;
-}
-
-.mx_InteractiveAuthEntryComponents_msisdnEntry {
- font-size: 200%;
- font-weight: 700;
- border: 1px solid #c7c7c7;
- border-radius: 3px;
- width: 6em;
-}
-
-.mx_InteractiveAuthEntryComponents_msisdnEntry:focus {
- border: 1px solid #0dbd8b;
-}
-
-.mx_InteractiveAuthEntryComponents_msisdnSubmit {
- margin-top: 4px;
- margin-bottom: 5px;
-}
-
-.mx_InteractiveAuthEntryComponents_termsSubmit {
- margin-top: 20px;
- margin-bottom: 5px;
- display: block;
- width: 100%;
-}
-
-.mx_InteractiveAuthEntryComponents_msisdnSubmit:disabled {
- background-color: #747474;
- cursor: default;
-}
-
-.mx_InteractiveAuthEntryComponents_termsSubmit:disabled {
- background-color: #92caad;
- cursor: default;
-}
-
-.mx_InteractiveAuthEntryComponents_termsPolicy {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-pack: start;
- -ms-flex-pack: start;
- justify-content: start;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_InteractiveAuthEntryComponents_passwordSection {
- width: 300px;
-}
-
-.mx_InteractiveAuthEntryComponents_sso_buttons {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-pack: end;
- -ms-flex-pack: end;
- justify-content: flex-end;
- margin-top: 20px;
-}
-
-.mx_InteractiveAuthEntryComponents_sso_buttons .mx_AccessibleButton {
- margin-left: 5px;
-}
-
-.mx_AuthBody_language {
- width: 100%;
-}
-
-.mx_AuthBody_language .mx_Dropdown_input {
- border: none;
- font-size: 1.4rem;
- font-weight: 600;
- color: #4e5054;
- width: auto;
-}
-
-.mx_AuthBody_language .mx_Dropdown_arrow {
- background: #4e5054;
-}
-
-progress.mx_PassphraseField_progress {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- width: 100%;
- border: 0;
- height: 4px;
- position: absolute;
- top: -12px;
- border-radius: "2px";
-}
-
-progress.mx_PassphraseField_progress::-moz-progress-bar {
- border-radius: "2px";
-}
-
-progress.mx_PassphraseField_progress::-webkit-progress-bar,
-progress.mx_PassphraseField_progress::-webkit-progress-value {
- border-radius: "2px";
-}
-
-progress.mx_PassphraseField_progress {
- color: #ff4b55;
-}
-
-progress.mx_PassphraseField_progress::-moz-progress-bar {
- background-color: #ff4b55;
-}
-
-progress.mx_PassphraseField_progress::-webkit-progress-value {
- background-color: #ff4b55;
-}
-
-progress.mx_PassphraseField_progress[value="2"],
-progress.mx_PassphraseField_progress[value="3"] {
- color: #ff812d;
-}
-
-progress.mx_PassphraseField_progress[value="2"]::-moz-progress-bar,
-progress.mx_PassphraseField_progress[value="3"]::-moz-progress-bar {
- background-color: #ff812d;
-}
-
-progress.mx_PassphraseField_progress[value="2"]::-webkit-progress-value,
-progress.mx_PassphraseField_progress[value="3"]::-webkit-progress-value {
- background-color: #ff812d;
-}
-
-progress.mx_PassphraseField_progress[value="4"] {
- color: #0dbd8b;
-}
-
-progress.mx_PassphraseField_progress[value="4"]::-moz-progress-bar {
- background-color: #0dbd8b;
-}
-
-progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
- background-color: #0dbd8b;
-}
-
-.mx_Welcome {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_Welcome.mx_WelcomePage_registrationDisabled .mx_ButtonCreateAccount {
- display: none;
-}
-
-.mx_Welcome .mx_AuthBody_language {
- width: 160px;
- margin-bottom: 10px;
-}
-
-.mx_BaseAvatar {
- position: relative;
- display: inline-block;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.mx_BaseAvatar_initial {
- position: absolute;
- left: 0;
- color: #fff;
- text-align: center;
- speak: none;
- pointer-events: none;
- font-weight: 400;
-}
-
-.mx_BaseAvatar_image {
- -o-object-fit: cover;
- object-fit: cover;
- border-radius: 125px;
- vertical-align: top;
- background-color: #fff;
-}
-
-.mx_DecoratedRoomAvatar,
-.mx_ExtraTile {
- position: relative;
- contain: content;
-}
-
-.mx_DecoratedRoomAvatar.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar,
-.mx_ExtraTile.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar {
- -webkit-mask-image: url(../../img/element-icons/roomlist/decorated-avatar-mask.76c407f.svg);
- mask-image: url(../../img/element-icons/roomlist/decorated-avatar-mask.76c407f.svg);
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
-}
-
-.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon,
-.mx_ExtraTile .mx_DecoratedRoomAvatar_icon {
- position: absolute;
- bottom: -2px;
- right: -2px;
- margin: 4px;
- width: 8px;
- height: 8px;
- border-radius: 50%;
-}
-
-.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon:before,
-.mx_ExtraTile .mx_DecoratedRoomAvatar_icon:before {
- content: "";
- width: 8px;
- height: 8px;
- position: absolute;
- border-radius: 8px;
-}
-
-.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_globe:before,
-.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_globe:before {
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background: #737d8c;
- -webkit-mask-image: url(../../img/globe.8201f08.svg);
- mask-image: url(../../img/globe.8201f08.svg);
-}
-
-.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_offline:before,
-.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_offline:before {
- background-color: #e3e8f0;
-}
-
-.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_online:before,
-.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_online:before {
- background-color: #0dbd8b;
-}
-
-.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_away:before,
-.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_away:before {
- background-color: #d9b072;
-}
-
-.mx_DecoratedRoomAvatar .mx_NotificationBadge,
-.mx_DecoratedRoomAvatar .mx_RoomTile_badgeContainer,
-.mx_ExtraTile .mx_NotificationBadge,
-.mx_ExtraTile .mx_RoomTile_badgeContainer {
- position: absolute;
- top: 0;
- right: 0;
- height: 18px;
- width: 18px;
-}
-
-.mx_MessageComposer_avatar .mx_BaseAvatar {
- padding: 2px;
- border: 1px solid transparent;
- border-radius: 100%;
-}
-
-.mx_MessageComposer_avatar .mx_BaseAvatar_initial {
- left: 2px;
-}
-
-.mx_MemberStatusMessageAvatar_hasStatus .mx_BaseAvatar {
- border-color: #0dbd8b;
-}
-
-.mx_WidgetAvatar {
- border-radius: 4px;
-}
-
-.mx_BetaCard {
- margin-bottom: 20px;
- padding: 24px;
- background-color: #f4f6fa;
- border-radius: 8px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.mx_BetaCard .mx_BetaCard_columns {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_BetaCard .mx_BetaCard_columns > div .mx_BetaCard_title {
- font-weight: 600;
- font-size: 1.8rem;
- line-height: 2.2rem;
- color: #2e2f32;
- margin: 4px 0 14px;
-}
-
-.mx_BetaCard
- .mx_BetaCard_columns
- > div
- .mx_BetaCard_title
- .mx_BetaCard_betaPill {
- margin-left: 12px;
-}
-
-.mx_BetaCard .mx_BetaCard_columns > div .mx_BetaCard_caption {
- font-size: 1.5rem;
- line-height: 2rem;
- color: #737d8c;
- margin-bottom: 20px;
-}
-
-.mx_BetaCard
- .mx_BetaCard_columns
- > div
- .mx_BetaCard_buttons
- .mx_AccessibleButton {
- display: block;
- margin: 12px 0;
- padding: 7px 40px;
- width: auto;
-}
-
-.mx_BetaCard .mx_BetaCard_columns > div .mx_BetaCard_disclaimer {
- font-size: 1.2rem;
- line-height: 1.5rem;
- color: #737d8c;
- margin-top: 20px;
-}
-
-.mx_BetaCard .mx_BetaCard_columns > img {
- margin: auto 0 auto 20px;
- width: 300px;
- -o-object-fit: contain;
- object-fit: contain;
- height: 100%;
-}
-
-.mx_BetaCard .mx_BetaCard_relatedSettings .mx_SettingsFlag {
- margin: 16px 0 0;
- font-size: 1.5rem;
- line-height: 2.4rem;
- color: #2e2f32;
-}
-
-.mx_BetaCard
- .mx_BetaCard_relatedSettings
- .mx_SettingsFlag
- .mx_SettingsFlag_microcopy {
- margin-top: 4px;
- font-size: 1.2rem;
- line-height: 1.5rem;
- color: #737d8c;
-}
-
-.mx_BetaCard_betaPill {
- background-color: #238cf5;
- padding: 4px 10px;
- border-radius: 8px;
- text-transform: uppercase;
- font-size: 12px;
- line-height: 15px;
- color: #fff;
- display: inline-block;
- vertical-align: text-bottom;
-}
-
-.mx_BetaCard_betaPill.mx_BetaCard_betaPill_clickable {
- cursor: pointer;
-}
-
-.mx_BetaDot {
- margin: 10px;
- height: 12px;
- width: 12px;
- -webkit-animation: mx_Beta_bluePulse 2s infinite;
- animation: mx_Beta_bluePulse 2s infinite;
- -webkit-animation-iteration-count: 20;
- animation-iteration-count: 20;
- position: relative;
-}
-
-.mx_BetaDot,
-.mx_BetaDot:after {
- border-radius: 50%;
- -webkit-transform: scale(1);
- transform: scale(1);
- background: #238cf5;
-}
-
-.mx_BetaDot:after {
- content: "";
- position: absolute;
- width: inherit;
- height: inherit;
- top: 0;
- left: 0;
- -webkit-transform-origin: center center;
- transform-origin: center center;
- -webkit-animation-name: mx_Beta_bluePulse_shadow;
- animation-name: mx_Beta_bluePulse_shadow;
- -webkit-animation-duration: inherit;
- animation-duration: inherit;
- -webkit-animation-iteration-count: inherit;
- animation-iteration-count: inherit;
-}
-
-@-webkit-keyframes mx_Beta_bluePulse {
- 0% {
- -webkit-transform: scale(0.95);
- transform: scale(0.95);
+
+ @-webkit-keyframes mx_snackbar_fadein {
+ from {bottom: 0; opacity: 0;}
+ to {bottom: 30px; opacity: 1;}
}
- 70% {
- -webkit-transform: scale(1);
- transform: scale(1);
+
+ @keyframes mx_snackbar_fadein {
+ from {bottom: 0; opacity: 0;}
+ to {bottom: 30px; opacity: 1;}
}
- to {
- -webkit-transform: scale(0.95);
- transform: scale(0.95);
+
+ @-webkit-keyframes mx_snackbar_fadeout {
+ from {bottom: 30px; opacity: 1;}
+ to {bottom: 0; opacity: 0;}
}
-}
-
-@keyframes mx_Beta_bluePulse {
- 0% {
- -webkit-transform: scale(0.95);
- transform: scale(0.95);
+
+ @keyframes mx_snackbar_fadeout {
+ from {bottom: 30px; opacity: 1;}
+ to {bottom: 0; opacity: 0;}
}
- 70% {
- -webkit-transform: scale(1);
- transform: scale(1);
+
+ .mx_MFileBody_info .mx_MFileBody_info_icon img.mx_export_attach_icon {
+ content: '';
+ background-color: ${theme == 'light' ? "#ffffff": "inherit"};
+ width: 13px;
+ height: 15px;
+ position: absolute;
+ top: 8px;
+ left: 9px;
}
- to {
- -webkit-transform: scale(0.95);
- transform: scale(0.95);
+
+ * {
+ scroll-behavior: smooth !important;
}
-}
-
-@-webkit-keyframes mx_Beta_bluePulse_shadow {
- 0% {
- opacity: 0.7;
+
+
+ .mx_Export_EventWrapper:target {
+ background: ${theme == 'light' ? "white" : "#15191E"};
+ animation: mx_event_highlight_animation 2s linear;
}
- 70% {
- -webkit-transform: scale(2.2);
- transform: scale(2.2);
- opacity: 0;
+
+
+ @keyframes mx_event_highlight_animation {
+ 0%,100% {
+ background: ${theme == 'light' ? "white" : "#15191E"};
+ }
+ 50% {
+ background: ${theme == 'light' ? "#e3e2df" : "#21262c"};
+ }
}
- to {
- opacity: 0;
+
+ .mx_ReplyThread_Export {
+ margin-top: -5px;
+ margin-bottom: 5px;
}
-}
-
-@keyframes mx_Beta_bluePulse_shadow {
- 0% {
- opacity: 0.7;
+
+ .mx_RedactedBody img.mx_export_trash_icon {
+ height: 14px;
+ width: 14px;
+ background-color: ${theme == 'light' ? "#ffffff": "inherit"};
+ content: '';
+ position: absolute;
+ top: 1px;
+ left: 0;
}
- 70% {
- -webkit-transform: scale(2.2);
- transform: scale(2.2);
- opacity: 0;
- }
- to {
- opacity: 0;
- }
-}
-
-.mx_CallContextMenu_item {
- width: 205px;
- height: 40px;
- padding-left: 16px;
- line-height: 40px;
- vertical-align: center;
-}
-
-.mx_IconizedContextMenu {
- min-width: 146px;
-}
-
-.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList > * {
- padding-left: 20px;
- padding-right: 20px;
-}
-
-.mx_IconizedContextMenu
- .mx_IconizedContextMenu_optionList
- .mx_IconizedContextMenu_optionList_notFirst:before,
-.mx_IconizedContextMenu
- .mx_IconizedContextMenu_optionList:nth-child(n + 2):before {
- border-top: 1px solid #2e2f32;
- opacity: 0.1;
- content: "";
- width: 100%;
- position: absolute;
- left: 0;
-}
-
-.mx_IconizedContextMenu
- .mx_IconizedContextMenu_optionList:first-child
- .mx_AccessibleButton:first-child {
- border-radius: 8px 8px 0 0;
-}
-
-.mx_IconizedContextMenu
- .mx_IconizedContextMenu_optionList:last-child
- .mx_AccessibleButton:last-child {
- border-radius: 0 0 8px 8px;
-}
-
-.mx_IconizedContextMenu
- .mx_IconizedContextMenu_optionList
- .mx_AccessibleButton {
- padding-top: 12px;
- padding-bottom: 12px;
- text-decoration: none;
- color: #2e2f32;
- font-size: 1.5rem;
- line-height: 2.4rem;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_IconizedContextMenu
- .mx_IconizedContextMenu_optionList
- .mx_AccessibleButton:hover {
- background-color: #f5f8fa;
-}
-
-.mx_IconizedContextMenu
- .mx_IconizedContextMenu_optionList
- .mx_AccessibleButton.mx_AccessibleButton_disabled {
- opacity: 0.5;
- cursor: not-allowed;
-}
-
-.mx_IconizedContextMenu
- .mx_IconizedContextMenu_optionList
- .mx_AccessibleButton
- .mx_IconizedContextMenu_icon,
-.mx_IconizedContextMenu
- .mx_IconizedContextMenu_optionList
- .mx_AccessibleButton
+
img {
- width: 16px;
- min-width: 16px;
- max-width: 16px;
-}
-
-.mx_IconizedContextMenu
- .mx_IconizedContextMenu_optionList
- .mx_AccessibleButton
- span.mx_IconizedContextMenu_label {
- width: 100%;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
-}
-
-.mx_IconizedContextMenu
- .mx_IconizedContextMenu_optionList
- .mx_AccessibleButton
- .mx_IconizedContextMenu_icon
- + .mx_IconizedContextMenu_label {
- padding-left: 14px;
-}
-
-.mx_IconizedContextMenu .mx_IconizedContextMenu_icon {
- position: relative;
- width: 16px;
- height: 16px;
-}
-
-.mx_IconizedContextMenu .mx_IconizedContextMenu_icon:before {
- content: "";
- width: 16px;
- height: 16px;
- position: absolute;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background: #2e2f32;
-}
-
-.mx_IconizedContextMenu
- .mx_IconizedContextMenu_optionList_red
- .mx_AccessibleButton {
- color: #ff4b55 !important;
-}
-
-.mx_IconizedContextMenu
- .mx_IconizedContextMenu_optionList_red
- .mx_IconizedContextMenu_icon:before {
- background-color: #ff4b55;
-}
-
-.mx_IconizedContextMenu .mx_IconizedContextMenu_active.mx_AccessibleButton,
-.mx_IconizedContextMenu .mx_IconizedContextMenu_active .mx_AccessibleButton {
- color: #0dbd8b !important;
-}
-
-.mx_IconizedContextMenu
- .mx_IconizedContextMenu_active
- .mx_IconizedContextMenu_icon:before {
- background-color: #0dbd8b;
-}
-
-.mx_IconizedContextMenu.mx_IconizedContextMenu_compact
- .mx_IconizedContextMenu_optionList
- > * {
- padding: 8px 16px 8px 11px;
-}
-
-.mx_IconizedContextMenu .mx_IconizedContextMenu_checked {
- margin-left: 16px;
- margin-right: -5px;
-}
-
-.mx_IconizedContextMenu .mx_IconizedContextMenu_checked:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);
- mask-image: url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);
-}
-
-.mx_MessageContextMenu .mx_IconizedContextMenu_icon {
- width: 16px;
- height: 16px;
- display: block;
-}
-
-.mx_MessageContextMenu .mx_IconizedContextMenu_icon:before {
- content: "";
- width: 16px;
- height: 16px;
- display: block;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background: #2e2f32;
-}
-
-.mx_MessageContextMenu .mx_MessageContextMenu_iconCollapse:before {
- -webkit-mask-image: url(../../img/element-icons/message/chevron-up.90f4709.svg);
- mask-image: url(../../img/element-icons/message/chevron-up.90f4709.svg);
-}
-
-.mx_MessageContextMenu .mx_MessageContextMenu_iconReport:before {
- -webkit-mask-image: url(../../img/element-icons/warning-badge.413c9a9.svg);
- mask-image: url(../../img/element-icons/warning-badge.413c9a9.svg);
-}
-
-.mx_MessageContextMenu .mx_MessageContextMenu_iconLink:before {
- -webkit-mask-image: url(../../img/element-icons/link.8f4b1fc.svg);
- mask-image: url(../../img/element-icons/link.8f4b1fc.svg);
-}
-
-.mx_MessageContextMenu .mx_MessageContextMenu_iconPermalink:before {
- -webkit-mask-image: url(../../img/element-icons/room/share.54dc3fb.svg);
- mask-image: url(../../img/element-icons/room/share.54dc3fb.svg);
-}
-
-.mx_MessageContextMenu .mx_MessageContextMenu_iconUnhidePreview:before {
- -webkit-mask-image: url(../../img/element-icons/settings/appearance.cdebd40.svg);
- mask-image: url(../../img/element-icons/settings/appearance.cdebd40.svg);
-}
-
-.mx_MessageContextMenu .mx_MessageContextMenu_iconForward:before {
- -webkit-mask-image: url(../../img/element-icons/message/fwd.d1f50ee.svg);
- mask-image: url(../../img/element-icons/message/fwd.d1f50ee.svg);
-}
-
-.mx_MessageContextMenu .mx_MessageContextMenu_iconRedact:before {
- -webkit-mask-image: url(../../img/element-icons/trashcan.3b626db.svg);
- mask-image: url(../../img/element-icons/trashcan.3b626db.svg);
-}
-
-.mx_MessageContextMenu .mx_MessageContextMenu_iconResend:before {
- -webkit-mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
- mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
-}
-
-.mx_MessageContextMenu .mx_MessageContextMenu_iconSource:before {
- -webkit-mask-image: url(../../img/element-icons/room/format-bar/code.27444ba.svg);
- mask-image: url(../../img/element-icons/room/format-bar/code.27444ba.svg);
-}
-
-.mx_MessageContextMenu .mx_MessageContextMenu_iconQuote:before {
- -webkit-mask-image: url(../../img/element-icons/room/format-bar/quote.560cd8f.svg);
- mask-image: url(../../img/element-icons/room/format-bar/quote.560cd8f.svg);
-}
-
-.mx_MessageContextMenu .mx_MessageContextMenu_iconPin:before {
- -webkit-mask-image: url(../../img/element-icons/room/pin-upright.65783fb.svg);
- mask-image: url(../../img/element-icons/room/pin-upright.65783fb.svg);
-}
-
-.mx_MessageContextMenu .mx_MessageContextMenu_iconUnpin:before {
- -webkit-mask-image: url(../../img/element-icons/room/pin.a996417.svg);
- mask-image: url(../../img/element-icons/room/pin.a996417.svg);
-}
-
-.mx_StatusMessageContextMenu {
- padding: 10px;
-}
-
-.mx_StatusMessageContextMenu_form {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-input.mx_StatusMessageContextMenu_message {
- border-radius: 4px;
- border: 1px solid #e7e7e7;
- padding: 6.5px 11px;
- background-color: #fff;
- font-weight: 400;
- margin: 0 0 10px;
-}
-
-.mx_StatusMessageContextMenu_message::-webkit-input-placeholder {
- color: #61708b;
-}
-
-.mx_StatusMessageContextMenu_message::-moz-placeholder {
- color: #61708b;
-}
-
-.mx_StatusMessageContextMenu_message:-ms-input-placeholder {
- color: #61708b;
-}
-
-.mx_StatusMessageContextMenu_message::-ms-input-placeholder {
- color: #61708b;
-}
-
-.mx_StatusMessageContextMenu_message::placeholder {
- color: #61708b;
-}
-
-.mx_StatusMessageContextMenu_actionContainer {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_StatusMessageContextMenu_clear,
-.mx_StatusMessageContextMenu_submit {
- vertical-align: middle;
- border-radius: 8px;
- font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
- Helvetica, Sans-Serif, Noto Color Emoji;
- font-size: 1.4rem;
- color: #fff;
- background-color: #0dbd8b;
- width: auto;
- cursor: pointer;
- display: inline-block;
- outline: none;
- -ms-flex-item-align: start;
- align-self: start;
- font-size: 1.2rem;
- padding: 6px 1em;
- border: 1px solid transparent;
- margin-right: 10px;
-}
-
-.mx_StatusMessageContextMenu_submit[disabled] {
- opacity: 0.49;
-}
-
-.mx_StatusMessageContextMenu_clear {
- color: #ff4b55;
- background-color: transparent;
- border: 1px solid #ff4b55;
-}
-
-.mx_StatusMessageContextMenu_actionContainer .mx_Spinner {
- -webkit-box-pack: start;
- -ms-flex-pack: start;
- justify-content: flex-start;
-}
-
-.mx_TagTileContextMenu_item {
- padding: 8px 20px 8px 8px;
- cursor: pointer;
- white-space: nowrap;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- line-height: 1.6rem;
-}
-
-.mx_TagTileContextMenu_item:before {
- content: "";
- height: 15px;
- width: 15px;
- background-color: currentColor;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- margin-right: 8px;
-}
-
-.mx_TagTileContextMenu_viewCommunity:before {
- -webkit-mask-image: url(../../img/element-icons/view-community.0cad1a5.svg);
- mask-image: url(../../img/element-icons/view-community.0cad1a5.svg);
-}
-
-.mx_TagTileContextMenu_moveUp:before {
- -webkit-transform: rotate(180deg);
- transform: rotate(180deg);
-}
-
-.mx_TagTileContextMenu_moveDown:before,
-.mx_TagTileContextMenu_moveUp:before {
- -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
- mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
-}
-
-.mx_TagTileContextMenu_hideCommunity:before {
- -webkit-mask-image: url(../../img/element-icons/hide.2b52315.svg);
- mask-image: url(../../img/element-icons/hide.2b52315.svg);
-}
-
-.mx_TagTileContextMenu_separator {
- margin-top: 0;
- margin-bottom: 0;
- border-style: none;
- border-top: 1px solid;
- border-color: #e7e7e7;
-}
-
-.mx_AddExistingToSpaceDialog_wrapper .mx_Dialog {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_AddExistingToSpace .mx_SearchBox {
- margin: 0 0 15px;
- -webkit-box-flex: 0;
- -ms-flex-positive: 0;
- flex-grow: 0;
-}
-
-.mx_AddExistingToSpace .mx_AddExistingToSpace_content {
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
-}
-
-.mx_AddExistingToSpace .mx_AddExistingToSpace_noResults {
- display: block;
- margin-top: 24px;
-}
-
-.mx_AddExistingToSpace .mx_AddExistingToSpace_section:not(:first-child) {
- margin-top: 24px;
-}
-
-.mx_AddExistingToSpace .mx_AddExistingToSpace_section > h3 {
- margin: 0;
- color: #737d8c;
- font-size: 1.2rem;
- font-weight: 600;
- line-height: 1.5rem;
-}
-
-.mx_AddExistingToSpace
- .mx_AddExistingToSpace_section
- .mx_AddExistingToSpace_entry {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- margin-top: 12px;
-}
-
-.mx_AddExistingToSpace
- .mx_AddExistingToSpace_section
- .mx_AddExistingToSpace_entry
- .mx_DecoratedRoomAvatar {
- margin-right: 12px;
-}
-
-.mx_AddExistingToSpace
- .mx_AddExistingToSpace_section
- .mx_AddExistingToSpace_entry
- .mx_AddExistingToSpace_entry_name {
- font-size: 1.5rem;
- line-height: 30px;
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- margin-right: 12px;
-}
-
-.mx_AddExistingToSpace
- .mx_AddExistingToSpace_section
- .mx_AddExistingToSpace_entry
- .mx_Checkbox {
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_AddExistingToSpace .mx_AddExistingToSpace_section_spaces .mx_BaseAvatar {
- margin-right: 12px;
-}
-
-.mx_AddExistingToSpace
- .mx_AddExistingToSpace_section_spaces
- .mx_BaseAvatar_image {
- border-radius: 8px;
-}
-
-.mx_AddExistingToSpace .mx_AddExistingToSpace_section_experimental {
- position: relative;
- border-radius: 8px;
- margin: 12px 0;
- padding: 8px 8px 8px 42px;
- background-color: #f3f8fd;
- font-size: 1.2rem;
- line-height: 1.5rem;
- color: #737d8c;
-}
-
-.mx_AddExistingToSpace .mx_AddExistingToSpace_section_experimental:before {
- content: "";
- position: absolute;
- left: 10px;
- top: calc(50% - 8px);
- height: 16px;
- width: 16px;
- background-color: #737d8c;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
- mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_AddExistingToSpace .mx_AddExistingToSpace_footer {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- margin-top: 20px;
-}
-
-.mx_AddExistingToSpace .mx_AddExistingToSpace_footer > span {
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- font-size: 1.2rem;
- line-height: 1.5rem;
- color: #737d8c;
-}
-
-.mx_AddExistingToSpace .mx_AddExistingToSpace_footer > span .mx_ProgressBar {
- height: 8px;
- width: 100%;
- border-radius: 8px;
-}
-
-.mx_AddExistingToSpace
- .mx_AddExistingToSpace_footer
- > span
- .mx_ProgressBar::-moz-progress-bar {
- border-radius: 8px;
-}
-
-.mx_AddExistingToSpace
- .mx_AddExistingToSpace_footer
- > span
- .mx_ProgressBar::-webkit-progress-bar,
-.mx_AddExistingToSpace
- .mx_AddExistingToSpace_footer
- > span
- .mx_ProgressBar::-webkit-progress-value {
- border-radius: 8px;
-}
-
-.mx_AddExistingToSpace
- .mx_AddExistingToSpace_footer
- > span
- .mx_AddExistingToSpace_progressText {
- margin-top: 8px;
- font-size: 1.5rem;
- line-height: 2.4rem;
- color: #2e2f32;
-}
-
-.mx_AddExistingToSpace .mx_AddExistingToSpace_footer > span > * {
- vertical-align: middle;
-}
-
-.mx_AddExistingToSpace
- .mx_AddExistingToSpace_footer
- .mx_AddExistingToSpace_error {
- padding-left: 12px;
-}
-
-.mx_AddExistingToSpace
- .mx_AddExistingToSpace_footer
- .mx_AddExistingToSpace_error
- > img {
- -ms-flex-item-align: center;
- align-self: center;
-}
-
-.mx_AddExistingToSpace
- .mx_AddExistingToSpace_footer
- .mx_AddExistingToSpace_error
- .mx_AddExistingToSpace_errorHeading {
- font-weight: 600;
- font-size: 1.5rem;
- line-height: 1.8rem;
- color: #ff4b55;
-}
-
-.mx_AddExistingToSpace
- .mx_AddExistingToSpace_footer
- .mx_AddExistingToSpace_error
- .mx_AddExistingToSpace_errorCaption {
- margin-top: 4px;
- font-size: 1.2rem;
- line-height: 1.5rem;
- color: #2e2f32;
-}
-
-.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AccessibleButton {
- display: inline-block;
- -ms-flex-item-align: center;
- align-self: center;
-}
-
-.mx_AddExistingToSpace
- .mx_AddExistingToSpace_footer
- .mx_AccessibleButton_kind_primary {
- padding: 8px 36px;
-}
-
-.mx_AddExistingToSpace
- .mx_AddExistingToSpace_footer
- .mx_AddExistingToSpace_retryButton {
- margin-left: 12px;
- padding-left: 24px;
- position: relative;
-}
-
-.mx_AddExistingToSpace
- .mx_AddExistingToSpace_footer
- .mx_AddExistingToSpace_retryButton:before {
- content: "";
- position: absolute;
- background-color: #2e2f32;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
- mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
- width: 18px;
- height: 18px;
- left: 0;
-}
-
-.mx_AddExistingToSpace
- .mx_AddExistingToSpace_footer
- .mx_AccessibleButton_kind_link {
- padding: 0;
-}
-
-.mx_AddExistingToSpaceDialog {
- width: 480px;
- color: #2e2f32;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -ms-flex-wrap: nowrap;
- flex-wrap: nowrap;
- min-height: 0;
- height: 80vh;
-}
-
-.mx_AddExistingToSpaceDialog,
-.mx_AddExistingToSpaceDialog .mx_Dialog_title {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_BaseAvatar_image {
- border-radius: 8px;
- margin: 0;
- vertical-align: unset;
-}
-
-.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_BaseAvatar {
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- margin: auto 16px auto 5px;
- vertical-align: middle;
-}
-
-.mx_AddExistingToSpaceDialog .mx_Dialog_title > div > h1 {
- font-weight: 600;
- font-size: 1.8rem;
- line-height: 2.2rem;
- margin: 0;
-}
-
-.mx_AddExistingToSpaceDialog
- .mx_Dialog_title
- > div
- .mx_AddExistingToSpaceDialog_onlySpace {
- color: #737d8c;
- font-size: 1.5rem;
- line-height: 2.4rem;
-}
-
-.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input {
- border: none;
-}
-
-.mx_AddExistingToSpaceDialog
- .mx_Dialog_title
- .mx_Dropdown_input
- > .mx_Dropdown_option {
- padding-left: 0;
- -webkit-box-flex: unset;
- -ms-flex: unset;
- flex: unset;
- height: unset;
- color: #737d8c;
- font-size: 1.5rem;
- line-height: 2.4rem;
-}
-
-.mx_AddExistingToSpaceDialog
- .mx_Dialog_title
- .mx_Dropdown_input
- > .mx_Dropdown_option
- .mx_BaseAvatar {
- display: none;
-}
-
-.mx_AddExistingToSpaceDialog
- .mx_Dialog_title
- .mx_Dropdown_input
- .mx_Dropdown_menu
- .mx_AddExistingToSpaceDialog_dropdownOptionActive {
- color: #0dbd8b;
- padding-right: 32px;
- position: relative;
-}
-
-.mx_AddExistingToSpaceDialog
- .mx_Dialog_title
- .mx_Dropdown_input
- .mx_Dropdown_menu
- .mx_AddExistingToSpaceDialog_dropdownOptionActive:before {
- content: "";
- width: 20px;
- height: 20px;
- top: 8px;
- right: 0;
- position: absolute;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background-color: #0dbd8b;
- -webkit-mask-image: url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);
- mask-image: url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);
-}
-
-.mx_AddExistingToSpaceDialog .mx_AddExistingToSpace {
- display: contents;
-}
-
-.mx_AddressPickerDialog a:hover,
-.mx_AddressPickerDialog a:link,
-.mx_AddressPickerDialog a:visited {
- color: #0dbd8b;
- text-decoration: none;
-}
-
-.mx_AddressPickerDialog_input,
-.mx_AddressPickerDialog_input:focus {
- height: 26px;
- font-size: 1.4rem;
- font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
- Helvetica, Sans-Serif, Noto Color Emoji;
- padding-left: 12px;
- padding-right: 12px;
- margin: 0 !important;
- border: 0 !important;
- outline: 0 !important;
- width: 1000%;
- resize: none;
- overflow: hidden;
- vertical-align: middle;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- word-wrap: nowrap;
-}
-
-.mx_AddressPickerDialog .mx_Dialog_content {
- min-height: 50px;
-}
-
-.mx_AddressPickerDialog_inputContainer {
- border-radius: 3px;
- border: 1px solid #e7e7e7;
- line-height: 3.6rem;
- padding: 1px 4px;
- max-height: 150px;
- overflow-x: hidden;
- overflow-y: auto;
-}
-
-.mx_AddressPickerDialog_error {
- margin-top: 10px;
- color: #ff4b55;
-}
-
-.mx_AddressPickerDialog_cancel {
- position: absolute;
- right: 11px;
- top: 13px;
- cursor: pointer;
-}
-
-.mx_AddressPickerDialog_cancel object {
- pointer-events: none;
-}
-
-.mx_AddressPickerDialog_identityServer {
- margin-top: 1em;
-}
-
-.mx_AnalyticsModal table {
- margin: 10px 0;
-}
-
-.mx_BetaFeedbackDialog .mx_BetaFeedbackDialog_subheading {
- color: #2e2f32;
- font-size: 1.4rem;
- line-height: 2rem;
- margin-bottom: 24px;
-}
-
-.mx_BetaFeedbackDialog .mx_AccessibleButton_kind_link {
- padding: 0;
- font-size: inherit;
- line-height: inherit;
-}
-
-.mx_BugReportDialog
- .mx_BugReportDialog_download
- .mx_AccessibleButton_kind_link {
- padding-left: 0;
-}
-
-.mx_ChangelogDialog_content {
- max-height: 300px;
- overflow: auto;
-}
-
-.mx_ChangelogDialog_li {
- padding: 0.2em;
-}
-
-.mx_ChatCreateOrReuseDialog .mx_ChatCreateOrReuseDialog_tiles {
- margin-top: 24px;
-}
-
-.mx_ChatCreateOrReuseDialog .mx_Dialog_content {
- margin-bottom: 24px;
- min-height: 100px;
-}
-
-.mx_ChatCreateOrReuseDialog .mx_RoomTile_badge {
- display: none;
-}
-
-.mx_ChatCreateOrReuseDialog_profile {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_ChatCreateOrReuseDialog_profile_name {
- padding: 14px;
-}
-
-.mx_CommunityPrototypeInviteDialog.mx_Dialog_fixedWidth {
- width: 360px;
-}
-
-.mx_CommunityPrototypeInviteDialog .mx_Dialog_content {
- margin-bottom: 0;
-}
-
-.mx_CommunityPrototypeInviteDialog
- .mx_Dialog_content
- .mx_CommunityPrototypeInviteDialog_people {
- position: relative;
- margin-bottom: 4px;
-}
-
-.mx_CommunityPrototypeInviteDialog
- .mx_Dialog_content
- .mx_CommunityPrototypeInviteDialog_people
- .mx_AccessibleButton {
- display: inline-block;
- background-color: #ddd;
- border-radius: 4px;
- padding: 3px 5px;
- font-size: 1.2rem;
- float: right;
-}
-
-.mx_CommunityPrototypeInviteDialog
- .mx_Dialog_content
- .mx_CommunityPrototypeInviteDialog_morePeople {
- margin-top: 8px;
-}
-
-.mx_CommunityPrototypeInviteDialog
- .mx_Dialog_content
- .mx_CommunityPrototypeInviteDialog_person {
- position: relative;
- margin-top: 4px;
-}
-
-.mx_CommunityPrototypeInviteDialog
- .mx_Dialog_content
- .mx_CommunityPrototypeInviteDialog_person
- > * {
- vertical-align: middle;
-}
-
-.mx_CommunityPrototypeInviteDialog
- .mx_Dialog_content
- .mx_CommunityPrototypeInviteDialog_person
- .mx_Checkbox {
- position: absolute;
- right: 0;
- top: calc(50% - 8px);
- width: 16px;
-}
-
-.mx_CommunityPrototypeInviteDialog
- .mx_Dialog_content
- .mx_CommunityPrototypeInviteDialog_person
- .mx_CommunityPrototypeInviteDialog_personIdentifiers {
- display: inline-block;
-}
-
-.mx_CommunityPrototypeInviteDialog
- .mx_Dialog_content
- .mx_CommunityPrototypeInviteDialog_person
- .mx_CommunityPrototypeInviteDialog_personIdentifiers
- > * {
- display: block;
-}
-
-.mx_CommunityPrototypeInviteDialog
- .mx_Dialog_content
- .mx_CommunityPrototypeInviteDialog_person
- .mx_CommunityPrototypeInviteDialog_personIdentifiers
- .mx_CommunityPrototypeInviteDialog_personName {
- font-weight: 600;
- font-size: 1.4rem;
- color: #2e2f32;
- margin-left: 7px;
-}
-
-.mx_CommunityPrototypeInviteDialog
- .mx_Dialog_content
- .mx_CommunityPrototypeInviteDialog_person
- .mx_CommunityPrototypeInviteDialog_personIdentifiers
- .mx_CommunityPrototypeInviteDialog_personId {
- font-size: 1.2rem;
- color: #61708b;
- margin-left: 7px;
-}
-
-.mx_CommunityPrototypeInviteDialog
- .mx_Dialog_content
- .mx_CommunityPrototypeInviteDialog_primaryButton {
- display: block;
- font-size: 1.3rem;
- line-height: 20px;
- height: 20px;
- margin-top: 24px;
-}
-
-.mx_ConfirmUserActionDialog .mx_Dialog_content {
- min-height: 48px;
- margin-bottom: 24px;
-}
-
-.mx_ConfirmUserActionDialog_avatar {
- float: left;
- margin-right: 20px;
- margin-top: -2px;
-}
-
-.mx_ConfirmUserActionDialog_name {
- font-size: 1.8rem;
-}
-
-.mx_ConfirmUserActionDialog_userId {
- font-size: 1.3rem;
-}
-
-.mx_ConfirmUserActionDialog_reasonField {
- font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
- Helvetica, Sans-Serif, Noto Color Emoji;
- font-size: 1.4rem;
- color: #2e2f32;
- background-color: #fff;
- border-radius: 3px;
- border: 1px solid #e7e7e7;
- line-height: 3.6rem;
- padding: 1px 16px;
- margin-bottom: 24px;
- width: 90%;
-}
-
-.mx_CreateCommunityPrototypeDialog .mx_Dialog_content {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- margin-bottom: 12px;
-}
-
-.mx_CreateCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_CreateCommunityPrototypeDialog_colName {
- -ms-flex-preferred-size: 66.66%;
- flex-basis: 66.66%;
- padding-right: 100px;
-}
-
-.mx_CreateCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_CreateCommunityPrototypeDialog_colName
- .mx_Field
- input {
- font-size: 1.6rem;
- line-height: 2rem;
-}
-
-.mx_CreateCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_CreateCommunityPrototypeDialog_colName
- .mx_CreateCommunityPrototypeDialog_subtext {
- display: block;
- color: #61708b;
- margin-bottom: 16px;
-}
-
-.mx_CreateCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_CreateCommunityPrototypeDialog_colName
- .mx_CreateCommunityPrototypeDialog_subtext:last-child {
- margin-top: 16px;
-}
-
-.mx_CreateCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_CreateCommunityPrototypeDialog_colName
- .mx_CreateCommunityPrototypeDialog_subtext.mx_CreateCommunityPrototypeDialog_subtext_error {
- color: #ff4b55;
-}
-
-.mx_CreateCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_CreateCommunityPrototypeDialog_colName
- .mx_CreateCommunityPrototypeDialog_communityId {
- position: relative;
-}
-
-.mx_CreateCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_CreateCommunityPrototypeDialog_colName
- .mx_CreateCommunityPrototypeDialog_communityId
- .mx_InfoTooltip {
- float: right;
-}
-
-.mx_CreateCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_CreateCommunityPrototypeDialog_colName
- .mx_AccessibleButton {
- display: block;
- height: 32px;
- font-size: 1.6rem;
- line-height: 32px;
-}
-
-.mx_CreateCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_CreateCommunityPrototypeDialog_colAvatar {
- -ms-flex-preferred-size: 33.33%;
- flex-basis: 33.33%;
-}
-
-.mx_CreateCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_CreateCommunityPrototypeDialog_colAvatar
- .mx_CreateCommunityPrototypeDialog_avatarContainer {
- margin-top: 12px;
- margin-bottom: 20px;
-}
-
-.mx_CreateCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_CreateCommunityPrototypeDialog_colAvatar
- .mx_CreateCommunityPrototypeDialog_avatarContainer
- .mx_CreateCommunityPrototypeDialog_avatar,
-.mx_CreateCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_CreateCommunityPrototypeDialog_colAvatar
- .mx_CreateCommunityPrototypeDialog_avatarContainer
- .mx_CreateCommunityPrototypeDialog_placeholderAvatar {
- width: 96px;
- height: 96px;
- border-radius: 96px;
-}
-
-.mx_CreateCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_CreateCommunityPrototypeDialog_colAvatar
- .mx_CreateCommunityPrototypeDialog_avatarContainer
- .mx_CreateCommunityPrototypeDialog_placeholderAvatar {
- background-color: #368bd6;
-}
-
-.mx_CreateCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_CreateCommunityPrototypeDialog_colAvatar
- .mx_CreateCommunityPrototypeDialog_avatarContainer
- .mx_CreateCommunityPrototypeDialog_placeholderAvatar:before {
- display: inline-block;
- background-color: #fff;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 96px;
- mask-size: 96px;
- width: 96px;
- height: 96px;
- -webkit-mask-position: center;
- mask-position: center;
- content: "";
- vertical-align: middle;
- -webkit-mask-image: url(../../img/element-icons/add-photo.c0b4c3b.svg);
- mask-image: url(../../img/element-icons/add-photo.c0b4c3b.svg);
-}
-
-.mx_CreateCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_CreateCommunityPrototypeDialog_colAvatar
- .mx_CreateCommunityPrototypeDialog_tip
- > b,
-.mx_CreateCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_CreateCommunityPrototypeDialog_colAvatar
- .mx_CreateCommunityPrototypeDialog_tip
- > span {
- display: block;
- color: #61708b;
-}
-
-.mx_CreateGroupDialog_inputRow {
- margin-top: 10px;
- margin-bottom: 10px;
-}
-
-.mx_CreateGroupDialog_label {
- text-align: left;
- padding-bottom: 12px;
-}
-
-.mx_CreateGroupDialog_input {
- font-size: 1.5rem;
- border-radius: 3px;
- border: 1px solid #e7e7e7;
- padding: 9px;
- color: #2e2f32;
- background-color: #fff;
-}
-
-.mx_CreateGroupDialog_input_hasPrefixAndSuffix {
- border-radius: 0;
-}
-
-.mx_CreateGroupDialog_input_group {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_CreateGroupDialog_prefix,
-.mx_CreateGroupDialog_suffix {
- padding: 0 5px;
- line-height: 3.7rem;
- background-color: #e3e8f0;
- border: 1px solid #e7e7e7;
- text-align: center;
-}
-
-.mx_CreateGroupDialog_prefix {
- border-right: 0;
- border-radius: 3px 0 0 3px;
-}
-
-.mx_CreateGroupDialog_suffix {
- border-left: 0;
- border-radius: 0 3px 3px 0;
-}
-
-.mx_CreateRoomDialog_details {
- margin-top: 15px;
-}
-
-.mx_CreateRoomDialog_details .mx_CreateRoomDialog_details_summary {
- outline: none;
- list-style: none;
- font-weight: 600;
- cursor: pointer;
- color: #0dbd8b;
-}
-
-.mx_CreateRoomDialog_details
- .mx_CreateRoomDialog_details_summary::-webkit-details-marker {
- display: none;
-}
-
-.mx_CreateRoomDialog_details > div {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: flex-start;
- margin: 5px 0;
-}
-
-.mx_CreateRoomDialog_details > div input[type="checkbox"] {
- margin-right: 10px;
-}
-
-.mx_CreateRoomDialog_label {
- text-align: left;
- padding-bottom: 12px;
-}
-
-.mx_CreateRoomDialog_input_container {
- padding-right: 20px;
-}
-
-.mx_CreateRoomDialog_input {
- font-size: 1.5rem;
- border-radius: 3px;
- border: 1px solid #e7e7e7;
- padding: 9px;
- color: #2e2f32;
- background-color: #fff;
- width: 100%;
-}
-
-.mx_CreateRoomDialog_aliasContainer {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- margin: 24px 0 10px;
-}
-
-.mx_CreateRoomDialog_aliasContainer .mx_RoomAliasField {
- margin: 0;
-}
-
-.mx_CreateRoomDialog.mx_Dialog_fixedWidth {
- width: 450px;
-}
-
-.mx_CreateRoomDialog .mx_Dialog_content {
- margin-bottom: 40px;
-}
-
-.mx_CreateRoomDialog .mx_Field_input label,
-.mx_CreateRoomDialog p {
- color: #61708b;
-}
-
-.mx_CreateRoomDialog .mx_SettingsFlag {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_CreateRoomDialog .mx_SettingsFlag_label {
- -webkit-box-flex: 1;
- -ms-flex: 1 1 0px;
- flex: 1 1 0;
- min-width: 0;
- font-weight: 600;
-}
-
-.mx_CreateRoomDialog .mx_ToggleSwitch {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- margin-left: 30px;
-}
-
-.mx_CreateRoomDialog .mx_Dialog_content > .mx_SettingsFlag {
- margin-top: 24px;
-}
-
-.mx_CreateRoomDialog p {
- margin: 0 85px 0 0;
- font-size: 1.2rem;
-}
-
-.mx_CreateRoomDialog .mx_Dropdown {
- margin-bottom: 8px;
- font-weight: 400;
- font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
- Helvetica, Sans-Serif, Noto Color Emoji;
- font-size: 1.4rem;
- color: #2e2f32;
-}
-
-.mx_CreateRoomDialog .mx_Dropdown .mx_Dropdown_input {
- border: 1px solid #e7e7e7;
-}
-
-.mx_CreateRoomDialog .mx_Dropdown .mx_Dropdown_option {
- font-size: 1.4rem;
- line-height: 3.2rem;
- height: 32px;
- min-height: 32px;
-}
-
-.mx_CreateRoomDialog .mx_Dropdown .mx_Dropdown_option > div {
- padding-left: 30px;
- position: relative;
-}
-
-.mx_CreateRoomDialog .mx_Dropdown .mx_Dropdown_option > div:before {
- content: "";
- position: absolute;
- height: 16px;
- width: 16px;
- left: 6px;
- top: 8px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- background-color: #737d8c;
-}
-
-.mx_CreateRoomDialog .mx_Dropdown .mx_CreateRoomDialog_dropdown_invite:before {
- -webkit-mask-image: url(../../img/element-icons/lock.1f264bd.svg);
- mask-image: url(../../img/element-icons/lock.1f264bd.svg);
- -webkit-mask-size: contain;
- mask-size: contain;
-}
-
-.mx_CreateRoomDialog .mx_Dropdown .mx_CreateRoomDialog_dropdown_public:before {
- -webkit-mask-image: url(../../img/globe.8201f08.svg);
- mask-image: url(../../img/globe.8201f08.svg);
- -webkit-mask-size: 12px;
- mask-size: 12px;
-}
-
-.mx_CreateRoomDialog
- .mx_Dropdown
- .mx_CreateRoomDialog_dropdown_restricted:before {
- -webkit-mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
- mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
- -webkit-mask-size: contain;
- mask-size: contain;
-}
-
-.mx_DeactivateAccountDialog .mx_Dialog_content {
- margin-bottom: 30px;
-}
-
-.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section {
- margin-top: 60px;
-}
-
-.mx_DeactivateAccountDialog
- .mx_DeactivateAccountDialog_input_section
- .mx_Field {
- width: 300px;
-}
-
-.mx_DevTools_content {
- margin: 10px 0;
-}
-
-.mx_DevTools_ServersInRoomList_button {
- cursor: default !important;
-}
-
-.mx_DevTools_RoomStateExplorer_query {
- margin-bottom: 10px;
-}
-
-.mx_DevTools_RoomStateExplorer_button,
-.mx_DevTools_ServersInRoomList_button {
- margin-bottom: 10px;
- width: 100%;
-}
-
-.mx_DevTools_label_left {
- float: left;
-}
-
-.mx_DevTools_label_right {
- float: right;
-}
-
-.mx_DevTools_label_bottom {
- clear: both;
- border-bottom: 1px solid #e5e5e5;
-}
-
-.mx_DevTools_inputRow {
- display: table-row;
-}
-
-.mx_DevTools_inputLabelCell {
- display: table-cell;
- font-weight: 700;
- padding-right: 24px;
-}
-
-.mx_DevTools_inputCell {
- display: table-cell;
- width: 240px;
-}
-
-.mx_DevTools_inputCell input {
- display: inline-block;
- border: 0;
- border-bottom: 1px solid hsla(0, 0%, 59.2%, 0.5);
- padding: 0;
- width: 240px;
- color: rgba(74, 74, 74, 0.9);
- font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
- Helvetica, Sans-Serif, Noto Color Emoji;
- font-size: 1.6rem;
-}
-
-.mx_DevTools_textarea {
- font-size: 1.2rem;
- max-width: 684px;
- min-height: 250px;
- padding: 10px;
-}
-
-.mx_DevTools_eventTypeStateKeyGroup {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
-}
-
-.mx_DevTools_content .mx_Field_input:first-of-type {
- margin-right: 42px;
-}
-
-.mx_DevTools_tgl {
- display: none;
-}
-
-.mx_DevTools_tgl,
-.mx_DevTools_tgl *,
-.mx_DevTools_tgl + .mx_DevTools_tgl-btn,
-.mx_DevTools_tgl:after,
-.mx_DevTools_tgl :after,
-.mx_DevTools_tgl:before,
-.mx_DevTools_tgl :before {
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.mx_DevTools_tgl + .mx_DevTools_tgl-btn::-moz-selection,
-.mx_DevTools_tgl::-moz-selection,
-.mx_DevTools_tgl ::-moz-selection,
-.mx_DevTools_tgl:after::-moz-selection,
-.mx_DevTools_tgl :after::-moz-selection,
-.mx_DevTools_tgl:before::-moz-selection,
-.mx_DevTools_tgl :before::-moz-selection {
- background: none;
-}
-
-.mx_DevTools_tgl + .mx_DevTools_tgl-btn::selection,
-.mx_DevTools_tgl::selection,
-.mx_DevTools_tgl ::selection,
-.mx_DevTools_tgl:after::selection,
-.mx_DevTools_tgl :after::selection,
-.mx_DevTools_tgl:before::selection,
-.mx_DevTools_tgl :before::selection {
- background: none;
-}
-
-.mx_DevTools_tgl + .mx_DevTools_tgl-btn {
- outline: 0;
- display: block;
- width: 7em;
- height: 2em;
- position: relative;
- cursor: pointer;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.mx_DevTools_tgl + .mx_DevTools_tgl-btn:after,
-.mx_DevTools_tgl + .mx_DevTools_tgl-btn:before {
- position: relative;
- display: block;
- content: "";
- width: 50%;
- height: 100%;
-}
-
-.mx_DevTools_tgl + .mx_DevTools_tgl-btn:after {
- left: 0;
-}
-
-.mx_DevTools_tgl + .mx_DevTools_tgl-btn:before {
- display: none;
-}
-
-.mx_DevTools_tgl:checked + .mx_DevTools_tgl-btn:after {
- left: 50%;
-}
-
-.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn {
- padding: 2px;
- -webkit-transition: all 0.2s ease;
- transition: all 0.2s ease;
- font-family: sans-serif;
- -webkit-perspective: 100px;
- perspective: 100px;
-}
-
-.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:after,
-.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:before {
- display: inline-block;
- -webkit-transition: all 0.4s ease;
- transition: all 0.4s ease;
- width: 100%;
- text-align: center;
- position: absolute;
- line-height: 2em;
- font-weight: 700;
- color: #fff;
- top: 0;
- left: 0;
- -webkit-backface-visibility: hidden;
- backface-visibility: hidden;
- border-radius: 4px;
-}
-
-.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:after {
- content: attr(data-tg-on);
- background: #02c66f;
- -webkit-transform: rotateY(-180deg);
- transform: rotateY(-180deg);
-}
-
-.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:before {
- background: #ff3a19;
- content: attr(data-tg-off);
-}
-
-.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:active:before {
- -webkit-transform: rotateY(-20deg);
- transform: rotateY(-20deg);
-}
-
-.mx_DevTools_tgl-flip:checked + .mx_DevTools_tgl-btn:before {
- -webkit-transform: rotateY(180deg);
- transform: rotateY(180deg);
-}
-
-.mx_DevTools_tgl-flip:checked + .mx_DevTools_tgl-btn:after {
- -webkit-transform: rotateY(0);
- transform: rotateY(0);
- left: 0;
- background: #7fc6a6;
-}
-
-.mx_DevTools_tgl-flip:checked + .mx_DevTools_tgl-btn:active:after {
- -webkit-transform: rotateY(20deg);
- transform: rotateY(20deg);
-}
-
-.mx_DevTools_VerificationRequest {
- border: 1px solid #ccc;
- border-radius: 3px;
- padding: 1px 5px;
- margin-bottom: 6px;
- font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
- monospace;
-}
-
-.mx_DevTools_VerificationRequest dl {
- display: grid;
- grid-template-columns: -webkit-max-content auto;
- grid-template-columns: max-content auto;
- margin: 0;
-}
-
-.mx_DevTools_VerificationRequest dd {
- grid-column-start: 2;
-}
-
-.mx_DevTools_VerificationRequest dd:empty {
- color: #666;
-}
-
-.mx_DevTools_VerificationRequest dd:empty:after {
- content: "(empty)";
-}
-
-.mx_DevTools_VerificationRequest dt {
- font-weight: 700;
- grid-column-start: 1;
-}
-
-.mx_DevTools_VerificationRequest dt:after {
- content: ":";
-}
-
-.mx_DevTools_SettingsExplorer table {
- width: 100%;
- table-layout: fixed;
- border-collapse: collapse;
-}
-
-.mx_DevTools_SettingsExplorer table th {
- border-bottom: 1px solid #0dbd8b;
- text-align: left;
-}
-
-.mx_DevTools_SettingsExplorer table td,
-.mx_DevTools_SettingsExplorer table th {
- width: 360px;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
-}
-
-.mx_DevTools_SettingsExplorer table td + td,
-.mx_DevTools_SettingsExplorer table th + th {
- width: auto;
-}
-
-.mx_DevTools_SettingsExplorer table tr:hover {
- background-color: rgba(13, 189, 139, 0.5);
-}
-
-.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_mutable {
- background-color: #0dbd8b;
-}
-
-.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_immutable {
- background-color: #ff4b55;
-}
-
-.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_edit {
- float: right;
- margin-right: 16px;
-}
-
-.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_warning {
- border: 2px solid #ff4b55;
- border-radius: 4px;
- padding: 4px;
- margin-bottom: 8px;
-}
-
-.mx_EditCommunityPrototypeDialog.mx_Dialog_fixedWidth {
- width: 360px;
-}
-
-.mx_EditCommunityPrototypeDialog .mx_Dialog_content {
- margin-bottom: 12px;
-}
-
-.mx_EditCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_AccessibleButton.mx_AccessibleButton_kind_primary {
- display: block;
- height: 32px;
- font-size: 1.6rem;
- line-height: 32px;
-}
-
-.mx_EditCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_EditCommunityPrototypeDialog_rowAvatar {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_EditCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_EditCommunityPrototypeDialog_avatarContainer {
- margin-top: 20px;
- margin-bottom: 20px;
-}
-
-.mx_EditCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_EditCommunityPrototypeDialog_avatarContainer
- .mx_EditCommunityPrototypeDialog_avatar,
-.mx_EditCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_EditCommunityPrototypeDialog_avatarContainer
- .mx_EditCommunityPrototypeDialog_placeholderAvatar {
- width: 96px;
- height: 96px;
- border-radius: 96px;
-}
-
-.mx_EditCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_EditCommunityPrototypeDialog_avatarContainer
- .mx_EditCommunityPrototypeDialog_placeholderAvatar {
- background-color: #368bd6;
-}
-
-.mx_EditCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_EditCommunityPrototypeDialog_avatarContainer
- .mx_EditCommunityPrototypeDialog_placeholderAvatar:before {
- display: inline-block;
- background-color: #fff;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 96px;
- mask-size: 96px;
- width: 96px;
- height: 96px;
- -webkit-mask-position: center;
- mask-position: center;
- content: "";
- vertical-align: middle;
- -webkit-mask-image: url(../../img/element-icons/add-photo.c0b4c3b.svg);
- mask-image: url(../../img/element-icons/add-photo.c0b4c3b.svg);
-}
-
-.mx_EditCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_EditCommunityPrototypeDialog_tip {
- margin-left: 20px;
-}
-
-.mx_EditCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_EditCommunityPrototypeDialog_tip
- > b,
-.mx_EditCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_EditCommunityPrototypeDialog_tip
- > span {
- display: block;
- color: #61708b;
-}
-
-.mx_ExportDialog .mx_ExportDialog_subheading {
- font-size: 1.6rem;
- display: block;
- font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
- Helvetica, Sans-Serif, Noto Color Emoji;
- font-weight: 600;
- color: #2e2f32;
- margin-top: 18px;
- margin-bottom: 12px;
-}
-
-.mx_ExportDialog.mx_ExportDialog_Exporting .mx_ExportDialog_options {
- pointer-events: none;
-}
-
-.mx_ExportDialog.mx_ExportDialog_Exporting .mx_Field_select:before {
- display: none;
-}
-
-.mx_ExportDialog.mx_ExportDialog_Exporting
- .mx_RadioButton
- input[type="radio"]:checked
- + div
- > div {
- background: grey;
-}
-
-.mx_ExportDialog.mx_ExportDialog_Exporting
- .mx_RadioButton
- input[type="radio"]:checked
- + div {
- border-color: unset;
-}
-
-.mx_ExportDialog.mx_ExportDialog_Exporting
- .mx_Field_valid.mx_Field:focus-within
- label,
-.mx_ExportDialog.mx_ExportDialog_Exporting .mx_Field_valid.mx_Field label {
- color: unset;
-}
-
-.mx_ExportDialog.mx_ExportDialog_Exporting .mx_Field_valid.mx_Field,
-.mx_ExportDialog.mx_ExportDialog_Exporting
- .mx_Field_valid.mx_Field:focus-within {
- border-color: #e7e7e7;
-}
-
-.mx_ExportDialog.mx_ExportDialog_Exporting
- .mx_Checkbox
- input[type="checkbox"]:checked
- + label
- > .mx_Checkbox_background {
- background: grey;
- border-color: grey;
-}
-
-.mx_ExportDialog .mx_ExportDialog_progress .mx_Dialog_buttons {
- margin-top: unset;
- margin-left: 18px;
-}
-
-.mx_ExportDialog .mx_ExportDialog_progress .mx_ExportDialog_spinner {
- -webkit-animation: mx_rotate 2s linear infinite;
- animation: mx_rotate 2s linear infinite;
- z-index: 2;
- position: relative;
- margin-right: 10px;
- width: 24px;
- height: 24px;
-}
-
-.mx_ExportDialog
- .mx_ExportDialog_progress
- .mx_ExportDialog_spinner
- .mx_ExportDialog_spinner_path {
- stroke: #0dbd8b;
- stroke-linecap: round;
- -webkit-animation: mx_dash 1.5s ease-in-out infinite;
- animation: mx_dash 1.5s ease-in-out infinite;
-}
-
-.mx_ExportDialog .mx_ExportDialog_progress {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-pack: end;
- -ms-flex-pack: end;
- justify-content: flex-end;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_ExportDialog .mx_RadioButton > .mx_RadioButton_content {
- margin-top: 5px;
- margin-bottom: 5px;
-}
-
-.mx_ExportDialog .mx_Field {
- width: 256px;
-}
-
-.mx_ExportDialog .mx_Field_postfix {
- padding: 9px 10px;
-}
-
-@-webkit-keyframes mx_rotate {
- to {
- -webkit-transform: rotate(1turn);
- transform: rotate(1turn);
- }
-}
-
-@keyframes mx_rotate {
- to {
- -webkit-transform: rotate(1turn);
- transform: rotate(1turn);
- }
-}
-
-@-webkit-keyframes mx_dash {
- 0% {
- stroke-dasharray: 1, 150;
- stroke-dashoffset: 0;
- }
- 50% {
- stroke-dasharray: 90, 150;
- stroke-dashoffset: -35;
- }
- to {
- stroke-dasharray: 90, 150;
- stroke-dashoffset: -124;
- }
-}
-
-@keyframes mx_dash {
- 0% {
- stroke-dasharray: 1, 150;
- stroke-dashoffset: 0;
- }
- 50% {
- stroke-dasharray: 90, 150;
- stroke-dashoffset: -35;
- }
- to {
- stroke-dasharray: 90, 150;
- stroke-dashoffset: -124;
- }
-}
-
-.mx_FeedbackDialog hr {
- margin: 24px 0;
- border-color: #e7e7e7;
-}
-
-.mx_FeedbackDialog .mx_Dialog_content {
- margin-bottom: 24px;
-}
-
-.mx_FeedbackDialog .mx_Dialog_content > h2 {
- margin-bottom: 32px;
-}
-
-.mx_FeedbackDialog .mx_FeedbackDialog_section {
- position: relative;
- padding-left: 52px;
-}
-
-.mx_FeedbackDialog .mx_FeedbackDialog_section > p {
- color: #8d99a5;
-}
-
-.mx_FeedbackDialog .mx_FeedbackDialog_section .mx_AccessibleButton_kind_link {
- padding: 0;
- font-size: inherit;
-}
-
-.mx_FeedbackDialog .mx_FeedbackDialog_section .mx_AccessibleButton_kind_link,
-.mx_FeedbackDialog .mx_FeedbackDialog_section a {
- color: #0dbd8b;
- text-decoration: underline;
-}
-
-.mx_FeedbackDialog .mx_FeedbackDialog_section:after,
-.mx_FeedbackDialog .mx_FeedbackDialog_section:before {
- content: "";
- position: absolute;
- width: 40px;
- height: 40px;
- left: 0;
- top: 0;
-}
-
-.mx_FeedbackDialog .mx_FeedbackDialog_section:before {
- background-color: #c1c6cd;
- border-radius: 20px;
-}
-
-.mx_FeedbackDialog .mx_FeedbackDialog_section:after {
- background: #fff;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 24px;
- mask-size: 24px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
-}
-
-.mx_FeedbackDialog .mx_FeedbackDialog_reportBug:after {
- -webkit-mask-image: url(../../img/feather-customised/bug.3dc7afa.svg);
- mask-image: url(../../img/feather-customised/bug.3dc7afa.svg);
-}
-
-.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton {
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- font-size: 20px;
- -webkit-transition: font-size 1s, border 0.5s;
- transition: font-size 1s, border 0.5s;
- border-radius: 50%;
- border: 2px solid transparent;
- margin-top: 12px;
- margin-bottom: 24px;
- vertical-align: top;
- cursor: pointer;
-}
-
-.mx_FeedbackDialog
- .mx_FeedbackDialog_rateApp
- .mx_RadioButton
- input[type="radio"]
- + div {
- display: none;
-}
-
-.mx_FeedbackDialog
- .mx_FeedbackDialog_rateApp
- .mx_RadioButton
- .mx_RadioButton_content {
- background: #c1c6cd;
- width: 40px;
- height: 40px;
- text-align: center;
- line-height: 40px;
- border-radius: 20px;
- margin: 5px;
-}
-
-.mx_FeedbackDialog
- .mx_FeedbackDialog_rateApp
- .mx_RadioButton
- .mx_RadioButton_spacer {
- display: none;
-}
-
-.mx_FeedbackDialog
- .mx_FeedbackDialog_rateApp
- .mx_RadioButton
- + .mx_RadioButton {
- margin-left: 16px;
-}
-
-.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton_checked {
- font-size: 24px;
- border-color: #0dbd8b;
-}
-
-.mx_FeedbackDialog .mx_FeedbackDialog_rateApp:after {
- -webkit-mask-image: url(../../img/element-icons/feedback.a91241e.svg);
- mask-image: url(../../img/element-icons/feedback.a91241e.svg);
-}
-
-.mx_ForwardDialog {
- width: 520px;
- color: #2e2f32;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -ms-flex-wrap: nowrap;
- flex-wrap: nowrap;
- min-height: 0;
- height: 80vh;
-}
-
-.mx_ForwardDialog > h3 {
- margin: 0 0 6px;
- color: #737d8c;
- font-size: 1.2rem;
- font-weight: 600;
- line-height: 1.5rem;
-}
-
-.mx_ForwardDialog > .mx_ForwardDialog_preview {
- max-height: 30%;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- overflow-y: auto;
-}
-
-.mx_ForwardDialog
- > .mx_ForwardDialog_preview
- .mx_EventTile[data-layout="bubble"] {
- margin-top: 20px;
-}
-
-.mx_ForwardDialog > .mx_ForwardDialog_preview div {
- pointer-events: none;
-}
-
-.mx_ForwardDialog > .mx_ForwardDialog_preview .mx_EventTile_e2eIcon_unencrypted,
-.mx_ForwardDialog > .mx_ForwardDialog_preview .mx_EventTile_msgOption,
-.mx_ForwardDialog > .mx_ForwardDialog_preview .mx_MFileBody_download {
- display: none;
-}
-
-.mx_ForwardDialog > hr {
- width: 100%;
- border: none;
- border-top: 1px solid #e7e7e7;
- margin: 12px 0;
-}
-
-.mx_ForwardDialog > .mx_ForwardList {
- display: contents;
-}
-
-.mx_ForwardDialog > .mx_ForwardList .mx_SearchBox {
- margin: 0 0 15px;
- -webkit-box-flex: 0;
- -ms-flex-positive: 0;
- flex-grow: 0;
-}
-
-.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_content {
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
-}
-
-.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_noResults {
- display: block;
- margin-top: 24px;
-}
-
-.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results:not(:first-child) {
- margin-top: 24px;
-}
-
-.mx_ForwardDialog
- > .mx_ForwardList
- .mx_ForwardList_results
- .mx_ForwardList_entry {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
- height: 32px;
- padding: 6px;
- border-radius: 8px;
-}
-
-.mx_ForwardDialog
- > .mx_ForwardList
- .mx_ForwardList_results
- .mx_ForwardList_entry:hover {
- background-color: hsla(0, 0%, 91%, 0.77);
-}
-
-.mx_ForwardDialog
- > .mx_ForwardList
- .mx_ForwardList_results
- .mx_ForwardList_entry
- .mx_ForwardList_roomButton {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- margin-right: 12px;
- min-width: 0;
-}
-
-.mx_ForwardDialog
- > .mx_ForwardList
- .mx_ForwardList_results
- .mx_ForwardList_entry
- .mx_ForwardList_roomButton
- .mx_DecoratedRoomAvatar {
- margin-right: 12px;
-}
-
-.mx_ForwardDialog
- > .mx_ForwardList
- .mx_ForwardList_results
- .mx_ForwardList_entry
- .mx_ForwardList_roomButton
- .mx_ForwardList_entry_name {
- font-size: 1.5rem;
- line-height: 30px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- margin-right: 12px;
-}
-
-.mx_ForwardDialog
- > .mx_ForwardList
- .mx_ForwardList_results
- .mx_ForwardList_entry
- .mx_ForwardList_sendButton {
- position: relative;
-}
-
-.mx_ForwardDialog
- > .mx_ForwardList
- .mx_ForwardList_results
- .mx_ForwardList_entry
- .mx_ForwardList_sendButton:not(.mx_ForwardList_canSend)
- .mx_ForwardList_sendLabel {
- visibility: hidden;
-}
-
-.mx_ForwardDialog
- > .mx_ForwardList
- .mx_ForwardList_results
- .mx_ForwardList_entry
- .mx_ForwardList_sendButton
- .mx_ForwardList_sendIcon,
-.mx_ForwardDialog
- > .mx_ForwardList
- .mx_ForwardList_results
- .mx_ForwardList_entry
- .mx_ForwardList_sendButton
- .mx_NotificationBadge {
- position: absolute;
-}
-
-.mx_ForwardDialog
- > .mx_ForwardList
- .mx_ForwardList_results
- .mx_ForwardList_entry
- .mx_ForwardList_sendButton
- .mx_NotificationBadge {
- background-color: #fff;
-}
-
-.mx_ForwardDialog
- > .mx_ForwardList
- .mx_ForwardList_results
- .mx_ForwardList_entry
- .mx_ForwardList_sendButton.mx_ForwardList_sending
- .mx_ForwardList_sendIcon {
- background-color: #0dbd8b;
- -webkit-mask-image: url(../../img/element-icons/circle-sending.bcca6aa.svg);
- mask-image: url(../../img/element-icons/circle-sending.bcca6aa.svg);
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 14px;
- mask-size: 14px;
- width: 14px;
- height: 14px;
-}
-
-.mx_ForwardDialog
- > .mx_ForwardList
- .mx_ForwardList_results
- .mx_ForwardList_entry
- .mx_ForwardList_sendButton.mx_ForwardList_sent
- .mx_ForwardList_sendIcon {
- background-color: #0dbd8b;
- -webkit-mask-image: url(../../img/element-icons/circle-sent.5079cbe.svg);
- mask-image: url(../../img/element-icons/circle-sent.5079cbe.svg);
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 14px;
- mask-size: 14px;
- width: 14px;
- height: 14px;
-}
-
-.mx_GroupAddressPicker_checkboxContainer {
- margin-top: 10px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_HostSignupDialog {
- width: 90vw;
- max-width: 580px;
- height: 80vh;
- max-height: 600px;
- background-color: #fff;
-}
-
-.mx_HostSignupDialog .mx_HostSignupDialog_info {
- text-align: center;
-}
-
-.mx_HostSignupDialog
- .mx_HostSignupDialog_info
- .mx_HostSignupDialog_content_top {
- margin-bottom: 24px;
-}
-
-.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_paragraphs {
- text-align: left;
- padding-left: 25%;
- padding-right: 25%;
-}
-
-.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_buttons {
- margin-bottom: 24px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_HostSignupDialog
- .mx_HostSignupDialog_info
- .mx_HostSignupDialog_buttons
- button {
- padding: 12px;
- margin: 0 16px;
-}
-
-.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_footer {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-align: baseline;
- -ms-flex-align: baseline;
- align-items: baseline;
-}
-
-.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_footer img {
- padding-right: 5px;
-}
-
-.mx_HostSignupDialog iframe {
- width: 100%;
- height: 100%;
- border: none;
- background-color: #fff;
- min-height: 540px;
-}
-
-.mx_HostSignupDialog_text_dark {
- color: #2e2f32;
-}
-
-.mx_HostSignupDialog_text_light {
- color: #737d8c;
-}
-
-.mx_HostSignup_maximize_button {
- -webkit-mask: url(../../img/feather-customised/maximise.dc32127.svg);
- mask: url(../../img/feather-customised/maximise.dc32127.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: cover;
- mask-size: cover;
- right: 10px;
-}
-
-.mx_HostSignup_maximize_button,
-.mx_HostSignup_minimize_button {
- width: 14px;
- height: 14px;
- background-color: #c1c1c1;
- cursor: pointer;
- position: absolute;
- top: 10px;
-}
-
-.mx_HostSignup_minimize_button {
- -webkit-mask: url(../../img/feather-customised/minimise.aec9142.svg);
- mask: url(../../img/feather-customised/minimise.aec9142.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: cover;
- mask-size: cover;
- right: 25px;
-}
-
-.mx_HostSignup_persisted {
- width: 90vw;
- max-width: 580px;
- height: 80vh;
- max-height: 600px;
- top: 0;
- left: 0;
- position: fixed;
- display: none;
-}
-
-.mx_HostSignupDialog_minimized {
- position: fixed;
- bottom: 80px;
- right: 26px;
- width: 314px;
- height: 217px;
- overflow: hidden;
-}
-
-.mx_HostSignupDialog_minimized.mx_Dialog {
- padding: 12px;
-}
-
-.mx_HostSignupDialog_minimized .mx_Dialog_title {
- text-align: left !important;
- padding-left: 20px;
- font-size: 1.5rem;
-}
-
-.mx_HostSignupDialog_minimized iframe {
- width: 100%;
- height: 100%;
- border: none;
- background-color: #fff;
-}
-
-.mx_IncomingSasDialog_opponentProfile_image {
- position: relative;
-}
-
-.mx_IncomingSasDialog_opponentProfile h2 {
- display: inline-block;
- margin-left: 10px;
-}
-
-.mx_InviteDialog_transferWrapper .mx_Dialog {
- padding-bottom: 16px;
-}
-
-.mx_InviteDialog_addressBar {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- margin: 8px 45px 0 0;
-}
-
-.mx_InviteDialog_addressBar .mx_InviteDialog_editor {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- width: 100%;
- background-color: #f3f8fd;
- border-radius: 4px;
- min-height: 25px;
- padding-left: 8px;
- overflow-x: hidden;
- overflow-y: auto;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
-}
-
-.mx_InviteDialog_addressBar .mx_InviteDialog_editor .mx_InviteDialog_userTile {
- margin: 6px 6px 0 0;
- display: inline-block;
- min-width: -webkit-max-content;
- min-width: -moz-max-content;
- min-width: max-content;
-}
-
-.mx_InviteDialog_addressBar .mx_InviteDialog_editor > input[type="text"] {
- margin: 6px 0 !important;
- height: 24px;
- line-height: 2.4rem;
- font-size: 1.4rem;
- padding-left: 12px;
- border: 0 !important;
- outline: 0 !important;
- resize: none;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- min-width: 40%;
- -webkit-box-flex: 1 !important;
- -ms-flex: 1 !important;
- flex: 1 !important;
- color: #2e2f32 !important;
-}
-
-.mx_InviteDialog_addressBar .mx_InviteDialog_goButton {
- min-width: 48px;
- margin-left: 10px;
- height: 25px;
- line-height: 2.5rem;
-}
-
-.mx_InviteDialog_addressBar .mx_InviteDialog_buttonAndSpinner .mx_Spinner {
- width: 20px;
- height: 20px;
- margin-left: 5px;
- display: inline-block;
- vertical-align: middle;
-}
-
-.mx_InviteDialog_section {
- padding-bottom: 4px;
-}
-
-.mx_InviteDialog_section h3 {
- font-size: 1.2rem;
- color: #61708b;
- font-weight: 700;
- text-transform: uppercase;
-}
-
-.mx_InviteDialog_section > p {
- margin: 0;
-}
-
-.mx_InviteDialog_section > span {
- color: #2e2f32;
-}
-
-.mx_InviteDialog_section .mx_InviteDialog_subname {
- margin-bottom: 10px;
- margin-top: -10px;
- font-size: 1.2rem;
- color: #61708b;
-}
-
-.mx_InviteDialog_section_hidden_suggestions_disclaimer {
- padding: 8px 0 16px;
- font-size: 1.4rem;
-}
-
-.mx_InviteDialog_section_hidden_suggestions_disclaimer > span {
- color: #2e2f32;
- font-weight: 600;
-}
-
-.mx_InviteDialog_section_hidden_suggestions_disclaimer > p {
- margin: 0;
-}
-
-.mx_InviteDialog_footer {
- border-top: 1px solid #e7e7e7;
-}
-
-.mx_InviteDialog_footer > h3 {
- margin: 12px 0;
- font-size: 1.2rem;
- color: #61708b;
- font-weight: 700;
- text-transform: uppercase;
-}
-
-.mx_InviteDialog_footer .mx_InviteDialog_footer_link {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
- border-radius: 4px;
- border: 1px solid #747474;
- padding: 8px;
-}
-
-.mx_InviteDialog_footer .mx_InviteDialog_footer_link > a {
- text-decoration: none;
- -ms-flex-negative: 1;
- flex-shrink: 1;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.mx_InviteDialog_footer .mx_InviteDialog_footer_link_copy {
- -ms-flex-negative: 0;
- flex-shrink: 0;
- cursor: pointer;
- margin-left: 20px;
- display: inherit;
-}
-
-.mx_InviteDialog_footer .mx_InviteDialog_footer_link_copy > div {
- -webkit-mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
- mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
- background-color: #2e2f32;
- margin-left: 5px;
- width: 20px;
- height: 20px;
- background-repeat: no-repeat;
-}
-
-.mx_InviteDialog_roomTile {
- cursor: pointer;
- padding: 5px 10px;
-}
-
-.mx_InviteDialog_roomTile:hover {
- background-color: #f3f8fd;
- border-radius: 4px;
-}
-
-.mx_InviteDialog_roomTile * {
- vertical-align: middle;
-}
-
-.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_avatarStack {
- display: inline-block;
- position: relative;
- width: 36px;
- height: 36px;
-}
-
-.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_avatarStack > * {
- position: absolute;
- top: 0;
- left: 0;
-}
-
-.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_selected {
- width: 36px;
- height: 36px;
- border-radius: 36px;
- background-color: #368bd6;
- display: inline-block;
- position: relative;
-}
-
-.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_selected:before {
- content: "";
- width: 24px;
- height: 24px;
- grid-column: 1;
- grid-row: 1;
- -webkit-mask-image: url(../../img/feather-customised/check.5745b4e.svg);
- mask-image: url(../../img/feather-customised/check.5745b4e.svg);
- -webkit-mask-size: 100%;
- mask-size: 100%;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- position: absolute;
- top: 6px;
- left: 6px;
- background-color: #fff;
-}
-
-.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_nameStack {
- display: inline-block;
- overflow: hidden;
-}
-
-.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_name {
- font-weight: 600;
- font-size: 1.4rem;
- color: #2e2f32;
- margin-left: 7px;
-}
-
-.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_userId {
- font-size: 1.2rem;
- color: #61708b;
- margin-left: 7px;
-}
-
-.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_name,
-.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_userId {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_time {
- text-align: right;
- font-size: 1.2rem;
- color: #61708b;
- float: right;
- line-height: 3.6rem;
-}
-
-.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_highlight {
- font-weight: 900;
-}
-
-.mx_InviteDialog_userTile {
- margin-right: 8px;
-}
-
-.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill {
- background-color: #368bd6;
- border-radius: 12px;
- display: inline-block;
- height: 24px;
- line-height: 2.4rem;
- padding-left: 8px;
- padding-right: 8px;
- color: #fff;
-}
-
-.mx_InviteDialog_userTile
- .mx_InviteDialog_userTile_pill
- .mx_InviteDialog_userTile_avatar {
- border-radius: 20px;
- position: relative;
- left: -5px;
- top: 2px;
-}
-
-.mx_InviteDialog_userTile
- .mx_InviteDialog_userTile_pill
- .mx_InviteDialog_userTile_name,
-.mx_InviteDialog_userTile
- .mx_InviteDialog_userTile_pill
- img.mx_InviteDialog_userTile_avatar {
- vertical-align: top;
-}
-
-.mx_InviteDialog_userTile
- .mx_InviteDialog_userTile_pill
- .mx_InviteDialog_userTile_threepidAvatar {
- background-color: #fff;
-}
-
-.mx_InviteDialog_userTile .mx_InviteDialog_userTile_remove {
- display: inline-block;
- margin-left: 4px;
-}
-
-.mx_InviteDialog_other {
- height: 600px;
- padding-left: 20px;
-}
-
-.mx_InviteDialog_other .mx_InviteDialog_userSections {
- height: calc(100% - 115px);
-}
-
-.mx_InviteDialog_content {
- height: calc(100% - 36px);
- overflow: hidden;
-}
-
-.mx_InviteDialog_transfer {
- width: 496px;
- height: 466px;
-}
-
-.mx_InviteDialog_transfer,
-.mx_InviteDialog_transfer .mx_InviteDialog_content {
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_InviteDialog_transfer .mx_InviteDialog_content .mx_TabbedView {
- height: calc(100% - 60px);
-}
-
-.mx_InviteDialog_transfer .mx_InviteDialog_content {
- overflow: visible;
-}
-
-.mx_InviteDialog_transfer .mx_InviteDialog_addressBar {
- margin-top: 8px;
-}
-
-.mx_InviteDialog_transfer input[type="checkbox"] {
- margin-right: 8px;
-}
-
-.mx_InviteDialog_userSections {
- margin-top: 4px;
- overflow-y: auto;
- padding: 0 45px 4px 0;
-}
-
-.mx_InviteDialog_hasFooter .mx_InviteDialog_userSections {
- height: calc(100% - 175px);
-}
-
-.mx_InviteDialog_helpText {
- margin: 0;
-}
-
-.mx_InviteDialog_helpText .mx_AccessibleButton_kind_link {
- padding: 0;
-}
-
-.mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField {
- border-top: 0;
- border-left: 0;
- border-right: 0;
- border-radius: 0;
- margin-top: 0;
- border-color: #c1c6cd;
-}
-
-.mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField input {
- font-size: 18px;
- font-weight: 600;
- padding-top: 0;
-}
-
-.mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField:focus-within {
- border-color: #0dbd8b;
-}
-
-.mx_InviteDialog_dialPadField .mx_Field_postfix {
- border-left: none;
-}
-
-.mx_InviteDialog_dialPad {
- width: 224px;
- margin-top: 16px;
- margin-left: auto;
- margin-right: auto;
-}
-
-.mx_InviteDialog_dialPad .mx_DialPad {
- grid-row-gap: 16px;
- row-gap: 16px;
- grid-column-gap: 48px;
- -webkit-column-gap: 48px;
- -moz-column-gap: 48px;
- column-gap: 48px;
- margin-left: auto;
- margin-right: auto;
-}
-
-.mx_InviteDialog_transferConsultConnect {
- padding-top: 16px;
- position: relative;
- width: 496px;
- left: -24px;
- padding-left: 24px;
- padding-right: 24px;
- border-top: 1px solid #e3e8f0;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_InviteDialog_transferConsultConnect_pushRight {
- margin-left: auto;
-}
-
-.mx_InviteDialog_userDirectoryIcon:before {
- -webkit-mask-image: url(../../img/voip/tab-userdirectory.cc3ed9a.svg);
- mask-image: url(../../img/voip/tab-userdirectory.cc3ed9a.svg);
-}
-
-.mx_InviteDialog_dialPadIcon:before {
- -webkit-mask-image: url(../../img/voip/tab-dialpad.a4a190e.svg);
- mask-image: url(../../img/voip/tab-dialpad.a4a190e.svg);
-}
-
-.mx_InviteDialog_multiInviterError > h4 {
- font-size: 1.5rem;
- line-height: 2.4rem;
- color: #737d8c;
- font-weight: 400;
-}
-
-.mx_InviteDialog_multiInviterError
- > div
- .mx_InviteDialog_multiInviterError_entry {
- margin-bottom: 24px;
-}
-
-.mx_InviteDialog_multiInviterError
- > div
- .mx_InviteDialog_multiInviterError_entry
- .mx_InviteDialog_multiInviterError_entry_userProfile
- .mx_InviteDialog_multiInviterError_entry_name {
- margin-left: 6px;
- font-size: 1.5rem;
- line-height: 2.4rem;
- font-weight: 600;
- color: #2e2f32;
-}
-
-.mx_InviteDialog_multiInviterError
- > div
- .mx_InviteDialog_multiInviterError_entry
- .mx_InviteDialog_multiInviterError_entry_userProfile
- .mx_InviteDialog_multiInviterError_entry_userId {
- margin-left: 6px;
- font-size: 1.2rem;
- line-height: 1.5rem;
- color: #8d99a5;
-}
-
-.mx_InviteDialog_multiInviterError
- > div
- .mx_InviteDialog_multiInviterError_entry
- .mx_InviteDialog_multiInviterError_entry_error {
- margin-left: 32px;
- font-size: 1.5rem;
- line-height: 2.4rem;
- color: #ff4b55;
-}
-
-.mx_KeyboardShortcutsDialog {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- margin-bottom: -50px;
- max-height: 1100px;
-}
-
-.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_category {
- width: 33.3333%;
- margin: 0 0 40px;
-}
-
-.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_category > div {
- padding-left: 5px;
-}
-
-.mx_KeyboardShortcutsDialog h3 {
- margin: 0 0 10px;
-}
-
-.mx_KeyboardShortcutsDialog h5 {
- margin: 15px 0 5px;
- font-weight: 400;
-}
-
-.mx_KeyboardShortcutsDialog kbd {
- padding: 5px;
- border-radius: 4px;
- background-color: #f3f8fd;
- margin-right: 5px;
- min-width: 20px;
- text-align: center;
- display: inline-block;
- border: 1px solid #e9edf1;
- -webkit-box-shadow: 0 2px #e9edf1;
- box-shadow: 0 2px #e9edf1;
- margin-bottom: 4px;
- text-transform: capitalize;
-}
-
-.mx_KeyboardShortcutsDialog kbd + kbd {
- margin-left: 5px;
-}
-
-.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_inline div {
- display: inline;
-}
-
-.mx_ManageRestrictedJoinRuleDialog,
-.mx_ManageRestrictedJoinRuleDialog_wrapper .mx_Dialog {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_ManageRestrictedJoinRuleDialog {
- width: 480px;
- color: #2e2f32;
- -ms-flex-wrap: nowrap;
- flex-wrap: nowrap;
- min-height: 0;
- height: 60vh;
-}
-
-.mx_ManageRestrictedJoinRuleDialog .mx_SearchBox {
- margin: 0 0 15px;
- -webkit-box-flex: 0;
- -ms-flex-positive: 0;
- flex-grow: 0;
-}
-
-.mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_content {
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
-}
-
-.mx_ManageRestrictedJoinRuleDialog
- .mx_ManageRestrictedJoinRuleDialog_noResults {
- display: block;
- margin-top: 24px;
-}
-
-.mx_ManageRestrictedJoinRuleDialog
- .mx_ManageRestrictedJoinRuleDialog_section:not(:first-child) {
- margin-top: 24px;
-}
-
-.mx_ManageRestrictedJoinRuleDialog
- .mx_ManageRestrictedJoinRuleDialog_section
- > h3 {
- margin: 0;
- color: #737d8c;
- font-size: 1.2rem;
- font-weight: 600;
- line-height: 1.5rem;
-}
-
-.mx_ManageRestrictedJoinRuleDialog
- .mx_ManageRestrictedJoinRuleDialog_section
- .mx_ManageRestrictedJoinRuleDialog_entry {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- margin-top: 12px;
-}
-
-.mx_ManageRestrictedJoinRuleDialog
- .mx_ManageRestrictedJoinRuleDialog_section
- .mx_ManageRestrictedJoinRuleDialog_entry
- > div {
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
-}
-
-.mx_ManageRestrictedJoinRuleDialog
- .mx_ManageRestrictedJoinRuleDialog_section
- .mx_ManageRestrictedJoinRuleDialog_entry
- .mx_RoomAvatar_isSpaceRoom
- img,
-.mx_ManageRestrictedJoinRuleDialog
- .mx_ManageRestrictedJoinRuleDialog_section
- .mx_ManageRestrictedJoinRuleDialog_entry
- img.mx_RoomAvatar_isSpaceRoom {
- border-radius: 4px;
-}
-
-.mx_ManageRestrictedJoinRuleDialog
- .mx_ManageRestrictedJoinRuleDialog_section
- .mx_ManageRestrictedJoinRuleDialog_entry
- .mx_ManageRestrictedJoinRuleDialog_entry_name {
- margin: 0 8px;
- font-size: 1.5rem;
- line-height: 30px;
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
-}
-
-.mx_ManageRestrictedJoinRuleDialog
- .mx_ManageRestrictedJoinRuleDialog_section
- .mx_ManageRestrictedJoinRuleDialog_entry
- .mx_ManageRestrictedJoinRuleDialog_entry_description {
- margin-top: 8px;
- font-size: 1.2rem;
- line-height: 1.5rem;
- color: #8d99a5;
-}
-
-.mx_ManageRestrictedJoinRuleDialog
- .mx_ManageRestrictedJoinRuleDialog_section
- .mx_ManageRestrictedJoinRuleDialog_entry
- .mx_Checkbox {
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_ManageRestrictedJoinRuleDialog
- .mx_ManageRestrictedJoinRuleDialog_section_spaces
- .mx_BaseAvatar {
- margin-right: 12px;
-}
-
-.mx_ManageRestrictedJoinRuleDialog
- .mx_ManageRestrictedJoinRuleDialog_section_spaces
- .mx_BaseAvatar_image {
- border-radius: 8px;
-}
-
-.mx_ManageRestrictedJoinRuleDialog
- .mx_ManageRestrictedJoinRuleDialog_section_info {
- position: relative;
- border-radius: 8px;
- margin: 12px 0;
- padding: 8px 8px 8px 42px;
- background-color: #f3f8fd;
- font-size: 1.2rem;
- line-height: 1.5rem;
- color: #737d8c;
-}
-
-.mx_ManageRestrictedJoinRuleDialog
- .mx_ManageRestrictedJoinRuleDialog_section_info:before {
- content: "";
- position: absolute;
- left: 10px;
- top: calc(50% - 8px);
- height: 16px;
- width: 16px;
- background-color: #737d8c;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
- mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_footer {
- margin-top: 20px;
-}
-
-.mx_ManageRestrictedJoinRuleDialog
- .mx_ManageRestrictedJoinRuleDialog_footer
- .mx_ManageRestrictedJoinRuleDialog_footer_buttons {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- width: -webkit-max-content;
- width: -moz-max-content;
- width: max-content;
- margin-left: auto;
-}
-
-.mx_ManageRestrictedJoinRuleDialog
- .mx_ManageRestrictedJoinRuleDialog_footer
- .mx_ManageRestrictedJoinRuleDialog_footer_buttons
- .mx_AccessibleButton {
- display: inline-block;
-}
-
-.mx_ManageRestrictedJoinRuleDialog
- .mx_ManageRestrictedJoinRuleDialog_footer
- .mx_ManageRestrictedJoinRuleDialog_footer_buttons
- .mx_AccessibleButton
- + .mx_AccessibleButton {
- margin-left: 24px;
-}
-
-.mx_MessageEditHistoryDialog .mx_Dialog_header > .mx_Dialog_title {
- text-align: center;
-}
-
-.mx_MessageEditHistoryDialog {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- max-height: 60vh;
-}
-
-.mx_MessageEditHistoryDialog_scrollPanel {
- -webkit-box-flex: 1;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
-}
-
-.mx_MessageEditHistoryDialog_error {
- color: #ff4b55;
- text-align: center;
-}
-
-.mx_MessageEditHistoryDialog_edits {
- list-style-type: none;
- font-size: 1.4rem;
- padding: 0;
- color: #2e2f32;
-}
-
-.mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_deletion,
-.mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_insertion {
- padding: 0 2px;
-}
-
-.mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_deletion {
- color: #ff4c55;
- background-color: rgba(255, 76, 85, 0.1);
- text-decoration: line-through;
-}
-
-.mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_insertion {
- color: #1aa97b;
- background-color: rgba(26, 169, 123, 0.1);
- text-decoration: underline;
-}
-
-.mx_MessageEditHistoryDialog_edits .mx_EventTile_content,
-.mx_MessageEditHistoryDialog_edits .mx_EventTile_line {
- margin-right: 0;
-}
-
-.mx_MessageEditHistoryDialog_edits .mx_MessageActionBar .mx_AccessibleButton {
- font-size: 1rem;
- padding: 0 8px;
-}
-
-.mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning {
- margin-bottom: 24px;
-}
-
-.mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning > img {
- vertical-align: middle;
- margin-right: 8px;
-}
-
-.mx_ModalWidgetDialog .mx_ModalWidgetDialog_buttons {
- float: right;
- margin-top: 24px;
-}
-
-.mx_ModalWidgetDialog
- .mx_ModalWidgetDialog_buttons
- .mx_AccessibleButton
- + .mx_AccessibleButton {
- margin-left: 8px;
-}
-
-.mx_ModalWidgetDialog iframe {
- width: 100%;
- height: 450px;
- border: 0;
- border-radius: 8px;
-}
-
-.mx_NewSessionReviewDialog_header {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- margin-top: 0;
-}
-
-.mx_NewSessionReviewDialog_headerIcon {
- width: 24px;
- height: 24px;
- margin-right: 4px;
- position: relative;
-}
-
-.mx_NewSessionReviewDialog_deviceName {
- font-weight: 600;
-}
-
-.mx_NewSessionReviewDialog_deviceID {
- font-size: 1.2rem;
- color: #8d99a5;
-}
-
-.mx_RegistrationEmailPromptDialog {
- width: 417px;
-}
-
-.mx_RegistrationEmailPromptDialog .mx_Dialog_content {
- margin-bottom: 24px;
- color: #8d99a5;
-}
-
-.mx_RegistrationEmailPromptDialog .mx_Dialog_primary {
- width: 100%;
-}
-
-.mx_RoomSettingsDialog_settingsIcon:before {
- -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
- mask-image: url(../../img/element-icons/settings.6b381af.svg);
-}
-
-.mx_RoomSettingsDialog_securityIcon:before {
- -webkit-mask-image: url(../../img/element-icons/security.66f2fa6.svg);
- mask-image: url(../../img/element-icons/security.66f2fa6.svg);
-}
-
-.mx_RoomSettingsDialog_rolesIcon:before {
- -webkit-mask-image: url(../../img/element-icons/room/settings/roles.bad9a9e.svg);
- mask-image: url(../../img/element-icons/room/settings/roles.bad9a9e.svg);
-}
-
-.mx_RoomSettingsDialog_notificationsIcon:before {
- -webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
- mask-image: url(../../img/element-icons/notifications.d298b39.svg);
-}
-
-.mx_RoomSettingsDialog_bridgesIcon:before {
- -webkit-mask-image: url(../../img/feather-customised/bridge.b2ca042.svg);
- mask-image: url(../../img/feather-customised/bridge.b2ca042.svg);
-}
-
-.mx_RoomSettingsDialog_warningIcon:before {
- -webkit-mask-image: url(../../img/element-icons/room/settings/advanced.e079c15.svg);
- mask-image: url(../../img/element-icons/room/settings/advanced.e079c15.svg);
-}
-
-.mx_RoomSettingsDialog .mx_Dialog_title {
- -ms-text-overflow: ellipsis;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- margin: 0 auto;
- padding-right: 80px;
-}
-
-.mx_RoomSettingsDialog
- .mx_AvatarSetting_avatar
- .mx_AvatarSetting_avatarPlaceholder:before {
- -webkit-mask: url(../../img/feather-customised/image.a8671b8.svg);
- mask: url(../../img/feather-customised/image.a8671b8.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 36px;
- mask-size: 36px;
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_RoomSettingsDialog_BridgeList {
- padding: 0;
-}
-
-.mx_RoomSettingsDialog_BridgeList .mx_AccessibleButton {
- display: inline;
- margin: 0;
- padding: 0;
-}
-
-.mx_RoomSettingsDialog_BridgeList li {
- list-style-type: none;
- padding: 5px;
- margin-bottom: 8px;
- border: 1px solid transparent;
- border-radius: 5px;
-}
-
-.mx_RoomSettingsDialog_BridgeList li .column-icon {
- float: left;
- padding-right: 10px;
-}
-
-.mx_RoomSettingsDialog_BridgeList li .column-icon * {
- border-radius: 5px;
- border: 1px solid #e3e8f0;
-}
-
-.mx_RoomSettingsDialog_BridgeList li .column-icon .noProtocolIcon {
- width: 48px;
- height: 48px;
- background: #e3e8f0;
- border-radius: 5px;
-}
-
-.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon {
- float: left;
- margin-right: 5px;
-}
-
-.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon img {
- border-radius: 5px;
- border-width: 1px;
- border-color: transparent;
-}
-
-.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon span {
- left: auto;
-}
-
-.mx_RoomSettingsDialog_BridgeList li .column-data {
- display: inline-block;
- width: 85%;
-}
-
-.mx_RoomSettingsDialog_BridgeList li .column-data > h3 {
- margin-top: 0;
- margin-bottom: 0;
- font-size: 16pt;
- color: #2e2f32;
-}
-
-.mx_RoomSettingsDialog_BridgeList li .column-data > * {
- margin-top: 4px;
- margin-bottom: 0;
-}
-
-.mx_RoomSettingsDialog_BridgeList li .column-data .workspace-channel-details {
- color: #2e2f32;
- font-weight: 600;
-}
-
-.mx_RoomSettingsDialog_BridgeList
- li
- .column-data
- .workspace-channel-details
- .channel {
- margin-left: 5px;
-}
-
-.mx_RoomSettingsDialog_BridgeList li .column-data .metadata {
- color: #61708b;
- margin-bottom: 0;
- overflow-y: visible;
- text-overflow: ellipsis;
- white-space: normal;
- padding: 0;
-}
-
-.mx_RoomSettingsDialog_BridgeList li .column-data .metadata > li {
- padding: 0;
- border: 0;
-}
-
-.mx_RoomUpgradeDialog {
- padding-right: 70px;
-}
-
-.mx_RoomUpgradeWarningDialog {
- max-width: 38vw;
- width: 38vw;
-}
-
-.mx_RoomUpgradeWarningDialog .mx_SettingsFlag {
- font-weight: 700;
-}
-
-.mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_ToggleSwitch {
- display: inline-block;
- vertical-align: middle;
- margin-left: 8px;
- float: right;
-}
-
-.mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_SettingsFlag_label {
- display: inline-block;
- vertical-align: middle;
-}
-
-.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content {
- padding-right: 85px;
- color: #2e2f32;
-}
-
-.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content hr {
- border-color: #2e2f32;
- opacity: 0.1;
- border-bottom: none;
-}
-
-.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content ul {
- padding: 16px;
-}
-
-.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content ul li:nth-child(n + 2) {
- margin-top: 16px;
-}
-
-.mx_ServerOfflineDialog
- .mx_ServerOfflineDialog_content
- .mx_ServerOfflineDialog_content_context
- .mx_ServerOfflineDialog_content_context_timestamp {
- display: inline-block;
- width: 115px;
- color: #61708b;
- line-height: 24px;
- vertical-align: top;
-}
-
-.mx_ServerOfflineDialog
- .mx_ServerOfflineDialog_content
- .mx_ServerOfflineDialog_content_context
- .mx_ServerOfflineDialog_content_context_timeline {
- display: inline-block;
- width: calc(100% - 155px);
-}
-
-.mx_ServerOfflineDialog
- .mx_ServerOfflineDialog_content
- .mx_ServerOfflineDialog_content_context
- .mx_ServerOfflineDialog_content_context_timeline
- .mx_ServerOfflineDialog_content_context_timeline_header
- span {
- margin-left: 8px;
- vertical-align: middle;
-}
-
-.mx_ServerOfflineDialog
- .mx_ServerOfflineDialog_content
- .mx_ServerOfflineDialog_content_context
- .mx_ServerOfflineDialog_content_context_timeline
- .mx_ServerOfflineDialog_content_context_txn {
- position: relative;
- margin-top: 8px;
-}
-
-.mx_ServerOfflineDialog
- .mx_ServerOfflineDialog_content
- .mx_ServerOfflineDialog_content_context
- .mx_ServerOfflineDialog_content_context_timeline
- .mx_ServerOfflineDialog_content_context_txn
- .mx_ServerOfflineDialog_content_context_txn_desc {
- width: calc(100% - 100px);
-}
-
-.mx_ServerOfflineDialog
- .mx_ServerOfflineDialog_content
- .mx_ServerOfflineDialog_content_context
- .mx_ServerOfflineDialog_content_context_timeline
- .mx_ServerOfflineDialog_content_context_txn
- .mx_AccessibleButton {
- float: right;
- padding: 0;
-}
-
-.mx_ServerPickerDialog {
- width: 468px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.mx_ServerPickerDialog .mx_Dialog_content {
- margin-bottom: 0;
-}
-
-.mx_ServerPickerDialog .mx_Dialog_content > p {
- color: #737d8c;
- font-size: 1.4rem;
- margin: 16px 0;
-}
-
-.mx_ServerPickerDialog .mx_Dialog_content > p:first-of-type {
- margin-bottom: 40px;
-}
-
-.mx_ServerPickerDialog .mx_Dialog_content > p:last-of-type {
- margin: 0 24px 24px;
-}
-
-.mx_ServerPickerDialog .mx_Dialog_content > h4 {
- font-size: 1.5rem;
- font-weight: 600;
- color: #737d8c;
- margin-left: 8px;
-}
-
-.mx_ServerPickerDialog .mx_Dialog_content > a {
- color: #0dbd8b;
- margin-left: 8px;
-}
-
-.mx_ServerPickerDialog
- .mx_ServerPickerDialog_otherHomeserverRadio
- input[type="radio"]
- + div {
- margin-top: auto;
- margin-bottom: auto;
-}
-
-.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver {
- border-top: none;
- border-left: none;
- border-right: none;
- border-radius: unset;
-}
-
-.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver > input {
- padding-left: 0;
-}
-
-.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver > label {
- margin-left: 0;
-}
-
-.mx_ServerPickerDialog .mx_AccessibleButton_kind_primary {
- width: calc(100% - 64px);
- margin: 0 8px;
- padding: 15px 18px;
-}
-
-.mx_SetEmailDialog_email_input {
- border-radius: 3px;
- border: 1px solid #e7e7e7;
- padding: 9px;
- color: rgba(74, 74, 74, 0.9);
- background-color: #fff;
- font-size: 1.5rem;
- width: 100%;
- max-width: 280px;
- margin-bottom: 10px;
-}
-
-.mx_SetEmailDialog_email_input:focus {
- outline: none;
- -webkit-box-shadow: none;
- box-shadow: none;
- border: 1px solid #0dbd8b;
-}
-
-.mx_RoomSettingsDialog,
-.mx_SpaceSettingsDialog,
-.mx_UserSettingsDialog {
- width: 90vw;
- max-width: 1000px;
- height: 80vh;
-}
-
-.mx_RoomSettingsDialog .mx_TabbedView,
-.mx_SpaceSettingsDialog .mx_TabbedView,
-.mx_UserSettingsDialog .mx_TabbedView {
- top: 65px;
-}
-
-.mx_RoomSettingsDialog .mx_TabbedView .mx_SettingsTab,
-.mx_SpaceSettingsDialog .mx_TabbedView .mx_SettingsTab,
-.mx_UserSettingsDialog .mx_TabbedView .mx_SettingsTab {
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- min-width: 580px;
- padding-right: 100px;
- padding-bottom: 100px;
-}
-
-.mx_RoomSettingsDialog .mx_Dialog_title,
-.mx_SpaceSettingsDialog .mx_Dialog_title,
-.mx_UserSettingsDialog .mx_Dialog_title {
- margin-bottom: 24px;
-}
-
-.mx_ShareDialog hr {
- margin-top: 25px;
- margin-bottom: 25px;
- border-color: #747474;
-}
-
-.mx_ShareDialog_content {
- margin: 10px 0;
-}
-
-.mx_ShareDialog_matrixto {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
- border-radius: 5px;
- border: 1px solid #747474;
- margin-bottom: 10px;
- margin-top: 30px;
- padding: 10px;
-}
-
-.mx_ShareDialog_matrixto a {
- text-decoration: none;
-}
-
-.mx_ShareDialog_matrixto_link {
- -ms-flex-negative: 1;
- flex-shrink: 1;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.mx_ShareDialog_matrixto_copy {
- -ms-flex-negative: 0;
- flex-shrink: 0;
- cursor: pointer;
- margin-left: 20px;
- display: inherit;
-}
-
-.mx_ShareDialog_matrixto_copy:after {
- content: "";
- -webkit-mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
- mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
- background-color: #2e2f32;
- margin-left: 5px;
- width: 20px;
- height: 20px;
- background-repeat: no-repeat;
-}
-
-.mx_ShareDialog_split {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
-}
-
-.mx_ShareDialog_qrcode_container {
- float: left;
- height: 256px;
- width: 256px;
- margin-right: 64px;
-}
-
-.mx_ShareDialog_qrcode_container + .mx_ShareDialog_social_container {
- width: 299px;
-}
-
-.mx_ShareDialog_social_container {
- display: inline-block;
-}
-
-.mx_ShareDialog_social_icon {
- display: inline-grid;
- margin-right: 10px;
- margin-bottom: 10px;
-}
-
-.mx_SlashCommandHelpDialog .mx_SlashCommandHelpDialog_headerRow h2 {
- margin-bottom: 2px;
-}
-
-.mx_SlashCommandHelpDialog .mx_Dialog_content {
- margin-top: 12px;
- margin-bottom: 34px;
-}
-
-.mx_SpaceSettingsDialog {
- color: #2e2f32;
-}
-
-.mx_SpaceSettingsDialog .mx_SpaceSettings_errorText {
- font-weight: 600;
- font-size: 1.2rem;
- line-height: 1.5rem;
- color: #ff4b55;
- margin-bottom: 28px;
-}
-
-.mx_SpaceSettingsDialog .mx_ToggleSwitch {
- display: inline-block;
- vertical-align: middle;
- margin-left: 16px;
-}
-
-.mx_SpaceSettingsDialog
- .mx_SettingsTab_section
- .mx_SettingsTab_section_caption {
- margin-top: 12px;
- margin-bottom: 20px;
-}
-
-.mx_SpaceSettingsDialog .mx_SettingsTab_section + .mx_SettingsTab_subheading {
- border-top: 1px solid #e3e8f0;
- margin-top: 0;
- padding-top: 24px;
-}
-
-.mx_SpaceSettingsDialog .mx_SettingsTab_section .mx_RadioButton {
- margin-top: 8px;
- margin-bottom: 4px;
-}
-
-.mx_SpaceSettingsDialog
- .mx_SettingsTab_section
- .mx_RadioButton
- .mx_RadioButton_content {
- font-weight: 600;
- line-height: 1.8rem;
- color: #2e2f32;
-}
-
-.mx_SpaceSettingsDialog .mx_SettingsTab_section .mx_RadioButton + span {
- font-size: 1.5rem;
- line-height: 1.8rem;
- color: #737d8c;
- margin-left: 26px;
-}
-
-.mx_SpaceSettingsDialog .mx_SettingsTab_section .mx_SettingsTab_showAdvanced {
- margin: 16px 0;
- padding: 0;
-}
-
-.mx_SpaceSettingsDialog .mx_SettingsTab_section .mx_SettingsFlag {
- margin-top: 24px;
-}
-
-.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- margin-top: 64px;
-}
-
-.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons .mx_AccessibleButton {
- display: inline-block;
-}
-
-.mx_SpaceSettingsDialog
- .mx_SpaceSettingsDialog_buttons
- .mx_AccessibleButton_kind_link {
- margin-left: auto;
-}
-
-.mx_SpaceSettingsDialog .mx_AccessibleButton_hasKind {
- padding: 8px 22px;
-}
-
-.mx_SpaceSettingsDialog
- .mx_TabbedView_tabLabel
- .mx_SpaceSettingsDialog_generalIcon:before {
- -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
- mask-image: url(../../img/element-icons/settings.6b381af.svg);
-}
-
-.mx_SpaceSettingsDialog
- .mx_TabbedView_tabLabel
- .mx_SpaceSettingsDialog_visibilityIcon:before {
- -webkit-mask-image: url(../../img/element-icons/eye.23b2229.svg);
- mask-image: url(../../img/element-icons/eye.23b2229.svg);
-}
-
-.mx_TabbedIntegrationManagerDialog .mx_Dialog {
- width: 60%;
- height: 70%;
- overflow: hidden;
- padding: 0;
- max-width: none;
- max-height: none;
- position: relative;
-}
-
-.mx_TabbedIntegrationManagerDialog_container {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
-}
-
-.mx_TabbedIntegrationManagerDialog_container
- .mx_TabbedIntegrationManagerDialog_currentManager {
- width: 100%;
- height: 100%;
- border-top: 1px solid #0dbd8b;
-}
-
-.mx_TabbedIntegrationManagerDialog_container
- .mx_TabbedIntegrationManagerDialog_currentManager
- iframe {
- background-color: #fff;
- border: 0;
- width: 100%;
- height: 100%;
-}
-
-.mx_TabbedIntegrationManagerDialog_tab {
- display: inline-block;
- border: 1px solid #0dbd8b;
- border-bottom: 0;
- border-top-left-radius: 3px;
- border-top-right-radius: 3px;
- padding: 10px 8px;
- margin-right: 5px;
-}
-
-.mx_TabbedIntegrationManagerDialog_currentTab {
- background-color: #0dbd8b;
- color: #fff;
-}
-
-.mx_TermsDialog_forIntegrationManager .mx_Dialog {
- width: 60%;
- height: 70%;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.mx_TermsDialog_termsTableHeader {
- font-weight: 700;
- text-align: left;
-}
-
-.mx_TermsDialog_termsTable {
- font-size: 1.2rem;
- width: 100%;
-}
-
-.mx_TermsDialog_service,
-.mx_TermsDialog_summary {
- padding-right: 10px;
-}
-
-.mx_TermsDialog_link {
- display: inline-block;
- -webkit-mask-image: url(../../img/external-link.a8d3e9b.svg);
- mask-image: url(../../img/external-link.a8d3e9b.svg);
- background-color: #0dbd8b;
- width: 10px;
- height: 10px;
-}
-
-.mx_UntrustedDeviceDialog .mx_Dialog_title {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_UntrustedDeviceDialog .mx_Dialog_title .mx_E2EIcon {
- margin-left: 0;
-}
-
-.mx_UploadConfirmDialog_fileIcon {
- margin-right: 5px;
-}
-
-.mx_UploadConfirmDialog_previewOuter {
- text-align: center;
-}
-
-.mx_UploadConfirmDialog_previewInner {
- display: inline-block;
- text-align: left;
-}
-
-.mx_UploadConfirmDialog_imagePreview {
- max-height: 300px;
- max-width: 100%;
- border-radius: 4px;
- border: 1px solid #c1c1c1;
-}
-
-.mx_UserSettingsDialog_settingsIcon:before {
- -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
- mask-image: url(../../img/element-icons/settings.6b381af.svg);
-}
-
-.mx_UserSettingsDialog_appearanceIcon:before {
- -webkit-mask-image: url(../../img/element-icons/settings/appearance.cdebd40.svg);
- mask-image: url(../../img/element-icons/settings/appearance.cdebd40.svg);
-}
-
-.mx_UserSettingsDialog_voiceIcon:before {
- -webkit-mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
- mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
-}
-
-.mx_UserSettingsDialog_bellIcon:before {
- -webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
- mask-image: url(../../img/element-icons/notifications.d298b39.svg);
-}
-
-.mx_UserSettingsDialog_preferencesIcon:before {
- -webkit-mask-image: url(../../img/element-icons/settings/preference.82bfabd.svg);
- mask-image: url(../../img/element-icons/settings/preference.82bfabd.svg);
-}
-
-.mx_UserSettingsDialog_securityIcon:before {
- -webkit-mask-image: url(../../img/element-icons/security.66f2fa6.svg);
- mask-image: url(../../img/element-icons/security.66f2fa6.svg);
-}
-
-.mx_UserSettingsDialog_helpIcon:before {
- -webkit-mask-image: url(../../img/element-icons/settings/help.68b703f.svg);
- mask-image: url(../../img/element-icons/settings/help.68b703f.svg);
-}
-
-.mx_UserSettingsDialog_labsIcon:before {
- -webkit-mask-image: url(../../img/element-icons/settings/lab-flags.6fbe5e2.svg);
- mask-image: url(../../img/element-icons/settings/lab-flags.6fbe5e2.svg);
-}
-
-.mx_UserSettingsDialog_mjolnirIcon:before {
- -webkit-mask-image: url(../../img/element-icons/room/composer/emoji.52d7369.svg);
- mask-image: url(../../img/element-icons/room/composer/emoji.52d7369.svg);
-}
-
-.mx_UserSettingsDialog_flairIcon:before {
- -webkit-mask-image: url(../../img/element-icons/settings/flair.4227a88.svg);
- mask-image: url(../../img/element-icons/settings/flair.4227a88.svg);
-}
-
-.mx_WidgetCapabilitiesPromptDialog .text-muted {
- font-size: 1.2rem;
-}
-
-.mx_WidgetCapabilitiesPromptDialog .mx_Dialog_content {
- margin-bottom: 16px;
-}
-
-.mx_WidgetCapabilitiesPromptDialog .mx_WidgetCapabilitiesPromptDialog_cap {
- margin-top: 20px;
- font-size: 1.5rem;
- line-height: 1.5rem;
-}
-
-.mx_WidgetCapabilitiesPromptDialog
- .mx_WidgetCapabilitiesPromptDialog_cap
- .mx_WidgetCapabilitiesPromptDialog_byline {
- color: #61708b;
- margin-left: 26px;
- font-size: 1.2rem;
- line-height: 1.2rem;
-}
-
-.mx_WidgetCapabilitiesPromptDialog .mx_Dialog_buttons {
- margin-top: 40px;
-}
-
-.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag {
- line-height: calc(1.4rem + 14px);
- color: #61708b;
- font-size: 1.2rem;
-}
-
-.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch {
- display: inline-block;
- vertical-align: middle;
- margin-right: 8px;
- width: 3.2rem;
- height: 1.5rem;
-}
-
-.mx_WidgetCapabilitiesPromptDialog
- .mx_SettingsFlag
- .mx_ToggleSwitch.mx_ToggleSwitch_on
- > .mx_ToggleSwitch_ball {
- left: calc(100% - 1.5rem);
-}
-
-.mx_WidgetCapabilitiesPromptDialog
- .mx_SettingsFlag
- .mx_ToggleSwitch
- .mx_ToggleSwitch_ball {
- width: 1.5rem;
- height: 1.5rem;
- border-radius: 1.5rem;
-}
-
-.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_SettingsFlag_label {
- display: inline-block;
- vertical-align: middle;
-}
-
-.mx_WidgetOpenIDPermissionsDialog .mx_SettingsFlag .mx_ToggleSwitch {
- display: inline-block;
- vertical-align: middle;
- margin-right: 8px;
-}
-
-.mx_WidgetOpenIDPermissionsDialog .mx_SettingsFlag .mx_SettingsFlag_label {
- display: inline-block;
- vertical-align: middle;
-}
-
-.mx_AccessSecretStorageDialog_reset {
- position: relative;
- padding-left: 24px;
- margin-top: 7px;
-}
-
-.mx_AccessSecretStorageDialog_reset:before {
- content: "";
- display: inline-block;
- position: absolute;
- height: 16px;
- width: 16px;
- left: 0;
- top: 2px;
- background-image: url(../../img/element-icons/warning-badge.413c9a9.svg);
- background-size: contain;
-}
-
-.mx_AccessSecretStorageDialog_reset .mx_AccessSecretStorageDialog_reset_link {
- color: #ff4b55;
-}
-
-.mx_AccessSecretStorageDialog_titleWithIcon:before {
- content: "";
- display: inline-block;
- width: 24px;
- height: 24px;
- margin-right: 8px;
- position: relative;
- top: 5px;
- background-color: #2e2f32;
-}
-
-.mx_AccessSecretStorageDialog_resetBadge:before {
- background-image: url(../../img/element-icons/warning-badge.413c9a9.svg);
- background-size: 24px;
- background-color: transparent;
-}
-
-.mx_AccessSecretStorageDialog_secureBackupTitle:before {
- -webkit-mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
- mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
-}
-
-.mx_AccessSecretStorageDialog_securePhraseTitle:before {
- -webkit-mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
- mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
-}
-
-.mx_AccessSecretStorageDialog_keyStatus {
- height: 30px;
-}
-
-.mx_AccessSecretStorageDialog_passPhraseInput {
- width: 300px;
- border: 1px solid #0dbd8b;
- border-radius: 5px;
- padding: 10px;
-}
-
-.mx_AccessSecretStorageDialog_recoveryKeyEntry {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput {
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
-}
-
-.mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText {
- margin: 16px;
-}
-
-.mx_AccessSecretStorageDialog_recoveryKeyFeedback:before {
- content: "";
- display: inline-block;
- vertical-align: bottom;
- width: 20px;
- height: 20px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 20px;
- mask-size: 20px;
- margin-right: 5px;
-}
-
-.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid {
- color: #0dbd8b;
-}
-
-.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid:before {
- -webkit-mask-image: url(../../img/feather-customised/check.5745b4e.svg);
- mask-image: url(../../img/feather-customised/check.5745b4e.svg);
- background-color: #0dbd8b;
-}
-
-.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid {
- color: #ff4b55;
-}
-
-.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid:before {
- -webkit-mask-image: url(../../img/feather-customised/x.9662221.svg);
- mask-image: url(../../img/feather-customised/x.9662221.svg);
- background-color: #ff4b55;
-}
-
-.mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput {
- display: none;
-}
-
-.mx_CreateCrossSigningDialog {
- width: 560px;
-}
-
-.mx_CreateCrossSigningDialog details .mx_AccessibleButton {
- margin: 1em 0;
-}
-
-.mx_CreateCrossSigningDialog .mx_Dialog_title,
-.mx_CreateKeyBackupDialog .mx_Dialog_title {
- margin-bottom: 1em;
-}
-
-.mx_CreateKeyBackupDialog_primaryContainer {
- padding: 20px;
-}
-
-.mx_CreateKeyBackupDialog_primaryContainer:after {
- content: "";
- clear: both;
- display: block;
-}
-
-.mx_CreateKeyBackupDialog_passPhraseContainer {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: flex-start;
-}
-
-.mx_CreateKeyBackupDialog_passPhraseInput {
- -webkit-box-flex: 0;
- -ms-flex: none;
- flex: none;
- width: 250px;
- border: 1px solid #0dbd8b;
- border-radius: 5px;
- padding: 10px;
- margin-bottom: 1em;
-}
-
-.mx_CreateKeyBackupDialog_passPhraseMatch {
- margin-left: 20px;
-}
-
-.mx_CreateKeyBackupDialog_recoveryKeyHeader {
- margin-bottom: 1em;
-}
-
-.mx_CreateKeyBackupDialog_recoveryKeyContainer {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_CreateKeyBackupDialog_recoveryKey {
- width: 262px;
- padding: 20px;
- color: #888;
- background-color: #f7f7f7;
- margin-right: 12px;
-}
-
-.mx_CreateKeyBackupDialog_recoveryKeyButtons {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_CreateKeyBackupDialog_recoveryKeyButtons button {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- white-space: nowrap;
-}
-
-.mx_CreateKeyBackupDialog details .mx_AccessibleButton {
- margin: 1em 0;
-}
-
-.mx_CreateSecretStorageDialog {
- width: 560px;
-}
-
-.mx_CreateSecretStorageDialog .mx_SettingsFlag {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_CreateSecretStorageDialog .mx_SettingsFlag_label {
- -webkit-box-flex: 1;
- -ms-flex: 1 1 0px;
- flex: 1 1 0;
- min-width: 0;
- font-weight: 600;
-}
-
-.mx_CreateSecretStorageDialog .mx_ToggleSwitch {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- margin-left: 30px;
-}
-
-.mx_CreateSecretStorageDialog details .mx_AccessibleButton {
- margin: 1em 0;
-}
-
-.mx_CreateSecretStorageDialog .mx_Dialog_title {
- margin-bottom: 1em;
-}
-
-.mx_CreateSecretStorageDialog_titleWithIcon:before {
- content: "";
- display: inline-block;
- width: 24px;
- height: 24px;
- margin-right: 8px;
- position: relative;
- top: 5px;
- background-color: #2e2f32;
-}
-
-.mx_CreateSecretStorageDialog_secureBackupTitle:before {
- -webkit-mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
- mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
-}
-
-.mx_CreateSecretStorageDialog_securePhraseTitle:before {
- -webkit-mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
- mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
-}
-
-.mx_CreateSecretStorageDialog_centeredBody,
-.mx_CreateSecretStorageDialog_centeredTitle {
- text-align: center;
-}
-
-.mx_CreateSecretStorageDialog_primaryContainer {
- padding-top: 20px;
-}
-
-.mx_CreateSecretStorageDialog_primaryContainer:after {
- content: "";
- clear: both;
- display: block;
-}
-
-.mx_CreateSecretStorageDialog_primaryContainer .mx_RadioButton {
- margin-bottom: 16px;
- padding: 11px;
-}
-
-.mx_CreateSecretStorageDialog_optionTitle {
- color: #45474a;
- font-weight: 600;
- font-size: 1.8rem;
- padding-bottom: 10px;
-}
-
-.mx_CreateSecretStorageDialog_optionIcon {
- display: inline-block;
- width: 24px;
- height: 24px;
- margin-right: 8px;
- position: relative;
- top: 5px;
- background-color: #2e2f32;
-}
-
-.mx_CreateSecretStorageDialog_optionIcon_securePhrase {
- -webkit-mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
- mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
-}
-
-.mx_CreateSecretStorageDialog_optionIcon_secureBackup {
- -webkit-mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
- mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
-}
-
-.mx_CreateSecretStorageDialog_passPhraseContainer {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: flex-start;
-}
-
-.mx_Field.mx_CreateSecretStorageDialog_passPhraseField {
- margin-top: 0;
-}
-
-.mx_CreateSecretStorageDialog_passPhraseMatch {
- width: 200px;
- margin-left: 20px;
-}
-
-.mx_CreateSecretStorageDialog_recoveryKeyContainer {
- width: 380px;
- margin-left: auto;
- margin-right: auto;
-}
-
-.mx_CreateSecretStorageDialog_recoveryKey {
- font-weight: 700;
- text-align: center;
- padding: 20px;
- color: #888;
- background-color: #f7f7f7;
- border-radius: 6px;
- word-spacing: 1em;
- margin-bottom: 20px;
-}
-
-.mx_CreateSecretStorageDialog_recoveryKeyButtons {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton {
- width: 160px;
- padding-left: 0;
- padding-right: 0;
- white-space: nowrap;
-}
-
-.mx_CreateSecretStorageDialog_continueSpinner {
- margin-top: 33px;
- text-align: right;
-}
-
-.mx_CreateSecretStorageDialog_continueSpinner img {
- width: 20px;
- height: 20px;
-}
-
-.mx_KeyBackupFailedDialog .mx_Dialog_title {
- margin-bottom: 32px;
-}
-
-.mx_KeyBackupFailedDialog_title {
- position: relative;
- padding-left: 45px;
- padding-bottom: 10px;
-}
-
-.mx_KeyBackupFailedDialog_title:before {
- -webkit-mask: url(../../img/e2e/lock-warning-filled.993fb6c.svg);
- mask: url(../../img/e2e/lock-warning-filled.993fb6c.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background-color: #2e2f32;
- content: "";
- position: absolute;
- top: -6px;
- right: 0;
- bottom: 0;
- left: 0;
-}
-
-.mx_KeyBackupFailedDialog .mx_Dialog_buttons {
- margin-top: 36px;
-}
-
-.mx_RestoreKeyBackupDialog_keyStatus {
- height: 30px;
-}
-
-.mx_RestoreKeyBackupDialog_primaryContainer {
- padding: 20px;
-}
-
-.mx_RestoreKeyBackupDialog_passPhraseInput,
-.mx_RestoreKeyBackupDialog_recoveryKeyInput {
- width: 300px;
- border: 1px solid #0dbd8b;
- border-radius: 5px;
- padding: 10px;
-}
-
-.mx_RestoreKeyBackupDialog_content > div {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
- min-height: 110px;
-}
-
-.mx_NetworkDropdown {
- height: 32px;
- position: relative;
- padding-right: 32px;
- margin-left: auto;
- margin-right: 9px;
- margin-top: 12px;
-}
-
-.mx_NetworkDropdown,
-.mx_NetworkDropdown .mx_AccessibleButton {
- width: -webkit-max-content;
- width: -moz-max-content;
- width: max-content;
-}
-
-.mx_NetworkDropdown_menu {
- min-width: 204px;
- margin: 0;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- border-radius: 4px;
- border: 1px solid #c1c1c1;
- background-color: #fff;
- max-height: calc(100vh - 20px);
- overflow-y: auto;
-}
-
-.mx_NetworkDropdown_menu_network {
- font-weight: 700;
-}
-
-.mx_NetworkDropdown_server {
- padding: 12px 0;
- border-bottom: 1px solid #9fa9ba;
-}
-
-.mx_NetworkDropdown_server .mx_NetworkDropdown_server_title {
- padding: 0 10px;
- font-size: 1.5rem;
- font-weight: 600;
- line-height: 2rem;
- margin-bottom: 4px;
- position: relative;
-}
-
-.mx_NetworkDropdown_server
- .mx_NetworkDropdown_server_title
- .mx_AccessibleButton {
- position: absolute;
- display: inline;
- right: 10px;
- height: 16px;
- width: 16px;
- margin-top: 2px;
-}
-
-.mx_NetworkDropdown_server
- .mx_NetworkDropdown_server_title
- .mx_AccessibleButton:after {
- content: "";
- position: absolute;
- width: 16px;
- height: 16px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-image: url(../../img/feather-customised/x.9662221.svg);
- mask-image: url(../../img/feather-customised/x.9662221.svg);
- background-color: #ff4b55;
-}
-
-.mx_NetworkDropdown_server .mx_NetworkDropdown_server_subtitle {
- padding: 0 10px;
- font-size: 1rem;
- line-height: 1.4rem;
- margin-top: -4px;
- margin-bottom: 4px;
- color: #61708b;
-}
-
-.mx_NetworkDropdown_server .mx_NetworkDropdown_server_network {
- font-size: 1.2rem;
- line-height: 1.6rem;
- padding: 4px 10px;
- cursor: pointer;
- position: relative;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
-}
-
-.mx_NetworkDropdown_server
- .mx_NetworkDropdown_server_network[aria-checked="true"]:after {
- content: "";
- position: absolute;
- width: 16px;
- height: 16px;
- right: 10px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-image: url(../../img/feather-customised/check.5745b4e.svg);
- mask-image: url(../../img/feather-customised/check.5745b4e.svg);
- background-color: #0dbd8b;
-}
-
-.mx_NetworkDropdown_server_add:hover,
-.mx_NetworkDropdown_server_network:hover {
- background-color: #f3f8fd;
-}
-
-.mx_NetworkDropdown_server_add {
- padding: 16px 10px 16px 32px;
- position: relative;
- border-radius: 0 0 4px 4px;
-}
-
-.mx_NetworkDropdown_server_add:before {
- content: "";
- position: absolute;
- width: 16px;
- height: 16px;
- left: 7px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-image: url(../../img/feather-customised/plus.38ae979.svg);
- mask-image: url(../../img/feather-customised/plus.38ae979.svg);
- background-color: #61708b;
-}
-
-.mx_NetworkDropdown_handle {
- position: relative;
-}
-
-.mx_NetworkDropdown_handle:after {
- content: "";
- position: absolute;
- width: 26px;
- height: 26px;
- right: -27.5px;
- top: -3px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-image: url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);
- mask-image: url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);
- background-color: #2e2f32;
-}
-
-.mx_NetworkDropdown_handle .mx_NetworkDropdown_handle_server {
- color: #61708b;
- font-size: 1.2rem;
-}
-
-.mx_NetworkDropdown_dialog .mx_Dialog {
- width: 45vw;
-}
-
-.mx_AccessibleButton {
- cursor: pointer;
-}
-
-.mx_AccessibleButton_disabled {
- cursor: default;
-}
-
-.mx_AccessibleButton_hasKind {
- padding: 7px 18px;
- text-align: center;
- border-radius: 8px;
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- font-size: 1.4rem;
-}
-
-.mx_AccessibleButton_kind_primary {
- color: #fff;
- background-color: #0dbd8b;
- font-weight: 600;
-}
-
-.mx_AccessibleButton_kind_primary_outline {
- color: #0dbd8b;
- background-color: #fff;
- border: 1px solid #0dbd8b;
- font-weight: 600;
-}
-
-.mx_AccessibleButton_kind_secondary {
- color: #0dbd8b;
- font-weight: 600;
-}
-
-.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled,
-.mx_AccessibleButton_kind_primary_outline.mx_AccessibleButton_disabled {
- opacity: 0.4;
-}
-
-.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm {
- padding: 5px 12px;
- color: #fff;
- background-color: #0dbd8b;
-}
-
-.mx_AccessibleButton_kind_primary_sm.mx_AccessibleButton_disabled {
- opacity: 0.4;
-}
-
-.mx_AccessibleButton_kind_danger {
- color: #fff;
- background-color: #ff4b55;
-}
-
-.mx_AccessibleButton_kind_danger_outline {
- color: #ff4b55;
- background-color: transparent;
- border: 1px solid #ff4b55;
-}
-
-.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled {
- color: #fff;
- background-color: #f5b6bb;
-}
-
-.mx_AccessibleButton_kind_danger_outline.mx_AccessibleButton_disabled {
- color: #f5b6bb;
- border-color: #f5b6bb;
-}
-
-.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm {
- padding: 5px 12px;
- color: #fff;
- background-color: #ff4b55;
-}
-
-.mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled {
- color: #fff;
- background-color: #f5b6bb;
-}
-
-.mx_AccessibleButton_kind_link {
- color: #0dbd8b;
- background-color: transparent;
-}
-
-.mx_AccessibleButton_kind_link.mx_AccessibleButton_disabled {
- opacity: 0.4;
-}
-
-.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link_sm {
- padding: 5px 12px;
- color: #0dbd8b;
- background-color: transparent;
-}
-
-.mx_AccessibleButton_kind_link_sm.mx_AccessibleButton_disabled {
- opacity: 0.4;
-}
-
-.mx_AddressSelector {
- position: absolute;
- background-color: #fff;
- width: 485px;
- max-height: 116px;
- overflow-y: auto;
- border-radius: 3px;
- border: 1px solid #0dbd8b;
- cursor: pointer;
- z-index: 1;
-}
-
-.mx_AddressSelector.mx_AddressSelector_empty {
- display: none;
-}
-
-.mx_AddressSelector_addressListElement .mx_AddressTile {
- background-color: #fff;
- border: 1px solid #fff;
-}
-
-.mx_AddressSelector_addressListElement.mx_AddressSelector_selected {
- background-color: #f2f5f8;
-}
-
-.mx_AddressSelector_addressListElement.mx_AddressSelector_selected
- .mx_AddressTile {
- background-color: #f2f5f8;
- border: 1px solid #f2f5f8;
-}
-
-.mx_AddressTile {
- display: inline-block;
- border-radius: 3px;
- background-color: rgba(74, 73, 74, 0.1);
- border: 1px solid #e7e7e7;
- line-height: 2.6rem;
- color: #2e2f32;
- font-size: 1.4rem;
- font-weight: 400;
- margin-right: 4px;
-}
-
-.mx_AddressTile.mx_AddressTile_error {
- background-color: rgba(255, 0, 100, 0.1);
- color: #ff4b55;
- border-color: #ff4b55;
-}
-
-.mx_AddressTile_network {
- padding-right: 4px;
-}
-
-.mx_AddressTile_avatar,
-.mx_AddressTile_network {
- display: inline-block;
- position: relative;
- padding-left: 2px;
- vertical-align: middle;
-}
-
-.mx_AddressTile_avatar {
- padding-right: 7px;
-}
-
-.mx_AddressTile_mx {
- display: inline-block;
- margin: 0;
- border: 0;
- padding: 0;
-}
-
-.mx_AddressTile_name {
- display: inline-block;
- padding-right: 4px;
- font-weight: 600;
- overflow: hidden;
- height: 26px;
- vertical-align: middle;
-}
-
-.mx_AddressTile_name.mx_AddressTile_justified {
- width: 180px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- vertical-align: middle;
-}
-
-.mx_AddressTile_id {
- display: inline-block;
- padding-right: 11px;
-}
-
-.mx_AddressTile_id.mx_AddressTile_justified {
- width: 200px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- vertical-align: middle;
-}
-
-.mx_AddressTile_unknownMx {
- display: inline-block;
- font-weight: 600;
- padding-right: 11px;
-}
-
-.mx_AddressTile_unknownMxl.mx_AddressTile_justified {
- width: 380px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- vertical-align: middle;
-}
-
-.mx_AddressTile_email {
- display: inline-block;
- font-weight: 600;
- padding-right: 11px;
-}
-
-.mx_AddressTile_email.mx_AddressTile_justified {
- width: 200px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- vertical-align: middle;
-}
-
-.mx_AddressTile_unknown {
- display: inline-block;
- padding-right: 11px;
-}
-
-.mx_AddressTile_unknown.mx_AddressTile_justified {
- width: 380px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- vertical-align: middle;
-}
-
-.mx_AddressTile_dismiss {
- display: inline-block;
- padding-right: 11px;
- padding-left: 1px;
- cursor: pointer;
-}
-
-.mx_AddressTile_dismiss object {
- pointer-events: none;
-}
-
-.mx_DesktopBuildsNotice {
- text-align: center;
- padding: 0 16px;
-}
-
-.mx_DesktopBuildsNotice > * {
- vertical-align: middle;
-}
-
-.mx_DesktopBuildsNotice > img {
- margin-right: 8px;
-}
-
-.mx_desktopCapturerSourcePicker {
- overflow: hidden;
-}
-
-.mx_desktopCapturerSourcePicker_tabLabels {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- padding: 0 0 8px;
-}
-
-.mx_desktopCapturerSourcePicker_tabLabel,
-.mx_desktopCapturerSourcePicker_tabLabel_selected {
- width: 100%;
- text-align: center;
- border-radius: 8px;
- padding: 8px 0;
- font-size: 1.3rem;
-}
-
-.mx_desktopCapturerSourcePicker_tabLabel_selected {
- background-color: #0dbd8b;
- color: #fff;
-}
-
-.mx_desktopCapturerSourcePicker_panel {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: flex-start;
- height: 500px;
- overflow: overlay;
-}
-
-.mx_desktopCapturerSourcePicker_stream_button {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- margin: 8px;
- border-radius: 4px;
-}
-
-.mx_desktopCapturerSourcePicker_stream_button:focus,
-.mx_desktopCapturerSourcePicker_stream_button:hover {
- background: #fff;
-}
-
-.mx_desktopCapturerSourcePicker_stream_thumbnail {
- margin: 4px;
- width: 312px;
-}
-
-.mx_desktopCapturerSourcePicker_stream_name {
- margin: 0 4px;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- width: 312px;
-}
-
-.mx_DialPadBackspaceButton {
- position: relative;
- height: 28px;
- width: 28px;
-}
-
-.mx_DialPadBackspaceButton:before {
- content: "";
- background-color: #8d97a5;
- width: inherit;
- height: inherit;
- top: 0;
- left: 0;
- position: absolute;
- display: inline-block;
- vertical-align: middle;
- -webkit-mask-image: url(../../img/element-icons/call/delete.833d785.svg);
- mask-image: url(../../img/element-icons/call/delete.833d785.svg);
- -webkit-mask-position: 8px;
- mask-position: 8px;
- -webkit-mask-size: 20px;
- mask-size: 20px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
-}
-
-.mx_DirectorySearchBox {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- padding-left: 9px;
- padding-right: 9px;
-}
-
-.mx_DirectorySearchBox_joinButton {
- display: table-cell;
- padding: 3px 10px;
- background-color: #f2f5f8;
- border-radius: 3px;
- background-image: url(../../img/icon-return.cb24475.svg);
- background-position: 8px 70%;
- background-repeat: no-repeat;
- text-indent: 18px;
- font-weight: 600;
- font-size: 1.2rem;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- cursor: pointer;
-}
-
-.mx_DirectorySearchBox_clear {
- background-color: #ff4b55;
- -webkit-mask: url(../../img/cancel.4b9715b.svg);
- mask: url(../../img/cancel.4b9715b.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 10px;
- mask-size: 10px;
- width: 15px;
- height: 15px;
- cursor: pointer;
-}
-
-.mx_Dropdown {
- position: relative;
- color: #2e2f32;
-}
-
-.mx_Dropdown_disabled {
- opacity: 0.3;
-}
-
-.mx_Dropdown_input {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- position: relative;
- border-radius: 4px;
- border: 1px solid #c7c7c7;
- font-size: 1.2rem;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.mx_Dropdown_input.mx_AccessibleButton_disabled {
- cursor: not-allowed;
-}
-
-.mx_Dropdown_input:focus {
- border-color: #238cf5;
-}
-
-.mx_Dropdown_input.mx_AccessibleButton:focus {
- -webkit-filter: none;
- filter: none;
-}
-
-.mx_Dropdown_arrow {
- width: 10px;
- height: 6px;
- padding-right: 9px;
- -webkit-mask: url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);
- mask: url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background: #2e2f32;
-}
-
-.mx_Dropdown_option {
- height: 35px;
- line-height: 3.5rem;
- padding-left: 8px;
- padding-right: 8px;
-}
-
-.mx_Dropdown_input > .mx_Dropdown_option {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_Dropdown_input > .mx_Dropdown_option,
-.mx_Dropdown_option div {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.mx_Dropdown_option .mx_Dropdown_option_emoji,
-.mx_Dropdown_option img {
- margin: 5px;
- width: 16px;
- vertical-align: middle;
-}
-
-.mx_Dropdown_option_emoji {
- font-size: 1.6rem;
- line-height: 1.6rem;
-}
-
-input.mx_Dropdown_option,
-input.mx_Dropdown_option:focus {
- font-weight: 400;
- border: 0;
- padding-top: 0;
- padding-bottom: 0;
- width: 60%;
-}
-
-.mx_Dropdown_menu {
- position: absolute;
- left: -1px;
- right: -1px;
- top: 100%;
- z-index: 2;
- margin: 0;
- padding: 0;
- border-radius: 4px;
- border: 1px solid #238cf5;
- background-color: #fff;
- max-height: 200px;
- overflow-y: auto;
-}
-
-.mx_Dropdown_menu .mx_Dropdown_option {
- height: auto;
- min-height: 35px;
-}
-
-.mx_Dropdown_menu .mx_Dropdown_option_highlight {
- background-color: #ddd;
-}
-
-.mx_Dropdown_searchPrompt {
- font-weight: 400;
- margin-left: 5px;
- margin-bottom: 5px;
-}
-
-.mx_EditableItemList {
- margin-top: 12px;
- margin-bottom: 10px;
-}
-
-.mx_EditableItem {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- margin-bottom: 5px;
-}
-
-.mx_EditableItem_delete {
- -webkit-box-ordinal-group: 4;
- -ms-flex-order: 3;
- order: 3;
- margin-right: 5px;
- cursor: pointer;
- vertical-align: middle;
- width: 14px;
- height: 14px;
- -webkit-mask-image: url(../../img/feather-customised/cancel.23c2689.svg);
- mask-image: url(../../img/feather-customised/cancel.23c2689.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background-color: #ff4b55;
- -webkit-mask-size: 100%;
- mask-size: 100%;
-}
-
-.mx_EditableItem_email {
- vertical-align: middle;
-}
-
-.mx_EditableItem_promptText {
- margin-right: 10px;
- -webkit-box-ordinal-group: 3;
- -ms-flex-order: 2;
- order: 2;
-}
-
-.mx_EditableItem_confirmBtn {
- margin-right: 5px;
-}
-
-.mx_EditableItem_item {
- -webkit-box-flex: 1;
- -ms-flex: auto 1 0px;
- flex: auto 1 0;
- -webkit-box-ordinal-group: 2;
- -ms-flex-order: 1;
- order: 1;
- width: calc(100% - 14px);
- overflow-x: hidden;
- text-overflow: ellipsis;
-}
-
-.mx_EditableItemList_label {
- margin-bottom: 5px;
-}
-
-.mx_ErrorBoundary {
- width: 100%;
- height: 100%;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_ErrorBoundary,
-.mx_ErrorBoundary_body {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_ErrorBoundary_body {
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- max-width: 400px;
-}
-
-.mx_ErrorBoundary_body .mx_AccessibleButton {
- margin-top: 5px;
-}
-
-.mx_EventListSummary {
- position: relative;
-}
-
-.mx_TextualEvent.mx_EventListSummary_summary {
- font-size: 1.4rem;
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
-}
-
-.mx_EventListSummary_avatars {
- display: inline-block;
- margin-right: 8px;
- padding-top: 8px;
- line-height: 1.2rem;
-}
-
-.mx_EventListSummary_avatars .mx_BaseAvatar {
- margin-right: -4px;
- cursor: pointer;
-}
-
-.mx_EventListSummary_toggle {
- color: #0dbd8b;
- cursor: pointer;
- float: right;
- margin-right: 10px;
- margin-top: 8px;
-}
-
-.mx_EventListSummary_line {
- border-bottom: 1px solid transparent;
- margin-left: 63px;
- line-height: 3rem;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_EventListSummary {
- font-size: 1.3rem;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_EventListSummary .mx_EventTile_line {
- line-height: 2rem;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_EventListSummary_line {
- line-height: 2.2rem;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_EventListSummary_toggle {
- margin-top: 3px;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_TextualEvent.mx_EventListSummary_summary {
- font-size: 1.3rem;
-}
-
-.mx_FacePile .mx_FacePile_faces {
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: reverse;
- -ms-flex-direction: row-reverse;
- flex-direction: row-reverse;
- vertical-align: middle;
-}
-
-.mx_FacePile .mx_FacePile_faces > .mx_FacePile_face + .mx_FacePile_face {
- margin-right: -8px;
-}
-
-.mx_FacePile .mx_FacePile_faces .mx_BaseAvatar_image {
- border: 1px solid #fff;
-}
-
-.mx_FacePile .mx_FacePile_faces .mx_BaseAvatar_initial {
- margin: 1px;
-}
-
-.mx_FacePile .mx_FacePile_faces .mx_FacePile_more {
- position: relative;
- border-radius: 100%;
- width: 30px;
- height: 30px;
- background-color: hsla(0, 0%, 91%, 0.77);
-}
-
-.mx_FacePile .mx_FacePile_faces .mx_FacePile_more:before {
- content: "";
- z-index: 1;
- position: absolute;
- top: 0;
- left: 0;
- height: inherit;
- width: inherit;
- background: #8d99a5;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 20px;
- mask-size: 20px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
- mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
-}
-
-.mx_FacePile .mx_FacePile_summary {
- margin-left: 12px;
- font-size: 1.4rem;
- line-height: 2.4rem;
- color: #8d99a5;
-}
-
-.mx_Field {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- min-width: 0;
- position: relative;
- margin: 1em 0;
- border-radius: 4px;
- -webkit-transition: border-color 0.25s;
- transition: border-color 0.25s;
- border: 1px solid #e7e7e7;
-}
-
-.mx_Field_prefix {
- border-right: 1px solid #e7e7e7;
-}
-
-.mx_Field_postfix {
- border-left: 1px solid #e7e7e7;
-}
-
-.mx_Field input,
-.mx_Field select,
-.mx_Field textarea {
- font-weight: 400;
- font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
- Helvetica, Sans-Serif, Noto Color Emoji;
- font-size: 1.4rem;
- border: none;
- border-radius: 4px;
- padding: 8px 9px;
- color: #2e2f32;
- background-color: #fff;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- min-width: 0;
-}
-
-.mx_Field select {
- -moz-appearance: none;
- -webkit-appearance: none;
-}
-
-.mx_Field_select:before {
- content: "";
- position: absolute;
- top: 15px;
- right: 10px;
- width: 10px;
- height: 6px;
- -webkit-mask: url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);
- mask: url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background-color: #2e2f32;
- z-index: 1;
- pointer-events: none;
-}
-
-.mx_Field:focus-within {
- border-color: #238cf5;
-}
-
-.mx_Field input:focus,
-.mx_Field select:focus,
-.mx_Field textarea:focus {
- outline: 0;
-}
-
-.mx_Field input::-webkit-input-placeholder,
-.mx_Field textarea::-webkit-input-placeholder {
- -webkit-transition: color 0.25s ease-in 0s;
- transition: color 0.25s ease-in 0s;
- color: transparent;
-}
-
-.mx_Field input::-moz-placeholder,
-.mx_Field textarea::-moz-placeholder {
- -moz-transition: color 0.25s ease-in 0s;
- transition: color 0.25s ease-in 0s;
- color: transparent;
-}
-
-.mx_Field input:-ms-input-placeholder,
-.mx_Field textarea:-ms-input-placeholder {
- -ms-transition: color 0.25s ease-in 0s;
- transition: color 0.25s ease-in 0s;
- color: transparent;
-}
-
-.mx_Field input::-ms-input-placeholder,
-.mx_Field textarea::-ms-input-placeholder {
- -ms-transition: color 0.25s ease-in 0s;
- transition: color 0.25s ease-in 0s;
- color: transparent;
-}
-
-.mx_Field input::placeholder,
-.mx_Field textarea::placeholder {
- -webkit-transition: color 0.25s ease-in 0s;
- transition: color 0.25s ease-in 0s;
- color: transparent;
-}
-
-.mx_Field input:placeholder-shown:focus::-webkit-input-placeholder,
-.mx_Field textarea:placeholder-shown:focus::-webkit-input-placeholder {
- -webkit-transition: color 0.25s ease-in 0.1s;
- transition: color 0.25s ease-in 0.1s;
- color: #888;
-}
-
-.mx_Field input:placeholder-shown:focus::-moz-placeholder,
-.mx_Field textarea:placeholder-shown:focus::-moz-placeholder {
- -moz-transition: color 0.25s ease-in 0.1s;
- transition: color 0.25s ease-in 0.1s;
- color: #888;
-}
-
-.mx_Field input:placeholder-shown:focus:-ms-input-placeholder,
-.mx_Field textarea:placeholder-shown:focus:-ms-input-placeholder {
- -ms-transition: color 0.25s ease-in 0.1s;
- transition: color 0.25s ease-in 0.1s;
- color: #888;
-}
-
-.mx_Field input:placeholder-shown:focus::-ms-input-placeholder,
-.mx_Field textarea:placeholder-shown:focus::-ms-input-placeholder {
- -ms-transition: color 0.25s ease-in 0.1s;
- transition: color 0.25s ease-in 0.1s;
- color: #888;
-}
-
-.mx_Field input:-moz-placeholder-shown:focus::placeholder,
-.mx_Field textarea:-moz-placeholder-shown:focus::placeholder {
- -moz-transition: color 0.25s ease-in 0.1s;
- transition: color 0.25s ease-in 0.1s;
- color: #888;
-}
-
-.mx_Field input:-ms-input-placeholder:focus::placeholder,
-.mx_Field textarea:-ms-input-placeholder:focus::placeholder {
- -ms-transition: color 0.25s ease-in 0.1s;
- transition: color 0.25s ease-in 0.1s;
- color: #888;
-}
-
-.mx_Field input:placeholder-shown:focus::placeholder,
-.mx_Field textarea:placeholder-shown:focus::placeholder {
- -webkit-transition: color 0.25s ease-in 0.1s;
- transition: color 0.25s ease-in 0.1s;
- color: #888;
-}
-
-.mx_Field label {
- -webkit-transition: font-size 0.25s ease-out 0.1s, color 0.25s ease-out 0.1s,
- top 0.25s ease-out 0.1s, background-color 0.25s ease-out 0.1s;
- transition: font-size 0.25s ease-out 0.1s, color 0.25s ease-out 0.1s,
- top 0.25s ease-out 0.1s, background-color 0.25s ease-out 0.1s;
- color: #2e2f32;
- background-color: transparent;
- font-size: 1.4rem;
- position: absolute;
- left: 0;
- top: 0;
- margin: 7px 8px;
- padding: 2px;
- pointer-events: none;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- max-width: calc(100% - 20px);
-}
-
-.mx_Field input:not(:-moz-placeholder-shown) + label,
-.mx_Field textarea:not(:-moz-placeholder-shown) + label {
- -moz-transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
- top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
- transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
- top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
- font-size: 1rem;
- top: -13px;
- padding: 0 2px;
- background-color: #fff;
- pointer-events: auto;
-}
-
-.mx_Field input:not(:-ms-input-placeholder) + label,
-.mx_Field textarea:not(:-ms-input-placeholder) + label {
- -ms-transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
- top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
- transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
- top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
- font-size: 1rem;
- top: -13px;
- padding: 0 2px;
- background-color: #fff;
- pointer-events: auto;
-}
-
-.mx_Field_labelAlwaysTopLeft label,
-.mx_Field input:focus + label,
-.mx_Field input:not(:placeholder-shown) + label,
-.mx_Field select + label,
-.mx_Field textarea:focus + label,
-.mx_Field textarea:not(:placeholder-shown) + label {
- -webkit-transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
- top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
- transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
- top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
- font-size: 1rem;
- top: -13px;
- padding: 0 2px;
- background-color: #fff;
- pointer-events: auto;
-}
-
-.mx_Field input:focus + label,
-.mx_Field select:focus + label,
-.mx_Field textarea:focus + label {
- color: #238cf5;
-}
-
-.mx_Field input:disabled,
-.mx_Field input:disabled + label,
-.mx_Field select:disabled,
-.mx_Field select:disabled + label,
-.mx_Field textarea:disabled,
-.mx_Field textarea:disabled + label {
- background-color: #fff;
- color: #888;
-}
-
-.mx_Field_valid.mx_Field,
-.mx_Field_valid.mx_Field:focus-within {
- border-color: #0dbd8b;
-}
-
-.mx_Field_valid.mx_Field:focus-within label,
-.mx_Field_valid.mx_Field label {
- color: #0dbd8b;
-}
-
-.mx_Field_invalid.mx_Field,
-.mx_Field_invalid.mx_Field:focus-within {
- border-color: #ff4b55;
-}
-
-.mx_Field_invalid.mx_Field:focus-within label,
-.mx_Field_invalid.mx_Field label {
- color: #ff4b55;
-}
-
-.mx_Field_tooltip {
- margin-top: -12px;
- margin-left: 4px;
- width: 200px;
-}
-
-.mx_Field_tooltip.mx_Field_valid {
- -webkit-animation: mx_fadeout 1s 2s forwards;
- animation: mx_fadeout 1s 2s forwards;
-}
-
-.mx_Field .mx_Dropdown_input {
- border: initial;
- border-radius: 0;
- border-radius: initial;
-}
-
-.mx_Field .mx_CountryDropdown {
- width: 7.8rem;
-}
-
-.mx_ImageView {
- width: 100%;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_ImageView,
-.mx_ImageView_image_wrapper {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- height: 100%;
-}
-
-.mx_ImageView_image_wrapper {
- pointer-events: auto;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- overflow: hidden;
-}
-
-.mx_ImageView_image {
- -ms-flex-negative: 0;
- flex-shrink: 0;
-}
-
-.mx_ImageView_panel {
- width: 100%;
- height: 68px;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
-}
-
-.mx_ImageView_info_wrapper,
-.mx_ImageView_panel {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_ImageView_info_wrapper {
- pointer-events: auto;
- padding-left: 32px;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- color: #fff;
-}
-
-.mx_ImageView_info {
- padding-left: 12px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_ImageView_info_sender {
- font-weight: 700;
-}
-
-.mx_ImageView_toolbar {
- padding-right: 16px;
- pointer-events: auto;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- grid-gap: 14px;
- gap: 14px;
-}
-
-.mx_ImageView_button {
- padding: 5px;
- display: block;
-}
-
-.mx_ImageView_button:before {
- content: "";
- height: 22px;
- width: 22px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-position: center;
- mask-position: center;
- display: block;
- background-color: #c1c6cd;
-}
-
-.mx_ImageView_button_rotateCW:before {
- -webkit-mask-image: url(../../img/image-view/rotate-cw.60d903e.svg);
- mask-image: url(../../img/image-view/rotate-cw.60d903e.svg);
-}
-
-.mx_ImageView_button_rotateCCW:before {
- -webkit-mask-image: url(../../img/image-view/rotate-ccw.b28ae4a.svg);
- mask-image: url(../../img/image-view/rotate-ccw.b28ae4a.svg);
-}
-
-.mx_ImageView_button_zoomOut:before {
- -webkit-mask-image: url(../../img/image-view/zoom-out.8506f80.svg);
- mask-image: url(../../img/image-view/zoom-out.8506f80.svg);
-}
-
-.mx_ImageView_button_zoomIn:before {
- -webkit-mask-image: url(../../img/image-view/zoom-in.3b3f32e.svg);
- mask-image: url(../../img/image-view/zoom-in.3b3f32e.svg);
-}
-
-.mx_ImageView_button_download:before {
- -webkit-mask-image: url(../../img/image-view/download.2eac468.svg);
- mask-image: url(../../img/image-view/download.2eac468.svg);
-}
-
-.mx_ImageView_button_more:before {
- -webkit-mask-image: url(../../img/image-view/more.0427c6c.svg);
- mask-image: url(../../img/image-view/more.0427c6c.svg);
-}
-
-.mx_ImageView_button_close {
- padding: 0;
- border-radius: 100%;
- background: #21262c;
-}
-
-.mx_ImageView_button_close:before {
- width: 32px;
- height: 32px;
- -webkit-mask-image: url(../../img/image-view/close.97d1731.svg);
- mask-image: url(../../img/image-view/close.97d1731.svg);
- -webkit-mask-size: 40%;
- mask-size: 40%;
-}
-
-.mx_InfoTooltip_icon,
-.mx_InfoTooltip_icon:before {
- width: 16px;
- height: 16px;
- display: inline-block;
-}
-
-.mx_InfoTooltip_icon:before {
- background-color: #61708b;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 16px;
- mask-size: 16px;
- -webkit-mask-position: center;
- mask-position: center;
- content: "";
- vertical-align: middle;
-}
-
-.mx_InfoTooltip_icon_info:before {
- -webkit-mask-image: url(../../img/element-icons/info.dc07e19.svg);
- mask-image: url(../../img/element-icons/info.dc07e19.svg);
-}
-
-.mx_InfoTooltip_icon_warning:before {
- -webkit-mask-image: url(../../img/element-icons/warning.d65f5be.svg);
- mask-image: url(../../img/element-icons/warning.d65f5be.svg);
-}
-
-.mx_InlineSpinner {
- display: inline;
-}
-
-.mx_InlineSpinner_icon,
-.mx_InlineSpinner img {
- margin: 0 6px;
- vertical-align: -3px;
-}
-
-.mx_InlineSpinner_icon {
- display: inline-block;
-}
-
-.mx_InviteReason {
- position: relative;
- margin-bottom: 1em;
-}
-
-.mx_InviteReason .mx_InviteReason_reason {
- visibility: visible;
-}
-
-.mx_InviteReason .mx_InviteReason_view {
- display: none;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- cursor: pointer;
- color: #737d8c;
-}
-
-.mx_InviteReason .mx_InviteReason_view:before {
- content: "";
- margin-right: 8px;
- background-color: #737d8c;
- -webkit-mask-image: url(../../img/feather-customised/eye.52aa0d2.svg);
- mask-image: url(../../img/feather-customised/eye.52aa0d2.svg);
- display: inline-block;
- width: 18px;
- height: 14px;
-}
-
-.mx_InviteReason_hidden .mx_InviteReason_reason {
- visibility: hidden;
-}
-
-.mx_InviteReason_hidden .mx_InviteReason_view {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_ManageIntegsButton_error {
- position: relative;
- float: right;
- cursor: not-allowed;
-}
-
-.mx_ManageIntegsButton_error img {
- position: absolute;
- right: -5px;
- top: -5px;
-}
-
-.mx_ManageIntegsButton_errorPopup {
- position: absolute;
- top: 110%;
- left: -275%;
- width: 550%;
- padding: 30%;
- font-size: 10pt;
- line-height: 1.5em;
- border-radius: 5px;
- background-color: #0dbd8b;
- color: #fff;
- text-align: center;
- z-index: 1000;
-}
-
-.mx_ManageIntegsButton_error .mx_ManageIntegsButton_errorPopup {
- display: none;
-}
-
-.mx_ManageIntegsButton_error:hover .mx_ManageIntegsButton_errorPopup {
- display: inline;
-}
-
-.mx_MiniAvatarUploader {
- position: relative;
- width: -webkit-min-content;
- width: -moz-min-content;
- width: min-content;
-}
-
-.mx_MiniAvatarUploader .mx_Tooltip {
- display: inline-block;
- position: absolute;
- z-index: unset;
- width: -webkit-max-content;
- width: -moz-max-content;
- width: max-content;
- left: 72px;
- top: 0;
-}
-
-.mx_MiniAvatarUploader .mx_MiniAvatarUploader_indicator {
- position: absolute;
- height: 26px;
- width: 26px;
- right: -6px;
- bottom: -6px;
- background-color: #fff;
- border-radius: 50%;
- z-index: 1;
-}
-
-.mx_MiniAvatarUploader
- .mx_MiniAvatarUploader_indicator
- .mx_MiniAvatarUploader_cameraIcon {
- height: 100%;
- width: 100%;
- background-color: #737d8c;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-image: url(../../img/element-icons/camera.a81a395.svg);
- mask-image: url(../../img/element-icons/camera.a81a395.svg);
- -webkit-mask-size: 16px;
- mask-size: 16px;
- z-index: 2;
-}
-
-.mx_MiniAvatarUploader_input {
- display: none;
-}
-
-.mx_PowerSelector {
- width: 100%;
-}
-
-.mx_PowerSelector .mx_Field input,
-.mx_PowerSelector .mx_Field select {
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-progress.mx_ProgressBar {
- height: 6px;
- width: 60px;
- overflow: hidden;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- border: none;
- border-radius: 6px;
-}
-
-progress.mx_ProgressBar::-moz-progress-bar {
- border-radius: 6px;
-}
-
-progress.mx_ProgressBar::-webkit-progress-bar,
-progress.mx_ProgressBar::-webkit-progress-value {
- border-radius: 6px;
-}
-
-progress.mx_ProgressBar {
- color: #0dbd8b;
-}
-
-progress.mx_ProgressBar::-moz-progress-bar {
- background-color: #0dbd8b;
-}
-
-progress.mx_ProgressBar::-webkit-progress-value {
- background-color: #0dbd8b;
-}
-
-progress.mx_ProgressBar {
- background-color: rgba(141, 151, 165, 0.2);
-}
-
-progress.mx_ProgressBar::-webkit-progress-bar {
- background-color: rgba(141, 151, 165, 0.2);
-}
-
-progress.mx_ProgressBar ::-webkit-progress-value {
- -webkit-transition: width 1s;
- transition: width 1s;
-}
-
-progress.mx_ProgressBar ::-moz-progress-bar {
- -moz-transition: padding-bottom 1s;
- transition: padding-bottom 1s;
- padding-bottom: var(--value);
- transform-origin: 0 0;
- transform: rotate(-90deg) translateX(-15px);
- padding-left: 15px;
- height: 0;
-}
-
-.mx_QRCode img {
- border-radius: 8px;
-}
-
-.mx_ReplyThread {
- margin: 0 0 8px;
- padding: 0 10px;
- border-left: 2px solid #0dbd8b;
- border-radius: 2px;
-}
-
-.mx_ReplyThread .mx_ReplyThread_show {
- cursor: pointer;
-}
-
-.mx_ReplyThread.mx_ReplyThread_color1 {
- border-left-color: #368bd6;
-}
-
-.mx_ReplyThread.mx_ReplyThread_color2 {
- border-left-color: #ac3ba8;
-}
-
-.mx_ReplyThread.mx_ReplyThread_color3 {
- border-left-color: #0dbd8b;
-}
-
-.mx_ReplyThread.mx_ReplyThread_color4 {
- border-left-color: #e64f7a;
-}
-
-.mx_ReplyThread.mx_ReplyThread_color5 {
- border-left-color: #ff812d;
-}
-
-.mx_ReplyThread.mx_ReplyThread_color6 {
- border-left-color: #2dc2c5;
-}
-
-.mx_ReplyThread.mx_ReplyThread_color7 {
- border-left-color: #5c56f5;
-}
-
-.mx_ReplyThread.mx_ReplyThread_color8 {
- border-left-color: #74d12c;
-}
-
-.mx_ResizeHandle {
- cursor: row-resize;
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- z-index: 100;
-}
-
-.mx_ResizeHandle.mx_ResizeHandle_horizontal {
- margin: 0 -5px;
- padding: 0 5px;
- cursor: col-resize;
-}
-
-.mx_ResizeHandle.mx_ResizeHandle_vertical {
- margin: -5px 0;
- padding: 5px 0;
- cursor: row-resize;
-}
-
-.mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
- margin: 0 -10px 0 0;
- padding: 0 8px 0 0;
-}
-
-.mx_ResizeHandle > div {
- background: transparent;
-}
-
-.mx_ResizeHandle.mx_ResizeHandle_horizontal > div {
- width: 1px;
- height: 100%;
-}
-
-.mx_ResizeHandle.mx_ResizeHandle_vertical > div {
- height: 1px;
-}
-
-.mx_AtRoomPill,
-.mx_GroupPill,
-.mx_RoomPill,
-.mx_UserPill {
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- vertical-align: middle;
- border-radius: 1.6rem;
- line-height: 1.5rem;
- padding-left: 0;
-}
-
-a.mx_Pill {
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- max-width: calc(100% - 1ch);
-}
-
-.mx_Pill {
- padding: 0.1rem 0.4em 0.1rem 0.1rem;
- vertical-align: text-top;
- line-height: 1.7rem;
-}
-
-.mx_EventTile_content .markdown-body a.mx_GroupPill,
-.mx_GroupPill {
- color: #fff;
- background-color: #aaa;
-}
-
-.mx_EventTile_content .markdown-body a.mx_Pill {
- text-decoration: none;
-}
-
-.mx_EventTile_content .markdown-body a.mx_UserPill,
-.mx_UserPill {
- color: #2e2f32;
- background-color: rgba(0, 0, 0, 0.1);
-}
-
-.mx_UserPill_selected {
- background-color: #0dbd8b !important;
-}
-
-.mx_EventTile_content .markdown-body a.mx_AtRoomPill,
-.mx_EventTile_content .mx_AtRoomPill,
-.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me,
-.mx_MessageComposer_input .mx_AtRoomPill {
- color: #fff;
- background-color: #ff4b55;
-}
-
-.mx_EventTile_content .markdown-body a.mx_GroupPill,
-.mx_EventTile_content .markdown-body a.mx_RoomPill,
-.mx_GroupPill,
-.mx_RoomPill {
- color: #fff;
- background-color: #aaa;
-}
-
-.mx_EventTile_body .mx_GroupPill,
-.mx_EventTile_body .mx_RoomPill,
-.mx_EventTile_body .mx_UserPill {
- cursor: pointer;
-}
-
-.mx_AtRoomPill .mx_BaseAvatar,
-.mx_GroupPill .mx_BaseAvatar,
-.mx_RoomPill .mx_BaseAvatar,
-.mx_UserPill .mx_BaseAvatar {
- position: relative;
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- border-radius: 10rem;
- margin-right: 0.24rem;
-}
-
-.mx_Markdown_BOLD {
- font-weight: 700;
-}
-
-.mx_Markdown_ITALIC {
- font-style: italic;
-}
-
-.mx_Markdown_CODE {
- padding: 0.2em 0;
- margin: 0;
- font-size: 85%;
- background-color: rgba(0, 0, 0, 0.04);
- border-radius: 3px;
-}
-
-.mx_Markdown_HR {
- display: block;
- background: #e9e9e9;
-}
-
-.mx_Markdown_STRIKETHROUGH {
- text-decoration: line-through;
-}
-
-.mx_RoleButton {
- margin-left: 4px;
- margin-right: 4px;
- cursor: pointer;
- display: inline-block;
-}
-
-.mx_RoleButton object {
- pointer-events: none;
-}
-
-.mx_RoleButton_tooltip {
- display: inline-block;
- position: relative;
- top: -25px;
- left: 6px;
-}
-
-.mx_RoomAliasField {
- -webkit-box-flex: 0;
- -ms-flex: 0 1 auto;
- flex: 0 1 auto;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: stretch;
- -ms-flex-align: stretch;
- align-items: stretch;
- min-width: 0;
- max-width: 100%;
-}
-
-.mx_RoomAliasField input {
- width: 150px;
- padding-left: 0;
- padding-right: 0;
-}
-
-.mx_RoomAliasField input::-webkit-input-placeholder {
- color: #888;
- font-weight: 400;
-}
-
-.mx_RoomAliasField input::-moz-placeholder {
- color: #888;
- font-weight: 400;
-}
-
-.mx_RoomAliasField input:-ms-input-placeholder {
- color: #888;
- font-weight: 400;
-}
-
-.mx_RoomAliasField input::-ms-input-placeholder {
- color: #888;
- font-weight: 400;
-}
-
-.mx_RoomAliasField input::placeholder {
- color: #888;
- font-weight: 400;
-}
-
-.mx_RoomAliasField .mx_Field_postfix,
-.mx_RoomAliasField .mx_Field_prefix {
- color: #888;
- border-left: none;
- border-right: none;
- font-weight: 600;
- padding: 9px 10px;
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
-}
-
-.mx_RoomAliasField .mx_Field_postfix {
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- max-width: calc(100% - 180px);
-}
-
-.mx_SSOButtons {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_SSOButtons .mx_SSOButtons_row + .mx_SSOButtons_row {
- margin-top: 16px;
-}
-
-.mx_SSOButtons .mx_SSOButton {
- position: relative;
- width: 100%;
- padding: 7px 32px;
- text-align: center;
- border-radius: 8px;
- display: inline-block;
- font-size: 1.4rem;
- font-weight: 600;
- border: 1px solid #e7e7e7;
- color: #2e2f32;
-}
-
-.mx_SSOButtons .mx_SSOButton > img {
- -o-object-fit: contain;
- object-fit: contain;
- position: absolute;
- left: 8px;
- top: 4px;
-}
-
-.mx_SSOButtons .mx_SSOButton_default {
- color: #0dbd8b;
- background-color: #fff;
- border-color: #0dbd8b;
-}
-
-.mx_SSOButtons .mx_SSOButton_default.mx_SSOButton_primary {
- color: #fff;
- background-color: #0dbd8b;
-}
-
-.mx_SSOButtons .mx_SSOButton_mini {
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- width: 50px;
- height: 50px;
- min-width: 50px;
- padding: 12px;
-}
-
-.mx_SSOButtons .mx_SSOButton_mini > img {
- left: 12px;
- top: 12px;
-}
-
-.mx_SSOButtons .mx_SSOButton_mini + .mx_SSOButton_mini {
- margin-left: 16px;
-}
-
-.mx_ServerPicker {
- margin-bottom: 14px;
- border-bottom: 1px solid rgba(141, 151, 165, 0.2);
- display: grid;
- grid-template-columns: auto -webkit-min-content;
- grid-template-columns: auto min-content;
- grid-template-rows: auto auto auto;
- font-size: 1.4rem;
- line-height: 2rem;
-}
-
-.mx_ServerPicker > h3 {
- font-weight: 600;
- margin: 0 0 20px;
- grid-column: 1;
- grid-row: 1;
-}
-
-.mx_ServerPicker .mx_ServerPicker_help {
- width: 20px;
- height: 20px;
- background-color: #c1c6cd;
- border-radius: 10px;
- grid-column: 2;
- grid-row: 1;
- margin-left: auto;
- text-align: center;
- color: #fff;
- font-size: 16px;
- position: relative;
-}
-
-.mx_ServerPicker .mx_ServerPicker_help:before {
- content: "";
- width: 24px;
- height: 24px;
- position: absolute;
- top: -2px;
- left: -2px;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-image: url(../../img/element-icons/i.80d84f3.svg);
- mask-image: url(../../img/element-icons/i.80d84f3.svg);
- background: #fff;
-}
-
-.mx_ServerPicker .mx_ServerPicker_server {
- color: #232f32;
- grid-column: 1;
- grid-row: 2;
- margin-bottom: 16px;
-}
-
-.mx_ServerPicker .mx_ServerPicker_change {
- padding: 0;
- font-size: inherit;
- grid-column: 2;
- grid-row: 2;
-}
-
-.mx_ServerPicker .mx_ServerPicker_desc {
- margin-top: -12px;
- color: #8d99a5;
- grid-column: 1/2;
- grid-row: 3;
- margin-bottom: 16px;
-}
-
-.mx_ServerPicker_helpDialog .mx_Dialog_content {
- width: 456px;
-}
-
-.mx_Slider {
- position: relative;
- margin: 0;
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
-}
-
-.mx_Slider_dotContainer {
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
-}
-
-.mx_Slider_bar,
-.mx_Slider_dotContainer {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_Slider_bar {
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- position: absolute;
- height: 1em;
- width: 100%;
- padding: 0 0.5em;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_Slider_bar > hr {
- width: 100%;
- height: 0.4em;
- background-color: #c1c9d6;
- border: 0;
-}
-
-.mx_Slider_selection {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- width: calc(100% - 1em);
- height: 1em;
- position: absolute;
- pointer-events: none;
-}
-
-.mx_Slider_selectionDot {
- position: absolute;
- width: 1.1em;
- height: 1.1em;
- background-color: #0dbd8b;
- border-radius: 50%;
- -webkit-box-shadow: 0 0 6px #d3d3d3;
- box-shadow: 0 0 6px #d3d3d3;
- z-index: 10;
-}
-
-.mx_Slider_selection > hr {
- margin: 0;
- border: 0.2em solid #0dbd8b;
-}
-
-.mx_Slider_dot {
- height: 1em;
- width: 1em;
- border-radius: 50%;
- background-color: #c1c9d6;
- z-index: 0;
-}
-
-.mx_Slider_dotActive {
- background-color: #0dbd8b;
-}
-
-.mx_Slider_dotValue {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- color: #c1c9d6;
-}
-
-.mx_Slider_labelContainer {
- width: 1em;
-}
-
-.mx_Slider_label {
- position: relative;
- width: -webkit-fit-content;
- width: -moz-fit-content;
- width: fit-content;
- left: -50%;
-}
-
-.mx_Spinner {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- width: 100%;
- height: 100%;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
-}
-
-.mx_MatrixChat_middlePanel .mx_Spinner {
- height: auto;
-}
-
-@-webkit-keyframes spin {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- to {
- -webkit-transform: rotate(1turn);
- transform: rotate(1turn);
- }
-}
-
-@keyframes spin {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- to {
- -webkit-transform: rotate(1turn);
- transform: rotate(1turn);
- }
-}
-
-.mx_Spinner_icon {
- background-color: #2e2f32;
- -webkit-mask: url(../../img/spinner.5a0438d.svg);
- mask: url(../../img/spinner.5a0438d.svg);
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-animation: spin 1.1s steps(12) infinite;
- animation: spin 1.1s steps(12) infinite;
-}
-
-.mx_Checkbox {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: flex-start;
-}
-
-.mx_Checkbox input[type="checkbox"] {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- margin: 0;
- padding: 0;
-}
-
-.mx_Checkbox input[type="checkbox"] + label {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
-}
-
-.mx_Checkbox input[type="checkbox"] + label > .mx_Checkbox_background {
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- position: relative;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- height: 1.6rem;
- width: 1.6rem;
- size: 0.5rem;
- border: 0.15rem solid rgba(97, 112, 139, 0.5);
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- border-radius: 0.4rem;
-}
-
-.mx_Checkbox input[type="checkbox"] + label > .mx_Checkbox_background img {
- display: none;
- height: 100%;
- width: 100%;
- -webkit-filter: invert(100%);
- filter: invert(100%);
-}
-
-.mx_Checkbox input[type="checkbox"]:checked + label > .mx_Checkbox_background {
- background: #0dbd8b;
- border-color: #0dbd8b;
-}
-
-.mx_Checkbox
- input[type="checkbox"]:checked
- + label
- > .mx_Checkbox_background
- img {
- display: block;
-}
-
-.mx_Checkbox input[type="checkbox"] + label > :not(.mx_Checkbox_background) {
- margin-left: 10px;
-}
-
-.mx_Checkbox input[type="checkbox"]:disabled + label {
- opacity: 0.5;
- cursor: not-allowed;
-}
-
-.mx_Checkbox
- input[type="checkbox"]:checked:disabled
- + label
- > .mx_Checkbox_background {
- background-color: #0dbd8b;
- border-color: #0dbd8b;
-}
-
-.mx_Checkbox
- input[type="checkbox"].focus-visible
- + label
- .mx_Checkbox_background {
- outline-width: 2px;
- outline-style: solid;
- outline-color: Highlight;
-}
-
-@media (-webkit-min-device-pixel-ratio: 0) {
- .mx_Checkbox
- input[type="checkbox"].focus-visible
- + label
- .mx_Checkbox_background {
- outline-color: -webkit-focus-ring-color;
- outline-style: auto;
- }
-}
-
-.mx_RadioButton {
- position: relative;
- -webkit-box-align: baseline;
- -ms-flex-align: baseline;
- align-items: baseline;
-}
-
-.mx_RadioButton,
-.mx_RadioButton > .mx_RadioButton_content {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
-}
-
-.mx_RadioButton > .mx_RadioButton_content {
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- margin-left: 8px;
- margin-right: 8px;
-}
-
-.mx_RadioButton .mx_RadioButton_spacer {
- -ms-flex-negative: 0;
- flex-shrink: 0;
- -webkit-box-flex: 0;
- -ms-flex-positive: 0;
- flex-grow: 0;
- height: 1.6rem;
- width: 1.6rem;
-}
-
-.mx_RadioButton input[type="radio"] {
- margin: 0;
- padding: 0;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
-}
-
-.mx_RadioButton input[type="radio"] + div {
- -ms-flex-negative: 0;
- flex-shrink: 0;
- -webkit-box-flex: 0;
- -ms-flex-positive: 0;
- flex-grow: 0;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- height: 1.6rem;
- width: 1.6rem;
- margin-left: 2px;
- border: 0.15rem solid #61708b;
- border-radius: 1.6rem;
-}
-
-.mx_RadioButton input[type="radio"] + div > div {
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- height: 0.8rem;
- width: 0.8rem;
- border-radius: 0.8rem;
-}
-
-.mx_RadioButton input[type="radio"].focus-visible + div {
- outline-width: 2px;
- outline-style: solid;
- outline-color: Highlight;
-}
-
-@media (-webkit-min-device-pixel-ratio: 0) {
- .mx_RadioButton input[type="radio"].focus-visible + div {
- outline-color: -webkit-focus-ring-color;
- outline-style: auto;
- }
-}
-
-.mx_RadioButton input[type="radio"]:checked + div {
- border-color: #0dbd8b;
-}
-
-.mx_RadioButton input[type="radio"]:checked + div > div {
- background: #0dbd8b;
-}
-
-.mx_RadioButton input[type="radio"]:disabled + div,
-.mx_RadioButton input[type="radio"]:disabled + div + span {
- opacity: 0.5;
- cursor: not-allowed;
-}
-
-.mx_RadioButton input[type="radio"]:disabled + div {
- border-color: #61708b;
-}
-
-.mx_RadioButton input[type="radio"]:checked:disabled + div > div {
- background-color: #61708b;
-}
-
-.mx_RadioButton .mx_RadioButton_innerLabel {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- position: relative;
- top: 4px;
-}
-
-.mx_RadioButton_outlined {
- border: 1px solid #e3e8f0;
- border-radius: 8px;
-}
-
-.mx_RadioButton_checked {
- border-color: #0dbd8b;
-}
-
-.mx_SyntaxHighlight {
- background: none !important;
- color: #747474 !important;
-}
-
-.mx_TagComposer .mx_TagComposer_input {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_TagComposer .mx_TagComposer_input .mx_Field {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- margin: 0;
-}
-
-.mx_TagComposer .mx_TagComposer_input .mx_AccessibleButton {
- min-width: 70px;
- padding: 0;
- margin-left: 16px;
-}
-
-.mx_TagComposer .mx_TagComposer_input .mx_AccessibleButton,
-.mx_TagComposer .mx_TagComposer_input .mx_Field,
-.mx_TagComposer .mx_TagComposer_input .mx_Field input {
- border-radius: 8px;
-}
-
-.mx_TagComposer .mx_TagComposer_tags {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- margin-top: 12px;
-}
-
-.mx_TagComposer .mx_TagComposer_tags .mx_TagComposer_tag {
- padding: 6px 8px 8px 12px;
- position: relative;
- margin-right: 12px;
- margin-top: 12px;
-}
-
-.mx_TagComposer .mx_TagComposer_tags .mx_TagComposer_tag:before {
- content: "";
- border-radius: 20px;
- background-color: #8d99a5;
- opacity: 0.15;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- pointer-events: none;
-}
-
-.mx_TagComposer .mx_TagComposer_tags .mx_AccessibleButton {
- background-image: url(../../img/subtract.880420e.svg);
- width: 16px;
- height: 16px;
- margin-left: 8px;
- display: inline-block;
- vertical-align: middle;
- cursor: pointer;
-}
-
-.mx_TextWithTooltip_tooltip {
- display: none;
-}
-
-.mx_ToggleSwitch {
- -webkit-transition: background-color 0.2s ease-out 0.1s;
- transition: background-color 0.2s ease-out 0.1s;
- width: 4.4rem;
- height: 2rem;
- border-radius: 1.5rem;
- padding: 2px;
- background-color: #c1c9d6;
- opacity: 0.5;
-}
-
-.mx_ToggleSwitch_enabled {
- cursor: pointer;
- opacity: 1;
-}
-
-.mx_ToggleSwitch.mx_ToggleSwitch_on {
- background-color: #0dbd8b;
-}
-
-.mx_ToggleSwitch.mx_ToggleSwitch_on > .mx_ToggleSwitch_ball {
- left: calc(100% - 2rem);
-}
-
-.mx_ToggleSwitch_ball {
- position: relative;
- width: 2rem;
- height: 2rem;
- border-radius: 2rem;
- background-color: #fff;
- -webkit-transition: left 0.15s ease-out 0.1s;
- transition: left 0.15s ease-out 0.1s;
- left: 0;
-}
-
-@-webkit-keyframes mx_fadein {
- 0% {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
-}
-
-@keyframes mx_fadein {
- 0% {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
-}
-
-@-webkit-keyframes mx_fadeout {
- 0% {
- opacity: 1;
- }
- to {
- opacity: 0;
- }
-}
-
-@keyframes mx_fadeout {
- 0% {
- opacity: 1;
- }
- to {
- opacity: 0;
- }
-}
-
-.mx_Tooltip_chevron {
- position: absolute;
- left: -7px;
- top: 10px;
- width: 0;
- height: 0;
- border-top: 7px solid transparent;
- border-right: 7px solid #e7e7e7;
- border-bottom: 7px solid transparent;
-}
-
-.mx_Tooltip_chevron:after {
- content: "";
- width: 0;
- height: 0;
- border-top: 6px solid transparent;
- border-right: 6px solid #fff;
- border-bottom: 6px solid transparent;
- position: absolute;
- top: -6px;
- left: 1px;
-}
-
-.mx_Tooltip {
- position: fixed;
- border-radius: 8px;
- -webkit-box-shadow: 4px 4px 12px 0 rgba(118, 131, 156, 0.6);
- box-shadow: 4px 4px 12px 0 rgba(118, 131, 156, 0.6);
- z-index: 6000;
- padding: 10px;
- pointer-events: none;
- line-height: 1.4rem;
- font-size: 1.2rem;
- font-weight: 500;
- max-width: 200px;
- word-break: break-word;
- margin-right: 50px;
- background-color: #27303a;
- color: #fff;
- border: 0;
- text-align: center;
-}
-
-.mx_Tooltip,
-.mx_Tooltip .mx_Tooltip_chevron {
- display: none;
-}
-
-.mx_Tooltip.mx_Tooltip_visible {
- -webkit-animation: mx_fadein 0.2s forwards;
- animation: mx_fadein 0.2s forwards;
-}
-
-.mx_Tooltip.mx_Tooltip_invisible {
- -webkit-animation: mx_fadeout 0.1s forwards;
- animation: mx_fadeout 0.1s forwards;
-}
-
-.mx_Field_tooltip {
- background-color: #fff;
- color: #2e2f32;
- border: 1px solid #e7e7e7;
- text-align: unset;
-}
-
-.mx_Field_tooltip .mx_Tooltip_chevron {
- display: unset;
-}
-
-.mx_Tooltip_title {
- font-weight: 600;
-}
-
-.mx_Tooltip_sub {
- opacity: 0.7;
- margin-top: 4px;
-}
-
-.mx_TooltipButton {
- display: inline-block;
- width: 11px;
- height: 11px;
- margin-left: 5px;
- border: 2px solid #dbdbdb;
- border-radius: 20px;
- color: #dbdbdb;
- -webkit-transition: opacity 0.2s ease-in;
- transition: opacity 0.2s ease-in;
- opacity: 0.6;
- line-height: 1.1rem;
- text-align: center;
- cursor: pointer;
-}
-
-.mx_TooltipButton:hover {
- opacity: 1;
-}
-
-.mx_TooltipButton_container {
- position: relative;
- top: -18px;
- left: 4px;
-}
-
-.mx_TooltipButton_helpText {
- width: 400px;
- text-align: start;
- line-height: 17px !important;
-}
-
-.mx_Validation {
- position: relative;
-}
-
-.mx_Validation_details {
- padding-left: 20px;
- margin: 0;
-}
-
-.mx_Validation_description + .mx_Validation_details {
- margin: 1em 0 0;
-}
-
-.mx_Validation_detail {
- position: relative;
- font-weight: 400;
- list-style: none;
- margin-bottom: 0.5em;
-}
-
-.mx_Validation_detail:last-child {
- margin-bottom: 0;
-}
-
-.mx_Validation_detail:before {
- content: "";
- position: absolute;
- width: 14px;
- height: 14px;
- top: 0;
- left: -18px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
-}
-
-.mx_Validation_detail.mx_Validation_valid {
- color: #0dbd8b;
-}
-
-.mx_Validation_detail.mx_Validation_valid:before {
- -webkit-mask-image: url(../../img/feather-customised/check.5745b4e.svg);
- mask-image: url(../../img/feather-customised/check.5745b4e.svg);
- background-color: #0dbd8b;
-}
-
-.mx_Validation_detail.mx_Validation_invalid {
- color: #ff4b55;
-}
-
-.mx_Validation_detail.mx_Validation_invalid:before {
- -webkit-mask-image: url(../../img/feather-customised/x.9662221.svg);
- mask-image: url(../../img/feather-customised/x.9662221.svg);
- background-color: #ff4b55;
-}
-
-.mx_EmojiPicker {
- width: 340px;
- height: 450px;
- border-radius: 4px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_EmojiPicker_body {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- overflow-y: scroll;
- scrollbar-width: thin;
- scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
-}
-
-.mx_EmojiPicker_header {
- padding: 4px 8px 0;
- border-bottom: 1px solid #e9edf1;
-}
-
-.mx_EmojiPicker_anchor {
- padding: 8px 8px 6px;
- border: none;
- border-bottom: 2px solid transparent;
- background-color: transparent;
- border-radius: 4px 4px 0 0;
- width: 36px;
- height: 38px;
-}
-
-.mx_EmojiPicker_anchor:not(:disabled) {
- cursor: pointer;
-}
-
-.mx_EmojiPicker_anchor:not(:disabled):hover {
- background-color: #ddd;
- border-bottom: 2px solid #0dbd8b;
-}
-
-.mx_EmojiPicker_anchor:before {
- background-color: #2e2f32;
- content: "";
- display: inline-block;
- -webkit-mask-size: 100%;
- mask-size: 100%;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- width: 100%;
- height: 100%;
-}
-
-.mx_EmojiPicker_anchor:disabled:before {
- background-color: #ddd;
-}
-
-.mx_EmojiPicker_anchor_activity:before {
- -webkit-mask-image: url(../../img/emojipicker/activity.921ec9f.svg);
- mask-image: url(../../img/emojipicker/activity.921ec9f.svg);
-}
-
-.mx_EmojiPicker_anchor_custom:before {
- -webkit-mask-image: url(../../img/emojipicker/custom.e1cd0fd.svg);
- mask-image: url(../../img/emojipicker/custom.e1cd0fd.svg);
-}
-
-.mx_EmojiPicker_anchor_flags:before {
- -webkit-mask-image: url(../../img/emojipicker/flags.1a8855e.svg);
- mask-image: url(../../img/emojipicker/flags.1a8855e.svg);
-}
-
-.mx_EmojiPicker_anchor_foods:before {
- -webkit-mask-image: url(../../img/emojipicker/foods.c6b220a.svg);
- mask-image: url(../../img/emojipicker/foods.c6b220a.svg);
-}
-
-.mx_EmojiPicker_anchor_nature:before {
- -webkit-mask-image: url(../../img/emojipicker/nature.6540b99.svg);
- mask-image: url(../../img/emojipicker/nature.6540b99.svg);
-}
-
-.mx_EmojiPicker_anchor_objects:before {
- -webkit-mask-image: url(../../img/emojipicker/objects.4d34f58.svg);
- mask-image: url(../../img/emojipicker/objects.4d34f58.svg);
-}
-
-.mx_EmojiPicker_anchor_people:before {
- -webkit-mask-image: url(../../img/emojipicker/people.e918580.svg);
- mask-image: url(../../img/emojipicker/people.e918580.svg);
-}
-
-.mx_EmojiPicker_anchor_places:before {
- -webkit-mask-image: url(../../img/emojipicker/places.7310322.svg);
- mask-image: url(../../img/emojipicker/places.7310322.svg);
-}
-
-.mx_EmojiPicker_anchor_recent:before {
- -webkit-mask-image: url(../../img/emojipicker/recent.13b42e2.svg);
- mask-image: url(../../img/emojipicker/recent.13b42e2.svg);
-}
-
-.mx_EmojiPicker_anchor_symbols:before {
- -webkit-mask-image: url(../../img/emojipicker/symbols.15a557d.svg);
- mask-image: url(../../img/emojipicker/symbols.15a557d.svg);
-}
-
-.mx_EmojiPicker_anchor_visible {
- border-bottom: 2px solid #0dbd8b;
-}
-
-.mx_EmojiPicker_search {
- margin: 8px;
- border-radius: 4px;
- border: 1px solid #e7e7e7;
- background-color: #fff;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_EmojiPicker_search input {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- border: none;
- padding: 8px 12px;
- border-radius: 4px 0;
-}
-
-.mx_EmojiPicker_search button {
- border: none;
- background-color: inherit;
- margin: 0;
- padding: 8px;
- -ms-flex-item-align: center;
- align-self: center;
- width: 32px;
- height: 32px;
-}
-
-.mx_EmojiPicker_search_clear {
- cursor: pointer;
-}
-
-.mx_EmojiPicker_search_icon {
- width: 16px;
- margin: 8px;
-}
-
-.mx_EmojiPicker_search_icon:not(.mx_EmojiPicker_search_clear) {
- pointer-events: none;
-}
-
-.mx_EmojiPicker_search_icon:after {
- -webkit-mask: url(../../img/emojipicker/search.973c315.svg) no-repeat;
- mask: url(../../img/emojipicker/search.973c315.svg) no-repeat;
- -webkit-mask-size: 100%;
- mask-size: 100%;
- background-color: #2e2f32;
- content: "";
- display: inline-block;
- width: 100%;
- height: 100%;
-}
-
-.mx_EmojiPicker_search_clear:after {
- -webkit-mask-image: url(../../img/emojipicker/delete.f7344c5.svg);
- mask-image: url(../../img/emojipicker/delete.f7344c5.svg);
-}
-
-.mx_EmojiPicker_category {
- padding: 0 12px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_EmojiPicker_category_label {
- width: 304px;
-}
-
-.mx_EmojiPicker_list {
- width: 304px;
- padding: 0;
- margin: 0;
-}
-
-.mx_EmojiPicker_item_wrapper {
- display: inline-block;
- list-style: none;
- width: 38px;
- cursor: pointer;
-}
-
-.mx_EmojiPicker_item {
- display: inline-block;
- font-size: 2rem;
- padding: 5px;
- width: 100%;
- height: 100%;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- text-align: center;
- border-radius: 4px;
-}
-
-.mx_EmojiPicker_item:hover {
- background-color: #ddd;
-}
-
-.mx_EmojiPicker_item_selected {
- color: rgba(0, 0, 0, 0.5);
- border: 1px solid #0dbd8b;
- padding: 4px;
-}
-
-.mx_EmojiPicker_category_label,
-.mx_EmojiPicker_preview_name {
- font-size: 1.6rem;
- font-weight: 600;
- margin: 0;
-}
-
-.mx_EmojiPicker_footer {
- border-top: 1px solid #e9edf1;
- min-height: 72px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_EmojiPicker_preview_emoji {
- font-size: 3.2rem;
- padding: 8px 16px;
-}
-
-.mx_EmojiPicker_preview_text {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_EmojiPicker_name {
- text-transform: capitalize;
-}
-
-.mx_EmojiPicker_shortcode {
- color: #747474;
- font-size: 1.4rem;
-}
-
-.mx_EmojiPicker_shortcode:after,
-.mx_EmojiPicker_shortcode:before {
- content: ":";
-}
-
-.mx_EmojiPicker_quick {
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -ms-flex-pack: distribute;
- justify-content: space-around;
-}
-
-.mx_EmojiPicker_quick_header .mx_EmojiPicker_name {
- margin-right: 4px;
-}
-
-.mx_GroupPublicity_toggle {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- margin: 8px;
-}
-
-.mx_GroupPublicity_toggle .mx_GroupTile {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: flex-start;
- cursor: pointer;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- width: 100%;
-}
-
-.mx_GroupPublicity_toggle .mx_ToggleSwitch {
- float: right;
-}
-
-.mx_GroupRoomTile {
- position: relative;
- color: #2e2f32;
- cursor: pointer;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_GroupRoomList_wrapper {
- padding: 10px;
-}
-
-.mx_GroupUserSettings_groupPublicity_scrollbox {
- height: 200px;
- border: 1px solid transparent;
- border-radius: 3px;
- overflow: hidden;
-}
-
-.mx_CallEvent {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
- background-color: #f2f5f8;
- border-radius: 8px;
- margin: 10px auto;
- max-width: 75%;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- height: 60px;
-}
-
-.mx_CallEvent.mx_CallEvent_voice
- .mx_CallEvent_content_button_answer
- span:before,
-.mx_CallEvent.mx_CallEvent_voice
- .mx_CallEvent_content_button_callBack
- span:before,
-.mx_CallEvent.mx_CallEvent_voice .mx_CallEvent_type_icon:before {
- -webkit-mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
- mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
-}
-
-.mx_CallEvent.mx_CallEvent_video
- .mx_CallEvent_content_button_answer
- span:before,
-.mx_CallEvent.mx_CallEvent_video
- .mx_CallEvent_content_button_callBack
- span:before,
-.mx_CallEvent.mx_CallEvent_video .mx_CallEvent_type_icon:before {
- -webkit-mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
- mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
-}
-
-.mx_CallEvent .mx_CallEvent_info {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- margin-left: 12px;
-}
-
-.mx_CallEvent .mx_CallEvent_info .mx_CallEvent_info_basic {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- margin-left: 10px;
-}
-
-.mx_CallEvent .mx_CallEvent_info .mx_CallEvent_info_basic .mx_CallEvent_sender {
- font-weight: 600;
- font-size: 1.5rem;
- line-height: 1.8rem;
- margin-bottom: 3px;
-}
-
-.mx_CallEvent .mx_CallEvent_info .mx_CallEvent_info_basic .mx_CallEvent_type {
- font-weight: 400;
- color: #737d8c;
- font-size: 1.2rem;
- line-height: 1.3rem;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_CallEvent
- .mx_CallEvent_info
- .mx_CallEvent_info_basic
- .mx_CallEvent_type
- .mx_CallEvent_type_icon {
- height: 13px;
- width: 13px;
- margin-right: 5px;
-}
-
-.mx_CallEvent
- .mx_CallEvent_info
- .mx_CallEvent_info_basic
- .mx_CallEvent_type
- .mx_CallEvent_type_icon:before {
- content: "";
- position: absolute;
- height: 13px;
- width: 13px;
- background-color: #8d99a5;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
-}
-
-.mx_CallEvent .mx_CallEvent_content {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- color: #737d8c;
- margin-right: 16px;
-}
-
-.mx_CallEvent .mx_CallEvent_content .mx_CallEvent_content_button {
- height: 24px;
- padding: 0 12px;
- margin-left: 8px;
-}
-
-.mx_CallEvent .mx_CallEvent_content .mx_CallEvent_content_button span {
- padding: 8px 0;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_CallEvent .mx_CallEvent_content .mx_CallEvent_content_button span:before {
- content: "";
- display: inline-block;
- background-color: #fff;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 16px;
- mask-size: 16px;
- width: 16px;
- height: 16px;
- margin-right: 8px;
-}
-
-.mx_CallEvent
- .mx_CallEvent_content
- .mx_CallEvent_content_button_reject
- span:before {
- -webkit-mask-image: url(../../img/element-icons/call/hangup.a207e54.svg);
- mask-image: url(../../img/element-icons/call/hangup.a207e54.svg);
-}
-
-.mx_CallEvent .mx_CallEvent_content .mx_CallEvent_content_tooltip {
- margin-right: 5px;
-}
-
-.mx_CallEvent .mx_CallEvent_content .mx_CallEvent_iconButton {
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- margin-right: 8px;
-}
-
-.mx_CallEvent .mx_CallEvent_content .mx_CallEvent_iconButton:before {
- content: "";
- height: 16px;
- width: 16px;
- background-color: #8d99a5;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_CallEvent .mx_CallEvent_content .mx_CallEvent_silence:before {
- -webkit-mask-image: url(../../img/voip/silence.08cd2d6.svg);
- mask-image: url(../../img/voip/silence.08cd2d6.svg);
-}
-
-.mx_CallEvent .mx_CallEvent_content .mx_CallEvent_unSilence:before {
- -webkit-mask-image: url(../../img/voip/un-silence.cebdd12.svg);
- mask-image: url(../../img/voip/un-silence.cebdd12.svg);
-}
-
-.mx_CreateEvent:before {
- background-color: #91a1c0;
- -webkit-mask-image: url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);
- mask-image: url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);
-}
-
-.mx_DateSeparator {
- clear: both;
- margin: 4px 0;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- font-size: 1.4rem;
- color: #9e9e9e;
-}
-
-.mx_DateSeparator > hr {
- -webkit-box-flex: 1;
- -ms-flex: 1 1 0px;
- flex: 1 1 0;
- height: 0;
- border: none;
- border-bottom: 1px solid transparent;
-}
-
-.mx_DateSeparator > div {
- margin: 0 25px;
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
-}
-
-.mx_EventTileBubble {
- background-color: #f2f5f8;
- padding: 10px;
- border-radius: 8px;
- margin: 10px auto;
- max-width: 75%;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- display: grid;
- grid-template-columns: 24px minmax(0, 1fr) -webkit-min-content;
- grid-template-columns: 24px minmax(0, 1fr) min-content;
-}
-
-.mx_EventTileBubble:after,
-.mx_EventTileBubble:before {
- position: relative;
- grid-column: 1;
- grid-row: 1/3;
- width: 16px;
- height: 16px;
- content: "";
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- margin-top: 4px;
-}
-
-.mx_EventTileBubble .mx_EventTileBubble_subtitle,
-.mx_EventTileBubble .mx_EventTileBubble_title {
- overflow-wrap: break-word;
-}
-
-.mx_EventTileBubble .mx_EventTileBubble_title {
- font-weight: 600;
- font-size: 1.5rem;
- grid-column: 2;
- grid-row: 1;
-}
-
-.mx_EventTileBubble .mx_EventTileBubble_subtitle {
- font-size: 1.2rem;
- grid-column: 2;
- grid-row: 2;
-}
-
-.mx_MEmoteBody {
- white-space: pre-wrap;
-}
-
-.mx_MEmoteBody_sender {
- cursor: pointer;
-}
-
-.mx_MFileBody_download {
- color: #0dbd8b;
-}
-
-.mx_MFileBody_download .mx_MFileBody_download_icon {
- width: 12px;
- height: 12px;
- -webkit-mask-size: 12px;
- mask-size: 12px;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-image: url(../../img/download.4f331f0.svg);
- mask-image: url(../../img/download.4f331f0.svg);
- background-color: #0dbd8b;
- display: inline-block;
-}
-
-.mx_MFileBody_download a {
- color: #0dbd8b;
- text-decoration: none;
- cursor: pointer;
-}
-
-.mx_MFileBody_download object {
- margin-left: -16px;
- padding-right: 4px;
- margin-top: -4px;
- vertical-align: middle;
- pointer-events: none;
-}
-
-.mx_MFileBody_download iframe {
- margin: 0;
- padding: 0;
- border: none;
- width: 100%;
- height: 1.5em;
-}
-
-.mx_MFileBody_info .mx_MFileBody_info_icon {
- background-color: #f4f6fa;
- border-radius: 20px;
- display: inline-block;
- width: 32px;
- height: 32px;
- position: relative;
- vertical-align: middle;
- margin-right: 12px;
-}
-
-.mx_MFileBody_info .mx_MFileBody_info_icon:before {
- content: "";
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: cover;
- mask-size: cover;
- -webkit-mask-image: url(../../img/element-icons/room/composer/attach.359c84e.svg);
- mask-image: url(../../img/element-icons/room/composer/attach.359c84e.svg);
- background-color: #737d8c;
- width: 15px;
- height: 15px;
- position: absolute;
- top: 8px;
- left: 8px;
-}
-
-.mx_MFileBody_info .mx_MFileBody_info_filename {
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- display: inline-block;
- width: calc(100% - 44px);
- vertical-align: middle;
-}
-
-.mx_MImageBody_thumbnail {
- -o-object-fit: contain;
- object-fit: contain;
- border-radius: 4px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_MImageBody_thumbnail > div > canvas {
- border-radius: 4px;
-}
-
-.mx_MImageBody_thumbnail_container {
- overflow: hidden;
- position: relative;
-}
-
-.mx_MImageBody_gifLabel {
- position: absolute;
- display: block;
- top: 0;
- left: 14px;
- padding: 5px;
- border-radius: 5px;
- background: rgba(0, 0, 0, 0.7);
- border: 2px solid rgba(0, 0, 0, 0.2);
- color: #fff;
- pointer-events: none;
-}
-
-.mx_HiddenImagePlaceholder {
- position: absolute;
- left: 0;
- top: 0;
- bottom: 0;
- right: 0;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- text-align: center;
- cursor: pointer;
- background-color: #f3f8fd;
-}
-
-.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button {
- color: #0dbd8b;
-}
-
-.mx_HiddenImagePlaceholder
- .mx_HiddenImagePlaceholder_button
- span.mx_HiddenImagePlaceholder_eye {
- margin-right: 8px;
- background-color: #0dbd8b;
- -webkit-mask-image: url(../../img/feather-customised/eye.52aa0d2.svg);
- mask-image: url(../../img/feather-customised/eye.52aa0d2.svg);
- display: inline-block;
- width: 18px;
- height: 14px;
-}
-
-.mx_HiddenImagePlaceholder
- .mx_HiddenImagePlaceholder_button
- span:not(.mx_HiddenImagePlaceholder_eye) {
- vertical-align: text-bottom;
-}
-
-.mx_EventTile:hover .mx_HiddenImagePlaceholder {
- background-color: #fff;
-}
-
-.mx_MImageReplyBody {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_MImageReplyBody .mx_MImageBody_thumbnail_container {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- margin-right: 4px;
-}
-
-.mx_MImageReplyBody .mx_MImageReplyBody_info {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
-}
-
-.mx_MImageReplyBody .mx_MImageReplyBody_info .mx_MImageReplyBody_sender {
- grid-area: sender;
-}
-
-.mx_MImageReplyBody .mx_MImageReplyBody_info .mx_MImageReplyBody_filename {
- grid-area: filename;
-}
-
-.mx_MJitsiWidgetEvent:before {
- background-color: #91a1c0;
- -webkit-mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
- mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
-}
-
-.mx_MNoticeBody {
- white-space: pre-wrap;
- opacity: 0.6;
-}
-
-.mx_MStickerBody_wrapper {
- padding: 20px 0;
-}
-
-.mx_MStickerBody_tooltip {
- position: absolute;
- top: 50%;
-}
-
-.mx_MStickerBody_hidden {
- max-width: 220px;
- text-decoration: none;
- text-align: center;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_MTextBody {
- white-space: pre-wrap;
-}
-
-span.mx_MVideoBody video.mx_MVideoBody {
- max-width: 100%;
- height: auto;
- border-radius: 4px;
-}
-
-.mx_MediaBody {
- background-color: #e3e8f0;
- border-radius: 12px;
- max-width: 243px;
- color: #737d8c;
- font-size: 1.4rem;
- line-height: 2.4rem;
- padding: 6px 12px;
-}
-
-.mx_MessageActionBar {
- position: absolute;
- visibility: hidden;
- cursor: pointer;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- height: 32px;
- line-height: 2.4rem;
- border-radius: 8px;
- background: #fff;
- border: 1px solid #e7e7e7;
- top: -32px;
- right: 8px;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- z-index: 1;
-}
-
-.mx_MessageActionBar:before {
- content: "";
- position: absolute;
- width: calc(66px + 100%);
- height: calc(20px + 100%);
- top: -12px;
- left: -58px;
- z-index: -1;
- cursor: auto;
-}
-
-.mx_MessageActionBar > * {
- white-space: nowrap;
- display: inline-block;
- position: relative;
- margin: 2px;
-}
-
-.mx_MessageActionBar > :hover {
- background: rgba(141, 151, 165, 0.2);
- border-radius: 6px;
- z-index: 1;
-}
-
-.mx_MessageActionBar_maskButton {
- width: 28px;
- height: 28px;
-}
-
-.mx_MessageActionBar_maskButton:after {
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
- -webkit-mask-size: 18px;
- mask-size: 18px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- background-color: #737d8c;
-}
-
-.mx_MessageActionBar_maskButton:hover:after {
- background-color: #2e2f32;
-}
-
-.mx_MessageActionBar_reactButton:after {
- -webkit-mask-image: url(../../img/element-icons/room/message-bar/emoji.af14771.svg);
- mask-image: url(../../img/element-icons/room/message-bar/emoji.af14771.svg);
-}
-
-.mx_MessageActionBar_replyButton:after {
- -webkit-mask-image: url(../../img/element-icons/room/message-bar/reply.5812741.svg);
- mask-image: url(../../img/element-icons/room/message-bar/reply.5812741.svg);
-}
-
-.mx_MessageActionBar_editButton:after {
- -webkit-mask-image: url(../../img/element-icons/room/message-bar/edit.688678e.svg);
- mask-image: url(../../img/element-icons/room/message-bar/edit.688678e.svg);
-}
-
-.mx_MessageActionBar_optionsButton:after {
- -webkit-mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
- mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
-}
-
-.mx_MessageActionBar_resendButton:after {
- -webkit-mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
- mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
-}
-
-.mx_MessageActionBar_cancelButton:after {
- -webkit-mask-image: url(../../img/element-icons/trashcan.3b626db.svg);
- mask-image: url(../../img/element-icons/trashcan.3b626db.svg);
-}
-
-.mx_MessageActionBar_downloadButton:after {
- -webkit-mask-size: 14px;
- mask-size: 14px;
- -webkit-mask-image: url(../../img/download.4f331f0.svg);
- mask-image: url(../../img/download.4f331f0.svg);
-}
-
-.mx_MessageActionBar_downloadButton.mx_MessageActionBar_downloadSpinnerButton:after {
- background-color: transparent;
-}
-
-.mx_MessageTimestamp {
- color: #acacac;
- font-size: 1rem;
- -webkit-font-feature-settings: "tnum";
- font-feature-settings: "tnum";
- font-variant-numeric: tabular-nums;
-}
-
-.mx_MjolnirBody {
- opacity: 0.4;
-}
-
-.mx_ReactionsRow {
- margin: 6px 0;
- color: #2e2f32;
-}
-
-.mx_ReactionsRow .mx_ReactionsRow_addReactionButton {
- position: relative;
- display: inline-block;
- visibility: hidden;
- width: 24px;
- height: 24px;
- vertical-align: middle;
- margin-left: 4px;
- margin-right: 4px;
-}
-
-.mx_ReactionsRow .mx_ReactionsRow_addReactionButton:before {
- content: "";
- position: absolute;
- height: 100%;
- width: 100%;
- -webkit-mask-size: 16px;
- mask-size: 16px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- background-color: #8d99a5;
- -webkit-mask-image: url(../../img/element-icons/room/message-bar/emoji.af14771.svg);
- mask-image: url(../../img/element-icons/room/message-bar/emoji.af14771.svg);
-}
-
-.mx_ReactionsRow
- .mx_ReactionsRow_addReactionButton.mx_ReactionsRow_addReactionButton_active {
- visibility: visible;
-}
-
-.mx_ReactionsRow
- .mx_ReactionsRow_addReactionButton.mx_ReactionsRow_addReactionButton_active:before,
-.mx_ReactionsRow .mx_ReactionsRow_addReactionButton:hover:before {
- background-color: #2e2f32;
-}
-
-.mx_EventTile:hover .mx_ReactionsRow_addReactionButton {
- visibility: visible;
-}
-
-.mx_ReactionsRow_showAll {
- text-decoration: none;
- font-size: 1.2rem;
- line-height: 2rem;
- margin-left: 4px;
- vertical-align: middle;
-}
-
-.mx_ReactionsRow_showAll:link,
-.mx_ReactionsRow_showAll:visited {
- color: #8d99a5;
-}
-
-.mx_ReactionsRow_showAll:hover {
- color: #2e2f32;
-}
-
-.mx_ReactionsRowButton {
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- line-height: 2rem;
- margin-right: 6px;
- padding: 1px 6px;
- border: 1px solid #e9edf1;
- border-radius: 10px;
- background-color: #f3f8fd;
- cursor: pointer;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- vertical-align: middle;
-}
-
-.mx_ReactionsRowButton:hover {
- border-color: #ddd;
-}
-
-.mx_ReactionsRowButton.mx_ReactionsRowButton_selected {
- background-color: #e9fff9;
- border-color: #0dbd8b;
-}
-
-.mx_ReactionsRowButton.mx_AccessibleButton_disabled {
- cursor: not-allowed;
-}
-
-.mx_ReactionsRowButton .mx_ReactionsRowButton_content {
- max-width: 100px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- padding-right: 4px;
-}
-
-.mx_RedactedBody {
- white-space: pre-wrap;
- color: #61708b;
- vertical-align: middle;
- padding-left: 20px;
- position: relative;
-}
-
-.mx_RedactedBody:before {
- height: 14px;
- width: 14px;
- background-color: #61708b;
- -webkit-mask-image: url(../../img/feather-customised/trash.custom.1e6ecd4.svg);
- mask-image: url(../../img/feather-customised/trash.custom.1e6ecd4.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- content: "";
- position: absolute;
- top: 1px;
- left: 0;
-}
-
-.mx_RoomAvatarEvent {
- opacity: 0.5;
- overflow-y: hidden;
-}
-
-.mx_RoomAvatarEvent_avatar {
- display: inline;
- position: relative;
- top: 5px;
-}
-
-.mx_SenderProfile_displayName {
- font-weight: 600;
-}
-
-.mx_SenderProfile_mxid {
- font-weight: 600;
- font-size: 1.1rem;
- margin-left: 5px;
- opacity: 0.5;
-}
-
-.mx_TextualEvent {
- opacity: 0.5;
- overflow-y: hidden;
-}
-
-.mx_TextualEvent a {
- color: #0dbd8b;
- cursor: pointer;
-}
-
-.mx_UnknownBody {
- white-space: pre-wrap;
-}
-
-.mx_EventTile_content.mx_ViewSourceEvent {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- opacity: 0.6;
- font-size: 1.2rem;
-}
-
-.mx_EventTile_content.mx_ViewSourceEvent code,
-.mx_EventTile_content.mx_ViewSourceEvent pre {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
-}
-
-.mx_EventTile_content.mx_ViewSourceEvent pre {
- line-height: 1.2;
- margin: 3.5px 0;
-}
-
-.mx_EventTile_content.mx_ViewSourceEvent .mx_ViewSourceEvent_toggle {
- width: 12px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: 0 center;
- mask-position: 0 center;
- -webkit-mask-size: auto 12px;
- mask-size: auto 12px;
- visibility: hidden;
- background-color: #0dbd8b;
- -webkit-mask-image: url(../../img/feather-customised/maximise.dc32127.svg);
- mask-image: url(../../img/feather-customised/maximise.dc32127.svg);
-}
-
-.mx_EventTile_content.mx_ViewSourceEvent.mx_ViewSourceEvent_expanded
- .mx_ViewSourceEvent_toggle {
- -webkit-mask-position: 0 bottom;
- mask-position: 0 bottom;
- margin-bottom: 7px;
- -webkit-mask-image: url(../../img/feather-customised/minimise.aec9142.svg);
- mask-image: url(../../img/feather-customised/minimise.aec9142.svg);
-}
-
-.mx_EventTile_content.mx_ViewSourceEvent:hover .mx_ViewSourceEvent_toggle {
- visibility: visible;
-}
-
-.mx_cryptoEvent.mx_cryptoEvent_icon:before {
- background-color: #fff;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 80%;
- mask-size: 80%;
-}
-
-.mx_cryptoEvent.mx_cryptoEvent_icon:after,
-.mx_cryptoEvent.mx_cryptoEvent_icon:before {
- -webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
- mask-image: url(../../img/e2e/normal.76f0c09.svg);
-}
-
-.mx_cryptoEvent.mx_cryptoEvent_icon:after {
- background-color: #91a1c0;
-}
-
-.mx_cryptoEvent.mx_cryptoEvent_icon_verified:after {
- -webkit-mask-image: url(../../img/e2e/verified.5be6c9f.svg);
- mask-image: url(../../img/e2e/verified.5be6c9f.svg);
- background-color: #0dbd8b;
-}
-
-.mx_cryptoEvent.mx_cryptoEvent_icon_warning:after {
- -webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
- mask-image: url(../../img/e2e/warning.78bb264.svg);
- background-color: #ff4b55;
-}
-
-.mx_cryptoEvent .mx_cryptoEvent_buttons,
-.mx_cryptoEvent .mx_cryptoEvent_state {
- grid-column: 3;
- grid-row: 1/3;
-}
-
-.mx_cryptoEvent .mx_cryptoEvent_buttons {
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- grid-gap: 5px;
- gap: 5px;
-}
-
-.mx_cryptoEvent .mx_cryptoEvent_state {
- width: 130px;
- padding: 10px 20px;
- margin: auto 0;
- text-align: center;
- color: #8d99a5;
- overflow-wrap: break-word;
- font-size: 1.2rem;
-}
-
-.mx_BaseCard {
- padding: 0 8px;
- overflow: hidden;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
-}
-
-.mx_BaseCard .mx_BaseCard_header {
- margin: 8px 0;
-}
-
-.mx_BaseCard .mx_BaseCard_header > h2 {
- margin: 0 44px;
- font-size: 1.8rem;
- font-weight: 600;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back,
-.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close {
- position: absolute;
- background-color: rgba(141, 151, 165, 0.2);
- height: 20px;
- width: 20px;
- margin: 12px;
- top: 0;
- border-radius: 10px;
-}
-
-.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back:before,
-.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close:before {
- content: "";
- position: absolute;
- height: 20px;
- width: 20px;
- top: 0;
- left: 0;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- background-color: #91a1c0;
-}
-
-.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back {
- left: 0;
-}
-
-.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back:before {
- -webkit-transform: rotate(90deg);
- transform: rotate(90deg);
- -webkit-mask-size: 22px;
- mask-size: 22px;
- -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
- mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
-}
-
-.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close {
- right: 0;
-}
-
-.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close:before {
- -webkit-mask-image: url(../../img/icons-close.11ff07c.svg);
- mask-image: url(../../img/icons-close.11ff07c.svg);
- -webkit-mask-size: 8px;
- mask-size: 8px;
-}
-
-.mx_BaseCard .mx_AutoHideScrollbar {
- margin-right: -8px;
- padding-right: 8px;
- min-height: 0;
- width: 100%;
- height: 100%;
-}
-
-.mx_BaseCard .mx_BaseCard_Group {
- margin: 20px 0 16px;
-}
-
-.mx_BaseCard .mx_BaseCard_Group > * {
- margin-left: 12px;
- margin-right: 12px;
-}
-
-.mx_BaseCard .mx_BaseCard_Group > h1 {
- color: #8d99a5;
- font-size: 1.2rem;
- font-weight: 500;
-}
-
-.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button {
- padding: 10px 38px 10px 12px;
- margin: 0;
- position: relative;
- font-size: 1.3rem;
- height: 20px;
- line-height: 20px;
- border-radius: 8px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
-}
-
-.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button:hover {
- background-color: rgba(141, 151, 165, 0.1);
-}
-
-.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button:after {
- content: "";
- position: absolute;
- top: 10px;
- right: 6px;
- height: 20px;
- width: 20px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- background-color: #c1c6cd;
- -webkit-transform: rotate(270deg);
- transform: rotate(270deg);
- -webkit-mask-size: 20px;
- mask-size: 20px;
- -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
- mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
-}
-
-.mx_BaseCard
- .mx_BaseCard_Group
- .mx_BaseCard_Button.mx_AccessibleButton_disabled {
- padding-right: 12px;
-}
-
-.mx_BaseCard
- .mx_BaseCard_Group
- .mx_BaseCard_Button.mx_AccessibleButton_disabled:after {
- content: unset;
-}
-
-.mx_BaseCard .mx_BaseCard_footer {
- padding-top: 4px;
- text-align: center;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -ms-flex-pack: distribute;
- justify-content: space-around;
-}
-
-.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_kind_secondary {
- color: #737d8c;
- background-color: rgba(141, 151, 165, 0.2);
- font-weight: 600;
- font-size: 1.4rem;
-}
-
-.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_disabled {
- cursor: not-allowed;
-}
-
-.mx_FilePanel.mx_BaseCard,
-.mx_MemberList.mx_BaseCard,
-.mx_NotificationPanel.mx_BaseCard,
-.mx_UserInfo.mx_BaseCard {
- padding: 32px 0 0;
-}
-
-.mx_FilePanel.mx_BaseCard .mx_AutoHideScrollbar,
-.mx_MemberList.mx_BaseCard .mx_AutoHideScrollbar,
-.mx_NotificationPanel.mx_BaseCard .mx_AutoHideScrollbar,
-.mx_UserInfo.mx_BaseCard .mx_AutoHideScrollbar {
- margin-right: unset;
- padding-right: unset;
-}
-
-.mx_EncryptionInfo_spinner .mx_Spinner {
- margin-top: 25px;
- margin-bottom: 15px;
-}
-
-.mx_EncryptionInfo_spinner {
- text-align: center;
-}
-
-.mx_PinnedMessagesCard {
- padding-top: 0;
-}
-
-.mx_PinnedMessagesCard .mx_BaseCard_header {
- text-align: center;
- margin-top: 0;
- border-bottom: 1px solid #e7e7e7;
-}
-
-.mx_PinnedMessagesCard .mx_BaseCard_header > h2 {
- font-weight: 600;
- font-size: 1.8rem;
- margin: 8px 0;
-}
-
-.mx_PinnedMessagesCard .mx_BaseCard_header .mx_BaseCard_close {
- margin-right: 6px;
-}
-
-.mx_PinnedMessagesCard .mx_PinnedMessagesCard_empty {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- height: 100%;
-}
-
-.mx_PinnedMessagesCard .mx_PinnedMessagesCard_empty > div {
- height: -webkit-max-content;
- height: -moz-max-content;
- height: max-content;
- text-align: center;
- margin: auto 40px;
-}
-
-.mx_PinnedMessagesCard
- .mx_PinnedMessagesCard_empty
- > div
- .mx_PinnedMessagesCard_MessageActionBar {
- pointer-events: none;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- height: 32px;
- line-height: 2.4rem;
- border-radius: 8px;
- background: #fff;
- border: 1px solid #e7e7e7;
- padding: 1px;
- width: -webkit-max-content;
- width: -moz-max-content;
- width: max-content;
- margin: 0 auto;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.mx_PinnedMessagesCard
- .mx_PinnedMessagesCard_empty
- > div
- .mx_PinnedMessagesCard_MessageActionBar
- .mx_MessageActionBar_maskButton {
- display: inline-block;
- position: relative;
-}
-
-.mx_PinnedMessagesCard
- .mx_PinnedMessagesCard_empty
- > div
- .mx_PinnedMessagesCard_MessageActionBar
- .mx_MessageActionBar_optionsButton {
- background: rgba(141, 151, 165, 0.2);
- border-radius: 6px;
- z-index: 1;
-}
-
-.mx_PinnedMessagesCard
- .mx_PinnedMessagesCard_empty
- > div
- .mx_PinnedMessagesCard_MessageActionBar
- .mx_MessageActionBar_optionsButton:after {
- background-color: #2e2f32;
-}
-
-.mx_PinnedMessagesCard .mx_PinnedMessagesCard_empty > div > h2 {
- font-weight: 600;
- font-size: 1.5rem;
- line-height: 2.4rem;
- color: #2e2f32;
- margin-top: 24px;
- margin-bottom: 20px;
-}
-
-.mx_PinnedMessagesCard .mx_PinnedMessagesCard_empty > div > span {
- font-size: 1.2rem;
- line-height: 1.5rem;
- color: #737d8c;
-}
-
-.mx_RoomSummaryCard .mx_BaseCard_header {
- text-align: center;
- margin-top: 20px;
-}
-
-.mx_RoomSummaryCard .mx_BaseCard_header h2 {
- font-weight: 600;
- font-size: 1.8rem;
- margin: 12px 0 4px;
-}
-
-.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_alias {
- font-size: 1.3rem;
- color: #737d8c;
-}
-
-.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_alias,
-.mx_RoomSummaryCard .mx_BaseCard_header h2 {
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: pre-wrap;
-}
-
-.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar {
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
-}
-
-.mx_RoomSummaryCard
- .mx_BaseCard_header
- .mx_RoomSummaryCard_avatar
- .mx_RoomSummaryCard_e2ee {
- display: inline-block;
- position: relative;
- width: 54px;
- height: 54px;
- border-radius: 50%;
- background-color: #737d8c;
- margin-top: -3px;
- margin-left: -10px;
- border: 3px solid #f2f5f8;
-}
-
-.mx_RoomSummaryCard
- .mx_BaseCard_header
- .mx_RoomSummaryCard_avatar
- .mx_RoomSummaryCard_e2ee:before {
- content: "";
- position: absolute;
- top: 13px;
- left: 13px;
- height: 28px;
- width: 28px;
- -webkit-mask-size: cover;
- mask-size: cover;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-image: url(../../img/e2e/disabled.6c5c6be.svg);
- mask-image: url(../../img/e2e/disabled.6c5c6be.svg);
- background-color: #fff;
-}
-
-.mx_RoomSummaryCard
- .mx_BaseCard_header
- .mx_RoomSummaryCard_avatar
- .mx_RoomSummaryCard_e2ee_normal {
- background-color: #424446;
-}
-
-.mx_RoomSummaryCard
- .mx_BaseCard_header
- .mx_RoomSummaryCard_avatar
- .mx_RoomSummaryCard_e2ee_normal:before {
- -webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
- mask-image: url(../../img/e2e/normal.76f0c09.svg);
-}
-
-.mx_RoomSummaryCard
- .mx_BaseCard_header
- .mx_RoomSummaryCard_avatar
- .mx_RoomSummaryCard_e2ee_verified {
- background-color: #0dbd8b;
-}
-
-.mx_RoomSummaryCard
- .mx_BaseCard_header
- .mx_RoomSummaryCard_avatar
- .mx_RoomSummaryCard_e2ee_verified:before {
- -webkit-mask-image: url(../../img/e2e/verified.5be6c9f.svg);
- mask-image: url(../../img/e2e/verified.5be6c9f.svg);
-}
-
-.mx_RoomSummaryCard
- .mx_BaseCard_header
- .mx_RoomSummaryCard_avatar
- .mx_RoomSummaryCard_e2ee_warning {
- background-color: #ff4b55;
-}
-
-.mx_RoomSummaryCard
- .mx_BaseCard_header
- .mx_RoomSummaryCard_avatar
- .mx_RoomSummaryCard_e2ee_warning:before {
- -webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
- mask-image: url(../../img/e2e/warning.78bb264.svg);
-}
-
-.mx_RoomSummaryCard .mx_RoomSummaryCard_aboutGroup .mx_RoomSummaryCard_Button {
- padding-left: 44px;
-}
-
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_aboutGroup
- .mx_RoomSummaryCard_Button:before {
- content: "";
- position: absolute;
- top: 8px;
- left: 10px;
- height: 24px;
- width: 24px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- background-color: #c1c6cd;
-}
-
-.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button {
- padding: 0;
- height: auto;
- color: #8d99a5;
-}
-
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button
- .mx_RoomSummaryCard_icon_app {
- padding: 10px 48px 10px 12px;
- text-overflow: ellipsis;
- overflow: hidden;
-}
-
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button
- .mx_RoomSummaryCard_icon_app
- .mx_BaseAvatar_image {
- vertical-align: top;
- margin-right: 12px;
-}
-
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button
- .mx_RoomSummaryCard_icon_app
- span {
- color: #2e2f32;
-}
-
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button
- .mx_RoomSummaryCard_app_options,
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button
- .mx_RoomSummaryCard_app_pinToggle {
- position: absolute;
- top: 0;
- height: 100%;
- width: 24px;
- padding: 12px 4px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- min-width: 24px;
-}
-
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button
- .mx_RoomSummaryCard_app_options:hover:after,
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button
- .mx_RoomSummaryCard_app_pinToggle:hover:after {
- content: "";
- position: absolute;
- height: 24px;
- width: 24px;
- top: 8px;
- left: 0;
- border-radius: 12px;
- background-color: rgba(141, 151, 165, 0.1);
-}
-
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button
- .mx_RoomSummaryCard_app_options:before,
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button
- .mx_RoomSummaryCard_app_pinToggle:before {
- content: "";
- position: absolute;
- height: 16px;
- width: 16px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 16px;
- mask-size: 16px;
- background-color: #c1c6cd;
-}
-
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button
- .mx_RoomSummaryCard_app_pinToggle {
- right: 24px;
-}
-
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button
- .mx_RoomSummaryCard_app_pinToggle:before {
- -webkit-mask-image: url(../../img/element-icons/room/pin-upright.65783fb.svg);
- mask-image: url(../../img/element-icons/room/pin-upright.65783fb.svg);
-}
-
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button
- .mx_RoomSummaryCard_app_options {
- right: 48px;
- display: none;
-}
-
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button
- .mx_RoomSummaryCard_app_options:before {
- -webkit-mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
- mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
-}
-
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button.mx_RoomSummaryCard_Button_pinned:after {
- opacity: 0.2;
-}
-
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button.mx_RoomSummaryCard_Button_pinned
- .mx_RoomSummaryCard_app_pinToggle:before {
- background-color: #0dbd8b;
-}
-
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button:hover
- .mx_RoomSummaryCard_icon_app {
- padding-right: 72px;
-}
-
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button:hover
- .mx_RoomSummaryCard_app_options {
- display: unset;
-}
-
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button:before {
- content: unset;
-}
-
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button:after {
- top: 8px;
- pointer-events: none;
-}
-
-.mx_RoomSummaryCard .mx_AccessibleButton_kind_link {
- padding: 0;
- margin-top: 12px;
- margin-bottom: 12px;
- font-size: 1.3rem;
- font-weight: 600;
-}
-
-.mx_RoomSummaryCard_icon_people:before {
- -webkit-mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
- mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
-}
-
-.mx_RoomSummaryCard_icon_files:before {
- -webkit-mask-image: url(../../img/element-icons/room/files.5709c0c.svg);
- mask-image: url(../../img/element-icons/room/files.5709c0c.svg);
-}
-
-.mx_RoomSummaryCard_icon_share:before {
- -webkit-mask-image: url(../../img/element-icons/room/share.54dc3fb.svg);
- mask-image: url(../../img/element-icons/room/share.54dc3fb.svg);
-}
-
-.mx_RoomSummaryCard_icon_settings:before {
- -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
- mask-image: url(../../img/element-icons/settings.6b381af.svg);
-}
-
-.mx_RoomSummaryCard_icon_export:before {
- -webkit-mask-image: url(../../img/element-icons/export.57444c5.svg);
- mask-image: url(../../img/element-icons/export.57444c5.svg);
-}
-
-.mx_UserInfo.mx_BaseCard {
- padding-top: 0;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- overflow-y: auto;
- font-size: 1.2rem;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_cancel {
- cursor: pointer;
- position: absolute;
- top: 0;
- border-radius: 4px;
- background-color: #f2f5f8;
- margin: 9px;
- z-index: 1;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_cancel div {
- height: 16px;
- width: 16px;
- padding: 4px;
- -webkit-mask-image: url(../../img/minimise.871d2de.svg);
- mask-image: url(../../img/minimise.871d2de.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: 7px center;
- mask-position: 7px center;
- background-color: #91a1c0;
-}
-
-.mx_UserInfo.mx_BaseCard h2 {
- font-size: 1.8rem;
- font-weight: 600;
- margin: 18px 0 0;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_container {
- padding: 8px 16px;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_separator {
- border-bottom: 1px solid rgba(46, 47, 50, 0.1);
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetailsContainer {
- padding-top: 0;
- padding-bottom: 0;
- margin-bottom: 8px;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_RoomTile_nameContainer {
- width: 154px;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_RoomTile_badge {
- display: none;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_RoomTile_name {
- width: 160px;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar {
- margin: 24px 32px 0;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar > div {
- max-width: 30vh;
- margin: 0 auto;
- -webkit-transition: 0.5s;
- transition: 0.5s;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar > div > div {
- padding-top: 100%;
- position: relative;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar > div > div * {
- border-radius: 100%;
- position: absolute;
- top: 0;
- left: 0;
- width: 100% !important;
- height: 100% !important;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar .mx_BaseAvatar_initial {
- z-index: 1;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- font-size: 6rem !important;
- width: 100% !important;
- -webkit-transition: font-size 0.5s;
- transition: font-size 0.5s;
-}
-
-.mx_UserInfo.mx_BaseCard
- .mx_UserInfo_avatar
- .mx_BaseAvatar.mx_BaseAvatar_image {
- cursor: -webkit-zoom-in;
- cursor: zoom-in;
-}
-
-.mx_UserInfo.mx_BaseCard h3 {
- text-transform: uppercase;
- color: #8d99a5;
- font-weight: 600;
- font-size: 1.2rem;
- margin: 4px 0;
-}
-
-.mx_UserInfo.mx_BaseCard p {
- margin: 5px 0;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile {
- text-align: center;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- font-size: 1.8rem;
- line-height: 2.5rem;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 span {
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- overflow: hidden;
- word-break: break-all;
- text-overflow: ellipsis;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 .mx_E2EIcon {
- margin-top: 3px;
- margin-right: 4px;
- min-width: 18px;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_UserInfo_profileStatus {
- margin-top: 12px;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField {
- margin: 6px 0;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField,
-.mx_UserInfo.mx_BaseCard
- .mx_UserInfo_memberDetails
- .mx_UserInfo_profileField
- .mx_UserInfo_roleDescription {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_UserInfo.mx_BaseCard
- .mx_UserInfo_memberDetails
- .mx_UserInfo_profileField
- .mx_UserInfo_roleDescription {
- margin: 11px 0 12px;
-}
-
-.mx_UserInfo.mx_BaseCard
- .mx_UserInfo_memberDetails
- .mx_UserInfo_profileField
- .mx_Field {
- margin: 0;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_field {
- cursor: pointer;
- color: #0dbd8b;
- line-height: 1.6rem;
- margin: 8px 0;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_field.mx_UserInfo_destructive {
- color: #ff4b55;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_statusMessage {
- font-size: 1.1rem;
- opacity: 0.5;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: clip;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_AutoHideScrollbar {
- -webkit-box-flex: 1;
- -ms-flex: 1 1 0px;
- flex: 1 1 0;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator) {
- padding-top: 16px;
- padding-bottom: 0;
-}
-
-.mx_UserInfo.mx_BaseCard
- .mx_UserInfo_container:not(.mx_UserInfo_separator)
- > :not(h3) {
- margin-left: 8px;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- margin: 8px 0;
-}
-
-.mx_UserInfo.mx_BaseCard
- .mx_UserInfo_devices
- .mx_UserInfo_device.mx_UserInfo_device_verified
- .mx_UserInfo_device_trusted {
- color: #0dbd8b;
-}
-
-.mx_UserInfo.mx_BaseCard
- .mx_UserInfo_devices
- .mx_UserInfo_device.mx_UserInfo_device_unverified
- .mx_UserInfo_device_trusted {
- color: #ff4b55;
-}
-
-.mx_UserInfo.mx_BaseCard
- .mx_UserInfo_devices
- .mx_UserInfo_device
- .mx_UserInfo_device_name {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- margin-right: 5px;
- word-break: break-word;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_E2EIcon {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- margin: 2px 5px 0 0;
- width: 12px;
- height: 12px;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_expand {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- margin-top: 11px;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_AccessibleButton.mx_AccessibleButton_hasKind {
- padding: 8px 18px;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_wideButton,
-.mx_UserInfo.mx_BaseCard .mx_VerificationShowSas .mx_AccessibleButton {
- display: block;
- margin: 16px 0 8px;
-}
-
-.mx_UserInfo.mx_BaseCard
- .mx_VerificationShowSas
- .mx_AccessibleButton
- + .mx_AccessibleButton {
- margin: 8px 0;
-}
-
-.mx_UserInfo.mx_UserInfo_smallAvatar .mx_UserInfo_avatar > div {
- max-width: 72px;
- margin: 0 auto;
-}
-
-.mx_UserInfo.mx_UserInfo_smallAvatar
- .mx_UserInfo_avatar
- .mx_BaseAvatar_initial {
- font-size: 40px !important;
-}
-
-.mx_VerificationPanel_reciprocate_section .mx_E2EIcon,
-.mx_VerificationPanel_verified_section .mx_E2EIcon {
- margin: 20px auto !important;
-}
-
-.mx_UserInfo .mx_EncryptionPanel_cancel {
- -webkit-mask: url(../../img/feather-customised/cancel.23c2689.svg);
- mask: url(../../img/feather-customised/cancel.23c2689.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: cover;
- mask-size: cover;
- width: 14px;
- height: 14px;
- background-color: #61708b;
- cursor: pointer;
- position: absolute;
- z-index: 100;
- top: 14px;
- right: 14px;
-}
-
-.mx_UserInfo .mx_VerificationPanel_qrCode {
- padding: 4px 4px 0;
- background: #fff;
- border-radius: 4px;
- width: -webkit-max-content;
- width: -moz-max-content;
- width: max-content;
- max-width: 100%;
- margin: 0 auto !important;
-}
-
-.mx_UserInfo .mx_VerificationPanel_qrCode canvas {
- height: auto !important;
- width: 100% !important;
- max-width: 240px;
-}
-
-.mx_UserInfo .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton {
- width: 100%;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- padding: 10px;
- display: block;
- margin: 10px 0;
-}
-
-.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions,
-.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- margin-top: 10px;
- margin-bottom: 10px;
- -webkit-box-align: stretch;
- -ms-flex-align: stretch;
- align-items: stretch;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_CompleteSecurity_body
- .mx_VerificationPanel_QRPhase_startOptions
- > .mx_VerificationPanel_QRPhase_betweenText,
-.mx_Dialog
- .mx_VerificationPanel_QRPhase_startOptions
- > .mx_VerificationPanel_QRPhase_betweenText {
- width: 50px;
- vertical-align: middle;
- text-align: center;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_CompleteSecurity_body
- .mx_VerificationPanel_QRPhase_startOptions
- .mx_VerificationPanel_QRPhase_startOption,
-.mx_Dialog
- .mx_VerificationPanel_QRPhase_startOptions
- .mx_VerificationPanel_QRPhase_startOption {
- background-color: #f3f8fd;
- border-radius: 10px;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- padding: 20px;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- position: relative;
- max-width: 310px;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
-}
-
-.mx_CompleteSecurity_body
- .mx_VerificationPanel_QRPhase_startOptions
- .mx_VerificationPanel_QRPhase_startOption
- .mx_VerificationPanel_QRPhase_noQR,
-.mx_CompleteSecurity_body
- .mx_VerificationPanel_QRPhase_startOptions
- .mx_VerificationPanel_QRPhase_startOption
- canvas,
-.mx_Dialog
- .mx_VerificationPanel_QRPhase_startOptions
- .mx_VerificationPanel_QRPhase_startOption
- .mx_VerificationPanel_QRPhase_noQR,
-.mx_Dialog
- .mx_VerificationPanel_QRPhase_startOptions
- .mx_VerificationPanel_QRPhase_startOption
- canvas {
- width: 220px !important;
- height: 220px !important;
- background-color: #fff;
- border-radius: 4px;
- vertical-align: middle;
- text-align: center;
- padding: 10px;
-}
-
-.mx_CompleteSecurity_body
- .mx_VerificationPanel_QRPhase_startOptions
- .mx_VerificationPanel_QRPhase_startOption
- > p,
-.mx_Dialog
- .mx_VerificationPanel_QRPhase_startOptions
- .mx_VerificationPanel_QRPhase_startOption
- > p {
- margin-top: 0;
- font-weight: 700;
-}
-
-.mx_CompleteSecurity_body
- .mx_VerificationPanel_QRPhase_startOptions
- .mx_VerificationPanel_QRPhase_startOption
- .mx_VerificationPanel_QRPhase_helpText,
-.mx_Dialog
- .mx_VerificationPanel_QRPhase_startOptions
- .mx_VerificationPanel_QRPhase_startOption
- .mx_VerificationPanel_QRPhase_helpText {
- font-size: 1.4rem;
- margin: 30px 0;
- text-align: center;
-}
-
-.mx_CompleteSecurity_body
- .mx_VerificationPanel_verified_section
- .mx_AccessibleButton,
-.mx_Dialog .mx_VerificationPanel_verified_section .mx_AccessibleButton {
- float: right;
-}
-
-.mx_CompleteSecurity_body
- .mx_VerificationPanel_reciprocate_section
- .mx_AccessibleButton,
-.mx_Dialog .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton {
- margin-left: 10px;
- padding: 7px 40px;
-}
-
-.mx_CompleteSecurity_body
- .mx_VerificationPanel_reciprocate_section
- .mx_VerificationPanel_reciprocateButtons,
-.mx_Dialog
- .mx_VerificationPanel_reciprocate_section
- .mx_VerificationPanel_reciprocateButtons {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-pack: end;
- -ms-flex-pack: end;
- justify-content: flex-end;
-}
-
-.mx_WidgetCard {
- height: 100%;
- display: contents;
-}
-
-.mx_WidgetCard .mx_AppTileFullWidth {
- max-width: unset;
- height: 100%;
- border: 0;
-}
-
-.mx_WidgetCard .mx_BaseCard_header {
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
-}
-
-.mx_WidgetCard .mx_BaseCard_header > h2 {
- margin-right: 0;
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
-}
-
-.mx_WidgetCard .mx_BaseCard_header .mx_WidgetCard_optionsButton {
- position: relative;
- margin-right: 44px;
- height: 20px;
- width: 20px;
- min-width: 20px;
- padding: 0;
-}
-
-.mx_WidgetCard .mx_BaseCard_header .mx_WidgetCard_optionsButton:before {
- content: "";
- position: absolute;
- width: 20px;
- height: 20px;
- top: 0;
- left: 4px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
- mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
- background-color: #737d8c;
-}
-
-.mx_WidgetCard_maxPinnedTooltip {
- background-color: #ff4b55;
- color: #fff;
-}
-
-.mx_AliasSettings_editable {
- border: 0;
- border-bottom: 1px solid #c7c7c7;
- padding: 0;
- min-width: 240px;
-}
-
-.mx_AliasSettings_editable:focus {
- border-bottom: 1px solid #0dbd8b;
- outline: none;
- -webkit-box-shadow: none;
- box-shadow: none;
-}
-
-.mx_AliasSettings summary {
- cursor: pointer;
- color: #0dbd8b;
- font-weight: 600;
- list-style: none;
-}
-
-.mx_AliasSettings summary::-webkit-details-marker {
- display: none;
-}
-
-.mx_AliasSettings .mx_AliasSettings_localAliasHeader {
- margin-top: 35px;
-}
-
-.mx_AppsDrawer {
- margin: 5px 5px 5px 18px;
- position: relative;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- overflow: hidden;
-}
-
-.mx_AppsDrawer .mx_AppsContainer_resizerHandleContainer {
- width: 100%;
- height: 10px;
- margin-top: -3px;
- display: block;
- position: relative;
-}
-
-.mx_AppsDrawer .mx_AppsContainer_resizerHandle {
- cursor: ns-resize;
- width: 100% !important;
- height: 100% !important;
- position: absolute;
- bottom: 0 !important;
-}
-
-.mx_AppsDrawer .mx_AppsContainer_resizerHandle:after {
- content: "";
- position: absolute;
- border-radius: 3px;
- top: 6px;
- bottom: 0;
- left: calc(50% - 32px);
- right: calc(50% - 32px);
-}
-
-.mx_AppsDrawer:hover .mx_AppsContainer_resizerHandle:after {
- opacity: 0.8;
- background: #2e2f32;
-}
-
-.mx_AppsDrawer:hover .mx_ResizeHandle_horizontal:before {
- position: absolute;
- left: 3px;
- top: 50%;
- -webkit-transform: translateY(-50%);
- transform: translateY(-50%);
- height: 64px;
- width: 4px;
- border-radius: 4px;
- content: "";
- background-color: #2e2f32;
- opacity: 0.8;
-}
-
-.mx_AppsContainer_resizer {
- margin-bottom: 8px;
-}
-
-.mx_AppsContainer {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: stretch;
- -ms-flex-align: stretch;
- align-items: stretch;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- height: 100%;
- width: 100%;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- min-height: 0;
-}
-
-.mx_AppsContainer .mx_AppTile:first-of-type {
- border-left-width: 8px;
- border-radius: 10px 0 0 10px;
-}
-
-.mx_AppsContainer .mx_AppTile:last-of-type {
- border-right-width: 8px;
- border-radius: 0 10px 10px 0;
-}
-
-.mx_AppsContainer .mx_ResizeHandle_horizontal {
- position: relative;
-}
-
-.mx_AppsContainer .mx_ResizeHandle_horizontal > div {
- width: 0;
-}
-
-.mx_AppsDrawer_2apps .mx_AppTile {
- width: 50%;
-}
-
-.mx_AppsDrawer_2apps .mx_AppTile:nth-child(3) {
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- width: 0 !important;
- min-width: 240px !important;
-}
-
-.mx_AppsDrawer_3apps .mx_AppTile {
- width: 33%;
-}
-
-.mx_AppsDrawer_3apps .mx_AppTile:nth-child(3) {
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- width: 0 !important;
- min-width: 240px !important;
-}
-
-.mx_AppTile {
- width: 50%;
- min-width: 240px;
- border-color: #f2f5f8;
- border-style: solid;
- border-width: 8px 5px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- background-color: #f2f5f8;
-}
-
-.mx_AppTileFullWidth {
- width: 100% !important;
- border: 5px solid #f2f5f8;
- border-radius: 8px;
- background-color: #f2f5f8;
-}
-
-.mx_AppTile_mini,
-.mx_AppTileFullWidth {
- margin: 0;
- padding: 0;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_AppTile_mini {
- width: 100%;
- height: 200px;
-}
-
-.mx_AppTile .mx_AppTile_persistedWrapper,
-.mx_AppTile_mini .mx_AppTile_persistedWrapper,
-.mx_AppTileFullWidth .mx_AppTile_persistedWrapper {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
-}
-
-.mx_AppTile_persistedWrapper div {
- width: 100%;
- height: 100%;
-}
-
-.mx_AppTileMenuBar {
- margin: 0;
- font-size: 1.2rem;
- background-color: #f2f5f8;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
- width: 100%;
- padding-top: 2px;
- padding-bottom: 8px;
-}
-
-.mx_AppTileMenuBarTitle {
- line-height: 20px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.mx_AppTileMenuBarTitle .mx_WidgetAvatar {
- margin-right: 12px;
-}
-
-.mx_AppTileMenuBarTitle > :last-child {
- margin-left: 9px;
-}
-
-.mx_AppTileMenuBarWidgets {
- float: right;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_AppTileMenuBar_iconButton {
- width: 12px;
- height: 12px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: 0 center;
- mask-position: 0 center;
- -webkit-mask-size: auto 12px;
- mask-size: auto 12px;
- background-color: #212121;
- margin: 0 3px;
-}
-
-.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout {
- -webkit-mask-image: url(../../img/feather-customised/widget/external-link.7ab6751.svg);
- mask-image: url(../../img/feather-customised/widget/external-link.7ab6751.svg);
-}
-
-.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_menu {
- -webkit-mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
- mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
-}
-
-.mx_AppTileBody {
- height: 100%;
- background-color: #fff;
-}
-
-.mx_AppTileBody,
-.mx_AppTileBody_mini {
- width: 100%;
- overflow: hidden;
- border-radius: 8px;
-}
-
-.mx_AppTileBody_mini {
- height: 200px;
-}
-
-.mx_AppTile .mx_AppTileBody,
-.mx_AppTile_mini .mx_AppTileBody_mini,
-.mx_AppTileFullWidth .mx_AppTileBody {
- height: inherit;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
-}
-
-.mx_AppTileBody_mini iframe,
-.mx_AppTileBody iframe {
- border: none;
- width: 100%;
- height: 100%;
-}
-
-.mx_AppTileBody iframe {
- overflow: hidden;
- padding: 0;
- margin: 0;
- display: block;
-}
-
-.mx_AppPermissionWarning {
- text-align: center;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- height: 100%;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- font-size: 1.6rem;
-}
-
-.mx_AppPermissionWarning_row {
- margin-bottom: 12px;
-}
-
-.mx_AppPermissionWarning_smallText {
- font-size: 1.2rem;
-}
-
-.mx_AppPermissionWarning_bolder {
- font-weight: 600;
-}
-
-.mx_AppPermissionWarning h4 {
- margin: 0;
- padding: 0;
-}
-
-.mx_AppPermissionWarning_helpIcon {
- margin-top: 1px;
- margin-right: 2px;
- width: 10px;
- height: 10px;
- display: inline-block;
-}
-
-.mx_AppPermissionWarning_helpIcon:before {
- display: inline-block;
- background-color: #0dbd8b;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 12px;
- mask-size: 12px;
- width: 12px;
- height: 12px;
- -webkit-mask-position: center;
- mask-position: center;
- content: "";
- vertical-align: middle;
- -webkit-mask-image: url(../../img/feather-customised/help-circle.03fb6cf.svg);
- mask-image: url(../../img/feather-customised/help-circle.03fb6cf.svg);
-}
-
-.mx_AppPermissionWarning_tooltip {
- -webkit-box-shadow: none;
- box-shadow: none;
- background-color: #27303a;
- color: #fff;
- border: none;
- border-radius: 3px;
- padding: 6px 8px;
-}
-
-.mx_AppPermissionWarning_tooltip ul {
- list-style-position: inside;
- padding-left: 2px;
- margin-left: 0;
-}
-
-.mx_AppLoading {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- font-weight: 700;
- position: relative;
- height: 100%;
- background-color: #fff !important;
- border-radius: 8px;
-}
-
-.mx_AppLoading .mx_Spinner {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
-}
-
-.mx_AppLoading_spinner_fadeIn {
- -webkit-animation-fill-mode: backwards;
- animation-fill-mode: backwards;
- -webkit-animation-duration: 0.2s;
- animation-duration: 0.2s;
- -webkit-animation-delay: 0.5s;
- animation-delay: 0.5s;
- -webkit-animation-name: mx_AppLoading_spinner_fadeIn_animation;
- animation-name: mx_AppLoading_spinner_fadeIn_animation;
-}
-
-@-webkit-keyframes mx_AppLoading_spinner_fadeIn_animation {
- 0% {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
-}
-
-@keyframes mx_AppLoading_spinner_fadeIn_animation {
- 0% {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
-}
-
-.mx_AppLoading iframe {
- display: none;
-}
-
-.mx_AppsDrawer_resizing .mx_AppTile_persistedWrapper {
- z-index: 1;
-}
-
-.mx_Autocomplete {
- position: absolute;
- bottom: 0;
- z-index: 1001;
- width: 100%;
- background: #fff;
- border: 1px solid transparent;
- border-bottom: none;
- border-radius: 8px 8px 0 0;
- max-height: 50vh;
- overflow: auto;
- -webkit-box-shadow: 0 -16px 32px rgba(0, 0, 0, 0.04);
- box-shadow: 0 -16px 32px rgba(0, 0, 0, 0.04);
-}
-
-.mx_Autocomplete_ProviderSection {
- border-bottom: 1px solid transparent;
-}
-
-.mx_Autocomplete_Completion_block {
- height: 34px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- padding: 0 12px;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- cursor: pointer;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- color: #2e2f32;
-}
-
-.mx_Autocomplete_Completion_block * {
- margin: 0 3px;
-}
-
-.mx_Autocomplete_Completion_pill {
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- border-radius: 2rem;
- height: 3.4rem;
- padding: 0.4rem;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- cursor: pointer;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- color: #2e2f32;
-}
-
-.mx_Autocomplete_Completion_pill > * {
- margin-right: 0.3rem;
-}
-
-.mx_Autocomplete_Completion_subtitle {
- font-style: italic;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
-}
-
-.mx_Autocomplete_Completion_description {
- color: grey;
-}
-
-.mx_Autocomplete_Completion_container_pill {
- margin: 12px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -ms-flex-flow: wrap;
- flex-flow: wrap;
-}
-
-.mx_Autocomplete_Completion_container_truncate
- .mx_Autocomplete_Completion_description,
-.mx_Autocomplete_Completion_container_truncate
- .mx_Autocomplete_Completion_subtitle,
-.mx_Autocomplete_Completion_container_truncate
- .mx_Autocomplete_Completion_title {
- max-width: 150px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.mx_Autocomplete_Completion.selected,
-.mx_Autocomplete_Completion:hover {
- background: #f2f5f8;
- outline: none;
-}
-
-.mx_Autocomplete_provider_name {
- margin: 12px;
- color: #2e2f32;
- font-weight: 400;
- opacity: 0.4;
-}
-
-.m_RoomView_auxPanel_stateViews {
- padding: 5px 5px 5px 19px;
- border-bottom: 1px solid transparent;
-}
-
-.m_RoomView_auxPanel_stateViews_span a {
- text-decoration: none;
- color: inherit;
-}
-
-.m_RoomView_auxPanel_stateViews_span[data-severity="warning"] {
- font-weight: 700;
- color: orange;
-}
-
-.m_RoomView_auxPanel_stateViews_span[data-severity="alert"] {
- font-weight: 700;
- color: red;
-}
-
-.m_RoomView_auxPanel_stateViews_span[data-severity="normal"] {
- font-weight: 400;
-}
-
-.m_RoomView_auxPanel_stateViews_span[data-severity="notice"] {
- font-weight: 400;
- color: #a2a2a2;
-}
-
-.m_RoomView_auxPanel_stateViews_delim {
- padding: 0 5px;
- color: #a2a2a2;
-}
-
-.mx_BasicMessageComposer {
- position: relative;
-}
-
-.mx_BasicMessageComposer
- .mx_BasicMessageComposer_inputEmpty
- > :first-child:before {
- content: var(--placeholder);
- opacity: 0.333;
- width: 0;
- height: 0;
- overflow: visible;
- display: inline-block;
- pointer-events: none;
- white-space: nowrap;
-}
-
-@-webkit-keyframes visualbell {
- 0% {
- background-color: #faa;
- }
- to {
- background-color: #fff;
- }
-}
-
-.mx_BasicMessageComposer.mx_BasicMessageComposer_input_error {
- -webkit-animation: visualbell 0.2s;
- animation: visualbell 0.2s;
-}
-
-.mx_BasicMessageComposer .mx_BasicMessageComposer_input {
- white-space: pre-wrap;
- word-wrap: break-word;
- outline: none;
- overflow-x: hidden;
-}
-
-.mx_BasicMessageComposer
- .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar
- span.mx_RoomPill,
-.mx_BasicMessageComposer
- .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar
- span.mx_UserPill {
- position: relative;
-}
-
-.mx_BasicMessageComposer
- .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar
- span.mx_RoomPill:before,
-.mx_BasicMessageComposer
- .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar
- span.mx_UserPill:before {
- content: var(--avatar-letter);
- width: 1.6rem;
- height: 1.6rem;
- margin-right: 0.24rem;
- background: var(--avatar-background), #fff;
- color: #fff;
- background-repeat: no-repeat;
- background-size: 1.6rem;
- border-radius: 1.6rem;
- text-align: center;
- font-weight: 400;
- line-height: 1.6rem;
- font-size: 1.04rem;
-}
-
-.mx_BasicMessageComposer
- .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_disabled {
- pointer-events: none;
-}
-
-.mx_BasicMessageComposer .mx_BasicMessageComposer_AutoCompleteWrapper {
- position: relative;
- height: 0;
-}
-
-.mx_E2EIcon {
- width: 16px;
- height: 16px;
- margin: 0 9px;
- position: relative;
- display: block;
-}
-
-.mx_E2EIcon_normal:after,
-.mx_E2EIcon_normal:before,
-.mx_E2EIcon_verified:after,
-.mx_E2EIcon_verified:before,
-.mx_E2EIcon_warning:after,
-.mx_E2EIcon_warning:before {
- content: "";
- display: block;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
-}
-
-.mx_E2EIcon:before {
- background-color: #fff;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 80%;
- mask-size: 80%;
-}
-
-.mx_E2EIcon:before,
-.mx_E2EIcon_bordered {
- -webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
- mask-image: url(../../img/e2e/normal.76f0c09.svg);
-}
-
-.mx_E2EIcon_bordered {
- background-color: #f3f8fd;
-}
-
-.mx_E2EIcon_bordered:after {
- -webkit-mask-size: 75%;
- mask-size: 75%;
-}
-
-.mx_E2EIcon_bordered:before {
- -webkit-mask-size: 60%;
- mask-size: 60%;
-}
-
-.mx_E2EIcon_warning:after {
- -webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
- mask-image: url(../../img/e2e/warning.78bb264.svg);
- background-color: #ff4b55;
-}
-
-.mx_E2EIcon_normal:after {
- -webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
- mask-image: url(../../img/e2e/normal.76f0c09.svg);
- background-color: #91a1c0;
-}
-
-.mx_E2EIcon_verified:after {
- -webkit-mask-image: url(../../img/e2e/verified.5be6c9f.svg);
- mask-image: url(../../img/e2e/verified.5be6c9f.svg);
- background-color: #0dbd8b;
-}
-
-.mx_EditMessageComposer {
- padding: 3px;
- margin: -7px -10px -5px;
- overflow: visible !important;
-}
-
-.mx_EditMessageComposer .mx_BasicMessageComposer_input {
- border-radius: 4px;
- border: 1px solid transparent;
- background-color: #fff;
- max-height: 200px;
- padding: 3px 6px;
-}
-
-.mx_EditMessageComposer .mx_BasicMessageComposer_input:focus {
- border-color: rgba(13, 189, 139, 0.5);
-}
-
-.mx_EditMessageComposer .mx_EditMessageComposer_buttons {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-pack: end;
- -ms-flex-pack: end;
- justify-content: flex-end;
- position: absolute;
- left: 0;
- background: #f3f8fd;
- z-index: 100;
- right: 0;
- margin: 0 -110px 0 0;
- padding: 5px 147px 5px 5px;
-}
-
-.mx_EditMessageComposer .mx_EditMessageComposer_buttons .mx_AccessibleButton {
- margin-left: 5px;
- padding: 5px 40px;
-}
-
-.mx_EventTile_last .mx_EditMessageComposer_buttons {
- position: static;
- margin-right: -147px;
-}
-
-.mx_EntityTile {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- color: #2e2f32;
- cursor: pointer;
-}
-
-.mx_EntityTile .mx_E2EIcon {
- margin: 0;
- position: absolute;
- bottom: 2px;
- right: 7px;
-}
-
-.mx_EntityTile:hover {
- padding-right: 30px;
- position: relative;
-}
-
-.mx_EntityTile:hover:before {
- content: "";
- position: absolute;
- top: calc(50% - 8px);
- right: -8px;
- -webkit-mask: url(../../img/member_chevron.4163a20.png);
- mask: url(../../img/member_chevron.4163a20.png);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- width: 16px;
- height: 16px;
- background-color: #91a1c0;
-}
-
-.mx_EntityTile .mx_PresenceLabel {
- display: none;
-}
-
-.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_PresenceLabel {
- display: block;
-}
-
-.mx_EntityTile_invite {
- display: table-cell;
- vertical-align: middle;
- margin-left: 10px;
- width: 26px;
-}
-
-.mx_EntityTile_avatar,
-.mx_GroupRoomTile_avatar {
- padding: 4px 12px 4px 3px;
- position: relative;
-}
-
-.mx_EntityTile_name,
-.mx_GroupRoomTile_name {
- -webkit-box-flex: 1;
- -ms-flex: 1 1 0px;
- flex: 1 1 0;
- overflow: hidden;
- font-size: 1.4rem;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.mx_EntityTile_details {
- overflow: hidden;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
-}
-
-.mx_EntityTile_ellipsis .mx_EntityTile_name,
-.mx_EntityTile_invitePlaceholder .mx_EntityTile_name {
- font-style: italic;
- color: #2e2f32;
-}
-
-.mx_EntityTile_offline_beenactive .mx_EntityTile_avatar,
-.mx_EntityTile_offline_beenactive .mx_EntityTile_name,
-.mx_EntityTile_unavailable .mx_EntityTile_avatar,
-.mx_EntityTile_unavailable .mx_EntityTile_name {
- opacity: 0.5;
-}
-
-.mx_EntityTile_offline_neveractive .mx_EntityTile_avatar,
-.mx_EntityTile_offline_neveractive .mx_EntityTile_name,
-.mx_EntityTile_unknown .mx_EntityTile_avatar,
-.mx_EntityTile_unknown .mx_EntityTile_name {
- opacity: 0.25;
-}
-
-.mx_EntityTile_subtext {
- font-size: 1.1rem;
- opacity: 0.5;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: clip;
-}
-
-.mx_EntityTile_power {
- -webkit-padding-start: 6px;
- padding-inline-start: 6px;
- font-size: 1rem;
- color: #8d99a5;
- max-width: 6em;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.mx_EntityTile:hover .mx_EntityTile_power {
- display: none;
-}
-
-.mx_EventTile[data-layout="bubble"],
-.mx_EventTile[data-layout="bubble"] ~ .mx_EventListSummary {
- --avatarSize: 32px;
- --gutterSize: 11px;
- --cornerRadius: 12px;
- --maxWidth: 70%;
-}
-
-.mx_EventTile[data-layout="bubble"] {
- position: relative;
- margin-top: var(--gutterSize);
- margin-left: 50px;
- margin-right: 100px;
-}
-
-.mx_EventTile[data-layout="bubble"].mx_EventTile_continuation {
- margin-top: 2px;
-}
-
-.mx_EventTile[data-layout="bubble"] .mx_EventTile {
- padding-top: 0;
-}
-
-.mx_EventTile[data-layout="bubble"].mx_EventTile_selected:before,
-.mx_EventTile[data-layout="bubble"]:hover:before {
- content: "";
- position: absolute;
- top: -1px;
- bottom: -1px;
- left: -60px;
- right: -60px;
- z-index: -1;
- background: #fefcf5;
- border-radius: 4px;
-}
-
-.mx_EventTile[data-layout="bubble"].mx_EventTile_selected
- .mx_EventTile_avatar
- img,
-.mx_EventTile[data-layout="bubble"]:hover .mx_EventTile_avatar img {
- -webkit-box-shadow: 0 0 0 3px #fefcf5;
- box-shadow: 0 0 0 3px #fefcf5;
-}
-
-.mx_EventTile[data-layout="bubble"] .mx_EventTile_line,
-.mx_EventTile[data-layout="bubble"] .mx_SenderProfile {
- width: -webkit-fit-content;
- width: -moz-fit-content;
- width: fit-content;
- max-width: 70%;
-}
-
-.mx_EventTile[data-layout="bubble"] .mx_SenderProfile {
- position: relative;
- top: -2px;
- left: 2px;
-}
-
-.mx_EventTile[data-layout="bubble"][data-self="false"] .mx_EventTile_line {
- border-bottom-right-radius: var(--cornerRadius);
-}
-
-.mx_EventTile[data-layout="bubble"][data-self="false"] .mx_EventTile_avatar {
- left: -34px;
-}
-
-.mx_EventTile[data-layout="bubble"][data-self="false"] .mx_MessageActionBar {
- right: 0;
- -webkit-transform: translate3d(90%, 50%, 0);
- transform: translate3d(90%, 50%, 0);
-}
-
-.mx_EventTile[data-layout="bubble"][data-self="false"] {
- --backgroundColor: #f7f8f9;
-}
-
-.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line {
- border-bottom-left-radius: var(--cornerRadius);
- float: right;
-}
-
-.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line > a {
- left: auto;
- right: -68px;
-}
-
-.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_SenderProfile {
- display: none;
-}
-
-.mx_EventTile[data-layout="bubble"][data-self="true"]
- .mx_ReplyTile
- .mx_SenderProfile {
- display: block;
-}
-
-.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_ReactionsRow {
- float: right;
- clear: right;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_EventTile[data-layout="bubble"][data-self="true"]
- .mx_ReactionsRow
- > :last-child {
- -webkit-box-ordinal-group: 0;
- -ms-flex-order: -1;
- order: -1;
-}
-
-.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_avatar {
- top: -19px;
- right: -35px;
-}
-
-.mx_EventTile[data-layout="bubble"][data-self="true"] {
- --backgroundColor: #f8fdfc;
-}
-
-.mx_EventTile[data-layout="bubble"] .mx_EventTile_line {
- position: relative;
- padding: var(--gutterSize);
- border-top-left-radius: var(--cornerRadius);
- border-top-right-radius: var(--cornerRadius);
- background: var(--backgroundColor);
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- grid-gap: 5px;
- gap: 5px;
- margin: 0 -12px 0 -9px;
-}
-
-.mx_EventTile[data-layout="bubble"] .mx_EventTile_line > a {
- position: absolute;
- padding: 10px 20px;
- top: 0;
- left: -68px;
-}
-
-.mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="false"]
- .mx_EventTile_line {
- border-top-left-radius: 0;
-}
-
-.mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="false"]
- .mx_EventTile_line {
- border-bottom-left-radius: var(--cornerRadius);
-}
-
-.mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="true"]
- .mx_EventTile_line {
- border-top-right-radius: 0;
-}
-
-.mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="true"]
- .mx_EventTile_line {
- border-bottom-right-radius: var(--cornerRadius);
-}
-
-.mx_EventTile[data-layout="bubble"] .mx_EventTile_avatar {
- position: absolute;
- top: 0;
-}
-
-.mx_EventTile[data-layout="bubble"] .mx_EventTile_avatar img {
- -webkit-box-shadow: 0 0 0 3px #fff;
- box-shadow: 0 0 0 3px #fff;
- border-radius: 50%;
-}
-
-.mx_EventTile[data-layout="bubble"] .mx_BaseAvatar,
-.mx_EventTile[data-layout="bubble"] .mx_EventTile_avatar {
- line-height: 1;
-}
-
-.mx_EventTile[data-layout="bubble"][data-has-reply="true"]
- > .mx_EventTile_line {
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_EventTile[data-layout="bubble"][data-has-reply="true"]
- .mx_ReplyThread_show {
- -webkit-box-ordinal-group: 100000;
- -ms-flex-order: 99999;
- order: 99999;
-}
-
-.mx_EventTile[data-layout="bubble"][data-has-reply="true"] .mx_ReplyThread {
- margin: 0 calc(var(--gutterSize) * -1);
-}
-
-.mx_EventTile[data-layout="bubble"][data-has-reply="true"]
- .mx_ReplyThread
- .mx_EventTile_reply {
- max-width: 90%;
- padding: 0;
-}
-
-.mx_EventTile[data-layout="bubble"][data-has-reply="true"]
- .mx_ReplyThread
- .mx_EventTile_reply
- > a {
- display: none !important;
-}
-
-.mx_EventTile[data-layout="bubble"][data-has-reply="true"]
- .mx_ReplyThread
- .mx_EventTile {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- grid-gap: var(--gutterSize);
- gap: var(--gutterSize);
-}
-
-.mx_EventTile[data-layout="bubble"][data-has-reply="true"]
- .mx_ReplyThread
- .mx_EventTile
- .mx_EventTile_avatar {
- position: static;
-}
-
-.mx_EventTile[data-layout="bubble"][data-has-reply="true"]
- .mx_ReplyThread
- .mx_EventTile
- .mx_SenderProfile {
- display: none;
-}
-
-.mx_EventTile[data-layout="bubble"] .mx_EditMessageComposer_buttons {
- position: static;
- padding: 0;
- margin: 0;
- background: transparent;
-}
-
-.mx_EventTile[data-layout="bubble"] .mx_ReactionsRow {
- margin-right: -18px;
- margin-left: -9px;
-}
-
-.mx_EventTile[data-layout="bubble"] .mx_ReplyThread {
- border-left-width: 2px;
- border-left-color: #c1c6cd;
-}
-
-.mx_EventTile[data-layout="bubble"].mx_EventTile_bubbleContainer,
-.mx_EventTile[data-layout="bubble"].mx_EventTile_info,
-.mx_EventTile[data-layout="bubble"]
- ~ .mx_EventListSummary[data-expanded="false"] {
- --backgroundColor: transparent;
- --gutterSize: 0;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- padding: 5px 0;
-}
-
-.mx_EventTile[data-layout="bubble"].mx_EventTile_bubbleContainer
- .mx_EventTile_avatar,
-.mx_EventTile[data-layout="bubble"].mx_EventTile_info .mx_EventTile_avatar,
-.mx_EventTile[data-layout="bubble"]
- ~ .mx_EventListSummary[data-expanded="false"]
- .mx_EventTile_avatar {
- position: static;
- -webkit-box-ordinal-group: 0;
- -ms-flex-order: -1;
- order: -1;
- margin-right: 5px;
-}
-
-.mx_EventTile[data-layout="bubble"] ~ .mx_EventListSummary {
- --maxWidth: 80%;
- margin-left: calc(var(--avatarSize) + var(--gutterSize));
- margin-right: calc(var(--gutterSize) + var(--avatarSize));
-}
-
-.mx_EventTile[data-layout="bubble"]
- ~ .mx_EventListSummary
- .mx_EventListSummary_toggle {
- float: none;
- -webkit-box-ordinal-group: 10;
- -ms-flex-order: 9;
- order: 9;
- margin: 0 0 0 5px;
-}
-
-.mx_EventTile[data-layout="bubble"]
- ~ .mx_EventListSummary
- .mx_EventListSummary_avatars {
- padding-top: 0;
-}
-
-.mx_EventTile[data-layout="bubble"] ~ .mx_EventListSummary:after {
- content: "";
- clear: both;
-}
-
-.mx_EventTile[data-layout="bubble"] ~ .mx_EventListSummary .mx_EventTile {
- margin: 0 6px;
-}
-
-.mx_EventTile[data-layout="bubble"] ~ .mx_EventListSummary .mx_EventTile_line {
- margin: 0 5px;
-}
-
-.mx_EventTile[data-layout="bubble"]
- ~ .mx_EventListSummary
- .mx_EventTile_line
- > a {
- left: auto;
- right: 0;
- -webkit-transform: translateX(calc(100% + 5px));
- transform: translateX(calc(100% + 5px));
-}
-
-.mx_EventTile[data-layout="bubble"]
- ~ .mx_EventListSummary
- .mx_MessageActionBar {
- -webkit-transform: translate3d(90%, 0, 0);
- transform: translate3d(90%, 0, 0);
-}
-
-.mx_EventTile[data-layout="bubble"]
- ~ .mx_EventListSummary[data-expanded="false"] {
- padding: 0 34px;
-}
-
-.mx_EventTile[data-layout="bubble"].mx_EventTile_bad .mx_EventTile_line,
-.mx_EventTile[data-layout="bubble"].mx_EventTile_bad:hover:before,
-.mx_EventTile[data-layout="bubble"] ~ .mx_EventListSummary .mx_EventTile_line,
-.mx_EventTile[data-layout="bubble"] ~ .mx_EventListSummary:hover:before {
- background: transparent;
-}
-
-.mx_EventTile[data-layout="bubble"] + .mx_EventListSummary .mx_EventTile {
- margin-top: 0;
- padding: 2px 0;
-}
-
-.mx_EventTile[data-layout="bubble"] .mx_EventListSummary_toggle {
- margin-right: 55px;
-}
-
-.mx_EventTile[data-layout="bubble"].mx_EventTile_bad > .mx_EventTile_line {
- display: grid;
- grid-template: "reply reply" auto "shield body" auto "shield link" auto/auto 1fr;
-}
-
-.mx_EventTile[data-layout="bubble"].mx_EventTile_bad
- > .mx_EventTile_line
- .mx_EventTile_e2eIcon {
- grid-area: shield;
-}
-
-.mx_EventTile[data-layout="bubble"].mx_EventTile_bad
- > .mx_EventTile_line
- .mx_UnknownBody {
- grid-area: body;
-}
-
-.mx_EventTile[data-layout="bubble"].mx_EventTile_bad
- > .mx_EventTile_line
- .mx_EventTile_keyRequestInfo {
- grid-area: link;
-}
-
-.mx_EventTile[data-layout="bubble"].mx_EventTile_bad
- > .mx_EventTile_line
- .mx_ReplyThread_wrapper {
- grid-area: reply;
-}
-
-.mx_EventTile[data-layout="bubble"] .mx_EventTile_readAvatars {
- position: absolute;
- right: -110px;
- bottom: 0;
- top: auto;
-}
-
-.mx_EventTile[data-layout="bubble"] .mx_MTextBody {
- max-width: 100%;
-}
-
-.mx_EventTile:not([data-layout="bubble"]) {
- max-width: 100%;
- clear: both;
- padding-top: 18px;
- font-size: 1.4rem;
- position: relative;
-}
-
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_info {
- padding-top: 1px;
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_avatar {
- top: 14px;
- left: 8px;
- cursor: pointer;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_info
- .mx_EventTile_avatar {
- top: 0.6rem;
- left: 64px;
-}
-
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_continuation {
- padding-top: 0 !important;
-}
-
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_continuation.mx_EventTile_isEditing {
- padding-top: 5px !important;
- margin-top: -5px;
-}
-
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_isEditing {
- background-color: #f3f8fd;
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_SenderProfile {
- color: #2e2f32;
- font-size: 1.4rem;
- display: inline-block;
- overflow: hidden;
- cursor: pointer;
- padding-bottom: 0;
- padding-top: 0;
- margin: 0;
- white-space: nowrap;
- text-overflow: ellipsis;
- max-width: calc(100% - 64px);
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_SenderProfile .mx_Flair {
- opacity: 0.7;
- margin-left: 5px;
- display: inline-block;
- vertical-align: top;
- overflow: hidden;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_SenderProfile .mx_Flair img {
- vertical-align: -2px;
- margin-right: 2px;
- border-radius: 8px;
-}
-
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_isEditing
- .mx_MessageTimestamp {
- visibility: hidden;
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_MessageTimestamp {
- display: block;
- white-space: nowrap;
- left: 0;
- text-align: center;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_continuation
- .mx_EventTile_line {
- clear: both;
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_line,
-.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_reply {
- position: relative;
- padding-left: 64px;
- border-radius: 8px;
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_reply {
- margin-right: 10px;
-}
-
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_selected
- > div
- > a
- > .mx_MessageTimestamp {
- left: -4px;
-}
-
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_selected
- > .mx_EventTile_line {
- border-left: 4px solid #0dbd8b;
- padding-left: 60px;
- background-color: #f6f7f8;
-}
-
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_highlight,
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_highlight
- .markdown-body {
- color: #ff4b55;
-}
-
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_highlight
- .markdown-body
- .mx_EventTile_line,
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_highlight
- .mx_EventTile_line {
- background-color: #fff8e3;
-}
-
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_info .mx_EventTile_line,
-.mx_EventTile:not([data-layout="bubble"])
- ~ .mx_EventListSummary
- .mx_EventTile_avatar
- ~ .mx_EventTile_line {
- padding-left: 82px;
-}
-
-.mx_EventTile:not([data-layout="bubble"])
- ~ .mx_EventListSummary
- .mx_EventTile_line {
- padding-left: 64px;
-}
-
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_selected.mx_EventTile_info
- .mx_EventTile_line {
- padding-left: 78px;
-}
-
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile.focus-visible:focus-within
- .mx_EventTile_line,
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile.mx_EventTile_actionBarFocused
- .mx_EventTile_line,
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile:hover
- .mx_EventTile_line {
- background-color: #f6f7f8;
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_searchHighlight {
- background-color: #0dbd8b;
- color: #fff;
- border-radius: 5px;
- padding-left: 2px;
- padding-right: 2px;
- cursor: pointer;
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_searchHighlight a {
- background-color: #0dbd8b;
- color: #fff;
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_receiptSending:before,
-.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_receiptSent:before {
- background-color: #8d99a5;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 14px;
- mask-size: 14px;
- width: 14px;
- height: 14px;
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_receiptSent:before {
- -webkit-mask-image: url(../../img/element-icons/circle-sent.5079cbe.svg);
- mask-image: url(../../img/element-icons/circle-sent.5079cbe.svg);
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_receiptSending:before {
- -webkit-mask-image: url(../../img/element-icons/circle-sending.bcca6aa.svg);
- mask-image: url(../../img/element-icons/circle-sending.bcca6aa.svg);
-}
-
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_contextual {
- opacity: 0.4;
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_msgOption {
- float: right;
- text-align: right;
- position: relative;
- width: 90px;
- height: 1px;
- margin-right: 10px;
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_msgOption a {
- text-decoration: none;
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_body {
- overflow-y: hidden;
-}
-
-.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unknown
- .mx_EventTile_line,
-.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unverified
- .mx_EventTile_line,
-.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_verified
- .mx_EventTile_line {
- padding-left: 60px;
-}
-
-.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_verified
- .mx_EventTile_line {
- border-left: 4px solid #76cfa5;
-}
-
-.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unknown
- .mx_EventTile_line,
-.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unverified
- .mx_EventTile_line {
- border-left: 4px solid #e8bf37;
-}
-
-.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unknown.mx_EventTile_info
- .mx_EventTile_line,
-.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unverified.mx_EventTile_info
- .mx_EventTile_line,
-.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_verified.mx_EventTile_info
- .mx_EventTile_line {
- padding-left: 78px;
-}
-
-.mx_EventTile:not([data-layout="bubble"]):hover .mx_EventTile_e2eIcon {
- opacity: 1;
-}
-
-.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unknown
- .mx_EventTile_line
- > a
- > .mx_MessageTimestamp,
-.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unverified
- .mx_EventTile_line
- > a
- > .mx_MessageTimestamp,
-.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_verified
- .mx_EventTile_line
- > a
- > .mx_MessageTimestamp {
- left: -4px;
-}
-
-.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unknown
- .mx_EventTile_line
- > .mx_EventTile_e2eIcon,
-.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unverified
- .mx_EventTile_line
- > .mx_EventTile_e2eIcon,
-.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_verified
- .mx_EventTile_line
- > .mx_EventTile_e2eIcon {
- display: block;
- left: 41px;
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_MImageBody {
- margin-right: 34px;
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_e2eIcon {
- position: absolute;
- top: 6px;
- left: 44px;
- bottom: 0;
- right: 0;
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_ReactionsRow {
- margin: 0;
- padding: 6px 60px;
-}
-
-.mx_EventTile_content {
- overflow-y: hidden;
- overflow-x: hidden;
- margin-right: 34px;
-}
-
-.mx_EventTile_spoiler {
- cursor: pointer;
-}
-
-.mx_EventTile_spoiler_reason {
- color: #acacac;
- font-size: 1.1rem;
-}
-
-.mx_EventTile_spoiler_content {
- -webkit-filter: blur(5px) saturate(0.1) sepia(1);
- filter: blur(5px) saturate(0.1) sepia(1);
- -webkit-transition-duration: 0.5s;
- transition-duration: 0.5s;
-}
-
-.mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content {
- -webkit-filter: none;
- filter: none;
-}
-
-.mx_RoomView_timeline_rr_enabled
- .mx_EventTile:not([data-layout="bubble"])
- .mx_EventTile_line {
- margin-right: 110px;
-}
-
-.mx_EventTile_bubbleContainer {
- display: grid;
- grid-template-columns: 1fr 100px;
-}
-
-.mx_EventTile_bubbleContainer .mx_EventTile_line {
- margin-right: 0;
- grid-column: 1/3;
- padding: 0 !important;
-}
-
-.mx_EventTile_bubbleContainer .mx_EventTile_msgOption {
- grid-column: 2;
-}
-
-.mx_EventTile_bubbleContainer:hover .mx_EventTile_line {
- background-color: inherit !important;
-}
-
-.mx_EventTile_readAvatars {
- position: relative;
- display: inline-block;
- width: 14px;
- height: 14px;
- top: -2.2rem;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- z-index: 1;
-}
-
-.mx_EventTile_readAvatars .mx_BaseAvatar {
- position: absolute;
- display: inline-block;
- height: 1.4rem;
- width: 1.4rem;
- will-change: left, top;
- -webkit-transition: left 0.1s ease-out, top 0.3s ease-out;
- transition: left 0.1s ease-out, top 0.3s ease-out;
- -webkit-transition: left var(--transition-short) ease-out,
- top var(--transition-standard) ease-out;
- transition: left var(--transition-short) ease-out,
- top var(--transition-standard) ease-out;
-}
-
-.mx_EventTile_readAvatarRemainder {
- color: #acacac;
- font-size: 1.1rem;
- position: absolute;
-}
-
-.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
- font-size: 48px !important;
- line-height: 57px !important;
-}
-
-.mx_EventTile_content .mx_EventTile_edited {
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- font-size: 1.2rem;
- color: #9e9e9e;
- display: inline-block;
- margin-left: 9px;
- cursor: pointer;
-}
-
-.mx_EventTile_e2eIcon {
- position: relative;
- width: 14px;
- height: 14px;
- display: block;
- opacity: 0.2;
- background-repeat: no-repeat;
- background-size: contain;
-}
-
-.mx_EventTile_e2eIcon:after,
-.mx_EventTile_e2eIcon:before {
- content: "";
- display: block;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- -webkit-mask-size: contain;
- mask-size: contain;
-}
-
-.mx_EventTile_e2eIcon:after,
-.mx_EventTile_e2eIcon:before {
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_EventTile_e2eIcon:before {
- background-color: #fff;
- -webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
- mask-image: url(../../img/e2e/normal.76f0c09.svg);
- -webkit-mask-size: 80%;
- mask-size: 80%;
-}
-
-.mx_EventTile_e2eIcon_undecryptable:after,
-.mx_EventTile_e2eIcon_unverified:after {
- -webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
- mask-image: url(../../img/e2e/warning.78bb264.svg);
- background-color: #ff4b55;
-}
-
-.mx_EventTile_e2eIcon_undecryptable,
-.mx_EventTile_e2eIcon_unverified {
- opacity: 1;
-}
-
-.mx_EventTile_e2eIcon_unknown:after {
- -webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
- mask-image: url(../../img/e2e/warning.78bb264.svg);
- background-color: #ff4b55;
-}
-
-.mx_EventTile_e2eIcon_unknown {
- opacity: 1;
-}
-
-.mx_EventTile_e2eIcon_unencrypted:after {
- -webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
- mask-image: url(../../img/e2e/warning.78bb264.svg);
- background-color: #ff4b55;
-}
-
-.mx_EventTile_e2eIcon_unencrypted {
- opacity: 1;
-}
-
-.mx_EventTile_e2eIcon_unauthenticated:after {
- -webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
- mask-image: url(../../img/e2e/normal.76f0c09.svg);
- background-color: #91a1c0;
-}
-
-.mx_EventTile_e2eIcon_unauthenticated {
- opacity: 1;
-}
-
-.mx_EventTile_body pre {
- border: 1px solid transparent;
-}
-
-.mx_EventTile_content .markdown-body {
- font-family: inherit !important;
- white-space: normal !important;
- line-height: inherit !important;
- color: inherit;
- font-size: 1.4rem;
-}
-
-.mx_EventTile_content .markdown-body code,
-.mx_EventTile_content .markdown-body pre {
- font-family: Menlo, Consolas, Liberation Mono, Lucida Console, monospace !important;
- background-color: #f3f8fd;
-}
-
-.mx_EventTile_content .markdown-body pre code > * {
- display: inline-block;
-}
-
-.mx_EventTile_content .markdown-body pre {
- overflow-x: overlay;
- overflow-y: visible;
-}
-
-.mx_EventTile_lineNumbers {
- float: left;
- margin: 0 0.5em 0 -1.5em;
- color: grey;
-}
-
-.mx_EventTile_lineNumber {
- text-align: right;
- display: block;
- padding-left: 1em;
-}
-
-.mx_EventTile_collapsedCodeBlock {
- max-height: 30vh;
-}
-
-.mx_EventTile.focus-visible:focus-within .mx_EventTile_body pre,
-.mx_EventTile:hover .mx_EventTile_body pre {
- border: 1px solid #e5e5e5;
-}
-
-.mx_EventTile_pre_container {
- position: relative;
-}
-
-.mx_EventTile_button {
- position: absolute;
- display: inline-block;
- visibility: hidden;
- cursor: pointer;
- top: 8px;
- right: 8px;
- width: 19px;
- height: 19px;
- background-color: #2e2f32;
-}
-
-.mx_EventTile_buttonBottom {
- top: 33px;
-}
-
-.mx_EventTile_copyButton {
- -webkit-mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
- mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
-}
-
-.mx_EventTile_collapseButton {
- -webkit-mask-image: url(../../img/feather-customised/minimise.aec9142.svg);
- mask-image: url(../../img/feather-customised/minimise.aec9142.svg);
-}
-
-.mx_EventTile_collapseButton,
-.mx_EventTile_expandButton {
- -webkit-mask-size: 75%;
- mask-size: 75%;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
-}
-
-.mx_EventTile_expandButton {
- -webkit-mask-image: url(../../img/feather-customised/maximise.dc32127.svg);
- mask-image: url(../../img/feather-customised/maximise.dc32127.svg);
-}
-
-.mx_EventTile_body
- .mx_EventTile_pre_container:focus-within
- .mx_EventTile_collapseButton,
-.mx_EventTile_body
- .mx_EventTile_pre_container:focus-within
- .mx_EventTile_copyButton,
-.mx_EventTile_body
- .mx_EventTile_pre_container:focus-within
- .mx_EventTile_expandButton,
-.mx_EventTile_body
- .mx_EventTile_pre_container:hover
- .mx_EventTile_collapseButton,
-.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton,
-.mx_EventTile_body
- .mx_EventTile_pre_container:hover
- .mx_EventTile_expandButton {
- visibility: visible;
-}
-
-.mx_EventTile_content .markdown-body h1,
-.mx_EventTile_content .markdown-body h2,
-.mx_EventTile_content .markdown-body h3,
-.mx_EventTile_content .markdown-body h4,
-.mx_EventTile_content .markdown-body h5,
-.mx_EventTile_content .markdown-body h6 {
- font-family: inherit !important;
- color: inherit;
-}
-
-.mx_EventTile_content .markdown-body h1,
-.mx_EventTile_content .markdown-body h2 {
- font-size: 1.5em;
- border-bottom: none !important;
-}
-
-.mx_EventTile_content .markdown-body a {
- color: #238cf5;
-}
-
-.mx_EventTile_content .markdown-body .hljs {
- display: inline !important;
-}
-
-.mx_EventTile_keyRequestInfo {
- font-size: 1.2rem;
-}
-
-.mx_EventTile_keyRequestInfo_text {
- opacity: 0.5;
-}
-
-.mx_EventTile_keyRequestInfo_text a {
- color: #2e2f32;
- text-decoration: underline;
- cursor: pointer;
-}
-
-.mx_EventTile_keyRequestInfo_tooltip_contents p {
- text-align: auto;
- margin-left: 3px;
- margin-right: 3px;
-}
-
-.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child {
- margin-top: 0;
-}
-
-.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child {
- margin-bottom: 0;
-}
-
-.mx_EventTile_tileError {
- color: red;
- text-align: center;
- margin-right: 0;
-}
-
-.mx_EventTile_tileError .mx_EventTile_line {
- padding-left: 0;
- margin-right: 0;
-}
-
-.mx_EventTile_tileError .mx_EventTile_line span {
- padding: 4px 8px;
-}
-
-.mx_EventTile_tileError a {
- margin-left: 1em;
-}
-
-.mx_EventTile.focus-visible:focus-within .mx_MessageActionBar,
-.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,
-.mx_EventTile:hover .mx_MessageActionBar,
-[data-whatinput="keyboard"] .mx_EventTile:focus-within .mx_MessageActionBar {
- visibility: visible;
-}
-
-@media only screen and (max-width: 480px) {
- .mx_EventTile_line,
- .mx_EventTile_reply {
- padding-left: 0;
- margin-right: 0;
- }
- .mx_EventTile_content {
- margin-top: 10px;
- margin-right: 0;
- }
-}
-
-.mx_GroupLayout .mx_EventTile > .mx_SenderProfile {
- line-height: 2rem;
- margin-left: 64px;
-}
-
-.mx_GroupLayout .mx_EventTile > .mx_EventTile_avatar {
- position: absolute;
- z-index: 9;
-}
-
-.mx_GroupLayout .mx_EventTile .mx_MessageTimestamp {
- position: absolute;
- width: 46px;
-}
-
-.mx_GroupLayout .mx_EventTile .mx_EventTile_line,
-.mx_GroupLayout .mx_EventTile .mx_EventTile_reply {
- padding-top: 1px;
- padding-bottom: 3px;
- line-height: 2.2rem;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_EventTile {
- padding-top: 4px;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_line,
-.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_reply {
- padding-top: 0;
- padding-bottom: 0;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info {
- padding-top: 0;
- font-size: 1.3rem;
-}
-
-.mx_MatrixChat_useCompactLayout
- .mx_EventTile.mx_EventTile_info
- .mx_EventTile_line,
-.mx_MatrixChat_useCompactLayout
- .mx_EventTile.mx_EventTile_info
- .mx_EventTile_reply {
- line-height: 2rem;
-}
-
-.mx_MatrixChat_useCompactLayout
- .mx_EventTile.mx_EventTile_info
- .mx_EventTile_avatar {
- top: 4px;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_SenderProfile {
- font-size: 1.3rem;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote {
- padding-top: 8px;
-}
-
-.mx_MatrixChat_useCompactLayout
- .mx_EventTile.mx_EventTile_emote
- .mx_EventTile_avatar {
- top: 2px;
-}
-
-.mx_MatrixChat_useCompactLayout
- .mx_EventTile.mx_EventTile_emote
- .mx_EventTile_line,
-.mx_MatrixChat_useCompactLayout
- .mx_EventTile.mx_EventTile_emote
- .mx_EventTile_reply {
- padding-top: 0;
- padding-bottom: 1px;
-}
-
-.mx_MatrixChat_useCompactLayout
- .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation {
- padding-top: 0;
-}
-
-.mx_MatrixChat_useCompactLayout
- .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation
- .mx_EventTile_line,
-.mx_MatrixChat_useCompactLayout
- .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation
- .mx_EventTile_reply {
- padding-top: 0;
- padding-bottom: 0;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_avatar {
- top: 2px;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_e2eIcon {
- top: 3px;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_readAvatars {
- top: -2rem;
-}
-
-.mx_MatrixChat_useCompactLayout
- .mx_EventTile
- .mx_EventTile_content
- .markdown-body
- blockquote,
-.mx_MatrixChat_useCompactLayout
- .mx_EventTile
- .mx_EventTile_content
- .markdown-body
- dl,
-.mx_MatrixChat_useCompactLayout
- .mx_EventTile
- .mx_EventTile_content
- .markdown-body
- ol,
-.mx_MatrixChat_useCompactLayout
- .mx_EventTile
- .mx_EventTile_content
- .markdown-body
- p,
-.mx_MatrixChat_useCompactLayout
- .mx_EventTile
- .mx_EventTile_content
- .markdown-body
- pre,
-.mx_MatrixChat_useCompactLayout
- .mx_EventTile
- .mx_EventTile_content
- .markdown-body
- table,
-.mx_MatrixChat_useCompactLayout
- .mx_EventTile
- .mx_EventTile_content
- .markdown-body
- ul {
- margin-bottom: 4px;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList h2 {
- margin-top: 6px;
-}
-
-.mx_IRCLayout {
- --name-width: 70px;
- line-height: 1.8rem !important;
-}
-
-.mx_IRCLayout .mx_EventTile > a {
- text-decoration: none;
- min-width: 45px;
-}
-
-.mx_IRCLayout .mx_EventTile {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: flex-start;
- padding-top: 0;
-}
-
-.mx_IRCLayout .mx_EventTile > * {
- margin-right: 5px;
-}
-
-.mx_IRCLayout .mx_EventTile > .mx_EventTile_msgOption {
- -webkit-box-ordinal-group: 6;
- -ms-flex-order: 5;
- order: 5;
- -ms-flex-negative: 0;
- flex-shrink: 0;
-}
-
-.mx_IRCLayout
- .mx_EventTile
- > .mx_EventTile_msgOption
- .mx_EventTile_readAvatars {
- top: 0.2rem;
-}
-
-.mx_IRCLayout .mx_EventTile .mx_EventTile_line,
-.mx_IRCLayout .mx_EventTile .mx_EventTile_reply {
- padding: 0;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-ordinal-group: 4;
- -ms-flex-order: 3;
- order: 3;
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- -ms-flex-negative: 1;
- flex-shrink: 1;
- min-width: 0;
-}
-
-.mx_IRCLayout .mx_EventTile > .mx_EventTile_avatar {
- -webkit-box-ordinal-group: 2;
- -ms-flex-order: 1;
- order: 1;
- position: relative;
- top: 0;
- left: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- height: 1.8rem;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_IRCLayout .mx_EventTile > .mx_EventTile_avatar > .mx_BaseAvatar,
-.mx_IRCLayout .mx_EventTile > .mx_EventTile_avatar > .mx_BaseAvatar > * {
- height: 1.4rem !important;
- width: 1.4rem !important;
- font-size: 1rem !important;
- line-height: 1.5rem !important;
-}
-
-.mx_IRCLayout .mx_EventTile .mx_MessageTimestamp {
- font-size: 1rem;
- width: 45px;
- text-align: right;
-}
-
-.mx_IRCLayout .mx_EventTile > .mx_EventTile_e2eIcon {
- position: absolute;
- right: unset;
- left: unset;
- top: 0;
- padding: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- -webkit-box-flex: 0;
- -ms-flex-positive: 0;
- flex-grow: 0;
- height: 1.8rem;
- background-position: 50%;
-}
-
-.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_EventTile_e2eIcon,
-.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_MTextBody,
-.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_TextualEvent {
- display: inline-block;
-}
-
-.mx_IRCLayout .mx_EventTile .mx_EventTile_reply {
- -webkit-box-ordinal-group: 5;
- -ms-flex-order: 4;
- order: 4;
-}
-
-.mx_IRCLayout .mx_EventTile .mx_EditMessageComposer_buttons {
- position: relative;
-}
-
-.mx_IRCLayout .mx_EventTile_emote > .mx_EventTile_avatar {
- margin-left: calc(var(--name-width) + 19px);
-}
-
-.mx_IRCLayout blockquote {
- margin: 0;
-}
-
-.mx_IRCLayout .mx_EventListSummary > .mx_EventTile_line {
- padding-left: calc(var(--name-width) + 74px);
-}
-
-.mx_IRCLayout .mx_EventListSummary .mx_EventListSummary_avatars {
- padding: 0;
- margin: 0 9px 0 0;
-}
-
-.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
- left: calc(var(--name-width) + 24px);
- top: 0;
-}
-
-.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_line {
- left: calc(var(--name-width) + 24px);
-}
-
-.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_TextualEvent {
- line-height: 1.8rem;
-}
-
-.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,
-.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
-.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
- padding-left: 0;
- border-left: 0;
-}
-
-.mx_IRCLayout .mx_SenderProfile {
- width: var(--name-width);
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-ordinal-group: 3;
- -ms-flex-order: 2;
- order: 2;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- -webkit-box-pack: start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_IRCLayout .mx_SenderProfile > .mx_SenderProfile_displayName {
- width: 100%;
- text-align: end;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.mx_IRCLayout .mx_SenderProfile > .mx_SenderProfile_mxid {
- visibility: collapse;
-}
-
-.mx_IRCLayout .mx_SenderProfile:hover {
- overflow: visible;
- z-index: 10;
-}
-
-.mx_IRCLayout .mx_SenderProfile:hover > .mx_SenderProfile_displayName {
- overflow: visible;
-}
-
-.mx_IRCLayout .mx_SenderProfile:hover > .mx_SenderProfile_mxid {
- visibility: visible;
-}
-
-.mx_IRCLayout .mx_ReplyThread {
- margin: 0;
-}
-
-.mx_IRCLayout .mx_ReplyThread .mx_SenderProfile {
- -webkit-box-ordinal-group: unset;
- -ms-flex-order: unset;
- order: unset;
- max-width: unset;
- width: unset;
- background: transparent;
-}
-
-.mx_IRCLayout .mx_ReplyThread .mx_EventTile_emote > .mx_EventTile_avatar {
- margin-left: 0;
-}
-
-.mx_IRCLayout .mx_ReplyThread .mx_MessageTimestamp {
- width: auto;
-}
-
-.mx_IRCLayout .mx_ReplyThread .mx_EventTile_e2eIcon {
- position: relative;
- -webkit-box-ordinal-group: 0;
- -ms-flex-order: -1;
- order: -1;
-}
-
-.mx_IRCLayout .mx_ProfileResizer {
- position: absolute;
- height: 100%;
- width: 15px;
- left: calc(80px + var(--name-width));
- cursor: col-resize;
- z-index: 100;
-}
-
-.mx_IRCLayout .mx_Flair > img {
- height: 1.4rem !important;
- width: 1.4rem !important;
-}
-
-.mx_JumpToBottomButton {
- z-index: 1000;
- position: absolute;
- bottom: 12px;
- right: 24px;
- width: 38px;
- height: 50px;
- text-align: center;
-}
-
-.mx_JumpToBottomButton_badge {
- position: relative;
- top: -12px;
- border-radius: 16px;
- font-weight: 700;
- font-size: 1.2rem;
- line-height: 1.4rem;
- text-align: center;
- display: inline-block;
- padding: 0 4px;
- color: #fff;
- background-color: #61708b;
-}
-
-.mx_JumpToBottomButton_highlight .mx_JumpToBottomButton_badge {
- color: #f2f5f8;
- background-color: #ff4b55;
-}
-
-.mx_JumpToBottomButton_scrollDown {
- position: relative;
- display: block;
- height: 38px;
- border-radius: 19px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- background: #fff;
- border: 1.3px solid #61708b;
- cursor: pointer;
-}
-
-.mx_JumpToBottomButton_scrollDown:before {
- content: "";
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- -webkit-mask-image: url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);
- mask-image: url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- background: #61708b;
-}
-
-.mx_LinkPreviewGroup .mx_LinkPreviewGroup_hide {
- cursor: pointer;
- width: 18px;
- height: 18px;
-}
-
-.mx_LinkPreviewGroup .mx_LinkPreviewGroup_hide img {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 40px;
- flex: 0 0 40px;
- visibility: hidden;
-}
-
-.mx_LinkPreviewGroup .mx_LinkPreviewGroup_hide.focus-visible:focus img,
-.mx_LinkPreviewGroup:hover .mx_LinkPreviewGroup_hide img {
- visibility: visible;
-}
-
-.mx_LinkPreviewGroup > .mx_AccessibleButton {
- color: #0dbd8b;
- text-align: center;
-}
-
-.mx_LinkPreviewWidget {
- margin-top: 15px;
- margin-right: 15px;
- margin-bottom: 15px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- border-left: 2px solid #ddd;
- border-radius: 2px;
- color: #888;
-}
-
-.mx_LinkPreviewWidget_image {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 100px;
- flex: 0 0 100px;
- margin-left: 15px;
- text-align: center;
- cursor: pointer;
-}
-
-.mx_LinkPreviewWidget_caption {
- margin-left: 15px;
- -webkit-box-flex: 1;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
- overflow: hidden;
-}
-
-.mx_LinkPreviewWidget_title {
- font-weight: 700;
- white-space: normal;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- overflow: hidden;
-}
-
-.mx_LinkPreviewWidget_title .mx_LinkPreviewWidget_siteName {
- font-weight: 400;
-}
-
-.mx_LinkPreviewWidget_description {
- margin-top: 8px;
- white-space: normal;
- word-wrap: break-word;
- display: -webkit-box;
- -webkit-line-clamp: 3;
- -webkit-box-orient: vertical;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_LinkPreviewWidget {
- margin-top: 6px;
- margin-bottom: 6px;
-}
-
-.mx_MemberInfo {
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- overflow-y: auto;
- margin-top: 8px;
-}
-
-.mx_MemberInfo,
-.mx_MemberInfo_name {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_MemberInfo_name {
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_MemberInfo_name > .mx_E2EIcon {
- margin-right: 0;
-}
-
-.mx_MemberInfo_cancel {
- height: 16px;
- width: 16px;
- padding: 10px 0 10px 10px;
- cursor: pointer;
- -webkit-mask-image: url(../../img/minimise.871d2de.svg);
- mask-image: url(../../img/minimise.871d2de.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: 16px center;
- mask-position: 16px center;
- background-color: #91a1c0;
-}
-
-.mx_MemberInfo_name h2 {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- overflow-x: auto;
- max-height: 50px;
-}
-
-.mx_MemberInfo h2 {
- font-size: 1.8rem;
- font-weight: 600;
- margin: 16px 0 16px 15px;
-}
-
-.mx_MemberInfo_container {
- margin: 0 16px 16px;
-}
-
-.mx_MemberInfo .mx_RoomTile_nameContainer {
- width: 154px;
-}
-
-.mx_MemberInfo .mx_RoomTile_badge {
- display: none;
-}
-
-.mx_MemberInfo .mx_RoomTile_name {
- width: 160px;
-}
-
-.mx_MemberInfo_avatar {
- background: hsla(0, 0%, 91%, 0.77);
- margin-bottom: 16px;
-}
-
-.mx_MemberInfo_avatar > img {
- height: auto;
- width: 100%;
- max-height: 30vh;
- -o-object-fit: contain;
- object-fit: contain;
- display: block;
-}
-
-.mx_MemberInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {
- cursor: -webkit-zoom-in;
- cursor: zoom-in;
-}
-
-.mx_MemberInfo_profile {
- margin-bottom: 16px;
-}
-
-.mx_MemberInfo h3 {
- text-transform: uppercase;
- color: #9fa9ba;
- font-weight: 700;
- font-size: 1.2rem;
- margin: 4px 0;
-}
-
-.mx_MemberInfo_profileField {
- font-size: 1.5rem;
- position: relative;
-}
-
-.mx_MemberInfo_buttons {
- margin-bottom: 16px;
-}
-
-.mx_MemberInfo_field {
- cursor: pointer;
- font-size: 1.5rem;
- color: #2e2f32;
- margin-left: 8px;
- line-height: 2.3rem;
-}
-
-.mx_MemberInfo_createRoom {
- cursor: pointer;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding: 0 8px;
-}
-
-.mx_MemberInfo_createRoom_label {
- width: auto !important;
- cursor: pointer;
-}
-
-.mx_MemberInfo label {
- font-size: 1.3rem;
-}
-
-.mx_MemberInfo label .mx_MemberInfo_label_text {
- display: inline-block;
- max-width: 180px;
- vertical-align: text-top;
-}
-
-.mx_MemberInfo input[type="radio"] {
- vertical-align: -2px;
- margin-right: 5px;
- margin-left: 8px;
-}
-
-.mx_MemberInfo_statusMessage {
- font-size: 1.1rem;
- opacity: 0.5;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: clip;
-}
-
-.mx_MemberInfo .mx_MemberInfo_scrollContainer {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
-}
-
-.mx_GroupMemberList,
-.mx_GroupRoomList,
-.mx_MemberList {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- min-height: 0;
-}
-
-.mx_GroupMemberList .mx_Spinner,
-.mx_GroupRoomList .mx_Spinner,
-.mx_MemberList .mx_Spinner {
- -webkit-box-flex: 1;
- -ms-flex: 1 0 auto;
- flex: 1 0 auto;
-}
-
-.mx_GroupMemberList .mx_SearchBox,
-.mx_GroupRoomList .mx_SearchBox,
-.mx_MemberList .mx_SearchBox {
- margin-bottom: 5px;
-}
-
-.mx_GroupMemberList h2,
-.mx_GroupRoomList h2,
-.mx_MemberList h2 {
- text-transform: uppercase;
- color: #3d3b39;
- font-weight: 600;
- font-size: 1.3rem;
- padding-left: 3px;
- padding-right: 12px;
- margin-top: 8px;
- margin-bottom: 4px;
-}
-
-.mx_GroupMemberList .mx_AutoHideScrollbar,
-.mx_GroupRoomList .mx_AutoHideScrollbar,
-.mx_MemberList .mx_AutoHideScrollbar {
- -webkit-box-flex: 1;
- -ms-flex: 1 1 0px;
- flex: 1 1 0;
-}
-
-.mx_GroupMemberList .mx_RightPanel_scopeHeader,
-.mx_GroupRoomList .mx_RightPanel_scopeHeader,
-.mx_MemberList .mx_RightPanel_scopeHeader {
- margin-top: -8px;
-}
-
-.mx_GroupMemberList_query,
-.mx_GroupRoomList_query {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
-}
-
-.mx_MemberList_chevron {
- position: absolute;
- right: 35px;
- margin-top: -15px;
-}
-
-.mx_MemberList_border {
- overflow-y: auto;
- -webkit-box-ordinal-group: 2;
- -ms-flex-order: 1;
- order: 1;
- -webkit-box-flex: 1;
- -ms-flex: 1 1 0px;
- flex: 1 1 0px;
-}
-
-.mx_MemberList_query {
- height: 16px;
-}
-
-.mx_MemberList_query[type="text"] {
- font-size: 1.2rem;
-}
-
-.mx_MemberList_wrapper {
- padding: 10px;
-}
-
-.mx_MemberList_invite {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- position: relative;
- background-color: #0dbd8b;
- border-radius: 4px;
- margin: 5px 9px 9px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- color: #fff;
- font-weight: 600;
-}
-
-.mx_MemberList_invite.mx_AccessibleButton_disabled {
- background-color: #888;
- cursor: not-allowed;
-}
-
-.mx_MemberList_invite span {
- padding: 8px 0;
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
-}
-
-.mx_MemberList_invite span:before {
- content: "";
- display: inline-block;
- background-color: #fff;
- -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
- mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 20px;
- mask-size: 20px;
- width: 20px;
- height: 20px;
- margin-right: 5px;
-}
-
-.mx_MemberList_inviteCommunity span:before {
- -webkit-mask-image: url(../../img/icon-invite-people.d82f491.svg);
- mask-image: url(../../img/icon-invite-people.d82f491.svg);
-}
-
-.mx_MemberList_addRoomToCommunity span:before {
- -webkit-mask-image: url(../../img/icons-room-add.bd36e26.svg);
- mask-image: url(../../img/icons-room-add.bd36e26.svg);
-}
-
-.mx_MessageComposer_wrapper {
- vertical-align: middle;
- margin: auto;
- border-top: 1px solid transparent;
- position: relative;
- padding-left: 82px;
- padding-right: 6px;
-}
-
-.mx_MessageComposer_replaced_wrapper {
- margin-left: auto;
- margin-right: auto;
-}
-
-.mx_MessageComposer_replaced_valign {
- height: 60px;
- display: table-cell;
- vertical-align: middle;
-}
-
-.mx_MessageComposer_roomReplaced_icon {
- float: left;
- margin-right: 20px;
- margin-top: 5px;
- width: 31px;
- height: 31px;
-}
-
-.mx_MessageComposer_roomReplaced_header {
- font-weight: 700;
-}
-
-.mx_MessageComposer_autocomplete_wrapper {
- position: relative;
- height: 0;
-}
-
-.mx_MessageComposer_row {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- width: 100%;
-}
-
-.mx_MessageComposer .mx_MessageComposer_avatar {
- position: absolute;
- left: 26px;
-}
-
-.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar {
- display: block;
-}
-
-.mx_MessageComposer_composecontrols {
- width: 100%;
-}
-
-.mx_MessageComposer_e2eIcon.mx_E2EIcon {
- position: absolute;
- left: 60px;
- margin-right: 0;
- margin-left: 3px;
- width: 12px;
- height: 12px;
-}
-
-.mx_MessageComposer_noperm_error {
- width: 100%;
- height: 60px;
- font-style: italic;
- color: #888;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_MessageComposer_input_wrapper {
- cursor: text;
-}
-
-.mx_MessageComposer_input,
-.mx_MessageComposer_input_wrapper {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_MessageComposer_input {
- vertical-align: middle;
- min-height: 60px;
- -webkit-box-pack: start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: flex-start;
- font-size: 1.4rem;
- margin-right: 6px;
-}
-
-.mx_MessageComposer_editor {
- width: 100%;
- max-height: 120px;
- min-height: 19px;
- overflow-y: auto;
- overflow-x: hidden;
- word-break: break-word;
-}
-
-.mx_MessageComposer_editor > :first-child {
- margin-top: 0 !important;
-}
-
-.mx_MessageComposer_editor > :last-child {
- margin-bottom: 0 !important;
-}
-
-@keyframes visualbell {
- 0% {
- background-color: #faa;
- }
- to {
- background-color: #fff;
- }
-}
-
-.mx_MessageComposer_input_error {
- -webkit-animation: visualbell 0.2s;
- animation: visualbell 0.2s;
-}
-
-.mx_MessageComposer_input blockquote {
- color: #777;
- margin: 0 0 16px;
- padding: 0 15px;
- border-left: 4px solid #ddd;
-}
-
-.mx_MessageComposer_input pre {
- background-color: rgba(0, 0, 0, 0.04);
- border-radius: 3px;
- padding: 10px;
-}
-
-.mx_MessageComposer_input textarea {
- display: block;
- width: 100%;
- padding: 0;
- margin-top: 6px;
- margin-bottom: 6px;
- border: 0;
- resize: none;
- outline: none;
- -webkit-box-shadow: none;
- box-shadow: none;
- color: #2e2f32;
- background-color: #fff;
- font-size: 1.4rem;
- max-height: 120px;
- overflow: auto;
- font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
- Helvetica, Sans-Serif, Noto Color Emoji;
-}
-
-.mx_MessageComposer_input textarea::-moz-placeholder {
- line-height: 100%;
- color: #0dbd8b;
- opacity: 1;
-}
-
-.mx_MessageComposer_input textarea::-webkit-input-placeholder {
- color: #0dbd8b;
-}
-
-.mx_MessageComposer_button_highlight {
- background: rgba(13, 189, 139, 0.25);
-}
-
-.mx_MessageComposer_button_highlight:before {
- background-color: #0dbd8b !important;
-}
-
-.mx_MessageComposer_button {
- position: relative;
- margin-right: 6px;
- cursor: pointer;
- height: 26px;
- width: 26px;
- border-radius: 100%;
-}
-
-.mx_MessageComposer_button:before {
- content: "";
- position: absolute;
- top: 3px;
- left: 3px;
- height: 20px;
- width: 20px;
- background-color: #c1c6cd;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_MessageComposer_button:hover {
- background: rgba(13, 189, 139, 0.1);
-}
-
-.mx_MessageComposer_button:hover:before {
- background-color: #0dbd8b;
-}
-
-.mx_MessageComposer_button.mx_MessageComposer_hangup:not(.mx_AccessibleButton_disabled):before {
- background-color: #ff4b55;
-}
-
-.mx_MessageComposer_upload:before {
- -webkit-mask-image: url(../../img/element-icons/room/composer/attach.359c84e.svg);
- mask-image: url(../../img/element-icons/room/composer/attach.359c84e.svg);
-}
-
-.mx_MessageComposer_voiceMessage:before {
- -webkit-mask-image: url(../../img/voip/mic-on-mask.97ec7a0.svg);
- mask-image: url(../../img/voip/mic-on-mask.97ec7a0.svg);
-}
-
-.mx_MessageComposer_emoji:before {
- -webkit-mask-image: url(../../img/element-icons/room/composer/emoji.52d7369.svg);
- mask-image: url(../../img/element-icons/room/composer/emoji.52d7369.svg);
-}
-
-.mx_MessageComposer_stickers:before {
- -webkit-mask-image: url(../../img/element-icons/room/composer/sticker.8dbe5ec.svg);
- mask-image: url(../../img/element-icons/room/composer/sticker.8dbe5ec.svg);
-}
-
-.mx_MessageComposer_sendMessage {
- cursor: pointer;
- position: relative;
- margin-right: 6px;
- width: 32px;
- height: 32px;
- border-radius: 100%;
- background-color: #0dbd8b;
-}
-
-.mx_MessageComposer_sendMessage:before {
- position: absolute;
- height: 16px;
- width: 16px;
- top: 8px;
- left: 9px;
- -webkit-mask-image: url(../../img/element-icons/send-message.a4e9cf8.svg);
- mask-image: url(../../img/element-icons/send-message.a4e9cf8.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-position: center;
- mask-position: center;
- background-color: #fff;
- content: "";
-}
-
-.mx_MessageComposer_formatting {
- cursor: pointer;
- margin: 0 11px;
- width: 24px;
- height: 18px;
-}
-
-.mx_MessageComposer_formatbar_wrapper {
- width: 100%;
- background-color: #fff;
- -webkit-box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08);
- box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08);
-}
-
-.mx_MessageComposer_formatbar {
- margin: auto;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- height: 30px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- padding-left: 62px;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- font-size: 1rem;
- color: #888;
-}
-
-.mx_MessageComposer_formatbar * {
- margin-right: 4px;
-}
-
-.mx_MessageComposer_format_button,
-.mx_MessageComposer_formatbar_cancel,
-.mx_MessageComposer_formatbar_markdown {
- cursor: pointer;
-}
-
-.mx_MessageComposer_formatbar_cancel {
- margin-right: 22px;
-}
-
-.mx_MessageComposer_formatbar_markdown {
- height: 17px;
- width: 30px;
- margin-right: 64px;
-}
-
-.mx_MessageComposer_input_markdownIndicator {
- height: 10px;
- width: 12px;
- padding: 4px 4px 4px 0;
-}
-
-.mx_MessageComposer_formatbar_markdown,
-.mx_MessageComposer_input_markdownIndicator {
- cursor: pointer;
- -webkit-mask-image: url(../../img/markdown.6905ba8.svg);
- mask-image: url(../../img/markdown.6905ba8.svg);
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background-color: #c1c6cd;
-}
-
-.mx_MessageComposer_formatbar_markdown.mx_MessageComposer_markdownDisabled,
-.mx_MessageComposer_input_markdownIndicator.mx_MessageComposer_markdownDisabled {
- opacity: 0.2;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_MessageComposer_input {
- min-height: 50px;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_MessageComposer_noperm_error {
- height: 50px;
-}
-
-.mx_MessageComposerFormatBar {
- display: none;
- width: 130px;
- height: 24px;
- position: absolute;
- cursor: pointer;
- border-radius: 4px;
- background-color: #fff;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- z-index: 1000;
-}
-
-.mx_MessageComposerFormatBar.mx_MessageComposerFormatBar_shown {
- display: block;
-}
-
-.mx_MessageComposerFormatBar > * {
- white-space: nowrap;
- display: inline-block;
- position: relative;
- border: 1px solid #e9edf1;
- margin-left: -1px;
-}
-
-.mx_MessageComposerFormatBar > :hover {
- border-color: #ddd;
- z-index: 1;
-}
-
-.mx_MessageComposerFormatBar > :first-child {
- border-radius: 3px 0 0 3px;
-}
-
-.mx_MessageComposerFormatBar > :last-child {
- border-radius: 0 3px 3px 0;
-}
-
-.mx_MessageComposerFormatBar > :only-child {
- border-radius: 3px;
-}
-
-.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button {
- width: 27px;
- height: 24px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- background: none;
- vertical-align: middle;
-}
-
-.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button:after {
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- background-color: #2e2f32;
-}
-
-.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconBold:after {
- -webkit-mask-image: url(../../img/element-icons/room/format-bar/bold.0d80ac7.svg);
- mask-image: url(../../img/element-icons/room/format-bar/bold.0d80ac7.svg);
-}
-
-.mx_MessageComposerFormatBar
- .mx_MessageComposerFormatBar_buttonIconItalic:after {
- -webkit-mask-image: url(../../img/element-icons/room/format-bar/italic.bf18054.svg);
- mask-image: url(../../img/element-icons/room/format-bar/italic.bf18054.svg);
-}
-
-.mx_MessageComposerFormatBar
- .mx_MessageComposerFormatBar_buttonIconStrikethrough:after {
- -webkit-mask-image: url(../../img/element-icons/room/format-bar/strikethrough.0264f7b.svg);
- mask-image: url(../../img/element-icons/room/format-bar/strikethrough.0264f7b.svg);
-}
-
-.mx_MessageComposerFormatBar
- .mx_MessageComposerFormatBar_buttonIconQuote:after {
- -webkit-mask-image: url(../../img/element-icons/room/format-bar/quote.560cd8f.svg);
- mask-image: url(../../img/element-icons/room/format-bar/quote.560cd8f.svg);
-}
-
-.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconCode:after {
- -webkit-mask-image: url(../../img/element-icons/room/format-bar/code.27444ba.svg);
- mask-image: url(../../img/element-icons/room/format-bar/code.27444ba.svg);
-}
-
-.mx_MessageComposerFormatBar_buttonTooltip {
- white-space: nowrap;
- font-size: 1.3rem;
- font-weight: 600;
- min-width: 54px;
- text-align: center;
-}
-
-.mx_MessageComposerFormatBar_buttonTooltip
- .mx_MessageComposerFormatBar_tooltipShortcut {
- font-size: 0.9rem;
- opacity: 0.7;
-}
-
-.mx_NewRoomIntro {
- margin: 40px 0 48px 64px;
-}
-
-.mx_NewRoomIntro
- .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover)
- .mx_MiniAvatarUploader_indicator {
- display: none;
-}
-
-.mx_NewRoomIntro .mx_AccessibleButton_kind_link {
- padding: 0;
- font-size: inherit;
-}
-
-.mx_NewRoomIntro .mx_NewRoomIntro_buttons {
- margin-top: 28px;
-}
-
-.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton {
- line-height: 2.4rem;
- display: inline-block;
-}
-
-.mx_NewRoomIntro
- .mx_NewRoomIntro_buttons
- .mx_AccessibleButton
- + .mx_AccessibleButton {
- margin-left: 12px;
-}
-
-.mx_NewRoomIntro
- .mx_NewRoomIntro_buttons
- .mx_AccessibleButton:not(.mx_AccessibleButton_kind_primary_outline):before {
- content: "";
- display: inline-block;
- background-color: #fff;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 20px;
- mask-size: 20px;
- width: 20px;
- height: 20px;
- margin-right: 5px;
- vertical-align: text-bottom;
-}
-
-.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_NewRoomIntro_inviteButton:before {
- -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
- mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
-}
-
-.mx_NewRoomIntro > h2 {
- margin-top: 24px;
- font-size: 2.4rem;
- font-weight: 600;
-}
-
-.mx_NewRoomIntro > p {
- margin: 0;
- font-size: 1.5rem;
- color: #737d8c;
-}
-
-.mx_NotificationBadge:not(.mx_NotificationBadge_visible) {
- display: none;
-}
-
-.mx_NotificationBadge.mx_NotificationBadge_visible {
- background-color: #61708b;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_highlighted {
- background-color: #ff4b55;
-}
-
-.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_dot {
- background-color: #2e2f32;
- width: 6px;
- height: 6px;
- border-radius: 6px;
-}
-
-.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_2char {
- width: 1.6rem;
- height: 1.6rem;
- border-radius: 1.6rem;
-}
-
-.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_3char {
- width: 2.6rem;
- height: 1.6rem;
- border-radius: 1.6rem;
-}
-
-.mx_NotificationBadge.mx_NotificationBadge_visible .mx_NotificationBadge_count {
- font-size: 1rem;
- line-height: 1.4rem;
- color: #fff;
-}
-
-.mx_PinnedEventTile {
- min-height: 40px;
- width: 100%;
- padding: 0 4px 12px;
- display: grid;
- grid-template-areas: "avatar name remove" "content content content" "footer footer footer";
- grid-template-rows: -webkit-max-content auto -webkit-max-content;
- grid-template-rows: max-content auto max-content;
- grid-template-columns: 24px auto 24px;
- grid-row-gap: 12px;
- grid-column-gap: 8px;
-}
-
-.mx_PinnedEventTile + .mx_PinnedEventTile {
- padding: 12px 4px;
- border-top: 1px solid #e7e7e7;
-}
-
-.mx_PinnedEventTile .mx_PinnedEventTile_senderAvatar {
- grid-area: avatar;
-}
-
-.mx_PinnedEventTile .mx_PinnedEventTile_sender {
- grid-area: name;
- font-weight: 600;
- font-size: 1.5rem;
- line-height: 2.4rem;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
-}
-
-.mx_PinnedEventTile .mx_PinnedEventTile_unpinButton {
- visibility: hidden;
- grid-area: remove;
- position: relative;
- width: 24px;
- height: 24px;
- border-radius: 8px;
-}
-
-.mx_PinnedEventTile .mx_PinnedEventTile_unpinButton:hover {
- background-color: rgba(92, 100, 112, 0.2);
-}
-
-.mx_PinnedEventTile .mx_PinnedEventTile_unpinButton:before {
- content: "";
- position: absolute;
- height: inherit;
- width: inherit;
- background: #737d8c;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 8px;
- mask-size: 8px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-image: url(../../img/image-view/close.97d1731.svg);
- mask-image: url(../../img/image-view/close.97d1731.svg);
-}
-
-.mx_PinnedEventTile .mx_PinnedEventTile_message {
- grid-area: content;
-}
-
-.mx_PinnedEventTile .mx_PinnedEventTile_footer {
- grid-area: footer;
- font-size: 10px;
- line-height: 12px;
-}
-
-.mx_PinnedEventTile .mx_PinnedEventTile_footer .mx_PinnedEventTile_timestamp {
- font-size: inherit;
- line-height: inherit;
- color: #737d8c;
-}
-
-.mx_PinnedEventTile .mx_PinnedEventTile_footer .mx_AccessibleButton_kind_link {
- padding: 0;
- margin-left: 12px;
- font-size: inherit;
- line-height: inherit;
-}
-
-.mx_PinnedEventTile:hover .mx_PinnedEventTile_unpinButton {
- visibility: visible;
-}
-
-.mx_PresenceLabel {
- font-size: 1.1rem;
- opacity: 0.5;
-}
-
-.mx_ReplyPreview {
- background: #fff;
- border: 1px solid transparent;
- border-bottom: none;
- border-radius: 8px 8px 0 0;
- max-height: 50vh;
- overflow: auto;
- -webkit-box-shadow: 0 -16px 32px rgba(0, 0, 0, 0.04);
- box-shadow: 0 -16px 32px rgba(0, 0, 0, 0.04);
-}
-
-.mx_ReplyPreview .mx_ReplyPreview_section {
- border-bottom: 1px solid transparent;
-}
-
-.mx_ReplyPreview .mx_ReplyPreview_section .mx_ReplyPreview_header {
- margin: 8px;
- color: #2e2f32;
- font-weight: 400;
- opacity: 0.4;
-}
-
-.mx_ReplyPreview .mx_ReplyPreview_section .mx_ReplyPreview_tile {
- margin: 0 8px;
-}
-
-.mx_ReplyPreview .mx_ReplyPreview_section .mx_ReplyPreview_title {
- float: left;
-}
-
-.mx_ReplyPreview .mx_ReplyPreview_section .mx_ReplyPreview_cancel {
- float: right;
- cursor: pointer;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_ReplyPreview .mx_ReplyPreview_section .mx_ReplyPreview_clear {
- clear: both;
-}
-
-.mx_ReplyTile {
- position: relative;
- padding: 2px 0;
- font-size: 1.4rem;
- line-height: 1.6rem;
-}
-
-.mx_ReplyTile.mx_ReplyTile_audio .mx_MFileBody_info_icon:before {
- -webkit-mask-image: url(../../img/element-icons/speaker.7124b41.svg);
- mask-image: url(../../img/element-icons/speaker.7124b41.svg);
-}
-
-.mx_ReplyTile.mx_ReplyTile_video .mx_MFileBody_info_icon:before {
- -webkit-mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
- mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
-}
-
-.mx_ReplyTile .mx_MFileBody .mx_MFileBody_info {
- margin: 5px 0;
-}
-
-.mx_ReplyTile .mx_MFileBody .mx_MFileBody_download {
- display: none;
-}
-
-.mx_ReplyTile > a {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- text-decoration: none;
- color: #2e2f32;
-}
-
-.mx_ReplyTile .mx_RedactedBody {
- padding: 4px 0 2px 20px;
-}
-
-.mx_ReplyTile .mx_RedactedBody:before {
- height: 13px;
- width: 13px;
- top: 5px;
-}
-
-.mx_ReplyTile .mx_EventTile_content {
- pointer-events: none;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- line-height: 2.2rem;
-}
-
-.mx_ReplyTile .mx_EventTile_content .mx_EventTile_body.mx_EventTile_bigEmoji {
- line-height: 2.2rem !important;
- font-size: 1.4rem !important;
-}
-
-.mx_ReplyTile .mx_EventTile_content .mx_EventTile_lineNumbers {
- display: none;
-}
-
-.mx_ReplyTile .mx_EventTile_content .mx_EventTile_pre_container > pre {
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- padding: 4px;
-}
-
-.mx_ReplyTile .mx_EventTile_content .markdown-body blockquote,
-.mx_ReplyTile .mx_EventTile_content .markdown-body dl,
-.mx_ReplyTile .mx_EventTile_content .markdown-body ol,
-.mx_ReplyTile .mx_EventTile_content .markdown-body p,
-.mx_ReplyTile .mx_EventTile_content .markdown-body pre,
-.mx_ReplyTile .mx_EventTile_content .markdown-body table,
-.mx_ReplyTile .mx_EventTile_content .markdown-body ul {
- margin-bottom: 4px;
-}
-
-.mx_ReplyTile.mx_ReplyTile_info {
- padding-top: 0;
-}
-
-.mx_ReplyTile .mx_SenderProfile {
- font-size: 1.4rem;
- line-height: 1.7rem;
- display: inline-block;
- padding: 0;
- margin: 0;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
-}
-
-.mx_RoomBreadcrumbs {
- width: 100%;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: flex-start;
-}
-
-.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_crumb {
- margin-right: 8px;
- width: 32px;
-}
-
-.mx_RoomBreadcrumbs.mx_RoomBreadcrumbs-enter {
- -webkit-transform: translateX(-40px);
- transform: translateX(-40px);
-}
-
-.mx_RoomBreadcrumbs.mx_RoomBreadcrumbs-enter-active {
- -webkit-transform: translateX(0);
- transform: translateX(0);
- -webkit-transition: -webkit-transform 0.64s cubic-bezier(0.66, 0.02, 0.36, 1);
- transition: -webkit-transform 0.64s cubic-bezier(0.66, 0.02, 0.36, 1);
- transition: transform 0.64s cubic-bezier(0.66, 0.02, 0.36, 1);
- transition: transform 0.64s cubic-bezier(0.66, 0.02, 0.36, 1),
- -webkit-transform 0.64s cubic-bezier(0.66, 0.02, 0.36, 1);
-}
-
-.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_placeholder {
- font-weight: 600;
- font-size: 1.4rem;
- line-height: 32px;
- height: 32px;
-}
-
-.mx_RoomBreadcrumbs_Tooltip {
- margin-left: -42px;
- margin-top: -42px;
-}
-
-.mx_RoomHeader {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 50px;
- flex: 0 0 50px;
- border-bottom: 1px solid transparent;
- background-color: #fff;
-}
-
-.mx_RoomHeader .mx_RoomHeader_e2eIcon {
- height: 12px;
- width: 12px;
-}
-
-.mx_RoomHeader .mx_RoomHeader_e2eIcon .mx_E2EIcon {
- margin: 0;
- position: absolute;
- height: 12px;
- width: 12px;
-}
-
-.mx_RoomHeader_wrapper {
- margin: auto;
- height: 50px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- min-width: 0;
- padding: 0 10px 0 18px;
-}
-
-.mx_RoomHeader_wrapper .mx_InviteOnlyIcon_large {
- margin: 0;
-}
-
-.mx_RoomHeader_spinner {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- height: 36px;
- padding-left: 12px;
- padding-right: 12px;
-}
-
-.mx_RoomHeader_textButton {
- vertical-align: middle;
- border: 0;
- border-radius: 8px;
- font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
- Helvetica, Sans-Serif, Noto Color Emoji;
- font-size: 1.4rem;
- color: #fff;
- background-color: #0dbd8b;
- width: auto;
- padding: 7px 1.5em;
- cursor: pointer;
- display: inline-block;
- outline: none;
- margin-right: 8px;
- margin-top: -5px;
-}
-
-.mx_RoomHeader_textButton_danger {
- background-color: #ff4b55;
-}
-
-.mx_RoomHeader_cancelButton {
- cursor: pointer;
- padding-left: 12px;
- padding-right: 12px;
-}
-
-.mx_RoomHeader_buttons {
- background-color: #fff;
-}
-
-.mx_RoomHeader_buttons,
-.mx_RoomHeader_info {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_RoomHeader_info {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_RoomHeader_simpleHeader {
- line-height: 5.2rem;
- color: #45474a;
- font-size: 1.8rem;
- font-weight: 600;
- overflow: hidden;
- margin-left: 63px;
- text-overflow: ellipsis;
- width: 100%;
-}
-
-.mx_RoomHeader_simpleHeader .mx_RoomHeader_cancelButton {
- float: right;
-}
-
-.mx_RoomHeader_simpleHeader .mx_RoomHeader_icon {
- margin-left: 14px;
- margin-right: 24px;
- vertical-align: -4px;
-}
-
-.mx_RoomHeader_name {
- -webkit-box-flex: 0;
- -ms-flex: 0 1 auto;
- flex: 0 1 auto;
- overflow: hidden;
- color: #45474a;
- font-weight: 600;
- font-size: 1.8rem;
- margin: 0 7px;
- border-bottom: 1px solid transparent;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_RoomHeader_nametext {
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
-}
-
-.mx_RoomHeader_settingsHint {
- color: #a2a2a2 !important;
-}
-
-.mx_RoomHeader_searchStatus {
- font-weight: 400;
- opacity: 0.6;
-}
-
-.mx_RoomHeader_avatar,
-.mx_RoomHeader_avatarPicker,
-.mx_RoomHeader_avatarPicker_edit,
-.mx_RoomHeader_avatarPicker_remove,
-.mx_RoomHeader_name {
- cursor: pointer;
-}
-
-.mx_RoomHeader_avatarPicker_remove {
- position: absolute;
- top: -11px;
- right: -9px;
-}
-
-.mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable) {
- color: #0dbd8b;
-}
-
-.mx_RoomHeader_placeholder {
- color: #a2a2a2 !important;
-}
-
-.mx_RoomHeader_editable {
- border-bottom: 1px solid #c7c7c7 !important;
- min-width: 150px;
- cursor: text;
-}
-
-.mx_RoomHeader_editable:focus {
- border-bottom: 1px solid #0dbd8b !important;
- outline: none;
- -webkit-box-shadow: none;
- box-shadow: none;
-}
-
-.mx_RoomHeader_topic {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- color: #9e9e9e;
- font-weight: 400;
- font-size: 1.3rem;
- margin: 4px 7px 0;
- overflow: hidden;
- text-overflow: ellipsis;
- border-bottom: 1px solid transparent;
- line-height: 1.2em;
- max-height: 2.4em;
-}
-
-.mx_RoomHeader_avatar {
- -webkit-box-flex: 0;
- -ms-flex: 0;
- flex: 0;
- margin: 0 6px 0 7px;
- position: relative;
-}
-
-.mx_RoomHeader_avatar .mx_BaseAvatar_image {
- -o-object-fit: cover;
- object-fit: cover;
-}
-
-.mx_RoomHeader_avatarPicker {
- position: relative;
-}
-
-.mx_RoomHeader_avatarPicker_edit {
- position: absolute;
- left: 16px;
- top: 18px;
-}
-
-.mx_RoomHeader_avatarPicker_edit > label {
- cursor: pointer;
-}
-
-.mx_RoomHeader_avatarPicker_edit > input {
- display: none;
-}
-
-.mx_RoomHeader_button {
- position: relative;
- margin-left: 1px;
- margin-right: 1px;
- cursor: pointer;
- height: 32px;
- width: 32px;
- border-radius: 100%;
-}
-
-.mx_RoomHeader_button:before {
- content: "";
- position: absolute;
- top: 4px;
- left: 4px;
- height: 24px;
- width: 24px;
- background-color: #c1c6cd;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
-}
-
-.mx_RoomHeader_button:hover {
- background: rgba(13, 189, 139, 0.1);
-}
-
-.mx_RoomHeader_button:hover:before {
- background-color: #0dbd8b;
-}
-
-.mx_RoomHeader_forgetButton:before {
- -webkit-mask-image: url(../../img/element-icons/leave.bb917e7.svg);
- mask-image: url(../../img/element-icons/leave.bb917e7.svg);
- width: 26px;
-}
-
-.mx_RoomHeader_appsButton:before {
- -webkit-mask-image: url(../../img/element-icons/room/apps.5ee9f78.svg);
- mask-image: url(../../img/element-icons/room/apps.5ee9f78.svg);
-}
-
-.mx_RoomHeader_appsButton_highlight:before {
- background-color: #0dbd8b;
-}
-
-.mx_RoomHeader_searchButton:before {
- -webkit-mask-image: url(../../img/element-icons/room/search-inset.db6314d.svg);
- mask-image: url(../../img/element-icons/room/search-inset.db6314d.svg);
-}
-
-.mx_RoomHeader_voiceCallButton:before {
- -webkit-mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
- mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
- -webkit-mask-size: 20px;
- mask-size: 20px;
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_RoomHeader_videoCallButton:before {
- -webkit-mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
- mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
-}
-
-.mx_RoomHeader_showPanel {
- height: 16px;
-}
-
-.mx_RoomHeader_voipButton {
- display: table-cell;
-}
-
-.mx_RoomHeader_voipButtons {
- margin-top: 18px;
-}
-
-@media only screen and (max-width: 480px) {
- .mx_RoomHeader_wrapper {
- padding: 0;
- }
- .mx_RoomHeader {
+ white-space: nowrap;
overflow: hidden;
}
-}
-
-.mx_RoomList {
- padding-right: 7px;
-}
-
-.mx_RoomList_iconPlus:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);
- mask-image: url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);
-}
-
-.mx_RoomList_iconHash:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);
- mask-image: url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);
-}
-
-.mx_RoomList_iconExplore:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
- mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
-}
-
-.mx_RoomList_iconBrowse:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
- mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
-}
-
-.mx_RoomList_iconDialpad:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/dialpad.37f876f.svg);
- mask-image: url(../../img/element-icons/roomlist/dialpad.37f876f.svg);
-}
-
-.mx_RoomList_explorePrompt {
- margin: 4px 12px;
- padding-top: 12px;
- border-top: 1px solid #e7e7e7;
- font-size: 1.4rem;
-}
-
-.mx_RoomList_explorePrompt div:first-child {
- font-weight: 600;
- line-height: 1.8rem;
- color: #2e2f32;
-}
-
-.mx_RoomList_explorePrompt .mx_AccessibleButton {
- color: #2e2f32;
- position: relative;
- padding: 8px 8px 8px 32px;
- font-size: inherit;
- margin-top: 12px;
- display: block;
- text-align: start;
- background-color: rgba(141, 151, 165, 0.2);
- border-radius: 4px;
-}
-
-.mx_RoomList_explorePrompt .mx_AccessibleButton:before {
- content: "";
- width: 16px;
- height: 16px;
- position: absolute;
- top: 8px;
- left: 8px;
- background: #737d8c;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
-}
-
-.mx_RoomList_explorePrompt
- .mx_AccessibleButton.mx_RoomList_explorePrompt_startChat:before {
- -webkit-mask-image: url(../../img/element-icons/feedback.a91241e.svg);
- mask-image: url(../../img/element-icons/feedback.a91241e.svg);
-}
-
-.mx_RoomList_explorePrompt
- .mx_AccessibleButton.mx_RoomList_explorePrompt_explore:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
- mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
-}
-
-.mx_RoomList_explorePrompt
- .mx_AccessibleButton.mx_RoomList_explorePrompt_spaceInvite:before {
- -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
- mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
-}
-
-.mx_RoomList_explorePrompt
- .mx_AccessibleButton.mx_RoomList_explorePrompt_spaceExplore:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
- mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
-}
-
-.mx_RoomPreviewBar {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
-}
-
-.mx_RoomPreviewBar h3 {
- font-size: 1.8rem;
- font-weight: 600;
-}
-
-.mx_RoomPreviewBar h3.mx_RoomPreviewBar_spinnerTitle {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_RoomPreviewBar .mx_RoomPreviewBar_message p,
-.mx_RoomPreviewBar h3 {
- word-break: break-all;
- word-break: break-word;
-}
-
-.mx_RoomPreviewBar .mx_Spinner {
- width: auto;
- height: auto;
- margin: 10px 10px 10px 0;
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
-}
-
-.mx_RoomPreviewBar .mx_RoomPreviewBar_footer {
- font-size: 1.2rem;
- line-height: 2rem;
-}
-
-.mx_RoomPreviewBar .mx_RoomPreviewBar_footer .mx_Spinner {
- vertical-align: middle;
- display: inline-block;
-}
-
-.mx_RoomPreviewBar_actions,
-.mx_RoomPreviewBar_message {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_RoomPreviewBar_message {
- -webkit-box-align: stretch;
- -ms-flex-align: stretch;
- align-items: stretch;
-}
-
-.mx_RoomPreviewBar_message p {
- overflow-wrap: break-word;
-}
-
-.mx_RoomPreviewBar_panel {
- padding: 8px 8px 8px 20px;
- border-top: 1px solid transparent;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
-}
-
-.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- padding: 3px 8px;
-}
-
-.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions > * {
- margin-left: 12px;
-}
-
-.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message {
- -webkit-box-flex: 1;
- -ms-flex: 1 0 0px;
- flex: 1 0 0;
- min-width: 0;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message > * {
- margin: 4px;
-}
-
-.mx_RoomPreviewBar_dialog {
- margin: auto;
- -webkit-box-sizing: content;
- box-sizing: content;
- width: 400px;
- border-radius: 4px;
- padding: 20px;
- text-align: center;
-}
-
-.mx_RoomPreviewBar_dialog,
-.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message {
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message > * {
- margin: 5px 0 20px;
-}
-
-.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions {
- -webkit-box-orient: vertical;
- -webkit-box-direction: reverse;
- -ms-flex-direction: column-reverse;
- flex-direction: column-reverse;
-}
-
-.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions .mx_AccessibleButton {
- padding: 7px 50px;
-}
-
-.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions > * {
- margin-top: 12px;
-}
-
-.mx_RoomPreviewBar_dialog
- .mx_RoomPreviewBar_actions
- .mx_AccessibleButton.mx_AccessibleButton_kind_primary {
- margin-bottom: 7px;
-}
-
-.mx_RoomPreviewBar_inviter {
- font-weight: 600;
-}
-
-a.mx_RoomPreviewBar_inviter {
- text-decoration: underline;
- cursor: pointer;
-}
-
-.mx_RoomSublist {
- margin-left: 8px;
- margin-bottom: 4px;
-}
-
-.mx_RoomSublist.mx_RoomSublist_hidden {
- display: none;
-}
-
-.mx_RoomSublist .mx_RoomSublist_headerContainer {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding-bottom: 8px;
- max-height: 24px;
- color: #8d99a5;
-}
-
-.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- max-width: 100%;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_RoomSublist
- .mx_RoomSublist_headerContainer
- .mx_RoomSublist_stickable.mx_RoomSublist_headerContainer_sticky {
- position: fixed;
- height: 32px;
- width: calc(100% - 15px);
-}
-
-.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_RoomSublist
- .mx_RoomSublist_headerContainer
- .mx_RoomSublist_badgeContainer
- .mx_NotificationBadge {
- margin-left: 8px;
-}
-
-.mx_RoomSublist
- .mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux)
- .mx_NotificationBadge {
- margin-right: 4px;
-}
-
-.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton,
-.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton {
- margin-left: 8px;
- position: relative;
- width: 24px;
- height: 24px;
- border-radius: 8px;
-}
-
-.mx_RoomSublist
- .mx_RoomSublist_headerContainer
- .mx_RoomSublist_auxButton:before,
-.mx_RoomSublist
- .mx_RoomSublist_headerContainer
- .mx_RoomSublist_menuButton:before {
- content: "";
- width: 16px;
- height: 16px;
- position: absolute;
- top: 4px;
- left: 4px;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background: #61708b;
-}
-
-.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:hover,
-.mx_RoomSublist
- .mx_RoomSublist_headerContainer
- .mx_RoomSublist_menuButton:hover {
- background: rgba(141, 151, 165, 0.2);
-}
-
-.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton {
- visibility: hidden;
- width: 0;
- margin: 0;
-}
-
-.mx_RoomSublist
- .mx_RoomSublist_headerContainer
- .mx_RoomSublist_auxButton:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/plus.daac9ba.svg);
- mask-image: url(../../img/element-icons/roomlist/plus.daac9ba.svg);
-}
-
-.mx_RoomSublist
- .mx_RoomSublist_headerContainer
- .mx_RoomSublist_menuButton:before {
- -webkit-mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
- mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
-}
-
-.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- max-width: calc(100% - 16px);
- line-height: 1.6rem;
- font-size: 1.3rem;
- font-weight: 600;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
-}
-
-.mx_RoomSublist
- .mx_RoomSublist_headerContainer
- .mx_RoomSublist_headerText
- .mx_RoomSublist_collapseBtn {
- display: inline-block;
- position: relative;
- width: 14px;
- height: 14px;
- margin-right: 6px;
-}
-
-.mx_RoomSublist
- .mx_RoomSublist_headerContainer
- .mx_RoomSublist_headerText
- .mx_RoomSublist_collapseBtn:before {
- content: "";
- width: 18px;
- height: 18px;
- position: absolute;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background-color: #8d99a5;
- -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
- mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
-}
-
-.mx_RoomSublist
- .mx_RoomSublist_headerContainer
- .mx_RoomSublist_headerText
- .mx_RoomSublist_collapseBtn.mx_RoomSublist_collapseBtn_collapsed:before {
- -webkit-transform: rotate(-90deg);
- transform: rotate(-90deg);
-}
-
-.mx_RoomSublist:first-child .mx_RoomSublist_headerContainer {
- height: 0;
- padding-bottom: 4px;
-}
-
-.mx_RoomSublist .mx_RoomSublist_resizeBox {
- position: relative;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_RoomSublist .mx_RoomSublist_resizeBox,
-.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_tiles {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- overflow: hidden;
-}
-
-.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_tiles {
- -webkit-box-flex: 1;
- -ms-flex: 1 0 0px;
- flex: 1 0 0;
- -ms-flex-direction: column;
- flex-direction: column;
- -ms-flex-item-align: stretch;
- align-self: stretch;
- -webkit-mask-image: linear-gradient(0deg, transparent, #000 4px);
- mask-image: linear-gradient(0deg, transparent, #000 4px);
-}
-
-.mx_RoomSublist
- .mx_RoomSublist_resizeBox
- .mx_RoomSublist_resizerHandles_showNButton {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 32px;
- flex: 0 0 32px;
-}
-
-.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandles {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 4px;
- flex: 0 0 4px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- width: 100%;
-}
-
-.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandle {
- cursor: ns-resize;
- border-radius: 3px;
- max-width: 64px;
- height: 4px !important;
- position: relative !important;
- bottom: 0 !important;
-}
-
-.mx_RoomSublist
- .mx_RoomSublist_resizeBox.mx_RoomSublist_hasMenuOpen
- .mx_RoomSublist_resizerHandle,
-.mx_RoomSublist .mx_RoomSublist_resizeBox:hover .mx_RoomSublist_resizerHandle {
- opacity: 0.8;
- background-color: #2e2f32;
-}
-
-.mx_RoomSublist .mx_RoomSublist_showNButton {
- cursor: pointer;
- font-size: 1.3rem;
- line-height: 1.8rem;
- color: #737d8c;
- height: 24px;
- padding-bottom: 4px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showNButtonChevron {
- position: relative;
- width: 18px;
- height: 18px;
- margin-left: 12px;
- margin-right: 16px;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background: #8d99a5;
- left: -1px;
-}
-
-.mx_RoomSublist
- .mx_RoomSublist_showNButton
- .mx_RoomSublist_showLessButtonChevron,
-.mx_RoomSublist
- .mx_RoomSublist_showNButton
- .mx_RoomSublist_showMoreButtonChevron {
- -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
- mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
-}
-
-.mx_RoomSublist
- .mx_RoomSublist_showNButton
- .mx_RoomSublist_showLessButtonChevron {
- -webkit-transform: rotate(180deg);
- transform: rotate(180deg);
-}
-
-.mx_RoomSublist.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton,
-.mx_RoomSublist:not(.mx_RoomSublist_minimized)
- > .mx_RoomSublist_headerContainer:focus-within
- .mx_RoomSublist_menuButton,
-.mx_RoomSublist:not(.mx_RoomSublist_minimized)
- > .mx_RoomSublist_headerContainer:hover
- .mx_RoomSublist_menuButton {
- visibility: visible;
- width: 24px;
- margin-left: 8px;
-}
-
-.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer {
- height: auto;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- position: relative;
-}
-
-.mx_RoomSublist.mx_RoomSublist_minimized
- .mx_RoomSublist_headerContainer
- .mx_RoomSublist_badgeContainer {
- -webkit-box-ordinal-group: 1;
- -ms-flex-order: 0;
- order: 0;
- -ms-flex-item-align: end;
- align-self: flex-end;
- margin-right: 0;
-}
-
-.mx_RoomSublist.mx_RoomSublist_minimized
- .mx_RoomSublist_headerContainer
- .mx_RoomSublist_stickable {
- -webkit-box-ordinal-group: 2;
- -ms-flex-order: 1;
- order: 1;
- max-width: 100%;
-}
-
-.mx_RoomSublist.mx_RoomSublist_minimized
- .mx_RoomSublist_headerContainer
- .mx_RoomSublist_auxButton {
- -webkit-box-ordinal-group: 3;
- -ms-flex-order: 2;
- order: 2;
- visibility: visible;
- width: 32px !important;
- height: 32px !important;
- margin-left: 0 !important;
- background-color: rgba(141, 151, 165, 0.2);
- margin-top: 8px;
-}
-
-.mx_RoomSublist.mx_RoomSublist_minimized
- .mx_RoomSublist_headerContainer
- .mx_RoomSublist_auxButton:before {
- top: 8px;
- left: 8px;
-}
-
-.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_resizeBox {
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_showNButton {
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_RoomSublist.mx_RoomSublist_minimized
- .mx_RoomSublist_showNButton
- .mx_RoomSublist_showNButtonChevron {
- margin-right: 12px;
-}
-
-.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_menuButton {
- height: 16px;
-}
-
-.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen
- .mx_RoomSublist_menuButton,
-.mx_RoomSublist.mx_RoomSublist_minimized
- > .mx_RoomSublist_headerContainer:hover
- .mx_RoomSublist_menuButton {
- visibility: visible;
- position: absolute;
- bottom: 48px;
- right: 0;
- width: 16px;
- height: 16px;
- border-radius: 0;
- z-index: 1;
- background-color: hsla(0, 0%, 96.1%, 0.9);
-}
-
-.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen
- .mx_RoomSublist_menuButton:before,
-.mx_RoomSublist.mx_RoomSublist_minimized
- > .mx_RoomSublist_headerContainer:hover
- .mx_RoomSublist_menuButton:before {
- top: 0;
- left: 0;
-}
-
-.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux)
- .mx_RoomSublist_menuButton,
-.mx_RoomSublist.mx_RoomSublist_minimized
- > .mx_RoomSublist_headerContainer:hover.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux)
- .mx_RoomSublist_menuButton {
- bottom: 8px;
-}
-
-.mx_RoomSublist_contextMenu {
- padding: 20px 16px;
- width: 250px;
-}
-
-.mx_RoomSublist_contextMenu hr {
- margin-top: 16px;
- margin-bottom: 16px;
- margin-right: 16px;
- border: 1px solid #2e2f32;
- opacity: 0.1;
-}
-
-.mx_RoomSublist_contextMenu .mx_RoomSublist_contextMenu_title {
- font-size: 1.5rem;
- line-height: 2rem;
- font-weight: 600;
- margin-bottom: 4px;
-}
-
-.mx_RoomSublist_contextMenu .mx_Checkbox,
-.mx_RoomSublist_contextMenu .mx_RadioButton {
- margin-top: 8px;
-}
-
-.mx_RoomSublist_addRoomTooltip {
- margin-top: -3px;
-}
-
-.mx_RoomSublist_skeletonUI {
- position: relative;
- margin-left: 4px;
- height: 288px;
-}
-
-.mx_RoomSublist_skeletonUI:before {
- background: -webkit-gradient(
- linear,
- left top,
- left bottom,
- from(#fff),
- to(hsla(0, 0%, 100%, 0))
- );
- background: linear-gradient(180deg, #fff, hsla(0, 0%, 100%, 0));
- width: 100%;
- height: 100%;
- content: "";
- position: absolute;
- -webkit-mask-repeat: repeat-y;
- mask-repeat: repeat-y;
- -webkit-mask-size: auto 48px;
- mask-size: auto 48px;
- -webkit-mask-image: url(../../img/element-icons/roomlist/skeleton-ui.1f67400.svg);
- mask-image: url(../../img/element-icons/roomlist/skeleton-ui.1f67400.svg);
-}
-
-.mx_RoomTile {
- margin-bottom: 4px;
- padding: 4px;
- contain: content;
- height: 40px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_RoomTile.mx_RoomTile_hasMenuOpen,
-.mx_RoomTile.mx_RoomTile_selected,
-.mx_RoomTile:focus-within,
-.mx_RoomTile:hover {
- background-color: #fff;
- border-radius: 8px;
-}
-
-.mx_RoomTile .mx_DecoratedRoomAvatar,
-.mx_RoomTile .mx_RoomTile_avatarContainer {
- margin-right: 8px;
-}
-
-.mx_RoomTile .mx_RoomTile_nameContainer {
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- min-width: 0;
- margin-right: 8px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_messagePreview,
-.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name {
- margin: 0 2px;
- width: 100%;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
-}
-
-.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name {
- font-size: 1.4rem;
- line-height: 1.8rem;
-}
-
-.mx_RoomTile
- .mx_RoomTile_nameContainer
- .mx_RoomTile_name.mx_RoomTile_nameHasUnreadEvents {
- font-weight: 600;
-}
-
-.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_messagePreview {
- font-size: 1.3rem;
- line-height: 1.8rem;
- color: #737d8c;
-}
-
-.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_nameWithPreview {
- margin-top: -4px;
-}
-
-.mx_RoomTile .mx_RoomTile_notificationsButton {
- margin-left: 4px;
-}
-
-.mx_RoomTile .mx_RoomTile_badgeContainer {
- height: 16px;
- margin: auto 0;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge {
- margin-right: 2px;
-}
-
-.mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge_dot {
- margin-left: 5px;
- margin-right: 7px;
-}
-
-.mx_RoomTile .mx_RoomTile_menuButton,
-.mx_RoomTile .mx_RoomTile_notificationsButton {
- width: 20px;
- min-width: 20px;
- height: 20px;
- margin-top: auto;
- margin-bottom: auto;
- position: relative;
- display: none;
-}
-
-.mx_RoomTile .mx_RoomTile_menuButton:before,
-.mx_RoomTile .mx_RoomTile_notificationsButton:before {
- top: 2px;
- left: 2px;
- content: "";
- width: 16px;
- height: 16px;
- position: absolute;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background: #2e2f32;
-}
-
-.mx_RoomTile
- .mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
- display: block;
-}
-
-.mx_RoomTile .mx_RoomTile_menuButton:before {
- -webkit-mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
- mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
-}
-
-.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen
- .mx_RoomTile_badgeContainer,
-.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within
- .mx_RoomTile_badgeContainer,
-.mx_RoomTile:not(.mx_RoomTile_minimized):hover .mx_RoomTile_badgeContainer {
- width: 0;
- height: 0;
- display: none;
-}
-
-.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen
- .mx_RoomTile_menuButton,
-.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen
- .mx_RoomTile_notificationsButton,
-.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within .mx_RoomTile_menuButton,
-.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within
- .mx_RoomTile_notificationsButton,
-.mx_RoomTile:not(.mx_RoomTile_minimized):hover .mx_RoomTile_menuButton,
-.mx_RoomTile:not(.mx_RoomTile_minimized):hover
- .mx_RoomTile_notificationsButton {
- display: block;
-}
-
-.mx_RoomTile.mx_RoomTile_minimized {
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- position: relative;
-}
-
-.mx_RoomTile.mx_RoomTile_minimized .mx_DecoratedRoomAvatar,
-.mx_RoomTile.mx_RoomTile_minimized .mx_RoomTile_avatarContainer {
- margin-right: 0;
-}
-
-.mx_RoomTile_iconBell:before {
- -webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
- mask-image: url(../../img/element-icons/notifications.d298b39.svg);
-}
-
-.mx_RoomTile_iconBellDot:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-default.8b8509e.svg);
- mask-image: url(../../img/element-icons/roomlist/notifications-default.8b8509e.svg);
-}
-
-.mx_RoomTile_iconBellCrossed:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);
- mask-image: url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);
-}
-
-.mx_RoomTile_iconBellMentions:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-dm.ffa8881.svg);
- mask-image: url(../../img/element-icons/roomlist/notifications-dm.ffa8881.svg);
-}
-
-.mx_RoomTile_contextMenu .mx_RoomTile_iconStar:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/favorite.ff7609d.svg);
- mask-image: url(../../img/element-icons/roomlist/favorite.ff7609d.svg);
-}
-
-.mx_RoomTile_contextMenu .mx_RoomTile_iconArrowDown:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/low-priority.6c7fb97.svg);
- mask-image: url(../../img/element-icons/roomlist/low-priority.6c7fb97.svg);
-}
-
-.mx_RoomTile_contextMenu .mx_RoomTile_iconSettings:before {
- -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
- mask-image: url(../../img/element-icons/settings.6b381af.svg);
-}
-
-.mx_RoomTile_contextMenu .mx_RoomTile_iconCopyLink:before {
- -webkit-mask-image: url(../../img/element-icons/link.8f4b1fc.svg);
- mask-image: url(../../img/element-icons/link.8f4b1fc.svg);
-}
-
-.mx_RoomTile_contextMenu .mx_RoomTile_iconInvite:before {
- -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
- mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
-}
-
-.mx_RoomTile_contextMenu .mx_RoomTile_iconSignOut:before {
- -webkit-mask-image: url(../../img/element-icons/leave.bb917e7.svg);
- mask-image: url(../../img/element-icons/leave.bb917e7.svg);
-}
-
-.mx_RoomUpgradeWarningBar {
- max-height: 235px;
- background-color: #f7f7f7;
- padding-left: 20px;
- padding-right: 20px;
- overflow: scroll;
-}
-
-.mx_RoomUpgradeWarningBar_wrapped {
- width: 100%;
- height: 100%;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- text-align: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-align-items: center;
-}
-
-.mx_RoomUpgradeWarningBar_header {
- color: #ff4b55;
- font-weight: 700;
-}
-
-.mx_RoomUpgradeWarningBar_body {
- color: #ff4b55;
-}
-
-.mx_RoomUpgradeWarningBar_upgradelink {
- color: #ff4b55;
- text-decoration: underline;
-}
-
-.mx_RoomUpgradeWarningBar_small {
- color: #888;
- font-size: 70%;
-}
-
-.mx_SearchBar {
- height: 56px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- border-bottom: 1px solid transparent;
-}
-
-.mx_SearchBar .mx_SearchBar_input {
- -webkit-box-flex: 1;
- -ms-flex: 1 1 0px;
- flex: 1 1 0;
- margin-left: 22px;
-}
-
-.mx_SearchBar .mx_SearchBar_searchButton {
- cursor: pointer;
- width: 37px;
- height: 37px;
- background-color: #0dbd8b;
- -webkit-mask: url(../../img/feather-customised/search-input.044bfa7.svg);
- mask: url(../../img/feather-customised/search-input.044bfa7.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_SearchBar .mx_SearchBar_buttons {
- display: inherit;
-}
-
-.mx_SearchBar .mx_SearchBar_button {
- border: 0;
- margin: 0 0 0 22px;
- padding: 5px;
- font-size: 1.5rem;
- cursor: pointer;
- color: #2e2f32;
- border-bottom: 2px solid #0dbd8b;
- font-weight: 600;
-}
-
-.mx_SearchBar .mx_SearchBar_unselected {
- color: #9fa9ba;
- border-color: transparent;
-}
-
-.mx_SearchBar .mx_SearchBar_cancel {
- background-color: #ff4b55;
- -webkit-mask: url(../../img/cancel.4b9715b.svg);
- mask: url(../../img/cancel.4b9715b.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 14px;
- mask-size: 14px;
- padding: 9px;
- margin: 0 12px 0 3px;
- cursor: pointer;
-}
-
-.mx_SendMessageComposer {
- -ms-flex: 1;
- flex: 1;
- -ms-flex-direction: column;
- flex-direction: column;
- font-size: 1.4rem;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- margin-right: 6px;
- min-width: 0;
-}
-
-.mx_SendMessageComposer,
-.mx_SendMessageComposer .mx_BasicMessageComposer {
- -webkit-box-flex: 1;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
-}
-
-.mx_SendMessageComposer .mx_BasicMessageComposer {
- -ms-flex: 1;
- flex: 1;
- -ms-flex-direction: column;
- flex-direction: column;
- min-height: 55px;
-}
-
-.mx_SendMessageComposer
- .mx_BasicMessageComposer
- .mx_BasicMessageComposer_input {
- padding: 3px 0;
- margin: auto 0;
- max-height: 140px;
- overflow-y: auto;
-}
-
-.mx_Stickers_content {
- overflow: hidden;
-}
-
-.mx_Stickers_content_container {
- overflow: hidden;
- height: 300px;
-}
-
-#mx_persistedElement_stickerPicker .mx_AppTileFullWidth {
- height: unset;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- border-left: none;
- border-right: none;
- border-bottom: none;
-}
-
-#mx_persistedElement_stickerPicker .mx_AppTileMenuBar {
- padding: 0;
-}
-
-#mx_persistedElement_stickerPicker iframe {
- height: 283px;
-}
-
-.mx_Stickers_contentPlaceholder {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- text-align: center;
-}
-
-.mx_Stickers_contentPlaceholder p {
- max-width: 200px;
-}
-
-.mx_Stickers_addLink {
- display: inline;
- cursor: pointer;
- color: #0dbd8b;
-}
-
-.mx_Stickers_hideStickers {
- z-index: 2001;
-}
-
-.mx_TopUnreadMessagesBar {
- z-index: 1000;
- position: absolute;
- top: 24px;
- right: 24px;
- width: 38px;
-}
-
-.mx_TopUnreadMessagesBar:after {
- content: "";
- position: absolute;
- top: -8px;
- left: 10.5px;
- width: 4px;
- height: 4px;
- border-radius: 16px;
- background-color: #f2f5f8;
- border: 6px solid #0dbd8b;
- pointer-events: none;
-}
-
-.mx_TopUnreadMessagesBar_scrollUp {
- height: 38px;
- border-radius: 19px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- background: #fff;
- border: 1.3px solid #61708b;
- cursor: pointer;
-}
-
-.mx_TopUnreadMessagesBar_scrollUp:before {
- content: "";
- position: absolute;
- width: 36px;
- height: 36px;
- -webkit-mask-image: url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);
- mask-image: url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- background: #61708b;
- -webkit-transform: rotate(180deg);
- transform: rotate(180deg);
-}
-
-.mx_TopUnreadMessagesBar_markAsRead {
- display: block;
- width: 18px;
- height: 18px;
- background: #fff;
- border: 1.3px solid #61708b;
- border-radius: 10px;
- margin: 5px auto;
-}
-
-.mx_TopUnreadMessagesBar_markAsRead:before {
- content: "";
- position: absolute;
- width: 18px;
- height: 18px;
- -webkit-mask-image: url(../../img/cancel.4b9715b.svg);
- mask-image: url(../../img/cancel.4b9715b.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 10px;
- mask-size: 10px;
- -webkit-mask-position: 4px 4px;
- mask-position: 4px 4px;
- background: #61708b;
-}
-
-.mx_VoiceRecordComposerTile_stop {
- width: 28px;
- height: 28px;
- border: 2px solid #e3e8f0;
- border-radius: 32px;
- margin-right: 16px;
- position: relative;
-}
-
-.mx_VoiceRecordComposerTile_stop:after {
- content: "";
- width: 14px;
- height: 14px;
- position: absolute;
- top: 7px;
- left: 7px;
- border-radius: 2px;
- background-color: #ff4b55;
-}
-
-.mx_VoiceRecordComposerTile_delete {
- width: 24px;
- height: 24px;
- vertical-align: middle;
- margin-right: 8px;
- background-color: #8d99a5;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-image: url(../../img/element-icons/trashcan.3b626db.svg);
- mask-image: url(../../img/element-icons/trashcan.3b626db.svg);
-}
-
-.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer {
- margin: 6px 12px 6px 6px;
- position: relative;
-}
-
-.mx_MessageComposer_row
- .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording {
- padding-left: 22px;
-}
-
-.mx_MessageComposer_row
- .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording:before {
- -webkit-animation: recording-pulse 2s infinite;
- animation: recording-pulse 2s infinite;
- content: "";
- background-color: #ff4b55;
- width: 10px;
- height: 10px;
- position: absolute;
- left: 12px;
- top: 18px;
- border-radius: 10px;
-}
-
-@-webkit-keyframes recording-pulse {
- 0% {
- opacity: 1;
- }
- 35% {
- opacity: 0;
- }
- 65% {
- opacity: 1;
- }
-}
-
-@keyframes recording-pulse {
- 0% {
- opacity: 1;
- }
- 35% {
- opacity: 0;
- }
- 65% {
- opacity: 1;
- }
-}
-
-.mx_WhoIsTypingTile {
- margin-left: -18px;
- padding-top: 18px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_WhoIsTypingTile_avatars {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 83px;
- flex: 0 0 83px;
- text-align: center;
-}
-
-.mx_WhoIsTypingTile_avatars > :not(:first-child) {
- margin-left: -12px;
-}
-
-.mx_WhoIsTypingTile_avatars .mx_BaseAvatar_initial {
- padding-top: 1px;
-}
-
-.mx_WhoIsTypingTile_avatars .mx_BaseAvatar {
- border: 1px solid #fff;
- border-radius: 40px;
-}
-
-.mx_WhoIsTypingTile_remainingAvatarPlaceholder {
- position: relative;
- display: inline-block;
- color: #acacac;
- background-color: #ddd;
- border: 1px solid #fff;
- border-radius: 40px;
- width: 24px;
- height: 24px;
- line-height: 2.4rem;
- font-size: 0.8em;
- vertical-align: top;
- text-align: center;
-}
-
-.mx_WhoIsTypingTile_label {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- font-size: 1.4rem;
- font-weight: 600;
- color: #9e9e9e;
-}
-
-.mx_WhoIsTypingTile_label > span {
- background-image: url(../../img/typing-indicator-2x.0eb9f0e.gif);
- background-size: 25px;
- background-position: 0 100%;
- background-repeat: no-repeat;
- padding-bottom: 15px;
- display: block;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_WhoIsTypingTile {
- padding-top: 4px;
-}
-
-.mx_AvatarSetting_avatar {
- width: 90px;
- min-width: 90px;
- height: 90px;
- margin-top: 8px;
- position: relative;
-}
-
-.mx_AvatarSetting_avatar .mx_AvatarSetting_hover {
- -webkit-transition: opacity 0.08s cubic-bezier(0.46, 0.03, 0.52, 0.96);
- transition: opacity 0.08s cubic-bezier(0.46, 0.03, 0.52, 0.96);
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- pointer-events: none;
- line-height: 90px;
- text-align: center;
-}
-
-.mx_AvatarSetting_avatar .mx_AvatarSetting_hover > span {
- color: #fff;
- position: relative;
- font-weight: 500;
-}
-
-.mx_AvatarSetting_avatar .mx_AvatarSetting_hover .mx_AvatarSetting_hoverBg {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- opacity: 0.5;
- background-color: #2e2f32;
- border-radius: 90px;
-}
-
-.mx_AvatarSetting_avatar.mx_AvatarSetting_avatar_hovering
- .mx_AvatarSetting_hover {
- opacity: 1;
-}
-
-.mx_AvatarSetting_avatar:not(.mx_AvatarSetting_avatar_hovering)
- .mx_AvatarSetting_hover {
- opacity: 0;
-}
-
-.mx_AvatarSetting_avatar > * {
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.mx_AvatarSetting_avatar .mx_AccessibleButton.mx_AccessibleButton_kind_primary {
- margin-top: 8px;
-}
-
-.mx_AvatarSetting_avatar .mx_AccessibleButton.mx_AccessibleButton_kind_link_sm {
- width: 100%;
-}
-
-.mx_AvatarSetting_avatar > img {
- cursor: pointer;
- -o-object-fit: cover;
- object-fit: cover;
-}
-
-.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder,
-.mx_AvatarSetting_avatar > img {
- display: block;
- height: 90px;
- width: inherit;
- border-radius: 90px;
- cursor: pointer;
-}
-
-.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder:before {
- background-color: #2e2f32;
- -webkit-mask: url(../../img/feather-customised/user.7a4d23d.svg);
- mask: url(../../img/feather-customised/user.7a4d23d.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 36px;
- mask-size: 36px;
- -webkit-mask-position: center;
- mask-position: center;
- content: "";
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
-}
-
-.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton {
- width: 32px;
- height: 32px;
- border-radius: 32px;
- background-color: #e7e7e7;
- position: absolute;
- bottom: 0;
- right: 0;
-}
-
-.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton:before {
- content: "";
- display: block;
- width: 100%;
- height: 100%;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 55%;
- mask-size: 55%;
- background-color: #2e2f32;
- -webkit-mask-image: url(../../img/feather-customised/edit.fd55ec2.svg);
- mask-image: url(../../img/feather-customised/edit.fd55ec2.svg);
-}
-
-.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder {
- background-color: #f4f6fa;
-}
-
-.mx_CrossSigningPanel_statusList {
- border-spacing: 0;
-}
-
-.mx_CrossSigningPanel_statusList td {
- padding: 0;
-}
-
-.mx_CrossSigningPanel_statusList td:first-of-type {
- -webkit-padding-end: 1em;
- padding-inline-end: 1em;
-}
-
-.mx_CrossSigningPanel_buttonRow {
- margin: 1em 0;
-}
-
-.mx_CrossSigningPanel_buttonRow :nth-child(n + 1) {
- -webkit-margin-end: 10px;
- margin-inline-end: 10px;
-}
-
-.mx_DevicesPanel {
- display: table;
- table-layout: fixed;
- width: 880px;
- border-spacing: 10px;
-}
-
-.mx_DevicesPanel_header {
- display: table-header-group;
- font-weight: 700;
-}
-
-.mx_DevicesPanel_header > .mx_DevicesPanel_deviceButtons {
- height: 48px;
-}
-
-.mx_DevicesPanel_header > div {
- display: table-cell;
- vertical-align: middle;
-}
-
-.mx_DevicesPanel_header .mx_DevicesPanel_deviceName {
- width: 50%;
-}
-
-.mx_DevicesPanel_header .mx_DevicesPanel_deviceLastSeen {
- width: 30%;
-}
-
-.mx_DevicesPanel_header .mx_DevicesPanel_deviceButtons {
- width: 20%;
-}
-
-.mx_DevicesPanel_device {
- display: table-row;
-}
-
-.mx_DevicesPanel_device > div {
- display: table-cell;
-}
-
-.mx_DevicesPanel_myDevice {
- font-weight: 700;
-}
-
-.mx_E2eAdvancedPanel_settingLongDescription {
- margin-right: 150px;
-}
-
-.mx_ExistingEmailAddress {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- margin-bottom: 5px;
-}
-
-.mx_ExistingEmailAddress_delete {
- margin-right: 5px;
- cursor: pointer;
- vertical-align: middle;
-}
-
-.mx_ExistingEmailAddress_email,
-.mx_ExistingEmailAddress_promptText {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- margin-right: 10px;
-}
-
-.mx_ExistingEmailAddress_confirmBtn {
- margin-left: 5px;
-}
-
-.mx_IntegrationManager .mx_Dialog {
- width: 60%;
- height: 70%;
- overflow: hidden;
- padding: 0;
- max-width: none;
- max-height: none;
-}
-
-.mx_IntegrationManager iframe {
- background-color: #fff;
- border: 0;
- width: 100%;
- height: 100%;
-}
-
-.mx_IntegrationManager_loading h3 {
- text-align: center;
-}
-
-.mx_IntegrationManager_error {
- text-align: center;
- padding-top: 20px;
-}
-
-.mx_IntegrationManager_error h3 {
- color: #ff4b55;
-}
-
-.mx_UserNotifSettings {
- color: #2e2f32;
-}
-
-.mx_UserNotifSettings .mx_UserNotifSettings_pushRulesTable {
- width: calc(100% + 12px);
- table-layout: fixed;
- border-collapse: collapse;
- border-spacing: 0;
- margin-top: 40px;
-}
-
-.mx_UserNotifSettings .mx_UserNotifSettings_pushRulesTable tr > th {
- font-weight: 600;
-}
-
-.mx_UserNotifSettings .mx_UserNotifSettings_pushRulesTable tr > th:first-child {
- text-align: left;
- font-size: 1.8rem;
-}
-
-.mx_UserNotifSettings
- .mx_UserNotifSettings_pushRulesTable
- tr
- > th:nth-child(n + 2) {
- color: #737d8c;
- font-size: 1.2rem;
- vertical-align: middle;
- width: 66px;
-}
-
-.mx_UserNotifSettings
- .mx_UserNotifSettings_pushRulesTable
- tr
- > td:nth-child(n + 2) {
- text-align: center;
-}
-
-.mx_UserNotifSettings .mx_UserNotifSettings_pushRulesTable tr > td {
- padding-top: 8px;
-}
-
-.mx_UserNotifSettings .mx_UserNotifSettings_pushRulesTable .mx_RadioButton {
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_UserNotifSettings
- .mx_UserNotifSettings_pushRulesTable
- .mx_RadioButton
- .mx_RadioButton_content,
-.mx_UserNotifSettings
- .mx_UserNotifSettings_pushRulesTable
- .mx_RadioButton
- .mx_RadioButton_spacer {
- display: none;
-}
-
-.mx_UserNotifSettings .mx_UserNotifSettings_floatingSection {
- margin-top: 40px;
-}
-
-.mx_UserNotifSettings .mx_UserNotifSettings_floatingSection > div:first-child {
- font-size: 1.8rem;
- font-weight: 600;
-}
-
-.mx_UserNotifSettings .mx_UserNotifSettings_floatingSection > table {
- border-collapse: collapse;
- border-spacing: 0;
- margin-top: 8px;
-}
-
-.mx_UserNotifSettings
- .mx_UserNotifSettings_floatingSection
- > table
- tr
- > td:first-child {
- padding-right: 8px;
-}
-
-.mx_UserNotifSettings .mx_UserNotifSettings_clearNotifsButton {
- margin-top: 8px;
-}
-
-.mx_UserNotifSettings .mx_TagComposer {
- margin-top: 35px;
-}
-
-.mx_ExistingPhoneNumber {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- margin-bottom: 5px;
-}
-
-.mx_ExistingPhoneNumber_delete {
- margin-right: 5px;
- cursor: pointer;
- vertical-align: middle;
-}
-
-.mx_ExistingPhoneNumber_address,
-.mx_ExistingPhoneNumber_promptText {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- margin-right: 10px;
-}
-
-.mx_ExistingPhoneNumber_confirmBtn {
- margin-left: 5px;
-}
-
-.mx_ExistingPhoneNumber_verification {
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_ExistingPhoneNumber_verification .mx_Field {
- margin: 0 0 0 1em;
-}
-
-.mx_PhoneNumbers_input {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_PhoneNumbers_input > .mx_Field {
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
-}
-
-.mx_PhoneNumbers_country {
- width: 80px;
-}
-
-.mx_ProfileSettings_controls_topic > textarea {
- resize: vertical;
-}
-
-.mx_ProfileSettings_profile {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_ProfileSettings_controls {
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- margin-right: 54px;
-}
-
-.mx_ProfileSettings_controls .mx_SettingsTab_subheading {
- margin-top: 0;
-}
-
-.mx_ProfileSettings_controls .mx_Field #profileTopic {
- height: 4em;
-}
-
-.mx_ProfileSettings_controls .mx_Field:first-child {
- margin-top: 0;
-}
-
-.mx_ProfileSettings_hostingSignup {
- margin-left: 20px;
-}
-
-.mx_ProfileSettings_hostingSignup img {
- margin-left: 5px;
-}
-
-.mx_ProfileSettings_avatarUpload {
- display: none;
-}
-
-.mx_ProfileSettings_profileForm {
- margin-right: 100px;
- border-bottom: 1px solid #e7e7e7;
-}
-
-.mx_ProfileSettings_buttons {
- margin-top: 10px;
- margin-bottom: 28px;
-}
-
-.mx_ProfileSettings_buttons > .mx_AccessibleButton_kind_link {
- padding-left: 0;
-}
-
-.mx_SecureBackupPanel_deviceNotVerified,
-.mx_SecureBackupPanel_deviceVerified,
-.mx_SecureBackupPanel_sigInvalid,
-.mx_SecureBackupPanel_sigValid {
- font-weight: 700;
-}
-
-.mx_SecureBackupPanel_deviceVerified,
-.mx_SecureBackupPanel_sigValid {
- color: #76cfa5;
-}
-
-.mx_SecureBackupPanel_deviceNotVerified,
-.mx_SecureBackupPanel_sigInvalid {
- color: #ba6363;
-}
-
-.mx_SecureBackupPanel_deviceName {
- font-style: italic;
-}
-
-.mx_SecureBackupPanel_buttonRow {
- margin: 1em 0;
-}
-
-.mx_SecureBackupPanel_buttonRow :nth-child(n + 1) {
- -webkit-margin-end: 10px;
- margin-inline-end: 10px;
-}
-
-.mx_SecureBackupPanel_statusList {
- border-spacing: 0;
-}
-
-.mx_SecureBackupPanel_statusList td {
- padding: 0;
-}
-
-.mx_SecureBackupPanel_statusList td:first-of-type {
- -webkit-padding-end: 1em;
- padding-inline-end: 1em;
-}
-
-.mx_SetIdServer .mx_Field_input {
- margin-right: 100px;
-}
-
-.mx_SetIdServer_tooltip {
- max-width: 120px;
-}
-
-.mx_SetIntegrationManager {
- margin-top: 10px;
- margin-bottom: 10px;
-}
-
-.mx_SetIntegrationManager > .mx_SettingsTab_heading {
- margin-bottom: 10px;
-}
-
-.mx_SetIntegrationManager
- > .mx_SettingsTab_heading
- > .mx_SettingsTab_subheading {
- display: inline-block;
- padding-left: 5px;
-}
-
-.mx_SetIntegrationManager .mx_ToggleSwitch {
- display: inline-block;
- float: right;
- top: 9px;
- margin-right: 100px;
-}
-
-.mx_ExistingSpellCheckLanguage {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- margin-bottom: 5px;
-}
-
-.mx_ExistingSpellCheckLanguage_language {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- margin-right: 10px;
-}
-
-.mx_GeneralUserSettingsTab_spellCheckLanguageInput {
- margin-top: 1em;
- margin-bottom: 1em;
-}
-
-.mx_SpellCheckLanguages {
- margin-right: 100px;
-}
-
-.mx_UpdateCheckButton_summary {
- margin-left: 16px;
-}
-
-.mx_UpdateCheckButton_summary .mx_AccessibleButton_kind_link {
- padding: 0;
-}
-
-.mx_SettingsTab {
- color: #61708b;
-}
-
-.mx_SettingsTab_warningText {
- color: #ff4b55;
-}
-
-.mx_SettingsTab_heading {
- font-size: 2rem;
- font-weight: 600;
- color: #2e2f32;
- margin-bottom: 10px;
-}
-
-.mx_SettingsTab_heading:nth-child(n + 2) {
- margin-top: 30px;
-}
-
-.mx_SettingsTab_subheading {
- font-size: 1.6rem;
- display: block;
- font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
- Helvetica, Sans-Serif, Noto Color Emoji;
- font-weight: 600;
- color: #2e2f32;
- margin-bottom: 10px;
- margin-top: 12px;
-}
-
-.mx_SettingsTab_subsectionText {
- color: #61708b;
- font-size: 1.4rem;
- display: block;
- margin: 10px 80px 10px 0;
-}
-
-.mx_SettingsTab_section {
- margin-bottom: 24px;
-}
-
-.mx_SettingsTab_section .mx_SettingsFlag {
- margin-right: 80px;
- margin-bottom: 10px;
-}
-
-.mx_SettingsTab_section.mx_SettingsTab_subsectionText .mx_SettingsFlag {
- margin-right: 0 !important;
-}
-
-.mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label {
- vertical-align: middle;
- display: inline-block;
- font-size: 1.4rem;
- color: #2e2f32;
- max-width: calc(100% - 4.8rem);
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- padding-right: 10px;
-}
-
-.mx_SettingsTab_section .mx_SettingsFlag .mx_ToggleSwitch {
- float: right;
-}
-
-.mx_SettingsTab_linkBtn {
- cursor: pointer;
- color: #0dbd8b;
- word-break: break-all;
-}
-
-.mx_SettingsTab a {
- color: #238cf5;
-}
-
-.mx_GeneralRoomSettingsTab_profileSection {
- margin-top: 10px;
-}
-
-.mx_RolesRoomSettingsTab ul {
- margin-bottom: 0;
-}
-
-.mx_RolesRoomSettingsTab_unbanBtn {
- margin-right: 10px;
- margin-bottom: 5px;
-}
-
-.mx_SecurityRoomSettingsTab .mx_SettingsTab_showAdvanced {
- padding: 0;
- margin-bottom: 16px;
-}
-
-.mx_SecurityRoomSettingsTab .mx_SecurityRoomSettingsTab_spacesWithAccess > h4 {
- color: #737d8c;
- font-weight: 600;
- font-size: 1.2rem;
- line-height: 1.5rem;
- text-transform: uppercase;
-}
-
-.mx_SecurityRoomSettingsTab
- .mx_SecurityRoomSettingsTab_spacesWithAccess
- > span {
- font-weight: 500;
- font-size: 1.4rem;
- line-height: 32px;
- color: #737d8c;
- display: inline-block;
-}
-
-.mx_SecurityRoomSettingsTab
- .mx_SecurityRoomSettingsTab_spacesWithAccess
- > span
- .mx_RoomAvatar_isSpaceRoom
- img,
-.mx_SecurityRoomSettingsTab
- .mx_SecurityRoomSettingsTab_spacesWithAccess
- > span
- img.mx_RoomAvatar_isSpaceRoom {
- border-radius: 8px;
-}
-
-.mx_SecurityRoomSettingsTab
- .mx_SecurityRoomSettingsTab_spacesWithAccess
- > span
- .mx_BaseAvatar {
- margin-right: 8px;
-}
-
-.mx_SecurityRoomSettingsTab
- .mx_SecurityRoomSettingsTab_spacesWithAccess
- > span
- + span {
- margin-left: 16px;
-}
-
-.mx_SecurityRoomSettingsTab_warning {
- display: block;
-}
-
-.mx_SecurityRoomSettingsTab_warning img {
- vertical-align: middle;
- margin-right: 5px;
- margin-left: 3px;
- margin-bottom: 5px;
-}
-
-.mx_SecurityRoomSettingsTab_encryptionSection {
- padding-bottom: 24px;
- border-bottom: 1px solid #e7e7e7;
- margin-bottom: 32px;
-}
-
-.mx_SecurityRoomSettingsTab_upgradeRequired {
- margin-left: 16px;
- padding: 4px 16px;
- border: 1px solid #0dbd8b;
- border-radius: 8px;
- color: #0dbd8b;
- font-size: 1.2rem;
- line-height: 1.5rem;
-}
-
-.mx_SecurityRoomSettingsTab_joinRule .mx_RadioButton {
- padding-top: 16px;
- margin-bottom: 8px;
-}
-
-.mx_SecurityRoomSettingsTab_joinRule .mx_RadioButton .mx_RadioButton_content {
- margin-left: 14px;
- font-weight: 600;
- font-size: 1.5rem;
- line-height: 2.4rem;
- color: #2e2f32;
- display: block;
-}
-
-.mx_SecurityRoomSettingsTab_joinRule > span {
- display: inline-block;
- margin-left: 34px;
- margin-bottom: 16px;
- font-size: 1.5rem;
- line-height: 2.4rem;
- color: #737d8c;
-}
-
-.mx_SecurityRoomSettingsTab_joinRule > span + .mx_RadioButton {
- border-top: 1px solid #e7e7e7;
-}
-
-.mx_SecurityRoomSettingsTab_joinRule .mx_AccessibleButton_kind_link {
- padding: 0;
- font-size: inherit;
-}
-
-.mx_AppearanceUserSettingsTab_fontSlider,
-.mx_AppearanceUserSettingsTab_fontSlider_preview {
- margin-right: 100px;
-}
-
-.mx_AppearanceUserSettingsTab .mx_Field {
- width: 256px;
-}
-
-.mx_AppearanceUserSettingsTab_fontScaling {
- color: #2e2f32;
-}
-
-.mx_AppearanceUserSettingsTab_fontSlider {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding: 15px;
- background: rgba(227, 232, 240, 0.2);
- border-radius: 10px;
- font-size: 10px;
- margin-top: 24px;
- margin-bottom: 24px;
-}
-
-.mx_AppearanceUserSettingsTab_fontSlider_preview {
- border: 1px solid #e3e8f0;
- border-radius: 10px;
- padding: 0 16px 9px;
- pointer-events: none;
- display: flow-root;
-}
-
-.mx_AppearanceUserSettingsTab_fontSlider_preview
- .mx_EventTile[data-layout="bubble"] {
- margin-top: 30px;
-}
-
-.mx_AppearanceUserSettingsTab_fontSlider_preview .mx_EventTile_msgOption {
- display: none;
-}
-
-.mx_AppearanceUserSettingsTab_fontSlider_preview.mx_IRCLayout {
- padding-top: 9px;
-}
-
-.mx_AppearanceUserSettingsTab_fontSlider_smallText {
- font-size: 15px;
- padding-right: 20px;
- padding-left: 5px;
- font-weight: 500;
-}
-
-.mx_AppearanceUserSettingsTab_fontSlider_largeText {
- font-size: 18px;
- padding-left: 20px;
- padding-right: 5px;
- font-weight: 500;
-}
-
-.mx_AppearanceUserSettingsTab > .mx_SettingsTab_SubHeading {
- margin-bottom: 32px;
-}
-
-.mx_AppearanceUserSettingsTab_themeSection {
- color: #2e2f32;
-}
-
-.mx_AppearanceUserSettingsTab_themeSection > .mx_ThemeSelectors {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- margin-top: 4px;
- margin-bottom: 30px;
-}
-
-.mx_AppearanceUserSettingsTab_themeSection
- > .mx_ThemeSelectors
- > .mx_RadioButton {
- padding: 1.6rem;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- border-radius: 10px;
- width: 180px;
- background: #e3e8f0;
- opacity: 0.4;
- -ms-flex-negative: 1;
- flex-shrink: 1;
- -webkit-box-flex: 0;
- -ms-flex-positive: 0;
- flex-grow: 0;
- margin-right: 15px;
- margin-top: 10px;
- font-weight: 600;
- color: #61708b;
-}
-
-.mx_AppearanceUserSettingsTab_themeSection
- > .mx_ThemeSelectors
- > .mx_RadioButton
- > span {
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_AppearanceUserSettingsTab_themeSection
- > .mx_ThemeSelectors
- > .mx_RadioButton_enabled {
- opacity: 1;
-}
-
-.mx_AppearanceUserSettingsTab_themeSection
- > .mx_ThemeSelectors
- > .mx_RadioButton_enabled.mx_ThemeSelector_light {
- background-color: #f3f8fd;
- color: #2e2f32;
-}
-
-.mx_AppearanceUserSettingsTab_themeSection
- > .mx_ThemeSelectors
- > .mx_RadioButton_enabled.mx_ThemeSelector_dark {
- background-color: #25282e;
- color: #f3f8fd;
-}
-
-.mx_AppearanceUserSettingsTab_themeSection
- > .mx_ThemeSelectors
- > .mx_RadioButton_enabled.mx_ThemeSelector_dark
- > input
- > div,
-.mx_AppearanceUserSettingsTab_themeSection
- > .mx_ThemeSelectors
- > .mx_RadioButton_enabled.mx_ThemeSelector_dark
- > input
- > div
- > div {
- border-color: #e3e8f0;
-}
-
-.mx_AppearanceUserSettingsTab_themeSection
- > .mx_ThemeSelectors
- > .mx_RadioButton_enabled.mx_ThemeSelector_black {
- background-color: #000;
- color: #f3f8fd;
-}
-
-.mx_AppearanceUserSettingsTab_themeSection
- > .mx_ThemeSelectors
- > .mx_RadioButton_enabled.mx_ThemeSelector_black
- > input
- > div,
-.mx_AppearanceUserSettingsTab_themeSection
- > .mx_ThemeSelectors
- > .mx_RadioButton_enabled.mx_ThemeSelector_black
- > input
- > div
- > div {
- border-color: #e3e8f0;
-}
-
-.mx_SettingsTab_customFontSizeField {
- margin-left: calc(1.6rem + 10px);
-}
-
-.mx_AppearanceUserSettingsTab_Layout_RadioButtons {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- grid-gap: 24px;
- gap: 24px;
- color: #2e2f32;
-}
-
-.mx_AppearanceUserSettingsTab_Layout_RadioButtons
- > .mx_AppearanceUserSettingsTab_Layout_RadioButton {
- -webkit-box-flex: 0;
- -ms-flex-positive: 0;
- flex-grow: 0;
- -ms-flex-negative: 1;
- flex-shrink: 1;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- width: 300px;
- border: 1px solid #e3e8f0;
- border-radius: 10px;
-}
-
-.mx_AppearanceUserSettingsTab_Layout_RadioButtons
- > .mx_AppearanceUserSettingsTab_Layout_RadioButton
- .mx_EventTile_msgOption,
-.mx_AppearanceUserSettingsTab_Layout_RadioButtons
- > .mx_AppearanceUserSettingsTab_Layout_RadioButton
- .mx_MessageActionBar {
- display: none;
-}
-
-.mx_AppearanceUserSettingsTab_Layout_RadioButtons
- > .mx_AppearanceUserSettingsTab_Layout_RadioButton
- .mx_AppearanceUserSettingsTab_Layout_RadioButton_preview {
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding: 10px;
- pointer-events: none;
-}
-
-.mx_AppearanceUserSettingsTab_Layout_RadioButtons
- > .mx_AppearanceUserSettingsTab_Layout_RadioButton
- .mx_RadioButton {
- -webkit-box-flex: 0;
- -ms-flex-positive: 0;
- flex-grow: 0;
- padding: 10px;
-}
-
-.mx_AppearanceUserSettingsTab_Layout_RadioButtons
- > .mx_AppearanceUserSettingsTab_Layout_RadioButton
- .mx_EventTile_content {
- margin-right: 0;
-}
-
-.mx_AppearanceUserSettingsTab_Layout_RadioButtons
- > .mx_AppearanceUserSettingsTab_Layout_RadioButton.mx_AppearanceUserSettingsTab_Layout_RadioButton_selected {
- border-color: #0dbd8b;
-}
-
-.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton {
- border-top: 1px solid #e3e8f0;
-}
-
-.mx_AppearanceUserSettingsTab_Layout_RadioButtons
- .mx_RadioButton
- > input
- + div {
- border-color: rgba(97, 112, 139, 0.2);
-}
-
-.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton_checked {
- background-color: rgba(13, 189, 139, 0.08);
-}
-
-.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_EventTile {
- margin: 0;
-}
-
-.mx_AppearanceUserSettingsTab_Layout_RadioButtons
- .mx_EventTile[data-layout="bubble"] {
- margin-right: 40px;
-}
-
-.mx_AppearanceUserSettingsTab_Layout_RadioButtons
- .mx_EventTile[data-layout="irc"]
- > a {
- display: none;
-}
-
-.mx_AppearanceUserSettingsTab_Layout_RadioButtons
- .mx_EventTile
- .mx_EventTile_line {
- max-width: 90%;
-}
-
-.mx_AppearanceUserSettingsTab_Advanced {
- color: #2e2f32;
-}
-
-.mx_AppearanceUserSettingsTab_Advanced > * {
- margin-bottom: 16px;
-}
-
-.mx_AppearanceUserSettingsTab_Advanced
- .mx_AppearanceUserSettingsTab_AdvancedToggle {
- color: #0dbd8b;
- cursor: pointer;
-}
-
-.mx_AppearanceUserSettingsTab_Advanced
- .mx_AppearanceUserSettingsTab_systemFont {
- margin-left: calc(1.6rem + 10px);
-}
-
-.mx_GeneralUserSettingsTab_changePassword .mx_Field {
- margin-right: 100px;
-}
-
-.mx_GeneralUserSettingsTab_changePassword .mx_Field:first-child {
- margin-top: 0;
-}
-
-.mx_GeneralUserSettingsTab_accountSection
- .mx_SettingsTab_subheading:nth-child(n + 1),
-.mx_GeneralUserSettingsTab_discovery
- .mx_SettingsTab_subheading:nth-child(n + 2),
-.mx_SetIdServer .mx_SettingsTab_subheading {
- margin-top: 24px;
-}
-
-.mx_GeneralUserSettingsTab_accountSection .mx_Spinner,
-.mx_GeneralUserSettingsTab_discovery .mx_Spinner {
- -webkit-box-pack: left;
- -ms-flex-pack: left;
- justify-content: left;
-}
-
-.mx_GeneralUserSettingsTab_accountSection .mx_EmailAddresses,
-.mx_GeneralUserSettingsTab_accountSection .mx_PhoneNumbers,
-.mx_GeneralUserSettingsTab_discovery .mx_ExistingEmailAddress,
-.mx_GeneralUserSettingsTab_discovery .mx_ExistingPhoneNumber,
-.mx_GeneralUserSettingsTab_languageInput {
- margin-right: 100px;
-}
-
-.mx_GeneralUserSettingsTab_warningIcon {
- vertical-align: middle;
-}
-
-.mx_HelpUserSettingsTab_debugButton {
- margin-bottom: 5px;
- margin-top: 5px;
-}
-
-.mx_HelpUserSettingsTab span.mx_AccessibleButton {
- word-break: break-word;
-}
-
-.mx_HelpUserSettingsTab code {
- word-break: break-all;
- -webkit-user-select: all;
- -moz-user-select: all;
- -ms-user-select: all;
- user-select: all;
-}
-
-.mx_HelpUserSettingsTab_accessToken {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
- border-radius: 5px;
- border: 1px solid #747474;
- margin-bottom: 10px;
- margin-top: 10px;
- padding: 10px;
-}
-
-.mx_HelpUserSettingsTab_accessToken_copy {
- -ms-flex-negative: 0;
- flex-shrink: 0;
- cursor: pointer;
- margin-left: 20px;
- display: inherit;
-}
-
-.mx_HelpUserSettingsTab_accessToken_copy > div {
- -webkit-mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
- mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
- background-color: #2e2f32;
- margin-left: 5px;
- width: 20px;
- height: 20px;
- background-repeat: no-repeat;
-}
-
-.mx_LabsUserSettingsTab .mx_SettingsTab_section {
- margin-top: 32px;
-}
-
-.mx_LabsUserSettingsTab .mx_SettingsTab_section .mx_SettingsFlag {
- margin-right: 0;
-}
-
-.mx_MjolnirUserSettingsTab .mx_Field {
- margin-right: 100px;
-}
-
-.mx_MjolnirUserSettingsTab_listItem {
- margin-bottom: 2px;
-}
-
-.mx_NotificationUserSettingsTab .mx_SettingsTab_heading {
- margin-bottom: 10px;
-}
-
-.mx_PreferencesUserSettingsTab .mx_Field {
- margin-right: 100px;
-}
-
-.mx_PreferencesUserSettingsTab .mx_SettingsTab_section {
- margin-bottom: 30px;
-}
-
-.mx_SecurityUserSettingsTab .mx_DevicesPanel {
- width: auto;
- max-width: 880px;
-}
-
-.mx_SecurityUserSettingsTab_deviceInfo {
- display: table;
- padding-left: 0;
-}
-
-.mx_SecurityUserSettingsTab_deviceInfo > li {
- display: table-row;
-}
-
-.mx_SecurityUserSettingsTab_deviceInfo > li > label,
-.mx_SecurityUserSettingsTab_deviceInfo > li > span {
- display: table-cell;
- padding-right: 1em;
-}
-
-.mx_SecurityUserSettingsTab_bulkOptions .mx_AccessibleButton,
-.mx_SecurityUserSettingsTab_importExportButtons .mx_AccessibleButton {
- margin-right: 10px;
-}
-
-.mx_SecurityUserSettingsTab_importExportButtons {
- margin-bottom: 15px;
-}
-
-.mx_SecurityUserSettingsTab_ignoredUser {
- margin-bottom: 5px;
-}
-
-.mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton {
- margin-right: 10px;
-}
-
-.mx_SecurityUserSettingsTab
- .mx_SettingsTab_section
- .mx_AccessibleButton_kind_link {
- padding: 0;
- font-size: inherit;
-}
-
-.mx_SecurityUserSettingsTab .mx_SecurityUserSettingsTab_warning {
- color: #ff4b55;
- position: relative;
- padding-left: 40px;
- margin-top: 30px;
-}
-
-.mx_SecurityUserSettingsTab .mx_SecurityUserSettingsTab_warning:before {
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: 0 center;
- mask-position: 0 center;
- -webkit-mask-size: 2.4rem;
- mask-size: 2.4rem;
- position: absolute;
- width: 2.4rem;
- height: 2.4rem;
- content: "";
- top: 0;
- left: 0;
- background-color: #ff4b55;
- -webkit-mask-image: url(../../img/feather-customised/alert-triangle.38aca3a.svg);
- mask-image: url(../../img/feather-customised/alert-triangle.38aca3a.svg);
-}
-
-.mx_VoiceUserSettingsTab .mx_Field {
- margin-right: 100px;
-}
-
-.mx_VoiceUserSettingsTab_missingMediaPermissions {
- margin-bottom: 15px;
-}
-
-.mx_SpaceBasicSettings .mx_Field {
- margin: 24px 0;
-}
-
-.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- margin-top: 24px;
-}
-
-.mx_SpaceBasicSettings
- .mx_SpaceBasicSettings_avatarContainer
- .mx_SpaceBasicSettings_avatar {
- position: relative;
- height: 80px;
- width: 80px;
- background-color: #8d99a5;
- border-radius: 16px;
-}
-
-.mx_SpaceBasicSettings
- .mx_SpaceBasicSettings_avatarContainer
- img.mx_SpaceBasicSettings_avatar {
- width: 80px;
- height: 80px;
- -o-object-fit: cover;
- object-fit: cover;
- border-radius: 16px;
-}
-
-.mx_SpaceBasicSettings
- .mx_SpaceBasicSettings_avatarContainer
- div.mx_SpaceBasicSettings_avatar {
- cursor: pointer;
-}
-
-.mx_SpaceBasicSettings
- .mx_SpaceBasicSettings_avatarContainer
- div.mx_SpaceBasicSettings_avatar:before {
- content: "";
- position: absolute;
- height: 80px;
- width: 80px;
- top: 0;
- left: 0;
- background-color: #fff;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 20px;
- mask-size: 20px;
- -webkit-mask-image: url(../../img/element-icons/camera.a81a395.svg);
- mask-image: url(../../img/element-icons/camera.a81a395.svg);
-}
-
-.mx_SpaceBasicSettings
- .mx_SpaceBasicSettings_avatarContainer
- > input[type="file"] {
- display: none;
-}
-
-.mx_SpaceBasicSettings
- .mx_SpaceBasicSettings_avatarContainer
- > .mx_AccessibleButton_kind_link {
- display: inline-block;
- padding: 0;
- margin: auto 16px;
- color: #368bd6;
-}
-
-.mx_SpaceBasicSettings
- .mx_SpaceBasicSettings_avatarContainer
- > .mx_SpaceBasicSettings_avatar_remove {
- color: #ff4b55;
-}
-
-.mx_SpaceBasicSettings .mx_AccessibleButton_hasKind {
- padding: 8px 22px;
- margin-left: auto;
- display: block;
- width: -webkit-min-content;
- width: -moz-min-content;
- width: min-content;
-}
-
-.mx_SpaceBasicSettings .mx_AccessibleButton_disabled {
- cursor: not-allowed;
-}
-
-.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu_background {
- background-color: rgba(46, 48, 51, 0.38);
- opacity: 0.6;
- left: 71px;
-}
-
-.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu {
- padding: 24px;
- width: 480px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- background-color: #fff;
- position: relative;
-}
-
-.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu > div > h2 {
- font-weight: 600;
- font-size: 1.8rem;
- margin-top: 4px;
-}
-
-.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu > div > p {
- font-size: 1.5rem;
- color: #737d8c;
- margin: 0;
-}
-
-.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_BetaCard_betaPill {
- position: absolute;
- top: 24px;
- right: 24px;
-}
-
-.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType {
- position: relative;
- padding: 16px 32px 16px 72px;
- width: 432px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- border-radius: 8px;
- border: 1px solid #e7e7e7;
- font-size: 1.5rem;
- margin: 20px 0;
-}
-
-.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType > h3 {
- font-weight: 600;
- margin: 0 0 4px;
-}
-
-.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType > span {
- color: #737d8c;
-}
-
-.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:before {
- position: absolute;
- content: "";
- width: 32px;
- height: 32px;
- top: 24px;
- left: 20px;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 24px;
- mask-size: 24px;
- background-color: #8d99a5;
-}
-
-.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover {
- border-color: #0dbd8b;
-}
-
-.mx_SpaceCreateMenu_wrapper
- .mx_ContextualMenu
- .mx_SpaceCreateMenuType:hover:before {
- background-color: #0dbd8b;
-}
-
-.mx_SpaceCreateMenu_wrapper
- .mx_ContextualMenu
- .mx_SpaceCreateMenuType:hover
- > span {
- color: #2e2f32;
-}
-
-.mx_SpaceCreateMenu_wrapper
- .mx_ContextualMenu
- .mx_SpaceCreateMenuType_public:before {
- -webkit-mask-image: url(../../img/globe.8201f08.svg);
- mask-image: url(../../img/globe.8201f08.svg);
-}
-
-.mx_SpaceCreateMenu_wrapper
- .mx_ContextualMenu
- .mx_SpaceCreateMenuType_private:before {
- -webkit-mask-image: url(../../img/element-icons/lock.1f264bd.svg);
- mask-image: url(../../img/element-icons/lock.1f264bd.svg);
-}
-
-.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenu_back {
- width: 28px;
- height: 28px;
- position: relative;
- background-color: rgba(141, 151, 165, 0.2);
- border-radius: 14px;
- margin-bottom: 12px;
-}
-
-.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenu_back:before {
- content: "";
- position: absolute;
- height: 28px;
- width: 28px;
- top: 0;
- left: 0;
- background-color: #8d99a5;
- -webkit-transform: rotate(90deg);
- transform: rotate(90deg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: 2px 3px;
- mask-position: 2px 3px;
- -webkit-mask-size: 24px;
- mask-size: 24px;
- -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
- mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
-}
-
-.mx_SpaceCreateMenu_wrapper
- .mx_ContextualMenu
- .mx_AccessibleButton_kind_primary {
- padding: 8px 22px;
- margin-left: auto;
- display: block;
- width: -webkit-min-content;
- width: -moz-min-content;
- width: min-content;
-}
-
-.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton_disabled {
- cursor: not-allowed;
-}
-
-.mx_SpacePublicShare .mx_AccessibleButton {
- position: relative;
- padding: 16px 32px 16px 72px;
- width: 432px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- border-radius: 8px;
- border: 1px solid #e7e7e7;
- font-size: 1.5rem;
- margin: 20px 0;
-}
-
-.mx_SpacePublicShare .mx_AccessibleButton > h3 {
- font-weight: 600;
- margin: 0 0 4px;
-}
-
-.mx_SpacePublicShare .mx_AccessibleButton > span {
- color: #737d8c;
-}
-
-.mx_SpacePublicShare .mx_AccessibleButton:before {
- position: absolute;
- content: "";
- width: 32px;
- height: 32px;
- top: 24px;
- left: 20px;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 24px;
- mask-size: 24px;
- background-color: #8d99a5;
-}
-
-.mx_SpacePublicShare .mx_AccessibleButton:hover {
- border-color: #0dbd8b;
-}
-
-.mx_SpacePublicShare .mx_AccessibleButton:hover:before {
- background-color: #0dbd8b;
-}
-
-.mx_SpacePublicShare .mx_AccessibleButton:hover > span {
- color: #2e2f32;
-}
-
-.mx_SpacePublicShare
- .mx_AccessibleButton.mx_SpacePublicShare_shareButton:before {
- -webkit-mask-image: url(../../img/element-icons/link.8f4b1fc.svg);
- mask-image: url(../../img/element-icons/link.8f4b1fc.svg);
-}
-
-.mx_SpacePublicShare
- .mx_AccessibleButton.mx_SpacePublicShare_inviteButton:before {
- -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
- mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
-}
-
-.mx_InlineTermsAgreement_cbContainer {
- margin-bottom: 10px;
- font-size: 1.4rem;
-}
-
-.mx_InlineTermsAgreement_cbContainer a {
- color: #0dbd8b;
- text-decoration: none;
-}
-
-.mx_InlineTermsAgreement_cbContainer .mx_InlineTermsAgreement_checkbox {
- margin-top: 10px;
-}
-
-.mx_InlineTermsAgreement_cbContainer .mx_InlineTermsAgreement_checkbox input {
- vertical-align: text-bottom;
-}
-
-.mx_InlineTermsAgreement_link {
- display: inline-block;
- -webkit-mask-image: url(../../img/external-link.a8d3e9b.svg);
- mask-image: url(../../img/external-link.a8d3e9b.svg);
- background-color: #0dbd8b;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- width: 12px;
- height: 12px;
- margin-left: 3px;
- vertical-align: middle;
-}
-
-.mx_AnalyticsToast .mx_AccessibleButton_kind_danger {
- background: none;
- color: #0dbd8b;
-}
-
-.mx_AnalyticsToast .mx_AccessibleButton_kind_primary {
- background: #0dbd8b;
- color: #fff;
-}
-
-.mx_NonUrgentEchoFailureToast .mx_NonUrgentEchoFailureToast_icon {
- display: inline-block;
- width: 1.8rem;
- height: 1.8rem;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background-color: #fff;
- -webkit-mask-image: url(../../img/element-icons/cloud-off.33cd28e.svg);
- mask-image: url(../../img/element-icons/cloud-off.33cd28e.svg);
- margin-right: 8px;
-}
-
-.mx_NonUrgentEchoFailureToast span {
- vertical-align: middle;
-}
-
-.mx_NonUrgentEchoFailureToast .mx_AccessibleButton {
- padding: 0;
-}
-
-.mx_VerificationShowSas_decimalSas {
- text-align: center;
- font-weight: 700;
- padding-left: 3px;
- padding-right: 3px;
-}
-
-.mx_VerificationShowSas_decimalSas span {
- margin-left: 5px;
- margin-right: 5px;
-}
-
-.mx_VerificationShowSas_emojiSas {
- text-align: center;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- margin: 25px 0;
-}
-
-.mx_VerificationShowSas_emojiSas_block {
- display: inline-block;
- margin-bottom: 16px;
- position: relative;
- width: 52px;
-}
-
-.mx_AuthPage_modal .mx_VerificationShowSas_emojiSas_block,
-.mx_Dialog .mx_VerificationShowSas_emojiSas_block {
- width: 60px;
-}
-
-.mx_VerificationShowSas_emojiSas_emoji {
- font-size: 3.2rem;
-}
-
-.mx_VerificationShowSas_emojiSas_label {
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- font-size: 1.2rem;
-}
-
-.mx_VerificationShowSas_emojiSas_break {
- -ms-flex-preferred-size: 100%;
- flex-basis: 100%;
-}
-
-.mx_VerificationShowSas
- .mx_Dialog_buttons
- button.mx_VerificationShowSas_matchButton {
- color: #0dbd8b;
- background-color: rgba(3, 179, 129, 0.16);
- border: none;
-}
-
-.mx_VerificationShowSas
- .mx_Dialog_buttons
- button.mx_VerificationShowSas_noMatchButton {
- color: #ff4b55;
- background-color: rgba(255, 75, 85, 0.16);
- border: none;
-}
-
-.mx_CallContainer {
- position: absolute;
- right: 20px;
- bottom: 72px;
- z-index: 100;
- pointer-events: none;
-}
-
-.mx_CallContainer .mx_CallPreview {
- pointer-events: auto;
- cursor: pointer;
-}
-
-.mx_CallContainer .mx_CallPreview .mx_VideoFeed_remote.mx_VideoFeed_voice {
- min-height: 150px;
-}
-
-.mx_CallContainer .mx_CallPreview .mx_VideoFeed_local {
- border-radius: 8px;
- overflow: hidden;
-}
-
-.mx_CallContainer .mx_AppTile_persistedWrapper div {
- min-width: 350px;
-}
-
-.mx_CallContainer .mx_IncomingCallBox {
- min-width: 250px;
- background-color: #f4f6fa;
- padding: 8px;
- -webkit-box-shadow: 0 14px 24px rgba(0, 0, 0, 0.08);
- box-shadow: 0 14px 24px rgba(0, 0, 0, 0.08);
- border-radius: 8px;
- pointer-events: auto;
- cursor: pointer;
-}
-
-.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- direction: row;
-}
-
-.mx_CallContainer
- .mx_IncomingCallBox
- .mx_IncomingCallBox_CallerInfo
- .mx_BaseAvatar_initial,
-.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo img {
- margin: 8px;
-}
-
-.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo > div {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo h1,
-.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo p {
- margin: 0;
- padding: 0;
- font-size: 1.4rem;
- line-height: 1.6rem;
-}
-
-.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo h1 {
- font-weight: 700;
-}
-
-.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons {
- padding: 8px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
-}
-
-.mx_CallContainer
- .mx_IncomingCallBox
- .mx_IncomingCallBox_buttons
- > .mx_IncomingCallBox_spacer {
- width: 8px;
-}
-
-.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons > * {
- -ms-flex-negative: 0;
- flex-shrink: 0;
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- margin-right: 0;
- font-size: 1.5rem;
- line-height: 2.4rem;
-}
-
-.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_iconButton {
- position: absolute;
- right: 8px;
-}
-
-.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_iconButton:before {
- content: "";
- height: 20px;
- width: 20px;
- background-color: #c1c6cd;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_silence:before {
- -webkit-mask-image: url(../../img/voip/silence.08cd2d6.svg);
- mask-image: url(../../img/voip/silence.08cd2d6.svg);
-}
-
-.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_unSilence:before {
- -webkit-mask-image: url(../../img/voip/un-silence.cebdd12.svg);
- mask-image: url(../../img/voip/un-silence.cebdd12.svg);
-}
-
-.mx_CallPreview {
- position: fixed;
- left: 0;
- top: 0;
-}
-
-.mx_CallView {
- border-radius: 8px;
- background-color: #f2f5f8;
- padding-left: 8px;
- padding-right: 8px;
- pointer-events: auto;
-}
-
-.mx_CallView_large {
- padding-bottom: 10px;
- margin: 5px 5px 5px 18px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_CallView_large,
-.mx_CallView_large .mx_CallView_voice {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
-}
-
-.mx_CallView_pip {
- width: 320px;
- padding-bottom: 8px;
- background-color: #f4f6fa;
- -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
- border-radius: 8px;
-}
-
-.mx_CallView_pip .mx_CallView_voice {
- height: 180px;
-}
-
-.mx_CallView_pip .mx_CallView_callControls {
- bottom: 0;
-}
-
-.mx_CallView_pip .mx_CallView_callControls_button:before {
- width: 36px;
- height: 36px;
-}
-
-.mx_CallView_pip .mx_CallView_holdTransferContent {
- padding-top: 10px;
- padding-bottom: 25px;
-}
-
-.mx_CallView_content {
- position: relative;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- border-radius: 8px;
-}
-
-.mx_CallView_voice {
- -webkit-box-orient: vertical;
- -ms-flex-direction: column;
- flex-direction: column;
- background-color: #27303a;
-}
-
-.mx_CallView_voice,
-.mx_CallView_voice_avatarsContainer {
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-direction: normal;
-}
-
-.mx_CallView_voice_avatarsContainer {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -ms-flex-direction: row;
- flex-direction: row;
-}
-
-.mx_CallView_voice_avatarsContainer div {
- margin-left: 12px;
- margin-right: 12px;
-}
-
-.mx_CallView_voice
- .mx_CallView_holdTransferContent
- .mx_CallView_voice_avatarContainer {
- border-radius: 2000px;
- overflow: hidden;
- position: relative;
-}
-
-.mx_CallView_holdTransferContent {
- height: 20px;
- padding-top: 20px;
- padding-bottom: 15px;
- color: #fff;
-}
-
-.mx_CallView_holdTransferContent .mx_AccessibleButton_hasKind {
- padding: 0;
- font-weight: 700;
-}
-
-.mx_CallView_video {
- width: 100%;
- height: 100%;
- z-index: 30;
- overflow: hidden;
-}
-
-.mx_CallView_video_hold {
- overflow: hidden;
-}
-
-.mx_CallView_video_hold .mx_VideoFeed {
- visibility: hidden;
-}
-
-.mx_CallView_video_holdBackground {
- position: absolute;
- width: 100%;
- height: 100%;
- left: 0;
- right: 0;
- background-repeat: no-repeat;
- background-size: cover;
- background-position: 50%;
- -webkit-filter: blur(20px);
- filter: blur(20px);
-}
-
-.mx_CallView_video_holdBackground:after {
- content: "";
- display: block;
- position: absolute;
- width: 100%;
- height: 100%;
- left: 0;
- right: 0;
- background-color: rgba(0, 0, 0, 0.6);
-}
-
-.mx_CallView_video .mx_CallView_holdTransferContent {
- position: absolute;
- top: 50%;
- left: 50%;
- -webkit-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
- font-weight: 700;
- color: #fff;
- text-align: center;
-}
-
-.mx_CallView_video .mx_CallView_holdTransferContent:before {
- display: block;
- margin-left: auto;
- margin-right: auto;
- content: "";
- width: 40px;
- height: 40px;
- background-image: url(../../img/voip/paused.77799b3.svg);
- background-position: 50%;
- background-size: cover;
-}
-
-.mx_CallView_pip .mx_CallView_video .mx_CallView_holdTransferContent:before {
- width: 30px;
- height: 30px;
-}
-
-.mx_CallView_video
- .mx_CallView_holdTransferContent
- .mx_AccessibleButton_hasKind {
- padding: 0;
-}
-
-.mx_CallView_header {
- height: 44px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: left;
- -ms-flex-pack: left;
- justify-content: left;
- -ms-flex-negative: 0;
- flex-shrink: 0;
-}
-
-.mx_CallView_header_callType {
- font-size: 1.2rem;
- font-weight: 700;
- vertical-align: middle;
-}
-
-.mx_CallView_header_secondaryCallInfo:before {
- content: "·";
- margin-left: 6px;
- margin-right: 6px;
-}
-
-.mx_CallView_header_controls {
- margin-left: auto;
-}
-
-.mx_CallView_header_button {
- display: inline-block;
- vertical-align: middle;
- cursor: pointer;
-}
-
-.mx_CallView_header_button:before {
- content: "";
- display: inline-block;
- height: 20px;
- width: 20px;
- vertical-align: middle;
- background-color: #737d8c;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_CallView_header_button_fullscreen:before {
- -webkit-mask-image: url(../../img/element-icons/call/fullscreen.43be138.svg);
- mask-image: url(../../img/element-icons/call/fullscreen.43be138.svg);
-}
-
-.mx_CallView_header_button_expand:before {
- -webkit-mask-image: url(../../img/element-icons/call/expand.7ef9f56.svg);
- mask-image: url(../../img/element-icons/call/expand.7ef9f56.svg);
-}
-
-.mx_CallView_header_callInfo {
- margin-left: 12px;
- margin-right: 16px;
-}
-
-.mx_CallView_header_roomName {
- font-weight: 700;
- font-size: 12px;
- line-height: normal;
- height: 15px;
-}
-
-.mx_CallView_secondaryCall_roomName {
- margin-left: 4px;
-}
-
-.mx_CallView_header_callTypeSmall {
- font-size: 12px;
- color: #737d8c;
- line-height: normal;
- height: 15px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- max-width: 240px;
-}
-
-.mx_CallView_header_phoneIcon {
- display: inline-block;
- margin-right: 6px;
- height: 16px;
- width: 16px;
- vertical-align: middle;
-}
-
-.mx_CallView_header_phoneIcon:before {
- content: "";
- display: inline-block;
- vertical-align: top;
- height: 16px;
- width: 16px;
- background-color: #ff4b55;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
- mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
-}
-
-.mx_CallView_callControls {
- position: absolute;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- bottom: 5px;
- width: 100%;
- opacity: 1;
- -webkit-transition: opacity 0.5s;
- transition: opacity 0.5s;
-}
-
-.mx_CallView_callControls_hidden {
- opacity: 0.001;
- pointer-events: none;
-}
-
-.mx_CallView_callControls_button {
- cursor: pointer;
- margin-left: 8px;
- margin-right: 8px;
-}
-
-.mx_CallView_callControls_button:before {
- content: "";
- display: inline-block;
- height: 48px;
- width: 48px;
- background-repeat: no-repeat;
- background-size: contain;
- background-position: 50%;
-}
-
-.mx_CallView_callControls_dialpad {
- margin-right: auto;
-}
-
-.mx_CallView_callControls_dialpad:before {
- background-image: url(../../img/voip/dialpad.fdda9a0.svg);
-}
-
-.mx_CallView_callControls_button_dialpad_hidden {
- margin-right: auto;
- cursor: auto;
-}
-
-.mx_CallView_callControls_button_micOn:before {
- background-image: url(../../img/voip/mic-on.2592c14.svg);
-}
-
-.mx_CallView_callControls_button_micOff:before {
- background-image: url(../../img/voip/mic-off.774e42b.svg);
-}
-
-.mx_CallView_callControls_button_vidOn:before {
- background-image: url(../../img/voip/vid-on.b9b8bbf.svg);
-}
-
-.mx_CallView_callControls_button_vidOff:before {
- background-image: url(../../img/voip/vid-off.5552596.svg);
-}
-
-.mx_CallView_callControls_button_hangup:before {
- background-image: url(../../img/voip/hangup.9c3adeb.svg);
-}
-
-.mx_CallView_callControls_button_more {
- margin-left: auto;
-}
-
-.mx_CallView_callControls_button_more:before {
- background-image: url(../../img/voip/more.5e8055e.svg);
-}
-
-.mx_CallView_callControls_button_more_hidden {
- margin-left: auto;
- cursor: auto;
-}
-
-.mx_CallView_callControls_button_invisible {
- visibility: hidden;
- pointer-events: none;
- position: absolute;
-}
-
-.mx_CallViewForRoom {
- overflow: hidden;
-}
-
-.mx_CallViewForRoom .mx_CallViewForRoom_ResizeWrapper {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- margin-bottom: 8px;
-}
-
-.mx_CallViewForRoom
- .mx_CallViewForRoom_ResizeWrapper:hover
- .mx_CallViewForRoom_ResizeHandle {
- width: 100% !important;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_CallViewForRoom
- .mx_CallViewForRoom_ResizeWrapper:hover
- .mx_CallViewForRoom_ResizeHandle:after {
- content: "";
- margin-top: 3px;
- border-radius: 4px;
- height: 4px;
- width: 100%;
- max-width: 64px;
- background-color: #2e2f32;
-}
-
-.mx_DialPad {
- display: grid;
- grid-row-gap: 16px;
- row-gap: 16px;
- grid-column-gap: 0;
- -webkit-column-gap: 0;
- -moz-column-gap: 0;
- column-gap: 0;
- margin-top: 24px;
- grid-template-columns: repeat(3, 1fr);
-}
-
-.mx_DialPad,
-.mx_DialPad_button {
- margin-left: auto;
- margin-right: auto;
-}
-
-.mx_DialPad_button {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- width: 40px;
- height: 40px;
- background-color: #e3e8f0;
- border-radius: 40px;
- font-size: 18px;
- font-weight: 600;
- text-align: center;
- vertical-align: middle;
-}
-
-.mx_DialPad_button .mx_DialPad_buttonSubText {
- font-size: 8px;
-}
-
-.mx_DialPad_dialButton {
- grid-column: 2;
- background-color: #0dbd8b;
-}
-
-.mx_DialPad_dialButton:before {
- content: "";
- display: inline-block;
- height: 40px;
- width: 40px;
- vertical-align: middle;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 20px;
- mask-size: 20px;
- -webkit-mask-position: center;
- mask-position: center;
- background-color: #fff;
- -webkit-mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
- mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
-}
-
-.mx_DialPadContextMenu_dialPad .mx_DialPad {
- grid-row-gap: 16px;
- row-gap: 16px;
- grid-column-gap: 32px;
- -webkit-column-gap: 32px;
- -moz-column-gap: 32px;
- column-gap: 32px;
-}
-
-.mx_DialPadContextMenuWrapper {
- padding: 15px;
-}
-
-.mx_DialPadContextMenu_header {
- margin-top: 32px;
- margin-left: 20px;
- margin-right: 20px;
- border: none;
- border-bottom: 1px solid #c1c6cd;
- -webkit-transition: border-bottom 0.25s;
- transition: border-bottom 0.25s;
-}
-
-.mx_DialPadContextMenu_cancel {
- float: right;
- -webkit-mask: url(../../img/feather-customised/cancel.23c2689.svg);
- mask: url(../../img/feather-customised/cancel.23c2689.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: cover;
- mask-size: cover;
- width: 14px;
- height: 14px;
- background-color: #c1c1c1;
- cursor: pointer;
-}
-
-.mx_DialPadContextMenu_header:focus-within {
- border-bottom: 1px solid #0dbd8b;
-}
-
-.mx_DialPadContextMenu_title {
- color: #61708b;
- font-size: 12px;
- font-weight: 600;
-}
-
-.mx_DialPadContextMenu_dialled {
- height: 1.5em;
- font-size: 18px;
- font-weight: 600;
- border: none;
- margin: 0;
-}
-
-.mx_DialPadContextMenu_dialled input {
- font-size: 18px;
- font-weight: 600;
- overflow: hidden;
- max-width: 185px;
- text-align: left;
- direction: rtl;
- padding: 8px 0;
- background-color: transparent;
-}
-
-.mx_DialPadContextMenu_dialPad {
- margin: 16px;
-}
-
-.mx_Dialog_dialPadWrapper .mx_Dialog {
- padding: 0;
-}
-
-.mx_DialPadModal {
- width: 292px;
- height: 370px;
- padding: 16px 0 0;
-}
-
-.mx_DialPadModal_header {
- margin-top: 32px;
- margin-left: 40px;
- margin-right: 40px;
- border-bottom: 1px solid #c1c6cd;
- -webkit-transition: border-bottom 0.25s;
- transition: border-bottom 0.25s;
-}
-
-.mx_DialPadModal_header:focus-within {
- border-bottom: 1px solid #0dbd8b;
-}
-
-.mx_DialPadModal_title {
- color: #61708b;
- font-size: 12px;
- font-weight: 600;
-}
-
-.mx_DialPadModal_cancel {
- float: right;
- -webkit-mask: url(../../img/feather-customised/cancel.23c2689.svg);
- mask: url(../../img/feather-customised/cancel.23c2689.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: cover;
- mask-size: cover;
- width: 14px;
- height: 14px;
- background-color: #c1c1c1;
- cursor: pointer;
- margin-right: 16px;
-}
-
-.mx_DialPadModal_field {
- border: none;
- margin: 0;
- height: 30px;
-}
-
-.mx_DialPadModal_field .mx_Field_postfix {
- border-left: none;
-}
-
-.mx_DialPadModal_field input {
- font-size: 18px;
- font-weight: 600;
-}
-
-.mx_DialPadModal_dialPad {
- margin-left: 16px;
- margin-right: 16px;
- margin-top: 16px;
-}
-
-.mx_VideoFeed_voice {
- background-color: #27303a;
-}
-
-.mx_VideoFeed_remote {
- width: 100%;
- height: 100%;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_VideoFeed_remote.mx_VideoFeed_video {
- background-color: #000;
-}
-
-.mx_VideoFeed_local {
- max-width: 25%;
- max-height: 25%;
- position: absolute;
- right: 10px;
- top: 10px;
- z-index: 100;
- border-radius: 4px;
-}
-
-.mx_VideoFeed_local.mx_VideoFeed_video {
- background-color: transparent;
-}
-
-.mx_VideoFeed_mirror {
- -webkit-transform: scaleX(-1);
- transform: scaleX(-1);
-}
-
-.hljs {
- display: block;
- overflow-x: auto;
- padding: 0.5em;
- color: #383a42;
- background: #fafafa;
-}
-
-.hljs-comment,
-.hljs-quote {
- color: #a0a1a7;
- font-style: italic;
-}
-
-.hljs-doctag,
-.hljs-formula,
-.hljs-keyword {
- color: #a626a4;
-}
-
-.hljs-deletion,
-.hljs-name,
-.hljs-section,
-.hljs-selector-tag,
-.hljs-subst {
- color: #e45649;
-}
-
-.hljs-literal {
- color: #0184bb;
-}
-
-.hljs-addition,
-.hljs-attribute,
-.hljs-meta-string,
-.hljs-regexp,
-.hljs-string {
- color: #50a14f;
-}
-
-.hljs-built_in,
-.hljs-class .hljs-title {
- color: #c18401;
-}
-
-.hljs-attr,
-.hljs-number,
-.hljs-selector-attr,
-.hljs-selector-class,
-.hljs-selector-pseudo,
-.hljs-template-variable,
-.hljs-type,
-.hljs-variable {
- color: #986801;
-}
-
-.hljs-bullet,
-.hljs-link,
-.hljs-meta,
-.hljs-selector-id,
-.hljs-symbol,
-.hljs-title {
- color: #4078f2;
-}
-
-.hljs-emphasis {
- font-style: italic;
-}
-
-.hljs-strong {
- font-weight: 700;
-}
-
-.hljs-link {
- text-decoration: underline;
-}
`;
-const customCSS = `
-#snackbar {
- display: flex;
- visibility: hidden;
- min-width: 250px;
- margin-left: -125px;
- background-color: #333;
- color: #fff;
- text-align: center;
- position: fixed;
- z-index: 1;
- left: 50%;
- bottom: 30px;
- font-size: 17px;
- padding: 6px 16px;
- font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
- font-weight: 400;
- line-height: 1.43;
- border-radius: 4px;
- letter-spacing: 0.01071em;
-}
+ return themeCSS + bundleCSS + customCSS;
+};
-#snackbar.mx_show {
- visibility: visible;
- -webkit-animation: mx_snackbar_fadein 0.5s, mx_snackbar_fadeout 0.5s 2.5s;
- animation: mx_snackbar_fadein 0.5s, mx_snackbar_fadeout 0.5s 2.5s;
-}
-
-a.mx_reply_anchor{
- cursor: pointer;
- color: #238cf5;
-}
-
-a.mx_reply_anchor:hover{
- text-decoration: underline;
-}
-
-@-webkit-keyframes mx_snackbar_fadein {
- from {bottom: 0; opacity: 0;}
- to {bottom: 30px; opacity: 1;}
-}
-
-@keyframes mx_snackbar_fadein {
- from {bottom: 0; opacity: 0;}
- to {bottom: 30px; opacity: 1;}
-}
-
-@-webkit-keyframes mx_snackbar_fadeout {
- from {bottom: 30px; opacity: 1;}
- to {bottom: 0; opacity: 0;}
-}
-
-@keyframes mx_snackbar_fadeout {
- from {bottom: 30px; opacity: 1;}
- to {bottom: 0; opacity: 0;}
-}
-
-.mx_MFileBody_info .mx_MFileBody_info_icon img.mx_export_attach_icon {
- content: '';
- background-color: #ffffff;
- width: 13px;
- height: 15px;
- position: absolute;
- top: 8px;
- left: 9px;
-}
-
-* {
- scroll-behavior: smooth !important;
-}
-
-
-.mx_Export_EventWrapper:target {
- background: white;
- animation: mx_event_highlight_animation 2s linear;
-}
-
-
-@keyframes mx_event_highlight_animation {
- 0%,100% {
- background: white;
- }
- 50% {
- background: #e3e2df;
- }
-}
-
-.mx_ReplyThread_Export {
- margin-top: -5px;
- margin-bottom: 5px;
-}
-
-.mx_RedactedBody img.mx_export_trash_icon {
- height: 14px;
- width: 14px;
- background-color: #ffffff;
- content: '';
- position: absolute;
- top: 1px;
- left: 0;
-}
-
-img {
- white-space: nowrap;
- overflow: hidden;
-}
-`;
-
-const markdownCSS = `.markdown-body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;overflow:hidden;font-family:'Helvetica Neue',Helvetica,'Segoe UI',Arial,freesans,sans-serif;font-size:16px;line-height:1.6;word-wrap:break-word}.markdown-body *{-moz-box-sizing:border-box;box-sizing:border-box}.markdown-body>:first-child{margin-top:0!important}.markdown-body>:last-child{margin-bottom:0!important}.markdown-body a{background:0 0;color:#4183c4;text-decoration:none}.markdown-body a:active,.markdown-body a:hover{outline:0}.markdown-body a:active,.markdown-body a:focus,.markdown-body a:hover{text-decoration:underline}.markdown-body strong{font-weight:700}.markdown-body em{font-style:italic}.markdown-body blockquote,.markdown-body dl,.markdown-body ol,.markdown-body p,.markdown-body pre,.markdown-body table,.markdown-body ul{margin-top:0;margin-bottom:16px}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{font-family:'Helvetica Neue',Helvetica,'Segoe UI',Arial,freesans,sans-serif;position:relative;margin-top:1em;margin-bottom:16px;font-weight:700;line-height:1.4}.markdown-body h1,.markdown-body h2{padding-bottom:.3em;border-bottom:1px solid #eee}.markdown-body h1{font-size:2.25em;line-height:1.2}.markdown-body h2{font-size:1.75em;line-height:1.225}.markdown-body h3{font-size:1.5em}.markdown-body h4{font-size:1.25em}.markdown-body h5{font-size:1em}.markdown-body h6{font-size:1em;color:#777}.markdown-body code,.markdown-body kbd,.markdown-body pre{font-family:Consolas,'Liberation Mono',Menlo,Courier,monospace}.markdown-body code{padding:.2em 0;margin:0;font-size:85%;background-color:rgba(0,0,0,.04);border-radius:3px}.markdown-body code:after,.markdown-body code:before{letter-spacing:-.2em;content:'\\00a0'}.markdown-body pre{word-wrap:normal;padding:16px;overflow:auto;font-size:85%;line-height:1.45;background-color:#f7f7f7;border-radius:3px}.markdown-body pre code{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background:0 0}.markdown-body pre code:after,.markdown-body pre code:before{content:normal}.markdown-body pre>code{font-size:1em;word-break:normal;white-space:pre;border:0}.markdown-body kbd{background-color:#e7e7e7;background-image:-webkit-linear-gradient(#fefefe,#e7e7e7);background-image:linear-gradient(#fefefe,#e7e7e7);background-repeat:repeat-x;display:inline-block;padding:5px 5px 1px;margin:0 1px;font-size:11px;line-height:10px;color:#000;border:1px solid #cfcfcf;border-radius:2px;box-shadow:0 1px 0 #ccc}.markdown-body hr:after,.markdown-body hr:before{display:table;content:''}.markdown-body input{color:inherit;font:inherit;margin:0;font-size:13px;line-height:1.4;font-family:Helvetica,Arial,freesans,clean,sans-serif,'Segoe UI Emoji','Segoe UI Symbol'}.markdown-body input[disabled]{cursor:default}.markdown-body input[type=checkbox]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0}.markdown-body blockquote{margin:0 0 16px;padding:0 15px;color:#777;border-left:4px solid #ddd}.markdown-body blockquote>:first-child{margin-top:0}.markdown-body blockquote>:last-child{margin-bottom:0}.markdown-body img{border:0;max-width:100%;-moz-box-sizing:border-box;box-sizing:border-box}.markdown-body hr{-moz-box-sizing:content-box;box-sizing:content-box;overflow:hidden;background:#e7e7e7;height:4px;padding:0;margin:16px 0;border:0}.markdown-body hr:after{clear:both}.markdown-body td,.markdown-body th{padding:0}.markdown-body table{border-collapse:collapse;border-spacing:0;display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}.markdown-body table td,.markdown-body table th{padding:6px 13px;border:1px solid #ddd}.markdown-body table th{font-weight:700}.markdown-body table tr{background-color:#fff;border-top:1px solid #ccc}.markdown-body table tr:nth-child(2n){background-color:#f8f8f8}.markdown-body ol,.markdown-body ul{padding:0 0 0 2em}.markdown-body ol ol,.markdown-body ul ol{list-style-type:lower-roman}.markdown-body ol ol,.markdown-body ol ul,.markdown-body ul ol,.markdown-body ul ul{margin-top:0;margin-bottom:0}.markdown-body ol ol ol,.markdown-body ol ul ol,.markdown-body ul ol ol,.markdown-body ul ul ol{list-style-type:lower-alpha}.markdown-body li>p{margin-top:16px}.markdown-body dd{margin-left:0}.markdown-body dl{padding:0}.markdown-body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:700}.markdown-body dl dd{padding:0 16px;margin-bottom:16px}`;
-
-export default lightCSS + markdownCSS + customCSS;
+export default getExportCSS;
From c74d6c6fff8f8f8ed9404e3343b7fac9378cf248 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 4 Aug 2021 12:39:35 +0530
Subject: [PATCH 150/176] Assign replacements
---
src/utils/exportUtils/HtmlExport.tsx | 8 ++++++--
src/utils/exportUtils/exportCSS.ts | 8 +++++---
test/utils/export-test.tsx | 30 ++++++++++++++++++++++++++++
3 files changed, 41 insertions(+), 5 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 54e21fdf14..124914a210 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -36,6 +36,7 @@ import { ExportTypes } from "./exportUtils";
import { IExportOptions } from "./exportUtils";
import MatrixClientContext from "../../contexts/MatrixClientContext";
import getExportCSS from "./exportCSS";
+import { textForEvent } from "../../TextForEvent";
export default class HTMLExporter extends Exporter {
protected avatars: Map<string, boolean>;
@@ -346,13 +347,16 @@ export default class HTMLExporter extends Exporter {
);
}
} else {
- eventTile = await this.getEventTileMarkup(this.createModifiedEvent(this.mediaOmitText, mxEv), joined);
+ eventTile = await this.getEventTileMarkup(
+ this.createModifiedEvent(this.mediaOmitText, mxEv),
+ joined,
+ );
}
} else eventTile = await this.getEventTileMarkup(mxEv, joined);
} catch (e) {
// TODO: Handle callEvent errors
console.error(e);
- eventTile = await this.getEventTileMarkup(this.createModifiedEvent("Error parsing HTML", mxEv), joined);
+ eventTile = await this.getEventTileMarkup(this.createModifiedEvent(textForEvent(mxEv), mxEv), joined);
}
return eventTile;
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index 7079967d93..8ae92b17ee 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -20,6 +20,7 @@ import ThemeWatcher from "../../settings/watchers/ThemeWatcher";
const getExportCSS = async (): Promise<string> => {
const theme = new ThemeWatcher().getEffectiveTheme();
+ // eslint-disable-next-line camelcase
const hash = __webpack_hash__;
const bundle = await fetch(`bundles/${hash}/bundle.css`);
const bundleCSS = await bundle.text();
@@ -32,13 +33,14 @@ const getExportCSS = async (): Promise<string> => {
themeCSS = await res.text();
}
const fontFaceRegex = /@font-face {.*?}/sg;
- themeCSS.replace(fontFaceRegex, '');
- themeCSS.replace(
+
+ themeCSS = themeCSS.replace(fontFaceRegex, '');
+ themeCSS = themeCSS.replace(
/font-family: Inter/g,
`font-family: -apple-system, BlinkMacSystemFont, avenir next,
avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif`,
);
- themeCSS.replace(
+ themeCSS = themeCSS.replace(
/font-family: Inconsolata/g,
"font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace",
);
diff --git a/test/utils/export-test.tsx b/test/utils/export-test.tsx
index 279ebcff59..25bf17d0ea 100644
--- a/test/utils/export-test.tsx
+++ b/test/utils/export-test.tsx
@@ -37,6 +37,12 @@ describe('export', function() {
return MY_USER_ID;
};
+ const mockExportOptions: IExportOptions = {
+ numberOfMessages: 5,
+ maxSize: 100 * 1024 * 1024,
+ attachmentsIncluded: false,
+ };
+
const invalidExportOptions: IExportOptions[] = [
{
numberOfMessages: 10**9,
@@ -97,5 +103,29 @@ describe('export', function() {
}
}
});
+
+ it('tests the file extension splitter', function() {
+ const exporter = new PlainTextExporter(room, ExportTypes.BEGINNING, mockExportOptions, null);
+ const fileNameWithExtensions = {
+ "": ["", ""],
+ "name": ["name", ""],
+ "name.txt": ["name", ".txt"],
+ ".htpasswd": ["", ".htpasswd"],
+ "name.with.many.dots.myext": ["name.with.many.dots", ".myext"],
+ };
+ for (const fileName in fileNameWithExtensions) {
+ expect(exporter.splitFileName(fileName)).toStrictEqual(fileNameWithExtensions[fileName]);
+ }
+ });
+
+ // it('checks if the reply regex executes correctly', function() {
+ // const eventContents = [
+ // {
+ // "msgtype": "m.text",
+ // "body": "> <@me:here> Testing....\n\nTest",
+ // "expectedText": "",
+ // },
+ // ];
+ // });
});
From f00ab0460bde2e156d82c81c4484bba98228b0f3 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 4 Aug 2021 13:06:07 +0530
Subject: [PATCH 151/176] Delint
---
src/utils/exportUtils/exportCSS.ts | 6 ++++--
1 file changed, 4 insertions(+), 2 deletions(-)
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index 8ae92b17ee..1a3a575f07 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -14,14 +14,16 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-/* global __webpack_hash__ */
+/* eslint-disable max-len, camelcase */
+
+declare const __webpack_hash__: string;
import ThemeWatcher from "../../settings/watchers/ThemeWatcher";
const getExportCSS = async (): Promise<string> => {
const theme = new ThemeWatcher().getEffectiveTheme();
- // eslint-disable-next-line camelcase
const hash = __webpack_hash__;
+
const bundle = await fetch(`bundles/${hash}/bundle.css`);
const bundleCSS = await bundle.text();
let themeCSS: string;
From 850b5452a0ff62905b8387e0b650cfb68b93649e Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 9 Aug 2021 12:36:06 +0530
Subject: [PATCH 152/176] Add tests for reply regex
---
package.json | 2 +-
src/utils/exportUtils/Exporter.ts | 3 +-
src/utils/exportUtils/PlainTextExport.ts | 11 +++---
test/utils/export-test.tsx | 50 ++++++++++++++++++------
4 files changed, 45 insertions(+), 21 deletions(-)
diff --git a/package.json b/package.json
index 32f0db29f2..8f927c7bca 100644
--- a/package.json
+++ b/package.json
@@ -199,7 +199,7 @@
"decoderWorker\\.min\\.wasm": "<rootDir>/__mocks__/empty.js",
"waveWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
"workers/(.+)\\.worker\\.ts": "<rootDir>/__mocks__/workerMock.js",
- "^!!raw-loader!.*": "jest-raw-loader"
+ "^!!raw-loader!.*": "jest-raw-loader",
"RecorderWorklet": "<rootDir>/__mocks__/empty.js"
},
"transformIgnorePatterns": [
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index f975e76ddd..92f2c3e3d2 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -98,7 +98,8 @@ export default abstract class Exporter {
}
protected downloadPlainText(fileName: string, text: string) {
- saveAs(new Blob[text], fileName);
+ const content = new Blob([text], { type: "text" });
+ saveAs(content, fileName);
}
protected setEventMetadata(event: MatrixEvent): MatrixEvent {
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 7ab4748848..7421118470 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -16,7 +16,7 @@ limitations under the License.
import Exporter from "./Exporter";
import { Room } from "matrix-js-sdk/src/models/room";
-import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { IContent, MatrixEvent } from "matrix-js-sdk/src/models/event";
import { formatFullDateNoDay } from "../../DateUtils";
import { _t } from "../../languageHandler";
import { haveTileForEvent } from "../../components/views/rooms/EventTile";
@@ -42,10 +42,9 @@ export default class PlainTextExporter extends Exporter {
: _t("Media omitted - file size limit exceeded");
}
- public textForReplyEvent = (ev: MatrixEvent) => {
- const REPLY_REGEX = /> <(.*?)>(.*?)\n\n(.*)/;
+ public textForReplyEvent = (content: IContent) => {
+ const REPLY_REGEX = /> <(.*?)>(.*?)\n\n(.*)/s;
const REPLY_SOURCE_MAX_LENGTH = 32;
- const content = ev.getContent();
const match = REPLY_REGEX.exec(content.body);
@@ -55,7 +54,7 @@ export default class PlainTextExporter extends Exporter {
const rplName = match[1];
const rplText = match[3];
- rplSource = match[2].substring(1, REPLY_SOURCE_MAX_LENGTH);
+ rplSource = match[2].substring(1);
// Get the first non-blank line from the source.
const lines = rplSource.split('\n').filter((line) => !/^\s*$/.test(line));
if (lines.length > 0) {
@@ -99,7 +98,7 @@ export default class PlainTextExporter extends Exporter {
}
} else mediaText = ` (${this.mediaOmitText})`;
}
- if (this.isReply(mxEv)) return senderDisplayName + ": " + this.textForReplyEvent(mxEv) + mediaText;
+ if (this.isReply(mxEv)) return senderDisplayName + ": " + this.textForReplyEvent(mxEv.getContent()) + mediaText;
else return textForEvent(mxEv) + mediaText;
};
diff --git a/test/utils/export-test.tsx b/test/utils/export-test.tsx
index 25bf17d0ea..141fbe1280 100644
--- a/test/utils/export-test.tsx
+++ b/test/utils/export-test.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import { MatrixClient, Room } from "matrix-js-sdk";
+import { IContent, MatrixClient, Room } from "matrix-js-sdk";
import { MatrixClientPeg } from "../../src/MatrixClientPeg";
import { textForFormat, IExportOptions, ExportTypes } from "../../src/utils/exportUtils/exportUtils";
import '../skinned-sdk';
@@ -30,6 +30,10 @@ function generateRoomId() {
return '!' + Math.random().toString().slice(2, 10) + ':domain';
}
+interface ITestContent extends IContent {
+ expectedText: string;
+}
+
describe('export', function() {
stubClient();
client = MatrixClientPeg.get();
@@ -63,7 +67,7 @@ describe('export', function() {
const events = mkEvents();
const room = createRoom();
- console.log(events, room);
+ console.log(events);
function createRoom() {
const room = new Room(generateRoomId(), null, client.getUserId());
return room;
@@ -74,8 +78,8 @@ describe('export', function() {
const ts0 = Date.now();
for (let i = 0; i < 10; i++) {
events.push(TestUtilsMatrix.mkMessage({
- event: true, room: "!room:id", user: "@user:id",
- ts: ts0 + i * 1000,
+ event: true, room: "!room:id", user: "@user:id",
+ ts: ts0 + i * 1000,
}));
}
return events;
@@ -118,14 +122,34 @@ describe('export', function() {
}
});
- // it('checks if the reply regex executes correctly', function() {
- // const eventContents = [
- // {
- // "msgtype": "m.text",
- // "body": "> <@me:here> Testing....\n\nTest",
- // "expectedText": "",
- // },
- // ];
- // });
+ it('checks if the reply regex executes correctly', function() {
+ const eventContents: ITestContent[] = [
+ {
+ "msgtype": "m.text",
+ "body": "> <@me:here> Source\n\nReply",
+ "expectedText": "<@me:here \"Source\"> Reply",
+ },
+ {
+ "msgtype": "m.text",
+ // if the reply format is invalid, then return the original string as it is
+ "body": "Invalid reply format",
+ "expectedText": "Invalid reply format",
+ },
+ {
+ "msgtype": "m.text",
+ "body": "> <@me:here> The source is more than 32 characters\n\nReply",
+ "expectedText": "<@me:here \"The source is more than 32 chara...\"> Reply",
+ },
+ {
+ "msgtype": "m.text",
+ "body": "> <@me:here> This\nsource\nhas\nnew\nlines\n\nReply",
+ "expectedText": "<@me:here \"This\"> Reply",
+ },
+ ];
+ const exporter = new PlainTextExporter(room, ExportTypes.BEGINNING, mockExportOptions, null);
+ for (const content of eventContents) {
+ expect(exporter.textForReplyEvent(content)).toBe(content.expectedText);
+ }
+ });
});
From b3c03c9b68f0776f06c86c2a3614bfd09d8a35f5 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 9 Aug 2021 12:41:41 +0530
Subject: [PATCH 153/176] Fix lint errors
---
src/components/views/messages/MFileBody.tsx | 12 ++++++------
1 file changed, 6 insertions(+), 6 deletions(-)
diff --git a/src/components/views/messages/MFileBody.tsx b/src/components/views/messages/MFileBody.tsx
index 4fecaf0a5c..9c4a09e695 100644
--- a/src/components/views/messages/MFileBody.tsx
+++ b/src/components/views/messages/MFileBody.tsx
@@ -277,13 +277,13 @@ export default class MFileBody extends React.Component<IProps, IState> {
);
} else if (contentUrl) {
const downloadProps = {
- target: "_blank",
- rel: "noreferrer noopener",
+ target: "_blank",
+ rel: "noreferrer noopener",
- // We set the href regardless of whether or not we intercept the download
- // because we don't really want to convert the file to a blob eagerly, and
- // still want "open in new tab" and "save link as" to work.
- href: contentUrl,
+ // We set the href regardless of whether or not we intercept the download
+ // because we don't really want to convert the file to a blob eagerly, and
+ // still want "open in new tab" and "save link as" to work.
+ href: contentUrl,
};
// Blobs can only have up to 500mb, so if the file reports as being too large then
From 900accd823f3ea01db2d7595ec553add0e218609 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 9 Aug 2021 13:24:54 +0530
Subject: [PATCH 154/176] Add test for renderToString
---
src/utils/exportUtils/PlainTextExport.ts | 1 +
test/utils/export-test.tsx | 17 +++++++++++++----
2 files changed, 14 insertions(+), 4 deletions(-)
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 7421118470..86f714140e 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -48,6 +48,7 @@ export default class PlainTextExporter extends Exporter {
const match = REPLY_REGEX.exec(content.body);
+ // if the reply format is invalid, then return the body
if (!match) return content.body;
let rplSource: string;
diff --git a/test/utils/export-test.tsx b/test/utils/export-test.tsx
index 141fbe1280..1b8fc9c31b 100644
--- a/test/utils/export-test.tsx
+++ b/test/utils/export-test.tsx
@@ -14,13 +14,15 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import { IContent, MatrixClient, Room } from "matrix-js-sdk";
+import { IContent, MatrixClient, MatrixEvent, Room } from "matrix-js-sdk";
import { MatrixClientPeg } from "../../src/MatrixClientPeg";
import { textForFormat, IExportOptions, ExportTypes } from "../../src/utils/exportUtils/exportUtils";
import '../skinned-sdk';
import PlainTextExporter from "../../src/utils/exportUtils/PlainTextExport";
+import HTMLExporter from "../../src/utils/exportUtils/HtmlExport";
import * as TestUtilsMatrix from '../test-utils';
import { stubClient } from '../test-utils';
+import { renderToString } from "react-dom/server";
let client: MatrixClient;
@@ -65,9 +67,8 @@ describe('export', function() {
},
];
- const events = mkEvents();
+ const events: MatrixEvent[] = mkEvents();
const room = createRoom();
- console.log(events);
function createRoom() {
const room = new Room(generateRoomId(), null, client.getUserId());
return room;
@@ -131,7 +132,7 @@ describe('export', function() {
},
{
"msgtype": "m.text",
- // if the reply format is invalid, then return the original string as it is
+ // if the reply format is invalid, then return the body
"body": "Invalid reply format",
"expectedText": "Invalid reply format",
},
@@ -151,5 +152,13 @@ describe('export', function() {
expect(exporter.textForReplyEvent(content)).toBe(content.expectedText);
}
});
+
+ it('checks if the render to string works for eventTile', function() {
+ // Todo: Generate different event types
+ const exporter = new HTMLExporter(room, ExportTypes.BEGINNING, mockExportOptions, null);
+ for (const event of events) {
+ expect(renderToString(exporter.getEventTile(event, false))).toBeTruthy();
+ }
+ });
});
From ecf0aba97ce42fcf124125398d747da2bb329886 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 10 Aug 2021 12:25:11 +0530
Subject: [PATCH 155/176] Test for different types of events
---
src/utils/exportUtils/HtmlExport.tsx | 15 ++--
test/test-utils.js | 6 +-
test/utils/export-test.tsx | 101 +++++++++++++++++++++++----
3 files changed, 104 insertions(+), 18 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 124914a210..daa411826e 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -303,13 +303,17 @@ export default class HTMLExporter extends Exporter {
return eventTileMarkup;
}
- protected createModifiedEvent(text: string, mxEv: MatrixEvent) {
+ protected createModifiedEvent(text: string, mxEv: MatrixEvent, italic=true) {
const modifiedContent = {
msgtype: "m.text",
- body: `*${text}*`,
+ body: `${text}`,
format: "org.matrix.custom.html",
- formatted_body: `<em>${text}</em>`,
+ formatted_body: `${text}`,
};
+ if (italic) {
+ modifiedContent.formatted_body = '<em>' + modifiedContent.formatted_body + '</em>';
+ modifiedContent.body = '*' + modifiedContent.body + '*';
+ }
const modifiedEvent = new MatrixEvent();
modifiedEvent.event = mxEv.event;
modifiedEvent.sender = mxEv.sender;
@@ -356,7 +360,10 @@ export default class HTMLExporter extends Exporter {
} catch (e) {
// TODO: Handle callEvent errors
console.error(e);
- eventTile = await this.getEventTileMarkup(this.createModifiedEvent(textForEvent(mxEv), mxEv), joined);
+ eventTile = await this.getEventTileMarkup(
+ this.createModifiedEvent(textForEvent(mxEv), mxEv, false),
+ joined,
+ );
}
return eventTile;
diff --git a/test/test-utils.js b/test/test-utils.js
index d25fbe5207..46b8e9bbc9 100644
--- a/test/test-utils.js
+++ b/test/test-utils.js
@@ -113,6 +113,7 @@ export function createTestClient() {
* @param {number=} opts.ts Optional. Timestamp for the event
* @param {Object} opts.content The event.content
* @param {boolean} opts.event True to make a MatrixEvent.
+ * @param {unsigned=} opts.unsigned
* @return {Object} a JSON object representing this event.
*/
export function mkEvent(opts) {
@@ -167,12 +168,13 @@ export function mkPresence(opts) {
* @param {string} opts.room The room ID for the event.
* @param {string} opts.mship The content.membership for the event.
* @param {string} opts.prevMship The prev_content.membership for the event.
+ * @param {number=} opts.ts Optional. Timestamp for the event
* @param {string} opts.user The user ID for the event.
* @param {RoomMember} opts.target The target of the event.
- * @param {string} opts.skey The other user ID for the event if applicable
+ * @param {string=} opts.skey The other user ID for the event if applicable
* e.g. for invites/bans.
* @param {string} opts.name The content.displayname for the event.
- * @param {string} opts.url The content.avatar_url for the event.
+ * @param {string=} opts.url The content.avatar_url for the event.
* @param {boolean} opts.event True to make a MatrixEvent.
* @return {Object|MatrixEvent} The event
*/
diff --git a/test/utils/export-test.tsx b/test/utils/export-test.tsx
index 1b8fc9c31b..e3811ea957 100644
--- a/test/utils/export-test.tsx
+++ b/test/utils/export-test.tsx
@@ -67,25 +67,103 @@ describe('export', function() {
},
];
- const events: MatrixEvent[] = mkEvents();
- const room = createRoom();
function createRoom() {
const room = new Room(generateRoomId(), null, client.getUserId());
return room;
}
+ const mockRoom = createRoom();
function mkEvents() {
- const events = [];
+ const matrixEvents = [];
const ts0 = Date.now();
- for (let i = 0; i < 10; i++) {
- events.push(TestUtilsMatrix.mkMessage({
+ let i: number;
+ // plain text
+ for (i = 0; i < 10; i++) {
+ matrixEvents.push(TestUtilsMatrix.mkMessage({
event: true, room: "!room:id", user: "@user:id",
ts: ts0 + i * 1000,
}));
}
- return events;
+ // reply events
+ for (i = 0; i < 10; i++) {
+ matrixEvents.push(TestUtilsMatrix.mkEvent({
+ "content": {
+ "body": "> <@me:here> Hi\n\nTest",
+ "format": "org.matrix.custom.html",
+ "m.relates_to": {
+ "m.in_reply_to": {
+ "event_id": "$" + Math.random() + "-" + Math.random(),
+ },
+ },
+ "msgtype": "m.text",
+ },
+ "user": "@me:here",
+ "type": "m.room.message",
+ "room": mockRoom.roomId,
+ "event": true,
+ }));
+ }
+ // membership events
+ for (i = 0; i < 10; i++) {
+ matrixEvents.push(TestUtilsMatrix.mkMembership({
+ event: true, room: "!room:id", user: "@user:id",
+ target: {
+ userId: "@user:id",
+ name: "Bob",
+ getAvatarUrl: () => {
+ return "avatar.jpeg";
+ },
+ getMxcAvatarUrl: () => 'mxc://avatar.url/image.png',
+ },
+ ts: ts0 + i*1000,
+ mship: 'join',
+ prevMship: 'join',
+ name: 'A user',
+ }));
+ }
+ // emote
+ matrixEvents.push(TestUtilsMatrix.mkEvent({
+ "content": {
+ "body": "waves",
+ "msgtype": "m.emote",
+ },
+ "user": "@me:here",
+ "type": "m.room.message",
+ "room": mockRoom.roomId,
+ "event": true,
+ }));
+ // redacted events
+ for (i = 0; i < 10; i++) {
+ matrixEvents.push(new MatrixEvent({
+ type: "m.room.message",
+ sender: MY_USER_ID,
+ content: {},
+ unsigned: {
+ "age": 72,
+ "transaction_id": "m1212121212.23",
+ "redacted_because": {
+ "content": {},
+ "origin_server_ts": ts0 + i*1000,
+ "redacts": "$9999999999999999999999999999999999999999998",
+ "sender": "@me:here",
+ "type": "m.room.redaction",
+ "unsigned": {
+ "age": 94,
+ "transaction_id": "m1111111111.1",
+ },
+ "event_id": "$9999999999999999999999999999999999999999998",
+ "room_id": mockRoom.roomId,
+ },
+ },
+ event_id: "$9999999999999999999999999999999999999999999",
+ room_id: mockRoom.roomId,
+ }));
+ }
+ return matrixEvents;
}
+ const events: MatrixEvent[] = mkEvents();
+
it('checks if the export format is valid', function() {
expect(textForFormat('HTML')).toBeTruthy();
expect(textForFormat('JSON')).toBeTruthy();
@@ -101,7 +179,7 @@ describe('export', function() {
it('checks if the export options are valid', function() {
for (const exportOption of invalidExportOptions) {
try {
- new PlainTextExporter(room, ExportTypes.BEGINNING, exportOption, null);
+ new PlainTextExporter(mockRoom, ExportTypes.BEGINNING, exportOption, null);
throw new Error("Expected to throw an error");
} catch (e) {
expect(e.message).toBe("Invalid export options");
@@ -110,7 +188,7 @@ describe('export', function() {
});
it('tests the file extension splitter', function() {
- const exporter = new PlainTextExporter(room, ExportTypes.BEGINNING, mockExportOptions, null);
+ const exporter = new PlainTextExporter(mockRoom, ExportTypes.BEGINNING, mockExportOptions, null);
const fileNameWithExtensions = {
"": ["", ""],
"name": ["name", ""],
@@ -147,15 +225,14 @@ describe('export', function() {
"expectedText": "<@me:here \"This\"> Reply",
},
];
- const exporter = new PlainTextExporter(room, ExportTypes.BEGINNING, mockExportOptions, null);
+ const exporter = new PlainTextExporter(mockRoom, ExportTypes.BEGINNING, mockExportOptions, null);
for (const content of eventContents) {
expect(exporter.textForReplyEvent(content)).toBe(content.expectedText);
}
});
- it('checks if the render to string works for eventTile', function() {
- // Todo: Generate different event types
- const exporter = new HTMLExporter(room, ExportTypes.BEGINNING, mockExportOptions, null);
+ it("checks if the render to string doesn't throw any error for different kinds of strings", function() {
+ const exporter = new HTMLExporter(mockRoom, ExportTypes.BEGINNING, mockExportOptions, null);
for (const event of events) {
expect(renderToString(exporter.getEventTile(event, false))).toBeTruthy();
}
From e396dcfb102c8182766f2de0d674e63b5ee9712e Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 10 Aug 2021 13:22:40 +0530
Subject: [PATCH 156/176] Remove @types/streamsaver
---
package.json | 1 -
.../views/elements/EventListSummary.tsx | 1 -
test/utils/export-test.tsx | 2 +-
yarn.lock | 15 +++++----------
4 files changed, 6 insertions(+), 13 deletions(-)
diff --git a/package.json b/package.json
index 8f927c7bca..6927fd627d 100644
--- a/package.json
+++ b/package.json
@@ -147,7 +147,6 @@
"@types/react-dom": "^17.0.2",
"@types/react-transition-group": "^4.4.0",
"@types/sanitize-html": "^2.3.1",
- "@types/streamsaver": "^2.0.1",
"@types/zxcvbn": "^4.4.0",
"@typescript-eslint/eslint-plugin": "^4.17.0",
"@typescript-eslint/parser": "^4.17.0",
diff --git a/src/components/views/elements/EventListSummary.tsx b/src/components/views/elements/EventListSummary.tsx
index c5630f8346..cbb0e17b42 100644
--- a/src/components/views/elements/EventListSummary.tsx
+++ b/src/components/views/elements/EventListSummary.tsx
@@ -81,7 +81,6 @@ const EventListSummary: React.FC<IProps> = ({
</React.Fragment>;
} else {
const avatars = summaryMembers.map((m) => <MemberAvatar key={m.userId} member={m} width={14} height={14} />);
-
body = (
<div className="mx_EventTile_line">
<div className="mx_EventTile_info">
diff --git a/test/utils/export-test.tsx b/test/utils/export-test.tsx
index e3811ea957..437dcbbd60 100644
--- a/test/utils/export-test.tsx
+++ b/test/utils/export-test.tsx
@@ -231,7 +231,7 @@ describe('export', function() {
}
});
- it("checks if the render to string doesn't throw any error for different kinds of strings", function() {
+ it("checks if the render to string doesn't throw any error for different types of events", function() {
const exporter = new HTMLExporter(mockRoom, ExportTypes.BEGINNING, mockExportOptions, null);
for (const event of events) {
expect(renderToString(exporter.getEventTile(event, false))).toBeTruthy();
diff --git a/yarn.lock b/yarn.lock
index 348f120f18..6f24e45f81 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1785,11 +1785,6 @@
resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
-"@types/streamsaver@^2.0.1":
- version "2.0.1"
- resolved "https://registry.yarnpkg.com/@types/streamsaver/-/streamsaver-2.0.1.tgz#fa5e5b891d1b282be3078c232a30ee004b8e0be0"
- integrity sha512-I49NtT8w6syBI3Zg3ixCyygTHoTVMY0z2TMRcTgccdIsVd2MwlKk7ITLHLsJtgchUHcOd7QEARG9h0ifcA6l2Q==
-
"@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2":
version "2.0.6"
resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
@@ -2348,16 +2343,16 @@ bcrypt-pbkdf@^1.0.0:
dependencies:
tweetnacl "^0.14.3"
-big.js@^5.2.2:
- version "5.2.2"
- resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
- integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
-
before-after-hook@^2.2.0:
version "2.2.2"
resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-2.2.2.tgz#a6e8ca41028d90ee2c24222f201c90956091613e"
integrity sha512-3pZEU3NT5BFUo/AD5ERPWOgQOCZITni6iavr5AUw5AUwQjMlI0kzu5btnyD39AF0gUEsDPwJT+oY1ORBJijPjQ==
+big.js@^5.2.2:
+ version "5.2.2"
+ resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
+ integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
+
binary-extensions@^1.0.0:
version "1.13.1"
resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.1.tgz#598afe54755b2868a5330d2aff9d4ebb53209b65"
From edfc8af6cf93a1a6884c244e965434cc0e7aeef2 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 13 Aug 2021 08:30:50 +0530
Subject: [PATCH 157/176] Apply PR Suggestions
---
src/components/views/dialogs/ExportDialog.tsx | 32 +--
src/components/views/messages/MFileBody.tsx | 182 +++++++++---------
src/utils/exportUtils/Exporter.ts | 17 +-
src/utils/exportUtils/HtmlExport.tsx | 4 +-
src/utils/exportUtils/JSONExport.ts | 10 +-
src/utils/exportUtils/PlainTextExport.ts | 4 +-
src/utils/exportUtils/exportUtils.ts | 28 +--
test/utils/export-test.tsx | 10 +-
8 files changed, 143 insertions(+), 144 deletions(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 5ebe6ed7c5..6116faf1e1 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -24,8 +24,8 @@ import Field from "../elements/Field";
import StyledRadioGroup from "../elements/StyledRadioGroup";
import StyledCheckbox from "../elements/StyledCheckbox";
import {
- ExportFormats,
- ExportTypes,
+ ExportFormat,
+ ExportType,
textForFormat,
textForType,
} from "../../../utils/exportUtils/exportUtils";
@@ -42,8 +42,8 @@ interface IProps extends IDialogProps {
}
const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
- const [exportFormat, setExportFormat] = useState(ExportFormats.HTML);
- const [exportType, setExportType] = useState(ExportTypes.TIMELINE);
+ const [exportFormat, setExportFormat] = useState(ExportFormat.Html);
+ const [exportType, setExportType] = useState(ExportType.Timeline);
const [includeAttachments, setAttachments] = useState(false);
const [isExporting, setExporting] = useState(false);
const [numberOfMessages, setNumberOfMessages] = useState<number>(100);
@@ -70,31 +70,31 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
maxSize: sizeLimit * 1024 * 1024,
};
switch (exportFormat) {
- case ExportFormats.HTML:
+ case ExportFormat.Html:
setExporter(
new HTMLExporter(
room,
- ExportTypes[exportType],
+ ExportType[exportType],
exportOptions,
exportProgressRef,
),
);
break;
- case ExportFormats.JSON:
+ case ExportFormat.Json:
setExporter(
new JSONExporter(
room,
- ExportTypes[exportType],
+ ExportType[exportType],
exportOptions,
exportProgressRef,
),
);
break;
- case ExportFormats.PLAIN_TEXT:
+ case ExportFormat.PlainText:
setExporter(
new PlainTextExporter(
room,
- ExportTypes[exportType],
+ ExportType[exportType],
exportOptions,
exportProgressRef,
),
@@ -114,7 +114,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
sizeLimitRef.current.validate({ focused: true });
return;
}
- if (exportType === ExportTypes.LAST_N_MESSAGES) {
+ if (exportType === ExportType.LastNMessages) {
const isValidNumberOfMessages =
await messageCountRef.current.validate({ focused: false });
if (!isValidNumberOfMessages) {
@@ -202,12 +202,12 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
});
};
- const exportFormatOptions = Object.keys(ExportFormats).map((format) => ({
+ const exportFormatOptions = Object.keys(ExportFormat).map((format) => ({
value: format,
label: textForFormat(format),
}));
- const exportTypeOptions = Object.keys(ExportTypes).map((type) => {
+ const exportTypeOptions = Object.keys(ExportType).map((type) => {
return (
<option key={type} value={type}>
{ textForType(type) }
@@ -216,7 +216,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
});
let messageCount = null;
- if (exportType === ExportTypes.LAST_N_MESSAGES) {
+ if (exportType === ExportType.LastNMessages) {
messageCount = (
<Field
element="input"
@@ -322,7 +322,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
<StyledRadioGroup
name="exportFormat"
value={exportFormat}
- onChange={(key) => setExportFormat(ExportFormats[key])}
+ onChange={(key) => setExportFormat(ExportFormat[key])}
definitions={exportFormatOptions}
/>
@@ -334,7 +334,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
element="select"
value={exportType}
onChange={(e) => {
- setExportType(ExportTypes[e.target.value]);
+ setExportType(ExportType[e.target.value]);
}}
>
{ exportTypeOptions }
diff --git a/src/components/views/messages/MFileBody.tsx b/src/components/views/messages/MFileBody.tsx
index 9c4a09e695..1f079cd1e2 100644
--- a/src/components/views/messages/MFileBody.tsx
+++ b/src/components/views/messages/MFileBody.tsx
@@ -222,125 +222,125 @@ export default class MFileBody extends React.Component<IProps, IState> {
{ placeholder }
</a>
</span>;
- } else {
- const showDownloadLink = this.props.tileShape || !this.props.showGenericPlaceholder;
+ }
- if (isEncrypted) {
- if (!this.state.decryptedBlob) {
+ const showDownloadLink = this.props.tileShape || !this.props.showGenericPlaceholder;
+
+ if (isEncrypted) {
+ if (!this.state.decryptedBlob) {
// Need to decrypt the attachment
// Wait for the user to click on the link before downloading
// and decrypting the attachment.
- // This button should actually Download because usercontent/ will try to click itself
- // but it is not guaranteed between various browsers' settings.
- return (
- <span className="mx_MFileBody">
- { placeholder }
- { showDownloadLink && <div className="mx_MFileBody_download">
- <AccessibleButton onClick={this.decryptFile}>
- { _t("Decrypt %(text)s", { text: this.linkText }) }
- </AccessibleButton>
- </div> }
- </span>
- );
- }
-
- const url = "usercontent/"; // XXX: this path should probably be passed from the skin
-
- // If the attachment is encrypted then put the link inside an iframe.
+ // This button should actually Download because usercontent/ will try to click itself
+ // but it is not guaranteed between various browsers' settings.
return (
<span className="mx_MFileBody">
{ placeholder }
{ showDownloadLink && <div className="mx_MFileBody_download">
- <div style={{ display: "none" }}>
- { /*
+ <AccessibleButton onClick={this.decryptFile}>
+ { _t("Decrypt %(text)s", { text: this.linkText }) }
+ </AccessibleButton>
+ </div> }
+ </span>
+ );
+ }
+
+ const url = "usercontent/"; // XXX: this path should probably be passed from the skin
+
+ // If the attachment is encrypted then put the link inside an iframe.
+ return (
+ <span className="mx_MFileBody">
+ { placeholder }
+ { showDownloadLink && <div className="mx_MFileBody_download">
+ <div style={{ display: "none" }}>
+ { /*
* Add dummy copy of the "a" tag
* We'll use it to learn how the download link
* would have been styled if it was rendered inline.
*/ }
- <a ref={this.dummyLink} />
- </div>
- { /*
+ <a ref={this.dummyLink} />
+ </div>
+ { /*
TODO: Move iframe (and dummy link) into FileDownloader.
We currently have it set up this way because of styles applied to the iframe
itself which cannot be easily handled/overridden by the FileDownloader. In
future, the download link may disappear entirely at which point it could also
be suitable to just remove this bit of code.
*/ }
- <iframe
- src={url}
- onLoad={() => this.downloadFile(this.fileName, this.linkText)}
- ref={this.iframe}
- sandbox="allow-scripts allow-downloads allow-downloads-without-user-activation" />
- </div> }
- </span>
- );
- } else if (contentUrl) {
- const downloadProps = {
- target: "_blank",
- rel: "noreferrer noopener",
+ <iframe
+ src={url}
+ onLoad={() => this.downloadFile(this.fileName, this.linkText)}
+ ref={this.iframe}
+ sandbox="allow-scripts allow-downloads allow-downloads-without-user-activation" />
+ </div> }
+ </span>
+ );
+ } else if (contentUrl) {
+ const downloadProps = {
+ target: "_blank",
+ rel: "noreferrer noopener",
- // We set the href regardless of whether or not we intercept the download
- // because we don't really want to convert the file to a blob eagerly, and
- // still want "open in new tab" and "save link as" to work.
- href: contentUrl,
- };
+ // We set the href regardless of whether or not we intercept the download
+ // because we don't really want to convert the file to a blob eagerly, and
+ // still want "open in new tab" and "save link as" to work.
+ href: contentUrl,
+ };
- // Blobs can only have up to 500mb, so if the file reports as being too large then
- // we won't try and convert it. Likewise, if the file size is unknown then we'll assume
- // it is too big. There is the risk of the reported file size and the actual file size
- // being different, however the user shouldn't normally run into this problem.
- const fileTooBig = typeof(fileSize) === 'number' ? fileSize > 524288000 : true;
+ // Blobs can only have up to 500mb, so if the file reports as being too large then
+ // we won't try and convert it. Likewise, if the file size is unknown then we'll assume
+ // it is too big. There is the risk of the reported file size and the actual file size
+ // being different, however the user shouldn't normally run into this problem.
+ const fileTooBig = typeof(fileSize) === 'number' ? fileSize > 524288000 : true;
- if (["application/pdf"].includes(fileType) && !fileTooBig) {
+ if (["application/pdf"].includes(fileType) && !fileTooBig) {
// We want to force a download on this type, so use an onClick handler.
- downloadProps["onClick"] = (e) => {
- console.log(`Downloading ${fileType} as blob (unencrypted)`);
+ downloadProps["onClick"] = (e) => {
+ console.log(`Downloading ${fileType} as blob (unencrypted)`);
- // Avoid letting the <a> do its thing
- e.preventDefault();
- e.stopPropagation();
+ // Avoid letting the <a> do its thing
+ e.preventDefault();
+ e.stopPropagation();
- // Start a fetch for the download
- // Based upon https://stackoverflow.com/a/49500465
- this.props.mediaEventHelper.sourceBlob.value.then((blob) => {
- const blobUrl = URL.createObjectURL(blob);
+ // Start a fetch for the download
+ // Based upon https://stackoverflow.com/a/49500465
+ this.props.mediaEventHelper.sourceBlob.value.then((blob) => {
+ const blobUrl = URL.createObjectURL(blob);
- // We have to create an anchor to download the file
- const tempAnchor = document.createElement('a');
- tempAnchor.download = this.fileName;
- tempAnchor.href = blobUrl;
- document.body.appendChild(tempAnchor); // for firefox: https://stackoverflow.com/a/32226068
- tempAnchor.click();
- tempAnchor.remove();
- });
- };
- } else {
- // Else we are hoping the browser will do the right thing
- downloadProps["download"] = this.fileName;
- }
-
- return (
- <span className="mx_MFileBody">
- { placeholder }
- { showDownloadLink && <div className="mx_MFileBody_download">
- <a {...downloadProps}>
- <span className="mx_MFileBody_download_icon" />
- { _t("Download %(text)s", { text: this.linkText }) }
- </a>
- { this.props.tileShape === TileShape.FileGrid && <div className="mx_MImageBody_size">
- { this.content.info && this.content.info.size ? filesize(this.content.info.size) : "" }
- </div> }
- </div> }
- </span>
- );
+ // We have to create an anchor to download the file
+ const tempAnchor = document.createElement('a');
+ tempAnchor.download = this.fileName;
+ tempAnchor.href = blobUrl;
+ document.body.appendChild(tempAnchor); // for firefox: https://stackoverflow.com/a/32226068
+ tempAnchor.click();
+ tempAnchor.remove();
+ });
+ };
} else {
- const extra = this.linkText ? (': ' + this.linkText) : '';
- return <span className="mx_MFileBody">
- { placeholder }
- { _t("Invalid file%(extra)s", { extra: extra }) }
- </span>;
+ // Else we are hoping the browser will do the right thing
+ downloadProps["download"] = this.fileName;
}
+
+ return (
+ <span className="mx_MFileBody">
+ { placeholder }
+ { showDownloadLink && <div className="mx_MFileBody_download">
+ <a {...downloadProps}>
+ <span className="mx_MFileBody_download_icon" />
+ { _t("Download %(text)s", { text: this.linkText }) }
+ </a>
+ { this.props.tileShape === TileShape.FileGrid && <div className="mx_MImageBody_size">
+ { this.content.info && this.content.info.size ? filesize(this.content.info.size) : "" }
+ </div> }
+ </div> }
+ </span>
+ );
+ } else {
+ const extra = this.linkText ? (': ' + this.linkText) : '';
+ return <span className="mx_MFileBody">
+ { placeholder }
+ { _t("Invalid file%(extra)s", { extra: extra }) }
+ </span>;
}
}
}
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 92f2c3e3d2..920d690174 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -17,7 +17,7 @@ limitations under the License.
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixClientPeg } from "../../MatrixClientPeg";
-import { IExportOptions, ExportTypes } from "./exportUtils";
+import { IExportOptions, ExportType } from "./exportUtils";
import { decryptFile } from "../DecryptFile";
import { mediaFromContent } from "../../customisations/Media";
import { formatFullDateNoDay } from "../../DateUtils";
@@ -38,13 +38,14 @@ export default abstract class Exporter {
protected constructor(
protected room: Room,
- protected exportType: ExportTypes,
+ protected exportType: ExportType,
protected exportOptions: IExportOptions,
protected exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
- if (exportOptions.maxSize < 1 * 1024 * 1024||
- exportOptions.maxSize > 2000 * 1024 * 1024||
- exportOptions.numberOfMessages > 10**8) {
+ if (exportOptions.maxSize < 1 * 1024 * 1024|| // Less than 1 MB
+ exportOptions.maxSize > 2000 * 1024 * 1024|| // More than ~ 2 GB
+ exportOptions.numberOfMessages > 10**8
+ ) {
throw new Error("Invalid export options");
}
this.cancelled = false;
@@ -118,10 +119,10 @@ export default abstract class Exporter {
public getLimit(): number {
let limit: number;
switch (this.exportType) {
- case ExportTypes.LAST_N_MESSAGES:
+ case ExportType.LastNMessages:
limit = this.exportOptions.numberOfMessages;
break;
- case ExportTypes.TIMELINE:
+ case ExportType.Timeline:
limit = 40;
break;
default:
@@ -166,7 +167,7 @@ export default abstract class Exporter {
events.push(mxEv);
}
this.updateProgress(
- ("Fetched " + events.length + " events ") + (this.exportType === ExportTypes.LAST_N_MESSAGES
+ ("Fetched " + events.length + " events ") + (this.exportType === ExportType.LastNMessages
? `out of ${this.exportOptions.numberOfMessages}`
: "so far"),
);
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index daa411826e..6cdbae6c48 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -32,7 +32,7 @@ import DateSeparator from "../../components/views/messages/DateSeparator";
import BaseAvatar from "../../components/views/avatars/BaseAvatar";
import exportJS from "!!raw-loader!./exportJS";
import exportIcons from "./exportIcons";
-import { ExportTypes } from "./exportUtils";
+import { ExportType } from "./exportUtils";
import { IExportOptions } from "./exportUtils";
import MatrixClientContext from "../../contexts/MatrixClientContext";
import getExportCSS from "./exportCSS";
@@ -46,7 +46,7 @@ export default class HTMLExporter extends Exporter {
constructor(
room: Room,
- exportType: ExportTypes,
+ exportType: ExportType,
exportOptions: IExportOptions,
exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index 356f4282db..a2273ad918 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -19,24 +19,22 @@ import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { formatFullDateNoDay, formatFullDateNoDayNoTime } from "../../DateUtils";
import { haveTileForEvent } from "../../components/views/rooms/EventTile";
-import { ExportTypes } from "./exportUtils";
+import { ExportType } from "./exportUtils";
import { IExportOptions } from "./exportUtils";
import { EventType } from "matrix-js-sdk/src/@types/event";
import { MutableRefObject } from "react";
export default class JSONExporter extends Exporter {
- protected totalSize: number;
- protected messages: any[];
+ protected totalSize = 0;
+ protected messages: any[] = [];
constructor(
room: Room,
- exportType: ExportTypes,
+ exportType: ExportType,
exportOptions: IExportOptions,
exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
super(room, exportType, exportOptions, exportProgressRef);
- this.totalSize = 0;
- this.messages = [];
}
protected createJSONString(): string {
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 86f714140e..23ed6c7bbd 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -20,7 +20,7 @@ import { IContent, MatrixEvent } from "matrix-js-sdk/src/models/event";
import { formatFullDateNoDay } from "../../DateUtils";
import { _t } from "../../languageHandler";
import { haveTileForEvent } from "../../components/views/rooms/EventTile";
-import { ExportTypes } from "./exportUtils";
+import { ExportType } from "./exportUtils";
import { IExportOptions } from "./exportUtils";
import { textForEvent } from "../../TextForEvent";
import { MutableRefObject } from "react";
@@ -31,7 +31,7 @@ export default class PlainTextExporter extends Exporter {
constructor(
room: Room,
- exportType: ExportTypes,
+ exportType: ExportType,
exportOptions: IExportOptions,
exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 8410b747ea..2f6e2c2cbc 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -16,26 +16,26 @@ limitations under the License.
import { _t } from "../../languageHandler";
-export enum ExportFormats {
- HTML = "HTML",
- PLAIN_TEXT = "PLAIN_TEXT",
- JSON = "JSON",
+export enum ExportFormat {
+ Html = "HTML",
+ PlainText = "PLAIN_TEXT",
+ Json = "JSON",
}
-export enum ExportTypes {
- TIMELINE = "TIMELINE",
- BEGINNING = "BEGINNING",
- LAST_N_MESSAGES = "LAST_N_MESSAGES",
+export enum ExportType {
+ Timeline = "TIMELINE",
+ Beginning = "BEGINNING",
+ LastNMessages = "LAST_N_MESSAGES",
// START_DATE = "START_DATE",
}
export const textForFormat = (format: string): string => {
switch (format) {
- case ExportFormats.HTML:
+ case ExportFormat.Html:
return _t("HTML");
- case ExportFormats.JSON:
+ case ExportFormat.Json:
return _t("JSON");
- case ExportFormats.PLAIN_TEXT:
+ case ExportFormat.PlainText:
return _t("Plain Text");
default:
throw new Error("Unknown format");
@@ -44,11 +44,11 @@ export const textForFormat = (format: string): string => {
export const textForType = (type: string): string => {
switch (type) {
- case ExportTypes.BEGINNING:
+ case ExportType.Beginning:
return _t("From the beginning");
- case ExportTypes.LAST_N_MESSAGES:
+ case ExportType.LastNMessages:
return _t("Specify a number of messages");
- case ExportTypes.TIMELINE:
+ case ExportType.Timeline:
return _t("Current Timeline");
default:
throw new Error("Unknown type: " + type);
diff --git a/test/utils/export-test.tsx b/test/utils/export-test.tsx
index 437dcbbd60..c23f15c24b 100644
--- a/test/utils/export-test.tsx
+++ b/test/utils/export-test.tsx
@@ -16,7 +16,7 @@ limitations under the License.
import { IContent, MatrixClient, MatrixEvent, Room } from "matrix-js-sdk";
import { MatrixClientPeg } from "../../src/MatrixClientPeg";
-import { textForFormat, IExportOptions, ExportTypes } from "../../src/utils/exportUtils/exportUtils";
+import { textForFormat, IExportOptions, ExportType } from "../../src/utils/exportUtils/exportUtils";
import '../skinned-sdk';
import PlainTextExporter from "../../src/utils/exportUtils/PlainTextExport";
import HTMLExporter from "../../src/utils/exportUtils/HtmlExport";
@@ -179,7 +179,7 @@ describe('export', function() {
it('checks if the export options are valid', function() {
for (const exportOption of invalidExportOptions) {
try {
- new PlainTextExporter(mockRoom, ExportTypes.BEGINNING, exportOption, null);
+ new PlainTextExporter(mockRoom, ExportType.Beginning, exportOption, null);
throw new Error("Expected to throw an error");
} catch (e) {
expect(e.message).toBe("Invalid export options");
@@ -188,7 +188,7 @@ describe('export', function() {
});
it('tests the file extension splitter', function() {
- const exporter = new PlainTextExporter(mockRoom, ExportTypes.BEGINNING, mockExportOptions, null);
+ const exporter = new PlainTextExporter(mockRoom, ExportType.Beginning, mockExportOptions, null);
const fileNameWithExtensions = {
"": ["", ""],
"name": ["name", ""],
@@ -225,14 +225,14 @@ describe('export', function() {
"expectedText": "<@me:here \"This\"> Reply",
},
];
- const exporter = new PlainTextExporter(mockRoom, ExportTypes.BEGINNING, mockExportOptions, null);
+ const exporter = new PlainTextExporter(mockRoom, ExportType.Beginning, mockExportOptions, null);
for (const content of eventContents) {
expect(exporter.textForReplyEvent(content)).toBe(content.expectedText);
}
});
it("checks if the render to string doesn't throw any error for different types of events", function() {
- const exporter = new HTMLExporter(mockRoom, ExportTypes.BEGINNING, mockExportOptions, null);
+ const exporter = new HTMLExporter(mockRoom, ExportType.Beginning, mockExportOptions, null);
for (const event of events) {
expect(renderToString(exporter.getEventTile(event, false))).toBeTruthy();
}
From 9cbdc4a6136ab8c0a4ed87dcd9b2fe5a882af183 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 13 Aug 2021 08:34:54 +0530
Subject: [PATCH 158/176] Use throw error instead of try-catch
---
test/utils/export-test.tsx | 17 +++++------------
1 file changed, 5 insertions(+), 12 deletions(-)
diff --git a/test/utils/export-test.tsx b/test/utils/export-test.tsx
index c23f15c24b..c4d9b43765 100644
--- a/test/utils/export-test.tsx
+++ b/test/utils/export-test.tsx
@@ -168,22 +168,15 @@ describe('export', function() {
expect(textForFormat('HTML')).toBeTruthy();
expect(textForFormat('JSON')).toBeTruthy();
expect(textForFormat('PLAIN_TEXT')).toBeTruthy();
- try {
- textForFormat('PDF');
- throw new Error("Expected to throw an error");
- } catch (e) {
- expect(e.message).toBe("Unknown format");
- }
+ expect(() => textForFormat('PDF')).toThrowError("Unknown format");
});
it('checks if the export options are valid', function() {
for (const exportOption of invalidExportOptions) {
- try {
- new PlainTextExporter(mockRoom, ExportType.Beginning, exportOption, null);
- throw new Error("Expected to throw an error");
- } catch (e) {
- expect(e.message).toBe("Invalid export options");
- }
+ expect(
+ () =>
+ new PlainTextExporter(mockRoom, ExportType.Beginning, exportOption, null),
+ ).toThrowError("Invalid export options");
}
});
From dda24da20435a0d0b701199dfa9769614b50c47b Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 13 Aug 2021 08:59:14 +0530
Subject: [PATCH 159/176] Add copyright headers
---
src/components/views/dialogs/ExportDialog.tsx | 12 ++++++------
src/utils/exportUtils/exportIcons.ts | 16 ++++++++++++++++
src/utils/exportUtils/exportJS.js | 17 +++++++++++++++++
src/utils/exportUtils/exportUtils.ts | 16 ++++++++--------
4 files changed, 47 insertions(+), 14 deletions(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 6116faf1e1..d2f1da861a 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -54,7 +54,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
const [displayCancel, setCancelWarning] = useState(false);
const [exportCancelled, setExportCancelled] = useState(false);
const [exportSuccessful, setExportSuccessful] = useState(false);
- const [Exporter, setExporter] = useStateCallback<Exporter>(
+ const [exporter, setExporter] = useStateCallback<Exporter>(
null,
async (exporter: Exporter) => {
await exporter?.export().then(() => {
@@ -195,7 +195,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
};
const confirmCanel = async () => {
- await Exporter?.cancelExport().then(() => {
+ await exporter?.cancelExport().then(() => {
setExportCancelled(true);
setExporting(false);
setExporter(null);
@@ -203,14 +203,14 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
};
const exportFormatOptions = Object.keys(ExportFormat).map((format) => ({
- value: format,
- label: textForFormat(format),
+ value: ExportFormat[format],
+ label: textForFormat(ExportFormat[format]),
}));
const exportTypeOptions = Object.keys(ExportType).map((type) => {
return (
- <option key={type} value={type}>
- { textForType(type) }
+ <option key={type} value={ExportType[type]}>
+ { textForType(ExportType[type]) }
</option>
);
});
diff --git a/src/utils/exportUtils/exportIcons.ts b/src/utils/exportUtils/exportIcons.ts
index 181a62848e..7a8264f7e9 100644
--- a/src/utils/exportUtils/exportIcons.ts
+++ b/src/utils/exportUtils/exportIcons.ts
@@ -1,3 +1,19 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
import trashSVG from "!!raw-loader!../../../res/img/element-icons/trashcan.svg";
import attachSVG from "!!raw-loader!../../../res/img/element-icons/room/composer/attach.svg";
diff --git a/src/utils/exportUtils/exportJS.js b/src/utils/exportUtils/exportJS.js
index 9e58c8b99c..e082f88d98 100644
--- a/src/utils/exportUtils/exportJS.js
+++ b/src/utils/exportUtils/exportJS.js
@@ -1,3 +1,20 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+// This file is raw-imported (imported as plain text) for the export bundle, which is why this is in JS
function showToastIfNeeded(replyId) {
const el = document.getElementById(replyId);
if (!el) {
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 2f6e2c2cbc..139e3a3740 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -17,19 +17,19 @@ limitations under the License.
import { _t } from "../../languageHandler";
export enum ExportFormat {
- Html = "HTML",
- PlainText = "PLAIN_TEXT",
- Json = "JSON",
+ Html = "Html",
+ PlainText = "PlainText",
+ Json = "Json",
}
export enum ExportType {
- Timeline = "TIMELINE",
- Beginning = "BEGINNING",
- LastNMessages = "LAST_N_MESSAGES",
+ Timeline = "Timeline",
+ Beginning = "Beginning",
+ LastNMessages = "LastNMessages",
// START_DATE = "START_DATE",
}
-export const textForFormat = (format: string): string => {
+export const textForFormat = (format: ExportFormat): string => {
switch (format) {
case ExportFormat.Html:
return _t("HTML");
@@ -42,7 +42,7 @@ export const textForFormat = (format: string): string => {
}
};
-export const textForType = (type: string): string => {
+export const textForType = (type: ExportType): string => {
switch (type) {
case ExportType.Beginning:
return _t("From the beginning");
From 00d5a0baa4832e9a4f1c35dd100d0a71758ab675 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 13 Aug 2021 08:59:28 +0530
Subject: [PATCH 160/176] Apply suggestions from code review
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
---
src/TextForEvent.tsx | 9 +++++----
src/components/views/messages/MImageBody.tsx | 2 +-
src/utils/exportUtils/Exporter.ts | 10 ++++------
src/utils/exportUtils/exportUtils.ts | 4 ++--
4 files changed, 12 insertions(+), 13 deletions(-)
diff --git a/src/TextForEvent.tsx b/src/TextForEvent.tsx
index 5ab1ceb9f4..7845091c48 100644
--- a/src/TextForEvent.tsx
+++ b/src/TextForEvent.tsx
@@ -167,7 +167,7 @@ function textForTopicEvent(ev: MatrixEvent): () => string | null {
}
function textForRoomAvatarEvent(ev: MatrixEvent): () => string | null {
- const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
+ const senderDisplayName = ev?.sender?.name || ev.getSender();
return () => _t('%(senderDisplayName)s changed the room avatar.', { senderDisplayName });
}
@@ -298,11 +298,12 @@ function textForMessageEvent(ev: MatrixEvent): () => string | null {
if (ev.isRedacted()) {
message = _t("Message deleted");
const unsigned = ev.getUnsigned();
- const redactedBecauseUserId = unsigned && unsigned.redacted_because && unsigned.redacted_because.sender;
+ const redactedBecauseUserId = unsigned?.redacted_because?.sender;
if (redactedBecauseUserId && redactedBecauseUserId !== ev.getSender()) {
const room = MatrixClientPeg.get().getRoom(ev.getRoomId());
- const sender = room && room.getMember(redactedBecauseUserId);
- message = _t("Message deleted by %(name)s", { name: sender ? sender.name : redactedBecauseUserId });
+ const sender = room?.getMember(redactedBecauseUserId);
+ message = _t("Message deleted by %(name)s", { name: sender?.name
+ || redactedBecauseUserId });
}
}
if (ev.getContent().msgtype === "m.emote") {
diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx
index 4fa1161d82..ae82c57a5e 100644
--- a/src/components/views/messages/MImageBody.tsx
+++ b/src/components/views/messages/MImageBody.tsx
@@ -428,7 +428,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
// Overidden by MStickerBody
protected wrapImage(contentUrl: string, children: JSX.Element): JSX.Element {
- return <a href={contentUrl} target={this.props.forExport ? "__blank" : undefined} onClick={this.onClick}>
+ return <a href={contentUrl} target={this.props.forExport ? "_blank" : undefined} onClick={this.onClick}>
{ children }
</a>;
}
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 92f2c3e3d2..e497fb7e38 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -32,9 +32,9 @@ type BlobFile = {
};
export default abstract class Exporter {
- protected files: BlobFile[];
+ protected files: BlobFile[] = [];
protected client: MatrixClient;
- protected cancelled: boolean;
+ protected cancelled = false;
protected constructor(
protected room: Room,
@@ -47,8 +47,6 @@ export default abstract class Exporter {
exportOptions.numberOfMessages > 10**8) {
throw new Error("Invalid export options");
}
- this.cancelled = false;
- this.files = [];
this.client = MatrixClientPeg.get();
window.addEventListener("beforeunload", this.onBeforeUnload);
}
@@ -71,7 +69,7 @@ export default abstract class Exporter {
this.files.push(file);
}
- protected async downloadZIP(): Promise<any> {
+ protected async downloadZIP(): Promise<void> {
const filename = `matrix-export-${formatFullDateNoDay(new Date())}.zip`;
const zip = new JSZip();
@@ -257,5 +255,5 @@ export default abstract class Exporter {
return mxEv.getType() === attachmentTypes[0] || attachmentTypes.includes(mxEv.getContent().msgtype);
}
- abstract export(): Promise<any>;
+ abstract export(): Promise<void>;
}
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 8410b747ea..b69eef4edb 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -29,7 +29,7 @@ export enum ExportTypes {
// START_DATE = "START_DATE",
}
-export const textForFormat = (format: string): string => {
+export const textForFormat = (format: ExportFormat): string => {
switch (format) {
case ExportFormats.HTML:
return _t("HTML");
@@ -42,7 +42,7 @@ export const textForFormat = (format: string): string => {
}
};
-export const textForType = (type: string): string => {
+export const textForType = (type: ExportType): string => {
switch (type) {
case ExportTypes.BEGINNING:
return _t("From the beginning");
From 7207329c15a1d0bd851b7e99cf9ec1bf7ca612df Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 13 Aug 2021 23:44:07 +0530
Subject: [PATCH 161/176] Apply review suggestions
---
res/css/views/dialogs/_ExportDialog.scss | 6 +-
src/TextForEvent.tsx | 5 +-
src/components/views/avatars/MemberAvatar.tsx | 4 +-
src/components/views/dialogs/ExportDialog.tsx | 182 +++++++++---------
src/components/views/elements/ReplyThread.tsx | 6 +-
src/components/views/messages/CallEvent.tsx | 4 +-
src/components/views/messages/MFileBody.tsx | 6 +-
.../views/messages/RedactedBody.tsx | 1 -
src/i18n/strings/en_EN.json | 12 +-
src/utils/exportUtils/Exporter.ts | 5 +-
src/utils/exportUtils/HtmlExport.tsx | 6 +-
src/utils/exportUtils/exportCSS.ts | 36 ++--
src/utils/exportUtils/exportIcons.ts | 23 ---
test/utils/export-test.tsx | 100 +++++++---
14 files changed, 201 insertions(+), 195 deletions(-)
delete mode 100644 src/utils/exportUtils/exportIcons.ts
diff --git a/res/css/views/dialogs/_ExportDialog.scss b/res/css/views/dialogs/_ExportDialog.scss
index b4bc2b84b2..f3e418354c 100644
--- a/res/css/views/dialogs/_ExportDialog.scss
+++ b/res/css/views/dialogs/_ExportDialog.scss
@@ -35,7 +35,7 @@ limitations under the License.
}
.mx_RadioButton input[type="radio"]:checked + div > div {
- background: gray;
+ background: $greyed-fg-color;
}
.mx_RadioButton input[type=radio]:checked + div {
@@ -52,8 +52,8 @@ limitations under the License.
}
.mx_Checkbox input[type="checkbox"]:checked + label > .mx_Checkbox_background {
- background: gray;
- border-color: gray;
+ background: $greyed-fg-color;
+ border-color: $greyed-fg-color;
}
}
diff --git a/src/TextForEvent.tsx b/src/TextForEvent.tsx
index 7845091c48..5f4ae4a702 100644
--- a/src/TextForEvent.tsx
+++ b/src/TextForEvent.tsx
@@ -312,7 +312,10 @@ function textForMessageEvent(ev: MatrixEvent): () => string | null {
message = _t('%(senderDisplayName)s sent an image.', { senderDisplayName });
} else if (ev.getType() == "m.sticker") {
message = _t('%(senderDisplayName)s sent a sticker.', { senderDisplayName });
- } else message = senderDisplayName + ': ' + message;
+ } else {
+ // in this case, parse it as a plain text message
+ message = senderDisplayName + ': ' + message;
+ }
return message;
};
}
diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx
index 9554a50684..933cd58880 100644
--- a/src/components/views/avatars/MemberAvatar.tsx
+++ b/src/components/views/avatars/MemberAvatar.tsx
@@ -36,7 +36,6 @@ interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" |
// Whether the onClick of the avatar should be overridden to dispatch `Action.ViewUser`
viewUserOnClick?: boolean;
title?: string;
- forExport?: boolean;
}
interface IState {
@@ -90,8 +89,7 @@ export default class MemberAvatar extends React.Component<IProps, IState> {
}
render() {
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
- let { member, fallbackUserId, onClick, viewUserOnClick, forExport, ...otherProps } = this.props;
+ let { member, fallbackUserId, onClick, viewUserOnClick, ...otherProps } = this.props;
const userId = member ? member.userId : fallbackUserId;
if (viewUserOnClick) {
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index d2f1da861a..f474bcdb70 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -29,13 +29,15 @@ import {
textForFormat,
textForType,
} from "../../../utils/exportUtils/exportUtils";
-import { IFieldState, IValidationResult } from "../elements/Validation";
+import withValidation, { IFieldState, IValidationResult } from "../elements/Validation";
import HTMLExporter from "../../../utils/exportUtils/HtmlExport";
import JSONExporter from "../../../utils/exportUtils/JSONExport";
import PlainTextExporter from "../../../utils/exportUtils/PlainTextExport";
import { useStateCallback } from "../../../hooks/useStateCallback";
import Exporter from "../../../utils/exportUtils/Exporter";
import Spinner from "../elements/Spinner";
+import Modal from "../../../Modal";
+import InfoDialog from "./InfoDialog";
interface IProps extends IDialogProps {
room: Room;
@@ -126,67 +128,85 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
await startExport();
};
- const onValidateSize = async ({
- value,
- }: Pick<IFieldState, "value">): Promise<IValidationResult> => {
- const parsedSize = parseFloat(value);
- const min = 1;
- const max = 2000;
+ const validateSize = withValidation({
+ rules: [
+ {
+ key: "required",
+ test({ value, allowEmpty }) {
+ return allowEmpty || !!value;
+ },
+ invalid: () => {
+ const min = 1;
+ const max = 10 ** 8;
+ return _t("Enter a number between %(min)s and %(max)s", {
+ min,
+ max,
+ });
+ },
+ }, {
+ key: "number",
+ test: ({ value }) => {
+ const parsedSize = parseFloat(value);
+ const min = 1;
+ const max = 2000;
+ return !(isNaN(parsedSize) || min > parsedSize || parsedSize > max);
+ },
+ invalid: () => {
+ const min = 1;
+ const max = 2000;
+ return _t(
+ "Size can only be a number between %(min)s MB and %(max)s MB",
+ { min, max },
+ );
+ },
+ },
+ ],
+ });
- if (isNaN(parsedSize)) {
- return { valid: false, feedback: _t("Size must be a number") };
- }
-
- if (min > parsedSize || parsedSize > max) {
- return {
- valid: false,
- feedback: _t(
- "Size can only be between %(min)s MB and %(max)s MB",
- { min, max },
- ),
- };
- }
-
- return {
- valid: true,
- feedback: _t("Enter size between %(min)s MB and %(max)s MB", {
- min,
- max,
- }),
- };
+ const onValidateSize = async (fieldState: IFieldState): Promise<IValidationResult> => {
+ const result = await validateSize(fieldState);
+ return result;
};
- const onValidateNumberOfMessages = async ({
- value,
- }: Pick<IFieldState, "value">): Promise<IValidationResult> => {
- const parsedSize = parseFloat(value);
- const min = 1;
- const max = 10 ** 8;
+ const validateNumberOfMessages = withValidation({
+ rules: [
+ {
+ key: "required",
+ test({ value, allowEmpty }) {
+ return allowEmpty || !!value;
+ },
+ invalid: () => {
+ const min = 1;
+ const max = 10 ** 8;
+ return _t("Enter a number between %(min)s and %(max)s", {
+ min,
+ max,
+ });
+ },
+ }, {
+ key: "number",
+ test: ({ value }) => {
+ const parsedSize = parseFloat(value);
+ const min = 1;
+ const max = 10 ** 8;
+ if (isNaN(parsedSize)) return false;
+ return !(min > parsedSize || parsedSize > max);
+ },
+ invalid: () => {
+ const min = 1;
+ const max = 10 ** 8;
+ return _t(
+ "Number of messages can only be a number between %(min)s and %(max)s",
+ { min, max },
+ );
+ },
+ },
+ ],
+ });
- if (isNaN(parsedSize)) {
- return {
- valid: false,
- feedback: _t("Number of messages must be a number"),
- };
- }
-
- if (min > parsedSize || parsedSize > max) {
- return {
- valid: false,
- feedback: _t(
- "Number of messages can only be between %(min)s and %(max)s",
- { min, max },
- ),
- };
- }
-
- return {
- valid: true,
- feedback: _t("Enter a number between %(min)s and %(max)s", {
- min,
- max,
- }),
- };
+ const onValidateNumberOfMessages = async (fieldState: IFieldState): Promise<IValidationResult> => {
+ const result = await validateNumberOfMessages(fieldState);
+ return result;
};
const onCancel = async () => {
@@ -236,42 +256,20 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
if (exportCancelled) {
// Display successful cancellation message
- return (
- <BaseDialog
- title={_t("Export Cancelled")}
- className="mx_ExportDialog"
- contentId="mx_Dialog_content"
- onFinished={onFinished}
- fixedWidth={true}
- >
- <p>{ _t("The export was cancelled successfully") }</p>
-
- <DialogButtons
- primaryButton={_t("Okay")}
- hasCancel={false}
- onPrimaryButtonClick={onFinished}
- />
- </BaseDialog>
- );
+ Modal.createTrackedDialog("Export Cancelled", "", InfoDialog, {
+ title: _t("Export Cancelled"),
+ description: <p>{ _t("The export was cancelled successfully") }</p>,
+ hasCloseButton: true,
+ });
+ return null;
} else if (exportSuccessful) {
// Display successful export message
- return (
- <BaseDialog
- title={_t("Export Successful")}
- className="mx_ExportDialog"
- contentId="mx_Dialog_content"
- onFinished={onFinished}
- fixedWidth={true}
- >
- <p>{ _t("Your messages were successfully exported") }</p>
-
- <DialogButtons
- primaryButton={_t("Okay")}
- hasCancel={false}
- onPrimaryButtonClick={onFinished}
- />
- </BaseDialog>
- );
+ Modal.createTrackedDialog("Export Successful", "", InfoDialog, {
+ title: _t("Export Successful"),
+ description: <p>{ _t("Your messages were successfully exported") }</p>,
+ hasCloseButton: true,
+ });
+ return null;
} else if (displayCancel) {
// Display cancel warning
return (
diff --git a/src/components/views/elements/ReplyThread.tsx b/src/components/views/elements/ReplyThread.tsx
index 2144cc602c..86330c1dbc 100644
--- a/src/components/views/elements/ReplyThread.tsx
+++ b/src/components/views/elements/ReplyThread.tsx
@@ -355,10 +355,10 @@ export default class ReplyThread extends React.Component<IProps, IState> {
} else if (this.props.forExport) {
const eventId = ReplyThread.getParentEventId(this.props.parentEv);
header = <p className="mx_ReplyThread_Export">
- { _t("In reply to <messageLink/>",
+ { _t("In reply to <a>this message</a>",
{},
- { messageLink: () => (
- <a className="mx_reply_anchor" href={`#${eventId}`} scroll-to={eventId}> { _t("this message") } </a>
+ { a: (sub) => (
+ <a className="mx_reply_anchor" href={`#${eventId}`} scroll-to={eventId}> { sub } </a>
),
})
}
diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx
index 0a32e7f637..bc868c35b3 100644
--- a/src/components/views/messages/CallEvent.tsx
+++ b/src/components/views/messages/CallEvent.tsx
@@ -47,7 +47,7 @@ export default class CallEvent extends React.Component<IProps, IState> {
super(props);
this.state = {
- callState: this.props.callEventGrouper?.state,
+ callState: this.props.callEventGrouper.state,
silenced: false,
};
}
@@ -210,7 +210,7 @@ export default class CallEvent extends React.Component<IProps, IState> {
render() {
const event = this.props.mxEvent;
const sender = event.sender ? event.sender.name : event.getSender();
- const isVoice = this.props.callEventGrouper?.isVoice;
+ const isVoice = this.props.callEventGrouper.isVoice;
const callType = isVoice ? _t("Voice call") : _t("Video call");
const callState = this.state.callState;
const hangupReason = this.props.callEventGrouper.hangupReason;
diff --git a/src/components/views/messages/MFileBody.tsx b/src/components/views/messages/MFileBody.tsx
index 1f079cd1e2..3675b14295 100644
--- a/src/components/views/messages/MFileBody.tsx
+++ b/src/components/views/messages/MFileBody.tsx
@@ -201,11 +201,7 @@ export default class MFileBody extends React.Component<IProps, IState> {
if (this.props.showGenericPlaceholder) {
placeholder = (
<AccessibleButton className="mx_MediaBody mx_MFileBody_info" onClick={this.onPlaceholderClick}>
- <span className="mx_MFileBody_info_icon">
- { this.props.forExport ?
- <img alt="Attachment" className="mx_export_attach_icon" src="icons/attach.svg" />
- : null }
- </span>
+ <span className="mx_MFileBody_info_icon" />
<TextWithTooltip tooltip={presentableTextForFile(this.content, _t("Attachment"), true)}>
<span className="mx_MFileBody_info_filename">
{ presentableTextForFile(this.content, _t("Attachment"), true, true) }
diff --git a/src/components/views/messages/RedactedBody.tsx b/src/components/views/messages/RedactedBody.tsx
index 65933cb801..4ec528fdf3 100644
--- a/src/components/views/messages/RedactedBody.tsx
+++ b/src/components/views/messages/RedactedBody.tsx
@@ -39,7 +39,6 @@ const RedactedBody = React.forwardRef<any, IBodyProps>(({ mxEvent, forExport },
return (
<span className="mx_RedactedBody" ref={ref} title={titleText}>
- { forExport ? <img alt={_t("Redacted")} className="mx_export_trash_icon" src="icons/trash.svg" /> : null }
{ text }
</span>
);
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 81f8375000..f05025ea32 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -725,6 +725,7 @@
"Invite to %(spaceName)s": "Invite to %(spaceName)s",
"Share your public space": "Share your public space",
"Unknown App": "Unknown App",
+ "Are you sure you want to exit during this export?": "Are you sure you want to exit during this export?",
"HTML": "HTML",
"JSON": "JSON",
"Plain Text": "Plain Text",
@@ -1972,7 +1973,6 @@
"<reactors/><reactedWith> reacted with %(content)s</reactedWith>": "<reactors/><reactedWith> reacted with %(content)s</reactedWith>",
"<reactors/><reactedWith>reacted with %(shortName)s</reactedWith>": "<reactors/><reactedWith>reacted with %(shortName)s</reactedWith>",
"Message deleted on %(date)s": "Message deleted on %(date)s",
- "Redacted": "Redacted",
"%(senderDisplayName)s changed the avatar for %(roomName)s": "%(senderDisplayName)s changed the avatar for %(roomName)s",
"%(senderDisplayName)s removed the room avatar.": "%(senderDisplayName)s removed the room avatar.",
"%(senderDisplayName)s changed the room avatar to <img/>": "%(senderDisplayName)s changed the room avatar to <img/>",
@@ -2122,8 +2122,7 @@
"QR Code": "QR Code",
"Unable to load event that was replied to, it either does not exist or you do not have permission to view it.": "Unable to load event that was replied to, it either does not exist or you do not have permission to view it.",
"<a>In reply to</a> <pill>": "<a>In reply to</a> <pill>",
- "In reply to <messageLink/>": "In reply to <messageLink/>",
- "this message": "this message",
+ "In reply to <a>this message</a>": "In reply to <a>this message</a>",
"Room address": "Room address",
"e.g. my-room": "e.g. my-room",
"Some characters not allowed": "Some characters not allowed",
@@ -2329,16 +2328,13 @@
"There was an error updating your community. The server is unable to process your request.": "There was an error updating your community. The server is unable to process your request.",
"Update community": "Update community",
"An error has occurred.": "An error has occurred.",
- "Size can only be between %(min)s MB and %(max)s MB": "Size can only be between %(min)s MB and %(max)s MB",
- "Enter size between %(min)s MB and %(max)s MB": "Enter size between %(min)s MB and %(max)s MB",
- "Number of messages must be a number": "Number of messages must be a number",
- "Number of messages can only be between %(min)s and %(max)s": "Number of messages can only be between %(min)s and %(max)s",
"Enter a number between %(min)s and %(max)s": "Enter a number between %(min)s and %(max)s",
+ "Size can only be a number between %(min)s MB and %(max)s MB": "Size can only be a number between %(min)s MB and %(max)s MB",
+ "Number of messages can only be a number between %(min)s and %(max)s": "Number of messages can only be a number between %(min)s and %(max)s",
"Number of messages": "Number of messages",
"MB": "MB",
"Export Cancelled": "Export Cancelled",
"The export was cancelled successfully": "The export was cancelled successfully",
- "Okay": "Okay",
"Export Successful": "Export Successful",
"Your messages were successfully exported": "Your messages were successfully exported",
"Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 8c419ce657..0151836792 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -25,6 +25,7 @@ import { Direction, MatrixClient } from "matrix-js-sdk";
import { MutableRefObject } from "react";
import JSZip from "jszip";
import { saveAs } from "file-saver";
+import { _t } from "../../languageHandler";
type BlobFile = {
name: string;
@@ -54,7 +55,7 @@ export default abstract class Exporter {
protected onBeforeUnload(e: BeforeUnloadEvent): string {
e.preventDefault();
- return e.returnValue = "Are you sure you want to exit during this export?";
+ return e.returnValue = _t("Are you sure you want to exit during this export?");
}
protected updateProgress(progress: string, log = true, show = true): void {
@@ -70,7 +71,7 @@ export default abstract class Exporter {
this.files.push(file);
}
- protected async downloadZIP(): Promise<string | null> {
+ protected async downloadZIP(): Promise<string | void> {
const filename = `matrix-export-${formatFullDateNoDay(new Date())}.zip`;
const zip = new JSZip();
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 6cdbae6c48..3608cff1f2 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -31,7 +31,6 @@ import EventTile, { haveTileForEvent } from "../../components/views/rooms/EventT
import DateSeparator from "../../components/views/messages/DateSeparator";
import BaseAvatar from "../../components/views/avatars/BaseAvatar";
import exportJS from "!!raw-loader!./exportJS";
-import exportIcons from "./exportIcons";
import { ExportType } from "./exportUtils";
import { IExportOptions } from "./exportUtils";
import MatrixClientContext from "../../contexts/MatrixClientContext";
@@ -294,6 +293,7 @@ export default class HTMLExporter extends Exporter {
const mxc = mxEv.getContent().url || mxEv.getContent().file?.url;
eventTileMarkup = eventTileMarkup.split(mxc).join(filePath);
}
+ eventTileMarkup = eventTileMarkup.replace(/<span class="mx_MFileBody_info_icon".*?>.*?<\/span>/, '');
if (hasAvatar) {
eventTileMarkup = eventTileMarkup.replace(
encodeURI(this.getAvatarURL(mxEv)).replace(/&/g, '&'),
@@ -406,10 +406,6 @@ export default class HTMLExporter extends Exporter {
this.addFile("css/style.css", new Blob([exportCSS]));
this.addFile("js/script.js", new Blob([exportJS]));
- for (const iconName in exportIcons) {
- this.addFile(`icons/${iconName}`, new Blob([exportIcons[iconName]]));
- }
-
await this.downloadZIP();
const exportEnd = performance.now();
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index 1a3a575f07..f19bc1004b 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -16,33 +16,31 @@ limitations under the License.
/* eslint-disable max-len, camelcase */
-declare const __webpack_hash__: string;
-
import ThemeWatcher from "../../settings/watchers/ThemeWatcher";
const getExportCSS = async (): Promise<string> => {
const theme = new ThemeWatcher().getEffectiveTheme();
- const hash = __webpack_hash__;
-
- const bundle = await fetch(`bundles/${hash}/bundle.css`);
- const bundleCSS = await bundle.text();
- let themeCSS: string;
- if (theme === 'light') {
- const res = await fetch(`bundles/${hash}/theme-light.css`);
- themeCSS = await res.text();
- } else {
- const res = await fetch(`bundles/${hash}/theme-dark.css`);
- themeCSS = await res.text();
+ const stylesheets: string[] = [];
+ document.querySelectorAll('link[rel="stylesheet"]').forEach((e: any) => {
+ if (e.href.endsWith("bundle.css") || e.href.endsWith(`theme-${theme}.css`)) {
+ stylesheets.push(e.href);
+ }
+ });
+ let CSS: string;
+ for (const stylesheet of stylesheets) {
+ const res = await fetch(stylesheet);
+ const innerText = await res.text();
+ CSS += innerText;
}
const fontFaceRegex = /@font-face {.*?}/sg;
- themeCSS = themeCSS.replace(fontFaceRegex, '');
- themeCSS = themeCSS.replace(
+ CSS = CSS.replace(fontFaceRegex, '');
+ CSS = CSS.replace(
/font-family: Inter/g,
`font-family: -apple-system, BlinkMacSystemFont, avenir next,
avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif`,
);
- themeCSS = themeCSS.replace(
+ CSS = CSS.replace(
/font-family: Inconsolata/g,
"font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace",
);
@@ -148,6 +146,10 @@ const getExportCSS = async (): Promise<string> => {
top: 1px;
left: 0;
}
+
+ .mx_RedactedBody {
+ padding-left: unset;
+ }
img {
white-space: nowrap;
@@ -155,7 +157,7 @@ const getExportCSS = async (): Promise<string> => {
}
`;
- return themeCSS + bundleCSS + customCSS;
+ return CSS + customCSS;
};
export default getExportCSS;
diff --git a/src/utils/exportUtils/exportIcons.ts b/src/utils/exportUtils/exportIcons.ts
deleted file mode 100644
index 7a8264f7e9..0000000000
--- a/src/utils/exportUtils/exportIcons.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
-Copyright 2021 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import trashSVG from "!!raw-loader!../../../res/img/element-icons/trashcan.svg";
-import attachSVG from "!!raw-loader!../../../res/img/element-icons/room/composer/attach.svg";
-
-export default {
- "trash.svg": trashSVG,
- "attach.svg": attachSVG,
-};
diff --git a/test/utils/export-test.tsx b/test/utils/export-test.tsx
index c4d9b43765..66436da9c5 100644
--- a/test/utils/export-test.tsx
+++ b/test/utils/export-test.tsx
@@ -16,7 +16,7 @@ limitations under the License.
import { IContent, MatrixClient, MatrixEvent, Room } from "matrix-js-sdk";
import { MatrixClientPeg } from "../../src/MatrixClientPeg";
-import { textForFormat, IExportOptions, ExportType } from "../../src/utils/exportUtils/exportUtils";
+import { IExportOptions, ExportType, ExportFormat } from "../../src/utils/exportUtils/exportUtils";
import '../skinned-sdk';
import PlainTextExporter from "../../src/utils/exportUtils/PlainTextExport";
import HTMLExporter from "../../src/utils/exportUtils/HtmlExport";
@@ -73,9 +73,60 @@ describe('export', function() {
}
const mockRoom = createRoom();
+ const ts0 = Date.now();
+
+ function mkRedactedEvent(i = 0) {
+ return new MatrixEvent({
+ type: "m.room.message",
+ sender: MY_USER_ID,
+ content: {},
+ unsigned: {
+ "age": 72,
+ "transaction_id": "m1212121212.23",
+ "redacted_because": {
+ "content": {},
+ "origin_server_ts": ts0 + i*1000,
+ "redacts": "$9999999999999999999999999999999999999999998",
+ "sender": "@me:here",
+ "type": "m.room.redaction",
+ "unsigned": {
+ "age": 94,
+ "transaction_id": "m1111111111.1",
+ },
+ "event_id": "$9999999999999999999999999999999999999999998",
+ "room_id": mockRoom.roomId,
+ },
+ },
+ event_id: "$9999999999999999999999999999999999999999999",
+ room_id: mockRoom.roomId,
+ });
+ }
+
+ function mkFileEvent() {
+ return new MatrixEvent({
+ "content": {
+ "body": "index.html",
+ "info": {
+ "mimetype": "text/html",
+ "size": 31613,
+ },
+ "msgtype": "m.file",
+ "url": "mxc://test.org",
+ },
+ "origin_server_ts": 1628872988364,
+ "sender": MY_USER_ID,
+ "type": "m.room.message",
+ "unsigned": {
+ "age": 266,
+ "transaction_id": "m99999999.2",
+ },
+ "event_id": "$99999999999999999999",
+ "room_id": mockRoom.roomId,
+ });
+ }
+
function mkEvents() {
const matrixEvents = [];
- const ts0 = Date.now();
let i: number;
// plain text
for (i = 0; i < 10; i++) {
@@ -134,30 +185,7 @@ describe('export', function() {
}));
// redacted events
for (i = 0; i < 10; i++) {
- matrixEvents.push(new MatrixEvent({
- type: "m.room.message",
- sender: MY_USER_ID,
- content: {},
- unsigned: {
- "age": 72,
- "transaction_id": "m1212121212.23",
- "redacted_because": {
- "content": {},
- "origin_server_ts": ts0 + i*1000,
- "redacts": "$9999999999999999999999999999999999999999998",
- "sender": "@me:here",
- "type": "m.room.redaction",
- "unsigned": {
- "age": 94,
- "transaction_id": "m1111111111.1",
- },
- "event_id": "$9999999999999999999999999999999999999999998",
- "room_id": mockRoom.roomId,
- },
- },
- event_id: "$9999999999999999999999999999999999999999999",
- room_id: mockRoom.roomId,
- }));
+ matrixEvents.push(mkRedactedEvent(i));
}
return matrixEvents;
}
@@ -165,10 +193,22 @@ describe('export', function() {
const events: MatrixEvent[] = mkEvents();
it('checks if the export format is valid', function() {
- expect(textForFormat('HTML')).toBeTruthy();
- expect(textForFormat('JSON')).toBeTruthy();
- expect(textForFormat('PLAIN_TEXT')).toBeTruthy();
- expect(() => textForFormat('PDF')).toThrowError("Unknown format");
+ function isValidFormat(format: string): boolean {
+ const options: string[] = Object.values(ExportFormat);
+ return options.includes(format);
+ }
+ expect(isValidFormat("Html")).toBeTruthy();
+ expect(isValidFormat("Json")).toBeTruthy();
+ expect(isValidFormat("PlainText")).toBeTruthy();
+ expect(isValidFormat("Pdf")).toBeFalsy();
+ });
+
+ it("checks if the icons' html corresponds to export regex", function() {
+ const exporter = new HTMLExporter(mockRoom, ExportType.Beginning, mockExportOptions, null);
+ const fileRegex = /<span class="mx_MFileBody_info_icon">.*?<\/span>/;
+ expect(fileRegex.test(
+ renderToString(exporter.getEventTile(mkFileEvent(), true))),
+ ).toBeTruthy();
});
it('checks if the export options are valid', function() {
From 31c9e5962cc52cc1e4672a81ddb4b0a618d83a44 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Sat, 14 Aug 2021 00:03:02 +0530
Subject: [PATCH 162/176] Move export dialog to async-components
---
.../views/dialogs/ExportDialog.tsx | 30 +++++++++----------
.../views/right_panel/RoomSummaryCard.tsx | 3 +-
src/utils/exportUtils/Exporter.ts | 5 ++--
src/utils/exportUtils/HtmlExport.tsx | 6 ++--
src/utils/exportUtils/JSONExport.ts | 4 +--
src/utils/exportUtils/PlainTextExport.ts | 4 +--
src/utils/exportUtils/exportCSS.ts | 28 ++---------------
7 files changed, 28 insertions(+), 52 deletions(-)
rename src/{components => async-components}/views/dialogs/ExportDialog.tsx (93%)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/async-components/views/dialogs/ExportDialog.tsx
similarity index 93%
rename from src/components/views/dialogs/ExportDialog.tsx
rename to src/async-components/views/dialogs/ExportDialog.tsx
index f474bcdb70..b61d7975bf 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/async-components/views/dialogs/ExportDialog.tsx
@@ -17,27 +17,27 @@ limitations under the License.
import React, { useRef, useState } from "react";
import { Room } from "matrix-js-sdk/src";
import { _t } from "../../../languageHandler";
-import { IDialogProps } from "./IDialogProps";
-import BaseDialog from "./BaseDialog";
-import DialogButtons from "../elements/DialogButtons";
-import Field from "../elements/Field";
-import StyledRadioGroup from "../elements/StyledRadioGroup";
-import StyledCheckbox from "../elements/StyledCheckbox";
+import { IDialogProps } from "../../../components/views/dialogs/IDialogProps";
+import BaseDialog from "../../../components/views/dialogs/BaseDialog";
+import DialogButtons from "../../../components/views/elements/DialogButtons";
+import Field from "../../../components/views/elements/Field";
+import StyledRadioGroup from "../../../components/views/elements/StyledRadioGroup";
+import StyledCheckbox from "../../../components/views/elements/StyledCheckbox";
import {
ExportFormat,
ExportType,
textForFormat,
textForType,
} from "../../../utils/exportUtils/exportUtils";
-import withValidation, { IFieldState, IValidationResult } from "../elements/Validation";
+import withValidation, { IFieldState, IValidationResult } from "../../../components/views/elements/Validation";
import HTMLExporter from "../../../utils/exportUtils/HtmlExport";
import JSONExporter from "../../../utils/exportUtils/JSONExport";
import PlainTextExporter from "../../../utils/exportUtils/PlainTextExport";
import { useStateCallback } from "../../../hooks/useStateCallback";
import Exporter from "../../../utils/exportUtils/Exporter";
-import Spinner from "../elements/Spinner";
+import Spinner from "../../../components/views/elements/Spinner";
import Modal from "../../../Modal";
-import InfoDialog from "./InfoDialog";
+import InfoDialog from "../../../components/views/dialogs/InfoDialog";
interface IProps extends IDialogProps {
room: Room;
@@ -52,7 +52,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
const [sizeLimit, setSizeLimit] = useState<number | null>(8);
const sizeLimitRef = useRef<Field>();
const messageCountRef = useRef<Field>();
- const exportProgressRef = useRef<HTMLParagraphElement>();
+ const [exportProgressText, setExportProgressText] = useState("Processing...");
const [displayCancel, setCancelWarning] = useState(false);
const [exportCancelled, setExportCancelled] = useState(false);
const [exportSuccessful, setExportSuccessful] = useState(false);
@@ -78,7 +78,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
room,
ExportType[exportType],
exportOptions,
- exportProgressRef,
+ setExportProgressText,
),
);
break;
@@ -88,7 +88,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
room,
ExportType[exportType],
exportOptions,
- exportProgressRef,
+ setExportProgressText,
),
);
break;
@@ -98,7 +98,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
room,
ExportType[exportType],
exportOptions,
- exportProgressRef,
+ setExportProgressText,
),
);
break;
@@ -368,8 +368,8 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
{ isExporting ? (
<div className="mx_ExportDialog_progress">
<Spinner w={24} h={24} />
- <p ref={exportProgressRef}>
- { _t("Processing...") }
+ <p>
+ { exportProgressText }
</p>
<DialogButtons
primaryButton={_t("Cancel")}
diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx
index c1b4112423..b59d664aa2 100644
--- a/src/components/views/right_panel/RoomSummaryCard.tsx
+++ b/src/components/views/right_panel/RoomSummaryCard.tsx
@@ -234,8 +234,7 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
};
const onRoomExportClick = async () => {
- const { default: ExportDialog } = await import("../dialogs/ExportDialog");
-
+ const { default: ExportDialog } = await import("../../../async-components/views/dialogs/ExportDialog");
Modal.createTrackedDialog('export room dialog', '', ExportDialog, {
room,
});
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 0151836792..7254bdc3a4 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -22,7 +22,6 @@ import { decryptFile } from "../DecryptFile";
import { mediaFromContent } from "../../customisations/Media";
import { formatFullDateNoDay } from "../../DateUtils";
import { Direction, MatrixClient } from "matrix-js-sdk";
-import { MutableRefObject } from "react";
import JSZip from "jszip";
import { saveAs } from "file-saver";
import { _t } from "../../languageHandler";
@@ -41,7 +40,7 @@ export default abstract class Exporter {
protected room: Room,
protected exportType: ExportType,
protected exportOptions: IExportOptions,
- protected exportProgressRef: MutableRefObject<HTMLParagraphElement>,
+ protected setProgressText: React.Dispatch<React.SetStateAction<string>>,
) {
if (exportOptions.maxSize < 1 * 1024 * 1024|| // Less than 1 MB
exportOptions.maxSize > 2000 * 1024 * 1024|| // More than ~ 2 GB
@@ -60,7 +59,7 @@ export default abstract class Exporter {
protected updateProgress(progress: string, log = true, show = true): void {
if (log) console.log(progress);
- if (show && this.exportProgressRef.current) this.exportProgressRef.current.innerText = progress;
+ if (show) this.setProgressText(progress);
}
protected addFile(filePath: string, blob: Blob): void {
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 3608cff1f2..39fa762596 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import React, { MutableRefObject } from "react";
+import React from "react";
import Exporter from "./Exporter";
import { mediaFromMxc } from "../../customisations/Media";
import { Room } from "matrix-js-sdk/src/models/room";
@@ -47,9 +47,9 @@ export default class HTMLExporter extends Exporter {
room: Room,
exportType: ExportType,
exportOptions: IExportOptions,
- exportProgressRef: MutableRefObject<HTMLParagraphElement>,
+ setProgressText: React.Dispatch<React.SetStateAction<string>>,
) {
- super(room, exportType, exportOptions, exportProgressRef);
+ super(room, exportType, exportOptions, setProgressText);
this.avatars = new Map<string, boolean>();
this.permalinkCreator = new RoomPermalinkCreator(this.room);
this.totalSize = 0;
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index a2273ad918..fe9b81fd0a 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -32,9 +32,9 @@ export default class JSONExporter extends Exporter {
room: Room,
exportType: ExportType,
exportOptions: IExportOptions,
- exportProgressRef: MutableRefObject<HTMLParagraphElement>,
+ setProgressText: React.Dispatch<React.SetStateAction<string>>,
) {
- super(room, exportType, exportOptions, exportProgressRef);
+ super(room, exportType, exportOptions, setProgressText);
}
protected createJSONString(): string {
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 23ed6c7bbd..c95866ce9b 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -33,9 +33,9 @@ export default class PlainTextExporter extends Exporter {
room: Room,
exportType: ExportType,
exportOptions: IExportOptions,
- exportProgressRef: MutableRefObject<HTMLParagraphElement>,
+ setProgressText: React.Dispatch<React.SetStateAction<string>>,
) {
- super(room, exportType, exportOptions, exportProgressRef);
+ super(room, exportType, exportOptions, setProgressText);
this.totalSize = 0;
this.mediaOmitText = !this.exportOptions.attachmentsIncluded
? _t("Media omitted")
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index f19bc1004b..67795830a2 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -101,28 +101,16 @@ const getExportCSS = async (): Promise<string> => {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
-
- .mx_MFileBody_info .mx_MFileBody_info_icon img.mx_export_attach_icon {
- content: '';
- background-color: ${theme == 'light' ? "#ffffff": "inherit"};
- width: 13px;
- height: 15px;
- position: absolute;
- top: 8px;
- left: 9px;
- }
-
+
* {
scroll-behavior: smooth !important;
}
-
.mx_Export_EventWrapper:target {
background: ${theme == 'light' ? "white" : "#15191E"};
animation: mx_event_highlight_animation 2s linear;
}
-
@keyframes mx_event_highlight_animation {
0%,100% {
background: ${theme == 'light' ? "white" : "#15191E"};
@@ -131,26 +119,16 @@ const getExportCSS = async (): Promise<string> => {
background: ${theme == 'light' ? "#e3e2df" : "#21262c"};
}
}
-
+
.mx_ReplyThread_Export {
margin-top: -5px;
margin-bottom: 5px;
}
-
- .mx_RedactedBody img.mx_export_trash_icon {
- height: 14px;
- width: 14px;
- background-color: ${theme == 'light' ? "#ffffff": "inherit"};
- content: '';
- position: absolute;
- top: 1px;
- left: 0;
- }
.mx_RedactedBody {
padding-left: unset;
}
-
+
img {
white-space: nowrap;
overflow: hidden;
From 5c78acfca4fb6af193f7479a722c3054b58c500c Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Sat, 14 Aug 2021 00:07:13 +0530
Subject: [PATCH 163/176] Remove forExport prop for MemberAvatar
---
src/components/views/rooms/EventTile.tsx | 1 -
1 file changed, 1 deletion(-)
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 6e94a17388..9dc9f8d484 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -961,7 +961,6 @@ export default class EventTile extends React.Component<IProps, IState> {
avatar = (
<div className="mx_EventTile_avatar">
<MemberAvatar
- forExport={this.props.forExport}
member={member}
width={avatarSize}
height={avatarSize}
From 3efa699b88e2bd3a4e4f29a6fbbe6f7febe4c887 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Sat, 14 Aug 2021 00:14:57 +0530
Subject: [PATCH 164/176] Delint
---
src/components/views/messages/MAudioBody.tsx | 1 +
src/components/views/messages/MFileBody.tsx | 1 +
src/components/views/messages/MImageBody.tsx | 3 +-
src/components/views/messages/MVideoBody.tsx | 1 +
src/i18n/strings/en_EN.json | 37 ++++++++++----------
src/utils/exportUtils/JSONExport.ts | 1 -
src/utils/exportUtils/PlainTextExport.ts | 1 -
7 files changed, 23 insertions(+), 22 deletions(-)
diff --git a/src/components/views/messages/MAudioBody.tsx b/src/components/views/messages/MAudioBody.tsx
index 836b1eb79a..6cbd2f2b70 100644
--- a/src/components/views/messages/MAudioBody.tsx
+++ b/src/components/views/messages/MAudioBody.tsx
@@ -86,6 +86,7 @@ export default class MAudioBody extends React.PureComponent<IBodyProps, IState>
if (this.props.forExport) {
const content = this.props.mxEvent.getContent();
+ // During export, the content url will point to the MSC, which will later point to a local url
const contentUrl = content.file?.url || content.url;
return (
<span className="mx_MAudioBody">
diff --git a/src/components/views/messages/MFileBody.tsx b/src/components/views/messages/MFileBody.tsx
index 3675b14295..49c148c56c 100644
--- a/src/components/views/messages/MFileBody.tsx
+++ b/src/components/views/messages/MFileBody.tsx
@@ -213,6 +213,7 @@ export default class MFileBody extends React.Component<IProps, IState> {
if (this.props.forExport) {
const content = this.props.mxEvent.getContent();
+ // During export, the content url will point to the MSC, which will later point to a local url
return <span className="mx_MFileBody">
<a href={content.file?.url || content.url}>
{ placeholder }
diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx
index ae82c57a5e..2d402bdc21 100644
--- a/src/components/views/messages/MImageBody.tsx
+++ b/src/components/views/messages/MImageBody.tsx
@@ -164,7 +164,8 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
protected getContentUrl(): string {
const content: IMediaEventContent = this.props.mxEvent.getContent();
- if (this.props.forExport) return content.url || content.file.url;
+ // During export, the content url will point to the MSC, which will later point to a local url
+ if (this.props.forExport) return content.url || content.file?.url;
if (this.media.isEncrypted) {
return this.state.decryptedUrl;
} else {
diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx
index 3239482515..8cb03bfa7b 100644
--- a/src/components/views/messages/MVideoBody.tsx
+++ b/src/components/views/messages/MVideoBody.tsx
@@ -78,6 +78,7 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
private getContentUrl(): string|null {
const content = this.props.mxEvent.getContent<IMediaEventContent>();
+ // During export, the content url will point to the MSC, which will later point to a local url
if (this.props.forExport) return content.file?.url || content.url;
const media = mediaFromContent(content);
if (media.isEncrypted) {
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 090ee23ba8..d62871af23 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2329,25 +2329,6 @@
"There was an error updating your community. The server is unable to process your request.": "There was an error updating your community. The server is unable to process your request.",
"Update community": "Update community",
"An error has occurred.": "An error has occurred.",
- "Enter a number between %(min)s and %(max)s": "Enter a number between %(min)s and %(max)s",
- "Size can only be a number between %(min)s MB and %(max)s MB": "Size can only be a number between %(min)s MB and %(max)s MB",
- "Number of messages can only be a number between %(min)s and %(max)s": "Number of messages can only be a number between %(min)s and %(max)s",
- "Number of messages": "Number of messages",
- "MB": "MB",
- "Export Cancelled": "Export Cancelled",
- "The export was cancelled successfully": "The export was cancelled successfully",
- "Export Successful": "Export Successful",
- "Your messages were successfully exported": "Your messages were successfully exported",
- "Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
- "Stop": "Stop",
- "Exporting your data": "Exporting your data",
- "Export Chat": "Export Chat",
- "Select from the options below to export chats from your timeline": "Select from the options below to export chats from your timeline",
- "Format": "Format",
- "Size Limit": "Size Limit",
- "Include Attachments": "Include Attachments",
- "Processing...": "Processing...",
- "Export": "Export",
"Feedback sent": "Feedback sent",
"Rate %(brand)s": "Rate %(brand)s",
"Tell us below how you feel about %(brand)s so far.": "Tell us below how you feel about %(brand)s so far.",
@@ -3048,6 +3029,24 @@
"Space Autocomplete": "Space Autocomplete",
"Users": "Users",
"User Autocomplete": "User Autocomplete",
+ "Enter a number between %(min)s and %(max)s": "Enter a number between %(min)s and %(max)s",
+ "Size can only be a number between %(min)s MB and %(max)s MB": "Size can only be a number between %(min)s MB and %(max)s MB",
+ "Number of messages can only be a number between %(min)s and %(max)s": "Number of messages can only be a number between %(min)s and %(max)s",
+ "Number of messages": "Number of messages",
+ "MB": "MB",
+ "Export Cancelled": "Export Cancelled",
+ "The export was cancelled successfully": "The export was cancelled successfully",
+ "Export Successful": "Export Successful",
+ "Your messages were successfully exported": "Your messages were successfully exported",
+ "Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
+ "Stop": "Stop",
+ "Exporting your data": "Exporting your data",
+ "Export Chat": "Export Chat",
+ "Select from the options below to export chats from your timeline": "Select from the options below to export chats from your timeline",
+ "Format": "Format",
+ "Size Limit": "Size Limit",
+ "Include Attachments": "Include Attachments",
+ "Export": "Export",
"We'll store an encrypted copy of your keys on our server. Secure your backup with a Security Phrase.": "We'll store an encrypted copy of your keys on our server. Secure your backup with a Security Phrase.",
"For maximum security, this should be different from your account password.": "For maximum security, this should be different from your account password.",
"Enter a Security Phrase": "Enter a Security Phrase",
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index fe9b81fd0a..8166920b6a 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -22,7 +22,6 @@ import { haveTileForEvent } from "../../components/views/rooms/EventTile";
import { ExportType } from "./exportUtils";
import { IExportOptions } from "./exportUtils";
import { EventType } from "matrix-js-sdk/src/@types/event";
-import { MutableRefObject } from "react";
export default class JSONExporter extends Exporter {
protected totalSize = 0;
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index c95866ce9b..8e3ba81c4e 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -23,7 +23,6 @@ import { haveTileForEvent } from "../../components/views/rooms/EventTile";
import { ExportType } from "./exportUtils";
import { IExportOptions } from "./exportUtils";
import { textForEvent } from "../../TextForEvent";
-import { MutableRefObject } from "react";
export default class PlainTextExporter extends Exporter {
protected totalSize: number;
From 5dbc1034865328b0bac7b9de6086160807bbe43e Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Sat, 14 Aug 2021 11:50:13 +0530
Subject: [PATCH 165/176] Modify font-regex and declare json type
---
src/utils/exportUtils/JSONExport.ts | 2 +-
src/utils/exportUtils/exportCSS.ts | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index 8166920b6a..4d862e69e3 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -25,7 +25,7 @@ import { EventType } from "matrix-js-sdk/src/@types/event";
export default class JSONExporter extends Exporter {
protected totalSize = 0;
- protected messages: any[] = [];
+ protected messages: Record<string, any>[] = [];
constructor(
room: Room,
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index 67795830a2..965c7d775a 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -36,7 +36,7 @@ const getExportCSS = async (): Promise<string> => {
CSS = CSS.replace(fontFaceRegex, '');
CSS = CSS.replace(
- /font-family: Inter/g,
+ /font-family: (Inter|'Inter')/g,
`font-family: -apple-system, BlinkMacSystemFont, avenir next,
avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif`,
);
From 33bc26f0390afb98c76a5ec19822f1a8b7ada4da Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 17 Aug 2021 20:04:28 +0530
Subject: [PATCH 166/176] Change summary tiles order
---
src/components/views/right_panel/RoomSummaryCard.tsx | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx
index b59d664aa2..86106f3018 100644
--- a/src/components/views/right_panel/RoomSummaryCard.tsx
+++ b/src/components/views/right_panel/RoomSummaryCard.tsx
@@ -280,15 +280,15 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
<Button className="mx_RoomSummaryCard_icon_files" onClick={onRoomFilesClick}>
{ _t("Show files") }
</Button>
+ <Button className="mx_RoomSummaryCard_icon_export" onClick={onRoomExportClick}>
+ { _t("Export chat") }
+ </Button>
<Button className="mx_RoomSummaryCard_icon_share" onClick={onShareRoomClick}>
{ _t("Share room") }
</Button>
<Button className="mx_RoomSummaryCard_icon_settings" onClick={onRoomSettingsClick}>
{ _t("Room settings") }
</Button>
- <Button className="mx_RoomSummaryCard_icon_export" onClick={onRoomExportClick}>
- { _t("Export chat") }
- </Button>
</Group>
{ SettingsStore.getValue(UIFeature.Widgets) && <AppsSection room={room} /> }
From 4dae737922c11473e1bb5d9253860defe1ec561e Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 17 Aug 2021 20:06:09 +0530
Subject: [PATCH 167/176] i18n
---
src/i18n/strings/en_EN.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index d62871af23..53654fef80 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1818,9 +1818,9 @@
"%(count)s people|other": "%(count)s people",
"%(count)s people|one": "%(count)s person",
"Show files": "Show files",
+ "Export chat": "Export chat",
"Share room": "Share room",
"Room settings": "Room settings",
- "Export chat": "Export chat",
"Trusted": "Trusted",
"Not trusted": "Not trusted",
"%(count)s verified sessions|other": "%(count)s verified sessions",
From 7bad0b99d1812adeab376ed8b474ed451daa2cb7 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 18 Aug 2021 08:37:10 +0530
Subject: [PATCH 168/176] Fix links, header and export text
---
src/components/views/rooms/EventTile.tsx | 20 ++++++++-------
src/utils/exportUtils/HtmlExport.tsx | 31 ++++++++++++++++++------
src/utils/exportUtils/exportCSS.ts | 2 +-
3 files changed, 36 insertions(+), 17 deletions(-)
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 9dc9f8d484..b4a2e46feb 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -443,16 +443,18 @@ export default class EventTile extends React.Component<IProps, IState> {
componentDidMount() {
this.suppressReadReceiptAnimation = false;
const client = this.context;
- client.on("deviceVerificationChanged", this.onDeviceVerificationChanged);
- client.on("userTrustStatusChanged", this.onUserVerificationChanged);
- this.props.mxEvent.on("Event.decrypted", this.onDecrypted);
- if (this.props.showReactions) {
- this.props.mxEvent.on("Event.relationsCreated", this.onReactionsCreated);
- }
+ if (!this.props.forExport) {
+ client.on("deviceVerificationChanged", this.onDeviceVerificationChanged);
+ client.on("userTrustStatusChanged", this.onUserVerificationChanged);
+ this.props.mxEvent.on("Event.decrypted", this.onDecrypted);
+ if (this.props.showReactions) {
+ this.props.mxEvent.on("Event.relationsCreated", this.onReactionsCreated);
+ }
- if (this.shouldShowSentReceipt || this.shouldShowSendingReceipt) {
- client.on("Room.receipt", this.onRoomReceipt);
- this.isListeningForReceipts = true;
+ if (this.shouldShowSentReceipt || this.shouldShowSendingReceipt) {
+ client.on("Room.receipt", this.onRoomReceipt);
+ this.isListeningForReceipts = true;
+ }
}
}
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 39fa762596..124b390293 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -15,17 +15,18 @@ limitations under the License.
*/
import React from "react";
+import ReactDOM from "react-dom";
import Exporter from "./Exporter";
import { mediaFromMxc } from "../../customisations/Media";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { renderToStaticMarkup } from "react-dom/server";
+import { renderToStaticMarkup, renderToString } from "react-dom/server";
import { Layout } from "../../settings/Layout";
import { shouldFormContinuation } from "../../components/structures/MessagePanel";
import { formatFullDateNoDayNoTime, wantsDateSeparator } from "../../DateUtils";
import { RoomPermalinkCreator } from "../permalinks/Permalinks";
import { _t } from "../../languageHandler";
-import { EventType } from "matrix-js-sdk/src/@types/event";
+import { EventType, MsgType } from "matrix-js-sdk/src/@types/event";
import * as Avatar from "../../Avatar";
import EventTile, { haveTileForEvent } from "../../components/views/rooms/EventTile";
import DateSeparator from "../../components/views/messages/DateSeparator";
@@ -115,7 +116,7 @@ export default class HTMLExporter extends Exporter {
{ exporterName ? (
<>
<b>{ exporterName }</b>
- { exporter }
+ { " (" + exporter + ")" }
</>
) : (
<b>{ exporter }</b>
@@ -263,6 +264,7 @@ export default class HTMLExporter extends Exporter {
replacingEventId={mxEv.replacingEventId()}
forExport={true}
readReceipts={null}
+ alwaysShowTimestamps={true}
readReceiptMap={null}
showUrlPreview={false}
checkUnmounting={() => false}
@@ -285,10 +287,26 @@ export default class HTMLExporter extends Exporter {
protected async getEventTileMarkup(mxEv: MatrixEvent, continuation: boolean, filePath?: string) {
const hasAvatar = !!this.getAvatarURL(mxEv);
if (hasAvatar) await this.saveAvatarIfNeeded(mxEv);
+ const EventTile = this.getEventTile(mxEv, continuation);
+ let eventTileMarkup: string;
- const eventTile = this.getEventTile(mxEv, continuation);
+ if (
+ mxEv.getContent().msgtype == MsgType.Emote ||
+ mxEv.getContent().msgtype == MsgType.Notice ||
+ mxEv.getContent().msgtype === MsgType.Text
+ ) {
+ // to linkify textual events, we'll need lifecycle methods which won't be invoked in renderToString
+ // So, we'll have to render the component into a temporary root element
+ const tempRoot = document.createElement('div');
+ ReactDOM.render(
+ EventTile,
+ tempRoot,
+ );
+ eventTileMarkup = tempRoot.innerHTML;
+ } else {
+ eventTileMarkup = renderToString(EventTile);
+ }
- let eventTileMarkup = renderToStaticMarkup(eventTile);
if (filePath) {
const mxc = mxEv.getContent().url || mxEv.getContent().file?.url;
eventTileMarkup = eventTileMarkup.split(mxc).join(filePath);
@@ -390,8 +408,7 @@ export default class HTMLExporter extends Exporter {
}
public async export() {
- this.updateProgress("Starting export process", true, false);
- this.updateProgress("Fetching events");
+ this.updateProgress("Starting export...");
const fetchStart = performance.now();
const res = await this.getRequiredEvents();
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index 965c7d775a..7f83711fc2 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -121,7 +121,7 @@ const getExportCSS = async (): Promise<string> => {
}
.mx_ReplyThread_Export {
- margin-top: -5px;
+ margin-top: 0px;
margin-bottom: 5px;
}
From fea9f4a4df552f2e07915eb5a4ac83a00a4a3a54 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 18 Aug 2021 08:38:39 +0530
Subject: [PATCH 169/176] Use staticMarkup instead of string
---
src/utils/exportUtils/HtmlExport.tsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 124b390293..1c39dfe844 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -20,7 +20,7 @@ import Exporter from "./Exporter";
import { mediaFromMxc } from "../../customisations/Media";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { renderToStaticMarkup, renderToString } from "react-dom/server";
+import { renderToStaticMarkup } from "react-dom/server";
import { Layout } from "../../settings/Layout";
import { shouldFormContinuation } from "../../components/structures/MessagePanel";
import { formatFullDateNoDayNoTime, wantsDateSeparator } from "../../DateUtils";
@@ -304,7 +304,7 @@ export default class HTMLExporter extends Exporter {
);
eventTileMarkup = tempRoot.innerHTML;
} else {
- eventTileMarkup = renderToString(EventTile);
+ eventTileMarkup = renderToStaticMarkup(EventTile);
}
if (filePath) {
From 98b0642b65fcb5358ddf24a7494620d91c2aaace Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 20 Aug 2021 15:01:48 +0530
Subject: [PATCH 170/176] Split html into multiple files to improve scroll
performance
---
src/async-components/views/dialogs/ExportDialog.tsx | 6 ++++++
src/utils/exportUtils/HtmlExport.tsx | 10 ++++++----
2 files changed, 12 insertions(+), 4 deletions(-)
diff --git a/src/async-components/views/dialogs/ExportDialog.tsx b/src/async-components/views/dialogs/ExportDialog.tsx
index b61d7975bf..40c9db0a67 100644
--- a/src/async-components/views/dialogs/ExportDialog.tsx
+++ b/src/async-components/views/dialogs/ExportDialog.tsx
@@ -260,6 +260,9 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
title: _t("Export Cancelled"),
description: <p>{ _t("The export was cancelled successfully") }</p>,
hasCloseButton: true,
+ onFinished: () => {
+ setExportCancelled(false);
+ },
});
return null;
} else if (exportSuccessful) {
@@ -268,6 +271,9 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
title: _t("Export Successful"),
description: <p>{ _t("Your messages were successfully exported") }</p>,
hasCloseButton: true,
+ onFinished: () => {
+ setExportSuccessful(false);
+ },
});
return null;
} else if (displayCancel) {
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 1c39dfe844..5f8413fad8 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -387,10 +387,10 @@ export default class HTMLExporter extends Exporter {
return eventTile;
}
- protected async createHTML(events: MatrixEvent[]) {
+ protected async createHTML(events: MatrixEvent[], start: number) {
let content = "";
let prevEvent = null;
- for (let i = 0; i < events.length; i++) {
+ for (let i = start; i < Math.min(start + 1000, events.length); i++) {
const event = events[i];
this.updateProgress(`Processing event ${i + 1} out of ${events.length}`, false, true);
if (this.cancelled) return this.cleanUp();
@@ -417,9 +417,11 @@ export default class HTMLExporter extends Exporter {
this.updateProgress(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000}s`, true, false);
this.updateProgress("Creating HTML...");
- const html = await this.createHTML(res);
+ for (let page = 0; page < res.length / 1000; page++) {
+ const html = await this.createHTML(res, page * 1000);
+ this.addFile(`messages${page ? page + 1 : ""}.html`, new Blob([html]));
+ }
const exportCSS = await getExportCSS();
- this.addFile("index.html", new Blob([html]));
this.addFile("css/style.css", new Blob([exportCSS]));
this.addFile("js/script.js", new Blob([exportJS]));
From b49c8ebf601ececb2f79027b220c98e17ecb4650 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 20 Aug 2021 17:12:52 +0530
Subject: [PATCH 171/176] Increase max_width for exported html
---
src/utils/exportUtils/exportCSS.ts | 4 ++++
1 file changed, 4 insertions(+)
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index 7f83711fc2..46024590a7 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -133,6 +133,10 @@ const getExportCSS = async (): Promise<string> => {
white-space: nowrap;
overflow: hidden;
}
+
+ .mx_MatrixChat{
+ max_width: 100%;
+ }
`;
return CSS + customCSS;
From d1e3d35d40dbba00dd9d767767b9d821159c0244 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 22 Sep 2021 22:17:23 +0530
Subject: [PATCH 172/176] Change export bundle filename format, light theme for
all exports and import jszip after export cta
---
res/css/views/dialogs/_ExportDialog.scss | 2 +-
.../views/dialogs/ExportDialog.tsx | 64 ++++----
.../views/right_panel/RoomSummaryCard.tsx | 2 +-
src/i18n/strings/en_EN.json | 2 +-
src/utils/exportUtils/Exporter.ts | 6 +-
src/utils/exportUtils/exportCSS.ts | 99 +------------
src/utils/exportUtils/exportCustomCSS.css | 138 ++++++++++++++++++
7 files changed, 178 insertions(+), 135 deletions(-)
rename src/{async-components => components}/views/dialogs/ExportDialog.tsx (89%)
create mode 100644 src/utils/exportUtils/exportCustomCSS.css
diff --git a/res/css/views/dialogs/_ExportDialog.scss b/res/css/views/dialogs/_ExportDialog.scss
index f3e418354c..4727ab5f31 100644
--- a/res/css/views/dialogs/_ExportDialog.scss
+++ b/res/css/views/dialogs/_ExportDialog.scss
@@ -20,7 +20,7 @@ limitations under the License.
display: block;
font-family: $font-family;
font-weight: $font-semi-bold;
- color: $primary-fg-color;
+ color: $accent-fg-color;
margin-top: 18px;
margin-bottom: 12px;
}
diff --git a/src/async-components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
similarity index 89%
rename from src/async-components/views/dialogs/ExportDialog.tsx
rename to src/components/views/dialogs/ExportDialog.tsx
index 40c9db0a67..33a14887fb 100644
--- a/src/async-components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -17,27 +17,26 @@ limitations under the License.
import React, { useRef, useState } from "react";
import { Room } from "matrix-js-sdk/src";
import { _t } from "../../../languageHandler";
-import { IDialogProps } from "../../../components/views/dialogs/IDialogProps";
-import BaseDialog from "../../../components/views/dialogs/BaseDialog";
-import DialogButtons from "../../../components/views/elements/DialogButtons";
-import Field from "../../../components/views/elements/Field";
-import StyledRadioGroup from "../../../components/views/elements/StyledRadioGroup";
-import StyledCheckbox from "../../../components/views/elements/StyledCheckbox";
+import { IDialogProps } from "./IDialogProps";
+import BaseDialog from "./BaseDialog";
+import DialogButtons from "../elements/DialogButtons";
+import Field from "../elements/Field";
+import StyledRadioGroup from "../elements/StyledRadioGroup";
+import StyledCheckbox from "../elements/StyledCheckbox";
import {
ExportFormat,
ExportType,
textForFormat,
textForType,
} from "../../../utils/exportUtils/exportUtils";
-import withValidation, { IFieldState, IValidationResult } from "../../../components/views/elements/Validation";
+import withValidation, { IFieldState, IValidationResult } from "../elements/Validation";
import HTMLExporter from "../../../utils/exportUtils/HtmlExport";
import JSONExporter from "../../../utils/exportUtils/JSONExport";
import PlainTextExporter from "../../../utils/exportUtils/PlainTextExport";
import { useStateCallback } from "../../../hooks/useStateCallback";
import Exporter from "../../../utils/exportUtils/Exporter";
-import Spinner from "../../../components/views/elements/Spinner";
-import Modal from "../../../Modal";
-import InfoDialog from "../../../components/views/dialogs/InfoDialog";
+import Spinner from "../elements/Spinner";
+import InfoDialog from "./InfoDialog";
interface IProps extends IDialogProps {
room: Room;
@@ -215,11 +214,10 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
};
const confirmCanel = async () => {
- await exporter?.cancelExport().then(() => {
- setExportCancelled(true);
- setExporting(false);
- setExporter(null);
- });
+ await exporter?.cancelExport();
+ setExportCancelled(true);
+ setExporting(false);
+ setExporter(null);
};
const exportFormatOptions = Object.keys(ExportFormat).map((format) => ({
@@ -256,26 +254,26 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
if (exportCancelled) {
// Display successful cancellation message
- Modal.createTrackedDialog("Export Cancelled", "", InfoDialog, {
- title: _t("Export Cancelled"),
- description: <p>{ _t("The export was cancelled successfully") }</p>,
- hasCloseButton: true,
- onFinished: () => {
- setExportCancelled(false);
- },
- });
- return null;
+ return (
+ <InfoDialog
+ title={_t("Export Successful")}
+ description={_t("The export was cancelled successfully")}
+ hasCloseButton={true}
+ onFinished={onFinished}
+ />
+ );
} else if (exportSuccessful) {
// Display successful export message
- Modal.createTrackedDialog("Export Successful", "", InfoDialog, {
- title: _t("Export Successful"),
- description: <p>{ _t("Your messages were successfully exported") }</p>,
- hasCloseButton: true,
- onFinished: () => {
- setExportSuccessful(false);
- },
- });
- return null;
+ return (
+ <InfoDialog
+ title={_t("Export Successful")}
+ description={_t(
+ "Your export was successful. Find it in your Downloads folder.",
+ )}
+ hasCloseButton={true}
+ onFinished={onFinished}
+ />
+ );
} else if (displayCancel) {
// Display cancel warning
return (
diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx
index db642ead3d..1fe556dde2 100644
--- a/src/components/views/right_panel/RoomSummaryCard.tsx
+++ b/src/components/views/right_panel/RoomSummaryCard.tsx
@@ -47,6 +47,7 @@ import { useRoomMemberCount } from "../../../hooks/useRoomMembers";
import { Container, MAX_PINNED, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
import RoomName from "../elements/RoomName";
import UIStore from "../../../stores/UIStore";
+import ExportDialog from "../dialogs/ExportDialog";
interface IProps {
room: Room;
@@ -241,7 +242,6 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
};
const onRoomExportClick = async () => {
- const { default: ExportDialog } = await import("../../../async-components/views/dialogs/ExportDialog");
Modal.createTrackedDialog('export room dialog', '', ExportDialog, {
room,
});
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 9e6c90ec72..e80aabdd61 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -3061,7 +3061,7 @@
"Export Cancelled": "Export Cancelled",
"The export was cancelled successfully": "The export was cancelled successfully",
"Export Successful": "Export Successful",
- "Your messages were successfully exported": "Your messages were successfully exported",
+ "Your export was successful. Find it in your Downloads folder.": "Your export was successful. Find it in your Downloads folder.",
"Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
"Stop": "Stop",
"Exporting your data": "Exporting your data",
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 7254bdc3a4..becc36449d 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -22,9 +22,9 @@ import { decryptFile } from "../DecryptFile";
import { mediaFromContent } from "../../customisations/Media";
import { formatFullDateNoDay } from "../../DateUtils";
import { Direction, MatrixClient } from "matrix-js-sdk";
-import JSZip from "jszip";
import { saveAs } from "file-saver";
import { _t } from "../../languageHandler";
+import SdkConfig from "../../SdkConfig";
type BlobFile = {
name: string;
@@ -71,7 +71,9 @@ export default abstract class Exporter {
}
protected async downloadZIP(): Promise<string | void> {
- const filename = `matrix-export-${formatFullDateNoDay(new Date())}.zip`;
+ const brand = SdkConfig.get().brand;
+ const filename = `${brand} - Chat Export -${formatFullDateNoDay(new Date())}.zip`;
+ const { default: JSZip } = await import('jszip');
const zip = new JSZip();
// Create a writable stream to the directory
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index 46024590a7..3bad94d938 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -16,13 +16,12 @@ limitations under the License.
/* eslint-disable max-len, camelcase */
-import ThemeWatcher from "../../settings/watchers/ThemeWatcher";
+import customCSS from "!!raw-loader!./exportCustomCSS.css";
const getExportCSS = async (): Promise<string> => {
- const theme = new ThemeWatcher().getEffectiveTheme();
const stylesheets: string[] = [];
document.querySelectorAll('link[rel="stylesheet"]').forEach((e: any) => {
- if (e.href.endsWith("bundle.css") || e.href.endsWith(`theme-${theme}.css`)) {
+ if (e.href.endsWith("bundle.css") || e.href.endsWith("theme-light.css")) {
stylesheets.push(e.href);
}
});
@@ -45,100 +44,6 @@ const getExportCSS = async (): Promise<string> => {
"font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace",
);
- const customCSS = `
-#snackbar {
- display: flex;
- visibility: hidden;
- min-width: 250px;
- margin-left: -125px;
- background-color: #333;
- color: #fff;
- text-align: center;
- position: fixed;
- z-index: 1;
- left: 50%;
- bottom: 30px;
- font-size: 17px;
- padding: 6px 16px;
- font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
- font-weight: 400;
- line-height: 1.43;
- border-radius: 4px;
- letter-spacing: 0.01071em;
- }
-
- #snackbar.mx_show {
- visibility: visible;
- -webkit-animation: mx_snackbar_fadein 0.5s, mx_snackbar_fadeout 0.5s 2.5s;
- animation: mx_snackbar_fadein 0.5s, mx_snackbar_fadeout 0.5s 2.5s;
- }
-
- a.mx_reply_anchor{
- cursor: pointer;
- color: #238cf5;
- }
-
- a.mx_reply_anchor:hover{
- text-decoration: underline;
- }
-
- @-webkit-keyframes mx_snackbar_fadein {
- from {bottom: 0; opacity: 0;}
- to {bottom: 30px; opacity: 1;}
- }
-
- @keyframes mx_snackbar_fadein {
- from {bottom: 0; opacity: 0;}
- to {bottom: 30px; opacity: 1;}
- }
-
- @-webkit-keyframes mx_snackbar_fadeout {
- from {bottom: 30px; opacity: 1;}
- to {bottom: 0; opacity: 0;}
- }
-
- @keyframes mx_snackbar_fadeout {
- from {bottom: 30px; opacity: 1;}
- to {bottom: 0; opacity: 0;}
- }
-
- * {
- scroll-behavior: smooth !important;
- }
-
- .mx_Export_EventWrapper:target {
- background: ${theme == 'light' ? "white" : "#15191E"};
- animation: mx_event_highlight_animation 2s linear;
- }
-
- @keyframes mx_event_highlight_animation {
- 0%,100% {
- background: ${theme == 'light' ? "white" : "#15191E"};
- }
- 50% {
- background: ${theme == 'light' ? "#e3e2df" : "#21262c"};
- }
- }
-
- .mx_ReplyThread_Export {
- margin-top: 0px;
- margin-bottom: 5px;
- }
-
- .mx_RedactedBody {
- padding-left: unset;
- }
-
- img {
- white-space: nowrap;
- overflow: hidden;
- }
-
- .mx_MatrixChat{
- max_width: 100%;
- }
-`;
-
return CSS + customCSS;
};
diff --git a/src/utils/exportUtils/exportCustomCSS.css b/src/utils/exportUtils/exportCustomCSS.css
new file mode 100644
index 0000000000..284f54ac08
--- /dev/null
+++ b/src/utils/exportUtils/exportCustomCSS.css
@@ -0,0 +1,138 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/*
+ This file is raw-imported (imported as plain text) for the export bundle, which is the reason for the .css format and the colours being hard-coded hard-coded.
+*/
+
+#snackbar {
+ display: flex;
+ visibility: hidden;
+ min-width: 250px;
+ margin-left: -125px;
+ background-color: #333;
+ color: #fff;
+ text-align: center;
+ position: fixed;
+ z-index: 1;
+ left: 50%;
+ bottom: 30px;
+ font-size: 17px;
+ padding: 6px 16px;
+ font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir,
+ segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial,
+ sans-serif;
+ font-weight: 400;
+ line-height: 1.43;
+ border-radius: 4px;
+ letter-spacing: 0.01071em;
+}
+
+#snackbar.mx_show {
+ visibility: visible;
+ -webkit-animation: mx_snackbar_fadein 0.5s, mx_snackbar_fadeout 0.5s 2.5s;
+ animation: mx_snackbar_fadein 0.5s, mx_snackbar_fadeout 0.5s 2.5s;
+}
+
+a.mx_reply_anchor {
+ cursor: pointer;
+ color: #238cf5;
+}
+
+a.mx_reply_anchor:hover {
+ text-decoration: underline;
+}
+
+@-webkit-keyframes mx_snackbar_fadein {
+ from {
+ bottom: 0;
+ opacity: 0;
+ }
+ to {
+ bottom: 30px;
+ opacity: 1;
+ }
+}
+
+@keyframes mx_snackbar_fadein {
+ from {
+ bottom: 0;
+ opacity: 0;
+ }
+ to {
+ bottom: 30px;
+ opacity: 1;
+ }
+}
+
+@-webkit-keyframes mx_snackbar_fadeout {
+ from {
+ bottom: 30px;
+ opacity: 1;
+ }
+ to {
+ bottom: 0;
+ opacity: 0;
+ }
+}
+
+@keyframes mx_snackbar_fadeout {
+ from {
+ bottom: 30px;
+ opacity: 1;
+ }
+ to {
+ bottom: 0;
+ opacity: 0;
+ }
+}
+
+* {
+ scroll-behavior: smooth !important;
+}
+
+.mx_Export_EventWrapper:target {
+ background: white;
+ animation: mx_event_highlight_animation 2s linear;
+}
+
+@keyframes mx_event_highlight_animation {
+ 0%,
+ 100% {
+ background: white;
+ }
+ 50% {
+ background: #e3e2df;
+ }
+}
+
+.mx_ReplyThread_Export {
+ margin-top: 0px;
+ margin-bottom: 5px;
+}
+
+.mx_RedactedBody {
+ padding-left: unset;
+}
+
+img {
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+.mx_MatrixChat {
+ max-width: 100%;
+}
From f35dae8c943e3dc0edeada13f498d19a71e2c414 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 22 Sep 2021 22:22:45 +0530
Subject: [PATCH 173/176] i18n
---
src/i18n/strings/en_EN.json | 35 +++++++++++++++++------------------
1 file changed, 17 insertions(+), 18 deletions(-)
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index e80aabdd61..32e8411a26 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2355,6 +2355,23 @@
"There was an error updating your community. The server is unable to process your request.": "There was an error updating your community. The server is unable to process your request.",
"Update community": "Update community",
"An error has occurred.": "An error has occurred.",
+ "Enter a number between %(min)s and %(max)s": "Enter a number between %(min)s and %(max)s",
+ "Size can only be a number between %(min)s MB and %(max)s MB": "Size can only be a number between %(min)s MB and %(max)s MB",
+ "Number of messages can only be a number between %(min)s and %(max)s": "Number of messages can only be a number between %(min)s and %(max)s",
+ "Number of messages": "Number of messages",
+ "MB": "MB",
+ "Export Successful": "Export Successful",
+ "The export was cancelled successfully": "The export was cancelled successfully",
+ "Your export was successful. Find it in your Downloads folder.": "Your export was successful. Find it in your Downloads folder.",
+ "Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
+ "Stop": "Stop",
+ "Exporting your data": "Exporting your data",
+ "Export Chat": "Export Chat",
+ "Select from the options below to export chats from your timeline": "Select from the options below to export chats from your timeline",
+ "Format": "Format",
+ "Size Limit": "Size Limit",
+ "Include Attachments": "Include Attachments",
+ "Export": "Export",
"Feedback sent": "Feedback sent",
"Rate %(brand)s": "Rate %(brand)s",
"Tell us below how you feel about %(brand)s so far.": "Tell us below how you feel about %(brand)s so far.",
@@ -3053,24 +3070,6 @@
"Space Autocomplete": "Space Autocomplete",
"Users": "Users",
"User Autocomplete": "User Autocomplete",
- "Enter a number between %(min)s and %(max)s": "Enter a number between %(min)s and %(max)s",
- "Size can only be a number between %(min)s MB and %(max)s MB": "Size can only be a number between %(min)s MB and %(max)s MB",
- "Number of messages can only be a number between %(min)s and %(max)s": "Number of messages can only be a number between %(min)s and %(max)s",
- "Number of messages": "Number of messages",
- "MB": "MB",
- "Export Cancelled": "Export Cancelled",
- "The export was cancelled successfully": "The export was cancelled successfully",
- "Export Successful": "Export Successful",
- "Your export was successful. Find it in your Downloads folder.": "Your export was successful. Find it in your Downloads folder.",
- "Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
- "Stop": "Stop",
- "Exporting your data": "Exporting your data",
- "Export Chat": "Export Chat",
- "Select from the options below to export chats from your timeline": "Select from the options below to export chats from your timeline",
- "Format": "Format",
- "Size Limit": "Size Limit",
- "Include Attachments": "Include Attachments",
- "Export": "Export",
"We'll store an encrypted copy of your keys on our server. Secure your backup with a Security Phrase.": "We'll store an encrypted copy of your keys on our server. Secure your backup with a Security Phrase.",
"For maximum security, this should be different from your account password.": "For maximum security, this should be different from your account password.",
"Enter a Security Phrase": "Enter a Security Phrase",
From 6ccb7e91452a34eab31eab9a1e92cfa5685b84f6 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 29 Sep 2021 19:37:21 +0530
Subject: [PATCH 174/176] Space after brand
---
src/utils/exportUtils/Exporter.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index becc36449d..3209dd085b 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -72,7 +72,7 @@ export default abstract class Exporter {
protected async downloadZIP(): Promise<string | void> {
const brand = SdkConfig.get().brand;
- const filename = `${brand} - Chat Export -${formatFullDateNoDay(new Date())}.zip`;
+ const filename = `${brand} - Chat Export - ${formatFullDateNoDay(new Date())}.zip`;
const { default: JSZip } = await import('jszip');
const zip = new JSZip();
From d264f5f98e8984751dc11cd8abecc3018847d62f Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 29 Sep 2021 20:51:18 +0530
Subject: [PATCH 175/176] Change js-sdk import style
---
src/utils/exportUtils/Exporter.ts | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 3209dd085b..128db47390 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -21,7 +21,8 @@ import { IExportOptions, ExportType } from "./exportUtils";
import { decryptFile } from "../DecryptFile";
import { mediaFromContent } from "../../customisations/Media";
import { formatFullDateNoDay } from "../../DateUtils";
-import { Direction, MatrixClient } from "matrix-js-sdk";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { Direction } from "matrix-js-sdk/src/models/event-timeline";
import { saveAs } from "file-saver";
import { _t } from "../../languageHandler";
import SdkConfig from "../../SdkConfig";
From e0267258a46f1998a0788aaeca399e92b1df9f5e Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Thu, 30 Sep 2021 16:24:31 +0530
Subject: [PATCH 176/176] Initialize css string
---
src/utils/exportUtils/exportCSS.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index 3bad94d938..f7f471fda3 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -25,7 +25,7 @@ const getExportCSS = async (): Promise<string> => {
stylesheets.push(e.href);
}
});
- let CSS: string;
+ let CSS = "";
for (const stylesheet of stylesheets) {
const res = await fetch(stylesheet);
const innerText = await res.text();