From ebdb340a5c5393ff33089de97aa0b50a92630f99 Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Wed, 19 May 2021 17:31:52 +0530 Subject: [PATCH 001/299] 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 = ; + const rightRow =
+ { 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) => (` + + + + + Exported Data + + + + + +
+
+
+
${room.name}
+
+
+
+
+ ${content} +
+
+
+ + +`); + + +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 `
+ ${content} +
`; +}; + + +//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 ` +
+ ${!joined ? `
+
+
${event.sender.name[0]}
+
+
` : ``} +
+
${new Date(event._localTimestamp).toLocaleTimeString().slice(0, -3)}
+ ${!joined ? `
+ ${event.sender.name} +
`: ``} +
${event.getContent().body}
+
+
+ `; +}; + +const replyAnchor = (eventId) => { + return `this message}`; +}; + +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 ` +
+
+ ${new Date(event._localTimestamp) + .toLocaleString("en-us", {year: "numeric", month: "long", day: "numeric" })} +
+
+ `; + } + 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 += ` +
+
+ ${textForEvent(event)} +
+
+ `; + } + 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 Date: Fri, 21 May 2021 10:44:38 +0530 Subject: [PATCH 002/299] 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 `
- ${content} -
`; -}; - //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 `
${!joined ? `
@@ -328,35 +322,35 @@ const createBody = (event, joined = false) => {
` : ``}
-
${new Date(event._localTimestamp).toLocaleTimeString().slice(0, -3)}
+
${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}
${!joined ? `
${event.sender.name}
`: ``} + ${isReply ? + `
+ In reply to this message +
`: ``}
${event.getContent().body}
`; }; -const replyAnchor = (eventId) => { - return `this message}`; -}; - -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 `
- ${new Date(event._localTimestamp) + ${new Date(event.getTs()) .toLocaleString("en-us", {year: "numeric", month: "long", day: "numeric" })}
@@ -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 Date: Fri, 21 May 2021 13:18:39 +0530 Subject: [PATCH 003/299] 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 Date: Fri, 21 May 2021 20:00:01 +0530 Subject: [PATCH 004/299] 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) => (` @@ -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 ` -
- ${!joined ? `
-
-
${event.sender.name[0]}
-
-
` : ``} -
-
${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}
- ${!joined ? `
- ${event.sender.name} -
`: ``} - ${isReply ? - `
- In reply to this message -
`: ``} -
${event.getContent().body}
-
-
- `; + +const getUserPic = async (event) => { + const member = event.sender; + if (!member.getMxcAvatarUrl()) { + return ` +
+
+
${event.sender.name[0]}
+
+
+ `; + } 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 ` +
+
+ +
+
+ `; + } }; - +//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 = `
${event.getContent().body}
`; + break; + case "m.image": { + messageBody = ` + + `; + const blob = await getImageData(event); + zip.file(`images/${event.getId()}.png`, blob); + } + break; + default: + break; + } + + return ` +
+ ${!joined ? userPic : ``} +
+
${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}
+ ${!joined ? `
+ ${event.sender.name} +
`: ``} + ${isReply ? + `
+ In reply to this message +
`: ``} + ${messageBody} +
+
+ `; +}; + + +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 Date: Fri, 21 May 2021 20:25:29 +0530 Subject: [PATCH 005/299] 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 = ` - + `; 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 ? `
${textForEvent(event)}
- `; + ` : ""; } prevEvent = event; } From dfb7aa4320834dfc58016a07811f1866e4ebd44b Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Sat, 22 May 2021 11:32:55 +0530 Subject: [PATCH 006/299] 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) => (` @@ -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 `
-
${event.sender.name[0]}
+
+ ${event.sender.name[0]} +
;
`; @@ -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 = `
${event.getContent().body}
`; break; case "m.image": { - messageBody = ` - - `; + messageBody = ` + + + `; 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 ` -
+
${!joined ? userPic : ``}
-
${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}
+
+ ${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)} +
; ${!joined ? `
${event.sender.name}
`: ``} @@ -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((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 Date: Sat, 22 May 2021 11:38:32 +0530 Subject: [PATCH 007/299] 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) => {
${event.sender.name[0]} -
; +
`; @@ -386,7 +386,7 @@ const createMessageBody = async (event: MatrixEvent, joined = false, isReply = f
${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)} -
; +
${!joined ? `
${event.sender.name}
`: ``} From a47117e3b025f1a44f4538be31a7ededd5aca395 Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Sat, 22 May 2021 11:55:57 +0530 Subject: [PATCH 008/299] 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 `
${!joined ? userPic : ``} -
-
- ${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)} -
- ${!joined ? `
- ${event.sender.name} -
`: ``} +
+
+ ${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)} +
+ ${!joined ? ` +
+ ${event.sender.name} +
`: ``} ${isReply ? - `
- In reply to this message -
`: ``} + `
+ In reply to this message +
`: ``} ${messageBody} -
-
+
+
`; }; @@ -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 Date: Sat, 22 May 2021 12:35:13 +0530 Subject: [PATCH 009/299] 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) => (` - - - Exported Data - - - - - -
-
-
-
${room.name}
+ + + Exported Data + + + + +
+
+
+
${room.name}
+
+
+
+
+ ${content} +
+
-
-
-
- ${content} -
-
-
- + `); @@ -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 ` -
-
-
+
+
+
${event.sender.name[0]}
@@ -305,9 +271,13 @@ const getUserPic = async (event: MatrixEvent) => { } return ` -
-
- +
+
+
`; @@ -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 ` -
-
+
+
${new Date(event.getTs()) .toLocaleString("en-us", {year: "numeric", month: "long", day: "numeric" })}
@@ -369,12 +339,16 @@ const createMessageBody = async (event: MatrixEvent, joined = false, isReply = f let messageBody = ""; switch (event.getContent().msgtype) { case "m.text": - messageBody = `
${event.getContent().body}
`; + messageBody = `
${event.getContent().body}
`; break; case "m.image": { messageBody = ` - - + + `; 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 ` -
+
${!joined ? userPic : ``} -
-
+
+
${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}
${!joined ? ` -
+
${event.sender.name}
`: ``} ${isReply ? - `
+ `
In reply to this message
`: ``} ${messageBody} @@ -424,8 +398,8 @@ const createHTML = async (events: MatrixEvent[], room: Room) => { } else { const eventText = textForEvent(event); content += eventText ? ` -
-
+
+
${textForEvent(event)}
@@ -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 Date: Sat, 22 May 2021 13:33:13 +0530 Subject: [PATCH 010/299] 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 Date: Mon, 24 May 2021 18:01:09 +0530 Subject: [PATCH 011/299] 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 `
-
+
${event.sender.name[0]}
@@ -369,7 +373,7 @@ const createMessageBody = async (event: MatrixEvent, joined = false, isReply = f ${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}
${!joined ? ` -
+
${event.sender.name}
`: ``} ${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 Date: Mon, 24 May 2021 18:04:03 +0530 Subject: [PATCH 012/299] 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 Date: Mon, 24 May 2021 19:17:07 +0530 Subject: [PATCH 013/299] 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) => (` - - - - - Exported Data - - - - -
-
-
-
${room.name}
-
-
-
-
- ${content} -
-
-
- - -`); +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; -//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(); +} + +protected wrapHTML(content: string, room: Room) { + return ` + + + + + Exported Data + + + + +
+
+
+
${room.name}
+
+
+
+
+ ${content} +
+
+
+ + +` +} -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 `
${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) => {
`; } -}; - -//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 ` -
-
- ${new Date(event.getTs()) - .toLocaleString("en-us", {year: "numeric", month: "long", day: "numeric" })} -
-
- `; - } - 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 ` +
+
+ ${new Date(event.getTs()) + .toLocaleString("en-us", {year: "numeric", month: "long", day: "numeric" })} +
+
+ `; + } + 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" /> `; - 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)}
${!joined ? ` -
+
${event.sender.name}
`: ``} ${isReply ? @@ -384,23 +448,22 @@ const createMessageBody = async (event: MatrixEvent, joined = false, isReply = f
`; -}; +} - -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 Date: Mon, 24 May 2021 19:19:10 +0530 Subject: [PATCH 014/299] 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 Date: Mon, 24 May 2021 20:48:13 +0530 Subject: [PATCH 015/299] 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 +} 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; constructor(res: MatrixEvent[], room: Room) { - this.res = res; - this.room = room; + super(res, room); this.zip = new JSZip(); this.avatars = new Map(); } From 43a111d4c989ecb93fb8f29b158dd8b8f286932e Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Mon, 24 May 2021 21:20:16 +0530 Subject: [PATCH 016/299] 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 + abstract export(): Promise; } 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 Date: Tue, 25 May 2021 16:33:01 +0530 Subject: [PATCH 017/299] 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; + protected zip: JSZip; + protected avatars: Map; -constructor(res: MatrixEvent[], room: Room) { - super(res, room); - this.zip = new JSZip(); - this.avatars = new Map(); -} + constructor(res: MatrixEvent[], room: Room) { + super(res, room); + this.zip = new JSZip(); + this.avatars = new Map(); + } -protected wrapHTML(content: string, room: Room) { - return ` - - - - - Exported Data - - - - -
-
-
-
${room.name}
+ protected wrapHTML(content: string, room: Room) { + return ` + + + + + Exported Data + + + + +
+
+
+
${room.name}
+
+
+
+
+ ${content} +
-
-
- ${content} -
+ + + ` + } + + 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 ` +
+
+
+ ${event.sender.name[0]}
- - -` -} - - -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 ` -
-
-
- ${event.sender.name[0]} -
-
-
- `; - } 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 ` -
-
- -
-
- `; - } -} - - -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 ` -
-
- ${new Date(event.getTs()) - .toLocaleString("en-us", {year: "numeric", month: "long", day: "numeric" })} -
`; - } - 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 = `
${event.getContent().body}
`; - break; - case "m.image": { - messageBody = ` - - - `; - const blob = await this.getImageData(event); - this.zip.file(`images/${event.getId()}.png`, blob); - } - break; - default: - break; - } - - return ` -
- ${!joined ? userPic : ``} -
-
- ${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)} -
- ${!joined ? ` -
- ${event.sender.name} -
`: ``} - ${isReply ? - `
- In reply to this message -
`: ``} - ${messageBody} -
-
- `; -} - -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 ? ` -
-
- ${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 ` +
+
+
- ` : ""; + `; } - 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((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 ` +
+
+ ${new Date(event.getTs()) + .toLocaleString("en-us", {year: "numeric", month: "long", day: "numeric" })} +
+
+ `; + } + 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 = `
${event.getContent().body}
`; + break; + case "m.image": { + messageBody = ` + + + `; + const blob = await this.getImageData(event); + this.zip.file(`images/${event.getId()}.png`, blob); + } + break; + default: + break; + } + + return ` +
+ ${!joined ? userPic : ``} +
+
+ ${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)} +
+ ${!joined ? ` +
+ ${event.sender.name} +
`: ``} + ${isReply ? + `
+ In reply to this message +
`: ``} + ${messageBody} +
+
+ `; + } + + 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 ? ` +
+
+ ${textForEvent(event)} +
+
+ ` : ""; + } + 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((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 Date: Tue, 25 May 2021 17:48:08 +0530 Subject: [PATCH 018/299] 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 Date: Tue, 25 May 2021 17:52:23 +0530 Subject: [PATCH 019/299] 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 Date: Wed, 26 May 2021 10:28:20 +0530 Subject: [PATCH 020/299] 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 = `
${event.getContent().body}
`; + messageBody = ` +
+ ${sanitizeHtml(event.getContent().body, sanitizeHtmlParams)} +
`; break; case "m.image": { + const blob = await this.getMediaBlob(event); + const fileName = `${event.getId()}.${blob.type.replace("image/", "")}`; messageBody = ` `; - 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 = ` +
+
`; + 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 = ` +
+
`; + 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 Date: Wed, 26 May 2021 18:00:27 +0530 Subject: [PATCH 021/299] 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; @@ -295,6 +309,7 @@ export default class HTMLExporter extends Exporter { Exported Data +
@@ -459,6 +474,10 @@ export default class HTMLExporter extends Exporter { break; } + if (isReply) { + messageBody = event.getContent().formatted_body.replace(/.*<\/mx-reply>/, '') + } + return `
${!joined ? userPic : ``} @@ -472,7 +491,7 @@ export default class HTMLExporter extends Exporter {
`: ``} ${isReply ? `
- In reply to this message + In reply to this message
`: ``} ${messageBody}
@@ -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 Date: Thu, 27 May 2021 14:06:04 +0530 Subject: [PATCH 022/299] 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 {
+
` @@ -427,6 +487,13 @@ export default class HTMLExporter extends Exporter { ${sanitizeHtml(event.getContent().body, sanitizeHtmlParams)}
`; break; + case "m.emote": + messageBody = ` +
+ * ${event.sender ? event.sender.name : event.getSender()} + ${sanitizeHtml(event.getContent().body, sanitizeHtmlParams)} +
`; + 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 {
`: ``} ${isReply ? `
- In reply to this message + In reply to this message
`: ``} ${messageBody}
From 573a3ca98342e98815d441ba0c0bb50c17ab33b9 Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Mon, 31 May 2021 19:01:32 +0530 Subject: [PATCH 023/299] 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
; } return ; + } else if (this.props.isExporting) { + const eventId = ReplyThread.getParentEventId(this.props.parentEv); + header =

+ In reply to this message +

; } else if (this.state.loading) { const Spinner = sdk.getComponent("elements.Spinner"); header = ; 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 { // 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 { } 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 { } const MessageActionBar = sdk.getComponent('messages.MessageActionBar'); - const actionBar = !isEditing ? { 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 { // 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 { } 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 { - 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; - - constructor(res: MatrixEvent[], room: Room) { - super(res, room); - this.zip = new JSZip(); - this.avatars = new Map(); - } - - protected wrapHTML(content: string, room: Room) { - return ` - - - - - Exported Data - - - - - -
-
-
-
${room.name}
-
-
-
-
- ${content} -
-
-
-
- - - ` - } - - 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 ` -
-
-
- ${event.sender.name[0]} -
-
-
- `; - } 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 ` -
-
- -
-
- `; - } - } - - 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 ` -
-
- ${new Date(event.getTs()) - .toLocaleString("en-us", {year: "numeric", month: "long", day: "numeric" })} -
-
- `; - } - 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 = ` -
- ${sanitizeHtml(event.getContent().body, sanitizeHtmlParams)} -
`; - break; - case "m.emote": - messageBody = ` -
- * ${event.sender ? event.sender.name : event.getSender()} - ${sanitizeHtml(event.getContent().body, sanitizeHtmlParams)} -
`; - break; - case "m.image": { - const blob = await this.getMediaBlob(event); - const fileName = `${event.getId()}.${blob.type.replace("image/", "")}`; - messageBody = ` - - - `; - 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 = ` -
-
`; - 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 = ` -
-
`; - this.zip.file(`audio/${fileName}`, blob); - break; - } - default: - break; - } - - if (isReply) { - messageBody = event.getContent().formatted_body.replace(/.*<\/mx-reply>/, '') - } - - return ` -
- ${!joined ? userPic : ``} -
-
- ${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)} -
- ${!joined ? ` -
- ${event.sender.name} -
`: ``} - ${isReply ? - `
- In reply to this message -
`: ``} - ${messageBody} -
-
- `; - } - - 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 ? ` -
-
- ${textForEvent(event)} -
-
- ` : ""; - } - 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((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; + + constructor(res: MatrixEvent[], room: Room) { + super(res, room); + this.zip = new JSZip(); + this.avatars = new Map(); + } + + protected wrapHTML(content: string, room: Room) { + return ` + + + + + + + + + Exported Data + + +
+
+
+
+
+
+
+
+ +
+
+
+
+ ${room.name} +
+
+
+
+
+
+
+
+
+
+
    + ${content} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + ` + } + + // 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 =
    • ; + 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 =
  • + 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} + /> +
    • + 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((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 Date: Mon, 31 May 2021 19:07:49 +0530 Subject: [PATCH 024/299] 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 Date: Mon, 31 May 2021 21:01:19 +0530 Subject: [PATCH 025/299] 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 ; + } + 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 ( ); } 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 { {placeholder}
    -
    +
    { /* * 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 ( - {placeholder} + { placeholder }
    { fileName } @@ -323,7 +323,7 @@ export default class MFileBody extends React.Component { } else { return ( - {placeholder} + { placeholder }
    @@ -336,7 +336,7 @@ export default class MFileBody extends React.Component { } else { const extra = text ? (': ' + text) : ''; return - {placeholder} + { placeholder } { _t("Invalid file%(extra)s", { extra: extra }) } ; } 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 = ; } else { imageElement = ( - {content.body}; } @@ -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 { } 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 { } 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 { this.props.onHeightChanged(); } + private getFileBody = () => { + if (this.props.mediaSrc) return null; + return ; + } + render() { const content = this.props.mxEvent.getContent(); const autoplay = SettingsStore.getValue("autoplayGifsAndVideos"); @@ -197,7 +208,7 @@ export default class MVideoBody extends React.PureComponent { ); } - // 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 { preload = "none"; } } + + const fileBody = this.getFileBody(); return ( - + { fileBody } ); } 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 { 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 ; } else { return ; 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 { * 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 { 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 - {nonCssBadge} - {tooltip} + { nonCssBadge } + { tooltip } ; } 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; + protected permalinkCreator: RoomPermalinkCreator; constructor(res: MatrixEvent[], room: Room) { super(res, room); this.zip = new JSZip(); this.avatars = new Map(); + 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 =
  • + + protected getEventTile(mxEv: MatrixEvent, continuation: boolean, mediaSrc?: string) { + return
  • 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} />
    • + } + + 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 Date: Mon, 31 May 2021 21:35:08 +0530 Subject: [PATCH 026/299] 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 - {icon} - {badge} + { icon } + { badge }
    ; } } 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 = ( + + ); + return renderToStaticMarkup(avatar); + } + + protected async wrapHTML(content: string, room: Room) { + const roomAvatar = await this.getRoomAvatar(); return ` @@ -54,22 +78,7 @@ export default class HTMLExporter extends Exporter {
    - + ${roomAvatar}
    @@ -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 Date: Mon, 31 May 2021 22:27:29 +0530 Subject: [PATCH 027/299] 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, "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 { 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 {
    { /* Calculate aspect ratio, using %padding will size _container correctly */ }
    - { showPlaceholder && + { !this.props.mediaSrc && showPlaceholder &&
    } -
    +
    { img } { gifLabel }
    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 { } avatar = (
    -
    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 { ` } - // 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
  • Date: Mon, 31 May 2021 23:33:20 +0530 Subject: [PATCH 028/299] 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 Date: Mon, 31 May 2021 23:50:55 +0530 Subject: [PATCH 029/299] 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 + + { placeholder } + + ; + } 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 { avatar = (
    Date: Tue, 1 Jun 2021 12:40:03 +0530 Subject: [PATCH 030/299] 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, "name" | "idName" | "url"> { member: RoomMember; @@ -94,6 +95,8 @@ export default class MemberAvatar extends React.Component { 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 Date: Tue, 1 Jun 2021 12:44:05 +0530 Subject: [PATCH 031/299] 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 Date: Tue, 1 Jun 2021 12:50:31 +0530 Subject: [PATCH 032/299] 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": ` + + + + + + + `, + "attach.svg": ` + + + `, +}; From 1382bd4fee3c1fcee27ff5b89e3828d84e4450b4 Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Tue, 1 Jun 2021 14:47:01 +0530 Subject: [PATCH 033/299] 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 = (
    - + + {this.props.isExporting ? : null} + {this.presentableTextForFile(content, false)}
    ); 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 = ; - } 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 {
    { /* Calculate aspect ratio, using %padding will size _container correctly */ }
    - { !this.props.mediaSrc && showPlaceholder && + {showPlaceholder &&
    { } // 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(({mxEvent}, ref) => { +const RedactedBody = React.forwardRef(({mxEvent, isExporting}, ref) => { const cli: MatrixClient = useContext(MatrixClientContext); let text = _t("Message deleted"); @@ -44,6 +45,7 @@ const RedactedBody = React.forwardRef(({mxEvent}, ref) => { return ( + { isExporting ? : null } { text } ); 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 { 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 { { thread } Date: Tue, 1 Jun 2021 17:06:39 +0530 Subject: [PATCH 034/299] 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 =

    - In reply to this message + In reply to this message

    ; } 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
  • + return
  • { - 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 Date: Tue, 1 Jun 2021 17:22:13 +0530 Subject: [PATCH 035/299] 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 Date: Tue, 1 Jun 2021 20:08:10 +0530 Subject: [PATCH 036/299] 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 Date: Tue, 1 Jun 2021 21:52:04 +0530 Subject: [PATCH 037/299] 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 Date: Wed, 2 Jun 2021 12:06:00 +0530 Subject: [PATCH 038/299] 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 = (
    - {this.props.isExporting ? : null} + {this.props.isExporting ? + + : null} {this.presentableTextForFile(content, false)}
    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 Date: Wed, 2 Jun 2021 13:12:03 +0530 Subject: [PATCH 039/299] 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
  • Date: Thu, 3 Jun 2021 12:40:00 +0530 Subject: [PATCH 040/299] 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 %(roomName)s.\n Exported by %(exporterDetails)s at %(exportDate)s. ": "This is the start of export of %(roomName)s.\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 anonymous usage data which helps us improve %(brand)s. This will use a cookie.": "Send anonymous usage data which helps us improve %(brand)s. This will use a cookie.", "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 = ( ); @@ -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 %(roomName)s. + Exported by %(exporterDetails)s at %(exportDate)s. `, { + exportDate, + roomName: room.name, + exporterDetails: ` + ${exporterName ? `${ exporterName }(${ exporter })` : `${ exporter }`} + `, + }); + + const topicText = topic ? _t("Topic: %(topic)s", { topic }) : ""; + const roomAvatar52 = await this.getRoomAvatar(52); + + return ` @@ -79,7 +108,7 @@ export default class HTMLExporter extends Exporter {
    - ${roomAvatar} + ${roomAvatar32}
    @@ -91,7 +120,7 @@ export default class HTMLExporter extends Exporter { ${room.name}
    -
    +
    ${topic}
    • @@ -113,6 +142,12 @@ export default class HTMLExporter extends Exporter { aria-live="polite" role="list" > +
    + ${roomAvatar52} +

    ${room.name}

    +

    ${createdText}

    ${exportedText}

    +

    ${topicText}

    +
    ${content}
    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 Date: Thu, 3 Jun 2021 13:21:56 +0530 Subject: [PATCH 041/299] 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; } 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; protected permalinkCreator: RoomPermalinkCreator; - constructor(res: MatrixEvent[], room: Room) { - super(res, room); + constructor(room: Room) { + super(room); this.zip = new JSZip(); this.avatars = new Map(); 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 %(roomName)s. Exported by %(exporterDetails)s at %(exportDate)s. `, { exportDate, - roomName: room.name, + roomName: this.room.name, exporterDetails: ` ${exporterName ? `${ exporterName }(${ exporter })` : `${ exporter }`} `, @@ -115,9 +115,9 @@ export default class HTMLExporter extends Exporter {
    - ${room.name} + ${this.room.name}
    ${topic}
    @@ -144,7 +144,7 @@ export default class HTMLExporter extends Exporter { >
    ${roomAvatar52} -

    ${room.name}

    +

    ${this.room.name}

    ${createdText}

    ${exportedText}

    ${topicText}

    @@ -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 Date: Thu, 3 Jun 2021 13:39:14 +0530 Subject: [PATCH 042/299] 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 Date: Fri, 4 Jun 2021 15:08:17 +0530 Subject: [PATCH 043/299] 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 => { + 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; } 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; 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(); 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 = (
    - ${roomAvatar32} + ${roomAvatar}
    @@ -143,9 +143,10 @@ export default class HTMLExporter extends Exporter { role="list" >
    - ${roomAvatar52} + ${roomAvatar}

    ${this.room.name}

    ${createdText}

    ${exportedText}

    +

    ${topicText}

    ${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 c3eb517700f35eb501b3557ff2561f249a2e4ef8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 5 Jun 2021 08:22:43 +0200 Subject: [PATCH 044/299] Use fallback avatar only for DMs with 2 people MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/Avatar.ts | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/Avatar.ts b/src/Avatar.ts index a6499c688e..5b033feb8f 100644 --- a/src/Avatar.ts +++ b/src/Avatar.ts @@ -146,15 +146,11 @@ export function avatarUrlForRoom(room: Room, width: number, height: number, resi // space rooms cannot be DMs so skip the rest if (SettingsStore.getValue("feature_spaces") && room.isSpaceRoom()) return null; - let otherMember = null; const otherUserId = DMRoomMap.shared().getUserIdForRoomId(room.roomId); - if (otherUserId) { - otherMember = room.getMember(otherUserId); - } else { - // if the room is not marked as a 1:1, but only has max 2 members - // then still try to show any avatar (pref. other member) - otherMember = room.getAvatarFallbackMember(); - } + if (!otherUserId) return null; + + // If there are only two members in the DM use the avatar of the other member + const otherMember = room.getAvatarFallbackMember(otherUserId); if (otherMember?.getMxcAvatarUrl()) { return mediaFromMxc(otherMember.getMxcAvatarUrl()).getThumbnailOfSourceHttp(width, height, resizeMethod); } From 4b2a9a6bf77471f261f98084fb3b61e8caedf257 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 5 Jun 2021 08:33:14 +0200 Subject: [PATCH 045/299] Remove mistaken param MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/Avatar.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/Avatar.ts b/src/Avatar.ts index 5b033feb8f..79f9bb699b 100644 --- a/src/Avatar.ts +++ b/src/Avatar.ts @@ -146,11 +146,10 @@ export function avatarUrlForRoom(room: Room, width: number, height: number, resi // space rooms cannot be DMs so skip the rest if (SettingsStore.getValue("feature_spaces") && room.isSpaceRoom()) return null; - const otherUserId = DMRoomMap.shared().getUserIdForRoomId(room.roomId); - if (!otherUserId) return null; + if (!DMRoomMap.shared().getUserIdForRoomId(room.roomId)) return null; // If there are only two members in the DM use the avatar of the other member - const otherMember = room.getAvatarFallbackMember(otherUserId); + const otherMember = room.getAvatarFallbackMember(); if (otherMember?.getMxcAvatarUrl()) { return mediaFromMxc(otherMember.getMxcAvatarUrl()).getThumbnailOfSourceHttp(width, height, resizeMethod); } From 87622fb8eaccf0ce0b59799b050b095c8e354857 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 5 Jun 2021 08:34:32 +0200 Subject: [PATCH 046/299] Add a comment MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/Avatar.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Avatar.ts b/src/Avatar.ts index 79f9bb699b..e6b47f8a7f 100644 --- a/src/Avatar.ts +++ b/src/Avatar.ts @@ -146,6 +146,7 @@ export function avatarUrlForRoom(room: Room, width: number, height: number, resi // space rooms cannot be DMs so skip the rest if (SettingsStore.getValue("feature_spaces") && room.isSpaceRoom()) return null; + // If the room is not a DM don't fallback to a member avatar if (!DMRoomMap.shared().getUserIdForRoomId(room.roomId)) return null; // If there are only two members in the DM use the avatar of the other member From 56488d2c428ed10f228dc3bdce94f4c5f2e6b6b4 Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Mon, 7 Jun 2021 11:34:03 +0530 Subject: [PATCH 047/299] 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 = ; 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 => { 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; 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: ` - ${exporterName ? `${ exporterName }(${ exporter })` : `${ exporter }`} + ${exporterName ? `${ exporterName }(${ exporter })` : `${ exporter }`} `, }); @@ -108,7 +108,7 @@ export default class HTMLExporter extends Exporter {
    - ${roomAvatar} + ${roomAvatar}
    @@ -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((resolve, reject) => { + const waiter = new Promise((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 Date: Mon, 7 Jun 2021 11:50:19 +0530 Subject: [PATCH 048/299] 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 Date: Mon, 7 Jun 2021 12:22:02 +0530 Subject: [PATCH 049/299] 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 {
    {this.props.isExporting ? - + Attachment : null} {this.presentableTextForFile(content, false)} 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(({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(({mxEvent, isExporting}, ref) return ( - { isExporting ? : null } + { isExporting ? Redacted : null } { text } ); From 0f06f1b9c4bc51dd68f2ad78bcfb57c12d4bea0f Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Mon, 7 Jun 2021 14:47:27 +0530 Subject: [PATCH 050/299] 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 Date: Tue, 8 Jun 2021 12:36:28 +0530 Subject: [PATCH 051/299] 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(); 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 Date: Tue, 8 Jun 2021 18:35:45 +0530 Subject: [PATCH 052/299] 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 ; - } else if (this.props.isExporting) { + } else if (this.props.forExport) { const eventId = ReplyThread.getParentEventId(this.props.parentEv); header =

    In reply to this message 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 = (

    - {this.props.isExporting ? + {this.props.forExport ? Attachment : null} 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(({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(({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(({mxEvent, isExporting}, ref) return ( - { isExporting ? Redacted : null } + { forExport ? Redacted : null } { text } ); 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 { 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 { // 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 { } 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 { } const MessageActionBar = sdk.getComponent('messages.MessageActionBar'); - const showMessageActionBar = !isEditing && !this.props.isExporting; + const showMessageActionBar = !isEditing && !this.props.forExport; const actionBar = showMessageActionBar ? { 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 { { thread } ; 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(); + 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 =
    • ; + const dateSeparator =
    • ; return renderToStaticMarkup(dateSeparator); } @@ -258,30 +262,32 @@ export default class HTMLExporter extends Exporter { if (hasAvatar) await this.saveAvatarIfNeeded(mxEv); return
  • - 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} - /> + + 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} + /> +
    • } 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 Date: Tue, 8 Jun 2021 18:37:14 +0530 Subject: [PATCH 053/299] 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 Date: Tue, 8 Jun 2021 18:37:36 +0530 Subject: [PATCH 054/299] 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 Date: Tue, 8 Jun 2021 18:37:44 +0530 Subject: [PATCH 055/299] 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 Date: Wed, 9 Jun 2021 15:23:47 +0530 Subject: [PATCH 056/299] 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, "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 { 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 { 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 ; } @@ -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 - + { placeholder } ; 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 = ; - } 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 {
    } -
    +
    { img } { gifLabel }
    @@ -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 ; } @@ -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 { } 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 { 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 { } private getFileBody = () => { - if (this.props.mediaSrc) return null; + if (this.props.forExport) return null; return ; } @@ -209,7 +209,7 @@ export default class MVideoBody extends React.PureComponent { } // 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 { 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 ; } else { return ; 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 { avatar = (
    { 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
  • + const eventTile =
  • 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 { />
    • + 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 Date: Wed, 9 Jun 2021 16:12:57 +0530 Subject: [PATCH 057/299] 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 %(roomName)s.\n Exported by %(exporterDetails)s at %(exportDate)s. ": "This is the start of export of %(roomName)s.\n Exported by %(exporterDetails)s at %(exportDate)s. ", + "This is the start of export of . Exported by at %(exportDate)s.": "This is the start of export of . Exported by at %(exportDate)s.", "Topic: %(topic)s": "Topic: %(topic)s", "Help us improve %(brand)s": "Help us improve %(brand)s", "Send anonymous usage data which helps us improve %(brand)s. This will use a cookie.": "Send anonymous usage data which helps us improve %(brand)s. This will use a cookie.", 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 %(roomName)s. - Exported by %(exporterDetails)s at %(exportDate)s. `, { - exportDate, - roomName: this.room.name, - exporterDetails: ` - ${exporterName ? `${ exporterName }(${ exporter })` : `${ exporter }`} - `, - }); + const exportedText = renderToStaticMarkup( +

    + {_t( + "This is the start of export of . Exported by at %(exportDate)s.", + { + exportDate, + }, + { + roomName: () => {this.room.name}, + exporterDetails: () => ( + + {exporterName ? ( + <> + {exporterName} + {exporter} + + ) : ( + {exporter} + )} + + ), + }, + )} +

    , + ); + const topicText = topic ? _t("Topic: %(topic)s", { topic }) : ""; From 9204ed30ce783d82f54c60384f38fec1ecc2625a Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Wed, 9 Jun 2021 16:40:52 +0530 Subject: [PATCH 058/299] 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 Date: Thu, 10 Jun 2021 11:53:41 +0530 Subject: [PATCH 059/299] 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 Date: Fri, 11 Jun 2021 12:04:05 +0530 Subject: [PATCH 060/299] 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 + return {children} ; } 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 => { 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(); 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 =
  • + const eventTile =
    -
    • +
    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 Date: Mon, 14 Jun 2021 11:08:17 +0530 Subject: [PATCH 061/299] 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 {

    , ); - const topicText = topic ? _t("Topic: %(topic)s", { topic }) : ""; - return ` @@ -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 =
    Media omitted", + } + 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 Date: Mon, 14 Jun 2021 18:06:40 +0530 Subject: [PATCH 062/299] 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; } 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 =
    • ; @@ -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 Date: Tue, 15 Jun 2021 16:41:31 +0530 Subject: [PATCH 063/299] 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 . Exported by at %(exportDate)s.": "This is the start of export of . Exported by 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; 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(); 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: "Media omitted", + formatted_body: `${this.mediaOmitText}`, } 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 Date: Thu, 17 Jun 2021 10:46:08 +0530 Subject: [PATCH 064/299] 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; + abstract export(): Promise; } 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 Date: Mon, 21 Jun 2021 11:43:47 +0530 Subject: [PATCH 065/299] 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 { 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: `${this.mediaOmitText}`, } 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 Date: Tue, 22 Jun 2021 09:27:49 +0530 Subject: [PATCH 066/299] 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: `${this.mediaOmitText}`, + formatted_body: `${this.mediaOmitText}`, } - 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 Date: Tue, 22 Jun 2021 10:49:14 +0530 Subject: [PATCH 067/299] 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 Date: Tue, 22 Jun 2021 10:51:16 +0530 Subject: [PATCH 068/299] 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 Date: Tue, 22 Jun 2021 12:12:37 +0530 Subject: [PATCH 069/299] 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 Date: Tue, 22 Jun 2021 12:14:31 +0530 Subject: [PATCH 070/299] 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 Date: Tue, 22 Jun 2021 12:50:15 +0530 Subject: [PATCH 071/299] 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 Date: Tue, 22 Jun 2021 14:53:48 +0530 Subject: [PATCH 072/299] 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", " reacted with %(content)s": " reacted with %(content)s", "reacted with %(shortName)s": "reacted with %(shortName)s", - "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 Date: Wed, 23 Jun 2021 11:58:50 +0530 Subject: [PATCH 073/299] 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 = ({ { children } ; } else { - const avatars = summaryMembers.map((m) => ); + const avatars = summaryMembers.map((m, idx) => + ); body = (
    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; 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(); 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 = ( 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((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 Date: Wed, 23 Jun 2021 12:14:20 +0530 Subject: [PATCH 074/299] 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 Date: Thu, 24 Jun 2021 14:03:12 +0530 Subject: [PATCH 075/299] 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: `${text}`, + } + 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: `${this.mediaOmitText}`, - } - 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 Date: Thu, 24 Jun 2021 14:04:37 +0530 Subject: [PATCH 076/299] 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 . Exported by at %(exportDate)s.": "This is the start of export of . Exported by 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 anonymous usage data which helps us improve %(brand)s. This will use a cookie.": "Send anonymous usage data which helps us improve %(brand)s. This will use a cookie.", "Yes": "Yes", From 112dfa2b96fc7e4d6dd10348ea293034eeca6b36 Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Thu, 24 Jun 2021 18:19:12 +0530 Subject: [PATCH 077/299] 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 => { - 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; 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(); - 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 =
    - + { + 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 Date: Thu, 24 Jun 2021 18:23:08 +0530 Subject: [PATCH 078/299] 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 Date: Thu, 24 Jun 2021 22:49:36 +0530 Subject: [PATCH 079/299] 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 Date: Fri, 25 Jun 2021 11:16:59 +0530 Subject: [PATCH 080/299] 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; + protected fileStream: WritableStream; + 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 { + 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 { + 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 => { + protected async getRequiredEvents():Promise { 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; @@ -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 Date: Fri, 25 Jun 2021 11:52:26 +0530 Subject: [PATCH 081/299] 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 { - 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 Date: Fri, 25 Jun 2021 14:49:01 +0530 Subject: [PATCH 082/299] 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 Date: Fri, 25 Jun 2021 14:58:59 +0530 Subject: [PATCH 083/299] 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 . Exported by at %(exportDate)s.": "This is the start of export of . Exported by 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 anonymous usage data which helps us improve %(brand)s. This will use a cookie.": "Send anonymous usage data which helps us improve %(brand)s. This will use a cookie.", "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 Date: Fri, 25 Jun 2021 15:01:14 +0530 Subject: [PATCH 084/299] 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 Date: Fri, 25 Jun 2021 15:19:17 +0530 Subject: [PATCH 085/299] 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 Date: Fri, 25 Jun 2021 15:49:39 +0530 Subject: [PATCH 086/299] 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 Date: Fri, 25 Jun 2021 22:45:14 +0530 Subject: [PATCH 087/299] 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 @@ + + + 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 = ({ room, onClose }) => { + { SettingsStore.getValue(UIFeature.Widgets) && } 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 Date: Sat, 26 Jun 2021 12:14:18 +0530 Subject: [PATCH 088/299] 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 { + 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 ( + +
    + Export +
    + +     + ); + } +} 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 = ({ 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 = ({ room, onClose }) => { - 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 = ; - const rightRow =
    - { 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 Date: Sat, 26 Jun 2021 13:04:10 +0530 Subject: [PATCH 089/299] 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 { - onExportClick = async () => { - const { - default: exportConversationalHistory, - exportFormats, - exportTypes, - } = await import("../../../utils/exportUtils/exportUtils"); - +const ExportDialog: React.FC = ({ 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 ( - { + return
    + { exportFormats[key] } +
    + }) + + return ( + +

    + {_t( + "Select from the options below to export chats from your timeline", + )} +

    + + { setFormat(key) }} + value={format} + label={_t("Export formats")} > -
    - Export -
    - -     - ); - } -} + { options } + + + +     + ); +}; + +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 = ({ 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 Date: Sat, 26 Jun 2021 21:53:50 +0530 Subject: [PATCH 090/299] 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 = ({ 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(); + const [sizeLimit, setSizeLimit] = useState(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 = ({ room, onFinished }) => { onFinished(false); }; - const options = Object.keys(exportFormats).map(key => { - return
    - { exportFormats[key] } -
    - }) + const exportFormatOptions = Object.keys(exportFormats).map((format) => ({ + value: format, + label: textForFormat(format), + })); + + const exportTypeOptions = Object.keys(exportTypes).map((type) => { + return ( + + ); + }); + + let MessageCount = null; + if (exportType === exportTypes.LAST_N_MESSAGES) { + MessageCount = ( + { + setNumberOfMessages(parseInt(e.target.value)); + }} + type="number" + /> + ); + } + + const sizePostFix = ({_t("MB")}); return ( = ({ room, onFinished }) => { )}

    - { setFormat(key) }} - value={format} - label={_t("Export formats")} + {_t("Format")} + + setExportFormat(key)} + definitions={exportFormatOptions} + /> + + {_t("Messages")} + + { + setExportType(e.target.value); + }} > - { options } - + {exportTypeOptions} +     + { MessageCount } + + + {_t("Size Limit")} + + + setSizeLimit(e.target.value)} + /> + + + setAttachments((e.target as HTMLInputElement).checked) + } + > + {_t("Include Attachments")} + { 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 Date: Sat, 26 Jun 2021 23:07:38 +0530 Subject: [PATCH 091/299] 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 = ({ room, onFinished }) => { const [exportFormat, setExportFormat] = useState("HTML"); const [exportType, setExportType] = useState("TIMELINE"); const [includeAttachments, setAttachments] = useState(false); - const [numberOfMessages, setNumberOfMessages] = useState(); + const [numberOfMessages, setNumberOfMessages] = useState(100); const [sizeLimit, setSizeLimit] = useState(8); + const [sizeLimitRef, messageCountRef] = [useRef(), useRef()]; 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 = ({ room, onFinished }) => { ); }; + const onValidateSize = async ({ + value, + }: Pick): Promise => { + 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): Promise => { + 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 = ({ room, onFinished }) => { ); }); - let MessageCount = null; if (exportType === exportTypes.LAST_N_MESSAGES) { MessageCount = ( { setNumberOfMessages(parseInt(e.target.value)); }} - type="number" /> ); } - const sizePostFix = ({_t("MB")}); + const sizePostFix = {_t("MB")}; return ( = ({ room, onFinished }) => { > {exportTypeOptions} - { MessageCount } + {MessageCount} {_t("Size Limit")} @@ -116,9 +197,12 @@ const ExportDialog: React.FC = ({ room, onFinished }) => { setSizeLimit(e.target.value)} + onChange={(e) => setSizeLimit(parseInt(e.target.value))} /> Date: Sat, 26 Jun 2021 23:08:37 +0530 Subject: [PATCH 092/299] 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 Date: Sat, 26 Jun 2021 23:40:35 +0530 Subject: [PATCH 093/299] 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 { 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 { ` } - 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 =
    @@ -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 Date: Sun, 27 Jun 2021 20:55:54 +0530 Subject: [PATCH 094/299] 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 = ({ room, onFinished }) => { const [numberOfMessages, setNumberOfMessages] = useState(100); const [sizeLimit, setSizeLimit] = useState(8); const [sizeLimitRef, messageCountRef] = [useRef(), useRef()]; + 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 = ({ 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 = ({ 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; protected fileStream: WritableStream; + 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 { 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 { + protected async abortWriter(): Promise { 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 Date: Sun, 27 Jun 2021 22:18:43 +0530 Subject: [PATCH 095/299] 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 = ({ 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(100); const [sizeLimit, setSizeLimit] = useState(8); const [sizeLimitRef, messageCountRef] = [useRef(), useRef()]; 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 = ({ room, onFinished }) => { return; } } + setExporting(true); await startExport(); }; @@ -160,8 +164,31 @@ const ExportDialog: React.FC = ({ room, onFinished }) => { }; const onCancel = async () => { - await Exporter?.cancelExport(); - onFinished(false); + if (isExporting) { + const { finished } = Modal.createTrackedDialog( + "Warning", + "", + QuestionDialog, + { + title: _t("Warning"), + description: ( +
    +

    + {_t(`Are you sure you want to stop exporting your data? + If you do, you'll need to start over.`)} +

    +
    + ), + 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 = ({ room, onFinished }) => { const sizePostFix = {_t("MB")}; - return ( + const ExportSettings = ( = ({ room, onFinished }) => { onFinished(false)} + /> + + ); + + const ExportProgress = ( + + ); + + 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 Date: Mon, 28 Jun 2021 11:00:34 +0530 Subject: [PATCH 096/299] 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 Date: Mon, 28 Jun 2021 12:20:41 +0530 Subject: [PATCH 097/299] 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 = ({ 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(100); const [sizeLimit, setSizeLimit] = useState(8); const [sizeLimitRef, messageCountRef] = [useRef(), useRef()]; + 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 = ({ room, onFinished }) => { }; const onCancel = async () => { - if (isExporting) { - const { finished } = Modal.createTrackedDialog( - "Warning", - "", - QuestionDialog, - { - title: _t("Warning"), - description: ( -
    -

    - {_t(`Are you sure you want to stop exporting your data? - If you do, you'll need to start over.`)} -

    -
    - ), - 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 = ({ room, onFinished }) => { const sizePostFix = {_t("MB")}; + const ExportCancelWarning = ( + +

    + {" "} + {_t( + "Are you sure you want to stop exporting your data? If you do, you'll need to start over.", + )}{" "} +

    + setCancelWarning(false)} + onPrimaryButtonClick={confirmCanel} + /> +     + ); + const ExportSettings = ( = ({ room, onFinished }) => { setExportFormat(key)} + onChange={(key) => setExportFormat(exportFormats[key])} definitions={exportFormatOptions} /> @@ -252,7 +265,7 @@ const ExportDialog: React.FC = ({ 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 = ({ room, onFinished }) => { ); + const ExportSuccessful = ( + +

    {_t("Your messages were successfully exported")}

    + + +     + ); + + const ExportCancelSuccess = ( + +

    {_t("The export was cancelled successfully")}

    + + +     + ); + const ExportProgress = ( = ({ room, onFinished }) => { primaryButton={_t("Cancel")} primaryButtonClass="danger" hasCancel={false} - onCancel={onCancel} + onPrimaryButtonClick={onCancel} /> ); - 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 Date: Mon, 28 Jun 2021 12:39:05 +0530 Subject: [PATCH 098/299] 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 = ( Date: Mon, 28 Jun 2021 13:23:50 +0530 Subject: [PATCH 099/299] 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 Date: Tue, 29 Jun 2021 10:13:14 +0530 Subject: [PATCH 100/299] 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 Date: Tue, 29 Jun 2021 10:13:38 +0530 Subject: [PATCH 101/299] 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 = ({ room, onFinished }) => { const [isExporting, setExporting] = useState(false); const [numberOfMessages, setNumberOfMessages] = useState(100); const [sizeLimit, setSizeLimit] = useState(8); - const [sizeLimitRef, messageCountRef] = [useRef(), useRef()]; + const sizeLimitRef = useRef(); + const messageCountRef = useRef(); 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 Date: Tue, 29 Jun 2021 10:13:51 +0530 Subject: [PATCH 102/299] 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 Date: Tue, 29 Jun 2021 10:14:00 +0530 Subject: [PATCH 103/299] 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 Date: Tue, 29 Jun 2021 10:14:24 +0530 Subject: [PATCH 104/299] 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 = ({ 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( null, async (Exporter: HTMLExporter | PlainTextExporter | JSONExporter) => { await Exporter?.export().then(() => { From 1014e9ea48c4779e9b92ec9e2e0b3f4c83be4c32 Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Tue, 29 Jun 2021 10:14:56 +0530 Subject: [PATCH 105/299] 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 = ({ room, onFinished }) => { setExportType(exportTypes[e.target.value]); }} > - {exportTypeOptions} + { exportTypeOptions } {MessageCount} From 7a5aea14418d716ee35594e487979b33e0203961 Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Tue, 29 Jun 2021 10:15:20 +0530 Subject: [PATCH 106/299] 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 = ({ room, onFinished }) => { > { exportTypeOptions } - {MessageCount} + { MessageCount } {_t("Size Limit")} From b626a3d5cb9c50d1b50cffedc007469976a11eaf Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Tue, 29 Jun 2021 10:15:46 +0530 Subject: [PATCH 107/299] 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 = ({ room, onFinished }) => { definitions={exportFormatOptions} /> - {_t("Messages")} + { _t("Messages") } Date: Tue, 29 Jun 2021 10:16:08 +0530 Subject: [PATCH 108/299] 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 = ({ room, onFinished }) => { )}

    - {_t("Format")} + { _t("Format") } Date: Tue, 29 Jun 2021 10:16:32 +0530 Subject: [PATCH 109/299] 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 = ({ room, onFinished }) => { onFinished={onFinished} fixedWidth={true} > -

    {_t("Your messages were successfully exported")}

    +

    { _t("Your messages were successfully exported") }

    Date: Tue, 29 Jun 2021 10:17:14 +0530 Subject: [PATCH 110/299] 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 = ({ room, onFinished }) => { { MessageCount } - {_t("Size Limit")} + { _t("Size Limit") } Date: Tue, 29 Jun 2021 10:17:38 +0530 Subject: [PATCH 111/299] 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 = ({ room, onFinished }) => { setAttachments((e.target as HTMLInputElement).checked) } > - {_t("Include Attachments")} + { _t("Include Attachments") } Date: Tue, 29 Jun 2021 10:18:17 +0530 Subject: [PATCH 112/299] 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 = ({ room, onFinished }) => { onFinished={onFinished} fixedWidth={true} > -

    {_t("The export was cancelled successfully")}

    +

    { _t("The export was cancelled successfully") }

    Date: Tue, 29 Jun 2021 10:19:11 +0530 Subject: [PATCH 113/299] 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 = (
    - + {this.props.forExport ? Attachment : null} From de6bc3f2eddded08d7e8530a7fc19debc2cf9668 Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Tue, 29 Jun 2021 10:19:57 +0530 Subject: [PATCH 114/299] 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 Date: Tue, 29 Jun 2021 10:36:24 +0530 Subject: [PATCH 115/299] 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, "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 = ({ room, onFinished }) => { const [exportSuccessful, setExportSuccessful] = useState(false); const [Exporter, setExporter] = useStateCallback( 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 = ({ 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 = ({ 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 = ({ room, onFinished }) => { ); }); - let MessageCount = null; + let messageCount = null; if (exportType === exportTypes.LAST_N_MESSAGES) { - MessageCount = ( + messageCount = ( = ({ room, onFinished }) => { ); } - const sizePostFix = {_t("MB")}; + const sizePostFix = { _t("MB") }; - const ExportCancelWarning = ( - -

    - {" "} - {_t( - "Are you sure you want to stop exporting your data? If you do, you'll need to start over.", - )}{" "} -

    +

    { _t("The export was cancelled successfully") }

    + setCancelWarning(false)} - onPrimaryButtonClick={confirmCanel} + primaryButton={_t("Okay")} + hasCancel={false} + onPrimaryButtonClick={onFinished} />     - ); + } else if (exportSuccessful) { + // Display successful export message + return +

    { _t("Your messages were successfully exported") }

    - const ExportSettings = ( + +     + } else if (!isExporting) { + // Display export settings = ({ room, onFinished }) => { > { exportTypeOptions }     - { MessageCount } + { messageCount } { _t("Size Limit") } @@ -303,46 +315,32 @@ const ExportDialog: React.FC = ({ room, onFinished }) => { onCancel={() => onFinished(false)} /> - ); - - const ExportSuccessful = ( + } else if (displayCancel) { + // Display cancel warning -

    { _t("Your messages were successfully exported") }

    - +

    + {_t( + "Are you sure you want to stop exporting your data? If you do, you'll need to start over.", + )} +

    setCancelWarning(false)} + onPrimaryButtonClick={confirmCanel} />     - ); - - const ExportCancelSuccess = ( - -

    { _t("The export was cancelled successfully") }

    - - -     - ); - - const ExportProgress = ( - = ({ room, onFinished }) => { onPrimaryButtonClick={onCancel} /> - ); - - 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 = ({ ; } else { const avatars = summaryMembers.map((m, idx) => - ); + ); body = (
    From e404fa3caedb7ec78dcc5750b8b48328b0ca50d2 Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Tue, 29 Jun 2021 10:57:02 +0530 Subject: [PATCH 116/299] 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 = ({ room, onFinished }) => { const sizePostFix = { _t("MB") }; - let componentToDisplay: JSX.Element; if (exportCancelled) { // Display successful cancellation message - return -

    { _t("The export was cancelled successfully") }

    + return ( + +

    { _t("The export was cancelled successfully") }

    - -     + +     + ); } else if (exportSuccessful) { // Display successful export message - return -

    { _t("Your messages were successfully exported") }

    + return ( + +

    { _t("Your messages were successfully exported") }

    - -     + +     + ); } else if (!isExporting) { // Display export settings - -

    - {_t( - "Select from the options below to export chats from your timeline", - )} -

    - - { _t("Format") } - - setExportFormat(exportFormats[key])} - definitions={exportFormatOptions} - /> - - { _t("Messages") } - - { - setExportType(exportTypes[e.target.value]); - }} + return ( + - { exportTypeOptions } - - { messageCount } +

    + { _t("Select from the options below to export chats from your timeline") } +

    - - { _t("Size Limit") } - + { _t("Format") } - setSizeLimit(parseInt(e.target.value))} - /> + setExportFormat(exportFormats[key])} + definitions={exportFormatOptions} + /> - - setAttachments((e.target as HTMLInputElement).checked) - } - > - { _t("Include Attachments") } - + { _t("Messages") } - onFinished(false)} - /> -     + { + setExportType(exportTypes[e.target.value]); + }} + > + { exportTypeOptions } + + { messageCount } + + { _t("Size Limit") } + + setSizeLimit(parseInt(e.target.value))} + /> + + + setAttachments((e.target as HTMLInputElement).checked) + } + > + { _t("Include Attachments") } + + + onFinished(false)} + /> + + ); } else if (displayCancel) { // Display cancel warning - -

    - {_t( - "Are you sure you want to stop exporting your data? If you do, you'll need to start over.", - )} -

    - setCancelWarning(false)} - onPrimaryButtonClick={confirmCanel} - /> -     + return ( + +

    + {_t( + "Are you sure you want to stop exporting your data? If you do, you'll need to start over.", + )} +

    + setCancelWarning(false)} + onPrimaryButtonClick={confirmCanel} + /> +     + ); } else { // Display progress dialog - return - - + return ( + + + + ); } - - 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 Date: Tue, 29 Jun 2021 11:29:05 +0530 Subject: [PATCH 117/299] 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 { } 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 {
    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 Date: Tue, 29 Jun 2021 11:40:26 +0530 Subject: [PATCH 118/299] 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 { 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 { 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 { 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 { 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 Date: Tue, 29 Jun 2021 12:06:58 +0530 Subject: [PATCH 119/299] 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 = ({ 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 = ({ 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 = ({ room, onFinished }) => { = ({ 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 { 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 - + { placeholder } ; From 497d8102e213b00792947a70695a0aaf747b95c3 Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Tue, 29 Jun 2021 12:54:44 +0530 Subject: [PATCH 120/299] 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 - + { placeholder } ; 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 { } 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 {
    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 Date: Tue, 29 Jun 2021 19:43:21 +0530 Subject: [PATCH 121/299] 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 Date: Wed, 30 Jun 2021 10:03:33 +0530 Subject: [PATCH 122/299] 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 = ({ room, onFinished }) => { { _t("Format") } setExportFormat(exportFormats[key])} definitions={exportFormatOptions} @@ -332,7 +332,7 @@ const ExportDialog: React.FC = ({ room, onFinished }) => { )}

    = ({ 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 Date: Wed, 30 Jun 2021 14:08:22 +0530 Subject: [PATCH 123/299] 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 { private getFileBody = () => { if (this.props.forExport) return null; return ; - } + }; 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 = ({ 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 { 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 { + protected async getRequiredEvents(): Promise { 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 {
    - ` + `; } 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 =
    - - 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} - /> - -
    + const eventTile = ( +
    + + 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} + /> + +
    + ); + 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: `${text}`, - } + }; 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 Date: Fri, 2 Jul 2021 10:23:25 +0530 Subject: [PATCH 124/299] 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 = ({ 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(100); const [sizeLimit, setSizeLimit] = useState(8); const sizeLimitRef = useRef(); @@ -58,6 +59,7 @@ const ExportDialog: React.FC = ({ room, onFinished }) => { room, exportTypes[exportType], exportOptions, + setExportProgressText, ), ); break; @@ -67,6 +69,7 @@ const ExportDialog: React.FC = ({ room, onFinished }) => { room, exportTypes[exportType], exportOptions, + setExportProgressText, ), ); break; @@ -76,6 +79,7 @@ const ExportDialog: React.FC = ({ room, onFinished }) => { room, exportTypes[exportType], exportOptions, + setExportProgressText, ), ); break; @@ -352,6 +356,7 @@ const ExportDialog: React.FC = ({ room, onFinished }) => { onFinished={onFinished} fixedWidth={true} > +

    { exportProgressText }

    >, ) { 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>, + ) { + super(room, exportType, exportOptions, setProgressText); this.avatars = new Map(); 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>, + ) { + 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>, + ) { + 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 Date: Fri, 2 Jul 2021 10:49:24 +0530 Subject: [PATCH 125/299] 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 Date: Fri, 2 Jul 2021 10:53:19 +0530 Subject: [PATCH 126/299] 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 Date: Fri, 2 Jul 2021 16:52:33 +0530 Subject: [PATCH 127/299] 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 = ({ 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(100); const [sizeLimit, setSizeLimit] = useState(8); const sizeLimitRef = useRef(); const messageCountRef = useRef(); + const exportProgressRef = useRef(); const [displayCancel, setCancelWarning] = useState(false); const [exportCancelled, setExportCancelled] = useState(false); const [exportSuccessful, setExportSuccessful] = useState(false); @@ -59,7 +59,7 @@ const ExportDialog: React.FC = ({ room, onFinished }) => { room, exportTypes[exportType], exportOptions, - setExportProgressText, + exportProgressRef, ), ); break; @@ -69,7 +69,7 @@ const ExportDialog: React.FC = ({ room, onFinished }) => { room, exportTypes[exportType], exportOptions, - setExportProgressText, + exportProgressRef, ), ); break; @@ -79,7 +79,7 @@ const ExportDialog: React.FC = ({ room, onFinished }) => { room, exportTypes[exportType], exportOptions, - setExportProgressText, + exportProgressRef, ), ); break; @@ -356,7 +356,7 @@ const ExportDialog: React.FC = ({ room, onFinished }) => { onFinished={onFinished} fixedWidth={true} > -

    { exportProgressText }

    +

    >, + protected exportProgressRef: MutableRefObject, ) { 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>, + exportProgressRef: MutableRefObject, ) { - super(room, exportType, exportOptions, setProgressText); + super(room, exportType, exportOptions, exportProgressRef); this.avatars = new Map(); 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>, + exportProgressRef: MutableRefObject, ) { - 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>, + exportProgressRef: MutableRefObject, ) { - 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 171874ae30ca36513c01a5ac74596dba33bc6826 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 2 Jul 2021 16:31:37 +0100 Subject: [PATCH 128/299] Use FocusLock around ContextMenus to simplify focus management --- src/components/structures/ContextMenu.tsx | 27 +++++++------------ .../views/spaces/SpaceCreateMenu.tsx | 23 +++++++--------- 2 files changed, 20 insertions(+), 30 deletions(-) diff --git a/src/components/structures/ContextMenu.tsx b/src/components/structures/ContextMenu.tsx index 407dc6f04c..9bc9c0a8b2 100644 --- a/src/components/structures/ContextMenu.tsx +++ b/src/components/structures/ContextMenu.tsx @@ -19,6 +19,7 @@ limitations under the License. import React, { CSSProperties, RefObject, useRef, useState } from "react"; import ReactDOM from "react-dom"; import classNames from "classnames"; +import FocusLock from "react-focus-lock"; import { Key } from "../../Keyboard"; import { Writeable } from "../../@types/common"; @@ -44,6 +45,7 @@ function getOrCreateContainer(): HTMLDivElement { } const ARIA_MENU_ITEM_ROLES = new Set(["menuitem", "menuitemcheckbox", "menuitemradio"]); +const ARIA_MENU_ITEM_SELECTOR = '[role^="menuitem"], [role^="menuitemcheckbox"], [role^="menuitemradio"]'; interface IPosition { top?: number; @@ -95,8 +97,6 @@ interface IState { // this will allow the ContextMenu to manage its own focus using arrow keys as per the ARIA guidelines. @replaceableComponent("structures.ContextMenu") export class ContextMenu extends React.PureComponent { - private initialFocus: HTMLElement; - static defaultProps = { hasBackground: true, managed: true, @@ -107,24 +107,15 @@ export class ContextMenu extends React.PureComponent { this.state = { contextMenuElem: null, }; - - // persist what had focus when we got initialized so we can return it after - this.initialFocus = document.activeElement as HTMLElement; } - componentWillUnmount() { - // return focus to the thing which had it before us - this.initialFocus.focus(); - } - - private collectContextMenuRect = (element) => { + private collectContextMenuRect = (element: HTMLDivElement) => { // We don't need to clean up when unmounting, so ignore if (!element) return; - let first = element.querySelector('[role^="menuitem"]'); - if (!first) { - first = element.querySelector('[tab-index]'); - } + const first = element.querySelector(ARIA_MENU_ITEM_SELECTOR) + || element.querySelector('[tab-index]'); + if (first) { first.focus(); } @@ -381,8 +372,10 @@ export class ContextMenu extends React.PureComponent { ref={this.collectContextMenuRect} role={this.props.managed ? "menu" : undefined} > - { chevron } - { props.children } + + { chevron } + { props.children } +

    { background }
    diff --git a/src/components/views/spaces/SpaceCreateMenu.tsx b/src/components/views/spaces/SpaceCreateMenu.tsx index 4bb61d7ccb..11f68698ee 100644 --- a/src/components/views/spaces/SpaceCreateMenu.tsx +++ b/src/components/views/spaces/SpaceCreateMenu.tsx @@ -17,7 +17,8 @@ limitations under the License. import React, { useContext, useRef, useState } from "react"; import classNames from "classnames"; import { EventType, RoomType, RoomCreateTypeField } from "matrix-js-sdk/src/@types/event"; -import FocusLock from "react-focus-lock"; +import { Preset } from "matrix-js-sdk/src/@types/partials"; +import { ICreateRoomStateEvent } from "matrix-js-sdk/src/@types/requests"; import { _t } from "../../../languageHandler"; import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; @@ -33,8 +34,6 @@ import { UserTab } from "../dialogs/UserSettingsDialog"; import Field from "../elements/Field"; import withValidation from "../elements/Validation"; import { SpaceFeedbackPrompt } from "../../structures/SpaceRoomView"; -import { Preset } from "matrix-js-sdk/src/@types/partials"; -import { ICreateRoomStateEvent } from "matrix-js-sdk/src/@types/requests"; import RoomAliasField from "../elements/RoomAliasField"; const SpaceCreateMenuType = ({ title, description, className, onClick }) => { @@ -250,16 +249,14 @@ const SpaceCreateMenu = ({ onFinished }) => { wrapperClassName="mx_SpaceCreateMenu_wrapper" managed={false} > - - { - onFinished(); - defaultDispatcher.dispatch({ - action: Action.ViewUserSettings, - initialTabId: UserTab.Labs, - }); - }} /> - { body } - + { + onFinished(); + defaultDispatcher.dispatch({ + action: Action.ViewUserSettings, + initialTabId: UserTab.Labs, + }); + }} /> + { body } ; }; From ed93bf4c770846b02fed5aa9ce0e473ae1fac8c6 Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Mon, 19 Jul 2021 13:00:37 +0530 Subject: [PATCH 129/299] 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 Date: Mon, 19 Jul 2021 13:17:19 +0530 Subject: [PATCH 130/299] 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 { }; 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 Date: Mon, 19 Jul 2021 13:23:55 +0530 Subject: [PATCH 131/299] 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 Date: Mon, 19 Jul 2021 13:28:09 +0530 Subject: [PATCH 132/299] 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 Date: Tue, 20 Jul 2021 13:47:51 +0530 Subject: [PATCH 133/299] 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 Date: Wed, 21 Jul 2021 11:48:37 +0530 Subject: [PATCH 134/299] 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 = ({ room, onFinished }) => { const exportTypeOptions = Object.keys(exportTypes).map((type) => { return ( ); }); @@ -229,7 +229,7 @@ const ExportDialog: React.FC = ({ room, onFinished }) => {

    { _t("The export was cancelled successfully") }

    @@ -331,9 +331,9 @@ const ExportDialog: React.FC = ({ room, onFinished }) => { fixedWidth={true} >

    - {_t( + { _t( "Are you sure you want to stop exporting your data? If you do, you'll need to start over.", - )} + ) }

    { placeholder = (
    - {this.props.forExport ? + { this.props.forExport ? Attachment - : null} + : null } { 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 = ({ room, onClose }) => { - 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(

    - {_t( + { _t( "This is the start of export of . Exported by at %(exportDate)s.", { exportDate, }, { - roomName: () => {this.room.name}, + roomName: () => { this.room.name }, exporterDetails: () => ( - {exporterName ? ( + { exporterName ? ( <> - {exporterName} - {exporter} + { exporterName } + { exporter } ) : ( - {exporter} - )} + { exporter } + ) } ), }, - )} + ) }

    , ); @@ -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 Date: Fri, 23 Jul 2021 10:47:40 +0530 Subject: [PATCH 135/299] 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 { 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 { 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 Date: Mon, 26 Jul 2021 00:09:59 +0530 Subject: [PATCH 136/299] 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 = ({ room, onFinished }) => { ); }); + let messageCount = null; if (exportType === exportTypes.LAST_N_MESSAGES) { messageCount = ( @@ -254,72 +255,6 @@ const ExportDialog: React.FC = ({ room, onFinished }) => { /> ); - } else if (!isExporting) { - // Display export settings - return ( - -

    - { _t("Select from the options below to export chats from your timeline") } -

    - - { _t("Format") } - - setExportFormat(exportFormats[key])} - definitions={exportFormatOptions} - /> - - { _t("Messages") } - - { - setExportType(exportTypes[e.target.value]); - }} - > - { exportTypeOptions } - - { messageCount } - - { _t("Size Limit") } - - setSizeLimit(parseInt(e.target.value))} - /> - - - setAttachments((e.target as HTMLInputElement).checked) - } - > - { _t("Include Attachments") } - - - onFinished(false)} - /> -     - ); } else if (displayCancel) { // Display cancel warning return ( @@ -346,23 +281,104 @@ const ExportDialog: React.FC = ({ room, onFinished }) => { ); } else { - // Display progress dialog + // Display export settings return ( -

    - +

    + { _t( + "Select from the options below to export chats from your timeline", + ) } +

    + + + { _t("Format") } + + +
    + setExportFormat(exportFormats[key])} + definitions={exportFormatOptions} + /> + + + { _t("Messages") } + + + { + setExportType(exportTypes[e.target.value]); + }} + > + { exportTypeOptions } + + { messageCount } + + + { _t("Size Limit") } + + + setSizeLimit(parseInt(e.target.value))} + /> + + + setAttachments( + (e.target as HTMLInputElement).checked, + ) + } + > + { _t("Include Attachments") } + +
    + { isExporting ? ( +
    + + + +

    + { _t("Processing...") } +

    + +
    + ) : ( + onFinished(false)} + /> + ) }     ); } 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 Date: Mon, 26 Jul 2021 00:13:52 +0530 Subject: [PATCH 137/299] 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 = ({ room, onFinished }) => {
    { isExporting ? ( -
    +
    Date: Mon, 26 Jul 2021 00:24:04 +0530 Subject: [PATCH 138/299] 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 = ({ room, onFinished }) => { r="20" fill="none" stroke-width="5" - > + />

    { _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 width={width} poster={poster} onPlay={this.videoOnPlay} - > - + /> { fileBody } ); From 30a64a1b5a0e01c565771c605dd4d5a97a5da7c1 Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Mon, 26 Jul 2021 12:41:36 +0530 Subject: [PATCH 139/299] 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 = ({ room, onFinished }) => { // Display export settings return ( -

    + { !isExporting ?

    { _t( "Select from the options below to export chats from your timeline", ) } -

    +

    : null} { _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 Date: Mon, 26 Jul 2021 12:58:17 +0530 Subject: [PATCH 140/299] 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 Date: Mon, 26 Jul 2021 13:03:15 +0530 Subject: [PATCH 141/299] 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 = ({ room, onFinished }) => { { _t( "Select from the options below to export chats from your timeline", ) } -

    : null} +

    : null } { _t("Format") } From a4da8f9e9ef0e553c947ea7ae88d76a0aa435286 Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Mon, 26 Jul 2021 15:07:45 +0530 Subject: [PATCH 142/299] 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 Date: Mon, 26 Jul 2021 22:15:05 +0530 Subject: [PATCH 143/299] 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; - protected fileStream: WritableStream; 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 { 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 { console.log("Cancelling export..."); this.cancelled = true; - await this.abortWriter(); } protected async downloadPlainText(fileName: string, text: string): Promise { - 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 { - await this.fileStream?.abort(); - await this.writer?.abort(); - } - - protected async pumpToFileStream(reader: ReadableStreamDefaultReader): Promise { - 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 Date: Mon, 26 Jul 2021 23:40:27 +0530 Subject: [PATCH 144/299] 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 { } 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 = ({ room, onFinished }) => {
    { isExporting ? (
    - - - +

    { _t("Processing...") }

    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 = ({ { children } ; } else { - const avatars = summaryMembers.map((m, idx) => - ); + const avatars = summaryMembers.map((m) => ); + body = (
    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 { ; } else if (this.props.forExport) { const eventId = ReplyThread.getParentEventId(this.props.parentEv); - header =

    - In reply to this message + header =

    + { _t("In reply to ", + {}, + { messageLink: () => ( + { _t("this message") } + ), + }) + }

    ; } else if (this.state.loading) { header = ; 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(({ mxEvent, forExport }, return ( - { forExport ? Redacted : null } + { forExport ? {_t("Redacted")} : null } { text } ); 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 @@ " reacted with %(content)s": " reacted with %(content)s", "reacted with %(shortName)s": "reacted with %(shortName)s", "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 ": "%(senderDisplayName)s changed the room avatar to ", @@ -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.", "In reply to ": "In reply to ", + "In reply to ": "In reply to ", + "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, ) { this.cancelled = false; @@ -53,6 +69,8 @@ export default abstract class Exporter { protected async downloadZIP(): Promise { 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, ) { 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, ) { 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, ) { 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 Date: Tue, 27 Jul 2021 00:00:52 +0530 Subject: [PATCH 145/299] 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 = ({ 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(100); @@ -70,31 +70,31 @@ const ExportDialog: React.FC = ({ 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 = ({ 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 = ({ 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 (