/* ==UserStyle==
@name         Element Discord Dark Theme
@version      20210825.17.51
@namespace    userstyles.world/user/matrix_user
@description  Make Element/matrix look like discord
@author       matrix_user
@license      CC Zero
==/UserStyle== */

    /*@font-face {
    font-family: Whitney;
    font-weight: 300;
    src: url(/assets/6c6374bad0b0b6d204d8d6dc4a18d820.woff) format("woff")
}*/
    @font-face {
        font-family: Whitney;
        font-weight: 400;
        src: url(https://vladnosek.github.io/misc/f4.woff) format("woff")
    }
    @font-face {
        font-family: Whitney;
        font-weight: 500;
        src: url(https://vladnosek.github.io/misc/f3.woff) format("woff")
    }
    @font-face {
        font-family: Whitney;
        font-weight: 600;
        src: url(https://vladnosek.github.io/misc/f5.woff) format("woff")
    }
    @font-face {
        font-family: Whitney;
        font-weight: 700;
        src: url(https://vladnosek.github.io/misc/f2.woff) format("woff")
    }
    body {
        font-family: Whitney, "Helvetica Neue", Helvetica, Arial, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial, Helvetica, sans-serif, Noto Color Emoji, sans-serif;
        background-color: #2e3136;
    }
    .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_userHeader {
        padding: 8px;
    }
    .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper {
        margin-top: 0px
    }
    .mx_LeftPanel {
        background: black !important;
    }
    .mx_LeftPanel_roomListContainer {
        backdrop-filter: none !important;
    }
    .mx_AccessibleButton.mx_RoomTile.mx_RoomTile_selected {
        border-radius: 0;
        padding-left: 10px;
    }
    .mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name {
        font-size: 16px;
    }
    .mx_RoomSublist .mx_RoomSublist_showNButton {
        font-size: 14px;
        font-weight: 400;
    }
    .mx_RoomSublist {
        margin-left: 0
    }
    .mx_SpacePanel .mx_SpaceButton {
        padding: 3px 2px 3px 0px;
    }
    .mx_SpacePanel .mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton {
        margin-left: 10px
    }
    [aria-label="Rooms"] [aria-label="Rooms"] .mx_DecoratedRoomAvatar .mx_BaseAvatar {
        display: none
    }
    [aria-label="Rooms"] [aria-label="Rooms"] .mx_RoomTile_name:before {
        content: '# ';
        display: inline;
        font-weight: 500;
        font-size: 20px;
        line-height: 1;
        opacity: 0.3;
    }
    [aria-label="Rooms"] [aria-label="Rooms"] {
        color: #8e9297;
        font-weight: 500;
    }
    [aria-label="Rooms"] [aria-label="Rooms"] .mx_RoomTile_name {
        line-height: 1.3;
    }
    .mx_AccessibleButton.mx_RoomTile:hover {
        color: #d9dadb;
    }
    .mx_RoomTile:hover {
        background-color: #4f545c2e
    }
    [aria-label="Rooms"] [aria-label="Rooms"] .mx_RoomTile_name.mx_RoomTile_nameHasUnreadEvents {
        color: #d9d9d9
    }
    [aria-label="Rooms"] [aria-label="Rooms"] .mx_RoomTile_name.mx_RoomTile_nameHasUnreadEvents:after {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 99px;
        background-color: white;
        left: -4px;
        top: 12.5px;
        position: absolute
    }
    .mx_RoomTile.mx_RoomTile_hasMenuOpen,
    .mx_RoomTile.mx_RoomTile_selected,
    .mx_RoomTile:focus-within {
        background-color: #4f545c52;
        color: white;
    }
    .mx_EventTile_content .markdown-body code,
    .mx_EventTile_content .markdown-body pre,
    .mx_RoomHeader {
        background-color: #36393f
    }
    .mx_RoomHeader {
        border-bottom: 1px solid #292d32;
    }
    .mx_RoomHeader_buttons {
        background-color: #35393f
    }
    .mx_RoomHeader_wrapper {
        height: 48px;
    }
    .dark-panel,
    .mx_E2EIcon_bordered {
        background-color: #2f3136
    }
    .dark-panel .mx_textinput,
    .dark-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
    .dark-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text] {
        background-color: #202225;
    }
    .mx_LeftPanel {
        width: 260px !important;
    }
    .mx_RoomView_MessageList {
        padding: 18px 8px;
    }
    .mx_EntityTile_power {
        color: #a4a4a4;
        padding-right: 8px;
        font-size: 12px;
        font-weight: 600;
    }
    .mx_AccessibleButton.mx_RoomTile.mx_RoomTile_selected {
        color: white;
        padding-left: 0;
        border-radius: 4px;
    }
    [aria-label="People"] .mx_AccessibleButton.mx_RoomTile {
        padding: 4px 6px
    }
    [aria-label="Rooms"] [aria-label="Rooms"] .mx_AccessibleButton.mx_RoomTile,
    [aria-label="Rooms"] [aria-label="Rooms"] .mx_AccessibleButton.mx_RoomTile.mx_RoomTile_selected {
        height: 34px;
    }
    .mx_AccessibleButton.mx_RoomTile {
        color: #8e9297;
        margin: 1px 8px;
        border-radius: 4px;
        font-weight: 500;
        padding-left: 0;
    }
    .mx_LeftPanel .mx_LeftPanel_roomListContainer {
        background-color: #2f3136
    }
    .mx_SpacePanel {
        background-color: #202225
    }
    .mx_BaseAvatar.mx_BaseAvatar_image.mx_RoomAvatar_isSpaceRoom,
    .mx_BaseAvatar.mx_RoomAvatar_isSpaceRoom .mx_BaseAvatar_image,
    .mx_BaseAvatar.mx_RoomAvatar_isSpaceRoom .mx_BaseAvatar_initial,
    .mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 28px !important;
        line-height: 40px !important;
    }
    .mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon:before {
        -webkit-mask-size: 28px;
        mask-size: 28px;
        width: 40px;
        height: 40px;
    }
    .mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle) {
        background-color: #36393f;
    }
    .mx_EventTile:not([data-layout=bubble]).mx_EventTile.focus-visible:focus-within .mx_EventTile_line,
    .mx_EventTile:not([data-layout=bubble]).mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line,
    .mx_EventTile:not([data-layout=bubble]).mx_EventTile:hover .mx_EventTile_line,
    .mx_EventTile:hover {
        background-color: #32353b;
    }
    .mx_DateSeparator {
        border-bottom: thin solid #ffffff0f;
        padding-bottom: 0;
    }
    .mx_DateSeparator > div {
        font-weight: 500;
        font-size: 12px;
        margin-bottom: -12px;
        background-color: #36393f;
        padding: 4px 9px;
    }
    .mx_SenderProfile_displayName {
        color: white !important;
        font-size: 16px;
        font-weight: 600;
    }
    .mx_SenderProfile + .mx_EventTile_avatar {
        margin-left: 6px;
    }
    .mx_SenderProfile + .mx_EventTile_avatar .mx_BaseAvatar_image {
        width: 36px !important;
        height: 36px !important;
    }
    .mx_SenderProfile + .mx_EventTile_avatar .mx_BaseAvatar_initial {
        font-size: 20px !important;
        width: 36px !important;
        line-height: 36px !important;
    }
    .mx_EventTile:not([data-layout=bubble]),
    .mx_EventTile_content .markdown-body {
        font-size: 16px;
        color: #dcddde;
    }
    .mx_EventTile_content .markdown-body code,
    .mx_EventTile_content .markdown-body pre,
    .mx_RoomHeader {
        background-color: #35393f
    }
    .mx_EventTile_content .markdown-body a {
        color: hsl(197, 100%, 47.8%)
    }
    a:hover,
    a:link {
        color: hsl(197, 100%, 48%)
    }
    .mx_NotificationBadge.mx_NotificationBadge_visible .mx_NotificationBadge_count {
        font-weight: 600;
        font-size: 12px;
        text-shadow: 0 0 2px #1d1d1d;
    }
    .mx_AccessibleButton.mx_ReactionsRowButton {
        background-color: #2f3136;
        border: none;
        padding: 0.325rem 1rem;
        font-size: 14px;
    }
    .mx_AccessibleButton.mx_ReactionsRowButton.mx_ReactionsRowButton_selected {
        border: 1px solid #ffffff6b;
    }
    .mx_SendMessageComposer {
        font-size: 16px;
    }
    .mx_MessageComposer_wrapper {
        background: #40444b;
        padding-left: 40px;
        margin: 0px 8px 8px 10px;
        border-radius: 8px;
    }
    .mx_MessageComposer_row .mx_MessageComposer_avatar {
        display: none;
    }
    .mx_MessageComposer_e2eIcon.mx_E2EIcon {
        left: 14px;
    }
    .mx_SendMessageComposer .mx_BasicMessageComposer {
        min-height: 42px
    }
    .mx_EventTile:not([data-layout=bubble]):hover.mx_EventTile_verified .mx_EventTile_line {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
        border-color: transparent;
    }
    .mx_MessageActionBar {
        background-color: #36393f
    }
    .mx_ContextualMenu {
        background-color: #18191c;
        border-radius: 4px;
    }
    .mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:first-child .mx_AccessibleButton:first-child,
    .mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:last-child .mx_AccessibleButton:last-child {
        border-radius: 0;
    }
    .mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton:hover {
        background-color: #ffffff12;
    }
    .mx_RoomSublist .mx_RoomSublist_resizeBox.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_resizerHandle,
    .mx_RoomSublist .mx_RoomSublist_resizeBox:hover .mx_RoomSublist_resizerHandle {
        background-color: #ffffffa0
    }
    .mx_ReplyPreview {
        background-color: #36393f;
        box-shadow: 0 2px 3px rgb(0 0 0 / 8%);
    }
    .mx_EventTile_highlight {
        background-color: #4d433b;
        border-left: 2px solid gold;
    }
    .mx_EventTile_highlight.mx_EventTile.focus-visible:focus-within .mx_EventTile_line,
    .mx_EventTile_highlight.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line,
    .mx_EventTile_highlight.mx_EventTile:hover .mx_EventTile_line,
    .mx_EventTile_highlight.mx_EventTile:hover {
        background-color: #4d433b !important;
    }
    .mx_EventTile:not([data-layout=bubble]).mx_EventTile_highlight .markdown-body .mx_EventTile_line,
    .mx_EventTile:not([data-layout=bubble]).mx_EventTile_highlight .mx_EventTile_line {
        background-color: unset;
        border: none;
        border-radius: 0;
    }
    .mx_EventTile:not([data-layout=bubble]).mx_EventTile_highlight,
    .mx_EventTile:not([data-layout=bubble]).mx_EventTile_highlight .markdown-body,
    .mx_EventTile_body {
        color: #dcddde;
    }
    .mx_EventTile_content .markdown-body a.mx_UserPill,
    .mx_UserPill,
    .mx_EventTile_content .markdown-body a.mx_AtRoomPill,
    .mx_EventTile_content .mx_AtRoomPill,
    .mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me,
    .mx_MessageComposer_input .mx_AtRoomPill {
        background-color: #3a4973;
    }
    .mx_AtRoomPill,
    .mx_GroupPill,
    .mx_RoomPill,
    .mx_UserPill {
        border-radius: 2px;
        padding: 0px 2px;
        font-size: 16px;
        line-height: unset;
        font-weight: 500;
    }
    .mx_EventTile:not([data-layout=bubble]) .mx_EventTile_avatar {
        top: 5px;
        left: 8px;
    }
    .mx_EventTile:not([data-layout=bubble]) {
        margin-top: 4px;
        padding-top: 6px;
    }
    .mx_MessageTimestamp {
        z-index: 100;
        background-color: transparent;
        border-radius: 0px;
        left: 10px !important;
        color: #e0e0e0ba;
        top: 0px !important;
        font-size: 12px;
        font-weight: 600;
        text-transform: lowercase;
    }
    .mx_SenderProfile + .mx_EventTile_avatar + .mx_EventTile_line .mx_MessageTimestamp {
        top: 8px !important;
    }
    .mx_EventTile_lastInSection .mx_EventTile:not([data-layout=bubble]) .mx_MessageTimestamp {
        right: 0px;
        left: unset;
    }
    .mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button {
        font-size: 14px
    }
    .mx_TabbedView_tabLabel {
        font-size: 16px;
        font-weight: 500;
        opacity: 0.6;
    }
    .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabel_active {
        opacity: 1;
    }
    .mx_EventTile:not([data-layout=bubble]).mx_EventTile_continuation {
        margin-top: -2px;
    }
    .mx_EventTile:not([data-layout=bubble]).mx_EventTile_selected > .mx_EventTile_line {
        background-color: #282a2d;
        border: transparent;
        border-radius: 4px;
    }
    .mx_RoomHeader_topic {
        font-size: 14px
    }
    .mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee {
        border-color: #2e3136
    }
    .mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton .mx_IconizedContextMenu_icon + .mx_IconizedContextMenu_label {
        font-size: 16px;
        font-weight: 500;
    }
    .mx_SettingsTab_subsectionText,
    .mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label {
        font-size: 16px;
    }
    .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabel_active {
        background-color: #383c42;
    }
    .mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton {
        margin: 0px 8px;
        margin-top: 4px;
        padding: 8px 12px;
        border-radius: 4px;
    }
    .mx_UserMenu_contextMenu.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_AccessibleButton {
        margin: 8px 8px;
        padding: 8px 12px;
        border-radius: 4px;
    }
    .mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:last-child .mx_AccessibleButton:last-child {
        border-radius: 4px;
    }
    .mx_ContextualMenu > .mx_AccessibleButton {
        margin-top: 8px;
    }
    .mx_ContextualMenu {
        padding-bottom: 6px;
        padding-top: 4px;
    }
    .mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header {
        padding-bottom: 4px;
    }
    .mx_Dialog {
        background-color: #1f2225;
    }
    .mx_EventTile:not([data-layout=bubble]) .mx_EventTile_e2eIcon {
        right: 4px;
        left: unset;
    }
    .mx_UserInfo.mx_BaseCard,
    .mx_PresenceLabel {
        font-size: 14px
    }
    .mx_AccessibleButton_kind_danger,
    .mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm {
        color: #ff0000c9;
        background-color: #ff000e2e;
        font-weight: 600;
    }
    .mx_AccessibleButton_kind_primary {
        color: #00ffb7bd;
        background-color: #00ffb71a;
        font-weight: 600;
    }
    .mx_Field_labelAlwaysTopLeft label,
    .mx_Field input:focus + label,
    .mx_Field input:not(:placeholder-shown) + label,
    .mx_Field select + label,
    .mx_Field textarea:focus + label,
    .mx_Field textarea:not(:placeholder-shown) + label,
    .mx_Field input,
    .mx_Field select,
    .mx_Field textarea {
        background-color: #1e2225;
    }
    .mx_Spinner_icon {
        mask: none;
        -webkit-mask: none;
        border: 2px solid #ffffff45;
        border-left: 2px solid white;
        background-color: unset;
        border-radius: 999px;
        animation: spin 1.1s infinite;
        -webkit-animation: spin 1.1s infinite;
        height: 24px !important;
        width: 24px !important;
    }
    .mx_MemberList_section .mx_EntityTile {
        border-radius: 4px;
        padding-left: 6px;
    }
    .mx_EntityTile:hover .mx_EntityTile_name,
    .mx_GroupRoomTile_name {
        color: #dcddde;
    }
    .mx_EntityTile:hover {
        background-color: #32363c
    }
    .mx_EntityTile_name,
    .mx_GroupRoomTile_name {
        font-size: 16px;
        font-weight: 500;
        color: #8e9297;
    }
    .mx_GroupMemberList,
    .mx_GroupRoomList,
    .mx_MemberList {
        flex-direction: column-reverse;
    }
    .mx_MemberList_section .mx_BaseAvatar_image {
        width: 32px !important;
        height: 32px !important;
    }
    .mx_MemberList_section .mx_BaseAvatar_initial {
        font-size: 16px !important;
        width: 32px !important;
        line-height: 32px !important;
    }
    .mx_MemberList_section .mx_EntityTile_avatar,
    .mx_GroupRoomTile_avatar {
        padding: 6px 12px 4px 3px;
    }
    .mx_BaseCard .mx_BaseCard_footer {
        margin: 0 34px;
        margin-top: -42px;
    }
    .mx_RightPanel {
        border-radius: 0;
    }
    .mx_MainSplit > .mx_RightPanel_ResizeWrapper {
        padding: 0
    }
    .mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon,
    .mx_ExtraTile .mx_DecoratedRoomAvatar_icon {
        right: 2px;
        bottom: 2px;
    }
    .mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon:before,
    .mx_ExtraTile .mx_DecoratedRoomAvatar_icon:before {
        width: 10px;
        height: 10px;
        border: 3px solid #2e3136;
    }
    .mx_RoomTile_selected .mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon:before,
    .mx_RoomTile:hover .mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon:before {
        border: 3px solid #383c42;
    }
    .mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_away:before,
    .mx_ExtraTile .mx_DecoratedRoomAvatar_icon_away:before {
        background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%2257.946%204.909%2019.72%2019.854%22%20width%3D%2219.72%22%20height%3D%2219.854%22%3E%3Cpath%20d%3D%22%20M%2068.156%2014.979%20C%2070.79%2012.345%2069.416%207.976%2068.312%204.924%20C%2074.376%204.457%2081.5%2015.017%2075.232%2021.602%20C%2068.964%2028.188%2057.946%2023.583%2057.946%2016.015%20C%2061.506%2017.039%2065.522%2017.612%2068.156%2014.979%20Z%20%22%20fill%3D%22rgb%28255%2C163%2C45%29%22/%3E%3C/svg%3E);
        background-size: cover;
        background-color: transparent;
    }
    .mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_online:before,
    .mx_ExtraTile .mx_DecoratedRoomAvatar_icon_online:before {
        background-color: #15a362;
        width: 9px;
        height: 9px;
    }
    .mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_offline:before,
    .mx_ExtraTile .mx_DecoratedRoomAvatar_icon_offline:before {
        background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%2210%2010%2010%2010%22%20width%3D%2210%22%20height%3D%2210%22%3E%3Cpath%20d%3D%22%20M%2010%2015%20C%2010%2012.24%2012.24%2010%2015%2010%20C%2017.76%2010%2020%2012.24%2020%2015%20C%2020%2017.76%2017.76%2020%2015%2020%20C%2012.24%2020%2010%2017.76%2010%2015%20Z%20%20M%2012.5%2015%20C%2012.5%2013.62%2013.62%2012.5%2015%2012.5%20C%2016.38%2012.5%2017.5%2013.62%2017.5%2015%20C%2017.5%2016.38%2016.38%2017.5%2015%2017.5%20C%2013.62%2017.5%2012.5%2016.38%2012.5%2015%20Z%20%22%20fill-rule%3D%22evenodd%22%20fill%3D%22%2371808c%22/%3E%3C/svg%3E);
        background-size: cover;
        background-color: transparent;
    }
    ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
    .mx_AutoHideScrollbar::-webkit-scrollbar,
    .mx_AutoHideScrollbar::-webkit-scrollbar-thumb {
        background-color: transparent;
    }
    ::-webkit-scrollbar-thumb {
        background-color: #4a4c4f;
    }
    .mx_BaseCard .mx_BaseCard_header {
        margin: 4px 0;
    }
    .mx_MemberList_invite {
        margin: 0 10px;
        background-color: #00b17f70;
        color: #eee
    }
    .mx_MemberList_section .mx_EntityTile {
        position: relative;
    }
    .mx_MemberList_section .mx_EntityTile_online .mx_PresenceLabel {
        display: block !important;
        position: absolute;
        width: 10px;
        height: 10px;
        flex-shrink: 0;
        content: ' ';
        background-color: #15a362;
        opacity: 1;
        color: transparent;
        border-radius: 999px;
        left: 30px;
        top: 24px;
        border: 3px solid #2e3136;
    }
    .mx_MemberList_section .mx_EntityTile_unavailable .mx_EntityTile_details::after {
        display: block !important;
        position: absolute;
        width: 10px;
        height: 10px;
        flex-shrink: 0;
        content: ' ';
        background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%2257.946%204.909%2019.72%2019.854%22%20width%3D%2219.72%22%20height%3D%2219.854%22%3E%3Cpath%20d%3D%22%20M%2068.156%2014.979%20C%2070.79%2012.345%2069.416%207.976%2068.312%204.924%20C%2074.376%204.457%2081.5%2015.017%2075.232%2021.602%20C%2068.964%2028.188%2057.946%2023.583%2057.946%2016.015%20C%2061.506%2017.039%2065.522%2017.612%2068.156%2014.979%20Z%20%22%20fill%3D%22rgb%28255%2C163%2C45%29%22/%3E%3C/svg%3E);
        background-size: cover;
        opacity: 1;
        background-color: #2e3136;
        color: transparent;
        border-radius: 999px;
        left: 30px;
        top: 24px;
        border: 3px solid #2e3136;
    }
    .mx_MemberList_section .mx_EntityTile_offline_beenactive .mx_EntityTile_details::after {
        display: block !important;
        position: absolute;
        width: 10px;
        height: 10px;
        flex-shrink: 0;
        content: ' ';
        background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%2210%2010%2010%2010%22%20width%3D%2210%22%20height%3D%2210%22%3E%3Cpath%20d%3D%22%20M%2010%2015%20C%2010%2012.24%2012.24%2010%2015%2010%20C%2017.76%2010%2020%2012.24%2020%2015%20C%2020%2017.76%2017.76%2020%2015%2020%20C%2012.24%2020%2010%2017.76%2010%2015%20Z%20%20M%2012.5%2015%20C%2012.5%2013.62%2013.62%2012.5%2015%2012.5%20C%2016.38%2012.5%2017.5%2013.62%2017.5%2015%20C%2017.5%2016.38%2016.38%2017.5%2015%2017.5%20C%2013.62%2017.5%2012.5%2016.38%2012.5%2015%20Z%20%22%20fill-rule%3D%22evenodd%22%20fill%3D%22%2371808c%22/%3E%3C/svg%3E);
        background-size: cover;
        opacity: 1;
        background-color: #2e3136;
        color: transparent;
        border-radius: 999px;
        left: 30px;
        top: 24px;
        border: 3px solid #2e3136;
    }
    .mx_MemberList_section .mx_EntityTile_offline_neveractive .mx_EntityTile_details::after {
        display: block !important;
        position: absolute;
        width: 10px;
        height: 10px;
        flex-shrink: 0;
        content: ' ';
        background-color: #424242;
        opacity: 1;
        color: transparent;
        border-radius: 999px;
        left: 30px;
        top: 24px;
        border: 3px solid #2e3136;
    }
    .mx_EntityTile:hover:before {
        right: 0px;
    }
    .mx_MemberList_wrapper {
        padding: 8px;
    }
    .mx_GroupMemberList h2,
    .mx_GroupRoomList h2,
    .mx_MemberList h2 {
        font-size: 12px;
        color: #8e9297;
    }