/* the 'src' links are relative to the bundle.css, which is in a subdirectory. */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  src: url(../../fonts/Nunito_Sans/NunitoSans-Regular.621913f.ttf) format('truetype');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  src: url(../../fonts/Nunito_Sans/NunitoSans-SemiBold.a87aa3a.ttf) format('truetype');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  src: url(../../fonts/Nunito_Sans/NunitoSans-Bold.edcff47.ttf) format('truetype');
}
/* Nunito lacks combining diacritics, so these will fall through
   to the next font.  Helevetica's diacritics however do not combine
   nicely with Open Sans (on OSX, at least) and result in a huge
   horizontal mess.  Arial empirically gets it right, hence prioritising
   Arial here. */
/* Authentification Views */
/* Panels */
/* Left Panel */
/* Right Panel */
/* Device Panel */
/* inputs */
/* buttons */
/* avatars */
/* Timeline Components */
/* RoomHeader */
/* Message Composer */
/* Settings */
/* Editor */
/* AboutE2E */
/* KeyShareConfirmationDialog */
/* News */
/* Top Left Menu */
/* Hints */
/* OLD Authentification Views */
/* OLD inputs */
/* OLD buttons */
/*** ImageView ***/
/* Authentification Views */
/* Panels */
/* Left Panel */
/* Right Panel */
/* Device Panel */
/* inputs */
/* buttons */
/* avatars */
/* Timeline Components */
/* RoomHeader */
/* Message Composer */
/* Settings */
/* Editor */
/* AboutE2E */
/* KeyShareConfirmationDialog */
/* News */
/* Top Left Menu */
/* Hints */
/* OLD inputs */
.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;
        }
.mx_CitadelInput .input-wrapper .eye img {
    filter: invert(55%) sepia(25%) saturate(4308%) hue-rotate(207deg) brightness(103%) contrast(99%);
}
.mx_TabbedView_maskedIcon.mx_UserSettingsDialog_bellIcon:before, .tox .tox-tbtn svg {
    filter: invert(81%) sepia(25%) saturate(9%) hue-rotate(217deg) brightness(99%) contrast(97%);
}
/*
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 Sans', Arial, Helvetica, Sans-Serif;
    font-size: 14px;
    background-color: #2b2c32;
    color: #ffffff;
    border: 0;
    margin: 0;
}
.underline {
    text-decoration: underline;
}
.error { color: #ee6d6a; }
.warning { color: #ffbf7a; }
b {
    font-weight: bold;
}
h2 {
    color: #ffffff;
    font-weight: 400;
    font-size: 18px;
    margin-top: 16px;
    margin-bottom: 16px;
}
a, a:link, a:hover, a:visited {
    cursor: pointer;
    color: #7b8ffe;
    text-decoration: underline;
    font-weight: bold;
}
input[type=text], input[type=search], input[type=password] {
    padding: 7px;
    font-family: 'Nunito Sans', Arial, Helvetica, Sans-Serif;
    font-size: 12px;
    min-width: 0;
}
/* Required by Firefox */
textarea {
    font-family: 'Nunito Sans', Arial, Helvetica, Sans-Serif;
    color: #ffffff;
}
input[type=text], input[type=password], textarea {
    background-color: transparent;
    color: #ffffff;
}
input[type=password]::-ms-clear, input[type=password]::-ms-reveal {
    display: none;
}
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.b643d92.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: #ffffff;
}
input[type=submit]:focus, input[type=text]:focus, input[type=password]:focus, textarea:focus {
    outline: none;
    border-color: #7b8ffe;
}
/* Required by Firefox */
textarea {
    font-family: 'Nunito Sans', Arial, Helvetica, Sans-Serif;
    color: #ffffff;
}
.themed-svg { filter: brightness(0) saturate(100%) invert(81%) sepia(6%) saturate(14%) hue-rotate(202deg) brightness(103%) contrast(99%) }
.themed-highlighted-svg { filter: brightness(0) saturate(100%) invert(55%) sepia(25%) saturate(4308%) hue-rotate(207deg) brightness(103%) contrast(99%) }
.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput):not(.mx_CitadelInput input) > input[type=text], .mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput):not(.mx_CitadelInput input) > input[type=search], .mx_Dialog .mx_textinput, .mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput):not(.mx_CitadelInput input) > input[type=text], .mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput):not(.mx_CitadelInput input) > 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 .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: #ffffff;
        }
.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: #f2f5f8;
        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: #7b8ffe;
}
#mx_theme_secondaryAccentColor {
    color: #f9fafc;
}
#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;
}
/* Spinner Dialog overide */
.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog {
    width: auto;
    border-radius: 8px;
    padding: 0px;
    box-shadow: none;
}
.mx_Dialog {
    background-color: #2b2c32;
    z-index: 4012;
    font-weight: 300;
    font-size: 15px;
    position: relative;
    padding: 80px 125px 40px;
    max-height: 80%;
    box-shadow: 2px 15px 30px 0 rgba(0, 0, 0, 0.48);
    border-radius: 4px;
    overflow-y: auto;
}
.mx_Dialog .additional {
        margin-top: 8px;
    }
.mx_Dialog .mx_CitadelInput {
        margin-bottom: 24px;
    }
.mx_Dialog_fixedWidth {
    width: 400px
}
.mx_Dialog_staticWrapper .mx_Dialog {
    z-index: 4010;
}
.mx_Dialog_background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    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: 20px;
}
.mx_Dialog_title {
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
}
.mx_Dialog_header.mx_Dialog_headerWithButton > .mx_Dialog_title {
    text-align: center;
}
.mx_Dialog_title.danger {
    color: #ffbf7a;
}
.mx_Dialog_cancelButton {
    background: url(../../img/feather-customised/cancel-dark.26324a5.svg) no-repeat center;
    background-size: cover;
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 40px;
    right: 40px;
}
.mx_Dialog_reduceButton {
    background: url(../../img/reduce-dark.566a00e.svg) no-repeat center;
    background-size: cover;
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 40px;
    right: 84px;
}
.mx_Dialog_content {
    margin: 24px 0;
    font-size: 14px;
    color: #ffffff;
    word-wrap: break-word;
}
.mx_Dialog_buttons {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
}
.mx_Dialog_buttons .mx_Dialog_primary, .mx_Dialog_buttons .mx_Dialog_secondary, .mx_Dialog_buttons button {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
            align-items: center;
        -ms-flex-pack: center;
            justify-content: center;
    }
.mx_Dialog_buttons .mx_Dialog_primary, .mx_Dialog_buttons .mx_Dialog_secondary {
        margin-left: 8px;
    }
.mx_Dialog button, .mx_Dialog input[type="submit"] {
    font-weight: bold;
    font-size: 14px;
    border-radius: 50px;
    vertical-align: middle;
    display: -ms-flexbox;
    display: flex;
    outline: none;
    padding: 0 28px;
    cursor: pointer;
    min-height: 44px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    display: inline-block;
    margin-left: 0px;
    margin-right: 8px;
    border: 1px solid #7b8ffe !important;
    color: #7b8ffe;
    background-color: transparent;
}
.mx_Dialog button:last-child {
    margin-right: 0px;
}
.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: #7b8ffe;
}
.mx_Dialog button.danger, .mx_Dialog input[type="submit"].danger {
    background-color: #ffbf7a;
    border: solid 1px #ffbf7a !important;
    color: #ffffff;
}
.mx_Dialog button.danger, .mx_Dialog input[type="submit"].danger:hover {
    background-color: #ffbf7a !important;
}
.mx_Dialog button:disabled, .mx_Dialog input[type="submit"]:disabled {
    opacity: 0.7;
}
.mx_GeneralButton {
    font-weight: bold;
    font-size: 14px;
    border-radius: 50px;
    vertical-align: middle;
    display: -ms-flexbox;
    display: flex;
    outline: none;
    padding: 0 28px;
    cursor: pointer;
    min-height: 44px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    display: inline-block;
    display: inline;
    margin: auto;
}
.mx_linkButton {
    cursor: pointer;
    color: #7b8ffe;
}
.mx_linkButton {
    cursor: pointer;
    color: #4a5aa7;
}
.mx_TextInputDialog_label {
    text-align: left;
    padding-bottom: 12px;
}
.mx_TextInputDialog_input {
    font-size: 15px;
    border-radius: 3px;
    border: 1px solid #959598;
    padding: 9px;
    color: #ffffff;
    background-color: #2b2c32;
}
.mx_emojione {
    height: 1em;
    vertical-align: middle;
}
.mx_emojione_selected {
    background-color: #7b8ffe;
}
::-moz-selection {
    background-color: #7b8ffe;
    color: #ffffff;
}
::selection {
    background-color: #7b8ffe;
    color: #ffffff;
}
.mx_textButton {
    font-weight: bold;
    font-size: 14px;
    border-radius: 50px;
    vertical-align: middle;
    display: -ms-flexbox;
    display: flex;
    outline: none;
    padding: 0 28px;
    cursor: pointer;
    min-height: 44px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    display: inline-block;
    font-size: 15px;
    padding: 0 1.5em;
}
.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;
}
@keyframes fadein {
    from { opacity: 0; }
    to   { 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.
*/
/* 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_CitadelAccordion {
    background-color: #2b2c32;
}
.mx_CitadelAccordion .header {
        border-top: 1px solid #2b2c32;
        height: 40px;
        position: relative;
    }
.mx_CitadelAccordion .title {
        color: #ffffff;
        font-size: 14px;
        font-weight: bold;
        margin-left: 15px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
.mx_CitadelAccordionItem {
    border-top: 1px solid #2b2c32;
}
.mx_CitadelAccordionItem .item-header-container {
        height: 32px;
        position: relative;
        margin-left: 15px;
    }
.mx_CitadelAccordionItem .item-header-container .item-header {
            font-size: 12px;
            font-weight: bold;
            color: #7b8ffe;
            cursor: pointer;
            text-align: left;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            text-transform: uppercase;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
                align-items: center;
        }
.mx_CitadelAccordionItem .item-header-container .item-header .item-label {
                display: inline-block;
                margin-left: 15px;
                letter-spacing: 0.86px;
            }
.mx_CitadelAccordionItem .item-arrow {
        width: 9px;
        height: 9px;
        background-image: url(../../img/arrow-down-dark.9284e55.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }
.mx_CitadelAccordionItem.is-open .item-arrow {
            background-image: url(../../img/arrow-up-dark.3f4ba0b.svg);
        }
.mx_CitadelAccordionItem .item-content {
        background-color: #2b2c32;
    }
.browser-not-supported-page {
    background-color: #7b8ffe;
    width: 100%;
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
}
.browser-not-supported-page .browser-not-supported-content {
        width: 464px;
        padding: 40px 48px;
        position: relative;
        background-color: #2b2c32;
        color: #ffffff;
    }
.browser-not-supported-page .browser-not-supported-content .browser-not-supported-header {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-pack: center;
                justify-content: center;
            margin-bottom: 16px;
        }
.browser-not-supported-page .browser-not-supported-content .browser-not-supported-body {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-pack: center;
                justify-content: center;
            -ms-flex-direction: column;
                flex-direction: column;
        }
.browser-not-supported-page .browser-not-supported-content .browser-not-supported-body .title {
                font-size: 20px;
                font-weight: bold;
                line-height: 1.2;
                text-align: center;
                margin-bottom: 16px;
            }
.browser-not-supported-page .browser-not-supported-content .browser-not-supported-body .subtitle {
                text-align: center;
            }
.browser-not-supported-page .browser-not-supported-content .browser-not-supported-body .continue-form {
                display: -ms-flexbox;
                display: flex;
                -ms-flex-direction: column;
                    flex-direction: column;
                -ms-flex-align: center;
                    align-items: center;
            }
.browser-not-supported-page .browser-not-supported-content .browser-not-supported-body .continue-form button {
                    margin-top: 32px;
                    min-width: 138px;
                }
.browser-not-supported-page .browser-not-supported-content .browser-not-supported-body .continue-form button:focus {
                        outline: none;
                    }
.browser-not-supported-page .browser-not-supported-content .browser-not-supported-body .auth-footer-apps {
                position: relative;
                top: 35px;
            }
/*
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.
*/
/* Expected z-indexes for contextual menus:
    3500 - Default wrapper index
    3500 - Contextual menu background
    3501 - Contextual menu itself

   These are set up such that contextual menus always appear
   below dialogs if any.
 */
.mx_ContextualMenu_wrapper {
    position: fixed;
    z-index: 3500;
}
.mx_ContextualMenu_background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1.0;
    z-index: 3500;
}
.mx_ContextualMenu {
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
    background-color: #2b2c32;
    color: #ffffff;
    position: absolute;
    font-size: 14px;
    z-index: 3501;
}
.mx_ContextualMenu.mx_ContextualMenu_right {
    right: 8px;
}
.mx_ContextualMenu_chevron_right {
    position: absolute;
    right: -8px;
    top: 0;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-left: 8px solid #2b2c32;
    border-bottom: 8px solid transparent;
}
.mx_ContextualMenu_chevron_right::after {
    content: '';
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-left: 7px solid #2b2c32;
    border-bottom: 7px solid transparent;
    position: absolute;
    top: -7px;
    right: 1px;
}
.mx_ContextualMenu.mx_ContextualMenu_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 #2b2c32;
    border-bottom: 8px solid transparent;
}
.mx_ContextualMenu_chevron_left::after {
    content: '';
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-right: 7px solid #2b2c32;
    border-bottom: 7px solid transparent;
    position: absolute;
    top: -7px;
    left: 1px;
}
.mx_ContextualMenu.mx_ContextualMenu_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 #2b2c32;
    border-right: 8px solid transparent;
}
.mx_ContextualMenu_chevron_top::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-bottom: 7px solid #2b2c32;
    border-right: 7px solid transparent;
    position: absolute;
    left: -7px;
    top: 1px;
}
.mx_ContextualMenu.mx_ContextualMenu_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 #2b2c32;
    border-right: 8px solid transparent;
}
.mx_ContextualMenu_chevron_bottom::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-top: 7px solid #2b2c32;
    border-right: 7px solid transparent;
    position: absolute;
    left: -7px;
    bottom: 1px;
}
.mx_ContextualMenu_field {
    padding: 3px 6px 3px 6px;
    cursor: pointer;
    white-space: nowrap;
}
.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: #ffffff;
}
.mx_CreateRoom input, .mx_CreateRoom textarea {
    border-radius: 3px;
    border: 1px solid #55565b;
    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: #15171b;
    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 #ffbf7a;
    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;
    margin-right: 0 !important;
}
.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: #ffffff;
}
.mx_FilePanel .mx_EventTile .mx_MFileBody_downloadLink {
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    color: #c8c8cd;
}
.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: #ffffff;
}
.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: #ffffff;
}
/* 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: #2b2c32;
}
.mx_GenericErrorPage {
    width: 100%;
    height: 100%;
    background-color: #fff;
}
.mx_GenericErrorPage_box {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 500px;
    height: 200px;
    border: 1px solid #f22;
    padding: 10px;
    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 #16171e;
    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 #55565b !important;
    min-width: 150px;
    cursor: text;
}
.mx_GroupView_editable:focus {
    border-bottom: 1px solid #7b8ffe !important;
    outline: none;
    box-shadow: none;
}
.mx_GroupView_header_isUserMember .mx_GroupView_header_name:hover div:not(.mx_GroupView_editable) {
    color: #7b8ffe;
    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: #ffffff;
    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: #ffffff;
    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 #16171e;
}
.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: #7b8ffe;
}
.mx_GroupView_rooms .mx_RoomDetailList {
    -ms-flex-positive: 1;
        flex-grow: 1;
    border-top: 1px solid #16171e;
    padding-top: 10px;
    word-break: break-word;
}
.mx_GroupView .mx_RoomView_messageListWrapper {
    -ms-flex-pack: start;
        justify-content: flex-start;
}
.mx_GroupView_membershipSection {
    color: #888;
    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: #888;
    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;
    -ms-flex-align: center;
        align-items: center;
    border-left: 1px solid #16171e;
    height: 100%;
}
.mx_HeaderButtons_notCollapsed {
    border-bottom: 1px solid #2b2c32;
}
/*
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 {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}
.mx_HomePage iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
.mx_HomePage_body {
    height: 100%;
    width: 100%;
}
.mx_HomePage_logo .mx_HomePage_img {
    background-image: url(../../img/logo-dark.ca47a73.svg);
    height: 140px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
/* Additional css of home.citadel page */
.mx_HomePage_header h1, .mx_HomePage_container h2 {
    color: #7b8ffe;
}
.mx_HomePage_header p, .mx_HomePage_container_text, .mx_HomePage_footer a {
    color: #ffffff;
}
/*
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;
    width: 240px;
    -ms-flex: 0 0 auto;
        flex: 0 0 auto;
}
.mx_LeftPanel_container + .mx_ResizeHandle > div {
    background: none;
}
.mx_LeftPanel_container.collapsed {
    min-width: unset;
    /* Collapsed LeftPanel 70px */
    -ms-flex: 0 0 70px;
        flex: 0 0 70px;
}
.mx_LeftPanel_container.collapsed.mx_LeftPanel_container_hasTagPanel {
    /* TagPanel 70px + Collapsed LeftPanel 70px */
    -ms-flex: 0 0 140px;
        flex: 0 0 140px;
}
.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;
    background-color: #16171e;
}
.mx_LeftPanel .mx_textinput {
        background-color: #3b405b;
        height: 32px;
    }
.mx_LeftPanel :-ms-input-placeholder, .mx_LeftPanel .mx_textinput > input[type=text] {
        color: #d4d4d6;
        font-size: 14px;
    }
.mx_LeftPanel ::placeholder, .mx_LeftPanel .mx_textinput > input[type=text] {
        color: #d4d4d6;
        font-size: 14px;
    }
.mx_LeftPanel input[type=text].mx_textinput_icon.mx_textinput_search, .mx_LeftPanel input[type=search].mx_textinput_icon.mx_textinput_search {
        background-image: url(../../img/feather-customised/search-bis-dark.3f4a545.svg);
        background-size: 16px;
        background-position-x: 8px;
    }
.mx_LeftPanel .mx_SearchBox_closeButton {
        filter: invert(100%) brightness(300%);
    }
.mx_LeftPanel .publicRoomButton {
        height: 40px;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
            justify-content: center;
        -ms-flex-align: center;
            align-items: center;
        cursor: pointer;
        background-color: #45454b;
        font-weight: bold;
        color: #d4d4d6;
    }
.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 #16171e;
    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;
    }
/*
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: #2b2c32;

    -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: #3c4556;
    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: #888;
    line-height: 400px;
    border-radius: 10px;
    text-align: center;
}
.mx_MyGroups_joinedGroups {
    border-top: 1px solid #16171e;
    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;
    padding: 0;
    margin: 16px 0;
}
.mx_NotificationPanel .mx_EventTile_roomName {
    font-weight: bold;
    font-size: 14px;
    line-height: 1.14;
}
.mx_NotificationPanel .mx_EventTile_roomName a {
    color: #ffffff;
}
.mx_NotificationPanel .mx_EventTile_avatar {
    top: 8px;
    left: 0px;
}
.mx_NotificationPanel .mx_EventTile .mx_SenderProfile, .mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
    color: #ffffff;
    font-size: 12px;
    display: inline;
    padding-left: 0;
}
.mx_NotificationPanel .mx_EventTile_senderDetails {
    padding-left: 32px;
    position: relative;
    font-size: 12px;
}
.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: 0;
    padding: 8px 0 0 32px;
}
.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line {
    padding-left: 0;
}
.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
    background-color: #2b2c32;
}
.mx_NotificationPanel .mx_EventTile_content {
    margin-right: 0;
}
.mx_NotificationPanel .mx_TimelineStarterCard, .mx_NotificationPanel .mx_TimelineMessageSuggestions, .mx_NotificationPanel .mx_BaseAvatar_image {
        display: none;
    }
.mx_NotificationPanel ol.mx_RoomView_MessageList {
        -ms-flex-pack: start;
            justify-content: flex-start;
        padding: 8px 4px 8px 15px;
    }
.mx_NotificationPanel .mx_DateSeparator {
        padding-left: 0;
        margin-bottom: 0;
        margin-top: 8px;
    }
/*
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;
    width: 240px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    border-left: 1px solid #16171e;
    position: relative;
}
.mx_RightPanel .mx_EventTile_senderDetails, .mx_RightPanel .mx_SenderProfile, .mx_RightPanel .mx_EventTile_line {
        padding-left: 0 !important;
    }
.mx_RightPanel .mx_EventTile {
        padding-top: 0 !important;
        margin-right: 0 !important;
    }
.mx_RightPanel .mx_RoomTile_selected {
        font-weight: normal;
    }
.mx_RightPanel_header {
    -ms-flex-order: 1;
        order: 1;
    border-bottom: 1px solid #16171e;
    -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: #2b2c32;
    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;
    text-align: center;
    border-bottom: 2px solid transparent;
    height: 24px;
    width: 60px;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
}
.mx_RightPanel_headerButton::before {
    content: '';
    height: 24px;
    width: 24px;
    filter: brightness(0) saturate(100%) invert(81%) sepia(6%) saturate(14%) hue-rotate(202deg) brightness(103%) contrast(99%);
}
.mx_RightPanel_membersButton::before {
    background: url(../../img/feather-customised/user.2b87a9c.svg) no-repeat;
    background-size: contain;
}
.mx_RightPanel_filesButton::before {
    background: url(../../img/feather-customised/files.c5b636e.svg) no-repeat;
    background-size: contain;
}
.mx_RightPanel_notifsButton::before {
    background: url(../../img/feather-customised/notifications.f4fb424.svg) no-repeat;
    background-size: contain;
}
.mx_RightPanel_roomSettingsButton::before {
    background: url(../../img/feather-customised/settings.e6aded4.svg) no-repeat;
    background-size: contain;
}
.mx_RightPanel_groupMembersButton::before {
    background: url(../../img/icons-people.af03c4c.svg) no-repeat;
    background-size: contain;
}
.mx_RightPanel_roomsButton::before {
    background: url(../../img/icons-room-nobg.a6a494e.svg) no-repeat;
    background-size: contain;
}
.mx_RightPanel_headerButton_highlight::before {
    filter: brightness(0) saturate(100%) invert(55%) sepia(25%) saturate(4308%) hue-rotate(207deg) brightness(103%) contrast(99%);
}
.mx_RightPanel_headerButton_highlight::after {
    content: '';
    position: absolute;
    bottom: -17px;
    left: 0;
    right: 0;
    height: 4px;
    background-color: #7b8ffe;
}
.mx_RightPanel_headerButton_badge {
    font-size: 8px;
    border-radius: 8px;
    color: #ffffff;
    background-color: #7b8ffe;
    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 {
    width: 650px;
    padding: 0px;
    overflow-y: hidden;


    max-height: unset !important;
}
.mx_RoomDirectory_dialogWrapper > .mx_Dialog .mx_Dialog_header {
        margin-bottom: 18px;
    }
.mx_RoomDirectory_dialogWrapper > .mx_Dialog .mx_Dialog_header .mx_Dialog_title {
            width: 400px;
            margin-top: 80px;
        }
.mx_RoomDirectory_dialogWrapper > .mx_Dialog .mx_Dialog_header .mx_Dialog_cancelButton {
            top: 40px;
            right: 40px;
        }
.mx_RoomDirectory_dialog {
    height: 100%;
    width: 100%;
}
.mx_RoomDirectory_dialogWrapper_inner {
    height: 629px;
}
.mx_RoomDirectory_dialog > div:first-of-type {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-align: center;
        align-items: center;
    width: 650px;
    height: 100%;
}
.mx_RoomDirectory {
    color: #ffffff;
    word-break: break-word;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex: 1;
        flex: 1;
    width: 100%;
}
.mx_RoomDirectory .mx_AutoHideScrollbar {
        padding: 0 125px;
    }
.mx_RoomDirectory:after {
    position: absolute;
    z-index: 9999;
    bottom: 42px;
    left: 125px;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(43, 44, 50, 1) 90%);
    width: 380px;
    height: 40px;
    content: "";
}
.mx_RoomDirectory .gm-scroll-view {
    scrollbar-width: thin;
}
.mx_RoomDirectory_createRoom {
    font-weight: bold;
    font-size: 14px;
    border-radius: 50px;
    vertical-align: middle;
    display: -ms-flexbox;
    display: flex;
    outline: none;
    padding: 0 28px;
    cursor: pointer;
    min-height: 44px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #7b8ffe;
    color: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
}
.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 {
        padding: 0px;
        -ms-flex-pack: start;
            justify-content: flex-start;
    }
.mx_RoomDirectory_list .mx_RoomView_MessageList {
        padding: 0px;
        height: 400px;
        display: block !important;
        overflow-y: scroll !important;
    }
.mx_RoomDirectory_list .mx_RoomView_MessageList .noRoom {
            height: 100%;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: column;
                flex-direction: column;
            -ms-flex-pack: justify;
                justify-content: space-between;
        }
.mx_RoomDirectory_list .mx_RoomView_MessageList .noRoom .text {
                padding-top: 24px;
                font-size: 14px;
                text-align: center;
            }
.mx_RoomDirectory_list .mx_RoomView_MessageList .noRoom .icon {
                display: -ms-flexbox;
                display: flex;
                -ms-flex-pack: center;
                    justify-content: center;
                padding-bottom: 77px;
            }
.mx_RoomDirectory_list .spinner {
        width: 100%;
        height: 384px;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
            justify-content: center;
        -ms-flex-align: center;
            align-items: center;
    }
.mx_RoomDirectory_listheader {
    display: -ms-flexbox;
    display: flex;
    padding: 0 125px 16px;
    box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.16);
}
.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;
}
.mx_RoomDirectory_table {
    font-size: 14px;
    color: #ffffff;
    width: 100%;
    text-align: left;
    table-layout: fixed;
    padding-right: 17px;
    padding-top: 14px;
}
.mx_RoomDirectory_table tr:last-child {
        z-index: 1000;
        position: absolute;
        width: 377px;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
            align-items: center;
    }
.mx_RoomDirectory_table tr:last-child .mx_RoomDirectory_roomDescription {
            width: 284px;
        }
.mx_RoomDirectory_table tr:last-child .mx_RoomDirectory_roomMemberCount {
            padding-right: 0;
            width: 52px;
        }
.mx_RoomDirectory_roomAvatar {
    width: 24px;
    padding-right: 8px;
    vertical-align: middle;
}
.mx_RoomDirectory_name {
    font-weight: bold;
    white-space: nowrap;
}
.mx_RoomDirectory_perms {
    display: inline-block;
}
.mx_RoomDirectory_perm {
    display: inline;
    padding-left: 5px;
    padding-right: 5px;
    margin-right: 5px;
    height: 15px;
    border-radius: 11px;
    background-color: #f9fafc;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 11px;
    color: #7b8ffe;
}
.mx_RoomDirectory_topic {
    white-space: nowrap;
    font-size: 12px;
}
.mx_RoomDirectory_alias {
    font-size: 12px;
    color: #a2a2a2;
}
.mx_RoomDirectory_roomMemberCount {
    text-align: right;
    width: 50px;
    font-size: 12px;
    color: #737576;
}
.mx_RoomDirectory_roomMemberCount .count {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: start;
            justify-content: flex-start;
        -ms-flex-align: center;
            align-items: center;
    }
.mx_RoomDirectory_roomMemberCount .count .icon {
            display: -ms-flexbox;
            display: flex;
            margin-right: 6px;
        }
.mx_RoomDirectory_table tr {
    cursor: pointer;
    height: 48px;
}
.mx_RoomSettingsPanel {
    -ms-flex-order: 2;
        order: 2;
    -ms-flex: 1 1 0px;
        flex: 1 1 0;
    overflow-y: auto;
    font-size: 12px;
    background-color: #16171e;
    overflow-x: hidden;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: justify;
        justify-content: space-between;
}
.mx_RoomSettingsPanel .mx_CitadelToggle {
        -ms-flex-align: center;
            align-items: center;
        margin-bottom: 0;
        padding: 12px 0;
    }
.mx_RoomSettingsPanel .mx_CitadelToggle .radio { display: -ms-flexbox; display: flex }
.mx_RoomSettingsPanel .mx_CitadelToggle .label::first-letter { text-transform: uppercase }
.mx_RoomSettingsPanel .selected-opt-section .label, .mx_RoomSettingsPanel .selected-opt-section .mx_CitadelToggle .label, .mx_RoomSettingsPanel .selected-toggle .mx_CitadelToggle .label {
        font-weight: bold;
    }
.mx_RoomSettingsPanel .section {
        background-color: #45454b;
        margin-bottom: 8px;
    }
.mx_RoomSettingsPanel .section .sub-section {
            padding: 0 15px 0 16px;
        }
.mx_RoomSettingsPanel .section .sub-section .description {
                padding: 8px 0;
            }
.mx_RoomSettingsPanel .profile {
        position: relative;
    }
.mx_RoomSettingsPanel .profile .federation {
            border-top: 1px solid #dde3e5;
        }
.mx_RoomSettingsPanel .profile .federation .title {
                padding-top: 10px;
                font-weight: bold;
            }
.mx_RoomSettingsPanel .profile .federation .description { padding: 5px 0 12px 0 }
.mx_RoomSettingsPanel .e2e .toggle, .mx_RoomSettingsPanel .e2e .mx_SettingsFlag {
            height: 40px;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
                align-items: center;
        }
.mx_RoomSettingsPanel .e2e .mx_SettingsFlag {
            width: 100%;
        }
.mx_RoomSettingsPanel .e2e .mx_SettingsFlag .mx_ToggleSwitch {
                margin-right: 12px;
            }
.mx_RoomSettingsPanel .join-rules {
        padding-bottom: 8px;
    }
.mx_RoomSettingsPanel .join-rules .editable-opt-section .description { padding: 0 0 12px 0 !important}
.mx_RoomSettingsPanel .history-visibility {
        padding-right: 10px !important;
    }
.mx_RoomSettingsPanel .leave {
        min-height: 40px;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
            justify-content: center;
        -ms-flex-align: center;
            align-items: center;
        background-color: #45454b;
        color: #d4d4d6;
    }
/*
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 {
    padding: 0 11px 0 70px;
    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: #ffffff;
    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 #2b2c32;
}
.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 #2b2c32;
    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: #ffbf7a;
    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: #ffbf7a;
}
.mx_RoomStatusBar_connectionLostBar_desc {
    color: #ffffff;
    font-size: 13px;
    opacity: 0.5;
    padding-bottom: 20px;
}
.mx_RoomStatusBar_resend_link {
    color: #ffffff !important;
    text-decoration: underline !important;
    cursor: pointer;
}
.mx_RoomStatusBar_typingBar {
    height: 50px;
    line-height: 50px;

    color: #ffffff;
    opacity: 0.5;
    overflow-y: hidden;
    display: block;
}
.mx_RoomStatusBar_isAlone {
    height: 50px;
    line-height: 50px;

    color: #ffffff;
    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;
    padding: 0 16px 0 5px;
    height: 36px;
    border-top: 1px solid #2b2c32;
}
.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: #7b8ffe;
    font-weight: bold;
    font-size: 12px;
    margin-left: 12px;
    letter-spacing: 0.9px;
}
.mx_RoomSubList_badge {
    -ms-flex: 0 0 auto;
        flex: 0 0 auto;
    border-radius: 8px;
    color: #ffffff;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    background-color: #16171e;
    border: 1px solid #ffffff;
    width: 24px;
    height: 16px;
    text-align: center;
}
.mx_RoomSubList_addRoom, .mx_RoomSubList_badge {
    margin-left: 7px;
}
.mx_RoomSubList_addRoom {
    background-color: #7b8ffe;
    border: 4px solid #16171e;
    border-radius: 18px;
    height: 20px;
    width: 20px;
    -ms-flex: 0 0 20px;
        flex: 0 0 20px;
    position: relative;
}
.mx_RoomSubList_addRoom::after {
        background: url(../../img/icons-room-add.bd36e26.svg) no-repeat center;
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
.mx_RoomSubList_addRoom_hinted {
    z-index: 3002;
    border: 3px solid #16171e;
}
.mx_RoomSubList_addRoom_hinted::before {
        position: absolute;
        content: " ";
        border: 3px solid transparent;
        z-index: 3;
        border-radius: 18px;
        width: 26px;
        height: 26px;
        top: -6px;
        left: -6px;
    }
.mx_RoomSubList_badgeHighlight {
    background-color: #ffffff;
    color: #4a5aa7;
    border: none;
}
.mx_RoomSubList_chevron {
    pointer-events: none;
    background: url(../../img/feather-customised/dropdown-arrow.39b7bf6.svg) no-repeat;
    transition: transform 0.2s ease-in;
    width: 10px;
    height: 6px;
    margin-left: 2px;
    filter: sepia(200%) brightness(120%) contrast(150%) invert(100%) saturate(100%);
}
.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;
}
.collapsed .mx_RoomSubList_scroll {
        padding: 0;
    }
.collapsed .mx_RoomSubList_labelContainer {
        padding: 0 5px;
    }
.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, rgba(34, 38, 46, 0), rgba(34, 38, 46, 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_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: rgba(255, 255, 255, 0.5);
    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: #2b2c32;
}
.mx_RoomView_auxPanel_hiddenHighlights {
    border-bottom: 1px solid #16171e;
    padding: 10px 26px;
    color: #ffbf7a;
    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: url(../../img/feather-customised/search-input.6707377.svg) no-repeat center;
    background-size: 50px 50px;
    content: '';
    position: absolute;
    top: 286px;
    left: 0;
    right: 0;
    height: 50px;
    filter: brightness(50%);
}
.mx_RoomView_messagePanelMembersCount::before {
    background: url(../../img/user-bold.5e780be.svg) no-repeat center;
    background-size: cover;
    content: '';
    height: 13px;
    padding-left: 8px;
    padding-right: 8px;
    margin-right: 2px;
}
.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_body .mx_RoomView_timeline .topSpinner {
        margin-top: 24px;
    }
.mx_RoomView_statusArea {
    width: 100%;
    -ms-flex: 0 0 auto;
        flex: 0 0 auto;

    max-height: 0px;
    background-color: #2b2c32;
    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 {
    border-top: 1px solid #16171e;
    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: 16px 18px;
    margin: 0 0 16px;
    /* needed as min-height is set to clientHeight in ScrollPanel
    to prevent shrinking when WhoIsTypingTile is hidden */
    box-sizing: border-box;
}
.mx_RoomView_MessageList .mx_EventTile_avatar {
        top: 8px;
        left: 14px;
    }
.mx_RoomView_MessageList .mx_EventTile .mx_SenderProfile, .mx_RoomView_MessageList .mx_EventTile_line {
        padding-left: 54px;
        margin-right: 0;
        color: #d4d4d6;
    }
.mx_RoomView_MessageList .mx_EventTile {
        margin-right: 203px;
    }
.mx_RoomView_MessageList .mx_TimelineHistoryWarning {
        margin-top: 32px;
        padding-left: 16px;
        font-size: 12px;
        color: #737576;
    }
.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 #7b8ffe;
    border-bottom: solid 1px #7b8ffe;
    margin-top: 0px;
    position: relative;
    top: -1px;
    z-index: 1;
}
.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
    background-color: #2b2c32;
}
.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: #7b8ffe;
    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: #ffbf7a;
    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;
    }
.mx_RoomView_topMarker {
    margin: 0px;
}
.mx_ForwardMessage, .mx_CitadelExternalBar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
    padding: 12px 27px 12px 32px;
    -ms-flex-align: center;
        align-items: center;
    font-size: 12px;
}
.mx_ForwardMessage {
    color: #ffffff;
    background-color: #16171e;
}
.mx_CitadelExternalBar {
    color: #d4d4d6;
    background-color: #3b405b;
}
.mx_CitadelExternalBar .dm-text {
        display: -ms-flexbox;
        display: flex;
    }
.mx_CitadelExternalBar .dm-text .name {
            font-weight: bold;
            margin-right: 3px;
        }
.mx_CitadelExternalBar .link {
        color: #7b8ffe;
        text-decoration: underline;
        font-weight: bold;
        cursor: pointer;
    }
/*
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_closeButton {
    cursor: pointer;
    background: url(../../img/icons-close.11ff07c.svg) no-repeat center;
    width: 16px;
    height: 16px;
    padding: 9px;
    position: relative;
}
/*
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_tabLabels {
    padding-left: 20px;
    width: 200px;
    color: #ffffff;
    position: fixed;
}
.mx_TabbedView_tabLabel {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    vertical-align: text-top;
    cursor: pointer;
    border-radius: 3px;
    font-size: 14px;
    min-height: 24px;
    margin-bottom: 6px;
}
.mx_TabbedView_tabLabel img {
        position: absolute;
        right: 4px;
        height: 24px;
        width: 24px;
    }
.mx_TabbedView_tabLabel_active {
    color: #7b8ffe;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
}
.mx_TabbedView_maskedIcon {
    margin-left: 6px;
    margin-right: 9px;
    width: 16px;
    display: inline-block;
}
.mx_TabbedView_maskedIcon::before {
    display: inline-block;
    filter: sepia(50%) brightness(110%) invert(100%) saturate(20%);
    background-repeat: no-repeat;
    background-size: 16px 16px;
    width: 16px;
    height: 22px;
    background-position: center;
    content: '';
    vertical-align: middle;
}
.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon:before {
    filter: invert(55%) sepia(25%) saturate(4308%) hue-rotate(207deg) brightness(103%) contrast(99%);
}
.mx_TabbedView_tabLabel_text {
    vertical-align: middle;
}
.mx_TabbedView_tabPanel {
    height: 580px;
    margin-left: 228px;
    -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: #15171b;
    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 #16171e;
    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;
    margin-top: 5px;

    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: #7b8ffe;
    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 #7b8ffe;
    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: #a1b2d1;
}
.mx_TagTile_badgeHighlight {
    background-color: #ffbf7a;
}
/*
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: #15171b;
    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: #15171b;
        -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 56px;
        flex: 0 0 56px;
    color: #ffffff;
    background-color: #16171e;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    min-width: 0;
    padding: 0 7px;
    overflow: hidden;
    font-size: 14px;
}
.mx_TopLeftMenuButton .mx_BaseAvatar {
    margin: 0 7px;
}
.mx_TopLeftMenuButton_name {
    margin: 0 7px;
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: bold;
}
.mx_TopLeftMenuButton_chevron {
    margin: 0 7px;
    background: url(../../img/feather-customised/dropdown-arrow.39b7bf6.svg) no-repeat;
    background-size: contain;
    filter: invert(100%) brightness(300%);
    width: 10px;
    height: 6px;
}
/*
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-top: -1px;
    padding-bottom: 5px;
}
.mx_UploadBar_uploadProgressInner {
    background-color: #7b8ffe;
    height: 5px;
}
.mx_UploadBar_uploadFilename {
    margin-top: 5px;
    margin-left: 65px;
    opacity: 0.5;
    color: #ffffff;
}
.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: #7b8ffe;
}
.mx_UploadBar_separator {
    margin-top: 16px;
    border-bottom: 1px solid #16171e;
}
/*
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;
}
.mx_CitadeForgotPassword {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: justify;
      justify-content: space-between;
  height: 100%;
  padding: 40px 0;
}
.mx_CitadeForgotPassword .wrapper {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
            flex-direction: column;
        -ms-flex-pack: justify;
            justify-content: space-between;
        height: 100%;
    }
.mx_CitadeForgotPassword .wrapper .content {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: column;
                flex-direction: column;
            -ms-flex-align: center;
                align-items: center;
            max-width: 500px;
        }
.mx_CitadeForgotPassword .wrapper .content .header {
                display: -ms-flexbox;
                display: flex;
                -ms-flex-direction: column;
                    flex-direction: column;
                -ms-flex-align: center;
                    align-items: center;
            }
.mx_CitadeForgotPassword .wrapper .content .header .logo {
                    height: 110px;
                }
.mx_CitadeForgotPassword .wrapper .content .header .title {
                    text-transform: uppercase;
                    font-size: 11px;
                    font-weight: bold;
                    letter-spacing: 1px;
                    margin: 20px 0;
                }
.mx_CitadeForgotPassword .wrapper .content .header .subtitle {
                    text-align: center;
                    font-size: 12px;
                }
.mx_CitadeForgotPassword .wrapper .content .header .subtitle .email {
                        font-weight: bold;
                    }
.mx_CitadeForgotPassword .wrapper .content .load-or-error {
                margin: 10px 0;
                height: 20px;
                display: -ms-flexbox;
                display: flex;
                -ms-flex-align: center;
                    align-items: center;
                -ms-flex-pack: center;
                    justify-content: center;
                transition: height 500ms 0ms, opacity 500ms 500ms;
                opacity: 1.0;
            }
.mx_CitadeForgotPassword .wrapper .content .load-or-error .loader {
                    width: 100%;
                    text-align: center;
                }
.mx_CitadeForgotPassword .wrapper .content .load-or-error .loader img {
                        width: 20px;
                        height: 20px;
                    }
.mx_CitadeForgotPassword .wrapper .content .load-or-error .error {
                    color: #ffbf7a;
                    font-weight: bold;
                    text-align: center;
                }
.mx_CitadeForgotPassword .wrapper .content .load-or-error.hide {
                transition: height 500ms 500ms, opacity 500ms 0ms;
                opacity: 0.0;
                height: 0px;
            }
.mx_CitadeForgotPassword .wrapper .content .mx_AuthBody {
                padding-top: 0px !important;
            }
.mx_CitadeForgotPassword .wrapper .footer {
            text-align: center;
            font-size: 11px;
        }
.mx_CitadeForgotPassword .wrapper .footer .no-token {
                display: -ms-flexbox;
                display: flex;
                -ms-flex-direction: column;
                    flex-direction: column;
            }
.mx_CitadeForgotPassword .wrapper .footer a {
                cursor: pointer;
                color: #7b8ffe;
                text-decoration: underline;
                font-weight: 600;
                opacity: 0.8;
            }
.mx_CitadeForgotPassword .success {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
            flex-direction: column;
        -ms-flex-align: center;
            align-items: center;
    }
.mx_CitadeForgotPassword .success .text {
            font-size: 12px;
        }
.mx_CitadelPostAuth {
    padding-top: 200px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-align: center;
        align-items: center;
}
.mx_CitadelPostAuth .title {
        font-weight: bold;
        padding-top: 40px;
        font-size: 20px;
        font-weight: bold;
        color: #ffffff;
    }
.mx_CitadelPostAuth .subtitle {
        padding-top: 8px;
        font-size: 14px;
        color: #ffffff;
        line-height: 1.43;
        width: 400px;
        text-align: center;
    }
.mx_CitadelPostAuth .spinner {
        padding-top: 40px;
    }
.mx_CitadelPostLogin {
    padding-top: 200px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-align: center;
        align-items: center;
}
.mx_CitadelPostLogin .hello {
        padding-top: 40px;
        font-size: 20px;
        font-weight: bold;
        color: #ffffff;
    }
.mx_CitadelPostLogin .success-message {
        padding-top: 8px;
        font-size: 14px;
        color: #ffffff;
        line-height: 1.43;
    }
.mx_CitadelPostLogin .spinner {
        padding-top: 40px;
    }
.mx_CitadelRegistration {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: justify;
        justify-content: space-between;
    height: 100%;
    width: 100%;
}
.mx_CitadelRegistration .steps {
        position: absolute;
        display: -ms-flexbox;
        display: flex;
        top: 0;
        left: 0;
    }
.mx_CitadelRegistration .steps div:first-child { border-top-left-radius: 4px; }
.mx_CitadelRegistration .steps div:last-child { border-top-right-radius: 4px; }
.mx_CitadelRegistration .steps .email, .mx_CitadelRegistration .steps .token, .mx_CitadelRegistration .steps .password, .mx_CitadelRegistration .steps .profile {
            background-color: #959598;
            height: 6px;
            width: 207px;
            margin-right: 5px;
        }
.mx_CitadelRegistration .steps .highlight {
            background-color: #7b8ffe;
        }
.mx_CitadelRegistration .mx_AuthBody {
        height: 100%;
        width: 100%;
        padding-top: 80px;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
            justify-content: center;
        border-radius: 4px;
    }
.mx_CitadelRegistration .mx_AuthBody .title {
            font-size: 20px;
            margin-bottom: 8px;
            color: #ffffff;
        }
.mx_CitadelRegistration .mx_AuthBody .subtitle {
            width: 400px;
            font-size: 14px;
            min-height: 40px;
            margin-bottom: 40px;
            color: #ffffff;
        }
.mx_CitadelRegistration .mx_AuthBody .subtitle .email {
                font-weight: bold;
                font-size: 14px;
            }
.mx_CitadelWelcome .common {
        position: relative;
    }
.mx_CitadelWelcome .load-or-error {
        margin: 10px 0 10px 0;
        height: 20px;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
            align-items: center;
        -ms-flex-pack: center;
            justify-content: center;
    }
.mx_CitadelWelcome .load-or-error .loader {
            width: 100%;
            text-align: center;
        }
.mx_CitadelWelcome .load-or-error .loader img {
                width: 20px;
                height: 20px;
            }
.mx_CitadelWelcome .load-or-error .error {
            color: #ffbf7a;
            font-weight: bold;
            text-align: center;
        }
.mx_CitadelWelcome .terms {
        display: -ms-flexbox;
        display: flex;
        margin-top: 20px;
        font-size: 11px;
        width: 400px;
    }
.mx_CitadelWelcome .terms .description {
            margin-left: 5px;
        }
/*
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 {
    font-weight: bold;
    font-size: 14px;
    border-radius: 50px;
    vertical-align: middle;
    display: -ms-flexbox;
    display: flex;
    outline: none;
    padding: 0 28px;
    cursor: pointer;
    min-height: 44px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    color: #ffffff;
    background-color: #7b8ffe;
    border: none;
    width: 100%;
    margin-top: 20px;
}
.mx_Login_submit:disabled {
    opacity: 0.2;
    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 {
    width: 100%;
    text-align: center;
}
.mx_Login_loader .mx_Spinner {
    display: inline;
}
.mx_Login_loader .mx_Spinner img {
    width: 16px;
    height: 16px;
}
.mx_Login_error {
    color: #ffbf7a;
    font-weight: bold;
    text-align: center;
}
.mx_Login_type_container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
}
.mx_Login_type_container .mx_Field {
        margin: 0;
    }
.mx_Login_type_label {
    -ms-flex-positive: 1;
        flex-grow: 1;
}
.mx_Login_type_dropdown {
    min-width: 200px;
}
.mx_PasswordValidationStep .mx_CitadelInput {
        margin-bottom: 2px;
    }
.mx_ProfileValidationStep .mx_CitadelInput {
        margin-bottom: 16px;
    }
.mx_TokenValidationStep {
    height: 100%;
}
.mx_TokenValidationStep .back-button {
        cursor: pointer;
        position: absolute;
        top: 42px;
        left: 42px;
        width: 16px;
        height: 16px;
        background-image: url(../../img/back-menu-dark.1aa204c.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
.mx_TokenValidationStep .token-validation.wrapper {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
            flex-direction: column;
        -ms-flex-pack: justify;
            justify-content: space-between;
        height: 100%;
    }
.mx_TokenValidationStep .token-validation.wrapper .content {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: column;
                flex-direction: column;
            -ms-flex-align: center;
                align-items: center;
            max-width: 500px;
        }
.mx_TokenValidationStep .token-validation.wrapper .content .header {
                display: -ms-flexbox;
                display: flex;
                -ms-flex-direction: column;
                    flex-direction: column;
                -ms-flex-align: start;
                    align-items: flex-start;
            }
.mx_TokenValidationStep .token-validation.wrapper .content .load-or-error {
                margin: 10px 0;
                height: 20px;
                display: -ms-flexbox;
                display: flex;
                -ms-flex-align: center;
                    align-items: center;
                -ms-flex-pack: center;
                    justify-content: center;
            }
.mx_TokenValidationStep .token-validation.wrapper .content .load-or-error .loader {
                    width: 100%;
                    text-align: center;
                }
.mx_TokenValidationStep .token-validation.wrapper .content .load-or-error .loader img {
                        width: 20px;
                        height: 20px;
                    }
.mx_TokenValidationStep .token-validation.wrapper .content .load-or-error .error {
                    color: #ffbf7a;
                    font-weight: bold;
                    text-align: center;
                }
.mx_TokenValidationStep .token-validation.wrapper .footer {
            text-align: center;
            font-size: 11px;
            position: absolute;
            bottom: 32px;
            width: 100%;
            left: 0;
        }
.mx_TokenValidationStep .token-validation.wrapper .footer .no-token {
                display: inline-block;
                font-size: 14px;
            }
.mx_TokenValidationStep .token-validation.wrapper .footer .no-token .new-code {
                    color: #535d97;
                    font-weight: bold;
                }
/**
 * Copyright (c) Tiny Technologies, Inc. All rights reserved.
 * Licensed under the LGPL or a commercial license.
 * For LGPL see License.txt in the project root for license information.
 * For commercial licenses see https://www.tiny.cloud/
 */
.mce-content-body .mce-item-anchor {
  background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'8'%20height%3D'12'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M0%200L8%200%208%2012%204.09117821%209%200%2012z'%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;
  cursor: default;
  display: inline-block;
  height: 12px !important;
  padding: 0 2px;
  -webkit-user-modify: read-only;
  -moz-user-modify: read-only;
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
      user-select: all;
  width: 8px !important;
}
.mce-content-body .mce-item-anchor[data-mce-selected] {
  outline-offset: 1px;
}
.tox-comments-visible .tox-comment {
  background-color: #fff0b7;
}
.tox-comments-visible .tox-comment--active {
  background-color: #ffe168;
}
.tox-checklist > li:not(.tox-checklist--hidden) {
  list-style: none;
  margin: 0.25em 0;
}
.tox-checklist > li:not(.tox-checklist--hidden)::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
  background-size: 100%;
  content: '';
  cursor: pointer;
  height: 1em;
  margin-left: -1.5em;
  margin-top: 0.125em;
  position: absolute;
  width: 1em;
}
.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
}
[dir=rtl] .tox-checklist > li:not(.tox-checklist--hidden)::before {
  margin-left: 0;
  margin-right: -1.5em;
}
/* stylelint-disable */
/* http://prismjs.com/ */
/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */
code[class*="language-"], pre[class*="language-"] {
  color: black;
  background: none;
  text-shadow: 0 1px white;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  font-size: 1em;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  -moz-tab-size: 4;
  -o-tab-size: 4;
     tab-size: 4;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
  text-shadow: none;
  background: #b3d4fc;
}
pre[class*="language-"]::selection, pre[class*="language-"] ::selection, code[class*="language-"]::selection, code[class*="language-"] ::selection {
  text-shadow: none;
  background: #b3d4fc;
}
@media print {
  code[class*="language-"], pre[class*="language-"] {
    text-shadow: none;
  }
}
/* Code blocks */
pre[class*="language-"] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
}
:not(pre) > code[class*="language-"], pre[class*="language-"] {
  background: #f5f2f0;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
}
.token.comment, .token.prolog, .token.doctype, .token.cdata {
  color: slategray;
}
.token.punctuation {
  color: #999;
}
.namespace {
  opacity: 0.7;
}
.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted {
  color: #905;
}
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted {
  color: #690;
}
.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string {
  color: #9a6e3a;
  background: hsla(0, 0%, 100%, 0.5);
}
.token.atrule, .token.attr-value, .token.keyword {
  color: #07a;
}
.token.function, .token.class-name {
  color: #DD4A68;
}
.token.regex, .token.important, .token.variable {
  color: #e90;
}
.token.important, .token.bold {
  font-weight: bold;
}
.token.italic {
  font-style: italic;
}
.token.entity {
  cursor: help;
}
/* stylelint-enable */
.mce-content-body {
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.mce-content-body .mce-visual-caret {
  background-color: black;
  background-color: currentcolor;
  position: absolute;
}
.mce-content-body .mce-visual-caret-hidden {
  display: none;
}
.mce-content-body *[data-mce-caret] {
  left: -1000px;
  margin: 0;
  padding: 0;
  position: absolute;
  right: auto;
  top: 0;
}
.mce-content-body .mce-offscreen-selection {
  left: -2000000px;
  max-width: 1000000px;
  position: absolute;
}
.mce-content-body *[contentEditable=false] {
  cursor: default;
}
.mce-content-body *[contentEditable=true] {
  cursor: text;
}
.tox-cursor-format-painter {
  cursor: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M15%2C6%20C15%2C5.45%2014.55%2C5%2014%2C5%20L6%2C5%20C5.45%2C5%205%2C5.45%205%2C6%20L5%2C10%20C5%2C10.55%205.45%2C11%206%2C11%20L14%2C11%20C14.55%2C11%2015%2C10.55%2015%2C10%20L15%2C9%20L16%2C9%20L16%2C12%20L9%2C12%20L9%2C19%20C9%2C19.55%209.45%2C20%2010%2C20%20L11%2C20%20C11.55%2C20%2012%2C19.55%2012%2C19%20L12%2C14%20L18%2C14%20L18%2C7%20L15%2C7%20L15%2C6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M1%2C1%20L8.25%2C1%20C8.66421356%2C1%209%2C1.33578644%209%2C1.75%20L9%2C1.75%20C9%2C2.16421356%208.66421356%2C2.5%208.25%2C2.5%20L2.5%2C2.5%20L2.5%2C8.25%20C2.5%2C8.66421356%202.16421356%2C9%201.75%2C9%20L1.75%2C9%20C1.33578644%2C9%201%2C8.66421356%201%2C8.25%20L1%2C1%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"), default;
}
.mce-content-body figure.align-left {
  float: left;
}
.mce-content-body figure.align-right {
  float: right;
}
.mce-content-body figure.image.align-center {
  display: table;
  margin-left: auto;
  margin-right: auto;
}
.mce-preview-object {
  border: 1px solid gray;
  display: inline-block;
  line-height: 0;
  margin: 0 2px 0 2px;
  position: relative;
}
.mce-preview-object .mce-shim {
  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.mce-preview-object[data-mce-selected="2"] .mce-shim {
  display: none;
}
.mce-object {
  background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5zm4.79%202.565l5.64%204.028a.5.5%200%200%201%200%20.814l-5.64%204.028a.5.5%200%200%201-.79-.407V7.972a.5.5%200%200%201%20.79-.407z%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;
  border: 1px dashed #aaa;
}
.mce-pagebreak {
  border: 1px dashed #aaa;
  cursor: default;
  display: block;
  height: 5px;
  margin-top: 15px;
  page-break-before: always;
  width: 100%;
}
@media print {
  .mce-pagebreak {
    border: 0;
  }
}
.tiny-pageembed .mce-shim {
  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.tiny-pageembed[data-mce-selected="2"] .mce-shim {
  display: none;
}
.tiny-pageembed {
  display: inline-block;
  position: relative;
}
.tiny-pageembed--21by9, .tiny-pageembed--16by9, .tiny-pageembed--4by3, .tiny-pageembed--1by1 {
  display: block;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
}
.tiny-pageembed--21by9 {
  padding-top: 42.857143%;
}
.tiny-pageembed--16by9 {
  padding-top: 56.25%;
}
.tiny-pageembed--4by3 {
  padding-top: 75%;
}
.tiny-pageembed--1by1 {
  padding-top: 100%;
}
.tiny-pageembed--21by9 iframe, .tiny-pageembed--16by9 iframe, .tiny-pageembed--4by3 iframe, .tiny-pageembed--1by1 iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.mce-content-body[data-mce-placeholder] {
  position: relative;
}
.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
  color: rgba(34, 47, 62, 0.7);
  content: attr(data-mce-placeholder);
  position: absolute;
}
.mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before {
  left: 1px;
}
.mce-content-body[dir=rtl][data-mce-placeholder]:not(.mce-visualblocks)::before {
  right: 1px;
}
.mce-content-body div.mce-resizehandle {
  background-color: #4099ff;
  border-color: #4099ff;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  height: 10px;
  position: absolute;
  width: 10px;
  z-index: 10000;
}
.mce-content-body div.mce-resizehandle:hover {
  background-color: #4099ff;
}
.mce-content-body div.mce-resizehandle:nth-of-type(1) {
  cursor: nwse-resize;
}
.mce-content-body div.mce-resizehandle:nth-of-type(2) {
  cursor: nesw-resize;
}
.mce-content-body div.mce-resizehandle:nth-of-type(3) {
  cursor: nwse-resize;
}
.mce-content-body div.mce-resizehandle:nth-of-type(4) {
  cursor: nesw-resize;
}
.mce-content-body .mce-clonedresizable {
  opacity: 0.5;
  outline: 1px dashed black;
  position: absolute;
  z-index: 10000;
}
.mce-content-body .mce-resize-helper {
  background: #555;
  background: rgba(0, 0, 0, 0.75);
  border: 1px;
  border-radius: 3px;
  color: white;
  display: none;
  font-family: sans-serif;
  font-size: 12px;
  line-height: 14px;
  margin: 5px 10px;
  padding: 5px;
  position: absolute;
  white-space: nowrap;
  z-index: 10001;
}
.mce-match-marker {
  background: #aaa;
  color: #fff;
}
.mce-match-marker-selected {
  background: #39f;
  color: #fff;
}
.mce-content-body img[data-mce-selected], .mce-content-body table[data-mce-selected] {
  outline: 3px solid #b4d7ff;
}
.mce-content-body hr[data-mce-selected] {
  outline: 3px solid #b4d7ff;
  outline-offset: 1px;
}
.mce-content-body *[contentEditable=false] *[contentEditable=true]:focus {
  outline: 3px solid #b4d7ff;
}
.mce-content-body *[contentEditable=false] *[contentEditable=true]:hover {
  outline: 3px solid #b4d7ff;
}
.mce-content-body *[contentEditable=false][data-mce-selected] {
  cursor: not-allowed;
  outline: 3px solid #b4d7ff;
}
.mce-content-body.mce-content-readonly *[contentEditable=true]:focus, .mce-content-body.mce-content-readonly *[contentEditable=true]:hover {
  outline: none;
}
.mce-content-body *[data-mce-selected="inline-boundary"] {
  background-color: #b4d7ff;
}
.mce-content-body .mce-edit-focus {
  outline: 3px solid #b4d7ff;
}
.mce-content-body td[data-mce-selected], .mce-content-body th[data-mce-selected] {
  background-color: #b4d7ff !important;
}
.mce-content-body td[data-mce-selected]::-moz-selection, .mce-content-body th[data-mce-selected]::-moz-selection {
  background: none;
}
.mce-content-body td[data-mce-selected]::selection, .mce-content-body th[data-mce-selected]::selection {
  background: none;
}
.mce-content-body td[data-mce-selected] *, .mce-content-body th[data-mce-selected] * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.mce-content-body img::-moz-selection {
  background: none;
}
.mce-content-body img::selection {
  background: none;
}
.ephox-snooker-resizer-bar {
  background-color: #b4d7ff;
  opacity: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.ephox-snooker-resizer-cols {
  cursor: col-resize;
}
.ephox-snooker-resizer-rows {
  cursor: row-resize;
}
.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging {
  opacity: 1;
}
.mce-spellchecker-word {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.75'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");
  background-position: 0 calc(100% + 1px);
  background-repeat: repeat-x;
  background-size: auto 6px;
  cursor: default;
  height: 2rem;
}
.mce-spellchecker-grammar {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%2300A835'%20fill%3D'none'%20stroke-linecap%3D'round'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");
  background-position: 0 calc(100% + 1px);
  background-repeat: repeat-x;
  background-size: auto 6px;
  cursor: default;
}
.mce-toc {
  border: 1px solid gray;
}
.mce-toc h2 {
  margin: 4px;
}
.mce-toc li {
  list-style-type: none;
}
.mce-item-table, .mce-item-table td, .mce-item-table th, .mce-item-table caption {
  border: 1px dashed #bbb;
}
.mce-visualblocks p, .mce-visualblocks h1, .mce-visualblocks h2, .mce-visualblocks h3, .mce-visualblocks h4, .mce-visualblocks h5, .mce-visualblocks h6, .mce-visualblocks div:not([data-mce-bogus]), .mce-visualblocks section, .mce-visualblocks article, .mce-visualblocks blockquote, .mce-visualblocks address, .mce-visualblocks pre, .mce-visualblocks figure, .mce-visualblocks figcaption, .mce-visualblocks hgroup, .mce-visualblocks aside, .mce-visualblocks ul, .mce-visualblocks ol, .mce-visualblocks dl {
  background-repeat: no-repeat;
  border: 1px dashed #bbb;
  margin-left: 3px;
  padding-top: 10px;
}
.mce-visualblocks p {
  background-image: url(data:image/gif;base64,R0lGODlhCQAJAJEAAAAAAP///7u7u////yH5BAEAAAMALAAAAAAJAAkAAAIQnG+CqCN/mlyvsRUpThG6AgA7);
}
.mce-visualblocks h1 {
  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGu1JuxHoAfRNRW3TWXyF2YiRUAOw==);
}
.mce-visualblocks h2 {
  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8Hybbx4oOuqgTynJd6bGlWg3DkJzoaUAAAOw==);
}
.mce-visualblocks h3 {
  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIZjI8Hybbx4oOuqgTynJf2Ln2NOHpQpmhAAQA7);
}
.mce-visualblocks h4 {
  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxInR0zqeAdhtJlXwV1oCll2HaWgAAOw==);
}
.mce-visualblocks h5 {
  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjane4iq5GlW05GgIkIZUAAAOw==);
}
.mce-visualblocks h6 {
  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjan04jep1iZ1XRlAo5bVgAAOw==);
}
.mce-visualblocks div:not([data-mce-bogus]) {
  background-image: url(data:image/gif;base64,R0lGODlhEgAKAIABALu7u////yH5BAEAAAEALAAAAAASAAoAAAIfjI9poI0cgDywrhuxfbrzDEbQM2Ei5aRjmoySW4pAAQA7);
}
.mce-visualblocks section {
  background-image: url(data:image/gif;base64,R0lGODlhKAAKAIABALu7u////yH5BAEAAAEALAAAAAAoAAoAAAI5jI+pywcNY3sBWHdNrplytD2ellDeSVbp+GmWqaDqDMepc8t17Y4vBsK5hDyJMcI6KkuYU+jpjLoKADs=);
}
.mce-visualblocks article {
  background-image: url(data:image/gif;base64,R0lGODlhKgAKAIABALu7u////yH5BAEAAAEALAAAAAAqAAoAAAI6jI+pywkNY3wG0GBvrsd2tXGYSGnfiF7ikpXemTpOiJScasYoDJJrjsG9gkCJ0ag6KhmaIe3pjDYBBQA7);
}
.mce-visualblocks blockquote {
  background-image: url(data:image/gif;base64,R0lGODlhPgAKAIABALu7u////yH5BAEAAAEALAAAAAA+AAoAAAJPjI+py+0Knpz0xQDyuUhvfoGgIX5iSKZYgq5uNL5q69asZ8s5rrf0yZmpNkJZzFesBTu8TOlDVAabUyatguVhWduud3EyiUk45xhTTgMBBQA7);
}
.mce-visualblocks address {
  background-image: url(data:image/gif;base64,R0lGODlhLQAKAIABALu7u////yH5BAEAAAEALAAAAAAtAAoAAAI/jI+pywwNozSP1gDyyZcjb3UaRpXkWaXmZW4OqKLhBmLs+K263DkJK7OJeifh7FicKD9A1/IpGdKkyFpNmCkAADs=);
}
.mce-visualblocks pre {
  background-image: url(data:image/gif;base64,R0lGODlhFQAKAIABALu7uwAAACH5BAEAAAEALAAAAAAVAAoAAAIjjI+ZoN0cgDwSmnpz1NCueYERhnibZVKLNnbOq8IvKpJtVQAAOw==);
}
.mce-visualblocks figure {
  background-image: url(data:image/gif;base64,R0lGODlhJAAKAIAAALu7u////yH5BAEAAAEALAAAAAAkAAoAAAI0jI+py+2fwAHUSFvD3RlvG4HIp4nX5JFSpnZUJ6LlrM52OE7uSWosBHScgkSZj7dDKnWAAgA7);
}
.mce-visualblocks figcaption {
  border: 1px dashed #bbb;
}
.mce-visualblocks hgroup {
  background-image: url(data:image/gif;base64,R0lGODlhJwAKAIABALu7uwAAACH5BAEAAAEALAAAAAAnAAoAAAI3jI+pywYNI3uB0gpsRtt5fFnfNZaVSYJil4Wo03Hv6Z62uOCgiXH1kZIIJ8NiIxRrAZNMZAtQAAA7);
}
.mce-visualblocks aside {
  background-image: url(data:image/gif;base64,R0lGODlhHgAKAIABAKqqqv///yH5BAEAAAEALAAAAAAeAAoAAAItjI+pG8APjZOTzgtqy7I3f1yehmQcFY4WKZbqByutmW4aHUd6vfcVbgudgpYCADs=);
}
.mce-visualblocks ul {
  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIAAALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGuYnqUVSjvw26DzzXiqIDlVwAAOw==);
}
.mce-visualblocks ol {
  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybH6HHt0qourxC6CvzXieHyeWQAAOw==);
}
.mce-visualblocks dl {
  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybEOnmOvUoWznTqeuEjNSCqeGRUAOw==);
}
.mce-visualblocks:not([dir=rtl]) p, .mce-visualblocks:not([dir=rtl]) h1, .mce-visualblocks:not([dir=rtl]) h2, .mce-visualblocks:not([dir=rtl]) h3, .mce-visualblocks:not([dir=rtl]) h4, .mce-visualblocks:not([dir=rtl]) h5, .mce-visualblocks:not([dir=rtl]) h6, .mce-visualblocks:not([dir=rtl]) div:not([data-mce-bogus]), .mce-visualblocks:not([dir=rtl]) section, .mce-visualblocks:not([dir=rtl]) article, .mce-visualblocks:not([dir=rtl]) blockquote, .mce-visualblocks:not([dir=rtl]) address, .mce-visualblocks:not([dir=rtl]) pre, .mce-visualblocks:not([dir=rtl]) figure, .mce-visualblocks:not([dir=rtl]) figcaption, .mce-visualblocks:not([dir=rtl]) hgroup, .mce-visualblocks:not([dir=rtl]) aside, .mce-visualblocks:not([dir=rtl]) ul, .mce-visualblocks:not([dir=rtl]) ol, .mce-visualblocks:not([dir=rtl]) dl {
  margin-left: 3px;
}
.mce-visualblocks[dir=rtl] p, .mce-visualblocks[dir=rtl] h1, .mce-visualblocks[dir=rtl] h2, .mce-visualblocks[dir=rtl] h3, .mce-visualblocks[dir=rtl] h4, .mce-visualblocks[dir=rtl] h5, .mce-visualblocks[dir=rtl] h6, .mce-visualblocks[dir=rtl] div:not([data-mce-bogus]), .mce-visualblocks[dir=rtl] section, .mce-visualblocks[dir=rtl] article, .mce-visualblocks[dir=rtl] blockquote, .mce-visualblocks[dir=rtl] address, .mce-visualblocks[dir=rtl] pre, .mce-visualblocks[dir=rtl] figure, .mce-visualblocks[dir=rtl] figcaption, .mce-visualblocks[dir=rtl] hgroup, .mce-visualblocks[dir=rtl] aside, .mce-visualblocks[dir=rtl] ul, .mce-visualblocks[dir=rtl] ol, .mce-visualblocks[dir=rtl] dl {
  background-position-x: right;
  margin-right: 3px;
}
.mce-nbsp, .mce-shy {
  background: #aaa;
}
.mce-shy::after {
  content: '-';
}
/**
 * Copyright (c) Tiny Technologies, Inc. All rights reserved.
 * Licensed under the LGPL or a commercial license.
 * For LGPL see License.txt in the project root for license information.
 * For commercial licenses see https://www.tiny.cloud/
 */
.tox {
  box-sizing: content-box;
  color: #222f3e;
  cursor: auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  vertical-align: initial;
  white-space: normal;
}
.tox *:not(svg):not(rect) {
  box-sizing: inherit;
  color: inherit;
  cursor: inherit;
  direction: inherit;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  -webkit-tap-highlight-color: inherit;
  text-align: inherit;
  text-decoration: inherit;
  text-shadow: inherit;
  text-transform: inherit;
  vertical-align: inherit;
  white-space: inherit;
}
.tox *:not(svg):not(rect) {
  /* stylelint-disable-line no-duplicate-selectors */
  background: transparent;
  border: 0;
  float: none;
  height: auto;
  margin: 0;
  max-width: none;
  outline: 0;
  padding: 0;
  position: static;
  width: auto;
}
.tox:not([dir=rtl]) {
  direction: ltr;
  text-align: left;
}
.tox[dir=rtl] {
  direction: rtl;
  text-align: right;
}
.tox-tinymce {
  border: 1px solid #cccccc;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  overflow: hidden;
  position: relative;
  visibility: inherit !important;
}
.tox-tinymce-inline {
  border: none;
  box-shadow: none;
}
.tox-tinymce-inline .tox-editor-header {
  border: 1px solid #cccccc;
  border-radius: 0;
  box-shadow: none;
}
.tox-tinymce-aux {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  z-index: 1300;
}
.tox-tinymce *:focus, .tox-tinymce-aux *:focus {
  outline: none;
}
button::-moz-focus-inner {
  border: 0;
}
.tox .accessibility-issue__header {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 4px;
}
.tox .accessibility-issue__description {
  -ms-flex-align: stretch;
      align-items: stretch;
  border: 1px solid #cccccc;
  border-radius: 3px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
}
.tox .accessibility-issue__description > div {
  padding-bottom: 4px;
}
.tox .accessibility-issue__description > div > div {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 4px;
}
.tox .accessibility-issue__description > *:last-child:not(:only-child) {
  border-color: #cccccc;
  border-style: solid;
}
.tox .accessibility-issue__repair {
  margin-top: 16px;
}
.tox .accessibility-issue--info .accessibility-issue__description {
  background-color: rgba(32, 122, 183, 0.1);
  border-color: rgba(32, 122, 183, 0.4);
  color: #222f3e;
}
.tox .accessibility-issue--info .accessibility-issue__description > *:last-child {
  border-color: rgba(32, 122, 183, 0.4);
}
.tox .accessibility-issue--info h2 {
  color: #207ab7;
}
.tox .accessibility-issue--info .tox-icon svg {
  fill: #207ab7;
}
.tox .accessibility-issue--info a .tox-icon {
  color: #207ab7;
}
.tox .accessibility-issue--warn .accessibility-issue__description {
  background-color: rgba(255, 165, 0, 0.1);
  border-color: rgba(255, 165, 0, 0.5);
  color: #222f3e;
}
.tox .accessibility-issue--warn .accessibility-issue__description > *:last-child {
  border-color: rgba(255, 165, 0, 0.5);
}
.tox .accessibility-issue--warn h2 {
  color: #cc8500;
}
.tox .accessibility-issue--warn .tox-icon svg {
  fill: #cc8500;
}
.tox .accessibility-issue--warn a .tox-icon {
  color: #cc8500;
}
.tox .accessibility-issue--error .accessibility-issue__description {
  background-color: rgba(204, 0, 0, 0.1);
  border-color: rgba(204, 0, 0, 0.4);
  color: #222f3e;
}
.tox .accessibility-issue--error .accessibility-issue__description > *:last-child {
  border-color: rgba(204, 0, 0, 0.4);
}
.tox .accessibility-issue--error h2 {
  color: #c00;
}
.tox .accessibility-issue--error .tox-icon svg {
  fill: #c00;
}
.tox .accessibility-issue--error a .tox-icon {
  color: #c00;
}
.tox .accessibility-issue--success .accessibility-issue__description {
  background-color: rgba(120, 171, 70, 0.1);
  border-color: rgba(120, 171, 70, 0.4);
  color: #222f3e;
}
.tox .accessibility-issue--success .accessibility-issue__description > *:last-child {
  border-color: rgba(120, 171, 70, 0.4);
}
.tox .accessibility-issue--success h2 {
  color: #78AB46;
}
.tox .accessibility-issue--success .tox-icon svg {
  fill: #78AB46;
}
.tox .accessibility-issue--success a .tox-icon {
  color: #78AB46;
}
.tox .tox-dialog__body-content .accessibility-issue__header h1, .tox .tox-dialog__body-content .tox-form__group .accessibility-issue__description h2 {
  margin-top: 0;
}
.tox:not([dir=rtl]) .accessibility-issue__header .tox-button {
  margin-left: 4px;
}
.tox:not([dir=rtl]) .accessibility-issue__header > *:nth-last-child(2) {
  margin-left: auto;
}
.tox:not([dir=rtl]) .accessibility-issue__description {
  padding: 4px 4px 4px 8px;
}
.tox:not([dir=rtl]) .accessibility-issue__description > *:last-child {
  border-left-width: 1px;
  padding-left: 4px;
}
.tox[dir=rtl] .accessibility-issue__header .tox-button {
  margin-right: 4px;
}
.tox[dir=rtl] .accessibility-issue__header > *:nth-last-child(2) {
  margin-right: auto;
}
.tox[dir=rtl] .accessibility-issue__description {
  padding: 4px 8px 4px 4px;
}
.tox[dir=rtl] .accessibility-issue__description > *:last-child {
  border-right-width: 1px;
  padding-right: 4px;
}
.tox .tox-anchorbar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 0 0 auto;
      flex: 0 0 auto;
}
.tox .tox-bar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 0 0 auto;
      flex: 0 0 auto;
}
.tox .tox-button {
  background-color: #207ab7;
  background-image: none;
  background-position: 0 0;
  background-repeat: repeat;
  border-color: #207ab7;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  box-shadow: none;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: normal;
  line-height: 24px;
  margin: 0;
  outline: none;
  padding: 4px 16px;
  text-align: center;
  text-decoration: none;
  text-transform: capitalize;
  white-space: nowrap;
}
.tox .tox-button[disabled] {
  background-color: #207ab7;
  background-image: none;
  border-color: #207ab7;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: not-allowed;
}
.tox .tox-button:focus:not(:disabled) {
  background-color: #1c6ca1;
  background-image: none;
  border-color: #1c6ca1;
  box-shadow: none;
  color: #fff;
}
.tox .tox-button:hover:not(:disabled) {
  background-color: #1c6ca1;
  background-image: none;
  border-color: #1c6ca1;
  box-shadow: none;
  color: #fff;
}
.tox .tox-button:active:not(:disabled) {
  background-color: #185d8c;
  background-image: none;
  border-color: #185d8c;
  box-shadow: none;
  color: #fff;
}
.tox .tox-button--secondary {
  background-color: #f0f0f0;
  background-image: none;
  background-position: 0 0;
  background-repeat: repeat;
  border-color: #f0f0f0;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  box-shadow: none;
  color: #222f3e;
  outline: none;
  padding: 4px 16px;
  text-decoration: none;
  text-transform: capitalize;
}
.tox .tox-button--secondary[disabled] {
  background-color: #f0f0f0;
  background-image: none;
  border-color: #f0f0f0;
  box-shadow: none;
  color: rgba(34, 47, 62, 0.5);
}
.tox .tox-button--secondary:focus:not(:disabled) {
  background-color: #e3e3e3;
  background-image: none;
  border-color: #e3e3e3;
  box-shadow: none;
  color: #222f3e;
}
.tox .tox-button--secondary:hover:not(:disabled) {
  background-color: #e3e3e3;
  background-image: none;
  border-color: #e3e3e3;
  box-shadow: none;
  color: #222f3e;
}
.tox .tox-button--secondary:active:not(:disabled) {
  background-color: #d6d6d6;
  background-image: none;
  border-color: #d6d6d6;
  box-shadow: none;
  color: #222f3e;
}
.tox .tox-button--icon, .tox .tox-button.tox-button--icon, .tox .tox-button.tox-button--secondary.tox-button--icon {
  padding: 4px;
}
.tox .tox-button--icon .tox-icon svg, .tox .tox-button.tox-button--icon .tox-icon svg, .tox .tox-button.tox-button--secondary.tox-button--icon .tox-icon svg {
  display: block;
  fill: currentColor;
}
.tox .tox-button-link {
  background: 0;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.3;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
.tox .tox-button-link--sm {
  font-size: 14px;
}
.tox .tox-button--naked {
  background-color: transparent;
  border-color: transparent;
  box-shadow: unset;
  color: #222f3e;
}
.tox .tox-button--naked[disabled] {
  background-color: #f0f0f0;
  border-color: #f0f0f0;
  box-shadow: none;
  color: rgba(34, 47, 62, 0.5);
}
.tox .tox-button--naked:hover:not(:disabled) {
  background-color: #e3e3e3;
  border-color: #e3e3e3;
  box-shadow: none;
  color: #222f3e;
}
.tox .tox-button--naked:focus:not(:disabled) {
  background-color: #e3e3e3;
  border-color: #e3e3e3;
  box-shadow: none;
  color: #222f3e;
}
.tox .tox-button--naked:active:not(:disabled) {
  background-color: #d6d6d6;
  border-color: #d6d6d6;
  box-shadow: none;
  color: #222f3e;
}
.tox .tox-button--naked .tox-icon svg {
  fill: currentColor;
}
.tox .tox-button--naked.tox-button--icon:hover:not(:disabled) {
  color: #222f3e;
}
.tox .tox-checkbox {
  -ms-flex-align: center;
      align-items: center;
  border-radius: 3px;
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  height: 36px;
  min-width: 36px;
}
.tox .tox-checkbox__input {
  /* Hide from view but visible to screen readers */
  height: 1px;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 1px;
}
.tox .tox-checkbox__icons {
  -ms-flex-align: center;
      align-items: center;
  border-radius: 3px;
  box-shadow: 0 0 0 2px transparent;
  box-sizing: content-box;
  display: -ms-flexbox;
  display: flex;
  height: 24px;
  -ms-flex-pack: center;
      justify-content: center;
  padding: calc(4px - 1px);
  width: 24px;
}
.tox .tox-checkbox__icons .tox-checkbox-icon__unchecked svg {
  display: block;
  fill: rgba(34, 47, 62, 0.3);
}
.tox .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg {
  display: none;
  fill: #207ab7;
}
.tox .tox-checkbox__icons .tox-checkbox-icon__checked svg {
  display: none;
  fill: #207ab7;
}
.tox .tox-checkbox--disabled {
  color: rgba(34, 47, 62, 0.5);
  cursor: not-allowed;
}
.tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__checked svg {
  fill: rgba(34, 47, 62, 0.5);
}
.tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__unchecked svg {
  fill: rgba(34, 47, 62, 0.5);
}
.tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg {
  fill: rgba(34, 47, 62, 0.5);
}
.tox input.tox-checkbox__input:checked + .tox-checkbox__icons .tox-checkbox-icon__unchecked svg {
  display: none;
}
.tox input.tox-checkbox__input:checked + .tox-checkbox__icons .tox-checkbox-icon__checked svg {
  display: block;
}
.tox input.tox-checkbox__input:indeterminate + .tox-checkbox__icons .tox-checkbox-icon__unchecked svg {
  display: none;
}
.tox input.tox-checkbox__input:indeterminate + .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg {
  display: block;
}
.tox input.tox-checkbox__input:focus + .tox-checkbox__icons {
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #207ab7;
  padding: calc(4px - 1px);
}
.tox:not([dir=rtl]) .tox-checkbox__label {
  margin-left: 4px;
}
.tox:not([dir=rtl]) .tox-checkbox__input {
  left: -10000px;
}
.tox:not([dir=rtl]) .tox-bar .tox-checkbox {
  margin-left: 4px;
}
.tox[dir=rtl] .tox-checkbox__label {
  margin-right: 4px;
}
.tox[dir=rtl] .tox-checkbox__input {
  right: -10000px;
}
.tox[dir=rtl] .tox-bar .tox-checkbox {
  margin-right: 4px;
}
.tox {
  /* stylelint-disable-next-line no-descending-specificity */
}
.tox .tox-collection--toolbar .tox-collection__group {
  display: -ms-flexbox;
  display: flex;
  padding: 0;
}
.tox .tox-collection--grid .tox-collection__group {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  max-height: 208px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
}
.tox .tox-collection--list .tox-collection__group {
  border-bottom-width: 0;
  border-color: #cccccc;
  border-left-width: 0;
  border-right-width: 0;
  border-style: solid;
  border-top-width: 1px;
  padding: 4px 0;
}
.tox .tox-collection--list .tox-collection__group:first-child {
  border-top-width: 0;
}
.tox .tox-collection__group-heading {
  background-color: #e6e6e6;
  color: rgba(34, 47, 62, 0.7);
  cursor: default;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  margin-bottom: 4px;
  margin-top: -4px;
  padding: 4px 8px;
  text-transform: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.tox .tox-collection__item {
  -ms-flex-align: center;
      align-items: center;
  color: #222f3e;
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.tox .tox-collection--list .tox-collection__item {
  padding: 4px 8px;
}
.tox .tox-collection--toolbar .tox-collection__item {
  border-radius: 3px;
  padding: 4px;
}
.tox .tox-collection--grid .tox-collection__item {
  border-radius: 3px;
  padding: 4px;
}
.tox .tox-collection--list .tox-collection__item--enabled {
  background-color: #fff;
  color: #222f3e;
}
.tox .tox-collection--list .tox-collection__item--active {
  background-color: #dee0e2;
}
.tox .tox-collection--toolbar .tox-collection__item--enabled {
  background-color: #c8cbcf;
  color: #222f3e;
}
.tox .tox-collection--toolbar .tox-collection__item--active {
  background-color: #dee0e2;
}
.tox .tox-collection--grid .tox-collection__item--enabled {
  background-color: #c8cbcf;
  color: #222f3e;
}
.tox .tox-collection--grid .tox-collection__item--active {
  background-color: #dee0e2;
}
.tox .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
  color: #222f3e;
}
.tox .tox-collection--toolbar .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
  color: #222f3e;
}
.tox .tox-collection--grid .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
  color: #222f3e;
}
.tox .tox-collection__item--state-disabled {
  background-color: transparent;
  color: rgba(34, 47, 62, 0.5);
  cursor: not-allowed;
}
.tox .tox-collection__item-icon {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  height: 24px;
  -ms-flex-pack: center;
      justify-content: center;
  width: 24px;
}
.tox .tox-collection__item-icon svg {
  fill: currentColor;
}
.tox .tox-collection--toolbar-lg .tox-collection__item-icon {
  height: 48px;
  width: 48px;
}
.tox .tox-collection__item-label {
  color: currentColor;
  display: inline-block;
  -ms-flex: 1;
      flex: 1;
  -ms-flex-preferred-size: auto;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  line-height: 24px;
  text-transform: none;
  word-break: break-all;
}
.tox .tox-collection__item-accessory {
  color: rgba(34, 47, 62, 0.7);
  display: inline-block;
  font-size: 14px;
  height: 24px;
  line-height: 24px;
  text-transform: none;
}
.tox .tox-collection__item-caret {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  min-height: 24px;
}
.tox .tox-collection__item-caret::after {
  content: '';
  font-size: 0;
  min-height: inherit;
}
.tox .tox-collection__item-caret svg {
  fill: #222f3e;
}
.tox .tox-collection__item[role="menuitemcheckbox"]:not(.tox-collection__item--enabled) .tox-collection__item-checkmark svg {
  display: none;
}
.tox .tox-collection--horizontal {
  background-color: #fff;
  border: 1px solid #cccccc;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 0 0 auto;
      flex: 0 0 auto;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  margin-bottom: 0;
  overflow-x: auto;
  padding: 0;
}
.tox .tox-collection--horizontal .tox-collection__group {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  margin: 0;
  padding: 0 4px;
}
.tox .tox-collection--horizontal .tox-collection__item {
  height: 34px;
  margin: 2px 0 3px 0;
  padding: 0 4px;
}
.tox .tox-collection--horizontal .tox-collection__item-label {
  white-space: nowrap;
}
.tox .tox-collection--horizontal .tox-collection__item-caret {
  margin-left: 4px;
}
.tox:not([dir=rtl]) .tox-collection--horizontal .tox-collection__group:not(:last-of-type) {
  border-right: 1px solid #cccccc;
}
.tox:not([dir=rtl]) .tox-collection--list .tox-collection__item > *:not(:first-child) {
  margin-left: 8px;
}
.tox:not([dir=rtl]) .tox-collection--list .tox-collection__item-label:first-child {
  margin-left: 4px;
}
.tox:not([dir=rtl]) .tox-collection__item-accessory {
  margin-left: 16px;
  text-align: right;
}
.tox:not([dir=rtl]) .tox-collection .tox-collection__item-caret {
  margin-left: 16px;
}
.tox[dir=rtl] .tox-collection--horizontal .tox-collection__group:not(:last-of-type) {
  border-left: 1px solid #cccccc;
}
.tox[dir=rtl] .tox-collection--list .tox-collection__item > *:not(:first-child) {
  margin-right: 8px;
}
.tox[dir=rtl] .tox-collection--list .tox-collection__item-label:first-child {
  margin-right: 4px;
}
.tox[dir=rtl] .tox-collection__item-icon-rtl {
  /* stylelint-disable-next-line no-descending-specificity */
}
.tox[dir=rtl] .tox-collection__item-icon-rtl .tox-collection__item-icon svg {
  transform: rotateY(180deg);
}
.tox[dir=rtl] .tox-collection__item-accessory {
  margin-right: 16px;
  text-align: left;
}
.tox[dir=rtl] .tox-collection .tox-collection__item-caret {
  margin-right: 16px;
  transform: rotateY(180deg);
}
.tox[dir=rtl] .tox-collection--horizontal .tox-collection__item-caret {
  margin-right: 4px;
}
.tox .tox-color-picker-container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  height: 225px;
  margin: 0;
}
.tox .tox-sv-palette {
  box-sizing: border-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
}
.tox .tox-sv-palette-spectrum {
  height: 100%;
}
.tox .tox-sv-palette, .tox .tox-sv-palette-spectrum {
  width: 225px;
}
.tox .tox-sv-palette-thumb {
  background: none;
  border: 1px solid black;
  border-radius: 50%;
  box-sizing: content-box;
  height: 12px;
  position: absolute;
  width: 12px;
}
.tox .tox-sv-palette-inner-thumb {
  border: 1px solid white;
  border-radius: 50%;
  height: 10px;
  position: absolute;
  width: 10px;
}
.tox .tox-hue-slider {
  box-sizing: border-box;
  height: 100%;
  width: 25px;
}
.tox .tox-hue-slider-spectrum {
  background: linear-gradient(to bottom, #f00, #ff0080, #f0f, #8000ff, #00f, #0080ff, #0ff, #00ff80, #0f0, #80ff00, #ff0, #ff8000, #f00);
  height: 100%;
  width: 100%;
}
.tox .tox-hue-slider, .tox .tox-hue-slider-spectrum {
  width: 20px;
}
.tox .tox-hue-slider-thumb {
  background: white;
  border: 1px solid black;
  box-sizing: content-box;
  height: 4px;
  width: 100%;
}
.tox .tox-rgb-form {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: justify;
      justify-content: space-between;
}
.tox .tox-rgb-form div {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  margin-bottom: 5px;
  width: inherit;
}
.tox .tox-rgb-form input {
  width: 6em;
}
.tox .tox-rgb-form input.tox-invalid {
  /* Need !important to override Chrome's focus styling unfortunately */
  border: 1px solid red !important;
}
.tox .tox-rgb-form .tox-rgba-preview {
  border: 1px solid black;
  -ms-flex-positive: 2;
      flex-grow: 2;
  margin-bottom: 0;
}
.tox:not([dir=rtl]) .tox-sv-palette {
  margin-right: 15px;
}
.tox:not([dir=rtl]) .tox-hue-slider {
  margin-right: 15px;
}
.tox:not([dir=rtl]) .tox-hue-slider-thumb {
  margin-left: -1px;
}
.tox:not([dir=rtl]) .tox-rgb-form label {
  margin-right: 0.5em;
}
.tox[dir=rtl] .tox-sv-palette {
  margin-left: 15px;
}
.tox[dir=rtl] .tox-hue-slider {
  margin-left: 15px;
}
.tox[dir=rtl] .tox-hue-slider-thumb {
  margin-right: -1px;
}
.tox[dir=rtl] .tox-rgb-form label {
  margin-left: 0.5em;
}
.tox .tox-toolbar .tox-swatches, .tox .tox-toolbar__primary .tox-swatches, .tox .tox-toolbar__overflow .tox-swatches {
  margin: 2px 0 3px 4px;
}
.tox .tox-collection--list .tox-collection__group .tox-swatches-menu {
  border: 0;
  margin: -4px 0;
}
.tox .tox-swatches__row {
  display: -ms-flexbox;
  display: flex;
}
.tox .tox-swatch {
  height: 30px;
  transition: transform 0.15s, box-shadow 0.15s;
  width: 30px;
}
.tox .tox-swatch:hover, .tox .tox-swatch:focus {
  box-shadow: 0 0 0 1px rgba(127, 127, 127, 0.3) inset;
  transform: scale(0.8);
}
.tox .tox-swatch--remove {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
}
.tox .tox-swatch--remove svg path {
  stroke: #e74c3c;
}
.tox .tox-swatches__picker-btn {
  -ms-flex-align: center;
      align-items: center;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  height: 30px;
  -ms-flex-pack: center;
      justify-content: center;
  outline: none;
  padding: 0;
  width: 30px;
}
.tox .tox-swatches__picker-btn svg {
  height: 24px;
  width: 24px;
}
.tox .tox-swatches__picker-btn:hover {
  background: #dee0e2;
}
.tox:not([dir=rtl]) .tox-swatches__picker-btn {
  margin-left: auto;
}
.tox[dir=rtl] .tox-swatches__picker-btn {
  margin-right: auto;
}
.tox .tox-comment-thread {
  background: #fff;
  position: relative;
}
.tox .tox-comment-thread > *:not(:first-child) {
  margin-top: 8px;
}
.tox .tox-comment {
  background: #fff;
  border: 1px solid #cccccc;
  border-radius: 3px;
  box-shadow: 0 4px 8px 0 rgba(34, 47, 62, 0.1);
  padding: 8px 8px 16px 8px;
  position: relative;
}
.tox .tox-comment__header {
  -ms-flex-align: center;
      align-items: center;
  color: #222f3e;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
}
.tox .tox-comment__date {
  color: rgba(34, 47, 62, 0.7);
  font-size: 12px;
}
.tox .tox-comment__body {
  color: #222f3e;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  line-height: 1.3;
  margin-top: 8px;
  position: relative;
  text-transform: initial;
}
.tox .tox-comment__body textarea {
  resize: none;
  white-space: normal;
  width: 100%;
}
.tox .tox-comment__expander {
  padding-top: 8px;
}
.tox .tox-comment__expander p {
  color: rgba(34, 47, 62, 0.7);
  font-size: 14px;
  font-style: normal;
}
.tox .tox-comment__body p {
  margin: 0;
}
.tox .tox-comment__buttonspacing {
  padding-top: 16px;
  text-align: center;
}
.tox .tox-comment-thread__overlay::after {
  background: #fff;
  bottom: 0;
  content: "";
  display: -ms-flexbox;
  display: flex;
  left: 0;
  opacity: 0.9;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 5;
}
.tox .tox-comment__reply {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: end;
      justify-content: flex-end;
  margin-top: 8px;
}
.tox .tox-comment__reply > *:first-child {
  margin-bottom: 8px;
  width: 100%;
}
.tox .tox-comment__edit {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: end;
      justify-content: flex-end;
  margin-top: 16px;
}
.tox .tox-comment__gradient::after {
  background: linear-gradient(rgba(255, 255, 255, 0), #fff);
  bottom: 0;
  content: "";
  display: block;
  height: 5em;
  margin-top: -40px;
  position: absolute;
  width: 100%;
}
.tox .tox-comment__overlay {
  background: #fff;
  bottom: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-positive: 1;
      flex-grow: 1;
  left: 0;
  opacity: 0.9;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  z-index: 5;
}
.tox .tox-comment__loading-text {
  -ms-flex-align: center;
      align-items: center;
  color: #222f3e;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  position: relative;
}
.tox .tox-comment__loading-text > div {
  padding-bottom: 16px;
}
.tox .tox-comment__overlaytext {
  bottom: 0;
  -ms-flex-direction: column;
      flex-direction: column;
  font-size: 14px;
  left: 0;
  padding: 1em;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
}
.tox .tox-comment__overlaytext p {
  background-color: #fff;
  box-shadow: 0 0 8px 8px #fff;
  color: #222f3e;
  text-align: center;
}
.tox .tox-comment__overlaytext div:nth-of-type(2) {
  font-size: 0.8em;
}
.tox .tox-comment__busy-spinner {
  -ms-flex-align: center;
      align-items: center;
  background-color: #fff;
  bottom: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 20;
}
.tox .tox-comment__scroll {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-negative: 1;
      flex-shrink: 1;
  overflow: auto;
}
.tox .tox-conversations {
  margin: 8px;
}
.tox:not([dir=rtl]) .tox-comment__edit {
  margin-left: 8px;
}
.tox:not([dir=rtl]) .tox-comment__buttonspacing > *:last-child, .tox:not([dir=rtl]) .tox-comment__edit > *:last-child, .tox:not([dir=rtl]) .tox-comment__reply > *:last-child {
  margin-left: 8px;
}
.tox[dir=rtl] .tox-comment__edit {
  margin-right: 8px;
}
.tox[dir=rtl] .tox-comment__buttonspacing > *:last-child, .tox[dir=rtl] .tox-comment__edit > *:last-child, .tox[dir=rtl] .tox-comment__reply > *:last-child {
  margin-right: 8px;
}
.tox .tox-user {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
}
.tox .tox-user__avatar svg {
  fill: rgba(34, 47, 62, 0.7);
}
.tox .tox-user__name {
  color: rgba(34, 47, 62, 0.7);
  font-size: 12px;
  font-style: normal;
  font-weight: bold;
  text-transform: uppercase;
}
.tox:not([dir=rtl]) .tox-user__avatar svg {
  margin-right: 8px;
}
.tox:not([dir=rtl]) .tox-user__avatar + .tox-user__name {
  margin-left: 8px;
}
.tox[dir=rtl] .tox-user__avatar svg {
  margin-left: 8px;
}
.tox[dir=rtl] .tox-user__avatar + .tox-user__name {
  margin-right: 8px;
}
.tox .tox-dialog-wrap {
  -ms-flex-align: center;
      align-items: center;
  bottom: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1100;
}
.tox .tox-dialog-wrap__backdrop {
  background-color: rgba(255, 255, 255, 0.75);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}
.tox .tox-dialog-wrap__backdrop--opaque {
  background-color: #fff;
}
.tox .tox-dialog {
  background-color: #fff;
  border-color: #cccccc;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  box-shadow: 0 16px 16px -10px rgba(34, 47, 62, 0.15), 0 0 40px 1px rgba(34, 47, 62, 0.15);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  max-height: 100%;
  max-width: 480px;
  overflow: hidden;
  position: relative;
  width: 95vw;
  z-index: 2;
}
@media only screen and (max-width:767px) {
  body:not(.tox-force-desktop) .tox .tox-dialog {
    -ms-flex-item-align: start;
        align-self: flex-start;
    margin: 8px auto;
    width: calc(100vw - 16px);
  }
}
.tox .tox-dialog-inline {
  z-index: 1100;
}
.tox .tox-dialog__header {
  -ms-flex-align: center;
      align-items: center;
  background-color: #fff;
  border-bottom: none;
  color: #222f3e;
  display: -ms-flexbox;
  display: flex;
  font-size: 16px;
  -ms-flex-pack: justify;
      justify-content: space-between;
  padding: 8px 16px 0 16px;
  position: relative;
}
.tox .tox-dialog__header .tox-button {
  z-index: 1;
}
.tox .tox-dialog__draghandle {
  cursor: grab;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.tox .tox-dialog__draghandle:active {
  cursor: grabbing;
}
.tox .tox-dialog__dismiss {
  margin-left: auto;
}
.tox .tox-dialog__title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: normal;
  line-height: 1.3;
  margin: 0;
  text-transform: none;
}
.tox .tox-dialog__body {
  color: #222f3e;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
      flex: 1;
  -ms-flex-preferred-size: auto;
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
  line-height: 1.3;
  min-width: 0;
  text-align: left;
  text-transform: none;
}
@media only screen and (max-width:767px) {
  body:not(.tox-force-desktop) .tox .tox-dialog__body {
    -ms-flex-direction: column;
        flex-direction: column;
  }
}
.tox .tox-dialog__body-nav {
  -ms-flex-align: start;
      align-items: flex-start;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  padding: 16px 16px;
}
@media only screen and (max-width:767px) {
  body:not(.tox-force-desktop) .tox .tox-dialog__body-nav {
    -ms-flex-direction: row;
        flex-direction: row;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    padding-bottom: 0;
  }
}
.tox .tox-dialog__body-nav-item {
  border-bottom: 2px solid transparent;
  color: rgba(34, 47, 62, 0.7);
  display: inline-block;
  font-size: 14px;
  line-height: 1.3;
  margin-bottom: 8px;
  text-decoration: none;
  white-space: nowrap;
}
.tox .tox-dialog__body-nav-item:focus {
  background-color: rgba(32, 122, 183, 0.1);
}
.tox .tox-dialog__body-nav-item--active {
  border-bottom: 2px solid #207ab7;
  color: #207ab7;
}
.tox .tox-dialog__body-content {
  box-sizing: border-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
      flex: 1;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-preferred-size: auto;
  max-height: 650px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px;
}
.tox .tox-dialog__body-content > * {
  margin-bottom: 0;
  margin-top: 16px;
}
.tox .tox-dialog__body-content > *:first-child {
  margin-top: 0;
}
.tox .tox-dialog__body-content > *:last-child {
  margin-bottom: 0;
}
.tox .tox-dialog__body-content > *:only-child {
  margin-bottom: 0;
  margin-top: 0;
}
.tox .tox-dialog__body-content a {
  color: #207ab7;
  cursor: pointer;
  text-decoration: none;
}
.tox .tox-dialog__body-content a:hover, .tox .tox-dialog__body-content a:focus {
  color: #185d8c;
  text-decoration: none;
}
.tox .tox-dialog__body-content a:active {
  color: #185d8c;
  text-decoration: none;
}
.tox .tox-dialog__body-content svg {
  fill: #222f3e;
}
.tox .tox-dialog__body-content ul {
  display: block;
  list-style-type: disc;
  margin-bottom: 16px;
  -webkit-margin-end: 0;
          margin-inline-end: 0;
  -webkit-margin-start: 0;
          margin-inline-start: 0;
  -webkit-padding-start: 2.5rem;
          padding-inline-start: 2.5rem;
}
.tox .tox-dialog__body-content .tox-form__group h1 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 16px;
  margin-top: 2rem;
}
.tox .tox-dialog__body-content .tox-form__group h2 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
  margin-top: 2rem;
}
.tox .tox-dialog__body-content .tox-form__group p {
  margin-bottom: 16px;
}
.tox .tox-dialog__body-content .tox-form__group h1:first-child, .tox .tox-dialog__body-content .tox-form__group h2:first-child, .tox .tox-dialog__body-content .tox-form__group p:first-child {
  margin-top: 0;
}
.tox .tox-dialog__body-content .tox-form__group h1:last-child, .tox .tox-dialog__body-content .tox-form__group h2:last-child, .tox .tox-dialog__body-content .tox-form__group p:last-child {
  margin-bottom: 0;
}
.tox .tox-dialog__body-content .tox-form__group h1:only-child, .tox .tox-dialog__body-content .tox-form__group h2:only-child, .tox .tox-dialog__body-content .tox-form__group p:only-child {
  margin-bottom: 0;
  margin-top: 0;
}
.tox .tox-dialog--width-lg {
  height: 650px;
  max-width: 1200px;
}
.tox .tox-dialog--width-md {
  max-width: 800px;
}
.tox .tox-dialog--width-md .tox-dialog__body-content {
  overflow: auto;
}
.tox .tox-dialog__body-content--centered {
  text-align: center;
}
.tox .tox-dialog__footer {
  -ms-flex-align: center;
      align-items: center;
  background-color: #fff;
  border-top: 1px solid #cccccc;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  padding: 8px 16px;
}
.tox .tox-dialog__footer-start, .tox .tox-dialog__footer-end {
  display: -ms-flexbox;
  display: flex;
}
.tox .tox-dialog__busy-spinner {
  -ms-flex-align: center;
      align-items: center;
  background-color: rgba(255, 255, 255, 0.75);
  bottom: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 3;
}
.tox .tox-dialog__table {
  border-collapse: collapse;
  width: 100%;
}
.tox .tox-dialog__table thead th {
  font-weight: bold;
  padding-bottom: 8px;
}
.tox .tox-dialog__table tbody tr {
  border-bottom: 1px solid #cccccc;
}
.tox .tox-dialog__table tbody tr:last-child {
  border-bottom: none;
}
.tox .tox-dialog__table td {
  padding-bottom: 8px;
  padding-top: 8px;
}
.tox .tox-dialog__popups {
  position: absolute;
  width: 100%;
  z-index: 1100;
}
.tox .tox-dialog__body-iframe {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
      flex: 1;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-preferred-size: auto;
}
.tox .tox-dialog__body-iframe .tox-navobj {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
      flex: 1;
  -ms-flex-preferred-size: auto;
}
.tox .tox-dialog__body-iframe .tox-navobj :nth-child(2) {
  -ms-flex: 1;
      flex: 1;
  -ms-flex-preferred-size: auto;
  height: 100%;
}
.tox .tox-dialog-dock-fadeout {
  opacity: 0;
  visibility: hidden;
}
.tox .tox-dialog-dock-fadein {
  opacity: 1;
  visibility: visible;
}
.tox .tox-dialog-dock-transition {
  transition: visibility 0s linear 0.3s, opacity 0.3s ease;
}
.tox .tox-dialog-dock-transition.tox-dialog-dock-fadein {
  transition-delay: 0s;
}
body.tox-dialog__disable-scroll {
  overflow: hidden;
}
.tox.tox-platform-ie {
  /* IE11 CSS styles go here */
}
.tox.tox-platform-ie .tox-dialog-wrap {
  position: -ms-device-fixed;
}
@media only screen and (max-width:767px) {
  body:not(.tox-force-desktop) .tox:not([dir=rtl]) .tox-dialog__body-nav {
    margin-right: 0;
  }
}
@media only screen and (max-width:767px) {
  body:not(.tox-force-desktop) .tox:not([dir=rtl]) .tox-dialog__body-nav-item:not(:first-child) {
    margin-left: 8px;
  }
}
.tox:not([dir=rtl]) .tox-dialog__footer .tox-dialog__footer-start > *, .tox:not([dir=rtl]) .tox-dialog__footer .tox-dialog__footer-end > * {
  margin-left: 8px;
}
.tox[dir=rtl] .tox-dialog__body {
  text-align: right;
}
@media only screen and (max-width:767px) {
  body:not(.tox-force-desktop) .tox[dir=rtl] .tox-dialog__body-nav {
    margin-left: 0;
  }
}
@media only screen and (max-width:767px) {
  body:not(.tox-force-desktop) .tox[dir=rtl] .tox-dialog__body-nav-item:not(:first-child) {
    margin-right: 8px;
  }
}
.tox[dir=rtl] .tox-dialog__footer .tox-dialog__footer-start > *, .tox[dir=rtl] .tox-dialog__footer .tox-dialog__footer-end > * {
  margin-right: 8px;
}
.tox .tox-dropzone-container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
      flex: 1;
  -ms-flex-preferred-size: auto;
}
.tox .tox-dropzone {
  -ms-flex-align: center;
      align-items: center;
  background: #fff;
  border: 2px dashed #cccccc;
  box-sizing: border-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-positive: 1;
      flex-grow: 1;
  -ms-flex-pack: center;
      justify-content: center;
  min-height: 100px;
  padding: 10px;
}
.tox .tox-dropzone p {
  color: rgba(34, 47, 62, 0.7);
  margin: 0 0 16px 0;
}
.tox .tox-edit-area {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
      flex: 1;
  -ms-flex-preferred-size: auto;
  overflow: hidden;
  position: relative;
}
.tox .tox-edit-area__iframe {
  background-color: #fff;
  border: 0;
  box-sizing: border-box;
  -ms-flex: 1;
      flex: 1;
  -ms-flex-preferred-size: auto;
  height: 100%;
  position: absolute;
  width: 100%;
}
.tox.tox-inline-edit-area {
  border: 1px dotted #cccccc;
}
.tox .tox-editor-container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  -ms-flex-direction: column;
      flex-direction: column;
  overflow: hidden;
}
.tox .tox-editor-header {
  z-index: 1;
}
.tox:not(.tox-tinymce-inline) .tox-editor-header {
  box-shadow: none;
  transition: box-shadow 0.5s;
}
.tox.tox-tinymce--toolbar-bottom .tox-editor-header, .tox.tox-tinymce-inline .tox-editor-header {
  margin-bottom: -1px;
}
.tox.tox-tinymce--toolbar-sticky-on .tox-editor-header {
  box-shadow: 0 4px 4px -3px rgba(0, 0, 0, 0.25);
}
.tox-editor-dock-fadeout {
  opacity: 0;
  visibility: hidden;
}
.tox-editor-dock-fadein {
  opacity: 1;
  visibility: visible;
}
.tox-editor-dock-transition {
  transition: visibility 0s linear 0.25s, opacity 0.25s ease;
}
.tox-editor-dock-transition.tox-editor-dock-fadein {
  transition-delay: 0s;
}
.tox .tox-control-wrap {
  -ms-flex: 1;
      flex: 1;
  position: relative;
}
.tox .tox-control-wrap:not(.tox-control-wrap--status-invalid) .tox-control-wrap__status-icon-invalid, .tox .tox-control-wrap:not(.tox-control-wrap--status-unknown) .tox-control-wrap__status-icon-unknown, .tox .tox-control-wrap:not(.tox-control-wrap--status-valid) .tox-control-wrap__status-icon-valid {
  display: none;
}
.tox .tox-control-wrap svg {
  display: block;
}
.tox .tox-control-wrap__status-icon-wrap {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.tox .tox-control-wrap__status-icon-invalid svg {
  fill: #c00;
}
.tox .tox-control-wrap__status-icon-unknown svg {
  fill: orange;
}
.tox .tox-control-wrap__status-icon-valid svg {
  fill: green;
}
.tox:not([dir=rtl]) .tox-control-wrap--status-invalid .tox-textfield, .tox:not([dir=rtl]) .tox-control-wrap--status-unknown .tox-textfield, .tox:not([dir=rtl]) .tox-control-wrap--status-valid .tox-textfield {
  padding-right: 32px;
}
.tox:not([dir=rtl]) .tox-control-wrap__status-icon-wrap {
  right: 4px;
}
.tox[dir=rtl] .tox-control-wrap--status-invalid .tox-textfield, .tox[dir=rtl] .tox-control-wrap--status-unknown .tox-textfield, .tox[dir=rtl] .tox-control-wrap--status-valid .tox-textfield {
  padding-left: 32px;
}
.tox[dir=rtl] .tox-control-wrap__status-icon-wrap {
  left: 4px;
}
.tox .tox-autocompleter {
  max-width: 25em;
}
.tox .tox-autocompleter .tox-menu {
  max-width: 25em;
}
.tox .tox-autocompleter .tox-autocompleter-highlight {
  font-weight: bold;
}
.tox .tox-color-input {
  display: -ms-flexbox;
  display: flex;
  position: relative;
  z-index: 1;
}
.tox .tox-color-input .tox-textfield {
  z-index: -1;
}
.tox .tox-color-input span {
  border-color: rgba(34, 47, 62, 0.2);
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  box-shadow: none;
  box-sizing: border-box;
  cursor: pointer;
  height: 24px;
  position: absolute;
  top: 6px;
  width: 24px;
}
.tox .tox-color-input span:focus {
  border-color: #207ab7;
}
.tox .tox-color-input span::before {
  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%), linear-gradient(-45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.25) 75%), linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.25) 75%);
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  background-size: 12px 12px;
  border: 1px solid #fff;
  border-radius: 3px;
  box-sizing: border-box;
  content: '';
  height: 24px;
  left: -1px;
  position: absolute;
  top: -1px;
  width: 24px;
  z-index: -1;
}
.tox:not([dir=rtl]) .tox-color-input .tox-textfield {
  padding-left: 36px;
}
.tox:not([dir=rtl]) .tox-color-input span {
  left: 6px;
}
.tox[dir="rtl"] .tox-color-input .tox-textfield {
  padding-right: 36px;
}
.tox[dir="rtl"] .tox-color-input span {
  right: 6px;
}
.tox .tox-label, .tox .tox-toolbar-label {
  color: rgba(34, 47, 62, 0.7);
  display: block;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  line-height: 1.3;
  padding: 0 8px 0 0;
  text-transform: none;
  white-space: nowrap;
}
.tox .tox-toolbar-label {
  padding: 0 8px;
}
.tox[dir=rtl] .tox-label {
  padding: 0 0 0 8px;
}
.tox .tox-form {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
      flex: 1;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-preferred-size: auto;
}
.tox .tox-form__group {
  box-sizing: border-box;
  margin-bottom: 4px;
}
.tox .tox-form-group--maximize {
  -ms-flex: 1;
      flex: 1;
}
.tox .tox-form__group--error {
  color: #c00;
}
.tox .tox-form__group--collection {
  display: -ms-flexbox;
  display: flex;
}
.tox .tox-form__grid {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: justify;
      justify-content: space-between;
}
.tox .tox-form__grid--2col > .tox-form__group {
  width: calc(50% - (8px / 2));
}
.tox .tox-form__grid--3col > .tox-form__group {
  width: calc(100% / 3 - (8px / 2));
}
.tox .tox-form__grid--4col > .tox-form__group {
  width: calc(25% - (8px / 2));
}
.tox .tox-form__controls-h-stack {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
}
.tox .tox-form__group--inline {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
}
.tox .tox-form__group--stretched {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
      flex: 1;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-preferred-size: auto;
}
.tox .tox-form__group--stretched .tox-textarea {
  -ms-flex: 1;
      flex: 1;
  -ms-flex-preferred-size: auto;
}
.tox .tox-form__group--stretched .tox-navobj {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
      flex: 1;
  -ms-flex-preferred-size: auto;
}
.tox .tox-form__group--stretched .tox-navobj :nth-child(2) {
  -ms-flex: 1;
      flex: 1;
  -ms-flex-preferred-size: auto;
  height: 100%;
}
.tox:not([dir=rtl]) .tox-form__controls-h-stack > *:not(:first-child) {
  margin-left: 4px;
}
.tox[dir=rtl] .tox-form__controls-h-stack > *:not(:first-child) {
  margin-right: 4px;
}
.tox .tox-lock.tox-locked .tox-lock-icon__unlock, .tox .tox-lock:not(.tox-locked) .tox-lock-icon__lock {
  display: none;
}
.tox .tox-textfield, .tox .tox-toolbar-textfield, .tox .tox-selectfield select, .tox .tox-textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #cccccc;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  box-shadow: none;
  box-sizing: border-box;
  color: #222f3e;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 24px;
  margin: 0;
  min-height: 34px;
  outline: none;
  padding: 5px 4.75px;
  resize: none;
  width: 100%;
}
.tox .tox-textfield[disabled], .tox .tox-textarea[disabled] {
  background-color: #f2f2f2;
  color: rgba(34, 47, 62, 0.85);
  cursor: not-allowed;
}
.tox .tox-textfield:focus, .tox .tox-selectfield select:focus, .tox .tox-textarea:focus {
  border-color: #207ab7;
  box-shadow: none;
  outline: none;
}
.tox .tox-toolbar-textfield {
  border-width: 0;
  margin-bottom: 3px;
  margin-top: 2px;
  max-width: 250px;
}
.tox .tox-naked-btn {
  background-color: transparent;
  border: 0;
  border-color: transparent;
  box-shadow: unset;
  color: #207ab7;
  cursor: pointer;
  display: block;
  margin: 0;
  padding: 0;
}
.tox .tox-naked-btn svg {
  display: block;
  fill: #222f3e;
}
.tox:not([dir=rtl]) .tox-toolbar-textfield + * {
  margin-left: 4px;
}
.tox[dir=rtl] .tox-toolbar-textfield + * {
  margin-right: 4px;
}
.tox .tox-selectfield {
  cursor: pointer;
  position: relative;
}
.tox .tox-selectfield select[disabled] {
  background-color: #f2f2f2;
  color: rgba(34, 47, 62, 0.85);
  cursor: not-allowed;
}
.tox .tox-selectfield select::-ms-expand {
  display: none;
}
.tox .tox-selectfield svg {
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.tox:not([dir=rtl]) .tox-selectfield select[size="0"], .tox:not([dir=rtl]) .tox-selectfield select[size="1"] {
  padding-right: 24px;
}
.tox:not([dir=rtl]) .tox-selectfield svg {
  right: 8px;
}
.tox[dir=rtl] .tox-selectfield select[size="0"], .tox[dir=rtl] .tox-selectfield select[size="1"] {
  padding-left: 24px;
}
.tox[dir=rtl] .tox-selectfield svg {
  left: 8px;
}
.tox .tox-textarea {
  -webkit-appearance: textarea;
     -moz-appearance: textarea;
          appearance: textarea;
  white-space: pre-wrap;
}
.tox-fullscreen {
  border: 0;
  height: 100%;
  left: 0;
  margin: 0;
  overflow: hidden;
  -ms-scroll-chaining: none;
      overscroll-behavior: none;
  padding: 0;
  position: fixed;
  top: 0;
  -ms-touch-action: pinch-zoom;
      touch-action: pinch-zoom;
  width: 100%;
}
.tox-fullscreen .tox.tox-tinymce.tox-fullscreen .tox-statusbar__resize-handle {
  display: none;
}
.tox-fullscreen .tox.tox-tinymce.tox-fullscreen {
  z-index: 1200;
}
.tox-fullscreen .tox.tox-tinymce-aux {
  z-index: 1201;
}
.tox .tox-help__more-link {
  list-style: none;
  margin-top: 1em;
}
.tox .tox-image-tools {
  width: 100%;
}
.tox .tox-image-tools__toolbar {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
}
.tox .tox-image-tools__image {
  background-color: #666;
  height: 380px;
  overflow: auto;
  position: relative;
  width: 100%;
}
.tox .tox-image-tools__image, .tox .tox-image-tools__image + .tox-image-tools__toolbar {
  margin-top: 8px;
}
.tox .tox-image-tools__image-bg {
  background: url(data:image/gif;base64,R0lGODdhDAAMAIABAMzMzP///ywAAAAADAAMAAACFoQfqYeabNyDMkBQb81Uat85nxguUAEAOw==);
}
.tox .tox-image-tools__toolbar > .tox-spacer {
  -ms-flex: 1;
      flex: 1;
  -ms-flex-preferred-size: auto;
}
.tox .tox-croprect-block {
  background: black;
  filter: alpha(opacity=50);
  opacity: 0.5;
  position: absolute;
  zoom: 1;
}
.tox .tox-croprect-handle {
  border: 2px solid white;
  height: 20px;
  left: 0;
  position: absolute;
  top: 0;
  width: 20px;
}
.tox .tox-croprect-handle-move {
  border: 0;
  cursor: move;
  position: absolute;
}
.tox .tox-croprect-handle-nw {
  border-width: 2px 0 0 2px;
  cursor: nw-resize;
  left: 100px;
  margin: -2px 0 0 -2px;
  top: 100px;
}
.tox .tox-croprect-handle-ne {
  border-width: 2px 2px 0 0;
  cursor: ne-resize;
  left: 200px;
  margin: -2px 0 0 -20px;
  top: 100px;
}
.tox .tox-croprect-handle-sw {
  border-width: 0 0 2px 2px;
  cursor: sw-resize;
  left: 100px;
  margin: -20px 2px 0 -2px;
  top: 200px;
}
.tox .tox-croprect-handle-se {
  border-width: 0 2px 2px 0;
  cursor: se-resize;
  left: 200px;
  margin: -20px 0 0 -20px;
  top: 200px;
}
.tox:not([dir=rtl]) .tox-image-tools__toolbar > .tox-slider:not(:first-of-type) {
  margin-left: 8px;
}
.tox:not([dir=rtl]) .tox-image-tools__toolbar > .tox-button + .tox-slider {
  margin-left: 32px;
}
.tox:not([dir=rtl]) .tox-image-tools__toolbar > .tox-slider + .tox-button {
  margin-left: 32px;
}
.tox[dir=rtl] .tox-image-tools__toolbar > .tox-slider:not(:first-of-type) {
  margin-right: 8px;
}
.tox[dir=rtl] .tox-image-tools__toolbar > .tox-button + .tox-slider {
  margin-right: 32px;
}
.tox[dir=rtl] .tox-image-tools__toolbar > .tox-slider + .tox-button {
  margin-right: 32px;
}
.tox .tox-insert-table-picker {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 169px;
}
.tox .tox-insert-table-picker > div {
  border-color: #cccccc;
  border-style: solid;
  border-width: 0 1px 1px 0;
  box-sizing: content-box;
  height: 16px;
  width: 16px;
}
.tox .tox-collection--list .tox-collection__group .tox-insert-table-picker {
  margin: -4px 0;
}
.tox .tox-insert-table-picker .tox-insert-table-picker__selected {
  background-color: rgba(32, 122, 183, 0.5);
  border-color: rgba(32, 122, 183, 0.5);
}
.tox .tox-insert-table-picker__label {
  color: rgba(34, 47, 62, 0.7);
  display: block;
  font-size: 14px;
  padding: 4px;
  text-align: center;
  width: 100%;
}
.tox:not([dir=rtl]) {
  /* stylelint-disable-next-line no-descending-specificity */
}
.tox:not([dir=rtl]) .tox-insert-table-picker > div:nth-child(10n) {
  border-right: 0;
}
.tox[dir=rtl] {
  /* stylelint-disable-next-line no-descending-specificity */
}
.tox[dir=rtl] .tox-insert-table-picker > div:nth-child(10n+1) {
  border-right: 0;
}
.tox {
  /* stylelint-disable */
  /* stylelint-enable */
}
.tox .tox-menu {
  background-color: #fff;
  border: 1px solid #cccccc;
  border-radius: 3px;
  box-shadow: 0 4px 8px 0 rgba(34, 47, 62, 0.1);
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  z-index: 1150;
}
.tox .tox-menu.tox-collection.tox-collection--list {
  padding: 0;
}
.tox .tox-menu.tox-collection.tox-collection--toolbar {
  padding: 4px;
}
.tox .tox-menu.tox-collection.tox-collection--grid {
  padding: 4px;
}
.tox .tox-menu__label h1, .tox .tox-menu__label h2, .tox .tox-menu__label h3, .tox .tox-menu__label h4, .tox .tox-menu__label h5, .tox .tox-menu__label h6, .tox .tox-menu__label p, .tox .tox-menu__label blockquote, .tox .tox-menu__label code {
  margin: 0;
}
.tox .tox-menubar {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23cccccc'/%3E%3C/svg%3E") left 0 top 0 #fff;
  background-color: #fff;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 0 0 auto;
      flex: 0 0 auto;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0 4px 0 4px;
}
.tox.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-menubar {
  border-top: 1px solid #cccccc;
}
/* Deprecated. Remove in next major release */
.tox .tox-mbtn {
  -ms-flex-align: center;
      align-items: center;
  background: transparent;
  border: 0;
  border-radius: 3px;
  box-shadow: none;
  color: #222f3e;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 0 0 auto;
      flex: 0 0 auto;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  height: 34px;
  -ms-flex-pack: center;
      justify-content: center;
  margin: 2px 0 3px 0;
  outline: none;
  overflow: hidden;
  padding: 0 4px;
  text-transform: none;
  width: auto;
}
.tox .tox-mbtn[disabled] {
  background-color: transparent;
  border: 0;
  box-shadow: none;
  color: rgba(34, 47, 62, 0.5);
  cursor: not-allowed;
}
.tox .tox-mbtn:focus:not(:disabled) {
  background: #dee0e2;
  border: 0;
  box-shadow: none;
  color: #222f3e;
}
.tox .tox-mbtn--active {
  background: #c8cbcf;
  border: 0;
  box-shadow: none;
  color: #222f3e;
}
.tox .tox-mbtn:hover:not(:disabled):not(.tox-mbtn--active) {
  background: #dee0e2;
  border: 0;
  box-shadow: none;
  color: #222f3e;
}
.tox .tox-mbtn__select-label {
  cursor: default;
  font-weight: normal;
  margin: 0 4px;
}
.tox .tox-mbtn[disabled] .tox-mbtn__select-label {
  cursor: not-allowed;
}
.tox .tox-mbtn__select-chevron {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  width: 16px;
  display: none;
}
.tox .tox-notification {
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  box-shadow: none;
  box-sizing: border-box;
  display: -ms-grid;
  display: grid;
  font-size: 14px;
  font-weight: normal;
  -ms-grid-columns: minmax(40px, 1fr) auto minmax(40px, 1fr);
      grid-template-columns: minmax(40px, 1fr) auto minmax(40px, 1fr);
  margin-top: 4px;
  opacity: 0;
  padding: 4px;
  transition: transform 100ms ease-in, opacity 150ms ease-in;
}
.tox .tox-notification p {
  font-size: 14px;
  font-weight: normal;
}
.tox .tox-notification a {
  text-decoration: underline;
}
.tox .tox-notification--in {
  opacity: 1;
}
.tox .tox-notification--success {
  background-color: #e4eeda;
  border-color: #d7e6c8;
  color: #222f3e;
}
.tox .tox-notification--success p {
  color: #222f3e;
}
.tox .tox-notification--success a {
  color: #547831;
}
.tox .tox-notification--success svg {
  fill: #222f3e;
}
.tox .tox-notification--error {
  background-color: #f8dede;
  border-color: #f2bfbf;
  color: #222f3e;
}
.tox .tox-notification--error p {
  color: #222f3e;
}
.tox .tox-notification--error a {
  color: #c00;
}
.tox .tox-notification--error svg {
  fill: #222f3e;
}
.tox .tox-notification--warn, .tox .tox-notification--warning {
  background-color: #fffaea;
  border-color: #ffe89d;
  color: #222f3e;
}
.tox .tox-notification--warn p, .tox .tox-notification--warning p {
  color: #222f3e;
}
.tox .tox-notification--warn a, .tox .tox-notification--warning a {
  color: #222f3e;
}
.tox .tox-notification--warn svg, .tox .tox-notification--warning svg {
  fill: #222f3e;
}
.tox .tox-notification--info {
  background-color: #d9edf7;
  border-color: #779ecb;
  color: #222f3e;
}
.tox .tox-notification--info p {
  color: #222f3e;
}
.tox .tox-notification--info a {
  color: #222f3e;
}
.tox .tox-notification--info svg {
  fill: #222f3e;
}
.tox .tox-notification__body {
  -ms-grid-row-align: center;
      -ms-flex-item-align: center;
      align-self: center;
  color: #222f3e;
  font-size: 14px;
  -ms-grid-column-span: 1;
  grid-column-end: 3;
  -ms-grid-column: 2;
      grid-column-start: 2;
  -ms-grid-row-span: 1;
  grid-row-end: 2;
  -ms-grid-row: 1;
      grid-row-start: 1;
  text-align: center;
  white-space: normal;
  word-break: break-all;
  word-break: break-word;
}
.tox .tox-notification__body > * {
  margin: 0;
}
.tox .tox-notification__body > * + * {
  margin-top: 1rem;
}
.tox .tox-notification__icon {
  -ms-grid-row-align: center;
      -ms-flex-item-align: center;
      align-self: center;
  -ms-grid-column-span: 1;
  grid-column-end: 2;
  -ms-grid-column: 1;
      grid-column-start: 1;
  -ms-grid-row-span: 1;
  grid-row-end: 2;
  -ms-grid-row: 1;
      grid-row-start: 1;
  -ms-grid-column-align: end;
      justify-self: end;
}
.tox .tox-notification__icon svg {
  display: block;
}
.tox .tox-notification__dismiss {
  -ms-grid-row-align: start;
      -ms-flex-item-align: start;
      align-self: start;
  -ms-grid-column-span: 1;
  grid-column-end: 4;
  -ms-grid-column: 3;
      grid-column-start: 3;
  -ms-grid-row-span: 1;
  grid-row-end: 2;
  -ms-grid-row: 1;
      grid-row-start: 1;
  -ms-grid-column-align: end;
      justify-self: end;
}
.tox .tox-notification .tox-progress-bar {
  -ms-grid-column-span: 3;
  grid-column-end: 4;
  -ms-grid-column: 1;
      grid-column-start: 1;
  -ms-grid-row-span: 1;
  grid-row-end: 3;
  -ms-grid-row: 2;
      grid-row-start: 2;
  -ms-grid-column-align: center;
      justify-self: center;
}
.tox .tox-pop {
  display: inline-block;
  position: relative;
}
.tox .tox-pop--resizing {
  transition: width 0.1s ease;
}
.tox .tox-pop--resizing .tox-toolbar {
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
.tox .tox-pop__dialog {
  background-color: #fff;
  border: 1px solid #cccccc;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  min-width: 0;
  overflow: hidden;
}
.tox .tox-pop__dialog > *:not(.tox-toolbar) {
  margin: 4px 4px 4px 8px;
}
.tox .tox-pop__dialog .tox-toolbar {
  background-color: transparent;
  margin-bottom: -1px;
}
.tox .tox-pop::before, .tox .tox-pop::after {
  border-style: solid;
  content: '';
  display: block;
  height: 0;
  position: absolute;
  width: 0;
}
.tox .tox-pop.tox-pop--bottom::before, .tox .tox-pop.tox-pop--bottom::after {
  left: 50%;
  top: 100%;
}
.tox .tox-pop.tox-pop--bottom::after {
  border-color: #fff transparent transparent transparent;
  border-width: 8px;
  margin-left: -8px;
  margin-top: -1px;
}
.tox .tox-pop.tox-pop--bottom::before {
  border-color: #cccccc transparent transparent transparent;
  border-width: 9px;
  margin-left: -9px;
}
.tox .tox-pop.tox-pop--top::before, .tox .tox-pop.tox-pop--top::after {
  left: 50%;
  top: 0;
  transform: translateY(-100%);
}
.tox .tox-pop.tox-pop--top::after {
  border-color: transparent transparent #fff transparent;
  border-width: 8px;
  margin-left: -8px;
  margin-top: 1px;
}
.tox .tox-pop.tox-pop--top::before {
  border-color: transparent transparent #cccccc transparent;
  border-width: 9px;
  margin-left: -9px;
}
.tox .tox-pop.tox-pop--left::before, .tox .tox-pop.tox-pop--left::after {
  left: 0;
  top: calc(50% - 1px);
  transform: translateY(-50%);
}
.tox .tox-pop.tox-pop--left::after {
  border-color: transparent #fff transparent transparent;
  border-width: 8px;
  margin-left: -15px;
}
.tox .tox-pop.tox-pop--left::before {
  border-color: transparent #cccccc transparent transparent;
  border-width: 10px;
  margin-left: -19px;
}
.tox .tox-pop.tox-pop--right::before, .tox .tox-pop.tox-pop--right::after {
  left: 100%;
  top: calc(50% + 1px);
  transform: translateY(-50%);
}
.tox .tox-pop.tox-pop--right::after {
  border-color: transparent transparent transparent #fff;
  border-width: 8px;
  margin-left: -1px;
}
.tox .tox-pop.tox-pop--right::before {
  border-color: transparent transparent transparent #cccccc;
  border-width: 10px;
  margin-left: -1px;
}
.tox .tox-pop.tox-pop--align-left::before, .tox .tox-pop.tox-pop--align-left::after {
  left: 20px;
}
.tox .tox-pop.tox-pop--align-right::before, .tox .tox-pop.tox-pop--align-right::after {
  left: calc(100% - 20px);
}
.tox .tox-sidebar-wrap {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  -ms-flex-positive: 1;
      flex-grow: 1;
  -ms-flex-preferred-size: 0;
  min-height: 0;
}
.tox .tox-sidebar {
  background-color: #fff;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  -ms-flex-pack: end;
      justify-content: flex-end;
}
.tox .tox-sidebar__slider {
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}
.tox .tox-sidebar__pane-container {
  display: -ms-flexbox;
  display: flex;
}
.tox .tox-sidebar__pane {
  display: -ms-flexbox;
  display: flex;
}
.tox .tox-sidebar--sliding-closed {
  opacity: 0;
}
.tox .tox-sidebar--sliding-open {
  opacity: 1;
}
.tox .tox-sidebar--sliding-growing, .tox .tox-sidebar--sliding-shrinking {
  transition: width 0.5s ease, opacity 0.5s ease;
}
.tox .tox-selector {
  background-color: #4099ff;
  border-color: #4099ff;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  display: inline-block;
  height: 10px;
  position: absolute;
  width: 10px;
}
.tox.tox-platform-touch .tox-selector {
  height: 12px;
  width: 12px;
}
.tox .tox-slider {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
      flex: 1;
  -ms-flex-preferred-size: auto;
  height: 24px;
  -ms-flex-pack: center;
      justify-content: center;
  position: relative;
}
.tox .tox-slider__rail {
  background-color: transparent;
  border: 1px solid #cccccc;
  border-radius: 3px;
  height: 10px;
  min-width: 120px;
  width: 100%;
}
.tox .tox-slider__handle {
  background-color: #207ab7;
  border: 2px solid #185d8c;
  border-radius: 3px;
  box-shadow: none;
  height: 24px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 14px;
}
.tox .tox-source-code {
  overflow: auto;
}
.tox .tox-spinner {
  display: -ms-flexbox;
  display: flex;
}
.tox .tox-spinner > div {
  animation: tam-bouncing-dots 1.5s ease-in-out 0s infinite both;
  background-color: rgba(34, 47, 62, 0.7);
  border-radius: 100%;
  height: 8px;
  width: 8px;
}
.tox .tox-spinner > div:nth-child(1) {
  animation-delay: -0.32s;
}
.tox .tox-spinner > div:nth-child(2) {
  animation-delay: -0.16s;
}
@keyframes tam-bouncing-dots {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
.tox:not([dir=rtl]) .tox-spinner > div:not(:first-child) {
  margin-left: 4px;
}
.tox[dir=rtl] .tox-spinner > div:not(:first-child) {
  margin-right: 4px;
}
.tox .tox-statusbar {
  -ms-flex-align: center;
      align-items: center;
  background-color: #fff;
  border-top: 1px solid #cccccc;
  color: rgba(34, 47, 62, 0.7);
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 0 0 auto;
      flex: 0 0 auto;
  font-size: 12px;
  font-weight: normal;
  height: 18px;
  overflow: hidden;
  padding: 0 8px;
  position: relative;
  text-transform: uppercase;
}
.tox .tox-statusbar__text-container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  -ms-flex-pack: end;
      justify-content: flex-end;
  overflow: hidden;
}
.tox .tox-statusbar__path {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  margin-right: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tox .tox-statusbar__path > * {
  display: inline;
  white-space: nowrap;
}
.tox .tox-statusbar__wordcount {
  -ms-flex: 0 0 auto;
      flex: 0 0 auto;
  margin-left: 1ch;
}
.tox .tox-statusbar a, .tox .tox-statusbar__path-item, .tox .tox-statusbar__wordcount {
  color: rgba(34, 47, 62, 0.7);
  text-decoration: none;
}
.tox .tox-statusbar a:hover, .tox .tox-statusbar__path-item:hover, .tox .tox-statusbar__wordcount:hover, .tox .tox-statusbar a:focus, .tox .tox-statusbar__path-item:focus, .tox .tox-statusbar__wordcount:focus {
  cursor: pointer;
  text-decoration: underline;
}
.tox .tox-statusbar__resize-handle {
  -ms-flex-align: end;
      align-items: flex-end;
  -ms-flex-item-align: stretch;
      align-self: stretch;
  cursor: nwse-resize;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 0 0 auto;
      flex: 0 0 auto;
  -ms-flex-pack: end;
      justify-content: flex-end;
  margin-left: auto;
  margin-right: -8px;
  padding-left: 1ch;
}
.tox .tox-statusbar__resize-handle svg {
  display: block;
  fill: rgba(34, 47, 62, 0.7);
}
.tox:not([dir=rtl]) .tox-statusbar__path > * {
  margin-right: 4px;
}
.tox:not([dir=rtl]) .tox-statusbar__branding {
  margin-left: 1ch;
}
.tox[dir=rtl] .tox-statusbar {
  -ms-flex-direction: row-reverse;
      flex-direction: row-reverse;
}
.tox[dir=rtl] .tox-statusbar__path > * {
  margin-left: 4px;
}
.tox .tox-throbber {
  z-index: 1400;
}
.tox .tox-throbber__busy-spinner {
  -ms-flex-align: center;
      align-items: center;
  background-color: rgba(255, 255, 255, 0.6);
  bottom: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.tox .tox-tbtn {
  -ms-flex-align: center;
      align-items: center;
  background: transparent;
  border: 0;
  border-radius: 3px;
  box-shadow: none;
  color: #222f3e;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 0 0 auto;
      flex: 0 0 auto;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  height: 34px;
  -ms-flex-pack: center;
      justify-content: center;
  margin: 2px 0 3px 0;
  outline: none;
  overflow: hidden;
  padding: 0;
  text-transform: none;
  width: 34px;
}
.tox .tox-tbtn svg {
  display: block;
  fill: #222f3e;
}
.tox .tox-tbtn.tox-tbtn-more {
  padding-left: 5px;
  padding-right: 5px;
  width: inherit;
}
.tox .tox-tbtn:focus {
  background: #dee0e2;
  border: 0;
  box-shadow: none;
}
.tox .tox-tbtn:hover {
  background: #dee0e2;
  border: 0;
  box-shadow: none;
  color: #222f3e;
}
.tox .tox-tbtn:hover svg {
  fill: #222f3e;
}
.tox .tox-tbtn:active {
  background: #c8cbcf;
  border: 0;
  box-shadow: none;
  color: #222f3e;
}
.tox .tox-tbtn:active svg {
  fill: #222f3e;
}
.tox .tox-tbtn--disabled, .tox .tox-tbtn--disabled:hover, .tox .tox-tbtn:disabled, .tox .tox-tbtn:disabled:hover {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: rgba(34, 47, 62, 0.5);
  cursor: not-allowed;
}
.tox .tox-tbtn--disabled svg, .tox .tox-tbtn--disabled:hover svg, .tox .tox-tbtn:disabled svg, .tox .tox-tbtn:disabled:hover svg {
  /* stylelint-disable-line no-descending-specificity */
  fill: rgba(34, 47, 62, 0.5);
}
.tox .tox-tbtn--enabled, .tox .tox-tbtn--enabled:hover {
  background: #c8cbcf;
  border: 0;
  box-shadow: none;
  color: #222f3e;
}
.tox .tox-tbtn--enabled > *, .tox .tox-tbtn--enabled:hover > * {
  transform: none;
}
.tox .tox-tbtn--enabled svg, .tox .tox-tbtn--enabled:hover svg {
  /* stylelint-disable-line no-descending-specificity */
  fill: #222f3e;
}
.tox .tox-tbtn:focus:not(.tox-tbtn--disabled) {
  color: #222f3e;
}
.tox .tox-tbtn:focus:not(.tox-tbtn--disabled) svg {
  fill: #222f3e;
}
.tox .tox-tbtn:active > * {
  transform: none;
}
.tox .tox-tbtn--md {
  height: 51px;
  width: 51px;
}
.tox .tox-tbtn--lg {
  -ms-flex-direction: column;
      flex-direction: column;
  height: 68px;
  width: 68px;
}
.tox .tox-tbtn--return {
  -ms-grid-row-align: stretch;
      -ms-flex-item-align: stretch;
      align-self: stretch;
  height: unset;
  width: 16px;
}
.tox .tox-tbtn--labeled {
  padding: 0 4px;
  width: unset;
}
.tox .tox-tbtn__vlabel {
  display: block;
  font-size: 10px;
  font-weight: normal;
  letter-spacing: -0.025em;
  margin-bottom: 4px;
  white-space: nowrap;
}
.tox .tox-tbtn--select {
  margin: 2px 0 3px 0;
  padding: 0 4px;
  width: auto;
}
.tox .tox-tbtn__select-label {
  cursor: default;
  font-weight: normal;
  margin: 0 4px;
}
.tox .tox-tbtn__select-chevron {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  width: 16px;
}
.tox .tox-tbtn__select-chevron svg {
  fill: rgba(34, 47, 62, 0.5);
}
.tox .tox-tbtn--bespoke .tox-tbtn__select-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 7em;
}
.tox .tox-split-button {
  border: 0;
  border-radius: 3px;
  box-sizing: border-box;
  display: -ms-flexbox;
  display: flex;
  margin: 2px 0 3px 0;
  overflow: hidden;
}
.tox .tox-split-button:hover {
  box-shadow: 0 0 0 1px #dee0e2 inset;
}
.tox .tox-split-button:focus {
  background: #dee0e2;
  box-shadow: none;
  color: #222f3e;
}
.tox .tox-split-button > * {
  border-radius: 0;
}
.tox .tox-split-button__chevron {
  width: 16px;
}
.tox .tox-split-button__chevron svg {
  fill: rgba(34, 47, 62, 0.5);
}
.tox .tox-split-button .tox-tbtn {
  margin: 0;
}
.tox.tox-platform-touch .tox-split-button .tox-tbtn:first-child {
  width: 30px;
}
.tox.tox-platform-touch .tox-split-button__chevron {
  width: 20px;
}
.tox .tox-split-button.tox-tbtn--disabled:hover, .tox .tox-split-button.tox-tbtn--disabled:focus, .tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:hover, .tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:focus {
  background: transparent;
  box-shadow: none;
  color: rgba(34, 47, 62, 0.5);
}
.tox .tox-toolbar-overlord {
  background-color: #2b2c32;
}
.tox .tox-toolbar, .tox .tox-toolbar__primary, .tox .tox-toolbar__overflow {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23cccccc'/%3E%3C/svg%3E") left 0 top 0 #fff;
  background-color: #404146;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 0 0 auto;
      flex: 0 0 auto;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0 0;
}
.tox .tox-toolbar__overflow.tox-toolbar__overflow--closed {
  height: 0;
  opacity: 0;
  padding-bottom: 0;
  padding-top: 0;
  visibility: hidden;
}
.tox .tox-toolbar__overflow--growing {
  transition: height 0.3s ease, opacity 0.2s linear 0.1s;
}
.tox .tox-toolbar__overflow--shrinking {
  transition: opacity 0.3s ease, height 0.2s linear 0.1s, visibility 0s linear 0.3s;
}
.tox .tox-menubar + .tox-toolbar, .tox .tox-menubar + .tox-toolbar-overlord .tox-toolbar__primary {
  border-top: 1px solid #cccccc;
  margin-top: -1px;
}
.tox .tox-toolbar--scrolling {
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  overflow-x: auto;
}
.tox .tox-pop .tox-toolbar {
  border-width: 0;
}
.tox .tox-toolbar--no-divider {
  background-image: none;
}
.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-toolbar:first-child, .tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-toolbar-overlord:first-child .tox-toolbar__primary {
  border-top: 1px solid #cccccc;
}
.tox.tox-tinymce-aux .tox-toolbar__overflow {
  background-color: #fff;
  border: 1px solid #cccccc;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.tox[dir=rtl] .tox-tbtn__icon-rtl svg {
  transform: rotateY(180deg);
}
.tox .tox-toolbar__group {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 0;
  padding: 0 4px 0 4px;
}
.tox .tox-toolbar__group--pull-right {
  margin-left: auto;
}
.tox .tox-toolbar--scrolling .tox-toolbar__group {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
.tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type) {
  border-right: 1px solid #cccccc;
}
.tox[dir=rtl] .tox-toolbar__group:not(:last-of-type) {
  border-left: 1px solid #cccccc;
}
.tox .tox-tooltip {
  display: inline-block;
  padding: 8px;
  position: relative;
}
.tox .tox-tooltip__body {
  background-color: #222f3e;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(34, 47, 62, 0.3);
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  padding: 4px 8px;
  text-transform: none;
}
.tox .tox-tooltip__arrow {
  position: absolute;
}
.tox .tox-tooltip--down .tox-tooltip__arrow {
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #222f3e;
  bottom: 0;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}
.tox .tox-tooltip--up .tox-tooltip__arrow {
  border-bottom: 8px solid #222f3e;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}
.tox .tox-tooltip--right .tox-tooltip__arrow {
  border-bottom: 8px solid transparent;
  border-left: 8px solid #222f3e;
  border-top: 8px solid transparent;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.tox .tox-tooltip--left .tox-tooltip__arrow {
  border-bottom: 8px solid transparent;
  border-right: 8px solid #222f3e;
  border-top: 8px solid transparent;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.tox .tox-well {
  border: 1px solid #cccccc;
  border-radius: 3px;
  padding: 8px;
  width: 100%;
}
.tox .tox-well > *:first-child {
  margin-top: 0;
}
.tox .tox-well > *:last-child {
  margin-bottom: 0;
}
.tox .tox-well > *:only-child {
  margin: 0;
}
.tox .tox-custom-editor {
  border: 1px solid #cccccc;
  border-radius: 3px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
      flex: 1;
  position: relative;
}
/* stylelint-disable */
.tox {
  /* stylelint-enable */
}
.tox .tox-dialog-loading::before {
  background-color: rgba(0, 0, 0, 0.5);
  content: "";
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 1000;
}
.tox .tox-tab {
  cursor: pointer;
}
.tox .tox-dialog__content-js {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
      flex: 1;
  -ms-flex-preferred-size: auto;
}
.tox .tox-dialog__body-content .tox-collection {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
      flex: 1;
  -ms-flex-preferred-size: auto;
}
.tox .tox-image-tools-edit-panel {
  height: 60px;
}
.tox .tox-image-tools__sidebar {
  height: 60px;
}
.citadel-editor-container .tox-dialog-wrap__backdrop {
        background-color: rgba(0, 0, 0, 0.75);
    }
.citadel-editor-container .tox-toolbar {
        background-color: #2b2c32;
        height: 32px;
    }
.citadel-editor-container .tox-toolbar-overlord button {
            height: 24px;
            width: 24px;
            margin: 2px;
            min-height: 0;
            min-width: 0;
            border: 1px solid #959598 !important;
            cursor: pointer;
        }
.citadel-editor-container .tox-toolbar-overlord button .tox-tbtn__select-chevron {
                display: none;
            }
.citadel-editor-container .tox-toolbar-overlord button:hover { background: inherit !important; }
.citadel-editor-container .tox-menu-nav__js.tox-collection__item[title="Open link"] {
        display: none;
    }
.citadel-editor-container .citadel-editor-inner {
        background-color: #404146;
        border: solid 1px #959598;
        padding: 7px 16px 8px;
        overflow: auto;
    }
.citadel-editor-container .citadel-editor-inner .citadel-editor {
            height: 100%;
        }
.citadel-editor-container .citadel-editor-inner .mce-content-body {
            color: #ffffff;
            font-family: 'Nunito Sans', Arial, Helvetica, Sans-Serif;
            line-height: 1.5;
            font-size: 16px;
            cursor: text;
        }
.citadel-editor-container .citadel-editor-inner .mce-content-body:focus {
                outline: none;
            }
.citadel-editor-container .mce-tinymce.mce-tinymce-inline.mce-container.mce-panel {
        display: block !important;
    }
.citadel-editor-container .tox-collection--list {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        overflow: hidden !important;
    }
.citadel-editor-container .tox-collection--list .tox-collection__group {
            padding: 2px 0 !important;
        }
.citadel-editor-container .tox-collection--list .tox-collection__group .tox-collection__item {
                padding: 0 2px !important;
                margin-left: 4px;
            }
.citadel-editor-container .tox-collection--list .tox-collection__group .tox-collection__item .tox-collection__item-label {
                    margin-left: 2px !important;
                }
.citadel-editor-container .tox-collection--list .tox-collection__group .tox-collection__item .tox-collection__item-label {
                        line-height: 20px;
                    }
.citadel-editor-container .tox .tox-textfield, .citadel-editor-container .tox .tox-toolbar-textfield, .citadel-editor-container .tox .tox-selectfield select, .citadel-editor-container .tox .tox-textarea {
        color: #ffffff;
        border-color: #959598;
        background-color: #404146;
    }
.citadel-editor-container .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
        color: #959598;
    }
.citadel-editor-container .mce-content-body table[data-mce-selected] {
        outline: 1px solid #6e7bb9;
    }
.citadel-editor-container .mce-resizehandle {
        background-color: #6e7bb9 !important;
        border-color: #6e7bb9 !important;
    }
.citadel-editor-container .tox-dialog {
        background-color: #2b2c32;
    }
.citadel-editor-container .tox-dialog .tox-dialog__header {
            color: #ffffff;
            background-color: #2b2c32;
        }
.citadel-editor-container .tox-dialog .tox-dialog__footer {
            background-color: #2b2c32;
        }
.citadel-editor-container .tox-dialog .tox-dialog__body .tox-dialog__body-nav-item, .citadel-editor-container .tox-dialog .tox-dialog__body .tox-dialog__body-nav-item--active {
                color: #ffffff;
            }
.citadel-editor-container .tox-dialog .tox-dialog__body .tox-dialog__body-nav-item--active {
                border-bottom: 2px solid #7b8ffe;
            }
.citadel-editor-container .tox-dialog .tox-button {
            background-color: #7b8ffe;
            color: #ffffff;
            border-radius: 20px;
        }
.citadel-editor-container .tox-dialog .tox-button:hover {
                background-color: #7b8ffe;
            }
.citadel-editor-container .tox-dialog .tox-button.tox-button--secondary {
                background-color: transparent;
                color: #7b8ffe;
                border: 1px solid #7b8ffe !important;
            }
.citadel-editor-container .tox-dialog .tox-button.tox-button--icon {
                border: none !important;
                color: #ffffff;
                background-color: #2b2c32;
                border-radius: unset;
                min-width: 0;
            }
.citadel-editor-container .tox-dialog .tox-button.tox-button--icon :hover:not(:disabled) {
                    background-color: #2b2c32 !important;
                }
.citadel-editor-container .tox-dialog .tox-button--icon:hover:not(:disabled) {
            color: #ffffff !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_AuthBody {
    width: 100%;
}
.mx_AuthBody .titles {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
            justify-content: center;
    }
.mx_AuthBody .titles .title_wrapper {
            cursor: pointer;
            padding: 0 10px;
            color: #d4d4d6;
        }
.mx_AuthBody .titles .title_wrapper .title {
                text-align: center;
                font-size: 20px;
                font-weight: bold;
                display: -ms-inline-flexbox;
                display: inline-flex;
                padding-bottom: 9px;
            }
.mx_AuthBody .titles .title_wrapper .selected {
                color: #7b8ffe;
                border-bottom: solid 2px #7b8ffe;
            }
.mx_AuthBody .test-mode {
        font-weight: bold;
        text-align: center;
        text-transform: lowercase;
        font-family: monospace;
        font-size: 10px;
        color: #7b8ffe;
        transition: height 500ms 0ms, opacity 500ms 500ms;
        opacity: 1.0;
        height: 40px;
        position: absolute;
        width: 100%;
        top: 5px;
    }
.mx_AuthBody .test-mode.hide {
            transition: height 500ms 500ms, opacity 500ms 0ms;
            opacity: 0.0;
            height: 0;
        }
.mx_AuthBody .mx_CitadelLoginForm {
        position: relative;
    }
.mx_AuthBody .mx_CitadelLoginForm .test-mode {
            top: -27px;
        }
.mx_AuthBody form {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
            flex-direction: column;
        -ms-flex-align: center;
            align-items: center;
    }
.mx_AuthBody .mx_CitadelLoginForm {
        margin-top: 40px;
    }
.mx_AuthBody .mx_CitadelLoginForm .mx_CitadelInput { margin-bottom: 20px; }
.mx_AuthBody .mx_CitadelLoginForm .mx_CitadelInput_error { margin-bottom: 32px; }
.mx_AuthBody .mx_CitadelLogin .back {
            position: absolute;
            top: 40px;
            left: 40px;
            cursor: pointer;
        }
.mx_AuthBody .mx_CitadelLogin .title {
            font-size: 20px;
            font-weight: bold;
            line-height: 1.2;
            margin-bottom: 8px;
        }
.mx_AuthBody .mx_CitadelLogin .description {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: column;
                flex-direction: column;
            font-size: 14px;
            line-height: 1.43;
            margin-bottom: 48px;
        }
.mx_AuthBody .mx_CitadelLogin .description span:last-child { font-weight: bold; }
.mx_AuthBody .mx_CitadelLogin .toggles {
            width: 100%;
        }
.mx_AuthBody .mx_CitadelLogin .toggles .mx_CitadelToggle {
                margin-bottom: 32px;
            }
.mx_AuthBody .mx_CitadelLogin .toggles .mx_CitadelToggle .description { margin-bottom: 0; }
.mx_AuthBody .mx_CitadelLogin .mx_CodeVerificationDialog {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: column;
                flex-direction: column;
            -ms-flex-align: center;
                align-items: center;
        }
.mx_AuthBody .mx_CitadelLogin .mx_CodeVerificationDialog .description {
                width: 100%;
                margin-bottom: 32px;
            }
.mx_AuthBody .mx_CitadelLogin .mx_CodeVerificationDialog .new-code { margin-top: 40px; }
.mx_AuthBody .data-protection {
        font-size: 10px;
        line-height: 11px;
    }
/*
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: #7b8ffe;
    color: #2b2c32;

    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: 12px;
    opacity: 0.72;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    color: #ffffff;
    position: fixed;
    bottom: 16px;
}
.mx_AuthFooter div {
        margin: 0 3px;
    }
.mx_AuthFooter img {
        width: 80px;
        filter: brightness(0) invert(1);
        padding-top: 2px;
    }
.mx_AuthFooter a:link, .mx_AuthFooter a:hover, .mx_AuthFooter a:visited {
    color: #ffffff;
    margin: 0 22px;
}
.auth-footer-apps {
    border-top: 1px solid #55565b;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    padding-top: 10px;
    position: absolute;
    bottom: 10px;
}
.auth-footer-apps img {
        height: 38px;
    }
.auth-footer-apps .android img {
        height: 56px;
        margin: 0 18px;
    }
.auth-footer-apps .macMobile img {
        margin-right: 27px;
    }
.auth-footer-apps .windowsDesktop img {
        border-radius: 7px;
    }
.auth-footer-apps.only-desktop {
        width: 100%;
        -ms-flex-align: center;
            align-items: center;
        -ms-flex-pack: center;
            justify-content: center;
    }
.auth-footer-apps.only-desktop .macDesktop {
            margin-right: 27px;
        }
/*
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;
    margin-bottom: 42px;
    -ms-flex-align: center;
        align-items: center;
}
/*
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 {
    display: -ms-flexbox;
    display: flex;
    width: 143px;
}
.mx_AuthHeaderLogo img {
    width: 100%;
}
.mx_AuthHeaderCitadelLogo {
    background-image: url(../../img/horizontal-logo-dark.ef9759d.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 31px;
    width: 143px;
}
/*
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;
    -ms-flex-pack: center;
        justify-content: center;
    background-color: #16171e;
}
.mx_AuthPage_modal {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
}
.mx_AuthPage_modalContent {
    background-color: #2b2c32;
    -ms-flex-pack: start;
        justify-content: flex-start;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-align: center;
        align-items: center;
    padding: 40px 120px 40px 104px;
    height: 498px;
    width: 408px;
    position: relative;
}
.login_password_screen {
    position: relative;
    top: -14px;
}
.login_password_screen .login_password_title {
        font-size: 20px;
        font-weight: bold;
        line-height: 1.2;
        margin-bottom: 8px;
    }
.login_password_screen .login_password_subtitle {
        line-height: 1.43;
        margin-bottom: 24px;
    }
.login_password_screen .mx_CitadelInput {
        margin-bottom: 11px;
    }
.login_password_screen .mx_CitadelButton {
        margin: 24px auto 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_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 #55565b;
    border-radius: 3px;
    width: 6em;
}
.mx_InteractiveAuthEntryComponents_msisdnEntry:focus {
    border: 1px solid #7b8ffe;
}
.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: #c8c8cd;
    cursor: default;
}
.mx_InteractiveAuthEntryComponents_termsSubmit:disabled {
    background-color: #a4e1ed;
    cursor: default;
}
.mx_InteractiveAuthEntryComponents_termsPolicy {
    display: block;
}
/*
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: #4e5054;
}
.mx_AuthBody_language .mx_Dropdown_arrow {
    background: #4e5054;
}
.mx_PasswordValidation {
    max-width: 400px;
}
.mx_PasswordValidation .labels {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
.mx_PasswordValidation .labels .label {
            margin: 0 3px 8px 0;
            font-size: 10px;
            border: 1px solid #55565b;
            padding: 2px 7px;
            border-radius: 50px;
            color: #55565b;
            cursor: default;
        }
.mx_PasswordValidation .labels .met {
            color: #ffffff;
            background-color: #25cb08;
            border: 1px solid #25cb08;
        }
.mx_PasswordValidation .labels .error {
            color: #ffffff;
            background-color: #e30c07;
            border: 1px solid #e30c07;
        }
.mx_PasswordValidation .description {
        color: #e30c07;
        font-size: 12px;
    }
/*
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_ServerConfig_fields {
    display: -ms-flexbox;
    display: flex;
    margin: 1em 0;
}
.mx_ServerConfig_fields .mx_Field {
    -ms-flex: 1;
        flex: 1;
    margin: 0 5px;
}
.mx_ServerConfig_fields .mx_Field:first-child {
    margin-left: 0;
}
.mx_ServerConfig_fields .mx_Field:last-child {
    margin-right: 0;
}
.mx_ServerConfig_help:link {
    opacity: 0.8;
}
/*
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: #454545;
    margin: 8px 0;
}
.mx_ServerTypeSelector_type .mx_AccessibleButton {
    padding: 10px;
    border: 1px solid #959598;
    border-radius: 4px;
}
.mx_ServerTypeSelector_type.mx_ServerTypeSelector_type_selected .mx_AccessibleButton {
    border-color: #7b8ffe;
}
.mx_ServerTypeSelector_logo {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    height: 18px;
    margin-bottom: 12px;
    font-weight: 600;
    color: #454545;
}
.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;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -o-object-fit: cover;
       object-fit: cover;
}
.mx_BaseAvatar_initial {
    position: absolute;
    left: 0;
    color: #ffffff;
    text-align: center;
    speak: none;
    pointer-events: none;
    font-weight: normal;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
}
.mx_BaseAvatar_image {
    border-radius: 100px;
    vertical-align: top;
    background-color: #181b21;
    border: 1px solid #55565b;
    box-sizing: border-box;
}
.mx_BaseAvatar_external {
    border-radius: 4px;
}
.CitadelRoomAvatar {
    background-color: #2b2c32;
    height: 240px;
}
.CitadelRoomAvatar .favourite {
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        height: 80px;
        width: 80px;
    }
.CitadelRoomAvatar .avatar {
        width: 240px;
        height: 240px;
    }
.CitadelRoomAvatar .avatar > img {
        height: 240px;
        width: 100%;
        -o-object-fit: cover;
           object-fit: cover;
    }
.CitadelRoomAvatar .default-avatar {
        height: 125px;
        background-color: #181b21;
        color: white;
        font-size: 40px;
    }
.CitadelRoomAvatar .default-avatar .initial {
            height: 100%;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-pack: center;
                justify-content: center;
            -ms-flex-align: center;
                align-items: center;
        }
.CitadelRoomAvatar .default-avatar .can-set-avatar-initial {
            height: 77px;
            background-color: #3b405b;
        }
.CitadelRoomAvatar .upload {
        display: none;
        height: 48px;
        position: relative;
        bottom: 48px;
        cursor: pointer;
        color: white;
        background-color: rgba(0, 0, 0, 0.6);
        font-size: 13px;
    }
.CitadelRoomAvatar .upload .upload-input {
            display: none;
        }
.CitadelRoomAvatar .upload .text {
            margin-left: 10px;
        }
.CitadelRoomAvatar .default-upload {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
            justify-content: center;
        -ms-flex-align: center;
            align-items: center;
    }
.CitadelRoomAvatar-clickable {
    cursor: pointer;
}
.CitadelRoomAvatar-clickable:hover .upload {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
            justify-content: center;
        -ms-flex-align: center;
            align-items: center;
    }
.CitadelRoomAvatar-default {
    height: 126px;
}
/*
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: #7b8ffe;
}
/*
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_field, .mx_RoomTileContextMenu_leave {
    padding: 8px 6px;
    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_tag_icon {
    padding-right: 8px;
    padding-left: 4px;
    display: inline-block;
}
.mx_RoomTileContextMenu_tag_icon.delete {
        width: 15px;
        height: 15px;
        background-image: url(../../img/icon_context_delete-dark.00e065c.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }
.mx_RoomTileContextMenu_tag_icon_set {
    padding-right: 8px;
    padding-left: 4px;
    display: none;
}
.mx_RoomTileContextMenu_tag_icon_set.delete {
        width: 15px;
        height: 15px;
        background-image: url(../../img/icon_context_delete-dark.00e065c.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }
.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: #ee6d6a;
}
.mx_RoomTileContextMenu_tag_fieldSet .mx_RoomTileContextMenu_tag_icon {
    /* Something to indicate that the icon is the set tag */
}
.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;
    width: 16px;
    height: 12px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.mx_RoomTileContextMenu_notif_icon.icon-context-mute-off-copy {
        background-image: url(../../img/icon-context-mute-off-copy-dark.dcd8d40.svg);
    }
.mx_RoomTileContextMenu_notif_icon.icon-context-mute-off {
        background-image: url(../../img/icon-context-mute-off-dark.4fbde58.svg);
    }
.mx_RoomTileContextMenu_notif_icon.icon-context-mute-mentions {
        background-image: url(../../img/icon-context-mute-mentions-dark.78721fc.svg);
    }
.mx_RoomTileContextMenu_notif_icon.icon-context-mute {
        background-image: url(../../img/icon-context-mute-dark.8d0a1cb.svg);
    }
.mx_RoomTileContextMenu_notif_activeIcon {
    display: inline-block;
    opacity: 0;
    position: relative;
    left: -5px;
    background-image: url(../../img/notif-active-dark.6657a47.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 12px;
    height: 12px;
}
.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 #959598;
    padding: 6.5px 11px;
    background-color: #2b2c32;
    font-weight: normal;
    margin: 0 0 10px;
}
.mx_StatusMessageContextMenu_message:-ms-input-placeholder {
    color: #61708b;
}
.mx_StatusMessageContextMenu_message::placeholder {
    color: #61708b;
}
.mx_StatusMessageContextMenu_actionContainer {
    display: -ms-flexbox;
    display: flex;
}
.mx_StatusMessageContextMenu_submit, .mx_StatusMessageContextMenu_clear {
    -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: #ffbf7a;
    background-color: transparent;
    border: 1px solid #ffbf7a;
}
.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: 240px;
    border-radius: 4px;
    word-break: break-all;

}
.mx_TopLeftMenu .mx_TopLeftMenu_greyedText {
        font-size: 12px;
        opacity: 0.5;
        color: #d4d4d6;
    }
.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;
        position: relative;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
            align-items: center;
    }
.mx_TopLeftMenu .mx_TopLeftMenu_section_withIcon img {
            position: absolute;
            right: 10px;
        }
.mx_TopLeftMenu .mx_TopLeftMenu_section_withIcon li.mx_TopLeftMenu_icon_home, .mx_TopLeftMenu .mx_TopLeftMenu_section_withIcon li.mx_TopLeftMenu_icon_settings, .mx_TopLeftMenu .mx_TopLeftMenu_section_withIcon li.mx_TopLeftMenu_icon_legal_info, .mx_TopLeftMenu .mx_TopLeftMenu_section_withIcon li.mx_TopLeftMenu_icon_signout {
            width: 100%;
        }
.mx_TopLeftMenu .mx_TopLeftMenu_section_withIcon li.mx_TopLeftMenu_icon_home::after {
            background: url(../../img/feather-customised/home-dark.b115eb8.svg) no-repeat;
            background-size: 16px 16px;
        }
.mx_TopLeftMenu .mx_TopLeftMenu_section_withIcon li.mx_TopLeftMenu_icon_settings::after {
            background: url(../../img/feather-customised/settings-dark.8780542.svg) no-repeat;
            background-size: 16px 16px;
        }
.mx_TopLeftMenu .mx_TopLeftMenu_section_withIcon li.mx_TopLeftMenu_icon_signin::after {
            background: url(../../img/feather-customised/sign-in-dark.0e6af64.svg) no-repeat;
            background-size: 16px 16px;
        }
.mx_TopLeftMenu .mx_TopLeftMenu_section_withIcon li.mx_TopLeftMenu_icon_legal_info::after {
            background: url(../../img/feather-customised/files-dark.5fa6f55.svg) no-repeat;
            background-size: 16px 16px;
        }
.mx_TopLeftMenu .mx_TopLeftMenu_section_withIcon li.mx_TopLeftMenu_icon_signout::after {
            background: url(../../img/feather-customised/sign-out-dark.659bdae.svg) no-repeat;
            background-size: 16px 16px;
        }
.mx_TopLeftMenu .mx_TopLeftMenu_section_withIcon li::after {
            position: absolute;
            width: 16px;
            height: 16px;
            content: "";
            top: 5px;
            left: 14px;
        }
.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

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.
*/
/* Using a textarea for this element, to circumvent autofill */
.mx_AddressPickerDialog_input, .mx_AddressPickerDialog_input:focus {
    height: 26px;
    font-size: 14px;
    font-family: 'Nunito Sans', Arial, Helvetica, Sans-Serif;
    margin: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    width: 100%;
    resize: none;
    overflow: hidden;
    vertical-align: middle;
    box-sizing: border-box;
    word-wrap: nowrap;
    padding-left: 6px;
}
.mx_AddressPickerDialog_buttons {
    width: 100%;
    margin-top: 50px;
}
.mx_AddressPickerDialog_inputContainer {
    border-radius: 3px;
    border: solid 1px #959598;
    background-color: #404146;
    line-height: 36px;
    padding: 0 6px;
    width: 386px;
    max-height: 150px;
    overflow-x: hidden;
    overflow-y: auto;
}
.mx_AddressPickerDialog_inputContainer_hinted {
    position: relative;
    z-index: 5000;
    background-color: #404146;
}
.mx_AddressPickerDialog_inputContainer_hinted .highlight {
        border: 3px solid transparent;
        border-radius: 6px;
    }
.mx_AddressPickerDialog_error {
    margin-top: 10px;
    color: #ee6d6a;
}
.mx_AddressPickerDialog_cancel {
    position: absolute;
    right: 11px;
    top: 13px;
    cursor: pointer;
}
.mx_AddressPickerDialog_cancel object {
    pointer-events: none;
}
/* mass invites */
.mx_AddressPickerDialog_massInvite {
    float: right;
}
.mx_AddressPickerDialog_massInvite input {
        display: none;
    }
.mx_AddressPickerDialog_link {
    text-decoration: underline;
    cursor: pointer;
    color: #7b8ffe;
    padding-top: 8px;
}
.mx_AddressPickerDialog_success {
    text-align: center;
    margin-top: 40px;
    padding: 8px;
    max-width: 800px;
}
.mx_AddressPickerDialog_mainMessage {
    font-weight: bold;
}
/*
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 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_BugReportDialog .mx_Field {
    -ms-flex: 1;
        flex: 1;
}
.mx_BugReportDialog_field_input {
    -ms-flex: 1;
        flex: 1;
}
.mx_ChangePasswordSuccessDialog {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-align: center;
        align-items: center;
}
.mx_ChangePasswordSuccessDialog .icon {
        width: 79px;
        height: 79px;
        margin-bottom: 16px;
    }
.mx_ChangePasswordSuccessDialog .title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 8px;
    }
.mx_ChangePasswordSuccessDialog .text {
        text-align: center;
    }
.mx_ChangePasswordSuccessDialog_wrapper_inner {
    width: 400px;
    padding: 32px 32px 40px 32px;
}
/*
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 Sans', Arial, Helvetica, Sans-Serif;
    font-size: 14px;
    color: #ffffff;
    background-color: #2b2c32;

    border-radius: 3px;
    border: solid 1px #959598;
    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 #959598;
    padding: 9px;
    color: #ffffff;
    background-color: #2b2c32;
}
.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: #181b21;
    border: 1px solid #959598;
    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 .mx_CitadelInput .info, .mx_CreateRoomDialog .mx_CitadelInput .additional-info {
        color: #737576;
    }
.mx_CreateRoomDialog .section {
        margin: 24px 0;
    }
.mx_CreateRoomDialog .section .title {
            color: #7b8ffe;
            font-weight: bold;
            letter-spacing: 0.9px;
            text-transform: uppercase;
            margin-bottom: 8px;
            font-size: 12px;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
                align-items: center;
        }
.mx_CreateRoomDialog .section .title .text, .mx_CreateRoomDialog .section .title .arrow {
                cursor: pointer;
            }
.mx_CreateRoomDialog .section .title .arrow-up {
                transform: rotate(180deg);
            }
.mx_CreateRoomDialog .section .arrow {
            background: url(../../img/feather-customised/dropdown-arrow.39b7bf6.svg) no-repeat;
            height: 7px;
            width: 10px;
            margin-left: 5px;
        }
.mx_CreateRoomDialog_details_summary {
    outline: none;
}
.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 #959598;
    padding: 9px;
    color: #ffffff;
    background-color: #2b2c32;
    width: 100%;
}
.mx_CreditsDialog {
    width: 600px;
}
/*
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;
}
/*
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_RoomStateExplorer_button, .mx_DevTools_RoomStateExplorer_query {
    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 Sans', Arial, Helvetica, Sans-Serif;
    font-size: 16px;
}
.mx_DevTools_textarea {
    font-size: 12px;
    max-width: 684px;
    min-height: 250px;
    padding: 10px;
    width: 100%;
}
.mx_DevTools_content .mx_Field_input {
    display: inline-block;
}
.mx_DevTools_content .mx_Field_input + .mx_Field_input {
    margin-left: 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%;
    }
.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);
        }
.mx_ExportE2eKeysDialog .importField, .mx_ImportE2eKeysDialog .importField {
        margin-bottom: 10px;
    }
.mx_ExportE2eKeysDialog .importField .label, .mx_ImportE2eKeysDialog .importField .label {
            margin-bottom: 5px;
        }
.mx_ExportE2eKeysDialog .importField .label .importFile, .mx_ImportE2eKeysDialog .importField .label .importFile {
                font-size: 13px;
            }
.mx_ExportE2eKeysDialog .errorText, .mx_ImportE2eKeysDialog .errorText {
        height: 30px;
        margin-bottom: 4px;
    }
.mx_EmailTokenSentDialog {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-align: center;
        align-items: center;
}
.mx_EmailTokenSentDialog .icon {
        width: 79px;
        height: 79px;
        margin-bottom: 16px;
    }
.mx_EmailTokenSentDialog .title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 8px;
    }
.mx_EmailTokenSentDialog .text {
        text-align: center;
    }
.mx_EmailTokenSentDialog .text span {
            font-weight: bold;
        }
.mx_EmailTokenSentDialog_wrapper_inner {
    width: 400px;
    padding: 32px 32px 40px 32px;
}
/*
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 {
    font-weight: bold;
    font-size: 14px;
    border-radius: 50px;
    vertical-align: middle;
    display: -ms-flexbox;
    display: flex;
    outline: none;
    padding: 0 28px;
    cursor: pointer;
    min-height: 44px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    display: inline-block;
    background-color: #2b2c32;
    color: #7b8ffe;
}
.mx_EncryptedEventDialog button {
    margin-top: 0px;
}
.mx_ExportE2eKeysDialog .errorText {
        height: 30px;
        margin-bottom: 4px;
    }
/*
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;
}
.mx_NewVersionDialog {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-direction: column;
        flex-direction: column;
    text-align: center;
}
.mx_NewVersionDialog .mx_Dialog_header { margin-bottom: 0; }
.mx_NewVersionDialog .content {
        max-width: 296px;
    }
.mx_NewVersionDialog .content .header {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-pack: center;
                justify-content: center;
            -ms-flex-align: center;
                align-items: center;
            -ms-flex-direction: column;
                flex-direction: column;
            margin-bottom: 8px;
        }
.mx_NewVersionDialog .content .header img {
                height: 81px;
                margin-bottom: 16px;
            }
.mx_NewVersionDialog .content .header .title {
                font-size: 20px;
                font-weight: bold;
            }
.mx_NewVersionDialog .content .description {
            margin-bottom: 24px;
            font-size: 14px;
        }
.mx_NewVersionDialog .content .mx_Dialog_primary {
            width: 180px;
            border-radius: 55px;
        }
.mx_NewVersionDialog_inner {
    padding: 32px 52px;
}
/*
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 {
    background-image: url(../../img/feather-customised/settings-gear.40ccfc5.svg);
}
.mx_RoomSettingsDialog_securityIcon:before {
    background-image: url(../../img/feather-customised/lock.9b2b399.svg);
}
.mx_RoomSettingsDialog_rolesIcon:before {
    background-image: url(../../img/feather-customised/users-sm.e55dac3.svg);
}
.mx_RoomSettingsDialog_warningIcon:before {
    background-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;
}
.mx_RoomSettingsDialog .mx_ProfileSettings_profile {
    -ms-flex-align: center;
        align-items: center;
}
/*
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 #959598;
    padding: 9px;
    color: rgba(74, 74, 74, 0.9);
    background-color: #2b2c32;
    font-size: 15px;
    width: 100%;
    max-width: 280px;
    margin-bottom: 10px;
}
.mx_SetEmailDialog_email_input:focus {
    outline: none;
    box-shadow: none;
    border: 1px solid #7b8ffe;
}
.mx_SetEmailDialog_email_input_placeholder {
}
/*
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 #959598;
    padding: 9px;
    color: #ffffff;
    background-color: #2b2c32;
    font-size: 15px;
    width: 100%;
    max-width: 280px;
}
.mx_SetMxIdDialog_input.error, .mx_SetMxIdDialog_input.error:focus {
    border: 1px solid #ffbf7a;
}
.mx_SetMxIdDialog_input_group .mx_Spinner {
    height: 37px;
    padding-left: 10px;
    -ms-flex-pack: start;
        justify-content: flex-start;
}
.mx_SetMxIdDialog .success {
    color: #7b8ffe;
}
/*
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 #959598;
    padding: 9px;
    color: #ffffff;
    background-color: #2b2c32;
    font-size: 15px;
    width: 100%;
    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: 864px;
    height: 640px;
}
.mx_UserSettingsDialog .mx_TabbedView .mx_SettingsTab, .mx_RoomSettingsDialog .mx_TabbedView .mx_SettingsTab {
        box-sizing: border-box;
        min-width: 580px;
        padding-right: 78px;
        padding-bottom: 100px;
    }
.mx_UserSettingsDialog .mx_Dialog_title, .mx_RoomSettingsDialog .mx_Dialog_title {
        text-align: center;
        margin-bottom: 24px;
    }
.mx_UserSettingsDialog .mx_PasswordValidation, .mx_RoomSettingsDialog .mx_PasswordValidation {
        max-width: unset;
    }
.mx_UserSettingsDialog .mx_Dialog_cancelButton {
    z-index: 1;
}
.mx_UserSettingsDialog_inner .mx_Dialog, .mx_RoomSettingsDialog_inner .mx_Dialog {
    width: unset;
    overflow-x: hidden;
    overflow-y: hidden;
    padding: 24px 20px;
}
/*
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: #c8c8cd;
}
.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 #c8c8cd;
    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;
}
.mx_TermsOfUse {
    width: 700px;
    background-color: white;
}
.mx_TermsOfUse iframe {
        min-height: 380px;
        width: 100%;
        border: none;
    }
.mx_TermsOfUse .mx_Dialog_content div {
        margin: 10px 0;
    }
/*
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_basicFileWrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    margin-bottom: 20px;
}
.mx_UploadConfirmDialog_fileIcon {
    margin-right: 12px;
}
.mx_UploadConfirmDialog_previewOuter {
    text-align: center;
}
.mx_UploadConfirmDialog_previewInner {
    display: inline-block;
    text-align: left;
    margin-bottom: 20px;
}
.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 {
    background-image: url(../../img/feather-customised/settings-gear.40ccfc5.svg);
}
.mx_UserSettingsDialog_voiceIcon:before {
    background-image: url(../../img/feather-customised/phone.87241fa.svg);
}
.mx_UserSettingsDialog_bellIcon:before {
    background-image: url(../../img/feather-customised/notifications.f4fb424.svg);
}
.mx_UserSettingsDialog_preferencesIcon:before {
    background-image: url(../../img/feather-customised/sliders.c04972d.svg);
}
.mx_UserSettingsDialog_securityIcon:before {
    background-image: url(../../img/feather-customised/lock.9b2b399.svg);
}
.mx_UserSettingsDialog_helpIcon:before {
    background-image: url(../../img/feather-customised/help-circle.03fb6cf.svg);
}
.mx_UserSettingsDialog_legalIcon:before {
    background-image: url(../../img/feather-customised/files.c5b636e.svg);
}
.mx_UserSettingsDialog_labsIcon:before {
    background-image: url(../../img/feather-customised/flag.350c432.svg);
}
.mx_UserSettingsDialog_flairIcon:before {
    background-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;
    }
.key_verification_modal .mx_Dialog {
    padding: 80px 40px 40px;
}
.mx_KeyShareConfirmationDialog {
    font-family: 'Nunito Sans', Arial, Helvetica, Sans-Serif;
    font-size: 14px;
}
.mx_KeyShareConfirmationDialog .mx_Dialog_header {
        margin-bottom: 0;
    }
.mx_KeyShareConfirmationDialog .mx_Dialog_content {
        margin: 0;
    }
.mx_KeyShareConfirmationDialog .mx_Dialog_content p {
            margin-top: 8px;
        }
.mx_KeyShareConfirmationDialog .mx_Dialog_content p span {
                font-family: 'Nunito Sans', Arial, Helvetica, Sans-Serif;
            }
.mx_KeyShareConfirmationDialog .mx_Dialog_content.skip_step p {
            margin-bottom: 0;
        }
.mx_KeyShareConfirmationDialog .generating-key-spinner {
        height: 204px;
    }
.mx_KeyShareConfirmationDialog form {
        margin-top: 32px;
    }
.mx_KeyShareConfirmationDialog .code-input-wrapper {
        font-family: 'Nunito Sans', Arial, Helvetica, Sans-Serif;
        font-size: 14px;
        height: 95px;
        min-height: 95px;
        width: 300px;
        margin: 0 auto;
    }
.mx_KeyShareConfirmationDialog .code-input-wrapper .verification_code span {
                visibility: hidden;
            }
.mx_KeyShareConfirmationDialog .code-input-wrapper .verification_code input {
                border-color: #959598;
                width: 33px;
                height: 42px;
            }
.mx_KeyShareConfirmationDialog .code-input-wrapper .verification_code input.focused {
                    border-color: #7b8ffe;
                }
.mx_KeyShareConfirmationDialog .code-input-wrapper .verification_code input[type="number"] {
                padding: 0;
            }
.mx_KeyShareConfirmationDialog .submit_button_wrapper {
        margin: 24px auto;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
            justify-content: center;
    }
.mx_KeyShareConfirmationDialog .submit_button_wrapper .submit-button, .mx_KeyShareConfirmationDialog .submit_button_wrapper .button {
            height: 44px;
            width: 200px;
            border-radius: 55px !important;
            color: #ffffff !important;
            background-color: #7b8ffe !important;
            font-family: 'Nunito Sans', Arial, Helvetica, Sans-Serif !important;
        }
.mx_KeyShareConfirmationDialog .submit_button_wrapper .submit-button.disabled, .mx_KeyShareConfirmationDialog .submit_button_wrapper .submit-button :disabled, .mx_KeyShareConfirmationDialog .submit_button_wrapper .button.disabled, .mx_KeyShareConfirmationDialog .submit_button_wrapper .button :disabled {
                cursor: default;
                opacity: 0.7;
            }
.mx_KeyShareConfirmationDialog .submit_button_wrapper .submitting-key-spinner path {
            stroke: #ffffff;
        }
.mx_KeyShareConfirmationDialog .mx_Dialog_buttons {
        -ms-flex-direction: column;
            flex-direction: column;
    }
.mx_KeyShareConfirmationDialog .mx_Dialog_buttons button {
            font-family: 'Nunito Sans', Arial, Helvetica, Sans-Serif;
            min-width: 200px;
        }
.mx_KeyShareConfirmationDialog .mx_Dialog_buttons button:not(.skip_confirm_btn) {
                padding: 4px 0;
                margin: 0 auto;
            }
.mx_KeyShareConfirmationDialog .mx_Dialog_buttons button.skip_confirm_btn {
                color: #ffffff;
                background-color: #7b8ffe;
                margin: 165px auto 24px auto;
            }
.mx_KeyShareConfirmationDialog .mx_Dialog_buttons button.skip_step_cancel {
                margin-bottom: 46px;
            }
.mx_KeyShareConfirmationDialog .footer .footer-inner {
            margin-top: 24px;
            min-height: 38px;
            max-height: 88px;
        }
.mx_KeyShareConfirmationDialog .footer .footer-inner .info {
                font-size: 15px;
                width: 432px;
                color: #d4d4d6;
                position: relative;
                left: -16px;
            }
.mx_KeyShareConfirmationDialog .footer .footer-inner .next-device {
                margin-top: 24px;
                text-align: center;
            }
.key_share_info .key_share_info_inner {
        padding: 40px;
    }
.key_share_info .key_share_info_inner .mx_Dialog_header {
            margin: 0;
        }
.key_share_info .key_share_info_inner .icon {
            display: block;
            margin: 0 auto;
            width: 281px;
            height: 159px;
            background-image: url(../../img/group-dark.cb5fa7c.svg);
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
        }
.key_share_info .key_share_info_inner .title, .key_share_info .key_share_info_inner .text {
            font-family: 'Nunito Sans', Arial, Helvetica, Sans-Serif;
        }
.key_share_info .key_share_info_inner .title {
            margin: 16px 0 8px;
            font-size: 20px;
            font-weight: bold;
            line-height: 1.2;
            text-align: center;
        }
.key_share_info .key_share_info_inner .step {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
                align-items: center;
        }
.key_share_info .key_share_info_inner .step img {
                width: 40px;
                height: 40px;
            }
.key_share_info .key_share_info_inner .text {
            width: 472px;
            font-size: 14px;
            line-height: 1.14;
        }
.key_share_info .key_share_info_inner button {
            margin: 40px auto 0 auto;
            display: block;
            min-width: 150px;
            color: #ffffff;
            background-color: #7b8ffe;
            font-family: 'Nunito Sans', Arial, Helvetica, Sans-Serif;
            border-radius: 22px;
        }
.key_share_success_failure .mx_Dialog {
        padding: 40px 32px;
    }
.key_share_success_failure .mx_Dialog > div {
            width: 336px;
        }
.key_share_success_failure .mx_Dialog > div .mx_Dialog_header {
                display: none;
            }
.key_share_success_failure .mx_Dialog > div .icon {
                display: block;
                margin: 0 auto;
                width: 81px;
                height: 81px;
            }
.key_share_success_failure .mx_Dialog > div .title, .key_share_success_failure .mx_Dialog > div .text {
                font-family: 'Nunito Sans', Arial, Helvetica, Sans-Serif;
                text-align: center;
            }
.key_share_success_failure .mx_Dialog > div .title {
                margin-top: 13px;
                font-size: 20px;
                font-weight: bold;
            }
.key_share_success_failure .mx_Dialog > div .text {
                margin-top: 8px;
                font-size: 14px;
                line-height: 1.14;
            }
.key_share_success_failure .mx_Dialog > div .text.success {
                    margin-top: 15px;
                    line-height: normal;
                }
.key_share_success_failure .mx_Dialog > div button {
                margin: 40px auto 0;
                display: block;
                min-width: 200px;
                width: 200px;
                color: #ffffff;
                background-color: #7b8ffe;
                font-family: 'Nunito Sans', Arial, Helvetica, Sans-Serif;
            }
.mx_ReceiverCodeDialog {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-align: center;
        align-items: center;
}
.mx_ReceiverCodeDialog .logo {
        height: 30px;
    }
.mx_ReceiverCodeDialog .title, .mx_ReceiverCodeDialog .mx_Dialog_buttons {
        margin-top: 40px;
    }
.mx_ReceiverCodeDialog .title, .mx_ReceiverCodeDialog .code {
        font-size: 20px;
        font-weight: bold;
    }
.mx_ReceiverCodeDialog .description {
        margin-top: 8px;
        font-size: 14px;
    }
.mx_ReceiverCodeDialog .code {
        margin-top: 32px;
    }
.mx_ReceiverCodeDialog .mx_Dialog_buttons .mx_Dialog_primary {
        width: 200px;
        height: 44px;
        text-transform: lowercase;
    }
.mx_ReceiverCodeDialog .mx_Dialog_buttons .mx_Dialog_primary::first-letter {
        text-transform: uppercase;
    }
.ReceiverCodeDialog_wrapper_inner {
    padding: 40px;
}
/*
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 {
    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 #7b8ffe;
    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: #888;
    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: #ffffff;
        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 {
    padding: 20px;
}
.mx_RestoreKeyBackupDialog_passPhraseInput, .mx_RestoreKeyBackupDialog_recoveryKeyInput {
    width: 300px;
    border: 1px solid #7b8ffe;
    border-radius: 5px;
    padding: 10px;
}
.mx_CodeVerificationDialog .subtitle {
        font-size: 16px;
        line-height: 1;
        margin-bottom: 8px;
    }
.mx_CodeVerificationDialog .label {
        font-size: 14px;
        font-weight: bold;
        line-height: 1.14;
        color: #d4d4d6;
        margin-bottom: 8px;
    }
.mx_CodeVerificationDialog .description {
        font-size: 13px;
        line-height: 1.23;
        margin-bottom: 18px;
    }
.mx_CodeVerificationDialog .description .button-modify {
            font-size: 12px;
            font-weight: bold;
            color: #7b8ffe;
            cursor: pointer;
            text-decoration: underline;
        }
.mx_CodeVerificationDialog .code-input-wrapper {
        height: 71px;
        min-height: 71px;
        margin-bottom: 28px;
    }
.mx_CodeVerificationDialog .code-input-wrapper.error {
            margin-bottom: 56px;
        }
.mx_CodeVerificationDialog .code-input-wrapper.error .x-error { display: -ms-flexbox; display: flex; }
.mx_CodeVerificationDialog .code-input-wrapper .label {
            line-height: 1.14;
            margin-bottom: 8px;
        }
.mx_CodeVerificationDialog .code-input-wrapper .code-input { margin-bottom: 4px; }
.mx_CodeVerificationDialog .verification-code span {
            visibility: hidden;
            margin: 0 5px !important;
        }
.mx_CodeVerificationDialog .verification-code input {
            border-color: #959598 !important;

            width: 33px !important;
            height: 42px !important;
        }
.mx_CodeVerificationDialog .verification-code input.focused { border-color: #7b8ffe !important; }
.mx_CodeVerificationDialog .verification-code input.error { border-color: #ee6d6a !important; }
.mx_CodeVerificationDialog .verification-code input[type="number"] { padding: 0; }
.mx_CodeVerificationDialog .new-code {
        margin-top: 24px;
        font-size: 14px;
        font-weight: bold;
        line-height: 1.14;
        color: #7b8ffe;
        text-decoration: underline;
    }
.mx_CodeVerificationDialog .new-code.button { cursor: pointer; }
.mx_MfaOnboardingDialog_inner {
    padding: 48px 140px;
    width: 360px;
}
.mx_MfaOnboardingDialog > div {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-direction: column;
        flex-direction: column;
}
.mx_MfaOnboardingDialog > div .mx_Dialog_header { margin-bottom: 0; }
.mx_MfaOnboardingDialog > div img {
        height: 192px;
        margin-bottom: 24px;
    }
.mx_MfaOnboardingDialog > div .content, .mx_MfaOnboardingDialog > div .buttons {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
            flex-direction: column;
    }
.mx_MfaOnboardingDialog > div .content {
        text-align: center;
        margin-bottom: 32px;
    }
.mx_MfaOnboardingDialog > div .content .title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 16px;
            line-height: 1.2;
        }
.mx_MfaOnboardingDialog > div .content .subtitle {
            font-size: 16px;
            line-height: 1.5;
        }
.mx_MfaOnboardingDialog > div .buttons {
        -ms-flex-align: center;
            align-items: center;
    }
.mx_MfaOnboardingDialog > div .buttons .mx_CitadelButton:first-child {
            margin-bottom: 16px;
            margin-right: 0;
        }
.mx_MfaSmsActivationDialog {
    font-family: 'Nunito Sans', Arial, Helvetica, Sans-Serif;
    height: 378px;
}
.mx_MfaSmsActivationDialog .mx_Dialog_header { margin-bottom: 0; }
.mx_MfaSmsActivationDialog .title {
        font-size: 20px;
        line-height: 1.6;
        font-weight: bold;
        margin-bottom: 12px;
    }
.mfa_activation_success_failure .mx_Dialog {
        padding: 32px;
    }
.mfa_activation_success_failure .mx_Dialog > div {
            width: 336px;
        }
.mfa_activation_success_failure .mx_Dialog > div > div {
                display: -ms-flexbox;
                display: flex;
                -ms-flex-direction: column;
                    flex-direction: column;
                -ms-flex-align: center;
                    align-items: center;
            }
.mfa_activation_success_failure .mx_Dialog > div .mx_Dialog_header {
                display: none;
            }
.mfa_activation_success_failure .mx_Dialog > div .icon {
                display: block;
                margin: 0 auto;
                width: 81px;
                height: 81px;
            }
.mfa_activation_success_failure .mx_Dialog > div .title, .mfa_activation_success_failure .mx_Dialog > div .text {
                font-family: 'Nunito Sans', Arial, Helvetica, Sans-Serif;
                text-align: center;
            }
.mfa_activation_success_failure .mx_Dialog > div .title {
                margin-top: 13px;
                font-size: 20px;
                font-weight: bold;
            }
.mfa_activation_success_failure .mx_Dialog > div .text {
                margin-top: 8px;
                font-size: 14px;
            }
.mfa_activation_success_failure .mx_Dialog > div .text .text-phone span {
                    font-weight: bold;
                }
.mfa_activation_success_failure .mx_Dialog > div .mx_CitadelButton { margin-top: 19px; }
.mx_PhoneNumberForm .subtitle {
        font-size: 16px;
        line-height: 1;
        margin-bottom: 8px;
    }
.mx_PhoneNumberForm .description {
        font-size: 13px;
        line-height: 1.23;
        margin-bottom: 16px;
    }
.mx_PhoneNumberForm .label {
        font-size: 14px;
        font-weight: bold;
        line-height: 1.14;
        color: #d4d4d6;
        margin-bottom: 8px;
    }
.mx_PhoneNumberForm .mx_CitadelCountryDropdown {
        height: 42px;
        margin-bottom: 16px;
    }
.mx_PhoneNumberForm .mx_CitadelCountryDropdown .mx_Dropdown_input {
            border: 1px solid #959598;
            border-radius: 2px;
            font-size: 14px;
            height: 100%;
        }
.mx_PhoneNumberForm .mx_CitadelCountryDropdown.mx_CountryDropdown .mx_Dropdown_input .mx_Dropdown_option { padding: 0 9px; }
.mx_PhoneNumberForm .mx_CitadelCountryDropdown.mx_CountryDropdown .mx_Dropdown_input .mx_Dropdown_arrow { padding-right: 18px; }
.mx_PhoneNumberForm .mx_CitadelCountryDropdown.mx_CountryDropdown .mx_Dropdown_menu { border: 1px solid #959598; }
.news_message_dialog .mx_Dialog {
        width: 650px;
        padding: 40px 0;
        overflow-y: unset;
    }
.news_message_dialog .mx_Dialog .mx_Dialog_fixedWidth {
            width: auto;
        }
.news_message_dialog .mx_Dialog .mx_Dialog_header {
            display: none;
        }
.news_message_dialog .mx_Dialog .news_container {
            width: 650px;
        }
.news_message_dialog .mx_Dialog .news_container .news_header {
                padding: 0 125px 22px;
                box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.16);
            }
.news_message_dialog .mx_Dialog .news_container .news_header .news_title {
                    font-size: 20px;
                    font-weight: bold;
                    line-height: 1.2;
                }
.news_message_dialog .mx_Dialog .news_container .news_header .news_subtitle {
                    font-size: 14px;
                    color: #d4d4d6;
                }
.news_message_dialog .mx_Dialog .news_container .news_header .news_subtitle .preview-info {
                        font-weight: bold;
                        color: #7b8ffe;
                    }
.news_message_dialog .mx_Dialog .news_container .news_header.is_preview {
                    padding: 0 125px 23px;
                }
.news_message_dialog .mx_Dialog .news_container .news_header.is_preview .news_subtitle {
                        font-size: 13px;
                    }
.news_message_dialog .mx_Dialog .news_container .news_body {
                height: 440px;
                padding: 0 125px;
                overflow-y: auto;
                margin-top: 24px;
                font-size: 16px;
                color: #ffffff;
            }
.news_message_dialog .mx_Dialog .news_container .news_body.is_preview {
                    height: 407px;
                }
.news_message_dialog .mx_Dialog .news_container .news_body .news_image_container {
                    height: 192px;
                    margin-bottom: 24px;
                    overflow: hidden;
                }
.news_message_dialog .mx_Dialog .news_container .news_body .news_image_container img {
                        height: 100%;
                        width: 100%;
                        -o-object-fit: contain;
                           object-fit: contain;
                        animation: fadein 1s;
                    }
.news_message_dialog .mx_Dialog .news_container .news_body .news_bottom_mask {
                    height: 60px;
                    width: 394px;
                    position: absolute;
                    bottom: 55px;
                    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(43, 44, 50, 1) 72%);
                }
.news_message_dialog .mx_Dialog .news_container .news_body .news_bottom_mask.is_preview {
                        bottom: 80px;
                    }
.news_message_dialog .mx_Dialog .news_container .news_body .news_message_body {
                    line-height: 24px;
                }
.news_message_dialog .mx_Dialog .news_container .news_footer {
                margin-top: 25px;
                height: 0;
            }
.news_message_dialog .mx_Dialog .news_container .news_footer.is_preview {
                    height: 40px;
                    text-align: center;
                }
.news_message_dialog .mx_Dialog .news_container .news_footer button {
                    height: 40px;
                    min-width: 112px;
                    border-radius: 55px;
                    padding: initial;
                    margin-right: 0;
                    font-family: 'Nunito Sans', Arial, Helvetica, Sans-Serif;
                }
.news_message_dialog .mx_Dialog .news_container .news_footer .news_send_btn {
                    margin-left: 16px;
                    background-color: #7b8ffe;
                    color: #ffffff;
                }
.mx_NewsEditionDialog_wrapper .mx_NewsEditionDialog_wrapper_inner {
        padding: 80px 60px 40px;
    }
.mx_NewsEditionDialog_wrapper .mx_NewsEditionDialog {
        width: 660px;
    }
.mx_NewsEditionDialog_wrapper .mx_NewsEditionDialog .mx_CitadelInput {
            margin-bottom: 8px;
            max-width: 477px;
        }
.mx_NewsEditionDialog_wrapper .mx_NewsEditionDialog .mx_CitadelInput .label {
                font-size: 14px;
                line-height: 1.14;
                margin-bottom: 8px;
            }
.mx_NewsEditionDialog_wrapper .mx_NewsEditionDialog .mx_CitadelInput .input-wrapper .input {
                    line-height: 1.71;
                    font-size: 14px;
                    padding: 9.5px 11px;
                }
.mx_NewsEditionDialog_wrapper .mx_NewsEditionDialog .mx_AddImageButton {
            margin-bottom: 32px;
        }
.mx_NewsEditionDialog_wrapper .mx_NewsEditionDialog .mx_Dialog_title {
            line-height: 1.2;
        }
.mx_NewsEditionDialog_wrapper .mx_NewsEditionDialog .mx_Dialog_header {
            margin-bottom: 16px;
        }
.mx_NewsEditionDialog_wrapper .mx_NewsEditionDialog .mx_Dialog_primary {
            margin-left: 16px;
        }
.mx_NewsEditionDialog_wrapper .mx_NewsEditionDialog .mx_Dialog_buttons button {
                padding: 9.5px 28px;
                font-family: 'Nunito Sans', Arial, Helvetica, Sans-Serif;
                min-width: 112px;
            }
.mx_NewsEditionDialog_wrapper .mx_NewsEditionDialog .mx_Dialog_buttons button:disabled {
                    cursor: not-allowed;
                }
.mx_NewsEditionDialog_wrapper .mx_NewsEditionDialog .mx_Dialog_buttons div:last-child button:hover {
                background-color: #7b8ffe;
            }
.citadel-news-editor-container {
    margin-bottom: 16px;
}
.citadel-news-editor-container .citadel-editor-inner {
        height: 150px;
    }
.citadel-news-editor-container .citadel-editor-inner p { margin: 0; }
.news_leave_dialog_wrapper .mx_Dialog_header {
        margin-bottom: 16px;
    }
.news_leave_dialog_wrapper .mx_Dialog_header .mx_Dialog_title {
            line-height: 1.2;
        }
.news_leave_dialog_wrapper .news_leave_note {
        color: #d4d4d6;
        font-size: 16px;
        line-height: 1;
    }
.news_leave_dialog_wrapper .news_leave_buttons {
        margin-top: 24px;
    }
.news_leave_dialog_wrapper .news_leave_buttons div button {
                height: 40px;
                min-width: 112px;
                font-family: 'Nunito Sans', Arial, Helvetica, Sans-Serif;
                border-radius: 50px;
                padding: initial;
                -ms-flex-pack: center;
                    justify-content: center;
            }
.news_leave_dialog_wrapper .news_leave_buttons div :last-child button {
                margin-left: 16px;
                border-radius: 55px;
            }
.news_leave_dialog_wrapper .news_leave_buttons div :last-child button:hover {
                    background-color: #7b8ffe;
                }
/*
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 #55565b;
    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: #ffffff 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 #7b8ffe;
    background-color: #2b2c32;
}
.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:focus {
    outline: 0;
}
.mx_AccessibleButton {
    cursor: pointer;
}
.mx_AccessibleButton_disabled {
    cursor: default;
    opacity: 0.5;
}
.mx_AccessibleButton_hasKind {
    font-weight: bold;
    font-size: 14px;
    border-radius: 50px;
    vertical-align: middle;
    display: -ms-flexbox;
    display: flex;
    outline: none;
    padding: 0 28px;
    cursor: pointer;
    min-height: 44px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    font-size: 14px;
}
.mx_AccessibleButton_kind_primary {
    display: -ms-inline-flexbox;
    display: inline-flex;
    min-width: unset;
    -ms-flex-align: center;
        align-items: center;
    color: #ffffff;
    background-color: #7b8ffe;
    font-weight: 600;
}
.mx_AccessibleButton_kind_secondary {
    color: #7b8ffe;
    font-weight: 600;
    border: 1px solid #7b8ffe;
}
.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: #7b8ffe;
}
.mx_AccessibleButton_kind_primary_sm.mx_AccessibleButton_disabled {
    opacity: 0.4;
}
.mx_AccessibleButton_kind_danger {
    color: #ffffff;
    background-color: #ee6d6a;
}
.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled {
    color: #ffffff;
    background-color: #f5b6bb;
}
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm {
    padding: 5px 12px;
    color: #ffffff;
    background-color: #ee6d6a;
}
.mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled {
    color: #ffffff;
    background-color: #f5b6bb;
}
.mx_AddImageButton {
    -ms-flex-align: center;
        align-items: center;
    border: 1px solid #7b8ffe;
    border-radius: 50px;
    color: #7b8ffe;
    cursor: pointer;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-size: 14px;
    letter-spacing: 0.18px;
    line-height: 17px;
    padding: 5px 20px 4px 7px;
}
.mx_AddImageButton_icon {
        margin-right: 6px;
        width: 16px;
        height: 17px;
        background-image: url(../../img/images-dark.1b49423.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }
.mx_AddImageButton_input {
        display: none;
    }
.mx_AddImageButton_wrapper {
        display: -ms-flexbox;
        display: flex;
    }
.mx_AddImageButton_preview {
        -ms-flex-align: center;
            align-items: center;
        background-color: #55565b;
        border-radius: 14px;
        display: -ms-flexbox;
        display: flex;
        height: 28px;
        margin-left: 8px;
    }
.mx_AddImageButton_preview-img {
            border-radius: 50%;
            background-repeat: no-repeat;
            background-size: cover;
            margin: 0 4px;
            width: 22px;
            height: 22px;
        }
.mx_AddImageButton_preview-name {
            font-size: 12px;
            overflow-x: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            max-width: 200px;
        }
.mx_AddImageButton_preview-remove {
            background: url(../../img/feather-customised/cancel-dark.26324a5.svg) no-repeat center;
            background-size: cover;
            cursor: pointer;
            margin: 0 8px;
            width: 8px;
            height: 8px;
        }
/*
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: #2b2c32;
    width: 400px;
    max-height: 116px;
    overflow-y: auto;
    border-radius: 3px;
	border: solid 1px #7b8ffe;
    cursor: pointer;
    z-index: 1;
}
.mx_AddressSelector.mx_AddressSelector_empty {
    display: none;
}
.mx_AddressSelector_addressListElement .mx_AddressTile {
    background-color: #2b2c32;
    border: solid 1px #2b2c32;
    margin: 0;
}
.mx_AddressSelector_addressListElement.mx_AddressSelector_selected {
    background-color: #343a46;
}
.mx_AddressSelector_addressListElement.mx_AddressSelector_selected .mx_AddressTile {
    background-color: #343a46;
    border: solid 1px #343a46;
}
/*
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: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    border-radius: 3px;
    background-color: #3b405b;
    border: solid 1px #959598;
    line-height: 26px;
    color: #ffffff;
    font-size: 14px;
    font-weight: normal;
    margin: 6px 0px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
.mx_AddressTile.mx_AddressTile_error {
    background-color: rgba(255, 0, 100, 0.1);
    color: #ffbf7a;
    border-color: #ffbf7a;
}
.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: -ms-flexbox;
    display: flex;
    max-width: 330px;
    -ms-flex-align: center;
        align-items: center;
}
.mx_AddressTile_name {
    padding-right: 4px;
    min-width: 130px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
/*
.mx_AddressTile_name.mx_AddressTile_justified {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
}
*/
.mx_AddressTile_id {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-right: 4px;
}
/*

.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;
}
.mx_CitadelButton {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 0 20px !important;
    height: 38px !important;
    border-radius: 55px !important;
    font-family: 'Nunito Sans', Arial, Helvetica, Sans-Serif !important;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
    outline: none;
}
.mx_CitadelButton.primary {
        color: #ffffff;
        background-color: #7b8ffe;
        border: 1.5px solid #7b8ffe !important;
    }
.mx_CitadelButton.secondary {
        color: #7b8ffe;
        background-color: transparent;
        border: 1.5px solid #7b8ffe !important;
    }
.mx_CitadelButton.disabled {
        cursor: default;
        opacity: 0.5;
    }
.mx_CitadelButton.loading {
        width: 38px;
        padding: 0;
    }
.mx_CitadelButton .mx_Spinner path { stroke: #ffffff; }
.code-input-wrapper {
    height: 125px;
    min-height: 125px;
}
.code-input-wrapper div.label {
        margin-bottom: 5px;
        font-family: 'Nunito Sans', Arial, Helvetica, Sans-Serif;
        font-size: 14px;
        font-weight: bold;
        font-style: normal;
        font-stretch: normal;
        line-height: normal;
        letter-spacing: normal;
        color: #ffffff;
    }
.code-input-wrapper div.error {
        font-family: 'Nunito Sans', Arial, Helvetica, Sans-Serif;
        font-size: 12px;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: normal;
        letter-spacing: normal;
        color: #ee6d6a;
        width: 300px;
    }
.code-input-wrapper div.error span.email {
            font-weight: bold;
        }
.code-input-wrapper .code-input {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
            align-items: center;
        margin-bottom: 6px;
        position: relative;
        width: 300px;
    }
.code-input-wrapper .code-input span {
            margin: 0 8px;
        }
.code-input-wrapper .code-input .x-error {
            width: 12px;
            height: 12px;
            position: absolute;
            right: 0;
        }
.code-input-wrapper .code-input .x-error.displayed {
                background-image: url(../../img/error-dark.42e9dca.svg);
                background-position: center;
                background-size: contain;
                background-repeat: no-repeat;
            }
.code-input-wrapper .code-input input {
            width: 35px;
            height: 44px;
            border-radius: 2px;
            border: solid 1px #959598;
            margin: 0 4px;
            font-family: 'Nunito Sans', Arial, Helvetica, Sans-Serif;
            font-size: 14px;
            font-weight: normal;
            font-style: normal;
            font-stretch: normal;
            line-height: normal;
            letter-spacing: normal;
            text-align: center;
            color: #ffffff;
            background-color: #404146;
        }
.code-input-wrapper .code-input input:first-child {
            margin-left: 0;
        }
.code-input-wrapper .code-input input:last-child {
            margin-right: 0;
        }
.code-input-wrapper .code-input input:focus {
            outline: none;
            border: solid 1px #7b8ffe;
        }
.code-input-wrapper .code-input input[type=number]::-webkit-inner-spin-button, .code-input-wrapper .code-input input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
.code-input-wrapper .code-input input[type="number"] {
            -moz-appearance: textfield;
        }
.code-input-wrapper .code-input input.error {
            border: solid 1px #ee6d6a;
        }
.CitadelEditableText {
    font-size: 14px;
}
.CitadelEditableText .static-text, .CitadelEditableText .edited-text {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
            align-items: center;
        margin: 12px 12px 0;
        padding-bottom: 12px;
        color: #d4d4d6;
    }
.CitadelEditableText .static-text {
        -ms-flex-pack: justify;
            justify-content: space-between;
    }
.CitadelEditableText .static-text .text {
            width: 100%;
        }
.CitadelEditableText .static-text .placeholder {
            color: #737576;
        }
.CitadelEditableText .editable-text {
        cursor: pointer;
    }
.CitadelEditableText .editable-text .text {
            width: 180px;
        }
.CitadelEditableText .edited-text textarea {
            height: inherit;
            border: none;
            resize: none;
            font-size: inherit;
            font-weight: inherit;
            line-height: inherit;
            padding: 0;
            width: 208px;
        }
.CitadelEditableText_header {
    font-size: 20px;
    font-weight: bold;
}
.CitadelEditableText_header .static-text, .CitadelEditableText_header .edited-text {
        padding: 15px 12px 15px 15px;
        margin: 0;
        color: #ffffff;
    }
.mx_CitadelInfo {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    font-size: 13px;
}
.mx_CitadelInfo .label {
        font-weight: 600;
        color: #d4d4d6;
        min-width: 150px;
    }
.mx_CitadelInfo .value {
        color: #d4d4d6;
    }
.mx_CitadelInput {
    width: 400px;
}
.mx_CitadelInput .label {
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: bold;
        line-height: 1.14;
    }
.mx_CitadelInput .input-wrapper {
        position: relative;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
            align-items: center;
        margin-bottom: 4px;
    }
.mx_CitadelInput .input-wrapper .input {
            width: 400px;
            box-sizing: border-box;
            border-radius: 3px;
            background-color: #404146;
            border: 1px solid #959598;
            font-weight: 300;
            font-size: 13px;
            padding: 12.5px 8px;
        }
.mx_CitadelInput .input-wrapper .input:focus {
            border: 1px solid #7b8ffe;
        }
.mx_CitadelInput .input-wrapper .eye {
            cursor: pointer;
            position: absolute;
            top: 13px;
            right: 16px;
        }
.mx_CitadelInput .input-wrapper .eye img {
                height: 18px;
            }
.mx_CitadelInput .input-wrapper .clear {
            cursor: pointer;
            display: -ms-flexbox;
            display: flex;
        }
.mx_CitadelInput .input-wrapper .clear img {
                position: absolute;
                right: 25px;
                top: 11px;
            }
.mx_CitadelInput .input-wrapper .error-wrapper {
            height: 12px;
            position: absolute;
            right: -20px;
            display: -ms-flexbox;
            display: flex;
        }
.mx_CitadelInput .input-wrapper .error-wrapper img {
                height: 12px;
                width: 12px;
            }
.mx_CitadelInput .input-wrapper .error-wrapper .remove {
                cursor: pointer;
            }
.mx_CitadelInput .info-wrapper .info, .mx_CitadelInput .info-wrapper .additional-info {
            font-size: 12px;
        }
.mx_CitadelInput_disabled .label { color: #959598; }
.mx_CitadelInput_disabled .input-wrapper .input {
            border: #55565b;
            background-color: #2b2c32;
        }
.mx_CitadelInput_warning .input-wrapper .input, .mx_CitadelInput_warning .input-wrapper .input:focus {
            border: 1px solid #ffbf7a;
        }
.mx_CitadelInput_warning .info-wrapper .info, .mx_CitadelInput_warning .info-wrapper .info a {
            color: #ffbf7a;
        }
.mx_CitadelInput_error .input-wrapper .input, .mx_CitadelInput_error .input-wrapper .input:focus {
            border: 1px solid #ee6d6a;
        }
.mx_CitadelInput_error .info-wrapper .info, .mx_CitadelInput_error .info-wrapper .info a {
            color: #ee6d6a;
        }
.mx_CitadelInput + .mx_PasswordValidation {
    width: 100%;
}
.mx_CitadelInput_opacity {
    opacity: 0.5;
}
.mx_CitadelPhoneInput_wrapper .mx_CitadelInput .input-box {
            -ms-flex-align: center;
                align-items: center;
            border: 1px solid #959598;
            border-radius: 2px;
            display: -ms-flexbox;
            display: flex;
            font-size: 14px;
            height: 44px;
            width: 100%;
        }
.mx_CitadelPhoneInput_wrapper .mx_CitadelInput .input-wrapper {
            margin-bottom: 4px;
        }
.mx_CitadelPhoneInput_wrapper .mx_CitadelInput .input-wrapper .input {
                border: none;
                outline: none;
                height: 100%;
                color: #ffffff;
            }
.mx_CitadelPhoneInput_wrapper .mx_CitadelInput .error-wrapper {
            position: absolute;
            left: calc(100% + 8px);
            top: 50%;
            transform: translateY(-50%);
            height: 100%;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
                align-items: center;
            margin-left: 0;
        }
.mx_CitadelPhoneInput_wrapper .mx_CitadelInput .error-wrapper img {
                width: 10px;
                height: 10px;
                background-image: url(../../img/error-dark.42e9dca.svg);
                background-repeat: no-repeat;
                background-size: contain;
                background-position: center;
            }
.mx_CitadelPhoneInput_wrapper .mx_CitadelInput .label {
            font-size: 14px;
        }
.mx_CitadelPhoneInput_wrapper .mx_CitadelInput .input-prefix {
            -ms-flex-align: center;
                align-items: center;
            border-right: 1px solid #959598;
            background-color: #404146;
            display: -ms-flexbox;
            display: flex;
            font-size: 14px;
            height: 100%;
            min-width: 16px;
            padding: 0 16px;
        }
.mx_CitadelPhoneInput_wrapper .mx_CitadelInput .error {
            font-size: 12px;
        }
.mx_CitadelPhoneInput_wrapper .mx_CitadelInput_disabled .input-box {
            border: 1px solid #55565b;
        }
.mx_CitadelPhoneInput_wrapper .mx_CitadelInput_disabled .input-prefix {
            border-right: 1px solid #55565b;
            background-color: #2b2c32;
        }
.mx_CitadelPhoneInput_wrapper .mx_CitadelInput_focused .input-box {
            border: 1px solid #7b8ffe;
        }
.mx_CitadelPhoneInput_wrapper .mx_CitadelInput_error .input-box {
            border: 1px solid #ee6d6a;
        }
.mx_CitadelPhoneInput_wrapper .mx_CitadelInput_error .input-prefix {
            border-right: 1px solid #ee6d6a;
        }
.mx_CitadelToggle {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    margin-bottom: 8px;
}
.mx_CitadelToggle .checkbox, .mx_CitadelToggle .radio {
        cursor: pointer;
        width: 16px;
        height: 16px;
    }
.mx_CitadelToggle .label {
        padding-left: 16px;
    }
.mx_CitadelToggle .label .name_description {
            font-weight: bold;
            line-height: 1.14;
        }
.mx_CitadelToggle .label .description {
            color: #737576;
            font-size: 12px;
            line-height: 1.43;
        }
.mx_CitadelToggle .checkbox {
        background-image: url(../../img/checkbox-off-dark.a4d1190.svg);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
.mx_CitadelToggle .radio {
        background-image: url(../../img/radio-off-dark.939218d.svg);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
.mx_CitadelToggle.checked .checkbox {
            background-image: url(../../img/checkbox-on-dark.3985e79.svg);
        }
.mx_CitadelToggle.checked .radio {
            background-image: url(../../img/radio-on-dark.de723c6.svg);
        }
.mx_CitadelToggle_disabled {
    opacity: 0.5;
}
.mx_CitadelToggle_disabled .checkbox, .mx_CitadelToggle_disabled .radio {
        cursor: inherit;
    }
.mx_CreateNewsButton {
    cursor: pointer;
    padding: 0 12px 0 20px;
    margin-top: 5px;
    position: relative;
}
.mx_CreateNewsButton:focus {
        outline: none;
    }
.mx_CreateNewsButton_icon {
        pointer-events: none;
        width: 25px;
        height: 24px;
        background-image: url(../../img/news-dark.1e71f4c.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }
.mx_CreateNewsButton_new-feature {
        position: absolute;
        top: 3px;
        left: 23px;
        transform: translate(-50%, -50%);
    }
/*
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;
}
.mx_DirectorySearchBox input {
        border: 1px solid #c9d2d6 !important;
        height: 44px;
        padding: 0px;
        border-radius: 2px;
        font-size: 14px;
        background-image: url(../../img/feather-customised/search-input-bis.5ec7de0.svg) !important;
    }
.mx_DirectorySearchBox input:focus {
        border: 1px solid #7b8ffe !important;
        background-image: url(../../img/feather-customised/search-input-bis-focus.a489bc4.svg) !important;
    }
.mx_DirectorySearchBox_joinButton {
    display: table-cell;
    padding: 3px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #f9fafc;
    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-image: url(../../img/cancel.2de3b1e.svg);
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    cursor: pointer;
    position: absolute;
    right: 141px;
}
/*
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: #ffffff;
}
.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 #959598;
    background-color: #404146;
    font-size: 12px;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.mx_Dropdown_input:focus {
    border-color: #7b8ffe;
}
/* Disable dropdown highlight on focus */
.mx_Dropdown_input.mx_AccessibleButton:focus {
    filter: none;
}
.mx_Dropdown_arrow {
    width: 10px;
    height: 6px;
    padding-right: 9px;
    background: url(../../img/feather-customised/dropdown-arrow.39b7bf6.svg) no-repeat;
    filter: sepia(50%) brightness(110%) invert(100%) saturate(20%);
}
.mx_Dropdown_input > .mx_Dropdown_option {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -ms-flex: 1;
        flex: 1;
}
.mx_Dropdown_option {
    height: 35px;
    line-height: 35px;
    padding-left: 8px;
    padding-right: 8px;
}
.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 #7b8ffe;
    background-color: #404146;
    max-height: 200px;
    overflow-y: auto;
}
.mx_Dropdown_menu .mx_Dropdown_option {
    height: auto;
    min-height: 35px;
}
.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 {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
}
.mx_EditableItem .mx_CitadelInput {
        margin-bottom: 8px;
    }
.mx_EditableItem_delete {
    margin: 0 5px 15px 15px;
    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_newItem .mx_Field input {
    width: calc(100% - 20px);
}
.mx_EditableItemList_label {
    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.
*/
/* TODO: Consider unifying with general input styles in _light.scss */
.mx_Field {
    display: -ms-flexbox;
    display: flex;
    position: relative;
    margin: 1em 0;
    border-radius: 4px;
    transition: border-color 0.25s;
    border: 1px solid #959598;
}
.mx_Field_prefix {
    border-right: 1px solid #959598;
}
.mx_Field input, .mx_Field select, .mx_Field textarea {
    font-weight: normal;
    font-family: 'Nunito Sans', Arial, Helvetica, Sans-Serif;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    padding: 8px 9px;
    color: #ffffff;
    background-color: #2b2c32;
}
.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.39b7bf6.svg);
            mask: url(../../img/feather-customised/dropdown-arrow.39b7bf6.svg);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    background-color: #ffffff;
    z-index: 1;
    pointer-events: none;
}
.mx_Field:focus-within {
    border-color: #7b8ffe;
}
.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: #888;
}
.mx_Field input:placeholder-shown:focus::placeholder, .mx_Field textarea:placeholder-shown:focus::placeholder {
    transition: color 0.25s ease-in 0.1s;
    color: #888;
}
.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: #ffffff;
    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 input:focus + label, .mx_Field input:not(:placeholder-shown) + label, .mx_Field textarea:focus + label, .mx_Field textarea:not(:placeholder-shown) + label, .mx_Field select + label, .mx_Field_labelAlwaysTopLeft 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: #181b21;
    pointer-events: initial;
}
.mx_Field input:focus + label, .mx_Field select:focus + label, .mx_Field textarea:focus + label {
    color: #7b8ffe;
}
.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: #181b21;
    color: #888;
}
.mx_Field_valid.mx_Field, .mx_Field_valid.mx_Field:focus-within {
        border-color: #7b8ffe;
    }
.mx_Field_valid.mx_Field label, .mx_Field_valid.mx_Field:focus-within label {
        color: #7b8ffe;
    }
.mx_Field_invalid.mx_Field, .mx_Field_invalid.mx_Field:focus-within {
        border-color: #ffbf7a;
    }
.mx_Field_invalid.mx_Field label, .mx_Field_invalid.mx_Field:focus-within label {
        color: #ffbf7a;
    }
.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;
}
.mx_HintOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 3000;
}
.mx_HintedComponent.hinted_read_marker {
        position: absolute;
        right: -21px;
        bottom: 28px;
    }
.mx_HintedComponent .hint {
        width: 272px;
        font-size: 12px;
        border-radius: 8px;
        border: solid 1px #2b2c32;
        background-color: #2b2c32;
        position: relative;
        z-index: 3001;
        text-align: left;
    }
.mx_HintedComponent .hint .title {
            text-transform: uppercase;
            letter-spacing: 0.86px;
            color: #7b8ffe;
            margin: 16px 16px 4px;
            font-weight: bold;
        }
.mx_HintedComponent .hint .description {
            margin: 0 16px 16px;
        }
.mx_HintedComponent .hint .tooltip-arrow {
            position: absolute;
            width: 0;
            height: 0;
        }
.mx_HintedComponent .hint .tooltip-arrow.top {
                border-left: 9px solid transparent;
                border-right: 9px solid transparent;
                border-bottom: 9px solid #2b2c32;
                top: -9px;
            }
.mx_HintedComponent .hint .tooltip-arrow.bottom {
                border-left: 9px solid transparent;
                border-right: 9px solid transparent;
                border-top: 9px solid #2b2c32;
                bottom: -9px;
            }
.mx_HintedComponent .hint .tooltip-arrow.left {
                left: 20px;
            }
.mx_HintedComponent .hint .tooltip-arrow.right {
                left: 238px;
            }
/*
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 #ffffff;
}
.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 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;
    cursor: not-allowed;
}
.mx_ManageIntegsButton_error img {
    position: absolute;
    right: -5px;
    top: -5px;
}
.mx_ManageIntegsButton_error {
    float: right;
}
.mx_ManageIntegsButton_error .mx_ManageIntegsButton_errorPopup {
    display: none;
}
.mx_ManageIntegsButton_error:hover .mx_ManageIntegsButton_errorPopup {
    display: inline;
}
.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: #7b8ffe;
    color: #ffffff;
    text-align: center;
    z-index: 1000;
}
/*
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_collapsed {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
}
.mx_MemberEventListSummary_collapsed .mx_EventTile_line {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
            align-items: center;
        width: 100%;
        padding-left: 14px;
    }
.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: #7b8ffe;
    cursor: pointer;
    float: right;
    margin-right: 10px;
    font-size: 12px;
    font-weight: bold;
    text-decoration: underline;
}
.mx_MemberEventListSummary_line {
    border-bottom: 1px solid #959598;
    margin-left: 14px;
    margin-bottom: 8px;
}
.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;
    }
/*
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%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
}
.mx_PowerSelector .label {
        margin-right: 10px;
    }
.mx_PowerSelector .text {
        color: #7b8ffe;
        font-weight: bold;
    }
.mx_PowerSelector .mx_Dropdown {
        margin: 5px 0;
        width: 150px;
    }
.mx_PowerSelector .mx_Dropdown .mx_Dropdown_option {
            height: 30px;
            line-height: 30px;
        }
.mx_PowerSelector .mx_Dropdown .mx_Dropdown_menu .mx_Dropdown_option {
            min-height: 30px;
        }
.mx_PowerSelector .mx_Field select, .mx_PowerSelector .mx_Field input {
    width: 100%;
    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;
}
.mx_ReadReceiptFullList {
    position: absolute;
    bottom: 23px;
    right: -120px;
    width: 234px;
    border-radius: 5px;
    color: #ffffff;
    background-color: #16171e;
    box-shadow: none;
    border: #55565b;
    padding: 0 8px 7px;
    z-index: 1;
}
.mx_ReadReceiptFullList .mx_BaseAvatar {
        position: relative !important;
    }
.mx_ReadReceiptFullList .header {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: justify;
            justify-content: space-between;
        -ms-flex-align: center;
            align-items: center;
        background-color: #16171e;
        padding: 16px 15px 8px 23px;
    }
.mx_ReadReceiptFullList .header .title {
            font-size: 16px;
            font-weight: bold;
        }
.mx_ReadReceiptFullList .header .count {
            color: #d4d4d6;
            font-size: 11px;
            font-weight: bold;
            margin-right: 8px;
        }
.mx_ReadReceiptFullList .receipts {
        padding: 7px 7px 0 15px;
        max-height: 324px;
        overflow-y: scroll;
    }
.mx_ReadReceiptFullList .receipts .read-receipt:last-child {
            border-bottom: 1px solid #16171e;
        }
.mx_ReadReceiptFullList .read-receipt {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
            align-items: center;
        padding-bottom: 8px;
        border-bottom: 1px solid #55565b;
        margin-bottom: 7px;
    }
.mx_ReadReceiptFullList .read-receipt .avatar {
            margin-right: 8px;
            margin-left: 8px;
        }
.mx_ReadReceiptFullList .read-receipt .info {
            width: 100%;
        }
.mx_ReadReceiptFullList .read-receipt .info .name {
                font-size: 14px;
                font-weight: bold;
            }
.mx_ReadReceiptFullList .read-receipt .info .timestamp {
                font-size: 11px;
                color: #d4d4d6;
            }
.mx_ReadReceiptFullListOverlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}
/*
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: #16171e;
}
.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;
}
.mx_EventTile_body .mx_UserPill, .mx_EventTile_body .mx_RoomPill, .mx_EventTile_body .mx_GroupPill {
    cursor: pointer;
}
/* 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: #4a5aa7;
    background-color: #dbdeed;
    padding: 0 7px;
}
/* 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: #7b8ffe;
    padding: 0 7px;
}
/* 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: #4a5aa7;
    background-color: #dbdeed;
}
/* More specific to override `.markdown-body a` color */
.mx_EventTile_content .markdown-body a.mx_GroupPill, .mx_GroupPill {
    color: #4a5aa7;
    background-color: #dbdeed;
}
.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 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: #c8c8cd !important;
}
.mx_TimelineIsAloneCard {
    width: 400px;
    height: 224px;
    border-radius: 4px;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
    margin: 24px 0 24px 54px;
    animation: fadein 1s;
}
.mx_TimelineIsAloneCard .cancel {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: end;
            justify-content: flex-end;
        height: 10px;
        margin-top: 24px;
        margin-right: 24px;
        cursor: pointer;
    }
.mx_TimelineIsAloneCard .content {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
            flex-direction: column;
        -ms-flex-align: center;
            align-items: center;
        margin-top: -18px;
    }
.mx_TimelineIsAloneCard .content .icon {
            display: -ms-flexbox;
            display: flex;
            margin-bottom: 16px;
            animation: fadein 2s;
            height: 88px;
        }
.mx_TimelineIsAloneCard .content .text {
            margin-bottom: 16px;
        }
.mx_TimelineIsAloneCard .content .button {
            font-weight: bold;
            font-size: 14px;
            border-radius: 50px;
            vertical-align: middle;
            display: -ms-flexbox;
            display: flex;
            outline: none;
            padding: 0 28px;
            cursor: pointer;
            min-height: 44px;
            width: -webkit-fit-content;
            width: -moz-fit-content;
            width: fit-content;
            -ms-flex-pack: center;
            justify-content: center;
            -ms-flex-align: center;
            align-items: center;
            display: inline-block;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
                align-items: center;
            -ms-flex-pack: center;
                justify-content: center;
            color: #ffffff;
            background-color: #7b8ffe;
            border: none;
        }
.mx_TimelineMessageSuggestions {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    margin-left: 94px;
    margin-top: 24px;
}
.mx_TimelineMessageSuggestions .buttons {
        padding: 4px;
        border: 3px solid #2b2c32;
        display: -ms-flexbox;
        display: flex;
    }
.mx_TimelineMessageSuggestions .buttons div {
            background-color: #7b8ffe;
            color: #ffffff;
            font-size: 14px;
            font-weight: bold;
            height: 32px;
            border-radius: 16px;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-pack: center;
                justify-content: center;
            -ms-flex-align: center;
                align-items: center;
            min-width: 68px;
            padding: 0 16px;
            cursor: pointer;
        }
.mx_TimelineMessageSuggestions .buttons div:not(:last-child) {
            margin-right: 8px;
        }
.mx_TimelineMessageSuggestions .hinted-buttons {
        z-index: 3002;
        border: 3px solid transparent;
        border-radius: 24px;
        background-color: #2b2c32;
    }
.mx_TimelineMessageSuggestions .hinted-buttons div {
            z-index: 3003;
        }
.mx_TimelineMessageSuggestions .close {
        color: #7b8ffe;
        text-decoration: underline;
        cursor: pointer;
        margin-left: 8px;
        font-size: 12px;
        font-weight: bold;
    }
.mx_TimelineMessageSuggestions_closed {
    display: none;
}
.timeline-message-suggestions .hint {
    position: absolute;
}
.mx_TimelineStarterCard {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    padding-left: 14px;
    position: relative;
}
.mx_TimelineStarterCard .room-info {
        margin-left: 16px;
    }
.mx_TimelineStarterCard .room-info .name {
            font-size: 20px;
            font-weight: bold;
        }
.mx_TimelineStarterCard .room-info .additional-info {
            font-size: 14px;
        }
.mx_TimelineStarterCard .room-info .additional-info .edit-topic {
                cursor: pointer;
                display: -ms-flexbox;
                display: flex;
            }
.mx_TimelineStarterCard .room-info .additional-info .edit-topic .icon {
                    display: -ms-flexbox;
                    display: flex;
                }
.mx_TimelineStarterCard .room-info .additional-info .edit-topic .text {
                    margin-left: 4px;
                }
.mx_TimelineStarterCard .room-info .is-dm { color: #737576; }
/*
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: 33px;
    height: 16px;
    border-radius: 14px;
    background-color: #d4d4d6;
    position: relative;
    opacity: 0.5;
}
.mx_ToggleSwitch_enabled {
    cursor: pointer;
    opacity: 1;
}
.mx_ToggleSwitch.mx_ToggleSwitch_on {
    background-color: #7b8ffe;
}
.mx_ToggleSwitch_ball {
    transition: left 0.15s ease-out 0.1s;
    margin: 1px;
    width: 14px;
    height: 14px;
    border-radius: 20px;
    background-color: #fff;
    position: absolute;
    top: 0;
}
.mx_ToggleSwitch:not(.mx_ToggleSwitch_on) > .mx_ToggleSwitch_ball {
    left: 0px;
}
.mx_ToggleSwitch_on > .mx_ToggleSwitch_ball {
    left: 17px;
}
/*
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_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 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 #2b2c32;
    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: #2b2c32;
    z-index: 2000;
    padding: 10px;
    pointer-events: none;
    line-height: 14px;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    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;
    }
.update-handler .mx_AccessibleButton {
        height: 40px;
        min-width: 166px;
        padding: 0;
        -ms-flex-align: center;
            align-items: center;
        -ms-flex-pack: center;
            justify-content: center;
    }
.update-handler .mx_AccessibleButton_disabled {
            background-color: #a4acd3;
            color: rgba(255, 255, 255, 0.5);
            cursor: not-allowed;
        }
.update-handler .mx_Spinner path {
        stroke: white;
    }
.update-handler__warning {
        margin-right: 8px;
    }
.update-handler__message {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
            align-items: center;
        font-size: 13px;
        line-height: 1.23;
        margin-top: 8px;
    }
.update-handler .no-click {
        pointer-events: 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_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: #7b8ffe;
    }
.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: #7b8ffe;
        }
.mx_Validation_detail.mx_Validation_invalid {
        color: #ffbf7a;
    }
.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: #ffbf7a;
        }
/*
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: #7b8ffe;
    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: #4a5aa7;
}
.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: #ffffff;
    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 #16171e;
    border-radius: 3px;
    overflow: hidden;
}
.about-e2e {
    position: absolute;
    right: -26px;
    top: 0;
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
}
.about-e2e .image {
        width: 20px;
        height: 20px;
        cursor: pointer;
        background-image: url(../../img/about-e2e-dark.a482942.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }
.about-e2e .info {
        position: fixed;
        width: 210px;
        z-index: 1001;
        padding: 16px 24px;
        border-radius: 5px;
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.32);
        border: none;
        background-color: #2b2c32;
    }
.about-e2e .info .title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 8px;
        }
.about-e2e .info .description {
            line-height: normal;
        }
.about-e2e .info .description div:first-child { margin-bottom: 16px; }
.about-e2e .info .description div:last-child {
                font-weight: bold;
                color: #7b8ffe;
                text-decoration: underline;
                cursor: pointer;
                width: -webkit-fit-content;
                width: -moz-fit-content;
                width: fit-content;
            }
.mx_AboutE2EContainerOverlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 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_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: #ffffff;
    -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;
}
.mx_CreateEvent_link {
}
/*
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: 40px 0 16px 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    height: 16px;
    color: #7b8ffe;
    padding-left: 14px;
}
.mx_DateSeparator > hr {
    -ms-flex: 1 1 0px;
        flex: 1 1 0;
    height: 0;
    border: none;
    border-bottom: 1px solid #7b8ffe;
}
.mx_DateSeparator > div {
    margin-right: 8px;
    -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 a {
    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;
}
.mx_MFileBody_download img {
    margin-right: 8px;
}
/*
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;
}
/*
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%;
}
/*
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

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;
    border-radius: 4px;
    background: #2b2c32;
    top: -13px;
    right: 8px;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.mx_MessageActionBar > * {
        display: inline-block;
        position: relative;
        width: 27px;
        margin-left: -1px;
    }
.mx_MessageActionBar > *:hover {
            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 > *::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background-repeat: no-repeat;
            background-position: center;
            filter: brightness(100%) invert(100%);
        }
.mx_MessageActionBar_replyButton::after {
    background-image: url(../../img/reply.d3d3ba4.svg);
}
.mx_MessageActionBar_optionsButton::after {
    background-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 {
}
.mx_NewsBody {
    display: inline-block;
    overflow: hidden;
    border-radius: 2px;
    padding: 16px;
    height: 148px;
    width: 90%;
    margin: 6px 0 0;
    box-sizing: border-box;
    background-color: #2b2c32;
    border: 1px solid #c9d2d6;
}
.mx_NewsBody:hover {
    cursor: pointer;
    background-color: rgba(255,255,255,0.2);
}
.mx_NewsBody_image {
    width: 111px;
    height: 111px;
    float: left;
    margin-right: 16px; /* Safari, Chrome and Opera > 1s2.1s */ /* Firefox < 1s6 */ /* Internet Explorer */ /* Opera < 1s2.1s */
    animation: fadein 1s;
}
.mx_NewsBody_image img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}
.mx_NewsBody_title {
    font-size: 20px;
    font-weight: bold;
    text-align: justify;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mx_NewsBody_preview {
    line-height: 1.43;
    margin-top: 7px;
    height: 80px;
    overflow: hidden;
}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1s; }
}
/*
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 span {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
            align-items: center;
    }
.mx_RoomAvatarEvent_avatar {
    margin-left: 8px;
}
/*
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, .mx_SenderProfile_aux span span {
    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_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 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 .alias_label {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
            align-items: center;
    }
.mx_AliasSettings .alias_label .not_set {
            margin-left: 5px;
            font-weight: bold;
        }
.mx_AliasSettings .alias_label .mx_Dropdown {
            margin: 5px 0 5px 10px;
            min-width: 200px;
        }
.mx_AliasSettings .mx_CitadelInput {
        width: 475px;
    }
.mx_AliasSettings_editable {
    border: 0px;
    border-bottom: 1px solid #55565b;
    padding: 0px;
    min-width: 240px;
}
.mx_AliasSettings_editable:focus {
    border-bottom: 1px solid #7b8ffe;
    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

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-right: 12px;
    padding: 0;
    margin: 5px auto 5px auto;
    color: #7b8ffe;
    font-size: 12px;
}
.mx_AddWidget_button_full_width {
    max-width: 960px;
}
.mx_SetAppURLDialog_input {
    border-radius: 3px;
    border: 1px solid #959598;
    padding: 9px;
    color: #16171e;
    background-color: #2b2c32;
    font-size: 15px;
}
.mx_AppTile {
    max-width: 960px;
    width: 50%;
    margin-right: 5px;
    border: 5px solid #22262e;
    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 #22262e;
    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: #22262e;
    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;
    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: #7b8ffe;
}
.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: #7b8ffe;
}
.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: #ffbf7a;
}
.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 #ffffff;
    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: #7b8ffe;
    border-color: #7b8ffe;
}
.mx_AppIconTile:hover {
    border: 1px solid #7b8ffe;
    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;
    width: 75%;
    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: #2b2c32;
    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: 400px;
    margin: 10px auto 10px auto;
    color: #ffffff;
}
.mx_AppPermissionWarningTextLabel {
    font-weight: bold;
    display: block;
}
.mx_AppPermissionWarningTextURL {
    color: #7b8ffe;
}
.mx_AppPermissionButton {
    border: none;
    padding: 5px 20px;
    border-radius: 5px;
    background-color: #7b8ffe;
    color: #ffffff;
    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 #16171e;
    background: #2b2c32;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    max-height: 50vh;
    overflow: auto
}
.mx_Autocomplete_ProviderSection {
    border-bottom: 1px solid #16171e;
}
.mx_Autocomplete_Completion_container_pill {
    margin: 12px;
    display: -ms-flexbox;
    display: flex;
}
/* 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: #ffffff;
}
.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: #ffffff;
}
.mx_Autocomplete_Completion_pill > * {
    margin: 0 3px;
}
.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;
    }
/* container for pill-style completions */
.mx_Autocomplete_Completion_container_pill {
    margin: 12px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: wrap;
        flex-flow: wrap;
}
.mx_Autocomplete_Completion.selected, .mx_Autocomplete_Completion:hover {
    background: #343a46;
    outline: none;
}
.mx_Autocomplete_provider_name {
    margin: 12px;
    color: #ffffff;
    font-weight: 400;
    opacity: 0.4;
}
/* styling for common completion elements */
.mx_Autocomplete_Completion_subtitle {
    font-style: italic;
    -ms-flex: 1;
        flex: 1;
}
.mx_Autocomplete_Completion_description {
    color: gray;
}
/*
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

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: #7b8ffe;
}
.mx_E2EIcon_warning {
    -webkit-mask-image: url(../../img/e2e/lock-warning.46c0691.svg);
            mask-image: url(../../img/e2e/lock-warning.46c0691.svg);
    background-color: #ffbf7a;
}
/*
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: #ffffff;
    cursor: pointer;
    margin-bottom: 8px;
}
.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 {
    width: 36px;
    height: 36px;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
}
.mx_EntityTile_power {
    position: absolute;
    left: 15px;
    top: -8px;
}
.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:not(.mx_EntityTile_noHover):hover .mx_EntityTile_name {
    font-size: 13px;
}
.mx_EntityTile_ellipsis .mx_EntityTile_name {
    font-style: italic;
    color: #ffffff;
}
.mx_EntityTile_invitePlaceholder .mx_EntityTile_name {
    font-style: italic;
    color: #ffffff;
}
.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_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: 8px 0;
    font-size: 14px;
    position: relative;
}
.mx_EventTile.mx_EventTile_info {
    padding-top: 0;
}
.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: 3px;
    left: 54px;
}
.mx_EventTile_continuation {
    padding-top: 0 !important;
}
.mx_EventTile .mx_SenderProfile {
    color: #ffffff;
    font-size: 14px;
    display: inline-block; /* anti-zalgo, with overflow hidden */
    overflow-y: hidden;
    cursor: pointer;
    padding-left: 65px; /* left gutter */
    padding-bottom: 0;
    padding-top: 0;
    margin: 0;
    line-height: 17px;
}
.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 .mx_MessageTimestamp {
    display: block;
    visibility: hidden;
    white-space: nowrap;
    color: #ffffff;
    font-size: 10px;
    left: 0;
    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 */
    border-radius: 4px;
    min-height: 24px;
    line-height: 22px;
}
.mx_EventTile_reply {
    margin-right: 10px;
}
.mx_EventTile_info {
    font-size: 12px;
    color: #959598;
 }
.mx_EventTile_info .mx_EventTile_line {
        padding-left: 14px;
        min-height: unset;
        line-height: unset;
    }
.mx_EventTile_info .mx_TextualEvent {
        opacity: unset;
    }
/* HACK to override line-height which is already marked important elsewhere */
.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
    font-size: 48px !important;
    line-height: 48px !important;
}
/* 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: #7b8ffe 5px solid;
    padding-left: 60px;
    background-color: #22262e;
}
.mx_EventTile:hover .mx_EventTile_line, .mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line
{
    background-color: #2b2c32;
}
.mx_EventTile_searchHighlight {
    background-color: #7b8ffe;
    color: #ffffff;
    border-radius: 5px;
    padding-left: 2px;
    padding-right: 2px;
    cursor: pointer;
}
.mx_EventTile_searchHighlight a {
    background-color: #7b8ffe;
    color: #ffffff;
}
.mx_EventTile_encrypting {
    color: #abddbc !important;
}
.mx_EventTile_sending {
    color: #959598;
}
.mx_EventTile_sending .mx_UserPill, .mx_EventTile_sending .mx_RoomPill, .mx_EventTile_sending .mx_emojione {
    opacity: 0.5;
}
.mx_EventTile_notSent {
    color: #f44;
}
.mx_EventTile_redacted .mx_EventTile_line .mx_UnknownBody, .mx_EventTile_redacted .mx_EventTile_reply .mx_UnknownBody {
    display: block;
    height: 22px;
    width: 250px;
    border-radius: 11px;
    background: repeating-linear-gradient(
        -45deg,
        #606060,
        #606060 3px,
        transparent 3px,
        transparent 6px
    );
    box-shadow: 0px 0px 3px #000000 inset;
}
.mx_EventTile_highlight, .mx_EventTile_highlight .markdown-body {
    color: #ffbf7a;
}
.mx_EventTile_contextual {
    opacity: 0.4;
}
.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_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp {
    visibility: visible;
}
.mx_EventTile_selected > div > a > .mx_MessageTimestamp {
    left: 3px;
    width: auto;
}
.mx_EventTile:hover .mx_MessageActionBar, .mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar {
    visibility: visible;
}
.mx_EventTile_readAvatars .mx_BaseAvatar_initial {
        font-size: 14px;
    }
.mx_EventTile_readAvatars_hinted .mx_BaseAvatar {
        z-index: 3003;
    }
.mx_EventTile_readAvatars_hinted .highlight {
        z-index: 3002;
        position: absolute;
        content: " ";
        background-color: #2b2c32;
        height: 22px;
        top: -4px;
        border-radius: 100px;
        border: 3px solid transparent;
    }
.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;
}
.mx_EventTile_readAvatarRemainder {
    color: #ffffff;
    background-color: #45454b;
    font-size: 10px;
    font-weight: bold;
    position: absolute;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    padding: 0 4px;
    border-radius: 20px;
    height: 20px;
    cursor: pointer;
}
/* 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;
    max-width: 800px;
}
/* De-zalgoing */
.mx_EventTile_body {
    overflow-y: hidden;
}
/* End to end encryption stuff */
.mx_EventTile:hover .mx_EventTile_e2eIcon {
    opacity: 1;
}
.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: #ffbf7a;
}
.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 a {
    color: #ffffff;
    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:hover.mx_EventTile_verified .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
    padding-left: 60px;
}
.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line, .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;
}
.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_line > a > .mx_MessageTimestamp, .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp {
    left: 3px;
    width: auto;
}
/*
.mx_EventTile_verified .mx_EventTile_e2eIcon {
    display: none;
}
*/
.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;
}
/* Various markdown overrides */
.mx_EventTile_content .markdown-body {
    font-family: inherit !important;
    white-space: normal !important;
    line-height: inherit !important;
    color: inherit;
    font-size: 14px;
}
/* have to use overlay rather than auto otherwise Linux and Windows
   Chrome gets very confused about vertical spacing:
   https://github.com/vector-im/vector-web/issues/754
*/
.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_content .markdown-body pre, .mx_EventTile_content .markdown-body code {
        color: #333;
    }
.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 pre {
    border: 1px solid transparent;
}
.mx_EventTile:hover .mx_EventTile_body pre
{
    border: 1px solid #e5e5e5;
}
.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: #7b8ffe;
    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 */
.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: 0;
            padding-bottom: 1px;
        }
.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation {
        padding-top: 0;
    }
.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation .mx_EventTile_line, .mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation .mx_EventTile_reply {
            padding-top: 0;
            padding-bottom: 0;
        }
.mx_MatrixChat_useCompactLayout .mx_EventTile_line, .mx_MatrixChat_useCompactLayout .mx_EventTile_reply {
        padding-top: 0;
        padding-bottom: 0;
    }
.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;
        }
.ctdl_encrypted_message {
    border-radius: 6px;
    background-color: #535d97;
    padding: 12px 16px;
}
.ctdl_encrypted_message div {
        font-size: 14px;
        line-height: normal;
    }
.mx_EventTile_bad:hover .mx_EventTile_line {
    background: #2b2c32;
}
/*
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: #f9fafc;
    background-color: #ffbf7a;
}
.mx_JumpToBottomButton_scrollDown {
    position: relative;
    height: 38px;
    border-radius: 19px;
    box-sizing: border-box;
    background: #2b2c32;
    border: 1.3px solid #7b8ffe;
    cursor: pointer;
}
.mx_JumpToBottomButton_scrollDown:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(../../img/icon-jump-to-bottom.44c45f5.svg) no-repeat 9px 14px;
    filter: sepia(200%) hue-rotate(150deg) brightness(200%) saturate(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_LinkPreviewWidget {
    margin-top: 15px;
    margin-right: 15px;
    margin-bottom: 15px;
    display: -ms-flexbox;
    display: flex;
    border-left: 4px solid #ddd;
    color: #888;
}
.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: #ffbf7a;
}
.mx_MemberDeviceInfo_icon_verified {
    -webkit-mask-image: url(../../img/e2e/verified.d53b45d.svg);
            mask-image: url(../../img/e2e/verified.d53b45d.svg);
    background-color: #7b8ffe;
}
.mx_MemberDeviceInfo_icon_unverified {
    -webkit-mask-image: url(../../img/e2e/warning.a0cb4f2.svg);
            mask-image: url(../../img/e2e/warning.a0cb4f2.svg);
    background-color: #ffbf7a;
}
.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 {
    font-weight: bold;
    font-size: 14px;
    border-radius: 50px;
    vertical-align: middle;
    display: -ms-flexbox;
    display: flex;
    outline: none;
    padding: 0 28px;
    cursor: pointer;
    min-height: 44px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    display: inline-block;
    font-size: 15px;
    padding: 0 1.5em;
    margin: 2px;
    -ms-flex: 1;
        flex: 1;
}
.mx_MemberDeviceInfo_deviceId {
    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 .invite {
        display: -ms-flexbox;
        display: flex;
        padding-top: 5px;
        margin-left: -3px;
        -ms-flex-align: center;
            align-items: center;
        cursor: pointer;
    }
.mx_MemberInfo .invite .mx_AccessibleButton {
            margin-right: 8px;
        }
.mx_MemberInfo .invite span {
            font-size: 14px;
            font-weight: bold;
            color: #7b8ffe;
        }
.mx_MemberInfo .invite .mx_RoomSubList_addRoom {
            border: none;
            border-radius: 14px;
            height: 24px;
            -ms-flex: 0 0 24px;
                flex: 0 0 24px;
        }
.mx_MemberInfo .mx_PowerSelector {
        margin-top: 8px;
    }
.mx_MemberInfo .mx_BaseAvatar_image {
        background: none;
    }
.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: 20px;
    width: 16px;
    position: absolute;
    top: 16px;
    left: 16px;
    cursor: pointer;
}
.mx_MemberInfo_name h2 {
    -ms-flex: 1;
        flex: 1;
    margin-left: 16px !important;
}
.mx_MemberInfo h2 {
    font-size: 14px;
    font-weight: bold;
    margin: 0;
}
.mx_MemberInfo_container {
    margin: 0 16px 16px 16px;
}
.mx_MemberInfo_container .mx_RoomTile, .mx_MemberInfo_container .mx_MemberInfo_createRoom {
        padding-left: 0px;
    }
.mx_MemberInfo .mx_RoomTile_nameContainer {
    width: 154px;
}
.mx_MemberInfo .mx_RoomTile_badge {
    display: none;
}
.mx_MemberInfo .mx_RoomTile_name {
    width: 160px;
}
.mx_MemberInfo_avatar {
    margin-bottom: 16px;
    min-height: 30px;
}
.mx_MemberInfo_avatar > img {
    height: 240px;
    width: 100%;
    max-height: 30vh;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
}
.mx_MemberInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {
    cursor: zoom-in;
    border-radius: unset;
    border: 1px solid #dde3e5;
    border-left: none;
}
.mx_MemberInfo_profile {
    margin-bottom: 16px;
}
.mx_MemberInfo h3 {
    text-transform: uppercase;
    color: #61708b;
    font-weight: bold;
    font-size: 12px;
    letter-spacing: 0.9px;
    margin: 4px 0;
}
.mx_MemberInfo_buttons {
    margin-bottom: 16px;
}
.mx_MemberInfo_field {
    cursor: pointer;
    font-size: 15px;
    color: #ffffff;
    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;
}
.mx_MemberInfo_profileField {
    margin-bottom: 6px;
}
/*
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 .header {
        display: -ms-flexbox;
        display: flex;
        font-size: 20px;
        font-weight: bold;
        padding: 22px 16px 7px;
    }
.mx_MemberList .header .title {
            margin-right: 8px;
        }
.mx_MemberList .invite {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
            align-items: center;
        cursor: pointer;
        height: 40px;
        padding-left: 9px;
        border: 3px solid #2b2c32;
        border-left: none;
    }
.mx_MemberList .invite .mx_AccessibleButton {
            margin-right: 8px;
        }
.mx_MemberList .invite span {
            font-size: 14px;
            font-weight: bold;
            color: #7b8ffe;
        }
.mx_MemberList .invite .mx_RoomSubList_addRoom {
            border: none;
            border-radius: 14px;
            height: 24px;
            -ms-flex: 0 0 24px;
                flex: 0 0 24px;
        }
.mx_MemberList .hinted-invite {
        background-color: #2b2c32;
        border: 3px solid transparent;
        border-left: none;
        z-index: 3001;
        position: relative;
    }
.mx_MemberList .hinted-invite::before {
            content: " ";
            height: 46px;
            width: 3px;
            background-color: transparent;
            position: absolute;
            left: 0;
        }
.mx_MemberList .mx_textinput {
        background-color: #45454b;
        height: 32px;
        border-bottom: 1px solid #2b2c32;
    }
.mx_MemberList input[type=text].mx_textinput_icon.mx_textinput_search, .mx_MemberList input[type=search].mx_textinput_icon.mx_textinput_search {
        background-image: url(../../img/feather-customised/search-input-bis-dark.8009eea.svg);
    }
.mx_MemberList input[type=text].mx_textinput_icon.mx_textinput_search:-ms-input-placeholder, .mx_MemberList input[type=search].mx_textinput_icon.mx_textinput_search:-ms-input-placeholder {
            color: #d4d4d6;
        }
.mx_MemberList input[type=text].mx_textinput_icon.mx_textinput_search::placeholder, .mx_MemberList input[type=search].mx_textinput_icon.mx_textinput_search::placeholder {
            color: #d4d4d6;
        }
.mx_MemberList .mx_MemberTile {
        display: -ms-flexbox;
        display: flex;
        height: 40px;
        -ms-flex-align: center;
            align-items: center;
        cursor: pointer;
    }
.mx_MemberList .mx_MemberTile .avatar {
            margin-right: 8px;
            position: relative;
        }
.mx_MemberList .mx_MemberTile .avatar .external {
                position: absolute;
                top: 14px;
                right: -3px;
            }
.mx_MemberList .mx_MemberTile .name {
            min-width: 150px;
            white-space: nowrap;
        }
.mx_MemberList .mx_MemberTile .bubble {
            display: none;
        }
.mx_MemberList .mx_MemberTile:hover {
        /* Replace this chevron ! */
        background-image: url(../../img/chevron-right.0070bb4.png);
        font-weight: bold;
        background-repeat: no-repeat;
        background-position: 200px 15px;
        background-size: 5px 10px;
    }
.mx_MemberList .mx_MemberTile:hover .bubble {
            display: block;
            position: relative;
            z-index: 100;
            font-size: 12px;
            background-color: #45454b;
            border: solid 1px #55565b;
            border-radius: 3px;
            min-width: 136px;
            font-weight: normal;
            padding: 8px;
            top: 50px;
            right: 184px;
            text-align: center;
        }
.mx_MemberList .mx_MemberTile:hover .bubble:before, .mx_MemberList .mx_MemberTile:hover .bubble:after {
            position: absolute;
            content: '';
            transform: rotate(90deg);
            border-style: solid;
            left: 132px;
        }
.mx_MemberList .mx_MemberTile:hover .bubble:before {
            border-width: 8px 14px 8px 0;
            border-color: transparent #45454b transparent transparent;
            top: -13px;
            z-index: 1;
        }
.mx_MemberList .mx_MemberTile:hover .bubble:after {
            border-width: 8px 14px 8px 0;
            border-color: transparent #55565b transparent transparent;
            top: -15px;
        }
.mx_MemberList .reset-filters {
        height: 40px;
        line-height: 40px;
        text-align: center;
    }
.mx_MemberList .reset-filters a {
            font-size: 14px;
            font-weight: bold;
            color: #7b8ffe;
        }
.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: #ffffff;
        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 0;
}
.mx_MemberList_query, .mx_GroupMemberList_query, .mx_GroupRoomList_query {
    -ms-flex: 1 1 0px;
        flex: 1 1 0;
}
.mx_MemberList_wrapper {
    padding: 0 10px 0 16px;
}
.mx_MemberList_invite, .mx_RightPanel_invite {
    -ms-flex: 0 0 auto;
        flex: 0 0 auto;
    position: relative;
    background-color: #7b8ffe;
    border-radius: 4px;
    padding: 8px;
    margin: 9px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    color: #ffffff;
    font-weight: 600;
}
.mx_MemberList_invite .mx_RightPanel_icon, .mx_RightPanel_invite .mx_RightPanel_icon {
        padding-right: 5px;
        padding-top: 2px;
    }
.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;
}
.mx_TenantFilter {
    padding: 0 16px;
    max-height: 250px;
    overflow-y: auto;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.mx_TenantFilter_ShowMore {
    font-size: 12px;
    padding: 8px 16px 10px;
    color: #7b8ffe;
}
.mx_TenantPill {
    border-radius: 12px;
    display: -ms-flexbox;
    display: flex;
    height: 24px;
    border: 1px solid #d4d4d6;
    color: #d4d4d6;
    padding: 0 6px;
    margin: 4px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    max-width: 200px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -ms-flex-align: center;
        align-items: center;
}
.mx_TenantPill .name {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        margin-right: 3px;
    }
.mx_TenantPillSelected {
    background-color: #737576;
    color: white;
}
/*
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;
    box-shadow: none;
    border-top: 1px solid #16171e;
    position: relative;
    padding-left: 29px;
}
.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: #888;
    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;
    margin-left: 23px;
}
.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: 50px;
    -ms-flex-pack: start;
        justify-content: start;
    -ms-flex-align: start;
        align-items: flex-start;
    font-size: 14px;
    margin-right: 6px;
    padding-bottom: 5px;
}
.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: #faa }
    to { background-color: #2b2c32 }
}
.mx_MessageComposer_input_error {
    animation: 0.2s visualbell;
}
.mx_MessageComposer_input blockquote {
    color: #777;
    margin: 0 0 16px;
    padding: 0 15px;
    border-left: 4px solid #ddd;
}
.mx_MessageComposer_input pre {
    background-color: rgba(0, 0, 0, 0.04);
    border-radius: 3px;
    padding: 10px;
}
.mx_MessageComposer_input textarea {
    display: block;
    width: 100%;
    padding: 0px;
    margin-top: 6px;
    margin-bottom: 6px;
    border: 0px;
    resize: none;
    outline: none;
    box-shadow: none;
    color: #ffffff;
    background-color: #2b2c32;
    font-size: 14px;
    max-height: 120px;
    overflow: auto;
    /* needed for FF */
    font-family: 'Nunito Sans', 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: #7b8ffe;
    opacity: 1.0;
}
.mx_MessageComposer_input textarea::-webkit-input-placeholder {
    color: #7b8ffe;
}
.mx_MessageComposer_button {
    cursor: pointer;
    padding-top: 4px;
    height: 20px;
    width: 20px;
    filter: contrast(0%) brightness(35%);
}
.mx_MessageComposer_upload {
    background: url(../../img/attachment.3bccc3b.svg) no-repeat;
    background-size: contain;
    filter: brightness(0) saturate(100%) invert(81%) sepia(6%) saturate(14%) hue-rotate(202deg) brightness(103%) contrast(99%);
    width: 22px;
    height: 22px;
    padding-top: 0px;
    margin-top: 7px;
    margin-left: -2px;
}
.mx_MessageComposer_hangup {
    background: url(../../img/hangup.a9def68.svg) no-repeat;
    background-size: contain;
}
.mx_MessageComposer_voicecall {
    background: url(../../img/feather-customised/phone.87241fa.svg) no-repeat;
    background-size: contain;
}
.mx_MessageComposer_videocall {
    background: url(../../img/feather-customised/video.02dbf40.svg) no-repeat;
    background-size: contain;
}
.mx_MessageComposer_stickers {
    background: url(../../img/feather-customised/face.34d1316.svg) no-repeat;
    background-size: contain;
}
.mx_MessageComposer_formatting {
    cursor: pointer;
    margin: 0 11px;
    width: 24px;
    height: 18px;
}
.mx_MessageComposer_formatbar_wrapper {
    width: 100%;
    background-color: #2b2c32;
}
.mx_MessageComposer_formatbar {
    margin: auto;
    display: -ms-flexbox;
    display: flex;

    height: 30px;

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

    -ms-flex-direction: row;

        flex-direction: row;
    -ms-flex-align: center;
        align-items: center;
    font-size: 10px;
    color: #888;
}
.mx_MessageComposer_formatbar .format-button {
        cursor: pointer;
        margin-right: 8px;
        width: 24px;
        height: 16px;
        border-radius: 16px;
        border: solid 1px #737576;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
            justify-content: center;
        -ms-flex-align: center;
            align-items: center;
    }
.mx_MessageComposer_formatbar .format-button-active {
        background-color: #737576;
    }
.mx_MessageComposer_formatbar .format-button-active:focus {
        background-color: #505354;
    }
.mx_MessageComposer_formatbar .format-button:hover, .mx_MessageComposer_formatbar .format-button-active:hover {
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.28);
    }
.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;
    background: url(../../img/markdown.6905ba8.svg) no-repeat center;
    background-size: contain;
    filter: contrast(0%) brightness(50%);
}
.mx_MessageComposer_formatbar_markdown.mx_MessageComposer_markdownDisabled, .mx_MessageComposer_input_markdownIndicator.mx_MessageComposer_markdownDisabled {
        opacity: 0.2;
    }
.mx_MatrixChat_useCompactLayout .mx_MessageComposer_input {
        min-height: 50px;
    }
.mx_MatrixChat_useCompactLayout .mx_MessageComposer_noperm_error {
        height: 50px;
    }
.mx_MinifiedNewsEdition_wrapper {
        -ms-flex-align: center;
            align-items: center;
        background-color: #16171e;
        border: 1px solid #45454b;
        border-radius: 4px 0 0 0;
        cursor: pointer;
        display: -ms-flexbox;
        display: flex;
        padding: 8px 12px;
        position: absolute;
        bottom: 100%;
        right: -1px;
    }
.mx_MinifiedNewsEdition_text {
        font-size: 12px;
        font-weight: bold;
        padding: 0 8px;
        vertical-align: middle;
        width: 110px;
        white-space: nowrap;
        overflow-x: hidden;
        text-overflow: ellipsis;
    }
.mx_MinifiedNewsEdition_news-icon {
        width: 20px;
        height: 20px;
        background-image: url(../../img/news-dark.1e71f4c.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }
.mx_MinifiedNewsEdition_expand {
        pointer-events: none;
        width: 16px;
        height: 16px;
        background-image: url(../../img/expand-dark.2feead5.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }
/*
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: #2b2c32;
}
.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:hover .mx_PinnedEventTile_timestamp {
    display: inline-block;
}
.mx_PinnedEventTile:hover .mx_PinnedEventTile_actions {
    display: block;
}
.mx_PinnedEventTile_actions {
    float: right;
    margin-right: 10px;
    display: none;
}
.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 #16171e;
}
.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 #16171e;
    background: #2b2c32;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    max-height: 50vh;
    overflow: auto
}
.mx_ReplyPreview_section {
    border-bottom: 1px solid #16171e;
}
.mx_ReplyPreview_header {
    margin: 12px;
    color: #ffffff;
    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;
    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_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;
    }
.mx_RoomBreadcrumbs .mx_IndicatorScrollbar_leftOverflowIndicator {
        background: linear-gradient(to left, rgba(34, 38, 46, 0), rgba(34, 38, 46, 1));
    }
.mx_RoomBreadcrumbs .mx_IndicatorScrollbar_rightOverflowIndicator {
        background: linear-gradient(to right, rgba(34, 38, 46, 0), rgba(34, 38, 46, 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_RoomDropTarget_container {
    background-color: #f9fafc;
    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 #7b8ffe;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.5);
    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 56px;
        flex: 0 0 56px;
}
.mx_RoomHeader_wrapper {
    margin: auto;
    height: 56px;
    -ms-flex-align: center;
        align-items: center;
    display: -ms-flexbox;
    display: flex;
    min-width: 0;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
}
.mx_RoomHeader_wrapper_disabled .mx_RoomHeader_avatar, .mx_RoomHeader_wrapper_disabled .mx_RoomHeader_avatar .mx_AccessibleButton, .mx_RoomHeader_wrapper_disabled .mx_RoomHeader_name {
        cursor: default !important;
    }
.mx_RoomHeader_spinner {
    -ms-flex: 1;
        flex: 1;
    height: 36px;
    padding-left: 12px;
    padding-right: 12px;
}
.mx_RoomHeader_textButton {
    font-weight: bold;
    font-size: 14px;
    border-radius: 50px;
    vertical-align: middle;
    display: -ms-flexbox;
    display: flex;
    outline: none;
    padding: 0 28px;
    cursor: pointer;
    min-height: 44px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    display: inline-block;
    margin-right: 8px;
    margin-top: -5px;
}
.mx_RoomHeader_textButton_danger {
    background-color: #ffbf7a;
}
.mx_RoomHeader_cancelButton {
    cursor: pointer;
    padding-left: 12px;
    display: -ms-flexbox;
    display: flex;
}
.mx_RoomHeader_buttons {
    display: -ms-flexbox;
    display: flex;
    background-color: #2b2c32;
    -ms-flex-align: center;
        align-items: center;
}
.mx_RoomHeader_info {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1;
        flex: 1;
    -ms-flex-direction: column;
        flex-direction: column;
    padding-right: 13px;
}
.mx_RoomHeader_simpleHeader {
    line-height: 52px;
    color: #ffffff;
    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: #ffffff;
    font-weight: 600;
    font-size: 18px;
    border-bottom: 1px solid transparent;
    display: -ms-flexbox;
    display: flex;
}
.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: #7b8ffe;
}
.mx_RoomHeader_placeholder {
    color: #a2a2a2 !important;
}
.mx_RoomHeader_editable {
    border-bottom: 1px solid #55565b !important;
    min-width: 150px;
    cursor: text;
}
.mx_RoomHeader_editable:focus {
    border-bottom: 1px solid #7b8ffe !important;
    outline: none;
    box-shadow: none;
}
.mx_RoomHeader_topic {
    -ms-flex: 1;
        flex: 1;
    color: #d4d4d6;
    font-weight: 400;
    font-size: 13px;
    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: 40px;
    height: 40px;
    margin-left: 32px;
    margin-right: 16px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    position: relative;
}
.mx_RoomHeader_avatar .lock {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 16px;
        height: 16px;
        background-image: url(../../img/e2e-lock-dark.cd58832.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        border-radius: 50%;
    }
.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 {
    height: 24px;
    width: 24px;
}
.mx_RoomHeader_settingsButton {
    background: url(../../img/feather-customised/settings.e6aded4.svg) no-repeat;
    background-size: contain;
    margin-right: 39px;
}
.mx_RoomHeader_forgetButton {
    background: url(../../img/leave.96c4dc4.svg) no-repeat;
    background-size: contain;
    width: 26px;
}
.mx_RoomHeader_searchButton {
    height: 56px;
    width: 60px;
    display: -ms-flexbox;
    display: flex;
}
.mx_RoomHeader_searchButton .mx_RoomHeader_search_icon {
        margin: auto;
    }
.mx_RoomHeader_shareButton {
    background: url(../../img/feather-customised/share.9dc5acb.svg) no-repeat;
    background-size: contain;
}
.mx_RoomHeader_manageIntegsButton {
    background: url(../../img/feather-customised/grid.9e353ed.svg) no-repeat;
    background-size: contain;
}
.mx_RoomHeader_showPanel {
    height: 16px;
}
.mx_RoomHeader_voipButton {
    display: table-cell;
}
.mx_RoomHeader_voipButtons {
    margin-top: 18px;
}
.mx_RoomHeader_pinnedButton {
    position: relative;
    background: url(../../img/icons-pin.1d9bacf.svg) no-repeat;
    background-size: contain;
}
.mx_RoomHeader_pinsIndicator {
    position: absolute;
    right: 0;
    bottom: 4px;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background-color: #61708b;
}
.mx_RoomHeader_pinsIndicatorUnread {
    background-color: #e30c07;
}
.mx_RoomHeader_publicLabel {
    color: #585858;
    font-size: 12px;
    height: 17px;
    padding-right: 8px;
}
/*
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 > div {
        background: none;
    }
.mx_RoomList .mx_ResizeHandle {
    position: relative;
}
.mx_SearchBox {
    -ms-flex: none;
        flex: none;
}
/* 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 #7b8ffe;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.5);
    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: 20px !important;
        font-weight: bold;
    }
.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_dark {
    background-color: #15171b;
    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 {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
            justify-content: center;
        overflow-wrap: break-word;
    }
.mx_RoomPreviewBar_panel_wrapper {
    position: relative;
    bottom: 0;
}
.mx_RoomPreviewBar_panel {
    padding: 16px 16px 24px 32px;
    border-top: 1px solid #16171e;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
    -ms-flex-direction: row;
        flex-direction: row;
}
.mx_RoomPreviewBar_panel h3, .mx_RoomPreviewBar_panel p {
        margin: 0;
    }
.mx_RoomPreviewBar_panel p {
        font-size: 14px;
        color: #737576;
    }
.mx_RoomPreviewBar_panel .members-link {
        margin-top: 8px;
        font-size: 12px;
    }
.mx_RoomPreviewBar_panel .collapse-link-placeholder {
        height: 16px;
    }
.mx_RoomPreviewBar_panel .expanded-link, .mx_RoomPreviewBar_panel .collapsed-link {
        font-size: 12px;
        text-decoration: underline;
        font-weight: bold;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: end;
            justify-content: flex-end;
        width: 100%;
        color: #7b8ffe;
        cursor: pointer;
    }
.mx_RoomPreviewBar_panel .expanded-link .chevron, .mx_RoomPreviewBar_panel .collapsed-link .chevron {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
                align-items: center;
            margin-left: 10px;
        }
.mx_RoomPreviewBar_panel .collapsed-link .chevron {
        transform: rotate(180deg);
    }
.mx_RoomPreviewBar_panel .buttons {
        display: -ms-flexbox;
        display: flex;
        margin-top: 32px;
    }
.mx_RoomPreviewBar_panel .buttons div {
            margin-right: 16px;
        }
.mx_RoomPreviewBar_panel_expanded {
    height: calc(100% - (32px));
    transition: height 10s linear;
}
.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 #16171e;
    border-bottom: unset;
}
.mx_RoomRecoveryReminder_header {
    font-weight: bold;
    margin-bottom: 1em;
}
.mx_RoomRecoveryReminder_body {
    margin-bottom: 1em;
}
.mx_RoomRecoveryReminder_button {
    font-weight: bold;
    font-size: 14px;
    border-radius: 50px;
    vertical-align: middle;
    display: -ms-flexbox;
    display: flex;
    outline: none;
    padding: 0 28px;
    cursor: pointer;
    min-height: 44px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    display: inline-block;
    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;
    padding-left: 32px;
    padding-right: 14px;
    position: relative;
    border-bottom: 1px solid #16171e;
}
.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_LeftPanel_container:not(.collapsed) .mx_RoomTile:hover .mx_RoomTile_menuButton, .mx_RoomTile_menuDisplayed .mx_RoomTile_menuButton {
        display: block;
    }
.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_container .lock {
        position: absolute;
        left: 60%;
        bottom: 0;
        width: 13px;
        height: 13px;
        background-image: url(../../img/e2e-lock-dark.cd58832.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        border-radius: 50%;
    }
.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: #ffffff;
    opacity: 0.8;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}
.collapsed .mx_RoomTile {
        padding: 0 10px;
    }
.collapsed .mx_RoomTile_name {
        display: none;
    }
.collapsed .mx_RoomTile_badge {
        right: 6px;
        top: 0;
        border-radius: 16px;
        z-index: 3;
        border: 1px solid #ffffff;
    }
.collapsed .mx_RoomTile_menuButton {
        display: none;
    }
.mx_RoomTile_badge {
    width: 24px;
    height: 16px;
    border-radius: 8px;
    color: #ffffff;
    font-weight: 600;
    font-size: 12px;
    border: 1px solid #ffffff;
    text-align: center;
}
.mx_RoomTile_unreadNotify .mx_RoomTile_badge, .mx_RoomTile_badge.mx_RoomTile_badgeUnread {
}
.mx_RoomTile_highlight .mx_RoomTile_badge, .mx_RoomTile_badge.mx_RoomTile_badgeRed {
    background-color: #ffffff;
    border: none;
    color: #4a5aa7;
}
.mx_RoomTile_unread .mx_RoomTile_name, .mx_RoomTile_highlight .mx_RoomTile_name {
        color: #ffffff;
        opacity: 1;
        font-weight: bold;
    }
.mx_RoomTile_selected {
    background-color: #2b2c32;
    font-weight: bold;
}
.mx_DNDRoomTile {
    transform: none;
    transition: transform 0.2s;
}
.mx_DNDRoomTile_dragging {
    transform: scale(1.05, 1.05);
}
.mx_RoomTile:focus {
    filter: none !important;
    background-color: #343a46;
}
.mx_RoomTile_arrow {
    position: absolute;
    right: 0;
}
.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 {
    text-align: center;
    height: 235px;
    -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;
    background-color: #22262e;
    -webkit-align-items: center;
    padding-left: 20px;
    padding-right: 20px;
}
.mx_RoomUpgradeWarningBar_header {
    color: #ffbf7a;
    font-weight: bold;
}
.mx_RoomUpgradeWarningBar_body {
    color: #ffbf7a;
}
.mx_RoomUpgradeWarningBar_upgradelink {
    color: #ffbf7a;
    text-decoration: underline;
}
.mx_RoomUpgradeWarningBar_small {
    color: #888;
    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 #16171e;
}
.mx_SearchBar .mx_SearchBar_input {
        -ms-flex: 1 1 0px;
            flex: 1 1 0;
        margin-left: 22px;
        background-color: #404146;
        border-radius: 2px;
        border: 1px solid #959598;
    }
.mx_SearchBar .mx_SearchBar_searchButton {
        cursor: pointer;
        width: 37px;
        height: 37px;
        background: url(../../img/feather-customised/search.b643d92.svg) no-repeat center;
        background-size: 18px 18px;
        margin-right: 5px;
    }
.mx_SearchBar .mx_SearchBar_button {
        border: 0;
        margin: 0 0 0 22px;
        padding: 5px;
        font-size: 15px;
        cursor: pointer;
        color: #7b8ffe;
        border-bottom: 2px solid #7b8ffe;
        font-weight: 600;
    }
.mx_SearchBar .mx_SearchBar_unselected {
        color: #ffffff;
        border-color: transparent;
    }
.mx_SearchBar .mx_RoomHeader_cancelButton {
        margin-right: 16px;
    }
/*
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 Sans', Arial, Helvetica, Sans-Serif;
    border-radius: 3px;
    border: 1px solid #959598;
    padding: 9px;
    color: #ffffff;
    background-color: #2b2c32;
    margin-left: 3px;
    font-size: 15px;
    margin-bottom: 8px;
    width: 189px;
}
.mx_SearchableEntityList_query::-moz-placeholder {
    color: #ffffff;
    opacity: 0.5;
    font-size: 12px;
}
.mx_SearchableEntityList_query::-webkit-input-placeholder {
    color: #ffffff;
    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: #ffffff;
    background-color: #ffffff;
    margin-right: 15px;
    margin-top: 11px;
    margin-bottom: 11px;
}
.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;
    background-color: #7b8ffe;
}
.mx_TopUnreadMessagesBar_scrollUp {
    height: 38px;
    border-radius: 19px;
    box-sizing: border-box;
    background: #2b2c32;
    border: 1.3px solid #7b8ffe;
    cursor: pointer;
}
.mx_TopUnreadMessagesBar_scrollUp:before {
    content: "";
    position: absolute;
    width: 38px;
    height: 38px;
    background: url(../../img/icon-jump-to-first-unread.a2b9106.svg) no-repeat 9px 13px;
    filter: sepia(200%) hue-rotate(150deg) brightness(200%) saturate(100%);
}
/*
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 {
    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 {
    text-align: center;
    margin-left: 14px;
    margin-right: 16px;
}
.mx_WhoIsTypingTile_avatars > :not(:first-child) {
    margin-left: -12px;
}
.mx_WhoIsTypingTile_avatars .mx_BaseAvatar_image {
    border: 1px solid #2b2c32;
}
.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 #2b2c32;
    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: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
}
.mx_DevicesPanel_header {
    display: -ms-flexbox;
    display: flex;
    padding-bottom: 8px;
    border-bottom: 1px solid #55565b;
    margin-bottom: 11px;
}
.mx_DevicesPanel_header .mx_DevicesPanel_deviceButtons {
    width: 20%;
}
.mx_DevicesPanel_device {
    display: -ms-flexbox;
    display: flex;
}
.mx_DevicesPanel_device > div {
    display: table-cell;
    margin-bottom: 16px;
}
.mx_DevicesPanel_myDevice {
    font-weight: bold;
}
.mx_DevicesPanel_devicePlatform {
    width: 250px;
    padding-right: 50px;
}
.mx_DevicesPanel_deviceLastSeen {
    width:  150px;
}
.mx_DevicesPanel_disconnect {
    width: 150px;
    text-align: right;
}
/*
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_ExistingEmailAddress {
    margin-bottom: 5px;
}
.mx_ExistingEmailAddress #profileEmail {
    color: rgba(74, 74, 74, 0.9);
}
.mx_ExistingEmailAddress_delete {
    margin-right: 5px;
    cursor: pointer;
    vertical-align: middle;
}
.mx_ExistingEmailAddress_email {
    vertical-align: middle;
}
.mx_ExistingEmailAddress_promptText {
    margin-right: 10px;
}
.mx_ExistingEmailAddress_confirmBtn {
    margin-right: 5px;
}
.mx_EmailAddresses_new .mx_Field input {
    width: calc(100% - 20px);
}
/*
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%;
}
/*
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;
}
.mx_MfaSection {
    margin-bottom: 24px;
}
.mx_MfaSection .header {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: justify;
            justify-content: space-between;
    }
.mx_MfaSection .header span {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
                align-items: center;
        }
.mx_MfaSection .header span img { margin-right: 8px; }
.mx_MfaSection .header span .title { font-size: 18px; }
.mx_MfaSection .sub-sections {
        margin-top: 12px;
    }
.mx_MfaSection .sub-sections .sub-section {
            display: -ms-flexbox;
            display: flex;
            margin-bottom: 12px;
            -ms-flex-pack: justify;
                justify-content: space-between;
            -ms-flex-align: center;
                align-items: center;
        }
.mx_MfaSection .sub-sections .sub-section .label {
                display: -ms-flexbox;
                display: flex;
                -ms-flex-direction: column;
                    flex-direction: column;
                font-size: 13px;
                width: 338px;
            }
.mx_MfaSection .sub-sections .sub-section .label .title {
                    font-weight: bold;
                    margin-bottom: 4px;
                }
.mx_MfaSection .sub-sections .sub-section .label .description {
                    display: -ms-flexbox;
                    display: flex;
                    -ms-flex-direction: column;
                        flex-direction: column;
                }
.mx_MfaSection .sub-sections .sub-section .label .description .phone-number {
                        font-weight: bold;
                        margin-left: 5px;
                    }
.mx_MfaSection .sub-sections .sub-section .label .description .phone-number-link {
                        font-weight: bold;
                        color: #7b8ffe;
                        text-decoration: underline;
                        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_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;
    margin-top: 20px;
}
.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: #7b8ffe;
}
.mx_UserNotifSettings_devicesTable td {
    padding-left: 20px;
    padding-right: 20px;
}
.mx_UserNotifSettings_notifTable {
    display: table;
}
.mx_UserNotifSettings_notifTable .mx_Spinner {
    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_ExistingPhoneNumber {
    margin-bottom: 5px;
}
.mx_ExistingPhoneNumber_delete {
    margin-right: 5px;
    cursor: pointer;
    vertical-align: middle;
}
.mx_ExistingPhoneNumber_address {
    vertical-align: middle;
}
.mx_ExistingPhoneNumber_promptText {
    margin-right: 10px;
}
.mx_ExistingPhoneNumber_confirmBtn {
    margin-right: 5px;
}
.mx_PhoneNumbers_new .mx_Field input {
    width: calc(100% - 20px);
}
.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 {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -ms-flex-positive: 1;
        flex-grow: 1;
}
.mx_ProfileSettings_controls .mx_CitadelInput {
        width: 400px;
    }
.mx_ProfileSettings_controls .mx_Field #profileDisplayName, .mx_ProfileSettings_controls .mx_Field #profileTopic {
    width: calc(100% - 20px);
}
.mx_ProfileSettings_controls .mx_Field #profileDisplayName {
    color: rgba(74, 74, 74, 0.9);
}
.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-right: 40px;
    position: relative;
    cursor: pointer;
}
.mx_ProfileSettings_avatar > * {
    display: block;
    width: 88px;
    height: 88px;
    border-radius: 50px;
}
.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;
}
.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: #454545;
    background-color: transparent;
}
.mx_ProfileSettings_avatarOverlayText {
    display: block;
    margin-top: 22px;
    margin-bottom: 6px;
}
.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: url(../../img/feather-customised/upload.a4ce82a.svg) no-repeat center;
    background-size: 14px 14px;
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlayImg:before {
    filter: invert(100%);
}
.mx_ProfileSettings_avatarUpload {
    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_SettingsTab_warningText {
    color: #ffbf7a;
}
.mx_SettingsTab_heading {
    margin-bottom: 24px;
    font-weight: bold;
    line-height: 1.2;
    font-size: 20px;
    color: #ffffff;
}
.mx_SettingsTab_subheading {
    font-size: 16px;
    display: block;
    font-family: 'Nunito Sans', Arial, Helvetica, Sans-Serif;
    color: #ffffff;
    margin-bottom: 10px;
    margin-top: 12px;
}
.mx_SettingsTab_subsectionText {
    font-size: 13px;
    padding-bottom: 12px;
    display: block;
}
.mx_SettingsTab_section {
    margin-bottom: 30px;
}
.mx_SettingsTab_section .history_text {
        margin-bottom: 10px;
    }
.mx_SettingsTab_section .mx_SettingsFlag {
    margin-bottom: 10px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
    -ms-flex-align: center;
        align-items: center;
}
.mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label {
    vertical-align: middle;
    display: inline-block;
    font-size: 13px;
    color: #ffffff;
    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: #7b8ffe;
    word-break: break-all;
}
.mx_SettingsTab .mx_SettingsTab_subheading:nth-child(n + 2) {
    margin-top: 20px;
}
.mx_SettingsTab a {
    color: #7b8ffe;
}
/*
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;
}
.mx_GeneralRoomSettingsTab .mx_AliasSettings .mx_Field select {
    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_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;
    margin-bottom: 10px;
}
.mx_SecurityRoomSettingsTab_warning img {
        vertical-align: middle;
        margin-right: 10px;
    }
.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_GeneralUserSettingsTab_themeSection {
    display: block;
}
.mx_GeneralUserSettingsTab_changePassword .mx_PasswordValidation {
    margin-bottom: 12px;
}
.mx_GeneralUserSettingsTab_changePassword .mx_Field, .mx_GeneralUserSettingsTab_themeSection .mx_Field {
    display: block;
    margin-right: 100px;
}
.mx_GeneralUserSettingsTab_changePassword .mx_Field input {
    display: block;
    width: calc(100% - 20px);
}
.mx_GeneralUserSettingsTab_changePassword .mx_Field:first-child {
    margin-top: 0;
}
.mx_GeneralUserSettingsTab_themeSection .mx_Field select {
    display: block;
    width: 100%;
}
.mx_GeneralUserSettingsTab_accountSection > .mx_EmailAddresses, .mx_GeneralUserSettingsTab_accountSection > .mx_PhoneNumbers, .mx_GeneralUserSettingsTab_accountSection > .mx_CitadelInput, .mx_GeneralUserSettingsTab_languageInput, .mx_GeneralUserSettingsTab_themeInput,  {
    margin-right: 100px;
}
.mx_GeneralUserSettingsTab_themeInput {
    margin-bottom: 10px;
}
.mx_HelpUserSettingsTab .mx_HelpUserSettingsTab_debugButton {
        margin-bottom: 5px;
        margin-top: 5px;
    }
.mx_HelpUserSettingsTab span.mx_AccessibleButton {
        word-break: break-word;
    }
.mx_HelpUserSettingsTab .mx_SettingsTab_subheading {
        line-height: 1;
        margin-bottom: 8px;
    }
.mx_HelpUserSettingsTab .mx_SettingsTab_subsectionText {
        line-height: 1.23;
    }
.mx_HelpUserSettingsTab .mx_SettingsTab_subsectionText_support_buttons {
        margin-top: 21px;
    }
.mx_HelpUserSettingsTab .mx_SettingsTab_subsectionText_support_buttons .mx_AccessibleButton {
            height: 40px;
            margin-right: 16px;
            padding: 12px 22px;
            border-radius: 55px;
            box-sizing: border-box;
            font-weight: bold;
            -ms-flex-pack: center;
                justify-content: center;
        }
.mx_HelpUserSettingsTab .mx_SettingsTab_subsectionText_support_buttons .mx_AccessibleButton:last-child {
                min-width: 166px;
            }
.mx_LegalInfoUserSettingsTab .button {
        margin-bottom: 8px;
    }
/*
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;
}
.mx_PreferencesUserSettingsTab .mx_Field input {
    display: block;
    width: calc(100% - 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_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 .buttons {
        display: -ms-flexbox;
        display: flex;
        margin-bottom: 16px;
    }
.mx_SecurityUserSettingsTab_bulkOptions .mx_AccessibleButton {
        margin-right: 10px;
    }
.mx_SecurityUserSettingsTab_importExportButtons {
    margin-bottom: 15px;
}
.mx_SecurityUserSettingsTab_ignoredUser {
    margin-bottom: 5px;
}
.mx_SecurityUserSettingsTab_ignoredUser span {
        margin-right: 30px
    }
.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 select {
    width: 100%;
    max-width: 100%;
}
.mx_VoiceUserSettingsTab .mx_Field {
    margin-right: 100px;
}
.mx_VoiceUserSettingsTab_missingMediaPermissions {
    margin-bottom: 15px;
}
/*
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: #7b8ffe;
    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: #2b2c32;
    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.css.map*/