Matrix_Riot/riot/bundles/a6f8076a857e57b3741a/theme-dark-custom.css

/*
 * Nunito.
 * Includes extended Latin and Vietnamese character sets
 * Current URLs are taken from
 * https://github.com/alexeiva/NunitoFont/releases/tag/v3.500
 * ...in order to include cyrillic.
 *
 * Previously, they were
 * https://fonts.googleapis.com/css?family=Nunito:400,400i,600,600i,700,700i&subset=latin-ext,vietnamese
 *
 * We explicitly do not include Nunito's italic variants, as they are not italic enough
 * and it's better to rely on the browser's built-in obliquing behaviour.
 */
/* the 'src' links are relative to the bundle.css, which is in a subdirectory.
 */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: url(../../fonts/Nunito/Nunito-Regular.ffae5d0.ttf) format('truetype');
}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 600;
    src: url(../../fonts/Nunito/Nunito-SemiBold.da07a44.ttf) format('truetype');
}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 700;
    src: url(../../fonts/Nunito/Nunito-Bold.f7e8fbd.ttf) format('truetype');
}
/* latin-ext */
@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+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@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+0000-00FF, 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;
}
/* latin-ext */
@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+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@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+0000-00FF, 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;
}
/* a COLR/CPAL version of Twemoji used for consistent cross-browser emoji
 * taken from https://github.com/mozilla/twemoji-colr
 * using the fix from https://github.com/mozilla/twemoji-colr/issues/50 to
 * work on macOS
 */
/*
// except we now load it dynamically via FontManager to handle browsers
// which can't render COLR/CPAL still
@font-face {
    font-family: "Twemoji Mozilla";
    src: url('$(res)/fonts/Twemoji_Mozilla/TwemojiMozilla.woff2') format('woff2');
}
*/
/* Nunito lacks combining diacritics, so these will fall through
   to the next font.  Helevetica's diacritics however do not combine
   nicely (on OSX, at least) and result in a huge horizontal mess.
   Arial empirically gets it right, hence prioritising Arial here. */
/* We fall through to Twemoji for emoji rather than falling through
   to native Emoji fonts (if any) to ensure cross-browser consistency */
/*** ImageView ***/
.mx_filterFlipColor {
    filter: invert(1);
}
.gm-scrollbar .thumb {
    filter: invert(1);
}
.mx_EventTile_content .markdown-body pre:hover {
    border-color: #808080 !important;
}
.mx_EventTile_content .markdown-body pre, .mx_EventTile_content .markdown-body code {
        filter: invert(1);
    }
.mx_EventTile_content .markdown-body pre code {
        filter: none;
    }
.mx_EventTile_content .markdown-body table tr {
            background-color: #000000;
        }
.mx_EventTile_content .markdown-body table tr:nth-child(2n) {
            background-color: #080808;
        }
/*
Copyright 2019 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.
*/
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2017 Vector Creations Ltd
Copyright 2017 New Vector Ltd

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.
*/
html {
    /* hack to stop overscroll bounce on OSX and iOS.
       N.B. Breaks things when we have legitimate horizontal overscroll */
    height: 100%;
    overflow: hidden;
}
body {
    font-family: Nunito, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', Arial, Helvetica, Sans-Serif;
    font-size: 15px;
    background-color: var(--timeline-background-color);
    color: var(--timeline-text-color);
    border: 0px;
    margin: 0px;
}
pre, code {
    font-family: Inconsolata, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', Courier, monospace;
    font-size: 100% !important;
}
.error, .warning {
    color: var(--warning-color);
}
b {
    font-weight: bold;
}
h2 {
    color: var(--timeline-text-color);
    font-weight: 400;
    font-size: 18px;
    margin-top: 16px;
    margin-bottom: 16px;
}
a:hover, a:link, a:visited {
    color: var(--primary-color);
}
input[type=text], input[type=search], input[type=password] {
    padding: 9px;
    font-family: Nunito, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', Arial, Helvetica, Sans-Serif;
    font-size: 14px;
    font-weight: 600;
    min-width: 0;
}
input[type=text].mx_textinput_icon, input[type=search].mx_textinput_icon {
    padding-left: 36px;
    background-repeat: no-repeat;
    background-position: 10px center;
}
input[type=text].mx_textinput_icon.mx_textinput_search, input[type=search].mx_textinput_icon.mx_textinput_search {
    background-image: url(../../img/feather-customised/search-input.044bfa7.svg);
}
input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration {
    display: none;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    opacity: initial;
}
input::placeholder, textarea::placeholder {
    opacity: initial;
}
input[type=text], input[type=password], textarea {
    background-color: transparent;
    color: var(--timeline-text-color);
}
/* Required by Firefox */
textarea {
    font-family: Nunito, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', Arial, Helvetica, Sans-Serif;
    color: var(--timeline-text-color);
}
input[type=text]:focus, input[type=password]:focus, textarea:focus {
    outline: none;
    box-shadow: none;
}
.mx_HiddenFocusable {
    outline: none;
}
.mx_Dialog .mx_textinput > input[type=text], .mx_Dialog .mx_textinput > input[type=search], .mx_MatrixChat .mx_textinput > input[type=text], .mx_MatrixChat .mx_textinput > input[type=search] {
        border: none;
        -ms-flex: 1;
            flex: 1;
        color: var(--timeline-text-color);
    }
.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], .mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], .mx_Dialog .mx_textinput, .mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], .mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], .mx_MatrixChat .mx_textinput {
        display: block;
        box-sizing: border-box;
        background-color: transparent;
        color: #61708b;
        border-radius: 4px;
        border: 1px solid #9fa9ba;
        margin: 9px;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    }
.mx_Dialog .mx_textinput, .mx_MatrixChat .mx_textinput {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
            align-items: center;
    }
.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]:-ms-input-placeholder, .mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search]:-ms-input-placeholder, .mx_Dialog .mx_textinput input:-ms-input-placeholder, .mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]:-ms-input-placeholder, .mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search]:-ms-input-placeholder, .mx_MatrixChat .mx_textinput input:-ms-input-placeholder {
        color: var(--roomlist-text-secondary-color);
    }
.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::placeholder, .mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search]::placeholder, .mx_Dialog .mx_textinput input::placeholder, .mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::placeholder, .mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search]::placeholder, .mx_MatrixChat .mx_textinput input::placeholder {
        color: var(--roomlist-text-secondary-color);
    }
/*** panels ***/
.dark-panel {
    background-color: var(--roomlist-background-color);
}
.dark-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], .dark-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], .dark-panel .mx_textinput {
        color: #61708b;
        background-color: var(--timeline-background-color);
        border: none;
    }
.light-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], .light-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], .light-panel .mx_textinput {
        color: #61708b;
        background-color: var(--roomlist-background-color);
        border: none;
    }
/* Prevent ugly dotted highlight around selected elements in Firefox */
::-moz-focus-inner {
    border: 0;
}
/* applied to side-panels and messagepanel when in RoomSettings */
.mx_fadable {
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}
/* XXX: critical hack to GeminiScrollbar to allow them to work in FF 42 and Chrome 48.
   Stop the scrollbar view from pushing out the container's overall sizing, which causes
   flexbox to adapt to the new size and cause the view to keep growing.
 */
.gm-scrollbar-container .gm-scroll-view {
    position: absolute;
}
/* Expand thumbs on hoverover */
.gm-scrollbar {
    border-radius: 5px !important;
}
.gm-scrollbar.-vertical {
    width: 6px;
    transition: width 120ms ease-out !important;
}
.gm-scrollbar.-vertical:hover, .gm-scrollbar.-vertical:active {
    width: 8px;
    transition: width 120ms ease-out !important;
}
.gm-scrollbar.-horizontal {
    height: 6px;
    transition: height 120ms ease-out !important;
}
.gm-scrollbar.-horizontal:hover, .gm-scrollbar.-horizontal:active {
    height: 8px;
    transition: height 120ms ease-out !important;
}
#mx_theme_accentColor {
    color: var(--accent-color);
}
#mx_theme_secondaryAccentColor {
    color: var(--roomlist-background-color);
}
#mx_theme_tertiaryAccentColor {
    color: #d3efe1;
}
/* Expected z-indexes for dialogs:
    4000 - Default wrapper index
    4009 - Static dialog background
    4010 - Static dialog itself
    4011 - Standard dialog background
    4012 - Standard dialog itself

   These are set up such that the static dialog always appears
   underneath the standard dialogs.
 */
.mx_Dialog_wrapper {
    position: fixed;
    z-index: 4000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: -ms-flexbox;

    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
}
.mx_Dialog {
    background-color: var(--timeline-background-color);
    color: var(--timeline-text-secondary-color);
    z-index: 4012;
    font-weight: 300;
    font-size: 15px;
    position: relative;
    padding: 25px 30px 30px 30px;
    max-height: 80%;
    box-shadow: 2px 15px 30px 0 rgba(0, 0, 0, 0.48);
    border-radius: 4px;
    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: var(--sidebar-color-50pct);
    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.85;
    background-color: #000;
}
.mx_Dialog_lightbox .mx_Dialog {
    border-radius: 0px;
    background-color: transparent;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    pointer-events: none;
}
.mx_Dialog_header {
    position: relative;
    margin-bottom: 10px;
}
.mx_Dialog_title {
    font-size: 22px;
    line-height: 36px;
    color: var(--timeline-text-color);
}
.mx_Dialog_header.mx_Dialog_headerWithButton > .mx_Dialog_title {
    text-align: center;
}
.mx_Dialog_title.danger {
    color: var(--warning-color);
}
.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: #9fa9ba;
    cursor: pointer;
    position: absolute;
    top: 4px;
    right: 0px;
}
.mx_Dialog_content {
    margin: 24px 0 68px;
    font-size: 14px;
    color: var(--timeline-text-color);
    word-wrap: break-word;
}
.mx_Dialog_buttons {
    margin-top: 20px;
    text-align: right;
}
.mx_Dialog button, .mx_Dialog input[type="submit"] {
    /* align images in buttons (eg spinners) */
    vertical-align: middle;
    border: 0px;
    border-radius: 4px;
    font-family: Nunito, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', Arial, Helvetica, Sans-Serif;
    font-size: 14px;
    color: white;
    background-color: #03b381;
    width: auto;
    padding: 7px;
    padding-left: 1.5em;
    padding-right: 1.5em;
    cursor: pointer;
    display: inline-block;
    outline: none;
    margin-left: 0px;
    margin-right: 8px;
    font-weight: 600;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    background-color: var(--timeline-background-color);
}
.mx_Dialog button:last-child {
    margin-right: 0px;
}
.mx_Dialog button:hover, .mx_Dialog input[type="submit"]:hover {
}
.mx_Dialog button:focus, .mx_Dialog input[type="submit"]:focus {
    filter: brightness(105%);
}
.mx_Dialog button.mx_Dialog_primary, .mx_Dialog input[type="submit"].mx_Dialog_primary {
    color: #ffffff;
    background-color: var(--accent-color);
    min-width: 156px;
}
.mx_Dialog button.danger, .mx_Dialog input[type="submit"].danger {
    background-color: var(--warning-color);
    border: solid 1px var(--warning-color);
    color: #ffffff;
}
.mx_Dialog button:disabled, .mx_Dialog input[type="submit"]:disabled {
    background-color: var(--timeline-text-secondary-color);
    border: solid 1px var(--timeline-text-secondary-color);
    opacity: 0.7;
}
/* Spinner Dialog overide */
.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog {
    width: auto;
    border-radius: 8px;
    padding: 0px;
    box-shadow: none;
}
.mx_GeneralButton {
    /* align images in buttons (eg spinners) */
    vertical-align: middle;
    border: 0px;
    border-radius: 4px;
    font-family: Nunito, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', Arial, Helvetica, Sans-Serif;
    font-size: 14px;
    color: white;
    background-color: #03b381;
    width: auto;
    padding: 7px;
    padding-left: 1.5em;
    padding-right: 1.5em;
    cursor: pointer;
    display: inline-block;
    outline: none;
    display: inline;
    margin: auto;
}
.mx_GeneralButton:hover {
}
.mx_linkButton {
    cursor: pointer;
    color: var(--accent-color);
}
.mx_TextInputDialog_label {
    text-align: left;
    padding-bottom: 12px;
}
.mx_TextInputDialog_input {
    font-size: 15px;
    border-radius: 3px;
    border: 1px solid #e7e7e7;
    padding: 9px;
    color: var(--timeline-text-color);
    background-color: var(--timeline-background-color);
}
.mx_textButton {
    /* align images in buttons (eg spinners) */
    vertical-align: middle;
    border: 0px;
    border-radius: 4px;
    font-family: Nunito, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', Arial, Helvetica, Sans-Serif;
    font-size: 14px;
    color: white;
    background-color: #03b381;
    width: auto;
    padding: 7px;
    padding-left: 1.5em;
    padding-right: 1.5em;
    cursor: pointer;
    display: inline-block;
    outline: none;
    font-size: 15px;
    padding: 0px 1.5em 0px 1.5em;
}
.mx_textButton:hover {
}
.mx_button_row {
    margin-top: 69px;
}
.mx_Beta {
    color: red;
    margin-right: 10px;
    position: relative;
    top: -3px;
    background-color: white;
    padding: 0 4px;
    border-radius: 3px;
    border: 1px solid darkred;
    cursor: help;
    transition-duration: 200ms;
    font-size: smaller;
    filter: opacity(0.5);
}
.mx_Beta:hover {
    color: white;
    border: 1px solid gray;
    background-color: darkred;
}
.mx_TintableSvgButton {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-line-pack: center;
        align-content: center;
}
.mx_TintableSvgButton object {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}
.mx_TintableSvgButton span {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}
.mx_Username_color1 {
    color: #368bd6;
}
.mx_Username_color2 {
    color: #ac3ba8;
}
.mx_Username_color3 {
    color: var(--accent-color);
}
.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;
}
/*
Copyright 2018 New Vector Ltd

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
/* This file has CSS for both native and non-native scrollbars in an
 * order that's fairly logic to read but violates stylelints descending
 * specificity rule, so turn it off for this file. It also duplicates
 * a selector to separate the hiding/showing from the sizing.
 */
/* stylelint-disable no-descending-specificity, no-duplicate-selectors */
/*
1. for browsers that support native overlay auto-hiding scrollbars
*/
.mx_AutoHideScrollbar {
    overflow-x: hidden;
    overflow-y: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
/*
2. webkit also supports overflow:overlay where the scrollbars don't take any space
in the layout but they don't autohide, so do that only on hover
*/
body.mx_scrollbar_overlay_noautohide .mx_AutoHideScrollbar {
    overflow-y: hidden;
}
body.mx_scrollbar_overlay_noautohide .mx_AutoHideScrollbar:hover {
    overflow-y: overlay;
}
/*
3. as a last fallback, compensate for the scrollbar taking up space in the layout
by having giving the child element (.mx_AutoHideScrollbar_offset) a
negative right margin of the width of the scrollbar when the container
is overflowing. This is what Firefox ends up using. Overflow is detected
in javascript, and adds the mx_AutoHideScrollbar_overflow class to the container.
This only works in Firefox, which should be fine as this fallback is only needed there.
*/
body.mx_scrollbar_nooverlay .mx_AutoHideScrollbar {
        overflow-y: hidden;
    }
body.mx_scrollbar_nooverlay .mx_AutoHideScrollbar:hover {
        overflow-y: auto;
    }
/*
    offset scrollbar width with negative margin-right

    include before and after psuedo-elements here so they can
    be used to do something interesting like scroll-indicating
    gradients (see IndicatorScrollBar)
    */
body.mx_scrollbar_nooverlay .mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow > .mx_AutoHideScrollbar_offset, body.mx_scrollbar_nooverlay .mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow::before, body.mx_scrollbar_nooverlay .mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow::after {
        margin-right: calc(-1 * var(--scrollbar-width));
    }
.mx_AutoHideScrollbar {
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    scrollbar-width: thin;
}
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}
.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;
}
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2019 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_ContextualMenu_wrapper {
    position: fixed;
    z-index: 5000;
}
.mx_ContextualMenu_background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1.0;
    z-index: 5000;
}
.mx_ContextualMenu {
    border-radius: 4px;
    box-shadow: 4px 4px 12px 0 #181b21;
    background-color: var(--timeline-background-color);
    color: var(--timeline-text-color);
    position: absolute;
    font-size: 14px;
    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: 0px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-left: 8px solid var(--timeline-background-color);
    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: 0px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-right: 8px solid var(--timeline-background-color);
    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: 0px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-bottom: 8px solid var(--timeline-background-color);
    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: 0px;
    bottom: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-top: 8px solid var(--timeline-background-color);
    border-right: 8px solid transparent;
}
.mx_ContextualMenu_spinner {
    display: block;
    margin: 0 auto;
}
/*
Copyright 2015, 2016 OpenMarket Ltd

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_CreateRoom {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    color: var(--timeline-text-color);
}
.mx_CreateRoom input, .mx_CreateRoom textarea {
    border-radius: 3px;
    border: 1px solid #c7c7c7;
    font-weight: 300;
    font-size: 13px;
    padding: 9px;
    margin-top: 6px;
}
.mx_CreateRoom_description {
    width: 330px;
}
/*
Copyright 2019 New Vector Ltd.

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_LeftPanel_tagPanelContainer {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
}
.mx_CustomRoomTagPanel {
    background-color: var(--sidebar-color);
    max-height: 40vh;
}
.mx_CustomRoomTagPanel_scroller {
    max-height: inherit;
}
.mx_CustomRoomTagPanel .mx_AccessibleButton {
    margin: 9px auto;
    width: 40px;
}
.mx_CustomRoomTagPanel .mx_BaseAvatar_image {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
}
.mx_CustomRoomTagPanel .mx_AccessibleButton.CustomRoomTagPanel_tileSelected .mx_BaseAvatar_image {
    border: 3px solid var(--warning-color);
    border-radius: 40px;
}
/*
Copyright 2016 OpenMarket Ltd

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_FilePanel {
    -ms-flex-order: 2;
        order: 2;
    -ms-flex: 1 1 0px;
        flex: 1 1 0;
    overflow-y: auto;
}
.mx_FilePanel .mx_RoomView_messageListWrapper {
    margin-right: 20px;
}
.mx_FilePanel .mx_RoomView_MessageList h2 {
    display: none;
}
/* FIXME: rather than having EventTile's default CSS be for MessagePanel,
   we should make EventTile a base CSS class and customise it specifically
   for usage in {Message,File,Notification}Panel. */
.mx_FilePanel .mx_EventTile_avatar {
    display: none;
}
/* Overrides for the attachment body tiles */
.mx_FilePanel .mx_EventTile {
    word-break: break-word;
}
.mx_FilePanel .mx_EventTile .mx_MImageBody {
    margin-right: 0px;
}
.mx_FilePanel .mx_EventTile .mx_MFileBody_download {
    display: -ms-flexbox;
    display: flex;
    font-size: 14px;
    color: #a1b2d1;
}
.mx_FilePanel .mx_EventTile .mx_MFileBody_downloadLink {
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    color: var(--timeline-text-secondary-color);
}
.mx_FilePanel .mx_EventTile .mx_MImageBody_size {
    -ms-flex: 1 0 0px;
        flex: 1 0 0;
    font-size: 11px;
    text-align: right;
    white-space: nowrap;
}
/* Overides for the sender details line */
.mx_FilePanel .mx_EventTile_senderDetails {
    display: -ms-flexbox;
    display: flex;
    margin-top: -2px;
}
.mx_FilePanel .mx_EventTile_senderDetailsLink {
    text-decoration: none;
}
.mx_FilePanel .mx_EventTile .mx_SenderProfile {
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    line-height: initial;
    padding: 0px;
    font-size: 11px;
    opacity: 1.0;
    color: #a1b2d1;
}
.mx_FilePanel .mx_EventTile .mx_MessageTimestamp {
    -ms-flex: 1 0 0px;
        flex: 1 0 0;
    text-align: right;
    visibility: visible;
    position: initial;
    font-size: 11px;
    opacity: 1.0;
    color: #a1b2d1;
}
/* Overrides for the wrappers around the body tile */
.mx_FilePanel .mx_EventTile_line {
    margin-right: 0px;
    padding-left: 0px;
}
.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line {
    padding-left: 0px;
}
.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
    background-color: var(--timeline-background-color);
}
.mx_GenericErrorPage {
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: 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;
}
/*
Copyright 2017 Vector Creations Ltd

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_GroupView {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    overflow: hidden;
}
.mx_GroupView_error {
    margin: auto;
}
.mx_GroupView_header {
    min-height: 52px;
    -ms-flex-align: center;
        align-items: center;
    display: -ms-flexbox;
    display: flex;
    padding-bottom: 10px;
}
.mx_GroupView_header_view {
    border-bottom: 1px solid var(--roomlist-separator-color);
    padding-bottom: 0px;
    padding-left: 19px;
    padding-right: 8px;
}
.mx_GroupView_header_avatar, .mx_GroupView_header_info {
    display: table-cell;
    vertical-align: middle;
}
.mx_GroupHeader_button {
    margin-left: 5px;
    margin-right: 5px;
    cursor: pointer;
    height: 20px;
    width: 20px;
    background-color: #a1b2d1;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}
.mx_GroupHeader_editButton {
    -webkit-mask-image: url(../../img/icons-settings-room.942b673.svg);
            mask-image: url(../../img/icons-settings-room.942b673.svg);
}
.mx_GroupHeader_shareButton {
    -webkit-mask-image: url(../../img/icons-share.c75982d.svg);
            mask-image: url(../../img/icons-share.c75982d.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 var(--accent-color) !important;
    outline: none;
    box-shadow: none;
}
.mx_GroupView_header_isUserMember .mx_GroupView_header_name:hover div:not(.mx_GroupView_editable) {
    color: var(--accent-color);
    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 {
    -ms-flex: 1;
        flex: 1;

    overflow: hidden;
}
.mx_GroupView_header_rightCol {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
}
.mx_GroupView_textButton {
    display: inline-block;
}
.mx_GroupView_header_groupid {
    font-weight: normal;
    font-size: initial;
    padding-left: 10px;
}
.mx_GroupView_header_name {
    vertical-align: middle;
    width: 100%;
    height: 31px;
    overflow: hidden;
    color: var(--timeline-text-color);
    font-weight: bold;
    font-size: 22px;
    padding-left: 19px;
    padding-right: 16px;
    /* why isn't text-overflow working? */
    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: 13px;
    padding-left: 19px;
    margin-right: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid transparent;
}
.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 0px 10px;
}
.mx_GroupView_label_text {
    display: inline-block;
    max-width: 80%;
    vertical-align: 0.1em;
    line-height: 2em;
}
.mx_GroupView > .mx_MainSplit {
    -ms-flex: 1;
        flex: 1;
}
.mx_GroupView_body {
    -ms-flex-positive: 1;
        flex-grow: 1;
}
.mx_GroupView_rooms {
    -ms-flex-positive: 1;
        flex-grow: 1;
    display: -ms-flexbox;
    display: flex;
    -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: #edf3ff;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 10px;
}
.mx_GroupView_rooms_header .mx_AccessibleButton {
    padding-left: 14px;
    margin-bottom: 14px;
    height: 24px;
}
.mx_GroupView_group {
    border-top: 1px solid var(--roomlist-separator-color);
}
.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: 24px;
    padding-left: 28px;
    color: var(--accent-color);
}
.mx_GroupView_rooms .mx_RoomDetailList {
    -ms-flex-positive: 1;
        flex-grow: 1;
    border-top: 1px solid var(--roomlist-separator-color);
    padding-top: 10px;
    word-break: break-word;
}
.mx_GroupView .mx_RoomView_messageListWrapper {
    -ms-flex-pack: start;
        justify-content: flex-start;
}
.mx_GroupView_membershipSection {
    color: var(--timeline-text-secondary-color);
    margin-top: 10px;
}
.mx_GroupView_membershipSubSection {
    -ms-flex-pack: justify;
        justify-content: space-between;
    display: -ms-flexbox;
    display: flex;
}
.mx_GroupView_membershipSubSection .mx_Spinner {
    -ms-flex-pack: end;
        justify-content: flex-end;
}
.mx_GroupView_membershipSection_description {
    /* To match textButton */
    line-height: 34px;
}
.mx_GroupView_membershipSection_description .mx_BaseAvatar {
    margin-right: 10px;
}
.mx_GroupView_membershipSection .mx_GroupView_textButton {
    margin-right: 0px;
    margin-top: 0px;
    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: bold;
    font-size: 120%;
    margin-bottom: 20px;
}
.mx_GroupView_featuredThings_category {
    font-weight: bold;
    font-size: 110%;
    margin-top: 10px;
}
.mx_GroupView_featuredThings_container {
    display: -ms-flexbox;
    display: flex;
}
.mx_GroupView_featuredThings_addButton, .mx_GroupView_featuredThing {
    display: table-cell;
    text-align: center;

    width: 100px;
    margin: 0px 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 {
    /* To prevent misalignment with mx_TintableSvg (in addButton) */
    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 .gm-scroll-view > * {
    margin: 11px 50px 0px 68px;
}
.mx_GroupView_groupDesc textarea {
    width: 100%;
    max-width: 100%;
    height: 150px;
}
.mx_GroupView_groupDesc_placeholder, .mx_GroupView_changeDelayWarning {
    background-color: #22262e;
    color: var(--timeline-text-secondary-color);
    border-radius: 10px;
    text-align: center;

    margin: 20px 0px;
}
.mx_GroupView_groupDesc_placeholder {
    padding: 100px 20px;
    cursor: pointer;
}
.mx_GroupView_changeDelayWarning {
    padding: 40px 20px;
}
.mx_GroupView .mx_MemberInfo .gm-scroll-view > :not(.mx_MemberInfo_avatar) {
    padding-left: 16px;
    padding-right: 16px;
}
/*
Copyright 2019 New Vector Ltd

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_HeaderButtons {
    display: -ms-flexbox;
    display: flex;
}
.mx_HeaderButtons::before {
    content: "";
    background-color: #a1b2d1;
    opacity: 0.5;
    margin: 0 15px;
    border-radius: 1px;
    width: 1px;
}
/*
Copyright 2016 OpenMarket Ltd
Copyright 2017 Vector Creations Ltd
Copyright 2019 New Vector Ltd

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_HomePage {
    max-width: 960px;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2018 New Vector Ltd

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_LeftPanel_container {
    display: -ms-flexbox;
    display: flex;
    /* LeftPanel 260px */
    min-width: 260px;
    -ms-flex: 0 0 auto;
        flex: 0 0 auto;
}
.mx_LeftPanel_container.collapsed {
    min-width: unset;
    /* Collapsed LeftPanel 50px */
    -ms-flex: 0 0 50px;
        flex: 0 0 50px;
}
.mx_LeftPanel_container.collapsed.mx_LeftPanel_container_hasTagPanel {
    /* TagPanel 70px + Collapsed LeftPanel 50px */
    -ms-flex: 0 0 120px;
        flex: 0 0 120px;
}
.mx_LeftPanel_tagPanelContainer {
    -ms-flex: 0 0 70px;
        flex: 0 0 70px;
    height: 100%;
}
.mx_LeftPanel_hideButton {
    position: absolute;
    top: 10px;
    right: 0px;
    padding: 8px;
    cursor: pointer;
}
.mx_LeftPanel {
    -ms-flex: 1;
        flex: 1;
    overflow-x: hidden;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    min-height: 0;
}
.mx_LeftPanel .mx_AppTile_mini {
    height: 132px;
}
.mx_LeftPanel .mx_RoomList_scrollbar {
    -ms-flex-order: 1;
        order: 1;

    -ms-flex: 1 1 0px;

        flex: 1 1 0;

    overflow-y: auto;
    z-index: 6;
}
.mx_LeftPanel .mx_BottomLeftMenu {
    -ms-flex-order: 3;
        order: 3;

    border-top: 1px solid var(--roomlist-separator-color);
    margin-left: 16px; /* gutter */
    margin-right: 16px; /* gutter */
    -ms-flex: 0 0 60px;
        flex: 0 0 60px;
    z-index: 1;
}
.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu {
    -ms-flex: 0 0 160px;
        flex: 0 0 160px;
    margin-bottom: 9px;
}
.mx_LeftPanel .mx_BottomLeftMenu_options {
    margin-top: 18px;
}
.mx_BottomLeftMenu_options object {
    pointer-events: none;
}
.mx_BottomLeftMenu_options > div {
    display: inline-block;
}
.mx_BottomLeftMenu_options .mx_RoleButton {
    margin-left: 0px;
    margin-right: 10px;
    height: 30px;
}
.mx_BottomLeftMenu_options .mx_BottomLeftMenu_settings {
    float: right;
}
.mx_BottomLeftMenu_options .mx_BottomLeftMenu_settings .mx_RoleButton {
    margin-right: 0px;
}
.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu_settings {
    float: none;
}
.mx_MatrixChat_useCompactLayout .mx_LeftPanel .mx_BottomLeftMenu {
        -ms-flex: 0 0 50px;
            flex: 0 0 50px;
    }
.mx_MatrixChat_useCompactLayout .mx_LeftPanel_container.collapsed .mx_BottomLeftMenu {
        -ms-flex: 0 0 160px;
            flex: 0 0 160px;
    }
.mx_MatrixChat_useCompactLayout .mx_LeftPanel .mx_BottomLeftMenu_options {
        margin-top: 12px;
    }
.mx_LeftPanel_exploreAndFilterRow {
    display: -ms-flexbox;
    display: flex;
}
.mx_LeftPanel_exploreAndFilterRow .mx_SearchBox {
        -ms-flex: 1 1 0px;
            flex: 1 1 0;
        min-width: 0;
        margin: 4px 9px 1px 9px;
    }
.mx_LeftPanel_explore {
    -ms-flex: 0 0 50%;
        flex: 0 0 50%;
    overflow: hidden;
    transition: flex-basis 0.2s;
    transition: flex-basis 0.2s, -ms-flex-preferred-size 0.2s;
    box-sizing: border-box;
}
.mx_LeftPanel_explore.mx_LeftPanel_explore_hidden {
        -ms-flex-preferred-size: 0;
            flex-basis: 0;
    }
.mx_LeftPanel_explore .mx_AccessibleButton {
        font-size: 14px;
        margin: 4px 0 1px 9px;
        padding: 9px;
        padding-left: 42px;
        font-weight: 600;
        color: var(--timeline-text-secondary-color);
        position: relative;
        border-radius: 4px;
    }
.mx_LeftPanel_explore .mx_AccessibleButton:hover {
            background-color: var(--timeline-background-color);
        }
.mx_LeftPanel_explore .mx_AccessibleButton::before {
            cursor: pointer;
            -webkit-mask: url(../../img/explore.32f6303.svg);
                    mask: url(../../img/explore.32f6303.svg);
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            -webkit-mask-position: center center;
                    mask-position: center center;
            content: "";
            left: 14px;
            top: 10px;
            width: 16px;
            height: 16px;
            background-color: var(--timeline-text-secondary-color);
            position: absolute;
        }
/*
Copyright 2019 New Vector Ltd

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_MainSplit {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    min-width: 0;
}
.mx_MainSplit > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
    margin: 0 -10px 0 0;
    padding: 0 10px 0 0;
}
/*
Copyright 2015, 2016 OpenMarket Ltd

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_MatrixChat_splash {
    position: relative;
    height: 100%;
}
.mx_MatrixChat_splashButtons {
    text-align: center;
    width: 100%;
    position: absolute;
    bottom: 30px;
}
.mx_MatrixChat_wrapper {
    display: -ms-flexbox;
    display: flex;

    -ms-flex-direction: column;

        flex-direction: column;

    width: 100%;
    height: 100%;
}
.mx_MatrixToolbar {
    -ms-flex-order: 1;
        order: 1;

    height: 40px;
}
.mx_MatrixChat_toolbarShowing {
    height: auto;
}
.mx_MatrixChat {
    width: 100%;
    height: 100%;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-order: 2;

        order: 2;

    -ms-flex: 1;

        flex: 1;
    min-height: 0;
}
.mx_MatrixChat_syncError {
    color: #ffffff;
    background-color: #DF2A8B;
    border-radius: 5px;
    display: table;
    padding: 30px;
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
}
/* not the left panel, and not the resize handle, so the roomview/groupview/... */
.mx_MatrixChat > :not(.mx_LeftPanel_container):not(.mx_ResizeHandle) {
    background-color: var(--timeline-background-color);

    -ms-flex: 1 1 0px;

        flex: 1 1 0;
    min-width: 0;

    /* Experimental fix for https://github.com/vector-im/vector-web/issues/947
       and https://github.com/vector-im/vector-web/issues/946.
       Empirically this stops the MessagePanel's width exploding outwards when
       gemini is in 'prevented' mode
       */
    overflow-x: auto;

    /* To fix https://github.com/vector-im/riot-web/issues/3298 where Safari
       needed height 100% all the way down to the HomePage. Height does not
       have to be auto, empirically.
    */
    height: 100%;
}
/*
Copyright 2017 Vector Creations Ltd

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_MyGroups {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
}
.mx_MyGroups .mx_RoomHeader_simpleHeader {
    margin-left: 0px;
}
.mx_MyGroups_header {
    /* Keep mid-point of create button aligned with icon in page header */
    margin-left: 2px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.mx_MyGroups > :not(.mx_RoomHeader) {
    max-width: 960px;
    margin: 40px;
}
.mx_MyGroups_headerCard {
    -ms-flex: 1 0 50%;
        flex: 1 0 50%;
    margin-bottom: 30px;
    min-width: 400px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
}
.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button {
    -ms-flex: 0 0 auto;
        flex: 0 0 auto;
    margin-right: 13px;
    height: 40px;
    width: 40px;
    border-radius: 20px;
    background-color: var(--timeline-text-secondary-color);
    position: relative;
}
.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button::before {
        background-color: #edf3ff;
        -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: bold;
    margin-bottom: 10px;
}
.mx_MyGroups_headerCard_content {
    padding-right: 15px;
}
/* Until the button is wired up */
.mx_MyGroups_joinBox {
    visibility: hidden;

    /* When joinBox wraps onto its own row, it should take up zero height so
       that there isn't an awkward gap between MyGroups_createBox and
       MyGroups_content.
    */
    height: 0px;
    margin: 0px;
}
.mx_MyGroups_content {
    margin-left: 2px;

    -ms-flex: 1 0 0px;

        flex: 1 0 0;

    display: -ms-flexbox;

    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
}
.mx_MyGroups_placeholder {
    background-color: #22262e;
    color: var(--timeline-text-secondary-color);
    line-height: 400px;
    border-radius: 10px;
    text-align: center;
}
.mx_MyGroups_joinedGroups {
    border-top: 1px solid var(--roomlist-separator-color);
    overflow-x: hidden;

    display: -ms-flexbox;

    display: flex;
    -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%;
    -ms-flex: 1 0 300px;
        flex: 1 0 300px;
    height: 75px;
    margin: 10px 0px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
        align-items: flex-start;
    cursor: pointer;
}
.mx_GroupTile_avatar {
    cursor: grab, -webkit-grab;
}
.mx_GroupTile_profile {
    margin-left: 10px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: center;
        justify-content: center;
}
.mx_GroupTile_profile .mx_GroupTile_name, .mx_GroupTile_profile .mx_GroupTile_groupId, .mx_GroupTile_profile .mx_GroupTile_desc {
    padding-right: 10px;
}
.mx_GroupTile_profile .mx_GroupTile_name {
    margin: 0px;
    font-size: 15px;
}
.mx_GroupTile_profile .mx_GroupTile_groupId {
    font-size: 13px;
    opacity: 0.7;
}
.mx_GroupTile_profile .mx_GroupTile_desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    font-size: 13px;
    max-height: 36px;
    overflow: hidden;
}
/*
Copyright 2015, 2016 OpenMarket Ltd

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_NotificationPanel {
    -ms-flex-order: 2;
        order: 2;
    -ms-flex: 1 1 0px;
        flex: 1 1 0;
    overflow-y: auto;
}
.mx_NotificationPanel .mx_RoomView_messageListWrapper {
    margin-right: 20px;
}
.mx_NotificationPanel .mx_RoomView_MessageList h2 {
    margin-left: 0px;
}
/* FIXME: rather than having EventTile's default CSS be for MessagePanel,
   we should make EventTile a base CSS class and customise it specifically
   for usage in {Message,File,Notification}Panel. */
.mx_NotificationPanel .mx_EventTile {
    word-break: break-word;
}
.mx_NotificationPanel .mx_EventTile_roomName {
    font-weight: bold;
    font-size: 14px;
}
.mx_NotificationPanel .mx_EventTile_roomName a {
    color: var(--timeline-text-color);
}
.mx_NotificationPanel .mx_EventTile_avatar {
    top: 8px;
    left: 0px;
}
.mx_NotificationPanel .mx_EventTile .mx_SenderProfile, .mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
    color: var(--timeline-text-color);
    font-size: 12px;
    display: inline;
    padding-left: 0px;
}
.mx_NotificationPanel .mx_EventTile_senderDetails {
    padding-left: 32px;
    padding-top: 8px;
    position: relative;
}
.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: initial;
    display: inline;
}
.mx_NotificationPanel .mx_EventTile_line {
    margin-right: 0px;
    padding-left: 32px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 0px;
}
.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line {
    padding-left: 0px;
}
.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
    background-color: var(--timeline-background-color);
}
.mx_NotificationPanel .mx_EventTile_content {
    margin-right: 0px;
}
/*
Copyright 2015, 2016 OpenMarket Ltd

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_RightPanel {
    overflow-x: hidden;
    -ms-flex: 0 0 auto;
        flex: 0 0 auto;
    position: relative;
    min-width: 250px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
}
.mx_RightPanel_header {
    -ms-flex-order: 1;
        order: 1;
    border-bottom: 1px solid var(--roomlist-separator-color);
    -ms-flex: 0 0 52px;
        flex: 0 0 52px;
}
/** Fixme - factor this out with the main header **/
.mx_RightPanel_headerButtonGroup {
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    background-color: var(--timeline-background-color);
    padding: 0 9px;
    -ms-flex-align: center;
        align-items: center;
}
.mx_RightPanel_headerButton {
    cursor: pointer;
    -ms-flex: 0 0 auto;
        flex: 0 0 auto;
    vertical-align: top;
    margin-left: 5px;
    margin-right: 5px;
    text-align: center;
    border-bottom: 2px solid transparent;
    height: 20px;
    width: 20px;
    position: relative;
}
.mx_RightPanel_headerButton::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #a1b2d1;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}
.mx_RightPanel_membersButton::before {
    -webkit-mask-image: url(../../img/feather-customised/user.7a4d23d.svg);
            mask-image: url(../../img/feather-customised/user.7a4d23d.svg);
}
.mx_RightPanel_filesButton::before {
    -webkit-mask-image: url(../../img/feather-customised/files.d6a33b8.svg);
            mask-image: url(../../img/feather-customised/files.d6a33b8.svg);
}
.mx_RightPanel_notifsButton::before {
    -webkit-mask-image: url(../../img/feather-customised/notifications.51febb7.svg);
            mask-image: url(../../img/feather-customised/notifications.51febb7.svg);
}
.mx_RightPanel_groupMembersButton::before {
    -webkit-mask-image: url(../../img/icons-people.af03c4c.svg);
            mask-image: url(../../img/icons-people.af03c4c.svg);
}
.mx_RightPanel_roomsButton::before {
    -webkit-mask-image: url(../../img/icons-room-nobg.a6a494e.svg);
            mask-image: url(../../img/icons-room-nobg.a6a494e.svg);
}
.mx_RightPanel_headerButton_highlight::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--accent-color);
}
.mx_RightPanel_headerButton_badge {
    font-size: 8px;
    border-radius: 8px;
    color: #ffffff;
    background-color: var(--accent-color);
    font-weight: bold;
    position: absolute;
    top: -4px;
    left: 20px;
    padding: 2px 4px;
}
.mx_RightPanel_collapsebutton {
    -ms-flex: 1;
        flex: 1;
    text-align: right;
    height: 16px;
    border: none;
}
.mx_RightPanel .mx_MemberList, .mx_RightPanel .mx_MemberInfo, .mx_RightPanel .mx_GroupRoomList, .mx_RightPanel_blank {
    -ms-flex-order: 2;
        order: 2;
    -ms-flex: 1 1 0px;
        flex: 1 1 0;
}
.mx_RightPanel .mx_RoomView_messagePanelSpinner {
    -ms-flex-order: 2;
        order: 2;
    margin: auto;
}
/*
Copyright 2015, 2016 OpenMarket Ltd

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_RoomDirectory_dialogWrapper > .mx_Dialog {
    max-width: 960px;
    height: 100%;
}
.mx_RoomDirectory_dialog {
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
}
.mx_RoomDirectory {
    margin-bottom: 12px;
    color: var(--timeline-text-color);
    word-break: break-word;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex: 1;
        flex: 1;
}
.mx_RoomDirectory_list {
    -ms-flex: 1;
        flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
}
.mx_RoomDirectory_list .mx_RoomView_messageListWrapper {
    -ms-flex-pack: start;
        justify-content: flex-start;
}
.mx_RoomDirectory_listheader {
    display: -ms-flexbox;
    display: flex;
    margin-top: 12px;
    margin-bottom: 12px;
}
.mx_RoomDirectory_searchbox {
    -ms-flex: 1 !important;
        flex: 1 !important;
}
.mx_RoomDirectory_listheader .mx_NetworkDropdown {
    -ms-flex: 0 0 200px;
        flex: 0 0 200px;
}
.mx_RoomDirectory_tableWrapper {
    overflow-y: auto;
    -ms-flex: 1 1 0px;
        flex: 1 1 0;
}
.mx_RoomDirectory_table {
    font-size: 14px;
    color: var(--timeline-text-color);
    width: 100%;
    text-align: left;
    table-layout: fixed;
}
.mx_RoomDirectory_roomAvatar {
    width: 32px;
    padding-right: 14px;
    vertical-align: top;
}
.mx_RoomDirectory_roomDescription {
    padding-bottom: 16px;
}
.mx_RoomDirectory_roomMemberCount {
    color: var(--timeline-text-secondary-color);
    width: 60px;
    padding: 0 10px;
    text-align: center;
}
.mx_RoomDirectory_roomMemberCount::before {
        background-color: var(--timeline-text-secondary-color);
        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 {
    width: 80px;
    text-align: center;
    white-space: nowrap;
}
.mx_RoomDirectory_name {
    display: inline-block;
    font-weight: 600;
}
.mx_RoomDirectory_perms {
    display: inline-block;
}
.mx_RoomDirectory_topic {
    cursor: initial;
    color: var(--timeline-text-secondary-color);
}
.mx_RoomDirectory_alias {
    font-size: 12px;
    color: #a2a2a2;
}
.mx_RoomDirectory_table tr {
    padding-bottom: 10px;
    cursor: pointer;
}
.mx_RoomDirectory .mx_RoomView_MessageList {
    padding: 0;
}
.mx_RoomDirectory p {
    font-size: 14px;
    margin-top: 0;
}
.mx_RoomDirectory p .mx_AccessibleButton {
        padding: 0;
    }
/*
Copyright 2015, 2016 OpenMarket Ltd

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_RoomStatusBar {
    margin-left: 65px;
    min-height: 50px;
}
/* position the indicator in the same place horizontally as .mx_EventTile_avatar. */
.mx_RoomStatusBar_indicator {
    padding-left: 17px;
    padding-right: 12px;
    margin-left: -73px;
    margin-top: 15px;
    float: left;
    width: 24px;
    text-align: center;
}
.mx_RoomStatusBar_callBar {
    height: 50px;
    line-height: 50px;
}
.mx_RoomStatusBar_placeholderIndicator span {
    color: var(--timeline-text-color);
    opacity: 0.5;
    position: relative;
    top: -4px;
    /*
    animation-duration: 1s;
    animation-name: bounce;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    */
}
.mx_RoomStatusBar_placeholderIndicator span:nth-child(1) {
    animation-delay: 0.3s;
}
.mx_RoomStatusBar_placeholderIndicator span:nth-child(2) {
    animation-delay: 0.6s;
}
.mx_RoomStatusBar_placeholderIndicator span:nth-child(3) {
    animation-delay: 0.9s;
}
@keyframes bounce {
    from {
        opacity: 0.5;
        top: 0;
    }

    to {
        opacity: 0.2;
        top: -3px;
    }
}
.mx_RoomStatusBar_typingIndicatorAvatars {
    width: 52px;
    margin-top: -1px;
    text-align: left;
}
.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_image {
    margin-right: -12px;
    border: 1px solid var(--timeline-background-color);
}
.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 var(--timeline-background-color);
    border-radius: 40px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    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: var(--warning-color);
    cursor: pointer;
}
.mx_RoomStatusBar_connectionLostBar {
    display: -ms-flexbox;
    display: flex;

    margin-top: 19px;
    min-height: 58px;
}
.mx_RoomStatusBar_connectionLostBar img {
    padding-left: 10px;
    padding-right: 10px;
    vertical-align: middle;
    float: left;
}
.mx_RoomStatusBar_connectionLostBar_title {
    color: var(--warning-color);
}
.mx_RoomStatusBar_connectionLostBar_desc {
    color: var(--timeline-text-color);
    font-size: 13px;
    opacity: 0.5;
    padding-bottom: 20px;
}
.mx_RoomStatusBar_resend_link {
    color: var(--timeline-text-color) !important;
    text-decoration: underline !important;
    cursor: pointer;
}
.mx_RoomStatusBar_typingBar {
    height: 50px;
    line-height: 50px;

    color: var(--timeline-text-color);
    opacity: 0.5;
    overflow-y: hidden;
    display: block;
}
.mx_RoomStatusBar_isAlone {
    height: 50px;
    line-height: 50px;

    color: var(--timeline-text-color);
    opacity: 0.5;
    overflow-y: hidden;
    display: block;
}
.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar {
        min-height: 40px;
    }
.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_indicator {
        margin-top: 10px;
    }
.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_callBar {
        height: 40px;
        line-height: 40px;
    }
.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_typingBar {
        height: 40px;
        line-height: 40px;
    }
/*
Copyright 2015, 2016 OpenMarket Ltd

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.
*/
/* a word of explanation about the flex-shrink values employed here:
   there are 3 priotized categories of screen real-estate grabbing,
   each with a flex-shrink difference of 4 order of magnitude,
   so they ideally wouldn't affect each other.
   lowest category: .mx_RoomSubList
        flex-shrink: 10000000
        distribute size of items within the same categery by their size
   middle category: .mx_RoomSubList.resized-sized
        flex-shrink: 1000
        applied when using the resizer, will have a max-height set to it,
        to limit the size
   highest category: .mx_RoomSubList.resized-all
        flex-shrink: 1
        small flex-shrink value (1), is only added if you can drag the resizer so far
        so in practice you can only assign this category if there is enough space.
*/
.mx_RoomSubList {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
}
.mx_RoomSubList_nonEmpty .mx_AutoHideScrollbar_offset {
    padding-bottom: 4px;
}
.mx_RoomSubList_labelContainer {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex: 0 0 auto;
        flex: 0 0 auto;
    margin: 0 16px;
    height: 36px;
}
.mx_RoomSubList_label {
    -ms-flex: 1;
        flex: 1;
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    padding: 0 6px;
}
.mx_RoomSubList_label > span {
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    text-transform: uppercase;
    color: var(--roomlist-text-secondary-color);
    font-weight: 700;
    font-size: 12px;
    margin-left: 8px;
}
.mx_RoomSubList_badge {
    -ms-flex: 0 0 auto;
        flex: 0 0 auto;
    border-radius: 8px;
    font-weight: 600;
    font-size: 12px;
    padding: 0 5px;
    color: var(--roomlist-background-color);
    background-color: var(--roomlist-text-secondary-color);
    cursor: pointer;
}
.mx_RoomSubList_addRoom, .mx_RoomSubList_badge {
    margin-left: 7px;
}
.mx_RoomSubList_addRoom {
    background-color: var(--timeline-text-secondary-color);
    border-radius: 10px;
    height: 16px;
    -ms-flex: 0 0 16px;
        flex: 0 0 16px;
    position: relative;
}
.mx_RoomSubList_addRoom::before {
        background-color: #edf3ff;
        -webkit-mask: url(../../img/icons-room-add.bd36e26.svg);
                mask: url(../../img/icons-room-add.bd36e26.svg);
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-position: center;
                mask-position: center;
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
.mx_RoomSubList_badgeHighlight {
    color: #ffffff;
    background-color: var(--warning-color);
}
.mx_RoomSubList_chevron {
    pointer-events: none;
    -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;
    transition: transform 0.2s ease-in;
    width: 10px;
    height: 6px;
    margin-left: 2px;
    background-color: var(--roomlist-text-secondary-color);
}
.mx_RoomSubList_chevronDown {
    transform: rotateZ(0deg);
}
.mx_RoomSubList_chevronUp {
    transform: rotateZ(180deg);
}
.mx_RoomSubList_chevronRight {
    transform: rotateZ(-90deg);
}
.mx_RoomSubList_scroll {
    /* let rooms list grab as much space as it needs (auto),
       potentially overflowing and showing a scrollbar */
    -ms-flex: 0 1 auto;
        flex: 0 1 auto;
    padding: 0 8px;
}
.collapsed .mx_RoomSubList_scroll {
        padding: 0;
    }
.collapsed .mx_RoomSubList_labelContainer {
        margin-right: 8px;
        margin-left: 2px;
    }
.collapsed .mx_RoomSubList_addRoom {
        margin-left: 3px;
        margin-right: 10px;
    }
.collapsed .mx_RoomSubList_label > span {
        display: none;
    }
.mx_RoomSubList:not(.resized-all) > .mx_RoomSubList_scroll {

    /*
    // for now, we remove the bottomOverflow entirely as we don't want to
    // lose the screen real-estate due to a bg-colored gradient, but we also
    // don't want to use drop shadows and risk a confusing hierarchy of cards.
    // so, instead, we hard-clip at the bottom but soft-clip at the top.
    &.mx_IndicatorScrollbar_bottomOverflow::after {
        bottom: 0;
        transition: background-image 0.1s ease-in;
        margin: 0px -8px;
        background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.0));
    }
    */
}
.mx_RoomSubList:not(.resized-all) > .mx_RoomSubList_scroll.mx_IndicatorScrollbar_topOverflow::before, .mx_RoomSubList:not(.resized-all) > .mx_RoomSubList_scroll.mx_IndicatorScrollbar_bottomOverflow::after {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        right: 0;
        height: 8px;
        content: "";
        display: block;
        z-index: 100;
        pointer-events: none;
    }
.mx_RoomSubList:not(.resized-all) > .mx_RoomSubList_scroll.mx_IndicatorScrollbar_topOverflow > .mx_AutoHideScrollbar_offset {
        margin-top: -8px;
    }
.mx_RoomSubList:not(.resized-all) > .mx_RoomSubList_scroll.mx_IndicatorScrollbar_bottomOverflow > .mx_AutoHideScrollbar_offset {
        margin-bottom: -8px;
    }
.mx_RoomSubList:not(.resized-all) > .mx_RoomSubList_scroll.mx_IndicatorScrollbar_topOverflow::before {
        top: 0;
        transition: background-image 0.1s ease-in;
        background: linear-gradient(to top, var(--roomlist-background-color-0pct), var(--roomlist-background-color));
    }
/*
Copyright 2015, 2016 OpenMarket Ltd

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_RoomView {
    word-wrap: break-word;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
}
.mx_RoomView_fileDropTarget {
    min-width: 0px;
    width: 100%;
    font-size: 18px;
    text-align: center;

    pointer-events: none;

    padding-left: 12px;
    padding-right: 12px;
    margin-left: -12px;

    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    background-color: var(--timeline-background-color-50pct);
    border: 2px #e1dddd solid;
    border-bottom: none;
    position: absolute;
    top: 52px;
    bottom: 0px;
    z-index: 3000;
}
.mx_RoomView_fileDropTargetLabel {
    top: 50%;
    width: 100%;
    margin-top: -50px;
    position: absolute;
}
.mx_RoomView_auxPanel {
    min-width: 0px;
    width: 100%;
    margin: 0px auto;

    overflow: auto;
    -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: var(--timeline-background-color);
}
.mx_RoomView_auxPanel_hiddenHighlights {
    border-bottom: 1px solid var(--roomlist-separator-color);
    padding: 10px 26px;
    color: var(--warning-color);
    cursor: pointer;
}
.mx_RoomView_auxPanel_apps {
    max-width: 1920px !important;
}
.mx_RoomView .mx_MainSplit {
    -ms-flex: 1 1 0px;
        flex: 1 1 0;
}
.mx_RoomView_messagePanel {
    width: 100%;
    overflow-y: auto;
    -ms-flex: 1 1 0px;
        flex: 1 1 0;
    overflow-anchor: none;
}
.mx_RoomView_messagePanelSearchSpinner {
    -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: var(--timeline-text-secondary-color);
    -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 {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex: 1;
        flex: 1;
    min-width: 0;
}
.mx_RoomView_body .mx_RoomView_messagePanel, .mx_RoomView_body .mx_RoomView_messagePanelSpinner, .mx_RoomView_body .mx_RoomView_messagePanelSearchSpinner {
        -ms-flex-order: 2;
            order: 2;
    }
.mx_RoomView_body .mx_RoomView_timeline {
    /* offset parent for mx_RoomView_topUnreadMessagesBar  */
    position: relative;
    -ms-flex: 1;
        flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
}
.mx_RoomView_statusArea {
    width: 100%;
    -ms-flex: 0 0 auto;
        flex: 0 0 auto;

    max-height: 0px;
    background-color: var(--timeline-background-color);
    z-index: 1000;
    overflow: hidden;

    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 var(--roomlist-separator-color);
    height: 1px;
}
.mx_RoomView_messageListWrapper {
    min-height: 100%;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-direction: column;

        flex-direction: column;

    -ms-flex-pack: end;

        justify-content: flex-end;
}
.mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper {
        -ms-flex-pack: start;
            justify-content: flex-start;
    }
.mx_RoomView_searchResultsPanel a {
        text-decoration: none;
        color: inherit;
    }
.mx_RoomView_empty {
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    font-size: 13px;
    padding-left: 3em;
    padding-right: 3em;
    margin-right: 20px;
    margin-top: 33%;
    text-align: center;
}
.mx_RoomView_MessageList {
    list-style-type: none;
    padding: 18px;
    margin: 0;
    /* needed as min-height is set to clientHeight in ScrollPanel
    to prevent shrinking when WhoIsTypingTile is hidden */
    box-sizing: border-box;
}
.mx_RoomView_MessageList li {
    clear: both;
}
li.mx_RoomView_myReadMarker_container {
    height: 0px;
    margin: 0px;
    padding: 0px;
    border: 0px;
}
hr.mx_RoomView_myReadMarker {
    border-top: solid 1px var(--accent-color);
    border-bottom: solid 1px var(--accent-color);
    margin-top: 0px;
    position: relative;
    top: -1px;
    z-index: 1;
}
.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
    background-color: var(--timeline-background-color);
}
.mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename {
    color: #ffffff;
    opacity: 1.0;
}
.mx_RoomView_inCall .mx_RoomView_statusAreaBox_line {
    margin-top: 2px;
    border: none;
    height: 0px;
}
.mx_RoomView_inCall .mx_MessageComposer_wrapper {
    border-top: 2px hidden;
    padding-top: 1px;
}
.mx_RoomView_inCall .mx_RoomView_statusAreaBox {
    background-color: var(--accent-color);
    color: #ffffff;
    position: relative;
}
.mx_RoomView_voipChevron {
    position: absolute;
    bottom: -11px;
    right: 11px;
}
.mx_RoomView_voipButton {
    float: right;
    margin-right: 13px;
    margin-top: 10px;
    cursor: pointer;
}
.mx_RoomView_voipButton object {
    pointer-events: none;
}
.mx_RoomView .mx_MessageComposer {
    width: 100%;
    -ms-flex: 0 0 auto;
        flex: 0 0 auto;
    margin-right: 2px;
}
.mx_RoomView_ongoingConfCallNotification {
    width: 100%;
    text-align: center;
    background-color: var(--warning-color);
    color: #ffffff;
    font-weight: bold;
    padding: 6px 0;
    cursor: pointer;
}
.mx_RoomView_ongoingConfCallNotification a {
    color: #ffffff !important;
}
.mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList {
        margin-bottom: 4px;
    }
.mx_MatrixChat_useCompactLayout .mx_RoomView_statusAreaBox {
        min-height: 42px;
    }
/*
Copyright 2019 New Vector Ltd

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_ScrollPanel .mx_RoomView_MessageList {
        position: relative;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
            flex-direction: column;
        -ms-flex-pack: end;
            justify-content: flex-end;
        overflow-y: hidden;
    }
/*
Copyright 2015, 2016 OpenMarket Ltd

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_SearchBox {
    -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: center;
        padding: 9px;
    }
/*
Copyright 2017 Travis Ralston
Copyright 2019 New Vector Ltd

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_TabbedView {
    margin: 0;
    padding: 0 0 0 58px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.mx_TabbedView_tabLabels {
    width: 170px;
    max-width: 170px;
    color: var(--timeline-text-color);
    position: fixed;
}
.mx_TabbedView_tabLabel {
    vertical-align: text-top;
    cursor: pointer;
    display: block;
    border-radius: 3px;
    font-size: 14px;
    min-height: 24px;
    margin-bottom: 6px;
    position: relative;
}
.mx_TabbedView_tabLabel_active {
    background-color: var(--accent-color);
    color: #edf3ff;
}
.mx_TabbedView_maskedIcon {
    margin-left: 6px;
    margin-right: 9px;
    margin-top: 1px;
    width: 16px;
    height: 16px;
    display: inline-block;
}
.mx_TabbedView_maskedIcon::before {
    display: inline-block;
    background-color: var(--timeline-text-color);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 16px;
            mask-size: 16px;
    width: 16px;
    height: 22px;
    -webkit-mask-position: center;
            mask-position: center;
    content: '';
    vertical-align: middle;
}
.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {
    background-color: #edf3ff;
}
.mx_TabbedView_tabLabel_text {
    vertical-align: middle;
}
.mx_TabbedView_tabPanel {
    margin-left: 240px;
    -ms-flex-positive: 1;
        flex-grow: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    min-height: 0;
}
.mx_TabbedView_tabPanelContent {
    -ms-flex-positive: 1;
        flex-grow: 1;
    overflow: auto;
    min-height: 0;
}
/*
Copyright 2017 New Vector Ltd.

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_TagPanel {
    -ms-flex: 1;
        flex: 1;
    background-color: var(--sidebar-color);
    cursor: pointer;

    display: -ms-flexbox;

    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: justify;
        justify-content: space-between;
}
.mx_TagPanel_items_selected {
    cursor: pointer;
}
.mx_TagPanel .mx_TagPanel_clearButton_container {
    /* Constant height within flex mx_TagPanel */
    height: 70px;
    width: 60px;

    -ms-flex: none;

        flex: none;

    -ms-flex-pack: center;

        justify-content: center;
    -ms-flex-align: start;
        align-items: flex-start;

    display: none;
}
.mx_TagPanel .mx_TagPanel_clearButton object {
    /* Same as .mx_SearchBox padding-top */
    margin-top: 24px;
    pointer-events: none;
}
.mx_TagPanel .mx_TagPanel_divider {
    height: 0px;
    width: 42px;
    border-bottom: 1px solid var(--roomlist-separator-color);
    display: none;
}
.mx_TagPanel .mx_TagPanel_scroller {
    -ms-flex-positive: 1;
        flex-grow: 1;
}
.mx_TagPanel .mx_TagPanel_tagTileContainer {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-align: center;
        align-items: center;

    height: 100%;
}
.mx_TagPanel .mx_TagPanel_tagTileContainer > div {
    height: 40px;
    padding: 5px 0 4px 0;
}
.mx_TagPanel .mx_TagTile {
    margin: 9px 0;
    position: relative;
}
.mx_TagPanel .mx_TagTile:focus, .mx_TagPanel .mx_TagTile:hover, .mx_TagPanel .mx_TagTile.mx_TagTile_selected {
}
.mx_TagPanel .mx_TagTile.mx_TagTile_selected .mx_TagTile_avatar .mx_BaseAvatar {
    background-color: var(--accent-color);
    border-radius: 40px;

    /* In case this is a "initial" avatar */
    display: block;
    height: 40px;
    width: 40px;
}
.mx_TagPanel .mx_TagTile_selected .mx_BaseAvatar_image {
    border: 3px solid var(--accent-color);
    height: 40px;
    width: 40px;
    box-sizing: border-box;
}
.mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {
    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: #ffffff;
    font-weight: 600;
    font-size: 10px;
    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: #ffffff;
    font-weight: 600;
    font-size: 14px;
    padding: 0 5px;
    background-color: var(--roomlist-text-secondary-color);
}
.mx_TagTile_badgeHighlight {
    background-color: var(--warning-color);
}
/*
Copyright 2019 New Vector Ltd.

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_TagPanelButtons {
    background-color: var(--sidebar-color);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: justify;
        justify-content: space-between;
    padding: 17px 0 3px 0;
}
.mx_TagPanelButtons > .mx_GroupsButton::before {
    -webkit-mask: url(../../img/feather-customised/users.ac4f7be.svg);
            mask: url(../../img/feather-customised/users.ac4f7be.svg);
    -webkit-mask-position: center 11px;
            mask-position: center 11px;
}
.mx_TagPanelButtons > .mx_TagPanelButtons_report::before {
    -webkit-mask: url(../../img/feather-customised/life-buoy.8a302f4.svg);
            mask: url(../../img/feather-customised/life-buoy.8a302f4.svg);
    -webkit-mask-position: center 9px;
            mask-position: center 9px;
}
.mx_TagPanelButtons > .mx_AccessibleButton {
    margin-bottom: 12px;
    height: 40px;
    width: 40px;
    border-radius: 20px;
    background-color: #a1b2d1;
    position: relative;
    /* overwrite mx_RoleButton inline-block */
    display: block !important;
}
.mx_TagPanelButtons > .mx_AccessibleButton::before {
        background-color: var(--sidebar-color);
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
/*
Copyright 2018 New Vector Ltd

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_TopLeftMenuButton {
    -ms-flex: 0 0 52px;
        flex: 0 0 52px;
    border-bottom: 1px solid var(--roomlist-separator-color);
    color: var(--timeline-text-color);
    background-color: var(--timeline-background-color);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    min-width: 0;
    padding: 0 4px;
    overflow: hidden;
}
.mx_TopLeftMenuButton .mx_BaseAvatar {
    margin: 0 7px;
}
.mx_TopLeftMenuButton_name {
    margin: 0 7px;
    font-size: 18px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: 600;
}
.mx_TopLeftMenuButton_chevron {
    margin: 0 7px;
    -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;
    width: 10px;
    height: 6px;
    background-color: var(--roomlist-text-secondary-color);
}
/*
Copyright 2015, 2016 OpenMarket Ltd

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_UploadBar {
    position: relative;
}
.mx_UploadBar_uploadProgressOuter {
    height: 5px;
    margin-left: 63px;
    margin-top: -1px;
    padding-bottom: 5px;
}
.mx_UploadBar_uploadProgressInner {
    background-color: var(--accent-color);
    height: 5px;
}
.mx_UploadBar_uploadFilename {
    margin-top: 5px;
    margin-left: 65px;
    opacity: 0.5;
    color: var(--timeline-text-color);
}
.mx_UploadBar_uploadIcon {
    float: left;
    margin-top: 5px;
    margin-left: 14px;
}
.mx_UploadBar_uploadCancel {
    float: right;
    margin-top: 5px;
    margin-right: 10px;
    position: relative;
    opacity: 0.6;
    cursor: pointer;
    z-index: 1;
}
.mx_UploadBar_uploadBytes {
    float: right;
    margin-top: 5px;
    margin-right: 30px;
    color: var(--accent-color);
}
/*
Copyright 2015, 2016 OpenMarket Ltd

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_ViewSource_label_left {
    float: left;
}
.mx_ViewSource_label_right {
    float: right;
}
.mx_ViewSource_label_bottom {
    clear: both;
    border-bottom: 1px solid #e5e5e5;
}
.mx_ViewSource pre {
    text-align: left;
    font-size: 12px;
    padding: 0.5em 1em 0.5em 1em;
    word-wrap: break-word;
    white-space: pre-wrap;
}
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2019 New Vector Ltd

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_Login_submit {
    /* align images in buttons (eg spinners) */
    vertical-align: middle;
    border: 0px;
    border-radius: 4px;
    font-family: Nunito, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', Arial, Helvetica, Sans-Serif;
    font-size: 14px;
    color: white;
    background-color: #03b381;
    width: auto;
    padding: 7px;
    padding-left: 1.5em;
    padding-right: 1.5em;
    cursor: pointer;
    display: inline-block;
    outline: none;
    width: 100%;
    margin-top: 35px;
    margin-bottom: 24px;
    box-sizing: border-box;
    text-align: center;
}
.mx_Login_submit:hover {
}
.mx_Login_submit:disabled {
    opacity: 0.3;
    cursor: default;
}
.mx_AuthBody a.mx_Login_sso_link:link, .mx_AuthBody a.mx_Login_sso_link:hover, .mx_AuthBody a.mx_Login_sso_link:visited {
    color: #ffffff;
}
.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: var(--warning-color);
    font-weight: bold;
    text-align: center;
    margin-top: 12px;
    margin-bottom: 12px;
}
.mx_Login_error.mx_Login_serverError {
    text-align: left;
    font-weight: normal;
}
.mx_Login_error.mx_Login_serverError.mx_Login_serverErrorNonFatal {
    color: #ff8d13;
}
.mx_Login_type_container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    color: #232f32;
}
.mx_Login_type_container .mx_Field {
        margin: 0;
    }
.mx_Login_type_label {
    -ms-flex: 1;
        flex: 1;
}
.mx_Login_underlinedServerName {
    border-bottom: 1px dashed var(--accent-color);
}
/*
Copyright 2019 New Vector Ltd

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_AuthBody {
    width: 500px;
    background-color: var(--timeline-background-color);
    border-radius: 0 4px 4px 0;
    padding: 25px 60px;
    box-sizing: border-box;
    font-size: 12px;
    color: var(--timeline-text-secondary-color);
}
.mx_AuthBody h2 {
        font-size: 24px;
        font-weight: 600;
        margin-top: 8px;
        color: #232f32;
    }
.mx_AuthBody h3 {
        font-size: 14px;
        font-weight: 600;
        color: #232f32;
    }
.mx_AuthBody a:link, .mx_AuthBody a:hover, .mx_AuthBody a:visited {
        color: #03b381;
        text-decoration: none;
    }
.mx_AuthBody input[type=text], .mx_AuthBody input[type=password] {
        color: #232f32;
    }
.mx_AuthBody .mx_Field input, .mx_AuthBody .mx_Field select {
        color: #232f32;
        background-color: var(--timeline-background-color);
    }
.mx_AuthBody .mx_Field label {
        color: #232f32;
    }
.mx_AuthBody .mx_Field_labelAlwaysTopLeft label, .mx_AuthBody .mx_Field select + label, .mx_AuthBody .mx_Field input:focus + label, .mx_AuthBody .mx_Field input:not(:placeholder-shown) + label, .mx_AuthBody .mx_Field textarea:focus + label, .mx_AuthBody .mx_Field textarea:not(:placeholder-shown) + label {
        background-color: var(--timeline-background-color);
    }
.mx_AuthBody input.error {
        color: var(--warning-color);
    }
.mx_AuthBody .mx_Field input {
        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: var(--timeline-background-color);
    }
.mx_AuthBody .mx_Dropdown_menu .mx_Dropdown_option_highlight {
            background-color: #dddddd;
        }
.mx_AuthBody_editServerDetails {
    padding-left: 1em;
    font-size: 12px;
    font-weight: normal;
}
.mx_AuthBody_fieldRow {
    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_changeFlow {
    display: block;
    text-align: center;
    width: 100%;
}
.mx_AuthBody_spinner {
    margin: 1em 0;
}
.mx_AuthBody_passwordScore {
    width: 100%;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    height: 4px;
    border: 0;
    border-radius: 2px;
    position: absolute;
    top: -12px;
}
.mx_AuthBody_passwordScore::-moz-progress-bar {
        border-radius: 2px;
        background-color: var(--accent-color);
    }
.mx_AuthBody_passwordScore::-webkit-progress-bar, .mx_AuthBody_passwordScore::-webkit-progress-value {
        border-radius: 2px;
    }
.mx_AuthBody_passwordScore::-webkit-progress-value {
        background-color: var(--accent-color);
    }
/*
Copyright 2017 OpenMarket Ltd
Copyright 2019 New Vector Ltd

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_AuthButtons {
    min-height: 24px;
    height: unset !important;
    padding-top: 13px !important;
    padding-bottom: 14px !important;
    -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: 0px;
    border-radius: 40px;
    margin-left: 4px;
    margin-right: 4px;
    min-width: 80px;

    background-color: var(--accent-color);
    color: var(--timeline-background-color);

    cursor: pointer;

    font-size: 15px;
    padding: 0 11px;
    word-break: break-word;
}
/*
Copyright 2019 New Vector Ltd

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_AuthFooter {
    text-align: center;
    width: 100%;
    font-size: 14px;
    opacity: 0.72;
    padding: 20px 0;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
}
.mx_AuthFooter a:link, .mx_AuthFooter a:hover, .mx_AuthFooter a:visited {
    color: #ffffff;
    margin: 0 22px;
}
/*
Copyright 2019 New Vector Ltd

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_AuthHeader {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    width: 206px;
    padding: 25px 40px;
    box-sizing: border-box;
}
/*
Copyright 2019 New Vector Ltd

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_AuthHeaderLogo {
    margin-top: 15px;
    -ms-flex: 1;
        flex: 1;
    padding: 0 10px;
}
.mx_AuthHeaderLogo img {
    width: 100%;
}
/*
Copyright 2019 New Vector Ltd

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_AuthPage {
    width: 100%;
    min-height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    background-color: #2e3649;
}
.mx_AuthPage_modal {
    display: -ms-flexbox;
    display: flex;
    margin: 100px auto auto;
    border-radius: 4px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33);
    background-color: var(--timeline-background-color-50pct);
}
/*
Copyright 2019 New Vector Ltd

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_CountryDropdown .mx_Dropdown_input .mx_Dropdown_option {
    padding: 0 3px;
}
.mx_CountryDropdown .mx_Dropdown_arrow {
    padding-right: 3px;
}
.mx_CountryDropdown_shortOption {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
        align-items: center;
    height: 100%;
}
.mx_CountryDropdown_option {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
}
/*
Copyright 2017 Vector Creations Ltd

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_InteractiveAuthEntryComponents_msisdnWrapper {
    text-align: center;
}
.mx_InteractiveAuthEntryComponents_msisdnEntry {
    font-size: 200%;
    font-weight: bold;
    border: 1px solid #c7c7c7;
    border-radius: 3px;
    width: 6em;
}
.mx_InteractiveAuthEntryComponents_msisdnEntry:focus {
    border: 1px solid var(--accent-color);
}
.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: var(--timeline-text-secondary-color);
    cursor: default;
}
.mx_InteractiveAuthEntryComponents_termsSubmit:disabled {
    background-color: #92caad;
    cursor: default;
}
.mx_InteractiveAuthEntryComponents_termsPolicy {
    display: block;
}
.mx_InteractiveAuthEntryComponents_passwordSection {
    width: 300px;
}
/*
Copyright 2019 New Vector Ltd

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_AuthBody_language {
    width: 100%;
}
.mx_AuthBody_language .mx_Dropdown_input {
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--timeline-text-color);
}
.mx_AuthBody_language .mx_Dropdown_arrow {
    background: var(--timeline-text-color);
}
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2019 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_ServerConfig_help:link {
    opacity: 0.8;
}
.mx_ServerConfig_error {
    display: block;
    color: var(--warning-color);
}
.mx_ServerConfig_identityServer {
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.25s;
}
.mx_ServerConfig_identityServer.mx_ServerConfig_identityServer_shown {
        transform: scaleY(1);
    }
/*
Copyright 2019 New Vector Ltd

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_ServerTypeSelector {
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 28px;
}
.mx_ServerTypeSelector_type {
    margin: 0 5px;
}
.mx_ServerTypeSelector_type:first-child {
    margin-left: 0;
}
.mx_ServerTypeSelector_type:last-child {
    margin-right: 0;
}
.mx_ServerTypeSelector_label {
    text-align: center;
    font-weight: 600;
    color: #232f32;
    margin: 8px 0;
}
.mx_ServerTypeSelector_type .mx_AccessibleButton {
    padding: 10px;
    border: 1px solid #e7e7e7;
    border-radius: 4px;
}
.mx_ServerTypeSelector_type.mx_ServerTypeSelector_type_selected .mx_AccessibleButton {
    border-color: var(--accent-color);
}
.mx_ServerTypeSelector_logo {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    height: 18px;
    margin-bottom: 12px;
    font-weight: 600;
    color: #232f32;
}
.mx_ServerTypeSelector_logo > div {
    display: -ms-flexbox;
    display: flex;
    width: 70%;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: space-evenly;
        justify-content: space-evenly;
}
.mx_ServerTypeSelector_description {
    font-size: 10px;
}
/*
Copyright 2019 New Vector Ltd

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_Welcome {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-align: center;
        align-items: center;
}
.mx_Welcome .mx_AuthBody_language {
    width: 120px;
    margin-bottom: 10px;
}
/*
Copyright 2015, 2016 OpenMarket Ltd

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_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: 0px;
    color: #ffffff;
    text-align: center;
    speak: none;
    pointer-events: none;
    font-weight: normal;
}
.mx_BaseAvatar_image {
    border-radius: 40px;
    vertical-align: top;
    background-color: var(--timeline-background-color);
}
/*
Copyright 2018 New Vector Ltd

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_MessageComposer_avatar .mx_BaseAvatar {
    padding: 2px;
    border: 1px solid transparent;
    border-radius: 15px;
}
.mx_MessageComposer_avatar .mx_BaseAvatar_initial {
    left: 2px;
}
.mx_MemberStatusMessageAvatar_hasStatus .mx_BaseAvatar {
    border-color: var(--accent-color);
}
/*
Copyright 2015, 2016 OpenMarket Ltd

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_MessageContextMenu {
    padding: 6px;
}
.mx_MessageContextMenu_field {
    padding: 3px 6px 3px 6px;
    cursor: pointer;
    white-space: nowrap;
}
.mx_MessageContextMenu_field.mx_MessageContextMenu_fieldSet {
    font-weight: bold;
}
/*
Copyright 2015, 2016 OpenMarket Ltd

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_RoomTileContextMenu {
    padding: 6px;
}
.mx_RoomTileContextMenu_tag_icon {
    padding-right: 8px;
    padding-left: 4px;
    display: inline-block;
}
.mx_RoomTileContextMenu_tag_icon_set {
    padding-right: 8px;
    padding-left: 4px;
    display: none;
}
.mx_RoomTileContextMenu_tag_field, .mx_RoomTileContextMenu_leave {
    padding-top: 8px;
    padding-right: 20px;
    padding-bottom: 8px;
    cursor: pointer;
    white-space: nowrap;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    line-height: 16px;
}
.mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldSet {
    font-weight: bold;
}
.mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldSet .mx_RoomTileContextMenu_tag_icon {
    display: none;
}
.mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldSet .mx_RoomTileContextMenu_tag_icon_set {
    display: inline-block;
}
.mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldDisabled {
    color: rgba(0, 0, 0, 0.2);
}
.mx_RoomTileContextMenu_separator {
    margin-top: 0;
    margin-bottom: 0;
    border-bottom-style: none;
    border-left-style: none;
    border-right-style: none;
    border-top-style: solid;
    border-top-width: 1px;
    border-color: #000000;
}
.mx_RoomTileContextMenu_leave {
    color: var(--warning-color);
}
.mx_RoomTileContextMenu_notif_picker {
    position: absolute;
    top: 16px;
    left: 5px;
}
.mx_RoomTileContextMenu_notif_field {
    padding-top: 4px;
    padding-right: 6px;
    padding-bottom: 10px;
    padding-left: 8px; /* 20px */
    cursor: pointer;
    white-space: nowrap;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
}
.mx_RoomTileContextMenu_notif_field.mx_RoomTileContextMenu_notif_fieldSet {
    font-weight: bold;
}
.mx_RoomTileContextMenu_notif_field.mx_RoomTileContextMenu_notif_fieldDisabled {
    color: rgba(0, 0, 0, 0.2);
}
.mx_RoomTileContextMenu_notif_icon {
    padding-right: 4px;
    padding-left: 4px;
}
.mx_RoomTileContextMenu_notif_activeIcon {
    display: inline-block;
    opacity: 0;
    position: relative;
    left: -5px;
}
.mx_RoomTileContextMenu_notif_fieldSet .mx_RoomTileContextMenu_notif_activeIcon {
    opacity: 1;
}
/*
Copyright 2018 New Vector Ltd

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_StatusMessageContextMenu {
    padding: 10px;
}
.mx_StatusMessageContextMenu_form {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
}
input.mx_StatusMessageContextMenu_message {
    border-radius: 4px;
    border: 1px solid #e7e7e7;
    padding: 6.5px 11px;
    background-color: var(--timeline-background-color);
    font-weight: normal;
    margin: 0 0 10px;
}
.mx_StatusMessageContextMenu_message:-ms-input-placeholder {
    color: var(--timeline-text-secondary-color);
}
.mx_StatusMessageContextMenu_message::placeholder {
    color: var(--timeline-text-secondary-color);
}
.mx_StatusMessageContextMenu_actionContainer {
    display: -ms-flexbox;
    display: flex;
}
.mx_StatusMessageContextMenu_submit, .mx_StatusMessageContextMenu_clear {
    /* align images in buttons (eg spinners) */
    vertical-align: middle;
    border: 0px;
    border-radius: 4px;
    font-family: Nunito, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', Arial, Helvetica, Sans-Serif;
    font-size: 14px;
    color: white;
    background-color: #03b381;
    width: auto;
    padding: 7px;
    padding-left: 1.5em;
    padding-right: 1.5em;
    cursor: pointer;
    display: inline-block;
    outline: none;
    -ms-flex-item-align: start;
        -ms-grid-row-align: start;
        align-self: start;
    font-size: 12px;
    padding: 6px 1em;
    border: 1px solid transparent;
    margin-right: 10px;
}
.mx_StatusMessageContextMenu_submit[disabled] {
    opacity: 0.49;
}
.mx_StatusMessageContextMenu_clear {
    color: var(--warning-color);
    background-color: transparent;
    border: 1px solid var(--warning-color);
}
.mx_StatusMessageContextMenu_actionContainer .mx_Spinner {
    -ms-flex-pack: start;
        justify-content: start;
}
/*
Copyright 2018 New Vector Ltd

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_TagTileContextMenu_item {
    padding-top: 8px;
    padding-right: 20px;
    padding-bottom: 8px;
    cursor: pointer;
    white-space: nowrap;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    line-height: 16px;
}
.mx_TagTileContextMenu_item object {
    pointer-events: none;
}
.mx_TagTileContextMenu_item_icon {
    padding-right: 8px;
    padding-left: 4px;
    display: inline-block;
}
.mx_TagTileContextMenu_separator {
    margin-top: 0;
    margin-bottom: 0;
    border-bottom-style: none;
    border-left-style: none;
    border-right-style: none;
    border-top-style: solid;
    border-top-width: 1px;
    border-color: #000000;
}
/*
Copyright 2018 New Vector Ltd

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_TopLeftMenu {
    min-width: 210px;
    border-radius: 4px;
}
.mx_TopLeftMenu .mx_TopLeftMenu_greyedText {
        font-size: 12px;
        opacity: 0.5;
    }
.mx_TopLeftMenu .mx_TopLeftMenu_upgradeLink {
        font-size: 12px;
    }
.mx_TopLeftMenu .mx_TopLeftMenu_upgradeLink img {
            margin-left: 5px;
        }
.mx_TopLeftMenu .mx_TopLeftMenu_section:not(:last-child) {
        border-bottom: 1px solid #000000;
    }
.mx_TopLeftMenu .mx_TopLeftMenu_section_noIcon {
        margin: 5px 0;
        padding: 5px 20px 5px 15px;
    }
.mx_TopLeftMenu .mx_TopLeftMenu_section_noIcon div:not(:first-child) {
            margin-top: 5px;
        }
.mx_TopLeftMenu .mx_TopLeftMenu_section_withIcon {
        margin: 5px 0;
        padding: 0;
        list-style: none;
    }
.mx_TopLeftMenu .mx_TopLeftMenu_section_withIcon li.mx_TopLeftMenu_icon_home::after {
            -webkit-mask-image: url(../../img/feather-customised/home.55644be.svg);
                    mask-image: url(../../img/feather-customised/home.55644be.svg);
        }
.mx_TopLeftMenu .mx_TopLeftMenu_section_withIcon li.mx_TopLeftMenu_icon_settings::after {
            -webkit-mask-image: url(../../img/feather-customised/settings.cc405e6.svg);
                    mask-image: url(../../img/feather-customised/settings.cc405e6.svg);
        }
.mx_TopLeftMenu .mx_TopLeftMenu_section_withIcon li.mx_TopLeftMenu_icon_signin::after {
            -webkit-mask-image: url(../../img/feather-customised/sign-in.7022ff3.svg);
                    mask-image: url(../../img/feather-customised/sign-in.7022ff3.svg);
        }
.mx_TopLeftMenu .mx_TopLeftMenu_section_withIcon li.mx_TopLeftMenu_icon_signout::after {
            -webkit-mask-image: url(../../img/feather-customised/sign-out.fa2d962.svg);
                    mask-image: url(../../img/feather-customised/sign-out.fa2d962.svg);
        }
.mx_TopLeftMenu .mx_TopLeftMenu_section_withIcon li::after {
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            -webkit-mask-position: 0 center;
                    mask-position: 0 center;
            -webkit-mask-size: 16px;
                    mask-size: 16px;
            position: absolute;
            width: 16px;
            height: 16px;
            content: "";
            top: 5px;
            left: 14px;
            background-color: var(--timeline-text-color);
        }
.mx_TopLeftMenu .mx_TopLeftMenu_section_withIcon li {
            position: relative;
            cursor: pointer;
            white-space: nowrap;
            padding: 5px 20px 5px 43px;
        }
.mx_TopLeftMenu .mx_TopLeftMenu_section_withIcon li:hover {
            background-color: #343a46;
        }
/*
Copyright 2016 OpenMarket Ltd
Copyright 2019 New Vector Ltd
Copyright 2019 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_AddressPickerDialog a:link, .mx_AddressPickerDialog a:hover, .mx_AddressPickerDialog a:visited {
        color: #03b381;
        text-decoration: none;
    }
/* Using a textarea for this element, to circumvent autofill */
.mx_AddressPickerDialog_input, .mx_AddressPickerDialog_input:focus {
    height: 26px;
    font-size: 14px;
    font-family: Nunito, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', Arial, Helvetica, Sans-Serif;
    padding-left: 12px;
    padding-right: 12px;
    margin: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    width: 1000%; /* Pretend that this is an "input type=text" */
    resize: none;
    overflow: hidden;
    vertical-align: middle;
    box-sizing: border-box;
    word-wrap: nowrap;
}
.mx_AddressPickerDialog .mx_Dialog_content {
    min-height: 50px;
}
.mx_AddressPickerDialog_inputContainer {
    border-radius: 3px;
    border: solid 1px #e7e7e7;
    line-height: 36px;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 1px;
    padding-bottom: 1px;
    max-height: 150px;
    overflow-x: hidden;
    overflow-y: auto;
}
.mx_AddressPickerDialog_error {
    margin-top: 10px;
    color: var(--warning-color);
}
.mx_AddressPickerDialog_cancel {
    position: absolute;
    right: 11px;
    top: 13px;
    cursor: pointer;
}
.mx_AddressPickerDialog_cancel object {
    pointer-events: none;
}
.mx_AddressPickerDialog_identityServer {
    margin-top: 1em;
}
/*
Copyright 2019 New Vector Ltd.

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_AnalyticsModal table {
    margin: 10px 0px;
}
/*
Copyright 2016 Aviral Dasgupta

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_ChangelogDialog_content {
    max-height: 300px;
    overflow: auto;
}
.mx_ChangelogDialog_li {
    padding: 0.2em;
}
/*
Copyright 2016 OpenMarket Ltd

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_ChatCreateOrReuseDialog .mx_ChatCreateOrReuseDialog_tiles {
    margin-top: 24px;
}
.mx_ChatCreateOrReuseDialog .mx_Dialog_content {
    margin-bottom: 24px;

    /*
       To stop spinner that mx_ChatCreateOrReuseDialog_profile replaces from causing a
       height change
    */
    min-height: 100px;
}
.mx_ChatCreateOrReuseDialog .mx_RoomTile_badge {
    display: none;
}
.mx_ChatCreateOrReuseDialog_profile {
    display: -ms-flexbox;
    display: flex;
}
.mx_ChatCreateOrReuseDialog_profile_name {
    padding: 14px;
}
/*
Copyright 2017 Vector Creations Ltd.

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_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: 18px;
}
.mx_ConfirmUserActionDialog_userId {
    font-size: 13px;
}
.mx_ConfirmUserActionDialog_reasonField {
    font-family: Nunito, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', Arial, Helvetica, Sans-Serif;
    font-size: 14px;
    color: var(--timeline-text-color);
    background-color: var(--timeline-background-color);

    border-radius: 3px;
    border: solid 1px #e7e7e7;
    line-height: 36px;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 1px;
    padding-bottom: 1px;

    margin-bottom: 24px;

    width: 90%;
}
/*
Copyright 2017 Vector Creations Ltd

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_CreateGroupDialog_inputRow {
    margin-top: 10px;
    margin-bottom: 10px;
}
.mx_CreateGroupDialog_label {
    text-align: left;
    padding-bottom: 12px;
}
.mx_CreateGroupDialog_input {
    font-size: 15px;
    border-radius: 3px;
    border: 1px solid #e7e7e7;
    padding: 9px;
    color: var(--timeline-text-color);
    background-color: var(--timeline-background-color);
}
.mx_CreateGroupDialog_input_hasPrefixAndSuffix {
    border-radius: 0px;
}
.mx_CreateGroupDialog_input_group {
    display: -ms-flexbox;
    display: flex;
}
.mx_CreateGroupDialog_prefix, .mx_CreateGroupDialog_suffix {
    padding: 0px 5px;
    line-height: 37px;
    background-color: var(--roomlist-separator-color);
    border: 1px solid #e7e7e7;
    text-align: center;
}
.mx_CreateGroupDialog_prefix {
    border-right: 0px;
    border-radius: 3px 0px 0px 3px;
}
.mx_CreateGroupDialog_suffix {
    border-left: 0px;
    border-radius: 0px 3px 3px 0px;
}
/*
Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>

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_CreateRoomDialog_details .mx_CreateRoomDialog_details_summary {
        outline: none;
        list-style: none;
        font-weight: 600;
        cursor: pointer;
        color: var(--accent-color);
    }
.mx_CreateRoomDialog_details .mx_CreateRoomDialog_details_summary::-webkit-details-marker {
            display: none;
        }
.mx_CreateRoomDialog_details > div {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: start;
            align-items: 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: 15px;
    border-radius: 3px;
    border: 1px solid #e7e7e7;
    padding: 9px;
    color: var(--timeline-text-color);
    background-color: var(--timeline-background-color);
    width: 100%;
}
.mx_CreateRoomDialog_aliasContainer {
    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_SettingsFlag {
        display: -ms-flexbox;
        display: flex;
    }
.mx_CreateRoomDialog .mx_SettingsFlag_label {
        -ms-flex: 1 1 0px;
            flex: 1 1 0;
        min-width: 0;
        font-weight: 600;
    }
.mx_CreateRoomDialog .mx_ToggleSwitch {
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
        margin-left: 30px;
    }
/*
Copyright 2018 New Vector Ltd.

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_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;
}
/*
Copyright 2019 New Vector Ltd.

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_DeviceVerifyDialog_cryptoSection ul {
    display: table;
}
.mx_DeviceVerifyDialog_cryptoSection li {
    display: table-row;
}
.mx_DeviceVerifyDialog_cryptoSection label, .mx_DeviceVerifyDialog_cryptoSection span {
    display: table-cell;
    padding-right: 1em;
}
/*
Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>

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_DevTools_content {
    margin: 10px 0;
}
.mx_DevTools_ServersInRoomList_button {
    /* Set the cursor back to default as `.mx_Dialog button` sets it to pointer */
    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: bold;
    padding-right: 24px;
}
.mx_DevTools_inputCell {
    display: table-cell;
    width: 240px;
}
.mx_DevTools_inputCell input {
    display: inline-block;
    border: 0;
    border-bottom: 1px solid rgba(151, 151, 151, 0.5);
    padding: 0;
    width: 240px;
    color: rgba(74, 74, 74, 0.9);
    font-family: Nunito, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', Arial, Helvetica, Sans-Serif;
    font-size: 16px;
}
.mx_DevTools_textarea {
    font-size: 12px;
    max-width: 684px;
    min-height: 250px;
    padding: 10px;
}
.mx_DevTools_eventTypeStateKeyGroup {
    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::after, .mx_DevTools_tgl::before, .mx_DevTools_tgl *, .mx_DevTools_tgl *::after, .mx_DevTools_tgl *::before, .mx_DevTools_tgl + .mx_DevTools_tgl-btn {
        box-sizing: border-box;
    }
.mx_DevTools_tgl::-moz-selection, .mx_DevTools_tgl::after::-moz-selection, .mx_DevTools_tgl::before::-moz-selection, .mx_DevTools_tgl *::-moz-selection, .mx_DevTools_tgl *::after::-moz-selection, .mx_DevTools_tgl *::before::-moz-selection, .mx_DevTools_tgl + .mx_DevTools_tgl-btn::-moz-selection {
            background: none;
        }
.mx_DevTools_tgl::selection, .mx_DevTools_tgl::after::selection, .mx_DevTools_tgl::before::selection, .mx_DevTools_tgl *::selection, .mx_DevTools_tgl *::after::selection, .mx_DevTools_tgl *::before::selection, .mx_DevTools_tgl + .mx_DevTools_tgl-btn::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%;
    }
/* Ordering this block by specificity would require breaking it up into several
   chunks, which seems like it would be more confusing to read. */
/* stylelint-disable no-descending-specificity */
.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn {
        padding: 2px;
        transition: all .2s ease;
        font-family: sans-serif;
        perspective: 100px;
    }
.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn::after, .mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn::before {
            display: inline-block;
            transition: all .4s ease;
            width: 100%;
            text-align: center;
            position: absolute;
            line-height: 2em;
            font-weight: bold;
            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;
            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 {
            transform: rotateY(-20deg);
        }
.mx_DevTools_tgl-flip:checked + .mx_DevTools_tgl-btn::before {
            transform: rotateY(180deg);
        }
.mx_DevTools_tgl-flip:checked + .mx_DevTools_tgl-btn::after {
            transform: rotateY(0);
            left: 0;
            background: #7fc6a6;
        }
.mx_DevTools_tgl-flip:checked + .mx_DevTools_tgl-btn:active::after {
            transform: rotateY(20deg);
        }
/* stylelint-enable no-descending-specificity */
/*
Copyright 2016 OpenMarket Ltd

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_EncryptedEventDialog .mx_DeviceVerifyButtons {
    float: right;
    padding: 0px;
    margin-right: 42px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: justify;
        justify-content: space-between;
}
.mx_EncryptedEventDialog .mx_MemberDeviceInfo_textButton {
    /* align images in buttons (eg spinners) */
    vertical-align: middle;
    border: 0px;
    border-radius: 4px;
    font-family: Nunito, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', Arial, Helvetica, Sans-Serif;
    font-size: 14px;
    color: white;
    background-color: #03b381;
    width: auto;
    padding: 7px;
    padding-left: 1.5em;
    padding-right: 1.5em;
    cursor: pointer;
    display: inline-block;
    outline: none;
    background-color: var(--timeline-background-color);
    color: var(--accent-color);
}
.mx_EncryptedEventDialog button {
    margin-top: 0px;
}
/*
Copyright 2017 New Vector Ltd

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_GroupAddressPicker_checkboxContainer {
    margin-top: 10px;
    display: -ms-flexbox;
    display: flex;
}
.mx_GroupAddressPicker_checkboxContainer input[type="checkbox"] {
    /* Stop flex from shrinking the checkbox */
    width: 20px;
}
/*
Copyright 2019 New Vector Ltd.

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_IncomingSasDialog_opponentProfile_image {
    position: relative;
}
.mx_IncomingSasDialog_opponentProfile h2 {
    display: inline-block;
    margin-left: 10px;
}
/*
Copyright 2019 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_MessageEditHistoryDialog .mx_Dialog_header > .mx_Dialog_title {
    text-align: center;
}
.mx_MessageEditHistoryDialog {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    max-height: 60vh;
}
.mx_MessageEditHistoryDialog_scrollPanel {
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
}
.mx_MessageEditHistoryDialog_error {
    color: var(--warning-color);
    text-align: center;
}
.mx_MessageEditHistoryDialog_edits {
    list-style-type: none;
    font-size: 14px;
    padding: 0;
    color: var(--timeline-text-color);
}
.mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_deletion, .mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_insertion {
        padding: 0px 2px;
    }
.mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_deletion {
        color: rgb(255, 76, 85);
        background-color: rgba(255, 76, 85, 0.1);
        text-decoration: line-through;
    }
.mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_insertion {
        color: rgb(26, 169, 123);
        background-color: rgba(26, 169, 123, 0.1);
        text-decoration: underline;
    }
.mx_MessageEditHistoryDialog_edits .mx_EventTile_line, .mx_MessageEditHistoryDialog_edits .mx_EventTile_content {
        margin-right: 0px;
    }
.mx_MessageEditHistoryDialog_edits .mx_MessageActionBar .mx_AccessibleButton {
        font-size: 10px;
        padding: 0 8px;
    }
/*
Copyright 2018 New Vector Ltd

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_RestoreKeyBackupDialog_keyStatus {
    height: 30px;
}
/*
Copyright 2019 New Vector Ltd.

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_RoomSettingsDialog_settingsIcon::before {
    -webkit-mask-image: url(../../img/feather-customised/settings.cc405e6.svg);
            mask-image: url(../../img/feather-customised/settings.cc405e6.svg);
}
.mx_RoomSettingsDialog_securityIcon::before {
    -webkit-mask-image: url(../../img/feather-customised/lock.9b2b399.svg);
            mask-image: url(../../img/feather-customised/lock.9b2b399.svg);
}
.mx_RoomSettingsDialog_rolesIcon::before {
    -webkit-mask-image: url(../../img/feather-customised/users-sm.e55dac3.svg);
            mask-image: url(../../img/feather-customised/users-sm.e55dac3.svg);
}
.mx_RoomSettingsDialog_warningIcon::before {
    -webkit-mask-image: url(../../img/feather-customised/warning-triangle.d050a38.svg);
            mask-image: url(../../img/feather-customised/warning-triangle.d050a38.svg);
}
.mx_RoomSettingsDialog .mx_Dialog_title {
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 80px;
}
/*
Copyright 2018 New Vector Ltd

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_RoomUpgradeDialog {
    padding-right: 70px;
}
/*
Copyright 2017 Vector Creations Ltd

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_SetEmailDialog_email_input {
    border-radius: 3px;
    border: 1px solid #e7e7e7;
    padding: 9px;
    color: rgba(74, 74, 74, 0.9);
    background-color: var(--timeline-background-color);
    font-size: 15px;
    width: 100%;
    max-width: 280px;
    margin-bottom: 10px;
}
.mx_SetEmailDialog_email_input:focus {
    outline: none;
    box-shadow: none;
    border: 1px solid var(--accent-color);
}
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2017 Vector Creations Ltd

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_SetMxIdDialog .mx_Dialog_title {
    padding-right: 40px;
}
.mx_SetMxIdDialog_input_group {
    display: -ms-flexbox;
    display: flex;
}
.mx_SetMxIdDialog_input {
    border-radius: 3px;
    border: 1px solid #e7e7e7;
    padding: 9px;
    color: var(--timeline-text-color);
    background-color: var(--timeline-background-color);
    font-size: 15px;
    width: 100%;
    max-width: 280px;
}
.mx_SetMxIdDialog_input.error, .mx_SetMxIdDialog_input.error:focus {
    border: 1px solid var(--warning-color);
}
.mx_SetMxIdDialog_input_group .mx_Spinner {
    height: 37px;
    padding-left: 10px;
    -ms-flex-pack: start;
        justify-content: flex-start;
}
.mx_SetMxIdDialog .success {
    color: var(--accent-color);
}
/*
Copyright 2017 Vector Creations Ltd

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_SetPasswordDialog_change_password input {
    border-radius: 3px;
    border: 1px solid #e7e7e7;
    padding: 9px;
    color: var(--timeline-text-color);
    background-color: var(--timeline-background-color);
    font-size: 15px;
    max-width: 280px;
    margin-bottom: 10px;
}
.mx_SetPasswordDialog_change_password_button {
    margin-top: 68px;
}
.mx_SetPasswordDialog .mx_Dialog_content {
    margin-bottom: 0px;
}
/*
Copyright 2019 New Vector Ltd.

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_UserSettingsDialog, .mx_RoomSettingsDialog {
    width: 90vw;
    max-width: 1000px;
    height: 80vh;
}
.mx_UserSettingsDialog .mx_TabbedView, .mx_RoomSettingsDialog .mx_TabbedView {
        top: 65px;
    }
.mx_UserSettingsDialog .mx_TabbedView .mx_SettingsTab, .mx_RoomSettingsDialog .mx_TabbedView .mx_SettingsTab {
        box-sizing: border-box;
        min-width: 580px;
        padding-right: 100px;
        padding-bottom: 100px;
    }
.mx_UserSettingsDialog .mx_Dialog_title, .mx_RoomSettingsDialog .mx_Dialog_title {
        text-align: center;
        margin-bottom: 24px;
    }
/*
Copyright 2018 New Vector Ltd.

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_ShareDialog hr {
    margin-top: 25px;
    margin-bottom: 25px;
    border-color: var(--timeline-text-secondary-color);
}
.mx_ShareDialog_content {
    margin: 10px 0;
}
.mx_ShareDialog_matrixto {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
    border-radius: 5px;
    border: solid 1px var(--timeline-text-secondary-color);
    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 {
    background-image: url(../../img/icon_copy_message.f2eab28.svg);
    margin-left: 5px;
    width: 20px;
    height: 20px;
}
.mx_ShareDialog_split {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.mx_ShareDialog_qrcode_container {
    float: left;
    background-color: #ffffff;
    padding: 5px;
    border-radius: 5px;
    height: 256px;
    width: 256px;
    margin-right: 64px;
}
.mx_ShareDialog_social_container {
    display: inline-block;
    width: 299px;
}
.mx_ShareDialog_social_icon {
    display: -ms-inline-grid;
    display: inline-grid;
    margin-right: 10px;
    margin-bottom: 10px;
}
/*
Copyright Michael Telatynski <7t3chguy@gmail.com>

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_SlashCommandHelpDialog .mx_SlashCommandHelpDialog_headerRow h2 {
    margin-bottom: 2px;
}
.mx_SlashCommandHelpDialog .mx_Dialog_content {
    margin-top: 12px;
    margin-bottom: 34px;
}
/*
Copyright 2019 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_TabbedIntegrationManagerDialog .mx_Dialog {
    width: 60%;
    height: 70%;
    overflow: hidden;
    padding: 0;
    max-width: initial;
    max-height: initial;
    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 var(--accent-color);
    }
.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 var(--accent-color);
    border-bottom: 0;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    padding: 10px 8px;
    margin-right: 5px;
}
.mx_TabbedIntegrationManagerDialog_currentTab {
    background-color: var(--accent-color);
    color: #ffffff;
}
/*
Copyright 2019 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.
*/
/*
 * To avoid visual glitching of two modals stacking briefly, we customise the
 * terms dialog sizing when it will appear for the integrations manager so that
 * it gets the same basic size as the IM's own modal.
 */
.mx_TermsDialog_forIntegrationsManager .mx_Dialog {
    width: 60%;
    height: 70%;
    box-sizing: border-box;
}
.mx_TermsDialog_termsTableHeader {
    font-weight: bold;
    text-align: left;
}
.mx_TermsDialog_termsTable {
    font-size: 12px;
    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: var(--accent-color);
    width: 10px;
    height: 10px;
}
/*
Copyright 2016 OpenMarket Ltd

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_Dialog_unknownDevice .mx_Dialog {
    height: 100%;
}
.mx_UnknownDeviceDialog {
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
}
.mx_UnknownDeviceDialog ul {
    list-style: none;
    padding: 0;
}
.mx_UnknownDeviceDialog p {
    font-weight: bold;
    font-size: 16px;
}
.mx_UnknownDeviceDialog .mx_DeviceVerifyButtons {
    -ms-flex-direction: row !important;
        flex-direction: row !important;
}
.mx_UnknownDeviceDialog .mx_Dialog_content {
    margin-bottom: 24px;
}
.mx_UnknownDeviceDialog_deviceList > li {
    padding: 4px;
}
.mx_UnknownDeviceDialog_deviceList > li > * {
    padding-bottom: 0;
}
/*
Copyright 2019 New Vector Ltd.

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_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 #9fa9ba;
}
/*
Copyright 2019 New Vector Ltd.

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_UserSettingsDialog_settingsIcon::before {
    -webkit-mask-image: url(../../img/feather-customised/settings.cc405e6.svg);
            mask-image: url(../../img/feather-customised/settings.cc405e6.svg);
}
.mx_UserSettingsDialog_voiceIcon::before {
    -webkit-mask-image: url(../../img/feather-customised/phone.87241fa.svg);
            mask-image: url(../../img/feather-customised/phone.87241fa.svg);
}
.mx_UserSettingsDialog_bellIcon::before {
    -webkit-mask-image: url(../../img/feather-customised/notifications.51febb7.svg);
            mask-image: url(../../img/feather-customised/notifications.51febb7.svg);
}
.mx_UserSettingsDialog_preferencesIcon::before {
    -webkit-mask-image: url(../../img/feather-customised/sliders.c04972d.svg);
            mask-image: url(../../img/feather-customised/sliders.c04972d.svg);
}
.mx_UserSettingsDialog_securityIcon::before {
    -webkit-mask-image: url(../../img/feather-customised/lock.9b2b399.svg);
            mask-image: url(../../img/feather-customised/lock.9b2b399.svg);
}
.mx_UserSettingsDialog_helpIcon::before {
    -webkit-mask-image: url(../../img/feather-customised/help-circle.03fb6cf.svg);
            mask-image: url(../../img/feather-customised/help-circle.03fb6cf.svg);
}
.mx_UserSettingsDialog_labsIcon::before {
    -webkit-mask-image: url(../../img/feather-customised/flag.350c432.svg);
            mask-image: url(../../img/feather-customised/flag.350c432.svg);
}
.mx_UserSettingsDialog_flairIcon::before {
    -webkit-mask-image: url(../../img/feather-customised/flair.711761c.svg);
            mask-image: url(../../img/feather-customised/flair.711761c.svg);
}
/*
Copyright 2019 Travis Ralston

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_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;
    }
/*
Copyright 2018 New Vector Ltd

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_CreateKeyBackupDialog .mx_Dialog_title {
    /* TODO: Consider setting this for all dialog titles. */
    margin-bottom: 1em;
}
.mx_CreateKeyBackupDialog_primaryContainer {
    /* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
    padding: 20px;
}
.mx_CreateKeyBackupDialog_primaryContainer::after {
    content: "";
    clear: both;
    display: block;
}
.mx_CreateKeyBackupDialog_passPhraseContainer {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
        align-items: start;
}
.mx_CreateKeyBackupDialog_passPhraseHelp {
    -ms-flex: 1;
        flex: 1;
    height: 85px;
    margin-left: 20px;
    font-size: 80%;
}
.mx_CreateKeyBackupDialog_passPhraseHelp progress {
    width: 100%;
}
.mx_CreateKeyBackupDialog_passPhraseInput {
    -ms-flex: none;
        flex: none;
    width: 250px;
    border: 1px solid var(--accent-color);
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 1em;
}
.mx_CreateKeyBackupDialog_passPhraseMatch {
    margin-left: 20px;
}
.mx_CreateKeyBackupDialog_recoveryKeyHeader {
    margin-bottom: 1em;
}
.mx_CreateKeyBackupDialog_recoveryKeyContainer {
    display: -ms-flexbox;
    display: flex;
}
.mx_CreateKeyBackupDialog_recoveryKey {
    width: 262px;
    padding: 20px;
    color: var(--timeline-text-secondary-color);
    background-color: #22262e;
    margin-right: 12px;
}
.mx_CreateKeyBackupDialog_recoveryKeyButtons {
    -ms-flex: 1;
        flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
}
.mx_CreateKeyBackupDialog_recoveryKeyButtons button {
    -ms-flex: 1;
        flex: 1;
    white-space: nowrap;
}
/*
Copyright 2018 New Vector Ltd

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_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: var(--timeline-text-color);
        content: "";
        position: absolute;
        top: -6px;
        right: 0;
        bottom: 0;
        left: 0;
    }
.mx_KeyBackupFailedDialog .mx_Dialog_buttons {
    margin-top: 36px;
}
/*
Copyright 2018 New Vector Ltd

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_RestoreKeyBackupDialog_primaryContainer {
    /* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
    padding: 20px;
}
.mx_RestoreKeyBackupDialog_passPhraseInput, .mx_RestoreKeyBackupDialog_recoveryKeyInput {
    width: 300px;
    border: 1px solid var(--accent-color);
    border-radius: 5px;
    padding: 10px;
}
/*
Copyright 2015, 2016 OpenMarket Ltd

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_NetworkDropdown {
    position: relative;
}
.mx_NetworkDropdown_input {
    position: relative;
    border-radius: 3px;
    border: 1px solid #c7c7c7;
    font-weight: 300;
    font-size: 13px;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.mx_NetworkDropdown_arrow {
    border-color: var(--timeline-text-color) transparent transparent;
    border-style: solid;
    border-width: 5px 5px 0;
    display: block;
    height: 0;
    position: absolute;
    right: 10px;
    top: 16px;
    width: 0;
}
.mx_NetworkDropdown_networkoption {
    height: 37px;
    line-height: 37px;
    padding-left: 8px;
    padding-right: 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.mx_NetworkDropdown_networkoption img {
    margin: 5px;
    width: 25px;
    vertical-align: middle;
}
input.mx_NetworkDropdown_networkoption, input.mx_NetworkDropdown_networkoption:focus {
    border: 0;
    padding-top: 0;
    padding-bottom: 0;
}
.mx_NetworkDropdown_menu {
    position: absolute;
    left: -1px;
    right: -1px;
    top: 100%;
    z-index: 2;
    margin: 0;
    padding: 0px;
    border-radius: 3px;
    border: 1px solid var(--accent-color);
    background-color: var(--timeline-background-color);
}
.mx_NetworkDropdown_menu .mx_NetworkDropdown_networkoption:hover {
    background-color: #343a46;
}
.mx_NetworkDropdown_menu_network {
    font-weight: bold;
}
/*
Copyright 2017 Vector Creations Ltd

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_AccessibleButton {
    cursor: pointer;
}
.mx_AccessibleButton:focus:not(.focus-visible) {
    outline: 0;
}
.mx_AccessibleButton_disabled {
    cursor: default;
}
.mx_AccessibleButton_hasKind {
    padding: 7px 18px;
    text-align: center;
    border-radius: 4px;
    display: inline-block;
    font-size: 14px;
}
.mx_AccessibleButton_kind_primary {
    color: #ffffff;
    background-color: var(--accent-color);
    font-weight: 600;
}
.mx_AccessibleButton_kind_secondary {
    color: var(--accent-color);
    font-weight: 600;
}
.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled {
    opacity: 0.4;
}
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm {
    padding: 5px 12px;
    color: #ffffff;
    background-color: var(--accent-color);
}
.mx_AccessibleButton_kind_primary_sm.mx_AccessibleButton_disabled {
    opacity: 0.4;
}
.mx_AccessibleButton_kind_danger {
    color: #ffffff;
    background-color: var(--warning-color);
}
.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled {
    color: #ffffff;
    background-color: var(--warning-color-50pct);
}
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm {
    padding: 5px 12px;
    color: #ffffff;
    background-color: var(--warning-color);
}
.mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled {
    color: #ffffff;
    background-color: var(--warning-color-50pct);
}
.mx_AccessibleButton_kind_link {
    color: var(--accent-color);
    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: var(--accent-color);
    background-color: transparent;
}
.mx_AccessibleButton_kind_link_sm.mx_AccessibleButton_disabled {
    opacity: 0.4;
}
/*
Copyright 2016 OpenMarket Ltd

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_AddressSelector {
    position: absolute;
    background-color: var(--timeline-background-color);
    width: 485px;
    max-height: 116px;
    overflow-y: auto;
    border-radius: 3px;
    border: solid 1px var(--accent-color);
    cursor: pointer;
}
.mx_AddressSelector.mx_AddressSelector_empty {
    display: none;
}
.mx_AddressSelector_addressListElement .mx_AddressTile {
    background-color: var(--timeline-background-color);
    border: solid 1px var(--timeline-background-color);
}
.mx_AddressSelector_addressListElement.mx_AddressSelector_selected {
    background-color: var(--roomlist-background-color);
}
.mx_AddressSelector_addressListElement.mx_AddressSelector_selected .mx_AddressTile {
    background-color: var(--roomlist-background-color);
    border: solid 1px var(--roomlist-background-color);
}
/*
Copyright 2015, 2016 OpenMarket Ltd

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_AddressTile {
    display: inline-block;
    border-radius: 3px;
    background-color: rgba(74, 73, 74, 0.1);
    border: solid 1px #e7e7e7;
    line-height: 26px;
    color: var(--timeline-text-color);
    font-size: 14px;
    font-weight: normal;
    margin-right: 4px;
}
.mx_AddressTile.mx_AddressTile_error {
    background-color: rgba(255, 0, 100, 0.1);
    color: var(--warning-color);
    border-color: var(--warning-color);
}
.mx_AddressTile_network {
    display: inline-block;
    position: relative;
    padding-left: 2px;
    padding-right: 4px;
    vertical-align: middle;
}
.mx_AddressTile_avatar {
    display: inline-block;
    position: relative;
    padding-left: 2px;
    padding-right: 7px;
    vertical-align: middle;
}
.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; /* name + id width */
    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; /* same as id width */
    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; /* name + id width */
    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;
}
/*
Copyright 2016 OpenMarket Ltd

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_DirectorySearchBox {
    display: -ms-flexbox;
    display: flex;
    padding-left: 9px;
    padding-right: 9px;
    margin: 0 5px 0 0 !important;
}
.mx_DirectorySearchBox_joinButton {
    display: table-cell;
    padding: 3px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: var(--roomlist-background-color);
    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: 12px;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    cursor: pointer;
}
.mx_DirectorySearchBox_clear {
    background-color: var(--warning-color);
    -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;
}
/*
Copyright 2017 OpenMarket Ltd

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_Dropdown {
    position: relative;
    color: var(--timeline-text-color);
}
.mx_Dropdown_disabled {
    opacity: 0.3;
}
.mx_Dropdown_input {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    position: relative;
    border-radius: 3px;
    border: 1px solid #c7c7c7;
    font-size: 12px;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.mx_Dropdown_input:focus {
    border-color: var(--primary-color);
}
/* Disable dropdown highlight on focus */
.mx_Dropdown_input.mx_AccessibleButton:focus {
    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: var(--timeline-text-color);
}
.mx_Dropdown_option {
    height: 35px;
    line-height: 35px;
    padding-left: 8px;
    padding-right: 8px;
}
.mx_Dropdown_input > .mx_Dropdown_option {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -ms-flex: 1;
        flex: 1;
}
.mx_Dropdown_option div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mx_Dropdown_option img {
    margin: 5px;
    width: 16px;
    vertical-align: middle;
}
input.mx_Dropdown_option, input.mx_Dropdown_option:focus {
    font-weight: normal;
    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: 0px;
    border-radius: 3px;
    border: 1px solid var(--primary-color);
    background-color: var(--timeline-background-color);
    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: #343a46;
}
.mx_Dropdown_searchPrompt {
    font-weight: normal;
    margin-left: 5px;
    margin-bottom: 5px;
}
/*
Copyright 2017, 2019 New Vector Ltd.

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_EditableItemList {
    margin-top: 12px;
    margin-bottom: 10px;
}
.mx_EditableItem {
    margin-bottom: 5px;
    margin-left: 15px;
}
.mx_EditableItem_delete {
    margin-right: 5px;
    cursor: pointer;
    vertical-align: middle;
}
.mx_EditableItem_email {
    vertical-align: middle;
}
.mx_EditableItem_promptText {
    margin-right: 10px;
}
.mx_EditableItem_confirmBtn {
    margin-right: 5px;
}
.mx_EditableItemList_label {
    margin-bottom: 5px;
}
/*
Copyright 2019 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_ErrorBoundary {
    width: 100%;
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
}
.mx_ErrorBoundary_body {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    max-width: 400px;
    -ms-flex-align: center;
        align-items: center;
}
.mx_ErrorBoundary_body .mx_AccessibleButton {
        margin-top: 5px;
    }
/*
Copyright 2019 New Vector Ltd

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.
*/
/* TODO: Consider unifying with general input styles in _light.scss */
.mx_Field {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1;
        flex: 1;
    min-width: 0;
    position: relative;
    margin: 1em 0;
    border-radius: 4px;
    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: normal;
    font-family: Nunito, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', Arial, Helvetica, Sans-Serif;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    padding: 8px 9px;
    color: var(--timeline-text-color);
    background-color: var(--timeline-background-color);
    -ms-flex: 1;
        flex: 1;
}
.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: var(--timeline-text-color);
    z-index: 1;
    pointer-events: none;
}
.mx_Field:focus-within {
    border-color: var(--primary-color);
}
.mx_Field input:focus, .mx_Field select:focus, .mx_Field textarea:focus {
    outline: 0;
}
.mx_Field input:-ms-input-placeholder, .mx_Field textarea:-ms-input-placeholder {
    transition: color 0.25s ease-in 0s;
    color: transparent;
}
.mx_Field input::placeholder, .mx_Field textarea::placeholder {
    transition: color 0.25s ease-in 0s;
    color: transparent;
}
.mx_Field input:placeholder-shown:focus:-ms-input-placeholder, .mx_Field textarea:placeholder-shown:focus:-ms-input-placeholder {
    transition: color 0.25s ease-in 0.1s;
    color: var(--timeline-text-secondary-color);
}
.mx_Field input:placeholder-shown:focus::placeholder, .mx_Field textarea:placeholder-shown:focus::placeholder {
    transition: color 0.25s ease-in 0.1s;
    color: var(--timeline-text-secondary-color);
}
.mx_Field label {
    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: var(--timeline-text-color);
    background-color: transparent;
    font-size: 14px;
    position: absolute;
    left: 0px;
    top: 0px;
    margin: 7px 8px;
    padding: 2px;
    pointer-events: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: calc(100% - 20px);
}
.mx_Field_labelAlwaysTopLeft label, .mx_Field select + label, .mx_Field input:focus + label, .mx_Field input:not(:placeholder-shown) + label, .mx_Field textarea:focus + label, .mx_Field textarea:not(:placeholder-shown) + label {
    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: 10px;
    top: -13px;
    padding: 0 2px;
    background-color: var(--timeline-background-color);
    pointer-events: initial;
}
.mx_Field input:focus + label, .mx_Field select:focus + label, .mx_Field textarea:focus + label {
    color: var(--primary-color);
}
.mx_Field select:disabled, .mx_Field select:disabled + label, .mx_Field input:disabled, .mx_Field input:disabled + label, .mx_Field textarea:disabled, .mx_Field textarea:disabled + label {
    background-color: var(--timeline-background-color);
    color: var(--timeline-text-secondary-color);
}
/* Ordering this block by specificity would require breaking it up into several
   chunks, which seems like it would be more confusing to read. */
/* stylelint-disable no-descending-specificity */
.mx_Field_valid.mx_Field, .mx_Field_valid.mx_Field:focus-within {
        border-color: var(--accent-color);
    }
.mx_Field_valid.mx_Field label, .mx_Field_valid.mx_Field:focus-within label {
        color: var(--accent-color);
    }
.mx_Field_invalid.mx_Field, .mx_Field_invalid.mx_Field:focus-within {
        border-color: var(--warning-color);
    }
.mx_Field_invalid.mx_Field label, .mx_Field_invalid.mx_Field:focus-within label {
        color: var(--warning-color);
    }
/* stylelint-enable no-descending-specificity */
.mx_Field_tooltip {
    margin-top: -12px;
    margin-left: 4px;
    width: 200px;
}
.mx_Field_tooltip.mx_Field_valid {
    animation: mx_fadeout 1s 2s forwards;
}
.mx_Field .mx_Dropdown_input {
    border: initial;
    border-radius: initial;
}
.mx_Field .mx_CountryDropdown {
    width: 67px;
}
/*
Copyright 2015, 2016 OpenMarket Ltd

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
/* This has got to be the most fragile piece of CSS ever written.
   But empirically it works on Chrome/FF/Safari
 */
.mx_ImageView {
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -ms-flex-align: center;
        align-items: center;
}
.mx_ImageView_lhs {
    -ms-flex-order: 1;
        order: 1;
    -ms-flex: 1 1 10%;
        flex: 1 1 10%;
    min-width: 60px;
}
.mx_ImageView_content {
    -ms-flex-order: 2;
        order: 2;
    /* min-width hack needed for FF */
    min-width: 0px;
    height: 90%;
    -ms-flex: 15 15 0px;
        flex: 15 15 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
}
.mx_ImageView_content img {
    max-width: 100%;
    /* XXX: max-height interacts badly with flex on Chrome and doesn't relayout properly until you refresh */
    max-height: 100%;
    /* object-fit hack needed for Chrome due to Chrome not re-laying-out until you refresh */
    -o-object-fit: contain;
       object-fit: contain;
    /* background-image: url('$(res)/img/trans.png'); */
    pointer-events: all;
}
.mx_ImageView_labelWrapper {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    overflow: auto;
    pointer-events: all;
}
.mx_ImageView_label {
    text-align: left;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-direction: column;
        flex-direction: column;
    padding-left: 30px;
    padding-right: 30px;
    min-height: 100%;
    max-width: 240px;
    color: #ffffff;
}
.mx_ImageView_cancel {
    position: absolute;
    top: 40px;
    right: 0px;
    padding-top: 35px;
    padding-right: 35px;
    cursor: pointer;
}
.mx_ImageView_rotateClockwise {
    position: absolute;
    top: 40px;
    right: 70px;
    padding-top: 35px;
    cursor: pointer;
}
.mx_ImageView_rotateCounterClockwise {
    position: absolute;
    top: 40px;
    right: 105px;
    padding-top: 35px;
    cursor: pointer;
}
.mx_ImageView_name {
    font-size: 18px;
    margin-bottom: 6px;
    word-wrap: break-word;
}
.mx_ImageView_metadata {
    font-size: 15px;
    opacity: 0.5;
}
.mx_ImageView_download {
    display: table;
    margin-top: 24px;
    margin-bottom: 6px;
    border-radius: 5px;
    background-color: #454545;
    font-size: 14px;
    padding: 9px;
    border: 1px solid var(--timeline-background-color);
}
.mx_ImageView_size {
    font-size: 11px;
}
.mx_ImageView_link {
    color: #ffffff !important;
    text-decoration: none !important;
}
.mx_ImageView_button {
    font-size: 15px;
    opacity: 0.5;
    margin-top: 18px;
    cursor: pointer;
}
.mx_ImageView_shim {
    height: 30px;
}
.mx_ImageView_rhs {
    -ms-flex-order: 3;
        order: 3;
    -ms-flex: 1 1 10%;
        flex: 1 1 10%;
    min-width: 300px;
}
/*
Copyright 2017 New Vector Ltd.

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_InlineSpinner {
    display: inline;
}
.mx_InlineSpinner img {
    margin: 0px 6px;
    vertical-align: -3px;
}
/*
Copyright 2019 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_InteractiveTooltip_wrapper {
    position: fixed;
    z-index: 5000;
}
.mx_InteractiveTooltip {
    border-radius: 3px;
    background-color: var(--sidebar-color);
    color: #ffffff;
    position: absolute;
    font-size: 10px;
    font-weight: 600;
    padding: 6px;
    z-index: 5001;
}
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_top {
    top: 10px;
}
.mx_InteractiveTooltip_chevron_top {
    position: absolute;
    left: calc(50% - 8px);
    top: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-bottom: 8px solid var(--sidebar-color);
    border-right: 8px solid transparent;
}
@supports ((-webkit-clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) or (clip-path: polygon(0% 0%, 100% 100%, 0% 100%))) {
    .mx_InteractiveTooltip_chevron_top {
        height: 16px;
        width: 16px;
        background-color: inherit;
        border: none;
        -webkit-clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
                clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
        transform: rotate(135deg);
        border-radius: 0 0 0 3px;
        top: calc(-8px / 1.414);
    }
}
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_bottom {
    bottom: 10px;
}
.mx_InteractiveTooltip_chevron_bottom {
    position: absolute;
    left: calc(50% - 8px);
    bottom: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-top: 8px solid var(--sidebar-color);
    border-right: 8px solid transparent;
}
@supports ((-webkit-clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) or (clip-path: polygon(0% 0%, 100% 100%, 0% 100%))) {
    .mx_InteractiveTooltip_chevron_bottom {
        height: 16px;
        width: 16px;
        background-color: inherit;
        border: none;
        -webkit-clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
                clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
        transform: rotate(-45deg);
        border-radius: 0 0 0 3px;
        bottom: calc(-8px / 1.414);
    }
}
/*
Copyright 2019 New Vector Ltd.

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_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: var(--accent-color);
    color: #ffffff;
    text-align: center;
    z-index: 1000;
}
.mx_ManageIntegsButton_error .mx_ManageIntegsButton_errorPopup {
    display: none;
}
.mx_ManageIntegsButton_error:hover .mx_ManageIntegsButton_errorPopup {
    display: inline;
}
/*
Copyright 2016 OpenMarket Ltd

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_MemberEventListSummary {
    position: relative;
}
.mx_TextualEvent.mx_MemberEventListSummary_summary {
    font-size: 14px;
    display: -ms-inline-flexbox;
    display: inline-flex;
}
.mx_MemberEventListSummary_avatars {
    display: inline-block;
    margin-right: 8px;
    padding-top: 8px;
    line-height: 12px;
}
.mx_MemberEventListSummary_avatars .mx_BaseAvatar {
    margin-right: -4px;
    cursor: pointer;
}
.mx_MemberEventListSummary_toggle {
    color: var(--accent-color);
    cursor: pointer;
    float: right;
    margin-right: 10px;
    margin-top: 8px;
}
.mx_MemberEventListSummary_line {
    border-bottom: 1px solid var(--roomlist-separator-color);
    margin-left: 63px;
    line-height: 30px;
}
.mx_MatrixChat_useCompactLayout .mx_MemberEventListSummary {
        font-size: 13px;
    }
.mx_MatrixChat_useCompactLayout .mx_MemberEventListSummary .mx_EventTile_line {
            line-height: 20px;
        }
.mx_MatrixChat_useCompactLayout .mx_MemberEventListSummary_line {
        line-height: 22px;
    }
.mx_MatrixChat_useCompactLayout .mx_MemberEventListSummary_toggle {
        margin-top: 3px;
    }
.mx_MatrixChat_useCompactLayout .mx_TextualEvent.mx_MemberEventListSummary_summary {
        font-size: 13px;
    }
/*
Copyright 2019 New Vector Ltd.

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_PowerSelector {
    width: 100%;
}
.mx_PowerSelector .mx_Field select, .mx_PowerSelector .mx_Field input {
    box-sizing: border-box;
}
/*
Copyright 2015, 2016 OpenMarket Ltd

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_ProgressBar {
    height: 5px;
    border: 1px solid #000;
}
.mx_ProgressBar_fill {
    height: 100%;
    background-color: #000;
}
/*
Copyright 2018 Vector Creations Ltd

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_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;
}
/*
Copyright 2018 New Vector Ltd.

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_ResizeHandle {
    cursor: row-resize;
    -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 10px 0 0;
}
.mx_ResizeHandle > div {
    background: var(--roomlist-separator-color);
}
.mx_ResizeHandle.mx_ResizeHandle_horizontal > div {
    width: 1px;
    height: 100%;
}
.mx_ResizeHandle.mx_ResizeHandle_vertical > div {
    height: 1px;
}
.mx_UserPill, .mx_RoomPill, .mx_GroupPill, .mx_AtRoomPill {
    border-radius: 16px;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    padding-left: 5px;
}
/* More specific to override `.markdown-body a` text-decoration */
.mx_EventTile_content .markdown-body a.mx_Pill {
    text-decoration: none;
}
/* More specific to override `.markdown-body a` color */
.mx_EventTile_content .markdown-body a.mx_UserPill, .mx_UserPill {
    color: var(--timeline-text-color);
    background-color: #343a46;
    padding-right: 5px;
}
.mx_UserPill_selected {
    background-color: var(--accent-color) !important;
}
/* More specific to override `.markdown-body a` color */
.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me, .mx_EventTile_content .markdown-body a.mx_AtRoomPill, .mx_EventTile_content .mx_AtRoomPill, .mx_MessageComposer_input .mx_AtRoomPill {
    color: #ffffff;
    background-color: var(--warning-color);
    padding-right: 5px;
}
/* More specific to override `.markdown-body a` color */
.mx_EventTile_content .markdown-body a.mx_RoomPill, .mx_EventTile_content .markdown-body a.mx_GroupPill, .mx_RoomPill, .mx_GroupPill {
    color: #ffffff;
    background-color: #343a46;
    padding-right: 5px;
}
/* More specific to override `.markdown-body a` color */
.mx_EventTile_content .markdown-body a.mx_GroupPill, .mx_GroupPill {
    color: #ffffff;
    background-color: #343a46;
    padding-right: 5px;
}
.mx_EventTile_body .mx_UserPill, .mx_EventTile_body .mx_RoomPill, .mx_EventTile_body .mx_GroupPill {
    cursor: pointer;
}
.mx_UserPill .mx_BaseAvatar, .mx_RoomPill .mx_BaseAvatar, .mx_GroupPill .mx_BaseAvatar, .mx_AtRoomPill .mx_BaseAvatar {
    position: relative;
    left: -3px;
    top: 2px;
}
.mx_Markdown_BOLD {
    font-weight: bold;
}
.mx_Markdown_ITALIC {
    font-style: italic;
    /*
    // interestingly, *not* using the explicit italic font
    // variant seems yield better results.

    // compensate for Nunito italics being terrible
    // https://github.com/google/fonts/issues/1726
    transform: skewX(-14deg);
    display: inline-block;
    */
}
.mx_Markdown_CODE {
    padding: .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;
}
/*
Copyright 2017 Vector Creations Ltd

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_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;
}
/*
Copyright 2019 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_RoomAliasField {
    -ms-flex: 0 1 auto;
        flex: 0 1 auto;
    display: -ms-flexbox;
    display: flex;
    -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:-ms-input-placeholder {
        color: var(--timeline-text-secondary-color);
        font-weight: normal;
    }
.mx_RoomAliasField input::placeholder {
        color: var(--timeline-text-secondary-color);
        font-weight: normal;
    }
.mx_RoomAliasField .mx_Field_prefix, .mx_RoomAliasField .mx_Field_postfix {
        color: var(--timeline-text-secondary-color);
        border-left: none;
        border-right: none;
        font-weight: 600;
        padding: 9px 10px;
        -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);
    }
/*
Copyright 2015, 2016 OpenMarket Ltd

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_Spinner {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    width: 100%;
    height: 100%;
    -ms-flex: 1;
        flex: 1;
}
.mx_MatrixChat_middlePanel .mx_Spinner {
    height: auto;
}
/*
Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>

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_SyntaxHighlight {
    /* inhibit hljs styling */
    background: none !important;
    color: var(--timeline-text-secondary-color) !important;
}
/*
Copyright 2019 New Vector Ltd.

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_TextWithTooltip_tooltip {
    display: none;
}
/*
Copyright 2019 New Vector Ltd

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_ToggleSwitch {
    transition: background-color 0.20s ease-out 0.1s;
    width: 48px;
    height: 24px;
    border-radius: 14px;
    background-color: #c1c9d6;
    position: relative;
    opacity: 0.5;
}
.mx_ToggleSwitch_enabled {
    cursor: pointer;
    opacity: 1;
}
.mx_ToggleSwitch.mx_ToggleSwitch_on {
    background-color: var(--accent-color);
}
.mx_ToggleSwitch_ball {
    transition: left 0.15s ease-out 0.1s;
    margin: 2px;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background-color: var(--timeline-background-color);
    position: absolute;
    top: 0;
}
.mx_ToggleSwitch_on > .mx_ToggleSwitch_ball {
    left: 23px;
}
.mx_ToggleSwitch:not(.mx_ToggleSwitch_on) > .mx_ToggleSwitch_ball {
    left: 2px;
}
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2019 New Vector Ltd

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.
*/
@keyframes mx_fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes mx_fadeout {
    from { 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 #000000;
    border-bottom: 7px solid transparent;
}
.mx_Tooltip_chevron::after {
    content: '';
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-right: 6px solid var(--timeline-background-color);
    border-bottom: 6px solid transparent;
    position: absolute;
    top: -6px;
    left: 1px;
}
.mx_Tooltip {
    display: none;
    position: fixed;
    border: 1px solid #000000;
    border-radius: 4px;
    box-shadow: 4px 4px 12px 0 #181b21;
    background-color: var(--timeline-background-color);
    z-index: 4000;
    padding: 10px;
    pointer-events: none;
    line-height: 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--timeline-text-color);
    max-width: 200px;
    word-break: break-word;
    margin-right: 50px;
}
.mx_Tooltip.mx_Tooltip_visible {
        animation: mx_fadein 0.2s forwards;
    }
.mx_Tooltip.mx_Tooltip_invisible {
        animation: mx_fadeout 0.1s forwards;
    }
.mx_Tooltip_timeline {
    box-shadow: none;
    background-color: var(--sidebar-color);
    color: #ffffff;
    text-align: center;
    border: none;
    border-radius: 3px;
    font-size: 14px;
    line-height: 1.2;
    padding: 6px 8px;
}
.mx_Tooltip_timeline .mx_Tooltip_chevron::after {
        border-right-color: var(--sidebar-color);
    }
/*
Copyright 2017 New Vector Ltd.
Copyright 2019 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_TooltipButton {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: 5px;

    border: 2px solid #dbdbdb;
    border-radius: 20px;
    color: #dbdbdb;

    transition: opacity 0.2s ease-in;
    opacity: 0.6;

    line-height: 11px;
    text-align: center;

    cursor: pointer;
}
.mx_TooltipButton:hover {
    opacity: 1.0;
}
.mx_TooltipButton_container {
    position: relative;
    top: -18px;
    left: 4px;
}
.mx_TooltipButton_helpText {
    width: 400px;
    text-align: start;
    line-height: 17px !important;
}
/*
Copyright 2019 New Vector Ltd

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_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: normal;
    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: var(--accent-color);
    }
.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: var(--accent-color);
        }
.mx_Validation_detail.mx_Validation_invalid {
        color: var(--warning-color);
    }
.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: var(--warning-color);
        }
/*
Copyright 2015, 2016 OpenMarket Ltd

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_MatrixToolbar {
    background-color: var(--accent-color);
    color: #ffffff;

    display: -ms-flexbox;

    display: flex;
    -ms-flex-align: center;
        align-items: center;
}
.mx_MatrixToolbar_warning {
    margin-left: 16px;
    margin-right: 8px;
    margin-top: -2px;
}
.mx_MatrixToolbar_info {
    padding-left: 16px;
    padding-right: 8px;
    background-color: #2A9EDF;
}
.mx_MatrixToolbar_error {
    padding-left: 16px;
    padding-right: 8px;
    background-color: #DF2A8B;
}
.mx_MatrixToolbar_content {
    -ms-flex: 1;
        flex: 1;
}
.mx_MatrixToolbar_link {
    color: #ffffff !important;
    text-decoration: underline !important;
    cursor: pointer;
}
.mx_MatrixToolbar_clickable {
    cursor: pointer;
}
.mx_MatrixToolbar_close {
    cursor: pointer;
}
.mx_MatrixToolbar_close img {
    display: block;
    float: right;
    margin-right: 10px;
}
.mx_MatrixToolbar_action {
    margin-right: 16px;
}
.mx_MatrixToolbar_changelog {
    white-space: pre;
}
/*
Copyright 2017 New Vector Ltd

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_GroupPublicity_toggle {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    margin: 8px;
}
.mx_GroupPublicity_toggle .mx_GroupTile {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
        align-items: flex-start;
    cursor: pointer;
    box-sizing: border-box;
    width: 100%;
}
.mx_GroupPublicity_toggle .mx_ToggleSwitch {
    float: right;
}
/*
Copyright 2017 New Vector Ltd

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_GroupRoomTile {
    position: relative;
    color: var(--timeline-text-color);
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
}
.mx_GroupRoomList_wrapper {
    padding: 10px;
}
/*
Copyright 2017 New Vector Ltd

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_GroupUserSettings_groupPublicity_scrollbox {
    height: 200px;
    border: 1px solid var(--roomlist-separator-color);
    border-radius: 3px;
    overflow: hidden;
}
/*
Copyright 2018 New Vector Ltd

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_CreateEvent {
    background-color: #22262e;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.mx_CreateEvent_image {
    float: left;
    margin-right: 20px;
    width: 72px;
    height: 34px;

    background-color: var(--timeline-text-color);
    -webkit-mask: url(../../img/room-continuation.1f243ce.svg);
            mask: url(../../img/room-continuation.1f243ce.svg);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
}
.mx_CreateEvent_header {
    font-weight: bold;
}
/*
Copyright 2017 Vector Creations Ltd

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_DateSeparator {
    clear: both;
    margin: 4px 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    font-size: 14px;
    color: var(--timeline-text-color-50pct);
}
.mx_DateSeparator > hr {
    -ms-flex: 1 1 0px;
        flex: 1 1 0;
    height: 0;
    border: none;
    border-bottom: 1px solid var(--roomlist-separator-color);
}
.mx_DateSeparator > div {
    margin: 0 25px;
    -ms-flex: 0 0 auto;
        flex: 0 0 auto;
}
/*
Copyright 2017 Vector Creations Ltd.

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_MEmoteBody {
    white-space: pre-wrap;
}
.mx_MEmoteBody_sender {
    cursor: pointer;
}
/*
Copyright 2015, 2016 OpenMarket Ltd

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_MFileBody_download {
    color: var(--accent-color);
}
.mx_MFileBody_download a {
    color: var(--accent-color);
    text-decoration: none;
    cursor: pointer;
}
.mx_MFileBody_download object {
    margin-left: -16px;
    padding-right: 4px;
    margin-top: -4px;
    vertical-align: middle;
    pointer-events: none;
}
/* Remove the border and padding for iframes for download links. */
.mx_MFileBody_download iframe {
    margin: 0px;
    padding: 0px;
    border: none;
    width: 100%;
    /* Set the height of the iframe to be 1 line of text.
     * Iframes don't automatically size themselves to fit their content.
     * So either we have to fix the height of the iframe using CSS or
     * use javascript's cross-origin postMessage API to communicate how
     * big the content of the iframe is. */
    height: 1.5em;
}
/*
Copyright 2015, 2016 OpenMarket Ltd

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_MImageBody {
    display: block;
    margin-right: 34px;
}
.mx_MImageBody_thumbnail {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.mx_MImageBody_thumbnail_container {
    overflow: hidden;
    position: relative;
}
.mx_MImageBody_thumbnail_spinner {
    position: absolute;
    left: 50%;
    top: 50%;
}
.mx_MImageBody_thumbnail_spinner > * {
    transform: translate(-50%, -50%);
}
.mx_MImageBody_gifLabel {
    position: absolute;
    display: block;
    top: 0px;
    left: 14px;
    padding: 5px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid rgba(0, 0, 0, 0.2);
    color: rgba(255, 255, 255, 1);
    pointer-events: none;
}
.mx_HiddenImagePlaceholder {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    text-align: center;

    cursor: pointer;
    background-color: var(--roomlist-background-color);
}
.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button {
        color: var(--accent-color);
    }
.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button img {
            margin-right: 8px;
        }
.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button span {
            vertical-align: text-bottom;
        }
.mx_EventTile:hover .mx_HiddenImagePlaceholder {
    background-color: var(--timeline-background-color);
}
/*
Copyright 2015, 2016 OpenMarket Ltd

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_MNoticeBody {
    white-space: pre-wrap;
    opacity: 0.6;
}
/*
Copyright 2018 New Vector Ltd.

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_MStickerBody_wrapper {
    padding: 20px 0px;
}
.mx_MStickerBody_tooltip {
    position: absolute;
    top: 50%;
}
.mx_MStickerBody_hidden {
    max-width: 220px;
    text-decoration: none;
    text-align: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
}
/*
Copyright 2015, 2016 OpenMarket Ltd

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_MTextBody {
    white-space: pre-wrap;
}
/*
Copyright 2019 New Vector Ltd
Copyright 2019 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_MessageActionBar {
    position: absolute;
    visibility: hidden;
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    height: 24px;
    line-height: 24px;
    border-radius: 4px;
    background: var(--timeline-background-color);
    top: -18px;
    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(10px + 48px + 100% + 8px);
        height: calc(20px + 100%);
        top: -20px;
        left: -58px;
        z-index: -1;
        cursor: initial;
    }
.mx_MessageActionBar > * {
        white-space: nowrap;
        display: inline-block;
        position: relative;
        border: 1px solid #616b7f;
        margin-left: -1px;
    }
.mx_MessageActionBar > *:hover {
            border-color: #a1b2d1;
            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-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    background-color: var(--timeline-text-color);
}
.mx_MessageActionBar_reactButton::after {
    -webkit-mask-image: url(../../img/react.5d59311.svg);
            mask-image: url(../../img/react.5d59311.svg);
}
.mx_MessageActionBar_replyButton::after {
    -webkit-mask-image: url(../../img/reply.488cf91.svg);
            mask-image: url(../../img/reply.488cf91.svg);
}
.mx_MessageActionBar_editButton::after {
    -webkit-mask-image: url(../../img/edit.27a8059.svg);
            mask-image: url(../../img/edit.27a8059.svg);
}
.mx_MessageActionBar_optionsButton::after {
    -webkit-mask-image: url(../../img/icon_context.f8baf8d.svg);
            mask-image: url(../../img/icon_context.f8baf8d.svg);
}
/*
Copyright 2015, 2016 OpenMarket Ltd

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_MessageTimestamp {
    color: #a1b2d1;
    font-size: 10px;
}
/*
Copyright 2019 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_ReactionsQuickTooltip_buttons {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (auto)[4];
        grid-template-columns: repeat(4, auto);
}
.mx_ReactionsQuickTooltip_label {
    text-align: center;
}
.mx_ReactionsQuickTooltip_shortcode {
    padding-left: 6px;
    opacity: 0.7;
}
/*
Copyright 2019 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_ReactionTooltipButton {
    font-size: 16px;
    padding: 6px;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    cursor: pointer;
    transition: transform 0.25s;
}
.mx_ReactionTooltipButton:hover {
        transform: scale(1.2);
    }
.mx_ReactionTooltipButton_selected {
    opacity: 0.4;
}
/*
Copyright 2019 New Vector Ltd

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_ReactionsRow {
    margin: 6px 0;
    color: var(--timeline-text-color);
}
.mx_ReactionsRow_showAll {
    text-decoration: none;
    font-size: 10px;
    font-weight: 600;
    margin-left: 6px;
    vertical-align: top;
}
.mx_ReactionsRow_showAll:hover, .mx_ReactionsRow_showAll:link, .mx_ReactionsRow_showAll:visited {
        color: var(--accent-color);
    }
/*
Copyright 2019 New Vector Ltd

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_ReactionsRowButton {
    display: -ms-inline-flexbox;
    display: inline-flex;
    height: 20px;
    line-height: 21px;
    margin-right: 6px;
    padding: 0 6px;
    border: 1px solid #616b7f;
    border-radius: 10px;
    background-color: var(--roomlist-background-color);
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.mx_ReactionsRowButton:hover {
        border-color: #a1b2d1;
    }
.mx_ReactionsRowButton.mx_ReactionsRowButton_selected {
        background-color: #1f6954;
        border-color: var(--accent-color);
    }
.mx_ReactionsRowButton_content {
    max-width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 4px;
}
/*
Copyright 2019 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_ReactionsRowButtonTooltip_reactedWith {
    opacity: 0.7;
}
/*
Copyright 2017 Vector Creations Ltd

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_RoomAvatarEvent {
    opacity: 0.5;
    overflow-y: hidden;
}
.mx_RoomAvatarEvent_avatar {
    display: inline;
    position: relative;
    top: 5px;
}
/*
Copyright 2015, 2016 OpenMarket Ltd

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_SenderProfile_name {
    font-weight: 600;
}
/*
Copyright 2015, 2016 OpenMarket Ltd

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_TextualEvent {
    opacity: 0.5;
    overflow-y: hidden;
}
/*
Copyright 2015, 2016 OpenMarket Ltd
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_UnknownBody {
    white-space: pre-wrap;
}
/*
Copyright 2019 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_EventTile_content.mx_ViewSourceEvent {
    display: -ms-flexbox;
    display: flex;
    opacity: 0.6;
    font-size: 12px;
}
.mx_EventTile_content.mx_ViewSourceEvent pre, .mx_EventTile_content.mx_ViewSourceEvent code {
        -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: var(--accent-color);
        -webkit-mask-image: url(../../img/feather-customised/widget/maximise.dc32127.svg);
                mask-image: url(../../img/feather-customised/widget/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/widget/minimise.aec9142.svg);
                mask-image: url(../../img/feather-customised/widget/minimise.aec9142.svg);
    }
.mx_EventTile_content.mx_ViewSourceEvent:hover .mx_ViewSourceEvent_toggle {
        visibility: visible;
    }
/*
Copyright 2019 New Vector Ltd.

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_AliasSettings_editable {
    border: 0px;
    border-bottom: 1px solid #c7c7c7;
    padding: 0px;
    min-width: 240px;
}
.mx_AliasSettings_editable:focus {
    border-bottom: 1px solid var(--accent-color);
    outline: none;
    box-shadow: none;
}
/*
Copyright 2019 New Vector Ltd.

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_ColorSettings_roomColor {
    display: inline-block;
    position: relative;
    width: 37px;
    height: 37px;
    border: 1px solid #979797;
    margin-right: 13px;
    cursor: pointer;
}
.mx_ColorSettings_roomColor_selected {
    position: absolute;
    left: 10px;
    top: 4px;
    cursor: default !important;
}
.mx_ColorSettings_roomColorPrimary {
    height: 10px;
    position: absolute;
    bottom: 0px;
    width: 100%;
}
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2019 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.
*/
/*
the tile title bar is 5 (top border) + 12 (title, buttons) + 5 (bottom padding) px = 22px
the body is assumed to be 300px (assumed by at least the sticker pickerm, perhaps elsewhere),
so the body height would be 300px - 22px (room for title bar) = 278px
BUT! the sticker picker also assumes it's a little less high than that because the iframe
for the sticker picker doesn't have any padding or margin on it's bottom.
so subtracking another 5px, which brings us at 273px.
*/
.mx_AppsDrawer {
    margin: 5px;
}
.mx_AppsDrawer_hidden {
    display: none;
}
.mx_AppsContainer {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
}
.mx_AddWidget_button {
    -ms-flex-order: 2;
        order: 2;
    cursor: pointer;
    padding: 0;
    margin: 5px auto 5px auto;
    color: var(--accent-color);
    font-size: 12px;
}
.mx_AddWidget_button_full_width {
    max-width: 960px;
}
.mx_SetAppURLDialog_input {
    border-radius: 3px;
    border: 1px solid #e7e7e7;
    padding: 9px;
    color: var(--roomlist-separator-color);
    background-color: var(--timeline-background-color);
    font-size: 15px;
}
.mx_AppTile {
    max-width: 960px;
    width: 50%;
    margin-right: 5px;
    border: 5px solid var(--roomlist-background-color);
    border-radius: 4px;
}
.mx_AppTile:last-child {
    margin-right: 1px;
}
.mx_AppTileFullWidth {
    max-width: 960px;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 5px solid var(--roomlist-background-color);
    border-radius: 4px;
}
.mx_AppTile_mini {
    max-width: 960px;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.mx_AppTile_persistedWrapper {
    height: 273px;
}
.mx_AppTile_mini .mx_AppTile_persistedWrapper {
    height: 114px;
}
.mx_AppTileMenuBar {
    margin: 0;
    font-size: 12px;
    background-color: var(--roomlist-background-color);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: justify;
        justify-content: space-between;
    cursor: pointer;
}
.mx_AppTileMenuBar_expanded {
    padding-bottom: 5px;
}
.mx_AppTileMenuBarTitle {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-align: center;
        align-items: center;
    pointer-events: none;
}
.mx_AppTileMenuBarTitle > :last-child {
    margin-left: 9px;
}
.mx_AppTileMenuBarWidgets {
    float: right;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -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: var(--timeline-text-color);
    margin: 0 3px;
}
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_minimise {
    -webkit-mask-image: url(../../img/feather-customised/widget/minimise.aec9142.svg);
            mask-image: url(../../img/feather-customised/widget/minimise.aec9142.svg);
    background-color: var(--accent-color);
}
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_maximise {
    -webkit-mask-image: url(../../img/feather-customised/widget/maximise.dc32127.svg);
            mask-image: url(../../img/feather-customised/widget/maximise.dc32127.svg);
    background-color: var(--accent-color);
}
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_reload {
    -webkit-mask-image: url(../../img/feather-customised/widget/refresh.56a6717.svg);
            mask-image: url(../../img/feather-customised/widget/refresh.56a6717.svg);
    -webkit-mask-size: 100%;
            mask-size: 100%;
}
.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_snapshot {
    -webkit-mask-image: url(../../img/feather-customised/widget/camera.07c01e3.svg);
            mask-image: url(../../img/feather-customised/widget/camera.07c01e3.svg);
}
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_edit {
    -webkit-mask-image: url(../../img/feather-customised/widget/edit.0826c3f.svg);
            mask-image: url(../../img/feather-customised/widget/edit.0826c3f.svg);
}
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_delete {
    -webkit-mask-image: url(../../img/feather-customised/widget/bin.815f5dc.svg);
            mask-image: url(../../img/feather-customised/widget/bin.815f5dc.svg);
    background-color: var(--warning-color);
}
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_cancel {
    -webkit-mask-image: url(../../img/feather-customised/widget/x-circle.e6ae55c.svg);
            mask-image: url(../../img/feather-customised/widget/x-circle.e6ae55c.svg);
}
/* delete ? */
.mx_AppTileMenuBarWidget {
    cursor: pointer;
    width: 10px;
    height: 10px;
    padding: 1px;
    transition-duration: 500ms;
    border: 1px solid transparent;
}
.mx_AppTileMenuBarWidgetDelete {
    filter: none;
}
.mx_AppTileMenuBarWidget:hover {
    border: 1px solid var(--timeline-text-color);
    border-radius: 2px;
}
.mx_AppTileBody {
    height: 273px;
    width: 100%;
    overflow: hidden;
}
.mx_AppTileBody_mini {
    height: 112px;
    width: 100%;
    overflow: hidden;
}
.mx_AppTileBody_mini iframe {
    border: none;
    width: 100%;
    height: 100%;
}
.mx_AppTileBody iframe {
    width: 100%;
    height: 273px;
    overflow: hidden;
    border: none;
    padding: 0;
    margin: 0;
    display: block;
}
.mx_AppTileMenuBarWidgetPadding {
    margin-right: 5px;
}
.mx_AppIconTile {
    background-color: #454545;
    border: 1px solid rgba(0, 0, 0, 0);
    width: 200px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    border-radius: 3px;
    margin: 5px;
    display: inline-block;
}
.mx_AppIconTile.mx_AppIconTile_active {
    color: var(--accent-color);
    border-color: var(--accent-color);
}
.mx_AppIconTile:hover {
    border: 1px solid var(--accent-color);
    box-shadow: 0 0 10px 5px rgba(200, 200, 200, 0.5);
}
.mx_AppIconTile_content {
    padding: 2px 16px;
    height: 60px;
    overflow: hidden;
}
.mx_AppIconTile_content h4 {
    margin-top: 5px;
    margin-bottom: 2px;
}
.mx_AppIconTile_content p {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: smaller;
}
.mx_AppIconTile_image {
    padding: 10px;
    max-width: 100px;
    max-height: 100px;
    width: auto;
    height: auto;
}
.mx_AppIconTile_imageContainer {
    text-align: center;
    width: 100%;
    background-color: white;
    border-radius: 3px 3px 0 0;
    height: 155px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
}
form.mx_Custom_Widget_Form div {
    margin-top: 10px;
    margin-bottom: 10px;
}
.mx_AppPermissionWarning {
    text-align: center;
    background-color: var(--timeline-background-color);
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
}
.mx_AppPermissionWarningImage {
    margin: 10px 0;
}
.mx_AppPermissionWarningImage img {
    width: 100px;
}
.mx_AppPermissionWarningText {
    max-width: 90%;
    margin: 10px auto 10px auto;
    color: var(--timeline-text-color);
}
.mx_AppPermissionWarningTextLabel {
    font-weight: bold;
    display: block;
}
.mx_AppPermissionWarningTextURL {
    display: inline-block;
    max-width: 100%;
    color: var(--accent-color);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.mx_AppPermissionButton {
    border: none;
    padding: 5px 20px;
    border-radius: 5px;
    background-color: var(--accent-color);
    color: white;
    cursor: pointer;
}
.mx_AppLoading {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
    font-weight: bold;
    position: relative;
    height: 273px;
}
.mx_AppLoading .mx_Spinner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.mx_AppLoading_spinner_fadeIn {
    animation-fill-mode: backwards;
    animation-duration: 200ms;
    animation-delay: 500ms;
    animation-name: mx_AppLoading_spinner_fadeIn_animation;
}
@keyframes mx_AppLoading_spinner_fadeIn_animation {
    from { opacity: 0; }
    to { opacity: 1; }
}
.mx_AppLoading iframe {
    display: none;
}
.mx_Autocomplete {
    position: absolute;
    bottom: 0;
    z-index: 1001;
    width: 100%;
    border: 1px solid var(--roomlist-separator-color);
    background: var(--timeline-background-color);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    max-height: 50vh;
    overflow: auto;
}
.mx_Autocomplete_ProviderSection {
    border-bottom: 1px solid var(--roomlist-separator-color);
}
/* a "block" completion takes up a whole line */
.mx_Autocomplete_Completion_block {
    height: 34px;
    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;
    -ms-flex-align: center;
        align-items: center;
    color: var(--timeline-text-color);
}
.mx_Autocomplete_Completion_block * {
    margin: 0 3px;
}
.mx_Autocomplete_Completion_pill {
    border-radius: 17px;
    height: 34px;
    padding: 0px 5px;
    display: -ms-flexbox;
    display: flex;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    cursor: pointer;
    -ms-flex-align: center;
        align-items: center;
    color: var(--timeline-text-color);
}
.mx_Autocomplete_Completion_pill > * {
    margin: 0 3px;
}
/* styling for common completion elements */
.mx_Autocomplete_Completion_subtitle {
    font-style: italic;
    -ms-flex: 1;
        flex: 1;
}
.mx_Autocomplete_Completion_description {
    color: gray;
}
.mx_Autocomplete_Completion_container_pill {
    margin: 12px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: wrap;
        flex-flow: wrap;
}
.mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_title, .mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_subtitle, .mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_description {
        /* Ellipsis for long names/subtitles/descriptions */
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
.mx_Autocomplete_Completion.selected, .mx_Autocomplete_Completion:hover {
    background: var(--roomlist-background-color);
    outline: none;
}
.mx_Autocomplete_provider_name {
    margin: 12px;
    color: var(--timeline-text-color);
    font-weight: 400;
    opacity: 0.4;
}
/*
Copyright 2018 New Vector Ltd

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.
*/
.m_RoomView_auxPanel_stateViews {
    padding: 5px;
    padding-left: 19px;
    border-bottom: 1px solid #e5e5e5;
}
.m_RoomView_auxPanel_stateViews_span a {
    text-decoration: none;
    color: inherit;
}
.m_RoomView_auxPanel_stateViews_span[data-severity=warning] {
    font-weight: bold;
    color: orange;
}
.m_RoomView_auxPanel_stateViews_span[data-severity=alert] {
    font-weight: bold;
    color: red;
}
.m_RoomView_auxPanel_stateViews_span[data-severity=normal] {
    font-weight: normal;
}
.m_RoomView_auxPanel_stateViews_span[data-severity=notice] {
    font-weight: normal;
    color: #a2a2a2;
}
.m_RoomView_auxPanel_stateViews_delim {
    padding: 0 5px;
    color: #a2a2a2;
}
/*
Copyright 2019 New Vector Ltd
Copyright 2019 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_BasicMessageComposer {
    position: relative;

    @keyframes visualbell {
        from { background-color: #800; }
        to { background-color: var(--timeline-background-color); }
    }
}
.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;
    }
.mx_BasicMessageComposer.mx_BasicMessageComposer_input_error {
        animation: 0.2s visualbell;
    }
.mx_BasicMessageComposer .mx_BasicMessageComposer_input {
        white-space: pre-wrap;
        word-wrap: break-word;
        outline: none;
        overflow-x: hidden;
    }
.mx_BasicMessageComposer .mx_BasicMessageComposer_input span.mx_UserPill, .mx_BasicMessageComposer .mx_BasicMessageComposer_input span.mx_RoomPill {
            padding-left: 21px;
            position: relative;
        }
.mx_BasicMessageComposer .mx_BasicMessageComposer_input span.mx_UserPill::before, .mx_BasicMessageComposer .mx_BasicMessageComposer_input span.mx_RoomPill::before {
                position: absolute;
                left: 2px;
                top: 2px;
                content: var(--avatar-letter);
                width: 16px;
                height: 16px;
                background: var(--avatar-background), var(--timeline-background-color);
                color: #ffffff;
                background-repeat: no-repeat;
                background-size: 16px;
                border-radius: 8px;
                text-align: center;
                font-weight: normal;
                line-height: 16px;
                font-size: 10.4px;
            }
.mx_BasicMessageComposer .mx_BasicMessageComposer_AutoCompleteWrapper {
        position: relative;
        height: 0;
    }
/*
Copyright 2019 New Vector Ltd

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_E2EIcon {
    width: 25px;
    height: 25px;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center 0;
            mask-position: center 0;
    margin: 0 9px;
}
.mx_E2EIcon_verified {
    -webkit-mask-image: url(../../img/e2e/lock-verified.36766fc.svg);
            mask-image: url(../../img/e2e/lock-verified.36766fc.svg);
    background-color: var(--accent-color);
}
.mx_E2EIcon_warning {
    -webkit-mask-image: url(../../img/e2e/lock-warning.46c0691.svg);
            mask-image: url(../../img/e2e/lock-warning.46c0691.svg);
    background-color: var(--warning-color);
}
/*
Copyright 2019 New Vector Ltd
Copyright 2019 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_EditMessageComposer {

    padding: 3px;
    margin: -7px -10px -5px -10px;
    overflow: visible !important;
}
.mx_EditMessageComposer .mx_BasicMessageComposer_input {
        border-radius: 4px;
        border: solid 1px var(--roomlist-separator-color);
        background-color: var(--timeline-background-color);
        max-height: 200px;
        padding: 3px 6px;
    }
.mx_EditMessageComposer .mx_BasicMessageComposer_input:focus {
            border-color: var(--accent-color-50pct);
        }
.mx_EditMessageComposer .mx_EditMessageComposer_buttons {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: row;
            flex-direction: row;
        -ms-flex-pack: end;
            justify-content: flex-end;
        padding: 5px;
        position: absolute;
        left: 0;
        background: var(--roomlist-background-color);
        z-index: 100;
        right: 0;
        margin: 0 -110px 0 0;
        padding-right: 147px;
    }
.mx_EditMessageComposer .mx_EditMessageComposer_buttons .mx_AccessibleButton {
            margin-left: 5px;
            padding: 5px 40px;
        }
.mx_EventTile_last .mx_EditMessageComposer_buttons {
    position: static;
    margin-right: -147px;
}
/*
Copyright 2015, 2016 OpenMarket Ltd

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_EntityTile {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    color: var(--timeline-text-color);
    cursor: pointer;
}
.mx_EntityTile:hover {
    padding-right: 30px;
    position: relative;
}
.mx_EntityTile:hover::before {
    content: "";
    position: absolute;
    top: calc(50% - 8px);
    right: 10px;
    -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: #a1b2d1;
}
.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-left: 3px;
    padding-right: 12px;
    padding-top: 4px;
    padding-bottom: 4px;
    width: 36px;
    height: 36px;
    position: relative;
}
.mx_EntityTile_power {
    position: absolute;
    width: 16px;
    height: 17px;
    top: 0px;
    right: 6px;
}
.mx_EntityTile_name, .mx_GroupRoomTile_name {
    -ms-flex: 1 1 0px;
        flex: 1 1 0;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mx_EntityTile_details {
    overflow: hidden;
}
.mx_EntityTile_ellipsis .mx_EntityTile_name {
    font-style: italic;
    color: var(--timeline-text-color);
}
.mx_EntityTile_invitePlaceholder .mx_EntityTile_name {
    font-style: italic;
    color: var(--timeline-text-color);
}
.mx_EntityTile_unavailable .mx_EntityTile_avatar, .mx_EntityTile_unavailable .mx_EntityTile_name, .mx_EntityTile_offline_beenactive .mx_EntityTile_avatar, .mx_EntityTile_offline_beenactive .mx_EntityTile_name {
    opacity: 0.5;
}
.mx_EntityTile_offline_neveractive .mx_EntityTile_avatar, .mx_EntityTile_offline_neveractive .mx_EntityTile_name {
    opacity: 0.25;
}
.mx_EntityTile_unknown .mx_EntityTile_avatar, .mx_EntityTile_unknown .mx_EntityTile_name {
    opacity: 0.25;
}
.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_EntityTile_name {
    font-size: 13px;
}
.mx_EntityTile_subtext {
    font-size: 11px;
    opacity: 0.5;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
}
/*
Copyright 2015, 2016 OpenMarket Ltd

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_EventTile {
    max-width: 100%;
    clear: both;
    padding-top: 18px;
    font-size: 14px;
    position: relative;
}
.mx_EventTile.mx_EventTile_info {
    padding-top: 0px;
}
.mx_EventTile_avatar {
    position: absolute;
    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: 8px;
    left: 65px;
}
.mx_EventTile_continuation {
    padding-top: 0px !important;
}
.mx_EventTile_continuation.mx_EventTile_isEditing {
        padding-top: 5px !important;
        margin-top: -5px;
    }
.mx_EventTile_isEditing {
    background-color: var(--roomlist-background-color);
}
.mx_EventTile .mx_SenderProfile {
    color: var(--timeline-text-color);
    font-size: 14px;
    display: inline-block; /* anti-zalgo, with overflow hidden */
    overflow: hidden;
    cursor: pointer;
    padding-left: 65px; /* left gutter */
    padding-bottom: 0px;
    padding-top: 0px;
    margin: 0px;
    line-height: 17px;
    /* the next three lines, along with overflow hidden, truncate long display names */
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: calc(100% - 65px);
}
.mx_EventTile .mx_SenderProfile .mx_Flair {
    opacity: 0.7;
    margin-left: 5px;
    display: inline-block;
    vertical-align: top;
    height: 16px;
    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: 0px;
    width: 46px; /* 8 + 30 (avatar) + 8 */
    text-align: center;
    position: absolute;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.mx_EventTile_line, .mx_EventTile_reply {
    position: relative;
    /* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */
    margin-right: 110px;
    padding-left: 65px; /* left gutter */
    padding-top: 4px;
    padding-bottom: 2px;
    border-radius: 4px;
    min-height: 24px;
    line-height: 22px;
}
.mx_EventTile_reply {
    margin-right: 10px;
}
.mx_EventTile_info .mx_EventTile_line {
    padding-left: 83px;
}
/* HACK to override line-height which is already marked important elsewhere */
.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_last > div > a > .mx_MessageTimestamp, .mx_EventTile:hover > div > a > .mx_MessageTimestamp, .mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp {
    visibility: visible;
}
.mx_EventTile:hover .mx_MessageActionBar, .mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar {
    visibility: visible;
}
/* this is used for the tile for the event which is selected via the URL.
 * TODO: ultimately we probably want some transition on here.
 */
.mx_EventTile_selected > .mx_EventTile_line {
    border-left: var(--accent-color) 5px solid;
    padding-left: 60px;
    background-color: var(--roomlist-background-color);
}
.mx_EventTile_highlight, .mx_EventTile_highlight .markdown-body {
    color: var(--warning-color);
}
.mx_EventTile_highlight .mx_EventTile_line, .mx_EventTile_highlight .markdown-body .mx_EventTile_line {
        background-color: #25271F;
    }
.mx_EventTile:hover .mx_EventTile_line, .mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line {
    background-color: var(--roomlist-background-color);
}
.mx_EventTile_searchHighlight {
    background-color: var(--accent-color);
    color: #ffffff;
    border-radius: 5px;
    padding-left: 2px;
    padding-right: 2px;
    cursor: pointer;
}
.mx_EventTile_searchHighlight a {
    background-color: var(--accent-color);
    color: #ffffff;
}
.mx_EventTile_encrypting {
    color: #abddbc !important;
}
.mx_EventTile_sending {
    color: #a1b2d1;
}
.mx_EventTile_sending .mx_UserPill, .mx_EventTile_sending .mx_RoomPill {
    opacity: 0.5;
}
.mx_EventTile_notSent {
    color: #f44;
}
.mx_EventTile_redacted .mx_EventTile_line .mx_UnknownBody, .mx_EventTile_redacted .mx_EventTile_reply .mx_UnknownBody {
    --lozenge-color: #606060;
    --lozenge-border-color: #000000;
    display: block;
    height: 22px;
    width: 250px;
    border-radius: 11px;
    background:
        repeating-linear-gradient(
            -45deg,
            var(--lozenge-color),
            var(--lozenge-color) 3px,
            transparent 3px,
            transparent 6px
        );
    box-shadow: 0px 0px 3px var(--lozenge-border-color) inset;
}
.mx_EventTile_sending.mx_EventTile_redacted .mx_UnknownBody {
    opacity: 0.4;
}
div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
    --lozenge-color: #f44;
    --lozenge-border-color: #f44;
}
.mx_EventTile_contextual {
    opacity: 0.4;
}
.mx_EventTile_msgOption {
    float: right;
    text-align: right;
    position: relative;
    width: 90px;

    /* Hack to stop the height of this pushing the messages apart.
       Replaces margin-top: -6px. This interacts better with a read
       marker being in between. Content overflows. */
    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: 29px;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    z-index: 1;
}
.mx_EventTile_continuation .mx_EventTile_readAvatars, .mx_EventTile_info .mx_EventTile_readAvatars, .mx_EventTile_emote .mx_EventTile_readAvatars {
    top: 7px;
}
.mx_EventTile_readAvatars .mx_BaseAvatar {
    position: absolute;
    display: inline-block;
}
.mx_EventTile_readAvatarRemainder {
    color: #a1b2d1;
    font-size: 11px;
    position: absolute;
}
/* all the overflow-y: hidden; are to trap Zalgos -
   but they introduce an implicit overflow-x: auto.
   so make that explicitly hidden too to avoid random
   horizontal scrollbars occasionally appearing, like in
   https://github.com/vector-im/vector-web/issues/1154
    */
.mx_EventTile_content {
    display: block;
    overflow-y: hidden;
    overflow-x: hidden;
    margin-right: 34px;
}
/* De-zalgoing */
.mx_EventTile_body {
    overflow-y: hidden;
}
/* Spoiler stuff */
.mx_EventTile_spoiler {
    cursor: pointer;
}
.mx_EventTile_spoiler_reason {
    color: #a1b2d1;
    font-size: 11px;
}
.mx_EventTile_spoiler_content {
    filter: blur(5px) saturate(0.1) sepia(1);
    transition-duration: 0.5s;
}
.mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content {
    filter: none;
}
.mx_EventTile_e2eIcon {
    display: block;
    position: absolute;
    top: 8px;
    left: 46px;
    width: 15px;
    height: 15px;
    cursor: pointer;
    -webkit-mask-size: 14px;
            mask-size: 14px;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: 0;
            mask-position: 0;
    opacity: 0.2;
}
.mx_EventTile_e2eIcon_undecryptable, .mx_EventTile_e2eIcon_unverified {
    -webkit-mask-image: url(../../img/e2e/warning.a0cb4f2.svg);
            mask-image: url(../../img/e2e/warning.a0cb4f2.svg);
    background-color: var(--warning-color);
}
.mx_EventTile_e2eIcon_unencrypted {
    -webkit-mask-image: url(../../img/e2e/warning.a0cb4f2.svg);
            mask-image: url(../../img/e2e/warning.a0cb4f2.svg);
    background-color: #c9ced6;
}
.mx_EventTile_e2eIcon_hidden {
    display: none;
}
/* always override hidden attribute for blocked and warning */
.mx_EventTile_e2eIcon_hidden[src*="img/e2e-blocked.svg"], .mx_EventTile_e2eIcon_hidden[src*="img/e2e-warning.svg"] {
    display: block;
}
.mx_EventTile_keyRequestInfo {
    font-size: 12px;
}
.mx_EventTile_keyRequestInfo_text {
    opacity: 0.5;
}
.mx_EventTile_keyRequestInfo_text a {
    color: var(--timeline-text-color);
    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: 0px;
}
.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child {
    margin-bottom: 0px;
}
.mx_EventTile_12hr .mx_EventTile_e2eIcon {
    padding-left: 5px;
}
.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line {
    padding-left: 78px;
}
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
    padding-left: 60px;
}
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
    border-left: #76cfa5 5px solid;
}
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
    border-left: #e8bf37 5px solid;
}
.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line {
    padding-left: 78px;
}
/* End to end encryption stuff */
.mx_EventTile:hover .mx_EventTile_e2eIcon {
    opacity: 1;
}
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp, .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp {
    left: 3px;
    width: auto;
}
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > .mx_EventTile_e2eIcon, .mx_EventTile:hover.mx_EventTile_unverified .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: 12px;
    color: var(--timeline-text-color-50pct);
    display: inline-block;
    margin-left: 9px;
    cursor: pointer;
}
/* Various markdown overrides */
.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: 14px;
}
.mx_EventTile_content .markdown-body pre, .mx_EventTile_content .markdown-body code {
        font-family: Inconsolata, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', Courier, monospace !important;
        color: #333;
    }
.mx_EventTile_content .markdown-body pre {
        overflow-x: overlay;
        overflow-y: visible;
        max-height: 30vh;
    }
.mx_EventTile_content .markdown-body code {
        background-color: #f8f8f8;
    }
.mx_EventTile:hover .mx_EventTile_body pre {
    border: 1px solid #e5e5e5;
}
.mx_EventTile_pre_container {
    position: relative;
}
.mx_EventTile_copyButton {
    position: absolute;
    display: inline-block;
    visibility: hidden;
    cursor: pointer;
    top: 6px;
    right: 6px;
    width: 19px;
    height: 19px;
    background-image: url(../../img/icon_copy_message.f2eab28.svg);
}
.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton {
    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;
}
/* Make h1 and h2 the same size as h3. */
.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: var(--primary-color);
    text-decoration: underline;
}
.mx_EventTile_content .markdown-body .hljs {
    display: inline !important;
}
/*
// actually, removing the Italic TTF provides
// better results seemingly

// compensate for Nunito italics being terrible
// https://github.com/google/fonts/issues/1726
.mx_EventTile_content .markdown-body em {
    transform: skewX(-14deg);
    display: inline-block;
}
*/
/* end of overrides */
/* Ordering this block by specificity would require breaking it up into several
   chunks, which seems like it would be more confusing to read. */
/* stylelint-disable no-descending-specificity */
.mx_MatrixChat_useCompactLayout .mx_EventTile {
        padding-top: 4px;
    }
.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info {
        padding-top: 0px;
        font-size: 13px;
    }
.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_line, .mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_reply {
            line-height: 20px;
        }
.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
            top: 4px;
        }
.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_SenderProfile {
        font-size: 13px;
    }
.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: 0px;
            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: 0px;
            padding-bottom: 0px;
        }
.mx_MatrixChat_useCompactLayout .mx_EventTile_line, .mx_MatrixChat_useCompactLayout .mx_EventTile_reply {
        padding-top: 0px;
        padding-bottom: 0px;
    }
.mx_MatrixChat_useCompactLayout .mx_EventTile_avatar {
        top: 2px;
    }
.mx_MatrixChat_useCompactLayout .mx_EventTile_e2eIcon {
        top: 3px;
    }
.mx_MatrixChat_useCompactLayout .mx_EventTile_readAvatars {
        top: 27px;
    }
.mx_MatrixChat_useCompactLayout .mx_EventTile_continuation .mx_EventTile_readAvatars, .mx_MatrixChat_useCompactLayout .mx_EventTile_emote .mx_EventTile_readAvatars {
        top: 5px;
    }
.mx_MatrixChat_useCompactLayout .mx_EventTile_info .mx_EventTile_readAvatars {
        top: 4px;
    }
.mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList h2 {
        margin-top: 6px;
    }
.mx_MatrixChat_useCompactLayout .mx_EventTile_content .markdown-body p, .mx_MatrixChat_useCompactLayout .mx_EventTile_content .markdown-body ul, .mx_MatrixChat_useCompactLayout .mx_EventTile_content .markdown-body ol, .mx_MatrixChat_useCompactLayout .mx_EventTile_content .markdown-body dl, .mx_MatrixChat_useCompactLayout .mx_EventTile_content .markdown-body blockquote, .mx_MatrixChat_useCompactLayout .mx_EventTile_content .markdown-body pre, .mx_MatrixChat_useCompactLayout .mx_EventTile_content .markdown-body table {
            margin-bottom: 4px;
        }
/* stylelint-enable no-descending-specificity */
/*
Copyright 2019 New Vector Ltd

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.
*/
@charset "utf-8";
.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: bold;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    display: inline-block;
    padding: 0 4px;
    color: var(--roomlist-background-color);
    background-color: var(--warning-color);
}
.mx_JumpToBottomButton_scrollDown {
    position: relative;
    height: 38px;
    border-radius: 19px;
    box-sizing: border-box;
    background: var(--timeline-background-color);
    border: 1.3px solid var(--roomlist-text-secondary-color);
    cursor: pointer;
}
.mx_JumpToBottomButton_scrollDown::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-mask: url(../../img/icon-jump-to-bottom.ded64cf.svg);
            mask: url(../../img/icon-jump-to-bottom.ded64cf.svg);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: 9px 14px;
            mask-position: 9px 14px;
    background: var(--roomlist-text-secondary-color);
}
/*
Copyright 2015, 2016 OpenMarket Ltd

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_LinkPreviewWidget {
    margin-top: 15px;
    margin-right: 15px;
    margin-bottom: 15px;
    display: -ms-flexbox;
    display: flex;
    border-left: 4px solid #ddd;
    color: var(--timeline-text-secondary-color);
}
.mx_LinkPreviewWidget_image {
    -ms-flex: 0 0 100px;
        flex: 0 0 100px;
    margin-left: 15px;
    text-align: center;
    cursor: pointer;
}
.mx_LinkPreviewWidget_caption {
    margin-left: 15px;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
}
.mx_LinkPreviewWidget_title {
    display: inline;
    font-weight: bold;
    white-space: normal;
}
.mx_LinkPreviewWidget_siteName {
    display: inline;
}
.mx_LinkPreviewWidget_description {
    margin-top: 8px;
    white-space: normal;
    word-wrap: break-word;
}
.mx_LinkPreviewWidget_cancel {
    visibility: hidden;
    cursor: pointer;
    -ms-flex: 0 0 40px;
        flex: 0 0 40px;
}
.mx_LinkPreviewWidget:hover .mx_LinkPreviewWidget_cancel {
    visibility: visible;
}
.mx_MatrixChat_useCompactLayout .mx_LinkPreviewWidget {
        margin-top: 6px;
        margin-bottom: 6px;
    }
/*
Copyright 2016 OpenMarket Ltd

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_MemberDeviceInfo {
    display: -ms-flexbox;
    display: flex;
    padding-bottom: 10px;
    -ms-flex-align: start;
        align-items: start;
}
.mx_MemberDeviceInfo_icon {
    margin-top: 4px;
    width: 12px;
    height: 12px;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
}
.mx_MemberDeviceInfo_icon_blacklisted {
    -webkit-mask-image: url(../../img/e2e/blacklisted.74ba193.svg);
            mask-image: url(../../img/e2e/blacklisted.74ba193.svg);
    background-color: var(--warning-color);
}
.mx_MemberDeviceInfo_icon_verified {
    -webkit-mask-image: url(../../img/e2e/verified.d53b45d.svg);
            mask-image: url(../../img/e2e/verified.d53b45d.svg);
    background-color: var(--accent-color);
}
.mx_MemberDeviceInfo_icon_unverified {
    -webkit-mask-image: url(../../img/e2e/warning.a0cb4f2.svg);
            mask-image: url(../../img/e2e/warning.a0cb4f2.svg);
    background-color: var(--warning-color);
}
.mx_MemberDeviceInfo > .mx_DeviceVerifyButtons {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex: 0 1 auto;
        flex: 0 1 auto;
    -ms-flex-align: stretch;
        align-items: stretch;
}
.mx_MemberDeviceInfo_textButton {
    /* align images in buttons (eg spinners) */
    vertical-align: middle;
    border: 0px;
    border-radius: 4px;
    font-family: Nunito, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', Arial, Helvetica, Sans-Serif;
    font-size: 14px;
    color: white;
    background-color: #03b381;
    width: auto;
    padding: 7px;
    padding-left: 1.5em;
    padding-right: 1.5em;
    cursor: pointer;
    display: inline-block;
    outline: none;
    font-size: 15px;
    padding: 0px 1.5em 0px 1.5em;
    margin: 2px;
    -ms-flex: 1;
        flex: 1;
}
.mx_MemberDeviceInfo_textButton:hover {
}
.mx_MemberDeviceInfo_deviceId {
    word-break: break-word;
    font-size: 13px;
}
.mx_MemberDeviceInfo_deviceInfo {
    margin: 0 5px 5px 8px;
    -ms-flex: 1;
        flex: 1;
}
/* "Unblacklist" is too long for a regular button: make it wider and
   reduce the padding. */
.mx_EncryptedEventDialog .mx_MemberDeviceInfo_blacklist, .mx_EncryptedEventDialog .mx_MemberDeviceInfo_unblacklist {
    padding-left: 1em;
    padding-right: 1em;
}
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified, .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified, .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blacklisted {
    float: right;
    padding-left: 1em;
}
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified {
    color: #76cfa5;
}
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified {
    color: #e8bf37;
}
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blacklisted {
    color: #ba6363;
}
/*
Copyright 2015, 2016 OpenMarket Ltd

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_MemberInfo {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex: 1;
        flex: 1;
    overflow-y: auto;
}
.mx_MemberInfo_name {
    -ms-flex-align: center;
        align-items: center;
    display: -ms-flexbox;
    display: flex;
}
.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: #a1b2d1;
}
.mx_MemberInfo_name h2 {
    -ms-flex: 1;
        flex: 1;
    overflow-x: auto;
    max-height: 50px;
}
.mx_MemberInfo h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 16px 0 16px 15px;
}
.mx_MemberInfo_container {
    margin: 0 16px 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: var(--sidebar-color);
    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: zoom-in;
}
.mx_MemberInfo_profile {
    margin-bottom: 16px;
}
.mx_MemberInfo h3 {
    text-transform: uppercase;
    color: #61708b;
    font-weight: bold;
    font-size: 12px;
    margin: 4px 0;
}
.mx_MemberInfo_profileField {
    font-size: 15px;
    position: relative;
}
.mx_MemberInfo_buttons {
    margin-bottom: 16px;
}
.mx_MemberInfo_field {
    cursor: pointer;
    font-size: 15px;
    color: var(--timeline-text-color);
    margin-left: 8px;
    line-height: 23px;
}
.mx_MemberInfo_createRoom {
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    padding: 0 8px;
}
.mx_MemberInfo_createRoom_label {
    width: initial !important;
    cursor: pointer;
}
.mx_MemberInfo label {
    font-size: 13px;
}
.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: 11px;
    opacity: 0.5;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
}
.mx_MemberInfo .mx_MemberInfo_scrollContainer {
    -ms-flex: 1;
        flex: 1;
}
/*
Copyright 2015, 2016 OpenMarket Ltd

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_MemberList, .mx_GroupMemberList, .mx_GroupRoomList {
    -ms-flex: 1;
        flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    min-height: 0;
}
.mx_MemberList .mx_Spinner, .mx_GroupMemberList .mx_Spinner, .mx_GroupRoomList .mx_Spinner {
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
    }
.mx_MemberList h2, .mx_GroupMemberList h2, .mx_GroupRoomList h2 {
        text-transform: uppercase;
        color: #edf3ff;
        font-weight: 600;
        font-size: 13px;
        padding-left: 3px;
        padding-right: 12px;
        margin-top: 8px;
        margin-bottom: 4px;
    }
.mx_MemberList .mx_AutoHideScrollbar, .mx_GroupMemberList .mx_AutoHideScrollbar, .mx_GroupRoomList .mx_AutoHideScrollbar {
        -ms-flex: 1 1 0px;
            flex: 1 1 0;
    }
.mx_MemberList_chevron {
    position: absolute;
    right: 35px;
    margin-top: -15px;
}
.mx_MemberList_border {
    overflow-y: auto;

    -ms-flex-order: 1;

        order: 1;
    -ms-flex: 1 1 0px;
        flex: 1 1 0px;
}
.mx_MemberList_query, .mx_GroupMemberList_query, .mx_GroupRoomList_query {
    -ms-flex: 1 1 0px;
        flex: 1 1 0;
}
.mx_MemberList_wrapper {
    padding: 10px;
}
.mx_MemberList_invite, .mx_RightPanel_invite {
    -ms-flex: 0 0 auto;
        flex: 0 0 auto;
    position: relative;
    background-color: var(--accent-color);
    border-radius: 4px;
    padding: 8px;
    margin: 9px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    color: white;
    font-weight: 600;
}
.mx_MemberList_invite .mx_RightPanel_icon, .mx_RightPanel_invite .mx_RightPanel_icon {
        padding-right: 5px;
        padding-top: 2px;
    }
.mx_MemberList_invite.mx_AccessibleButton_disabled {
    background-color: var(--timeline-text-secondary-color);
    cursor: not-allowed;
}
.mx_MemberList_invite span {
    background-image: url(../../img/feather-customised/user-add.f517c01.svg);
    background-repeat: no-repeat;
    background-position: center left;
    padding-left: 25px;
}
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2018 New Vector Ltd

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_MessageComposer_wrapper {
    vertical-align: middle;
    margin: auto;
    border-top: 1px solid var(--roomlist-separator-color);
    position: relative;
    padding-left: 84px;
}
.mx_MessageComposer_wrapper.mx_MessageComposer_hasE2EIcon {
    padding-left: 109px;
}
.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: bold;
}
.mx_MessageComposer_autocomplete_wrapper {
    position: relative;
    height: 0;
}
.mx_MessageComposer_row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-align: center;
        align-items: center;
    width: 100%;
}
.mx_MessageComposer .mx_MessageComposer_avatar {
    position: absolute;
    left: 27px;
}
.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar {
    display: block;
}
.mx_MessageComposer_composecontrols {
    width: 100%;
}
.mx_MessageComposer_e2eIcon.mx_E2EIcon {
    position: absolute;
    left: 60px;
    background-color: #c9ced6;
}
.mx_MessageComposer_noperm_error {
    width: 100%;
    height: 60px;
    font-style: italic;
    color: var(--timeline-text-secondary-color);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
}
.mx_MessageComposer_input_wrapper {
    -ms-flex: 1;
        flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    cursor: text;
}
.mx_MessageComposer_input {
    -ms-flex: 1;
        flex: 1;
    vertical-align: middle;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    min-height: 60px;
    -ms-flex-pack: start;
        justify-content: start;
    -ms-flex-align: start;
        align-items: flex-start;
    font-size: 14px;
    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 {
    from { background-color: #800; }
    to { background-color: var(--timeline-background-color); }
}
.mx_MessageComposer_input_error {
    animation: 0.2s visualbell;
}
.mx_MessageComposer_input blockquote {
    color: var(--timeline-text-secondary-color);
    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: 0px;
    margin-top: 6px;
    margin-bottom: 6px;
    border: 0px;
    resize: none;
    outline: none;
    box-shadow: none;
    color: var(--timeline-text-color);
    background-color: var(--timeline-background-color);
    font-size: 14px;
    max-height: 120px;
    overflow: auto;
    /* needed for FF */
    font-family: Nunito, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', Arial, Helvetica, Sans-Serif;
}
/* hack for FF as vertical alignment of custom placeholder text is broken */
.mx_MessageComposer_input textarea::-moz-placeholder {
    line-height: 100%;
    color: var(--accent-color);
    opacity: 1.0;
}
.mx_MessageComposer_input textarea::-webkit-input-placeholder {
    color: var(--accent-color);
}
.mx_MessageComposer_button {
    margin-right: 12px;
    cursor: pointer;
    padding-top: 4px;
    height: 20px;
    width: 20px;
    background-color: #a1b2d1;
    -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_upload {
    -webkit-mask-image: url(../../img/feather-customised/paperclip.a368eb9.svg);
            mask-image: url(../../img/feather-customised/paperclip.a368eb9.svg);
}
.mx_MessageComposer_hangup {
    -webkit-mask-image: url(../../img/hangup.a9def68.svg);
            mask-image: url(../../img/hangup.a9def68.svg);
}
.mx_MessageComposer_voicecall {
    -webkit-mask-image: url(../../img/feather-customised/phone.87241fa.svg);
            mask-image: url(../../img/feather-customised/phone.87241fa.svg);
}
.mx_MessageComposer_videocall {
    -webkit-mask-image: url(../../img/feather-customised/video.02dbf40.svg);
            mask-image: url(../../img/feather-customised/video.02dbf40.svg);
}
.mx_MessageComposer_stickers {
    -webkit-mask-image: url(../../img/feather-customised/face.34d1316.svg);
            mask-image: url(../../img/feather-customised/face.34d1316.svg);
}
.mx_MessageComposer_formatting {
    cursor: pointer;
    margin: 0 11px;
    width: 24px;
    height: 18px;
}
.mx_MessageComposer_formatbar_wrapper {
    width: 100%;
    background-color: var(--timeline-background-color);
    box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08);
}
.mx_MessageComposer_formatbar {
    margin: auto;
    display: -ms-flexbox;
    display: flex;

    height: 30px;

    box-sizing: border-box;
    padding-left: 62px;

    -ms-flex-direction: row;

        flex-direction: row;
    -ms-flex-align: center;
        align-items: center;
    font-size: 10px;
    color: var(--timeline-text-secondary-color);
}
.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: #a1b2d1;
}
.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;
    }
/*
Copyright 2019 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_MessageComposerFormatBar {
    display: none;
    width: calc(26px * 5);
    height: 24px;
    position: absolute;
    cursor: pointer;
    border-radius: 4px;
    background-color: var(--timeline-background-color);
    -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 #616b7f;
        margin-left: -1px;
    }
.mx_MessageComposerFormatBar > *:hover {
            border-color: #a1b2d1;
        }
.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button {
        width: 27px;
        height: 24px;
        box-sizing: border-box;
    }
.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: var(--timeline-text-color);
    }
.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconBold::after {
        -webkit-mask-image: url(../../img/format/bold.38e6779.svg);
                mask-image: url(../../img/format/bold.38e6779.svg);
    }
.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconItalic::after {
        -webkit-mask-image: url(../../img/format/italics.4e279d1.svg);
                mask-image: url(../../img/format/italics.4e279d1.svg);
    }
.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconStrikethrough::after {
        -webkit-mask-image: url(../../img/format/strikethrough.bac51cb.svg);
                mask-image: url(../../img/format/strikethrough.bac51cb.svg);
    }
.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconQuote::after {
        -webkit-mask-image: url(../../img/format/quote.5843424.svg);
                mask-image: url(../../img/format/quote.5843424.svg);
    }
.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconCode::after {
        -webkit-mask-image: url(../../img/format/code.ea9f385.svg);
                mask-image: url(../../img/format/code.ea9f385.svg);
    }
.mx_MessageComposerFormatBar_buttonTooltip {
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    min-width: 54px;
    text-align: center;
}
.mx_MessageComposerFormatBar_buttonTooltip .mx_MessageComposerFormatBar_tooltipShortcut {
        font-size: 9px;
        opacity: 0.7;
    }
/*
Copyright 2017 Travis Ralston

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_PinnedEventTile {
    min-height: 40px;
    margin-bottom: 5px;
    width: 100%;
    border-radius: 5px;
}
.mx_PinnedEventTile:hover {
    background-color: var(--roomlist-background-color);
}
.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;
}
/*
Copyright 2017 Travis Ralston

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_PinnedEventsPanel {
    border-top: 1px solid var(--roomlist-separator-color);
}
.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;
}
/*
Copyright 2016 OpenMarket Ltd

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_PresenceLabel {
    font-size: 11px;
    opacity: 0.5;
}
/*
Copyright 2018 Vector Creations Ltd

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_ReplyPreview {
    position: absolute;
    bottom: 0;
    z-index: 1000;
    width: 100%;
    border: 1px solid var(--roomlist-separator-color);
    background: var(--timeline-background-color);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    max-height: 50vh;
    overflow: auto;
}
.mx_ReplyPreview_section {
    border-bottom: 1px solid var(--roomlist-separator-color);
}
.mx_ReplyPreview_header {
    margin: 12px;
    color: var(--timeline-text-color);
    font-weight: 400;
    opacity: 0.4;
}
.mx_ReplyPreview_title {
    float: left;
}
.mx_ReplyPreview_cancel {
    float: right;
    cursor: pointer;
}
.mx_ReplyPreview_clear {
    clear: both;
}
/*
Copyright 2019 New Vector Ltd

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_RoomBreadcrumbs {
    position: relative;
    height: 42px;
    padding: 8px;
    padding-bottom: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    background:
        radial-gradient(
            circle at center,
            #272c35,
            #272c35 15px,
            transparent 16px
        );
    background-size: 36px;
    background-position: 6px -1px;
    background-repeat: repeat-x;
    overflow-x: hidden;
}
.mx_RoomBreadcrumbs:hover {
        overflow-x: visible;
    }
.mx_RoomBreadcrumbs .mx_AutoHideScrollbar_offset {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: row;
            flex-direction: row;
        height: 100%;
    }
.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_crumb {
        margin-left: 4px;
        height: 32px;
        display: inline-block;
        transition: transform 0.3s, width 0.3s;
        position: relative;
    }
.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_crumb .mx_RoomTile_badge {
            position: absolute;
            top: -3px;
            right: -4px;
        }
.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_crumb .mx_RoomBreadcrumbs_dmIndicator {
            position: absolute;
            bottom: 0;
            right: -4px;
        }
.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_animate {
        margin-left: 0;
        width: 32px;
        transform: scale(1);
    }
.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_preAnimate {
        width: 0;
        transform: scale(0);
    }
.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_left {
        opacity: 0.5;
    }
.mx_RoomBreadcrumbs .mx_IndicatorScrollbar_leftOverflowIndicator, .mx_RoomBreadcrumbs .mx_IndicatorScrollbar_rightOverflowIndicator {
        display: none;
    }
.mx_RoomBreadcrumbs .mx_IndicatorScrollbar_leftOverflowIndicator {
        background: linear-gradient(to left, var(--roomlist-background-color-0pct), var(--roomlist-background-color));
    }
.mx_RoomBreadcrumbs .mx_IndicatorScrollbar_rightOverflowIndicator {
        background: linear-gradient(to right, var(--roomlist-background-color-0pct), var(--roomlist-background-color));
    }
.mx_RoomBreadcrumbs.mx_IndicatorScrollbar_leftOverflow .mx_IndicatorScrollbar_leftOverflowIndicator, .mx_RoomBreadcrumbs.mx_IndicatorScrollbar_rightOverflow .mx_IndicatorScrollbar_rightOverflowIndicator {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 15px;
        display: block;
        pointer-events: none;
        z-index: 100;
    }
/*
Copyright 2015, 2016 OpenMarket Ltd

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_RoomDropTarget_container {
    background-color: var(--roomlist-background-color);
    padding-left: 18px;
    padding-right: 18px;
    padding-top: 8px;
    padding-bottom: 7px;
}
.collapsed .mx_RoomDropTarget_container {
    padding-right: 10px;
    padding-left: 10px;
}
.mx_RoomDropTarget {
    font-size: 13px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px dashed var(--accent-color);
    color: var(--timeline-text-color);
    background-color: var(--timeline-background-color-50pct);
    border-radius: 4px;
}
.mx_RoomDropTarget_label {
    position: relative;
    margin-top: 3px;
    line-height: 21px;
    z-index: 1;
    text-align: center;
}
.collapsed .mx_RoomDropTarget_avatar {
    float: none;
}
.collapsed .mx_RoomDropTarget_label {
    display: none;
}
/*
Copyright 2015, 2016 OpenMarket Ltd

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_RoomHeader {
    -ms-flex: 0 0 52px;
        flex: 0 0 52px;
    border-bottom: 1px solid var(--roomlist-separator-color);
}
.mx_RoomHeader_wrapper {
    margin: auto;
    height: 52px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    min-width: 0;
    padding: 0 10px 0 19px;
}
.mx_RoomHeader_spinner {
    -ms-flex: 1;
        flex: 1;
    height: 36px;
    padding-left: 12px;
    padding-right: 12px;
}
.mx_RoomHeader_textButton {
    /* align images in buttons (eg spinners) */
    vertical-align: middle;
    border: 0px;
    border-radius: 4px;
    font-family: Nunito, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', Arial, Helvetica, Sans-Serif;
    font-size: 14px;
    color: white;
    background-color: #03b381;
    width: auto;
    padding: 7px;
    padding-left: 1.5em;
    padding-right: 1.5em;
    cursor: pointer;
    display: inline-block;
    outline: none;
    margin-right: 8px;
    margin-top: -5px;
}
.mx_RoomHeader_textButton:hover {
}
.mx_RoomHeader_textButton_danger {
    background-color: var(--warning-color);
}
.mx_RoomHeader_cancelButton {
    cursor: pointer;
    padding-left: 12px;
    padding-right: 12px;
}
.mx_RoomHeader_buttons {
    display: -ms-flexbox;
    display: flex;
    background-color: var(--timeline-background-color);
    padding-right: 5px;
}
.mx_RoomHeader_info {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1;
        flex: 1;
    -ms-flex-align: center;
        align-items: center;
}
.mx_RoomHeader_simpleHeader {
    line-height: 52px;
    color: var(--timeline-text-color);
    font-size: 18px;
    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 {
    -ms-flex: 0 1 auto;
        flex: 0 1 auto;
    overflow: hidden;
    color: var(--timeline-text-color);
    font-weight: 600;
    font-size: 18px;
    margin: 0 7px;
    border-bottom: 1px solid transparent;
    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: normal;
    opacity: 0.6;
}
.mx_RoomHeader_name, .mx_RoomHeader_avatar, .mx_RoomHeader_avatarPicker, .mx_RoomHeader_avatarPicker_edit, .mx_RoomHeader_avatarPicker_remove {
    cursor: pointer;
}
.mx_RoomHeader_avatarPicker_remove {
    position: absolute;
    top: -11px;
    right: -9px;
}
.mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable) {
    color: var(--accent-color);
}
.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 var(--accent-color) !important;
    outline: none;
    box-shadow: none;
}
.mx_RoomHeader_topic {
    -ms-flex: 1;
        flex: 1;
    color: var(--timeline-text-color-50pct);
    font-weight: 400;
    font-size: 13px;
    margin: 0 7px;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid transparent;
    line-height: 1.2em;
    max-height: 2.4em;
}
.mx_RoomHeader_avatar {
    -ms-flex: 0;
        flex: 0;
    width: 28px;
    height: 28px;
    margin: 0 7px;
}
.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 {
    margin-left: 10px;
    cursor: pointer;
    height: 20px;
    width: 20px;
    background-color: #a1b2d1;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}
.mx_RoomHeader_settingsButton {
    -webkit-mask-image: url(../../img/feather-customised/settings.cc405e6.svg);
            mask-image: url(../../img/feather-customised/settings.cc405e6.svg);
}
.mx_RoomHeader_forgetButton {
    -webkit-mask-image: url(../../img/leave.96c4dc4.svg);
            mask-image: url(../../img/leave.96c4dc4.svg);
    width: 26px;
}
.mx_RoomHeader_searchButton {
    -webkit-mask-image: url(../../img/feather-customised/search.28e7db7.svg);
            mask-image: url(../../img/feather-customised/search.28e7db7.svg);
}
.mx_RoomHeader_shareButton {
    -webkit-mask-image: url(../../img/feather-customised/share.9dc5acb.svg);
            mask-image: url(../../img/feather-customised/share.9dc5acb.svg);
}
.mx_RoomHeader_manageIntegsButton {
    -webkit-mask-image: url(../../img/feather-customised/grid.9e353ed.svg);
            mask-image: url(../../img/feather-customised/grid.9e353ed.svg);
}
.mx_RoomHeader_showPanel {
    height: 16px;
}
.mx_RoomHeader_voipButton {
    display: table-cell;
}
.mx_RoomHeader_voipButtons {
    margin-top: 18px;
}
.mx_RoomHeader_pinnedButton {
    position: relative;
    -webkit-mask-image: url(../../img/icons-pin.1d9bacf.svg);
            mask-image: url(../../img/icons-pin.1d9bacf.svg);
}
.mx_RoomHeader_pinsIndicator {
    position: absolute;
    right: 0;
    bottom: 4px;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background-color: var(--timeline-text-secondary-color);
}
.mx_RoomHeader_pinsIndicatorUnread {
    background-color: var(--warning-color);
}
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2017 Vector Creations Ltd

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_RoomList {
    /* take up remaining space below TopLeftMenu */
    -ms-flex: 1;
        flex: 1;
    min-height: 0;
    overflow-y: hidden;
}
.mx_RoomList .mx_ResizeHandle {
    position: relative;
}
/* hide resize handles next to collapsed / empty sublists */
.mx_RoomList .mx_RoomSubList:not(.mx_RoomSubList_nonEmpty) + .mx_ResizeHandle {
    display: none;
}
.mx_RoomList_expandButton {
    margin-left: 8px;
    cursor: pointer;
    padding-left: 12px;
    padding-right: 12px;
}
.mx_RoomList_emptySubListTip_container {
    padding-left: 18px;
    padding-right: 18px;
    padding-top: 8px;
    padding-bottom: 7px;
}
.mx_RoomList_emptySubListTip {
    font-size: 13px;
    padding: 5px;
    border: 1px dashed var(--accent-color);
    color: var(--timeline-text-color);
    background-color: var(--timeline-background-color-50pct);
    border-radius: 4px;
    line-height: 16px;
}
.mx_RoomList_emptySubListTip .mx_RoleButton {
    vertical-align: -2px;
}
.mx_RoomList_headerButtons {
    position: absolute;
    right: 60px;
}
/*
Copyright 2015, 2016 OpenMarket Ltd

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_RoomPreviewBar {
    -ms-flex: 0 0 auto;
        flex: 0 0 auto;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: center;
        justify-content: center;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
}
.mx_RoomPreviewBar h3 {
        font-size: 18px;
        font-weight: 600;
    }
.mx_RoomPreviewBar h3.mx_RoomPreviewBar_spinnerTitle {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: row;
                flex-direction: row;
            -ms-flex-align: center;
                align-items: center;
        }
.mx_RoomPreviewBar .mx_Spinner {
        width: auto;
        height: auto;
        margin: 10px 10px 10px 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    }
.mx_RoomPreviewBar .mx_RoomPreviewBar_footer {
        font-size: 12px;
        line-height: 20px;
    }
.mx_RoomPreviewBar .mx_RoomPreviewBar_footer .mx_Spinner {
            vertical-align: middle;
            display: inline-block;
        }
.mx_RoomPreviewBar_dark {
    background-color: var(--sidebar-color);
    color: #ffffff;
}
.mx_RoomPreviewBar_actions {
    display: -ms-flexbox;
    display: flex;
}
.mx_RoomPreviewBar_message {
    display: -ms-flexbox;
    display: flex;
    -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 var(--roomlist-separator-color);

    -ms-flex-direction: row;

        flex-direction: row;
}
.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions {
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
        -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 {
        -ms-flex: 1 0 0px;
            flex: 1 0 0;
        min-width: 0;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
            flex-direction: column;
    }
.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message > * {
            margin: 4px;
        }
.mx_RoomPreviewBar_dialog {
    margin: auto;
    box-sizing: content;
    width: 400px;
    border-radius: 4px;
    -ms-flex-direction: column;
        flex-direction: column;
    padding: 20px;
    text-align: center;
}
.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message {
        -ms-flex-direction: column;
            flex-direction: column;
    }
.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message > * {
            margin: 5px 0 20px 0;
        }
.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions {
        -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_inviter {
    font-weight: 600;
}
a.mx_RoomPreviewBar_inviter {
    text-decoration: underline;
    cursor: pointer;
}
/*
Copyright 2018 New Vector Ltd

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_RoomRecoveryReminder {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    text-align: center;
    background-color: #22262e;
    padding: 20px;
    border: 1px solid var(--roomlist-separator-color);
    border-bottom: unset;
}
.mx_RoomRecoveryReminder_header {
    font-weight: bold;
    margin-bottom: 1em;
}
.mx_RoomRecoveryReminder_body {
    margin-bottom: 1em;
}
.mx_RoomRecoveryReminder_button {
    /* align images in buttons (eg spinners) */
    vertical-align: middle;
    border: 0px;
    border-radius: 4px;
    font-family: Nunito, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', Arial, Helvetica, Sans-Serif;
    font-size: 14px;
    color: white;
    background-color: #03b381;
    width: auto;
    padding: 7px;
    padding-left: 1.5em;
    padding-right: 1.5em;
    cursor: pointer;
    display: inline-block;
    outline: none;
    margin: 0 10px;
}
.mx_RoomRecoveryReminder_secondary {
    font-size: 90%;
}
/*
Copyright 2015, 2016 OpenMarket Ltd

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_RoomTile {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-align: center;
        align-items: center;
    cursor: pointer;
    height: 34px;
    margin: 0;
    padding: 0 8px 0 10px;
    position: relative;
}
.mx_RoomTile:focus {
    filter: none !important;
    background-color: var(--timeline-background-color);
}
.mx_RoomTile_menuButton {
    display: none;
    -ms-flex: 0 0 16px;
        flex: 0 0 16px;
    height: 16px;
    background-image: url(../../img/icon_context.f8baf8d.svg);
    background-repeat: no-repeat;
    background-position: center;
}
.mx_RoomTile_tooltip {
    display: inline-block;
    position: relative;
    top: -54px;
    left: -12px;
}
.mx_RoomTile_nameContainer {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex: 1;
        flex: 1;
    vertical-align: middle;
    min-width: 0;
}
.mx_RoomTile_labelContainer {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex: 1;
        flex: 1;
    min-width: 0;
}
.mx_RoomTile_subtext {
    display: inline-block;
    font-size: 11px;
    padding: 0 0 0 7px;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
    position: relative;
    bottom: 4px;
}
.mx_RoomTile_avatar_container {
    position: relative;
}
.mx_RoomTile_avatar {
    -ms-flex: 0;
        flex: 0;
    padding: 4px;
    width: 24px;
    vertical-align: middle;
}
.mx_RoomTile_hasSubtext .mx_RoomTile_avatar {
    padding-top: 0;
    vertical-align: super;
}
.mx_RoomTile_dm {
    display: block;
    position: absolute;
    bottom: 0;
    right: -5px;
    z-index: 2;
}
.mx_RoomTile_name {
    font-size: 14px;
    padding: 0 6px;
    color: var(--roomlist-text-secondary-color);
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}
.mx_RoomTile_badge {
    -ms-flex: 0 1 content;
        flex: 0 1 content;
    border-radius: 0.8em;
    padding: 0 0.4em;
    color: var(--roomlist-background-color);
    font-weight: 600;
    font-size: 12px;
}
.collapsed .mx_RoomTile {
        margin: 0 6px;
        padding: 0 2px;
        position: relative;
        -ms-flex-pack: center;
            justify-content: center;
    }
.collapsed .mx_RoomTile_name {
        display: none;
    }
.collapsed .mx_RoomTile_badge {
        position: absolute;
        right: 6px;
        top: 0px;
        border-radius: 16px;
        z-index: 3;
        border: 0.18em solid var(--roomlist-background-color);
    }
.collapsed .mx_RoomTile_menuButton {
        display: none;
    }
.mx_RoomTile_menuDisplayed .mx_RoomTile_menuButton, .mx_LeftPanel_container:not(.collapsed) .mx_RoomTile:hover .mx_RoomTile_menuButton {
        display: block;
    }
.mx_RoomTile_unreadNotify .mx_RoomTile_badge, .mx_RoomTile_badge.mx_RoomTile_badgeUnread {
    background-color: var(--roomlist-text-secondary-color);
}
.mx_RoomTile_highlight .mx_RoomTile_badge, .mx_RoomTile_badge.mx_RoomTile_badgeRed {
    color: #ffffff;
    background-color: var(--warning-color);
}
.mx_RoomTile_unread .mx_RoomTile_name, .mx_RoomTile_highlight .mx_RoomTile_name {
        font-weight: 600;
        color: var(--roomlist-text-color);
    }
.mx_RoomTile_selected {
    border-radius: 4px;
    background-color: var(--roomlist-highlights-color);
}
.mx_DNDRoomTile {
    transform: none;
    transition: transform 0.2s;
}
.mx_DNDRoomTile_dragging {
    transform: scale(1.05, 1.05);
}
.mx_RoomTile_arrow {
    position: absolute;
    right: 0px;
}
.mx_RoomTile.mx_RoomTile_transparent {
    background-color: transparent;
}
.mx_RoomTile.mx_RoomTile_transparent:focus {
    background-color: rgba(0, 0, 0, 0.1);
}
.mx_GroupInviteTile .mx_RoomTile_name {
    -ms-flex: 1;
        flex: 1;
}
/*
Copyright 2018 New Vector Ltd

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_RoomUpgradeWarningBar {
    max-height: 235px;
    background-color: #22262e;
    padding-left: 20px;
    padding-right: 20px;
    overflow: scroll;
}
.mx_RoomUpgradeWarningBar_wrapped {
    width: 100%;
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: center;
        justify-content: center;
    -webkit-align-items: center;
}
.mx_RoomUpgradeWarningBar_header {
    color: var(--warning-color);
    font-weight: bold;
}
.mx_RoomUpgradeWarningBar_body {
    color: var(--warning-color);
}
.mx_RoomUpgradeWarningBar_upgradelink {
    color: var(--warning-color);
    text-decoration: underline;
}
.mx_RoomUpgradeWarningBar_small {
    color: var(--timeline-text-secondary-color);
    font-size: 70%;
}
/*
Copyright 2015, 2016 OpenMarket Ltd

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_SearchBar {
    height: 56px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    border-bottom: 1px solid var(--roomlist-separator-color);
}
.mx_SearchBar .mx_SearchBar_input {
        -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: var(--accent-color);
        -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_button {
        border: 0;
        margin: 0 0 0 22px;
        padding: 5px;
        font-size: 15px;
        cursor: pointer;
        color: var(--timeline-text-color);
        border-bottom: 2px solid var(--accent-color);
        font-weight: 600;
    }
.mx_SearchBar .mx_SearchBar_unselected {
        color: #61708b;
        border-color: transparent;
    }
.mx_SearchBar .mx_SearchBar_cancel {
        background-color: var(--warning-color);
        -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;
    }
/*
Copyright 2016 OpenMarket Ltd

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_SearchableEntityList {
    display: -ms-flexbox;
    display: flex;

    -ms-flex-direction: column;

        flex-direction: column;
}
.mx_SearchableEntityList_query {
    font-family: Nunito, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', Arial, Helvetica, Sans-Serif;
    border-radius: 3px;
    border: 1px solid #e7e7e7;
    padding: 9px;
    color: var(--timeline-text-color);
    background-color: var(--timeline-background-color);
    margin-left: 3px;
    font-size: 15px;
    margin-bottom: 8px;
    width: 189px;
}
.mx_SearchableEntityList_query::-moz-placeholder {
    color: var(--timeline-text-color);
    opacity: 0.5;
    font-size: 12px;
}
.mx_SearchableEntityList_query::-webkit-input-placeholder {
    color: var(--timeline-text-color);
    opacity: 0.5;
    font-size: 12px;
}
.mx_SearchableEntityList_listWrapper {
    -ms-flex: 1;
        flex: 1;

    overflow-y: auto;
}
.mx_SearchableEntityList_list {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.mx_SearchableEntityList_list .mx_EntityTile_chevron {
    display: none;
}
.mx_SearchableEntityList_hrWrapper {
    width: 100%;
    -ms-flex: 0 0 auto;
        flex: 0 0 auto;
}
.mx_SearchableEntityList hr {
    height: 1px;
    border: 0px;
    color: var(--timeline-text-color);
    background-color: var(--timeline-text-color);
    margin-right: 15px;
    margin-top: 11px;
    margin-bottom: 11px;
}
/*
Copyright 2019 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_SendMessageComposer {
    -ms-flex: 1;
        flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    font-size: 14px;
    -ms-flex-pack: center;
        justify-content: center;
    margin-right: 6px;
    min-width: 0;
}
.mx_SendMessageComposer .mx_BasicMessageComposer {
        -ms-flex: 1;
            flex: 1;
        display: -ms-flexbox;
        display: flex;
        -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_SendMessageComposer .mx_SendMessageComposer_overlayWrapper {
        position: relative;
        height: 0;
    }
.mx_Stickers_content {
    overflow: hidden;
}
.mx_Stickers_content_container {
    overflow: hidden;
    height: 300px;
}
#mx_persistedElement_stickerPicker .mx_AppTileFullWidth {
    height: unset;
    box-sizing: border-box;
    border-left: none;
    border-right: none;
    border-bottom: none;
}
.mx_Stickers_contentPlaceholder {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-positive: 1;
        flex-grow: 1;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-align: center;
        align-items: 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;
    text-decoration: underline;
}
.mx_Stickers_hideStickers {
    z-index: 2001;
}
/*
Copyright 2016 OpenMarket Ltd

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.
*/
@charset "utf-8";
.mx_TopUnreadMessagesBar {
    z-index: 1000;
    position: absolute;
    top: 24px;
    right: 24px;
    width: 38px;
}
.mx_TopUnreadMessagesBar::after {
    content: "·";
    position: absolute;
    top: -8px;
    left: 11px;
    width: 16px;
    height: 16px;
    border-radius: 16px;
    font-weight: 600;
    font-size: 30px;
    line-height: 14px;
    text-align: center;
    color: var(--roomlist-background-color);
    background-color: var(--accent-color);
}
.mx_TopUnreadMessagesBar_scrollUp {
    height: 38px;
    border-radius: 19px;
    box-sizing: border-box;
    background: var(--timeline-background-color);
    border: 1.3px solid var(--roomlist-text-secondary-color);
    cursor: pointer;
}
.mx_TopUnreadMessagesBar_scrollUp::before {
    content: "";
    position: absolute;
    width: 38px;
    height: 38px;
    -webkit-mask: url(../../img/icon-jump-to-first-unread.2401872.svg);
            mask: url(../../img/icon-jump-to-first-unread.2401872.svg);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: 9px 13px;
            mask-position: 9px 13px;
    background: var(--roomlist-text-secondary-color);
}
/*
Copyright 2018 New Vector Ltd

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_WhoIsTypingTile {
    margin-left: -18px;
    padding-top: 18px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
}
/* position the indicator in the same place horizontally as .mx_EventTile_avatar. */
.mx_WhoIsTypingTile_avatars {
    -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_image {
    border: 1px solid var(--timeline-background-color);
}
.mx_WhoIsTypingTile_avatars .mx_BaseAvatar_initial {
    padding-top: 1px;
}
.mx_WhoIsTypingTile_remainingAvatarPlaceholder {
    position: relative;
    display: inline-block;
    color: #acacac;
    background-color: #ddd;
    border: 1px solid var(--timeline-background-color);
    border-radius: 40px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    font-size: 0.8em;
    vertical-align: top;
    text-align: center;
}
.mx_WhoIsTypingTile_label {
    -ms-flex: 1;
        flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #a1b2d1;
}
.mx_WhoIsTypingTile_label > span {
    background-image: url(../../img/typing-indicator-2x.0eb9f0e.gif);
    background-size: 25px;
    background-position: left bottom;
    background-repeat: no-repeat;
    padding-bottom: 15px;
    display: block;
}
.mx_MatrixChat_useCompactLayout .mx_WhoIsTypingTile {
        padding-top: 4px;
    }
/*
Copyright 2016 OpenMarket Ltd

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_DevicesPanel {
    display: table;
    table-layout: fixed;
    width: 880px;
    border-spacing: 2px;
}
.mx_DevicesPanel_header {
    display: table-header-group;
    font-weight: bold;
}
.mx_DevicesPanel_header > .mx_DevicesPanel_deviceButtons {
    height: 48px;
}
.mx_DevicesPanel_header > div {
    display: table-cell;
    vertical-align: bottom;
}
.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: bold;
}
/*
Copyright 2019 New Vector Ltd
Copyright 2019 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_ExistingEmailAddress {
    display: -ms-flexbox;
    display: flex;
    -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 {
    -ms-flex: 1;
        flex: 1;
    margin-right: 10px;
}
.mx_ExistingEmailAddress_confirmBtn {
    margin-left: 5px;
}
/*
Copyright 2015, 2016 OpenMarket Ltd

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_IntegrationsManager .mx_Dialog {
    width: 60%;
    height: 70%;
    overflow: hidden;
    padding: 0px;
    max-width: initial;
    max-height: initial;
}
.mx_IntegrationsManager iframe {
    background-color: #fff;
    border: 0px;
    width: 100%;
    height: 100%;
}
.mx_IntegrationsManager_loading h3 {
    text-align: center;
}
.mx_IntegrationsManager_error {
    text-align: center;
    padding-top: 20px;
}
.mx_IntegrationsManager_error h3 {
    color: var(--warning-color);
}
/*
Copyright 2018 New Vector Ltd

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_KeyBackupPanel_sigValid, .mx_KeyBackupPanel_sigInvalid, .mx_KeyBackupPanel_deviceVerified, .mx_KeyBackupPanel_deviceNotVerified {
    font-weight: bold;
}
.mx_KeyBackupPanel_sigValid, .mx_KeyBackupPanel_deviceVerified {
    color: #76cfa5;
}
.mx_KeyBackupPanel_sigInvalid, .mx_KeyBackupPanel_deviceNotVerified {
    color: #ba6363;
}
.mx_KeyBackupPanel_deviceName {
    font-style: italic;
}
/*
Copyright 2015, 2016 OpenMarket Ltd

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_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: bold;
}
.mx_UserNotifSettings_pushRulesTable tbody th {
    font-weight: 400;
}
.mx_UserNotifSettings_pushRulesTable tbody th:first-child {
    text-align: left;
}
.mx_UserNotifSettings_keywords {
    cursor: pointer;
    color: var(--accent-color);
}
.mx_UserNotifSettings_devicesTable td {
    padding-left: 20px;
    padding-right: 20px;
}
.mx_UserNotifSettings_notifTable {
    display: table;
}
.mx_UserNotifSettings_notifTable .mx_Spinner {
    position: absolute;
}
.mx_NotificationSound_soundUpload {
    display: none;
}
.mx_NotificationSound_browse {
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    background-color: transparent;
}
.mx_NotificationSound_save {
    margin-left: 5px;
    color: white;
    background-color: var(--accent-color);
}
.mx_NotificationSound_resetSound {
    margin-top: 5px;
    color: white;
    border: var(--warning-color);
    background-color: var(--warning-color);
}
/*
Copyright 2019 New Vector Ltd
Copyright 2019 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_ExistingPhoneNumber {
    display: -ms-flexbox;
    display: flex;
    -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 {
    -ms-flex: 1;
        flex: 1;
    margin-right: 10px;
}
.mx_ExistingPhoneNumber_confirmBtn {
    margin-left: 5px;
}
.mx_ExistingPhoneNumber_verification {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
        align-items: center;
}
.mx_ExistingPhoneNumber_verification .mx_Field {
        margin: 0 0 0 1em;
    }
.mx_PhoneNumbers_input {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
}
.mx_PhoneNumbers_input > .mx_Field {
    -ms-flex-positive: 1;
        flex-grow: 1;
}
.mx_PhoneNumbers_country {
    width: 80px;
}
/*
Copyright 2019 New Vector Ltd

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_ProfileSettings_profile {
    display: -ms-flexbox;
    display: flex;
}
.mx_ProfileSettings_controls {
    -ms-flex-positive: 1;
        flex-grow: 1;
}
.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_avatar {
    width: 88px;
    height: 88px;
    margin-left: 13px;
    position: relative;
}
.mx_ProfileSettings_avatar > * {
    display: block;
    width: 88px;
    height: 88px;
    border-radius: 4px;
}
.mx_ProfileSettings_avatar .mx_ProfileSettings_avatarOverlay_disabled {
    cursor: default;
}
.mx_ProfileSettings_avatar .mx_ProfileSettings_avatarPlaceholder {
    background-color: #e7e7e7;
}
.mx_ProfileSettings_avatarOverlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    text-align: center;
    vertical-align: middle;
    font-size: 10px;
    cursor: pointer;
}
.mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlay:not(.mx_ProfileSettings_avatarOverlay_disabled) {
    display: inline-block;
    opacity: 0.5 !important;
    color: #fff !important;
    background-color: #000 !important;
}
.mx_ProfileSettings_avatarOverlay_show {
    display: inline-block;
    opacity: 1;
    color: var(--timeline-text-color);
    background-color: transparent;
}
.mx_ProfileSettings_avatarOverlayText {
    display: block;
    margin-top: 17px;
    margin-bottom: 8px;
}
.mx_ProfileSettings_noAvatarText {
    display: block;
    margin: 34px auto auto;
}
.mx_ProfileSettings_avatarOverlayImgContainer {
    position: relative;
    width: 14px;
    height: 14px;
    margin: auto;
}
.mx_ProfileSettings_avatarOverlayImg::before {
    background-color: var(--timeline-text-color);
    -webkit-mask: url(../../img/feather-customised/upload.a4ce82a.svg);
            mask: url(../../img/feather-customised/upload.a4ce82a.svg);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 14px;
            mask-size: 14px;
    -webkit-mask-position: center;
            mask-position: center;
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlayImg::before {
    background-color: #fff !important;
}
.mx_ProfileSettings_avatarUpload {
    display: none;
}
/*
Copyright 2019 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_SetIdServer .mx_Field_input {
    margin-right: 100px;
}
.mx_SetIdServer_tooltip {
    max-width: 120px;
}
/*
Copyright 2019 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_SetIntegrationManager .mx_Field_input {
    margin-right: 100px;
}
.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_tooltip {
    max-width: 120px;
}
/*
Copyright 2019 New Vector Ltd

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_SettingsTab_warningText {
    color: var(--warning-color);
}
.mx_SettingsTab_heading {
    font-size: 20px;
    font-weight: 600;
    color: var(--timeline-text-color);
}
.mx_SettingsTab_heading:nth-child(n + 2) {
    margin-top: 30px;
}
.mx_SettingsTab_subheading {
    font-size: 16px;
    display: block;
    font-family: Nunito, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', Arial, Helvetica, Sans-Serif;
    font-weight: 600;
    color: var(--timeline-text-color);
    margin-bottom: 10px;
    margin-top: 12px;
}
.mx_SettingsTab_subsectionText {
    color: var(--timeline-text-secondary-color);
    font-size: 14px;
    display: block;
    margin: 10px 100px 10px 0;
}
.mx_SettingsTab_section .mx_SettingsFlag {
    margin-right: 100px;
    margin-bottom: 10px;
}
.mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label {
    vertical-align: middle;
    display: inline-block;
    font-size: 14px;
    color: var(--timeline-text-color);
    max-width: calc(100% - 48px);
    box-sizing: border-box;
    padding-right: 10px;
}
.mx_SettingsTab_section .mx_SettingsFlag .mx_ToggleSwitch {
    float: right;
}
.mx_SettingsTab_linkBtn {
    cursor: pointer;
    color: var(--accent-color);
    word-break: break-all;
}
.mx_SettingsTab a {
    color: var(--primary-color);
}
/*
Copyright 2019 New Vector Ltd

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_GeneralRoomSettingsTab_profileSection {
    margin-top: 10px;
}
/*
Copyright 2019 New Vector Ltd

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_RolesRoomSettingsTab ul {
    margin-bottom: 0;
}
.mx_RolesRoomSettingsTab_unbanBtn {
    margin-right: 10px;
    margin-bottom: 5px;
}
/*
Copyright 2019 New Vector Ltd

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_SecurityRoomSettingsTab label {
    display: block;
}
.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;
}
/*
Copyright 2019 New Vector Ltd

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_GeneralUserSettingsTab_changePassword .mx_Field, .mx_GeneralUserSettingsTab_themeSection .mx_Field {
    margin-right: 100px;
}
.mx_GeneralUserSettingsTab_changePassword .mx_Field:first-child {
    margin-top: 0;
}
.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;
}
/*
Copyright 2019 New Vector Ltd

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_HelpUserSettingsTab_debugButton {
    margin-bottom: 5px;
    margin-top: 5px;
}
.mx_HelpUserSettingsTab span.mx_AccessibleButton {
    word-break: break-word;
}
/*
Copyright 2019 New Vector Ltd

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_NotificationUserSettingsTab .mx_SettingsTab_heading {
    margin-bottom: 10px;
}
/*
Copyright 2019 New Vector Ltd

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_PreferencesUserSettingsTab .mx_Field {
    margin-right: 100px;
}
/*
Copyright 2019 New Vector Ltd

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_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_importExportButtons .mx_AccessibleButton {
    margin-right: 10px;
}
.mx_SecurityUserSettingsTab_bulkOptions .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;
}
/*
Copyright 2019 New Vector Ltd

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_VoiceUserSettingsTab .mx_Field {
    margin-right: 100px;
}
.mx_VoiceUserSettingsTab_missingMediaPermissions {
    margin-bottom: 15px;
}
/*
Copyright 2019 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_InlineTermsAgreement_cbContainer {
    margin-bottom: 10px;
    font-size: 14px;
}
.mx_InlineTermsAgreement_cbContainer a {
        color: var(--accent-color);
        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: var(--accent-color);
    -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;
}
/*
Copyright 2019 New Vector Ltd.

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_VerificationShowSas_decimalSas {
    text-align: center;
    font-weight: bold;
    padding-left: 3px;
    padding-right: 3px;
}
.mx_VerificationShowSas_decimalSas span {
    margin-left: 5px;
    margin-right: 5px;
}
.mx_VerificationShowSas_emojiSas {
    text-align: center;
}
.mx_VerificationShowSas_emojiSas_block {
    display: inline-block;
    margin-left: 15px;
    margin-right: 15px;
    text-align: center;
    margin-bottom: 20px;
}
.mx_VerificationShowSas_emojiSas_emoji {
    font-size: 48px;
}
.mx_VerificationShowSas_emojiSas_label {
    text-align: center;
    font-weight: bold;
}
/*
Copyright 2015, 2016 OpenMarket Ltd

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_CallView_voice {
    background-color: var(--accent-color);
    color: #ffffff;
    cursor: pointer;
    text-align: center;
    padding: 6px;
    font-weight: bold;
    font-size: 13px;
}
/*
Copyright 2015, 2016 OpenMarket Ltd

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_IncomingCallBox {
    text-align: center;
    border: 1px solid #a4a4a4;
    border-radius: 8px;
    background-color: var(--timeline-background-color);
    position: fixed;
    z-index: 1000;
    padding: 6px;
    margin-top: -3px;
    margin-left: -20px;
    width: 200px;
}
.mx_IncomingCallBox_chevron {
    padding: 12px;
    position: absolute;
    left: -21px;
    top: 0px;
}
.mx_IncomingCallBox_title {
    padding: 6px;
    font-weight: bold;
}
.mx_IncomingCallBox_buttons {
    display: -ms-flexbox;
    display: flex;
}
.mx_IncomingCallBox_buttons_cell {
    vertical-align: middle;
    padding: 6px;
    -ms-flex: 1;
        flex: 1;
}
.mx_IncomingCallBox_buttons_decline, .mx_IncomingCallBox_buttons_accept {
    vertical-align: middle;
    width: 80px;
    height: 36px;
    line-height: 36px;
    border-radius: 36px;
    color: #ffffff;
    margin: auto;
}
.mx_IncomingCallBox_buttons_decline {
    background-color: #f48080;
}
.mx_IncomingCallBox_buttons_accept {
    background-color: #80f480;
}
/*
Copyright 2015, 2016 OpenMarket Ltd

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_VideoView {
    width: 100%;
    position: relative;
    z-index: 30;
}
.mx_VideoView video {
    width: 100%;
}
.mx_VideoView_remoteVideoFeed {
    width: 100%;
    background-color: #000;
    z-index: 50;
}
.mx_VideoView_localVideoFeed {
    width: 25%;
    height: 25%;
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 100;
}
.mx_VideoView_localVideoFeed video {
    width: auto;
    height: 100%;
}
.mx_VideoView_localVideoFeed.mx_VideoView_localVideoFeed_flipped video {
    transform: scale(-1, 1);
}

/*# sourceMappingURL=theme-dark-custom.css.map*/